/* Odd one out and the Mix (js/games/*.js). Play screens use the Station archetype (DESIGN-SYSTEM.md): booth grey
   (css/booth.css matches .screen.drill), the question in title-1, the board centered, a 112 px foot under the thumb.
   Controls over or beside colors are opaque (never frosted). Motion is calm: tiles snap, a ripple runs on success. */

/* ---------- the board ---------- */
.oo-stage{padding:14px 0 10px;align-items:flex-start;container-type:size}
.oo-board{position:relative;width:min(100%,58dvh,calc((100dvh - 350px) * var(--ar)));aspect-ratio:var(--ar);margin:0 auto;flex:none}
.oo-ground{border-radius:var(--r-1)}
.oo-t{position:absolute;padding:0;background:var(--c);border-radius:var(--r-1);transform:rotate(var(--rot,0deg));transition:transform .3s var(--spring),opacity .3s,background-color .25s;touch-action:manipulation}
.oo-t:active{transform:rotate(var(--rot,0deg)) scale(.93)}
.oo-circle{border-radius:50%}
.oo-chip.oo-t,.oo-b-strip .oo-t{border-radius:2px}
.oo-hex{border-radius:0;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);transform:scale(.94)}
.oo-hex:active{transform:scale(.88)}
.oo-pt{background-color:#5F5F5F;background-repeat:no-repeat;border-radius:2px}
.oo-t.tap{animation:ooSnap .34s var(--spring)}
@keyframes ooSnap{0%{transform:rotate(var(--rot,0deg)) scale(.9)}100%{transform:rotate(var(--rot,0deg)) scale(1)}}
.oo-t.rip{animation:ooRip .6s var(--ease) var(--dl,0ms) both}
@keyframes ooRip{40%{transform:rotate(var(--rot,0deg)) scale(.9);filter:brightness(1.1)}100%{transform:rotate(var(--rot,0deg)) scale(1)}}
.oo-hex.rip{animation-name:ooRipH}
@keyframes ooRipH{40%{transform:scale(.84);filter:brightness(1.1)}100%{transform:scale(.94)}}
.oo-t.sel{outline:2px solid var(--ink);outline-offset:3px}
.oo-t.ring{outline:2px solid var(--good);outline-offset:3px}
.oo-t.miss{outline:2px solid var(--bad);outline-offset:3px}
.oo-t.same{outline:1px dashed rgba(255,255,255,.75);outline-offset:2px}
/* outlines are clipped on hexagons: a centered dot marks them instead */
.oo-hex.ring::after,.oo-hex.miss::after,.oo-hex.sel::after{content:"";position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;margin:-11% 0 0 -11%;border-radius:50%;background:var(--good);box-shadow:0 0 0 2px rgba(0,0,0,.25)}
.oo-hex.miss::after{background:var(--bad)}.oo-hex.sel::after{background:var(--ink)}
.oo-t.off{opacity:.1;pointer-events:none}
.oo-t:disabled{cursor:default}
/* flash and blink: the tiles hold their places as plain grey */
.oo-hide .oo-t,.oo-blank .oo-t{background:#6C6C6C!important;background-image:none!important;transition:none}
.oo-breathe .oo-t{animation:ooBreathe var(--bp,3.2s) ease-in-out var(--bd,0s) infinite}
@keyframes ooBreathe{50%{transform:scale(.8)}}
@media (prefers-reduced-motion:reduce){.oo-breathe .oo-t{animation:none}.oo-t.rip,.oo-t.tap{animation:none}}

/* ---------- header extras: hearts (lives), the Customize icon ---------- */
.oo-head h2{min-height:46px}
.oo-hearts{flex:1;display:flex;gap:7px}
.oo-hearts i{width:11px;height:11px;border-radius:50%;background:var(--bad);transition:background .3s,transform .3s var(--spring)}
.oo-hearts i.gone{background:var(--rule);transform:scale(.7)}
/* the Customize icon trails the header (app.css .deck-top .icon-btn assumes a LEADING icon and pulls it left
   12px to sit flush with the edge -- flip that for a trailing icon, same as .bar .icon-btn does) */
.oo-play .deck-top [data-tune]{margin-left:0;margin-right:-12px}
/* a first-timer's first session names the icon once, so "Customize" isn't a private symbol (craft critique,
   2026-10-09); every session after that, it's the plain icon again */
.oo-play .deck-top .oo-tunelab{display:flex;align-items:center;width:auto;height:36px;gap:6px;padding:0 14px 0 10px;border-radius:var(--r-pill);background:var(--surface-2);margin-right:0}
.oo-tunelab small{font:500 13px/1 var(--mono);letter-spacing:0;text-transform:none;color:var(--soft)}

/* ---------- the foot: answers, pills, the feedback line ---------- */
.oo-foot{min-height:112px;flex-direction:column;gap:10px}
.oo-count{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:100%}
.oo-k,.oo-pill{display:grid;place-items:center;height:54px;border-radius:var(--r-pill);background:#F4F4F2;color:#141311;font:400 26px/1 var(--serif);transition:transform .25s var(--spring),background .2s}
.oo-k:active,.oo-pill:active{transform:scale(.95)}
.oo-k.on,.oo-pill.on{background:var(--good);color:#141311}
.oo-k:disabled,.oo-pill:disabled{opacity:.55}
.oo-pill{height:44px;padding:0 20px;font:italic 400 18px/1 var(--serif)}
.oo-pill.ghost{background:#4B4B4B;color:#F4F4F2}
.oo-pill.big{width:100%;height:58px;font-size:24px;font-style:normal}
.oo-extras{display:flex;gap:10px;justify-content:center}
.oo-dirs{display:grid;gap:8px;width:100%}
.oo-dirrow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.oo-w{height:46px;font-size:21px}
.oo-fb{font:400 20px/1.3 var(--serif);color:var(--ink);text-align:center;text-wrap:pretty;max-width:34ch;margin:0 auto}
.oo-fb.ok{color:var(--ink)}
.oo-fb b{font-style:normal;color:var(--ink)}
.oo-fb .mono{font:500 15px/1 var(--mono)}
.oo-src{display:block;font-size:16px;color:var(--soft);margin-top:4px}
.oo-rev{display:flex;flex-direction:column;gap:12px;width:100%}
/* Next is the one thing to press after every round: a full-width, thumb-sized button, never a small ghost link */
.oo-rev [data-next]{width:100%;min-height:58px;justify-content:center;font-size:19px;font-weight:600;gap:10px}
.oo-rev [data-next].ghost{min-height:58px;padding:0 22px 0 26px;background:var(--surface-2);color:var(--ink);font:600 19px/1 var(--sans);text-decoration:none;border-radius:var(--r-pill);justify-content:center}

.oo-title{margin:8px 0 6px}
.oo-daily{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;width:100%;margin-top:22px;padding:16px;background:var(--surface-2);border-radius:var(--r-2);text-align:left;transition:transform .3s var(--spring)}
.oo-daily:active{transform:scale(.98)}
.oo-daily svg{color:var(--soft)}
.oo-dgrid{display:grid;grid-template-columns:repeat(3,15px);gap:3px}
.oo-dgrid i{width:15px;height:15px;border-radius:2px;background:var(--surface-3)}
.oo-dgrid i.g,.oo-share .g i{background:#6AAA64}.oo-dgrid i.y,.oo-share .y i{background:#C9B458}.oo-dgrid i.x,.oo-share .x i{background:#3A3A3C}
.oo-dt b{display:block;font:400 22px/1.1 var(--serif)}
.oo-dt em{font-style:normal;font-size:13.5px;color:var(--soft)}
.oo-nt{min-width:0}
.oo-nt b{display:block;font:400 21px/1.12 var(--serif)}
.oo-nt b .mono{font:500 13px/1 var(--mono);color:var(--soft);margin-right:8px;vertical-align:3px}
.oo-nt em{display:block;font-style:normal;font-size:14px;line-height:1.35;color:var(--soft);margin-top:3px}
.oo-st{display:flex;gap:3px}
.oo-st i,.oo-star i{width:10px;height:10px;background:var(--rule);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.oo-st i.on,.oo-star.on i{background:#E8C66B}

/* ---------- results, share, misses ---------- */
.oo-stars-row{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 20px}
.oo-star{display:flex;align-items:center;gap:7px;font:italic 400 17px/1 var(--serif);color:var(--faint)}
.oo-star i{width:16px;height:16px}
.oo-star.on{color:var(--ink)}
.oo-star.new i{animation:ooPop .7s var(--spring) calc(.25s + var(--k) * .18s) both}
@keyframes ooPop{0%{transform:scale(.2) rotate(-30deg)}100%{transform:none}}
.oo-miss{display:flex;gap:12px;overflow-x:auto;margin:14px calc(var(--g) * -1) 0;padding:0 var(--g) 6px;scrollbar-width:none}
.oo-miss span{flex:none;display:grid;grid-template-columns:44px 44px;gap:2px}
.oo-miss i{height:44px;background:var(--c)}
.oo-miss i:first-child{border-radius:var(--r-1) 0 0 var(--r-1)}.oo-miss i:nth-child(2){border-radius:0 var(--r-1) var(--r-1) 0}
.oo-miss em{grid-column:1/-1;font-style:normal;font-size:13px;color:var(--soft);margin-top:4px}
.oo-share{display:flex;gap:6px;margin:0 0 18px}
.oo-share span{display:flex;flex-direction:column;align-items:center;gap:6px}
.oo-share i{width:44px;height:44px;border-radius:4px}
.oo-share em{font-style:normal;font-size:13px;color:var(--soft)}

/* ---------- eye profile ---------- */
.oo-eye .lede{color:var(--soft);font-size:15.5px;margin:10px 0 0;max-width:38ch}
.oo-ey{margin-top:12px}
.oo-eyet{width:100%;border-collapse:collapse;margin-top:8px;font:400 13px/1 var(--mono);font-variant-numeric:tabular-nums}
.oo-eyet th,.oo-eyet td{padding:11px 0;border-bottom:1px solid var(--rule);text-align:right;font-weight:400}
.oo-eyet thead th{font:italic 400 17px/1 var(--serif);color:var(--soft)}
.oo-eyet tbody th{text-align:left;font:400 17px/1 var(--serif);display:flex;align-items:center;gap:10px}
.oo-eyet tbody th i{width:12px;height:12px;border-radius:2px;background:var(--c)}
.oo-eyet td.thin,.oo-eyet td.na{color:var(--faint)}

/* ---------- Train shelf ---------- */
.oo-shelf{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;width:100%;padding:16px 0 14px;text-align:left;transition:opacity .25s}
.oo-shelf:active{opacity:.6}
.oo-shelf .oo-mini{height:60px;width:calc(60px * var(--ar))}

/* ---------- the Mix games ---------- */
.oo-bar{display:block;width:min(72%,42dvh);height:2px;background:var(--ink);transform-origin:left}
.oo-bar.go{transition:transform var(--t,2s) linear;transform:scaleX(0)}
.oo-ostrip{position:relative;width:min(72%,300px);height:min(calc(100dvh - 370px),460px);touch-action:none}
.oo-oc{position:absolute;left:0;right:0;top:calc(var(--y) * 100% / var(--k));height:calc(100% / var(--k) - 3px);background:var(--c);border-radius:2px;transform:translateY(var(--dy,0));transition:top .26s var(--ease),transform .2s var(--ease),box-shadow .2s;touch-action:none}
.oo-oc.sel{outline:2px solid var(--ink);outline-offset:2px;z-index:1}
.oo-oc.drag{transition:top .26s var(--ease);z-index:2;box-shadow:0 14px 30px -10px rgba(0,0,0,.6);transform:translateY(var(--dy,0)) scale(1.04)}
.oo-oc.ring{outline:2px solid var(--good);outline-offset:2px}.oo-oc.miss{outline:2px solid var(--bad);outline-offset:2px}
.oo-rb{display:flex;flex-direction:column;gap:26px;width:100%}
.oo-slots,.oo-tray{display:flex;gap:6px;width:100%;min-height:calc((100% - 24px) / 5 / .75)}
.oo-slot,.oo-tray .oo-chip{flex:1;aspect-ratio:.75;background:var(--c);border-radius:var(--r-1)}
.oo-slot.empty{background:transparent;outline:1px dashed rgba(255,255,255,.55);outline-offset:-1px}
.oo-slot.ring{outline:2px solid var(--good);outline-offset:2px}.oo-slot.miss{outline:2px solid var(--bad);outline-offset:2px}
.oo-tray{min-height:84px}
.oo-chips{display:grid;gap:10px;width:min(100%,46dvh)}
.oo-chips.four{grid-template-columns:repeat(2,1fr)}
.oo-chips.five{grid-template-columns:repeat(6,1fr);width:100%}
.oo-chips.five .oo-chip{grid-column:span 2}
.oo-chips.five .oo-chip:nth-child(4){grid-column:2/4}.oo-chips.five .oo-chip:nth-child(5){grid-column:4/6}
.oo-chip{display:block;aspect-ratio:1;background:var(--c);border-radius:var(--r-1);transition:transform .3s var(--spring)}
.oo-chip:active{transform:scale(.94)}
.oo-chip.ring{outline:2px solid var(--good);outline-offset:3px}.oo-chip.miss{outline:2px solid var(--bad);outline-offset:3px}
.oo-chip.rip{animation:ooRip .6s var(--ease) var(--dl,0ms) both}
.oo-gone .oo-chip{background:transparent;outline:1px dashed rgba(255,255,255,.4);outline-offset:-1px}
.oo-imp{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;width:min(100%,50dvh)}
.oo-ic{display:flex;flex-direction:column;gap:8px;text-align:center}
.oo-ic i{display:block;aspect-ratio:1.15;background:var(--c);border-radius:var(--r-1)}
.oo-ic b{font:400 19px/1.1 var(--serif);color:var(--ink)}
.oo-ic.ring i{outline:2px solid var(--good);outline-offset:3px}.oo-ic.miss i{outline:2px solid var(--bad);outline-offset:3px}
.oo-nb{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.oo-nbc{display:block;width:min(64%,40dvh);aspect-ratio:1;background:var(--c);border-radius:var(--r-1);transition:opacity .18s}
.oo-nbc.gone{opacity:0}
.oo-nbn{font:500 13px/1 var(--mono);color:var(--soft)}
.oo-nbsum{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;width:100%}
.oo-nbsum span{display:block}
.oo-nbsum i{display:block;aspect-ratio:1;background:var(--c);border-radius:var(--r-1)}
.oo-nbsum .hit i{outline:2px solid var(--good);outline-offset:2px}
.oo-nbsum .miss i{outline:2px dashed var(--good);outline-offset:2px}
.oo-nbsum .fa i{outline:2px solid var(--bad);outline-offset:2px}
.oo-wh{width:100%}
.oo-whp{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;height:min(110px,14dvh)}
.oo-whp i{background:var(--c)}
.oo-whp i:first-child{border-radius:var(--r-1) 0 0 var(--r-1)}.oo-whp i:last-child{border-radius:0 var(--r-1) var(--r-1) 0}
.oo-who{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.oo-wo{display:flex;flex-direction:column;gap:9px;padding:13px 14px 12px;background:#F4F4F2;color:#141311;border-radius:var(--r-2);text-align:left;transition:transform .25s var(--spring)}
.oo-wo:active{transform:scale(.98)}
.oo-wo b{font:400 21px/1.05 var(--serif)}
.oo-ws{display:grid;grid-template-columns:repeat(12,1fr);gap:1px;height:16px}
.oo-ws i{background:var(--c)}
.oo-wo.ring{box-shadow:0 0 0 3px var(--good)}.oo-wo.miss{box-shadow:0 0 0 3px var(--bad)}
.oo-whose .drill-stage{align-items:flex-start}

/* ---------- a step inside another screen (GAME_STEPS) ---------- */
.oo-step{display:flex;flex-direction:column;gap:10px;width:100%;height:100%;min-height:0}
.oo-sq{font:400 32px/1 var(--serif);letter-spacing:-.02em;margin:0}
.oo-sstage{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.oo-sstage .oo-board{width:min(100%,46dvh,calc((100dvh - 380px) * var(--ar)))}
.oo-sfoot{min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}

/* ---------- craft pass: teach by doing, settle, streaks, level up, the miss that teaches ---------- */
/* a new kind of round nudges its answer after a quiet wait */
.oo-t.nudge{animation:ooNudge 1.6s var(--ease) infinite}
@keyframes ooNudge{0%,100%{transform:rotate(var(--rot,0deg)) scale(1)}45%{transform:rotate(var(--rot,0deg)) scale(.9)}}
.oo-hex.nudge{animation-name:ooNudgeH}
@keyframes ooNudgeH{0%,100%{transform:scale(.94)}45%{transform:scale(.84)}}
/* settle: the feedback line rises in after the impact */
.oo-in{animation:ooIn .42s var(--ease) .12s both}
@keyframes ooIn{from{opacity:0;transform:translateY(8px)}}
.oo-streak{font:italic 400 17px/1 var(--serif);color:#F2D78A;animation:ooStreak .6s var(--spring) both}
@keyframes ooStreak{0%{opacity:0;transform:scale(.7)}60%{opacity:1;transform:scale(1.08)}100%{transform:none}}
/* a miss shows the truth: the two colors side by side, labeled */
.oo-cmp{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:100%}
.oo-cmp span{display:flex;flex-direction:column;gap:6px}
.oo-cmp i{display:block;height:44px;background:var(--c)}
.oo-cmp span:first-child i{border-radius:var(--r-1) 0 0 var(--r-1)}.oo-cmp span:last-child i{border-radius:0 var(--r-1) var(--r-1) 0}
.oo-cmp em{font:italic 400 17px/1.2 var(--serif);color:var(--ink)}
.oo-cmp span:last-child em{text-align:right}
.oo-fb .eye-n{font-style:normal;color:var(--ink)}
.gy-miss-names{font-size:13px;line-height:1.4;color:var(--soft);margin-top:6px}
.oo-pair{display:flex;gap:2px}
.oo-pair i{width:22px;height:22px;background:var(--c)}
.oo-pair i:first-child{border-radius:var(--r-1) 0 0 var(--r-1)}.oo-pair i:last-child{border-radius:0 var(--r-1) var(--r-1) 0}
.oo-empty{margin-top:22px;max-width:36ch}
.oo-inbox{display:flex;flex-direction:column;width:100%;height:100%;min-height:0}
.oo-inbox .drill-stage{flex:1}
/* Across the line: names on the tiles after the tap, and the strip that shows where the word ends */
.oo-lwrap{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%}
.oo-line .drill-head h2 em{font-style:italic}
.oo-t .oo-tn{position:absolute;left:8px;right:8px;bottom:8px;font:400 16px/1.1 var(--serif);text-align:left;animation:ooIn .4s var(--ease) both}
.oo-tn[data-ink="dark"]{color:rgba(20,19,17,.82)}.oo-tn[data-ink="light"]{color:rgba(255,255,255,.9)}
.oo-lrev{width:min(100%,58dvh);min-height:52px}
.oo-lbar{position:relative;height:14px;border-radius:7px}
.oo-lbar b{position:absolute;top:-6px;bottom:-6px;width:2px;margin-left:-1px;background:#F4F4F2}
.oo-lbar i{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #F4F4F2}
.oo-lbar i.odd{box-shadow:0 0 0 2px var(--good),0 0 0 4px rgba(0,0,0,.25)}
.oo-lends{display:flex;justify-content:space-between;margin-top:10px;font:italic 400 17px/1.2 var(--serif);color:var(--ink)}
.oo-shotmode .oo-in,.oo-shotmode .oo-tn,.oo-shotmode .oo-streak,.oo-shotmode .oo-star.new i{animation:none!important}

/* Painters' pairs: two pair cards, then lifts, then three paintings that hold the winner */
.oo-pairsrun .drill-stage{align-items:flex-start}
.oo-pairs{display:flex;flex-direction:column;gap:12px;width:100%}
.oo-pc{display:grid;grid-template-columns:96px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:12px;background:#F4F4F2;color:#141311;border-radius:var(--r-2);text-align:left;transition:transform .25s var(--spring),box-shadow .25s}
.oo-pc:active{transform:scale(.98)}
.oo-pcs{grid-row:1/3;display:grid;grid-template-columns:1fr 1fr;height:64px}
.oo-pcs i{background:var(--c)}
.oo-pcs i:first-child{border-radius:var(--r-1) 0 0 var(--r-1)}.oo-pcs i:last-child{border-radius:0 var(--r-1) var(--r-1) 0}
.oo-pc b{font:400 21px/1.1 var(--serif)}
.oo-pc b em{font-style:italic;color:var(--paper-soft)}
.oo-pcl{font:italic 400 17px/1.3 var(--serif);color:var(--paper-soft);margin-top:4px}
.oo-pcl:empty{display:none}
.oo-pc.ring{box-shadow:0 0 0 3px var(--good)}.oo-pc.miss{box-shadow:0 0 0 3px var(--bad)}
.oo-pexh{font:italic 400 17px/1.3 var(--serif);color:var(--soft);margin:4px 0 8px}
.oo-pexr{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.oo-pp{display:flex;flex-direction:column;gap:4px;text-align:left;min-width:0}
.oo-pp img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-1);background:var(--booth-2)}
.oo-pp span{font:400 14px/1.2 var(--serif);color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.oo-pp em{font-style:normal;font-size:13px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oo-line .oo-board{width:min(100%,36dvh)}
.oo-line .drill-stage{align-items:flex-start}

/* the board takes the room the stage has: a taller foot (a miss shows both colors, a line, Next) shrinks it, never overlaps it */
@supports (width:1cqw){.oo-stage .oo-board{width:min(100cqw,100cqh * var(--ar));transition:width .35s var(--ease)}.oo-line .oo-stage .oo-board{width:min(100cqw,36dvh)}}
.oo-eye .fine,.oo-res .fine,.oo-jump .fine{font-size:14px}
.oo-nt em,.oo-eyet small,.ey-row small{overflow-wrap:anywhere}
.oo-eyet small,.ey-row small{display:block;font:400 13px/1.3 var(--sans);color:var(--faint)}
.oo-lvs{margin:10px 0 0}
.oo-dline{margin:0 0 12px}
@media (max-width:340px){.oo-head h2{font-size:36px;line-height:1;min-height:76px}}

/* For you / Choose: one compact control, the same on every game */
.oo-pk{margin:16px 0 4px}
.oo-pk-seg,.oo-pk-ch{display:flex;flex-wrap:wrap;gap:6px}
.oo-pk-seg button,.oo-pk-ch button{height:40px;padding:0 16px;border:1px solid var(--rule);border-radius:var(--r-pill);font:400 17px/1 var(--serif);color:var(--soft);background:none}
.oo-pk-seg button{flex:1}
.oo-pk-seg button.on,.oo-pk-ch button.on{background:var(--ink);border-color:var(--ink);color:#0E0D0B}
.oo-pk-ch{margin-top:8px}
.oo-pk-note{font:italic 400 17px/1.3 var(--serif);color:var(--soft);margin:10px 0 0;text-wrap:pretty}
.oo-jumpnote{margin:6px 0 0}
.oo-jump{padding:4px 0 8px}
.oo-jump .note{margin:6px 0 16px}

/* ---------- Odd one out sessions: the progress bar, dense grids, names on tiles ---------- */
.oo-prog{flex:1;height:4px;margin:0 14px;border-radius:2px;background:var(--rule);overflow:hidden}
.oo-prog i{display:block;height:100%;width:var(--w);background:var(--ink);border-radius:2px;transition:width .4s var(--ease)}
/* a single disclosure for the end-of-session chart, stats and misses (David, 2026-10-09: one headline, one
   sentence, Play again / Keep going -- everything else moves one tap down, matching .aw-more elsewhere) */
.oo-more{border-top:1px solid var(--rule);margin-top:18px}
.oo-more>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:50px;padding:14px 0;font:400 20px/1.15 var(--serif);color:var(--ink)}
.oo-more>summary::-webkit-details-marker{display:none}
.oo-more>summary::after{content:"+";font:400 22px/1 var(--sans);color:var(--soft);flex:none}
.oo-more[open]>summary::after{content:"–"}
.oo-more[open]{padding-bottom:4px}
.oo-dense .oo-t{border-radius:2px}
.oo-dense .oo-t.ring,.oo-dense .oo-t.miss,.oo-dense .oo-t.sel{outline-width:2px;outline-offset:1px;z-index:1}
.oo-t .oo-tn{font-size:17px;line-height:1.15;pointer-events:none}
.oo-t .oo-tn em{display:block;font:400 17px/1.2 var(--sans);font-style:normal;opacity:.85;margin-top:2px}
.oo-sres h1 em{font-style:normal;color:#F2D78A}
.oo-rp{font:500 15px/1 var(--mono);color:var(--soft);text-align:right}

/* ---------- the simple game (2026-10-10): one screen, a growing grid, Arcade/Zen, gradient boards, the timer ---------- */
.oo-zenpill{height:30px;padding:0 14px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--soft);font:italic 400 15px/1 var(--serif);transition:background .2s,color .2s;margin-right:-6px}
.oo-zenpill.on{background:var(--ink);color:var(--ground,#0E0D0B)}
.oo-ztally{flex:1;font:500 15px/1 var(--mono);color:var(--soft);text-align:center}
/* the per-round timer: a thin bar above the board that empties over the round's time limit */
.oo-tlimit{display:block;width:100%;height:3px;border-radius:2px;background:var(--ink);transform-origin:left;margin-bottom:10px}
.oo-tlimit.go{transition:transform var(--t,4s) linear;transform:scaleX(0)}
@media (prefers-reduced-motion:reduce){.oo-tlimit.go{transition:none;transform:scaleX(0)}}
/* the end screen: three small bars, hue / saturation / value, against where this run started */
.oo-ebars{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.oo-ebar{display:grid;grid-template-columns:76px 1fr auto;align-items:center;gap:10px}
.oo-ebar span{font:400 15px/1 var(--sans);color:var(--soft)}
.oo-ebar i{display:block;height:6px;border-radius:3px;background:var(--rule);position:relative;overflow:hidden}
.oo-ebar i::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--ink);border-radius:3px;transition:width .5s var(--ease)}
.oo-ebar b{font:500 15px/1 var(--mono);color:var(--ink);text-align:right}
.oo-ebar em{display:block;font-style:normal;font-size:12px;color:var(--soft);text-align:right;grid-column:3;margin-top:2px}
/* TRUE full screen (David, 2026-10-11, then refined): only colors, edge to edge, under the status bar and home
   indicator too. No title, no counter, no always-visible buttons during play -- one subtle pause mark is the
   only control; everything else lives behind it. See the "pause" block below for the mark/menu. */
.oo-simple{padding:0}
.oo-simple .drill-head{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.oo-simple .drill-stage{position:fixed;inset:0;padding:0;align-items:stretch;justify-content:stretch;z-index:1}
.oo-simple .drill-foot{display:none}
.oo-board.oo-full{position:relative;width:100%;height:100%;aspect-ratio:auto}
/* Board: Square (David, live-build bug: "very tall rectangular tiles... I don't like this tall shape" --
   screenshotted at 9x9). The stretch above is only correct for the Full-screen board (oo-full fills the fixed
   viewport edge to edge on purpose); stretching a Square round's own centered, aspect-ratio-1 box to the same
   full viewport height broke its square shape outright -- a flex item's definite width plus a forced stretched
   height no longer agree, so the box (and every tile inside it, all percentage-positioned against that box)
   stopped being square. oo-stage-square (js/games/oo-ui.js, set whenever r.full === false) swaps the stretch
   back to centering, and the Square board sizes itself as a real square that fits the viewport on every side. */
.oo-simple .drill-stage.oo-stage-square{align-items:center;justify-content:center}
.oo-simple .oo-board:not(.oo-full){width:min(calc(100% - 32px),calc(100dvh - 32px));aspect-ratio:1;margin:0;flex:none;border-radius:20px;overflow:hidden}
.oo-full .oo-t{border-radius:0}
/* a hairline seam (David, 2026-10-11: "without cell outlines the game feels a bit off") -- not a gap, just a
   soft inset shade so tiles read as tiles while the field stays one continuous surface */
.oo-full .oo-t{box-shadow:inset 0 0 0 .5px rgba(0,0,0,.16),inset 0 0 0 1px rgba(255,255,255,.035)}
/* the tapped/correct marks, INSET instead of the app-wide outline+offset (David, 2026-10-11: "the outline is
   broken" -- on this gapless, edge-to-edge board, an outline's positive offset pushes the stroke out into the
   NEXT tile's own painted box, which is a separate sibling element and so clips or fully covers it depending on
   paint order). An inset box-shadow is painted entirely inside the tile's own box, so it can never be clipped by
   a neighbor regardless of DOM order, transform or the ripple/flip transition running at the same time. */
.oo-full .oo-t.sel{outline:none;box-shadow:inset 0 0 0 3px var(--ink)}
.oo-full .oo-t.ring{outline:none;box-shadow:inset 0 0 0 3px var(--good)}
.oo-full .oo-t.miss{outline:none;box-shadow:inset 0 0 0 3px var(--bad)}
.oo-full .oo-t.same{outline:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.75)}
/* TRUE full-bleed (David, 2026-10-11: "remove the blurry background layer... full width... full height too --
   into the curved corners"): no inset, no second blurred layer. Reachability under the notch/home indicator/
   corners is handled at the round-generation level instead (ooSafeIdx in oo-engine.js never places the odd
   tile there), so the board can stay genuinely edge to edge. */
.oo-board.oo-settle{transition:transform .35s var(--ease),opacity .35s var(--ease);transform:scale(.93);opacity:.5}
@media (prefers-reduced-motion:reduce){.oo-board.oo-settle{transition:none}}
/* the per-round timer: a true hairline pinned to the absolute top viewport edge, never a bar inside the layout */
.oo-simple .oo-tlimit{position:fixed;top:0;left:0;right:0;z-index:7;height:2px;margin:0;border-radius:0}
.oo-simple .oo-tlimit.oo-tpaused{transition:none!important}

/* ---------- the pause mark + menu (David, refinement: "ONE subtle control" instead of separate exit/edit/
   settings buttons) -- a tiny glyph, always present, that opens a centered Night Gallery card over a dimmed,
   blurred field: Resume, Zen/Arcade, Settings, Exit. A swipe down from the top edge opens the same menu. ---------- */
/* David, live-build feedback: "setting button also looks weird" -- the old "- -" (two thin mix-blend-mode
   bars) read as a stray dash, not a control. A proper iOS-style floating glyph: a frosted, translucent round
   button (36px visible, inside the existing 44px hit area, safe-area positioned) with a plain white pause
   glyph. Frosted dark glass (not mix-blend-mode) reads reliably on any gradient underneath -- light or dark --
   because it supplies its own contrast instead of inverting whatever's behind it. */
.oo-pause-mark{position:fixed;top:calc(var(--top) + 10px);left:calc(var(--left) + 10px);z-index:8;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:transparent;border:0}
.oo-pause-mark::before{content:"";position:absolute;width:36px;height:36px;border-radius:50%;background:rgba(18,17,15,.4);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.16);box-shadow:0 1px 5px rgba(0,0,0,.2)}
.oo-pause-mark i{position:relative;width:3.5px;height:13px;border-radius:2px;background:#fff;opacity:.95}
.oo-pause-mark i+i{margin-left:5px}
.oo-pause-hint{position:fixed;top:calc(var(--top) + 14px);left:calc(var(--left) + 56px);z-index:8;padding:7px 12px;border-radius:var(--r-pill);background:rgba(20,19,17,.82);color:#ECE8DF;font:italic 400 14px/1 var(--serif);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.oo-pause-hint.on{opacity:1}
.oo-pausefield{position:fixed;inset:0;z-index:9;background:rgba(10,10,8,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.oo-pausefield.on{opacity:1;pointer-events:auto}
.oo-pausecard{position:fixed;left:50%;top:50%;z-index:10;width:min(86%,360px);padding:28px 24px calc(var(--bottom) + 24px);border-radius:var(--r-3);background:var(--surface-1);border:1px solid rgba(236,232,223,.1);box-shadow:0 30px 60px -20px rgba(0,0,0,.6);text-align:center;transform:translate(-50%,-50%) scale(.94);opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--spring)}
.oo-pausecard.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.oo-pausecard .eyebrow{margin:0 0 4px}
.oo-pausecard h2{font:400 26px/1.15 var(--serif);margin:0 0 18px;color:var(--ink)}
.oo-pausecard .btn{width:100%;margin-bottom:10px}
.oo-pausecard .oo-zenpill{display:block;width:100%;margin:0 0 18px;height:36px}
.oo-pset{display:flex;flex-direction:column;gap:2px;margin-bottom:18px;border-radius:var(--r-2);overflow:hidden;background:var(--surface-2)}
.oo-pset .item{text-align:left;padding:13px 16px;font:400 16px/1.2 var(--sans);color:var(--ink);background:transparent;border-bottom:1px solid rgba(236,232,223,.08);display:flex;justify-content:space-between;align-items:center}
.oo-pset .item:last-child{border-bottom:0}
@media (prefers-reduced-motion:reduce){.oo-pausefield,.oo-pausecard{transition:none}}
/* the card never runs off a short phone: it scrolls inside itself (the "Play with…" search can be long) */
.oo-pausecard{max-height:calc(100dvh - var(--top) - var(--bottom) - 24px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* ---------- "Play with…" (js/games/oo-with.js): one painter's / movement's / look's colors, a painting a round ---------- */
.oo-with-open{width:100%;display:flex;align-items:center;gap:8px;margin:0 0 18px;padding:13px 16px;border-radius:var(--r-2);background:var(--surface-2);color:var(--ink);font:400 16px/1.2 var(--sans);text-align:left}
.oo-with-open small{flex:1;text-align:right;font-size:14px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oo-with-head{display:flex;align-items:center;gap:6px;margin:-8px 0 14px -10px}
.oo-with-head h2{margin:0 !important;font:400 26px/1.15 var(--serif);color:var(--ink)}
.oo-with-q{width:100%;height:46px;padding:0 16px;border-radius:var(--r-2);border:1px solid rgba(236,232,223,.14);background:var(--surface-2);color:var(--ink);font:400 17px/1 var(--sans);margin:0 0 12px;-webkit-appearance:none;appearance:none}
.oo-with-q::placeholder{color:var(--soft)}
.oo-with-q:focus{outline:2px solid var(--ink);outline-offset:1px}
.oo-with-list{display:flex;flex-direction:column;gap:2px;text-align:left;min-height:120px}
.oo-with-note{font:400 15px/1.35 var(--sans);color:var(--soft);margin:2px 2px 10px;text-align:left}
.oo-with-row{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:9px 12px;border-radius:var(--r-2);background:transparent;color:var(--ink);text-align:left;transition:background .15s}
.oo-with-row:active,.oo-with-row:hover{background:var(--surface-2)}
.oo-with-row svg{flex:none;color:var(--soft)}
.oo-with-row.busy{opacity:.65}
.oo-with-all{background:var(--surface-2);margin:0 0 10px}
.oo-with-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.oo-with-txt b{font:400 17px/1.2 var(--sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oo-with-txt small{font:400 14px/1.2 var(--sans);color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oo-with-dots{flex:none;display:flex}
.oo-with-dots i{width:18px;height:18px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--surface-1)}
.oo-with-dots i+i{margin-left:-6px}
.oo-with-title{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 16px;color:var(--ink)}
.oo-with-title b{font:400 22px/1.15 var(--serif)}
.oo-with-title small{flex-basis:100%;font:400 15px/1.3 var(--sans);color:var(--soft)}
.oo-pregame .oo-with-dots i{box-shadow:0 0 0 2px rgba(10,10,8,.9)}
/* the end screen's mosaic: the paintings played through, each with its own measured strip; a missed one is dimmer */
.oo-wmosaic{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;margin:18px 0 6px}
.oo-wm{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--c);padding:0;border:0}
.oo-wm img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.oo-wm-strip{position:absolute;left:0;right:0;bottom:0;height:7px;display:flex}
.oo-wm-strip i{flex:1;background:var(--c)}
.oo-wm-miss{opacity:.45}
.oo-wm-half{opacity:.75}
.oo-wm:active{transform:scale(.96)}
.oo-wres .fine{margin-top:10px}
.oo-wedge{font:400 16px/1.35 var(--sans);color:var(--soft);margin:18px 0 0}
/* the size picker (David, 2026-10-11, final word: a few fixed chips, not a continuous range -- "maybe the user
   selects the size before the game"), shared by the pre-game sheet and the pause menu. */
.oo-sizepicker{margin-bottom:18px;text-align:left}
/* David, live-build feedback: "make sure the size control is clearly visible" -- Square now offers 7 chips
   (3x3..9x9). Equal-flex division squeezed every chip as more were added, so the row scrolls horizontally at a
   comfortable fixed chip width instead (5 or fewer chips -- Full screen's usual count -- still read as one full
   row with no visible scrollbar needed on a phone). */
.oo-sizechips{display:flex;gap:8px;margin-bottom:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.oo-sizechips::-webkit-scrollbar{display:none}
.oo-sizechip{flex:0 0 58px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:var(--r-2);background:var(--surface-2);transition:background .2s,transform .2s var(--spring)}
.oo-sizechip.on{background:var(--ink)}
.oo-sizechip:active{transform:scale(.94)}
.oo-sizeicon{display:grid;grid-template-columns:repeat(var(--gc,3),5px);gap:2px}
.oo-sizeicon i{width:5px;height:5px;border-radius:1px;background:var(--soft)}
.oo-sizechip.on .oo-sizeicon i{background:var(--ground,#0E0D0B)}
.oo-sizechip em{font:500 12px/1 var(--mono);font-style:normal;color:var(--soft)}
.oo-sizechip.on em{color:var(--ground,#0E0D0B)}
.oo-sizegrow{width:100%;border-radius:var(--r-2)}
/* the pre-game sheet: the real board (at the last-used size) is already rendered and visible behind it -- this
   just sits over the bottom, a light choice, not a setup screen (David, 2026-10-11) */
.oo-pregame{position:fixed;inset:0;z-index:6;display:flex;align-items:flex-end;background:linear-gradient(180deg,transparent 0%,rgba(10,10,8,.55) 55%,rgba(10,10,8,.82) 100%)}
.oo-pregame-sheet{width:100%;padding:20px 20px calc(var(--bottom) + 20px)}
.oo-pregame-play{width:100%}

/* ---------- the reveal (2026-10-11, redesigned around how a difference is actually seen and learned): the
   field color fills the screen; the odd color sits as a centered Albers-style inset square, where a subtle
   difference reads far better than across a split. Names sit together right under the inset -- the odd one
   large, the field one small and subordinate. A "see it" strip makes the direction word visible, not just read.
   The source is one small truncated line at the very bottom. Tap anywhere (not the inset/names/source) moves on. */
.oo-reveal2{position:fixed;inset:0;z-index:11;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--c);padding:0 24px}
.oo-reveal2.oo-in{animation:ooRevealIn .32s var(--ease) both}
@keyframes ooRevealIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.oo-reveal2.oo-in{animation:none}}
.oo-reveal2[data-ink="dark"]{color:#141311}.oo-reveal2[data-ink="light"]{color:#fff}
.oo-rv2-inset{width:min(46vw,220px);aspect-ratio:1;border-radius:22px;background:var(--c);border:0;padding:0;box-shadow:0 18px 44px -14px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.06)}
/* a multi-odd round (opt-in Settings toggle) shows every odd color, not just the first */
.oo-rv2-insets{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:90%}
.oo-rv2-inset-m{width:min(30vw,130px)}
.oo-rv2-namesm{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-bottom:4px}
.oo-rv2-names{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.oo-rv2-oddname{display:flex;flex-direction:column;align-items:center;gap:2px;background:transparent;border:0;padding:2px}
.oo-rv2-oddname b{font:400 26px/1.15 var(--serif)}
.oo-rv2-oddname em{font:500 13px/1 var(--mono);opacity:.72;font-style:normal}
.oo-rv2-fieldname{background:transparent;border:0;padding:2px;font:italic 400 15px/1.2 var(--serif);opacity:.68}
.oo-rv2-diffrow{display:flex;flex-direction:column;align-items:center;gap:10px}
.oo-rv2-diff{margin:0;font:italic 400 16px/1.25 var(--serif);text-align:center;opacity:.9}
.oo-rv2-see{display:flex;gap:3px;border-radius:var(--r-1);overflow:hidden;height:22px}
.oo-rv2-see i{width:30px;height:100%;background:var(--c)}
.oo-rv2-hint{position:absolute;left:50%;bottom:calc(var(--bottom) + 46px);transform:translateX(-50%);margin:0;font:italic 400 14px/1 var(--serif);opacity:.6;animation:ooHintFade 2.6s var(--ease) both}
@keyframes ooHintFade{0%,70%{opacity:.6}100%{opacity:0}}
.oo-rv2-src{position:absolute;left:16px;right:16px;bottom:calc(var(--bottom) + 14px);margin:0;font:italic 400 13px/1.2 var(--serif);opacity:.55;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:underline;text-underline-offset:3px;background:transparent;border:0}
.oo-rv2-src:disabled{text-decoration:none}
.oo-rv2-end{position:absolute;left:50%;top:calc(var(--top) + 22px);transform:translateX(-50%);z-index:1;margin:0;font:italic 400 15px/1 var(--serif);opacity:.85}
@media (prefers-reduced-motion:reduce){.oo-rv2-hint{animation:none;opacity:.6}}

/* ---------- the motion language (2026-10-11), built around the ripple: a melting round change, a settling or
   dividing entrance, the odd tile resolving into its true color, streak shimmer/bloom, a shake and a glow pulse,
   the reveal halves growing out of their own tiles. Everything here is transform/opacity/filter only (60fps,
   no layout thrash) and every rule below is switched off under prefers-reduced-motion. ---------- */
/* the round transition, rebuilt from scratch (David, 2026-10-11, "one simple, robust model"): the NEXT board is
   fully computed and rendered at its real, final position before any animation runs (ooAsk already does this
   synchronously). The OLD board is a single static snapshot (one clone, not per-tile), laid on top at its own
   final rect, and the only thing that ever animates is that one layer's opacity, optionally revealed through a
   radial mask growing from the tapped tile. There is no transform/scale/blur on the ghost any more -- those
   made two layers blend into visibly wrong intermediate colors while both were partially visible, which is what
   read as "a different arrangement, then it snaps". Nothing here ever triggers layout (opacity + mask only).
   Removed on finish (ooGhostCleanup); only one is ever alive (OO_GHOST). */
/* a plain opacity fade only -- no transform, no scale, no per-tile stagger, nothing that could read as a
   "layout changing" while two layers are both partly visible. A radial mask growing from the tapped tile was
   tried here too, but animating its radius needs the mask's custom property registered via @property to
   interpolate smoothly at all (unregistered custom properties don't animate -- they'd jump straight from 0% to
   full, which is exactly the "snap" this rebuild exists to remove), and @property's support is still uneven
   enough on exactly the engine (WebKit/Safari) this needs to be bulletproof on that it isn't worth the risk for
   a decorative flourish the spec itself called optional. A same-size round and a level-step round use the same
   fade; the level-step additionally gets the new board's own "divide" entrance (ooEnterBoard) for its moment. */
.oo-ghost{pointer-events:none;opacity:1;transition:opacity .3s linear}
.oo-ghost.oo-ghost-out{opacity:0}
.oo-t.oo-settle-in{animation:ooSettleIn .4s var(--spring) both;animation-delay:var(--dl,0ms)}
@keyframes ooSettleIn{from{transform:scale(.72);opacity:0}to{transform:scale(1);opacity:1}}
.oo-t.oo-divide-in{animation:ooDivideIn .48s var(--spring) both;animation-delay:var(--dl,0ms)}
@keyframes ooDivideIn{0%{transform:scale(.35);opacity:0}55%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}
.oo-t.oo-resolve{transition:background-color .5s var(--ease)}
.oo-t.oo-shimmer-t{animation:ooShimmerTile .6s var(--ease) var(--sdl,0ms)}
@keyframes ooShimmerTile{50%{filter:brightness(1.4) saturate(1.1)}}
.oo-board.oo-bloom{animation:ooBloom 1.4s var(--ease)}
@keyframes ooBloom{0%{filter:brightness(1)}38%{filter:brightness(1.22)}100%{filter:brightness(1)}}
.oo-simple .oo-t.miss{animation:ooShake .32s var(--ease)}
@keyframes ooShake{15%,45%,75%{transform:translateX(-4px)}30%,60%,90%{transform:translateX(4px)}100%{transform:translateX(0)}}
.oo-simple .oo-t.ring{animation:ooGlowPulse .55s var(--ease)}
/* inset throughout (matches the gapless board's own inset ring above -- David, 2026-10-11, "the outline is
   broken"): the glow itself is a DROP shadow (unavoidably outward, it's a glow) layered after the inset ring, so
   it can still bleed into a neighbor without clipping anything -- only the crisp ring stroke has to stay inset */
@keyframes ooGlowPulse{0%{box-shadow:inset 0 0 0 3px var(--good)}50%{box-shadow:inset 0 0 0 3px var(--good),0 0 14px 5px var(--good)}100%{box-shadow:inset 0 0 0 3px var(--good)}}
@media (prefers-reduced-motion:reduce){
  .oo-ghost{display:none}
  .oo-t.oo-settle-in,.oo-t.oo-divide-in,.oo-t.oo-shimmer-t,.oo-board.oo-bloom,.oo-simple .oo-t.miss,.oo-simple .oo-t.ring{animation:none}
  .oo-t.oo-resolve{transition:none}
}