:root{--bg-0: #071015;--bg-1: #0d1c22;--bg-2: #132a33;--ink: #e8f4f1;--muted: #8aa8a0;--accent: #39ffb6;--accent-dim: #1a8f68;--danger: #ff3d6e;--warn: #f5ff7a;--panel: rgba(10, 24, 30, .72);--line: rgba(57, 255, 182, .18);--font-display: "Syne", sans-serif;--font-body: "IBM Plex Sans", sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%;height:100%}body{font-family:var(--font-body);color:var(--ink);background:radial-gradient(1200px 700px at 15% -10%,rgba(57,255,182,.16),transparent 55%),radial-gradient(900px 500px at 90% 10%,rgba(77,183,255,.12),transparent 50%),linear-gradient(160deg,var(--bg-0),var(--bg-1) 45%,#0a161c)}button,input{font:inherit}button{cursor:pointer;border:1px solid var(--line);background:linear-gradient(180deg,#39ffb629,#39ffb60d);color:var(--ink);border-radius:10px;padding:.7rem 1.1rem;transition:transform .12s ease,border-color .12s ease,background .12s ease}button:hover:not(:disabled){transform:translateY(-1px);border-color:#39ffb673}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:linear-gradient(180deg,#39ffb6,#1db884);color:#04140f;border-color:transparent;font-weight:600}button.ghost{background:transparent}.app-shell{min-height:100%;display:grid;grid-template-rows:auto 1fr}.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0710158c}.brand{font-family:var(--font-display);font-weight:800;letter-spacing:.04em;font-size:1.4rem;color:var(--accent);text-transform:uppercase}.nav{display:flex;gap:.5rem;flex-wrap:wrap}.nav button[data-active=true]{border-color:var(--accent);background:#39ffb62e}.energy-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;border-radius:999px;border:1px solid var(--line);color:var(--warn);font-size:.9rem}.main{padding:1.25rem}.hero{min-height:calc(100vh - 5.5rem);display:grid;place-items:center;text-align:center;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;top:10%;right:20%;bottom:10%;left:20%;background:radial-gradient(circle at 50% 40%,rgba(57,255,182,.2),transparent 55%),repeating-linear-gradient(90deg,rgba(57,255,182,.05) 0,rgba(57,255,182,.05) 1px,transparent 1px,transparent 28px),repeating-linear-gradient(0deg,rgba(77,183,255,.04) 0,rgba(77,183,255,.04) 1px,transparent 1px,transparent 28px);-webkit-mask-image:radial-gradient(circle at center,black 30%,transparent 75%);mask-image:radial-gradient(circle at center,black 30%,transparent 75%);animation:gridPulse 6s ease-in-out infinite;pointer-events:none}@keyframes gridPulse{0%,to{opacity:.55;transform:scale(1)}50%{opacity:.9;transform:scale(1.03)}}.hero-inner{position:relative;z-index:1;max-width:40rem;padding:1rem}.hero h1{font-family:var(--font-display);font-size:clamp(3rem,10vw,5.5rem);line-height:.95;margin:0 0 .75rem;letter-spacing:-.02em;background:linear-gradient(120deg,var(--ink),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;animation:titleIn .7s ease both}.hero p{margin:0 auto 1.5rem;color:var(--muted);font-size:1.1rem;max-width:28rem;animation:titleIn .9s ease both}@keyframes titleIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.hero-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;animation:titleIn 1.1s ease both}.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.panel h2{font-family:var(--font-display);margin:0 0 .75rem;font-size:1.4rem}.muted{color:var(--muted)}.game-layout{display:grid;grid-template-columns:1fr;gap:1rem}@media(min-width:960px){.game-layout{grid-template-columns:1fr 280px}}.canvas-wrap{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(180deg,#08141a,#0d222b);min-height:420px}.canvas-wrap canvas{width:100%;height:auto;display:block}.hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:.85rem}.hud-row{display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap}.hud-stat{background:#071015b3;border:1px solid var(--line);border-radius:10px;padding:.4rem .65rem;font-size:.85rem}.hud-stat strong{color:var(--accent)}.overlay-card{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#040a0eb8;pointer-events:auto}.overlay-card .panel{width:min(22rem,calc(100% - 2rem));text-align:center}.list{display:grid;gap:.65rem}.list-item{display:flex;justify-content:space-between;gap:.75rem;align-items:center;padding:.75rem;border-radius:12px;border:1px solid var(--line);background:#ffffff05}.swatch{width:1.1rem;height:1.1rem;border-radius:999px;border:1px solid rgba(255,255,255,.25)}.stack{display:grid;gap:.75rem}.field{display:grid;gap:.35rem}.field input{border-radius:10px;border:1px solid var(--line);background:#00000040;color:var(--ink);padding:.65rem .75rem}.tabs{display:flex;gap:.5rem;margin-bottom:.75rem}.error{color:var(--danger);font-size:.9rem}.rank{color:var(--accent);font-weight:600;min-width:1.5rem}