:root {
  --bg: #0b1026; --text: #eef3ff; --dim: #8f9cc6; --line: rgba(255, 255, 255, .12);
  --font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --slide: 110ms;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; color: var(--text); font-family: var(--font); overflow: hidden; overscroll-behavior: none; user-select: none; -webkit-user-select: none; touch-action: none; }
body {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(90, 80, 220, .35), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(30, 160, 200, .25), transparent 50%),
    var(--bg);
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .7;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 72% 12%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, #cfe0ff, transparent), radial-gradient(1px 1px at 85% 55%, #fff, transparent),
    radial-gradient(1px 1px at 25% 88%, #fff, transparent), radial-gradient(1.5px 1.5px at 60% 35%, #ffe8c2, transparent),
    radial-gradient(1px 1px at 8% 50%, #fff, transparent), radial-gradient(1px 1px at 93% 82%, #cfe0ff, transparent);
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
button:focus-visible { outline: 2px solid #9fb4ff; outline-offset: 2px; }
[hidden] { display: none !important; }

#app { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; padding: calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 14px); }
#app > * { width: 100%; max-width: 520px; }

header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand h1 { margin: 0; font-size: 40px; font-weight: 900; letter-spacing: 4px; line-height: 1; background: linear-gradient(180deg, #fff 20%, #9fb4ff 70%, #7a6cff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px rgba(140, 150, 255, .5)); }
.brand span { display: block; margin-top: 4px; font-size: 11px; font-weight: 900; letter-spacing: 6px; color: var(--dim); }
.scores { display: flex; gap: 8px; }
.score { position: relative; min-width: 82px; padding: 7px 12px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line); text-align: center; }
.score small { display: block; font-size: 11px; font-weight: 800; color: var(--dim); letter-spacing: 2px; }
.score b { display: block; font-size: 21px; font-weight: 900; font-variant-numeric: tabular-nums; }
#gain { position: absolute; left: 0; right: 0; top: 4px; font-style: normal; font-weight: 900; color: #ffe08a; opacity: 0; pointer-events: none; }
#gain.show { animation: rise .7s ease-out; }
@keyframes rise { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-34px); } }

.bar { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.sizes { display: flex; padding: 3px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.sizes button { padding: 7px 14px; border-radius: 11px; font-weight: 900; font-size: 14px; color: var(--dim); }
.sizes button.on { background: linear-gradient(180deg, #7d8cff, #5a4fd8); color: #fff; box-shadow: 0 2px 10px rgba(110, 110, 255, .45); }
.icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line); font-size: 18px; }

#stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
#board { position: relative; border-radius: 22px; background: rgba(12, 18, 48, .78); border: 1px solid rgba(160, 180, 255, .18); box-shadow: 0 20px 50px rgba(0, 0, 0, .45), inset 0 0 40px rgba(90, 100, 255, .08); }
#grid, #tiles { position: absolute; inset: 0; }
.slot { position: absolute; border-radius: 14%; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }

.tile { position: absolute; left: 0; top: 0; transition: transform var(--slide) ease-in-out; will-change: transform; }
.tile .face { width: 100%; height: 100%; border-radius: 16%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.5px; position: relative; overflow: hidden; }
.tile .face::after { content: ""; position: absolute; left: 10%; right: 10%; top: 6%; height: 34%; border-radius: 50% 50% 40% 40%; background: linear-gradient(180deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0)); pointer-events: none; }
.tile.new .face { animation: appear 180ms ease-out both; animation-delay: calc(var(--slide) + 10ms); }
.tile.merged { z-index: 2; }
.tile.merged .face { animation: merge 220ms ease-out both; animation-delay: var(--slide); }
.tile.dying { z-index: 1; }
@keyframes appear { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes merge { 0% { transform: scale(.6); opacity: 0; } 55% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); } }

#overlay { position: absolute; inset: 0; border-radius: 22px; background: rgba(8, 10, 30, .74); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px; z-index: 5; animation: fade .35s; }
@keyframes fade { from { opacity: 0; } }
#overlay h2 { margin: 0; font-size: 30px; font-weight: 900; letter-spacing: 2px; }
#overlay p { margin: 0 0 8px; color: var(--dim); font-weight: 700; }
#overlay .row { display: flex; gap: 10px; }

footer { display: flex; gap: 12px; margin-top: 4px; }
.btn { flex: 1; min-height: 50px; border-radius: 16px; font-weight: 900; font-size: 16px; letter-spacing: 1px; background: rgba(255, 255, 255, .08); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: transform .08s; }
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(180deg, #7d8cff, #5a4fd8); border: 0; box-shadow: 0 6px 18px rgba(100, 100, 255, .4); }
.btn.gold { background: linear-gradient(180deg, #ffe08a, #ffb23d); color: #4a2a00; border: 0; }
.btn[disabled] { opacity: .35; pointer-events: none; }
.btn em { font-style: normal; font-size: 12px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: rgba(255, 255, 255, .16); display: inline-flex; align-items: center; justify-content: center; }
#overlay .btn { flex: none; padding: 0 22px; }
.tip { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--dim); font-weight: 700; }