/* VnDoc Tank English Game World V5 — visually rich yet static and free */
:root{--aqua:#73e7d9;--gold:#ffd66a;--night:#0a2443;--deep:#0b3052}
body{background:#10365a;color:#15374c}
body::before{background:linear-gradient(90deg,#081e40b8,#062f4e3d,#081d3db3),url('/assets/battle-scene.svg') center/cover fixed no-repeat;opacity:1}
.top{position:sticky;z-index:32;background:linear-gradient(90deg,#071e3bdc,#103a65e6);border-bottom:1px solid #aad8ff5c;box-shadow:0 6px 22px #07213cbf;padding-block:10px;color:#fff;flex-wrap:wrap}
.top .brand strong{font-size:23px;color:#ffce57;text-shadow:0 2px 0 #945d16,0 3px 12px #05152a}
.top .brand small{color:#eef9ff}
.top .brand-icon{font-size:42px}
.top nav{display:flex;flex-wrap:wrap;gap:7px;align-items:center;justify-content:flex-end}
.top nav a,.top nav button{border:1px solid #9ddbf744;background:#123e6a;border-radius:11px;padding:10px 13px;color:#eef7ff;font-weight:800;font-size:13px;text-decoration:none;box-shadow:inset 0 -2px #031a3077}
.top nav button{cursor:pointer}.top nav a:hover,.top nav button:hover{background:#1f5b90}
.top .nav-home{background:#174f82}
.top .nav-help{cursor:pointer}
main{max-width:1550px;padding:24px 18px 68px}
#view-home .hero{border:1px solid #fbe3a7af;border-radius:24px;min-height:350px;box-shadow:0 25px 55px #030c2370;background:linear-gradient(90deg,#0d2d57e8 0%,#114974c9 58%,#103d61b8 100%),url('/assets/battle-scene.svg') center/cover}
#view-home .hero h1{font-size:clamp(42px,5.8vw,78px);font-weight:1000;line-height:1.06;color:#fff;text-shadow:0 5px 0 #082440,0 8px 23px #050e20}
#view-home .hero h1 span{color:#baffdf;text-shadow:0 5px 0 #115960,0 10px 20px #021525}
#view-home .hero-tank{font-size:clamp(35px,5vw,85px);filter:drop-shadow(0 9px 9px #08243d)}
#view-home .panel{border:2px solid #aedbf0bb;background:#eff9fff5}
#view-home .grades{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
#view-home .grade{min-height:115px;border:2px solid #addced;border-bottom:6px solid #278fc7;background:linear-gradient(180deg,#fff,#e3f6ff);box-shadow:0 10px 20px #0b284c21;border-radius:16px}
#view-home .grade::before{content:'★';color:#f9b82f;font-size:21px;display:block;text-shadow:0 2px 2px #a54e2870}
#view-home .grade strong{color:#123653;font-size:19px}
#view-home .grade:hover{transform:translateY(-4px);border-color:#efbd51}
#view-units .back{margin:0 0 12px;color:#ffe6a4;font-weight:900;font-size:15px;text-shadow:0 2px 12px #07192d}
#view-units .selection-layout{display:grid;grid-template-columns:minmax(220px,260px) minmax(0,1fr);align-items:start;gap:18px}
#view-units .grade-sidebar{position:sticky;top:92px;background:linear-gradient(160deg,#101f35f7,#142d4bf7);border:3px solid #7485a3;border-radius:23px;padding:12px;box-shadow:0 18px 0 #03162c8a,0 25px 35px #01132799;overflow:hidden}
#view-units .grade-sidebar h2{color:#ffe2a1;text-shadow:0 3px 0 #533a27;font-size:23px;text-align:center;letter-spacing:.6px;padding:15px 9px;background:linear-gradient(180deg,#263a54,#1c304a);border:1px solid #8c9ab1;border-radius:13px;margin:0 0 12px}
#view-units .grade-menu{display:grid;gap:8px;max-height:calc(100dvh - 220px);overflow-y:auto;scrollbar-width:thin}
#view-units .grade-menu button{width:100%;display:flex;align-items:center;gap:11px;text-align:left;border:2px solid #4a6889;color:#eff8ff;background:linear-gradient(180deg,#3b5678,#223957);border-radius:13px;min-height:58px;padding:11px 12px;cursor:pointer;box-shadow:inset 0 -3px #12253e}
#view-units .grade-menu button::before{content:'⭐';font-size:23px}
#view-units .grade-menu button strong{font-size:17px;display:block}
#view-units .grade-menu button small{font-size:11px;color:#d1e4f5;display:block;margin-top:2px}
#view-units .grade-menu button[aria-current="true"]{border-color:#ffe39a;color:#3e2600;background:linear-gradient(180deg,#ffd951,#ff9d12);box-shadow:inset 0 -4px #b66a0d,0 8px 14px #f99c2d44}
#view-units .grade-menu button[aria-current="true"] small{color:#4d3517}
#view-units .grade-panel{margin:0;padding:22px 20px 18px;border:2px solid #b6e7fbc4;border-radius:24px;color:white;background:linear-gradient(135deg,#0f4482dc,#18587ac9),url('/assets/battle-scene.svg') center/cover;box-shadow:0 24px 42px #051731aa;min-width:0}
#view-units .grade-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
#view-units .grade-heading h2{font-size:clamp(28px,3vw,43px);color:#fff;text-shadow:0 5px 0 #123865,0 8px 17px #07182c;margin:0 0 10px}
#view-units .grade-heading .muted{color:#e0f2ff;background:#091e3d8a;border-radius:999px;padding:7px 13px;margin:0;font-size:13px;font-weight:750;display:inline-block}
#view-units .grade-summary{border:1px solid #cee9fa6d;background:#061c37b3;color:#fff;border-radius:16px;padding:13px 15px;min-width:210px}
#view-units .grade-summary strong{display:block;margin-bottom:8px;font-size:14px}
#view-units .grade-summary .progressbar{margin-top:4px;width:100%;height:9px;background:#456075}
#view-units .grade-summary .progressbar>span{background:linear-gradient(90deg,#2be2a7,#baffdd)}
#view-units .units{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;align-items:stretch;width:100%}
#view-units .units>.unit{min-width:0;width:100%;min-height:245px;display:flex;flex-direction:column;align-items:stretch;overflow:hidden;text-align:center;padding:0;border:2px solid #d4f8e9;border-radius:18px;background:linear-gradient(180deg,#fffdf4,#f1fffa);box-shadow:0 10px 0 #0a2d4a88,0 18px 23px #071c3977;transition:transform .17s,box-shadow .17s;isolation:isolate}
#view-units .units>.unit:hover,#view-units .units>.unit:focus-visible{transform:translateY(-5px);border-color:#ffdc69;box-shadow:0 13px 0 #0a2d4a88,0 24px 26px #071c3988;outline:none}
#view-units .unit-art{height:92px;min-height:92px;width:100%;border-bottom:2px solid #84ad9f;background:linear-gradient(#7fcbf6,#a7e9e2);position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden}
#view-units .unit-art::after{content:'';position:absolute;inset:0;background:url('/assets/unit-card-landscape.svg') center/cover;opacity:.65}
#view-units .unit-art .unit-glyph{z-index:2;font-size:48px;line-height:1;filter:drop-shadow(0 5px 3px #10485a60)}
#view-units .unit-body{padding:10px;display:flex;flex-direction:column;gap:5px;flex:1;align-items:stretch;min-width:0}
#view-units .unit-kicker{letter-spacing:1px;font-size:9px;color:#53879b;font-weight:900}
#view-units .unit strong{font-size:19px;color:#153e51;line-height:1.2;overflow-wrap:anywhere}
#view-units .unit small{color:#4e7b8b;font-size:12px}
#view-units .unit-meta{font-size:11px;color:#6c8995}
#view-units .unit .progressbar{height:7px;width:100%;margin-top:auto}
#view-units .unit .progressbar>span{background:linear-gradient(90deg,#f6c14c,#2ecb9a)}
#view-units .unit-cta{display:block;color:white;border-radius:999px;background:linear-gradient(90deg,#258cf1,#1685ca);font-size:12px;font-weight:850;padding:8px 6px;box-shadow:inset 0 -2px #1263b1}
#view-units .unit.unit-complete{border-color:#ffd970}
#view-units .unit.unit-complete .unit-cta{background:linear-gradient(90deg,#35c477,#11955a)}
#view-units .unit:nth-child(5n+2) .unit-art{background:#c1c3ff}#view-units .unit:nth-child(5n+3) .unit-art{background:#ffd1a2}#view-units .unit:nth-child(5n+4) .unit-art{background:#a4eacb}#view-units .unit:nth-child(5n+5) .unit-art{background:#eac9f7}
#view-units .unit-pager{display:flex;align-items:center;justify-content:center;gap:13px;color:#fdf1bf;font-weight:800;margin-top:26px}
#view-units .unit-pager button{border:1px solid #bbe5fc75;background:#18496bd8;color:white;padding:9px 15px;border-radius:50px;font-weight:850}
#view-units .unit-pager button:disabled{opacity:.35;cursor:default}
#view-units .unit-pager span{min-width:105px;text-align:center}
#view-units .selection-footer{text-align:right;margin-top:12px}
#view-units .selection-footer button{border:2px solid #ffe48b;color:#3d2700;background:linear-gradient(#ffeb65,#ffb525);padding:12px 20px;border-radius:13px;font-weight:950;box-shadow:0 5px 0 #c77c0b;cursor:pointer}
#view-learning .panel{background:#fffdf5f5}
#view-learning .difficulty-row{display:block;border-radius:19px;background:linear-gradient(150deg,#e9f6ff,#fff8e5);padding:18px}
#view-learning .difficulty-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:13px}
#view-learning .difficulty-card{min-width:0;display:flex;flex-direction:column;gap:8px;border:2px solid #c5dce6;border-bottom-width:5px;border-radius:19px;padding:15px;text-align:left;background:linear-gradient(#fff,#eef8ff);color:#15384a;cursor:pointer;transition:transform .16s,border-color .16s}
#view-learning .difficulty-card:hover{transform:translateY(-2px)}
#view-learning .difficulty-card[aria-pressed="true"]{border-color:#ffa936;background:linear-gradient(#fff9e0,#fff0ba);box-shadow:0 12px 20px #ddac4d30}
#view-learning .difficulty-card .mode-title{font-size:20px;font-weight:950}
#view-learning .difficulty-card .mode-sub{font-size:13px;color:#4a6b7e;line-height:1.5}
#view-learning .difficulty-card .mode-stats{font-size:12px;color:#306681;line-height:1.65;font-weight:700}
#view-learning .difficulty-card .mode-speed{margin-top:auto;background:#def3f8;border-radius:999px;padding:7px 10px;text-align:center;font-weight:850;font-size:12px}
#view-learning .difficulty-card[aria-pressed="true"] .mode-speed{background:#ffdc85}
#view-learning #difficulty{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#view-learning .voice-setting{border-radius:14px;border:1px solid #cddde3;background:#fff;padding:13px 16px;margin:13px 0;display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}
#view-learning .voice-setting label{font-weight:850;color:#1b4558}
#view-learning #voice-choice{width:min(100%,390px);padding:11px 12px;border:1px solid #b5d2df;border-radius:10px;font:inherit;background:#f9fdff;color:#17425b}
#view-learning #voice-description{font-size:12px;color:#617f8f;margin:0}
#view-game .game-heading{color:white}
#view-game .game-heading h2,#view-game .game-heading .eyebrow{color:white}
#view-game .scores span{background:#133b60;color:#e8fbff;border-color:#9ed5ec77}
#view-game .battle{background:#f7fdff;border:2px solid #d5effc}
#view-game .battle .mascot-coach{border:2px solid #f4d48c;background:#fff6d9}
#view-game .energy-card{border-radius:14px}
#view-results .panel{background:#fffdf7}
@media(max-width:1280px){#view-units .units{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1050px){#view-units .selection-layout{grid-template-columns:200px minmax(0,1fr)}#view-units .units{grid-template-columns:repeat(3,minmax(0,1fr))}#view-home .grades{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:780px){#view-units .selection-layout{grid-template-columns:minmax(0,1fr)}#view-units .grade-sidebar{position:static;padding:8px 10px}#view-units .grade-sidebar h2{font-size:16px;margin:0 0 9px;padding:8px}#view-units .grade-menu{display:flex;flex-wrap:nowrap;gap:7px;overflow-x:auto;max-height:none}#view-units .grade-menu button{min-width:104px;width:auto;flex:0 0 104px;padding:8px;min-height:49px}#view-units .grade-menu button strong{font-size:14px}#view-units .grade-menu button::before{font-size:16px}#view-units .units{grid-template-columns:repeat(3,minmax(0,1fr))}#view-units .grade-panel{padding:15px}#view-learning .difficulty-cards{grid-template-columns:repeat(3,minmax(0,1fr))}#view-learning .difficulty-card{padding:11px}#view-learning .difficulty-card .mode-title{font-size:16px}}
@media(max-width:560px){#view-units .units{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}#view-units .units>.unit{min-height:225px}#view-units .unit-art{height:75px;min-height:75px}#view-units .unit-art .unit-glyph{font-size:37px}#view-units .unit-body{padding:8px;gap:4px}#view-units .unit strong{font-size:17px}#view-units .unit-meta{font-size:10px}#view-units .grade-summary{width:100%}#view-units .grade-heading h2{font-size:25px}#view-learning .difficulty-cards{grid-template-columns:minmax(0,1fr)}#view-learning .difficulty-card{padding:12px}#view-learning .difficulty-card .mode-title{font-size:17px}#view-home .grades{grid-template-columns:repeat(2,minmax(0,1fr))}.top nav a,.top nav button{font-size:11px;padding:8px}#view-home .hero{min-height:300px}}
@media(max-width:350px){#view-units .units{grid-template-columns:minmax(0,1fr)}#view-units .grade-panel{padding:10px}}
@media(prefers-reduced-motion:reduce){#view-units .units>.unit,#view-learning .difficulty-card{transition:none}}

.top .game-help{position:relative}
.top .game-help summary{list-style:none;cursor:pointer;border:1px solid #9ddbf744;border-radius:11px;padding:10px 13px;background:#123e6a;font-size:13px;font-weight:800;color:#eef7ff;white-space:nowrap}
.top .game-help summary::-webkit-details-marker{display:none}
.top .game-help[open] .game-help-content{position:absolute;right:0;top:calc(100% + 10px);z-index:40;width:min(320px,90vw);padding:17px;border-radius:14px;border:2px solid #c6e7fa;background:#fffdf5;box-shadow:0 18px 35px #04172bb0;color:#1a4059;font-size:13px;line-height:1.65;font-weight:650}
#view-units .grade-menu button:focus-visible,#view-units .unit-pager button:focus-visible,#view-learning .difficulty-card:focus-visible{outline:3px solid #ffcb53;outline-offset:3px}
@media(max-width:720px){.top .brand strong{font-size:18px}.top nav{width:100%;justify-content:center}.top .game-help summary{padding:8px;font-size:11px}}