:root{
  --bg:#050912;
  --panel:rgba(9,15,30,.88);
  --panel2:rgba(17,26,50,.92);
  --line:rgba(140,220,255,.28);
  --text:#eaf7ff;
  --muted:#91a8b8;
  --cyan:#5ce6ff;
  --yellow:#ffe66d;
  --red:#ff6b57;
  --green:#7cff9b;
  --shadow:0 18px 60px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:var(--bg);color:var(--text);font-family:"Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;overflow:hidden}
button{font:inherit;color:inherit}
.app{position:relative;width:100vw;height:100vh;min-height:620px;overflow:hidden;background:radial-gradient(circle at 50% 35%,#10263b 0%,#060a14 52%,#020409 100%)}
#scene{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;filter:saturate(1.12) contrast(1.08)}
.screen{position:absolute;inset:0;z-index:2;display:grid;gap:18px;padding:24px}
.hidden{display:none!important}
.title-screen{grid-template-columns:minmax(320px,1fr) 360px;align-items:center}
.panel{position:relative;border:3px solid var(--line);background:linear-gradient(180deg,var(--panel),rgba(4,9,18,.92));box-shadow:var(--shadow),inset 0 0 0 2px rgba(255,255,255,.03);backdrop-filter:blur(8px);border-radius:0;padding:24px}
.panel:before,.unit-box:before,.command-panel:before{content:"";position:absolute;inset:6px;border:1px solid rgba(255,255,255,.07);pointer-events:none}
.hero-panel{max-width:720px;margin-left:4vw}
.hero-panel h1{margin:0;font-size:clamp(52px,8vw,112px);line-height:.88;letter-spacing:-.08em;text-shadow:0 0 20px rgba(92,230,255,.4)}
.hero-panel h1 span{color:var(--cyan)}
.eyebrow{margin:0 0 10px;color:var(--yellow);font-weight:900;text-transform:uppercase;letter-spacing:.16em}
.lead{max-width:560px;color:#cae6f5;font-size:18px;line-height:1.6}
.hero-actions,.footer-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.btn,.small-btn{border:2px solid rgba(255,255,255,.22);background:#121b2f;padding:12px 16px;cursor:pointer;box-shadow:inset -4px -4px 0 rgba(0,0,0,.25)}
.btn:hover,.small-btn:hover,.core-card:hover,.reward-card:hover,.shop-card:hover,.menu-card:hover{transform:translateY(-2px);border-color:var(--cyan)}
.btn.primary{background:linear-gradient(180deg,#1aa9d7,#0d5f91);border-color:#78edff;color:white}
.btn.ghost{background:rgba(255,255,255,.05)}
.btn:disabled,button:disabled{opacity:.45;cursor:not-allowed;transform:none}
.stat-board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0 0}
.stat-board div{border:2px solid rgba(255,255,255,.12);background:rgba(0,0,0,.28);padding:12px}
.stat-board dt{color:var(--muted);font-size:12px}
.stat-board dd{margin:4px 0 0;font-size:24px;font-weight:900}
.side-panel{align-self:center}
.side-panel h2{margin-top:0}
.menu-card{width:100%;display:block;text-align:left;margin:10px 0;border:2px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);padding:16px;cursor:pointer}
.menu-card b{display:block;font-size:17px}
.menu-card span{display:block;color:var(--muted);font-size:13px;margin-top:4px}
.full-panel{width:min(1180px,calc(100vw - 48px));height:min(780px,calc(100vh - 48px));margin:auto;overflow:auto}
.compact-panel{height:auto;max-height:calc(100vh - 48px)}
.top-row{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:16px}
.top-row h2,.event-panel h2,.result-panel h2{font-size:34px;margin:0 0 6px}
.muted{color:var(--muted);margin:0}
.cost-box{border:2px solid var(--line);padding:12px 18px;font-size:18px;background:rgba(0,0,0,.24)}
.bad{color:var(--red)}
.starter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.core-card,.reward-card,.shop-card{position:relative;text-align:left;border:2px solid rgba(255,255,255,.14);background:rgba(7,13,26,.86);padding:14px;min-height:170px;cursor:pointer;overflow:hidden}
.core-card.selected{outline:3px solid var(--yellow);background:rgba(40,48,24,.9)}
.core-card strong,.reward-card strong,.shop-card strong{display:block;font-size:18px;margin-bottom:8px}
.pixel-sigil{float:right;font-size:28px;color:var(--cyan);text-shadow:0 0 12px currentColor}
.meta-line,.stat-line,.passive{display:block;margin:6px 0;color:#c4d4df;font-size:12px}
.passive{color:#f4df94}
.core-card small{display:block;color:var(--muted);line-height:1.45;margin-top:8px}
.type{display:inline-block;font-style:normal;padding:2px 6px;margin:1px;border:1px solid rgba(255,255,255,.2);font-size:12px;background:rgba(255,255,255,.08)}
.heat{--accent:#ff7845}.water{--accent:#57d6ff}.volt{--accent:#ffe760}.stone{--accent:#c8b08d}.bio{--accent:#75ef94}.shade{--accent:#a67cff}.multi{--accent:#ff8add}
.heat,.water,.volt,.stone,.bio,.shade,.multi{border-color:color-mix(in srgb,var(--accent),transparent 45%)}
.heat .pixel-sigil,.water .pixel-sigil,.volt .pixel-sigil,.stone .pixel-sigil,.bio .pixel-sigil,.shade .pixel-sigil,.multi .pixel-sigil{color:var(--accent)}
.battle-screen{padding:18px;grid-template-rows:44px 1fr 168px;grid-template-columns:330px 1fr 330px}
.hud{grid-column:1/-1;display:flex;align-items:center;gap:18px;border:2px solid var(--line);background:rgba(2,6,12,.75);padding:8px 12px}
.hud .small-btn{margin-left:auto;padding:7px 10px}
.unit-box{position:relative;border:3px solid var(--line);background:rgba(4,10,20,.88);padding:14px;align-self:start}
.enemy-box{grid-column:3;grid-row:2;margin-top:24px}
.player-box{grid-column:1;grid-row:2;align-self:end;margin-bottom:40px}
.unit-head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.unit-head strong{font-size:20px}
.unit-head span{font-size:12px;text-align:right}
.hp{height:18px;border:2px solid rgba(255,255,255,.18);background:#101421;margin:12px 0;overflow:hidden}
.hp i{display:block;height:100%;background:linear-gradient(90deg,#71ff8f,#ffe66d,#ff6b57);width:100%;transition:width .25s}
.unit-foot{display:flex;justify-content:space-between;color:var(--muted);font-size:13px}
.status-pill{border:1px solid rgba(255,255,255,.18);padding:2px 8px}
.status-pill.on{color:var(--yellow);border-color:var(--yellow)}
.segments{display:flex;gap:4px;margin-top:10px}
.segments i{height:8px;flex:1;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)}
.segments i.on{background:var(--red);box-shadow:0 0 8px var(--red)}
.command-panel{position:relative;grid-column:1/-1;grid-row:3;border:3px solid var(--line);background:rgba(5,10,18,.92);padding:12px;display:grid;grid-template-columns:260px 1fr 160px;gap:12px;z-index:4}
.team-bar{display:flex;flex-direction:column;gap:8px}
.team-chip{border:2px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);padding:8px;text-align:left;cursor:pointer;display:grid;grid-template-columns:24px 1fr;gap:4px;align-items:center}
.team-chip b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-chip em{grid-column:2;color:var(--muted);font-size:11px;font-style:normal}
.team-chip.active{border-color:var(--yellow);background:rgba(255,230,109,.12)}
.team-chip.down{opacity:.45}
.move-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.move-btn{border:2px solid rgba(255,255,255,.16);background:#10192a;padding:10px;text-align:left;cursor:pointer}
.move-btn b{display:block;font-size:16px}
.move-btn span,.move-btn small{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.side-actions{display:flex;flex-direction:column;gap:8px;justify-content:center}
.side-actions small{color:var(--muted);font-size:11px}
.battle-log{position:absolute;left:50%;top:74px;transform:translateX(-50%);width:min(420px,40vw);max-height:158px;overflow:hidden;z-index:3;background:rgba(1,4,10,.62);border:2px solid rgba(255,255,255,.1);padding:8px}
.battle-log p{margin:0 0 5px;font-size:12px;color:#dcebf4}
.sync-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8;width:min(520px,calc(100vw - 36px));border:3px solid var(--yellow);background:rgba(6,8,18,.96);padding:18px;box-shadow:var(--shadow)}
.sync-panel h3{margin:0 0 8px;font-size:28px}
.sync-bar{position:relative;height:32px;border:3px solid rgba(255,255,255,.24);background:#080c16;margin:18px 0}
.sync-bar i{position:absolute;top:0;height:100%;background:rgba(124,255,155,.35);box-shadow:0 0 16px rgba(124,255,155,.5)}
.sync-bar b{position:absolute;top:-8px;width:5px;height:44px;background:white;box-shadow:0 0 12px white}
.reward-grid,.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.reward-card{min-height:150px}
.reward-card span{display:inline-block;color:var(--yellow);font-size:12px;text-transform:uppercase;margin-bottom:8px}
.reward-card.rare,.reward-card.epic{border-color:var(--yellow)}
.reward-card.epic{box-shadow:0 0 20px rgba(255,230,109,.18)}
.shop-team{flex-direction:row;margin-bottom:12px;overflow:auto}
.shop-team .team-chip{min-width:180px}
.shop-card{min-height:120px}
.shop-card p,.reward-card p{color:var(--muted);line-height:1.45}
.shop-card span{color:var(--cyan);font-weight:900}
.event-panel,.result-panel{width:min(640px,calc(100vw - 48px));margin:auto;text-align:left}
.event-panel p,.result-panel p{color:#d6e6ef;line-height:1.6}
.mini-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.maze{width:300px;height:300px;display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin:18px auto}
.maze i{display:block;background:rgba(92,230,255,.16);border:2px solid rgba(255,255,255,.12)}
.maze i.wall{background:#182238}
.maze i.me{background:var(--yellow);box-shadow:0 0 14px var(--yellow)}
.maze i.goal{border-color:var(--green)}
.silhouette{width:140px;height:140px;margin:10px auto 18px;display:grid;place-items:center;font-size:70px;background:rgba(0,0,0,.38);filter:brightness(.1) drop-shadow(0 0 20px var(--accent));border:3px solid var(--accent)}
.result-stats{grid-template-columns:repeat(4,1fr)}
.home-btn{position:absolute;right:14px;bottom:14px;z-index:10;width:42px;height:42px;border:2px solid rgba(255,255,255,.22);background:rgba(0,0,0,.42);cursor:pointer}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:20;background:#10192a;border:2px solid var(--cyan);padding:12px 18px;box-shadow:var(--shadow)}
@media (max-width:900px){
  html,body{overflow:auto}.app{min-height:100vh;height:auto;overflow:auto}.screen{position:relative;min-height:100vh}
  #scene{position:fixed}
  .title-screen{grid-template-columns:1fr}.hero-panel{margin-left:0}
  .battle-screen{grid-template-columns:1fr;grid-template-rows:auto;gap:10px}
  .hud,.enemy-box,.player-box,.command-panel{grid-column:1;grid-row:auto;margin:0}
  .battle-log{position:relative;left:auto;top:auto;transform:none;width:100%;grid-column:1;max-height:120px}
  .command-panel{grid-template-columns:1fr}
  .team-bar{flex-direction:row;overflow:auto}.team-chip{min-width:150px}
  .move-grid{grid-template-columns:1fr}.side-actions{flex-direction:row;align-items:center}
  .starter-grid{grid-template-columns:1fr}.stat-board,.result-stats{grid-template-columns:1fr 1fr}
}