:root {
  --bg: #050806;
  --bg-deep: #030503;
  --panel: rgba(7, 15, 11, 0.82);
  --panel-solid: #08110d;
  --panel-raised: #0b1711;
  --ink: #dbe9dc;
  --muted: #91a898;
  --dim: #6d8476;
  --line: rgba(164, 225, 176, 0.14);
  --line-strong: rgba(164, 225, 176, 0.3);
  --phosphor: #b8f5b0;
  --phosphor-bright: #e8ffe4;
  --green: #79df8f;
  --amber: #ffc266;
  --red: #ff6464;
  --red-soft: #ff9b8b;
  --cyan: #78dce8;
  --violet: #c7a3ff;
  --blue: #91c9ff;
  /* v4.0.32 — 故障 tone 唯一色源：与房间染色 --room-a 的 rgb 完全对齐 */
  --tone-power: #4bb9ff;
  --tone-food: #ffb660;
  --tone-defense: #96b4ff;
  --tone-core: #ff5cbe;
  --tone-stability: #8cffaa;
  --font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --font-sans: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --radius: 2px;
  --shadow-lg: 0 30px 90px rgba(0, 0, 0, 0.55);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg-deep);
}

body {
  margin: 0;
  min-height: 100dvh;
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 24% -10%, rgba(64, 123, 77, 0.24), transparent 42%),
    radial-gradient(ellipse at 80% 110%, rgba(95, 82, 37, 0.15), transparent 45%),
    linear-gradient(148deg, #07100b 0%, #040705 58%, #070906 100%);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Night resolution interlude --------------------------------------- */

.night-overlay {
  position: fixed;
  inset: 0;
  z-index: 360;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(6, 18, 13, 0.42), rgba(2, 5, 4, 0.9) 68%),
    rgba(2, 5, 3, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
}

.night-overlay[hidden] {
  display: none;
}

.night-card {
  position: relative;
  width: min(560px, 92vw);
  padding: 28px 30px 24px;
  border: 1px solid rgba(184, 245, 176, 0.32);
  background:
    linear-gradient(145deg, rgba(184, 245, 176, 0.07), transparent 42%),
    repeating-linear-gradient(135deg, rgba(184, 245, 176, 0.018) 0 6px, transparent 6px 12px),
    rgba(6, 14, 10, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(184, 245, 176, 0.04),
    0 30px 90px rgba(0, 0, 0, 0.62);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  text-align: center;
  animation: nightCardIn 0.42s var(--ease) both;
}

.night-card::before,
.night-card::after {
  content: "";
  position: absolute;
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184, 245, 176, 0.5));
}

.night-card::before {
  top: 14px;
  left: 14px;
}

.night-card::after {
  right: 14px;
  bottom: 14px;
  background: linear-gradient(90deg, rgba(184, 245, 176, 0.5), transparent);
}

.night-card .micro-label {
  color: var(--muted);
  font-size: 10px;
}

.night-orbit {
  position: relative;
  width: 116px;
  height: 116px;
  margin: 18px auto 4px;
  display: grid;
  place-items: center;
}

.night-orbit i {
  position: absolute;
  border: 1px solid rgba(184, 245, 176, 0.24);
  border-radius: 50%;
}

.night-orbit i:nth-child(1) {
  inset: 0;
  border-style: dashed;
  animation: nightOrbit 8s linear infinite;
}

.night-orbit i:nth-child(2) {
  inset: 13px;
  border-color: rgba(255, 194, 102, 0.32);
  border-style: dotted;
  animation: nightOrbit 5.5s linear infinite reverse;
}

.night-orbit i:nth-child(3) {
  inset: 28px;
  border-color: rgba(120, 220, 232, 0.24);
  animation: nightPulse 2.2s ease-in-out infinite;
}

.night-orbit__core {
  color: var(--phosphor-bright);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-shadow: 0 0 18px rgba(184, 245, 176, 0.5);
}

.night-card h2 {
  color: var(--phosphor-bright);
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: 0.08em;
}

.night-status {
  margin-top: 9px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.night-dots {
  display: inline-block;
  width: 22px;
  text-align: left;
  animation: nightDots 1.2s steps(4, end) infinite;
}

.night-readout {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 18px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}

.night-readout b {
  color: var(--amber);
  font-size: 15px;
  font-weight: 600;
}

.night-progress {
  height: 3px;
  margin: 17px 0 13px;
  overflow: hidden;
  background: rgba(184, 245, 176, 0.09);
}

.night-progress i {
  display: block;
  width: 42%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--phosphor), transparent);
  animation: nightSweep 1.05s ease-in-out infinite;
}

.night-foot {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
}

@keyframes nightCardIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes nightOrbit {
  to { transform: rotate(360deg); }
}

@keyframes nightPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(120, 220, 232, 0); }
  50% { box-shadow: 0 0 24px rgba(120, 220, 232, 0.16); }
}

@keyframes nightDots {
  0% { clip-path: inset(0 100% 0 0); }
  25% { clip-path: inset(0 66% 0 0); }
  50% { clip-path: inset(0 33% 0 0); }
  75%, 100% { clip-path: inset(0 0 0 0); }
}

@keyframes nightSweep {
  from { transform: translateX(-110%); }
  to { transform: translateX(330%); }
}

/* State-reactive shelter backdrop ---------------------------------- */

.world-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #030705;
}

.world-bg__image {
  position: absolute;
  inset: -2.5%;
  background-position: center;
  background-size: cover;
  opacity: 0.56;
  filter: saturate(0.92) contrast(1.1) brightness(0.73);
  transform: scale(1.015);
  transition: opacity 1.4s var(--ease), filter 1.4s var(--ease);
}

.world-bg__image--base {
  background-image: url("assets/shelter-normal.svg");
}

.world-bg__image--state {
  background-image: none;
  opacity: 0;
  mix-blend-mode: screen;
  filter: saturate(1.05) contrast(1.12) brightness(0.72);
}

body[data-mood="critical"] .world-bg__image--state {
  background-image: url("assets/shelter-critical.svg");
  opacity: 0.58;
}

body[data-mood="unstable"] .world-bg__image--state {
  background-image: url("assets/shelter-unstable.svg");
  opacity: 0.56;
}

body[data-mood="breach"] .world-bg__image--state {
  background-image: url("assets/shelter-breach.svg");
  opacity: 0.62;
}

.world-bg__light {
  position: absolute;
  inset: -10%;
  background:
    linear-gradient(104deg, transparent 18%, rgba(184, 245, 176, 0.045) 32%, transparent 48%),
    linear-gradient(76deg, transparent 54%, rgba(120, 220, 232, 0.035) 66%, transparent 80%),
    radial-gradient(ellipse at 50% 20%, rgba(184, 245, 176, 0.1), transparent 52%),
    radial-gradient(ellipse at 50% 110%, rgba(255, 194, 102, 0.06), transparent 48%);
  mix-blend-mode: screen;
  opacity: 0.7;
  animation: worldLight 16s ease-in-out infinite alternate;
}

.world-bg__dust {
  position: absolute;
  inset: -8%;
  background-image:
    radial-gradient(rgba(218, 255, 220, 0.35) 0.55px, transparent 0.9px),
    radial-gradient(rgba(255, 194, 102, 0.22) 0.5px, transparent 0.85px);
  background-size: 137px 137px, 211px 211px;
  background-position: 0 0, 47px 83px;
  opacity: 0.2;
  mix-blend-mode: screen;
  animation: worldDust 38s linear infinite;
}

body[data-mood="critical"] .world-bg__light {
  background:
    linear-gradient(104deg, transparent 18%, rgba(255, 96, 70, 0.06) 32%, transparent 48%),
    radial-gradient(ellipse at 50% 20%, rgba(255, 120, 80, 0.1), transparent 52%),
    radial-gradient(ellipse at 50% 110%, rgba(255, 194, 102, 0.05), transparent 48%);
}

body[data-mood="unstable"] .world-bg__light {
  background:
    linear-gradient(104deg, transparent 18%, rgba(180, 124, 255, 0.065) 32%, transparent 48%),
    linear-gradient(76deg, transparent 54%, rgba(97, 224, 228, 0.05) 66%, transparent 80%),
    radial-gradient(ellipse at 50% 20%, rgba(180, 124, 255, 0.1), transparent 52%);
}

body[data-mood="breach"] .world-bg__light {
  background:
    linear-gradient(104deg, transparent 18%, rgba(97, 224, 228, 0.06) 32%, transparent 48%),
    radial-gradient(ellipse at 50% 20%, rgba(97, 224, 228, 0.1), transparent 52%),
    radial-gradient(ellipse at 80% 60%, rgba(255, 90, 60, 0.045), transparent 45%);
}

@keyframes worldLight {
  from { transform: translate3d(-1.2%, 0, 0) scale(1.01); opacity: 0.58; }
  to { transform: translate3d(1.2%, -1%, 0) scale(1.035); opacity: 0.82; }
}

@keyframes worldDust {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-60px, -90px, 0); }
}

.world-bg__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(2, 6, 4, 0.03), rgba(2, 6, 4, 0.46) 52%, rgba(2, 6, 4, 0.86) 100%),
    linear-gradient(180deg, rgba(3, 7, 5, 0.7), transparent 28%, transparent 70%, rgba(3, 7, 5, 0.9));
  transition: background 1.2s var(--ease);
}

body[data-mood="critical"] .world-bg__scrim {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(18, 3, 2, 0.02), rgba(18, 3, 2, 0.48) 52%, rgba(8, 2, 2, 0.88) 100%),
    radial-gradient(ellipse at 50% 78%, rgba(255, 72, 54, 0.13), transparent 56%),
    linear-gradient(180deg, rgba(8, 4, 3, 0.72), transparent 30%, transparent 68%, rgba(8, 3, 2, 0.92));
}

body[data-mood="unstable"] .world-bg__scrim {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(8, 3, 14, 0.02), rgba(8, 3, 14, 0.46) 52%, rgba(5, 2, 9, 0.9) 100%),
    radial-gradient(ellipse at 72% 35%, rgba(166, 102, 255, 0.13), transparent 48%),
    radial-gradient(ellipse at 24% 70%, rgba(74, 220, 224, 0.09), transparent 50%),
    linear-gradient(180deg, rgba(5, 5, 10, 0.76), transparent 30%, transparent 68%, rgba(4, 3, 8, 0.92));
}

body[data-mood="breach"] .world-bg__scrim {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(2, 8, 10, 0.02), rgba(2, 8, 10, 0.48) 52%, rgba(2, 5, 7, 0.9) 100%),
    radial-gradient(ellipse at 50% 72%, rgba(96, 224, 238, 0.12), transparent 52%),
    radial-gradient(ellipse at 78% 20%, rgba(255, 72, 54, 0.1), transparent 42%),
    linear-gradient(180deg, rgba(3, 8, 9, 0.74), transparent 30%, transparent 68%, rgba(2, 6, 7, 0.92));
}

.world-bg__scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.025) 0 1px,
    transparent 1px 4px
  );
  opacity: 0.5;
  mix-blend-mode: soft-light;
}

.world-bg__grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 0.6px, transparent 0.8px);
  background-size: 3px 3px;
  opacity: 0.1;
  mix-blend-mode: overlay;
}

.world-bg__vignette {
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 0 160px 30px rgba(0, 0, 0, 0.8),
    inset 0 0 440px 80px rgba(0, 0, 0, 0.42);
}

body[data-mood="unstable"] .world-bg__image--state {
  animation: worldGlitch 7s infinite steps(1);
}

@keyframes worldGlitch {
  0%, 91%, 100% { transform: scale(1.015) translate(0, 0); }
  92% { transform: scale(1.015) translate(-3px, 1px); }
  93% { transform: scale(1.015) translate(2px, -1px); }
  94% { transform: scale(1.015) translate(-1px, 0); }
}

body[data-mood="critical"] { --state-glow: rgba(255, 80, 62, 0.2); }
body[data-mood="unstable"] { --state-glow: rgba(176, 126, 255, 0.2); }
body[data-mood="breach"] { --state-glow: rgba(100, 226, 238, 0.2); }
body[data-mood="stable"] { --state-glow: rgba(121, 223, 143, 0.12); }

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
[role="button"]:focus-visible {
  outline: 1px solid var(--phosphor);
  outline-offset: 3px;
}

::selection {
  color: #071009;
  background: var(--phosphor);
}

.hidden,
[hidden] {
  display: none !important;
}

.noscript-warning {
  position: fixed;
  inset: 20px 20px auto;
  z-index: 999;
  padding: 14px 18px;
  border: 1px solid rgba(255, 100, 100, 0.42);
  color: var(--red-soft);
  background: rgba(15, 5, 5, 0.96);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
}

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------------ */
/* Atmosphere                                                          */
/* ------------------------------------------------------------------ */

.screen-fx {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  overflow: hidden;
}

.screen-fx__grid {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image:
    linear-gradient(rgba(141, 217, 157, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(141, 217, 157, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at 50% 40%, black 10%, transparent 78%);
}

.screen-fx__noise {
  position: absolute;
  inset: -60px;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: noiseWalk 0.35s steps(2) infinite;
}

.screen-fx__scanlines {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(183, 255, 188, 0.05) 3px,
    rgba(0, 0, 0, 0.13) 4px
  );
  mix-blend-mode: soft-light;
}

.screen-fx__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 38%, rgba(0, 0, 0, 0.52) 105%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.25), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.25));
}

body.is-glitching .app-shell {
  animation: screenShake 0.45s steps(2) both;
}

body.is-glitching .screen-fx__scanlines {
  opacity: 0.47;
  animation: scanKick 0.45s steps(1) both;
}

body.is-glitching .glitch-text::before {
  opacity: 0.9;
  transform: translate(-4px, 2px);
}

body.is-glitching .glitch-text::after {
  opacity: 0.9;
  transform: translate(4px, -2px);
}

/* ------------------------------------------------------------------ */
/* Layout                                                              */
/* ------------------------------------------------------------------ */

.app-shell {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 2100px;
  height: 100dvh;
  margin: 0 auto;
  padding: 14px 20px 14px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) 148px;
  gap: 12px;
}

.topbar {
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(360px, 1.15fr) auto;
  align-items: center;
  gap: 28px;
  padding: 0 4px 11px;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 84px;
  height: 1px;
  background: var(--phosphor);
  box-shadow: 0 0 12px rgba(184, 245, 176, 0.65);
}

.brand {
  min-width: 0;
}

.brand__title {
  position: relative;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 29px;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: 0.09em;
  color: var(--phosphor-bright);
  text-shadow: 0 0 26px rgba(143, 255, 151, 0.18);
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  clip-path: inset(42% 0 38% 0);
}

.glitch-text::before {
  color: var(--red);
  transform: translate(1px, 0);
  animation: glitchMicro 7s infinite steps(1);
}

.glitch-text::after {
  color: var(--cyan);
  transform: translate(-1px, 0);
  animation: glitchMicro 9s 0.7s infinite steps(1) reverse;
}

.brand__sub {
  margin-top: 8px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand__sub span {
  color: var(--dim);
}

.signal-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 9px rgba(121, 223, 143, 0.8);
  animation: signalPulse 2.4s ease-in-out infinite;
  vertical-align: 1px;
}

.dayline {
  min-width: 0;
}

.dayline__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.dayline__readout {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dayline__readout strong {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.threat-mini {
  padding-left: 12px;
  border-left: 1px solid var(--line);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.day-track {
  display: grid;
  grid-template-columns: repeat(var(--day-count, 10), minmax(2px, 1fr));
  gap: 4px;
  height: 9px;
}

.day-tick {
  position: relative;
  background: rgba(162, 221, 174, 0.08);
  border-top: 1px solid rgba(162, 221, 174, 0.13);
  transition: background 0.3s, box-shadow 0.3s;
}

.day-tick::after {
  content: "";
  position: absolute;
  inset: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.42);
}

.day-tick.is-done {
  background: rgba(121, 223, 143, 0.34);
  border-color: rgba(121, 223, 143, 0.3);
}

.day-tick.is-current {
  background: var(--phosphor);
  border-color: var(--phosphor);
  box-shadow: 0 0 14px rgba(184, 245, 176, 0.54);
  animation: tickPulse 2.8s ease-in-out infinite;
}

.day-tick.is-danger {
  background: rgba(255, 100, 100, 0.48);
  border-color: rgba(255, 100, 100, 0.5);
}

.schedule-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 7px;
  padding-top: 5px;
  border-top: 1px dashed rgba(184, 245, 176, 0.11);
  color: #9fb5a7;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.schedule-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.schedule-item b {
  color: var(--phosphor);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.schedule-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.schedule-dot.is-event {
  background: var(--amber);
  box-shadow: 0 0 7px rgba(255, 194, 102, 0.6);
}

.schedule-dot.is-upgrade {
  background: var(--cyan);
  box-shadow: 0 0 7px rgba(120, 220, 232, 0.6);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ap-hud {
  padding: 10px 12px 9px;
  border: 1px solid rgba(255, 194, 102, 0.28);
  background:
    linear-gradient(140deg, rgba(255, 194, 102, 0.075), transparent 48%),
    linear-gradient(180deg, rgba(13, 24, 17, 0.92), rgba(5, 10, 8, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 24px rgba(0, 0, 0, 0.22);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

.ap-hud__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.ap-hud .micro-label {
  color: var(--amber);
  font-size: 9.5px;
  letter-spacing: 0.08em;
}

.ap-hud .ap-blocks {
  margin-top: 8px;
}

.ap-hud .ap-block {
  width: 26px;
  height: 30px;
}

.ap-hud .ap-readout {
  min-width: 0;
  font-size: 23px;
  color: var(--phosphor-bright);
}

.ap-hud__note {
  margin-top: 7px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 8px;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.patch-bay__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  align-content: center;
  justify-content: normal;
  justify-items: stretch;
  gap: 14px;
}

.patch-bay__title {
  min-width: 0;
}

.patch-bay__head .bay-hint {
  justify-self: end;
}

.ap-hud--inline {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  clip-path: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: auto;
}

.ap-hud--inline .ap-hud__head {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.ap-hud--inline .micro-label {
  white-space: nowrap;
  color: #91ab99;
  font-size: 8.5px;
  letter-spacing: 0.06em;
}

.ap-hud--inline .ap-blocks {
  margin: 0;
  gap: 4px;
}

.ap-hud--inline .ap-block {
  width: 19px;
  height: 22px;
}

.ap-hud--inline .ap-readout {
  min-width: 46px;
  font-size: 23px;
  color: var(--phosphor-bright);
  text-align: right;
  text-shadow: 0 0 16px rgba(184, 245, 176, 0.25);
}

.ap-hud--inline .ap-hud__note {
  display: none;
}

@media (max-width: 760px) {
  .patch-bay__head {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 5px;
  }

  .patch-bay__head .ap-hud--inline {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
  }
}

.trace-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border-left: 2px solid var(--amber);
  background: linear-gradient(90deg, rgba(255, 194, 102, 0.08), transparent 78%);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.05em;
}

.trace-line[hidden] {
  display: none;
}

.trace-line b {
  color: #e8d5ad;
  font-size: 9.5px;
  font-weight: 600;
  text-align: right;
}

.pact-line {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 3px 8px;
  padding: 7px 9px;
  border-left: 2px solid var(--violet);
  background: linear-gradient(90deg, rgba(178, 140, 255, 0.1), transparent 80%);
  color: #c9b3f2;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.05em;
}

.pact-line[hidden] {
  display: none;
}

.pact-line b {
  color: #eadfff;
  font-size: 9.5px;
  font-weight: 600;
  text-align: right;
}

.pact-line p {
  grid-column: 1 / -1;
  margin-top: 2px;
  color: #a994c6;
  font-family: var(--font-sans);
  font-size: 8.5px;
  line-height: 1.45;
  letter-spacing: 0;
}

.visibility-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  padding: 7px 9px;
  border-left: 2px solid var(--red-soft);
  background: linear-gradient(90deg, rgba(255, 100, 100, 0.09), transparent 82%);
  color: var(--red-soft);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.05em;
}

.visibility-line[hidden] {
  display: none;
}

.visibility-line b {
  color: #d8b5ae;
  font-size: 8.5px;
  font-weight: 500;
  line-height: 1.45;
  text-align: right;
}

.challenge-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-left: 2px solid var(--red-soft);
  background:
    linear-gradient(90deg, rgba(255, 100, 100, 0.075), transparent 80%),
    rgba(8, 15, 11, 0.55);
}

.challenge-box[hidden] {
  display: none;
}

.challenge-box__kicker {
  color: var(--red-soft);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.08em;
}

.challenge-box strong {
  color: #f2d8d4;
  font-size: 11.5px;
  font-weight: 700;
}

.challenge-box p {
  color: #c5b3b0;
  font-size: 9.5px;
  line-height: 1.5;
}

.challenge-box__reward {
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.03em;
}

.challenge-box em {
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-style: normal;
  letter-spacing: 0.08em;
}

.challenge-box.is-cleared {
  border-left-color: var(--phosphor);
  background: linear-gradient(90deg, rgba(184, 245, 176, 0.08), transparent 80%);
}

.challenge-box.is-cleared em {
  color: var(--phosphor);
}

.challenge-box.is-failed {
  opacity: 0.8;
}

.challenge-box.is-failed em {
  color: var(--red);
}

.ap-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 3px;
}

.ap-blocks {
  display: flex;
  gap: 5px;
}

.ap-block {
  width: 24px;
  height: 34px;
  border: 1px solid rgba(184, 245, 176, 0.28);
  background: rgba(184, 245, 176, 0.05);
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%);
}

.ap-readout {
  min-width: 52px;
  color: var(--phosphor);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ap-panel .micro-label {
  font-size: 10px;
  letter-spacing: 0.1em;
}

.ap-block.is-filled {
  background: linear-gradient(to top, rgba(184, 245, 176, 0.44), var(--phosphor));
  border-color: var(--phosphor);
  box-shadow: 0 0 12px rgba(184, 245, 176, 0.35);
}

.ap-block.is-suppressed {
  border-style: dashed;
  border-color: rgba(255, 100, 100, 0.32);
  background:
    linear-gradient(45deg, transparent 44%, rgba(255, 100, 100, 0.4) 45%, rgba(255, 100, 100, 0.4) 55%, transparent 56%),
    rgba(255, 100, 100, 0.03);
  opacity: 0.7;
}

.icon-btn {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(8, 17, 13, 0.65);
  color: var(--muted);
  cursor: pointer;
  transition: 0.2s var(--ease);
}

.icon-btn:hover {
  color: var(--phosphor);
  border-color: var(--line-strong);
  background: rgba(184, 245, 176, 0.06);
}

.icon-btn.is-muted {
  color: var(--dim);
}

.layout {
  min-height: 0;
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr) 382px;
  gap: 12px;
}

.panel {
  position: relative;
  min-height: 0;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(184, 245, 176, 0.025), transparent 26%),
    linear-gradient(180deg, rgba(8, 17, 13, 0.9), rgba(4, 8, 6, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018), 0 16px 40px rgba(0, 0, 0, 0.15);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}

.panel::before,
.panel::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
  z-index: 2;
}

.panel::before {
  top: 0;
  left: 0;
  border-top: 1px solid rgba(184, 245, 176, 0.42);
  border-left: 1px solid rgba(184, 245, 176, 0.42);
}

.panel::after {
  right: 0;
  bottom: 0;
  border-right: 1px solid rgba(184, 245, 176, 0.3);
  border-bottom: 1px solid rgba(184, 245, 176, 0.3);
}

.micro-label {
  display: block;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h2 {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

h3 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.panel-heading,
.section-head,
.board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.panel-heading h2,
.section-head h2,
.section-head h3,
.board-head h2 {
  margin-top: 3px;
}

/* ------------------------------------------------------------------ */
/* Left column                                                         */
/* ------------------------------------------------------------------ */

.vitals-panel {
  padding: 15px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(184, 245, 176, 0.25) transparent;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 20px;
  padding: 0 7px;
  border: 1px solid rgba(121, 223, 143, 0.3);
  color: var(--green);
  background: rgba(121, 223, 143, 0.06);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
}

.status-chip.is-critical {
  border-color: rgba(255, 100, 100, 0.4);
  color: var(--red);
  background: rgba(255, 100, 100, 0.07);
  animation: blink 1.6s steps(1) infinite;
}

.resources {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.resource-card {
  --accent: var(--phosphor);
  position: relative;
  padding: 9px 10px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  background:
    radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 48%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 4px),
    linear-gradient(100deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 66%),
    rgba(6, 13, 9, 0.6);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--accent) 11%, transparent),
    0 8px 18px rgba(0, 0, 0, 0.16);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}

.resource-card::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  opacity: 0.7;
}

.resource-card[data-resource="power"] { --accent: var(--amber); }
.resource-card[data-resource="food"] { --accent: #a9e680; }
.resource-card[data-resource="defense"] { --accent: var(--cyan); }
.resource-card[data-resource="stability"] { --accent: var(--violet); }

.resource-card.is-critical {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
}

.resource-card.is-obscured {
  border-color: rgba(160, 185, 170, 0.28);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px),
    linear-gradient(100deg, rgba(140, 165, 150, 0.08), transparent 70%);
  animation: obscuredFlicker 2.8s steps(2) infinite;
}

.resource-card.is-obscured::after {
  content: "SIGNAL JAMMED";
  position: absolute;
  right: 9px;
  bottom: 7px;
  color: rgba(178, 201, 184, 0.42);
  font-family: var(--font-mono);
  font-size: 6px;
  letter-spacing: 0.12em;
  pointer-events: none;
}

.resource-card.is-obscured .resource-value {
  color: #a9c0b1;
  text-shadow: 2px 0 rgba(255, 80, 80, 0.25), -2px 0 rgba(88, 214, 255, 0.22);
}

.resource-card.is-obscured .segment {
  background: repeating-linear-gradient(90deg, rgba(178, 201, 184, 0.12) 0 3px, transparent 3px 6px);
}

.resource-card.is-obscured .resource-icon {
  filter: grayscale(0.6);
  opacity: 0.7;
}

@keyframes obscuredFlicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: 0.72; }
  94% { opacity: 1; }
  96% { opacity: 0.82; }
}

.resource-card.is-critical .resource-value {
  animation: criticalNumber 1.4s steps(2) infinite;
}

.resource-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.resource-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
    color-mix(in srgb, var(--accent) 6%, transparent);
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--accent) 8%, transparent);
}

.resource-icon .icon {
  width: 14px;
  height: 14px;
}

.resource-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.resource-name span {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
}

.resource-value {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 26%, transparent);
}

.resource-value small {
  margin-left: 3px;
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: 0;
}

.segment-bar {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  margin-top: 7px;
}

.segment {
  height: 5px;
  background: rgba(184, 245, 176, 0.075);
  transform: skewX(-16deg);
}

.segment.is-filled {
  background: var(--accent);
  box-shadow: 0 0 7px color-mix(in srgb, var(--accent) 28%, transparent);
}

.resource-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

.resource-meta span:first-child {
  color: #b9cbbd;
  font-weight: 500;
}

.resource-card.bump-up {
  animation: resourceUp 0.55s var(--ease);
}

.resource-card.bump-down {
  animation: resourceDown 0.55s var(--ease);
}

.threat-card,
.objective-card,
.mother-card {
  border: 1px solid var(--line);
  background: rgba(11, 22, 16, 0.5);
}

.threat-card {
  padding: 10px 11px 9px;
}

.threat-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.threat-value {
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1;
}

.threat-body {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.threat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 10px;
}

.threat-row strong {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.threat-breach {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 7px;
  border: 1px solid rgba(121, 223, 143, 0.17);
  color: var(--green);
  background: rgba(121, 223, 143, 0.05);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.08em;
}

.threat-breach.is-danger {
  border-color: rgba(255, 100, 100, 0.3);
  color: var(--red-soft);
  background: rgba(255, 100, 100, 0.07);
}

.threat-note {
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px dashed rgba(184, 245, 176, 0.13);
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.5;
}

.threat-pips {
  display: inline-flex;
  gap: 3px;
  margin-left: auto;
  margin-right: 7px;
}

.threat-pips i {
  display: block;
  width: 9px;
  height: 5px;
  background: rgba(255, 194, 102, 0.13);
}

.threat-pips i.on {
  background: var(--amber);
  box-shadow: 0 0 6px rgba(255, 194, 102, 0.4);
}

.objective-card {
  padding: 10px 11px;
}

.objective-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.objective-card__top strong {
  color: var(--phosphor);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.objective-card p {
  margin-top: 7px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.65;
}

.objective-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px dashed rgba(184, 245, 176, 0.12);
  color: var(--dim);
  font-size: 9px;
}

.objective-line span:last-child {
  color: var(--ink);
  text-align: right;
}

.mother-card {
  position: relative;
  padding: 10px 11px;
  overflow: hidden;
  margin-top: auto;
}

.mother-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(199, 163, 255, 0.5), transparent);
}

.mother-card__head {
  color: var(--violet);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.11em;
}

.mother-card p {
  margin: 7px 0 6px;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.65;
}

.mother-card__status {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.1em;
}

/* ------------------------------------------------------------------ */
/* Center board                                                        */
/* ------------------------------------------------------------------ */

.board {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.board-head {
  align-items: flex-end;
  padding: 2px 3px 0;
}

.board-head h2 {
  font-size: 20px;
}

.rule-load {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-items: end;
  gap: 2px 8px;
}

.rule-load .micro-label {
  grid-column: 1;
}

.rule-load__bars {
  display: flex;
  gap: 3px;
  grid-column: 1;
}

.rule-load__bars i {
  width: 14px;
  height: 4px;
  background: rgba(255, 100, 100, 0.14);
}

.rule-load__bars i.on {
  background: var(--red);
  box-shadow: 0 0 7px rgba(255, 100, 100, 0.4);
}

.rule-load__text {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: var(--red-soft);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.fault-list {
  flex: 1 1 auto;
  min-height: 210px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-right: 3px;
  scrollbar-width: thin;
  scrollbar-color: rgba(184, 245, 176, 0.25) transparent;
}

.fault-list::-webkit-scrollbar,
.vitals-panel::-webkit-scrollbar,
.hand::-webkit-scrollbar,
.log::-webkit-scrollbar,
.help-grid::-webkit-scrollbar {
  width: 4px;
}

.fault-list::-webkit-scrollbar-thumb,
.vitals-panel::-webkit-scrollbar-thumb,
.hand::-webkit-scrollbar-thumb,
.log::-webkit-scrollbar-thumb,
.help-grid::-webkit-scrollbar-thumb {
  background: rgba(184, 245, 176, 0.22);
}

.fault-card {
  --tone: var(--red);
  position: relative;
  padding: 12px 14px 10px;
  border: 1px solid color-mix(in srgb, var(--tone) 28%, transparent);
  background:
    radial-gradient(ellipse at 92% 0%, color-mix(in srgb, var(--tone) 13%, transparent), transparent 44%),
    linear-gradient(100deg, color-mix(in srgb, var(--tone) 7%, transparent), transparent 52%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(17, 15, 13, 0.9), rgba(7, 10, 8, 0.94));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--tone) 12%, transparent),
    0 8px 20px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: border-color 0.2s, transform 0.2s var(--ease), box-shadow 0.2s;
  overflow: hidden;
  flex: 0 0 auto;
}

.fault-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.2;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 9px, rgba(255, 255, 255, 0.03) 10px);
  mask-image: linear-gradient(90deg, black, transparent 60%);
}

.fault-card:hover:not(.is-covered) {
  transform: translateX(2px);
  border-color: rgba(255, 100, 100, 0.44);
}

.fault-card.is-selected {
  border-color: var(--phosphor);
  box-shadow: 0 0 0 1px rgba(184, 245, 176, 0.14), 0 0 30px rgba(184, 245, 176, 0.06);
}

.fault-card.is-selected::before {
  content: "TARGET LOCK";
  position: absolute;
  top: 0;
  right: 0;
  padding: 3px 8px;
  color: #071009;
  background: var(--phosphor);
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.11em;
  z-index: 3;
}

/* v4.0.32 — 故障卡片色调统一取 --tone-* 单一色源（与房间 --room-a 的 rgb 一致）。
   --fault-accent 此前从未定义，导致 v3.0.2 的霓虹外壳 color-mix 全部「计算期无效」
   退回 currentColor；现在让它真正跟着 tone 走。 */
.fault-card { --fault-accent: var(--tone); }
.fault-card.tone-power { --tone: var(--tone-power); }
.fault-card.tone-food { --tone: var(--tone-food); }
.fault-card.tone-defense { --tone: var(--tone-defense); }
.fault-card.tone-core { --tone: var(--tone-core); }
.fault-card.tone-stability { --tone: var(--tone-stability); }

.fault-card__top {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
}

.fault-card__top .fault-code {
  color: color-mix(in srgb, var(--tone) 78%, white);
}

.fault-card__top .fault-sev {
  margin-left: auto;
  color: color-mix(in srgb, var(--tone) 80%, white);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sev-bars {
  display: inline-flex;
  gap: 2px;
}

.sev-bars i {
  width: 3px;
  height: 8px;
  background: rgba(255, 255, 255, 0.12);
}

.sev-bars i.on {
  background: var(--tone);
}

.fault-card__main {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 8px;
}

.fault-glyph {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--tone);
  border: 1px solid color-mix(in srgb, var(--tone) 28%, transparent);
  background: color-mix(in srgb, var(--tone) 5%, transparent);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
}

.fault-glyph .icon {
  width: 20px;
  height: 20px;
}

.fault-card__title {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}

.fault-card__title h3 {
  font-size: 17px;
  letter-spacing: 0.045em;
}

.fault-card__title span {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.12em;
}

.fault-rule {
  margin-top: 4px;
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.55;
}

.fault-rule b {
  color: var(--tone);
  font-weight: 700;
}

.fault-card__foot {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed rgba(184, 245, 176, 0.11);
}

.effect-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 19px;
  padding: 2px 6px;
  border: 1px solid rgba(184, 245, 176, 0.11);
  color: var(--muted);
  background: rgba(184, 245, 176, 0.03);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.effect-chip.is-negative {
  color: var(--red-soft);
  border-color: rgba(255, 100, 100, 0.16);
  background: rgba(255, 100, 100, 0.035);
}

.effect-chip.is-positive {
  color: var(--green);
  border-color: rgba(121, 223, 143, 0.17);
  background: rgba(121, 223, 143, 0.035);
}

.fault-tag {
  margin-left: auto;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 0.1em;
}

.fault-card.is-covered {
  opacity: 0.58;
  cursor: default;
  border-color: rgba(121, 223, 143, 0.22);
}

.fault-card.is-covered .fault-rule {
  text-decoration: line-through;
  text-decoration-color: rgba(121, 223, 143, 0.7);
}

.cover-stamp {
  position: absolute;
  right: 15px;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%) rotate(-5deg);
  padding: 5px 9px;
  border: 1px solid rgba(121, 223, 143, 0.55);
  color: var(--green);
  background: rgba(5, 15, 9, 0.88);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  box-shadow: 0 0 20px rgba(121, 223, 143, 0.08);
  pointer-events: none;
}

.cover-stamp small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 7px;
  font-weight: 400;
  letter-spacing: 0.03em;
}

.fault-card.is-fresh {
  animation: cardIn 0.55s var(--ease) both;
}

.fault-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px dashed rgba(184, 245, 176, 0.14);
  background: rgba(184, 245, 176, 0.018);
}

.fault-empty strong {
  display: block;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
}

.fault-empty span {
  display: block;
  margin-top: 6px;
  color: var(--dim);
  font-size: 10px;
}

/* Patch bay --------------------------------------------------------- */

.patch-bay {
  flex: 0 0 auto;
  padding: 10px 12px 11px;
  border: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(120, 220, 232, 0.03), transparent 50%),
    rgba(6, 13, 12, 0.7);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

.section-head {
  align-items: flex-end;
}

.section-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.count-badge {
  display: inline-flex;
  align-items: center;
  height: 17px;
  padding: 0 5px;
  border: 1px solid rgba(184, 245, 176, 0.2);
  color: var(--phosphor);
  background: rgba(184, 245, 176, 0.045);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.05em;
  vertical-align: 1px;
}

.bay-hint {
  padding: 3px 7px;
  border: 1px solid rgba(184, 245, 176, 0.14);
  background: rgba(184, 245, 176, 0.035);
  color: #b4cabb;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
  white-space: nowrap;
}

.patch-bay__slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}

.bay-patch {
  --card-accent: var(--cyan);
  position: relative;
  min-height: 102px;
  padding: 8px 9px 7px;
  border: 1px solid color-mix(in srgb, var(--card-accent) 28%, transparent);
  background:
    radial-gradient(ellipse at 10% 0%, color-mix(in srgb, var(--card-accent) 16%, transparent), transparent 48%),
    linear-gradient(135deg, color-mix(in srgb, var(--card-accent) 8%, transparent), transparent 54%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px),
    rgba(7, 18, 17, 0.78);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--card-accent) 12%, transparent);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
  overflow: hidden;
  animation: patchIn 0.4s var(--ease) both;
}

.bay-patch[data-tag="PWR"] { --card-accent: var(--amber); }
.bay-patch[data-tag="RAT"] { --card-accent: #a9e680; }
.bay-patch[data-tag="DEF"] { --card-accent: var(--cyan); }
.bay-patch[data-tag="SYS"] { --card-accent: #b89cff; }
.bay-patch[data-tag="CORE"] { --card-accent: #d6a5ff; }
.bay-patch[data-tag="FAULT"] { --card-accent: var(--red); }

.bay-patch::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--card-accent), transparent 70%);
  opacity: 0.55;
}

.bay-patch.is-expiring {
  border-color: rgba(255, 194, 102, 0.34);
}

.bay-patch.is-undoable {
  border-color: rgba(120, 220, 232, 0.78);
  box-shadow: 0 0 0 1px rgba(120, 220, 232, 0.2), 0 0 20px rgba(120, 220, 232, 0.08);
  cursor: pointer;
}

.bay-patch.is-undoable::before {
  background: linear-gradient(90deg, var(--cyan), transparent 70%);
  opacity: 1;
}

.bay-patch.is-expiring::before {
  background: linear-gradient(90deg, var(--amber), transparent 70%);
}

.bay-patch.is-overload {
  border-color: rgba(255, 100, 100, 0.46);
  background:
    repeating-linear-gradient(135deg, rgba(255, 100, 100, 0.035) 0 5px, transparent 5px 10px),
    linear-gradient(135deg, rgba(255, 100, 100, 0.075), transparent 54%),
    rgba(20, 8, 8, 0.72);
}

.bay-patch.is-overload::before {
  background: linear-gradient(90deg, var(--red), transparent 70%);
}

.bay-patch.is-overload .bay-timer,
.bay-patch.is-overload .bay-patch__top span:nth-child(2) {
  color: var(--red-soft);
}

.bay-patch__top {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 0.06em;
}

.bay-undo-tag {
  color: var(--cyan);
  font-weight: 600;
  white-space: nowrap;
}

.bay-patch__top .bay-code {
  color: var(--cyan);
}

.bay-timer {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
}

.bay-timer .icon {
  width: 12px;
  height: 12px;
}

.bay-patch h4 {
  margin: 5px 0 3px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
}

.bay-patch__effect {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-height: 17px;
}

.bay-patch__effect .effect-chip {
  min-height: 16px;
  padding: 1px 4px;
  font-size: 7px;
}

.bay-patch__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin-top: 7px;
  padding-top: 5px;
  border-top: 1px dashed rgba(184, 245, 176, 0.1);
}

.life-dots {
  display: flex;
  gap: 2px;
}

.life-dots i {
  width: 10px;
  height: 3px;
  background: rgba(120, 220, 232, 0.14);
}

.life-dots i.on {
  background: var(--cyan);
  box-shadow: 0 0 5px rgba(120, 220, 232, 0.35);
}

.detach-btn {
  border: 1px solid rgba(255, 194, 102, 0.28);
  padding: 4px 6px;
  color: var(--amber);
  background: rgba(255, 194, 102, 0.045);
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  transition: 0.2s var(--ease);
  white-space: nowrap;
}

.detach-btn:hover:not(:disabled) {
  border-color: var(--red-soft);
  color: var(--red-soft);
  background: rgba(255, 100, 100, 0.06);
}

.detach-btn.is-undo {
  border-color: rgba(184, 245, 176, 0.38);
  color: var(--phosphor);
  background: rgba(184, 245, 176, 0.06);
}

.detach-btn.is-undo:hover:not(:disabled) {
  border-color: var(--phosphor);
  color: var(--phosphor-bright);
  background: rgba(184, 245, 176, 0.1);
}

.detach-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.bay-empty {
  min-height: 102px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(184, 245, 176, 0.1);
  color: var(--dim);
  background: rgba(184, 245, 176, 0.012);
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 0.1em;
  text-align: center;
}

.bay-empty span {
  opacity: 0.55;
}

.bay-empty.is-overload {
  border-color: rgba(255, 100, 100, 0.16);
  color: rgba(255, 155, 139, 0.55);
  background:
    repeating-linear-gradient(135deg, rgba(255, 100, 100, 0.025) 0 5px, transparent 5px 10px),
    rgba(24, 8, 8, 0.2);
}

.rogue-queue {
  flex: 0 0 auto;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255, 100, 100, 0.24);
  background:
    repeating-linear-gradient(135deg, rgba(255, 100, 100, 0.035) 0 6px, transparent 6px 12px),
    rgba(24, 8, 8, 0.38);
  color: var(--red-soft);
  font-family: var(--font-mono);
  font-size: 8px;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.rogue-queue strong {
  color: var(--red);
  font-size: 8px;
}

.rogue-queue span {
  color: var(--muted);
}

/* ------------------------------------------------------------------ */
/* Right column                                                        */
/* ------------------------------------------------------------------ */

.hand-panel {
  padding: 14px 13px 13px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  overflow: hidden;
}

.hand-head {
  flex: 0 0 auto;
}

.deck-mark {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  transform: rotate(90deg) translateY(2px);
  transform-origin: right center;
}

.deck-counts {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 8px;
  border: 1px solid rgba(184, 245, 176, 0.15);
  background: rgba(184, 245, 176, 0.025);
  color: #9fb5a7;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.deck-counts span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.deck-counts b {
  color: var(--phosphor);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.hand {
  flex: 1 1 auto;
  min-height: 220px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 7px;
  overflow-y: auto;
  padding: 1px 2px 3px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(184, 245, 176, 0.24) transparent;
}

.patch-card {
  --card-accent: var(--cyan);
  position: relative;
  min-height: 146px;
  padding: 8px 9px 7px;
  border: 1px solid color-mix(in srgb, var(--card-accent) 24%, transparent);
  background:
    radial-gradient(ellipse at 14% 0%, color-mix(in srgb, var(--card-accent) 15%, transparent), transparent 44%),
    linear-gradient(145deg, color-mix(in srgb, var(--card-accent) 7%, transparent), transparent 48%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(9, 23, 19, 0.94), rgba(5, 11, 9, 0.95));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--card-accent) 12%, transparent),
    0 8px 20px rgba(0, 0, 0, 0.24);
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition: border-color 0.2s, transform 0.2s var(--ease), background 0.2s, box-shadow 0.2s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  user-select: none;
}

.patch-card[data-tag="PWR"] { --card-accent: var(--amber); }
.patch-card[data-tag="RAT"] { --card-accent: #a9e680; }
.patch-card[data-tag="DEF"] { --card-accent: var(--cyan); }
.patch-card[data-tag="SYS"] { --card-accent: #b89cff; }
.patch-card[data-tag="CORE"] { --card-accent: #d6a5ff; }
.patch-card[data-tag="FAULT"] { --card-accent: var(--red); }

.patch-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--card-accent) 70%, transparent), transparent);
  opacity: 0.75;
  pointer-events: none;
}

.patch-card::after {
  content: "";
  position: absolute;
  right: -18px;
  top: 40%;
  width: 66px;
  height: 66px;
  border: 1px solid rgba(120, 220, 232, 0.07);
  transform: rotate(45deg);
  pointer-events: none;
}

.patch-card:hover {
  border-color: rgba(184, 245, 176, 0.38);
  transform: translateY(-2px);
}

.patch-card.is-playable {
  border-color: rgba(184, 245, 176, 0.28);
  box-shadow: 0 0 22px rgba(184, 245, 176, 0.035);
}

.patch-card.is-playable:hover {
  border-color: var(--phosphor);
  background:
    linear-gradient(145deg, rgba(184, 245, 176, 0.09), transparent 50%),
    linear-gradient(180deg, rgba(8, 22, 16, 0.95), rgba(5, 11, 9, 0.92));
}

.patch-card.is-fault {
  --card-accent: var(--red);
  border-color: rgba(255, 100, 100, 0.31);
  background:
    repeating-linear-gradient(135deg, rgba(255, 100, 100, 0.028) 0 5px, transparent 5px 10px),
    linear-gradient(145deg, rgba(255, 100, 100, 0.1), transparent 48%),
    linear-gradient(180deg, rgba(22, 10, 9, 0.92), rgba(10, 7, 6, 0.94));
}

.patch-card.is-fault .patch-card__icon {
  color: var(--red);
  border-color: rgba(255, 100, 100, 0.32);
  background: rgba(255, 100, 100, 0.055);
}

.patch-card.is-fault.is-playable {
  border-color: rgba(255, 100, 100, 0.55);
}

.patch-card.is-fault.is-playable:hover {
  border-color: var(--red-soft);
  box-shadow: 0 0 25px rgba(255, 100, 100, 0.07);
  background:
    repeating-linear-gradient(135deg, rgba(255, 100, 100, 0.045) 0 5px, transparent 5px 10px),
    linear-gradient(145deg, rgba(255, 100, 100, 0.14), transparent 52%),
    linear-gradient(180deg, rgba(24, 10, 9, 0.96), rgba(10, 7, 6, 0.95));
}

.patch-card.is-fault .cover-cta {
  color: var(--red-soft);
}

.patch-card.is-locked {
  opacity: 0.55;
  cursor: default;
}

.patch-card.is-locked:hover {
  transform: none;
  border-color: rgba(120, 220, 232, 0.18);
}

.patch-card__top {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.06em;
}

.patch-card__top .patch-code {
  color: color-mix(in srgb, var(--card-accent) 80%, white);
}

.cost-badge {
  margin-left: auto;
  min-width: 25px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid rgba(255, 194, 102, 0.27);
  color: var(--amber);
  background: rgba(255, 194, 102, 0.055);
  font-family: var(--font-mono);
  font-size: 8px;
  line-height: 1;
}

.cost-badge.is-modified {
  border-color: rgba(255, 100, 100, 0.36);
  color: var(--red-soft);
}

.patch-card__title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 5px 0 4px;
}

.patch-card__icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  margin-top: 0;
  display: grid;
  place-items: center;
  color: var(--card-accent);
  border: 1px solid color-mix(in srgb, var(--card-accent) 25%, transparent);
  background: color-mix(in srgb, var(--card-accent) 5%, transparent);
}

.patch-card__icon .icon {
  width: 15px;
  height: 15px;
}

.patch-card h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.02em;
}

.patch-card__effect {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 2px;
  min-height: 0;
}

.patch-card__effect .effect-chip {
  min-height: 20px;
  padding: 2px 5px;
  font-size: 10.5px;
}

.patch-card.is-dense .patch-card__title-row {
  margin: 3px 0 2px;
}

.patch-card.is-dense .patch-card__effect {
  gap: 1px;
}

.patch-card.is-dense .patch-card__effect .effect-chip {
  min-height: 17px;
  padding: 1px 4px;
  font-size: 9.5px;
  line-height: 1.25;
}

.patch-card.is-dense .patch-card__foot {
  padding-top: 4px;
}

.patch-card.is-concealed .effect-chip.is-negative,
.reward-option.is-concealed .effect-chip.is-negative,
.bay-patch.is-concealed .effect-chip.is-negative {
  position: relative;
  overflow: hidden;
  color: transparent !important;
  text-shadow: none;
  background:
    repeating-linear-gradient(135deg, rgba(255, 80, 80, 0.14) 0 4px, rgba(20, 10, 10, 0.5) 4px 8px);
  border-color: rgba(255, 100, 100, 0.18);
  animation: concealedGlitch 2.4s steps(2) infinite;
}

.patch-card.is-concealed .effect-chip.is-negative::after,
.reward-option.is-concealed .effect-chip.is-negative::after,
.bay-patch.is-concealed .effect-chip.is-negative::after {
  content: "NEGATIVE ?";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 160, 150, 0.72);
  font-size: 7px;
  letter-spacing: 0.04em;
}

@keyframes concealedGlitch {
  0%, 94%, 100% { transform: translateX(0); }
  95% { transform: translateX(-1px); }
  96% { transform: translateX(1px); }
}

.patch-card__foot {
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px dashed rgba(184, 245, 176, 0.1);
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.02em;
}

.patch-card__life {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--amber);
}

.patch-card__life .icon {
  width: 15px;
  height: 15px;
  color: var(--amber);
}

.patch-card__life b {
  color: var(--phosphor-bright);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.patch-card__life .life-unit,
.reward-life .life-unit {
  color: #d8ead9;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
}

.patch-card__fault-label {
  color: var(--red-soft);
  font-size: 8.5px;
  letter-spacing: 0.02em;
}

.patch-card__foot .cover-cta {
  color: var(--phosphor);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.patch-card.is-locked .patch-card__foot .cover-cta {
  color: var(--dim);
}

.hand-empty {
  grid-column: 1 / -1;
  min-height: 120px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(184, 245, 176, 0.12);
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 9px;
  text-align: center;
}

.maintenance {
  flex: 0 0 auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.maintenance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
}

.maint-btn {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid rgba(184, 245, 176, 0.13);
  background: rgba(184, 245, 176, 0.025);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: 0.2s var(--ease);
  position: relative;
  overflow: hidden;
}

.maint-btn:hover:not(:disabled) {
  border-color: rgba(184, 245, 176, 0.35);
  background: rgba(184, 245, 176, 0.06);
}

.maint-btn .icon {
  width: 16px;
  height: 16px;
  color: var(--maint-color, var(--phosphor));
}

.maint-btn__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.maint-btn strong {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}

.maint-btn small {
  color: #a9c0b1;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.maint-btn .ap-cost {
  margin-left: auto;
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 8.5px;
  align-self: flex-start;
}

.maint-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.maint-btn.is-used {
  opacity: 0.36;
  background: rgba(0, 0, 0, 0.15);
}

.maint-btn.is-used::after {
  content: "USED";
  position: absolute;
  right: 5px;
  bottom: 3px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 0.1em;
}

.maint-btn.is-full::after {
  content: "FULL";
  position: absolute;
  right: 5px;
  bottom: 3px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 6px;
  letter-spacing: 0.12em;
}

.end-day-btn {
  flex: 0 0 auto;
  position: relative;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(184, 245, 176, 0.48);
  background:
    linear-gradient(90deg, rgba(184, 245, 176, 0.12), transparent 55%),
    rgba(11, 23, 15, 0.78);
  color: var(--phosphor-bright);
  text-align: left;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: 0.2s var(--ease);
  overflow: hidden;
}

.end-day-btn__hazard {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: repeating-linear-gradient(
    -45deg,
    var(--phosphor) 0 4px,
    rgba(184, 245, 176, 0.08) 4px 8px
  );
  opacity: 0.8;
}

.end-day-btn:hover:not(:disabled) {
  border-color: var(--phosphor);
  background:
    linear-gradient(90deg, rgba(184, 245, 176, 0.18), transparent 60%),
    rgba(13, 28, 18, 0.9);
  box-shadow: 0 0 28px rgba(184, 245, 176, 0.08);
}

.end-day-btn:disabled {
  opacity: 0.45;
  cursor: wait;
}

.end-day-btn__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 3px;
}

.end-day-btn__title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.end-day-btn__sub {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 0.05em;
}

.end-day-btn__arrow {
  margin-left: auto;
  color: var(--phosphor);
  font-family: var(--font-mono);
  font-size: 24px;
  line-height: 1;
  transition: transform 0.2s var(--ease);
}

.end-day-btn:hover:not(:disabled) .end-day-btn__arrow {
  transform: translateX(4px);
}

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border: 1px solid rgba(184, 245, 176, 0.2);
  border-bottom-color: rgba(184, 245, 176, 0.35);
  color: var(--muted);
  background: rgba(0, 0, 0, 0.22);
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 400;
}

/* ------------------------------------------------------------------ */
/* Log                                                                 */
/* ------------------------------------------------------------------ */

.log-panel {
  min-height: 0;
  display: grid;
  grid-template-columns: 143px minmax(0, 1fr);
  border: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(184, 245, 176, 0.02), transparent 30%),
    rgba(5, 11, 8, 0.7);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

.log-head {
  padding: 12px 13px;
  border-right: 1px solid rgba(184, 245, 176, 0.16);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  background:
    linear-gradient(180deg, rgba(184, 245, 176, 0.06), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 4px),
    rgba(8, 17, 13, 0.62);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.3);
}

.log-head h2 {
  font-size: 15px;
  letter-spacing: 0.06em;
}

.rec {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--red-soft);
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 0.1em;
}

.rec i {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
  animation: blink 1.2s steps(1) infinite;
}

.log {
  min-height: 0;
  overflow-y: auto;
  padding: 10px 14px 9px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.55;
  background:
    linear-gradient(90deg, rgba(184, 245, 176, 0.035), transparent 18%),
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(184, 245, 176, 0.035) 25px 26px);
  scrollbar-width: thin;
  scrollbar-color: rgba(184, 245, 176, 0.24) transparent;
}

.log-line {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  padding: 3px 5px;
  color: var(--muted);
  border-bottom: 1px solid rgba(184, 245, 176, 0.035);
}

.log-line:nth-child(even) {
  background: rgba(184, 245, 176, 0.018);
}

.log-line.is-new {
  animation: logLine 0.35s var(--ease) both;
}

.log-day {
  color: var(--dim);
  font-size: 8.5px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.log-text {
  color: inherit;
  overflow-wrap: anywhere;
}

.log-line.tone-info .log-text { color: #b9cbbd; }
.log-line.tone-good .log-text { color: var(--green); }
.log-line.tone-warn .log-text { color: var(--amber); }
.log-line.tone-danger .log-text { color: var(--red-soft); }
.log-line.tone-system .log-text { color: var(--muted); }
.log-line.tone-core .log-text { color: var(--tone-core); }
.log-line.tone-flavor .log-text {
  color: #cbb9e8;
  font-style: italic;
  letter-spacing: 0.01em;
}
.log-line.tone-flavor .log-day {
  color: #8d76a8;
}
/* v4.0.32 — 日志行同一色源，和故障卡/房间保持同一套 tone 颜色 */
.log-line.tone-power .log-text { color: var(--tone-power); }
.log-line.tone-food .log-text { color: var(--tone-food); }
.log-line.tone-defense .log-text { color: var(--tone-defense); }
.log-line.tone-stability .log-text { color: var(--tone-stability); }

.log-empty {
  color: var(--dim);
  font-size: 9px;
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------------ */
/* Overlays                                                            */
/* ------------------------------------------------------------------ */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 30% 10%, rgba(57, 105, 62, 0.22), transparent 44%),
    rgba(2, 5, 3, 0.83);
  backdrop-filter: blur(10px) saturate(0.8);
  -webkit-backdrop-filter: blur(10px) saturate(0.8);
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}

.overlay.is-closing {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-overlay {
  z-index: 250;
  padding: 34px;
  background:
    linear-gradient(90deg, rgba(3, 7, 5, 0.84), rgba(3, 7, 5, 0.55) 55%, rgba(3, 7, 5, 0.84)),
    radial-gradient(ellipse at 28% 24%, rgba(94, 149, 86, 0.18), transparent 42%),
    rgba(2, 5, 3, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.intro-shell {
  width: min(1180px, 96vw);
  display: grid;
  grid-template-columns: minmax(0, 1.17fr) minmax(340px, 0.83fr);
  gap: 54px;
  align-items: center;
}

.intro-hero {
  padding: 12px 0;
  min-width: 0;
}

.intro-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.11em;
  line-height: 1.5;
}

.intro-kicker span:not(.signal-dot) {
  color: var(--dim);
}

.mega-title {
  position: relative;
  display: inline-block;
  margin: 28px 0 0 -7px;
  color: var(--phosphor-bright);
  font-family: var(--font-sans);
  font-size: clamp(76px, 10vw, 158px);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: 0.02em;
  text-shadow:
    0 0 50px rgba(166, 255, 164, 0.13),
    5px 0 0 rgba(255, 72, 72, 0.11),
    -5px 0 0 rgba(76, 221, 233, 0.09);
  user-select: none;
}

.mega-title::before,
.mega-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: inset(44% 0 37% 0);
}

.mega-title::before {
  color: var(--red);
  opacity: 0.48;
  transform: translate(4px, 1px);
  animation: megaGlitch 5.5s infinite steps(1);
}

.mega-title::after {
  color: var(--cyan);
  opacity: 0.44;
  transform: translate(-4px, -1px);
  animation: megaGlitch 7s 0.8s infinite steps(1) reverse;
}

.mega-cn {
  margin-top: 16px;
  color: var(--phosphor);
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.32em;
}

.mega-sub {
  margin-top: 7px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.3em;
}

.intro-lead {
  margin-top: 28px;
  color: var(--ink);
  font-size: clamp(18px, 1.65vw, 24px);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.04em;
}

.intro-copy {
  max-width: 585px;
  margin-top: 15px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.95;
}

.intro-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  color: #9db6a4;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.intro-meta i {
  width: 3px;
  height: 3px;
  background: var(--dim);
  transform: rotate(45deg);
}

.duration-picker {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 22px;
}

.duration-picker__label {
  color: #b7cdbb;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.duration-options {
  display: flex;
  gap: 7px;
}

.duration-btn {
  min-width: 80px;
  padding: 8px 11px 7px;
  border: 1px solid rgba(184, 245, 176, 0.22);
  background:
    linear-gradient(145deg, rgba(184, 245, 176, 0.045), transparent 62%),
    rgba(5, 11, 8, 0.82);
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: 0.2s var(--ease);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}

.duration-btn b {
  display: block;
  font-family: var(--font-mono);
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  color: #d9e9da;
}

.duration-btn span {
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #b1c9b6;
}

.duration-btn:hover {
  border-color: rgba(184, 245, 176, 0.55);
  transform: translateY(-1px);
}

.duration-btn.is-active {
  border-color: var(--phosphor);
  background:
    linear-gradient(145deg, rgba(184, 245, 176, 0.24), transparent 62%),
    rgba(25, 48, 33, 0.82);
  box-shadow: 0 0 22px rgba(184, 245, 176, 0.1);
}

.duration-btn.is-active b,
.duration-btn.is-active span {
  color: var(--phosphor-bright);
}

.start-btn {
  position: relative;
  min-width: 258px;
  height: 56px;
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 0 19px;
  border: 1px solid var(--phosphor);
  background: var(--phosphor);
  color: #071009;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
  transition: 0.25s var(--ease);
  overflow: hidden;
}

.start-btn:hover {
  background: var(--phosphor-bright);
  box-shadow: 0 0 40px rgba(184, 245, 176, 0.22);
  transform: translateY(-2px);
}

.start-btn__arrow {
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1;
  transition: transform 0.25s var(--ease);
}

.start-btn:hover .start-btn__arrow {
  transform: translateX(5px);
}

.start-btn__scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.42) 48%, transparent 70%);
  transform: translateX(-120%);
  animation: btnScan 4.4s 1.5s infinite;
}

.start-btn--small {
  height: 48px;
  min-width: 204px;
  margin-top: 0;
  font-size: 13px;
}

.intro-note {
  margin-top: 13px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
}

.briefing {
  border: 1px solid rgba(184, 245, 176, 0.21);
  background:
    linear-gradient(135deg, rgba(184, 245, 176, 0.045), transparent 36%),
    rgba(5, 12, 8, 0.74);
  box-shadow: var(--shadow-lg);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  position: relative;
}

.briefing::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 78px;
  background: var(--phosphor);
  box-shadow: 0 0 14px rgba(184, 245, 176, 0.55);
}

.briefing__head {
  padding: 15px 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--phosphor);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
}

.briefing__head span:last-child {
  color: var(--dim);
  font-size: 7px;
}

.briefing__steps {
  list-style: none;
  margin: 0;
  padding: 8px 18px 2px;
}

.briefing__steps li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  padding: 17px 0;
  border-bottom: 1px solid rgba(184, 245, 176, 0.09);
}

.briefing__steps li:last-child {
  border-bottom: 0;
}

.step-index {
  color: var(--phosphor);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  padding-top: 1px;
}

.briefing__steps strong {
  color: var(--ink);
  font-size: 12.5px;
  letter-spacing: 0.05em;
}

.briefing__steps p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.75;
}

.briefing__resource-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 4px 18px 0;
  border: 1px solid var(--line);
  background: var(--line);
}

.briefing__resource-row span {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(7, 16, 11, 0.95);
  color: var(--muted);
  font-size: 9px;
}

.briefing__resource-row .icon {
  width: 13px;
  height: 13px;
  color: var(--phosphor);
}

.briefing__foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 17px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.04em;
}

/* Help / end modals ------------------------------------------------- */

.modal-overlay {
  z-index: 300;
}

#helpOverlay {
  z-index: 500;
}

.end-card {
  animation: endCardIn 0.5s var(--ease) both;
}

button:disabled,
[role="button"][aria-disabled="true"] {
  cursor: not-allowed;
}

.help-card {
  width: min(980px, 94vw);
  max-height: 90vh;
  overflow: auto;
  padding: 25px 27px 22px;
  border: 1px solid rgba(184, 245, 176, 0.26);
  background:
    linear-gradient(130deg, rgba(184, 245, 176, 0.04), transparent 34%),
    #07100b;
  box-shadow: var(--shadow-lg);
  clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 17px 100%, 0 calc(100% - 17px));
}

.help-card__head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.help-card__head h2 {
  margin-top: 5px;
  font-size: 24px;
  line-height: 1.35;
}

.close-btn {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: 0.2s;
}

.close-btn:hover {
  color: var(--phosphor);
  border-color: var(--line-strong);
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 38px;
  margin-top: 7px;
}

.help-grid section {
  padding: 18px 0;
  border-bottom: 1px solid rgba(184, 245, 176, 0.09);
}

.help-grid h3 {
  margin-bottom: 8px;
  color: var(--phosphor);
  font-size: 13px;
  letter-spacing: 0.06em;
}

.help-grid p {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.85;
}

.help-grid b {
  color: var(--ink);
  font-weight: 600;
}

.key-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 8px;
}

.key-row span {
  margin-right: 8px;
}

.ghost-btn {
  height: 38px;
  margin-top: 18px;
  padding: 0 13px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: 0.2s;
}

.ghost-btn:hover {
  color: var(--phosphor);
  border-color: var(--line-strong);
  background: rgba(184, 245, 176, 0.04);
}

.end-overlay {
  z-index: 310;
}

.end-card {
  position: relative;
  width: min(760px, 94vw);
  max-height: 92vh;
  padding: 34px 36px 30px;
  border: 1px solid rgba(184, 245, 176, 0.28);
  background:
    linear-gradient(135deg, rgba(184, 245, 176, 0.04), transparent 34%),
    #06100b;
  box-shadow: var(--shadow-lg);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  overflow-y: auto;
}

.end-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--phosphor), transparent 65%);
}

.end-card.is-loss {
  border-color: rgba(255, 100, 100, 0.34);
}

.end-card.is-loss::before {
  background: linear-gradient(90deg, var(--red), transparent 65%);
}

.end-card.is-win {
  border-color: rgba(184, 245, 176, 0.38);
}

.end-kicker {
  color: var(--phosphor);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
}

.end-card.is-loss .end-kicker {
  color: var(--red);
}

.end-card h2 {
  margin-top: 12px;
  color: var(--phosphor-bright);
  font-family: var(--font-sans);
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.end-card.is-loss h2 {
  color: var(--red-soft);
}

.end-copy {
  max-width: 620px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.9;
}

.end-report {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
  gap: 12px;
  margin-top: 16px;
}

.end-review,
.end-summary {
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid rgba(184, 245, 176, 0.14);
  background:
    linear-gradient(140deg, rgba(184, 245, 176, 0.035), transparent 56%),
    rgba(5, 12, 8, 0.78);
}

.end-review p {
  margin-top: 7px;
  color: #c4d7c8;
  font-size: 11.5px;
  line-height: 1.7;
}

.end-summary {
  max-height: 176px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(184, 245, 176, 0.22) transparent;
}

.end-summary__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 8px;
  margin-top: 8px;
}

.end-summary__facts span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 8px;
}

.end-summary__facts b {
  display: block;
  color: var(--phosphor);
  font-size: 10px;
  font-weight: 600;
}

.end-summary__logs {
  margin-top: 9px;
  border-top: 1px solid rgba(184, 245, 176, 0.09);
}

.end-log-line {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(184, 245, 176, 0.04);
}

.end-log-line span {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 7.5px;
}

.end-log-line p {
  color: #aebfb2;
  font-family: var(--font-mono);
  font-size: 8.5px;
  line-height: 1.5;
}

.end-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin-top: 25px;
  border: 1px solid var(--line);
  background: var(--line);
}

.end-stat {
  padding: 10px 12px;
  background: rgba(6, 14, 10, 0.95);
}

.end-stat span {
  display: block;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.07em;
}

.end-stat strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.2;
}

.end-score-row {
  display: grid;
  grid-template-columns: 1.4fr 0.7fr 1.2fr;
  gap: 1px;
  margin-top: 1px;
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--line);
}

.end-score-row > div {
  padding: 12px;
  background: rgba(9, 19, 13, 0.95);
}

.end-score-row strong {
  display: block;
  margin-top: 2px;
  color: var(--phosphor);
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.25;
}

.end-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 23px;
}

.end-actions .ghost-btn {
  margin-top: 0;
}

.new-best {
  position: absolute;
  top: 34px;
  right: 37px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 194, 102, 0.35);
  color: var(--amber);
  background: rgba(255, 194, 102, 0.06);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.06em;
}

/* Random events ---------------------------------------------------- */

#eventOverlay {
  z-index: 430;
}

.event-card {
  position: relative;
  width: min(960px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 28px 30px 24px;
  border: 1px solid rgba(255, 194, 102, 0.32);
  background:
    linear-gradient(135deg, rgba(255, 194, 102, 0.055), transparent 34%),
    repeating-linear-gradient(135deg, rgba(255, 194, 102, 0.018) 0 6px, transparent 6px 12px),
    #0b0e09;
  box-shadow: var(--shadow-lg);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  animation: endCardIn 0.4s var(--ease) both;
}

.event-head {
  position: relative;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.event-head__code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.event-day {
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.event-glyph {
  position: absolute;
  top: 0;
  right: 0;
  color: rgba(255, 194, 102, 0.12);
  font-family: var(--font-display);
  font-size: 62px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 0.8;
  pointer-events: none;
}

.event-head h2 {
  margin-top: 10px;
  color: var(--phosphor-bright);
  font-size: 31px;
  letter-spacing: 0.02em;
}

.event-text {
  max-width: 680px;
  margin-top: 11px;
  color: #b7c9bb;
  font-size: 13px;
  line-height: 1.9;
}

.event-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.event-choices.is-single {
  grid-template-columns: minmax(0, 540px);
  justify-content: center;
}

/* Special node briefing -------------------------------------------- */

.challenge-overlay {
  z-index: 425;
  background:
    radial-gradient(circle at 50% 42%, rgba(32, 20, 7, 0.3), rgba(2, 4, 3, 0.92) 70%),
    rgba(2, 4, 3, 0.55);
}

.challenge-card {
  width: min(680px, 92vw);
  padding: 26px 28px 24px;
  border: 1px solid rgba(255, 194, 102, 0.4);
  background:
    linear-gradient(145deg, rgba(255, 194, 102, 0.1), transparent 46%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 4px),
    rgba(8, 14, 10, 0.97);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 36px 100px rgba(0, 0, 0, 0.68);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

.challenge-card h2 {
  margin-top: 6px;
  color: var(--phosphor-bright);
  font-size: 32px;
  letter-spacing: 0.04em;
}

.challenge-card__requirement {
  margin-top: 12px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
}

.challenge-card__hint {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11.5px;
}

.challenge-card__reward {
  margin-top: 18px;
  padding: 13px 15px;
  border-left: 3px solid var(--amber);
  background:
    linear-gradient(90deg, rgba(255, 194, 102, 0.1), transparent 80%),
    rgba(255, 194, 102, 0.025);
}

.challenge-card__reward span {
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
}

.challenge-card__reward b {
  display: block;
  margin-top: 4px;
  color: #f1dfac;
  font-size: 17px;
}

.challenge-card__reward p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.challenge-start-btn {
  margin-top: 20px;
  min-width: 230px;
}

/* Global pact ------------------------------------------------------- */

.pact-overlay {
  z-index: 440;
  background:
    radial-gradient(circle at 50% 45%, rgba(18, 12, 6, 0.3), rgba(2, 4, 3, 0.92) 70%),
    rgba(2, 4, 3, 0.58);
}

.pact-card {
  width: min(940px, 94vw);
  padding: 24px;
  border: 1px solid rgba(255, 194, 102, 0.36);
  background:
    linear-gradient(140deg, rgba(255, 194, 102, 0.08), transparent 40%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 4px),
    rgba(7, 12, 9, 0.97);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 36px 100px rgba(0, 0, 0, 0.7);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

.pact-head h2 {
  margin-top: 5px;
  color: var(--phosphor-bright);
  font-size: 28px;
  letter-spacing: 0.04em;
}

.pact-head p {
  max-width: 720px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.7;
}

.pact-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.pact-option {
  display: flex;
  flex-direction: column;
  min-height: 190px;
  padding: 16px;
  border: 1px solid rgba(255, 194, 102, 0.24);
  background:
    linear-gradient(150deg, rgba(255, 194, 102, 0.055), transparent 52%),
    rgba(9, 16, 11, 0.9);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: 0.22s var(--ease);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.pact-option:hover {
  border-color: var(--amber);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
}

.pact-option__code {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
}

.pact-option h3 {
  margin-top: 7px;
  color: var(--phosphor-bright);
  font-size: 21px;
}

.pact-positive,
.pact-negative {
  margin-top: 10px;
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.45;
}

.pact-positive {
  border-left: 2px solid var(--phosphor);
  background: rgba(184, 245, 176, 0.06);
  color: #c8efc8;
}

.pact-negative {
  border-left: 2px solid var(--red-soft);
  background: rgba(255, 100, 100, 0.055);
  color: #f0b9ae;
}

.pact-option__cta {
  margin-top: auto;
  padding-top: 12px;
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.pact-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 194, 102, 0.14);
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
}

.event-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 218px;
  padding: 16px 17px 14px;
  border: 1px solid rgba(255, 194, 102, 0.22);
  background:
    linear-gradient(145deg, rgba(255, 194, 102, 0.07), transparent 52%),
    linear-gradient(180deg, rgba(21, 19, 10, 0.92), rgba(8, 10, 7, 0.96));
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  cursor: pointer;
  transition: 0.22s var(--ease);
  outline: none;
}

.event-choice:hover,
.event-choice:focus-visible {
  transform: translateY(-3px);
  border-color: var(--amber);
  box-shadow: 0 0 32px rgba(255, 194, 102, 0.1);
}

.event-choice__top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.08em;
}

.event-choice__mark {
  color: var(--amber);
}

.event-choice h3 {
  margin-top: 12px;
  color: var(--ink);
  font-size: 19px;
  letter-spacing: 0.01em;
}

.event-choice p {
  margin-top: 7px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.72;
}

.event-choice__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
}

.event-choice__chips .effect-chip {
  padding: 5px 7px;
  border: 1px solid rgba(184, 245, 176, 0.16);
  background: rgba(184, 245, 176, 0.035);
  color: #b9cec0;
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.2;
}

.event-choice__chips .effect-chip.is-positive {
  border-color: rgba(184, 245, 176, 0.26);
  color: #c8f4bd;
}

.event-choice__chips .effect-chip.is-negative {
  border-color: rgba(255, 100, 100, 0.26);
  background: rgba(255, 100, 100, 0.04);
  color: #ffaaa1;
}

.event-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  color: #a9c0b1;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

.event-foot b {
  color: var(--amber);
  font-size: 13px;
  font-weight: 600;
}

/* Deck reward ------------------------------------------------------ */

#rewardOverlay {
  z-index: 420;
}

.reward-card {
  width: min(1080px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 26px 28px 23px;
  border: 1px solid rgba(120, 220, 232, 0.28);
  background:
    linear-gradient(135deg, rgba(120, 220, 232, 0.045), transparent 34%),
    #07100d;
  box-shadow: var(--shadow-lg);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  animation: endCardIn 0.4s var(--ease) both;
}

.reward-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--line);
}

.reward-head h2 {
  margin-top: 6px;
  color: var(--phosphor-bright);
  font-size: 27px;
  letter-spacing: 0.02em;
}

.reward-head p {
  max-width: 590px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.8;
}

.reward-head__stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 132px;
  padding: 9px 12px;
  border: 1px solid rgba(184, 245, 176, 0.2);
  background: rgba(184, 245, 176, 0.025);
  color: #a9c0b1;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.reward-head__stats span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.reward-head__stats b {
  color: var(--phosphor-bright);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.reward-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin-top: 19px;
}

.reward-option {
  --card-accent: var(--cyan);
  position: relative;
  min-height: 286px;
  display: flex;
  flex-direction: column;
  padding: 14px 15px 12px;
  border: 1px solid color-mix(in srgb, var(--card-accent) 30%, transparent);
  background:
    radial-gradient(ellipse at 12% 0%, color-mix(in srgb, var(--card-accent) 14%, transparent), transparent 44%),
    linear-gradient(145deg, color-mix(in srgb, var(--card-accent) 7%, transparent), transparent 48%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.016) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(8, 20, 18, 0.94), rgba(5, 11, 9, 0.96));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--card-accent) 12%, transparent);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  cursor: pointer;
  transition: 0.22s var(--ease);
  overflow: hidden;
}

.reward-option::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -28px;
  width: 105px;
  height: 105px;
  border: 1px solid rgba(120, 220, 232, 0.06);
  transform: rotate(45deg);
  pointer-events: none;
}

.reward-option:hover,
.reward-option:focus-visible {
  transform: translateY(-3px);
  border-color: var(--phosphor);
  box-shadow: 0 0 30px rgba(184, 245, 176, 0.08);
}

.reward-option.is-fault {
  --card-accent: var(--red);
  border-color: rgba(255, 100, 100, 0.35);
  background:
    repeating-linear-gradient(135deg, rgba(255, 100, 100, 0.028) 0 6px, transparent 6px 12px),
    linear-gradient(145deg, rgba(255, 100, 100, 0.1), transparent 50%),
    linear-gradient(180deg, rgba(22, 10, 9, 0.94), rgba(9, 7, 6, 0.96));
}

.reward-option[data-tag="PWR"] { --card-accent: var(--amber); }
.reward-option[data-tag="RAT"] { --card-accent: #a9e680; }
.reward-option[data-tag="DEF"] { --card-accent: var(--cyan); }
.reward-option[data-tag="SYS"] { --card-accent: #b89cff; }
.reward-option[data-tag="CORE"] { --card-accent: #d6a5ff; }
.reward-option[data-tag="FAULT"] { --card-accent: var(--red); }

.reward-option.is-fault:hover,
.reward-option.is-fault:focus-visible {
  border-color: var(--red-soft);
  box-shadow: 0 0 30px rgba(255, 100, 100, 0.08);
}

.reward-option__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.09em;
}

.reward-type {
  color: var(--card-accent);
}

.reward-option__glyph {
  width: 38px;
  height: 38px;
  margin-top: 13px;
  display: grid;
  place-items: center;
  color: var(--card-accent);
  border: 1px solid color-mix(in srgb, var(--card-accent) 30%, transparent);
  background: color-mix(in srgb, var(--card-accent) 6%, transparent);
}

.reward-option__glyph .icon {
  width: 19px;
  height: 19px;
}

.reward-option h3 {
  margin: 10px 0 6px;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: 0.03em;
}

.reward-option__desc {
  color: #b9cdbe;
  font-size: 11.5px;
  line-height: 1.7;
}

.reward-option__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}

.reward-option__chips .effect-chip {
  min-height: 24px;
  padding: 3px 7px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
}

.reward-option__foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed rgba(184, 245, 176, 0.11);
  color: #aec5b5;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

.reward-option__foot span:last-child {
  color: var(--card-accent);
  font-size: 11px;
  white-space: nowrap;
}

.reward-life {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--amber);
}

.reward-life .icon {
  width: 14px;
  height: 14px;
}

.reward-life b {
  color: var(--phosphor-bright);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.reward-foot {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 17px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

.reward-foot span:first-child {
  color: #d6e8d9;
  font-size: 12.5px;
  font-weight: 600;
}

.reward-foot span:last-child {
  color: var(--muted);
  font-size: 10.5px;
  text-align: right;
}

/* Day splash -------------------------------------------------------- */

.day-splash {
  position: fixed;
  inset: 0;
  z-index: 180;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(6, 14, 9, 0.62), transparent 64%);
}

.day-splash.is-active {
  animation: dayFlash 1.2s var(--ease) both;
}

.day-splash__inner {
  text-align: center;
  transform: translateY(8px);
}

.day-splash__inner span {
  display: block;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
}

.day-splash__inner strong {
  display: block;
  margin: 8px 0 9px;
  color: var(--phosphor-bright);
  font-family: var(--font-mono);
  font-size: clamp(46px, 7vw, 86px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  text-shadow: 0 0 40px rgba(184, 245, 176, 0.28);
}

.day-splash__flavor {
  max-width: 560px;
  margin: 14px auto 0;
  color: #b7a7cf;
  font-size: 12px;
  font-style: italic;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

/* Card flavor burst ------------------------------------------------ */

.flavor-burst {
  position: fixed;
  top: 42%;
  left: 50%;
  z-index: 365;
  width: min(700px, 90vw);
  padding: 20px 26px 22px;
  transform: translate(-50%, -50%) translateY(10px) scale(0.995);
  text-align: center;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(7, 14, 11, 0.9), rgba(7, 14, 11, 0.42) 58%, transparent 80%);
  opacity: 0;
  transition: opacity 1.15s ease, transform 1.15s ease;
  will-change: opacity, transform;
}

.flavor-burst[hidden] {
  display: none;
}

.flavor-burst.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0) scale(1);
  transition: opacity 0.55s ease, transform 0.7s ease;
}

.flavor-burst.is-leaving {
  opacity: 0;
  transform: translate(-50%, -50%) translateY(-20px) scale(1.005);
  transition: opacity 1.55s ease, transform 1.55s ease;
}

.flavor-burst__card {
  display: block;
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.flavor-burst__text {
  margin-top: 10px;
  color: #e2d5f2;
  font-size: clamp(18px, 2.1vw, 29px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.03em;
  text-shadow: 0 0 28px rgba(190, 160, 230, 0.2);
}

.flavor-burst__text::before,
.flavor-burst__text::after {
  content: "";
  display: block;
  width: 74px;
  height: 1px;
  margin: 0 auto 12px;
  background: linear-gradient(90deg, transparent, rgba(255, 194, 102, 0.65), transparent);
}

.flavor-burst__text::after {
  margin: 12px auto 0;
  background: linear-gradient(90deg, transparent, rgba(184, 245, 176, 0.45), transparent);
}

/* Hover tooltip ----------------------------------------------------- */

.game-tooltip {
  position: fixed;
  z-index: 700;
  width: min(340px, calc(100vw - 24px));
  max-height: 58vh;
  overflow: hidden;
  padding: 12px 14px;
  border: 1px solid rgba(184, 245, 176, 0.3);
  background:
    linear-gradient(135deg, rgba(184, 245, 176, 0.055), transparent 42%),
    #08100c;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  pointer-events: none;
}

.game-tooltip[hidden] {
  display: none;
}

.game-tooltip__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.game-tooltip__head span:last-child {
  color: var(--cyan);
  text-align: right;
}

.game-tooltip strong {
  display: block;
  margin-top: 7px;
  color: var(--phosphor-bright);
  font-size: 17px;
  line-height: 1.25;
}

.game-tooltip__body {
  margin-top: 7px;
  color: #b9cbbd;
  font-size: 11.5px;
  line-height: 1.65;
}

.game-tooltip__body b {
  color: var(--phosphor);
  font-weight: 600;
}

.game-tooltip__body .tooltip-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.game-tooltip__body .tooltip-positive {
  color: var(--phosphor);
  font-weight: 600;
}

.tooltip-negative {
  color: var(--red-soft);
  font-weight: 600;
}

.tooltip-chips span {
  padding: 3px 6px;
  border: 1px solid rgba(184, 245, 176, 0.14);
  background: rgba(184, 245, 176, 0.03);
  color: #b9cec0;
  font-family: var(--font-mono);
  font-size: 9px;
}

.game-tooltip__body .tooltip-note {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 10px;
}

.game-tooltip__flavor {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed rgba(184, 245, 176, 0.13);
  color: #cbb9e8;
  font-size: 10.5px;
  font-style: italic;
  line-height: 1.6;
}

.game-tooltip.is-danger {
  border-color: rgba(255, 100, 100, 0.38);
}

.game-tooltip.is-danger .game-tooltip__head span:last-child {
  color: var(--red-soft);
}

/* Toasts ------------------------------------------------------------ */

.toast-layer {
  position: fixed;
  top: 98px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 400;
  width: min(420px, calc(100vw - 28px));
  display: flex;
  flex-direction: column;
  gap: 7px;
  pointer-events: none;
}

.toast {
  padding: 10px 13px;
  border: 1px solid rgba(184, 245, 176, 0.30);
  background: rgba(7, 17, 11, 0.96);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45);
  color: var(--ink);
  font-size: 11px;
  line-height: 1.55;
  animation: toastIn 0.3s var(--ease) both;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

.toast strong {
  display: block;
  margin-bottom: 2px;
  color: var(--phosphor);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.11em;
}

.toast.is-danger {
  border-color: rgba(255, 100, 100, 0.38);
}

.toast.is-danger strong {
  color: var(--red);
}

.toast.is-warn {
  border-color: rgba(255, 194, 102, 0.34);
}

.toast.is-warn strong {
  color: var(--amber);
}

.toast.is-good {
  border-color: rgba(121, 223, 143, 0.34);
}

.toast.is-out {
  animation: toastOut 0.28s var(--ease) both;
}

/* ------------------------------------------------------------------ */
/* Animations                                                          */
/* ------------------------------------------------------------------ */

@keyframes signalPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.22; }
}

@keyframes glitchMicro {
  0%, 92%, 100% { clip-path: inset(42% 0 38% 0); transform: translate(0); }
  93% { clip-path: inset(8% 0 66% 0); transform: translate(2px, -1px); }
  95% { clip-path: inset(65% 0 9% 0); transform: translate(-2px, 1px); }
  97% { clip-path: inset(32% 0 47% 0); transform: translate(1px); }
}

@keyframes megaGlitch {
  0%, 88%, 100% { opacity: 0.32; clip-path: inset(44% 0 37% 0); transform: translate(0); }
  89% { opacity: 0.75; clip-path: inset(10% 0 70% 0); transform: translate(6px, -2px); }
  91% { opacity: 0.5; clip-path: inset(64% 0 8% 0); transform: translate(-5px, 2px); }
  93% { opacity: 0.7; clip-path: inset(31% 0 48% 0); transform: translate(2px, 1px); }
}

@keyframes noiseWalk {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-13px, 9px); }
  50% { transform: translate(9px, -13px); }
  75% { transform: translate(-5px, -8px); }
  100% { transform: translate(12px, 7px); }
}

@keyframes scanKick {
  0% { transform: translateY(-2px); }
  50% { transform: translateY(3px); }
  100% { transform: translateY(0); }
}

@keyframes screenShake {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3px, 1px); }
  40% { transform: translate(3px, -1px); }
  60% { transform: translate(-1px, -2px); }
  80% { transform: translate(2px, 2px); }
  100% { transform: translate(0, 0); }
}

@keyframes tickPulse {
  0%, 100% { opacity: 0.82; }
  50% { opacity: 1; }
}

@keyframes criticalNumber {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@keyframes resourceUp {
  0% { box-shadow: inset 0 0 0 rgba(121, 223, 143, 0); }
  35% { box-shadow: inset 0 0 24px rgba(121, 223, 143, 0.20); }
  100% { box-shadow: inset 0 0 0 rgba(121, 223, 143, 0); }
}

@keyframes resourceDown {
  0% { box-shadow: inset 0 0 0 rgba(255, 100, 100, 0); }
  35% { box-shadow: inset 0 0 24px rgba(255, 100, 100, 0.20); }
  100% { box-shadow: inset 0 0 0 rgba(255, 100, 100, 0); }
}

@keyframes cardIn {
  0% { opacity: 0; transform: translateY(10px) scale(0.985); filter: blur(3px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes patchIn {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes logLine {
  0% { opacity: 0; transform: translateY(3px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes btnScan {
  0%, 72% { transform: translateX(-120%); }
  88%, 100% { transform: translateX(130%); }
}

@keyframes dayFlash {
  0% { opacity: 0; }
  18% { opacity: 1; }
  72% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes toastIn {
  0% { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes toastOut {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8px); }
}

@keyframes endCardIn {
  0% { opacity: 0; transform: translateY(16px) scale(0.985); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 1520px) {
  .layout {
    grid-template-columns: 270px minmax(0, 1fr) 360px;
  }

  .app-shell {
    padding-left: 16px;
    padding-right: 16px;
  }

  .topbar {
    gap: 20px;
  }
}

@media (max-width: 1280px) {
  .layout {
    grid-template-columns: 252px minmax(0, 1fr) 336px;
    gap: 9px;
  }

  .app-shell {
    gap: 9px;
    padding: 11px 12px;
    grid-template-rows: auto minmax(0, 1fr) 132px;
  }

  .topbar {
    min-height: 64px;
    padding-bottom: 8px;
  }

  .brand__title {
    font-size: 25px;
  }

  .vitals-panel {
    padding: 12px 11px;
    gap: 9px;
  }

  .resource-card {
    padding: 8px 9px 7px;
  }

  .resource-value {
    font-size: 21px;
  }

  .hand-panel {
    padding: 11px 10px 10px;
  }

  .patch-card {
    min-height: 146px;
    padding: 8px;
  }

  .patch-card h4 {
    font-size: 12px;
  }

  .fault-card {
    padding: 10px 12px 9px;
  }

  .patch-bay {
    padding: 9px 10px 10px;
  }

  .bay-patch {
    min-height: 96px;
    padding: 7px;
  }

  .end-day-btn {
    min-height: 52px;
  }

  .log-panel {
    grid-template-columns: 128px minmax(0, 1fr);
  }

  .log-head {
    padding: 10px 11px;
  }
}

@media (max-width: 1080px) {
  body {
    overflow-y: auto;
  }

  .app-shell {
    height: auto;
    min-height: 100dvh;
    grid-template-rows: auto auto auto;
    gap: 10px;
  }

  .topbar {
    grid-template-columns: minmax(240px, 0.9fr) minmax(300px, 1.2fr) auto;
  }

  .layout {
    grid-template-columns: 250px minmax(0, 1fr);
    grid-template-rows: minmax(620px, auto) auto;
    grid-template-areas:
      "vitals board"
      "hand hand";
    min-height: 0;
  }

  .vitals-panel {
    grid-area: vitals;
  }

  .board {
    grid-area: board;
    min-height: 620px;
  }

  .hand-panel {
    grid-area: hand;
    min-height: 0;
    overflow: visible;
  }

  .hand {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-height: none;
    overflow: visible;
  }

  .patch-card {
    min-height: 152px;
  }

  .maintenance {
    margin-top: 2px;
  }

  .maintenance-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .end-day-btn {
    min-height: 52px;
  }

  .log-panel {
    min-height: 130px;
  }

  .intro-shell {
    gap: 32px;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  }
}

@media (max-width: 1000px) {
  .topbar {
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 12px;
  }

  .brand {
    grid-column: 1;
  }

  .dayline {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .top-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .ap-block {
    width: 22px;
    height: 31px;
  }

  .ap-readout {
    min-width: 48px;
    font-size: 15px;
  }
}

@media (max-width: 860px) {
  .app-shell {
    padding: 10px;
  }

  .patch-bay__slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reward-card {
    width: min(680px, 94vw);
    padding: 20px 17px 18px;
  }

  .reward-head {
    flex-direction: column;
    gap: 12px;
  }

  .reward-head__stats {
    flex-direction: row;
    gap: 14px;
  }

  .reward-options {
    grid-template-columns: 1fr;
  }

  .reward-option {
    min-height: 0;
  }

  .event-card {
    padding: 22px 18px 18px;
  }

  .event-head h2 {
    font-size: 25px;
  }

  .event-glyph {
    font-size: 44px;
  }

  .event-choices {
    grid-template-columns: 1fr;
  }

  .event-choice {
    min-height: 0;
  }

  .event-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .reward-foot {
    flex-direction: column;
    gap: 5px;
  }

  .schedule-strip {
    flex-wrap: wrap;
    gap: 5px 14px;
  }

  .topbar {
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: start;
    padding-bottom: 10px;
  }

  .brand {
    grid-column: 1;
  }

  .brand__title {
    font-size: 24px;
  }

  .dayline {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .top-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .ap-panel {
    margin-right: 0;
  }

  .ap-panel .micro-label {
    display: none;
  }

  .layout {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .vitals-panel {
    order: 1;
    overflow: visible;
  }

  .resources {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .board {
    order: 2;
    min-height: 560px;
  }

  .hand-panel {
    order: 3;
  }

  .threat-card,
  .objective-card {
    margin-top: 0;
  }

  .mother-card {
    margin-top: 0;
  }

  .log-panel {
    min-height: 142px;
    grid-template-columns: 1fr;
  }

  .log-head {
    flex-direction: row;
    align-items: center;
    padding: 8px 11px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .log-head .micro-label {
    display: none;
  }

  .log {
    max-height: 150px;
  }

  .intro-overlay {
    padding: 22px;
  }

  .intro-shell {
    grid-template-columns: 1fr;
    gap: 28px;
    width: min(680px, 94vw);
  }

  .intro-hero {
    padding-top: 0;
  }

  .mega-title {
    font-size: clamp(66px, 15vw, 120px);
  }

  .briefing {
    margin-bottom: 10px;
  }

  .help-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .help-card {
    padding: 21px 19px 19px;
  }

  .end-card {
    padding: 25px 22px 23px;
  }

  .end-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .end-report {
    grid-template-columns: 1fr;
  }

  .end-summary {
    max-height: none;
  }
}

@media (max-width: 580px) {
  .night-card {
    padding: 22px 18px 18px;
  }

  .night-orbit {
    width: 96px;
    height: 96px;
  }

  .night-card h2 {
    font-size: 30px;
  }

  .duration-options {
    gap: 5px;
  }

  .duration-btn {
    flex: 1;
    min-width: 0;
    padding: 7px 8px 6px;
  }

  .duration-btn b {
    font-size: 22px;
  }

  .duration-btn span {
    font-size: 10.5px;
  }

  .duration-picker__label {
    font-size: 10.5px;
  }

  .challenge-card {
    padding: 20px 16px 18px;
    max-height: 90dvh;
    overflow-y: auto;
  }

  .challenge-card h2 {
    font-size: 26px;
  }

  .challenge-card__requirement {
    font-size: 15px;
  }

  .challenge-card__reward b {
    font-size: 15px;
  }

  .challenge-start-btn {
    width: 100%;
  }

  .pact-card {
    padding: 18px 14px;
    max-height: 90dvh;
    overflow-y: auto;
  }

  .pact-head h2 {
    font-size: 22px;
  }

  .pact-choices {
    grid-template-columns: 1fr;
  }

  .pact-option {
    min-height: 154px;
  }

  .pact-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .night-readout {
    gap: 12px;
  }

  .dayline__top .micro-label {
    display: none;
  }

  .dayline__readout strong {
    font-size: 10px;
  }

  .threat-mini {
    font-size: 8px;
  }

  .ap-panel {
    gap: 5px;
  }

  .ap-block {
    width: 12px;
    height: 22px;
  }

  .ap-block:nth-child(n+6) {
    display: none;
  }

  .ap-blocks {
    gap: 2px;
  }

  .ap-readout {
    min-width: 34px;
    font-size: 12px;
  }

  .icon-btn {
    width: 32px;
    height: 32px;
  }

  .resources {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fault-card__title h3 {
    font-size: 15px;
  }

  .fault-glyph {
    width: 32px;
    height: 32px;
  }

  .fault-card {
    padding: 9px 10px;
  }

  .fault-card.is-selected::before {
    font-size: 6px;
    padding: 2px 5px;
  }

  .patch-bay__slots {
    grid-template-columns: 1fr;
  }

  .bay-patch {
    min-height: 82px;
  }

  .bay-empty {
    min-height: 52px;
  }

  .hand {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .maintenance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .briefing__steps {
    padding-left: 14px;
    padding-right: 14px;
  }

  .briefing__resource-row {
    margin-left: 14px;
    margin-right: 14px;
  }

  .briefing__foot {
    padding-left: 14px;
    padding-right: 14px;
    flex-direction: column;
    gap: 4px;
  }

  .intro-lead {
    font-size: 18px;
  }

  .intro-meta {
    gap: 7px;
    font-size: 7.5px;
  }

  .intro-copy {
    font-size: 11.5px;
  }

  .start-btn {
    width: 100%;
    min-width: 0;
  }

  .mega-cn {
    letter-spacing: 0.46em;
    font-size: 15px;
  }

  .end-score-row {
    grid-template-columns: 1fr 1fr;
  }

  .end-score-row > div:last-child {
    grid-column: 1 / -1;
  }

  .end-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .end-actions .start-btn,
  .end-actions .ghost-btn {
    width: 100%;
  }

  .new-best {
    position: static;
    display: inline-block;
    margin-top: 14px;
  }

  .toast-layer {
    top: 86px;
  }
}

@media (max-height: 940px) and (min-width: 861px) {
  .vitals-panel {
    padding: 10px 11px;
    gap: 7px;
  }

  .panel-heading h2 {
    font-size: 16px;
  }

  .resources {
    gap: 5px;
  }

  .resource-card {
    padding: 6px 8px 5px;
  }

  .resource-icon {
    width: 20px;
    height: 20px;
  }

  .resource-icon .icon {
    width: 12px;
    height: 12px;
  }

  .resource-value {
    font-size: 20px;
  }

  .segment-bar {
    margin-top: 4px;
  }

  .segment {
    height: 4px;
  }

  .resource-meta {
    margin-top: 4px;
    font-size: 10.5px;
  }

  .threat-card {
    padding: 8px 9px 7px;
  }

  .threat-value {
    font-size: 17px;
  }

  .threat-body {
    margin-top: 5px;
    gap: 3px;
  }

  .objective-card {
    padding: 8px 9px;
  }

  .objective-card p {
    margin-top: 4px;
    font-size: 9.5px;
    line-height: 1.5;
  }

  .objective-line {
    margin-top: 5px;
    padding-top: 5px;
  }

  .mother-card {
    display: none;
  }

  .patch-card {
    min-height: 146px;
  }

  .hand {
    gap: 6px;
  }
}

@media (max-height: 820px) and (min-width: 1081px) {
  .app-shell {
    grid-template-rows: auto minmax(0, 1fr) 124px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .topbar {
    min-height: 60px;
    padding-bottom: 8px;
  }

  .brand__title {
    font-size: 25px;
  }

  .resource-card {
    padding-top: 7px;
    padding-bottom: 6px;
  }

  .segment-bar {
    margin-top: 5px;
  }

  .fault-card {
    padding-top: 9px;
    padding-bottom: 8px;
  }

  .bay-patch {
    min-height: 94px;
  }

  .patch-bay {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .log-head {
    padding-top: 9px;
    padding-bottom: 9px;
  }
}

@media (max-height: 780px) and (min-width: 861px) {
  .app-shell {
    grid-template-rows: auto minmax(0, 1fr) 116px;
    gap: 8px;
    padding: 8px 12px;
  }

  .topbar {
    min-height: 54px;
    padding-bottom: 6px;
  }

  .brand__title {
    font-size: 23px;
  }

  .brand__sub {
    margin-top: 5px;
  }

  .vitals-panel {
    gap: 5px;
    padding: 8px;
  }

  .panel-heading h2 {
    font-size: 15px;
  }

  .objective-card {
    display: none;
  }

  .resources {
    gap: 4px;
  }

  .resource-card {
    padding: 5px 7px;
  }

  .resource-meta {
    margin-top: 3px;
    font-size: 10px;
  }

  .threat-body {
    gap: 2px;
  }

  .hand-panel {
    gap: 7px;
    padding: 9px 9px 8px;
  }

  .hand-head h2 {
    font-size: 16px;
  }

  .hand {
    min-height: 0;
    gap: 6px;
  }

  .patch-card {
    min-height: 146px;
    padding: 6px 7px;
  }

  .patch-card__icon {
    width: 20px;
    height: 20px;
  }

  .patch-card__icon .icon {
    width: 13px;
    height: 13px;
  }

  .patch-card__title-row {
    margin: 3px 0 2px;
  }

  .patch-card h4 {
    margin: 0;
    font-size: 13px;
  }

  .patch-card__top {
    font-size: 6.5px;
  }

  .cost-badge {
    height: 16px;
    min-width: 23px;
    font-size: 7px;
  }

  .patch-card__effect .effect-chip {
    min-height: 19px;
    padding: 1px 4px;
    font-size: 10px;
  }

  .patch-card__foot {
    padding-top: 4px;
    font-size: 6.5px;
  }

  .maintenance {
    padding-top: 7px;
  }

  .maintenance .section-head h3 {
    font-size: 13px;
  }

  .maintenance-grid {
    margin-top: 5px;
    gap: 4px;
  }

  .maint-btn {
    min-height: 34px;
    padding: 4px 6px;
  }

  .end-day-btn {
    min-height: 50px;
    padding: 7px 12px;
  }

  .end-day-btn__title {
    font-size: 14px;
  }

  .end-day-btn__sub {
    font-size: 7px;
  }

  .end-day-btn__arrow {
    font-size: 20px;
  }

  .log-panel {
    min-height: 0;
  }

  .log-head {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .fault-list {
    min-height: 180px;
  }
}

/* Material / atmosphere pass --------------------------------------- */

.screen-fx {
  position: fixed;
  inset: 0;
  z-index: 260;
  pointer-events: none;
  opacity: 0.22;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% 42%, transparent 40%, rgba(0, 0, 0, 0.38) 100%),
    radial-gradient(rgba(255, 255, 255, 0.09) 0.5px, transparent 0.8px);
  background-size: auto, auto, 3px 3px;
  mix-blend-mode: soft-light;
}

.topbar {
  background:
    linear-gradient(180deg, rgba(18, 36, 27, 0.66), rgba(4, 9, 7, 0.2) 72%, transparent),
    radial-gradient(ellipse at 18% 0%, rgba(184, 245, 176, 0.07), transparent 45%);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.2),
    inset 0 -1px 0 var(--state-glow, rgba(184, 245, 176, 0.12));
}

.topbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 194, 102, 0.28) 0 10px,
    transparent 10px 21px
  );
  opacity: 0.55;
}

.panel {
  background-image:
    radial-gradient(circle at 8px 8px, rgba(184, 245, 176, 0.22) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at calc(100% - 8px) 8px, rgba(184, 245, 176, 0.16) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 8px calc(100% - 8px), rgba(184, 245, 176, 0.14) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), rgba(184, 245, 176, 0.18) 0 1.2px, transparent 1.8px),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, rgba(184, 245, 176, 0.045), transparent 32%),
    linear-gradient(180deg, rgba(10, 23, 16, 0.92), rgba(4, 8, 6, 0.86));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 0 0 1px rgba(184, 245, 176, 0.025),
    0 18px 42px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.log-panel {
  background-image:
    radial-gradient(circle at 8px 8px, rgba(184, 245, 176, 0.2) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at calc(100% - 8px) 8px, rgba(184, 245, 176, 0.16) 0 1.2px, transparent 1.8px),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgba(184, 245, 176, 0.035), transparent 35%),
    rgba(5, 11, 8, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 14px 32px rgba(0, 0, 0, 0.22);
}

.patch-card,
.fault-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 10px 22px rgba(0, 0, 0, 0.2);
}

.maint-btn {
  background-image:
    linear-gradient(145deg, rgba(184, 245, 176, 0.045), transparent 58%),
    linear-gradient(180deg, rgba(10, 20, 14, 0.85), rgba(4, 8, 6, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 5px 14px rgba(0, 0, 0, 0.16);
}

.end-day-btn {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.26);
}

.event-card,
.reward-card,
.help-card,
.end-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 30px 90px rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* Inline AP must override the shared section-head flex rules */
.patch-bay .patch-bay__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  align-content: center;
  justify-content: normal;
  justify-items: stretch;
  gap: 14px;
}

@media (max-width: 760px) {
  .patch-bay .patch-bay__head {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 5px;
  }

  .patch-bay .patch-bay__head .ap-hud--inline {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
  }
}

/* ================================================================ */
/* Audio mixer                                                       */
/* ================================================================ */

.audio-panel {
  position: fixed;
  top: 84px;
  right: 20px;
  z-index: 320;
  width: 332px;
  max-width: calc(100vw - 20px);
  padding: 16px 16px 14px;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(150deg, rgba(184, 245, 176, 0.06), transparent 42%),
    linear-gradient(180deg, rgba(10, 23, 16, 0.98), rgba(4, 8, 6, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 28px 70px rgba(0, 0, 0, 0.62);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  color: var(--ink);
  animation: audio-panel-in 0.18s var(--ease);
}

.audio-panel[hidden] {
  display: none;
}

@keyframes audio-panel-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.audio-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
}

.audio-panel__head h3 {
  margin: 4px 0 0;
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--phosphor-bright);
}

.close-btn--small {
  width: 28px;
  height: 28px;
  font-size: 17px;
}

.audio-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 13px 0 11px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  background: rgba(184, 245, 176, 0.03);
  color: var(--muted);
  font-family: inherit;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-align: left;
  cursor: pointer;
  transition: 0.18s var(--ease);
}

.audio-toggle:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.audio-toggle__dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(121, 223, 143, 0.8);
  animation: audio-live-pulse 2.6s ease-in-out infinite;
}

.audio-panel.is-muted .audio-toggle__dot {
  background: var(--dim);
  box-shadow: none;
  animation: none;
}

.audio-panel.is-muted #audioToggleText {
  color: var(--red-soft);
}

.audio-panel.is-muted .audio-live {
  color: var(--dim);
  border-color: var(--line);
}

.audio-toggle__key {
  margin-left: auto;
  padding: 1px 5px;
  font-size: 10px;
  color: var(--dim);
}

.audio-slider {
  display: block;
  margin: 11px 0;
}

.audio-slider__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.audio-slider__label b {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--phosphor);
}

.audio-slider input[type="range"] {
  width: 100%;
  height: 22px;
  margin-top: 5px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

.audio-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(90deg, rgba(184, 245, 176, 0.55), rgba(184, 245, 176, 0.12));
  border: 0;
}

.audio-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 16px;
  margin-top: -6.5px;
  background: var(--phosphor);
  border: 0;
  border-radius: 1px;
  box-shadow: 0 0 10px rgba(184, 245, 176, 0.55);
}

.audio-slider input[type="range"]::-moz-range-track {
  height: 3px;
  background: linear-gradient(90deg, rgba(184, 245, 176, 0.55), rgba(184, 245, 176, 0.12));
  border: 0;
}

.audio-slider input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 16px;
  background: var(--phosphor);
  border: 0;
  border-radius: 1px;
  box-shadow: 0 0 10px rgba(184, 245, 176, 0.55);
}

.audio-now {
  margin-top: 14px;
  padding: 11px 12px 12px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--phosphor);
  background:
    linear-gradient(120deg, rgba(184, 245, 176, 0.05), transparent 55%),
    rgba(3, 7, 5, 0.55);
}

.audio-now__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.audio-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 6px;
  border: 1px solid rgba(184, 245, 176, 0.3);
  color: var(--phosphor);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
}

.audio-live::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: audio-live-pulse 1.8s ease-in-out infinite;
}

@keyframes audio-live-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.audio-now strong {
  display: block;
  margin: 8px 0 4px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--phosphor-bright);
}

.audio-now p {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.55;
}

.audio-now__scene {
  display: inline-block;
  margin-top: 8px;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.audio-panel__foot {
  margin: 12px 0 0;
  color: var(--dim);
  font-size: 10.5px;
  line-height: 1.6;
}

.audio-panel__foot kbd,
.audio-toggle__key {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9.5px;
}

.icon-btn[aria-expanded="true"] {
  color: var(--phosphor);
  border-color: var(--line-strong);
  background: rgba(184, 245, 176, 0.08);
}

@media (max-width: 580px) {
  .audio-panel {
    right: 10px;
    left: 10px;
    width: auto;
    max-width: none;
    padding: 14px 13px 13px;
  }

  .brand__ver {
    display: none;
  }
}
/* ================================================================ */
/* Art pass v2 闁?shelter depth, containment core, signal chrome      */
/* ================================================================ */

.world-bg__image {
  opacity: 0.7;
  filter: saturate(1.04) contrast(1.16) brightness(0.9);
}

.world-bg__beacons {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.world-bg__beacons i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow:
    0 0 8px 2px rgba(255, 194, 102, 0.5),
    0 0 34px 10px rgba(255, 194, 102, 0.12);
  animation: beaconPulse 4.8s ease-in-out infinite;
}

.world-bg__beacons i:nth-child(1) {
  left: 12%;
  top: 33%;
  animation-delay: -0.6s;
}

.world-bg__beacons i:nth-child(2) {
  right: 13%;
  top: 27%;
  animation-delay: -2.1s;
}

.world-bg__beacons i:nth-child(3) {
  left: 50%;
  top: 17%;
  animation-delay: -3.2s;
}

body[data-mood="critical"] .world-bg__beacons i {
  background: var(--red);
  box-shadow:
    0 0 9px 2px rgba(255, 100, 100, 0.55),
    0 0 38px 12px rgba(255, 100, 100, 0.14);
}

body[data-mood="unstable"] .world-bg__beacons i {
  background: var(--violet);
  box-shadow:
    0 0 9px 2px rgba(199, 163, 255, 0.52),
    0 0 38px 12px rgba(199, 163, 255, 0.12);
}

body[data-mood="breach"] .world-bg__beacons i {
  background: var(--cyan);
  box-shadow:
    0 0 9px 2px rgba(120, 220, 232, 0.58),
    0 0 38px 12px rgba(120, 220, 232, 0.14);
}

@keyframes beaconPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.92); }
  42% { opacity: 1; transform: scale(1); }
  55% { opacity: 0.55; transform: scale(0.96); }
}

.world-bg__rain {
  position: absolute;
  inset: -24% 0 0;
  opacity: 0.055;
  background-image: repeating-linear-gradient(
    102deg,
    transparent 0 38px,
    rgba(214, 240, 224, 0.5) 39px,
    transparent 40px 74px
  );
  background-size: 190px 190px;
  mix-blend-mode: screen;
  animation: rainFall 1.6s linear infinite;
}

@keyframes rainFall {
  from { transform: translate3d(0, -120px, 0); }
  to { transform: translate3d(-46px, 120px, 0); }
}

.world-bg__mark {
  position: absolute;
  right: 1.8%;
  bottom: 4%;
  color: rgba(184, 245, 176, 0.026);
  font-family: var(--font-mono);
  font-size: clamp(150px, 23vw, 390px);
  font-weight: 800;
  line-height: 0.68;
  letter-spacing: -0.09em;
  text-shadow: 0 0 90px rgba(184, 245, 176, 0.06);
  user-select: none;
}

/* Containment core behind the fault layer -------------------------- */

.board {
  position: relative;
  isolation: isolate;
}

.board-core {
  --core: var(--phosphor);
  position: absolute;
  inset: 48px 0 118px;
  z-index: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.62;
  transition: opacity 1.2s var(--ease);
}

body[data-mood="critical"] .board-core { --core: var(--red); opacity: 0.7; }
body[data-mood="unstable"] .board-core { --core: var(--violet); opacity: 0.66; }
body[data-mood="breach"] .board-core { --core: var(--cyan); opacity: 0.72; }

.board-core__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--core) 17%, transparent);
}

.board-core__ring--outer {
  width: min(58vh, 500px);
  aspect-ratio: 1;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--core) 13%, transparent);
  animation: coreSpin 90s linear infinite;
}

.board-core__ring--mid {
  width: min(41vh, 350px);
  aspect-ratio: 1;
  border-color: color-mix(in srgb, var(--core) 11%, transparent);
  box-shadow:
    inset 0 0 50px color-mix(in srgb, var(--core) 5%, transparent),
    0 0 50px color-mix(in srgb, var(--core) 3%, transparent);
  animation: coreSpin 46s linear infinite reverse;
}

.board-core__ring--inner {
  width: min(23vh, 194px);
  aspect-ratio: 1;
  border-color: color-mix(in srgb, var(--core) 22%, transparent);
  box-shadow:
    inset 0 0 24px color-mix(in srgb, var(--core) 7%, transparent),
    0 0 30px color-mix(in srgb, var(--core) 5%, transparent);
}

.board-core__ring--mid::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    color-mix(in srgb, var(--core) 34%, transparent) 0 1.2deg,
    transparent 1.2deg 15deg
  );
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
}

.board-core__cross::before,
.board-core__cross::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(78vh, 660px);
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--core) 26%, transparent), transparent);
  transform: translate(-50%, -50%);
  opacity: 0.5;
}

.board-core__cross::after {
  width: min(52vh, 440px);
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0.38;
}

.board-core__label {
  position: absolute;
  bottom: 2.5%;
  left: 50%;
  transform: translateX(-50%);
  color: color-mix(in srgb, var(--core) 42%, transparent);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.3em;
  white-space: nowrap;
}

.board > .board-head,
.board > .fault-list,
.board > .patch-bay,
.board > .rogue-queue {
  position: relative;
  z-index: 1;
}

@keyframes coreSpin {
  to { transform: rotate(360deg); }
}

@keyframes introSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Card and control micro-polish ------------------------------------ */

.fault-card:hover:not(.is-covered) {
  transform: translate(2px, -1px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--tone) 16%, transparent),
    0 12px 26px rgba(0, 0, 0, 0.28),
    0 0 24px color-mix(in srgb, var(--tone) 7%, transparent);
}

.fault-card.is-selected {
  animation: targetLockPulse 2.6s ease-in-out infinite;
}

@keyframes targetLockPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(184, 245, 176, 0.14), 0 0 26px rgba(184, 245, 176, 0.05); }
  50% { box-shadow: 0 0 0 1px rgba(184, 245, 176, 0.26), 0 0 38px rgba(184, 245, 176, 0.09); }
}

.icon-btn:hover {
  transform: translateY(-1px);
}

.topbar::after {
  animation: topbarSignal 6s ease-in-out infinite;
}

@keyframes topbarSignal {
  0%, 100% { opacity: 0.72; box-shadow: 0 0 12px rgba(184, 245, 176, 0.45); }
  50% { opacity: 1; box-shadow: 0 0 20px rgba(184, 245, 176, 0.8); }
}

/* Intro schematic rings ------------------------------------------- */

.intro-rings {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.intro-rings i {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px solid rgba(184, 245, 176, 0.1);
  transform: translate(-50%, -50%);
}

.intro-rings i:nth-child(1) {
  width: min(92vw, 1040px);
  aspect-ratio: 1;
  border-style: dashed;
  border-color: rgba(184, 245, 176, 0.08);
  animation: introSpin 140s linear infinite;
}

.intro-rings i:nth-child(2) {
  width: min(64vw, 720px);
  aspect-ratio: 1;
  border-color: rgba(120, 220, 232, 0.07);
  animation: introSpin 90s linear infinite reverse;
}

.intro-rings i:nth-child(3) {
  width: min(38vw, 430px);
  aspect-ratio: 1;
  border-color: rgba(255, 194, 102, 0.06);
  box-shadow: inset 0 0 80px rgba(184, 245, 176, 0.025);
}

.intro-shell {
  position: relative;
  z-index: 1;
}

/* Real-time mixer spectrum ---------------------------------------- */

.audio-viz {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 34px;
  margin-top: 10px;
  padding: 5px 6px 4px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(184, 245, 176, 0.028), transparent 45%),
    rgba(2, 5, 3, 0.42);
}

.audio-viz i {
  flex: 1 1 0;
  min-width: 2px;
  height: 8%;
  background: linear-gradient(0deg, rgba(121, 223, 143, 0.32), var(--phosphor));
  box-shadow: 0 0 7px rgba(184, 245, 176, 0.14);
  opacity: 0.7;
  transition: height 0.07s linear, opacity 0.25s;
}

.audio-panel.is-muted .audio-viz i {
  height: 4% !important;
  opacity: 0.18;
  box-shadow: none;
}

@media (max-width: 760px) {
  .world-bg__mark { display: none; }
  .world-bg__beacons i:nth-child(3) { display: none; }
  .board-core { inset: 44px 0 150px; opacity: 0.4; }
  .board-core__ring--outer { width: min(46vh, 340px); }
  .board-core__ring--mid { width: min(33vh, 240px); }
  .board-core__ring--inner { width: min(19vh, 140px); }
}

/* Fault dossier ------------------------------------------------------ */

.fault-list {
  display: grid;
  grid-auto-rows: minmax(270px, 1fr);
  align-content: stretch;
}

.fault-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 190px;
}

.fault-card__top,
.fault-card__main,
.fault-card__foot {
  position: relative;
  z-index: 2;
}

.fault-card__main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(210px, 0.52fr);
  align-items: start;
  gap: 16px;
  flex: 1 1 auto;
}

.fault-card__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

.fault-card__flavor {
  margin-top: 9px;
  padding-left: 10px;
  border-left: 2px solid color-mix(in srgb, var(--tone) 38%, transparent);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.fault-card__schematic {
  position: relative;
  flex: 1 1 auto;
  min-height: 96px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--tone) 14%, transparent);
  background:
    radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--tone) 8%, transparent), transparent 42%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 14px),
    rgba(3, 8, 5, 0.42);
}

.fault-schematic__plot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fault-schematic__grid {
  fill: none;
  stroke: color-mix(in srgb, var(--tone) 9%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.fault-schematic__limit {
  fill: none;
  stroke: color-mix(in srgb, var(--tone) 38%, transparent);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
  opacity: 0.55;
}

.fault-schematic__trace {
  fill: none;
  stroke: color-mix(in srgb, var(--tone) 74%, white);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  opacity: 0.78;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--tone) 20%, transparent));
}

.fault-schematic__node {
  fill: var(--tone);
  opacity: 0.9;
  filter: drop-shadow(0 0 5px var(--tone));
}

.fault-schematic__reticle {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent);
  border-radius: 50%;
}

.fault-schematic__reticle::before,
.fault-schematic__reticle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: color-mix(in srgb, var(--tone) 34%, transparent);
  transform: translate(-50%, -50%);
}

.fault-schematic__reticle::before {
  width: 58px;
  height: 1px;
}

.fault-schematic__reticle::after {
  width: 1px;
  height: 58px;
}

.fault-schematic__tag,
.fault-schematic__sev {
  position: absolute;
  top: 8px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 0.12em;
}

.fault-schematic__tag {
  left: 10px;
  color: var(--dim);
}

.fault-schematic__sev {
  right: 10px;
  color: color-mix(in srgb, var(--tone) 82%, white);
}


.fault-schematic__ring {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(46%, 160px);
  aspect-ratio: 1;
  border: 1px dashed color-mix(in srgb, var(--tone) 28%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: coreSpin 34s linear infinite;
}

.fault-schematic__ring--alt {
  width: min(28%, 100px);
  border-style: solid;
  border-color: color-mix(in srgb, var(--tone) 36%, transparent);
  animation: coreSpin 22s linear infinite reverse;
}

.fault-schematic__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tone), transparent);
  opacity: 0.55;
  animation: schematicScan 4.8s ease-in-out infinite alternate;
}

.fault-schematic__label {
  position: absolute;
  left: 10px;
  bottom: 7px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 0.14em;
}

.fault-schematic__value {
  position: absolute;
  right: 10px;
  bottom: 7px;
  color: color-mix(in srgb, var(--tone) 78%, white);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
}

/* Per-fault schematic language: one visual grammar per fault family. */
.fault-schematic__trace--dim {
  opacity: 0.28;
  stroke-dasharray: 3 4;
}

.fault-schematic__area {
  fill: color-mix(in srgb, var(--tone) 11%, transparent);
  stroke: none;
}

.fault-schematic__orbit {
  fill: none;
  stroke: color-mix(in srgb, var(--tone) 22%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.fault-schematic__orbit--ghost {
  stroke-dasharray: 3 5;
  opacity: 0.55;
}

.fault-schematic__blip {
  fill: color-mix(in srgb, var(--tone) 88%, white);
  filter: drop-shadow(0 0 5px var(--tone));
}

.fault-schematic__sweep {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: faultRadarSweep 8s linear infinite;
}

.fault-schematic__sweep path {
  fill: color-mix(in srgb, var(--tone) 11%, transparent);
  stroke: color-mix(in srgb, var(--tone) 30%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

@keyframes faultRadarSweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.fault-schematic__cell {
  fill: color-mix(in srgb, var(--tone) 4%, transparent);
  stroke: color-mix(in srgb, var(--tone) 13%, transparent);
  stroke-width: 0.7;
  vector-effect: non-scaling-stroke;
}

.fault-schematic__cell.is-on {
  fill: color-mix(in srgb, var(--tone) 24%, transparent);
}

.fault-schematic__cell.is-bad {
  stroke: color-mix(in srgb, var(--red) 78%, transparent);
  fill: color-mix(in srgb, var(--red) 18%, transparent);
}

.fault-schematic__bar {
  fill: color-mix(in srgb, var(--tone) 16%, transparent);
  stroke: color-mix(in srgb, var(--tone) 34%, transparent);
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
}

.fault-schematic__bar.is-bad {
  fill: color-mix(in srgb, var(--red) 16%, transparent);
  stroke: color-mix(in srgb, var(--red) 62%, transparent);
}

.fault-schematic__dot {
  fill: color-mix(in srgb, var(--tone) 52%, transparent);
}

.fault-schematic__dot.is-bad {
  fill: color-mix(in srgb, var(--red) 82%, transparent);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--red) 38%, transparent));
}

.fault-schematic__arc {
  fill: none;
  stroke: color-mix(in srgb, var(--tone) 34%, transparent);
  stroke-width: 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.fault-schematic__needle {
  stroke: color-mix(in srgb, var(--tone) 86%, white);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--tone) 28%, transparent));
}

.fault-schematic__heat {
  fill: color-mix(in srgb, var(--tone) 6%, transparent);
}

.fault-schematic__panel {
  fill: color-mix(in srgb, var(--tone) 5%, transparent);
  stroke: color-mix(in srgb, var(--tone) 26%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.fault-schematic__circuit {
  fill: none;
  stroke: color-mix(in srgb, var(--tone) 42%, transparent);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}

.fault-schematic__drop {
  fill: color-mix(in srgb, var(--tone) 66%, transparent);
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--tone) 24%, transparent));
}

.fault-schematic__drop.is-bad {
  fill: color-mix(in srgb, var(--red) 72%, transparent);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--red) 32%, transparent));
}

.fault-schematic__trap-mark {
  fill: none;
  stroke: color-mix(in srgb, var(--red) 78%, white);
  stroke-width: 1.6;
  stroke-dasharray: 3 5;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--red) 28%, transparent));
}

.fault-schematic__core {
  fill: color-mix(in srgb, var(--tone) 16%, transparent);
  stroke: color-mix(in srgb, var(--tone) 72%, white);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--tone) 24%, transparent));
}

.fault-schematic__crack {
  fill: none;
  stroke: color-mix(in srgb, var(--red) 72%, white);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  opacity: 0.8;
}

.fault-schematic--trap .fault-schematic__blip {
  fill: color-mix(in srgb, var(--red) 86%, white);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--red) 48%, transparent));
}

.fault-schematic--radar .fault-schematic__scan,
.fault-schematic--echo .fault-schematic__scan {
  opacity: 0.75;
}


@keyframes schematicScan {
  from { transform: translateY(0); opacity: 0.25; }
  to { transform: translateY(120px); opacity: 0.7; }
}

.fault-card__trace {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 30px;
  margin-top: 16px;
  opacity: 0.55;
}

.fault-card__trace i {
  flex: 1 1 0;
  min-width: 2px;
  height: 24%;
  background: linear-gradient(0deg, transparent, var(--tone));
}

.fault-card__trace i:nth-child(3n) { height: 58%; }
.fault-card__trace i:nth-child(4n) { height: 82%; }
.fault-card__trace i:nth-child(5n) { height: 40%; }
.fault-card__trace i:nth-child(7n) { height: 68%; }

.fault-card__telemetry {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 14px;
  border-left: 1px dashed rgba(184, 245, 176, 0.12);
}

.fault-metric {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.04em;
}

.fault-metric b {
  color: color-mix(in srgb, var(--tone) 78%, white);
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

.fault-card__hint {
  margin-top: auto;
  padding-top: 9px;
  color: var(--dim);
  font-size: 9.5px;
  line-height: 1.55;
}

.fault-card__sigil {
  position: absolute;
  right: 12px;
  bottom: -36px;
  z-index: 0;
  color: var(--tone);
  font-family: var(--font-mono);
  font-size: clamp(120px, 16vw, 230px);
  font-weight: 800;
  line-height: 0.7;
  opacity: 0.035;
  pointer-events: none;
  user-select: none;
}

/* End report legibility --------------------------------------------- */

.end-card {
  width: min(980px, 94vw);
  padding: 28px 32px 26px;
  scrollbar-width: thin;
  scrollbar-color: rgba(184, 245, 176, 0.28) transparent;
}

.end-card::-webkit-scrollbar,
.end-summary::-webkit-scrollbar {
  width: 6px;
}

.end-card::-webkit-scrollbar-thumb,
.end-summary::-webkit-scrollbar-thumb {
  background: rgba(184, 245, 176, 0.28);
}

.end-copy {
  margin-top: 10px;
}

.end-report {
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  margin-top: 12px;
}

.end-summary {
  min-height: 0;
  max-height: 284px;
}

#endSummary {
  padding-bottom: 6px;
}

.end-stats {
  margin-top: 18px;
}

.end-summary__facts span {
  font-size: 9.5px;
}

.end-summary__facts b {
  font-size: 11.5px;
}

.end-summary__log-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0 4px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
}

.end-log-line {
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px;
  padding: 4px 0 4px 8px;
  border-left: 2px solid transparent;
}

.end-log-line > span {
  color: var(--amber);
  font-size: 9px;
}

.end-log-line p {
  color: #d3e5d8;
  font-size: 10.5px;
  line-height: 1.5;
}

.end-log-line.is-danger { border-left-color: rgba(255, 100, 100, 0.55); }
.end-log-line.is-danger p { color: #ffb4af; }
.end-log-line.is-warn { border-left-color: rgba(240, 196, 106, 0.5); }
.end-log-line.is-warn p { color: #efd39b; }
.end-log-line.is-good { border-left-color: rgba(121, 223, 143, 0.45); }
.end-log-line.is-good p { color: #bdecc4; }

@media (max-width: 900px) {
  .end-card {
    padding: 28px 26px 24px;
  }

  .end-report {
    grid-template-columns: minmax(0, 0.68fr) minmax(0, 1.32fr);
    gap: 10px;
  }
}

@media (max-width: 760px) {
  .fault-list {
    display: flex;
    align-content: initial;
  }

  .fault-card {
    flex: 0 0 auto;
    min-height: 0;
  }

  .fault-card__main {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
  }

  .fault-card__telemetry,
  .fault-card__sigil,
  .fault-card__trace,
  .fault-card__schematic {
    display: none;
  }
}

@media (max-width: 620px) {
  .end-report {
    grid-template-columns: 1fr;
  }

  .end-summary {
    max-height: 300px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .world-bg__beacons i,
  .world-bg__rain,
  .board-core__ring,
  .intro-rings i,
  .topbar::after,
  .fault-card.is-selected {
    animation: none;
  }
}


/* ================================================================== */
/* v2.2.0 閳?HARD LIGHT / INDUSTRIAL DOSSIER ART DIRECTION              */
/* Code-native only: no external images. Appended after all legacy CSS */
/* ================================================================== */

:root {
  --brass: #d8ad63;
  --brass-dim: #8d6c39;
  --steel: #101a16;
  --steel-deep: #060d0a;
  --hazard: #e7a94f;
  --alert: #ff6b5e;
  --paper: #d8d2bf;
  --ink: #d9e4d7;
  --v2-line: rgba(203, 176, 116, 0.22);
  --v2-line-soft: rgba(203, 176, 116, 0.1);
  --v2-glow: 0 0 22px rgba(184, 245, 176, 0.12);
}

body {
  background:
    radial-gradient(ellipse 90% 55% at 52% -8%, rgba(49, 92, 72, 0.22), transparent 62%),
    radial-gradient(ellipse 55% 45% at 8% 100%, rgba(74, 57, 24, 0.16), transparent 68%),
    linear-gradient(180deg, #050a08 0%, #07100c 46%, #040806 100%);
}

.app-shell {
  position: relative;
  isolation: isolate;
}

.app-shell::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.38), transparent 8%, transparent 92%, rgba(0, 0, 0, 0.38)),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.055) 0 1px, transparent 1px 4px);
  opacity: 0.7;
}

/* Panels become riveted instrument housings ------------------------- */

.panel,
.topbar {
  border-color: var(--v2-line);
  background:
    linear-gradient(180deg, rgba(19, 35, 28, 0.96), rgba(4, 11, 8, 0.97)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 7px);
  box-shadow:
    inset 0 1px 0 rgba(226, 203, 154, 0.16),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    0 18px 38px rgba(0, 0, 0, 0.3);
}

.panel::before {
  width: 24px;
  height: 24px;
  border-color: rgba(216, 173, 99, 0.72);
  border-width: 1px;
  filter: drop-shadow(0 0 4px rgba(216, 173, 99, 0.25));
}

.panel::after {
  width: 24px;
  height: 24px;
  border-color: rgba(216, 173, 99, 0.46);
}

.panel-heading {
  position: relative;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--v2-line-soft);
}

.panel-heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 42px;
  height: 1px;
  background: var(--brass);
  box-shadow: 0 0 8px rgba(216, 173, 99, 0.6);
}

.panel-heading h2 {
  letter-spacing: 0.14em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}

/* Left vitals: gauges and stamped index plates ---------------------- */

.resource-card {
  position: relative;
  min-height: 82px;
  padding: 11px 11px 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, rgba(203, 176, 116, 0.1));
  border-left: 2px solid color-mix(in srgb, var(--accent) 76%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 34%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.016) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, rgba(12, 25, 19, 0.94), rgba(4, 10, 7, 0.96));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--accent) 18%, transparent),
    inset 0 -10px 18px rgba(0, 0, 0, 0.24);
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
}

.resource-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  opacity: 0.8;
}

.resource-card::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
  opacity: 0.55;
}

.resource-card__index {
  position: absolute;
  right: 9px;
  bottom: 4px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  opacity: 0.26;
}

.resource-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  clip-path: polygon(25% 0, 100% 0, 100% 75%, 75% 100%, 0 100%, 0 25%);
}

.resource-icon svg {
  width: 17px;
  height: 17px;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 55%, transparent));
}

.resource-value {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.resource-gauge {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-left: 7px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--fill, 0) * 1turn), rgba(255, 255, 255, 0.1) 0);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 25%, transparent);
}

.resource-gauge::before {
  content: '';
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #07100c;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);
}

.resource-gauge i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 7px var(--accent);
  transform: rotate(calc(var(--fill, 0) * 360deg)) translateY(-10px);
}

.segment-bar {
  gap: 2px;
  margin-top: 10px;
}

.segment {
  height: 5px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.55);
}

.segment.is-filled {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 62%, #ffffff 4%), var(--accent));
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 35%, transparent);
}

.resource-meta {
  margin-top: 6px;
  letter-spacing: 0.02em;
}

.resource-card.is-critical {
  border-color: color-mix(in srgb, var(--alert) 55%, transparent);
  animation: v2Critical 1.8s ease-in-out infinite;
}

@keyframes v2Critical {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 107, 94, 0.14), 0 0 0 rgba(255, 107, 94, 0); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 107, 94, 0.28), 0 0 18px rgba(255, 107, 94, 0.12); }
}

/* Hand cards: layered physical patch plates ------------------------- */

.patch-card {
  min-height: 176px;
  padding: 0 9px 8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--card-accent) 34%, rgba(203, 176, 116, 0.12));
  background:
    radial-gradient(ellipse at 86% 0%, color-mix(in srgb, var(--card-accent) 16%, transparent), transparent 46%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px),
    linear-gradient(165deg, rgba(18, 34, 27, 0.97), rgba(5, 12, 9, 0.98));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--card-accent) 18%, transparent),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    0 10px 20px rgba(0, 0, 0, 0.28);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

.patch-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--card-accent) 16%, transparent) 0 1px, transparent 1px) 0 0 / 100% 100% no-repeat,
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--card-accent) 14%, transparent), transparent 38%);
  opacity: 0.8;
}

.patch-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 30px;
  width: 38px;
  height: 2px;
  background: var(--card-accent);
  box-shadow: 0 0 9px var(--card-accent);
  opacity: 0.7;
}

.patch-card > * {
  position: relative;
  z-index: 2;
}

.patch-card__watermark {
  position: absolute;
  right: -18px;
  bottom: 20px;
  z-index: 1;
  width: 112px;
  height: 112px;
  color: var(--card-accent);
  opacity: 0.06;
  transform: rotate(-9deg);
  pointer-events: none;
}

.patch-card__watermark svg {
  width: 100%;
  height: 100%;
}

.patch-card__top {
  margin: 0 -9px 8px;
  padding: 7px 9px 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--card-accent) 22%, transparent);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.12));
}

.patch-code {
  color: var(--card-accent);
  text-shadow: 0 0 8px color-mix(in srgb, var(--card-accent) 45%, transparent);
}

.cost-badge {
  min-width: 38px;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--card-accent) 48%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card-accent) 20%, transparent), rgba(0, 0, 0, 0.42));
  color: #f2d69e;
  font-weight: 700;
  text-align: center;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.patch-card__title-row {
  gap: 8px;
}

.patch-card__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--card-accent) 36%, transparent);
  background: color-mix(in srgb, var(--card-accent) 8%, transparent);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.patch-card__icon svg {
  width: 17px;
  height: 17px;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--card-accent) 55%, transparent));
}

.patch-card__title-row h4 {
  font-size: 14px;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 0 #000;
}

.patch-card__effect {
  margin-top: 5px;
}

.effect-chip {
  border-left-width: 2px;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%);
  background: rgba(0, 0, 0, 0.28);
}

.patch-card__foot {
  margin-top: auto;
  padding-top: 7px;
  border-top: 1px dashed color-mix(in srgb, var(--card-accent) 18%, transparent);
}

.cover-cta {
  border: 1px solid color-mix(in srgb, var(--card-accent) 38%, transparent);
  background: color-mix(in srgb, var(--card-accent) 8%, transparent);
  padding: 2px 6px;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%);
}

.patch-card.is-playable {
  border-color: color-mix(in srgb, var(--card-accent) 62%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--card-accent) 14%, transparent),
    0 0 18px color-mix(in srgb, var(--card-accent) 12%, transparent),
    0 12px 24px rgba(0, 0, 0, 0.3);
}

.patch-card.is-playable:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--card-accent) 84%, transparent);
}

.patch-card.is-fault {
  background:
    linear-gradient(90deg, rgba(255, 107, 94, 0.08), transparent 32%),
    repeating-linear-gradient(135deg, rgba(255, 107, 94, 0.035) 0 1px, transparent 1px 5px),
    linear-gradient(165deg, rgba(33, 17, 14, 0.97), rgba(9, 8, 7, 0.98));
}

.patch-card.is-locked {
  filter: saturate(0.55) brightness(0.84);
}

/* Fault dossier: hazard frame, watermark, instrument panel ---------- */

.fault-card {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--tone, var(--brass)) 32%, rgba(203, 176, 116, 0.14));
  background:
    radial-gradient(ellipse at 8% 0%, color-mix(in srgb, var(--tone, var(--brass)) 9%, transparent), transparent 40%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(15, 28, 22, 0.97), rgba(4, 10, 7, 0.98));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--tone, var(--brass)) 16%, transparent),
    0 14px 26px rgba(0, 0, 0, 0.3);
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%);
}

.fault-card::before {
  height: 3px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--tone, var(--brass)) 70%, transparent) 0 9px, transparent 9px 19px);
  opacity: 0.42;
}

.fault-card__sigil {
  color: var(--tone, var(--brass));
  opacity: 0.03;
  font-size: 112px;
  right: 10px;
  top: 50%;
  transform: translateY(-42%) rotate(-8deg);
}

.fault-card__top {
  margin: -1px -1px 8px;
  padding: 8px 10px 7px;
  border-bottom: 1px solid color-mix(in srgb, var(--tone, var(--brass)) 22%, transparent);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.12));
}

.fault-code {
  color: var(--tone, var(--brass));
  text-shadow: 0 0 9px color-mix(in srgb, var(--tone, var(--brass)) 42%, transparent);
}

.fault-card__schematic {
  border: 1px solid color-mix(in srgb, var(--tone, var(--brass)) 22%, transparent);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.12)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 9px);
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.fault-schematic__tag,
.fault-schematic__sev,
.fault-schematic__label,
.fault-schematic__value {
  background: rgba(4, 10, 7, 0.72);
  padding: 1px 4px;
  letter-spacing: 0.12em;
}

.fault-card__telemetry {
  border-left: 1px solid color-mix(in srgb, var(--tone, var(--brass)) 18%, transparent);
  padding-left: 12px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.14), transparent 70%);
}

.fault-card__hint {
  border-top: 1px dashed rgba(203, 176, 116, 0.14);
  padding-top: 7px;
}

.fault-list {
  gap: 10px;
}

/* Patch bay: mechanical rack slots ---------------------------------- */

.bay-grid {
  gap: 8px;
}

.bay-empty,
.bay-patch {
  position: relative;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.bay-empty {
  border: 1px dashed rgba(203, 176, 116, 0.18);
  background:
    radial-gradient(circle at 0 0, rgba(203, 176, 116, 0.16) 0 2px, transparent 3px),
    radial-gradient(circle at 100% 100%, rgba(203, 176, 116, 0.12) 0 2px, transparent 3px),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(9, 18, 13, 0.7), rgba(4, 9, 6, 0.8));
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.38);
}

.bay-empty__index,
.bay-patch__slot {
  position: absolute;
  top: 5px;
  left: 7px;
  color: var(--brass);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  opacity: 0.34;
}

.bay-patch {
  border-top: 2px solid color-mix(in srgb, var(--card-accent, var(--cyan)) 70%, transparent);
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--card-accent, var(--cyan)) 10%, transparent), transparent 50%),
    linear-gradient(180deg, rgba(15, 29, 22, 0.96), rgba(4, 10, 7, 0.97));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.28);
}

.bay-patch__top {
  padding-top: 2px;
}

.bay-patch h4 {
  text-shadow: 0 1px 0 #000;
}

.detach-btn {
  border: 1px solid rgba(203, 176, 116, 0.18);
  background: linear-gradient(180deg, rgba(203, 176, 116, 0.08), rgba(0, 0, 0, 0.24));
  letter-spacing: 0.03em;
}

.detach-btn:hover:not(:disabled) {
  border-color: rgba(216, 173, 99, 0.55);
  color: #f4d7a1;
}

/* Maintenance controls: instrument keys ----------------------------- */

.maint-btn {
  position: relative;
  overflow: hidden;
  min-height: 66px;
  padding: 9px 9px 12px;
  border: 1px solid color-mix(in srgb, var(--maint-color, var(--cyan)) 26%, rgba(203, 176, 116, 0.12));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--maint-color, var(--cyan)) 7%, transparent), transparent 46%),
    linear-gradient(180deg, rgba(15, 29, 22, 0.96), rgba(4, 10, 7, 0.97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}

.maint-btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--maint-color, var(--cyan)) 62%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 15px color-mix(in srgb, var(--maint-color, var(--cyan)) 11%, transparent);
}

.maint-btn > svg {
  width: 21px;
  height: 21px;
  color: var(--maint-color, var(--cyan));
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--maint-color, var(--cyan)) 45%, transparent));
}

.maint-btn__led {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--maint-color, var(--cyan));
  box-shadow: 0 0 7px var(--maint-color, var(--cyan));
  opacity: 0.9;
}

.maint-btn__meter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.05);
}

.maint-btn__meter i {
  display: block;
  width: var(--maint-level, 0%);
  height: 100%;
  background: var(--maint-color, var(--cyan));
  box-shadow: 0 0 6px var(--maint-color, var(--cyan));
  opacity: 0.55;
}

.maint-btn.is-used {
  filter: saturate(0.3) brightness(0.8);
}

.maint-btn.is-used::after {
  content: 'USED';
  position: absolute;
  right: 6px;
  bottom: 7px;
  color: rgba(216, 173, 99, 0.55);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.16em;
}

/* End-day control: physical lever ----------------------------------- */

.end-day-btn {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(216, 173, 99, 0.34);
  background:
    linear-gradient(90deg, rgba(216, 173, 99, 0.16), transparent 22%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, rgba(31, 45, 30, 0.98), rgba(8, 17, 11, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 190, 0.16),
    0 10px 24px rgba(0, 0, 0, 0.3);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

.end-day-btn__led {
  position: absolute;
  top: 9px;
  left: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--phosphor);
  box-shadow: 0 0 8px var(--phosphor);
}

.end-day-btn__arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(184, 245, 176, 0.32);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 245, 176, 0.18), transparent 70%);
  box-shadow: 0 0 12px rgba(184, 245, 176, 0.12);
}

.end-day-btn:hover:not(:disabled) .end-day-btn__arrow {
  background: var(--phosphor);
  color: #07100c;
  box-shadow: 0 0 18px rgba(184, 245, 176, 0.4);
}

/* Start screen: reactor schematic hero ------------------------------ */

.intro-visual {
  position: absolute;
  right: 1.5%;
  top: 7%;
  z-index: 0;
  width: min(620px, 50vw);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0.72;
}

.intro-visual__grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(184, 245, 176, 0.055) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(0deg, rgba(184, 245, 176, 0.055) 1px, transparent 1px) 0 0 / 44px 44px;
  mask-image: radial-gradient(circle at 50% 50%, #000 10%, transparent 72%);
}

.intro-visual__schematic {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.intro-visual__rings circle {
  fill: none;
  stroke: rgba(184, 245, 176, 0.2);
  stroke-width: 1;
}

.intro-visual__rings circle:nth-child(2) {
  stroke-dasharray: 2 8;
  stroke: rgba(216, 173, 99, 0.34);
}

.intro-visual__rings circle:nth-child(3) {
  stroke: rgba(184, 245, 176, 0.12);
}

.intro-visual__rings circle:nth-child(4) {
  stroke-dasharray: 42 14;
  stroke: rgba(184, 245, 176, 0.4);
}

.intro-visual__rings circle:nth-child(5) {
  stroke: rgba(216, 173, 99, 0.52);
}

.intro-visual__ticks circle {
  fill: none;
  stroke: rgba(216, 173, 99, 0.45);
  stroke-width: 4;
  stroke-dasharray: 1 4;
}

.intro-visual__ticks circle:nth-child(2) {
  stroke: rgba(184, 245, 176, 0.34);
  stroke-dasharray: 1 5;
}

.intro-visual__spokes path {
  fill: none;
  stroke: rgba(184, 245, 176, 0.15);
  stroke-width: 1;
}

.intro-visual__spokes path:nth-child(2) {
  stroke: rgba(216, 173, 99, 0.35);
  stroke-width: 2;
}

.intro-visual__core polygon {
  fill: rgba(184, 245, 176, 0.04);
  stroke: rgba(184, 245, 176, 0.42);
  stroke-width: 1;
}

.intro-visual__core circle {
  fill: none;
  stroke: rgba(184, 245, 176, 0.46);
}

.intro-visual__core circle:nth-of-type(2) {
  fill: rgba(184, 245, 176, 0.85);
  stroke: none;
  filter: drop-shadow(0 0 9px rgba(184, 245, 176, 0.9));
}

.intro-visual__core path {
  fill: none;
  stroke: rgba(216, 173, 99, 0.8);
  stroke-width: 1.4;
}

.intro-visual__arc {
  fill: none;
  stroke: rgba(184, 245, 176, 0.42);
  stroke-width: 2;
  stroke-dasharray: 120 340;
  animation: v2Arc 9s linear infinite;
}

.intro-visual__arc--red {
  stroke: rgba(255, 107, 94, 0.55);
  animation-direction: reverse;
  animation-duration: 13s;
}

@keyframes v2Arc {
  to { stroke-dashoffset: -460; }
}

.intro-visual__readout {
  position: absolute;
  left: 8%;
  bottom: 12%;
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  border-left: 2px solid var(--brass);
  background: rgba(4, 10, 7, 0.72);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  color: rgba(216, 173, 99, 0.7);
}

.intro-visual__readout b {
  color: var(--phosphor);
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.08em;
}

.intro-visual__readout em {
  color: var(--phosphor);
  font-style: normal;
}

.intro-visual__legend {
  position: absolute;
  right: 9%;
  bottom: 14%;
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(184, 245, 176, 0.58);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
}

.intro-visual__legend i {
  width: 22px;
  height: 1px;
  background: var(--phosphor);
  box-shadow: 0 0 6px var(--phosphor);
}

.intro-visual__legend b {
  color: var(--brass);
  font-weight: 400;
}

.intro-visual__side {
  position: absolute;
  right: -18px;
  top: 46%;
  transform: rotate(90deg);
  transform-origin: right center;
  color: rgba(216, 173, 99, 0.4);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.24em;
  white-space: nowrap;
}

.intro-shell {
  position: relative;
  z-index: 2;
}

.briefing {
  position: relative;
  z-index: 3;
  border: 1px solid rgba(216, 173, 99, 0.26);
  background:
    linear-gradient(90deg, rgba(216, 173, 99, 0.07), transparent 26%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.016) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, rgba(16, 30, 23, 0.98), rgba(5, 12, 9, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 190, 0.12),
    0 20px 50px rgba(0, 0, 0, 0.38);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

.briefing__stamp {
  position: absolute;
  top: 12px;
  right: 14px;
  padding: 3px 6px;
  border: 2px solid rgba(255, 107, 94, 0.46);
  color: rgba(255, 107, 94, 0.6);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  transform: rotate(-4deg);
  opacity: 0.75;
  pointer-events: none;
}

.intro-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 15px;
  margin-top: 16px;
  padding-top: 9px;
  border-top: 1px solid rgba(203, 176, 116, 0.14);
  color: rgba(216, 173, 99, 0.6);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
}

.intro-status span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.intro-status i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--phosphor);
  box-shadow: 0 0 5px var(--phosphor);
}

.intro-status b {
  color: rgba(216, 210, 191, 0.8);
  font-weight: 400;
}

.intro-status__stamp {
  margin-left: auto;
  color: rgba(255, 107, 94, 0.55);
}

.start-btn {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(184, 245, 176, 0.42);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 0 22px rgba(184, 245, 176, 0.08);
}

.start-btn__led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  flex: 0 0 auto;
}

/* End screen: after-action dossier -------------------------------- */

.end-card {
  position: relative;
  overflow-y: auto;
  padding-left: 50px;
  border: 1px solid rgba(216, 173, 99, 0.3);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(216, 173, 99, 0.08), transparent 42%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, rgba(14, 27, 21, 0.99), rgba(4, 10, 7, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 190, 0.14),
    0 30px 70px rgba(0, 0, 0, 0.5);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}

.end-card__hazard {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  background: repeating-linear-gradient(180deg, rgba(216, 173, 99, 0.65) 0 10px, rgba(4, 10, 7, 0.9) 10px 20px);
  opacity: 0.65;
  pointer-events: none;
}

.end-card.is-loss .end-card__hazard {
  background: repeating-linear-gradient(180deg, rgba(255, 107, 94, 0.72) 0 10px, rgba(10, 5, 4, 0.9) 10px 20px);
}

.end-card__stamp {
  position: absolute;
  top: 22px;
  right: 26px;
  padding: 5px 8px;
  border: 2px solid rgba(255, 107, 94, 0.4);
  color: rgba(255, 107, 94, 0.55);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  transform: rotate(-3deg);
  opacity: 0.7;
  pointer-events: none;
}

.end-rank-rings {
  position: absolute;
  right: -110px;
  top: -110px;
  width: 330px;
  height: 330px;
  pointer-events: none;
  opacity: 0.16;
}

.end-rank-rings i {
  position: absolute;
  inset: 0;
  border: 1px solid var(--brass);
  border-radius: 50%;
}

.end-rank-rings i:nth-child(2) {
  inset: 34px;
  border-style: dashed;
  opacity: 0.6;
}

.end-rank-rings i:nth-child(3) {
  inset: 78px;
  border-color: var(--phosphor);
  opacity: 0.45;
}

.end-kicker {
  color: var(--brass);
  letter-spacing: 0.18em;
}

.end-card h2 {
  text-shadow: 0 2px 0 #000, 0 0 26px rgba(184, 245, 176, 0.08);
  letter-spacing: 0.04em;
}

.end-stats {
  gap: 6px;
}

.end-stat {
  position: relative;
  padding: 9px 10px;
  border: 1px solid rgba(203, 176, 116, 0.16);
  background:
    linear-gradient(180deg, rgba(216, 173, 99, 0.06), transparent),
    rgba(0, 0, 0, 0.16);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}

.end-stat span {
  color: rgba(216, 173, 99, 0.6);
}

.end-stat strong {
  color: #e9e2cd;
  text-shadow: 0 0 10px rgba(184, 245, 176, 0.12);
}

.end-review,
.end-summary {
  border: 1px solid rgba(203, 176, 116, 0.14);
  background: rgba(0, 0, 0, 0.16);
  padding: 10px 11px;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}

.end-score-row {
  border-top: 2px solid rgba(216, 173, 99, 0.3);
  background: linear-gradient(180deg, rgba(216, 173, 99, 0.06), transparent);
  padding-top: 10px;
}

.end-score-row > div {
  position: relative;
}

.end-score-row > div:nth-child(2) {
  display: grid;
  place-items: center;
  min-width: 96px;
}

.end-score-row > div:nth-child(2)::before {
  content: '';
  position: absolute;
  width: 76px;
  height: 76px;
  border: 1px solid rgba(216, 173, 99, 0.4);
  border-radius: 50%;
  box-shadow:
    inset 0 0 16px rgba(216, 173, 99, 0.08),
    0 0 18px rgba(216, 173, 99, 0.06);
}

.end-score-row > div:nth-child(2) strong {
  position: relative;
  z-index: 1;
  font-size: 42px;
  line-height: 1;
  color: var(--brass);
  text-shadow: 0 0 18px rgba(216, 173, 99, 0.35);
}

.end-card[data-grade="S"] .end-score-row > div:nth-child(2) strong {
  color: var(--phosphor);
  text-shadow: 0 0 20px rgba(184, 245, 176, 0.55);
}

.end-card[data-grade="A"] .end-score-row > div:nth-child(2) strong {
  color: #d9e9b0;
}

.end-card[data-grade="B"] .end-score-row > div:nth-child(2) strong {
  color: #e7c987;
}

.end-card[data-grade="C"] .end-score-row > div:nth-child(2) strong {
  color: #c98f6a;
}

.end-actions .ghost-btn,
.end-actions .start-btn {
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.new-best {
  border: 1px solid rgba(216, 173, 99, 0.26);
  background: rgba(216, 173, 99, 0.06);
}

/* Responsive -------------------------------------------------------- */

@media (max-width: 1100px) {
  .intro-visual {
    right: -8%;
    width: min(560px, 56vw);
    opacity: 0.55;
  }
}

@media (max-width: 900px) {
  .end-card {
    padding-left: 38px;
  }

  .end-card__stamp {
    right: 16px;
    font-size: 7px;
  }
}

@media (max-width: 760px) {
  .intro-visual,
  .intro-status {
    display: none;
  }

  .briefing__stamp {
    top: 10px;
    right: 10px;
  }

  .resource-card {
    min-height: 76px;
    padding: 9px 9px 9px;
  }

  .resource-gauge {
    width: 21px;
    height: 21px;
    margin-left: 5px;
  }

  .resource-gauge::before {
    width: 15px;
    height: 15px;
  }

  .patch-card {
    min-height: 158px;
  }

  .end-card {
    padding-left: 26px;
  }

  .end-card__hazard {
    width: 5px;
  }

  .end-card__stamp {
    display: none;
  }

  .end-rank-rings {
    right: -170px;
    opacity: 0.1;
  }

  .end-score-row > div:nth-child(2)::before {
    width: 62px;
    height: 62px;
  }

  .end-score-row > div:nth-child(2) strong {
    font-size: 34px;
  }
}

@media (max-width: 620px) {
  .end-card {
    padding-left: 22px;
  }

  .end-stat {
    padding: 7px 8px;
  }

  .end-review,
  .end-summary {
    padding: 8px;
  }

  .intro-status__stamp {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-visual__arc,
  .resource-card.is-critical {
    animation: none;
  }
}

/* Contrast corrections after the first v2.2 render */
.panel-heading h2 {
  color: #e7ead9;
}

.intro-copy {
  color: #a8b7aa;
}

.intro-note {
  color: rgba(216, 173, 99, 0.62);
}

.briefing__head,
.briefing__foot {
  color: rgba(216, 173, 99, 0.62);
}

.briefing__steps strong {
  color: #dedac6;
}

.briefing__steps p {
  color: #a8b8a9;
}

.briefing__resource-row span {
  color: #b9c6b6;
}

.app-shell::after {
  opacity: 0.38;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 8%, transparent 92%, rgba(0, 0, 0, 0.28)),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.035) 0 1px, transparent 1px 4px);
}

.intro-visual {
  opacity: 0.58;
}

/* Keep the new dossier buttons legible on the darker panels */
.maint-btn__copy small {
  color: #93a495;
}

.maint-btn__copy strong {
  color: #e2e7d8;
}

.resource-name,
.resource-meta {
  color: #b7c5b6;
}

.resource-value {
  color: #eef1dd;
}

/* Second-pass readability and end-screen stacking */
.app-shell::after {
  opacity: 0.2;
}

.intro-copy {
  color: #c2ccbe;
}

.briefing__head {
  color: #c8ae78;
  font-size: 10px;
}

.briefing__foot {
  color: #a99b79;
}

.briefing__steps strong {
  color: #f0eddb;
  font-size: 13px;
}

.briefing__steps p {
  color: #c5cec0;
  font-size: 11px;
  line-height: 1.62;
}

.briefing__resource-row span {
  color: #d0d6c7;
}

.new-best {
  position: static;
  width: fit-content;
  margin: 10px auto 0;
  padding: 5px 10px;
  color: #f3c77c;
  background: rgba(216, 173, 99, 0.08);
  border: 1px solid rgba(216, 173, 99, 0.35);
  letter-spacing: 0.12em;
}

.end-card[data-grade="D"] .end-score-row > div:nth-child(2) strong,
.end-card[data-grade="E"] .end-score-row > div:nth-child(2) strong {
  color: #c98f6a;
  text-shadow: 0 0 14px rgba(201, 143, 106, 0.3);
}

.patch-card__title-row h4 {
  color: #edf0dd;
  font-weight: 600;
}

.patch-card__foot {
  color: #b9c7b8;
}

.patch-card.is-locked .patch-card__title-row h4 {
  color: #c2cbbb;
}

/* v2.3 contrast pass: active patch effects + fault dossier text -------- */
.bay-patch h4 {
  color: #e7f0dc;
}

.bay-patch__effect {
  gap: 3px;
  min-height: 20px;
  margin: 2px 0 1px;
  padding: 3px 4px;
  border-left: 2px solid rgba(184, 245, 176, 0.25);
  background: linear-gradient(90deg, rgba(184, 245, 176, 0.06), rgba(0, 0, 0, 0.18));
}

.bay-patch__effect-label {
  flex: 0 0 auto;
  align-self: center;
  padding-right: 4px;
  border-right: 1px solid rgba(203, 176, 116, 0.18);
  color: var(--brass);
  font-family: var(--font-mono);
  font-size: 6.5px;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.bay-patch__effect .effect-chip {
  min-height: 16px;
  padding: 1px 4px;
  font-size: 7.5px;
}

.fault-card__flavor {
  color: #b9cdb9;
}

.fault-card__title h3 {
  text-shadow: 0 1px 0 #000;
}

/* v2.3 reserved protocol slot: fills a quiet fault list with dossier art -- */
.fault-reserve {
  position: relative;
  flex: 1 1 auto;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 22px 24px;
  overflow: hidden;
  border: 1px dashed rgba(203, 176, 116, 0.24);
  background:
    repeating-linear-gradient(135deg, rgba(203, 176, 116, 0.035) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, rgba(11, 24, 17, 0.7), rgba(4, 10, 7, 0.82));
}

.fault-reserve::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: repeating-linear-gradient(90deg, rgba(231, 169, 79, 0.45) 0 8px, transparent 8px 16px);
  opacity: 0.55;
}

.fault-reserve::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(203, 176, 116, 0.08);
  pointer-events: none;
}

.fault-reserve__code {
  color: var(--brass);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.18em;
}

.fault-reserve strong {
  color: #c8d6bd;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.fault-reserve p {
  max-width: 58ch;
  margin: 0;
  color: #9fb59d;
  font-size: 10.5px;
  line-height: 1.55;
}

.fault-reserve__stamp {
  color: rgba(203, 176, 116, 0.55);
  font-family: var(--font-mono);
  font-size: 6.5px;
  letter-spacing: 0.16em;
}

.fault-reserve__sigil {
  position: absolute;
  right: 20px;
  bottom: -14px;
  color: rgba(184, 245, 176, 0.055);
  font-family: var(--font-mono);
  font-size: 108px;
  line-height: 1;
}

@media (max-width: 620px) {
  .fault-reserve {
    display: none;
  }
}

/* Single active fault: full-width dossier + a reserved-protocol strip below -- */
@media (min-width: 1000px) {
  .fault-list:has(> .fault-card:only-of-type) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
  }

  .fault-list:has(> .fault-card:only-of-type) .fault-card {
    flex: 1 1 auto;
    min-height: 0;
  }

  .fault-list:has(> .fault-card:only-of-type) .fault-reserve {
    flex: 0 0 auto;
    min-height: 96px;
  }
}

/* Short desktop windows: the full-width dossier already fills the list. */
@media (min-width: 1000px) and (max-height: 820px) {
  .fault-list:has(> .fault-card:only-of-type) .fault-reserve {
    display: none;
  }
}

/* v2.3 end-screen metadata contrast ---------------------------------- */
.end-card .micro-label {
  color: #b9c9ab;
}

.end-stat span {
  color: #e0c78f;
  font-size: 7.5px;
  letter-spacing: 0.12em;
}

.end-review p {
  color: #d4e1d2;
}

.end-summary__facts span {
  color: #b9c9ab;
}

.end-summary__log-head {
  color: #b9c9ab;
}

/* v2.3.0 label legibility: light text is not enough at 7.5 px ---------- */
.end-card .micro-label {
  color: #e3ecd8;
  font-weight: 700;
}

.end-stat span {
  color: #f0dcaa;
  font-size: 8.2px;
  font-weight: 700;
}

.end-summary__facts span {
  color: #d4e1c8;
  font-size: 8.2px;
  font-weight: 600;
}

.end-summary__log-head {
  color: #d4e1c8;
  font-weight: 700;
}

/* v2.3.1 night-forecast dossier: fill the right rail with resolution data -- */
.fault-night {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5px;
  min-height: 140px;
  margin-top: 3px;
  padding: 10px 10px 9px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--tone, var(--brass)) 20%, transparent);
  background:
    repeating-linear-gradient(0deg, transparent 0 6px, rgba(203, 176, 116, 0.16) 6px 7px) right / 12px 100% no-repeat,
    linear-gradient(180deg, rgba(4, 10, 7, 0.42), rgba(4, 10, 7, 0.12)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 8px);
}

.fault-night::after {
  content: attr(data-glyph);
  position: absolute;
  right: 2px;
  bottom: -18px;
  color: color-mix(in srgb, var(--tone, var(--brass)) 8%, transparent);
  font-family: var(--font-mono);
  font-size: 74px;
  font-weight: 800;
  line-height: 1;
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

.fault-card__hint {
  margin-top: 0;
}

.fault-night::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--tone, var(--brass)) 62%, transparent) 0 7px, transparent 7px 13px);
  opacity: 0.7;
}

.fault-night__head {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  color: color-mix(in srgb, var(--tone, var(--brass)) 72%, white);
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 0.1em;
}

.fault-night__head b {
  color: var(--brass);
  font-weight: 600;
}

.fault-night__losses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 4px;
}

.fault-night__loss {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
  min-height: 25px;
  padding: 4px 6px;
  border-left: 2px solid color-mix(in srgb, var(--red) 55%, transparent);
  background: rgba(0, 0, 0, 0.28);
}

.fault-night__loss-key {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.08em;
}

.fault-night__loss b {
  color: #ffb0a8;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1;
}

.fault-night__loss.is-none {
  border-left-color: color-mix(in srgb, var(--brass) 45%, transparent);
}

.fault-night__loss.is-none b {
  color: var(--brass);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.fault-night__loss.is-none {
  flex-wrap: wrap;
  gap: 2px 8px;
}

.fault-night__loss.is-none small {
  flex-basis: 100%;
  color: rgba(203, 218, 196, 0.5);
  font-size: 7px;
  letter-spacing: 0.03em;
  line-height: 1.4;
}

.fault-night__risk {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 6.5px;
  letter-spacing: 0.06em;
}

.fault-night__riskbar {
  height: 4px;
  background: rgba(184, 245, 176, 0.1);
}

.fault-night__riskbar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brass), var(--red));
}

.fault-night__risk b {
  color: #ffb0a8;
  font-size: 7px;
  white-space: nowrap;
}

.fault-night__note {
  flex: 0 0 auto;
  display: block;
  margin: 0;
  padding: 4px 0;
  border-top: 1px dashed rgba(203, 176, 116, 0.2);
  border-bottom: 1px dashed rgba(203, 176, 116, 0.2);
  color: #c6d3bd;
  font-family: var(--font-mono);
  font-size: 7.5px;
  line-height: 1.55;
  letter-spacing: 0.02em;
}

.fault-night__note b {
  color: #f0d79c;
  font-weight: 700;
}

.fault-night__note small {
  display: block;
  margin-top: 3px;
  color: #8ea083;
  font-size: 6.5px;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.fault-night__cover {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 6px;
  border-left: 2px solid color-mix(in srgb, var(--green, #79df8f) 55%, transparent);
  background: rgba(20, 46, 27, 0.3);
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.08em;
}

.fault-night__cover b {
  color: #bdecc4;
  font-size: 8px;
}

.fault-night__track {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px 6px;
  margin-top: 2px;
  min-height: 40px;
}

.fault-night__track i {
  width: 2px;
  height: 100%;
  justify-self: center;
  background: rgba(184, 245, 176, 0.12);
}

.fault-night__track i:nth-of-type(1) {
  grid-area: 1 / 1;
}

.fault-night__track i:nth-of-type(2) {
  grid-area: 2 / 1;
}

.fault-night__track i:nth-of-type(3) {
  grid-area: 3 / 1;
}

.fault-night__track i.is-done {
  background: color-mix(in srgb, var(--tone, var(--brass)) 35%, transparent);
}

.fault-night__track i.is-now {
  background: var(--brass);
  box-shadow: 0 0 6px rgba(203, 176, 116, 0.55);
}

.fault-night__track span {
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(203, 176, 116, 0.12);
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 6.5px;
  letter-spacing: 0.08em;
}

.fault-night__track span:nth-of-type(1) {
  grid-area: 1 / 2;
}

.fault-night__track span:nth-of-type(2) {
  grid-area: 2 / 2;
  color: var(--brass);
}

.fault-night__track span:nth-of-type(3) {
  grid-area: 3 / 2;
}

.fault-night__scale {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 6.5px;
  letter-spacing: 0.08em;
}

.fault-night__scale i {
  width: 12px;
  height: 3px;
  background: rgba(184, 245, 176, 0.12);
}

.fault-night__scale i.is-on {
  background: color-mix(in srgb, var(--red) 68%, white);
}

.fault-night__stamp {
  color: rgba(203, 176, 116, 0.42);
  font-family: var(--font-mono);
  font-size: 6.5px;
  letter-spacing: 0.14em;
  text-align: right;
}

.fault-card__telemetry {
  gap: 4px;
}

.fault-night {
  gap: 5px;
  padding: 8px 8px 7px;
}

.fault-card__hint {
  padding-top: 5px;
  font-size: 9px;
  line-height: 1.45;
}

@media (min-width: 1000px) {
  .fault-card__telemetry .fault-card__hint {
    display: none;
  }
}

@media (min-width: 1001px) {
  .fault-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .fault-card {
    flex: 0 0 100%;
  }

  .fault-reserve {
    display: none;
  }

  .fault-card__foot {
    display: none;
  }

  .fault-night {
    flex: 1 1 auto;
    gap: 2px;
    padding: 5px 8px 4px;
  }

  .fault-card__telemetry {
    gap: 2px;
  }
}

.fault-night.is-covered {
  opacity: 0.55;
}

.fault-night.is-covered .fault-night__loss b {
  color: var(--dim);
}

@media (min-width: 1001px) and (max-height: 820px) {
  .threat-note {
    display: none;
  }

  .resource-card {
    min-height: 78px;
    padding-top: 9px;
    padding-bottom: 8px;
  }
}

/* v2.3.2 閳?multiple faults share the viewport; right rail is per-fault flavour text. */
.fault-lore {
  display: none;
}

@media (min-width: 1001px) {
  .fault-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(0, 1fr);
    align-content: stretch;
    gap: 10px;
    overflow-y: auto;
  }

  .fault-card {
    flex: none;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .fault-card__foot,
  .fault-card__hint {
    display: none;
  }

  .fault-card:not(:only-of-type) .fault-schematic {
    display: none;
  }

  .fault-lore {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 2px 0 0 14px;
    border-left: 1px dashed rgba(184, 245, 176, 0.14);
  }

  .fault-lore p {
    margin: 0;
    color: #c6d3bd;
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.85;
    letter-spacing: 0.01em;
    text-align: justify;
  }

  .fault-lore__stamp {
    margin-top: auto;
    padding-top: 8px;
    color: var(--brass);
    font-family: var(--font-mono);
    font-size: 7px;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }
}

@media (min-width: 1001px) {
  .fault-card:not(:only-of-type) .fault-card__schematic {
    display: none;
  }

  .fault-card:not(:only-of-type) .fault-card__foot {
    display: flex;
    margin-top: auto;
  }
}

@media (min-width: 1001px) and (min-height: 821px) {
  .fault-card:not(:only-of-type) .fault-card__schematic {
    display: block;
    height: 82px;
    min-height: 82px;
    flex: 0 0 82px;
    margin-top: 8px;
  }
}

@media (min-width: 1001px) {
  .fault-card:not(:only-of-type) .fault-card__schematic {
    display: none;
  }
}

/* v2.3.3 閳?multi-fault cards keep a compact schematic and the right rail fills its height. */
@media (min-width: 1001px) {
  .fault-card:not(:only-of-type) .fault-card__main {
    height: 100%;
  }

  .fault-card:not(:only-of-type) .fault-card__content {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .fault-card:not(:only-of-type) .fault-card__schematic {
    display: block;
    flex: 1 1 auto;
    min-height: 36px;
    max-height: 110px;
    height: auto;
    margin-top: 8px;
  }

  .fault-card:not(:only-of-type) .fault-card__foot {
    display: flex;
    flex: 0 0 auto;
    margin-top: 6px;
  }

  .fault-lore {
    align-self: stretch;
    padding: 12px 14px;
    border-left: 1px solid rgba(184, 245, 176, 0.22);
    background:
      linear-gradient(180deg, rgba(184, 245, 176, 0.035), rgba(0, 0, 0, 0.12)),
      repeating-linear-gradient(0deg, transparent 0 18px, rgba(184, 245, 176, 0.025) 18px 19px);
  }

  .fault-lore .micro-label {
    font-size: 8px;
    color: #d9e4d7;
  }

  .fault-lore .fault-lore__text {
    margin-top: 8px;
    color: #d8e3cf;
    font-size: 11px;
    line-height: 1.8;
  }

  .fault-lore .fault-lore__detail {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed rgba(184, 245, 176, 0.18);
    color: #b9c9ab;
    font-size: 9.5px;
    line-height: 1.7;
  }

  .fault-lore__stamp {
    margin-top: auto;
    padding-top: 8px;
    font-size: 7.5px;
  }
}

@media (min-width: 1001px) {
  .fault-card:not(:only-of-type) .fault-card__foot {
    display: none;
  }

  .fault-card:not(:only-of-type) .fault-card__schematic {
    height: 92px;
    min-height: 92px;
    max-height: none;
    flex: 0 0 92px;
  }
}

@media (min-width: 1001px) and (max-height: 820px) {
  .fault-card:not(:only-of-type) .fault-card__schematic {
    height: 62px;
    min-height: 62px;
    flex-basis: 62px;
  }

  .fault-lore {
    padding: 8px 12px;
  }

  .fault-lore .fault-lore__text {
    font-size: 10.5px;
    line-height: 1.7;
  }

  .fault-lore .fault-lore__detail {
    margin-top: 6px;
    padding-top: 6px;
    font-size: 9px;
    line-height: 1.6;
  }
}

@media (min-width: 1001px) {
  .fault-card:not(:only-of-type) .fault-card__schematic {
    height: 80px;
    min-height: 80px;
    flex-basis: 80px;
    margin-top: 8px;
  }

  .fault-lore {
    padding: 10px 12px;
  }

  .fault-lore .fault-lore__text {
    font-size: 10.8px;
    line-height: 1.75;
  }

  .fault-lore .fault-lore__detail {
    margin-top: 8px;
    padding-top: 6px;
    font-size: 9px;
    line-height: 1.6;
  }

  .fault-lore__stamp {
    font-size: 7px;
    padding-top: 6px;
  }
}

@media (min-width: 1001px) and (max-height: 820px) {
  .fault-card:not(:only-of-type) .fault-card__schematic {
    height: 52px;
    min-height: 52px;
    flex-basis: 52px;
    margin-top: 6px;
  }

  .fault-lore {
    padding: 6px 10px;
  }

  .fault-lore .fault-lore__text {
    font-size: 9.8px;
    line-height: 1.55;
  }

  .fault-lore .fault-lore__detail {
    margin-top: 5px;
    padding-top: 5px;
    font-size: 8.5px;
    line-height: 1.5;
  }

  .fault-lore__stamp {
    display: none;
  }
}

@media (min-width: 1001px) {
  .fault-card:not(:only-of-type) {
    padding-bottom: 6px;
  }

  .fault-card:not(:only-of-type) .fault-card__top {
    margin-bottom: 6px;
  }

  .fault-card:not(:only-of-type) .fault-card__schematic {
    height: 72px;
    min-height: 72px;
    flex-basis: 72px;
  }

  .fault-card:not(:only-of-type) .fault-lore {
    justify-content: space-between;
  }
}

@media (min-width: 1001px) and (max-height: 820px) {
  .fault-card:not(:only-of-type) .fault-card__schematic {
    height: 48px;
    min-height: 48px;
    flex-basis: 48px;
  }
}

@media (min-width: 1001px) {
  .fault-card:not(:only-of-type) {
    padding-bottom: 2px;
  }

  .fault-card:not(:only-of-type) .fault-card__schematic {
    height: 64px;
    min-height: 64px;
    flex-basis: 64px;
  }
}

@media (min-width: 1001px) and (max-height: 820px) {
  .fault-card:not(:only-of-type) .fault-card__schematic {
    height: 48px;
    min-height: 48px;
    flex-basis: 48px;
  }

  .fault-lore {
    padding: 5px 10px;
  }
}

@media (min-width: 1001px) {
  .fault-lore .fault-lore__text {
    font-size: 10.4px;
    line-height: 1.65;
  }

  .fault-lore .fault-lore__detail {
    font-size: 8.8px;
    line-height: 1.55;
  }
}

@media (min-width: 1001px) {
  .fault-card:not(:only-of-type) {
    padding-bottom: 0;
  }

  .fault-card:not(:only-of-type) .fault-card__schematic {
    height: 60px;
    min-height: 60px;
    flex-basis: 60px;
  }
}

@media (min-width: 1001px) and (max-height: 820px) {
  .fault-card:not(:only-of-type) .fault-card__schematic {
    height: 44px;
    min-height: 44px;
    flex-basis: 44px;
  }
}

@media (min-width: 1001px) {
  .fault-card:not(:only-of-type) {
    overflow-y: hidden;
  }

  .fault-card:not(:only-of-type) .fault-card__schematic {
    height: 56px;
    min-height: 56px;
    flex-basis: 56px;
  }
}

@media (min-width: 1001px) and (max-height: 820px) {
  .fault-card:not(:only-of-type) .fault-card__schematic {
    height: 38px;
    min-height: 38px;
    flex-basis: 38px;
  }
}

@media (min-width: 1001px) {
  .fault-card:not(:only-of-type) .fault-card__schematic {
    height: auto;
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    margin-top: 8px;
  }
}

@media (min-width: 1001px) {
  .fault-lore .fault-lore__text {
    font-size: 11px;
    line-height: 1.7;
  }
}

@media (min-width: 1001px) {
  .fault-lore .fault-lore__text {
    font-size: 10.4px;
    line-height: 1.65;
  }
}

@media (min-width: 1001px) {
  .fault-lore .fault-lore__detail {
    margin-top: 6px;
    padding-top: 4px;
  }
}

@media (min-width: 1001px) and (max-height: 820px) {
  .fault-lore .fault-lore__text {
    font-size: 9.8px;
    line-height: 1.55;
  }

  .fault-lore .fault-lore__detail {
    font-size: 8.5px;
    line-height: 1.5;
  }
}

@media (min-width: 1001px) {
  .fault-lore {
    min-height: 0;
    overflow-y: auto;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(214, 196, 138, 0.45) rgba(4, 12, 9, 0.5);
  }

  .fault-lore::-webkit-scrollbar {
    width: 4px;
  }

  .fault-lore::-webkit-scrollbar-track {
    background: rgba(4, 12, 9, 0.5);
  }

  .fault-lore::-webkit-scrollbar-thumb {
    background: rgba(214, 196, 138, 0.45);
    border-radius: 4px;
  }

  .fault-lore__text {
    flex: 0 0 auto;
  }

  .fault-lore__stamp {
    margin-top: auto;
  }
}

@media (min-width: 1001px) {
  .fault-card:not(:only-of-type) {
    padding-top: 4px;
  }

  .fault-card:not(:only-of-type) .fault-card__top {
    margin-bottom: 4px;
  }
}

@media (min-width: 1001px) and (max-height: 820px) {
  .fault-card:not(:only-of-type) {
    padding-top: 0;
  }
}

@media (min-width: 1001px) {
  .fault-card__schematic.is-compact {
    min-height: 0;
    margin-top: 6px;
    border-color: color-mix(in srgb, var(--tone) 20%, transparent);
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--tone) 6%, transparent), transparent 45%, color-mix(in srgb, var(--tone) 4%, transparent)),
      rgba(3, 8, 5, 0.5);
  }

  .fault-card__schematic.is-compact .fault-schematic__tag,
  .fault-card__schematic.is-compact .fault-schematic__sev {
    top: 2px;
    font-size: 6px;
    letter-spacing: 0.08em;
  }

  .fault-card__schematic.is-compact .fault-schematic__tag {
    left: 6px;
  }

  .fault-card__schematic.is-compact .fault-schematic__sev {
    right: 6px;
  }

  .fault-card__schematic.is-compact .fault-schematic__label,
  .fault-card__schematic.is-compact .fault-schematic__value {
    display: none;
  }

  .fault-card__schematic.is-compact .fault-schematic__area {
    opacity: 0.32;
  }

  .fault-card__schematic.is-compact .fault-schematic__trace {
    stroke-width: 1.8;
  }
}

@media (min-width: 1001px) {
  .fault-card:not(:only-of-type) .fault-card__main {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
  }

  .fault-card:not(:only-of-type) .fault-card__content {
    min-height: 0;
    overflow: hidden;
  }
}

@media (min-width: 1001px) {
  .fault-card:not(:only-of-type) {
    padding-bottom: 0;
    overflow: hidden;
  }
}

@media (min-width: 1001px) {
  .fault-card:not(:only-of-type) {
    padding: 4px 9px 5px;
  }

  .fault-card:not(:only-of-type) .fault-card__top {
    min-height: 20px;
    height: 20px;
    padding: 0 7px;
    margin-bottom: 3px;
  }

  .fault-card:not(:only-of-type) .fault-card__main {
    gap: 8px;
  }

  .fault-card:not(:only-of-type) .fault-card__title {
    min-height: 18px;
    font-size: 15px;
    line-height: 1.05;
  }

  .fault-card:not(:only-of-type) .fault-card__rule {
    min-height: 0;
    margin-top: 2px;
    font-size: 9px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .fault-card:not(:only-of-type) .fault-card__schematic.is-compact {
    flex: 0 0 16px;
    height: 16px;
    min-height: 16px;
    margin-top: 3px;
  }
}

@media (min-width: 1001px) {
  .fault-card:not(:only-of-type) .fault-card__schematic.is-compact {
    order: 2;
  }

  .fault-card:not(:only-of-type) .fault-card__rule {
    order: 3;
  }
}

@media (min-width: 1001px) {
  .fault-card:not(:only-of-type) .fault-rule {
    min-height: 0;
    margin-top: 3px;
    font-size: 9.5px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .fault-card:not(:only-of-type) .fault-card__schematic.is-compact {
    margin-top: 4px;
  }
}

@media (min-width: 1001px) and (max-height: 820px) {
  .fault-card:not(:only-of-type) .fault-rule {
    display: none;
  }

  .fault-card:not(:only-of-type) .fault-card__top {
    min-height: 18px;
    height: 18px;
    margin-bottom: 2px;
  }

  .fault-card:not(:only-of-type) .fault-card__title {
    min-height: 16px;
    font-size: 14px;
  }

  .fault-card:not(:only-of-type) .fault-card__schematic.is-compact {
    flex: 0 0 14px;
    height: 14px;
    min-height: 14px;
    margin-top: 2px;
  }
}

@media (min-width: 1001px) and (max-height: 820px) {
  .fault-card:not(:only-of-type) .fault-card__top {
    display: none;
  }

  .fault-card:not(:only-of-type) {
    padding-top: 6px;
  }
}

@media (min-width: 1001px) and (max-height: 820px) {
  .fault-card__schematic.is-compact .fault-schematic__tag,
  .fault-card__schematic.is-compact .fault-schematic__sev {
    display: none;
  }
}

/* v2.3.6 閳?effect-first fault cards, adaptive lore, labelled axes */
.fault-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fault-card__title h3 {
  flex: 0 1 auto;
  font-size: 19px;
  line-height: 1.15;
  color: #f0f3e8;
}
.fault-card__status {
  flex: 0 0 auto;
  color: #9fbf98 !important;
  font: 700 7.5px/1 var(--font-mono) !important;
  letter-spacing: 0.14em;
}
.fault-card__title .fault-rule {
  flex: 1 1 260px;
  margin: 0;
  padding: 2px 8px 2px 9px;
  border-left: 3px solid #ffb545;
  background: linear-gradient(90deg, rgba(255, 181, 69, 0.16), rgba(255, 181, 69, 0.02));
  color: #ffd77a;
  font-size: 13.2px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  white-space: normal;
  box-shadow: inset 0 0 0 1px rgba(255, 181, 69, 0.12);
}
.fault-card__title .fault-rule b { color: #fff0bd; }

.fault-list .fault-lore__text {
  color: #e8f0df !important;
  font-size: 12.2px;
  line-height: 1.55;
  letter-spacing: 0.01em;
}
.fault-list .fault-lore .micro-label { color: #b9d3b2; }
.fault-list.is-count-2 .fault-lore__text { font-size: 11.8px; }
.fault-list.is-count-3 .fault-lore__text { font-size: 11.2px; }
.fault-list.is-count-4 .fault-lore__text { font-size: 10.8px; }

@media (min-width: 1001px) and (max-height: 820px) {
  .fault-card__title h3 { font-size: 16px; }
  .fault-card__title .fault-rule {
    flex-basis: 220px;
    padding: 1px 6px 1px 7px;
    font-size: 11.8px;
    line-height: 1.25;
  }
  .fault-list.is-count-3 .fault-lore__text { font-size: 10.7px; }
  .fault-list.is-count-4 .fault-lore__text { font-size: 10.4px; }
}

@media (max-width: 620px) {
  .fault-card__title h3 { font-size: 17px; }
  .fault-card__title .fault-rule {
    flex-basis: 100%;
    margin-top: 2px;
    padding: 2px 6px;
    font-size: 12.2px;
  }
}

.fault-schematic__axis {
  position: absolute;
  z-index: 4;
  top: 4px;
  bottom: 4px;
  left: 2px;
  width: 33px;
  pointer-events: none;
  border-right: 1px solid color-mix(in srgb, var(--tone) 34%, transparent);
  background: linear-gradient(90deg, rgba(3, 9, 6, 0.78), rgba(3, 9, 6, 0.1));
}
.fault-schematic__axis b {
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: upright;
  color: #cfe0c4;
  font: 700 7px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
}
.fault-schematic__axis em {
  position: absolute;
  top: 3px;
  bottom: 3px;
  right: 3px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: color-mix(in srgb, var(--tone) 62%, #cfe0c4);
  font: 600 6px/1 var(--font-mono);
  font-style: normal;
  text-align: right;
  opacity: 0.8;
}
.fault-schematic__axis i { display: none; }

.fault-card__schematic.is-compact .fault-schematic__axis {
  top: 1px;
  bottom: auto;
  left: 2px;
  width: auto;
  height: auto;
  border-right: 0;
  background: rgba(3, 9, 6, 0.72);
}
.fault-card__schematic.is-compact .fault-schematic__axis b {
  position: static;
  transform: none;
  writing-mode: horizontal-tb;
  font-size: 6px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #dbe7cf;
}
.fault-card__schematic.is-compact .fault-schematic__axis em,
.fault-card__schematic.is-compact .fault-schematic__axis i { display: none; }

.fault-card__schematic .fault-schematic__trace {
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--tone) 55%, transparent));
}
.fault-card__schematic.is-compact .fault-schematic__trace { stroke-width: 1.3; }

.fault-list.is-count-4 .fault-lore__text { font-size: 11.2px; }
.fault-list.is-count-3 .fault-lore__text { font-size: 11.6px; }
.fault-list.is-count-2 .fault-lore__text { font-size: 12.1px; }
@media (min-width: 1001px) and (max-height: 820px) {
  .fault-card__title .fault-rule {
    display: block !important;
    flex-basis: 220px;
    font-size: 11.8px;
    line-height: 1.25;
    padding: 1px 6px 1px 7px;
  }
  .fault-list.is-count-3 .fault-lore__text { font-size: 11px; }
  .fault-list.is-count-4 .fault-lore__text { font-size: 10.8px; }
}

@media (min-width: 1001px) and (max-height: 820px) {
  .fault-card__status { display: none; }
  .fault-card__title { flex-wrap: nowrap; align-items: center; }
  .fault-card__title h3 { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fault-card__title .fault-rule {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11.4px;
  }
}
.fault-card__schematic.is-compact .fault-schematic__axis b {
  font-size: 6.5px;
  color: #eef5e3;
  text-shadow: 0 1px 2px #000;
}

.fault-card__schematic.is-compact .fault-schematic__tag { display: none; }
.fault-card__schematic.is-compact .fault-schematic__axis {
  left: 4px;
  padding: 0 2px;
  background: rgba(3, 9, 6, 0.88);
}
.fault-card__schematic.is-compact .fault-schematic__axis b {
  font-size: 7.2px;
  letter-spacing: 0;
  color: #f2f7e9;
}
@media (min-width: 1001px) and (max-height: 820px) {
  .fault-list.is-count-4 .fault-lore__text { font-size: 11.2px; }
  .fault-list.is-count-3 .fault-lore__text { font-size: 11.2px; }
}

.fault-card__title .fault-rule { font-size: 14.2px; }
.fault-list .fault-lore__text { font-size: 13px; }
.fault-list.is-count-2 .fault-lore__text { font-size: 12.8px; }
.fault-list.is-count-3 .fault-lore__text { font-size: 12.4px; }
.fault-list.is-count-4 .fault-lore__text { font-size: 12px; }
.fault-schematic__axis b { font-size: 8px; }
.fault-card__schematic.is-compact .fault-schematic__axis b { font-size: 7.8px; }
@media (min-width: 1001px) and (max-height: 820px) {
  .fault-card__title .fault-rule { font-size: 12.2px; }
  .fault-list.is-count-3 .fault-lore__text { font-size: 11.2px; }
  .fault-list.is-count-4 .fault-lore__text { font-size: 11.2px; }
}

.fault-card__title .fault-rule {
  flex: 1 1 140px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 620px) {
  .fault-card__title .fault-rule {
    flex-basis: 100%;
    white-space: normal;
    overflow: visible;
  }
}

@media (min-width: 1001px) and (max-height: 820px) {
  .fault-list.is-count-3 .fault-lore__text { font-size: 12px; }
  .fault-list.is-count-4 .fault-lore__text { font-size: 12px; }
  .fault-card__title .fault-rule { font-size: 12.4px; }
}

/* v2.4.0 閳?readable fault effects, warm lore, persistent fault atmosphere */
.fault-card__title .fault-rule {
  font-size: 16.5px !important;
  line-height: 1.3;
  flex: 1 1 260px;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.fault-list.is-count-3 .fault-card__title .fault-rule { font-size: 15.2px !important; }
.fault-list.is-count-4 .fault-card__title .fault-rule { font-size: 14.2px !important; }
.fault-list .fault-lore__text {
  color: #d9c7a1 !important;
  font-size: 14.5px !important;
  line-height: 1.55;
  letter-spacing: 0.01em;
}
.fault-list.is-count-2 .fault-lore__text { font-size: 14.5px !important; }
.fault-list.is-count-3 .fault-lore__text { font-size: 14px !important; }
.fault-list.is-count-4 .fault-lore__text { font-size: 13.5px !important; }
.fault-list .fault-lore .micro-label { color: #c8b488 !important; }
@media (min-width: 1001px) and (max-height: 820px) {
  .fault-card__title .fault-rule { font-size: 14.8px !important; }
  .fault-list.is-count-2 .fault-lore__text { font-size: 14.5px !important; }
  .fault-list.is-count-3 .fault-lore__text { font-size: 13.5px !important; }
  .fault-list.is-count-4 .fault-lore__text { font-size: 13px !important; }
}
@media (max-width: 620px) {
  .fault-card__title .fault-rule { flex-basis: 100%; font-size: 15.5px !important; }
  .fault-list .fault-lore__text { font-size: 13.5px !important; }
}

/* Global fault atmosphere */
.fault-fx {
  position: fixed;
  inset: 0;
  z-index: 46;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
.fault-fx__veil,
.fault-fx__scan {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.fault-fx__veil { mix-blend-mode: screen; }
.fault-fx__scan { mix-blend-mode: screen; }
.fault-fx__sparks { position: absolute; inset: 0; }

body.fx-power .fault-fx__veil {
  opacity: 0.22;
  background: radial-gradient(ellipse at 52% 58%, rgba(255, 190, 84, 0.08) 0%, rgba(255, 156, 52, 0.14) 54%, rgba(4, 8, 6, 0.32) 100%);
  animation: fxPowerFlicker 7.2s steps(1) infinite;
}
body.fx-power .fault-fx__scan {
  opacity: 0.25;
  background: linear-gradient(90deg, transparent 0 48%, rgba(255, 221, 150, 0.24) 49.6%, transparent 50.4%);
  animation: fxPowerArc 9.5s ease-in-out infinite;
}
body.fx-power.is-surging .fault-fx__veil {
  animation: none;
  opacity: 0.62;
  background: radial-gradient(ellipse at 50% 52%, rgba(255, 220, 150, 0.18), rgba(255, 140, 40, 0.22) 56%, rgba(0, 0, 0, 0.32));
}
body.fx-core .fault-fx__scan {
  opacity: 0.5;
  background: repeating-linear-gradient(0deg, rgba(111, 255, 205, 0.075) 0 1px, transparent 1px 5px);
  animation: fxCoreScan 8s linear infinite;
}
body.fx-core.is-glitching .fault-fx__scan {
  opacity: 0.8;
  background: repeating-linear-gradient(90deg, rgba(255, 92, 128, 0.12) 0 2px, transparent 2px 9px);
  animation: fxGlitch 0.26s steps(2) infinite;
}
body.fx-defense .fault-fx__scan {
  opacity: 0.78;
  background: conic-gradient(from 0deg at 82% 52%, transparent 0 79%, rgba(255, 88, 54, 0.17) 82%, transparent 87%);
  animation: fxRadar 5.6s linear infinite;
}
body.fx-food .fault-fx__veil {
  opacity: 0.55;
  background: linear-gradient(180deg, transparent 44%, rgba(158, 132, 78, 0.2) 100%);
  animation: fxDust 9s ease-in-out infinite;
}
body.fx-heat .fault-fx__veil {
  opacity: 0.4;
  background: repeating-linear-gradient(0deg, rgba(255, 154, 74, 0.07) 0 2px, transparent 2px 9px);
  animation: fxHeat 4.6s ease-in-out infinite;
}

.fault-fx__spark {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffd27a;
  box-shadow: 0 0 8px 2px rgba(255, 190, 80, 0.8);
  animation: fxSparkFly 0.88s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}
.fault-fx__spark[data-tone="dust"] {
  background: #d8c69a;
  box-shadow: 0 0 5px 1px rgba(216, 198, 154, 0.35);
  animation-duration: 1.4s;
}

@keyframes fxPowerFlicker {
  0%, 84%, 100% { opacity: 0.22; }
  85% { opacity: 0.5; }
  86% { opacity: 0.12; }
  87% { opacity: 0.62; }
  88% { opacity: 0.18; }
  89% { opacity: 0.4; }
  90% { opacity: 0.22; }
}
@keyframes fxPowerArc {
  0%, 78%, 100% { opacity: 0.18; }
  79% { opacity: 0.55; }
  80% { opacity: 0.12; }
  81% { opacity: 0.48; }
  82% { opacity: 0.18; }
}
@keyframes fxCoreScan {
  0% { transform: translateY(-2%); opacity: 0.2; }
  50% { opacity: 0.55; }
  100% { transform: translateY(2%); opacity: 0.2; }
}
@keyframes fxGlitch {
  0% { transform: translateX(-2px); opacity: 0.7; }
  50% { transform: translateX(2px); opacity: 0.95; }
  100% { transform: translateX(-1px); opacity: 0.7; }
}
@keyframes fxRadar {
  0% { transform: rotate(0deg); opacity: 0.25; }
  50% { opacity: 0.85; }
  100% { transform: rotate(360deg); opacity: 0.25; }
}
@keyframes fxDust {
  0%, 100% { opacity: 0.32; transform: translateY(0); }
  50% { opacity: 0.62; transform: translateY(-1.5%); }
}
@keyframes fxHeat {
  0%, 100% { opacity: 0.22; transform: translateY(0); }
  50% { opacity: 0.48; transform: translateY(-0.8%); }
}
@keyframes fxSparkFly {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  70% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}

@media (prefers-reduced-motion: reduce) {
  .fault-fx__veil,
  .fault-fx__scan,
  .fault-fx__spark { animation: none !important; }
  .fault-fx__spark { display: none; }
  body.fx-power .fault-fx__veil,
  body.fx-food .fault-fx__veil,
  body.fx-heat .fault-fx__veil { opacity: 0.18; }
}

/* v2.4.0 compact cards: decorative sigil must not create scroll */
.fault-card__sigil { pointer-events: none; }
.fault-list.is-count-3 .fault-card,
.fault-list.is-count-4 .fault-card { overflow: hidden; }
.fault-list.is-count-3 .fault-lore,
.fault-list.is-count-4 .fault-lore { -webkit-mask-image: linear-gradient(180deg, #000 0 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 0 82%, transparent 100%); }

.fault-list.is-count-2 .fault-card { overflow: hidden; }
.fault-list.is-count-2 .fault-lore { -webkit-mask-image: linear-gradient(180deg, #000 0 84%, transparent 100%); mask-image: linear-gradient(180deg, #000 0 84%, transparent 100%); }

/* v2.5.0 閳?3/4-fault schematics become a full-card backdrop, not a 14px strip */
@media (min-width: 1001px) {
  .fault-list.is-count-3 .fault-card__main,
  .fault-list.is-count-4 .fault-card__main { position: static; }
  .fault-list.is-count-3 .fault-card__schematic.is-compact,
  .fault-list.is-count-4 .fault-card__schematic.is-compact {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0.52;
    z-index: 0;
    pointer-events: none;
  }
  .fault-list.is-count-3 .fault-card__schematic text,
  .fault-list.is-count-4 .fault-card__schematic text { display: none; }
  .fault-list.is-count-3 .fault-card__content,
  .fault-list.is-count-4 .fault-card__content {
    position: relative;
    z-index: 1;
    background: linear-gradient(90deg, rgba(3,9,6,0.88) 0%, rgba(3,9,6,0.52) 54%, rgba(3,9,6,0.86) 100%);
  }
}

/* v2.5.0 閳?let the right rail use the full card height for multi-fault lore */
@media (min-width: 1001px) {
  .fault-list.is-count-3 .fault-card__main,
  .fault-list.is-count-4 .fault-card__main {
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    height: 100%;
    min-height: 0;
  }
  .fault-list.is-count-3 .fault-card__content,
  .fault-list.is-count-4 .fault-card__content {
    height: 100%;
    min-height: 0;
  }
  .fault-list.is-count-3 .fault-lore,
  .fault-list.is-count-4 .fault-lore {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .fault-list.is-count-3 .fault-lore__text,
  .fault-list.is-count-4 .fault-lore__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .fault-list.is-count-3 .fault-card__foot,
  .fault-list.is-count-4 .fault-card__foot {
    display: none !important;
  }
  .fault-list.is-count-3 .fault-card__main,
  .fault-list.is-count-4 .fault-card__main {
    position: absolute;
    left: 9px;
    right: 9px;
    top: 26px;
    bottom: 4px;
    height: auto;
    min-height: 0;
    flex: 0 0 auto;
  }
  .fault-list.is-count-3 .fault-lore,
  .fault-list.is-count-4 .fault-lore {
    -webkit-mask-image: none;
    mask-image: none;
    justify-content: flex-start;
    gap: 2px;
    padding: 2px 10px 2px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(214, 196, 138, 0.45) transparent;
  }
  .fault-list.is-count-3 .fault-lore__text,
  .fault-list.is-count-4 .fault-lore__text {
    margin-top: 2px !important;
  }
  .fault-list.is-count-4 .fault-card { min-height: 124px; }
  .fault-list.is-count-3 .fault-card { min-height: 123px; }
  .fault-list.is-count-3 .fault-lore__stamp,
  .fault-list.is-count-4 .fault-lore__stamp {
    display: none;
  }
  .fault-list.is-count-3 .fault-lore__text,
  .fault-list.is-count-4 .fault-lore__text {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .fault-list.is-count-3 .fault-card__title h3,
  .fault-list.is-count-4 .fault-card__title h3,
  .fault-list.is-count-3 .fault-rule,
  .fault-list.is-count-4 .fault-rule {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
  }
}

/* ================================================================ */
/* v2.7 card-cast feedback                                         */
/* ================================================================ */
.resource-card,
.fault-card {
  position: relative;
}

.resource-card.is-card-cast {
  animation: card-cast-shake 0.46s steps(2, end);
}

.resource-card.is-card-cast .resource-value {
  color: #c8ff9a !important;
  text-shadow: 0 0 10px currentColor, 2px 0 0 rgba(255, 70, 110, 0.5);
}

.resource-card.is-card-cast .resource-top,
.resource-card.is-card-cast .resource-meta {
  opacity: 0.55;
}

.cast-glitch {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  overflow: hidden;
  pointer-events: none;
  color: var(--accent, #9adf8a);
  background:
    repeating-linear-gradient(
      0deg,
      rgba(5, 15, 11, 0.82) 0 2px,
      rgba(5, 15, 11, 0.28) 2px 4px
    );
  box-shadow: inset 0 0 0 1px currentColor;
  animation: cast-glitch-in 0.48s steps(4, end) forwards;
}

.cast-glitch::after {
  content: "";
  position: absolute;
  inset: -20% 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.22) 47%,
    transparent 53%
  );
  animation: cast-scan 0.32s linear infinite;
}

.cast-glitch b {
  position: relative;
  z-index: 1;
  padding: 3px 7px;
  border: 1px solid currentColor;
  background: #07100c;
  font: 700 11px/1.2 var(--font-mono, monospace);
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.cast-glitch i {
  position: relative;
  z-index: 1;
  max-width: 92%;
  overflow: hidden;
  color: #f1e2b8;
  font: 600 9px/1.3 var(--font-mono, monospace);
  font-style: normal;
  letter-spacing: 0.1em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.cast-glitch[data-tone="pwr"] { color: #ffc857; }
.cast-glitch[data-tone="rat"] { color: #a8e06a; }
.cast-glitch[data-tone="def"] { color: #7fd4e8; }
.cast-glitch[data-tone="sys"] { color: #d4a8ff; }
.cast-glitch[data-tone="core"] { color: #ff8a9e; }
.cast-glitch[data-tone="override"] {
  color: #ff765f;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(24, 5, 8, 0.88) 0 2px,
      rgba(24, 5, 8, 0.34) 2px 4px
    );
}

.fault-card.is-card-patched {
  animation: card-cast-pulse 0.56s steps(2, end);
}

.fault-card.is-card-patched .cast-glitch b {
  font-size: 12px;
}

@keyframes card-cast-shake {
  0% { transform: translateX(0); filter: brightness(1); }
  18% { transform: translateX(-3px); filter: brightness(1.8) hue-rotate(18deg); }
  36% { transform: translateX(3px); filter: brightness(0.7) hue-rotate(-24deg); }
  54% { transform: translateX(-2px); filter: brightness(1.5); }
  72% { transform: translateX(2px); filter: brightness(0.9); }
  100% { transform: translateX(0); filter: brightness(1); }
}

@keyframes card-cast-pulse {
  0% { filter: brightness(1); }
  20% { filter: brightness(1.6) saturate(1.8); }
  45% { filter: brightness(0.65) saturate(0.7); }
  70% { filter: brightness(1.35); }
  100% { filter: brightness(1); }
}

@keyframes cast-glitch-in {
  0% { opacity: 0; transform: translateX(-18%); }
  15% { opacity: 1; transform: translateX(12%); }
  30% { transform: translateX(-6%); }
  55% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(0); }
}

@keyframes cast-scan {
  from { transform: translateY(-40%); }
  to { transform: translateY(40%); }
}

@media (prefers-reduced-motion: reduce) {
  .resource-card.is-card-cast,
  .fault-card.is-card-patched {
    animation: none;
  }
  .cast-glitch {
    animation: cast-glitch-in 0.2s steps(2, end) forwards;
  }
  .cast-glitch::after {
    display: none;
  }
}
/* ============================================================
   v2.8.0 閳?ART DIRECTION / SIGNAL BLOOM
   Animated fault holograms, type-lit cards, instrument panels.
   ============================================================ */

/* ---------- fault dossiers: animated hologram layer ---------- */
.fault-card {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--viz-color, #d7c48d) 18%, rgba(214, 196, 138, 0.26));
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.fault-card:hover {
  border-color: color-mix(in srgb, var(--viz-color, #d7c48d) 40%, rgba(214, 196, 138, 0.4));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34), 0 0 28px color-mix(in srgb, var(--viz-color, #d7c48d) 10%, transparent);
}
.fault-schematic {
  isolation: isolate;
  overflow: hidden;
}
.fault-schematic > svg {
  position: relative;
  z-index: 1;
}
.fault-schematic__tag,
.fault-schematic__sev,
.fault-schematic__label,
.fault-schematic__value,
.fault-schematic__axis {
  z-index: 3;
}
.fault-viz {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
  contain: strict;
}
.fault-viz__glyph {
  position: absolute;
  right: -0.12em;
  bottom: -0.34em;
  color: var(--viz-color);
  font-family: var(--font-mono, "Cascadia Mono", monospace);
  font-size: clamp(64px, 8.6vw, 142px);
  font-weight: 900;
  letter-spacing: -0.12em;
  line-height: 1;
  opacity: 0.075;
  transform: skewX(-8deg);
  text-shadow: 0 0 26px color-mix(in srgb, var(--viz-color) 60%, transparent);
  animation: vizGlyph var(--viz-speed, 6s) ease-in-out infinite alternate;
  user-select: none;
}
.fault-viz__scan {
  position: absolute;
  left: -10%;
  right: -10%;
  top: -22%;
  height: 18%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--viz-color) 24%, transparent), transparent);
  filter: blur(1px);
  opacity: 0.45;
  animation: vizScan var(--viz-speed, 6s) linear infinite;
}
.fault-viz__particles {
  position: absolute;
  inset: 0;
}
.fault-viz__particles i {
  position: absolute;
  bottom: -6px;
  display: block;
  border-radius: 50%;
  background: var(--viz-color);
  box-shadow: 0 0 6px color-mix(in srgb, var(--viz-color) 75%, transparent);
  opacity: 0;
  animation: vizRise linear infinite;
}
.fault-schematic--voltage .fault-viz__glyph { color: #ffcf6a; }
.fault-schematic--thermal .fault-viz__scan { background: linear-gradient(180deg, transparent, rgba(255, 108, 74, 0.28), transparent); }
.fault-schematic--trap .fault-viz__particles i { box-shadow: 0 0 9px rgba(255, 84, 120, 0.9); }
.fault-schematic--melt .fault-viz__scan { height: 26%; filter: blur(3px); }
.fault-schematic--echo .fault-viz__particles i { animation-direction: alternate; }
.fault-schematic__title,
.fault-card__title h3 {
  text-shadow: 0 0 16px color-mix(in srgb, var(--viz-color, #d7c48d) 30%, transparent);
}
.fault-card__status {
  box-shadow: 0 0 12px color-mix(in srgb, var(--viz-color, #8fd3c7) 25%, transparent);
}
.fault-card:hover .fault-schematic__scan {
  animation-duration: calc(var(--viz-speed, 6s) * 0.62);
}
.fault-card .fault-tag,
.fault-card .fault-code {
  position: relative;
  z-index: 2;
}
.fault-card .fault-tag::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--viz-color, #d7c48d);
  box-shadow: 0 0 8px var(--viz-color, #d7c48d);
  vertical-align: 1px;
}
.fault-card .fault-sev .sev-bars i.on {
  box-shadow: 0 0 7px rgba(255, 110, 96, 0.75);
}

/* compact mode: the hologram is the whole card, keep text above it */
.fault-card__schematic.is-compact .fault-viz__glyph { font-size: clamp(84px, 11vw, 190px); opacity: 0.09; }
.fault-card__schematic.is-compact .fault-viz__scan { opacity: 0.6; }

/* ---------- hand cards: type-lit foil ---------- */
.patch-card {
  --card-accent: #d7c48d;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.patch-card[data-tag="PWR"] { --card-accent: #ffcf6a; }
.patch-card[data-tag="RAT"] { --card-accent: #b6e37a; }
.patch-card[data-tag="DEF"] { --card-accent: #8fd3c7; }
.patch-card[data-tag="SYS"] { --card-accent: #8db8ff; }
.patch-card[data-tag="CORE"] { --card-accent: #d4a6ff; }
.patch-card.is-fault { --card-accent: #ff7a72; }
.patch-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 6%, color-mix(in srgb, var(--card-accent) 23%, transparent), transparent 34%),
    linear-gradient(118deg, transparent 0 44%, color-mix(in srgb, var(--card-accent) 9%, transparent) 45%, transparent 60%);
  opacity: 0.75;
  transition: opacity 0.25s ease;
}
.patch-card:hover {
  transform: translateY(-5px) rotate(-0.35deg);
  border-color: color-mix(in srgb, var(--card-accent) 55%, rgba(214, 196, 138, 0.4));
  box-shadow: 0 20px 38px rgba(0, 0, 0, 0.36), 0 0 26px color-mix(in srgb, var(--card-accent) 12%, transparent);
}
.patch-card:hover::before { opacity: 1; }
.patch-card__watermark {
  transition: transform 0.3s ease, opacity 0.3s ease;
  animation: watermarkBreath 7s ease-in-out infinite;
}
.patch-card:hover .patch-card__watermark {
  transform: scale(1.08) rotate(-5deg);
  opacity: 0.18;
}
.patch-card__icon {
  position: relative;
  z-index: 2;
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--card-accent) 20%, transparent), 0 0 16px color-mix(in srgb, var(--card-accent) 12%, transparent);
}
.patch-card .cost-badge {
  box-shadow: 0 0 14px color-mix(in srgb, var(--card-accent) 25%, transparent);
}
.patch-card .cover-cta {
  text-shadow: 0 0 10px color-mix(in srgb, var(--card-accent) 35%, transparent);
}

/* ---------- survival instruments ---------- */
.resource-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.resource-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -60%;
  height: 44%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(230, 244, 220, 0.08), transparent);
  transform: translateY(-100%);
  animation: resScan 7.5s linear infinite;
}
.resource-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24), 0 0 22px color-mix(in srgb, var(--accent) 12%, transparent);
}
.resource-value {
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 30%, transparent);
}
.resource-icon {
  animation: iconBreathe 6s ease-in-out infinite;
}
.segment.is-filled {
  animation: segGlow 3.2s ease-in-out infinite;
}
.resource-card.is-critical .resource-value {
  animation: valueAlarm 1.4s steps(2, end) infinite;
}

/* ---------- maintenance switches ---------- */
.maint-btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.maint-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 49%, color-mix(in srgb, var(--maint-color) 18%, transparent) 50%, transparent 51%),
    radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--maint-color) 20%, transparent), transparent 32%);
  opacity: 0.35;
}
.maint-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--maint-color) 42%, rgba(214, 196, 138, 0.3));
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.28), 0 0 22px color-mix(in srgb, var(--maint-color) 12%, transparent);
}
.maint-btn__led {
  animation: ledPulse 2.4s ease-in-out infinite;
  box-shadow: 0 0 10px var(--maint-color);
}
.maint-btn__meter i {
  position: relative;
  overflow: hidden;
}
.maint-btn__meter i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.52), transparent);
  transform: translateX(-120%);
  animation: meterSweep 2.8s ease-in-out infinite;
}
.maint-btn:disabled { opacity: 0.58; }

/* ---------- end-day lever ---------- */
.end-day-btn {
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28), inset 0 0 26px rgba(255, 207, 106, 0.04);
}
.end-day-btn__hazard {
  background-size: 22px 22px;
  animation: hazardMove 14s linear infinite;
}
.end-day-btn__led {
  animation: ledPulse 2s ease-in-out infinite;
  box-shadow: 0 0 14px #9ef0b4;
}
.end-day-btn__arrow {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  animation: arrowNudge 2.8s ease-in-out infinite;
}
.end-day-btn:hover:not(:disabled) .end-day-btn__arrow {
  transform: translateX(7px);
  box-shadow: 0 0 20px rgba(255, 207, 106, 0.4);
}
.end-day-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: endSheen 5.5s ease-in-out infinite;
}

/* ---------- patch bay circuitry ---------- */
.bay-patch,
.bay-empty {
  position: relative;
  overflow: hidden;
}
.bay-empty::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 48%, rgba(214, 196, 138, 0.12) 50%, transparent 52%),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(214, 196, 138, 0.055) 23px, transparent 24px);
  opacity: 0.45;
}
.bay-patch::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -40%;
  height: 30%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--card-accent, #d7c48d) 16%, transparent), transparent);
  animation: bayScan 8s linear infinite;
}
.bay-patch:hover {
  border-color: color-mix(in srgb, var(--card-accent, #d7c48d) 45%, rgba(214, 196, 138, 0.4));
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.26);
}
.bay-patch__slot {
  text-shadow: 0 0 10px rgba(214, 196, 138, 0.4);
}

/* ---------- event trace ---------- */
.log-line {
  position: relative;
  border-left: 1px solid transparent;
  transition: background 0.18s ease, border-color 0.18s ease, padding-left 0.18s ease;
}
.log-line:hover {
  background: rgba(214, 196, 138, 0.045);
  border-left-color: rgba(214, 196, 138, 0.45);
  padding-left: 6px;
}
.log-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 1px 4px;
  border: 1px solid rgba(214, 196, 138, 0.22);
  border-radius: 2px;
  color: #e7d7a8;
  background: rgba(214, 196, 138, 0.055);
  box-shadow: inset 0 0 8px rgba(214, 196, 138, 0.05);
  letter-spacing: 0.04em;
}
.log-line.tone-danger .log-day { border-color: rgba(255, 108, 96, 0.4); color: #ffb0a0; }
.log-line.tone-warn .log-day { border-color: rgba(255, 207, 106, 0.36); color: #f3d48e; }

/* ---------- evac / bottom-left day panel ---------- */
.objective-card {
  position: relative;
  overflow: hidden;
}
.objective-card::before {
  content: "EVAC";
  position: absolute;
  right: 8px;
  bottom: -12px;
  font: 900 clamp(42px, 4.5vw, 64px) / 1 var(--font-mono, monospace);
  letter-spacing: -0.08em;
  color: rgba(214, 196, 138, 0.045);
  pointer-events: none;
}
#evacCountdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  padding: 3px 7px;
  border: 1px solid rgba(214, 196, 138, 0.3);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(214, 196, 138, 0.1), rgba(214, 196, 138, 0.035));
  box-shadow: inset 0 0 14px rgba(214, 196, 138, 0.07), 0 0 16px rgba(214, 196, 138, 0.08);
  text-shadow: 0 0 12px rgba(214, 196, 138, 0.35);
  animation: evacBreathe 4.6s ease-in-out infinite;
}

/* ---------- intro ---------- */
.intro-visual__rings {
  animation: introRingSpin 34s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.intro-visual__ticks {
  animation: introTicks 12s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.intro-visual__arc {
  stroke-dasharray: 18 14;
  animation: introArc 9s linear infinite;
}
.intro-visual__core {
  animation: coreBreathe 5.5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.intro-visual__legend b {
  animation: liveBlink 1.8s steps(2, end) infinite;
}
.mega-title {
  text-shadow: 0 0 28px rgba(214, 196, 138, 0.15), 0 0 60px rgba(214, 196, 138, 0.06);
}
.intro-note {
  text-shadow: 0 0 12px rgba(214, 196, 138, 0.2);
}

/* ---------- end report ---------- */
.end-card {
  position: relative;
  overflow: hidden;
}
.end-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(214, 196, 138, 0.035), transparent 38%);
}
.end-card::after {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  top: -20%;
  height: 22%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(214, 196, 138, 0.06), transparent);
  animation: endScan 9s linear infinite;
}
#endGrade {
  text-shadow: 0 0 24px rgba(214, 196, 138, 0.35);
  animation: gradePulse 3.8s ease-in-out infinite;
}
.end-stats > div {
  transition: background 0.2s ease, border-color 0.2s ease;
}
.end-stats > div:hover {
  background: rgba(214, 196, 138, 0.055);
}

/* ---------- shared keyframes ---------- */
@keyframes vizGlyph {
  from { transform: skewX(-8deg) translate3d(0, 4px, 0) scale(1); opacity: 0.055; }
  to { transform: skewX(-8deg) translate3d(-6px, -6px, 0) scale(1.035); opacity: 0.1; }
}
@keyframes vizScan {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 0.55; }
  82% { opacity: 0.3; }
  100% { transform: translateY(760%); opacity: 0; }
}
@keyframes vizRise {
  0% { transform: translate3d(0, 0, 0) scale(0.7); opacity: 0; }
  16% { opacity: 0.7; }
  100% { transform: translate3d(14px, -190px, 0) scale(0.2); opacity: 0; }
}
@keyframes watermarkBreath {
  0%, 100% { opacity: 0.08; }
  50% { opacity: 0.14; }
}
@keyframes resScan {
  0% { transform: translateY(-100%); opacity: 0; }
  15% { opacity: 0.8; }
  80% { opacity: 0.35; }
  100% { transform: translateY(360%); opacity: 0; }
}
@keyframes iconBreathe {
  0%, 100% { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent, #d7c48d) 35%, transparent)); }
  50% { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent, #d7c48d) 65%, transparent)); }
}
@keyframes segGlow {
  0%, 100% { filter: brightness(0.92); }
  50% { filter: brightness(1.22); }
}
@keyframes valueAlarm {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@keyframes ledPulse {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.12); }
}
@keyframes meterSweep {
  0% { transform: translateX(-120%); }
  55%, 100% { transform: translateX(120%); }
}
@keyframes hazardMove {
  from { background-position: 0 0; }
  to { background-position: 44px 0; }
}
@keyframes arrowNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}
@keyframes endSheen {
  0%, 62% { transform: translateX(-100%); opacity: 0; }
  70% { opacity: 0.55; }
  100% { transform: translateX(100%); opacity: 0; }
}
@keyframes bayScan {
  0% { transform: translateY(-100%); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translateY(420%); opacity: 0; }
}
@keyframes evacBreathe {
  0%, 100% { box-shadow: inset 0 0 14px rgba(214, 196, 138, 0.07), 0 0 12px rgba(214, 196, 138, 0.06); }
  50% { box-shadow: inset 0 0 18px rgba(214, 196, 138, 0.12), 0 0 24px rgba(214, 196, 138, 0.13); }
}
@keyframes introRingSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes introTicks {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}
@keyframes introArc {
  to { stroke-dashoffset: -160; }
}
@keyframes coreBreathe {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.04); opacity: 1; }
}
@keyframes liveBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@keyframes endScan {
  0% { transform: translateY(0); opacity: 0; }
  14% { opacity: 0.7; }
  100% { transform: translateY(520%); opacity: 0; }
}
@keyframes gradePulse {
  0%, 100% { text-shadow: 0 0 18px rgba(214, 196, 138, 0.25); }
  50% { text-shadow: 0 0 30px rgba(214, 196, 138, 0.5); }
}

@media (prefers-reduced-motion: reduce) {
  .fault-viz__glyph,
  .fault-viz__scan,
  .fault-viz__particles i,
  .resource-card::after,
  .segment.is-filled,
  .maint-btn__led,
  .maint-btn__meter i::after,
  .end-day-btn__led,
  .end-day-btn__hazard,
  .end-day-btn__arrow,
  .end-day-btn::after,
  .bay-patch::after,
  .intro-visual__rings,
  .intro-visual__ticks,
  .intro-visual__arc,
  .intro-visual__core,
  .intro-visual__legend b,
  .end-card::after,
  #endGrade,
  #evacCountdown {
    animation: none !important;
  }
}
/* v2.8.0 閳?live schematic internals */
.fault-schematic__sweep {
  transform-box: view-box;
  transform-origin: 300px 100px;
  animation: radarSweep 7.5s linear infinite;
}
.fault-schematic__node {
  animation: nodePulse 2.6s ease-in-out infinite;
}
.fault-schematic__blip {
  animation: blipPing 2.2s ease-out infinite;
}
.fault-schematic__bar {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: barBreathe 3.4s ease-in-out infinite;
}
.fault-schematic__circuit {
  stroke-dasharray: 5 9;
  animation: circuitFlow 11s linear infinite;
}
.fault-schematic__trace--dim {
  stroke-dasharray: 3 8;
  animation: traceDrift 14s linear infinite;
}
.fault-schematic__scan {
  animation: schScan 5.8s linear infinite;
}
.fault-schematic--trap .fault-schematic__sweep { animation-duration: 4.8s; }
.fault-schematic--melt .fault-schematic__bar { animation-duration: 2.2s; }
.fault-schematic--voltage .fault-schematic__blip { animation-duration: 1.2s; }
.fault-schematic--echo .fault-schematic__node { animation-duration: 1.5s; }
.fault-viz__glyph { opacity: 0.1; }

@keyframes radarSweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes nodePulse {
  0%, 100% { opacity: 0.55; r: 2.4; }
  50% { opacity: 1; r: 3.4; }
}
@keyframes blipPing {
  0% { opacity: 0.9; r: 3; }
  70% { opacity: 0; r: 11; }
  100% { opacity: 0; r: 11; }
}
@keyframes barBreathe {
  0%, 100% { opacity: 0.72; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(0.82); }
}
@keyframes circuitFlow {
  to { stroke-dashoffset: -140; }
}
@keyframes traceDrift {
  to { stroke-dashoffset: 88; }
}
@keyframes schScan {
  0% { transform: translateY(-100%); opacity: 0; }
  15% { opacity: 0.5; }
  85% { opacity: 0.2; }
  100% { transform: translateY(700%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fault-schematic__sweep,
  .fault-schematic__node,
  .fault-schematic__blip,
  .fault-schematic__bar,
  .fault-schematic__circuit,
  .fault-schematic__trace--dim,
  .fault-schematic__scan { animation: none !important; }
}
/* v2.8.0 閳?dossier barcode + stronger hologram */
.fault-card::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 8px;
  width: 56px;
  height: 15px;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--viz-color, #d7c48d) 0 1px, transparent 1px 3px);
  opacity: 0.2;
  transform: skewX(-12deg);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--viz-color, #d7c48d) 45%, transparent));
}
.fault-card__content {
  position: relative;
}
.fault-viz__glyph { opacity: 0.13; }
.fault-card__schematic.is-compact .fault-viz__glyph { opacity: 0.16; }

/* ---------- v2.9 per-fault specimen scenes ---------- */
.fault-card.is-fresh {
  animation-delay: var(--fault-delay, 0s);
}
.fault-scene {
  color: var(--scene-color, #d7c48d);
  overflow: hidden;
}
.fault-scene__grid path,
.fault-scene__frame path,
.fault-scene__line,
.fault-scene__coil,
.fault-scene__spiral,
.fault-scene__wave,
.fault-scene__arc,
.fault-scene__thermo,
.fault-scene__lock {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.24;
  vector-effect: non-scaling-stroke;
}
.fault-scene__line--bright {
  opacity: 0.7;
  stroke-width: 1.35;
}
.fault-scene__line--hot,
.fault-scene__hot {
  stroke: #ff7a72;
  opacity: 0.75;
}
.fault-scene__line--dash {
  stroke-dasharray: 5 7;
  opacity: 0.5;
}
.fault-scene__panel,
.fault-scene__paper,
.fault-scene__slat,
.fault-scene__plate,
.fault-scene__stack-card {
  fill: currentColor;
  fill-opacity: 0.12;
  stroke: currentColor;
  stroke-opacity: 0.32;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.fault-scene__slot {
  fill: #050908;
  stroke: currentColor;
  stroke-opacity: 0.5;
}
.fault-scene__cell {
  fill: currentColor;
  fill-opacity: 0.07;
  stroke: currentColor;
  stroke-opacity: 0.28;
  stroke-width: 0.8;
}
.fault-scene__cell.is-on { fill-opacity: 0.38; animation: sceneCell 2.4s steps(2) infinite; }
.fault-scene__cell.is-bad { stroke: #ff7a72; fill-opacity: 0.2; }
.fault-scene__ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.38;
  animation: sceneRing 4.2s ease-in-out infinite;
  animation-delay: var(--scene-delay);
}
.fault-scene__sweep {
  fill: currentColor;
  fill-opacity: 0.12;
  stroke: none;
  transform-origin: 300px 100px;
  animation: sceneSweep calc(var(--scene-speed) * 1.25) linear infinite;
  animation-delay: var(--scene-delay);
}
.fault-scene__drop {
  fill: currentColor;
  filter: drop-shadow(0 0 4px currentColor);
  transform-box: fill-box;
  transform-origin: center;
  animation: sceneDrop 2.2s ease-in infinite;
  animation-delay: var(--scene-delay);
}
.fault-scene__fill { fill: currentColor; fill-opacity: 0.14; }
.fault-scene__blip,
.fault-scene__spark {
  fill: currentColor;
  filter: drop-shadow(0 0 5px currentColor);
  animation: sceneBlink 1.9s ease-in-out infinite;
  animation-delay: var(--scene-delay);
}
.fault-scene__core {
  fill: currentColor;
  fill-opacity: 0.2;
  stroke: currentColor;
  stroke-opacity: 0.65;
  stroke-width: 1.2;
}
.fault-scene__seal {
  fill: #ff7a72;
  fill-opacity: 0.18;
  stroke: #ff7a72;
  stroke-width: 1.4;
}
.fault-scene__beacon {
  fill: currentColor;
  fill-opacity: 0.4;
  animation: sceneBeacon 2.2s ease-in-out infinite;
  animation-delay: var(--scene-delay);
}
.fault-scene__diamond {
  fill: #ff7a72;
  fill-opacity: 0.28;
  stroke: #ff7a72;
  stroke-width: 1;
  animation: sceneBlink 1.8s steps(2) infinite;
  animation-delay: var(--scene-delay);
}
.fault-scene__flame {
  fill: #ff7a5a;
  fill-opacity: 0.3;
  animation: sceneFlame 1.8s ease-in-out infinite alternate;
  animation-delay: var(--scene-delay);
}
.fault-scene__pit {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.4;
  animation: sceneBlink 3.2s ease-in-out infinite;
  animation-delay: var(--scene-delay);
}
.fault-scene__coin {
  fill: currentColor;
  fill-opacity: 0.55;
  animation: sceneCoin 2.8s ease-in-out infinite alternate;
  animation-delay: var(--scene-delay);
}
.fault-scene__press {
  transform-box: fill-box;
  transform-origin: top center;
  animation: scenePress 2.6s cubic-bezier(0.6, 0, 0.2, 1) infinite;
  animation-delay: var(--scene-delay);
}
.fault-scene__slide {
  animation: sceneSlide 3.2s ease-in-out infinite alternate;
  animation-delay: var(--scene-delay);
}
.fault-scene__slat {
  animation: sceneSlat 2.4s ease-in-out infinite;
  animation-delay: var(--scene-delay);
}
.fault-scene__coil,
.fault-scene__spiral,
.fault-scene__wave {
  stroke-dasharray: 7 5;
  animation: sceneDash 8s linear infinite;
  animation-delay: var(--scene-delay);
}
.fault-scene__thermo {
  stroke-width: 2;
  opacity: 0.5;
  animation: sceneFlame 2.4s ease-in-out infinite alternate;
  animation-delay: var(--scene-delay);
}
.fault-scene__code,
.fault-scene__motif,
.fault-scene__stamp-text {
  fill: currentColor;
  font-family: var(--font-mono, monospace);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 0.55;
}
.fault-scene__stamp-text {
  font-size: 9px;
  fill-opacity: 0.85;
}
.fault-viz--minimal .fault-viz__particles i { opacity: 0.25; }
.fault-viz--minimal .fault-viz__scan { opacity: 0.32; }

@keyframes sceneSweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes sceneDrop {
  0% { transform: translateY(-8px) scale(0.7); opacity: 0; }
  18% { opacity: 0.9; }
  82% { opacity: 0.8; }
  100% { transform: translateY(96px) scale(1); opacity: 0; }
}
@keyframes sceneBlink {
  0%, 100% { opacity: 0.18; }
  50% { opacity: 0.95; }
}
@keyframes sceneRing {
  0%, 100% { opacity: 0.18; transform: scale(0.96); }
  50% { opacity: 0.58; transform: scale(1.02); }
}
@keyframes sceneBeacon {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.9; filter: drop-shadow(0 0 8px currentColor); }
}
@keyframes sceneFlame {
  from { transform: translateY(2px) scale(0.94); opacity: 0.24; }
  to { transform: translateY(-5px) scale(1.06); opacity: 0.52; }
}
@keyframes sceneCoin {
  from { transform: translateY(0); opacity: 0.35; }
  to { transform: translateY(-10px); opacity: 0.75; }
}
@keyframes scenePress {
  0%, 18%, 100% { transform: translateY(-16px); }
  34%, 62% { transform: translateY(10px); }
  74% { transform: translateY(-8px); }
}
@keyframes sceneSlide {
  from { transform: translateY(0); }
  to { transform: translateY(8px); }
}
@keyframes sceneSlat {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(2px); }
}
@keyframes sceneDash {
  to { stroke-dashoffset: -120; }
}
@keyframes sceneCell {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* v2.9 閳?let the specimen scene read through the card, keep copy legible */
@media (min-width: 1001px) {
  .fault-list.is-count-3 .fault-card__schematic.is-compact,
  .fault-list.is-count-4 .fault-card__schematic.is-compact {
    opacity: 0.94;
  }
  .fault-list.is-count-3 .fault-card__content,
  .fault-list.is-count-4 .fault-card__content {
    background: linear-gradient(
      90deg,
      rgba(3, 9, 6, 0.8) 0%,
      rgba(3, 9, 6, 0.34) 34%,
      rgba(3, 9, 6, 0.14) 56%,
      rgba(3, 9, 6, 0.78) 100%
    );
  }
  .fault-list.is-count-3 .fault-lore,
  .fault-list.is-count-4 .fault-lore {
    background: linear-gradient(90deg, rgba(3, 9, 6, 0.12), rgba(3, 9, 6, 0.52));
  }
}
.fault-scene__grid path,
.fault-scene__frame path,
.fault-scene__line,
.fault-scene__coil,
.fault-scene__spiral,
.fault-scene__wave,
.fault-scene__arc,
.fault-scene__thermo,
.fault-scene__lock { opacity: 0.38; }
.fault-scene__panel,
.fault-scene__paper,
.fault-scene__slat,
.fault-scene__plate,
.fault-scene__stack-card {
  fill-opacity: 0.09;
  stroke-opacity: 0.46;
}
.fault-scene__code,
.fault-scene__motif,
.fault-scene__stamp-text { opacity: 0.76; }
.fault-scene__tag,
.fault-scene__sev { text-shadow: 0 1px 3px #000, 0 0 8px #000; }

@media (min-width: 1001px) {
  .fault-list.is-count-3 .fault-card__schematic text,
  .fault-list.is-count-4 .fault-card__schematic text {
    display: block;
  }
  .fault-list.is-count-3 .fault-card__schematic.is-compact,
  .fault-list.is-count-4 .fault-card__schematic.is-compact {
    opacity: 1;
    filter: brightness(1.35) saturate(1.3);
  }
  .fault-list.is-count-3 .fault-card__content,
  .fault-list.is-count-4 .fault-card__content {
    background:
      linear-gradient(180deg, rgba(3, 9, 6, 0.97) 0 34%, rgba(3, 9, 6, 0.55) 48%, rgba(3, 9, 6, 0) 68%),
      linear-gradient(
        90deg,
        rgba(3, 9, 6, 0.86) 0%,
        rgba(3, 9, 6, 0.72) 18%,
        rgba(3, 9, 6, 0.08) 38%,
        rgba(3, 9, 6, 0.04) 62%,
        rgba(3, 9, 6, 0.78) 78%,
        rgba(3, 9, 6, 0.9) 100%
      );
  }
}
.fault-scene__grid path,
.fault-scene__frame path,
.fault-scene__line,
.fault-scene__coil,
.fault-scene__spiral,
.fault-scene__wave,
.fault-scene__arc,
.fault-scene__thermo,
.fault-scene__lock { opacity: 0.6; stroke-width: 1.3; }
.fault-scene__panel,
.fault-scene__paper,
.fault-scene__slat,
.fault-scene__plate,
.fault-scene__stack-card {
  fill-opacity: 0.16;
  stroke-opacity: 0.62;
}
.fault-scene__cell { fill-opacity: 0.16; stroke-opacity: 0.5; }
.fault-scene__sweep { fill-opacity: 0.24; }
.fault-scene__ring { opacity: 0.58; }
.fault-scene__code,
.fault-scene__motif,
.fault-scene__stamp-text { opacity: 0.92; font-size: 8px; }
.fault-scene__stamp-text { font-size: 10px; }
.fault-card__schematic.is-compact .fault-scene {
  mix-blend-mode: screen;
}
.fault-scene__line,
.fault-scene__coil,
.fault-scene__spiral,
.fault-scene__wave,
.fault-scene__arc,
.fault-scene__ring {
  filter: drop-shadow(0 0 3px currentColor);
}
.fault-card__schematic.is-compact .fault-viz__glyph {
  opacity: 0.13;
  mix-blend-mode: screen;
}
@media (min-width: 1001px) {
  .fault-list.is-count-3 .fault-card__title,
  .fault-list.is-count-4 .fault-card__title {
    position: relative;
    z-index: 2;
    background: linear-gradient(90deg, rgba(3, 9, 6, 0.9), rgba(3, 9, 6, 0.68) 72%, transparent);
  }
  .fault-list.is-count-3 .fault-card { min-height: 137px; }
  .fault-list.is-count-3 .fault-lore__text {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    font-size: 11px !important;
  }
  .fault-list.is-count-3 .fault-card__title h3 { font-size: 16px; }
  .fault-list.is-count-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
  }
  .fault-list.is-count-4 .fault-card { min-height: 0; }
  .fault-list.is-count-4 .fault-card__main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .fault-list.is-count-4 .fault-lore {
    display: flex;
    max-height: 32px;
    padding: 1px 8px;
    background: rgba(3, 9, 6, 0.72);
    overflow: hidden;
  }
  .fault-list.is-count-4 .fault-lore__text {
    -webkit-line-clamp: 2;
    font-size: 9.2px !important;
    line-height: 1.25;
  }
  .fault-list.is-count-4 .fault-lore .micro-label,
  .fault-list.is-count-4 .fault-lore__stamp { display: none; }
  .fault-list.is-count-4 .fault-card__title h3 { font-size: 14px; }
  .fault-list.is-count-4 .fault-card__title .fault-rule { font-size: 12px !important; }
  .fault-list.is-count-3 .fault-lore,
  .fault-list.is-count-4 .fault-lore {
    position: relative;
    z-index: 2;
  }
  .fault-list.is-count-3 .fault-card,
  .fault-list.is-count-4 .fault-card {
    overflow: hidden !important;
  }
  .fault-list.is-count-3 .fault-card__title h3,
  .fault-list.is-count-4 .fault-card__title h3 {
    background: #030906;
    padding: 2px 6px;
    border-radius: 2px;
  }
  .fault-list.is-count-3 .fault-card__title .fault-rule,
  .fault-list.is-count-4 .fault-card__title .fault-rule {
    background: #030906;
    padding: 1px 6px;
    border-radius: 2px;
  }
}

/* v2.9.1 鈥?fault-scene stage props: readable silhouettes behind each specimen graph */
.fault-scene__stage {
  color: currentColor;
  opacity: 0.9;
}
.fault-scene__stage path,
.fault-scene__stage rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  opacity: 0.22;
  vector-effect: non-scaling-stroke;
}
.fault-scene__stage .fault-scene__stage-hazard {
  fill: currentColor;
  fill-opacity: 0.08;
  stroke: none;
  opacity: 0.8;
}
.fault-scene__stage .fault-scene__stage-line {
  opacity: 0.1;
  stroke-dasharray: 3 8;
}
.fault-scene__prop {
  color: currentColor;
  opacity: 1;
}
.fault-scene__prop-fill {
  fill: currentColor;
  fill-opacity: 0.2;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-opacity: 0.82;
  vector-effect: non-scaling-stroke;
}
.fault-scene__prop-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-opacity: 0.9;
  vector-effect: non-scaling-stroke;
}
.fault-card__schematic.is-compact > .fault-scene {
  opacity: 0.84;
}
.fault-scene__lamp {
  fill: currentColor;
  stroke: none;
  opacity: 0.9;
  filter: drop-shadow(0 0 5px currentColor);
  animation: faultLamp 2.8s ease-in-out infinite;
}
.fault-scene__prop-text {
  fill: currentColor;
  opacity: 0.42;
  font: 7px/1 "IBM Plex Mono", "Cascadia Mono", monospace;
  letter-spacing: 0.16em;
}
@keyframes faultLamp {
  0%, 100% { opacity: 0.35; }
  48% { opacity: 0.95; }
}
@media (prefers-reduced-motion: reduce) {
  .fault-scene__lamp { animation: none; }
}
.fault-card__schematic {
  position: relative;
}
.fault-card__schematic > .fault-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  pointer-events: none;
}
.fault-card__schematic.is-compact > .fault-scene {
  opacity: 0.84;
}
.fault-card__schematic > .fault-schematic__plot:not(.fault-scene) {
  position: relative;
  z-index: 1;
}
.fault-card__schematic > .fault-schematic__tag,
.fault-card__schematic > .fault-schematic__sev,
.fault-card__schematic > .fault-schematic__label,
.fault-card__schematic > .fault-schematic__value,
.fault-card__schematic > .fault-schematic__scan {
  z-index: 2;
}


/* v3.0 鈥?sci-fi containment stage for every fault scene */
.scene-v2__stage path,
.scene-v2__stage ellipse,
.scene-v2__holo path,
.scene-v2__holo ellipse,
.scene-v2__holo circle,
.scene-v2__prop path,
.scene-v2__prop rect,
.scene-v2__prop circle,
.scene-v2__prop ellipse,
.scene-v2__prop polygon {
  vector-effect: non-scaling-stroke;
}
.scene-v2__horizon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-opacity: 0.28;
}
.scene-v2__floor {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.8;
  stroke-opacity: 0.16;
}
.scene-v2__ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-opacity: 0.45;
  stroke-dasharray: 3 9;
  transform-box: fill-box;
  transform-origin: center;
  animation: sceneOrbit 22s linear infinite;
}
.scene-v2__ring--dash {
  stroke-opacity: 0.22;
  stroke-dasharray: 1 7;
  animation-duration: 14s;
  animation-direction: reverse;
}
.scene-v2__beam {
  fill: currentColor;
  fill-opacity: 0.035;
  stroke: none;
}
.scene-v2__scan {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-opacity: 0.22;
  stroke-dasharray: 24 30;
  animation: sceneScanX 9s linear infinite;
}
.scene-v2__shard {
  fill: currentColor;
  fill-opacity: 0.08;
  stroke: currentColor;
  stroke-width: 0.8;
  stroke-opacity: 0.45;
}
.scene-v2__holo .holo-base {
  fill: currentColor;
  fill-opacity: 0.1;
  stroke: currentColor;
  stroke-opacity: 0.3;
}
.scene-v2__holo .holo-cone {
  fill: currentColor;
  fill-opacity: 0.055;
  stroke: currentColor;
  stroke-opacity: 0.18;
  animation: holoPulse 4.2s ease-in-out infinite;
}
.scene-v2__holo .holo-rim {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-opacity: 0.55;
}
.scene-v2__holo .holo-node {
  fill: currentColor;
  filter: drop-shadow(0 0 4px currentColor);
}
.scene-v2__holo .holo-spark {
  fill: none;
  stroke: currentColor;
  stroke-opacity: 0.45;
}
.scene-v2__prop path,
.scene-v2__prop rect,
.scene-v2__prop circle,
.scene-v2__prop ellipse,
.scene-v2__prop polygon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-opacity: 0.5;
}
.scene-v2__prop .v2-panel,
.scene-v2__prop .v2-door,
.scene-v2__prop .v2-arch,
.scene-v2__prop .v2-coil,
.scene-v2__prop .v2-shield,
.scene-v2__prop .v2-glass,
.scene-v2__prop .v2-rail,
.scene-v2__prop .v2-pod {
  fill: currentColor;
  fill-opacity: 0.04;
  stroke-opacity: 0.42;
}
.scene-v2__prop .v2-liquid {
  fill: currentColor;
  fill-opacity: 0.28;
  stroke-opacity: 0.55;
  animation: holoPulse 3.4s ease-in-out infinite;
}
.scene-v2__prop .v2-core {
  fill: currentColor;
  fill-opacity: 0.12;
  stroke-opacity: 0.6;
}
.scene-v2__prop .v2-core-inner {
  fill: currentColor;
  fill-opacity: 0.45;
  stroke: none;
}
.scene-v2__prop .v2-orb {
  fill: currentColor;
  stroke: none;
  filter: drop-shadow(0 0 3px currentColor);
}
.scene-v2__prop .v2-cube {
  fill: currentColor;
  fill-opacity: 0.12;
  stroke-opacity: 0.55;
}
.scene-v2__prop .v2-seal,
.scene-v2__prop .v2-seal-inner {
  fill: none;
  stroke-opacity: 0.5;
}
.scene-v2__prop .v2-seal-inner {
  stroke-dasharray: 4 4;
}
.scene-v2__prop .v2-pipe {
  fill: none;
  stroke-width: 1.4;
}
.scene-v2__prop .v2-vapor,
.scene-v2__prop .v2-mist {
  fill: none;
  stroke-opacity: 0.3;
  stroke-dasharray: 2 5;
}
.scene-v2__prop .v2-pool,
.scene-v2__prop .v2-void {
  fill: currentColor;
  fill-opacity: 0.08;
  stroke-opacity: 0.3;
}
.scene-v2__prop .v2-laser {
  stroke-opacity: 0.28;
  stroke-dasharray: 2 7;
}
.scene-v2__prop .v2-wave {
  fill: none;
  stroke-width: 1.4;
  stroke-opacity: 0.6;
}
.scene-v2__prop .v2-dial {
  fill: currentColor;
  fill-opacity: 0.04;
  stroke-opacity: 0.4;
}
.scene-v2__prop .v2-needle,
.scene-v2__prop .v2-orbit,
.scene-v2__prop .v2-arc {
  fill: none;
  stroke-opacity: 0.55;
}
.scene-v2__prop .v2-shard {
  fill: currentColor;
  fill-opacity: 0.07;
  stroke-opacity: 0.38;
}
.scene-v2__prop .v2-hazard {
  fill: currentColor;
  fill-opacity: 0.16;
  stroke-opacity: 0.3;
}
.scene-v2__prop .v2-slit {
  fill: currentColor;
  fill-opacity: 0.18;
  stroke-opacity: 0.4;
}
@keyframes sceneOrbit {
  to { transform: rotate(360deg); }
}
@keyframes sceneScanX {
  to { stroke-dashoffset: -540; }
}
@keyframes holoPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-v2__ring,
  .scene-v2__scan,
  .scene-v2__holo .holo-cone,
  .scene-v2__prop .v2-liquid {
    animation: none;
  }
}

/* v3.0.1 鈥?stronger sci-fi contrast so the stage reads as a scene, not a graph */
.scene-v2__ring { stroke-opacity: 0.68; }
.scene-v2__prop path,
.scene-v2__prop rect,
.scene-v2__prop circle,
.scene-v2__prop ellipse,
.scene-v2__prop polygon { stroke-opacity: 0.66; stroke-width: 1.15; }
.scene-v2__prop .v2-panel,
.scene-v2__prop .v2-door,
.scene-v2__prop .v2-arch,
.scene-v2__prop .v2-coil,
.scene-v2__prop .v2-shield,
.scene-v2__prop .v2-rail,
.scene-v2__prop .v2-pod { fill-opacity: 0.07; stroke-opacity: 0.55; }
.scene-v2__holo .holo-cone { fill-opacity: 0.08; }
.scene-v2__holo { opacity: 0.9; }
.scene-v2__holo .core-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-opacity: 0.34;
  stroke-dasharray: 5 7;
  transform-box: fill-box;
  transform-origin: center;
  animation: sceneOrbit 16s linear infinite reverse;
}
.scene-v2__holo .core-ring--inner {
  stroke-dasharray: 2 5;
  stroke-opacity: 0.24;
  animation-duration: 10s;
}
.scene-v2__holo .core-axis {
  fill: none;
  stroke: currentColor;
  stroke-opacity: 0.2;
  stroke-dasharray: 2 6;
}
.scene-v2__holo .core-hex {
  fill: currentColor;
  fill-opacity: 0.08;
  stroke: currentColor;
  stroke-opacity: 0.5;
}
.scene-v2__holo .core-dot {
  fill: currentColor;
  filter: drop-shadow(0 0 4px currentColor);
}
.fault-scene .fault-scene__line,
.fault-scene .fault-scene__arc {
  stroke-opacity: 0.34;
}

/* v3.0.2 鈥?navy holographic card shell, neon scene, less green/gold mud */
.fault-card {
  background:
    radial-gradient(circle at 28% 38%, color-mix(in srgb, var(--fault-accent) 20%, transparent), transparent 52%),
    linear-gradient(155deg, #07131f 0%, #040a12 55%, #02070c 100%) !important;
  border-color: color-mix(in srgb, var(--fault-accent) 42%, #152b35) !important;
  box-shadow:
    inset 0 0 34px color-mix(in srgb, var(--fault-accent) 10%, transparent),
    0 0 0 1px color-mix(in srgb, var(--fault-accent) 12%, transparent) !important;
}
.fault-card::after {
  background: linear-gradient(105deg, transparent 0 46%, color-mix(in srgb, var(--fault-accent) 8%, transparent) 47% 48%, transparent 49% 100%) !important;
}
.fault-card__name {
  color: #e9f7ff !important;
  text-shadow: 0 0 10px color-mix(in srgb, var(--fault-accent) 36%, transparent) !important;
}
.fault-card__rule {
  color: #c8ecff !important;
}
.fault-card__meta,
.fault-card__sev,
.fault-card__code {
  color: #86b8c9 !important;
}
.fault-lore {
  color: #c9e3ec !important;
  background: linear-gradient(90deg, rgba(2, 9, 14, 0.42), rgba(2, 9, 14, 0.08)) !important;
  border-left-color: color-mix(in srgb, var(--fault-accent) 46%, transparent) !important;
}
.fault-lore__label {
  color: color-mix(in srgb, var(--fault-accent) 68%, #e8f7ff) !important;
}
.fault-lore__text {
  color: #cfe6ee !important;
}
.fault-scene__code,
.fault-scene__motif {
  fill: #8bbdca !important;
}
.fault-scene__line,
.fault-scene__arc {
  stroke-opacity: 0.5 !important;
}
.scene-v2__prop {
  opacity: 0.95;
}
.scene-v2__prop .v2-panel,
.scene-v2__prop .v2-door,
.scene-v2__prop .v2-arch,
.scene-v2__prop .v2-coil,
.scene-v2__prop .v2-shield,
.scene-v2__prop .v2-rail,
.scene-v2__prop .v2-pod {
  fill-opacity: 0.13 !important;
  stroke-opacity: 0.72 !important;
}
.scene-v2__prop .v2-orb {
  filter: drop-shadow(0 0 5px currentColor) !important;
}
.scene-v2__prop .v2-liquid {
  fill-opacity: 0.42 !important;
  filter: drop-shadow(0 0 6px currentColor);
}
.scene-v2__beam {
  fill-opacity: 0.055 !important;
}

/* v3.0.3 鈥?holographic watermark + larger edge props; graph becomes scan noise */
.scene-v2__watermark {
  fill: currentColor;
  fill-opacity: 0.075;
  stroke: currentColor;
  stroke-opacity: 0.12;
  stroke-width: 1;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 82px;
  font-weight: 700;
  letter-spacing: 14px;
}
.scene-v2__prop {
  transform: translate(34px, 6px) scale(1.18);
  transform-origin: 300px 112px;
}
.fault-scene .fault-scene__line,
.fault-scene .fault-scene__arc {
  stroke-opacity: 0.24 !important;
}
.fault-scene .fault-scene__panel,
.fault-scene .fault-scene__fill {
  opacity: 0.55;
}
.scene-v2__holo .core-ring {
  stroke-opacity: 0.48;
}
.scene-v2__holo .core-ring--inner {
  stroke-opacity: 0.34;
}

/* v3.0.4 鈥?central holographic emblem instead of the old oscilloscope graph */
.fault-scene__legacy { display: inline; }
@media (max-width: 1000px) {
  .fault-scene__legacy { opacity: 0.72; }
}
.scene-v2__center path,
.scene-v2__center circle,
.scene-v2__center ellipse,
.scene-v2__center rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-opacity: 0.62;
  vector-effect: non-scaling-stroke;
}
.scene-v2__center .v2-center-fill {
  fill: currentColor;
  fill-opacity: 0.1;
  stroke-opacity: 0.55;
}
.scene-v2__center .v2-center-hot {
  stroke-opacity: 0.9;
  filter: drop-shadow(0 0 4px currentColor);
}
.scene-v2__center .v2-center-text {
  fill: currentColor;
  fill-opacity: 0.72;
  stroke: none;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 4px;
}
.scene-v2__center .v2-orb {
  fill: currentColor;
  stroke: none;
  filter: drop-shadow(0 0 5px currentColor);
}

/* v3.0.1 鈥?3-fault right rail: use the empty space, bigger readable lore */
@media (min-width: 1001px) {
  .fault-list.is-count-3 .fault-lore {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 4px 10px 4px !important;
  }
  .fault-list.is-count-3 .fault-lore__text {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    font-size: 15px !important;
    line-height: 1.58 !important;
    letter-spacing: 0 !important;
    color: #d7edf5 !important;
  }
  .fault-list.is-count-3 .fault-lore__label {
    font-size: 9px !important;
    margin-bottom: 1px !important;
  }
}

/* v3.0.4 鈥?3-fault lore: 15px three full lines, tighter rail chrome */
@media (min-width: 1001px) {
  .fault-list.is-count-3 .fault-lore {
    padding: 0 10px 2px !important;
    overflow: hidden !important;
  }
  .fault-list.is-count-3 .fault-lore__label {
    margin: 0 0 1px !important;
    line-height: 1 !important;
  }
  .fault-list.is-count-3 .fault-lore__text {
    margin-top: 0 !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    -webkit-line-clamp: 3 !important;
  }
}

/* v3.0.5 鈥?four/many-fault readability */
@media (min-width: 1001px) {
  .fault-list.is-count-4 .fault-lore {
    max-height: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    overflow: hidden !important;
    padding: 2px 8px 3px !important;
  }
  .fault-list.is-count-4 .fault-lore__text {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4 !important;
    overflow: hidden !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: #e0f2f8 !important;
  }
  .fault-list.is-count-4 .fault-lore__label {
    font-size: 8.5px !important;
    margin: 0 0 1px !important;
    line-height: 1 !important;
  }
  .fault-list.is-count-4 .fault-lore .micro-label { display: inline !important; }
  .fault-list.is-count-4 .fault-card__title h3 { font-size: 15px !important; }
  .fault-list.is-count-4 .fault-card__title .fault-rule { font-size: 13px !important; }
  .fault-list.is-many {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(150px, 1fr);
    align-content: start;
    overflow-y: auto;
  }
  .fault-list.is-many .fault-card { min-height: 150px; }
}

/* v3.0.5 鈥?sci-fi skin for the rest of the console */
:root {
  --sci-panel: #06131b;
  --sci-panel-2: #0a1f2a;
  --sci-line: #1b4554;
  --sci-line-hot: #2d7c8f;
  --sci-cyan: #6ae8ff;
  --sci-ice: #d8f6ff;
}

.topbar {
  background: linear-gradient(180deg, rgba(8, 28, 38, 0.98), rgba(3, 10, 14, 0.99));
  border-bottom-color: var(--sci-line);
  box-shadow: 0 1px 0 rgba(106, 232, 255, 0.12), 0 12px 32px rgba(0, 0, 0, 0.34);
}
.topbar::after {
  background: linear-gradient(90deg, transparent, rgba(106, 232, 255, 0.35), transparent);
  opacity: 0.55;
}
.brand__title { text-shadow: 0 0 22px rgba(106, 232, 255, 0.22); }
.brand__sub, .topbar__center, .topbar__right { color: #8fb9c5; }
.brand__ver { color: var(--sci-cyan) !important; }
.cycle-bar, .cycle-meter { border-color: var(--sci-line) !important; }
.cycle-bar i, .cycle-meter i { background: linear-gradient(90deg, #3da7bd, var(--sci-cyan)) !important; }

.panel, .board, .patch-bay, .maintenance, .log-panel, .hand-panel {
  border-color: var(--sci-line);
  background-image: linear-gradient(180deg, rgba(8, 30, 40, 0.96), rgba(3, 10, 14, 0.99));
  box-shadow: inset 0 1px 0 rgba(150, 242, 255, 0.06), 0 18px 46px rgba(0, 0, 0, 0.32);
}
.section-head, .log-head, .hand-head, .patch-bay__head { border-bottom-color: var(--sci-line) !important; }
.section-head h2, .section-head h3, .hand-head h2 { color: var(--sci-ice); }

.resource-card {
  background: linear-gradient(145deg, #0a202b, #050f15) !important;
  border-color: #1a4553 !important;
  box-shadow: inset 0 1px 0 rgba(150, 242, 255, 0.05), 0 10px 24px rgba(0, 0, 0, 0.22);
}
.resource-card::after {
  background: linear-gradient(135deg, var(--sci-cyan), transparent 42%) !important;
  opacity: 0.5;
}
.resource-icon {
  background: #0a2834 !important;
  border: 1px solid #215665 !important;
  color: var(--accent) !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 18%, transparent);
}
.resource-value { color: var(--sci-ice); text-shadow: 0 0 16px rgba(106, 232, 255, 0.18); }
.segment.is-filled {
  background: linear-gradient(90deg, var(--accent), #d9fbff) !important;
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent);
}
.resource-gauge i { border-color: color-mix(in srgb, var(--accent) 70%, #d9fbff) !important; }

.patch-card {
  background: linear-gradient(155deg, #0a202b, #050f15) !important;
  border-color: #1d4a5a !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(150, 242, 255, 0.05);
}
.patch-card:hover, .patch-card:focus-visible {
  border-color: var(--sci-cyan) !important;
  box-shadow: 0 0 0 1px rgba(106, 232, 255, 0.28), 0 16px 34px rgba(0, 0, 0, 0.36), 0 0 32px rgba(106, 232, 255, 0.12);
}
.patch-card__watermark { color: var(--sci-cyan) !important; opacity: 0.055 !important; }
.patch-card__icon {
  background: #0a2834 !important;
  border: 1px solid #215665 !important;
  box-shadow: 0 0 14px rgba(106, 232, 255, 0.1);
}
.patch-code { color: #8fe9ff !important; }
.cost-badge { background: #0c2b36 !important; border-color: #2a6574 !important; color: #c9f7ff !important; }
.effect-chip.is-positive { color: #b8f0dc !important; background: rgba(58, 155, 128, 0.16) !important; }
.effect-chip.is-negative { color: #ffc2a8 !important; background: rgba(173, 78, 48, 0.18) !important; }

.maint-btn {
  background: linear-gradient(150deg, #0a202b, #050f15) !important;
  border-color: #1d4a5a !important;
}
.maint-btn:hover:not(:disabled) { border-color: var(--sci-cyan) !important; }
.maint-btn__led { background: var(--sci-cyan) !important; box-shadow: 0 0 12px rgba(106, 232, 255, 0.8) !important; }
.maint-btn__meter { background: #0a2631 !important; }
.maint-btn__meter i { background: linear-gradient(90deg, #3da7bd, var(--sci-cyan)) !important; }

.patch-slot, .slot {
  background: linear-gradient(150deg, rgba(9, 32, 43, 0.75), rgba(3, 10, 14, 0.9)) !important;
  border-color: #1a4150 !important;
}
.patch-slot.is-occupied, .slot.is-occupied { border-color: var(--sci-line-hot) !important; }
.slot-index, .patch-slot__index { color: #5c9bab !important; }

.end-day-btn {
  background: linear-gradient(135deg, #0b2a36, #061018 62%, #0a2029) !important;
  border-color: #2a6574 !important;
  box-shadow: inset 0 1px 0 rgba(150, 242, 255, 0.12), 0 14px 30px rgba(0, 0, 0, 0.35);
}
.end-day-btn:hover:not(:disabled) {
  border-color: var(--sci-cyan) !important;
  box-shadow: inset 0 1px 0 rgba(150, 242, 255, 0.18), 0 0 30px rgba(106, 232, 255, 0.14);
}
.end-day-btn__arrow {
  background: var(--sci-cyan) !important;
  color: #031016 !important;
  box-shadow: 0 0 22px rgba(106, 232, 255, 0.5);
}
.end-day-btn__led { background: var(--sci-cyan) !important; box-shadow: 0 0 12px var(--sci-cyan) !important; }
.end-day-btn__hazard { opacity: 0.55; }

.log-panel { background: linear-gradient(180deg, #06141b, #030a0e) !important; }
.log-line { border-left: 2px solid rgba(106, 232, 255, 0.28) !important; }
.log-line:hover { background: rgba(106, 232, 255, 0.045) !important; }
.log-day { color: var(--sci-cyan) !important; }

.intro-shell, .end-card {
  border-color: var(--sci-line) !important;
  box-shadow: inset 0 1px 0 rgba(150, 242, 255, 0.08), 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 60px rgba(106, 232, 255, 0.05) !important;
}
.intro-shell::after, .end-card::after {
  background: linear-gradient(115deg, rgba(106, 232, 255, 0.55), transparent 34%) !important;
}

/* v3.0.6 鈥?4+ fault names full width; patch slots join the sci-fi skin */
@media (min-width: 1001px) {
  .fault-list.is-count-4 .fault-card__title h3 {
    flex: 0 0 auto;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    font-size: 15px !important;
  }
  .fault-list.is-count-4 .fault-card__title .fault-rule {
    flex: 1 1 100%;
    font-size: 12.5px !important;
  }
  .fault-list.is-many .fault-card__title h3 { font-size: 14px !important; }
}
.bay-empty {
  background: linear-gradient(150deg, rgba(9, 32, 43, 0.78), rgba(3, 10, 14, 0.92)) !important;
  border-color: #1a4150 !important;
}
.bay-empty__index { color: #5fa9ba !important; }
.bay-empty.is-overload { border-color: rgba(255, 118, 82, 0.5) !important; }
.section-head h2::before, .hand-head h2::before, .log-head h2::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 13px;
  margin-right: 7px;
  vertical-align: -2px;
  background: var(--sci-cyan);
  box-shadow: 0 0 12px rgba(106, 232, 255, 0.7);
}

/* v3.0.7 鈥?carry the holographic palette into labels and controls */
.brand__title { color: #e8fbff !important; }
.brand__title b, .brand__title strong { color: #ffd27a !important; }
.brand__sub { color: #8fc4d0 !important; }
.brand__sub .brand__ver { color: var(--sci-cyan) !important; }
.signal-dot { background: var(--sci-cyan) !important; box-shadow: 0 0 10px var(--sci-cyan) !important; }
.topbar__center, .topbar__right, .day-counter, .cycle-label { color: #a8ced8 !important; }
.resource-name { color: #e6f8ff !important; }
.resource-name span { color: #6f9eac !important; }
.patch-card h4 { color: #e8faff !important; }
.patch-card__top { color: #79aebb !important; }
.patch-card__foot { color: #8db9c4 !important; }
.maint-btn strong { color: #e6f8ff !important; }
.maint-btn small { color: #8db9c4 !important; }
.end-day-btn__title { color: #e9fcff !important; }
.end-day-btn__sub { color: #9ac9d3 !important; }
.end-day-btn__sub kbd { background: #0c2b36 !important; border-color: #2a6574 !important; color: #bff7ff !important; }

/* v3.0.8 鈥?guarantee three full 15px lines in 3-fault lore */
@media (min-width: 1001px) {
  .fault-list.is-count-3 .fault-lore__text {
    max-height: 66px !important;
    overflow: hidden !important;
  }
}

/* v3.0.9 鈥?empty slots use the cyan circuit grid */
.bay-empty::before {
  background:
    linear-gradient(90deg, transparent 48%, rgba(106, 232, 255, 0.12) 50%, transparent 52%),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(106, 232, 255, 0.055) 23px, transparent 24px) !important;
  opacity: 0.38 !important;
}

/* v3.0.10 鈥?final slot/end-button accent cleanup */
.bay-empty {
  border: 1px dashed rgba(106, 232, 255, 0.26) !important;
  background:
    radial-gradient(circle at 0 0, rgba(106, 232, 255, 0.12) 0 2px, transparent 3px),
    radial-gradient(circle at 100% 100%, rgba(106, 232, 255, 0.1) 0 2px, transparent 3px),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(9, 30, 40, 0.72), rgba(3, 10, 14, 0.86)) !important;
}
.end-day-btn {
  border-color: rgba(106, 232, 255, 0.34) !important;
}

/* v3.1.0 鈥?4+ faults use the three-fault row language, scroll with a half-card peek */
.fault-list.is-many {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  grid-auto-rows: auto !important;
  gap: 6px !important;
  overflow-y: auto !important;
  padding-right: 3px !important;
}
.fault-list.is-many .fault-card {
  flex: 0 0 137px !important;
  min-height: 137px !important;
  max-height: 137px !important;
}
.fault-list.is-many .fault-lore__text {
  font-size: 15px !important;
  line-height: 1.5 !important;
  max-height: 66px !important;
  overflow: hidden !important;
}

/* v3.1.0 鈥?module background illustrations */
.topbar {
  background-image:
    url("assets/ui-topbar-hud.svg"),
    linear-gradient(180deg, #0a2631 0%, #071a22 100%) !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
}
.vitals-panel,
.board,
.patch-bay,
.maintenance,
.log-panel,
.hand {
  background-image:
    url("assets/ui-panel-blueprint.svg"),
    linear-gradient(180deg, rgba(8, 29, 39, 0.97), rgba(3, 13, 18, 0.99)) !important;
  background-size: 430px auto, cover !important;
  background-position: center, center !important;
  background-repeat: repeat, no-repeat !important;
}
.resource-card {
  background-image:
    url("assets/ui-vitals-monitor.svg"),
    linear-gradient(145deg, rgba(8, 34, 46, 0.96), rgba(4, 16, 22, 0.98)) !important;
  background-size: 130px auto, cover !important;
  background-position: right -26px top -14px, center !important;
  background-repeat: no-repeat, no-repeat !important;
}
.resource-card[data-resource="power"] {
  background-image:
    url("assets/ui-res-power.svg"),
    linear-gradient(145deg, rgba(8, 34, 46, 0.96), rgba(4, 16, 22, 0.98)) !important;
  background-size: 92px auto, cover !important;
  background-position: right -8px bottom -18px, center !important;
}
.resource-card[data-resource="food"] {
  background-image:
    url("assets/ui-res-food.svg"),
    linear-gradient(145deg, rgba(8, 34, 46, 0.96), rgba(4, 16, 22, 0.98)) !important;
  background-size: 92px auto, cover !important;
  background-position: right -8px bottom -18px, center !important;
}
.resource-card[data-resource="defense"] {
  background-image:
    url("assets/ui-res-defense.svg"),
    linear-gradient(145deg, rgba(8, 34, 46, 0.96), rgba(4, 16, 22, 0.98)) !important;
  background-size: 92px auto, cover !important;
  background-position: right -8px bottom -18px, center !important;
}
.resource-card[data-resource="stability"] {
  background-image:
    url("assets/ui-res-stability.svg"),
    linear-gradient(145deg, rgba(8, 34, 46, 0.96), rgba(4, 16, 22, 0.98)) !important;
  background-size: 92px auto, cover !important;
  background-position: right -8px bottom -18px, center !important;
}
.patch-card,
.hand-card {
  background-image:
    url("assets/ui-card-circuit.svg"),
    linear-gradient(160deg, rgba(7, 32, 42, 0.98), rgba(3, 13, 18, 0.99)) !important;
  background-size: 160px auto, cover !important;
  background-position: right -30px bottom -24px, center !important;
  background-repeat: no-repeat, no-repeat !important;
}
.maint-btn {
  background-image:
    url("assets/ui-maint-blueprint.svg"),
    linear-gradient(165deg, rgba(7, 35, 46, 0.97), rgba(3, 14, 20, 0.99)) !important;
  background-size: 118px auto, cover !important;
  background-position: right -18px center, center !important;
  background-repeat: no-repeat, no-repeat !important;
}
.bay-empty {
  background-image:
    url("assets/ui-slot-circuit.svg"),
    linear-gradient(180deg, rgba(9, 30, 40, 0.72), rgba(3, 10, 14, 0.86)) !important;
  background-size: 180px auto, cover !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
}
.end-day-btn {
  background-image:
    url("assets/ui-endday-hazard.svg"),
    linear-gradient(145deg, rgba(7, 34, 46, 0.98), rgba(3, 12, 17, 0.99)) !important;
  background-size: 250px auto, cover !important;
  background-position: right -18px center, center !important;
  background-repeat: no-repeat, no-repeat !important;
}
.log-panel {
  background-image:
    url("assets/ui-log-terminal.svg"),
    linear-gradient(180deg, rgba(6, 25, 34, 0.97), rgba(2, 10, 14, 0.99)) !important;
  background-size: 240px auto, cover !important;
  background-position: right -10px top -10px, center !important;
  background-repeat: no-repeat, no-repeat !important;
}
.audio-panel {
  background-image:
    url("assets/ui-panel-blueprint.svg"),
    linear-gradient(180deg, rgba(8, 29, 39, 0.99), rgba(3, 13, 18, 0.99)) !important;
  background-size: 360px auto, cover !important;
  background-position: center, center !important;
  background-repeat: repeat, no-repeat !important;
}

/* v3.1.0 鈥?start/end/help also get illustrated surfaces */
.briefing,
.help-card {
  background-image:
    url("assets/ui-panel-blueprint.svg"),
    linear-gradient(180deg, rgba(8, 29, 39, 0.98), rgba(3, 13, 18, 0.99)) !important;
  background-size: 380px auto, cover !important;
  background-position: center, center !important;
  background-repeat: repeat, no-repeat !important;
}
.end-card {
  background-image:
    url("assets/ui-endday-hazard.svg"),
    url("assets/ui-panel-blueprint.svg"),
    linear-gradient(180deg, rgba(7, 27, 37, 0.99), rgba(2, 10, 14, 0.99)) !important;
  background-size: 300px auto, 420px auto, cover !important;
  background-position: right -40px top -20px, center, center !important;
  background-repeat: no-repeat, repeat, no-repeat !important;
}
.start-btn {
  background-image:
    url("assets/ui-endday-hazard.svg"),
    linear-gradient(145deg, rgba(7, 34, 46, 0.98), rgba(3, 12, 17, 0.99)) !important;
  background-size: 210px auto, cover !important;
  background-position: right -24px center, center !important;
  background-repeat: no-repeat, no-repeat !important;
}
.fault-list.is-many .fault-card {
  flex-basis: 137px !important;
  min-height: 137px !important;
  max-height: 137px !important;
}
.fault-list.is-many .fault-lore__text {
  font-size: 15px !important;
  max-height: 66px !important;
}

/* v3.1.1 鈥?raise the module art density without washing out text */
.resource-card[data-resource="power"],
.resource-card[data-resource="food"],
.resource-card[data-resource="defense"],
.resource-card[data-resource="stability"] {
  background-size: 92px auto, 92px auto, cover !important;
  background-position: right -8px bottom -18px, right -8px bottom -18px, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-blend-mode: screen, screen, normal !important;
}
.resource-card[data-resource="power"] {
  background-image: url("assets/ui-res-power.svg"), url("assets/ui-res-power.svg"), linear-gradient(145deg, rgba(8, 34, 46, 0.96), rgba(4, 16, 22, 0.98)) !important;
}
.resource-card[data-resource="food"] {
  background-image: url("assets/ui-res-food.svg"), url("assets/ui-res-food.svg"), linear-gradient(145deg, rgba(8, 34, 46, 0.96), rgba(4, 16, 22, 0.98)) !important;
}
.resource-card[data-resource="defense"] {
  background-image: url("assets/ui-res-defense.svg"), url("assets/ui-res-defense.svg"), linear-gradient(145deg, rgba(8, 34, 46, 0.96), rgba(4, 16, 22, 0.98)) !important;
}
.resource-card[data-resource="stability"] {
  background-image: url("assets/ui-res-stability.svg"), url("assets/ui-res-stability.svg"), linear-gradient(145deg, rgba(8, 34, 46, 0.96), rgba(4, 16, 22, 0.98)) !important;
}
.patch-card,
.hand-card {
  background-image: url("assets/ui-card-circuit.svg"), url("assets/ui-card-circuit.svg"), linear-gradient(160deg, rgba(7, 32, 42, 0.98), rgba(3, 13, 18, 0.99)) !important;
  background-size: 160px auto, 160px auto, cover !important;
  background-position: right -30px bottom -24px, right -30px bottom -24px, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-blend-mode: screen, screen, normal !important;
}
.maint-btn {
  background-image: url("assets/ui-maint-blueprint.svg"), url("assets/ui-maint-blueprint.svg"), linear-gradient(165deg, rgba(7, 35, 46, 0.97), rgba(3, 14, 20, 0.99)) !important;
  background-size: 118px auto, 118px auto, cover !important;
  background-position: right -18px center, right -18px center, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}
.end-day-btn {
  background-image: url("assets/ui-endday-hazard.svg"), url("assets/ui-endday-hazard.svg"), linear-gradient(145deg, rgba(7, 34, 46, 0.98), rgba(3, 12, 17, 0.99)) !important;
  background-size: 250px auto, 250px auto, cover !important;
  background-position: right -18px center, right -18px center, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-blend-mode: screen, screen, normal !important;
}
.maint-btn {
  background-blend-mode: screen, screen, normal !important;
}

/* v3.1.2 鈥?semantic module art: every module gets its own metaphor, not a shared texture */
.start-btn {
  color: #eafff7 !important;
  background:
    linear-gradient(90deg, rgba(143, 255, 224, 0.085) 0 2px, transparent 2px 12px),
    linear-gradient(160deg, #0b3d37, #041715 65%) !important;
  border-color: rgba(143, 255, 224, 0.72) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
  box-shadow:
    inset 0 0 0 1px rgba(143, 255, 224, 0.18),
    0 0 26px rgba(106, 232, 255, 0.12) !important;
}
.start-btn:hover {
  color: #ffffff !important;
  background:
    linear-gradient(90deg, rgba(143, 255, 224, 0.12) 0 2px, transparent 2px 12px),
    linear-gradient(160deg, #105a4d, #06231f 65%) !important;
}
.start-btn .start-btn__led { background: #8fffe0 !important; box-shadow: 0 0 10px #8fffe0 !important; }

.maint-btn[data-maintenance] {
  background-size: 104px auto, 104px auto, cover !important;
  background-position: right -6px center, right -6px center, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}
.maint-btn[data-maintenance="power"] {
  background-image: url("assets/ui-maint-power.svg"), url("assets/ui-maint-power.svg"), linear-gradient(165deg, rgba(7, 35, 46, 0.97), rgba(3, 14, 20, 0.99)) !important;
}
.maint-btn[data-maintenance="food"] {
  background-image: url("assets/ui-maint-food.svg"), url("assets/ui-maint-food.svg"), linear-gradient(165deg, rgba(7, 35, 46, 0.97), rgba(3, 14, 20, 0.99)) !important;
}
.maint-btn[data-maintenance="defense"] {
  background-image: url("assets/ui-maint-defense.svg"), url("assets/ui-maint-defense.svg"), linear-gradient(165deg, rgba(7, 35, 46, 0.97), rgba(3, 14, 20, 0.99)) !important;
}
.maint-btn[data-maintenance="stability"] {
  background-image: url("assets/ui-maint-stability.svg"), url("assets/ui-maint-stability.svg"), linear-gradient(165deg, rgba(7, 35, 46, 0.97), rgba(3, 14, 20, 0.99)) !important;
}

.patch-card[data-tag],
.bay-patch[data-tag] {
  background-size: 150px auto, 150px auto, cover !important;
  background-position: right -24px bottom -18px, right -24px bottom -18px, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-blend-mode: screen, screen, normal !important;
}
.patch-card[data-tag="PWR"], .bay-patch[data-tag="PWR"] {
  background-image: url("assets/ui-card-pwr.svg"), url("assets/ui-card-pwr.svg"), linear-gradient(160deg, rgba(7, 32, 42, 0.98), rgba(3, 13, 18, 0.99)) !important;
}
.patch-card[data-tag="FOOD"], .bay-patch[data-tag="FOOD"] {
  background-image: url("assets/ui-card-food.svg"), url("assets/ui-card-food.svg"), linear-gradient(160deg, rgba(7, 32, 42, 0.98), rgba(3, 13, 18, 0.99)) !important;
}
.patch-card[data-tag="DEF"], .bay-patch[data-tag="DEF"] {
  background-image: url("assets/ui-card-def.svg"), url("assets/ui-card-def.svg"), linear-gradient(160deg, rgba(7, 32, 42, 0.98), rgba(3, 13, 18, 0.99)) !important;
}
.patch-card[data-tag="CORE"], .bay-patch[data-tag="CORE"] {
  background-image: url("assets/ui-card-core.svg"), url("assets/ui-card-core.svg"), linear-gradient(160deg, rgba(7, 32, 42, 0.98), rgba(3, 13, 18, 0.99)) !important;
}
.patch-card[data-tag="RAT"], .bay-patch[data-tag="RAT"] {
  background-image: url("assets/ui-card-rat.svg"), url("assets/ui-card-rat.svg"), linear-gradient(160deg, rgba(7, 32, 42, 0.98), rgba(3, 13, 18, 0.99)) !important;
}
.patch-card[data-tag="SYS"], .bay-patch[data-tag="SYS"] {
  background-image: url("assets/ui-card-sys.svg"), url("assets/ui-card-sys.svg"), linear-gradient(160deg, rgba(7, 32, 42, 0.98), rgba(3, 13, 18, 0.99)) !important;
}

.fault-lore {
  background-size: 118px auto, cover !important;
  background-position: right -14px bottom -14px, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-blend-mode: screen, normal !important;
}
.fault-lore[data-tone="power"] {
  background-image: url("assets/ui-lore-power.svg"), linear-gradient(180deg, rgba(4, 26, 34, 0.98), rgba(2, 12, 17, 0.99)) !important;
}
.fault-lore[data-tone="food"] {
  background-image: url("assets/ui-lore-food.svg"), linear-gradient(180deg, rgba(4, 26, 34, 0.98), rgba(2, 12, 17, 0.99)) !important;
}
.fault-lore[data-tone="defense"] {
  background-image: url("assets/ui-lore-defense.svg"), linear-gradient(180deg, rgba(4, 26, 34, 0.98), rgba(2, 12, 17, 0.99)) !important;
}
.fault-lore[data-tone="core"] {
  background-image: url("assets/ui-lore-core.svg"), linear-gradient(180deg, rgba(4, 26, 34, 0.98), rgba(2, 12, 17, 0.99)) !important;
}

.patch-bay {
  background-image: url("assets/ui-patch-bay.svg"), linear-gradient(180deg, rgba(6, 25, 33, 0.98), rgba(3, 12, 17, 0.99)) !important;
  background-size: 150px auto, cover !important;
  background-position: right -18px top -12px, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-blend-mode: screen, normal !important;
}

.log-panel {
  background-image: url("assets/ui-log-timeline.svg"), url("assets/ui-log-terminal.svg"), linear-gradient(180deg, rgba(5, 23, 30, 0.99), rgba(2, 10, 14, 0.99)) !important;
  background-size: 190px auto, 300px auto, cover !important;
  background-position: right -20px bottom -22px, left -30px bottom -20px, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-blend-mode: screen, screen, normal !important;
}

.night-card {
  background-image: url("assets/ui-night-pressure.svg"), radial-gradient(ellipse at 50% 20%, rgba(106, 232, 255, 0.08), transparent 55%), linear-gradient(180deg, rgba(5, 22, 30, 0.99), rgba(2, 9, 13, 0.99)) !important;
  background-size: 280px auto, cover, cover !important;
  background-position: center -40px, center, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-blend-mode: screen, screen, normal !important;
}

/* Overlay modules: each keeps one semantic texture, low enough for body copy. */
.event-card {
  background-image: url("assets/ui-panel-blueprint.svg"), url("assets/ui-topbar-hud.svg"), linear-gradient(175deg, rgba(6, 28, 37, 0.99), rgba(2, 10, 14, 0.99)) !important;
  background-size: 320px auto, 560px auto, cover !important;
  background-position: right -30px bottom -24px, left -30px top -20px, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-blend-mode: screen, screen, normal !important;
}
.reward-card {
  background-image: url("assets/ui-card-circuit.svg"), url("assets/ui-slot-circuit.svg"), linear-gradient(175deg, rgba(6, 28, 37, 0.99), rgba(2, 10, 14, 0.99)) !important;
  background-size: 220px auto, 260px auto, cover !important;
  background-position: right -20px bottom -18px, left -20px top -16px, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-blend-mode: screen, screen, normal !important;
}
.pact-card {
  background-image: url("assets/ui-lore-core.svg"), linear-gradient(175deg, rgba(6, 28, 37, 0.99), rgba(2, 10, 14, 0.99)) !important;
  background-size: 220px auto, cover !important;
  background-position: right -24px bottom -22px, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-blend-mode: screen, normal !important;
}
.challenge-card {
  background-image: url("assets/ui-lore-power.svg"), url("assets/ui-endday-hazard.svg"), linear-gradient(175deg, rgba(6, 28, 37, 0.99), rgba(2, 10, 14, 0.99)) !important;
  background-size: 220px auto, 300px auto, cover !important;
  background-position: right -24px bottom -22px, left -30px top -20px, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-blend-mode: screen, screen, normal !important;
}
.help-card, .audio-panel {
  background-image: url("assets/ui-panel-blueprint.svg"), url("assets/ui-topbar-hud.svg"), linear-gradient(175deg, rgba(6, 28, 37, 0.99), rgba(2, 10, 14, 0.99)) !important;
  background-size: 340px auto, 620px auto, cover !important;
  background-position: right -24px bottom -20px, left -20px top -16px, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-blend-mode: screen, screen, normal !important;
}
.end-card {
  background-image: url("assets/ui-log-terminal.svg"), linear-gradient(180deg, rgba(5, 23, 30, 0.99), rgba(2, 10, 14, 0.99)) !important;
  background-size: 360px auto, cover !important;
  background-position: right -40px bottom -30px, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-blend-mode: screen, normal !important;
}

/* v3.1.3 鈥?keep module art out of text hit-zones */
.maint-btn[data-maintenance] {
  position: relative;
  background-size: 84px auto, 84px auto, cover !important;
  background-position: right -22px bottom -34px, right -22px bottom -34px, center !important;
}
.maint-btn[data-maintenance]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(3, 14, 20, 0.92) 0 26px, transparent 54px);
  pointer-events: none;
}
.maint-btn[data-maintenance] > * {
  position: relative;
  z-index: 1;
}
.patch-card::after,
.bay-patch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 42%, rgba(3, 13, 18, 0.9) 88%);
  pointer-events: none;
  z-index: 0;
}
.patch-card > *,
.bay-patch > * {
  position: relative;
  z-index: 1;
}
.patch-card,
.bay-patch {
  overflow: hidden;
}

.log-panel {
  position: relative;
  overflow: hidden;
}
.log-ambient {
  display: none;
  position: relative;
  padding: 9px 14px;
  border-left: 1px solid rgba(106, 232, 255, 0.16);
  background:
    radial-gradient(ellipse at 80% 80%, rgba(106, 232, 255, 0.06), transparent 58%),
    repeating-linear-gradient(180deg, transparent 0 21px, rgba(106, 232, 255, 0.03) 21px 22px);
  overflow: hidden;
}
.log-ambient__label {
  display: block;
  color: rgba(232, 244, 236, 0.42);
  font-family: var(--font-mono);
  font-size: 6.8px;
  letter-spacing: 0.14em;
}
.log-ambient p {
  margin: 5px 0 0;
  max-width: 220px;
  color: rgba(232, 244, 236, 0.55);
  font-size: 7.6px;
  line-height: 1.5;
  letter-spacing: 0.03em;
}
.log-ambient__voice {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 20px;
  margin-top: 6px;
  color: rgba(106, 232, 255, 0.6);
}
.log-ambient__voice i {
  width: 2px;
  height: 8px;
  background: currentColor;
  animation: ambientVoice 2.6s ease-in-out infinite alternate;
}
.log-ambient__voice i:nth-child(2n) { animation-delay: -0.8s; height: 18px; }
.log-ambient__voice i:nth-child(3n) { animation-delay: -1.5s; height: 24px; }
.log-ambient__voice i:nth-child(5n) { animation-delay: -2.1s; height: 13px; }
.log-ambient__serial {
  display: block;
  margin-top: 5px;
  color: rgba(232, 244, 236, 0.28);
  font-family: var(--font-mono);
  font-size: 6.2px;
  letter-spacing: 0.12em;
}
@media (min-width: 1001px) {
  .log-panel { grid-template-columns: 143px minmax(0, 1fr) 258px; }
  .log-ambient { display: flex; flex-direction: column; justify-content: center; }
}

.fault-lore {
  position: relative;
  overflow: hidden;
}
.fault-lore__watermark,
.fault-lore__trace { display: none; }
.fault-lore > .micro-label,
.fault-lore__text,
.fault-lore__stamp { position: relative; z-index: 1; }
.fault-card:only-of-type .fault-lore__watermark {
  display: block;
  position: absolute;
  right: 4px;
  bottom: -20px;
  z-index: 0;
  color: currentColor;
  font-family: var(--font-mono);
  font-size: 118px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.1em;
  opacity: 0.075;
  pointer-events: none;
  animation: loreWatermark 7s ease-in-out infinite alternate;
}
.fault-card:only-of-type .fault-lore__trace {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  position: absolute;
  right: 10px;
  top: 38px;
  z-index: 0;
  width: 42px;
  height: 48px;
  color: var(--tone, var(--sci-cyan));
  opacity: 0.34;
  pointer-events: none;
}
.fault-lore__trace i {
  width: 2px;
  height: 8px;
  background: currentColor;
  animation: loreTrace 2.8s ease-in-out infinite alternate;
}
.fault-lore__trace i:nth-child(2n) { height: 22px; animation-delay: -0.7s; }
.fault-lore__trace i:nth-child(3n) { height: 34px; animation-delay: -1.4s; }
.fault-lore__trace i:nth-child(5n) { height: 15px; animation-delay: -2.2s; }
.fault-card:not(:only-of-type) .fault-lore__watermark,
.fault-card:not(:only-of-type) .fault-lore__trace { display: none; }

@keyframes ambientVoice {
  from { transform: scaleY(0.45); opacity: 0.35; }
  to { transform: scaleY(1.15); opacity: 0.8; }
}
@keyframes loreWatermark {
  from { transform: translateY(4px) scale(0.98); opacity: 0.055; }
  to { transform: translateY(-2px) scale(1.02); opacity: 0.095; }
}
@keyframes loreTrace {
  from { transform: scaleY(0.55); opacity: 0.2; }
  to { transform: scaleY(1.15); opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .log-ambient__voice i,
  .fault-lore__watermark,
  .fault-lore__trace i { animation: none; }
}
.fault-list.is-many { gap: 4px !important; }
.fault-list.is-many .fault-card {
  flex: 0 0 134px !important;
  min-height: 134px !important;
  max-height: 134px !important;
}
.patch-card__art {
  position: absolute !important;
  right: -18px;
  bottom: -16px;
  width: 174px;
  height: 122px;
  z-index: 0 !important;
  color: #86dfe9;
  opacity: 0.34;
  transform: rotate(var(--hand-tilt, 0deg));
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(90, 220, 240, 0.12));
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.patch-card[data-tag="PWR"] .patch-card__art { color: #ffd166; }
.patch-card[data-tag="FOOD"] .patch-card__art { color: #9be36e; }
.patch-card[data-tag="DEF"] .patch-card__art { color: #7fc8ff; }
.patch-card[data-tag="CORE"] .patch-card__art { color: #d7a4ff; }
.patch-card[data-tag="FAULT"] .patch-card__art,
.patch-card.is-fault .patch-card__art { color: #ff6b5f; }
.patch-card:hover .patch-card__art { opacity: 0.58; transform: rotate(var(--hand-tilt, 0deg)) translateY(-3px); }
.hand-art { width: 100%; height: 100%; overflow: visible; }
.hand-art__machine rect,
.hand-art__machine path,
.hand-art__machine circle,
.hand-art__machine ellipse,
.hand-art__frame path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
}
.hand-art__machine .hand-art__bolt { fill: currentColor; fill-opacity: 0.16; }
.hand-art__frame text {
  fill: currentColor;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 1px;
  opacity: 0.7;
}
.hand-art__scan {
  animation: handArtScan 4.8s linear infinite;
}
@keyframes handArtScan {
  0% { opacity: 0; transform: translateX(-28%); }
  18% { opacity: 0.18; }
  50% { opacity: 0.06; }
  100% { opacity: 0; transform: translateX(28%); }
}
@media (max-width: 760px) {
  .patch-card__art { width: 182px; height: 126px; opacity: 0.4; right: -20px; bottom: -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hand-art__scan { animation: none; opacity: 0; }
  .patch-card__art { transition: none; }
}
.patch-card { opacity: 1; }
.patch-card.is-locked { opacity: 0.8; }
.patch-card__art {
  width: 158px;
  height: 112px;
  right: -14px;
  bottom: -14px;
  opacity: 0.17;
}
.patch-card:hover .patch-card__art { opacity: 0.3; }
.patch-card::after {
  background:
    linear-gradient(0deg, rgba(3, 13, 18, 0.96) 0 54px, transparent 82px),
    linear-gradient(90deg, rgba(3, 13, 18, 0.92) 0 34%, transparent 78%);
}
.patch-card__title-row h4 {
  color: #f1fff8;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
}
.patch-card.is-locked .patch-card__title-row h4 {
  color: #dcefe6 !important;
}
.hand-art__machine rect,
.hand-art__machine circle,
.hand-art__machine ellipse {
  fill: currentColor;
  fill-opacity: 0.035;
}
.patch-card.is-locked { opacity: 0.88; }
.patch-card__title-row h4 {
  color: #f7fff9 !important;
  font-size: 12.5px;
  letter-spacing: 0.015em;
  text-shadow: 0 1px 2px #000, 0 0 10px rgba(3, 12, 16, 0.8);
}
.patch-card__effect .effect-chip {
  background: rgba(3, 14, 20, 0.82) !important;
  color: #e7f2e9 !important;
}
.patch-card__foot { color: #d7e8dc !important; }

/* v3.2.1 scene-first: retire the shared legacy waveform and let the per-fault stages read */
.fault-scene__legacy { display: none !important; }
.patch-card__watermark { display: none !important; }
.scene-v2__stage,
.scene-v2__holo,
.scene-v2__prop,
.scene-v2__center { opacity: 1 !important; }
.scene-v2__holo .core-ring,
.scene-v2__holo .core-axis,
.scene-v2__holo .core-hex { opacity: 0.9; }

/* v3.2.2 鈥?per-card sigils, residue columns, maintenance feedback */
.hand-art__sigil {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.65;
  opacity: 0.34;
  transform-box: fill-box;
  transform-origin: center;
  animation: handSigil 16s linear infinite;
  animation-delay: var(--art-delay, 0s);
}
.hand-art__sigil circle { fill: currentColor; opacity: 0.55; }
.hand-art__fault {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.9;
  transform-box: fill-box;
  transform-origin: center;
  animation: handFaultRune 9s linear infinite;
}
.hand-art__fault polygon { stroke-dasharray: 3 6; opacity: 0.72; }
.hand-art__glitch {
  stroke: currentColor;
  stroke-width: 2;
  opacity: 0.28;
  animation: handGlitch 2.8s steps(2, end) infinite;
}
.hand-art--fault { filter: drop-shadow(0 0 5px rgba(255, 107, 95, 0.48)); }
.patch-card.is-fault .hand-art__scan { background: linear-gradient(90deg, transparent, rgba(255, 107, 95, 0.7), transparent); }
.patch-card.is-fault:hover .hand-art { opacity: 0.72 !important; transform: rotate(var(--hand-tilt, 0deg)) translateY(-3px) scale(1.03) !important; }

.fault-lore__echo { display: none; }
.fault-card:only-of-type .fault-lore__echo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 9px 0 7px;
  min-height: 0;
}
.fault-lore__echo-kicker {
  color: rgba(232, 244, 236, 0.42);
  font: 6.5px/1.2 var(--font-mono);
  letter-spacing: 0.14em;
}
.fault-lore__echo-scope {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 46px;
  padding: 5px 7px;
  border: 1px solid rgba(106, 232, 255, 0.14);
  background:
    linear-gradient(180deg, transparent 48%, rgba(106, 232, 255, 0.06) 49% 51%, transparent 52%),
    rgba(3, 16, 21, 0.5);
  overflow: hidden;
}
.fault-lore__echo-scope i {
  flex: 1;
  min-width: 2px;
  height: 12px;
  background: linear-gradient(180deg, rgba(106, 232, 255, 0.7), rgba(106, 232, 255, 0.08));
  animation: loreScope 2.2s ease-in-out infinite alternate;
}
.fault-lore__echo-scope i:nth-child(3n) { height: 26px; animation-delay: -0.5s; }
.fault-lore__echo-scope i:nth-child(4n) { height: 34px; animation-delay: -1.1s; }
.fault-lore__echo-scope i:nth-child(5n) { height: 18px; animation-delay: -1.6s; }
.fault-lore__echo p {
  margin: 0;
  color: rgba(232, 244, 236, 0.6);
  font: 7.6px/1.55 var(--font-mono);
  letter-spacing: 0.03em;
}
@keyframes handSigil { to { transform: rotate(360deg); } }
@keyframes handFaultRune { to { transform: rotate(-360deg); } }
@keyframes handGlitch { 0%, 86%, 100% { opacity: 0.18; transform: translateX(0); } 88% { opacity: 0.7; transform: translateX(2px); } 90% { opacity: 0.3; transform: translateX(-1px); } 92% { opacity: 0.8; transform: translateX(3px); } }
@keyframes loreScope { from { transform: scaleY(0.55); transform-origin: bottom; opacity: 0.55; } to { transform: scaleY(1); transform-origin: bottom; opacity: 1; } }

.log-echo { display: none; position: relative; overflow: hidden; padding: 10px 14px; border-left: 1px solid rgba(106, 232, 255, 0.14); }
.log-echo__label,
.log-echo__serial { color: rgba(232, 244, 236, 0.36); font: 6.5px/1.2 var(--font-mono); letter-spacing: 0.14em; }
.log-echo__scope { position: relative; height: 72px; margin: 8px 0; border: 1px solid rgba(106, 232, 255, 0.14); background: radial-gradient(circle at 50% 55%, rgba(106, 232, 255, 0.1), transparent 54%), repeating-linear-gradient(0deg, transparent 0 11px, rgba(106, 232, 255, 0.05) 12px), rgba(2, 12, 16, 0.7); }
.log-echo__scope i { position: absolute; bottom: 0; width: 3px; background: rgba(106, 232, 255, 0.55); animation: echoBars 2.8s ease-in-out infinite alternate; }
.log-echo__scope i:nth-child(1) { left: 6%; height: 22%; animation-delay: -0.2s; }
.log-echo__scope i:nth-child(2) { left: 13%; height: 52%; animation-delay: -1.1s; }
.log-echo__scope i:nth-child(3) { left: 20%; height: 34%; animation-delay: -0.7s; }
.log-echo__scope i:nth-child(4) { left: 27%; height: 68%; animation-delay: -1.8s; }
.log-echo__scope i:nth-child(5) { left: 34%; height: 41%; animation-delay: -0.4s; }
.log-echo__scope i:nth-child(6) { left: 41%; height: 78%; animation-delay: -1.4s; }
.log-echo__scope i:nth-child(7) { left: 48%; height: 30%; animation-delay: -0.9s; }
.log-echo__scope i:nth-child(8) { left: 55%; height: 62%; animation-delay: -1.9s; }
.log-echo__scope i:nth-child(9) { left: 62%; height: 46%; animation-delay: -0.3s; }
.log-echo__scope i:nth-child(10) { left: 69%; height: 84%; animation-delay: -1.5s; }
.log-echo__scope i:nth-child(11) { left: 76%; height: 38%; animation-delay: -0.8s; }
.log-echo__scope i:nth-child(12) { left: 83%; height: 58%; animation-delay: -1.2s; }
.log-echo__blip { position: absolute; left: 58%; top: 32%; width: 5px; height: 5px; border-radius: 50%; background: #aef4ff; box-shadow: 0 0 8px #6ae8ff; animation: echoBlip 4.2s linear infinite; }
.log-echo__rows { display: grid; gap: 4px; color: rgba(232, 244, 236, 0.4); font: 6.8px/1.3 var(--font-mono); letter-spacing: 0.05em; }
.log-echo__rows b { float: right; color: rgba(174, 244, 255, 0.75); font-weight: 500; }
.log-echo__serial { display: block; margin-top: 8px; }
@keyframes echoBars { from { transform: scaleY(0.6); opacity: 0.45; } to { transform: scaleY(1); opacity: 0.95; } }
@keyframes echoBlip { 0%, 100% { left: 58%; top: 32%; opacity: 0.3; } 45% { left: 22%; top: 64%; opacity: 1; } 70% { left: 76%; top: 48%; opacity: 0.7; } }
@media (min-width: 1200px) {
  .log-panel { grid-template-columns: 143px minmax(0, 1fr) 270px 258px !important; }
  .log-echo { display: flex; flex-direction: column; justify-content: center; }
}

.maint-btn { position: relative; overflow: hidden; }
.maint-btn::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--maint-color, #6ae8ff) 20%, transparent), transparent 58%); transition: opacity 0.22s ease; }
.maint-btn:hover::after { opacity: 1; animation: maintPulse 1.8s ease-in-out infinite; }
.maint-btn:hover .maint-btn__led { box-shadow: 0 0 9px var(--maint-color), 0 0 18px var(--maint-color); animation: maintLed 1.1s steps(2, end) infinite; }
.maint-btn:hover > svg { filter: drop-shadow(0 0 5px var(--maint-color)); transform: scale(1.12) rotate(-3deg); transition: transform 0.2s ease, filter 0.2s ease; }
.maint-btn:hover .maint-btn__meter i { animation: maintMeter 1.2s ease-in-out infinite; }
.maint-btn[data-maintenance="power"]:hover > svg { animation: maintPower 0.55s steps(2, end) infinite; }
.maint-btn[data-maintenance="ration"]:hover > svg { animation: maintRation 1.6s ease-in-out infinite; }
.maint-btn[data-maintenance="structure"]:hover > svg { animation: maintStructure 0.9s cubic-bezier(0.3, 0.8, 0.4, 1) infinite alternate; }
.maint-btn[data-maintenance="core"]:hover > svg { animation: maintCore 2.4s linear infinite; }
@keyframes maintPulse { 50% { opacity: 0.55; } }
@keyframes maintLed { 50% { opacity: 0.4; } }
@keyframes maintMeter { 50% { filter: brightness(1.8); } }
@keyframes maintPower { 0%, 100% { opacity: 0.65; transform: scale(1.1); } 50% { opacity: 1; transform: scale(1.18); } }
@keyframes maintRation { 0%, 100% { transform: translateY(0) scale(1.1); } 50% { transform: translateY(2px) scale(1.06); } }
@keyframes maintStructure { from { transform: scale(1.08); filter: drop-shadow(0 0 2px var(--maint-color)); } to { transform: scale(1.2); filter: drop-shadow(0 0 7px var(--maint-color)); } }
@keyframes maintCore { to { transform: scale(1.12) rotate(360deg); } }

.hand-art__glyph { fill: currentColor; stroke: currentColor; opacity: 0.17; filter: drop-shadow(0 0 6px rgba(106, 232, 255, 0.28)); }
.hand-art__core polygon { fill: currentColor; fill-opacity: 0.09; stroke: currentColor; stroke-width: 0.8; opacity: 0.66; }
.hand-art__emblem { fill: none; stroke: currentColor; stroke-width: 1.15; opacity: 0.34; transform-box: fill-box; transform-origin: center; animation: emblemBreath 11s ease-in-out infinite; animation-delay: var(--art-delay, 0s); }
.hand-art__emblem rect, .hand-art__emblem polygon { fill: currentColor; fill-opacity: 0.04; }
.hand-art__sigil { opacity: 0.5; }
@keyframes emblemBreath { 0%, 100% { transform: scale(0.96) rotate(0); opacity: 0.26; } 50% { transform: scale(1.04) rotate(4deg); opacity: 0.4; } }
.hand-art__sigil circle { opacity: 0.8; }
.patch-card.is-fault .hand-art__glyph { opacity: 0.28; filter: drop-shadow(0 0 7px rgba(255, 107, 95, 0.55)); }

/* v3.3: unique scene backgrounds + resource-matched highlights */
.event-card, .reward-card, .challenge-card, .end-card, .pact-card {
  background-image: var(--scene-art), linear-gradient(180deg, rgba(3, 12, 16, 0.58), rgba(2, 7, 10, 0.92)) !important;
  background-size: cover, cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.event-choice, .reward-option {
  background-image: var(--choice-art, none), linear-gradient(180deg, rgba(3, 15, 19, 0.62), rgba(3, 10, 14, 0.9)) !important;
  background-size: cover, cover !important;
  background-position: center !important;
  background-blend-mode: soft-light, normal;
}
.event-choice::after, .reward-option::after { opacity: 0.28 !important; }

.resource-card .resource-value {
  color: var(--accent) !important;
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent);
}
.resource-card .resource-value small { color: color-mix(in srgb, var(--accent) 65%, #d5e5dd) !important; }
.resource-card .resource-meta span:last-child { color: color-mix(in srgb, var(--accent) 78%, #dff2e8) !important; }

.maint-btn__amount {
  font: 800 13px/1 "JetBrains Mono", Consolas, monospace;
  color: var(--maint-color) !important;
  text-shadow: 0 0 12px color-mix(in srgb, var(--maint-color) 60%, transparent);
  letter-spacing: 0.04em;
}

.effect-chip { --rc: #9fb7b0; color: #d8e9e2; border-color: color-mix(in srgb, var(--rc) 35%, transparent) !important; background: color-mix(in srgb, var(--rc) 12%, rgba(4, 16, 20, 0.72)) !important; box-shadow: inset 2px 0 0 var(--rc); }
.effect-chip[data-resource="power"] { --rc: #6fd8ff; }
.effect-chip[data-resource="food"] { --rc: #8fe27a; }
.effect-chip[data-resource="defense"] { --rc: #ffc76a; }
.effect-chip[data-resource="stability"] { --rc: #c69bff; }
.effect-chip[data-resource="ap"] { --rc: #ffd27a; }
.effect-chip[data-resource="draw"] { --rc: #7df2c2; }
.effect-chip[data-resource="shield"] { --rc: #74d7c5; }
.effect-chip[data-resource="system"] { --rc: #9fb7b0; }
.effect-chip.is-negative { color: #ffe1d8; box-shadow: inset 2px 0 0 var(--rc), inset 0 0 0 1px rgba(255, 107, 95, 0.2); }
.effect-chip.is-positive { color: #ecfff7; }

/* v3.3.1 鈥?scrim above scene art, resource-colored chips, end-card content above FX */
.event-card, .reward-card, .challenge-card, .end-card, .pact-card {
  background-image: linear-gradient(180deg, rgba(3, 12, 16, 0.86), rgba(2, 7, 10, 0.965)), var(--scene-art) !important;
}
.challenge-card {
  background-image: linear-gradient(180deg, rgba(2, 10, 14, 0.94), rgba(2, 8, 12, 0.98)) !important;
  position: relative;
  isolation: isolate;
}
.challenge-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--scene-art) right center / 54% auto no-repeat;
  opacity: 0.3;
  filter: saturate(0.78);
  -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 58%);
  mask-image: linear-gradient(90deg, transparent 22%, #000 58%);
}
.challenge-card > * { position: relative; z-index: 1; }
.end-card .end-stat span { font-size: 9px !important; letter-spacing: 0.09em !important; color: #fff3cf !important; text-shadow: 0 1px 1px #000 !important; }
.event-choice, .reward-option {
  background-image: linear-gradient(180deg, rgba(3, 15, 19, 0.91), rgba(3, 10, 14, 0.97)), var(--choice-art, none) !important;
}
.end-card { isolation: isolate; }
.end-card > :not(.end-rank-rings):not(.end-card__hazard):not(.end-card__stamp) { position: relative; z-index: 2; }
.end-card::before, .end-card::after { z-index: 0 !important; }
.end-card .end-stat span,
.end-card .micro-label,
.end-summary__log-head,
.end-summary__facts span {
  color: #f3e2b4 !important;
  text-shadow: 0 1px 2px #000, 0 0 8px rgba(0, 0, 0, 0.55);
}
.patch-card .effect-chip[data-resource],
.event-choice .effect-chip[data-resource],
.reward-option .effect-chip[data-resource] {
  --rc: #9fb7b0;
  color: var(--rc) !important;
  background: color-mix(in srgb, var(--rc) 16%, rgba(4, 16, 20, 0.9)) !important;
  border-color: color-mix(in srgb, var(--rc) 58%, transparent) !important;
  box-shadow: inset 2px 0 0 var(--rc), inset 0 0 0 1px color-mix(in srgb, var(--rc) 22%, transparent) !important;
}
.patch-card .effect-chip[data-resource="power"],
.event-choice .effect-chip[data-resource="power"],
.reward-option .effect-chip[data-resource="power"] { --rc: #ffc266; }
.patch-card .effect-chip[data-resource="food"],
.event-choice .effect-chip[data-resource="food"],
.reward-option .effect-chip[data-resource="food"] { --rc: #a9e680; }
.patch-card .effect-chip[data-resource="defense"],
.event-choice .effect-chip[data-resource="defense"],
.reward-option .effect-chip[data-resource="defense"] { --rc: #78dce8; }
.patch-card .effect-chip[data-resource="stability"],
.event-choice .effect-chip[data-resource="stability"],
.reward-option .effect-chip[data-resource="stability"] { --rc: #c7a3ff; }
.patch-card .effect-chip[data-resource="ap"],
.event-choice .effect-chip[data-resource="ap"],
.reward-option .effect-chip[data-resource="ap"] { --rc: #ffd27a; }
.patch-card .effect-chip[data-resource="draw"],
.event-choice .effect-chip[data-resource="draw"],
.reward-option .effect-chip[data-resource="draw"] { --rc: #7df2c2; }
.patch-card .effect-chip[data-resource="shield"],
.event-choice .effect-chip[data-resource="shield"],
.reward-option .effect-chip[data-resource="shield"] { --rc: #74d7c5; }


/* v3.3.2 鈥?tooltip resource chips, original +N color, readable echo note, visible maintenance hover */
.tooltip-chips span[data-resource] {
  --rc: #9fb7b0;
  color: var(--rc) !important;
  background: color-mix(in srgb, var(--rc) 16%, rgba(4, 16, 20, 0.92)) !important;
  border-color: color-mix(in srgb, var(--rc) 58%, transparent) !important;
  box-shadow: inset 2px 0 0 var(--rc), inset 0 0 0 1px color-mix(in srgb, var(--rc) 22%, transparent) !important;
}
.tooltip-chips span[data-resource="power"] { --rc: #ffc266; }
.tooltip-chips span[data-resource="food"] { --rc: #a9e680; }
.tooltip-chips span[data-resource="defense"] { --rc: #78dce8; }
.tooltip-chips span[data-resource="stability"] { --rc: #c7a3ff; }
.tooltip-chips span[data-resource="ap"] { --rc: #ffd27a; }
.tooltip-chips span[data-resource="draw"] { --rc: #7df2c2; }
.tooltip-chips span[data-resource="shield"] { --rc: #74d7c5; }
.tooltip-chips span.is-negative { color: #ffe1d8 !important; border-color: rgba(255,107,95,.42) !important; }
.tooltip-chips span.is-positive { color: var(--rc) !important; }

.maint-btn__amount { display: none !important; }
.maint-btn__delta {
  color: var(--maint-color) !important;
  font-weight: 800;
  text-shadow: 0 0 8px color-mix(in srgb, var(--maint-color) 55%, transparent);
}
.maint-btn:hover:not(:disabled) {
  transform: translateX(2px);
  border-color: color-mix(in srgb, var(--maint-color) 70%, #eafff7) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--maint-color) 38%, transparent), 0 0 24px color-mix(in srgb, var(--maint-color) 26%, transparent) !important;
}
.maint-btn:hover:not(:disabled) .maint-btn__copy strong,
.maint-btn:hover:not(:disabled) .maint-btn__desc { color: #f4fffb !important; }
.maint-btn:hover:not(:disabled) .ap-cost { color: #f4fffb !important; border-color: color-mix(in srgb, var(--maint-color) 60%, transparent) !important; }

.fault-lore__echo-kicker { font-size: 8px !important; letter-spacing: .12em !important; color: rgba(232,244,236,.58) !important; }
.fault-lore__echo p { font-size: 10.5px !important; line-height: 1.5 !important; color: rgba(236,248,242,.84) !important; }
.fault-card:only-of-type .fault-lore__echo-scope { height: 36px !important; }

/* v3.3.2b 鈥?negative tooltip chip keeps its resource color; larger lore echo */
.tooltip-chips span.is-negative {
  color: #ffe1d8 !important;
  background: color-mix(in srgb, var(--rc) 16%, rgba(4, 16, 20, 0.92)) !important;
  border-color: color-mix(in srgb, var(--rc) 58%, transparent) !important;
  box-shadow: inset 2px 0 0 var(--rc), inset 0 0 0 1px color-mix(in srgb, var(--rc) 22%, transparent) !important;
}
.fault-lore__echo p { font-size: 12px !important; line-height: 1.5 !important; color: rgba(240, 251, 246, .92) !important; }
.fault-lore__echo-kicker { font-size: 8.5px !important; color: rgba(240,251,246,.66) !important; }

/* v3.3.2c 鈥?per-card art overrides read as different machines */
.patch-card[data-card-id="ghost-mirror"] .hand-art { color: #8cf3d2 !important; }
.patch-card[data-card-id="overclock-weld"] .hand-art { color: #ffb347 !important; }
.patch-card[data-card-id="ration-override"] .hand-art { color: #c9f08a !important; }
.patch-card[data-card-id="ghost-mirror"] .hand-art__ghost,
.patch-card[data-card-id="overclock-weld"] .hand-art__weld,
.patch-card[data-card-id="ration-override"] .hand-art__override { opacity: .95; filter: drop-shadow(0 0 5px currentColor); }
.hand-art__ghost path,
.hand-art__weld path,
.hand-art__override path { stroke-width: 1.15; }

/* v3.4 鈥?distinct card plates, fault hover, visible maintenance, italic residue */
.fault-lore__echo p {
  font-style: italic !important;
  color: #e8c58f !important;
  border-left: 2px solid rgba(232, 197, 143, .48);
  padding-left: 8px;
  text-shadow: 0 1px 2px #000;
}
.fault-lore__echo-kicker { color: #c9a86f !important; }

@media (hover: hover) {
  .fault-card:not(.is-covered) {
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, filter .2s ease;
  }
  .fault-card:not(.is-covered):hover,
  .fault-card:not(.is-covered):focus-visible {
    transform: translateY(-4px) scale(1.004);
    border-color: #ffd27a !important;
    box-shadow: 0 0 0 2px rgba(255, 210, 122, .48), 0 18px 44px rgba(0, 0, 0, .55), 0 0 36px rgba(255, 210, 122, .2) !important;
    z-index: 4;
  }
  .fault-card:not(.is-covered):hover .fault-card__schematic,
  .fault-card:not(.is-covered):focus-visible .fault-card__schematic {
    filter: saturate(1.3) brightness(1.12) contrast(1.04);
  }
  .fault-card:not(.is-covered):hover .fault-card__sigil,
  .fault-card:not(.is-covered):focus-visible .fault-card__sigil {
    opacity: .18;
    transform: scale(1.08) rotate(-4deg);
  }
  .fault-card:not(.is-covered):hover .fault-schematic__scan,
  .fault-card:not(.is-covered):focus-visible .fault-schematic__scan {
    opacity: 1;
    animation-duration: .85s;
  }
}

/* every hand card gets its own seeded plate pattern */
.patch-card::before { transition: opacity .25s ease, filter .25s ease; }
.patch-card.plate-0::before {
  background:
    radial-gradient(circle at var(--plate-x) var(--plate-y), hsla(var(--plate-h), 82%, 64%, .24), transparent 36%),
    repeating-linear-gradient(0deg, transparent 0 15px, hsla(var(--plate-h), 76%, 64%, .10) 15px 16px),
    linear-gradient(var(--plate-angle), transparent 0 55%, hsla(var(--plate-h), 80%, 60%, .09) 55% 56%, transparent 56%);
}
.patch-card.plate-1::before {
  background:
    linear-gradient(135deg, transparent 0 40%, hsla(var(--plate-h), 80%, 64%, .18) 41% 43%, transparent 44% 100%),
    repeating-linear-gradient(135deg, transparent 0 18px, hsla(var(--plate-h), 75%, 62%, .09) 18px 19px);
}
.patch-card.plate-2::before {
  background:
    repeating-radial-gradient(circle at var(--plate-x) var(--plate-y), transparent 0 13px, hsla(var(--plate-h), 78%, 64%, .16) 14px 15px, transparent 16px 29px),
    radial-gradient(circle at 88% 10%, hsla(var(--plate-h), 82%, 64%, .16), transparent 35%);
}
.patch-card.plate-3::before {
  background:
    repeating-linear-gradient(45deg, hsla(var(--plate-h), 80%, 64%, .13) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(-45deg, hsla(var(--plate-h), 80%, 64%, .09) 0 1px, transparent 1px 22px),
    radial-gradient(circle at 20% 12%, hsla(var(--plate-h), 80%, 64%, .18), transparent 34%);
}
.patch-card.plate-4::before {
  background:
    linear-gradient(90deg, transparent 0 49%, hsla(var(--plate-h), 80%, 64%, .12) 49% 51%, transparent 51%),
    linear-gradient(0deg, transparent 0 49%, hsla(var(--plate-h), 80%, 64%, .12) 49% 51%, transparent 51%),
    radial-gradient(circle at 75% 68%, hsla(var(--plate-h), 82%, 64%, .16), transparent 38%);
}
.patch-card.plate-5::before {
  background:
    conic-gradient(from var(--plate-angle) at var(--plate-x) var(--plate-y), transparent 0 58deg, hsla(var(--plate-h), 85%, 66%, .18) 58deg 62deg, transparent 62deg 120deg, hsla(var(--plate-h), 85%, 66%, .10) 120deg 124deg, transparent 124deg 360deg),
    radial-gradient(circle at var(--plate-x) var(--plate-y), hsla(var(--plate-h), 82%, 64%, .22), transparent 42%);
}
.patch-card.plate-6::before {
  background:
    repeating-linear-gradient(0deg, transparent 0 9px, hsla(var(--plate-h), 80%, 64%, .12) 9px 10px),
    linear-gradient(100deg, transparent 0 58%, hsla(var(--plate-h), 82%, 64%, .14) 58% 60%, transparent 60%);
}
.patch-card.plate-7::before {
  background:
    radial-gradient(circle at var(--plate-x) var(--plate-y), transparent 0 28%, hsla(var(--plate-h), 84%, 66%, .16) 29% 31%, transparent 32% 43%, hsla(var(--plate-h), 84%, 66%, .10) 44% 46%, transparent 47%),
    linear-gradient(160deg, hsla(var(--plate-h), 80%, 64%, .16), transparent 46%);
}

@media (hover: hover) {
  .patch-card.is-fault:hover,
  .patch-card.is-fault:focus-visible {
    transform: translateY(-6px) rotate(.35deg) !important;
    border-color: #ff5a52 !important;
    box-shadow: 0 0 0 2px rgba(255, 90, 82, .75), 0 0 34px rgba(255, 90, 82, .38), 0 22px 42px rgba(0, 0, 0, .5) !important;
  }
  .patch-card.is-fault:hover::before,
  .patch-card.is-fault:focus-visible::before {
    opacity: 1;
    background:
      repeating-linear-gradient(0deg, rgba(255, 90, 82, .16) 0 2px, transparent 2px 7px),
      radial-gradient(circle at 72% 26%, rgba(255, 90, 82, .32), transparent 38%),
      linear-gradient(155deg, rgba(120, 12, 12, .28), transparent 58%);
  }
  .patch-card.is-fault:hover::after,
  .patch-card.is-fault:focus-visible::after {
    background:
      repeating-linear-gradient(0deg, rgba(255, 90, 82, .22) 0 2px, transparent 2px 8px),
      linear-gradient(0deg, rgba(3, 13, 18, .9) 0 54px, transparent 82px),
      linear-gradient(90deg, rgba(3, 13, 18, .86) 0 30%, transparent 74%);
    animation: faultCardGlitch .42s steps(2) infinite;
  }
  .patch-card.is-fault:hover .hand-art,
  .patch-card.is-fault:focus-visible .hand-art {
    opacity: .62 !important;
    filter: saturate(1.5) contrast(1.1) drop-shadow(0 0 8px #ff5a52);
  }
  .patch-card.is-fault:hover .patch-card__fault-label {
    color: #ffe1d8 !important;
    text-shadow: 0 0 8px #ff5a52;
  }
}
@keyframes faultCardGlitch {
  0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(-1px, 1px); }
  60% { transform: translate(1px, -1px); }
}

@media (hover: hover) {
  .maint-btn:hover,
  .maint-btn:focus-visible {
    transform: translateY(-4px) scale(1.035) !important;
    border-color: color-mix(in srgb, var(--mb, #ffd27a) 80%, #fff 20%) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mb, #ffd27a) 55%, transparent), 0 0 34px color-mix(in srgb, var(--mb, #ffd27a) 28%, transparent), 0 18px 30px rgba(0,0,0,.45) !important;
  }
  .maint-btn:hover .maint-btn__icon,
  .maint-btn:focus-visible .maint-btn__icon {
    animation: maintHoverKick .62s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 9px var(--mb, #ffd27a));
  }
  .maint-btn:hover .maint-btn__meter i,
  .maint-btn:focus-visible .maint-btn__meter i {
    animation: maintMeterSurge .7s ease-in-out infinite alternate;
  }
}
@keyframes maintHoverKick {
  from { transform: scale(1.02) rotate(-1deg); }
  to { transform: scale(1.16) rotate(1.5deg); }
}
@keyframes maintMeterSurge {
  from { filter: brightness(1); }
  to { filter: brightness(1.9); }
}

.maint-burst {
  position: fixed;
  inset: 0;
  z-index: 96;
  pointer-events: none;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.maint-burst__flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--mb) 46%, transparent), transparent 58%);
  animation: maintBurstFlash .95s ease-out forwards;
}
.maint-burst__ring {
  position: absolute;
  width: 24vmin;
  height: 24vmin;
  border: 2px solid var(--mb);
  border-radius: 50%;
  box-shadow: 0 0 20px var(--mb), inset 0 0 20px color-mix(in srgb, var(--mb) 40%, transparent);
  animation: maintBurstRing .9s cubic-bezier(.16,1,.3,1) forwards;
}
.maint-burst__ring--2 { animation-delay: .08s; border-style: dashed; }
.maint-burst__scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--mb) 18%, transparent) 3px 4px);
  mix-blend-mode: screen;
  animation: maintBurstScan .9s linear forwards;
}
.maint-burst__copy {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 20px 30px;
  border: 1px solid color-mix(in srgb, var(--mb) 70%, transparent);
  background: rgba(2, 12, 16, .86);
  box-shadow: 0 0 40px color-mix(in srgb, var(--mb) 20%, transparent);
  animation: maintBurstCopy .95s ease-out forwards;
}
.maint-burst__kicker { display:block; font: 700 10px/1.4 var(--mono); letter-spacing:.24em; color: var(--mb); }
.maint-burst__copy strong { display:block; margin:6px 0 4px; font: 700 clamp(20px,3vw,34px)/1.2 var(--sans); color:#f4fff9; letter-spacing:.08em; text-shadow:0 0 18px var(--mb); }
.maint-burst__copy small { display:block; font: 600 11px/1.5 var(--mono); color:#d8e8df; letter-spacing:.06em; }
.maint-burst__icon { position:absolute; top:14%; left:50%; transform:translateX(-50%); width:54px; height:54px; color:var(--mb); opacity:.9; animation:maintBurstIcon .9s ease-out forwards; z-index:1; }
@keyframes maintBurstFlash { 0% { opacity:0; } 16% { opacity:1; } 100% { opacity:0; } }
@keyframes maintBurstRing { 0% { transform:scale(.3); opacity:1; } 100% { transform:scale(4.2); opacity:0; } }
@keyframes maintBurstScan { 0% { transform:translateY(-12%); opacity:1; } 100% { transform:translateY(12%); opacity:0; } }
@keyframes maintBurstCopy { 0% { transform:translateY(12px) scale(.96); opacity:0; } 18% { opacity:1; } 80% { opacity:1; } 100% { transform:translateY(-4px) scale(1); opacity:0; } }
@keyframes maintBurstIcon { 0% { transform:translateX(-50%) scale(.6); opacity:0; } 25% { opacity:1; } 100% { transform:translateX(-50%) translateY(-26px) scale(1.15); opacity:0; } }

/* v3.4b 鈥?maintenance color variables and real icon selector */
.maint-btn[data-maintenance="power"] { --mb: #ffc266; }
.maint-btn[data-maintenance="food"] { --mb: #a9e680; }
.maint-btn[data-maintenance="defense"] { --mb: #78dce8; }
.maint-btn[data-maintenance="stability"] { --mb: #c7a3ff; }
.maint-btn:hover > svg,
.maint-btn:focus-visible > svg { animation: maintHoverKick .62s ease-in-out infinite alternate; filter: drop-shadow(0 0 9px var(--mb)); }
.maint-burst__kicker { font-family: var(--font-mono, monospace); }
.maint-burst__copy strong { font-family: var(--font-sans, sans-serif); }
.maint-burst__copy small { font-family: var(--font-mono, monospace); }

/* v3.4 final interaction emphasis: hand/board fault cards and maintenance */
@media (hover: hover) {
  .patch-card:hover,
  .patch-card:focus-visible {
    transform: translateY(-6px) scale(1.012) !important;
    border-color: rgba(106, 232, 255, 0.78) !important;
    box-shadow: 0 0 0 2px rgba(106, 232, 255, 0.32), 0 20px 38px rgba(0, 0, 0, 0.52), 0 0 34px rgba(106, 232, 255, 0.18) !important;
    z-index: 6;
  }
  .patch-card.is-fault:hover,
  .patch-card.is-fault:focus-visible {
    transform: translateY(-8px) scale(1.035) rotate(0.3deg) !important;
    border-color: #ff6b5f !important;
    box-shadow: 0 0 0 2px rgba(255, 107, 95, 0.72), 0 24px 46px rgba(0, 0, 0, 0.58), 0 0 40px rgba(255, 107, 95, 0.34) !important;
  }
  .fault-card:hover:not(.is-covered),
  .fault-card:focus-visible:not(.is-covered) {
    transform: translateY(-6px) scale(1.012) !important;
    border-color: #ffd27a !important;
    box-shadow: 0 0 0 2px rgba(255, 210, 122, 0.48), 0 22px 44px rgba(0, 0, 0, 0.55), 0 0 38px rgba(255, 210, 122, 0.2) !important;
    z-index: 4;
  }
  .maint-btn:hover,
  .maint-btn:focus-visible {
    transform: translateY(-5px) scale(1.045) !important;
    outline: 1px solid color-mix(in srgb, var(--mb, #ffd27a) 60%, transparent);
    outline-offset: 3px;
  }
}

/* v3.5.1 — one lore text colour for 1 / 2 / 3 / 4+ faults */
.fault-lore__text,
.fault-card .fault-lore__text,
.fault-list .fault-lore__text,
.fault-list.is-count-2 .fault-lore__text,
.fault-list.is-count-3 .fault-lore__text,
.fault-list.is-count-4 .fault-lore__text,
.fault-list.is-many .fault-lore__text {
  color: #d7edf5 !important;
}
.fault-lore__label,
.fault-lore > .micro-label,
.fault-lore .micro-label,
.fault-list .fault-lore .micro-label,
.fault-list.is-count-2 .fault-lore__label,
.fault-list.is-count-3 .fault-lore__label,
.fault-list.is-count-4 .fault-lore__label {
  color: #c9a86f !important;
}
/* The echo is a per-fault continuation: readable italic, present at every
   fault count, pushed to the bottom of the note when space is tight. */
.fault-lore__echo {
  display: flex !important;
  flex-direction: column;
  gap: 3px;
  margin: 6px 0 2px;
  min-height: 0;
  order: 3;
}
.fault-card:not(:only-of-type) .fault-lore__echo {
  margin-top: auto;
}
.fault-lore__echo-kicker {
  color: #e0bd83 !important;
  font: 700 9px/1.2 var(--font-mono) !important;
  letter-spacing: 0.14em !important;
}
.fault-lore__echo-scope {
  height: 30px !important;
  opacity: 0.88;
}
.fault-lore__echo-scope i {
  background: linear-gradient(180deg, rgba(255, 207, 130, 0.78), rgba(255, 207, 130, 0.08)) !important;
}
.fault-lore__echo p,
.fault-card:only-of-type .fault-lore__echo p,
.fault-card:not(:only-of-type) .fault-lore__echo p {
  color: #ffe2b8 !important;
  font: italic 600 12.5px/1.62 var(--font-mono) !important;
  letter-spacing: 0.015em !important;
  text-shadow: 0 1px 0 #000, 0 0 8px rgba(255, 210, 145, 0.12);
}
.fault-lore__echo p::first-letter {
  color: #fff4d8;
}
.fault-card:not(:only-of-type) .fault-lore__echo {
  left: 8px;
  right: 8px;
  bottom: 4px;
  padding: 2px 0;
}
.fault-card:not(:only-of-type) .fault-lore {
  padding-bottom: 22px;
}
.fault-card:not(:only-of-type) .fault-lore__text {
  max-height: calc(100% - 22px);
}
.fault-card:not(:only-of-type) .fault-lore__echo p {
  display: block !important;
  max-height: 1.5em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10.5px !important;
  line-height: 1.5 !important;
}
.fault-card:not(:only-of-type) .fault-lore__text p {
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fault-card:only-of-type .fault-lore__stamp { display: none; }
.fault-lore {
  position: relative;
  display: block !important;
  height: 100%;
  min-height: 0;
  padding-bottom: 68px;
  overflow: hidden !important;
}
.fault-lore > .fault-lore__text {
  max-height: calc(100% - 68px);
  overflow-y: auto;
  padding-right: 3px;
}
.fault-lore__echo {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  z-index: 4;
  margin: 0;
  padding: 5px 0 2px;
  background: #04110d;
  border-top: 1px solid rgba(255, 210, 145, 0.2);
  box-shadow: 0 -10px 14px #04110d;
}
.fault-lore__echo-scope { display: none !important; }
.fault-card:not(:only-of-type) .fault-lore__echo p {
  font-size: 10.5px !important;
  line-height: 1.4 !important;
  max-height: 2.85em;
  overflow: hidden;
}
.fault-lore__echo-kicker { display: none; }
.fault-lore__echo-scope { height: 20px !important; }
.fault-card:only-of-type .fault-lore__text {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}
.fault-lore__echo p,
.fault-card:only-of-type .fault-lore__echo p,
.fault-card:not(:only-of-type) .fault-lore__echo p {
  font-size: 13px !important;
  line-height: 1.55 !important;
}

/* v3.5.4 — footer omen replaces the dry effect-chip row */
.fault-card__foot {
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 3px 8px !important;
}
.fault-omen {
  flex: 1 1 100%;
  color: #d9bd93 !important;
  font-family: "Georgia", "Songti SC", "Noto Serif SC", serif !important;
  font-size: 10.5px !important;
  font-style: italic;
  line-height: 1.45 !important;
  letter-spacing: 0.015em;
  opacity: 0.92;
}
.fault-omen::before {
  content: "//";
  margin-right: 5px;
  color: #b48b52;
  font-family: var(--font-mono, monospace);
  font-style: normal;
  font-size: 8px;
  letter-spacing: 0.08em;
}
.fault-card__foot .fault-tag {
  margin-left: auto;
}

/* v3.5.4 — rule line becomes a flavor fragment plus a micro mechanic stamp */
.fault-rule {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 8px;
}
.fault-rule__flavor {
  color: #e3cba2 !important;
  font-style: italic;
  letter-spacing: 0.01em;
}
.fault-rule__num {
  flex: 0 0 auto;
  padding: 1px 5px;
  border: 1px solid rgba(180, 139, 82, 0.32);
  color: #c9a86f !important;
  font-family: var(--font-mono, monospace);
  font-size: 8px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.4;
  white-space: nowrap;
}

/* v3.5.5 — mechanism-fault countdown */
.fault-countdown {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 18px;
  padding: 0 6px;
  border: 1px solid color-mix(in srgb, var(--fault-accent, #ffb35c) 65%, transparent);
  background: color-mix(in srgb, var(--fault-accent, #ffb35c) 12%, rgba(4, 10, 12, .85));
  color: #ffe2b8;
  font-family: var(--font-mono, "Cascadia Mono", monospace);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .12em;
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--fault-accent, #ffb35c) 16%, transparent);
  animation: countdownPulse 1.8s ease-in-out infinite;
}
@keyframes countdownPulse {
  0%, 100% { opacity: .78; }
  50% { opacity: 1; }
}
@media (max-width: 1000px) {
  .fault-countdown { min-width: 36px; height: 16px; font-size: 8px; }
}

/* v3.5.6 — make the actual fault mechanic legible: one badge per effect */
.fault-rule__chips {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.fault-rule .fault-rule__num {
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 1px solid rgba(232, 188, 116, .62);
  background:
    linear-gradient(180deg, rgba(232, 188, 116, .16), rgba(232, 188, 116, .045)),
    rgba(5, 13, 15, .82);
  box-shadow: inset 0 0 0 1px rgba(255, 238, 200, .05), 0 0 7px rgba(232, 188, 116, .1);
  color: #ffe3b6 !important;
  font-family: var(--font-mono, "Cascadia Mono", monospace);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.35;
  white-space: nowrap;
}
@media (max-width: 620px) {
  .fault-rule .fault-rule__num {
    padding: 1px 5px;
    font-size: 9.5px;
  }
}

/* v3.5.7 — clean fault dossier: one effect line, no stacked archive text */
.fault-card { overflow: hidden !important; }
.fault-card__foot { display: none !important; }
.fault-lore { overflow: hidden !important; }
.fault-lore__echo,
.fault-lore__trace,
.fault-lore__stamp,
.fault-lore__watermark { display: none !important; }
.fault-lore__text {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
  max-height: none !important;
}
.fault-list.is-count-3 .fault-card__main,
.fault-list.is-count-4 .fault-card__main,
.fault-list.is-many .fault-card__main {
  display: block !important;
}
.fault-list.is-count-3 .fault-lore,
.fault-list.is-count-4 .fault-lore,
.fault-list.is-many .fault-lore {
  display: none !important;
}
.fault-list.is-count-3 .fault-card__content,
.fault-list.is-count-4 .fault-card__content,
.fault-list.is-many .fault-card__content {
  width: 100% !important;
  max-width: 100% !important;
}

/* v3.5.8 — multi-fault cards become clean dossiers, no scene under text */
.fault-card__omen { display: none; }
.fault-list.is-count-3 .fault-card__schematic,
.fault-list.is-count-4 .fault-card__schematic,
.fault-list.is-many .fault-card__schematic,
.fault-list.is-count-3 .fault-card__sigil,
.fault-list.is-count-4 .fault-card__sigil,
.fault-list.is-many .fault-card__sigil {
  display: none !important;
}
.fault-list.is-count-3 .fault-card__content,
.fault-list.is-count-4 .fault-card__content,
.fault-list.is-many .fault-card__content {
  width: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
  padding: 0 !important;
}
.fault-list.is-count-3 .fault-card__main,
.fault-list.is-count-4 .fault-card__main,
.fault-list.is-many .fault-card__main {
  display: block !important;
}
.fault-list.is-count-3 .fault-card__main .fault-card__title,
.fault-list.is-count-4 .fault-card__main .fault-card__title,
.fault-list.is-many .fault-card__main .fault-card__title {
  position: relative !important;
  z-index: 4;
}
.fault-list.is-count-3 .fault-card__omen,
.fault-list.is-count-4 .fault-card__omen,
.fault-list.is-many .fault-card__omen {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  margin: 5px 0 0 !important;
  color: #b9a27d !important;
  font-size: 10.5px !important;
  font-style: italic;
  line-height: 1.45 !important;
}
.fault-list.is-count-3 .fault-card__title h3,
.fault-list.is-count-4 .fault-card__title h3,
.fault-list.is-many .fault-card__title h3 {
  font-size: 17px !important;
}
.fault-list.is-count-3 .fault-card__title,
.fault-list.is-count-4 .fault-card__title,
.fault-list.is-many .fault-card__title {
  border-left: 2px solid rgba(232, 188, 116, .38);
  padding-left: 9px;
}

/* v3.5.9 — 3-fault cards fit the rule layer; one-line omen only */
.fault-list.is-count-3 .fault-card {
  height: 123px !important;
  min-height: 123px !important;
  flex-basis: 123px !important;
}
.fault-list.is-count-3 .fault-card__omen,
.fault-list.is-count-4 .fault-card__omen,
.fault-list.is-many .fault-card__omen {
  -webkit-line-clamp: 1 !important;
}

/* v3.5.10 — keep multi cards minimal, move the scene to a right-hand thumbnail */
.fault-list.is-count-3 .fault-card__schematic,
.fault-list.is-count-4 .fault-card__schematic,
.fault-list.is-many .fault-card__schematic {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: 38% !important;
  height: 100% !important;
  opacity: .48 !important;
  pointer-events: none !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%) !important;
}
.fault-list.is-count-3 .fault-card__omen,
.fault-list.is-count-4 .fault-card__omen,
.fault-list.is-many .fault-card__omen {
  display: none !important;
}
.fault-list.is-count-3 .fault-card__title,
.fault-list.is-count-4 .fault-card__title,
.fault-list.is-many .fault-card__title {
  width: 62% !important;
  padding-right: 0 !important;
}

/* v3.5.11 — restore one concise omen line in multi-fault dossiers */
.fault-list.is-count-3 .fault-card__omen,
.fault-list.is-count-4 .fault-card__omen,
.fault-list.is-many .fault-card__omen {
  display: block !important;
  width: 60% !important;
  margin: 5px 0 0 !important;
  overflow: hidden !important;
  color: #b9a27d !important;
  font-size: 10px !important;
  font-style: italic;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* v3.5.12 — atmospheric flavor text with unstable flicker */
.fault-rule__flavor,
.fault-card__omen {
  color: #d7ae74 !important;
  text-shadow:
    0 0 8px rgba(255, 178, 92, .22),
    1px 0 rgba(255, 96, 76, .22),
    -1px 0 rgba(122, 214, 170, .16) !important;
  animation: flavorUnstable 5.2s steps(1) infinite;
}
@keyframes flavorUnstable {
  0%, 6%, 8%, 9%, 36%, 38%, 39%, 71%, 73%, 100% { opacity: 1; filter: none; }
  7% { opacity: .38; filter: blur(.3px); }
  37% { opacity: .62; filter: blur(.2px); }
  72% { opacity: .45; filter: blur(.4px); }
  88% { opacity: .78; }
  89% { opacity: .3; }
}
.fault-rule__flavor { animation: flavorUnstable 5.2s steps(1) infinite, flavorTear 7.5s steps(1) infinite; }
@keyframes flavorTear {
  0%, 90%, 92%, 100% { clip-path: inset(0 0 0 0); transform: none; }
  91% { clip-path: inset(18% 0 56% 0); transform: translateX(-1px); }
  91.6% { clip-path: inset(58% 0 12% 0); transform: translateX(1px); }
}

/* v3.5.13 — hand fault card hover must be unmistakable */
@media (hover: hover) {
  .patch-card.is-fault:hover,
  .patch-card.is-fault:focus-visible {
    animation: handFaultAlarm .62s steps(2) infinite !important;
    outline: 2px solid rgba(255, 90, 82, .9) !important;
    outline-offset: 3px;
  }
  .patch-card.is-fault:hover .patch-card__art,
  .patch-card.is-fault:focus-visible .patch-card__art {
    animation: handFaultJitter .16s steps(2) infinite !important;
  }
  .patch-card.is-fault:hover .patch-card__fault-label,
  .patch-card.is-fault:focus-visible .patch-card__fault-label {
    animation: handFaultBlink .55s steps(1) infinite !important;
    letter-spacing: .16em !important;
  }
}
@keyframes handFaultAlarm {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(255,90,82,.9), 0 0 28px rgba(255,90,82,.42), 0 0 64px rgba(255,40,30,.18) !important;
    filter: brightness(1.04) saturate(1.15);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(255,220,170,.85), 0 0 44px rgba(255,80,60,.62), 0 0 92px rgba(255,40,30,.3) !important;
    filter: brightness(1.16) saturate(1.4);
  }
}
@keyframes handFaultJitter {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-1.5px, 1px); }
  66% { transform: translate(1px, -1px); }
}
@keyframes handFaultBlink {
  0%, 49%, 100% { opacity: 1; color: #ffe1d8; }
  50%, 99% { opacity: .35; color: #ff5a52; }
}

/* v3.5.14 — make the hand fault card hover unmistakable at a glance */
@media (hover: hover) {
  .patch-card.is-fault:hover,
  .patch-card.is-fault:focus-visible {
    transform: translateY(-10px) rotate(-.7deg) scale(1.055) !important;
    border-color: #ff4d44 !important;
    box-shadow:
      0 0 0 3px #ff4d44,
      0 0 0 7px rgba(255, 77, 68, .2),
      0 0 48px rgba(255, 77, 68, .6),
      0 0 110px rgba(255, 40, 30, .26) !important;
    z-index: 30 !important;
  }
  .patch-card.is-fault .patch-card__fault-label {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 2px 7px !important;
    border: 1px solid rgba(255, 90, 82, .5) !important;
    background: rgba(255, 90, 82, .12) !important;
    color: #ffd6cd !important;
    font-weight: 700 !important;
    letter-spacing: .08em;
  }
  .patch-card.is-fault .patch-card__fault-label::before {
    content: "!";
    display: inline-grid;
    place-items: center;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff4d44;
    color: #180000;
    font-weight: 900;
    line-height: 1;
  }
  .patch-card.is-fault:hover .patch-card__fault-label,
  .patch-card.is-fault:focus-visible .patch-card__fault-label {
    background: #ff4d44 !important;
    color: #1b0000 !important;
    box-shadow: 0 0 18px rgba(255, 77, 68, .8);
    animation: faultLabelAlarm .42s steps(1) infinite !important;
  }
  .patch-card.is-fault:hover .patch-card__fault-label::before,
  .patch-card.is-fault:focus-visible .patch-card__fault-label::before {
    background: #1b0000;
    color: #ff4d44;
  }
}
@keyframes faultLabelAlarm {
  0%, 55%, 100% { opacity: 1; }
  56%, 78% { opacity: .35; }
}

/* v3.5.15 — restore the right-hand FIELD NOTE and make every lore string readable */
.fault-lore {
  color: #e6dcc4 !important;
  background-color: rgba(3, 12, 17, .92) !important;
}
.fault-lore .micro-label,
.fault-lore__label {
  color: #c9a86f !important;
  font-size: 8.5px !important;
  letter-spacing: .12em !important;
}
.fault-lore__text,
.fault-lore .fault-lore__text,
.fault-lore p.fault-lore__text {
  color: #e8dcc2 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  text-align: left !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .65) !important;
}
.fault-lore__echo p { color: #d9bd93 !important; font-size: 11.5px !important; line-height: 1.5 !important; }
.fault-lore__echo-kicker { color: #b9a27d !important; font-size: 8px !important; }
.fault-lore__stamp { color: #b9a27d !important; font-size: 8px !important; }

@media (min-width: 1001px) {
  .fault-list.is-count-3 .fault-lore,
  .fault-list.is-count-4 .fault-lore,
  .fault-list.is-many .fault-lore,
  .fault-card:not(:only-of-type) .fault-lore {
    display: flex !important;
    position: absolute !important;
    top: 27px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 38% !important;
    min-width: 0 !important;
    padding: 6px 10px 8px 12px !important;
    border-left: 1px solid rgba(201, 168, 111, .28) !important;
    background: linear-gradient(90deg, rgba(4, 16, 22, .72), rgba(3, 12, 17, .96)) !important;
    z-index: 8 !important;
    overflow: hidden !important;
  }
  .fault-list.is-count-3 .fault-lore__text,
  .fault-list.is-count-4 .fault-lore__text,
  .fault-list.is-many .fault-lore__text,
  .fault-card:not(:only-of-type) .fault-lore__text {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 4 !important;
    overflow: hidden !important;
    color: #e8dcc2 !important;
    font-size: 11.5px !important;
    line-height: 1.48 !important;
    max-height: none !important;
  }
  .fault-list.is-count-3 .fault-lore__echo,
  .fault-list.is-count-4 .fault-lore__echo,
  .fault-list.is-many .fault-lore__echo,
  .fault-list.is-count-3 .fault-lore__trace,
  .fault-list.is-count-4 .fault-lore__trace,
  .fault-list.is-many .fault-lore__trace,
  .fault-list.is-count-3 .fault-lore__stamp,
  .fault-list.is-count-4 .fault-lore__stamp,
  .fault-list.is-many .fault-lore__stamp,
  .fault-list.is-count-3 .fault-lore__watermark,
  .fault-list.is-count-4 .fault-lore__watermark,
  .fault-list.is-many .fault-lore__watermark {
    display: none !important;
  }
  .fault-list.is-count-3 .fault-card__schematic,
  .fault-list.is-count-4 .fault-card__schematic,
  .fault-list.is-many .fault-card__schematic {
    display: none !important;
  }
  .fault-list.is-count-3 .fault-card__content,
  .fault-list.is-count-4 .fault-card__content,
  .fault-list.is-many .fault-card__content {
    width: 60% !important;
    max-width: 60% !important;
  }
  .fault-list.is-count-3 .fault-card__title,
  .fault-list.is-count-4 .fault-card__title,
  .fault-list.is-many .fault-card__title {
    width: 100% !important;
  }
  .fault-list.is-count-3 .fault-card__omen,
  .fault-list.is-count-4 .fault-card__omen,
  .fault-list.is-many .fault-card__omen {
    display: none !important;
  }
}

/* v3.5.7 — keep the per-fault echo visible in the restored right rail */
@media (min-width: 1001px) {
  .fault-list.is-count-3 .fault-lore__echo,
  .fault-list.is-count-4 .fault-lore__echo,
  .fault-list.is-many .fault-lore__echo,
  .fault-card:not(:only-of-type) .fault-lore__echo {
    display: block !important;
    margin-top: 4px !important;
    padding-top: 4px !important;
    border-top: 1px dashed rgba(201, 168, 111, .22) !important;
  }
  .fault-list.is-count-3 .fault-lore__echo-kicker,
  .fault-list.is-count-4 .fault-lore__echo-kicker,
  .fault-list.is-many .fault-lore__echo-kicker,
  .fault-list.is-count-3 .fault-lore__echo p,
  .fault-list.is-count-4 .fault-lore__echo p,
  .fault-list.is-many .fault-lore__echo p {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
    overflow: hidden !important;
    margin: 0 !important;
    font-size: 9.5px !important;
    line-height: 1.4 !important;
    color: #d9bd93 !important;
    font-style: italic !important;
  }
  .fault-list.is-count-3 .fault-lore__echo-kicker,
  .fault-list.is-count-4 .fault-lore__echo-kicker,
  .fault-list.is-many .fault-lore__echo-kicker {
    display: none !important;
  }
}

/* v3.5.7b — prevent right-rail text clipping; keep the full 4-line lore, no footer echo */
@media (min-width: 1001px) {
  .fault-list.is-count-3 .fault-lore__text,
  .fault-list.is-count-4 .fault-lore__text,
  .fault-list.is-many .fault-lore__text,
  .fault-card:not(:only-of-type) .fault-lore__text {
    font-size: 11px !important;
    line-height: 1.38 !important;
    -webkit-line-clamp: 4 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .fault-list.is-count-3 .fault-lore__echo,
  .fault-list.is-count-4 .fault-lore__echo,
  .fault-list.is-many .fault-lore__echo,
  .fault-card:not(:only-of-type) .fault-lore__echo {
    display: none !important;
  }
  .fault-list.is-count-3 .fault-lore,
  .fault-list.is-count-4 .fault-lore,
  .fault-list.is-many .fault-lore,
  .fault-card:not(:only-of-type) .fault-lore {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
}

/* v3.5.7c — fit four full lore lines in the compact right rail */
@media (min-width: 1001px) {
  .fault-list.is-count-3 .fault-lore__text,
  .fault-list.is-count-4 .fault-lore__text,
  .fault-list.is-many .fault-lore__text,
  .fault-card:not(:only-of-type) .fault-lore__text {
    font-size: 10.8px !important;
    line-height: 1.32 !important;
    -webkit-line-clamp: 4 !important;
    max-height: 58px !important;
  }
}

/* v3.5.7d — right-rail readability backdrop */
@media (min-width: 1001px) {
  .fault-list.is-count-3 .fault-lore,
  .fault-list.is-count-4 .fault-lore,
  .fault-list.is-many .fault-lore,
  .fault-card:not(:only-of-type) .fault-lore {
    background: linear-gradient(180deg, rgba(3, 9, 13, .78), rgba(3, 9, 13, .62)) !important;
    border-left: 1px solid rgba(201, 168, 111, .22) !important;
  }
  .fault-list.is-count-3 .fault-lore__text,
  .fault-list.is-count-4 .fault-lore__text,
  .fault-list.is-many .fault-lore__text,
  .fault-card:not(:only-of-type) .fault-lore__text {
    color: #f2e3c7 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .9) !important;
  }
}

/* v3.5.7e — single-fault lore must show its full text, not clamp it */
.fault-card:only-of-type .fault-lore__text {
  display: block !important;
  -webkit-line-clamp: unset !important;
  max-height: none !important;
  overflow: visible !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}
.fault-card:only-of-type .fault-lore__echo { display: block !important; }
@media (min-width: 1001px) {
  .fault-list.is-count-3 .fault-lore__text,
  .fault-list.is-count-4 .fault-lore__text,
  .fault-list.is-many .fault-lore__text,
  .fault-card:not(:only-of-type) .fault-lore__text {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    max-height: 56px !important;
  }
}

/* v3.5.8 — authoritative multi-fault layout: full-card scene, readable right rail, no stretched empty rows */
@media (min-width: 1001px) {
  .fault-list {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-auto-rows: auto !important;
    align-content: flex-start !important;
    gap: 8px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .fault-list .fault-card {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    min-height: 123px !important;
    max-height: none !important;
    height: 123px !important;
    overflow: hidden !important;
  }
  .fault-list.is-count-2 .fault-card {
    height: clamp(154px, calc((100% - 8px) / 2), 220px) !important;
  }
  .fault-list.is-count-3 .fault-card {
    height: clamp(123px, calc((100% - 16px) / 3), 170px) !important;
  }
  .fault-list .fault-card:not(:only-of-type) .fault-card__schematic {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: .58 !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }
  .fault-list .fault-card:not(:only-of-type) .fault-card__schematic svg {
    width: 100% !important;
    height: 100% !important;
  }
  .fault-list .fault-card:not(:only-of-type) .fault-card__schematic .fault-schematic__tag,
  .fault-list .fault-card:not(:only-of-type) .fault-card__schematic .fault-schematic__sev,
  .fault-list .fault-card:not(:only-of-type) .fault-card__schematic .fault-schematic__scan,
  .fault-list .fault-card:not(:only-of-type) .fault-card__schematic .fault-schematic__label,
  .fault-list .fault-card:not(:only-of-type) .fault-card__schematic .fault-schematic__value {
    display: none !important;
  }
  .fault-list .fault-card:not(:only-of-type) .fault-card__content {
    position: relative !important;
    z-index: 2 !important;
    width: 60% !important;
    max-width: 60% !important;
    height: 100% !important;
    min-height: 0 !important;
    background: linear-gradient(180deg, rgba(3, 12, 17, .94) 0%, rgba(3, 12, 17, .58) 48%, rgba(3, 12, 17, 0) 82%) !important;
  }
  .fault-list .fault-card:not(:only-of-type) .fault-lore {
    display: flex !important;
    position: absolute !important;
    top: 28px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 38% !important;
    min-width: 0 !important;
    padding: 7px 10px 8px 12px !important;
    border-left: 1px solid rgba(201, 168, 111, .26) !important;
    background: linear-gradient(90deg, rgba(3, 9, 13, .72), rgba(3, 9, 13, .9)) !important;
    z-index: 3 !important;
    overflow: hidden !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .fault-list .fault-card:not(:only-of-type) .fault-lore__text {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 4 !important;
    overflow: hidden !important;
    color: #f2e3c7 !important;
    font-size: 10.8px !important;
    line-height: 1.4 !important;
    max-height: 61px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .9) !important;
  }
  .fault-list.is-count-2 .fault-lore__text {
    font-size: 12.2px !important;
    line-height: 1.45 !important;
    max-height: 72px !important;
  }
  .fault-list .fault-card:not(:only-of-type) .fault-lore__echo,
  .fault-list .fault-card:not(:only-of-type) .fault-lore__stamp,
  .fault-list .fault-card:not(:only-of-type) .fault-lore__trace,
  .fault-list .fault-card:not(:only-of-type) .fault-lore__watermark {
    display: none !important;
  }
  .fault-list .fault-card:not(:only-of-type) .fault-card__omen,
  .fault-list .fault-card:not(:only-of-type) .fault-card__foot {
    display: none !important;
  }
}

/* v3.5.8b — restore single card, true full-card scene, 2-fault lore size */
@media (min-width: 1001px) {
  .fault-list .fault-card:only-of-type {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
  }
  .fault-list .fault-card:not(:only-of-type) .fault-card__schematic {
    top: -28px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: auto !important;
  }
  .fault-list.is-count-2 .fault-card .fault-lore__text {
    font-size: 12.2px !important;
    line-height: 1.42 !important;
    max-height: 72px !important;
  }
}

/* v3.5.8c — full-card scene outside content, lore anchored to card */
@media (min-width: 1001px) {
  .fault-list .fault-card:not(:only-of-type) {
    position: relative !important;
    overflow: hidden !important;
  }
  .fault-list .fault-card:not(:only-of-type) .fault-card__main {
    display: block !important;
    position: static !important;
    height: 100% !important;
    padding: 0 !important;
  }
  .fault-list .fault-card:not(:only-of-type) .fault-card__content {
    width: 60% !important;
    height: 100% !important;
  }
  .fault-list .fault-card:not(:only-of-type) > .fault-card__schematic {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
  }
  .fault-list .fault-card:not(:only-of-type) .fault-lore {
    position: absolute !important;
    top: 28px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 38% !important;
    height: auto !important;
    max-height: none !important;
    z-index: 3 !important;
  }
}

/* v3.5.8d — 3 faults auto-fit, 4+ keeps scroll */
@media (min-width: 1001px) {
  .fault-list.is-count-3:not(.is-many) .fault-card {
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* v3.5.8e — mobile grid min-width guard */
@media (max-width: 620px) {
  .board,
  .fault-list,
  .fault-card {
    min-width: 0 !important;
  }
  .fault-list {
    width: auto !important;
  }
}

/* v3.5.8f — mobile multi-fault list is a single column, no sideways growth */
@media (max-width: 620px) {
  .fault-list,
  .fault-list.is-count-2,
  .fault-list.is-count-3,
  .fault-list.is-many {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-auto-rows: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
  .fault-list .fault-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
}

/* v3.5.8g — constrain mobile grid track */
@media (max-width: 620px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* v3.5.8h — mobile 3/4 cards must show the effect line; list scrolls */
@media (max-width: 620px) {
  .fault-list.is-count-3:not(.is-many) .fault-card,
  .fault-list.is-many .fault-card {
    flex: 0 0 154px !important;
    height: 154px !important;
    max-height: none !important;
  }
}

/* v3.5.9 — final multi-fault dossier:
   full-card scene, text block only behind the title, right rail top-aligned,
   main flavor above, residue echo pinned to the bottom. */
.fault-card:not(:only-of-type) .fault-card__content {
  background: none !important;
  padding: 10px 12px !important;
}
.fault-card:not(:only-of-type) .fault-card__title {
  width: auto !important;
  max-width: 100% !important;
  padding: 6px 9px 7px 10px !important;
  border-left: 2px solid rgba(232, 188, 116, .48) !important;
  background: linear-gradient(90deg, rgba(3, 12, 17, .96) 0%, rgba(3, 12, 17, .80) 72%, rgba(3, 12, 17, .18) 100%) !important;
}
@media (min-width: 1001px) {
  .fault-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .fault-list .fault-card:not(:only-of-type) {
    flex: 0 0 154px !important;
    height: 154px !important;
    min-height: 154px !important;
    max-height: 154px !important;
  }
  .fault-list .fault-card:not(:only-of-type) .fault-card__schematic {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: .55 !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }
  .fault-list .fault-card:not(:only-of-type) .fault-card__content {
    position: relative !important;
    z-index: 2 !important;
    width: 60% !important;
    max-width: 60% !important;
    height: 100% !important;
  }
  .fault-list .fault-card:not(:only-of-type) .fault-card__title h3 {
    font-size: 16.5px !important;
  }
  .fault-list .fault-card:not(:only-of-type) .fault-card__title .fault-rule {
    font-size: 13.8px !important;
    line-height: 1.35 !important;
    margin-top: 2px !important;
  }
  .fault-list .fault-card:not(:only-of-type) .fault-lore {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    position: absolute !important;
    top: 28px !important;
    right: 0 !important;
    bottom: 6px !important;
    left: auto !important;
    width: 38% !important;
    height: auto !important;
    max-height: none !important;
    padding: 6px 10px 6px 12px !important;
    background: linear-gradient(90deg, rgba(3, 9, 13, .88), rgba(3, 9, 13, .94)) !important;
    border-left: 1px solid rgba(201, 168, 111, .28) !important;
    z-index: 4 !important;
    overflow: hidden !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .fault-list .fault-card:not(:only-of-type) .fault-lore > .micro-label {
    flex: 0 0 auto;
    margin: 0 0 2px !important;
    font-size: 8.5px !important;
    color: #c9a86f !important;
  }
  .fault-list .fault-card:not(:only-of-type) .fault-lore__text {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 4 !important;
    flex: 0 0 auto;
    margin: 0 !important;
    max-height: 71px !important;
    overflow: hidden !important;
    color: #f2e3c7 !important;
    font-size: 12.2px !important;
    line-height: 1.45 !important;
  }
  .fault-list .fault-card:not(:only-of-type) .fault-lore__echo {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto;
    margin-top: auto !important;
    padding-top: 5px !important;
    border-top: 1px solid rgba(201, 168, 111, .22) !important;
  }
  .fault-list .fault-card:not(:only-of-type) .fault-lore__echo-kicker {
    display: block !important;
    font-size: 8px !important;
    color: #b9a27d !important;
  }
  .fault-list .fault-card:not(:only-of-type) .fault-lore__echo p {
    display: block !important;
    margin: 1px 0 0 !important;
    max-height: 29px !important;
    overflow: hidden !important;
    color: #e6c997 !important;
    font-size: 10.5px !important;
    line-height: 1.38 !important;
  }
  .fault-list .fault-card:not(:only-of-type) .fault-lore__echo-scope,
  .fault-list .fault-card:not(:only-of-type) .fault-lore__watermark,
  .fault-list .fault-card:not(:only-of-type) .fault-lore__trace,
  .fault-list .fault-card:not(:only-of-type) .fault-lore__stamp,
  .fault-list .fault-card:not(:only-of-type) .fault-card__omen {
    display: none !important;
  }
}
@media (max-width: 1000px) {
  .fault-card:not(:only-of-type) .fault-card__content {
    background: none !important;
  }
  .fault-card:not(:only-of-type) .fault-card__title {
    padding: 6px 8px !important;
    background: rgba(3, 12, 17, .88) !important;
  }
}

/* v3.5.9b — beat the older 0,4-specificity multi rules */
@media (min-width: 1001px) {
  .fault-list .fault-card:not(:only-of-type) .fault-card__content {
    display: block !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 60% !important;
    max-width: 60% !important;
    height: 100% !important;
    transform: none !important;
    background: none !important;
    padding: 10px 12px !important;
  }
  .fault-list.is-count-3:not(.is-many) .fault-card,
  .fault-list.is-count-3.is-many .fault-card {
    flex: 0 0 154px !important;
    height: 154px !important;
    min-height: 154px !important;
    max-height: 154px !important;
  }
  .fault-list .fault-card:not(:only-of-type) .fault-card__main {
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
}

/* v3.5.9d — mobile must not inherit the desktop absolute content/lore layout */
@media (max-width: 1000px) {
  .fault-list.is-count-2 .fault-card,
  .fault-list.is-count-3 .fault-card,
  .fault-list.is-many .fault-card {
    display: block !important;
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 6px !important;
  }
  .fault-card:not(:only-of-type) .fault-card__main {
    display: block !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .fault-card:not(:only-of-type) .fault-card__content {
    position: static !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 10px !important;
    background: none !important;
    transform: none !important;
  }
  .fault-card:not(:only-of-type) .fault-card__title {
    width: auto !important;
    max-width: none !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 6px 8px !important;
    background: rgba(3, 12, 17, .88) !important;
  }
  .fault-card:not(:only-of-type) .fault-card__schematic {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 88px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: .5 !important;
    z-index: 0 !important;
  }
  .fault-card:not(:only-of-type) .fault-lore,
  .fault-card:not(:only-of-type) .fault-card__foot,
  .fault-card:not(:only-of-type) .fault-card__omen {
    display: none !important;
  }
  .fault-list.is-count-3:not(.is-many) .fault-card,
  .fault-list.is-count-3.is-many .fault-card,
  .fault-list.is-count-4 .fault-card,
  .fault-list.is-many .fault-card {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* v3.5.10 semantic module scenes: each module gets its own readable object, not a shared blueprint */
.start-btn,
.start-btn:hover,
.start-btn:focus-visible {
  color: #f2fffb !important;
  -webkit-text-fill-color: #f2fffb !important;
}
.start-btn:hover { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }

.maint-btn[data-maintenance="power"],
.maint-btn[data-maintenance="food"],
.maint-btn[data-maintenance="defense"],
.maint-btn[data-maintenance="stability"] {
  background-repeat: no-repeat !important;
  background-position: right -18px center, center !important;
  background-size: 128px auto, cover !important;
}
.maint-btn[data-maintenance="power"] {
  background-image: url("assets/ui-maint-power-v2.svg"), linear-gradient(90deg, rgba(3,14,20,.94) 0 48%, rgba(255,194,102,.12) 100%) !important;
}
.maint-btn[data-maintenance="food"] {
  background-image: url("assets/ui-maint-food-v2.svg"), linear-gradient(90deg, rgba(3,14,20,.94) 0 48%, rgba(169,230,128,.12) 100%) !important;
}
.maint-btn[data-maintenance="defense"] {
  background-image: url("assets/ui-maint-defense-v2.svg"), linear-gradient(90deg, rgba(3,14,20,.94) 0 48%, rgba(120,220,232,.12) 100%) !important;
}
.maint-btn[data-maintenance="stability"] {
  background-image: url("assets/ui-maint-stability-v2.svg"), linear-gradient(90deg, rgba(3,14,20,.94) 0 48%, rgba(199,163,255,.12) 100%) !important;
}
.patch-bay {
  background-image: url("assets/ui-module-patch-v2.svg"), linear-gradient(180deg, rgba(3,14,20,.9), rgba(2,8,12,.96)) !important;
  background-size: 210px auto, cover !important;
  background-position: right -34px bottom -24px, center !important;
  background-repeat: no-repeat !important;
}
.log-panel {
  background-image: url("assets/ui-module-log-v2.svg"), linear-gradient(180deg, rgba(14,10,5,.9), rgba(3,9,11,.97)) !important;
  background-size: 250px auto, cover !important;
  background-position: right -40px top -18px, center !important;
  background-repeat: no-repeat !important;
}
.night-card {
  background-image: url("assets/ui-module-night-v2.svg"), linear-gradient(180deg, rgba(3,14,20,.92), rgba(2,7,10,.97)) !important;
  background-size: 290px auto, cover !important;
  background-position: center -42px, center !important;
  background-repeat: no-repeat !important;
}
.fault-lore[data-tone] {
  background-image: url("assets/ui-module-lore-v2.svg"), linear-gradient(120deg, rgba(4,16,20,.9), rgba(2,8,12,.96)) !important;
  background-size: 142px auto, cover !important;
  background-position: right -22px bottom -20px, center !important;
  background-repeat: no-repeat !important;
  background-blend-mode: screen, normal !important;
}
/* v3.5.10a keep maintenance art distinct but out of the text's way */
.maint-btn[data-maintenance="power"],
.maint-btn[data-maintenance="food"],
.maint-btn[data-maintenance="defense"],
.maint-btn[data-maintenance="stability"] {
  background-size: 108px auto, cover !important;
  background-position: right -18px center, center !important;
}/* v3.5.11 — fault-count sizing: 2 fill the module, 3 fill as a triad, 4+ scroll compact */
@media (min-width: 1001px) {
  .fault-list.is-count-2:not(.is-many),
  .fault-list.is-count-3:not(.is-many) {
    overflow: hidden !important;
  }
  .fault-list.is-count-2 .fault-card,
  .fault-list.is-count-3 .fault-card {
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .fault-list.is-count-3 .fault-card__content {
    padding: 8px 10px !important;
  }
  .fault-list.is-count-3 .fault-card__title {
    padding: 4px 8px 5px !important;
  }
  .fault-list.is-count-3 .fault-card__title h3 {
    font-size: 15px !important;
  }
  .fault-list.is-count-3 .fault-card__title .fault-rule {
    font-size: 12px !important;
    line-height: 1.3 !important;
    max-height: 31px !important;
    overflow: hidden !important;
  }
  .fault-list.is-count-3 .fault-lore {
    top: 24px !important;
    padding: 5px 8px 5px 9px !important;
  }
  .fault-list.is-count-3 .fault-lore__text {
    -webkit-line-clamp: 2 !important;
    max-height: 29px !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }
  .fault-list.is-count-3 .fault-lore__echo,
  .fault-list.is-count-3 .fault-lore__trace,
  .fault-list.is-count-3 .fault-lore__stamp,
  .fault-list.is-count-3 .fault-lore__watermark,
  .fault-list.is-count-3 .fault-card__omen {
    display: none !important;
  }
  /* 4+ only: compact fixed rows; the list scrolls */
  .fault-list.is-many .fault-card {
    flex: 0 0 123px !important;
    height: 123px !important;
    min-height: 123px !important;
    max-height: 123px !important;
  }
}
/* v3.5.11b — beat the earlier 0,4 multi-card selectors for 3 and 4+ */
@media (min-width: 1001px) {
  .fault-list.is-count-3:not(.is-many) .fault-card {
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .fault-list.is-count-3.is-many .fault-card {
    flex: 0 0 123px !important;
    height: 123px !important;
    min-height: 123px !important;
    max-height: 123px !important;
  }
}
/* v3.5.11c — 3-fault readability: clean left stack, quiet scene, clipped right lore */
@media (min-width: 1001px) {
  .fault-list.is-count-3:not(.is-many) .fault-card__title {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 5px 8px !important;
  }
  .fault-list.is-count-3:not(.is-many) .fault-card__title h3 {
    font-size: 15px !important;
    line-height: 1.12 !important;
    margin: 0 0 3px !important;
  }
  .fault-list.is-count-3:not(.is-many) .fault-card__title .fault-rule {
    font-size: 11.5px !important;
    line-height: 1.25 !important;
    max-height: 29px !important;
    overflow: hidden !important;
  }
  .fault-list.is-count-3:not(.is-many) .fault-scene {
    opacity: .30 !important;
  }
  .fault-list.is-count-3:not(.is-many) .fault-scene text {
    display: none !important;
  }
  .fault-list.is-count-3:not(.is-many) .fault-lore {
    top: 22px !important;
    padding: 4px 8px !important;
  }
  .fault-list.is-count-3:not(.is-many) .fault-lore__text {
    -webkit-line-clamp: 2 !important;
    max-height: 26px !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
  }
  .fault-list.is-count-3:not(.is-many) .fault-lore__label {
    font-size: 8px !important;
    letter-spacing: .14em !important;
  }
}
/* v3.5.11d — 3-fault tier sits above the 4+ compact tier */
@media (min-width: 1001px) {
  .fault-list.is-count-3:not(.is-many) {
    gap: 4px !important;
  }
  .fault-list.is-count-3:not(.is-many) .fault-card {
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .fault-list.is-count-3.is-many .fault-card {
    flex: 0 0 104px !important;
    height: 104px !important;
    min-height: 104px !important;
    max-height: 104px !important;
  }
}
/* v3.5.11e — keep 3-fault right lore at a readable 2 lines */
@media (min-width: 1001px) {
  .fault-list.is-count-3:not(.is-many) .fault-card__title h3 {
    font-size: 15.5px !important;
  }
  .fault-list.is-count-3:not(.is-many) .fault-card__title .fault-rule {
    font-size: 12px !important;
  }
  .fault-list.is-count-3:not(.is-many) .fault-lore__text {
    font-size: 10.8px !important;
    line-height: 1.32 !important;
    max-height: 29px !important;
  }
}
/* v3.5.11f — 3-fault right lore gets three full lines */
@media (min-width: 1001px) {
  .fault-list.is-count-3:not(.is-many) .fault-lore__text {
    -webkit-line-clamp: 3 !important;
    max-height: 43px !important;
    font-size: 10.8px !important;
    line-height: 1.32 !important;
  }
}
/* v3.5.12 — persistent / lingering status badge */
.fault-duration {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  min-width: 30px;
  margin-left: 6px;
  padding: 0 6px;
  border: 1px dashed color-mix(in srgb, var(--fault-accent, #ffb35c) 70%, transparent);
  background: color-mix(in srgb, var(--fault-accent, #ffb35c) 9%, rgba(4, 10, 12, .82));
  color: #ffd9a3;
  font-family: var(--font-mono, "Cascadia Mono", monospace);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 1000px) {
  .fault-duration { height: 16px; min-width: 26px; margin-left: 4px; font-size: 8px; }
}

/* v3.5.14 — hand-card selection hierarchy: obvious hover edge + filled action CTA */
.hand .patch-card {
  transition:
    transform 0.16s cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    filter 0.16s ease,
    opacity 0.16s ease;
}

.hand .patch-card .cover-cta {
  border: 1px solid color-mix(in srgb, var(--card-accent) 48%, transparent);
  background: color-mix(in srgb, var(--card-accent) 9%, transparent);
  color: #eafff8;
  padding: 3px 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.hand .patch-card.is-playable .cover-cta {
  background: var(--card-accent) !important;
  border-color: color-mix(in srgb, var(--card-accent) 72%, #ffffff) !important;
  color: #04120d !important;
  box-shadow:
    0 0 12px color-mix(in srgb, var(--card-accent) 42%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.hand .patch-card.is-locked .cover-cta {
  background: transparent !important;
  border: 1px dashed #52646c !important;
  color: #91a1a8 !important;
  box-shadow: none !important;
}

.hand .patch-card .effect-chip {
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  background: rgba(4, 12, 15, 0.5);
}

.hand .patch-card .cost-badge {
  border-color: rgba(255, 208, 118, 0.72) !important;
  background: rgba(52, 38, 12, 0.92) !important;
  color: #ffe1a3 !important;
  font-weight: 800;
}

@media (hover: hover) {
  .hand .patch-card:hover,
  .hand .patch-card:focus-visible {
    --hover-edge: color-mix(in srgb, var(--card-accent) 64%, #d8ffff);
    transform: translateY(-9px) scale(1.03) !important;
    border-color: var(--hover-edge) !important;
    box-shadow:
      inset 0 0 0 2px var(--hover-edge),
      inset 0 0 28px color-mix(in srgb, var(--card-accent) 17%, transparent),
      0 26px 48px rgba(0, 0, 0, 0.62),
      0 0 36px color-mix(in srgb, var(--card-accent) 28%, transparent) !important;
    filter: brightness(1.1) saturate(1.12) drop-shadow(0 0 13px color-mix(in srgb, var(--card-accent) 44%, transparent));
    opacity: 1 !important;
    z-index: 12;
  }

  .hand .patch-card:hover .patch-card__top,
  .hand .patch-card:focus-visible .patch-card__top {
    color: #effffb;
  }

  .hand .patch-card:hover .patch-card__title-row h4,
  .hand .patch-card:focus-visible .patch-card__title-row h4 {
    color: #ffffff;
    text-shadow: 0 0 12px color-mix(in srgb, var(--card-accent) 45%, transparent);
  }

  .hand .patch-card:hover .cover-cta,
  .hand .patch-card:focus-visible .cover-cta {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #07130f !important;
    box-shadow: 0 0 18px color-mix(in srgb, var(--card-accent) 55%, transparent) !important;
  }

  .hand .patch-card.is-fault:hover,
  .hand .patch-card.is-fault:focus-visible {
    --hover-edge: #ff6b5f;
    filter: brightness(1.12) saturate(1.2) drop-shadow(0 0 18px rgba(255, 82, 70, 0.62));
  }

  .hand .patch-card.is-locked:hover,
  .hand .patch-card.is-locked:focus-visible {
    --hover-edge: #7f969e;
    transform: translateY(-4px) scale(1.012) !important;
    border-color: #7f969e !important;
    box-shadow:
      inset 0 0 0 1px #7f969e,
      0 16px 30px rgba(0, 0, 0, 0.5) !important;
    filter: brightness(0.94) saturate(0.68) drop-shadow(0 0 8px rgba(127, 150, 158, 0.26));
    opacity: 0.86 !important;
  }

  .hand .patch-card.is-locked:hover .cover-cta,
  .hand .patch-card.is-locked:focus-visible .cover-cta {
    background: transparent !important;
    border-color: #6f858e !important;
    color: #aab8bd !important;
    box-shadow: none !important;
  }

  /* Strong focus: the hovered card stays bright while the rest of the hand recedes. */
  .hand:has(.patch-card:hover) .patch-card:not(:hover),
  .hand:has(.patch-card:focus-visible) .patch-card:not(:focus-visible) {
    opacity: 0.46;
    filter: saturate(0.48) brightness(0.72);
  }

  .hand .patch-card:hover {
    filter: brightness(1.16) saturate(1.18) drop-shadow(0 0 20px color-mix(in srgb, var(--card-accent) 65%, transparent));
  }

  .hand .patch-card.is-fault:hover {
    filter: brightness(1.16) saturate(1.22) drop-shadow(0 0 22px rgba(255, 82, 70, 0.72));
  }

  .hand .patch-card.is-locked:hover {
    opacity: 0.9;
  }
}

/* ===== v4.0 material / depth / per-card backdrop ===== */
.world-bg__room {
  position: absolute;
  inset: -8%;
  perspective: 780px;
  perspective-origin: 50% 38%;
  transform: rotateX(calc(var(--room-py, 0) * 1.8deg)) rotateY(calc(var(--room-px, 0) * -2.2deg));
  transition: transform .45s ease-out;
  pointer-events: none;
  z-index: 1;
  opacity: .72;
  mix-blend-mode: screen;
}
.world-bg__room i { position: absolute; display: block; pointer-events: none; }
.room__floor {
  left: -38%; right: -38%; bottom: -44%; height: 92%;
  transform-origin: 50% 100%;
  transform: rotateX(74deg) translateZ(-30px);
  background:
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(89, 224, 240, .10) 48px 49px, transparent 50px 96px),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(89, 224, 240, .075) 48px 49px, transparent 50px 96px),
    radial-gradient(ellipse at 50% 72%, rgba(74, 206, 224, .12), transparent 64%);
  -webkit-mask-image: linear-gradient(transparent 0%, #000 30%, #000 100%);
  mask-image: linear-gradient(transparent 0%, #000 30%, #000 100%);
}
.room__wall {
  left: 10%; right: 10%; top: 6%; height: 52%;
  transform: translateZ(-190px);
  border: 1px solid rgba(118, 212, 224, .12);
  background:
    linear-gradient(90deg, transparent 0 9%, rgba(104, 221, 234, .06) 9.1% 9.25%, transparent 9.35% 90.6%, rgba(104, 221, 234, .06) 90.7% 90.85%, transparent 91%),
    linear-gradient(180deg, rgba(16, 42, 48, .38), rgba(4, 14, 18, .08));
  box-shadow: inset 0 0 80px rgba(55, 173, 190, .08);
}
.room__ribs {
  left: 2%; right: 2%; top: 4%; height: 64%;
  transform: translateZ(-130px);
  background: repeating-linear-gradient(90deg, transparent 0 118px, rgba(117, 221, 233, .07) 119px 120px, transparent 121px 238px);
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
}
.room__gantry {
  left: -4%; right: -4%; top: 10%; height: 7%;
  transform: translateZ(-60px) rotateX(2deg);
  border-top: 2px solid rgba(120, 228, 238, .18);
  border-bottom: 1px solid rgba(120, 228, 238, .10);
  background: repeating-linear-gradient(90deg, transparent 0 88px, rgba(179, 238, 241, .12) 89px 94px, transparent 95px 180px);
}
.room__shaft {
  left: 16%; top: -8%; width: 38%; height: 88%;
  transform: rotateZ(-12deg);
  background: linear-gradient(180deg, rgba(128, 232, 239, .13), transparent 72%);
  clip-path: polygon(18% 0, 52% 0, 100% 100%, 0 100%);
  filter: blur(14px);
  opacity: .5;
}
.world-bg__dust { opacity: .55; }
.world-bg__scanlines { opacity: .28; }

/* Per-card generated backdrop */
.patch-card > .patch-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: .7;
  pointer-events: none;
  filter: saturate(1.05) contrast(1.08) brightness(1.08);
  transition: opacity .28s ease, transform .4s ease;
}
.patch-card:hover > .patch-card__bg,
.patch-card:focus-visible > .patch-card__bg { opacity: .82; transform: scale(1.035); }
.patch-card.is-locked > .patch-card__bg { opacity: .34; filter: saturate(.5) contrast(.94); }
.patch-card.is-fault > .patch-card__bg { opacity: .72; }
.patch-card > .patch-card__art { opacity: .45; }
.patch-card:hover > .patch-card__art { opacity: .6; }
.patch-card::after { z-index: 3; }

/* Material system: bevels, precision edges, press feel */
:is(.btn, .cover-cta, .start-btn, .end-day-btn, .maint-btn, .icon-btn, .audio-panel button) {
  box-shadow:
    inset 0 1px 0 rgba(238, 255, 247, .22),
    inset 0 -2px 0 rgba(0, 0, 0, .5),
    inset 0 0 0 1px rgba(151, 224, 211, .10),
    0 3px 0 rgba(0, 0, 0, .38),
    0 8px 18px rgba(0, 0, 0, .32);
}
:is(.btn, .cover-cta, .start-btn, .end-day-btn, .maint-btn, .icon-btn):hover {
  filter: brightness(1.08) saturate(1.04);
}
:is(.btn, .cover-cta, .start-btn, .end-day-btn, .maint-btn, .icon-btn):active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, .55),
    inset 0 0 0 1px rgba(151, 224, 211, .08),
    0 1px 0 rgba(0, 0, 0, .4);
}
.cover-cta {
  border-style: solid;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .16);
}
.panel, .topbar, .resource-card, .maint-btn {
  box-shadow:
    inset 0 1px 0 rgba(208, 247, 235, .10),
    inset 0 0 0 1px rgba(0, 0, 0, .28),
    0 12px 32px rgba(0, 0, 0, .28);
}
.resource-card::before, .panel::before { opacity: .9; }

@media (prefers-reduced-motion: reduce) {
  .world-bg__room { transition: none; transform: none; }
  .patch-card > .patch-card__bg { transition: none; }
}
@media (max-width: 760px) {
  .world-bg__room { opacity: .48; inset: -18%; }
  .room__wall { left: 2%; right: 2%; }
  .patch-card > .patch-card__bg { opacity: .34; }
}

/* v4.0.1 — fault duration badge + 4/5-card scroll tier */
.fault-title__line {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.fault-title__line h3 {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fault-title__duration {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 18px;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--fault-accent, #e8c27a) 62%, transparent);
  background: color-mix(in srgb, var(--fault-accent, #e8c27a) 13%, transparent);
  color: var(--fault-accent, #f0c97a);
  font: 700 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .06em;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.fault-card__status { margin-left: auto; }

@media (min-width: 1001px) {
  .fault-list.is-many {
    gap: 10px !important;
    overflow-y: auto !important;
    padding-right: 2px;
  }
  .fault-list.is-many .fault-card {
    flex: 0 0 calc((100% - 40px) / 4.5) !important;
    height: calc((100% - 40px) / 4.5) !important;
    min-height: 120px !important;
    max-height: 170px !important;
  }
  .fault-list.is-many .fault-card__content {
    padding: 8px 10px !important;
  }
  .fault-list.is-many .fault-card__title h3 {
    font-size: 16px !important;
  }
  .fault-list.is-many .fault-card__title .fault-rule {
    font-size: 11.8px !important;
    line-height: 1.25 !important;
  }
  .fault-list.is-many .fault-lore__text {
    -webkit-line-clamp: 3 !important;
    max-height: 46px !important;
    font-size: 11.5px !important;
    line-height: 1.3 !important;
  }
  .fault-list.is-many .fault-lore__echo {
    display: none !important;
  }
}

/* v4.0.1b — 4 cards fill the panel; 5+ scroll with half of the 5th visible */
@media (min-width: 1001px) {
  .fault-list.is-count-3.is-many {
    --fault-row: clamp(136px, 17.4vh, 156px);
    gap: 10px !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
  }
  .fault-list.is-count-3.is-many:not(.is-overflow) {
    height: calc(var(--fault-row) * 4 + 30px) !important;
    min-height: calc(var(--fault-row) * 4 + 30px) !important;
    max-height: calc(var(--fault-row) * 4 + 30px) !important;
  }
  .fault-list.is-count-3.is-many.is-overflow {
    height: calc(var(--fault-row) * 4.5 + 40px) !important;
    min-height: calc(var(--fault-row) * 4.5 + 40px) !important;
    max-height: calc(var(--fault-row) * 4.5 + 40px) !important;
  }
  .fault-list.is-count-3.is-many .fault-card {
    flex: 0 0 var(--fault-row) !important;
    height: var(--fault-row) !important;
    min-height: var(--fault-row) !important;
    max-height: var(--fault-row) !important;
  }
  .fault-list.is-count-3.is-many .fault-card__title h3 {
    font-size: 16px !important;
  }
  .fault-list.is-count-3.is-many .fault-card__title .fault-rule {
    font-size: 12px !important;
  }
  .fault-list.is-count-3.is-many .fault-lore__text {
    -webkit-line-clamp: 3 !important;
    max-height: 47px !important;
    font-size: 11.6px !important;
    line-height: 1.32 !important;
  }
  .fault-list.is-count-3.is-many .fault-lore__echo {
    display: none !important;
  }
  .fault-list.is-count-3.is-many .fault-title__duration {
    height: 19px;
    padding: 0 8px;
    font-size: 9.5px;
  }
}
@media (min-width: 1001px) {
  body.many-faults .app-shell {
    height: auto !important;
    min-height: 100dvh;
    grid-template-rows: auto auto 148px;
  }
  body.many-faults .layout {
    min-height: 0;
    align-items: start;
  }
  body.many-faults .board {
    min-height: 0;
  }
  body.many-faults .fault-list.is-many {
    height: 650px !important;
    max-height: 650px !important;
    overflow-y: auto !important;
  }
  body.many-faults .fault-list.is-many.is-five {
    height: 740px !important;
    max-height: 740px !important;
  }
  body.many-faults .fault-list.is-many .fault-card {
    flex: 0 0 155px !important;
    min-height: 155px !important;
    max-height: 155px !important;
  }
  body.many-faults .fault-list.is-many .fault-lore__text {
    -webkit-line-clamp: 3 !important;
    max-height: 47px !important;
  }
}
@media (min-width: 1001px) {
  body.many-faults .fault-list.is-many .fault-lore__text {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    max-height: 31px !important;
    overflow: hidden !important;
  }
}

/* v4.0.2 — 3-fault lore parity, glyph clearance, full-height right rail */
@media (min-width: 1001px) {
  .fault-list.is-count-3:not(.is-many) .fault-lore__text {
    font-size: 12.4px !important;
    line-height: 1.3 !important;
    max-height: 49px !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
  }
  .fault-list.is-count-3 .fault-card__main,
  .fault-list.is-many .fault-card__main {
    position: relative;
  }
  .fault-list.is-count-3 .fault-glyph,
  .fault-list.is-many .fault-glyph {
    display: none !important;
  }
  body.many-faults .layout {
    align-items: stretch !important;
  }
  body.many-faults .hand-panel {
    height: 100% !important;
  }
}

/* v4.0.3 — softer screen glitch, no black edge flash; Cyberpunk title cuts. */
  body.is-glitching .app-shell {
    animation: glitchEdge 0.28s steps(2) both !important;
  }

  body.is-glitching .screen-fx__scanlines {
    opacity: 0.32 !important;
    animation: scanKick 0.26s steps(1) both !important;
  }

  @keyframes glitchEdge {
    0%, 100% {
      box-shadow: none;
    }
    30% {
      box-shadow:
        inset 0 0 0 2px rgba(255, 45, 141, 0.2),
        inset 0 0 90px rgba(0, 229, 255, 0.07);
    }
    62% {
      box-shadow:
        inset 0 0 0 1px rgba(0, 229, 255, 0.22),
        inset 0 0 70px rgba(255, 45, 141, 0.05);
    }
  }

  .cyber-title {
    position: relative;
    display: inline-block;
    isolation: isolate;
  }

  .cyber-title::before,
  .cyber-title::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    white-space: nowrap;
  }

  .cyber-title.is-cyber-glitching::before {
    color: #ff2d8d;
    text-shadow: 2px 0 #00eaff, -2px 0 #ffe66d;
    mix-blend-mode: screen;
    animation: cyberSliceA 0.95s steps(1) both;
  }

  .cyber-title.is-cyber-glitching::after {
    color: #00eaff;
    text-shadow: -2px 0 #ff2d8d, 2px 0 #ffe66d;
    mix-blend-mode: screen;
    animation: cyberSliceB 0.95s steps(1) both;
  }

  @keyframes cyberSliceA {
    0%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate(0); }
    5% { opacity: 0.85; clip-path: inset(6% 0 66% 0); transform: translate(-5px, -1px); }
    11% { opacity: 0.4; clip-path: inset(42% 0 34% 0); transform: translate(4px, 1px); }
    20% { opacity: 0.8; clip-path: inset(72% 0 7% 0); transform: translate(-7px, 0); }
    31% { opacity: 0.15; clip-path: inset(17% 0 58% 0); transform: translate(2px, -2px); }
    48% { opacity: 0.7; clip-path: inset(55% 0 18% 0); transform: translate(-3px, 1px); }
    64% { opacity: 0.25; clip-path: inset(24% 0 48% 0); transform: translate(5px, -1px); }
    80% { opacity: 0.45; clip-path: inset(8% 0 74% 0); transform: translate(-2px, 0); }
  }

  @keyframes cyberSliceB {
    0%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate(0); }
    7% { opacity: 0.35; clip-path: inset(54% 0 22% 0); transform: translate(5px, 1px); }
    15% { opacity: 0.8; clip-path: inset(13% 0 60% 0); transform: translate(-4px, -1px); }
    26% { opacity: 0.2; clip-path: inset(80% 0 4% 0); transform: translate(3px, 0); }
    40% { opacity: 0.65; clip-path: inset(33% 0 44% 0); transform: translate(-6px, 1px); }
    57% { opacity: 0.18; clip-path: inset(62% 0 12% 0); transform: translate(2px, -1px); }
    75% { opacity: 0.5; clip-path: inset(4% 0 78% 0); transform: translate(-3px, 0); }
  }

  @media (prefers-reduced-motion: reduce) {
    body.is-glitching .app-shell { animation: none !important; }
    .cyber-title.is-cyber-glitching::before,
    .cyber-title.is-cyber-glitching::after { animation: none; opacity: 0; }
  }

/* v4.0.4 — duration is important state: permanent gets a large, high-contrast badge */
.fault-title__duration {
  height: 24px !important;
  padding: 0 9px !important;
  border: 1px solid color-mix(in srgb, var(--fault-accent, #e8c27a) 78%, transparent) !important;
  background: color-mix(in srgb, var(--fault-accent, #e8c27a) 18%, rgba(4, 10, 12, .9)) !important;
  color: #ffe6b5 !important;
  font: 800 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace !important;
  letter-spacing: .04em !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .3),
    0 0 12px color-mix(in srgb, var(--fault-accent, #e8c27a) 30%, transparent) !important;
}
.fault-title__duration.is-permanent {
  border: 1.5px solid #ffd27a !important;
  background: linear-gradient(180deg, rgba(255, 202, 106, .3), rgba(77, 44, 8, .88)) !important;
  color: #fff1c9 !important;
  font-size: 12.5px !important;
  padding: 0 10px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 240, 190, .22),
    0 0 18px rgba(255, 190, 82, .45),
    0 0 0 1px rgba(255, 210, 122, .3) !important;
  animation: durationPulse 2.8s ease-in-out infinite;
}
.fault-title__duration-label {
  font-size: 11.5px;
  letter-spacing: .12em;
}
.fault-title__duration-infinity {
  margin-left: 3px;
  color: #fff6d6;
  font-size: 20px;
  font-weight: 900;
  line-height: .8;
  text-shadow: 0 0 10px rgba(255, 220, 130, .85);
}
@keyframes durationPulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 240, 190, .22), 0 0 14px rgba(255, 190, 82, .35), 0 0 0 1px rgba(255, 210, 122, .24); }
  50% { box-shadow: inset 0 0 0 1px rgba(255, 240, 190, .34), 0 0 24px rgba(255, 195, 85, .62), 0 0 0 1px rgba(255, 210, 122, .4); }
}
@media (max-width: 1000px) {
  .fault-title__duration { height: 22px !important; padding: 0 7px !important; font-size: 11.5px !important; }
  .fault-title__duration.is-permanent { font-size: 12px !important; padding: 0 8px !important; }
  .fault-title__duration-label { font-size: 10.5px; }
  .fault-title__duration-infinity { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .fault-title__duration.is-permanent { animation: none !important; }
}

/* keep the large duration badge from squeezing the fault title into an ellipsis */
.fault-title__line {
  flex: 1 1 58% !important;
  min-width: 0 !important;
}
.fault-title__line h3 {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.fault-card__title .fault-rule {
  flex: 1 1 42% !important;
  min-width: 0 !important;
}

/* v4.0.5 — per-fault Cyberpunk title corruption (each title gets its own rhythm) */
.fault-title__text {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.fault-title__text::before,
.fault-title__text::after {
  content: attr(data-title);
  position: absolute;
  inset: 0;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
}
.fault-title__text {
  text-shadow: 1px 0 rgba(255, 79, 216, .20), -1px 0 rgba(98, 245, 255, .20);
}
.fault-title__text.g0::before { color: #ff4fd8; animation: titleChaosA 3.4s steps(2, end) infinite; }
.fault-title__text.g0::after  { color: #62f5ff; animation: titleChaosB 4.2s steps(2, end) infinite; animation-delay: -1.1s; }
.fault-title__text.g1::before { color: #f5e663; animation: titleChaosB 3.8s steps(2, end) infinite; animation-delay: -.6s; }
.fault-title__text.g1::after  { color: #ff4fd8; animation: titleChaosC 4.6s steps(2, end) infinite; animation-delay: -2.2s; }
.fault-title__text.g2::before { color: #62f5ff; animation: titleChaosC 3.2s steps(2, end) infinite; animation-delay: -1.7s; }
.fault-title__text.g2::after  { color: #ff7a9e; animation: titleChaosD 4.0s steps(2, end) infinite; animation-delay: -.8s; }
.fault-title__text.g3::before { color: #ff7a9e; animation: titleChaosD 3.6s steps(2, end) infinite; animation-delay: -2.6s; }
.fault-title__text.g3::after  { color: #f5e663; animation: titleChaosE 4.4s steps(2, end) infinite; animation-delay: -1.4s; }
.fault-title__text.g4::before { color: #f5e663; animation: titleChaosE 4.8s steps(2, end) infinite; animation-delay: -3.3s; }
.fault-title__text.g4::after  { color: #62f5ff; animation: titleChaosF 3.5s steps(2, end) infinite; animation-delay: -.4s; }
.fault-title__text.g5::before { color: #ff4fd8; animation: titleChaosF 3.9s steps(2, end) infinite; animation-delay: -1.9s; }
.fault-title__text.g5::after  { color: #c9a3ff; animation: titleChaosA 4.1s steps(2, end) infinite; animation-delay: -2.8s; }

@keyframes titleChaosA {
  0%, 64%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  66% { opacity: .92; transform: translate(-3px, -1px); clip-path: inset(0 0 56% 0); }
  69% { opacity: .85; transform: translate(2px, 1px); clip-path: inset(61% 0 0 0); }
  72% { opacity: .7; transform: translate(-1px, 0); clip-path: inset(28% 0 30% 0); }
  75% { opacity: 0; }
}
@keyframes titleChaosB {
  0%, 48%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  50% { opacity: .8; transform: translate(2px, 0); clip-path: inset(36% 0 0 0); }
  53% { opacity: .95; transform: translate(-2px, -1px); clip-path: inset(0 0 62% 0); }
  56% { opacity: .65; transform: translate(3px, 1px); clip-path: inset(66% 0 0 0); }
  59% { opacity: 0; }
}
@keyframes titleChaosC {
  0%, 78%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  80% { opacity: .8; transform: translate(-2px, 1px); clip-path: inset(52% 0 0 0); }
  83% { opacity: .9; transform: translate(2px, -1px); clip-path: inset(0 0 50% 0); }
  86% { opacity: .55; transform: translate(-3px, 0); clip-path: inset(22% 0 42% 0); }
  89% { opacity: 0; }
}
@keyframes titleChaosD {
  0%, 41%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  43% { opacity: .95; transform: translate(3px, -1px); clip-path: inset(12% 0 64% 0); }
  46% { opacity: .7; transform: translate(-3px, 1px); clip-path: inset(64% 0 8% 0); }
  49% { opacity: .85; transform: translate(1px, 0); clip-path: inset(40% 0 40% 0); }
  52% { opacity: 0; }
}
@keyframes titleChaosE {
  0%, 86%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  88% { opacity: .9; transform: translate(-4px, 0); clip-path: inset(0 0 52% 0); }
  91% { opacity: .65; transform: translate(4px, 1px); clip-path: inset(58% 0 0 0); }
  94% { opacity: .45; transform: translate(-1px, -1px); clip-path: inset(30% 0 46% 0); }
  97% { opacity: 0; }
}
@keyframes titleChaosF {
  0%, 22%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  24% { opacity: .8; transform: translate(2px, 1px); clip-path: inset(0 0 70% 0); }
  27% { opacity: .95; transform: translate(-4px, -1px); clip-path: inset(70% 0 0 0); }
  30% { opacity: .6; transform: translate(0, 1px); clip-path: inset(44% 0 38% 0); }
  33% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fault-title__text { text-shadow: none; }
  .fault-title__text::before,
  .fault-title__text::after { animation: none !important; }
}
.fault-card__title .fault-title__text {
  text-shadow:
    1px 0 rgba(255, 79, 216, .55),
    -1px 0 rgba(98, 245, 255, .55),
    0 1px 6px rgba(0, 0, 0, .65) !important;
}
.fault-card__title .fault-title__text::before,
.fault-card__title .fault-title__text::after {
  animation-duration: 2.6s !important;
}
@media (prefers-reduced-motion: reduce) {
  .fault-card__title .fault-title__text { text-shadow: none !important; }
}

/* v4.0.6 — calmer screen effects + cyber titles on every hand card */
.screen-fx__scanlines {
  opacity: 0.14 !important;
}
body.is-glitching .app-shell {
  animation: none !important;
  transform: none !important;
}
body.is-glitching .screen-fx__scanlines {
  opacity: 0.24 !important;
  animation: none !important;
}
body.is-glitching .screen-fx__noise {
  opacity: 0.035 !important;
}
.cast-glitch {
  animation-duration: 0.34s !important;
}
.cast-glitch::after {
  opacity: 0.32 !important;
}

.patch-card h4.card-title-glitch {
  position: relative;
  color: var(--card-accent);
  text-shadow:
    1px 0 rgba(255, 79, 216, 0.3),
    -1px 0 rgba(98, 245, 255, 0.3);
}
.patch-card h4.card-title-glitch::before,
.patch-card h4.card-title-glitch::after {
  content: attr(data-title);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  white-space: pre;
  clip-path: inset(0 0 100% 0);
}
.patch-card h4.card-title-glitch::before {
  color: #ff4fd8;
  text-shadow: 1px 0 rgba(255, 79, 216, 0.7);
  animation: handTitleGlitchA 9.5s steps(1, end) infinite;
  animation-delay: var(--card-glitch-delay, 0s);
}
.patch-card h4.card-title-glitch::after {
  color: #62f5ff;
  text-shadow: -1px 0 rgba(98, 245, 255, 0.7);
  animation: handTitleGlitchB 11.3s steps(1, end) infinite;
  animation-delay: calc(var(--card-glitch-delay, 0s) + 1.7s);
}
.patch-card.is-fault h4.card-title-glitch::before {
  color: #ff9a90;
}
.patch-card.is-fault h4.card-title-glitch::after {
  color: #ffcf6a;
}
@keyframes handTitleGlitchA {
  0%, 88%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  89% { opacity: 0.8; transform: translate(-2px, 0); clip-path: inset(16% 0 54% 0); }
  90% { opacity: 0.7; transform: translate(2px, 0); clip-path: inset(58% 0 18% 0); }
  91% { opacity: 0.55; transform: translate(-1px, 0); clip-path: inset(34% 0 36% 0); }
  92% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
}
@keyframes handTitleGlitchB {
  0%, 90%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  91% { opacity: 0.65; transform: translate(2px, 0); clip-path: inset(42% 0 26% 0); }
  92% { opacity: 0.5; transform: translate(-2px, 0); clip-path: inset(10% 0 66% 0); }
  93% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
}
@media (prefers-reduced-motion: reduce) {
  .patch-card h4.card-title-glitch::before,
  .patch-card h4.card-title-glitch::after {
    animation: none !important;
    opacity: 0 !important;
  }
  .patch-card h4.card-title-glitch { text-shadow: none; }
}

/* v4.0.8 — room atmosphere: slow volumetric fog + sweeping shaft light */
.world-bg__room .room__fog{position:absolute;inset:-18% -12%;display:block;pointer-events:none;background:radial-gradient(ellipse at 50% 82%,rgba(86,255,183,.16),transparent 62%),radial-gradient(ellipse at 18% 62%,rgba(80,200,255,.10),transparent 58%),radial-gradient(ellipse at 82% 38%,rgba(255,170,90,.08),transparent 60%);filter:blur(20px);opacity:.6;transform:translateZ(-160px) scale(1.32);animation:roomFog 24s ease-in-out infinite alternate}
.world-bg__room .room__beam{position:absolute;left:50%;top:-24%;display:block;width:54vw;height:112vh;pointer-events:none;transform-origin:50% 0;transform:translateX(-50%) rotate(calc(var(--room-px,0) * 5deg)) translateZ(-40px);background:conic-gradient(from 180deg at 50% 0,rgba(120,255,210,0) 0deg,rgba(120,255,210,.16) 14deg,rgba(120,255,210,.02) 24deg,rgba(120,255,210,0) 36deg);filter:blur(16px);mix-blend-mode:screen;opacity:.36;animation:roomBeam 18s ease-in-out infinite alternate}
.world-bg__room .room__fog::before,.world-bg__room .room__beam::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 7px);opacity:.3}
@keyframes roomFog{0%{opacity:.4;transform:translateZ(-160px) scale(1.28) translate3d(calc(var(--room-px,0) * -10px),0,0)}100%{opacity:.66;transform:translateZ(-160px) scale(1.36) translate3d(calc(var(--room-px,0) * 10px),calc(var(--room-py,0) * -6px),0)}}
@keyframes roomBeam{0%{opacity:.24;transform:translateX(-50%) rotate(calc(var(--room-px,0) * 5deg - 2deg)) translateZ(-40px)}100%{opacity:.42;transform:translateX(-50%) rotate(calc(var(--room-px,0) * 5deg + 3deg)) translateZ(-40px)}}
@media (prefers-reduced-motion:reduce){.world-bg__room .room__fog,.world-bg__room .room__beam{animation:none}}

/* v4.0.9 — room tint follows the dominant fault tone */
body{--room-a:rgba(86,255,183,.16);--room-b:rgba(80,200,255,.10);--room-c:rgba(255,170,90,.08)}
body[data-fault-tone="power"]{--room-a:rgba(75,185,255,.20);--room-b:rgba(110,245,255,.12);--room-c:rgba(80,130,255,.08)}
body[data-fault-tone="food"]{--room-a:rgba(255,182,96,.18);--room-b:rgba(220,245,140,.09);--room-c:rgba(255,120,70,.08)}
body[data-fault-tone="defense"]{--room-a:rgba(150,180,255,.18);--room-b:rgba(190,210,255,.09);--room-c:rgba(92,120,255,.08)}
body[data-fault-tone="core"]{--room-a:rgba(255,92,190,.17);--room-b:rgba(255,80,120,.10);--room-c:rgba(160,80,255,.08)}
body[data-fault-tone="stability"]{--room-a:rgba(140,255,170,.17);--room-b:rgba(255,230,130,.09);--room-c:rgba(90,190,255,.08)}
.world-bg__room .room__fog{background:radial-gradient(ellipse at 50% 82%,var(--room-a),transparent 62%),radial-gradient(ellipse at 18% 62%,var(--room-b),transparent 58%),radial-gradient(ellipse at 82% 38%,var(--room-c),transparent 60%)!important}
.world-bg__room .room__beam{background:conic-gradient(from 180deg at 50% 0,transparent 0deg,var(--room-b) 14deg,rgba(120,255,210,.02) 24deg,transparent 36deg)!important}

/* v4.0.11: 3D room parallax */
.room__stage{transform:perspective(1100px) rotateX(var(--room-rx,0deg)) rotateY(var(--room-ry,0deg)) translateZ(0);transition:transform .45s cubic-bezier(.2,.8,.2,1);will-change:transform}
@media (prefers-reduced-motion: reduce){.room__stage{transform:none!important}}

/* v4.0.11: room parallax on actual wrapper */
.world-bg__room{transform:perspective(1100px) rotateX(var(--room-rx,0deg)) rotateY(var(--room-ry,0deg)) translateZ(0);transition:transform .45s cubic-bezier(.2,.8,.2,1);will-change:transform}
@media (prefers-reduced-motion: reduce){.world-bg__room{transform:none!important}}

/* v4.0.12: patch duration clarity */
.bay-timer{font-size:9.5px!important;letter-spacing:.4px!important;color:#d8e3cf!important}
.bay-patch.is-expiring .bay-timer{color:#ffd27a!important;text-shadow:0 0 8px rgba(255,196,90,.35)!important}

/* v4.0.13: lift the shelter mural and 3D room out of the black */
.world-bg__image{opacity:.70!important;filter:saturate(1.05) contrast(1.12) brightness(.88)!important}
.world-bg__room{opacity:.86!important}
.room__wall{border-color:rgba(118,212,224,.22)!important;background:linear-gradient(90deg,transparent 0 9%,rgba(104,221,234,.10) 9.1% 9.25%,transparent 9.35% 90.6%,rgba(104,221,234,.10) 90.7% 90.85%,transparent 91%),linear-gradient(180deg,rgba(20,52,58,.5),rgba(4,14,18,.12))!important;box-shadow:inset 0 0 90px rgba(55,173,190,.14)!important}
.room__ribs{opacity:.9!important;filter:drop-shadow(0 0 10px rgba(86,222,236,.12))!important}

/* v4.0.14: mobile typography floor */
@media (max-width: 760px){
  .micro-label{font-size:9px!important;letter-spacing:.08em!important}
  .threat-mini,.status-chip,.resource-card__index,.fault-code,.fault-sev,.fault-card__status,.count-badge,.bay-empty__index{font-size:9px!important}
  .fault-rule__chips{font-size:9.2px!important}
  .bay-empty{font-size:8.5px!important}
  .mother-card__status{font-size:8.5px!important}
}

/* v4.0.14: mobile fault dossier is a readable stacked card, not a grid with an empty column */
@media (max-width: 760px){
  .fault-list .fault-card{height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important}
  .fault-list .fault-card__main{display:block!important;position:relative!important;inset:auto!important;height:auto!important;min-height:0!important;padding:0!important}
  .fault-list .fault-card__content{display:block!important;width:100%!important;height:auto!important;padding:9px 11px 8px!important;background:none!important}
  .fault-list .fault-card__title{position:relative!important;inset:auto!important;width:100%!important;max-width:none!important;padding:8px 10px!important;background:linear-gradient(90deg,rgba(3,12,17,.95),rgba(3,12,17,.55))!important}
  .fault-list .fault-card__title h3{font-size:19px!important}
  .fault-list .fault-card__title .fault-rule{display:block!important;flex:none!important;width:100%!important;margin-top:4px!important;font-size:14px!important;white-space:normal!important}
  .fault-list .fault-lore{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;margin-top:6px!important;padding:8px 10px!important;border-left:2px solid color-mix(in srgb,var(--fault-accent,#e8c27a) 55%,transparent)!important;background:rgba(4,13,12,.72)!important}
  .fault-list .fault-lore__text{display:block!important;font-size:13px!important;line-height:1.5!important;max-height:none!important;-webkit-line-clamp:unset!important;overflow:visible!important}
  .fault-list .fault-lore__echo{display:block!important;font-size:11px!important;margin-top:6px!important}
  .fault-list .fault-card__schematic{display:none!important}
  .fault-list .fault-card__top{padding:7px 10px 5px!important}
}

/* v4.0.15: mobile hand-card / log label floor */
@media (max-width: 760px){
  .patch-card__top,.patch-code,.patch-card__top span,.cost-badge,.patch-card__foot,.patch-card__life,.cover-cta,.ap-cost,.log-day,.end-day-btn__sub,.threat-breach,.board-core__label,.fault-card__top,.micro-label,kbd,.rec{font-size:9px!important;line-height:1.2!important}
  .cost-badge{min-width:28px!important;height:17px!important;padding:0 5px!important}
  .patch-card__top,.patch-card__foot{letter-spacing:.02em!important}
}

/* v4.0.16: volumetric embers in the room */
.room__embers{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2;opacity:.62;mix-blend-mode:screen}
.room__embers i{position:absolute;bottom:-8px;width:2px;height:2px;border-radius:50%;background:radial-gradient(circle,#d9fdff 0 18%,rgba(102,228,242,.5) 58%,transparent 72%);box-shadow:0 0 9px rgba(102,228,242,.6);animation:emberRise var(--dur,20s) linear infinite;animation-delay:var(--delay,0s);opacity:0}
.room__embers i:nth-child(1){left:6%;--dx:18px;--delay:-2s;--dur:17s}
.room__embers i:nth-child(2){left:13%;--dx:-10px;--delay:-7s;--dur:23s;width:3px;height:3px}
.room__embers i:nth-child(3){left:21%;--dx:24px;--delay:-4s;--dur:19s}
.room__embers i:nth-child(4){left:29%;--dx:-14px;--delay:-11s;--dur:25s}
.room__embers i:nth-child(5){left:37%;--dx:12px;--delay:-1s;--dur:21s}
.room__embers i:nth-child(6){left:44%;--dx:-22px;--delay:-8s;--dur:18s;width:3px;height:3px}
.room__embers i:nth-child(7){left:52%;--dx:16px;--delay:-5s;--dur:24s}
.room__embers i:nth-child(8){left:60%;--dx:-12px;--delay:-12s;--dur:20s}
.room__embers i:nth-child(9){left:68%;--dx:20px;--delay:-3s;--dur:22s}
.room__embers i:nth-child(10){left:76%;--dx:-16px;--delay:-9s;--dur:18s;width:3px;height:3px}
.room__embers i:nth-child(11){left:84%;--dx:10px;--delay:-6s;--dur:26s}
.room__embers i:nth-child(12){left:91%;--dx:-20px;--delay:-13s;--dur:21s}
.room__embers i:nth-child(13){left:96%;--dx:8px;--delay:-10s;--dur:23s}
.room__embers i:nth-child(14){left:50%;--dx:26px;--delay:-15s;--dur:27s;width:3px;height:3px}
@keyframes emberRise{0%{transform:translate3d(0,0,0);opacity:0}8%{opacity:.6}70%{opacity:.35}100%{transform:translate3d(var(--dx,10px),-108vh,0);opacity:0}}
@media (prefers-reduced-motion: reduce){.room__embers{display:none}}

/* v4.0.16b: embers above scrim */
.world-bg > .room__embers{opacity:.82!important;z-index:1!important}
.world-bg > .room__embers i{width:3px;height:3px;box-shadow:0 0 12px rgba(120,236,248,.8)!important}

/* v4.0.16c: live scanline inside the fault scene */
.fault-schematic.is-scene{overflow:hidden;box-shadow:inset 0 0 80px rgba(38,173,188,.10)}
.fault-schematic.is-scene::after{content:"";position:absolute;inset:-1px;background:linear-gradient(180deg,transparent 0 44%,rgba(110,236,248,.02) 46%,rgba(110,236,248,.18) 49.6%,rgba(196,255,255,.34) 50%,rgba(110,236,248,.16) 50.6%,transparent 54% 100%);background-size:100% 220%;animation:sceneScan 9s linear infinite;mix-blend-mode:screen;pointer-events:none;opacity:.7}
@keyframes sceneScan{0%{background-position:0 -120%}100%{background-position:0 220%}}
@media (prefers-reduced-motion: reduce){.fault-schematic.is-scene::after{animation:none;opacity:.18}}

/* v4.0.16d: scene scanline (correct wrapper) */
.fault-card__schematic{overflow:hidden;box-shadow:inset 0 0 80px rgba(38,173,188,.12)}
.fault-card__schematic::after{content:"";position:absolute;inset:-1px;background:linear-gradient(180deg,transparent 0 43%,rgba(110,236,248,.02) 46%,rgba(110,236,248,.20) 49.5%,rgba(210,255,255,.38) 50%,rgba(110,236,248,.18) 50.6%,transparent 54% 100%);background-size:100% 220%;animation:sceneScan 8.5s linear infinite;mix-blend-mode:screen;pointer-events:none;opacity:.75}

/* v4.0.17: background depth + visibility */
.world-bg__image{opacity:.78!important;filter:saturate(1.08) contrast(1.16) brightness(.92)!important;transform:scale(1.06) translate3d(var(--bg-px,0px),var(--bg-py,0px),0)!important;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion: reduce){.world-bg__image{transform:scale(1.06)!important;transition:none!important}}

/* v4.0.17b: room aura + floor grid */
.world-bg__aura{position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(ellipse 70% 55% at 50% 38%,rgba(52,192,214,.16),transparent 66%),radial-gradient(ellipse 38% 50% at 12% 80%,rgba(255,150,58,.10),transparent 72%),repeating-linear-gradient(90deg,transparent 0 119px,rgba(80,210,230,.045) 120px 121px),repeating-linear-gradient(0deg,transparent 0 79px,rgba(80,210,230,.035) 80px 81px);mix-blend-mode:screen;opacity:.9;z-index:2}
@media (prefers-reduced-motion: reduce){.world-bg__aura{opacity:.7}}

/* v4.0.17c: stronger aura */
.world-bg__aura{z-index:6!important;opacity:1!important;background-image:radial-gradient(ellipse 62% 48% at 50% 38%,rgba(52,205,228,.38),rgba(18,90,110,.16) 55%,transparent 72%),radial-gradient(ellipse 34% 44% at 12% 82%,rgba(255,154,64,.20),transparent 70%),radial-gradient(ellipse 28% 38% at 88% 20%,rgba(140,90,255,.14),transparent 72%),repeating-linear-gradient(90deg,transparent 0 119px,rgba(100,220,240,.08) 120px 121px),repeating-linear-gradient(0deg,transparent 0 79px,rgba(100,220,240,.06) 80px 81px)!important;mix-blend-mode:screen!important}

/* v4.0.17d: lift the shelter background through the scrim */
.world-bg__scrim{opacity:.52!important}
.world-bg__vignette{opacity:.55!important}
.world-bg__image{opacity:.9!important}

/* v4.0.17e: brighter room base so gaps read as space, not black */
.world-bg{background:radial-gradient(ellipse 72% 62% at 50% 34%,#0a2b33 0%,#071a21 46%,#03090d 100%)!important}
.world-bg__scrim{opacity:.42!important}
.world-bg__image{opacity:.95!important}

/* v4.0.17f: page-level aura above the whole world-bg stack, below UI */
.page-aura{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.85;mix-blend-mode:screen;
background:
 radial-gradient(54% 42% at 50% 43%,rgba(40,210,230,.30),rgba(15,100,130,.16) 44%,transparent 70%),
 radial-gradient(34% 30% at 12% 16%,rgba(255,170,60,.16),transparent 70%),
 radial-gradient(32% 28% at 88% 12%,rgba(170,80,255,.13),transparent 70%),
 repeating-linear-gradient(0deg,transparent 0 4px,rgba(100,230,255,.035) 4px 5px),
 linear-gradient(90deg,transparent 0 49.8%,rgba(120,240,255,.18) 50%,transparent 50.2%)}
.app-shell{position:relative;z-index:1}

/* v4.0.17g: let the teal room base through instead of the black photo */
.world-bg__image{opacity:.32!important}
.world-bg__scrim{opacity:.18!important}
.world-bg{background:radial-gradient(ellipse 70% 60% at 50% 36%,#0e3b46 0%,#08222b 48%,#041016 100%)!important}

/* v4.0.18 — concrete shelter interior visible through the panels */
.board,
.vitals-panel,
.hand-panel,
.log-panel,
.patch-bay {
  background-color: rgba(3, 13, 17, 0.55) !important;
  background-image:
    url("assets/ui-shelter-interior.svg"),
    radial-gradient(120% 90% at 70% 20%, rgba(25, 86, 96, 0.22), transparent 58%),
    linear-gradient(180deg, rgba(6, 27, 34, 0.84), rgba(2, 11, 15, 0.92)) !important;
  background-size: cover, cover, cover !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-blend-mode: screen, screen, normal !important;
}

.board::before,
.vitals-panel::before,
.hand-panel::before,
.log-panel::before,
.patch-bay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: url("assets/ui-shelter-interior.svg") center / cover no-repeat;
  opacity: 0.22;
  mix-blend-mode: screen;
}

.board > *,
.vitals-panel > *,
.hand-panel > *,
.log-panel > *,
.patch-bay > * {
  position: relative;
  z-index: 1;
}

.vitals-panel .resource-card,
.hand-panel .patch-card,
.board .fault-card {
  box-shadow: inset 0 0 0 1px rgba(112, 224, 234, 0.08), 0 12px 28px rgba(0, 0, 0, 0.3);
}
/* v4.0.18b — let the shelter interior and aura read through the panels */
.page-aura { opacity: 1 !important; }
.board,
.vitals-panel,
.hand-panel,
.log-panel,
.patch-bay {
  background-image:
    url("assets/ui-shelter-interior.svg"),
    radial-gradient(120% 90% at 72% 18%, rgba(39, 132, 142, 0.28), transparent 62%),
    linear-gradient(180deg, rgba(6, 27, 34, 0.66), rgba(2, 11, 15, 0.82)) !important;
  box-shadow:
    inset 0 0 80px rgba(40, 190, 210, 0.07),
    inset 0 0 0 1px rgba(105, 223, 233, 0.1),
    0 18px 50px rgba(0, 0, 0, 0.34) !important;
}
.world-bg__image { opacity: 0.82 !important; filter: saturate(1.18) contrast(1.08) brightness(0.94) !important; }
/* v4.0.18c — corridor rails at the viewport edges */
body::before,
body::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: 16px;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 8px 20px, rgba(170, 250, 255, 0.55) 0 1.5px, transparent 2px),
    radial-gradient(circle at 8px 20px, rgba(90, 210, 225, 0.16) 0 8px, transparent 9px),
    repeating-linear-gradient(180deg, rgba(72, 178, 190, 0.22) 0 2px, transparent 2px 64px),
    linear-gradient(90deg, rgba(4, 17, 21, 0.95), rgba(12, 48, 55, 0.5));
  background-size: 16px 64px, 16px 64px, 16px 64px, 100% 100%;
  box-shadow: inset 0 0 18px rgba(55, 190, 205, 0.18);
  opacity: 0.9;
}
body::before { left: 0; border-right: 1px solid rgba(120, 230, 240, 0.14); }
body::after { right: 0; border-left: 1px solid rgba(120, 230, 240, 0.14); }

/* v4.0.19 day-phase lighting */
.world-bg__room, .world-bg__aura { transition: filter 1.1s ease, opacity 1.1s ease; }
body[data-phase="late"] .world-bg__aura {
  background:
    radial-gradient(42% 48% at 24% 58%, rgba(255,164,64,.18), transparent 62%),
    radial-gradient(38% 52% at 78% 42%, rgba(54,196,215,.20), transparent 64%),
    radial-gradient(30% 40% at 52% 72%, rgba(255,88,52,.10), transparent 70%);
  filter: hue-rotate(-18deg) saturate(1.15);
  opacity: .88;
}
body[data-phase="late"] .world-bg__room { filter: brightness(.84) sepia(.14); }
body[data-phase="night"] .world-bg__aura {
  background:
    radial-gradient(44% 52% at 22% 60%, rgba(255,64,72,.14), transparent 64%),
    radial-gradient(40% 50% at 76% 40%, rgba(58,112,255,.16), transparent 66%),
    radial-gradient(26% 34% at 50% 78%, rgba(255,196,80,.09), transparent 70%);
  filter: hue-rotate(22deg) saturate(.9);
  opacity: .68;
}
body[data-phase="night"] .world-bg__room { filter: brightness(.58) saturate(.82); }
body[data-phase="night"] .page-aura { opacity: .52; }

/* v4.0.20 background art lift */
.board::before,
.vitals-panel::before,
.hand-panel::before,
.log-panel::before,
.patch-bay::before {
  opacity: .62 !important;
  filter: saturate(1.25) brightness(1.18);
}
.world-bg__image {
  opacity: .82 !important;
  filter: saturate(1.12) contrast(1.08) brightness(1.02) !important;
}
.world-bg__scrim { opacity: .55 !important; }
.page-aura::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 44%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(111,247,255,.55), rgba(240,180,90,.35), transparent);
  box-shadow: 0 0 28px rgba(85,225,255,.5);
  opacity: .55;
  pointer-events: none;
}

/* v4.0.21 — deeper shelter reveal */
.board,
.vitals-panel,
.hand-panel,
.log-panel,
.patch-bay {
  background-image:
    url("assets/ui-shelter-interior.svg"),
    linear-gradient(180deg, rgba(3,13,17,.50), rgba(3,13,17,.46)) !important;
  background-size: 860px auto, 100% 100% !important;
  background-position: center bottom, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-blend-mode: screen, normal !important;
  box-shadow:
    inset 0 0 0 1px rgba(111,247,255,.10),
    inset 0 0 110px rgba(0,0,0,.30) !important;
}

.world-bg__image {
  opacity: .86 !important;
  filter: saturate(1.16) contrast(1.20) brightness(.94) !important;
}

.world-bg__scrim { opacity: .50 !important; }

body { }
/* v4.0.22 — reactor light above world, below panels */
.page-aura {
  z-index: 1 !important;
  opacity: 1 !important;
}
.app-shell {
  position: relative;
  z-index: 2 !important;
}
.page-aura::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse at 50% 56%, rgba(84,230,255,.20), transparent 36%),
    radial-gradient(ellipse at 50% 12%, rgba(255,176,92,.14), transparent 30%),
    linear-gradient(90deg, transparent 0 10%, rgba(40,150,170,.08) 10% 10.6%, transparent 10.6% 89.4%, rgba(40,150,170,.08) 89.4% 90%, transparent 90%);
}

/* v4.0.23 facility backdrop */
.world-bg__image--base{
  background-image:url("assets/shelter-facility.svg")!important;
  opacity:.88!important;
  filter:saturate(1.05) contrast(1.06) brightness(.95)!important;
}
.world-bg__image--state{opacity:.42!important}

/* v4.0.24 multi-fault scroll affordance */
body.many-faults .board{position:relative}
body.many-faults .board::after{
  content:"↓ 滚动查看后续故障";
  position:absolute;left:12px;right:12px;bottom:8px;height:24px;
  display:flex;align-items:center;justify-content:center;
  font:10px/1 "Share Tech Mono",monospace;letter-spacing:.16em;color:#f0d49a;
  background:linear-gradient(180deg,transparent,rgba(2,8,6,.94) 70%);
  text-shadow:0 0 8px rgba(255,190,90,.5);pointer-events:none;z-index:6;
}

/* v4.0.25 — intro schematic as a 3D floor hologram */
.intro-visual { perspective: 1100px; perspective-origin: 50% 55%; }
.intro-visual__schematic {
  transform: rotateX(52deg) rotateZ(-6deg) scale(1.08);
  transform-origin: 50% 58%;
  transform-box: fill-box;
  filter: drop-shadow(0 32px 42px rgba(94, 255, 214, .16)) drop-shadow(0 0 18px rgba(94, 255, 214, .12));
  animation: introSchematicHover 9s ease-in-out infinite;
}
.intro-visual::after {
  content: "";
  position: absolute;
  left: 18%; right: 18%; bottom: 8%; height: 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(94,255,214,.22), transparent 70%);
  filter: blur(10px);
  opacity: .5;
  pointer-events: none;
}
@keyframes introSchematicHover {
  0%, 100% { transform: rotateX(52deg) rotateZ(-6deg) scale(1.08); }
  50% { transform: rotateX(47deg) rotateZ(5deg) scale(1.12); }
}
@media (max-width: 760px) {
  .intro-visual__schematic { transform: none; animation: none; filter: drop-shadow(0 0 14px rgba(94,255,214,.10)); }
  .intro-visual::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-visual__schematic { animation: none; }
}

/* v4.0.26 — 3D holographic reactor behind the UI */
.room-reactor {
  position: fixed;
  left: 50%;
  top: 54%;
  width: min(54vw, 680px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  perspective: 900px;
  contain: layout style;
}
.room-reactor i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(94, 255, 214, .38);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(94, 255, 214, .12), inset 0 0 28px rgba(94, 255, 214, .08);
  transform: rotateX(68deg) rotateZ(0deg);
  transform-origin: 50% 50%;
  animation: reactorSpin 18s linear infinite;
}
.room-reactor i:nth-child(2) {
  inset: 11%;
  border-color: rgba(255, 178, 90, .28);
  transform: rotateX(64deg) rotateZ(35deg);
  animation-duration: 24s;
  animation-direction: reverse;
}
.room-reactor i:nth-child(3) {
  inset: 23%;
  border-color: rgba(94, 255, 214, .22);
  transform: rotateX(72deg) rotateZ(15deg);
  animation-duration: 30s;
}
.room-reactor b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(150, 255, 229, .20), rgba(94, 255, 214, .06) 45%, transparent 70%);
  filter: blur(1px);
  box-shadow: 0 0 55px rgba(94, 255, 214, .18);
  animation: reactorPulse 5.5s ease-in-out infinite;
}
@keyframes reactorSpin {
  0% { transform: rotateX(68deg) rotateZ(0deg); }
  100% { transform: rotateX(68deg) rotateZ(360deg); }
}
@keyframes reactorPulse {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.92); }
  50% { opacity: .95; transform: translate(-50%, -50%) scale(1.06); }
}
@media (max-width: 760px) {
  .room-reactor { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .room-reactor i, .room-reactor b { animation: none; }
}

/* v4.0.26b — distinct reactor ring planes */
.room-reactor { opacity: .62; mix-blend-mode: screen; }
.room-reactor i { --rx: 68deg; --rz: 0deg; animation-name: reactorSpinVar; }
.room-reactor i:nth-child(2) { --rx: 58deg; --rz: 35deg; }
.room-reactor i:nth-child(3) { --rx: 78deg; --rz: -20deg; }
@keyframes reactorSpinVar {
  0% { transform: rotateX(var(--rx)) rotateZ(var(--rz)); }
  100% { transform: rotateX(var(--rx)) rotateZ(calc(var(--rz) + 360deg)); }
}

/* v4.0.27 — foreground dust / suspended particulates */
.room-dust {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
  opacity: .32;
}
.room-dust i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #9fffe9;
  box-shadow: 0 0 7px #45ffd2, 0 0 16px rgba(69,255,210,.35);
  animation: dustRise var(--d, 20s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.room-dust i:nth-child(3n) {
  width: 1.5px;
  height: 1.5px;
  background: #ffd9a0;
  box-shadow: 0 0 6px #ffb455;
}
.room-dust i:nth-child(4n) {
  width: 2.5px;
  height: 2.5px;
  opacity: .55;
}
@keyframes dustRise {
  0% { transform: translate3d(0, 28px, 0); opacity: 0; }
  9% { opacity: .9; }
  100% { transform: translate3d(var(--dx, 0), -78vh, 0); opacity: 0; }
}
@media (max-width: 760px) {
  .room-dust { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .room-dust { display: none; }
}

/* v4.0.27b — make suspended particulates readable */
.room-dust { opacity: .58; }
.room-dust i { width: 3px; height: 3px; background: #b6fff0; box-shadow: 0 0 8px #45ffd2, 0 0 20px rgba(69,255,210,.45); }
.room-dust i:nth-child(3n) { width: 2.5px; height: 2.5px; background: #ffe0ae; box-shadow: 0 0 8px #ffb455, 0 0 18px rgba(255,180,85,.35); }
.room-dust i:nth-child(4n) { width: 4px; height: 4px; opacity: .45; }

/* v4.0.27c — vertical holographic room scan */
.room-scan {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.room-scan::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(74, 255, 220, .045) 18%,
    rgba(110, 255, 232, .16) 46%,
    rgba(190, 255, 245, .26) 50%,
    rgba(110, 255, 232, .16) 54%,
    rgba(74, 255, 220, .045) 82%,
    transparent 100%);
  filter: blur(.4px);
  animation: roomScan 9s linear infinite;
}
@keyframes roomScan {
  0% { top: -16%; opacity: 0; }
  6% { opacity: 1; }
  94% { opacity: 1; }
  100% { top: 104%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .room-scan { display: none; }
}

@media (max-width: 760px) {
  .room-scan { display: none; }
}

/* v4.0.29 — scroll hint clears at bottom + reduced-motion safety */
body.fault-scroll-end.many-faults .board::after {
  opacity: 0 !important;
  transform: translate(-50%, 10px) !important;
  transition: opacity .2s ease, transform .2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .room-reactor,
  .room-reactor i,
  .room-dust,
  .room-dust i,
  .room-scan,
  .fault-scene__sweep,
  .fault-scene__scan,
  .fault-scene__spark,
  .fault-title__text,
  .fault-card.is-fresh {
    animation: none !important;
  }
  .room-scan { opacity: .18 !important; }
}
/* v4.0.30 — 4/5 故障也保留底部后续风味文字（单行） */
.fault-list.is-many .fault-lore__echo,
.fault-list.is-count-3.is-many .fault-lore__echo,
body.many-faults .fault-list.is-many .fault-lore__echo {
  display: block !important;
  font-size: 10.5px !important;
  line-height: 1.3 !important;
  margin-top: 4px !important;
  max-height: 14px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
.fault-list.is-many .fault-lore__echo::before {
  content: "↳ ";
  color: rgba(255, 226, 184, .55);
}

/* v4.0.30b — 4/5 故障底部只显示后续风味正文，不占位显示标签 */
.fault-list.is-many .fault-lore__echo-kicker,
.fault-list.is-count-3.is-many .fault-lore__echo-kicker,
.fault-list.is-many .fault-lore__echo-scope,
.fault-list.is-count-3.is-many .fault-lore__echo-scope {
  display: none !important;
}
.fault-list.is-many .fault-lore__echo p,
.fault-list.is-count-3.is-many .fault-lore__echo p {
  display: block !important;
  margin: 0 !important;
  font-size: 10.5px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* v4.0.30c — 移动端 4/5 故障底部后续文字可见 */
@media (max-width: 760px) {
  .fault-card .fault-lore {
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .fault-card .fault-lore__echo {
    position: static !important;
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin-top: 6px !important;
  }
  .fault-card .fault-lore__echo p {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
  }
}

/* v4.0.30d — 移动端恢复底部后续文字，但只保留一行，不展开整段 FIELD NOTE */
@media (max-width: 760px) {
  .fault-card .fault-lore {
    display: flex !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin-top: 6px !important;
    padding: 0 !important;
  }
  .fault-card .fault-lore__label,
  .fault-card .fault-lore__text,
  .fault-card .fault-lore__scope {
    display: none !important;
  }
  .fault-card .fault-lore__echo {
    display: block !important;
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .fault-card .fault-lore__echo p {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
  }
}

/* v4.0.30e — force one-line echo on mobile with specificity above the stacked-card hide */
@media (max-width: 760px) {
  body .fault-list.is-many .fault-card .fault-lore,
  body .fault-list.is-count-3 .fault-card .fault-lore,
  body.many-faults .fault-list .fault-card .fault-lore {
    display: flex !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 6px !important;
    padding: 0 !important;
  }
  body .fault-list.is-many .fault-card .fault-lore__label,
  body .fault-list.is-many .fault-card .fault-lore__text,
  body .fault-list.is-many .fault-card .fault-lore__scope,
  body .fault-list.is-count-3 .fault-card .fault-lore__label,
  body .fault-list.is-count-3 .fault-card .fault-lore__text,
  body .fault-list.is-count-3 .fault-card .fault-lore__scope {
    display: none !important;
  }
  body .fault-list.is-many .fault-card .fault-lore__echo,
  body .fault-list.is-count-3 .fault-card .fault-lore__echo {
    display: block !important;
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body .fault-list.is-many .fault-card .fault-lore__echo p,
  body .fault-list.is-count-3 .fault-card .fault-lore__echo p {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
  }
}

/* v4.0.30f — 4/5 fault echo is a normal flex child, not an absolute clipped strip */
.fault-list.is-many .fault-lore__echo,
.fault-list.is-count-3.is-many .fault-lore__echo,
body.many-faults .fault-list.is-many .fault-lore__echo {
  position: static !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
  padding: 2px 0 0 !important;
  margin-top: 4px !important;
}
.fault-list.is-many .fault-lore__echo p,
.fault-list.is-count-3.is-many .fault-lore__echo p {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* v4.0.31 — 活动故障的色调染到房间反应堆（反应堆基色青绿，约 165deg） */
.room-reactor {
  transition: filter .9s ease, opacity .9s ease;
  filter: hue-rotate(var(--fault-hue, 0deg)) saturate(1.22) brightness(1.06);
}
/* v4.0.31b — 手机端没有反应堆，改由房间氛围层承载故障色调 */
@media (max-width: 760px) {
  .page-aura {
    transition: filter .9s ease;
    filter: hue-rotate(var(--fault-hue, 0deg)) saturate(1.18);
  }
}
/* v4.0.31c — 反应堆兼当规则层压力表：故障越多，环比越快、越亮 */
.room-reactor { opacity: var(--reactor-op, .62); }
.room-reactor i { animation-duration: var(--reactor-dur, 24s); }
.room-reactor i:nth-child(2) { animation-duration: calc(var(--reactor-dur, 24s) * 1.3); }
.room-reactor i:nth-child(3) { animation-duration: calc(var(--reactor-dur, 24s) * 1.6); }
body[data-fault-tier="0"] .room-reactor { --reactor-op: .36; --reactor-dur: 34s; }
body[data-fault-tier="2"] .room-reactor { --reactor-op: .74; --reactor-dur: 15s; }
body[data-fault-tier="3"] .room-reactor { --reactor-op: .82; --reactor-dur: 10s; }
body[data-fault-tier="4"] .room-reactor,
body[data-fault-tier="5"] .room-reactor { --reactor-op: .9; --reactor-dur: 7s; }
/* v4.0.31d — 色调切换时反应堆做一次换色脉冲，提示规则层换了调子 */
body.reactor-retune .room-reactor { animation: reactorRetune 1.05s ease-out; }
@keyframes reactorRetune {
  0% { transform: translate(-50%, -50%) scale(1); }
  34% { transform: translate(-50%, -50%) scale(1.05); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .room-reactor, .page-aura { transition: none; }
  body.reactor-retune .room-reactor { animation: none; }
}

/* v4.0.33 — 信息型小字可读性下限
   装饰性的序列号/编号（SHELTER-07、RESIDUE SCAN 之类）保持 6-7px 当肌理，
   但"要读的内容"——卡牌效果、AP 费用、ACTIVE 状态、剩余夜数、日志日期——
   一律抬到 9.5-10.5px。 */
.effect-chip,
.effect-chip.is-positive,
.effect-chip.is-negative {
  font-size: 10.5px !important;
  letter-spacing: 0.015em !important;
}
.fault-card__status,
.fault-title__duration-label,
.fault-card__status span {
  font-size: 9.5px !important;
}
.patch-code,
.fault-code,
.bay-code,
.patch-card__fault-label,
.bay-patch__effect-label,
.bay-timer,
.bay-undo-tag {
  font-size: 9.5px !important;
}
.cost-badge,
.ap-cost,
.count-badge {
  font-size: 9.5px !important;
}
.log-day {
  font-size: 9.5px !important;
}

/* v4.0.34 — 规则侵蚀：故障越多，房间背景被吃掉得越多
   body[data-fault-tier] 由 renderFaults() 写入（min(5, 故障数)）；data-fault-count 仍是原始张数。
   注意：前面几版给 .world-bg__image 与 .world-bg__room 打过 !important
   的定值（saturate(1.05) contrast(1.06) brightness(.95) / opacity .86），
   这里必须同样 !important 才能接管，否则分级完全静默（实测过）。 */
.world-bg__image,
.world-bg__room {
  transition: filter 1.2s ease, opacity 1.2s ease !important;
}
body[data-fault-tier="0"] .world-bg__image--base { filter: saturate(1.05) contrast(1.06) brightness(.95) !important; }
body[data-fault-tier="1"] .world-bg__image--base { filter: saturate(.98) contrast(1.06) brightness(.9) !important; }
body[data-fault-tier="2"] .world-bg__image--base { filter: saturate(.9) contrast(1.07) brightness(.83) !important; }
body[data-fault-tier="3"] .world-bg__image--base { filter: saturate(.82) contrast(1.08) brightness(.76) !important; }
body[data-fault-tier="4"] .world-bg__image--base { filter: saturate(.74) contrast(1.09) brightness(.7) !important; }
body[data-fault-tier="5"] .world-bg__image--base { filter: saturate(.66) contrast(1.1) brightness(.62) !important; }
body[data-fault-tier="1"] .world-bg__room { opacity: .82 !important; }
body[data-fault-tier="2"] .world-bg__room { opacity: .76 !important; }
body[data-fault-tier="3"] .world-bg__room { opacity: .7 !important; }
body[data-fault-tier="4"] .world-bg__room { opacity: .63 !important; }
body[data-fault-tier="5"] .world-bg__room { opacity: .56 !important; }
/* 地面网格在故障多时先被吃：它是最外层、最容易失效的一层 */
body[data-fault-tier="4"] .room__floor,
body[data-fault-tier="5"] .room__floor { opacity: .4 !important; }
@media (prefers-reduced-motion: reduce) {
  .world-bg__image, .world-bg__room { transition: none !important; }
}
/* v4.0.35 — 手牌里的「故障牌」脚注：label 与 CTA 在 160px 卡宽里挤不下，
   v4.0.33 把 label 抬到 9.5px 后直接叠字（CTA 压住「不占补丁层」）。
   改成可换行：先放 label，放不下就把 CTA 折到下一行右对齐，
   并让 label 用省略号兜底，避免任何宽度下再压字。 */
.hand .patch-card.is-fault .patch-card__foot {
  flex-wrap: wrap;
  row-gap: 3px;
  justify-content: flex-start;
}
.hand .patch-card.is-fault .patch-card__fault-label {
  max-width: 100%;
  min-width: 0;
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hand .patch-card.is-fault .patch-card__foot .cover-cta {
  margin-left: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}
/* v4.0.35 — 效果 chip 的纵向呼吸空间：v4.0.33 把字号抬到 10.5px 之后，
   line-height 1.25 + padding 1px 让中文字形底边贴住 chip 下边框，看起来像
   "被切了半行"（几何上没溢出，但字形被边框压住）。这里给行高与上下内边距补足。 */
.effect-chip,
.effect-chip.is-positive,
.effect-chip.is-negative {
  line-height: 1.45 !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}
/* v4.0.35 — 手牌卡片高度必须跟着内容走：v4.0.33 抬字号 + chip 加内边距后，
   密集手牌的内容高 194px，但 .patch-card 仍被 min-height:176px + overflow:hidden
   锁成 174px 可视高 → 底部 chip / 寿命 / CTA 被裁掉一截（实测 scrollHeight 194）。
   这里把手牌网格行高与卡片最小高度一起放开，让卡片自己长高。 */
@media (min-width: 1001px) {
  .hand {
    grid-auto-rows: minmax(196px, auto) !important;
    max-height: calc(100vh - 636px) !important;
  }
}
.hand .patch-card {
  min-height: 196px !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden;
}
/* v4.0.37 — 反应堆核心的电弧与裂纹：故障越多，核心越"炸"
   只加在 .room-reactor b 的两个伪元素上，不新增 DOM：
   ::before 是一圈极窄的放射状弧光（conic 重复 + 环形遮罩），缓慢自转；
   ::after 是核心爆闪，用 steps 制造不规则的"抖"。
   颜色不写死——父级 .room-reactor 已有 filter: hue-rotate(var(--fault-hue))，
   所以整套电弧会跟着故障色调一起变。 */
.room-reactor b::before,
.room-reactor b::after {
  content: "";
  position: absolute;
  inset: -58%;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}
.room-reactor b::before {
  background: repeating-conic-gradient(from 0deg,
    rgba(214, 255, 255, .58) 0deg 2.4deg,
    rgba(120, 240, 255, .16) 2.4deg 4.6deg,
    transparent 4.6deg 13deg);
  -webkit-mask: radial-gradient(circle, transparent 42%, #000 52%, #000 76%, transparent 86%);
  mask: radial-gradient(circle, transparent 42%, #000 52%, #000 76%, transparent 86%);
  mix-blend-mode: screen;
  opacity: .62;
  filter: blur(.5px);
  animation: reactorArcSweep var(--arc-dur, 12s) linear infinite;
}
.room-reactor b::after {
  background: radial-gradient(circle,
    rgba(235, 255, 255, .55) 0%,
    rgba(120, 250, 255, .26) 34%,
    rgba(60, 200, 220, .10) 52%,
    transparent 66%);
  mix-blend-mode: screen;
  opacity: .5;
  animation: reactorCoreFlicker var(--arc-flick, 4s) steps(1, end) infinite;
}
body[data-fault-tier="0"] .room-reactor { --arc-dur: 26s; --arc-flick: 7s; }
body[data-fault-tier="1"] .room-reactor,
body[data-fault-tier="2"] .room-reactor { --arc-dur: 16s; --arc-flick: 4.4s; }
body[data-fault-tier="3"] .room-reactor { --arc-dur: 10s; --arc-flick: 2.8s; }
body[data-fault-tier="4"] .room-reactor { --arc-dur: 7s; --arc-flick: 1.9s; }
body[data-fault-tier="5"] .room-reactor { --arc-dur: 4.5s; --arc-flick: 1.2s; }
@keyframes reactorArcSweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes reactorCoreFlicker {
  0%   { opacity: .34; transform: scale(.96); }
  62%  { opacity: .34; transform: scale(.96); }
  66%  { opacity: .85; transform: scale(1.04); }
  70%  { opacity: .42; transform: scale(.98); }
  82%  { opacity: 1;    transform: scale(1.08); }
  85%  { opacity: .40; transform: scale(.97); }
  100% { opacity: .58; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .room-reactor b::before,
  .room-reactor b::after { animation: none; opacity: .4; }
}

/* v4.0.38 — 视觉梯度改用「钳到 5 的档位」：data-fault-tier = min(5, 故障数)，
   这样 6 张以上的极端局面不会回落到默认值。补一条 tier=1 档，让 0→2 的过渡连续。 */
body[data-fault-tier="1"] .room-reactor { --reactor-op: .68; --reactor-dur: 20s; }

/* v4.0.39 — 多故障紧凑卡"顶栏压标题"：
   2 张以上故障时 .fault-card__content 被 v3.x 的 flatten 规则改成
   position:absolute; inset:0 + padding-top:10px，而 .fault-card__top
   （fault-code / SEV / ACTIVE）仍占 y4..24 —— 结果标题与 ACTIVE 都被顶栏
   压住 13px，截图里表现为故障名压在卡片上边框上。这里把内容列整体下移，
   让标题从顶栏下方开始（与单故障卡 y59 的层级一致）。 */
.fault-list .fault-card:not(:only-of-type) .fault-card__content,
.fault-list.is-many .fault-card__content { padding-top: 30px !important; }

/* v4.0.40 — 手机端生存指标卡：资源名被挤到 29px 宽，"稳定度" 折成两行、
   "SYS / VITAL" 折成三行，第四张卡被撑到 134px（其余 115px），2×2 网格
   两行不等高。这里给名字留下限宽度、副标签不折行、数值与表盘略缩，
   让 170px 宽的卡片一行放得下（30 + 6 + 40 + 6 + 44 + 18 = 144 ≤ 149）。 */
@media (max-width: 760px) {
  .resource-top { gap: 6px !important; align-items: center; }
  .resource-name { flex: 1 1 auto !important; min-width: 38px !important; }
  .resource-name span { white-space: nowrap !important; font-size: 8px !important; letter-spacing: 0.06em !important; }
  .resource-value { font-size: 18px !important; }
  .resource-value small { font-size: 9.5px !important; }
  .resource-gauge { width: 18px !important; height: 18px !important; }
}
/* ================================================================== */
/* v4.0.41 — 手机端细节收口                                            */
/* 1) 资源卡副标（PWR / VITAL…）在 390px 下被裁 11px：收紧行距与字号，    */
/*    不再截掉最后一个字母；实测 scrollWidth - clientWidth = 0。         */
/* 2) 规则污染指示条右溢 3px 被面板裁掉：窄屏换成标题下独立一行。          */
/* 3) 故障旁注的 FIELD NOTE 微标在窄列里折成 3 行：改为单行省略。          */
/* ================================================================== */
@media (max-width: 760px) {
  .resource-top {
    gap: 3px !important;
  }

  .resource-value {
    font-size: 17px !important;
  }

  .resource-name span {
    font-size: 7.5px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  .board-head {
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: flex-end !important;
  }

  .board-head > div:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .rule-load {
    flex: 0 0 100% !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  .rule-load__bars {
    flex: 1 1 auto !important;
    max-width: 160px !important;
  }
}

.fault-lore .micro-label {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}
/* v4.0.41b — 窄屏下 FIELD NOTE 微标：允许两行完整显示（原来折成 3~4 行挤成一块） */
@media (max-width: 760px) {
  .fault-lore .micro-label,
  .fault-lore__label {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    letter-spacing: 0.06em !important;
    line-height: 1.3 !important;
    max-width: 100% !important;
  }
}
/* v4.0.41c — 手机端故障卡收紧：内容顶上多留的 30px（桌面为避开顶栏而设）在
   窄屏是纯空带，这里回落到 14px；示意图最小高度 96 → 72，卡片整体矮约 40px。 */
@media (max-width: 760px) {
  .fault-list .fault-card:not(:only-of-type) .fault-card__content,
  .fault-list.is-many .fault-card__content {
    padding-top: 14px !important;
  }

  .fault-card__schematic {
    min-height: 72px !important;
  }
}
/* ================================================================
   v4.0.42 — 紧凑故障卡：示意图层从"一片黑底"里救回来
   背景：`.fault-card__schematic` 在 v2.x/3.x 的十几层 !important
   叠加后只剩 opacity .55 + 上黑渐变，SVG 笔画又被 `.fault-scene`
   的 .30 压住，5 张以上故障时卡片下半部看起来就是一条纯黑横带。
   这里只提亮示意图自身与它的底板，不动文字层级。
   ================================================================ */
.fault-list .fault-card:not(:only-of-type) .fault-card__schematic {
  opacity: 0.94 !important;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.16) 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 9px) !important;
  border-color: color-mix(in srgb, var(--fault-accent, var(--cyan)) 30%, transparent) !important;
  box-shadow: inset 0 0 26px color-mix(in srgb, var(--fault-accent, var(--cyan)) 16%, transparent) !important;
  filter: saturate(1.22) contrast(1.05) !important;
}

.fault-list .fault-card:not(:only-of-type) .fault-card__schematic .fault-scene {
  opacity: 0.9 !important;
}

.fault-list .fault-card:not(:only-of-type) .fault-card__schematic .fault-viz {
  opacity: 1 !important;
}

.fault-list .fault-card:not(:only-of-type) .fault-card__schematic svg {
  opacity: 1 !important;
}

/* 5 张以上再推一档，让"极端局面"在视觉上真的更糟 */
body[data-fault-tier="5"] .fault-list .fault-card:not(:only-of-type) .fault-card__schematic {
  opacity: 1 !important;
  filter: saturate(1.32) contrast(1.08) brightness(1.04) !important;
}

@media (max-width: 1000px) {
  .fault-list .fault-card:not(:only-of-type) .fault-card__schematic {
    opacity: 0.7 !important;
    filter: saturate(1.1) !important;
  }
}
/* v4.0.42 续 — 紧凑示意图下缘的两枚读数标签（原本 display:none）与扫描线
   目的：把卡片下半部那条空带变成有信息的"仪表行"，而不是纯黑底。
   位置：示意图内部绝对定位到底边，左侧 tag、右侧 sev，扫描线横贯。 */
.fault-list .fault-card:not(:only-of-type) .fault-card__schematic .fault-schematic__tag,
.fault-list .fault-card:not(:only-of-type) .fault-card__schematic .fault-schematic__sev {
  display: block !important;
  position: absolute !important;
  top: auto !important;
  bottom: 7px !important;
  height: auto !important;
  max-height: 20px !important;
  z-index: 3 !important;
  padding: 2px 6px !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.14em !important;
  white-space: nowrap !important;
  color: #e8f7ff !important;
  text-shadow: 0 0 7px color-mix(in srgb, var(--fault-accent, var(--cyan)) 85%, transparent) !important;
  background: rgba(1, 6, 8, 0.82) !important;
  border: 1px solid color-mix(in srgb, var(--fault-accent, var(--cyan)) 52%, transparent) !important;
  border-radius: 3px !important;
  opacity: 0.94 !important;
}

.fault-list .fault-card:not(:only-of-type) .fault-card__schematic .fault-schematic__tag {
  left: 14px !important;
}

.fault-list .fault-card:not(:only-of-type) .fault-card__schematic .fault-schematic__sev {
  right: 14px !important;
}

.fault-list .fault-card:not(:only-of-type) .fault-card__schematic .fault-schematic__scan {
  display: block !important;
  height: 2px !important;
  opacity: 0.5 !important;
  background: linear-gradient(90deg, transparent, var(--fault-accent, var(--cyan)), transparent) !important;
  animation-duration: 5.6s !important;
}

body[data-fault-tier="4"] .fault-list .fault-card:not(:only-of-type) .fault-schematic__scan,
body[data-fault-tier="5"] .fault-list .fault-card:not(:only-of-type) .fault-card__schematic .fault-schematic__scan {
  animation-duration: 3.6s !important;
  opacity: 0.72 !important;
}

@media (max-width: 1000px) {
  .fault-list .fault-card:not(:only-of-type) .fault-card__schematic .fault-schematic__tag,
  .fault-list .fault-card:not(:only-of-type) .fault-card__schematic .fault-schematic__sev {
    font-size: 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fault-list .fault-card:not(:only-of-type) .fault-card__schematic .fault-schematic__scan {
    animation: none !important;
  }
}
/* ==========================================================================
   v4.0.43 — ALERT 分级：故障越多，避难所越"在报警"
   - 3 级起警报灯转红并加速（2.6s / 1.7s / 1.15s）
   - 4 级起顶棚加一道缓慢旋转的红色扫掠光（conic + mask，屏幕混合）
   - 5 级起屏幕边缘红色辉光呼吸
   全部由 body[data-fault-tier] 驱动，手机端只保留边缘辉光（不跑扫掠，省电省显卡）
   ========================================================================== */
body[data-fault-tier="3"] .world-bg__beacons i,
body[data-fault-tier="4"] .world-bg__beacons i,
body[data-fault-tier="5"] .world-bg__beacons i {
  background: #ff6a5a !important;
  box-shadow:
    0 0 9px 2px rgba(255, 106, 90, 0.62),
    0 0 42px 14px rgba(255, 106, 90, 0.16) !important;
}

body[data-fault-tier="3"] .world-bg__beacons i { animation-duration: 2.6s !important; }
body[data-fault-tier="4"] .world-bg__beacons i { animation-duration: 1.7s !important; }
body[data-fault-tier="5"] .world-bg__beacons i { animation-duration: 1.15s !important; }

.world-bg__beacons::before {
  content: '';
  position: absolute;
  inset: -30%;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 296deg,
    rgba(255, 104, 92, 0.14) 320deg,
    rgba(255, 104, 92, 0.3) 336deg,
    transparent 350deg
  );
  -webkit-mask-image: radial-gradient(circle at 50% 36%, transparent 26%, #000 72%);
  mask-image: radial-gradient(circle at 50% 36%, transparent 26%, #000 72%);
  transform-origin: 50% 36%;
  mix-blend-mode: screen;
  transition: opacity 1.2s ease;
}

body[data-fault-tier="4"] .world-bg__beacons::before {
  opacity: 0.55;
  animation: alertSweep 9.5s linear infinite;
}

body[data-fault-tier="5"] .world-bg__beacons::before {
  opacity: 0.75;
  animation: alertSweep 6.5s linear infinite;
}

@keyframes alertSweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

body[data-fault-tier="4"] .screen-fx__vignette {
  box-shadow: inset 0 0 90px rgba(255, 86, 74, 0.14);
}

body[data-fault-tier="5"] .screen-fx__vignette {
  animation: alertBloom 3.4s ease-in-out infinite;
}

@keyframes alertBloom {
  0%, 100% { box-shadow: inset 0 0 88px rgba(255, 86, 74, 0.12); }
  50% { box-shadow: inset 0 0 132px rgba(255, 86, 74, 0.24); }
}

@media (max-width: 760px) {
  .world-bg__beacons::before { display: none !important; }
  body[data-fault-tier="5"] .screen-fx__vignette { animation: none !important; box-shadow: inset 0 0 80px rgba(255, 86, 74, 0.16); }
}

@media (prefers-reduced-motion: reduce) {
  .world-bg__beacons::before { animation: none !important; opacity: 0.4 !important; }
  body[data-fault-tier="5"] .screen-fx__vignette { animation: none !important; box-shadow: inset 0 0 100px rgba(255, 86, 74, 0.18); }
  body[data-fault-tier="3"] .world-bg__beacons i,
  body[data-fault-tier="4"] .world-bg__beacons i,
  body[data-fault-tier="5"] .world-bg__beacons i { animation: none !important; }
}
/* ==========================================================================
   v4.0.44 — 覆盖状态可视化：被补丁封住的协议，应当看起来"被贴纸封了"
   - 斜向贴纸纹 + 内描边（低透明度，不压正文）
   - 封条 stamp 落地动效（仅在覆盖瞬间播一次）
   - 封条字号抬到 9px / 8px（信息型小字可读性下限，v4.0.33 的约定）
   ========================================================================== */
.fault-card.is-covered {
  opacity: 0.62 !important;
}

.fault-card.is-covered .fault-card__content::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(121, 223, 143, 0.055) 0 2px,
    transparent 2px 10px
  );
  box-shadow:
    inset 0 0 0 1px rgba(121, 223, 143, 0.16),
    inset 0 0 28px rgba(121, 223, 143, 0.06);
}

.fault-card.is-covered .cover-stamp {
  font-size: 9px !important;
  padding: 6px 10px !important;
  max-width: 46% !important;
  animation: stampIn 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.fault-card.is-covered .cover-stamp small {
  font-size: 8px !important;
  margin-top: 3px !important;
  letter-spacing: 0.04em !important;
}

@keyframes stampIn {
  from {
    transform: translateY(-50%) rotate(-11deg) scale(1.18);
    opacity: 0;
  }
  to {
    transform: translateY(-50%) rotate(-5deg) scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fault-card.is-covered .cover-stamp { animation: none !important; }
}

@media (max-width: 760px) {
  .fault-card.is-covered .cover-stamp { font-size: 8.5px !important; max-width: 52% !important; }
}
/* v4.0.44 续 — 补丁层卡片的撤销条：8.5px 的字压在半透明底上，
   背后的图标会透出来，且按钮右缘紧贴卡片边界。改成可换行 + 实底 + 9px。 */
.bay-patch__foot {
  flex-wrap: wrap !important;
  row-gap: 5px !important;
}

.bay-patch__foot .detach-btn {
  margin-left: auto !important;
  font-size: 9px !important;
  padding: 5px 7px !important;
  background: rgba(3, 10, 8, 0.84) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

@media (max-width: 760px) {
  .bay-patch__foot .detach-btn { font-size: 9px !important; }
}
/* v4.0.44 再续 — 补丁层顶行：`PWR-01` 被挤成两行（PWR- / 01）压在撤销标签与倒计时上。
   顶行统一不换行，代码块按内容宽度、倒计时按剩余空间收缩。 */
.bay-patch__top {
  flex-wrap: nowrap !important;
  gap: 5px !important;
}

.bay-patch .bay-code {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  font-size: 9px !important;
}

.bay-patch .bay-timer,
.bay-patch .bay-undo-tag {
  white-space: nowrap !important;
  font-size: 9px !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
}
/* v4.0.45 — 补丁层冲突预警：超过当日安全上限时，整个补丁区进入警戒态。
   v4.0.44 之前只有单张卡的 CRITICAL 小字和标题行一颗红字，实测很容易被整局忽略。 */
.patch-bay[data-conflict="1"] {
  border-color: rgba(255, 104, 92, .46) !important;
  background:
    linear-gradient(90deg, rgba(255, 104, 92, .055), transparent 58%),
    rgba(14, 7, 7, .74) !important;
  box-shadow: inset 0 0 26px rgba(255, 104, 92, .10), inset 0 0 0 1px rgba(255, 104, 92, .10) !important;
  animation: bayConflictBreath 2.6s ease-in-out infinite;
}
.patch-bay[data-conflict="1"] .bay-hint {
  color: #ffd8d4 !important;
  background: rgba(255, 104, 92, .12);
  border: 1px solid rgba(255, 104, 92, .5);
  border-radius: 3px;
  padding: 3px 7px;
  font-size: 9.5px !important;
  letter-spacing: .04em;
  animation: bayHintPulse 1.6s ease-in-out infinite;
}
.patch-bay[data-conflict="1"] .bay-patch.is-overload,
.patch-bay[data-conflict="1"] .bay-empty.is-overload {
  box-shadow: inset 0 0 0 1px rgba(255, 104, 92, .5), inset 0 0 18px rgba(255, 104, 92, .12) !important;
}
@keyframes bayConflictBreath {
  0%, 100% { box-shadow: inset 0 0 22px rgba(255, 104, 92, .08), inset 0 0 0 1px rgba(255, 104, 92, .10); }
  50% { box-shadow: inset 0 0 34px rgba(255, 104, 92, .18), inset 0 0 0 1px rgba(255, 104, 92, .18); }
}
@keyframes bayHintPulse {
  0%, 100% { opacity: .78; }
  50% { opacity: 1; }
}
@media (max-width: 760px) {
  .patch-bay[data-conflict="1"] { animation: none; }
  .patch-bay[data-conflict="1"] .bay-hint { font-size: 9px !important; padding: 2px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .patch-bay[data-conflict="1"],
  .patch-bay[data-conflict="1"] .bay-hint { animation: none !important; }
}
/* v4.0.46 — 多故障列表的滚动读数
   4 张以上故障时 .fault-list 会变成内部滚动区（740px 高的格子里塞 8~16 张
   卡），但玩家只能靠 v4.0.24 那条贴在 board 底边、和列表毫无空间关系的静态
   小字去猜"下面还有东西"。这里换成列表正上方的计数条：随滚动实时减少，
   滚到底自动收起；同时给列表底部加一层渐隐遮罩，让"被截断的下一张卡"看起来
   是设计，而不是裁切事故。 */
body.many-faults .board::after { content: none !important; }

.fault-scroll-hint {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: -4px 0 -6px;
  padding: 3px 11px 3px 9px;
  font: 9.5px/1.2 "Share Tech Mono", "Consolas", monospace;
  letter-spacing: .16em;
  color: #ffd9a3;
  background: linear-gradient(180deg, rgba(22, 14, 6, .88), rgba(6, 9, 8, .92));
  border: 1px solid rgba(255, 196, 110, .34);
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(255, 176, 80, .14), inset 0 0 12px rgba(255, 176, 80, .08);
  text-shadow: 0 0 8px rgba(255, 190, 90, .45);
  pointer-events: none;
  animation: faultHintBreath 2.6s ease-in-out infinite;
}
.fault-scroll-hint[hidden] { display: none !important; }
.fault-scroll-hint__arrow { color: #ffcf82; animation: faultHintArrow 1.7s ease-in-out infinite; }
.fault-scroll-hint__hint { color: rgba(255, 217, 163, .6); letter-spacing: .1em; }

@keyframes faultHintBreath {
  0%, 100% { box-shadow: 0 0 12px rgba(255, 176, 80, .10), inset 0 0 10px rgba(255, 176, 80, .06); }
  50% { box-shadow: 0 0 22px rgba(255, 176, 80, .22), inset 0 0 14px rgba(255, 176, 80, .12); }
}
@keyframes faultHintArrow {
  0%, 100% { transform: translateY(0); opacity: .7; }
  50% { transform: translateY(2px); opacity: 1; }
}

/* 底部渐隐：只有真的还能往下滚时才出现，滚到底由 JS 摘掉 fault-scrollable */
body.fault-scrollable:not(.fault-scroll-end) .board > .fault-list {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 40px), rgba(0, 0, 0, .35) calc(100% - 12px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 40px), rgba(0, 0, 0, .35) calc(100% - 12px), transparent 100%);
}

@media (max-width: 760px) {
  .fault-scroll-hint {
    font-size: 9px;
    padding: 2px 9px 2px 7px;
    gap: 6px;
    letter-spacing: .14em;
  }
  body.fault-scrollable:not(.fault-scroll-end) .board > .fault-list {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 30px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 30px), transparent 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fault-scroll-hint,
  .fault-scroll-hint__arrow { animation: none !important; }
}

/* v4.0.48 — 补丁层「剥离 / 撤销」按钮的可点面积 ---------------------------
   这是全站唯一的行内动作按钮，字号 9px 是为了贴合终端质感，但可点高度只有
   21px，手机上很容易点空（尤其它就在「持续 · N夜」那一行旁边）。保持字号，
   抬高可点区域，并补上 hover / 按下 / 键盘聚焦三种反馈。 */
.bay-patch .detach-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-height: 30px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease !important;
}

.bay-patch .detach-btn:hover:not(:disabled) {
  border-color: rgba(184, 245, 176, 0.52) !important;
  background: rgba(184, 245, 176, 0.13) !important;
  color: #eaffdf !important;
}

.bay-patch .detach-btn:active:not(:disabled) {
  transform: translateY(1px) !important;
}

.bay-patch .detach-btn:focus-visible {
  outline: 2px solid rgba(184, 245, 176, 0.72) !important;
  outline-offset: 2px !important;
}

@media (max-width: 760px) {
  .bay-patch .detach-btn {
    min-height: 34px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 9.5px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bay-patch .detach-btn {
    transition: none !important;
  }
  .bay-patch .detach-btn:active:not(:disabled) {
    transform: none !important;
  }
}
/* ============================================================
   v4.0.49 — 手牌区滚动读数
   手牌区可视高 252px、一张牌 196px：手里超过 2 张就只能看到一行半，
   但界面上从来没有提示，玩家会以为牌"消失"了。这里给一条读数胶囊
   + 底边渐隐，读数由 syncHandScrollHint() 按实际被裁卡数写入。
   ============================================================ */
.hand-scroll-hint {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: max-content !important;
  margin: -6px 0 8px !important;
  padding: 4px 9px !important;
  font-family: var(--mono, "JetBrains Mono", monospace) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.12em !important;
  line-height: 1.2 !important;
  color: #c8f7e4 !important;
  background: linear-gradient(90deg, rgba(94, 255, 214, 0.16), rgba(94, 255, 214, 0.04)) !important;
  border: 1px solid rgba(94, 255, 214, 0.38) !important;
  border-radius: 3px !important;
  animation: handHintBreath 2.8s ease-in-out infinite !important;
}
.hand-scroll-hint[hidden] { display: none !important; }

@keyframes handHintBreath {
  0%, 100% { opacity: 0.62; }
  50% { opacity: 1; }
}

/* 还有牌没露出来时，底边渐隐；滚到底或不需要滚动就撤掉 */
body.hand-scrollable:not(.hand-scroll-end) .hand {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent 100%) !important;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent 100%) !important;
}

@media (max-width: 760px) {
  .hand-scroll-hint {
    font-size: 9px !important;
    margin: -4px 0 6px !important;
    padding: 3px 7px !important;
    letter-spacing: 0.1em !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hand-scroll-hint { animation: none !important; opacity: 0.9 !important; }
}
/* ================================================================ */
/* v4.0.51 — 手牌「效果行」不再被压掉（延迟代价 chip 上线后暴露） */
/* ================================================================ */
/* v4.0.51 — .patch-card__effect 是 flex:1 1 auto + min-height:0，
   卡片高度被 min-height 卡住时它会把自己的 chip 裁掉（实测
   blackbox-delay 3 个 chip 溢出 10px、底边被切）。给效果行一个
   min-content 地板，让它把卡片撑高，而不是把字切掉。 */
.hand .patch-card__effect {
  min-height: min-content !important;
}

.hand .patch-card.is-dense .patch-card__effect {
  min-height: min-content !important;
}
/* ================================================================ */
/* v4.0.53 — 紧凑卡读数贴片不再压住档案旁注 */
/* ================================================================ */
/* v4.0.53 — v4.0.42 把示意图的 tag/sev 读数恢复了，但它们用 `right:14px`
   定位在整张卡上；卡片一窄就会压到右侧字段旁注上（1100 / 1250 宽度实测
   直接盖住 FIELD NOTE 正文）。由 layoutFaultDeco() 按每张卡实测的旁注
   左边界写入 --deco-right，把贴片收进示意图那一列。 */
.fault-list .fault-card:not(:only-of-type) .fault-card__schematic .fault-schematic__sev,
.fault-list.is-many .fault-card__schematic .fault-schematic__sev {
  right: var(--deco-right, 14px) !important;
  left: auto !important;
}

.fault-list .fault-card:not(:only-of-type) .fault-card__schematic .fault-schematic__tag {
  max-width: calc(100% - var(--deco-right, 14px) - 24px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ================================================================ */
/* v4.0.55 — 日交替过场：扫描带 + 相位配色                          */
/* ================================================================ */
/* 原来 DAY 0X 只是「中央一段渐隐的字」，1.2 秒一闪就过，几乎没有存在感。
   这里用两个伪元素给它一层结构：一条横贯全屏的扫描带（带上下细边），
   和一道从左掠过的扫光；颜色按 phase / 是否最后一天切换。 */

.day-splash.is-active::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: clamp(150px, 26vh, 260px);
  transform: translateY(-50%);
  background:
    linear-gradient(90deg, transparent, rgba(132, 255, 208, 0.10) 16%, rgba(132, 255, 208, 0.035) 50%, rgba(132, 255, 208, 0.10) 84%, transparent),
    linear-gradient(180deg, transparent, rgba(4, 10, 10, 0.58) 12%, rgba(4, 10, 10, 0.58) 88%, transparent);
  border-top: 1px solid rgba(140, 255, 206, 0.24);
  border-bottom: 1px solid rgba(140, 255, 206, 0.24);
  pointer-events: none;
  animation: dayBandIn 1.15s cubic-bezier(0.16, 0.84, 0.3, 1) both;
}

.day-splash.is-active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 38%, rgba(190, 255, 236, 0.14) 50%, transparent 62%);
  pointer-events: none;
  mix-blend-mode: screen;
  animation: dayScanSweep 1.05s linear both;
}

.day-splash.is-active #splashDay {
  animation: dayDigitIn 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.day-splash.is-active #splashKicker {
  animation: dayKickerIn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* 后期（第 7 天起）换琥珀，最后一天换警报红 */
.day-splash[data-phase='late'].is-active::before {
  background:
    linear-gradient(90deg, transparent, rgba(255, 196, 120, 0.12) 16%, rgba(255, 196, 120, 0.04) 50%, rgba(255, 196, 120, 0.12) 84%, transparent),
    linear-gradient(180deg, transparent, rgba(10, 7, 4, 0.60) 12%, rgba(10, 7, 4, 0.60) 88%, transparent);
  border-top-color: rgba(255, 196, 120, 0.26);
  border-bottom-color: rgba(255, 196, 120, 0.26);
}

.day-splash[data-phase='late'].is-active::after {
  background: linear-gradient(90deg, transparent 38%, rgba(255, 214, 160, 0.14) 50%, transparent 62%);
}

.day-splash[data-phase='late'] #splashDay {
  color: #ffe6bd;
  text-shadow: 0 0 40px rgba(255, 196, 120, 0.30);
}

.day-splash[data-final='1'].is-active::before {
  background:
    linear-gradient(90deg, transparent, rgba(255, 104, 92, 0.14) 16%, rgba(255, 104, 92, 0.05) 50%, rgba(255, 104, 92, 0.14) 84%, transparent),
    linear-gradient(180deg, transparent, rgba(14, 5, 5, 0.62) 12%, rgba(14, 5, 5, 0.62) 88%, transparent);
  border-top-color: rgba(255, 104, 92, 0.30);
  border-bottom-color: rgba(255, 104, 92, 0.30);
}

.day-splash[data-final='1'].is-active::after {
  background: linear-gradient(90deg, transparent 38%, rgba(255, 160, 148, 0.16) 50%, transparent 62%);
}

.day-splash[data-final='1'] #splashDay {
  color: #ffd9d2;
  text-shadow: 0 0 46px rgba(255, 104, 92, 0.42), 0 0 96px rgba(255, 104, 92, 0.22);
}

@keyframes dayBandIn {
  0% { opacity: 0; transform: translateY(-50%) scaleY(0.55); }
  100% { opacity: 1; transform: translateY(-50%) scaleY(1); }
}

@keyframes dayScanSweep {
  0% { opacity: 0; transform: translateX(-42%); }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translateX(42%); }
}

@keyframes dayDigitIn {
  0% { opacity: 0; transform: translateY(10px) scale(1.05); filter: blur(7px); letter-spacing: 0.18em; }
  62% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); letter-spacing: 0.04em; }
}

@keyframes dayKickerIn {
  0% { opacity: 0; letter-spacing: 0.44em; }
  100% { opacity: 1; letter-spacing: 0.22em; }
}

@media (prefers-reduced-motion: reduce) {
  .day-splash.is-active::before,
  .day-splash.is-active::after,
  .day-splash.is-active #splashDay,
  .day-splash.is-active #splashKicker {
    animation: none !important;
  }
  .day-splash.is-active::after { opacity: 0; }
}
/* v4.0.56 — 特殊节点（挑战日）实时进度
   原来只有一句"要求"，玩家得点「结束本日」才知道差多少。
   现在在这张卡里补一条随渲染更新的进度条 + 文字读数。 */
.challenge-box__progress {
  display: block !important;
  height: 4px !important;
  margin: 3px 0 1px !important;
  border-radius: 2px !important;
  background: rgba(255, 255, 255, 0.09) !important;
  overflow: hidden !important;
}

.challenge-box__progress i {
  display: block !important;
  height: 100% !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg, rgba(255, 179, 106, 0.5), rgba(255, 214, 120, 0.95)) !important;
  box-shadow: 0 0 8px rgba(255, 179, 106, 0.45) !important;
  transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.challenge-box__progress-text {
  color: #ffe2bd !important;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.03em !important;
  line-height: 1.45 !important;
}

.challenge-box.is-cleared .challenge-box__progress i {
  background: linear-gradient(90deg, rgba(140, 255, 170, 0.55), rgba(184, 245, 176, 0.95)) !important;
  box-shadow: 0 0 8px rgba(140, 255, 170, 0.45) !important;
}

.challenge-box.is-cleared .challenge-box__progress-text {
  color: #d8ffd2 !important;
}

@media (max-width: 760px) {
  .challenge-box__progress-text {
    font-size: 8.5px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .challenge-box__progress i {
    transition: none !important;
  }
}
/* v4.0.57 — 中文读数的最小可读字号
   响应式审计（1920/1280/1100/1024/768/360）发现仍有一批"要读的中文"
   停在 8–8.5px：遥测丢失横幅、外压面板的"防线完整 / 无损伤"、
   档案旁注的小标、覆盖封条的副行、示意图的读数贴片。
   统一抬到 9.5px（手机 9px），并把可能挤到的行高一起放开。 */
.visibility-line b,
.threat-breach span,
.threat-row span,
.micro-label,
.fault-lore__echo-kicker,
.fault-lore__echo-serial,
.cover-stamp small,
.fault-schematic__tag,
.fault-schematic__label {
  font-size: 9.5px !important;
  line-height: 1.45 !important;
}

.threat-breach span {
  letter-spacing: 0.02em !important;
}

.cover-stamp small {
  margin-top: 1px !important;
}

@media (max-width: 760px) {
  .visibility-line b,
  .threat-breach span,
  .threat-row span,
  .micro-label,
  .fault-lore__echo-kicker,
  .fault-lore__echo-serial,
  .cover-stamp small,
  .fault-schematic__tag,
  .fault-schematic__label {
    font-size: 9px !important;
  }
}
/* ==========================================================================
   v4.0.59 — 夜间结算过场：把「正在应用本夜规则」变成可读的三段进度
   --------------------------------------------------------------------------
   原来的 .night-progress 是一条无限循环的扫光，玩家看不出还要等多久、
   也看不出系统此刻在算什么。这一版把它拆成 RULE SCAN → PRESSURE → APPLY
   三段，按 1.9s（结算定时器长度）依次点亮，同时给卡片加一道自上而下的
   扫描线。全部是 CSS 动画，不改结算时序。
   ========================================================================== */
.night-card .night-stages {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: -6px 0 9px !important;
  font-family: var(--font-mono) !important;
  font-size: 8.5px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}
.night-card .night-stages em {
  flex: 1 1 0 !important;
  padding: 3px 4px 4px !important;
  font-style: normal !important;
  text-align: center !important;
  color: rgba(150, 196, 190, 0.42) !important;
  background: rgba(6, 20, 20, 0.5) !important;
  border: 1px solid rgba(120, 255, 214, 0.12) !important;
  border-radius: 2px !important;
  animation: nightStage 2.05s linear both !important;
}
.night-card .night-stages em:nth-child(1) { animation-delay: 0s !important; }
.night-card .night-stages em:nth-child(2) { animation-delay: 0.62s !important; }
.night-card .night-stages em:nth-child(3) { animation-delay: 1.24s !important; }

@keyframes nightStage {
  0% { color: rgba(150, 196, 190, 0.42); border-color: rgba(120, 255, 214, 0.12); background: rgba(6, 20, 20, 0.5); }
  12% { color: #eafff6; border-color: rgba(120, 255, 214, 0.72); background: rgba(24, 74, 62, 0.62); box-shadow: 0 0 14px rgba(94, 255, 214, 0.22); }
  44% { color: #eafff6; border-color: rgba(120, 255, 214, 0.5); background: rgba(18, 58, 52, 0.5); box-shadow: 0 0 8px rgba(94, 255, 214, 0.14); }
  100% { color: rgba(196, 255, 232, 0.86); border-color: rgba(120, 255, 214, 0.34); background: rgba(14, 44, 40, 0.46); box-shadow: none; }
}

/* 卡片自上而下的解析扫描线：与三段进度同一个节拍 */
.night-card { position: relative !important; overflow: hidden !important; }
.night-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, transparent 0, rgba(94, 255, 214, 0.10) 46%, rgba(94, 255, 214, 0.30) 50%, rgba(94, 255, 214, 0.10) 54%, transparent 100%) !important;
  mix-blend-mode: screen !important;
  animation: nightScan 1.9s cubic-bezier(0.4, 0, 0.6, 1) 1 both !important;
}

@keyframes nightScan {
  0% { transform: translateY(-100%); opacity: 0; }
  8% { opacity: 0.9; }
  92% { opacity: 0.9; }
  100% { transform: translateY(100%); opacity: 0; }
}

@media (max-width: 760px) {
  .night-card .night-stages { font-size: 8px !important; gap: 5px !important; letter-spacing: 0.12em !important; }
}

@media (prefers-reduced-motion: reduce) {
  .night-card .night-stages em { animation: none !important; color: rgba(196, 255, 232, 0.86) !important; border-color: rgba(120, 255, 214, 0.34) !important; }
  .night-card::after { animation: none !important; opacity: 0 !important; }
}
/* v4.0.60 — 夜间结算屏的「本夜净变化」读数。
   结算时玩家只看到外压/补丁/故障三个数，真正扣掉的电力与食物埋在日志里，
   等覆层关掉才在资源卡上看到结果却已经不知道被什么扣的。这一行补上因果。 */
.night-card .night-delta {
  margin: 9px 0 0;
  min-height: 16px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: #ffe3d2;
  text-shadow: 0 0 14px rgba(255, 150, 110, 0.35);
  animation: nightDeltaIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.86s both;
}

.night-card .night-delta[data-tone="calm"] {
  color: #c8ffd8;
  text-shadow: 0 0 14px rgba(124, 255, 178, 0.3);
}

.night-card .night-delta[hidden] {
  display: none !important;
}

@keyframes nightDeltaIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  .night-card .night-delta {
    font-size: 9.5px;
    letter-spacing: 0.04em;
    margin-top: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .night-card .night-delta { animation: none; }
}
/* ==========================================================================
   v4.0.62 — 结算卡左栏补「评分构成」，把半张空卡填成可读的算分明细
   ========================================================================== */
.end-breakdown {
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(150, 205, 190, 0.16);
}

.end-breakdown > .micro-label {
  font-size: 8.5px !important;
  letter-spacing: 0.16em !important;
  color: rgba(166, 214, 198, 0.62) !important;
}

.end-breakdown__rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.end-breakdown__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 54px;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(199, 236, 224, 0.82);
}

.end-breakdown__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.end-breakdown__formula {
  font-family: var(--mono, monospace);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: rgba(150, 205, 190, 0.52);
  white-space: nowrap;
}

.end-breakdown__value {
  text-align: right;
  font-family: var(--mono, monospace);
  font-size: 11.5px;
  font-weight: 600;
  color: #9dffc4;
}

.end-breakdown__row.is-negative .end-breakdown__value {
  color: var(--red, #ff6d64);
}

.end-breakdown__row.is-zero {
  opacity: 0.5;
}

.end-breakdown__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 4px 0 0;
  padding-top: 4px;
  border-top: 1px dashed rgba(150, 205, 190, 0.18);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(166, 214, 198, 0.66);
}

.end-breakdown__total b {
  font-family: var(--mono, monospace);
  font-size: 14px;
  color: var(--amber, #ffc266);
}

@media (max-width: 760px) {
  .end-breakdown { margin-top: 10px; }
  .end-breakdown__row { font-size: 10px; grid-template-columns: minmax(0, 1fr) auto 46px; }
  .end-breakdown__formula { font-size: 9px; }
  .end-breakdown__value { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .end-breakdown { transition: none !important; }
}
/* v4.0.62b — 手机端战败/胜利卡内容比卡片长（1160px 内容 / 776px 卡），
   而 .end-card 是 overflow:hidden + overlay 不可滚 → 「再一次值班」等按钮
   在手机上根本点不到。改成卡片内部滚动。 */
@media (max-width: 760px) {
  .end-card {
    overflow-y: auto !important;
    max-height: calc(100dvh - 44px) !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 16px !important;
  }
  .end-card::-webkit-scrollbar { width: 4px; }
  .end-card::-webkit-scrollbar-thumb { background: rgba(150, 205, 190, 0.28); border-radius: 4px; }
}
/* ==========================================================================
   v4.0.63 — 手机端手牌改横向滑动架
   竖排时 5 张牌就是 1012px，整页被拉到 4600px+；横排一张 172px，
   一屏能看到 2 张半，且左右滑动提示与底边渐隐都跟着换轴。
   ========================================================================== */
@media (max-width: 760px) {
  .hand {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: min(46vw, 176px) !important;
    grid-template-columns: none !important;
    grid-auto-rows: auto !important;
    align-items: stretch !important;
    align-content: start !important;
    gap: 8px !important;
    max-height: none !important;
    /* 矮屏 / 大字号时手牌行会被 flex 压缩，卡片内容跟着被裁；
       横排轨道的行高必须由卡片内容决定，所以这里卸掉所有高度约束。 */
    min-height: 0 !important;
    height: auto !important;
    flex: 0 0 auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 2px 2px 8px !important;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .hand > .patch-card {
    min-height: 0 !important;
    height: auto !important;
    scroll-snap-align: start;
  }

  .hand > .hand-empty {
    grid-column: auto !important;
    min-width: 100%;
  }

  .hand::-webkit-scrollbar { height: 4px !important; }
  .hand::-webkit-scrollbar-thumb { background: rgba(150, 205, 190, 0.28) !important; border-radius: 4px; }

  body.hand-scrollable.hand-scroll-x:not(.hand-scroll-end) #hand {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent) !important;
            mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent) !important;
  }

  body.hand-scrollable.hand-scroll-x:not(.hand-scroll-end) #handScrollHint {
    text-align: right;
  }
}
/* ==========================================================================
   v4.0.64 — 手机端空补丁槽收成一行
   390×844 下 4 个空槽是 4 块高约 60px 的竖排板（合计 240px），
   承载的信息却只有「这里以后能放补丁」。窄屏改成一行 4 个小格：
   高度 240px → 52px，手牌整体上提一屏；桌面端保持原样。
   ========================================================================== */
.bay-empties { display: contents; }

@media (max-width: 760px) {
  .bay-empties {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    grid-column: 1 / -1;
  }

  .bay-empties .bay-empty {
    min-height: 52px !important;
    height: 52px !important;
    padding: 5px 3px !important;
    gap: 1px !important;
    justify-content: center !important;
  }

  .bay-empties .bay-empty__index {
    font-size: 8px !important;
    opacity: 0.7 !important;
  }

  .bay-empties .bay-empty > span:last-child {
    font-size: 7px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.06em !important;
    text-align: center !important;
  }

  .bay-empties .bay-empty.is-overload > span:last-child {
    color: rgba(255, 118, 104, 0.72) !important;
  }
}

/* ==========================================================================
   v4.0.65 — 手机端「核心辉光」
   窄屏下 .room-reactor 是 display:none（15823 行），手机玩家整场看不到任何
   反应堆的光：故障数变了，只剩卡片与色调微调。而且面板几乎铺满屏幕，
   把光放在 .world-bg 里会被面板整体盖住（实测整帧亮度只差 1.5）。
   所以改放在 .screen-fx 这一层（fixed / z-index 90 / pointer-events none），
   光源从屏幕上方中央往下打，颜色跟随 --fault-hue，频率与强度跟随故障档位，
   与桌面反应堆同一套语义（0 档最静、5 档最急）。
   ========================================================================== */
@media (max-width: 760px) {
  .screen-fx::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(58% 30% at 50% 22%, rgba(94, 255, 214, 0.22), rgba(94, 255, 214, 0.07) 48%, transparent 76%),
      radial-gradient(120% 46% at 50% 104%, rgba(94, 255, 214, 0.12), transparent 72%);
    filter: hue-rotate(var(--fault-hue, 0deg)) saturate(1.12);
    opacity: var(--mobile-core-op, 0.20);
    mix-blend-mode: screen;
    transition: opacity 1.1s ease, filter 1.1s ease;
    animation: mobileCoreBreath var(--mobile-core-dur, 26s) ease-in-out infinite;
    will-change: transform, opacity;
  }

  body[data-fault-tier="0"] .screen-fx::before { --mobile-core-op: 0.14; --mobile-core-dur: 30s; }
  body[data-fault-tier="1"] .screen-fx::before { --mobile-core-op: 0.19; --mobile-core-dur: 24s; }
  body[data-fault-tier="2"] .screen-fx::before { --mobile-core-op: 0.26; --mobile-core-dur: 18s; }
  body[data-fault-tier="3"] .screen-fx::before { --mobile-core-op: 0.34; --mobile-core-dur: 13s; }
  body[data-fault-tier="4"] .screen-fx::before { --mobile-core-op: 0.42; --mobile-core-dur: 9s; }
  body[data-fault-tier="5"] .screen-fx::before { --mobile-core-op: 0.50; --mobile-core-dur: 6.5s; }
}

@keyframes mobileCoreBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
  .screen-fx::before { animation: none !important; }
}
/* ==========================================================================
   v4.0.65 — 手机端核心辉光（独立固定层）
   --------------------------------------------------------------------------
   上一版把辉光挂在 .screen-fx::before 上，结果整层被父元素
   `.screen-fx{opacity:0.22}`（styles.css:5771）再乘一次，几乎看不见。
   这里改成独立的 .mobile-core（index.html 里 .page-aura 之前），
   z-index 85：压在 .app-shell(1) 之上、.screen-fx(260) 与覆层(180+) 之下，
   screen 混合让面板也能吃到一层薄光，故障档位越高越亮越快。
   ========================================================================== */
.mobile-core {
  display: none;
}

@media (max-width: 760px) {
  .screen-fx::before {
    content: none !important;
  }

  .mobile-core {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 85;
    pointer-events: none;
    background:
      radial-gradient(58% 30% at 50% 22%, rgba(94, 255, 214, 0.26), rgba(94, 255, 214, 0.09) 48%, transparent 76%),
      radial-gradient(120% 46% at 50% 104%, rgba(94, 255, 214, 0.14), transparent 72%);
    filter: hue-rotate(var(--fault-hue, 0deg)) saturate(1.12);
    opacity: var(--mobile-core-op, 0.18);
    mix-blend-mode: screen;
    transition: opacity 1.1s ease, filter 1.1s ease;
    animation: mobileCoreBreath var(--mobile-core-dur, 26s) ease-in-out infinite;
    will-change: transform, opacity;
  }

  body[data-fault-tier="0"] .mobile-core { --mobile-core-op: 0.14; --mobile-core-dur: 30s; }
  body[data-fault-tier="1"] .mobile-core { --mobile-core-op: 0.20; --mobile-core-dur: 24s; }
  body[data-fault-tier="2"] .mobile-core { --mobile-core-op: 0.27; --mobile-core-dur: 18s; }
  body[data-fault-tier="3"] .mobile-core { --mobile-core-op: 0.35; --mobile-core-dur: 13s; }
  body[data-fault-tier="4"] .mobile-core { --mobile-core-op: 0.44; --mobile-core-dur: 9s; }
  body[data-fault-tier="5"] .mobile-core { --mobile-core-op: 0.52; --mobile-core-dur: 6.5s; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-core { animation: none !important; }
}
/* v4.0.66 — 紧凑故障卡的标题带 1px 品红/青双色偏移（错位印刷效果），
   19px 以下时读起来像"重影"，5 张卡并排尤其糊。桌面端保留一点色散
   味道，把偏移收到 0.5px、透明度砍半；手机上直接给干净的底影。 */
.fault-list .fault-card:not(:only-of-type) .fault-title__text,
.fault-list.is-many .fault-title__text {
  text-shadow:
    rgba(255, 79, 216, 0.22) 0.5px 0 0,
    rgba(98, 245, 255, 0.22) -0.5px 0 0,
    rgba(0, 0, 0, 0.72) 0 1px 6px !important;
}
@media (max-width: 760px) {
  .fault-list .fault-title__text,
  .fault-list.is-many .fault-title__text {
    text-shadow: rgba(0, 0, 0, 0.7) 0 1px 5px !important;
  }
}
/* v4.0.66b — 手机端那条规则被 `.fault-list.is-many` 的高特异性压住了，
   这里用 body 前缀把特异性抬到更高，让窄屏彻底回到干净底影。 */
@media (max-width: 760px) {
  body .fault-list.is-many .fault-title__text,
  body .fault-list .fault-card:not(:only-of-type) .fault-title__text,
  body .fault-list.is-count-3:not(.is-many) .fault-title__text {
    text-shadow: rgba(0, 0, 0, 0.7) 0 1px 5px !important;
  }
}

/* v4.0.67 — 撤离窗口日程条：整局 10 天画成格子。
   原来这块只有一行提示，下面空着一大片；日程条把「哪几天加牌 / 事件 /
   特殊节点 / 撤离」画出来，顺带填掉这段空白。 */
.evac-track {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 22px;
  margin: 9px 0 8px;
}
.evac-track .evac-pip {
  flex: 1 1 0;
  height: 7px;
  border-radius: 2px;
  background: rgba(120, 164, 178, 0.16);
  box-shadow: inset 0 0 0 1px rgba(120, 164, 178, 0.12);
  transition: background .3s ease, box-shadow .3s ease, height .3s ease;
}
.evac-track .evac-pip.is-past {
  background: rgba(120, 164, 178, 0.09);
  box-shadow: inset 0 0 0 1px rgba(120, 164, 178, 0.09);
}
.evac-track .evac-pip.is-reward {
  height: 10px;
  background: rgba(94, 255, 214, 0.20);
  box-shadow: inset 0 0 0 1px rgba(94, 255, 214, 0.30);
}
.evac-track .evac-pip.is-event {
  height: 10px;
  background: rgba(255, 194, 102, 0.20);
  box-shadow: inset 0 0 0 1px rgba(255, 194, 102, 0.30);
}
.evac-track .evac-pip.is-challenge {
  height: 13px;
  background: rgba(255, 104, 92, 0.20);
  box-shadow: inset 0 0 0 1px rgba(255, 104, 92, 0.32);
}
.evac-track .evac-pip.is-final {
  height: 22px;
  background: linear-gradient(180deg, rgba(190, 150, 255, 0.34), rgba(120, 90, 190, 0.14));
  box-shadow: inset 0 0 0 1px rgba(190, 150, 255, 0.46);
}
.evac-track .evac-pip.is-now {
  background: linear-gradient(180deg, rgba(232, 255, 246, 0.62), rgba(94, 255, 214, 0.22));
  box-shadow:
    inset 0 0 0 1px rgba(232, 255, 246, 0.66),
    0 0 9px rgba(94, 255, 214, 0.42);
  animation: evacPipNow 2.4s ease-in-out infinite;
}
.evac-track .evac-pip.is-challenge.is-now {
  background: linear-gradient(180deg, rgba(255, 226, 222, 0.62), rgba(255, 104, 92, 0.24));
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 222, 0.66),
    0 0 10px rgba(255, 104, 92, 0.46);
}
@keyframes evacPipNow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}
@media (max-width: 760px) {
  .evac-track { height: 18px; gap: 2px; margin: 7px 0 7px; }
  .evac-track .evac-pip { height: 6px; }
  .evac-track .evac-pip.is-reward,
  .evac-track .evac-pip.is-event { height: 9px; }
  .evac-track .evac-pip.is-challenge { height: 12px; }
  .evac-track .evac-pip.is-final { height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .evac-track .evac-pip { transition: none; }
  .evac-track .evac-pip.is-now { animation: none; }
}

/* v4.0.67b — 左栏卡片原本允许被压扁：30 天档（左栏内容更长）实测
   .objective-card 只剩 18px、.mother-card 直接被压成 0px，
   「撤离窗口」和「MOTHER 语音日志」整块看不见。
   给这两张卡禁止收缩，并让左栏自己滚动。 */
.vitals-panel > .objective-card,
.vitals-panel > .mother-card {
  flex: 0 0 auto !important;
}
.vitals-panel {
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

/* v4.0.67c — 上面那条 flex 修正后卡片高度回到 133px，但 overflow:hidden
   又裁掉了底部 15px（日程条底边被切）。撤离窗口卡不需要裁剪，
   它没有贴边的装饰角。 */
.vitals-panel > .objective-card {
  overflow: visible !important;
}


/* ---- v4.0.67e — 日程条搬进故障板表头（撤离卡在矮视口会被日志压住） ---- */
.board-head .evac-track {
  flex: 0 0 auto !important;
  width: min(320px, 30vw) !important;
  min-width: 160px !important;
  height: 24px !important;
  margin: 0 18px !important;
  padding: 0 !important;
  align-items: flex-end !important;
  order: 0 !important;
}
.board-head .evac-track .evac-pip { min-height: 6px !important; }
@media (max-width: 1000px) {
  .board-head .evac-track { width: min(220px, 26vw) !important; min-width: 120px !important; margin: 0 10px !important; height: 20px !important; }
}
@media (max-width: 760px) {
  .board-head .evac-track { flex: 0 0 100% !important; width: auto !important; min-width: 0 !important; height: 18px !important; margin: 4px 0 0 !important; order: 4 !important; }
  .board-head .evac-track .evac-pip { min-height: 5px !important; }
}
/* ---- v4.0.68 — 矮桌面视口（≤1000 高）允许整页滚动 ----
   实测 1458×900 且无故障时，左栏「撤离窗口」卡底边 802、日志面板从 741 起，
   撤离天数与「当前任务」被永久压在日志下面；v4.0.67 把日程条搬走后这一块更空了。
   1fr 行会把左栏固定成 621px，而左栏内容自然高度约 694px → 改为让行高跟着内容走，
   页面纵向滚动 70~180px，换取所有面板完整可见。≥1001 高的窗口不受影响。 */
@media (min-width: 1001px) and (max-height: 1000px) {
  body { overflow-y: auto !important; }
  .app-shell {
    height: auto !important;
    min-height: 100dvh;
    grid-template-rows: auto auto 148px;
  }
  .vitals-panel {
    overflow: visible !important;
    justify-content: flex-start !important;
  }
}

/* v4.0.69 — 撤离卡里新加的「下一节点」一行：色块在日程条里，读数字还得
   自己数格子。按节点类型给这一行上色，和日程条的颜色一一对应。 */
.objective-line--next {
  margin-top: 4px !important;
  opacity: .8 !important;
}

.objective-line--next #evacNext {
  color: var(--cyan) !important;
  font-variant-numeric: tabular-nums;
}

.objective-line--next #evacNext[data-kind="challenge"] {
  color: var(--red) !important;
}

.objective-line--next #evacNext[data-kind="reward"] {
  color: var(--cyan) !important;
}

.objective-line--next #evacNext[data-kind="event"] {
  color: var(--amber) !important;
}

.objective-line--next #evacNext[data-kind="none"] {
  color: var(--muted) !important;
}

.evac-pip:hover {
  outline: 1px solid rgba(140, 255, 206, 0.6) !important;
  outline-offset: 1px !important;
}

@media (prefers-reduced-motion: reduce) {
  .evac-pip {
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------------
   v4.0.70 — 示意图分色
   v4.0.42 把紧凑卡的示意图重新点亮之后，所有故障的线框都是同一支青色 ——
   五张卡摆在一起，看不出哪张属于电力、哪张属于防御。这里让线框的颜色
   跟着卡片自己的 --fault-accent 走（v4.0.32 已经给每张卡定义了它），
   再叠一条缓慢横移的基准线，让这块示意图真正像"正在量这个故障"的仪表。
   --------------------------------------------------------------------------- */

.fault-list .fault-card__schematic .fault-scene path,
.fault-list .fault-card__schematic .fault-scene line,
.fault-list .fault-card__schematic .fault-scene circle,
.fault-list .fault-card__schematic .fault-scene polyline,
.fault-list .fault-card__schematic .fault-scene ellipse {
  stroke: color-mix(in srgb, var(--fault-accent, #8fe2ff) 74%, #cfe9ff) !important;
}

.fault-list .fault-card__schematic .fault-scene g.fault-scene__grid path {
  stroke: color-mix(in srgb, var(--fault-accent, #8fe2ff) 30%, transparent) !important;
}

.fault-list .fault-card:not(:only-of-type) .fault-card__schematic::before,
.fault-list.is-many .fault-card__schematic::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--fault-accent, #8fe2ff) 58%, transparent),
        transparent
      )
      center bottom 34px / 100% 1px no-repeat,
    radial-gradient(
      120% 90% at 76% 45%,
      color-mix(in srgb, var(--fault-accent, #8fe2ff) 22%, transparent),
      transparent 64%
    ),
    repeating-linear-gradient(
      112deg,
      transparent 0 26px,
      color-mix(in srgb, var(--fault-accent, #8fe2ff) 11%, transparent) 26px 27px
    );
  opacity: 0.55;
  animation: sceneTonePulse 7.5s ease-in-out infinite;
}

body[data-fault-tier="4"] .fault-list .fault-card:not(:only-of-type) .fault-card__schematic::before,
body[data-fault-tier="4"] .fault-list.is-many .fault-card__schematic::before,
body[data-fault-tier="5"] .fault-list .fault-card:not(:only-of-type) .fault-card__schematic::before,
body[data-fault-tier="5"] .fault-list.is-many .fault-card__schematic::before {
  animation-duration: 4.4s;
  opacity: 0.78;
}

@keyframes sceneTonePulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.72; }
}

@media (max-width: 1000px) {
  .fault-list .fault-card:not(:only-of-type) .fault-card__schematic::before,
.fault-list.is-many .fault-card__schematic::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fault-list .fault-card:not(:only-of-type) .fault-card__schematic::before,
.fault-list.is-many .fault-card__schematic::before { animation: none; opacity: 0.45; }
}
/* ================================================================== */
/* v4.0.71 — 选中目标可视化升级                                        */
/* 出牌前玩家必须先在左侧故障卡里点一张"目标"，但选中态只有 1px 磷光边  */
/* 和 7px 的 TARGET LOCK 角标，在五张卡堆叠时几乎看不出来。这里把它做成 */
/* 卡片自身的色调环 + 双语角标 + 内压呼吸，颜色跟着故障 tone 走。        */
/* ================================================================== */
.fault-card.is-selected,
.fault-list .fault-card.is-selected {
  border-color: color-mix(in srgb, var(--fault-accent, #b8f5b0) 74%, #eafff2) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--fault-accent, #b8f5b0) 34%, transparent),
    0 0 30px color-mix(in srgb, var(--fault-accent, #b8f5b0) 20%, transparent) !important;
  outline: 2px solid color-mix(in srgb, var(--fault-accent, #b8f5b0) 52%, transparent) !important;
  outline-offset: 3px !important;
  animation: targetLockPulseTone 2.6s ease-in-out infinite !important;
}

.fault-list .fault-card.is-selected::before {
  content: "TARGET LOCK · 覆盖目标" !important;
  font-size: 9.5px !important;
  padding: 4px 9px !important;
  color: #f2fff7 !important;
  background: color-mix(in srgb, var(--fault-accent, #b8f5b0) 76%, #05110b) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--fault-accent, #b8f5b0) 46%, transparent);
  letter-spacing: 0.08em !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  border-radius: 0 0 0 3px;
}

@keyframes targetLockPulseTone {
  0%, 100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--fault-accent, #b8f5b0) 26%, transparent),
      0 0 22px color-mix(in srgb, var(--fault-accent, #b8f5b0) 13%, transparent),
      inset 0 0 18px color-mix(in srgb, var(--fault-accent, #b8f5b0) 6%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--fault-accent, #b8f5b0) 44%, transparent),
      0 0 38px color-mix(in srgb, var(--fault-accent, #b8f5b0) 24%, transparent),
      inset 0 0 30px color-mix(in srgb, var(--fault-accent, #b8f5b0) 12%, transparent);
  }
}

/* 手牌可出但还没选目标时，让手牌区出一行指引，避免"点了没反应"的困惑。 */
body.has-selection .hand-head::after {
  content: "目标已锁定：点击手牌覆盖它";
  margin-left: 10px;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--fault-accent, #b8f5b0) 62%, #9fc4b8);
}

@media (max-width: 760px) {
  .fault-list .fault-card.is-selected::before {
    font-size: 8.5px !important;
    padding: 3px 7px !important;
  }
  body.has-selection .hand-head::after {
    display: block;
    margin-left: 0;
    margin-top: 2px;
    font-size: 8.5px;
  }
  .fault-card.is-selected,
  .fault-list .fault-card.is-selected {
    outline-width: 1.5px !important;
    outline-offset: 2px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fault-card.is-selected,
  .fault-list .fault-card.is-selected {
    animation: none !important;
  }
}

/* v4.0.71b — 选中目标后，手牌区指引的颜色跟着目标故障的 tone 走。 */
body.has-selection { --sel-accent: #b8f5b0; }
body.has-selection[data-sel-tone="power"] { --sel-accent: #4bb9ff; }
body.has-selection[data-sel-tone="food"] { --sel-accent: #ffb660; }
body.has-selection[data-sel-tone="defense"] { --sel-accent: #96b4ff; }
body.has-selection[data-sel-tone="core"] { --sel-accent: #ff5cbe; }
body.has-selection[data-sel-tone="stability"] { --sel-accent: #8cffaa; }
body.has-selection .hand-head::after { color: color-mix(in srgb, var(--sel-accent) 70%, #a9cfc2) !important; }
/* ================================================================== */
/* v4.0.72 — 「预计防线」也画成点阵，和外压同一套刻度                    */
/* 原来外压是 4~7 颗点、防线只是一个数字，两行没法目视比对；              */
/* 这一版把防线画成同尺寸的青蓝色点阵，数值跟在点阵右侧。                 */
/* ================================================================== */
.threat-body .threat-row {
  align-items: center;
  gap: 6px;
}

.threat-pips.is-defense {
  align-items: center;
  margin-right: 0;
}

.threat-pips.is-defense i {
  background: rgba(106, 232, 255, 0.13);
  border-radius: 1px;
}

.threat-pips.is-defense i.on {
  background: linear-gradient(90deg, rgba(61, 167, 189, 0.92), var(--cyan, #6ae8ff));
  box-shadow: 0 0 7px rgba(106, 232, 255, 0.42);
}

.threat-pips__num {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cyan, #6ae8ff);
}

@media (max-width: 760px) {
  .threat-pips i {
    width: 8px;
    height: 5px;
  }
  .threat-pips__num {
    font-size: 10.5px;
    margin-left: 5px;
  }
}

/* ================================================================== */
/* v4.0.73 — 让 MOTHER 语音日志在矮屏上回来（紧凑形态）                  */
/* 原规则在 @media (max-height:940px) and (min-width:861px) 里直接把     */
/* .mother-card 设成 display:none：900px 高的主流笔记本上，MOTHER 的      */
/* 每日语音只剩页脚那串状态串，一天一句的叙事整段消失。改成保留但压缩：   */
/* 标题 7.5px、正文压到两行、内边距收窄，左栏只多占约 56px。            */
/* ================================================================== */
@media (max-height: 940px) and (min-width: 861px) {
  .vitals-panel > .mother-card {
    display: block !important;
    margin-top: 6px !important;
    padding: 7px 9px !important;
  }
  .vitals-panel > .mother-card .mother-card__head {
    font-size: 7.5px !important;
    letter-spacing: 0.09em !important;
  }
  .vitals-panel > .mother-card p {
    margin: 3px 0 4px !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }
  .vitals-panel > .mother-card .mother-card__status {
    font-size: 7px !important;
    letter-spacing: 0.08em !important;
  }
}


/* ===== v4.0.74 — MOTHER 换日播报 ===== */
/* 每日语音只在换日时更新，而它只是面板里一行小字：静态时玩家几乎不会注意到
   内容变了。换日时给卡片一次短促的「正在说话」状态：一条话音波形 + 头部标签
   + 呼吸辉光，2.6 秒后自行回落。动画只在 is-speaking 期间存在，静止时不占帧。 */

.mother-card {
  position: relative;
  transition: box-shadow .5s ease, border-color .5s ease;
}

.mother-card.is-speaking {
  border-color: rgba(158, 226, 255, .5) !important;
  box-shadow: 0 0 0 1px rgba(158, 226, 255, .28), 0 0 20px rgba(120, 210, 255, .16) !important;
}

.mother-card.is-speaking::after {
  content: '' !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(158, 226, 255, .85), transparent) !important;
  animation: motherSpeakLine 2.6s linear both;
  opacity: 1 !important;
}

.mother-card.is-speaking .mother-card__head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.mother-card.is-speaking .mother-card__head::after {
  content: '更新 · NEW';
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 6.5px;
  letter-spacing: .1em;
  white-space: nowrap;
  color: rgba(158, 226, 255, .92);
  animation: motherSpeakTag 2.6s ease both;
}

.mother-card.is-speaking .signal-dot {
  animation-duration: .9s !important;
  background: #9ee2ff !important;
  box-shadow: 0 0 9px rgba(158, 226, 255, .8) !important;
}

/* 话音波形：卡片右下角的 6 根短竖条，靠高度差做「说话」的错觉。 */
.mother-card.is-speaking #motherQuote::after {
  content: '';
  display: inline-block;
  width: 22px;
  height: 9px;
  margin-left: 6px;
  vertical-align: -1px;
  background-image: repeating-linear-gradient(90deg,
    rgba(158, 226, 255, .85) 0 1.5px, transparent 1.5px 4px);
  background-size: 22px 9px;
  animation: motherWave 1.2s steps(2, end) infinite;
  opacity: .8;
}

.mother-card.is-speaking #motherQuote {
  animation: motherQuotePulse 2.6s ease both;
}

@keyframes motherSpeakLine {
  0% { transform: scaleX(0); opacity: 0; }
  18% { transform: scaleX(1); opacity: 1; }
  82% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

@keyframes motherSpeakTag {
  0% { opacity: 0; transform: translateX(-4px); }
  15% { opacity: 1; transform: none; }
  78% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes motherQuotePulse {
  0% { color: #eaf4ff; text-shadow: 0 0 12px rgba(158, 226, 255, .55); }
  30% { color: #ffffff; text-shadow: 0 0 16px rgba(158, 226, 255, .7); }
  100% { color: inherit; text-shadow: none; }
}

@keyframes motherWave {
  0% { background-position-y: 0; }
  50% { background-position-y: 3px; }
  100% { background-position-y: 0; }
}

@media (max-width: 760px) {
  .mother-card.is-speaking .mother-card__head::after { font-size: 6px; }
  .mother-card.is-speaking #motherQuote::after { width: 16px; height: 7px; background-size: 16px 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .mother-card.is-speaking::after,
  .mother-card.is-speaking .mother-card__head::after,
  .mother-card.is-speaking #motherQuote,
  .mother-card.is-speaking #motherQuote::after,
  .mother-card.is-speaking .signal-dot {
    animation: none !important;
  }
  .mother-card.is-speaking #motherQuote { color: #eaf4ff; }
}

/* v4.0.75 — 模态里的键盘焦点必须看得见 -------------------------------- */
.overlay .reward-option:focus-visible,
.overlay .event-choice:focus-visible,
.overlay .pact-option:focus-visible,
.overlay .end-actions .start-btn:focus-visible,
.overlay .end-actions .ghost-btn:focus-visible,
.overlay .close-btn:focus-visible,
.overlay .help-card .ghost-btn:focus-visible {
  outline: 2px solid var(--cyan, #6ae8ff) !important;
  outline-offset: 3px !important;
}

.overlay .reward-option:focus-visible,
.overlay .event-choice:focus-visible,
.overlay .pact-option:focus-visible {
  box-shadow: 0 0 0 1px rgba(106, 232, 255, 0.28), 0 14px 34px rgba(0, 0, 0, 0.42) !important;
}

@media (max-width: 760px) {
  .overlay .reward-option:focus-visible,
  .overlay .event-choice:focus-visible,
  .overlay .pact-option:focus-visible {
    outline-width: 1.5px !important;
    outline-offset: 2px !important;
  }
}
/* v4.0.75b — 模态里的焦点环也要覆盖 `:focus`。
   程序化聚焦（探针、读屏、以及被 Tab 陷阱移动后）不一定命中
   `:focus-visible`，只有 `:focus` 才稳定可见。 */
.overlay .reward-option:focus,
.overlay .event-choice:focus,
.overlay .pact-option:focus,
.overlay .challenge-brief .start-btn:focus,
.overlay .end-actions .start-btn:focus,
.overlay .end-actions .ghost-btn:focus,
.overlay .close-btn:focus,
.overlay .help-card .ghost-btn:focus {
  outline: 2px solid var(--cyan, #6ae8ff) !important;
  outline-offset: 3px !important;
}

@media (max-width: 760px) {
  .overlay .reward-option:focus,
  .overlay .event-choice:focus,
  .overlay .pact-option:focus {
    outline-width: 1.5px !important;
    outline-offset: 2px !important;
  }
}
/* v4.0.75c — 焦点环改用 border-color + inset 光晕（outline 在这个元素上
   被项目里某条既有规则吃掉了，实测无论 !important 还是内联都算成 0px；
   边框色与内阴影是可靠的替代信号）。 */
.overlay .reward-option:focus,
.overlay .event-choice:focus,
.overlay .pact-option:focus {
  border-color: var(--cyan, #6ae8ff) !important;
  box-shadow: inset 0 0 0 1px rgba(106, 232, 255, 0.85), 0 0 22px rgba(106, 232, 255, 0.32) !important;
}

.overlay .challenge-brief .start-btn:focus,
.overlay .end-actions .start-btn:focus,
.overlay .end-actions .ghost-btn:focus,
.overlay .close-btn:focus,
.overlay .help-card .ghost-btn:focus {
  border-color: var(--cyan, #6ae8ff) !important;
  box-shadow: 0 0 0 2px rgba(106, 232, 255, 0.55), 0 0 22px rgba(106, 232, 255, 0.3) !important;
}

/* v4.0.75d — 覆层里任何获得焦点的控件都套一枚明确的环（不依赖 :focus
   的计算结果，避免桌面/手机两边表现不一致）。 */
.overlay .is-focus-ring {
  border-color: #6ae8ff !important;
  box-shadow: inset 0 0 0 1px rgba(106, 232, 255, 0.85), 0 0 22px rgba(106, 232, 255, 0.32) !important;
  transition: box-shadow 0.14s ease, border-color 0.14s ease !important;
}
@media (max-width: 760px) {
  .overlay .is-focus-ring { box-shadow: inset 0 0 0 1px rgba(106, 232, 255, 0.8), 0 0 16px rgba(106, 232, 255, 0.28) !important; }
}
/* ============================================================
   v4.0.76 — 「结束本日」按钮的剩余行动点提示
   ------------------------------------------------------------
   剩 1 AP 和 0 AP 时按钮长一样，玩家会带着没用完的行动点进夜。
   renderActionState() 现在把剩余 AP 写进副行，并给按钮挂 has-ap-left，
   这里只负责把「还有事没做完」这件事画出来：琥珀色描边 + 极轻的呼吸。
   ============================================================ */
.end-day-btn.has-ap-left {
  border-color: rgba(255, 196, 120, 0.58) !important;
  background-image: linear-gradient(180deg, rgba(255, 196, 120, 0.14), rgba(255, 196, 120, 0.04)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 196, 120, 0.22), 0 0 20px rgba(255, 196, 120, 0.16) !important;
  animation: endDayApBreathe 2.8s ease-in-out infinite !important;
}

.end-day-btn.has-ap-left .end-day-btn__sub,
.end-day-btn.has-ap-left .end-day-btn__sub kbd {
  color: #ffd9a8 !important;
  border-color: rgba(255, 196, 120, 0.5) !important;
}

.end-day-btn.has-ap-left .end-day-btn__arrow {
  color: #ffd9a8 !important;
}

@keyframes endDayApBreathe {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 196, 120, 0.20), 0 0 16px rgba(255, 196, 120, 0.12); }
  50% { box-shadow: inset 0 0 0 1px rgba(255, 196, 120, 0.34), 0 0 26px rgba(255, 196, 120, 0.22); }
}

@media (max-width: 760px) {
  .end-day-btn.has-ap-left { animation-duration: 3.4s !important; }
}

@media (prefers-reduced-motion: reduce) {
  .end-day-btn.has-ap-left { animation: none !important; }
}
/* ------------------------------------------------------------------ */
/* v4.0.77 — 出牌缺目标时的引导脉冲
   点手牌但还没选覆盖故障时，故障协议区整体脉冲两次，
   同时第一条未覆盖的故障卡被描边标出来。 */
@keyframes pickTargetPulse {
  0%   { box-shadow: inset 0 0 0 1px rgba(255, 196, 120, 0), inset 0 0 0 rgba(255, 196, 120, 0); }
  35%  { box-shadow: inset 0 0 0 1px rgba(255, 196, 120, 0.66), inset 0 0 26px rgba(255, 196, 120, 0.20); }
  100% { box-shadow: inset 0 0 0 1px rgba(255, 196, 120, 0), inset 0 0 0 rgba(255, 196, 120, 0); }
}

@keyframes pickCardPulse {
  0%   { outline: 0 solid rgba(255, 196, 120, 0); outline-offset: 0; }
  30%  { outline: 2px solid rgba(255, 196, 120, 0.92); outline-offset: 4px; }
  100% { outline: 2px solid rgba(255, 196, 120, 0); outline-offset: 11px; }
}

body.hint-pick-target .fault-list {
  border-radius: 8px;
  animation: pickTargetPulse 0.95s ease-out 2 !important;
}

body.hint-pick-target .fault-card.is-selected {
  animation: pickCardPulse 0.95s ease-out 2 !important;
}

@media (prefers-reduced-motion: reduce) {
  body.hint-pick-target .fault-list {
    animation: none !important;
    box-shadow: inset 0 0 0 1px rgba(255, 196, 120, 0.6) !important;
  }
  body.hint-pick-target .fault-card.is-selected {
    animation: none !important;
    outline: 2px solid rgba(255, 196, 120, 0.85) !important;
    outline-offset: 3px !important;
  }
}
/* v4.0.78 — 结算卡的「外压 vs 防线」账目：这一夜是被挡住还是被突破。 */
.night-card .night-math {
  margin: 6px 0 0;
  padding: 5px 9px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(2, 8, 6, 0.55);
  color: #cfe6df;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-align: center;
  animation: nightMathIn 0.4s ease both;
}
.night-card .night-math[data-tone="breach"] {
  color: #ffd0c8;
  border-color: rgba(255, 104, 92, 0.42);
  background: rgba(38, 12, 10, 0.6);
}
.night-card .night-math[data-tone="hold"] {
  color: #c8ffd8;
  border-color: rgba(140, 255, 170, 0.32);
  background: rgba(8, 26, 16, 0.6);
}
.night-card .night-math[hidden] { display: none !important; }
@keyframes nightMathIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 760px) {
  .night-card .night-math { font-size: 9px; padding: 4px 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .night-card .night-math { animation: none; }
}
/* v4.0.79 — 维护指令的键盘提示：1–4 直接触发，按钮左上角留一个极小的键位标。 */
.maint-btn__key {
  position: absolute;
  top: 4px;
  left: 5px;
  padding: 0 3px;
  border: 1px solid rgba(120, 219, 207, 0.28);
  border-radius: 2px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 7.5px !important;
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: rgba(150, 232, 220, 0.62);
  background: rgba(2, 10, 12, 0.55);
  pointer-events: none;
  opacity: 0.86;
}

.maint-btn:disabled .maint-btn__key {
  opacity: 0.28;
}

@media (max-width: 760px) {
  /* 手机靠触屏，键位标只占地方 */
  .maint-btn__key {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .maint-btn__key {
    transition: none !important;
  }
}
/* v4.0.80 — 费用被故障抬价时，在价格右边补一个 +N 标，说明「贵在哪」。
   只做加法标记，不动原有 cost-badge 的配色。 */
.hand .patch-card .cost-tax {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 16px !important;
  height: 14px !important;
  padding: 0 4px !important;
  border-radius: 3px !important;
  border: 1px solid rgba(255, 196, 120, 0.52) !important;
  background: rgba(255, 196, 120, 0.14) !important;
  color: #ffd7a3 !important;
  font-size: 8.5px !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  .hand .patch-card .cost-tax {
    min-width: 15px !important;
    height: 13px !important;
    font-size: 8px !important;
    padding: 0 3px !important;
  }
}
/* v4.0.81 — 帮助面板在手机上超宽：.help-card 是 width:min(980px,94vw)，
   390px 视口下右缘压到 391px，双列网格又把每列压到 ~137px，长句直接被裁掉。
   窄屏改成单列 + 卡片宽度留出安全边距，并允许长词断行。 */
@media (max-width: 760px) {
  .help-card {
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 20px) !important;
    margin: 0 auto !important;
    padding: 16px 14px 16px !important;
  }
  .help-card__head { gap: 10px !important; }
  .help-card__head h2 { font-size: 19px !important; }
  .help-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }
  .help-grid section { padding: 14px 0 !important; }
  .help-card p,
  .help-card li,
  .help-card b,
  .help-card em { overflow-wrap: anywhere !important; }
  .key-row { gap: 5px !important; font-size: 8.5px !important; }
  .key-row span { margin-right: 5px !important; }
}
/* v4.0.82 — 手牌不可用态：行动点不够 / 无目标时，费用徽标与标题一起转红，
   鼠标悬停时给出可读的「为什么不能打」，而不是整张卡等比例变暗。 */
.hand .patch-card.is-locked .cost-badge {
  color: #ffb8ad !important;
  border-color: rgba(255, 124, 108, 0.48) !important;
  background: rgba(255, 92, 80, 0.10) !important;
  box-shadow: inset 0 0 12px rgba(255, 92, 80, 0.12) !important;
}
.hand .patch-card.is-locked .cost-badge .cost-tax { color: #ff9c8f !important; }
.hand .patch-card.is-locked .patch-card__title-row h4 { color: #e9c7c2 !important; }
.hand .patch-card.is-locked .cover-cta {
  color: #ffb8ad !important;
  border-color: rgba(255, 124, 108, 0.42) !important;
}
.hand .patch-card.is-playable .cost-badge {
  color: #d9f7e6 !important;
  border-color: rgba(146, 255, 198, 0.42) !important;
  background: rgba(146, 255, 198, 0.08) !important;
}
@media (max-width: 760px) {
  .hand .patch-card.is-locked .cost-badge { color: #ffb8ad !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hand .patch-card.is-locked .cost-badge { box-shadow: none !important; }
}
/* ============================================================
   v4.0.83 — 日志「新记录」跳转提示
   ------------------------------------------------------------
   日志面板本身会自动贴底；但玩家向上翻着读旧记录时，新记录只会
   把内容往下推，位置不动、也没有任何提示。这一版补一个胶囊提示：
   只在「停在中间且确实有新记录」时出现，点一下回到底部并恢复跟随。
   ============================================================ */
.log-panel { position: relative; }

.log-jump {
  position: absolute;
  right: 14px;
  bottom: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 196, 120, 0.44);
  background: rgba(6, 16, 14, 0.92);
  color: #ffd9a8;
  font: inherit;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  cursor: pointer;
  backdrop-filter: blur(3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  animation: logJumpIn 0.28s ease both;
}

.log-jump:hover { border-color: rgba(255, 208, 150, 0.7); background: rgba(14, 26, 22, 0.95); }
.log-jump:focus-visible { outline: 2px solid rgba(255, 208, 150, 0.75); outline-offset: 2px; }
.log-jump b { color: #fff0cf; font-size: 10.5px; }
.log-jump[hidden] { display: none !important; }

@keyframes logJumpIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  .log-jump { right: 10px; bottom: 8px; font-size: 9px; padding: 3px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .log-jump { animation: none; }
}
/* v4.0.84 — 稳定度卡的「护盾 / 夜防」徽标：这两种状态都只在威胁面板或夜间结算里露脸，
   玩家在资源列里看不到自己还剩多少护盾。把徽标贴在稳定度卡上，随数值实时更新。 */
.resource-card .vital-badges {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.resource-card .vital-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid rgba(140, 255, 170, 0.38);
  background: rgba(8, 22, 16, 0.82);
  color: #b8e8c6;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
}
.resource-card .vital-badge b {
  font-weight: 700;
  color: #eafff0;
}
.resource-card .vital-badge.is-shield {
  border-color: rgba(140, 255, 170, 0.5);
  background: rgba(18, 46, 32, 0.86);
  color: #d6ffe4;
}
.resource-card .vital-badge.is-guard {
  border-color: rgba(255, 196, 120, 0.5);
  background: rgba(38, 28, 12, 0.86);
  color: #ffd9a8;
}
@media (max-width: 760px) {
  .resource-card .vital-badge { font-size: 8px; padding: 1px 5px; }
}

/* v4.0.85 — 补丁层卡片补上「它压住了哪条故障」。四张补丁叠着时，玩家要
   判断某条规则有没有被覆盖，只能靠回忆；补丁卡上只有自己的名字与效果。 */
.bay-patch__target {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 2px !important;
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.06em !important;
  color: #bfe8c9 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.bay-patch__target svg {
  width: 9px !important;
  height: 9px !important;
  flex: 0 0 auto !important;
  opacity: 0.8 !important;
}
.bay-patch.is-concealed .bay-patch__target { color: #d8c8a8 !important; }
@media (max-width: 760px) {
  .bay-patch__target { font-size: 8.5px !important; }
}
/* v4.0.86 — 紧凑故障卡里的「规则行」在中等宽度下会被挤成两行再被裁掉
   （1280 / 1100 实测：热浪「食物消耗 +1 · 稳定 -1」第二行直接消失）。
   两行是因为字号还是 15.2px（is-count-3 档），而可用宽度只有 137px。
   这里把紧凑态的字号收到 11.4px 并强制单行省略，宁可省略也不让规则凭空消失。 */
.fault-list.is-many .fault-card__title .fault-rule,
.fault-list .fault-card:not(:only-of-type) .fault-card__title .fault-rule {
  font-size: 11.4px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.005em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-height: none !important;
  height: auto !important;
  display: block !important;
}
@media (max-width: 1280px) {
  .fault-list.is-many .fault-card__title .fault-rule,
  .fault-list .fault-card:not(:only-of-type) .fault-card__title .fault-rule {
    font-size: 10.8px !important;
  }
}
@media (max-width: 760px) {
  .fault-list.is-many .fault-card__title .fault-rule,
  .fault-list .fault-card:not(:only-of-type) .fault-card__title .fault-rule {
    font-size: 11px !important;
  }
}

/* v4.0.87 — 夜间结算可以跳过
   一夜等 1.9 秒，一局十几次；覆层本身是 pointer-events: none（不挡鼠标），
   只在结算期间接住点击，点一下就结束剩下的等待。 */
.night-overlay:not([hidden]) {
  pointer-events: auto !important;
  cursor: pointer;
}
.night-skip {
  margin: 8px 0 0 !important;
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.08em !important;
  color: rgba(184, 245, 176, 0.42) !important;
  text-align: center !important;
}
@media (max-width: 760px) {
  .night-skip { font-size: 8.5px !important; margin-top: 6px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .night-skip { animation: none !important; }
}
/* ===== v4.0.88 — 故障板「收容框」四角标记 =====
   规则层是这台机器上真正危险的东西，但它没有任何「被围住」的视觉暗示。
   给故障板上限加四个角标：平时是低亮度青绿取景角，污染升到 3 转琥珀、
   4/5 转红并缓慢呼吸 —— 让「这块区域正在失控」在不看数字时也能读到。 */
.board-frame {
  position: absolute;
  inset: 7px;
  z-index: 3;
  pointer-events: none;
  --frame: #5effd6;
  --frame-a: 0.26;
  transition: opacity 1.2s ease;
}
.board-frame i {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 0 solid var(--frame);
  opacity: var(--frame-a);
  transition: border-color 1.2s ease, opacity 1.2s ease;
}
.board-frame i:nth-child(1) {
  top: 0;
  left: 0;
  border-top-width: 1px;
  border-left-width: 1px;
}
.board-frame i:nth-child(2) {
  top: 0;
  right: 0;
  border-top-width: 1px;
  border-right-width: 1px;
}
.board-frame i:nth-child(3) {
  bottom: 0;
  left: 0;
  border-bottom-width: 1px;
  border-left-width: 1px;
}
.board-frame i:nth-child(4) {
  bottom: 0;
  right: 0;
  border-bottom-width: 1px;
  border-right-width: 1px;
}
body[data-fault-tier="1"] .board-frame,
body[data-fault-tier="2"] .board-frame {
  --frame: #9fffe8;
  --frame-a: 0.34;
}
body[data-fault-tier="3"] .board-frame {
  --frame: #ffc46b;
  --frame-a: 0.44;
}
body[data-fault-tier="4"] .board-frame {
  --frame: #ff9a6b;
  --frame-a: 0.56;
  animation: boardFramePulse 3.4s ease-in-out infinite;
}
body[data-fault-tier="5"] .board-frame {
  --frame: #ff6b5a;
  --frame-a: 0.7;
  animation: boardFramePulse 2.2s ease-in-out infinite;
}
@keyframes boardFramePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@media (max-width: 1000px) {
  .board-frame { inset: 5px; }
  .board-frame i { width: 12px; height: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-fault-tier="4"] .board-frame,
  body[data-fault-tier="5"] .board-frame { animation: none; }
}
/* ===== v4.0.88b — 收容框强度上调（首版 0.26 在深色底上几乎看不见） ===== */
.board-frame { inset: 6px; --frame-a: 0.34; }
.board-frame i { width: 20px; height: 20px; border-width: 1.5px; }
body[data-fault-tier="1"] .board-frame,
body[data-fault-tier="2"] .board-frame { --frame-a: 0.42; }
body[data-fault-tier="3"] .board-frame { --frame: #ffc46b; --frame-a: 0.52; }
body[data-fault-tier="4"] .board-frame { --frame: #ff9a6b; --frame-a: 0.66; box-shadow: inset 0 0 46px rgba(255,120,90,0.07); }
body[data-fault-tier="5"] .board-frame { --frame: #ff6b5a; --frame-a: 0.8; box-shadow: inset 0 0 56px rgba(255,90,80,0.11); }
@media (max-width: 1000px) {
  .board-frame { inset: 4px; }
  .board-frame i { width: 15px; height: 15px; border-width: 1.5px; }
}
/* ===== v4.0.88c — 角标加粗 + 自发光（1.5px 在深底上仍然太弱） ===== */
.board-frame i {
  width: 24px;
  height: 24px;
  border-width: 2px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--frame) 60%, transparent);
}
body[data-fault-tier="4"] .board-frame i,
body[data-fault-tier="5"] .board-frame i { border-width: 2.5px; }
@media (max-width: 1000px) {
  .board-frame i { width: 16px; height: 16px; border-width: 2px; }
}
/* ===== v4.0.88d — 角落 i 的边框宽度被 :nth-child 规则压住，必须同特异性覆盖 ===== */
.board-frame i:nth-child(n) { border-width: 2.5px !important; }
body[data-fault-tier="4"] .board-frame i:nth-child(n),
body[data-fault-tier="5"] .board-frame i:nth-child(n) { border-width: 3px !important; }
@media (max-width: 1000px) {
  .board-frame i:nth-child(n) { border-width: 2px !important; }
}
/* v4.0.88e — 取景框顶边原本贴着 .board 顶部，左上角标正好压住 “RULE LAYER / LIVE
   PROTOCOLS” 这个区块标题（1458 实测重叠 6px）。把顶边下移到表头之下，
   让框只围住协议列表本身。 */
.board-frame { top: 56px !important; }
@media (max-width: 760px) { .board-frame { top: 52px !important; } }
/* ===== v4.0.89 — 事件记录筛选（全部 / 关键） ===== */
.log-filters {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  margin-right: 8px;
}
.log-filter {
  appearance: none;
  padding: 2px 7px;
  border: 1px solid rgba(88, 130, 144, 0.42);
  border-radius: 4px;
  background: rgba(6, 16, 20, 0.6);
  color: rgba(196, 220, 226, 0.62);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  line-height: 1.5;
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.log-filter:hover {
  color: rgba(222, 246, 250, 0.9);
  border-color: rgba(94, 255, 214, 0.4);
}
.log-filter.is-active {
  color: #d6fff2;
  border-color: rgba(94, 255, 214, 0.62);
  background: rgba(94, 255, 214, 0.12);
  box-shadow: inset 0 0 10px rgba(94, 255, 214, 0.14);
}
.log-filter:focus-visible {
  outline: 2px solid rgba(94, 255, 214, 0.72);
  outline-offset: 2px;
}
@media (max-width: 760px) {
  .log-filters { gap: 3px; margin-right: 6px; }
  .log-filter { font-size: 9px; padding: 2px 6px; }
}
/* v4.0.89b — 手机端点按面积：20px 高的筛选片偏小，抬到 26px。
   只加在 ≤760px，桌面保持紧凑的高度。 */
@media (max-width: 760px) {
  .log-filter { min-height: 26px; padding: 3px 8px; }
}
/* v4.0.90 — 打牌反馈：新补丁入层时滑入 + 高亮，被覆盖的故障卡闪一圈绿光。
   之前出牌只有数字变化，玩家（尤其手机）很难确认这一手到底打中了哪张。 */
@keyframes bayPatchIn {
  from { transform: translateY(-6px) scale(.98); opacity: .35; }
  60%  { transform: translateY(0) scale(1.012); opacity: 1; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes faultJustCovered {
  0%   { box-shadow: inset 0 0 0 1px rgba(184,245,176,0), inset 0 0 0 rgba(184,245,176,0); }
  22%  { box-shadow: inset 0 0 0 1px rgba(184,245,176,.78), inset 0 0 26px rgba(184,245,176,.22); }
  100% { box-shadow: inset 0 0 0 1px rgba(184,245,176,0), inset 0 0 0 rgba(184,245,176,0); }
}
.bay-patch.is-new { animation: bayPatchIn .5s cubic-bezier(.2, .8, .3, 1) both; }
.fault-card.is-just-covered { animation: faultJustCovered 1.3s ease-out 1; }

@media (prefers-reduced-motion: reduce) {
  .bay-patch.is-new,
  .fault-card.is-just-covered { animation: none; }
}
/* ============================================================
   v4.0.91 — 行动点用尽时的「收工」状态
   手牌全部打不出去，结束本日却还是一条安静的描边按钮。
   这一版把「现在该结算了」这件事画出来：结算按钮呼吸、手牌退后。
   ============================================================ */
body.ap-spent .end-day-btn:not(:disabled) {
  border-color: rgba(140, 232, 255, 0.52) !important;
  color: #d8f6ff !important;
  animation: endDayReady 2.4s ease-in-out infinite !important;
}
body.ap-spent .end-day-btn:not(:disabled) .end-day-btn__title {
  color: #eafaff !important;
}
body.ap-spent .hand .patch-card:not(.is-playable) {
  opacity: 0.72 !important;
}
@media (max-width: 760px) {
  body.ap-spent .hand .patch-card:not(.is-playable) {
    opacity: 0.76 !important;
  }
}
@keyframes endDayReady {
  0%, 100% {
    box-shadow:
      inset 0 0 18px rgba(140, 232, 255, 0.06),
      0 0 0 1px rgba(140, 232, 255, 0.16);
  }
  50% {
    box-shadow:
      inset 0 0 26px rgba(140, 232, 255, 0.12),
      0 0 22px rgba(140, 232, 255, 0.24);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.ap-spent .end-day-btn:not(:disabled) {
    animation: none !important;
    box-shadow:
      inset 0 0 20px rgba(140, 232, 255, 0.10),
      0 0 0 1px rgba(140, 232, 255, 0.24) !important;
  }
}
/* ------------------------------------------------------------------ */
/* v4.0.92 — 板面核心环随故障升级加速                                  */
/* 中心那圈扫描环原本固定 90s / 46s，无论局面多糟都一样慢悠悠地转。     */
/* 现在按 data-fault-tier（v4.0.38 起由 renderFaults 写 0..5）逐档提速，*/
/* 让「板面乱起来了」先被余光察觉，再去读具体条目。                    */
/* ------------------------------------------------------------------ */
.board-core { transition: opacity 1.2s var(--ease); }

body[data-fault-tier="1"] .board-core { opacity: 0.66; }
body[data-fault-tier="2"] .board-core { opacity: 0.72; }
body[data-fault-tier="3"] .board-core { opacity: 0.78; }
body[data-fault-tier="4"] .board-core { opacity: 0.82; }
body[data-fault-tier="5"] .board-core { opacity: 0.86; }

body[data-fault-tier="1"] .board-core__ring--outer { animation-duration: 72s; }
body[data-fault-tier="2"] .board-core__ring--outer { animation-duration: 58s; }
body[data-fault-tier="3"] .board-core__ring--outer { animation-duration: 44s; }
body[data-fault-tier="4"] .board-core__ring--outer { animation-duration: 32s; }
body[data-fault-tier="5"] .board-core__ring--outer { animation-duration: 15s; }

body[data-fault-tier="1"] .board-core__ring--mid { animation-duration: 36s; }
body[data-fault-tier="2"] .board-core__ring--mid { animation-duration: 29s; }
body[data-fault-tier="3"] .board-core__ring--mid { animation-duration: 22s; }
body[data-fault-tier="4"] .board-core__ring--mid { animation-duration: 11s; }
body[data-fault-tier="5"] .board-core__ring--mid { animation-duration: 7.5s; }

/* 4 档起：内环开始「心跳」，5 档几乎贴着 UI 的呼吸频率 */
body[data-fault-tier="4"] .board-core__ring--inner,
body[data-fault-tier="5"] .board-core__ring--inner {
  animation: coreBreath var(--core-breath, 3.2s) ease-in-out infinite;
}
body[data-fault-tier="5"] .board-core__ring--inner { --core-breath: 2.1s; }

@keyframes coreBreath {
  0%, 100% {
    box-shadow:
      inset 0 0 24px color-mix(in srgb, var(--core) 7%, transparent),
      0 0 30px color-mix(in srgb, var(--core) 5%, transparent);
    border-color: color-mix(in srgb, var(--core) 22%, transparent);
  }
  50% {
    box-shadow:
      inset 0 0 34px color-mix(in srgb, var(--core) 14%, transparent),
      0 0 46px color-mix(in srgb, var(--core) 10%, transparent);
    border-color: color-mix(in srgb, var(--core) 34%, transparent);
  }
}

@media (max-width: 760px) {
  /* 手机端板面较窄，外环刻度盘视觉噪声大，只保留加速不给心跳 */
  body[data-fault-tier="4"] .board-core__ring--inner,
  body[data-fault-tier="5"] .board-core__ring--inner { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .board-core__ring,
  body[data-fault-tier="4"] .board-core__ring--inner,
  body[data-fault-tier="5"] .board-core__ring--inner { animation: none; }
}
/* ------------------------------------------------------------------ */
/* v4.0.93 — 核心环按「严重度压力」调速                               */
/* v4.0.92 只按故障张数分档；两条三级故障和四条一级故障转速相同。      */
/* renderFaults() 现在按 sev 之和对 4 取整得到 pressure(0..5)，换算成  */
/* --core-outer-dur / --core-mid-dur 写在 body 上，这里接管动画时长。  */
/* ------------------------------------------------------------------ */
body .board-core__ring--outer { animation-duration: var(--core-outer-dur, 90s) !important; }
body .board-core__ring--mid { animation-duration: var(--core-mid-dur, 46s) !important; }

@media (prefers-reduced-motion: reduce) {
  body .board-core__ring--outer,
  body .board-core__ring--mid { animation: none !important; }
}
/* ------------------------------------------------------------------ */
/* v4.0.94 — 持续型故障的「剩余夜数」条                                */
/* 「持续 3 天」只是一句文案，看不出还剩几夜。补一条小格子条：亮 = 还剩。 */
/* ------------------------------------------------------------------ */
.fault-title__duration { display: inline-flex; align-items: center; gap: 4px; }
.fault-list .fault-card .linger-pips { display: inline-flex; align-items: center; gap: 2px; }
.fault-list .fault-card .linger-pips i {
  width: 5px; height: 5px; border-radius: 50%;
  background: color-mix(in srgb, var(--fault-accent) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fault-accent) 38%, transparent);
  transition: background .3s ease, box-shadow .3s ease;
}
.fault-list .fault-card .linger-pips i.on {
  background: var(--fault-accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--fault-accent) 62%, transparent);
}
@media (max-width: 760px) {
  .fault-list .fault-card .linger-pips i { width: 4px; height: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .fault-list .fault-card .linger-pips i { transition: none; }
}
/* ===== v4.0.95 — 威胁压力读数 =====
   核心环转速、背景侵蚀、警报级别全都由 data-fault-pressure 决定，
   但这个数一直是内部量。给「规则污染」加一条读数，让视觉强度可解释。 */
.board-head .fault-pressure {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-align: right;
  color: rgba(255, 216, 160, 0.62);
  transition: color 0.3s ease;
}

.board-head .fault-pressure[hidden] {
  display: none !important;
}

.board-head .fault-pressure[data-pressure="1"],
.board-head .fault-pressure[data-pressure="2"] {
  color: rgba(184, 245, 210, 0.7);
}

.board-head .fault-pressure[data-pressure="3"] {
  color: rgba(255, 216, 140, 0.78);
}

.board-head .fault-pressure[data-pressure="4"] {
  color: rgba(255, 168, 120, 0.82);
}

.board-head .fault-pressure[data-pressure="5"] {
  color: rgba(255, 120, 104, 0.9);
  animation: pressureHot 1.8s ease-in-out infinite;
}

@keyframes pressureHot {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; text-shadow: 0 0 10px rgba(255, 120, 104, 0.45); }
}

@media (max-width: 760px) {
  .board-head .fault-pressure {
    font-size: 8.5px;
    letter-spacing: 0.1em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .board-head .fault-pressure {
    animation: none !important;
  }
}
/* v4.0.96 — 夜间结算卡补一行「补丁脱落 / 明早注入」，覆层原本只报资源与外压账。 */
.night-card .night-outcome {
  margin: 6px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #ffd8c4;
  text-align: center;
  animation: nightDeltaIn 0.5s ease-out 1.02s both;
}
.night-card .night-outcome[data-tone="warn"] { color: #ffe3b0 !important; }
.night-card .night-outcome[data-tone="loss"] { color: #ffb3a8 !important; }
.night-card .night-outcome[hidden] { display: none !important; }
@media (max-width: 760px) {
  .night-card .night-outcome { font-size: 9.5px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .night-card .night-outcome { animation: none !important; }
}

/* v4.0.98 — 「夜间撕裂」标记：夜结会从最旧的一张开始撕，得让你看得见是哪张。 */
.bay-patch.is-at-risk {
  border: 1px dashed rgba(255, 104, 92, 0.52) !important;
  background: rgba(255, 104, 92, 0.05) !important;
}
.bay-patch.is-at-risk .bay-risk-tag {
  color: #ffb3a8 !important;
  font-size: 9px !important;
  letter-spacing: 0.1em !important;
  animation: nightRiskPulse 2.4s ease-in-out infinite;
}
@keyframes nightRiskPulse {
  0%, 100% { opacity: 0.62; }
  50% { opacity: 1; }
}
@media (max-width: 760px) {
  .bay-patch.is-at-risk .bay-risk-tag { font-size: 8.5px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .bay-patch.is-at-risk .bay-risk-tag { animation: none !important; opacity: 0.9; }
}

/* v4.0.99 — 手机端补丁层改横排（与手牌一致）：竖排 3 张要 500px+，横排一行就够。 */
@media (max-width: 760px) {
  .patch-bay__slots {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: min(62vw, 232px) !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch;
  }
  .patch-bay__slots > .bay-patch,
  .patch-bay__slots > .bay-empties { scroll-snap-align: start; }
  .patch-bay__slots > .bay-empties { grid-column: auto !important; }
  .patch-bay__slots::-webkit-scrollbar { height: 4px; }
  .patch-bay__slots::-webkit-scrollbar-thumb { background: rgba(94,255,214,.28); border-radius: 2px; }
}

/* v4.0.100 — 事件覆层顶部的实时局势快照（覆层挡住棋盘时也能看到当前数值）。 */
.event-card .event-context {
  margin: 0 18px 10px;
  padding: 7px 12px;
  border: 1px solid rgba(94,255,214,.30);
  border-left-width: 3px;
  border-radius: 4px;
  background: rgba(6,18,22,.82);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.45;
  letter-spacing: 0.03em;
  color: rgba(222,248,241,.95);
  text-align: center;
  text-wrap: balance;
}
.event-card .event-context:empty { display: none; }
.event-card .event-context .ec-item,
.event-card .event-context .ec-sep { display: inline-block; vertical-align: baseline; }
.event-card .event-context .ec-item { white-space: nowrap; }
.event-card .event-context .ec-sep { margin: 0 3px; opacity: 0.45; }
@media (max-width: 760px) {
  .event-card .event-context {
    margin: 0 12px 8px;
    padding: 6px 9px;
    font-size: 9.5px;
    line-height: 1.5;
  }
  .event-card .event-context .ec-sep { margin: 0 1px; }
}
/* ==========================================================================
   v4.0.101 — 闪烁限流：常驻闪烁动画的周期统一拉到 >= 8s
   --------------------------------------------------------------------------
   问题：故障卡标题切片、资源危险数值、CONCEALED 芯片、场地小件、核心电弧等
   一堆 steps() 动画周期只有 1.2 ~ 5.6s，多张卡同时在屏上时整页一直在抖，
   已经影响读数值和点牌。
   做法：只改「周期」，不动缓动/造型/配色；一次性动画（入场、合成、结算、
   悬浮反馈）不在此列。整块放在 no-preference 里，避免盖掉文件前面的
   reduced-motion 全停规则。
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* 资源模块：危险数值、信号干扰、状态芯片 */
  .resource-card.is-critical .resource-value {
    animation: valueAlarmQuiet 9s steps(1, end) infinite !important;
  }
  .resource-card.is-obscured { animation-duration: 9s !important; }
  .status-chip.is-critical { animation-duration: 8.6s !important; }
  .rec i { animation-duration: 8s !important; }

  /* 故障卡：标题切片、持续标记、倒计时、绝境文案、场地小件 */
  .fault-card__title .fault-title__text::before,
  .fault-card__title .fault-title__text::after { animation-duration: 9s !important; }
  .fault-title__duration.is-permanent { animation-duration: 9s !important; }
  .fault-countdown { animation-duration: 9s !important; }
  .fault-card__omen,
  .fault-rule__flavor { animation-duration: 9s !important; }
  .fault-scene__diamond,
  .fault-scene__pit,
  .fault-scene__spark,
  .fault-scene__flame,
  .fault-scene__cell.is-on { animation-duration: 9s !important; }

  /* 补丁层 / 手牌 */
  .patch-card.is-concealed .effect-chip.is-negative,
  .reward-option.is-concealed .effect-chip.is-negative,
  .bay-patch.is-concealed .effect-chip.is-negative { animation-duration: 8.4s !important; }
  .bay-patch.is-at-risk .bay-risk-tag { animation-duration: 9s !important; }
  .hand-art__glitch { animation-duration: 9s !important; }

  /* 棋盘 / 核心 / 压力读数 */
  .board-frame { animation-duration: 9s !important; }
  .board-core__ring--inner { animation-duration: 9s !important; }
  .room-reactor b::after { animation-duration: 9s !important; }
  .fault-pressure { animation-duration: 9s !important; }
  .screen-fx__vignette { animation-duration: 9s !important; }

  /* 按钮指示灯 */
  .end-day-btn__led,
  .maint-btn__led { animation-duration: 9s !important; }
  .end-day-btn.has-ap-left { animation-duration: 9s !important; }
  body.ap-spent .end-day-btn:not(:disabled) { animation-duration: 9s !important; }

  /* 入口层文字切割（原 7s / 5.5s） */
  body[data-mood="unstable"] .world-bg__image--state { animation-duration: 9s !important; }
  .glitch-text::before { animation-duration: 9s !important; }
  .glitch-text::after { animation-duration: 11s !important; }
  .mega-title::before { animation-duration: 9s !important; }
  .mega-title::after { animation-duration: 11s !important; }
}

/* 危险数值：整个周期保持可读，只在末尾闪两下（原来是 1.4s 一明一暗） */
@keyframes valueAlarmQuiet {
  0%, 82%, 100% { opacity: 1; }
  83% { opacity: 0.5; }
  86% { opacity: 1; }
  89% { opacity: 0.78; }
  }

/* ==========================================================================
   v4.0.101 — 模块赛博乱码
   每 10s 掷一次骰子，命中就把 1~2 处可见文字短暂替换成乱码再还原。
   ========================================================================== */
.is-cyber-garbling {
  color: #7cf7d4 !important;
  text-shadow: 1px 0 rgba(255, 80, 120, 0.8), -1px 0 rgba(90, 220, 255, 0.8) !important;
  letter-spacing: 0.06em;
  animation: cyberGarbleJitter 0.18s steps(2, end) infinite;
}

/* 窄屏去掉字距：乱码字形比原文宽，360 宽档实测会顶出自身盒子 6px */
@media (max-width: 480px) {
  .is-cyber-garbling { letter-spacing: 0; }
}

@keyframes cyberGarbleJitter {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-1px); }
}
/* ==========================================================================
   v4.0.102 — 故障卡标题 / 规则行的黑杠
   3~5 张故障卡（is-count-3 / is-count-4 / is-many）时，早期为了压住背后
   的图纸纹理，给 h3 和 .fault-rule 铺了实心 #030906。这两个元素在弹性行里
   会被拉到 360~407px，而文字只有 90~110px —— 于是文字右边空出一整条纯黑
   硬边色块（用户截图框选的就是它）。
   这里把实心底换成「左侧压暗 → 右侧渐隐」的底衬：文字下面仍够暗，右边的
   空白平滑融回卡片纹理，不再有黑杠硬边。
   ========================================================================== */
@media (min-width: 1001px) {
  .fault-list.is-count-3 .fault-card__title h3,
  .fault-list.is-count-4 .fault-card__title h3,
  .fault-list.is-count-3 .fault-card__title .fault-rule,
  .fault-list.is-count-4 .fault-card__title .fault-rule {
    background: linear-gradient(
      90deg,
      rgba(3, 9, 6, 0.92) 0%,
      rgba(3, 9, 6, 0.70) 34%,
      rgba(3, 9, 6, 0.34) 62%,
      rgba(3, 9, 6, 0) 100%
    ) !important;
    box-shadow: none !important;
  }

  /* 规则行比标题短，渐隐收得更早，避免残留一条灰边 */
  .fault-list.is-count-3 .fault-card__title .fault-rule,
  .fault-list.is-count-4 .fault-card__title .fault-rule {
    background: linear-gradient(
      90deg,
      rgba(3, 9, 6, 0.90) 0%,
      rgba(3, 9, 6, 0.62) 30%,
      rgba(3, 9, 6, 0) 74%
    ) !important;
  }
}
/* ==========================================================================
   v4.0.103 — 鼠标划过时的闪烁同样限流（至少 6s 一次）
   维护按钮 / 故障手牌 / 故障卡自带一批 0.16 ~ 2.4s 的 hover 循环动画：
   鼠标扫过去就是「见谁闪谁」，比氛围闪烁还密。
   规则分两层：
     1) 默认：这些动画被压成「只跑一帧就结束」（关键帧末态即常态，fill 为 none
        会自动回落到基础样式），视觉上只剩静态高亮 —— 不再闪；
     2) body.is-hover-fx（由 game.js 的 6s 闸门每 6s 最多加一次、持续 1.15s）：
        才放行完整一轮闪烁。
   ========================================================================== */
.maint-btn:hover::after,
.maint-btn:hover .maint-btn__led,
.maint-btn:hover .maint-btn__meter i,
.maint-btn:hover .maint-btn__icon,
.maint-btn:hover > svg,
.patch-card.is-fault:hover,
.patch-card.is-fault:hover::after,
.patch-card.is-fault:hover .patch-card__art,
.patch-card.is-fault:hover .patch-card__fault-label {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
}


/* —— 6s 闸门放行后：完整跑一轮，不循环 —— */
body.is-hover-fx .maint-btn:hover::after {
  animation: maintPulse 1.8s ease-in-out 1 !important;
}
body.is-hover-fx .maint-btn:hover .maint-btn__led {
  animation: maintLed 1.1s steps(2, end) 1 !important;
}
body.is-hover-fx .maint-btn:hover .maint-btn__meter i {
  animation: maintMeter 1.2s ease-in-out 1 !important;
}
body.is-hover-fx .maint-btn:hover > svg,
body.is-hover-fx .maint-btn:hover .maint-btn__icon {
  animation: maintHoverKick 0.62s ease-in-out 1 alternate !important;
}
body.is-hover-fx .maint-btn[data-maintenance="power"]:hover > svg {
  animation: maintPower 0.55s steps(2, end) 1 !important;
}
body.is-hover-fx .maint-btn[data-maintenance="ration"]:hover > svg {
  animation: maintRation 1.6s ease-in-out 1 !important;
}
body.is-hover-fx .maint-btn[data-maintenance="structure"]:hover > svg {
  animation: maintStructure 0.9s cubic-bezier(0.3, 0.8, 0.4, 1) 1 alternate !important;
}
body.is-hover-fx .maint-btn[data-maintenance="core"]:hover > svg {
  animation: maintCore 1.15s linear 1 !important;
}
body.is-hover-fx .patch-card.is-fault:hover {
  animation: handFaultAlarm 0.62s steps(2) 1 !important;
}
body.is-hover-fx .patch-card.is-fault:hover::after {
  animation: faultCardGlitch 0.42s steps(2) 1 !important;
}
body.is-hover-fx .patch-card.is-fault:hover .patch-card__art {
  animation: handFaultJitter 0.16s steps(2) 1 !important;
}
body.is-hover-fx .patch-card.is-fault:hover .patch-card__fault-label {
  animation: handFaultBlink 0.55s steps(1) 1 !important;
}
/* ===== v4.0.105 — 鼠标移动不再触发全屏重合成 ===== */
/* 视差的自定义属性现在只写在 .world-bg__room 自己身上（原来是写在 :root，整棵样式树每帧失效），
   这里把这层提升为合成层并去掉 transform 过渡，避免 33fps 的写入反复打断过渡、持续重绘。 */
.world-bg__room {
  will-change: transform;
  transition: none;
}
/* 手牌标题故障延迟统一压到 3s 以内：四张牌都会在同一轮里闪到，
   不会出现"右下角那张永远不闪"（原来是 index*1.1 + plateSeed*0.23，最晚可到 4.2s 之外）。 */.world-bg__room {
  will-change: transform;
  transition-property: none !important;
  transition-duration: 0s !important;
}
/* ===== v4.0.106 — 面板区停止"自我闪烁"，只保留状态色 ===== */
/* 用户反馈：鼠标不动时，资源卡（稳定度在闪）、手牌整卡、维护指令、结束本日按钮、事件记录
   仍然不停闪。实测待机时有 211 个常驻动画在跑，其中大量 2.4–7.5s 的呼吸/扫描/流光，
   多相位叠加就成了"永远有东西在闪"。这里把面板区的快节奏呼吸/流光全部停掉，
   改成静态发光；闪烁只保留给「鼠标 hover」这一条路径（6s 一次、持续 380ms）。 */
.segment.is-filled,
.resource-icon,
.resource-card::after,
.resource-card.is-critical .resource-value,
.resource-card.is-obscured,
.status-chip.is-critical,
.maint-btn__led,
.maint-btn__meter i::after,
.end-day-btn__led,
.end-day-btn.has-ap-left,
.end-day-btn.has-ap-left::after,
.end-day-btn__arrow,
.day-tick.is-current,
.topbar::after,
.signal-dot,
.hand-art__scan,
.hand-art__emblem,
.hand-art__sigil,
.hand-art__glitch,
.hand-art__core polygon,
.patch-card h4.card-title-glitch::before,
.patch-card h4.card-title-glitch::after,
.fault-card .fault-title__text::before,
.fault-card .fault-title__text::after,
.fault-scene__cell.is-on,
.glitch-text::before,
.glitch-text::after,
#log,
#log * {
  animation: none !important;
}
/* 停掉动画后补静态信号，避免"看着像坏了" */
.resource-card.is-critical .resource-value {
  color: #ffc0ae !important;
  text-shadow: 0 0 12px rgba(255, 96, 74, 0.55) !important;
}
.resource-icon {
  filter: drop-shadow(0 0 6px rgba(124, 247, 212, 0.35));
}
.segment.is-filled {
  box-shadow: 0 0 6px rgba(124, 247, 212, 0.45);
}
.maint-btn__led,
.end-day-btn__led {
  opacity: 1 !important;
  box-shadow: 0 0 9px currentColor !important;
}
.end-day-btn.has-ap-left {
  border-color: rgba(124, 247, 212, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(124, 247, 212, 0.22), 0 0 16px rgba(124, 247, 212, 0.14) !important;
}
.patch-card h4.card-title-glitch::before,
.patch-card h4.card-title-glitch::after,
.fault-card .fault-title__text::before,
.fault-card .fault-title__text::after,
.glitch-text::before,
.glitch-text::after {
  opacity: 0 !important;
}
/* v4.0.106b — 故障全息 / 场景插画 / 日志环境条里的快节奏闪烁一并停掉（用户："可能我还标记漏了"） */
.fault-viz,
.fault-viz *,
.fault-scene__spark,
.fault-scene__diamond,
.fault-scene__pit,
.fault-scene__sweep,
.fault-schematic__scan,
.log-ambient__voice i,
.evac-track,
.evac-track *,
.scene-v2__holo,
.scene-v2__holo *,
.scene-v2__prop,
.scene-v2__prop *,
.hand-hint,
.target-lock,
.target-lock * {
  animation: none !important;
}
/* v4.0.106c — 收尾：撤离倒计时 / 故障卡脉冲 / 事件记录回声条 / 手牌滚动提示 也停下；
   背景信标与房间反应堆属于世界层，只把周期拉到 9s，不整块熄灭。 */
#evacCountdown,
.fault-card,
.fault-schematic__plot g,
.log-echo,
.log-echo *,
#handScrollHint,
.hand-scroll-hint {
  animation: none !important;
}
.world-bg__beacons i,
.room-reactor b {
  animation-duration: 9s !important;
}
/* v4.0.106d — 原件里不少规则带 !important 且选择器更长，普通类名压不住。
   这里用 ID 作用域（#faultList / #hand / #log / #resources）整块停下装饰动画，
   只保留世界层背景（雨、噪点、信标、反应堆，周期已拉到 9s）。 */
#faultList,
#faultList *,
#resources,
#resources *,
#maintDock,
#maintDock *,
#endDayBtn,
#endDayBtn *,
#hand,
#hand *,
#log,
#log *,
#patchBay,
#patchBay *,
#eventOverlay,
#eventOverlay * {
  animation: none !important;
}
/* v4.0.106e — hover 反馈改成"静态高亮"，不再靠动画闪：
   面板区动画已整体停下，鼠标移上去时用一档亮度 + 描边提示，瞬时生效、绝不闪烁。 */
body.is-hover-fx .maint-btn:hover,
body.is-hover-fx .patch-card:hover,
body.is-hover-fx .fault-card:hover,
.maint-btn:hover,
.patch-card:hover,
.fault-card:hover {
  filter: brightness(1.07);
  box-shadow: 0 0 0 1px rgba(124, 247, 212, 0.42), 0 0 16px rgba(124, 247, 212, 0.16) !important;
  transition: filter 120ms ease-out, box-shadow 120ms ease-out;
}
/* ================================================================
   v4.0.108 — 模态框打开时，背后的世界层必须停下来
   ----------------------------------------------------------------
   事件覆层 / 每日结算 / 挑战 / 挑战奖励 / 协议 / 帮助 都是
   `.overlay`（backdrop-filter: blur(10px) + rgba(2,5,3,.83)）。
   它们背后压着 world-bg（雨 1.6s、光 16s、尘 38s）、screen-fx
   （噪点 0.35s steps(2)）、fault-fx（扫描 8s）、room（雾 24s、扫描 9s）。
   这些层逐帧变化 → 模糊源逐帧重算 → 弹窗整块跟着闪，
   而且它们是常驻循环，根本没有「间隔」，所以看起来像界面自己在抽。
   挂起用 animation-play-state（不是 animation: none），
   保留当前帧、关掉覆层后从原位继续，不会出现跳帧。
   ================================================================ */
body.is-modal-open .world-bg,
body.is-modal-open .world-bg *,
body.is-modal-open .world-bg *::before,
body.is-modal-open .world-bg *::after,
body.is-modal-open .screen-fx,
body.is-modal-open .screen-fx *,
body.is-modal-open .screen-fx *::before,
body.is-modal-open .screen-fx *::after,
body.is-modal-open .fault-fx,
body.is-modal-open .fault-fx *,
body.is-modal-open .fault-fx *::before,
body.is-modal-open .fault-fx *::after,
body.is-modal-open .room,
body.is-modal-open .room *,
body.is-modal-open .room *::before,
body.is-modal-open .room *::after,
body.is-modal-open .room-scan,
body.is-modal-open .room-scan::before,
body.is-modal-open .room-dust,
body.is-modal-open .room-dust::before,
body.is-modal-open .room-reactor::after,
body.is-modal-open .day-splash,
body.is-modal-open .day-splash::before,
body.is-modal-open .day-splash::after {
  animation-play-state: paused !important;
}

/* 夜里那张结算卡：装饰环与点阵原本 1.2s / 2.2s 循环，一闪一闪像在报警；
   进度条（night-progress i）与阶段文字（nightStage）保持原样，那是功能反馈。 */
#nightOverlay .night-dots,
#nightOverlay .night-orbit i:nth-child(2),
#nightOverlay .night-orbit i:nth-child(3) {
  animation: none !important;
}
#nightOverlay .night-orbit i:nth-child(1) {
  animation-duration: 8.4s !important;
}

/* 结算卡评级光晕 3.8s → 9s（本版统一的最短闪烁间隔）。 */
#endOverlay .grade,
#endOverlay .end-card .grade {
  animation-duration: 9s !important;
}
/* v4.0.108b — 上面那份清单按容器点名的，漏了棋盘圆环 / 反应堆 / 信标这些
   散在别处的层（实测还有 27 个动画在跑）。改成「先全停、再把当前打开的
   那一层放行」：模态框打开期间屏幕背后的一切都静止，只有弹窗自己还能动
   （弹窗内部的装饰动画早在 v4.0.106 就被冻结成静态，这里放行不会复活它们）。 */
body.is-modal-open *,
body.is-modal-open *::before,
body.is-modal-open *::after {
  animation-play-state: paused !important;
}

body.is-modal-open .overlay:not([hidden]),
body.is-modal-open .overlay:not([hidden]) *,
body.is-modal-open .overlay:not([hidden]) *::before,
body.is-modal-open .overlay:not([hidden]) *::after,
body.is-modal-open .night-overlay:not([hidden]),
body.is-modal-open .night-overlay:not([hidden]) *,
body.is-modal-open .night-overlay:not([hidden]) *::before,
body.is-modal-open .night-overlay:not([hidden]) *::after {
  animation-play-state: running !important;
}
/* ================================================================== */
/* v4.0.109 — 常驻「不停闪」的源头改静态，闪烁统一走 6s 以上节流       */
/*                                                                     */
/* 用户反馈：这一局中间背景、活动故障协议、右侧手牌都在不停闪，而且     */
/* 鼠标一动还会额外闪，全部没有间隔。逐帧取样定位到三个常驻源：         */
/*   · .screen-fx__noise  grain 位移 0.35s steps(2) —— 每秒闪 3 次的   */
/*     全屏颗粒频闪，z-index 260 盖在所有界面之上，所以「哪都在闪」；   */
/*   · .fault-card__schematic::before  sceneTonePulse 7.5s / 故障数≥4  */
/*     时 4.4s 的整块色调呼吸，正好是「中间的背景」；                   */
/*   · .fault-card__schematic::after   sceneScan 8.5s 扫描带横扫。       */
/* 前两条一个在高频档（0.35s），一个在 4.4s，都低于 6s 的容忍线。       */
/* ================================================================== */
.screen-fx__noise {
  animation: none !important;
}

/* 颗粒只在「允许的氛围闪烁」那一拍抖一下（由 JS 的 ambientFx 闸门发这个类，
   间隔 ≥8s），其余时间保持静态，避免持续频闪。 */
.screen-fx__noise.is-noise-pulse {
  animation: noiseWalk 0.35s steps(2) 1 !important;
}

.fault-list .fault-card__schematic::before {
  animation: none !important;
  opacity: 0.52 !important;
}

.fault-list .fault-card__schematic::after {
  animation: none !important;
  opacity: 0.5 !important;
}

/* 世界层信号灯与电力抖动都在 6s 以下，统一压到 9s（保留呼吸感，不再频闪） */
.world-bg__beacons i {
  animation-duration: 9s !important;
}

body.fx-power .fault-fx__veil {
  animation-duration: 9s !important;
}

body.fx-power .fault-fx__scan {
  animation-duration: 9s !important;
}

/* 手牌：hover 放行的那批动画本身就靠 body.is-hover-fx 限流，这里再确保
   未放行时（绝大多数时间）手牌内没有任何循环动画。 */
#hand {
  --hand-fx-gate: 0;
}
/* v4.0.109b — 世界层（.world-bg / 反应堆）整体改静态。
   逐组恢复动画的二分测试结果：把全部动画 pause 后，手牌区与故障区都只剩
   1 个不同帧（完全静止）；只恢复 .world-bg 子树，两个区域立刻回到 6/6——
   也就是说「哪都在闪」的真正来源是背景层：雨丝 1.6s、光斑 16s、尘 38s、
   雾 24s、光束 18s、余烬 17~27s、信标 9s、反应堆环 10~16s。
   这些面板本身是半透明的（#hand 的 background-color 是 rgba(0,0,0,0)，
   只靠 svg 贴图叠色），背景一动，面板上就跟着"沙沙"响。
   既然要让闪烁不低于 6s，直接把背景层停成静态，需要氛围时由
   ambientFx 闸门（≥8s）放行一次颗粒抖动（.screen-fx__noise.is-noise-pulse）。 */
.world-bg,
.world-bg *,
.world-bg *::before,
.world-bg *::after,
.room__fog,
.room__beam,
.world-bg__rain,
.world-bg__dust,
.world-bg__light,
.room__embers i,
.world-bg__beacons i,
.room-reactor i,
.room-reactor b,
.room-reactor b::before,
.room-reactor b::after,
.beacon-pulse,
.signal-dot {
  animation: none !important;
}

/* 关掉动画后给世界层补回一点静态层次，避免整块死板 */
.world-bg__rain { opacity: 0.32 !important; }
.world-bg__beacons i { box-shadow: 0 0 8px 2px rgba(255, 194, 102, 0.5), 0 0 30px 9px rgba(255, 194, 102, 0.12); }
.room-reactor b::after { opacity: 0.7 !important; }
/* v4.0.109c — 全屏层 .room-dust / .room-scan / .page-aura / .mobile-core 也停。
   逐层隐藏测试：base、隐藏 screen-fx、隐藏 world-bg、隐藏 fault-fx 都还是
   CHANGED；再隐藏 .page-aura + .room-dust + .room-scan + .mobile-core 之后
   整帧哈希变成 STATIC。这四层是 fixed 全屏覆盖层，其中
   · .room-dust i  dustRise 15~26s（浮尘持续上飘）
   · .room-scan::before  roomScan 9s（横扫光带）
   · .page-aura / .mobile-core 的呼吸光晕
   全部叠在界面之上（z 1~6），半透明，所以看起来「哪都在沙沙闪」。 */
.room-dust,
.room-dust *,
.room-dust *::before,
.room-dust *::after,
.room-scan,
.room-scan *,
.room-scan *::before,
.room-scan *::after,
.page-aura,
.page-aura *,
.page-aura *::before,
.page-aura *::after,
.mobile-core,
.mobile-core *,
.mobile-core *::before,
.mobile-core *::after {
  animation: none !important;
}

/* 静态补偿：保留尘埃/光带的层次，只是不再动 */
.room-dust { opacity: 0.5 !important; }
.room-scan::before { opacity: 0.22 !important; }
/* v4.0.109d — 上面那份写的是 `.room-scan *::before`（只命中后代），
   而扫描带是 `.room-scan::before`（就在元素自己身上），所以还在跑。补上。 */
.room-scan::before,
.room-scan::after,
.page-aura::before,
.page-aura::after,
.mobile-core::before,
.mobile-core::after,
.room-dust::before,
.room-dust::after {
  animation: none !important;
}
/* ================================================================
   v4.0.109e — 手牌 hover 不再「整卡明暗跳变」
   ----------------------------------------------------------------
   原来指针跨卡时：hover 的那张 brightness(1.16)+drop-shadow 强提亮，
   同排其它卡被压到 opacity .46 / brightness .72，卡片背景再 scale(1.035)。
   四次大幅变化叠在一起，鼠标左右一扫就是一闪一闪。
   现在：提亮幅度收窄到 1.09、压暗只到 .78/.92、去掉 scale 位移，
   全部变化走 200ms 过渡 —— 仍然是「亮起来」的反馈，但不再跳帧。
   ================================================================ */
@media (min-width: 761px) {
  .hand:has(.patch-card:hover) .patch-card:not(:hover),
  .hand:has(.patch-card:focus-visible) .patch-card:not(:focus-visible) {
    opacity: .78;
    filter: saturate(.82) brightness(.92);
    transition: opacity 200ms ease, filter 200ms ease;
  }

  .hand .patch-card:hover {
    filter: brightness(1.09) saturate(1.1) drop-shadow(0 0 12px color-mix(in srgb, var(--card-accent) 45%, transparent));
    transition: filter 200ms ease-out, box-shadow 200ms ease-out;
  }

  .hand .patch-card.is-fault:hover {
    filter: brightness(1.09) saturate(1.12) drop-shadow(0 0 12px rgba(255, 82, 70, 0.45));
  }

  .patch-card:hover > .patch-card__bg {
    opacity: .78;
    transform: none;
  }

  .patch-card:hover > .patch-card__art {
    opacity: .52;
  }
}
/* ================================================================
   v4.0.109f — 手牌 hover 不再「整张卡跳起来 + 亮白按钮炸出来」
   ----------------------------------------------------------------
   styles.css:14693 的 .hand .patch-card:hover 带 transform: translateY(-9px)
   scale(1.03) !important，指针跨卡时整张卡弹一下；14718 又把 .cover-cta
   刷成纯白 #ffffff。两者叠加 = 鼠标扫过手牌时一片明暗爆闪。
   这里把位移/缩放收掉，只留描边发光与一档亮度；CTA 用卡色而不是纯白。
   ================================================================ */
@media (hover: hover) {
  .hand .patch-card:hover,
  .hand .patch-card:focus-visible {
    transform: none !important;
    filter: brightness(1.07) saturate(1.06) !important;
  }

  .hand .patch-card:hover .cover-cta,
  .hand .patch-card:focus-visible .cover-cta {
    background: color-mix(in srgb, var(--card-accent) 82%, #0b1a18) !important;
    border-color: color-mix(in srgb, var(--card-accent) 62%, #ffffff) !important;
    color: #04120d !important;
    box-shadow: 0 0 14px color-mix(in srgb, var(--card-accent) 34%, transparent) !important;
  }
}
/* ================================================================
   v4.0.110 — 效果扰频器：把「被吞掉的那一项」画在牌面上
   ----------------------------------------------------------------
   原来只有出牌瞬间一条 toast，牌面数字纹丝不动，玩家既看不出
   是否生效、也看不出吞的是哪一项。现在牌面：顶部红标 + 被吞的
   chip 划掉并打叉，整日稳定，可以提前规划。
   ================================================================ */
.patch-card__scr {
  flex: 0 0 auto;
  max-width: none;
  white-space: nowrap;
  font: 800 8.5px/1 var(--mono, ui-monospace, monospace);
  letter-spacing: .04em;
  color: #ffd3cb;
  background: rgba(92, 18, 14, .82);
  border: 1px solid rgba(255, 120, 108, .62);
  border-radius: 3px;
  padding: 2px 4px;
}

.patch-card.is-scrambled {
  box-shadow: inset 0 0 0 1px rgba(255, 120, 108, .30);
}

.patch-card.is-scrambled .effect-chip.is-scrambled {
  position: relative;
  text-decoration: line-through;
  text-decoration-color: rgba(255, 132, 120, .95);
  text-decoration-thickness: 2px;
  opacity: .58;
  filter: grayscale(.55);
  border-style: dashed;
}

.patch-card.is-scrambled .effect-chip.is-scrambled::after {
  content: '✕';
  position: static;
  display: inline-block;
  font-size: 8px;
  line-height: 1;
  color: #ff9c90;
  text-shadow: 0 0 6px rgba(255, 70, 60, .75);
}

@media (max-width: 760px) {
  .patch-card__scr {
    font-size: 8px;
    max-width: 42%;
  }
}
/* v4.0.110 打包修订 — 帮助面板删掉「声音与配乐」一节后只剩 5 节，
   栅格是行优先的，高矮不齐时右列会空出一大块。改成双列杂志流：
   两列各自填满，阅读顺序自上而下、再换右列。 */
@media (min-width: 861px) {
  .help-card .help-grid {
    display: block;
    column-count: 2;
    column-gap: 38px;
  }
  .help-card .help-grid > section {
    break-inside: avoid;
    page-break-inside: avoid;
    padding-top: 0;
  }
  .help-card .help-grid > section:first-child { padding-top: 18px; }
}