:root{--dojo:#120e0b;--ink:#f4ead5;--clock:#c4b59a;--rest-c:#3ec6ff;--end-c:#e23b3b;--panel:#1c1612;--line:#f4ead529;--accent:#c45a2a;--display:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;--ui:"Segoe UI", system-ui, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;min-height:100%;margin:0}body{font-family:var(--ui);background:var(--dojo);color:var(--ink);overflow:hidden}button,input{font:inherit}.app{isolation:isolate;flex-direction:column;align-items:center;height:100dvh;padding:12px 16px 28px;display:flex;position:relative;overflow:hidden}.dojo-bg{z-index:-1;background:radial-gradient(1200px 600px at 50% -10%, #3a2a1c 0%, transparent 55%), var(--dojo);position:fixed;inset:0;overflow:hidden}.tatami{background:repeating-linear-gradient(90deg,#c45a2a12 0 46px,#0000002e 46px 48px,#f4ead50a 48px 94px,#00000038 94px 96px),repeating-linear-gradient(0deg,#0000 0 72px,#0000001f 72px 74px);animation:28s linear infinite tatami-drift;position:absolute;inset:0}@keyframes tatami-drift{0%{background-position:0 0,0 0}to{background-position:96px 0,0 74px}}.spot{background:radial-gradient(circle at 50% 40%,#ffd6961f,#0000 42%);animation:5.5s ease-in-out infinite breathe;position:absolute;inset:-20%}@keyframes breathe{50%{opacity:.55;transform:scale(1.05)}}.dust span{width:3px;height:3px;left:calc(4% * var(--i));animation:9s linear infinite rise;animation-delay:calc(var(--i) * -.5s);background:#f4ead559;border-radius:50%;position:absolute;top:110%}@keyframes rise{to{opacity:0;transform:translateY(-120vh)scale(.4)}}.corner-belt{opacity:.85;filter:drop-shadow(0 8px 12px #0006);width:180px;position:absolute}.corner-belt.left{animation:6s ease-in-out infinite sway;top:8px;left:-20px;transform:rotate(-18deg)}.corner-belt.right{animation:7s ease-in-out infinite reverse sway;bottom:12px;right:-24px;transform:rotate(16deg)}@keyframes sway{50%{transform:rotate(-12deg)translateY(6px)}}.top{justify-content:space-between;align-items:center;width:min(920px,100%);display:flex}.clock-now{letter-spacing:.12em;text-transform:lowercase;font-size:1.05rem}.status{font-family:var(--display);letter-spacing:.16em;text-transform:uppercase;border-block:1px solid var(--line);margin:10px 0 0;padding:6px 24px;font-size:clamp(1.6rem,4vw,2.4rem);animation:.45s fade-up}.now-playing{opacity:.8;margin:8px 0 0;font-size:.85rem}.stage{aspect-ratio:1;flex:none;place-items:center;width:clamp(120px,min(78vw,420px,100dvh - 400px),420px);margin-top:8px;display:grid;position:relative;container-type:inline-size}.belt-ring{position:absolute;inset:0}.belt-ring .track{fill:none;stroke:#f4ead51f;stroke-width:3.2px}.belt-ring .fill{fill:none;stroke-width:3.6px;stroke-linecap:round;transition:stroke-dasharray 80ms linear,stroke .2s}.belt-ring.ending{animation:.7s ease-in-out infinite pulse-ring}@keyframes pulse-ring{50%{filter:drop-shadow(0 0 10px var(--end-c))}}.digits{font-family:var(--display);letter-spacing:.04em;text-shadow:0 10px 40px #00000073;z-index:1;font-size:27cqw;line-height:1;animation:.5s fade-up}.app.ending .digits{animation:.7s step-end infinite blink}@keyframes blink{50%{opacity:.35}}@keyframes fade-up{0%{opacity:0;transform:translateY(8px)}}.grapplers{width:min(280px,70vw);height:clamp(40px,11dvh,90px);color:var(--ink);opacity:.7;flex:none;margin-top:-8px}.grapplers.rolling .g1{transform-origin:90px 70px;animation:1.6s ease-in-out infinite pass}.grapplers.rolling .g2{transform-origin:186px 70px;animation:1.6s ease-in-out infinite sweep}.grapplers.resting{opacity:.45}@keyframes pass{50%{transform:rotate(-12deg)translate(10px,-4px)}}@keyframes sweep{50%{transform:rotate(14deg)translate(-12px,6px)}}.knobs{flex-wrap:wrap;justify-content:center;gap:10px;width:min(920px,100%);margin-top:8px;display:flex}.knob{border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#00000059;border-radius:14px;min-width:150px;padding:8px 10px}.knob span{letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin-bottom:4px;font-size:.72rem;display:block}.knob div{justify-content:space-between;align-items:center;gap:8px;display:flex}.knob strong{font-family:var(--display);letter-spacing:.06em;font-size:1.45rem}.knob button,.icon-btn,.actions button,.drawer button,.update-toast button{cursor:pointer;color:var(--ink);background:#f4ead51a;border:0;border-radius:10px}.knob button{width:34px;height:34px;font-size:1.2rem}.icon-btn{background:0 0;width:42px;height:42px;font-size:1.3rem}.actions{gap:12px;margin-top:18px;display:flex}.actions button{min-width:140px;height:52px;font-family:var(--display);letter-spacing:.12em;text-transform:uppercase;font-size:1.35rem}.actions .start{background:linear-gradient(#3dba6b,#1f8a46);box-shadow:0 8px 24px #208c4659}.actions .stop{background:linear-gradient(#e2554a,#a61f1f)}.actions .reset{background:#2a241f}.scrim{z-index:8;background:#00000073;border:0;position:fixed;inset:0}.drawer{background:var(--panel);z-index:9;pointer-events:none;width:min(380px,92vw);padding:16px 18px 32px;transition:transform .35s cubic-bezier(.22,1,.36,1);position:fixed;top:0;bottom:0;left:0;overflow:auto;transform:translate(-110%);box-shadow:0 0 40px #00000080}.drawer.right{left:auto;right:0;transform:translate(110%)}.drawer.open{pointer-events:auto;transform:translate(0)}.drawer header{justify-content:space-between;align-items:center;display:flex}.drawer h2,.drawer h3{font-family:var(--display);letter-spacing:.08em;text-transform:uppercase;margin:0}.drawer h3{color:var(--accent);margin:18px 0 8px;font-size:1rem}.drawer .hint{opacity:.7;font-size:.85rem}.row,.color-row,.save-row{align-items:center;gap:8px;margin:8px 0;display:flex}.color-row input[type=text],.save-row input,.drawer input[type=text]{border:1px solid var(--line);color:var(--ink);background:#0e0b09;border-radius:8px;flex:1;padding:8px}.drawer .ghost{width:100%;margin-top:8px;padding:10px}.list{margin:0;padding:0;list-style:none}.list li{margin-bottom:10px}.card{text-align:left;border:1px solid var(--line);background:#0e0b09;flex-direction:column;gap:2px;width:100%;padding:10px 12px;display:flex}.list li.active .card{border-color:var(--accent)}.mini{gap:6px;margin-top:6px;display:flex}.mini button{padding:4px 8px;font-size:.78rem}.mini .danger{color:#ff8b8b}.save-row button{background:var(--accent);padding:8px 10px}.splash{z-index:20;background:#0c0907;place-items:center;display:grid;position:fixed;inset:0}.splash-card{text-align:center;width:min(360px,90vw)}.splash h1{font-family:var(--display);letter-spacing:.2em;margin:12px 0 8px}.obi{background:linear-gradient(90deg,#f2e6c9 40%,#111 40% 48%,#f2e6c9 48% 56%,#111 56% 64%,#f2e6c9 64%);border-radius:4px;height:18px;animation:1.6s ease-in-out infinite wrap}@keyframes wrap{50%{transform:scaleX(1.06)}}.bar{background:#2a241f;border-radius:99px;height:6px;margin-top:18px;overflow:hidden}.bar i{background:var(--accent);width:40%;height:100%;animation:1.2s ease-in-out infinite load;display:block}@keyframes load{0%{transform:translate(-120%)}to{transform:translate(320%)}}.update-toast{z-index:15;border:1px solid var(--accent);background:#2a1c14;border-radius:14px;align-items:center;gap:8px;padding:12px 14px;animation:.35s fade-up;display:flex;position:fixed;bottom:16px;left:50%;transform:translate(-50%)}.update-toast p{margin:0 8px 0 0}.update-toast button{background:var(--accent);padding:8px 12px}.update-toast .ghost{background:0 0}@media (width<=640px){.app{padding:10px 10px 14px}.knobs{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;display:grid}.knob{min-width:0;padding:6px}.knob span{letter-spacing:.08em;white-space:nowrap;text-overflow:ellipsis;font-size:.62rem;overflow:hidden}.knob div{gap:2px}.knob strong{letter-spacing:.02em;white-space:nowrap;min-width:0;font-size:1.1rem}.knob button{flex:none;width:26px;height:26px;padding:0;font-size:1rem}.actions{justify-content:center;gap:8px;width:100%}.actions button{letter-spacing:.08em;flex:1;min-width:0;max-width:160px;height:48px;font-size:1.15rem}}@media (width<=340px){.knob strong{font-size:.95rem}.knob button{width:22px;height:22px}}@media (height<=560px){.app{padding:6px 12px 8px}.status{margin-top:2px;padding:2px 20px;font-size:1.3rem}.grapplers{display:none}.actions{margin-top:8px}.actions button{height:42px}}.drawer.left{flex-direction:column;display:flex}.drawer .bmc{justify-content:center;margin-top:auto;padding-top:24px;display:flex}.drawer .bmc img{max-width:100%;height:auto;display:block}
