/* ============================================================
   Web Games No Download - design system
   Dark-first, neutral gray + a single accent. Inter / system-ui.
   No external fonts, no icon fonts, no CDNs.
   ============================================================ */
:root{
  --bg:#0d1017;
  --bg-2:#11151d;
  --surface:#161b24;
  --surface-2:#1c222d;
  --solid:#202730;
  --text:#e8ebf1;
  --muted:#9aa4b2;
  --border:#262d39;
  --accent:#4f8cff;
  --accent-ink:#0d1017;
  --accent-weak:rgba(79,140,255,.14);
  --accent-line:rgba(79,140,255,.45);
  --ok:#46c98b;
  --danger:#ff6b6b;
  --radius:14px;
  --radius-sm:10px;
  --header-h:60px;
  --maxw:1200px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{line-height:1.25;font-weight:800;}
svg.icon{width:1em;height:1em;display:inline-block;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.125em;}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;left:0;right:0;z-index:50;
  height:var(--header-h);
  display:flex;align-items:center;gap:14px;
  padding:0 16px;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;letter-spacing:-.2px;white-space:nowrap;}
.brand .logo-img{width:32px;height:32px;border-radius:9px;background:var(--surface-2);border:1px solid var(--border);}
.brand b{display:block;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.2px;line-height:1;}
.brand .brand-name{display:flex;flex-direction:column;line-height:1.15;}
.nav{display:none;align-items:center;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none;}
.nav::-webkit-scrollbar{display:none;}
.nav a{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted);transition:.15s;white-space:nowrap;}
.nav a .icon{width:17px;height:17px;}
.nav a:hover{color:var(--text);background:var(--surface-2);}
.nav a.active{color:var(--accent);background:var(--accent-weak);}
.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto;}
@media (min-width:880px){ .nav ~ .header-actions{margin-left:0;} }
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);transition:.15s;}
.icon-btn:hover{border-color:var(--accent-line);color:var(--accent);}
.icon-btn .icon{width:19px;height:19px;}
.hamburger{display:flex;flex-direction:column;gap:5px;background:none;border:0;padding:9px;margin-left:0;}
.hamburger span{width:22px;height:2px;border-radius:2px;background:var(--text);transition:.2s;}
.mobile-menu{position:fixed;top:var(--header-h);left:0;right:0;z-index:49;display:none;flex-direction:column;gap:2px;padding:10px;background:color-mix(in srgb,var(--bg) 97%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);box-shadow:var(--shadow);}
.mobile-menu.open{display:flex;}
.mobile-menu a{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:10px;font-weight:600;color:var(--text);}
.mobile-menu a .icon{width:20px;height:20px;color:var(--muted);}
.mobile-menu a:hover{background:var(--surface-2);}
.mobile-menu a.active{color:var(--accent);background:var(--accent-weak);}
.mobile-menu a.mm-special{color:var(--accent);}

/* ---------- layout ---------- */
.content{max-width:var(--maxw);margin:0 auto;padding:24px 16px 64px;}
.section-title{font-size:20px;font-weight:800;margin:28px 0 12px;display:flex;align-items:center;gap:9px;letter-spacing:-.2px;}
.section-title .dot{width:10px;height:10px;border-radius:3px;background:var(--accent);transform:rotate(45deg);}
.section-sub{margin:0 0 12px;color:var(--muted);font-size:14px;}

/* ---------- hero / intro ---------- */
.hero{margin:18px 0 8px;padding:34px 28px;border-radius:20px;background:radial-gradient(120% 140% at 0% 0%,rgba(79,140,255,.18),transparent 55%),linear-gradient(135deg,#1b2230,#141a24);border:1px solid var(--border);box-shadow:var(--shadow);}
.hero h1{font-size:clamp(28px,5vw,46px);margin:0 0 12px;letter-spacing:-.8px;line-height:1.05;}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero p{margin:0;color:var(--muted);font-size:16.5px;max-width:680px;line-height:1.6;}
.hero .hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;}
.hero .hero-actions .btn{padding:13px 22px;font-size:15.5px;}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:10px;font-weight:700;font-size:15px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);transition:.15s;}
.btn:hover{border-color:var(--accent-line);}
.btn .icon{width:18px;height:18px;}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:transparent;}
.btn-primary:hover{filter:brightness(1.06);}
.btn-ghost{background:transparent;}
.btn-block{width:100%;}

/* ---------- chips ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap;}
.chip{flex:0 0 auto;padding:8px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-weight:600;font-size:13.5px;color:var(--muted);transition:.15s;white-space:nowrap;cursor:pointer;}
.chip:hover{color:var(--text);border-color:var(--accent-line);}
.chip.active{color:var(--accent-ink);background:var(--accent);border-color:transparent;}

/* ---------- toolbar / filters ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0 18px;}
.toolbar .search-field{position:relative;flex:1;min-width:200px;}
.toolbar .search-field .icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);width:18px;height:18px;}
.toolbar input[type="search"]{width:100%;padding:11px 14px 11px 40px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:15px;}
.toolbar input:focus{outline:none;border-color:var(--accent-line);}
.select{position:relative;}
.select select{padding:11px 34px 11px 14px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:14px;font-family:inherit;font-weight:600;appearance:none;cursor:pointer;}
.select .icon{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--muted);width:16px;height:16px;pointer-events:none;}
.result-count{color:var(--muted);font-size:13px;margin-left:auto;}

/* ---------- game grid + cards ---------- */
.game-grid{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr));}
/* in-feed ad slot: span the whole row instead of sitting in one narrow cell
   (its 300px width would otherwise force every 1fr column to a 300px minimum
   and blow the grid out past the viewport) */
.game-grid>.ad-slot{grid-column:1/-1;justify-self:center;width:300px;max-width:100%;}
.game-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:transform .16s,border-color .16s,box-shadow .16s;text-decoration:none;}
.game-card:hover{transform:translateY(-4px);border-color:var(--accent-line);box-shadow:0 14px 34px rgba(0,0,0,.45);}
.game-card:active{transform:scale(.985);}
.thumb-wrap{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--solid);}
.game-card .thumb{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease;}
.game-card:hover .thumb{transform:scale(1.06);}
.cat-pill{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#fff;background:rgba(13,16,23,.5);padding:3px 8px;border-radius:999px;backdrop-filter:blur(3px);}
.cat-pill .icon{width:12px;height:12px;color:var(--accent);}
.rate-badge{position:absolute;right:8px;top:8px;display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:800;color:#fff;background:rgba(13,16,23,.5);padding:3px 7px;border-radius:999px;backdrop-filter:blur(3px);}
.rate-badge .icon{width:12px;height:12px;color:#ffd24a;}
.game-card .meta{padding:11px 13px 13px;display:flex;flex-direction:column;gap:4px;}
.game-card .name{font-weight:700;font-size:15px;color:var(--text);line-height:1.25;}
.game-card .tag{color:var(--muted);font-size:13px;min-height:18px;line-height:1.3;}
.game-card .stats{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:12.5px;color:var(--muted);}
.game-card .rating{color:var(--accent);font-weight:700;}
.game-card .cat-line{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.game-card .cat-line .icon{width:14px;height:14px;color:var(--accent);}

/* ---------- home rows use the same grid (no horizontal scrolling) ---------- */

/* ---------- detail page ---------- */
.detail{max-width:760px;margin:8px auto 0;}
.detail-top{margin:4px 0 14px;}
.page-back{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-weight:600;font-size:13.5px;color:var(--text);}
.page-back:hover{border-color:var(--accent-line);color:var(--accent);}
.page-back .icon{width:16px;height:16px;}
.detail-head{display:flex;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;}
.detail-head img{width:128px;height:96px;border-radius:14px;background:var(--solid);flex:0 0 auto;border:1px solid var(--border);object-fit:cover;}
.detail-head h1{margin:0 0 6px;font-size:24px;}
.detail-head .sub{color:var(--muted);margin:0;font-size:14px;}
.detail-head .rate{color:var(--accent);font-size:13.5px;margin-top:8px;font-weight:700;}
.play-row{display:flex;gap:10px;margin:16px 0;align-items:stretch;}
.play-row>.btn{display:flex;align-items:center;justify-content:center;margin:0;}
.play-row>.btn,.play-row>.fav-btn{min-height:48px;height:48px;box-sizing:border-box;}
.fav-btn{flex:0 0 auto;width:54px;border-radius:12px;border:1px solid var(--accent-line);background:var(--accent-weak);color:var(--accent);display:flex;align-items:center;justify-content:center;transition:.15s;box-sizing:border-box;}
.fav-btn .icon{width:22px;height:22px;}
.fav-btn.on{background:var(--accent);color:var(--accent-ink);}
.detail-desc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;font-size:15px;line-height:1.7;margin-top:14px;}
.detail-desc h3{margin:0 0 8px;font-size:17px;}

/* ---------- comments ---------- */
.comments{margin-top:18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;}
.comments h3{margin:0 0 4px;font-size:17px;}
.comments .c-sub{color:var(--muted);font-size:13px;margin:0 0 14px;}
.comment{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--border);}
.comment:first-of-type{border-top:0;padding-top:4px;}
.comment .ava{width:38px;height:38px;border-radius:11px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:14px;background:var(--accent);}
.comment .c-body{flex:1;min-width:0;}
.comment .c-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.comment .c-name{font-weight:700;font-size:14px;}
.comment .c-stars{color:var(--accent);font-size:13px;letter-spacing:1px;}
.comment .c-text{font-size:14px;line-height:1.6;margin:5px 0 0;word-wrap:break-word;}
.comment .c-meta{color:var(--muted);font-size:12px;margin-top:4px;}
.c-form{margin-top:16px;border-top:1px solid var(--border);padding-top:14px;}
.c-form .row{display:flex;gap:10px;flex-wrap:wrap;}
.c-form input,.c-form textarea{padding:11px 13px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-size:14px;font-family:inherit;width:100%;}
.c-form textarea{min-height:80px;resize:vertical;}
.c-form .field{position:relative;flex:1;min-width:160px;}
.c-form label{display:block;font-size:12.5px;color:var(--muted);margin:0 0 5px;font-weight:600;}
.c-form .req{color:var(--accent);}
.c-form .star-pick{display:flex;gap:4px;}
.c-form .star-pick button{background:none;border:0;color:var(--border);font-size:22px;line-height:1;padding:2px;transition:.12s;}
.c-form .star-pick button.on{color:var(--accent);}
.c-form .hint{font-size:12px;color:var(--muted);margin-top:6px;}
.c-form .err{color:var(--danger);font-size:12.5px;margin-top:8px;min-height:16px;}
.c-form .c-success{color:var(--ok);font-size:13.5px;font-weight:700;margin-top:10px;}

/* ---------- notes ---------- */
.notes-area{width:100%;min-height:220px;padding:14px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:15px;font-family:inherit;resize:vertical;}
.notes-actions{display:flex;gap:10px;margin-top:12px;align-items:center;}

/* ---------- page hero (category / lists) ---------- */
.page-hero{margin:16px 0 4px;padding:22px 20px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);}
.page-hero h1{margin:0 0 6px;font-size:26px;letter-spacing:-.3px;}
.page-hero h1 em{font-style:normal;color:var(--accent);}
.page-hero p{margin:0;color:var(--muted);font-size:14px;}

/* ---------- empty state ---------- */
.empty-state{text-align:center;padding:48px 16px;color:var(--muted);}
.empty-state .big{font-size:48px;line-height:1;margin-bottom:10px;}
.empty-state p{margin:0 0 16px;font-weight:600;}

/* ---------- legal pages ---------- */
.legal{max-width:780px;margin:10px auto 0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;}
.legal h1{font-size:24px;margin:0 0 8px;}
.legal h2{font-size:17px;margin:22px 0 8px;color:var(--accent);}
.legal p{color:var(--muted);font-size:14.5px;line-height:1.75;margin:0 0 10px;}
.legal ul{color:var(--muted);font-size:14.5px;line-height:1.7;padding-left:20px;}
.legal a{color:var(--accent);text-decoration:underline;}

/* ---------- footer ---------- */
.site-footer{margin-top:34px;border-top:1px solid var(--border);background:var(--bg-2);}
.site-footer .inner{max-width:var(--maxw);margin:0 auto;padding:26px 16px;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:flex-start;}
.foot-brand{display:flex;align-items:center;gap:10px;font-weight:800;}
.foot-brand .logo-img{width:30px;height:30px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border);}
.foot-cols{display:flex;flex-wrap:wrap;gap:28px;}
.foot-col h4{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin:0 0 10px;}
.foot-col a{display:block;color:var(--text);font-size:14px;padding:4px 0;opacity:.9;}
.foot-col a:hover{color:var(--accent);}
.foot-bottom{border-top:1px solid var(--border);max-width:var(--maxw);margin:0 auto;padding:14px 16px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;color:var(--muted);font-size:12.5px;}

/* ---------- back to top ---------- */
.fab-stack{position:fixed;right:16px;bottom:130px;z-index:46;display:flex;flex-direction:column;gap:10px;}
.fab{width:50px;height:50px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;background:var(--surface);color:var(--text);transition:transform .15s,opacity .2s,filter .15s;box-shadow:var(--shadow);}
.fab .icon{width:24px;height:24px;}
.fab:active{transform:scale(.92);}
/* game-themed back-to-top */
.to-top{opacity:0;pointer-events:none;transform:translateY(10px);background:var(--accent);color:var(--accent-ink);border-color:transparent;box-shadow:0 10px 24px rgba(79,140,255,.45);}
.to-top .icon{stroke-width:1.9;}
.to-top.show{opacity:1;pointer-events:auto;transform:none;}
.to-top:hover{filter:brightness(1.08);}
.to-top.show:hover{transform:translateY(-2px);}

/* ---------- cookie consent ---------- */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:14px 16px;background:color-mix(in srgb,var(--surface) 96%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--border);box-shadow:0 -10px 30px rgba(0,0,0,.3);transform:translateY(110%);transition:transform .3s ease;}
.cookie.show{transform:translateY(0);}
.cookie .ck-inner{max-width:var(--maxw);margin:0 auto;display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
.cookie p{margin:0;font-size:13.5px;color:var(--muted);flex:1;min-width:240px;}
.cookie p a{color:var(--accent);text-decoration:underline;}
.cookie .ck-actions{display:flex;gap:8px;flex-wrap:wrap;}
.cookie .ck-manage{width:100%;border-top:1px solid var(--border);margin-top:12px;padding-top:12px;display:none;}
.cookie.open-manage .ck-manage{display:block;}
.ck-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;font-size:13.5px;}
.ck-toggle .sw{width:40px;height:22px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);position:relative;flex:0 0 auto;transition:.15s;}
.ck-toggle .sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:.15s;}
.ck-toggle.on .sw{background:var(--accent);}
.ck-toggle.on .sw::after{left:20px;background:var(--accent-ink);}
.ck-toggle input{position:absolute;opacity:0;pointer-events:none;}

/* ---------- ad slots (placeholder, no third-party) ---------- */
.ad-slot{
  width:300px;height:250px;flex:0 0 auto;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;position:relative;
  border:1px dashed var(--border);border-radius:14px;
  background:linear-gradient(135deg,var(--surface-2),var(--surface));
  color:var(--muted);overflow:hidden;
}
.ad-slot .ad-center{font-size:17px;font-weight:700;letter-spacing:.4px;color:var(--muted);text-align:center;padding:0 12px;}
.ad-row{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin:18px 0;}
.detail-ad{display:flex;justify-content:center;margin:16px 0;}

/* ---------- anchored (sticky bottom) ad: home + detail only ---------- */
/* fixed banner, 60px tall, flush to the bottom edge, never scrolls with content.
   body padding reserves the space so the banner never covers the last content. */
.anchored-ad{position:fixed;left:0;right:0;bottom:0;z-index:57;display:flex;justify-content:center;padding-bottom:env(safe-area-inset-bottom);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--border);box-shadow:0 -8px 24px rgba(0,0,0,.28);}
.anchored-ad .ad-slot{width:300px;height:60px;border-radius:0;border-left:0;border-right:0;border-bottom:0;box-shadow:none;}
body.has-anchored-ad{padding-bottom:calc(76px + env(safe-area-inset-bottom));}
body.has-anchored-ad .fab-stack{bottom:calc(76px + 16px);}

/* ---------- game loading transition ---------- */
.game-transition{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(8,10,16,.92);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;backdrop-filter:blur(2px);}
.game-transition.show{opacity:1;visibility:visible;}
.gt-card{display:flex;flex-direction:column;align-items:center;gap:18px;transform:scale(.96);transition:transform .25s ease;}
.game-transition.show .gt-card{transform:none;}
.gt-icon{width:96px;height:72px;border-radius:14px;object-fit:cover;border:1px solid var(--border);background:var(--solid);}
.gt-spinner{width:42px;height:42px;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:var(--accent);animation:gt-spin .8s linear infinite;}
@keyframes gt-spin{to{transform:rotate(360deg);}}
.gt-text{color:#fff;font-weight:700;font-size:16px;letter-spacing:.3px;}

/* ---------- interstitial (插屏广告) ---------- */
.interstitial{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;background:rgba(6,8,13,.86);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;backdrop-filter:blur(3px);}
.interstitial.show{opacity:1;visibility:visible;}
.interstitial-panel{position:relative;width:300px;height:250px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--surface-2),var(--surface));border:1px solid var(--border);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.6);transform:translateY(10px) scale(.97);transition:transform .3s ease;}
.interstitial.show .interstitial-panel{transform:none;}
.interstitial-panel .ad-center{font-size:17px;font-weight:700;color:var(--muted);}

/* ---------- responsive ---------- */
@media (max-width:1100px){ .game-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:760px){ .game-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;} .nav{display:none;} }
/* mobile: home + detail ad slots stretch to full available width */
@media (max-width:760px){
  .ad-row .ad-slot,.detail-ad .ad-slot,.anchored-ad .ad-slot{width:100%;max-width:none;}
  .ad-row,.detail-ad{margin:14px 0;}
}
@media (min-width:880px){ .hamburger{display:none;} .nav{display:flex;} }
@media (max-width:520px){
  /* mobile: compact 3-across tile grid, no horizontal scrolling */
  .game-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
  .content{padding:14px 12px 56px;}
  .hero{padding:24px 18px;border-radius:16px;}
  .hero h1{font-size:27px;}
  .detail-head{flex-direction:row;}
  .game-card .meta{padding:9px 9px 11px;gap:3px;}
  .game-card .name{font-size:13px;line-height:1.25;}
  .game-card .tag{font-size:11.5px;min-height:15px;}
  .game-card .stats{display:none;}
  .game-card .cat-line{display:none;}
  .cat-pill{font-size:9px;padding:2px 6px;}
  .rate-badge{font-size:10px;padding:2px 6px;}
}

/* ============================================================
   Play page (fullscreen game) - dark shell, neutral + accent
   ============================================================ */
.play-page{margin:0;height:100vh;height:100dvh;width:100%;position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:var(--bg);}
.play-bar{position:fixed;top:0;left:0;right:0;height:calc(52px + env(safe-area-inset-top));z-index:10;display:flex;align-items:center;gap:10px;padding:env(safe-area-inset-top) 12px 0;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);}
.play-back{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:700;font-size:14px;}
.play-back .icon{width:18px;height:18px;}
.play-name{font-weight:800;font-size:16px;margin:0 auto;color:var(--text);}
.play-restart{background:var(--accent);color:var(--accent-ink);border:0;padding:8px 14px;border-radius:10px;font-weight:700;font-size:13px;}
#stage-wrap{position:fixed;top:calc(52px + env(safe-area-inset-top));left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;touch-action:none;}
#stage{position:relative;width:360px;height:600px;overflow:hidden;transform-origin:center center;background:var(--solid);border-radius:10px;border:1px solid var(--border);box-shadow:var(--shadow);}
#stage .sprite{position:absolute;user-select:none;-webkit-user-drag:none;pointer-events:none;}
.hud{position:absolute;top:8px;left:10px;right:10px;z-index:5;display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;color:var(--text);text-shadow:0 2px 6px rgba(0,0,0,.5);pointer-events:none;}
.hud .lives{margin-left:auto;}
.hud .lives{color:var(--danger);}
.overlay{position:fixed;inset:0;z-index:20;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;}
.overlay.hidden{display:none;}
.overlay-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:26px 24px;text-align:center;width:100%;max-width:330px;box-shadow:var(--shadow);}
.overlay-card h2{margin:0 0 6px;font-size:24px;}
.overlay-card p{color:var(--muted);margin:0 0 18px;}
.ov-emoji{font-size:54px;line-height:1;margin-bottom:8px;}
.ov-emoji.fail{animation:ovShake .6s ease-in-out infinite;}
.ov-emoji.win{animation:ovPop .55s ease-in-out infinite alternate;}
.ov-reason{color:var(--muted);font-size:14px;margin:-2px 0 10px;}
@keyframes ovShake{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg) translateY(-5px)}}
@keyframes ovPop{from{transform:scale(.85)}to{transform:scale(1.12)}}
.btn-primary{display:block;width:100%;padding:14px;border:0;border-radius:10px;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:16px;margin-bottom:10px;}
.btn-primary:active{transform:translateY(2px);}
.btn-ghost{display:block;color:var(--accent);font-weight:700;font-size:14px;text-align:center;}
.mob-kb{position:fixed;left:0;right:0;bottom:0;z-index:18;display:flex;flex-direction:column;gap:6px;padding:8px 6px calc(8px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 96%,transparent);border-top:1px solid var(--border);max-height:48vh;overflow:auto;}
.mob-kb .krow{display:flex;gap:6px;justify-content:center;}
.mob-kb button{flex:1 1 auto;min-width:0;max-width:56px;height:46px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--text);font-weight:800;font-size:18px;font-family:inherit;line-height:1;touch-action:manipulation;user-select:none;-webkit-user-select:none;}
.mob-kb button:active{background:var(--accent);color:var(--accent-ink);}
.mob-kb button.wide{max-width:92px;background:var(--accent-weak);border-color:var(--accent-line);color:var(--accent);}

/* ---------- utility ---------- */
.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;}
.no-scroll{overflow:hidden;}