/* VnDoc Tank English — Canva-inspired game experience V7
   Designed from desktop selection + mobile battle Canva studies.
   Keep live UI interactive; no raster screenshot overlays.
*/
:root{--cg-ink:#102c45;--cg-blue:#0c55ae;--cg-gold:#ffd138;--cg-glow:#78dfff;--cg-cream:#fffbea}
body{background:#1c5d8f;color:var(--cg-ink);font-family:ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif}
body::before{background:url('/assets/canva-game-world.svg') center center/cover fixed no-repeat;opacity:1}
body::after{background:linear-gradient(180deg,#12345118 0%,#0e284a0a 60%,#031a3898 100%);opacity:1}
.top{max-width:none;margin:0;min-height:74px;display:flex;gap:22px;justify-content:space-between;align-items:center;
  background:linear-gradient(90deg,#071a32f2,#123b68e3 46%,#0b3053f2);border-bottom:2px solid #94d9ff60;
  box-shadow:0 7px 23px #0825476e;padding:10px clamp(16px,3vw,58px)}
.top .brand{gap:12px;flex-shrink:0}
.top .brand-icon{display:inline-flex;width:55px;height:56px;align-items:center;justify-content:center}
.top .brand-icon img{display:block;width:55px;height:56px;object-fit:contain;filter:drop-shadow(0 2px 5px #04142daa)}
.top .brand strong{font-size:clamp(19px,1.8vw,26px);line-height:1.08;color:#ffdc48;text-shadow:0 3px 1px #a44f16,0 5px 11px #041a36;font-weight:1000;white-space:nowrap}
.top .brand small{font-size:12px;color:#f2f9ff}
.top nav{align-items:center;justify-content:center;gap:7px}
.top nav a,.top nav button,.top .game-help summary{border:1px solid #64adea5e;border-bottom:3px solid #061c3a83;
  background:linear-gradient(180deg,#164c88,#082a56);color:#e9f8ff;padding:10px 14px;min-height:45px;
  border-radius:12px;font-size:13px;font-weight:850;box-shadow:inset 0 1px #cdefff33,0 4px 7px #071c3777;
  display:inline-flex;justify-content:center;align-items:center;gap:5px}
.top nav #nav-grades{color:#ffe98f}
.top nav a:hover,.top nav button:hover,.top .game-help summary:hover{border-color:#ffd976;background:linear-gradient(180deg,#246cb1,#14518f)}
.top nav a:focus-visible,.top nav button:focus-visible,.top .game-help summary:focus-visible{outline:3px solid #ffdb67;outline-offset:2px}
.top .game-help{position:relative}
.top .game-help summary{list-style:none;cursor:pointer;white-space:nowrap}
.top .game-help summary::-webkit-details-marker{display:none}
.top .game-help-content{color:#102c46;background:#fffcf0;border-radius:13px;padding:16px;line-height:1.6;box-shadow:0 12px 28px #07173188;max-width:325px;min-width:235px}
main{max-width:1580px;padding:20px clamp(10px,2vw,28px) 75px}
#view-home .hero{background:linear-gradient(90deg,#0e2b55ee 0%,#0f4f83bd 56%,#0d41685b),url('/assets/canva-game-world.svg') center 56%/cover;
  border:2px solid #d2ecff95;box-shadow:0 24px 48px #081d3caf;min-height:390px;border-radius:30px;padding:35px clamp(20px,5vw,65px);
  display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
#view-home .hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#061d3a62,transparent 85%);pointer-events:none}
#view-home .hero>*{position:relative;z-index:1}
#view-home .hero .hero-kicker{display:inline-flex;color:#ffe59c;font-size:12px;text-shadow:0 2px 8px #061937;letter-spacing:1.8px}
#view-home .hero h1{font-size:clamp(38px,5vw,76px);letter-spacing:-2px;font-weight:1000;text-shadow:0 5px 0 #0d3455,0 9px 20px #08172d;max-width:720px}
#view-home .hero h1 span{color:#9cfad1;text-shadow:0 4px 0 #065859,0 7px 15px #042e4e}
#view-home .hero p{max-width:600px;color:#e9f7ff;font-size:clamp(15px,1.35vw,18px);line-height:1.7;text-shadow:0 2px 9px #071a33}
#view-home .hero-tank{display:none}
#view-home .hero-mascot{position:absolute;bottom:-15px;right:4%;width:clamp(150px,20vw,305px);max-height:94%;
  object-fit:contain;filter:drop-shadow(0 16px 7px #06182f7c);z-index:1}
#view-home .panel{background:linear-gradient(180deg,#fffdf1f7,#e9f9fff5);border:2px solid #b7e9f6b4;box-shadow:0 17px 40px #09213f85}
#view-home .panel h2{color:#163d58}
#view-home #grades{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
#view-home #grades .grade{border:2px solid #a9d8e8;border-bottom:6px solid #126fa7;border-radius:17px;min-height:118px;padding:14px;
  background:linear-gradient(145deg,#fffef8,#e2f7fd);color:#134064;box-shadow:0 9px 13px #0b395a24;transition:transform .16s,box-shadow .16s}
#view-home #grades .grade:hover{border-color:#ffbf34;transform:translateY(-4px);box-shadow:0 15px 19px #0b395a42}
#view-home #grades .grade::before{content:"🏅";font-size:25px;display:block}
#view-home #grades .grade strong{font-size:20px}
#view-units{padding-top:0}
#view-units>.back{color:#fffbd9;margin:0 0 12px;font-size:14px;text-shadow:0 2px 7px #041630}
#view-units .selection-layout{grid-template-columns:minmax(210px,275px) minmax(0,1fr);gap:18px}
#view-units .grade-sidebar{background:linear-gradient(180deg,#213b59f7,#132844fa);border:5px solid #75879d;border-bottom-color:#3f4757;
  border-radius:22px;padding:12px 10px 14px;box-shadow:0 15px 0 #0e263a9a,0 24px 38px #06172dcc;top:94px}
#view-units .grade-sidebar h2{font-size:21px;color:#ffdb83;text-shadow:0 3px 1px #523725,0 5px 10px #09192b;
  background:linear-gradient(180deg,#455c6e,#172940);border:2px solid #8999ad;border-radius:12px;padding:13px 7px;margin-bottom:12px}
#view-units .grade-menu{display:grid;gap:8px}
#view-units .grade-menu button{min-height:56px;background:linear-gradient(180deg,#42658d,#1c3556);border:2px solid #577ba0;border-bottom:4px solid #102844;
  border-radius:13px;padding:8px 12px;color:#f3faff;transition:transform .15s,filter .15s}
#view-units .grade-menu button::before{content:"★";display:flex;width:36px;height:36px;align-items:center;justify-content:center;
  border-radius:50%;background:linear-gradient(140deg,#275a88,#103350);border:2px solid #4a8dab;color:#fbd77b;text-shadow:0 2px #99601e;font-size:25px}
#view-units .grade-menu button[aria-current="true"]{background:linear-gradient(180deg,#ffe357,#ffa719);border-color:#fff6a8;border-bottom-color:#ba6413;
  color:#382500;box-shadow:0 8px 19px #ff9f2475}
#view-units .grade-menu button[aria-current="true"]::before{background:linear-gradient(#fbc544,#d58408);border-color:#fff5b5;color:#fff1aa}
#view-units .grade-menu button strong{font-size:17px;color:inherit}
#view-units .grade-menu button small{font-size:11px}
#view-units .grade-menu button[aria-current="true"] small{color:#604414}
#view-units .grade-menu button:hover{filter:brightness(1.1);transform:translateX(2px)}
#view-units .grade-panel{margin:0;min-width:0;padding:20px clamp(12px,2vw,25px) 21px;border:2px solid #ffffffb9;border-radius:25px;
  background:linear-gradient(180deg,#125d9cb9,#14396896 36%,#132844c9),url('/assets/canva-game-world.svg') center/cover;
  box-shadow:0 23px 48px #0a1b33a5, inset 0 1px 18px #d0f5ff1c;backdrop-filter:blur(10px)}
#view-units .grade-panel::before{content:none}
#view-units .grade-heading{margin-bottom:16px;gap:16px}
#view-units .grade-heading h2{font-size:clamp(29px,3.2vw,53px);color:#ffe261;letter-spacing:-1px;
  text-shadow:0 3px 0 #8a3216,0 6px 1px #4e1e1d,0 12px 18px #041329;font-weight:1000}
#view-units .grade-heading .muted{background:#081f3bba;color:#eafcff;border:1px solid #8fcfff60;font-size:13px;border-radius:12px;padding:8px 14px;max-width:700px}
#view-units .grade-summary{background:linear-gradient(160deg,#092c52ec,#174979d9);border:1px solid #cbeaff80;border-radius:14px;
  min-width:200px;box-shadow:0 9px 18px #041b37a1;font-size:13px;padding:13px 15px}
#view-units .grade-summary strong{color:#f9e6a3}
#view-units .grade-summary .progressbar{height:10px;border:1px solid #a7d5e253}
#view-units #unit-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;align-items:stretch}
#view-units #unit-list .unit{position:relative;min-width:0;width:100%;min-height:239px;border:2px solid #f8fae0;border-bottom:6px solid #a9baaa;
  border-radius:19px;padding:0;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#fffbed,#ecf9f2);box-shadow:0 9px 15px #0a284977;text-align:center;transition:transform .16s,box-shadow .16s}
#view-units #unit-list .unit:hover,#view-units #unit-list .unit:focus-visible{border-color:#ffe780;transform:translateY(-4px);
  box-shadow:0 16px 23px #061e3b99}
#view-units #unit-list .unit-art{height:108px;min-height:108px;width:100%;border-bottom:2px solid #b9c8a7;overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#67b9fa,#a9ebff 64%,#7aca7c 65%,#4d9d63)}
#view-units #unit-list .unit-art::before{content:"";position:absolute;inset:auto -25% -61px;width:150%;height:95px;border-radius:50%;
  background:linear-gradient(90deg,#6cc77b,#2f9c68);z-index:1}
#view-units #unit-list .unit-art::after{content:"";position:absolute;top:15px;left:15px;width:65px;height:18px;border-radius:50%;
  background:#ffffffd8;box-shadow:70px 22px 0 #ffffff8e,115px -5px 0 #ffffffb4;z-index:0}
#view-units #unit-list .unit-art .unit-glyph{font-size:clamp(40px,4.3vw,67px);z-index:2;transform:translateY(-2px);
  line-height:1;letter-spacing:-5px;white-space:nowrap;text-shadow:0 8px 5px #163d5352;filter:drop-shadow(0 6px 5px #193b5380)}
#view-units #unit-list .unit[data-theme="school"] .unit-art{background:linear-gradient(#88c5ff 55%,#ccf9d3 56%)}
#view-units #unit-list .unit[data-theme="farm"] .unit-art{background:linear-gradient(#9ce0ff 58%,#8ab95c 59%)}
#view-units #unit-list .unit[data-theme="food"] .unit-art{background:linear-gradient(#ffe3ac,#ffdbb3 63%,#e7bd8a 64%)}
#view-units #unit-list .unit[data-theme="festival"] .unit-art{background:linear-gradient(#434aa2,#b271bf 62%,#e5a456 63%)}
#view-units #unit-list .unit[data-theme="space"] .unit-art{background:linear-gradient(#14346c,#4641b2 66%,#394586 67%)}
#view-units #unit-list .unit[data-theme="people"] .unit-art{background:linear-gradient(#72ccff,#b8f5f9 61%,#74c9ab 62%)}
#view-units #unit-list .unit[data-theme="nature"] .unit-art{background:linear-gradient(#79c6df,#bbf4ce 60%,#70bd76 61%)}
#view-units #unit-list .unit-body{padding:9px 9px 11px;display:flex;flex:1;flex-direction:column;gap:3px}
#view-units #unit-list .unit-kicker{display:none}
#view-units #unit-list .unit strong{color:#11344a;font-size:clamp(16px,1.45vw,21px);line-height:1.25;margin:0;word-break:break-word}
#view-units #unit-list .unit small{color:#3b6975;font-size:11px;line-height:1.3;max-height:32px;overflow:hidden}
#view-units #unit-list .unit-meta{display:none}
#view-units #unit-list .stage-stars{display:block;margin:3px 0 1px;font-size:18px;letter-spacing:3px;color:#b9bec2;line-height:1.1}
#view-units #unit-list .stage-stars .earned{color:#ffb422;text-shadow:0 2px 2px #a6641666}
#view-units #unit-list .progressbar{height:5px;margin:3px 0 2px}
#view-units #unit-list .unit-cta{font-size:12px;padding:8px 5px;background:linear-gradient(180deg,#3ca6ff,#0d76e9);
  border:1px solid #72bdff;border-bottom:3px solid #0959bc;border-radius:999px;line-height:1.1;color:#fff;font-weight:900}
#view-units #unit-list .unit-complete .unit-cta{background:linear-gradient(#3cd48d,#12925a);border-color:#85f4bd;border-bottom-color:#176c49}
#view-units .unit-pager button{background:linear-gradient(#3a74a8,#173f6e);border:2px solid #7daac7;min-width:40px;min-height:40px}
#view-units .selection-footer{margin-top:12px}
#view-units #quick-join{background:linear-gradient(#ffe878,#ffae1e);color:#49300b;font-size:17px;font-weight:1000;
  border:2px solid #fff29a;border-bottom:5px solid #bb6909;box-shadow:0 6px 16px #3d27074f;padding:13px 24px}
#view-learning .panel,#view-results .panel{background:linear-gradient(180deg,#fffdf7f9,#ecfbfff4);border:2px solid #b8dceb;
  box-shadow:0 20px 38px #09294783}
#view-learning .difficulty-row{background:linear-gradient(120deg,#e9f7ff,#fff3d6);border:2px solid #beddea}
#view-learning .difficulty-cards{gap:14px}
#view-learning .difficulty-card{border-width:2px 2px 5px;border-radius:19px;box-shadow:0 9px 14px #122c4d18;padding:18px;transition:transform .15s}
#view-learning .difficulty-card[data-difficulty="easy"]{background:linear-gradient(#fbfff6,#e3faeb)}
#view-learning .difficulty-card[data-difficulty="normal"]{background:linear-gradient(#fcfeff,#e0f1ff)}
#view-learning .difficulty-card[data-difficulty="hard"]{background:linear-gradient(#fffaf3,#ffe4d7)}
#view-learning .difficulty-card[aria-pressed="true"]{outline:3px solid #ffbf2b;outline-offset:1px;border-color:#ec9828}
#view-learning .difficulty-card .mode-title{font-size:23px}
#view-learning .difficulty-card .mode-speed{box-shadow:inset 0 -2px #217cab18}
#view-game .battle{background:linear-gradient(#fcffff,#e6f8fc);border:2px solid #d4f4ff;box-shadow:0 17px 32px #05234490}
#view-game .game-heading{color:white}
#view-game #arena{border:2px solid #cff8ed;box-shadow:0 7px 16px #11395744}
#view-game .mission-card{background:linear-gradient(170deg,#12375d,#144770);box-shadow:0 18px 30px #041b39a1}
#view-game .energy-card{background:linear-gradient(#fcfeff,#e8f5ff)}
#view-game .energy-bar{height:15px}
#view-game .word-slots .slot{background:#f5ffff;border:2px solid #c6e3eb;border-bottom:4px solid #3a87b9;color:#0d4662}
#view-game .word-slots .slot.filled{background:#dcffeb;border-color:#73d1a1;border-bottom-color:#1b9873}
#view-game .controls .button{box-shadow:0 5px 13px #176b8d2f}
#view-game .power-section{background:linear-gradient(#e9faff,#e0fff1);border:2px solid #bae2e9}
#view-game .power-button{background:linear-gradient(#fff,#f0fbff);border:2px solid #b7d9e1;border-bottom:4px solid #83b8c7}
#view-game .keyboard>.key{background:linear-gradient(#fff,#e7f3fd);border:1px solid #accfdd;border-bottom:4px solid #8caebb;color:#184f71;font-weight:900}
#view-game .mascot-coach{background:#fff4d7}
@media(max-width:1380px){
  .top{gap:10px}.top nav a,.top nav button,.top .game-help summary{font-size:11px;padding:8px 9px;min-height:40px}
  #view-units .selection-layout{grid-template-columns:230px minmax(0,1fr)}
  #view-units #unit-list{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:1040px){
  .top{flex-wrap:wrap;gap:8px}.top nav{justify-content:center}
  #view-units .selection-layout{grid-template-columns:190px minmax(0,1fr)}
  #view-units #unit-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  #view-home #grades{grid-template-columns:repeat(4,minmax(0,1fr))}
  #view-home .hero-mascot{opacity:.65;right:-2%}
}
@media(max-width:780px){
  .top{padding:8px 11px;gap:7px}
  .top .brand-icon,.top .brand-icon img{height:47px;width:45px}
  .top .brand strong{font-size:19px}
  .top nav{width:100%;justify-content:center;gap:5px}
  .top nav a,.top nav button,.top .game-help summary{min-height:33px;padding:7px 8px;font-size:11px}
  #view-units .selection-layout{grid-template-columns:minmax(0,1fr);gap:11px}
  #view-units .grade-sidebar{position:static;padding:7px;border-width:3px}
  #view-units .grade-sidebar h2{font-size:15px;margin:0 0 6px;padding:6px 10px}
  #view-units .grade-menu{display:flex;flex-wrap:nowrap;overflow-x:auto;max-height:none;gap:6px;padding:2px 0}
  #view-units .grade-menu button{min-width:100px;flex:0 0 100px;min-height:45px;padding:5px 6px;gap:6px;border-width:1px;border-bottom-width:3px}
  #view-units .grade-menu button::before{height:25px;width:25px;flex-shrink:0;font-size:17px}
  #view-units .grade-menu button strong{font-size:13px}
  #view-units .grade-menu button small{font-size:9px}
  #view-units .grade-panel{padding:13px;border-radius:17px}
  #view-units .grade-heading{margin-bottom:13px}
  #view-units .grade-heading h2{font-size:clamp(27px,6vw,39px)}
  #view-units #unit-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  #view-units #unit-list .unit-art{height:86px;min-height:86px}
  #view-units #unit-list .unit{min-height:210px}
  #view-units #unit-list .unit strong{font-size:16px}
  #view-units #unit-list .unit-art .unit-glyph{font-size:42px}
}
@media(max-width:560px){
  main{padding:12px 8px 38px}
  #view-home .hero{min-height:280px;padding:20px;border-radius:20px}
  #view-home .hero h1{font-size:clamp(33px,8vw,45px)}
  #view-home .hero p{font-size:13px;line-height:1.5;max-width:75%}
  #view-home .hero-mascot{right:-7%;bottom:-8px;width:40%;opacity:.8}
  #view-home #grades{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  #view-home #grades .grade{min-height:82px;padding:9px}
  #view-home #grades .grade strong{font-size:16px}
  #view-home #grades .grade::before{font-size:18px}
  #view-units #unit-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #view-units #unit-list .unit{min-height:208px}
  #view-units #unit-list .unit-art{height:82px;min-height:82px}
  #view-units #unit-list .unit-body{padding:7px;gap:3px}
  #view-units #unit-list .unit strong{font-size:15px}
  #view-units #unit-list .unit-art .unit-glyph{font-size:42px}
  #view-units #unit-list .stage-stars{font-size:16px}
  #view-units #quick-join{font-size:14px}
  #view-learning .difficulty-cards{grid-template-columns:1fr;gap:9px}
  #view-learning .difficulty-card{padding:12px;min-height:110px}
  #view-learning .difficulty-card .mode-title{font-size:19px}
}
@media(max-width:360px){#view-home #grades{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Battle mobile in portrait: unlike a poster, controls must remain tappable. */
@media(max-width:820px){
 body[data-screen="game"]::before{background-position:center 60%}
 body[data-screen="game"] .top{display:none!important}
 body[data-screen="game"] main{padding:3px 6px calc(225px + env(safe-area-inset-bottom,0px))}
 #view-game .game-heading{margin:0 0 3px}
 #view-game .game-heading .eyebrow{font-size:12px;color:#fffbc9}
 #view-game .battle{padding:5px;border:1px solid #c1e3ed;border-radius:14px}
 #view-game .energy-grid{gap:5px;margin-bottom:4px}
 #view-game .energy-card{padding:5px 7px}
 #view-game .energy-bar{height:9px}
 #view-game canvas{height:clamp(130px,21svh,171px);border:2px solid #b9e7ed;border-radius:11px;box-shadow:none}
 #view-game .mascot-coach{margin:4px auto 0;padding:3px 7px;gap:5px;border-width:1px}
 #view-game .mascot-face{font-size:17px}
 #view-game .word-slots{margin:6px 0 4px;gap:3px}
 #view-game .slot{height:31px;min-width:0;border-width:1px;border-bottom-width:3px;border-radius:6px;font-size:15px}
 #view-game .controls{gap:4px;margin:4px 0}
 #view-game .controls .button{font-size:11px;min-height:37px;padding:5px 2px;border-radius:9px}
 #view-game .power-section{border:1px solid #79aeba;border-top:2px solid #9bf4d5;background:linear-gradient(#f4fffb,#d8fff0);padding:5px 6px 3px;box-shadow:0 -5px 15px #041d3e78}
 #view-game .power-button{min-height:41px;box-shadow:0 2px 0 #83b6bb}
 #view-game .keyboard{background:linear-gradient(#d9f1ff,#effaff);box-shadow:0 -4px 14px #0b2d4b75;border-top:2px solid #9acbdf}
 #view-game .keyboard>.key{background:linear-gradient(#fff,#e9f5fc);border-bottom:4px solid #8baebd;box-shadow:0 1px 3px #18466325;min-height:39px}
}
@media(max-width:820px) and (max-height:700px){
 #view-game canvas{height:clamp(104px,16svh,126px)}
 #view-game .mascot-coach{display:none}
}
@media(prefers-reduced-motion:reduce){#view-home .hero-mascot{filter:none}#view-units #unit-list .unit{transition:none}}