/* Sugar Slot - a sweet-shop counter: raspberry accent, cream paper, a cherry-red vending cabinet with chrome trim.
 * Every colour is a token; dark mode redefines the tokens (plum night, softer candy). */
:root {
  --bg: #fbf3e8; --panel: #fffdf8; --ink: #2a1a22; --muted: #6b5360; --line: #ecd8cc; --accent: #a8124a; --accent-ink: #ffffff;
  --soft: #f7e6ea; --stripe1: #f9dfe6; --stripe2: #fbf3e8; --cab: #b0152f; --cab2: #7c0d20; --chrome: #d9dde3; --chrome2: #9aa1ab;
  --glass: #e4f4f2; --glass2: #c8e7e3; --lcd: #1f3b2c; --lcd-ink: #9ff2b8; --key: #f3f4f6; --key-ink: #2a1a22;
  --ok: #17694d; --ok-ink: #ffffff; --amber: #f2b33d; --amber-ink: #3a2400; --red: #b3122e; --red-ink: #ffffff;
  --classic: #d9f2e6; --classic-ink: #10533b; --bold: #fdebc8; --bold-ink: #6a4100; --clash: #fbd5d9; --clash-ink: #8a0f24;
  --shadow: 0 1px 2px rgba(60, 20, 30, .08), 0 6px 18px rgba(60, 20, 30, .06);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #1c1320; --panel: #281c2d; --ink: #f6e9ef; --muted: #cdb6c3; --line: #46334d; --accent: #ff7aa8; --accent-ink: #2a0b19;
  --soft: #3a2340; --stripe1: #2c1d31; --stripe2: #1c1320; --cab: #8d1228; --cab2: #5a0918; --chrome: #8a919b; --chrome2: #5d636c;
  --glass: #15292b; --glass2: #1d3a3d; --lcd: #0e1f16; --lcd-ink: #8cf0aa; --key: #3a3040; --key-ink: #f6e9ef;
  --ok: #3fbf8e; --ok-ink: #062a1c; --amber: #f5c15a; --amber-ink: #2e1d00; --red: #ff6b81; --red-ink: #2a0610;
  --classic: #163d2f; --classic-ink: #9be8c6; --bold: #45330f; --bold-ink: #ffd88a; --clash: #4a1620; --clash-ink: #ffb3bf;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .3);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); background-image: repeating-linear-gradient(90deg, var(--stripe1) 0 26px, var(--stripe2) 26px 52px); background-size: 100% 220px; background-repeat: no-repeat;
  color: var(--ink); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }
.small { font-size: .88rem; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .84rem; }
.note { background: var(--soft); border-left: 4px solid var(--accent); padding: 6px 10px; border-radius: 6px; }

/* Header */
.bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.back { text-decoration: none; font-weight: 700; color: var(--accent); white-space: nowrap; }
.brand { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; min-width: 0; }
.brand strong { white-space: nowrap; }
.logo { width: 30px; height: 30px; flex: none; }
.lg-tile { fill: var(--accent); } .lg-body { fill: #ffe9ef; } .lg-glass { fill: #bfe9e4; } .lg-dot { fill: #ffb703; } .lg-dot2 { fill: #2ec4b6; } .lg-key { fill: #a8124a; } .lg-tray { fill: #5c3a21; }
.session { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel);
  color: var(--ink); font-weight: 600; font-size: .88rem; cursor: pointer; text-decoration: none; }
.pill:hover:not(:disabled) { border-color: var(--accent); }
.pill.solid { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pill.ghost { background: transparent; cursor: default; }
.pill.big { min-height: 46px; padding: 10px 22px; font-size: 1rem; }
.pill.tiny { min-height: 30px; padding: 3px 10px; font-size: .8rem; }
.pill:disabled { opacity: .55; cursor: not-allowed; }

main { max-width: 1120px; margin: 0 auto; padding: 0 16px 30px; }
.hero { padding: 26px 0 8px; }
.kicker { margin: 0 0 8px; font-size: .9rem; color: var(--muted); max-width: 760px; }
h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.05; margin: 0 0 10px; color: var(--accent); overflow-wrap: anywhere; }
.h1b { display: block; font-size: clamp(1.05rem, 2.8vw, 1.45rem); color: var(--ink); font-family: system-ui, sans-serif; font-weight: 600; margin-top: 6px; }
.lede { max-width: 760px; margin: 0 0 12px; }
.samples { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip { border: 1px dashed var(--accent); background: var(--panel); color: var(--ink); border-radius: 999px; padding: 5px 12px; min-height: 34px; font-size: .86rem; cursor: pointer; }
.chip.on { background: var(--accent); color: var(--accent-ink); border-style: solid; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin: 14px 0; box-shadow: var(--shadow); }
.ph { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.2rem; overflow-wrap: anywhere; }
.step-no { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: .95rem; flex: none; }
.mini-h { font-size: .95rem; margin: 12px 0 6px; }
.lbl { display: block; font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: 3px; }
input[type=text], select, textarea { width: 100%; min-height: 40px; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.span2 { grid-column: span 2; } .span3 { grid-column: 1 / -1; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* The machine */
.mach-wrap { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 18px; align-items: start; }
.machine { background: linear-gradient(180deg, var(--cab), var(--cab2)); border-radius: 18px 18px 10px 10px; padding: 10px; box-shadow: inset 0 0 0 3px var(--chrome2), var(--shadow); }
.marquee { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--chrome); color: #6b0b1d; border-radius: 10px; padding: 4px 8px; margin-bottom: 8px;
  font: 800 1.05rem/1.2 Georgia, serif; letter-spacing: .18em; }
.marquee i { width: 12px; height: 12px; border-radius: 50%; background: #ffb703; box-shadow: 0 0 0 3px #fff3; }
.cab { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 8px; }
.glass { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 6px; border-radius: 10px; background: linear-gradient(135deg, var(--glass), var(--glass2));
  box-shadow: inset 0 0 0 2px var(--chrome2); }
.slot { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 4px 3px 3px; border: 0; border-bottom: 3px solid var(--chrome2); background: transparent; cursor: pointer; border-radius: 6px 6px 2px 2px; min-height: 84px; }
.slot:hover { background: rgba(255, 255, 255, .25); }
.slot.picked { box-shadow: inset 0 0 0 2px #ffb703; }
.slot.here .slot-win { background: rgba(255, 255, 255, .35); border-radius: 6px; }
.slot-win { display: grid; place-items: center; height: 48px; }
.mini-wr { width: 100%; max-width: 92px; height: 46px; }
.slot-empty { font-size: .7rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.coil { width: 100%; height: 9px; }
.coil-line { stroke: var(--chrome2); }
.slot-tag { display: block; text-align: center; font: 600 .72rem/1.2 ui-monospace, Menlo, monospace; color: #1b1b2a; background: #fffbe6; border-radius: 3px; padding: 1px 2px; }
.slot-tag b { color: #8a0f24; }
.side { display: flex; flex-direction: column; gap: 6px; }
.lcd { background: var(--lcd); color: var(--lcd-ink); font: 700 .74rem/1.25 ui-monospace, Menlo, monospace; padding: 6px; border-radius: 6px; min-height: 52px; overflow-wrap: anywhere; box-shadow: inset 0 0 0 2px #0006; }
.keypad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.key { min-height: 30px; padding: 0; border-radius: 6px; border: 1px solid var(--chrome2); background: var(--key); color: var(--key-ink); font: 700 .78rem/1 ui-monospace, Menlo, monospace; cursor: pointer; }
.key:active { transform: translateY(1px); }
.key.clr { font-size: .62rem; }
.key.vend { grid-column: 1 / -1; background: #ffb703; color: #2a1a00; border-color: #c98900; min-height: 34px; letter-spacing: .1em; }
.coin { display: grid; place-items: center; height: 40px; background: var(--chrome); border-radius: 8px; }
.coin span { width: 6px; height: 26px; border-radius: 3px; background: #2a1a22; }
.tray-row { margin-top: 8px; }
.tray { display: flex; align-items: center; gap: 10px; min-height: 66px; padding: 6px 10px; border-radius: 8px; background: #1b1016; color: #f6e9ef; box-shadow: inset 0 6px 10px #0009; flex-wrap: wrap; }
.tray-hint { font-size: .78rem; color: #e8d3dc; }
.tray .pill { background: #fff; color: #2a1a22; border-color: #fff; }
.drop { width: 92px; animation: drop .6s cubic-bezier(.3, 1.4, .5, 1); }
.drop svg { width: 92px; height: 54px; }
@keyframes drop { from { transform: translateY(-60px); opacity: .2; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .drop { animation: none; } }

/* The bench: the wrapper close-up, the gauges, pairs and flags */
.wrap-host { background: radial-gradient(circle at 50% 45%, var(--panel), var(--soft)); border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.wr { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.bench-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; margin-top: 10px; align-items: start; }
.gauges { display: flex; gap: 10px; }
.gauge { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 44px; }
.tube { position: relative; width: 22px; height: 86px; border-radius: 11px; border: 2px solid var(--chrome2); background: var(--bg); overflow: hidden; }
.tube-fill { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 0 0 9px 9px; }
.g-sweet .tube-fill { background: repeating-linear-gradient(45deg, #ff8fc7 0 6px, #ffd1e6 6px 12px); }
.g-sour .tube-fill { background: repeating-linear-gradient(45deg, #b5e48c 0 6px, #e7f8d6 6px 12px); }
.g-kick .tube-fill { background: repeating-linear-gradient(45deg, #f77f00 0 6px, #ffd29e 6px 12px); }
.g-num { font-size: .9rem; } .g-lbl { font-size: .74rem; color: var(--muted); }
.pair-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pair { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: .88rem; flex-wrap: wrap; }
.pair-tag, .flag-lvl, .fix-tag { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: .74rem; font-weight: 700; letter-spacing: .02em; }
.pk-classic { background: var(--classic); color: var(--classic-ink); } .pk-bold { background: var(--bold); color: var(--bold-ink); } .pk-clash { background: var(--clash); color: var(--clash-ink); }
.verdict-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.badge { display: inline-block; border-radius: 8px; padding: 4px 12px; font-weight: 800; font-size: .92rem; background: var(--soft); color: var(--ink); white-space: nowrap; }
.v-stock { background: var(--ok); color: var(--ok-ink); } .v-tweak { background: var(--amber); color: var(--amber-ink); } .v-rethink { background: var(--red); color: var(--red-ink); }
.flags { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.flag { font-size: .88rem; padding: 6px 8px; border-radius: 8px; background: var(--bg); border-left: 4px solid var(--amber); }
.flag.fl-red { border-left-color: var(--red); }
.flag-no { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--panel); font-size: .72rem; font-weight: 700; margin-right: 4px; }
.flag-lvl { background: var(--amber); color: var(--amber-ink); } .fl-red .flag-lvl { background: var(--red); color: var(--red-ink); }
li.none { list-style: none; color: var(--muted); font-style: italic; }

/* Ask, progress, result */
.runrow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.gate { margin: 8px 0 4px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.step { color: var(--muted); } .step.active { color: var(--ink); font-weight: 700; } .step.done { color: var(--ok); }
.step-ic { display: inline-block; width: 18px; font-family: ui-monospace, monospace; }
.raw { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg); padding: 10px; border-radius: 8px; max-height: 360px; overflow: auto; }
.res-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.res-head h2 { margin: 0; font-family: Georgia, serif; font-size: 1.35rem; overflow-wrap: anywhere; min-width: 0; }
.result h3 { margin: 18px 0 8px; font-size: 1rem; }
.scores { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.score { background: var(--bg); border-radius: 10px; padding: 8px 10px; border: 1px solid var(--line); }
.score p { margin: 6px 0 0; }
.score-top { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.score-num { font-weight: 700; }
.stripe { height: 12px; border-radius: 6px; background: var(--soft); overflow: hidden; margin-top: 4px; border: 1px solid var(--line); }
.stripe-fill { display: block; height: 100%; background: repeating-linear-gradient(-45deg, var(--accent) 0 7px, #ffd1e1 7px 14px); }
.pullbox p { margin: 0; }
.fixes { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.fix { background: var(--bg); border-radius: 8px; padding: 8px 10px; border: 1px solid var(--line); }
.fix-tag { margin-right: 4px; background: var(--amber); color: var(--amber-ink); }
.fix-tag.fl-red { background: var(--red); color: var(--red-ink); } .fix-tag.fl-polish { background: var(--classic); color: var(--classic-ink); }
.names { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.name-chip { font: 700 1rem/1.2 Georgia, serif; background: #fffbe6; color: #2a1a22; border: 1px dashed #c98900; border-radius: 6px; padding: 4px 10px; }
.shelf-card { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 14px; align-items: center; background: #fffbe6; color: #2a1a22; border-radius: 12px;
  border: 2px solid #e0c36a; padding: 12px; box-shadow: 4px 4px 0 #e0c36a; }
.card-wrap .wr { max-width: 220px; }
.card-name { display: block; font: 800 1.25rem/1.2 Georgia, serif; overflow-wrap: anywhere; }
.card-tag { margin: 4px 0; font-style: italic; color: #8a0f24; }
.card-blurb { margin: 4px 0; }
.card-price { margin: 4px 0 0; color: #4b3a2a; }
.shelf-card .none { color: #6b5360; }
.recon { margin: 0; padding-left: 18px; }
.recon li.warn { color: var(--red); } .recon li.info { color: var(--muted); }
.exports, .cardrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.saved { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.hrow { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); flex-wrap: wrap; }
.hinfo { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; overflow-wrap: anywhere; }
.hbtns { display: flex; gap: 6px; }
.mini { width: 28px; height: 28px; flex: none; }
.mini-body, .mini-end { fill: var(--muted); }
.mini.v-stock .mini-body, .mini.v-stock .mini-end { fill: var(--ok); } .mini.v-tweak .mini-body, .mini.v-tweak .mini-end { fill: var(--amber); } .mini.v-rethink .mini-body, .mini.v-rethink .mini-end { fill: var(--red); }
.foot { max-width: 1120px; margin: 0 auto; padding: 10px 16px 40px; font-size: .86rem; color: var(--muted); }
.toasts { position: fixed; right: 12px; bottom: 12px; display: grid; gap: 6px; z-index: 50; max-width: min(360px, calc(100vw - 24px)); }
.toast { background: var(--ink); color: var(--panel); padding: 8px 12px; border-radius: 10px; font-size: .88rem; box-shadow: var(--shadow); transition: opacity .5s; }
.toast.err { background: var(--red); color: var(--red-ink); } .toast a { color: inherit; font-weight: 700; }
.toast.gone { opacity: 0; }

@media (max-width: 860px) {
  .mach-wrap { grid-template-columns: minmax(0, 1fr); }
  .machine { max-width: 440px; width: 100%; margin: 0 auto; }
}
@media (max-width: 640px) {
  .grid3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .span2, .span3 { grid-column: 1 / -1; }
  .two { grid-template-columns: minmax(0, 1fr); }
  .shelf-card { grid-template-columns: minmax(0, 1fr); }
  .card-wrap .wr { margin: 0 auto; }
  .bench-row { grid-template-columns: minmax(0, 1fr); }
  .back-t { display: none; }
}
@media (max-width: 400px) {
  .cab { grid-template-columns: minmax(0, 1fr) 84px; }
  .slot { min-height: 78px; }
  .bar { gap: 6px; padding: 8px 10px; }
  .pill { padding: 6px 10px; }
}