*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

:root{
  --bg-deep:#04070e;
  --glass-border:rgba(255,255,255,.08);
  --glass-highlight:rgba(255,255,255,.15);
  --divider:rgba(255,255,255,.07);
  --a1:#00aaff; --a1-rgb:0,170,255; --a1-soft:#7fdcff;
  --a2:#aaaaff; --a2-rgb:170,170,255;
  --a3:#7fdcff; --a3-rgb:127,220,255;
  --gold:#ffd75e; --gold-rgb:255,215,94;
  --green:#34d399; --green-rgb:52,211,153;
  --heal:#7ff0b0; --heal-rgb:127,240,176;
  --hex:#b98cff;  --hex-rgb:185,140,255;
  --red:#ff6666;
  --danger:#ff4d5e; --danger-rgb:255,77,94; --danger-soft:#ff8f9b;
  --text-main:#c5d8f0;
  --text-dim:#7e9cc4;
  --text-bright:#ffffff;
  --font-disp:'M PLUS Rounded 1c','Hiragino Kaku Gothic ProN','Yu Gothic UI',Meiryo,sans-serif;
  --font-num:'M PLUS Rounded 1c','Hiragino Kaku Gothic ProN','Yu Gothic UI',Meiryo,sans-serif;
  --glass-blur:8px; --glass-sat:1.5;
  --panel-a:.60; --card-a:.40; --card-a-hover:.55;
  --panel-bg:rgba(7,13,26,var(--panel-a));
  --card-bg:rgba(2,6,14,var(--card-a));
  --card-bg-hover:rgba(6,14,30,var(--card-a-hover));
  --bar-hp:linear-gradient(90deg,#34d399,#a7f3d0);


  --tab-h:58px;
  --sub-h:40px;
  --hud-h:52px;
  --tab-w:84px;
  --radius:14px;
}



html{ font-size:14px; -webkit-text-size-adjust:100%; scrollbar-gutter:stable; }
body{
  background:var(--bg-deep); color:var(--text-main);
  font-family:var(--font-disp); line-height:1.65; min-height:100vh; overflow-x:hidden;
}
a{ color:var(--a3); text-decoration:none; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:4px; }
b,strong{ color:var(--text-bright); font-weight:700; }
.num{ font-family:var(--font-num); font-variant-numeric:tabular-nums; }

.mk{ font-family:var(--font-num); font-variant-numeric:tabular-nums; cursor:help; }
.dim{ color:var(--text-dim); }
.gold{ color:var(--gold); }
.rare{ color:var(--gold); font-weight:700; text-shadow:0 0 8px rgba(var(--gold-rgb),.45); }
.ok{ color:var(--green); }
.bad,.err{ color:var(--danger-soft); }
.notice{ color:var(--gold); }
small{ font-size:.8em; }
.hidden{ display:none !important; }


.bg{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:radial-gradient(1200px 600px at 10% -10%,rgba(var(--a1-rgb),.16),transparent 60%),
             radial-gradient(900px 500px at 110% 110%,rgba(var(--a2-rgb),.14),transparent 60%),
             var(--bg-deep); }