:root{
  --mint:#10B981;--deep-mint:#065F46;--ink:#0B1220;--ink2:#5B6472;--paper:#FBFBF9;
  --surface:#fff;--hair:#E7E8E3;--mint-wash:#ECFDF5;--amber:#F59E0B;
  --disp:'Space Grotesk',-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --body:'Inter',-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --mono:'JetBrains Mono','Courier New',monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{font-family:var(--body);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.brand{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--ink);display:inline-flex;align-items:center;gap:7px}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px var(--mint-wash)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:var(--body);font-weight:600;font-size:15px;color:#fff;background:var(--mint);border:0;border-radius:12px;padding:13px 22px;cursor:pointer;text-decoration:none;line-height:1.1;transition:background .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn:hover{background:var(--deep-mint)}
.btn.ghost{background:transparent;color:var(--ink2);border:1px solid var(--hair)}
.btn.ghost:hover{color:var(--ink);background:var(--paper)}
.btn.big{font-size:17px;padding:15px 26px;width:100%}

/* ad slots + placeholder */
.ad-banner{min-height:54px;display:flex;align-items:center;justify-content:center;background:var(--surface);border-bottom:1px solid var(--hair);padding:6px}
.ad-footer{min-height:60px;display:flex;align-items:center;justify-content:center;background:var(--surface);border-top:1px solid var(--hair);padding:6px}
.ad-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;max-width:340px;min-height:44px;border:1px dashed var(--hair);border-radius:8px;background:var(--paper);color:var(--ink2);font-size:12px}
.ad-ph small{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#9aa1ad;background:var(--mint-wash);border-radius:4px;padding:1px 5px}

/* topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;background:var(--surface);border-bottom:1px solid var(--hair);position:sticky;top:0;z-index:20}
.lock{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--deep-mint);background:var(--mint-wash);border:1px solid #C9F0DE;border-radius:999px;padding:5px 11px}
.spin{width:11px;height:11px;border-radius:50%;border:2px solid #B6E6D2;border-top-color:var(--mint);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* hero */
.hero{min-height:calc(100vh - 110px);display:flex;align-items:center;justify-content:center;text-align:center;padding:30px 22px}
.hero-inner{max-width:520px}
.kicker{display:inline-block;font-family:var(--body);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--deep-mint);background:var(--mint-wash);border:1px solid #C9F0DE;border-radius:999px;padding:6px 13px;margin-bottom:16px}
.hero h1{font-family:var(--disp);font-weight:700;font-size:clamp(26px,7vw,40px);line-height:1.12;letter-spacing:-.02em;margin:0 0 12px}
.hero .sub{font-size:15.5px;color:var(--ink2);line-height:1.6;margin:0 0 26px}
.hero .sub b{font-family:var(--mono);font-size:13.5px;color:var(--ink);background:var(--paper);border:1px solid var(--hair);border-radius:7px;padding:2px 7px;display:inline-block;margin-top:6px}
.scroll-cue{font-family:var(--body);font-weight:600;font-size:15px;color:var(--ink);background:var(--surface);border:1px solid var(--hair);border-radius:12px;padding:13px 22px;cursor:pointer;animation:bob 1.8s ease-in-out infinite}
.scroll-cue span{margin-left:6px;color:var(--mint)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* games grid */
.games{padding:26px 16px 120px;max-width:640px;margin:0 auto}
.games-title{font-family:var(--disp);font-weight:700;font-size:20px;text-align:center;margin:0 0 18px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.game-card{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--hair);border-radius:16px;padding:18px 10px;cursor:pointer;text-align:center;font-family:var(--body)}
.game-card .ic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--mint-wash)}
.game-card .nm{font-weight:600;font-size:14px;color:var(--ink)}
.game-card .meta{font-size:11px;color:var(--ink2)}
.game-card.live{border-color:var(--mint);box-shadow:0 8px 22px -14px rgba(16,185,129,.6)}
.game-card.live .ic{background:var(--mint)}
.game-card.soon{opacity:.55;cursor:not-allowed}
.game-card.soon .ic{background:var(--paper)}
.game-card .soon-ic{color:#c2c6cd;font-size:13px}
.bird{width:22px;height:22px;border-radius:50% 50% 50% 4px;background:#fff;position:relative;box-shadow:inset -4px -3px 0 rgba(0,0,0,.08)}
.bird:before{content:"";position:absolute;right:-3px;top:9px;border-left:7px solid #F59E0B;border-top:4px solid transparent;border-bottom:4px solid transparent}
.bird:after{content:"";position:absolute;left:4px;top:4px;width:5px;height:5px;border-radius:50%;background:var(--ink)}
.g-stack{width:22px;height:5px;background:#fff;border-radius:1px;box-shadow:0 8px 0 #fff,0 -8px 0 rgba(255,255,255,.55)}
.g-coin{width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px var(--amber)}
.g-jump{width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:15px solid #fff}

/* game stage (full screen) */
.game-stage{position:fixed;inset:0;z-index:60;background:var(--ink);display:flex;flex-direction:column}
.gs-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;background:#0b1220;color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.gs-back{background:rgba(255,255,255,.08);color:#fff;border:0;border-radius:9px;width:38px;height:38px;font-size:18px;cursor:pointer}
.gs-score,.gs-lives{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:#9FE1CB}
.gs-score b,.gs-lives b{color:#fff;font-size:15px}
.gs-canvas-wrap{flex:1;position:relative;overflow:hidden;display:flex}
#gameCanvas{width:100%;height:100%;display:block;touch-action:none}
.game-stage .ad-footer{background:#0b1220;border-top:1px solid rgba(255,255,255,.08)}
.game-stage .ad-ph{border-color:rgba(255,255,255,.16);background:transparent;color:#9aa6b8}

/* sticky link */
.sticky-link{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:40;display:inline-flex;align-items:center;gap:7px;font-family:var(--body);font-weight:600;font-size:15px;color:#fff;background:var(--ink);border:0;border-radius:999px;padding:13px 24px;cursor:pointer;box-shadow:0 12px 30px -10px rgba(11,18,32,.5)}
.sticky-link.ready{background:var(--mint)}
.game-stage ~ .sticky-link{display:none}

/* popups */
.popup-root{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:18px}
.popup-veil{position:absolute;inset:0;background:rgba(11,18,32,.6)}
.popup{position:relative;width:100%;max-width:360px;background:var(--surface);border-radius:20px;padding:24px 22px;text-align:center;box-shadow:0 30px 70px -20px rgba(11,18,32,.5)}
.popup h3{font-family:var(--disp);font-weight:700;font-size:20px;margin:0 0 8px}
.popup p{font-size:14.5px;color:var(--ink2);line-height:1.55;margin:0 0 16px}
.popup .rs{color:var(--ink);font-family:var(--mono)}
.popup-ad{margin:0 0 16px;display:flex;justify-content:center}
.popup-actions{display:flex;flex-direction:column;gap:9px}
.popup .btn{width:100%}
.popup.pass .stamp{display:inline-block;font-family:var(--disp);font-weight:700;letter-spacing:.12em;font-size:13px;color:var(--deep-mint);border:2px dashed var(--mint);border-radius:10px;padding:6px 14px;margin-bottom:10px;transform:rotate(-3deg)}

/* interstitial */
.interstitial{position:fixed;inset:0;z-index:90;background:var(--ink);display:flex;align-items:center;justify-content:center;padding:20px}
.its-inner{width:100%;max-width:420px;text-align:center;color:#fff}
.its-head{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:#9FE1CB;margin-bottom:14px}
.its-ad{min-height:200px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.18);border-radius:14px;margin-bottom:16px}
.its-ad .ad-ph{border-color:rgba(255,255,255,.2);background:transparent;color:#9aa6b8}
.itsSkip,#itsSkip{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2)}

/* expired / no-link fallback */
.expired{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.expired .card{max-width:360px;text-align:center;background:var(--surface);border:1px solid var(--hair);border-radius:20px;padding:30px 26px}
.expired h1{font-family:var(--disp);font-size:24px;margin:14px 0 8px}
.expired p{color:var(--ink2);font-size:14.5px;line-height:1.6;margin:0 0 20px}

[hidden]{display:none!important}
@media(min-width:560px){.hero{min-height:calc(100vh - 120px)}}