* { box-sizing: border-box; margin: 0; padding: 0; }

/* The shell hides and shows chrome with the `hidden` attribute, but any author `display`
   rule outranks the UA stylesheet's `[hidden] { display: none }` — so a later
   `.empty-overlay { display: grid }` silently wins and the element never hides. Stating it
   here, once and !important, is what makes `el.hidden = true` mean what it says. */
[hidden] { display: none !important; }

:root {
  --bg: #1b2838;
  --bg-panel: #2a3f5a;
  --bg-input: #16202d;
  --text: #dbe6f0;
  --text-dim: #8fa3b8;
  --accent: #66c0f4;
  --accent-strong: #4da3e0;
  --green: #a4d007;
  --warn: #f2c14e;
}

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

/* Compact on purpose: on a 1080p screen the wheel is bounded by height, not width, so
   every pixel the header gives back is a pixel of wheel. */
header { text-align: center; padding: 0.6rem 1rem 0.3rem; }
header h1 { font-size: 1.35rem; }
.subtitle { color: var(--text-dim); font-size: 0.85rem; margin-top: 0.1rem; }

/* Transient surface: a banner above a stage that keeps working. */
.banner {
  margin: 0.6rem auto 0;
  max-width: 1400px;
  width: calc(100% - 2.4rem);
  background: #3a3320;
  border: 1px solid var(--warn);
  color: #f6e3ad;
  border-radius: 8px;
  padding: 0.55rem 0.8rem;
  font-size: 0.88rem;
}

main {
  flex: 1;
  display: grid;
  /* The centre column is the wheel's, and the wheel is the point of the page: the side
     columns are given the least that still reads well so the middle keeps the rest. */
  grid-template-columns: 300px minmax(0, 1fr) 280px;
  gap: 1rem;
  padding: 1rem 1.2rem;
  max-width: 1800px;
  margin: 0 auto;
  width: 100%;
  align-items: start;
}

.filters, .pick { background: var(--bg-panel); border-radius: 10px; padding: 1rem; }
.filters { max-height: calc(100vh - 3rem); overflow-y: auto; position: sticky; top: 0.6rem; }
.filters h2, .pick h2 { font-size: 1.1rem; margin-bottom: 0.8rem; }
.filters h3 {
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-dim);
}

.row { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.8rem; font-size: 0.9rem; }
.row.checkbox { flex-direction: row; align-items: center; gap: 0.5rem; cursor: pointer; margin-bottom: 0.5rem; }
.row > span { color: var(--text-dim); font-size: 0.82rem; }
.row.checkbox > span { color: var(--text); font-size: 0.85rem; }
.group { border-top: 1px solid #3d5471; padding-top: 0.8rem; margin-bottom: 0.8rem; }
.group-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.match { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--text-dim); }

input[type="search"], select {
  background: var(--bg-input);
  border: 1px solid #3d5471;
  color: var(--text);
  border-radius: 6px;
  padding: 0.4rem 0.5rem;
  font: inherit;
  font-size: 0.85rem;
  width: 100%;
}
input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; flex: none; }

/* Segmented controls: one button per option, the current one lit. */
.seg { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.seg button {
  background: var(--bg-input);
  border: 1px solid #3d5471;
  color: var(--text-dim);
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
.seg button:hover { border-color: var(--accent); color: var(--text); }
.seg button.on { background: var(--accent); border-color: var(--accent); color: #0d1621; font-weight: 600; }

/* A tag reached by search becomes a chip in the same row as a shortlist tag: there is no
   second-class way to hold a tag. */
.chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.5rem; }
.chip {
  background: var(--accent); color: #0d1621; border: 0; border-radius: 999px;
  padding: 0.2rem 0.55rem; font: inherit; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; display: inline-flex; gap: 0.3rem; align-items: center;
}
.chip .x { opacity: 0.55; }

.tag-grid { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.5rem 0; }
.tag {
  background: var(--bg-input); border: 1px solid #3d5471; color: var(--text);
  border-radius: 6px; padding: 0.2rem 0.45rem; font: inherit; font-size: 0.76rem;
  cursor: pointer; display: inline-flex; gap: 0.3rem;
}
.tag:hover { border-color: var(--accent); }
.tag.on { background: var(--accent-strong); border-color: var(--accent); color: #0d1621; }
.tag .count { color: var(--text-dim); font-size: 0.7rem; }
.tag.on .count { color: #0d1621; opacity: 0.7; }

details { border-top: 1px solid #3d5471; padding-top: 0.6rem; margin-bottom: 0.8rem; }
summary { cursor: pointer; font-size: 0.85rem; color: var(--accent); margin-bottom: 0.6rem; }

.total { font-size: 1rem; font-weight: 600; margin: 0.6rem 0; color: var(--accent); }
.total.empty { color: var(--warn); }
.dim { color: var(--text-dim); font-size: 0.8rem; }

button.secondary, button.spin {
  border: 0; border-radius: 8px; font: inherit; cursor: pointer; padding: 0.5rem 0.9rem;
  transition: filter 0.15s;
}
button.secondary { background: var(--bg-input); color: var(--text); border: 1px solid #3d5471; width: 100%; }
button.secondary:hover:not(:disabled) { border-color: var(--accent); }
button.spin {
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  color: #08121d; font-weight: 800; font-size: 1.2rem;
  letter-spacing: 0.12em; padding: 0.7rem 2.6rem;
}
button.spin:hover:not(:disabled) { filter: brightness(1.12); }
button.spin:disabled, button.secondary:disabled { opacity: 0.45; cursor: default; }

/* The stage: the tab strip, then one fresh host div per mount. */
.stage-area { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.tabs { display: flex; gap: 0.4rem; }
.tabs button {
  background: var(--bg-panel); border: 1px solid #3d5471; color: var(--text-dim);
  border-radius: 8px 8px 0 0; padding: 0.45rem 0.9rem; font: inherit; cursor: pointer;
}
.tabs button.on { background: var(--accent); border-color: var(--accent); color: #0d1621; font-weight: 600; }
/* `#stage` must state its width. `.stage-area` centres its children, so without this the
   stage shrink-to-fits its content — and its content is a canvas the tab sizes from the
   stage's own width. That loop has a fixed point: the wheel gets stuck at whatever it
   already was and can never grow, no matter what the column offers. Every `width: 100%`
   below here resolves against this box, so the chain is only as good as its first link. */
#stage { width: 100%; }
.tab-host { width: 100%; display: flex; justify-content: center; }

.stage-wrap { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; }
.wheel-wrap { position: relative; display: flex; justify-content: center; width: 100%; }
/* The pointer always sits over the winning slice, so it is the one element that must read
   against all twelve segment colours — and it was #ffcf40 over a palette containing
   #f2c14e, 24 RGB units away, which camouflaged it against its own winner about one spin in
   twelve. A hard #0d1621 outline settles it for every colour at once, which is the answer
   that does not need the palette's cooperation: the soft drop shadow below it is depth, not
   separation, and blurs away against a light slice. Four zero-blur offsets, not a blur.
   Pinned by a test — nothing else connects this colour to COLORS in wheel.js. */
/* The pivot is the top of the glyph box — the wide end — because the wheel deflects the
   pointer like a flapper on a peg and a flapper hinges at its mount, not at its tip. The tab
   writes `translateX(-50%) rotate(Xdeg)` inline during a spin and removes it at rest, so the
   declaration below is the resting state and must keep the translate. */
.pointer {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  transform-origin: 50% 0;
  font-size: 2rem; color: #ffcf40; z-index: 2;
  text-shadow:
    2px 0 0 #0d1621, -2px 0 0 #0d1621, 0 2px 0 #0d1621, 0 -2px 0 #0d1621,
    1.5px 1.5px 0 #0d1621, -1.5px 1.5px 0 #0d1621, 1.5px -1.5px 0 #0d1621, -1.5px -1.5px 0 #0d1621,
    0 4px 6px rgba(0,0,0,0.6);
}
canvas.wheel { display: block; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.45)); }
.wheel-controls { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; justify-content: center; }
.wheel-controls .row { flex-direction: row; align-items: center; margin: 0; gap: 0.4rem; }
.wheel-controls select, .wheel-controls button.secondary { width: auto; }

/* An empty selection is the shell's: the tab stays mounted with its last draw beneath. */
.empty-overlay {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(27, 40, 56, 0.82); border-radius: 10px;
  font-size: 1.1rem; color: var(--warn);
}

/* Fatal surface: replaces the stage, and no tab is mounted. */
.fatal { background: var(--bg-panel); border-radius: 10px; padding: 2rem; text-align: center; width: 100%; }
.fatal h2 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.fatal p { color: var(--text-dim); font-size: 0.9rem; }

/* The tie between the wheel and the card. The tab that produced the pick may tint it by
   setting --pick-accent; the wheel sets the winning segment's own colour, so the slice
   under the pointer and the card on the far side of the page are the same colour. The
   panel stays ignorant of all of it — pick.js is shared by every tab. Inset rather than a
   border, so a landing never changes the card's width. */
.pick { box-shadow: inset 4px 0 0 var(--pick-accent, transparent); transition: box-shadow 0.25s; }

.pick a { color: inherit; text-decoration: none; display: block; }
.pick a:hover .pick-name { color: var(--accent); }
.pick img { width: 100%; border-radius: 6px; display: block; margin-bottom: 0.5rem; }
.pick-name { font-weight: 700; font-size: 1.05rem; display: block; }
.pick-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.85rem; margin: 0.5rem 0; align-items: center; }
.free-badge, .discount {
  background: var(--green); color: #0d1621; border-radius: 4px;
  padding: 0.1rem 0.4rem; font-weight: 700; font-size: 0.78rem;
}
.tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.tags em {
  font-style: normal; background: var(--bg-input); border-radius: 999px;
  padding: 0.15rem 0.55rem; font-size: 0.74rem; color: var(--text-dim);
}
.blurb { font-size: 0.82rem; color: var(--text-dim); margin-top: 0.6rem; line-height: 1.45; }

footer { text-align: center; padding: 0.5rem 1rem; color: var(--text-dim); font-size: 0.75rem; }

@media (max-width: 1100px) {
  main { grid-template-columns: 1fr; }
  .filters { max-height: none; position: static; }
  .stage-area { order: -1; }
}