/* The WebGL canvas fills the stage; everything else the player sees is engine
 * chrome. The only DOM this game owns is the HUD (render/hud.js) and the map's
 * loading card (render/level.js), both placed off session.layout — never off
 * hardcoded corner margins. */
.mc-wrap { position: absolute; inset: 0; overflow: hidden; background: #162324; }
.mc-cv   { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.mc-hud { position: absolute; inset: 0; pointer-events: none; color: #e9e4c6;
  font: 700 13px/1.2 'Roboto Condensed', system-ui, sans-serif; }
.mc-hud .row { position: absolute; display: flex; gap: 8px; align-items: center; }

/* MercZone's HUD (its PlayerUIService): slate panels at 82%, cream type with a
 * slate drop, health in slanted red ticks, the weapon in yellow. */
.mc-vitals { flex-direction: column; align-items: flex-start; gap: 3px; }
.mc-hptext { padding-left: 8px; font-size: 22px; line-height: 1; color: #e9fbc6; text-shadow: 2px 2px 0 #2f4545; }
.mc-hptext span { font-size: 15px; }
.mc-hptext.low { color: #eb4040; }
.mc-hpframe { padding: 7px 30px 7px 12px; background: rgba(47, 69, 70, 0.82);
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); }
.mc-ticks { --tick: 8px; position: relative; height: 14px; width: calc(var(--n) * var(--tick)); transform: skewX(-22deg);
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0 calc(var(--tick) - 3px), transparent calc(var(--tick) - 3px) var(--tick)); }
.mc-ticks > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: repeating-linear-gradient(90deg, #eb4040 0 calc(var(--tick) - 3px), transparent calc(var(--tick) - 3px) var(--tick)); }
.mc-ticks.low > i { animation: mc-low 0.8s ease-in-out infinite alternate; }
@keyframes mc-low { to { opacity: 0.45; } }

.mc-ammo { align-items: flex-end; gap: 14px; padding: 8px 14px 8px 26px; background: rgba(47, 69, 70, 0.82);
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%); }
.mc-gun { display: flex; flex-direction: column; gap: 3px; }
/* the Assault Rifle silhouette in MercZone's HUD atlas: (0, 640) 224 x 64, drawn at 0.625 */
.mc-gunicon { display: block; width: 140px; height: 40px;
  background: url(./assets/textures/ui/uisprite.webp?v=c4a2a56f) 0 -400px / 320px 640px no-repeat; }
.mc-guntitle { font-size: 13px; letter-spacing: .06em; color: #e9e4c6; }
.mc-gunname { font-size: 11px; letter-spacing: .12em; color: #1a9aa0; }
/* the weapon not in hand, above the panel: E (or the middle button, 1/2, the wheel) swaps */
.mc-alt { gap: 8px; padding: 2px 10px 2px 18px; background: rgba(47, 69, 70, 0.6);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%); font-size: 11px; letter-spacing: .08em; white-space: pre; }
.mc-alt .mc-gunicon { width: 70px; height: 20px; background-size: 160px 320px; opacity: .6; }
.mc-altname { opacity: .8; }
.mc-alt .k { display: inline-block; min-width: 14px; padding: 0 3px; text-align: center; font-size: 10px; line-height: 14px;
  color: #1b2a2b; background: #e9e4c6; border-radius: 2px; }
/* the grenade, at the end of that row: MercZone's power frame (its atlas at 0.417:
   40 x 40), its hatched fill rising with the cooldown, the grenade glyph lit when
   one is ready (Q) */
.mc-nade { position: relative; width: 40px; height: 40px; flex: none; margin-left: 6px;
  background: url(./assets/textures/ui/uisprite.webp?v=c4a2a56f) -106.67px -160px / 213.33px 426.67px no-repeat; }
.mc-nade .fill { position: absolute; inset: 0; clip-path: inset(calc(100% - var(--f, 0%)) 0 0 0); opacity: .55;
  background: url(./assets/textures/ui/uisprite.webp?v=c4a2a56f) -146.67px -160px / 213.33px 426.67px no-repeat; }
.mc-nade .g { position: absolute; left: 6.67px; top: 0; width: 26.67px; height: 40px; filter: brightness(.25);
  background: url(./assets/textures/ui/uisprite.webp?v=c4a2a56f) -186.67px -160px / 213.33px 426.67px no-repeat; }
.mc-nade.ready .g { filter: none; }
.mc-nade.ready .fill { opacity: .9; }
.mc-nade .k { position: absolute; right: -6px; bottom: -4px; min-width: 14px; padding: 0 3px; text-align: center; font-size: 10px; line-height: 14px;
  color: #1b2a2b; background: #e9e4c6; border-radius: 2px; }
.mc-count { position: relative; display: flex; align-items: baseline; text-shadow: 2px 2px 0 #2f4545; font-variant-numeric: tabular-nums; }
.mc-count b { font-size: 44px; line-height: 0.9; min-width: 1.1em; text-align: right; }
.mc-count b.empty { color: #eb4040; }
.mc-count span { font-size: 17px; margin-left: 2px; }
.mc-reload { position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; background: rgba(233, 228, 198, 0.2); visibility: hidden; }
.mc-reload > i { display: block; height: 100%; width: 0; background: #ffd800; }

.mc-callout { font-size: 22px; letter-spacing: .08em; text-transform: uppercase; color: #ffd800; text-shadow: 2px 2px 0 #1b2a2b;
  background: rgba(47, 69, 70, 0.82); padding: 4px 22px; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); white-space: nowrap; }
.mc-callout:empty { display: none; }
.mc-fps { font-size: 11px; font-weight: 400; letter-spacing: .06em; background: rgba(47, 69, 70, 0.7); padding: 2px 7px; }
.mc-fps:empty { display: none; }

/* Narrow screens (a phone held upright): the panels give up their extras so
 * health and ammo never meet in the middle. */
@media (max-width: 700px) {
  .mc-gun { display: none; }
  .mc-alt .mc-gunicon { display: none; }
  .mc-ammo { padding-left: 22px; }
  .mc-count b { font-size: 32px; }
  .mc-ticks { --tick: 5px; }
  .mc-hptext { font-size: 18px; }
}

/* The round clock: the engine's chip (session.hud.clock), in MercZone's yellow on
 * its winged timer backdrop; the slot is empty, so hidden, when no clock runs. */
.mc-clock { position: absolute; left: 50%; transform: translateX(-50%); min-width: 132px; height: 86px;
  display: flex; align-items: center; justify-content: center;
  background: url(./assets/textures/ui/mercZone_timeBackground.svg?v=ee524b96) center / 100% 100% no-repeat; opacity: 0.92;
  --mm-clock-color: #ffd800; --mm-clock-low: #eb4040; }
.mc-clock:empty { display: none; }
.mc-clock [data-part=label] { display: none; }

/* The bolt-action rifle's scope (MercZone's Reticle.js): its black ring the
 * full height of the view, black either side of it, cross-hairs; it fades in
 * over the second half of the aim ramp, zooming from 4x to 1x as it comes. */
.mc-scope { position: absolute; inset: 0; display: none; overflow: hidden; --zoom: 1; }
.mc-scope .ring { position: absolute; left: 50%; top: 50%; height: 100%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%) scale(var(--zoom));
  background: url(./assets/textures/ui/scope.webp?v=d3f1f7ee) center / 100% 100% no-repeat; box-shadow: 0 0 0 100vmax #000; }
.mc-scope::before { content: ''; position: absolute; background: rgba(0, 0, 0, 0.85); left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }
.mc-scope::after { content: ''; position: absolute; background: rgba(0, 0, 0, 0.85); top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; }

/* The crosshair: MercZone's reticle, one tapered tick turned four ways, narrow
 * end in, 16 px out (its Reticle.js at the rifle's hip spread). Aiming down the
 * sights (--ads 0..1, from render/hud.js) brings the ticks in to 9 px with the
 * tighter spread, and over the ramp's last tenth (--dot) they give way to the
 * red dot (Reticle.js redDotAlpha = mapRangeClamped(0.9, 1, 0, 1, scope)). */
.mc-cross { position: absolute; left: 50%; top: 50%; width: 0; height: 0; --dot: 0; --red: 0; --out: -16px; }
.mc-cross i { position: absolute; left: -4px; top: -10px; width: 8px; height: 20px; opacity: calc(1 - var(--dot));
  background: url(./assets/textures/ui/reticle.webp?v=fd6de21c) center / 100% 100% no-repeat; }
.mc-cross i:nth-child(1) { transform: translateY(var(--out)); }
.mc-cross i:nth-child(2) { transform: rotate(90deg) translateY(var(--out)); }
.mc-cross i:nth-child(3) { transform: rotate(180deg) translateY(var(--out)); }
.mc-cross i:nth-child(4) { transform: rotate(270deg) translateY(var(--out)); }
.mc-cross .dot { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; opacity: var(--red);
  background: url(./assets/textures/ui/reddot.webp?v=5e6f89a9) center / 100% 100% no-repeat; }
.mc-cross .mark { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; opacity: 0;
  border: 2px solid #e9e4c6; border-radius: 2px; transform: rotate(45deg) scale(.6); transition: opacity .08s linear; }
.mc-cross .mark.on { opacity: 1; }
.mc-cross .mark.kill { border-color: #eb4040; transform: rotate(45deg) scale(.85); }

/* The map's loading card, over the canvas until collision + visuals are in: the
 * title/lobby backdrop and MercZone's slate, cream and yellow (config.js theme). */
.mc-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
  background: linear-gradient(rgba(10, 18, 19, 0.55), rgba(10, 18, 19, 0.55)), #162324 url(./assets/brand/backdrop.jpg?v=8c6db294) center / cover; }
.mc-loading .box { min-width: 260px; text-align: center; color: #e9e4c6; font: 15px/1.4 'Roboto Condensed', system-ui, sans-serif;
  background: rgba(36, 55, 56, 0.92); border: 1px solid #4b6e70; border-radius: 3px; padding: 14px 22px 12px; }
.mc-loading .t { font-size: 20px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #ffd800; margin-bottom: 10px; }
.mc-loading .bar { height: 6px; border-radius: 1px; background: rgba(233, 228, 198, 0.16); overflow: hidden; }
.mc-loading .bar > i { display: block; height: 100%; width: 5%; background: #ffd800; transition: width .2s linear; }
.mc-loading .s { margin-top: 8px; font-size: 12px; opacity: .7; }

.mc-note { color: #f1e9e2; font: 16px/1.5 system-ui, sans-serif; padding: 24px; max-width: 46ch; }

/* The armory's merc (render/preview.js): the 3D picture over the portrait it
 * replaces, both fitted into the workbench's middle region. */
.mc-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
canvas.mc-preview { opacity: 0; transition: opacity .15s linear; }
canvas.mc-preview.on { opacity: 1; }
.mc-preview-still.off { display: none; }

/* The player list (render/hud.js; MercZone's PlayerList): a slate plate a row,
 * the suit's colour, the name in yellow and the kills in cream; yours on the
 * yellow plate in slate. Small enough to stay out of the aim. */
.mc-board { position: absolute; display: flex; flex-direction: column; gap: 2px; width: 11rem;
  font: 700 13px/1 'Roboto Condensed', system-ui, sans-serif; }
.mc-pl { display: flex; align-items: center; gap: 6px; height: 1.4rem; padding: 0 12px 0 8px; white-space: nowrap;
  background: rgba(47, 69, 70, 0.78); color: #ffd800; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.mc-pl .sw { flex: none; width: 4px; height: 70%; }
.mc-pl .n { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.mc-pl .k { color: #e9e4c6; min-width: 1.6em; text-align: right; }
.mc-pl.local { background: rgba(255, 216, 0, 0.92); color: #2f4546; }
.mc-pl.local .k { color: #2f4546; }
.mc-pl.down { opacity: 0.55; }
.mc-plhead { height: 1rem; background: none; color: #e9e4c6; font-size: 10px; letter-spacing: .12em; text-shadow: 1px 1px 0 #1b2a2b, 0 0 3px #1b2a2b; }