/* Battle world — isolated from the Admin UI. The Unit grid is the main regression fix. */
body{background:linear-gradient(180deg,#102d53,#0b3550 70%,#103d4b);color:#173544;min-height:100vh}
body::before{content:"";position:fixed;inset:0;background:url('/assets/battle-scene.svg') center/cover no-repeat;opacity:.75;pointer-events:none;z-index:0}
body::after{content:"";position:fixed;inset:0;background:linear-gradient(90deg,#04182f55,#09254422,#04182f55),linear-gradient(180deg,transparent 40%,#072b4388);pointer-events:none;z-index:0}
.top,main,footer{position:relative;z-index:1}
.top{background:#102c4ded;border-bottom:1px solid #b6e9f966;backdrop-filter:blur(12px);box-shadow:0 8px 25px #051c3277}
.top .brand strong{color:white}.top .brand small{color:#bce7f3}.top nav a,.top .text-btn{color:#e6f9ff}
.top .text-btn{border:1px solid #bceaf955;background:#20577b88;border-radius:999px;padding:8px 12px}
main{max-width:1260px}
.back{color:#e7faff;font-weight:850;font-size:15px;text-shadow:0 3px 9px #072744}
.hero{min-height:320px;background:linear-gradient(115deg,#0b2145f2,#0c5274cf 75%,#165f6d99),url('/assets/battle-scene.svg') center/cover;border:1px solid #b8edfa66;box-shadow:0 22px 50px #061c3a99;display:flex;flex-direction:column;justify-content:center}
.hero h1{color:#fff;text-shadow:0 4px 15px #092641}.hero .hero-kicker{color:#ffe7a4}.hero h1 span{color:#a6ffd3}.hero p{color:#edfaff;text-shadow:0 2px 8px #092b42;font-size:17px}.hero-tank{filter:drop-shadow(0 6px 9px #052540);font-size:52px}
.panel{background:#f9fdfff2;border:1px solid #c6edf5c9;box-shadow:0 18px 36px #061d3870}
#view-units .panel{background:linear-gradient(145deg,#0d2b4aee,#0e5368f0);color:#f7fcff;border:1px solid #9de8f966;box-shadow:0 24px 48px #031a399a}
#view-units .panel>h2{font-size:clamp(27px,3.3vw,39px);margin-bottom:5px;color:#fff;text-shadow:0 4px 16px #06243c}
#view-units .panel>.muted{color:#d5effb;font-size:14px;margin-bottom:24px}
#view-units #empty-units{color:#ffeeb7}
#view-units .units{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;align-items:stretch;justify-items:stretch;width:100%}
#view-units .unit{width:100%;min-width:0;max-width:none;min-height:265px;padding:0;border-radius:18px;overflow:hidden;border:2px solid #c4efe5;background:linear-gradient(180deg,#fffcf6,#eaf8f3);box-shadow:0 11px 0 #041b3270,0 17px 26px #061d386b;display:flex;flex-direction:column;align-items:stretch;isolation:isolate;transition:transform .16s,border-color .16s,box-shadow .16s}
#view-units .unit:hover,#view-units .unit:focus-visible{transform:translateY(-5px);border-color:#ffdd74;box-shadow:0 15px 0 #041b3270,0 23px 28px #061d3890;outline:none}
#view-units .unit-art{height:94px;min-height:94px;position:relative;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#68c7ee,#b5f5e8 60%,#6cd6a6);border-bottom:3px solid #72c2a9;overflow:hidden}
#view-units .unit-art::before{content:"";position:absolute;left:-20%;bottom:-95%;height:105%;width:140%;border-radius:50%;background:#41ad79}
#view-units .unit-art::after{content:"";position:absolute;top:16px;right:18px;width:33px;height:11px;border-radius:50%;background:#ffffffc9;box-shadow:-70px 28px 0 #ffffffb0}
#view-units .unit-glyph{z-index:1;font-size:47px;line-height:1;filter:drop-shadow(0 6px 5px #18395e55)}
#view-units .unit:nth-child(5n+2) .unit-art{background:linear-gradient(155deg,#9bb8ff,#cfeeff,#b3aff5)}
#view-units .unit:nth-child(5n+3) .unit-art{background:linear-gradient(155deg,#ffd587,#fff2b0,#afe6a6)}
#view-units .unit:nth-child(5n+4) .unit-art{background:linear-gradient(155deg,#9ccbea,#d0ccff,#c1aff2)}
#view-units .unit:nth-child(5n+5) .unit-art{background:linear-gradient(155deg,#b8e8a9,#f7f3b7,#83d7a5)}
#view-units .unit-body{padding:12px 14px 14px;display:flex;flex-direction:column;flex:1;gap:7px;min-width:0}
#view-units .unit .unit-kicker{font-size:10px;letter-spacing:.75px;color:#547d87;font-weight:900}
#view-units .unit strong{font-size:20px;color:#12394c;overflow-wrap:anywhere}
#view-units .unit small{font-size:13px;color:#477284}
#view-units .unit .unit-meta{color:#537b84;font-size:12px;line-height:1.35}
#view-units .unit .progressbar{height:8px;border-radius:99px;background:#dcebea;margin-top:auto;overflow:hidden}
#view-units .unit .progressbar>span{display:block;height:100%;background:linear-gradient(90deg,#ffd467,#32c590)}
#view-units .unit .unit-cta{display:block;border-radius:11px;background:linear-gradient(90deg,#287bcb,#196bdc);padding:9px 11px;text-align:center;font-size:13px;font-weight:850;color:white;box-shadow:inset 0 -2px 0 #0e55a3}
#view-units .unit.unit-complete{border-color:#ffd675}
#view-units .unit.unit-complete .unit-cta{background:linear-gradient(90deg,#1f9c65,#26c98c)}
#view-home .grade{background:linear-gradient(155deg,#fff,#edfff7);border:1px solid #aee4d2;border-bottom:4px solid #28ad91;min-width:0;box-shadow:0 8px 18px #061e3833}
#view-home .grade::before{content:"★";display:block;font-size:22px;color:#f2bf39;text-shadow:0 2px 3px #a16e3244}
#view-home .grade strong{font-size:20px}
#view-game .battle{background:#f9fdfff6;border:2px solid #c6e7e4;box-shadow:0 20px 40px #061a3688}
#view-game .mission-card{background:linear-gradient(180deg,#092943,#134f70);border:1px solid #aee5f744}
#view-game canvas{border:2px solid #d4f0e8;box-shadow:0 10px 22px #092a4788}
#view-learning .panel,#view-results .panel{background:#fffffff5}
footer{background:#08243df2;border-top:1px solid #91c8e755}
@media(max-width:1000px){#view-units .units{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}#view-home .grades{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:670px){#view-units .units{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#view-units .unit{min-height:235px}#view-units .unit-art{height:75px;min-height:75px}#view-units .unit-glyph{font-size:37px}#view-units .unit-body{padding:9px;gap:5px}#view-units .unit strong{font-size:17px}#view-units .unit .unit-meta{font-size:11px}#view-units .unit .unit-cta{padding:8px 6px;font-size:12px}#view-home .grades{grid-template-columns:repeat(3,minmax(0,1fr))}.hero{min-height:260px}.hero p{font-size:15px}.hero-tank{opacity:.5;font-size:31px}.top nav{gap:5px}}
@media(max-width:390px){#view-home .grades{grid-template-columns:repeat(2,minmax(0,1fr))}#view-units .unit .unit-kicker{font-size:9px}#view-units .unit strong{font-size:16px}.top{flex-wrap:wrap}}
@media(max-width:330px){#view-units .units{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){#view-units .unit{transition:none}}