/* =============================================================
   GAME: 2048
   ============================================================= */
.board-g2048 {
  --cell: min(calc((100vw - 100px) / 4), 92px);
  --gap: calc(var(--cell) * .12);
  --step: calc(var(--cell) + var(--gap));
  position: relative; width: calc(var(--cell) * 4 + var(--gap) * 5); height: calc(var(--cell) * 4 + var(--gap) * 5);
  background: radial-gradient(120% 80% at 50% 0%, #26162f, #170c1f 70%); border-radius: 16px; touch-action: none; outline: none;
  box-shadow: 0 0 0 2px #ff8f3d, 0 0 26px rgba(255, 122, 26, .35), inset 0 -5px 0 rgba(0, 0, 0, .3);
}
.board-g2048:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 26px rgba(255, 122, 26, .55); }
.g2-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, var(--cell)); grid-auto-rows: var(--cell); gap: var(--gap); padding: var(--gap); }
.g2-slot { border-radius: 10px; background: linear-gradient(180deg, #241830, #2c1f3b); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .04); }
.g2-tiles { position: absolute; inset: 0; }
.g2-tile {
  position: absolute; left: var(--gap); top: var(--gap); width: var(--cell); height: var(--cell);
  display: grid; place-items: center; border-radius: 10px; z-index: 2;
  font: 800 calc(var(--cell) * .42) / 1 var(--font-head, system-ui), sans-serif; letter-spacing: -.02em;
  transform: translate(calc(var(--c) * var(--step)), calc(var(--r) * var(--step)));
  transition: transform .11s ease-in-out;
  color: var(--tc);
  /* depth: glossy top light, darker base, bevelled edges, soft drop shadow + colour glow */
  background:
    radial-gradient(130% 70% at 50% -8%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .16)),
    var(--tb);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .34), inset 0 -4px 0 rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(255, 255, 255, .1),
    0 5px 10px -2px rgba(0, 0, 0, .55), 0 0 var(--tg, 0) color-mix(in srgb, var(--tb) 80%, transparent);
  text-shadow: var(--ts, 0 2px 0 rgba(0, 0, 0, .18));
}
.g2-tile::after { /* merge ring */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 3px var(--tb), 0 0 18px 2px var(--tb);
}
.g2-tile.g2-d3 { font-size: calc(var(--cell) * .33); }
.g2-tile.g2-d4 { font-size: calc(var(--cell) * .26); }
.g2-tile.g2-d5 { font-size: calc(var(--cell) * .21); }
.g2-tile.g2-under { z-index: 1; }
.g2-tile.g2-new { animation: g2new .18s ease-out .06s backwards; }
.g2-tile.g2-pop { z-index: 3; animation: g2pop .2s cubic-bezier(.3, 1.6, .5, 1); }
.g2-tile.g2-pop::after { animation: g2ring .42s ease-out; }
@keyframes g2new { from { opacity: 0; scale: .2; } 70% { scale: 1.06; } }
@keyframes g2pop { 45% { scale: 1.2; filter: brightness(1.35); } }
@keyframes g2ring { from { opacity: .95; scale: .92; } to { opacity: 0; scale: 1.28; } }

.g2-tile[data-v="2"] { --tb: #3a2f6e; --tc: #d9e6ff; }
.g2-tile[data-v="4"] { --tb: #4a3192; --tc: #e6dcff; }
.g2-tile[data-v="8"] { --tb: #ff8a3d; --tc: #1f0b00; --tg: 10px; }
.g2-tile[data-v="16"] { --tb: #ff5f45; --tc: #fff; --tg: 12px; }
.g2-tile[data-v="32"] { --tb: #ff3d7f; --tc: #fff; --tg: 12px; }
.g2-tile[data-v="64"] { --tb: #e040fb; --tc: #fff; --tg: 14px; }
.g2-tile[data-v="128"] { --tb: #ffd23f; --tc: #2a1700; --tg: 16px; }
.g2-tile[data-v="256"] { --tb: #b6ff3b; --tc: #102000; --tg: 18px; }
.g2-tile[data-v="512"] { --tb: #2bffa0; --tc: #002614; --tg: 18px; }
.g2-tile[data-v="1024"] { --tb: #22e3ff; --tc: #00222a; --tg: 22px; }
.g2-tile[data-v="2048"] {
  --tb: #fff3a6; --tc: #3a1f00; --tg: 28px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -4px 0 rgba(160, 80, 0, .25), 0 0 0 2px #ff8f3d inset, 0 5px 10px -2px rgba(0, 0, 0, .5), 0 0 28px #ffd23f, 0 0 50px rgba(255, 122, 26, .6);
}
/* a slow light sweep over the 2048 tile and beyond */
.g2-tile[data-v="2048"], .g2-tile[data-v="4096"], .g2-tile[data-v="8192"], .g2-tile[data-v="big"] { overflow: hidden; }
.g2-tile[data-v="2048"]::before, .g2-tile[data-v="4096"]::before, .g2-tile[data-v="8192"]::before, .g2-tile[data-v="big"]::before {
  content: ""; position: absolute; inset: -50% auto -50% -60%; width: 40%; rotate: 20deg; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: g2shine 3.2s ease-in-out infinite;
}
@keyframes g2shine { 0%, 55% { translate: 0 0; } 100% { translate: 560% 0; } }
.g2-tile[data-v="2048"]::after, .g2-tile[data-v="4096"]::after, .g2-tile[data-v="8192"]::after, .g2-tile[data-v="big"]::after { inset: 3px; box-shadow: inset 0 0 0 2px #fff, inset 0 0 18px #fff; }
.g2-tile[data-v="4096"] { --tb: #ff9df0; --tc: #2a0024; --tg: 26px; }
.g2-tile[data-v="8192"] { --tb: #9d8bff; --tc: #0e0630; --tg: 26px; }
/* dark digits get a light emboss instead of a drop shadow */
.g2-tile[data-v="8"], .g2-tile[data-v="128"], .g2-tile[data-v="256"], .g2-tile[data-v="512"], .g2-tile[data-v="1024"],
.g2-tile[data-v="2048"], .g2-tile[data-v="4096"], .g2-tile[data-v="8192"] { --ts: 0 1px 0 rgba(255, 255, 255, .35); }
.g2-tile[data-v="big"] { --tb: #120a26; --tc: #fff; box-shadow: 0 0 0 2px #22e3ff inset, 0 0 24px #e040fb; }

.g2-score strong, .g2-best strong { color: #ffb066; font-variant-numeric: tabular-nums; }
.g2-score { position: relative; }
/* "+N" floats up from the score after a merge (hidden when motion is reduced) */
.g2-plus {
  position: absolute; right: 8px; bottom: 60%; pointer-events: none; opacity: 0; white-space: nowrap;
  font: 800 .95rem var(--font-head, system-ui); color: #ffd28a; text-shadow: 0 0 10px #ff8f3d, 0 1px 0 rgba(0, 0, 0, .5);
  animation: g2plus .8s ease-out;
}
@keyframes g2plus { 0% { opacity: 0; translate: 0 10px; scale: .7; } 20% { opacity: 1; translate: 0 0; scale: 1.1; } 100% { opacity: 0; translate: 0 -22px; scale: 1; } }

.g2-win {
  position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 16px; text-align: center; border-radius: 16px; background: rgba(20, 8, 26, .78); backdrop-filter: blur(2px); animation: fade .25s ease;
}
.g2-win[hidden] { display: none; }
.g2-win-title { margin: 0; font: 800 1.6rem var(--font-head, system-ui); text-transform: uppercase; color: #ffe08a; text-shadow: 0 0 18px #ff8f3d; }
.g2-win-sub { margin: 0 0 8px; color: var(--muted); }
.g2-win .btn { min-width: 150px; }
.g2-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }