/* ===== TANK PARTY - UI / Menus ===== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Lilita+One&family=Nunito:wght@700;800;900&display=swap');

:root{

  --bg:#1a1a1a;

  --bg2:#222;

  --card:#2b2b2b;

  --line:#3a3a3a;

  --fg:#ffffff;

  --muted:#9a9a9a;

  --accent:#ffffff;

  --accent2:#ff5b3b;

  --ok:#3ad17a;

  --danger:#ff3b3b;

  --hp-enemy:#ff3b3b;

  --hp-ally:#3bbeff;

  /* UI scale follows the viewport instead of being pinned to 1.
     Everything sized with calc(var(--ui-scale) * N) now shrinks on a small
     screen and grows on a large one, with no per-rule editing. The reference
     is 1440px: a 4K display is capped at 1.25 so it does not become comically
     large, and a phone still gets 0.70. */
  --ui-scale: clamp(0.70, calc(100vw / 1440), 1.25);

}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--fg);

  font-family:'Fredoka','Nunito','Segoe UI',Tahoma,sans-serif;user-select:none}



#game-root{position:fixed;inset:0;z-index:0}

#game-root canvas{display:block}

body.night #game-root{filter:sepia(0.4) brightness(0.75) hue-rotate(-8deg);transition:filter .8s ease}

body.night #ui-layer{filter:sepia(0.4) brightness(0.75) hue-rotate(-8deg);transition:filter .8s ease}

body.night.strong #game-root{filter:sepia(0.55) brightness(0.35) hue-rotate(-12deg) saturate(1.8);transition:filter .8s ease}

body.night.strong #ui-layer{filter:sepia(0.55) brightness(0.35) hue-rotate(-12deg) saturate(1.8);transition:filter .8s ease}

/* ---------------------------------------------------------------------------
   #ui-layer MUST NEVER BE A CLICK SINK.

   #ui-layer is position:fixed; inset:0 with z-index:10, so it covers the whole
   viewport and paints in the positive z-index layer -- above every element that
   does not set a z-index of its own.

   Only FOUR menus are actually its children (menu-main, menu-play-select,
   menu-battle-select, menu-gamemode-select). The other 22 screens --
   menu-settings, menu-store, menu-collections, menu-missions, menu-clans,
   menu-codes, menu-preview, menu-multiplayer, ... -- are direct children of
   <body> with z-index:auto, so they paint BELOW this box.

   With pointer-events:auto here, that transparent box swallowed every click
   aimed at those 22 menus. The menu was fully visible and completely dead:
   "I open Settings and none of the buttons work." Nothing else was wrong, and
   the three menus that carry an explicit z-index above 10 (menu-tank 50,
   esc-menu 100, rendering-tips 999) kept working, which is why it looked
   intermittent rather than total.

   Every interactive thing this layer owns is a child, and the rule below opts
   children back in explicitly, so the box itself never needs to be hit-testable.
   Gameplay already relied on exactly this (see .game-active).
--------------------------------------------------------------------------- */
#ui-layer{position:fixed;inset:0;z-index:10;pointer-events:none}

/* Gameplay: same rule, kept explicit because it is load-bearing. */
#ui-layer.game-active{pointer-events:none}

/* Children opt back in -- this is what makes the menus and the fullscreen
   prompt clickable without the full-viewport wrapper intercepting anything. */
#ui-layer > *{pointer-events:auto}



.hidden{display:none !important}



/* ---------- Menus ---------- */

/* ---------------------------------------------------------------------------
   THE SCROLLING STRIPES

   Measured cost of a single menu switch on a software-rendered machine:

       stripes animated      avg 33.2 ms to paint   (max 53.3)
       stripes not animated  avg 27.3 ms to paint   (max 38.5)

   So this one decorative animation is ~18% of the cost of navigating the menu,
   plus a permanent per-frame repaint while sitting on any menu -- `background-
   position` is a paint-only property, so the compositor cannot animate it and
   the whole full-viewport repeating gradient is re-rasterised every frame.

   That is a real saving and it is NOT taken here. An earlier attempt moved the
   stripes to a `::before` layer animated with `transform` (which the
   compositor CAN animate) and lifted the menu content above it using
   `.menu > *{position:relative}`. That rule matched every direct child of every
   menu panel and overrode the `position:absolute`/`fixed` that the buttons and
   close controls are authored with, and the whole menu stopped responding to
   clicks.

   The correct way to take this saving, if it is ever wanted, is
   `isolation:isolate` on `.menu` plus `z-index:-1` on the pseudo-element: the
   stripes then paint behind the content without any rule that touches the
   children's own `position`. Until that is done and verified in a real browser,
   this stays exactly as it was.
   --------------------------------------------------------------------------- */
@keyframes stripeMove{0%{background-position:0 0}100%{background-position:40px 40px}}
@media (prefers-reduced-motion: reduce){
  @keyframes stripeMove{0%{background-position:0 0}100%{background-position:0 0}}
}

@keyframes menuReveal{
  from{opacity:0;transform:scale(0.97)} to{opacity:1;transform:scale(1)}
}
@keyframes menuOverlayFlash{
  0%{opacity:0.6} 100%{opacity:0}
}

@keyframes cinematicFadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes cinematicFadeOut{
  from{opacity:1}
  to{opacity:0}
}
@keyframes cinematicMenuReveal{
  0%{opacity:0;transform:translateY(12px);filter:blur(4px)}
  100%{opacity:1;transform:translateY(0);filter:blur(0)}
}

#menu-transition-overlay{
  position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:#000;opacity:0;
}
#menu-transition-overlay.flash{
  animation:menuOverlayFlash 0.35s ease-out forwards;
}
#menu-transition-overlay.cinematic-fade-in{
  animation:cinematicFadeIn 0.45s cubic-bezier(0.34,0,0.3,1) forwards;
}
#menu-transition-overlay.cinematic-fade-out{
  animation:cinematicFadeOut 0.6s cubic-bezier(0.3,0,0.3,1) forwards;
}
.menu.cinematic-menu{
  animation:cinematicMenuReveal 0.5s cubic-bezier(0.34,0,0.3,1) 0.1s forwards;
}

.menu{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow-y:auto;

  background-color:#121212;

  background-image:linear-gradient(135deg,#121212 25%,#1a1a1a 25%,#1a1a1a 50%,#121212 50%,#121212 75%,#1a1a1a 75%,#1a1a1a);

  background-size:40px 40px;

  animation:stripeMove 4s linear infinite;

}

/* NOTE: a previous version moved these stripes onto a `.menu::before` layer so
   the motion could be a compositor `transform` instead of a per-frame repaint of
   `background-position`, and raised the content above it with
   `.menu > *{position:relative}`.

   That broke the entire menu. `.menu > *` matches EVERY direct child of every
   menu panel, and forcing `position:relative` on all of them overrode the
   `position:absolute` / `position:fixed` that buttons, sidebars and close
   controls are authored with. Controls ended up out of their layout and out from
   under the cursor, so the menu stopped responding to clicks at all.

   Do not reintroduce a `.menu > *` positioning rule. If the stripe repaint ever
   needs optimising again, do it without touching the children's `position` --
   `isolation:isolate` on `.menu` with `z-index:-1` on the pseudo-element paints
   the stripes behind the content without re-parenting anything. */
.menu:not(.hidden){animation:menuReveal 0.28s ease-out, stripeMove 4s linear infinite}

.menu-card{background:var(--card);border:1px solid var(--line);border-radius:18px;

  padding:34px 30px;width:360px;max-width:92vw;box-shadow:0 30px 80px rgba(0,0,0,.55);

  backdrop-filter:blur(2px);animation:pop .25s ease}

.menu-card.wide{width:760px}

@keyframes pop{from{transform:translateY(12px) scale(.98);opacity:0}to{transform:none;opacity:1}}



.title{font-size:42px;letter-spacing:4px;text-align:center;margin-bottom:22px;

  background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;

  background-clip:text;color:transparent;font-weight:800}

h2{text-align:center;margin-bottom:18px;letter-spacing:2px;font-weight:700}



label{display:block;font-size:13px;color:var(--muted);margin:14px 0 6px}

.hint{font-size:11px;color:#999;margin-top:4px;font-style:italic}

.muted{color:var(--muted);font-size:13px;text-align:center;padding:14px}



input[type=text],input[type=number]{

  width:100%;padding:11px 14px;border-radius:10px;border:1px solid var(--line);

  background:#1c1c1c;color:#fff;font-size:16px;outline:none}

input:focus{border-color:var(--accent)}



/* Buttons */

.btn{margin-top:12px;padding:13px;border-radius:12px;text-align:center;cursor:pointer;

  background:#383838;border:1px solid var(--line);font-weight:600;letter-spacing:.5px;

  transition:.15s;font-size:15px}

.btn:hover{background:#444;transform:scale(1.05);outline:2px solid #000;outline-offset:2px}

.btn:active{transform:translateY(1px)}

.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent2));border:none;color:#1a1a1a}

.btn-subtle{background:#2e2e2e}

.btn-back{background:transparent;border-color:transparent;color:var(--muted);margin-top:18px}

.btn-back:hover{color:#fff;transform:scale(1.05);outline:2px solid #000;outline-offset:2px}



/* Segmented control */

.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}

.seg-opt{flex:1;text-align:center;padding:10px;cursor:pointer;background:#1c1c1c;font-size:14px}

.seg-opt.active{background:var(--accent);color:#1a1a1a;font-weight:700}



/* Code box */

.code-box{padding:14px;text-align:center;font-family:Consolas,monospace;font-size:26px;

  letter-spacing:6px;background:#1c1c1c;border:1px dashed var(--accent);border-radius:10px;

  cursor:pointer;transition:.15s}

.code-box:hover{background:#222}



/* Room list */

.room-list{max-height:300px;overflow-y:auto;margin-bottom:10px}

.room-row{display:flex;justify-content:space-between;align-items:center;

  padding:12px 14px;border-radius:10px;background:#1c1c1c;margin-bottom:8px;cursor:pointer;

  border:1px solid var(--line);transition:.15s}

.room-row:hover{border-color:var(--accent)}

.room-row .rn{font-weight:700}

.room-row .rm{color:var(--muted);font-size:12px}



/* Collections grid */

.tank-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:10px}

.tank-card{background:#1c1c1c;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center;cursor:pointer;transition:.15s}

.tank-card:hover{border-color:var(--accent)}

.tank-card.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}

.tank-preview{height:60px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}

.tank-name{font-weight:700;font-size:14px;padding:4px 10px;background:rgba(0,0,0,0.55);border-radius:6px;text-align:center;color:#fff;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,0.8);display:inline-block;margin:4px 0}

.tank-tier{font-size:11px;color:var(--accent);margin-top:2px}

.tank-stats{font-size:10px;color:var(--muted);margin-top:6px;line-height:1.4}



/* Collections fullscreen */
.collections-fullscreen{position:absolute;inset:0;display:flex;flex-direction:column;background-color:#121212;background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(rgba(255,255,255,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.06) 1px,transparent 1px);background-size:20px 20px,20px 20px,100px 100px,100px 100px;padding:0}

.collections-scroll{flex:1;overflow-x:auto;overflow-y:hidden;display:flex;align-items:stretch}
.collections-scroll::-webkit-scrollbar{height:8px}
.collections-scroll::-webkit-scrollbar-thumb{background:#555;border-radius:4px}
.collections-scroll::-webkit-scrollbar-track{background:transparent}

.collections-track{display:flex;align-items:stretch;gap:0;padding:0;min-height:100%}

.collection-card{display:flex;flex-direction:column;gap:30px;padding:40px 30px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:16px;flex:0 0 100vw;opacity:0;transform:translateY(30px);animation:colFadeIn .5s ease forwards;justify-content:center}
.collection-card:nth-child(1){animation-delay:0s}
.collection-card:nth-child(2){animation-delay:.15s}
.collection-card:nth-child(3){animation-delay:.3s}

@keyframes colFadeIn{to{opacity:1;transform:translateY(0)}}

.collection-label{font-size:22px;font-weight:700;color:rgba(255,255,255,0.5);letter-spacing:3px;text-transform:uppercase;margin-bottom:8px}

.tank-row{display:flex;gap:20px;justify-content:flex-start;padding-left:20px}
.tank-row.row-top .tank-slot:nth-child(1){animation:slotPop .35s .1s ease both}
.tank-row.row-top .tank-slot:nth-child(2){animation:slotPop .35s .2s ease both}
.tank-row.row-top .tank-slot:nth-child(3){animation:slotPop .35s .3s ease both}
.tank-row.row-bot .tank-slot:nth-child(1){animation:slotPop .35s .35s ease both}
.tank-row.row-bot .tank-slot:nth-child(2){animation:slotPop .35s .45s ease both}

@keyframes slotPop{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}

.tank-slot{width:360px;height:220px;border:2px solid rgba(255,255,255,0.15);border-radius:20px;background:rgba(0,0,0,0.4);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden}
.tank-slot:hover{border-color:var(--accent);background:rgba(255,177,43,0.1);transform:translateY(-4px);box-shadow:0 8px 32px rgba(255,177,43,0.15)}
.tank-slot.unlocked{border-color:rgba(255,177,43,0.4)}
.tank-slot.unlocked:hover{border-color:var(--accent)}
.tank-slot.selected{border-color:var(--accent);background:rgba(255,177,43,0.15);box-shadow:0 0 32px rgba(255,177,43,0.25)}
.tank-slot.locked{cursor:default;opacity:0.5}
.tank-slot.locked:hover{border-color:rgba(255,255,255,0.15);background:rgba(0,0,0,0.4);transform:none;box-shadow:none}

.tank-slot-body{width:120px;height:56px;border-radius:10px;margin-bottom:10px}
.tank-slot-turret{width:60px;height:28px;border-radius:8px;margin-bottom:8px}
.tank-slot-barrel{width:48px;height:10px;border-radius:6px}

.tank-slot .lock-icon{font-size:64px;color:rgba(255,255,255,0.3)}
.tank-slot .tank-name{font-size:18px;color:#fff;margin-top:10px;text-align:center;line-height:1.2;padding:6px 12px;background:rgba(0,0,0,0.45);border-radius:6px;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,0.8);display:inline-block}

.collection-lock{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0 6px;flex-shrink:0;opacity:0;animation:lockFadeIn .4s .5s ease both}
.collection-lock.open{opacity:1}
.collection-lock .lock-big{font-size:36px;color:rgba(255,255,255,0.15);transition:all .4s ease}
.collection-lock.open .lock-big{color:rgba(76,175,80,0.6)}
.collection-lock .lock-text{font-size:11px;color:rgba(255,255,255,0.3);text-align:center;line-height:1.2}
.collection-lock.open .lock-text{color:rgba(76,175,80,0.5)}

@keyframes lockFadeIn{from{opacity:0}to{opacity:1}}

#collections-back{background:transparent;border-color:transparent;color:var(--muted);font-size:14px}
#collections-back:hover{color:#fff}

/* Collections bottom bar */
#collections-bottom-bar{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 16px;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.12);border-radius:14px;margin:10px auto;flex-shrink:0}
#collections-bottom-bar .btn{margin:0}

.btn.btn-sm{padding:8px 18px;font-size:13px;border-radius:10px}
.btn.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.2);color:#ccc}
.btn.btn-ghost:hover{background:rgba(255,255,255,0.1);border-color:var(--accent);color:#fff}

.btn.btn-danger{background:rgba(255,60,60,0.15);border:1px solid rgba(255,60,60,0.3);color:#ff6b6b}
.btn.btn-danger:hover{background:rgba(255,60,60,0.3);border-color:#ff6b6b;color:#fff}



/* Keybind rows */

.bind-row{display:flex;justify-content:space-between;align-items:center;

  padding:9px 0;border-bottom:1px solid var(--line)}

.bind-row .bl{font-size:14px}

.bind-key{min-width:90px;text-align:center;padding:8px;border-radius:8px;background:#1c1c1c;

  border:1px solid var(--line);font-family:Consolas,monospace;cursor:pointer;transition:.15s;font-size:13px}

.bind-key:hover{border-color:var(--accent)}

.bind-key.binding{border-color:var(--accent2);animation:pulse 1s infinite}

@keyframes pulse{50%{opacity:.5}}



/* ---------- HUD ---------- */

#hud{position:absolute;inset:0;pointer-events:none}

#hud > *{pointer-events:auto}

#minimap-btn{position:absolute;top:14px;left:14px;width:80px;height:80px;border-radius:12px;
  background:linear-gradient(135deg,rgba(255,177,43,.25),rgba(255,120,20,.15));
  border:2px solid rgba(255,177,43,.6);display:flex;align-items:center;
  justify-content:center;font-size:22px;cursor:pointer;backdrop-filter:blur(6px);
  transition:all .2s ease;box-shadow:0 0 12px rgba(255,177,43,.2)}

#minimap-btn:hover{background:linear-gradient(135deg,rgba(255,177,43,.4),rgba(255,120,20,.3));
  border-color:rgba(255,177,43,.9);box-shadow:0 0 20px rgba(255,177,43,.4);transform:scale(1.05)}

#menu-btn{position:absolute;top:98px;left:14px;width:80px;height:80px;border-radius:12px;
  background:linear-gradient(135deg,rgba(100,160,255,.25),rgba(60,120,220,.15));
  border:2px solid rgba(100,160,255,.6);display:flex;align-items:center;
  justify-content:center;font-size:22px;cursor:pointer;backdrop-filter:blur(6px);
  transition:all .2s ease;box-shadow:0 0 12px rgba(100,160,255,.2)}

#menu-btn:hover{background:linear-gradient(135deg,rgba(100,160,255,.4),rgba(60,120,220,.3));
  border-color:rgba(100,160,255,.9);box-shadow:0 0 20px rgba(100,160,255,.4);transform:scale(1.05)}

/* minimap button stays visible; key badge is PC-only */

.map-key-hint{position:absolute;bottom:-1px;right:-1px;width:22px;height:22px;

  background:rgba(0,0,0,.85);border:1px solid var(--line);border-radius:4px 0 4px 0;

  font-size:11px;color:var(--accent);display:flex;align-items:center;

  justify-content:center;font-family:sans-serif;pointer-events:none;line-height:1}

.is-mobile .map-key-hint{display:none!important}



#speed-readout{position:absolute;left:14px;bottom:14px;background:rgba(20,20,20,.75);
  border:1px solid var(--line);border-radius:12px;padding:10px 16px;backdrop-filter:blur(4px);transition:opacity .5s ease}

#speed-readout span{font-size:28px;font-weight:800;color:var(--accent)}

#speed-readout small{color:var(--muted);font-size:12px}



#leaderboard{position:absolute;right:14px;top:14px;background:rgba(20,20,20,.78);

  border:1px solid var(--line);border-radius:12px;padding:10px 14px;min-width:200px;backdrop-filter:blur(4px)}

.lb-title{font-size:12px;color:var(--muted);letter-spacing:2px;margin-bottom:6px;text-transform:uppercase}

#lb-list{list-style:none;counter-reset:lb}

#lb-list li{display:flex;justify-content:space-between;font-size:13px;padding:2px 0}

#lb-list li::before{counter-increment:lb;content:counter(lb) ". ";color:var(--accent);font-weight:700;width:18px}

#lb-list li .lname{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#lb-list li .ldmg{color:var(--accent2);font-weight:700}

/* TDM Scoreboard (center-top, horizontal glass) */
#tdm-lb{position:fixed;top:10px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;z-index:50;pointer-events:none;font-family:'Segoe UI','Arial',sans-serif}
#tdm-lb.hidden{display:none !important}
.tdm-lb-top{display:flex;align-items:center;gap:6px}
.tdm-lb-bottom{display:flex;align-items:center;gap:6px;padding:4px 14px;background:rgba(255,255,255,0.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,0.12);border-radius:12px;box-shadow:0 2px 16px rgba(0,0,0,0.1)}
.tdm-lb-row{display:flex;align-items:center;gap:4px;padding:6px 10px;background:rgba(255,255,255,0.1);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border:1px solid rgba(255,255,255,0.18);border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.1)}
.tdm-lb-blue{border-color:rgba(68,136,255,0.3);box-shadow:0 4px 24px rgba(68,136,255,0.12),inset 0 1px 0 rgba(100,170,255,0.15)}
.tdm-lb-red{border-color:rgba(255,68,68,0.3);box-shadow:0 4px 24px rgba(255,68,68,0.12),inset 0 1px 0 rgba(255,100,100,0.15)}
.tdm-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:opacity .2s,box-shadow .2s;position:relative;overflow:hidden}
.tdm-lb-blue .tdm-icon{background:rgba(68,136,255,0.15);border:1px solid rgba(68,136,255,0.2)}
.tdm-lb-red .tdm-icon{background:rgba(255,68,68,0.15);border:1px solid rgba(255,68,68,0.2)}
.tdm-icon.local{box-shadow:0 0 10px rgba(255,255,255,0.35),inset 0 0 6px rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.5) !important}
.tdm-icon.dead{opacity:0.2;filter:grayscale(1)}
.tdm-icon img{width:24px;height:24px;object-fit:contain;mix-blend-mode:screen;pointer-events:none}
.tdm-lb-blue .tdm-icon img{filter:brightness(0.6) sepia(1) saturate(5) hue-rotate(195deg);transform:rotate(-90deg) scaleX(-1)}
.tdm-lb-red .tdm-icon img{filter:brightness(0.6) sepia(1) saturate(5) hue-rotate(-25deg);transform:rotate(90deg) scaleX(-1)}
.tdm-vs-blue{font-size:16px;font-weight:800;color:#6af;min-width:14px;text-align:center;text-shadow:0 0 10px rgba(68,136,255,0.4)}
.tdm-vs-red{font-size:16px;font-weight:800;color:#f66;min-width:14px;text-align:center;text-shadow:0 0 10px rgba(255,68,68,0.4)}
.tdm-vs-label{font-size:8px;color:rgba(255,255,255,0.25);font-weight:700;letter-spacing:2px;text-transform:uppercase}

/* ============================================================
   SCOREBOARD OVERLAY
   ============================================================ */
@keyframes sb-fade-in{from{opacity:0}to{opacity:1}}
@keyframes sb-row-slide{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@keyframes sb-medal-spin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}

#scoreboard-overlay{
  position:fixed;inset:0;z-index:200;pointer-events:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.7);
  animation:sb-fade-in 0.15s ease;
}
#scoreboard-overlay.hidden{display:none !important}

/* ── Panels wrapper: two team lists side by side, centered ── */
.sb-inner{
  display:flex;gap:32px;justify-content:center;align-items:flex-start;
  pointer-events:auto;padding:0 24px;
}

/* ── Team panel ── */
.sb-team{
  width:420px;max-height:70vh;overflow-y:auto;
  background:rgba(12,16,28,0.92);border-radius:10px;overflow:hidden;
  border:1px solid rgba(255,255,255,0.07);
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.1) transparent;
}
.sb-team::-webkit-scrollbar{width:4px}
.sb-team::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:4px}

/* ── Team header ── */
.sb-team-header{
  padding:12px 16px;font-size:13px;font-weight:800;letter-spacing:3px;text-transform:uppercase;
  border-bottom:2px solid;text-align:center;
}
.sb-team-blue .sb-team-header{color:#5eaaff;border-color:#3377dd;background:rgba(50,120,230,0.08)}
.sb-team-red .sb-team-header{color:#ff6b6b;border-color:#dd3333;background:rgba(230,60,60,0.08)}

/* ── Column labels ── */
.sb-cols{
  display:flex;padding:6px 12px;font-size:9px;color:rgba(255,255,255,0.3);letter-spacing:1px;
  border-bottom:1px solid rgba(255,255,255,0.05);text-transform:uppercase;font-weight:600;
  gap:8px;
}
.sb-cols span{flex-shrink:0;text-align:center}

/* ── Player row ── */
.sb-row{
  display:flex;align-items:center;padding:6px 12px;font-size:12px;color:rgba(255,255,255,0.75);
  border-bottom:1px solid rgba(255,255,255,0.03);gap:8px;
  animation:sb-row-slide 0.15s ease backwards;
}
.sb-row:hover{background:rgba(255,255,255,0.04);color:#fff}
.sb-row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Local player ── */
.sb-row.local{background:rgba(255,184,51,0.1);color:#fff;font-weight:600;border-left:3px solid #ffb833}

/* ── Dead ── */
.sb-row.dead{opacity:0.3}

/* ── Dot ── */
.sb-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-right:6px;box-shadow:0 0 5px var(--dot-color,rgba(255,255,255,0.3))}

/* ── Rank / medals ── */
.sb-c-rank{width:28px;color:rgba(255,255,255,0.35);font-weight:600;text-align:center}
.sb-medal{font-size:14px;display:inline-block;animation:sb-medal-spin 0.5s ease-out}
.sb-rank-1 .sb-c-rank{color:#ffd700}
.sb-rank-2 .sb-c-rank{color:#c0c0c0}
.sb-rank-3 .sb-c-rank{color:#cd7f32}

/* ── Name ── */
.sb-name{flex:1;text-align:left !important;padding-left:2px;font-weight:500;min-width:80px}

/* ── Vehicle ── */
.sb-c-vehicle{width:100px;text-align:left !important;color:rgba(255,255,255,0.4);font-size:11px}

/* ── Kills ── */
.sb-c-kills{width:28px;font-weight:800;text-align:center}

/* ── Damage ── */
.sb-c-dmg{width:50px;font-weight:700;color:rgba(255,210,110,0.85);text-align:center}

/* ── Status ── */
.sb-c-status{width:42px;text-align:center}
.sb-status-alive{display:inline-block;padding:2px 6px;border-radius:3px;font-size:9px;font-weight:700;background:rgba(80,220,120,0.15);color:#55dd77;border:1px solid rgba(80,220,120,0.2)}
.sb-status-dead{display:inline-block;padding:2px 6px;border-radius:3px;font-size:9px;font-weight:700;background:rgba(255,70,70,0.12);color:#ee5555;border:1px solid rgba(255,70,70,0.15)}

/* ── Round info (TDM) ── */
.sb-round-info{
  text-align:center;padding:8px 20px;margin-bottom:12px;
  font-size:12px;color:#ffb833;font-weight:800;letter-spacing:2px;
  background:rgba(255,180,50,0.06);border-radius:8px;
}
.sb-round-info.hidden{display:none}

/* ── Buttons ── */
.sb-bottom-bar{display:flex;gap:12px;margin-top:20px;pointer-events:auto;justify-content:center}
.sb-bottom-btn{
  padding:10px 32px;border:none;border-radius:6px;font-size:12px;font-weight:800;
  letter-spacing:2px;text-transform:uppercase;cursor:pointer;
  transition:all 0.15s ease;
  background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.6);
  border:1px solid rgba(255,255,255,0.12);
}
.sb-bottom-btn:hover{background:rgba(255,255,255,0.15);color:#fff}
.sb-bottom-btn.sb-exit{background:rgba(255,60,60,0.15);color:#ff7777;border-color:rgba(255,60,60,0.25)}
.sb-bottom-btn.sb-exit:hover{background:rgba(255,60,60,0.25);color:#ff5555}



#hp-wrap{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  width:300px;height:24px;background:#1c1c1c;border:2px solid var(--line);border-radius:10px;
  overflow:hidden;transition:opacity .5s ease;box-shadow:0 0 14px rgba(0,0,0,.5)}

#hp-bar{height:100%;width:100%;background:linear-gradient(90deg,var(--hp-ally),#2a9fd6);transition:width .15s}

/* Reload bullet. Was at screen centre, which put it straight on top of the
   tank - it now sits down-left of the turret, where the arrow in the sketch
   points. Offsets are from screen centre, so it stays the same distance from
   the tank (the follow-cam keeps the tank centred) at any window size. */
#reload-indicator{position:absolute;left:calc(50% - 300px);bottom:calc(50% - 90px);width:112px;height:112px;pointer-events:none}

@media (max-width:768px){#reload-indicator{width:92px;height:92px;left:calc(50% - 175px);bottom:calc(50% - 70px)}}

@media (max-height:500px){#reload-indicator{width:76px;height:76px}}

@media (max-height:400px){#reload-indicator{display:none}}

/* Super ability slot — sits further left of the HP bar (mirror of reload indicator) */
#super-wrap{position:absolute;left:calc(50% - 270px);bottom:18px;width:68px;height:68px;transition:opacity .5s ease}

#super-btn{
  width:100%;height:100%;border-radius:50%;border:2px solid rgba(255,255,255,.22);
  background:conic-gradient(rgba(255,177,43,.9) calc((1 - var(--cd,0)) * 360deg), rgba(255,255,255,.1) 0);
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;outline:none;padding:0;box-shadow:0 2px 8px rgba(0,0,0,.4);
}
#super-btn::before{content:'';position:absolute;inset:5px;border-radius:50%;background:linear-gradient(160deg,#20242a,#12151a)}
.super-icon{position:relative;z-index:1;font-size:22px;line-height:1;filter:drop-shadow(0 1px 2px #000)}
.super-label{position:relative;z-index:1;font-size:10px;font-weight:700;color:#fff;margin-top:2px;text-shadow:0 1px 2px #000;letter-spacing:.5px}
#super-btn.ready{animation:super-ready 1.6s ease-in-out infinite;border-color:var(--accent)}
#super-btn.active{border-color:#ff6a2a;box-shadow:0 0 14px rgba(255,106,42,.7)}
#super-btn:active{transform:scale(.95)}
@keyframes super-ready{
  0%,100%{box-shadow:0 0 4px rgba(255,177,43,.35)}
  50%{box-shadow:0 0 16px rgba(255,177,43,.95)}
}
#super-hint{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  white-space:nowrap;background:rgba(0,0,0,.7);color:#ffd27a;font-size:11px;padding:4px 10px;border-radius:10px;
  border:1px solid rgba(255,177,43,.35);pointer-events:none}

@media (max-width:768px){#super-wrap{left:calc(50% - 200px);bottom:14px;width:54px;height:54px}#super-btn::before{inset:4px}}
@media (max-height:500px){#super-wrap{left:calc(50% - 150px);bottom:12px;width:44px;height:44px}#super-btn::before{inset:3px}}
@media (max-height:400px){#super-wrap{display:none}}

#hp-text{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);

  font-size:12px;color:#fff;text-shadow:0 1px 3px #000;white-space:nowrap;pointer-events:none}



/* Drown timer bar — above HP bar */

#drown-bar-wrap{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);

  width:360px;height:10px;background:#1c1c1c;border:1px solid #555;border-radius:6px;

  overflow:hidden;pointer-events:none}

#drown-bar{height:100%;width:0%;background:linear-gradient(90deg,#3388ff,#66bbff);

  transition:width .1s}



/* Camouflage indicator */

#camo-indicator{position:absolute;left:50%;bottom:38px;transform:translateX(-50%);

  display:flex;align-items:center;gap:8px;background:rgba(20,20,20,.85);border:1px solid var(--line);

  border-radius:16px;padding:4px 12px;font-size:11px;font-weight:700;letter-spacing:.06em;

  pointer-events:none;white-space:nowrap}

#camo-dot{width:10px;height:10px;border-radius:50%;background:#888;transition:background .2s,box-shadow .2s}

#camo-dot.on{background:#5fdc3a;box-shadow:0 0 8px #5fdc3a}

#camo-dot.mid{background:#f0a020;box-shadow:0 0 8px #f0a020}

#camo-dot.off{background:#666}

#camo-text{color:#ddd;text-shadow:0 1px 2px #000}



/* Net status indicator (top center) */

#net-status{position:absolute;top:10px;left:50%;transform:translateX(-50%);

  background:rgba(0,0,0,.7);border:1px solid var(--line);border-radius:12px;

  padding:4px 14px;font-size:12px;font-weight:600;letter-spacing:.04em;

  pointer-events:none;white-space:nowrap;color:var(--muted);z-index:20}

#net-status.on{color:#8be06b;border-color:#5fdc3a}

#net-status.off{color:#ff6644;border-color:#ff3311}

/* Gladiator mode HUD */

#glad-hud{position:absolute;left:50%;top:10px;transform:translateX(-50%);

  display:flex;gap:10px;align-items:center;pointer-events:none;z-index:20}

#glad-power,#glad-left{background:rgba(0,0,0,.7);border:1px solid var(--line);

  border-radius:12px;padding:4px 14px;font-size:13px;font-weight:700;color:#ffb12b;

  letter-spacing:.04em;white-space:nowrap}

#glad-left{color:#ff6a3b}

#glad-banner{position:absolute;top:52px;left:50%;transform:translateX(-50%);

  background:rgba(0,0,0,.72);border:1px solid #ff9a2a;color:#ffc46b;

  border-radius:12px;padding:5px 16px;font-size:13px;font-weight:700;

  letter-spacing:.05em;pointer-events:none;z-index:20;white-space:nowrap;

  text-shadow:0 1px 3px #000}

/* Spectator HUD (bottom bar) */

/* ============================================================================
   BASE DEFEND mode HUD
   ---------------------------------------------------------------------------
   One panel, top centre, two columns: YOUR base on the left, the enemy's on the
   right. The columns are ordered by RELATIONSHIP rather than by team id, which
   is why the labels are fixed words and the bars are coloured by
   Game._displayColor — see _updateHud in base-defend.js.

   It sits BELOW #glad-hud rather than beside it, and #tdm-lb is hidden while it
   is up (see _updateHUD): three scoreboards stacked on one strip of screen is
   how a HUD ends up unreadable, and in this mode the base numbers are the ones
   that decide the match.

   The bars are chunky and the numbers are large on purpose. This is read at a
   glance, mid-battle, while looking somewhere else entirely — it is a
   peripheral-vision readout, not a settings panel. */
#base-hud{position:absolute;left:50%;top:14px;transform:translateX(-50%);
  z-index:20;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:8px 14px 10px;
  background:linear-gradient(180deg,rgba(10,13,20,.82) 0%,rgba(10,13,20,.68) 100%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  box-shadow:0 6px 28px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3)}

.base-hud-title{font-size:10px;font-weight:800;letter-spacing:.34em;
  color:rgba(255,255,255,.42);text-transform:uppercase;padding-left:.34em}

.base-hud-cols{display:flex;align-items:center;gap:12px}

.base-hud-col{display:flex;flex-direction:column;gap:4px;width:190px}

.base-hud-cap{display:flex;align-items:baseline;justify-content:space-between;gap:8px}

.base-hud-side{font-size:11px;font-weight:800;letter-spacing:.14em;color:#fff}

/* Auto-placed means the MAP shipped no `base` entity, so the mode put the
   objective somewhere itself. Deliberately quiet — a player does not need to
   know — but a designer reading a screenshot can, which is the only audience
   that needs to. */
.base-hud-src{font-size:8px;font-weight:800;letter-spacing:.12em;
  color:rgba(255,255,255,.30);white-space:nowrap}

.base-hud-track{height:11px;border-radius:6px;overflow:hidden;
  background:#15171c;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}

.base-hud-fill{height:100%;width:100%;border-radius:5px;
  /* The glossy top half is what stops it reading as a plain rectangle. */
  background-image:linear-gradient(180deg,rgba(255,255,255,.40) 0%,rgba(255,255,255,0) 55%);
  background-color:#4488ff;
  transition:width .18s ease-out}

.base-hud-num{font-size:12px;font-weight:800;letter-spacing:.06em;
  color:rgba(255,255,255,.86);text-align:center}

.base-hud-vs{font-size:11px;font-weight:900;letter-spacing:.1em;
  color:rgba(255,255,255,.32);padding-bottom:12px}

@media (max-width: 700px){
  .base-hud-col{width:132px}
  #base-hud{top:8px;padding:6px 10px 8px}
  .base-hud-num{font-size:11px}
}

/* Spectator HUD (bottom bar) */

#spectator-hud{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);

  z-index:30;pointer-events:none}

#spectator-hud-box{display:flex;align-items:center;gap:8px;pointer-events:auto;

  background:rgba(10,14,20,.85);border:1px solid #ff9a2a;border-radius:14px;

  padding:6px 10px;box-shadow:0 4px 14px rgba(0,0,0,.45)}

#spectator-hud-box .spec-btn{display:flex;align-items:center;gap:6px;cursor:pointer;

  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);

  color:#e8ecf1;border-radius:10px;padding:7px 12px;font-family:inherit;

  font-size:13px;font-weight:700;letter-spacing:.02em;transition:background .15s,border-color .15s,color .15s}

#spectator-hud-box .spec-btn:hover{background:rgba(255,255,255,.14)}

#spectator-hud-box .spec-btn.spec-on{background:#ff9a2a;border-color:#ffb75e;color:#1a1408}

#spectator-hud-box .spec-ico{font-size:14px}

#spec-hud-label{color:#ffc46b;font-size:12px;font-weight:700;letter-spacing:.08em;

  padding:0 4px;white-space:nowrap}

#spec-target-name{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

#spec-hud-hint{color:#9fb0c3;font-size:11px;font-weight:600;padding:0 6px;white-space:nowrap}

/* THE GLADIATOR RESULT CARD.

   Same material as the results screen it hands over to: a translucent card
   with a white hairline and a soft white bloom instead of the 2px gold border
   it used to wear. The border was the only hard edge on a screen that is
   otherwise all feather, and a gold rule around a card that already says
   everything in gold type is a frame spending ink to repeat itself.

   The scrim behind it is lighter than it was for the same reason the results
   panels are: this card sits over a live battle you may still be watching, and
   at .55 black it took the scene away rather than holding it back. */
#glad-result{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;

  background:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(4,7,12,.40), rgba(3,5,9,.72));
  backdrop-filter:blur(6px) saturate(120%)}

#glad-result .glad-result-box{background:rgba(16,21,29,.72);border-radius:18px;

  padding:30px 42px;text-align:center;
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 0 1px rgba(255,255,255,.22),
    0 14px 44px rgba(0,0,0,.60),
    0 0 34px rgba(255,255,255,.08);
  max-width:420px}

#glad-result-text{font-size:26px;font-weight:800;letter-spacing:.10em;

  background:linear-gradient(180deg,#fff3cd 0%,#ffd667 40%,#ffb42a 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 16px rgba(255,180,42,.45));
  text-transform:uppercase;margin-bottom:20px;line-height:1.25}

#glad-result .glad-result-btns{display:flex;gap:10px;justify-content:center}

/* Rounded, translucent, hairlined: the buttons belong to the card rather than
   being three flat slabs bolted to its front. */
#glad-result button{padding:11px 20px;border:none;border-radius:11px;font-size:14px;

  font-weight:700;cursor:pointer;color:#eaf1fa;
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(255,255,255,.16);
  transition:background .14s ease, box-shadow .14s ease}

#glad-result button:hover{background:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 0 0 1px rgba(255,255,255,.30), 0 0 18px rgba(255,255,255,.14)}

/* The two that carry an outcome keep their hue, thinned to a wash so they read
   as part of the glass instead of as opaque stickers on it. */
#glad-watch-btn{background:rgba(39,174,96,.32) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(96,222,152,.42) !important}

#glad-exit-btn{background:rgba(231,76,60,.30) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(255,132,116,.42) !important}



/* Flamethrower heat bar (Helix) — vertical, left center */

#heat-wrap{position:absolute;left:22px;top:50%;transform:translateY(-50%);

  width:18px;height:280px;pointer-events:none}

#heat-bar-outer{position:absolute;inset:0;width:18px;height:280px;

  background:#1c1c1c;border:1px solid var(--line);border-radius:4px;overflow:hidden}

#heat-bar{position:absolute;bottom:0;left:0;width:100%;height:0%;

  background:linear-gradient(to top,#ff8822,#ff3311);transition:height .1s}

.heat-tick{position:absolute;right:-32px;font-size:10px;color:#888;

  text-shadow:0 1px 3px #000;pointer-events:none;line-height:1;transform:translateY(-50%)}

#heat-text{position:absolute;left:54px;top:50%;transform:translateY(-50%);

  font-size:13px;color:#ff6622;text-shadow:0 1px 3px #000;white-space:nowrap;

  pointer-events:none;letter-spacing:.05em;font-weight:700}



/* ---------- Big map ---------- */

#bigmap{position:absolute;inset:0;background:rgba(0,0,0,.85);display:flex;

  align-items:center;justify-content:center;z-index:30}

#bigmap-canvas{max-width:90vw;max-height:90vh;border:2px solid var(--accent);border-radius:10px;background:#0c1a0c}

#bigmap-close{position:absolute;top:20px;right:24px;width:42px;height:42px;border-radius:50%;

  background:var(--danger);color:#fff;display:flex;align-items:center;justify-content:center;

  font-size:20px;cursor:pointer;border:2px solid #fff;z-index:31}

#bigmap-close:hover{transform:scale(1.08)}



/* ---------- Toast ---------- */

#toast{position:absolute;left:50%;bottom:80px;transform:translateX(-50%);

  background:#fff;color:#1a1a1a;padding:8px 18px;border-radius:20px;font-size:13px;font-weight:600;

  box-shadow:0 6px 20px rgba(0,0,0,.4);animation:fadeup 5s forwards}

@keyframes fadeup{0%{opacity:0;transform:translate(-50%,10px)}10%,80%{opacity:1;transform:translateX(-50%)}100%{opacity:0}}



/* Spinner */

.spinner{width:36px;height:36px;border:4px solid #333;border-top-color:var(--accent);

  border-radius:50%;margin:18px auto;animation:spin 1s linear infinite}

@keyframes spin{to{transform:rotate(360deg)}}



/* Scrollbar */

::-webkit-scrollbar{width:8px}

::-webkit-scrollbar-thumb{background:#444;border-radius:4px}



/* Separator */

.sep{border:none;border-top:1px solid var(--line);margin:16px 0}

.section-title{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;

  color:var(--muted);text-align:center;margin:22px 0 10px;opacity:.45;font-weight:600}



/* Settings tab layout */

#menu-settings .menu-card{width:100%;max-width:100vw;height:100vh;border-radius:0;padding:20px 30px}

/* All lobby menu cards are fullscreen */
.menu .menu-card:not(#esc-menu .menu-card):not(#rendering-tips .menu-card):not(#menu-custom-card):not(.menu-preview .menu-card){width:100%;height:100%;max-width:100vw;border-radius:0;box-shadow:none;padding:24px 30px}

/* ESC menu stays as a centered dialog */
#esc-menu .menu-card{width:360px;max-width:92vw;height:auto;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.55)}

.settings-layout{display:flex;gap:0;min-height:280px}

.settings-tabs{flex-shrink:0;width:130px;padding-top:4px;display:flex;flex-direction:column;gap:2px}

.settings-tab{padding:9px 12px;cursor:pointer;font-size:11px;text-transform:uppercase;

  letter-spacing:1px;color:#999;opacity:.6;border-right:2px solid transparent;

  border-radius:6px 0 0 6px;transition:.15s;user-select:none}

.settings-tab:hover{opacity:1;color:#fff;background:rgba(255,255,255,.06)}

.settings-tab.active{opacity:1;color:#fff;font-weight:700;border-right-color:#fff;

  background:rgba(255,255,255,.1)}

.settings-content{flex:1;min-width:0;padding-left:18px;border-left:1px solid var(--line)}

.tab-content{display:none}

.tab-content.active{display:block}



/* Map choice (host) */

.map-choice{display:flex;gap:8px}

.map-opt{flex:1;text-align:center;padding:12px;border-radius:10px;background:#1c1c1c;

  border:1px solid var(--line);cursor:pointer;font-size:13px;transition:.15s}

.map-opt:hover{border-color:var(--accent)}

.map-opt.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}

.map-opt small{display:block;color:var(--muted);font-size:10px;margin-top:2px}

.map-opt.disabled{opacity:.4;cursor:not-allowed}



/* Scrollable settings */

#menu-settings .menu-card{max-height:85vh;overflow-y:auto}

#menu-settings .menu-card::-webkit-scrollbar{width:6px}

#menu-settings .menu-card::-webkit-scrollbar-thumb{background:#444;border-radius:3px}



/* Settings top bar buttons */

.settings-topbar{display:flex;gap:8px;justify-content:flex-end;margin-bottom:14px}

.settings-btn{padding:7px 14px;border-radius:8px;background:#383838;border:1px solid var(--line);cursor:pointer;font-size:12px;color:var(--muted);transition:.15s;white-space:nowrap}

.settings-btn:hover{background:#444;color:#fff;border-color:#fff}

.settings-btn-primary{background:#fff;color:#1a1a1a;border:none;font-weight:600}

.settings-btn-primary:hover{background:#ddd;color:#1a1a1a}



/* Range + color inputs (base styling for pickers outside the settings screen) */
input[type=range]{width:100%;accent-color:var(--accent)}
input[type=color]{width:100%;height:38px;background:#1c1c1c;border:1px solid var(--line);border-radius:8px;cursor:pointer}

/* Range + color inputs — chunky "toon" sliders with a real filled track.
   The filled part needs a CSS variable (--pct) because a range input
   cannot paint its own progress; menu.js keeps --pct in sync.          */
#menu-settings input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:24px; margin:4px 0 10px;
  background:transparent; outline:none; cursor:pointer;
  --pct:50%;
}
#menu-settings input[type=range]::-webkit-slider-runnable-track{
  height:14px; border-radius:8px;
  background:linear-gradient(90deg,
    var(--accent) 0 var(--pct),
    #1d1d1d var(--pct) 100%);
  box-shadow:0 0 0 2px #000, 0 3px 0 rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);
}
#menu-settings input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:24px; height:24px; margin-top:-5px;
  border-radius:7px;
  background:linear-gradient(#ffffff, #cfcfcf);
  border:3px solid #000;
  box-shadow:0 3px 0 rgba(0,0,0,.6);
  transition:transform .08s ease;
}
#menu-settings input[type=range]:active::-webkit-slider-thumb{transform:scale(1.14)}
#menu-settings input[type=range]:hover::-webkit-slider-runnable-track{
  box-shadow:0 0 0 2px #000, 0 3px 0 rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12), 0 0 10px rgba(255,255,255,.28);
}
#menu-settings input[type=range]::-moz-range-track{
  height:14px; border-radius:8px; border:none;
  background:linear-gradient(90deg,
    var(--accent) 0 var(--pct),
    #1d1d1d var(--pct) 100%);
  box-shadow:0 0 0 2px #000, 0 3px 0 rgba(0,0,0,.55);
}
#menu-settings input[type=range]::-moz-range-thumb{
  width:18px; height:18px; border-radius:7px;
  background:linear-gradient(#ffffff, #cfcfcf);
  border:3px solid #000;
  box-shadow:0 3px 0 rgba(0,0,0,.6);
}
#menu-settings input[type=color]{
  -moz-appearance:none; appearance:none;
  width:100%; height:44px; padding:0;
  border:none; border-radius:10px; cursor:pointer;
  background-image:linear-gradient(90deg,
    #ff2d55, #ff9500, #ffd60a, #34c759, #32ade6, #5e5ce6, #ff2d55);
  background-size:200% 100%;
  box-shadow:0 0 0 2px #000, 0 3px 0 rgba(0,0,0,.55);
  transition:filter .12s ease;
}
#menu-settings input[type=color]:hover{animation:swatchShift 4s linear infinite; filter:brightness(1.08)}
@keyframes swatchShift{to{background-position:200% 0}}
#menu-settings input[type=color]::-webkit-color-swatch-wrapper{padding:4px}
#menu-settings input[type=color]::-webkit-color-swatch{border:none; border-radius:6px}
#menu-settings input[type=color]::-moz-color-swatch{border:none; border-radius:6px}



/* Camera rotation settings row */

.cam-rotate-row{display:flex;align-items:center;justify-content:center;gap:16px;margin:8px 0}

.cam-rotate-btn{font-size:28px;width:52px;height:52px;border-radius:12px;background:#1c1c1c;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;user-select:none}

.cam-rotate-btn:hover{background:#333;border-color:#fff}

.cam-rotate-btn:active{transform:scale(.92)}

.cam-rotate-label{font-size:13px;color:var(--muted)}



/* Mobile camera rotation buttons (next to drive joystick) */

.cam-rotate-btns{position:fixed;left:40px;bottom:calc(65px + 140px);z-index:100;display:flex;gap:8px;pointer-events:auto}

.cam-rot-btn{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,0.08);border:2px solid rgba(255,255,255,0.25);color:rgba(255,255,255,0.7);font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(4px);touch-action:none;-webkit-tap-highlight-color:transparent;transition:.12s}

.cam-rot-btn:active{background:rgba(255,255,255,0.15);border-color:#fff;transform:scale(.9)}

@media (max-width:600px){.cam-rotate-btns{left:35px}}



/* Drift hint */

#drift-hint{position:absolute;left:50%;top:30%;transform:translateX(-50%);

  font-size:34px;font-weight:800;letter-spacing:6px;color:var(--accent2);

  text-shadow:0 0 18px rgba(255,91,59,.7);pointer-events:none;animation:driftpulse .4s infinite alternate}

@keyframes driftpulse{to{transform:translateX(-50%) scale(1.08);opacity:.7}}







/* ============ MAIN MENU LAYOUT ============ */

.menu-preview {

  display: block !important;

  background: transparent !important;

  overflow: hidden;

  position: relative;

  min-height: 100vh;

  padding-left: env(safe-area-inset-left, 0px);

  padding-right: env(safe-area-inset-right, 0px);

}

.menu-preview.hidden {

  display: none !important;

}

#main-menu-preview-canvas {

  position: absolute;
  inset: 0;
  z-index: 0;

  background: #1a1a1a url('main-menu-bg.png') center / cover no-repeat;

  pointer-events: auto;

  touch-action: none;

  cursor: grab;

}

#main-menu-preview-canvas::after {

  content: '';

  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background: radial-gradient(ellipse at 50% 42%, rgba(10,12,16,0.18), rgba(10,12,16,0.62) 100%);

}

#main-menu-preview-canvas canvas {

  display: block;

  width: 100% !important;

  height: 100% !important;

  pointer-events: none;

}

/* Player profile */

.profile {

  position: absolute;

  top: 18px;

  left: 18px;

  z-index: 2;

  background: rgba(0,0,0,0.55);

  backdrop-filter: blur(8px);

  border: 1px solid rgba(255,255,255,0.1);

  border-radius: 14px;

  padding: 12px 22px;

  min-width: 200px;

  pointer-events: none;

}

.profile-top {

  display: flex;

  align-items: baseline;

  gap: 8px;

  margin-bottom: 4px;

}

.profile-name {

  font-size: 17px;

  font-weight: 700;

  color: #fff;

  letter-spacing: 0.5px;

}

.profile-clan {

  font-size: 12px;

  font-weight: 600;

  color: var(--accent);

  letter-spacing: 1px;

}

.profile-sep {

  height: 1px;

  background: rgba(200,200,200,0.25);

  margin: 5px 0;

}

.profile-bottom {

  display: flex;

  gap: 14px;

  font-size: 13px;

  color: var(--muted);

}

.profile-coin, .profile-crystal {

  display: flex;

  align-items: center;

  gap: 3px;

}



.btn-play {

  padding: 18px 60px;

  font-size: 22px;

  font-weight: 800;

  letter-spacing: 3px;

  /* THE BUTTON MUST NOT RESIZE WHEN THE LABEL CHANGES.

     PLAY turns into a timer that counts up, and this box is CONTENT-SIZED —
     padding plus whatever the text measures. So the label's length WAS the
     button's width: "PLAY" came out 219px and "3s" came out 161px, and the
     button visibly shrank every time you pressed play. Shortening the label
     only narrows the gap, it cannot close it, because "0s" and "12s" still
     measure differently and neither equals "PLAY".

     min-width pins it to the width "PLAY" already produced, so the label can be
     any length and the button stays exactly the size it was. box-sizing keeps
     the 18px/60px padding inside that width rather than adding to it, which is
     what stops it being 2px wider than it looks. calc(var(--ui-scale) * …) so it
     still tracks the UI scale setting like every other dimension here. */
  box-sizing: border-box;

  min-width: calc(var(--ui-scale, 1) * 221px);

  background: linear-gradient(135deg, #ffb12b 0%, #ff8c00 50%, #ff6b00 100%);

  backdrop-filter: blur(8px);

  border: 2px solid rgba(255,255,255,0.3);

  color: #fff;

  border-radius: 18px;

  cursor: pointer;

  text-align: center;

  transition: .2s;

  touch-action: manipulation;

  -webkit-tap-highlight-color: transparent;

}

.btn-play:hover {

  transform: translateY(-2px);

  background: linear-gradient(135deg, #ffc24b 0%, #ffa020 50%, #ff8000 100%);

  border-color: rgba(255,255,255,0.5);

  box-shadow: 0 6px 30px rgba(0,0,0,0.4);

}

.btn-play:active {

  transform: translateY(1px);

}



/* Main menu play row container */

.main-menu-play-row {

  position: absolute;

  bottom: 70px;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  align-items: center;

  gap: 15px;

  z-index: 1;

}



/* Gamemode button */

.btn-gamemode {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 56px;

  height: 56px;

  font-size: 28px;

  background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 50%, #7d3c98 100%);

  backdrop-filter: blur(8px);

  border: 2px solid rgba(255,255,255,0.3);

  border-radius: 16px;

  cursor: pointer;

  transition: .2s;

  touch-action: manipulation;

  -webkit-tap-highlight-color: transparent;

  box-shadow: 0 4px 20px rgba(155, 89, 182, 0.4);

}



.btn-gamemode:hover {

  transform: translateY(-2px);

  background: linear-gradient(135deg, #a86cc1 0%, #9b59b6 50%, #8e44ad 100%);

  border-color: rgba(255,255,255,0.5);

  box-shadow: 0 6px 25px rgba(155, 89, 182, 0.5);

}



.btn-gamemode:active {

  transform: translateY(1px);

}



/* Gamemode container */

.gamemode-container {

  position: relative;

  width: 100%;

  height: 100vh;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 20px;

}



.gamemode-grid {

  display: grid;

  grid-template-columns: 1.5fr 1fr;

  grid-template-rows: 1fr 1fr;

  gap: 15px;

  width: 100%;

  max-width: 800px;

  aspect-ratio: 4/3;

  background: linear-gradient(145deg, #2a2a2a, #1a1a1a);

  border: 3px solid #3a3a3a;

  border-radius: 20px;

  padding: 20px;

  box-shadow: 

    0 10px 40px rgba(0, 0, 0, 0.6),

    inset 0 1px 0 rgba(255, 255, 255, 0.05);

}



/* Gamemode squares */

.gamemode-square {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  border-radius: 16px;

  cursor: pointer;

  transition: .3s;

  position: relative;

  overflow: hidden;

  border: 2px solid rgba(255, 255, 255, 0.1);

}



.gamemode-square::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);

  opacity: 0;

  transition: .3s;

}



.gamemode-square:hover::before {

  opacity: 1;

}



.gamemode-square:hover {

  transform: scale(1.02);

  border-color: rgba(255, 255, 255, 0.3);

  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);

}



.gamemode-square:active {

  transform: scale(0.98);

}



/* Gladiator - 30% (largest) */

.gladiator-square {

  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);

  grid-row: 1 / 2;

  grid-column: 1 / 2;

}



/* Sandbox - 20% (smallest) */

.sandbox-square {

  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);

  grid-row: 1 / 2;

  grid-column: 2 / 3;

}



/* Platform King - 25% */

.platform-king-square {

  background: linear-gradient(135deg, #f39c12 0%, #d68910 100%);

  grid-row: 2 / 3;

  grid-column: 1 / 2;

}



/* Multiplayer - 25% */

.multiplayer-square {

  background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%);

  grid-row: 2 / 3;

  grid-column: 2 / 3;

}



/* Gamemode content */

.gamemode-icon {

  font-size: 48px;

  margin-bottom: 8px;

  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));

}



.gamemode-name {

  font-size: 18px;

  font-weight: 800;

  color: #ffffff;

  text-transform: uppercase;

  letter-spacing: 1px;

  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

  margin-bottom: 4px;

}



.gamemode-percent {

  font-size: 14px;

  font-weight: 600;

  color: rgba(255, 255, 255, 0.8);

  background: rgba(0, 0, 0, 0.3);

  padding: 4px 12px;

  border-radius: 12px;

}



/* Gamemode back button */

.gamemode-back {

  position: absolute;

  bottom: 30px;

  left: 30px;

  z-index: 10;

}



.main-menu-side {

  position: absolute;

  left: 40px;

  top: 40%;

  transform: translateY(-50%);

  z-index: 1;

  display: flex;

  flex-direction: column;

  gap: 10px;

  width: 220px;

}

.main-menu-side .btn {

  margin-top: 0;

  padding: 17px 22px;

  font-size: 18px;

  letter-spacing: 1px;

  background: rgba(0,0,0,0.45);

  backdrop-filter: blur(8px);

  border: 1px solid rgba(255,255,255,0.15);

  color: #fff;

  border-radius: 14px;

}

.main-menu-side .btn:hover {

  background: rgba(0,0,0,0.65);

  border-color: rgba(255,255,255,0.3);

  transform: scale(1.06);

  outline: 2px solid #000;

  outline-offset: 2px;

}

.main-menu-side .btn-subtle {

  background: rgba(0,0,0,0.3);

}

.main-menu-side .btn-subtle:hover {

  background: rgba(0,0,0,0.5);

  transform: scale(1.06);

  outline: 2px solid #000;

  outline-offset: 2px;

}



/* Crate slots */

.main-menu-crates {

  position: absolute;

  right: 30px;

  top: 30px;

  z-index: 1;

  background: rgba(0,0,0,0.35);

  backdrop-filter: blur(8px);

  border: 2px solid rgba(255,255,255,0.1);

  border-radius: 22px;

  padding: 22px;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;

}

.crate-slot {

  width: 120px;

  height: 120px;

  background: rgba(0,0,0,0.3);

  border: 2px dashed rgba(255,255,255,0.12);

  border-radius: 16px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 40px;

  color: rgba(255,255,255,0.2);

  transition: .2s;

  cursor: pointer;

}

.crate-slot:hover {

  border-color: rgba(255,255,255,0.3);

  background: rgba(0,0,0,0.5);

}



/* Storage */

.storage-container {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 18px;

}

.storage-grid {

  display: grid;

  grid-template-columns: repeat(8, 1fr);

  gap: 10px;

  padding: 20px;

  background: rgba(0,0,0,0.3);

  border: 1px solid var(--line);

  border-radius: 16px;

  max-width: 660px;

  width: 92vw;

}

.storage-slot {

  aspect-ratio: 1;

  background: rgba(0,0,0,0.3);

  border: 2px dashed rgba(255,255,255,0.08);

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 22px;

  color: rgba(255,255,255,0.1);

  cursor: pointer;

  transition: .2s;

}

.storage-slot:hover {

  border-color: rgba(255,255,255,0.25);

  background: rgba(255,255,255,0.05);

}



/* ============ MENU EDITOR ============ */

#me-overlay{position:absolute;inset:0;z-index:50;background:#20242a;display:flex;flex-direction:column}

#me-canvas-host{flex:1;position:relative;overflow:hidden}

#me-canvas-host canvas{display:block;cursor:crosshair}

.me-toolbar{display:flex;gap:6px;padding:8px 12px;background:#1a1c20;border-bottom:1px solid var(--line);align-items:center;flex-wrap:wrap}

.me-btn{background:#2c2f35;border:1px solid var(--line);border-radius:8px;padding:7px 14px;cursor:pointer;text-align:center;font-size:13px;color:#fff;transition:.12s}

.me-btn:hover{background:#3a3f47;border-color:var(--accent)}

.me-btn:active{transform:translateY(1px)}

.me-sidebar{position:absolute;right:14px;top:14px;width:200px;background:rgba(28,30,34,.92);border:1px solid var(--line);border-radius:12px;padding:12px;backdrop-filter:blur(4px);font-size:13px;z-index:51;pointer-events:auto}

.me-title{font-size:11px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}

.me-muted{color:var(--muted);font-size:11px;text-align:center;padding:10px;line-height:1.5}

.me-row{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:12px;color:#d0d0d0}

.me-row span{min-width:24px;color:var(--muted);font-size:11px}

.me-num{width:60px;padding:4px 6px;border-radius:6px;border:1px solid var(--line);background:#1c1c1c;color:#fff;font-size:12px;outline:none}

.me-num:focus{border-color:var(--accent)}

.me-text{flex:1;padding:4px 6px;border-radius:6px;border:1px solid var(--line);background:#1c1c1c;color:#fff;font-size:12px;outline:none}

.me-text:focus{border-color:var(--accent)}

.me-hint{font-size:10px;color:var(--muted);font-style:italic;margin-top:2px}

.me-select{flex:1;padding:4px 6px;border-radius:6px;border:1px solid var(--line);background:#1c1c1c;color:#fff;font-size:12px;outline:none}

.me-select:focus{border-color:var(--accent)}

.me-btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#1a1a1a;border:none;font-weight:700}



/* ============ MOBILE TOUCH JOYSTICKS ============ */

/* Prevent page scroll/zoom on touch devices */

html, body {

  touch-action: none;

  -webkit-touch-callout: none;

  -webkit-user-select: none;

  user-select: none;

  overscroll-behavior: none;

  overflow: hidden;

  position: fixed;

  width: 100%;

  height: 100%;

}



.joystick-container {

  position: fixed;

  bottom: 65px;

  z-index: 100;

  pointer-events: auto;

  touch-action: none;

}

.joystick-hidden {

  display: none !important;

}

.joystick-left {

  left: 40px;

}

.joystick-right {

  right: 40px;

}



.joystick-outer {

  width: 100%;

  height: 100%;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);

  border: 2px solid rgba(255,177,43,0.25);

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  backdrop-filter: blur(4px);

  box-shadow: 0 0 30px rgba(0,0,0,0.4);

}



.joystick-knob {

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background: radial-gradient(circle at 35% 35%, rgba(255,177,43,0.6), rgba(255,91,59,0.4));

  border: 2px solid rgba(255,177,43,0.5);

  position: absolute;

  transition: none;

  box-shadow: 0 4px 15px rgba(0,0,0,0.3);

  will-change: transform;

}



/* Joystick labels (subtle) */

.joystick-left .joystick-outer::after {

  content: '';

  position: absolute;

  width: 20px;

  height: 20px;

  border-top: 2px solid rgba(255,177,43,0.15);

  border-right: 2px solid rgba(255,177,43,0.15);

  transform: rotate(315deg);

  opacity: 0.5;

}

.joystick-right .joystick-outer::after {

  content: '';

  position: absolute;

  width: 24px;

  height: 24px;

  border: 2px solid rgba(255,177,43,0.15);

  border-radius: 50%;

  opacity: 0.5;

}

/* Joystick function labels (follow the joystick, not the screen side) */

#joystick-move .joystick-outer::after {

  content: 'DRIVE';

  position: absolute;

  top: 100%;

  left: 50%;

  transform: translate(-50%, 10px);

  width: auto;

  height: auto;

  border: none;

  border-radius: 0;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 2px;

  color: rgba(255, 177, 43, 0.8);

  background: rgba(0, 0, 0, 0.45);

  padding: 3px 8px;

  border-radius: 6px;

  opacity: 1;

  text-shadow: none;

  white-space: nowrap;

}

#joystick-turret .joystick-outer::after {

  content: 'TURRET';

  position: absolute;

  top: 100%;

  left: 50%;

  transform: translate(-50%, 10px);

  width: auto;

  height: auto;

  border: none;

  border-radius: 0;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 2px;

  color: rgba(255, 177, 43, 0.8);

  background: rgba(0, 0, 0, 0.45);

  padding: 3px 8px;

  border-radius: 6px;

  opacity: 1;

  text-shadow: none;

  white-space: nowrap;

}



/* Hide joysticks on desktop (show only on touch devices) */

@media (hover: hover) and (pointer: fine) {

  .joystick-container {

    display: none !important;

  }

}



/* Responsive joystick sizes for smaller screens */

@media (max-width: 500px) {

  .joystick-container {

    bottom: 50px;

  }

  .joystick-left {

    left: 35px;

  }

  .joystick-right {

    right: 35px;

  }

}



/* Mobile-friendly HUD adjustments */

@media (max-width: 768px) {

  #speed-readout {

    left: 8px;

    padding: 5px 10px;

    font-size: 11px;

    z-index: 50;

  }

  #speed-readout span {

    font-size: 18px;

  }

  #leaderboard {

    font-size: 10px;

    min-width: 120px;

    right: 8px;

    top: 8px;

    padding: 8px 10px;

  }

  #minimap-btn {

    width: 60px;

    height: 60px;

    top: 8px;

    left: 8px;

  }

  #menu-btn {

    width: 60px;

    height: 60px;

    top: 72px;

    left: 8px;

  }

  #minimap-btn svg {

    width: 36px;

    height: 36px;

  }

  #menu-btn svg {

    width: 36px;

    height: 36px;

  }

  .map-key-hint{width:18px;height:18px;font-size:9px}

  #hp-wrap {

    width: 280px;

    height: 12px;

    left: 50%;

    transform: translateX(-50%);

  }

  #hp-text {

    font-size: 9px;

  }

  #camo-indicator {

    font-size: 9px;

    padding: 2px 6px;

  }

  #drown-bar-wrap {

    width: 160px;

    height: 6px;

  }

  .menu-card {

    padding: 20px 18px;

    width: 300px;

  }

  .title {

    font-size: 30px;

  }

  .tank-grid {

    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

  }

}



/* ============ CLAN SYSTEM STYLING ============ */



/* Clan menu cards - dark gray theme */

.clan-menu-card {

  background: linear-gradient(145deg, #2a2a2a, #1a1a1a);

  border: 2px solid #3a3a3a;

  box-shadow: 

    0 8px 32px rgba(0, 0, 0, 0.6),

    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  backdrop-filter: blur(10px);

}



/* Clan title styling */

.clan-title {

  font-size: 32px;

  font-weight: 800;

  letter-spacing: 4px;

  text-align: center;

  margin-bottom: 24px;

  background: linear-gradient(135deg, #ffb12b, #ff8c00);

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

  text-shadow: 0 2px 10px rgba(255, 177, 43, 0.3);

}



/* Clan menu buttons container */

.clan-menu-buttons {

  display: flex;

  flex-direction: column;

  gap: 14px;

  margin-bottom: 20px;

}



/* 3D Clan buttons */

.clan-3d-btn {

  position: relative;

  padding: 16px 24px;

  font-size: 16px;

  font-weight: 700;

  letter-spacing: 1.5px;

  text-transform: uppercase;

  border: none;

  border-radius: 14px;

  cursor: pointer;

  transition: all 0.2s ease;

  background: linear-gradient(145deg, #3a3a3a, #2a2a2a);

  color: #fff;

  box-shadow: 

    0 6px 0 #1a1a1a,

    0 8px 20px rgba(0, 0, 0, 0.4),

    inset 0 1px 0 rgba(255, 255, 255, 0.1);

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

}



.clan-3d-btn:hover {

  transform: translateY(-2px);

  box-shadow: 

    0 8px 0 #1a1a1a,

    0 12px 25px rgba(0, 0, 0, 0.5),

    inset 0 1px 0 rgba(255, 255, 255, 0.15);

}



.clan-3d-btn:active {

  transform: translateY(4px);

  box-shadow: 

    0 2px 0 #1a1a1a,

    0 4px 10px rgba(0, 0, 0, 0.3),

    inset 0 1px 0 rgba(255, 255, 255, 0.05);

}



/* Primary clan button - orange gradient */

.clan-3d-btn.btn-primary {

  background: linear-gradient(145deg, #ff8c00, #ff6b00);

  color: #1a1a1a;

  box-shadow: 

    0 6px 0 #cc5500,

    0 8px 20px rgba(255, 107, 0, 0.4),

    inset 0 1px 0 rgba(255, 255, 255, 0.3);

  text-shadow: none;

}



.clan-3d-btn.btn-primary:hover {

  background: linear-gradient(145deg, #ffa020, #ff8000);

  box-shadow: 

    0 8px 0 #cc5500,

    0 12px 25px rgba(255, 107, 0, 0.5),

    inset 0 1px 0 rgba(255, 255, 255, 0.4);

}



.clan-3d-btn.btn-primary:active {

  box-shadow: 

    0 2px 0 #cc5500,

    0 4px 10px rgba(255, 107, 0, 0.3),

    inset 0 1px 0 rgba(255, 255, 255, 0.2);

}



/* Danger clan button - red gradient */

.clan-3d-btn.btn-danger {

  background: linear-gradient(145deg, #ff4444, #cc0000);

  color: #fff;

  box-shadow: 

    0 6px 0 #990000,

    0 8px 20px rgba(204, 0, 0, 0.4),

    inset 0 1px 0 rgba(255, 255, 255, 0.2);

}



.clan-3d-btn.btn-danger:hover {

  background: linear-gradient(145deg, #ff6666, #dd0000);

  box-shadow: 

    0 8px 0 #990000,

    0 12px 25px rgba(204, 0, 0, 0.5),

    inset 0 1px 0 rgba(255, 255, 255, 0.3);

}



.clan-3d-btn.btn-danger:active {

  box-shadow: 

    0 2px 0 #990000,

    0 4px 10px rgba(204, 0, 0, 0.3),

    inset 0 1px 0 rgba(255, 255, 255, 0.1);

}



/* Clan visibility segmented control */

.clan-visibility-seg {

  display: flex;

  border: 2px solid #3a3a3a;

  border-radius: 12px;

  overflow: hidden;

  margin-bottom: 12px;

  background: #1a1a1a;

  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);

}



.clan-visibility-seg .seg-opt {

  flex: 1;

  text-align: center;

  padding: 14px;

  cursor: pointer;

  background: #1a1a1a;

  font-size: 15px;

  font-weight: 600;

  color: #888;

  transition: all 0.2s ease;

  border-right: 1px solid #3a3a3a;

}



.clan-visibility-seg .seg-opt:last-child {

  border-right: none;

}



.clan-visibility-seg .seg-opt.active {

  background: linear-gradient(145deg, #ff8c00, #ff6b00);

  color: #1a1a1a;

  font-weight: 800;

  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2);

}



.clan-visibility-seg .seg-opt:hover:not(.active) {

  background: #2a2a2a;

  color: #fff;

}



/* Clan hint text */

.clan-hint {

  font-size: 12px;

  color: #ffaa00;

  background: rgba(255, 170, 0, 0.1);

  border: 1px solid rgba(255, 170, 0, 0.3);

  border-radius: 8px;

  padding: 10px 14px;

  margin: 12px 0;

  text-align: center;

}



/* Clan search section */

.clan-search-section {

  background: rgba(0, 0, 0, 0.3);

  border: 1px solid #3a3a3a;

  border-radius: 12px;

  padding: 18px;

  margin-bottom: 20px;

}



.clan-search-row {

  display: flex;

  gap: 14px;

  margin-bottom: 14px;

}



.clan-search-col {

  flex: 1;

  display: flex;

  flex-direction: column;

}



.clan-search-section label {

  font-size: 13px;

  color: #ffb12b;

  font-weight: 600;

  margin-bottom: 6px;

  letter-spacing: 0.5px;

}



.clan-search-section input {

  background: #1a1a1a;

  border: 2px solid #3a3a3a;

  border-radius: 10px;

  padding: 12px 14px;

  color: #fff;

  font-size: 14px;

  transition: all 0.2s ease;

}



.clan-search-section input:focus {

  border-color: #ffb12b;

  box-shadow: 0 0 0 3px rgba(255, 177, 43, 0.2);

  outline: none;

}



.clan-search-section .btn {

  margin-top: 8px;

}



/* Clan list container */

.clan-list-container {

  background: rgba(0, 0, 0, 0.3);

  border: 1px solid #3a3a3a;

  border-radius: 12px;

  padding: 16px;

  max-height: 300px;

  overflow-y: auto;

}



.clan-list-title {

  font-size: 14px;

  font-weight: 700;

  color: #ffb12b;

  letter-spacing: 1.5px;

  text-transform: uppercase;

  margin-bottom: 12px;

  text-align: center;

}



.clan-list {

  max-height: 250px;

  overflow-y: auto;

}



.clan-list-item {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 14px 16px;

  background: #1a1a1a;

  border: 1px solid #3a3a3a;

  border-radius: 10px;

  margin-bottom: 8px;

  cursor: pointer;

  transition: all 0.2s ease;

}



.clan-list-item:hover {

  border-color: #ffb12b;

  background: #2a2a2a;

  transform: translateX(4px);

}



.clan-list-item-name {

  font-weight: 700;

  font-size: 15px;

  color: #fff;

}



.clan-list-item-info {

  font-size: 12px;

  color: #888;

  margin-top: 4px;

}



.clan-list-item-action {

  padding: 8px 16px;

  background: linear-gradient(145deg, #ff8c00, #ff6b00);

  color: #1a1a1a;

  border-radius: 8px;

  font-weight: 700;

  font-size: 12px;

  text-transform: uppercase;

}



/* Clan UI card */

.clan-ui-card {

  max-width: 800px;

}



.clan-ui-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 20px;

  padding-bottom: 16px;

  border-bottom: 2px solid #3a3a3a;

}



.clan-ui-rank-badge {

  background: linear-gradient(145deg, #ffb12b, #ff8c00);

  color: #1a1a1a;

  padding: 8px 16px;

  border-radius: 20px;

  font-weight: 800;

  font-size: 14px;

  letter-spacing: 1px;

  box-shadow: 0 4px 15px rgba(255, 177, 43, 0.3);

}



.clan-ui-info {

  display: flex;

  gap: 30px;

  margin-bottom: 24px;

  padding: 16px;

  background: rgba(0, 0, 0, 0.3);

  border: 1px solid #3a3a3a;

  border-radius: 12px;

}



.clan-ui-stat {

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.clan-stat-label {

  font-size: 12px;

  color: #888;

  text-transform: uppercase;

  letter-spacing: 1px;

}



.clan-stat-value {

  font-size: 18px;

  font-weight: 700;

  color: #ffb12b;

}



.clan-ui-section {

  margin-bottom: 24px;

}



.clan-section-title {

  font-size: 14px;

  font-weight: 700;

  color: #ffb12b;

  letter-spacing: 1.5px;

  text-transform: uppercase;

  margin-bottom: 12px;

}



.clan-members-list {

  max-height: 200px;

  overflow-y: auto;

  background: rgba(0, 0, 0, 0.3);

  border: 1px solid #3a3a3a;

  border-radius: 10px;

  padding: 12px;

}



.clan-member-item {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 10px 14px;

  background: #1a1a1a;

  border: 1px solid #3a3a3a;

  border-radius: 8px;

  margin-bottom: 8px;

}



.clan-member-name {

  font-weight: 600;

  color: #fff;

}



.clan-member-rank {

  font-size: 12px;

  padding: 4px 10px;

  border-radius: 12px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



.clan-member-rank.owner {

  background: linear-gradient(145deg, #ffb12b, #ff8c00);

  color: #1a1a1a;

}



.clan-member-rank.admin {

  background: linear-gradient(145deg, #9b59b6, #8e44ad);

  color: #fff;

}



.clan-member-rank.member {

  background: #3a3a3a;

  color: #888;

}



/* New Clan UI Layout */

.clan-ui-container {

  position: relative;

  width: 100%;

  max-width: 1200px;

  margin: 0 auto;

  padding: 20px;

}



.clan-ui-background {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(145deg, #2a2a2a, #1a1a1a);

  border: 2px solid #3a3a3a;

  border-radius: 16px;

  box-shadow: 

    0 8px 32px rgba(0, 0, 0, 0.6),

    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  z-index: 0;

}



.clan-ui-header-new {

  position: relative;

  z-index: 1;

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 10px;

  padding: 0 10px;

}



.clan-ui-separator {

  position: relative;

  z-index: 1;

  text-align: center;

  color: #ffffff;

  font-size: 16px;

  font-weight: bold;

  margin-bottom: 20px;

  letter-spacing: 2px;

}



.clan-member-list-container {

  position: relative;

  z-index: 1;

  background: rgba(0, 0, 0, 0.4);

  border: 2px solid rgba(255, 200, 50, 0.4);

  border-radius: 12px;

  padding: 15px;

  margin-bottom: 20px;

  max-width: 200px;

  position: absolute;

  top: 120px;

  left: 20px;

}



.clan-member-list-header {

  font-size: 14px;

  font-weight: 700;

  color: #ffffff;

  text-transform: uppercase;

  letter-spacing: 1.5px;

  margin-bottom: 10px;

  padding-bottom: 8px;

  border-bottom: 1px solid #3a3a3a;

}



.clan-members-list-new {

  max-height: 220px;

  overflow-y: auto;

}



.clan-members-list-new .clan-member-item {

  background: rgba(42, 42, 42, 0.8);

  border: 1px solid #3a3a3a;

  padding: 8px 12px;

  margin-bottom: 6px;

  border-radius: 6px;

}



.clan-chat-container {

  position: relative;

  z-index: 1;

  background: rgba(0, 0, 0, 0.4);

  border: 2px solid rgba(255, 255, 255, 0.4);

  border-radius: 12px;

  padding: 15px;

  margin-bottom: 20px;

  margin-left: 196px;

  max-width: calc(100% - 196px);

  overflow: hidden;

}



.clan-chat-header {

  font-size: 14px;

  font-weight: 700;

  color: #ffffff;

  text-transform: uppercase;

  letter-spacing: 1.5px;

  margin-bottom: 10px;

  padding-bottom: 8px;

  border-bottom: 1px solid #3a3a3a;

}



.clan-chat-messages {

  max-height: 300px;

  overflow-y: auto;

  background: rgba(0, 0, 0, 0.3);

  border: 1px solid #3a3a3a;

  border-radius: 8px;

  padding: 12px;

  margin-bottom: 12px;

  font-size: 22px;

}



.clan-chat-message {

  margin-bottom: 10px;

  padding: 8px 12px;

  background: rgba(42, 42, 42, 0.6);

  border-radius: 6px;

  border-left: 3px solid #ffb12b;

  max-width: 100%;

  overflow-wrap: anywhere;

  word-break: break-word;

}



.clan-chat-message-name {

  font-weight: 700;

  color: #ffb12b;

  margin-right: 8px;

  overflow-wrap: anywhere;

}



.clan-chat-message-rank {

  font-size: 12px;

  padding: 2px 6px;

  border-radius: 4px;

  font-weight: 700;

  text-transform: uppercase;

  margin-right: 8px;

}



.clan-chat-message-rank.owner {

  background: linear-gradient(145deg, #ffb12b, #ff8c00);

  color: #1a1a1a;

}



.clan-chat-message-rank.admin {

  background: linear-gradient(145deg, #9b59b6, #8e44ad);

  color: #fff;

}



.clan-chat-message-rank.member {

  background: #3a3a3a;

  color: #888;

}



.clan-chat-message-text {

  display: block;

  margin-top: 4px;

  color: #ffffff;

  word-wrap: break-word;

  overflow-wrap: anywhere;

  text-align: left;

}



.clan-chat-message-time {

  font-size: 11px;

  color: #9aa2ad;

  margin-left: 8px;

  vertical-align: middle;

  white-space: nowrap;

}



/* Back buttons use the left-arrow icon */
.back-ico {

  width: 14px;

  height: 14px;

  vertical-align: -2px;

  margin-right: 6px;

  object-fit: contain;

}

.clan-ui-back-arrow .back-ico {

  margin-right: 0;

}

/* Leave Clan button: logout icon */
#btn-leave-clan .logout-ico {

  width: 26px;

  height: 26px;

  display: block;

  object-fit: contain;

}

#menu-clan-ui:not(.canvas-mode) #btn-leave-clan {

  margin-top: 10px;

}

#menu-clan-ui:not(.canvas-mode) #btn-leave-clan .logout-ico {

  width: 18px;

  height: 18px;

  margin: 0 auto;

}



.clan-chat-input-container {

  display: flex;

  gap: 10px;

}



.clan-chat-input {

  flex: 1;

  background: rgba(42, 42, 42, 0.8);

  border: 1px solid #3a3a3a;

  border-radius: 8px;

  padding: 12px 16px;

  color: #ffffff;

  font-size: 16px;

  outline: none;

}



.clan-chat-input:focus {

  border-color: #ffb12b;

}



.clan-chat-input::placeholder {

  color: #666;

}



.clan-chat-send-btn {

  padding: 12px 24px;

  font-size: 14px;

}



.clan-ui-actions-new {

  position: relative;

  z-index: 1;

  display: flex;

  gap: 12px;

  justify-content: center;

  margin-top: 20px;

  margin-left: 240px;

}



.clan-action-buttons {

  display: flex;

  gap: 12px;

  flex-wrap: wrap;

}



.clan-action-buttons .btn {

  flex: 1;

  min-width: 150px;

  margin-top: 0;

}



/* Clan scrollbar styling */

.clan-list::-webkit-scrollbar,

.clan-members-list::-webkit-scrollbar {

  width: 6px;

}



.clan-list::-webkit-scrollbar-thumb,

.clan-members-list::-webkit-scrollbar-thumb {

  background: #ffb12b;

  border-radius: 3px;

}



.clan-list::-webkit-scrollbar-track,

.clan-members-list::-webkit-scrollbar-track {

  background: #1a1a1a;

  border-radius: 3px;

}



/* Responsive adjustments for clan menus */

@media (max-width: 768px) {

  .clan-search-row {

    flex-direction: column;

    gap: 10px;

  }

  

  .clan-ui-info {

    flex-direction: column;

    gap: 12px;

  }

  

  .clan-action-buttons {

    flex-direction: column;

  }

  

  .clan-ui-header {

    flex-direction: column;

    gap: 12px;

    text-align: center;

  }

  

  .clan-title {

    font-size: 24px;

  }

}



/* ===== Landscape phone / very short screens ===== */

@media (max-height: 500px) {

  #speed-readout {

    left: 6px;

    padding: 3px 8px;

    font-size: 10px;

  }

  #speed-readout span { font-size: 14px; }

  #leaderboard {

    right: 6px;

    top: 6px;

    min-width: 90px;

    font-size: 9px;

    padding: 5px 8px;

  }

  #lb-list li { font-size: 10px; padding: 1px 0; }

  #lb-list li::before { width: 14px; }

  #minimap-btn {

    width: 50px;

    height: 50px;

    top: 6px;

    left: 6px;

    border-radius: 8px;

  }

  #menu-btn {

    width: 50px;

    height: 50px;

    top: 60px;

    left: 6px;

    border-radius: 8px;

  }

  #minimap-btn svg { width: 30px; height: 30px; }

  #menu-btn svg { width: 30px; height: 30px; }

  .map-key-hint{width:16px;height:16px;font-size:8px}

  #hp-wrap {

    width: 200px;

    height: 11px;

  }

  #hp-text {

    font-size: 8px;

  }

  #camo-indicator {

    font-size: 8px;

    padding: 1px 5px;

    gap: 4px;

  }

  #drown-bar-wrap {

    width: 110px;

    height: 5px;

  }

  #net-status {

    top: 5px;

    font-size: 10px;

    padding: 2px 10px;

  }

  .cam-rotate-btns {

    left: 30px;

    bottom: calc(44px + 120px);

  }

  .cam-rot-btn {

    width: 36px;

    height: 36px;

    font-size: 14px;

    border-width: 1.5px;

  }

  .joystick-container {

    bottom: 44px;

  }

  .joystick-left { left: 30px; }

  .joystick-right { right: 30px; }

}



@media (max-height: 400px) {

  #speed-readout { padding: 2px 6px; }

  #speed-readout span { font-size: 12px; }

  #leaderboard { right: 4px; top: 4px; min-width: 70px; padding: 4px 6px; }

  #lb-list li { font-size: 9px; }

  #lb-list li::before { width: 10px; }

  #minimap-btn { width: 40px; height: 40px; top: 4px; left: 4px; }

  #menu-btn { width: 40px; height: 40px; top: 48px; left: 4px; }

  #minimap-btn svg { width: 24px; height: 24px; }

  #menu-btn svg { width: 24px; height: 24px; }

  .map-key-hint{width:14px;height:14px;font-size:7px}

  #hp-wrap { width: 150px; }

  #hp-text { font-size: 7px; }

  #camo-indicator { font-size: 7px; padding: 1px 4px; }

  #drown-bar-wrap { width: 90px; }

  .cam-rot-btn { width: 30px; height: 30px; font-size: 12px; }

}



/* ===== Proportional UI scaling ===== */

.btn-play { font-size: calc(var(--ui-scale) * 22px); padding: calc(var(--ui-scale) * 18px) calc(var(--ui-scale) * 60px); min-width: calc(var(--ui-scale) * 221px); bottom: calc(var(--ui-scale) * 70px); }

.btn-gamemode { width: calc(var(--ui-scale) * 56px); height: calc(var(--ui-scale) * 56px); padding: 0; box-sizing: border-box; font-size: calc(var(--ui-scale) * 28px); }

.btn-gamemode img { width: calc(var(--ui-scale) * 32px); height: calc(var(--ui-scale) * 32px); object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5)); }

.btn { font-size: calc(var(--ui-scale) * 14px); padding: calc(var(--ui-scale) * 10px) calc(var(--ui-scale) * 18px); border-radius: calc(var(--ui-scale) * 6px); }

.btn-primary { font-size: calc(var(--ui-scale) * 14px); padding: calc(var(--ui-scale) * 10px) calc(var(--ui-scale) * 18px); }

.btn-subtle { font-size: calc(var(--ui-scale) * 13px); padding: calc(var(--ui-scale) * 6px) calc(var(--ui-scale) * 14px); }

.menu-card { padding: calc(var(--ui-scale) * 18px); }

.title { font-size: calc(var(--ui-scale) * 28px); margin-bottom: calc(var(--ui-scale) * 18px); }

.menu-card h2 { font-size: calc(var(--ui-scale) * 18px); margin-bottom: calc(var(--ui-scale) * 10px); }

.profile { top: calc(var(--ui-scale) * 6px); left: calc(var(--ui-scale) * 12px); padding: calc(var(--ui-scale) * 10px) calc(var(--ui-scale) * 20px); }

.profile-name { font-size: calc(var(--ui-scale) * 16px); }
.profile-strip-avatar { width: calc(var(--ui-scale) * 34px); height: calc(var(--ui-scale) * 34px); }
.profile-top .profile-clan { color: #ffd700; font-weight: 700; font-size: calc(var(--ui-scale) * 13px); }

.profile-bottom { font-size: calc(var(--ui-scale) * 12px); gap: calc(var(--ui-scale) * 10px); }

.profile-sep { margin: calc(var(--ui-scale) * 4px) 0; }

.main-menu-side { left: calc(var(--ui-scale) * 12px); top: 54%; gap: calc(var(--ui-scale) * 10px); }

.main-menu-side .btn { padding: calc(var(--ui-scale) * 10px) calc(var(--ui-scale) * 18px); font-size: calc(var(--ui-scale) * 14px); }

.main-menu-crates { top: calc(var(--ui-scale) * 35px); right: calc(var(--ui-scale) * 30px); padding: calc(var(--ui-scale) * 12px); gap: calc(var(--ui-scale) * 8px); }

.crate-slot { width: calc(var(--ui-scale) * 64px); height: calc(var(--ui-scale) * 64px); font-size: calc(var(--ui-scale) * 24px); }

.back-bar { gap: calc(var(--ui-scale) * 8px); }

.back-bar .btn { font-size: calc(var(--ui-scale) * 12px); padding: calc(var(--ui-scale) * 6px) calc(var(--ui-scale) * 12px); }

.tank-grid { gap: calc(var(--ui-scale) * 8px); }

.tank-grid .tank-option { font-size: calc(var(--ui-scale) * 11px); }

.storage-grid { gap: calc(var(--ui-scale) * 8px); }

.slider-label { font-size: calc(var(--ui-scale) * 14px); min-width: calc(var(--ui-scale) * 60px); }



/* ===== Compact landscape menu layout (overrides scaling on small screens) ===== */

@media (orientation: landscape) and (max-height: 520px) {

  .menu-card { padding: 14px; width: 320px; }

  .menu-card.wide { width: 90vw; }

  .title { font-size: 22px; margin-bottom: 10px; }

  h2 { font-size: 15px; margin-bottom: 8px; }

  .tank-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 6px; }

  .storage-grid { gap: 6px; }

  .btn { padding: 8px 14px; font-size: 12px; }

  .back-bar .btn { padding: 6px 12px; font-size: 11px; }

  #menu-settings .menu-card { width: 100%; max-height: 100vh; }

}



@media (orientation: landscape) and (max-height: 400px) {

  .menu-card { padding: 10px; width: 280px; }

  .title { font-size: 18px; margin-bottom: 6px; }

  h2 { font-size: 13px; margin-bottom: 4px; }

  .tank-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 4px; }

  .btn { padding: 6px 10px; font-size: 11px; }

}



/* ===== Fullscreen / Orientation Prompt ===== */

.fullscreen-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:999;

  background-color:#121212;

  background-image:linear-gradient(135deg,#121212 25%,#1a1a1a 25%,#1a1a1a 50%,#121212 50%,#121212 75%,#1a1a1a 75%,#1a1a1a);

  background-size:40px 40px;

  animation:stripeMove 4s linear infinite}

/* Same warning as `.menu` above: never add a blanket `> *` positioning rule to
   this. Its children include `.fs-close{position:absolute}`, and forcing them
   to `position:relative` moves the close button out from under the cursor. */

.fullscreen-icon{font-size:64px;line-height:1;margin-bottom:6px;opacity:0.3;letter-spacing:0}

.fs-close{position:absolute;top:16px;right:20px;font-size:22px;cursor:pointer;color:#666;z-index:1000;transition:.15s;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.fs-close:hover{color:#fff;background:rgba(255,255,255,.08)}

.fullscreen-hint{font-size:13px;color:var(--muted);margin-top:6px}

.fullscreen-hint kbd{background:#2a2a2a;border:1px solid var(--line);border-radius:4px;padding:2px 8px;font-family:inherit;font-size:12px;color:#ddd}

#btn-enter-fullscreen{padding:18px 40px;font-size:18px;width:100%;margin-top:24px;border-radius:14px}

#btn-dismiss-fullscreen{padding:14px 20px;font-size:13px;width:100%;margin-top:8px;border-radius:10px;opacity:0.7}

#btn-dismiss-fullscreen:hover{opacity:1}

.fs-icon{font-size:20px;display:inline-block;vertical-align:middle}



/* Platform-specific sections */

.fs-section{animation:pop .25s ease}

.fs-section .fs-step{margin:8px 0;line-height:1.6;font-size:13px;color:var(--muted)}



/* Rotate icon animation */

.rotate-icon-wrap{margin:10px auto 18px}

.rotate-icon{font-size:64px;display:inline-block;animation:pwspin 2s ease-in-out infinite;opacity:0.6}

@keyframes pwspin{0%,100%{transform:rotate(0deg)}50%{transform:rotate(90deg)}}



/* Android buttons */

#btn-android-fullscreen{padding:18px 40px;font-size:18px;width:100%;margin-top:20px;border-radius:14px}

#btn-android-play{padding:14px 20px;font-size:13px;width:100%;margin-top:8px;border-radius:10px;opacity:0.7}

#btn-android-play:hover{opacity:1}



/* iOS dismiss */

#btn-ios-dismiss{padding:14px 20px;font-size:13px;width:100%;margin-top:20px;border-radius:10px;opacity:0.7}

#btn-ios-dismiss:hover{opacity:1}



@media(max-width:500px){

  #btn-enter-fullscreen{padding:16px 30px;font-size:16px}

  #btn-dismiss-fullscreen{padding:12px 16px;font-size:12px}

  #btn-android-fullscreen{padding:16px 30px;font-size:16px}

  #btn-android-play{padding:12px 16px;font-size:12px}

  #btn-ios-dismiss{padding:12px 16px;font-size:12px}

}



/* ===== In-game portrait warning ===== */

#portrait-warning{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}

.portrait-warning-box{background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);border-radius:16px;padding:18px 24px;display:flex;align-items:center;gap:12px;font-size:15px;color:#fff;font-weight:600;animation:pwfade .3s ease}

.portrait-icon{font-size:32px;animation:pwspin 2s ease-in-out infinite;display:inline-block}

@keyframes pwspin{0%,100%{transform:rotate(0deg)}50%{transform:rotate(90deg)}}

@keyframes pwfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}



/* ===== Editor123 ===== */

.e123-tbtn {

  padding: 5px 12px;

  background: #2a2f38;

  border-radius: 6px;

  cursor: pointer;

  font-size: 12px;

  color: #ccc;

  transition: .15s;

  white-space: nowrap;

  line-height: 1.6;

}

.e123-tbtn:hover { background: #383e48; color: #fff; }

.e123-tbtn.e-pri { background: #ffb12b; color: #111; font-weight: 600; }

.e123-tbtn.e-pri:hover { background: #ffc04a; }

.e123-menu-card:hover { border-color: #5a6a8a !important; }

.e123-lib-item:hover { border-color: #5a6a8a !important; }

#editor123-overlay input[type="file"] { display: none; }

#e123-canvas, #e123-map-canvas { display: block; }

.e123-launcher-btn:hover { border-color: #ffb12b !important; background: linear-gradient(145deg,#2a303a,#222830) !important; }

#e123-menu-clone { pointer-events: none !important; }

#e123-menu-clone .btn, #e123-menu-clone .btn-primary, #e123-menu-clone .btn-subtle,

#e123-menu-clone .btn-back { opacity: 0.5; }

#e-view-3d canvas { display: block; }



/* ===== Rendering Tips Menu ===== */

.rt-device-wrap {

  position:relative; width:90px; height:90px; margin:10px auto 0;

  display:flex; align-items:center; justify-content:center;

}

.rt-device {

  width:32px; height:54px; border:3px solid #ccc; border-radius:6px;

  position:relative; background:#2a2a2a;

  animation: rtRotate 3s ease-in-out infinite;

}

.rt-notch {

  width:10px; height:3px; background:#111; border-radius:0 0 3px 3px;

  position:absolute; top:0; left:50%; transform:translateX(-50%);

}

.rt-screen-area {

  position:absolute; inset:6px 3px; background:#4a6a8a; border-radius:2px;

}

.rt-arrow {

  position:absolute; font-size:18px; color:var(--accent); opacity:0;

  animation: rtArrow 3s ease-in-out infinite;

}

.rt-arrow-a { left:-2px; }

.rt-arrow-b { right:-2px; }

@keyframes rtRotate {

  0%, 30% { transform:rotate(0deg); }

  45%, 70% { transform:rotate(90deg); }

  85%, 100% { transform:rotate(0deg); }

}

@keyframes rtArrow {

  0%, 30% { opacity:0; }

  38% { opacity:1; }

  70% { opacity:1; }

  78% { opacity:0; }

  100% { opacity:0; }

}

.rt-check-row {

  display:flex; align-items:center; justify-content:center; gap:8px;

  padding:6px 0 4px; cursor:pointer; user-select:none;

}

.rt-checkbox {

  width:18px; height:18px; border:2px solid var(--muted); border-radius:4px;

  flex-shrink:0; display:flex; align-items:center; justify-content:center;

  transition:.15s; position:relative;

}

.rt-checkbox.checked { border-color:var(--accent); background:var(--accent); }

.rt-checkbox.checked::after {

  content:"✓"; color:#1a1a1a; font-size:14px; font-weight:800; line-height:1;

}

.rt-check-label { font-size:12px; color:var(--muted); }

.rt-check-row:hover .rt-checkbox { border-color:var(--accent); }

.rt-check-row:hover .rt-check-label { color:#ddd; }



/* ===== ANIMATIONS & POLISH ===== */



/* Main menu entrance stagger */

.main-menu-side .btn {

  animation: slideIn .4s ease backwards;

}

.main-menu-side .btn:nth-child(1) { animation-delay: 0.05s; }

.main-menu-side .btn:nth-child(2) { animation-delay: 0.12s; }

.main-menu-side .btn:nth-child(3) { animation-delay: 0.19s; }

.main-menu-side .btn:nth-child(4) { animation-delay: 0.26s; }

.main-menu-side .btn:nth-child(5) { animation-delay: 0.33s; }

@keyframes slideIn {

  from { opacity: 0; transform: translateX(-24px); }

  to { opacity: 1; transform: translateX(0); }

}



/* PLAY button glow pulse */

.btn-play {

  animation: playGlow 3s ease-in-out infinite;

}

.btn-play:hover {

  animation: none;

}

@keyframes playGlow {

  0%, 100% { box-shadow: 0 0 12px rgba(255,255,255,0.08); }

  50% { box-shadow: 0 0 30px rgba(255,255,255,0.18), 0 0 60px rgba(255,255,255,0.05); }

}



/* Crate slot gentle bob */

.crate-slot {

  animation: crateBob 3s ease-in-out infinite;

}

.crate-slot:nth-child(1) { animation-delay: 0s; }

.crate-slot:nth-child(2) { animation-delay: 0.4s; }

.crate-slot:nth-child(3) { animation-delay: 0.8s; }

.crate-slot:nth-child(4) { animation-delay: 1.2s; }

@keyframes crateBob {

  0%, 100% { transform: translateY(0); }

  50% { transform: translateY(-4px); }

}

@keyframes rewardPop {
  0% { opacity: 0; transform: scale(0.4) translateY(20px); }
  70% { opacity: 1; transform: scale(1.05) translateY(-3px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}



/* Side buttons hover glow */

.main-menu-side .btn:hover {

  box-shadow: 0 0 24px rgba(255,255,255,0.08);

}

.main-menu-side .btn-subtle:hover {

  box-shadow: 0 0 16px rgba(255,255,255,0.05);

}



/* Profile slide-in */

.profile {

  animation: profileIn .5s ease backwards;

  animation-delay: 0.1s;

}

@keyframes profileIn {

  from { opacity: 0; transform: translateX(-20px); }

  to { opacity: 1; transform: translateX(0); }

}



/* Enhanced button click */

.btn:active {

  transform: scale(0.96);

}

.btn-play:active {

  transform: translateY(1px) scale(0.96);

}



/* Menu card bounce-in upgrade */

@keyframes pop {

  from { transform: translateY(20px) scale(0.95); opacity: 0; }

  60% { transform: translateY(-4px) scale(1.01); }

  to { transform: none; opacity: 1; }

}



/* Cartoony toast */

#toast {

  border: 1px solid rgba(255,255,255,0.2);

  animation: toastBounce 5s forwards;

}

@keyframes toastBounce {

  0% { opacity: 0; transform: translate(-50%, 20px) scale(0.9); }

  12% { opacity: 1; transform: translate(-50%, -4px) scale(1.05); }

  20% { transform: translate(-50%, 0) scale(1); }

  80% { opacity: 1; transform: translateX(-50%); }

  100% { opacity: 0; transform: translate(-50%, -10px); }

}



/* HP bar subtle glow */

#hp-bar {
  box-shadow: 0 0 10px rgba(58, 190, 255, 0.4);
}



/* Room row hover lift */

.room-row:hover {

  transform: translateY(-1px);

  box-shadow: 0 4px 12px rgba(0,0,0,0.3);

}



/* Tank card hover lift */

.tank-card:hover {

  transform: translateY(-2px);

  box-shadow: 0 6px 16px rgba(0,0,0,0.3);

}



/* Settings tab active underline animation */

.settings-tab.active {

  position: relative;

}

.settings-tab.active::after {

  content: '';

  position: absolute;

  right: 0;

  bottom: -1px;

  width: 3px;

  height: 60%;

  background: var(--accent);

  border-radius: 2px;

  animation: tabSlide .25s ease;

}

@keyframes tabSlide {

  from { height: 0; opacity: 0; }

  to { height: 60%; opacity: 1; }

}



/* Button hover arrow on back buttons */

.btn-back {

  position: relative;

}

.btn-back:hover::before {

  content: '←';

  position: absolute;

  left: -4px;

  opacity: 0;

  animation: backArrow .2s ease forwards;

}

@keyframes backArrow {

  to { left: -16px; opacity: 1; }

}



/* Subtle loading shimmer on connecting screen */

#connecting h2 {

  background: linear-gradient(90deg, var(--muted), var(--accent), var(--muted));

  background-size: 200% 100%;

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

  animation: shimmer 2s linear infinite;

}

@keyframes shimmer {

  0% { background-position: 200% 0; }

  100% { background-position: -200% 0; }

}



/* collections entrance */

.collections-fullscreen {

  animation: fadeIn .3s ease;

}

@keyframes fadeIn {

  from { opacity: 0; }

  to { opacity: 1; }

}

@keyframes shopSlideDown{from{transform:translateY(-20px);opacity:0}to{transform:none;opacity:1}}



/* ===== SHOP - Cartoon Comic Style ===== */
.shop-overlay {
  position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; overflow: hidden;
  background:
    radial-gradient(circle, rgba(180,150,0,0.2) 2px, transparent 2px),
    repeating-linear-gradient(-45deg, transparent, transparent 24px, rgba(80,60,0,0.2) 24px, rgba(80,60,0,0.2) 36px),
    #ffd700;
}
.shop-header {
  position: relative; z-index: 3; margin-left: 200px;
  display: flex; align-items: center; justify-content: flex-end;
  padding: clamp(8px,1.5vh,12px) clamp(12px,2vw,24px);
  flex-shrink: 0;
}
.shop-currencies { display: flex; gap: clamp(8px,1.5vw,16px); font-size: clamp(14px,2.5vw,18px); font-weight: 800; }
.shop-coin-disp { color: #ffd700; -webkit-text-stroke: 1px #000; }
.shop-gold-disp { color: #8af; -webkit-text-stroke: 1px #000; }
.shop-body { margin-left: 200px; flex: 1; overflow: auto; position: relative; z-index: 2; }
.shop-sidebar {
  position: fixed; left: 0; top: 0; bottom: 0;
  width: 200px;
  background:
    radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px),
    #f5f0eb;
  background-size: 8px 8px;
  border-right: 3px solid #000;
  box-shadow: 4px 0 0 rgba(0,0,0,0.15);
  padding: 16px 10px;
  display: flex; flex-direction: column;
  gap: clamp(4px,0.8vh,8px);
  z-index: 20;
  overflow-y: auto;
}
.shop-store-logo {
  padding: 14px 0;
  text-align: center;
  font-size: clamp(24px,5vw,36px);
  font-weight: 900;
  color: #fff;
  letter-spacing: 4px;
  margin-bottom: 12px;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  -webkit-text-stroke: 3px #000;
  text-shadow:
    1px 1px 0 #000,
    2px 2px 0 #000,
    3px 3px 0 #000,
    4px 4px 0 #000,
    5px 5px 0 #000,
    6px 6px 0 #000;
  font-family: 'Lilita One', cursive;
  transform: rotate(-3deg);
  position: relative;
}
.shop-sidebar-section {
  padding: 12px 16px;
  cursor: pointer;
  font-size: clamp(11px,2vw,14px);
  font-weight: 800;
  color: #333;
  background: #fff;
  border: 3px solid #000;
  box-shadow: 3px 3px 0 #000;
  border-radius: 12px;
  text-align: center;
  text-transform: uppercase;
  transition: all 0.1s;
  letter-spacing: 0.5px;
  transform: rotate(-5deg);
  flex-shrink: 0;
}
.shop-sidebar-section.active { background: #ffd700; }
.shop-sidebar-section:hover { transform: rotate(-5deg) translate(-1px, -1px); box-shadow: 4px 4px 0 #000; }
.shop-sidebar-section:active { transform: rotate(-5deg) translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.shop-sidebar-back {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto 5px 0;
  padding: 8px 0;
  background: #f5f0eb;
  border: none;
  box-shadow: none;
  border-radius: 0;
  transform: rotate(-5deg);
  transition: all 0.1s;
  position: sticky;
  bottom: 0;
  z-index: 2;
  font-size: clamp(11px,2vw,14px);
  font-weight: 800;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.shop-sidebar-back:hover { transform: rotate(-5deg) translate(-1px, -1px); }
.shop-sidebar-back:active { transform: rotate(-5deg) translate(2px, 2px); }
.shop-back-section {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto 5px 0;
  padding: 8px 0;
  background: #f5f0eb;
  border: none;
  box-shadow: none;
  border-radius: 0;
  transform: rotate(-5deg);
  transition: all 0.1s;
  position: sticky;
  bottom: 0;
  z-index: 2;
}
.shop-back-section:hover { transform: rotate(-5deg) translate(-1px, -1px); }
.shop-back-section:active { transform: rotate(-5deg) translate(2px, 2px); }
.shop-back-icon { width: 100px; height: auto; display: block; pointer-events: none; }
.shop-content { padding: clamp(12px,2vw,24px); }
.shop-page {
  animation: fadeIn .3s ease;
  position: relative;
}
.shop-page::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 60px; height: 60px;
  background: radial-gradient(circle at top right, rgba(255,215,0,0.15) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 0 0 0 100%;
}
.shop-page::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 40px; height: 40px;
  background: radial-gradient(circle at bottom left, rgba(255,215,0,0.1) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 0 100% 0 0;
}
.shop-coming-soon {
  color: #666;
  font-size: clamp(16px,4vw,24px);
  font-weight: 700;
  text-align: center;
  padding: clamp(40px,8vh,80px) 0;
  font-family: 'Lilita One', cursive;
}
.shop-section-title {
  font-size: clamp(18px,3vw,24px);
  font-weight: 800;
  margin-bottom: 12px;
  color: #333;
  letter-spacing: 1px;
  -webkit-text-stroke: 1px #000;
}
.shop-timer { font-size: 13px; color: #666; margin-bottom: 20px; font-weight: 600; }
.shop-deals { display: flex; gap: 12px; flex-wrap: wrap; padding-bottom: 16px; }
.shop-deal-card {
  background: #fff;
  border: 3px solid #000;
  box-shadow: 3px 3px 0 #000;
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.1s;
  min-width: 160px;
  flex-shrink: 0;
}
.shop-deal-card:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #000; }
.shop-deal-card:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.shop-deal-card.sold-out { opacity: 0.4; cursor: default; pointer-events: none; }
.shop-deal-card.sold-out:hover { transform: none; box-shadow: 3px 3px 0 #000; }
.shop-deal-image { width: 72px; height: 72px; margin: 0 auto 10px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.shop-deal-amount { font-size: 22px; font-weight: 800; color: #333; margin-bottom: 2px; }
.shop-deal-label { font-size: 11px; color: #666; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.shop-deal-price { font-size: 14px; font-weight: 800; color: #8af; margin-bottom: 4px; }
.shop-deal-price.coins { color: #ffd700; }

/* REAL-MONEY BUNDLES. Same card as a deal so the BUNDLES page feels like part
   of the same store, with the currency-icon thumbnail replaced by the bundle's
   contents and the virtual price replaced by a real one. The price is the only
   part that is allowed to look like money rather than a game number, so it gets
   its own heavier treatment and the gold accent of the BUNDLES sidebar. */
.shop-bundle-card { min-width: 200px; }
.shop-bundle-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 72px;
  margin-bottom: 10px;
}
.shop-bundle-icons .cur-mini { width: 34px; height: 34px; }
.shop-deal-sub {
  font-size: 11px;
  color: #777;
  margin-bottom: 10px;
  font-weight: 600;
  line-height: 1.3;
}
.shop-bundle-price {
  font-size: 22px;
  font-weight: 800;
  color: #16a34a;
  letter-spacing: -0.5px;
}
/* Mid-request to Stripe. The redirect is a full page load, so a stuck card here
   only ever survives when the request failed and the click handler reset it. */
.shop-bundle-card.busy { opacity: 0.55; pointer-events: none; }
.shop-real-note {
  font-size: 11px;
  color: #777;
  font-weight: 600;
  line-height: 1.5;
  max-width: 520px;
}
.shop-deal-stock { font-size: 10px; color: #999; font-weight: 600; }
.shop-free-offer { margin-top: 24px; display: flex; gap: 16px; align-items: center; }
.shop-free-card {
  background: #fff;
  border: 3px solid #000;
  box-shadow: 3px 3px 0 #000;
  border-radius: 14px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all 0.1s;
}
.shop-free-card:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #000; }
.shop-free-card.claimed { opacity: 0.5; cursor: default; pointer-events: none; }
.shop-free-card.claimed:hover { transform: none; box-shadow: 3px 3px 0 #000; }
.shop-free-icon { font-size: 32px; font-weight: 800; color: #ffd700; font-family: 'Lilita One', cursive; -webkit-text-stroke: 1px #000; }
.shop-free-info { font-size: 12px; color: #666; font-weight: 600; }
.shop-free-btn {
  padding: 8px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  background: #ffd700;
  color: #333;
  cursor: pointer;
  white-space: nowrap;
  border: 3px solid #000;
  box-shadow: 3px 3px 0 #000;
  transition: all 0.1s;
}
.shop-free-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #000; }
.shop-free-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }

/* ===== THE BUY SCREEN: A FLATBED RAILCAR =====

   The image is a side-on flatbed wagon, 1983x793 — about 2.5:1 — with a big
   empty wooden deck across the middle third. That empty deck is the reason this
   layout works: the item sits ON it rather than floating in a panel, so the
   screen reads as "here is your parcel on a cart" instead of "here is a dialog".

   Cover, not contain: the deck has to reach both edges of the screen whatever
   the aspect ratio, or you get a letterboxed wagon floating on black with the
   buttons hanging in the gaps. The image is centred slightly above middle so the
   deck — not the wheels or the roof — lands under the item. */
.shop-buy-wrapper {
  position: absolute; inset: 0; overflow: hidden;
  z-index: 11;
  background: #1a1410;
}
.shop-buy-bg {
  position: absolute; inset: -2%;
  background: url('../assets/shop/TL_buy.png') center 42% / cover no-repeat;
  animation: fadeIn .45s ease;
}
/* A soft warm wash over the wagon so the white UI text on top of the lit
   windows stays readable, and so the item is clearly the brightest thing. */
.shop-buy-wrapper::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 45% at 50% 46%, rgba(255,214,140,.10), rgba(20,14,10,.42) 78%);
}
.shop-buy-stage {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column; align-items: center;
  /* The item block sits in the upper-middle (on the deck); the buttons are
     pinned to the bottom. padding-bottom keeps the Buy button clear of the
     wagon's wheels. */
  padding: 4vh 16px 3.2vh;
}

/* ---- the item on the deck ---- */
.shop-buy-item {
  position: relative;
  margin-top: 14vh;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  animation: buyItemIn .5s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes buyItemIn { from { opacity:0; transform: translateY(26px) scale(.8); } to { opacity:1; transform:none; } }
/* The contact shadow. Without it the icon looks pasted onto the deck rather
   than sitting on it. */
.shop-buy-shadow {
  position: absolute; left: 50%; bottom: -16px;
  width: 150px; height: 22px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0,0,0,.55), rgba(0,0,0,0) 70%);
  pointer-events: none;
}
.shop-buy-image {
  width: clamp(96px, 13vw, 150px); height: clamp(96px, 13vw, 150px);
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.55));
  user-select: none; -webkit-user-drag: none;
}
/* "x500" — the count, in the same heavy face as the rest of the shop, sitting
   BESIDE the icon as requested so the pairing is unambiguous. */
.shop-buy-count {
  font-family: 'Lilita One', 'Nunito', sans-serif;
  font-size: clamp(30px, 4.6vw, 58px);
  color: #fff;
  text-shadow: 0 3px 0 #000, 0 0 22px rgba(255,220,150,.65);
  line-height: 1;
}
.shop-buy-name {
  margin-top: 10px;
  font-size: clamp(11px, 1.5vw, 14px);
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  text-shadow: 0 2px 4px rgba(0,0,0,.9);
}

/* ---- the hold-to-buy button ---- */
.shop-buy-controls {
  margin-top: auto;                 /* pushes the pair to the bottom of the stage */
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
/* Hidden once the purchase is done — the user asked for the back button alone
   on the finished screen. */
.shop-buy-wrapper.done .shop-buy-controls,
.shop-buy-wrapper.done .shop-buy-name,
.shop-buy-wrapper.done .shop-buy-item,
.shop-buy-wrapper.done .shop-buy-shadow { display: none; }

.shop-buy-btn {
  position: relative;
  min-width: min(300px, 76vw);
  padding: 15px 30px;
  border-radius: 14px;
  border: 3px solid #000;
  background: linear-gradient(180deg, #3fbe62 0%, #2b9448 55%, #1f6f36 100%);
  box-shadow: 0 6px 0 #000, 0 12px 22px rgba(0,0,0,.45);
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
  transition: transform .1s ease, box-shadow .1s ease, filter .15s ease;
}
.shop-buy-btn:hover { filter: brightness(1.12); transform: translateY(-2px); box-shadow: 0 8px 0 #000, 0 16px 26px rgba(0,0,0,.5); }
.shop-buy-btn.pressing { transform: translateY(5px); box-shadow: 0 1px 0 #000, 0 4px 10px rgba(0,0,0,.4); filter: brightness(1.2); }
/* Cannot afford: the button is still there and still explains itself on hover,
   but it will not fill. */
.shop-buy-btn.locked { background: linear-gradient(180deg, #6b7280 0%, #4b5563 55%, #374151 100%); cursor: not-allowed; filter: none; }
.shop-buy-btn.locked:hover { transform: none; box-shadow: 0 6px 0 #000, 0 12px 22px rgba(0,0,0,.45); }

/* The three-second fill. Width is driven from JS (--hold), not by a CSS
   animation, so the ring and the timer cannot drift apart from the moment the
   purchase actually fires. */
.shop-buy-fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, rgba(255,255,255,.42), rgba(255,255,255,.12));
  pointer-events: none;
}
.shop-buy-btn-label {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.shop-buy-btn-text { font-size: 19px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0,0,0,.6); }
.shop-buy-btn-cost { display: inline-flex; align-items: center; gap: 5px; font-size: 17px; font-weight: 800; }
.shop-buy-btn-cost .cur-mini { width: 18px; height: 18px; }
.shop-buy-btn.locked .shop-buy-btn-text { color: rgba(255,255,255,.9); }

/* ---- back ---- */
.shop-buy-back, .shop-receive-back {
  margin-top: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 24px;
  border-radius: 11px;
  border: 3px solid #000;
  background: linear-gradient(180deg, #f3f5f7 0%, #d3d8de 60%, #b3bac2 100%);
  color: #23272d;
  font-size: 15px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 5px 0 #000, 0 10px 18px rgba(0,0,0,.4);
  transition: transform .1s ease, box-shadow .1s ease, filter .15s ease;
}
.shop-buy-back:hover, .shop-receive-back:hover { filter: brightness(1.06); transform: translate(-1px,-1px); box-shadow: 0 6px 0 #000, 0 14px 22px rgba(0,0,0,.45); }
.shop-buy-back:active, .shop-receive-back:active { transform: translate(3px,3px); box-shadow: 0 1px 0 #000; }
.shop-buy-back .back-ico, .shop-receive-back .back-ico { width: 16px; height: 16px; }

/* ---- the finished state: back button plus CONGRADITIONS and nothing else ---- */
.shop-buy-done { display: none; }
.shop-buy-wrapper.done .shop-buy-done {
  display: flex; flex-direction: column; align-items: center;
  margin-top: auto;
}
.shop-buy-congrats {
  font-family: 'Lilita One', 'Nunito', sans-serif;
  font-size: clamp(30px, 6.4vw, 72px);
  font-weight: 900;
  color: #fff;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 4px 0 #000, 0 0 34px rgba(255,255,255,.55);
  animation: congratsPop .55s cubic-bezier(.2,1.6,.4,1) both;
}
@keyframes congratsPop { from { opacity:0; transform: scale(.6); } to { opacity:1; transform:none; } }
/* `both` fill mode means the FROM state applies before the animation starts and
   if the animation never runs at all — a player with reduced motion switched on,
   or a browser that suppresses it — CONGRADITIONS is left permanently at 60%
   scale and 0 opacity, i.e. invisible. This pins it to the finished state in
   exactly that case and costs nothing otherwise. */
@media (prefers-reduced-motion: reduce){
  .shop-buy-congrats, .shop-receive-congrats { animation: none; opacity: 1; transform: none; }
}

/* ===== THE RECEIVE SCREEN: THE REVEAL ===== */
.shop-receive-wrapper {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #0b0908;
  z-index: 12;
}
.shop-receive-bg {
  position: absolute; inset: -2%;
  background: url('../assets/shop/TL_buy.png') center 42% / cover no-repeat;
  filter: saturate(.85) brightness(.9);
}
/* Drawn over the wagon, brought up as the item lands: this is what makes the
   wagon go dark so the rays and the icon own the screen. */
.shop-receive-dim {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 50% at 50% 48%, rgba(0,0,0,.12), rgba(0,0,0,.72) 75%);
  opacity: 0;
  transition: opacity .7s ease;
}
.shop-receive-wrapper.lit .shop-receive-dim { opacity: 1; }

/* THE LIGHT RAYS. A conic gradient spun by a keyframe; two copies at different
   speeds and opposite directions so the light looks like it is turning rather
   than like a single flat pinwheel. Masked to a circle so they do not reach the
   screen edges. */
.shop-receive-rays {
  position: absolute; left: 50%; top: 50%;
  width: 660px; height: 660px;
  margin: -330px 0 0 -330px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle, #000 12%, rgba(0,0,0,.55) 48%, transparent 72%);
  mask-image: radial-gradient(circle, #000 12%, rgba(0,0,0,.55) 48%, transparent 72%);
  transition: opacity .5s ease;
}
.shop-receive-wrapper.lit .shop-receive-rays { opacity: .85; }
.shop-receive-rays-inner {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(255,236,170,.95) 0deg, rgba(255,214,120,0) 12deg,
    rgba(255,236,170,.75) 24deg, rgba(255,214,120,0) 40deg,
    rgba(255,236,170,.95) 56deg, rgba(255,214,120,0) 72deg,
    rgba(255,236,170,.7) 90deg,  rgba(255,214,120,0) 108deg,
    rgba(255,236,170,.9) 126deg, rgba(255,214,120,0) 146deg,
    rgba(255,236,170,.8) 168deg, rgba(255,214,120,0) 190deg,
    rgba(255,236,170,.95) 214deg, rgba(255,214,120,0) 238deg,
    rgba(255,236,170,.75) 262deg,rgba(255,214,120,0) 286deg,
    rgba(255,236,170,.9) 310deg, rgba(255,214,120,0) 336deg,
    rgba(255,236,170,.95) 360deg);
  filter: blur(2px);
  animation: raysSpin 9s linear infinite;
}
.shop-receive-rays-inner-2 {
  animation-duration: 14s; animation-direction: reverse;
  opacity: .55;
  filter: blur(5px);
}
@keyframes raysSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* The one-frame white blowout when the purchase lands. */
.shop-receive-flash {
  position: absolute; inset: 0; z-index: 3;
  background: #fff; opacity: 0; pointer-events: none;
}
.shop-receive-wrapper.flash .shop-receive-flash { animation: recvFlash .6s ease-out; }
@keyframes recvFlash { 0% { opacity:.85; } 100% { opacity:0; } }

/* THE ITEM ITSELF. Starts at 1x and lands at 1.3x — the number the user asked
   for — with the count appearing underneath. */
.shop-receive-reward {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  transform: scale(1);
  transition: transform .85s cubic-bezier(.2,1.5,.35,1);
}
.shop-receive-wrapper.lit .shop-receive-reward { transform: scale(1.3); }
.shop-receive-image {
  width: clamp(120px, 15vw, 180px); height: clamp(120px, 15vw, 180px);
  object-fit: contain;
  filter: drop-shadow(0 0 26px rgba(255,224,150,.9)) drop-shadow(0 8px 12px rgba(0,0,0,.6));
  user-select: none; -webkit-user-drag: none;
}
.shop-receive-amount {
  position: absolute; z-index: 2;
  margin-top: clamp(150px, 19vw, 230px);
  font-family: 'Lilita One', 'Nunito', sans-serif;
  font-size: clamp(26px, 4.4vw, 52px);
  font-weight: 900;
  color: #fff;
  letter-spacing: 2px;
  text-shadow: 0 3px 0 #000, 0 0 26px rgba(255,220,150,.8);
  opacity: 0;
  transition: opacity .5s ease .25s;
}
.shop-receive-wrapper.lit .shop-receive-amount { opacity: 1; }

/* After the reveal, only Back and CONGRADITIONS are left. */
.shop-receive-done {
  position: absolute; inset: 0; z-index: 4;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px;
  /* Opaque, not a tint: the wagon has to actually be gone for "leave only the
     back button and CONGRADITIONS" to be true. */
  background: rgba(8,7,6,.96);
  animation: fadeIn .5s ease both;
}
.shop-receive-wrapper.finished .shop-receive-done { display: flex; }
.shop-receive-congrats {
  font-family: 'Lilita One', 'Nunito', sans-serif;
  font-size: clamp(30px, 6.4vw, 72px);
  font-weight: 900;
  color: #fff;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 4px 0 #000, 0 0 34px rgba(255,255,255,.55);
  animation: congratsPop .55s cubic-bezier(.2,1.6,.4,1) both;
}
.shop-receive-back { margin-top: 0; }

/* ----- Button (shop spec) ----- */
.button { all: unset; display: flex; align-items: center; position: relative; padding: 0.6em 2em; border: mediumspringgreen solid 0.15em; border-radius: 0.25em; color: mediumspringgreen; font-size: 1.5em; font-weight: 600; cursor: pointer; overflow: hidden; transition: border 300ms, color 300ms; user-select: none; }
.button p { z-index: 1; margin: 0; }
.button:hover { color: #212121; }
.button:active { border-color: teal; }
.button::after, .button::before { content: ""; position: absolute; width: 9em; aspect-ratio: 1; background: mediumspringgreen; opacity: 50%; border-radius: 50%; transition: transform 500ms, background 300ms; }
.button::before { left: 0; transform: translateX(-8em); }
.button::after { right: 0; transform: translateX(8em); }
.button:hover:before { transform: translateX(-1em); }
.button:hover:after { transform: translateX(1em); }
.button:active:before, .button:active:after { background: teal; }
.button.btn-gray { border-color: #555; color: #555; cursor: default; pointer-events: none; }
.button.btn-gray::after, .button.btn-gray::before { background: #555; }



/* ===== NIGHT MODE BUTTON (cartoon style) ===== */

.night-mode-btn{

  position:absolute;top:128px;left:18px;z-index:3;

  display:flex;align-items:center;gap:10px;

  padding:8px 16px 8px 12px;

  background:rgba(0,0,0,0.55);backdrop-filter:blur(8px);

  border:2px solid #000;border-radius:14px;

  cursor:pointer;pointer-events:auto;

  transition:all .35s cubic-bezier(.34,1.56,.64,1);

  box-shadow:0 0 0 1.5px rgba(255,255,255,0.15), 0 4px 12px rgba(0,0,0,0.3);

}

.night-mode-btn:hover{transform:scale(1.06);border-color:#fbbf24;box-shadow:0 0 0 2px #fbbf2433,0 6px 20px rgba(0,0,0,0.4)}

.night-mode-btn:active{transform:scale(0.94)}

.night-btn-icon{

  display:flex;align-items:center;justify-content:center;

  width:32px;height:32px;border-radius:50%;

  background:linear-gradient(135deg,#2a2a4a,#1a1a2a);

  border:2px solid #000;flex-shrink:0;

  transition:all .4s cubic-bezier(.34,1.56,.64,1);

  box-shadow:inset 0 1px 3px rgba(255,255,255,0.1);

}

.night-mode-btn.night .night-btn-icon{

  background:linear-gradient(135deg,#fbbf24,#f59e0b);

  box-shadow:0 0 12px rgba(251,191,36,0.4),inset 0 1px 3px rgba(255,255,255,0.3);

}

.night-btn-icon svg{display:block;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}

.night-mode-btn.night .night-btn-icon svg{transform:rotate(-90deg)}

.night-btn-label{

  font-size:13px;font-weight:700;color:#fff;

  text-shadow:0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000;

  letter-spacing:0.3px;user-select:none;white-space:nowrap;

  transition:color .3s;

}

.night-mode-btn.night .night-btn-label{color:#fbbf24}

/* float animation */

@keyframes nmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

.night-mode-btn{animation:nmFloat 3.5s ease-in-out infinite}

.night-mode-btn:hover{animation:none}

/* ============================================================
   CLAN CANVAS UI (custom layout renderer)
   ============================================================ */

#clan-canvas-wrap {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

#clan-canvas-wrap.hidden { display: none; }

#clan-ui-canvas {
  display: block;
  margin: 0 auto;
  border-radius: 16px;
  border: 2px solid #3a3a3a;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  background: #1a1e24;
  cursor: default;
}

#clan-canvas-input {
  position: absolute;
  z-index: 5;
  resize: none;
  overflow-y: auto;
  box-sizing: border-box;
  color: #e8ecf1;
  background: #262a31;
  border: 3px solid #4a505c;
  border-radius: 14px;
  outline: none;
  padding: 17px 32px 7px;
  font-size: 16px;
  line-height: 1.35;
  font-family: 'Lilita One', 'Fredoka', 'Nunito', sans-serif;
  caret-color: #ff9f1c;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45);
}

#clan-canvas-input::placeholder {
  color: rgba(232, 236, 241, 0.45);
}

#clan-canvas-input:focus {
  border-color: #ff9f1c;
  box-shadow: 0 4px 0 rgba(255, 159, 28, 0.4);
}

#clan-canvas-input::-webkit-scrollbar { width: 6px; }
#clan-canvas-input::-webkit-scrollbar-track { background: transparent; }
#clan-canvas-input::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.28); border-radius: 3px; }

#clan-canvas-ph {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 17px 32px 7px;
  color: rgba(232, 236, 241, 0.45);
  font-size: 16px;
  line-height: 1.35;
  font-family: 'Lilita One', 'Fredoka', 'Nunito', sans-serif;
  white-space: nowrap;
  overflow: hidden;
}
#clan-canvas-ph .clan-ph-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  margin: 8px 2px 0;
  animation: clanPhDot 1.2s ease-in-out infinite;
}
#clan-canvas-ph .clan-ph-dot:nth-child(3) { animation-delay: .15s; }
#clan-canvas-ph .clan-ph-dot:nth-child(4) { animation-delay: .3s; }
@keyframes clanPhDot {
  0%, 60%, 100% { transform: translateY(0); opacity: .35; }
  30% { transform: translateY(-5px); opacity: 1; }
}

#clan-canvas-counter {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  color: #ffb12b;
  font-size: 12px;
  font-family: 'Lilita One', 'Fredoka', sans-serif;
  background: #2b2f3d;
  border: 2px solid #4a505c;
  border-radius: 8px;
  padding: 1px 7px;
}

#menu-clan-ui.canvas-mode .clan-ui-html { display: none !important; }

/* Yellow sync tip: clan chat arrives with a delay, not instantly */
#clan-sync-tip {
  position: absolute;
  bottom: 0;
  left: 14px;
  right: 14px;
  max-width: 520px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 14px 14px 0 0;
  background: rgba(30, 24, 0, 0.92);
  border: 2px solid #ffd54a;
  border-bottom: none;
  color: #ffd54a;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 -4px 18px rgba(255, 213, 74, 0.25);
  animation: clanTipGlow 2.4s ease-in-out infinite;
}

#clan-sync-tip.hidden { display: none; }

#clan-sync-tip .clan-sync-tip-icon {
  font-size: 17px;
  animation: clanTipPulse 1.6s ease-in-out infinite;
}

@keyframes clanTipGlow {
  0%, 100% { box-shadow: 0 -4px 18px rgba(255, 213, 74, 0.25); }
  50% { box-shadow: 0 -4px 26px rgba(255, 213, 74, 0.55); }
}

@keyframes clanTipPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* Clan UI is fullscreen and must not scroll */
#menu-clan-ui.canvas-mode {
  position: fixed;
  overflow: hidden;
}

/* ============================================================
   CLAN UI FULLSCREEN (canvas mode)
   ============================================================ */
#menu-clan-ui.canvas-mode .clan-ui-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}

#menu-clan-ui.canvas-mode #clan-canvas-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

#menu-clan-ui.canvas-mode #clan-ui-canvas {
  border-radius: 0;
  border: none;
  box-shadow: none;
}

#menu-clan-ui.canvas-mode .clan-ui-actions-new {
  position: static;
  margin: 0;
}

#menu-clan-ui.canvas-mode #btn-copy-clan-code {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 20;
  margin: 0;
}

/* Leave Clan: below the back arrow, circled-square icon frame, door icon only */
#menu-clan-ui.canvas-mode #btn-leave-clan {
  position: absolute;
  top: 62px;
  left: 8px;
  z-index: 20;
  width: 48px;
  height: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid #ff6b6b;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: none;
  text-shadow: none;
}

#menu-clan-ui.canvas-mode #btn-leave-clan:hover {
  background: rgba(255, 60, 60, 0.25);
  color: #fff;
  transform: translateY(-2px);
}

/* Duplicate bottom Back button hidden in fullscreen canvas mode */
#menu-clan-ui.canvas-mode .clan-ui-container > .btn.btn-back:not(.clan-ui-back-arrow) {
  display: none;
}

/* Animated title shimmer */
.clan-title {
  animation: clanTitleShimmer 3s ease-in-out infinite;
  background-size: 200% 100%;
}

@keyframes clanTitleShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Pulsing glow on primary 3D buttons */
.clan-3d-btn.btn-primary { animation: clanBtnPulse 2.2s ease-in-out infinite; }

@keyframes clanBtnPulse {
  0%, 100% { box-shadow: 0 6px 0 #cc5500, 0 8px 20px rgba(255,107,0,.4), inset 0 1px 0 rgba(255,255,255,.3); }
  50% { box-shadow: 0 6px 0 #cc5500, 0 8px 26px rgba(255,140,0,.75), inset 0 1px 0 rgba(255,255,255,.4); }
}

/* Animated icons on clan buttons */
.clan-ico .clan-ico-ani {
  display: inline-block;
  margin-right: 8px;
  font-size: 18px;
  animation: clanIconFloat 1.6s ease-in-out infinite;
}

.clan-ico:nth-child(2) .clan-ico-ani { animation-delay: 0.3s; }

@keyframes clanIconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Top-left back arrow on the clan UI screen (search other clans, keep membership) */
.clan-ui-back-arrow {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  font-size: 20px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid #ffb12b;
  color: #ffb12b;
  cursor: pointer;
  transition: all 0.2s ease;
}

.clan-ui-back-arrow:hover {
  background: rgba(255, 177, 43, 0.25);
  transform: translateX(-2px);
}

/* ============================================================
   SETTINGS GEAR BUTTON (separate button right of the profile)
   ============================================================ */
#profile-wrap {
  position: absolute;
  top: calc(var(--ui-scale) * 6px);
  left: calc(var(--ui-scale) * 12px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
}

#profile-wrap .profile {
  position: static;
}

#btn-settings-gear {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: all 0.2s ease;
}

#btn-settings-gear img {
  width: 26px;
  height: 26px;
  pointer-events: none;
}

#btn-settings-gear:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: #fff;
  transform: translateY(-2px);
}

#btn-settings-gear:active {
  transform: translateY(0);
}

/* Touch-controls info block in the settings Controls tab (mobile only) */
.bind-row.touch-controls-hint {
  justify-content: flex-start;
  padding: 10px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  line-height: 1.5;
}

/* ============================================================
   ACCOUNTS — login/register overlay
   ============================================================ */
.auth-mini-btn {
  align-self: center;
  padding: 9px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 177, 43, 0.22), rgba(255, 120, 40, 0.16));
  border: 1px solid rgba(255, 177, 43, 0.45);
  color: #ffb12b;
  font-weight: 700;
  font-size: calc(var(--ui-scale, 1) * 13px);
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  user-select: none;
}
.auth-mini-btn:hover {
  background: linear-gradient(135deg, rgba(255, 177, 43, 0.4), rgba(255, 120, 40, 0.3));
  box-shadow: 0 0 16px rgba(255, 177, 43, 0.35);
  transform: translateY(-1px);
}
.auth-mini-btn:active { transform: translateY(0); }
.auth-mini-btn.logged-in {
  background: linear-gradient(135deg, rgba(90, 210, 120, 0.2), rgba(60, 180, 100, 0.14));
  border-color: rgba(90, 210, 120, 0.45);
  color: #7ee08a;
}
.auth-mini-btn.logged-in:hover {
  background: linear-gradient(135deg, rgba(210, 90, 90, 0.35), rgba(190, 60, 60, 0.25));
  border-color: rgba(230, 100, 100, 0.5);
  color: #ff9a9a;
  box-shadow: 0 0 16px rgba(230, 100, 100, 0.3);
}

.profile-account {
  margin-top: 6px;
  font-size: calc(var(--ui-scale, 1) * 11px);
  color: #7ee08a;
  letter-spacing: 0.3px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-account.hidden { display: none; }

/* ---- overlay ---- */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 10, 14, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  overflow-y: auto;
}
.auth-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.auth-overlay.hidden { display: none; }

.auth-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.auth-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
}
.auth-blob-1 {
  width: 46vmax;
  height: 46vmax;
  left: -12vmax;
  top: -14vmax;
  background: radial-gradient(circle, rgba(255, 120, 40, 0.55), transparent 65%);
  animation: auth-drift-1 14s ease-in-out infinite alternate;
}
.auth-blob-2 {
  width: 40vmax;
  height: 40vmax;
  right: -10vmax;
  bottom: -12vmax;
  background: radial-gradient(circle, rgba(64, 140, 255, 0.5), transparent 65%);
  animation: auth-drift-2 17s ease-in-out infinite alternate;
}
.auth-blob-3 {
  width: 26vmax;
  height: 26vmax;
  right: 18vmax;
  top: -8vmax;
  background: radial-gradient(circle, rgba(190, 90, 255, 0.4), transparent 65%);
  animation: auth-drift-3 12s ease-in-out infinite alternate;
}
@keyframes auth-drift-1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(9vmax, 7vmax) scale(1.15); }
}
@keyframes auth-drift-2 {
  from { transform: translate(0, 0) scale(1.1); }
  to   { transform: translate(-8vmax, -6vmax) scale(0.95); }
}
@keyframes auth-drift-3 {
  from { transform: translate(0, 0) scale(0.95); }
  to   { transform: translate(-6vmax, 9vmax) scale(1.2); }
}

.auth-card {
  position: relative;
  width: min(400px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: 26px 26px 20px;
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(28, 32, 42, 0.95), rgba(14, 17, 24, 0.97));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateY(26px) scale(0.94);
  transition: transform 0.35s cubic-bezier(0.18, 0.9, 0.3, 1.2), opacity 0.3s ease;
}
.auth-overlay.visible .auth-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.auth-logo {
  text-align: center;
  margin-bottom: 16px;
}
.auth-logo-tank {
  width: 54px;
  height: 40px;
  margin: 0 auto 10px;
  background: linear-gradient(135deg, #ffb12b, #ff6a3d);
  clip-path: polygon(8% 30%, 30% 30%, 38% 12%, 62% 12%, 70% 30%, 92% 30%, 92% 62%, 70% 62%, 62% 88%, 38% 88%, 30% 62%, 8% 62%);
  animation: auth-tank-float 3.2s ease-in-out infinite;
  filter: drop-shadow(0 6px 14px rgba(255, 150, 40, 0.45));
}
@keyframes auth-tank-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.auth-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 3px;
  background: linear-gradient(90deg, #ffb12b, #ff6a3d, #ffb12b);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: auth-title-shine 5s linear infinite;
}
@keyframes auth-title-shine {
  from { background-position: 0% 0; }
  to { background-position: 200% 0; }
}
.auth-sub {
  margin-top: 5px;
  font-size: 13px;
  color: #8a93a6;
  letter-spacing: 0.4px;
}

.auth-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}
.auth-tab {
  flex: 1;
  text-align: center;
  padding: 9px 0;
  border-radius: 9px;
  font-weight: 700;
  font-size: 14px;
  color: #8a93a6;
  cursor: pointer;
  transition: all 0.22s ease;
  user-select: none;
}
.auth-tab.active {
  color: #1a1d24;
  background: linear-gradient(135deg, #ffb12b, #ff8a3d);
  box-shadow: 0 4px 14px rgba(255, 150, 60, 0.35);
}
.auth-tab:not(.active):hover { color: #d4d9e2; }

.auth-panel { display: none; animation: auth-panel-in 0.3s ease; }
.auth-panel.active { display: block; }
@keyframes auth-panel-in {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

.auth-field {
  position: relative;
  margin-bottom: 11px;
}
.auth-field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e8ecf4;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
}
.auth-field input::placeholder { color: #5d6575; }
.auth-field input:focus {
  border-color: rgba(255, 177, 43, 0.65);
  background: rgba(255, 177, 43, 0.05);
  box-shadow: 0 0 0 3px rgba(255, 177, 43, 0.14);
}

.auth-error {
  margin: 2px 0 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(230, 80, 80, 0.12);
  border: 1px solid rgba(230, 80, 80, 0.35);
  color: #ff9a9a;
  font-size: 13px;
  line-height: 1.4;
}
.auth-error.hidden { display: none; }
.auth-error.shake { animation: auth-shake 0.45s ease; }
@keyframes auth-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

.auth-btn {
  width: 100%;
  padding: 13px;
  margin-top: 4px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffb12b, #ff7a3d);
  color: #16181e;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
  box-shadow: 0 6px 20px rgba(255, 140, 50, 0.3);
  position: relative;
}
.auth-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 10px 28px rgba(255, 140, 50, 0.42);
}
.auth-btn:active { transform: translateY(0); }
.auth-btn.busy { pointer-events: none; opacity: 0.85; }
.auth-btn.success {
  background: linear-gradient(135deg, #43d97c, #2fb25f);
  box-shadow: 0 6px 20px rgba(60, 200, 110, 0.35);
  animation: auth-pop 0.4s ease;
}
@keyframes auth-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.07); }
  100% { transform: scale(1); }
}
.auth-spin {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(20, 22, 28, 0.35);
  border-top-color: #16181e;
  border-radius: 50%;
  animation: auth-spin 0.7s linear infinite;
}
@keyframes auth-spin {
  to { transform: rotate(360deg); }
}

.auth-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 12px;
  color: #5d6575;
  font-size: 12px;
}
.auth-or::before, .auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.auth-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #dfe4ee;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.55;
  position: relative;
}
.auth-google:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
}
.auth-google-g {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: conic-gradient(from -45deg, #4285f4 0 90deg, #34a853 90deg 180deg, #fbbc05 180deg 270deg, #ea4335 270deg);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.auth-google-soon {
  position: absolute;
  right: 10px;
  top: -7px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 8px;
  background: #ffb12b;
  color: #16181e;
  box-shadow: 0 2px 8px rgba(255, 177, 43, 0.4);
  animation: auth-soon-pulse 2.2s ease-in-out infinite;
}
@keyframes auth-soon-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.09); }
}

.auth-foot {
  margin-top: 14px;
  text-align: center;
  font-size: 11.5px;
  color: #5d6575;
  letter-spacing: 0.2px;
  line-height: 1.5;
}

/* ============================================================
   COMIC STORE-STYLE UI — buttons & animations
   ============================================================ */

/* Main menu side buttons (store look) */
.main-menu-side .btn {
  --btn-bg: #fff;
  background: var(--btn-bg);
  color: #1a1a1a;
  border: 3px solid #000;
  border-radius: 14px;
  box-shadow: 3px 3px 0 #000;
  font-family: 'Lilita One', sans-serif;
  font-size: 19px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.45);
  transform: rotate(-2deg);
  transition: transform .12s, box-shadow .12s, filter .12s;
  padding: 13px 22px;
}
.main-menu-side .btn:nth-child(even) { transform: rotate(1.5deg); }
.main-menu-side .btn:hover {
  background: linear-gradient(180deg, #fff, #e6dfc8);
  border-color: #000;
  transform: rotate(-2deg) translate(-2px, -2px);
  box-shadow: 5px 5px 0 #000;
  outline: none;
}
.main-menu-side .btn:nth-child(even):hover { transform: rotate(1.5deg) translate(2px, -2px); }
.main-menu-side .btn:active {
  transform: rotate(-2deg) translate(2px, 2px);
  box-shadow: 1px 1px 0 #000;
}
.main-menu-side .btn:nth-child(even):active { transform: rotate(1.5deg) translate(2px, 2px); }
.main-menu-side .btn-subtle { --btn-bg: #eab308; }

/* PLAY button (comic) — idle bob + glow live on the WRAPPER so the
   button itself has no animations and can transition smoothly on hover */
.btn-play-wrap {
  display: inline-block;
  animation: playGlow 3s ease-in-out infinite, btnBob 3.6s ease-in-out 0.2s infinite;
}
.btn-play {
  border: 3px solid #000;
  border-radius: 16px;
  box-shadow: 0 5px 0 #000, 0 10px 24px rgba(0,0,0,0.35);
  font-family: 'Lilita One', sans-serif;
  letter-spacing: 4px;
}
/* THE QUEUE WORD — one word saying what the seconds mean, NEXT TO the timer.

   Pressing PLAY turns the button into a timer, and on its own "5s" is a number
   with no subject: it could be a reload, a round clock or a cooldown. The word
   goes BESIDE the number, in normal flow, which is what was asked for.

   An earlier version of this sat ABOVE the button, absolutely positioned so it
   would not widen it. That moved the caption off the control it describes, which
   is not a caption any more — and it was not my decision to make. The button
   growing is the honest cost of adding a word to it, and the number it holds is
   short (0s, 5s, 15s) precisely so there is room.

   ALIGNED ON THE BASELINE WITH THE COUNTER, not centred against it.
   `vertical-align: baseline` puts the word's own baseline on the digits' baseline,
   which is what makes the two look like one line of type. The previous `middle`
   centred the word on the digits' CENTRE instead, and because "SEARCHING" is all
   capitals with no descenders while "5s" has both an ascender and a descender,
   those two centres are not the same line — the word sat visibly high and read as
   a separate sticker rather than as a label for the number.

   SIZED AT 0.62em against the counter's 22px, so the word's cap height lands a
   little under two thirds of the digits' — a label/value ratio that is readable
   without the two competing for attention. */
.btn-play-cap {
  display: none;
  white-space: nowrap;
  font-family: 'Lilita One', sans-serif;
  font-size: 0.62em;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #dcecff;
  text-shadow: 0 1px 3px rgba(0,0,0,.85);
  margin-right: 12px;
  vertical-align: baseline;
  pointer-events: none;
}
#btn-play.searching .btn-play-cap { display: inline-block; }
#btn-play.searching { padding-left: 30px; padding-right: 30px; }
@keyframes btnBob {
  0%, 100% { transform: rotate(-1deg) translateY(0); }
  50% { transform: rotate(-1deg) translateY(-4px); }
}

/* Gamemode button (comic) */
.btn-gamemode {
  border: 3px solid #000;
  border-radius: 16px;
  box-shadow: 3px 3px 0 #000, 0 6px 18px rgba(155,89,182,0.4);
  transform: rotate(2deg);
  font-family: 'Lilita One', sans-serif;
  transition: transform .12s, box-shadow .12s;
}
.btn-gamemode:hover {
  border-color: #000;
  transform: rotate(2deg) translate(-2px, -2px) scale(1.05);
  box-shadow: 5px 5px 0 #000, 0 8px 22px rgba(155,89,182,0.5);
}
.btn-gamemode:active {
  transform: rotate(2deg) translate(2px, 2px);
  box-shadow: 1px 1px 0 #000;
}

/* Settings chrome (tabs, top buttons, seg options, bind chips) */
.settings-tab {
  border: 2px solid transparent;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  transition: transform .1s, box-shadow .1s, background .1s, border-color .1s;
}
.settings-tab:not(.active):hover {
  border-color: #000;
  box-shadow: 2px 2px 0 #000;
  transform: translate(-1px, -1px);
}
.settings-tab.active {
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  transform: translate(-1px, -1px);
  background: #1a1a1a;
}
.settings-tab.active::after {
  right: 4px;
  background: #ffd700;
}
.settings-btn {
  border: 2px solid #000;
  border-radius: 10px;
  box-shadow: 2px 2px 0 #000;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 11px;
  transition: transform .1s, box-shadow .1s, background .1s;
}
.settings-btn:hover {
  border-color: #000;
  box-shadow: 3px 3px 0 #000;
  transform: translate(-1px, -1px);
}
.settings-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 #000;
}
.settings-btn-primary {
  background: linear-gradient(135deg, #ffd700, #ffb12b);
  color: #1a1a1a;
  border: 2px solid #000;
}
.settings-btn-primary:hover { background: linear-gradient(135deg, #ffe14d, #ffc24b); color: #1a1a1a; }

.seg-opt {
  border: 2px solid #000;
  border-radius: 10px;
  box-shadow: 2px 2px 0 #000;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 2px;
  transition: transform .1s, box-shadow .1s, background .1s;
}
.seg-opt:not(.active):hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 #000;
  background: #2c2c2c;
}
.seg-opt.active {
  background: linear-gradient(135deg, #ffd700, #ffb12b);
  color: #1a1a1a;
  box-shadow: 3px 3px 0 #000;
  transform: translate(-1px, -1px);
  font-weight: 800;
}
.seg-opt:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #000; }

.bind-key {
  border: 2px solid #1a1a1a;
  border-radius: 10px;
  box-shadow: 2px 2px 0 #000;
  font-weight: 700;
  font-family: 'Lilita One', sans-serif;
}
.bind-key:hover { border-color: var(--accent); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #000; }
.bind-key.binding { animation: pulse 1s infinite; }

/* Settings rows fade in on every render */
#other-settings > *, #cam-settings > *, #aim-settings > *, #view-settings > *, #graphics-settings > * {
  animation: rowIn .35s ease backwards;
}
#other-settings > *:nth-child(2) { animation-delay: .05s; }
#other-settings > *:nth-child(3) { animation-delay: .1s; }
#other-settings > *:nth-child(4) { animation-delay: .15s; }
#cam-settings > *:nth-child(2) { animation-delay: .05s; }
#cam-settings > *:nth-child(3) { animation-delay: .1s; }
#cam-settings > *:nth-child(4) { animation-delay: .15s; }
#cam-settings > *:nth-child(5) { animation-delay: .2s; }
#cam-settings > *:nth-child(6) { animation-delay: .25s; }
@keyframes rowIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---- Trajectory line: the "Styles" button and its three previews ---- */
.aim-styles-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 11px 13px;
  background: #1c1c1c;
  color: #e8eaee;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.aim-styles-btn:hover { border-color: var(--accent); }
.aim-styles-btn:active { transform: translate(1px, 1px); }

.aim-styles-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.aim-styles-panel[hidden] { display: none; }

.aim-style-card {
  border: 2px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #16181c;
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.aim-style-card:hover { border-color: #7a7a7a; }
.aim-style-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .55);
}
.aim-style-card:active { transform: translate(1px, 1px); }
.aim-style-card canvas { display: block; width: 100%; height: 88px; }
.aim-style-name {
  display: block;
  padding: 7px 11px 8px;
  font-size: 13px;
  font-weight: 700;
  color: #cfd2d6;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.aim-style-card.active .aim-style-name { color: var(--accent); }

/* Shop buy page back button (comic text button — replaces missing back.png) */
.shop-back-btn {
  display: inline-block;
  cursor: pointer;
  padding: 10px 22px;
  background: #fff;
  color: #1a1a1a;
  border: 3px solid #000;
  border-radius: 12px;
  box-shadow: 3px 3px 0 #000;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  transform: rotate(-3deg);
  transition: transform .1s, box-shadow .1s;
  user-select: none;
}
.shop-back-btn:hover { transform: rotate(-3deg) translate(-2px, -2px); box-shadow: 5px 5px 0 #000; }
.shop-back-btn:active { transform: rotate(-3deg) translate(2px, 2px); box-shadow: 1px 1px 0 #000; }

/* FPS counter */
#fps-counter {
  position: absolute;
  right: 14px;
  top: 170px;
  background: rgba(20,20,20,.75);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  font-family: ui-monospace, Consolas, monospace;
  backdrop-filter: blur(4px);
  letter-spacing: 1px;
}

/* ============================================================
   MAIN MENU SIDE NAV — neutral chunky 3D buttons, white top-corner
   gradient, real SVG icon chips. All sizes scale with --ui-scale
   so the column resizes correctly on mobile/touch devices.
   ============================================================ */
.main-menu-side {
  width: calc(var(--ui-scale) * 252px);
}
.main-menu-side .menu-side-btn {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--ui-scale) * 12px);
  padding: calc(var(--ui-scale) * 8px) calc(var(--ui-scale) * 10px);
  background: transparent;
  border: none;
  box-shadow: none;
  color: #ffffff;
  font-family: 'Lilita One', sans-serif;
  font-weight: 700;
  font-size: calc(var(--ui-scale) * 20px);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-shadow:
    calc(var(--ui-scale) * -2px) calc(var(--ui-scale) * -2px) 0 #000,
    calc(var(--ui-scale) * 2px) calc(var(--ui-scale) * -2px) 0 #000,
    calc(var(--ui-scale) * -2px) calc(var(--ui-scale) * 2px) 0 #000,
    calc(var(--ui-scale) * 2px) calc(var(--ui-scale) * 2px) 0 #000,
    calc(var(--ui-scale) * -2px) 0 0 #000,
    calc(var(--ui-scale) * 2px) 0 0 #000,
    0 calc(var(--ui-scale) * -2px) 0 #000,
    0 calc(var(--ui-scale) * 2px) 0 #000;
  transform: none;
  transition: transform .1s ease, filter .1s ease;
}
.main-menu-side .menu-side-btn .menu-side-chip {
  flex: 0 0 auto;
  width: calc(var(--ui-scale) * 34px);
  height: calc(var(--ui-scale) * 34px);
  padding: calc(var(--ui-scale) * 6px);
  box-sizing: border-box;
  background: #14171b;
  border: calc(var(--ui-scale) * 2px) solid rgba(255,255,255,0.18);
  border-radius: calc(var(--ui-scale) * 10px);
  box-shadow: inset 0 calc(var(--ui-scale) * 2px) calc(var(--ui-scale) * 4px) rgba(0,0,0,0.5);
}
.main-menu-side .menu-side-btn span {
  line-height: 1;
}
.main-menu-side .menu-side-btn:hover {
  background: transparent;
  border: none;
  box-shadow: none;
  transform: translateY(-2px);
  filter: brightness(1.15);
}
.main-menu-side .menu-side-btn:active {
  background: transparent;
  border: none;
  box-shadow: none;
  transform: translateY(2px);
  filter: brightness(0.9);
}
.main-menu-side .btn:nth-child(6) { animation-delay: 0.4s; }

/* Missions placeholder panel */
.menu-missions-sub {
  color: #9aa4b2;
  font-size: 15px;
  margin: 6px 0 18px;
  text-align: center;
}
.menu-missions-placeholder {
  margin: 6px 0 18px;
  padding: 26px 16px;
  border: 3px dashed rgba(255,255,255,0.25);
  border-radius: 16px;
  color: #6b7686;
  font-family: 'Lilita One', sans-serif;
  font-size: 21px;
  letter-spacing: 2px;
  text-align: center;
  background: rgba(0,0,0,0.25);
}

/* ============================================================
   SMOOTH MICROINTERACTIONS — hover: lift + scale + white glow
   One easing curve everywhere; PLAY pauses its idle bob so the
   3D lift eases smoothly instead of snapping.
   ============================================================ */
:root {
  --hover-ease: cubic-bezier(.22,.61,.36,1);
  --hover-glow: rgba(255,255,255,.45);
}

.btn,
.btn-play,
.btn-gamemode,
.main-menu-side .menu-side-btn,
.settings-tab,
.settings-btn,
.seg-opt,
.bind-key,
.shop-back-btn,
.clan-3d-btn {
  transition: transform .28s var(--hover-ease), box-shadow .3s var(--hover-ease),
              filter .3s var(--hover-ease), background .25s ease, border-color .25s ease, color .25s ease;
}

/* Generic buttons: smooth lift + scale + white glow */
.btn:hover {
  background: #444;
  color: #fff;
  transform: translateY(-2px) scale(1.05);
  filter: drop-shadow(0 0 8px var(--hover-glow));
  outline: 2px solid #000;
  outline-offset: 2px;
}
.btn:active {
  transform: translateY(1px) scale(0.99);
  transition-duration: .12s;
}

/* PLAY: hover now transitions smoothly (button has no animations of its own) */
.btn-play-wrap:hover .btn-play {
  border-color: #000;
  transform: rotate(-1deg) translateY(-4px) scale(1.06);
  box-shadow: 0 5px 0 #000, 0 0 24px var(--hover-glow), 0 14px 30px rgba(0,0,0,.4);
  filter: brightness(1.06) drop-shadow(0 0 10px var(--hover-glow));
}
.btn-play-wrap:active .btn-play {
  transform: rotate(-1deg) translateY(2px) scale(.97);
  box-shadow: 0 2px 0 #000;
  transition-duration: .12s;
}

/* Side menu buttons: bigger + white glow + smooth rise */
.main-menu-side .menu-side-btn:hover {
  background: transparent;
  border: none;
  box-shadow: none;
  transform: translateY(-3px) scale(1.06);
  filter: brightness(1.15) drop-shadow(0 0 10px var(--hover-glow));
}
.main-menu-side .menu-side-btn:active {
  transform: translateY(1px) scale(.98);
  filter: brightness(.92);
  transition-duration: .12s;
}

/* Gamemode button */
.btn-gamemode:hover {
  transform: rotate(2deg) translate(-2px, -2px) scale(1.05);
  box-shadow: 5px 5px 0 #000, 0 10px 24px rgba(255,255,255,.35);
  filter: drop-shadow(0 0 8px var(--hover-glow));
}

/* Settings chrome: smooth lift + glow */
.settings-tab:not(.active):hover {
  border-color: #000;
  box-shadow: 2px 2px 0 #000, 0 0 12px rgba(255,255,255,.25);
  transform: translate(-1px, -1px);
  filter: brightness(1.08);
}
.settings-btn:hover {
  border-color: #000;
  box-shadow: 3px 3px 0 #000, 0 0 12px rgba(255,255,255,.25);
  transform: translate(-1px, -1px) scale(1.02);
  filter: brightness(1.1);
}
.seg-opt:not(.active):hover {
  transform: translate(-1px, -1px) scale(1.02);
  box-shadow: 2px 2px 0 #000, 0 0 10px rgba(255,255,255,.2);
}
.bind-key:hover {
  border-color: var(--accent);
  transform: translate(-1px, -1px) scale(1.02);
  box-shadow: 3px 3px 0 #000, 0 0 10px rgba(255,255,255,.2);
}

/* Shop back + clan 3D buttons */
.shop-back-btn:hover {
  transform: rotate(-3deg) translate(-2px, -2px) scale(1.03);
  box-shadow: 5px 5px 0 #000, 0 0 12px rgba(255,255,255,.25);
}
.clan-3d-btn:hover { filter: drop-shadow(0 0 8px rgba(255,255,255,.35)); }

/* ============================================================
   MOBILE SIDE NAV (AUTHORITATIVE) — must sit after the layout
   blocks so it wins the cascade: compact + vertically centered
   on short landscape screens (phones/tablets).
   ============================================================ */
@media (orientation: landscape) and (max-height: 520px) {
  .main-menu-side {
    top: 50%;
    transform: translateY(-50%);
    width: calc(var(--ui-scale) * 176px);
    gap: calc(var(--ui-scale) * 5px);
  }
  .main-menu-side .menu-side-btn {
    padding: calc(var(--ui-scale) * 4px) calc(var(--ui-scale) * 7px);
    gap: calc(var(--ui-scale) * 7px);
    font-size: calc(var(--ui-scale) * 14px);
  }
  .main-menu-side .menu-side-btn .menu-side-chip {
    width: calc(var(--ui-scale) * 22px);
    height: calc(var(--ui-scale) * 22px);
    padding: calc(var(--ui-scale) * 3px);
    border-radius: calc(var(--ui-scale) * 7px);
  }
}
@media (orientation: landscape) and (max-height: 340px) {
  .main-menu-side {
    top: 50%;
    transform: translateY(-50%);
    gap: calc(var(--ui-scale) * 3px);
    width: calc(var(--ui-scale) * 150px);
  }
  .main-menu-side .menu-side-btn {
    padding: calc(var(--ui-scale) * 2px) calc(var(--ui-scale) * 6px);
    font-size: calc(var(--ui-scale) * 11px);
  }
  .main-menu-side .menu-side-btn .menu-side-chip {
    width: calc(var(--ui-scale) * 16px);
    height: calc(var(--ui-scale) * 16px);
    padding: calc(var(--ui-scale) * 2px);
  }
}
.gamemode-square.active { outline: 3px solid #ffb12b; transform: scale(1.03); box-shadow: 0 6px 18px rgba(255,177,43,0.5); }

/* ============================================================
   MAIN MENU PLAY ROW + BUTTON THEME (authoritative)
   ============================================================ */
.main-menu-play-row { left: 50%; transform: translateX(calc(-50% - 20px)); }
.btn-gamemode { border-radius: 10px; width: calc(var(--ui-scale) * 56px); height: calc(var(--ui-scale) * 56px); }
#btn-enter-fullscreen {
  background: linear-gradient(135deg, #ffb12b 0%, #ff8c00 50%, #ff6b00 100%);
  color: #ffffff;
  border: 3px solid #000;
  border-radius: 10px;
  box-shadow: 0 5px 0 #000, 0 12px 26px rgba(255,120,0,.45);
  font-family: 'Lilita One', sans-serif;
  letter-spacing: 1px;
}
#btn-enter-fullscreen:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 7px 0 #000, 0 16px 30px rgba(255,120,0,.55);
}
.btn-primary {
  background: linear-gradient(135deg, #ffb12b 0%, #ff8c00 50%, #ff6b00 100%);
  color: #ffffff;
  border: 2px solid #000;
}
.btn-primary:hover { filter: brightness(1.08); }

/* ============================================================
   CURRENCY ICONS + PROFILE MENU + NIGHT IN SETTINGS (authoritative)
   ============================================================ */
.cur-img {
  display: inline-block;
  width: calc(var(--ui-scale) * 15px);
  height: auto;
  margin-right: 3px;
  vertical-align: -2px;
  pointer-events: none;
}
.cur-img.cur-lg { width: calc(var(--ui-scale) * 22px); vertical-align: -4px; }
.cur-mini {
  display: inline-block;
  width: calc(var(--ui-scale) * 13px);
  height: auto;
  margin-right: 3px;
  vertical-align: -2px;
  pointer-events: none;
}
.profile-coin, .profile-crystal { display: flex; align-items: center; }
.shop-coin-disp, .shop-gold-disp { display: flex; align-items: center; }
.shop-free-icon { line-height: 1; }
.shop-deal-price { display: flex; align-items: center; justify-content: center; }
.shop-deal-price span { padding-top: 1px; }
#profile { cursor: pointer; }

/* ---------- Profile overlay ---------- */
.profile-overlay {
  position: fixed; inset: 0;
  /* The player's tent: the desk, the field outside the flap, the radio. It sits
     BEHIND a heavy scrim rather than replacing it, because the card in front is
     where the numbers live and those have to stay the brightest thing on the
     screen. `center/cover` so it fills any window without stretching, and the
     gradient on top is what holds the card readable over the bright sky. */
  background:
    linear-gradient(180deg, rgba(8,8,10,0.80) 0%, rgba(8,8,10,0.86) 55%, rgba(8,8,10,0.92) 100%),
    url('../assets/profile-bg.webp') center/cover no-repeat #0a0b0e;
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}
.profile-card {
  width: min(94vw, 460px);
  /* Translucent, so the tent shows through the gaps around the tiles. It used to
     be a flat near-opaque gradient, which made the photograph behind it look
     like wallpaper pasted onto a sheet of card. */
  background: linear-gradient(160deg, rgba(35,38,46,0.93) 0%, rgba(23,26,32,0.95) 60%, rgba(16,19,24,0.96) 100%);
  backdrop-filter: blur(8px);
  border: 3px solid #000;
  border-radius: 18px;
  box-shadow: 0 5px 0 #000, 0 18px 50px rgba(0,0,0,.55);
  padding: 22px 24px 18px;
  text-align: center;
  font-family: 'Lilita One', sans-serif;
}
.profile-card-head {
  display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding-bottom: 14px; margin-bottom: 16px;
  text-align: left;
}
/* THE AVATAR IS THE ONLY CONTROL IN THIS ROW, and it is a real 3D button.

   It is the house button — a hard offset lip that the press collapses, an
   inset top light and a shaded bottom edge — the same construction as
   `.clan-3d-btn` and the CONTINUE key, so it presses like everything else in the
   game instead of merely fading.

   DARK GREY, not gold. The gold gradient was there because the old emoji avatar
   needed a bright plate to sit on; with a trophy image inside it, gold competes
   with the trophy and the two yell at each other. Grey is the frame's job: hold
   the picture, get out of the way. The player's OWN gold is still gold — the
   owned-trophy styling in the menu below uses the game's gold, and that is
   where the colour belongs. */
.profile-card-avatar {
  width: 68px; height: 68px; flex: none;
  border-radius: 12px;
  border: 2px solid #000;
  background: linear-gradient(180deg, #4b535f 0%, #363d48 52%, #242932 100%);
  box-shadow:
    0 4px 0 rgba(0,0,0,0.88),          /* the lip the press collapses */
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -2px 0 rgba(0,0,0,0.38),
    0 6px 16px rgba(0,0,0,0.40);
  display: flex; align-items: center; justify-content: center;
  padding: 8px;
  cursor: pointer;
  transition: transform .10s ease, box-shadow .10s ease, filter .12s ease;
}
.profile-card-avatar img {
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none;
  transition: filter .2s ease, opacity .2s ease;
}
.profile-avatar-empty { color: rgba(255,255,255,0.45); font-size: 26px; line-height: 1; }

/* NO TROPHIES YET: the ICON dims, not the frame.

   This used to desaturate the whole button, and that was to kill a gold gradient
   that no longer exists — with a grey frame there is no colour to drain, and
   greying the button out made an ordinary control look broken rather than empty.
   Dimming the picture is the honest version: the slot is there and it is usable,
   there is just nothing in it yet. */
.profile-card-avatar:not(.has-trophies) img {
  filter: grayscale(1) brightness(0.75);
  opacity: 0.55;
}
.profile-card-avatar:hover { filter: brightness(1.14); }
.profile-card-avatar:active {
  transform: translateY(4px);
  box-shadow:
    0 0 0 rgba(0,0,0,0.88),
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.30),
    0 2px 6px rgba(0,0,0,0.40);
}
/* Name, then clan and account under it. The old single line ran clan BEFORE the
   nickname with a trophy emoji in front of both, so the player's own name was
   last and smallest-feeling on its own profile. */
.profile-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.profile-card-nick {
  font-size: 22px; color: #fff; letter-spacing: 1px; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-card-sub { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.profile-card-clan { font-size: 13px; color: #ffb12b; font-weight: 700; white-space: nowrap; }
.profile-card-account {
  font-size: 12px; color: var(--muted, #9aa0ab);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-card-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 18px;
}
.stat-tile {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
}
.stat-label { font-size: 12px; color: var(--muted, #9aa0ab); text-transform: uppercase; letter-spacing: 1px; }
.stat-value { font-size: 17px; color: #fff; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 4px; }

/* Fullscreen prompt must block menu behind it until user chooses */
#ui-layer > .fullscreen-overlay:not(.hidden) { pointer-events: auto; }
#ui-layer > .fullscreen-overlay.hidden { pointer-events: none; }
#ui-layer > .fullscreen-overlay .fs-close { pointer-events: auto; }
#profile { pointer-events: auto; }
.pcard-rename {
  font-size: 13px; color: var(--muted, #9aa0ab);
  cursor: pointer; margin-left: 6px; user-select: none;
}
.pcard-rename:hover { color: #ffb12b; }
/* THE MAIN-MENU PLAYER BADGE'S AVATAR.

   Same dark-grey 3D button as the profile card's, at badge size. `pointer-events:
   auto` is required rather than optional: `.profile` sets pointer-events:none on
   the whole strip so the badge does not swallow clicks meant for the menu
   behind it, and an inherited `none` makes a button unclickable no matter what
   else it looks like. */
.profile-strip-avatar {
  width: 34px; height: 34px; flex: none;
  border-radius: 9px;
  border: 2px solid #000;
  background: linear-gradient(180deg, #4b535f 0%, #363d48 52%, #242932 100%);
  box-shadow:
    0 3px 0 rgba(0,0,0,0.88),
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -2px 0 rgba(0,0,0,0.38);
  display: flex; align-items: center; justify-content: center;
  padding: 4px;
  cursor: pointer;
  pointer-events: auto;
  transition: transform .10s ease, box-shadow .10s ease, filter .12s ease;
}
.profile-strip-avatar img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.profile-strip-avatar:not(.has-trophies) img { filter: grayscale(1) brightness(0.75); opacity: 0.55; }
.profile-strip-avatar:hover { filter: brightness(1.14); }
.profile-strip-avatar:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 rgba(0,0,0,0.88), inset 0 1px 0 rgba(255,255,255,0.15);
}
/* Centre rather than baseline: an emoji and a picture do not share a baseline,
   and the old row sat the trophy on the text line. */
.profile-top { align-items: center; }

/* The badge's trophy emoji, and the profile card's inline one, are both gone.
   Kept as a note rather than deleted silently: "where did the trophy in my
   name go" is a much harder thing to trace than "this selector changed". */
.profile-card-nick { font-size: 20px; color: #fff; }
/* `.profile-trophy-slot` and `.trophy-slot-plus` are gone. The dashed "add" box
   was a second control for the avatar's job and could not add anything — a
   trophy is earned in a match. The styles are removed rather than left behind,
   because a rule that matches nothing reads like a setting that is still doing
   something. */

/* THE TROPHY MENU. position:fixed, placed from the click coordinates by
   _renderProfileCard, because it is meant to open next to the cursor. This rule
   was previously declared TWICE in this file — once at 210px to the right of the
   avatar slot, then again at 300px below it — so the second silently won and the
   first was dead. It is one declaration now. */
.trophy-pop {
  position: fixed;
  left: 0; top: 0;
  width: 330px;
  max-width: calc(100vw - 16px);
  background: rgba(27,30,36,0.98);
  backdrop-filter: blur(8px);
  border: 2px solid #000;
  border-radius: 12px;
  box-shadow: 0 4px 0 #000, 0 12px 26px rgba(0,0,0,.55);
  color: #fff;
  font-family: 'Lilita One', sans-serif;
  letter-spacing: 0.5px;
  padding: 10px;
  text-align: left;
  z-index: 70;
}
.trophy-pop.hidden { display: none; }

/* FIVE ACROSS, AS MANY ROWS AS THE CATALOGUE NEEDS.

   Four across was not a layout accident — the grid was sized to a 16-cell
   padded square, four by four, which is why it could never grow. The width is
   fixed at five columns and the height is whatever the list turns out to be,
   with the scrollbar taking the overflow. */
.trophy-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  /* Unlimited in Y: a cap on the grid is a cap on the catalogue. */
  max-height: min(52vh, 420px);
  overflow-y: auto;
  padding-right: 2px;
}
.trophy-grid::-webkit-scrollbar { width: 6px; }
.trophy-grid::-webkit-scrollbar-thumb { background: #555; border-radius: 3px; }
.trophy-cell {
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  height: 64px;
  padding-top: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  overflow: hidden;
  /* The ON badge is absolutely positioned into the corner of its cell. */
  position: relative;
  /* EVERY CELL IS A BUTTON. An owned one equips the trophy; a locked one shakes
     and does nothing. The old cells had no cursor at all, which is why an
     equipable grid looked like a read-only list. */
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.trophy-cell.locked { cursor: not-allowed; }
.trophy-cell:active { transform: translateY(1px); }
/* SQUARE ICONS. The cells are 64px tall and about 56px wide, and the artwork is
   square, so contain is exact and nothing is ever cropped. */
.trophy-cell-icon {
  width: 34px; height: 34px;
  object-fit: contain;
  /* THE LOCKED LOOK. Dimmed and drained of colour rather than hidden, which is
     the difference between "a trophy you have not earned" and "a trophy that
     does not exist yet". */
  filter: grayscale(1) brightness(0.55);
  opacity: 0.45;
  transition: filter .2s ease, opacity .2s ease;
}
.trophy-cell-name {
  font-size: 8px; color: var(--muted, #9aa0ab); margin-top: 4px;
  max-width: 100%; padding: 0 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trophy-cell.owned {
  background: rgba(255, 215, 0, 0.08);
  border-color: rgba(255, 215, 0, 0.6);
}
.trophy-cell.owned:hover {
  background: rgba(255, 215, 0, 0.18);
  border-color: rgba(255, 215, 0, 0.95);
}
.trophy-cell.owned .trophy-cell-icon { filter: none; opacity: 1; }
.trophy-cell.owned .trophy-cell-name { color: #ffd700; }

/* THE EQUIPPED ONE. The gold fill above only says "you own this"; the white
   inset ring plus the ON badge say "this is the one on your face right now",
   which is the whole point of the menu. */
.trophy-cell.equipped {
  background: rgba(255, 215, 0, 0.22);
  border-color: #ffd700;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.85), 0 0 10px rgba(255,215,0,.35);
}
.trophy-cell-on {
  position: absolute;
  top: 2px; left: 2px;
  padding: 0 3px;
  border-radius: 4px;
  background: #ffd700;
  color: #1b1e24;
  font-size: 7px;
  line-height: 12px;
  letter-spacing: .5px;
  pointer-events: none;
}

/* Clicking a trophy you do not own. A locked cell that ignores the click
   silently reads as a broken menu, so it refuses in a way you can see. */
@keyframes trophy-deny { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-3px)} 40%{transform:translateX(3px)} 60%{transform:translateX(-2px)} 80%{transform:translateX(2px)} }
.trophy-cell.denied { animation: trophy-deny .28s ease; border-color: rgba(255,120,120,.85); }

.trophy-pop-foot { font-size: 11px; color: var(--muted, #9aa0ab); margin-top: 8px; text-align: center; }
.platoon-btn {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  width: calc(var(--ui-scale) * 56px);
  height: calc(var(--ui-scale) * 56px);
  border-radius: 8px;
  background: linear-gradient(135deg, #34d399 0%, #16a34a 60%, #15803d 100%);
  border: 3px solid #000;
  box-shadow: 0 5px 0 #000, 0 10px 24px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .2s, filter .2s, box-shadow .2s;
}
.platoon-btn img { width: calc(var(--ui-scale) * 32px); height: auto; pointer-events: none; }
.platoon-btn:hover { transform: translateY(-50%) translateY(-3px) scale(1.06); filter: brightness(1.12); box-shadow: 0 7px 0 #000, 0 14px 30px rgba(0,0,0,.45); }
.platoon-btn:active { transform: translateY(-50%) translateY(1px) scale(.96); }

.platoon-overlay {
  position: fixed; inset: 0;
  background: rgba(8, 8, 10, 0.72);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}
.platoon-card {
  width: min(94vw, 480px);
  background: linear-gradient(160deg, #23262e 0%, #171a20 60%, #101318 100%);
  border: 3px solid #000;
  border-radius: 18px;
  box-shadow: 0 5px 0 #000, 0 18px 50px rgba(0,0,0,.55);
  padding: 22px 24px 18px;
  text-align: center;
  font-family: 'Lilita One', sans-serif;
}
.platoon-card h2 { color: #34d399; letter-spacing: 2px; margin-bottom: 16px; }
.platoon-ui-placeholder {
  min-height: 260px;
  border: 2px dashed rgba(255,255,255,.3);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; letter-spacing: 4px; color: rgba(255,255,255,.35);
  margin-bottom: 18px;
  font-family: 'Lilita One', sans-serif;
}
/* ---- unified dark-gray frame for platoon + gamemode buttons ---- */
.btn-gamemode,
.platoon-btn {
  background: linear-gradient(145deg, #4a4f58 0%, #33373f 45%, #23262c 100%) !important;
  border: 3px solid #000 !important;
  border-radius: 10px !important;
  box-shadow: 0 5px 0 #000, inset 0 1px 0 rgba(255,255,255,.14), 0 10px 24px rgba(0,0,0,.35) !important;
}
.platoon-btn:hover {
  background: linear-gradient(145deg, #565c66 0%, #3a3e46 45%, #2a2d34 100%) !important;
  box-shadow: 0 7px 0 #000, inset 0 1px 0 rgba(255,255,255,.2), 0 14px 30px rgba(0,0,0,.5) !important;
}
.btn-gamemode:hover {
  background: linear-gradient(145deg, #565c66 0%, #3a3e46 45%, #2a2d34 100%) !important;
  box-shadow: 0 7px 0 #000, inset 0 1px 0 rgba(255,255,255,.2), 0 14px 30px rgba(0,0,0,.5) !important;
}
.btn-gamemode:active,
.platoon-btn:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 #000, inset 0 1px 0 rgba(255,255,255,.14) !important;
}

/* ================= SPECTATOR BAR (WoT-style bottom tank switch) ================= */
#spectate-bar {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(92vw, 760px);
  pointer-events: auto;
  font-family: 'Lilita One', 'Arial Black', sans-serif;
}
.spectate-top {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(12,16,22,.82);
  border: 2px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 4px 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
  backdrop-filter: blur(3px);
}
.spectate-label {
  font-size: 11px;
  letter-spacing: 2px;
  color: #ffb12b;
}
.spectate-nav {
  display: flex;
  gap: 4px;
}
.spec-nav-btn {
  background: linear-gradient(160deg, #4a4f58, #23262c);
  border: 2px solid #000;
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  width: 28px;
  height: 28px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  box-shadow: 0 3px 0 #000;
  transition: transform .1s, filter .1s;
}
.spec-nav-btn:hover { filter: brightness(1.2); }
.spec-nav-btn:active { transform: translateY(1px); box-shadow: 0 2px 0 #000; }
.spectate-chips {
  display: flex;
  gap: 6px;
  max-width: 100%;
  overflow-x: auto;
  padding: 4px 6px;
  scrollbar-width: thin;
}
.spec-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 74px;
  flex-shrink: 0;
  background: rgba(18,22,30,.9);
  border: 2px solid rgba(255,255,255,.22);
  border-radius: 10px;
  padding: 6px 8px;
  color: #fff;
  font-family: 'Lilita One', 'Arial Black', sans-serif;
  cursor: pointer;
  box-shadow: 0 3px 0 #000;
  transition: transform .12s, border-color .12s, background .12s;
}
.spec-chip:hover { transform: translateY(-2px); border-color: #ffb12b; }
.spec-chip.spec-active {
  border-color: #ffb12b;
  background: rgba(255,150,30,.16);
  box-shadow: 0 3px 0 #000, 0 0 14px rgba(255,177,43,.45);
}
.spec-chip.spec-dead {
  opacity: .5;
  filter: grayscale(.7);
  cursor: not-allowed;
}
.spec-chip-name {
  font-size: 10px;
  letter-spacing: .5px;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spec-chip-hp {
  font-size: 10px;
  letter-spacing: .5px;
}
.spectate-exit {
  background: rgba(12,16,22,.82);
  border: 2px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 3px;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
  backdrop-filter: blur(3px);
}
.spec-exit-btn {
  background: linear-gradient(160deg, #f87171, #b91c1c);
  border: 2px solid #000;
  border-radius: 999px;
  color: #fff;
  font-family: 'Lilita One', 'Arial Black', sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  padding: 6px 14px;
  cursor: pointer;
  box-shadow: 0 3px 0 #000;
  transition: transform .1s, filter .1s;
}
.spec-exit-btn:hover { filter: brightness(1.15); }
.spec-exit-btn:active { transform: translateY(1px); box-shadow: 0 2px 0 #000; }
@media (max-width: 420px) {
  #spectate-bar { bottom: 10px; }
  .spec-chip { min-width: 62px; padding: 4px 6px; }
  #spectate-bar { width: 96vw; }
}
/* Zone placeholders (nearest orange/red cell markers) */
.glad-mark{
  position:fixed;
  transform:translate(-50%, -130%);
  z-index:95;
  display:flex;
  align-items:center;
  gap:6px;
  background:rgba(10,10,14,0.75);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:20px;
  padding:5px 12px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.4px;
  color:#fff;
  pointer-events:none;
  white-space:nowrap;
}
.glad-mark-hidden{ display:none !important; }
.glad-mark-dot{ width:10px; height:10px; border-radius:50%; box-shadow:0 0 8px rgba(255,140,0,0.9); }
.profile-coins-extra{ color:#ffd14d; }

/* Tanki Online Dynamic camera - hide cursor, show crosshair */
.crosshair-mode #game-root canvas{ cursor: none !important; }
.crosshair-mode.ctrl-held #game-root canvas{ cursor: default !important; }

/* ============================================================
   MISSIONS MENU — Tactical Intel Board
   ============================================================ */

#menu-missions { animation: none !important; }

#menu-missions .menu-card {
  width: 100%;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  padding: 0;
  background: linear-gradient(160deg, #111318 0%, #0c0e12 40%, #0f1116 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: none;
  animation: none;
}

/* --- Briefing container --- */
.ms-briefing {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 1;
}
.ms-briefing.ms-visible { opacity: 1; transform: translateY(0); }

/* --- Header bar --- */
.ms-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
}
.ms-title-block { flex: 1; }
.ms-classification {
  font-size: 9px;
  letter-spacing: 2px;
  color: rgba(255,120,80,0.7);
  font-weight: 600;
  margin-bottom: 4px;
}
.ms-main-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ms-title-icon { font-size: 16px; }
.ms-subtitle {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  margin-top: 2px;
}
.ms-stats-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  padding: 8px 14px;
}
.ms-stat { text-align: center; }
.ms-stat-val {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: #ffb12b;
}
.ms-stat-label {
  font-size: 8px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.35);
  font-weight: 600;
}

/* --- Content grid (sidebar + main) --- */
.ms-content-grid {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* --- Sidebar (tabs) --- */
.ms-sidebar {
  width: 130px;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 8px;
  border-right: 1px solid rgba(255,255,255,0.06);
  overflow-y: auto;
}

.ms-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px 8px;
  border-radius: 10px;
  cursor: pointer;
  background: rgba(255,255,255,0.03);
  border: 1px solid transparent;
  transition: all 0.2s ease;
  outline: none;
  opacity: 0;
  transform: translateX(-12px);
}
.ms-tab.ms-tab-in { opacity: 1; transform: translateX(0); transition: opacity 0.35s ease, transform 0.35s ease, background 0.2s, border-color 0.2s, box-shadow 0.12s; }
.ms-tab:hover {
  background: rgba(255,177,43,0.08);
  border-color: rgba(255,177,43,0.28);
  box-shadow: 0 0 10px rgba(255,177,43,0.08);
  transform: translateX(2px);
}
.ms-tab:hover .ms-tab-label { color: rgba(255,255,255,0.8); }
.ms-tab:hover .ms-tab-icon { filter: grayscale(0) brightness(1); }
.ms-tab:focus-visible { border-color: rgba(125,200,255,0.5); }
.ms-tab.active {
  background: linear-gradient(135deg, rgba(255,177,43,0.18), rgba(255,140,0,0.1));
  border-color: rgba(255,177,43,0.4);
  box-shadow: 0 0 14px rgba(255,177,43,0.14), inset 0 1px 0 rgba(255,255,255,0.06);
}

.ms-tab-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: grayscale(0.3) brightness(0.8);
  transition: filter 0.2s;
}
.ms-tab.active .ms-tab-icon { filter: grayscale(0) brightness(1); }
.ms-tab-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  transition: color 0.2s;
}
.ms-tab.active .ms-tab-label { color: #ffb12b; }
.ms-tab-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #ff5b5b;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.25s ease;
}
.ms-tab-badge[data-count]:not([data-count="0"]) {
  opacity: 1;
  transform: scale(1);
  animation: ms-badge-pulse 2.5s ease-in-out infinite;
}
@keyframes ms-badge-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 6px rgba(255,177,43,0.3); }
  50% { transform: scale(1.12); box-shadow: 0 0 14px rgba(255,177,43,0.5); }
}

/* --- Main content area --- */
.ms-main {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.ms-main::-webkit-scrollbar { width: 5px; }
.ms-main::-webkit-scrollbar-track { background: transparent; }
.ms-main::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

/* --- Section header --- */
.ms-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.ms-section-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ms-section-icon { font-size: 14px; }
.ms-section-timer {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,177,43,0.7);
  letter-spacing: 0.5px;
  background: rgba(255,177,43,0.08);
  padding: 3px 8px;
  border-radius: 6px;
}

/* --- Intel summary chips --- */
.ms-intel-summary {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.ms-intel-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.6);
}
.ms-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.ms-intel-chip.easy .ms-chip-dot { background: #7bd36e; box-shadow: 0 0 6px rgba(123,211,110,0.5); }
.ms-intel-chip.medium .ms-chip-dot { background: #ffb12b; box-shadow: 0 0 6px rgba(255,177,43,0.5); }
.ms-intel-chip.hard .ms-chip-dot { background: #ff5b5b; box-shadow: 0 0 6px rgba(255,91,91,0.5); }
.ms-intel-chip.solo .ms-chip-dot { background: #7bd36e; box-shadow: 0 0 6px rgba(123,211,110,0.5); }
.ms-intel-chip.clan .ms-chip-dot { background: #5b9aff; box-shadow: 0 0 6px rgba(91,154,255,0.5); }

/* --- Card grid: PORTRAIT cards, not landscape strips ---
   The cards used to be laid out 4-across with `1fr` columns, which let a column
   grow to 246px on a wide screen — wider than the card was tall, so "portrait"
   was only ever true by accident on a narrow window. The upper bound on the
   track is what actually guarantees the shape: with `1fr` alone, the grid hands
   back every spare pixel to the columns and a portrait card quietly turns back
   into a landscape one. Capping the track keeps it tall at every window size. */
.ms-daily-grid,
.ms-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 190px));
  justify-content: start;
  gap: 16px;
  margin-bottom: 12px;
  align-items: stretch;
}

/* --- Mission card: a thing you flip over -----------------------------------

   THE FLIP. A finished card turns over to show CLAIMED rather than being swapped
   for a different card. Replacing it destroys the objective, the numbers and the
   reward at the exact moment the player wants to check them; flipping keeps the
   front in the DOM and rotates it out of sight, and puts the receipt on the back.

   THE 3D BUTTON STYLE, FROM THE SETTINGS SCREEN. Hard 2px black border, hard
   offset shadow in the same black, uppercase 800 weight, and a press-in on the
   active state. That is the game's own "this is a solid object" vocabulary, and
   it is what a flip card needs: the illusion only reads if the card looks like it
   has thickness. The soft-glass panel it replaces had no thickness at all, so a
   3D transform on it looked like a glitch rather than a turn.

   It is also why the faces are OPAQUE. A transparent face flipped over
   shows the front through it, which reads as a rendering fault, not as a back.

   THE COLOURS. The face used to be a pale near-white (#f7f9fc -> #c9d2dc), which
   was the one thing on this screen that did not belong: every other panel in the
   game is dark, and a field of white plates read as a different application
   sitting inside the menu. The face is now dark graphite with an orange-yellow
   band across the top, so the card is the same object as the settings buttons
   rather than a light box punched into a dark screen. */
.ms-mission-card {
  perspective: 900px;
  background: none;
  border: none;
  border-radius: 12px;
  overflow: visible;
  opacity: 0;
  transform: translateY(10px);
  transition: transform 0.25s ease;
  position: relative;
  /* Portrait: the tallest quest's content is ~207px, so this leaves a little slack
     for a three-line briefing while keeping the card visibly taller than it is
     wide. The button is pinned to the bottom with `margin-top:auto`, so the extra
     height becomes deliberate breathing room rather than a gap under the text. */
  min-height: 276px;
  display: flex;
}
.ms-mission-card.ms-card-in { opacity: 1; transform: none; }

.ms-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.62s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ms-mission-card.claimed .ms-card-inner { transform: rotateY(180deg); }

.ms-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 0 12px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 2px solid #000;
  border-radius: 12px;
  overflow: hidden;
  /* The 3D read comes from the shadow, exactly as on the settings buttons: a
     hard black offset with NO blur, stacked twice so the card looks like it has
     a 5px lip of material under it. A blurred shadow here would flatten it back
     into a sticker. */
  box-shadow:
    0 5px 0 #101216,
    0 7px 0 #000,
    0 10px 18px rgba(0, 0, 0, 0.45);
  background: linear-gradient(180deg, #33383f 0%, #262b31 55%, #1c2025 100%);
  color: #eef1f5;
  transition: box-shadow .12s ease, transform .12s ease;
}
/* Top light, so the graphite face is lit from above like the settings plates
   instead of being a flat swatch. */
.ms-card-face::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 44%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent);
  pointer-events: none;
  z-index: 1;
}
/* BOTH faces are absolutely positioned, so they are always exactly the same size
   whichever way up the card is. The front used to be `position: relative` and
   sat in the flow to give the card its height — that no longer works now the
   card carries a min-height, because a flowed front cannot fill an auto-height
   parent, and a short front next to a full-height back is exactly the z-order
   fault the scanlines below were once blamed for. The height comes from
   `.ms-mission-card` stretching its `.ms-card-inner` instead. */
.ms-card-front { }

/* The orange-yellow band. It is the card's header and it is what makes the card
   read as the same family as the settings screen's gold buttons. */
.ms-mission-header {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 9px 11px;
  background: linear-gradient(135deg, #ffd257 0%, #ffb12b 55%, #e08c11 100%);
  border-bottom: 2px solid #000;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

.ms-card-back {
  transform: rotateY(180deg);
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 12px;
  background: linear-gradient(180deg, #3a4048 0%, #262b31 58%, #191d22 100%);
}
.ms-back-tick {
  font-size: 34px; line-height: 1; font-weight: 900; color: #ffb12b;
  text-shadow: 0 2px 0 #000;
}
.ms-back-title {
  font-size: 15px; font-weight: 900; letter-spacing: 2.4px;
  color: #ffd257;
  text-shadow: 0 2px 0 #000;
}
.ms-back-sub { font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; color: #ffb12b; }
.ms-back-sub .ms-reward-icon { filter: none; }

/* Mode tag: only on the quests that belong to one gamemode, because that is the
   whole difference between two cards that otherwise look identical. It sits on
   the gold band, so it is a dark chip punched into it. */
.ms-mission-mode {
  font-size: 8.5px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase;
  color: #ffd257;
  background: #14171b;
  border: 1px solid #000;
  border-radius: 5px;
  padding: 2px 5px;
}

/* READY: it can be flipped, so it is the only card that lifts.
   The glow is orange, not green. Green here would fight the gold band at the top
   of the card and read as a second accent colour rather than as "this one is
   finished" — the lit top edge and the deeper lip already say that. */
.ms-mission-card.ready { cursor: pointer; }
.ms-mission-card.ready .ms-card-front {
  box-shadow:
    0 5px 0 #101216,
    0 7px 0 #000,
    0 10px 18px rgba(0, 0, 0, 0.45),
    0 0 0 3px #ffb12b,
    0 0 24px rgba(255, 177, 43, 0.45);
  animation: ms-ready-lift 2.2s ease-in-out infinite;
}
@keyframes ms-ready-lift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
/* Hover deepens the lip instead of moving the shadow around: one more pixel of
   black under the card, and the gold ring brightens. Same gesture as the settings
   buttons, scaled up to card size. */
.ms-mission-card.ready:hover .ms-card-front {
  transform: translate(-2px, -2px);
  box-shadow:
    0 8px 0 #101216,
    0 10px 0 #000,
    0 16px 26px rgba(0, 0, 0, 0.55),
    0 0 0 3px #ffd257,
    0 0 34px rgba(255, 177, 43, 0.6);
  animation-play-state: paused;
}
.ms-mission-card.ready:active .ms-card-front {
  transform: translate(3px, 5px);
  box-shadow:
    0 1px 0 #101216,
    0 2px 0 #000,
    0 0 0 3px #ffb12b;
  animation-play-state: paused;
}

/* Every other card still lifts on hover, whether or not it is claimable, so the
   board reads as a set of physical objects rather than a set of static panels.
   The non-ready ones just have no lift animation of their own. */
.ms-mission-card:not(.claimed):hover .ms-card-front {
  transform: translate(-2px, -2px);
  box-shadow:
    0 8px 0 #101216,
    0 10px 0 #000,
    0 16px 26px rgba(0, 0, 0, 0.5);
}
.ms-mission-card:not(.claimed):active .ms-card-front {
  transform: translate(2px, 4px);
  box-shadow:
    0 2px 0 #101216,
    0 3px 0 #000;
}

/* In progress: quiet and desaturated, so the finished ones are the only ones
   that catch the eye. The header band is knocked back rather than recoloured, so
   the card keeps its shape and loses only its shine. */
.ms-mission-card:not(.ready):not(.claimed) .ms-card-front {
  background: linear-gradient(180deg, #2a2e34 0%, #22262b 58%, #191c21 100%);
  color: #b9c0c9;
}
.ms-mission-card:not(.ready):not(.claimed) .ms-mission-header {
  background: linear-gradient(135deg, #8a8f97 0%, #6f747c 55%, #5b6067 100%);
}
.ms-mission-card.locked .ms-card-front { opacity: 0.55; }
.ms-mission-card.claiming { pointer-events: none; }

/* Scanline overlay for tactical feel */
/* Scanline overlay for tactical feel.

   Retargeted from .ms-mission-card to .ms-card-face. On the OUTER card it was
   drawn once, above both faces, so the moment a card flipped the scanlines sat
   on top of the CLAIMED back as well — a stripe across the receipt, which is
   exactly the sort of thing that makes a flip read as a broken z-order instead
   of a card turning over. On the face it is part of the card's surface. */
.ms-card-face::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.ms-card-front:hover::before { opacity: 1; }

/* Tab content crossfade */
.ms-main { animation: ms-content-in 0.3s ease; }
@keyframes ms-content-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* The type tag sits ON the gold band, so it is a dark chip. `diffColor()` still
   supplies the background inline from JS — that is what makes an EASY card
   green and a HARD card red at a glance — so the rule below only sets the
   type's own chrome, not its fill. */
.ms-mission-type {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.2px;
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid #000;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  flex-shrink: 0;
}
.ms-mission-type.classified {
  background: #3a3f47;
  color: rgba(255,255,255,0.55);
}
.ms-mission-type.event {
  background: #ff8c00;
  color: #1a1208;
  text-shadow: none;
}
/* ON THE BAND the ID is dark-on-gold, not white-on-gold: the band is a light
   surface and white text on it was invisible. */
.ms-mission-id {
  font-size: 9px;
  font-weight: 800;
  color: rgba(20, 18, 12, 0.62);
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.ms-mission-body {
  padding: 4px 10px 8px;
}
.ms-mission-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 6px;
  line-height: 1.3;
}
.ms-mission-brief {
  font-size: 10px;
  color: rgba(255,255,255,0.42);
  margin: 0 0 6px;
  line-height: 1.4;
}

/* --- Progress bar ---
   The track was rgba(255,255,255,0.08) over a WHITE card, i.e. a barely-there
   hairline. Over graphite it needs real contrast, so the track is a dark inset
   channel with a hard black lip — a groove cut into the plate. */
.ms-progress-wrap { margin-bottom: 6px; }
.ms-progress-bar {
  position: relative;
  height: 8px;
  background: #14171b;
  border: 1px solid #000;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7);
}
.ms-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #ffd257, #ffb12b);
  box-shadow: 0 0 6px rgba(255, 177, 43, 0.5);
  transition: width 0.5s ease;
  position: relative;
  animation: ms-progress-glow 3s ease-in-out infinite;
}
@keyframes ms-progress-glow {
  0%, 100% { box-shadow: 0 0 4px rgba(255,177,43,0.25); }
  50% { box-shadow: 0 0 10px rgba(255,177,43,0.5), 0 0 20px rgba(255,177,43,0.15); }
}
.ms-progress-glint {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: ms-glint 3s ease-in-out infinite;
}
@keyframes ms-glint {
  0%, 100% { left: -100%; }
  50% { left: 200%; }
}
.ms-progress-text {
  font-size: 9px;
  color: rgba(255,255,255,0.45);
  margin-top: 3px;
  font-weight: 600;
}
.ms-progress-wrap.locked .ms-progress-fill {
  background: #2b3037;
  box-shadow: none;
  animation: none;
}

/* --- Rewards ---
   These were tinted translucent washes sized for a white plate. On graphite a
   translucent wash of a light colour just goes muddy, so each reward is a solid
   dark chip with a coloured keyline and coloured text — the icon keeps its own
   colour, the number sits on something solid. */
.ms-mission-rewards {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.ms-reward {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.75);
  background: #14171b;
}
.ms-reward-cash {
  background: rgba(123, 211, 110, 0.14);
  border-color: rgba(123, 211, 110, 0.45);
  color: #9ce892;
}
.ms-reward-coins {
  background: rgba(255, 209, 77, 0.14);
  border-color: rgba(255, 209, 77, 0.45);
  color: #ffd14d;
}
.ms-reward-icon {
  width: 12px;
  height: 12px;
  object-fit: contain;
}
.ms-reward-none {
  color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.04);
}
.ms-reward-classified {
  color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.04);
  font-style: italic;
}

/* --- Mission action button ---
   THE SAME OBJECT AS THE SETTINGS BUTTONS. Hard 2px black border, hard black
   offset with no blur, uppercase 800, and a press-in on :active. It used to be a
   flat translucent wash with a green gradient and a soft blurry shadow, which is
   the opposite of that vocabulary — a soft shadow says "a rectangle of colour",
   a hard one says "a thing with depth". */
.ms-mission-action {
  padding: 0 10px 10px;
  margin-top: auto;
}
.ms-btn {
  width: 100%;
  padding: 8px 0;
  border: 2px solid #000;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: transform .1s, box-shadow .1s, background .1s, filter .1s;
  background: linear-gradient(180deg, #3a4048, #262b31);
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  box-shadow: 0 3px 0 #101216, 0 4px 0 #000;
}
.ms-btn:disabled { cursor: default; opacity: 0.75; }
.ms-btn:disabled:hover { transform: none; filter: none; box-shadow: 0 3px 0 #101216, 0 4px 0 #000; }

.ms-btn.primary {
  background: linear-gradient(180deg, #ffd257 0%, #ffb12b 52%, #e08c11 100%);
  color: #1a1208;
  text-shadow: none;
  box-shadow: 0 4px 0 #a8640a, 0 5px 0 #000;
  animation: ms-btn-ready 2.2s ease-in-out infinite;
}
.ms-btn.primary:hover {
  transform: translate(-1px, -1px);
  box-shadow: 0 6px 0 #a8640a, 0 7px 0 #000, 0 8px 16px rgba(255, 177, 43, 0.35);
  animation-play-state: paused;
}
.ms-btn.primary:active {
  transform: translate(2px, 4px);
  box-shadow: 0 1px 0 #a8640a, 0 2px 0 #000;
  animation-play-state: paused;
}
@keyframes ms-btn-ready {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.12); }
}

.ms-btn.claimed {
  background: linear-gradient(180deg, #4a4f57, #2e3339);
  color: #9aa2ac;
}
.ms-btn.locked {
  background: linear-gradient(180deg, #2b3037, #1e2227);
  color: rgba(255, 255, 255, 0.25);
  font-style: italic;
  box-shadow: 0 3px 0 #14171b, 0 4px 0 #000;
}
.ms-btn.event {
  background: linear-gradient(180deg, #ff9a1f, #d9680a);
  color: #1a1208;
  box-shadow: 0 3px 0 #8f4405, 0 4px 0 #000;
}
.ms-btn-check { margin-right: 4px; }

/* --- Footer bar --- */
.ms-footer-bar {
  padding: 10px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: center;
}
.ms-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  /* Same hard-lip press as the settings buttons, so leaving the missions screen
     feels like pressing a physical key rather than fading a label. */
  transition: transform .1s, box-shadow .1s, background .1s, color .1s;
  background: linear-gradient(180deg, #3a4048, #262b31);
  border: 2px solid #000;
  box-shadow: 0 3px 0 #101216, 0 4px 0 #000;
}
.ms-back-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 0 5px 0 #101216, 0 6px 0 #000, 0 8px 16px rgba(255, 177, 43, 0.22);
  color: #ffd257;
}
.ms-back-btn:active {
  transform: translate(2px, 4px);
  box-shadow: 0 1px 0 #101216, 0 2px 0 #000;
}
.ms-back-icon { font-size: 14px; }

/* --- Intel note --- */
.ms-intel-note {
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  text-align: center;
  padding: 8px 0;
  font-style: italic;
  border-top: 1px solid rgba(255,255,255,0.04);
  margin-top: 8px;
}

/* --- Event empty state --- */
.ms-event-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  text-align: center;
}
.ms-event-empty-icon { margin-bottom: 16px; }
.ms-event-empty-title {
  font-size: 16px;
  font-weight: 800;
  color: rgba(255,255,255,0.6);
  margin: 0 0 8px;
  letter-spacing: 2px;
}
.ms-event-empty-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  line-height: 1.6;
  max-width: 380px;
  margin: 0 0 12px;
}
.ms-event-empty-hint {
  font-size: 10px;
  color: rgba(255,177,43,0.5);
  font-weight: 600;
  letter-spacing: 1px;
}

/* --- Radar animation (Event tab) --- */
.ms-radar {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,177,43,0.05) 0%, transparent 70%);
  border: 2px solid rgba(255,177,43,0.15);
}
.ms-radar-sweep {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,177,43,0.6), transparent);
  transform-origin: left center;
  animation: ms-radar-sweep 3s linear infinite;
}
@keyframes ms-radar-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ms-radar-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,177,43,0.6);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(255,177,43,0.4);
}

/* --- Challenges intro --- */
.ms-challenges-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  text-align: center;
  margin-bottom: 16px;
}
.ms-challenges-lock {
  position: relative;
  margin-bottom: 12px;
}
.ms-lock-icon {
  font-size: 32px;
  position: relative;
  z-index: 1;
}
.ms-lock-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(150,150,200,0.15);
  transform: translate(-50%, -50%);
  animation: ms-lock-pulse 2s ease-in-out infinite;
}
@keyframes ms-lock-pulse {
  0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.15); }
}
.ms-challenges-title {
  font-size: 14px;
  font-weight: 800;
  color: rgba(255,255,255,0.7);
  letter-spacing: 2px;
  margin: 0 0 8px;
}
.ms-challenges-desc {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  line-height: 1.6;
  max-width: 400px;
  margin: 0;
}

/* --- Clan redirect popup --- */
.ms-clan-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(4px);
}
.ms-clan-popup-overlay.ms-popup-visible { opacity: 1; }
.ms-clan-popup {
  background: linear-gradient(160deg, #1a1c22, #12141a);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 360px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}
.ms-popup-visible .ms-clan-popup { transform: scale(1); }
.ms-clan-popup-icon { font-size: 36px; margin-bottom: 12px; }
.ms-clan-popup-title {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1.5px;
  margin: 0 0 8px;
}
.ms-clan-popup-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  line-height: 1.6;
  margin: 0 0 20px;
}
.ms-clan-popup-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ms-clan-popup-btn {
  padding: 11px 0;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.8px;
  cursor: pointer;
  /* Hard-lip press, same as the settings buttons. */
  transition: transform .1s, box-shadow .1s, background .1s, color .1s;
  text-transform: uppercase;
  border: 2px solid #000;
  background: linear-gradient(180deg, #3a4048, #262b31);
  color: rgba(255,255,255,0.65);
  box-shadow: 0 3px 0 #101216, 0 4px 0 #000;
}
.ms-clan-popup-btn.primary {
  background: linear-gradient(180deg, #ffd257 0%, #ffb12b 52%, #e08c11 100%);
  color: #1a1208;
  box-shadow: 0 4px 0 #a8640a, 0 5px 0 #000, 0 6px 16px rgba(255, 177, 43, 0.3);
}
.ms-clan-popup-btn.primary:hover {
  transform: translate(-1px, -1px);
  box-shadow: 0 6px 0 #a8640a, 0 7px 0 #000, 0 10px 22px rgba(255, 177, 43, 0.4);
}
.ms-clan-popup-btn.primary:active {
  transform: translate(2px, 4px);
  box-shadow: 0 1px 0 #a8640a, 0 2px 0 #000;
}
.ms-clan-popup-btn:not(.primary):not(.secondary) {
  background: linear-gradient(180deg, #3a4048, #262b31);
  color: rgba(255,255,255,0.65);
}
.ms-clan-popup-btn:not(.primary):not(.secondary):hover {
  transform: translate(-1px, -1px);
  color: #ffd257;
  box-shadow: 0 5px 0 #101216, 0 6px 0 #000;
}
.ms-clan-popup-btn.secondary {
  background: transparent;
  color: rgba(255,255,255,0.35);
  font-size: 11px;
  box-shadow: none;
  border-color: rgba(255,255,255,0.12);
}
.ms-clan-popup-btn.secondary:hover { color: rgba(255,255,255,0.7); border-color: rgba(255,177,43,0.4); }

/* --- Reward flyout animation --- */
.ms-reward-flyout {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  background: rgba(0,0,0,0.85);
  border: 1px solid rgba(123,211,110,0.4);
  border-radius: 10px;
  padding: 10px 16px;
  display: flex;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
  z-index: 10;
}
.ms-reward-flyout.flyout-visible {
  opacity: 1;
  transform: translate(-50%, -80%) scale(1);
}

/* --- Progress celebrate animation --- */
@keyframes ms-progress-celebrate {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.5); }
  100% { filter: brightness(1); }
}

/* --- Mobile responsive --- */
@media (max-width: 640px) {
  #menu-missions .menu-card {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    height: 100vh;
  }
  .ms-header-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px 10px;
  }
  .ms-stats-panel { align-self: flex-end; }
  .ms-content-grid { flex-direction: column; }
  .ms-sidebar {
    width: 100%;
    min-width: 100%;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 6px 8px;
    gap: 4px;
  }
  .ms-tab { min-width: 70px; padding: 8px 6px 6px; }
  .ms-tab-icon { width: 22px; height: 22px; }
  .ms-tab-label { font-size: 9px; }
  .ms-main { padding: 10px 12px; }
  /* Narrower floor so the portrait cards still fit two or three across a phone
     without the column count being pinned to a number that no longer suits. The
     upper bound stays on, otherwise a short-but-wide window stretches each card
     back out sideways and the shape is lost on exactly the screens least able to
     afford a scrollbar. */
  .ms-daily-grid, .ms-card-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 176px)); gap: 10px; }
  .ms-mission-card { min-height: 250px; }
  .ms-section-header { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ms-intel-summary { flex-wrap: wrap; }
  .ms-clan-popup { margin: 16px; max-width: 320px; padding: 24px 20px; }
}

@media (max-width: 420px) {
  .ms-daily-grid, .ms-card-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 158px)); gap: 8px; }
  .ms-mission-card { min-height: 224px; }
  .ms-mission-title { font-size: 11.5px; }
  .ms-stats-panel { gap: 8px; padding: 6px 10px; }
  .ms-stat-val { font-size: 15px; }
}

/* ============================================================
   TANK MENU — Fullscreen 3D viewer with overlaid UI
   ============================================================ */

#menu-tank {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #0a0c10;
}

/* --- 3D Viewer fills screen --- */
.tm-viewer {
  position: absolute;
  inset: 0;
  z-index: 0;
  cursor: grab;
}
.tm-viewer:active { cursor: grabbing; }
.tm-viewer canvas { display: block; width: 100% !important; height: 100% !important; }
.tm-viewer-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.25);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* --- Shared overlay base --- */
.tm-overlay-top-left,
.tm-overlay-right,
.tm-overlay-bottom {
  position: fixed;
  z-index: 10;
  font-family: 'Segoe UI', Arial, sans-serif;
}

/* Scan line overlay for alive feel */
#menu-tank::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
  pointer-events: none;
  z-index: 5;
}

/* Corner brackets on top-left panel */
.tm-overlay-top-left::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  width: 20px;
  height: 20px;
  border-top: 2px solid rgba(255,177,43,0.3);
  border-left: 2px solid rgba(255,177,43,0.3);
  pointer-events: none;
}
.tm-overlay-top-left::after {
  content: '';
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-bottom: 2px solid rgba(255,177,43,0.2);
  border-right: 2px solid rgba(255,177,43,0.2);
  pointer-events: none;
}

/* Pulsing dot on mechanic panel header */
.tm-mech-panel .tm-panel-header::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5b9aff;
  box-shadow: 0 0 8px rgba(91,154,255,0.6);
  animation: tm-pulse-dot 2s ease-in-out infinite;
  margin-right: 2px;
}
@keyframes tm-pulse-dot {
  0%, 100% { opacity: 0.5; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Stats panel decorative line at top */
.tm-stats-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,177,43,0.3), transparent);
  pointer-events: none;
}

/* Section divider accent */
.tm-stats-section {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  position: relative;
}
.tm-stats-section::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 30px;
  height: 1px;
  background: rgba(255,177,43,0.4);
}

/* --- Top left: back, name, desc --- */
.tm-overlay-top-left {
  top: 16px;
  left: 16px;
  max-width: 280px;
}
.tm-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.6);
  background: rgba(10,12,16,0.7);
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  transition: all 0.2s;
  backdrop-filter: blur(8px);
  margin-bottom: 12px;
}
.tm-back:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 0 12px rgba(255,255,255,0.08);
}
.tm-icon { font-size: 13px; }

.tm-tank-name {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 6px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  letter-spacing: 0.5px;
}
.tm-tank-desc {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
  margin: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

/* --- Right panel: mechanic + stats --- */
.tm-overlay-right {
  top: 16px;
  right: 16px;
  width: 250px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tm-panel {
  background: rgba(10,12,16,0.8);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 14px;
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}
/* Custom corner accents */
.tm-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-bottom: 2px solid rgba(255,177,43,0.3);
  border-right: 2px solid rgba(255,177,43,0.3);
  border-radius: 0 0 8px 0;
  pointer-events: none;
}
.tm-panel::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border-top: 2px solid rgba(255,177,43,0.2);
  border-left: 2px solid rgba(255,177,43,0.2);
  border-radius: 8px 0 0 0;
  pointer-events: none;
}
.tm-panel-header {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Mechanic card */
.tm-mech-card {
  background: rgba(255,177,43,0.06);
  border: 2.5px solid rgba(91,154,255,0.5);
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 0 20px rgba(91,154,255,0.12), inset 0 0 10px rgba(91,154,255,0.04);
  transition: box-shadow 0.3s;
}
.tm-mech-card:hover {
  box-shadow: 0 0 28px rgba(91,154,255,0.2), inset 0 0 14px rgba(91,154,255,0.06);
  border-color: rgba(91,154,255,0.7);
}
.tm-mech-empty {
  border-color: rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  box-shadow: none;
}
.tm-mech-empty:hover { box-shadow: none; }
.tm-mech-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.tm-mech-icon { font-size: 16px; }
.tm-mech-name {
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.3px;
}
.tm-mech-desc {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.4);
  line-height: 1.5;
}

/* Stats — topic sections */
.tm-stats-section {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.tm-stats-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.tm-section-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: rgba(255,177,43,0.7);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.tm-section-icon { font-size: 11px; }

.tm-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  position: relative;
  cursor: default;
}
.tm-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
}
.tm-stat-val {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}

/* Stat tooltip */
.tm-tooltip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  background: rgba(10,12,16,0.95);
  border: 1px solid rgba(255,177,43,0.3);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s, transform 0.2s;
  z-index: 20;
  max-width: 220px;
  white-space: normal;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.tm-stat-row:hover .tm-tooltip {
  opacity: 1;
  transform: translateY(0);
}
.tm-stat-hl {
  color: #ffb12b;
  font-weight: 900;
}

/* Armor breakdown */
.tm-armor {
  display: flex;
  gap: 2px;
  align-items: center;
}
.tm-armor-front { color: #7bd36e; font-weight: 900; }
.tm-armor-side { color: #ffb12b; font-weight: 900; }
.tm-armor-back { color: #ff5b5b; font-weight: 900; }
.tm-armor-sep { color: rgba(255,255,255,0.2); font-weight: 600; margin: 0 1px; }

/* --- Bottom: cosmetics + actions --- */
.tm-overlay-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
}
.tm-bottom-actions {
  display: flex;
  gap: 8px;
  padding: 0 16px 10px;
  justify-content: space-between;
  align-items: flex-end;
}
.tm-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(8px);
}
.tm-btn-upgrade {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.1);
}
.tm-btn-upgrade:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}
.tm-btn-select {
  background: linear-gradient(135deg, #ffb12b, #e09520);
  color: #1a1208;
  box-shadow: 0 2px 12px rgba(255,177,43,0.35);
  padding: 16px 36px;
  font-size: 14px;
  margin-bottom: -6px;
}
.tm-btn-select:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(255,177,43,0.5), 0 0 24px rgba(255,177,43,0.2);
}

/* Cosmetics bar */
.tm-cosmetics-bar {
  background: rgba(10,12,16,0.8);
  border-top: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
}
/* Stamp buttons sit ABOVE the tab row, so the word PAINT is always below them
   and the panel content can never push them off screen. */
.tm-spray-actions {
  display: none;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: rgba(0,0,0,0.25);
}
.tm-spray-actions.active { display: flex; }
.tm-spray-actions .tm-spray-btn {
  width: auto;
  min-width: 108px;
  padding: 8px 16px;
  font-size: 11px;
}
.tm-spray-actions-label {
  font-size: 12px;
  font-weight: 700;
  color: #a0b0c0;
  letter-spacing: 0.5px;
}
.tm-cosmo-tabs {
  display: flex;
}
.tm-cosmo-tab {
  flex: 1;
  padding: 12px 0;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.35);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.tm-cosmo-tab:hover {
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.03);
}
.tm-cosmo-tab.active { color: #ffb12b; }
.tm-cosmo-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 2px;
  background: #ffb12b;
  border-radius: 1px;
  box-shadow: 0 0 10px rgba(255,177,43,0.5);
}
.tm-cosmo-body {
  padding: 10px 16px;
  min-height: 40px;
}
.tm-cosmo-placeholder {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.15);
  letter-spacing: 1px;
}

/* --- Mobile --- */
@media (max-width: 640px) {
  .tm-overlay-top-left { max-width: 200px; }
  .tm-tank-name { font-size: 22px; }
  .tm-overlay-right { width: 180px; }
  .tm-panel { padding: 10px; }
  .tm-bottom-actions { flex-direction: column; align-items: stretch; padding: 0 12px 8px; }
  .tm-btn { justify-content: center; }
}
@media (max-width: 420px) {
  .tm-overlay-right { display: none; }
  .tm-tank-name { font-size: 20px; }
}

/* --- Sprays Tab Styles --- */
.tm-sprays-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}
.tm-sprays-section {
  flex: 1 1 240px;
  min-width: 0;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  padding: 10px 14px;
}
.tm-sprays-section-title {
  font-size: 11px;
  font-weight: 700;
  color: #8899aa;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tm-sprays-section-title .tm-ico {
  font-size: 13px;
  text-transform: none;
  filter: drop-shadow(0 0 5px rgba(255,177,43,0.45));
}
.tm-sprays-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.tm-spray-card {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.tm-spray-card:hover {
  border-color: rgba(255,177,43,0.3);
  transform: translateY(-2px);
}
.tm-spray-card.owned {
  border-color: rgba(255,177,43,0.2);
}
.tm-spray-card.equipped {
  border-color: #ffb12b;
  box-shadow: 0 0 12px rgba(255,177,43,0.15);
}
.tm-spray-card.locked {
  opacity: 0.5;
}
.tm-spray-preview {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,0.05);
  transition: transform 0.2s;
}
.tm-spray-card:hover .tm-spray-preview {
  transform: rotate(-5deg) scale(1.08);
}
.tm-spray-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.tm-spray-name {
  font-size: 11px;
  font-weight: 600;
  color: #e0e8f0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tm-spray-btn {
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  width: auto;
  white-space: nowrap;
  text-transform: uppercase;
}
.tm-spray-buy {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
}
.tm-spray-buy:hover { transform: scale(1.02); }
.tm-spray-equip {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
}
.tm-spray-equip:hover { transform: scale(1.02); }
.tm-spray-clear {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
}
.tm-spray-clear:hover { transform: scale(1.02); }
.tm-spray-place {
  background: linear-gradient(135deg, #ffb12b, #e89a1a);
  color: #000;
}
.tm-spray-place:hover { transform: scale(1.02); }
.tm-spray-remove {
  background: transparent;
  color: #93a3b4;
  border: 1px solid rgba(255,255,255,0.16);
  margin-top: 8px;
}
.tm-spray-remove:hover {
  transform: scale(1.02);
  color: #ef4444;
  border-color: rgba(239,68,68,0.5);
}
.tm-spray-locked {
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
}
.tm-spray-equipped {
  font-size: 10px;
  color: #ffb12b;
  font-weight: 600;
  text-transform: uppercase;
}
.tm-spray-placement-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.tm-spray-placement-info span {
  font-size: 12px;
  color: #a0b0c0;
  font-weight: 600;
}
.tm-spray-placement-info .tm-spray-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  font-weight: 500;
  text-align: right;
}
.tm-spray-max {
  font-size: 11px;
  color: rgba(255,177,43,0.7);
  text-align: center;
}
.tm-spray-placeholder {
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.2);
  padding: 20px;
}

/* ── Sprays tab: icons, pips and a bit of movement ─────────────────── */
.tm-spray-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.tm-spray-empty .tm-spray-placeholder { padding: 12px 20px 4px; }
.tm-spray-store {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  padding: 8px 20px;
  font-size: 11px;
  margin-bottom: 14px;
  animation: tmStorePulse 1.9s ease-in-out infinite;
}
.tm-spray-store:hover { transform: scale(1.04); }
@keyframes tmStorePulse {
  0%, 100% { box-shadow: 0 0 8px rgba(34,197,94,0.25); }
  50%      { box-shadow: 0 0 20px rgba(34,197,94,0.65); }
}
/* The main action breathes so it is never missed. */
.tm-spray-place { animation: tmPlaceGlow 1.6s ease-in-out infinite; }
@keyframes tmPlaceGlow {
  0%, 100% { box-shadow: 0 0 6px rgba(255,177,43,0.30); }
  50%      { box-shadow: 0 0 20px rgba(255,177,43,0.75); }
}
.tm-spray-btn:active { transform: scale(0.96) !important; }

/* Stamp pips — lit for every stamp used. */
.tm-spray-pips {
  display: inline-flex;
  gap: 4px;
  margin-left: 7px;
  vertical-align: middle;
}
.tm-spray-pips i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  display: inline-block;
  transition: background 0.2s, box-shadow 0.2s;
}
.tm-spray-pips i.on {
  background: #ffb12b;
  box-shadow: 0 0 7px rgba(255,177,43,0.85);
}
.tm-spray-equipped { text-shadow: 0 0 8px rgba(255,177,43,0.45); }

/* ============================================================
   FULLSCREEN GAMEMODE SELECTOR (gm-*)
   ============================================================ */
.gm-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 3400;
  background: linear-gradient(135deg, #080c18 0%, #0d1225 30%, #111830 60%, #0a0f20 100%);
  display: flex;
  flex-direction: column;
  font-family: 'Rajdhani', 'Segoe UI', sans-serif;
  color: #c0c8d8;
}

.gm-header {
  padding: 24px 32px 16px;
  text-align: center;
  position: relative;
}
.gm-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff8800, transparent);
}
.gm-back {
  position: absolute;
  left: 24px;
  top: 28px;
  color: #ff8800;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-shadow: 0 0 8px rgba(255,136,0,0.3);
  transition: color 0.2s;
}
.gm-back:hover { color: #ffaa44; }
.gm-title {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: 2px;
  text-shadow: 0 0 20px rgba(255,136,0,0.3);
}

.gm-cards {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  padding: 24px 48px;
  overflow: hidden;
  /* So the search-lock bar can sit at the bottom of THIS panel. Without it the
     bar resolves against whatever ancestor happens to be positioned, which on
     the mode screen is the page — and it then lands under the main menu's
     buttons rather than under the cards it is explaining. */
  position: relative;
}

.gm-card {
  position: relative;
  width: 420px;
  height: 320px;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid rgba(255,136,0,0.15);
  transition: all 0.35s ease;
  flex-shrink: 0;
}
.gm-card:hover {
  border-color: #ff8800;
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 40px rgba(255,136,0,0.2), 0 0 30px rgba(255,136,0,0.1);
}
.gm-card:active {
  transform: translateY(-2px) scale(0.99);
}

.gm-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}
.gm-card:hover .gm-card-bg {
  transform: scale(1.08);
}

.gm-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,12,24,0.3) 0%, rgba(8,12,24,0.85) 100%);
  transition: background 0.3s;
}
.gm-card:hover .gm-card-overlay {
  background: linear-gradient(180deg, rgba(8,12,24,0.15) 0%, rgba(8,12,24,0.75) 100%);
}

.gm-card-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
}
.gm-card-icon {
  font-size: 48px;
  margin-bottom: 12px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
  color: #fff;
}
.gm-card-icon svg {
  width: 48px;
  height: 48px;
  stroke: #fff;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}
.gm-card-name {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 2px;
  margin-bottom: 6px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.gm-card-desc {
  font-size: 13px;
  color: #aab0c4;
  line-height: 1.4;
}

.gm-card.selected {
  border-color: #ff8800;
  box-shadow: 0 0 30px rgba(255,136,0,0.3), inset 0 0 30px rgba(255,136,0,0.05);
}
.gm-card.selected .gm-card-overlay {
  background: linear-gradient(180deg, rgba(255,136,0,0.08) 0%, rgba(8,12,24,0.8) 100%);
}

/* ===========================================================================
   THE SEARCH LOCK

   The mode picker, greyed and inert while a match search is running. Two things
   do the work: the cards lose their lift and their pointer, and a bar appears
   under them saying what is happening and how to get out of it.

   THE BAR IS THE IMPORTANT HALF. A picker that simply stops responding is
   indistinguishable from a broken one. A picker that says "searching — cancel to
   change" is a thing doing its job, and the exit is spelled out on a real
   button rather than left to be inferred from the PLAY button's timer.
   ========================================================================= */
.gm-card.mode-locked,
.gamemode-square.mode-locked {
  cursor: not-allowed;
  filter: grayscale(0.85) brightness(0.52);
  transition: filter 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.gm-card.mode-locked:hover,
.gamemode-square.mode-locked:hover {
  /* No lift. The hover rise IS the card's entire "you can press me" signal, and
     a card that lifts under the cursor and then does nothing is worse than one
     that plainly refuses. */
  transform: none;
  border-color: rgba(255,136,0,0.15);
  box-shadow: none;
  filter: grayscale(0.85) brightness(0.52);
}
.gm-card.mode-locked:active,
.gamemode-square.mode-locked:active {
  transform: none;
}

.mode-lock-note {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(44,50,60,0.97) 0%, rgba(26,30,38,0.97) 100%);
  /* The house plate, minus the keyline: the same inset top light and drop the
     stat plates use. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -2px 0 rgba(0,0,0,0.28),
    0 10px 26px rgba(0,0,0,0.5);
  white-space: nowrap;
  pointer-events: auto;
  z-index: 5;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.mode-lock-note.hide {
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  pointer-events: none;
}
.mode-lock-note.show {
  animation: mode-lock-in 0.28s cubic-bezier(0.2, 1.05, 0.4, 1) both;
}
@keyframes mode-lock-in {
  0%   { opacity: 0; transform: translateX(-50%) translateY(12px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.mode-lock-icon {
  display: inline-flex;
  color: #ffb12b;
  filter: drop-shadow(0 0 6px rgba(255,177,43,0.45));
  flex-shrink: 0;
}
.mode-lock-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.mode-lock-text b {
  font-family: 'Lilita One', 'Fredoka', system-ui, sans-serif;
  font-size: 15px;
  letter-spacing: 0.6px;
  color: #fff;
}
.mode-lock-text i {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,0.62);
}

/* The escape hatch: a real button in the house's chunky style rather than a text
   link, because this is the one action that gets the player out of the locked
   state and it should look like the thing you press. */
.mode-lock-cancel {
  margin-left: 6px;
  padding: 8px 15px;
  border: 2px solid rgba(0,0,0,0.9);
  border-radius: 11px;
  background: linear-gradient(180deg, #ffc247 0%, #ff9a1f 52%, #d9780c 100%);
  box-shadow:
    0 3px 0 rgba(0,0,0,0.75),
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -2px 0 rgba(0,0,0,0.22);
  color: #2a1a03;
  font-family: 'Lilita One', 'Fredoka', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.7px;
  cursor: pointer;
  transition: transform 0.10s ease, box-shadow 0.10s ease, filter 0.10s ease;
}
.mode-lock-cancel:hover { filter: brightness(1.08); }
.mode-lock-cancel:active {
  transform: translateY(3px);
  box-shadow:
    0 0 0 rgba(0,0,0,0.75),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.22);
}

@media (max-width: 900px) {
  .gm-cards { flex-direction: column; gap: 20px; padding: 16px; }
  .gm-card { width: 100%; max-width: 360px; height: 240px; }
}
@media (max-width: 420px) {
  .gm-card { height: 200px; }
  .gm-card-name { font-size: 18px; }
  .gm-card-icon { font-size: 36px; }
}
@keyframes loadTankBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
#match-cd {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 12vh;
  pointer-events: none;
}
.match-cd-box {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 20px 40px;
  text-align: center;
}
.match-cd-label {
  font-size: 14px;
  letter-spacing: 4px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 10px;
  text-transform: uppercase;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(255,255,255,0.3);
}
.match-cd-num {
  font-size: 120px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 30px rgba(255,255,255,0.8), 0 0 60px rgba(255,255,255,0.4), 0 0 90px rgba(255,255,255,0.2);
  line-height: 1;
  perspective: 300px;
  display: inline-block;
}
.match-cd-num.tick {
  animation: match-cd-flip 0.5s ease-out;
}
@keyframes match-cd-flip {
  0% { transform: rotateX(0deg); opacity: 1; }
  50% { transform: rotateX(90deg); opacity: 0.3; }
  100% { transform: rotateX(0deg); opacity: 1; }
}
.match-cd-go {
  font-size: 56px;
  font-weight: bold;
  letter-spacing: 8px;
  color: #4ade80;
  text-shadow: 0 0 40px rgba(74,222,128,.8), 0 0 80px rgba(74,222,128,.3);
  animation: match-cd-go-pulse .5s ease;
}
@keyframes match-cd-go-pulse {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
}
.match-cd-switch{margin-top:14px;text-align:center}
.match-cd-switch-label{font-size:10px;letter-spacing:2px;color:#7a7f8a;margin-bottom:6px;font-weight:600}
.match-cd-tank-list{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;max-width:340px}
.match-cd-tank-btn{width:56px;height:56px;border-radius:10px;border:2px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.06);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .15s;pointer-events:auto;padding:4px}
.match-cd-tank-btn:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,180,40,0.5);transform:scale(1.08)}
.match-cd-tank-btn.active{border-color:#fbbf24;background:rgba(251,191,36,0.15);box-shadow:0 0 12px rgba(251,191,36,0.3)}
.match-cd-tank-btn img{width:28px;height:28px;object-fit:contain;mix-blend-mode:screen;pointer-events:none}
.match-cd-tank-btn .tc-name{font-size:7px;color:#ccc;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50px}

/* Tank switch panel (bottom, during countdown) — WoT-style 2-row full-width */
.tank-switch-panel{position:fixed;bottom:12px;left:12px;right:12px;z-index:210;background:rgba(10,13,20,0.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:2px solid rgba(255,255,255,0.12);border-radius:14px;padding:10px 16px;pointer-events:auto}
.tank-switch-panel.hidden{display:none !important}
.tank-switch-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.tank-switch-header .ts-label{font-size:12px;letter-spacing:2px;color:#7a7f8a;font-weight:600}
.tank-switch-header .ts-count{font-size:12px;color:#ffb12b;font-weight:600}
.tank-switch-scroll{display:flex;align-items:center;gap:8px}
.tank-switch-grid{display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(2, 1fr);gap:6px;height:140px;overflow:hidden;width:100%}
.tank-switch-grid::-webkit-scrollbar{height:4px}
.tank-switch-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:2px}
.ts-btn{width:100%;height:64px;border-radius:10px;border:2px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.04);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .15s;position:relative;padding:4px;min-width:96px}
.ts-btn:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,180,40,0.4);transform:scale(1.06)}
.ts-btn.active{border-color:#fbbf24;background:rgba(251,191,36,0.12);box-shadow:0 0 10px rgba(251,191,36,0.25)}
.ts-btn img{width:36px;height:36px;object-fit:contain;mix-blend-mode:screen;pointer-events:none}
.ts-btn .ts-name{font-size:10px;color:#ccc;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center}
.ts-star{position:absolute;top:2px;right:2px;width:16px;height:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;color:rgba(255,255,255,0.2);transition:all .15s;pointer-events:auto;line-height:1}
.ts-star:hover{color:#fbbf24;transform:scale(1.2)}
.ts-star.on{color:#fbbf24;text-shadow:0 0 6px rgba(251,191,36,0.6)}
.tank-switch-nav{display:flex;gap:6px;flex-shrink:0}
.ts-nav-btn{background:linear-gradient(160deg,#4a4f58,#23262c);border:2px solid #000;border-radius:999px;color:#fff;font-size:16px;font-weight:700;width:32px;height:32px;cursor:pointer;line-height:1;padding:0;box-shadow:0 3px 0 #000;transition:transform .1s,filter .1s;display:flex;align-items:center;justify-content:center}
.ts-nav-btn:hover{filter:brightness(1.2)}
.ts-nav-btn:active{transform:translateY(1px);box-shadow:0 2px 0 #000}
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
}
.loading-box {
  text-align: center;
}
.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255,255,255,0.15);
  border-top-color: #fbbf24;
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: loading-spin 0.8s linear infinite;
}
.loading-text {
  font-size: 16px;
  color: #fbbf24;
  letter-spacing: 2px;
}
@keyframes loading-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   Graphics Settings Panel (Ctrl+O)
   ============================================================ */
#gs-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);z-index:300;display:flex;align-items:center;justify-content:center;font-family:'Segoe UI',Arial,sans-serif}
#gs-overlay.hidden{display:none !important}
.gs-panel{width:380px;max-height:85vh;background:rgba(12,14,22,0.95);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.6);display:flex;flex-direction:column}
.gs-header{display:flex;align-items:center;padding:12px 16px;background:rgba(255,136,0,0.08);border-bottom:1px solid rgba(255,255,255,0.06)}
.gs-title{font-size:14px;font-weight:800;color:#ff8800;letter-spacing:1.5px;flex:1}
.gs-hint{font-size:10px;color:rgba(255,255,255,0.3);margin-right:12px}
.gs-close{font-size:20px;color:rgba(255,255,255,0.4);cursor:pointer;line-height:1}
.gs-close:hover{color:#fff}
.gs-body{overflow-y:auto;flex:1;padding:8px 0}
.gs-body::-webkit-scrollbar{width:4px}
.gs-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:2px}
.gs-section{border-bottom:1px solid rgba(255,255,255,0.04)}
.gs-section-title{padding:8px 16px;font-size:11px;font-weight:700;color:rgba(255,255,255,0.6);letter-spacing:1.2px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:.15s}
.gs-section-title:hover{color:#ff8800;background:rgba(255,255,255,0.02)}
.gs-arrow{font-size:8px;transition:transform .2s}
.gs-collapsed .gs-arrow{transform:rotate(-90deg)}
.gs-collapsed .gs-section-body{display:none}
.gs-section-body{padding:4px 16px 10px}
.gs-row{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:12px;color:rgba(255,255,255,0.7)}
.gs-row label{min-width:110px;flex-shrink:0;color:rgba(255,255,255,0.55);font-size:11px}
.gs-row input[type=range]{flex:1;-webkit-appearance:none;height:4px;background:rgba(255,255,255,0.12);border-radius:2px;outline:none}
.gs-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:#ff8800;border-radius:50%;cursor:pointer;border:none}
.gs-row input[type=range]::-moz-range-thumb{width:14px;height:14px;background:#ff8800;border-radius:50%;cursor:pointer;border:none}
.gs-val{min-width:36px;text-align:right;color:#ff8800;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.gs-row input[type=color]{width:28px;height:22px;border:1px solid rgba(255,255,255,0.15);border-radius:4px;cursor:pointer;background:none;padding:0}
.gs-row input[type=color]::-webkit-color-swatch-wrapper{padding:1px}
.gs-row input[type=color]::-webkit-color-swatch{border:none;border-radius:3px}
.gs-row select{flex:1;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:4px;color:#fff;padding:3px 6px;font-size:11px;outline:none}
.gs-row select option{background:#1a1e2e;color:#fff}
.gs-switch{position:relative;display:inline-block;width:36px;height:20px;flex-shrink:0}
.gs-switch input{opacity:0;width:0;height:0}
.gs-switch .gs-slider{position:absolute;inset:0;background:rgba(255,255,255,0.15);border-radius:10px;cursor:pointer;transition:.3s}
.gs-switch .gs-slider:before{content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:.3s}
.gs-switch input:checked+.gs-slider{background:#ff8800}
.gs-switch input:checked+.gs-slider:before{transform:translateX(16px)}
.gs-footer{padding:12px 16px;display:flex;gap:8px;border-top:1px solid rgba(255,255,255,0.06)}
.gs-btn{flex:1;padding:8px 12px;border:none;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;transition:.15s;letter-spacing:0.5px}
.gs-apply{background:linear-gradient(135deg,#ff8800,#e67300);color:#fff}
.gs-apply:hover{filter:brightness(1.1)}
.gs-reset{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.5);border:1px solid rgba(255,255,255,0.1)}
.gs-reset:hover{background:rgba(255,255,255,0.1);color:#fff}

/* ===========================================================================
   SECRET COMMANDS — the Tab+P panel
   ===========================================================================
   Styled as the game's own chrome: graphite plate, gold header, hard 2px black
   keyline and a hard un-blurred offset shadow, the same object as the settings
   buttons and the mission cards. Rows press in on :active like everything else.

   IT IS A PEEK, NOT A MODAL. The scrim is a light dim rather than an opaque
   one, because the usual reason to open this is to change something and then get
   straight back into the fight — you want to see the game through it. */
.devc-scrim{
  position:fixed;
  inset:0;
  z-index:9000;
  background:rgba(0,0,0,.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.devc-scrim.devc-open{opacity:1;pointer-events:auto}

.devc-panel{
  position:fixed;
  z-index:9001;
  top:50%;
  left:50%;
  width:min(420px,calc(100vw - 32px));
  /* transform carries BOTH the centring and the entrance offset, because
     writing them as one transform is what lets the whole thing animate without
     a layout pass. Centring with margin auto instead would fight the transform
     on every frame. */
  transform:translate(-50%,-46%) scale(.96);
  opacity:0;
  background:linear-gradient(180deg,#33383f 0%,#262b31 55%,#1c2025 100%);
  border:2px solid #000;
  border-radius:14px;
  box-shadow:0 6px 0 #101216,0 8px 0 #000,0 18px 40px rgba(0,0,0,.55);
  font-family:inherit;
  overflow:hidden;
  transition:transform .18s cubic-bezier(.2,.9,.3,1),opacity .18s ease;
}
.devc-panel.devc-open{transform:translate(-50%,-50%) scale(1);opacity:1}

.devc-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:11px 14px;
  background:linear-gradient(135deg,#ffd257 0%,#ffb12b 55%,#e08c11 100%);
  border-bottom:2px solid #000;
}
.devc-title{
  font-family:'Lilita One','Fredoka',sans-serif;
  font-size:14px;
  font-weight:800;
  letter-spacing:1.6px;
  color:#1a1208;
}
.devc-hint{
  font-size:10px;
  font-weight:800;
  letter-spacing:1px;
  /* A dark chip on the gold band — the same trick the mission card header
     uses. Plain gold-on-gold would be invisible. */
  background:#14171b;
  color:#ffd257;
  border:1px solid #000;
  border-radius:5px;
  padding:2px 6px;
}

.devc-list{padding:8px;display:flex;flex-direction:column;gap:5px}

.devc-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  text-align:left;
  padding:9px 11px;
  font-family:inherit;
  cursor:pointer;
  background:linear-gradient(180deg,#3a4048,#262b31);
  border:2px solid #000;
  border-radius:10px;
  box-shadow:0 3px 0 #101216,0 4px 0 #000;
  transition:transform .1s,box-shadow .1s,background .1s,opacity .1s;
}
.devc-row:hover{transform:translate(-1px,-1px);box-shadow:0 5px 0 #101216,0 6px 0 #000;background:linear-gradient(180deg,#454b54,#2e343b)}
.devc-row:active{transform:translate(2px,4px);box-shadow:0 1px 0 #101216,0 2px 0 #000}

/* UNAVAILABLE: greyed, but still clickable. It is NOT disabled, because a
   disabled button gives no reason — clicking it explains itself with a toast,
   which is the difference between "why is this grey" and "not right now". */
.devc-row.devc-off{opacity:.45;filter:grayscale(.5)}
.devc-row.devc-off:hover{opacity:.75}

.devc-main{display:flex;flex-direction:column;gap:1px;min-width:0}
.devc-label{font-size:12.5px;font-weight:800;letter-spacing:.4px;color:#fff}
.devc-desc{font-size:10px;color:rgba(255,255,255,.42);line-height:1.3}

.devc-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
/* The ON flag. Gold on dark, because that is the one colour this game uses to
   mean "this is active". */
.devc-state{
  font-size:9px;
  font-weight:900;
  letter-spacing:1px;
  color:#ffd257;
  display:none;
}
.devc-state.devc-on{display:block}
.devc-keys{
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.5px;
  color:rgba(255,255,255,.55);
  background:#14171b;
  border:1px solid #000;
  border-radius:5px;
  padding:3px 6px;
  white-space:nowrap;
}

.devc-foot{
  padding:8px 12px;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:9.5px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:rgba(255,255,255,.3);
  text-align:center;
}

@media (prefers-reduced-motion:reduce){
  .devc-panel,.devc-scrim{transition-duration:.01ms}
}

/* ===========================================================================
   MAP VOTING OVERLAY — the COLOR WIPE
   ===========================================================================

   The vote screen used to fade in over 0.3s. A cross-fade is the least
   interesting transition available and it made this screen feel like a dialog
   rather than a step in a sequence.

   THE WIPE. A solid panel sweeps across the screen and the vote screen is
   revealed behind it. Two wipes, in opposite directions:

     opening   the bar sits off the LEFT edge and travels RIGHT, uncovering the
               vote screen as it goes. The screen assembles behind the wipe.
     closing   the bar travels LEFT again, covering the vote screen on its way
               out — so the same gesture that brought the screen in takes it
               away, and the two read as one motion rather than two effects.

   WHY A SOLID BLOCK AND NOT A DIAGONAL OR A CIRCLE. It is the game's own
   vocabulary: hard-edged colour with a black keyline, the same idea as the
   settings buttons and the mission cards. A soft-edged shape would belong to a
   different application.

   THE COLOURS ARE DARK GRAY, and that is a correction rather than a preference.
   This started out gold (#ffd257 -> #ffb12b), which was wrong on two counts: a
   gold curtain over a screen whose accents are all gold reads as one flat orange
   smear, and a full-screen saturated orange between two dark screens is a flash
   rather than a transition. Graphite matches the missions menu's own background,
   so the wipe reads as that menu arriving. See .mv-wipe::before.

   THE WIPE IS NOT A TRANSITION ON THE OVERLAY. The overlay is toggled with
   .hidden (display:none), and a transition cannot survive that — so the wipe is
   driven by a class that map-voting.js adds and removes, and the overlay's own
   opacity is pinned to 1 throughout. */
.mv-wipe{
  position:fixed;
  inset:0;
  z-index:10001;
  pointer-events:none;
  /* Parked off the left edge. translateX(-100%) moves the element's own width,
     so the panel is fully clear of the viewport and cannot catch a click even
     though pointer-events is none. */
  transform:translateX(-100%);
  will-change:transform;
}
/* DARK GRAY, not gold.

   The first version of this wipe was #ffd257 -> #ffb12b, and it was wrong twice
   over. It fought the accent: the vote screen's own accents are gold (title,
   timer ring, the winner's ring), so a gold curtain landing on top of a gold
   screen reads as one flat orange smear for the duration. And a full-screen
   saturated orange between two dark screens is a flash, which is worse than no
   transition at all.

   Graphite is the move. It matches #menu-missions' own background
   (linear-gradient(160deg,#111318,#0c0e12,#0f1116)), so the wipe reads as the
   menu arriving rather than as something thrown over it. */
.mv-wipe::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#1a1d21 0%,#121417 55%,#0a0c0e 100%);
  /* ONE hard edge on the leading side only — a black keyline, the same device
     as the rest of the game's chrome. The earlier version had inset shadows on
     BOTH the top and bottom, which on a full-height panel put two dark bands
     across the top and bottom of the screen and looked like a rendering fault
     rather than an edge. */
  box-shadow:inset -3px 0 0 rgba(0,0,0,.85);
}
/* The sheen. A soft diagonal band so the panel has a highlight running over it
   rather than reading as flat paper. Kept subtle — on a dark panel a strong
   white band is the only bright thing on screen and draws the eye to the
   curtain instead of to the vote screen it is uncovering. */
.mv-wipe::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 36%,
    rgba(255,177,43,.16) 47%,
    rgba(255,255,255,0) 58%);
}
/* FAST. 0.22s in, 0.18s out.

   It was 0.52s/0.42s, which is roughly two and a half times too long. The vote
   screen only exists for ten seconds, and a four-frame pause at the start of a
   round is a tenth of the whole thing spent on a curtain. Anything past about
   a quarter-second stops reading as a transition and starts reading as a stall
   — the player has finished reading the motion before it finishes.

   The easing does the rest: (.7,0,.2,1) is steep at both ends, so the panel
   leaves fast and arrives hard. The old (.72,0,.24,1) was a close cousin, but
   at this duration the acceleration curve is what makes it feel like a snap
   rather than a drift. */
#map-vote-overlay.mv-wipe-in .mv-wipe{
  animation:mvWipeIn .22s cubic-bezier(.7,0,.2,1) both;
}
@keyframes mvWipeIn{
  from{transform:translateX(-100%)}
  to{transform:translateX(0)}
}
/* OUT is faster than IN. The player is waiting to play; the screen leaving is
   pure delay and nothing is being read. */
#map-vote-overlay.mv-wipe-out .mv-wipe{
  animation:mvWipeOut .18s cubic-bezier(.7,0,.2,1) both;
}
@keyframes mvWipeOut{
  from{transform:translateX(0)}
  to{transform:translateX(-100%)}
}
/* BETWEEN THE TWO, and whenever the overlay is not mid-wipe, the bar is parked
   off-screen so the round is never played behind a curtain.

   This rule is also the CSS backstop for the class bug that broke this screen
   once already: the wipe-in animation is declared `both`, so if `mv-wipe-in` is
   ever left on, the animation holds its LAST keyframe (translateX(0)) forever —
   a full-screen gold panel over the entire vote UI, undismissable. Holding the
   class is what puts the bar ON screen, not what parks it, so the class must be
   removed when the wipe ends (map-voting.js _wipeIn does this).

   The pair below make the failure mode survivable rather than silent:
     .mv-container      the UI, above the bar, so it stays visible and clickable
     pointer-events:none the bar never takes a click even mid-animation
   so the worst case of a stuck class is a stray gold wash, not a dead screen. */
#map-vote-overlay:not(.mv-wipe-in):not(.mv-wipe-out) .mv-wipe{
  transform:translateX(-100%);
}
/* The bar is decoration; it must never intercept a click on the cards beneath
   it, at any point in the animation. */
.mv-wipe{pointer-events:none !important}
/* The vote UI sits ABOVE the bar. Normally the bar is off-screen by the time
   anything is interactive, so this changes nothing in the happy path — but if a
   wipe is ever mid-flight or a class sticks, the cards stay visible and
   clickable rather than being buried under a full-screen panel. */
#map-vote-overlay .mv-container{position:relative;z-index:10002}

@media (prefers-reduced-motion:reduce){
  #map-vote-overlay.mv-wipe-in .mv-wipe,
  #map-vote-overlay.mv-wipe-out .mv-wipe{animation-duration:.01ms}
}

/* ===== MAP VOTING OVERLAY ===== */
.mv-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;transition:opacity .3s}
.mv-overlay.hidden{display:none!important;pointer-events:none}
/* OPAQUE ON PURPOSE. At rgba(0,0,0,0.88) + blur, the menu underneath stayed
   faintly visible through the backdrop, so voting for a map looked like the
   game had dumped you back on the main menu -- which is exactly what players
   reported. The vote is a full-screen step of its own; nothing behind it shows.

   The gradient is the background-IMAGE and it is fully opaque on its own. It
   used to also carry `background:#0a0d14`, and because the shorthand resets
   background-image, the pair fought: the shorthand ran second in source order
   and wiped the gradient, leaving the computed background-color transparent and
   a later re-check reading alpha 0. One declaration, gradient only. */
.mv-backdrop{
  position:absolute;inset:0;
  background-image:linear-gradient(160deg,#141a26 0%,#0a0d14 60%,#070910 100%);
}
.mv-container{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%;max-width:900px;padding:24px}
.mv-header{text-align:center;margin-bottom:28px}
.mv-title{font-family:'Fredoka',sans-serif;font-size:clamp(28px,5vw,48px);font-weight:700;color:#ffd257;letter-spacing:2px;text-transform:uppercase;text-shadow:0 3px 0 #000,0 0 30px rgba(255,177,43,.45)}
/* Gold, not the old #ff6a00, and hard-edged like the rest of the game's chrome. */
.mv-timer{width:72px;height:72px;border-radius:50%;background:conic-gradient(#ffb12b 0%,#ffb12b var(--timer-pct,100%),rgba(255,255,255,0.08) var(--timer-pct,100%));display:flex;align-items:center;justify-content:center;margin:16px auto 0;font-family:'Fredoka',sans-serif;font-size:32px;font-weight:700;color:#fff;border:3px solid #000;box-shadow:0 0 24px rgba(255,177,43,.4),0 5px 0 #101216,0 6px 0 #000,inset 0 0 12px rgba(0,0,0,0.3);transition:background .3s}
.mv-cards{display:flex;gap:20px;width:100%;justify-content:center;flex-wrap:wrap}
.mv-card{position:relative;flex:1 1 240px;max-width:280px;min-height:200px;border-radius:16px;overflow:hidden;cursor:pointer;border:3px solid #000;transition:all .18s cubic-bezier(.4,0,.2,1);background:linear-gradient(180deg,#33383f 0%,#262b31 55%,#1c2025 100%);
  /* The hard un-blurred offset is the same 3D lip the settings buttons and the mission cards use: it is what makes a card read as a solid object rather than a picture of one. */
  box-shadow:0 5px 0 #101216,0 7px 0 #000,0 10px 20px rgba(0,0,0,.45)}
.mv-card:hover{transform:translate(-2px,-3px);border-color:#000;box-shadow:0 9px 0 #101216,0 11px 0 #000,0 18px 32px rgba(255,177,43,.28)}
.mv-card:active{transform:translate(2px,5px);box-shadow:0 2px 0 #101216,0 3px 0 #000}
/* VOTED: a gold ring and a lift, so the chosen card is unmistakable in a row of
   four. Green was the old colour; gold is the game's accent and matches the wipe. */
.mv-card.voted{border-color:#000;box-shadow:0 5px 0 #101216,0 7px 0 #000,0 0 0 3px #ffb12b,0 10px 28px rgba(255,177,43,.4);transform:translate(-2px,-2px)}
.mv-card.voted:hover{box-shadow:0 9px 0 #101216,0 11px 0 #000,0 0 0 3px #ffd257,0 18px 36px rgba(255,177,43,.5)}
.mv-card.voted::after{content:'\2713';position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;z-index:5;color:#1a1208;border:2px solid #000;background:linear-gradient(180deg,#ffd257,#ffb12b);box-shadow:0 3px 0 #a8640a,0 4px 0 #000}
.mv-card-preview{width:100%;height:130px;background-size:cover;background-position:center;background-color:#262b31;position:relative}
/* A gold hairline under the preview, so the art sits inside the card instead of
   bleeding into the graphite below it. */
.mv-card-preview::after{content:'';position:absolute;inset:auto 0 0 0;height:2px;background:linear-gradient(90deg,transparent,#ffb12b,transparent);opacity:.55}
.mv-card-info{padding:12px 14px;position:relative}
.mv-card-name{font-family:'Fredoka',sans-serif;font-size:16px;font-weight:600;color:#fff;margin-bottom:4px}
.mv-card-desc{font-size:12px;color:rgba(255,255,255,0.5);line-height:1.3}
/* The tally is a solid chip, not a translucent blur — on a dark card a blurred
   wash reads as smudge rather than as a number. */
.mv-card-votes{position:absolute;top:12px;right:12px;background:rgba(10,12,15,0.9);border:2px solid #000;box-shadow:0 3px 0 #101216;padding:4px 10px;border-radius:20px;font-family:'Fredoka',sans-serif;font-size:13px;font-weight:700;color:#ffd257;z-index:2}
.mv-footer{text-align:center;margin-top:24px}
.mv-votes-label{font-size:14px;color:rgba(255,255,255,0.4);font-weight:600;letter-spacing:0.5px}
/* WINNER: gold, matching the wipe that is about to cover the screen. The green
   it replaces was the only green left on a screen that is otherwise gold and
   graphite. */
.mv-card.winner{border-color:#000;box-shadow:0 5px 0 #101216,0 7px 0 #000,0 0 0 4px #ffd257,0 0 44px rgba(255,210,87,.6);animation:mvWinnerPulse .6s ease-in-out infinite alternate}
.mv-card:not(.winner){opacity:0.35;transform:scale(0.95)}
@keyframes mvWinnerPulse{
  0%{box-shadow:0 5px 0 #101216,0 7px 0 #000,0 0 0 4px #ffb12b,0 0 30px rgba(255,177,43,.4)}
  100%{box-shadow:0 5px 0 #101216,0 7px 0 #000,0 0 0 4px #ffd257,0 0 52px rgba(255,210,87,.75)}
}

/* ===== MAP VOTE: responsive sizing =====
   Every dimension in this screen was written in fixed pixels — a 72px timer,
   cards that never go below 240px, a 130px preview, 900px container. On a
   laptop at a small window, or on a phone, that container overflows and the
   cards overlap the header and footer, which is what "the vote menu is
   broken" actually was. These rules make the whole screen scale with the
   space it has instead of assuming a big desktop. */

/* Scale the whole screen together, so nothing can drift out of step. */
.mv-container{
  max-width:min(900px, 94vw);
  padding:clamp(10px, 2.2vh, 24px);
}
.mv-header{margin-bottom:clamp(10px, 2.4vh, 28px)}
.mv-title{font-size:clamp(18px, 4.4vw, 48px)}
.mv-timer{
  width:clamp(40px, 8vh, 72px);
  height:clamp(40px, 8vh, 72px);
  font-size:clamp(16px, 3.4vh, 32px);
  margin:clamp(6px, 1.4vh, 16px) auto 0;
}
.mv-cards{gap:clamp(8px, 1.6vw, 16px)}
/* min-width:0 lets a card actually shrink below its content instead of
   refusing to and pushing the row wider than the screen. */
.mv-card{
  flex:1 1 0;
  min-width:0;
  max-width:280px;
  min-height:clamp(120px, 26vh, 200px);
  border-radius:clamp(8px, 1.4vw, 16px);
  border-width:clamp(2px, .3vw, 3px);
}
.mv-card-preview{height:clamp(64px, 15vh, 130px)}
.mv-card-info{padding:clamp(7px, 1.2vh, 12px) clamp(9px, 1.1vw, 14px)}
.mv-card-name{font-size:clamp(12px, 1.5vw, 16px)}
.mv-card-desc{font-size:clamp(10px, 1.2vw, 12px)}
.mv-card-votes{
  font-size:clamp(10px, 1.2vw, 13px);
  padding:clamp(2px, .5vh, 4px) clamp(6px, .9vw, 10px);
  top:clamp(6px, 1.2vh, 12px); right:clamp(6px, 1.2vh, 12px);
}
.mv-card.voted::after{
  width:clamp(20px, 3.2vw, 32px); height:clamp(20px, 3.2vw, 32px);
  font-size:clamp(11px, 1.6vw, 18px);
  top:clamp(6px, 1.2vh, 12px); right:clamp(6px, 1.2vh, 12px);
}
.mv-footer{margin-top:clamp(10px, 2vh, 24px)}
.mv-votes-label{font-size:clamp(11px, 1.3vw, 14px)}

/* Narrow screens: one card per row, and stop the preview eating the height. */
@media (max-width:640px){
  .mv-cards{flex-direction:column;align-items:center}
  .mv-card{width:100%;max-width:420px;min-height:0}
  .mv-card-preview{height:clamp(70px, 13vh, 110px)}
}
/* Short screens (a laptop window, or a phone in landscape): the screen is
   mostly height-starved, so trim the vertical rhythm hard. */
@media (max-height:520px){
  .mv-header{margin-bottom:6px}
  .mv-title{font-size:clamp(16px, 3.6vh, 28px)}
  .mv-timer{width:clamp(34px, 9vh, 52px);height:clamp(34px, 9vh, 52px);font-size:clamp(14px, 4vh, 22px);margin-top:4px}
  .mv-card-preview{height:clamp(48px, 14vh, 90px)}
  .mv-footer{margin-top:8px}
}
@media (max-height:360px){
  .mv-card-preview{display:none}
  .mv-card-info{padding:8px 10px}
}

/* ===== CRATE (BOX) REWARD-CHANCES INFO BUTTON + PANEL ===== */
/* Glowing ⓘ button, top-left of #box-overlay — revealed with the rewards */
.box-info-btn{
  position:absolute;top:18px;left:18px;z-index:6;
  display:flex;align-items:center;gap:9px;
  padding:9px 17px 9px 10px;
  background:linear-gradient(135deg,#ffb12b,#e6951a);
  color:#1a1208;font-family:Arial,sans-serif;font-size:13px;font-weight:bold;letter-spacing:1.5px;
  border:2px solid rgba(255,255,255,0.6);border-radius:26px;cursor:pointer;
  opacity:0;pointer-events:none;user-select:none;-webkit-user-select:none;
  box-shadow:0 0 0 3px rgba(255,177,43,0.25),0 4px 16px rgba(0,0,0,0.6),0 0 20px rgba(255,177,43,0.55);
  transition:opacity .45s ease,filter .3s ease,transform .15s ease;
  animation:boxInfoPulse 2.4s ease-in-out infinite;
}
.box-info-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.box-info-btn:active{transform:translateY(0)}
.box-info-btn-ico{
  width:22px;height:22px;border-radius:50%;background:#1a1208;color:#ffb12b;
  display:flex;align-items:center;justify-content:center;
  font-family:Georgia,serif;font-style:italic;font-weight:bold;font-size:15px;line-height:1;
}
@keyframes boxInfoPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(255,177,43,0.22),0 4px 16px rgba(0,0,0,0.6),0 0 16px rgba(255,177,43,0.4)}
  50%{box-shadow:0 0 0 7px rgba(255,177,43,0.1),0 4px 16px rgba(0,0,0,0.6),0 0 34px rgba(255,177,43,0.9)}
}
/* Blur the video + rewards a bit while the panel is open */
#box-overlay.box-info-open>video,
#box-overlay.box-info-open>div:not(.box-info-panel):not(.box-info-scrim){filter:blur(9px)}
/* Click-catcher behind the panel */
.box-info-scrim{position:absolute;inset:0;z-index:20;background:rgba(4,6,10,0.35);transition:opacity .25s ease;animation:boxInfoFadeIn .3s ease}
.box-info-scrim.hide{opacity:0}
@keyframes boxInfoFadeIn{from{opacity:0}to{opacity:1}}
/* Panel — slides in from the LEFT (left → right), like the reference */
.box-info-panel{
  position:absolute;top:0;left:0;height:100%;z-index:21;width:min(660px,94vw);
  transform:translateX(-105%);
  transition:transform .38s cubic-bezier(.22,.9,.3,1);
  /* Translucent so the blurred rewards stay readable behind it, with a
     backdrop blur of its own so the text never fights the video. */
  background:linear-gradient(135deg,rgba(13,16,25,0.55),rgba(21,25,38,0.45));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-right:2px solid rgba(255,177,43,0.5);
  box-shadow:16px 0 46px rgba(0,0,0,0.7);
  display:flex;flex-direction:column;
  padding:22px 26px 20px;overflow-y:auto;overscroll-behavior:contain;
  font-family:Arial,sans-serif;
}
.box-info-panel.open{transform:translateX(0)}
.box-info-head{position:relative;display:flex;align-items:center;justify-content:center;min-height:38px}
.box-info-title{font-size:clamp(20px,4vw,28px);font-weight:800;letter-spacing:3px;color:#fff;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,0.8),0 0 24px rgba(255,177,43,0.25)}
.box-info-close{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.28);
  color:#fff;font-size:22px;line-height:32px;text-align:center;cursor:pointer;transition:.2s;
}
.box-info-close:hover{background:#ff3b3b;border-color:#ff3b3b;transform:translateY(-50%) rotate(90deg)}
.box-info-sub{text-align:center;color:rgba(255,255,255,0.55);font-size:12.5px;letter-spacing:0.6px;margin:4px 0 10px}
.box-info-sub b{color:#ffb12b}
/* One row per drop chance — dice + % on the LEFT, reward icons right */
.box-info-row{display:flex;align-items:center;gap:18px;padding:16px 4px;border-top:1px solid rgba(255,255,255,0.09)}
.box-info-chance{display:flex;align-items:center;gap:7px;min-width:88px;color:#fff;font-weight:800;font-size:17px;letter-spacing:0.5px}
.box-info-dice{color:rgba(255,255,255,0.85);flex:0 0 auto}
.box-info-items{display:flex;flex-wrap:wrap;gap:14px;flex:1}
.box-info-item{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  min-width:118px;padding:12px 14px 9px;
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:12px;
  transition:.2s;
}
.box-info-item:hover{border-color:rgba(255,177,43,0.65);background:rgba(255,177,43,0.08);transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,0.45)}
.box-info-ico img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 5px 9px rgba(0,0,0,0.65))}
.box-info-name{font-size:13px;font-weight:700;color:#e9e9e9;letter-spacing:0.5px}
.box-info-amount{font-size:14px;font-weight:800;color:#ffb12b;text-shadow:0 0 12px rgba(255,177,43,0.4)}
.box-info-note{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,0.09);text-align:center;color:rgba(255,255,255,0.5);font-size:12px;line-height:1.55}
.box-info-note b{color:rgba(255,255,255,0.85)}
@media (max-width:520px){
  .box-info-panel{padding:16px 14px 14px}
  .box-info-row{gap:10px;padding:13px 2px}
  .box-info-chance{min-width:64px;font-size:15px}
  .box-info-item{min-width:96px;padding:9px 10px 7px}
  .box-info-ico img{width:44px;height:44px}
  .box-info-btn{top:12px;left:12px;padding:7px 13px 7px 8px;font-size:11.5px}
}

/* ===== BOOT ORDER =====
   While <html> carries .booting, every full-screen layer is hidden and the
   loading screen is the only thing on screen. The menu markup ships in the
   HTML and used to be visible from the first paint, so the browser showed a
   half-built menu (icons at natural size, layout unwired) until the bootstrap
   ran, and the loading screen then sat on top of it like decoration. Game.js
   removes .booting once the menu is genuinely ready. Kept in sync with the
   inline critical copy in index.html. */
.booting .menu,
.booting #game-root,
.booting #menu-transition-overlay,
.booting #menu-fullscreen-prompt,
.booting #box-overlay,
.booting #tank-switch-panel,
.booting #bigmap-overlay,
.booting #map-vote-overlay,
.booting #preview-loading,
.booting #loading-overlay{display:none !important}
.booting #loading-screen{display:flex !important;opacity:1 !important}

/* ===== SEARCHING state on the PLAY button =====
   While the queue is searching, PLAY becomes a live timer. It pulses so it
   reads as "working" rather than "frozen", and stops pulsing the moment the
   button can be cancelled back to PLAY. */
#btn-play.searching{
  background:linear-gradient(135deg,#2f7fd4,#1d5fa8);
  border-color:rgba(140,200,255,.6);
  box-shadow:0 0 24px rgba(60,150,255,.45);
  animation:searchPulse 1.1s ease-in-out infinite;
  font-variant-numeric:tabular-nums;
  letter-spacing:1px;
}
#btn-play.searching:hover{background:linear-gradient(135deg,#3d8fe0,#2470bd)}
@keyframes searchPulse{
  0%,100%{filter:brightness(1);   box-shadow:0 0 18px rgba(60,150,255,.35)}
  50%    {filter:brightness(1.18);box-shadow:0 0 30px rgba(90,175,255,.65)}
}
@media (prefers-reduced-motion: reduce){
  #btn-play.searching{animation:none}
}

/* ===== LOCKED GAME MODES =====
   Only Capture the Circle has a card, so the other selector squares have
   nothing to select. They are dimmed rather than removed so the shape of the
   menu does not change when modes come back online. */
.gamemode-square.disabled{
  opacity:.28;
  filter:grayscale(1);
  cursor:not-allowed;
  pointer-events:none;
}
.gamemode-square.disabled:hover{
  transform:none;
  box-shadow:none;
}

/* =============================================================================
   BATTLE HUD — BOTTOM PANEL
   Laid out from the sketch: a vertical centre line runs down the screen; the HP
   bar is centred on it at the bottom; a row of three score readouts sits
   directly above the bar, centred with it; the super slot sits to the LEFT of
   the bar, vertically centred on it.

   Ratios are taken from the sketch and expressed against the HP bar's height, so
   the whole cluster keeps its proportions at any window size instead of stepping
   through the fixed-pixel breakpoints further up this file:

       super square   1.86 x  bar height      (78 vs 42 in the sketch)
       score cell     0.48 x  bar height      (20 vs 42)
       strip gap      0.17 x  bar height      ( 7 vs 42)
       super gap      0.60 x  super size     (47 vs 78)
       strip width    0.917 x  bar width      (297 vs 324)

   THIS BLOCK IS LAST ON PURPOSE. There are four older media queries above that
   set #hp-wrap and #super-wrap in fixed pixels for narrow and short screens.
   Those still exist and still apply to anything not named here, but for this
   panel they are superseded: a single clamp()-driven set of sizes behaves better
   than four breakpoints because there is no width at which the strip, the bar and
   the super slot disagree about how big they are.
   ========================================================================== */

:root{
  --hud-bar-w:  min(38%, 560px);
  --hud-bar-h:  clamp(20px, 5.2vh, 40px);
  --hud-bottom: 14px;
  --hud-strip-h: calc(var(--hud-bar-h) * 0.48);
  --hud-gap:     calc(var(--hud-bar-h) * 0.17);
  --hud-super:   calc(var(--hud-bar-h) * 1.86);
  --hud-super-gap: calc(var(--hud-super) * 0.60);
  --hud-strip-w: calc(var(--hud-bar-w) * 0.917);
  --hud-cell-gap: calc(var(--hud-bar-w) * 0.025);
}

/* ---- HP bar: the anchor. Centred on the screen's vertical centre line. ---- */
#hp-wrap{
  width: var(--hud-bar-w);
  height: var(--hud-bar-h);
  left: 50%;
  bottom: var(--hud-bottom);
  transform: translateX(-50%);
  border-radius: calc(var(--hud-bar-h) / 2);
  border-width: 2px;
}

/* The readout sits INSIDE the bar now. It used to be pinned at a fixed
   bottom:32px, which was tuned for the old 24px bar and overlapped it as soon as
   the bar grew. Centring it in the bar means it cannot collide at any size. */
#hp-text{
  left: 50%;
  bottom: auto;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(9px, calc(var(--hud-bar-h) * 0.40), 15px);
  line-height: 1;
  letter-spacing: .3px;
}

/* ---- Score strip: three cells, directly above the bar, centred with it ---- */
#score-strip{
  position: absolute;
  left: 50%;
  bottom: calc(var(--hud-bottom) + var(--hud-bar-h) + var(--hud-gap));
  transform: translateX(-50%);
  width: var(--hud-strip-w);
  height: var(--hud-strip-h);
  display: flex;
  gap: var(--hud-cell-gap);
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}
#score-strip.on{ opacity: 1; }

.score-cell{
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--hud-strip-h) * 0.22);
  background: rgba(10,12,16,.72);
  border: 2px solid var(--line);
  border-radius: calc(var(--hud-strip-h) * 0.28);
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
  overflow: hidden;
  white-space: nowrap;
}
.score-cap{
  font-size: clamp(7px, calc(var(--hud-strip-h) * 0.34), 11px);
  font-weight: 700;
  letter-spacing: .6px;
  color: #93a0b4;
}
.score-val{
  font-size: clamp(10px, calc(var(--hud-strip-h) * 0.52), 17px);
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;   /* stops the number jittering as it counts */
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
/* Cash is the one cell that earns, so it is the one tinted. */
#score-strip .score-cell:nth-child(3) .score-val{ color: #ffc861; }
/* A cell that ticks up gets one brief flash, so a kill is noticed peripherally
   without having to read the number. Removed and re-added to restart the
   animation, because toggling a class alone does not re-trigger it. */
.score-cell.bump{ animation: score-bump .45s ease-out; }
@keyframes score-bump{
  0%  { transform: scale(1);    filter: brightness(1); }
  30% { transform: scale(1.12); filter: brightness(1.7); }
  100%{ transform: scale(1);    filter: brightness(1); }
}

/* ---- Super slot: left of the bar, vertically centred on it ---- */
#super-wrap{
  width: var(--hud-super);
  height: var(--hud-super);
  left: calc(50% - (var(--hud-bar-w) / 2) - var(--hud-super-gap) - var(--hud-super));
  /* Centred on the bar, but never allowed to hang off the bottom edge: with the
     bar at its tallest the super square is nearly twice its height, so a pure
     centring offset goes negative and clips. */
  bottom: max(6px, calc(var(--hud-bottom) + ((var(--hud-bar-h) - var(--hud-super)) / 2)));
}
#super-btn::before{ inset: 6%; }
.super-icon{ font-size: calc(var(--hud-super) * 0.34); }
.super-label{ font-size: calc(var(--hud-super) * 0.15); }
#super-hint{ bottom: calc(100% + 6px); }

/* Very short windows: the bar shrinks and the cluster tightens rather than
   disappearing. The old rules hid #super-wrap outright below 400px tall, which
   took the ability button away mid-battle. */
@media (max-height:400px){
  :root{ --hud-bar-h: clamp(14px, 4.4vh, 26px); --hud-bottom: 8px; }
  #super-wrap{ display: block; }
}

/* ============================================================
   TANK MENU — STYLES TAB
   Mirrors the spray-card look: preview tile, name, one action.
   ============================================================ */
.tm-styles-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}
.tm-style-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  margin-bottom: 10px;
  line-height: 1.5;
}
.tm-styles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
.tm-style-card {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.tm-style-card:hover {
  border-color: rgba(255,177,43,0.35);
  transform: translateY(-2px);
}
.tm-style-card.equipped {
  border-color: #ffb12b;
  box-shadow: 0 0 14px rgba(255,177,43,0.18);
}
.tm-style-preview {
  width: 100%;
  height: 64px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.2s;
}
.tm-style-card:hover .tm-style-preview {
  transform: scale(1.03);
}
.tm-style-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.tm-style-name {
  font-size: 12px;
  font-weight: 700;
  color: #e0e8f0;
  letter-spacing: 0.3px;
}
.tm-style-desc {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  line-height: 1.4;
}
.tm-style-btn {
  padding: 7px 12px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  width: auto;
  white-space: nowrap;
  text-transform: uppercase;
  transition: all 0.15s;
  align-self: flex-start;
}
.tm-style-equip { background: linear-gradient(135deg,#3b82f6,#2563eb); color:#fff; }
.tm-style-equip:hover { transform: scale(1.03); }
.tm-style-unequip {
  background: transparent;
  color: #93a3b4;
  border: 1px solid rgba(255,255,255,0.16);
}
.tm-style-unequip:hover { color:#ef4444; border-color: rgba(239,68,68,0.5); }
.tm-style-note {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}