:root{--ink:#111827;--paper:#fbf8f1;--accent:#b91c1c;--blue:#2563eb;--muted:#6b7280;--panel:#fbf8f1f0;--radius:14px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}html,body{overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;background:#1f2937;height:100%;margin:0}.ippon-root{color:var(--ink);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);font-family:system-ui,Hiragino Sans,Noto Sans JP,sans-serif;position:fixed;inset:0;overflow:hidden;container-type:size}.stage-box,.stage-box canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.overlay{box-sizing:border-box;background:#11182740;justify-content:center;align-items:center;padding:16px;display:flex;position:absolute;inset:0;overflow-y:auto;padding-bottom:calc(16px + var(--banner-h,0px))!important}.overlay[hidden]{display:none}.panel{background:var(--panel);border:3px solid var(--ink);border-radius:var(--radius);box-shadow:6px 6px 0 var(--ink);box-sizing:border-box;width:min(460px,100%);max-height:calc(100% - 32px);padding:20px 24px;overflow-y:auto}.panel.wide{width:min(900px,100%)}.panel h2{letter-spacing:.04em;margin:0 0 14px;font-family:Hiragino Mincho ProN,Yu Mincho,Noto Serif JP,serif;font-size:28px;font-weight:900}.menu{flex-direction:column;gap:10px;margin-bottom:14px;display:flex}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.btn{font:inherit;border:3px solid var(--ink);color:var(--ink);cursor:pointer;box-shadow:3px 3px 0 var(--ink);text-align:left;background:#fff;border-radius:10px;padding:12px 16px;font-size:18px;font-weight:700}.btn:active{box-shadow:1px 1px 0 var(--ink);transform:translate(2px,2px)}.btn:disabled{opacity:.45;cursor:default}.btn.primary{background:var(--accent);color:#fff}.btn.ghost{box-shadow:none;background:0 0;border-color:#0000;padding-left:0;text-decoration:underline}.btn.small{padding:6px 10px;font-size:14px}.btn.danger{border-color:var(--accent);color:var(--accent)}.field{flex-direction:column;gap:6px;font-size:15px;font-weight:600;display:flex}.field.check{flex-direction:row;align-items:center}.field input[type=range],.field select{width:100%;font:inherit}.settings{flex-direction:column;gap:14px;margin-bottom:14px;display:flex}.room-code{letter-spacing:.25em;text-align:center;margin:12px 0;font-size:44px;font-weight:900}.status{color:var(--muted)}.note{color:var(--muted);font-size:13px}.records{border-collapse:collapse;width:100%;margin-bottom:8px;font-size:15px}.records th,.records td{text-align:right;border-bottom:1px solid #e5e7eb;padding:6px 4px}.records th:first-child{text-align:left}.howto p{margin:0 0 10px;line-height:1.7}.howto{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;display:grid}.howto-card{border:2px solid var(--ink);background:#fff;border-radius:12px;padding:10px 12px}.howto-card h3{margin:0 0 8px;font-size:19px}.howto-card h4{margin:10px 0 6px;font-size:15px}.howto-card p{margin:8px 0 0;font-size:15px;line-height:1.6}.howto-pic{aspect-ratio:16/9;object-fit:contain;border:2px solid var(--ink);background:#f3e3c3;border-radius:8px;width:100%;margin-top:6px;display:block}.howto-buttons{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.howto-sep{width:10px}.howto-key{box-sizing:border-box;border:3px solid var(--ink);background:#fff;border-radius:50%;justify-content:center;align-items:center;min-width:44px;height:44px;padding:0 6px;font-size:14px;font-weight:900;display:inline-flex}.howto-key.dir{background:#2563eb40;border-radius:40%;font-size:18px}.howto-key.guard{background:#2563eb40;border-radius:40%}.title-screen{text-align:center;cursor:pointer;padding:24px}.logo{color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:6px 6px 0 var(--accent);letter-spacing:.04em;margin:0;font-family:Hiragino Mincho ProN,Yu Mincho,Noto Serif JP,serif;font-size:clamp(44px,9cqw,96px);font-weight:900}.logo-sub{color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;margin-top:6px;font-size:clamp(16px,3cqw,24px);font-weight:800}.tagline{color:#fff;text-shadow:0 2px 6px #0009;margin-top:18px;font-size:18px;font-weight:700}.press{color:#fff;margin-top:28px;font-size:18px;animation:1.4s infinite blink}@keyframes blink{50%{opacity:.25}}.hud-layer{pointer-events:none;position:absolute;inset:0}.hud-bar{bottom:calc(env(safe-area-inset-bottom) + 10px);pointer-events:auto;gap:6px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.hud-btn{font:inherit;border:2px solid var(--ink);cursor:pointer;background:#ffffffd9;border-radius:8px;min-width:40px;height:36px;font-size:16px}.touch-controls{padding:0 calc(env(safe-area-inset-right) + 18px) calc(env(safe-area-inset-bottom) + 18px) calc(env(safe-area-inset-left) + 18px);pointer-events:none;--size:min(calc(clamp(56px, 18cqh, 84px) * var(--btn-scale,1)), calc((100cqh - 18px - env(safe-area-inset-bottom) - 28px) / 3.4));justify-content:space-between;align-items:flex-end;display:flex;position:absolute;bottom:0;left:0;right:0}.touch-controls.two{--size:min(calc(clamp(44px, 15cqh, 68px) * var(--btn-scale,1)), calc((100cqh - 18px - env(safe-area-inset-bottom) - 74px) / 4));--gap:10px;padding-left:calc(env(safe-area-inset-left) + 12px);padding-right:calc(env(safe-area-inset-right) + 12px)}.touch-side{grid-template-columns:var(--size) var(--size);gap:var(--gap);pointer-events:auto;display:grid}.touch-controls.two .touch-pad{display:contents}.touch-controls.two .touch-btn{width:var(--size);height:var(--size);font-size:min(calc(15px * var(--btn-scale,1)), calc(var(--size) * .23));border-radius:50%;grid-row:auto;margin:0}.touch-controls.two .touch-btn.act{grid-column:1/span 2;justify-self:start}.touch-side.p2 .touch-btn.act{justify-self:end}.touch-controls.two .touch-btn.tsuki{grid-row:2}.touch-controls.two .touch-btn.men{grid-row:3}.touch-controls.two .touch-btn.guard{font-size:min(calc(15px * var(--btn-scale,1)), calc(var(--size) * .2));border-radius:40%;grid-row:4}.touch-controls.two .touch-btn.dir{font-size:min(calc(24px * var(--btn-scale,1)), calc(var(--size) * .36));border-radius:40%;grid-area:5}.touch-tag{color:#fff;border-radius:8px;grid-area:1/1/auto/span 2;justify-self:start;padding:2px 10px;font-size:15px;font-weight:900}.touch-side.p2 .touch-tag{justify-self:end}.touch-side.p1 .touch-tag{background:#2563eb}.touch-side.p2 .touch-tag{background:#dc2626}.touch-side.p1 .touch-btn{border-color:#1e3a8a}.touch-side.p2 .touch-btn{border-color:#7f1d1d}.touch-controls.swapped{flex-direction:row-reverse}.touch-controls.swapped .pad-act{justify-items:start}.touch-pad{pointer-events:auto;gap:14px;display:flex}.pad-act{grid-template-columns:calc(var(--size) * 1.25);grid-template-rows:var(--size) var(--size) calc(var(--size) * 1.1);justify-items:end;gap:12px;display:grid}.touch-btn{width:var(--size);height:var(--size);border:3px solid var(--ink);background:rgba(255, 255, 255, var(--btn-opacity,.55));font:inherit;font-weight:900;font-size:min(calc(18px * var(--btn-scale,1)), calc(var(--size) * .24));color:var(--ink);touch-action:none;-webkit-tap-highlight-color:transparent;border-radius:50%}.touch-btn.dir{font-size:min(calc(30px * var(--btn-scale,1)), calc(var(--size) * .42))}.touch-btn.down{background:#fbbf24e6;transform:scale(.94)}.touch-btn.tsuki{grid-row:1}.touch-btn.men{grid-row:2}.touch-btn.guard{width:calc(var(--size) * 1.25);height:calc(var(--size) * 1.1);background:rgba(37, 99, 235, calc(var(--btn-opacity,.55) * .5));border-radius:40%;grid-row:3}@container (height<=520px) and (orientation:landscape){.panel{width:min(720px,100%)}.menu{grid-template-columns:1fr 1fr;display:grid}.panel h2{margin-bottom:10px;font-size:22px}}@container (height<=420px){.panel{padding:14px 18px}.btn{padding:8px 12px;font-size:16px}}.rotate-hint{display:none}@media (orientation:portrait) and (pointer:coarse){.rotate-hint{z-index:10;color:#fff;text-align:center;background:#1f2937;flex-direction:column;justify-content:center;align-items:center;font-size:20px;font-weight:700;display:flex;position:absolute;inset:0}.rotate-hint div{font-size:64px}.rotate-hint p{margin:8px 24px}.rotate-hint .btn{text-align:center;margin:12px 0}.rotate-hint .note{color:#d1d5db;font-size:14px;font-weight:500}.ippon-root.force-landscape{transform-origin:0 0;width:100dvh;height:100dvw;padding:env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) env(safe-area-inset-top);inset:0 auto auto 0;transform:translate(100dvw)rotate(90deg)}.ippon-root.force-landscape .rotate-hint{display:none}}.notice{color:#fff;background:#111827d9;border-radius:12px;padding:12px 20px;font-size:20px;font-weight:800;position:absolute;top:38%;left:50%;transform:translate(-50%,-50%)}.toast{color:#fde68a;pointer-events:none;white-space:nowrap;background:#111827e0;border-radius:12px;padding:10px 18px;font-size:18px;font-weight:800;animation:.25s ease-out toast-in;position:absolute;top:27%;left:50%;transform:translate(-50%)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,-8px)}}.profile{border-bottom:2px dashed #d1d5db;flex-direction:column;gap:6px;margin-bottom:12px;padding-bottom:12px;display:flex}.profile-label{font-size:15px;font-weight:600}.profile-row{align-items:center;gap:8px;display:flex}.profile-row .btn{white-space:nowrap}.name-input{font:inherit;border:3px solid var(--ink);border-radius:10px;flex:1;min-width:0;padding:6px 10px;font-size:18px}.name-preview{margin:0;font-size:14px}.note.warn{color:var(--accent);margin:0}.title-list{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin-bottom:14px;display:grid}.title-item{font:inherit;text-align:left;border:2px solid var(--ink);color:var(--ink);cursor:pointer;background:#fff;border-radius:10px;grid-template-columns:1fr auto;gap:2px 8px;padding:8px 12px;display:grid}.title-item.current{background:var(--accent);color:#fff}.title-item.locked{color:var(--muted);cursor:default;background:#f3f4f6;border-color:#d1d5db}.title-name{font-size:18px;font-weight:800}.title-need{grid-column:1;font-size:13px}.title-progress{grid-area:1/2/span 2;align-self:center;font-size:14px;font-weight:700}.overlay.editing{align-items:flex-start}.panel.editing{padding:12px 16px}.panel.editing>:not(.profile){display:none}.panel.editing .profile{border:none;margin:0;padding:0}.panel.editing .profile-title,.profile-done{display:none}.panel.editing .profile-done{display:inline-block}.panel.join-screen{padding:12px 18px}.join-head{justify-content:space-between;align-items:center;display:flex}.join-head h2{margin:0;font-size:22px}.join-head .btn.ghost{padding:4px 0}.code-entry{justify-content:center;align-items:center;gap:12px;margin:2px 0 10px;display:flex}.code-slots{gap:6px;display:flex}.code-slot{text-align:center;border:3px solid var(--ink);background:#fff;border-radius:8px;width:1.4em;height:1.5em;font-size:30px;font-weight:900;line-height:1.5em}.code-slot.next{border-color:var(--accent);box-shadow:0 0 0 3px #b91c1c33}.code-entry .btn{padding:12px 22px}.keypad{grid-template-columns:repeat(11,minmax(0,1fr));gap:6px;margin-bottom:8px;display:grid}.key{font:inherit;border:2px solid var(--ink);height:42px;color:var(--ink);cursor:pointer;box-shadow:2px 2px 0 var(--ink);background:#fff;border-radius:8px;padding:0;font-size:20px;font-weight:800}.key:active{box-shadow:1px 1px 0 var(--ink);transform:translate(1px,1px)}.key.erase{background:#f3f4f6;grid-column:span 2}.join-screen .note{text-align:center;margin:0}