.g-board-wrap{aspect-ratio:1;touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border-radius:16px;width:min(100%,520px);margin-inline:auto;position:relative;overflow:hidden;container-type:inline-size}.g-board{--gap:clamp(3px, 1.3cqw, 7px);--pad:clamp(7px, 2.6cqw, 14px);--cellsz:calc((100cqw - 2 * var(--pad) - 5 * var(--gap)) / 6);--pitch:calc(var(--cellsz) + var(--gap));--snap:.17s;width:100%;height:100%;padding:var(--pad);background:#cfc8bb;border-radius:16px;position:relative;box-shadow:inset 0 2px #ffffff59,inset 0 -3px #00000014}.g-slots{gap:var(--gap);grid-template-rows:repeat(6,1fr);grid-template-columns:repeat(6,1fr);width:100%;height:100%;display:grid}.g-slots>span{background:#e7e1d6;border-radius:7px}.g-slots>span[data-lane]{background:#ebe2d8}.g-exit{right:0;top:calc(var(--pad) + 2 * var(--pitch));width:var(--pad);height:var(--cellsz);pointer-events:none;background:#e7e1d6;border-radius:0 4px 4px 0;position:absolute}.g-exit:after{content:"";opacity:.8;clip-path:polygon(0 0,100% 50%,0 100%,0 70%,45% 50%,0 30%);background:#e5484d;width:70%;height:34%;margin:auto;position:absolute;inset:0}.g-cars{inset:var(--pad);pointer-events:none;position:absolute}.g-car{--dx:0;--dy:0;width:calc(var(--w) * var(--pitch) - var(--gap));height:calc(var(--hgt) * var(--pitch) - var(--gap));transform:translate(calc((var(--c) + var(--dx)) * var(--pitch)), calc((var(--r) + var(--dy)) * var(--pitch)));transition:transform var(--snap) cubic-bezier(.2, .9, .25, 1.05);z-index:1;pointer-events:auto;-webkit-tap-highlight-color:transparent;border-radius:10px;outline:none;position:absolute;top:0;left:0}.g-car.is-dragging{z-index:3;transition:none}.g-car-in{background:var(--v-bg);border-radius:clamp(6px,2.2cqw,11px);transition:transform .12s,box-shadow .12s;position:absolute;inset:0;box-shadow:inset 0 2px #fff6,inset 0 -3px #00000024,0 2px 3px #28195a2e}.g-car-in:before{content:"";background:var(--v-roof);border-radius:clamp(3px,1.2cqw,6px);position:absolute;inset:22% 18%}.g-car[data-h="1"] .g-car-in:before{inset:20% 26% 20% 22%}.g-car.is-dragging .g-car-in{transform:scale(1.035);box-shadow:inset 0 2px #ffffff73,inset 0 -3px #00000024,0 8px 16px #28195a47}.g-car:focus-visible .g-car-in{box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--accent-ring,#5b3cc4)}.g-car[data-tone="0"]{--v-bg:#7fbbe9;--v-roof:#5da2d8}.g-car[data-tone="1"]{--v-bg:#7fd0bc;--v-roof:#4fb498}.g-car[data-tone="2"]{--v-bg:#97d17e;--v-roof:#6ab54e}.g-car[data-tone="3"]{--v-bg:#eeb655;--v-roof:#d6932a}.g-car[data-tone="4"]{--v-bg:#ee9db3;--v-roof:#d8738f}.g-car[data-tone="5"]{--v-bg:#ab8dec;--v-roof:#8667dd}.g-car[data-len="3"][data-tone="0"]{--v-bg:#4b7fc9;--v-roof:#335da3}.g-car[data-len="3"][data-tone="1"]{--v-bg:#2b9c87;--v-roof:#1c7466}.g-car[data-len="3"][data-tone="2"]{--v-bg:#5b3cc4;--v-roof:#452a9c}.g-car[data-red]{--v-bg:#e5484d;--v-roof:#c62f35}.g-car[data-red] .g-car-in:before{inset:22% 30% 22% 16%}.g-car[data-red] .g-car-in:after{content:"";aspect-ratio:1;clip-path:polygon(0 10%,60% 50%,0 90%,0 66%,28% 50%,0 34%);opacity:.95;background:#fff;width:18%;position:absolute;top:50%;right:9%;transform:translateY(-50%)}.g-car.is-bump .g-car-in{animation:.2s ease-out g-bump}@keyframes g-bump{35%{transform:translate(var(--bx,0), var(--by,0))}}.g-car.is-leaving{z-index:4;transition:transform .52s cubic-bezier(.55,0,.75,.2)}.g-car.is-leaving .g-car-in{animation:.52s ease-in forwards g-leave-fade}@keyframes g-leave-fade{70%{opacity:1}to{opacity:0}}.g-board.is-won .g-car:not([data-red]) .g-car-in{animation:g-hop .46s cubic-bezier(.3, .7, .4, 1.3) calc(var(--wave,0) * 45ms + .26s) both}@keyframes g-hop{40%{transform:translateY(-9%)scale(1.04)}}.g-board.is-won .g-exit{animation:.9s ease-out .2s both g-exit-glow}@keyframes g-exit-glow{30%{background:#ffe9a8}}.g-board.is-won .g-slots>span[data-lane]{animation:.7s ease-out both g-lane;animation-delay:calc((5 - var(--col)) * 50ms)}@keyframes g-lane{25%{background:#fbd6d7}}.g-moves-box{position:relative}.g-moves-box.is-tick [data-el=moves]{animation:.22s ease-out g-tick}@keyframes g-tick{40%{color:var(--accent);transform:scale(1.18)}}.g-board-wrap.is-loading .g-cars{opacity:0}.g-board-wrap .g-cars{transition:opacity .18s}.g-seg{background:var(--surface-2);border-radius:10px;grid-template-columns:repeat(3,1fr);padding:2px;display:grid;position:relative}.g-seg-thumb{background:var(--surface);width:calc(33.3333% - 1.33333px);transform:translateX(calc(var(--i,0) * 100%));border-radius:8px;transition:transform .22s cubic-bezier(.3,.7,.4,1);position:absolute;inset:2px auto 2px 2px;box-shadow:0 3px 8px #0000001f,0 3px 1px #0000000a}.g-seg button{opacity:.7;-webkit-tap-highlight-color:transparent;border-radius:8px;min-height:36px;font-size:.875rem;font-weight:600;position:relative}.g-seg button[aria-checked=true]{opacity:1}.g-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.g-win dl>div{border-bottom:1px solid var(--border);justify-content:space-between;gap:1rem;padding:.3rem 0;display:flex}.g-win dt{color:var(--muted)}.g-win dd{font-variant-numeric:tabular-nums;font-weight:700}.g-win::backdrop{background:#00000073}@media (prefers-reduced-motion:reduce){.g-board{--snap:0s}.g-car,.g-car.is-leaving,.g-seg-thumb,.g-board-wrap .g-cars{transition:none}.g-car-in,.g-board.is-won *,.g-moves-box [data-el=moves]{animation:none!important}}.g-static{touch-action:auto;margin:0}