@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{--ink:#493c27;--muted:#8b7b60;--paper:#fff7df;--accent:#efc75b;--orange:#d78556;--line:#e2d4ac;font-family:'Space Grotesk','Noto Sans SC',sans-serif;color:var(--ink);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:#f5ecd5;overflow:hidden}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:wait}button:focus-visible,input:focus-visible{outline:3px solid #df9a51;outline-offset:4px}canvas{position:fixed;inset:0;width:100%;height:100%;outline:none}.hidden{display:none!important}.topbar{position:absolute;top:0;left:0;right:0;height:94px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;z-index:10;pointer-events:none}.brand{display:flex;gap:12px;align-items:center;color:var(--ink);text-decoration:none;font-size:28px;pointer-events:auto}.brand b{font-size:20px;letter-spacing:-.6px}.brand span{font-size:12px;margin-left:5px;border-left:1px solid #d3c49e;padding-left:18px;letter-spacing:2px}.topright{display:flex;gap:22px;align-items:center;font-size:12px}.connection:before{content:'';display:inline-block;background:#cfaa50;border-radius:50%;width:6px;height:6px;margin-right:8px}.icon-btn{pointer-events:auto;border:1px solid transparent;background:#fff5d6dd;border-radius:100px;padding:9px 15px;font-size:11px;color:var(--ink);white-space:nowrap}.home{position:absolute;z-index:4;top:19%;left:6%;width:492px;background:#fff;border-radius:18px;padding:22px}.eyebrow{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:2px;color:#8d7950;font-weight:600}.eyebrow i{height:7px;width:7px;border-radius:50%;background:#d4a743}h1{font-size:68px;line-height:1.22;letter-spacing:-3px;font-weight:900;margin:24px 0 18px}h1 span{color:var(--accent)}.home-title{font-size:32px;line-height:1.4;font-weight:800;letter-spacing:-.8px;color:var(--ink);margin:0 0 24px;text-align:center;text-wrap:balance}.role-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:20px}.role{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;padding:16px 12px 14px;text-align:center;border:1px solid transparent;background:#fffaf0;border-radius:12px;color:var(--ink)}.role.selected{border:1.5px solid transparent;background:#fff0bd}.role-icon{display:block;width:176px;height:176px;object-fit:contain;flex-shrink:0;mix-blend-mode:multiply;transform:scale(1);transform-origin:center;transition:transform 320ms cubic-bezier(.34,1.56,.64,1)}.role.selected .role-icon{transform:scale(1.12)}.role b{font-size:14px;display:block;white-space:nowrap}.role small{font-size:9px;color:#9b8969;display:block;margin-top:3px}.role i{position:absolute;top:12px;right:12px;font-size:12px;color:#9c701d;opacity:0}.role.selected i{opacity:1}.actions{display:flex;gap:9px}.primary{background:var(--accent);color:#513c18;border:0;border-radius:10px;padding:16px 20px;font-size:13px;font-weight:600;display:flex;justify-content:space-between;gap:24px;align-items:center;box-shadow:0 5px 15px #9c6c231a}.actions .primary{flex:1}.primary:hover{background:#e4b43c;transform:translateY(-1px)}.primary span{font-size:20px}.secondary{border:1px solid transparent;border-radius:10px;background:#fbefc9;color:#795e2a;font-size:12px;padding:12px 17px}.join{display:flex;margin-top:12px;border-bottom:1px solid #ddcda5;padding:7px 2px}.join input{width:100%;min-width:0;background:transparent;border:0;outline:none;padding:8px 0;font-size:12px;color:#6b542e;letter-spacing:1px}.join button{white-space:nowrap;border:0;background:none;color:#8c6929;font-size:12px}.micro{font-size:9px;color:#968563;letter-spacing:.2px;margin-top:17px}.scene-tag{position:absolute;bottom:135px;right:5%;text-align:right;pointer-events:none}.scene-tag span{font-size:10px;letter-spacing:2px;color:#8b7140;display:block}.scene-tag b{font-size:22px;display:block;margin:10px 0}.scene-tag small{font-size:10px;color:#9a865f}#controls{position:absolute;bottom:0;left:0;right:0;height:54px;overflow-x:auto;overflow-y:hidden;background:#fff4d9ed;border-top:1px solid var(--line);font-size:10px;color:#8a7146;backdrop-filter:blur(10px);z-index:5;scrollbar-width:thin;scrollbar-color:#d6ba72 transparent}kbd{font-family:inherit;font-size:9px;font-weight:600;color:#705321;background:#fffaf0;border:1px solid transparent;border-radius:5px;padding:4px 7px;margin-right:5px;white-space:nowrap}.panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:430px;padding:34px;background:#fff8e7fa;backdrop-filter:blur(20px);border:1px solid #fff;border-radius:22px;z-index:15;box-shadow:0 20px 80px #80612c2c;text-align:center}.panel .eyebrow{justify-content:center}.panel h2{font-size:30px;margin:20px 0 10px}.panel p{font-size:12px;color:#8b7959;line-height:1.7}.room-code{border:1px dashed #d6bd7d;border-radius:12px;width:100%;padding:21px 10px;font-size:36px;letter-spacing:8px;background:#fff0c4;color:#916b25;font-weight:700}.panel .primary{width:100%;justify-content:center;margin-top:24px}.text-btn{background:none;border:0;color:#8e7750;font-size:12px;padding:14px}.panel small{display:block;font-size:10px;overflow-wrap:anywhere;color:#a08d6b}.hud{position:absolute;top:103px;left:6%;right:6%;display:flex;align-items:flex-start;gap:32px;z-index:5}.fighter{flex:1;max-width:450px}.fighter-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;font-size:16px;text-shadow:0 1px 8px #fff}.fighter-head b{font-size:20px}.health{background:#ffffff99;border:3px solid #fff9e6;border-radius:9px;overflow:hidden;box-shadow:0 4px 10px #87652e18;height:17px}.health i{display:block;background:#d9ae48;height:100%;width:100%;transition:width .15s}.dog .health i{background:#d18a5d}.score{font-size:22px;letter-spacing:6px;margin-top:5px;color:#b28a2f}.dog .score{text-align:right;color:#b77950}.timer{text-align:center;width:85px;flex-shrink:0}.timer span{display:block;font-size:10px;letter-spacing:2px}.timer b{font-size:51px;line-height:1.12;font-weight:700;display:block}.timer small{font-size:8px;letter-spacing:1px}.banner{position:absolute;z-index:8;top:42%;left:50%;transform:translate(-50%,-50%);text-align:center;min-width:320px;pointer-events:none;text-shadow:0 2px 20px #fff,0 2px 8px #fff}.banner>span{font-size:13px;letter-spacing:5px;display:block}.banner strong{font-size:63px;display:block;line-height:1.4;letter-spacing:-2px}.banner p{font-size:13px;line-height:1.8}.banner button{pointer-events:auto;margin:10px auto}.combat-ui{position:absolute;bottom:86px;left:0;right:0;z-index:5;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:16px}.status{background:#fff6dce8;border:1px solid #e6d5a7;padding:7px 20px;border-radius:25px;font-size:11px;letter-spacing:1px;box-shadow:0 3px 10px #94702614}.charge-track{position:absolute;bottom:0;left:0;right:0;height:2px;background:#e6d7ac;border-radius:3px;overflow:hidden;opacity:0;transition:opacity .12s}.charge-track i{display:block;height:100%;background:#d3a132;width:0;transition:width .05s}.exit{position:absolute;right:30px;bottom:0;pointer-events:auto;border:1px solid #dfcca0;border-radius:7px;background:#fff4d6e8;color:#8b703f;font-size:10px;padding:8px 14px}.toast{position:absolute;top:100px;left:50%;transform:translateX(-50%);padding:13px 22px;background:#735423f2;color:#fff;border-radius:10px;font-size:12px;z-index:100;box-shadow:0 5px 30px #0002;max-width:90vw}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}#hitflash{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 120px #ce6f4d;opacity:0;transition:opacity .15s;z-index:3}body.playing .topbar{height:70px}body.playing .hud{top:77px}body.playing .scene-tag{display:none}body.playing .combat-ui{bottom:70px}
@media(max-height:800px){.home{top:16%;width:492px}h1{font-size:54px;margin:16px 0 12px}.home-title{margin-bottom:20px}.role-picker{margin-bottom:14px}.topbar{height:75px}.scene-tag{bottom:105px}.micro{margin-top:10px}}@media(max-width:900px){.home{left:5%;width:492px}h1{font-size:50px}.brand span{display:none}.topright{gap:8px}.scene-tag{right:4%;bottom:95px}.hud{gap:12px;left:3%;right:3%}.fighter-head{font-size:12px}.timer b{font-size:40px}}@media(max-width:620px){.home{top:14%;left:6%;width:88%;max-width:492px;max-height:calc(86dvh - 78px);overflow-y:auto}h1{font-size:42px}.home-title{font-size:28px;letter-spacing:-.6px}.scene-tag{display:none}.brand b{font-size:15px}.connection{display:none}.panel{width:90%}.banner strong{font-size:42px}.exit{right:10px;bottom:0}}


@media(max-width:520px){.home{padding:16px}.role-picker{grid-template-columns:1fr;gap:10px}.role{flex-direction:row;justify-content:center;gap:8px;padding:12px 8px;text-align:left}}


.key-settings{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;border:1px solid #fffdf5;border-radius:20px;padding:28px 32px;background:#fff8e5;color:var(--ink);box-shadow:0 24px 90px #77582333}.key-settings::backdrop{background:#6951284d;backdrop-filter:blur(7px)}.settings-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.settings-heading .eyebrow{font-size:9px;letter-spacing:2.5px;color:#a48b56}.settings-heading h2{font-size:30px;letter-spacing:-1px;margin:9px 0 0}.settings-close{border:1px solid #e5d3a2;background:#f7e9bf;border-radius:50%;width:32px;height:32px;color:#8d6d2f;font-size:24px;line-height:1}.key-settings>p{font-size:11px;line-height:1.7;color:#9a8359}.binding-head,.binding-row{display:grid;grid-template-columns:minmax(112px,1fr) 108px 108px;gap:10px;align-items:center}.binding-head{margin-top:22px;padding-bottom:9px;font-size:10px;color:#a59168}.binding-head span:not(:first-child){text-align:center}.binding-row{padding:7px 0;border-top:1px solid #ebdfbf;font-size:12px}.binding-key{min-height:32px;padding:5px 8px;border:1px solid #e5d7af;border-bottom-width:3px;border-radius:6px;background:#fffdf3;color:#7b5e26;font-size:11px;white-space:nowrap}.binding-key:hover{border-color:#d2a34b}.binding-key[aria-pressed=true]{border-color:#d0a04d;background:#f4e5b7;color:#70521c;animation:key-listening 1s ease-in-out infinite alternate}.key-settings .binding-message{min-height:36px;margin:14px 0 0;color:#7c6a3c;font-size:11px}.settings-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:6px}.settings-footer .text-btn{padding-left:0}.settings-footer .primary{justify-content:center;min-width:144px;padding:13px 20px}.settings-note{display:block;margin-top:16px;font-size:10px;color:#a6926d;text-align:center}.status.spinning{background:#fff1bd;border-color:#d8bc64;color:#795620}.banner[data-phase=playing] strong,.banner[data-phase=roundover] strong,.banner[data-phase=matchover] strong{font-size:clamp(48px,6.2vw,88px);letter-spacing:.08em;white-space:nowrap;animation:battle-call .4s cubic-bezier(.2,.8,.2,1) both}.banner[data-phase=playing] strong{color:#aa791b}.banner[data-phase=roundover] strong,.banner[data-phase=matchover] strong{color:#855d3e}.banner[data-phase=playing]{pointer-events:none}.banner[data-phase=roundover],.banner[data-phase=matchover]{padding:18px 32px;border-radius:24px;background:#fff5d9e8;backdrop-filter:blur(8px)}
@keyframes key-listening{to{background:#f9edcf}}@keyframes battle-call{from{opacity:0;transform:scale(1.16) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
@media(max-width:620px){.key-settings{padding:22px 18px}.binding-head,.binding-row{grid-template-columns:minmax(96px,1fr) 88px 88px;gap:7px}.combat-ui{gap:10px}.banner[data-phase=roundover],.banner[data-phase=matchover]{padding:14px 20px;min-width:300px}}
@media(prefers-reduced-motion:reduce){.binding-key,.banner strong{animation:none!important}.role-icon{transition:none}}
@media(max-height:800px){.key-settings{padding:20px 28px}.settings-heading h2{font-size:26px;margin-top:6px}#key-settings-hint{margin:8px 0;line-height:1.5}.binding-head{margin-top:8px;padding-bottom:6px}.binding-row{padding:3px 0}.binding-key{min-height:26px;padding:3px 6px}.key-settings .binding-message{min-height:18px;margin-top:10px;line-height:1.5}.settings-footer .primary{padding:10px 20px}.settings-note{margin-top:8px}}
@media(max-width:620px){.key-settings{padding:20px 18px}.binding-head,.binding-row{grid-template-columns:minmax(88px,1fr) minmax(60px,.8fr) minmax(60px,.8fr)}}

/* All key hints stay together in one bottom row. */
.controls-row{display:flex;align-items:center;justify-content:center;gap:24px;width:max-content;min-width:100%;height:100%;padding:0 24px}
.control-item{position:relative;display:flex;align-items:center;gap:4px;flex:0 0 auto;height:34px;white-space:nowrap;font-variant-numeric:tabular-nums}
.control-item kbd{margin-right:2px}.control-roll{min-width:100px}.control-throw{min-width:140px}.control-banana{min-width:92px}
.control-item.charging .charge-track{opacity:1}#controls.locked .control-item{opacity:.5}
.role .role-icon{position:relative;z-index:1;mix-blend-mode:normal}
.role i{z-index:2}
.status{max-width:calc(100% - 160px);text-align:center}
@media(max-width:760px){.controls-row{justify-content:flex-start;gap:16px;padding:0 18px}.status{max-width:calc(100% - 132px);font-size:10px;padding:7px 12px}}

.skill-hud{position:absolute;right:28px;bottom:76px;z-index:6;display:flex;gap:18px;pointer-events:none}
.skill{width:84px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font-variant-numeric:tabular-nums;filter:drop-shadow(0 3px 7px #72542120)}
.skill-face{position:relative;display:grid;place-items:center;width:80px;height:80px;border-radius:50%;background:#fff5dbea;box-shadow:inset 0 0 0 6px #fff9e7,0 2px 6px #75531a14}
.skill-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none;stroke-width:3;stroke-linecap:round}.skill-track{stroke:#e4d5ac}.skill-progress{stroke:#c9972d;stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset .05s linear}
.skill-art{width:48px;height:48px;transition:opacity .15s,transform .15s}.skill>b{font-size:12px;font-weight:700;color:#5a421c;text-shadow:0 1px 6px #fff8e4}.skill-status{font-size:10px;color:#806124;min-height:16px;background:#fff5d9dd;border-radius:12px;padding:1px 7px;white-space:nowrap}
.skill-number{position:absolute;inset:7px;display:grid;place-items:center;border-radius:50%;font-size:25px;font-weight:700;color:#fff8df;text-shadow:0 1px 3px #392912;line-height:1;background:#493619a6}.skill-number:empty{display:none}
.skill-count{position:absolute;right:-3px;top:0;border:2px solid #fff8e2;border-radius:20px;background:#886424;color:#fff8df;font-size:10px;padding:3px 6px}
.skill[data-state=cooldown] .skill-progress{stroke:#a78b51}.skill[data-state=locked] .skill-art{opacity:.4}.skill[data-state=locked] .skill-progress{stroke:#b9a681}.skill[data-state=charging] .skill-face{background:#ffe49b}.skill[data-state=charging] .skill-art{transform:scale(1.06)}.skill[data-state=charging] .skill-progress{stroke:#b77f0c}
.combat-ui .exit{left:28px;right:auto}.status{max-width:calc(100% - 460px)}
@media(max-width:760px){.skill-hud{right:16px;gap:8px}.skill{width:70px}.skill-face{width:66px;height:66px}.skill-art{width:40px;height:40px}.skill-number{font-size:22px}.status{max-width:calc(100% - 350px);letter-spacing:0}.combat-ui .exit{left:16px}}
@media(max-width:600px){.combat-ui .status{position:absolute;bottom:126px;max-width:calc(100% - 32px)}.skill-hud{bottom:70px}.skill-status{font-size:9px}}
@media(prefers-reduced-motion:reduce){.skill-progress,.skill-art{transition:none}}
.model-loading{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;color:#8b7146;font-size:11px}
.model-loading progress{appearance:none;width:100%;height:4px;border:0;border-radius:4px;overflow:hidden;background:#f1e7cd}
.model-loading progress::-webkit-progress-bar{background:#f1e7cd}.model-loading progress::-webkit-progress-value{background:#d9ad44}.model-loading progress::-moz-progress-bar{background:#d9ad44}
.model-loading .text-btn{margin-left:auto;padding:2px 0;color:#9c701d;text-decoration:underline;font-size:11px}
/* Avoid recompositing a live blur over the WebGL scene on every camera move. */
body.playing #controls{backdrop-filter:none;background:#fff4d9}
body.playing .skill{filter:none}