#page-loader {
    position: fixed; inset: 0; background: #0A0A0A;
    z-index: 9999; pointer-events: none;
    opacity: 1; transition: opacity 0.4s ease;
}
#page-loader.loaded { opacity: 0; }

.clip-card    { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.clip-banner  { clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px)); }
.clip-release { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }

.img-dim { transition: transform 0.55s ease; }
.group:hover .img-dim, .vec-slide-link:hover .img-dim { transform: scale(1.05); }

body.vec-theme::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        radial-gradient(circle 1.5px at 0 0, rgba(255,255,255,0.14) 100%, transparent 100%),
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 36px 36px;
}

.vec-bg-arrows {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        radial-gradient(ellipse 70% 60% at 50% 50%, transparent 40%, rgba(0,0,0,0.35) 100%);
}

body.vec-theme footer { background: rgba(10,10,10,0.98) !important; border-top: 2px solid rgba(255,255,255,0.12) !important; margin-top: 4rem; }
body.vec-theme footer .border-t { border-color: rgba(255,255,255,0.07) !important; }
body.vec-theme .fixed.bottom-6 { background: #D4D4D4 !important; border-radius: 0 !important; transform: skewX(-12deg); box-shadow: 0 0 14px rgba(212,212,212,0.4) !important; }
body.vec-theme .fixed.bottom-6:hover { background: #F0F0F0 !important; }

.vec-page-active { box-shadow: 0 0 14px rgba(212,212,212,0.45); }

.swiper-pagination-bullet { background: rgba(255,255,255,0.25); opacity: 1; }
.swiper-pagination-bullet-active { background: #D4D4D4; box-shadow: 0 0 8px rgba(255,255,255,0.5); width: 20px; border-radius: 4px; }

.dropdown-menu {
  transition: max-height 0.5s ease, opacity 0.5s ease;
}

.game-card {
  position: relative;
  font-family: "Chakra Petch", serif;
  font-weight: 300;
  font-style: normal;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), filter 0.22s ease;
  filter: drop-shadow(0 0 3px rgba(212, 212, 212, 0.55));
}

.game-card:hover {
  transform: translateY(-5px);
  filter: drop-shadow(0 0 8px rgba(240, 240, 240, 0.85));
  z-index: 1;
}

.game-card .description {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 4;
}

.game-card .info {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem;
  color: white;
  position: absolute;
  bottom: 0;
  width: 100%;
}

.game-card .info-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0.5rem;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  z-index: 3;
}

.game-card .info-box {
  padding: 0.5rem;
  border-radius: 0.25rem;
}

.game-card .title {
  padding: 0.5rem;
  color: white;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;
}

.snowflake,
.pumpkin {
  position: absolute;
  top: -50px;
  font-size: 2rem;
  animation: fall 5s linear infinite;
  pointer-events: none;
}

@keyframes fall {
  to {
    transform: translateY(50vh);
    opacity: 0;
  }
}

.game-card img:first-child,
.game-card .w-full.h-48.object-cover {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.game-card:hover img:first-child,
.game-card:hover .w-full.h-48.object-cover {
  transform: scale(1.04);
}

main {
  animation: fadeInUp 0.32s ease both;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 375px) {
  .container { padding-left: 0.75rem; padding-right: 0.75rem; }
}

.overflow-x-auto {
  scrollbar-width: thin;
  scrollbar-color: #374151 transparent;
}
.overflow-x-auto::-webkit-scrollbar { height: 4px; }
.overflow-x-auto::-webkit-scrollbar-track { background: transparent; }
.overflow-x-auto::-webkit-scrollbar-thumb { background: #374151; border-radius: 4px; }

.video-bg {
  display: block;
  object-fit: cover;
  opacity: 1;
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  left: 0px;
  top: 0px;
  object-position: 50% 50%;
}

.chakra-petch-light { font-family: "Chakra Petch", serif; font-weight: 300; font-style: normal; }
.chakra-petch-regular { font-family: "Chakra Petch", serif; font-weight: 400; font-style: normal; }
.chakra-petch-medium { font-family: "Chakra Petch", serif; font-weight: 500; font-style: normal; }
.chakra-petch-semibold { font-family: "Chakra Petch", serif; font-weight: 600; font-style: normal; }
.chakra-petch-bold { font-family: "Chakra Petch", serif; font-weight: 700; font-style: normal; }
.chakra-petch-light-italic { font-family: "Chakra Petch", serif; font-weight: 300; font-style: italic; }
.chakra-petch-regular-italic { font-family: "Chakra Petch", serif; font-weight: 400; font-style: italic; }
.chakra-petch-medium-italic { font-family: "Chakra Petch", serif; font-weight: 500; font-style: italic; }
.chakra-petch-semibold-italic { font-family: "Chakra Petch", serif; font-weight: 600; font-style: italic; }
.chakra-petch-bold-italic { font-family: "Chakra Petch", serif; font-weight: 700; font-style: italic; }

body.vec-theme::after {
    content: '';
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 3px,
        rgba(0, 0, 0, 0.07) 3px,
        rgba(0, 0, 0, 0.07) 4px
    );
}

.vec-corners {
    position: relative;
}
.vec-corners::before,
.vec-corners::after {
    content: '';
    position: absolute;
    width: 10px; height: 10px;
    pointer-events: none;
    z-index: 2;
}
.vec-corners::before {
    top: 4px; left: 4px;
    border-top: 1px solid rgba(212,212,212,0.35);
    border-left: 1px solid rgba(212,212,212,0.35);
}
.vec-corners::after {
    bottom: 4px; right: 4px;
    border-bottom: 1px solid rgba(212,212,212,0.35);
    border-right: 1px solid rgba(212,212,212,0.35);
}
[data-corners]::before { top: 4px; right: 4px; border-top: 1px solid rgba(212,212,212,0.25); border-right: 1px solid rgba(212,212,212,0.25); }
[data-corners]::after  { bottom: 4px; left: 4px; border-bottom: 1px solid rgba(212,212,212,0.25); border-left: 1px solid rgba(212,212,212,0.25); }

.vec-corners-full {
    position: relative;
}
.vec-corners-full::before {
    content: '';
    position: absolute;
    inset: 3px;
    pointer-events: none;
    z-index: 2;
    background-image:
        linear-gradient(rgba(212,212,212,0.4), rgba(212,212,212,0.4)),
        linear-gradient(rgba(212,212,212,0.4), rgba(212,212,212,0.4)),
        linear-gradient(rgba(212,212,212,0.4), rgba(212,212,212,0.4)),
        linear-gradient(rgba(212,212,212,0.4), rgba(212,212,212,0.4)),
        linear-gradient(45deg, transparent calc(50% - 0.5px), rgba(212,212,212,0.5) calc(50% - 0.5px), rgba(212,212,212,0.5) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(45deg, transparent calc(50% - 0.5px), rgba(212,212,212,0.5) calc(50% - 0.5px), rgba(212,212,212,0.5) calc(50% + 0.5px), transparent calc(50% + 0.5px));
    background-size:
        12px 1px,
        1px 12px,
        12px 1px,
        1px 12px,
        18px 18px,
        18px 18px;
    background-position:
        top left,
        top left,
        bottom right,
        bottom right,
        top right,
        bottom left;
    background-repeat: no-repeat;
}

.vec-glitch {
    position: relative;
    display: inline-block;
}
.vec-glitch:hover {
    animation: glitch-main 0.4s steps(1) both;
}
.vec-glitch::before,
.vec-glitch::after {
    content: attr(data-text);
    position: absolute; inset: 0;
    pointer-events: none;
    opacity: 0;
}
.vec-glitch::before { color: #ca8a04; clip-path: polygon(0 30%, 100% 30%, 100% 55%, 0 55%); }
.vec-glitch::after  { color: #a3a3a3; clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%); }
.vec-glitch:hover::before { animation: glitch-slice-1 0.4s steps(1) both; }
.vec-glitch:hover::after  { animation: glitch-slice-2 0.4s steps(1) both; }

@keyframes glitch-main {
    0%,100% { transform: translateX(0); }
    20%      { transform: translateX(-2px); }
    40%      { transform: translateX(2px); }
    60%      { transform: translateX(-1px); }
}
@keyframes glitch-slice-1 {
    0%,100% { opacity: 0; transform: translateX(0); }
    15%,35% { opacity: 0.8; transform: translateX(3px); }
    50%,70% { opacity: 0.6; transform: translateX(-3px); }
}
@keyframes glitch-slice-2 {
    0%,100% { opacity: 0; transform: translateX(0); }
    25%,45% { opacity: 0.7; transform: translateX(-4px); }
    60%,80% { opacity: 0.5; transform: translateX(2px); }
}