:root {
  --bg:           #f2ede6;
  --board-bg:     #c8bcb2;
  --cell-bg:      #dbd3ca;
  --text:         #2c2824;
  --muted:        #8c8078;
  --surface:      #c0b4a8;
  --surface-text: #2c2824;
  --btn-bg:       #9a8878;
  --btn-text:     #f4f0ea;
  --overlay-bg:   rgba(242,237,230,0.92);
  --tok-fill:     #80c094;
  --tok-empty:    rgba(0,0,0,0.13);
  --border:       #ddd;

  --t2:    #ece6da; --t2c:    #776e65;
  --t4:    #e4d9c6; --t4c:    #776e65;
  --t8:    #f4b090; --t8c:    #f9f6f2;
  --t16:   #ec9c78; --t16c:   #f9f6f2;
  --t32:   #e48468; --t32c:   #f9f6f2;
  --t64:   #da6c58; --t64c:   #f9f6f2;
  --t128:  #d4b264; --t128c:  #f9f6f2;
  --t256:  #c8a448; --t256c:  #f9f6f2;
  --t512:  #80c094; --t512c:  #f9f6f2;
  --t1024: #5caf7c; --t1024c: #f9f6f2;
  --t2048: #3c9f68; --t2048c: #f9f6f2;
  --thigh: #208e54; --thighc: #f9f6f2;
}

[data-theme="dark"] {
  --bg:           #17172a;
  --board-bg:     #212134;
  --cell-bg:      #2a2a44;
  --text:         #dcd8f0;
  --muted:        #7878a0;
  --surface:      #1e1e32;
  --surface-text: #dcd8f0;
  --btn-bg:       #464490;
  --btn-text:     #e4e0ff;
  --overlay-bg:   rgba(23,23,42,0.93);
  --tok-fill:     #3e9278;
  --tok-empty:    rgba(255,255,255,0.1);
  --border:       #333;

  --t2:    #30304c; --t2c:    #9898c0;
  --t4:    #3c3c62; --t4c:    #b4b0d8;
  --t8:    #623e70; --t8c:    #eedcf8;
  --t16:   #724e80; --t16c:   #f4eaff;
  --t32:   #825e90; --t32c:   #f8f0ff;
  --t64:   #926e9c; --t64c:   #fff0ff;
  --t128:  #5868b4; --t128c:  #dce8ff;
  --t256:  #4858ac; --t256c:  #d0dcff;
  --t512:  #388878; --t512c:  #c0eae4;
  --t1024: #287868; --t1024c: #b0e2da;
  --t2048: #186858; --t2048c: #a0d8ce;
  --thigh: #085848; --thighc: #90cec4;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Material Symbols helper ─────────────────────────── */
.mi {
  font-family: 'Material Symbols Rounded';
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-style: normal;
  line-height: 1;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Body ────────────────────────────────────────────── */
body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: background .3s, color .3s;
  overscroll-behavior: none;
  touch-action: none;
}

/* ── Container ───────────────────────────────────────── */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 400px;
  padding: 14px 12px 10px;
  gap: 10px;
  margin-top: auto;
  margin-bottom: auto;
}

/* ── Top bar ─────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

h1 {
  flex: 1;
  font-size: clamp(1.45rem, 6.5vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -1px;
  line-height: 1;
}

/* ── Shared button ───────────────────────────────────── */
.btn {
  height: 36px;
  padding: 0 13px;
  background: var(--btn-bg);
  color: var(--btn-text);
  border: none;
  border-radius: 9px;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s, transform .1s, background .3s, color .3s;
}
.btn:hover    { opacity: .82; }
.btn:active   { transform: scale(.93); }
.btn:disabled { opacity: .28; cursor: not-allowed; transform: none; }
.btn.sq       { width: 36px; padding: 0; }
.btn .mi      { font-size: 1.25rem; }

/* ── Score bar ───────────────────────────────────────── */
.scorebar {
  display: flex;
  gap: 8px;
  width: 100%;
  height: 54px;
}

.score-box {
  flex: 1;
  background: var(--surface);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background .3s;
}

.score-label {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--surface-text);
  opacity: .5;
}

.score-value {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--surface-text);
  line-height: 1.2;
}

/* ── Board ───────────────────────────────────────────── */
.board-wrap {
  position: relative;
  width: 100%;
}

.board {
  background: var(--board-bg);
  border-radius: 14px;
  padding: 9px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;
  aspect-ratio: 1;
  width: 100%;
  transition: background .3s;
}

.cell {
  background: var(--cell-bg);
  border-radius: 8px;
  transition: background .3s;
}

/* Tiles layer exactly overlays the board interior */
.tiles {
  position: absolute;
  inset: 9px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;
  pointer-events: none;
}

.tiles.mode              { pointer-events: auto; }
.tiles.mode .tile        { cursor: pointer; }
.tiles.mode .tile:hover  { filter: brightness(1.1); }

/* ── Tiles ───────────────────────────────────────────── */
.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-weight: 700;
  font-size: 2.5rem;
  transition: filter .1s;
}

.tile[data-v="128"], .tile[data-v="256"], .tile[data-v="512"] {
  font-size: clamp(1.15rem, 6vw, 2.4rem);
}
.tile[data-v="1024"], .tile[data-v="2048"] {
  font-size: clamp(.95rem, 5.2vw, 2rem);
}
.tile.high { font-size: clamp(.78rem, 4.2vw, 1.55rem); }

.tile.sel {
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.65),
              0 0 0 2px rgba(0,0,0,.1);
  filter: brightness(1.08);
}

.tile.is-new    { animation: pop-in        .16s ease both; }
.tile.is-merged { animation: merge-bounce  .22s ease both; }

@keyframes pop-in {
  from { transform: scale(.35); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@keyframes merge-bounce {
  0%  { transform: scale(1); }
  42% { transform: scale(1.18); }
  100%{ transform: scale(1); }
}

/* Tile colours */
.tile[data-v="2"]    { background: var(--t2);    color: var(--t2c); }
.tile[data-v="4"]    { background: var(--t4);    color: var(--t4c); }
.tile[data-v="8"]    { background: var(--t8);    color: var(--t8c); }
.tile[data-v="16"]   { background: var(--t16);   color: var(--t16c); }
.tile[data-v="32"]   { background: var(--t32);   color: var(--t32c); }
.tile[data-v="64"]   { background: var(--t64);   color: var(--t64c); }
.tile[data-v="128"]  { background: var(--t128);  color: var(--t128c); }
.tile[data-v="256"]  { background: var(--t256);  color: var(--t256c); }
.tile[data-v="512"]  { background: var(--t512);  color: var(--t512c); }
.tile[data-v="1024"] { background: var(--t1024); color: var(--t1024c); }
.tile[data-v="2048"] { background: var(--t2048); color: var(--t2048c); }
.tile.high           { background: var(--thigh); color: var(--thighc); }

/* ── Mode hint ───────────────────────────────────────── */
.mode-hint {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.30);
  color: #fff;
  border-radius: 0 0 14px 14px;
  padding: 7px 12px;
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.mode-hint.show { opacity: 1; }

/* ── Power bar ───────────────────────────────────────── */
.power-bar {
  display: flex;
  gap: 8px;
  width: 100%;
}

.pcard {
  flex: 1;
  background: var(--surface);
  border: none;
  border-radius: 12px;
  padding: 10px 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s, transform .1s, background .2s;
}
.pcard:hover    { opacity: .86; }
.pcard:active   { transform: scale(.94); }
.pcard:disabled { opacity: .28; cursor: not-allowed; transform: none; }

.pcard.active        { background: var(--btn-bg); }
.pcard.active .p-icon .mi { color: var(--btn-text); }

.p-icon .mi {
  font-size: 1.5rem;
  color: var(--text);
  transition: color .2s;
}

.p-tokens {
  display: flex;
  gap: 5px;
}
.p-tok {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tok-empty);
  transition: background .25s, transform .2s;
}
.p-tok.on {
  background: var(--tok-fill);
  transform: scale(1.18);
}

/* ── Overlay ─────────────────────────────────────────── */
.overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-bg);
  border-radius: 14px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 20;
  backdrop-filter: blur(3px);
}
.overlay.show { display: flex; }
.ov-title { font-size: clamp(1.5rem, 6vw, 2.1rem); font-weight: 700; }
.ov-sub   { font-size: .86rem; color: var(--muted); text-align: center; padding: 0 20px; }
.ov-btns  { display: flex; gap: 8px; margin-top: 4px; }

/* ── Desktop border ──────────────────────────────────── */
@media (min-width: 600px) {
  .container {
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 20px 16px 16px;
  }
}