:root{--page:#f2f6f8;--board:#c3e6f4;--box:#abd6e9;--holeline:#93c1d7;--coral:#ed9a82;--butter:#e9c96c;--ink:#5e7a84;--line:#aecfdd;--dot-off:#e7eaec;--cream:#fbf6ea}*{box-sizing:border-box}html,body{height:100%}body{background:var(--page);color:var(--ink);place-items:center;margin:0;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;display:grid}.screen{width:100%;max-width:460px;margin:0 auto;padding:24px 16px}.game{width:min(80vmin,720px);margin:0 auto;padding:2vmin 0}.splash{flex-direction:column;justify-content:center;align-items:center;gap:30px;min-height:78vh;display:flex}.wordmark{letter-spacing:.04em;color:var(--ink);font-size:34px;font-weight:300}.start{background:var(--coral);cursor:pointer;border:none;border-radius:50%;place-items:center;width:64px;height:64px;transition:transform .12s;display:grid}.start:hover{transform:scale(1.05)}.start:active{transform:scale(.97)}.topbar{justify-content:space-between;align-items:center;margin-bottom:16px;padding:0 4px;display:flex}.turn{gap:8px;display:flex}.tdot{background:var(--dot-off);border-radius:50%;width:12px;height:12px;transition:background .2s}.tdot.red.on{background:var(--coral)}.tdot.yellow.on{background:var(--butter)}.right{align-items:center;gap:14px;display:flex}.dice{gap:8px;display:flex}.die{background:var(--box);border:1px solid var(--line);border-radius:8px;grid-template-columns:repeat(3,1fr);width:30px;height:30px;padding:5px;display:grid}.die .pip{background:var(--ink);border-radius:50%;place-self:center;width:5px;height:5px}.dice.rollable{cursor:pointer}.dice.rollable .die{animation:1.8s ease-in-out infinite nudge}@keyframes nudge{0%,to{opacity:.7}50%{opacity:1}}.toggle{background:var(--dot-off);cursor:pointer;border:none;border-radius:11px;width:40px;height:22px;padding:0;transition:background .15s;position:relative}.toggle.on{background:var(--coral)}.toggle .knob{background:#fff;border-radius:50%;width:18px;height:18px;transition:left .15s;position:absolute;top:2px;left:2px}.toggle.on .knob{left:20px}.board{aspect-ratio:1;background:var(--board);border-radius:3.6%;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:2%;width:100%;padding:2.4%;display:grid}.box{background:var(--box);border-radius:6.5%;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);place-items:center;padding:9%;display:grid}.box.cap-r{background:var(--coral)}.box.cap-y{background:var(--butter)}.hole{aspect-ratio:1;border:1.5px solid var(--holeline);border-radius:50%;width:44%;transition:background .15s,opacity .15s}.hole.r{background:var(--coral);border-color:#0000}.hole.y{background:var(--butter);border-color:#0000}.hole.legal{cursor:pointer;border-color:var(--cream);border-width:2px}.hole.legal:hover{border-color:#fff}.hole.removable{cursor:pointer;box-shadow:0 0 0 3px #5e7a8466}.hole.removable:hover{opacity:.45}.board.over{cursor:pointer}