:root{color-scheme:dark;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;--bg: #0b0c0a;--surface: #151613;--surface-raised: #1c1d19;--line: #34362f;--line-strong: #575950;--ink: #f1efe7;--muted: #92938a;--dim: #686a62;--paper: #e7e4da;--paper-ink: #171814;--signal: #e8b84d;--clear: #b9d49a;--burn: #d86e54;--safe-top: max(10px, env(safe-area-inset-top));--safe-right: max(14px, env(safe-area-inset-right));--safe-bottom: max(10px, env(safe-area-inset-bottom));--safe-left: max(14px, env(safe-area-inset-left))}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;min-height:100%}html{background:#060705}body{margin:0;overflow:hidden;background:#060705;color:var(--ink);overscroll-behavior:none;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}button{margin:0;border:0;border-radius:0;font:inherit}button,dialog{color:inherit}button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}[hidden]{display:none!important}.app-shell{position:relative;display:grid;grid-template-rows:36px minmax(0,1fr) 16px;gap:clamp(6px,1.1dvh,10px);width:min(100%,430px);height:100vh;height:100dvh;min-height:100svh;margin:0 auto;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);overflow:hidden;background:var(--bg);isolation:isolate}.topbar{display:flex;align-items:center;justify-content:space-between;min-width:0;border-bottom:1px solid var(--line)}.wordmark{display:flex;align-items:baseline;gap:.17em;margin:0;font-size:.83rem;font-weight:760;letter-spacing:.12em;line-height:1}.wordmark__slash{color:var(--signal);letter-spacing:-.1em}.about-trigger,.about__close{min-width:44px;min-height:32px;padding:0;background:transparent;color:var(--muted);font-size:.61rem;font-weight:680;letter-spacing:.15em;cursor:pointer}.about-trigger:hover,.about__close:hover{color:var(--ink)}.game{display:grid;grid-template-rows:auto auto 24px auto auto;align-content:space-between;gap:clamp(5px,1.05dvh,9px);min-height:0}.hud{display:grid;grid-template-columns:1.35fr 1.08fr .94fr .82fr;min-height:52px;border-bottom:1px solid var(--line)}.stat{display:flex;flex-direction:column;justify-content:center;min-width:0;margin:0;padding:4px clamp(5px,2vw,10px);border-left:1px solid var(--line)}.stat:first-child{padding-left:0;border-left:0}.stat:last-child{padding-right:0}.stat dt,.results dt{color:var(--muted);font-size:.58rem;font-weight:700;letter-spacing:.15em;line-height:1}.stat dd,.results dd{margin:5px 0 0;font-variant-numeric:tabular-nums lining-nums;line-height:1}.stat dd{overflow:hidden;font-size:clamp(1.08rem,5.7vw,1.5rem);font-weight:590;letter-spacing:-.045em;text-overflow:ellipsis}.stat--score dd{font-size:clamp(1.35rem,7vw,1.75rem)}.stat--time dd{color:#d8d6cd;font-weight:650;letter-spacing:-.035em}.stat--time.is-time-low dd{color:var(--signal)}.stat--time.is-time-urgent{background:#e8b84d0a}.stat--time.is-time-urgent dd{color:#efc979}.current{display:grid;place-items:center;align-content:center;gap:clamp(6px,1.1dvh,10px);min-height:clamp(116px,18.5dvh,164px)}.section-label,.eyebrow{margin:0;color:var(--muted);font-size:.59rem;font-weight:720;letter-spacing:.18em;line-height:1}.piece{display:grid;place-items:center;font-variant-numeric:tabular-nums lining-nums}.piece--current{position:relative;width:clamp(106px,16.8dvh,142px);aspect-ratio:1;border:1px solid #faf8ef;border-radius:3px;background:var(--paper);color:var(--paper-ink);box-shadow:0 6px #2d2e29,0 8px 20px #0000003d}.piece--current:before,.piece--current:after{position:absolute;width:5px;height:5px;border-radius:50%;background:#8c8a82;content:""}.piece--current:before{top:9px;left:9px}.piece--current:after{right:9px;bottom:9px}.piece__value{font-size:clamp(4.8rem,13.4dvh,7rem);font-weight:680;letter-spacing:-.08em;line-height:.8;transform:translate(-.025em)}.piece__notch{position:absolute;left:50%;width:22%;height:3px;background:var(--signal);transform:translate(-50%)}.piece__notch--top{top:0}.piece__notch--bottom{bottom:0}.message-line{position:relative;display:grid;place-items:center;min-height:24px}.onboarding,.feedback{grid-area:1 / 1;margin:0;font-size:.68rem;font-weight:650;letter-spacing:.035em;line-height:1.2;text-align:center}.onboarding{color:#c7c6bd}.feedback{min-width:1px;color:var(--muted);letter-spacing:.09em}.feedback:not(:empty)+.onboarding,.feedback--place,.feedback--denied{color:var(--ink)}.feedback--clear{color:var(--clear)}.feedback--burn{color:var(--burn)}.columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,2.5vw,11px);width:100%;height:clamp(196px,31.5dvh,270px);max-height:100%}.column{--fill: 0%;position:relative;display:grid;grid-template-rows:auto 1fr auto auto;align-items:center;min-width:0;min-height:0;padding:13px 11px 11px;overflow:hidden;border:1px solid var(--line);border-radius:3px;background:var(--surface);color:var(--ink);cursor:pointer;touch-action:manipulation;transition:border-color .14s ease,background-color .14s ease,transform .1s ease}.column:before{position:absolute;top:0;right:0;left:0;height:3px;background:var(--line-strong);content:""}.column:hover{border-color:var(--line-strong);background:var(--surface-raised)}.column:active{transform:translateY(2px)}.column__index{justify-self:start;color:var(--dim);font-size:.57rem;font-weight:700;letter-spacing:.12em;line-height:1}.column__track{position:absolute;top:30px;right:11px;left:11px;height:2px;overflow:hidden;background:#292a25}.column__fill{display:block;width:var(--fill);height:100%;background:var(--signal);transition:width .18s ease}.column__sum{align-self:end;justify-self:center;margin-bottom:3px;font-size:clamp(2.7rem,13.3vw,3.55rem);font-weight:570;letter-spacing:-.075em;line-height:.9;font-variant-numeric:tabular-nums lining-nums;transform:translate(-.04em)}.column__denominator{align-self:start;justify-self:center;color:var(--dim);font-size:.58rem;font-weight:650;letter-spacing:.08em;line-height:1}.column__state{align-self:end;justify-self:center;margin-top:9px;color:var(--muted);font-size:.53rem;font-weight:750;letter-spacing:.13em;line-height:1}.column__strike{position:absolute;top:50%;left:50%;display:none;width:128%;height:2px;background:var(--burn);transform:translate(-50%,-50%) rotate(-68deg)}.column.is-burned{border-color:#4b312c;background-color:#121210;background-image:repeating-linear-gradient(-45deg,transparent 0,transparent 8px,rgb(216 110 84 / 5%) 8px,rgb(216 110 84 / 5%) 9px);color:#797970}.column.is-burned:before{background:#694238}.column.is-burned .column__track,.column.is-burned .column__denominator{visibility:hidden}.column.is-burned .column__sum{color:#807a72;font-size:clamp(3.65rem,17vw,4.5rem);font-weight:300}.column.is-burned .column__state{color:var(--burn)}.column.is-burned .column__strike{display:block}.column.is-place{animation:place .18s ease-out}.column.is-clear{z-index:1;border-color:var(--clear);background:var(--clear);color:#172015;animation:clear .32s ease-out}.column.is-clear:before,.column.is-clear .column__fill{background:#172015}.column.is-clear .column__denominator,.column.is-clear .column__state,.column.is-clear .column__index{color:#354331}.column.is-burn{animation:burn .28s ease-out}.column.is-denied{animation:denied .22s ease-out}.queue{display:flex;align-items:center;justify-content:center;gap:16px;min-height:58px;padding-top:8px;border-top:1px solid var(--line)}.section-label--queue{width:42px}.queue__pieces{display:flex;gap:9px;margin:0;padding:0;list-style:none}.piece--preview{width:48px;height:48px;border:1px solid #4a4b44;border-radius:2px;background:#252620;color:#d0cec5;font-size:1.65rem;font-weight:580;line-height:1}.piece--preview:nth-child(2){border-color:#363832;background:#1a1b18;color:#8d8e86}.footer{display:flex;align-items:end;justify-content:space-between;color:#5e6059;font-size:.48rem;font-weight:650;letter-spacing:.14em;line-height:1}.game-over{position:absolute;z-index:10;inset:0;display:grid;align-items:end;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);background:#050605c7;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.game-over__panel{width:100%;padding:24px 22px 22px;border:1px solid var(--line-strong);border-radius:4px;background:#171815;box-shadow:0 -12px 48px #0000005c;animation:panel-in .26s cubic-bezier(.2,.75,.3,1)}.game-over h2,.about h2{margin:10px 0 0;font-size:clamp(2rem,10vw,2.75rem);font-weight:540;letter-spacing:-.055em;line-height:.98}.game-over h2{font-size:clamp(1.8rem,9vw,2.6rem)}.new-best{float:right;margin:-3px 0 0;padding:5px 7px;border:1px solid var(--signal);color:var(--signal);font-size:.58rem;font-weight:760;letter-spacing:.14em;line-height:1;animation:new-best .34s ease-out .12s both}.results{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:0;margin:28px 0 24px;padding:17px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.results>div{padding:0 12px;border-left:1px solid var(--line)}.results>div:first-child{padding-left:0;border-left:0}.results dd{margin-top:8px;overflow:hidden;font-size:1.35rem;font-weight:570;letter-spacing:-.04em;text-overflow:ellipsis}.results__primary dd{font-size:1.75rem}.play-again{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:58px;padding:0 18px;border:1px solid var(--paper);border-radius:2px;background:var(--paper);color:var(--paper-ink);font-size:.83rem;font-weight:750;letter-spacing:.075em;cursor:pointer}.play-again:after{content:"→";font-size:1.2rem;font-weight:450}.play-again:hover{background:#fffdf5}.play-again:active{transform:translateY(1px)}.about{width:min(calc(100% - 32px),380px);max-height:min(650px,calc(100dvh - 32px));margin:auto;padding:22px;overflow:auto;border:1px solid var(--line-strong);border-radius:4px;background:#171815;box-shadow:0 24px 70px #0009}.about::backdrop{background:#040504d1;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.about[open]{animation:dialog-in .2s ease-out}.about__head{display:flex;align-items:center;justify-content:space-between;padding-bottom:13px;border-bottom:1px solid var(--line)}.about h2{margin-top:24px}.about p:not(.eyebrow){margin:20px 0 0;color:#b7b7ae;font-size:.82rem;line-height:1.55}.about__rule{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:24px}.about__rule span{height:5px;background:var(--signal)}.about__rule span:nth-child(2){background:#b0af9f}.about__rule span:nth-child(3){background:#77786f}.about .about__privacy{padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:.72rem}@keyframes place{0%{border-color:var(--line-strong);transform:translateY(0)}42%{border-color:var(--signal);transform:translateY(3px)}to{border-color:var(--line);transform:translateY(0)}}@keyframes clear{0%{transform:scale(1)}44%{box-shadow:0 0 0 4px #b9d49a2e;transform:scale(1.035)}to{box-shadow:none;transform:scale(1)}}@keyframes burn{0%,to{transform:translate(0)}30%{transform:translate(-3px)}60%{transform:translate(3px)}}@keyframes denied{0%,to{filter:brightness(1)}50%{filter:brightness(1.45)}}@keyframes panel-in{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes dialog-in{0%{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes new-best{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media(max-height:700px){.app-shell{grid-template-rows:32px minmax(0,1fr) 12px;gap:5px}.game{grid-template-rows:auto auto 20px auto auto;gap:4px}.hud{min-height:45px}.current{min-height:104px;gap:5px}.piece--current{width:clamp(96px,16.5dvh,112px);box-shadow:0 4px #2d2e29}.piece__value{font-size:clamp(4.25rem,12.8dvh,5.4rem)}.columns{height:clamp(178px,29.8dvh,210px)}.queue{min-height:50px;padding-top:5px}.piece--preview{width:42px;height:42px;font-size:1.45rem}.column{padding-top:10px;padding-bottom:8px}.column__track{top:25px}.column__state{margin-top:5px}}@media(min-width:600px){.app-shell{border-right:1px solid #20211d;border-left:1px solid #20211d}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.column:active,.play-again:active{transform:none}}@media(forced-colors:active){.column,.piece,.play-again{border:2px solid ButtonText}.column.is-burned{border-style:dashed}.column__strike{background:ButtonText}}
