:root{
  --bg:#101315;--ink:#f4efe6;--mute:#aeb5ba;--acc:#f5a53c;--acc-ink:#1b1206;
  --blue:#62a2ff;--red:#ff6250;--ok:#8fd16a;--warn:#f2c14e;--bad:#ef5a4a;
  --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);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font:15px/1.5 "Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;overscroll-behavior:none}
body{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
button{font:inherit;color:inherit}
#view{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none}
body.aiming #view{cursor:none}

/* ---------- loading ---------- */
.loading{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;background:var(--bg);z-index:50;font:600 13px "Chakra Petch",monospace;letter-spacing:.14em;color:var(--mute);text-transform:uppercase;text-align:center;padding:16px}

/* ---------- menu screens ---------- */
.screen{position:fixed;inset:0;z-index:10;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;user-select:auto;-webkit-user-select:auto}
/* The name plate floating over each tank on the menu stage. Positioned in JS from the
   tank's projected position, so it follows the camera as it drifts and pulls back. */
/* Above .screen (z-index 10), which covers the whole viewport: below it the + could never
   be pressed, because the menu screen swallowed the click. The layers themselves let
   pointer events through; only the buttons inside take them. */
.stage-names{position:fixed;inset:0;pointer-events:none;z-index:11}
#scr-menu[hidden]~.stage-names,body:not(.on-menu) .stage-names{display:none}
.splate{position:absolute;transform:translate(-50%,-100%);text-align:center;white-space:nowrap}
.splate b{display:inline-block;padding:2px 9px;border-radius:4px;background:rgba(16,19,21,.84);border:1px solid rgba(255,255,255,.22);font:700 11px "Chakra Petch",sans-serif;letter-spacing:.06em;color:#f4efe6}
.splate.me b{border-color:var(--acc);color:var(--acc)}
.splate i{display:block;margin-top:2px;font:700 13px "Chakra Petch",sans-serif;font-style:normal;letter-spacing:.08em;color:#f4efe6;text-shadow:0 2px 8px rgba(0,0,0,.85)}
html[dir="rtl"] .splate b,html[dir="rtl"] .splate i{font-family:"Noto Kufi Arabic","Noto Sans Arabic",sans-serif}
/* The + beside the line-up: invite a friend into your squad without leaving the menu. */
.stage-add{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;gap:1px;
  width:54px;height:54px;border-radius:50%;border:2px dashed rgba(245,165,60,.75);background:rgba(16,19,21,.82);
  color:var(--acc);cursor:pointer;font:700 8.5px "Chakra Petch",sans-serif;letter-spacing:.08em;padding:0}
.stage-add svg{width:20px;height:20px}
/* ============================================================
   THE CORNER MENU — everything that is not "play now" is tucked
   behind one button in the top-left corner, so the middle of the
   screen belongs to the tanks and nothing covers them.
   ============================================================ */
.mn-more{position:fixed;left:calc(12px + max(var(--safe-l),8px));top:calc(10px + var(--safe-t));z-index:14;
  display:flex;align-items:center;gap:7px;padding:8px 13px 8px 10px;min-height:44px;border-radius:8px;
  background:rgba(16,19,21,.9);border:1px solid rgba(255,255,255,.18);color:var(--ink);cursor:pointer;
  font:700 12px "Chakra Petch",sans-serif;letter-spacing:.12em}
.mn-more svg{width:19px;height:19px;flex:0 0 auto}
.mn-more:hover{border-color:rgba(255,255,255,.42)}
.mn-more .dot{position:absolute;top:-4px;right:-4px;width:11px;height:11px;border-radius:50%;background:var(--bad);
  border:2px solid #101315;font-style:normal}
html[dir="rtl"] .mn-more{left:auto;right:calc(12px + max(var(--safe-r),8px));font-family:"Noto Kufi Arabic","Noto Sans Arabic",sans-serif;letter-spacing:0}
html[dir="rtl"] .mn-more .dot{right:auto;left:-4px}

.mn-drawer{position:fixed;left:calc(12px + max(var(--safe-l),8px));top:calc(62px + var(--safe-t));z-index:15;
  width:min(300px,84vw);max-height:calc(100vh - 76px - var(--safe-t) - var(--safe-b));overflow:auto;scrollbar-width:none;
  display:grid;gap:8px;padding:11px;border-radius:10px;background:rgba(14,17,19,.97);
  border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 44px rgba(0,0,0,.6)}
.mn-drawer::-webkit-scrollbar{display:none}
html[dir="rtl"] .mn-drawer{left:auto;right:calc(12px + max(var(--safe-r),8px))}
.dr-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font:700 11px "Chakra Petch",sans-serif;letter-spacing:.16em;color:var(--mute)}
.dr-head .btn.sm{padding:2px 9px;min-height:0;font-size:13px}
html[dir="rtl"] .dr-head{font-family:"Noto Kufi Arabic","Noto Sans Arabic",sans-serif;letter-spacing:0}
/* the tiles inside: four across, each its own icon + label */
.dr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.dr-grid .ebtn,.dr-grid .btn{min-width:0;min-height:58px;padding:7px 4px 6px;font-size:9.5px;letter-spacing:0;
  display:grid;justify-items:center;align-content:center;gap:3px;text-align:center}
.dr-grid .btn{flex-direction:column;justify-content:center}
.dr-grid .btn>span{font-size:9.5px;white-space:normal;overflow-wrap:anywhere;line-height:1.05;text-align:center}
.dr-grid .btn .bi{width:17px;height:17px}
.dr-grid .ebtn .e3{width:22px;height:22px}
.mn-drawer .btn-row{grid-template-columns:1fr 1fr;gap:6px}
.mn-drawer .btn-row .btn{min-height:38px}
.mn-drawer .langsel{margin:0;justify-content:center;gap:5px;font-size:0}
.mn-drawer .langsel>span:first-child{display:none}
.mn-drawer .menu-links{margin:0;text-align:center;font-size:11px}
.mn-drawer .me-card,.mn-drawer .fr-mini{width:100%}
/* the drawer dims what is behind it so the eye goes to it */
body.drawer-open .menu-col,body.drawer-open .home-side{opacity:.35;pointer-events:none;transition:opacity .12s}
@media (max-height:430px){
  /* A landscape phone is about 360-390 px tall: the drawer has to fit without scrolling, so the
     two cards that only repeat what PROFILE and FRIENDS already open are left out. */
  .mn-more{padding:6px 11px 6px 9px;min-height:38px;font-size:11px}
  .mn-drawer{top:calc(52px + var(--safe-t));padding:8px;gap:5px;
    max-height:calc(100vh - 60px - var(--safe-t) - var(--safe-b))}
  .mn-drawer .me-card,.mn-drawer .fr-mini{display:none}
  .dr-grid{gap:5px}
  .dr-grid .ebtn,.dr-grid .btn{min-height:46px;font-size:8.5px;padding:5px 3px 4px}
  .dr-grid .btn>span{font-size:8.5px}
  .dr-grid .ebtn .e3{width:18px;height:18px}
  .dr-grid .btn .bi{width:15px;height:15px}
  .mn-drawer .btn-row .btn{min-height:34px;font-size:10px}
  .mn-drawer .menu-links{font-size:10px}
}

/* A passenger in a squad cannot start anything: the buttons dim and say who can. */
.btn.not-lead,.inp.not-lead{opacity:.45}
.lead-note{margin:0;padding:6px 9px;border-radius:6px;background:rgba(245,165,60,.12);border:1px solid rgba(245,165,60,.35);
  color:#f3e2c6;font:600 10.5px "Chakra Petch",sans-serif;letter-spacing:.04em;line-height:1.3}
html[dir="rtl"] .lead-note{font-family:"Noto Kufi Arabic","Noto Sans Arabic",sans-serif;letter-spacing:0}
/* The squad panel on the menu: who is in it, who leads it, and the way out. */
.squad-bar{display:grid;gap:4px;padding:8px 10px}
.sq-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sq-head .lbl{margin:0;font:700 10px "Chakra Petch",sans-serif;letter-spacing:.14em;color:var(--mute)}
.sq-head .btn.sm{padding:3px 9px;font-size:10px;min-height:0}
.sq-row{display:flex;align-items:center;gap:7px;width:100%;padding:5px 6px;border-radius:6px;border:1px solid transparent;
  background:rgba(255,255,255,.05);color:var(--ink);font:600 11px "Chakra Petch",sans-serif;cursor:pointer;text-align:start}
.sq-row.me{border-color:rgba(245,165,60,.5)}
.sq-row:hover{background:rgba(255,255,255,.1)}
.sq-crown{width:13px;height:13px;flex:0 0 auto;color:var(--acc)}
.sq-crown svg{width:13px;height:13px;display:block}
.sq-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sq-name small{opacity:.6;font-size:9px}
.sq-tank{flex:0 0 auto;font-size:9.5px;color:var(--mute);max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sq-more{flex:0 0 auto;color:var(--mute);letter-spacing:.06em}
html[dir="rtl"] .sq-row,html[dir="rtl"] .sq-head .lbl{font-family:"Noto Kufi Arabic","Noto Sans Arabic",sans-serif;letter-spacing:0}
@media (max-height:430px){.squad-bar{padding:6px 8px;gap:3px}.sq-row{padding:4px 5px;font-size:10px}}
.stage-adds{position:fixed;inset:0;pointer-events:none;z-index:11}
.stage-adds>.stage-add{pointer-events:auto}
body:not(.on-menu) .stage-adds{display:none}
.stage-add:hover{border-style:solid;background:rgba(24,28,32,.92)}
.stage-add:active{transform:translate(-50%,-50%) scale(.94)}
html[dir="rtl"] .stage-add{font-family:"Noto Kufi Arabic","Noto Sans Arabic",sans-serif;letter-spacing:0}
@media (max-height:430px){.stage-add{width:46px;height:46px}.stage-add svg{width:17px;height:17px}}
.menu-shade{position:fixed;inset:0;background:linear-gradient(90deg,rgba(12,10,8,.82) 0%,rgba(12,10,8,.45) 45%,rgba(12,10,8,.2) 70%,rgba(12,10,8,.5) 100%);pointer-events:none}
.menu-col{position:relative;width:min(360px,100%);padding:calc(28px + var(--safe-t)) 20px calc(28px + var(--safe-b)) calc(20px + max(var(--safe-l),16px));display:flex;flex-direction:column;gap:11px}
.mn-logo{font-family:"Bungee",Impact,sans-serif;font-size:56px;line-height:.86;color:var(--acc);text-shadow:0 4px 0 #7a4a12,0 10px 30px rgba(0,0,0,.5)}
.mn-logo span{color:#fff4e2}
.mn-logo.small{font-size:36px}
.kflag{position:relative;width:132px;height:30px;display:flex;flex-direction:column;border-radius:2px;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,.4)}
.kflag i{flex:1}.kflag i:nth-child(1){background:#ed2024}.kflag i:nth-child(2){background:#f7f7f2}.kflag i:nth-child(3){background:#278e43}
.kflag b{position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#febd11;box-shadow:0 0 0 2px rgba(254,189,17,.45)}
.mn-tag{margin:4px 0 8px;font-size:15px;color:#e9dfcf}
.fld{display:flex;flex-direction:column;gap:5px;font:700 11px "Chakra Petch",sans-serif;letter-spacing:.16em;color:#c8bfb0}
.inp{font:600 18px "Chakra Petch",monospace;padding:10px 12px;border-radius:5px;border:1px solid rgba(255,255,255,.22);background:rgba(8,10,12,.65);color:#fff;letter-spacing:.06em;width:100%;min-width:0}
.inp.code{text-transform:uppercase;letter-spacing:.24em}
.inp:focus{outline:2px solid var(--acc);outline-offset:1px}
.btn{font:700 17px "Chakra Petch",sans-serif;letter-spacing:.12em;padding:12px 16px;border-radius:5px;border:1px solid rgba(255,255,255,.2);background:rgba(20,24,28,.78);color:#fff;cursor:pointer;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:46px}
.btn:hover{border-color:rgba(255,255,255,.45)}
.btn:focus-visible,.seg button:focus-visible,.tg:focus-visible,.map:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.btn:disabled{opacity:.4;cursor:default}
.btn.primary{background:var(--acc);color:var(--acc-ink);border-color:var(--acc);font-size:21px}
.btn.primary:hover{background:#ffb657}
.btn.ghost{background:transparent}
/* Neither the label nor its little grey subtitle may wrap onto a second line. When a button
   is short of room the subtitle gives way first (it shrinks 100x more readily than the
   label), and below phone width it steps out of the way entirely. */
.btn small{font-size:10.5px;letter-spacing:.08em;opacity:.72;white-space:nowrap;flex:0 100 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.btn>span{white-space:nowrap;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:460px){.btn-row .btn small,.nav-row .btn small{display:none}}
/* The big menu buttons put their subtitle on its own line under the label, indented past the
   icon. Kurdish and Arabic subtitles are much longer than the English ones and would
   otherwise be cut off or shove the label out of the button. */
.menu-col>.btn{flex-wrap:wrap;row-gap:1px}
.menu-col>.btn>span{flex:1 1 auto}
.menu-col>.btn small{flex:0 0 100%;order:3;text-align:start;padding-inline-start:34px;overflow:visible;text-overflow:clip;white-space:normal;line-height:1.25}
.menu-col>.btn.primary small{padding-inline-start:36px}
.join{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px}
.join>.btn{white-space:nowrap;padding:8px 12px;justify-content:center}
.join>.bi{flex:0 0 auto}
html[dir="rtl"] .join>.bi{transform:scaleX(-1)}   /* the arrow points into the box either way */
.note{margin:4px 0 0;padding:8px 10px;border-radius:5px;background:rgba(245,165,60,.12);border:1px solid rgba(245,165,60,.35);color:#f3e2c6;font-size:14px}
.err{margin:4px 0 0;padding:8px 10px;border-radius:5px;background:rgba(239,90,74,.16);border:1px solid rgba(239,90,74,.4);color:#ffd2cc;font-size:14px}
.card{background:rgba(14,17,20,.84);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.card h4{margin:0 0 10px;font:700 12px "Chakra Petch",sans-serif;letter-spacing:.18em;color:#b8bfc4}

/* lobby */
.lobby{position:relative;min-height:100%;display:grid;place-items:center;padding:calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l))}
.lb-card{width:min(640px,100%);font-family:"Chakra Petch",sans-serif}
.lb-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.lb-head small{display:block;font-size:10px;letter-spacing:.2em;color:#b8bfc4;font-weight:700}
.lb-head .code{font:700 44px/1 "Chakra Petch",monospace;letter-spacing:.2em;color:#fff;user-select:all;-webkit-user-select:all}
.lb-share{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:0}
.lb-link{font-size:11px;color:#9aa2a8;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:all;-webkit-user-select:all}
.lb-copy{font:700 12px "Chakra Petch";letter-spacing:.1em;padding:9px 12px;border-radius:5px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);cursor:pointer;display:flex;gap:6px;align-items:center}
.lb-copy svg{width:14px;height:14px}
.lb-maps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}
@media (max-width:520px){.lb-maps{grid-template-columns:1fr 1fr}}
.map{padding:0;border:2px solid rgba(255,255,255,.14);border-radius:6px;overflow:hidden;background:#0c0e10;cursor:pointer;text-align:left}
.map img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#222}
.map span{display:block;padding:6px 9px 7px;font-weight:700;font-size:14px;letter-spacing:.04em}
.map span small{display:block;font-weight:600;font-size:10.5px;letter-spacing:.14em;color:#aeb5ba}
.map[aria-pressed="true"]{border-color:var(--acc)}
.map:disabled{cursor:default}
.lb-mode{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;font-size:12px;letter-spacing:.1em;color:#d8dde0;padding:6px 2px 8px;border-bottom:1px solid rgba(255,255,255,.1)}
.lb-players{list-style:none;margin:0;padding:4px 0 0;display:grid}
.lb-players li{display:grid;grid-template-columns:18px minmax(0,1fr) 64px 56px 76px;gap:8px;align-items:center;padding:7px 2px;font-size:15px;border-bottom:1px solid rgba(255,255,255,.05);font-variant-numeric:tabular-nums}
.lb-players li.me{background:rgba(245,165,60,.1)}
.lb-players .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-players .nm small{color:#aeb5ba;font-size:10.5px;letter-spacing:.12em;margin-inline-start:6px}
.chip{font-size:10px;letter-spacing:.14em;font-weight:700;padding:2px 0;border-radius:3px;text-align:center}
.chip.blue{background:rgba(98,162,255,.2);color:#bcd6ff}.chip.red{background:rgba(255,98,80,.2);color:#ffc2b8}.chip.ffa{background:rgba(255,255,255,.1);color:#ddd}
.lb-players .pg{color:#aeb5ba;font-size:12px;text-align:right}
.lb-players .rd{font-size:11px;letter-spacing:.12em;font-weight:700;text-align:right}
.rd.y{color:var(--ok)}.rd.n{color:#8d959a}
.lb-players svg{width:16px;height:16px;color:var(--acc)}
.lb-note{margin:8px 0 0;font-size:13px;color:#c9ced1;font-family:"Barlow",sans-serif;min-height:1em}
.lb-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.lb-actions .btn{flex:1 1 auto;justify-content:center;font-size:14px;padding:10px 12px}
.lb-actions .btn.primary{flex:2 1 180px;font-size:18px}
.lb-foot{display:flex;justify-content:space-between;gap:8px;margin-top:8px}
.lb-foot .btn{font-size:13px;min-height:38px;padding:8px 12px}
@media (max-width:520px){.lb-players li{grid-template-columns:16px minmax(0,1fr) 52px 70px}.lb-players .pg{display:none}}

/* segmented controls, toggles, sliders */
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid rgba(255,255,255,.22);border-radius:5px;overflow:hidden}
.seg button{font:700 11px "Chakra Petch";letter-spacing:.12em;padding:7px 10px;background:transparent;border:0;cursor:pointer;color:#c9cfd3}
.seg button[aria-pressed="true"]{background:var(--acc);color:var(--acc-ink)}
.seg button:disabled{cursor:default}
.tg{width:42px;height:22px;border-radius:11px;background:var(--acc);position:relative;flex:none;border:0;cursor:pointer;padding:0}
.tg::after{content:"";position:absolute;right:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#1b1206;transition:all .15s}
.tg[aria-pressed="false"]{background:rgba(255,255,255,.2)}.tg[aria-pressed="false"]::after{right:23px;background:#ddd}
.rng{display:flex;align-items:center;gap:8px;min-width:150px}
.rng input{flex:1;accent-color:var(--acc);min-width:0}
.rng em{font-style:normal;font-size:12px;width:34px;text-align:right;font-variant-numeric:tabular-nums}

/* modals */
.modal{position:fixed;inset:0;z-index:30;background:rgba(6,8,10,.6);display:grid;place-items:center;padding:calc(12px + var(--safe-t)) 16px calc(12px + var(--safe-b));overflow-y:auto;touch-action:pan-y;user-select:auto;-webkit-user-select:auto}
.modal-card{width:min(360px,100%);display:flex;flex-direction:column;gap:10px;font-family:"Chakra Petch",sans-serif}
.modal-card.wide{width:min(820px,100%)}
.set-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
@media (max-width:700px){.set-grid{grid-template-columns:1fr}}
.st-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;font-size:14px;letter-spacing:.04em;border-bottom:1px solid rgba(255,255,255,.07)}
.nettest{font-size:13px;color:#c9ced1}
.nettest summary{cursor:pointer;letter-spacing:.08em;padding:6px 0}
.nettest p{margin:4px 0;font-family:"Barlow",sans-serif}
.set-hint{margin:0;font:13px/1.45 "Barlow",sans-serif;color:#aeb5ba}
.rotate{position:fixed;inset:0;z-index:60;background:var(--bg);display:grid;place-items:center;text-align:center;font:600 16px "Chakra Petch";letter-spacing:.08em;color:var(--ink);padding:16px}
.toast{position:fixed;left:50%;bottom:calc(24px + var(--safe-b));transform:translateX(-50%);z-index:70;background:rgba(14,17,20,.92);border:1px solid rgba(255,255,255,.2);padding:9px 14px;border-radius:6px;font:600 13px "Chakra Petch";letter-spacing:.06em;max-width:calc(100% - 32px)}

/* ---------- overlay: name tags + crosshair ---------- */
.ov{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:4}
.tag{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:3px;font:600 var(--tf,12px) "Chakra Petch",sans-serif;letter-spacing:.03em;white-space:nowrap;will-change:transform;color:#fff}
.tag span{padding:1px 6px;border-radius:3px;background:rgba(10,14,18,.55);text-shadow:0 1px 0 rgba(0,0,0,.6)}
.tag.ally span{color:#bcd6ff}.tag.enemy span{color:#ffc2b8}
.tag u{text-decoration:none;font-size:calc(var(--tf,12px)*.92);line-height:1;letter-spacing:.06em;text-shadow:0 1px 2px rgba(0,0,0,.85);padding:0 3px}
.tag u:empty{display:none}
.tag i{display:block;width:calc(var(--tf,12px)*4.2);height:calc(var(--tf,12px)*.34);background:rgba(0,0,0,.55);border-radius:2px;overflow:hidden}
.tag i b{display:block;height:100%;background:var(--blue);transition:width .2s}
.tag.enemy i b{background:var(--red)}
.xh{position:absolute;left:0;top:0;width:52px;height:52px;margin:-26px 0 0 -26px;will-change:transform}
.xh svg{width:100%;height:100%;overflow:visible}
.xh .hitx{opacity:0;transition:opacity .08s}
.xh.hit .hitx{opacity:1}
.dmgnum{position:absolute;left:0;top:0;font:700 16px "Chakra Petch";color:#ffd27a;text-shadow:0 2px 0 rgba(0,0,0,.6);animation:dmgup .9s ease-out forwards}
@keyframes dmgup{from{opacity:1;translate:0 0}to{opacity:0;translate:0 -36px}}

/* ---------- HUD (virtual layer, scaled by JS) ---------- */
.hudwrap{position:fixed;top:var(--safe-t);right:var(--safe-r);bottom:var(--safe-b);left:var(--safe-l);z-index:6;pointer-events:none}
.vl{position:absolute;left:0;top:0;transform-origin:0 0;font-family:"Chakra Petch","Barlow",sans-serif;color:var(--ink)}
.vl button{pointer-events:auto}
.pnl{background:rgba(10,14,18,.58);border:1px solid rgba(255,255,255,.1);border-radius:6px}
.vign{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(200,30,20,.55));opacity:0;pointer-events:none}
.killfeed{position:absolute;top:14px;left:16px;display:flex;flex-direction:column;gap:5px;width:320px}
.kf{display:flex;align-items:center;gap:8px;padding:4px 10px;font-size:13.5px;font-weight:600;animation:kfin .25s ease-out;align-self:flex-start}
.kf .b{color:var(--blue)}.kf .r{color:var(--red)}.kf .me{text-decoration:underline;text-underline-offset:3px}
.kf svg{width:22px;height:10px;flex:none}
@keyframes kfin{from{transform:translateX(-12px);opacity:0}}
.h-score{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;align-items:stretch;overflow:hidden}
.h-score .team{display:flex;align-items:center;gap:10px;padding:6px 16px;font-weight:700;letter-spacing:.12em;font-size:13px}
.h-score .team b{font-size:26px;letter-spacing:0;font-variant-numeric:tabular-nums}
.h-score .team.blue{background:linear-gradient(90deg,rgba(60,120,220,.55),rgba(60,120,220,.15));color:#d6e5ff}
.h-score .team.red{background:linear-gradient(270deg,rgba(220,70,55,.55),rgba(220,70,55,.15));color:#ffd9d2}
.h-score .clock{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 16px;min-width:160px}
.h-score .clock span{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.h-score .clock small{font-size:9.5px;letter-spacing:.14em;color:#b9c0c5;white-space:nowrap}
.topright{position:absolute;top:14px;right:16px;display:flex;gap:8px;align-items:center}
.netchip{display:flex;gap:10px;align-items:center;padding:6px 10px;font-size:12.5px;font-weight:600;letter-spacing:.04em;height:36px}
.netchip .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px currentColor}
.netchip .sep{opacity:.35}
.m-btn{width:36px;height:36px;display:grid;place-items:center;border-radius:6px;cursor:pointer;padding:0}
.m-btn svg{width:20px;height:20px}
.miniboard{position:absolute;top:58px;right:16px;width:204px;padding:6px 0;font-size:12.5px}
.miniboard .row{display:grid;grid-template-columns:8px 1fr 26px 26px;gap:8px;align-items:center;padding:2px 10px;font-variant-numeric:tabular-nums}
.miniboard .row.me{background:rgba(245,165,60,.16)}
.miniboard .row .sw{width:6px;height:14px;border-radius:1px}
.miniboard .row .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.miniboard .row .k,.miniboard .row .d{text-align:right}
.miniboard .row .d{color:#aeb5ba}
.miniboard .hd{font-size:9.5px;letter-spacing:.14em;color:#aeb5ba}
.connbar{position:absolute;top:70px;left:50%;transform:translateX(-50%);padding:6px 14px;font-size:13px;letter-spacing:.14em;color:var(--warn)}
.pu-chips{position:absolute;left:16px;bottom:118px;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.chip-pu{display:flex;align-items:center;gap:8px;padding:4px 10px;border-radius:5px;background:rgba(10,14,18,.66);border:1px solid rgba(255,255,255,.14);font-size:12px;font-weight:700;letter-spacing:.12em}
.chip-pu i{width:10px;height:10px;border-radius:2px;transform:rotate(45deg)}
.chip-pu em{font-style:normal;color:#c9cfd3;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.chip-pu.shield i{background:#46a8ff}.chip-pu.speed i{background:#ffd23a}.chip-pu.oneshot i{background:#ff3b2f}.chip-pu.rocket i{background:#ff8a3a}.chip-pu.rocket{border-color:rgba(255,138,58,.6)}.chip-pu.oneshot{border-color:rgba(255,59,47,.6)}
.pu-toast{position:absolute;left:50%;top:26%;transform:translateX(-50%);font-family:"Bungee",Impact,sans-serif;font-size:30px;letter-spacing:.03em;text-shadow:0 3px 0 rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.4);white-space:nowrap;pointer-events:none}
.pu-toast.pop{animation:putoast 1.6s ease-out forwards}
@keyframes putoast{0%{opacity:0;transform:translateX(-50%) scale(.7)}12%{opacity:1;transform:translateX(-50%) scale(1.08)}22%{transform:translateX(-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-14px)}}
body.touchui .pu-chips{left:50%;top:74px;bottom:auto;transform:translateX(-50%);flex-direction:row}
.h-health{position:absolute;left:16px;bottom:16px;width:300px;padding:10px 12px 11px}
.hh-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.hh-name{font-weight:700;font-size:15px;letter-spacing:.04em}
.hh-num{font-size:13px;color:#c2c8cc;font-variant-numeric:tabular-nums}
.hh-num b{font-size:24px;color:#fff;font-weight:700}
.hh-bar{position:relative;height:14px;background:rgba(0,0,0,.5);border-radius:3px;overflow:hidden}
.hh-bar i{position:absolute;inset:0 auto 0 0;width:100%;background:var(--ok);transition:width .2s,background-color .25s}
.hh-bar .lag{position:absolute;inset:0 auto 0 0;width:100%;background:rgba(255,255,255,.45);transition:width .8s .25s}
.hh-bar .ticks{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 2px),rgba(0,0,0,.45) calc(10% - 2px) 10%)}
.hh-sub{margin-top:6px;font-size:11px;letter-spacing:.12em;color:#aeb5ba;text-transform:uppercase}
.h-reload{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:280px;display:flex;gap:10px;align-items:center;padding:8px 12px}
.h-reload svg{width:34px;height:34px;flex:none}
.hr-body{flex:1}
.hr-label{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.14em;font-weight:700;margin-bottom:5px}
.hr-label .ready{color:var(--ok)}.hr-label .busy{color:var(--acc)}
.hr-label em{font-style:normal;color:#c2c8cc;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.hr-bar{height:8px;background:rgba(0,0,0,.5);border-radius:2px;overflow:hidden}
.hr-bar i{display:block;height:100%;width:100%;background:var(--ok)}
.hr-bar i.busy{background:var(--acc)}
.keys{position:absolute;left:50%;bottom:78px;transform:translateX(-50%);display:flex;gap:6px;font-size:11px;letter-spacing:.06em;color:#dfe3e6;white-space:nowrap;transition:opacity 1s}
.keys span{display:flex;align-items:center;gap:5px;padding:3px 8px}
.keys kbd{font:700 10.5px "Chakra Petch",monospace;padding:1px 5px;border-radius:3px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2)}
.minimap{position:absolute;right:16px;bottom:16px;width:170px;height:170px;padding:4px}
.minimap canvas{width:100%;height:100%;display:block;border-radius:4px}
.minimap .compass{position:absolute;top:6px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:700;background:rgba(0,0,0,.5);padding:0 5px;border-radius:2px}
.debug{position:absolute;left:16px;top:180px;width:250px;padding:8px 10px;font:600 11.5px/1.6 "Chakra Petch",monospace;color:#cfe8c9}
.debug .t{display:flex;justify-content:space-between;align-items:center;color:#fff;font-size:10px;letter-spacing:.16em;margin-bottom:4px}
.debug .t b{background:#3a6b2e;color:#dfffd4;padding:0 5px;border-radius:2px}
.debug .r{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;gap:8px}
.debug .r span{color:#9fb3a4}
.debug .r b.warn{color:var(--warn)}
.debug .spark{height:26px;margin-top:4px;width:100%}
.scoreboard{position:absolute;left:50%;top:92px;transform:translateX(-50%);width:620px;max-width:calc(100% - 32px);padding:14px 16px 12px}
.scoreboard h3{margin:0 0 8px;display:flex;justify-content:space-between;gap:10px;font-size:13px;letter-spacing:.16em}
.scoreboard h3 small{font-size:11px;color:#aeb5ba;letter-spacing:.1em}
.sb-grid{display:grid;grid-template-columns:minmax(0,1fr) 68px 76px 70px 62px;font-size:14px;font-variant-numeric:tabular-nums}
.sb-grid>div{padding:5px 8px;border-bottom:1px solid rgba(255,255,255,.06);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-grid .h{font-size:10px;letter-spacing:.16em;color:#aeb5ba;border-bottom:1px solid rgba(255,255,255,.18)}
.sb-grid .num{text-align:right}
.sb-grid .tb{grid-column:1/-1;font-size:11px;letter-spacing:.16em;font-weight:700;padding-top:9px}
.sb-grid .tb.blue{color:var(--blue)}.sb-grid .tb.red{color:var(--red)}.sb-grid .tb.ffa{color:#ddd}
.sb-grid .me{background:rgba(245,165,60,.14)}
.sb-grid .off{opacity:.5}
.deathcard{position:absolute;left:50%;top:34%;transform:translateX(-50%);text-align:center;padding:14px 28px;white-space:nowrap}
.deathcard .big{font-family:"Bungee",Impact,sans-serif;font-size:30px;letter-spacing:.02em;color:#fff}
.deathcard .big b{color:var(--red);font-weight:400}
.deathcard p{margin:4px 0 0;font-size:13px;letter-spacing:.12em;color:#c9ced1}
/* THE RESULT CARD.
   It used to be anchored by its centre with no ceiling on its height, inside a layer only ~720
   virtual px tall (~520 on a phone). A full lobby with MVP cards, an RP result and rewards comes
   to well over 900, and since it grows from the middle outwards the overflow splits evenly: the
   title climbed off the top while the scoreboard slid off the bottom, and nothing could scroll it
   back because the page itself is overflow:hidden. Worse, the rank and reward blocks arrive a
   moment AFTER the card is shown, so it visibly jumped as it grew — which is the "sometimes it
   falls down and I can't see it" everyone hit.
   Now it is bounded by the layer and scrolls inside itself, so it stays centred while it fits and
   simply becomes scrollable when it does not. It needs pointer-events of its own because .hudwrap
   deliberately has none. */
.endcard{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:640px;max-width:calc(100% - 32px);
  max-height:calc(100% - 20px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  pointer-events:auto;box-shadow:0 0 0 100vmax rgba(4,7,10,.5);padding:18px 20px;text-align:center}
/* On a phone the layer is shorter still, so the same content is given tighter spacing before it
   has to resort to scrolling. */
body.touchui .endcard{max-height:calc(100% - 12px);padding:12px 14px}
body.touchui .endcard .big{font-size:29px}
body.touchui .endcard p{margin:2px 0 8px}
body.touchui .endcard .mvp-row{gap:6px;margin:4px 0 8px}
body.touchui .endcard .mvp-card{min-width:170px;padding:5px 10px 5px 8px}
body.touchui .endcard .sb-grid>div{padding:3px 8px}
body.touchui .endcard .rp-res,body.touchui .endcard .rew-res{margin-bottom:8px}
/* The result arrives in order — title, then who played best, then the numbers, then what you
   earned — rather than all at once. Quick: it is a scoreboard, not a ceremony. */
.endcard.show>*{animation:endin .26s cubic-bezier(.2,.9,.3,1.25) both}
.endcard.show>*:nth-child(1){animation-delay:.06s}
.endcard.show>*:nth-child(2){animation-delay:.12s}
.endcard.show>*:nth-child(3){animation-delay:.2s}
.endcard.show>*:nth-child(4){animation-delay:.3s}
.endcard.show>*:nth-child(5){animation-delay:.38s}
.endcard.show>*:nth-child(n+6){animation-delay:.44s}
@keyframes endin{from{opacity:0;transform:translateY(12px)}}
.endcard .big{font-family:"Bungee",Impact,sans-serif;font-size:40px;line-height:1.1;color:var(--acc)}
.endcard p{margin:4px 0 12px;letter-spacing:.12em;font-size:13px;color:#c9ced1}
.endcard .sb-grid{text-align:left}

/* ---------- mobile HUD arrangement ---------- */
body.touchui .keys,body.touchui .miniboard{display:none}
body.touchui .h-health{left:16px;top:14px;bottom:auto;width:250px;padding:7px 10px}
body.touchui .h-health .hh-sub{display:none}
body.touchui .h-health .hh-num b{font-size:18px}
body.touchui .h-health .hh-bar{height:10px}
body.touchui .minimap{left:16px;right:auto;top:84px;bottom:auto;width:118px;height:118px;padding:3px}
body.touchui .h-reload,body.touchui .h-abil{display:none}
body.touchui .h-score{transform:translateX(-50%) scale(.86);transform-origin:top center}
body.touchui .killfeed{left:auto;right:16px;top:60px;align-items:flex-end;width:280px}
body.touchui .killfeed .kf{align-self:flex-end;font-size:12px}
body.touchui .m-btn{width:44px;height:44px}
body:not(.touchui) #btnScores{display:none}
body.touchui .debug{top:210px}

/* ---------- touch controls (unscaled, sized with --ts) ---------- */
.touch{position:fixed;inset:0;z-index:5;touch-action:none;--ts:1}
.stick{position:absolute;--sz:1;width:calc(170px*var(--ts)*var(--sz));height:calc(170px*var(--ts)*var(--sz));margin:calc(-85px*var(--ts)*var(--sz)) 0 0 calc(-85px*var(--ts)*var(--sz));border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.06) 0 55%,rgba(255,255,255,.12) 56% 57%,rgba(255,255,255,.04) 58%);border:2px solid rgba(255,255,255,.28);pointer-events:none;opacity:var(--ta,.75);transition:opacity .15s}
.stick.live{opacity:min(1,calc(var(--ta,.75) + .35));transition:none}
.stick .knob{position:absolute;left:50%;top:50%;width:calc(72px*var(--ts)*var(--sz));height:calc(72px*var(--ts)*var(--sz));margin:calc(-36px*var(--ts)*var(--sz)) 0 0 calc(-36px*var(--ts)*var(--sz));border-radius:50%;background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.55),rgba(255,255,255,.22));border:2px solid rgba(255,255,255,.6);box-shadow:0 4px 12px rgba(0,0,0,.35);will-change:transform}
.stick.r .knob{background:radial-gradient(circle at 40% 35%,rgba(255,200,130,.7),rgba(245,165,60,.35));border-color:rgba(255,210,150,.8)}
.stick small{position:absolute;left:50%;bottom:calc(-20px*var(--ts));transform:translateX(-50%);font:700 11px "Chakra Petch";letter-spacing:.2em;color:rgba(255,255,255,.7)}
.firebtn{position:absolute;--sz:1;width:calc(112px*var(--ts)*var(--sz));height:calc(112px*var(--ts)*var(--sz));margin:calc(-56px*var(--ts)*var(--sz)) 0 0 calc(-56px*var(--ts)*var(--sz));border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 45% 35%,#ff7a5c,#c83a2a 70%);border:3px solid rgba(255,255,255,.55);box-shadow:0 6px 18px rgba(0,0,0,.4);font:700 calc(15px*var(--ts)*var(--sz)) "Chakra Petch";letter-spacing:.14em;touch-action:none;opacity:min(1,calc(var(--ta,.75) + .2));transition:transform .08s,opacity .15s}
.firebtn.press{transform:scale(.92);opacity:1}
.firebtn.cool{filter:saturate(.35) brightness(.8)}
.firebtn svg{position:absolute;inset:-10px;width:calc(100% + 20px);height:calc(100% + 20px);pointer-events:none}
.firebtn span{pointer-events:none}
.abilbtn{position:absolute;--sz:1;width:calc(64px*var(--ts)*var(--sz));height:calc(64px*var(--ts)*var(--sz));margin:calc(-32px*var(--ts)*var(--sz)) 0 0 calc(-32px*var(--ts)*var(--sz));border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 45% 35%,#b98cff,#6a3ecb 72%);border:3px solid rgba(255,255,255,.5);box-shadow:0 6px 16px rgba(0,0,0,.42);touch-action:none;
  opacity:min(1,calc(var(--ta,.75) + .2));transition:transform .08s,opacity .15s;pointer-events:auto}
.abilbtn svg{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);pointer-events:none}
.abilbtn b{font-size:calc(25px*var(--ts)*var(--sz));line-height:1;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.abilbtn em{position:absolute;bottom:calc(-2px*var(--ts)*var(--sz));font:700 calc(13px*var(--ts)*var(--sz)) "Chakra Petch";font-style:normal;color:#fff;text-shadow:0 1px 2px #000;font-variant-numeric:tabular-nums}
.abilbtn.press{transform:scale(.92);opacity:1}
/* The power is its own joystick: hold it, drag to aim, let go to use it. The knob is the thumb
   marker that slides out of the button while you are choosing where the power goes. */
.ab-knob{position:absolute;left:50%;top:50%;width:calc(26px*var(--ts)*var(--sz));height:calc(26px*var(--ts)*var(--sz));margin:calc(-13px*var(--ts)*var(--sz)) 0 0 calc(-13px*var(--ts)*var(--sz));border-radius:50%;background:rgba(201,164,255,.92);box-shadow:0 2px 8px rgba(0,0,0,.5);pointer-events:none;opacity:0;transition:opacity .12s}
.abilbtn.live{opacity:1}
.abilbtn.live .ab-knob{opacity:1}
.abilbtn.live b{opacity:.35}
.abilbtn.deny{animation:abDeny .3s ease-out}
@keyframes abDeny{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.abilbtn.cool{filter:saturate(.3) brightness(.72)}
.abilbtn.armed{box-shadow:0 0 0 4px rgba(201,164,255,.55),0 5px 14px rgba(0,0,0,.4);animation:abBreathe 1.1s ease-in-out infinite}
.h-abil.armed{box-shadow:0 0 0 2px rgba(201,164,255,.6)}
.h-abil.armed .ha-label em{background:#b98cff;color:#1a1020;border-color:#b98cff}
@keyframes abBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.abilbtn.pulse,.h-abil.pulse{animation:abPulse .45s ease-out}
@keyframes abPulse{0%{box-shadow:0 0 0 0 rgba(201,164,255,.85)}100%{box-shadow:0 0 0 22px rgba(201,164,255,0)}}
/* desktop: the power sits next to the reload bar */
.h-abil{position:absolute;left:50%;bottom:74px;transform:translateX(-50%);width:280px;display:flex;gap:10px;align-items:center;padding:7px 12px}
.h-abil>b{font-size:26px;line-height:1;flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.h-abil.cool>b{filter:grayscale(1) brightness(.7)}
.ha-body{flex:1}
.ha-label{display:flex;justify-content:space-between;font-size:11.5px;letter-spacing:.12em;font-weight:700;margin-bottom:4px;color:#d9c9ff}
.ha-label em{font-style:normal;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:3px;padding:0 5px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.h-abil.cool .ha-label em{background:rgba(255,255,255,.06);color:#c2c8cc}
.ha-bar{height:6px;background:rgba(0,0,0,.5);border-radius:2px;overflow:hidden}
.ha-bar i{display:block;height:100%;width:100%;background:#b98cff}
.ha-stars{font-size:10.5px;letter-spacing:.1em;color:#ffcf3a;margin-top:3px;line-height:1}
/* layout editor */
.touch.editing{z-index:45;background:repeating-linear-gradient(45deg,rgba(8,11,14,.78) 0 22px,rgba(14,18,22,.78) 22px 44px)}
.touch.editing .stick{pointer-events:auto;cursor:grab;opacity:var(--ta,.75)}
.touch.editing .abilbtn,.touch.editing .micbtn{cursor:grab;pointer-events:auto;opacity:var(--ta,.75)}
.touch.editing .stick.sel,.touch.editing .firebtn.sel,.touch.editing .abilbtn.sel,.touch.editing .micbtn.sel{outline:3px dashed #f5a53c;outline-offset:6px}
.touch.editing .firebtn{cursor:grab}
.tedit{position:fixed;z-index:46;left:50%;top:calc(10px + var(--safe-t));transform:translateX(-50%);width:min(520px,calc(100% - 24px));display:grid;gap:8px;padding:12px 14px;border-radius:12px;background:rgba(18,22,26,.94);border:1px solid rgba(255,255,255,.16);box-shadow:0 10px 30px rgba(0,0,0,.45);animation:teIn .25s ease-out}
@keyframes teIn{from{opacity:0;transform:translate(-50%,-10px)}}
.tedit .te-hint{margin:0;font-size:12px;color:var(--mute,#aeb5ba);text-align:center}
.tedit .st-row{margin:0}
.tedit .te-btns{display:flex;gap:8px;justify-content:flex-end}
@media (prefers-reduced-motion:reduce){.kf,.dmgnum{animation:none}}

/* =====================================================================
   LANGUAGES — Arabic & Kurdish (Sorani) are right-to-left.
   ===================================================================== */
.langsel{display:flex;justify-content:space-between;align-items:center;gap:10px;font:700 12px "Chakra Petch",sans-serif;letter-spacing:.14em;color:#c8bfb0;margin-top:2px}
.seg button[lang="ar"],.seg button[lang="ckb"]{font-family:"Noto Kufi Arabic","Noto Sans Arabic",Tahoma,sans-serif;letter-spacing:0;font-size:12.5px}
.mn-logo .loc{display:none}
html[dir="rtl"] .mn-logo .lat{display:none}
html[dir="rtl"] .mn-logo .loc{display:block}
html[dir="rtl"] .mn-logo span.loc{font:800 50px/1.15 "Noto Kufi Arabic","Noto Sans Arabic",sans-serif;color:var(--acc)}
html[dir="rtl"] .mn-logo small.loc{font:400 15px "Bungee",Impact,sans-serif;color:#e9dfcf;text-shadow:none;margin-top:6px}
/* Arabic-script font everywhere text is shown (numbers/codes stay Latin) */
html[dir="rtl"] body,html[dir="rtl"] button,html[dir="rtl"] .btn,html[dir="rtl"] .vl,html[dir="rtl"] .card,html[dir="rtl"] .fld,html[dir="rtl"] .tag,
html[dir="rtl"] .modal-card,html[dir="rtl"] .lb-card,html[dir="rtl"] .toast,html[dir="rtl"] .loading,html[dir="rtl"] .rotate,html[dir="rtl"] .stick small,html[dir="rtl"] .firebtn,html[dir="rtl"] .abil,
html[dir="rtl"] .langsel,html[dir="rtl"] .seg button,html[dir="rtl"] .inp:not(.code){font-family:"Noto Kufi Arabic","Noto Sans Arabic",Tahoma,"Chakra Petch",sans-serif}
html[dir="rtl"] *{letter-spacing:0!important}
html[dir="rtl"] .code,html[dir="rtl"] .inp.code{letter-spacing:.2em!important;font-family:"Chakra Petch",monospace}
html[dir="rtl"] .deathcard .big,html[dir="rtl"] .endcard .big,html[dir="rtl"] .pu-toast{font-family:"Noto Kufi Arabic","Noto Sans Arabic",sans-serif;font-weight:800}
html[dir="rtl"] .btn small{font-size:12px}
html[dir="rtl"] .menu-shade{transform:scaleX(-1)}
html[dir="rtl"] .menu-col{padding-left:20px;padding-right:calc(20px + max(var(--safe-r),16px))}
html[dir="rtl"] .lb-share{align-items:flex-start}
/* The in-game HUD keeps the SAME corners in every language. It was laid out so that
   nothing covers anything else, and mirroring it moved the kill feed on top of the
   health bar. Only the words inside each panel follow the language. */
html[dir="rtl"] .killfeed,html[dir="rtl"] body.touchui .killfeed{left:16px;right:auto;align-items:flex-start}
html[dir="rtl"] body.touchui .killfeed{left:auto;right:16px;align-items:flex-end}
html[dir="rtl"] .kf,html[dir="rtl"] body.touchui .killfeed .kf{align-self:inherit}
html[dir="rtl"] .kf svg{transform:scaleX(-1)}        /* the shell still flies from the killer to the victim */
html[dir="rtl"] .debug{direction:ltr}

#pingTxt,#mPing,.hh-num,#clock,#rlTime,.chip-pu em{unicode-bidi:isolate}
html[dir="rtl"] #pingTxt,html[dir="rtl"] .hh-num,html[dir="rtl"] #clock{direction:ltr}

/* =====================================================================
   ONLINE: home panel, pages (profile, leaderboards, friends, ranked,
   modes, rank tiers), overlays (queue, match found, notifications)
   ===================================================================== */
:root{--t-bronze:#c07a3e;--t-silver:#bcc6cf;--t-gold:#f2c14e;--t-plat:#5fd0c4;--t-dia:#86b6ff;--t-cmd:#e5574a;--line:rgba(255,255,255,.13);--mute2:#7f878c}
.btn.ranked{border-color:var(--acc)}
.btn.sm{min-height:34px;padding:6px 12px;font-size:12.5px;width:auto}
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn-row .btn{justify-content:center;font-size:14px;min-width:0}
.btn-row .btn>span{flex:0 1 auto;min-width:0}
.idline{margin:-4px 0 2px;font:600 13px "Chakra Petch",sans-serif;color:#c8bfb0;letter-spacing:.06em}
.idline b{color:#fff;unicode-bidi:isolate}
.ltr{direction:ltr;unicode-bidi:isolate}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--mute)}
/* rank badge (hexagon + chevrons; Legend = Kurdish flag + sun) */
.rbadge{--c:var(--t-gold);position:relative;width:52px;height:58px;flex:none;display:grid;place-items:center}
.rbadge::before{content:"";position:absolute;inset:0;clip-path:polygon(50% 0,100% 24%,100% 76%,50% 100%,0 76%,0 24%);background:linear-gradient(160deg,color-mix(in srgb,var(--c),#fff 30%),var(--c) 45%,color-mix(in srgb,var(--c) 55%,#000))}
.rbadge::after{content:"";position:absolute;inset:5px;clip-path:polygon(50% 0,100% 24%,100% 76%,50% 100%,0 76%,0 24%);background:rgba(10,12,14,.74)}
.rbadge .chev{position:relative;z-index:1;display:grid;gap:2px;justify-items:center}
.rbadge .chev i{width:20px;height:6px;background:var(--c);clip-path:polygon(0 0,50% 60%,100% 0,100% 40%,50% 100%,0 40%)}
.rbadge .q{position:relative;z-index:1;font:700 18px "Chakra Petch",sans-serif;color:var(--c)}
.rbadge.lg{width:92px;height:102px}.rbadge.lg::after{inset:8px}.rbadge.lg .chev i{width:34px;height:10px}.rbadge.lg .q{font-size:30px}
.rbadge.sm{width:28px;height:31px}.rbadge.sm::after{inset:3px}.rbadge.sm .chev i{width:11px;height:4px}.rbadge.sm .q{font-size:11px}
.rbadge.legend::before{background:linear-gradient(180deg,#ed2024 0 33%,#f7f7f2 33% 66%,#278e43 66%)}
.rbadge .sun{position:relative;z-index:1;width:40%;aspect-ratio:1;border-radius:50%;background:#febd11;box-shadow:0 0 0 3px rgba(254,189,17,.35),0 0 16px rgba(254,189,17,.6)}
.rbadge.none{--c:#6b7378}
.t-bronze{--c:var(--t-bronze)}.t-silver{--c:var(--t-silver)}.t-gold{--c:var(--t-gold)}.t-plat{--c:var(--t-plat)}.t-dia{--c:var(--t-dia)}.t-cmd{--c:var(--t-cmd)}.t-legend{--c:#febd11}
.tc-bronze{color:var(--t-bronze)}.tc-silver{color:var(--t-silver)}.tc-gold{color:var(--t-gold)}.tc-plat{color:var(--t-plat)}.tc-dia{color:var(--t-dia)}.tc-cmd{color:var(--t-cmd)}.tc-legend{color:#febd11}.tc-none{color:var(--mute)}
.rpbar{height:7px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}.rpbar i{display:block;height:100%;background:var(--acc)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none;background:#5a6166}
.dot.on{background:var(--ok)}.dot.match,.dot.queue{background:var(--acc)}
.badge-n{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--bad);color:#fff;font:700 11px/18px "Chakra Petch",sans-serif;text-align:center;letter-spacing:0}
.pill{display:inline-flex;align-items:center;gap:6px;font:700 10.5px "Chakra Petch",sans-serif;letter-spacing:.12em;padding:2px 8px;border-radius:99px;border:1px solid currentColor;text-transform:uppercase;white-space:nowrap}
.pill.new{color:var(--ok)}.pill.rk{color:var(--acc)}.pill.wk{color:#febd11}

/* home side panel */
.home-side{position:absolute;top:calc(28px + var(--safe-t));right:calc(24px + var(--safe-r));width:340px;display:flex;flex-direction:column;gap:10px;font-family:"Chakra Petch",sans-serif}
@media (max-width:900px){.home-side{width:300px}}
@media (max-width:760px) and (orientation:portrait){.home-side{position:relative;top:auto;right:auto;width:min(360px,100%);max-height:none;padding:0 20px calc(28px + var(--safe-b)) calc(20px + max(var(--safe-l),16px))}}
.me-card{display:grid;gap:8px;text-align:start;cursor:pointer;color:var(--ink);font:inherit;width:100%}
.me-card:hover{border-color:rgba(255,255,255,.3)}
.me-row{display:flex;gap:12px;align-items:center}
.me-row .who{display:grid;gap:3px;min-width:0;flex:1}
.me-row .nm{font:700 19px "Chakra Petch",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-row .nm small{color:var(--mute2);font-size:15px}
.me-row .rk{font-weight:700;font-size:14px}
.me-row .nx{font-size:12px;color:var(--mute)}
.stat-strip{display:flex;flex-wrap:wrap;gap:4px 16px;color:var(--mute);font:600 12.5px "Chakra Petch",sans-serif}
.stat-strip b{color:var(--ink);font-variant-numeric:tabular-nums}
.fr-mini{display:grid;gap:7px;cursor:pointer}
.fr-mini .row{display:flex;gap:8px;align-items:center;font:600 14px "Chakra Petch",sans-serif;min-width:0}
.fr-mini .row .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-mini .row small{margin-inline-start:auto;color:var(--mute);font-size:12px;white-space:nowrap}
.nav-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
/* Three across on a phone: the icon sits above its label so long words like LEADERBOARDS
   (and their longer Kurdish and Arabic equivalents) get the full width of the button. */
.nav-row .btn{flex-direction:column;justify-content:center;align-items:center;font-size:9px;letter-spacing:0;padding:6px 2px;min-height:54px;gap:3px;min-width:0}
/* Stacked under its icon and free to break across two lines, so LEADERBOARDS and the longer
   Kurdish and Arabic words fit the third of a narrow column they are given. */
.nav-row .btn>span{flex:0 1 auto;min-width:0;font-size:9px;letter-spacing:0;text-align:center;white-space:normal;overflow-wrap:anywhere;line-height:1.05;max-height:2.2em;overflow:hidden}
.season-line{margin:0;font:700 11px "Chakra Petch",sans-serif;letter-spacing:.14em;color:#b8bfc4;text-align:center}
.side-note{margin:0;font:14px/1.45 "Barlow",sans-serif;color:#e8dcc8}

/* pages */
.page-shade{background:rgba(10,12,14,.72)!important}
.page{position:relative;max-width:1100px;margin:0 auto;padding:calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(28px + var(--safe-b)) calc(16px + var(--safe-l));display:grid;gap:14px;font-family:"Chakra Petch",sans-serif}
.page-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.page-head h2{margin:0;font:700 24px "Chakra Petch",sans-serif;letter-spacing:.08em;text-wrap:balance}
.page-head .back{width:auto;min-height:40px;padding:8px 14px;font-size:13px}
.page-body{display:grid;gap:14px;min-width:0}
.cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:820px){.cols{grid-template-columns:1fr}}
.card .lbl,.lbl{margin:0 0 10px;font:700 11px "Chakra Petch",sans-serif;letter-spacing:.18em;color:#b8bfc4}
.sub{margin:0;color:var(--mute);font:15px/1.45 "Barlow",sans-serif}
.rules{margin:0;padding:0;list-style:none;display:grid;gap:8px;font:14.5px/1.45 "Barlow",sans-serif}
.rules li{display:flex;gap:10px;align-items:flex-start}
.rules li::before{content:"";flex:none;width:8px;height:8px;margin-top:7px;background:var(--acc);transform:rotate(45deg)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.spacer{flex:1}
/* profile */
.prof-head{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.prof-head .nm{font:700 30px/1.1 "Chakra Petch",sans-serif;word-break:break-word}
.prof-head .info{display:grid;gap:6px;min-width:0;flex:1 1 220px}
.prof-actions{display:flex;flex-wrap:wrap;gap:8px}
.idbox{display:inline-flex;align-items:center;gap:8px;padding:4px 5px 4px 10px;border-radius:5px;border:1px solid rgba(255,255,255,.24);background:rgba(8,10,12,.6);font:700 15px "Chakra Petch",sans-serif}
.idbox small{color:var(--mute);font-size:10.5px;letter-spacing:.14em}
.idbox button{border:0;background:rgba(255,255,255,.12);border-radius:4px;padding:3px 9px;font:700 11px "Chakra Petch",sans-serif;letter-spacing:.1em;cursor:pointer;color:#fff}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:520px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{padding:12px;border-radius:6px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.stat b{display:block;font:700 24px "Chakra Petch",sans-serif;font-variant-numeric:tabular-nums}
.stat>span{color:var(--mute);font:600 11px "Chakra Petch",sans-serif;letter-spacing:.12em}
.hist{display:grid;gap:6px}
.hist .h{display:grid;grid-template-columns:72px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 10px;border-radius:5px;background:rgba(255,255,255,.035);font:600 13px "Chakra Petch",sans-serif}
.hist .w{color:var(--ok);font-weight:700}.hist .l{color:var(--bad);font-weight:700}.hist .x{color:var(--mute);font-weight:700}
.hist small{color:var(--mute)}
.pos{color:var(--ok)}.neg{color:var(--bad)}
/* leaderboard */
.lb-tabs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.tbl-wrap{overflow-x:auto}
.lbt{width:100%;border-collapse:collapse;font:600 14px "Chakra Petch",sans-serif;min-width:440px}
.lbt th{font:700 10.5px "Chakra Petch",sans-serif;letter-spacing:.14em;color:var(--mute2);text-align:start;padding:6px 10px}
.lbt td{padding:8px 10px;border-top:1px solid rgba(255,255,255,.06);vertical-align:middle}
.lbt .n{text-align:end;font-variant-numeric:tabular-nums}
.lbt tr{cursor:pointer}
.lbt tr:hover td{background:rgba(255,255,255,.04)}
.lbt tr.p1 td:first-child{color:#febd11}.lbt tr.p2 td:first-child{color:var(--t-silver)}.lbt tr.p3 td:first-child{color:var(--t-bronze)}
.lbt tr.me td{background:rgba(245,165,60,.13)}
.lbt .pc{display:flex;align-items:center;gap:8px}
.lbt .pos-c{font:700 16px "Chakra Petch",sans-serif;width:40px}
/* friends + chat */
.fr{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:820px){.fr{grid-template-columns:1fr}}
.addrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.inp.sm{font-size:14px;padding:8px 10px;letter-spacing:.02em}
.flist{display:grid;gap:3px}
.fitem{display:flex;align-items:center;gap:9px;padding:7px;border-radius:6px;cursor:pointer;min-width:0}
.fitem:hover{background:rgba(255,255,255,.05)}
.fitem.sel{background:rgba(245,165,60,.12);outline:1px solid rgba(245,165,60,.4)}
.fitem .who{display:grid;min-width:0;flex:1}
.fitem .who b{font:700 14px "Chakra Petch",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fitem .who small{color:var(--mute);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.req{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px;border-radius:6px;background:rgba(255,255,255,.04)}
.req b{font:700 14px "Chakra Petch",sans-serif}
.chat{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;gap:10px;min-height:460px;max-height:calc(100vh - 140px)}
.chat-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chat-h .who{font:700 16px "Chakra Petch",sans-serif}
.chat-h .tools{margin-inline-start:auto;display:flex;gap:6px}
.msgs{display:flex;flex-direction:column;gap:7px;overflow-y:auto;padding:4px;min-height:200px;user-select:text;-webkit-user-select:text}
.m{max-width:80%;padding:7px 11px;border-radius:10px;font:15px/1.4 "Barlow",sans-serif;background:rgba(255,255,255,.08);align-self:flex-start;word-wrap:break-word;unicode-bidi:plaintext}
.m.me{align-self:flex-end;background:rgba(245,165,60,.2)}
.m small{display:block;color:var(--mute2);font:600 10.5px "Chakra Petch",sans-serif;margin-top:2px}
.inv{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 10px;border-radius:8px;border:1px solid rgba(245,165,60,.45);background:rgba(245,165,60,.08);max-width:88%}
.inv.me{align-self:flex-end}
.inv b{font:700 20px "Chakra Petch",sans-serif;letter-spacing:.18em}
.quick{display:flex;gap:6px;flex-wrap:wrap}
.quick button{border:1px solid rgba(255,255,255,.24);background:transparent;border-radius:99px;padding:4px 12px;font:600 13px "Chakra Petch",sans-serif;color:#fff;cursor:pointer}
.send{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.safe{font:12.5px/1.4 "Barlow",sans-serif;color:var(--mute2);margin:0}
.empty{padding:20px;text-align:center;color:var(--mute);font:15px/1.45 "Barlow",sans-serif}
/* ranked */
.size{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.size button{border:2px solid var(--line);background:rgba(10,12,14,.6);border-radius:8px;padding:12px 8px;display:grid;gap:3px;justify-items:center;cursor:pointer;color:#fff}
.size button[aria-pressed="true"]{border-color:var(--acc);background:rgba(245,165,60,.1)}
.size b{font:400 30px "Bungee",Impact,sans-serif}
.size span{color:var(--mute);font:600 12px "Chakra Petch",sans-serif}
.squad{display:grid;gap:7px}
.slot{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:6px;background:rgba(255,255,255,.04);border:1px solid var(--line);font:700 14px "Chakra Petch",sans-serif;min-width:0}
.slot .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot .r{margin-inline-start:auto;color:var(--mute);font-weight:600;font-size:12px;white-space:nowrap}
.slot.empty{border-style:dashed;color:var(--mute);justify-content:center;background:transparent;cursor:pointer}
.slot.empty:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.search-box{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}
.timer{font:700 26px "Chakra Petch",sans-serif;color:var(--acc);font-variant-numeric:tabular-nums}
/* modes */
.modes{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.mode{display:grid;gap:8px;align-content:start;padding:0;overflow:hidden}
.mode .art{height:132px;position:relative;overflow:hidden}
.mode-pic{display:block;background:#1b2024 center/cover no-repeat}
.mode .art.mode-pic{box-shadow:inset 0 -30px 30px -20px rgba(0,0,0,.55)}
.mode .art svg{position:absolute;inset:0;width:100%;height:100%}
.mode .bd{padding:0 14px 14px;display:grid;gap:6px}
.mode h3{margin:0;font:700 19px "Chakra Petch",sans-serif;letter-spacing:.03em}
.mode p{margin:0;color:var(--mute);font:14px/1.45 "Barlow",sans-serif}
.mode .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mode .meta .pl{color:var(--mute2);font:600 12px "Chakra Petch",sans-serif}
/* tiers */
.tiers{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tier{display:grid;justify-items:center;gap:6px;text-align:center;padding:16px 10px}
.tier b{font:700 16px "Chakra Petch",sans-serif}
.tier>span{color:var(--mute);font:600 12px "Chakra Petch",sans-serif}
.divs{display:flex;gap:6px;justify-content:center}
/* lobby additions */
.seg.modes6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));width:100%}
@media (max-width:1000px){.seg.modes6{grid-template-columns:repeat(4,minmax(0,1fr))}}
.seg.modes6 button{padding:0 0 6px;letter-spacing:.04em;text-transform:uppercase;font-size:10.5px;display:grid;gap:5px;overflow:hidden}
.seg.modes6 button .mode-pic{height:52px;width:100%;border-bottom:1px solid rgba(255,255,255,.15)}
.seg.modes6 button[aria-pressed="true"] .mode-pic{filter:saturate(1.15)}
@media (max-height:500px){.seg.modes6 button .mode-pic{height:38px}}
@media (max-width:520px){.seg.modes6{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lb-kind{font:700 16px "Chakra Petch",sans-serif;letter-spacing:.1em;color:var(--acc)}
.lb-foot{flex-wrap:wrap}

/* overlays */
.queue-bar{position:fixed;top:calc(10px + var(--safe-t));left:50%;transform:translateX(-50%);z-index:25;display:flex;align-items:center;gap:12px;padding:6px 8px 6px 14px;border-radius:8px;background:rgba(14,17,20,.94);border:1px solid rgba(245,165,60,.6);font:700 13px "Chakra Petch",sans-serif;letter-spacing:.08em;box-shadow:0 10px 30px rgba(0,0,0,.4);max-width:calc(100% - 32px)}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(245,165,60,.3);border-top-color:var(--acc);animation:spin 1s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.notifs{position:fixed;top:calc(12px + var(--safe-t));right:calc(12px + var(--safe-r));z-index:65;display:flex;flex-direction:column;gap:8px;width:min(340px,calc(100% - 24px));pointer-events:none}
.ntf{pointer-events:auto;display:grid;gap:8px;padding:10px 12px;border-radius:8px;background:rgba(14,17,20,.95);border:1px solid rgba(255,255,255,.2);font:600 13.5px "Chakra Petch",sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.45);animation:ntfin .25s ease-out}
.ntf .t{display:flex;gap:8px;align-items:flex-start}
.ntf .t span{flex:1;min-width:0;word-wrap:break-word;unicode-bidi:plaintext}
.ntf .acts{display:flex;gap:6px;flex-wrap:wrap}
.ntf .x{border:0;background:transparent;color:var(--mute);cursor:pointer;font-size:16px;line-height:1;padding:0 2px}
@keyframes ntfin{from{opacity:0;transform:translateY(-8px)}}
.found-modal{z-index:62;background:rgba(6,8,10,.72)}
.found-card{border-color:var(--acc);box-shadow:0 0 0 1px rgba(245,165,60,.35),0 24px 60px rgba(0,0,0,.55);gap:12px}
.found-card h3{margin:0;font:400 30px "Bungee",Impact,sans-serif;color:var(--acc);text-align:center}
.vs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center}
.vs .side{display:grid;gap:5px}
.vs .side div{display:flex;gap:8px;align-items:center;font:700 13px "Chakra Petch",sans-serif;padding:5px 8px;border-radius:5px;min-width:0}
.vs .side div span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs .side div.ok{outline:1px solid var(--ok)}
.vs .b div{background:rgba(98,162,255,.14)}.vs .r div{background:rgba(255,98,80,.14)}
.vs .xx{font:400 20px "Bungee",Impact,sans-serif;color:var(--mute)}
.found-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}.found-bar i{display:block;height:100%;background:var(--acc);transition:width .25s linear}
.dlg-list{display:grid;gap:6px;max-height:50vh;overflow-y:auto}
.dlg-list label{display:flex;gap:10px;align-items:center;padding:8px;border-radius:6px;background:rgba(255,255,255,.04);cursor:pointer;font:600 14px "Chakra Petch",sans-serif}
/* ranked result (inside end card) */
.rp-res{display:grid;gap:10px;justify-items:center;margin:4px 0 12px}
.rp-res .rup{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center}
.rp-res .gain{font:700 34px "Chakra Petch",sans-serif;font-variant-numeric:tabular-nums}
.rp-res .parts{display:grid;gap:4px;width:min(360px,100%);font:600 13.5px "Chakra Petch",sans-serif}
.rp-res .parts div{display:flex;justify-content:space-between;gap:10px}
.rp-res .arrow{font:400 22px "Bungee",Impact,sans-serif;color:var(--mute)}
.rp-res .up{font:800 14px "Chakra Petch",sans-serif;letter-spacing:.12em;color:var(--acc)}

/* HUD objectives */
.objline{position:absolute;top:70px;left:50%;transform:translateX(-50%);padding:5px 14px;font-size:13px;font-weight:700;letter-spacing:.06em;white-space:nowrap;display:flex;gap:10px;align-items:center}
.objline .pip{display:inline-flex;gap:3px}.objline .pip i{width:9px;height:9px;border-radius:2px;background:rgba(255,255,255,.2)}
.objline .pip.b i.on{background:var(--blue)}.objline .pip.r i.on{background:var(--red)}
.objline .zb{width:120px;height:8px;border-radius:4px;background:rgba(255,255,255,.15);overflow:hidden;display:flex}
.objline .zb .b{background:var(--blue)}.objline .zb .r{background:var(--red)}
.obj-toast{position:absolute;left:50%;top:19%;transform:translateX(-50%);font-family:"Bungee",Impact,sans-serif;font-size:34px;letter-spacing:.03em;text-shadow:0 3px 0 rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.4);white-space:nowrap;pointer-events:none;color:#fff}
.obj-toast.pop{animation:putoast 2s ease-out forwards}
body.touchui .objline{top:62px;transform:translateX(-50%) scale(.9)}

/* RTL for the online UI */
html[dir="rtl"] .home-side{right:auto;left:calc(24px + var(--safe-l))}
@media (max-width:760px) and (orientation:portrait){html[dir="rtl"] .home-side{left:auto;padding-left:20px;padding-right:calc(20px + max(var(--safe-r),16px))}}
html[dir="rtl"] .page-head .back .arr{display:inline-block;transform:scaleX(-1)}
html[dir="rtl"] .page-head h2,html[dir="rtl"] .found-card h3,html[dir="rtl"] .obj-toast{font-family:"Noto Kufi Arabic","Noto Sans Arabic",sans-serif;font-weight:800}
html[dir="rtl"] .page,html[dir="rtl"] .home-side,html[dir="rtl"] .queue-bar,html[dir="rtl"] .ntf,html[dir="rtl"] .lbt,html[dir="rtl"] .mode h3,html[dir="rtl"] .idline{font-family:"Noto Kufi Arabic","Noto Sans Arabic",Tahoma,"Chakra Petch",sans-serif}
html[dir="rtl"] .notifs{right:auto;left:calc(12px + var(--safe-l))}
html[dir="rtl"] .queue-bar{padding:6px 14px 6px 8px}
html[dir="rtl"] .idbox{padding:4px 10px 4px 5px}

/* =====================================================================
   ECONOMY: wallet, home tank card, garage, shop, chests, quests, daily,
   wheel. Works from 360 px phones to desktop.
   ===================================================================== */
.ic{width:18px;height:18px;flex:none;vertical-align:-3px}
.wallet-bar{position:fixed;top:calc(10px + var(--safe-t));right:calc(12px + var(--safe-r));z-index:22;display:flex;gap:8px}
.wb{display:flex;align-items:center;gap:6px;padding:5px 6px 5px 9px;border-radius:99px;border:1px solid rgba(255,255,255,.22);background:rgba(10,12,14,.82);color:#fff;font:700 14px "Chakra Petch",sans-serif;cursor:pointer;font-variant-numeric:tabular-nums}
.wb i:not(.ic){font-style:normal;width:18px;height:18px;border-radius:50%;background:var(--acc);color:#1b1206;display:grid;place-items:center;font-size:14px;line-height:1}
.wb:hover{border-color:rgba(255,255,255,.45)}
html[dir="rtl"] .wallet-bar{right:auto;left:calc(12px + var(--safe-l))}
.notifs{top:calc(56px + var(--safe-t))}
.home-side{top:calc(58px + var(--safe-t))}
@media (max-width:760px) and (orientation:portrait){.home-side{top:auto}}
#scr-menu .menu-col{padding-top:calc(58px + var(--safe-t))}

/* ============================================================
   MENU LAYOUT — the two columns sit at the edges and the 3D stage
   (your tank and your squad, with the Citadel behind) shows through
   the gap between them. Order down the left: language, logo, the four
   play buttons, room code, then game modes and settings.
   ============================================================ */
@media (orientation:landscape){
  #scr-menu .menu-col{
    width:clamp(178px,31vw,268px);
    gap:6px;
    padding-top:calc(62px + var(--safe-t));
    padding-bottom:calc(12px + var(--safe-b));
    max-height:100vh;overflow:auto;scrollbar-width:none;
  }
}
/* A column flex item shrinks by default. On a short phone that squeezed every button below the
   height of its own text, so the Kurdish and Arabic subtitles spilled out and the buttons ran
   into each other. Nothing in either column may shrink; the column scrolls instead. */
#scr-menu .menu-col>*,.home-side>*{flex-shrink:0}
#scr-menu .menu-col>.btn{height:auto}
#scr-menu .menu-col::-webkit-scrollbar{display:none}
/* The language pills are the first thing in the column, in the markup — using flex `order`
   to move them there made them overlap the logo by a few pixels. */
#scr-menu .langsel{margin:0;justify-content:flex-start;gap:6px;font-size:0;flex-wrap:wrap}
#scr-menu .langsel>span:first-child{display:none}          /* the word "Language" is not needed next to flags */
#scr-menu .langsel .seg{gap:4px}
#scr-menu .mn-logo{font-size:34px;line-height:.9}
#scr-menu .mn-logo.small{font-size:26px}
#scr-menu .kflag{transform:scale(.8);transform-origin:left center;margin:-2px 0}
#scr-menu .menu-col>.btn{min-height:42px;padding:8px 12px}
#scr-menu .menu-col>.btn.primary{font-size:17px}
/* the right column: tank card, the eco buttons, profile row, season banner */
/* The wallet pills are fixed at the top of this side, so the column starts below them. */
@media (orientation:landscape){
  .home-side{width:clamp(156px,27vw,232px);gap:7px;top:calc(46px + var(--safe-t));max-height:calc(100vh - 52px - var(--safe-t));overflow:auto;scrollbar-width:none}
}
/* Portrait stacks the two columns, so the side panel flows under the menu instead of floating. */
@media (orientation:portrait){
  .home-side{position:relative;top:auto;right:auto;left:auto;width:min(360px,100%);max-height:none;overflow:visible;padding:0 20px calc(28px + var(--safe-b)) 20px}
  #scr-menu .menu-col{width:min(360px,100%)}
}
.home-side::-webkit-scrollbar{display:none}
.home-side .season-line{margin-top:2px;padding:7px 10px;border-radius:7px;background:rgba(16,19,21,.86);border:1px solid var(--acc);color:var(--acc);letter-spacing:.1em}
/* short landscape phones: the tagline and the long note are the first things to go */
@media (max-height:430px){
  /* A landscape phone is about 360-390px tall. Everything below has to fit in that without
     scrolling, so the column is squeezed rather than cut off. */
  #scr-menu .mn-tag,#scr-menu .kflag,#scr-menu .menu-links,#scr-menu .idline{display:none}
  #scr-menu .mn-logo{font-size:19px;padding:2px 0 0;line-height:1.05}
  #scr-menu .menu-col{gap:3px;padding-top:calc(52px + var(--safe-t));padding-bottom:calc(6px + var(--safe-b))}
  #scr-menu .menu-col>.btn{min-height:36px;padding:5px 10px}
  #scr-menu .menu-col>.btn>span{font-size:14px}
  #scr-menu .menu-col>.btn small{font-size:9.5px}
  #scr-menu .langsel .seg button{padding:4px 8px;font-size:11px}
  #scr-menu .join .inp,#scr-menu .join>.btn{padding:6px 10px;font-size:14px}
  #scr-menu .btn-row .btn{min-height:32px;padding:5px 6px}
  .home-side{gap:5px;top:calc(42px + var(--safe-t));max-height:calc(100vh - 48px - var(--safe-t))}
  .home-side .me-card,.home-side .fr-mini{display:none}   /* the stage is the point; these move to Profile */
  .ebtn{min-height:44px;font-size:8.5px;padding:5px 1px 4px}
  .ebtn svg{width:16px;height:16px}
  .tank-card{padding:7px 10px;gap:8px}
  /* the Kurdish and Arabic wordmarks set much larger than the Latin one */
  html[dir="rtl"] #scr-menu .mn-logo span.loc{font-size:30px;line-height:1.08}
  html[dir="rtl"] #scr-menu .mn-logo small.loc{font-size:11px;margin-top:2px}
}
/* the logo must never spill out of the left column, or be clipped by its own line box */
#scr-menu .mn-logo{max-width:100%;overflow:visible;padding:2px 0 4px}
/* Only in English — an id-carrying rule here used to out-rank the RTL one and left the Latin
   wordmark showing above the Kurdish and Arabic ones. */
html:not([dir="rtl"]) #scr-menu .mn-logo .lat{display:block;line-height:1.02;white-space:normal}
/* Six eco buttons in a narrow column go three-by-two, so each one keeps its full label
   instead of being cut down to "QUE…". */
.home-side .eco-row{grid-template-columns:1fr;gap:5px}
.home-side .ebtn{flex-direction:row;display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px}
.home-side .ebtn .e3{width:20px;height:20px}
.home-side .ebtn{min-width:0;padding:6px 2px 5px;font-size:9px;letter-spacing:0;min-height:46px;gap:2px}
.home-side .ebtn svg{width:17px;height:17px}
.home-side .ebtn>span,.home-side .ebtn>b{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.05;text-align:center}
/* GAME MODES / SETTINGS: drop the icon before the label is ever cut */
#scr-menu .btn-row .btn{font-size:10.5px;padding:8px 6px;gap:5px}
#scr-menu .btn-row .btn>span{font-size:10px;letter-spacing:.03em}
#scr-menu .btn-row .bi{width:14px;height:14px;flex:0 0 auto}
@media (max-width:460px){#scr-menu .btn-row .bi{display:none}}
.page{padding-top:calc(58px + var(--safe-t))}
.eco-side{display:grid;gap:8px}
.tank-card{display:flex;align-items:center;gap:12px;text-align:start;cursor:pointer;color:var(--ink);font:inherit;width:100%;padding:10px 14px}
.tank-card:hover{border-color:rgba(255,255,255,.3)}
.tank-card .who{display:grid;gap:2px;min-width:0}
.tank-card b{font:700 19px "Chakra Petch",sans-serif}
.tk-img{display:block;width:96px;aspect-ratio:4/3;object-fit:contain;border-radius:6px;background:radial-gradient(ellipse at 50% 70%,rgba(255,255,255,.1),transparent 70%);flex:none;max-width:100%}
.tk-img.big{width:170px}.tk-img.sm{width:64px}
.rare{font:700 12px "Chakra Petch",sans-serif;letter-spacing:.06em}
.r-common{--rc:#b9c3cc}.r-rare{--rc:#5fb0ff}.r-epic{--rc:#c07bff}.r-legendary{--rc:#febd11}
.rare.r-common,.rare.r-rare,.rare.r-epic,.rare.r-legendary{color:var(--rc)}
.eco-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.ebtn{position:relative;display:grid;justify-items:center;gap:3px;padding:8px 2px 7px;border-radius:7px;border:1px solid rgba(255,255,255,.2);background:rgba(20,24,28,.82);color:#fff;cursor:pointer;font:700 10px "Chakra Petch",sans-serif;letter-spacing:.06em;min-height:54px}
.ebtn svg{width:22px;height:22px;color:var(--acc)}
.ebtn:hover{border-color:rgba(255,255,255,.45)}
.ebtn .badge-n{position:absolute;top:-6px;right:-4px}
html[dir="rtl"] .ebtn .badge-n{right:auto;left:-4px}
html[dir="rtl"] .ebtn{font-size:10.5px}
/* garage */
.garage{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:820px){.garage{grid-template-columns:1fr}}
.tk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
@media (max-width:420px){.tk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tk-card{position:relative;display:grid;justify-items:center;gap:4px;padding:10px 8px;border-radius:9px;border:2px solid rgba(255,255,255,.12);background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 16%,transparent),rgba(14,17,20,.9) 60%);color:#fff;cursor:pointer;font:inherit;min-width:0}
.tk-card .tk-img{width:100%}
.tk-card b{font:700 16px "Chakra Petch",sans-serif}
.tk-card.cur{border-color:var(--acc);box-shadow:0 0 0 1px rgba(245,165,60,.35)}
.tk-card.locked .tk-img{filter:grayscale(1) brightness(.55)}
.tk-sel{position:absolute;top:6px;left:6px;font-size:9px}
html[dir="rtl"] .tk-sel{left:auto;right:6px}
.tk-up{position:absolute;top:6px;right:8px;color:var(--ok);font-size:14px;animation:bob 1s ease-in-out infinite}
html[dir="rtl"] .tk-up{right:auto;left:8px}
@keyframes bob{50%{transform:translateY(-3px)}}
.cbar{position:relative;width:100%;height:16px;border-radius:4px;background:rgba(0,0,0,.45);overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.cbar i{position:absolute;inset:0 auto 0 0;background:#3d7fd0}
.cbar.up i{background:var(--ok)}.cbar.max i{background:var(--acc)}
.cbar span{position:relative;display:block;text-align:center;font:700 11px/15px "Chakra Petch",sans-serif;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.6)}
html[dir="rtl"] .cbar i{inset:0 0 0 auto}
.tk-detail{display:grid;gap:12px;position:sticky;top:calc(12px + var(--safe-t))}
@media (max-width:820px){.tk-detail{position:static}}
.tk-hero{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.tk-hero h3{margin:0;font:700 26px "Chakra Petch",sans-serif}
.tk-hero>div{display:grid;gap:3px;min-width:160px;flex:1}
.stbars{display:grid;gap:7px}
.stbar{display:grid;grid-template-columns:100px minmax(0,1fr) auto;gap:10px;align-items:center;font:600 12px "Chakra Petch",sans-serif}
.stbar span{color:var(--mute);letter-spacing:.08em}
.stbar b{font-size:13px;font-variant-numeric:tabular-nums;min-width:64px;text-align:end}
.sb{position:relative;height:9px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden}
.sb i,.sb em{position:absolute;inset:0 auto 0 0;border-radius:5px}
.sb em{background:rgba(143,209,106,.45)}.sb i{background:var(--acc);z-index:1}
html[dir="rtl"] .sb i,html[dir="rtl"] .sb em{inset:0 0 0 auto}
.tk-acts{display:grid;gap:8px}
/* Equipping the tank is the first thing you can do, so it gets room to breathe under the name
   and its button is full width — you should not have to hunt for it. */
.tk-acts.top{margin:10px 0 12px}
.tk-acts.top .btn{width:100%;justify-content:center;font-size:15px;padding:11px 14px}
.tk-acts.top .btn[disabled]{opacity:.65}
.tk-acts.top .rules{text-align:left}
[dir="rtl"] .tk-acts.top .rules{text-align:right}
.tk-acts .btn{justify-content:space-between}
.cost{display:inline-flex;align-items:center;gap:5px}
.btn .cost .ic{width:16px;height:16px}
/* shop */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
@media (max-width:420px){.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.shop-chest,.shop-pack,.shop-coins,.shop-gems{display:grid;justify-items:center;gap:6px;text-align:center;padding:12px 10px;position:relative}
.shop-chest{background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 14%,transparent),rgba(14,17,20,.86) 55%)}
.shop-chest.r-common{--rc:#8d969d}
.shop-chest b,.shop-pack b,.shop-coins b,.shop-gems b{font:700 16px "Chakra Petch",sans-serif}
.shop-gems.popular,.shop-gems.best{border-color:rgba(254,189,17,.5)}.shop-gems.starter{border-color:rgba(143,209,106,.6)}
.shop-gems .pill{position:absolute;top:8px}
.big-ic{display:flex;gap:4px;align-items:center;justify-content:center;height:52px}
.big-ic .ic{width:40px;height:40px}
.price{gap:6px;min-width:96px;justify-content:center}
.price .ic{width:16px;height:16px}
.linkbtn{border:0;background:none;color:var(--mute);font:700 11px "Chakra Petch",sans-serif;letter-spacing:.12em;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:2px}
section{display:grid;gap:8px}
.mychest{display:grid;justify-items:center;gap:6px;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.04);font:700 13px "Chakra Petch",sans-serif}
.chest{display:block}
.chest.sm{width:22px;height:20px}.chest.md{width:56px;height:49px}.chest.lg{width:96px;height:84px}.chest.xl{width:150px;height:131px}
.chest.shake{animation:shake .5s ease-in-out 2}
@keyframes shake{25%{transform:rotate(-6deg) scale(1.05)}75%{transform:rotate(6deg) scale(1.05)}}
/* economy modal */
.eco-modal{z-index:45;background:rgba(6,8,10,.72)}
.eco-card{gap:12px;text-align:center;max-height:calc(100vh - 32px);overflow-y:auto}
.eco-card.wide{width:min(720px,100%)}
.eco-card h4{margin:0;font:400 24px "Bungee",Impact,sans-serif;color:var(--acc)}
html[dir="rtl"] .eco-card h4,html[dir="rtl"] .lvup-t{font-family:"Noto Kufi Arabic","Noto Sans Arabic",sans-serif;font-weight:800}
.eco-card .odds,.eco-card .opened,.eco-card .gotbox,.eco-card .daily,.eco-card .wheelbox,.eco-card .lvup{display:grid;gap:12px;justify-items:center}
.eco-card .btn{width:100%}
.odds-t{min-width:0;width:100%;text-align:start}
.odds-t td{cursor:default}
.odds-t td:first-child{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.odds-t td .ic,.odds-t td .chest{display:inline-block}
.got-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.got{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:8px;background:rgba(255,255,255,.06);font:700 18px "Chakra Petch",sans-serif;animation:pop .35s ease-out both}
.got .ic{width:26px;height:26px}.got .chest.sm{width:34px;height:30px}
.chest-open{animation:chestgo 1s ease-out both}
@keyframes chestgo{0%{transform:scale(.6);opacity:0}30%{transform:scale(1.1);opacity:1}100%{transform:scale(1)}}
.oc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;width:100%}
.oc{position:relative;display:grid;justify-items:center;gap:2px;padding:8px 6px;border-radius:8px;border:2px solid var(--rc);background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 22%,transparent),rgba(14,17,20,.9));animation:pop .4s ease-out both;font:700 13px "Chakra Petch",sans-serif}
.oc .tk-img{width:100%}
.oc .n{font-size:18px;color:var(--rc)}
.oc small{display:flex;align-items:center;gap:4px;color:var(--mute)}
.oc.isnew{box-shadow:0 0 18px color-mix(in srgb,var(--rc) 60%,transparent)}
.newtag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);padding:1px 8px;border-radius:99px;background:var(--ok);color:#10200a;font:800 10px "Chakra Petch",sans-serif;white-space:nowrap}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.lvup-t{font:400 34px "Bungee",Impact,sans-serif;color:var(--ok)}
.lvup b{font:700 22px "Chakra Petch",sans-serif}
/* daily */
.dgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%}
@media (max-width:520px){.dgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dtile{position:relative;display:grid;gap:6px;justify-items:center;padding:10px 6px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);font:700 12px "Chakra Petch",sans-serif}
.dtile.big{grid-column:span 2;background:linear-gradient(180deg,rgba(254,189,17,.14),rgba(255,255,255,.03))}
@media (max-width:520px){.dtile.big{grid-column:span 3}}
.dtile.today{border-color:var(--acc);box-shadow:0 0 0 1px rgba(245,165,60,.4);animation:glow 1.4s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 16px rgba(245,165,60,.55)}}
.dtile.past{opacity:.45}
.dt-items{display:grid;gap:4px;justify-items:center}
.dt-items div{display:flex;align-items:center;gap:5px;font-size:14px}
.dtile .tick{position:absolute;top:4px;right:6px;color:var(--ok);font-style:normal}
html[dir="rtl"] .dtile .tick{right:auto;left:6px}
/* wheel */
.wheel-wrap{position:relative;width:min(300px,78vw);aspect-ratio:1;margin:6px auto 0}
.wheel{width:100%;height:100%;display:block;filter:drop-shadow(0 8px 20px rgba(0,0,0,.5))}
.wheel-ptr{position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-top:24px solid var(--acc);z-index:2;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.wheelbox details{width:100%}
/* quests */
.qlist{display:grid;gap:8px}
.quest{display:flex;align-items:center;gap:10px;padding:10px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.quest.done{border-color:rgba(143,209,106,.5);background:rgba(143,209,106,.08)}
.quest.claimed{opacity:.55}
.quest.bonus{margin-top:8px;border-style:dashed}
.quest .qt{flex:1;display:grid;gap:5px;min-width:0}
.quest .qt b{font:700 14px "Chakra Petch",sans-serif}
.qrw{display:inline-flex;align-items:center;gap:5px;font:700 13px "Chakra Petch",sans-serif;white-space:nowrap}
.qrw b{font-weight:700}
/* match reward block in the end card */
.rew-res{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;align-items:center;margin:0 0 12px;font:700 15px "Chakra Petch",sans-serif}
.rew-res .got{padding:6px 10px;font-size:15px}.rew-res .got .ic{width:20px;height:20px}
.rew-res .qp{flex-basis:100%;font:600 12.5px "Chakra Petch",sans-serif;color:var(--mute)}
.lb-players .tkn{color:var(--mute);font-size:11px;margin-inline-start:6px}
.eco-card{position:relative}
.mclose{position:absolute;top:6px;right:8px;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font:400 22px/1 sans-serif;cursor:pointer;z-index:2;width:34px!important}
html[dir="rtl"] .mclose{right:auto;left:8px}
.slot .tkn{display:block;color:var(--mute);font-size:11px;font-weight:600}
.acc-row .row{gap:10px}
.danger-t{color:#ff9d92!important;border-color:rgba(239,90,74,.5)!important}
.menu-links{margin:2px 0 0;font:600 12px "Chakra Petch",sans-serif}
.menu-links a{color:#9aa2a8}
.acc-row a.linkbtn{font-size:12px}

/* =====================================================================
   3D ICONS + LIVELIER UI (animations, reward moments)
   ===================================================================== */
.i3{display:inline-block;background:center/contain no-repeat;vertical-align:-4px}
.i-coin{background-image:var(--ic-coin)}.i-gem{background-image:var(--ic-gem)}.i-parts{background-image:var(--ic-parts)}
.icons3d .i3{transform:scale(1.25)}
.chest.c3{display:block;background:var(--c) center/contain no-repeat}
.odds-t td .chest.c3{display:inline-block}
.icons3d .chest.sm{width:30px;height:26px}.icons3d .got .chest.sm{width:42px;height:37px}
.icons3d .chest.md{width:70px;height:61px}.icons3d .chest.lg{width:128px;height:112px}.icons3d .chest.xl{width:200px;height:175px}
.shop-chest .chest.lg{filter:drop-shadow(0 8px 10px rgba(0,0,0,.45));transition:transform .25s cubic-bezier(.2,.9,.3,1.3)}
.shop-chest:hover .chest.lg{transform:translateY(-4px) rotate(-3deg) scale(1.05)}
.e3{display:none;width:30px;height:30px;background:center/contain no-repeat;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));transition:transform .2s}
.icons3d .e3{display:block}.icons3d .ebtn>svg{display:none}
.ebtn:hover .e3{transform:translateY(-2px) scale(1.12) rotate(-4deg)}
.ebtn:has(.badge-n:not([hidden])) .e3{animation:iconbob 1.4s ease-in-out infinite}
@keyframes iconbob{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-3px) rotate(-6deg)}60%{transform:translateY(0) rotate(4deg)}}
.badge-n:not([hidden]){animation:badgepulse 1.6s ease-in-out infinite}
@keyframes badgepulse{50%{transform:scale(1.18);box-shadow:0 0 0 4px rgba(239,90,74,.25)}}
/* buttons: press, hover lift and a light sweep on the main ones */
.btn,.ebtn,.wb,.tk-card,.map,.mode{transition:transform .14s cubic-bezier(.2,.9,.3,1.4),border-color .15s,box-shadow .2s,background-color .15s}
.btn:not(:disabled):hover,.ebtn:hover,.tk-card:hover{transform:translateY(-2px)}
.btn:not(:disabled):active,.ebtn:active,.wb:active,.tk-card:active,.map:active{transform:scale(.95)}
.btn.primary:not(:disabled){position:relative;overflow:hidden}
.btn.primary:not(:disabled)::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);animation:sweep 3.6s ease-in-out infinite;pointer-events:none}
@keyframes sweep{0%,62%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.wb.bump{animation:wbump .5s cubic-bezier(.2,.9,.3,1.6)}
@keyframes wbump{35%{transform:scale(1.14);border-color:var(--acc);box-shadow:0 0 14px rgba(245,165,60,.6)}}
.flyer{position:fixed;z-index:60;width:26px;height:26px;margin:-13px 0 0 -13px;pointer-events:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
/* pop-ups spring in; screens and cards slide up in a stagger */
.modal:not([hidden])>.card,.eco-modal:not([hidden])>.card{animation:cardin .32s cubic-bezier(.2,.9,.3,1.25) both}
@keyframes cardin{from{opacity:0;transform:translateY(18px) scale(.94)}}
.modal:not([hidden]){animation:fadein .2s ease-out both}
@keyframes fadein{from{opacity:0}}
.screen:not([hidden]) .menu-col>*,.screen:not([hidden]) .home-side>*{animation:rise .5s cubic-bezier(.2,.8,.3,1) both}
.screen:not([hidden]) .menu-col>*:nth-child(2),.screen:not([hidden]) .home-side>*:nth-child(2){animation-delay:.06s}
.screen:not([hidden]) .menu-col>*:nth-child(3),.screen:not([hidden]) .home-side>*:nth-child(3){animation-delay:.12s}
.screen:not([hidden]) .menu-col>*:nth-child(4),.screen:not([hidden]) .home-side>*:nth-child(4){animation-delay:.18s}
.screen:not([hidden]) .menu-col>*:nth-child(5){animation-delay:.24s}.screen:not([hidden]) .menu-col>*:nth-child(n+6){animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.page:not([hidden]) .card,.page:not([hidden]) .tk-card,.page:not([hidden]) .shop-grid>*{animation:rise .42s cubic-bezier(.2,.8,.3,1) both}
.tk-grid>*:nth-child(2),.shop-grid>*:nth-child(2){animation-delay:.04s!important}.tk-grid>*:nth-child(3),.shop-grid>*:nth-child(3){animation-delay:.08s!important}
.tk-grid>*:nth-child(4),.shop-grid>*:nth-child(4){animation-delay:.12s!important}.tk-grid>*:nth-child(n+5),.shop-grid>*:nth-child(n+5){animation-delay:.16s!important}
.tank-card .tk-img{transition:transform .3s}
.tank-card:hover .tk-img{transform:scale(1.06) rotate(-2deg)}
.tk-card.cur .tk-img{animation:tkfloat 2.4s ease-in-out infinite}
@keyframes tkfloat{50%{transform:translateY(-4px)}}
.cbar i,.sb i,.sb em{transition:width .6s cubic-bezier(.2,.8,.3,1)}
.dtile.today .dt-items{animation:iconbob 1.6s ease-in-out infinite}
.got{animation:gotin .45s cubic-bezier(.2,.9,.3,1.5) both}
.got-list .got:nth-child(2){animation-delay:.1s}.got-list .got:nth-child(3){animation-delay:.2s}.got-list .got:nth-child(n+4){animation-delay:.3s}
@keyframes gotin{from{opacity:0;transform:scale(.4) rotate(-8deg)}60%{transform:scale(1.12)}}
.lvup .tk-img{animation:lvspin .9s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes lvspin{from{transform:scale(.3) rotate(-25deg);opacity:0}}
.lvup-t{animation:gotin .6s .15s cubic-bezier(.2,.9,.3,1.6) both;text-shadow:0 0 18px rgba(143,209,106,.6)}
/* chest opening */
.chest-open{position:relative;display:grid;place-items:center;width:230px;height:200px;margin:0 auto;animation:chestgo .6s ease-out both}
.chest-open .chest{position:relative;z-index:2;filter:drop-shadow(0 12px 14px rgba(0,0,0,.55))}
.chest-open.shaking .chest{animation:cshake .35s ease-in-out 3}
@keyframes cshake{20%{transform:rotate(-7deg) scale(1.03)}50%{transform:rotate(6deg) scale(1.06) translateY(-3px)}80%{transform:rotate(-4deg) scale(1.03)}}
.chest-open.open .chest{background-image:var(--co);animation:copen .5s cubic-bezier(.2,.9,.3,1.6)}
@keyframes copen{0%{transform:scale(1.25);filter:brightness(2.2) drop-shadow(0 0 30px #fff)}100%{transform:scale(1)}}
.chest-open .rays{position:absolute;inset:-40px;z-index:1;opacity:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--rc,#fff) 55%,transparent) 0 9deg,transparent 9deg 24deg);-webkit-mask:radial-gradient(circle,#000 20%,transparent 68%);mask:radial-gradient(circle,#000 20%,transparent 68%)}
.chest-open.open .rays{animation:rays 6s linear infinite,raysin .5s ease-out both}
@keyframes rays{to{transform:rotate(360deg)}}
@keyframes raysin{from{opacity:0;transform:scale(.3)}to{opacity:.9}}
.chest-open.r-common{--rc:#dfe6ea}.chest-open.r-rare{--rc:#6aa6ef}.chest-open.r-epic{--rc:#c07bff}.chest-open.r-legendary{--rc:#febd11}
.chest-open .burst{position:absolute;left:50%;top:45%;z-index:3;pointer-events:none}
.chest-open .burst i{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--rc,#fff);box-shadow:0 0 8px var(--rc,#fff);animation:burst .9s cubic-bezier(.1,.7,.3,1) both}
.chest-open .burst i:nth-child(3n){width:5px;height:12px;border-radius:2px;background:#ffe27a}
@keyframes burst{from{transform:translate(0,0) scale(.3);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(1);opacity:0}}
.opened.pre h4,.opened.pre .oc,.opened.pre .got,.opened.pre>.btn{visibility:hidden;animation:none}
/* wheel */
.wheel-ptr.tk{animation:ptrtick .12s ease-out}
@keyframes ptrtick{50%{transform:translateX(-50%) rotate(-18deg)}}
.wheel-wrap.won .wheel{animation:wheelwin .7s ease-out 2}
@keyframes wheelwin{50%{filter:drop-shadow(0 0 26px rgba(254,189,17,.9)) brightness(1.2)}}
.wheel-wrap::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:4px dotted rgba(254,189,17,.7);animation:rays 20s linear infinite;pointer-events:none}
/* title shimmer */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}}
@media (max-height:540px){
  .tedit{width:min(680px,calc(100% - 24px));grid-template-columns:1fr 1fr;gap:2px 16px;padding:6px 12px;top:calc(6px + var(--safe-t))}
  .tedit .te-hint{grid-column:1/-1;font-size:11px}
  .tedit .st-row{padding:3px 0;font-size:12.5px}
  .tedit .te-btns{grid-column:1/-1}
  .tedit .btn.sm{padding:5px 12px}
}
/* aim-and-release: glowing ball in the aim knob when a shot is armed */
.ready-ball{position:absolute;left:50%;top:50%;width:calc(22px*var(--ts)*var(--sz,1));height:calc(22px*var(--ts)*var(--sz,1));margin:calc(-11px*var(--ts)*var(--sz,1));border-radius:50%;background:#fff;box-shadow:0 0 14px 5px #ffd27a,0 0 0 5px rgba(255,210,122,.45);transform:scale(0);transition:transform .12s cubic-bezier(.2,.9,.3,1.6);pointer-events:none}
.stick.armed .ready-ball{transform:scale(1);animation:rbpulse .7s ease-in-out infinite .12s}
.stick.armed.wait .ready-ball{background:#9aa3a8;box-shadow:0 0 0 5px rgba(160,170,175,.35)}
@keyframes rbpulse{50%{transform:scale(1.3)}}
.stick.armed{border-color:rgba(255,210,122,.8)}
.stick .letgo{position:absolute;left:50%;top:calc(-22px*var(--ts));transform:translateX(-50%);white-space:nowrap;font:700 11px "Chakra Petch",sans-serif;letter-spacing:.12em;color:#ffe2a6;text-shadow:0 1px 3px #000;opacity:0;transition:opacity .12s}
.stick.armed .letgo{opacity:1}
.stick .letgo::after{content:var(--letgo,"LET GO TO FIRE")}

/* Survival upgrade picker */
.upg-pick{position:fixed;left:50%;top:22%;transform:translateX(-50%);z-index:26;display:grid;gap:10px;justify-items:center;padding:14px 16px;border-radius:12px;background:rgba(14,18,22,.92);border:1px solid rgba(255,255,255,.18);box-shadow:0 12px 30px rgba(0,0,0,.5);animation:cardin .3s cubic-bezier(.2,.9,.3,1.25) both;width:min(560px,calc(100% - 24px))}
.upg-pick b{font:700 14px "Chakra Petch",sans-serif;letter-spacing:.08em;color:var(--acc);text-align:center}
.upg-pick>div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.upg-pick button{display:grid;justify-items:center;gap:4px;padding:10px 6px;border-radius:9px;border:2px solid rgba(95,176,255,.6);background:linear-gradient(180deg,#26384a,#161f28);color:#fff;font:700 12px "Chakra Petch",sans-serif;cursor:pointer}
.upg-pick button:hover{border-color:var(--acc);transform:translateY(-2px)}
.upg-pick i{font-style:normal;font-size:26px}
html[dir="rtl"] .upg-pick{font-family:"Noto Kufi Arabic",sans-serif}
.pill.nw{background:#e8412f;color:#fff}

/* ---- spectating bar (out of the match) ---- */
.spec-bar{position:absolute;left:50%;bottom:118px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:14px;z-index:6;pointer-events:auto}
.spec-bar span{display:flex;flex-direction:column;align-items:center;min-width:130px;line-height:1.15}
.spec-bar small{font-size:11px;opacity:.75;text-transform:uppercase;letter-spacing:.06em}
.spec-bar b{font-size:16px}
.spec-bar button{width:44px;height:44px;border-radius:12px;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:18px;cursor:pointer}
.spec-bar button:active{background:rgba(255,255,255,.3)}
/* ---- CTF guide markers ---- */
.guide{position:absolute;left:0;top:0;pointer-events:none;z-index:4}
.guide i{position:absolute;left:0;top:0;width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:16px solid var(--gc);filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
.guide span{position:absolute;left:0;top:-30px;transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:700;color:#fff;background:rgba(0,0,0,.55);border:2px solid var(--gc);padding:1px 7px;border-radius:9px}
.guide.edge i{border-top-width:20px;border-left-width:13px;border-right-width:13px}
.guide.edge span{top:18px}
/* ---- loading screen (everyone loads the map before the match starts) ---- */
#loadScr{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,#23303a,#0d1114 70%);color:#fff;padding:20px}
#loadScr .box{width:min(520px,94vw);text-align:center}
#loadScr .img{width:100%;aspect-ratio:16/7;border-radius:14px;background-size:cover;background-position:center;box-shadow:0 8px 30px rgba(0,0,0,.5);margin-bottom:12px}
#loadScr h2{margin:4px 0 2px;font-size:24px}
#loadScr .sub{opacity:.8;margin:0 0 12px}
#loadScr .bar{height:8px;border-radius:5px;background:rgba(255,255,255,.12);overflow:hidden;margin:10px 0 14px}
#loadScr .bar i{display:block;height:100%;width:0;background:var(--acc);transition:width .3s}
#loadScr ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
#loadScr li{display:flex;justify-content:space-between;gap:8px;background:rgba(255,255,255,.07);border-radius:9px;padding:6px 10px;font-size:13.5px}
#loadScr li .ok{color:var(--ok)} #loadScr li .wt{color:var(--warn)}
#loadScr li.blue{border-left:3px solid var(--blue)} #loadScr li.red{border-left:3px solid var(--red)}

/* ---- garage: one upgrade per stat ---- */
.up-rows{display:flex;flex-direction:column;gap:7px;margin:10px 0 4px}
.up-row{display:grid;grid-template-columns:minmax(76px,auto) 1fr auto;align-items:center;gap:10px;background:rgba(255,255,255,.05);border-radius:10px;padding:7px 8px 7px 10px}
.up-row .nm{display:flex;flex-direction:column;line-height:1.15}
.up-row .nm b{font-size:14px}.up-row .nm small{font-size:11.5px;opacity:.75}
.up-row .pips{display:flex;gap:4px}
.up-row .pips i{flex:1;height:9px;border-radius:3px;background:rgba(255,255,255,.12)}
.up-row .pips i.on{background:var(--acc)}
.up-row .btn{padding:6px 10px;min-height:0;font-size:13px;gap:6px;white-space:nowrap}
.up-row .btn .cost{display:flex;gap:6px;align-items:center}
.up-row .btn[disabled]{opacity:.45}
.up-row.max .btn{background:none;border:1px solid rgba(255,255,255,.18)}

/* ---------- the tank's special power in the garage ---------- */
.ab-card{display:grid;grid-template-columns:auto 1fr;gap:6px 11px;align-items:start;padding:11px 12px;border-radius:10px;margin-top:6px;
  background:linear-gradient(135deg,rgba(150,110,255,.16),rgba(90,60,170,.1));border:1px solid rgba(180,150,255,.3)}
.ab-card.max{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.ab-ic{font-size:30px;line-height:1.1;flex:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.ab-txt{flex:1;min-width:0;display:grid;gap:3px}
.ab-txt b{font-size:14px;letter-spacing:.04em}
.ab-txt small{font-size:12px;color:var(--mute,#aeb5ba);line-height:1.35}
.ab-meta{display:flex;align-items:center;gap:10px;margin-top:2px;flex-wrap:wrap}
.ab-meta em{font-style:normal;font-size:11.5px;color:#d9c9ff;font-variant-numeric:tabular-nums}
.ab-card .pips{display:flex;gap:3px}
.ab-card .pips i{width:10px;height:10px;border-radius:2px;background:rgba(255,255,255,.18)}
.ab-card .pips i.on{background:#b98cff}
.ab-card>.btn{grid-column:1/-1;display:flex;justify-content:center;align-items:center;gap:10px;margin-top:2px}
.lvup-ab{font-size:60px;line-height:1;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}


.rk-modes{display:flex;flex-wrap:wrap;gap:6px}
.rk-mode{font:700 11.5px "Chakra Petch",sans-serif;letter-spacing:.06em;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#dfe3e6}

/* ---------- the draw: two reels land on the mode and the map ---------- */
#revScr{position:fixed;inset:0;z-index:62;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:radial-gradient(ellipse at 50% 35%,#26333d,#0b0e11 72%);color:#fff;padding:18px;transition:opacity .38s}
#revScr.done{opacity:0;pointer-events:none}
.rev-box{display:flex;gap:18px;align-items:flex-start;justify-content:center;flex-wrap:wrap}
.rev-col{display:grid;gap:7px;justify-items:center}
.rev-lbl{font:700 12px "Chakra Petch",sans-serif;letter-spacing:.24em;color:#9fb0bd}
.rev-win{width:min(340px,42vw);height:148px;overflow:hidden;border-radius:14px;position:relative;
  background:#151a1f;border:2px solid rgba(255,255,255,.14);box-shadow:0 10px 34px rgba(0,0,0,.55),inset 0 0 40px rgba(0,0,0,.6)}
.rev-win::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:12px;
  background:linear-gradient(rgba(6,9,11,.85),rgba(6,9,11,0) 26%,rgba(6,9,11,0) 74%,rgba(6,9,11,.85))}
.rev-win.land{border-color:var(--acc,#f5a53c);box-shadow:0 0 0 3px rgba(245,165,60,.28),0 10px 34px rgba(0,0,0,.55)}
.rev-win.land .rev-reel{animation:revLand .3s ease-out}
@keyframes revLand{0%{filter:brightness(2.2)}100%{filter:none}}
.rev-reel{will-change:transform}
.rev-tile{height:148px;display:grid;grid-template-rows:1fr auto;align-items:stretch}
.rev-tile .pic{display:block;background:#1b2024 center/cover no-repeat}
.rev-tile b{font:700 15px "Chakra Petch",sans-serif;letter-spacing:.06em;padding:7px 8px;background:rgba(8,11,14,.72)}
.rev-sub{margin:0;font:700 15px "Chakra Petch",sans-serif;letter-spacing:.1em;color:#e8edf1;min-height:20px;text-align:center}
@media (max-width:720px),(max-height:520px){
  .rev-win{width:min(280px,44vw);height:104px}.rev-tile{height:104px}.rev-tile b{font-size:12.5px;padding:5px 7px}
  .rev-box{gap:10px}#revScr{gap:10px}
}
@media (prefers-reduced-motion:reduce){.rev-reel{transition:none!important}}

/* ---------- a friend's garage on their profile ---------- */
.pg-tanks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:8px}
.pg-tank{display:grid;justify-items:center;gap:2px;padding:9px 8px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid transparent;text-align:center}
.pg-tank.cur{border-color:var(--acc,#f5a53c);background:rgba(245,165,60,.1)}
.pg-tank img{width:78px;height:52px;object-fit:contain}
.pg-tank b{font-size:13.5px}
.pg-tank .lv{font-size:11.5px;color:var(--mute,#aeb5ba)}
.pg-tank .st{font-size:11px;color:#ffcf3a;letter-spacing:.08em}
.pg-tank .ab{font-size:11px;color:#c9a4ff;margin-top:2px}
.fitem .fprof{margin-left:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#dfe3e6;border-radius:8px;width:28px;height:28px;cursor:pointer;flex:none;font-size:13px;line-height:1}
.fitem .fprof:hover{background:rgba(255,255,255,.2)}

/* ---------- voice chat ---------- */
.h-voice{position:absolute;left:16px;bottom:118px;width:216px;padding:8px 10px;display:grid;gap:6px}
.h-voice.live{box-shadow:0 0 0 2px rgba(110,220,140,.5)}
.h-voice .vc-h{display:flex;align-items:center;gap:6px;font-size:11.5px;letter-spacing:.14em}
.h-voice .vc-ic{font-size:13px}
.h-voice .vc-h em{font-style:normal;margin-left:auto;font-size:10px;letter-spacing:.06em;color:var(--mute,#aeb5ba);text-align:right}
.h-voice ul{list-style:none;margin:0;padding:0;display:grid;gap:3px;max-height:124px;overflow:auto}
.h-voice li{display:flex;align-items:center;gap:6px;font-size:12.5px;padding:2px 4px;border-radius:6px}
.h-voice li.talk{background:rgba(110,220,140,.16)}
.h-voice li.none{color:var(--mute,#aeb5ba);font-size:12px;padding:2px 4px}
.h-voice li .lvl{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.25);flex:none}
.h-voice li.talk .lvl{background:#6edc8c;box-shadow:0 0 6px #6edc8c}
.h-voice li.blue .n{color:#bcd6ff}.h-voice li.red .n{color:#ffc2b8}
.h-voice li .n{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h-voice li em{font-style:normal;font-size:10px;color:var(--warn,#f5a53c)}
.h-voice li button{background:none;border:0;cursor:pointer;font-size:12px;opacity:.75;padding:0 2px}
.h-voice li button.on{opacity:1;filter:saturate(0) brightness(1.4)}
body.vc-on .pu-chips{bottom:296px}
body.touchui .h-voice{bottom:auto;top:56px;left:12px;width:176px;transform:scale(.9);transform-origin:top left}
body.touchui.vc-on .pu-chips{bottom:118px}
.micbtn{position:absolute;--sz:1;width:calc(52px*var(--ts)*var(--sz));height:calc(52px*var(--ts)*var(--sz));margin:calc(-26px*var(--ts)*var(--sz)) 0 0 calc(-26px*var(--ts)*var(--sz));border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 45% 35%,#63c98a,#2b7d4c 72%);border:3px solid rgba(255,255,255,.5);box-shadow:0 5px 14px rgba(0,0,0,.4);
  touch-action:none;opacity:min(1,calc(var(--ta,.75) + .2));transition:transform .08s,opacity .15s;pointer-events:auto}
.micbtn span{font-size:calc(20px*var(--ts)*var(--sz));line-height:1;pointer-events:none}
.micbtn.off{background:radial-gradient(circle at 45% 35%,#8a9098,#4a5057 72%);filter:saturate(.4)}
.micbtn.live{transform:scale(1.06);box-shadow:0 0 0 4px rgba(110,220,140,.45),0 5px 14px rgba(0,0,0,.4)}

.secret{font:700 11px "Chakra Petch",sans-serif;letter-spacing:.2em;color:#4e565d;cursor:default;user-select:none;-webkit-user-select:none}
/* the "Secret button" row in Settings: tap it 13 times to reveal the test gem button */
.secretbtn{font:700 12px "Chakra Petch",sans-serif;letter-spacing:.12em;color:#c9ced1;background:none;border:0;padding:2px 0;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;text-align:inherit}
.secretbtn:active{color:#f5a53c;transform:scale(.97)}
.secretbtn.hot{color:#f5a53c}

/* ---------- MVP of each team, on the end screen ---------- */
.mvp-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:6px 0 12px}
.mvp-card{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 11px;border-radius:12px;min-width:210px;text-align:left;
  background:linear-gradient(135deg,rgba(255,210,58,.16),rgba(255,210,58,.05));border:1px solid rgba(255,210,58,.4)}
.mvp-card.blue{border-color:rgba(98,162,255,.5);background:linear-gradient(135deg,rgba(98,162,255,.16),rgba(98,162,255,.04))}
.mvp-card.red{border-color:rgba(255,98,80,.5);background:linear-gradient(135deg,rgba(255,98,80,.16),rgba(255,98,80,.04))}
.mvp-card.me{box-shadow:0 0 0 2px rgba(255,210,58,.55)}
.mvp-card .crown{font-size:24px;color:#ffd23a;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.mvp-card .lbl{display:block;font:700 10.5px "Chakra Petch",sans-serif;letter-spacing:.18em;color:#c8cfd6}
.mvp-card b{display:block;font-size:15px;margin:1px 0}
.mvp-card b em{font-style:normal;font-size:10px;letter-spacing:.12em;color:#ffd23a}
.mvp-card small{font-size:11.5px;color:var(--mute,#aeb5ba)}
.sb-mvp{color:#ffd23a;margin-inline-end:4px}
[dir="rtl"] .mvp-card{text-align:right}

/* ---------- icons on the menu buttons ---------- */
.btn .bi{width:20px;height:20px;flex:none;opacity:.92;margin-inline-end:2px}
.btn.primary .bi,.btn.ranked .bi{opacity:1}
.join .bi{width:18px;height:18px;flex:none;opacity:.6;margin-inline-end:-2px}
.nav-row .btn .bi{width:18px;height:18px}
@media (max-height:560px){.btn .bi{width:17px;height:17px}}

/* ---------- long-term goals ---------- */
.gl-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.gl-count{text-align:center;flex:none}
.gl-count b{display:block;font-size:22px;color:var(--acc,#f5a53c)}
.gl-count span{font-size:11px;letter-spacing:.14em;color:var(--mute,#aeb5ba)}
.gl-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px;align-items:start}
.gl-fam{padding:11px 12px}
.gl-list{display:grid;gap:6px;margin-top:8px}
.goal{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:9px;padding:6px 8px;border-radius:9px;background:rgba(255,255,255,.05)}
.goal.ready{background:rgba(245,165,60,.14);border:1px solid rgba(245,165,60,.4)}
.goal.claimed{opacity:.55}
.goal .gt{min-width:0}
.goal .gt b{display:block;font-size:12.8px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.goal .cbar{height:6px;margin-top:4px}
.goal .qrw{display:flex;gap:7px;align-items:center;font-size:12px;white-space:nowrap}
.goal .btn.sm{padding:3px 9px;font-size:11px}
@media (max-width:560px){.goal{grid-template-columns:1fr auto}.goal .qrw{grid-column:1/-1;justify-content:flex-start}}

/* ---------- first run: name, age group, city ---------- */
.wc-card{max-width:min(520px,94vw);max-height:min(92vh,calc(100vh - 24px));overflow:auto;display:grid;gap:12px}
.wc-steps{display:flex;gap:6px;justify-content:center}
.wc-steps i{width:34px;height:4px;border-radius:2px;background:rgba(255,255,255,.18)}
.wc-steps i.on{background:var(--acc,#f5a53c)}
.wc-step{display:grid;gap:9px}
.wc-step h4{margin:0}
.wc-step .sub{margin:0;font-size:13.5px;color:var(--mute,#aeb5ba);line-height:1.4}
.wc-step .sub.sm{font-size:12px;opacity:.85}
.wc-years{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:6px;max-height:210px;overflow:auto;padding:2px}
.wc-years button{font:700 14px "Chakra Petch",monospace;padding:8px 0;border-radius:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#e8edf1;cursor:pointer}
.wc-years button:hover{background:rgba(255,255,255,.15)}
.wc-years button[aria-pressed="true"],.wc-cities button[aria-pressed="true"]{background:var(--acc,#f5a53c);color:#1a1206;border-color:var(--acc,#f5a53c)}
.wc-cities{display:flex;flex-wrap:wrap;gap:6px}
.wc-cities button{font:600 13px inherit;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#e8edf1;cursor:pointer}
.wc-cities button:hover{background:rgba(255,255,255,.15)}
.wc-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:2px}
.wc-btns .btn{display:block;min-width:92px;text-align:center;white-space:nowrap;padding:13px 14px;line-height:1.25}
.wc-btns .btn.primary{font-size:18px}
@media (max-height:480px){
  .wc-years{max-height:104px}
  .wc-cities{max-height:104px;overflow:auto}
  .wc-card{gap:8px}
  .wc-step .sub{font-size:12.5px}
  .wc-btns .btn{min-width:84px;padding:9px 12px;min-height:40px;font-size:15px}
  .wc-btns .btn.primary{font-size:16px}
}

/* ---- match setup, and the line the lobby shows in its place ---- */
.su-head{text-align:center;margin:0 0 10px}
.su-head h2{font-family:"Bungee",Impact,sans-serif;font-size:22px;margin:0;color:var(--acc)}
.su-head small{display:block;margin-top:2px;font-size:12px;letter-spacing:.06em;color:var(--mute,#aeb5ba)}
.su-foot{justify-content:space-between}
.su-foot .btn{min-width:150px;justify-content:center}
.lb-setup{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;margin:0 0 10px;
  padding:8px 12px;border-radius:8px;background:rgba(255,255,255,.05);font:600 13px "Chakra Petch",sans-serif;letter-spacing:.06em}
.lb-setup b{color:var(--acc);font-size:14px}
.lb-setup span{color:var(--mute,#aeb5ba)}
.lb-setup .btn{margin-inline-start:auto}

/* =====================================================================
   MAIN MENU — laid out around the edges (landscape only)

     ┌ [≡ menu][you · rank]       season        [coins][gems][parts] ┐
     │ squad                                              KURDISH TANK│
     │ (when you have one)                                  ranked     │
     │                        YOUR TANK + SQUAD             create     │
     │                                                      practice   │
     │                                                      join code  │
     └ [shop][quests][goals][friends] · [chat][garage]   [QUICK MATCH] ┘

   The middle is the tanks' and the map's. Everything is anchored to an edge with logical
   properties, so Kurdish and Arabic mirror it without a second set of rules, and every edge
   keeps clear of notches, cut-outs and gesture bars. Sizes follow the screen height, so the same
   rules serve a small phone, a tablet and a desktop.
   ===================================================================== */
#scr-menu{overflow:hidden;touch-action:none;
  --gs:max(12px, var(--safe-l), var(--safe-r));          /* side gutter: whichever side has the notch */
  --gt:max(8px, var(--safe-t)); --gb:max(8px, var(--safe-b));
  --tile:clamp(50px, 12.5vh, 66px); --playw:clamp(168px, 25vw, 256px);
  --bar:clamp(38px, 10vh, 46px)}

/* --- top corner: menu + who you are --- */
#scr-menu .mn-top{position:absolute;top:var(--gt);inset-inline-start:var(--gs);z-index:14;display:flex;align-items:center;gap:8px}
#scr-menu .mn-top .mn-more{position:relative;left:auto;right:auto;top:auto;min-height:var(--bar);padding:0 12px 0 10px}
#scr-menu .mn-me{display:flex;align-items:center;gap:8px;min-height:var(--bar);max-width:clamp(120px, 22vw, 230px);padding:0 12px 0 6px;
  border-radius:8px;background:rgba(16,19,21,.82);border:1px solid rgba(255,255,255,.16);color:var(--ink);cursor:pointer;
  font:700 clamp(11px, 2.9vh, 14px) "Chakra Petch",sans-serif;text-align:start}
#scr-menu .mn-me .rbadge{flex:0 0 auto}
#scr-menu .mn-me .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#scr-menu .mn-me small{display:block;font-size:.78em;color:var(--mute,#aeb5ba);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- currencies: the opposite top corner --- */
body.on-menu #walletBar{top:max(8px, var(--safe-t));left:auto;right:auto;inset-inline-end:max(12px, var(--safe-l), var(--safe-r))}
body.on-menu #walletBar .wb{min-height:clamp(38px, 10vh, 46px)}

/* --- the season, small, top centre --- */
#scr-menu > .season-line{position:absolute;top:calc(var(--gt) + var(--bar) + 6px);left:50%;transform:translateX(-50%);z-index:13;
  max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;padding:4px 10px;border-radius:99px;
  background:rgba(16,19,21,.62);border:1px solid rgba(255,195,90,.35);color:var(--acc);font-size:clamp(9px, 2.4vh, 11px)}

/* --- the drawer opens from the menu button's corner --- */
#scr-menu .mn-drawer{left:auto;right:auto;inset-inline-start:var(--gs);top:calc(var(--gt) + var(--bar) + 8px);
  max-height:calc(100vh - var(--gt) - var(--bar) - 16px - var(--gb));touch-action:pan-y;overscroll-behavior:contain}

/* --- one side: the squad. Nothing there when you are on your own. --- */
#scr-menu .home-side{position:absolute;left:auto;right:auto;inset-inline-start:var(--gs);
  top:calc(var(--gt) + var(--bar) + 12px);bottom:calc(var(--gb) + var(--tile) + 18px);
  width:clamp(168px, 23vw, 240px);max-height:none;overflow:hidden;padding:0;gap:6px;
  display:flex;flex-direction:column;justify-content:flex-start;touch-action:none}
#scr-menu .home-side .squad-bar{padding:6px 8px;gap:3px;background:rgba(16,19,21,.72)}

/* --- along the bottom: the places people go all the time --- */
#scr-menu .mn-rail{position:absolute;bottom:var(--gb);inset-inline-start:var(--gs);z-index:12;
  display:flex;align-items:flex-end;gap:clamp(4px, 1vw, 8px);
  max-width:calc(100vw - var(--playw) - 3 * var(--gs))}
#scr-menu .mn-rail .ebtn{position:relative;flex:0 0 auto;width:var(--tile);height:var(--tile);min-height:0;margin:0;padding:4px 2px 3px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:10px;
  background:rgba(16,19,21,.86);border:1px solid rgba(255,255,255,.2);color:var(--ink);
  font:700 clamp(8.5px, 2.2vh, 11px) "Chakra Petch",sans-serif;letter-spacing:.02em;line-height:1.05;text-align:center}
#scr-menu .mn-rail .ebtn>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#scr-menu .mn-rail .ebtn .e3{width:calc(var(--tile) * .46);height:calc(var(--tile) * .46)}
#scr-menu .mn-rail .ebtn>svg{width:calc(var(--tile) * .4);height:calc(var(--tile) * .4)}
.icons3d #scr-menu .mn-rail .ebtn.svgic>svg{display:block}
/* high priority: brighter; medium (chat, garage): quieter and a touch smaller */
#scr-menu .mn-rail .ebtn:not(.mid){border-color:rgba(255,195,90,.4)}
#scr-menu .mn-rail .ebtn.mid{width:calc(var(--tile) * .92);height:calc(var(--tile) * .92);background:rgba(16,19,21,.7)}
#scr-menu .mn-rail .rail-gap{width:clamp(2px, .8vw, 8px);flex:0 0 auto}
#scr-menu .mn-rail .eco-side{display:flex;align-items:flex-end;gap:inherit}
#scr-menu .mn-rail .eco-side[hidden]{display:none}
#scr-menu .mn-rail #btnGarage{width:calc(var(--tile) * .92);height:calc(var(--tile) * .92);background:rgba(16,19,21,.7)}
#scr-menu .mn-rail .tank-card{height:calc(var(--tile) * .88);width:auto;max-width:170px;padding:3px 10px 3px 4px;gap:6px;border-radius:10px;
  background:rgba(16,19,21,.7)}
#scr-menu .mn-rail .tank-card .tk-img{width:calc(var(--tile) * .8);height:calc(var(--tile) * .6)}
#scr-menu .mn-rail .tank-card b{font-size:clamp(11px, 2.7vh, 14px)}
#scr-menu .mn-rail .tank-card small,#scr-menu .mn-rail .tank-card .lbl{font-size:clamp(8.5px, 2vh, 10.5px)}
@media (max-width:900px){#scr-menu .mn-rail .tank-card{display:none}}
/* notification badges sit on the tile's top corner, as a dot rather than a number */
#scr-menu .mn-rail .badge-n{position:absolute;top:-4px;right:auto;left:auto;inset-inline-end:-4px}

/* --- the other side: where to play; QUICK MATCH in the corner, biggest --- */
#scr-menu .menu-col.mn-play{position:absolute;left:auto;right:auto;inset-inline-end:var(--gs);
  top:calc(var(--gt) + var(--bar) + 10px);bottom:var(--gb);width:var(--playw);padding:0;
  display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(4px, 1.3vh, 9px);overflow:visible}
html[dir="rtl"] #scr-menu .menu-col.mn-play{padding:0}
#scr-menu .mn-play .mn-logo{order:0;margin:0 0 auto;align-self:flex-end;transform-origin:top right}
html[dir="rtl"] #scr-menu .mn-play .mn-logo{align-self:flex-start;transform-origin:top left}
#scr-menu .mn-play .btn{min-height:clamp(34px, 9.4vh, 50px);padding-top:4px;padding-bottom:4px}
#scr-menu .mn-play #btnRanked{order:1}
#scr-menu .mn-play #btnCreate{order:2}
#scr-menu .mn-play #btnPractice{order:3}
#scr-menu .mn-play .join{order:4}
#scr-menu .mn-play .lead-note,#scr-menu .mn-play .err,#scr-menu .mn-play .note{order:5;margin:0}
#scr-menu .mn-play #btnQuick{order:6;min-height:clamp(46px, 14vh, 70px);font-size:clamp(15px, 4vh, 20px)}
/* secondary play options read as secondary */
#scr-menu .mn-play #btnCreate,#scr-menu .mn-play #btnPractice{background:rgba(16,19,21,.66)}
/* on a short phone screen the one-line hints under each button give way to the buttons themselves */
@media (max-height:430px){
  #scr-menu .mn-play .btn:not(#btnQuick) small{display:none}
  #scr-menu .mn-play .mn-logo{transform:scale(.72)}
}
@media (max-height:380px){#scr-menu .mn-play .mn-logo{display:none}}
/* a dot with no number: "something here", when a count would not mean anything */
.badge-n.pip{min-width:0;width:12px;height:12px;padding:0;border:2px solid #101315;font-size:0}
#scr-menu .mn-rail .badge-n{min-width:16px;height:16px;font-size:10px;line-height:16px;box-shadow:0 0 0 2px #101315}
#scr-menu .mn-rail .badge-n.pip{width:12px;height:12px;min-width:0}

/* the rotate card covers everything, including first-run and dialogs */
.rotate{z-index:100}
.rotate small{display:block;margin-top:6px;font:500 13px "Chakra Petch",sans-serif;letter-spacing:.04em;color:var(--mute,#aeb5ba)}
html[dir="rtl"] .rotate{font-family:"Noto Kufi Arabic","Noto Sans Arabic",sans-serif}
.rotate svg{animation:rotHint 2.2s ease-in-out infinite;transform-origin:50% 50%}
@keyframes rotHint{0%,30%{transform:rotate(0)}55%,85%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
body.upright > *:not(.rotate){visibility:hidden}

/* ---- you got the kill: small, top centre, gone in under two seconds ---- */
.kill-ok{position:absolute;left:50%;top:13%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:6px 16px 7px;border-radius:8px;background:rgba(10,12,14,.72);border:1px solid rgba(255,210,122,.55);pointer-events:none;
  font-family:"Chakra Petch",sans-serif;text-shadow:0 1px 2px #000;z-index:12}   /* over the scoreboard, under any modal */
.kill-ok small{font:700 11px "Chakra Petch",sans-serif;letter-spacing:.2em;color:#ffd27a}
.kill-ok b{font:700 20px "Chakra Petch",sans-serif;color:#fff;max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kill-ok.r b{color:#ff8a7a}.kill-ok.b b{color:#8ec0ff}
.kill-ok em{position:absolute;top:-9px;inset-inline-end:-10px;font:800 13px "Chakra Petch",sans-serif;font-style:normal;color:#1b1206;
  background:#ffd27a;border-radius:99px;padding:1px 7px}
html[dir="rtl"] .kill-ok small,html[dir="rtl"] .kill-ok b{font-family:"Noto Kufi Arabic","Noto Sans Arabic",sans-serif;letter-spacing:0}
.kill-ok.go{animation:killIn 1.9s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes killIn{0%{opacity:0;transform:translateX(-50%) scale(.6)}10%{opacity:1;transform:translateX(-50%) scale(1.08)}
  18%{transform:translateX(-50%) scale(1)}82%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-6px)}}
/* ---- region → town picker ---- */
.pp{display:grid;gap:8px}
.pp-regions,.pp-towns{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.pp-r,.pp-t{padding:7px 11px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:var(--ink);
  font:600 13px "Chakra Petch",sans-serif;cursor:pointer}
.pp-r{font-weight:700;letter-spacing:.03em}
.pp-t{font-size:12.5px;padding:6px 10px}
.pp-r[aria-pressed="true"]{border-color:var(--acc);background:rgba(245,165,60,.16);color:var(--acc)}
.pp-t[aria-pressed="true"]{border-color:var(--acc);background:var(--acc);color:#1b1206}
.pp-towns{padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}
.pp-hint{margin:0;text-align:center;font-size:12.5px;color:var(--mute,#aeb5ba)}
html[dir="rtl"] .pp-r,html[dir="rtl"] .pp-t{font-family:"Noto Kufi Arabic","Noto Sans Arabic",sans-serif}
/* ---- world chat ---- */
.wchat{display:flex;flex-direction:column;gap:8px;height:min(70vh,560px);padding:10px}
.wc-list{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;display:flex;flex-direction:column;gap:4px;padding-inline-end:4px}
.wmsg{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:8px;padding:5px 8px;border-radius:7px;background:rgba(255,255,255,.035)}
.wmsg.mine{background:rgba(245,165,60,.09)}
.wm-who{display:inline-flex;align-items:center;gap:5px;padding:0;border:0;background:none;color:var(--acc);font:700 13px "Chakra Petch",sans-serif;cursor:pointer;max-width:26vw}
.wm-who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wm-t{font-size:14px;line-height:1.35;overflow-wrap:anywhere;min-width:0}
.wmsg time{font-size:10.5px;color:var(--mute,#aeb5ba);font-variant-numeric:tabular-nums}
.wc-send{display:flex;gap:6px}
.wc-send .inp{flex:1;min-width:0}
.wc-note{margin:0;font-size:11.5px;color:var(--mute,#aeb5ba);text-align:center}
.dlg-acts{display:grid;gap:6px;margin-top:8px}
.dlg-acts .btn{justify-content:center}
html[dir="rtl"] .wm-who{font-family:"Noto Kufi Arabic","Noto Sans Arabic",sans-serif}

.wc-send .inp{font:500 15px "Barlow",system-ui,sans-serif;letter-spacing:0;text-transform:none;text-align:start}
html[dir="rtl"] .wc-send .inp{font-family:"Noto Kufi Arabic","Noto Sans Arabic",sans-serif}
/* the room-code box in the play column is narrow on a phone: tighter spacing so "ROOM CODE" is never cut */
#scr-menu .mn-play .join .inp.code{letter-spacing:.08em;min-width:0;text-overflow:clip}
#scr-menu .mn-play .join .inp.code::placeholder{letter-spacing:.04em;font-size:.86em}
html[dir="rtl"] #scr-menu .mn-play .join .inp.code{letter-spacing:.08em!important}
@media (max-height:430px){
  /* on a phone the JOIN button already says what the box is for — the arrow gives its room to the code */
  #scr-menu .mn-play .join{grid-template-columns:minmax(0,1fr) auto;gap:6px}
  #scr-menu .mn-play .join>.bi{display:none}
}

/* Voice chat switched off for this release (FEATURES.VOICE_ENABLED): every piece of its UI is gone —
   not greyed out, not "unavailable", and no gap where it was. */
body.no-voice .vc-feat{display:none!important}

/* =====================================================================
   MOTION SYSTEM (see js/ui/motion.js) — one set of timings for the menus:
   fast 80–150 ms (a press), normal 180–300 ms (panels, cards, counters),
   reward 300–800 ms (a pay-out), big 1–2 s (a chest). Nothing here loops
   while the player is not doing anything.
   ===================================================================== */
:root{--m-fast:.12s;--m-normal:.24s;--m-reward:.6s;
  --m-out:cubic-bezier(.2,.8,.3,1);--m-back:cubic-bezier(.34,1.56,.64,1)}

/* ---- things that used to move on their own forever: now once, when they appear ---- */
.badge-n:not([hidden]){animation:badgein .45s var(--m-back) 1}
@keyframes badgein{from{transform:scale(0)}60%{transform:scale(1.25)}}
.ebtn:has(.badge-n:not([hidden])) .e3{animation:iconbob .9s ease-in-out 1}
.btn.primary:not(:disabled)::after{animation:sweep 1.4s ease-in-out .35s 1}
.tk-up{animation:bob 1s ease-in-out 2}
.tk-card.cur .tk-img{animation:tkfloat 1.2s ease-in-out 1}
.dtile.today{animation:glow 1.4s ease-in-out 2}
.dtile.today .dt-items{animation:iconbob 1s ease-in-out 2}

/* ---- presses: down fast, back with a small settle; important buttons settle a touch more ---- */
.btn,.ebtn,.wb,.tk-card,.map,.mode,.pp-r,.pp-t,.sq-row,.mychest .btn{transition:transform var(--m-fast) cubic-bezier(.2,.9,.3,1.4),border-color .15s,box-shadow .2s,background-color .15s,opacity .15s}
.btn:not(:disabled):active,.ebtn:active,.wb:active,.tk-card:active,.map:active,.mode:active,.pp-r:active,.pp-t:active,.sq-row:active{transform:scale(.94);transition-duration:.08s}
.btn.primary:not(:disabled):active,#btnQuick:active{transform:scale(.95) translateY(1px)}
/* waiting for the server: visibly busy, and cannot be pressed again */
.btn.pending{pointer-events:none;opacity:.72}
.btn.pending::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite;flex:none;margin-inline-end:6px}
/* can't afford it: still pressable (so it can say why), but plainly not ready */
.btn.cant{opacity:.62;filter:saturate(.6)}

/* ---- the shared one-shot effects ---- */
.m-pop{animation:mPop .38s var(--m-back)}
@keyframes mPop{0%{transform:scale(1)}40%{transform:scale(1.16)}100%{transform:scale(1)}}
.m-shake{animation:mShake .32s ease-in-out}
@keyframes mShake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.m-pulse{animation:mPulse .7s ease-out}
@keyframes mPulse{0%{box-shadow:0 0 0 0 rgba(245,165,60,.65)}100%{box-shadow:0 0 0 14px rgba(245,165,60,0)}}
.m-enter{animation:rise var(--m-normal) var(--m-out) both}

/* ---- screens and panels arrive rather than appear ---- */
#scr-page:not([hidden]) .page,#scr-setup:not([hidden])>*,#scr-lobby:not([hidden])>*{animation:scrIn .22s var(--m-out) both}
@keyframes scrIn{from{opacity:0;transform:translateY(10px)}}
#scr-page:not([hidden]) .page>*:nth-child(2){animation-delay:.04s}#scr-page:not([hidden]) .page>*:nth-child(3){animation-delay:.08s}
.mn-drawer:not([hidden]){animation:drawerIn .2s var(--m-out) both;transform-origin:top left}
html[dir="rtl"] .mn-drawer:not([hidden]){transform-origin:top right}
@keyframes drawerIn{from{opacity:0;transform:translateY(-6px) scale(.96)}}
.page .card,.page .quest,.page .goal{animation:rise .3s var(--m-out) both}
.page .qlist>*:nth-child(2),.page .gl-list>*:nth-child(2){animation-delay:.03s}
.page .qlist>*:nth-child(3),.page .gl-list>*:nth-child(3){animation-delay:.06s}
.page .qlist>*:nth-child(n+4),.page .gl-list>*:nth-child(n+4){animation-delay:.09s}

/* ---- the wallet pills: a gain bumps, a spend dips red, "not enough" shakes ---- */
.wb{position:relative}
.wb.spend{animation:wbSpend .45s ease-out}
@keyframes wbSpend{30%{transform:scale(.92);border-color:#ef5a4a;box-shadow:0 0 12px rgba(239,90,74,.55)}}
.wb.poor{animation:mShake .32s ease-in-out,wbPoor .6s ease-out}
@keyframes wbPoor{0%,60%{border-color:#ef5a4a;background:rgba(80,18,14,.9)}}
.wb-float{position:absolute;top:100%;inset-inline-start:50%;margin-top:2px;font:700 13px "Chakra Petch",sans-serif;pointer-events:none;white-space:nowrap;
  animation:wbFloat .85s var(--m-out) both;text-shadow:0 1px 2px #000}
.wb-float.neg{color:#ff8a7a}
@keyframes wbFloat{from{opacity:0;transform:translate(-50%,-6px)}20%{opacity:1}to{opacity:0;transform:translate(-50%,14px)}}

/* ---- "quest complete" / "achievement completed": a small notice that drops in and leaves ---- */
.m-notice{position:fixed;left:50%;top:calc(58px + var(--safe-t));z-index:40;transform:translateX(-50%);display:flex;align-items:center;gap:10px;
  padding:8px 16px 8px 10px;border-radius:12px;background:rgba(12,14,16,.92);border:1px solid rgba(245,165,60,.6);pointer-events:none;
  font-family:"Chakra Petch",sans-serif;box-shadow:0 8px 20px rgba(0,0,0,.45);animation:noticeIn 2.6s var(--m-out) both;max-width:min(78vw,460px)}
.m-notice .n-ic{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgba(245,165,60,.16);font-size:18px;flex:none}
.m-notice small{display:block;font:700 10.5px "Chakra Petch",sans-serif;letter-spacing:.16em;color:var(--acc)}
.m-notice b{display:block;font:700 14px "Chakra Petch",sans-serif;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-notice.goal{border-color:#febd11;background:linear-gradient(180deg,rgba(60,44,8,.95),rgba(14,12,8,.95))}
.m-notice.goal .n-ic{background:rgba(254,189,17,.22)}
@keyframes noticeIn{0%{opacity:0;transform:translate(-50%,-14px) scale(.96)}10%{opacity:1;transform:translate(-50%,0) scale(1)}85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-10px)}}

/* ---- quests and goals: newly finished, and being claimed ---- */
.quest,.goal{position:relative}
.quest.just,.goal.just{animation:justDone 1.2s var(--m-out) both}
@keyframes justDone{0%{box-shadow:0 0 0 0 rgba(245,165,60,0)}25%{box-shadow:0 0 0 3px rgba(245,165,60,.8),0 0 18px rgba(245,165,60,.45)}100%{box-shadow:0 0 0 1px rgba(245,165,60,.45)}}
.goal.just{animation-name:justGoal}
@keyframes justGoal{0%{box-shadow:0 0 0 0 rgba(254,189,17,0)}25%{box-shadow:0 0 0 3px rgba(254,189,17,.9),0 0 24px rgba(254,189,17,.5)}100%{box-shadow:0 0 0 1px rgba(254,189,17,.5)}}
.done-tag{position:absolute;top:-8px;inset-inline-start:10px;padding:1px 8px;border-radius:6px;background:var(--acc);color:#1b1206;font:700 10px/16px "Chakra Petch",sans-serif;letter-spacing:.12em;
  animation:tagIn .45s var(--m-back) .15s both}
.goal .done-tag{background:#febd11}
.done-tag::before{content:"✓ "}
@keyframes tagIn{from{opacity:0;transform:scale(.4) translateY(4px)}}
.qrw.m-pop{animation:qrwPop .5s var(--m-back)}
@keyframes qrwPop{0%{transform:scale(1)}35%{transform:scale(1.3)}100%{transform:scale(1)}}
.quest.claiming,.goal.claiming{animation:claimOut .45s var(--m-out) both}
@keyframes claimOut{0%{filter:none}40%{filter:brightness(1.35)}100%{opacity:.6;filter:saturate(.3)}}

/* ---- garage: an upgrade lands ---- */
.pips i.fresh{animation:pipIn .45s var(--m-back) both}
@keyframes pipIn{from{transform:scale(0);background:#fff}60%{transform:scale(1.5)}}
.sb i{transition:width .5s var(--m-out)}
.tk-img.hop{animation:tankHop .55s var(--m-back)}
@keyframes tankHop{0%{transform:translateY(0)}35%{transform:translateY(-10px) scale(1.04)}70%{transform:translateY(0) scale(.99)}100%{transform:none}}
.lv-pop{position:absolute;inset-inline-end:10px;top:6px;padding:2px 9px;border-radius:8px;background:var(--ok,#6fd46a);color:#08240a;font:700 13px "Chakra Petch",sans-serif;
  pointer-events:none;animation:lvPop 1.2s var(--m-out) both}
@keyframes lvPop{0%{opacity:0;transform:scale(.5) translateY(6px)}20%{opacity:1;transform:scale(1.15)}35%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
.tk-detail{position:relative}
.bought{animation:mPop .38s var(--m-back),mPulse .7s ease-out}

/* ---- the chest: enter, anticipation, open, reveal one by one, collect ---- */
.chest-open{animation:chestIn .45s var(--m-back) both}
@keyframes chestIn{from{opacity:0;transform:scale(.55)}}
.chest-open.shake1 .chest{animation:cshake .32s ease-in-out 1}
.chest-open.shake2 .chest{animation:cshake2 .38s ease-in-out 1}
.chest-open.shake3 .chest{animation:cshake2 .3s ease-in-out 2}
@keyframes cshake2{20%{transform:rotate(-10deg) scale(1.06)}50%{transform:rotate(9deg) scale(1.12) translateY(-6px)}80%{transform:rotate(-6deg) scale(1.06)}}
.chest-open.charge::before{content:"";position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--rc) 60%,transparent),transparent 70%);
  animation:charge .9s ease-in both;z-index:1}
@keyframes charge{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1.2)}}
.chest-flash{position:absolute;inset:-20%;border-radius:50%;background:radial-gradient(circle,#fff 0,color-mix(in srgb,var(--rc) 70%,transparent) 30%,transparent 65%);
  z-index:4;pointer-events:none;animation:cflash .5s ease-out both}
@keyframes cflash{0%{opacity:0;transform:scale(.3)}25%{opacity:1}100%{opacity:0;transform:scale(1.4)}}
.opened .rv{visibility:hidden}
.opened .rv.in{visibility:visible;animation:rvIn .42s var(--m-back) both}
.opened .rv.in.t-better{animation:rvIn .5s var(--m-back) both,mPulse .8s ease-out .1s}
.opened .rv.in.t-top{animation:rvTop .7s var(--m-back) both}
@keyframes rvIn{from{opacity:0;transform:scale(.4) translateY(10px)}}
@keyframes rvTop{0%{opacity:0;transform:scale(.3) rotate(-6deg)}55%{opacity:1;transform:scale(1.18) rotate(2deg);box-shadow:0 0 30px color-mix(in srgb,var(--rc,#febd11) 70%,transparent)}100%{transform:none}}
.opened .got b{display:inline-block;min-width:3ch;font-variant-numeric:tabular-nums}
.opened .skip-hint{font-size:11.5px;color:var(--mute);letter-spacing:.08em;min-height:1em}
.opened.done .skip-hint{visibility:hidden}
.opened .btn[data-close],.opened #chestCollect{transition:opacity .2s}
.opened:not(.done) #chestCollect{opacity:0;pointer-events:none}
/* low quality / reduce motion: keep the sequence, drop the glow and most of the sparks */
body.low-motion .chest-open .rays,body.low-motion .chest-open.charge::before{display:none}
body.low-motion .chest-open .burst i:nth-child(n+9){display:none}
body.low-motion .opened .rv.in.t-better{animation:rvIn .42s var(--m-back) both}
@media (prefers-reduced-motion:reduce){
  .page .card,.page .quest,.page .goal,#scr-page:not([hidden]) .page{animation:none}
  .chest-open .rays{display:none}
}
/* the chest window on a short landscape phone: the chest on one side, what came out of it on the
   other, and COLLECT always on screen — instead of a tall column that runs off the bottom */
@media (max-height:500px) and (orientation:landscape){
  .eco-card.wide:has(.opened #chestOpen){max-height:calc(100vh - 20px);padding:10px 14px}
  .opened:has(#chestOpen){grid-template-columns:minmax(150px,34%) 1fr;grid-template-areas:"chest head" "chest chips" "chest cards" "chest hint" "chest btn";
    align-items:center;column-gap:14px;row-gap:6px;justify-items:stretch}
  .opened:has(#chestOpen) #chestOpen{grid-area:chest;width:100%;height:clamp(130px,52vh,190px)}
  .opened:has(#chestOpen) #chestOpen .chest.xl{transform:scale(.8)}
  .opened:has(#chestOpen)>h4{grid-area:head;margin:0;text-align:center}
  .opened:has(#chestOpen)>.row{grid-area:chips}
  .opened:has(#chestOpen)>.oc-grid{grid-area:cards;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:6px}
  .opened:has(#chestOpen) .oc{padding:4px}
  .opened:has(#chestOpen) .oc .tk-img{max-height:38px;object-fit:contain}
  .opened:has(#chestOpen) .oc b{font-size:11px}
  .opened:has(#chestOpen)>.skip-hint{grid-area:hint;margin:0;text-align:center}
  .opened:has(#chestOpen)>#chestCollect{grid-area:btn;min-height:38px}
  .opened .got{padding:6px 10px;font-size:15px}
}

/* ---- objective markers (hud.guides): an edge arrow with icon, name and distance when the objective is
   off screen; a small quiet marker over it when it is on screen ---- */
.guide{transition:opacity .2s}
.guide .g-lb{position:absolute;left:0;top:-30px;transform:translateX(-50%);display:flex;align-items:center;gap:5px;white-space:nowrap;
  font:700 12px "Chakra Petch",sans-serif;color:#fff;background:rgba(0,0,0,.6);border:2px solid var(--gc);padding:1px 8px 1px 5px;border-radius:9px;
  transition:transform .2s var(--m-out),opacity .2s}
.guide .g-lb .g-tx{position:static;transform:none;background:none;border:0;padding:0;top:auto;left:auto;font:inherit;letter-spacing:.04em}
.guide .g-ic{display:grid;place-items:center;width:15px;height:15px;color:var(--gc)}
.guide .g-ic svg{width:15px;height:15px}
.guide .g-d{font-style:normal;color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums}
/* on screen: just the icon in a small disc over the objective, and a short tick pointing down at it */
.guide.on .g-lb{padding:2px;border-radius:50%;top:-34px;opacity:.9}
.guide.on .g-tx,.guide.on .g-d{display:none}
.guide.on .g-ic,.guide.on .g-ic svg{width:17px;height:17px}
.guide.on i{border-top-width:9px;border-left-width:6px;border-right-width:6px;opacity:.8}
/* off screen: the label sits on the inner side of the arrow, so it never runs off the edge */
.guide.edge .g-lb{top:20px}
.guide.edge[data-side="t"] .g-lb{top:20px}
.guide.edge[data-side="b"] .g-lb{top:-38px}
.guide.edge[data-side="l"] .g-lb{top:-10px;transform:translateX(18px)}
.guide.edge[data-side="r"] .g-lb{top:-10px;transform:translateX(calc(-100% - 18px))}
/* Hot Potato in YOUR hands: no arrow at yourself — a clear warning instead */
.potato-warn{position:absolute;left:50%;top:calc(96px + var(--safe-t));transform:translateX(-50%);z-index:6;pointer-events:none;
  padding:6px 16px;border-radius:10px;background:rgba(70,12,6,.88);border:2px solid #ff5a3c;color:#fff;font:700 14px "Chakra Petch",sans-serif;letter-spacing:.08em;
  box-shadow:0 0 16px rgba(255,90,60,.45);white-space:nowrap}
.potato-warn.pop{animation:mPop .38s var(--m-back)}
.potato-warn::before{content:"💣 "}

/* Developer tools (debug panel, network test tools, the test gem button) exist only on a development
   server (TEST_CHEATS=1 or DEV_TOOLS=1): a released game never shows them. */
body.no-dev .dev-feat{display:none!important}
.help-row .row{flex-wrap:wrap;justify-content:flex-end;gap:8px;align-items:center}
.help-mail{font-size:12px;direction:ltr;unicode-bidi:embed}

/* ---- can't reach the server: a proper screen, never a blank page ---- */
.conn-gate{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#1c2226,#0b0e10 70%);
  padding:calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));animation:fadein .25s ease-out both}
.cg-card{display:grid;justify-items:center;gap:10px;max-width:420px;text-align:center;font-family:"Chakra Petch",sans-serif}
.cg-logo img{width:72px;height:72px;border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.cg-card b{font:700 20px "Chakra Petch",sans-serif;letter-spacing:.06em;color:#fff}
.cg-card p{margin:0;color:var(--mute);font-size:14px;line-height:1.5}
.cg-spin{width:26px;height:26px;border-radius:50%;border:3px solid rgba(245,165,60,.25);border-top-color:var(--acc);animation:spin .9s linear infinite}
.conn-gate[data-state="fail"] .cg-spin{display:none}
.cg-card .row{gap:10px;flex-wrap:wrap;justify-content:center}