:root{
  --cream:#f3e2ba;
  --cream-2:#ead6a8;
  --paper:#efdfb9;
  --ink:#3c5327;
  --ink-deep:#2c3d1e;
  --army:#4c6b31;
  --army-dark:#33481f;
  --red:#b8462e;
  --red-deep:#8f3120;
  --black:#2a2a25;
  --tan:#c9a56f;
  --edge:rgba(60,83,39,.78);
  --shadow:0 3px 0 rgba(90,66,34,.20), 0 8px 18px rgba(60,45,24,.16);
  --font-display:'Alfa Slab One', Georgia, serif;
  --font-stencil:'Saira Condensed', 'Arial Narrow', sans-serif;
  --font-num:'Big Shoulders Stencil', 'Arial Narrow', sans-serif;
  --safe-t:env(safe-area-inset-top, 0px);
  --safe-r:env(safe-area-inset-right, 0px);
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-l:env(safe-area-inset-left, 0px);
  --mini:clamp(104px, 11vw, 142px);
}

*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;height:100%;width:100%;
  overflow:hidden;background:#d9c6a2;color:var(--ink);
  font-family:var(--font-stencil);
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
  touch-action:none;
}
button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;}
img{display:block;}
#app{position:fixed;inset:0;overflow:hidden;}

#scene{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  background:#d7c39d;outline:none;
}

/* ================= HUD ================= */
.hud{position:absolute;inset:0;pointer-events:none;z-index:20;opacity:0;transition:opacity .25s ease;}
body.playing .hud{opacity:1;}
.hud button{pointer-events:auto;}
.hud .minimap-wrap,.hud .score-strip,.hud .kill-feed,.hud .health-wrap,.hud .ammo-wrap,.hud .pause-chip{pointer-events:auto;}
.hud .crosshair,.hud .toast,.hud .respawn,.hud .damage-frame{pointer-events:none;}

.minimap-wrap{
  position:absolute;left:calc(10px + var(--safe-l));top:calc(10px + var(--safe-t));
  width:var(--mini);
}
.minimap{
  position:relative;width:100%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,rgba(247,235,207,.98),rgba(224,204,164,.98));
  box-shadow:0 0 0 2px rgba(60,83,39,.8) inset,0 0 0 5px rgba(243,226,186,.55) inset,0 0 0 6px rgba(60,83,39,.55),0 5px 12px rgba(60,45,24,.26);
  overflow:hidden;pointer-events:none;
}
.minimap canvas{position:absolute;inset:5%;width:90%;height:90%;border-radius:50%;display:block;}
.minimap-north{
  position:absolute;top:5%;left:50%;transform:translateX(-50%);
  font-family:var(--font-stencil);font-weight:900;font-size:9px;letter-spacing:.1em;color:#8f3120;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.minimap-label{
  position:absolute;left:50%;bottom:4%;transform:translateX(-50%);
  font-family:var(--font-stencil);font-weight:900;font-size:7px;letter-spacing:.12em;color:#4c5a34;
  background:rgba(243,226,186,.88);padding:1px 6px;border-radius:3px;white-space:nowrap;
  box-shadow:0 1px 2px rgba(60,45,24,.2);
}
.minimap-mode{
  position:absolute;right:8%;bottom:15%;font-family:var(--font-stencil);font-weight:900;font-size:6px;
  letter-spacing:.08em;color:#8f3120;
}
.minimap-zoom{
  position:absolute;right:2px;bottom:2px;width:20px;height:20px;border-radius:50%;border:0;padding:0;
  background:#f3e2ba;color:#3c5327;font-family:var(--font-stencil);font-weight:900;font-size:14px;line-height:1;
  box-shadow:0 0 0 1.5px rgba(60,83,39,.65) inset,0 2px 4px rgba(60,45,24,.24);
  pointer-events:auto;
}
.pause-chip{
  position:absolute;left:calc(10px + var(--safe-l));top:calc(10px + var(--safe-t) + var(--mini) + 10px);
  width:clamp(38px,4.6vw,50px);height:clamp(38px,4.6vw,50px);
  border-radius:14px;border:0;padding:0;
  background:
    radial-gradient(120% 120% at 32% 18%, #fbf0d4 0%, #ecd8a9 58%, #d8bd89 100%);
  box-shadow:0 0 0 2px rgba(60,83,39,.75) inset, 0 0 0 4px rgba(243,226,186,.65) inset, 0 3px 0 rgba(90,66,34,.34), 0 7px 14px rgba(70,50,26,.18);
  display:flex;align-items:center;justify-content:center;
  transition:transform .08s ease;
}
.pause-chip:active{transform:translateY(2px);}
.pause-bars{display:flex;gap:4px;}
.pause-bars i{display:block;width:5px;height:17px;border-radius:2px;background:var(--army);box-shadow:0 1px 0 rgba(255,255,255,.4) inset;}

.score-strip{
  position:absolute;top:calc(8px + var(--safe-t));left:50%;transform:translateX(-50%);
  width:clamp(300px, 44vw, 540px);aspect-ratio:496/94;
  background:url('elements/hud_card_frames_03_score_strip.webp') center/100% 100% no-repeat;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2.4%;
  filter:drop-shadow(0 4px 10px rgba(60,45,24,.18));
}
.strip-badge{width:15.5%;height:78%;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(60,45,24,.3));}
.strip-badge-green{margin-left:-.6%;}
.strip-badge-red{margin-right:-.6%;}
.score-num{
  font-family:var(--font-num);font-weight:700;line-height:.85;
  font-size:clamp(32px,4.3vw,54px);letter-spacing:.02em;
  min-width:9%;text-align:center;
  -webkit-text-stroke:.5px rgba(60,45,24,.18);
}
.score-green{color:#41611f;}
.score-red{color:#a93a26;}
.score-mid{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 2%;line-height:1;
}
.score-mode{
  font-family:var(--font-stencil);font-weight:800;font-size:clamp(6.5px,.86vw,10px);
  letter-spacing:.19em;color:#7a6a44;margin-bottom:.12em;white-space:nowrap;
}
.score-timer{
  font-family:var(--font-num);font-weight:700;font-size:clamp(20px,2.8vw,34px);
  color:#3b4a24;letter-spacing:.05em;line-height:.9;
}

.kill-feed{
  position:absolute;top:calc(14px + var(--safe-t));right:calc(12px + var(--safe-r));
  width:clamp(218px, 24vw, 330px);
  background:url('elements/hud_card_frames_04_kill_feed_card.webp') center/100% 100% no-repeat;
  filter:drop-shadow(0 4px 9px rgba(60,45,24,.18));
  padding:8px 9px 10px;
}
.kill-feed::before{
  content:'';position:absolute;inset:4px;border-radius:7px;
  background:linear-gradient(180deg,rgba(246,234,206,.97),rgba(235,218,181,.97));
  box-shadow:0 0 0 1px rgba(60,83,39,.22) inset;
}
.feed-head,.feed-rows{position:relative;z-index:1;}
.feed-tape{display:none;}
.feed-head{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--font-stencil);font-weight:900;font-size:10px;letter-spacing:.2em;
  color:#4c5a34;padding:0 3px 4px;text-transform:uppercase;
  border-bottom:1px dashed rgba(76,90,52,.45);
}
.feed-chevrons{color:#8f3120;letter-spacing:-.2em;font-size:14px;}
.feed-rows{display:flex;flex-direction:column;gap:3px;margin-top:4px;}
.feed-row{
  display:flex;align-items:center;gap:4px;
  background:rgba(246,233,203,.94);
  border:1px solid rgba(60,83,39,.42);border-radius:5px;
  padding:3px 5px;min-height:22px;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset;
  animation:feedIn .22s ease-out;
  font-size:10px;font-weight:700;color:#43512b;letter-spacing:.03em;
  white-space:nowrap;overflow:hidden;
}
@keyframes feedIn{from{transform:translateX(14px);opacity:0;}to{transform:none;opacity:1;}}
.feed-row img.badge{width:16px;height:16px;object-fit:contain;flex:0 0 auto;}
.feed-row img.weapon{width:27px;height:14px;object-fit:contain;flex:0 0 auto;opacity:.9;}
.feed-row .who{overflow:hidden;text-overflow:ellipsis;max-width:37%;}
.feed-row .who.red{color:#a33a27;}
.feed-row .who.you{color:#2f5a17;font-weight:900;}
.feed-row .arrow{color:#9a8659;font-weight:900;}
.feed-row.fade{opacity:0;transition:opacity .5s ease;}

.health-wrap{
  position:absolute;left:calc(12px + var(--safe-l));bottom:calc(12px + var(--safe-b));
  display:flex;flex-direction:column;gap:7px;align-items:flex-start;
  filter:drop-shadow(0 4px 10px rgba(60,45,24,.2));
}
.health-plate{
  position:relative;width:clamp(168px, 19vw, 232px);aspect-ratio:421/195;
  background:url('elements/hud_card_frames_01_health_plate.webp') center/100% 100% no-repeat;
  opacity:.97;
  transition:filter .16s ease;
}
.health-plate.hurt{filter:brightness(1.18) saturate(1.35);animation:plateShake .2s ease;}
@keyframes plateShake{0%,100%{transform:none;}30%{transform:translateX(-2px);}70%{transform:translateX(2px);}}
.health-inner{
  position:absolute;left:38%;right:20%;top:12%;bottom:12%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
}
.hp-num{
  font-family:var(--font-num);font-weight:700;
  font-size:clamp(28px,4vw,48px);color:#3c5327;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.hp-label{
  font-family:var(--font-stencil);font-weight:800;font-size:clamp(6px,.78vw,9px);
  letter-spacing:.18em;color:#7d6a44;margin-top:1px;
}
.armor-strip{
  display:flex;align-items:center;gap:5px;
  width:76%;max-width:176px;padding:5px 8px 5px 6px;
  background:linear-gradient(180deg,#f5e8c6,#e7d3a4);
  border-radius:8px;
  box-shadow:0 0 0 1.5px rgba(60,83,39,.7) inset, 0 0 0 3px rgba(243,226,186,.55) inset, 0 2px 0 rgba(90,66,34,.18);
}
.armor-shield{
  width:13px;height:15px;flex:0 0 auto;
  background:#8c9d7b;
  clip-path:polygon(50% 0,100% 18%,100% 62%,50% 100%,0 62%,0 18%);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset;
}
.armor-label{font-size:8px;font-weight:900;letter-spacing:.16em;color:#6b5b3b;}
.armor-num{font-family:var(--font-num);font-weight:700;font-size:15px;color:#3e5428;margin-left:auto;}
.armor-pips{display:flex;gap:2px;}
.armor-pips i{width:7px;height:9px;border-radius:1px;background:#6e8a4f;box-shadow:0 1px 0 rgba(255,255,255,.3) inset;}
.armor-pips i.off{background:#c9b88e;}

.ammo-wrap{
  position:absolute;right:calc(12px + var(--safe-r));bottom:calc(12px + var(--safe-b));
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;
  filter:drop-shadow(0 4px 10px rgba(60,45,24,.2));
}
.ammo-plate{
  position:relative;width:clamp(178px, 20vw, 246px);aspect-ratio:369/190;
  background:url('elements/hud_card_frames_02_ammo_plate.webp') center/100% 100% no-repeat;
  opacity:.97;
}
.ammo-weapon{
  position:absolute;left:5%;top:16%;width:44%;height:48%;object-fit:contain;
  filter:drop-shadow(0 1px 0 rgba(250,240,212,.5));
}
.ammo-readout{
  position:absolute;right:9%;top:12%;width:44%;height:52%;
  display:flex;align-items:baseline;justify-content:flex-end;gap:1px;
  color:#3c5327;
}
.ammo-mag{font-family:var(--font-num);font-weight:700;font-size:clamp(30px,4.2vw,50px);line-height:.9;}
.ammo-slash{font-family:var(--font-num);font-weight:700;font-size:18px;opacity:.55;}
.ammo-reserve{font-family:var(--font-num);font-weight:700;font-size:clamp(15px,1.8vw,22px);opacity:.8;}
.ammo-name{
  position:absolute;left:9%;bottom:7%;width:82%;text-align:right;
  font-family:var(--font-stencil);font-weight:900;font-size:clamp(6.5px,.82vw,10px);
  letter-spacing:.14em;color:#7c6a45;
}
.weapon-slots{display:flex;gap:4px;align-items:flex-end;}
.wslot{
  width:clamp(28px,3.2vw,38px);height:clamp(24px,2.9vw,34px);
  border:0;border-radius:5px;padding:3px 4px;
  background:linear-gradient(180deg,rgba(247,236,209,.96),rgba(229,211,173,.96));
  box-shadow:0 0 0 1.5px rgba(60,83,39,.6) inset, 0 2px 0 rgba(90,66,34,.18);
  display:flex;align-items:center;justify-content:center;
  transition:transform .08s ease, box-shadow .1s ease;
}
.wslot img{width:100%;height:100%;object-fit:contain;}
.wslot.filled{cursor:pointer;}
.wslot.filled.active{background:linear-gradient(180deg,#fbf0d0,#eedcb3);box-shadow:0 0 0 2px #8f3120 inset, 0 2px 0 rgba(90,66,34,.2);transform:translateY(-2px);}
.wslot.empty{opacity:.72;}
.wslot.empty i{width:56%;height:2px;background:rgba(60,83,39,.35);border-radius:2px;}
.wslot.filled:active{transform:translateY(2px);}

.crosshair{
  position:absolute;left:50%;top:50%;width:90px;height:90px;transform:translate(-50%,-50%);
  --spread:6px;
  filter:drop-shadow(0 0 2px rgba(35,28,16,.85)) drop-shadow(0 0 1px rgba(255,255,255,.8));
}
.ch{position:absolute;background:#fffdf3;border-radius:1px;box-shadow:0 0 0 1px rgba(35,28,16,.55),0 1px 0 rgba(30,30,20,.3);}
.ch-t,.ch-b{left:50%;width:3px;height:11px;margin-left:-1.5px;}
.ch-t{top:calc(50% - var(--spread) - 11px);}
.ch-b{bottom:calc(50% - var(--spread) - 11px);}
.ch-l,.ch-r{top:50%;height:3px;width:11px;margin-top:-1.5px;}
.ch-l{left:calc(50% - var(--spread) - 11px);}
.ch-r{right:calc(50% - var(--spread) - 11px);}
.ch-dot{position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:#d23f2b;opacity:.9;box-shadow:0 0 0 1px rgba(255,246,220,.75);}
.hit-marker{position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%) scale(.8);opacity:0;}
.hit-marker i{position:absolute;left:50%;top:50%;width:2px;height:9px;background:#fff6dd;box-shadow:0 0 3px rgba(40,30,15,.6);}
.hit-marker i:nth-child(1){transform:translate(-50%,-50%) rotate(45deg) translateY(-13px);}
.hit-marker i:nth-child(2){transform:translate(-50%,-50%) rotate(45deg) translateY(13px);}
.hit-marker i:nth-child(3){transform:translate(-50%,-50%) rotate(-45deg) translateY(-13px);}
.hit-marker i:nth-child(4){transform:translate(-50%,-50%) rotate(-45deg) translateY(13px);}
.hit-marker.show{animation:hitPop .22s ease-out;opacity:1;}
.hit-marker.head i{background:#ffcf5e;height:11px;}
@keyframes hitPop{0%{transform:translate(-50%,-50%) scale(.55);opacity:1;}60%{transform:translate(-50%,-50%) scale(1.06);opacity:1;}100%{transform:translate(-50%,-50%) scale(1);opacity:0;}}

.damage-frame{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  border:0 solid rgba(168,46,30,0);
  box-shadow:inset 0 0 0 0 rgba(168,46,30,0);
  transition:opacity .18s ease;
}
.damage-frame.hit{opacity:1;border-width:9px;border-color:rgba(168,46,30,.5);box-shadow:inset 0 0 60px rgba(168,46,30,.24);}

.toast{
  position:absolute;left:50%;top:calc(50% + 66px);transform:translate(-50%,8px);
  padding:7px 16px;border-radius:7px;
  background:rgba(243,226,186,.94);color:#3c5327;
  font-weight:900;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  box-shadow:0 0 0 1.5px rgba(60,83,39,.55) inset,0 3px 9px rgba(60,45,24,.2);
  opacity:0;transition:opacity .2s ease, transform .2s ease;white-space:nowrap;
}
.toast.show{opacity:1;transform:translate(-50%,0);}

.respawn{position:absolute;inset:0;display:none;align-items:center;justify-content:center;pointer-events:none;}
.respawn.show{display:flex;}
.respawn-card{
  padding:18px 30px 20px;border-radius:12px;text-align:center;
  background:linear-gradient(180deg,rgba(247,235,207,.97),rgba(231,212,171,.97));
  box-shadow:0 0 0 2px rgba(60,83,39,.75) inset,0 0 0 5px rgba(243,226,186,.6) inset,0 12px 30px rgba(55,40,20,.28);
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.respawn-kicker{font-size:10px;font-weight:900;letter-spacing:.28em;color:#8f3120;}
.respawn-count{font-family:var(--font-num);font-weight:700;font-size:58px;line-height:.92;color:#3c5327;}
.respawn-label{font-size:10px;font-weight:800;letter-spacing:.18em;color:#7a6a44;}

/* ================= TOUCH ================= */
.touch-controls{position:absolute;inset:0;z-index:30;display:none;pointer-events:none;}
body.touch .touch-controls,body.narrow .touch-controls{display:block;}
.tbtn{
  position:absolute;padding:0;border:0;background:transparent;pointer-events:auto;
  width:var(--base);height:var(--base);
  filter:drop-shadow(0 4px 7px rgba(55,40,20,.28));
  transition:transform .07s ease, filter .07s ease;
  touch-action:none;
}
.tbtn img{width:100%;height:100%;object-fit:contain;pointer-events:none;mix-blend-mode:normal;}
.tbtn:active,.tbtn.held{transform:scale(.92) translateY(2px);filter:drop-shadow(0 1px 2px rgba(55,40,20,.3)) brightness(.96);}
.tbtn.active{filter:drop-shadow(0 0 8px rgba(255,221,120,.85)) drop-shadow(0 4px 7px rgba(55,40,20,.28));}
.btn-fire{position:absolute;right:calc(10px + var(--safe-r));bottom:calc(150px + var(--safe-b));width:var(--fire);height:var(--fire);pointer-events:none;}
.btn-fire .tbtn{position:absolute;inset:0;width:100%;height:100%;}
:root{--base:clamp(48px,8.2vmin,68px);--fire:clamp(64px,11.4vmin,92px);}
.t-aim{right:calc(10px + var(--safe-r));bottom:calc(150px + var(--safe-b) + var(--fire) + var(--base) + 18px);}
.t-reload{right:calc(10px + var(--safe-r));bottom:calc(150px + var(--safe-b) + var(--fire) + 6px);}
.t-jump{right:calc(10px + var(--safe-r) + var(--fire) + 18px);bottom:calc(150px + var(--safe-b));}
.t-crouch{right:calc(10px + var(--safe-r) + var(--fire) + 18px);bottom:calc(150px + var(--safe-b) + var(--base) + 8px);}
.t-sprint{right:calc(10px + var(--safe-r) + var(--fire) + 18px);bottom:calc(150px + var(--safe-b) + var(--base) * 2 + 16px);}
.t-switch{right:calc(10px + var(--safe-r) + var(--fire) + 18px);bottom:calc(150px + var(--safe-b) + var(--base) * 3 + 24px);}

.stick-zone{
  position:absolute;left:calc(10px + var(--safe-l));bottom:calc(152px + var(--safe-b));
  width:var(--stick);height:var(--stick);pointer-events:auto;touch-action:none;
  --stick:clamp(112px,17vmin,148px);
}
.stick-base{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 46%, rgba(243,226,186,.34) 0%, rgba(243,226,186,.26) 49%, rgba(239,223,185,.55) 50%, rgba(239,223,185,.16) 62%, rgba(80,96,52,.12) 63%, rgba(80,96,52,.02) 76%, transparent 77%);
  box-shadow:0 0 0 2px rgba(243,226,186,.5) inset,0 0 0 4px rgba(60,83,39,.16) inset;
  backdrop-filter:blur(1px);
}
.stick-knob{
  position:absolute;left:50%;top:50%;width:58%;height:58%;object-fit:contain;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 4px 5px rgba(55,40,20,.3));
  will-change:transform;
}
.stick-tick{position:absolute;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:9px solid rgba(243,226,186,.8);filter:drop-shadow(0 1px 1px rgba(60,45,24,.35));}
.st-n{left:50%;top:6%;transform:translateX(-50%);}
.st-s{left:50%;bottom:6%;transform:translateX(-50%) rotate(180deg);}
.st-w{left:6%;top:50%;transform:translateY(-50%) rotate(-90deg);}
.st-e{right:6%;top:50%;transform:translateY(-50%) rotate(90deg);}
.stick-caption{
  position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);
  font-family:var(--font-stencil);font-weight:900;font-size:9px;letter-spacing:.22em;
  color:rgba(243,226,186,.88);text-shadow:0 1px 2px rgba(50,40,20,.5);
}

/* ================= SCREENS ================= */
.screen{position:absolute;inset:0;z-index:40;}
.screen[hidden]{display:none;}
.title-bg{
  position:absolute;inset:0;
  background:url('elements/living_room_battlefield_panorama.webp') 52% 55%/cover no-repeat;
  transform:scale(1.02);
  animation:bgDrift 26s ease-in-out infinite alternate;
}
@keyframes bgDrift{from{transform:scale(1.02) translate(0,0);}to{transform:scale(1.06) translate(-1.2%,-0.8%);}}
.title-wash{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(243,226,186,.16) 0%, rgba(243,226,186,0) 30%, rgba(243,226,186,0) 62%, rgba(50,38,20,.30) 100%),
    linear-gradient(90deg, rgba(50,38,20,.16) 0%, rgba(50,38,20,0) 26%, rgba(50,38,20,0) 74%, rgba(50,38,20,.16) 100%);
}
.title-content{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(6px,1.25vh,14px);
  padding:calc(14px + var(--safe-t)) calc(16px + var(--safe-r)) calc(12px + var(--safe-b)) calc(16px + var(--safe-l));
  text-align:center;
}
.title-lockup{
  width:min(62vw,720px);max-height:23vh;object-fit:contain;
  filter:drop-shadow(0 12px 22px rgba(45,35,18,.38)) drop-shadow(0 2px 0 rgba(250,240,214,.22));
}
.title-map{
  margin:0;font-family:var(--font-stencil);font-weight:900;letter-spacing:.32em;
  font-size:clamp(9px,1.2vw,13px);color:#f7ebcb;
  text-shadow:0 2px 4px rgba(35,28,16,.6);
  padding:4px 12px;border-top:1px solid rgba(247,235,203,.45);border-bottom:1px solid rgba(247,235,203,.45);
}
.army-row{display:flex;align-items:flex-start;justify-content:center;gap:clamp(6px,1.8vw,22px);margin-top:2px;}
.army-pick{margin:0;display:flex;flex-direction:column;align-items:center;gap:3px;position:relative;}
.army-pick img{
  width:clamp(38px,5.2vw,66px);height:clamp(38px,5.2vw,66px);object-fit:contain;
  filter:drop-shadow(0 4px 6px rgba(45,35,18,.35));
  transition:transform .18s ease;
}
.army-pick figcaption{
  font-family:var(--font-stencil);font-weight:900;font-size:clamp(7px,.8vw,9px);
  letter-spacing:.18em;color:#f5e8c7;text-shadow:0 1px 3px rgba(35,28,16,.65);
}
.army-pick.you img{transform:scale(1.14);filter:drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 0 12px rgba(255,232,160,.75)) drop-shadow(0 4px 6px rgba(45,35,18,.35));}
.army-pick.rival img{transform:scale(1.06);}
.army-pick.you::after{
  content:"YOURS";position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  font-family:var(--font-stencil);font-weight:900;font-size:7px;letter-spacing:.16em;
  color:#33481f;background:#f3e2ba;padding:1px 5px;border-radius:3px;box-shadow:0 1px 3px rgba(40,30,15,.3);
}
.army-pick.rival::after{
  content:"RIVAL";position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  font-family:var(--font-stencil);font-weight:900;font-size:7px;letter-spacing:.16em;
  color:#f7ebcb;background:#8f3120;padding:1px 5px;border-radius:3px;box-shadow:0 1px 3px rgba(40,30,15,.3);
}
.army-versus{margin:0;display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.19em;font-size:clamp(8px,.95vw,11px);}
.vs-green{color:#d8e8b8;text-shadow:0 1px 3px rgba(30,40,15,.7);}
.vs-red{color:#ffd0bd;text-shadow:0 1px 3px rgba(40,18,10,.7);}
.vs-x{color:#f7ebcb;font-family:var(--font-display);font-size:1.3em;text-shadow:0 2px 3px rgba(30,20,10,.55);}

.token-btn{
  position:relative;border:0;padding:0;background:url('elements/hud_card_frames_06_menu_button.webp') center/100% 100% no-repeat;
  filter:drop-shadow(0 5px 8px rgba(45,30,15,.3));
  transition:transform .07s ease, filter .07s ease;
}
.token-btn span{
  position:absolute;left:13%;right:13%;top:24%;bottom:24%;
  display:flex;align-items:center;justify-content:center;
  border-radius:999px;background:linear-gradient(180deg,#fbf0d2,#ecd8ab);
  color:#35502a;font-family:var(--font-stencil);font-weight:900;
  letter-spacing:.14em;text-transform:uppercase;font-size:clamp(12px,1.5vw,18px);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 1px 2px rgba(70,50,25,.18) inset;
  white-space:nowrap;
}
.token-btn:active{transform:translateY(3px) scale(.988);filter:drop-shadow(0 1px 2px rgba(45,30,15,.28)) brightness(.97);}
.token-btn:focus-visible{outline:3px solid rgba(255,236,177,.9);outline-offset:3px;}
.deploy{width:clamp(190px,22vw,262px);height:clamp(54px,7.6vh,70px);margin-top:2px;}
.deploy span{font-size:clamp(14px,1.7vw,21px);letter-spacing:.24em;}

.title-help{display:flex;gap:10px;align-items:stretch;justify-content:center;margin-top:2px;max-width:min(92vw,760px);}
.help-card{
  background:linear-gradient(180deg,rgba(247,235,207,.93),rgba(233,216,178,.93));
  border-radius:7px;padding:7px 11px 8px;text-align:left;
  box-shadow:0 0 0 1.5px rgba(60,83,39,.55) inset,0 3px 8px rgba(45,35,18,.2);
  color:#4a5633;min-width:0;
}
.help-head{display:block;font-size:8px;font-weight:900;letter-spacing:.2em;color:#8f3120;margin-bottom:3px;}
.help-card p{margin:1px 0;font-size:clamp(8px,.9vw,10px);line-height:1.35;color:#5b6642;letter-spacing:.02em;white-space:nowrap;}
.help-card b{color:#33481f;font-weight:900;}
.touch-help{display:none;}
body.touch .pc-help{display:none;}
body.touch .touch-help{display:block;}
.title-foot{
  margin:0;font-family:var(--font-stencil);font-weight:900;font-size:clamp(7px,.82vw,9px);
  letter-spacing:.18em;color:rgba(247,235,203,.9);text-shadow:0 1px 3px rgba(35,28,16,.65);
}
body.playing .title-screen{display:none;}

/* pause */
.pause-screen{display:flex;align-items:center;justify-content:center;}
.pause-bg{filter:blur(3px) saturate(.92) brightness(.86);animation:none;transform:scale(1.05);}
.pause-wash{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 46%,rgba(243,226,186,.24) 0%,rgba(55,42,22,.35) 62%,rgba(45,34,18,.55) 100%);}
.pause-stack{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;width:min(560px,92vw);max-height:100%;padding:12px;}
.pause-lockup{width:min(46vw,340px);max-height:16vh;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(35,25,12,.5));}
.pause-panel{
  width:100%;aspect-ratio:478/322;max-height:62vh;position:relative;
  background:url('elements/hud_card_frames_05_pause_panel.webp') center/100% 100% no-repeat;
  filter:drop-shadow(0 14px 28px rgba(35,25,12,.4));
  border-radius:14px;
}
.pause-body{
  position:absolute;left:7%;right:7%;top:34%;bottom:7%;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;
}
.pause-kicker{margin:0;font-family:var(--font-stencil);font-weight:900;font-size:11px;letter-spacing:.26em;color:#8f3120;}
.pause-scoreline{margin:0;display:flex;align-items:center;gap:7px;font-family:var(--font-num);font-weight:700;font-size:27px;color:#3c5327;line-height:1;}
.pause-scoreline img{width:24px;height:24px;object-fit:contain;}
.pause-dash{color:#9d8b60;font-size:18px;}
.pause-buttons{display:flex;flex-direction:column;gap:6px;width:min(100%,330px);margin-top:2px;}
.pause-buttons .token-btn{width:100%;height:clamp(36px,4.4vh,44px);}
.pause-buttons .token-btn span{font-size:clamp(10px,1.2vw,13px);}
.pause-help{margin:4px 0 0;font-family:var(--font-stencil);font-weight:700;font-size:clamp(7px,.78vw,9px);letter-spacing:.04em;color:#625436;text-align:center;line-height:1.35;}
.pause-tip{display:none;}

/* end */
.end-screen{display:flex;align-items:center;justify-content:center;}
.end-bg{filter:blur(2px) saturate(.95) brightness(.9);animation:none;transform:scale(1.04);}
.end-wash{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 44%,rgba(243,226,186,.18) 0%,rgba(50,38,20,.34) 66%,rgba(40,30,16,.52) 100%);}
.end-stack{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;width:min(600px,94vw);max-height:100%;padding:10px;}
.end-lockup{width:min(40vw,300px);max-height:13vh;object-fit:contain;filter:drop-shadow(0 7px 12px rgba(35,25,12,.5));}
.end-card{
  width:100%;border-radius:14px;padding:0 0 4px;
  background:linear-gradient(180deg,#f6e8c6,#e9d5a7);
  box-shadow:0 0 0 2px rgba(60,83,39,.8) inset,0 0 0 5px rgba(243,226,186,.35) inset,0 16px 36px rgba(35,25,12,.42);
  border-radius:16px;overflow:hidden;
}
.end-head{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,#4f6d33,#3c5327);color:#f3e2ba;
  padding:8px 16px;font-size:11px;font-weight:900;letter-spacing:.26em;
  box-shadow:0 2px 0 rgba(255,255,255,.12) inset;
}
.end-stamp{border:1.5px solid rgba(243,226,186,.6);border-radius:4px;padding:1px 7px;font-size:9px;letter-spacing:.18em;}
.end-body{padding:14px 20px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
.end-result{margin:0;font-family:var(--font-display);font-size:clamp(24px,3.4vw,40px);line-height:1;color:#3c5327;letter-spacing:.02em;text-shadow:0 2px 0 rgba(255,255,255,.3);}
.end-sub{margin:0;font-size:11px;letter-spacing:.12em;color:#7a6a44;font-weight:700;}
.end-score{display:flex;align-items:center;gap:12px;}
.end-score figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:1px;}
.end-score img{width:clamp(28px,3vw,38px);height:clamp(28px,3vw,38px);object-fit:contain;filter:drop-shadow(0 2px 3px rgba(50,35,15,.25));}
.end-score figcaption{font-size:7px;font-weight:900;letter-spacing:.16em;color:#7a6a44;}
.end-nums{display:flex;align-items:baseline;gap:4px;font-family:var(--font-num);font-weight:700;color:#3c5327;font-size:clamp(30px,4vw,46px);}
.end-nums i{font-style:normal;color:#a8986c;font-size:.55em;}
.end-stats{display:flex;gap:clamp(12px,4vw,34px);margin:2px 0;}
.end-stats>div{display:flex;flex-direction:column;align-items:center;}
.stat-num{font-family:var(--font-num);font-weight:700;font-size:clamp(20px,2.4vw,30px);color:#3c5327;line-height:1;}
.stat-label{font-size:7.5px;font-weight:900;letter-spacing:.15em;color:#8b7a52;margin-top:2px;}
.end-buttons{display:flex;gap:10px;margin-top:2px;width:100%;justify-content:center;}
.end-buttons .token-btn{width:min(46%,220px);height:clamp(38px,4.8vh,46px);}
.end-buttons .token-btn span{font-size:clamp(9px,1.08vw,12px);}

/* ================= RESPONSIVE ================= */
@media (max-width:760px){
   :root{--mini:100px;}
  .title-lockup{width:90vw;max-height:20vh;}
  .minimap-label{font-size:5.5px;letter-spacing:.08em;padding:1px 4px;}
  .minimap-north{font-size:7px;}
  .minimap-zoom{width:18px;height:18px;font-size:12px;}
  .score-strip{left:calc(6px + var(--safe-l) + var(--mini) + 8px);right:calc(6px + var(--safe-r));transform:none;width:auto;top:calc(6px + var(--safe-t));}
  .pause-chip{left:calc(6px + var(--safe-l));top:calc(6px + var(--safe-t) + var(--mini) + 8px);}
  .title-content{gap:clamp(5px,1.1vh,10px);}
  .army-row{gap:10px;}
  .army-pick img{width:15vw;height:15vw;max-width:56px;max-height:56px;}
  .army-pick.you::after,.army-pick.rival::after{font-size:6px;top:-10px;}
  .title-help{max-width:94vw;}
  .help-card p{white-space:normal;}
  .help-card{padding:6px 9px;}
  .pause-chip{width:34px;height:34px;border-radius:11px;}
  .pause-bars i{height:13px;width:4px;}
  .kill-feed{top:calc(78px + var(--safe-t));width:45vw;max-width:230px;padding:7px 8px 9px;}
  .feed-head{font-size:8px;padding-bottom:3px;}
  .feed-row{font-size:9px;padding:3px 4px;min-height:20px;gap:3px;}
  .feed-row img.badge{width:13px;height:13px;}
  .feed-row img.weapon{width:22px;height:11px;}
  .health-plate{width:149px;}
  .ammo-plate{width:158px;}
  .hp-label{font-size:6px;}
  .ammo-name{font-size:6px;}
  .armor-strip{width:86%;max-width:140px;padding:4px 6px;}
  .armor-num{font-size:13px;}
  .armor-pips i{width:6px;height:8px;}
  .wslot{width:26px;height:23px;padding:2px 3px;}
  .weapon-slots{gap:3px;}
  .weapon-slots{bottom:0;}
  .ammo-wrap{gap:4px;}
  .health-wrap{gap:5px;}
  .title-foot{font-size:7px;}
}
@media (max-width:430px){
  .pause-panel{aspect-ratio:auto;height:min(62vh,340px);}
  .pause-body{top:33%;gap:4px;}
  .pause-kicker{font-size:9px;}
  .pause-scoreline{font-size:22px;}
  .pause-buttons{gap:5px;}
  .pause-buttons .token-btn{height:38px;}
  .pause-help{font-size:7px;letter-spacing:0;line-height:1.3;}
  .title-lockup{width:94vw;}
  .army-row{gap:6px;}
  .army-pick img{width:14vw;height:14vw;}
  .title-content{gap:4px;padding-top:calc(8px + var(--safe-t));}
  .help-card p{font-size:8px;}
  .deploy{height:52px;}
  .score-mode{font-size:6px;letter-spacing:.12em;}
  .score-timer{font-size:22px;}
  .score-num{font-size:26px;}
  .hp-num{font-size:30px;}
  .ammo-mag{font-size:32px;}
  .respawn-card{padding:14px 22px 16px;}
}
@media (max-height:520px){
   :root{--base:clamp(38px,6.8vmin,50px);--fire:clamp(50px,8.6vmin,64px);}
  .btn-fire{bottom:calc(96px + var(--safe-b));}
  .t-reload{right:calc(10px + var(--safe-r));bottom:calc(96px + var(--safe-b) + var(--fire) + 5px);}
  .t-aim{right:calc(10px + var(--safe-r));bottom:calc(96px + var(--safe-b) + var(--fire) + var(--base) + 12px);}
  .t-jump{right:calc(10px + var(--safe-r) + var(--fire) + 12px);bottom:calc(96px + var(--safe-b));}
  .t-crouch{right:calc(10px + var(--safe-r) + var(--fire) + 12px);bottom:calc(96px + var(--safe-b) + var(--base) + 6px);}
  .t-sprint{right:calc(10px + var(--safe-r) + var(--fire) + 12px);bottom:calc(96px + var(--safe-b) + var(--base) * 2 + 12px);}
  .t-switch{right:calc(10px + var(--safe-r) + var(--fire) + 12px);bottom:calc(96px + var(--safe-b) + var(--base) * 3 + 18px);}
  .stick-zone{bottom:calc(96px + var(--safe-b));--stick:clamp(92px,15vmin,118px);}
  .health-plate{width:136px;}
  .ammo-plate{width:146px;}
  .weapon-slots{display:none;}
  .kill-feed{width:210px;padding:6px 7px 7px;}
  .armor-strip{display:none;}
  .title-lockup{width:min(54vw,520px);max-height:20vh;}
  .army-pick img{width:clamp(32px,5vw,48px);height:clamp(32px,5vw,48px);}
  .title-content{gap:4px;}
  .help-card{display:none;}
  .title-foot{display:none;}
  .title-map{font-size:8px;padding:2px 8px;}
  .pause-lockup{display:none;}
  .pause-panel{max-height:92vh;width:min(480px,86vw);}
  .pause-stack{gap:0;}
  .pause-help{display:none;}
  .pause-kicker{display:none;}
  .pause-body{top:32%;}
  .pause-buttons .token-btn{height:32px;}
  .end-lockup{display:none;}
  .end-card{max-height:96vh;overflow:auto;}
}
@media (prefers-reduced-motion:reduce){
  .title-bg{animation:none;}
  .feed-row{animation:none;}
}