/* ===========================================================================
   Number Merge — chrome: HUD, tools, dialogs
   Strict product register. Quiet, fast, familiar. The board is the only lit
   thing on screen; nothing here competes with it.

   Deliberate deviation from the source game: its round white buttons with
   mauve glyphs are replaced by raised dark circles. White discs are the
   second-brightest thing on that screen and pull focus off the board. The one
   colour kept is the amber undo — it marks a limited resource, so it earns it.
   =========================================================================== */

/* --- Icon buttons --------------------------------------------------------- */

.icon-btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--raised);
  color: var(--ink-dim);
  box-shadow: var(--shadow-pill);
  cursor: pointer;
  transition: background var(--dur-fast) linear, color var(--dur-fast) linear,
              transform var(--dur-fast) var(--ease-out-quint);
}
.icon-btn svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor;
                stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover { background: var(--raised-hi); color: var(--ink); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --- Score pills ---------------------------------------------------------- */

.hud { display: flex; align-items: center; gap: var(--s-6); }

.readouts { flex: 1 1 auto; display: flex; gap: var(--s-4); justify-content: center; }

.pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 5.5rem;
  padding: var(--s-3) var(--s-8) var(--s-4);
  border-radius: var(--radius-md);
  background: var(--raised);
  box-shadow: var(--shadow-pill);
}
.pill__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.pill__value {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.1;
}
.pill--best .pill__value { color: var(--accent); }

/* A brief lift when the score changes — feedback, not decoration. */
.pill.is-bumped { animation: bump 340ms var(--ease-out-expo); }
@keyframes bump { 0% { transform: scale(1); } 34% { transform: scale(1.07); } 100% { transform: scale(1); } }

/* --- Tools row ------------------------------------------------------------ */

.tools { display: flex; align-items: center; gap: var(--s-6); min-height: 3rem; }
.tools__spacer { flex: 1 1 auto; }

.tool {
  position: relative;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  color: var(--ink-dim);
  transition: transform var(--dur-fast) var(--ease-out-quint), opacity var(--dur-fast) linear;
}
.tool:active { transform: scale(0.93); }
.tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-md); }
.tool:disabled { opacity: 0.32; cursor: not-allowed; transform: none; }

.tool--undo {
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--accent-warm);
  color: var(--accent-warm-ink);
  box-shadow: 0 2px 0 oklch(0.62 0.14 70), 0 4px 10px -2px oklch(0 0 0 / 0.5);
}
.tool--undo svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor;
                  stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.tool--undo:disabled { background: var(--raised); color: var(--ink-faint); box-shadow: var(--shadow-pill); }

.tool__badge {
  position: absolute;
  top: -4px; right: -6px;
  min-width: 1.15rem; height: 1.15rem;
  padding-inline: 3px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--room);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--room);
}

/* Hold slot — an empty socket until something is parked in it. */
.tool--hold .tool__slot {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--radius-md);
  background: var(--surface-cell);
  box-shadow: inset 0 0 0 1.5px var(--hairline), inset 0 2px 6px oklch(0 0 0 / 0.4);
}
.tool__empty {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tool--hold.is-used { opacity: 0.4; }

/* --- Next queue ----------------------------------------------------------- */

.queue { display: flex; align-items: center; gap: var(--s-4); }
.queue__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.queue__items { display: flex; align-items: center; gap: var(--s-3); }

/* The queue reads as a perspective line: the next block is full size and
   solid, the ones behind it recede. */
.chip {
  display: grid;
  place-items: center;
  border-radius: 26%;
  background: var(--block);
  color: oklch(1 0 0);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 2px 0 oklch(1 0 0 / 0.2), 0 2px 0 var(--block-dk);
  transition: opacity var(--dur) var(--ease-out-quint);
}
.chip[data-slot="0"] { width: 2.1rem; height: 2.1rem; font-size: 0.85rem; opacity: 1; }
.chip[data-slot="1"] { width: 1.65rem; height: 1.65rem; font-size: 0.68rem; opacity: 0.72; }
.chip[data-slot="2"] { width: 1.3rem;  height: 1.3rem;  font-size: 0.55rem; opacity: 0.44; }
.chip__glyph { width: 62%; height: 62%; }
.chip[data-kind="wild"]  { --block: var(--t-wild);  --block-dk: var(--t-wild-dk); }
.chip[data-kind="bomb"]  { --block: var(--t-bomb);  --block-dk: var(--t-bomb-dk);
                           box-shadow: inset 0 0 0 2px var(--danger), 0 2px 0 var(--block-dk); }
.chip[data-kind="stone"] { --block: var(--t-stone); --block-dk: var(--t-stone-dk); }
.chip[data-kind="wild"] .chip__glyph  { fill: var(--t-wild-dk); }
.chip[data-kind="bomb"] .chip__glyph  { fill: var(--danger); }
.chip[data-kind="stone"] .chip__glyph { fill: oklch(1 0 0 / 0.22); }
.chip[data-len="3"] { font-size: 0.62em; }
.chip[data-len="4"] { font-size: 0.5em; }

.chip[data-tier="2"]    { --block: var(--t2);    --block-dk: var(--t2-dk); }
.chip[data-tier="4"]    { --block: var(--t4);    --block-dk: var(--t4-dk); }
.chip[data-tier="8"]    { --block: var(--t8);    --block-dk: var(--t8-dk); }
.chip[data-tier="16"]   { --block: var(--t16);   --block-dk: var(--t16-dk); }
.chip[data-tier="32"]   { --block: var(--t32);   --block-dk: var(--t32-dk); }
.chip[data-tier="64"]   { --block: var(--t64);   --block-dk: var(--t64-dk); }
.chip[data-tier="128"]  { --block: var(--t128);  --block-dk: var(--t128-dk); }
.chip[data-tier="256"]  { --block: var(--t256);  --block-dk: var(--t256-dk); }
.chip[data-tier="512"]  { --block: var(--t512);  --block-dk: var(--t512-dk); }
.chip[data-tier="1024"] { --block: var(--t1024); --block-dk: var(--t1024-dk); }
.chip[data-tier="2048"] { --block: var(--t2048); --block-dk: var(--t2048-dk); color: var(--t2048-dk); }

/* --- Foot ----------------------------------------------------------------- */

.foot {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-6);
  padding-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-faint);
}
.foot__item { display: inline-flex; gap: var(--s-3); align-items: baseline; }
.foot__k { letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.foot__v { color: var(--ink-dim); font-weight: 600; font-variant-numeric: tabular-nums; }
.foot__sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.4; }

/* --- Dialogs -------------------------------------------------------------- */

.sheet {
  width: min(26rem, calc(100vw - 2rem));
  max-height: min(90dvh, 46rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: auto;
  padding: var(--s-16) var(--s-12) var(--s-12);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--raised);
  color: var(--ink);
  box-shadow: var(--shadow-panel), inset 0 1px 0 oklch(1 0 0 / 0.07);
}
.sheet::backdrop { background: oklch(0.10 0.01 265 / 0.72); backdrop-filter: blur(2px); }
.sheet[open] { animation: sheetIn var(--dur-slow) var(--ease-out-expo); }
@keyframes sheetIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }

.sheet__title { margin: 0 0 var(--s-2); font-size: var(--text-2xl); font-weight: 800; letter-spacing: var(--tracking-tight); }
.sheet__sub { margin: 0 0 var(--s-12); color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--text-sm); }
.sheet__h3 { margin: var(--s-16) 0 var(--s-6); font-size: var(--text-base); font-weight: 700; }
.sheet__actions { display: flex; gap: var(--s-6); margin-top: var(--s-16); }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  flex: 1 1 auto;
  padding: var(--s-8) var(--s-12);
  border: 0;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur-fast) linear, transform var(--dur-fast) var(--ease-out-quint);
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: oklch(0.87 0.14 172); }
.btn--ghost { background: var(--surface-cell); color: var(--ink-dim); box-shadow: inset 0 0 0 1px var(--hairline); }
.btn--ghost:hover { background: var(--raised-hi); color: var(--ink); }

/* --- Fields, segmented control, switch ------------------------------------ */

.field { margin-bottom: var(--s-12); }
.field--row { display: flex; gap: var(--s-16); }
.field__label {
  display: block; margin-bottom: var(--s-4);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-faint);
}
.field__hint { margin: var(--s-4) 0 0; font-size: var(--text-xs); color: var(--ink-faint); line-height: 1.5; }

.seg { display: flex; gap: 2px; padding: 3px; border-radius: var(--radius-md); background: var(--surface-cell); }
.seg__btn {
  flex: 1 1 0;
  padding: var(--s-4) var(--s-6);
  border: 0; border-radius: calc(var(--radius-md) - 3px);
  background: transparent; color: var(--ink-dim);
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700;
  cursor: pointer;
  transition: background var(--dur-fast) linear, color var(--dur-fast) linear;
}
.seg__btn:hover { color: var(--ink); }
.seg__btn.is-on { background: var(--raised-hi); color: var(--ink); box-shadow: var(--shadow-pill); }
.seg__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.switch { display: inline-flex; align-items: center; gap: var(--s-6); cursor: pointer; font-size: var(--text-sm); color: var(--ink-dim); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__ui {
  position: relative; width: 2.4rem; height: 1.4rem; flex: 0 0 auto;
  border-radius: var(--radius-pill); background: var(--surface-cell);
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: background var(--dur-fast) linear;
}
.switch__ui::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--ink-faint);
  transition: transform var(--dur-fast) var(--ease-out-quint), background var(--dur-fast) linear;
}
.switch input:checked + .switch__ui { background: oklch(0.82 0.14 172 / 0.28); }
.switch input:checked + .switch__ui::after { transform: translateX(1rem); background: var(--accent); }
.switch input:focus-visible + .switch__ui { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --- Stats + run history -------------------------------------------------- */

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-8); margin: 0 0 var(--s-4); }
.stats div { padding: var(--s-6) var(--s-8); border-radius: var(--radius-sm); background: var(--surface-cell); }
.stats dt {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-faint);
}
.stats dd { margin: 2px 0 0; font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; }

.runs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; max-height: 11rem; overflow-y: auto; }
.runs li {
  display: grid; grid-template-columns: 1.4rem 1fr auto auto; gap: var(--s-6); align-items: center;
  padding: var(--s-4) var(--s-6); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-dim);
}
.runs li:nth-child(odd) { background: oklch(1 0 0 / 0.03); }
.runs__rank { color: var(--ink-faint); font-weight: 700; }
.runs__score { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.runs__tier { font-weight: 700; }
/* The empty state is a single sentence, not a row — it must escape the
   four-column grid the run rows use. */
.runs li.runs__empty { display: block; color: var(--ink-faint); background: none; padding-left: 0; }

/* --- Special block reference + first-run coaching -------------------------- */

.specials { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-4); }
.specials li {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: var(--s-6);
  align-items: center;
  font-size: var(--text-xs);
  color: var(--ink-dim);
  line-height: 1.45;
}
.specials b { display: block; color: var(--ink); font-size: var(--text-sm); font-weight: 700; }

/* A miniature of the real block, so the reference and the board agree. */
.mini {
  width: 2.1rem; height: 2.1rem;
  --cell: 2.1rem;
  display: grid; place-items: center;
  border-radius: 24%;
  background: var(--block);
  box-shadow: inset 0 2px 0 oklch(1 0 0 / 0.22), 0 2px 0 var(--block-dk);
}
.mini[data-kind="wild"]  { --block: var(--t-wild);  --block-dk: var(--t-wild-dk); }
.mini[data-kind="bomb"]  { --block: var(--t-bomb);  --block-dk: var(--t-bomb-dk);
                           box-shadow: inset 0 0 0 2px var(--danger), 0 2px 0 var(--block-dk); }
.mini[data-kind="stone"] { --block: var(--t-stone); --block-dk: var(--t-stone-dk); }
.mini svg { width: 1.05rem; height: 1.05rem; }
.mini[data-kind="wild"] svg  { fill: var(--t-wild-dk); }
.mini[data-kind="bomb"] svg  { fill: var(--danger); }
.mini[data-kind="stone"] svg { fill: oklch(1 0 0 / 0.22); }

.sheet--coach { width: min(22rem, calc(100vw - 2rem)); }
.coach { display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--s-10); align-items: start; }
.coach__block { --cell: 3.25rem; width: 3.25rem; height: 3.25rem; }
.coach__block .mini { width: 3.25rem; height: 3.25rem; --cell: 3.25rem; }
.coach__block .mini svg { width: 1.6rem; height: 1.6rem; }
.coach__title { margin: 0 0 var(--s-3); font-size: var(--text-xl); font-weight: 800; letter-spacing: var(--tracking-tight); }
.coach__body { margin: 0; font-size: var(--text-sm); color: var(--ink-dim); line-height: 1.55; }

/* --- Toast ---------------------------------------------------------------- */

.toast {
  position: absolute;
  left: 50%; bottom: calc(env(safe-area-inset-bottom) + var(--s-20));
  transform: translateX(-50%) translateY(8px);
  z-index: var(--z-toast);
  padding: var(--s-6) var(--s-12);
  border-radius: var(--radius-pill);
  background: var(--raised-hi);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-panel);
  opacity: 0;
  transition: opacity var(--dur) linear, transform var(--dur) var(--ease-out-quint);
  pointer-events: none;
}
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- Short viewports: give the board the room ----------------------------- */

@media (max-height: 680px) {
  .pill { min-width: 4.75rem; padding: var(--s-2) var(--s-6) var(--s-3); }
  .pill__value { font-size: var(--text-base); }
  .icon-btn { width: 2.4rem; height: 2.4rem; }
  .stage { min-height: 3.5rem; }
  .foot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet[open] { animation: none; }
  .pill.is-bumped { animation: none; }
}