/* cabinet.css — ONE look for every candlestick.gg cabinet.

   engine/cabinet.js owns the daily loop, engine/arcade-fx.js owns the feel,
   engine/quartergate.js owns credits — and this owns the chrome. A new cabinet
   links this file and gets the arcade's header, meta row, board frame, hint
   line, controls, result panel, modals, toast and footer for free, identical
   to every other cabinet, without copying a stylesheet around.

   Cabinet-specific colour lives in a per-game file that overrides --ember and
   friends; everything structural lives here. */
:root {
  --bg: #07070b;
  --panel: #101017;
  --line: #23232e;
  --ink: #ece7dd;
  --dim: #7c8090;
  --ember: #ff9d3c;
  --ember-hot: #ffe3a6;
  --beam: #7fe3ff;
  --socket: #f2c14e;
  --good: #6ee7a8;
  --bad: #ef5350;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(120% 80% at 50% -10%, #14121c 0%, var(--bg) 60%),
    var(--bg);
  color: var(--ink);
  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  display: flex; flex-direction: column;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------------------------ head */
header { border-bottom: 1px solid var(--line); }
.head-inner {
  max-width: 620px; margin: 0 auto; padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
}
h1 {
  flex: 1; text-align: center; margin: 0;
  font-size: 22px; letter-spacing: .34em; font-weight: 800;
  color: var(--ember); text-indent: .34em;
  text-shadow: 0 0 18px rgba(255,157,60,.45);
}
h1 span { color: var(--ink); text-shadow: none; }
.head-right { display: flex; gap: 6px; }
.icon-btn {
  background: transparent; border: 1px solid var(--line); color: var(--dim);
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0;
}
.icon-btn:hover { color: var(--ink); border-color: #39394a; }

/* ------------------------------------------------------------------ main */
main { flex: 1; width: 100%; max-width: 620px; margin: 0 auto; padding: 12px 14px 12px; }

.meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 10px; min-height: 22px;
}
#board-num { font-weight: 700; color: var(--ink); }
#matches { flex: 1; letter-spacing: .2em; }
.chip {
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px;
  font-size: 11px; letter-spacing: .06em;
}

#board-wrap { position: relative; }
/* On anything wider than a phone, the board is capped so the board, the socket
   rack and the strike button are all on screen at once — you should never have
   to scroll between deciding and doing. Phones keep the full-width board and
   scroll normally. */
@media (min-width: 560px) {
  /* The max() floor is load-bearing: without it a short viewport (a small
     window, a side panel, lots of browser chrome) drives calc() to zero or
     negative and the board collapses to nothing. Scrolling a bit beats
     disappearing. */
  #board-wrap { width: min(100%, max(300px, calc(100vh - 400px))); margin: 0 auto; }
}
/* the rack is locked and non-interactive once a burn has been scored, so it
   gives its space back to the result */
body.reviewing #tray,
body.reviewing .mode-link { display: none; }
#board {
  width: 100%; display: block; border-radius: 12px;
  border: 1px solid var(--line);
  background: #05050a;
  touch-action: manipulation;
}
#board.aiming { cursor: crosshair; }
#board:focus-visible { outline: 2px solid var(--socket); outline-offset: 2px; }

#hint {
  margin: 10px 0 12px; min-height: 40px; font-size: 13px; color: var(--dim);
  text-align: center;
}
#hint b { color: var(--ink); }
#hint .part-name { color: var(--ember); letter-spacing: .1em; }

/* ----------------------------------------------------------------- tray */
#tray { display: flex; gap: 10px; justify-content: center; margin-bottom: 14px; }
.tray-slot {
  flex: 1; max-width: 150px; min-height: 62px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; cursor: pointer; padding: 6px 4px;
  transition: border-color .12s, background .12s, transform .12s;
}
.tray-slot:hover { border-color: #3b3b4d; }
.tray-slot.sel {
  border-color: var(--socket); background: #191509;
  transform: translateY(-2px);
}
.tray-slot canvas { display: block; }
.tray-slot .lbl {
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
}
.tray-slot.sel .lbl { color: var(--socket); }
.tray-slot .rot { font-size: 9px; color: var(--dim); letter-spacing: .1em; }
#tray.locked .tray-slot { cursor: default; opacity: .55; }
#tray.locked .tray-slot.sel { opacity: 1; }

/* ------------------------------------------------------------- controls */
#controls { display: flex; flex-direction: column; align-items: center; gap: 8px; }
button.primary {
  width: 100%; max-width: 340px; padding: 13px 18px; border-radius: 10px;
  border: 1px solid #7a4a12; cursor: pointer;
  background: linear-gradient(180deg, #ffb34d, #f08a1e);
  color: #2a1603; font-weight: 800; font-size: 14px; letter-spacing: .16em;
  text-transform: uppercase;
}
button.primary:hover { filter: brightness(1.08); }
button.primary:disabled { opacity: .4; cursor: default; filter: none; }
button.ghost {
  background: transparent; border: 1px solid var(--line); color: var(--dim);
  padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 12.5px;
}
button.ghost:hover { color: var(--ink); border-color: #39394a; }

/* --------------------------------------------------------------- result */
#result { margin-top: 10px; text-align: center; }
.score-row { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.score {
  font-size: 40px; font-weight: 800; letter-spacing: -.02em;
  color: var(--ember); text-shadow: 0 0 26px rgba(255,157,60,.4);
  font-variant-numeric: tabular-nums;
}
.score.perfect { color: var(--ember-hot); text-shadow: 0 0 34px rgba(255,227,166,.6); }
.score-sub { font-size: 13px; color: var(--dim); letter-spacing: .1em; }
#verdict { margin: 4px 0 12px; font-size: 14px; }
#verdict b { color: var(--ember-hot); }
.result-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.result-btns .primary { max-width: 220px; }
.dim { color: var(--dim); font-size: 12px; }
#countdown { margin-top: 10px; letter-spacing: .08em; }

/* --------------------------------------------------------------- footer */
footer {
  border-top: 1px solid var(--line); padding: 14px;
  text-align: center; font-size: 12px; color: var(--dim);
}
footer a { color: var(--dim); }

/* --------------------------------------------------------------- modals */
.modal {
  position: fixed; inset: 0; background: rgba(4,4,8,.82);
  display: grid; place-items: center; padding: 18px; z-index: 40;
  overflow-y: auto;
}
.modal[hidden] { display: none; }
.modal-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px; max-width: 460px; width: 100%; position: relative;
  max-height: 88vh; overflow-y: auto;
}
.modal-close {
  position: absolute; top: 10px; right: 12px; background: none; border: 0;
  color: var(--dim); font-size: 24px; line-height: 1; cursor: pointer;
}
.modal-card h2 { margin: 0 0 12px; font-size: 18px; letter-spacing: .06em; }
.modal-card h3 { margin: 18px 0 8px; font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--dim); }
.modal-card p { font-size: 14px; }
ol.how { padding-left: 20px; font-size: 14px; }
ol.how li { margin-bottom: 8px; }
.note { font-size: 13px; color: var(--dim); }
.modal-card .primary { margin-top: 16px; }

#legend { display: flex; flex-direction: column; gap: 9px; }
.leg { display: flex; align-items: center; gap: 11px; }
.leg canvas { flex: none; }
.leg-txt { font-size: 13px; }
.leg-txt b { letter-spacing: .12em; font-size: 11.5px; color: var(--ember); }
.leg-txt span { color: var(--dim); display: block; font-size: 12.5px; }

/* ---------------------------------------------------------- stats/archive */
.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  text-align: center; margin-bottom: 14px;
}
.stat-grid div b { display: block; font-size: 22px; color: var(--ember);
  font-variant-numeric: tabular-nums; }
.stat-grid div span { font-size: 10px; letter-spacing: .1em; color: var(--dim);
  text-transform: uppercase; }
.bars { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.bar-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.bar-row .k { width: 62px; color: var(--dim); flex: none; }
.bar-row .b { height: 16px; border-radius: 3px; background: #2a2a38; min-width: 3px; }
.bar-row .b.on { background: var(--ember); }
.bar-row .n { color: var(--dim); font-variant-numeric: tabular-nums; }

#archive-body { display: flex; flex-direction: column; gap: 6px; max-height: 46vh;
  overflow-y: auto; }
.arch-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: #0c0c13;
  font-size: 13px; cursor: pointer;
}
.arch-row:hover { border-color: #39394a; }
.arch-row .an { flex: 1; }
.arch-row .ap { color: var(--dim); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- ceremony
   engine/ceremony.js — the shared GAME OVER / HIGH SCORE overlay. It sits
   ABOVE the game (z-index over modals) and under nothing; dismissing it
   reveals the cabinet's own result panel untouched. CRT flavour is CSS-only
   here (scanlines + glow + flicker); sound rides the game's ArcadeFX. */
.ceremony {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(3,3,7,.94);
  display: grid; place-items: center; padding: 18px;
  overflow-y: auto;
}
.ceremony::after {              /* the tube */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.25) 2px 4px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.6) 100%);
}
.cere-inner {
  position: relative; z-index: 1; width: 100%; max-width: 420px;
  text-align: center; font-family: ui-monospace, Menlo, Consolas, monospace;
  padding: 10px 0 24px;
}
.cere-title {
  font-size: clamp(22px, 7vw, 34px); font-weight: 800; letter-spacing: .18em;
  color: var(--ember);
  text-shadow: 0 0 8px var(--ember), 0 0 26px var(--ember), 0 0 60px rgba(255,157,60,.5);
  animation: cere-hum 3.1s infinite;
  margin-bottom: 6px;
}
.cere-title.perfect {
  color: var(--ember-hot);
  text-shadow: 0 0 10px var(--ember-hot), 0 0 34px var(--ember-hot), 0 0 80px rgba(255,227,166,.6);
}
@keyframes cere-hum { 0%,93%,97%,100% { opacity: 1 } 95% { opacity: .8 } }
.cere-sub { font-size: 12px; letter-spacing: .14em; color: var(--dim); margin-bottom: 8px; }
.cere-score { margin: 14px 0 4px; }
.cere-tally {
  font-size: clamp(44px, 14vw, 64px); font-weight: 800;
  color: var(--ink); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px rgba(255,255,255,.35);
}
.cere-score-label { font-size: 12px; letter-spacing: .18em; color: var(--dim); margin-left: 8px; }
.cere-high {
  margin: 10px 0 2px; font-size: 15px; font-weight: 800; letter-spacing: .22em;
  color: var(--socket);
  text-shadow: 0 0 10px var(--socket), 0 0 30px rgba(242,193,78,.6);
  animation: cere-blink 0.9s steps(1) infinite;
}
@keyframes cere-blink { 50% { opacity: .25 } }
.cere-high[hidden] { display: none; }

/* initials picker */
.cere-initials { margin: 14px auto 6px; }
.cere-ini-prompt { font-size: 11px; letter-spacing: .22em; color: var(--dim); margin-bottom: 10px; }
.cere-ini-rack { display: flex; gap: 14px; justify-content: center; }
.cere-ini-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px;
  background: #0c0c13;
}
.cere-ini-cell.active { border-color: var(--socket); box-shadow: 0 0 14px rgba(242,193,78,.35); }
.cere-ini-letter {
  font-size: 34px; font-weight: 800; color: var(--ink); width: 44px; line-height: 1.2;
  cursor: pointer; user-select: none;
}
.cere-ini-cell.active .cere-ini-letter { color: var(--socket); text-shadow: 0 0 14px rgba(242,193,78,.7); }
.cere-ini-arrow {
  background: transparent; border: 0; color: var(--dim); font-size: 15px;
  cursor: pointer; padding: 4px 12px; line-height: 1;
}
.cere-ini-arrow:hover { color: var(--ink); }
.cere-ini-ok {
  margin-top: 12px; font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .2em;
  color: #2a1603; background: linear-gradient(180deg, #ffd34d, #f0b41e);
  border: 1px solid #7a5a12; border-radius: 8px; padding: 9px 26px; cursor: pointer;
}
.cere-ini-ok:hover { filter: brightness(1.08); }

/* boards */
.cere-boards { margin-top: 14px; }
.cere-local { font-size: 11px; letter-spacing: .18em; color: var(--good); margin-bottom: 10px;
  text-shadow: 0 0 10px rgba(110,231,168,.5); }
.cere-board-cols { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cere-board {
  flex: 1; min-width: 150px; max-width: 200px;
  border: 1px solid var(--line); border-radius: 10px; background: #0a0a11;
  padding: 10px 10px 12px; text-align: left;
}
.cere-board-title {
  font-size: 10px; letter-spacing: .24em; color: var(--beam); text-align: center;
  margin-bottom: 8px; text-shadow: 0 0 10px rgba(127,227,255,.5);
}
.cere-row {
  display: flex; gap: 8px; font-size: 12.5px; padding: 2px 2px;
  color: var(--dim); font-variant-numeric: tabular-nums; white-space: pre;
}
.cere-row.you { color: var(--socket); text-shadow: 0 0 8px rgba(242,193,78,.5); }
.cere-row.dim2 { justify-content: center; font-size: 10px; letter-spacing: .1em; }
.cere-rank { opacity: .6; }
.cere-ini { letter-spacing: .2em; font-weight: 700; }
.cere-pts { margin-left: auto; }
.cere-offline { margin-top: 8px; font-size: 9px; letter-spacing: .14em; color: var(--dim); }
.cere-continue {
  margin-top: 18px; font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .18em;
  width: 100%; max-width: 260px; padding: 12px 18px; border-radius: 10px;
  border: 1px solid #7a4a12; cursor: pointer;
  background: linear-gradient(180deg, #ffb34d, #f08a1e); color: #2a1603;
  text-transform: uppercase;
}
.cere-continue:hover { filter: brightness(1.08); }

/* ------------------------------------------------------------ promo
   engine/promo.js — the cross-game chip + post-result rail. These rules are
   the canonical copy; promo.js carries an identical inline fallback for
   pages that don't link cabinet.css (root, epoch, liquidated, solvent,
   bellweather). Keep the two in sync. */
.promo-chip {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  text-decoration: none; font-size: 11px; line-height: 1; padding: 6px 9px;
  border-radius: 999px; border: 1px solid var(--line, #23232e);
  color: var(--dim, var(--ink-dim, #8fa0c2));
}
.promo-chip:hover { color: var(--ink, #ece7dd); border-color: #39394a; }
.promo-chip[hidden], .promo-rail[hidden] { display: none !important; }
@media (max-width: 420px) { .promo-chip .promo-chip-day { display: none; } }
.promo-rail {
  position: relative; margin: 16px auto 0; max-width: 560px; padding: 12px 14px;
  border: 1px solid var(--line, #23232e); border-radius: 12px;
  background: rgba(255,255,255,.03); text-align: center;
}
.promo-line {
  margin: 0 0 10px; padding: 0 18px; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim, var(--ink-dim, #8fa0c2));
}
.promo-tiles { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.promo-tile {
  flex: 1 1 0; min-width: 88px; max-width: 150px; text-decoration: none;
  display: flex; flex-direction: column; gap: 2px; padding: 9px 6px;
  border-radius: 10px; border: 1px solid var(--line, #23232e);
  background: rgba(0,0,0,.25);
}
.promo-tile b { font-size: 11px; letter-spacing: .12em; color: var(--ink, #ece7dd); }
.promo-tile span { font-size: 10.5px; color: var(--dim, var(--ink-dim, #8fa0c2)); }
.promo-tile:hover { border-color: var(--ember, var(--amber, #f5b942)); }
.promo-x {
  position: absolute; top: 4px; right: 6px; background: none; border: 0;
  cursor: pointer; font-size: 16px; line-height: 1; padding: 3px 6px;
  color: var(--dim, var(--ink-dim, #8fa0c2));
}
.promo-x:hover { color: var(--ink, #ece7dd); }
.promo-foot { display: block; }

@media (max-width: 420px) {
  h1 { font-size: 19px; }
  .score { font-size: 34px; }
  .tray-slot { min-height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .tray-slot { transition: none; }
  .cere-title, .cere-high { animation: none; }
}