:root { color-scheme:dark; --bg:#090615; --panel:#15102a; --panel2:#20183b; --line:#443665; --text:#f6f1ff; --muted:#aaa0c1; --cyan:#65e6dd; --pink:#ff6e9f; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 15% 0,#2a165a,var(--bg) 42rem); color:var(--text); font:15px/1.4 system-ui,sans-serif; }
main { width:min(1080px,calc(100% - 20px)); margin:auto; padding:max(20px,env(safe-area-inset-top)) 0 56px; }
h1 { max-width:850px; margin:.15em 0; font-size:clamp(2rem,7vw,3.5rem); line-height:1.03; }
h2 { margin:0; font-size:1.15rem; }
h3 { margin:0; }
.back { color:var(--cyan); }
.eyebrow,.muted,.lead { color:var(--muted); }
.lead { max-width:75ch; }
.panel { margin-top:14px; padding:14px; border:1px solid var(--line); border-radius:14px; background:#15102aed; box-shadow:0 14px 40px #0005; }
.controls { display:flex; flex-wrap:wrap; gap:10px; align-items:end; }
label { display:grid; gap:4px; flex:1 1 240px; color:var(--muted); }
input,button { min-height:42px; border:1px solid var(--line); border-radius:9px; padding:8px 11px; background:var(--panel2); color:var(--text); font:inherit; }
button { cursor:pointer; font-weight:700; }
button.primary { background:#17675f; border-color:var(--cyan); }
.battlefield-panel { padding:10px 14px; }
.formation { display:flex; align-items:flex-end; justify-content:center; gap:clamp(7px,2vw,18px); overflow-x:auto; padding:4px 0 8px; }
.unit-cube { flex:0 0 76px; min-height:0; padding:0; border:0; background:transparent; color:var(--muted); font-size:11px; }
.unit-cube i { display:block; width:48px; height:48px; margin:0 auto 5px; border:2px solid #ffffffaa; border-radius:9px; background:linear-gradient(135deg,var(--ult),var(--skill)); box-shadow:inset -9px -9px 12px #0005,inset 7px 7px 10px #fff3,0 0 14px color-mix(in srgb,var(--skill),transparent 35%); transform:rotate(2deg); }
.unit-cube:hover i,.unit-cube:focus-visible i { border-color:#fff; transform:translateY(-2px) rotate(2deg); }
.versus { align-self:center; color:var(--pink); font-weight:900; letter-spacing:.08em; }
.teams { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.team > h2 { margin-bottom:4px; }
.unit { margin-top:9px; padding:10px; border:1px solid var(--line); border-radius:11px; background:var(--panel2); overflow:visible; }
.unit > header { display:flex; justify-content:space-between; gap:8px; align-items:baseline; margin-bottom:8px; }
.unit > header small { color:var(--muted); }
.unit > header > span { color:var(--muted); font-size:11px; text-align:right; }
.character-sheet { display:grid; grid-template-columns:190px minmax(0,1fr); gap:10px; align-items:start; }
.inventory-grid { display:grid; grid-template-columns:repeat(3,58px); grid-template-rows:repeat(3,58px); grid-template-areas:". head ." "weapon body ." ". feet ."; gap:5px; justify-content:center; padding:4px; border:1px solid #34294e; border-radius:9px; background:#0d0919; }
.slot-head { grid-area:head; }.slot-weapon { grid-area:weapon; }.slot-body { grid-area:body; }.slot-feet { grid-area:feet; }
.gear-slot { position:relative; min-height:0; width:58px; height:58px; padding:3px; border:2px solid var(--rarity); border-radius:7px; background:linear-gradient(145deg,color-mix(in srgb,var(--c1),#171126 72%),color-mix(in srgb,var(--c2),#0c0915 78%)); box-shadow:inset 0 0 14px #0008; line-height:1.05; }
.gear-slot:hover,.gear-slot:focus-visible { z-index:20; border-color:#fff; outline:none; box-shadow:0 0 12px var(--rarity); }
.slot-icon { display:block; font-size:22px; }
.slot-label { display:block; max-width:100%; overflow:hidden; color:#ddd5ed; font-size:9px; white-space:nowrap; text-overflow:ellipsis; }
.slot-level { position:absolute; right:3px; bottom:2px; color:#fff; font-size:9px; text-shadow:0 1px 2px #000; }
.item-tooltip { visibility:hidden; position:absolute; z-index:100; top:calc(100% + 7px); left:50%; width:270px; max-width:82vw; padding:10px; border:1px solid var(--rarity); border-radius:8px; background:#080611f5; box-shadow:0 10px 30px #000c; color:var(--text); font-size:12px; font-weight:400; line-height:1.35; text-align:left; opacity:0; pointer-events:none; transform:translate(-50%,-4px); transition:opacity .12s,transform .12s; }
.gear-slot:hover .item-tooltip,.gear-slot:focus-visible .item-tooltip { visibility:visible; opacity:1; transform:translate(-50%,0); }
.item-tooltip strong,.item-tooltip span { display:block; }
.item-tooltip strong { color:var(--rarity); font-size:13px; }
.item-tooltip .tip-line { margin-top:4px; color:#d5cce8; }
.item-tooltip .tip-hint { margin-top:7px; color:var(--cyan); }
.item-tooltip em { display:block; margin-top:7px; color:var(--cyan); font-style:normal; }
.stat-sheet { min-width:0; }
.stat-sheet table { width:100%; border-collapse:collapse; font-size:12px; }
.stat-sheet th,.stat-sheet td { padding:2px 3px; border-bottom:1px solid #382d52; text-align:right; }
.stat-sheet th:first-child,.stat-sheet td:first-child { text-align:left; }
.stat-sheet th { color:var(--muted); font-size:10px; font-weight:600; }
.stat-name { position:relative; cursor:help; border-bottom:1px dotted var(--muted); }
.stat-tooltip { visibility:hidden; position:absolute; z-index:120; left:0; bottom:calc(100% + 6px); width:230px; padding:8px; border:1px solid var(--cyan); border-radius:7px; background:#080611f5; box-shadow:0 8px 24px #000c; color:var(--text); font-size:11px; font-weight:400; line-height:1.35; text-align:left; opacity:0; pointer-events:none; transform:translateY(3px); }
.stat-name:hover .stat-tooltip,.stat-name:focus-visible .stat-tooltip { visibility:visible; opacity:1; transform:translateY(0); }
.stat-sheet .derived { color:var(--cyan); font-weight:700; }
.derived { display:flex; flex-wrap:wrap; justify-content:space-between; gap:3px 7px; margin-top:6px; font-size:11px; }
.ability-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:7px; }
.ability-compact { position:relative; min-width:0; padding:6px; border:1px solid #382d52; border-radius:7px; background:#100c1e; font-size:11px; cursor:help; }
.ability-compact b,.ability-compact small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ability-compact small { color:var(--muted); }
.ability-tooltip { visibility:hidden; position:absolute; z-index:130; left:50%; bottom:calc(100% + 7px); width:310px; max-width:82vw; padding:10px; border:1px solid var(--cyan); border-radius:8px; background:#080611f5; box-shadow:0 10px 30px #000c; color:var(--text); font-size:11px; font-weight:400; line-height:1.4; text-align:left; opacity:0; pointer-events:none; transform:translate(-50%,4px); }
.ability-tooltip strong,.ability-tooltip span,.ability-tooltip code { display:block; }
.ability-tooltip strong { margin-bottom:3px; color:var(--cyan); font-size:13px; }
.ability-tooltip code { color:#e8ddff; white-space:normal; }
.ability-compact:hover .ability-tooltip,.ability-compact:focus-visible .ability-tooltip { visibility:visible; opacity:1; transform:translate(-50%,0); }
.mix,.swatch { display:inline-block; width:.9em; height:.9em; margin-right:5px; border:1px solid #fff8; border-radius:50%; background:var(--color); box-shadow:0 0 8px var(--color); vertical-align:-.05em; }
.reference { padding:0; }
.reference summary { padding:12px 14px; cursor:pointer; color:var(--cyan); font-weight:750; }
.reference[open] summary { border-bottom:1px solid var(--line); }
.reference > :not(summary) { margin-left:14px; margin-right:14px; }
.reference > :last-child { margin-bottom:14px; }
.palette { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.palette-card { display:flex; gap:7px; align-items:flex-start; min-width:0; padding:8px; border:1px solid color-mix(in srgb,var(--color),#000 45%); border-radius:8px; background:color-mix(in srgb,var(--color),#100b22 83%); }
.palette-card .swatch { flex:0 0 auto; width:20px; height:20px; }
.palette-card small { display:block; color:var(--muted); overflow-wrap:anywhere; }
.rules { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.rules div { display:flex; gap:9px; padding:10px; border-radius:9px; background:var(--panel2); }
.rules b { color:var(--cyan); font-size:1.35rem; }
.formula-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.formula-grid code { padding:10px; border-radius:8px; background:#0d0919; overflow:auto; }
.result { display:flex; flex-wrap:wrap; gap:12px; font-size:1.05rem; }
.result strong { color:var(--cyan); }
.battle-viewer { margin-top:12px; padding:10px; border:1px solid var(--line); border-radius:10px; background:#0d0919; }
.battle-controls { display:grid; grid-template-columns:auto auto minmax(100px,1fr) auto auto; gap:6px; align-items:center; }
.battle-controls button { min-height:36px; padding:6px 9px; }
.battle-controls input { min-height:0; width:100%; padding:0; accent-color:var(--cyan); }
.battle-viewer > p { min-height:2.8em; margin:9px 0; }
#step-label { color:var(--cyan); }
#step-event { display:block; color:#ddd5ed; }
.action-mode { display:inline-block; margin-right:4px; padding:2px 6px; border-radius:999px; background:#34304b; color:#fff; font-size:10px; letter-spacing:.04em; }
.mode-basic { background:#65491e; }.mode-skill { background:#17675f; }.mode-ultimate { background:#773057; }.mode-skip { background:#555; }
.battle-state { display:grid; grid-template-columns:repeat(2,minmax(120px,1fr)) auto repeat(2,minmax(120px,1fr)); gap:7px; align-items:center; }
.battle-unit { display:grid; gap:3px; min-width:0; padding:8px; border:1px solid #382d52; border-radius:8px; background:#171126; font-size:11px; transition:.15s; }
.battle-unit.acting { border-color:var(--cyan); box-shadow:0 0 12px #65e6dd55; }
.battle-unit.targeted { border-color:var(--pink); box-shadow:0 0 12px #ff6e9f55; }
.battle-unit.defeated { opacity:.45; filter:grayscale(.7); }
.battle-unit > span,.battle-unit > small { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.battle-unit > small { color:var(--muted); }
.battle-unit .turn-delta { color:#ffe38a; font-weight:700; }
.meter { display:block; height:6px; overflow:hidden; border-radius:999px; background:#080611; }
.meter > i { display:block; height:100%; transition:width .15s; }
.hp-meter > i { background:linear-gradient(90deg,#db3754,#75e48c); }
.impulse-meter > i { background:linear-gradient(90deg,#3452c8,#a976ff); }
pre { max-height:420px; overflow:auto; padding:11px; border-radius:9px; background:#090615; white-space:pre-wrap; }
@media(max-width:900px) { .palette { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .teams,.formula-grid,.rules,.palette { grid-template-columns:1fr; } .controls button { flex:1 1 100%; } }
@media(max-width:620px) { .battle-state { grid-template-columns:repeat(2,minmax(120px,1fr)); } .battle-state > .versus { display:none; } .battle-controls { grid-template-columns:auto auto 1fr auto auto; } .battle-controls button { font-size:0; } .battle-controls button::first-letter { font-size:14px; } }
@media(max-width:390px) { .character-sheet { grid-template-columns:178px minmax(0,1fr); gap:6px; } .inventory-grid { grid-template-columns:repeat(3,54px); grid-template-rows:repeat(3,54px); } .gear-slot { width:54px; height:54px; } .stat-sheet th,.stat-sheet td { padding:2px 1px; font-size:11px; } }