@font-face{font-family:'Haven Set';src:url('fonts/DB-Heavent.ttf') format('truetype');font-weight:100 400;font-display:swap}
@font-face{font-family:'Haven Set';src:url('fonts/DB-Heavent-Med.ttf') format('truetype');font-weight:500 700;font-display:swap}
@font-face{font-family:'Haven Set';src:url('fonts/DB-Heavent-Bd.ttf') format('truetype');font-weight:800 900;font-display:swap}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{font-size:calc(18px + 0.390625vw)}
html{height:100%;scroll-behavior:smooth}
body{font-family:'Haven Set','Helvetica Neue',Arial,sans-serif;background:#0d1a0f;color:#fff;min-height:100vh;overflow-x:hidden}
h2{font-size:clamp(1.5rem,7.5vw,2rem)!important;font-weight:900!important}
p{font-size:clamp(1rem,1.75vw,1.25rem)!important;margin:0!important}
a{font-size:clamp(1rem,1.75vw,1rem)!important;margin:0!important}

@keyframes float-1{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(-4px,-8px) rotate(-5deg)}}
@keyframes float-2{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(4px,-6px) rotate(4deg)}}
@keyframes float-3{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(-3px,-10px) rotate(-3deg)}}
@keyframes float-4{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(5px,-7px) rotate(6deg)}}
@keyframes firefly{0%,100%{opacity:0;transform:translate(0,0) scale(1)}20%{opacity:.8}50%{opacity:.3;transform:translate(6px,-12px) scale(1.4)}80%{opacity:.9}}
@keyframes firefly-2{0%,100%{opacity:0;transform:translate(0,0) scale(1)}30%{opacity:.6;transform:translate(-8px,-8px) scale(1.2)}60%{opacity:.1}90%{opacity:.7;transform:translate(4px,-16px) scale(1.5)}}
@keyframes pop-in{0%{transform:scale(.8) translateY(24px);opacity:0}100%{transform:scale(1) translateY(0);opacity:1}}
@keyframes title-glow{0%,100%{text-shadow:0 0 20px rgba(80,160,60,.8),0 0 40px rgba(80,160,60,.4)}50%{text-shadow:0 0 30px rgba(80,160,60,1),0 0 60px rgba(80,160,60,.6),0 0 80px rgba(163,201,122,.3)}}

.container{width:100%;padding-right:.75rem;padding-left:.75rem;margin-right:auto;margin-left:auto}
@media(min-width:576px){.container{max-width:540px}}
@media(min-width:768px){.container{max-width:720px}}
@media(min-width:992px){.container{max-width:960px}}
@media(min-width:1200px){.container{max-width:1140px}}
@media(min-width:1400px){.container{max-width:1320px}}

.games-page{
  padding-block:0;
  padding-bottom:5rem;
  min-height:100vh;
  position:relative;
  overflow:hidden;
  background:#0d1a0f;
  background-image:
    radial-gradient(ellipse at 20% 20%,rgba(34,85,34,.25) 0%,transparent 55%),
    radial-gradient(ellipse at 80% 80%,rgba(139,90,43,.18) 0%,transparent 55%);
}
.games-page::before,.games-page::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0}
.games-page::before{
  background-image:
    radial-gradient(3px 3px at 10% 15%,rgba(180,220,100,.6) 0%,transparent 100%),
    radial-gradient(2px 2px at 25% 40%,rgba(180,220,100,.4) 0%,transparent 100%),
    radial-gradient(3px 3px at 40% 10%,rgba(200,230,120,.5) 0%,transparent 100%),
    radial-gradient(2px 2px at 55% 60%,rgba(180,220,100,.4) 0%,transparent 100%),
    radial-gradient(3px 3px at 70% 25%,rgba(200,230,120,.6) 0%,transparent 100%),
    radial-gradient(2px 2px at 80% 75%,rgba(180,220,100,.3) 0%,transparent 100%),
    radial-gradient(3px 3px at 90% 45%,rgba(200,230,120,.5) 0%,transparent 100%),
    radial-gradient(2px 2px at 15% 80%,rgba(180,220,100,.4) 0%,transparent 100%),
    radial-gradient(3px 3px at 35% 65%,rgba(200,230,120,.6) 0%,transparent 100%),
    radial-gradient(2px 2px at 60% 85%,rgba(180,220,100,.3) 0%,transparent 100%),
    radial-gradient(3px 3px at 75%  5%,rgba(200,230,120,.5) 0%,transparent 100%),
    radial-gradient(2px 2px at 92% 90%,rgba(180,220,100,.4) 0%,transparent 100%),
    radial-gradient(3px 3px at  5% 50%,rgba(200,230,120,.6) 0%,transparent 100%),
    radial-gradient(2px 2px at 48% 35%,rgba(180,220,100,.3) 0%,transparent 100%),
    radial-gradient(3px 3px at 85% 55%,rgba(200,230,120,.5) 0%,transparent 100%),
    radial-gradient(2px 2px at 20% 95%,rgba(180,220,100,.4) 0%,transparent 100%),
    radial-gradient(3px 3px at 65% 48%,rgba(200,230,120,.6) 0%,transparent 100%),
    radial-gradient(2px 2px at 95% 20%,rgba(180,220,100,.3) 0%,transparent 100%),
    radial-gradient(3px 3px at 30% 22%,rgba(200,230,120,.5) 0%,transparent 100%),
    radial-gradient(2px 2px at 50% 70%,rgba(180,220,100,.4) 0%,transparent 100%);
  animation:firefly 4s ease-in-out infinite;
}
.games-page::after{
  background-image:
    radial-gradient(3px 3px at 18% 33%,rgba(220,200,80,.5) 0%,transparent 100%),
    radial-gradient(2px 2px at 44% 78%,rgba(180,220,100,.4) 0%,transparent 100%),
    radial-gradient(3px 3px at 62% 18%,rgba(220,200,80,.6) 0%,transparent 100%),
    radial-gradient(2px 2px at 78% 62%,rgba(180,220,100,.3) 0%,transparent 100%),
    radial-gradient(3px 3px at 88% 38%,rgba(220,200,80,.5) 0%,transparent 100%),
    radial-gradient(2px 2px at  8% 72%,rgba(180,220,100,.4) 0%,transparent 100%),
    radial-gradient(3px 3px at 52% 92%,rgba(220,200,80,.6) 0%,transparent 100%),
    radial-gradient(2px 2px at 33% 55%,rgba(180,220,100,.3) 0%,transparent 100%),
    radial-gradient(3px 3px at 72% 88%,rgba(220,200,80,.5) 0%,transparent 100%),
    radial-gradient(2px 2px at 96% 68%,rgba(180,220,100,.4) 0%,transparent 100%);
  animation:firefly-2 5.5s ease-in-out infinite reverse;
}

.games-page .games-hero,
.games-page .games-section-title,
.games-page .games-grid{position:relative;z-index:1}

.games-page .games-hero{position:relative;overflow:hidden;margin-bottom:2rem}
.games-page .games-hero img{width:100%;height:auto;display:block}
.games-page .games-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#0d1a0f 0%,transparent 50%);pointer-events:none}

.games-page .games-section-title{text-align:center;margin-bottom:1.5rem;padding-inline:1rem}
.games-page .games-section-title h2{animation:title-glow 3s ease-in-out infinite;margin:0 0 .4rem!important;letter-spacing:.04em}
.games-page .games-section-title h2 img{width:clamp(1.6rem,4vw,2.2rem);margin-right:.5rem;vertical-align:middle;display:inline-block}
.games-page .games-section-title p{color:rgba(255,255,255,.55);font-size:clamp(.8rem,2.5vw,.95rem);margin:0}

.games-page .games-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5.5rem .75rem;padding-inline:.75rem;padding-top:5rem}
@media(min-width:400px){.games-page .games-grid{gap:6rem .85rem}}
@media(min-width:576px){.games-page .games-grid{grid-template-columns:repeat(3,1fr);gap:6.5rem 1rem;padding-top:5.5rem}}
@media(min-width:768px){.games-page .games-grid{grid-template-columns:repeat(3,1fr);gap:7.5rem 1.25rem;padding-top:6rem}}
@media(min-width:992px){.games-page .games-grid{grid-template-columns:repeat(4,1fr);gap:8rem 1.25rem;padding-top:6.5rem}}
@media(min-width:1200px){.games-page .games-grid{grid-template-columns:repeat(4,1fr);gap:8.5rem 1.5rem}}

/* ── Card ── */
.games-page .game-card{
  --glow:rgba(60,120,40,.5);
  --char-size:8rem;
  position:relative;
  border-radius:16px;
  text-decoration:none;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:linear-gradient(145deg,#0f1f10,#1a2e14);
  border:1.5px solid rgba(255,255,255,.08);
  padding:0 .75rem .85rem;
  padding-top:calc(var(--char-size)*.6);
  animation:pop-in .45s cubic-bezier(.22,1,.36,1) both;
  transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease,border-color .22s ease;
}
@media(min-width:576px){.games-page .game-card{--char-size:9rem}}
@media(min-width:768px){.games-page .game-card{--char-size:10rem}}
@media(min-width:992px){.games-page .game-card{--char-size:11rem}}

/* animation-delay @for $i from 1 through 12 */
.games-page .game-card:nth-child(1){animation-delay:0s}
.games-page .game-card:nth-child(2){animation-delay:.055s}
.games-page .game-card:nth-child(3){animation-delay:.110s}
.games-page .game-card:nth-child(4){animation-delay:.165s}
.games-page .game-card:nth-child(5){animation-delay:.220s}
.games-page .game-card:nth-child(6){animation-delay:.275s}
.games-page .game-card:nth-child(7){animation-delay:.330s}
.games-page .game-card:nth-child(8){animation-delay:.385s}
.games-page .game-card:nth-child(9){animation-delay:.440s}
.games-page .game-card:nth-child(10){animation-delay:.495s}
.games-page .game-card:nth-child(11){animation-delay:.550s}
.games-page .game-card:nth-child(12){animation-delay:.605s}

/* glow per card */
.games-page .game-card:nth-child(1) {--glow:rgba(46,139,87,.65)}
.games-page .game-card:nth-child(2) {--glow:rgba(180,100,30,.65)}
.games-page .game-card:nth-child(3) {--glow:rgba(160,60,40,.65)}
.games-page .game-card:nth-child(4) {--glow:rgba(100,60,140,.65)}
.games-page .game-card:nth-child(5) {--glow:rgba(30,100,150,.65)}
.games-page .game-card:nth-child(6) {--glow:rgba(190,130,20,.65)}
.games-page .game-card:nth-child(7) {--glow:rgba(150,50,30,.65)}
.games-page .game-card:nth-child(8) {--glow:rgba(20,130,100,.65)}
.games-page .game-card:nth-child(9) {--glow:rgba(80,160,60,.65)}
.games-page .game-card:nth-child(10){--glow:rgba(170,70,0,.65)}
.games-page .game-card:nth-child(11){--glow:rgba(20,150,100,.65)}
.games-page .game-card:nth-child(12){--glow:rgba(30,60,40,.9)}

/* hover / focus */
.games-page .game-card:hover,
.games-page .game-card:focus-visible{transform:translateY(-5px) scale(1.02);border-color:rgba(255,255,255,.22);box-shadow:0 10px 36px var(--glow);text-decoration:none;color:#fff;outline:none}
.games-page .game-card:hover .game-character,
.games-page .game-card:focus-visible .game-character,
.games-page .game-card:hover .game-character-multi,
.games-page .game-card:focus-visible .game-character-multi{transform:translateY(-6px) scale(1.1);filter:drop-shadow(0 8px 20px var(--glow))}
.games-page .game-card:hover .game-play-btn,
.games-page .game-card:focus-visible .game-play-btn{background:var(--glow);border-color:transparent;color:#fff;box-shadow:0 0 14px 2px var(--glow)}

/* per-card overrides */
.games-page .game-card:nth-child(6) .game-character-wrap .game-mains-row .game-character-multi{max-width:52%;margin-inline:-12%}
.games-page .game-card:nth-child(9) .game-character-wrap .game-mains-row .game-character-multi:nth-child(2){animation:float-2 3s ease-in-out infinite}
.games-page .game-card:nth-child(10) .game-character-wrap .game-mains-row .game-character-multi{max-width:55%;margin-inline:-10%}
.games-page .game-card:nth-child(10) .game-character-wrap .game-mains-row .game-character-multi:nth-child(2){max-width:30%}

.games-page .game-card:nth-child(1) .game-character-wrap .game-element-3,
.games-page .game-card:nth-child(3) .game-character-wrap .game-element-3,
.games-page .game-card:nth-child(4) .game-character-wrap .game-element-3,
.games-page .game-card:nth-child(7) .game-character-wrap .game-element-3,
.games-page .game-card:nth-child(8) .game-character-wrap .game-element-3{left:-4%;top:68%;width:22%;transform:none}

.games-page .game-card:nth-child(2) .game-character-wrap .game-element-2{left:unset;right:-6%}
.games-page .game-card:nth-child(2) .game-character-wrap .game-element-3{left:-4%;top:68%;width:22%;transform:none}

.games-page .game-card:nth-child(12) .game-character-wrap .game-character{transform:scale(.82);transform-origin:bottom center}
.games-page .game-card:nth-child(12) .game-character-wrap .game-element-1{left:-5%;top:-8%;transform:none}
.games-page .game-card:nth-child(12) .game-character-wrap .game-element-2{right:0%;top:-4%;left:unset}
.games-page .game-card:nth-child(12) .game-character-wrap .game-element-3{left:-4%;top:68%;width:22%;transform:none}
.games-page .game-card:nth-child(12):hover .game-character-wrap .game-character,
.games-page .game-card:nth-child(12):focus-visible .game-character-wrap .game-character{transform:scale(.9) translateY(-6px)}

/* ── Character wrap ── */
.games-page .game-card .game-character-wrap{position:absolute;top:calc(var(--char-size)*-.55);width:var(--char-size);height:var(--char-size);z-index:2;overflow:visible;pointer-events:none}
.games-page .game-card .game-character-wrap.game-mains-2,
.games-page .game-card .game-character-wrap.game-mains-3{width:calc(100% + 1.5rem);height:calc(var(--char-size)*.9);top:calc(var(--char-size)*-.2);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.games-page .game-card .game-character-wrap.game-mains-2 .game-mains-row,
.games-page .game-card .game-character-wrap.game-mains-3 .game-mains-row{position:relative;inset:unset;width:100%}
.games-page .game-card .game-character-wrap.game-mains-2 .game-elements-below,
.games-page .game-card .game-character-wrap.game-mains-3 .game-elements-below{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:.3rem;padding-top:.3rem;width:100%}
.games-page .game-card .game-character-wrap.game-mains-2 .game-element-below,
.games-page .game-card .game-character-wrap.game-mains-3 .game-element-below{width:clamp(1.6rem,4.5vw,2.2rem);height:clamp(1.6rem,4.5vw,2.2rem);object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));animation:float-1 3s ease-in-out infinite}
.games-page .game-card .game-character-wrap.game-mains-2 .game-element-below:nth-child(2),
.games-page .game-card .game-character-wrap.game-mains-3 .game-element-below:nth-child(2){animation-name:float-2;animation-delay:.3s}
.games-page .game-card .game-character-wrap.game-mains-2 .game-element-below:nth-child(3),
.games-page .game-card .game-character-wrap.game-mains-3 .game-element-below:nth-child(3){animation-name:float-3;animation-delay:.6s}
.games-page .game-card .game-character-wrap.game-mains-2 .game-element-below:nth-child(4),
.games-page .game-card .game-character-wrap.game-mains-3 .game-element-below:nth-child(4){animation-name:float-4;animation-delay:.9s}

.games-page .game-card .game-elements-top{display:none}

.games-page .game-card .game-character{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));transition:transform .3s cubic-bezier(.22,1,.36,1),filter .3s ease;z-index:1}
.games-page .game-card .game-mains-row{position:absolute;inset:0;display:flex;flex-direction:row;align-items:flex-end;justify-content:center;z-index:1}
.games-page .game-card .game-character-multi{flex:none;height:100%;width:auto;max-width:48%;margin-inline:-9%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));transition:transform .3s cubic-bezier(.22,1,.36,1),filter .3s ease}

.games-page .game-card .game-element{position:absolute;object-fit:contain;z-index:3;opacity:.85}
.games-page .game-card .game-element-1{width:30%;top:-8%;left:-5%;animation:float-1 3s ease-in-out infinite}
.games-page .game-card .game-element-2{width:26%;top:-4%;right:0%;animation:float-2 3.5s ease-in-out infinite .4s}
.games-page .game-card .game-element-3{width:22%;top:42%;left:-6%;animation:float-3 2.8s ease-in-out infinite .8s}
.games-page .game-card .game-element-4{width:22%;top:38%;right:-8%;animation:float-4 3.2s ease-in-out infinite .2s}

.games-page .game-card .game-number-badge{position:relative;z-index:3;font-size:clamp(.75rem,3vw,.8rem);font-weight:800;color:rgba(255,255,255,.3);letter-spacing:.12em;margin-bottom:.1rem;text-transform:uppercase}
.games-page .game-card .game-name-th{position:relative;z-index:3;color:#fff;font-weight:800;font-size:clamp(1rem,3.5vw,1.05rem);line-height:1.35;text-align:center}
.games-page .game-card .game-name-en{position:relative;z-index:3;color:rgba(255,255,255,.38);font-weight:500;font-size:clamp(.85rem,2.8vw,.9rem);line-height:1.3;text-align:center;margin-bottom:.5rem}
.games-page .game-card .game-play-btn{background:rgba(255,255,255,.06);color:rgba(255,255,255,.75);border:1.5px solid rgba(255,255,255,.15);border-radius:50px;padding:.3rem .9rem;font-size:clamp(.82rem,2.5vw,.88rem);font-weight:700;pointer-events:none;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:.3rem;transition:background .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease}
.games-page .game-card .game-play-btn svg{flex-shrink:0}