:root{
  --bg:#0C0C0C;
  --ink:#D7E2EA;
  --grad-top:#646973;
  --grad-bottom:#BBCCD7;
  --pink:#B600A8;
  --violet:#7621B0;
  --orange:#BE4C00;
  --deep:#18011F;
}

*{box-sizing:border-box; margin:0; padding:0;}
html, body, #root, .wrapper{ background:var(--bg); }
body{
  font-family:'Kanit', sans-serif;
  color:var(--ink);
}
.wrapper{ overflow-x:clip; }

.grad-heading{
  background:linear-gradient(180deg, var(--grad-top) 0%, var(--grad-bottom) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ---------- Buttons ---------- */
.btn-play{
  display:inline-block;
  border-radius:999px;
  padding:0.9rem 2.2rem;
  color:#fff;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.15em;
  font-size:0.85rem;
  background:linear-gradient(123deg, var(--deep) 7%, var(--pink) 37%, var(--violet) 72%, var(--orange) 100%);
  box-shadow:0px 4px 4px rgba(181,1,167,0.25), 4px 4px 12px rgba(119,33,177,0.6) inset;
  outline:2px solid #fff;
  outline-offset:-3px;
  border:none;
  cursor:pointer;
  transition:transform 0.2s ease;
}
.btn-play:hover{ transform:translateY(-2px); }

.btn-ghost{
  display:inline-block;
  border-radius:999px;
  padding:0.8rem 2rem;
  border:2px solid var(--ink);
  color:var(--ink);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.15em;
  font-size:0.85rem;
  background:transparent;
  cursor:pointer;
  transition:background 0.2s ease;
}
.btn-ghost:hover{ background:rgba(215,226,234,0.1); }

/* ---------- Fade-in on scroll ---------- */
.fade-in{
  opacity:0;
  transform:translateY(30px);
  transition:opacity 0.7s cubic-bezier(.25,.1,.25,1), transform 0.7s cubic-bezier(.25,.1,.25,1);
}
.fade-in.visible{ opacity:1; transform:translateY(0) translateX(0); }
.fade-in.from-left{ transform:translateX(-80px); }
.fade-in.from-left.visible{ transform:translateX(0); }
.fade-in.from-right{ transform:translateX(80px); }
.fade-in.from-right.visible{ transform:translateX(0); }

/* ---------- Hero ---------- */
.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow-x:clip;
}
.navbar{
  display:flex;
  justify-content:space-between;
  padding:1.5rem 1.5rem 0;
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-weight:500;
  color:var(--ink);
  font-size:0.85rem;
  z-index:20;
  position:relative;
}
@media(min-width:768px){ .navbar{ padding:2rem 2.5rem 0; font-size:1.05rem; } }
.navbar a{ color:inherit; text-decoration:none; opacity:1; transition:opacity 0.2s ease; }
.navbar a:hover{ opacity:0.7; }

.hero-heading-wrap{ overflow:hidden; margin-top:1rem; text-align:center; }
.hero-heading{
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-0.02em;
  line-height:0.95;
  white-space:nowrap;
  font-size:14vw;
}
@media(min-width:640px){ .hero-heading{ font-size:15vw; } }
@media(min-width:768px){ .hero-heading{ font-size:15.5vw; margin-top:-0.5rem; } }

.hero-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding:0 1.5rem 2rem;
  position:relative;
  z-index:20;
}
@media(min-width:768px){ .hero-bottom{ padding:0 2.5rem 2.5rem; } }
.hero-tagline{
  color:var(--ink);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:0.05em;
  line-height:1.3;
  font-size:clamp(0.75rem, 1.4vw, 1.5rem);
  max-width:220px;
}
@media(min-width:768px){ .hero-tagline{ max-width:280px; } }

.hero-icon-stage{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:10;
  width:min(60vw, 380px);
}
@media(min-width:640px){ .hero-icon-stage{ top:auto; bottom:0; transform:translateX(-50%); } }
.hero-icon-stage svg{ width:100%; height:auto; filter:drop-shadow(0 20px 40px rgba(182,0,168,0.25)); }
.magnet{ will-change:transform; display:inline-block; transition:transform 0.6s cubic-bezier(.25,.1,.25,1); }

/* ---------- Ambient motion: orbs + particles ---------- */
.hero-orbs{ position:absolute; inset:0; overflow:hidden; z-index:1; pointer-events:none; }
.orb{
  position:absolute; border-radius:50%; filter:blur(60px); opacity:0.35;
  animation:orb-drift 18s ease-in-out infinite;
}
.orb-1{ width:280px; height:280px; background:#B600A8; top:8%; left:10%; animation-duration:16s; }
.orb-2{ width:220px; height:220px; background:#3DDCFF; bottom:15%; right:12%; animation-duration:20s; animation-delay:-4s; }
.orb-3{ width:180px; height:180px; background:#BE4C00; top:45%; right:30%; animation-duration:14s; animation-delay:-8s; }
@keyframes orb-drift{
  0%, 100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(30px,-20px) scale(1.1); }
  66%{ transform:translate(-20px,25px) scale(0.95); }
}

.hero-particles{ position:absolute; inset:0; overflow:hidden; z-index:1; pointer-events:none; }
.particle{
  position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%;
  background:var(--signal, #3DDCFF); opacity:0;
  animation:particle-rise linear infinite;
}
@keyframes particle-rise{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:0.7; }
  90%{ opacity:0.4; }
  100%{ transform:translateY(-100vh) translateX(var(--drift, 20px)); opacity:0; }
}

/* shimmering gradient on the hero heading */
.hero-heading.grad-heading{
  background-size:200% 200%;
  animation:shimmer 8s ease-in-out infinite;
}
@keyframes shimmer{
  0%, 100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}

@media (prefers-reduced-motion: reduce){
  .orb, .particle, .hero-heading.grad-heading{ animation:none !important; }
}

/* ---------- Marquee ---------- */
.marquee-section{ background:var(--bg); padding:6rem 0 2.5rem; }
.marquee-row{ display:flex; gap:0.75rem; will-change:transform; }
.marquee-row + .marquee-row{ margin-top:0.75rem; }
.marquee-tile{
  flex:0 0 auto;
  width:260px; height:170px;
  border-radius:1.2rem;
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#1F0F35,#2E1A4D);
}
.marquee-tile img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.marquee-emoji{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:3rem;
}
.marquee-label{
  position:absolute; left:0; right:0; bottom:0;
  padding:0.6rem 0.8rem 0.5rem;
  font-weight:600; text-transform:uppercase; letter-spacing:0.04em;
  font-size:0.8rem; color:#fff;
  background:linear-gradient(0deg, rgba(0,0,0,0.75), transparent);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- About ---------- */
.about{
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2.5rem;
  padding:5rem 1.25rem;
  position:relative;
  text-align:center;
}
.about-deco{ position:absolute; opacity:0.9; }
.about-deco svg{ width:100%; height:auto; }
.deco-tl{ top:4%; left:2%; width:100px; }
.deco-bl{ bottom:8%; left:5%; width:90px; }
.deco-tr{ top:4%; right:2%; width:100px; }
.deco-br{ bottom:8%; right:5%; width:110px; }
@media(min-width:768px){
  .deco-tl, .deco-tr{ width:150px; }
  .deco-bl{ width:130px; }
  .deco-br{ width:160px; }
}
.section-heading{
  font-weight:900; text-transform:uppercase; line-height:0.95; letter-spacing:-0.02em;
  font-size:clamp(3rem, 12vw, 160px);
}
.about-copy{
  max-width:560px;
  font-weight:500;
  font-size:clamp(1rem, 2vw, 1.35rem);
  line-height:1.6;
}
.about-copy span{ opacity:0.2; transition:opacity 0.05s linear; }

/* ---------- How to play (light) ---------- */
.howto{
  background:#FFFFFF;
  color:var(--bg);
  border-radius:40px 40px 0 0;
  padding:5rem 1.25rem;
}
@media(min-width:768px){ .howto{ border-radius:60px 60px 0 0; padding:8rem 2.5rem; } }
.howto .section-heading{ text-align:center; margin-bottom:4rem; -webkit-text-fill-color:var(--bg); background:none; }
.howto-list{ max-width:960px; margin:0 auto; }
.howto-item{
  display:flex; gap:1.5rem; align-items:flex-start;
  padding:2.2rem 0;
  border-bottom:1px solid rgba(12,12,12,0.15);
}
.howto-item:first-child{ border-top:1px solid rgba(12,12,12,0.15); }
.howto-num{ font-weight:900; font-size:clamp(3rem, 10vw, 100px); line-height:1; flex:0 0 auto; }
.howto-body h3{ text-transform:uppercase; font-weight:500; font-size:clamp(1rem, 2.2vw, 1.7rem); margin-bottom:0.4rem; }
.howto-body p{ font-weight:300; opacity:0.6; max-width:640px; font-size:clamp(0.85rem, 1.6vw, 1.15rem); line-height:1.5; }

/* ---------- Games (sticky stack) ---------- */
.games-section{
  background:var(--bg);
  border-radius:40px 40px 0 0;
  margin-top:-2.5rem;
  position:relative; z-index:10;
  padding:5rem 1.25rem 8rem;
}
@media(min-width:768px){ .games-section{ border-radius:60px 60px 0 0; padding:8rem 2.5rem 10rem; } }
.games-section .section-heading{ text-align:center; margin-bottom:3rem; }

.games-toolbar{
  display:flex; gap:0.7rem; flex-wrap:wrap; justify-content:center;
  max-width:900px; margin:0 auto 2.5rem;
}
.games-toolbar .chip{
  border:2px solid #3A2A55; background:#170B27; color:var(--ink); opacity:0.7;
  padding:0.45rem 1rem; border-radius:999px; font-size:0.8rem; text-transform:uppercase;
  letter-spacing:0.08em; cursor:pointer; transition:all 0.15s ease;
}
.games-toolbar .chip.active, .games-toolbar .chip:hover{ opacity:1; border-color:#B600A8; }
.games-toolbar input{
  background:#170B27; border:2px solid #3A2A55; color:var(--ink);
  border-radius:999px; padding:0.45rem 1.1rem; font-family:'Kanit', sans-serif; font-size:0.85rem;
  outline:none; min-width:180px;
}

.games-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:1.4rem;
  max-width:1100px;
  margin:0 auto;
}
.game-tile{
  display:block;
  border-radius:20px;
  border:2px solid #3A2A55;
  overflow:hidden;
  transition:transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  color:var(--ink);
}
.game-tile:hover{
  transform:translateY(-5px) scale(1.02);
  border-color:#B600A8;
  box-shadow:0 8px 30px rgba(182,0,168,0.35);
}
.reveal-tile{
  opacity:0; transform:translateY(24px);
  transition:opacity 0.6s ease, transform 0.6s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.reveal-tile.visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal-tile{ opacity:1; transform:none; transition:none; }
  .game-tile:hover{ transform:none; }
}
.tile-art{
  height:120px;
  display:flex; align-items:center; justify-content:center;
  font-size:2.4rem;
  background:linear-gradient(135deg, rgba(182,0,168,0.25), rgba(61,220,255,0.15));
  overflow:hidden;
}
.tile-art img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.tile-info{ padding:0.8rem 0.9rem 1rem; border-top:1px dashed #3A2A55; }
.tile-info h3{ font-size:0.95rem; font-weight:500; margin-bottom:0.25rem; }
.tile-info span{ font-size:0.7rem; opacity:0.5; text-transform:uppercase; letter-spacing:0.08em; }
.games-empty{ text-align:center; opacity:0.6; padding:2rem; }

footer.arcade-footer{
  text-align:center; padding:3rem 1.5rem; background:var(--bg); color:var(--ink); opacity:0.6; font-size:0.85rem;
}
.footer-links{ margin-bottom:0.8rem; }
.footer-links a{ color:var(--ink); text-decoration:none; opacity:0.9; }
.footer-links a:hover{ text-decoration:underline; }

/* ---------- FAQ ---------- */
.faq{ max-width:720px; margin:0 auto; padding:4rem 1.25rem 6rem; }
.faq .section-heading{ text-align:center; margin-bottom:2.5rem; font-size:clamp(2.2rem, 8vw, 90px); }
.faq-item{ border-bottom:1px solid #2E1A4D; padding:1.4rem 0; }
.faq-item h3{ font-size:1rem; font-weight:600; margin-bottom:0.5rem; }
.faq-item p{ font-size:0.9rem; color:#B7A8D6; font-weight:300; line-height:1.5; }