/* 2048 — number-merge puzzle */
.g2-shell { width: 100%; max-width: 460px; margin: 0 auto; }

/* HUD */
.g2-hud { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.g2-hud .lbl { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.g2-val { font-size: 30px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* Board */
.g2-board-wrap { position: relative; width: 100%; aspect-ratio: 1/1; margin: 0 auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  padding: 3.2%; touch-action: none; -webkit-user-select: none; user-select: none; }

/* --gap and --cell are set by JS in px to keep tiles and bg perfectly aligned */
.g2-bg, .g2-tiles { position: absolute; inset: 3.2%; }
.g2-bg { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr);
  gap: var(--g2-gap, 10px); }
.g2-cell { background: #0a0e22; border-radius: 12px; }

.g2-tiles { pointer-events: none; }
.g2-tile { position: absolute; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; font-weight: 900; font-variant-numeric: tabular-nums;
  width: var(--g2-cell, 60px); height: var(--g2-cell, 60px);
  transition: transform .11s ease-in-out; will-change: transform;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.g2-tile .v { line-height: 1; }

.g2-spawn { animation: g2Spawn .14s ease; }
@keyframes g2Spawn { 0% { transform: var(--pos) scale(0); } 100% { transform: var(--pos) scale(1); } }
.g2-merge { animation: g2Merge .16s ease; }
@keyframes g2Merge { 0% { } 45% { } 50% { } 100% { } }
.g2-pop { animation: g2Pop .16s ease; }
@keyframes g2Pop { 0% { transform: var(--pos) scale(1); } 50% { transform: var(--pos) scale(1.14); } 100% { transform: var(--pos) scale(1); } }

/* Tile colors — dark neon palette, ramps warmer as numbers grow */
.g2-t2    { background: #1d2450; color: #cdd6ff; }
.g2-t4    { background: #26306a; color: #dbe3ff; }
.g2-t8    { background: #3646b0; color: #fff; }
.g2-t16   { background: #4f5cff; color: #fff; }
.g2-t32   { background: #7b5cff; color: #fff; }
.g2-t64   { background: #a24bff; color: #fff; }
.g2-t128  { background: #d23bd8; color: #fff; box-shadow: 0 0 16px rgba(210,59,216,.4); }
.g2-t256  { background: #ff2e97; color: #fff; box-shadow: 0 0 18px rgba(255,46,151,.45); }
.g2-t512  { background: #ff5a3c; color: #fff; box-shadow: 0 0 20px rgba(255,90,60,.5); }
.g2-t1024 { background: #ffab2e; color: #23180a; box-shadow: 0 0 22px rgba(255,171,46,.55); }
.g2-t2048 { background: #ffd23f; color: #23180a; box-shadow: 0 0 30px rgba(255,210,63,.7); }
.g2-tbig  { background: #00f5d4; color: #05221e; box-shadow: 0 0 30px rgba(0,245,212,.7); }

/* Overlay (win / game over) */
.g2-overlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
  background: rgba(5,6,15,.82); border-radius: 16px; backdrop-filter: blur(2px); }
/* the [hidden] attribute must beat the display:flex above, or the overlay never hides */
.g2-overlay[hidden] { display: none; }
.g2-overlay-inner { text-align: center; padding: 20px; }
.g2-overlay-title { font-size: 40px; font-weight: 900; color: var(--neon); text-shadow: 0 0 16px rgba(0,245,212,.5); }
.g2-overlay-title.lose { color: var(--neon2); text-shadow: 0 0 16px rgba(255,46,151,.5); }
.g2-overlay-sub { color: var(--muted); margin: 6px 0 18px; font-size: 16px; }

.g2-msg { text-align: center; color: var(--muted); min-height: 22px; margin: 10px 0 6px; font-size: 14px; }