:root{--wood-light:#c9955a;--wood-mid:#b07a42;--wood-dark:#8a5a2c;--well-deep:#3a2210;--well-rim:#5e3b1c;--red-1:#c25a45;--red-2:#99342a;--red-3:#62201a;--blue-1:#5a86b0;--blue-2:#365b86;--blue-3:#213a58;--oq-focus:#fff1c2;--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.11' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.25 0 0 0 0 0.13 0 0 0 0 0.04 1.7 0 0 0 -0.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");--speckle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.1 0 0 0 0 0.05 0 0 0 0 0.02 0 0 0 1.6 -0.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E")}.oq{padding-block:clamp(2rem,6vw,4rem)}.wrap.oq{max-width:76rem}.oq h1{margin-bottom:.3em;font-size:clamp(2.2rem,7vw,3.8rem)}.oq h2{color:var(--brass);font-size:clamp(1.5rem,4vw,2rem)}.oq__head{max-width:46rem;margin-bottom:clamp(1.5rem,4vw,2.5rem)}.oq__intro{max-width:46rem}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.oq__game{flex-direction:column;display:flex}.oq-setup{background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius);flex-wrap:wrap;align-items:flex-end;gap:1rem 1.75rem;margin-bottom:1.5rem;padding:1rem 1.25rem;display:flex}.oq-setup[hidden],.oq-setup [hidden]{display:none}.oq-setup__rows{flex-direction:column;gap:.75rem;display:flex}.oq-setup__row{flex-wrap:wrap;align-items:center;gap:.75rem 1.75rem;display:flex}.oq-setup__group{border:0;flex-wrap:wrap;align-items:center;gap:.35rem;min-width:0;margin:0;padding:0;display:flex}.oq-setup__group legend{float:left;font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);margin-right:.6rem;padding:0;font-size:.78rem}.seg{display:inline-block;position:relative}.seg input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.seg span{border:1px solid var(--line-strong);background:var(--bg);min-height:2.5rem;color:var(--ink);cursor:pointer;border-radius:999px;padding:.45rem .85rem;font-size:.95rem;line-height:1.5rem;transition:background-color .15s,color .15s;display:inline-block}.seg:hover span{border-color:var(--brass)}.seg input:checked+span{background:var(--button-bg);color:var(--button-ink);border-color:var(--button-bg)}.seg input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}.oq-setup__actions{align-items:center;gap:1rem;margin-left:auto;display:flex}.oq-setup__actions .button{font:inherit;cursor:pointer;border:0;min-height:2.75rem;font-weight:600}.seg input:disabled,.seg input:disabled+span{cursor:not-allowed}.seg input:disabled+span{opacity:.6}.oq__status[data-turn=idle]:before{display:none}.oq__top{justify-content:center;align-items:center;min-height:4.6rem;margin-bottom:1rem;display:flex}.oq__status{font-family:var(--font-display);text-align:center;color:var(--ink);max-width:none;margin:0;font-size:clamp(1.25rem,3.5vw,1.6rem)}.oq__status:before{content:"";vertical-align:-.05em;background:0 0;border-radius:50%;width:.8em;height:.8em;margin-right:.5em;display:inline-block}.oq__status[data-turn="1"]:before{background:radial-gradient(circle at 35% 30%, var(--red-1), var(--red-2) 70%)}.oq__status[data-turn="2"]:before{background:radial-gradient(circle at 35% 30%, var(--blue-1), var(--blue-2) 70%)}.oq__status:not([data-turn=""]):before{box-shadow:0 1px 2px #0006}.oq__status[data-turn=""]{display:none}.oq__table{grid-template-columns:minmax(8rem,1fr) minmax(0,32rem) minmax(8rem,1fr);grid-template-areas:"red board blue";place-items:center;gap:clamp(1rem,3vw,2.5rem);min-height:20rem;display:grid}.pile--red{grid-area:red}.pile--blue{grid-area:blue}.oq__boardwrap{grid-area:board;width:100%}.pile{text-align:center;width:100%;max-width:17rem}.pile__heap{isolation:isolate;aspect-ratio:100/80;background:radial-gradient(ellipse at 50% 85%, #00000059, transparent 60%), var(--grain), linear-gradient(180deg, var(--wood-mid), var(--wood-dark));border:2px solid #0000;border-radius:50%;width:100%;margin-bottom:.4rem;transition:border-color .25s,box-shadow .25s;position:relative;box-shadow:inset 0 6px 14px #0000008c,inset 0 -3px 5px #ffe6be2e,0 6px 14px #28190a59}.pile.is-active .pile__heap{border-color:var(--brass);box-shadow:inset 0 6px 14px #0000008c, inset 0 -3px 5px #ffe6be2e, 0 0 0 3px color-mix(in srgb, var(--brass) 35%, transparent), 0 6px 14px #28190a59}.pile__heap .ball{aspect-ratio:1;position:absolute;transform:translate(-50%,-50%)}.oq__table:not(.is-ready) .pile__heap .ball,.ball.is-gone{visibility:hidden}.pile__label{color:var(--ink-muted);margin:0;font-size:.95rem;line-height:1.35}.pile__name{font-family:var(--font-display);color:var(--ink);font-size:1.2rem;font-weight:600;display:block}.pile--red .pile__name{color:var(--red-2)}.pile--blue .pile__name{color:var(--blue-2)}:root[data-theme=dark] .pile--red .pile__name{color:#e08a78}:root[data-theme=dark] .pile--blue .pile__name{color:#8db4dc}.pile__count{white-space:nowrap}.oq__bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem;min-height:2.5rem;margin:0 0 .75rem;display:flex}.oq-view{border:0;gap:.35rem;margin:0 0 0 auto;padding:0;display:flex}.oq-view[hidden],.oq-cam[hidden],.oq-notice[hidden]{display:none}.oq-cam{flex-wrap:wrap;gap:.35rem;display:flex}.chip{font:inherit;border:1px solid var(--line-strong);background:var(--bg);min-height:2.5rem;color:var(--ink);cursor:pointer;border-radius:999px;padding:.4rem .85rem;font-size:.9rem}.chip:hover{border-color:var(--brass)}.chip[aria-pressed=true]{background:var(--button-bg);color:var(--button-ink);border-color:var(--button-bg)}.chip:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.oq-notice{color:var(--ink-muted);background:var(--bg-raised);border:1px dashed var(--line-strong);border-radius:var(--radius);flex-basis:100%;order:3;max-width:none;margin:0;padding:.4rem .75rem;font-size:.88rem}.oq__boardwrap{position:relative}.oq-stage{aspect-ratio:2.3;touch-action:pan-x pan-y;border-radius:.8rem;width:100%;position:relative;overflow:hidden}.oq-stage[hidden]{display:none}.oq-stage[data-loading]:after{content:attr(data-loading);color:var(--ink-muted);place-items:center;font-size:.95rem;display:grid;position:absolute;inset:0}html:not(.no-js) .oq-setup[hidden],html:not(.no-js) .oq-view[hidden]{visibility:hidden;display:flex}.oq-stage canvas{touch-action:pan-x pan-y;outline:none;width:100%;height:100%;display:block}.oq__table.is-3d{grid-template-columns:1fr 1fr;grid-template-areas:"board board""red blue";align-items:start;row-gap:1rem}.oq__table.is-3d .oq__boardwrap{justify-self:center;max-width:64rem}.oq__table.is-3d .pile__heap{display:none}.oq__table.is-3d .pile{max-width:14rem}.oq__table.is-3d .oq__boardwrap>.oq-board{clip-path:inset(50%);width:1px;height:1px;box-shadow:none;padding:0;position:absolute;overflow:hidden}.oq-board{--pad:4.5%;aspect-ratio:1;background:var(--grain), repeating-linear-gradient(90deg, #5a34141a 0 2px, transparent 2px 23px), linear-gradient(115deg, var(--wood-light), var(--wood-mid) 45%, var(--wood-light) 70%, var(--wood-mid));border-radius:1.1rem;width:100%;position:relative;overflow:visible;box-shadow:inset 0 0 0 2px #ffe4b447,inset 0 0 0 5px #3c210c59,inset 0 0 22px #3c210c59,0 3px #6d4521,0 14px 30px #2d1c0a66}:root[data-theme=dark] .oq-board{filter:brightness(.82)}.oq-board__grid{inset:var(--pad);grid-template-columns:repeat(var(--n,6), minmax(0, 1fr));grid-template-rows:repeat(var(--n,6), minmax(0, 1fr));display:grid;position:absolute}.oq-cell{cursor:pointer;-webkit-tap-highlight-color:transparent;width:100%;min-width:0;height:100%;min-height:0;font:inherit;background:0 0;border:0;border-radius:50%;margin:0;padding:0;position:relative}.oq-cell:before{content:"";background:radial-gradient(circle at 50% 36%, var(--well-deep) 0%, #4a2d15 55%, var(--well-rim) 100%);border-radius:50%;position:absolute;inset:9%;box-shadow:inset 0 4px 6px #000000a6,inset 0 -1px 2px #ffe1af2e,0 1px #ffe6be61,0 -1px #321c084d}.oq-cell:focus-visible{outline:3px solid var(--oq-focus);outline-offset:-2px;z-index:2;box-shadow:0 0 0 5px #281405bf}.oq-cell[aria-disabled=true]{cursor:default}.oq-cell .ball{position:absolute;inset:11%}.oq-cell .ball.is-new{animation:.28s cubic-bezier(.3,1.4,.5,1) oq-drop}@media (hover:hover){.oq-board.is-live .oq-cell:not([data-owner]):hover:after{content:"";opacity:.6;pointer-events:none;background:radial-gradient(circle at 36% 30%, var(--c1), var(--c2) 75%);border-radius:50%;position:absolute;inset:11%}}.oq-board[data-turn="1"]{--c1:var(--red-1);--c2:var(--red-2)}.oq-board[data-turn="2"]{--c1:var(--blue-1);--c2:var(--blue-2)}.oq-board__hint{z-index:3;text-align:center;width:max-content;max-width:80%;font-family:var(--font-display);color:#fff4c8;opacity:0;visibility:hidden;pointer-events:none;background:#281608eb;border:1px solid #d4a95c;border-radius:.6rem;padding:.7rem 1.2rem;font-size:clamp(1rem,3.5vw,1.35rem);font-weight:600;line-height:1.3;transition:opacity .2s,visibility .2s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 8px 24px #00000073}.oq-board__hint.is-visible{opacity:1;visibility:visible}.oq-setup__actions .button.is-nudge{animation:.9s ease-out oq-nudge}@keyframes oq-nudge{0%,to{box-shadow:0 0 #0000}30%{box-shadow:0 0 0 6px color-mix(in srgb, var(--brass) 55%, transparent);transform:scale(1.06)}}.oq-board__lines{pointer-events:none;z-index:1;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.oq-board__line,.oq-board__glow{fill:none;stroke:#fff4c8;stroke-width:.075px;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;animation:.9s ease-out oq-draw}.oq-board__glow{stroke:#2814008c;stroke-width:.15px}.oq-cell.is-win .ball{animation:1.2s ease-in-out .5s 3 oq-pulse;box-shadow:0 0 0 2px #fff4c8,0 0 12px 2px #ffe696cc,inset -2px -3px 5px #00000059}.oq__keys-touch,.oq__keys-3d-pointer,.oq__keys-3d-touch{display:none}@media (hover:none) and (pointer:coarse){.oq__keys-pointer{display:none}.oq__keys-touch{display:inline}}.is-3d .oq__keys-pointer,.is-3d .oq__keys-touch{display:none}.is-3d .oq__keys-3d-pointer{display:inline}@media (hover:none) and (pointer:coarse){.is-3d .oq__keys-3d-pointer{display:none}.is-3d .oq__keys-3d-touch{display:inline}}.oq__keys{color:var(--ink-muted);max-width:none;margin:.9rem 0 0;font-size:.85rem}.ball{--c1:var(--red-1);--c2:var(--red-2);--c3:var(--red-3);background:radial-gradient(circle at 33% 27%, #ffffff4d 0, #ffffff12 20%, transparent 38%), radial-gradient(circle at 70% 80%, #0000004d, transparent 55%), radial-gradient(circle at 42% 36%, var(--c1), var(--c2) 68%, var(--c3));filter:hue-rotate(var(--hue,0deg)) brightness(var(--lum,1));border-radius:50%;display:block;position:relative;overflow:hidden;box-shadow:inset -2px -3px 5px #00000059,0 2px 3px #00000073}.ball--blue{--c1:var(--blue-1);--c2:var(--blue-2);--c3:var(--blue-3)}.ball:before{content:"";transform:rotate(var(--rot,0deg));background:var(--speckle);opacity:.35;mix-blend-mode:multiply;background-size:120% 120%;border-radius:50%;position:absolute;inset:0}.ball:after{content:"";background:radial-gradient(ellipse 22% 14% at var(--w1x,30%) var(--w1y,30%), rgba(222, 190, 140, var(--wear,.4)), transparent 100%), radial-gradient(ellipse 12% 18% at var(--w2x,70%) var(--w2y,60%), rgba(222, 190, 140, calc(var(--wear,.4) * .8)), transparent 100%);border-radius:50%;position:absolute;inset:0}.ball--ghost{aspect-ratio:1;z-index:1000;pointer-events:none;will-change:transform;position:fixed;top:0;left:0;box-shadow:inset -2px -3px 5px #00000059,0 8px 12px #00000059}.oq__result{background:var(--bg-raised);border:1px solid var(--brass);border-radius:var(--radius);max-width:34rem;box-shadow:var(--shadow);flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem 1.5rem;margin:0;padding:.55rem 1.1rem;display:flex}.oq__result[hidden]{display:none}.oq__result-text{font-family:var(--font-display);max-width:none;margin:0;font-size:clamp(1.4rem,4vw,1.9rem);font-weight:600}.oq__result[data-winner="1"] .oq__result-text{color:var(--red-2)}.oq__result[data-winner="2"] .oq__result-text{color:var(--blue-2)}:root[data-theme=dark] .oq__result[data-winner="1"] .oq__result-text{color:#e08a78}:root[data-theme=dark] .oq__result[data-winner="2"] .oq__result-text{color:#8db4dc}.oq__result .button{font:inherit;cursor:pointer;border:0;min-height:2.75rem;font-weight:600}.oq__rules{border-top:1px solid var(--line);max-width:46rem;margin-top:clamp(2.5rem,7vw,4.5rem);padding-top:2rem}.oq__rules-list{padding-left:1.4rem}.oq__rules-list li{margin-bottom:.5rem;padding-left:.3rem}.oq__rules-list li::marker{color:var(--copper)}.examples{margin:2rem 0 0}.examples__title{font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:.9rem;font-size:.85rem}.examples__row{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.6rem,3vw,1.5rem);display:grid}.example{text-align:center}.example svg{border-radius:6px;width:100%;height:auto;display:block;box-shadow:0 6px 14px #2d1c0a4d}.example__label{color:var(--ink-muted);margin-top:.5rem;font-size:.9rem;display:block}.example__board{fill:#b8834a}.example__well{fill:#5a3818;opacity:.85}.example__line{fill:#fff4c80f;stroke:#fff4c8;stroke-width:.1px;stroke-linejoin:round;stroke-dasharray:.3 .2}.example__ball--red{fill:#b04835;stroke:#5d1d14;stroke-width:.06px}.example__ball--blue{fill:#3f6a98;stroke:#1c3350;stroke-width:.06px}@keyframes oq-drop{0%{opacity:.6;transform:scale(1.35);box-shadow:0 10px 12px #0000004d}to{opacity:1;transform:scale(1)}}@keyframes oq-draw{0%{stroke-dashoffset:1px;fill-opacity:0}to{stroke-dashoffset:0}}@keyframes oq-pulse{50%{transform:scale(1.12)}}@media (width<=52rem){.oq__table{grid-template-columns:1fr 1fr;grid-template-areas:"board board""red blue";align-items:start;row-gap:1.5rem}.pile{max-width:11rem}.oq-setup__actions{margin-left:0}}@media (width<=40rem){.oq-setup{flex-direction:column;order:5;align-items:stretch;margin:1.75rem 0 0}.oq-setup__actions{order:-1;width:100%;margin:0}.oq-setup__actions .button{width:100%;min-height:2.5rem;padding-block:.4rem}}@media (width<=52rem){.oq-stage{aspect-ratio:16/10}}@media (width<=40rem){.oq-stage{aspect-ratio:4/5}}@media (width<=30rem){.oq-board{--pad:4%;border-radius:.8rem}.oq__table{column-gap:.75rem}.seg span{padding:.4rem .7rem;font-size:.9rem}}@media (prefers-reduced-motion:reduce){.oq-cell .ball.is-new,.oq-board__line,.oq-board__glow,.oq-cell.is-win .ball,.oq-setup__actions .button.is-nudge{animation:none}}