/* Cross-document view transitions smooth out the white flash browsers
   show between unloading one page and rendering the next. Browsers that
   don't support this rule (older Firefox, older Safari) ignore it and
   keep the default navigation behavior. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 140ms;
  animation-timing-function: ease;
}

:root {
  color-scheme: dark;
  --bg: #0b0b0c;
  --bg-2: #101112;
  --panel: #151617;
  --panel-2: #1c1d1f;
  --panel-3: #242527;
  --line: #3b3d40;
  --line-soft: #27292c;
  --text: #ececeb;
  --muted: #aaa9a5;
  --faint: #75746f;
  --accent: #e23d35;
  --accent-dark: #8f211d;
  --bad: #ff6a5f;
  --good: #4caf6a;
  --focus: #ffffff;
  --color-white: white;
  --color-transparent: transparent;
  --backdrop-88: rgba(5, 5, 6, 0.88);
  --backdrop-92: rgba(5, 5, 6, 0.92);
  --white-025: rgba(255, 255, 255, 0.025);
  --white-035: rgba(255, 255, 255, 0.035);
  --white-055: rgba(255, 255, 255, 0.055);
  --white-060: rgba(255, 255, 255, 0.06);
  --white-100: rgba(255, 255, 255, 0.10);
  --white-160: rgba(255, 255, 255, 0.16);
  --white-180: rgba(255, 255, 255, 0.18);
  --white-200: rgba(255, 255, 255, 0.2);
  --white-220: rgba(255, 255, 255, 0.22);
  --white-350: rgba(255, 255, 255, 0.35);
  --white-760: rgba(255, 255, 255, 0.76);
  --white-850: rgba(255, 255, 255, 0.85);
  --white-860: rgba(255, 255, 255, 0.86);
  --white-900: rgba(255, 255, 255, 0.9);
  --black-120: rgba(0, 0, 0, 0.12);
  --black-160: rgba(0, 0, 0, 0.16);
  --black-220: rgba(0, 0, 0, 0.22);
  --black-320: rgba(0, 0, 0, 0.32);
  --black-420: rgba(0, 0, 0, 0.42);
  --black-450: rgba(0, 0, 0, 0.45);
  --black-500: rgba(0, 0, 0, 0.5);
  --black-550: rgba(0, 0, 0, 0.55);
  --black-660: rgba(0, 0, 0, 0.66);
  --black-680: rgba(0, 0, 0, 0.68);
  --black-760: rgba(0, 0, 0, 0.76);
  --black-780: rgba(0, 0, 0, 0.78);
  --black-820: rgba(0, 0, 0, 0.82);
  --black-850: rgba(0, 0, 0, 0.85);
  --black-860: rgba(0, 0, 0, 0.86);
  --text-120: rgba(236, 236, 235, 0.12);
  --text-220: rgba(236, 236, 235, 0.22);
  --text-230: rgba(236, 236, 235, 0.23);
  --text-240: rgba(236, 236, 235, 0.24);
  --text-280: rgba(236, 236, 235, 0.28);
  --good-140: rgba(76, 175, 106, 0.14);
  --good-160: rgba(76, 175, 106, 0.16);
  --good-220: rgba(76, 175, 106, 0.22);
  --good-350: rgba(76, 175, 106, 0.35);
  --good-420: rgba(76, 175, 106, 0.42);
  --good-450: rgba(76, 175, 106, 0.45);
  --good-550: rgba(76, 175, 106, 0.55);
  --bad-140: rgba(255, 106, 95, 0.14);
  --accent-120: rgba(226, 61, 53, 0.12);
  --accent-580: rgba(226, 61, 53, 0.58);
  --accent-760: rgba(226, 61, 53, 0.76);
  --rare-highlight: rgba(180, 240, 198, 0.9);
  --epic: #5ca8ff;
  --epic-160: rgba(92, 168, 255, 0.16);
  --epic-220: rgba(92, 168, 255, 0.22);
  --epic-350: rgba(92, 168, 255, 0.35);
  --epic-420: rgba(92, 168, 255, 0.42);
  --epic-450: rgba(92, 168, 255, 0.45);
  --epic-550: rgba(92, 168, 255, 0.55);
  --overlay-panel: rgba(15, 16, 17, 0.78);
  --surface-absolute: #090909;
  --surface-item: #080808;
  --surface-deep: #0a0a0b;
  --surface-black: #070707;
  --surface-hit: #341816;
  --secure-text: #08140c;
  --map-frozen: #10202a;
  --map-cold: #142a31;
  --map-warm: #382410;
  --map-hot: #3b1311;
  --map-frozen-line: #6aa6c7;
  --map-cold-line: #74c6bd;
  --map-warm-line: #d59d4d;
  --character-frame: #292621;
  --character-frame-light: #504a42;
  --character-frame-dark: #0d0c0b;
  --character-console-overlay: rgba(7, 10, 12, 0.62);
  --character-paper-text: #f3efe6;
  --character-paper-muted: rgba(243, 239, 230, 0.78);
  --character-paper-shadow: rgba(0, 0, 0, 0.82);
  --character-status-face: #171512;
  --character-money-ink: #191c25;
  --character-money-muted: rgba(25, 28, 37, 0.72);
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --display: "Arial Black", Impact, Haettenschweiler, "Roboto Condensed", sans-serif;
  --z-scanlines: 70;
  /* Single horizontal gutter for everything in the main column that
     holds text — breadcrumb, content-stack, notices, hero overlay. Keeps
     left edges aligned at one inset value across the whole page. Hero
     images and standalone location images stay full-bleed (0 padding)
     by design.

     The scale (min 20 → max 36) lifts the lower bound off the visual
     edge on phones (no text hugging the side) and gives desktop a more
     generous breathing room than the old 26px ceiling. The 3vw rate
     means the gutter grows linearly with viewport width up to ~1200px,
     then locks at 36px — past that, more whitespace would only push
     content toward the centre without adding readability. */
  --page-gutter: clamp(20px, 3vw, 36px);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  min-height: 100dvh;
  margin: 0;
  background:
    linear-gradient(var(--backdrop-88), var(--backdrop-92)),
    repeating-linear-gradient(0deg, var(--white-025) 0 1px, var(--color-transparent) 1px 4px),
    url("/static/images/bg.webp") center / cover fixed,
    var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.45;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-scanlines);
  pointer-events: none;
  opacity: 0.14;
  background-image:
    radial-gradient(circle at 25% 15%, var(--white-180) 0 1px, var(--color-transparent) 1px),
    radial-gradient(circle at 70% 65%, var(--white-100) 0 1px, var(--color-transparent) 1px);
  background-size: 19px 23px, 29px 31px;
  mix-blend-mode: screen;
}

body.is-ready .game-main,
body.is-ready .side-rail,
body.is-ready .auth-panel,
body.is-ready .landing-panel,
body.is-ready .admin-shell,
body.is-ready .terms-panel {
  animation: systemIn 260ms ease both;
}

@keyframes systemIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}

a:hover {
  color: var(--accent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 100;
  transform: translateY(-180%);
  background: var(--text);
  color: var(--bg);
  border: 2px solid var(--accent);
  padding: 9px 12px;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 1px;
  padding: 0;
  background: var(--line);
  border-bottom: 1px solid var(--line-soft);
}

.brand,
.topnav {
  min-height: 40px;
  background: var(--bg);
}

.brand {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 clamp(10px, 2vw, 20px);
  border: 0;
  color: var(--text);
  font-family: var(--display);
  font-size: 1.04rem;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
}

.brand::before {
  content: "//";
  color: var(--text);
  font-family: var(--mono);
}

.site-topbar a:hover,
.site-topbar .link-button:hover {
  color: var(--text);
}

.site-topbar .link-button:hover:not(:disabled) {
  background: var(--color-transparent);
  transform: none;
}

.topnav,
.inline-form,
.inline-actions,
.admin-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.topnav {
  justify-content: flex-end;
  padding: 0 clamp(10px, 2vw, 20px);
  font-size: 0.78rem;
}

.topnav a {
  border: 0;
}

.topnav form {
  margin: 0;
}

.page-shell {
  width: min(1440px, calc(100% - 24px));
  margin: 0 auto;
  padding: 18px 0 48px;
}

.page-shell.is-fullscreen {
  width: 100%;
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.landing-panel {
  --landing-left-offset: clamp(62px, 8.5vw, 140px);
  width: 100%;
  height: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 320px);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(20px, 4vw, 56px);
  align-items: stretch;
  overflow: hidden;
  padding: clamp(24px, 4.4vw, 62px);
  background:
    var(--landing-hero-image) center center / cover no-repeat,
    var(--bg);
  border: 0;
  box-shadow: none;
}

.landing-copy {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  padding-top: clamp(14px, 3.6vh, 44px);
  justify-self: start;
  text-align: left;
  transform: translateX(var(--landing-left-offset));
}

.landing-copy h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(2.45rem, 6.05vw, 5.85rem);
  line-height: 0.86;
  letter-spacing: -0.065em;
  white-space: nowrap;
  text-shadow:
    0 4px 18px var(--black-850),
    0 1px 0 var(--black-850);
}

.landing-copy p {
  width: max-content;
  margin: clamp(8px, 1.25vh, 14px) 0 0;
  padding: 4px 9px;
  color: var(--white-860);
  background: var(--black-550);
  border: 1px solid var(--white-160);
  font-family: var(--mono);
  font-size: clamp(0.78rem, 1.12vw, 1.04rem);
  line-height: 1.1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px var(--black-850);
}

.landing-feature-strip {
  grid-column: 1;
  grid-row: 2;
  --landing-feature-size: min(188px, calc((100vw - 430px) / 3));
  width: auto;
  align-self: end;
  justify-self: start;
  display: grid;
  grid-template-columns: repeat(3, var(--landing-feature-size));
  gap: clamp(8px, 1.2vw, 14px);
  transform: translateX(var(--landing-left-offset));
}

.landing-feature-card {
  position: relative;
  width: var(--landing-feature-size);
  height: var(--landing-feature-size);
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--white-160);
  background: var(--black-660);
  box-shadow: 0 14px 28px var(--black-500);
  isolation: isolate;
}

.landing-feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, var(--color-transparent) 68%, var(--black-320) 100%);
  pointer-events: none;
}

.landing-feature-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.01) brightness(1.08);
}

.landing-feature-card strong {
  position: absolute;
  z-index: 2;
  left: clamp(8px, 1.1vw, 12px);
  right: clamp(8px, 1.1vw, 12px);
  bottom: clamp(7px, 1vw, 10px);
  color: var(--text);
  font-family: var(--display);
  font-size: clamp(0.58rem, 0.88vw, 0.82rem);
  line-height: 1.05;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px var(--black-850);
}

.landing-entry {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  gap: 12px;
  align-self: center;
  transform: translateX(clamp(-90px, -5vw, -34px));
}

.landing-play-form {
  margin: 0;
}

.landing-play-button {
  width: 100%;
  min-height: clamp(42px, 4.8vw, 50px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  box-shadow: 0 12px 24px var(--black-450);
  font-family: var(--display);
  font-size: clamp(1.08rem, 1.75vw, 1.32rem);
}

.landing-play-icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  fill: currentColor;
}

.landing-login-card {
  display: grid;
  gap: 10px;
  padding: clamp(14px, 2vw, 18px);
  background: var(--black-660);
  border: 1px solid var(--line);
  box-shadow: 0 14px 30px var(--black-500);
  backdrop-filter: blur(6px);
}

.landing-login-card h2 {
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.84rem, 1.08vw, 0.98rem);
  letter-spacing: 0.02em;
}

.landing-login-card .stack-form button {
  width: 100%;
}

.landing-login-card .stack-form {
  gap: 10px;
}

.landing-login-card input {
  min-height: 38px;
  padding: 8px 10px;
}

.auth-panel,
.admin-shell,
.terms-panel,
.content-stack {
  display: grid;
  gap: 18px;
}

.auth-panel {
  width: min(560px, 100%);
  margin: 8vh auto 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 8px solid var(--accent);
  padding: clamp(20px, 5vw, 34px);
}

.terms-panel {
  width: min(860px, 100%);
  margin: clamp(22px, 6vh, 58px) auto 0;
  padding: clamp(22px, 5vw, 42px);
  background:
    linear-gradient(180deg, var(--white-035), var(--color-transparent) 140px),
    var(--panel);
  border: 1px solid var(--line);
  border-top: 8px solid var(--accent);
}

.terms-panel h1 {
  margin-bottom: 4px;
}

.terms-panel h2 {
  margin-top: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.terms-panel p {
  max-width: 72ch;
  color: var(--muted);
}

.terms-panel p:first-of-type {
  color: var(--text);
}

.public-character-shell {
  width: min(1080px, 100%);
  margin: clamp(18px, 5vh, 46px) auto 0;
  display: grid;
  gap: 14px;
}

.public-character-header,
.public-panel {
  background:
    linear-gradient(180deg, var(--white-035), var(--color-transparent) 120px),
    var(--panel);
  border: 1px solid var(--line);
}

.public-character-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(14px, 3vw, 28px);
  align-items: start;
  border-top: 8px solid var(--accent);
  padding: clamp(16px, 3vw, 28px);
}

.public-character-header h1 {
  margin-bottom: 8px;
}

.public-location-path {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-family: var(--display);
  text-transform: uppercase;
}

.public-location-path span,
.public-location-path b {
  color: var(--faint);
}

.public-location-path strong {
  color: var(--text);
}

.public-record-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, auto));
  gap: 1px;
  margin: 0;
  background: var(--line);
  border: 1px solid var(--line);
}

.public-record-stats div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  background: var(--bg-2);
}

.public-record-stats dt {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.public-record-stats dd {
  margin: 0;
  color: var(--text);
  font-family: var(--display);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.public-character-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(240px, 0.55fr);
  gap: 14px;
}

.public-panel {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.public-panel h2 {
  margin: 0;
}

.public-stat-grid {
  margin-top: 0;
}

.public-kill-list {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.public-kill-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  background: var(--bg-2);
}

.public-kill-list span {
  color: var(--muted);
}

.public-kill-list strong {
  color: var(--text);
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
}

.public-loadout-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.public-loadout-card {
  --item-art-height: clamp(94px, 8vw, 132px);
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  padding: 12px;
  background: var(--panel);
}

.public-loadout-card .eyebrow,
.public-loadout-card h3,
.public-loadout-card p {
  margin: 0;
}

.public-loadout-card h3 {
  overflow-wrap: anywhere;
}

.public-loadout-card p {
  color: var(--muted);
  font-size: 0.9rem;
}

.public-addon-line {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.public-addon-line span {
  border: 1px solid var(--line-soft);
  background: var(--bg-2);
  padding: 4px 6px;
  color: var(--text);
  font-family: var(--display);
  font-size: 0.72rem;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .public-character-header,
  .public-character-grid {
    grid-template-columns: 1fr;
  }

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

  .public-loadout-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .public-record-stats {
    grid-template-columns: 1fr;
  }
}

.terms-notice-screen {
  max-width: 820px;
  margin-inline: auto;
}

.legal-notice-card {
  display: grid;
  grid-template-columns: minmax(170px, 230px) minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 20px);
  align-items: start;
  padding: clamp(16px, 2.6vw, 22px);
  background: var(--panel);
  border: 1px solid var(--line);
}

.legal-notice-portrait {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
}

.legal-notice-copy {
  display: grid;
  align-content: start;
  gap: 6px;
}

.legal-notice-copy h1 {
  margin-bottom: 0;
  font-size: clamp(2.2rem, 5vw, 2.85rem);
}

.legal-notice-copy p {
  margin-bottom: 0;
}

.legal-notice-copy > p:not(.eyebrow) {
  max-width: 52ch;
}

.guest-registration-card {
  width: min(820px, 100%);
  margin-inline: auto;
}

.guest-registration-form {
  margin-top: 12px;
}

.guest-registration-form small {
  display: block;
  margin-top: 6px;
  color: var(--faint);
}

.guest-tutorial-screen {
  align-content: start;
}

.guest-tutorial-copy {
  margin: 0;
  color: var(--text);
  font-size: clamp(1rem, 2vw, 1.18rem);
}

.terms-accept-form {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.notice-checkline {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 2px 0;
  background: var(--color-transparent);
  border: 0;
  cursor: pointer;
}

.notice-checkline input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 3px 0 0;
  padding: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.notice-checkline input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.notice-checkline span {
  display: block;
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.45;
}

.notice-checkline a {
  color: var(--text);
}

.terms-accept-form button {
  width: fit-content;
  margin-top: 4px;
}

@media (max-width: 700px) {
  .legal-notice-card {
    grid-template-columns: 1fr;
  }

  .legal-notice-portrait {
    width: min(220px, 100%);
    justify-self: center;
  }
}

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

h1,
h2,
h3,
.metric-card strong,
.credits-badge {
  font-family: var(--display);
  text-transform: uppercase;
  text-wrap: balance;
}

h1 {
  margin-bottom: 8px;
  font-size: 3rem;
  line-height: 0.95;
}

h2 {
  margin-bottom: 12px;
  font-size: 1.12rem;
  line-height: 1.05;
}

h3 {
  margin-bottom: 8px;
  font-size: 1rem;
}

p {
  max-width: 68ch;
  line-height: 1.58;
}

.eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 0.88rem;
}

.goal {
  color: var(--text);
  font-weight: 900;
}

.stack-form {
  display: grid;
  gap: 14px;
}

label span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 0.9rem;
}

input {
  width: 100%;
  min-height: 44px;
  background: var(--surface-absolute);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 11px 12px;
  font: inherit;
}

input::placeholder {
  color: var(--faint);
}

button,
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--color-white);
  padding: 10px 14px;
  overflow: hidden;
  font: inherit;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease, color 140ms ease, border-color 140ms ease;
}

button::before,
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-110%);
  background: var(--white-160);
  transition: transform 220ms ease;
}

button:hover:not(:disabled)::before,
.button:hover::before {
  transform: translateX(0);
}

button:hover:not(:disabled),
.button:hover {
  background: var(--accent-dark);
  color: var(--color-white);
  transform: translateY(-1px);
}

button:active:not(:disabled),
.button:active {
  transform: translateY(1px);
}

button.secondary,
.button.secondary {
  background: var(--panel-2);
  color: var(--text);
  border-color: var(--line);
}

button.secondary:hover:not(:disabled),
.button.secondary:hover {
  background: var(--panel-3);
}

button.primary,
.button.primary {
  background:
    linear-gradient(115deg, var(--white-100), var(--color-transparent) 42%, var(--white-160) 58%, var(--color-transparent) 78%),
    linear-gradient(180deg, var(--accent), var(--accent-dark));
  box-shadow:
    0 0 0 1px var(--accent-120),
    0 0 16px var(--accent-580),
    0 7px 18px var(--black-420);
  animation: primaryButtonShine 1700ms ease-in-out infinite;
}

button.primary:hover:not(:disabled),
.button.primary:hover {
  background:
    linear-gradient(115deg, var(--white-160), var(--color-transparent) 38%, var(--white-220) 58%, var(--color-transparent) 80%),
    linear-gradient(180deg, var(--accent), var(--accent-dark));
  box-shadow:
    0 0 0 1px var(--accent-580),
    0 0 30px var(--accent-760),
    0 10px 28px var(--black-500);
}

button.primary:disabled,
.button.primary:disabled {
  animation: none;
  box-shadow: none;
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

button.is-working {
  background: var(--panel-3);
  border-color: var(--text);
}

.link-button {
  min-height: auto;
  padding: 0;
  background: var(--color-transparent);
  border: 0;
  color: var(--text);
}

.link-button:hover {
  color: var(--accent);
  background: var(--color-transparent);
  transform: none;
}

.action-pulse {
  position: absolute;
  inset: 0;
  border: 2px solid var(--text);
  animation: actionPulse 380ms ease forwards;
  pointer-events: none;
}

@keyframes actionPulse {
  from {
    opacity: 0.9;
    transform: scale(0.92);
  }
  to {
    opacity: 0;
    transform: scale(1.16);
  }
}

@keyframes primaryButtonShine {
  0%,
  100% {
    box-shadow:
      0 0 0 1px var(--accent-120),
      0 0 14px var(--accent-120),
      0 7px 18px var(--black-320);
  }
  50% {
    box-shadow:
      0 0 0 1px var(--accent-580),
      0 0 34px var(--accent-760),
      0 9px 28px var(--black-500);
  }
}

.notice {
  border: 1px solid var(--line);
  border-left: 8px solid var(--accent);
  /* Text sits at (border-left 8px) + (padding-left) from the column
     edge. Match the page-gutter so the notice text aligns with the
     breadcrumb above and the content-stack below — instead of landing
     at its own arbitrary 20px inset. */
  padding: 12px 12px 12px calc(var(--page-gutter) - 8px);
  background: var(--panel);
  animation: noticeIn 220ms ease;
}

.notice.bad {
  color: var(--bad);
}

.notice.good {
  color: var(--text);
}

@keyframes noticeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 365px;
  gap: 1px;
  align-items: stretch;
  background: var(--line);
  border: 1px solid var(--line);
}

.game-main,
.side-rail,
.card {
  background: var(--panel);
}

.game-main {
  min-width: 0;
}

.location-path {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 12px var(--page-gutter);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-weight: 900;
  overflow-x: auto;
}

.location-path::before {
  content: "[ LOCATION ]";
  color: var(--text);
  white-space: nowrap;
}

.location-path.is-image-overlay {
  position: absolute;
  z-index: 3;
  inset: 0 0 auto;
  min-height: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: var(--color-transparent);
  border-bottom: 0;
  color: var(--white-850);
  text-shadow: 0 1px 3px var(--black-850);
}

.location-path.is-image-overlay .path-button {
  color: var(--text);
  text-shadow: 0 1px 3px var(--black-850);
}

.location-path.is-image-overlay .path-button:hover {
  color: var(--text);
}

.location-path.is-inventory::before {
  content: "[ INVENTORY ]";
}

.location-path.is-quests::before {
  content: "[ QUESTS ]";
}

.location-path.is-setup::before {
  content: "[ SETUP ]";
}

.location-path.is-procedure::before {
  content: "[ PROCEDURE ]";
}

.location-path.is-interaction::before {
  content: "[ INTERACTION ]";
}

/* Quests journal — one card per active quest. Same card grammar as
   shops/procedures so the visual language stays consistent across
   modal panels. */
.quests-screen {
  gap: 18px;
}

.quests-header h1 {
  margin: 0 0 4px;
}

.quests-header p {
  margin: 0;
  max-width: 64ch;
}

.quests-list {
  display: grid;
  gap: 10px;
}

.quest-card {
  display: grid;
  gap: 9px;
  padding: 14px;
}

.quest-card.is-tracked {
  border-color: var(--accent-580);
}

.quest-card h3 {
  margin: 0;
  font-size: 1.04rem;
}

.quest-instruction {
  margin: 0;
  color: var(--text);
  font-size: 0.94rem;
  line-height: 1.4;
}

.quest-card-actions {
  display: flex;
  justify-content: flex-end;
}

.quests-empty {
  margin: 0;
}

/* Completed-quest archive — a quiet title-only list under the active
   cards. No card framing; this is a memory of past arcs, not an
   actionable list. */
.quests-archive {
  display: grid;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.quests-archive-heading {
  margin: 0;
  font-family: var(--display);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.quests-archive-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 3px;
}

.quests-archive-list li {
  color: var(--muted);
  font-size: 0.92rem;
}

/* Display-effects line on speaker-mode dialogue nodes (rare; scene-mode
   nodes reuse the procedure-panel classes directly). Keeps the inline
   effects a hair below the body paragraph. */
.dialogue-effects-line {
  margin: 6px 0 0;
}

.path-form {
  margin: 0;
}

.path-button {
  min-height: auto;
  border: 0;
  background: var(--color-transparent);
  color: var(--text);
  padding: 2px 0;
  font: inherit;
  font-weight: 900;
}

.path-button:hover {
  color: var(--accent);
  background: var(--color-transparent);
  transform: none;
}

.location-image-shell {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.location-image {
  display: block;
  width: 100%;
  max-height: 350px;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
  filter: grayscale(0.18) contrast(1.08);
}

.location-image-shell .location-image {
  border-bottom: 0;
}

.location-image-shell::after,
.location-hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: clamp(82px, 12vw, 124px);
  background: linear-gradient(
    to bottom,
    var(--black-850) 0%,
    var(--black-550) 45%,
    var(--black-120) 78%,
    var(--color-transparent) 100%
  );
  pointer-events: none;
}

/* Hero block: image + title + description stacked using absolute
   positioning so the text sits over the lower portion of the picture.
   A bottom-up gradient scrim + a text-shadow keeps the text legible
   regardless of what's behind it. Used for world/shop modes; other
   modes still render the standalone .location-image above their own
   content. */
.location-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.location-hero-image {
  display: block;
  width: 100%;
  max-height: 350px;
  object-fit: cover;
  filter: grayscale(0.18) contrast(1.08);
}

.location-hero-overlay {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* The overlay text needs to sit at the same left inset as the
     breadcrumb and the content-stack below — that's what
     --page-gutter is for. Resist the urge to add extra padding-left
     here; any override breaks the column-wide alignment. */
  padding: var(--page-gutter);
  /* Three-stop gradient: opaque at the bottom where the text lives,
     fading to var(--color-transparent) so the upper part of the image stays clean. */
  background: linear-gradient(
    to top,
    var(--black-820) 0%,
    var(--black-550) 35%,
    var(--black-120) 70%,
    var(--color-transparent) 100%
  );
  pointer-events: none;
}

.location-hero-overlay h1,
.location-hero-overlay p {
  color: var(--text);
  text-shadow: 0 1px 3px var(--black-850);
  pointer-events: auto;
}

.location-hero-overlay h1 {
  margin: 0 0 6px;
  text-shadow: 0 2px 4px var(--black-850);
}

.location-hero-overlay p {
  margin: 0;
  max-width: 64ch;
  line-height: 1.4;
}

/* On narrow viewports the overlay would crush the body text. Drop the
   absolute positioning and let the text sit below the image on a solid
   panel — same content, just stacked. */
@media (max-width: 700px) {
  .location-hero-overlay {
    position: static;
    /* Horizontal padding stays on the page-gutter so the overlay text
       still column-aligns with the breadcrumb above and the content
       below — only the vertical inset tightens for the compact phone
       layout where the overlay becomes a static panel under the image. */
    padding: 14px var(--page-gutter) 16px;
    background: var(--bg-2);
  }
  .location-hero-overlay h1,
  .location-hero-overlay p {
    text-shadow: none;
  }
}

.game-main > .content-stack,
.game-main > section:not(.location-hero),
.content-stack {
  padding: var(--page-gutter);
}

/* When the content-stack directly follows a hero, the hero's overlay
   already carries a generous bottom buffer (the page-gutter padding
   inside the dark gradient zone where the title rests). Letting the
   content-stack also apply its standard page-gutter top padding here
   stacks ~50px of dead space between the description text and the
   first action below. A 14px breath is enough — it visually separates
   the hero from the panel without doubling up the buffer. */
.location-hero + .content-stack {
  padding-top: 14px;
}

.side-rail {
  /* Flex column instead of a grid so the chat panel can claim the
     remaining vertical space below the character sheet. The rail sticks
     flush against the topbar and extends to the very bottom of the
     viewport, so chat gets the maximum slice we can spare. Chat-log
     handles its own scrolling internally; the main content can grow as
     tall as it wants without pushing chat out of reach. */
  display: flex;
  flex-direction: column;
  gap: 1px;
  position: sticky;
  top: 58px;
  align-self: start;
  height: calc(100vh - 58px);
  /* If a tiny viewport can't fit the sheet + chat at all, fall back to a
     scrolling rail rather than clipping the form out of reach. */
  overflow-y: auto;
}

.side-rail > .sheet-card {
  flex: 0 0 auto;
  padding: 8px;
}

.side-rail > .chat-panel {
  flex: 1 1 auto;
  min-height: 0;
}

.character-console {
  position: relative;
  isolation: isolate;
  border-color: var(--character-frame-light);
  background:
    linear-gradient(var(--character-console-overlay), var(--character-console-overlay)),
    url("/static/images/character_sheet_bg.webp") center / cover no-repeat,
    var(--character-frame-dark);
  box-shadow:
    inset 0 1px 0 var(--white-180),
    inset 0 -2px 4px var(--black-680),
    0 5px 14px var(--black-420);
}

.character-patch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.character-patch {
  container-type: inline-size;
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 846 / 589;
  min-width: 0;
  padding: 11% 9%;
  isolation: isolate;
  color: var(--character-paper-text);
  text-align: center;
  text-shadow:
    0 1px 1px var(--character-paper-shadow),
    0 0 5px var(--character-paper-shadow);
  transform-origin: center;
}

.character-patch::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: url("/static/images/character_patch.webp") center / contain no-repeat;
}

.character-patch-empty {
  aspect-ratio: 846 / 589;
  min-width: 0;
}

.character-patch::before {
  filter: contrast(1.04) brightness(0.98) drop-shadow(0 3px 3px var(--black-680));
}

.character-patch-grid > .character-patch:nth-child(1) {
  transform: translate(-1px, 1px) rotate(-1.05deg);
}

.character-patch-grid > .character-patch:nth-child(2) {
  transform: translate(1px, -1px) rotate(0.7deg);
}

.character-patch-grid > .character-patch:nth-child(3) {
  transform: translate(0, 1px) rotate(-0.45deg);
}

.character-patch-grid > .character-patch:nth-child(4) {
  transform: translate(1px, -1px) rotate(0.9deg);
}

.character-patch-grid > .character-patch:nth-child(5) {
  transform: translate(-1px, 0) rotate(-0.65deg);
}

.character-patch-grid > .character-patch:nth-child(6) {
  transform: translate(1px, 1px) rotate(0.5deg);
}

.character-name-patch {
  padding-inline: 10%;
}

.character-patch-name,
.character-patch-label,
.character-patch-value {
  mix-blend-mode: difference;
}

.character-patch-name {
  position: relative;
  z-index: 1;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--character-paper-text);
  font-family: var(--display);
  font-size: clamp(1rem, 18cqi, 1.85rem);
  line-height: 0.88;
  opacity: 1;
  text-transform: uppercase;
}

.character-patch-name.is-medium {
  font-size: clamp(0.86rem, 14.5cqi, 1.45rem);
}

.character-patch-name.is-long {
  font-size: clamp(0.72rem, 11.5cqi, 1.12rem);
  line-height: 0.92;
}

.character-attribute-patch {
  grid-template-rows: auto auto;
  align-content: center;
  row-gap: 5%;
}

.character-patch-label {
  position: relative;
  z-index: 1;
  align-self: end;
  max-width: 100%;
  color: var(--character-paper-muted);
  font-size: clamp(0.62rem, 10cqi, 1rem);
  font-weight: 900;
  letter-spacing: 0.025em;
  line-height: 1;
  opacity: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.character-patch-value {
  position: relative;
  z-index: 1;
  align-self: start;
  color: var(--character-paper-text);
  font-family: var(--display);
  font-size: clamp(1.55rem, 28cqi, 2.75rem);
  font-variant-numeric: tabular-nums;
  line-height: 0.78;
  opacity: 1;
}

.character-status-strip {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  margin-top: 2px;
}

.character-status-cell {
  container-type: inline-size;
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  row-gap: 4%;
  min-width: 0;
  padding: 8% 21%;
}

.character-money-cell {
  isolation: isolate;
  aspect-ratio: 1661 / 552;
  min-height: 0;
  text-align: center;
  transform: rotate(-0.75deg);
}

.character-money-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/static/images/money_patch.webp") center / contain no-repeat;
  filter: drop-shadow(0 3px 3px var(--black-680));
}

.character-money-cell .character-patch-label {
  color: var(--character-money-muted);
  font-size: clamp(0.68rem, 7.2cqi, 0.96rem);
  letter-spacing: 0.06em;
  mix-blend-mode: multiply;
}

.character-money-cell .character-patch-value {
  color: var(--character-money-ink);
  font-size: clamp(1.35rem, 18cqi, 2.2rem);
  line-height: 0.8;
  mix-blend-mode: multiply;
  text-shadow: 0 1px 0 var(--white-350);
}

.character-health-cell {
  transform: translate(1px, 1px) rotate(0.65deg);
}

.character-health-cell .character-patch-value {
  font-size: clamp(1.1rem, 21cqi, 1.9rem);
  letter-spacing: -0.04em;
}

.character-console-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--line);
}

.character-actions-panel {
  flex: 0 0 auto;
  margin-bottom: 8px;
}

.character-controls-panel {
  padding: 8px;
}

.character-controls-panel .character-actions-panel {
  margin-bottom: 0;
}

.character-console-actions.is-single {
  grid-template-columns: 1fr;
}

.character-console-actions .inline-form,
.character-console-actions button {
  width: 100%;
}

.character-console-actions button {
  min-height: 34px;
  border: 0;
  padding: 7px 8px;
  font-size: 0.82rem;
}

.character-console-actions button.secondary {
  background: var(--bg-2);
  color: var(--muted);
}

.character-console-actions button.secondary:hover:not(:disabled) {
  background: var(--panel-3);
  color: var(--text);
}

.character-console-actions button.primary {
  background:
    linear-gradient(115deg, var(--white-100), var(--color-transparent) 42%, var(--white-160) 58%, var(--color-transparent) 78%),
    linear-gradient(180deg, var(--accent), var(--accent-dark));
  color: var(--color-white);
}

.card {
  border: 1px solid var(--line);
  padding: 16px;
}

.card-grid,
.three-grid,
.battle-grid,
.metric-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.card-grid {
  /* Cap each card's max track width so a single-item shop doesn't stretch
     to the full row. Cards still flow into multiple columns when stock is
     fuller; they just don't grow past 280px each.

     Override the shared grid-style background/border (used by the dense
     grids like battle/mission) so empty space in a sparse shop doesn't
     read as a gray slab — the cards stand on their own with the page bg
     between them. */
  grid-template-columns: repeat(auto-fit, minmax(230px, 280px));
  justify-content: start;
  gap: 12px;
  background: var(--color-transparent);
  border: 0;
}

.card-grid > * {
  border: 1px solid var(--line);
}

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

.battle-grid {
  grid-template-columns: minmax(240px, 0.95fr) minmax(190px, 0.58fr) minmax(260px, 1fr);
  align-items: stretch;
}

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

.card-grid > *,
.three-grid > *,
.battle-grid > *,
.metric-grid > * {
  border: 0;
}

.battle-view {
  gap: 12px;
}

.battle-view > section h2 {
  margin-bottom: 8px;
}

.battle-view .card {
  padding: 12px;
}

.battle-view .card-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.fight-roster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.fight-roster-side {
  display: grid;
  align-content: start;
  background: var(--panel);
}

.fight-roster-side.is-aliens {
  background: var(--bg-2);
}

.fight-roster-side-label {
  border-bottom: 1px solid var(--line-soft);
  padding: 5px 8px;
  color: var(--accent);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.fight-roster-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(42px, 68px) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 5px 8px;
}

.fight-roster-row + .fight-roster-row {
  border-top: 1px solid var(--line-soft);
}

.fight-roster-row.is-you {
  box-shadow: inset 3px 0 0 var(--accent);
}

.fight-roster-row.is-down,
.fight-roster-row.is-defeated {
  opacity: 0.62;
  filter: grayscale(0.88);
}

.fight-roster-row strong {
  min-width: 0;
  overflow: hidden;
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fight-roster-row .hpbar.small {
  width: 100%;
  height: 7px;
}

.fight-roster-hp {
  color: var(--muted);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.battle-view .attack-card {
  gap: 8px;
}

.battle-view .attack-card button {
  min-height: 38px;
}

.inventory-screen {
  --item-art-height: clamp(88px, 8vw, 144px);
  gap: 12px;
}

.inventory-panel {
  display: grid;
  gap: 8px;
}

.inventory-panel > h2 {
  margin-bottom: 0;
}

.inventory-tabs-panel {
  gap: 0;
}

.inventory-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-bottom: 0;
}

.inventory-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  flex: 1 1 150px;
  border: 0;
  background: var(--bg-2);
  color: var(--muted);
  font-family: var(--display);
  font-size: 0.92rem;
  text-transform: uppercase;
}

.inventory-tab.is-active {
  background: var(--panel);
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.inventory-tab span {
  min-width: 24px;
  border: 1px solid var(--line-soft);
  padding: 2px 6px;
  color: var(--text);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.inventory-tab-panel {
  display: grid;
}

.inventory-tab-panel[hidden] {
  display: none;
}

.loadout-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.loadout-card,
.inventory-item,
.empty-panel {
  background: var(--panel);
  border: 0;
  padding: 12px;
}

.loadout-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 172px;
}

.loadout-card > .eyebrow {
  margin-bottom: 0;
}

.loadout-current.is-equipped {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-height: 0;
}

.loadout-current.is-equipped .item-art-preview .item-art {
  --item-art-pad: 12px;
  aspect-ratio: 2 / 1;
  height: auto;
  min-height: 0;
  margin-bottom: 0;
}

.loadout-current.is-equipped > h3 {
  margin: 0;
}

.loadout-current.is-equipped > .inline-form {
  margin-top: auto;
}

.loadout-current.is-equipped > .inline-form button {
  width: 100%;
}

.slot-options {
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.slot-options .eyebrow {
  margin-bottom: 0;
  color: var(--muted);
}

.slot-option-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.slot-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  padding: 6px 7px;
}

.slot-option-header {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  line-height: 1.1;
}

.slot-option-header strong {
  font-family: var(--display);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.slot-option-quantity {
  color: var(--muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.slot-option .inline-form {
  display: flex;
  margin: 0;
  width: auto;
}

.slot-option .inline-form button {
  width: auto;
  min-height: 30px;
  padding: 5px 9px;
  font-size: 0.74rem;
}

.addon-control-list {
  display: grid;
  gap: 6px;
  margin-top: 2px;
  align-self: stretch;
}

.addon-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 7px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
}

.addon-control.is-equipped {
  border-color: var(--text-240);
  background:
    linear-gradient(90deg, var(--white-055), var(--color-transparent) 50%),
    var(--bg-2);
}

.addon-control strong {
  min-width: 0;
  font-family: var(--display);
  font-size: 0.82rem;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.addon-control .inline-form {
  margin: 0;
}

.addon-control .inline-form button {
  width: auto;
  min-height: 28px;
  padding: 4px 8px;
  font-size: 0.72rem;
}

.inventory-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(96px, 12vw, 128px), 1fr));
  gap: 8px;
  background: var(--color-transparent);
  border: 0;
}

.blueprint-list .inventory-item {
  background:
    linear-gradient(135deg, var(--white-035), var(--color-transparent) 50%),
    var(--panel);
}

.inventory-item {
  display: block;
  min-width: 0;
  padding: 0;
  background: var(--color-transparent);
}

.shop-section {
  gap: 12px;
}

.shop-item-list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}

.shop-item-card {
  --item-art-height: auto;
  flex: 0 1 156px;
  min-width: 0;
  max-width: 176px;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: stretch;
  gap: 8px;
  padding: 8px;
  background:
    linear-gradient(180deg, var(--white-035), var(--color-transparent) 44%),
    var(--panel);
  border: 1px solid var(--text-230);
  box-shadow:
    inset 0 0 0 1px var(--black-320),
    0 8px 24px var(--black-160);
}

.shop-category-start {
  flex: 0 0 198px;
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.shop-category-start > .shop-item-card {
  flex: 1 1 156px;
}

.shop-item-category-insert {
  flex: 0 0 32px;
  align-self: stretch;
  display: grid;
  place-items: center;
  min-height: 150px;
  padding: 6px 3px;
  color: var(--muted);
  background:
    linear-gradient(180deg, var(--white-035), var(--color-transparent) 44%),
    var(--panel);
  border: 1px solid var(--text-230);
  box-shadow:
    inset 0 0 0 1px var(--black-320),
    0 8px 24px var(--black-160);
  font-size: clamp(0.95rem, 0.72rem + 0.65vw, 1.18rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  pointer-events: none;
}

.shop-item-card.is-rare {
  border-color: var(--good-420);
  box-shadow:
    inset 0 0 0 1px var(--good-160),
    0 8px 24px var(--black-160);
}

.shop-item-card.is-epic {
  border-color: var(--epic-420);
  box-shadow:
    inset 0 0 0 1px var(--epic-160),
    0 8px 24px var(--black-160);
}

/* Compact vertical stat strip: price + owned. Replaces the "0 credits ·
   Owned: 0" muted line so the numbers read as data, not body copy, and
   removes the need to repeat the price in the Buy button. */
.shop-item-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin: 0;
  padding: 0;
  background: var(--line);
  border: 1px solid var(--line);
}

.shop-item-stats > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 8px;
  background: var(--bg-2);
}

.shop-item-stats dt {
  color: var(--muted);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.shop-item-stats dd {
  margin: 0;
  color: var(--text);
  font-family: var(--display);
  font-size: 1.0rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.shop-item-action {
  align-self: end;
}

.shop-item-action .inline-form {
  width: 100%;
}

.shop-item-action button {
  width: 100%;
}

.garage-screen {
  gap: 14px;
}

.garage-heading h1,
.garage-heading p {
  margin-block: 0;
}

.garage-heading p {
  margin-top: 6px;
  color: var(--muted);
}

.garage-ship-form {
  flex: 0 0 var(--garage-ship-card-height);
  height: var(--garage-ship-card-height);
  margin: 0;
}

.garage-layout {
  --garage-ship-card-height: 54px;
  display: grid;
  grid-template-columns: minmax(220px, 310px) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  height: clamp(460px, 62vh, 680px);
  min-height: 0;
}

.garage-list-panel,
.garage-detail-panel {
  border: 1px solid var(--text-230);
  box-shadow:
    inset 0 0 0 1px var(--black-320),
    0 8px 24px var(--black-160);
}

.garage-list-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 10px;
  background:
    linear-gradient(180deg, var(--white-035), var(--color-transparent) 44%),
    var(--panel);
}

.garage-type-controls {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.garage-type-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.garage-type-filter-form,
.garage-type-shop-form,
.garage-return-form {
  margin: 0;
}

.garage-type-shop,
.garage-return-button {
  width: 100%;
  min-height: 32px;
  color: var(--text);
  background: var(--color-transparent);
  border: 0;
  box-shadow: none;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 400;
  cursor: pointer;
}

.garage-type-shop,
.garage-return-button {
  padding: 7px 9px;
}

.garage-return-button {
  margin-bottom: 14px;
  background:
    linear-gradient(180deg, var(--white-035), var(--color-transparent) 44%),
    var(--bg-2);
  border: 1px solid var(--text-230);
  box-shadow: inset 0 0 0 1px var(--black-320);
}

.garage-type-filter-form {
  display: grid;
  place-items: center;
}

.garage-type-checkbox {
  width: 15px;
  aspect-ratio: 1 / 1;
  margin: 0;
  accent-color: var(--text);
  cursor: pointer;
}

.garage-type-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garage-type-shop {
  width: auto;
  min-width: 54px;
  background:
    linear-gradient(180deg, var(--white-035), var(--color-transparent) 44%),
    var(--bg-2);
  border: 1px solid var(--text-230);
  box-shadow: inset 0 0 0 1px var(--black-320);
}

.garage-type-shop:hover,
.garage-return-button:hover {
  border-color: var(--white-350);
}

.garage-list-panel h2 {
  margin: 0 0 10px;
  font-size: 0.84rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.garage-ship-list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.garage-ship-card {
  --ship-rarity-glow: var(--color-transparent);
  --ship-rarity-core: var(--color-transparent);
  --ship-rarity-tight: var(--color-transparent);
  --ship-filter-base: contrast(1);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(68px, 34%) minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  align-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 3px 5px;
  color: var(--text);
  background: var(--color-transparent);
  border: 1px solid var(--color-transparent);
  text-align: left;
  cursor: pointer;
}

.garage-ship-card.is-selected {
  border-color: var(--accent-760);
  box-shadow:
    inset 0 0 0 1px var(--accent-120),
    0 0 14px var(--accent-580);
  background:
    linear-gradient(180deg, var(--white-035), var(--color-transparent) 62%),
    var(--black-160);
}

.garage-ship-card:hover {
  background: var(--white-035);
}

.garage-ship-thumb {
  display: grid;
  place-items: center;
  min-width: 0;
  height: clamp(44px, 4.8vw, 60px);
}

.garage-ship-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    var(--ship-filter-base)
    drop-shadow(0 5px 7px var(--black-680))
    drop-shadow(0 0 0.75px var(--ship-rarity-core));
}

.garage-ship-image.is-rare,
.garage-ship-card.is-rare,
.garage-ship-stage.is-rare,
.garage-preview-image.is-rare {
  --ship-rarity-glow: var(--good-550);
  --ship-rarity-core: var(--rare-highlight);
  --ship-rarity-tight: var(--good);
}

.garage-ship-image.is-epic,
.garage-ship-card.is-epic,
.garage-ship-stage.is-epic,
.garage-preview-image.is-epic {
  --ship-rarity-glow: var(--epic-550);
  --ship-rarity-core: var(--epic);
  --ship-rarity-tight: var(--epic);
}

.garage-ship-image.is-unowned,
.garage-ship-card.is-unowned,
.garage-ship-stage.is-unowned,
.garage-preview-image.is-unowned {
  --ship-filter-base: grayscale(1) brightness(0.58) contrast(0.92);
}

.garage-ship-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.garage-ship-name {
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.garage-ship-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
}

.garage-detail-panel {
  --marina-bg-image: none;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--black-860) 0%, var(--black-660) 24%, var(--black-220) 62%, var(--color-transparent) 100%),
    var(--marina-bg-image) center center / cover no-repeat,
    var(--panel);
}

.garage-detail-panel.has-selected-ship {
  background:
    linear-gradient(var(--black-860), var(--black-860)),
    var(--marina-bg-image) center center / cover no-repeat,
    var(--panel);
}

.garage-detail-header {
  display: grid;
  gap: 4px;
  padding: 14px 16px 0;
}

.garage-detail-header h2 {
  margin: 0;
}

.garage-detail-maker {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.garage-detail-maker span {
  color: var(--text);
}

.garage-ship-stage {
  --ship-rarity-glow: var(--color-transparent);
  --ship-rarity-core: var(--color-transparent);
  --ship-rarity-tight: var(--color-transparent);
  --ship-filter-base: contrast(1);
  box-sizing: border-box;
  display: grid;
  place-items: center;
  height: clamp(300px, 42vh, 440px);
  min-height: 0;
  overflow: visible;
  padding: clamp(10px, 2.4vw, 24px);
}

.garage-preview-image,
.garage-ship-stage > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 760px;
  max-height: 100%;
  object-fit: contain;
  filter:
    var(--ship-filter-base)
    drop-shadow(0 16px 18px var(--black-680))
    drop-shadow(0 0 0.35px var(--ship-rarity-core))
    drop-shadow(0 0 0.75px var(--ship-rarity-glow));
}

.garage-detail-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
  padding: 16px;
  background: linear-gradient(180deg, var(--color-transparent), var(--black-420));
}

.garage-detail-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.garage-detail-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0;
  padding: 0;
}

.garage-detail-stats > div {
  min-width: min(140px, 100%);
}

.garage-detail-stats dt {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.garage-detail-stats dd {
  margin: 1px 0 0;
  color: var(--text);
}

.garage-detail-actions {
  justify-self: end;
}

.garage-detail-actions .inline-form {
  min-width: 150px;
}

.garage-detail-actions button {
  width: 100%;
}

.garage-detail-actions button.secondary,
.garage-detail-actions .button.secondary {
  background:
    linear-gradient(180deg, var(--white-060), var(--color-transparent) 46%),
    var(--bg-2);
  border-color: var(--text-230);
  box-shadow:
    inset 0 0 0 1px var(--black-320),
    0 8px 18px var(--black-220);
}

.garage-detail-actions button.secondary:hover:not(:disabled),
.garage-detail-actions .button.secondary:hover {
  border-color: var(--white-350);
  background:
    linear-gradient(180deg, var(--white-100), var(--color-transparent) 46%),
    var(--panel-2);
}

.garage-detail-actions button.secondary:disabled,
.garage-detail-actions .button.secondary:disabled {
  opacity: 1;
  color: var(--muted);
  background:
    linear-gradient(180deg, var(--white-035), var(--color-transparent) 46%),
    var(--bg-2);
  border-color: var(--text-230);
  box-shadow:
    inset 0 0 0 1px var(--black-320),
    0 8px 18px var(--black-220);
}

.garage-empty-list,
.garage-empty-detail {
  margin: 0;
}

.garage-empty-detail {
  align-self: start;
  display: grid;
  gap: 4px;
  background: var(--color-transparent);
  padding: 14px 16px 0;
}

.garage-empty-detail h3 {
  margin: 0;
  color: var(--text);
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1.05;
  opacity: 1;
}

.garage-empty-detail p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 1;
}

.garage-parent-actions {
  margin-top: 0;
}

@media (max-width: 700px) {
  .shop-item-card {
    flex-basis: 118px;
    max-width: 150px;
  }

  .shop-category-start {
    flex-basis: 158px;
  }

  .shop-category-start > .shop-item-card {
    flex-basis: 118px;
  }

  .shop-item-category-insert {
    flex-basis: 30px;
  }

  .garage-layout {
    grid-template-columns: 1fr;
  }

  .garage-layout {
    height: auto;
    min-height: 0;
  }

  .garage-ship-list {
    max-height: 260px;
  }

  .garage-ship-card {
    grid-template-columns: minmax(64px, 32%) minmax(0, 1fr);
  }

  .garage-ship-stage {
    height: clamp(220px, 58vw, 320px);
    padding: 10px;
  }

  .garage-detail-copy {
    grid-template-columns: 1fr;
  }

  .garage-detail-actions {
    justify-self: stretch;
  }
}

.item-art {
  --item-art-pad: 12px;
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: var(--item-art-height, clamp(88px, 8vw, 144px));
  min-height: 0;
  overflow: hidden;
  padding: var(--item-art-pad);
  background:
    linear-gradient(135deg, var(--white-060), var(--color-transparent) 44%),
    var(--surface-item);
  border: 1px solid var(--line-soft);
}

.item-art::after {
  content: "";
  position: absolute;
  inset: auto 12px 10px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-transparent), var(--white-350), var(--color-transparent));
  z-index: 2;
}

.item-art > img {
  position: absolute;
  inset: var(--item-art-pad);
  z-index: 1;
  display: block;
  width: calc(100% - (var(--item-art-pad) * 2));
  height: calc(100% - (var(--item-art-pad) * 2));
  object-fit: contain;
  object-position: center;
  filter:
    drop-shadow(0 0 1px var(--white-900))
    drop-shadow(0 0 12px var(--white-220))
    contrast(1.06);
}

.item-art.compact {
  --item-art-pad: 10px;
  margin-bottom: 0;
}

/* Rare items get a green-tinted glow in place of the default white
   diagonal sheen + green drop-shadow on the artwork. Same shape, just
   re-coloured — common items keep their existing look. The bottom
   accent line picks up the rarity tint too so the framing reads as
   intentional, not as a stray hue swap on the body. */
.item-art.is-rare {
  background:
    linear-gradient(135deg, var(--good-220), var(--color-transparent) 44%),
    var(--surface-item);
  border-color: var(--good-450);
}

.item-art.is-rare::after {
  background: linear-gradient(
    90deg,
    var(--color-transparent),
    var(--good-550),
    var(--color-transparent)
  );
}

.item-art.is-rare > img {
  filter:
    drop-shadow(0 0 1px var(--rare-highlight))
    drop-shadow(0 0 14px var(--good-350))
    contrast(1.06);
}

.item-art.is-epic {
  background:
    linear-gradient(135deg, var(--epic-220), var(--color-transparent) 44%),
    var(--surface-item);
  border-color: var(--epic-450);
}

.item-art.is-epic::after {
  background: linear-gradient(
    90deg,
    var(--color-transparent),
    var(--epic-550),
    var(--color-transparent)
  );
}

.item-art.is-epic > img {
  filter:
    drop-shadow(0 0 1px var(--epic))
    drop-shadow(0 0 14px var(--epic-350))
    contrast(1.06);
}

.item-addon-strip {
  position: absolute;
  z-index: 3;
  left: 8px;
  bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: calc(100% - 16px);
  pointer-events: none;
}

.item-addon-icon {
  display: grid;
  place-items: center;
  width: clamp(30px, 3vw, 42px);
  aspect-ratio: 1 / 1;
  padding: 4px;
  pointer-events: auto;
  background: var(--black-680);
  border: 1px solid var(--text-280);
  box-shadow:
    inset 0 0 0 1px var(--black-420),
    0 4px 12px var(--black-320);
}

.item-addon-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter:
    drop-shadow(0 0 1px var(--white-850))
    drop-shadow(0 0 7px var(--white-200));
}

.item-icon-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-width: 0;
}

.item-icon-preview {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  color: inherit;
  background: var(--color-transparent);
  border: 0;
  cursor: pointer;
  text-align: inherit;
}

.item-art-preview-wrap {
  display: block;
  width: 100%;
  min-width: 0;
}

.item-art-preview {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  color: inherit;
  background: var(--color-transparent);
  border: 0;
  cursor: pointer;
  text-align: inherit;
}

.item-art-preview::before {
  display: none;
}

.item-art-preview:hover {
  background: var(--color-transparent);
  transform: none;
}

.item-art-preview .item-art {
  margin: 0;
}

.item-icon-preview:focus-visible,
.item-art-preview:focus-visible,
.item-name-preview:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.item-icon-tile .item-art {
  --item-art-pad: 9px;
  height: 100%;
  margin: 0;
}

.inventory-list .item-icon-tile .item-art {
  --item-art-pad: 5px;
}

.item-icon-tile .item-art.compact {
  height: 100%;
}

.item-quantity-badge,
.item-tile-discard {
  position: absolute;
  z-index: 5;
  top: 5px;
}

.item-quantity-badge {
  left: 5px;
  min-width: 24px;
  padding: 2px 6px;
  color: var(--text);
  background: var(--black-760);
  border: 1px solid var(--text-280);
  box-shadow: 0 2px 8px var(--black-420);
  font-family: var(--display);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  text-align: center;
  pointer-events: none;
}

.item-tile-discard {
  right: 5px;
  top: auto;
  bottom: 5px;
}

.item-tile-discard .inline-form {
  margin: 0;
}

.item-tile-discard button {
  min-height: 22px;
  padding: 2px 6px;
  border-color: var(--text-280);
  background: var(--black-760);
  color: var(--text);
  box-shadow: 2px 2px 0 var(--black-550);
  font-size: 0.62rem;
  line-height: 1;
}

.item-tile-discard .reason {
  display: none;
}

.item-name-preview-wrap {
  display: inline;
  min-width: 0;
}

.item-name-preview {
  display: inline;
  min-height: 0;
  max-width: 100%;
  padding: 0;
  color: var(--text);
  background: var(--color-transparent);
  border: 0;
  font: inherit;
  font-weight: 800;
  line-height: inherit;
  overflow: visible;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
  text-transform: none;
  vertical-align: baseline;
  cursor: pointer;
  text-align: inherit;
}

.item-name-preview::before {
  display: none;
}

.item-name-preview:hover {
  background: var(--color-transparent);
  color: var(--text);
  transform: none;
}

.room-content-main .item-name-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-preview-popup {
  position: fixed;
  z-index: 10000;
  width: min(360px, calc(100vw - 24px));
  pointer-events: none;
  filter: drop-shadow(0 18px 42px var(--black-550));
}

.item-preview-popup.is-persistent {
  pointer-events: auto;
}

.item-preview-card {
  position: relative;
  overflow: hidden;
  padding: 14px 16px;
  background:
    linear-gradient(180deg, var(--white-055), var(--color-transparent) 46%),
    linear-gradient(135deg, var(--panel-3), var(--panel-2));
  border: 1px solid var(--text-280);
  box-shadow:
    inset 0 0 0 1px var(--black-420),
    0 0 0 1px var(--black-420),
    0 10px 26px var(--black-420);
}

.item-preview-copy {
  min-width: 0;
}

.item-preview-copy h3 {
  margin: 0 0 6px;
  font-size: 1.02rem;
  line-height: 1.15;
}

.item-preview-copy p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.item-preview-copy .item-rule-list {
  margin: 8px 0 0;
}

.item-preview-close {
  display: none;
  position: absolute;
  z-index: 3;
  top: 6px;
  right: 6px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  background: var(--black-760);
  border: 1px solid var(--text-280);
  color: var(--text);
  font-family: var(--display);
  font-size: 0.72rem;
  line-height: 1;
}

.item-preview-popup.is-persistent .item-preview-close {
  display: inline-grid;
  place-items: center;
}

@media (max-width: 700px), (hover: none) {
  .item-preview-popup {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
    width: min(92vw, 360px);
  }
}

.slot-option .item-art.compact {
  height: var(--item-art-height, clamp(88px, 8vw, 144px));
}

.inventory-item .item-art {
  --item-art-pad: 10px;
}

.item-title-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.item-title-row h3 {
  margin-bottom: 4px;
}

.item-title-row strong {
  color: var(--accent);
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.attack-card-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.dialogue {
  display: grid;
  grid-template-columns: minmax(360px, 0.48fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.dialogue > * {
  background: var(--panel);
  padding: 18px;
}

.dialogue-actions {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
}

/* Stack the robot's offers vertically (Start Treatment, Browse …, etc.)
   so each action sits on its own line in the dialogue panel. Items size
   to their natural width — the .inline-form inside is already a row-flex
   with `button + .reason`, so a disabled action's reason ("You are
   already at full health.") sits inline next to its button instead of
   being shoved to a new line by a stretched button. */
.dialogue-actions-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  align-items: flex-start;
}

.portrait {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
  filter: grayscale(0.28) contrast(1.1);
}

.dialogue > .portrait {
  padding: 0;
}

.mission-card,
.attack-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: stretch;
  gap: 14px;
  min-height: 100%;
}

.attack-card-body {
  display: grid;
  grid-template-rows: auto auto auto minmax(2.8em, auto);
  align-content: start;
  gap: 6px;
  min-height: 100%;
}

.attack-card h3,
.attack-card p {
  margin: 0;
}

.attack-card-meta,
.attack-card-stats {
  line-height: 1.3;
}

.attack-card-rules {
  line-height: 1.35;
  align-self: start;
}

.mission-card::before,
.attack-card::before {
  display: block;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mission-card::before {
  content: "[ SORTIE ]";
}

.mission-card.is-locked {
  opacity: 0.66;
  filter: grayscale(0.4);
}

.mission-card.is-locked::before {
  content: "[ LOCKED ]";
  color: var(--muted);
}

.mission-card.is-locked h3 {
  color: var(--muted);
}

.mission-outcome {
  display: block;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--bg-2);
  padding: 6px 9px;
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.4;
}

.mission-outcome + .mission-outcome {
  margin-top: 4px;
}

/* On the exfil screen the outcome box is followed directly by the
   "Return to Port" action row; without this gap the button sits flush
   against the box. The sibling combinator scopes the rule to exactly
   that case — sortie-card outcome boxes are wrapped in a div and don't
   match. */
.mission-outcome + .inline-actions {
  margin-top: 16px;
}

.mission-outcome-label {
  font-family: var(--display);
  font-weight: 900;
  margin-right: 6px;
}

.mission-outcome.is-win .mission-outcome-label {
  color: var(--good);
}

.mission-outcome.is-loss .mission-outcome-label {
  color: var(--bad);
}

.mission-outcome.is-locked {
  color: var(--muted);
}

.sortie-map-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--text-230);
  background:
    linear-gradient(180deg, var(--white-035), var(--color-transparent) 44%),
    var(--panel);
  box-shadow:
    inset 0 0 0 1px var(--black-320),
    0 12px 28px var(--black-320);
}

.sortie-map-header {
  display: flex;
  gap: 12px;
  align-items: start;
  justify-content: space-between;
}

.sortie-map-header h2 {
  margin: 2px 0 0;
}

.sortie-map-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--black-420);
}

.sortie-map-frame::before,
.sortie-map-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sortie-map-frame::before {
  z-index: 1;
  background:
    linear-gradient(180deg, var(--black-860) 0%, var(--black-660) 16%, var(--black-220) 34%, var(--color-transparent) 54%);
}

.sortie-map-frame::after {
  z-index: 2;
  background:
    radial-gradient(circle at 50% 42%, var(--color-transparent) 48%, var(--black-320));
}

.sortie-map-image {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 900px) {
  .sortie-map-frame {
    width: fit-content;
    max-width: 100%;
    max-height: calc(100vh - 180px);
    margin-inline: auto;
  }

  .sortie-map-image {
    width: auto;
    max-width: 100%;
    max-height: calc(100vh - 180px);
  }
}

.sortie-map-node-preview-wrap {
  --sortie-node-size: clamp(30px, 3.7vw, 54px);
  --x: 50%;
  --y: 50%;
  position: absolute;
  z-index: 3;
  left: var(--x);
  top: var(--y);
  width: var(--sortie-node-size);
  overflow: visible;
  transform: translate(-50%, -50%);
}

.sortie-map-node-preview-wrap.is-alien-base {
  width: calc(var(--sortie-node-size) * 1.08);
}

.sortie-map-node {
  --sortie-marker-glow: var(--black-550);
  --sortie-marker-core: var(--black-850);
  --sortie-marker-tight: var(--black-850);
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: var(--color-transparent);
  overflow: visible;
  line-height: 0;
  transform: none;
  filter:
    drop-shadow(0 5px 7px var(--black-680))
    drop-shadow(0 0 1px var(--sortie-marker-tight))
    drop-shadow(0 0 8px var(--sortie-marker-glow));
}

button.sortie-map-node::before,
button.sortie-map-node:hover::before,
button.sortie-map-node:hover:not(:disabled)::before,
button.sortie-map-node:active::before,
button.sortie-map-node:active:not(:disabled)::before {
  content: none;
  display: none;
  background: var(--color-transparent);
  transform: none;
}

button.sortie-map-node:hover,
button.sortie-map-node:hover:not(:disabled),
button.sortie-map-node:focus-visible,
button.sortie-map-node:active,
button.sortie-map-node:active:not(:disabled) {
  background: var(--color-transparent);
  border-color: var(--color-transparent);
  color: inherit;
  transform: none;
}

.sortie-map-node.is-alien-outpost {
  --sortie-marker-glow: var(--black-850);
  --sortie-marker-core: var(--black-860);
  --sortie-marker-tight: var(--black-860);
}

.sortie-map-node.is-alien-nest {
  --sortie-marker-glow: var(--good-550);
  --sortie-marker-core: var(--rare-highlight);
  --sortie-marker-tight: var(--good);
}

.sortie-map-node.is-alien-base {
  --sortie-marker-glow: var(--epic-550);
  --sortie-marker-core: var(--epic);
  --sortie-marker-tight: var(--epic);
}

.sortie-map-node-marker {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  transform: scale(1);
  transform-origin: center;
  transition: transform 140ms ease;
}

.sortie-map-node-preview-wrap:hover .sortie-map-node-marker,
.sortie-map-node-preview-wrap:focus-within .sortie-map-node-marker {
  transform: scale(1.1);
}

.sortie-map-intel {
  position: absolute;
  z-index: 4;
  top: clamp(10px, 2.5vw, 24px);
  left: 50%;
  display: grid;
  gap: 2px;
  justify-items: center;
  transform: translateX(-50%);
  color: var(--text);
  font-family: var(--display);
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 var(--black-760),
    0 0 16px var(--black-860);
}

.sortie-map-intel span {
  color: var(--white-760);
  font-size: clamp(0.74rem, 1.35vw, 1rem);
}

.sortie-map-intel strong {
  font-size: clamp(1.05rem, 2.35vw, 2rem);
  line-height: 1;
}

.sortie-preview-card .mission-outcome {
  margin-top: 8px;
}

.sortie-preview-card .inline-form {
  margin-top: 12px;
}

.location-card-section {
  display: grid;
  gap: 14px;
}

.location-card {
  --destination-height: clamp(160px, 17vw, 220px);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(var(--destination-height), 1fr) minmax(280px, 0.86fr);
  align-items: stretch;
  min-height: var(--destination-height);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
}

.location-card-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(0.12) contrast(1.08) saturate(0.95);
}

.location-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, var(--color-transparent) 0 38%, var(--black-120) 48%, var(--black-760) 100%),
    linear-gradient(0deg, var(--black-220), var(--color-transparent) 48%);
  pointer-events: none;
}

.location-card-clear {
  width: var(--destination-height);
  min-height: var(--destination-height);
}

.location-card-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  align-self: center;
  margin: 14px;
  padding: 14px 16px;
  background: var(--overlay-panel);
  border: 1px solid var(--text-220);
  border-left: 1px solid var(--text-220);
  backdrop-filter: blur(8px);
  box-shadow: 0 16px 40px var(--black-320);
}

.location-card-panel p {
  margin: 0;
}

.location-card-panel > .eyebrow {
  margin-bottom: 2px;
  font-size: clamp(0.94rem, 0.88rem + 0.24vw, 1.08rem);
}

.location-card-copy {
  color: var(--text);
  max-width: 42ch;
  font-size: 0.94rem;
  line-height: 1.42;
}

.location-card-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  max-width: 46ch;
  margin: 0;
}

.location-card-summary div {
  padding: 8px 10px;
  background: var(--black-320);
  border: 1px solid var(--text-120);
}

.location-card-summary dt {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.location-card-summary dd {
  margin: 0;
  color: var(--text);
  font-weight: 800;
  line-height: 1.18;
}

.location-card-panel .inline-form {
  margin-top: 2px;
}

.location-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.location-card-actions .inline-form {
  margin: 0;
}

.location-card-actions button.secondary {
  border-color: var(--line);
  background: var(--panel-2);
  color: var(--text);
}

.location-card-actions button.secondary:hover:not(:disabled) {
  border-color: var(--line);
  background: var(--panel-3);
  color: var(--text);
}

.metro-section {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
}

.treatment-screen {
  gap: 18px;
}


.treatment-hero {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
  filter: grayscale(0.18) contrast(1.08);
}

.treatment-panel {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--good);
}

.treatment-hp {
  margin: 0;
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.treatment-modifier {
  margin: 0;
  color: var(--good);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.treatment-track {
  position: relative;
  height: 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  overflow: visible;
}

.treatment-fill {
  display: block;
  height: 100%;
  background: var(--good);
  transition: width 240ms linear;
}

.treatment-marker {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 1px;
  background: var(--line);
  transform: translateX(-0.5px);
  pointer-events: none;
}

@media (max-width: 700px) {
  .treatment-panel {
    padding: 12px 14px;
  }
  .treatment-hp {
    font-size: 1.1rem;
  }
}

/* Experimental procedures — sublocation panel inside the robot dialogue
   and the dedicated procedure screens (offer + result). */

.experimental-panel {
  display: grid;
  gap: 12px;
}

.experimental-completed {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
}

.experimental-completed strong {
  color: var(--text);
  margin-right: 4px;
}

.experimental-panel h2 {
  margin: 4px 0 0;
  font-size: 0.92rem;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.procedure-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  align-content: start;
}

.procedure-card h3 {
  margin: 0;
  font-size: 1.04rem;
}

.procedure-description {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.35;
}

/* Outcome list: each possible outcome of a procedure roll renders as its
   own bordered box, so the player can scan "name / probability / effects"
   as a unit instead of parsing one long line per row. */
.procedure-outcomes {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.procedure-outcome {
  display: grid;
  gap: 3px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  line-height: 1.35;
}

.procedure-outcome-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.procedure-outcome-name {
  font-weight: 700;
  color: var(--text);
}

.procedure-outcome-odds {
  color: var(--muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.procedure-outcome-effects {
  color: var(--muted);
  font-size: 0.86rem;
}

/* Colored effect spans: positive deltas are green, negative deltas red.
   The separator between effects (", ") stays neutral so the boundary
   between two coloured tokens reads as punctuation, not as part of a
   nearby effect. */
.outcome-effect {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.outcome-effect.is-positive {
  color: var(--good);
}

.outcome-effect.is-negative {
  color: var(--bad);
}

.outcome-effect.is-neutral {
  color: var(--muted);
  font-weight: 400;
}

.outcome-effect-sep {
  color: var(--muted);
  font-weight: 400;
}

/* Lock banner at the top of a procedure card. Mirrors the mission card's
   "[ LOCKED ]" + lock-message treatment: dim the whole card, drop the
   primary CTA, surface the reason as a styled boxed line. */
.procedure-lock {
  display: block;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--bg-2);
  padding: 6px 9px;
  color: var(--muted);
  font-size: 0.84rem;
  letter-spacing: 0.02em;
}

.procedure-card.is-locked {
  opacity: 0.78;
  filter: grayscale(0.3);
}

.procedure-card.is-locked h3 {
  color: var(--muted);
}

.procedure-card.is-already-done {
  opacity: 0.7;
}

/* Two procedure cards per row in the dialogue panel. Three procedures
   land as 2 + 1; future additions tile cleanly. Falls back to a single
   column under 700px so the cards keep their readable width on phones. */
.experimental-panel .card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 700px) {
  .experimental-panel .card-grid {
    grid-template-columns: 1fr;
  }
}

/* Procedure screen (forced interaction) */

.procedure-screen {
  gap: 18px;
}

.procedure-header h1 {
  margin: 0 0 6px;
}

.procedure-header p {
  margin: 0;
  color: var(--muted);
  max-width: 64ch;
}

.procedure-panel {
  display: grid;
  gap: 10px;
  padding: 14px 18px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
}

.procedure-panel-heading {
  margin: 0;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  color: var(--text);
}

.procedure-screen .procedure-outcomes {
  font-size: 0.92rem;
}

.procedure-screen .procedure-outcome-name {
  color: var(--text);
  font-weight: 700;
}

.procedure-screen .procedure-outcome-odds {
  color: var(--muted);
  margin-left: 4px;
  margin-right: 6px;
  font-variant-numeric: tabular-nums;
}

.procedure-screen .procedure-outcome-effects {
  color: var(--muted);
}

.procedure-result {
  border-left-color: var(--good);
}

.procedure-outcome-headline {
  margin: 0;
  font-family: var(--display);
  font-size: 1.18rem;
  color: var(--text);
}

.procedure-outcome-effects-line {
  margin: 0;
  color: var(--text);
}

.procedure-outcome-effects-line strong {
  color: var(--muted);
  font-weight: 700;
  margin-right: 6px;
}

.archetype-screen {
  gap: 18px;
}

.archetype-header h1 {
  margin: 0 0 4px;
}

.archetype-header p {
  margin: 0;
  color: var(--text);
  max-width: 64ch;
}

.archetype-table-shell {
  /* Lets the table scroll horizontally on tight viewports rather than
     crushing column widths into illegibility. */
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--panel);
}

.archetype-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.archetype-table th,
.archetype-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  vertical-align: middle;
  text-align: center;
  color: var(--text);
}

.archetype-table th:last-child,
.archetype-table td:last-child {
  border-right: 0;
}

/* Header row: archetype names. Match this exactly with .archetype-row-label
   so attribute labels read identically to profile names per the design
   spec. */
.archetype-table thead th,
.archetype-row-label {
  background: var(--bg-2);
  color: var(--text);
  font-family: var(--display);
  font-size: 0.92rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 12px;
  padding-bottom: 12px;
}

.archetype-row-label {
  text-align: left !important;
  white-space: nowrap;
}

.archetype-cell {
  /* Cells in archetype columns only show a delta (or em-dash). The
     baseline column shows real numbers. */
}

.archetype-base {
  font-family: var(--display);
  font-size: 1.04rem;
  color: var(--text);
}

.archetype-delta {
  display: inline-block;
  font-weight: 700;
  font-size: 0.96rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.archetype-delta.is-bonus {
  color: var(--good);
}

.archetype-delta.is-malus {
  color: var(--bad);
}

.archetype-empty {
  color: var(--faint);
}

.archetype-row-divider th,
.archetype-row-divider td {
  border-top: 1px solid var(--line);
}

.archetype-cta-cell {
  padding: 14px 10px !important;
  background: var(--bg-2);
}

.archetype-cta-cell .inline-form {
  display: block;
}

.archetype-cta-cell button {
  width: 100%;
}

.metro-icon {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  object-fit: contain;
  filter: grayscale(0.2) contrast(1.05);
}

.metro-routes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.metro-routes .inline-form,
.metro-routes form {
  margin: 0;
}

@media (max-width: 700px) {
  .location-card {
    --destination-height: clamp(280px, 82vw, 420px);
    grid-template-columns: 1fr;
    align-content: end;
  }

  .location-card::after {
    background:
      linear-gradient(0deg, var(--black-860) 0%, var(--black-660) 44%, var(--black-120) 76%, var(--color-transparent) 100%);
  }

  .location-card-clear {
    display: none;
  }

  .location-card-panel {
    justify-content: end;
    align-self: end;
    margin: 12px;
    padding: 14px;
  }

  .metro-section {
    flex-direction: column;
    align-items: stretch;
  }
  .metro-routes {
    width: 100%;
  }
}

.reputation-panel {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  margin-bottom: 14px;
}

.reputation-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.reputation-head .eyebrow {
  margin: 0;
}

.reputation-head strong {
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.reputation-bar {
  position: relative;
  height: 14px;
  background: var(--bg);
  border: 1px solid var(--line);
}

.reputation-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 320ms ease;
}

.reputation-marker {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--muted);
  transform: translateX(-50%);
  pointer-events: none;
}

.reputation-marker.reached {
  background: var(--good);
}

.reputation-marker-labels {
  position: relative;
  height: 1em;
}

.reputation-marker-label {
  position: absolute;
  transform: translateX(-50%);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.reputation-marker-label.reached {
  color: var(--good);
}

.dungeon-screen {
  gap: 14px;
}

.objective-status {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text);
  padding: 9px 11px;
  margin: 6px 0 0;
  font-weight: 900;
  text-transform: uppercase;
}

.objective-status.complete {
  border-color: var(--accent);
  background: var(--accent-dark);
  color: var(--color-white);
  box-shadow: 4px 4px 0 var(--black-450);
}

.dungeon-vitals {
  border: 1px solid var(--accent);
  background: var(--accent-dark);
  padding: 10px 12px;
  min-width: 140px;
  text-align: right;
}

.dungeon-vitals span {
  display: block;
  color: var(--white-760);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.dungeon-vitals strong {
  display: block;
  font-family: var(--display);
  font-size: 1.25rem;
}

.dungeon-layout {
  display: grid;
  grid-template-columns: minmax(360px, 1.45fr) minmax(260px, 0.9fr);
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.dungeon-map-shell,
.dungeon-room-panel,
.trap-result {
  background: var(--panel);
  padding: 14px;
}

.dungeon-map-shell {
  position: relative;
  min-height: 330px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.dungeon-map {
  display: block;
  width: 100%;
  min-width: 300px;
  min-height: 300px;
  max-height: 520px;
  margin: 0 auto;
}

.dungeon-edge {
  stroke: var(--line);
  stroke-width: 7;
  stroke-linecap: square;
}

.dungeon-node {
  fill: var(--bg-2);
  stroke: var(--line-soft);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.dungeon-node.current {
  stroke: var(--accent);
  stroke-width: 4;
}

.dungeon-node.frozen {
  fill: var(--map-frozen);
}

.dungeon-node.cold {
  fill: var(--map-cold);
}

.dungeon-node.warm {
  fill: var(--map-warm);
}

.dungeon-node.hot {
  fill: var(--map-hot);
}

.dungeon-node.unknown {
  fill: var(--surface-absolute);
  stroke: var(--muted);
  stroke-dasharray: 5 4;
}

.dungeon-unknown-label {
  fill: var(--muted);
  font-family: var(--display);
  font-size: 19px;
  text-anchor: middle;
  pointer-events: none;
}

.dungeon-presence {
  pointer-events: none;
}

.dungeon-presence-dot {
  fill: var(--text);
  stroke: var(--bg);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.dungeon-presence.has-you .dungeon-presence-dot {
  fill: var(--accent);
}

.map-action {
  position: absolute;
  margin: 0;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.map-action button {
  min-height: 34px;
  padding: 6px 9px;
  border-color: var(--text);
  box-shadow: 4px 4px 0 var(--black-500);
  font-size: 0.72rem;
  white-space: nowrap;
}

.dungeon-room-panel {
  display: grid;
  align-content: start;
}

.dungeon-room-panel .tag-list {
  margin-bottom: 6px;
}

.dungeon-room-actions {
  margin-top: 4px;
}

.room-contents {
  display: grid;
  gap: 7px;
  margin: 10px 0 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

.room-contents-heading {
  color: var(--muted);
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.room-content-list {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.room-content-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 6px 7px 6px 10px;
  background: var(--bg-2);
}

.room-content-row.is-player {
  border-left: 3px solid var(--good);
}

.room-content-row.is-creature {
  border-left: 3px solid var(--accent);
}

.room-content-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.room-content-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-content-main > span {
  color: var(--muted);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}

.room-content-main .hpbar {
  grid-column: 1 / -1;
  width: 100%;
}

.room-content-action,
.room-content-action .inline-form {
  margin: 0;
}

.room-content-action button {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 0.7rem;
}

.room-contents-empty {
  margin: 0;
}

.temperature-chip {
  border-color: var(--line);
  color: var(--text);
  font-weight: 900;
}

.temperature-chip.frozen {
  background: var(--map-frozen);
  border-color: var(--map-frozen-line);
}

.temperature-chip.cold {
  background: var(--map-cold);
  border-color: var(--map-cold-line);
}

.temperature-chip.warm {
  background: var(--map-warm);
  border-color: var(--map-warm-line);
}

.temperature-chip.hot {
  background: var(--map-hot);
  border-color: var(--bad);
}

.temperature-chip.unknown {
  background: var(--bg-2);
  border-color: var(--line);
  color: var(--muted);
}

.trap-result {
  display: grid;
  gap: 14px;
  max-width: 660px;
  border: 1px solid var(--line);
  border-left-width: 4px;
}

.trap-result.with-image {
  grid-template-columns: minmax(200px, 0.42fr) minmax(0, 1fr);
  max-width: 820px;
  align-items: start;
}

.trap-result + .inline-actions {
  margin-top: 18px;
}

.trap-body {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.trap-image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
  filter: grayscale(0.28) contrast(1.1);
}

.trap-result.avoided {
  border-left-color: var(--good);
}

.trap-result.damaged {
  border-left-color: var(--bad);
}

.trap-result.avoided .eyebrow {
  color: var(--good);
}

.trap-result.damaged .eyebrow {
  color: var(--bad);
}

.trap-result h1 {
  margin-bottom: 6px;
  font-size: clamp(1.9rem, 5vw, 2.45rem);
}

.trap-result p {
  margin-bottom: 0;
}

.trap-result .goal {
  font-size: 0.88rem;
  text-transform: uppercase;
}

.dungeon-room-panel h2 {
  margin-bottom: 8px;
}

.trap-check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.trap-check-grid article {
  background: var(--bg-2);
  padding: 10px;
  border-left: 4px solid var(--color-transparent);
}

.trap-check-grid article.passed {
  background: var(--good-140);
  border-left-color: var(--good);
}

.trap-check-grid article.failed {
  background: var(--bad-140);
  border-left-color: var(--bad);
}

.trap-check-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.trap-check-grid strong {
  display: block;
  font-family: var(--display);
  font-size: 1.15rem;
}

.trap-check-grid article.passed strong {
  color: var(--good);
}

.trap-check-grid article.failed strong {
  color: var(--bad);
}

.mission-hp {
  margin-top: 10px;
}

.attack-card::before {
  content: "[ ATTACK CARD ]";
}

.tag-list,
.stat-list,
.stat-grid,
.equipment-summary {
  display: grid;
  gap: 7px;
}

.tag-list {
  grid-template-columns: repeat(auto-fit, minmax(118px, max-content));
  margin: 12px 0;
}

.tag-list span,
.reason {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  padding: 5px 8px;
  color: var(--muted);
  font-size: 0.8rem;
}

.item-rule-list {
  display: grid;
  gap: 6px;
  margin: 8px 0;
}

.item-rule-row {
  display: grid;
  gap: 4px;
  padding: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
}

.item-rule-row strong {
  font-family: var(--display);
  font-size: 0.86rem;
  line-height: 1.1;
}

.damage-profile,
.protection-profile {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.damage-chip,
.protection-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  border: 1px solid var(--line);
  background: var(--surface-deep);
  padding: 4px 6px;
  color: var(--text);
  font-size: 0.76rem;
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

.damage-chip.damage-type {
  border-color: var(--accent-580);
  background: var(--accent-120);
}

.protection-chip {
  border-color: var(--line);
  background: var(--surface-deep);
}

.damage-chip.damage-range {
  color: var(--text);
}

.damage-chip.hit {
  color: var(--good);
}

.damage-chip.blocked {
  color: var(--muted);
  border-color: var(--line-soft);
  background: var(--bg-2);
}

.protection-chip strong {
  color: var(--text);
  font-family: var(--display);
  font-size: 0.98rem;
}

.armor-rule-list {
  margin-bottom: 8px;
}

.protection-rule-row {
  background: var(--bg-2);
  border-color: var(--line-soft);
}

.rule-label {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.armor-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.reason {
  color: var(--text);
}

.reason:empty {
  display: none;
}

.stat-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
}

.contractor-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  margin-bottom: 12px;
}

.contractor-head h2 {
  margin-bottom: 0;
  overflow-wrap: anywhere;
}

.credits-badge {
  border: 1px solid var(--accent);
  color: var(--text);
  background: var(--accent-dark);
  padding: 8px 10px;
  white-space: nowrap;
  font-size: 0.95rem;
}

.stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 14px;
}

.stat-grid div {
  border: 1px solid var(--line);
  background: var(--bg-2);
  padding: 10px;
}

.stat-grid span,
.equipment-summary span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.stat-grid strong {
  font-family: var(--display);
  font-size: 1.42rem;
  font-variant-numeric: tabular-nums;
}

.equipment-summary {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  margin-bottom: 12px;
}

.equipment-summary h3 {
  margin-bottom: 4px;
  color: var(--muted);
}

.equipment-summary div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
}

.equipment-summary strong {
  overflow-wrap: anywhere;
  text-align: right;
}

.hpbar {
  height: 16px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--surface-black);
}

.hpbar span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hpbar.danger span {
  background: var(--bad);
}

.fighter-card {
  display: grid;
  align-content: start;
  gap: 7px;
  position: relative;
  min-height: 214px;
  overflow: hidden;
}

.fighter-card::after {
  content: "+";
  position: absolute;
  right: 12px;
  top: 8px;
  color: var(--accent);
  font-weight: 900;
}

.fighter-image {
  display: block;
  width: min(230px, 100%);
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  margin: 4px auto 0;
  border: 1px solid var(--line);
  filter: grayscale(0.24) contrast(1.12);
}

.battle-view .fighter-image {
  width: min(275px, 100%);
}

.fighter-armor {
  margin-top: 4px;
}

.fighter-armor > strong {
  font-size: 0.84rem;
}

.fighter-armor .protection-profile {
  gap: 4px;
}

.fighter-armor .protection-chip {
  min-height: 24px;
  padding: 4px 6px;
  font-size: 0.68rem;
}

.fighter-card .goal {
  margin: 2px 0 0;
}

.float-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.float-feedback {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  color: var(--bad);
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 900;
  text-shadow: 3px 3px 0 var(--bg);
  animation: floatUp 960ms ease forwards;
}

.float-feedback.miss {
  color: var(--muted);
}

.float-feedback.zero-damage {
  color: var(--faint);
}

/* Floating "Item acquired: …" toast spawned over the Buy button after
   a successful purchase. Uses position: fixed against the viewport so
   it tracks the button's on-screen rect (captured at click time)
   without needing a relatively-positioned ancestor — works equally on
   desktop and mobile orientations. We piggy-back the combat
   `floatUp` keyframes for the rise/fade arc; the only thing that
   differs is the colour and a slightly longer duration so the
   slightly longer label has time to read. The label and pointer-
   events:none make sure the bubble never blocks subsequent clicks. */
.float-acquired {
  position: fixed;
  transform: translate(-50%, -100%);
  color: var(--good);
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 2px 2px 0 var(--bg);
  pointer-events: none;
  white-space: nowrap;
  z-index: 1200;
  animation: acquiredFloatUp 1180ms ease forwards;
}

/* Anchored at the button's top edge (top: rect.top), so we want the
   bubble to sit above and rise further. Translate Y goes from -50%
   (center over the button's top) → -110% (fully above the button at
   peak readability) → -220% (drifting off-screen-ish, fading). The X
   stays centered (-50%) the whole way. */
@keyframes acquiredFloatUp {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -110%);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -220%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .float-acquired {
    animation: none;
    opacity: 1;
    transition: opacity 220ms ease;
  }
}

.fighter-card.flash-hit {
  animation: hitFlash 460ms ease;
}

.fighter-card.flash-miss {
  animation: missFlash 460ms ease;
}

.attack-card.active-card,
.compact-combat-card.active-card,
.combat-action-card.is-working {
  outline: 2px solid var(--text);
  outline-offset: -4px;
}

body.locked .attack-card {
  cursor: wait;
}

@keyframes floatUp {
  0% {
    opacity: 0;
    transform: translate(-50%, -10%);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -122%);
  }
}

@keyframes hitFlash {
  0% {
    background: var(--panel);
    transform: translateX(0);
  }
  25% {
    background: var(--surface-hit);
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  100% {
    background: var(--panel);
    transform: translateX(0);
  }
}

@keyframes missFlash {
  0% {
    background: var(--panel);
  }
  38% {
    background: var(--panel-3);
  }
  100% {
    background: var(--panel);
  }
}

.battle-center {
  display: grid;
  align-content: start;
  gap: 8px;
  text-align: left;
}

.battle-center .eyebrow {
  color: var(--muted);
}

.battle-detail:empty {
  display: none;
}

.exchange-feed {
  display: grid;
  gap: 5px;
  min-height: 56px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.exchange-feed:empty {
  display: none;
}

.exchange-line {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 7px;
  align-items: center;
  border: 1px solid var(--line-soft);
  background: var(--bg-2);
  padding: 6px 7px;
  color: var(--muted);
  font-size: 0.78rem;
  animation: messageIn 220ms ease;
}

.exchange-line strong {
  color: var(--text);
}

.exchange-line b {
  color: var(--accent);
}

.battle-actions {
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
  margin-top: 4px;
}

.player-actions {
  margin-top: 8px;
}

.compact-combat-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 4px;
  min-height: 44px;
  width: 100%;
  padding: 8px 9px;
  background: var(--accent);
  border-color: var(--accent);
  text-align: left;
}

.compact-combat-card strong,
.compact-combat-card span {
  position: relative;
  z-index: 1;
}

.compact-combat-card strong {
  overflow-wrap: normal;
  word-break: normal;
}

.compact-combat-card span {
  color: var(--white-860);
  font-size: 0.78rem;
  line-height: 1.25;
  text-align: left;
  white-space: normal;
}

.log-list,
.chat-log {
  display: grid;
  gap: 4px;
}

.log-list div {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  padding: 7px 8px;
}

.chat-message {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  padding: 3px 7px 4px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.86rem;
  line-height: 1.3;
}

.chat-panel {
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.chat-tabs {
  flex: 0 0 auto;
}

.chat-tab-panel.is-active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 8px;
}

.chat-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 8px;
  background: var(--line);
  border: 1px solid var(--line);
}

.chat-tab {
  min-height: 34px;
  border: 0;
  background: var(--bg-2);
  color: var(--muted);
  padding: 7px 8px;
  font-size: 0.82rem;
}

.chat-tab.is-active {
  background: var(--panel-3);
  color: var(--text);
}

.chat-tab:hover:not(:disabled),
.chat-tab.is-active:hover:not(:disabled) {
  background: var(--panel-3);
  color: var(--text);
}

.chat-tab span {
  font-variant-numeric: tabular-nums;
}

.chat-tab-panel[hidden] {
  display: none;
}

.status-equipment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.status-equipment-card,
.status-quest-card {
  min-width: 0;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
}

.status-equipment-card {
  display: grid;
  gap: 4px;
  padding: 8px;
}

.status-slot-label {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status-equipment-card .item-art-preview-wrap,
.status-equipment-card .item-art-preview,
.status-empty-item {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-width: 0;
}

.status-equipment-card .item-art-preview {
  height: 100%;
}

.status-equipment-card .item-art-preview .item-art {
  --item-art-pad: 5px;
  height: 100%;
  margin: 0;
}

.status-empty-item {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  color: var(--text);
  background: var(--surface-deep);
  border: 1px dashed var(--line);
  font-family: var(--display);
  font-size: 0.78rem;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-quest-card {
  display: grid;
  gap: 6px;
  padding: 10px;
}

.status-quest-card strong {
  font-family: var(--display);
  font-size: 0.9rem;
  line-height: 1.05;
  text-transform: uppercase;
}

.status-quest-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
}

.chat-log {
  /* Fill whatever vertical the chat-panel offers and scroll internally.
     min-height: 0 is critical: flex children default to min-height: auto,
     which would refuse to shrink below the natural content size and break
     the internal scroll. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  align-content: start;
  padding-right: 4px;
}

.chat-message {
  animation: messageIn 180ms ease;
}

.chat-author {
  flex: 0 0 auto;
  color: var(--text);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.chat-author::after {
  content: ":";
  color: var(--faint);
  font-weight: 400;
  margin-left: 1px;
}

.chat-body {
  flex: 1 1 0;
  min-width: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.chat-message time {
  flex: 0 0 auto;
  color: var(--faint);
  font-size: 0.74rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  align-self: baseline;
}

.chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  margin-top: 0;
  flex: 0 0 auto;
}

.chat-form input,
.chat-form button {
  min-height: 38px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.players-list {
  display: grid;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  align-content: start;
}

.player-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-soft);
  background: var(--bg-2);
  padding: 8px;
}

.player-row::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--accent);
  border: 1px solid var(--text);
}

.player-row span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.player-info-link {
  flex: 0 0 auto;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  padding: 4px 7px;
  color: var(--text);
  font-family: var(--display);
  font-size: 0.72rem;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.player-info-link:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--color-white);
}

@keyframes messageIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.responsive-table {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
  font-variant-numeric: tabular-nums;
}

th,
td {
  text-align: left;
  border-bottom: 1px solid var(--line);
  padding: 10px 8px;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-size: 0.86rem;
  text-transform: uppercase;
}

.metric-card span {
  display: block;
  color: var(--muted);
  margin-bottom: 8px;
}

.metric-card strong {
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
}

.admin-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-page-header {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.admin-page-header h1,
.admin-page-header p {
  margin-bottom: 0;
}

.admin-moderation-card {
  display: grid;
  gap: 14px;
  align-items: start;
}

.admin-moderation-card h2,
.admin-moderation-card p {
  margin-bottom: 0;
}

.admin-moderation-form {
  display: grid;
  gap: 10px;
  max-width: 540px;
}

.checkline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}

.checkline input {
  width: auto;
  min-height: auto;
}

.outbox-list {
  display: grid;
  gap: 12px;
}

.outbox-list article {
  border: 1px solid var(--line);
  padding: 12px;
}

pre {
  white-space: pre-wrap;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.inline-note {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

@media (max-width: 1080px) {
  .game-layout {
    grid-template-columns: 1fr;
  }

  /* Below the desktop layout there's no second column to pin against, so
     drop the viewport-tall flex pattern and let the rail flow in the
     document. Chat-log gets its own height cap so it doesn't fill a
     phone screen when scrolled into. */
  .side-rail {
    position: static;
    height: auto;
    overflow: visible;
    display: grid;
  }

  .side-rail > .character-console {
    width: min(100%, 560px);
    justify-self: center;
  }

  .chat-panel {
    display: block;
  }

  .chat-tab-panel.is-active {
    display: block;
  }

  .chat-log {
    max-height: 320px;
  }

  .chat-form {
    margin-top: 8px;
  }

  .players-list {
    max-height: 260px;
  }
}

@media (max-width: 980px) {
  .battle-grid,
  .three-grid,
  .metric-grid,
  .dialogue,
  .dungeon-layout,
  .trap-result.with-image {
    grid-template-columns: 1fr;
  }

  .trap-image {
    max-width: 320px;
  }

  .portrait {
    width: 100%;
  }

  .battle-view .fighter-image {
    width: min(320px, 100%);
  }
}

@media (max-width: 700px) {
  h1 {
    font-size: 2.2rem;
  }

  .page-shell {
    width: min(100% - 14px, 1440px);
    padding-top: 10px;
  }

  .page-shell.is-fullscreen {
    width: 100%;
    height: 100dvh;
    padding: 0;
    overflow: hidden;
  }

  .site-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .landing-panel {
    --landing-left-offset: 0px;
    height: 100%;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 0.7fr) auto auto;
    align-content: center;
    justify-items: center;
    gap: clamp(12px, 3dvh, 24px);
    overflow: hidden;
    padding: clamp(16px, 5vw, 30px);
    background-position: center center;
  }

  .landing-copy {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    padding-top: 0;
    text-align: center;
    transform: none;
  }

  .landing-copy h1 {
    font-size: clamp(2.1rem, 12vw, 4.4rem);
    letter-spacing: -0.055em;
  }

  .landing-copy p {
    margin-right: auto;
    margin-left: auto;
    font-size: clamp(0.68rem, 2.6vw, 0.84rem);
  }

  .landing-entry {
    grid-column: 1;
    grid-row: 2;
    width: min(100%, 320px);
    align-self: start;
    transform: none;
  }

  .landing-feature-strip {
    --landing-feature-size: min(30vw, 118px);
    grid-column: 1;
    grid-row: 3;
    width: auto;
    align-self: end;
    transform: none;
    gap: 6px;
  }

  .landing-feature-card {
    width: var(--landing-feature-size);
    height: var(--landing-feature-size);
    min-height: 0;
  }

  .landing-feature-card strong {
    left: 6px;
    right: 6px;
    bottom: 6px;
    font-size: clamp(0.46rem, 2.05vw, 0.62rem);
  }

  .landing-play-button {
    min-height: 44px;
    font-size: clamp(0.95rem, 4vw, 1.12rem);
  }

  .landing-login-card {
    gap: 8px;
    padding: 12px;
  }

  .brand,
  .topnav {
    min-height: 36px;
  }

  .topnav {
    justify-content: flex-end;
  }

  .card-grid,
  .stat-grid,
  .loadout-grid,
  .trap-check-grid {
    grid-template-columns: 1fr;
  }

  .dungeon-map-shell {
    min-height: 230px;
    padding: 10px;
  }

  .dungeon-map {
    min-height: 210px;
  }

  .map-action button {
    min-height: 32px;
    padding: 6px 8px;
    font-size: 0.68rem;
  }

  .chat-form,
  .admin-form,
  .contractor-head {
    grid-template-columns: 1fr;
  }

  .inline-actions,
  .inline-form {
    width: 100%;
  }

  .chat-form button,
  .inline-actions form,
  .inline-actions button,
  .inline-form button,
  .mission-card form,
  .mission-card button,
  .attack-card button,
  .compact-combat-card {
    width: 100%;
  }

  .compact-combat-card {
    grid-template-columns: 1fr;
  }

  .compact-combat-card span {
    white-space: normal;
  }

  .staging-clan-actions {
    flex-basis: 100%;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
    padding-left: 0;
    padding-top: 10px;
  }
}

/* ---- Krater: kill boards + hunting clans ----------------------------- */

.killglass-location-title {
  --killglass-header-width: clamp(118px, 17vw, 220px);
  display: grid;
  grid-template-columns: var(--killglass-header-width) minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 2.4vw, 28px);
  margin-bottom: 4px;
}

.killglass-header-art {
  display: block;
  width: 100%;
  max-height: clamp(104px, 15vw, 210px);
  border-radius: 14px;
  object-fit: contain;
  object-position: center;
}

.killglass-title-copy {
  display: grid;
  justify-items: start;
  gap: 6px;
  min-width: 0;
  text-align: left;
}

.killglass-title-copy p {
  margin: 0;
  max-width: 62ch;
}

.killglass-logo {
  display: flex;
  align-items: baseline;
  margin: 0;
  color: var(--text);
  font-family: "Caesar Dressing", Georgia, Cambria, "Times New Roman", serif;
  font-size: clamp(2.1rem, 4.8vw, 5.1rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1;
  text-shadow: 0 2px 18px var(--black-760);
  white-space: nowrap;
}

.killglass-logo-letter {
  display: block;
  flex: 0 0 auto;
  width: 0.88em;
  height: 0.88em;
  margin-left: 0.01em;
  margin-right: -0.1em;
  object-fit: contain;
  transform: translateY(0.12em);
  filter: drop-shadow(0 2px 10px var(--black-760));
}

.killglass-section-heading,
.killglass-panel-heading {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(0.95rem, 1.45vw, 1.28rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.game-main > .content-stack.killglass-location-stack {
  gap: 12px;
  padding-bottom: clamp(3px, 0.5vw, 6px);
}

.game-main > .killglass-section {
  padding-top: 0;
}

.killglass-boards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.killglass-panel {
  display: grid;
  gap: 10px;
  align-content: start;
  border: 1px solid var(--line);
  background: var(--panel-2);
  padding: 14px;
}

.killglass-board-hero {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--color-transparent);
}

.killglass-board-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    var(--black-660) 0%,
    var(--black-420) 34%,
    var(--black-120) 68%,
    var(--color-transparent) 100%
  );
  pointer-events: none;
}

.killglass-board-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  object-fit: cover;
}

.killglass-panel-heading {
  color: var(--text);
  text-shadow: 0 2px 4px var(--black-850);
}

.killglass-board-hero .killglass-panel-heading {
  position: absolute;
  z-index: 2;
  left: 14px;
  bottom: 12px;
}

.killglass-panel p {
  margin: 0;
}

.ranking-list {
  display: grid;
  gap: 6px;
}

.ranking-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  border: 1px solid var(--line-soft);
  background: var(--bg-2);
  padding: 7px 9px;
}

.ranking-row.is-viewer {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.ranking-rank {
  flex: 0 0 42px;
  color: var(--faint);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.ranking-name {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  overflow-wrap: anywhere;
}

.ranking-tag {
  color: var(--accent);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ranking-meta {
  color: var(--faint);
  font-size: 0.78rem;
}

.ranking-kills {
  flex: 0 0 auto;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.killglass-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.killglass-clan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.killglass-clan-head h2 {
  margin: 0;
}

.killglass-member-count {
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.killglass-invite {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}

.killglass-invitations {
  display: grid;
  gap: 6px;
}

.killglass-invitation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  border: 1px solid var(--line-soft);
  background: var(--bg-2);
  padding: 8px 9px;
}

.killglass-invitation-actions {
  display: flex;
  gap: 8px;
}

.killglass-leave {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}

@media (max-width: 980px) {
  .killglass-location-title {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .killglass-title-copy {
    justify-items: center;
    text-align: center;
  }

  .killglass-boards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .killglass-form {
    grid-template-columns: 1fr;
  }

  .killglass-invitation-actions,
  .killglass-invitation-actions form,
  .killglass-invitation-actions button {
    width: 100%;
  }
}

/* ---- Shared sorties: lobby, map upgrades, group fights ---------------- */

/* Map upgrades shared by solo missions and sorties: bigger touch
   targets, horizontal scroll instead of clipping on big dungeons, and
   markers layered above the nodes. */
.dungeon-map-shell {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.dungeon-map {
  min-width: 300px;
  margin: 0 auto;
}

.sortie-map-shell .dungeon-map {
  max-height: 520px;
}

.dungeon-node-fight-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 7 5;
  vector-effect: non-scaling-stroke;
  animation: fightRingPulse 1.4s ease-in-out infinite;
}

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

/* Mission-card clan controls (Icebreaker board) */
.mission-clan-actions {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
}

.staging-clan-actions {
  flex: 1 1 260px;
  margin-top: 0;
  border-top: 0;
  border-left: 1px solid var(--line-soft);
  padding-top: 0;
  padding-left: 12px;
}

.mission-clan-actions .eyebrow {
  margin-bottom: 0;
}

.mission-lobby-line {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

/* Lobby */
.sortie-lobby-panel {
  max-width: 560px;
}

.hpbar.small {
  width: 74px;
  height: 9px;
  flex: 0 0 auto;
}

/* Inside a fighter chip the bar spans the card; the fixed 74px form is
   for inline rows (the party panel). */
.sortie-fighter .hpbar.small {
  width: 100%;
}

/* Group fight — rendered in the solo battle grammar: the battle-grid
   holds your fighter card, the battle-center column, and the featured
   opponent card; the rest of the melee stacks under each card as
   compact roster rows. */
.sortie-side {
  display: grid;
  align-content: start;
  gap: 1px;
  background: var(--line-soft);
}

.sortie-side .fighter-card {
  border: 0;
}

.fighter-card.is-down,
.fighter-card.is-defeated,
.sortie-fighter-card.is-down {
  opacity: 0.55;
  filter: grayscale(0.9);
}

.fighter-card.is-down .fighter-image,
.fighter-card.is-defeated .fighter-image {
  filter: grayscale(1) contrast(1.02);
}

.sortie-card-form {
  margin: 0;
  display: contents;
}

.sortie-fighter {
  position: relative;
  display: grid;
  gap: 6px;
  border: 0;
  background: var(--bg-2);
  padding: 12px;
  overflow: hidden;
}

.sortie-fighter.is-you {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.sortie-fighter.is-down,
.sortie-fighter.is-defeated {
  opacity: 0.55;
  filter: grayscale(0.9);
}

.sortie-fighter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.sortie-fighter-label {
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.sortie-fighter-name {
  overflow-wrap: anywhere;
}

.sortie-fighter-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

/* The compact rows reuse the fighter-card flash keyframes so broadcast
   exchanges read the same everywhere. */
.sortie-fighter.flash-hit {
  animation: hitFlash 460ms ease;
}

.sortie-fighter.flash-miss {
  animation: missFlash 460ms ease;
}

.sortie-fighter .float-feedback {
  font-size: 1.3rem;
}

/* Turn timer */
.fight-timer {
  display: flex;
  align-items: center;
  gap: 9px;
}

.fight-timer-track {
  width: 120px;
  height: 9px;
  border: 1px solid var(--line);
  background: var(--surface-black);
  overflow: hidden;
}

.fight-timer-fill {
  display: block;
  height: 100%;
  background: var(--good);
  transition: width 240ms linear;
}

.fight-timer.is-critical .fight-timer-fill {
  background: var(--bad);
}

.fight-timer strong {
  min-width: 34px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Krater open-lobby listing */
.killglass-lobbies {
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}

.killglass-lobby-line {
  margin: 0;
  border: 1px solid var(--line-soft);
  background: var(--bg-2);
  padding: 8px 9px;
}

@media (max-width: 700px) {
  .fight-timer {
    width: 100%;
  }

  .fight-timer-track {
    flex: 1 1 auto;
    width: auto;
  }
}

/* ---- Combat resolution lock + victory confirmation -------------------- */

/* While one card resolves, the rest of the deck grays out; the played
   card keeps its active outline / "Attacking" working state at full
   strength (overriding the global button:disabled fade). Shared by solo
   battles and shared-sortie fights. */
.compact-combat-card:disabled:not(.active-card):not(.is-working) {
  opacity: 0.4;
}

.compact-combat-card.active-card:disabled,
.compact-combat-card.is-working:disabled {
  opacity: 1;
}

/* "Secure the Room" — the confirmation play that ends a won fight. The
   all-clear green sets it apart from the red attack deck while keeping
   the exact attack-card shape and ritual. */
.compact-combat-card.secure-card {
  grid-template-columns: 1fr;
  gap: 4px;
  align-items: start;
  background: var(--good);
  border-color: var(--good);
  color: var(--secure-text);
}

.compact-combat-card.secure-card span {
  white-space: normal;
}

.compact-combat-card.secure-card strong,
.compact-combat-card.secure-card span {
  color: var(--secure-text);
}

.compact-combat-card.secure-card.is-working,
.compact-combat-card.secure-card:disabled {
  opacity: 0.75;
}

/* Founder roster control inside ranking rows */
.ranking-kick-form {
  margin: 0;
  flex: 0 0 auto;
  display: inline-flex;
}

.ranking-kick {
  border-color: var(--line);
  background: var(--color-transparent);
  color: var(--muted);
}

.ranking-kick:hover {
  border-color: var(--bad);
  background: var(--bad);
  color: var(--color-white);
}

/* Sent invitations reuse the invitation row treatment */
.killglass-sent-invitations {
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}

/* ---- Invite autofill suggestion menu ---------------------------------- */

.autofill-wrap {
  position: relative;
  min-width: 0;
}

.autofill-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  display: grid;
  background: var(--panel-2);
  border: 1px solid var(--line);
  box-shadow: 6px 6px 0 var(--black-450);
}

.autofill-menu[hidden] {
  display: none;
}

.autofill-option {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 9px 11px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: var(--color-transparent);
  color: var(--text);
  text-align: left;
  font: inherit;
  /* Show names as authored — don't inherit the global button uppercase. */
  text-transform: none;
  justify-content: flex-start;
}

.autofill-option:last-child {
  border-bottom: 0;
}

.autofill-option:hover,
.autofill-option.is-active {
  background: var(--accent);
  color: var(--color-white);
}