:root{
  --bg:#050916;
  --panel:rgba(5,10,24,.72);
  --panel2:rgba(12,18,42,.82);
  --line:rgba(80,220,255,.24);
  --cyan:#45dcff;
  --pink:#ff4dbd;
  --gold:#ffd76d;
  --green:#74ffc1;
  --red:#ff5b7c;
  --text:#f5fbff;
  --muted:rgba(245,251,255,.72);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);touch-action:none}
body{
  background:
    radial-gradient(circle at 18% 12%, rgba(69,220,255,.15), transparent 32%),
    radial-gradient(circle at 78% 12%, rgba(255,77,189,.14), transparent 34%),
    linear-gradient(180deg,#030713,#060918 60%,#02050b);
}
button{
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(69,220,255,.18),rgba(255,77,189,.10));
  color:var(--text);
  font-weight:1000;
  border-radius:14px;
  min-height:42px;
  padding:10px 14px;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(0,0,0,.26), inset 0 0 18px rgba(255,255,255,.03);
}
button.primary{
  background:linear-gradient(90deg,var(--cyan),#7df2ff,var(--pink));
  color:#04111f;
  border-color:rgba(255,255,255,.35);
}
button:active{transform:translateY(1px) scale(.99)}
.shell{position:fixed;inset:0;overflow:hidden;isolation:isolate}
#gameCanvas{display:block;width:100%;height:100%;background:#050916}
.glass{
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(8,14,31,.78),rgba(4,8,18,.66));
  backdrop-filter:blur(14px);
  box-shadow:0 16px 50px rgba(0,0,0,.36), inset 0 0 0 1px rgba(255,255,255,.03);
}
.hud{
  position:absolute;
  top:12px;left:12px;right:12px;
  z-index:10;
  display:grid;
  grid-template-columns:minmax(320px,1.1fr) minmax(320px,.9fr);
  gap:12px;
  pointer-events:none;
}
.title-card,.stat-card{border-radius:22px;padding:14px 16px}
.eyebrow{color:var(--cyan);font-size:11px;font-weight:1000;letter-spacing:.16em;text-transform:uppercase}
.title-card h1{font-size:28px;line-height:1.05;margin:4px 0 4px;text-transform:uppercase}
.title-card p{font-size:13px;font-weight:800;color:var(--muted);margin:0}
.stat-card{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat-card div{
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(255,255,255,.04);
  padding:9px 10px;
}
.stat-card span{display:block;color:var(--muted);font-size:10px;font-weight:1000;letter-spacing:.09em;text-transform:uppercase}
.stat-card b{display:block;color:var(--gold);font-size:18px;line-height:1.1;margin-top:2px}
.meters{
  position:absolute;
  top:182px;left:12px;
  z-index:10;
  display:grid;
  gap:10px;
  width:min(340px,calc(100vw - 24px));
  pointer-events:none;
}
.meter-card{border-radius:18px;padding:10px 12px}
.meter-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.meter-head span,.meter-head strong{font-size:11px;font-weight:1000;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.meter-head strong{color:var(--gold)}
.meter{height:13px;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden}
.meter>div{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--pink));box-shadow:0 0 24px rgba(69,220,255,.45)}
.meter.shield>div{background:linear-gradient(90deg,var(--cyan),var(--green))}
.meter.emp>div{background:linear-gradient(90deg,var(--gold),var(--pink))}
.top-actions{
  position:absolute;
  top:12px;right:12px;
  display:flex;
  gap:8px;
  z-index:14;
  pointer-events:auto;
}
.mobile-controls{
  position:absolute;
  left:12px;right:12px;bottom:12px;
  z-index:15;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  pointer-events:none;
}
.mobile-controls button{pointer-events:auto;min-width:58px;min-height:54px}
.move-pad,.action-pad{display:flex;gap:8px;flex-wrap:wrap}
.action-pad{justify-content:flex-end}
.overlay{
  position:absolute;inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:30;
  background:rgba(0,0,0,.50);
  backdrop-filter:blur(8px);
}
.overlay.active{display:flex}
.overlay-card{
  width:min(720px,100%);
  border:1px solid rgba(69,220,255,.28);
  background:linear-gradient(180deg,rgba(8,15,34,.96),rgba(4,8,18,.92));
  border-radius:30px;
  padding:24px;
  text-align:center;
  box-shadow:0 20px 70px rgba(0,0,0,.46);
}
.orb-logo{
  width:105px;height:105px;border-radius:50%;margin:0 auto 10px;
  background:radial-gradient(circle at 40% 35%,#fff 0 12%,#74ffc1 13% 34%,#45dcff 35% 58%,rgba(69,220,255,.2) 59% 100%);
  border:4px solid rgba(255,255,255,.82);
  box-shadow:0 0 42px rgba(69,220,255,.45),0 0 80px rgba(255,77,189,.16);
}
.overlay-card h2{margin:4px 0 12px;font-size:clamp(32px,7vw,62px);line-height:.95;text-transform:uppercase}
.overlay-card p{margin:0 auto 16px;max-width:610px;line-height:1.5;color:var(--muted);font-weight:760}
.feature-row,.button-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.feature-row{margin:14px 0 20px}
.feature-row span{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}
.button-row button{min-width:150px}
@media(max-width:980px){
  .hud{grid-template-columns:1fr}
  .title-card h1{font-size:22px}
  .stat-card{grid-template-columns:repeat(6,1fr)}
  .meters{top:245px}
}
@media(max-width:720px){
  .hud{top:8px;left:8px;right:8px;gap:8px}
  .title-card,.stat-card{padding:11px 12px;border-radius:18px}
  .stat-card{grid-template-columns:repeat(3,1fr);gap:6px}
  .stat-card div{padding:7px 8px;border-radius:13px}
  .stat-card b{font-size:15px}
  .meters{top:238px;left:8px;width:min(250px,calc(100vw - 16px));gap:7px}
  .meter-card{padding:8px 9px;border-radius:15px}
  .top-actions{top:auto;right:8px;bottom:78px;gap:6px}
  .top-actions button{min-height:38px;padding:8px 10px;font-size:12px}
  .mobile-controls{left:8px;right:8px;bottom:8px}
  .mobile-controls button{min-width:50px;min-height:48px;padding:8px 10px}
  .overlay{padding:12px;align-items:flex-end}
  .overlay-card{border-radius:24px;padding:18px 14px 16px}
}
@media(max-height:560px) and (orientation:landscape){
  .hud{top:6px;left:6px;right:auto;width:min(680px,65vw);grid-template-columns:1fr}
  .title-card{display:none}
  .stat-card{grid-template-columns:repeat(6,1fr);padding:8px;border-radius:14px;gap:5px}
  .stat-card div{padding:5px;border-radius:10px}
  .stat-card span{font-size:8px}
  .stat-card b{font-size:12px}
  .meters{top:auto;bottom:8px;left:6px;width:260px}
  .top-actions{top:6px;right:6px;bottom:auto}
  .mobile-controls button{min-height:40px}
  .overlay{align-items:center}
}