:root{
  --ink:#eef9ff;
  --muted:#9cc3d9;
  --panel:rgba(4,17,32,.89);
  --line:rgba(109,226,255,.36);
  --cyan:#50eaff;
  --cyan2:#00a9d6;
  --gold:#ffd361;
  --danger:#ff5470;
  --good:#79f2a7;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#020913;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
button,select,input{font:inherit}
button{touch-action:manipulation}
#app{position:relative;width:100%;height:100%;background:radial-gradient(circle at 50% 25%,#0e3152 0,#061525 46%,#020913 100%)}
#gameCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:auto;background:#061526}
.screen{position:absolute;inset:0;display:none;place-items:center;padding:20px;background:linear-gradient(180deg,rgba(2,9,19,.45),rgba(2,9,19,.82));z-index:30;overflow:auto}
.screen.active{display:grid}
.panel{width:min(760px,94vw);padding:clamp(24px,4vw,44px);border:1px solid var(--line);background:linear-gradient(145deg,rgba(4,20,37,.96),rgba(4,13,25,.92));box-shadow:0 28px 80px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.035);clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}
.hero-panel{text-align:center}
.eyebrow{margin:0 0 8px;color:var(--cyan);font-size:.76rem;font-weight:900;letter-spacing:.2em}
h1{margin:0;font-size:clamp(3rem,10vw,7rem);line-height:.86;letter-spacing:.03em;text-shadow:0 0 28px rgba(80,234,255,.25)}
h2{margin:.2em 0 .5em;font-size:clamp(1.8rem,4vw,3rem)}
.tagline{margin:18px auto;color:#d4edf7;font-size:clamp(1rem,2vw,1.25rem)}
.loop-line{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:9px;margin:24px 0;color:#bde9f7;font-size:.8rem;font-weight:900;letter-spacing:.12em}.loop-line b{color:var(--gold)}
.setup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;text-align:left;margin:24px 0}
label{color:var(--muted);font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
select{display:block;width:100%;margin-top:7px;padding:12px 13px;color:var(--ink);background:#071b2d;border:1px solid var(--line);border-radius:8px;outline:none;text-transform:none;letter-spacing:0}
select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(80,234,255,.12)}
.deployment-row{display:flex;align-items:center;gap:12px;text-align:left;margin:6px 0 20px;padding:12px;border:1px dashed var(--line);background:rgba(80,234,255,.045)}
#deploymentInput{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.file-button{flex:0 0 auto;display:inline-flex;padding:10px 12px;color:#06121f;background:var(--gold);border-radius:7px;cursor:pointer}.deployment-row span{color:var(--muted);font-size:.8rem;line-height:1.35}
.primary,.secondary{min-height:48px;padding:12px 20px;border-radius:7px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.primary{color:#03101b;background:linear-gradient(180deg,#73f2ff,#22bfdc);border:0;box-shadow:0 8px 28px rgba(34,191,220,.22)}
.secondary{color:var(--ink);background:rgba(255,255,255,.055);border:1px solid var(--line)}
.primary:hover,.secondary:hover{filter:brightness(1.08)}
.hero-panel>.primary{width:min(360px,100%)}
.fineprint{margin:18px 0 0;color:#7ba0b3;font-size:.72rem;line-height:1.5}
.small-panel{text-align:center;width:min(440px,94vw)}.small-panel button{width:100%;margin-top:10px}
.result-panel{width:min(830px,95vw)}.result-panel>p{color:#bfdae6}.result-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.result-actions button{flex:1 1 190px}
.result-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:18px 0}.result-stats div{padding:13px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}.result-stats small{display:block;color:var(--muted)}.result-stats b{font-size:1.35rem;color:var(--cyan)}
.result-loot{max-height:250px;overflow:auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.loot-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:10px 3px;border-bottom:1px solid rgba(255,255,255,.07)}.loot-row:last-child{border:0}.loot-row small{display:block;color:var(--muted)}.loot-row em{color:var(--gold);font-style:normal;font-weight:800}
.hud{position:absolute;z-index:12;inset:12px 16px auto;display:grid;grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr);gap:16px;align-items:start;pointer-events:none}.hidden{display:none!important}.hud-left,.hud-center,.hud-right{padding:10px 12px;background:rgba(3,12,23,.79);border:1px solid rgba(80,234,255,.25);backdrop-filter:blur(8px)}.hud-center{text-align:center}.hud-center b{display:block;color:var(--cyan);letter-spacing:.12em}.hud-center span,.hud-center small{display:block}.hud-center small{color:var(--muted)}.hud-right{display:flex;justify-content:flex-end;gap:22px}.hud-right div{text-align:right}.hud-right span{display:block;color:var(--muted);font-size:.64rem}.hud-right b{font-size:1.15rem}.bar-block+.bar-block{margin-top:6px}.bar-label{display:flex;justify-content:space-between;font-size:.72rem}.bar{height:9px;margin-top:4px;background:#08111b;border:1px solid rgba(255,255,255,.12);overflow:hidden}.bar i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#ff4d71,#ff8b5a)}.bar.sync i{width:0;background:linear-gradient(90deg,#26c9f3,#b880ff)}
.party-rail{position:absolute;z-index:13;left:16px;top:128px;display:grid;gap:7px;pointer-events:none}.party-chip{display:grid;grid-template-columns:34px minmax(90px,1fr);gap:8px;align-items:center;padding:7px 9px;color:#eafaff;background:rgba(3,12,23,.79);border:1px solid rgba(80,234,255,.22)}.party-chip img{width:34px;height:34px;object-fit:contain;filter:hue-rotate(var(--hue,0deg))}.party-chip small{display:block;color:var(--muted)}
.toast{position:absolute;z-index:24;left:50%;bottom:98px;transform:translate(-50%,18px);max-width:min(600px,90vw);padding:11px 16px;color:#04121e;background:var(--gold);font-weight:900;border-radius:999px;opacity:0;pointer-events:none;transition:.22s}.toast.show{opacity:1;transform:translate(-50%,0)}
.pause-button{position:absolute;z-index:18;right:16px;top:112px;width:44px;height:44px;color:var(--ink);background:rgba(3,12,23,.78);border:1px solid var(--line);border-radius:50%;font-weight:900}
.desktop-hint{position:absolute;z-index:13;left:50%;bottom:12px;transform:translateX(-50%);padding:7px 10px;color:#b9dce9;background:rgba(3,12,23,.72);border:1px solid rgba(80,234,255,.18);font-size:.72rem;white-space:nowrap}
.mobile-controls{position:absolute;z-index:16;inset:auto 0 0;display:flex;justify-content:space-between;align-items:end;padding:0 14px max(12px,env(safe-area-inset-bottom));pointer-events:none}.joystick{position:relative;width:124px;height:124px;border-radius:50%;border:1px solid rgba(80,234,255,.34);background:rgba(4,17,32,.42);pointer-events:auto;touch-action:none}.joystick i{position:absolute;left:42px;top:42px;width:40px;height:40px;border-radius:50%;background:rgba(80,234,255,.65);box-shadow:0 0 18px rgba(80,234,255,.28)}.action-stack{display:grid;grid-template-columns:repeat(2,74px);gap:8px;pointer-events:auto}.action{width:74px;height:58px;border-radius:50%;color:var(--ink);background:rgba(5,20,36,.78);border:1px solid var(--line);font-size:.7rem;font-weight:900}.action.attack{height:74px;background:rgba(21,95,122,.78)}.action.burst.ready{color:#06121f;background:var(--gold)}
@media(max-width:760px){.setup-grid{grid-template-columns:1fr}.deployment-row{align-items:flex-start;flex-direction:column}.hud{inset:8px 8px auto;grid-template-columns:1fr auto;gap:7px}.hud-center{grid-row:2;grid-column:1/3}.hud-right{gap:13px}.party-rail{top:152px;left:8px}.party-chip{grid-template-columns:28px minmax(72px,1fr);font-size:.75rem}.party-chip img{width:28px;height:28px}.pause-button{right:8px;top:126px}.result-stats{grid-template-columns:repeat(2,1fr)}.desktop-hint{display:none!important}.panel{padding:24px 18px}.screen{padding:10px}}
@media(pointer:fine){.mobile-controls{display:none!important}}
@media(pointer:coarse){.desktop-hint{display:none!important}}