:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f4ead9;background:#0b1220;font-synthesis:none;--ink:#0b1220;--panel:#101b2b;--panel2:#172537;--line:#5c7080;--warm:#efb776;--mint:#78d4c5;--red:#db5865}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{overscroll-behavior:none}
button,input{font:inherit;color:inherit}
button{border:1px solid #718493;background:#172537;color:#edf2ec;min-height:42px;padding:10px 14px;cursor:pointer;clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px);-webkit-tap-highlight-color:transparent}
button:hover{background:#22354a;border-color:#a7b7bd}
button:active{transform:translateY(1px)}
button:focus-visible,canvas:focus-visible,summary:focus-visible{outline:2px solid var(--warm);outline-offset:3px}
button[aria-pressed=true]{border-color:var(--warm);color:#ffd7a5;background:#2d3440}
button:disabled{opacity:.45;cursor:not-allowed}
#app{position:relative;width:100%;height:100dvh;isolation:isolate;background:var(--ink)}
canvas{display:block;width:100%;height:100%;image-rendering:pixelated;outline:none!important;touch-action:none}
.grain{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px #05091466;z-index:3}
[hidden]{display:none!important}

#game-hud{position:absolute;left:max(14px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top));z-index:5;width:min(300px,48vw);pointer-events:none}
#player-card,#ally-card{display:flex;gap:9px;align-items:center;background:#091321ed;border:1px solid #536b78;padding:7px 9px;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
#player-card>img{width:42px;height:42px;object-fit:contain;image-rendering:pixelated;background:#142437;border:1px solid #796a57}
.player-vitals{min-width:0;flex:1}
.hud-line{display:flex;justify-content:space-between;gap:8px;align-items:center;font:700 9px/1.2 ui-monospace,monospace;letter-spacing:1px}
.hud-line span{color:#b3c0c7;font-size:8px}
.meter{height:7px;background:#050b13;border:1px solid #4f606d;padding:1px;overflow:hidden}
.meter i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--red),#ed9b66);transition:width .12s linear}
.meter.guard i{background:var(--mint)}.meter.focus i{background:var(--warm)}.meter.charge i{background:#fff0c2}
.resource-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;margin-top:5px;font:700 6px/1 ui-monospace,monospace;color:#9fb1b8}
.resource-row .meter{height:5px}
#charge-track{margin-top:4px;height:4px}
#ally-card{margin-top:5px;width:82%;padding:5px 7px}
#ally-card img{width:28px;height:28px;object-fit:contain;image-rendering:pixelated}
#ally-card>div{flex:1;min-width:0}
#ally-name{display:block;font:700 7px ui-monospace,monospace;letter-spacing:1px}
#ally-status{display:block;color:#b9c9c9;font:6px/1.25 ui-monospace,monospace;margin-top:2px}

#game-tools{position:absolute;right:max(14px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));z-index:6}
#game-tools button{width:44px;height:42px;padding:0;background:#091321ed;font-size:17px}
#game-tools img{width:28px;height:28px;display:block;margin:auto;image-rendering:pixelated}
#boss-hud{position:absolute;z-index:5;left:50%;top:max(14px,env(safe-area-inset-top));transform:translateX(-50%);width:min(420px,45vw);pointer-events:none;background:#091321ed;border:1px solid #665d62;padding:7px 10px}
#boss-hud .meter{margin-top:5px}.meter.boss i{background:linear-gradient(90deg,#843b51,#e16b67)}
#location-intro{position:absolute;z-index:5;left:50%;top:15px;transform:translateX(-50%);min-width:190px;padding:8px 18px 9px;text-align:center;pointer-events:none;background:#091621e8;border:1px solid #7892a766;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);animation:location 2.4s both}
#location-intro small{display:block;color:var(--mint);font:700 8px ui-monospace,monospace;letter-spacing:3px}
#location-intro b{display:block;margin-top:4px;font-size:clamp(16px,2.2vw,22px);letter-spacing:.2px}
@keyframes location{0%{opacity:0;transform:translate(-50%,8px)}12%,70%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
#fight-banner{position:absolute;z-index:5;top:29%;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;text-shadow:0 3px 10px #050914;animation:banner .9s both}
#fight-banner small{display:block;color:var(--mint);font:8px ui-monospace,monospace;letter-spacing:4px}
#fight-banner b{display:block;margin-top:6px;font-size:clamp(20px,4vw,40px)}
@keyframes banner{0%{opacity:0;transform:translate(-50%,8px)}20%,65%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
#combo{position:absolute;z-index:5;left:max(18px,env(safe-area-inset-left));top:98px;color:#f5c078;font:700 22px ui-monospace,monospace;text-shadow:2px 2px #8f3d4b}
#combo small{font-size:7px}

#touch{display:none;position:absolute;z-index:6;pointer-events:none}
#stick{position:absolute;width:112px;height:112px;border:1px solid #6c8490;background:#0a1625e8;touch-action:none;pointer-events:auto;display:grid;place-items:center;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
.stick-cross{color:#b8d1d62e;font-size:66px;font-weight:100}
#knob{position:absolute;width:42px;height:42px;background:#557480;border:1px solid #b7d5d4;pointer-events:none;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
.touch-actions{position:absolute;display:flex;align-items:flex-end;gap:8px;pointer-events:none}
.touch-action{pointer-events:auto;touch-action:none;width:68px;height:58px;padding:5px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#122238f2}
.touch-action img{display:block;width:28px;height:28px;image-rendering:pixelated;filter:drop-shadow(0 2px 0 #050914)}.touch-action span{font:700 7px ui-monospace,monospace;letter-spacing:.6px;margin-top:3px}
.touch-action.attack{height:68px;border-color:#d9827b;background:#382231f2}.touch-action.defense{border-color:#62b7ad;background:#123338f2}.touch-action.jump{border-color:#c99d68}
#context-action{position:absolute;pointer-events:auto;touch-action:none;background:#263747f2;border-color:#e5bd84;min-width:112px;height:40px;padding:5px 10px}
#context-action img{width:25px;height:25px;vertical-align:middle;image-rendering:pixelated;margin-right:6px}#context-action span{font:700 8px ui-monospace,monospace;letter-spacing:.8px}

.veil{position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:18px;background:#07101bd9}
.panel{width:min(430px,100%);max-height:calc(100dvh - 36px);overflow:auto;padding:26px;background:#101b2bf7;border:1px solid #657887;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);box-shadow:0 20px 70px #000a}
.panel h1,.panel h2{margin:0;color:#f5e9d6}.panel h1{font-size:30px;letter-spacing:-1px}.panel h2{font-size:30px;margin:6px 0 18px}
.panel p{color:#aebdc3;font-size:12px;line-height:1.55}
.panel>button,.lobby-actions button{display:block;width:100%;margin-top:8px}
.panel .primary{background:var(--warm);color:#111b29;border-color:#ffd49d;font-weight:800;text-align:left}.primary span{float:right}
.panel-brand{display:flex;gap:13px;align-items:center}
.panel-brand .seal{display:grid;place-items:center;width:45px;height:45px;border:1px solid #9e7d5a;color:var(--warm);font-size:25px;background:#0b1523}
.panel-brand small,.eyebrow,label{font:700 8px ui-monospace,monospace;letter-spacing:2px;color:var(--mint)}
.panel-brand p{margin:2px 0 0;font:700 8px ui-monospace,monospace;letter-spacing:2px;color:#9cafba}
.lead{margin:18px 0 12px}
.character-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.character-choices button{display:flex;align-items:center;text-align:left;padding:8px;min-width:0}
.character-choices img{width:50px;height:50px;object-fit:contain;image-rendering:pixelated;margin-right:7px}
.character-choices b{display:block;font:800 11px ui-monospace,monospace;letter-spacing:1px}
.character-choices small{display:block;margin-top:3px;font-size:8px;color:#9fb1b8;line-height:1.3}
#invite-row,#pause-invite{margin-top:12px}#invite-row>div,#pause-invite>div{display:flex;margin-top:5px}
input{min-width:0;flex:1;background:#07111e;border:1px solid #5c7080;padding:9px;color:#cce4dc;font:9px ui-monospace,monospace}
#invite-row button,#pause-invite button{min-height:0}
#net-status{margin:10px 0 0;color:#d0b98f;font:9px/1.4 ui-monospace,monospace}
.how-to{margin-top:12px;border-top:1px solid #455867;padding-top:10px}
.how-to summary{cursor:pointer;color:#c9d7d7;font:700 10px ui-monospace,monospace;letter-spacing:1px}
.how-to p{font-size:10px;margin:9px 0}.how-to button{width:100%;margin-top:7px}
.icon-menu{display:flex!important;align-items:center;gap:9px;text-align:left}.icon-menu img{width:24px;height:24px;image-rendering:pixelated}
.loading-panel small{display:block;margin-top:10px;color:#9fb1b8}.loading-panel progress{width:100%;height:5px;accent-color:var(--warm)}
.pause-panel{width:min(380px,100%)}.pause-panel details{margin:12px 0}.pause-panel>button{margin-top:8px}

@media(pointer:coarse),(max-width:760px){
 #touch:not([hidden]){display:block;left:0;right:0;bottom:0;height:calc(146px + env(safe-area-inset-bottom));background:linear-gradient(180deg,#07101b00,#07101bcc 24%,#07101bf5);padding-bottom:env(safe-area-inset-bottom)}
 #stick{left:max(18px,env(safe-area-inset-left));bottom:calc(17px + env(safe-area-inset-bottom))}
 .touch-actions{right:max(16px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom))}
 #context-action{right:max(16px,env(safe-area-inset-right));bottom:calc(94px + env(safe-area-inset-bottom))}
 #game-hud{width:min(260px,66vw)}
 #boss-hud{top:72px;width:min(330px,78vw)}
 #combo{top:84px}
 .panel{padding:20px}
}
@media(pointer:coarse) and (orientation:landscape),(max-height:560px){
 #touch:not([hidden]){height:116px;background:linear-gradient(180deg,#07101b00,#07101bb8)}
 #stick{width:94px;height:94px;bottom:10px}
 .touch-actions{bottom:10px}.touch-action{width:62px;height:51px}.touch-action.attack{height:60px}
 #context-action{bottom:70px}
 #game-hud{width:225px;top:9px;left:10px}#player-card>img{width:34px;height:34px}
 #boss-hud{top:9px;width:300px}
 #game-tools{top:9px;right:10px}
 .panel{max-height:calc(100dvh - 18px);padding:15px}
 .panel h2{font-size:24px;margin-bottom:10px}.panel p{margin:7px 0}.how-to{margin-top:7px}
}
@media(max-width:380px){
 #game-hud{left:8px;top:8px;width:230px}#game-tools{right:8px;top:8px}
 #player-card>img{width:36px;height:36px}
 #touch:not([hidden]){height:136px}
 #stick{width:98px;height:98px;left:12px;bottom:14px}
 .touch-actions{right:10px;gap:5px;bottom:14px}
 .touch-action{width:58px;height:52px}.touch-action.attack{height:60px}
 #context-action{right:10px;bottom:80px;min-width:100px}
 .character-choices{grid-template-columns:1fr}.character-choices img{width:38px;height:38px}
}
@media(max-width:760px) and (orientation:portrait){#location-intro{top:88px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}