:root {
  --bg: #071b2d; --panel: #102d42; --panel2: #173d54;
  --text: #f3ead7; --muted: #a9bfd0; --accent: #41c7b5; --accent2: #ed9b4b;
  --gold: #f4c95d; --danger: #e7655b; --ok: #66c27a;
  --line: #315c70; --shadow: #020b13; --radius: 16px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Heebo, Arial, sans-serif;
  background:
    radial-gradient(circle at 12% 8%, rgba(65,199,181,.10), transparent 28rem),
    radial-gradient(circle at 88% 30%, rgba(237,155,75,.08), transparent 30rem),
    linear-gradient(155deg, #071b2d, #0b2438 58%, #071725);
  color: var(--text); min-height: 100vh; display: flex; flex-direction: column;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.hidden { display: none !important; }
a { color: var(--accent); text-decoration: none; }

#topbar {
  display: flex; align-items: center; gap: 14px; padding: 10px 16px;
  background: rgba(9,31,47,.90); backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(65,199,181,.24);
  box-shadow: 0 8px 28px rgba(2,11,19,.24);
  flex-wrap: wrap;
}
.brand { font-weight: 900; font-size: 18px; cursor: pointer; white-space: nowrap; letter-spacing: -.25px; color: #fff6e7; }
.brand .ver { color: var(--accent); }
.brand .by { color: var(--muted); font-weight: 400; font-size: 12px; }
#topbar nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
#topbar nav a {
  color: var(--muted); padding: 6px 12px; border-radius: 10px; font-size: 14px;
}
#topbar nav a.active, #topbar nav a:hover { background: linear-gradient(145deg, #1a465d, #12364b); color: #fff8e8; box-shadow: inset 0 0 0 1px rgba(65,199,181,.22); }
.badge { background: var(--danger); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; }
.user-chip { display: flex; align-items: center; gap: 8px; }
.user-chip img { width: 30px; height: 30px; border-radius: 50%; }
.coins { color: var(--gold); font-weight: 700; }
.rank { font-size: 12px; color: var(--accent2); }
#mute-btn, #logout-btn { background: var(--panel2); border: none; color: var(--text); border-radius: 8px; padding: 5px 9px; cursor: pointer; font-size: 15px; }
#mute-btn, #logout-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 30px; }
#logout-btn svg, #exit-match-btn svg { display: block; }

main { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 18px 14px; }
footer { text-align: center; color: var(--muted); font-size: 13px; padding: 16px; border-top: 1px solid #33415544; }

h1 { font-size: 26px; margin-bottom: 6px; }
h2 { font-size: 19px; margin: 18px 0 10px; }
.sub { color: var(--muted); margin-bottom: 18px; }

.card { background: linear-gradient(145deg, rgba(18,51,72,.96), rgba(11,36,54,.96)); border-radius: var(--radius); padding: 18px; margin-bottom: 14px; border: 1px solid rgba(78,132,153,.36); box-shadow: 0 10px 26px rgba(2,11,19,.22), inset 0 1px rgba(255,255,255,.035); }
.grid { display: grid; gap: 12px; }
.grid.cols2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.cols3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

button.btn, a.btn {
  background: linear-gradient(145deg, #55d5c3, #2da99e);
  color: #062027; font-weight: 850; border: 1px solid #73e0d0; border-radius: 12px;
  padding: 12px 20px; font-size: 15px; cursor: pointer; display: inline-block;
  box-shadow: 0 5px 0 #176b67, 0 9px 18px rgba(2,11,19,.24), inset 0 1px rgba(255,255,255,.28);
  transition: transform .08s, box-shadow .08s, filter .15s;
}
button.btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
button.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #176b67, 0 5px 10px rgba(2,11,19,.22); }
button.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
button.btn.secondary { background: linear-gradient(145deg, #234e63, #17394d); color: var(--text); border-color: #39677a; box-shadow: 0 5px 0 #0a2535, 0 9px 18px rgba(2,11,19,.2); }
button.btn.danger { background: linear-gradient(145deg, #ef7b70, #c94f49); color: #240b0a; border-color: #f49c92; box-shadow: 0 5px 0 #7f302d, 0 9px 18px rgba(2,11,19,.2); }
button.btn.small { padding: 6px 12px; font-size: 13px; border-radius: 9px; }

input, select {
  background: var(--panel2); border: 1px solid #475569; color: var(--text);
  border-radius: 10px; padding: 10px 12px; font-size: 15px; width: 100%;
}
input:focus { outline: 2px solid var(--accent); }
label { font-size: 13px; color: var(--muted); display: block; margin: 10px 0 4px; }

/* login */
#login-wrap { max-width: 420px; margin: 8vh auto; text-align: center; }
#login-wrap .logo { font-size: 54px; }
.gsi-wrap { display: flex; justify-content: center; margin: 22px 0; }

/* lobby */
.stat-row { display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.stat-row b { color: var(--text); font-size: 18px; display: block; }
.code-box { font-size: 30px; letter-spacing: 6px; font-weight: 800; color: var(--gold); text-align: center; padding: 12px; background: var(--panel2); border-radius: 12px; direction: ltr; }

/* game */
#game-stage { position: relative; width: 100%; animation: stage-in .28s ease-out; }
#game-canvas { width: 100%; border-radius: var(--radius); display: block; touch-action: pan-y; background: #071b2d; border: 1px solid rgba(99,170,187,.48); box-shadow: 0 16px 36px rgba(2,11,19,.38), inset 0 0 0 1px rgba(255,255,255,.03); }
#game-hud { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.player-tag { display: flex; align-items: center; gap: 8px; background: linear-gradient(145deg, #14364c, #0d293d); padding: 7px 12px; border: 1px solid rgba(78,132,153,.38); border-radius: 12px; font-size: 14px; box-shadow: 0 6px 16px rgba(2,11,19,.18); transition: outline-color .2s ease, transform .2s ease; }
.player-tag img { width: 26px; height: 26px; border-radius: 50%; }
.player-tag.me { outline: 2px solid var(--accent); }
#match-info { display:flex; align-items:center; gap:6px; }
#wind-ind, #match-timer { background: var(--panel); border-radius: 12px; padding: 6px 12px; font-size: 14px; }
/* Wind re-rolls after every shot; a quick pulse marks the fresh value. */
#wind-ind.wind-flash { animation: windFlash 1.1s ease-out; }
@keyframes windFlash {
  0%   { background-color: var(--gold); color: #1a1207; transform: scale(1.12); }
  100% { background-color: var(--panel); transform: scale(1); }
}
#match-timer { direction:ltr; font-weight:800; color:var(--accent); }
#match-timer.urgent { color:var(--danger); animation:pulse .8s infinite alternate; }
/* In-match exit: same power SVG as the header logout button, one icon on
   every device. Tap reveals the confirmation strip before leaving. */
#exit-match-btn { background: var(--panel2); border: none; color: var(--text); border-radius: 8px; padding: 5px 9px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 30px; }
#exit-confirm { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; background: var(--panel); border: 1px solid rgba(231,101,91,.45); border-radius: 12px; padding: 8px 12px; margin-bottom: 8px; font-size: 14px; }
#exit-confirm .exit-note { flex-basis: 100%; text-align: center; font-size: 12px; color: var(--muted); }
@media (max-width: 600px) {
  #match-info { order:-1; width:100%; justify-content:center; }
  #game-hud .player-tag { flex:1 1 0; min-width:0; padding:6px 8px; }
  #game-hud .player-tag .tag-mid { min-width:0; }
  body.game-active #game-hud { flex-wrap: wrap; }
}
#weapon-bar { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.wpn { background: linear-gradient(145deg, #1d4a60, #12364a); border: 2px solid #2f6175; color: var(--text); border-radius: 12px; padding: 8px 12px; cursor: pointer; font-size: 13px; box-shadow: 0 4px 0 #092535; transition: transform .16s ease, border-color .2s ease, opacity .2s ease; }
.wpn:not(:disabled):hover { transform: translateY(-2px); }
.wpn:not(:disabled):active { transform: translateY(0) scale(.97); }
.wpn.sel { border-color: var(--accent); background: linear-gradient(145deg, #205e68, #174558); box-shadow: 0 4px 0 #0c3039, 0 0 18px rgba(65,199,181,.18); }
.wpn:disabled { opacity: .4; cursor: not-allowed; }
#reload-wrap { height: 8px; background: var(--panel2); border-radius: 99px; margin-top: 10px; overflow: hidden; }
#reload-bar { height: 100%; width: 100%; background: linear-gradient(90deg, var(--ok), var(--accent)); transition: width .12s ease-out; }
#aim-info { color: var(--muted); font-size: 13px; margin-top: 6px; direction: ltr; text-align: right; }
#game-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px;
  align-items: center; justify-content: center; background: rgba(15,23,42,.82);
  border-radius: var(--radius); text-align: center; padding: 20px;
}
#game-overlay h2 { font-size: 30px; margin: 0; }

/* store */
.item { display: flex; flex-direction: column; gap: 8px; }
.item .price { color: var(--gold); font-weight: 700; }
.item .owned-tag { color: var(--ok); font-size: 13px; }
.swatch { width: 100%; height: 44px; border-radius: 10px; }
.level-pips { display: flex; gap: 4px; }
.level-pips span { width: 18px; height: 8px; border-radius: 4px; background: var(--panel2); }
.level-pips span.on { background: var(--ok); }

/* tables */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 9px 10px; text-align: right; border-bottom: 1px solid #33415544; }
th { color: var(--muted); font-weight: 600; }
tr:hover td { background: #ffffff08; }


#toast {
  position: fixed; bottom: 22px; right: 50%; transform: translateX(50%);
  background: var(--panel); border: 1px solid var(--accent); color: var(--text);
  padding: 12px 22px; border-radius: 12px; z-index: 99; box-shadow: 0 8px 30px #0008;
  max-width: 90vw;
}
.msg { padding: 12px; border-radius: 10px; background: var(--panel2); margin-bottom: 8px; }
.msg.unread { border-right: 3px solid var(--accent); }
.msg .t { color: var(--muted); font-size: 12px; }
@media (max-width: 640px) {
  #topbar { gap: 8px; } .brand { display: none; }
  h1 { font-size: 22px; }
}

/* game HP bars + end screen */
.player-tag .tag-mid { display: flex; flex-direction: column; gap: 3px; min-width: 96px; }
.player-tag .tag-line { display: flex; align-items: center; gap: 6px; }
.player-tag .hp-wrap { height: 7px; background: #0b1220; border-radius: 99px; overflow: hidden; }
.player-tag .hp-fill { height: 100%; border-radius: 99px; transition: width .35s ease, background .35s ease; }
.player-tag .hp-num { font-size: 11px; font-weight: 700; line-height: 1; }
#game-overlay .end-emoji { font-size: 54px; }
#game-overlay .end-sub { color: var(--muted); margin: 0; }
#game-overlay.lost { background: rgba(60,15,20,.85); }
#game-overlay { background: rgba(15,23,42,.78); }
.audit-details { max-width: 320px; overflow-wrap: anywhere; font-size: 12px; color: var(--muted); }
footer { line-height: 1.8; }

/* explicit quick-match consent */
.match-offer {
  position: fixed; inset: 0; z-index: 120; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(2,6,23,.82);
  backdrop-filter: blur(5px);
}
.match-offer-card { width: min(420px, 100%); text-align: center; margin: 0; }
.match-offer-card h2 { margin-top: 6px; }
.match-offer-icon { font-size: 52px; }
.match-offer-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.ai-start { display: grid; grid-template-columns: 110px 1fr; gap: 8px; }
.ai-start .btn { width: 100%; grid-column: 1 / -1; }
.card.item.equipped { outline: 2px solid var(--accent); }

/* silent network recovery */
#reconnect-indicator {
  position: fixed; top: 68px; left: 50%; transform: translateX(-50%); z-index: 110;
  background: rgba(30,41,59,.96); color: var(--muted); border: 1px solid #475569;
  border-radius: 999px; padding: 6px 13px; font-size: 12px; box-shadow: 0 4px 18px #0006;
}
#reconnect-indicator::before { content: ""; display: inline-block; width: 7px; height: 7px;
  margin-left: 7px; border-radius: 50%; background: var(--gold); animation: reconnect-pulse 1s infinite alternate; }
@keyframes reconnect-pulse { to { opacity: .3; } }
@media (max-width:640px) { #reconnect-indicator { top: 104px; } }

/* maintenance notice: dismisses into a small side chip */
#maintenance-banner { position:fixed; z-index:120; }
#maintenance-banner.maintenance-expanded {
  top:0; left:0; right:0; background:rgba(120,53,15,.97); color:#fde68a;
  border-bottom:1px solid #f59e0b; text-align:center; font-weight:700;
  padding:7px 48px; box-shadow:0 2px 12px rgba(0,0,0,.28);
}
.maintenance-close {
  position:absolute; inset-inline-end:12px; top:1px; border:0; background:transparent;
  color:inherit; font-size:27px; line-height:30px; cursor:pointer;
}
#maintenance-banner.maintenance-collapsed { inset-inline-end:8px; top:72px; }
.maintenance-chip {
  border:1px solid rgba(245,158,11,.65); border-radius:999px; padding:6px 10px;
  background:rgba(30,23,11,.90); color:#fbbf24; font-size:12px; font-weight:700;
  box-shadow:0 2px 8px rgba(0,0,0,.2); cursor:pointer; opacity:.82;
}
.maintenance-chip:hover, .maintenance-chip:focus { opacity:1; }

/* customization tab (live preview + owned skin picker) */
.custom-wrap { display: grid; grid-template-columns: 320px 1fr; gap: 14px; align-items: start; }
.custom-preview canvas { width: 100%; height: auto; border-radius: 10px; background: rgba(15,23,42,.65); }
.cust-name { text-align: center; font-weight: 700; margin-top: 8px; }
.custom-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.custom-item { cursor: pointer; transition: border-color .15s; }
.custom-item:hover { border-color: var(--gold); }
@media (max-width:640px) { .custom-wrap { grid-template-columns: 1fr; } }

/* IDF rank insignia (server-provided assets/ranks/*.svg) */
.rank-badge { width: 26px; height: 26px; border-radius: 6px; flex: 0 0 auto; }
.rank-badge-big { width: 34px; height: 34px; border-radius: 8px; vertical-align: middle; margin-inline-end: 6px; }
.rank-up { color: var(--gold, #fbbf24); font-weight: 700; }

/* practice (easy-bot) match marking */
#practice-ind { text-align:center; color:var(--gold); font-weight:700; margin:4px 0 0; }
#practice-ind.hidden { display:none; }
.practice-note { color:var(--gold); font-weight:600; }

/* visible IDF rank progress in the lobby */
.rank-progress-card { margin:0 0 14px; padding:12px; border:1px solid #334155; border-radius:12px; background:#0f172a88; }
.rank-progress-head { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:13px; }
.rank-progress-track { height:9px; margin:10px 0 7px; overflow:hidden; border-radius:999px; background:#334155; }
.rank-progress-track > div { height:100%; background:linear-gradient(90deg,#f59e0b,#fbbf24); transition:width .25s; }
.rank-progress-card p { margin:0; color:var(--muted); font-size:13px; }

@keyframes stage-in { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  #game-stage { animation: none; }
  .wpn, .player-tag, #reload-bar { transition: none; }
}

/* Unified illustrated interface details */
input, select { box-shadow: inset 0 2px 5px rgba(2,11,19,.22); border-color: var(--line); }
.tabs button { border: 1px solid rgba(78,132,153,.35); background: linear-gradient(145deg, #1b465b, #123447); color: var(--muted); box-shadow: 0 3px 0 #082334; }
.tabs button.active { background: linear-gradient(145deg, #55d5c3, #2da99e); color: #062027; border-color: #73e0d0; }
.swatch { border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 0 14px rgba(2,11,19,.2); }
#wind-ind, #match-timer, .code-box { border: 1px solid rgba(78,132,153,.35); box-shadow: inset 0 1px rgba(255,255,255,.035); }
#game-overlay { background: rgba(5,22,35,.84); backdrop-filter: blur(5px); }
footer { border-top-color: rgba(65,199,181,.15); }
@media (max-width:640px) {
  main { padding: 12px 8px; }
  .card { padding: 14px; }
  button.btn, a.btn { padding: 11px 16px; }
}

/* PWA installation */
#install-btn { white-space: nowrap; }
.install-card {
  position: fixed; z-index: 115; left: 18px; bottom: 18px; direction: rtl;
  width: min(390px, calc(100vw - 36px)); display: flex; align-items: center;
  gap: 12px; padding: 12px; border: 1px solid #22d3ee88; border-radius: 16px;
  background: linear-gradient(135deg, #172554f5, #0f172af5);
  box-shadow: 0 14px 40px #020617cc; backdrop-filter: blur(10px);
}
.install-card.hidden { display: none; }
.install-card img { width: 54px; height: 54px; border-radius: 13px; }
.install-card div { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.install-card strong { color: var(--text); }
.install-card span { color: var(--muted); font-size: 13px; }
.install-card .icon-btn { color: var(--muted); background: transparent; border: 0; font-size: 17px; cursor: pointer; }
@media (display-mode: fullscreen), (display-mode: standalone) {
  #install-btn, .install-card { display: none !important; }
  body { min-height: 100dvh; }
}
@media (max-width: 640px) {
  .install-card { left: 10px; bottom: 10px; width: calc(100vw - 20px); }
  #install-btn { font-size: 12px; padding: 5px 7px; }
}


/* Match/PWA viewport discipline. The account logout never competes with the
   confirmed HUD exit. On short phone screens (installed landscape PWAs in
   particular), keep the whole battlefield visible instead of scaling it to
   the device width and making it taller than the viewport. */
body.game-active #logout-btn { display: none !important; }
/* Compact controls are selected by available space, not a phone model. */
@media (max-width: 600px), (orientation: landscape) and (max-height: 760px) {
  body.game-active #topbar { padding: 4px 8px; flex-wrap: nowrap; }
  body.game-active #topbar nav,
  body.game-active #coin-chip,
  body.game-active #rank-chip,
  body.game-active #user-pic,
  body.game-active #install-btn,
  body.game-active .brand .by,
  body.game-active footer,
  body.game-active .kbd-help,
  body.game-active #weapon-bar + .sub { display: none !important; }
  body.game-active main { padding: 4px 6px; }
  body.game-active #game-hud { margin-bottom: 4px; flex-wrap: nowrap; }
  body.game-active #weapon-bar { margin-top: 5px; gap: 5px; justify-content: center; }
  body.game-active .wpn { padding: 5px 8px; font-size: 12px; }
  body.game-active #reload-wrap { margin-top: 5px; }
  body.game-active #aim-info { margin-top: 3px; }
}
/* In a short landscape viewport, height is the scarce dimension. Derive the
   16:9 stage width from the live viewport height; min() still caps it to the
   available width on narrow devices and split-screen windows. */
@media (orientation: landscape) and (max-height: 760px) {
  body.game-active #game-stage {
    width: min(100%, calc((100dvh - clamp(158px, 27dvh, 194px)) * 1.785714));
    margin-inline: auto;
  }
}

#aim-info{display:flex;align-items:center;justify-content:center;gap:8px;margin:8px auto;max-width:560px}.aim-gauge{width:120px;height:10px;background:#0b2235;border-radius:999px;overflow:hidden;border:1px solid #31536a}.aim-gauge i{display:block;height:100%;background:linear-gradient(90deg,#38bdf8,#f4c95d);transition:width .08s}#ability-bar{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:7px}.btn.active{box-shadow:0 0 0 2px #f4c95d;background:#5b421d}#shot-clock{text-align:center;font-weight:800;color:#f4c95d}.urgent{color:#fb7185!important}

/* A game route must never inherit horizontal scroll from RTL cards or PWA history. */
html:has(body.game-active),body.game-active{overflow-x:hidden;max-width:100vw;scroll-behavior:auto}body.game-active main,body.game-active #view,body.game-active #game-stage{max-width:100%;min-width:0;margin-inline:auto}body.game-active #game-canvas{max-width:100%;height:auto}
.shop-tier{display:inline-flex;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:800;margin:6px 0}.tier-common{background:#334155}.tier-rare{background:#075985;color:#bae6fd}.tier-epic{background:#581c87;color:#e9d5ff}.tier-legendary{background:#78350f;color:#fde68a}.item.disabled{opacity:.5;filter:grayscale(.6)}

.swatch{position:relative;overflow:hidden}.coming-ribbon{position:absolute;top:12px;right:-36px;width:140px;transform:rotate(38deg);background:#f59e0b;color:#111827;font-weight:900;text-align:center;padding:5px;box-shadow:0 2px 8px #0008;z-index:2}.item.disabled .coming-ribbon{filter:none;opacity:1}
#lang-btn{min-width:44px;font-weight:800}
html[dir="ltr"] body{text-align:left}html[dir="ltr"] .coming-ribbon{right:auto;left:-36px;transform:rotate(-38deg)}

/* Premium skins show real geometry in store cards, not color-only swatches. */
.skin-card-art { position:relative; }
.skin-card-preview { width:100%; height:150px; display:block; border-radius:10px; background:radial-gradient(circle at 50% 35%,rgba(56,189,248,.14),rgba(2,11,19,.8)); }
@media (max-width:640px) { .skin-card-preview { height:135px; } }
/* Timed coating queue and lightweight worker animation. */
.coating-grid{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr));gap:10px;margin-top:14px}.build-job{position:relative;padding:12px 120px 12px 12px;margin:8px 0;border:1px solid #285a70;border-radius:10px;background:#0a2535}.worker-scene{position:absolute;right:12px;top:5px;display:flex;gap:8px;font-size:25px}.worker-scene span:nth-child(2){animation:hammer .65s ease-in-out infinite alternate;transform-origin:bottom left}.worker-scene span:first-child{animation:workerBob .8s ease-in-out infinite alternate}.worker-scene span:last-child{animation:workerBob .8s .35s ease-in-out infinite alternate}@keyframes hammer{to{transform:rotate(-32deg) translateY(2px)}}@keyframes workerBob{to{transform:translateY(-3px)}}.coating-wood{border-color:#a16207}.coating-tin{border-color:#94a3b8}.coating-iron{border-color:#475569}@media(max-width:640px){.coating-grid{grid-template-columns:1fr}.build-job{padding-right:95px}}
/* Store navigation and a discoverable tower workshop. */
.store-workshop-callout{display:flex;align-items:center;justify-content:space-between;gap:14px;border-color:#2dd4bf;margin-bottom:12px}.store-workshop-callout div{display:grid;gap:4px}.store-workshop-callout span{color:var(--muted);font-size:13px}.store-category-bar{position:sticky;top:52px;z-index:12;display:flex;gap:7px;overflow-x:auto;padding:8px;margin:0 -4px 12px;background:rgba(7,27,42,.94);backdrop-filter:blur(10px);border:1px solid #234b60;border-radius:12px}.store-category-bar button,.workshop-jump a{white-space:nowrap;border:1px solid #315d72;background:#12364a;color:var(--text);padding:9px 14px;border-radius:999px;font-weight:800;cursor:pointer;text-decoration:none}.store-category-bar button.active{background:var(--accent);color:#05222c;border-color:#99f6e4}.store-section.hidden{display:none!important}.store-coupon{margin-bottom:12px}.workshop-intro{margin-top:-8px}.workshop-jump{display:flex;gap:7px;overflow-x:auto;margin-bottom:12px;padding-bottom:3px}.workshop-jump a{border-color:#2dd4bf}.player-coatings,.player-expansion{scroll-margin-top:112px;margin-bottom:14px}#appearance-workshop{scroll-margin-top:112px}
@media(max-width:640px){.store-workshop-callout{align-items:stretch;flex-direction:column}.store-workshop-callout .btn{text-align:center}.store-category-bar{top:50px}.store-coupon{display:none}}

/* v17 audit: predictable navigation, tap targets and wide-data containment. */
.route-loading{min-height:38vh;display:grid;place-items:center;color:var(--muted);font-weight:750}
.card:has(> table){max-width:100%;overflow-x:auto}
table{min-width:max-content}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #f4c95d;outline-offset:2px}
@media(max-width:640px){
  #topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:8px;gap:7px 8px}
  #topbar .brand{min-width:0;overflow:hidden;text-overflow:ellipsis}
  #topbar nav{grid-column:1/-1;grid-row:2;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  #topbar nav::-webkit-scrollbar{display:none}
  #topbar nav a{min-height:44px;display:inline-flex;align-items:center;padding:8px 13px}
  input,select,textarea{font-size:16px}
  .user-chip{justify-content:flex-end;min-width:0;gap:5px}
  .user-chip .rank{display:none}
  #install-btn,#lang-btn,#mute-btn,#logout-btn{min-height:44px;min-width:44px}
  .store-category-bar button,.workshop-jump a,.tabs button{min-height:44px}
  button.btn,a.btn{min-height:44px}
  footer a{display:inline-flex;min-height:44px;align-items:center}
  #maintenance-banner.maintenance-collapsed{inset-inline-end:8px;top:112px}
  body{overflow-x:hidden}
}
.bot-tier-controls { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: rgba(255,255,255,.025); }
.bot-tier-controls h3 { margin-top: 0; }
.bot-tier-controls label { display: block; margin-top: 8px; }

.spinner{width:26px;height:26px;border:3px solid rgba(255,255,255,.25);border-top-color:var(--accent);border-radius:50%;margin:0 auto;animation:bg-spin .8s linear infinite}
@keyframes bg-spin{to{transform:rotate(360deg)}}

/* Shabbat/holiday full-site lock screen */
.lockdown-wrap {
  min-height: 78vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 24px;
}
.lockdown-candle {
  font-size: 72px; margin-bottom: 18px;
  filter: drop-shadow(0 0 22px rgba(255, 196, 87, .55));
  animation: lockdownGlow 2.6s ease-in-out infinite;
}
@keyframes lockdownGlow {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(255, 196, 87, .4)); }
  50% { filter: drop-shadow(0 0 30px rgba(255, 214, 120, .75)); }
}
.lockdown-title { font-size: 44px; font-weight: 900; color: var(--accent, #ffd657); margin: 0 0 14px; }
.lockdown-body { font-size: 20px; color: var(--text, #e2e8f0); max-width: 420px; line-height: 1.6; margin: 0; }

/* Final mobile HUD rule - must stay last so it beats the earlier
   body.game-active nowrap compact block. On phones the two player tags plus
   the exit button overflow a 390px row and clip the left tag; wrap the HUD
   and let the tags shrink. */
@media (max-width: 600px) {
  body.game-active #game-hud { flex-wrap: wrap; }
  body.game-active #game-hud .player-tag { flex: 1 1 0; min-width: 0; padding: 5px 7px; gap: 5px; }
  body.game-active #game-hud .player-tag .tag-mid { min-width: 0; }
}

/* Static landing intro for SEO - visible pre-login, hidden after login. */
#seo-intro { max-width: 640px; margin: 18px auto 0; padding: 0 18px; text-align: center; color: var(--muted); }
#seo-intro h1 { font-size: 20px; color: var(--text); margin: 0 0 10px; }
#seo-intro p { font-size: 13.5px; line-height: 1.7; margin: 0 0 10px; }
#seo-intro.hidden { display: none; }

/* UX onboarding (א-ח): tutorial, turn banner, bot countdown, lobby hints, how-to */
.ux-hint { margin: -6px 0 4px; font-size: 12px; opacity: .75; }
.ux-welcome { margin-bottom: 14px; border: 1px solid rgba(94,234,212,.5); background: rgba(94,234,212,.08); line-height: 1.6; }
.wa-share { text-decoration: none; display: inline-flex; align-items: center; }
#turn-banner { position: sticky; top: 8px; z-index: 30; text-align: center; margin: 6px auto 0; width: fit-content; max-width: 92%;
  background: linear-gradient(135deg, #0d9488, #14b8a6); color: #fff; padding: 8px 18px; border-radius: 999px;
  font-weight: 700; box-shadow: 0 4px 18px rgba(20,184,166,.45); }
#turn-banner.banner-pop { animation: bannerPop .35s ease-out; }
@keyframes bannerPop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#game-stage.turn-pulse { outline: 3px solid rgba(94,234,212,.55); outline-offset: -3px; border-radius: 12px;
  animation: stagePulse 1.2s ease-in-out infinite; }
@keyframes stagePulse { 0%,100% { outline-color: rgba(94,234,212,.55); } 50% { outline-color: rgba(94,234,212,.15); } }
#bot-hold-ov { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: rgba(2,8,20,.55); pointer-events: none; }
#bot-hold-ov.hidden, #tutorial-ov.hidden, #turn-banner.hidden { display: none; }
.bot-hold-box { text-align: center; background: rgba(10,20,35,.92); border: 1px solid rgba(94,234,212,.5);
  border-radius: 16px; padding: 22px 30px; font-size: 18px; }
.bot-hold-box b { font-size: 44px; color: #5eead4; }
#tutorial-ov { position: fixed; inset: 0; z-index: 45; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(2,8,20,.45); padding-bottom: 90px; }
.tutorial-box { background: rgba(10,20,35,.95); border: 2px solid #5eead4; border-radius: 16px; padding: 18px 22px;
  max-width: 420px; text-align: center; line-height: 1.7; box-shadow: 0 8px 40px rgba(0,0,0,.5); }
.tutorial-box .tutorial-arrow { font-size: 30px; animation: tutBounce 1s ease-in-out infinite; }
@keyframes tutBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.tutorial-box button { margin-top: 10px; }
#howto-ov { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(2,8,20,.7); padding: 16px; }
.howto-card { background: #0b1626; border: 1px solid rgba(94,234,212,.4); border-radius: 18px; padding: 22px;
  max-width: 520px; width: 100%; max-height: 88vh; overflow-y: auto; }
.howto-card h2 { margin-top: 0; }
.howto-panel { display: flex; gap: 12px; align-items: flex-start; margin: 12px 0; line-height: 1.6; }
.howto-ico { font-size: 24px; flex-shrink: 0; }
.howto-card .btn { width: 100%; margin-top: 8px; }

/* Guest mode + consent + login language switcher (client v29) */
body.guest-mode #topbar nav a[data-nav="store"],
body.guest-mode #topbar nav a[data-nav="custom"],
body.guest-mode #topbar nav a[data-nav="messages"],
body.guest-mode #topbar nav a[data-nav="tags"] { display: none; }

#guest-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  background: rgba(120, 72, 0, .92); color: #ffe9c4;
  padding: 8px 12px; font-size: 14px; text-align: center;
  border-bottom: 1px solid rgba(255, 200, 90, .5);
}
body.guest-mode #topbar { margin-top: 40px; }

.lang-switch {
  position: absolute; top: 12px; inset-inline-start: 12px; z-index: 5;
  background: var(--panel2, #1e293b); color: var(--muted, #94a3b8);
  border: 1px solid rgba(255,255,255,.15); border-radius: 8px;
  padding: 4px 10px; font-size: 13px; cursor: pointer;
}
#login-wrap { position: relative; }

.guest-prompt-overlay {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center;
}
.guest-prompt-card { max-width: 380px; text-align: center; }
.guest-prompt-card .btn { width: 100%; margin-top: 8px; }

#consent-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 960;
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  background: rgba(15, 23, 42, .97); color: #e2e8f0;
  border-top: 1px solid rgba(255,255,255,.18);
  padding: 12px 16px; font-size: 14px; line-height: 1.5;
}
#consent-banner .consent-text { max-width: 640px; }
#consent-banner a { color: var(--accent, #38bdf8); }
#consent-banner .consent-actions { display: flex; gap: 8px; }