/* Shares the palette and shell of the Treasure Hunt solver so the two read as
   sibling sites: same tokens, same header/footer, same flat two-column body
   that collapses into cards on mobile. */
:root {
  --bg: #15171c;
  --panel: #1e2128;
  --panel2: #262a33;
  --line: #333845;
  --text: #e6e8ec;
  --muted: #9aa3b2;
  --accent: #ffd24a;
  --dim: #2a2d34;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.4;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
header .head-main { min-width: 0; max-width: 980px; }
header h1 { margin: 0 0 2px; font-size: 18px; }
header p { margin: 0; color: var(--muted); font-size: 13px; }

.wrap {
  display: flex;
  gap: 20px;
  padding: 20px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}
.panel { padding: 0; }
/* The left column holds two panels so the pinball input can lead and, on a
   phone, the results can slot in between it and the rest of the settings. */
.side {
  width: 300px;
  flex: 0 0 auto;
  border-right: 1px solid var(--line);
  padding-right: 24px;
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
}
.controls { min-width: 0; }
.results { flex: 1 1 620px; min-width: 0; max-width: 720px; }

h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 8px; font-weight: 600; }
h2.sec { margin: 22px 0 10px; }
section { margin-bottom: 18px; }
label { font-size: 14px; color: var(--muted); }
.sr-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hint { font-size: 13px; color: var(--muted); margin-top: 6px; }
.small { font-size: 12px; }
.muted { color: var(--muted); }

input[type=number], select {
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 15px;
}
input[type=number] { width: 130px; font-variant-numeric: tabular-nums; }
select { width: 100%; }
/* The x2 goal is chosen from the amounts the track pays, so its box sits where
   the number box was and keeps its width. */
#goalStep { width: 130px; }
input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

button {
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}
button:hover { border-color: #4a5160; }
button.danger { color: #ff8a8a; }
.quick-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.quick-add button { font-size: 12px; padding: 4px 8px; font-variant-numeric: tabular-nums; }
/* Take away as well as add, in four columns so -500 sits under +500 rather than
   wherever eight wrapped buttons happen to break. */
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.quick-add button[disabled] { opacity: .45; cursor: default; }
.quick-add button[disabled]:hover { border-color: var(--line); }

.check { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; color: var(--text); }

/* The two ways in. One of them is always the input and the other is always the
   answer, so this reads as a switch rather than as two buttons. */
.seg { display: flex; gap: 0; }
.seg button {
  flex: 1 1 0; border-radius: 0; font-size: 12px; padding: 6px 4px;
  color: var(--muted); border-color: var(--line);
}
.seg button:first-child { border-radius: 6px 0 0 6px; }
.seg button:last-child { border-radius: 0 6px 6px 0; margin-left: -1px; }
.seg button.sel {
  background: var(--accent); border-color: var(--accent);
  color: #1a1a1a; font-weight: 700;
}

/* The goal chart's axis runs the other way, cheapest and luckiest on the left,
   so the picks are reordered to sit over the side they name. */
.dist-picks.flip button:nth-of-type(1) { order: 5; }
.dist-picks.flip button:nth-of-type(2) { order: 4; }
.dist-picks.flip button:nth-of-type(3) { order: 3; }
.dist-picks.flip button:nth-of-type(4) { order: 2; }
.dist-picks.flip button:nth-of-type(5) { order: 1; }
.dist-picks.flip .hint { order: 6; }

.mult-row button { min-width: 38px; }
.mult-row button.sel {
  background: var(--accent); border-color: var(--accent);
  color: #1a1a1a; font-weight: 700;
}

/* Range input: the track and thumb have to be styled per engine, and the
   -webkit- and -moz- rules cannot be merged into one selector list, because a browser
   drops the whole rule when it meets a pseudo-element it doesn't know. */
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  margin: 12px 0 3px;
  background: transparent;
  cursor: pointer;
}
.slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: 4px;
  background: var(--dim); border: 1px solid var(--line);
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px; margin-top: -7px;
  border: none; border-radius: 50%;
  background: var(--accent);
}
.slider::-moz-range-track {
  height: 6px; border-radius: 4px;
  background: var(--dim); border: 1px solid var(--line);
}
.slider::-moz-range-thumb {
  width: 18px; height: 18px;
  border: none; border-radius: 50%;
  background: var(--accent);
}
.slider-scale {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- summary ---------- */
/* Names what the figures below actually are, so a middle-of-the-range number is
   never mistaken for a promise. */
.view-label { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.view-label b { font-size: 16px; font-weight: 700; }
.view-label span { font-size: 12px; color: var(--muted); }
.stat-row { display: flex; gap: 10px; flex-wrap: wrap; }
.stat {
  flex: 1 1 140px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
.stat b { display: block; font-size: 24px; line-height: 1.15; font-variant-numeric: tabular-nums; }
/* A range is roughly twice the characters, so it drops a size to stay on one line. */
.stat b.ranged { font-size: 17px; line-height: 1.5; }
.stat span { font-size: 12px; color: var(--muted); }
/* The likely-range line under a stat. Reserved height even when the outcome is
   certain, so turning randomness on and off doesn't resize the row. */
.stat i, .stat .range {
  display: block; min-height: 15px;
  font-size: 11px; font-style: normal; color: var(--muted); opacity: .8;
  font-variant-numeric: tabular-nums;
}
.odds { color: var(--accent); }

.next {
  margin-top: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
}
.next-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.next-head b { color: var(--accent); font-weight: 600; }
.next .bar {
  margin: 8px 0 4px;
  height: 8px;
  border-radius: 5px;
  background: var(--dim);
  overflow: hidden;
}
.next .bar i { display: block; height: 100%; background: var(--accent); }
.done-note { color: var(--muted); }

/* Said where the figures are, because it changes what they mean: the answer is
   for a smaller number than the one asked for. */
.warn {
  margin-bottom: 10px;
  padding: 8px 12px;
  background: rgba(255, 210, 74, .10);
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-size: 13px;
}

.empty-note {
  margin: 22px 0 0;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
}

/* ---------- help ----------
   A "?" button beside anything that needs a sentence, and one shared popover.
   Fixed position, so opening it never moves the page. */
button.q {
  width: 16px; height: 16px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--panel2); color: var(--muted);
  font-size: 11px; font-weight: 700; line-height: 1;
  cursor: help; vertical-align: middle;
}
button.q:hover { color: var(--accent); border-color: var(--accent); }
/* The header's own help button. Sized to be found rather than to match the
   small ones, and it does not shrink when the title wraps beside it. */
.q.q-big {
  width: 34px; height: 34px; flex: none;
  font-size: 18px; color: var(--accent); border-color: var(--accent);
}
/* The help window. Its own space, rather than a popover pinned to the button,
   which the page scrolled out from under. */
.help-dialog {
  max-width: 520px; width: calc(100% - 32px);
  max-height: 85vh; overflow-y: auto;
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 16px 18px;
  font-size: 12.5px; line-height: 1.55;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}
.help-dialog::backdrop { background: rgba(0, 0, 0, .55); }
/* Only when open: a `display` on the element itself beats the browser's own
   `dialog:not([open]) { display: none }`, which left an empty panel sitting on
   the page. */
.help-dialog[open] { display: flex; flex-direction: column; gap: 10px; }
.help-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.help-head h2 { margin: 0; }
/* 40px square: a 26px X is a fiddly target on a phone, and this one is the only
   way out of the window besides the backdrop. */
.help-x {
  flex: none;
  width: 40px; height: 40px; padding: 0;
  font-size: 18px; line-height: 1; color: var(--muted);
}
#helpBody {
  white-space: pre-wrap;      /* help text uses blank lines to separate ideas */
}
/* The how-to is markup, with a picture after the step it describes, so it sets
   its own spacing and must not inherit pre-wrap. */
#helpBody.as-html { white-space: normal; }
#helpBody p { margin: 0 0 10px; }
#helpBody p:last-child { margin-bottom: 0; }
.help-step { margin: 0 0 14px; }
.help-step img {
  display: block; max-width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 6px;
}

/* The small popover, for help that is a sentence or two. It follows its "?"
   while the page scrolls, so it never ends up pointing at nothing. */
#helpPop {
  position: fixed; z-index: 60;
  background: var(--panel2);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px; line-height: 1.55; color: var(--text);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
  max-height: 70vh; overflow-y: auto;
}
#helpPopTitle {
  display: block; margin-bottom: 4px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted);
}
#helpPopBody { white-space: pre-wrap; }  /* blank lines separate ideas */

/* The picture under a help text: one annotated image across the window. The
   text above relies on pre-wrap, which the figure must not inherit. */
.help-figs {
  white-space: normal;
  margin-top: 12px;
}
.help-figs figure { margin: 0; min-width: 0; }
.help-figs img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 6px;
}

/* ---------- outcome distribution ---------- */
.dist { margin-top: 22px; }
.dist-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dist-chart {
  margin-top: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px 4px;
  cursor: ew-resize;
  touch-action: none;          /* dragging picks a percentile, it does not scroll */
}
.dist-chart svg { display: block; width: 100%; height: 76px; }
.dist-chart rect.on { fill: var(--accent); }
.dist-chart rect.off { fill: #3a4150; }
.dist-chart line.mark { stroke: #fff; stroke-width: 1.5; opacity: .85; }
.dist-scale { display: flex; justify-content: space-between; margin-top: 3px; font-variant-numeric: tabular-nums; }
.dist-picks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.dist-picks button { font-size: 12px; padding: 4px 8px; }

/* ---------- what you get ----------
   One row per category, always all of them: an empty category shows 0 and dims
   rather than disappearing, so the page never changes height when the active
   event or Gold Rush is switched. */
.res-list {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.res-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-top: 1px solid var(--line);
}
.res-row:first-child { border-top: none; }
.res-row.empty { opacity: .4; }
/* Always 30px wide, image or not, so the names line up whether or not that
   category's sprite has been found yet. */
.res-icon { width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; }
.res-text { flex: 1 1 auto; min-width: 0; }
.res-name { font-size: 15px; font-weight: 600; line-height: 1.25; }
.res-sub { font-size: 11.5px; color: var(--muted); }
.res-qty {
  flex: 0 0 auto;
  font-size: 20px; font-weight: 700;
  color: var(--accent); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.res-qty small { font-size: 13px; font-weight: 600; }
/* A range needs more room than a single figure, so it steps down a size. */
.res-qty .ranged { font-size: 15px; }
.res-qty .extra {
  display: block; margin-top: 1px;
  font-size: 11px; font-weight: 600; color: var(--muted);
}
.res-qty { text-align: right; }


/* ---------- ladder ---------- */
.ladder-wrap {
  max-height: 460px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
/* Fixed layout, not auto: the reward column's text changes with Gold Rush and
   the active event ("165 Energy Drinks" vs "Candy"), and an auto table would
   re-measure and slide every column sideways each time it is toggled. */
table#ladder { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
/* The first column holds up to "150 ✓", which must not spill into the stage. */
#ladder th:nth-child(1) { width: 60px; }
#ladder th:nth-child(2) { width: 58px; }
#ladder th:nth-child(4) { width: 70px; }
#ladder th:nth-child(5) { width: 96px; }
/* Wide enough for the header plus its "?", which otherwise wraps. */
#ladder th:nth-child(6) { width: 92px; }
#ladder td.odds { color: var(--accent); font-weight: 600; }
#ladder thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--panel2);
  text-align: left; font-weight: 500; color: var(--muted);
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
}
#ladder td { padding: 6px 10px; border-top: 1px solid var(--line); }
#ladder tbody tr:first-child td { border-top: none; }
#ladder .c { text-align: right; font-variant-numeric: tabular-nums; }
/* nowrap: the ✓/★ suffix must sit beside the number, not wrap under it. */
#ladder .n { color: var(--muted); width: 46px; white-space: nowrap; font-variant-numeric: tabular-nums; }
#ladder .cum { color: var(--muted); }
/* Nothing to click while the pinballs are the answer, so the rows stop
   inviting one: no pointer and no hover. Written as :not() rather than as an
   override, which would have to out-specify the highlight on the current row
   as well as the hover it means to cancel. */
#ladder:not(.no-pick) tbody tr { cursor: pointer; }
/* :where() so the hover weighs exactly what it did before this mode existed.
   A heavier selector would beat the current row's own highlight while the
   pointer sat on it. */
#ladder:not(:where(.no-pick)) tbody tr:hover td { background: var(--panel2); }
#ladder tr.done td { color: var(--muted); }
#ladder tr.done .n::after { content: " ✓"; color: #7fbf7f; }
#ladder tr.cur td { background: rgba(255, 210, 74, .09); }
#ladder tr.cur .rw { color: var(--accent); font-weight: 600; }
#ladder tr.cur .n::after { content: " ★"; color: var(--accent); }
#ladder tr.assumed .rw { font-style: italic; }
/* The stage counter as the game shows it, and a heavier rule where a new stage
   starts, so the rewards read in the groups the game draws them in. */
#ladder .st { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
#ladder tr.stage-start td { border-top: 2px solid #4a5160; }

/* Preexisting progress: the two halves of x/y, narrow enough to share one row
   with the slash and the "Grand Prize Progress" hint in the 300px sidebar. */
input[type=number].stage-num { width: 52px; }
.slash { color: var(--muted); font-size: 16px; }

.notes { margin: 0; padding-left: 18px; font-size: 12px; color: var(--muted); line-height: 1.7; }

footer {
  width: 100%;
  margin: 20px auto 0;
  padding: 16px 14px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  border-top: 1px solid var(--line);
}
footer a { color: var(--accent); }
/* A footer link that opens help rather than a page, so it is a button wearing
   the look of its neighbours. */
footer button {
  background: none; border: none; padding: 0;
  font: inherit; color: var(--accent);
  text-decoration: underline; cursor: pointer;
}

input, button, select, a { touch-action: manipulation; }

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  /* Stretch, or each panel is only as wide as its content and the pinball panel
     stops short of the results under it. */
  .wrap { padding: 12px; gap: 12px; flex-direction: column; align-items: stretch; }
  .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
  /* `display: contents` dissolves the side wrapper so its two panels become
     items of .wrap and can be ordered around the results: type your pinballs,
     read the answer, and only then meet the settings. */
  .side {
    display: contents;
    width: auto; border-right: none; padding-right: 0; position: static;
  }
  .controls-primary { order: 1; }
  .results { order: 2; flex-basis: auto; width: 100%; }
  .controls-more { order: 3; }
  /* Three tiles across one narrow row beats two-then-one. */
  .stat { flex: 1 1 120px; padding: 9px 10px; }
  .stat b { font-size: 20px; }
  .stat b.ranged { font-size: 14px; white-space: nowrap; }
  /* The luck caption gets its own line rather than squeezing the heading. */
  .dist-head { flex-wrap: wrap; }
  .dist-head #distLabel { flex: 1 0 100%; }
  .res-list { background: var(--panel2); }
  /* The split under a figure ("740 from Tatari Party + 328 from the machine") is
     a long line, and kept beside the name it squeezed the name to a word per
     line and pushed the figure off the screen. Here it drops to a line of its own
     under the whole row: the figure's box dissolves so the figure and the split
     become items of the row, and the split takes the full width. */
  .res-row { flex-wrap: wrap; row-gap: 2px; }
  .res-qty { display: contents; }
  .res-qty .res-main { flex: 0 0 auto; margin-left: auto; }
  .res-qty .extra { flex: 1 0 100%; margin-top: 0; white-space: normal; }
  /* Six columns on a phone: tighter cells and narrower number columns, so the
     reward keeps enough width to stay on one line. */
  #ladder th, #ladder td { padding-left: 6px; padding-right: 6px; }
  #ladder th:nth-child(1) { width: 48px; }
  #ladder th:nth-child(2) { width: 46px; }
  #ladder th:nth-child(4) { width: 54px; }
  #ladder th:nth-child(5) { width: 64px; }
  #ladder th:nth-child(6) { width: 80px; }
  .stat, .next, .ladder-wrap { background: var(--panel2); }
  input[type=number], select { font-size: 16px; }  /* >=16px stops iOS zoom-on-focus */
  .slider::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -10px; }
  .slider::-moz-range-thumb { width: 24px; height: 24px; }
}

/* ---------- small phones ---------- */
@media (max-width: 480px) {
  /* Every pixel of side padding is a pixel the rows and the ladder do not get. */
  .wrap { padding: 8px; gap: 8px; }
  .panel { padding: 12px; }
  /* Six columns left the reward a few pixels at 360 wide, crammed into the cost
     beside it. The running total goes, being the one column worked out from the
     others, and the rest tighten, which keeps a reward on one line down to 360. */
  #ladder { font-size: 12px; }
  #ladder th:nth-child(5), #ladder td:nth-child(5) { display: none; }
  #ladder th, #ladder td { padding-left: 4px; padding-right: 4px; }
  #ladder th:nth-child(1) { width: 42px; }
  #ladder th:nth-child(2) { width: 42px; }
  #ladder th:nth-child(4) { width: 48px; }
  #ladder th:nth-child(6) { width: 76px; white-space: nowrap; }
}

/* The reward a ladder click asked for. Reaching it makes it the last claimed
   row, so the star moves to the next one; this keeps the click visible. */
#ladder tr.target td { background: rgba(255, 210, 74, .13); }
#ladder tr.target td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
#ladder tr.target .rw { color: var(--accent); }