:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}#root{text-align:center;border-inline:1px solid var(--border);box-sizing:border-box;flex-direction:column;width:1126px;max-width:100%;min-height:100svh;margin:0 auto;display:flex}body{margin:0}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}*{box-sizing:border-box}body{color:#fff;background:#050505;margin:0;font-family:Arial,sans-serif}.app{text-align:center;min-height:100vh;padding:40px 20px}h1{letter-spacing:6px;margin:0;font-size:48px}.app-tabs{background:#0c0c0ceb;border:1px solid #333;border-radius:999px;grid-template-columns:1fr 1fr;gap:8px;width:min(520px,100%);margin:0 auto 28px;padding:6px;display:grid}.app-tab{color:#8aa0c8;letter-spacing:2px;background:0 0;border-radius:999px;padding:12px 18px;font-size:14px}.app-tab.active{color:#000;background:#fff}.subtitle{color:#777;letter-spacing:5px;margin-bottom:35px}.camera{aspect-ratio:16/9;background:#111;border:1px solid #333;border-radius:20px;width:min(1100px,100%);margin:auto;position:relative;overflow:hidden}video{object-fit:cover;width:100%;height:100%;transform:scaleX(-1)}canvas{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;transform:scaleX(-1)}.start{z-index:10;background:#050505;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.start h2{letter-spacing:6px;font-size:38px}.start p{color:#777}button{color:#000;cursor:pointer;background:#fff;border:0;border-radius:999px;padding:16px 42px;font-size:18px;font-weight:700}.status{background:#000000bf;border-radius:999px;padding:10px 18px;font-size:14px;position:absolute;top:20px;left:20px}.info{grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:15px;width:min(1100px,100%);margin:25px auto;display:grid}.info div{background:#0d0d0d;border:1px solid #333;border-radius:15px;padding:20px}.info span{color:#666;letter-spacing:3px;font-size:12px;display:block}.info strong{margin-top:10px;font-size:24px;display:block}.mic-panel{position:relative}.mic-panel.active{border-color:#58ff9abf}.mic-meter{background:#ffffff1f;border-radius:999px;width:100%;height:6px;margin-top:12px;overflow:hidden}.mic-meter b{border-radius:inherit;background:linear-gradient(90deg,#58ff9a,#53d4ff,#fff);height:100%;transition:width 80ms linear;display:block}.speech-panel.active{border-color:#ffcc66bf}.voice-transcripts{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:min(1100px,100%);margin:10px auto 0;display:grid}.voice-transcript{text-align:left;background:#0a0a0adb;border:1px solid #ffcc6661;border-radius:12px;min-height:78px;padding:14px 20px}.voice-transcript span{letter-spacing:3px;font-size:11px;font-weight:800;display:block}.player1-voice{border-color:#53d4ff75}.player1-voice span{color:#53d4ff}.player2-voice{border-color:#ff6b6b80}.player2-voice span{color:#ff6b6b}.player3-voice{border-color:#58ff9a75}.player3-voice span{color:#58ff9a}.player4-voice{border-color:#ffcc6680}.player4-voice span{color:#fc6}.voice-transcript strong{color:#fff;overflow-wrap:anywhere;margin-top:6px;font-size:clamp(20px,4vw,34px);line-height:1.18;display:block}.speech-control{text-align:left;grid-column:1/-1}.speech-control small{color:#9ca3af;font-size:13px;display:inline-block}.speech-start-button{border-radius:999px;margin-left:14px;padding:8px 14px;font-size:13px;display:inline-flex}.player-marker{z-index:8;pointer-events:none;place-items:center;gap:4px;min-width:74px;min-height:42px;display:grid;position:absolute;transform:translate(-50%,-110%)}.player-marker:before{content:"";opacity:.55;border:3px solid;border-radius:999px;position:absolute;inset:-28px -18px;box-shadow:0 0 22px}.player-marker span{color:#fff;letter-spacing:2px;text-shadow:0 0 8px #000;background:#000000c7;border:2px solid;border-radius:999px;padding:9px 15px;font-size:18px;font-weight:900;position:relative}.player-marker small{color:#fff;letter-spacing:1px;text-shadow:0 0 6px #000;background:#000000b8;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:800;position:relative}.player-marker.player1{color:#53d4ff}.player-marker.player2{color:#ff6b6b}.player-marker.player3{color:#58ff9a}.player-marker.player4{color:#fc6}.player-marker.attacking span{background:#501478d9;box-shadow:0 0 24px #cc5cfff2}.player-marker.attacking small{background:#125678e0;box-shadow:0 0 18px #58d6ffd1}.player-marker.attacking:before{opacity:.95;border-color:#8eeeff;box-shadow:0 0 30px #58d6fff2,inset 0 0 24px #74ebff59}.player-marker.defending span{background:#145c70e6;border-color:#b8ffff;box-shadow:0 0 24px #74ebfff2,inset 0 0 18px #ffffff2e}.player-marker.defending small{color:#e9ffff;background:#0a3646e6;box-shadow:0 0 18px #69f5ffc7}.player-marker.defending:before{opacity:1;background:#47d5ff1f;border-color:#b8ffff;box-shadow:0 0 34px #69f5fff2,inset 0 0 34px #ffffff38}.thunder-charge,.heal-charge{background:#000000b8;border:1px solid #d2f8ffe6;border-radius:999px;width:96px;height:8px;position:relative;overflow:hidden;box-shadow:0 0 16px #58d6ffa6}.thunder-charge b,.heal-charge b{border-radius:inherit;background:linear-gradient(90deg,#6fe7ff,#fff);height:100%;display:block;box-shadow:0 0 18px #fffffff2}.heal-charge{border-color:#7effb1f2;box-shadow:0 0 16px #58ff9ab3}.heal-charge b{background:linear-gradient(90deg,#58ff9a,#fff);box-shadow:0 0 18px #58ff9af2}.fireball-charge{background:#140a04d1;border:1px solid #ff903ab3;border-radius:8px;width:108px;padding:5px 7px 6px;position:relative;box-shadow:0 0 14px #ff5e1c5c}.fireball-charge strong{color:#ffd28a;letter-spacing:1px;text-shadow:0 0 7px #ff4e00e6;margin-bottom:4px;font-size:10px;font-weight:900;line-height:1;display:block}.fireball-charge div{grid-template-columns:repeat(5,1fr);gap:3px;height:7px;display:grid}.fireball-charge b{background:#ffffff29;border-radius:999px;display:block}.fireball-charge b.filled{background:linear-gradient(90deg,#ff5c14,#ffdf6e);box-shadow:0 0 10px #ff7e20f2}.fireball-charge.ready{border-color:#ffd868f2;box-shadow:0 0 20px #ff721ca6}.player-marker.damaged:before{opacity:1;background:#f003;border-color:#ff2b2b;box-shadow:0 0 28px #ff2828f2,inset 0 0 34px #ff1414bf}.player-marker.damaged span{background:#b40000e0;border-color:#ff2b2b}.player-marker.missing{opacity:.78}.player-marker.missing:before{background:#ff545421;border-style:dashed;border-color:#fc6;box-shadow:0 0 26px #ff7850cc,inset 0 0 28px #ff785052}.player-marker.missing span{background:#5f2212e6;border-color:#fc6}.player-marker.missing small{color:#ffe7ba;background:#5c1212e6}.instruction{color:#777;margin-top:40px;font-size:20px;line-height:1.8}.instruction strong{color:#fff;letter-spacing:4px;font-size:30px}.status-row{justify-content:center;gap:16px;max-width:1100px;margin:16px auto 10px;display:flex}.tiny-panel{text-align:center;background:#111111e6;border:1px solid #5ea3ffb3;border-radius:14px;min-width:160px;padding:12px 18px}.tiny-panel span{color:#8aa0c8;letter-spacing:3px;font-size:12px;display:block}.tiny-panel strong{color:#fff;margin-top:6px;font-size:28px;display:block}.player2-panel{border-color:#ff7850cc}.player3-panel{border-color:#58ff9ab8}.player4-panel{border-color:#ffcc66c2}.settings-screen{text-align:left;width:min(760px,100%);margin:24px auto 0}.settings-page{background:linear-gradient(145deg,#161c28fa,#080a10fa);border:1px solid #53d4ff52;border-radius:18px;padding:clamp(24px,5vw,42px);box-shadow:0 18px 48px #00000052}.settings-header{border-bottom:1px solid #ffffff1a;margin-bottom:10px;padding-bottom:24px}.settings-header h2{color:#fff;letter-spacing:5px;margin:0;font-size:32px}.settings-kicker{color:#53d4ff;letter-spacing:3px;margin-bottom:8px;font-size:11px;font-weight:800}.settings-description{color:#8e9bad;margin-top:10px;font-size:14px}.settings-item{border-bottom:1px solid #ffffff1a;grid-template-columns:minmax(0,1fr) 180px;align-items:center;gap:28px;min-height:92px;padding:20px 0;display:grid}.settings-item-copy label{color:#d9d9d9;font-size:17px;font-weight:700;display:block}.settings-item-copy p{color:#8190a3;margin-top:6px;font-size:13px;line-height:1.5}.settings-item select{color:#fff;cursor:pointer;background:#0a111b;border:1px solid #53d4ff73;border-radius:10px;width:100%;padding:13px 14px;font-size:16px}.toggle{color:#aaa;background:#111923;border:1px solid #536174;border-radius:10px;width:100%;padding:12px 18px;font-size:15px}.toggle.active{color:#fff;background:#53d4ff29;border-color:#53d4ff;box-shadow:inset 0 0 18px #53d4ff14}.settings-footer{color:#8e9bad;letter-spacing:1px;justify-content:flex-end;align-items:center;gap:8px;margin-top:22px;font-size:13px;display:flex}.settings-save-dot{background:#58ff9a;border-radius:50%;width:7px;height:7px;box-shadow:0 0 10px #58ff9acc}.battle-result-screen{z-index:50;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#000c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.battle-result-card{text-align:center;background:#121212f5;border:2px solid #fc6;border-radius:20px;padding:40px 60px;box-shadow:0 0 40px #ffcc6659}.battle-result-title{color:#ffc857;letter-spacing:8px;margin-bottom:12px;font-size:22px}.battle-result-winner{letter-spacing:8px;color:#fff;font-size:clamp(42px,7vw,96px);font-weight:900}.battle-result-sub{color:#d9d9d9;letter-spacing:2px;margin-top:12px;font-size:16px}.best-waza{background:#ffcc6614;border:1px solid #ffcc668c;border-radius:8px;width:min(520px,78vw);margin:26px auto 24px;padding:14px}.best-waza-label{color:#ffc857;letter-spacing:4px;text-transform:uppercase;font-size:13px;font-weight:900}.best-waza img{aspect-ratio:16/9;object-fit:cover;border:1px solid #fff3;border-radius:6px;width:100%;margin:12px 0;display:block}.best-waza-name{color:#fff;font-size:clamp(22px,4vw,36px);font-weight:900;line-height:1.15}.best-waza-damage{color:#ff6b6b;letter-spacing:2px;margin-top:6px;font-size:20px;font-weight:900}.best-waza-id{color:#9ca3af;letter-spacing:1px;overflow-wrap:anywhere;margin-top:7px;font-size:11px;font-weight:700}@media (width<=700px){h1{font-size:30px}.info{grid-template-columns:1fr}.settings-screen{margin-top:12px}.settings-page{padding:22px 18px}.settings-header h2{font-size:26px}.settings-item{grid-template-columns:1fr;gap:12px;padding:18px 0}.settings-item select,.settings-item .toggle{max-width:none}}.mouth-debug{color:#555;margin-top:15px;font-family:monospace;font-size:14px}.face-status{background:#000000d9;border-radius:15px;flex-direction:column;gap:8px;padding:15px;font-family:monospace;font-weight:700;display:flex;position:absolute;top:20px;right:20px}.state{border-radius:8px;padding:6px 12px}.state.open{border:2px solid #0f8}.state.closed{border:2px solid #f36}.debug{color:#555;margin-top:15px;font-family:monospace;font-size:13px}