:root { --ink:#e8eef5; --panel:#1d2733e6; --edge:#3a4a5c; --gold:#ffd166; --teal:#2fa39c; --rust:#c2452f; }
* { box-sizing: border-box; }
body { margin:0; background:#0d141d; color:var(--ink); font:15px/1.45 system-ui, "Segoe UI", Roboto, sans-serif; }
a { color:var(--gold); }
#hud { position:fixed; inset:0; pointer-events:none; z-index:5; }
#hud button { pointer-events:auto; }
#topbar { position:absolute; top:8px; left:10px; right:10px; display:flex; gap:14px; align-items:center;
  background:var(--panel); border:1px solid var(--edge); border-radius:10px; padding:7px 12px; flex-wrap:wrap; }
.stat { display:flex; align-items:center; gap:6px; font-size:14px; }
.ico { width:12px; height:12px; display:inline-block; border-radius:3px; }
.crystal { background:#7fd4ff; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.unit-p { background:var(--teal); border-radius:50%; }
.unit-e { background:var(--rust); border-radius:50%; }
#corebars { display:flex; gap:10px; flex:1; min-width:200px; }
.corebar { flex:1; font-size:10px; letter-spacing:.08em; }
.bar { height:8px; background:#0b1119; border-radius:4px; overflow:hidden; border:1px solid var(--edge); }
.bar i { display:block; height:100%; background:linear-gradient(90deg,#ff6a4d,#ffd166); width:100%; }
.corebar:first-child .bar i { background:linear-gradient(90deg,#2fa39c,#7ce0d6); }
#trainbar { position:absolute; left:10px; bottom:12px; display:flex; gap:8px; }
#trainbar button, #touchpad button { background:var(--panel); color:var(--ink); border:1px solid var(--edge);
  border-radius:9px; padding:8px 11px; cursor:pointer; text-align:left; }
#trainbar button b { display:block; font-size:13px; color:var(--gold); }
#trainbar button small { font-size:10px; opacity:.75; display:block; }
#trainbar button:disabled { opacity:.45; cursor:default; }
#touchpad { position:absolute; right:12px; bottom:12px; display:grid;
  grid-template-areas:"zu u zi" "l . r" ". d ."; gap:5px; justify-items:center; }
#touchpad > * { pointer-events:auto; }
#touchpad button { width:44px; height:38px; padding:0; font-size:16px; color:var(--ink);
  background:var(--panel); border:1px solid var(--edge); border-radius:9px; }
#touchpad [data-k=w] { grid-area:u; } #touchpad [data-k=s] { grid-area:d; }
#touchpad [data-k=a] { grid-area:l; } #touchpad [data-k=d] { grid-area:r; }
#touchpad [data-k=+] { grid-area:zi; } #touchpad [data-k="-"] { grid-area:zu; }
#hint { position:absolute; bottom:2px; left:50%; transform:translateX(-50%); font-size:11px; opacity:.65;
  background:var(--panel); padding:3px 10px; border-radius:8px; max-width:92%; text-align:center; }
#overlay { position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:#0d141dcc; pointer-events:auto; }
#overlay.show { display:flex; }
#ovcard { max-width:520px; padding:26px 30px; background:#141e2a; border:1px solid var(--edge);
  border-radius:14px; text-align:center; }
#ovtitle { margin:0 0 8px; font-size:34px; letter-spacing:.12em; color:var(--gold); }
#ovbtn { margin-top:12px; font-size:18px; padding:10px 34px; border-radius:10px; border:1px solid var(--gold);
  background:linear-gradient(180deg,#ffd166,#e8a53c); color:#1a1205; font-weight:700; cursor:pointer; }
#fxmsg { position:absolute; top:70px; left:50%; transform:translateX(-50%); font-size:16px; color:var(--gold);
  background:var(--panel); border:1px solid var(--edge); padding:6px 16px; border-radius:10px; opacity:0; transition:opacity .3s; }
#fxmsg.show { opacity:1; }
.small { font-size:12px; opacity:.8; }
#game-canvas { position:fixed; inset:0; }