/* Created by OrelAI - Brigagame 2.0 (https://github.com/ubriga/brigagame) */
:root {
  --bg: #2b1709; --panel: #44240e; --panel2: #582f13;
  --text: #f3ead7; --muted: #d0c3a9; --accent: #d38935; --accent2: #ed9b4b;
  --gold: #f4c95d; --danger: #e7655b; --ok: #66c27a;
  --line: #784929; --shadow: #110904; --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(211,137,53,.10), transparent 28rem),
    radial-gradient(circle at 88% 30%, rgba(237,155,75,.08), transparent 30rem),
    linear-gradient(155deg, #2b1709, #371d0c 58%, #241308);
  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(46,24,10,.90); backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(211,137,53,.24);
  box-shadow: 0 8px 28px rgba(17,9,4,.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, #623415, #4d2810); color: #fff8e8; box-shadow: inset 0 0 0 1px rgba(211,137,53,.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(74,39,16,.96), rgba(54,28,11,.96)); border-radius: var(--radius); padding: 18px; margin-bottom: 14px; border: 1px solid rgba(165,119,66,.36); box-shadow: 0 10px 26px rgba(17,9,4,.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, #e09a4a, #b47022);
  color: #251408; font-weight: 850; border: 1px solid #e0bc73; border-radius: 12px;
  padding: 12px 20px; font-size: 15px; cursor: pointer; display: inline-block;
  box-shadow: 0 5px 0 #6b3917, 0 9px 18px rgba(17,9,4,.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 #6b3917, 0 5px 10px rgba(17,9,4,.22); }
button.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
button.btn.secondary { background: linear-gradient(145deg, #6a3b1c, #522c12); color: var(--text); border-color: #835c30; box-shadow: 0 5px 0 #341b0b, 0 9px 18px rgba(17,9,4,.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(17,9,4,.2); }
button.btn.small { padding: 6px 12px; font-size: 13px; border-radius: 9px; }

input, select, textarea {
  background: var(--panel2); border: 1px solid #725a3e; 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: none; background: #2b1709; border: 1px solid rgba(198,147,88,.48); box-shadow: 0 16px 36px rgba(17,9,4,.38), inset 0 0 0 1px rgba(255,255,255,.03); }
#game-canvas.gl3d { background: transparent; }
#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, #4f2a11, #3d200d); padding: 7px 12px; border: 1px solid rgba(165,119,66,.38); border-radius: 12px; font-size: 14px; box-shadow: 0 6px 16px rgba(17,9,4,.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 { position: sticky; top: 8px; z-index: 20; 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, #663717, #4c2810); border: 2px solid #7d5527; color: var(--text); border-radius: 12px; padding: 8px 12px; cursor: pointer; font-size: 13px; box-shadow: 0 4px 0 #331b0b; 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, #6f3b19, #5c3013); box-shadow: 0 4px 0 #391e0c, 0 0 18px rgba(211,137,53,.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(45,25,12,.82);
  border-radius: var(--radius); text-align: center; padding: 20px;
  /* The 3D stack positions the game canvas at z-index 1; without this the
     overlay (z-index auto) paints under it and its buttons can't be tapped. */
  z-index: 2;
}
#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: #221309; 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(45,25,12,.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(21,11,4,.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(63,41,26,.96); color: var(--muted); border: 1px solid #725a3e;
  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: sticky top banner (not dismissible) + repeating popup */
#maintenance-banner.maintenance-expanded {
  position:sticky; top:0; z-index:121; background:#92400e; color:#fff3c4;
  border-bottom:2px solid #f59e0b; text-align:center; font-weight:800; font-size:16px; line-height:1.35;
  padding:9px 14px; box-shadow:0 2px 12px rgba(0,0,0,.35);
}
body.maint-on #topbar { top:var(--maint-h,0px); }
body.game-active #maintenance-banner, body.fs-mode #maintenance-banner { display:none; }
body.game-active.maint-on #topbar { top:0; }
#maint-popup { position:fixed; inset:0; z-index:130; display:flex; align-items:center; justify-content:center; background:rgba(18,10,4,.72); padding:16px; }
#maint-popup .maint-box { max-width:420px; width:100%; background:var(--panel,#3e210d); border:2px solid #f59e0b; border-radius:16px; padding:20px; text-align:center; box-shadow:0 10px 40px rgba(0,0,0,.5); }
#maint-popup .maint-ico { font-size:40px; }
#maint-popup h3 { margin:6px 0 8px; font-size:20px; }
#maint-popup .maint-sub { opacity:.8; font-size:13px; }
#maint-popup .maint-ok { margin-top:10px; min-width:140px; }

/* 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(45,25,12,.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 #5c3f2c; 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:#5c3f2c; }
.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, textarea { box-shadow: inset 0 2px 5px rgba(17,9,4,.22); border-color: var(--line); }
textarea { resize: vertical; box-sizing: border-box; }
.tabs button { border: 1px solid rgba(165,119,66,.35); background: linear-gradient(145deg, #613315, #492710); color: var(--muted); box-shadow: 0 3px 0 #311a0b; }
.tabs button.active { background: linear-gradient(145deg, #e09a4a, #b47022); color: #251408; border-color: #e0bc73; }
.swatch { border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 0 14px rgba(17,9,4,.2); }
#wind-ind, #match-timer, .code-box { border: 1px solid rgba(165,119,66,.35); box-shadow: inset 0 1px rgba(255,255,255,.035); }
#game-overlay { background: rgba(33,17,7,.84); backdrop-filter: blur(5px); }
footer { border-top-color: rgba(211,137,53,.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:#351c0b;border-radius:999px;overflow:hidden;border:1px solid #724629}.aim-gauge i{display:block;height:100%;background:linear-gradient(90deg,#f59e3b,#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:#5c3f2c}.tier-rare{background:#743d19;color:#fbe6bc}.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:#2a190e;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(245,158,59,.14),rgba(17,9,4,.8)); }
.skin-split { direction:ltr; display:flex; aspect-ratio:1/1; width:100%; border-radius:10px; overflow:hidden; background:radial-gradient(circle at 50% 35%,rgba(245,158,59,.14),rgba(17,9,4,.8)); }
.skin-split .skin-card-preview { width:50%; height:100%; border-radius:0; background:none; }
.skin-split .sp3d { border-inline-start:1px solid rgba(255,200,90,.28); }
.skin-split .sp-lbl { position:absolute; top:6px; font-size:11px; font-weight:700; padding:1px 6px; border-radius:6px; background:rgba(17,9,4,.7); color:#ffe9c4; letter-spacing:.5px; }
.skin-split .sp-lbl.l2 { left:6px; } .skin-split .sp-lbl.l3 { right:6px; }
@media (max-width:640px) { .skin-card-preview { height:135px; } .skin-split .skin-card-preview { height:100%; } }
/* 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 #784320;border-radius:10px;background:#341b0b}.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:#b8ac94}.coating-iron{border-color:#725a3e}@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:#e18720;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(40,21,9,.94);backdrop-filter:blur(10px);border:1px solid #673a1c;border-radius:12px}.store-category-bar button,.workshop-jump a{white-space:nowrap;border:1px solid #7a4929;background:#4c2810;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:#281509;border-color:#f6d799}.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:#e18720}.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{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:30vw;font-size:12px}
  .user-chip .rank .rk-r{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}
  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, #f0ebe2); 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(234,187,94,.5); background: rgba(234,187,94,.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, #85461c, #c26c0a); color: #fff; padding: 8px 18px; border-radius: 999px;
  font-weight: 700; box-shadow: 0 4px 18px rgba(194,108,10,.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(234,187,94,.55); outline-offset: -3px; border-radius: 12px;
  animation: stagePulse 1.2s ease-in-out infinite; }
@keyframes stagePulse { 0%,100% { outline-color: rgba(234,187,94,.55); } 50% { outline-color: rgba(234,187,94,.15); } }
#bot-hold-ov { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: rgba(18,10,4,.55); pointer-events: none; }
#bot-hold-ov.hidden, #tutorial-ov.hidden, #turn-banner.hidden { display: none; }
.bot-hold-box { text-align: center; background: rgba(37,20,8,.92); border: 1px solid rgba(234,187,94,.5);
  border-radius: 16px; padding: 22px 30px; font-size: 18px; }
.bot-hold-box b { font-size: 44px; color: #eabb5e; }
#tutorial-ov { position: fixed; inset: 0; z-index: 45; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(18,10,4,.45); padding-bottom: 90px; }
.tutorial-box { background: rgba(37,20,8,.95); border: 2px solid #eabb5e; 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, #nick-ov { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(18,10,4,.7); padding: 16px; }
.howto-card { background: #281509; border: 1px solid rgba(234,187,94,.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, #3f291a); color: var(--muted, #b8ac94);
  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(45,25,12, .97); color: #f0ebe2;
  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, #f59e3b); }
#consent-banner .consent-actions { display: flex; gap: 8px; }

/* === Clockwork brass lobby (pack-gated: body.clockwork, stage 3) === */
body.clockwork { --accent: #e0a94e; }
body.clockwork .brand, body.clockwork h1, body.clockwork h2 { color: #ecc069; }
body.clockwork .card {
  border-color: rgba(202,146,60, .5);
  box-shadow: 0 10px 26px rgba(17,9,4, .28), inset 0 1px rgba(255,255,255, .04), 0 0 0 1px rgba(120,84,32, .25);
  background-image:
    radial-gradient(circle 4px at 13px 13px, #d3ab55 30%, #7a5a22 55%, transparent 62%),
    radial-gradient(circle 4px at calc(100% - 13px) 13px, #d3ab55 30%, #7a5a22 55%, transparent 62%),
    radial-gradient(circle 4px at 13px calc(100% - 13px), #d3ab55 30%, #7a5a22 55%, transparent 62%),
    radial-gradient(circle 4px at calc(100% - 13px) calc(100% - 13px), #d3ab55 30%, #7a5a22 55%, transparent 62%),
    linear-gradient(145deg, rgba(60,36,20, .96), rgba(47,25,11, .96));
  background-repeat: no-repeat;
}
body.clockwork button.btn:not(.secondary):not(.danger),
body.clockwork a.btn:not(.secondary):not(.danger) {
  background: linear-gradient(145deg, #e6b455, #a8742c);
  color: #241503; border-color: #f0cd8a;
  box-shadow: 0 5px 0 #6d4a1a, 0 9px 18px rgba(17,9,4, .22), inset 0 1px rgba(255,255,255, .3);
}
body.clockwork button.btn:active:not(.secondary):not(.danger) { box-shadow: 0 2px 0 #6d4a1a, 0 5px 10px rgba(17,9,4, .22); }
body.clockwork input, body.clockwork select, body.clockwork textarea { border-color: #6d5326; }
#exit-match-btn.armed { outline: 2px solid var(--danger); }

/* Install title owns punctuation direction independently of card layout. */
#install-title { unicode-bidi: plaintext; }

#login-wrap .logo img { display: block; margin: 0 auto; width: 80px; height: 80px; }

/* Landscape full-screen mode (body.fs-mode). Created by OrelAI. */
#fs-btn { min-width: 36px; font-weight: 800; }
#fs-float { position: fixed; z-index: 60; bottom: 8px; left: 8px; padding: 6px 10px; font-size: 13px;
  border-radius: 999px; border: 1px solid #724629; background: rgba(38,20,8,.72); color: #f5e8cf;
  opacity: .6; cursor: pointer; }
#fs-float:hover, #fs-float:focus-visible { opacity: 1; }
#fs-float.hidden { display: none; }
html:has(body.fs-mode), body.fs-mode { overscroll-behavior: none; }
body.fs-mode footer, body.fs-mode #seo-intro, body.fs-mode .install-card, body.fs-mode #install-btn { display: none !important; }
body.fs-mode #topbar { padding: 4px 10px; flex-wrap: nowrap; gap: 8px; min-height: 0; }
body.fs-mode #topbar nav { display: flex; overflow-x: auto; flex: 1 1 auto; min-width: 0; scrollbar-width: none; }
body.fs-mode #topbar nav::-webkit-scrollbar { display: none; }
body.fs-mode .brand .by, body.fs-mode #user-pic { display: none; }
body.fs-mode main { padding: 8px 14px; max-width: none; }
body.fs-mode:not(.game-active) main h1, body.fs-mode:not(.game-active) main h2 { margin: 6px 0; }
body.fs-mode:not(.game-active) .card { padding: 10px 14px; }
@media (orientation: landscape) and (min-width: 700px) {
  body.fs-mode:not(.game-active) main { column-gap: 14px; }
  body.fs-mode:not(.game-active) .custom-wrap { grid-template-columns: 1fr 1fr; }
}
/* Gameplay: the stage is pinned to the viewport - nothing scrolls or moves. */
body.fs-mode.game-active { overflow: hidden; height: 100dvh; }
body.fs-mode.game-active #topbar,
body.fs-mode.game-active .sub, body.fs-mode.game-active .kbd-help,
body.fs-mode.game-active #practice-ind { display: none !important; }
body.fs-mode.game-active main { position: fixed; inset: 0; padding: 4px 8px; display: flex; flex-direction: column;
  align-items: center; justify-content: space-between; overflow: hidden; }
body.fs-mode.game-active #view { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
body.fs-mode.game-active #game-hud { width: 100%; margin: 0 0 2px; flex-wrap: nowrap; }
body.fs-mode.game-active #game-stage { width: min(100%, calc((100dvh - 118px) * 1.785714)); flex: 0 0 auto; margin: 0 auto; }
body.fs-mode.game-active #game-canvas { width: 100%; height: auto; touch-action: none; }
body.fs-mode.game-active #reload-wrap, body.fs-mode.game-active #shot-clock, body.fs-mode.game-active #aim-info { margin: 1px auto; }
body.fs-mode.game-active #ability-bar, body.fs-mode.game-active #weapon-bar { margin: 2px; gap: 5px; justify-content: center; }
body.fs-mode.game-active .wpn, body.fs-mode.game-active #ability-bar .btn { padding: 4px 8px; font-size: 12px; }
body.fs-mode.game-active #fs-float { bottom: auto; top: 6px; left: 50%; transform: translateX(-50%); }
@media (display-mode: fullscreen), (display-mode: standalone) { #fs-float { opacity: .5; } }

/* v52: one prominent full-screen toggle, always reachable (no scrolling). */
#fs-float { opacity: 1 !important; bottom: 14px; right: 12px; left: auto; padding: 9px 14px; font-size: 14px; font-weight: 800;
  background: linear-gradient(180deg,#de923b,#ad6b20); color: #261408; border: 0; box-shadow: 0 3px 14px rgba(0,0,0,.45); }
#fs-float.on { background: #ffb44a; color: #2b1700; }
body:has(#login-wrap) #fs-float { display: none; }
body.fs-mode:not(.game-active) #fs-float { bottom: 10px; right: 10px; }
body.fs-mode.game-active { background: #1a0d05; }
body.fs-mode.game-active #fs-float { right: auto; }

/* v53: full-screen game = stage on one side + controls in a side column, filling the screen. */
#fs-inline { display: none; width: 100%; margin: 6px 0 12px; padding: 12px 14px; font-size: 16px; font-weight: 800; border: 0; border-radius: 12px;
  background: linear-gradient(180deg,#de923b,#ad6b20); color: #261408; box-shadow: 0 3px 12px rgba(0,0,0,.35); cursor: pointer; }
@media (max-width: 900px) { #fs-inline { display: block; } }
#fs-float { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); }
body.fs-mode.game-active main { padding: 4px 6px; justify-content: flex-start; }
@media (orientation: landscape) and (min-width: 640px) {
body.fs-mode.game-active #view { display: grid; height: 100%; align-content: start; align-items: start; column-gap: 8px; row-gap: 2px;
  grid-template-columns: min(calc((100dvh - 56px) * 1.785714), calc(100vw - 184px)) minmax(0, 1fr); grid-auto-rows: min-content; }
body.fs-mode.game-active #game-hud { grid-column: 1 / -1; grid-row: 1; }
body.fs-mode.game-active #exit-confirm { grid-column: 1 / -1; }
body.fs-mode.game-active #game-stage { grid-column: 1; grid-row: 2 / span 12; width: 100%; margin: 0; }
body.fs-mode.game-active #reload-wrap, body.fs-mode.game-active #shot-clock, body.fs-mode.game-active #aim-info,
body.fs-mode.game-active #ability-bar, body.fs-mode.game-active #weapon-bar { grid-column: 2; width: 100%; max-width: none; margin: 1px 0; }
body.fs-mode.game-active #ability-bar { display: flex; flex-wrap: wrap; justify-content: stretch; gap: 4px; }
body.fs-mode.game-active #ability-bar .btn { flex: 1 1 46%; padding: 5px 6px; font-size: 12px; }
body.fs-mode.game-active #weapon-bar { display: flex; flex-wrap: wrap; gap: 4px; justify-content: stretch; max-height: calc(100dvh - 190px); overflow-y: auto; }
body.fs-mode.game-active .wpn { flex: 1 1 46%; padding: 5px 6px; font-size: 12px; min-width: 0; }
body.fs-mode.game-active #fs-float { top: auto; bottom: 6px; left: 8px; right: auto; transform: none; padding: 6px 10px; font-size: 12px; }
}
/* v52: tips line, lobby title, secret night mode */
.tip-line { margin: 4px 0 10px; opacity: .85; font-size: 14px; transition: opacity .4s; }
.tip-line.tip-out { opacity: 0; }
.lobby-title { display: none; font-weight: 900; font-size: 15px; color: #fff6e7; margin: 0 0 6px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
@media (max-width: 640px) { .lobby-title { display: block; } }
.brand { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#night-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 40; display: none; }

/* home hero: three big entry buttons */
.home-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 6px 0 16px; }
.hero-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 92px; font-size: 1.05rem; }
.hero-btn span { font-size: 1.9rem; line-height: 1; }
@media (max-width: 560px) { .home-hero { gap: 8px; } .hero-btn { min-height: 78px; font-size: .9rem; padding: 8px 4px; } .hero-btn span { font-size: 1.5rem; } }

/* v63: exit confirmation is above the battlefield, never in its grid rows. */
body.game-active #exit-confirm { position: fixed; z-index: 80; inset: auto;
  top: max(12px, env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
  width: min(460px, calc(100vw - 24px)); box-sizing: border-box; margin: 0;
  max-height: calc(100dvh - 24px); overflow-y: auto; box-shadow: 0 8px 40px #000b; }
body.game-active #exit-confirm .btn { min-height: 44px; }
/* v64: the guest warning remains in menus, never over match controls. */
body.fs-mode.game-active #guest-banner { display: none; }

/* v68: touch feedback and stable portrait layout */
#game-canvas, button, #weapon-bar, #ability-bar { -webkit-tap-highlight-color: transparent; }
@media (orientation: portrait), (max-width: 639px) {
 body.fs-mode.game-active { overflow: auto; }
 body.fs-mode.game-active main { position: static; height: auto; min-height: 100dvh; }
 body.fs-mode.game-active #view { display: flex; height: auto; }
 body.fs-mode.game-active #game-stage { width: 100%; flex-shrink: 0; }
 body.fs-mode.game-active #game-hud { flex-wrap: wrap; }
 body.fs-mode.game-active #fs-float { position: static; transform: none; margin: 8px; }
}
body:not(.game-active) main { padding-bottom: 70px; }
#fs-inline { display: block; }
@media (pointer: coarse), (hover: none) { .kbd-help { display: none !important; } }
bdi[dir=ltr] { unicode-bidi: isolate; }
.xp-summary { padding: 10px 16px; border: 1px solid #ba854b; border-radius: 12px; margin: 8px; }
.xp-summary p { margin: 3px; }
.renderer-loading { position:absolute; inset:0; z-index:20; display:grid; place-content:center; text-align:center; padding:20px; background:#25160b; color:#ffe0ac; }

.policy-toggle { display:flex; gap:10px; padding:8px; } .policy-toggle input { width:auto; }
/* A labelled fullscreen exit stays after the controls, never over them. */
body.fs-mode.game-active:has(#view) #fs-float { z-index: 30; }
body:not(.game-active):has(#fs-inline) #fs-float { display:none !important; }
body:not(.game-active) #fs-float { position: static; display: block; transform:none; width:calc(100% - 24px); margin:12px; }

/* v68 results must stay readable on a short mobile stage. */
#game-overlay:not(.hidden) { position:fixed; inset: max(8px, env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom)); z-index:85; overflow-y:auto; border-radius:16px; padding:18px 12px; background:rgba(33,17,7,.97); box-sizing:border-box; }
#fire-row{display:flex;gap:8px;justify-content:center;align-items:center;margin:6px auto;flex-wrap:wrap}#fire-btn{min-width:160px;min-height:52px;font-size:20px;font-weight:900;background:linear-gradient(#ef6a3a,#c2410c);color:#fff;border:2px solid #7c2d12;border-radius:14px;box-shadow:0 4px 0 #7c2d12;touch-action:manipulation}#fire-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #7c2d12}#fire-btn.hidden{display:none}
#fire-btn{position:relative;overflow:hidden;--p:100%}#fire-btn::after{content:"";position:absolute;left:0;bottom:0;height:5px;width:var(--p);background:#fde68a;transition:width .1s linear}#fire-btn.reloading{filter:saturate(.45) brightness(.85)}#fire-btn.ready{animation:firePulse 1.4s ease-in-out infinite}#fire-btn.fired{animation:fireKick .22s ease-out}@keyframes firePulse{0%,100%{box-shadow:0 4px 0 #7c2d12,0 0 0 0 rgba(251,146,60,.55)}50%{box-shadow:0 4px 0 #7c2d12,0 0 0 9px rgba(251,146,60,0)}}@keyframes fireKick{0%{transform:scale(1)}40%{transform:scale(.9)}100%{transform:scale(1)}}
#shot-clock{display:table;margin:4px auto;padding:3px 14px;border-radius:999px;background:linear-gradient(#2b3a55,#18243a);border:2px solid #f4c95d;color:#fde68a;font-weight:900;box-shadow:0 2px 0 #0b1220}#shot-clock.urgent{animation:clockBeat .6s ease-in-out infinite;border-color:#fb7185}@keyframes clockBeat{50%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){#fire-btn.ready,#shot-clock.urgent{animation:none}}

/* Admin broadcast popup */
#bcast-popup { position:fixed; inset:0; z-index:135; display:flex; align-items:center; justify-content:center; background:rgba(18,10,4,.72); padding:16px; }
#bcast-popup .bcast-box { position:relative; max-width:440px; width:100%; max-height:86vh; overflow:auto; background:var(--panel,#3e210d); border:2px solid #f59e0b; border-radius:16px; padding:22px 20px 18px; text-align:center; box-shadow:0 10px 40px rgba(0,0,0,.5); }
#bcast-popup .bcast-x { position:absolute; top:8px; inset-inline-start:8px; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.25); color:inherit; font-size:18px; cursor:pointer; }
#bcast-popup .bcast-ico { font-size:36px; }
#bcast-popup h3 { margin:4px 0 10px; font-size:20px; }
#bcast-popup .bcast-msg { white-space:pre-wrap; overflow-wrap:anywhere; text-align:start; font-size:16px; line-height:1.5; }
#bcast-popup .bcast-ok { margin-top:12px; min-width:150px; }
#bcast-popup .bcast-box h3, #bcast-popup .bcast-box .bcast-msg { color:#fff !important; text-shadow:none; }
#bcast-popup .bcast-box .bcast-msg { opacity:1; }