:root{
  --bg:#05080d; --panel:#0a1119; --panel-2:#0e1721; --line:rgba(185,214,230,.14);
  --text:#edf4f8; --muted:#7f8b9a; --dim:#4f5c6d; --cyan:#7cf7ff; --cyan-2:#32cad8;
  --red:#ff647c; --gold:#ffd56b; --purple:#b28cff;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#020508;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;overflow:hidden}
body{display:grid;place-items:center}
button{font:inherit}
#game-shell{width:min(1320px,100vw);height:min(800px,100vh);display:grid;grid-template-rows:78px minmax(0,1fr) 68px;background:#05080d;overflow:hidden;border:1px solid rgba(180,210,225,.09);box-shadow:0 22px 90px rgba(0,0,0,.55)}
#top-hud,#bottom-hud{position:relative;z-index:40;background:linear-gradient(180deg,#091019,#070c12);border-color:rgba(180,210,225,.10)}
#top-hud{display:grid;grid-template-columns:1.05fr 1.15fr 1.1fr 1.2fr 1fr;border-bottom:1px solid rgba(124,247,255,.11)}
.top-cell{min-width:0;display:flex;flex-direction:column;justify-content:center;padding:0 16px;border-right:1px solid rgba(255,255,255,.055);position:relative}
.top-cell:last-child{border-right:0}.top-cell:before{content:"";position:absolute;top:0;left:0;width:26px;height:2px;background:rgba(124,247,255,.45)}
.micro-label{display:block;color:#536173;font-size:7px;font-weight:950;letter-spacing:.2em;text-transform:uppercase}
.room-cell strong{font-size:29px;line-height:1;margin-top:3px;font-variant-numeric:tabular-nums}.room-cell #room-name{margin-top:4px;color:#a9b8c5;font-size:8px;font-weight:900;letter-spacing:.13em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.law-cell b{margin-top:5px;color:var(--cyan);font-size:11px;letter-spacing:.11em}.law-cell #wave-label{margin-top:4px;color:#627386;font-size:7px;font-weight:950;letter-spacing:.16em}
.combat-cell{display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:1fr 1fr;align-items:center;column-gap:7px}.status-dot{width:7px;height:7px;border-radius:50%;background:#63ecff;box-shadow:0 0 10px #63ecff;animation:statusPulse 1s ease-in-out infinite;grid-row:1}.combat-cell>b{font-size:8px;letter-spacing:.18em;color:#c7d2da}.combat-cell>strong{font-size:16px;color:#ff8292;font-variant-numeric:tabular-nums}.sub-stat{font-size:6.5px;color:#627184;font-weight:950;letter-spacing:.12em;grid-row:2}.sub-stat:nth-of-type(2){grid-column:2 / 4}.sub-stat:last-child{grid-column:1 / 4;margin-left:15px;margin-top:-3px;justify-self:end}
.weapon-cell b{margin-top:4px;color:#d8fbff;font-size:12px;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.weapon-cell small{margin-top:3px;color:#657486;font-size:7px;font-weight:950;letter-spacing:.08em}.run-cell{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:8px;align-items:center}.run-cell>span{display:flex;flex-direction:column;gap:2px}.run-cell em{font-style:normal;color:#526173;font-size:6px;font-weight:950;letter-spacing:.14em}.run-cell strong{font-size:13px;font-variant-numeric:tabular-nums}.sound-button{height:28px;padding:0 10px;border:1px solid rgba(124,247,255,.18);background:rgba(124,247,255,.035);color:#90b4bd;font-size:7px;font-weight:1000;letter-spacing:.12em;cursor:pointer}.sound-button:hover{border-color:rgba(124,247,255,.45);color:var(--cyan)}
#arena{position:relative;min-width:0;min-height:0;background:#05080d;overflow:hidden;touch-action:none}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#arena-frame{position:absolute;inset:12px;border:1px solid rgba(167,198,214,.09);pointer-events:none;z-index:3}.ui-layer{display:none}
#bottom-hud{display:grid;grid-template-columns:1fr 1fr 1fr 2.2fr 4fr;gap:10px;align-items:center;padding:9px 14px;border-top:1px solid rgba(124,247,255,.09)}
.vital-block{min-width:0;padding:6px 10px 7px;background:#09111a;border:1px solid rgba(255,255,255,.06);clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
.bar-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;font-size:7px;font-weight:1000;letter-spacing:.16em;color:#647184}.bar-label b{color:#d8e4ea;font-size:8px;font-variant-numeric:tabular-nums}.bar{height:5px;background:#111a23;overflow:hidden}.fill{height:100%;width:100%;transition:width .12s linear}.fill.hp{background:linear-gradient(90deg,#ff4c67,#ff9a7a)}.fill.dash{background:linear-gradient(90deg,#5ae7ff,#b6fdff)}.fill.energy{background:linear-gradient(90deg,#9c76f7,#f0ddff)}
.controls-hint{display:flex;justify-content:flex-end;align-items:center;gap:10px;color:#596879;font-size:7px;font-weight:950;letter-spacing:.08em;white-space:nowrap}.controls-hint span{display:flex;align-items:center;gap:4px}kbd{display:inline-flex;align-items:center;justify-content:center;min-width:23px;height:19px;padding:0 5px;border:1px solid rgba(255,255,255,.10);background:#0b141e;color:#bac6d0;font-size:7px;font-weight:1000}
.overlay{position:absolute;inset:0;background:rgba(1,4,8,.80);display:grid;place-items:center;z-index:20;backdrop-filter:blur(9px)}.overlay.hidden,.hidden{display:none}.overlay-card{width:min(660px,calc(100% - 32px));padding:34px;border:1px solid rgba(171,202,219,.16);background:linear-gradient(180deg,rgba(14,21,29,.98),rgba(5,9,14,.99));box-shadow:0 32px 100px rgba(0,0,0,.62);text-align:center;clip-path:polygon(0 14px,14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px))}.start-card{padding:48px 34px}.logo-mark{font-size:54px;font-weight:1000;letter-spacing:.02em}.logo-mark span{color:var(--cyan)}.eyebrow{font-size:8px;font-weight:1000;letter-spacing:.3em;color:var(--cyan);margin-bottom:9px}.overlay-card h1{margin:0;font-size:35px;letter-spacing:.08em}.overlay-card p{margin:10px 0 24px;color:#84909e;font-size:14px}.start-card p{font-size:16px}.primary-btn{border:0;color:#041016;background:linear-gradient(135deg,#d8feff,#62eaf6);padding:14px 20px;min-width:220px;font-weight:1000;letter-spacing:.1em;cursor:pointer;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));box-shadow:0 7px 30px rgba(66,232,246,.22);transition:transform .15s ease,filter .15s ease}.primary-btn:hover{transform:translateY(-2px);filter:brightness(1.05)}.primary-btn:active{transform:translateY(0)}.start-notes{display:flex;justify-content:center;gap:18px;color:#5d6c7d;font-size:8px;font-weight:900;letter-spacing:.15em;margin-top:20px;flex-wrap:wrap}.route-options,.upgrade-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:left}.route-btn,.upgrade-btn{min-height:124px;padding:15px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.028);color:var(--text);cursor:pointer;text-align:left;clip-path:polygon(0 8px,8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);transition:transform .14s,border-color .14s,background .14s}.route-btn:hover,.upgrade-btn:hover{transform:translateY(-3px);border-color:rgba(124,247,255,.36);background:rgba(124,247,255,.055)}.route-btn .tag,.upgrade-btn .tag{display:inline-block;padding:4px 6px;background:rgba(124,247,255,.07);color:var(--cyan);font-size:7px;font-weight:1000;letter-spacing:.13em}.route-btn strong,.upgrade-btn strong{display:block;margin:10px 0 5px;font-size:14px;letter-spacing:.04em}.route-btn small,.upgrade-btn small{display:block;color:#778596;line-height:1.35;font-size:10px}.overlay-tip{margin-top:16px;color:#556476;font-size:9px;letter-spacing:.03em}.result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:22px 0}.result-grid div{padding:13px 8px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025)}.result-grid span{display:block;color:#68778a;font-size:8px;font-weight:900;letter-spacing:.13em}.result-grid b{font-size:18px}.toast{position:absolute;left:50%;top:24px;transform:translate(-50%,-10px);opacity:0;z-index:30;padding:9px 13px;background:rgba(5,10,15,.96);border:1px solid rgba(124,247,255,.18);color:#dfe8f1;font-size:9px;font-weight:1000;letter-spacing:.14em;pointer-events:none;transition:opacity .18s,transform .18s}.toast.show{opacity:1;transform:translate(-50%,0)}.center-message{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10;text-align:center;pointer-events:none}.center-message .big{font-size:58px;font-weight:1000;letter-spacing:.06em;text-shadow:0 0 30px rgba(124,247,255,.16)}.center-message .sub{margin-top:6px;color:#8292a3;font-size:9px;font-weight:1000;letter-spacing:.26em}.boss-wrap{position:absolute;left:50%;top:16px;transform:translateX(-50%);width:min(700px,calc(100% - 40px));z-index:8;text-align:center}.boss-name{font-size:8px;letter-spacing:.24em;font-weight:1000;margin-bottom:6px;color:#ff8799}.boss-bar{height:8px;background:#141920;border:1px solid rgba(255,100,124,.28);overflow:hidden}.boss-fill{height:100%;width:100%;background:linear-gradient(90deg,#ff5a6e,#ffbf83);transition:width .1s linear}
@keyframes statusPulse{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.2)}}
@media(max-width:900px){#game-shell{grid-template-rows:68px minmax(0,1fr) 62px}.top-cell{padding:0 10px}.room-cell strong{font-size:23px}.weapon-cell small{display:none}.run-cell{grid-template-columns:repeat(3,1fr)}.run-cell .sound-button{display:none}#bottom-hud{grid-template-columns:1fr 1fr 1fr}.controls-hint{display:none}.route-options,.upgrade-options{grid-template-columns:1fr}.route-btn,.upgrade-btn{min-height:92px}.overlay-card{padding:26px 20px}.result-grid{grid-template-columns:repeat(2,1fr)}.top-hud{grid-template-columns:1fr 1fr 1fr}.weapon-cell{display:none}.combat-cell{min-width:0}}
@media(max-width:600px){#game-shell{width:100vw;height:100vh}.top-hud{grid-template-columns:1fr 1fr}.law-cell{display:none}.combat-cell{display:none}.run-cell{grid-column:2}.room-cell strong{font-size:22px}.room-cell #room-name{font-size:7px}.center-message .big{font-size:38px}#bottom-hud{grid-template-columns:1fr 1fr}.energy-vital{display:none}}
/* FRAME SHOP + SYSTEM MENU */
.weapon-power{color:#8eefff!important;opacity:.82}
.menu-button{margin-left:3px;min-width:50px}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.menu-grid .primary-btn{grid-column:1/-1}
.menu-btn{min-height:52px;padding:10px 14px;border:1px solid rgba(124,247,255,.16);background:#0a131c;color:#d9edf1;cursor:pointer;font-weight:950;letter-spacing:.10em;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:15px;clip-path:polygon(0 8px,8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%)}
.menu-btn:hover{border-color:rgba(124,247,255,.44);background:#0d1a25;transform:translateY(-1px)}
.menu-btn span{font-size:8px;color:#74869a;letter-spacing:.12em}.menu-btn span b{color:var(--gold);font-size:13px;margin-left:5px}.danger-btn{border-color:rgba(255,100,124,.2);color:#ff9aa9}.danger-btn:hover{border-color:rgba(255,100,124,.45);background:#1a0e14}
.shop-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.shop-wallet{padding:10px 14px;border:1px solid rgba(255,213,107,.22);background:rgba(255,213,107,.045);min-width:115px}.shop-wallet span{display:block;font-size:7px;color:#786b55;letter-spacing:.18em;font-weight:950}.shop-wallet b{display:block;margin-top:3px;font-size:22px;color:var(--gold)}
.skin-options{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;max-height:430px;overflow:auto;padding-right:3px}.skin-btn{position:relative;min-height:102px;padding:14px 14px 12px 39px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.024);color:var(--text);cursor:pointer;text-align:left;clip-path:polygon(0 7px,7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%);transition:transform .14s,border-color .14s,background .14s}.skin-btn:hover{transform:translateY(-2px);border-color:rgba(124,247,255,.34);background:rgba(124,247,255,.04)}.skin-btn strong{display:block;font-size:12px;letter-spacing:.08em}.skin-btn small{display:block;color:#7e8ea0;font-size:9px;line-height:1.35;margin-top:4px}.skin-btn em{display:block;margin-top:8px;color:#91a6b5;font-style:normal;font-size:7px;font-weight:1000;letter-spacing:.13em}.skin-chip{position:absolute;left:14px;top:14px;width:14px;height:14px;border-radius:4px;background:var(--skin);box-shadow:0 0 14px color-mix(in srgb,var(--skin) 55%,transparent);border:1px solid rgba(255,255,255,.28)}
@media(max-width:900px){.run-cell{grid-template-columns:repeat(3,1fr) auto auto}.skin-options{grid-template-columns:1fr;max-height:48vh}.menu-grid{grid-template-columns:1fr}.menu-grid .primary-btn{grid-column:auto}}

/* ADVANCED FRAME SHOP */
.shop-card{width:min(1020px,calc(100% - 24px));text-align:left}.shop-card>p{max-width:720px}.shop-head h1{font-size:38px}.skin-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-height:520px;padding:2px 3px 3px 0}.skin-btn{display:grid;grid-template-columns:108px minmax(0,1fr);gap:14px;min-height:172px;padding:12px;clip-path:polygon(0 11px,11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%);overflow:hidden}.skin-btn:hover{transform:translateY(-3px) scale(1.005)}.skin-info{min-width:0}.skin-topline{display:flex;justify-content:space-between;gap:8px;align-items:center}.skin-rarity,.skin-cost{font-size:7px;font-weight:1000;letter-spacing:.16em}.skin-rarity{color:var(--skin,#7cf7ff)}.skin-cost{color:#e1c267}.skin-btn strong{font-size:15px;line-height:1.1;margin-top:7px}.skin-btn small{font-size:9px;min-height:32px}.passive-list{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}.passive-list span{padding:4px 6px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025);font-size:7px;letter-spacing:.07em;color:#9cadbb}.ability-list{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}.ability-pill{padding:5px 6px;border:1px solid color-mix(in srgb,var(--skin) 26%,transparent);background:color-mix(in srgb,var(--skin) 6%,transparent);font-size:7px;color:#dbeaf0}.ability-pill b{display:inline-flex;margin-right:5px;color:var(--skin);font-size:7px}.skin-btn em{margin-top:7px;color:#d1e1e8}.skin-preview{position:relative;height:146px;align-self:stretch;overflow:hidden;border:1px solid color-mix(in srgb,var(--skin) 24%,transparent);background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--skin) 12%,transparent),rgba(0,0,0,.04) 55%,rgba(0,0,0,.28) 100%);clip-path:polygon(0 10px,10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}.preview-glow{position:absolute;inset:28px;border-radius:50%;background:var(--skin);filter:blur(21px);opacity:.18}.preview-ring{position:absolute;left:50%;top:50%;width:82px;height:82px;transform:translate(-50%,-50%) rotate(20deg);border:2px solid var(--skin);box-shadow:0 0 18px color-mix(in srgb,var(--skin) 48%,transparent);opacity:.8}.preview-core{position:absolute;left:50%;top:50%;width:28px;height:28px;transform:translate(-50%,-50%);background:#071018;border:2px solid var(--accent);box-shadow:0 0 20px var(--skin)}.preview-weapon{position:absolute;left:54%;top:49%;width:43px;height:7px;transform:rotate(-8deg);background:var(--accent);box-shadow:0 0 12px var(--skin);border-radius:2px}.preview-wing{position:absolute;top:50%;width:30px;height:58px;transform:translateY(-50%);background:color-mix(in srgb,var(--skin) 72%,#071018);border:1px solid var(--accent);box-shadow:0 0 14px color-mix(in srgb,var(--skin) 30%,transparent)}.preview-wing.left{right:50%;clip-path:polygon(100% 0,30% 18%,0 50%,30% 82%,100% 100%)}.preview-wing.right{left:50%;clip-path:polygon(0 0,70% 18%,100% 50%,70% 82%,0 100%)}
.skin-runner .preview-ring{border-radius:8px;transform:translate(-50%,-50%) rotate(45deg) scaleX(1.35)}.skin-runner .preview-wing{height:35px;width:44px}.skin-runner .preview-weapon{width:54px}
.skin-sentinel .preview-ring{width:92px;height:92px;border-radius:12px;transform:translate(-50%,-50%)}.skin-sentinel .preview-wing{width:24px;height:72px}.skin-sentinel .preview-core{width:34px;height:34px;border-radius:5px}
.skin-striker .preview-ring{width:96px;height:54px;border-radius:50%;transform:translate(-50%,-50%) rotate(-18deg)}.skin-striker .preview-wing{height:25px;width:46px}.skin-striker .preview-weapon{width:60px;height:9px}
.skin-phantom .preview-ring{border-style:dashed;width:96px;height:96px;border-radius:50%}.skin-phantom .preview-wing{background:color-mix(in srgb,var(--skin) 30%,#071018);clip-path:polygon(100% 0,35% 50%,100% 100%,0 85%,22% 50%,0 15%)}
.skin-harvester .preview-ring{width:74px;height:74px;border-width:4px}.skin-harvester .preview-wing{width:38px;height:38px;clip-path:polygon(50% 0,62% 35%,100% 50%,62% 65%,50% 100%,38% 65%,0 50%,38% 35%)}.skin-harvester .preview-core{border-radius:50%}
.skin-overseer .preview-ring{width:98px;height:98px;border-width:3px;transform:translate(-50%,-50%) rotate(30deg)}.skin-overseer .preview-wing{width:56px;height:56px;clip-path:polygon(100% 50%,65% 65%,50% 100%,35% 65%,0 50%,35% 35%,50% 0,65% 35%)}.skin-overseer .preview-core{width:20px;height:20px;border-radius:50%;box-shadow:0 0 28px var(--skin)}
.skin-hud{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:8px 14px;background:#06101a;border-left:1px solid rgba(124,247,255,.09);border-right:1px solid rgba(124,247,255,.09);border-top:1px solid rgba(124,247,255,.07);min-width:0}.skin-hud-name{display:flex;flex-direction:column;min-width:100px;margin-right:auto}.skin-hud-name span{font-size:6px;color:#566778;font-weight:1000;letter-spacing:.18em}.skin-hud-name b{font-size:8px;color:#d9edf3;letter-spacing:.11em;margin-top:2px}.skin-hud>span{padding:5px 7px;border:1px solid rgba(124,247,255,.11);background:rgba(124,247,255,.025);color:#7f9ba6;font-size:6.5px;font-weight:1000;letter-spacing:.07em;white-space:nowrap}.skin-hud>span:first-of-type{color:#8eefff}.skin-hud>span:nth-of-type(2){color:#d9bfff;border-color:rgba(178,140,255,.12)}
@media(max-width:900px){#bottom-hud{grid-template-columns:1fr 1fr 1fr 2.6fr}.controls-hint{display:none}.skin-hud{grid-column:4;display:flex}.skin-options{grid-template-columns:1fr}.skin-btn{grid-template-columns:92px minmax(0,1fr);min-height:160px}.skin-preview{height:134px}.skin-hud{display:none}.controls-hint{gap:7px}}
@media(max-width:600px){.skin-btn{grid-template-columns:78px minmax(0,1fr);min-height:150px;padding:9px;gap:10px}.skin-preview{height:130px}.shop-head h1{font-size:28px}.passive-list span{font-size:6px}.ability-list{display:none}}

.skin-hud>span:nth-of-type(3){color:#ffc984;border-color:rgba(255,191,98,.12)}
@media(max-width:900px){.skin-hud{grid-column:4}.skin-hud>span{font-size:6px}.skin-hud-name{min-width:82px}}

/* ECONOMY + PASSIVE BOOSTS */
.pending-coins{min-height:9px;margin-top:2px;color:#ffd56b;font-size:6px;font-weight:1000;letter-spacing:.08em;white-space:nowrap}.mini-heading{margin-top:8px;color:#68798a;font-size:6px;font-weight:1000;letter-spacing:.18em}.ability-heading{margin-top:7px;color:#8ca0ae}.passive-list span{color:#d8c685;border-color:rgba(255,213,107,.12);background:rgba(255,213,107,.035)}
