/* =====================================================================
   warmatch.css — THE SKIN

   Loaded AFTER style.css. style.css owns the layout: the 440x900 stage,
   the flex/grid skeleton, the tap targets, the safe-area padding — all
   of that is tuned and none of it moves. This file owns the LOOK: the
   metal, the paint, the light and every animation.

   Keeping them apart means the skin can be read, reviewed and reverted
   as one thing, the same way common/cyber-skin.css layers over the
   games' layout file.

   CONTENTS
     1  motion library          — every @keyframes, named once
     2  global chrome           — CRT overlay, screen entry, toast, hand
     3  boot                    — cold open / audio gate
     4  title                   — the stencil plate and its stamp
     5  field set               — the terminal's hardware
     6  base camp               — the hub: HUD, nodes, rail, dock
     7  war map                 — investigation board
     8  archive & squad
     9  overlays                — reward, arsenal, honours, trophies, decks
    10  mission host            — the mini-game frame (chrome only)
    11  orientation guard
    12  reduced motion

   MOTION BUDGET
   -------------
   Everything moves, but nothing moves behind text you have to read.
   Ambient loops sit at or under 20% opacity; the loud animations (stamp,
   recoil, alarm, ammo tick) are all EVENT-driven and under 700ms. Timing
   functions are mostly steps() — a 16-bit machine does not ease.
===================================================================== */

/* =====================================================================
   1 — MOTION LIBRARY
===================================================================== */

/* A stencil plate slammed onto the frame: overshoot, settle, done. */
@keyframes wm-stamp {
  0%   { transform: scale(2.4) rotate(-3deg); opacity: 0; filter: blur(1px); }
  55%  { transform: scale(0.92) rotate(1deg); opacity: 1; filter: blur(0); }
  70%  { transform: scale(1.06) rotate(-0.5deg); }
  85%  { transform: scale(0.98); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* The frame taking the hit from that stamp. */
@keyframes wm-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3px, 2px); }
  40% { transform: translate(3px, -2px); }
  60% { transform: translate(-2px, -1px); }
  80% { transform: translate(2px, 1px); }
}

/* An amber readout line sweeping down a panel — the "this is powered" tell. */
@keyframes wm-scan {
  0%   { transform: translateY(-8%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(108%); opacity: 0; }
}

/* Status LED. Two steps, no fade — a lamp is on or it is off. */
@keyframes wm-led { 0%, 62% { opacity: 1; } 63%, 100% { opacity: .22; } }

/* Hazard chevrons crawling along a strip. */
@keyframes wm-hazard { to { background-position: 64px 0; } }

/* Perimeter alarm: a red wash rising and falling. */
@keyframes wm-alarm {
  0%, 100% { box-shadow: 0 0 0 2px var(--alert), 0 0 0 4px var(--ink), 0 0 10px rgba(224,58,28,.25); }
  50%      { box-shadow: 0 0 0 2px var(--flame), 0 0 0 4px var(--ink), 0 0 26px rgba(224,58,28,.75); }
}

/* Something hot enough to breathe light. */
@keyframes wm-heat {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.22); }
}

/* A rotor / radar sweep. */
@keyframes wm-spin { to { transform: rotate(360deg); } }

/* Tracer round crossing a bar left to right. */
@keyframes wm-tracer {
  0%   { left: -30%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 115%; opacity: 0; }
}

/* Signal flare climbing. Used for reward pops. */
@keyframes wm-flare {
  0%   { transform: translateY(18px) scale(.7); opacity: 0; }
  30%  { transform: translateY(0) scale(1.12); opacity: 1; }
  70%  { transform: translateY(-2px) scale(1); opacity: 1; }
  100% { transform: translateY(-26px) scale(.92); opacity: 0; }
}

/* Panels arriving: they slide in like a HUD element being deployed. */
@keyframes wm-deploy-up   { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes wm-deploy-down { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes wm-deploy-left { from { transform: translateX(-18px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Bad reception. */
@keyframes wm-static { 0%,100% { opacity: .05; } 50% { opacity: .12; } }

/* A CRT settling after power-on. */
@keyframes wm-powerup {
  0%   { transform: scaleY(.004); opacity: 0; filter: brightness(3); }
  35%  { transform: scaleY(.02); opacity: 1; }
  60%  { transform: scaleY(1); filter: brightness(1.8); }
  100% { transform: scaleY(1); filter: brightness(1); }
}

/* Ammo/score digits ticking over. */
@keyframes wm-tick {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-3px) scale(1.18); color: var(--amber-hot); }
  100% { transform: translateY(0) scale(1); }
}

/* Slow drift, for anything that should feel like it is idling, not static. */
@keyframes wm-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* Antenna sway. */
@keyframes wm-sway { 0%,100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }

/* A dashed marching border, for "selection in progress". */
@keyframes wm-march { to { background-position: 16px 0, -16px 0, 0 -16px, 0 16px; } }


/* --- cutscene: the dialogue strip is a field dispatch --- */
#cutscene .cut-text {
  color: var(--sand-l) !important;
  text-shadow: 1px 1px 0 var(--ink) !important;
  border-top: 3px solid var(--amber) !important;
  background: linear-gradient(0deg, rgba(7,10,8,.97) 62%, rgba(7,10,8,0)) !important;
  padding-top: 20px !important;
}
/* the speaker's name sits on a stencilled tab that overlaps the top rule */
#cutscene .cut-text .who {
  position: absolute; left: var(--edge); top: -1px;
  display: inline-block !important;
  margin: 0 !important;
  padding: 2px 10px;
  background: var(--amber);
  color: var(--ink) !important;
  text-shadow: none !important;
  letter-spacing: 3px !important;
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
#cutscene .prompt-next {
  background: rgba(5,7,10,.9) !important;
  color: var(--amber) !important;
  box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 1px rgba(255,176,32,.5);
  letter-spacing: 2px;
}

/* Screens deploy rather than cut. */
.screen.active > .layer { animation: wm-deploy-up .34s steps(6) both; }
#lobby.active > .layer, #crt.active .crt-stage { animation: none; }

/* Toast: a field dispatch strip. */
#toast {
  background: linear-gradient(180deg, rgba(38,51,31,.97), rgba(13,20,16,.97)) !important;
  border-left: 4px solid var(--amber);
  box-shadow: 0 0 0 2px var(--ink), 0 6px 0 rgba(5,7,10,.5), 0 0 24px rgba(255,176,32,.2);
  color: var(--sand-l);
  letter-spacing: 1.5px;
}

/* The hint hand becomes a target reticle instead of a pointing finger. */
#hand { filter: drop-shadow(0 0 6px rgba(255,176,32,.7)); }

/* The longer Ukrainian labels ("‹ БАЗА", "ЗМІНИТИ ОПЕРАТОРА") were
   wrapping inside narrow header slots and breaking mid-word. */
.px-btn { white-space: nowrap; }

/* Reusable pieces the screens below share. ------------------------- */

/* Painted plate: mill finish + top light + bottom shadow. */
.wm-plate {
  background:
    repeating-linear-gradient(135deg, rgba(138,151,163,.05) 0 1px, rgba(0,0,0,0) 1px 6px),
    linear-gradient(180deg, rgba(111,143,52,.16) 0%, rgba(0,0,0,0) 42%, rgba(0,0,0,.28) 100%),
    var(--panel);
  box-shadow: inset 0 1px 0 rgba(255,224,122,.18), inset 0 -2px 0 rgba(5,7,10,.55), 0 0 0 2px var(--ink);
}

/* Hazard strip. Used on headers and on anything gated. */
.wm-hazard {
  background-image: repeating-linear-gradient(45deg,
    var(--amber) 0 8px, var(--ink) 8px 16px);
  background-size: 64px 100%;
  animation: wm-hazard 2.4s linear infinite;
}


/* =====================================================================
   3 — BOOT / audio gate
   A field set running its self-test on a dark airstrip.
===================================================================== */
/* =====================================================================
   4 — TITLE PLATE
   The one screen allowed to be loud.
===================================================================== */
#menu .layer { justify-content: space-between; padding: calc(5 * var(--vh)) 0 calc(3 * var(--vh)); }
#menu .title-wrap { width: 100%; display: flex; justify-content: center; }

#menu .title-plate {
  position: relative;
  padding: 16px 22px 14px;
  text-align: center;
  background: linear-gradient(180deg, rgba(44,61,24,.55), rgba(5,7,10,.72));
  box-shadow:
    0 0 0 3px var(--ink),
    0 0 0 5px rgba(111,143,52,.55),
    0 10px 0 rgba(5,7,10,.55),
    0 0 60px rgba(255,122,61,.18);
  animation: wm-stamp .62s cubic-bezier(.2,1.4,.5,1) both;
}
/* rivets down both sides of the plate */
#menu .title-plate::before {
  content: ""; position: absolute; inset: 6px; pointer-events: none;
  background:
    radial-gradient(circle at 4px 6px, rgba(240,219,174,.5) 0 1.5px, rgba(0,0,0,0) 2px),
    radial-gradient(circle at calc(100% - 4px) 6px, rgba(240,219,174,.5) 0 1.5px, rgba(0,0,0,0) 2px),
    radial-gradient(circle at 4px calc(100% - 6px), rgba(5,7,10,.7) 0 1.5px, rgba(0,0,0,0) 2px),
    radial-gradient(circle at calc(100% - 4px) calc(100% - 6px), rgba(5,7,10,.7) 0 1.5px, rgba(0,0,0,0) 2px);
}
/* the searchlight that crosses the plate every few seconds */
#menu .title-plate::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  background: linear-gradient(105deg,
    rgba(255,238,158,0) 40%, rgba(255,238,158,.26) 50%, rgba(255,238,158,0) 60%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  animation: wm-sweep 5.5s linear infinite;
}
@keyframes wm-sweep {
  0%   { background-position: 130% 0; }
  55%  { background-position: -60% 0; }
  100% { background-position: -60% 0; }
}

#menu .t1 {
  font-size: clamp(38px, calc(11 * var(--vw)), 76px);
  font-weight: 700;
  letter-spacing: 7px;
  line-height: .94;
  color: var(--sand-l);
  /* stencil bleed: hard offsets, then ONE hot rim. No neon. */
  text-shadow:
    3px 3px 0 var(--ink),
    5px 5px 0 rgba(5,7,10,.55),
    0 -2px 0 rgba(240,219,174,.35),
    0 0 30px rgba(255,122,61,.35);
  animation: none;
}
#menu .t1b {
  color: var(--amber);
  letter-spacing: 5px;
  text-shadow:
    3px 3px 0 var(--ink),
    5px 5px 0 rgba(5,7,10,.55),
    0 0 34px rgba(255,176,32,.7);
}
#menu .title-bar {
  height: 5px; margin: 8px 0 6px;
  background-image: repeating-linear-gradient(45deg, var(--alert) 0 8px, var(--ink) 8px 16px);
  background-size: 64px 100%;
  animation: wm-hazard 2s linear infinite;
  box-shadow: 0 0 0 1px var(--ink);
}
/* Кнопка одна, тож вона має право бути великою. Ширину тримаємо нижчою
   за половину кадру: зомбі стоїть на брустверi ліворуч від центру, і
   перекривати його кнопкою — марно витрачати єдину фігуру переднього
   плану. */
#menu .menu-bottom { gap: 14px; }
#menu .menu-bottom .px-btn {
  min-width: 200px; font-size: 14px; padding: 16px 30px;
  animation: wm-deploy-up .4s steps(5) both;
  animation-delay: .45s;
}


/* =====================================================================
   5 — FIELD SET (the terminal)
   style.css hides the old micro's housing so the phosphor can go
   edge-to-edge on a phone. That stays — but the header and the chin come
   back as SLIM rails, so the screen reads as hardware without stealing
   any of the space the text needs.
===================================================================== */
#crt { background: radial-gradient(90% 80% at 50% 40%, #16201a 0%, #070a08 60%, #000 100%); }

.pc-top, .pc-chin { display: flex !important; align-items: center; flex: 0 0 auto; }

/* The housing is deliberately DESATURATED next to the phosphor. An olive
   case beside a green screen merges into one green rectangle; pulling the
   metal toward gunmetal, and setting both rails in a black bed, keeps the
   hardware and the display reading as two different things. */
.pc-top {
  justify-content: space-between; gap: 8px;
  height: 22px; padding: 0 8px; margin-bottom: 7px;
  background:
    repeating-linear-gradient(135deg, rgba(138,151,163,.08) 0 1px, rgba(0,0,0,0) 1px 6px),
    linear-gradient(180deg, #4a5245 0%, #2a3028 100%);
  box-shadow:
    inset 0 1px 0 rgba(163,177,150,.55),
    inset 0 -2px 0 rgba(5,7,10,.7),
    0 0 0 2px var(--ink),
    0 4px 0 rgba(5,7,10,.85);
}
.pc-brand {
  display: inline-block !important;
  font-family: var(--font); font-size: var(--fs-micro); letter-spacing: 2px;
  color: var(--sand-l); text-shadow: 1px 1px 0 var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-led {
  display: inline-block !important;
  width: 8px; height: 8px; flex: 0 0 auto;
  background: var(--signal);
  box-shadow: 0 0 0 2px var(--ink), 0 0 10px var(--signal);
  animation: wm-led 1.3s steps(1) infinite;
}
.pc-latch {
  width: 10px; height: 12px; flex: 0 0 auto;
  background: linear-gradient(180deg, var(--chrome), var(--steel));
  box-shadow: 0 0 0 1px var(--ink), inset 0 1px 0 rgba(255,255,255,.4);
}
/* the whip antenna, leaning out of the top-right corner */
.pc-antenna {
  position: absolute; right: calc(var(--edge-r) + 14px); top: 4px;
  width: 3px; height: 40px; z-index: 4;
  transform-origin: bottom center;
  background: linear-gradient(180deg, var(--chrome), var(--steel-d));
  box-shadow: 0 0 0 1px var(--ink);
  animation: wm-sway 4.2s ease-in-out infinite;
}
.pc-antenna::before {
  content: ""; position: absolute; left: -1px; top: -4px;
  width: 5px; height: 5px; background: var(--alert);
  box-shadow: 0 0 0 1px var(--ink), 0 0 10px var(--alert);
  animation: wm-led 1.9s steps(1) infinite;
}

.pc-chin {
  justify-content: space-between; gap: 10px;
  height: 26px; padding: 0 8px; margin-top: 7px;
  background:
    repeating-linear-gradient(135deg, rgba(138,151,163,.06) 0 1px, rgba(0,0,0,0) 1px 6px),
    linear-gradient(180deg, #3a4136 0%, #1c211a 100%);
  box-shadow:
    inset 0 1px 0 rgba(163,177,150,.45),
    0 0 0 2px var(--ink),
    0 -4px 0 rgba(5,7,10,.85);
}
.pc-grille { display: flex !important; gap: 3px; align-items: center; }
.pc-grille i {
  width: 3px; height: 14px; display: block;
  background: var(--ink);
  box-shadow: 1px 0 0 rgba(111,143,52,.35);
}
.pc-dials { display: flex; gap: 8px; align-items: center; }
.pc-dial {
  width: 14px; height: 14px; display: block; border-radius: 50%;
  background: conic-gradient(from 210deg, var(--steel-l) 0 25%, var(--steel-d) 25% 100%);
  box-shadow: 0 0 0 2px var(--ink), inset 0 1px 0 rgba(255,255,255,.35);
}
.pc-dial.small { width: 10px; height: 10px; }
/* the handset, hung on the side of the case */
.pc-handset {
  width: 22px; height: 12px; position: relative;
  background: linear-gradient(180deg, var(--steel), var(--steel-d));
  box-shadow: 0 0 0 2px var(--ink), inset 0 1px 0 rgba(138,151,163,.5);
}
.pc-handset .pc-cord {
  position: absolute; left: -14px; top: 4px; width: 14px; height: 5px;
  background: repeating-linear-gradient(90deg, var(--steel-d) 0 2px, rgba(0,0,0,0) 2px 4px);
}

/* the phosphor itself: power-on sweep the first time it appears */
#crt.active .monitor { animation: wm-powerup .5s steps(8) both; transform-origin: center; }
#crt .monitor, .hacked-os .monitor {
  box-shadow:
    0 0 0 3px var(--olive-d),
    0 0 0 5px var(--ink),
    inset 0 0 40px rgba(20,101,42,.28),
    0 0 40px rgba(57,255,110,.10) !important;
}
/* four screws, one in each corner of the bezel */
#crt .monitor::after {
  content: ""; position: absolute; inset: 3px; pointer-events: none; z-index: 5;
  background:
    radial-gradient(circle at 4px 4px, var(--chrome) 0 1.5px, rgba(0,0,0,0) 2px),
    radial-gradient(circle at calc(100% - 4px) 4px, var(--chrome) 0 1.5px, rgba(0,0,0,0) 2px),
    radial-gradient(circle at 4px calc(100% - 4px), var(--chrome) 0 1.5px, rgba(0,0,0,0) 2px),
    radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), var(--chrome) 0 1.5px, rgba(0,0,0,0) 2px);
  opacity: .55;
}

.crt-head {
  background: linear-gradient(180deg, rgba(20,101,42,.35), rgba(0,0,0,0)) !important;
  border-bottom: 2px solid rgba(57,255,110,.35);
  letter-spacing: 3px;
}
.crt-baud { color: var(--olive-l); letter-spacing: 2px; }

/* the crack progress bar, re-armed as an assault meter */
.hackbar {
  box-shadow: 0 0 0 2px var(--signal), 0 0 0 4px var(--ink) !important;
  background: rgba(5,7,10,.85) !important;
  overflow: hidden; position: relative;
}
.hackbar i {
  background: linear-gradient(90deg, var(--signal-d), var(--signal)) !important;
  box-shadow: 0 0 14px rgba(57,255,110,.6);
}
/* a tracer runs the length of the bar while it fills */
.hackbar::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 24%;
  background: linear-gradient(90deg, rgba(255,238,158,0), rgba(255,238,158,.5), rgba(255,238,158,0));
  animation: wm-tracer 1.1s linear infinite;
}


/* =====================================================================
   6 — BASE CAMP (the hub)
===================================================================== */

/* --- HUD band: a strip of instrument panel bolted across the top --- */
.lobby-top {
  background:
    repeating-linear-gradient(135deg, rgba(138,151,163,.05) 0 1px, rgba(0,0,0,0) 1px 6px),
    linear-gradient(180deg, rgba(38,51,31,.94) 0%, rgba(7,10,8,.90) 100%);
  box-shadow: inset 0 1px 0 rgba(111,143,52,.5), 0 2px 0 rgba(5,7,10,.7);
  border-bottom: 2px solid rgba(255,176,32,.35);
  animation: wm-deploy-down .35s steps(5) both;
}

/* rank chip: a dog-tag shaped plate */
.profile-hud .ph-lvl {
  background: linear-gradient(180deg, var(--steel-l), var(--steel-d)) !important;
  color: var(--amber-l) !important;
  box-shadow: 0 0 0 2px var(--ink), inset 0 1px 0 rgba(255,255,255,.3);
  letter-spacing: 2px;
  clip-path: polygon(5px 0, 100% 0, 100% 100%, 5px 100%, 0 50%);
  padding-left: 12px;
}
.profile-hud .ph-xp {
  background: rgba(5,7,10,.85) !important;
  box-shadow: 0 0 0 2px var(--olive-l), 0 0 0 4px var(--ink) !important;
  position: relative; overflow: hidden;
}
.profile-hud .ph-xp-fill {
  background: linear-gradient(90deg, var(--olive), var(--amber)) !important;
  box-shadow: 0 0 10px rgba(255,176,32,.5);
}
.profile-hud .ph-xp-num { color: var(--sand-l); text-shadow: 1px 1px 0 var(--ink); }

/* supply counters read like an ammo box stencil: [ 000 ] */
.currency .cur-item {
  background: rgba(5,7,10,.8);
  box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 1px rgba(255,176,32,.35);
  letter-spacing: 1px;
}
.currency .cur-item b { color: var(--amber); text-shadow: 0 0 8px rgba(255,176,32,.55); }
.currency .cur-item.cred b { color: var(--brass); text-shadow: 0 0 8px rgba(230,190,110,.5); }
.currency .cur-item.bump b { animation: wm-tick .34s steps(3); }

/* tutorial meter → an ammunition gauge */
.hack-meter .hm-label { color: var(--olive-l); letter-spacing: 3px; }
.hack-meter .hm-label #hmNum { color: var(--amber); }
.hack-meter .hm-bar {
  box-shadow: 0 0 0 2px var(--olive-l), 0 0 0 4px var(--ink) !important;
  background: rgba(5,7,10,.9) !important;
}
.hack-meter .hm-fill {
  background: linear-gradient(90deg, var(--blood), var(--alert) 40%, var(--amber)) !important;
  box-shadow: 0 0 14px rgba(255,176,32,.5) !important;
}

/* --- section headings: stencilled, with a rule that runs to the edge --- */
.zone-title {
  position: relative; width: 100%; max-width: 384px;
  display: flex; align-items: center; gap: 8px;
  color: var(--sand-l) !important; opacity: 1 !important;
  letter-spacing: 4px !important;
  text-shadow: 1px 1px 0 var(--ink) !important;
  padding: 2px 0;
}
.zone-title::before {
  content: "▮▮"; color: var(--amber); font-size: .8em; letter-spacing: -1px;
  text-shadow: 0 0 8px rgba(255,176,32,.6);
}
.zone-title::after {
  content: ""; flex: 1 1 auto; height: 2px;
  background: linear-gradient(90deg, rgba(255,176,32,.55), rgba(255,176,32,0));
}
.zone-title-rebuses { color: var(--brass) !important; }
.zone-title-rebuses::before { color: var(--signal); text-shadow: 0 0 8px rgba(57,255,110,.6); }
.zone-title-rebuses::after { background: linear-gradient(90deg, rgba(57,255,110,.5), rgba(57,255,110,0)); }

/* --- mission tiles: each icon sits on a stencilled crate lid --- */
.node canvas, .node img {
  background:
    linear-gradient(180deg, rgba(111,143,52,.20), rgba(5,7,10,.35)),
    var(--panel);
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px rgba(111,143,52,.55), 0 4px 0 rgba(5,7,10,.55);
  padding: 3px;
}
.node:hover canvas, .node:hover img,
.node:active canvas, .node:active img {
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px var(--amber), 0 4px 0 rgba(5,7,10,.55), 0 0 22px rgba(255,176,32,.35);
}
.node .node-name {
  color: var(--sand-l) !important;
  text-shadow: 1px 1px 0 var(--ink) !important;
  letter-spacing: 1px !important;
}
.node.hot canvas, .node.hot img {
  filter: drop-shadow(0 0 10px rgba(255,176,32,.75)) !important;
}
.node.locked::after {
  background: repeating-linear-gradient(45deg,
    rgba(5,7,10,.62) 0 6px, rgba(122,20,16,.32) 6px 12px) !important;
}
.node.placeholder {
  border-color: rgba(111,143,52,.35) !important;
  background: rgba(20,29,22,.35) !important;
}
.node.placeholder .ph-mark { color: rgba(111,143,52,.55) !important; }
.node .new-badge, .rail-node .new-badge, .shop-btn .new-badge {
  background: var(--alert) !important; color: var(--bone) !important;
  box-shadow: 0 0 0 2px var(--ink), 0 0 12px rgba(224,58,28,.6) !important;
  letter-spacing: 1px;
}

/* --- bottom rail: a rack of equipment slots --- */
.side-rail {
  background: linear-gradient(0deg, rgba(7,10,8,.96) 55%, rgba(7,10,8,0)) !important;
  border-top: 2px solid rgba(255,176,32,.30) !important;
}
.rail-node {
  background:
    linear-gradient(180deg, rgba(74,99,35,.35), rgba(13,20,16,.92)) !important;
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px rgba(111,143,52,.6), 0 3px 0 rgba(5,7,10,.6) !important;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}
.rail-node:hover, .rail-node:active {
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px var(--amber), 0 3px 0 rgba(5,7,10,.6), 0 0 20px rgba(255,176,32,.3) !important;
}
.rail-node .rn-name { color: var(--sand-l) !important; text-shadow: 1px 1px 0 var(--ink); }
.rail-node.hot { animation: wm-alarm 1.2s steps(2) infinite !important; }
.rail-node.locked {
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px var(--steel) !important;
}
.rail-node.locked::after {
  background: repeating-linear-gradient(45deg,
    rgba(5,7,10,.6) 0 6px, rgba(122,20,16,.3) 6px 12px) !important;
}
.rail-node .unread-badge {
  background: var(--alert) !important;
  box-shadow: 0 0 0 2px var(--ink), 0 0 12px rgba(224,58,28,.7) !important;
}

/* --- асистент: сам персонаж, без рамки польової рації ---
   Рамку прибрано разом із вибором оператора: тепер асистент один —
   сержант Булочка, і його ролик іде з альфа-каналом. Будь-яка обводка
   малювала б коробку навколо вирізаного силуету. */
.zoras-frame {
  position: relative;
  box-shadow: none !important;
  background: none !important;
}
.zoras-box {
  background: linear-gradient(180deg, rgba(38,51,31,.95), rgba(5,7,10,.95)) !important;
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px rgba(255,176,32,.45) !important;
  color: var(--sand-l) !important;
}
.zoras-box .who {
  color: var(--amber) !important; letter-spacing: 3px !important;
  text-shadow: 1px 1px 0 var(--ink), 0 0 10px rgba(255,176,32,.5) !important;
}
/* хвостик хмарки носить ту саму подвійну обводку, що й сама хмарка */
#lobby .zoras-box::before, #btPandaHost .zoras-box::before{
  box-shadow: 0 0 0 2px var(--amber), 0 0 0 4px var(--ink) !important;
}
.dlg-next {
  background: var(--amber) !important; color: var(--ink) !important;
  box-shadow: 0 0 0 2px var(--ink) !important;
  letter-spacing: 2px;
}

/* the settings / arsenal chips */
.px-btn.gear-btn {
  border: 2px solid var(--olive-l) !important;
  background: linear-gradient(180deg, rgba(74,99,35,.55), rgba(13,20,16,.9)) !important;
  color: var(--amber-l) !important;
  box-shadow: 0 0 0 2px var(--ink), 0 2px 0 rgba(5,7,10,.6) !important;
}
.px-btn.gear-btn:hover, .px-btn.gear-btn:active {
  border-color: var(--amber) !important; background: rgba(255,176,32,.18) !important;
}


/* =====================================================================
   7 — WAR MAP (investigation board)
===================================================================== */
.board-head, .arc-head, .soc-head {
  background: linear-gradient(180deg, rgba(38,51,31,.96), rgba(7,10,8,.94));
  border-bottom: 2px solid rgba(255,176,32,.35);
  box-shadow: inset 0 1px 0 rgba(111,143,52,.5);
}
.board-title, .arc-title, .soc-title {
  color: var(--sand-l) !important; letter-spacing: 3px;
  text-shadow: 1px 1px 0 var(--ink);
}
.board-task {
  background: linear-gradient(0deg, rgba(7,10,8,.97), rgba(7,10,8,.82)) !important;
  border-top: 2px solid var(--amber) !important;
  color: var(--sand-l) !important;
}
/* Clue slots become field photographs pinned to the sheet: card stock,
   a slight tilt so they read as physical objects, a real cast shadow,
   and a brass drawing-pin punched through the top edge. */
#boardSlots .slot {
  background: linear-gradient(180deg, #2b2a22 0%, #17170f 100%) !important;
  box-shadow:
    0 0 0 2px var(--ink),
    0 0 0 3px rgba(168,129,74,.65),
    3px 6px 8px rgba(0,0,0,.55) !important;
  transform: translate(-50%, -50%) rotate(-1.2deg);
}
#boardSlots .slot:nth-child(even) { transform: translate(-50%, -50%) rotate(1.4deg); }
/* the pin */
#boardSlots .slot::before {
  content: ""; position: absolute; left: 50%; top: -5px; margin-left: -4px;
  width: 8px; height: 8px; border-radius: 50%; z-index: 4;
  background: radial-gradient(circle at 35% 32%, var(--sand-l) 0 25%, var(--brass) 26% 62%, var(--earth) 63% 100%);
  box-shadow: 0 0 0 1px var(--ink), 1px 2px 3px rgba(0,0,0,.6);
}
#boardSlots .slot.filled {
  box-shadow:
    0 0 0 2px var(--ink),
    0 0 0 3px var(--amber),
    3px 6px 8px rgba(0,0,0,.55),
    0 0 22px rgba(255,176,32,.30) !important;
}
#boardSlots .slot.filled::before {
  background: radial-gradient(circle at 35% 32%, var(--amber-hot) 0 25%, var(--alert) 26% 62%, var(--blood-d) 63% 100%);
}
#boardSlots .slot.dragging { transform: translate(-50%, -50%) rotate(0deg) scale(1.04); }
#boardSlots .slot .cap { color: var(--sand-l) !important; }
#boardSlots .slot.empty .cap { color: var(--sand) !important; }
#boardSlots .slot .qmark { color: var(--earth) !important; }


/* =====================================================================
   8 — ARCHIVE & SQUAD
===================================================================== */
.arc-item, .soc-item {
  background: linear-gradient(180deg, rgba(38,51,31,.55), rgba(13,20,16,.92)) !important;
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px rgba(111,143,52,.5), 0 3px 0 rgba(5,7,10,.6) !important;
  position: relative;
}
.arc-item::before, .soc-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--amber);
}
.arc-item:hover, .soc-item:hover { box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px var(--amber), 0 3px 0 rgba(5,7,10,.6) !important; }
.arc-empty { color: var(--steel-l) !important; letter-spacing: 3px; }


/* =====================================================================
   9 — OVERLAYS
===================================================================== */

/* --- reward: the after-action award --- */

/* legacy single-number pop. It STAYS on screen (its own code hides it),
   so the entrance overshoots and settles rather than flaring out. */
#reward .card { background: none !important; box-shadow: none !important; }
#reward .big {
  color: var(--amber) !important;
  text-shadow: 2px 2px 0 var(--ink), 0 0 34px rgba(255,176,32,.85) !important;
  animation: wm-stamp .5s cubic-bezier(.2,1.4,.5,1) both;
}
#reward .sub {
  color: var(--sand-l) !important; letter-spacing: 4px;
  text-shadow: 1px 1px 0 var(--ink) !important;
}

/* the real one: reward.js's fly-to-HUD panel, dressed as a supply drop */
.reward-fly {
  background:
    repeating-linear-gradient(45deg, rgba(255,176,32,.03) 0 10px, rgba(0,0,0,0) 10px 20px),
    radial-gradient(circle at 50% 42%, rgba(44,61,24,.62), rgba(3,6,4,.97)) !important;
}
.rf-title {
  color: var(--sand-l) !important;
  text-shadow: 2px 2px 0 var(--ink) !important;
  letter-spacing: 6px !important;
  padding-bottom: 8px;
  border-bottom: 4px solid transparent;
  border-image: repeating-linear-gradient(45deg, var(--amber) 0 8px, var(--ink) 8px 16px) 4;
}
/* each chip is a stencilled crate: hazard cap, riveted body */
.rf-chip {
  background:
    repeating-linear-gradient(135deg, rgba(138,151,163,.05) 0 1px, rgba(0,0,0,0) 1px 6px),
    linear-gradient(180deg, #4a3a20 0%, #16201a 100%) !important;
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px currentColor, 0 6px 0 rgba(5,7,10,.6), 0 0 30px rgba(0,0,0,.55) !important;
  position: relative; overflow: hidden;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.rf-chip::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background-image: repeating-linear-gradient(45deg, currentColor 0 6px, var(--ink) 6px 12px);
}
.rf-chip.k-hack { color: var(--amber) !important; }
.rf-chip.k-credits { color: var(--brass) !important; }
.rf-chip.k-xp { color: var(--signal) !important; }
.rf-amt { color: var(--sand-l) !important; text-shadow: 1px 1px 0 var(--ink); }
.rf-lab { color: var(--olive-l) !important; letter-spacing: 2px !important; }
.rf-hint { color: var(--amber) !important; letter-spacing: 3px !important; }
.counter-pop { animation: wm-tick .34s steps(3) !important; }

/* Fullscreen overlays sat on flat black, which read as "the app stopped"
   rather than as another room. They now get the inside of a supply tent:
   canvas hatch, a floor gradient, and the same vignette as the stage. */
#shop, #leaderboard, #collections, #vhsPlayer, #boombox {
  background-image:
    repeating-linear-gradient(135deg, rgba(138,151,163,.035) 0 2px, rgba(0,0,0,0) 2px 9px),
    radial-gradient(120% 90% at 50% 0%, rgba(74,99,35,.16) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #0d1410 0%, #070a08 70%, #030604 100%) !important;
}

.shop-card .sc-price { color: var(--amber) !important; text-shadow: 0 0 10px rgba(255,176,32,.45); letter-spacing: 2px; }
.shop-card .sc-name { color: var(--sand-l) !important; letter-spacing: 2px; }
.shop-card .sc-sub { color: var(--olive-l) !important; }

/* every fullscreen overlay shares the same header language */
.col-topbar {
  background: linear-gradient(180deg, rgba(38,51,31,.97), rgba(7,10,8,.95)) !important;
  border-bottom: 2px solid var(--amber) !important;
  box-shadow: inset 0 1px 0 rgba(111,143,52,.5);
}
/* The overlay titles share the bar with a close button and (on the VHS
   deck) a fullscreen button. On a 440-wide stage a 4px-tracked title
   wrapped to two lines and pushed the bar taller — it now shrinks its
   tracking instead of wrapping. */
.col-title {
  color: var(--sand-l) !important;
  letter-spacing: clamp(1px, .6 * var(--vw), 4px) !important;
  text-shadow: 1px 1px 0 var(--ink) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.collect-close {
  background: var(--alert) !important; color: var(--bone) !important;
  box-shadow: 0 0 0 2px var(--ink), 0 2px 0 rgba(5,7,10,.6) !important;
}
.collect-close:hover { background: var(--flame) !important; }

/* tabs read as toggle switches on a panel */
.lb-tab {
  background: linear-gradient(180deg, rgba(74,99,35,.4), rgba(13,20,16,.9)) !important;
  color: var(--sand) !important;
  box-shadow: 0 0 0 2px var(--ink), inset 0 1px 0 rgba(111,143,52,.5) !important;
  letter-spacing: 2px;
}
.lb-tab.active {
  background: linear-gradient(180deg, var(--amber), #c07f10) !important;
  color: var(--ink) !important;
  box-shadow: 0 0 0 2px var(--ink), 0 0 18px rgba(255,176,32,.45) !important;
}

/* honours board: the top three get brass, steel and bronze rails */
.lb-row {
  background: linear-gradient(90deg, rgba(38,51,31,.7), rgba(13,20,16,.9)) !important;
  box-shadow: 0 0 0 2px var(--ink) !important;
  border-left: 4px solid var(--steel) !important;
}
.lb-row:nth-child(1) { border-left-color: var(--brass) !important; }
.lb-row:nth-child(2) { border-left-color: var(--chrome) !important; }
.lb-row:nth-child(3) { border-left-color: var(--sand) !important; }
.lb-row.me { border-left-color: var(--amber) !important; box-shadow: 0 0 0 2px var(--amber), 0 0 20px rgba(255,176,32,.3) !important; }

/* arsenal cards: crates with a stencilled price */
.shop-card {
  background:
    repeating-linear-gradient(135deg, rgba(138,151,163,.045) 0 1px, rgba(0,0,0,0) 1px 6px),
    linear-gradient(180deg, rgba(107,81,44,.5), rgba(13,20,16,.94)) !important;
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px rgba(168,129,74,.55), 0 4px 0 rgba(5,7,10,.6) !important;
  position: relative; overflow: hidden;
}
.shop-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background-image: repeating-linear-gradient(45deg, var(--amber) 0 8px, var(--ink) 8px 16px);
  background-size: 64px 100%;
  animation: wm-hazard 3s linear infinite;
}
.shop-card:hover { box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px var(--amber), 0 4px 0 rgba(5,7,10,.6), 0 0 26px rgba(255,176,32,.28) !important; }
.shop-balance { color: var(--amber) !important; letter-spacing: 2px; }

/* trophy hub cards */
.col-card {
  background: linear-gradient(180deg, rgba(74,99,35,.35), rgba(13,20,16,.94)) !important;
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px rgba(111,143,52,.6), 0 5px 0 rgba(5,7,10,.6) !important;
  transition: transform .1s steps(2), box-shadow .1s linear;
}
.col-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px var(--amber), 0 5px 0 rgba(5,7,10,.6), 0 0 30px rgba(255,176,32,.28) !important; }
.col-card .col-ic { color: var(--amber) !important; text-shadow: 0 0 16px rgba(255,176,32,.6) !important; }
.col-card .col-name { color: var(--sand-l) !important; letter-spacing: 3px; }
.col-card .col-sub { color: var(--olive-l) !important; }

/* the deck: field recorder */
.tv-wrap, .vcr-wrap {
  box-shadow: 0 0 0 3px var(--olive-d), 0 0 0 5px var(--ink) !important;
}
.tv-noinput { color: var(--signal) !important; text-shadow: 0 0 12px rgba(57,255,110,.6) !important; letter-spacing: 3px; }
.cassette-shelf { border-color: rgba(255,176,32,.25) !important; }
/* The tape's paper label is cream, but a later, unrelated `.cs-name`
   (the case-select card title) paints every .cs-name white — so the track
   name was white-on-cream and effectively invisible. Scoped back to ink. */
.cassette .cs-name { color: #262b23 !important; text-shadow: none !important; }
.cassette .cs-tag { color: #6a5f4a !important; }
.cassette.locked .cs-name { color: #6b7263 !important; }
.shelf-label { color: var(--sand-l) !important; letter-spacing: 4px !important; }

/* settings panel */
#audioPanel .ap-title { letter-spacing: 4px !important; }
/* Volume sliders read as lever switches: a black slot with a knurled
   steel knob. Red thumbs looked like an alarm, which is not what a
   volume control should say. */
#audioPanel input[type="range"] {
  accent-color: var(--amber);
  box-shadow: 0 0 0 2px var(--olive-l), 0 0 0 4px var(--ink) !important;
  background:
    repeating-linear-gradient(90deg, rgba(111,143,52,.22) 0 1px, rgba(0,0,0,0) 1px 8px),
    rgba(5,7,10,.92) !important;
}
#audioPanel input[type="range"]::-webkit-slider-thumb {
  background:
    repeating-linear-gradient(90deg, rgba(5,7,10,.5) 0 1px, rgba(0,0,0,0) 1px 4px),
    linear-gradient(180deg, var(--chrome) 0%, var(--steel) 55%, var(--steel-d) 100%) !important;
  box-shadow: 0 0 0 2px var(--ink), 0 0 12px rgba(255,176,32,.35) !important;
}
#audioPanel input[type="range"]::-moz-range-thumb {
  background:
    repeating-linear-gradient(90deg, rgba(5,7,10,.5) 0 1px, rgba(0,0,0,0) 1px 4px),
    linear-gradient(180deg, var(--chrome) 0%, var(--steel) 55%, var(--steel-d) 100%) !important;
  box-shadow: 0 0 0 2px var(--ink), 0 0 12px rgba(255,176,32,.35) !important;
}
#audioPanel .ap-label { color: var(--olive-l) !important; letter-spacing: 3px; }
#audioPanel .ap-val { color: var(--amber) !important; }
#audioPanel .ap-reset { color: var(--flame-l) !important; box-shadow: 0 0 0 2px var(--alert) inset, 0 0 0 2px var(--ink) !important; }

/* Панда лишається у власних кольорах: вона вже в тій самій оливі, що й
   решта екрана. Колишнє градуювання під амбер (grayscale+sepia на
   .zoras-av) прибрано — воно існувало тільки щоб витягнути неонові
   портрети оператора в теплий бік. */

/* end-of-operation card */
#demoEnd .de-title { color: var(--amber) !important; letter-spacing: 5px !important; animation: wm-stamp .55s cubic-bezier(.2,1.4,.5,1) both; }
#demoEnd .de-sub { color: var(--sand-l) !important; }


/* =====================================================================
   10 — MISSION HOST (mini-game frame)
   Chrome only. Nothing inside the iframe is touched by this file — the
   games' own palette was migrated in games/common/cyber-skin.css.
===================================================================== */
.puz-head {
  background: linear-gradient(180deg, rgba(38,51,31,.97), rgba(7,10,8,.95)) !important;
  border-bottom: 2px solid var(--amber) !important;
  box-shadow: inset 0 1px 0 rgba(111,143,52,.5);
}
/* Заголовок панелі тепер несе живий статус зміни (локація · рахунок ·
   ланцюг), тому letter-spacing тут менший: три значення в одному рядку
   на вузькому телефоні інакше не влазять. */
.puz-title { letter-spacing: 2px !important; text-shadow: 1px 1px 0 var(--ink) !important; }
#puzTitle .pt-loc { color: var(--sand-l) !important; }
#puzTitle .pt-score { color: var(--amber) !important; text-shadow: 0 0 10px rgba(255,176,32,.5) !important; }
#puzTitle .pt-combo { background: var(--amber-l) !important; color: var(--ink) !important; }
#puzHint .ph-tag {
  background: var(--alert) !important; color: var(--bone) !important;
  box-shadow: 0 0 0 1px var(--ink) !important;
}
/* =====================================================================
   11 — ORIENTATION GUARD
===================================================================== */
#rotate {
  background:
    repeating-linear-gradient(45deg, rgba(122,20,16,.10) 0 12px, rgba(0,0,0,0) 12px 24px),
    radial-gradient(90% 80% at 50% 45%, #16201a 0%, #070a08 60%, #000 100%);
}
#rotate .rot-ico {
  border-color: var(--amber);
  box-shadow: 0 0 0 4px var(--ink), 0 0 26px rgba(255,176,32,.5);
}
#rotate .rot-title { color: var(--sand-l); text-shadow: 2px 2px 0 var(--ink); }
#rotate .rot-sub { color: var(--amber); }


/* =====================================================================
   12 — REDUCED MOTION
   The ambient loops are decoration; the event animations carry meaning
   (a reward landed, a node is hot). Under prefers-reduced-motion the
   loops stop and the events collapse to a fade.
===================================================================== */
@media (prefers-reduced-motion: reduce) {
#menu .title-plate, #reward .big, #demoEnd .de-title,
  .screen.active > .layer, .lobby-top,
  #menu .menu-bottom .px-btn {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}