/* Layout: two full screens. The intake is one question per screen; the wheel is a full-bleed
   Big Wheel drum with a thin overlay on top (answers + menu) and at the bottom (now playing + spin).
   Always dark: it's used in a car, often at night. Low fidelity still; brand comes later. */
:root{
  /* black + forest green, all of it from marqhitos (#2C805C is its dither ink) */
  --bg:#0B0B0B; --surface:#141414; --raise:#1C1C1C; --ink:#F2F2F2; --muted:#9A9A9A; --dim:#4A4A4A; --line:#262626;
  --glass:rgba(20,20,20,.92); --face-a:#000; --face-b:#000; --hatch:rgba(242,242,242,.07);
  --accent:#2C805C; --pxring:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 18 18%27 shape-rendering=%27crispEdges%27%3E%3Cpath fill=%27%23141414%27 fill-opacity=%27.92%27 d=%27M7 1h4v1h-4zM5 2h8v1h-8zM4 3h10v1h-10zM3 4h12v1h-12zM2 5h14v1h-14zM2 6h14v1h-14zM1 7h16v1h-16zM1 8h16v1h-16zM1 9h16v1h-16zM1 10h16v1h-16zM2 11h14v1h-14zM2 12h14v1h-14zM3 13h12v1h-12zM4 14h10v1h-10zM5 15h8v1h-8zM7 16h4v1h-4z%27/%3E%3Cpath fill=%27%232C805C%27 d=%27M7 0h4v1h-4zM4 1h3v1h-3zM11 1h3v1h-3zM3 2h2v1h-2zM13 2h2v1h-2zM2 3h2v1h-2zM14 3h2v1h-2zM1 4h2v1h-2zM15 4h2v1h-2zM1 5h1v1h-1zM16 5h1v1h-1zM1 6h1v1h-1zM16 6h1v1h-1zM0 7h1v1h-1zM17 7h1v1h-1zM0 8h1v1h-1zM17 8h1v1h-1zM0 9h1v1h-1zM17 9h1v1h-1zM0 10h1v1h-1zM17 10h1v1h-1zM1 11h1v1h-1zM16 11h1v1h-1zM1 12h1v1h-1zM16 12h1v1h-1zM1 13h2v1h-2zM15 13h2v1h-2zM2 14h2v1h-2zM14 14h2v1h-2zM3 15h2v1h-2zM13 15h2v1h-2zM4 16h3v1h-3zM11 16h3v1h-3zM7 17h4v1h-4z%27/%3E%3C/svg%3E"); /* the round buttons' outline: an 18×18 pixel circle, 3px cells like the scenes */
   --accent-ink:#F2F2F2; --ok:#3DD68C; --warn:#FF8A3D; --bad:#FF5A5A;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --top:env(safe-area-inset-top,0px); --bot:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.5 var(--sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.muted{color:var(--muted);font-size:14px}

.iconbtn{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:transparent;cursor:pointer}
.iconbtn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.iconbtn:disabled{opacity:.35;cursor:default}

/* ================= intake ================= */
.intake{position:relative;z-index:1;transition:opacity .2s ease-out;min-height:100%;min-height:100dvh;max-width:560px;margin:0 auto;padding-inline:16px;padding-block:calc(8px + var(--top)) calc(32px + var(--bot));display:flex;flex-direction:column}
.ihead{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;min-height:52px}
.ihead .iconbtn{margin-left:-10px}
.dots{grid-column:2;display:flex;justify-content:center;gap:6px;margin:0;padding:0;list-style:none}
.intake.leaving{opacity:0;pointer-events:none}
/* the pixel window: the canvas behind the page paints into this box, a little more of it each question */
.seedbox{flex:none;height:clamp(110px,24dvh,220px);margin-top:4px}
/* progress in pixels: 3px cells, corners notched like the buttons' ring; to-do steps are a 50% dither */
.dots li{width:42px;height:9px;clip-path:polygon(3px 0,39px 0,39px 3px,42px 3px,42px 6px,39px 6px,39px 9px,3px 9px,3px 6px,0 6px,0 3px,3px 3px);
  background:conic-gradient(var(--dim) 25%,transparent 0 50%,var(--dim) 0 75%,transparent 0) 0 0/6px 6px}
.dots li.on{background:var(--accent)}
.step{flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px;padding-top:10px;text-align:center;text-transform:lowercase}
.step.enter{animation:stepin .22s ease-out}
.step.enter.backward{animation-name:stepback}
@keyframes stepin{from{opacity:0;transform:translateX(16px)}}
@keyframes stepback{from{opacity:0;transform:translateX(-16px)}}
h1{margin:0 0 14px;font:500 15px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-wrap:balance} /* the question is a small all-caps label; the answers carry the size */

/* answers are plain text: no card, no icon, no subtext; the chosen one turns green */
/* question and answers sit centred in the space under the pixel window; every row is a full-width tap target */
.opts,.chips,.regions{display:grid;grid-auto-rows:minmax(56px,auto)}
.opt,.chip{display:block;width:100%;min-height:52px;padding:6px 0;border:0;background:none;text-align:center;text-transform:lowercase;cursor:pointer;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.opt,.regions .chip{font-size:clamp(28px,8.6vw,40px);line-height:1.15}
.chip{font-size:clamp(21px,6vw,28px);line-height:1.15}
.opt:active,.chip:active{opacity:.6}
.opt[aria-pressed="true"],.chip[aria-pressed="true"]{color:var(--accent)}
@media (hover:hover){.opt:hover,.chip:hover{color:var(--accent)}}
.chips{grid-template-columns:1fr 1fr;column-gap:16px}
.chip.wide{grid-column:1/-1}
@media (hover:hover){.chip:hover{border-color:var(--dim)}}

/* ================= the wheel ================= */
.wheelscreen{position:fixed;inset:0;z-index:1;overflow:hidden}
.stage{position:absolute;inset:0;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.stage:active{cursor:grabbing}
.sea{position:fixed;inset:0;z-index:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;pointer-events:none}
.drum{position:absolute;inset:0;perspective:1100px;perspective-origin:50% var(--cy,50%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 60%,transparent 79%);mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 60%,transparent 79%)}
.faces{position:absolute;left:0;right:0;top:var(--cy,50%);height:0;transform-style:preserve-3d}
.face{position:absolute;left:0;right:0;top:0;height:var(--fh,180px);margin-top:calc(var(--fh,180px) / -2);display:grid;grid-template-columns:auto minmax(0,1fr);align-content:center;column-gap:14px;row-gap:6px;padding:0 70px 0 18px;
  border-top:0;background:var(--face-a);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.face:nth-child(even){background-color:var(--face-b)}
/* black cards; the dimension comes from the edges: a faint lit seam on top, a shadow falling off the bottom,
   both stronger as the card turns away (the --dk overlay then dims the text too) */
.face::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,calc(.06 + var(--dk,0) * .1)) 0,rgba(255,255,255,0) 1px,rgba(255,255,255,calc(.025 + var(--dk,0) * .06)) 2px,transparent 26%,transparent 70%,rgba(255,255,255,calc(.012 + var(--dk,0) * .03)) 100%)}
.face.wild{background-image:repeating-linear-gradient(135deg,transparent 0 9px,var(--hatch) 9px 10px)}
.fmain{display:contents}
.fname{grid-column:2;grid-row:1}
.fnum{grid-column:1;grid-row:2;align-self:baseline;font:500 13px var(--mono);color:var(--muted)}
.fmeta{grid-column:2;grid-row:2;align-self:baseline}
.fname{font:600 calc(var(--fh) * .19)/1.08 var(--sans);letter-spacing:-.02em;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.fmeta{overflow:hidden;font:500 13px var(--mono);letter-spacing:.03em;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}
.fwild{position:absolute;top:calc(var(--fh) * .12);right:70px;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.face.blank .fname{color:var(--dim)}
.face.win{background:#000 var(--winedge) 0 50%/var(--winsize) no-repeat;image-rendering:pixelated;border-top-color:transparent;color:var(--ink)} /* black so the scene never shows through; the pixel outline is drawn in app.js */
.face.win .fnum{color:var(--accent)}
.face.win .fmeta,.face.win .fwild{color:inherit}
.face.win .fname,.face.win .fmeta{animation:lockin .24s ease-out}
/* depth: a card darkens as it turns away from you (opacity set per frame from its angle) */
.face::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--dk,0);pointer-events:none}
@keyframes lockin{from{opacity:.5;transform:scale(.97)}}

/* tuning: pixel static, a sweeping tuner needle over a dial scale, and a live seconds counter,
   so a slow stream reads as "working", never as "frozen" */
.tune{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .2s ease-out}
.face.tuning .tune{opacity:1}
.tune::before{content:"";position:absolute;inset:-96px;will-change:transform;background:var(--noise) 0 0/192px 192px;image-rendering:pixelated;opacity:.55;animation:static .42s steps(1) infinite} /* pixel static: the tile jumps by whole 3px cells, about 14 times a second */
.tune::after{content:"";position:absolute;left:5%;right:5%;bottom:14%;height:12px;
  background:repeating-linear-gradient(90deg,var(--muted) 0 1px,transparent 1px 14px);opacity:.55}
@keyframes static{0%{transform:translate(0,0)}17%{transform:translate(-39px,21px)}33%{transform:translate(24px,-42px)}50%{transform:translate(-63px,-18px)}67%{transform:translate(45px,33px)}83%{transform:translate(-15px,57px)}}
.sweep{position:absolute;inset:0;will-change:transform;animation:sweep 1.25s ease-in-out infinite alternate}
.sweep i{position:absolute;left:50%;top:8%;bottom:8%;width:3px;margin-left:-1.5px;border-radius:2px;background:var(--accent);box-shadow:0 0 14px 2px var(--accent)}
@keyframes sweep{from{transform:translateX(-45%)}to{transform:translateX(45%)}}
.tlabel{position:absolute;top:calc(var(--fh) * .1);left:18px;padding:3px 8px;border-radius:0;background:var(--accent);font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#FFFFFF}
.face.tuning .fwild{visibility:hidden}

.shade{position:absolute;inset:0;pointer-events:none;
  background:none}
/* the pointer: solid white, raised off the wheel by a drop shadow */
.flapwrap{position:absolute;right:16px;top:var(--cy,50%);width:46px;height:30px;margin-top:-15px;pointer-events:none;
  filter:drop-shadow(-3px 5px 5px rgba(0,0,0,.55)) drop-shadow(0 1px 1px rgba(0,0,0,.4))}
@media (max-width:600px){.flapwrap{right:0}} /* phones: locked to the screen edge */
.flap{position:absolute;inset:0;background:#FFFFFF;
  clip-path:polygon(0 50%,100% 0,100% 100%);transform-origin:100% 50%;pointer-events:none;will-change:transform}
/* the controls: the now-playing bar, and one row of circles under it */
.wfoot{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 16px calc(16px + var(--bot));pointer-events:none}
.wfoot > *{pointer-events:auto}
/* one row: the station as bare text on the left, the circles on the right */
/* the now-playing text is off screen: the cards already show the station. It stays as the screen-reader announcement */
.np{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.np[data-state="idle"]{display:none} /* no station yet: the wheel and Spin say it all */
.np[data-state="trouble"] .np-meta{color:var(--warn)}
.np-text{display:grid;min-width:0;flex:1}
.np-title{overflow:hidden;font-size:17px;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
.np-meta{overflow:hidden;font-size:13px;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}
.ppbtn .i-play{display:none}
.ppbtn.paused .i-play{display:block;fill:currentColor;stroke:none}
.ppbtn.paused .i-pause{display:none}
.ctrls{flex:none;display:flex;align-items:center;gap:10px;pointer-events:auto}
/* every control is a circle drawn in pixels: an 18×18 ring and 9×9 icons, 3px cells like the scenes */
.sq,.spin{flex:none;display:grid;place-items:center;width:54px;height:54px;padding:0;border:0;border-radius:0;background:var(--pxring) center/100% 100% no-repeat;image-rendering:pixelated;color:var(--accent);cursor:pointer}
.sq svg,.spin .i-again{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sq svg.px,.spin svg.px{width:27px;height:27px;fill:currentColor;stroke:none;shape-rendering:crispEdges} /* 9×9 pixel icons, 3px cells like the ring */
.sq,.spin{transition:transform .12s ease-out}
.spin:active:not(:disabled),.sq:active:not(:disabled){transform:scale(.96)}
.spin:disabled{opacity:.45;cursor:default}
.spin:focus-visible,.iconbtn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ================= menu ================= */
.scrim{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.55);opacity:0;transition:opacity .2s ease-out}
.scrim.open{opacity:1}
.menu{position:fixed;top:0;right:0;bottom:0;z-index:21;width:min(420px,100%);overflow-y:auto;overscroll-behavior:contain;
  padding:calc(8px + var(--top)) 16px calc(24px + var(--bot));background:var(--surface);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .22s ease-out;display:flex;flex-direction:column;gap:14px}
.menu.open{transform:none}
.mhead{display:flex;align-items:center;justify-content:space-between;min-height:52px}
.mhead h2{margin:0;font:600 20px var(--sans)}
.mhead .iconbtn{margin-right:-10px}
.msec{display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.msec h3{margin:0;font:600 15px var(--sans);display:inline}
.msec h4{margin:6px 0 0;font:600 14px var(--sans)}
.msec p{margin:0}
.msec summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:28px}
.msec summary::-webkit-details-marker{display:none}
.msec summary::after{content:"+";font:500 18px var(--mono);color:var(--muted)}
.msec[open] summary::after{content:"–"}
.mbtns{display:flex;flex-wrap:wrap;gap:8px}
.mbtn{min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:14px;font-weight:500;cursor:pointer}
.mbtn.danger{border-color:var(--bad);color:var(--bad)}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;cursor:pointer}
.toggle span{display:grid}
.toggle small{font-size:13px;color:var(--muted)}
.toggle input{width:22px;height:22px;flex:none;accent-color:var(--accent)}
.credit{padding:0 4px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:14px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.pill{display:inline-block;padding:1px 8px;border-radius:99px;font:600 12px var(--mono);letter-spacing:.04em}
.pill.ok{background:rgba(61,214,140,.15);color:var(--ok)}.pill.warn{background:rgba(245,184,61,.15);color:var(--warn)}
.pill.bad{background:rgba(255,90,90,.15);color:var(--bad)}.pill.none{background:var(--raise);color:var(--muted)}
.segs{display:grid;gap:6px;margin:0;padding:0;list-style:none;font-size:14px}
.segs li{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;font-variant-numeric:tabular-nums}
.checks label{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line);cursor:pointer;font-size:14px}
.checks label:first-child{border-top:0}
.checks input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--ok)}
.log{max-height:300px;overflow:auto;margin:0;padding:0;list-style:none;font:400 12px/1.5 var(--mono)}
.log li{display:grid;grid-template-columns:62px 64px 1fr;gap:8px;padding:3px 0;border-top:1px solid var(--line)}
.log .k{color:var(--muted)}.log .k.bad{color:var(--bad)}.log .k.ok{color:var(--ok)}.log .k.warn{color:var(--warn)}
.log span{min-width:0;overflow-wrap:anywhere}
.toast{position:fixed;left:50%;bottom:calc(20px + var(--bot));z-index:30;transform:translateX(-50%);padding:10px 16px;border-radius:99px;background:var(--ink);color:var(--bg);font-size:14px;font-weight:500}

@media (prefers-reduced-motion:reduce){
  .step.enter,.face.win .fmain{animation:none}
  .tune::before{animation:none}
  .sweep{animation:none}.sweep i{display:none}
  .face.tuning .tune{animation:pulse 1.6s ease-in-out infinite alternate}
  @keyframes pulse{from{opacity:.55}}
  .np[data-state="tuning"]::after{animation:none!important}
  .menu,.scrim,.opt,.chip,.spin{transition:none}
}