:root{--bg: #14141f;--panel: #1f1f2e;--accent: #ffd24a;--oni: #e23b3b;--hider: #4a9fe2;--text: #e8e8f0;--muted: #9a9ab0;color-scheme:dark}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;height:100dvh}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Hiragino Kaku Gothic ProN,sans-serif;-webkit-user-select:none;user-select:none;overflow:hidden;overscroll-behavior:none}#root{display:flex;flex-direction:column}button{font:inherit;color:var(--text);background:var(--panel);border:1px solid #34344a;border-radius:12px;padding:12px 16px;cursor:pointer;touch-action:manipulation}button:active{transform:scale(.97)}button:disabled{opacity:.4;cursor:default}.primary{background:var(--accent);color:#1a1a1a;font-weight:700;border:none}.secondary{background:#2a2a3d}input{font:inherit;color:var(--text);background:#0e0e16;border:1px solid #34344a;border-radius:10px;padding:12px;width:100%}.home{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center}.home h1{font-size:2.4rem;margin:0;line-height:1.1}.tagline{color:var(--muted);margin:0 0 8px}.lang-toggle{align-self:flex-end;display:flex;gap:4px;margin-bottom:-8px}.lang-toggle button{padding:4px 10px;border-radius:999px;border:1px solid #ffffff22;background:#1f1f2e;color:var(--muted);font-size:.78rem;font-weight:700}.lang-toggle button.on{background:var(--accent);color:#10131c;border-color:transparent}.field{width:100%;max-width:320px;display:flex;flex-direction:column;gap:6px;text-align:left}.field span{color:var(--muted);font-size:.85rem}.home .primary{width:100%;max-width:320px}.mode-card{width:100%;max-width:320px;display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08)}.mode-card h2{margin:0;font-size:1.05rem;display:flex;align-items:baseline;gap:8px;justify-content:center}.mode-card h2 span{font-size:.78rem;font-weight:400;color:var(--muted)}.mode-card .primary,.mode-card .secondary.wide{width:100%}.join-row{width:100%;max-width:320px;display:flex;gap:8px}.join-row input{text-transform:uppercase;letter-spacing:.15em}.join-row .secondary{white-space:nowrap}.error{color:#ff7676;font-size:.9rem}.lobby,.result{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px;text-align:center}.result{justify-content:flex-start}.lobby .roster{max-height:34vh;overflow-y:auto;width:100%}.reveal-map{width:100%;max-width:340px;aspect-ratio:1;position:relative;border-radius:12px;overflow:hidden;background:#10101a}.reveal-map .game-canvas{position:absolute;inset:0}.reveal-legend{display:flex;gap:16px;font-size:.82rem;color:var(--muted)}.reveal-legend span{display:inline-flex;align-items:center;gap:5px}.reveal-legend .dot{width:11px;height:11px;border-radius:2px;display:inline-block}.reveal-legend .dot.oni{background:#e23b3b}.reveal-legend .dot.survived{background:#4ade80}.reveal-legend .dot.caught{background:#555}.score-rank{width:100%;max-width:360px}.score-rank h3{margin:4px 0 8px;font-size:1rem}.score-rank ol{list-style:none;counter-reset:rk;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}.score-rank li{counter-increment:rk;display:flex;align-items:center;gap:8px;background:var(--panel);border-radius:8px;padding:6px 12px}.score-rank li:before{content:counter(rk);color:var(--muted);font-weight:800;min-width:18px}.score-rank li:first-child:before{content:"🥇"}.score-rank li:nth-child(2):before{content:"🥈"}.score-rank li:nth-child(3):before{content:"🥉"}.score-rank .rk-name{flex:1}.score-rank .rk-pts{color:#ffe14d;font-weight:800}.back{position:absolute;top:12px;left:12px;background:transparent;border:none;color:var(--muted)}.code-box{background:var(--panel);border-radius:14px;padding:12px 24px}.code-label{display:block;color:var(--muted);font-size:.75rem}.code-value{font-size:2rem;font-weight:800;letter-spacing:.3em}.roster{list-style:none;padding:0;margin:0;width:100%;max-width:340px;display:flex;flex-direction:column;gap:8px}.roster li{background:var(--panel);border-radius:10px;padding:10px 14px;display:flex;align-items:center;gap:8px}.roster li.offline{opacity:.45}.roster .name{flex:1;text-align:left}.tag{font-size:.72rem;padding:2px 8px;border-radius:999px;background:#34344a}.tag.host{background:var(--accent);color:#1a1a1a}.tag.you{background:var(--hider)}.tag.oni{background:var(--oni)}.tag.hider{background:var(--hider)}.tag.caught{background:#6a3030}.tag.survived{background:#2f6a3a}.tag.cpu{background:#4a4a66}.cpu-controls{display:flex;align-items:center;gap:12px}.cpu-controls .secondary{padding:8px 16px}.cpu-count{color:var(--muted);font-size:.9rem;min-width:56px}.role-pref{display:flex;flex-direction:column;align-items:center;gap:6px}.role-pref-label{color:var(--muted);font-size:.8rem}.role-pref-btns{display:flex;gap:6px}.role-opt{background:#2a2a3d;border:1px solid #34344a;padding:8px 16px;border-radius:999px;font-size:.9rem}.role-opt.on{background:var(--accent);color:#1a1a1a;border-color:var(--accent);font-weight:700}.char-pick{display:flex;flex-direction:column;align-items:center;gap:6px}.char-pick-label{color:var(--muted);font-size:.8rem}.char-pick-btns{display:flex;gap:10px}.char-opt{display:flex;flex-direction:column;align-items:center;gap:4px;background:#2a2a3d;border:2px solid #34344a;border-radius:12px;padding:8px 14px}.char-opt img{height:56px;image-rendering:pixelated}.char-opt span{font-size:.8rem}.char-opt.on{border-color:var(--accent);background:#3a3320}.roster-thumb{height:26px;image-rendering:pixelated;margin-right:2px}.count,.waiting,.conn{color:var(--muted);font-size:.85rem;margin:0}.lobby .primary{width:100%;max-width:340px}.winner{font-size:1.8rem;margin:8px 0}.winner.oni{color:var(--oni)}.winner.hider{color:var(--hider)}.result-actions{display:flex;gap:10px;width:100%;max-width:340px}.result-actions button{flex:1}.ghost{background:transparent;border:1px solid #34344a;color:var(--muted)}.adventure{margin-top:8px}.overworld{flex:1;display:flex;flex-direction:column;position:relative;min-height:0}.ow-hud{justify-content:space-between}.ow-hud .back{position:static}.ow-name{font-weight:700}.ow-reset{background:#2a2a3d;border:1px solid #34344a;padding:6px 12px;border-radius:10px;pointer-events:auto;font-size:.8rem}.ow-hud .back,.ow-reset{pointer-events:auto}.ow-toast{top:56px}.ow-controls{display:flex;justify-content:center;padding:12px 0 calc(16px + env(safe-area-inset-bottom))}.ow-pad{position:relative;width:244px;height:244px}.ow-minimap{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);image-rendering:pixelated;background:#15100a;border-radius:6px;border:2px solid #2a2418}.ow-pad .dp{position:absolute;width:54px;height:54px;padding:0;font-size:1.2rem}.ow-pad .dp.up{top:0;left:50%;transform:translate(-50%)}.ow-pad .dp.down{bottom:0;left:50%;transform:translate(-50%)}.ow-pad .dp.left{left:0;top:50%;transform:translateY(-50%)}.ow-pad .dp.right{right:0;top:50%;transform:translateY(-50%)}.game-screen{flex:1;display:flex;flex-direction:column;position:relative;min-height:0}.game-canvas{position:absolute;inset:0;touch-action:none}.game-canvas canvas{display:block;touch-action:none}.hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:10px 14px;flex-wrap:nowrap;background:linear-gradient(#14141fcc,#14141f00);pointer-events:none}.grace-inline{color:var(--accent);font-weight:800;font-size:.82rem;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}.role-badge{font-weight:800;padding:4px 12px;border-radius:999px}.role-badge.oni{background:var(--oni)}.role-badge.hider{background:var(--hider)}.timer{font-size:1.4rem;font-weight:800;font-variant-numeric:tabular-nums}.alive{margin-left:auto;color:var(--muted);font-size:.85rem}.hud .score{color:#ffe14d;font-weight:800;font-size:.95rem}.hud .ammo{color:#ffd089;font-weight:800;font-size:.95rem;font-variant-numeric:tabular-nums}.hud .ammo.empty{color:var(--oni)}.hud .meat-prog{color:#ff9d6e;font-weight:800;font-size:.95rem;font-variant-numeric:tabular-nums}.game-minimap{position:absolute;top:46px;right:10px;image-rendering:pixelated;background:#0a0f14;border:2px solid #ffffff2a;border-radius:4px;pointer-events:none}.peek-btn{position:absolute;top:190px;right:10px;z-index:5;height:34px;padding:0 12px;border-radius:999px;border:1px solid #ffffff33;background:#1f1f2edd;color:var(--text);font-size:.78rem;font-weight:700}.peek-btn:disabled{opacity:.45}.status-list{position:absolute;top:48px;left:8px;z-index:4;display:flex;flex-direction:column;gap:1px;max-height:42vh;overflow:hidden;pointer-events:none;font-size:.56rem;opacity:.7}.st-row{display:flex;align-items:center;gap:4px;background:#0a0e1688;border-radius:5px;padding:1px 5px;min-width:104px;max-width:168px;overflow:hidden;box-sizing:border-box}.st-row.me{outline:1px solid var(--accent)}.st-dot{width:6px;height:6px;border-radius:50%;flex:none}.st-dot.hider{background:var(--hider)}.st-dot.oni{background:var(--oni)}.st-name{color:var(--text);max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.st-tag{color:var(--muted)}.st-ammo{color:#ffd089;font-weight:700;margin-left:auto;font-variant-numeric:tabular-nums}.st-ammo.empty{color:var(--oni)}.st-score{color:#ffe14d;font-weight:700;margin-left:auto}.st-react{margin-left:4px;max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-size:.72rem;line-height:1;animation:st-react-pop .9s ease-out}.st-row .st-ammo+.st-react,.st-row .st-score+.st-react{margin-left:6px}@keyframes st-react-pop{0%{transform:scale(.4) translateY(3px);opacity:0}35%{transform:scale(1.15) translateY(0);opacity:1}to{transform:scale(1) translateY(0);opacity:1}}.controls{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:flex-end;padding:14px 20px calc(14px + env(safe-area-inset-bottom));pointer-events:none}.controls>*{pointer-events:auto}.briefing-hud{gap:8px;align-items:center;justify-content:space-between}.briefing-hud .back{position:static;pointer-events:auto}.lobby-banner{position:absolute;top:44px;left:50%;transform:translate(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 14px;border-radius:15px;cursor:pointer;pointer-events:auto;background:linear-gradient(180deg,#241a12f2,#14100af2);border:2px solid var(--accent);box-shadow:0 2px 14px #ffc83c59;transition:transform .12s,border-color .15s,box-shadow .15s}.lobby-banner:active{transform:translate(-50%) scale(.97)}.lobby-banner-title{font-size:1rem;font-weight:900;letter-spacing:.05em;color:var(--accent);line-height:1.1}.lobby-banner-sub{font-size:.6rem;color:#cfd6e6;line-height:1.1;white-space:nowrap}.lobby-banner-code{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;color:var(--muted);white-space:nowrap}.lobby-banner-code b{color:#fff;letter-spacing:2px;font-size:.98rem;font-weight:800}.lobby-banner .copy-ic{color:var(--accent);font-weight:700}.lobby-banner.copied{border-color:#4ade80;box-shadow:0 2px 14px #4ade8066}.lobby-banner.copied .lobby-banner-title,.lobby-banner.copied .copy-ic{color:#4ade80}.code-chip{background:#0a0e16cc;border-radius:999px;padding:4px 10px;font-size:.8rem;color:var(--muted);white-space:nowrap}.code-chip b{color:var(--text);letter-spacing:2px}.code-chip.copyable{pointer-events:auto;border:1px solid var(--accent);display:inline-flex;align-items:center;gap:5px;flex:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.code-chip.copyable .copy-ic{color:var(--accent);font-weight:700}.code-chip.copyable:active{transform:scale(.96)}.code-chip.copyable.copied{background:#1c3a24cc;border-color:#4ade80}.code-chip.copyable.copied .copy-ic{color:#4ade80}.briefing-center{position:absolute;top:43%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;z-index:5}.briefing-count{padding:7px 22px;border-radius:999px;font-weight:800;font-size:1.05rem;background:#1f1f2eee;border:1px solid var(--accent);color:var(--accent);pointer-events:none;white-space:nowrap}.briefing-count b{font-size:1.2rem;font-variant-numeric:tabular-nums}.briefing-count .zone-tag{margin-left:10px;padding:2px 10px;border-radius:999px;font-size:.85rem;color:#fff}.briefing-count .zone-tag.oni{background:var(--oni)}.briefing-count .zone-tag.hider{background:var(--hider)}.status-list .st-thumb{width:15px;height:15px;image-rendering:pixelated;border-radius:3px;flex:none}.briefing .status-list{top:118px;opacity:1;font-size:.62rem}.briefing .st-row{background:#0b1018f2}.briefing .st-name{color:#fff}.briefing .st-tag{color:#aeb6c8}.reaction-tray{position:absolute;left:16px;bottom:calc(90px + env(safe-area-inset-bottom));z-index:8}.reaction-toggle{width:48px;height:48px;border-radius:50%;border:none;background:#1f1f2ecc;font-size:1.4rem;line-height:1;pointer-events:auto}.reaction-toggle.on{background:#3a3320}.reaction-pop{position:fixed;inset:0;z-index:9;display:flex;align-items:flex-end;justify-content:center;padding:0 16px calc(150px + env(safe-area-inset-bottom))}.reaction-grid{display:flex;flex-direction:column;gap:8px;padding:12px;max-width:340px;background:#11151fee;border:1px solid #ffffff22;border-radius:14px}.reaction-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.reaction-emoji{width:44px;height:44px;border-radius:10px;border:none;background:#1f1f2e;font-size:1.4rem;line-height:1}.reaction-comment{height:36px;padding:0 12px;border-radius:999px;border:1px solid #ffffff22;background:#1f1f2e;color:var(--text);font-size:.9rem;font-weight:700}.reaction-flash{position:absolute;left:50%;bottom:56px;transform:translate(-50%);white-space:nowrap;font-size:1.5rem;font-weight:800;color:var(--text);text-shadow:0 1px 3px #000a;pointer-events:none;animation:reaction-flash-up 1s ease-out forwards}@keyframes reaction-flash-up{0%{opacity:0;transform:translate(-50%,6px) scale(.7)}20%{opacity:1;transform:translate(-50%) scale(1.1)}to{opacity:0;transform:translate(-50%,-28px) scale(1)}}.briefing-controls{justify-content:center;flex-wrap:wrap;gap:8px}.briefing-controls .secondary,.briefing-controls .primary{height:48px;min-width:0;padding:0 14px;border-radius:14px;font-weight:800;font-size:.95rem}.briefing-controls .paint-btn{height:48px;min-width:0;padding:0 16px}.briefing-controls .start-btn{background:var(--accent);color:#1a1405}.briefing-controls .waiting{align-self:center;color:var(--muted)}.char-pop{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;background:#0a0a12cc}.char-pop-grid{display:flex;flex-wrap:wrap;gap:10px;max-width:320px;justify-content:center;padding:16px}.toast{position:absolute;top:64px;left:50%;transform:translate(-50%);padding:8px 22px;border-radius:999px;font-weight:800;font-size:1.1rem;pointer-events:none;animation:toastPop 1.2s ease-out forwards}.toast.good{background:#2f6a3a;color:#fff}.toast.miss{background:#3a3a4d;color:var(--muted)}.toast.bad{background:var(--oni);color:#fff}.toast.catch{top:40%;font-size:1.5rem;padding:12px 30px;background:linear-gradient(180deg,#3ea55a,#227a3c);color:#fff;border:2px solid #ffd24a;box-shadow:0 4px 22px #ffd24a8c;animation:toastCatch 1.4s ease-out forwards}@keyframes toastCatch{0%{opacity:0;transform:translate(-50%) scale(.6)}18%{opacity:1;transform:translate(-50%) scale(1.15)}32%{transform:translate(-50%) scale(1)}75%{opacity:1}to{opacity:0;transform:translate(-50%,-14px) scale(1)}}@keyframes toastPop{0%{opacity:0;transform:translate(-50%,6px) scale(.9)}15%{opacity:1;transform:translate(-50%) scale(1)}80%{opacity:1}to{opacity:0}}.grace-banner{position:absolute;top:56px;left:50%;transform:translate(-50%);padding:8px 20px;border-radius:999px;font-weight:800;font-size:1rem;background:#1f1f2eee;border:1px solid var(--accent);color:var(--accent);pointer-events:none;white-space:nowrap}.intro{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0a12cc;padding:24px;z-index:5}.intro-card{background:var(--panel);border:1px solid #34344a;border-radius:16px;padding:22px 20px;max-width:320px;text-align:center;display:flex;flex-direction:column;gap:10px}.intro-card h3{margin:0;font-size:1.3rem}.intro-card p{margin:0;color:var(--text);font-size:.95rem;line-height:1.5}.intro-card b{color:var(--accent)}.intro-tap{color:var(--muted);font-size:.8rem;margin-top:6px}.paint-btn{align-self:center;min-width:120px;height:64px;border-radius:16px;font-weight:800;font-size:1.05rem;background:var(--hider);border:none;color:#fff}.paint-btn.done{background:#2f6a3a}.taunt-btn{align-self:center;min-width:92px;height:64px;border-radius:16px;font-weight:800;font-size:1rem;background:#c79a16;border:none;color:#1a1405}.taunt-btn:disabled{background:#3a3a4d;color:var(--muted)}.action-hint{align-self:center;color:var(--muted);font-size:.9rem;max-width:120px;text-align:center}.seek-btn{align-self:center;min-width:110px;height:64px;border-radius:16px;font-weight:800;font-size:1.05rem;background:var(--oni);border:none;color:#fff}.seek-btn:disabled{background:#3a3a4d;color:var(--muted)}.seek-hint{align-self:center;display:inline-flex;align-items:center;justify-content:center;min-width:120px;height:52px;padding:0 16px;border-radius:16px;font-weight:800;font-size:.95rem;color:#fff;text-align:center;background:#0a0e16cc;border:1.5px solid var(--oni);pointer-events:none}.seek-hint.empty{border-color:#3a3a4d;color:var(--muted)}.paint-palette{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:8px;background:#0e0e16cc;border-radius:10px}.swatch{width:34px;height:34px;padding:0;border-radius:8px;border:2px solid #00000040}.swatch.on{border-color:#fff;box-shadow:0 0 0 2px var(--accent)}.swatch.eraser,.swatch.tool{display:flex;align-items:center;justify-content:center;font-size:1rem}.swatch.eraser,.swatch.tool{background:#2a2a3d}.swatch.picker{position:relative;display:flex;align-items:center;justify-content:center;font-size:.95rem;overflow:hidden;cursor:pointer}.swatch.picker input[type=color]{position:absolute;inset:0;opacity:0;width:100%;height:100%;border:none;padding:0;cursor:pointer}.paint-tip{font-size:.82rem;color:var(--accent)}.paint-toolbar{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 16px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(#14141f00,#14141fcc 30%)}.paint-actions{display:flex;gap:10px}.paint-actions button{min-width:92px}.paint-grip{align-self:center;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;font-size:.8rem;color:var(--muted);letter-spacing:.15em;padding:4px 18px;border-radius:999px;background:#0e0e16cc}.paint-grip:active{cursor:grabbing}.paint-color-row{display:flex;align-items:center;gap:18px}.color-wheel{display:flex;flex-direction:column;align-items:center;gap:6px}.cw-wrap{position:relative}.cw-wrap canvas{display:block;touch-action:none;border-radius:50%}.cw-marker{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 3px #000a;transform:translate(-50%,-50%);pointer-events:none}.cw-bright{width:116px}.paint-tools{display:flex;flex-direction:column;gap:8px}.paint-brush-row{display:flex;align-items:center;gap:10px}.paint-brush-label{font-size:.8rem;color:var(--muted)}.brush-slider{flex:1;min-width:90px;accent-color:var(--accent)}.paint-brush-val{min-width:22px;text-align:center;font-weight:800;color:var(--text)}@media(orientation:landscape){.hud{padding:8px 16px}.paint-toolbar{flex-direction:row;align-items:flex-end;justify-content:space-between;position:absolute;left:0;right:0;bottom:0;gap:12px;padding:10px 22px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(#14141f00,#14141f99);pointer-events:none}.paint-toolbar>*{pointer-events:auto}.paint-color-row{background:#0e0e16cc;border-radius:12px;padding:8px 12px}.paint-actions{flex-direction:column;gap:8px}.paint-tip{position:absolute;left:50%;bottom:12px;transform:translate(-50%);pointer-events:none}}@keyframes ok-cutin-line{0%{transform:rotate(-3deg) translate(20%);opacity:0}30%{opacity:1}to{transform:rotate(-3deg) translate(-120%);opacity:0}}@keyframes ok-cutin-particle{0%{transform:translate(0);opacity:0}10%{opacity:1}85%{opacity:.8}to{transform:translate(-130vw,7vw);opacity:0}}