:root {
  --bg: #07080c;
  --ink: #f4f0e6;
  --muted: #9b968c;
  --line: rgba(255,255,255,.08);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  background:
    radial-gradient(800px 400px at 80% -10%, rgba(255, 90, 60, .25), transparent 50%),
    radial-gradient(700px 500px at -10% 20%, rgba(90, 220, 180, .16), transparent 46%),
    var(--bg);
  color: var(--ink);
}
button, a { font: inherit; color: inherit; }
.app { width: min(480px, 100%); margin: 0 auto; min-height: 100%; padding: 22px 16px 32px; }
.brand { display: flex; justify-content: space-between; align-items: end; }
.brand p { margin: 0; letter-spacing: .22em; text-transform: uppercase; font-size: 11px; color: var(--muted); }
h1 { font-size: 42px; line-height: .9; margin: 8px 0 6px; letter-spacing: -.04em; }
.lede { color: var(--muted); margin: 0 0 18px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile {
  position: relative; overflow: hidden; text-align: left; border: 0; border-radius: 22px;
  min-height: 148px; padding: 14px; background: #141821; box-shadow: inset 0 0 0 1px var(--line);
}
.tile i { display: block; font-style: normal; font-size: 13px; opacity: .8; }
.tile b { display: block; font-size: 26px; margin-top: 28px; letter-spacing: -.03em; }
.tile em { font-style: normal; color: var(--muted); font-size: 13px; }
.blob { position: absolute; right: -20px; top: -24px; width: 110px; height: 110px; border-radius: 40%; filter: blur(2px); opacity: .9; animation: drift 5s ease-in-out infinite; }
.t1 .blob { background: conic-gradient(from 20deg, #ff5a3c, #ffd36a, #ff5a3c); }
.t2 .blob { background: conic-gradient(from 80deg, #6ef3c5, #7aa2ff, #6ef3c5); animation-duration: 4s; }
.t3 .blob { background: conic-gradient(from 10deg, #f2f2f2, #9ad7ff, #f2f2f2); }
.t4 .blob { background: conic-gradient(from 120deg, #ff4d8d, #ffb703, #ff4d8d); }
.t5 .blob { background: conic-gradient(from 40deg, #c9f31d, #111, #c9f31d); }
.t6 .blob { background: conic-gradient(from 200deg, #b388ff, #ff8fab, #b388ff); }
@keyframes drift { 50% { transform: rotate(18deg) scale(1.08); } }
.stage {
  position: fixed; inset: 0; background: #07080c; z-index: 5;
  display: none; flex-direction: column; padding: calc(12px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom));
}
.stage.on { display: flex; }
.hud { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.hud strong { font-size: 18px; }
.hud span { margin-left: auto; color: var(--muted); }
.x, .again {
  border: 0; border-radius: 999px; padding: 10px 14px; background: #1c2230;
}
.again { background: #f4f0e6; color: #111; font-weight: 700; display: none; }
.board { flex: 1; position: relative; border-radius: 24px; overflow: hidden; background: #10131a; }
canvas, .gridgame { width: 100%; height: 100%; display: block; touch-action: none; }
.gridgame { display: none; padding: 12px; }
.gridgame.on { display: grid; place-items: center; }
.g2048 { width: min(100%, 420px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cell {
  aspect-ratio: 1; border-radius: 14px; display: grid; place-items: center;
  font-size: 28px; font-weight: 800; background: #1a2030; color: #111;
}
.over {
  position: absolute; inset: 0; display: none; place-items: center; text-align: center; background: rgba(7,8,12,.72);
}
.over.on { display: grid; }
.over b { font-size: 36px; }
footer { color: var(--muted); font-size: 13px; margin-top: 18px; }
footer a { color: #d7ff4a; }