/* 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); } }