:root{--bg:#f4f6fa;--surface:#fff;--surface-sunken:#eef1f7;--line:#d9e0ec;--line-strong:#b8c3d6;--ink:#131722;--ink-soft:#4d5769;--ink-dim:#6b7689;--accent:#2f6df6;--accent-ink:#fff;--accent-soft:#e4ecff;--focus:#f2a900;--positive:#0f8a4a;--caution:#a35a00;--c-red:#e03a3e;--c-blue:#2f6df6;--c-yellow:#e0a100;--c-green:#0f8a4a;--c-purple:#8a4bd3;--c-teal:#0e8c8c;--c-pink:#d6407f;--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--r-sm:8px;--r-md:12px;--r-lg:16px;--shadow-1:0 1px 2px #1317220f;--shadow-2:0 6px 20px #1317221a;--font:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--t-xs:.75rem;--t-sm:.875rem;--t-md:1rem;--t-lg:1.25rem;--t-xl:1.75rem;--touch:48px;--touch-lg:64px;--motion:.14s;--ease:cubic-bezier(.2, .6, .3, 1)}@media (prefers-color-scheme:dark){:root{--bg:#0e1118;--surface:#171c26;--surface-sunken:#10141c;--line:#2a3242;--line-strong:#3d4759;--ink:#e9edf5;--ink-soft:#b4becd;--ink-dim:#8b96a8;--accent:#5b8dff;--accent-ink:#0e1118;--accent-soft:#1d2942;--positive:#35c17a;--caution:#e0a34a;--c-red:#ff6b6e;--c-blue:#5b8dff;--c-yellow:#f0bc3c;--c-green:#35c17a;--c-purple:#b47ef0;--c-teal:#40c9c9;--c-pink:#ff7ab0;--shadow-1:0 1px 2px #0006;--shadow-2:0 6px 20px #00000073}}@media (prefers-reduced-motion:reduce){:root{--motion:.01ms}}@media (prefers-contrast:more){:root{--line:var(--ink-soft);--line-strong:var(--ink)}}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--ink);font:var(--t-md) / 1.5 var(--font);-webkit-text-size-adjust:100%;margin:0}.app{flex-direction:column;min-height:100%;display:flex}.screen{width:100%;padding:var(--s-4);gap:var(--s-4);flex-direction:column;flex:1;display:flex}.topbar{justify-content:space-between;align-items:center;gap:var(--s-5);padding-bottom:var(--s-3);border-bottom:1px solid var(--line);flex-wrap:wrap;display:flex}.topbar-id{align-items:center;gap:var(--s-3);display:flex}.topbar-id h1{font-size:var(--t-lg);letter-spacing:-.01em;margin:0;font-weight:650}.chip{font-size:var(--t-xs);padding:var(--s-1) var(--s-3);background:var(--accent-soft);color:var(--accent);border-radius:999px;font-weight:600}.chip-quiet{background:var(--surface-sunken);color:var(--ink-dim)}.meters{gap:var(--s-6);margin:0;display:flex}.meter dt{align-items:center;gap:var(--s-1);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-dim);font-weight:600;display:flex}.meter dd{margin:var(--s-1) 0 0;font-size:var(--t-xl);font-variant-numeric:tabular-nums;font-weight:650;line-height:1.1}.meter-of{font-size:var(--t-md);color:var(--ink-dim);font-weight:500}@media (width<=560px){.screen{padding:var(--s-3);gap:var(--s-3)}.topbar{gap:var(--s-3);padding-bottom:var(--s-2)}.topbar-id .panel-toggle{padding:var(--s-1) var(--s-2)}.topbar-id .panel-title{font-size:var(--t-xs)}.meters{gap:var(--s-4)}.meter dd{font-size:var(--t-lg)}}.columns{gap:var(--s-4);flex:1;grid-template-columns:1fr;min-height:0;display:grid}.col-main{gap:var(--s-3);flex-direction:column;min-width:0;display:flex}.col-side{gap:var(--s-3);flex-direction:column;min-height:0;display:flex}@media (width>=900px){.screen{padding:var(--s-5) var(--s-6);height:100%;overflow:hidden}.columns{gap:var(--s-6);grid-template-columns:minmax(0,1.55fr) minmax(340px,.85fr);overflow:hidden}.col-side{overflow:hidden}.col-main{justify-content:flex-start;gap:var(--s-4)}.board{padding:var(--s-6) var(--board-pad-x) var(--s-5)}:root{--touch-lg:96px}.cup-label{font-size:2.25rem}}@media (width>=1400px){:root{--touch-lg:112px}.cup-label{font-size:2.5rem}}.board-wrap{gap:var(--s-3);flex-direction:column;display:flex;container-type:inline-size}.board-frame{--board-gap:var(--s-2);--board-pad-x:var(--s-4);--frame-border:1px;--cups-width:calc(var(--cups,5) * var(--cup-size) + (var(--cups,5) - 1) * var(--board-gap));--cup-size:max(var(--cup-min), min(var(--touch-lg), calc(( 100cqi - 2 * var(--frame-border) - 2 * var(--board-pad-x) - (var(--cups,5) - 1) * var(--board-gap) ) / var(--cups,5))));--cup-min:44px;background:var(--surface);border:var(--frame-border) solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);position:relative}.board-overlay{z-index:2;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:var(--s-4) var(--s-5);gap:var(--s-3);animation:swap-in .18s var(--ease);flex-direction:column;display:flex;position:absolute;inset:0;overflow-y:auto}.board-overlay-head{justify-content:space-between;align-items:center;gap:var(--s-3);display:flex}.board-overlay-head h2{font-size:var(--t-sm);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-dim);margin:0;font-weight:700}@media (pointer:coarse){.cup-picker-option{min-width:34px;height:34px}}@keyframes swap-in{0%{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.board-overlay{animation:none}}.board-head{justify-content:space-between;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-5) 0;display:flex}.board-mode{font-size:var(--t-sm);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-dim);margin:0;font-weight:700}.cup-picker-options{gap:var(--s-1);border-radius:var(--r-sm);background:var(--surface-sunken);padding:2px;display:flex}.cup-picker-option{min-width:30px;height:26px;padding:0 var(--s-2);border-radius:calc(var(--r-sm) - 1px);color:var(--ink-dim);font:inherit;font-size:var(--t-sm);font-variant-numeric:tabular-nums;cursor:pointer;background:0 0;border:0;font-weight:700}.cup-picker-option:hover:not(:disabled):not([aria-pressed=true]){background:var(--surface);color:var(--ink)}.cup-picker-option[aria-pressed=true]{background:var(--accent);color:var(--accent-ink,#fff)}.cup-picker-option:disabled{opacity:.5;cursor:default}.cup-picker-option:focus-visible{outline:3px solid var(--focus);outline-offset:2px}@media (pointer:coarse){.cup-picker-option{min-width:34px;height:34px}}.board{gap:var(--board-gap);padding:var(--s-3) var(--board-pad-x) var(--s-4);touch-action:none;flex-wrap:nowrap;justify-content:center;align-items:flex-end;margin:0;list-style:none;display:flex}@media (width>=560px){.board-frame{--board-gap:var(--s-3)}}@media (width>=900px){.board-frame{--board-pad-x:var(--s-5)}}@media (width<=559px){.board-frame[data-dense=true]{--board-gap:var(--s-1);--cup-min:40px}}.board-action{gap:var(--board-gap);width:var(--cups-width);grid-template-columns:8rem minmax(0,1fr);margin:0 auto;display:grid}.board-undo{display:flex}.board-undo .btn-wrap,.board-undo .btn{width:100%}.board-action .btn{padding:0 var(--s-3)}.board-action{padding-bottom:calc(var(--s-5) + 1.15rem)}.board-action .btn-wrap{align-items:center}.board-action .btn-reason{left:0;right:0;bottom:var(--s-4);text-align:center;position:absolute}.slot{align-items:center;gap:var(--s-2);flex-direction:column;display:flex}.slot.dragging{z-index:2}.slot-number{font-size:var(--t-xs);color:var(--ink-dim);font-variant-numeric:tabular-nums}.cup{width:var(--cup-size);height:var(--cup-size);border-radius:var(--r-lg);border:3px solid var(--ink);background:var(--surface-sunken);box-shadow:var(--shadow-1);cursor:grab;touch-action:none;transition:transform var(--motion) var(--ease), box-shadow var(--motion) var(--ease);place-items:center;padding:0;display:grid;overflow:hidden}.cup:active{cursor:grabbing}.cup:hover:not(:disabled){box-shadow:var(--shadow-2);transform:translateY(-2px)}.cup.selected,.cup.selected:hover:not(:disabled){box-shadow:0 0 0 4px var(--accent), var(--shadow-1)}.cup.selected:hover:not(:disabled){box-shadow:0 0 0 4px var(--accent), var(--shadow-2)}.cup:disabled{cursor:default;opacity:.85}.cup:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.cup-face{border-radius:calc(var(--r-lg) - 3px);place-items:center;width:100%;height:100%;display:grid}.cup-face[data-colour=red]{background:var(--c-red)}.cup-face[data-colour=blue]{background:var(--c-blue)}.cup-face[data-colour=yellow]{background:var(--c-yellow)}.cup-face[data-colour=green]{background:var(--c-green)}.cup-face[data-colour=purple]{background:var(--c-purple)}.cup-face[data-colour=teal]{background:var(--c-teal)}.cup-face[data-colour=pink]{background:var(--c-pink)}.cup-label{color:#11141c;font-size:1.75rem;font-weight:800}.board-caption{isolation:isolate;padding:var(--s-1) var(--s-3);border-radius:var(--r-sm);font-size:var(--t-sm);color:var(--ink-dim);text-align:center;transition:color .4s var(--ease);margin:0;position:relative}.board-caption.attention{color:var(--ink);animation:2.8s linear caption-grow}@keyframes caption-grow{0%{transform:scale(1)}8%{transform:scale(1.024)}20%{transform:scale(1.044)}34%{transform:scale(1.062)}46%{transform:scale(1.078)}57%{transform:scale(1.09)}72%{transform:scale(1.09)}to{transform:scale(1)}}.board-caption.attention:before{content:"";z-index:-1;border-radius:var(--r-sm);background:color-mix(in srgb, var(--accent) 16%, transparent);animation:2.8s linear caption-read;position:absolute;inset:0}.board-caption.attention:after{content:"";z-index:-1;border-radius:var(--r-sm);background:color-mix(in srgb, var(--accent) 30%, transparent);width:16%;animation:2.8s linear caption-reread;position:absolute;top:0;bottom:0}@keyframes caption-read{0%{clip-path:inset(0 100% 0 0)}8%{clip-path:inset(0 78% 0 0)}20%{clip-path:inset(0 60% 0 0)}34%{clip-path:inset(0 42% 0 0)}46%{clip-path:inset(0 24% 0 0)}53%{clip-path:inset(0 8% 0 0)}57%{clip-path:inset(0)}62%{clip-path:inset(0 0 0 12%)}72%{clip-path:inset(0 0 0 34%)}82%{clip-path:inset(0 0 0 56%)}92%{clip-path:inset(0 0 0 80%)}to{clip-path:inset(0 0 0 100%)}}@keyframes caption-reread{0%,57%{opacity:0;left:0%}59%{opacity:1;left:4%}62%{opacity:1;left:10%}72%{opacity:1;left:28%}82%{opacity:1;left:48%}92%{opacity:1;left:68%}to{opacity:0;left:84%}}@media (width<=899.98px){.board-overlay{padding:var(--s-3) var(--s-4);gap:var(--s-2)}.board-overlay-head h2{font-size:var(--t-xs)}.help-points{font-size:var(--t-xs);gap:var(--s-1)}.stats{font-size:var(--t-xs)}}@media (width<=560px){.board-overlay{padding:var(--s-2) var(--s-3)}.help-points{padding-left:var(--s-4);font-size:.72rem;line-height:1.35}}@media (prefers-reduced-motion:reduce){.board-caption.attention{animation:none}.board-caption.attention:before,.board-caption.attention:after{display:none}}.btn-wrap{gap:var(--s-1);flex-direction:column;display:inline-flex}.actions{align-items:center}.btn-wrap.grow{flex:1;min-width:180px}.btn{width:100%;min-height:var(--touch);padding:0 var(--s-5);border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;transition:background var(--motion) var(--ease), border-color var(--motion) var(--ease);font-weight:600}.btn-sm{min-height:40px;padding:0 var(--s-3);font-size:var(--t-sm)}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn-quiet{border-color:var(--line);color:var(--ink-soft);background:0 0}.btn:hover:not([aria-disabled=true]){border-color:var(--accent)}.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed}.btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.btn-note{opacity:.6;font-weight:500}.btn-reason{font-size:var(--t-sm);color:var(--ink-dim);line-height:1.35}.btn-wrap.blocking .btn-reason{color:var(--caution)}.actions{gap:var(--s-3);flex-wrap:wrap;align-items:flex-start;display:flex}.action-row{align-items:center;gap:var(--s-5);flex-wrap:wrap;display:flex}.action-row .actions{flex:1;min-width:260px}.notice{align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-4);background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--r-md);font-size:var(--t-sm);color:var(--ink-soft);margin:0;display:flex}.notice-warn{border-style:solid;border-color:var(--caution);color:var(--caution)}.coach{padding:var(--s-4);background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--r-md);gap:var(--s-3);flex-direction:column;align-items:flex-start;display:flex}.coach p{margin:0;font-weight:550}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);flex-direction:column;min-height:0;display:flex;overflow:hidden}.panel-head{align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line);width:100%;display:flex}.panel-toggle{border:0;border-bottom:1px solid var(--line);font:inherit;color:inherit;cursor:pointer;text-align:left;min-height:var(--touch);background:0 0}.panel-toggle:hover{background:var(--surface-sunken)}.panel-toggle:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}.chevron{border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);width:10px;height:10px;transition:transform var(--motion) var(--ease);flex:none;transform:rotate(-45deg)}.chevron.open{transform:rotate(45deg)}.panel-title{font-size:var(--t-sm);letter-spacing:.02em;color:var(--ink-soft);flex:1;margin:0;font-weight:650}.panel-summary{font-size:var(--t-sm);color:var(--ink-dim);font-variant-numeric:tabular-nums;font-weight:650}.panel-body{padding:var(--s-4);min-height:0;overflow-y:auto}.panel-message{min-height:76px;margin-bottom:var(--s-3);flex-direction:column;justify-content:center;display:flex}.panel-message>:last-child{margin-bottom:0}.help-toggle{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-1);padding:0 var(--s-4);min-height:var(--touch)}.stats{align-content:start;gap:var(--s-1);grid-template-columns:minmax(0,1fr);margin:0;display:grid}.stat-row{padding:var(--s-1) 0;border-bottom:1px solid var(--line)}.stat-row:last-child{border-bottom:0}.stat-line{justify-content:space-between;align-items:baseline;gap:var(--s-4);display:flex}.stat-row dt{font-size:var(--t-sm);color:var(--ink-soft)}.stat-row dd{font-variant-numeric:tabular-nums;margin:0;font-weight:700}.stat-note{font-size:var(--t-xs);color:var(--ink-dim);margin:0}.history-tip{margin:0 0 var(--s-3);font-size:var(--t-xs);color:var(--ink-dim)}.history{gap:var(--s-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.history-row{width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;align-items:center;gap:var(--s-1) var(--s-3);padding:var(--s-3);border-radius:var(--r-md);background:var(--surface-sunken);border:1px solid #0000;grid-template-columns:auto 1fr auto;grid-template-areas:"label cups score""tag cups score";display:grid}.history-row.is-past{opacity:.55}.history-row:hover:not(:disabled){opacity:1;border-color:var(--line-strong)}.history-row:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.history-row:disabled{cursor:default}.history-row.is-current{background:var(--surface);border-color:var(--positive);animation:ring var(--motion) var(--ease)}.tag-current{color:var(--positive)}@keyframes ring{0%{box-shadow:0 0 #0f8a4a73}to{box-shadow:0 0 0 6px #0f8a4a00}}@media (prefers-reduced-motion:reduce){.history-row.is-current{animation:none}}.history-row.is-best{background:var(--surface);border-color:var(--line-strong)}.history-row.is-latest{background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.history-duration{font-size:var(--t-xs);color:var(--ink-dim);font-variant-numeric:tabular-nums;font-weight:500;display:block}.history-check{font-size:var(--t-sm);color:var(--ink-soft);white-space:nowrap;grid-area:label;font-weight:650}.history-row.is-latest .history-check,.history-row.is-best .history-duration{font-size:var(--t-xs);color:var(--ink-dim);font-variant-numeric:tabular-nums;font-weight:500;display:block}.history-check{color:var(--ink)}.history-tag{letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;grid-area:tag;font-size:.68rem;font-weight:700}.tag-latest{color:var(--accent)}.tag-best{color:var(--positive)}.history-arrangement{gap:var(--s-1);grid-area:cups;justify-content:center;display:flex}.history-cup{border-radius:var(--r-sm);width:30px;height:30px;font-size:var(--t-sm);border:2px solid var(--ink);color:#11141c;place-items:center;font-weight:800;display:grid}.history-cup[data-colour=red]{background:var(--c-red)}.history-cup[data-colour=blue]{background:var(--c-blue)}.history-cup[data-colour=yellow]{background:var(--c-yellow)}.history-cup[data-colour=green]{background:var(--c-green)}.history-cup[data-colour=purple]{background:var(--c-purple)}.history-cup[data-colour=teal]{background:var(--c-teal)}.history-cup[data-colour=pink]{background:var(--c-pink)}.history-matches{font-variant-numeric:tabular-nums;font-weight:700;font-size:var(--t-lg);white-space:nowrap;grid-area:score}.history-row.is-latest .history-matches{font-size:var(--t-xl);color:var(--accent)}.history-row.is-best .history-matches{color:var(--positive)}.history-of{color:var(--ink-dim);font-weight:500;font-size:var(--t-md)}.help-points{padding-left:var(--s-5);gap:var(--s-2);color:var(--ink-soft);font-size:var(--t-sm);flex-direction:column;margin:0;display:flex}.help-points li:last-child{color:var(--accent);font-weight:700}.empty{text-align:left}.empty-title{margin:0 0 var(--s-1);font-weight:650}.empty-body{color:var(--ink-dim);font-size:var(--t-sm);margin:0}@media (width<=899.98px){[data-testid=history-panel] .panel-body{position:relative}[data-testid=history-panel] .history{overscroll-behavior:contain;scrollbar-width:thin;max-height:17rem;padding-right:var(--s-1);overflow-y:auto}[data-testid=history-panel] .panel-body:after{content:"";height:var(--s-6);pointer-events:none;background:linear-gradient(to bottom, transparent, var(--surface));border-radius:0 0 var(--r-lg) var(--r-lg);position:absolute;bottom:0;left:0;right:0}}.badge{margin:0 0 var(--s-3);padding:var(--s-1) var(--s-3);background:var(--accent-soft);color:var(--accent);font-size:var(--t-sm);border-radius:999px;font-weight:600;display:inline-block}.revealed{margin:0 0 var(--s-3);font-size:var(--t-lg);font-weight:650}.deductions{margin:0 0 var(--s-3);padding-left:var(--s-5);color:var(--ink-soft);font-size:var(--t-sm)}.muted{color:var(--ink-dim);font-size:var(--t-sm);margin:0 0 var(--s-3)}.dialog-backdrop{padding:var(--s-5);z-index:30;background:#0000008c;place-items:center;display:grid;position:fixed;inset:0}.dialog{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-2);padding:var(--s-5);width:100%;max-width:440px}.dialog h2{margin:0 0 var(--s-3);font-size:var(--t-lg)}.dialog p{margin:0 0 var(--s-5);color:var(--ink-soft)}.dialog-actions{gap:var(--s-3);flex-wrap:wrap;display:flex}.dialog-actions .btn-wrap{flex:1;min-width:150px}.foot{align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-6);font-size:var(--t-xs);color:var(--ink-dim);border-top:1px solid var(--line);flex-wrap:wrap;display:flex}.link{color:var(--accent);font:inherit;cursor:pointer;padding:var(--s-1);background:0 0;border:0;text-decoration:underline}.link:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width>=900px){.board{padding:var(--s-7) var(--s-5) var(--s-5);justify-content:center;align-items:center}.col-side{min-height:0}.col-side>.panel:first-child{flex:0 auto;min-height:0}.col-side>.panel:first-child .panel-body{max-height:calc(100vh - 320px)}}.confetti{pointer-events:none;z-index:40;position:fixed;inset:0;overflow:hidden}.confetti-piece{border-radius:2px;animation-name:fall;animation-timing-function:cubic-bezier(.25,.6,.4,1);animation-fill-mode:forwards;position:absolute;top:-24px}@keyframes fall{0%{opacity:1;transform:translateY(-10vh)rotate(0)}to{transform:translate3d(var(--drift), 105vh, 0) rotate(var(--spin));opacity:.15}}.cheer{margin:0 0 var(--s-3);font-size:var(--t-xl);color:var(--positive);letter-spacing:-.01em;font-weight:800}.cup-shell{will-change:transform;display:block}@media (prefers-reduced-motion:reduce){.confetti{display:none}}