/* /spin-the-wheel/ page styles. Built from /assets/polyatic.css tokens only (no new colours or fonts). */
.nojs{margin:1.25rem 0 0;padding:0.875rem 1rem;border:1px solid var(--line);border-left:0.25rem solid var(--accent);border-radius:0.625rem;background:var(--surface);color:var(--ink);font-size:0.9375rem;line-height:1.6}

.stw-head .sub{margin-bottom:1rem}
@media(max-width:520px){.stw-head h1{margin-bottom:0.25rem}.stw-head .sub{font-size:0.9375rem;margin-bottom:0.75rem}}

/* the wheel gets the width on desktop */
@media(min-width:920px){.stw-duo{grid-template-columns:minmax(0,1.4fr) minmax(20rem,.8fr)}}
.stw-stage{padding:1rem}
@media(max-width:520px){.stw-stage{padding:0.75rem 0.75rem 1rem}}

.stw-play{display:grid;gap:0.875rem;justify-items:center}
@media(min-width:640px){.stw-stage.has-side .stw-play{grid-template-columns:minmax(0,1fr) minmax(11rem,15rem);align-items:start}}
.stw-wheelcol{width:100%;display:flex;flex-direction:column;align-items:center;min-width:0}
.stw-wheel{display:block;width:min(100%,max(17.5rem,calc(100svh - 20.5rem)));aspect-ratio:1/1;height:auto;border-radius:50%;cursor:pointer;touch-action:manipulation}
.stw-wheel:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.stw-under{display:flex;align-items:baseline;justify-content:center;gap:0.5rem;max-width:100%;margin:0.5rem 0 0;font-size:0.9375rem;min-height:1.5rem}
.stw-under .k{flex:none;font-family:var(--mono);font-size:0.6875rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.stw-under b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stw-go{display:flex;align-items:center;justify-content:center;gap:0.5rem;margin-top:0.5rem}
.stw-spin{height:3.25rem;min-width:11rem;font-size:1.125rem;letter-spacing:.01em}
.stw-spin:disabled{opacity:.6;cursor:default}
.stw-fs{width:3.25rem;height:3.25rem;font-size:1.25rem}

/* past 60 entries: colours on the wheel, names in this list */
.stw-side{position:relative;width:100%;max-height:8.5rem;overflow-y:auto;margin:0;padding:0.25rem;list-style:none;border:1px solid var(--line);border-radius:0.5rem;background:var(--surface-2);font-size:0.875rem;scrollbar-width:thin}
@media(min-width:640px){.stw-side{max-height:min(30rem,calc(100svh - 18rem))}}
.stw-side li{display:flex;align-items:center;gap:0.5rem;padding:0.25rem 0.375rem;border-radius:0.25rem;overflow-wrap:anywhere}
.stw-side li small{color:var(--muted);font-family:var(--mono);font-size:0.75rem}
.stw-side li.on{background:var(--ink);color:var(--bg);font-weight:600}
.stw-side li.on small{color:inherit}
.sw{flex:none;width:0.75rem;height:0.75rem;border-radius:2px;box-shadow:inset 0 0 0 1px var(--line-2)}
.sw.c0{background:var(--s1)}.sw.c1{background:var(--s3)}.sw.c2{background:var(--mat)}.sw.c3{background:var(--s2)}
.sw.c4{background:var(--signal)}.sw.c5{background:var(--s5)}.sw.c6{background:var(--accent)}.sw.c7{background:var(--s4)}

.hint{font-size:0.8125rem;color:var(--muted);margin:0.5rem 0.125rem 0;min-height:1.125rem;text-align:center}
.hint.bad{color:var(--bad);font-weight:600}

/* result card */
.stw-result{margin:0.5rem 0 0;padding:0.875rem 1rem;background:var(--surface-2);border:1px solid var(--line);border-radius:0.625rem;box-shadow:inset 0.1875rem 0 0 var(--signal)}
.stw-rhead{margin:0 0 0.25rem;font-family:var(--mono);font-size:0.6875rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.stw-wins{list-style:none;margin:0;padding:0;display:grid;gap:0.25rem}
.stw-wins li{display:flex;align-items:baseline;gap:0.625rem;min-width:0}
.stw-wins .win{font-size:1.625rem;font-weight:700;letter-spacing:-.02em;line-height:1.25;overflow-wrap:anywhere;min-width:0}
.stw-wins li+li .win{font-size:1.1875rem}
.stw-wins .ord{flex:none;font-family:var(--mono);font-size:0.6875rem;color:var(--muted);min-width:6.5rem}
.stw-rnote{margin:0.375rem 0 0;font-size:0.875rem;color:var(--ink-2)}
.stw-ract{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.75rem}
.stw-ract .btn{height:2.5rem;padding:0 0.875rem}
.stw-fair{margin:0.875rem 0.125rem 0;font-size:0.8125rem;line-height:1.55;color:var(--muted)}
.stw-fair code{font-family:var(--mono);font-size:0.75rem}

/* entries + settings */
.stw-panel{display:grid;gap:1rem;align-content:start}
.stw-notice{padding:0.75rem 0.875rem;border:1px solid var(--line-2);border-left:0.25rem solid var(--accent);border-radius:0.5rem;background:var(--accent-soft);font-size:0.875rem;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.stw-notice.is-bad{border-left-color:var(--bad);background:var(--surface-2)}
.stw-count{font-family:var(--mono);font-size:0.75rem;color:var(--muted);text-align:right}
.stw-count.bad{color:var(--bad)}
.stw-entries textarea{min-height:11rem;font-family:var(--sans);font-size:0.9375rem}
.stw-help{margin:0.375rem 0.125rem 0;font-size:0.8125rem;line-height:1.5;color:var(--muted)}
.stw-help code{font-family:var(--mono);font-size:0.75rem;background:var(--surface-2);border:1px solid var(--line);border-radius:0.25rem;padding:0 0.25rem;color:var(--ink)}
.stw-tools{display:flex;flex-wrap:wrap;gap:0.375rem;margin-top:0.625rem}
.stw-tools .chip{padding:0.375rem 0.6875rem;font-size:0.8125rem}
.stw-opts{display:grid;gap:0.625rem}
.stw-pickn{display:flex;align-items:center;gap:0.5rem;font-size:0.9375rem}
.stw-pickn input{width:4.5rem;padding:0.4375rem 0.5rem}
.stw-more{border-top:1px solid var(--line);padding-top:0.75rem}
.stw-more summary{cursor:pointer;font-weight:600;font-size:0.9375rem;display:flex;align-items:center;gap:0.5rem}
.stw-more summary::-webkit-details-marker{display:none}
.stw-more summary::before{content:"";width:0.4375rem;height:0.4375rem;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .15s}
.stw-more[open] summary::before{transform:rotate(45deg)}
.stw-more summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:0.25rem}
.stw-more[open]>:not(summary){margin-top:0.625rem}
.stw-row{display:flex;flex-wrap:wrap;gap:0.5rem}
.stw-row .btn{height:2.5rem;padding:0 0.875rem}
.stw-danger:hover{border-color:var(--bad);color:var(--bad)}
#shareurl{font-family:var(--mono);font-size:0.8125rem}
.stw-saved{list-style:none;margin:0.625rem 0 0;padding:0;display:grid;gap:0.375rem}
.stw-saved li{display:flex;gap:0.375rem;min-width:0}
.stw-saved li.none{color:var(--muted);font-size:0.875rem}
.stw-load{flex:1;min-width:0;display:flex;align-items:baseline;justify-content:space-between;gap:0.5rem;padding:0.5rem 0.75rem;border:1px solid var(--line-2);border-radius:0.5rem;background:var(--surface);color:var(--ink);font:inherit;font-size:0.875rem;text-align:left;cursor:pointer}
.stw-load:hover{border-color:var(--ink)}
.stw-load b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stw-load small{flex:none;font-family:var(--mono);font-size:0.75rem;color:var(--muted)}
.stw-del{width:2.375rem;height:auto;min-height:2.375rem}
.stw-history{margin:0;padding:0 0 0 1.75rem;max-height:13rem;overflow-y:auto;font-size:0.875rem;line-height:1.5;overflow-wrap:anywhere}
.stw-history .at{font-family:var(--mono);font-size:0.75rem;color:var(--muted);margin-right:0.5rem}
.stw-history:empty{display:none}

/* full screen, for a projector (real Fullscreen API, or a window-filling fallback on iPhone) */
.stw-stage:fullscreen,.stw-stage.is-full{background-color:var(--bg);background-image:none;border:0;border-radius:0;box-shadow:none;padding:2vh 3vw;overflow:auto;display:flex;flex-direction:column;justify-content:safe center}
.stw-stage.is-full{position:fixed;inset:0;z-index:100}
.stw-stage:fullscreen .stw-wheel,.stw-stage.is-full .stw-wheel{width:min(92vw,calc(100vh - 17rem))}
.stw-stage:fullscreen .stw-side,.stw-stage.is-full .stw-side{max-height:calc(100vh - 8rem)}
.stw-stage:fullscreen .stw-fair,.stw-stage.is-full .stw-fair{display:none}
.stw-stage:fullscreen .stw-result,.stw-stage.is-full .stw-result{max-width:40rem;margin:0.5rem auto 0;width:100%}
.stw-stage:fullscreen .stw-wins .win,.stw-stage.is-full .stw-wins .win{font-size:2.25rem}
.explainer kbd{font-family:var(--mono);font-size:0.8125rem;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:0.25rem;padding:0 0.3125rem;background:var(--surface)}

/* ready wheels: one-tap presets, each a #w= link */
.stw-ready .stw-tools{margin-top:0}
.stw-ready .chip{text-decoration:none;display:inline-flex;align-items:center}
.stw-ready .chip:focus-visible,.stw-custom .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.stw-custom{margin-top:0.625rem;padding-top:0.625rem}
.stw-custom summary{font-size:0.875rem}
.stw-cgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:0.5rem;align-items:end}
.stw-cgrid-l{grid-template-columns:minmax(0,1fr) auto;margin-top:0.75rem}
.stw-cgrid label{display:grid;gap:0.25rem;min-width:0}
.stw-cgrid input{width:100%;min-width:0;padding:0.4375rem 0.5rem}
.stw-cgrid .btn{height:2.5rem;padding:0 0.875rem;text-decoration:none;display:inline-flex;align-items:center}
.stw-cgrid .btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.stw-custom .stw-help.bad{color:var(--bad);font-weight:600}
.stw-cgrid .k{font-family:var(--mono);font-size:0.6875rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}