:root{--bg:#0b1020;--panel:#121a2d;--line:#283454;--text:#edf2ff;--muted:#8f9bb9;--fire:#ff6b4a;--water:#48b8ff;--earth:#c6a46b;--air:#b6d7ff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% -10%,#263860 0,#0b1020 52%);color:var(--text);font:14px Inter,system-ui,sans-serif;min-height:100vh}.topbar{max-width:1080px;margin:auto;padding:24px 28px 18px;display:flex;justify-content:space-between;align-items:end}.eyebrow,.label,.section-title{font-size:11px;letter-spacing:.14em;color:var(--muted);font-weight:700}.topbar h1{font-size:30px;margin:5px 0 0}.timer{font-size:28px;font-variant-numeric:tabular-nums;font-weight:800}.arena{max-width:1080px;margin:auto;padding:0 28px 40px}.status{display:grid;grid-template-columns:1fr 58px 1fr;gap:20px;align-items:center;background:#10182a;border:1px solid var(--line);border-radius:18px;padding:18px 22px}.versus{text-align:center;color:#65749b;font-weight:800}.bar{height:8px;background:#2c1b30;border-radius:9px;margin-top:9px;overflow:hidden}.bar i{display:block;height:100%;width:68%;background:linear-gradient(90deg,#f14c68,#ff9150);border-radius:9px}.bar.friendly i{width:86%;background:linear-gradient(90deg,#4d9aff,#6ce5d0)}.hint{text-align:center;color:var(--muted);margin:20px 0 12px}.sources{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.source,.unit,.choice{background:linear-gradient(145deg,#17223a,#10182b);border:1px solid var(--line);border-radius:16px}.source{padding:18px;cursor:pointer;transition:.2s}.source:hover,.source.selected{border-color:#88a6e8;transform:translateY(-2px);box-shadow:0 10px 30px #0003}.source h2{margin:0 0 5px;font-size:18px}.source p{margin:0 0 15px;color:var(--muted);font-size:12px}.control{height:7px;background:#29344c;border-radius:9px;overflow:hidden}.control i{display:block;height:100%;background:linear-gradient(90deg,var(--water),var(--air));border-radius:9px}.source .foot{display:flex;justify-content:space-between;margin-top:10px;color:#b7c3e0;font-size:12px}.section-title{display:flex;justify-content:space-between;align-items:center;margin:28px 0 10px}.units{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.unit{min-height:106px;padding:12px;text-align:left;cursor:pointer}.unit.empty{display:grid;place-items:center;color:#536283;border-style:dashed}.unit strong{display:block;margin:8px 0 3px}.unit small{color:var(--muted)}.dot{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;font-size:13px}.fire{color:var(--fire);background:#4a211f}.water{color:var(--water);background:#153c55}.earth{color:var(--earth);background:#493b27}.air{color:var(--air);background:#293e58}.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.choice{padding:16px;cursor:pointer}.choice:hover{border-color:#a9bcf1}.choice strong{font-size:16px}.choice p{color:var(--muted);margin:7px 0 0;font-size:12px}button{border:1px solid var(--line);background:#1b2945;color:#dce6ff;padding:8px 12px;border-radius:8px;cursor:pointer}button:hover{background:#25375d}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;background:#eef3ff;color:#10182b;border-radius:10px;padding:10px 16px;font-weight:700;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:700px){.topbar{padding:18px}.arena{padding:0 18px 30px}.status{grid-template-columns:1fr;gap:12px}.versus{display:none}.sources{grid-template-columns:1fr}.units{grid-template-columns:repeat(3,1fr)}.choices{grid-template-columns:1fr}}