:root{
  --bg:#06140e;
  --bg2:#091d14;
  --panel:#0c2319;
  --panel2:#102b20;

  --text:#f2f6f3;
  --muted:#91a29a;
  --muted2:#687971;

  --line:rgba(232,244,238,.11);
  --line2:rgba(232,244,238,.18);

  --green:#40c985;
  --green2:#79dba8;
  --green3:#bce9cf;

  --gold:#e4c46f;
  --red:#ff6b71;

  --max:1220px;
  --shadow:0 34px 90px rgba(0,0,0,.32);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:110px;
  -webkit-overflow-scrolling:touch;
  background:var(--bg);
  overscroll-behavior-y:contain;
  scroll-snap-type:y proximity;
}

body{
  margin:0;
  min-height:100vh;
  scroll-behavior:smooth;
  text-rendering:optimizeLegibility;
  overscroll-behavior-y:contain;

  background:
    radial-gradient(
      circle at 50% -20%,
      rgba(61,189,130,.1),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #06140e,
      #07170f 55%,
      #06140e
    );

  color:var(--text);

  font-family:
    "Google Sans",
    "Google Sans Text",
    system-ui,
    -apple-system,
    sans-serif;

  overflow-x:hidden;
}

button,
input{
  font:inherit;
}

button{
  cursor:pointer;
}

button, a {
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease,
    opacity .2s ease,
    color .2s ease;
}

button:hover, a:hover {
  transform:translateY(-1px);
}

::selection{
  background:rgba(121,219,168,.22);
  color:var(--text);
}

a{
  color:inherit;
  text-decoration:none;
}

.shell{
  width:min(
    calc(100% - 48px),
    var(--max)
  );

  margin-inline:auto;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* BACKGROUND */

.site-bg{
  position:fixed;
  inset:0;
  z-index:-2;
  overflow:hidden;
}

.bg-glow{
  position:absolute;
  width:560px;
  height:560px;
  border-radius:50%;
  filter:blur(110px);
  opacity:.15;
}

.bg-glow-a{
  left:-260px;
  top:120px;
  background:#1d8f63;
}

.bg-glow-b{
  right:-260px;
  top:900px;
  background:#0f734d;
}

.bg-grid{
  position:absolute;
  inset:0;
  opacity:.25;

  background-image:
    linear-gradient(
      rgba(255,255,255,.026) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.026) 1px,
      transparent 1px
    );

  background-size:58px 58px;

  mask-image:
    linear-gradient(
      to bottom,
      #000,
      transparent 90%
    );
}

/* NAV */

.site-nav{
  height:82px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;

  position:sticky;
  top:0;
  z-index:40;

  background:rgba(6,20,14,.7);
  backdrop-filter:blur(18px);

  border-bottom:
    1px solid rgba(255,255,255,.03);
}

.brand{
  display:flex;
  align-items:center;
  gap:11px;

  font-weight:700;
  letter-spacing:-.04em;
}

.brand-name{
  font-size:20px;
}

.brand-name span{
  color:var(--green2);
}

.brand-mark{
  width:38px;
  height:38px;

  border-radius:13px;

  border:1px solid var(--line);

  background:
    linear-gradient(
      145deg,
      #123727,
      #07150f
    );

  display:grid;
  place-items:center;

  position:relative;
  overflow:hidden;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 12px 28px rgba(0,0,0,.2);
}

.brand-controller{
  font-size:21px;
  font-weight:700;
  position:relative;
  z-index:2;
}

.brand-orbit{
  position:absolute;
  width:30px;
  height:16px;

  border:
    2px solid rgba(121,219,168,.4);

  border-radius:50%;

  transform:rotate(-20deg);
}

.nav-links{
  display:flex;
  gap:28px;

  color:#a2b0a9;
  font-size:13px;
}

.nav-links a:hover{
  color:#fff;
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.account-summary{
  display:flex;
  align-items:center;
  gap:6px;

  color:var(--muted);
  font-size:11px;
  white-space:nowrap;
}

.account-label{
  color:var(--muted2);
}

.account-name{
  color:var(--text);
  font-weight:600;
}

.auth-modal{
  position:fixed;
  inset:0;
  z-index:80;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(2,10,7,.72);
  backdrop-filter:blur(12px);
}

.auth-modal[hidden]{
  display:none;
}

.auth-panel{
  position:relative;
  width:min(100%,420px);
  padding:32px;
  border:1px solid var(--line2);
  border-radius:18px;
  background:var(--panel);
  box-shadow:var(--shadow);
}

.auth-panel h2{
  margin:8px 0;
}

.auth-close{
  position:absolute;
  top:14px;
  right:16px;
  border:0;
  background:none;
  color:var(--muted);
  font-size:24px;
}

.auth-message{
  min-height:20px;
  color:var(--red);
  font-size:13px;
}

.auth-field{
  display:grid;
  gap:7px;
  margin:14px 0;
  color:var(--muted);
  font-size:12px;
}

.auth-field[hidden]{
  display:none;
}

.auth-field input{
  width:100%;
  min-height:44px;
  padding:0 12px;
  border:1px solid var(--line2);
  border-radius:10px;
  background:rgba(255,255,255,.04);
  color:var(--text);
}

.consent-banner{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  max-width:640px;
  padding:16px 18px;
  border:1px solid var(--line2);
  border-radius:16px;
  background:rgba(12,35,25,.96);
  box-shadow:var(--shadow);
}

.consent-copy{
  color:var(--text);
  font-size:13px;
  line-height:1.5;
}

.consent-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.legal-shell{
  padding:64px 0 80px;
}

.legal-card{
  max-width:820px;
  margin:0 auto;
  padding:32px 28px;
  border:1px solid var(--line2);
  border-radius:24px;
  background:rgba(12,35,25,.72);
}

.legal-card h1,
.legal-card h2{
  margin-top:0;
}

.legal-card h2{
  margin-top:24px;
  font-size:1.1rem;
}

.legal-card p,
.legal-card li{
  color:var(--text);
  line-height:1.7;
}

.back-link{
  display:inline-block;
  margin-bottom:18px;
  color:var(--green2);
}

.auth-footer{
  display:grid;
  gap:10px;
  margin-top:16px;
}

.auth-terms{
  color:var(--muted);
  font-size:12px;
  text-align:center;
  text-decoration:underline;
}

.auth-switch{
  width:100%;
  border:0;
  background:none;
  color:var(--green2);
  font-size:13px;
}

.text-button{
  background:none;
  border:0;

  color:#aebbb4;
  font-size:12px;
}

.nav-toggle{
  display:none;

  width:40px;
  height:40px;

  border:
    1px solid var(--line);

  border-radius:12px;

  background:var(--panel);
  color:#fff;
}

/* BUTTONS */

.btn{
  border:0;

  border-radius:14px;

  min-height:44px;
  padding:0 18px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  font-weight:600;

  transition:
    transform .2s,
    box-shadow .2s,
    background .2s;
  
  color:#fff;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
}

.btn-primary{
  background:
    linear-gradient(
      135deg,
      #49c989,
      #2eaa6e
    );

  box-shadow:
    0 16px 32px
    rgba(34,138,92,.22);
}

.btn-secondary{
  background:
    rgba(255,255,255,.03);

  border:
    1px solid var(--line);
}

.btn-small{
  min-height:40px;
  padding:0 15px;
  font-size:12px;
}

.btn-large{
  min-height:52px;
}

.btn-wide{
  width:100%;
}

/* CREDITS */

.credit-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;

  min-height:34px;

  padding:0 10px;

  border:
    1px solid rgba(106,211,157,.18);

  border-radius:11px;

  background:
    rgba(56,184,120,.07);

  color:#b9c9c1;

  font-size:10px;
  font-weight:700;

  white-space:nowrap;
}

.credit-pill.empty{
  border-color:
    rgba(255,173,92,.28);

  background:
    rgba(255,173,92,.07);

  color:#e4bea1;
}

.credit-bolt{
  color:#79e0a7;
  font-size:14px;
  font-weight:900;
}

.credit-label{
  color:#718078;
  font-weight:600;
}

/* STICKY PLAY BUTTON */

.floating-play{
  position:fixed;

  top:98px;
  right:28px;

  z-index:35;

  border:
    1px solid rgba(121,219,168,.3);

  background:
    rgba(12,40,29,.88);

  backdrop-filter:blur(16px);

  color:#eff8f2;

  border-radius:15px;

  padding:12px 15px;

  box-shadow:
    0 15px 40px rgba(0,0,0,.24);

  font-size:12px;
  font-weight:700;

  transition:.25s;
}

.floating-play:hover{
  transform:translateY(-2px);

  background:
    rgba(18,57,40,.94);
}

/* HERO */

.hero{
  min-height:
    calc(100vh - 82px);

  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:48px;

  align-items:center;

  padding:
    72px 0 110px;
}

.eyebrow{
  font-size:10px;
  letter-spacing:.16em;
  font-weight:700;
  color:#7f988c;
}

.dot{
  display:inline-block;

  width:6px;
  height:6px;

  border-radius:50%;

  background:var(--green);

  margin-right:8px;

  box-shadow:
    0 0 0 5px
    rgba(64,201,133,.08);
}

.hero h1{
  font-size:
    clamp(58px,7vw,96px);

  line-height:.9;

  letter-spacing:-.075em;

  margin:
    20px 0 22px;

  max-width:680px;
}

.hero h1 em,
.headline em{
  font-style:normal;
  color:var(--green2);
}

.hero-sub{
  max-width:575px;

  color:#9aa9a2;

  font-size:16px;
  line-height:1.7;
}

.hero-cta{
  display:flex;
  gap:11px;
  flex-wrap:wrap;
  margin-top:28px;
}

.hero-note{
  margin-top:20px;

  display:flex;
  gap:12px;
  flex-wrap:wrap;

  color:#718078;
  font-size:11px;
}

.hero-note i{
  width:4px;
  height:4px;

  border-radius:50%;

  background:#52625a;

  margin-top:6px;
}

/* HERO 3D */

.hero-scene{
  min-height:560px;

  display:grid;
  place-items:center;

  position:relative;

  perspective:1500px;
}

.scene-halo{
  position:absolute;

  width:430px;
  height:430px;

  border-radius:50%;

  border:
    1px solid
    rgba(121,219,168,.12);

  box-shadow:
    0 0 110px
    rgba(48,184,119,.07),

    inset 0 0 90px
    rgba(48,184,119,.04);

  animation:
    float 7s ease-in-out infinite;
}

.scene-orbit{
  position:absolute;

  width:530px;
  height:170px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:50%;

  transform:rotate(22deg);

  animation:
    spin 20s linear infinite;
}

.scene-orbit.two{
  width:410px;
  height:140px;

  transform:rotate(-34deg);

  animation-direction:reverse;
  animation-duration:26s;
}

.scene-card{
  width:min(470px,100%);

  border:
    1px solid
    rgba(229,245,237,.15);

  border-radius:34px;

  background:
    linear-gradient(
      145deg,
      rgba(17,49,37,.96),
      rgba(6,22,16,.96)
    );

  box-shadow:
    0 40px 90px
    rgba(0,0,0,.4),

    inset 0 1px 0
    rgba(255,255,255,.06);

  padding:24px;

  transform-style:preserve-3d;

  transition:
    transform .18s ease-out;
}

.scene-top{
  display:flex;
  justify-content:space-between;

  color:#7f968a;

  font-size:10px;
  letter-spacing:.13em;
  font-weight:700;
}

.live{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.live:before{
  content:"";

  width:7px;
  height:7px;

  border-radius:50%;

  background:var(--green);
}

.scene-main{
  text-align:center;
  margin:36px 0;
}

.scene-main h3{
  font-size:44px;
  letter-spacing:-.06em;
  margin:0;
}

.scene-main p{
  color:#829189;
  font-size:13px;
}

.scene-players{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:10px;
}

.player-chip{
  height:70px;

  border:
    1px solid var(--line);

  border-radius:18px;

  background:
    rgba(255,255,255,.025);

  display:grid;
  place-items:center;

  color:#bdc7c2;
}

.player-chip strong{
  font-size:15px;
}

.player-chip small{
  font-size:9px;
  color:#708078;
}

.scene-footer{
  margin-top:14px;
  padding-top:14px;

  border-top:
    1px solid var(--line);

  display:flex;
  justify-content:space-between;

  color:#78887f;
  font-size:10px;
}

.floating-chip{
  position:absolute;

  border:
    1px solid var(--line);

  background:
    rgba(9,29,21,.84);

  backdrop-filter:blur(14px);

  padding:11px 13px;

  border-radius:13px;

  box-shadow:var(--shadow);

  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;

  color:#d6e0da;

  animation:
    float 6s ease-in-out infinite;
}

.chip-one{
  left:2%;
  top:16%;
}

.chip-two{
  right:0;
  top:34%;

  animation-delay:-2.3s;
}

.chip-three{
  left:9%;
  bottom:10%;

  animation-delay:-3.8s;
}

/* MARQUEE */

.marquee{
  border-block:
    1px solid var(--line);

  overflow:hidden;

  background:
    rgba(4,17,12,.58);
}

.marquee-track{
  width:max-content;

  display:flex;

  gap:22px;

  padding:16px 0;

  color:#7f9188;

  letter-spacing:.14em;

  font-weight:700;
  font-size:9px;

  animation:
    marquee 30s linear infinite;
}

.marquee-track b{
  color:#4cc987;
}

/* GENERAL SECTIONS */

.lobby-shell{
  padding:24px 0 0;
}

.lobby-head{
  margin-bottom:18px;
}

.lobby-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}

.lobby-group{
  border:1px solid var(--line);
  border-radius:24px;
  background:rgba(9,27,20,.7);
  padding:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.12);
}

.lobby-group-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  color:#a5b8ae;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.lobby-group-header b{
  color:#7fe0a9;
  font-size:12px;
}

.lobby-stack{
  display:grid;
  gap:12px;
}

.lobby-card{
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:14px 14px 12px;
  background:linear-gradient(145deg, rgba(18,46,35,.9), rgba(8,23,17,.92));
  transition:transform .2s ease, border-color .2s ease;
}

.lobby-card:hover{
  transform:translateY(-2px);
  border-color:rgba(121,219,168,.35);
}

.lobby-card-top,
.lobby-card-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.lobby-badge{
  border-radius:999px;
  padding:5px 8px;
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
}

.lobby-badge.public{
  background:rgba(64,201,133,.12);
  color:#74d6a3;
}

.lobby-badge.private{
  background:rgba(228,196,111,.12);
  color:#e4c46f;
}

.lobby-game{
  color:#7f968a;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.lobby-card-main{
  display:grid;
  gap:4px;
  margin:14px 0 12px;
}

.lobby-card-main strong{
  font-size:20px;
  letter-spacing:-.05em;
}

.lobby-card-main span,
.lobby-card-foot span{
  color:#8c9a93;
  font-size:10px;
}

.lobby-card-foot .btn{
  min-height:34px;
  border-radius:10px;
  padding:0 12px;
}

.section{
  padding:120px 0;
}

.featured-showcase{
  padding-top:30px;
  padding-bottom:18px;
}

.featured-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px;
  margin-bottom:26px;
}

.headline-small{
  font-size:clamp(34px,4vw,54px);
}

.featured-rail{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:28px;
  background:
    linear-gradient(
      180deg,
      rgba(13,35,27,.9),
      rgba(7,19,14,.9)
    );
  box-shadow:var(--shadow);
  padding:16px 0;
}

.featured-rail:before,
.featured-rail:after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:110px;
  z-index:2;
  pointer-events:none;
}

.featured-rail:before{
  left:0;
  background:linear-gradient(90deg, rgba(6,20,14,1), rgba(6,20,14,0));
}

.featured-rail:after{
  right:0;
  background:linear-gradient(270deg, rgba(6,20,14,1), rgba(6,20,14,0));
}

.featured-track{
  width:max-content;
  display:flex;
  align-items:stretch;
  gap:18px;
  padding:0 12px;
  will-change:transform;
  animation:featured-pan 26s linear infinite;
  cursor:grab;
  animation-play-state:running;
}

.featured-card{
  position:relative;
  width:min(270px, 72vw);
  min-height:170px;
  padding:18px;
  border-radius:24px;
  border:1px solid rgba(236,244,239,.12);
  background:
    linear-gradient(
      140deg,
      rgba(19,54,41,.92),
      rgba(8,22,17,.9)
    );
  overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
  box-shadow:0 18px 50px rgba(0,0,0,.22);
}

.featured-card:hover{
  transform:translateY(-8px) rotateX(7deg) rotateY(-7deg);
  border-color:rgba(121,219,168,.38);
  box-shadow:0 28px 70px rgba(0,0,0,.28);
}

.featured-card-glow{
  position:absolute;
  inset:auto -30% -35% 20%;
  height:140px;
  background:radial-gradient(circle, rgba(121,219,168,.25), transparent 62%);
  filter:blur(18px);
}

.featured-symbol{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  font-size:28px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.featured-card-copy{
  position:relative;
  z-index:1;
  margin-top:24px;
  display:grid;
  gap:8px;
}

.featured-card-copy strong{
  font-size:22px;
  letter-spacing:-.06em;
}

.featured-card-copy span{
  font-size:11px;
  line-height:1.5;
  color:#a5b5af;
}

@keyframes featured-pan{
  from {
    transform:translate3d(0,0,0);
  }
  to {
    transform:translate3d(-50%,0,0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html{
    scroll-behavior:auto;
    scroll-snap-type:none;
  }

  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

section,
[role="main"],
main {
  scroll-margin-top:110px;
}

.section-head{
  display:flex;

  justify-content:space-between;
  align-items:end;

  gap:30px;

  margin-bottom:40px;
}

.headline{
  font-size:
    clamp(46px,6vw,74px);

  line-height:.95;
  letter-spacing:-.067em;

  margin:
    12px 0 0;
}

.section-head>p{
  max-width:360px;

  color:#87958e;

  line-height:1.66;

  font-size:13px;
}

/* GAMES */

.game-category{
  display:flex;

  justify-content:space-between;
  align-items:center;

  margin:
    0 0 18px;
}

.game-category h3{
  font-size:13px;

  letter-spacing:.12em;

  text-transform:uppercase;

  margin:0;

  color:#aebbb4;
}

.category-note{
  font-size:11px;
  color:#68776f;
}

.game-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:16px;

  margin-bottom:38px;
}

.game-card{
  min-height:340px;

  border:
    1px solid var(--line);

  border-radius:26px;

  background:
    linear-gradient(
      145deg,
      rgba(17,46,35,.92),
      rgba(8,25,18,.92)
    );

  padding:18px;

  position:relative;
  overflow:hidden;

  transform-style:preserve-3d;

  transition:.3s;
}

.game-card:hover{
  border-color:
    rgba(223,241,233,.2);

  box-shadow:
    0 28px 80px
    rgba(0,0,0,.25);
}

.game-art{
  height:180px;

  border-radius:20px;

  position:relative;
  overflow:hidden;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(88,207,145,.16),
      transparent 46%
    ),

    linear-gradient(
      145deg,
      #123325,
      #071912
    );

  border:
    1px solid
    rgba(228,242,235,.08);

  display:grid;
  place-items:center;
}

.game-art:after{
  content:"";

  position:absolute;
  inset:12px;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius:16px;
}

.game-symbol{
  font-size:72px;

  filter:
    drop-shadow(
      0 20px 28px
      rgba(0,0,0,.28)
    );

  transform:translateZ(32px);

  position:relative;
  z-index:2;
}

.game-orbit-small{
  position:absolute;

  width:150px;
  height:55px;

  border:
    1px solid
    rgba(106,211,157,.18);

  border-radius:50%;

  transform:rotate(-26deg);

  animation:
    spin 16s linear infinite;
}

.game-meta{
  display:flex;

  justify-content:space-between;

  gap:16px;

  margin-top:16px;
}

.game-meta h3{
  font-size:22px;

  letter-spacing:-.045em;

  margin:0;
}

.game-meta p{
  font-size:11px;

  line-height:1.5;

  color:#78867f;

  margin:
    5px 0 0;

  max-width:250px;
}

.badge{
  display:inline-flex;
  align-items:center;

  padding:7px 9px;

  border-radius:9px;

  background:
    rgba(255,255,255,.05);

  font-size:8px;

  letter-spacing:.15em;

  font-weight:800;

  color:#9daca5;

  height:max-content;
}

.badge.pro{
  background:
    rgba(56,184,120,.1);

  color:#6fd89f;
}

.play-row{
  display:flex;

  justify-content:space-between;
  align-items:center;

  margin-top:18px;
}

.status-line{
  font-size:9px;

  letter-spacing:.13em;

  color:#6d7d74;

  font-weight:700;
}

.play-btn{
  width:42px;
  height:42px;

  border:
    1px solid var(--line);

  border-radius:13px;

  background:#10291f;

  color:#e9f3ed;

  display:grid;
  place-items:center;

  transition:.2s;
}

.play-btn:hover{
  background:#194733;
  transform:translateX(2px);
}

.arcade-cta{
  border:
    1px solid var(--line);

  background:
    linear-gradient(
      145deg,
      rgba(19,52,40,.72),
      rgba(7,22,16,.88)
    );

  border-radius:28px;

  padding:
    20px 22px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:18px;
}

.arcade-cta strong{
  font-size:15px;
}

.arcade-cta p{
  margin:
    5px 0 0;

  font-size:11px;

  color:#74847b;
}

/* HULY-LIKE STORY SECTION */

.feature-story{
  padding:
    70px 0 130px;
}

.story-grid{
  display:grid;

  grid-template-columns:
    .8fr 1.2fr;

  gap:70px;

  align-items:start;
}

.story-copy{
  position:sticky;
  top:150px;
}

.story-copy h2{
  font-size:
    clamp(42px,5vw,68px);

  line-height:.95;

  letter-spacing:-.065em;

  margin:
    15px 0;
}

.story-copy p{
  color:#84938b;

  line-height:1.72;

  font-size:14px;

  max-width:470px;
}

.story-steps{
  display:grid;
  gap:18px;

  margin-top:28px;
}

.story-step{
  padding:
    16px 0;

  border-top:
    1px solid var(--line);

  color:#78877f;

  font-size:11px;
}

.story-step strong{
  color:#a9c6b7;
}

/* PHONE */

.phone-stage{
  min-height:850px;

  position:relative;

  display:grid;
  place-items:center;
}

.phone-glow{
  position:absolute;

  width:480px;
  height:480px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(64,201,133,.12),
      transparent 65%
    );

  filter:blur(10px);
}

.phone{
  width:min(340px,78%);

  aspect-ratio:
    9 / 18.4;

  border-radius:42px;

  border:
    1px solid
    rgba(255,255,255,.24);

  background:#0b100d;

  box-shadow:
    0 50px 100px
    rgba(0,0,0,.45),

    inset 0 0 0 7px #050806;

  position:sticky;

  top:130px;

  transform-style:preserve-3d;

  transition:
    transform .16s ease-out;
}

.phone-notch{
  position:absolute;

  top:12px;
  left:50%;

  transform:
    translateX(-50%);

  width:92px;
  height:24px;

  background:#050806;

  border-radius:18px;

  z-index:4;
}

.phone-screen{
  position:absolute;

  inset:7px;

  border-radius:36px;

  background:
    linear-gradient(
      180deg,
      #0e2a1e,
      #06140e
    );

  padding:
    28px 16px 16px;

  overflow:hidden;
}

.phone-top{
  display:flex;

  justify-content:space-between;

  color:#9db1a7;

  font-size:8px;
}

.phone-app-logo{
  font-weight:700;

  letter-spacing:-.05em;

  font-size:20px;

  margin-top:18px;
}

.phone-app-logo span{
  color:var(--green2);
}

.phone-game{
  margin-top:22px;

  border:
    1px solid var(--line);

  border-radius:19px;

  background:
    rgba(255,255,255,.035);

  padding:12px;

  min-height:165px;

  transition:.3s;
}

.phone-game-kicker{
  font-size:8px;

  letter-spacing:.13em;

  color:#75dba6;
}

.phone-game h4{
  font-size:26px;

  letter-spacing:-.06em;

  margin:
    34px 0 5px;
}

.phone-game p{
  font-size:9px;

  color:#7f8e85;

  line-height:1.45;
}

.phone-players{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:6px;

  margin-top:10px;
}

.phone-player{
  border:
    1px solid var(--line);

  border-radius:10px;

  padding:8px 3px;

  text-align:center;

  color:#8ea096;

  font-size:8px;
}

.phone-credit{
  margin-top:12px;

  padding:
    9px 11px;

  border-radius:12px;

  background:
    rgba(64,201,133,.08);

  border:
    1px solid
    rgba(64,201,133,.16);

  font-size:9px;

  color:#b7c9c0;

  display:flex;
  justify-content:space-between;
}

.phone-nav{
  position:absolute;

  left:14px;
  right:14px;
  bottom:12px;

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:6px;
}

.phone-nav span{
  height:34px;

  border:
    1px solid var(--line);

  border-radius:10px;

  background:
    rgba(0,0,0,.18);

  display:grid;
  place-items:center;

  color:#73847b;

  font-size:8px;
}

/* HOW */

.how-band{
  border:
    1px solid var(--line);

  border-radius:34px;

  background:
    linear-gradient(
      145deg,
      rgba(14,41,31,.9),
      rgba(7,21,15,.93)
    );

  padding:34px;

  display:grid;

  grid-template-columns:
    .95fr 1.05fr;

  gap:65px;

  align-items:center;
}

.how-visual{
  min-height:390px;

  display:grid;

  place-items:center;
}

.room-stack{
  width:min(470px,100%);

  border:
    1px solid
    rgba(227,243,236,.13);

  background:#091c14;

  border-radius:27px;

  padding:18px;

  transform:rotate(-4deg);

  box-shadow:
    0 35px 80px
    rgba(0,0,0,.32);
}

.room-header{
  display:flex;

  justify-content:space-between;

  color:#819188;

  font-size:10px;
}

.room-title{
  padding:
    52px 22px 34px;

  text-align:center;
}

.room-title h3{
  margin:0;

  font-size:44px;

  letter-spacing:-.06em;
}

.room-title p{
  color:#7c8a82;

  margin:
    9px 0 0;

  font-size:12px;
}

.room-members{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:8px;
}

.room-member{
  border:
    1px solid var(--line);

  border-radius:14px;

  padding:
    12px 8px;

  text-align:center;
}

.room-member b{
  display:block;
  font-size:14px;
}

.room-member span{
  display:block;

  color:#66766d;

  font-size:9px;

  margin-top:4px;
}

.how-copy h2{
  font-size:
    clamp(40px,5vw,62px);

  line-height:.95;

  letter-spacing:-.06em;

  margin:
    14px 0 18px;
}

.how-copy>p{
  max-width:520px;

  color:#8a9891;

  line-height:1.7;

  font-size:14px;
}

.steps{
  margin-top:30px;
  display:grid;
}

.step{
  display:grid;

  grid-template-columns:
    42px 1fr;

  gap:14px;

  border-top:
    1px solid var(--line);

  padding:
    17px 0;
}

.step strong{
  font-size:11px;
  color:#6bd39d;
}

.step b{
  font-size:14px;
}

.step p{
  margin:
    4px 0 0;

  color:#7d8b84;

  font-size:11px;

  line-height:1.5;
}

/* PRICING */

.pricing-section{
  padding:125px 0;
}

.pricing-head{
  margin-bottom:40px;
}

.plans{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:16px;
}

.plan{
  border:
    1px solid var(--line);

  border-radius:27px;

  padding:30px;

  background:
    linear-gradient(
      145deg,
      rgba(14,38,29,.95),
      rgba(8,23,17,.95)
    );

  min-height:540px;
}

.plan.pro{
  border-color:
    rgba(106,211,157,.25);

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(56,184,120,.14),
      transparent 35%
    ),

    linear-gradient(
      145deg,
      rgba(17,49,37,.96),
      rgba(8,23,17,.96)
    );
}

.plan-icon{
  width:58px;
  height:58px;

  border-radius:17px;

  background:
    rgba(255,255,255,.05);

  border:
    1px solid var(--line);

  display:grid;
  place-items:center;

  font-size:28px;

  margin-bottom:26px;
}

.plan.pro .plan-icon{
  background:
    rgba(56,184,120,.1);

  color:#79dda5;
}

.plan-kicker{
  font-size:9px;
  letter-spacing:.15em;
  font-weight:800;
  color:#819188;
}

.plan h3{
  font-size:32px;

  letter-spacing:-.05em;

  margin:
    12px 0 6px;
}

.plan p{
  font-size:13px;

  line-height:1.6;

  color:#84928b;

  max-width:440px;
}

.price{
  font-size:46px;

  letter-spacing:-.06em;

  font-weight:700;

  margin:24px 0;
}

.price small{
  font-size:12px;

  color:#728178;

  font-weight:500;

  letter-spacing:0;
}

.plan ul{
  list-style:none;

  padding:0;

  margin:
    0 0 24px;

  display:grid;

  gap:10px;

  color:#adb9b3;

  font-size:12px;
}

/* FOOTER */

.footer{
  border-top:
    1px solid var(--line);

  padding:
    26px 0 50px;

  display:grid;

  grid-template-columns:
    1fr 1fr 1fr;

  color:#63726a;

  font-size:10px;
}

.footer p{
  text-align:center;
  margin:0;
}

.footer>span{
  text-align:right;
}

/* TOAST */

.toast{
  position:fixed;

  left:50%;
  bottom:22px;

  z-index:1000;

  transform:
    translate(-50%,18px);

  opacity:0;

  background:#edf5ef;

  color:#092016;

  border-radius:13px;

  padding:
    12px 16px;

  font-size:11px;

  font-weight:700;

  box-shadow:
    0 18px 45px
    rgba(0,0,0,.25);

  pointer-events:none;

  transition:.25s;
}

.toast.show{
  transform:
    translate(-50%,0);

  opacity:1;
}

/* GAME PAGES */

.game-page{
  min-height:
    calc(100vh - 82px);

  padding:
    18px 0 34px;
}

.game-shell{
  min-height:
    calc(100vh - 134px);

  border:
    1px solid var(--line);

  border-radius:30px;

  background:
    linear-gradient(
      145deg,
      rgba(10,31,23,.95),
      rgba(5,18,13,.98)
    );

  box-shadow:var(--shadow);

  overflow:hidden;

  display:flex;
  flex-direction:column;
}

.game-toolbar{
  min-height:70px;

  padding:
    15px 18px;

  border-bottom:
    1px solid var(--line);

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:14px;
}

.game-toolbar-left,
.game-toolbar-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.icon-btn{
  width:40px;
  height:40px;

  border:
    1px solid var(--line);

  border-radius:12px;

  background:
    rgba(255,255,255,.025);

  color:#fff;

  display:grid;
  place-items:center;
}

.room-pill{
  padding:
    8px 11px;

  border-radius:10px;

  background:
    rgba(255,255,255,.04);

  border:
    1px solid var(--line);

  font-size:10px;

  color:#9eaaa4;
}

.room-pill b{
  color:#e7efe9;
  letter-spacing:.13em;
}

.game-body{
  flex:1;

  display:grid;

  grid-template-columns:
    1fr 280px;

  min-height:0;
}

.game-stage{
  padding:26px;
  min-width:0;
}

.game-side{
  border-left:
    1px solid var(--line);

  background:
    rgba(255,255,255,.015);
}

.game-side-head{
  padding:
    20px 18px 16px;

  border-bottom:
    1px solid var(--line);

  font-size:11px;

  letter-spacing:.1em;

  font-weight:700;

  color:#aab6af;
}

.players-list{
  padding:10px;
}

.player-row{
  display:flex;
  align-items:center;
  gap:9px;

  padding:10px;

  border-radius:12px;
}

.player-avatar{
  width:29px;
  height:29px;

  border-radius:10px;

  background:#102d21;

  border:
    1px solid var(--line);

  display:grid;
  place-items:center;

  font-size:10px;
}

.player-row b{
  font-size:11px;
}

.player-row small{
  display:block;

  color:#617168;

  font-size:8px;

  margin-top:2px;
}

.score-bubble{
  margin-left:auto;
  color:#7fdca8;
  font-size:10px;
}

.game-view-title{
  display:flex;

  justify-content:space-between;
  align-items:end;

  gap:16px;

  margin-bottom:24px;
}

.game-view-title h1{
  font-size:
    clamp(34px,5vw,62px);

  line-height:.95;

  letter-spacing:-.06em;

  margin:0;
}

.game-view-title p{
  max-width:440px;

  color:#7e8d84;

  font-size:12px;

  line-height:1.55;

  margin:
    7px 0 0;
}

.tag{
  font-size:9px;

  letter-spacing:.13em;

  color:#69d49e;

  padding:
    7px 9px;

  border-radius:9px;

  background:
    rgba(56,184,120,.08);

  white-space:nowrap;
}

.room-start{
  min-height:
    calc(100% - 84px);

  display:grid;
  place-items:center;
}

.room-card{
  width:min(720px,100%);

  border:
    1px solid var(--line);

  background:
    rgba(255,255,255,.02);

  border-radius:26px;

  padding:24px;
}

.room-card h2{
  font-size:32px;

  letter-spacing:-.05em;

  margin:
    0 0 9px;
}

.room-card>p{
  color:#7f8d85;

  font-size:12px;

  line-height:1.6;
}

.room-actions{
  display:grid;

  grid-template-columns:
    1fr auto;

  gap:12px;

  margin-top:22px;
}

.room-actions input,
.join-row input,
.answer-row input{
  width:100%;

  min-height:48px;

  padding:
    0 15px;

  border-radius:14px;

  border:
    1px solid var(--line);

  background:#081a13;

  color:#fff;

  outline:none;
}

.join-row{
  display:flex;
  gap:10px;
  margin-top:14px;
}

.join-row input{
  text-transform:uppercase;
  letter-spacing:.2em;
}

.room-code{
  font-size:58px;

  letter-spacing:.12em;

  font-weight:700;

  text-align:center;

  margin:
    18px 0 5px;
}

.room-code-help{
  text-align:center;
  color:#718077;
  font-size:11px;
}

.room-player-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:9px;

  margin-top:25px;
}

.room-player{
  border:
    1px solid var(--line);

  border-radius:15px;

  padding:
    13px 8px;

  text-align:center;

  background:
    rgba(255,255,255,.02);
}

.room-player b{
  display:block;
  font-size:13px;
}

.room-player span{
  font-size:9px;

  color:#64746b;

  margin-top:4px;

  display:block;
}

.room-player.host{
  border-color:
    rgba(106,211,157,.23);
}

.play-panel{
  min-height:
    calc(100% - 86px);

  border:
    1px solid var(--line);

  border-radius:25px;

  background:
    rgba(255,255,255,.015);

  padding:23px;

  display:grid;
  place-items:center;
}

.center-stack{
  text-align:center;
  width:min(740px,100%);
}

.game-prompt{
  font-size:
    clamp(34px,6vw,78px);

  line-height:.9;

  letter-spacing:-.07em;

  font-weight:700;
}

.game-sub{
  color:#7c8a82;

  font-size:12px;

  line-height:1.6;

  margin-top:12px;
}

.choice-grid{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:11px;

  margin-top:24px;
}

.choice{
  padding:17px;

  border:
    1px solid var(--line);

  background:#0b2017;

  color:#eef4f0;

  border-radius:15px;

  text-align:left;
}

.choice.selected{
  border-color:
    rgba(106,211,157,.4);

  background:
    rgba(56,184,120,.08);
}

.answer-row{
  display:flex;

  gap:10px;

  margin:
    22px auto 0;

  max-width:620px;
}

.canvas-frame{
  background:#eff4ef;

  border-radius:20px;

  border:
    1px solid
    rgba(0,0,0,.12);

  overflow:hidden;

  max-width:820px;

  margin:
    24px auto 0;
}

.draw-canvas{
  display:block;

  width:100%;
  height:440px;

  touch-action:none;

  cursor:crosshair;
}

.draw-tools{
  display:flex;

  justify-content:space-between;

  align-items:center;

  margin:
    12px auto 0;

  max-width:820px;
}

.tool-group{
  display:flex;
  gap:8px;
}

.tool-dot{
  width:28px;
  height:28px;

  border-radius:50%;

  border:
    2px solid
    #b7c5bd;

  background:#17221d;
}

.tool-dot.active{
  outline:
    2px solid
    #6bd39d;

  outline-offset:2px;
}

.timer{
  font-size:14px;
  font-weight:700;
  color:#72daa4;
}

.turn-note{
  font-size:10px;

  color:#708078;

  letter-spacing:.11em;

  text-transform:uppercase;

  margin-bottom:10px;
}

.stage-actions{
  display:flex;

  justify-content:center;

  gap:9px;

  flex-wrap:wrap;

  margin-top:20px;
}

.pro-lock{
  border:
    1px solid
    rgba(106,211,157,.2);

  background:
    rgba(56,184,120,.06);

  border-radius:20px;

  padding:22px;

  max-width:520px;

  margin:
    20px auto;
}

.empty-game{
  min-height:
    calc(100% - 84px);

  display:grid;
  place-items:center;

  text-align:center;
}

.empty-game h2{
  font-size:48px;

  letter-spacing:-.06em;

  margin:0;
}

.empty-game p{
  max-width:500px;

  color:#7d8b83;

  line-height:1.65;

  font-size:13px;
}

/* ANIMATION */

@keyframes float{
  50%{
    transform:translateY(-11px);
  }
}

@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}

@keyframes marquee{
  to{
    transform:translateX(-50%);
  }
}

@media(max-width:980px){

  .hero{
    grid-template-columns:1fr;
  }

  .hero-scene{
    min-height:480px;
  }

  .story-grid{
    grid-template-columns:1fr;
  }

  .story-copy{
    position:static;
  }

  .phone-stage{
    min-height:720px;
  }

  .game-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .how-band{
    grid-template-columns:1fr;
    gap:25px;
  }

  .plans{
    grid-template-columns:1fr;
  }

  .game-body{
    grid-template-columns:1fr;
  }

  .game-side{
    display:none;
  }

  .floating-play{
    right:18px;
    top:94px;
  }
}

@media(max-width:680px){

  .shell{
    width:
      min(
        calc(100% - 28px),
        var(--max)
      );
  }

  .site-nav{
    height:70px;
  }

  .nav-links{
    display:none;

    position:absolute;

    top:64px;

    left:14px;
    right:14px;

    padding:14px;

    border:
      1px solid var(--line);

    border-radius:17px;

    background:#081a13;

    flex-direction:column;

    align-items:flex-start;

    box-shadow:var(--shadow);
  }

  .nav-links.open{
    display:flex;
  }

  .nav-actions .btn,
  .nav-actions .text-button{
    display:none;
  }

  .nav-actions .auth-control{
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
  }

  .nav-toggle{
    display:grid;
    place-items:center;
  }

  .credit-label{
    display:none;
  }

  .floating-play{
    top:auto;
    bottom:18px;
    right:18px;
  }

  .hero{
    min-height:auto;
    padding:52px 0 64px;
  }

  .hero h1{
    font-size:59px;
  }

  .hero-scene{
    min-height:395px;
    transform:scale(.86);
  }

  .game-grid{
    grid-template-columns:1fr;
  }

  .section,
  .pricing-section{
    padding:88px 0;
  }

  .section-head{
    display:block;
  }

  .section-head>p{
    margin-top:18px;
  }

  .arcade-cta{
    align-items:flex-start;
    flex-direction:column;
  }

  .footer{
    grid-template-columns:1fr;
    gap:12px;
  }

  .footer p,
  .footer>span{
    text-align:center;
  }

  .how-band{
    padding:22px;
  }

  .game-page{
    padding:
      8px 0 18px;
  }

  .game-shell{
    border-radius:22px;

    min-height:
      calc(100vh - 94px);
  }

  .game-toolbar{
    padding:12px;
  }

  .game-stage{
    padding:15px;
  }

  .game-view-title{
    display:block;
  }

  .game-view-title .tag{
    display:inline-flex;
    margin-top:12px;
  }

  .room-actions{
    grid-template-columns:1fr;
  }

  .choice-grid{
    grid-template-columns:1fr;
  }

  .answer-row{
    flex-direction:column;
  }

  .draw-canvas{
    height:320px;
  }

  .room-code{
    font-size:42px;
  }

  .room-card{
    padding:18px;
  }

  .play-panel{
    padding:16px;
  }

  .game-prompt{
    font-size:48px;
  }

  .room-player-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .phone{
    width:76%;
  }
}

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *:before,
  *:after{
    animation:none!important;
    transition:none!important;
  }
}
/* =========================================================
   AD SPOTS (Google AdSense) — filled by /js/ads.js
========================================================= */

.fg-ad-slot[hidden]{ display:none !important; }

.fg-ad{
  position:relative;
  display:block;
  margin:48px auto;
  padding:26px 14px 14px;
  min-height:140px;              /* reserve space so the page doesn't jump */
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(255,255,255,.02);
  overflow:hidden;
  text-align:center;
}
.fg-ad-label{
  position:absolute;
  top:9px;
  left:0;
  right:0;
  font-size:9px;
  letter-spacing:.18em;
  font-weight:700;
  text-transform:uppercase;
  color:var(--muted2);
}
.fg-ad ins.adsbygoogle{ width:100%; min-height:100px; }
/* an unfilled unit shouldn't leave an empty box behind */
.fg-ad:has(ins.adsbygoogle[data-ad-status="unfilled"]){ display:none; }

.legal-shell .fg-ad,
.terms-shell .fg-ad{ max-width:860px; margin:28px auto 60px; }
.pl .fg-ad{ margin:28px 0 8px; }

@media (max-width:680px){
  .fg-ad{ margin:32px auto; border-radius:18px; min-height:120px; }
}

/* the cookie banner must disappear once a choice is made */
.consent-banner[hidden]{ display:none !important; }