/* Tumbler — game styles. Uses shared tokens.css for colour + theming. */

html, body { background: var(--bg); }
body {
  color: var(--fg);
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-sans);
  -webkit-text-size-adjust: 100%;
}

.container {
  max-width: 560px;
  margin: 0 auto;
  padding: 8px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 1.3dvh, 14px);
}

/* Double-tap-zoom guard now lives arcade-wide in the shared tokens.css
   (`* { touch-action: manipulation }`), which loads first and covers every
   element — including non-interactive children (beads, labels, board gaps)
   that a per-selector list here used to miss. No game-local rule needed. */

/* ── mode + label ───────────────────────────────────────────── */
.mode-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.seg {
  display: inline-flex; background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px; gap: 2px;
}
.seg-btn {
  appearance: none; border: 0; background: transparent; color: var(--fg-muted);
  font: inherit; font-weight: 600; font-size: .9rem; padding: 6px 16px; border-radius: 999px;
  cursor: pointer; transition: background .15s, color .15s;
}
.seg-btn.is-active { background: var(--accent); color: var(--on-accent); }
.puzzle-label { color: var(--fg-subtle); font-size: .85rem; font-weight: 600; }

/* ── HUD ─────────────────────────────────────────────────────── */
.hud { display: flex; align-items: baseline; justify-content: space-between; }
.hud-moves { display: flex; align-items: baseline; gap: 8px; }
.hud-num { font-size: clamp(1.7rem, 5dvh, 2.4rem); font-weight: 800; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.hud-num.bump { animation: bump .22s ease; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.25); color: var(--accent); } 100% { transform: scale(1); } }
.hud-cap { color: var(--fg-subtle); font-size: .9rem; font-weight: 600; }
.hud-meta { display: flex; gap: 8px; align-items: center; }
.par-chip, .best-chip {
  font-size: .8rem; font-weight: 600; color: var(--fg-muted);
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px;
}
.par-chip b, .best-chip b { color: var(--fg); }

/* ── board / tumblers ────────────────────────────────────────── */
.board {
  --cell: clamp(24px, 4.4dvh, 38px); --gap: clamp(4px, .8dvh, 6px);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end;
  gap: clamp(8px, 1.7dvh, 15px) 9px;
  /* exactly 5 tumblers per row -> 9 wrap into a centred 5 + 4 */
  max-width: calc(5 * (var(--cell) + 13px) + 4 * 9px + 2px);
  margin: 0 auto; padding: clamp(4px, 1.4dvh, 14px) 0;
  perspective: 1300px;
}
.board.flash { animation: boardFlash .5s ease; }
@keyframes boardFlash { 0%,100% { filter: none; } 50% { filter: brightness(1.12) drop-shadow(0 0 12px var(--accent)); } }

/* A tumbler is a vertically-SYMMETRIC capsule — no obvious top or bottom — so a
   180° flip reads naturally and the shape never appears to change. */
.urn {
  --r: 11px;
  width: calc(var(--cell) + 13px); height: calc(4 * var(--cell) + 3 * var(--gap) + 14px);
  box-sizing: border-box; padding: 7px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-elev) 60%, transparent);
  border: 1.5px solid var(--border-strong);
  box-shadow: inset 0 9px 11px -9px rgba(0,0,0,.34), inset 0 -9px 11px -9px rgba(0,0,0,.34);
  position: relative; cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .12s ease, box-shadow .15s, border-color .15s;
}
.urn.flip { transition: transform .4s cubic-bezier(.45,.05,.3,1); transform: rotateX(180deg); z-index: 2; }
.urn.is-selectable:hover { border-color: var(--accent); transform: translateY(-3px); }
.urn.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), inset 0 9px 11px -9px rgba(0,0,0,.34), inset 0 -9px 11px -9px rgba(0,0,0,.34); }
.urn.is-target { border-color: var(--accent-hover); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 55%, transparent), inset 0 9px 11px -9px rgba(0,0,0,.34), inset 0 -9px 11px -9px rgba(0,0,0,.34); }
.urn.done::after { content: "✓"; position: absolute; top: -22px; left: 50%; transform: translateX(-50%); color: var(--accent); font-weight: 800; font-size: .9rem; }

/* beads sit at the bottom (gravity); the stack falls into place after a flip */
.stack { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.stack.falling { animation: fall .34s cubic-bezier(.28,.66,.38,1); }
@keyframes fall { from { transform: translateY(var(--fall, -40px)); } to { transform: translateY(0); } }

.bead {
  height: var(--cell); background: var(--c);
  display: grid; place-items: center;
  transition: transform .14s ease;
}
.bead .sym { font-size: .82rem; font-weight: 900; color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.5); user-select: none; }
.bead.lifted { transform: translateY(-13px); filter: drop-shadow(0 7px 8px rgba(0,0,0,.35)); }
.bead.drop { animation: drop .26s cubic-bezier(.3,1.25,.5,1); }
@keyframes drop { from { transform: translateY(-32px); } to { transform: translateY(0); } }
/* a run fusing into one bigger bead — a squash-and-stretch "impact" with a
   brightness pop, so it clearly reads as beads slamming together into a blob. */
.bead.merging { animation: merge .44s cubic-bezier(.3,1.2,.5,1) both; transform-origin: center bottom; will-change: transform, filter; z-index: 1; }
@keyframes merge {
  0%   { transform: scale(1.18, .78); filter: brightness(1.55); }   /* impact: wide & short, flash */
  44%  { transform: scale(.9, 1.14);  filter: brightness(1.12); }   /* spring up: narrow & tall */
  70%  { transform: scale(1.06, .95); filter: brightness(1.02); }   /* settle squash */
  87%  { transform: scale(.98, 1.02); filter: brightness(1); }
  100% { transform: scale(1, 1);      filter: brightness(1); }
}

/* distinct palette (8) — maximised pairwise contrast */
.c0 { --c: #e6194B; } .c1 { --c: #f58231; } .c2 { --c: #ffe119; } .c3 { --c: #3cb44b; }
.c4 { --c: #42d4f4; } .c5 { --c: #4363d8; } .c6 { --c: #911eb4; } .c7 { --c: #f032e6; }

/* ── controls ────────────────────────────────────────────────── */
.controls { display: flex; gap: 10px; justify-content: center; }
.ctl {
  appearance: none; cursor: pointer; font: inherit; font-weight: 700; font-size: .92rem;
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: var(--radius-md);
  background: var(--bg-elev); color: var(--fg); border: 1px solid var(--border-strong);
  transition: transform .1s, background .15s, border-color .15s, opacity .15s;
}
.ctl:hover { border-color: var(--accent); }
.ctl:active { transform: translateY(1px); }
.ctl:disabled { opacity: .4; cursor: default; }
.ctl-rotate { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.ctl-rotate svg { transition: transform .4s cubic-bezier(.5,0,.3,1); }
.ctl-rotate:hover svg { transform: rotate(-180deg); }
/* Restart sits on its own line, separated, and styled quietly so it isn't tapped by accident */
.controls-restart { margin-top: clamp(8px, 1.6dvh, 16px); }
.ctl-ghost { background: transparent; color: var(--fg-subtle); border-color: var(--border); padding: 8px 18px; font-size: .85rem; font-weight: 600; }
.ctl-ghost:hover { border-color: var(--accent); color: var(--fg); }
.ctl-ghost svg { opacity: .85; }
.hint { text-align: center; color: var(--fg-subtle); font-size: .8rem; margin: 0; }
.hint b { color: var(--fg-muted); }
@media (max-height: 700px) { .hint { display: none; } }

/* help toggle + transient toast */
.help-toggle { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); cursor: pointer; color: var(--fg-muted); font-size: .9rem; }
.help-toggle input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; cursor: pointer; }
.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(12px);
  background: var(--bg-elev); color: var(--fg); border: 1px solid var(--border-strong);
  border-radius: 14px; padding: 11px 16px; font-size: .84rem; font-weight: 600;
  box-shadow: var(--shadow-lg); max-width: 86vw; text-align: center; z-index: 60;
  opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast[hidden] { display: none; }

/* ── modals (build on shared .modal-backdrop / .modal-card) ──── */
.results-emoji { font-size: 2.4rem; text-align: center; }
.results-headline { text-align: center; margin: 4px 0 2px; }
.results-sub { text-align: center; color: var(--fg-muted); margin: 0 0 8px; }
.results-sub b, .pb-row b { color: var(--fg); }
.pb-row { display: flex; gap: 8px; justify-content: center; align-items: center; color: var(--fg-muted); font-size: .9rem; margin-bottom: 12px; }
.pb-row .dot { opacity: .5; }

.dist { margin: 4px 0 12px; }
.dist-title { font-size: .82rem; font-weight: 700; color: var(--fg-muted); margin-bottom: 8px; text-align: center; }
.dist-note { font-weight: 500; color: var(--fg-subtle); }
.dist-chart { display: flex; align-items: flex-end; gap: 3px; height: 96px; padding: 0 4px; }
.dist-bar { flex: 1; min-width: 6px; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; justify-content: flex-end; }
.dist-bar .bar { width: 100%; background: var(--border-strong); border-radius: 3px 3px 0 0; min-height: 2px; transition: height .3s; }
.dist-bar.you .bar { background: var(--accent); }
.dist-bar.best .bar { background: #22c55e; }
.dist-bar .n { font-size: .6rem; color: var(--fg-subtle); }
.dist-bar .lab { font-size: .58rem; color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.dist-bar.you .lab, .dist-bar.you .n { color: var(--accent); font-weight: 800; }
.improve-note { font-size: .82rem; color: var(--fg-subtle); text-align: center; margin: 0 0 14px; }

/* results-modal leaderboard */
.results-lb { margin: 6px 0 12px; }
.results-lb-title { font-size: .82rem; font-weight: 700; color: var(--fg-muted); margin-bottom: 6px; text-align: center; }
.lb-scroll { max-height: 216px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.lb-rank { min-width: 26px; }

.share-card-wrap { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.share-card-wrap img { width: 100%; max-width: 340px; border-radius: var(--radius-md); border: 1px solid var(--border); }
.share-card-wrap .tiny { font-size: .78rem; color: var(--fg-subtle); }

/* leaderboard rows */
.lb-scope { margin: 4px auto 12px; }
.lb-body { min-height: 120px; }
.lb-status { text-align: center; color: var(--fg-subtle); padding: 24px 0; }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--border); }
.lb-row.me { background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 8px; }
.lb-rank { width: 26px; text-align: right; color: var(--fg-subtle); font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { font-weight: 800; font-variant-numeric: tabular-nums; }
.lb-score small { font-weight: 600; color: var(--fg-subtle); }

.help-list { line-height: 1.6; padding-left: 18px; color: var(--fg-muted); }
.help-list b { color: var(--fg); }
.lb-input { width: 100%; box-sizing: border-box; margin: 8px 0 4px; padding: 12px 14px; font: inherit;
  border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--bg); color: var(--fg); }

@media (max-width: 420px) {
  .ctl span { display: none; }
  .ctl { padding: 10px 14px; }
  .ctl-rotate span, .ctl-ghost span { display: inline; }
}