:root { color-scheme:dark; --bg:#050b13; --panel:rgba(11,23,36,.86); --line:rgba(92,225,230,.18); --text:#eefbff; --muted:#86a2b4; --cyan:#5ce1e6; --green:#70f0a7; --gold:#ffd66b; }
html { min-height:100%; background:#050b13; }
body {
  min-height:100vh; margin:0;
  background:radial-gradient(circle at 18% 8%,rgba(59,158,255,.14),transparent 32rem),radial-gradient(circle at 84% 85%,rgba(112,240,167,.1),transparent 30rem),var(--bg);
  color:var(--text); font-family:"Clear Sans","Microsoft YaHei",sans-serif;
}
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.22;
  background-image:linear-gradient(rgba(92,225,230,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(92,225,230,.035) 1px,transparent 1px);
  background-size:44px 44px; mask-image:linear-gradient(to bottom,#000,transparent 88%);
}
.arcade-page { box-sizing:border-box; position:relative; z-index:1; width:min(100%,820px); margin:0 auto; padding:max(18px,env(safe-area-inset-top)) 18px max(28px,env(safe-area-inset-bottom)); }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; font-family:ui-monospace,"SFMono-Regular",Consolas,monospace; }
.back { display:inline-flex; min-height:42px; align-items:center; padding:0 14px; border:1px solid var(--line); border-radius:12px; background:rgba(10,23,36,.72); color:var(--text); text-decoration:none; }
.brand { color:var(--muted); font-size:12px; letter-spacing:.12em; }
.brand b { color:var(--green); }
.container { width:500px; margin:0 auto; padding:22px; border:1px solid var(--line); border-radius:28px; background:var(--panel); box-shadow:0 28px 90px rgba(0,0,0,.42); backdrop-filter:blur(12px); }
.heading { display:flex; align-items:flex-end; }
.eyebrow { margin-bottom:6px; color:var(--green); font:11px/1.2 ui-monospace,"SFMono-Regular",Consolas,monospace; letter-spacing:.13em; text-transform:uppercase; }
h1.title { margin:0; background:linear-gradient(120deg,#f6fdff,#8cecff 55%,#70f0a7); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:72px; letter-spacing:-.07em; }
.score-container,.best-container { background:rgba(255,255,255,.055); color:var(--text); border:1px solid rgba(255,255,255,.075); border-radius:12px; }
.score-container::after,.best-container::after { color:var(--muted); }
.above-game { align-items:center; margin-top:16px; }
.game-intro { color:var(--muted); }
.game-intro strong { color:var(--cyan); }
.game-actions { display:flex; align-items:center; gap:9px; }
.sound-button { width:42px; height:42px; border:1px solid rgba(92,225,230,.22); border-radius:12px; background:rgba(255,255,255,.055); color:var(--text); font-size:17px; cursor:pointer; }
.sound-button.muted { color:var(--muted); opacity:.68; }
.restart-button,.retry-button,.keep-playing-button { background:linear-gradient(135deg,var(--cyan),var(--green)); color:#05202a; border-radius:11px; box-shadow:0 12px 26px rgba(92,225,230,.13); }
.feline-dashboard { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:14px 0 16px; }
.dash-card { min-height:56px; padding:10px 12px; border:1px solid rgba(92,225,230,.16); border-radius:16px; background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025)); box-sizing:border-box; }
.dash-card span { display:block; margin-bottom:4px; color:var(--muted); font:10px/1.2 ui-monospace,"SFMono-Regular",Consolas,monospace; letter-spacing:.12em; }
.dash-card strong { color:var(--text); font-size:23px; line-height:1; text-shadow:0 0 18px rgba(92,225,230,.18); }
.dash-progress { grid-column:1/-1; height:7px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.06); }
.dash-progress i { display:block; width:8%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--cyan),var(--green),var(--gold)); box-shadow:0 0 18px rgba(112,240,167,.45); transition:width .22s ease; }
.game-container { margin-top:14px; background:radial-gradient(circle at 50% 0%,rgba(255,214,107,.09),transparent 19rem),rgba(92,225,230,.08); border:1px solid rgba(92,225,230,.22); border-radius:14px; box-shadow:inset 0 0 28px rgba(3,10,18,.65),0 0 34px rgba(92,225,230,.08); }
.grid-cell { background:rgba(231,249,255,.075); box-shadow:inset 0 0 18px rgba(255,255,255,.025); }
.tile .tile-inner { box-shadow:0 12px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.18); }
.tile.tile-2 .tile-inner,.tile.tile-4 .tile-inner { background:#143044; color:#c8f7ff; }
.tile.tile-8 .tile-inner,.tile.tile-16 .tile-inner { background:linear-gradient(135deg,#1e6f8c,#35d4d9); color:#05202a; }
.tile.tile-32 .tile-inner,.tile.tile-64 .tile-inner { background:linear-gradient(135deg,#2e8d62,#70f0a7); color:#061e14; }
.tile.tile-128 .tile-inner,.tile.tile-256 .tile-inner,.tile.tile-512 .tile-inner { background:linear-gradient(135deg,#8e6d22,#ffd66b); color:#241704; }
.tile.tile-1024 .tile-inner,.tile.tile-2048 .tile-inner,.tile.tile-super .tile-inner { background:linear-gradient(135deg,#e86598,#9b7cff 52%,#5ce1e6); color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.35); }
.tile-upgraded .game-container { animation:goalPulse .42s ease; }
@keyframes goalPulse { 0%,100% { box-shadow:inset 0 0 28px rgba(3,10,18,.65),0 0 34px rgba(92,225,230,.08); } 45% { box-shadow:inset 0 0 28px rgba(3,10,18,.65),0 0 46px rgba(112,240,167,.34); } }
.game-message { border-radius:14px; background:rgba(4,12,20,.9); }
.game-message p { color:var(--text); }
.game-explanation { color:var(--muted); font-size:14px; line-height:1.7; }
.important { color:var(--green); }
.credit { margin:16px 0 0; color:#536c7c; font-size:11px; line-height:1.6; }
.credit a { color:#7296aa; }
@media screen and (max-width:560px) {
  .arcade-page { padding-left:12px; padding-right:12px; }
  .brand { font-size:10px; letter-spacing:.06em; }
  .container { width:320px; padding:14px; border-radius:22px; }
  h1.title { font-size:48px; }
  .heading { margin-bottom:6px; }
  .scores-container { margin-top:0; }
  .score-container,.best-container { min-width:58px; padding:11px 9px 5px; font-size:20px; }
  .above-game { margin-top:10px; }
  .game-intro { width:55%; font-size:13px; line-height:1.45; }
  .restart-button { padding:0 12px; line-height:40px; }
  .sound-button { width:40px; height:40px; }
  .feline-dashboard { gap:7px; margin:12px 0 13px; }
  .dash-card { min-height:50px; padding:9px; border-radius:13px; }
  .dash-card span { font-size:9px; letter-spacing:.08em; }
  .dash-card strong { font-size:20px; }
  .game-container { margin-top:14px; }
  .game-explanation { margin-top:18px; font-size:12px; }
}