/* World-map marching: march card anchored at a tile, squad ring around a moving truck, march banner (client/march.js). */

/* ---------- march card ---------- */
#mcard { position: absolute; left: 0; top: 0; z-index: 8; width: 268px; padding: 8px 10px 10px; border-radius: 14px; color: var(--text);
  background: radial-gradient(120% 70% at 50% 0%, rgba(240,180,60,.12), transparent 60%), linear-gradient(#24332a, #141d17);
  border: 2px solid var(--pn-gold2); box-shadow: 0 0 0 1px var(--c-ink), inset 0 0 0 1px rgba(255,220,140,.14), 0 10px 26px rgba(0,0,0,.6); --ax: 0px; --ay: 0px; }
#mcard.pop { animation: mc-in .16s ease-out both; }
@keyframes mc-in { from { opacity: 0; scale: .94; } to { opacity: 1; scale: 1; } }
/* notch pointing back at the tile */
#mcard::before { content: ''; position: absolute; width: 12px; height: 12px; background: #1f2b24; border: 2px solid var(--pn-gold2); transform: rotate(45deg); }
#mcard[data-side="r"]::before { left: -8px; top: calc(var(--ay) - 7px); border-top: 0; border-right: 0; }
#mcard[data-side="l"]::before { right: -8px; top: calc(var(--ay) - 7px); border-bottom: 0; border-left: 0; }
#mcard[data-side="b"]::before { top: -8px; left: calc(var(--ax) - 7px); border-bottom: 0; border-right: 0; background: #24332a; }
#mcard[data-side="t"]::before { bottom: -8px; left: calc(var(--ax) - 7px); border-top: 0; border-left: 0; background: #141d17; }

.mc-head-row { display: flex; align-items: center; gap: 6px; margin: -8px -10px 8px; padding: 6px 8px 6px 12px; background: var(--pn-wood); border-bottom: 1px solid var(--pn-gold2); border-radius: 12px 12px 0 0; }
.mc-title { flex: 1; min-width: 0; display: grid; }
.mc-title b { font: 800 15px/1.15 system-ui; color: var(--pn-gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 #000; }
.mc-title small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.mc-cog, .mc-x { flex: none; width: 32px; height: 32px; padding: 0; border-radius: 9px; display: grid; place-items: center; background: rgba(0,0,0,.35); border: 1px solid #5a3f20; color: var(--pn-gold); }
.mc-cog svg { width: 20px; height: 20px; fill: var(--pn-gold); }
.mc-x { font-size: 15px; }

.mc-heroes { display: flex; gap: 8px; justify-content: center; width: 100%; padding: 4px 0 8px; background: none; border: 0; border-radius: 0; }
.mc-head { width: 44px; height: 44px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #2a3a2e, var(--c-ink));
  border: 2px solid var(--pn-gold); box-shadow: 0 0 0 2px var(--c-ink), 0 3px 6px rgba(0,0,0,.5); }
.mc-head > * { width: 100% !important; height: 100% !important; border-radius: 50%; object-fit: cover; object-position: top; }
.mc-head.empty { border: 2px dashed rgba(240,180,60,.45); color: rgba(240,180,60,.7); font: 700 22px/1 system-ui; background: rgba(0,0,0,.3); }
.mc-emo { font-size: 22px; }

.mc-cap { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--muted); }
.mc-cap b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; } .mc-cap b.over { color: var(--bad); }
.mc-bar { position: relative; height: 10px; margin: 3px 0 8px; border-radius: 6px; background: var(--c-ink); border: 1px solid #000; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); overflow: hidden; }
.mc-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#ffd27a, var(--pn-gold) 50%, var(--pn-gold2)); border-radius: 6px; }

.mc-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; background: rgba(0,0,0,.3); border: 1px solid var(--line); }
.mc-pw { display: grid; min-width: 0; }
.mc-pw small { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.mc-pw b { font: 900 16px/1.1 system-ui; font-variant-numeric: tabular-nums; }
.mc-pw.me b { color: #8cc6ff; } .mc-pw.them { text-align: right; } .mc-pw.them b { color: #ff9a8a; } .mc-pw.them.none b { color: var(--muted); }
.mc-vs-x { font: italic 900 15px/1 system-ui; color: var(--pn-gold); text-shadow: 0 1px 0 #000, 0 0 8px rgba(240,180,60,.5); }
.mc-diff { margin: 6px 0 8px; text-align: center; font: 900 17px/1.1 system-ui; letter-spacing: .02em; text-shadow: 0 1px 0 #000, 0 0 10px currentColor; }
.d-cake { color: #6fe07c; } .d-good { color: var(--good); } .d-even { color: #ffd24a; } .d-risky { color: #ff9a3c; } .d-deadly { color: var(--bad); } .d-empty { color: var(--muted); text-shadow: 0 1px 0 #000; }

.mc-foot { display: flex; align-items: center; gap: 8px; }
.mc-time { flex: none; display: flex; align-items: center; gap: 4px; font: 800 14px/1 system-ui; color: var(--text); font-variant-numeric: tabular-nums; }
.mc-time i { font-style: normal; }
.mc-go { flex: 1; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; font: 900 18px/1 system-ui; color: var(--c-amber-ink); letter-spacing: .02em;
  background: linear-gradient(#ffd77a, var(--pn-gold) 55%, #d08f22); border: 2px solid #ffe7a8; box-shadow: 0 0 0 1px var(--pn-gold-dark), 0 4px 0 var(--pn-gold-dark), 0 6px 12px rgba(0,0,0,.45); }
.mc-go:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 1px var(--pn-gold-dark), 0 2px 0 var(--pn-gold-dark); }
.mc-stam { font: 800 13px/1 system-ui; padding: 3px 7px; border-radius: 999px; background: rgba(0,0,0,.25); color: #3a2600; }
.mc-stam.low { color: #fff; background: var(--bad); }
.mc-dheroes { display: flex; gap: 10px; flex-wrap: wrap; }
.mc-dheroes > div { display: grid; justify-items: center; gap: 2px; font-size: 11px; color: var(--muted); }
.mc-dheroes .mc-head { width: 48px; height: 48px; }

/* ---------- squad ring ---------- */
#mring { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 7; pointer-events: none; --r: 56px; }
#mring > * { pointer-events: auto; }
.mr-circle { position: absolute; left: calc(var(--r) * -1); top: calc(var(--r) * -1); width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%; pointer-events: none !important;
  border: 3px solid rgba(240,180,60,.85); box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 0 18px rgba(240,180,60,.35), inset 0 0 18px rgba(240,180,60,.25); }
#mring.pop .mr-circle { animation: mr-in .22s ease-out both; }
@keyframes mr-in { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.mr-plate { position: absolute; left: 0; top: calc(var(--r) * -1 - 10px); transform: translate(-50%, -100%); width: max-content; display: grid; grid-template-columns: auto auto; column-gap: 7px; align-items: center; white-space: nowrap;
  padding: 4px 12px 4px 4px; border-radius: 999px; background: linear-gradient(#2a3a2e, #141d17); border: 2px solid #c2443c; box-shadow: 0 4px 10px rgba(0,0,0,.5); }
.mr-plate.mine { border-color: var(--pn-gold2); }
.mr-plate > span:nth-child(2) { font: 800 14px/1.1 system-ui; color: var(--text); }
.mr-plate small { grid-column: 2; font-size: 11px; color: var(--muted); max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.mr-sq { grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 900 14px/1 system-ui; color: #3a2500; background: linear-gradient(#ffe08a, #b9801a); border: 2px solid #fff3; }
.mr-mid { position: absolute; left: 0; top: calc(var(--r) * .55); transform: translate(-50%, 0); pointer-events: none !important; }
.mr-time { display: block; white-space: nowrap; padding: 3px 10px; border-radius: 8px; font: 900 15px/1 ui-monospace, "SF Mono", Menlo, monospace; color: #fff; background: rgba(11,17,13,.88); border: 1px solid var(--pn-gold2); text-shadow: 0 1px 0 #000; box-shadow: 0 3px 8px rgba(0,0,0,.45); }
.mr-btns .rb { --dx: calc(var(--ax) * (var(--r) + 34px)); --dy: calc(var(--ay) * (var(--r) + 34px) - 34px); }
#mring.pop .rb { animation: rb-pop .26s cubic-bezier(.2, 1.6, .4, 1) both; }
.rb-recall .rb-ico { background: radial-gradient(circle at 50% 30%, #ff9e8a 0%, var(--c-blood) 45%, var(--c-blood-lo) 100%); border-color: #ffc9bd; box-shadow: 0 0 0 2px #6b1d16, 0 5px 0 #5a1610, 0 8px 14px rgba(0,0,0,.55), inset 0 -6px 10px rgba(110,20,10,.35), inset 0 4px 6px rgba(255,255,255,.35); }
.rb-recall .rb-ico svg { filter: drop-shadow(0 2px 0 rgba(90,20,10,.7)); }

/* ---------- banner ---------- */
#march-banner { position: absolute; left: 50%; top: 32%; z-index: 12; transform: translateX(-50%); width: max-content; min-width: 230px; max-width: calc(100% - 32px); padding: 9px 22px; text-align: center; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(20,29,23,.95) 14%, rgba(20,29,23,.95) 86%, transparent); border-top: 2px solid var(--pn-gold); border-bottom: 2px solid var(--pn-gold); }
#march-banner b { display: block; font: 900 17px/1.2 system-ui; color: var(--pn-gold); text-shadow: 0 1px 0 #000, 0 0 10px rgba(240,180,60,.45); }
#march-banner small { display: block; font-size: 12px; color: var(--text); opacity: .85; }
#march-banner.go { animation: mb-in .3s ease-out both; }
@keyframes mb-in { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }

.mc-gather-recommend{display:flex;align-items:center;gap:9px;margin-top:10px;padding:10px 9px;border-top:1px solid #b99a4a55;border-radius:0 0 8px 8px;background:#152219;color:#e9e6cf;font:600 12px/1.35 system-ui;cursor:pointer}.mc-gather-recommend input{flex:none;width:22px;height:22px;min-height:0;margin:0;padding:0;accent-color:#80bd4c}.mc-gather-recommend:has(input:checked){color:#b6ed9c;background:#243821}

/* Captain seat (middle, bigger, crowned) and the squad's vehicle row */
.mc-heroes { align-items: center; }
.mc-heroes .mc-head { cursor: pointer; }
.mc-head.captain { position: relative; width: 56px; height: 56px; overflow: visible; box-shadow: 0 0 0 2px #f0b43c, 0 0 12px rgba(240,180,60,.55); }
.mc-head.captain > :first-child { border-radius: 50%; overflow: hidden; }
.mc-crown { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 17px; line-height: 1; filter: drop-shadow(0 1px 1px #000); pointer-events: none; }
.mc-capt { margin: -2px 0 8px; padding: 6px 8px; border-radius: 8px; background: rgba(240,180,60,.12); border: 1px solid rgba(240,180,60,.35); font-size: 12px; line-height: 1.35; color: var(--text); text-align: center; }
.mc-capt b { color: #f0c860; }
.mc-capt.none { color: var(--muted); background: rgba(0,0,0,.18); border-style: dashed; }
.mc-veh { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 5px 6px; border-radius: 8px; background: rgba(78,143,224,.12); border: 1px solid rgba(78,143,224,.35); }
.mc-veh-info { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: center; }
.mc-veh-info b { font-size: 12px; } .mc-veh-info small { font-size: 11px; color: var(--muted); }
.mc-veh-arrow { flex: none; width: 34px; height: 34px; min-height: 0; padding: 0; border-radius: 50%; font: 800 20px/1 system-ui; }
.hero-pick label.hero-captain { border-color: #f0b43c; box-shadow: 0 0 0 1px #f0b43c inset; }
.hero-pick label.hero-captain::after { content: ' 👑 Captain'; font-size: 11px; color: #f0c860; }
.mc-heroes:has(.captain) { padding-top: 14px; }
.mc-head > .mc-crown { width: auto !important; height: auto !important; border-radius: 0; object-fit: initial; }
.mc-usual { color: #8fd27a !important; }
.mc-hosp { margin: 4px 0; padding: 5px 8px; border-radius: 8px; background: rgba(224,87,76,.16); border: 1px solid rgba(224,87,76,.55); color: #ffcbc4; font-size: 12px; text-align: center; }

/* World tour after the Radar is built (client/world-tour.js) */
.wt-card { position: absolute; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; width: min(440px, calc(100% - 24px));
  display: flex; gap: 10px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(180deg, #24331f, #141d12); border: 1px solid #f0b43c; box-shadow: 0 8px 24px rgba(0,0,0,.55); color: #ece8d6; }
.wt-face { flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; border: 2px solid #f0b43c; }
.wt-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.35; }
.wt-tx > b { color: #f0c860; font-size: 14px; }
.wt-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .wt-row small { opacity: .7; margin-right: auto; }
.wt-skip { min-height: 0; padding: 6px 10px; font-size: 12px; background: transparent; border: 1px solid rgba(255,255,255,.25); }
.wt-go { min-height: 0; padding: 7px 14px; font-weight: 800; }

/* view-only map of another server (app.js spectate) */
#spectate-bar { position: absolute; left: 50%; top: calc(64px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 6px 14px; border-radius: 999px; background: rgba(20,14,6,.92); border: 1px solid #f0b43c; color: #f0d9a8; font: 700 13px system-ui; box-shadow: 0 4px 14px rgba(0,0,0,.5); white-space: nowrap; }
#spectate-bar button { min-height: 0; padding: 6px 12px; border-radius: 999px; font-size: 12px; }

/* attacking clears the screen (owner, like DWS): only the profile, the clock and power, the shop, the card and the car column stay */
#view #minimap, #view #coord-bar, #view #ticker, #view #hud .hud-left, #view #hud .hud-events, #view #hud .hud-right, #view #hud .hud-heroes, #view #hud .hud-world, #view #qp-tab, #view #nt { transition: opacity .18s ease; }
#view.mc-open #minimap, #view.mc-open #coord-bar, #view.mc-open #ticker, #view.mc-open #hud .hud-left, #view.mc-open #hud .hud-events, #view.mc-open #hud .hud-right,
#view.mc-open #hud .hud-heroes, #view.mc-open #hud .hud-world, #view.mc-open #qp-tab, #view.mc-open #nt { opacity: 0 !important; pointer-events: none !important; }

/* a rally on the march card: the gathering time as four ticks and Equalize (owner, 2026-10-22) */
.mc-preps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 4px; }
.mc-prep { min-height: 0; padding: 7px 4px; border-radius: 9px; display: flex; align-items: center; justify-content: center; gap: 6px; font: 800 13px/1 system-ui; color: #d8d2b8;
  background: rgba(0,0,0,.32); border: 1px solid rgba(240,180,60,.25); }
.mc-prep .tick { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid rgba(240,200,120,.6); background: rgba(0,0,0,.35); display: grid; place-items: center; font-style: normal; }
.mc-prep.on { color: #ffe9a8; border-color: #f0b43c; background: linear-gradient(180deg, rgba(240,180,60,.28), rgba(0,0,0,.3)); box-shadow: 0 0 8px rgba(240,180,60,.35); }
.mc-prep.on .tick { background: linear-gradient(#8fe06c, #3f9a3a); border-color: #c8f5b0; }
.mc-prep.on .tick::after { content: '✓'; color: #fff; font: 900 11px/1 system-ui; }
.mc-equal { display: flex; align-items: center; gap: 8px; margin: 4px 2px 6px; font-size: 13px; color: #e6e0c8; cursor: pointer; }
.mc-equal input { width: 17px; height: 17px; min-height: 0; margin: 0; accent-color: #f0b43c; }
.mc-equal small { opacity: .65; }

.mc-best { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 0; margin: 2px 0 6px; padding: 6px 8px; border-radius: 9px; background: rgba(0,0,0,.25);
  border: 1px solid rgba(240,180,60,.22); color: #e6e0c8; font-size: 13px; text-align: left; }
.mc-best .tick { flex: none; width: 17px; height: 17px; border-radius: 4px; border: 1.5px solid rgba(240,200,120,.6); background: rgba(0,0,0,.35); display: grid; place-items: center; font-style: normal; }
.mc-best small { opacity: .65; }
.mc-best.on { border-color: #f0b43c; background: linear-gradient(180deg, rgba(240,180,60,.22), rgba(0,0,0,.28)); }
.mc-best.on .tick { background: linear-gradient(#8fe06c, #3f9a3a); border-color: #c8f5b0; }
.mc-best.on .tick::after { content: '✓'; color: #fff; font: 900 11px/1 system-ui; }
.mc-best b, .mc-best small { white-space: nowrap; }
.mc-best { justify-content: center; } .mc-best b { color: #ffe9a8; }
.mc-best { cursor: default; }
/* the world tour waits behind any open screen (it covered the Upgrade button and costs of building sheets) */
body:has(#sheet:not(.hidden)) .wt-card, body:has(#panel:not(.hidden)) .wt-card { display: none; }