:root{--dusk: #1c2a24;--grove: #24362c;--moss: #3d6b4f;--vermilion: #c44536;--cinnabar: #8e2a22;--cedar: #8a5a32;--cedar-deep: #5a3518;--washi: #f6ead0;--ink: #2a1c14;--gold: #d4b46a;--mist: #c4b8a0;--safe: env(safe-area-inset-bottom, 0px);color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(48% 28% at 50% 0%,rgba(212,180,106,.16),transparent 58%),radial-gradient(40% 30% at 12% 88%,rgba(196,69,54,.18),transparent 60%),repeating-linear-gradient(90deg,rgba(61,107,79,.08) 0 10px,transparent 10px 22px),linear-gradient(180deg,#2a4034 0%,var(--dusk) 46%,#121810 100%);color:var(--washi);font-family:Zen Maru Gothic,Hiragino Maru Gothic ProN,sans-serif}body{min-height:100dvh}#app{width:min(520px,100%);margin:0 auto;min-height:100dvh;min-height:100svh;padding:calc(8px + env(safe-area-inset-top,0px)) 12px calc(12px + var(--safe));display:grid;grid-template-rows:auto auto minmax(240px,1fr) auto auto auto;gap:7px}button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.top{display:grid;grid-template-columns:1fr auto;align-items:end;gap:8px 10px}.brand h1{margin:0;font-family:Yuji Syuku,Yu Mincho,serif;font-weight:400;font-size:clamp(28px,8vw,42px);letter-spacing:.16em;line-height:1.1}.eyebrow,.ver{margin:0;font-size:11px;letter-spacing:.2em;color:var(--mist)}.ver{font-family:Share Tech Mono,ui-monospace,monospace;letter-spacing:.08em;color:var(--gold)}.pills{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.pill{min-width:56px;padding:6px 8px 5px;border:1px solid rgba(212,180,106,.32);background:#1218149e;text-align:center}.pill b{display:block;font-family:Share Tech Mono,ui-monospace,monospace;font-size:15px;line-height:1.1}.pill span{font-size:10px;letter-spacing:.12em;color:var(--mist)}.how{margin:0;font-size:12px;line-height:1.55;color:var(--mist)}.stage-wrap{position:relative;min-height:0;display:grid}.yard{position:relative;min-height:220px;height:100%;overflow:hidden;border:2px solid #6a3a1c;background:radial-gradient(42% 24% at 50% 8%,rgba(246,234,208,.14),transparent 62%),radial-gradient(80% 40% at 50% 100%,#5a3a22 0%,transparent 55%),linear-gradient(180deg,#355042,#1e3228 52%,#3a2418);box-shadow:inset 0 0 0 1px #d4b46a33,0 10px #0c100e}.roof{position:absolute;left:8%;right:8%;top:4px;height:64px;z-index:1;pointer-events:none}.eave{display:block;height:52px;background:linear-gradient(180deg,#e05442 0%,#c44536 46%,var(--cinnabar) 100%);clip-path:polygon(2% 58%,14% 8%,50% 0,86% 8%,98% 58%,50% 100%);box-shadow:0 5px #5a1c16}.ridge{position:absolute;left:22%;right:22%;top:2px;height:8px;background:#2a1610;border-radius:2px}.lanterns{position:absolute;inset:48px 10% auto;display:flex;justify-content:space-between;pointer-events:none;z-index:1}.lantern{width:18px;height:26px;border-radius:4px 4px 8px 8px;background:radial-gradient(circle at 50% 40%,#f6d27a,#c44536 70%);box-shadow:0 0 14px #f4b44673}.tube{position:absolute;left:50%;top:62px;z-index:2;width:110px;height:min(52%,196px);translate:-50% 0;display:grid;grid-template-rows:18px 1fr auto;touch-action:none}.tube-rim{height:18px;border-radius:12px 12px 3px 3px;background:radial-gradient(120% 80% at 50% 0%,rgba(255,244,210,.55),transparent 50%),linear-gradient(180deg,#e2c27a,var(--cedar-deep));box-shadow:inset 0 2px #f6ead073}.tube-body{position:relative;margin:0 10px;border-radius:0 0 14px 14px;background:linear-gradient(90deg,rgba(42,28,20,.42),transparent 22% 78%,rgba(42,28,20,.45)),repeating-linear-gradient(180deg,#a87240 0,#a87240 8px,#7a4a24 8px,#7a4a24 9px);box-shadow:inset 8px 0 #f6ead01a,0 10px #0c100c59;overflow:hidden}.sticks{position:absolute;top:10%;right:18%;bottom:8%;left:18%;display:flex;justify-content:space-between}.sticks i{width:4px;border-radius:2px;background:linear-gradient(180deg,#f6ead0,#d8c49a);box-shadow:0 0 0 1px #5a351840}.tube-hint{margin-top:6px;font-size:11px;letter-spacing:.16em;color:var(--mist)}.tube.is-shaking{animation:rattle .12s linear infinite}.fallen{position:absolute;left:50%;top:46%;z-index:3;width:8px;height:72px;margin-left:-4px;border-radius:3px;background:linear-gradient(180deg,#fff6e2,#e2c98a);box-shadow:1px 2px #2a1c1459;pointer-events:none}.fallen.is-fall{animation:fall-stick .54s ease-in forwards}.tray{position:absolute;left:18%;right:18%;bottom:9%;height:18px;border-radius:999px;background:linear-gradient(180deg,#c49652,#6a3f20);box-shadow:0 7px #3a2010}.slip-wrap{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;display:grid;place-items:center;padding:12px;background:#0c100c6b}.slip-wrap[hidden]{display:none}.slip{width:min(78%,240px);min-height:210px;padding:18px 16px 16px;background:repeating-linear-gradient(180deg,transparent 0 27px,rgba(196,69,54,.08) 27px 28px),linear-gradient(180deg,#fff8e6,var(--washi));color:var(--ink);text-align:center;border:1px solid #c9b48a;box-shadow:0 0 0 4px #f6ead033,0 16px #1a1410;display:grid;align-content:start;gap:8px;animation:unfurl .42s ease}.slip-kicker{margin:0;font-size:11px;letter-spacing:.28em;color:#8a6a3a}.slip h2{margin:0;font-family:Yuji Syuku,Yu Mincho,serif;font-weight:400;font-size:clamp(42px,12vw,64px);letter-spacing:.12em;line-height:1;color:var(--cinnabar)}.slip[data-grade=daikichi] h2{color:#b42318}.slip[data-grade=chukichi] h2,.slip[data-grade=shokichi] h2{color:#c44536}.slip[data-grade=kichi] h2,.slip[data-grade=suekichi] h2{color:#8a5a22}.slip[data-grade=kyo] h2,.slip[data-grade=daikyo] h2{color:#3a3f4a}.slip-line{margin:0;font-size:14px;line-height:1.7;letter-spacing:.04em}.slip-pts{margin:4px 0 0;font-family:Share Tech Mono,ui-monospace,monospace;font-size:12px;letter-spacing:.08em;color:#8a6a3a}.hud{display:flex;justify-content:space-between;gap:8px;font-size:12px;letter-spacing:.06em;color:var(--mist)}.hud b{color:var(--gold);font-family:Share Tech Mono,ui-monospace,monospace;font-weight:500}.history{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px;min-height:32px}.history .empty{font-size:12px;color:var(--mist);letter-spacing:.08em}.stamp{min-width:44px;padding:4px 8px;border:1px solid rgba(196,69,54,.45);color:var(--washi);font-size:12px;letter-spacing:.08em;background:#1218148c}.stamp[data-grade=daikichi]{background:#c44536;border-color:transparent;font-weight:700}.stamp[data-grade=daikyo],.stamp[data-grade=kyo]{border-color:#b4b4be59;color:#d0c8bc}.actions{display:grid;grid-template-columns:1.4fr 1fr;gap:6px}.brass,.ghost{min-height:44px;padding:0 8px;letter-spacing:.08em}.brass{background:linear-gradient(180deg,#d4b46a,#b8892c);color:#1a1420;font-weight:700;box-shadow:0 3px #7a5a1c}.brass:active{transform:translateY(2px);box-shadow:0 1px #7a5a1c}.brass:disabled,.ghost:disabled{opacity:.55;cursor:default}.ghost{border:1px solid rgba(212,180,106,.35);background:#121814b8;color:var(--washi)}.ghost:hover:not(:disabled){background:#2a382ee6}@keyframes rattle{0%,to{transform:rotate(0) translate(0)}25%{transform:rotate(-7deg) translate(-5px)}50%{transform:rotate(6deg) translate(4px)}75%{transform:rotate(-4deg) translate(-3px)}}@keyframes fall-stick{0%{opacity:1;transform:translateY(0) rotate(-8deg)}70%{opacity:1;transform:translate(12px,86px) rotate(18deg)}to{opacity:.2;transform:translate(18px,102px) rotate(22deg)}}@keyframes unfurl{0%{opacity:0;transform:translateY(-16px) scaleY(.86)}to{opacity:1;transform:none}}@media(max-width:420px){.top{grid-template-columns:1fr}.pills{justify-content:flex-start}}@media(max-height:700px){.how{display:none}.slip{min-height:170px;padding:12px 12px 10px}.slip h2{font-size:40px}}@media(max-height:560px){.brand h1{font-size:24px}.yard{min-height:170px}}@media(prefers-reduced-motion:reduce){.tube.is-shaking,.fallen.is-fall,.slip,.brass{animation:none;transition:none}}