html{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}img,svg{-webkit-user-drag:none}input,textarea,[contenteditable]:not([contenteditable=false]),.selectable{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}html,body,#root{background:var(--sb-background);height:100%;color:var(--sb-text);font:16px / 1.4 var(--sb-font);margin:0}.game{height:100%;position:relative;overflow:hidden}.play{flex-direction:column;display:flex;position:absolute;inset:0}.play-top{min-height:92px;padding:max(12px, env(safe-area-inset-top)) 16px 0;box-sizing:border-box}.play-top.hidden{visibility:hidden}.stage-box{--sb-cell:min(calc(100cqw / 7.5), calc(100cqh / 9.2));flex:1;min-height:0;position:relative;container-type:size}.lesson-tip{bottom:calc(50% + 2.75 * var(--sb-cell));box-sizing:border-box;background:var(--sb-text);width:min(100% - 32px,340px);color:var(--sb-ink);text-align:center;pointer-events:none;border-radius:16px;margin:0;padding:12px 16px;font-weight:700;position:absolute;left:50%;transform:translate(-50%)}.lesson-tip:after{content:"";border:9px solid #0000;border-top-color:var(--sb-text);border-bottom:0;margin-left:-9px;position:absolute;top:100%;left:50%}.lesson-tip.at-hand{bottom:calc(50% - 2.75 * var(--sb-cell))}.lesson-tip.at-hand:after{left:calc(50% + var(--sb-slot) * var(--sb-cell))}.play-foot{height:max(8px, env(safe-area-inset-bottom))}.stage{touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;inset:0}.hud-top{grid-template-columns:1fr auto 1fr;align-items:start;gap:8px;max-width:560px;margin:0 auto;display:grid}.message{text-align:center;min-height:1.4em;color:var(--sb-secondary);grid-column:1/-1;margin:2px 0 0;font-weight:700}.big{font:2rem / 1.1 var(--sb-sticker-font);font-variant-numeric:tabular-nums;font-weight:800}.label{color:var(--sb-muted);font-size:.85rem}button.key-button{--sb-depth:3px;padding:6px 14px;font-size:.95rem}.screens{pointer-events:none;flex-direction:column;padding:16px;display:flex;position:absolute;inset:0}.screens>*{pointer-events:auto}.backdrop{background:var(--sb-backdrop);transition:opacity var(--sb-fade-ms) ease;position:absolute;inset:0}.backdrop.gone{opacity:0;pointer-events:none}.overlay{z-index:1;background:#00000073;place-items:center;padding:16px;display:grid;position:absolute;inset:0}.panel{box-sizing:border-box;background:var(--sb-panel);border-radius:20px;width:100%;max-width:420px;margin:auto;padding:20px}.panel.scroll{max-height:calc(100% - 72px);margin-bottom:72px;overflow-y:auto}.panel h2{font-family:var(--sb-sticker-font);margin:0 0 12px}.panel p{margin:0 0 12px}.result{text-align:center}.result .big{font-size:3rem}.actions{flex-wrap:wrap;gap:10px;display:flex}.result .actions{justify-content:center;margin-top:18px}@media (height<=620px){.result h2{margin-block:0 4px;font-size:1.25rem}.result .big{margin-block:4px;font-size:2.25rem}.result p{margin-block:4px}.result .actions{margin-top:12px}}.key{gap:8px;margin:0 0 14px;padding:0;list-style:none;display:grid}.key li{align-items:center;gap:6px;display:flex}.chip{border:2px solid var(--sb-ink);color:#1d1b2e8c;border-radius:50%;flex:none;place-items:center;width:28px;height:28px;font-size:12px;line-height:1;display:inline-grid}.chip-white{background:var(--sb-white)}.chip-red{background:var(--sb-red)}.chip-red:after{content:"▲"}.chip-yellow{background:var(--sb-yellow)}.chip-yellow:after{content:"●"}.chip-blue{background:var(--sb-blue)}.chip-blue:after{content:"■"}.chip-orange{background:var(--sb-orange)}.chip-orange:after{content:"▲●";font-size:9px}.chip-green{background:var(--sb-green)}.chip-green:after{content:"●■";font-size:9px}.chip-purple{background:var(--sb-purple)}.chip-purple:after{content:"▲■";font-size:9px}.chip-mud{background:var(--sb-mud)}.chip-mud:after{content:"✕"}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}button{--sb-face:var(--sb-secondary);--sb-drop:color-mix(in srgb, var(--sb-face) var(--sb-shade), black);font:1.15rem / 1.2 var(--sb-sticker-font);border:var(--sb-outline) solid var(--sb-ink);background:var(--sb-face);color:var(--sb-ink);box-shadow:0 var(--sb-depth) 0 var(--sb-drop);cursor:pointer;border-radius:22px;padding:12px 22px;font-weight:800;transition:transform 60ms,box-shadow 60ms;position:relative}button:before{content:"";background:var(--sb-shine);pointer-events:none;border-radius:50%;width:clamp(16px,18%,40px);height:22%;position:absolute;top:12%;left:clamp(9px,9%,16px)}.settings-close:before,.how-to-play .htp-dot:before{content:none}button.primary{--sb-face:var(--sb-primary)}button:active:not(:disabled){transform:translateY(calc(var(--sb-depth) - 1px));box-shadow:0 1px 0 var(--sb-drop)}button:focus-visible{outline:3px solid var(--sb-text);outline-offset:3px}.back-button{bottom:max(16px, env(safe-area-inset-bottom));left:max(16px, env(safe-area-inset-left));z-index:2;position:absolute}.settings-button{top:max(16px, env(safe-area-inset-top));right:max(16px, env(safe-area-inset-right));z-index:2;border-radius:50%;place-items:center;width:48px;height:48px;padding:0;display:grid;position:absolute}.settings-button:before{width:36%;height:20%;top:14%;left:14%}.settings-button svg{width:26px;height:26px}.settings-backdrop{z-index:3;background:#00000080;place-items:center;padding:16px;display:grid;position:absolute;inset:0}.settings-menu{box-sizing:border-box;background:var(--sb-panel);border-radius:20px;flex-direction:column;gap:14px;width:min(100%,300px);padding:20px 24px 26px;display:flex;position:relative}.settings-title{text-align:center;font:1.5rem var(--sb-sticker-font);margin:0}.settings-message{text-align:center;margin:0}.settings-version{opacity:.7;text-align:center;margin:4px 0 0;font-size:.75rem}.settings-toggles{grid-template-rows:1fr auto auto 1fr;grid-auto-columns:84px;grid-auto-flow:column;justify-content:center;column-gap:12px;height:84px;display:grid}.settings-toggle{grid-row:span 4;grid-template-rows:subgrid;justify-items:center;row-gap:4px;padding:0 4px 2px;font-size:.8rem;line-height:1.2;display:grid}.settings-toggle svg{grid-row:2;width:28px;height:28px}.settings-toggle-label{grid-row:3}button.settings-confirm{--sb-face:var(--sb-primary)}.settings-close{width:36px;height:36px;box-shadow:none;color:var(--sb-text);background:0 0;border:0;padding:0;font-size:1.1rem;position:absolute;top:10px;right:10px}.title{--sb-foot:calc(1.38rem + 49px);min-height:0;padding-bottom:max(0px, calc(env(safe-area-inset-bottom) - 16px));flex-direction:column;flex:1;align-items:center;gap:20px;display:flex}.logo{--size:min(80vw, 40vh, 400px);width:var(--size);height:auto;margin-top:max(0px,50vh - 310px);margin-bottom:clamp(4px,3vh,28px)}.title .actions{flex-direction:column;align-items:stretch;gap:14px;width:min(100%,320px);margin-top:auto}.level-select .actions{margin-bottom:var(--sb-foot)}.title-status{right:max(16px, env(safe-area-inset-right));bottom:calc(max(16px, env(safe-area-inset-bottom)) + 20px);left:max(16px, env(safe-area-inset-left));text-align:center;margin:0;font-size:.8rem;position:absolute}@media (height<=620px){.logo{--size:min(80vw, 34vh, 400px)}}.title .copyright{height:calc(var(--sb-foot) - 20px);text-align:center;color:var(--sb-text);justify-content:center;align-items:flex-end;margin:0;font-size:.75rem;display:flex}@media (aspect-ratio>=5/4){.title{flex:0 auto;grid-template:"logo."1fr"logo actions""logo status""logo."1fr"copyright copyright"/minmax(0,1fr) minmax(0,1fr);place-items:center;gap:14px clamp(16px,5vw,64px);width:100%;max-width:960px;margin:auto;padding-bottom:0;display:grid}.logo{--size:min(42vw, 75vh, 480px);grid-area:logo;margin-top:0;margin-bottom:0}.title .actions{grid-area:actions;width:min(100%,280px);margin:0}.title-status{grid-area:status;max-width:320px;font-size:.9rem;position:static}.title .copyright{grid-area:copyright;height:auto;margin-top:clamp(4px,3vh,24px);display:block}}.board-scope{flex-wrap:wrap;align-items:center;gap:8px 16px;margin:4px 0 0;display:flex}.board-scope-choices{gap:8px;display:flex}.board-scope button{--sb-depth:3px;border-width:2px;border-radius:14px;padding:4px 12px;font-size:.9rem}.board-scope button[aria-pressed=true]{--sb-face:var(--sb-primary);box-shadow:0 1px 0 var(--sb-drop);transform:translateY(2px)}.board-scope-add{color:var(--sb-text)}.level-switch{border:0;min-inline-size:0;padding:0}.level-switch+.board-scope{margin-top:10px}.level-select .level-learn,button.sign-in{--sb-face:var(--sb-white)}.level-select .level-easy{--sb-face:var(--sb-level-easy)}.level-select .level-medium{--sb-face:var(--sb-level-medium)}.level-select .level-hard{--sb-face:var(--sb-level-hard)}.level-select h2{text-align:center;font:800 1.3rem var(--sb-sticker-font);margin:0}.boards{grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;display:grid}@media (width<=480px){.boards{grid-template-columns:1fr}}.board h3{font:800 1.1rem var(--sb-sticker-font);margin:0 0 6px}.board table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%;font-size:.95rem}.board td{padding:3px 4px}.board td:first-child{width:2.5ch;color:var(--sb-muted)}.board td:last-child{text-align:right}.board tr.me{background:color-mix(in srgb, var(--sb-secondary) 22%, transparent);font-weight:700}.new-best{color:var(--sb-secondary);font:800 1.3rem var(--sb-sticker-font)}.screens.leaving-slide .actions button{transition:transform var(--sb-fade-ms) ease-in;transform:translateY(120vh)}.screens.leaving-slide .actions button:nth-child(2){transition-delay:60ms}@media (prefers-reduced-motion:reduce){.screens.leaving-slide .actions button{transition:none}}@media (aspect-ratio>=5/4){.lesson-tip{top:50%;right:calc(50% + 3 * var(--sb-cell));width:min(calc(50% - 3 * var(--sb-cell) - 16px), 300px);bottom:auto;left:auto;transform:translateY(-50%)}.lesson-tip:after{border-width:9px 0 9px 9px;border-color:#0000;border-left-color:var(--sb-text);margin-top:-9px;margin-left:0;top:50%;left:100%}.lesson-tip.at-hand{top:calc(50% + 3.5 * var(--sb-cell));right:calc(50% + 3.5 * var(--sb-cell));bottom:auto}.lesson-tip.at-hand:after{left:100%}.play-top{min-height:0;padding-top:max(8px, env(safe-area-inset-top))}}.game.htp-open .screens{overflow-y:auto}.how-to-play{flex-direction:column;flex:1 0 auto;gap:28px;width:100%;max-width:960px;margin-inline:auto;display:flex}.htp-intro{padding-right:64px}.how-to-play .htp-intro h2{font:800 2rem / 1.1 var(--sb-sticker-font);margin:0}.htp-deck{touch-action:pan-y;flex-direction:column;flex:1 0 auto;display:flex}.htp-slide{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:center;gap:28px;margin:0;display:grid}.htp-drawing{min-width:0}.htp-scene{--scene-max:44svh;width:min(100%, var(--scene-max) * 1.6);aspect-ratio:200/125;box-sizing:border-box;border:var(--sb-outline) solid var(--sb-ink);height:auto;box-shadow:0 var(--sb-depth) 0 var(--sb-ink);border-radius:16px;margin-inline:auto;display:block;overflow:hidden}.how-to-play .htp-section{color:var(--sb-muted);text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px;font-size:.9rem;font-weight:800}.how-to-play h3{font:800 1.6rem / 1.15 var(--sb-sticker-font);margin:0 0 14px}.htp-words{margin:0;font-size:1.15rem;line-height:1.5}.htp-bar{z-index:1;padding:10px 0 max(16px, env(safe-area-inset-bottom));background:var(--sb-backdrop);box-shadow:0 -12px 16px var(--sb-backdrop);flex-direction:column;gap:8px;display:flex;position:sticky;bottom:0}.htp-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.htp-steps{flex-wrap:wrap;justify-content:flex-end;gap:12px;margin-left:auto;display:flex}.screens .how-to-play .back-button{position:relative;bottom:auto;left:auto}.htp-steps [aria-disabled=true]{opacity:.55;cursor:default}.htp-dots{flex-wrap:wrap;justify-content:center;gap:4px;margin:0;padding:0;list-style:none;display:flex}.how-to-play .htp-dot{width:24px;height:24px;box-shadow:none;background:radial-gradient(circle, var(--sb-muted) 0 4px, transparent 5px);border:0;border-radius:50%;padding:0}.how-to-play .htp-dot[aria-current]{background:radial-gradient(circle, var(--sb-primary) 0 5.5px, var(--sb-text) 6px 8.5px, transparent 9px)}.how-to-play .htp-dot:active{transform:none}@media (pointer:coarse){.htp-dots{gap:0}.htp-dots li{flex:1 1 0;min-width:24px;max-width:44px}.how-to-play .htp-dot{width:100%;height:44px}}@media (width<=640px){.htp-slide{grid-template-columns:minmax(0,1fr);align-content:start;gap:24px}.htp-scene{width:100%}.htp-words{font-size:1.05rem}.how-to-play .htp-intro h2{font-size:1.6rem}}@media (height<=500px){.how-to-play,.htp-slide{gap:12px}.htp-scene{--scene-max:30svh}.how-to-play h3{margin-bottom:6px;font-size:1.3rem}.htp-words{font-size:.95rem;line-height:1.4}.htp-bar{gap:4px;padding-top:6px}.htp-row button{padding:8px 16px;font-size:1.05rem}}@media (height<=500px) and (width>=641px){.htp-slide{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}}@media (width<=480px){.htp-row button{padding:10px 14px;font-size:1.05rem}}@media (width<=360px){.htp-row,.htp-steps{gap:8px}.how-to-play .htp-row button{padding-inline:12px}}.htp-tray{fill:var(--sb-tray)}.htp-empty{fill:var(--sb-empty)}.htp-block{fill:var(--sb-block);stroke:var(--sb-block-edge);stroke-width:1.4px}.htp-path{fill:none;stroke:var(--sb-muted);stroke-width:2px;stroke-dasharray:4 4;stroke-linecap:round}.htp-sign,.htp-points{fill:var(--sb-text);font:800 18px var(--sb-sticker-font);text-anchor:middle}.htp-points{stroke:var(--sb-ink);stroke-width:4px;paint-order:stroke}.htp-label{fill:var(--sb-muted);font:700 8px var(--sb-font);text-anchor:middle}.htp-ring{fill:none;stroke:var(--sb-text);stroke-width:2px}.htp-finger{fill:#ffffff8c;stroke:var(--sb-ink);stroke-width:1.5px}.htp-send-fly,.htp-send-was,.htp-match-was,.htp-match-points,.htp-mud-links,.htp-mud-was,.htp-white-was,.htp-chain-new-link,.htp-chain-points{opacity:0}.htp-scene g[class],.htp-scene text,.htp-scene circle[class]{transform-box:fill-box;transform-origin:50%}@media (prefers-reduced-motion:no-preference){.htp-slide{animation:.22s ease-out htp-slide-in}.htp-slide.htp-from-left{animation-name:htp-slide-in-left}.htp-scene :where(g,text,circle){animation-duration:4s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}.htp-send-fly{animation-name:htp-send-fly}.htp-send-hand{animation-name:htp-send-hand}.htp-send-was{animation-name:htp-was}.htp-send-made{animation-name:htp-made}.htp-match-was{animation-name:htp-match-was}.htp-match-link{animation-name:htp-match-link}.htp-match-group{animation-name:htp-match-group}.htp-match-points{animation-name:htp-match-points}.htp-finger{animation-name:htp-finger}.htp-mix-made{animation-name:htp-made}.htp-scene>g:nth-of-type(2)>.htp-mix-made{animation-delay:.4s}.htp-scene>g:nth-of-type(3)>.htp-mix-made{animation-delay:.8s}.htp-sent{animation-name:htp-sent}.htp-mud-was{animation-name:htp-was}.htp-mud-links{animation-name:htp-mud-links}.htp-white-was{animation-name:htp-was}.htp-chain-reds{animation-name:htp-chain-reds}.htp-chain-fall{animation-name:htp-chain-fall}.htp-chain-new-link{animation-name:htp-chain-new-link}.htp-chain-greens{animation-name:htp-chain-greens}.htp-chain-points{animation-name:htp-chain-points}.htp-end-last{animation-name:htp-end-last}}@keyframes htp-slide-in{0%{opacity:0;transform:translate(12px)}}@keyframes htp-slide-in-left{0%{opacity:0;transform:translate(-12px)}}@keyframes htp-send-fly{0%,10%{opacity:1;transform:none}35%{opacity:1;transform:translate(46px,-50px)scale(.7)}36%,to{opacity:0;transform:translate(46px,-50px)}}@keyframes htp-send-hand{0%,75%{opacity:0}85%,to{opacity:1}}@keyframes htp-was{0%,35%{opacity:1}37%,to{opacity:0}}@keyframes htp-made{0%,35%{transform:scale(1)}42%{transform:scale(1.25)}52%,to{transform:scale(1)}}@keyframes htp-match-was{0%,20%{opacity:1}22%,to{opacity:0}}@keyframes htp-match-link{0%,20%{opacity:0}30%,to{opacity:1}}@keyframes htp-match-group{0%,45%{opacity:1;transform:scale(1)}52%{transform:scale(1.08)}62%,88%{opacity:0;transform:scale(0)}96%,to{opacity:1;transform:scale(1)}}@keyframes htp-match-points{0%,55%{opacity:0;transform:none}64%{opacity:1}85%,to{opacity:0;transform:translateY(-10px)}}@keyframes htp-finger{0%,15%{opacity:1;transform:none}20%{transform:scale(.8)}25%{transform:none}55%{transform:translate(30px,-62px)}60%{transform:translate(30px,-62px)scale(.8)}65%,85%{opacity:1;transform:translate(30px,-62px)}95%{opacity:0}to{opacity:0;transform:none}}@keyframes htp-sent{0%,10%{opacity:1;transform:none}35%{opacity:1;transform:translate(-50px,-50px)scale(.7)}36%,85%{opacity:0;transform:translate(-50px,-50px)}95%,to{opacity:1;transform:none}}@keyframes htp-mud-links{0%,35%{opacity:1}42%,to{opacity:0}}@keyframes htp-chain-reds{0%,18%{opacity:1;transform:scale(1)}28%,90%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes htp-chain-fall{0%,28%{animation-timing-function:ease-in;transform:none}40%,90%{transform:translateY(30px)}to{transform:none}}@keyframes htp-chain-new-link{0%,40%{opacity:0}44%,to{opacity:1}}@keyframes htp-chain-greens{0%,52%{opacity:1;transform:scale(1)}62%,90%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes htp-chain-points{0%,58%{opacity:0}64%,80%{opacity:1}88%,to{opacity:0}}@keyframes htp-end-last{0%,to{transform:none}50%{transform:translateY(-3px)}}.result .sign-in,.result .actions .primary{width:min(100%,220px);margin-inline:auto;display:block}