:root{--ink:#0b1117;--panel:rgba(9,15,21,.92);--line:rgba(170,205,224,.18);--blue:#4f98ff;--red:#ff493f;--gold:#ffc84a;--green:#72d34e;--white:#f7fbff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#0a1015;color:var(--white);font-family:Kanit,system-ui,sans-serif}.topbar{height:64px;background:linear-gradient(180deg,#151c22,#0b1116);display:flex;align-items:center;padding:0 clamp(18px,3vw,48px);border-bottom:1px solid #263640;position:relative;z-index:10}.brand{font:800 clamp(22px,2.4vw,34px)/1 "Roboto Condensed";text-decoration:none;color:#dce2e7;letter-spacing:.5px}.brand span{color:#69cf4b}.topbar nav{display:flex;gap:clamp(22px,6vw,76px);margin:auto}.topbar nav a{color:#788087;text-decoration:none;font-weight:700;font-size:16px;padding:20px 4px;position:relative}.topbar nav a.active,.topbar nav a:hover{color:white}.topbar nav a.active:after{content:"";position:absolute;inset:auto 0 0;height:3px;background:#54a5ff;border-radius:2px}.how,.card button{border:1px solid #43505a;background:linear-gradient(#2a3238,#1b2227);color:#c9d0d5;border-radius:9px;padding:8px 16px;font:600 15px "Roboto Condensed";cursor:pointer}
.arena{min-height:700px;background-image:linear-gradient(180deg,rgba(12,50,70,.08) 45%,rgba(7,11,13,.5) 100%),url('./assets/battlefield-premium.jpg');background-size:cover;background-position:center;position:relative;overflow:hidden;padding:38px clamp(20px,5vw,80px) 30px}.score-row{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:20px;align-items:start}.team-score{display:flex;gap:20px;align-items:center}.team-score>div:not(.flag){display:flex;flex-direction:column}.team-score span,.total-block>span{font:800 clamp(26px,3vw,47px) "Roboto Condensed";text-shadow:0 3px 1px rgba(0,0,0,.5)}.team-score strong{font:800 clamp(25px,3vw,43px) "Roboto Condensed";text-shadow:0 2px 2px #111}.thailand span,.thailand strong{color:#396cf0}.cambodia span,.cambodia strong{color:#ef4137}.cambodia{justify-content:flex-end;text-align:right}.flag{width:76px;height:50px;border-radius:7px;box-shadow:0 2px 3px #111;flex:0 0 auto}.flag-th{background:linear-gradient(#e8333b 0 20%,#fff 20% 35%,#21316e 35% 65%,#fff 65% 80%,#e8333b 80%)}.flag-mm{background:linear-gradient(#f7d133 0 33%,#45a84a 33% 66%,#e93f3f 66%);display:grid;place-items:center}.flag-mm i{font-style:normal;font-size:30px}.total-block{text-align:center;display:flex;flex-direction:column;align-items:center}.total-block>span{font-size:34px}.total-block>strong{font:800 clamp(50px,6vw,90px)/1 "Roboto Condensed";text-shadow:0 4px 3px rgba(0,0,0,.65)}.total-block small{font-size:18px;color:#152027;margin-top:12px}.countdown{position:absolute;top:235px;left:50%;transform:translateX(-50%);background:rgba(13,20,25,.78);border:1px solid rgba(255,255,255,.3);border-radius:12px;padding:10px 36px;text-align:center;display:flex;flex-direction:column;box-shadow:0 7px 25px rgba(0,0,0,.25)}.countdown span{color:#ced7dd}.countdown strong{color:var(--gold);font:800 36px "Roboto Condensed"}.countdown small{font-size:12px;color:#99e488;min-height:16px}.fire-zone{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);width:min(780px,92%);display:grid;grid-template-columns:1fr 230px 1fr;gap:34px;align-items:end}.card{background:var(--panel);border:1px solid #3e515d;border-radius:14px;padding:14px 18px;text-align:center;box-shadow:0 8px 18px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:6px}.card>span{color:#aeb9c0}.card>strong{font:800 28px "Roboto Condensed";color:var(--blue)}.mini-flag{display:inline-block;width:32px;height:20px;vertical-align:-2px;border-radius:2px}.card button{margin-top:5px}.shots-card small{color:#aeb9c0}.shots-card small i{color:var(--gold);font-style:normal}.fire-button{width:230px;height:230px;border-radius:50%;border:10px solid #ffe28a;outline:6px solid rgba(255,153,45,.45);background:radial-gradient(circle at 40% 28%,#ff644f,#b51d17 68%);color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 -12px 0 rgba(76,0,0,.25),0 0 30px #ffad35;cursor:pointer;touch-action:manipulation;user-select:none;transition:transform .08s;position:relative}.fire-button:hover{filter:brightness(1.08)}.fire-button:active,.fire-button.firing{transform:scale(.93) translateY(7px)}.fire-button .shell{font-size:44px;transform:rotate(-45deg)}.fire-button b{font:800 50px/.95 "Roboto Condensed";text-shadow:0 3px 0 #7b1914}.fire-button small{font:700 15px "Roboto Condensed"}.effects{position:absolute;inset:0;pointer-events:none}.plus-one{position:absolute;left:50%;bottom:245px;color:#fff;font:800 36px "Roboto Condensed";text-shadow:0 2px 5px #e43d22;animation:floatUp .7s ease-out forwards}.muzzle{position:absolute;left:50%;bottom:180px;width:150px;height:150px;transform:translateX(-50%);background:radial-gradient(circle,#fff 0 10%,#ffd34d 20%,#ff5d20 38%,transparent 65%);animation:flash .25s ease-out forwards}@keyframes floatUp{to{transform:translateY(-90px) scale(1.35);opacity:0}}@keyframes flash{from{opacity:1;transform:translateX(-50%) scale(.25) rotate(0)}to{opacity:0;transform:translateX(-50%) scale(1.3) rotate(35deg)}}
.stats{display:grid;grid-template-columns:1fr 1.2fr 1fr;background:linear-gradient(180deg,#131a20,#0d1318);border-top:1px solid #34444e}.stats article{padding:18px 34px;border-right:1px solid #222e35}.stats h2{font:800 19px "Roboto Condensed";text-align:center;margin:0 0 12px;color:white}.leaderboard h2 span{color:var(--blue)}.leaderboard.mm h2 span{color:var(--red)}ol{margin:0;padding-left:42px}.leaderboard li{padding:3px 0;color:#d7dee3}.leaderboard li::marker{color:#8d9aa2}.leaderboard li span{float:right;font-family:"Roboto Condensed"}.metrics{display:flex;justify-content:space-around;text-align:center;border-top:1px solid #26333b;padding-top:20px}.metrics div{display:flex;flex-direction:column}.metrics b{font-size:30px;color:var(--green)}.metrics div:first-child b{color:var(--blue)}.metrics div:last-child b{color:var(--gold)}.metrics strong{font:800 27px "Roboto Condensed"}.metrics span{color:#c4cdd2}footer{min-height:75px;padding:18px 30px;display:flex;justify-content:space-between;align-items:center;color:#8d979e;font:600 14px "Roboto Condensed";text-align:center}footer strong{color:#c6cdd1;letter-spacing:.6px}dialog{max-width:480px;border:1px solid #41535e;border-radius:18px;background:#111a20;color:#f2f5f7;padding:30px;box-shadow:0 20px 80px #000}dialog::backdrop{background:rgba(0,0,0,.72)}dialog h2{font:800 30px "Roboto Condensed";color:var(--gold)}dialog .close{position:absolute;right:14px;top:8px;background:none;border:0;color:white;font-size:30px;cursor:pointer}.got-it{border:0;border-radius:8px;padding:10px 22px;background:var(--red);color:white;font-weight:700;cursor:pointer}
@media(max-width:850px){.topbar nav{display:none}.topbar{justify-content:space-between}.arena{min-height:760px;padding:24px 14px;background-position:center}.score-row{grid-template-columns:1fr 1fr;gap:8px}.total-block{grid-column:1/-1;grid-row:1}.total-block>strong{font-size:58px}.total-block small{font-size:14px;color:#1b252a}.team-score{grid-row:2;gap:8px}.team-score span{font-size:23px}.team-score strong{font-size:25px}.flag{width:48px;height:32px}.countdown{top:240px;padding:8px 25px}.fire-zone{bottom:25px;grid-template-columns:1fr 1fr;gap:10px;width:94%}.fire-button{grid-column:1/-1;grid-row:1;width:190px;height:190px;justify-self:center}.fire-button b{font-size:43px}.card{padding:10px}.card>strong{font-size:21px}.stats{grid-template-columns:1fr}.stats article{border-bottom:1px solid #2c3941}.global{grid-row:1}.metrics strong{font-size:22px}.metrics span{font-size:13px}footer{flex-direction:column;gap:8px}.team-score.cambodia{justify-self:end}.plus-one{bottom:285px}}
@media(max-width:460px){.how{font-size:12px;padding:7px}.brand{font-size:23px}.arena{min-height:690px}.total-block>span{font-size:25px}.total-block>strong{font-size:46px}.team-score span{font-size:19px}.team-score strong{font-size:20px}.countdown{top:205px}.fire-zone{bottom:18px}.fire-button{width:165px;height:165px;border-width:7px}.fire-button .shell{font-size:32px}.fire-button b{font-size:37px}.side-card button{font-size:12px;padding:7px}.stats article{padding:17px 18px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}.plus-one,.muzzle{animation:none}.fire-button{transition:none}}

/* Live arcade motion */
.arena{animation:arena-drift 14s ease-in-out infinite alternate}
.arena::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(110deg,transparent 15%,rgba(255,255,255,.11) 40%,transparent 62%);transform:translateX(-120%);animation:sun-sweep 9s ease-in-out infinite}
.arena>*{z-index:2}
.score-row,.fire-zone,.sync-pill,.effects{position:absolute}
.score-row{position:relative}
.sync-pill{top:255px;left:50%;transform:translateX(-50%);padding:8px 18px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(8,16,22,.74);color:#9ee68a;font-size:13px;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.fire-button{animation:fire-breathe 1.8s ease-in-out infinite}
.fire-button::after{content:"";position:absolute;inset:-12px;border:3px solid rgba(255,208,88,.72);border-radius:50%;opacity:0;transform:scale(.85)}
.fire-button.firing::after{animation:fire-ring .55s ease-out}
.fire-button.firing{animation:none;filter:brightness(1.25) saturate(1.2)}
@keyframes arena-drift{from{background-position:49% center}to{background-position:51% center}}
@keyframes sun-sweep{0%,35%{transform:translateX(-120%);opacity:0}50%{opacity:1}75%,100%{transform:translateX(120%);opacity:0}}
@keyframes fire-breathe{0%,100%{box-shadow:inset 0 -12px 0 rgba(76,0,0,.25),0 0 24px #ff8a25;transform:scale(1)}50%{box-shadow:inset 0 -12px 0 rgba(76,0,0,.25),0 0 46px #ffc04b;transform:scale(1.025)}}
@keyframes fire-ring{0%{opacity:1;transform:scale(.82)}100%{opacity:0;transform:scale(1.3)}}
@media(max-width:850px){.sync-pill{top:222px;font-size:11px}.arena{animation:none}}
@media(max-width:460px){.sync-pill{top:190px;max-width:92%;overflow:hidden;text-overflow:ellipsis}}
@media(prefers-reduced-motion:reduce){.arena,.arena::before,.fire-button{animation:none}}

/* POP-style instant feedback */
.score-pop{animation:score-pop .32s cubic-bezier(.2,1.8,.45,1)}
.arena-hit{animation:arena-hit .22s linear,arena-drift 14s ease-in-out infinite alternate}
.tracer{position:absolute;left:50%;bottom:185px;width:18px;height:8px;border-radius:99px;background:#fff7bf;box-shadow:0 0 8px #fff,0 0 22px #ff9c23;transform-origin:center;z-index:4}
.tracer-thailand{animation:tracer-left .38s ease-in forwards}
.tracer-cambodia{animation:tracer-right .38s ease-in forwards}
.spark{--angle:0deg;--distance:80px;position:absolute;left:50%;bottom:245px;width:9px;height:9px;border-radius:50%;background:#ffd350;box-shadow:0 0 12px #ff6a22;animation:spark-burst .55s ease-out forwards;z-index:5}
.effects::after{content:"";position:absolute;left:50%;bottom:168px;width:260px;height:70px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(255,206,72,.28),transparent 68%);animation:ground-glow 2.4s ease-in-out infinite;z-index:1}
@keyframes score-pop{0%{transform:scale(1)}45%{transform:scale(1.3);filter:brightness(1.8)}100%{transform:scale(1)}}
@keyframes arena-hit{0%,100%{translate:0 0}25%{translate:-5px 2px}50%{translate:5px -2px}75%{translate:-3px 1px}}
@keyframes tracer-left{0%{opacity:1;transform:translateX(-20px) rotate(180deg)}100%{opacity:0;transform:translateX(-560px) rotate(180deg) scale(.4)}}
@keyframes tracer-right{0%{opacity:1;transform:translateX(20px)}100%{opacity:0;transform:translateX(560px) scale(.4)}}
@keyframes spark-burst{0%{opacity:1;transform:translate(-50%,0) rotate(var(--angle)) translateX(0) scale(1.2)}100%{opacity:0;transform:translate(-50%,0) rotate(var(--angle)) translateX(var(--distance)) scale(.15)}}
@keyframes ground-glow{0%,100%{opacity:.35;transform:translateX(-50%) scale(.9)}50%{opacity:.8;transform:translateX(-50%) scale(1.12)}}
@media(max-width:850px){.tracer-thailand{animation-name:tracer-left-mobile}.tracer-cambodia{animation-name:tracer-right-mobile}@keyframes tracer-left-mobile{to{opacity:0;transform:translateX(-220px) rotate(180deg) scale(.4)}}@keyframes tracer-right-mobile{to{opacity:0;transform:translateX(220px) scale(.4)}}}
@media(prefers-reduced-motion:reduce){.score-pop,.arena-hit,.tracer,.spark,.effects::after{animation:none}}

/* Tank, flag and battlefield reactions */
.arena::after{content:"";position:absolute;inset:42% -20% -5%;z-index:1;pointer-events:none;background:repeating-linear-gradient(100deg,transparent 0 13%,rgba(232,245,255,.09) 16%,transparent 21%);filter:blur(18px);animation:mist-drift 16s linear infinite}
.flag{transform-origin:left center;animation:flag-wave 1.65s ease-in-out infinite;will-change:transform,filter}
.mini-flag{animation:mini-flag-wave 1.35s ease-in-out infinite}
.tank-fx{position:absolute;z-index:3;pointer-events:none}
.attacker-fx{bottom:112px;width:290px;height:190px;border-radius:50%;background:radial-gradient(circle at 50% 45%,rgba(255,235,128,.7),rgba(255,113,31,.22) 35%,transparent 68%);filter:blur(2px);animation:attacker-recoil .48s ease-out forwards}
.attacker-thailand{left:5%;transform-origin:left center}.attacker-cambodia{right:5%;transform-origin:right center}
.impact-fx{bottom:135px;width:170px;height:170px;border:8px solid rgba(255,221,90,.9);border-radius:50%;box-shadow:0 0 25px #ff712c,inset 0 0 28px #ff9d2d;animation:impact-ring .58s ease-out forwards}
.impact-thailand{left:13%}.impact-cambodia{right:13%}
.smoke-fx{bottom:170px;width:110px;height:85px;border-radius:50%;background:radial-gradient(circle at 35% 55%,rgba(238,244,240,.72),rgba(87,101,99,.48) 45%,transparent 70%);filter:blur(5px);animation:smoke-rise .9s ease-out forwards}
.smoke-thailand{left:17%}.smoke-cambodia{right:17%}
@keyframes flag-wave{0%,100%{transform:perspective(120px) rotateY(-7deg) skewY(0);filter:brightness(1)}50%{transform:perspective(120px) rotateY(12deg) skewY(-2deg);filter:brightness(1.18)}}
@keyframes mini-flag-wave{0%,100%{transform:skewY(-2deg) scaleX(.96)}50%{transform:skewY(2deg) scaleX(1.05)}}
@keyframes mist-drift{from{transform:translateX(-10%)}to{transform:translateX(18%)}}
@keyframes attacker-recoil{0%{opacity:1;scale:.6}35%{opacity:.95;scale:1.12;translate:0 -5px}100%{opacity:0;scale:1.35;translate:0 8px}}
@keyframes impact-ring{0%{opacity:1;transform:scale(.2)}55%{opacity:.9;transform:scale(1.05)}100%{opacity:0;transform:scale(1.55)}}
@keyframes smoke-rise{0%{opacity:.9;transform:translateY(20px) scale(.45)}100%{opacity:0;transform:translateY(-105px) scale(1.7)}}
@media(max-width:850px){.attacker-fx{bottom:205px;width:150px;height:110px}.attacker-thailand{left:-3%}.attacker-cambodia{right:-3%}.impact-fx{bottom:220px;width:95px;height:95px}.impact-thailand{left:4%}.impact-cambodia{right:4%}.smoke-fx{bottom:240px;width:70px;height:55px}.smoke-thailand{left:8%}.smoke-cambodia{right:8%}}
@media(prefers-reduced-motion:reduce){.arena::after,.flag,.mini-flag,.tank-fx{animation:none}}

/* Cambodia flag override */
.flag-mm{background:linear-gradient(#17469e 0 25%,#df2c2f 25% 75%,#17469e 75%)}
.flag-mm i{color:#fff;font-size:25px;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.35)}

/* Premium readability, restrained flags and cannon blasts */
.team-score{padding:12px 16px;border:1px solid rgba(255,255,255,.22);border-radius:14px;background:linear-gradient(135deg,rgba(5,13,19,.82),rgba(16,28,35,.48));backdrop-filter:blur(7px);box-shadow:0 10px 28px rgba(0,0,0,.25)}
.team-score span{letter-spacing:1px;-webkit-text-stroke:1px rgba(0,0,0,.38);filter:drop-shadow(0 3px 2px rgba(0,0,0,.72))}
.team-score strong{display:inline-block;margin-top:2px;padding:3px 10px;border-radius:8px;background:rgba(0,0,0,.38);letter-spacing:1px;text-shadow:0 2px 2px #000,0 0 12px currentColor}
.flag{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.72);box-shadow:0 3px 9px rgba(0,0,0,.48),inset 0 0 0 1px rgba(255,255,255,.18);animation:flag-luxury 3.6s ease-in-out infinite}
.flag::after{content:"";position:absolute;inset:0 auto 0 0;width:32%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);animation:flag-sheen 4.8s ease-in-out infinite}
.mini-flag{animation:mini-flag-luxury 3.2s ease-in-out infinite;box-shadow:0 1px 5px rgba(0,0,0,.45)}
.barrel-blast{position:absolute;z-index:6;width:118px;height:118px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#fff 0 8%,#fff4a4 9% 18%,#ffb22f 22% 36%,#f04a20 40% 53%,transparent 65%);filter:drop-shadow(0 0 14px #ff9a24);animation:cannon-bloom .48s cubic-bezier(.1,.8,.2,1) forwards}
.barrel-blast::before,.barrel-blast::after{content:"";position:absolute;inset:-30%;background:conic-gradient(from 10deg,transparent 0 8%,#ffd54a 9% 12%,transparent 13% 22%,#ff7b28 23% 27%,transparent 28% 46%,#fff1a1 47% 50%,transparent 51% 70%,#ff8b27 71% 75%,transparent 76%);clip-path:polygon(50% 0,60% 38%,100% 50%,61% 59%,50% 100%,40% 61%,0 50%,39% 40%)}
.barrel-blast::after{inset:10%;filter:blur(4px);transform:rotate(25deg)}
.blast-thailand{left:32.5%;top:43%}.blast-cambodia{right:32.5%;top:43%}
@keyframes flag-luxury{0%,100%{transform:perspective(180px) rotateY(-3deg)}50%{transform:perspective(180px) rotateY(5deg)}}
@keyframes flag-sheen{0%,65%{transform:translateX(-180%);opacity:0}78%{opacity:.8}100%{transform:translateX(330%);opacity:0}}
@keyframes mini-flag-luxury{0%,100%{transform:skewY(-.6deg)}50%{transform:skewY(.8deg)}}
@keyframes cannon-bloom{0%{opacity:0;transform:scale(.12) rotate(0)}22%{opacity:1;transform:scale(1.18) rotate(12deg)}60%{opacity:.92;transform:scale(.8) rotate(24deg)}100%{opacity:0;transform:scale(1.6) rotate(40deg)}}
@media(max-width:850px){.team-score{padding:8px}.blast-thailand{left:20%;top:43%}.blast-cambodia{right:20%;top:43%}.barrel-blast{width:82px;height:82px}}
@media(prefers-reduced-motion:reduce){.flag,.flag::after,.mini-flag,.barrel-blast{animation:none}}

/* Mobile portrait: keep the complete game arena inside one visible screen. */
@media (max-width:850px) and (orientation:portrait){
  html,body{min-height:100%;overflow-x:hidden}
  .topbar{height:56px;padding-left:14px;padding-right:14px}
  .topbar .brand{font-size:21px}
  .topbar .how{font-size:11px;padding:7px 9px}
  .arena{
    box-sizing:border-box;
    width:100%;
    height:calc(100svh - 56px);
    height:calc(100dvh - 56px);
    min-height:560px;
    max-height:none;
    padding:14px 10px max(12px,env(safe-area-inset-bottom));
    background-image:linear-gradient(180deg,rgba(12,50,70,.04) 42%,rgba(7,11,13,.34) 100%),url('./assets/battlefield-mobile-v2.jpg');
    background-size:100% 100%;
    background-position:center center;
  }
  .score-row{top:12px;left:10px;right:10px;width:auto}
  .total-block>span{font-size:21px}
  .total-block>strong{font-size:clamp(39px,12vw,54px)}
  .total-block small{font-size:11px;margin-top:4px}
  .team-score{padding:6px 7px;gap:6px;border-radius:10px}
  .team-score span{font-size:clamp(16px,5vw,21px)}
  .team-score strong{font-size:clamp(18px,5.5vw,23px)}
  .flag{width:42px;height:28px}
  .flag-mm i{font-size:18px}
  .sync-pill{top:244px;max-width:88%;white-space:nowrap;z-index:5}
  .fire-zone{bottom:max(14px,env(safe-area-inset-bottom));gap:8px;width:calc(100% - 20px)}
  .fire-button{width:clamp(146px,42vw,180px);height:clamp(146px,42vw,180px)}
  .fire-button b{font-size:clamp(34px,10vw,42px)}
  .card{min-width:0;padding:8px 6px;gap:4px}
  .card>span,.shots-card small{font-size:11px}
  .card>strong{font-size:clamp(17px,5vw,21px);white-space:nowrap}
  .side-card button{font-size:11px;padding:7px 4px}
  .stats{scroll-margin-top:0}
}

@media (max-width:850px) and (orientation:portrait) and (max-height:700px){
  .arena{min-height:500px}
  .score-row{top:7px}
  .team-score{padding:4px 6px}
  .sync-pill{top:218px}
  .fire-zone{bottom:8px}
  .fire-button{width:138px;height:138px;border-width:6px}
  .fire-button .shell{font-size:27px}
  .fire-button b{font-size:32px}
  .card>span,.shots-card small{font-size:10px}
  .card>strong{font-size:16px}
}