:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background:#120a2d; color:#f8f3ff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:linear-gradient(150deg,#120a2d,#0b1931 56%,#1b1035); }
#gameCanvas { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.7; }
button, a { font:inherit; } button { cursor:pointer; } button:focus-visible, a:focus-visible { outline:3px solid #f1c95d; outline-offset:3px; }
.app-shell { position:relative; z-index:1; width:min(1120px,100%); margin:0 auto; padding:max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 42px max(16px,env(safe-area-inset-left)); }
.hero { position:relative; min-height:190px; padding:22px 0 20px; }
.back { color:#d5c7ff; text-decoration:none; font-weight:750; }
.hero-actions { position:absolute; top:18px; right:0; display:flex; gap:8px; }
.ghost { min-height:42px; padding:7px 12px; border:1px solid #b395ff77; border-radius:12px; color:#f8f3ff; background:#20164aaa; }
.eyebrow, .version { margin:26px 0 7px; color:#d9bb6d; font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(2.2rem,9vw,4.6rem); line-height:.96; letter-spacing:-.055em; text-shadow:0 0 30px #a766ff99; }
.lead { max-width:610px; margin:12px 0; color:#d9d4eb; font-size:clamp(1rem,3vw,1.18rem); line-height:1.5; }
.version { margin:10px 0 0; color:#a89bc9; text-transform:none; letter-spacing:normal; font-weight:600; }
code { color:#f4d578; }
.tabs { position:sticky; top:0; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:7px; padding:8px 0; background:#160d35e8; backdrop-filter:blur(12px); }
.tab { min-height:48px; border:1px solid #a687e855; border-radius:13px; background:#24174dce; color:#e9e2ff; font-weight:800; }
.tab.is-active { border-color:#edcf73; color:#20112e; background:linear-gradient(135deg,#f1d77d,#c8a6f6); }
.page { display:none; padding-top:22px; }.page.is-active { display:block; }
.section-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:9px; margin:0 0 12px; }.section-heading h2 { margin:0; font-size:1.45rem; }.section-heading p { margin:0; color:#bdb4d8; }
.party-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.fighter { overflow:hidden; border:1px solid #a785e877; border-radius:23px; background:linear-gradient(145deg,#23164cdd,#151333e8); box-shadow:0 18px 40px #07041466; }
.fighter header { display:flex; align-items:center; justify-content:space-between; gap:9px; padding:17px 18px; background:linear-gradient(90deg,#39236e,#1f1b54); }.fighter h3 { margin:0; font-size:1.2rem; }.position { border-radius:99px; padding:4px 9px; background:#e5c96d24; color:#f1d77d; font-size:.78rem; font-weight:800; }
.loadout { display:grid; gap:10px; padding:14px; }.slot { min-height:99px; width:100%; display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:10px; padding:11px; text-align:left; color:#f7f0ff; border:1px solid #a687e855; border-radius:16px; background:#120e2ecc; }.slot:hover { border-color:#f1d77d; }.slot-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:#8d62e12c; color:#edcf73; font-size:1.3rem; }.slot small, .slot em { display:block; color:#c9bfdf; font-style:normal; }.slot strong { display:block; margin:2px 0; }.slot .arrow { color:#f2d56f; font-size:1.4rem; }
.equipment-note { margin:2px 14px 15px; padding:11px; border-left:3px solid #8d65e5; color:#c9bfdf; font-size:.9rem; line-height:1.42; }
.notice, .rule-card, .wiki-view { border:1px solid #a687e855; border-radius:19px; padding:16px; background:#181339dc; color:#dbd4ee; line-height:1.55; }.notice { margin-bottom:14px; }.notice strong { color:#f1d77d; }
.weapon-grid, .set-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }.weapon, .set { min-height:124px; padding:12px; text-align:left; color:#f8f3ff; border:1px solid #9a81d477; border-radius:17px; background:#1b143eee; }.weapon.is-selected { border-color:var(--tint); box-shadow:0 0 0 2px color-mix(in srgb,var(--tint),transparent 55%); }.weapon-number { color:var(--tint); font-size:1.35rem; font-weight:900; }.weapon small, .set small { display:block; margin-top:10px; color:#c9bfdf; }.weapon span { display:block; margin-top:4px; font-size:.8rem; color:#c9bfdf; }
.set { min-height:90px; }.set.is-selected { border-color:var(--tint); background:linear-gradient(145deg,color-mix(in srgb,var(--tint),#171337 80%),#171337); }
.rule-grid { display:grid; grid-template-columns:2fr 1fr; gap:16px; }.rule-card h2, .rule-card h3 { margin-top:0; color:#f1d77d; }.rule-card ul { margin:0; padding-left:20px; }.rule-card li { margin:8px 0; }
.wiki-nav { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }.wiki-nav button { min-height:42px; padding:7px 11px; border:1px solid #a687e855; border-radius:11px; background:#24174d; color:#f7f0ff; }.wiki-nav button.is-active { border-color:#f1d77d; color:#f1d77d; }.wiki-view { min-height:270px; }.wiki-view h1 { font-size:1.65rem; letter-spacing:-.03em; }.wiki-view h2 { color:#f1d77d; }.wiki-view p, .wiki-view li { color:#ddd4eb; }.wiki-view code { white-space:pre-wrap; }
.lab-link { margin:26px 0 0; text-align:center; }.lab-link a { display:inline-block; padding:12px 16px; border:1px solid #f1d77d88; border-radius:13px; color:#f4d578; background:#1b143eee; font-weight:800; text-decoration:none; }
.lab-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.lab-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:12px 0 18px; }.lab-fields label, .lab-shell label { display:grid; gap:5px; color:#d9d4eb; font-weight:700; }.lab-shell input, .lab-shell select { width:100%; min-height:42px; border:1px solid #a687e855; border-radius:9px; padding:7px 9px; color:#f8f3ff; background:#120e2e; }.lab-shell select { margin:7px 0 18px; }.lab-run { width:100%; min-height:48px; border:0; border-radius:12px; color:#20112e; background:linear-gradient(135deg,#f1d77d,#c8a6f6); font-weight:900; }.lab-result { min-height:400px; }.result-list { padding-left:20px; }.result-list li { margin:8px 0; }.result-warning { color:#ffb7c2; font-weight:800; }
@media (max-width:700px) { .party-grid,.rule-grid,.lab-grid { grid-template-columns:1fr; }.weapon-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.set-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.tabs { gap:5px; }.tab { min-height:54px; font-size:.8rem; }.hero { min-height:174px; }.hero-actions { top:15px; }.eyebrow { margin-top:48px; } }