@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');
:root{--bg:#101716;--bg2:#16211e;--panel:#1b2623;--white:#e7e9dc;--red:#d54c43;--border:#3c4840;--mute:#919e95;--bright:#d6d5b6}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--white);background:radial-gradient(ellipse at 80% -20%,#344138 0,transparent 45%),radial-gradient(ellipse at 0 45%,#202c26 0,transparent 60%),var(--bg);font:14px 'IBM Plex Mono',monospace;min-height:100vh}.noise{pointer-events:none;position:fixed;inset:0;z-index:10;opacity:.14;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}.embers{pointer-events:none;position:fixed;inset:0;background:radial-gradient(ellipse at 11% 8%,#8b392318 0,transparent 20%),radial-gradient(ellipse at 90% 70%,#92372412 0,transparent 30%)}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}.topbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #33423a;padding:20px max(30px,calc((100vw - 1450px)/2));gap:14px}.logo{font:900 34px 'Barlow Condensed',sans-serif;letter-spacing:2px;text-decoration:none;color:#f2f0e5;line-height:1}.red{color:var(--red)}.logo-mark{font:9px monospace;vertical-align:top;margin-left:4px}.top-meta{font-size:10px;letter-spacing:1.1px;color:#9ca99f;display:flex;align-items:center;gap:12px}.top-meta b{color:#d7d7c9}.separator{color:#566359}.live-dot,.dot{display:inline-block;width:6px;height:6px;background:#c95d4c;border-radius:50%;box-shadow:0 0 12px #c95d4c}.ghost-btn{background:transparent;color:var(--white);border:1px solid #536158;padding:10px 15px;letter-spacing:1px;font-size:10px}.shell{max-width:1450px;margin:auto;padding:30px 30px 20px}.hero-copy{text-align:center;padding:14px 0 26px}.kicker,.eyebrow{font-size:10px;color:#c75a4e;letter-spacing:2.2px;font-weight:700}.kicker{display:flex;align-items:center;justify-content:center;gap:14px}.line{display:inline-block;height:1px;width:45px;background:#7d4740}.hero-copy h1{font:900 clamp(40px,6vw,82px)/.94 'Barlow Condensed',Impact,sans-serif;letter-spacing:1px;margin:15px 0 14px;text-transform:uppercase}.hero-copy h1 em{color:#d4574a;font-style:normal}.hero-copy p{font-size:12px;line-height:1.8;color:#a7b2a8}.game-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(350px,.75fr);border:1px solid #465248;background:#18221f;min-height:520px;box-shadow:0 26px 90px #0007}.map-panel{display:flex;flex-direction:column;min-width:0}.map-toolbar{height:48px;padding:0 20px;border-bottom:1px solid #455047;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;letter-spacing:1.1px;color:#c4cbbd}.map-toolbar .dot{margin-right:10px}.map-toolbar #mapStatus{color:#c2aaa0}.map-area{flex:1;min-height:380px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 58% 30%,#35453d 0%,#26342d 36%,#101b19 85%)}.map-area::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 0 0,#c3ad9255 0,transparent 26%),radial-gradient(ellipse at 92% 94%,#0d151bba 0,transparent 35%);pointer-events:none;z-index:1}.map-area svg{width:100%;height:100%;position:absolute;inset:0;transform:scale(1.08);opacity:.96}.country{fill:#28382f;stroke:#677568;stroke-width:1.3;stroke-linejoin:round;transition:fill .7s,stroke .6s,filter .6s}.country:hover{fill:#425548}.country.start{fill:#9a403b;stroke:#ed8270;stroke-width:2.5}.country.captured{fill:#af4d43;stroke:#f2a18b;stroke-width:2.5;filter:url(#glow)}.country.next{fill:#455244;stroke:#bac19b;stroke-width:2;stroke-dasharray:5 5}.map-label{font:700 10px 'IBM Plex Mono',monospace;fill:#c3c9b5;paint-order:stroke;stroke:#1a2721;stroke-width:4px;pointer-events:none}.marker{fill:#e2a66d;stroke:#2e332c;stroke-width:3px}.map-scan{position:absolute;inset:0;pointer-events:none;opacity:.15;background:repeating-linear-gradient(0deg,transparent 0px,transparent 4px,#070b0a 5px)}.map-watermark{position:absolute;bottom:26px;right:25px;color:#d7e0ce10;font:900 110px 'Barlow Condensed';line-height:.7}.map-watermark span{color:#a9bca10c}.map-coordinates{position:absolute;top:18px;left:20px;color:#ced0b3bd;font-size:9px;letter-spacing:1px;z-index:2}.map-coordinates span{display:block;margin-top:7px;color:#cb7567}.map-footer{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #465248;background:#111b18}.map-footer>div{padding:16px 20px;display:flex;flex-direction:column;gap:4px}.map-footer>div+div{border-left:1px solid #465248}.footer-label{font-size:9px;color:#97a597;letter-spacing:1px}.map-footer strong{font:800 30px 'Barlow Condensed';letter-spacing:.7px}.map-footer small{font-size:9px;color:#849287}.control-panel{border-left:1px solid #465248;min-width:0;position:relative;background:linear-gradient(145deg,#202b26,#131d1a);padding:0 27px 25px}.panel-heading{height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #435047;font-size:10px;letter-spacing:1px;color:#aeb9ad}.label-tag{color:#d5c0aa}.screen{padding-top:24px}.hidden{display:none!important}.tank-art{width:100%;height:116px;opacity:.95;background:radial-gradient(ellipse at 50% 90%,#a56b3f2b 0,transparent 68%)}.tank-art svg{height:100%;width:100%;filter:drop-shadow(0 10px 5px #0009)}.start-tag{color:#d1a393;font-size:10px;letter-spacing:2px;margin-top:12px;font-weight:700}h2{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:900;letter-spacing:.8px}.screen h2{font-size:clamp(35px,3.5vw,49px);line-height:.98;margin:14px 0}.screen h2 span{color:#d15d4e}.screen p{line-height:1.75;color:#adb9ad;font-size:12px}.rules{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #48564b;border-bottom:1px solid #48564b;margin:22px 0}.rules>div{display:flex;flex-direction:column;padding:15px 8px;gap:3px}.rules>div+div{border-left:1px solid #48564b}.rules b{font:800 28px 'Barlow Condensed'}.rules span{font-size:8px;color:#aab9a8;letter-spacing:.6px}.primary,.secondary{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;font-size:11px;letter-spacing:1.1px;font-weight:700;border:0}.primary{background:#bd5145;color:#fff6e9;box-shadow:0 5px 0 #73342d;transition:background .2s,transform .2s}.primary:hover{background:#db6253;transform:translateY(-2px)}.primary span{font-size:19px}.secondary{background:#2d3b33;border:1px solid #647465;color:#d3decf;margin-top:12px}.muted{color:#87968c!important}.footnote{display:block;margin-top:13px;font-size:9px;line-height:1.5}.text-link{background:none;border:0;color:#b7c4b9;text-decoration:underline;text-underline-offset:4px;padding:20px 0;font-size:10px;letter-spacing:1px}.question-top{min-height:170px}.question-top h2{font-size:clamp(30px,3vw,44px);line-height:1.07}.timer-track{height:5px;background:#4a544c;margin-top:22px}.timer-track span{display:block;background:#d55a49;width:100%;height:100%;transition:width .2s}.timer-row{display:flex;justify-content:space-between;align-items:center;margin:10px 0 36px;font-size:10px;letter-spacing:1px;color:#9aa89e}.timer-row strong{color:#f3e4c9;font:800 34px 'Barlow Condensed'}.timer-row strong.danger{color:#e56250}.input-label{font-size:10px;color:#b8c8b8;letter-spacing:1px}#answer{display:block;width:100%;background:#0f1a17;border:1px solid #647469;border-radius:0;padding:17px 15px;color:white;outline:none;margin:12px 0 18px}#answer:focus{border-color:#d87b65}.question-foot{display:flex;justify-content:space-between;margin-top:25px;color:#a0b0a3;font-size:10px}.question-foot b{color:white}.feedback-screen{}.score-card{margin:22px 0;padding:20px;border:1px solid #5a6556;background:#223029;display:flex;justify-content:space-between;align-items:center}.score-card span{font-size:10px;color:#b0beae}.score-card strong{font:800 43px 'Barlow Condensed';color:#d9a18d}.event-log{border-left:2px solid #d06453;padding:10px 0 10px 16px;margin-bottom:22px;color:#d3dacd;font-size:12px;line-height:1.9}.final-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:24px 0}.final-grid>div{border:1px solid #637063;padding:18px;display:flex;flex-direction:column;gap:10px}.final-grid small{font-size:9px;color:#9ba89e}.final-grid strong{font:800 52px 'Barlow Condensed'}.captured-list{font-size:11px;color:#b3c4b5;line-height:1.8;margin:10px 0 23px;max-height:125px;overflow:auto}.bottom-strip{display:flex;flex-wrap:wrap;justify-content:space-between;gap:15px;padding:20px 0;border-bottom:1px solid #3f4b43;font-size:9px;color:#8da091;letter-spacing:.8px}.bottom-strip b{color:#e6e5d7;margin-left:8px}.bottom-strip span{color:#d76354;margin-right:7px}.instructions{padding:50px 0 42px;max-width:1000px}.instructions h2{font:900 42px 'Barlow Condensed';margin:9px 0}.instructions p{font-size:12px;line-height:1.9;color:#bac9ba}footer{border-top:1px solid #3e493f;display:flex;justify-content:space-between;gap:12px;padding:25px max(30px,calc((100vw - 1450px)/2));font-size:9px;color:#8fa294;letter-spacing:1px}.toast{position:fixed;z-index:20;left:50%;bottom:25px;transform:translateX(-50%);background:#e2dfcc;color:#15231b;padding:14px 22px;font-weight:700;font-size:12px;box-shadow:0 10px 30px #0008}@media(max-width:1000px){.game-grid{grid-template-columns:1fr}.control-panel{border-left:0;border-top:1px solid #465248;padding-bottom:30px}.map-area{min-height:400px}.tank-art{height:130px}.top-meta{display:none}}@media(max-width:550px){.topbar{padding:16px}.shell{padding:24px 12px}.hero-copy h1{font-size:45px}.hero-copy p{font-size:10px}.map-toolbar{padding:0 10px;font-size:8px}.map-area{min-height:300px}.map-footer>div{padding:12px 7px}.map-footer strong{font-size:24px}.footer-label{font-size:7px}.map-footer small{font-size:8px}.control-panel{padding:0 19px 25px}.bottom-strip{font-size:8px}.instructions{padding:32px 6px}.instructions h2{font-size:34px}footer{padding:18px;flex-wrap:wrap;font-size:8px}}

/* FRONT 0.2: cinematic cover and map takeover */
body{overflow-x:hidden}body.landing-mode{overflow:hidden}
.landing{position:fixed;inset:0;z-index:15;overflow:hidden;color:#efece3;background:radial-gradient(ellipse at 50% 74%,#34453e 0,#16211f 44%,#090f12 100%);display:flex;align-items:center;justify-content:center;transition:opacity .75s ease,transform 1.35s cubic-bezier(.2,.72,.18,1),filter .95s ease}
.landing::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 18% 62%,#b86a3830,transparent 32%),radial-gradient(ellipse at 85% 35%,#657d8544,transparent 40%);pointer-events:none}
.landing-atmosphere{position:absolute;inset:-15%;background-image:linear-gradient(180deg,#101719 5%,#10171955 37%,#09111665 72%,#071012 95%),url('./assets/battlefield.jpg');background-position:center,center 61%;background-size:cover,cover;filter:blur(3px) saturate(.62);transform:scale(1.11);animation:landingDrift 22s ease-in-out infinite alternate}
@keyframes landingDrift{to{transform:scale(1.2) translate3d(-2%,1%,0)}}
.landing-smoke{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 24% 80%,#d7b4a025,transparent 31%),radial-gradient(ellipse at 72% 80%,#a5b7b521,transparent 41%);filter:blur(34px);animation:smokeDrift 10s ease-in-out infinite alternate}
@keyframes smokeDrift{to{transform:translateX(5%)}}
.landing-inner{position:relative;text-align:center;width:min(100% - 40px,1050px);z-index:1;margin:-1vh auto 0}
.landing-sup{font-size:10px;font-weight:700;letter-spacing:3px;color:#c9c9b5}
.landing-title{font:900 clamp(96px,17vw,235px)/.82 'Barlow Condensed',Impact,sans-serif;letter-spacing:clamp(2px,1.4vw,18px);text-shadow:0 9px 0 #090e1080,0 20px 85px #000a;margin:27px 0 19px}
.landing-title>span:first-child{color:#d3594b}.title-point{color:#d3594b}
.landing-tagline{font:600 clamp(12px,1.45vw,18px) 'IBM Plex Mono',monospace;letter-spacing:clamp(1px,.45vw,6px);color:#e9e4d7}
.landing-landscape{position:relative;height:clamp(115px,24vh,230px);margin:8px auto 0;max-width:850px}
.landing-landscape::before{content:"";position:absolute;left:5%;right:5%;bottom:0;height:83%;background:radial-gradient(ellipse at 50% 98%,#dd514d44,transparent 44%),linear-gradient(transparent 0,#111d1eab 100%);clip-path:polygon(0 100%,4% 69%,11% 77%,17% 43%,26% 59%,31% 32%,40% 58%,49% 36%,60% 67%,72% 38%,81% 62%,91% 43%,100% 75%,100% 100%);border-bottom:1px solid #a95c49}
.landing-vehicle{position:absolute;left:50%;bottom:13%;transform:translateX(-50%);width:clamp(130px,19vw,228px);filter:drop-shadow(1px 15px 15px #000c) drop-shadow(0 0 12px #ca4b3e47)}.landing-vehicle svg{width:100%;height:auto}
.landing-pin{position:absolute;left:50%;bottom:0;transform:translateX(-50%);font-size:9px;letter-spacing:1px;color:#e5b59a;white-space:nowrap}
.landing-rule{display:flex;align-items:center;justify-content:center;gap:22px;color:#c0cabe;letter-spacing:1.7px;font-size:10px;margin:20px 0 19px}.landing-rule i{width:4px;height:4px;background:#d26553;transform:rotate(45deg)}
.landing-start{display:flex;justify-content:space-between;align-items:center;max-width:590px;width:100%;margin:auto;padding:19px 26px;color:#f7f2e8;background:#be5346;border:1px solid #df7f66;border-bottom:4px solid #842f2d;font:800 clamp(17px,2vw,26px) 'Barlow Condensed',sans-serif;letter-spacing:4px;box-shadow:0 15px 50px #080b0bc7;transition:transform .2s,background .2s}.landing-start:hover{background:#da6857;transform:translateY(-3px)}.landing-start span{font-size:28px}.landing-secondary{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:26px;letter-spacing:1.5px;color:#8d9f9b;font-size:9px}.landing-secondary button{background:none;border:none;border-bottom:1px solid #c1aa99;color:#eee3d4;font:inherit;letter-spacing:inherit;padding:3px 0}.landing-bottom{position:absolute;bottom:22px;left:25px;right:25px;display:flex;justify-content:space-between;color:#8d9f97;font-size:9px;letter-spacing:1px}
body.landing-mode .shell,body.landing-mode .topbar,body.landing-mode footer{opacity:0;pointer-events:none}
body.zooming .landing{opacity:0;transform:translateY(-38%) scale(2.1);filter:blur(12px);pointer-events:none}
body.zooming .shell{opacity:1;transform:scale(1.01)}
body.in-game .hero-copy{max-height:0;padding:0;overflow:hidden;opacity:0;margin:0}
body.in-game .shell{max-width:none;padding:10px 16px 12px;transition:opacity .4s,transform 1.2s}
body.in-game .game-grid{min-height:calc(100dvh - 180px);position:relative;display:block;overflow:hidden}
body.in-game .map-panel{height:calc(100dvh - 180px);min-height:560px}
body.in-game .map-area{min-height:410px}
body.in-game .map-area svg{transition:transform 1.9s cubic-bezier(.16,.7,.24,1);transform:scale(1.22) translateX(-3%)}
body.in-game .control-panel{position:absolute;right:20px;top:75px;bottom:auto;width:min(430px,43%);z-index:4;background:linear-gradient(150deg,#1a2624f5,#101a18fa);border:1px solid #6d7a70;box-shadow:0 18px 70px #000a;max-height:calc(100% - 100px);overflow-y:auto;backdrop-filter:blur(13px)}
body.in-game .map-toolbar{background:#121c1be8}
body.in-game .map-footer{position:relative;z-index:3}
body.in-game .map-label{font-size:12px}
body.in-game .bottom-strip{padding:12px 0}
body.in-game .instructions{padding:22px 0}
.tank-marker{filter:drop-shadow(0 4px 3px #000e) drop-shadow(0 0 9px #f07643a0);pointer-events:none}
.tank-marker .tank-body{fill:#a6a58b;stroke:#181e1c;stroke-width:2.2}.tank-marker .tank-tread{fill:#18201d;stroke:#b1b19b;stroke-width:2}
.tank-marker .tank-flag-red{fill:#d34d4d}.tank-marker .tank-flag-blue{fill:#375b87}.tank-marker .tank-flag-white{fill:#ebe9df}
.route-trail{fill:none;stroke:#d38b6b;stroke-width:3;stroke-dasharray:8 7;filter:drop-shadow(0 0 4px #dd6755a5)}
.conquest-banner{position:absolute;top:14%;left:21%;z-index:3;pointer-events:none;color:#f7e3ca;font:800 clamp(23px,3.4vw,55px) 'Barlow Condensed';letter-spacing:3px;text-shadow:0 3px 12px black,0 0 30px #c95c43;opacity:0;transform:translateY(14px) scale(.95)}
.conquest-banner.pop{animation:conquestPop 2.5s ease both}
@keyframes conquestPop{12%{opacity:1;transform:translateY(0) scale(1)}65%{opacity:1}100%{opacity:0;transform:translateY(-20px) scale(1.05)}}
body.in-game .country.captured{animation:captureFlash 1.6s ease}@keyframes captureFlash{0%{filter:brightness(2.4)}100%{filter:url(#glow)}}
@media(max-width:1000px){body.in-game .control-panel{right:14px;top:65px;width:min(410px,52%)}body.in-game .game-grid{min-height:700px}body.in-game .map-panel{height:680px}}
@media(max-width:680px){.landing-title{font-size:clamp(90px,25vw,170px)}.landing-landscape{height:160px}.landing-rule{font-size:8px;gap:9px}.landing-sup{font-size:8px;letter-spacing:1.2px}.landing-secondary{flex-direction:column;gap:12px}.landing-bottom span{display:none}body.in-game .game-grid{min-height:880px}body.in-game .map-panel{height:860px}body.in-game .map-area{min-height:610px}body.in-game .map-area svg{transform:scale(1.55) translateX(-8%)}body.in-game .control-panel{position:absolute;top:auto;bottom:104px;right:9px;left:9px;width:auto;max-height:55%;padding:0 17px 18px}body.in-game .map-coordinates{font-size:8px}.conquest-banner{top:12%;left:8%}body.in-game .map-footer strong{font-size:22px}}
@media(prefers-reduced-motion:reduce){.landing-atmosphere,.landing-smoke{animation:none!important}body.zooming .landing{transition:none}body.in-game .map-area svg{transition:none}}

/* v0.3: stay on cover until the player explicitly starts */
body.landing-mode .landing{opacity:1;transform:none;pointer-events:auto}
.landing-help{max-width:600px;margin:10px auto -8px;padding:12px 16px;text-align:left;background:#0e1819e9;border:1px solid #a36351;color:#ede4d8;font:11px/1.7 'IBM Plex Mono',monospace}
.wrong-answer{font:12px/1.65 'IBM Plex Mono',monospace;color:#ffb6a5;border:1px solid #a14b40;background:#5c242335;padding:9px 11px;margin:4px 0 12px}
/* In-game close-up: the SVG viewBox follows the exact tank position, not only captured capitals. */
body.in-game .map-area svg{transform:none!important;transition:none!important;width:100%;height:100%;display:block;overflow:hidden}
body.in-game .map-area{height:calc(100% - 118px);min-height:420px;overflow:hidden}
body.in-game .map-panel{display:flex;flex-direction:column}
body.in-game .map-footer{margin-top:auto;flex-shrink:0}
body.in-game .country{stroke-width:1.45}
body.in-game .country.start{fill:#a34b43;stroke:#e2a395;stroke-width:2.2}
body.in-game .country.captured{fill:#c25d50;stroke:#ffb1a0;stroke-width:2}
body.in-game .country.next{stroke:#e2d8b6;stroke-dasharray:4 4}
body.in-game .route-trail{stroke-width:1.35;stroke-dasharray:3 2}
body.in-game .tank-marker{filter:drop-shadow(0 2px 3px #000e)}
body.in-game .map-label{font-size:5px;letter-spacing:.4px}
@media(max-width:680px){body.in-game .map-area{min-height:610px;height:calc(100% - 120px)}body.in-game .country{stroke-width:1.2}}