.oca-setup{background:#21172e;border:1px solid #4e3964;padding:28px;border-radius:20px}.oca-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:18px 0}.oca-options label{display:grid;gap:8px;font-size:14px}.oca-options select{width:100%;background:#130e1c;color:#fff;border:1px solid #77618c;padding:12px;border-radius:8px}.oca-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:24px;align-items:start;margin:32px 0}.oca-arena{background:radial-gradient(ellipse at top,#352147,#100e15);border:2px solid #77618c;border-radius:18px;padding:18px;box-shadow:0 0 0 5px #1c1625,0 0 0 7px #51415e}.oca-top{display:flex;justify-content:space-between;gap:10px;margin-bottom:16px;font-size:12px}.oca-board{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px}.oca-cell{min-height:82px;background:#241d2e;border:1px solid #51415e;border-radius:7px;padding:5px;display:flex;flex-direction:column;align-items:center;gap:4px}.oca-cell>span{font-size:11px;color:#c8b8d9;align-self:start}.oca-cell b{font-size:21px;min-height:24px}.oca-cell.rope{background:#382450;border-color:#ad7bdf}.oca-cell.gold{background:#59421a;border-color:#f4cc70}.oca-tokens{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;min-height:19px}.oca-token{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;color:#111;font-size:12px;font-weight:900;box-shadow:0 1px 5px #000}.oca-control{background:#21172e;padding:22px;border:1px solid #4e3964;border-radius:16px;position:sticky;top:18px}.oca-control #status{font-size:20px;font-weight:800;min-height:58px}.oca-score{padding:10px;margin:8px 0;border-left:3px solid;font-size:13px;opacity:.65}.oca-score.active{background:#ffffff0c;opacity:1}.oca-control #die{text-align:center;font-size:66px;color:#c2ff55;font-weight:900}.oca-control button{width:100%;margin:5px 0}.oca-control #log{padding-left:20px;max-height:240px;overflow:auto;font-size:12px;color:#c8b8d9}.oca-control #log li{margin-bottom:9px}.oca-rulegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.oca-rulegrid article{background:#21172e;padding:20px;border-radius:12px}.oca-rulegrid h3{font-size:18px}.oca-rulegrid p{font-size:14px}@media(max-width:1050px){.oca-layout{grid-template-columns:1fr}.oca-control{position:static}.oca-cell{min-height:75px}}@media(max-width:600px){.oca-options,.oca-rulegrid{grid-template-columns:1fr}.oca-arena{padding:8px}.oca-board{gap:3px}.oca-cell{padding:2px;min-height:70px}.oca-cell>span{font-size:9px}.oca-cell b{font-size:17px}.oca-token{width:16px;height:16px;font-size:10px}.oca-top{font-size:9px}.oca-setup{padding:18px}.oca-control{padding:18px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* Physical portrait pieces and match presentation */
.oca-track{position:relative;isolation:isolate;scroll-margin-top:20px}.oca-entry{height:65px;margin-bottom:12px;border:1px dashed #85629f;border-radius:9px;background:linear-gradient(110deg,#392449,#16101e);padding:6px 10px;font-size:9px;letter-spacing:2px;color:#c6b3d4}.oca-piece-layer{position:absolute;inset:0;pointer-events:none;z-index:3}.oca-piece{position:absolute;top:0;left:0;border-radius:48% 48% 28% 28%;padding:3px;background:linear-gradient(120deg,#fff,var(--player) 30%,#24202e 75%);box-shadow:0 5px 0 #09060d,0 7px 8px #000a;transition:transform .24s ease-in-out;will-change:transform}.oca-piece img{width:100%;height:100%;object-fit:cover;object-position:center 18%;border-radius:46% 46% 22% 22%;border:1px solid #ffffff60}.oca-piece strong{position:absolute;bottom:-4px;right:-4px;background:var(--player);color:#111;border:1px solid #fff;border-radius:50%;width:16px;height:16px;display:grid;place-items:center;font-size:10px}.oca-piece.current{filter:drop-shadow(0 0 5px var(--player))}.oca-piece.flying{transition:transform .6s cubic-bezier(.4,-.4,.4,1.5);filter:drop-shadow(0 0 13px var(--player))}.oca-score{display:flex;align-items:center;gap:9px}.oca-score img{width:35px;height:40px;object-fit:cover;object-position:top;border-radius:5px}.oca-cell{transition:background .18s,box-shadow .18s}.oca-cell.stepped{background:#755192;box-shadow:inset 0 0 14px #c2ff5580}.oca-fx{pointer-events:none;position:absolute;top:38%;left:4%;right:4%;padding:22px 15px;border:2px solid #bf98ed;background:#171021f2;box-shadow:0 14px 55px #000a;text-align:center;font-weight:900;font-size:clamp(16px,2.5vw,30px);color:#fff;border-radius:12px;z-index:20;opacity:0;transform:scale(.85);transition:opacity .2s,transform .2s}.oca-fx.show{opacity:1;transform:scale(1)}.oca-fx.boost{border-color:#c2ff55;color:#c2ff55}.oca-fx.penalty{border-color:#ff6868;color:#ffaeae}.oca-fx.victory{border-color:#ffda78;color:#ffda78;background:#30200ff5}.oca-control #die{line-height:1.2;margin:15px auto;font-size:90px;text-shadow:0 4px 0 #5a7331}.oca-control #die.rolling{animation:oca-roll .16s infinite alternate}.oca-pace{display:grid;gap:5px;font-size:12px;color:#c8b8d9;margin:10px 0}.oca-pace select{background:#130e1c;color:white;border:1px solid #77618c;padding:8px;border-radius:6px}.oca-confetti{position:absolute;top:0;width:8px;height:16px;z-index:30;pointer-events:none;animation:oca-fall 2.6s ease-in forwards}@keyframes oca-roll{from{transform:rotate(-16deg) scale(.88)}to{transform:rotate(16deg) scale(1.08)}}@keyframes oca-fall{to{top:100%;transform:rotate(720deg);opacity:0}}@media(max-width:600px){.oca-fx{padding:14px 8px}.oca-entry{height:52px}.oca-piece strong{width:12px;height:12px;font-size:8px}.oca-cell{min-height:75px}.oca-layout{display:flex;flex-direction:column}.oca-arena,.oca-control{width:100%;box-sizing:border-box}.oca-control{position:static}.oca-control #die{font-size:65px}.oca-control #scores{display:grid;grid-template-columns:1fr 1fr;gap:5px}.oca-score{font-size:11px;padding:6px;margin:0}.oca-score img{width:26px;height:31px}}@media(prefers-reduced-motion:reduce){.oca-piece,.oca-fx{transition:none}.oca-control #die.rolling{animation:none}}
/* GBS illustrated spiral: a continuous board, built from precise SVG tiles. */
.oca-layout{grid-template-columns:minmax(0,1fr) 265px;gap:20px}.oca-arena{padding:14px;background:linear-gradient(150deg,#23182f,#11121c 65%);border:1px solid #76538f;box-shadow:0 20px 70px #0008,0 0 0 4px #0e0c16;border-radius:22px;min-width:0;overflow:auto}.oca-top{align-items:center;min-height:32px}.oca-top .textbtn{font-size:11px;white-space:nowrap}.oca-board{display:block;position:relative;width:100%;aspect-ratio:11/9;padding:0;margin:0;gap:0}.oca-spiral{display:block;width:100%;height:100%;overflow:visible;font-family:Arial,sans-serif}.oca-tile-face{transition:filter .15s,stroke .2s;stroke-linejoin:round}.oca-tile-number{font-size:24px;font-weight:900;fill:#f7f1ff;paint-order:stroke;stroke:#17101f;stroke-width:3px;letter-spacing:-.5px}.oca-tile-label{font-size:8px;letter-spacing:1px;fill:#f0defb;font-weight:700;paint-order:stroke;stroke:#21132e;stroke-width:2px}.oca-tile.rope .oca-tile-number{fill:#d5ff9e}.oca-tile.gold .oca-tile-number{fill:#ffde89;font-size:28px}.oca-tile.stepped .oca-tile-face{filter:brightness(1.8);stroke:#e0ffb0;stroke-width:5}.oca-track{width:100%;min-width:0}.oca-track.zoomed{min-width:880px}.oca-entry{height:52px;background:linear-gradient(90deg,#231933,#161320);margin:0 10px 10px;font-size:9px;letter-spacing:2px;border-color:#634b78}.oca-piece{box-shadow:0 4px 0 #08050d,0 7px 10px #000c;border:1px solid #ffffff70;padding:2px}.oca-piece.current{filter:drop-shadow(0 0 6px var(--player))}.oca-piece-layer{overflow:visible}.oca-board-key{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;font-size:10px;color:#c8b6d8;letter-spacing:.3px;margin:14px 0 3px}.oca-board-key span{background:#ffffff07;border:1px solid #ffffff12;padding:7px 10px;border-radius:20px}.oca-control{border-color:#624478;background:linear-gradient(150deg,#281c38,#171320);border-radius:18px}.oca-control #status{font-size:18px}.oca-control #die{color:#c2ff55;filter:drop-shadow(0 0 12px #92c43130)}.oca-score{border-radius:7px;font-size:12px}.oca-score.active{background:linear-gradient(90deg,#ffffff13,#ffffff03)}.oca-score img{border:1px solid #ffffff30}.oca-flight-layer{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:12}.oca-jump-trail{fill:none;stroke:#c2ff55;stroke-width:9;stroke-linecap:round;stroke-dasharray:12 10;filter:drop-shadow(0 0 7px #c2ff55);animation:oca-trail 1s linear infinite}.oca-flying-goose{filter:drop-shadow(0 0 12px #d0ff87)}.oca-flying-goose use{animation:oca-wing .17s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}.oca-launch .oca-tile-face,.oca-landing .oca-tile-face{stroke:#e5ffba;stroke-width:6;filter:brightness(1.6);animation:oca-lane-pulse .45s infinite alternate}.oca-impact .oca-tile-face{stroke:#fffbd9;stroke-width:8;filter:brightness(2.2)}.oca-fx.goose-jump{top:13%;left:20%;right:20%;font-size:clamp(12px,1.6vw,21px);border-color:#c2ff55;color:#dfffaa;padding:13px;background:#171422ed;box-shadow:0 0 45px #a3e74730}.oca-jump-active .oca-board-brand{filter:drop-shadow(0 0 15px #b1ff5540)}
@keyframes oca-trail{to{stroke-dashoffset:-44}}@keyframes oca-wing{to{transform:translateY(-7px) rotate(-8deg)}}@keyframes oca-lane-pulse{to{filter:brightness(2);stroke-width:9}}
@media(max-width:1100px){.oca-layout{grid-template-columns:1fr}.oca-control{position:static;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}.oca-control #status,.oca-control #scores,.oca-control h3,.oca-control #log{grid-column:1/-1}.oca-control #scores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.oca-control #die{grid-column:1;grid-row:3/6;margin:auto}.oca-control #roll,.oca-control #restart{grid-column:2}.oca-control h3{margin-top:20px}.oca-control #log{max-height:130px}.oca-control .oca-pace{grid-column:1/-1;grid-template-columns:1fr 1fr;align-items:center}.oca-score{margin:0}}
@media(max-width:600px){.oca-layout{display:grid;gap:16px}.oca-arena{padding:7px;border-radius:13px}.oca-entry{margin:0 4px 7px;height:43px;font-size:8px}.oca-top{gap:5px;font-size:8px}.oca-top .eyebrow{font-size:9px;letter-spacing:1px}.oca-board-key{font-size:8px;gap:4px}.oca-board-key span{padding:5px 6px}.oca-piece strong{font-size:8px;width:12px;height:12px}.oca-fx.goose-jump{left:10%;right:10%;font-size:12px;top:10%;padding:8px}.oca-control{padding:16px;box-sizing:border-box}.oca-control #die{font-size:72px}.oca-score{font-size:11px}.oca-score img{width:26px;height:31px}}
@media(prefers-reduced-motion:reduce){.oca-jump-trail,.oca-flying-goose use,.oca-launch .oca-tile-face,.oca-landing .oca-tile-face{animation:none}.oca-tile-face{transition:none}}

@media(max-width:700px){body:has(.oca-layout) main{padding-left:8px;padding-right:8px}}