@layer reset,base,layout,components;@layer reset{html,body,#app{block-size:100%}body{margin:0}*,*:before,*:after{box-sizing:border-box}button{font:inherit}}@layer base{:root{color-scheme:dark;--bg: #111713;--panel: #1d2724;--panel-strong: #293932;--text: #f5f6ee;--muted: #b6c0b2;--line: #415348;--blue: #5ea7ff;--red: #ff6965;--green: #6adf8f;--yellow: #f5c84b;--wood: #9b7445;--warm: #ffb75f;--shadow: rgb(0 0 0 / .28)}body{background:linear-gradient(135deg,#101512,#1b2420 42%,#2a3025);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.35;overflow:hidden}button{border:1px solid var(--line);border-radius:8px;background:var(--panel-strong);color:var(--text);min-block-size:2.5rem;min-inline-size:2.5rem;padding:.5rem .75rem;cursor:pointer;transition:transform .14s ease,background-color .14s ease,border-color .14s ease,box-shadow .14s ease}button:hover:not(:disabled){background:#344c40;box-shadow:inset 0 0 0 1px #ffffff14,0 .25rem .75rem #0000002e}button:active:not(:disabled),button.is-pressed:not(:disabled){transform:translateY(1px)}button:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}button:disabled{cursor:not-allowed;opacity:.42}}@layer layout{.game-shell{display:grid;grid-template-columns:minmax(0,1fr);position:relative;inline-size:min(100%,96rem);block-size:100dvh;margin-inline:auto;padding:.75rem;box-sizing:border-box}.board-zone{position:relative;min-block-size:0;overflow:hidden;border:1px solid rgb(255 255 255 / .08);border-radius:8px;box-shadow:0 1.1rem 3rem var(--shadow);background:#151a1d;isolation:isolate}.board-zone:before,.board-zone:after{position:absolute;inset:0;content:"";pointer-events:none;z-index:2}.board-zone:before{background:linear-gradient(115deg,transparent 0 34%,rgb(255 231 177 / .075) 48%,transparent 62%),linear-gradient(180deg,rgb(255 255 255 / .04),transparent 38%,rgb(0 0 0 / .14));mix-blend-mode:screen;opacity:.62;animation:board-breathe 5.8s ease-in-out infinite}.board-zone:after{opacity:0;transition:opacity .24s ease}.board-zone.is-flash-topple:after{background:#6adf8f29;animation:board-flash .44s ease-out}.board-zone.is-flash-clear:after,.board-zone.is-flash-win:after{background:#f5c84b2e;animation:board-flash .52s ease-out}.board-zone.is-flash-loss:after{background:#ff696526;animation:board-flash .42s ease-out}.board-scene{position:absolute;inset:0}.mobile-board{display:none}.board-scene canvas{display:block;inline-size:100%;block-size:100%;cursor:grab;touch-action:none}.board-zone.is-gesture-pressing .board-scene canvas,.board-zone.is-gesture-aiming .board-scene canvas,.board-zone.is-gesture-blocked .board-scene canvas{cursor:grabbing}.control-panel{position:absolute;inset:1.35rem;z-index:5;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"pips . actions" ". . ." "levels levels levels";gap:.5rem;min-block-size:0;overflow:visible;pointer-events:none}.control-panel :is(button,.placement-pips){pointer-events:auto}}@layer components{.visually-hidden{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.top-strip{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);pointer-events:none}.top-strip :is(.instruction,.status-line){position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;box-shadow:none}.instruction,.status-line,.toast{margin:0;border:1px solid rgb(255 255 255 / .1);border-radius:8px;background:#0e1412bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 .55rem 1.5rem var(--shadow)}.instruction{max-inline-size:58rem;padding:.5rem .75rem;color:var(--text);font-size:.9375rem;font-weight:650}.status-line{justify-self:start;max-inline-size:min(100%,44rem);padding:.5rem .75rem;color:var(--muted);font-size:.875rem}.toast{position:absolute;inset-inline-start:50%;inset-block-end:clamp(4.75rem,9dvh,7rem);transform:translate(-50%,.5rem);max-inline-size:min(24rem,calc(100% - 2rem));padding:.5rem .75rem;opacity:0;color:var(--text);font-size:.8125rem;font-weight:650;text-align:center;transition:opacity .16s ease,transform .16s ease;pointer-events:none}.toast.is-visible{opacity:1;transform:translate(-50%);animation:toast-pop .22s ease-out}.start-screen{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:1rem;background:linear-gradient(180deg,#090e0d7a,#0c110fb3);-webkit-backdrop-filter:blur(4px) saturate(.9);backdrop-filter:blur(4px) saturate(.9)}.start-screen[hidden]{display:none}.start-card{display:grid;justify-items:center;gap:.75rem;inline-size:min(26rem,100%);border:1px solid rgb(255 255 255 / .14);border-radius:8px;background:linear-gradient(180deg,#23312bf0,#141c19f0);box-shadow:0 1.2rem 3rem #0000005c;padding:1.5rem;text-align:center}.start-stones{display:flex;align-items:end;justify-content:center;gap:.25rem;block-size:2rem}.start-stone{display:block;inline-size:1.5rem;block-size:.5rem;border:1px solid rgb(255 255 255 / .28);border-radius:999px;box-shadow:inset 0 .18rem .35rem #fff3,0 .35rem .75rem #00000038}.start-stone-blue{background:linear-gradient(180deg,#86c9ff,#2f6fcb)}.start-stone-high{transform:translateY(-.5rem);box-shadow:inset 0 .18rem .35rem #fff3,0 .5rem #1d558f,0 .75rem #16436f,0 1rem .75rem #0000003d}.start-stone-red{background:linear-gradient(180deg,#ff9d88,#d5413f)}.start-kicker,.start-description,.start-status{margin:0}.start-kicker{color:var(--warm);font-size:.6875rem;font-weight:600;text-transform:uppercase}.start-card h1{margin:0;color:#fff8dc;font-size:1.875rem;font-weight:600;line-height:1.1}.start-description{max-inline-size:18rem;color:var(--text);font-size:.8125rem}.start-status{min-block-size:1rem;color:var(--muted);font-size:.6875rem}.start-status[hidden]{display:none}.start-button{min-inline-size:min(16rem,100%);border-color:color-mix(in oklab,var(--yellow),white 18%);background:#425134;color:#fff7cf;font-weight:600;box-shadow:0 .85rem 2rem var(--shadow)}.start-button:hover:not(:disabled){background:#516640}.progress-panel{grid-area:levels;justify-self:center;align-self:end;inline-size:min(44rem,100%);container-type:inline-size}.progress-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.125rem .5rem;align-items:baseline;margin-block-end:.625rem}.progress-summary strong{color:#fff8dc;font-size:1rem;font-weight:750;overflow-wrap:anywhere}.progress-kicker,#level-progress-text{color:var(--muted);font-size:.6875rem;font-weight:650}.progress-kicker{color:var(--warm);text-transform:uppercase}#level-progress-text{grid-column:1 / -1}.level-tabs,.action-row{display:flex;gap:.35rem}.level-tabs{flex-wrap:wrap;justify-content:center;overflow:visible}.level-tab{display:grid;place-items:center;inline-size:2.25rem;block-size:2.25rem;min-inline-size:2.25rem;min-block-size:2.25rem;border-color:#ffffff1f;border-radius:999px;background:#11181580;padding:0;color:#fff7cf;font-size:.75rem;font-weight:800;text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.level-tab__index{display:contents}.level-tab__body,.level-tab__tier{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.level-tab.is-active{border-color:var(--yellow);background:#425134d6;color:#fff7cf;box-shadow:0 0 0 .125rem #f5c84b29,0 .5rem 1rem #00000038}.level-tab.is-complete{border-color:#6adf8f73}.level-tab.is-complete .level-tab__index{color:#eaffd9}.level-tab.is-next:not(.is-active){border-color:#f5c84b80}.action-row{grid-area:actions;justify-self:end;align-self:start}.action-row button{display:grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;min-inline-size:2.5rem;min-block-size:2.5rem;border-radius:999px;background:#11181580;padding:0;color:#fff7cf;font-size:1.25rem;font-weight:800;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.placement-panel{grid-area:pips;justify-self:start;align-self:start}.placement-pips{display:flex;flex-wrap:wrap;gap:.28rem;max-inline-size:6.25rem;padding:.4rem;border:1px solid rgb(255 255 255 / .1);border-radius:999px;background:#11181575;box-shadow:0 .45rem 1.1rem #0000002e;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.placement-pip{inline-size:1rem;block-size:.45rem;border:1px solid rgb(217 239 255 / .78);border-radius:999px;background:linear-gradient(180deg,#86c9ff,#2f6fcb);box-shadow:inset 0 .14rem .22rem #ffffff4d,0 .15rem #154a84b3;transition:opacity .16s ease,transform .18s ease,filter .16s ease}.placement-pip.is-spent{opacity:.24;filter:saturate(.35);transform:translateY(.08rem) scale(.92)}.placement-pip.is-live{animation:metric-pop .34s ease-out}}@keyframes board-breathe{0%,to{opacity:.44}50%{opacity:.72}}@keyframes board-flash{0%{opacity:0}18%{opacity:1}to{opacity:0}}@keyframes metric-pop{0%{transform:scale(1)}45%{transform:scale(1.14)}to{transform:scale(1)}}@keyframes toast-pop{0%{transform:translate(-50%,.34rem) scale(.97)}to{transform:translate(-50%) scale(1)}}@media(max-width:820px){body{overflow:hidden}.game-shell{block-size:100dvh;min-block-size:100dvh;padding:.5rem}.control-panel{inset:.95rem}.level-tab{inline-size:2.05rem;block-size:2.05rem;min-inline-size:2.05rem;min-block-size:2.05rem;font-size:.6875rem}}@media(max-width:720px),(max-height:520px)and (max-width:960px){body{overflow:hidden;overscroll-behavior:contain}.game-shell{block-size:100dvh;min-block-size:100dvh;padding:.5rem}.board-zone{display:grid;align-items:center;justify-items:center;overflow:hidden}.board-scene{display:none}.mobile-board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.125rem;inline-size:min(100%,calc(100dvw - 1.25rem),30rem);aspect-ratio:1;justify-self:center;margin-block:3.8rem 4.65rem;border:1px solid rgb(255 255 255 / .1);border-radius:8px;background:linear-gradient(180deg,#2d2216bd,#181c1ae6),repeating-linear-gradient(45deg,rgb(255 255 255 / .035) 0 .35rem,transparent .35rem .7rem);box-shadow:inset 0 0 0 1px #00000040,0 .9rem 1.8rem #0000003d;padding:.375rem;touch-action:none;-webkit-user-select:none;user-select:none}.mobile-cell{position:relative;display:grid;place-items:center;min-inline-size:0;min-block-size:0;aspect-ratio:1;border-radius:6px;border-color:#ffd68529;background:linear-gradient(180deg,#9e6f3fdb,#6b4c30eb);box-shadow:inset 0 0 0 1px #ffffff09;padding:0;transform:none}.mobile-cell:hover:not(:disabled),.mobile-cell:active:not(:disabled),.mobile-cell.is-pressed:not(:disabled){transform:none}.mobile-cell:disabled{cursor:default;opacity:1}.mobile-cell.has-red{background:radial-gradient(circle at 50% 50%,rgb(255 130 111 / .96) 0 34%,transparent 35%),linear-gradient(180deg,#9e6f3fdb,#6b4c30eb)}.mobile-cell.has-blue{background:radial-gradient(circle at 50% 50%,rgb(107 190 255 / .96) 0 34%,transparent 35%),linear-gradient(180deg,#9e6f3fdb,#6b4c30eb)}.mobile-cell.has-red.has-blue{background:radial-gradient(circle at 50% 50%,rgb(107 190 255 / .96) 0 27%,transparent 28%),radial-gradient(circle at 50% 50%,rgb(255 130 111 / .96) 0 42%,transparent 43%),linear-gradient(180deg,#9e6f3fdb,#6b4c30eb)}.mobile-cell.is-selected{outline:.1875rem solid var(--yellow);outline-offset:-.25rem;box-shadow:inset 0 0 0 1px #ffffff14,0 0 .75rem #f5c84b57}.mobile-cell.is-legal{border-color:#6adf8f9e}.mobile-cell.is-legal:after{position:absolute;inset:32%;border-radius:999px;background:#6adf8f8f;content:""}.mobile-cell.is-active-path{border-color:var(--yellow);background:linear-gradient(180deg,#f5c84b57,#6adf8f42),linear-gradient(180deg,#9e6f3fdb,#6b4c30eb)}.mobile-cell.is-active-path:after{inset:22%;background:#f5c84bb8}.mobile-cell.is-terminal:after{display:none}.mobile-cell.is-invalid{outline:.1875rem solid var(--red);outline-offset:-.25rem}.mobile-cell.is-blocked-aim{outline:.1875rem solid color-mix(in oklab,var(--red),white 15%);outline-offset:-.25rem;animation:no-shake .26s ease}.mobile-cell__stack,.mobile-cell__target,.mobile-cell__arrow{position:absolute;pointer-events:none;z-index:1}.mobile-cell__target{inline-size:74%;block-size:74%;border:.125rem solid rgb(255 211 140 / .88);border-radius:999px;background:#ff5b56e0;box-shadow:inset 0 0 0 .125rem #76141233}.mobile-cell__stack{display:grid;place-items:center;inline-size:66%;block-size:66%;border:.125rem solid rgb(217 239 255 / .92);border-radius:999px;background:#49a6fff5;color:#07131f;font-size:.75rem;font-weight:800;line-height:1;box-shadow:inset 0 .16rem .26rem #ffffff52,0 .12rem #154a84b8}.mobile-cell__arrow{display:grid;place-items:center;inline-size:70%;block-size:70%;border-radius:999px;background:#f5c84bf0;color:#251b08;font-size:1rem;font-weight:900;line-height:1;box-shadow:0 .2rem .45rem #00000038}.toast{inset-block-end:4.75rem;max-inline-size:min(19rem,calc(100% - 1.5rem));padding:.55rem .75rem;font-size:.8125rem}.control-panel{inset:.75rem}.level-tabs{gap:.28rem}.level-tab,.action-row button{inline-size:2rem;block-size:2rem;min-inline-size:2rem;min-block-size:2rem}}@media(max-width:370px){.mobile-board{inline-size:min(100%,calc(100dvw - .875rem));padding:.25rem}.game-shell{padding:.375rem}}@media(max-height:520px)and (max-width:960px){body{overflow:hidden}.game-shell{block-size:100dvh;min-block-size:100dvh;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);gap:.5rem;align-items:stretch;overflow:hidden}.board-zone{min-block-size:0;display:grid;grid-template-rows:minmax(0,1fr);align-items:center;justify-items:center;overflow:hidden}.mobile-board{inline-size:min(100%,calc(100dvh - 1rem));margin-block:0}.control-panel{position:relative;inset:auto;display:flex;flex-direction:column;justify-content:space-between;align-self:stretch;inline-size:3rem;min-block-size:0;overflow:visible}.level-tabs{flex-direction:column;flex-wrap:nowrap;align-items:center;max-block-size:calc(100dvh - 8rem);overflow:auto;scrollbar-width:thin}.progress-panel,.placement-panel,.action-row{align-self:center}.placement-pips{flex-direction:column;max-inline-size:none}.action-row{flex-direction:column}}@media(pointer:coarse){button{min-block-size:2.8rem;min-inline-size:2.8rem}.level-tab,.action-row button{min-block-size:2.4rem;min-inline-size:2.4rem}}@media(prefers-reduced-motion:reduce){button,.toast,.board-zone:before,.board-zone:after,.placement-pip.is-live{animation:none;transition-duration:1ms}}
