:root{--bg:#08111f;--border:rgba(148,163,184,.18);--green:#22c55e;--red:#ef4444;--text:#e2e8f0}*{box-sizing:border-box}.max-w-7xl{max-width:80rem}.max-w-3xl{max-width:48rem}.max-w-xs{max-width:20rem}.mx-auto{margin-left:auto;margin-right:auto}.p-4{padding:1rem}.mb-2{margin-bottom:.5rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.flex{display:flex}.grid{display:grid}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.grid-cols-1{grid-template-columns:minmax(0,1fr)}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-black{font-weight:900}.tracking-tight{letter-spacing:-.025em}.text-amber-300{color:#fcd34d}.text-green-400{color:#4ade80}.text-red-400{color:#f87171}.text-slate-200{color:#e2e8f0}.text-slate-300{color:#cbd5e1}@media(min-width:768px){.md\:p-6{padding:1.5rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:grid-cols-\[1fr_auto_1fr\]{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.md\:flex-row{flex-direction:row}.md\:items-start{align-items:flex-start}.md\:justify-between{justify-content:space-between}}@media(min-width:1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:items-end{align-items:flex-end}.lg\:justify-between{justify-content:space-between}}@media(min-width:1280px){.xl\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}body{margin:0;color:var(--text);font-family:Inter,Arial,sans-serif;min-height:100vh;background:radial-gradient(circle at top left,rgba(245,158,11,.1),transparent 26%),radial-gradient(circle at top right,rgba(34,197,94,.1),transparent 24%),linear-gradient(180deg,#08111f 0%,#0f172a 42%,#0b1120 100%)}.hero-card,.section-card,.selector-shell,.info-box,.uu-card,.upgrade-item,.unit-card,.matchup-item,.legend-chip,.mini-badge{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.hero-card{position:relative;overflow:hidden;border-radius:28px;padding:28px;border:1px solid var(--border);background:linear-gradient(135deg,rgba(15,23,42,.96),rgba(30,41,59,.85));box-shadow:0 20px 45px rgba(2,6,23,.35)}.hero-card:after{content:"";position:absolute;inset:auto -50px -55px auto;width:190px;height:190px;border-radius:999px;background:radial-gradient(circle,rgba(245,158,11,.18),transparent 70%);pointer-events:none}.eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;padding:6px 12px;border-radius:999px;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.22);color:#fcd34d;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.selector-shell{position:sticky;top:14px;z-index:20;border-radius:24px;padding:18px;border:1px solid var(--border);background:rgba(8,17,31,.88);box-shadow:0 18px 40px rgba(2,6,23,.34)}.select-wrap{display:flex;flex-direction:column;gap:8px}.select-label{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.select-box{width:100%;min-height:58px;border-radius:18px;border:1px solid rgba(148,163,184,.18);background:rgba(15,23,42,.96);color:#f8fafc;padding:0 16px;font-size:17px;font-weight:700;outline:none;transition:.2s ease}.select-box:hover,.select-box:focus{border-color:rgba(245,158,11,.55);box-shadow:0 0 0 3px rgba(245,158,11,.14)}.swap-btn{display:inline-flex;align-items:center;justify-content:center;height:58px;min-width:58px;border:1px solid rgba(148,163,184,.18);border-radius:18px;background:linear-gradient(135deg,rgba(30,41,59,.92),rgba(15,23,42,.92));color:#f8fafc;font-size:24px;font-weight:700;cursor:pointer}.section-card{height:100%;border-radius:26px;padding:22px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(15,23,42,.95),rgba(17,24,39,.92));box-shadow:0 16px 36px rgba(2,6,23,.3)}.side-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}.side-pill.my-side{background:rgba(34,197,94,.14);color:#86efac;border:1px solid rgba(34,197,94,.22)}.side-pill.opp-side{background:rgba(239,68,68,.14);color:#fca5a5;border:1px solid rgba(239,68,68,.22)}.overview-card{border-radius:20px;padding:16px 18px;border:1px solid rgba(148,163,184,.12);background:linear-gradient(180deg,rgba(30,41,59,.72),rgba(15,23,42,.72));margin-bottom:18px}.section-title{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:1rem;line-height:1.2;font-weight:800;color:#f8fafc}.section-dot{width:10px;height:10px;border-radius:999px;background:linear-gradient(135deg,#f59e0b,#fcd34d);box-shadow:0 0 0 5px rgba(245,158,11,.14);flex-shrink:0}.unit-card,.matchup-item,.upgrade-item,.info-box{border:1px solid rgba(148,163,184,.1);background:rgba(15,23,42,.72)}.unit-card,.matchup-item,.info-box{border-radius:18px;padding:14px}.unit-name{color:#fde68a;font-weight:800;margin-bottom:4px}.unit-desc{color:#cbd5e1;font-size:14px;line-height:1.45}.info-list{margin:0;padding-left:18px;color:#dbe4f0;font-size:14px;line-height:1.45}.info-list li+li{margin-top:6px}.team-bonus-chip{display:inline-flex;align-items:center;gap:8px;width:100%;border-radius:16px;padding:12px 14px;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.16);color:#dbeafe;font-size:14px;font-weight:600}.uu-card{border-radius:22px;padding:18px;margin-bottom:18px;border:1px solid rgba(245,158,11,.2);background:linear-gradient(135deg,rgba(69,26,3,.7),rgba(30,41,59,.78));box-shadow:0 16px 36px rgba(69,26,3,.18)}.matchup-item+.matchup-item,.unit-card+.unit-card{margin-top:10px}.good-chip,.bad-chip,.legend-chip,.mini-badge{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800;line-height:1}.good-chip{background:rgba(34,197,94,.12);color:#86efac;border:1px solid rgba(34,197,94,.18)}.bad-chip{background:rgba(239,68,68,.12);color:#fca5a5;border:1px solid rgba(239,68,68,.18)}.legend-chip{background:rgba(148,163,184,.1);border:1px solid rgba(148,163,184,.16);color:#cbd5e1}.legend-row{display:flex;flex-wrap:wrap;gap:8px}.upgrade-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.upgrade-item{display:flex;flex-direction:column;gap:6px;border-radius:16px;padding:12px}.upgrade-name{color:#94a3b8;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.upgrade-value{font-size:14px;line-height:1.35;font-weight:800}.upgrade-yes{color:#4ade80}.upgrade-no{color:#f87171}.upgrade-special{color:#fbbf24}.footer-note{color:#94a3b8;font-size:13px;text-align:center;margin-top:16px}@media(max-width:1024px){.selector-shell{position:static}}@media(max-width:768px){.hero-card{padding:22px;border-radius:24px}.section-card{padding:18px;border-radius:22px}.upgrade-grid{grid-template-columns:1fr}.swap-btn{width:100%}}