:root {
  --bg-panel: rgba(14, 19, 29, 0.86);
  --bg-panel-solid: #111724;
  --border-ps2: rgba(196, 44, 54, 0.65);
  --border-subtle: rgba(140, 168, 208, 0.25);
  --accent-red: #d42c38;
  --accent-gold: #f0b840;
  --accent-blue: #4da6f0;
  --text-main: #eef3fa;
  --text-muted: #9ab0cc;
  --font-ui: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', 'Menlo', monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #090d14;
  color: var(--text-main);
  font-family: var(--font-ui);
}

#viewport-container {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #090d14;
}

#game-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  cursor: grab;
}

#game-canvas:active {
  cursor: grabbing;
}

#game-canvas.pixelated {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Optional CRT Scanline & Vignette Overlay */
#crt-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background:
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.26) 50%),
    radial-gradient(circle at center, transparent 62%, rgba(0, 0, 0, 0.58) 100%);
  background-size: 100% 4px, 100% 100%;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

#crt-overlay.hidden {
  opacity: 0;
}

/* Top HUD Bar */
#top-bar {
  position: fixed;
  top: 10px;
  left: 12px;
  right: 12px;
  z-index: 20;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  background: var(--bg-panel);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--accent-red);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ps2-logo {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1.2px;
  padding: 3px 7px;
  background: linear-gradient(135deg, #b81d27, #6e0f15);
  border: 1px solid #f25a64;
  border-radius: 4px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.brand-title {
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.hud-controls {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(8, 12, 20, 0.65);
  padding: 3px 7px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.control-group label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}

select, .btn {
  background: #182234;
  color: var(--text-main);
  border: 1px solid rgba(140, 168, 208, 0.35);
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

#model-select {
  max-width: 175px;
}

#map-select {
  max-width: 175px;
}

select:hover, .btn:hover {
  background: #22314a;
  border-color: var(--accent-blue);
}

select:focus, .btn:focus {
  outline: 2px solid var(--accent-blue);
  outline-offset: 1px;
}

.btn-accent {
  background: linear-gradient(135deg, #b8202a, #85131a);
  border-color: #e84853;
}

.btn-accent:hover {
  background: linear-gradient(135deg, #d12834, #9c1820);
  border-color: #ff7a82;
}

.btn-cam {
  padding: 4px 7px;
  font-size: 11.5px;
  font-family: var(--font-mono);
}

.btn-cam.active {
  background: var(--accent-blue);
  color: #08101c;
  border-color: #8ce2ff;
  font-weight: 700;
}

/* Right Side Inspector & PS2 FX Panel */
#inspector-panel {
  position: fixed;
  top: 64px;
  right: 12px;
  width: 296px;
  max-height: calc(100vh - 122px);
  overflow-y: auto;
  z-index: 18;
  background: var(--bg-panel);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  transition: transform 0.22s ease, opacity 0.22s ease;
}

#inspector-panel.collapsed {
  transform: translateX(320px);
  opacity: 0;
  pointer-events: none;
}

.panel-section {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.panel-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.section-header {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-gold);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.stat-box {
  background: rgba(8, 12, 20, 0.72);
  padding: 6px 8px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
}

.stat-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.stat-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.stat-value.state-badge {
  color: #72e6ff;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--text-main);
  cursor: pointer;
  padding: 3px 0;
}

.toggle-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-red);
  cursor: pointer;
}

.slider-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

.slider-row input[type="range"] {
  width: 100%;
  accent-color: var(--accent-blue);
}

.anim-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.anim-pill {
  flex: 1 1 calc(50% - 5px);
  padding: 6px 8px;
  font-size: 12px;
  font-family: var(--font-mono);
  text-align: center;
  background: #151e2e;
  border: 1px solid rgba(140, 168, 208, 0.28);
  border-radius: 4px;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.12s ease;
}

.anim-pill:hover {
  background: #202f47;
}

.anim-pill.active {
  background: var(--accent-red);
  border-color: #ff8088;
  color: #fff;
  font-weight: 700;
}

/* Bottom Controls Help Bar */
#bottom-bar {
  position: fixed;
  bottom: 12px;
  left: 12px;
  right: 12px;
  z-index: 18;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  background: var(--bg-panel);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.key-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.key-hint kbd {
  background: #1d293d;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  margin-right: 4px;
}

/* =========================================================================
   ILIA'S SCROLL: every menu is an app on her Scroll (RWBY phone), Classic shape.
   Two graphite end caps; a see-through glass sheet spans between their inner edges;
   the gold diamond sits on the left cap's inner edge, half over the glass, so it lands
   on the seam when the caps fold shut. game.js mountScroll() builds the frame.
   ========================================================================= */
:root {
  --sc-line: #c9f4f2;
  --sc-cyan: #67e0e4;
  --sc-dim: #8fd8dc;
  --sc-ink: #eefcfb;
  --sc-body: #bfe8e8;
  --sc-gold: #d39b2a;
  --sc-hot: #ff6b8a;
  --sc-panel: rgba(6, 22, 28, 0.5);
  --sc-rule: rgba(201, 244, 242, 0.22);
  --sc-font: "Jost", "Futura", "Century Gothic", sans-serif;
  --sc-mono: "Share Tech Mono", "SF Mono", Menlo, monospace;
}

dialog:modal {
  overscroll-behavior: contain;
}

dialog::backdrop {
  overflow: hidden;
  overscroll-behavior: contain;
  background: rgba(3, 5, 8, 0.5);
  backdrop-filter: blur(5px) brightness(0.7);
}

.scroll-dialog {
  margin: auto;
  width: min(1160px, 90vw);
  height: min(660px, 86vh);
  max-width: none;
  max-height: none;
  padding: 0;
  border: none;
  background: none;
  overflow: visible;
  color: var(--sc-ink);
  font-family: var(--sc-font);
}

.scroll-device {
  --cap: clamp(46px, 6.2%, 80px);
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: var(--cap) minmax(0, 1fr) var(--cap);
  transform: perspective(1800px) rotateX(3deg);
  filter: drop-shadow(0 28px 36px rgba(0, 0, 0, 0.75));
}

.scroll-dialog[open] .scroll-device {
  animation: scroll-raise 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.scroll-dialog.no-raise[open] .scroll-device {
  animation: none;
}

@keyframes scroll-raise {
  from {
    transform: perspective(1800px) translateY(60vh) rotateX(28deg);
    opacity: 0.3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-dialog[open] .scroll-device { animation: none; }
}

.scroll-cap {
  position: relative;
  background: linear-gradient(180deg, #3d434c, #262a31 55%, #1b1e23);
  border: 2px solid #535a64;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08);
}

.scroll-cap.left {
  border-right: none;
  border-radius: 30px 3px 3px 30px;
}

.scroll-cap.right {
  border-left: none;
  border-radius: 3px 30px 30px 3px;
}

.scroll-cap::after { /* the step moulded into each cap */
  content: "";
  position: absolute;
  top: 9%;
  bottom: 9%;
  width: 2px;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.07);
}

.scroll-cap.left::after { right: 28%; }
.scroll-cap.right::after { left: 28%; }

.scroll-diamond {
  position: absolute;
  z-index: 3;
  left: var(--cap);
  top: 50%;
  width: clamp(20px, 2.3%, 30px);
  aspect-ratio: 2 / 3;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #f0c25a, var(--sc-gold) 55%, #a8741a);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  filter: drop-shadow(0 0 6px rgba(211, 155, 42, 0.6));
}

.scroll-glass {
  position: relative;
  margin-block: 10px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--sc-line);
  border-top: 1px solid rgba(201, 244, 242, 0.4);
  border-bottom: 1px solid rgba(201, 244, 242, 0.4);
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.07) 0 16%, transparent 16% 100%),
    repeating-linear-gradient(0deg, rgba(201, 244, 242, 0.035) 0 1px, transparent 1px 4px),
    linear-gradient(172deg, rgba(14, 38, 44, 0.84), rgba(4, 11, 15, 0.9));
  backdrop-filter: blur(4px);
}

/* app bar */
.scroll-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 26px 10px;
  border-bottom: 1px solid var(--sc-rule);
}

.scroll-apps {
  display: flex;
  gap: 6px;
}

.scroll-app {
  display: grid;
  justify-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--sc-line);
  font-family: var(--sc-font);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.45;
  cursor: pointer;
  padding: 2px 4px;
  width: 92px; /* every app the same width, so the icons are evenly spaced whatever the label */
}

.scroll-app:hover { opacity: 0.8; }
.scroll-app.on { opacity: 1; filter: drop-shadow(0 0 5px rgba(103, 224, 228, 0.55)); }
.scroll-app:focus-visible { outline: 1px dashed var(--sc-line); outline-offset: 3px; }

.scroll-app svg {
  width: 44px;
  height: 33px;
}

.scroll-sys {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.scroll-sys-icons {
  display: flex;
  gap: 14px;
}

.scroll-sys-icons svg {
  width: 22px;
  height: 22px;
}

/* the globe opens the news, like a browser */
.scroll-sys-btn {
  display: grid;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
}

.scroll-sys-btn:hover,
.scroll-sys-btn.on { color: var(--sc-cyan); filter: drop-shadow(0 0 5px rgba(103, 224, 228, 0.55)); }
.scroll-sys-btn:focus-visible { outline: 1px dashed var(--sc-line); outline-offset: 3px; }

.scroll-status {
  display: flex;
  gap: 14px;
  font-family: var(--sc-mono);
  font-size: 11px;
  color: var(--sc-dim);
}

.scroll-glass svg.i {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scroll-screen {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 26px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(103, 224, 228, 0.5) transparent;
}

.scroll-hints {
  display: flex;
  justify-content: center;
  gap: 22px;
  padding: 6px 0 10px;
  font-family: var(--sc-mono);
  font-size: 11px;
  color: #9fb4b8;
}

.scroll-hints b {
  font-weight: 400;
  color: var(--sc-line);
  border: 1px solid rgba(201, 244, 242, 0.45);
  padding: 0 4px;
  margin-right: 5px;
}

/* the HUD steps aside while the Scroll is up */
body:has(dialog[open]) #mantle-hud {
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* ---------- shared controls inside the Scroll ---------- */
.scroll-screen select,
.scroll-screen .btn {
  background: rgba(6, 22, 28, 0.6);
  color: var(--sc-ink);
  border: 1px solid rgba(201, 244, 242, 0.45);
  border-radius: 0;
  font-family: var(--sc-font);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.scroll-screen select:hover,
.scroll-screen .btn:hover {
  background: rgba(103, 224, 228, 0.16);
  border-color: var(--sc-line);
}

.scroll-screen select:focus,
.scroll-screen .btn:focus-visible {
  outline: 1px dashed var(--sc-line);
  outline-offset: 2px;
}

.scroll-screen .btn-accent,
.scroll-screen .btn-cam.active {
  background: rgba(211, 155, 42, 0.18);
  border-color: var(--sc-gold);
  color: #f6dfa6;
}

.scroll-screen .panel-section {
  border: 1px solid var(--sc-rule);
  background: var(--sc-panel);
  padding: 12px 14px;
  gap: 8px;
}

.scroll-screen .panel-section:last-child {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sc-rule);
}

.scroll-screen .section-header {
  color: var(--sc-dim);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
}

.scroll-screen .toggle-row,
.scroll-screen .slider-row,
.scroll-screen .slider-row label {
  color: var(--sc-ink) !important;
  font-size: 13px;
}

.scroll-screen input[type="checkbox"],
.scroll-screen input[type="range"] {
  accent-color: var(--sc-cyan);
}

.scroll-screen .stat-box {
  background: rgba(4, 14, 18, 0.6);
  border: 1px solid var(--sc-rule);
  border-radius: 0;
}

.scroll-screen .stat-label { color: var(--sc-dim); letter-spacing: 0.1em; }
.scroll-screen .stat-value { font-family: var(--sc-mono); font-weight: 400; color: var(--sc-ink); }

.scroll-screen .anim-pill {
  border-radius: 0;
  font-family: var(--sc-font);
}

/* settings app */
.scroll-screen .modal-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.scroll-screen .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.scroll-screen .modal-header h2 {
  font-weight: 300;
  font-size: 26px;
  letter-spacing: 0.02em;
  color: var(--sc-ink);
}

.scroll-screen .modal-header .ps2-logo,
#btn-open-charsheet {
  display: none !important;
}

.scroll-screen .modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.scroll-screen .modal-body.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 14px;
  align-items: start;
}

.controls-schema-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.schema-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(201, 244, 242, 0.12);
  font-size: 13px;
  color: var(--sc-ink);
}

.schema-row > span {
  margin-left: auto;
  text-align: right;
}

.schema-row kbd {
  font-family: var(--sc-mono);
  font-size: 11px;
  color: var(--sc-line);
  border: 1px solid rgba(201, 244, 242, 0.45);
  padding: 0 6px;
  white-space: nowrap;
}

.dev-anim-details {
  margin-top: 6px;
  font-size: 12px;
  color: var(--sc-dim);
}

.dev-anim-details summary {
  cursor: pointer;
  padding: 4px 0;
  color: var(--sc-ink);
}

/* roster (dev) */
.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.model-card {
  background: var(--sc-panel);
  border: 1px solid var(--sc-rule);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease;
}

.model-card:hover { border-color: var(--sc-line); }
.model-card.active { border-color: var(--sc-gold); }

.card-thumb {
  width: 100%;
  height: 170px;
  background: radial-gradient(circle at 50% 35%, #12313a, #061015);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  border: 1px solid var(--sc-gold);
  background: rgba(4, 12, 16, 0.85);
  color: #f6dfa6;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 6px;
}

.card-info { padding: 10px; display: flex; flex-direction: column; gap: 3px; }
.card-title { font-size: 14px; color: var(--sc-ink); }
.card-sub { font-size: 12px; color: var(--sc-dim); line-height: 1.35; }
.card-meta { margin-top: 4px; display: flex; justify-content: space-between; font-family: var(--sc-mono); font-size: 11px; color: var(--sc-cyan); }

.dropzone-banner {
  border: 1px dashed rgba(201, 244, 242, 0.45);
  padding: 16px;
  text-align: center;
  color: var(--sc-dim);
  font-size: 13px;
  cursor: pointer;
}

.dropzone-banner:hover,
.dropzone-banner.dragover {
  border-color: var(--sc-gold);
  color: var(--sc-ink);
}

/* Global Drag-and-drop Overlay */
#drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(12, 18, 28, 0.85);
  border: 4px dashed var(--accent-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  color: var(--accent-gold);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

#drop-overlay.visible {
  opacity: 1;
}

/* Zone Indicator Badge in Top Bar */
.zone-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 4px;
  background: rgba(16, 26, 42, 0.85);
  border: 1px solid rgba(110, 180, 255, 0.35);
  color: #a6d4ff;
  margin-left: 6px;
  transition: all 0.2s ease;
}

.zone-badge.restricted {
  background: rgba(68, 16, 22, 0.88);
  border-color: #ff525e;
  color: #ff9ea5;
}

/* In-game HUD: Bloodlines layout. Round gauge bottom-left, weapon bottom-right, masks top-centre,
   area caption top-left. #mantle-hud.idle fades it back when nothing has changed for a few seconds. */
#mantle-hud {
  --hud-ink: #e9dfc8;
  --hud-ink-dim: #c9b993;
  --hud-brass: #8d7040;
  --hud-vit: #b3262c;
  --hud-focus: #d39b2a;
  --hud-aura: #2f78a8;
  --hud-aura-crest: #7cc4ec;
  --hud-alert: #ff8090;
  --hud-serif: "IM Fell English SC", "Cormorant Garamond", Georgia, serif;
  --hud-body: "Cormorant Garamond", Georgia, serif;
  --hud-u: min(1vw, 1.78vh); /* one unit = 1% of a 16:9 frame's width */
  position: fixed;
  inset: 0;
  z-index: 4; /* sits beneath #crt-overlay (z-index: 5) so scanlines & vignette pass across the HUD */
  pointer-events: none;
  color: var(--hud-ink);
  font-family: var(--hud-body);
  text-shadow: 0 0 calc(var(--hud-u) * 0.5) #000, 0 0 2px #000;
}

#mantle-hud .hud-top {
  transition: opacity 0.6s ease;
}

#mantle-hud.idle .hud-top {
  opacity: 0.4;
}

#mantle-hud.idle .hud-reticle:not(.context):not(.in-reach) {
  opacity: 0.2;
}

/* area caption */
.hud-zone {
  position: absolute;
  left: calc(var(--hud-u) * 3);
  top: calc(var(--hud-u) * 3);
  opacity: 0;
  transition: opacity 0.8s ease;
}

.hud-zone.show {
  opacity: 1;
}

#zone-indicator {
  font-family: var(--hud-serif);
  font-size: calc(var(--hud-u) * 2.2);
  letter-spacing: 0.08em;
  text-transform: capitalize;
}

.hud-zone-rule {
  height: 1px;
  width: calc(var(--hud-u) * 16);
  margin: calc(var(--hud-u) * 0.3) 0;
  background: linear-gradient(90deg, #b48d4c, transparent);
}

.hud-zone-sub {
  font-style: italic;
  font-size: calc(var(--hud-u) * 1.35);
  color: var(--hud-ink-dim);
}

#zone-indicator.restricted + .hud-zone-rule {
  background: linear-gradient(90deg, #c0302a, transparent);
}

#zone-indicator.restricted ~ .hud-zone-sub {
  color: var(--hud-alert);
}

/* masks + witness */
.hud-top {
  position: absolute;
  left: 50%;
  top: calc(var(--hud-u) * 1.8);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: calc(var(--hud-u) * 0.6);
}

.hud-masks {
  display: flex;
  gap: calc(var(--hud-u) * 0.6);
}

.hud-masks .vtmb-mask-slot {
  width: calc(var(--hud-u) * 2.6);
  height: calc(var(--hud-u) * 2.6);
  display: grid;
  place-items: center;
  border: none;
  background: none;
  padding: 0;
  filter: drop-shadow(0 0 calc(var(--hud-u) * 0.3) #000);
}

.hud-masks .vtmb-mask-slot svg {
  width: 100%;
  height: 100%;
}

.hud-masks .vtmb-mask-slot.clear {
  opacity: 0.35;
  box-shadow: none;
}

.hud-masks .vtmb-mask-slot.discovered {
  background: none;
  box-shadow: none;
  transform: none;
  filter: drop-shadow(0 0 calc(var(--hud-u) * 0.5) rgba(235, 34, 48, 0.8));
}

.hud-watch {
  display: flex;
  align-items: center;
  gap: calc(var(--hud-u) * 0.6);
  font-style: italic;
  font-size: calc(var(--hud-u) * 1.3);
  color: #f0b0a0;
}

.hud-watch[hidden] {
  display: none;
}

.hud-watch-bar {
  width: calc(var(--hud-u) * 9);
  height: calc(var(--hud-u) * 0.35);
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid #5a2a24;
}

.hud-watch-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: #d23a2a;
  transition: width 0.2s linear;
}

/* Twin-Cap Peeking Scroll HUD: 3 tall bars (Aura | Health | Focus), left cap Light Gem clasp, bottom Form & Notification socket */
.hud-gauge {
  position: absolute;
  left: calc(var(--hud-u) * 1.8);
  bottom: calc(var(--hud-u) * 1.6);
  display: flex;
  align-items: flex-end;
  gap: calc(var(--hud-u) * 0.8);
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 0.4s ease, transform 0.25s ease;
}

.hud-gauge canvas {
  width: calc(var(--hud-u) * 10.4);
  height: calc(var(--hud-u) * 20.8);
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* =========================================================================
   START / TITLE SCREEN: solid black, line-art emblem, title, three-word menu
   ========================================================================= */
.title-screen {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #000;
  color: #e9e3d6;
  transition: opacity 0.5s ease;
}

.title-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

.title-art {
  width: min(880px, 88vw);
  max-height: 58vh;
  height: auto;
  object-fit: contain;
  display: block;
  pointer-events: none;
  animation: title-in 1.6s ease both;
}

/* plain class selectors: the shapes drawn through <use> don't see ancestors like .title-art */
.tl-line { fill: none; stroke: #e9e3d6; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tl-thin { fill: none; stroke: #8f897d; stroke-width: 1; }

.title-logo {
  margin: 2vh 0 0;
  font-family: "IM Fell English SC", Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 4.1vw, 58px);
  letter-spacing: 0.32em;
  padding-left: 0.32em; /* letter-spacing adds space after the last letter; this re-centres it */
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
  animation: title-in 1.6s ease 0.5s both;
}

.title-logo span {
  display: block;
  margin-top: 0.55em;
  font-size: 0.4em;
  letter-spacing: 0.5em;
  padding-left: 0.5em;
  color: #8f897d;
}

.title-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2em 3.2em;
  margin-top: 3.5vh;
  animation: title-in 1.2s ease 1.1s both;
}

.title-btn {
  padding: 0.3em 0 0.35em;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  font-family: "IM Fell English SC", Georgia, serif;
  font-size: clamp(14px, 1.3vw, 19px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8f897d;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.title-btn:hover:not(:disabled),
.title-btn:focus-visible:not(:disabled),
.title-btn.active:not(:disabled) {
  color: #f4efe4;
  border-bottom-color: #b3262c;
  outline: none;
}

.title-btn:disabled {
  color: #3c3833;
  cursor: default;
}

.title-meta {
  min-height: 1.4em;
  margin-top: 1.4em;
  font: 300 12px/1.4 Jost, sans-serif;
  letter-spacing: 0.08em;
  color: #5f5a52;
  animation: title-in 1.2s ease 1.3s both;
}

/* Title settings: replaces the art and menu while open, same type and colours as the menu */
.title-screen.settings-open .title-art,
.title-screen.settings-open .title-menu,
.title-screen.settings-open #title-continue-meta { display: none; }

.title-settings {
  width: min(420px, 100%);
  margin-top: 4vh;
  animation: title-in 0.6s ease both;
}
.title-settings[hidden] { display: none; }

.ts-heading {
  margin: 1.6em 0 0.6em;
  font-family: "IM Fell English SC", Georgia, serif;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #5f5a52;
  text-align: center;
}

.ts-row {
  display: grid;
  grid-template-columns: 7em 1fr;
  align-items: center;
  gap: 1em;
  padding: 0.35em 0;
  font: 300 13px/1 Jost, sans-serif;
  letter-spacing: 0.08em;
  color: #8f897d;
}
.ts-row:hover, .ts-row:focus-within { color: #f4efe4; }

.ts-row input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 16px;
  background: linear-gradient(#3c3833, #3c3833) center / 100% 1px no-repeat;
  cursor: pointer;
}
.ts-row input[type="range"]:focus { outline: none; }
.ts-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  background: #8f897d;
}
.ts-row input[type="range"]::-moz-range-thumb {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 0;
  transform: rotate(45deg);
  background: #8f897d;
}
.ts-row:hover input[type="range"]::-webkit-slider-thumb,
.ts-row input[type="range"]:focus::-webkit-slider-thumb { background: #b3262c; }
.ts-row:hover input[type="range"]::-moz-range-thumb,
.ts-row input[type="range"]:focus::-moz-range-thumb { background: #b3262c; }

.ts-buttons {
  display: flex;
  justify-content: center;
  gap: 3.2em;
}

#ts-status { text-align: center; animation: none; }
#btn-ts-back { margin-top: 0.6em; }

/* the intro fades play once: coming back from settings would replay them (display: none restarts them) */
.title-screen.intro-done .title-art,
.title-screen.intro-done .title-logo,
.title-screen.intro-done .title-menu,
.title-screen.intro-done .title-meta { animation: none; }

/* short screens (phones in landscape): no logo while in settings, tighter rows */
@media (max-height: 500px) {
  .title-screen.settings-open .title-logo { display: none; }
  .title-settings { margin-top: 0; }
  .ts-heading { margin: 0.7em 0 0.2em; }
  .ts-row { padding: 0.2em 0; }
  #ts-status { margin-top: 0.3em; }
  #btn-ts-back { margin-top: 0; }
}

@keyframes title-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* =========================================================================
   NEW GAME: CHARACTER CREATION. The whole sheet on one screen (desktop and phone), the
   right panel describes whatever the mouse is over (or the stat tapped on a touch screen)
   and previews what spending on it does to the feats. Sized in em off one font size.
   ========================================================================= */
.creation {
  position: fixed;
  inset: 0;
  z-index: 46; /* over the title screen */
  display: flex;
  flex-direction: column;
  padding: 1.4em 2.4em 1.2em;
  box-sizing: border-box;
  background: #000;
  color: #e9e3d6;
  font: 300 clamp(10.5px, calc(min(1vw, 1.78vh) * 1.17), 17px) / 1.3 Jost, sans-serif;
  animation: title-in 0.5s ease both;
}
.creation[hidden] { display: none; }

.cr-hd { display: flex; align-items: baseline; gap: 1.6em; border-bottom: 1px solid #2a2723; padding-bottom: 0.6em; }
.cr-name { font-family: "IM Fell English SC", Georgia, serif; font-size: 1.9em; letter-spacing: 0.18em; text-transform: uppercase; }
.cr-sub { font-size: 0.85em; letter-spacing: 0.08em; color: #8f897d; }
.cr-pts { margin-left: auto; font-family: "IM Fell English SC", Georgia, serif; font-size: 0.95em; letter-spacing: 0.2em; text-transform: uppercase; color: #8f897d; }
.cr-pts b { margin-left: 0.4em; font: 400 1.6em/1 Jost, sans-serif; letter-spacing: 0; color: #f4efe4; } /* the title face's 0 reads as an o */

.cr-body { flex: 1; min-height: 0; display: flex; gap: 2em; padding-top: 0.8em; }
.cr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.9em; }
.cr-block-title { margin-bottom: 0.3em; font-family: "IM Fell English SC", Georgia, serif; font-size: 0.85em; letter-spacing: 0.3em; text-transform: uppercase; color: #5f5a52; }
.cr-grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 2em; }
.cr-row > span:first-child { white-space: nowrap; }
.cr-col-title { margin-bottom: 0.2em; font-size: 0.72em; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; color: #b3262c; }

.cr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  margin: 0 -0.5em;
  padding: 0.32em 0.5em;
  border-left: 2px solid transparent;
  letter-spacing: 0.04em;
  color: #8f897d;
  cursor: default;
  user-select: none;
}
.cr-row.focus { color: #f4efe4; background: rgba(179, 38, 44, 0.12); border-left-color: #b3262c; }
.cr-dots { display: flex; flex: none; }
/* each <i> is a click target a bit bigger than the diamond it draws */
.cr-dots i { display: grid; place-items: center; width: 0.92em; height: 1.2em; cursor: pointer; }
.cr-dots i::before { content: ''; width: 0.5em; height: 0.5em; transform: rotate(45deg); border: 1px solid #5f5a52; }
.cr-dots i.on::before { background: #e9e3d6; border-color: #e9e3d6; }
.cr-row.focus .cr-dots i.on::before { background: #b3262c; border-color: #b3262c; }
.cr-dots i.pre::before { border-color: #b3262c; background: rgba(179, 38, 44, 0.45); } /* would be bought */
.cr-dots i.drop::before { background: #3c3833; border-color: #3c3833; }                /* would be removed */
.cr-dots i.cant::before { border-color: #2a2723; }                                     /* can't afford */
.cr-dots i.pre.cant::before { border-color: #5f5a52; background: none; }
body.touch .cr-dots i { cursor: default; }

.cr-vital { display: flex; justify-content: space-between; padding: 0.32em 0; font-size: 0.9em; letter-spacing: 0.06em; color: #8f897d; }
.cr-vital b { font-weight: 400; color: #e9e3d6; }
.cr-vital.hit, .cr-vital.hit b { color: #f4efe4; }
.cr-vital.hit b { color: #e0484e; }

.cr-panel { width: 22em; flex: none; display: flex; flex-direction: column; min-height: 0; padding-left: 1.6em; border-left: 1px solid #2a2723; }
/* the title, cost line and description keep a fixed height so the feats below never move */
.cr-title { font-family: "IM Fell English SC", Georgia, serif; font-size: 1.15em; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.cr-line { margin-top: 0.2em; font-size: 0.8em; letter-spacing: 0.04em; color: #8f897d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-line.cant { color: #b3262c; }
.cr-desc { height: calc(4 * 1.45em); margin: 0.4em 0 0.7em; overflow: hidden; font-size: 0.85em; line-height: 1.45; } /* 4 lines: the longest description */
.cr-pm { display: none; gap: 0.6em; margin-bottom: 0.7em; }
body.touch .cr-pm { display: flex; }                       /* desktop clicks the dots instead */
.cr-pm button { width: 2.6em; height: 2.6em; border: 1px solid #5f5a52; background: none; color: #e9e3d6; font-size: 1.1em; }
.cr-pm button.plus { border-color: #b3262c; color: #f4efe4; }
.cr-pm button:disabled { border-color: #2a2723; color: #3c3833; }

.cr-feats { display: grid; grid-template-columns: 1fr auto; column-gap: 1em; font-size: 0.82em; letter-spacing: 0.03em; color: #5f5a52; }
.cr-feats div { padding: 0.12em 0; }
.cr-feats .v { text-align: right; color: #8f897d; }
.cr-feats .hit { color: #f4efe4; }
.cr-feats .hit.v { color: #e0484e; font-weight: 400; }
.cr-also { margin-top: 0.7em; font-size: 0.8em; letter-spacing: 0.03em; color: #8f897d; }

.cr-ft { display: flex; align-items: center; justify-content: flex-end; gap: 3em; margin-top: 0.6em; padding-top: 0.6em; border-top: 1px solid #2a2723; }
.cr-hint { margin-right: auto; font-size: 0.8em; letter-spacing: 0.05em; color: #5f5a52; }
.cr-ft .title-btn { font-size: 1.05em; }
/* once every point is spent, Begin is the next step: a soft red band behind it says so */
#btn-cr-begin { padding: 0.3em 1.4em 0.35em; }   /* room for the band, kept while disabled so the footer doesn't shift */
#btn-cr-begin:not(:disabled) {
  position: relative;
  z-index: 0;            /* own layer, so the band sits behind the text but not behind the screen */
  color: #f4efe4;
}
#btn-cr-begin:not(:disabled)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(179, 38, 44, 0) 0%, rgba(179, 38, 44, 0.55) 25%, rgba(179, 38, 44, 0.55) 75%, rgba(179, 38, 44, 0) 100%);
  animation: cr-begin-glow 2.4s ease-in-out infinite;
}
@keyframes cr-begin-glow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* tall screens: roomier rows so the sheet fills the space beside the panel */
@media (min-height: 600px) {
  .cr-main { gap: 1.8em; }
  .cr-row { padding: 0.55em 0.5em; }
  .cr-vital { padding: 0.55em 0; }
  .cr-feats div { padding: 0.22em 0; }
}

/* short screens (phones in landscape): tighter, feats in two pairs of columns */
@media (max-height: 500px) {
  .creation { padding: 0.9em 1.6em 0.8em; }
  .cr-panel { width: 21em; padding-left: 1.2em; }
  .cr-desc { height: calc(4 * 1.35em); font-size: 0.8em; line-height: 1.35; }
  .cr-feats { grid-template-columns: 1fr auto 1fr auto; font-size: 0.78em; }
}

/* =========================================================================
   CHARACTER SHEET (Dossier / Missions / Cover apps on the Scroll)
   ========================================================================= */
/* ---------- Dossier / Missions / Cover apps (the character sheet) ---------- */
.vtmb-sheet {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vtmb-sheet-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--sc-rule);
}

.vtmb-sheet-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.vtmb-crest {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--sc-line);
  border-radius: 50%;
  border: 2px dashed var(--sc-line);
  box-shadow: inset 0 0 0 4px rgba(4, 12, 16, 0.9), inset 0 0 0 5px rgba(201, 244, 242, 0.5);
}

.vtmb-sheet-title {
  font-weight: 300;
  font-size: 24px;
  letter-spacing: 0.02em;
  color: var(--sc-ink);
  line-height: 1.1;
}

.vtmb-sheet-subtitle {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-dim);
}

.vtmb-meter-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  cursor: pointer;
}

.vtmb-meter-label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-dim);
}

.vtmb-dots-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.vtmb-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--sc-line);
  background: transparent;
  display: inline-block;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.12s ease;
}

.vtmb-dot.filled {
  background: var(--sc-line);
  box-shadow: 0 0 6px var(--sc-cyan);
}

.vtmb-dot.locked { cursor: default; }
.vtmb-dot:hover:not(.locked) { transform: scale(1.2); }

.vtmb-masks-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vtmb-mask-slot {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(201, 244, 242, 0.35);
  background: rgba(4, 12, 16, 0.6);
  cursor: pointer;
  transition: all 0.18s ease;
}

.vtmb-mask-slot.discovered {
  border-color: var(--sc-hot);
  box-shadow: 0 0 8px rgba(255, 107, 138, 0.55);
}

.vtmb-mask-slot svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* the Scroll's app bar replaces the old tabs (kept in the DOM, the tab code still drives them) */
.vtmb-tabs-bar { display: none; }

.cover-sub {
  margin-left: 6px;
  color: var(--sc-gold);
  letter-spacing: 0.1em;
}

/* Missions, Messages and Cover are their own apps: no sheet header, side panel or footer */
#charsheet-modal:not([data-app="dossier"]) .vtmb-sheet-header,
#charsheet-modal:not([data-app="dossier"]) .vtmb-right-col,
#charsheet-modal:not([data-app="dossier"]) .vtmb-sheet-foot {
  display: none;
}

#charsheet-modal:not([data-app="dossier"]) .vtmb-sheet-body {
  grid-template-columns: minmax(0, 1fr);
}

/* Cover app */
.cover-status {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px 22px;
  padding: 16px 18px;
  border: 1px solid var(--sc-line);
  background: rgba(103, 224, 228, 0.08);
}

.cover-status.cover-wary { border-color: var(--sc-gold); background: rgba(211, 155, 42, 0.08); }
.cover-status.cover-hostile,
.cover-status.cover-manhunt { border-color: var(--sc-hot); background: rgba(255, 107, 138, 0.08); }

.cover-slots {
  display: flex;
  gap: 10px;
}

.cover-slots .vtmb-mask-slot {
  width: 54px;
  height: 54px;
  cursor: default;
}

.cover-slots .vtmb-mask-slot svg {
  width: 42px;
  height: 42px;
}

.cover-stage-name {
  font-weight: 300;
  font-size: 34px;
  line-height: 1;
  color: var(--sc-ink);
}

.cover-stage-count {
  font-family: var(--sc-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--sc-dim);
  margin-top: 4px;
}

.cover-effect {
  grid-column: 1 / -1;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sc-body);
}

.cover-rules {
  margin: 4px 0 0 18px;
  display: grid;
  gap: 6px;
}

.cover-rules b { color: var(--sc-ink); font-weight: 500; }

/* Settings > Debug */
.debug-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.vtmb-tabpanel.hidden { display: none !important; }

.vtmb-sheet-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 16px;
  align-items: stretch;
}

/* short screens (phones in landscape): feats and Accept go below the stats so the dots have room */
@media (max-height: 500px) {
  .vtmb-sheet-body { grid-template-columns: minmax(0, 1fr); }
}

.vtmb-left-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.vtmb-section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0;
  color: var(--sc-dim);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.vtmb-section-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 244, 242, 0.45), transparent);
}

/* Dossier: Physical, Social, Mental, Semblance & Traits / Talents, Skills, Knowledges, Vitals */
.vtmb-four-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.vtmb-subcol {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vtmb-subhead {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-gold);
  margin-bottom: 2px;
}

.vtmb-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 4px;
  cursor: pointer;
}

.vtmb-stat-row:hover,
.vtmb-stat-row.selected {
  background: rgba(103, 224, 228, 0.12);
}

.vtmb-stat-label {
  flex: 1;
  font-size: 13px;
  color: var(--sc-ink);
}

.vtmb-dots {
  display: flex;
  align-items: center;
  gap: 3px;
}

.vtmb-vital-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--sc-body);
}

.vtmb-vital-row b {
  font-family: var(--sc-mono);
  font-weight: 400;
  color: var(--sc-ink);
}

.vtmb-desc-box {
  height: 116px;
  overflow: hidden;
  padding: 10px 12px;
  border: 1px solid var(--sc-line);
  background: var(--sc-panel);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vtmb-desc-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  column-gap: 8px;
}

#vtmb-desc-cost {
  font-family: var(--sc-mono);
  font-size: 11px;
  color: var(--sc-gold);
}

.vtmb-desc-item-title {
  font-size: 15px;
  color: var(--sc-ink);
}

.vtmb-desc-p {
  font-size: 12px;
  line-height: 1.35;
  color: var(--sc-body);
}

.vtmb-right-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vtmb-feats-box {
  flex: 1;
  border: 1px solid var(--sc-rule);
  background: var(--sc-panel);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vtmb-feats-title {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sc-dim);
}

/* two columns, filled top to bottom */
.vtmb-feats-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(8, auto);
  grid-auto-flow: column;
  column-gap: 12px;
}

.vtmb-feat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--sc-body);
  cursor: pointer;
  padding: 0 4px;
}

.vtmb-feat-row:hover,
.vtmb-feat-row.lit {
  color: var(--sc-ink);
  background: rgba(103, 224, 228, 0.12);
}

.vtmb-feat-val {
  font-family: var(--sc-mono);
  color: var(--sc-cyan);
}

/* Experience and the buttons along the bottom of the Dossier */
.vtmb-sheet-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--sc-rule);
}

.vtmb-sheet-foot .vtmb-action-btn { padding: 5px 12px; }

.vtmb-exp-label {
  margin-right: 8px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sc-gold);
}

.vtmb-exp-label b {
  margin-left: 8px;
  font-family: var(--sc-mono);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--sc-ink);
}

.vtmb-action-btn {
  background: none;
  border: 1px solid rgba(201, 244, 242, 0.5);
  color: var(--sc-ink);
  font-family: var(--sc-font);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 10px;
  cursor: pointer;
  transition: all 0.14s ease;
}

.vtmb-action-btn:hover {
  background: rgba(103, 224, 228, 0.16);
  border-color: var(--sc-line);
}

.vtmb-action-btn.accept {
  border-color: var(--sc-gold);
  color: #f6dfa6;
  background: rgba(211, 155, 42, 0.14);
}

.vtmb-info-content {
  padding: 6px 2px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--sc-body);
  min-height: 260px;
}

.vtmb-quest-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-block-end: 4px;
}

.vtmb-quest-title {
  color: var(--sc-ink);
  font-size: 15.5px;
  font-weight: 500;
}

.vtmb-quest-status {
  font-family: var(--sc-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1px 6px;
  border: 1px solid var(--sc-line);
  color: var(--sc-line);
}

.vtmb-quest-status.failed {
  border-color: var(--sc-hot);
  color: #ffb0c0;
}

/* Ilia's emblem (RWBY-style flat silhouette: chameleon with a coiled tail) */
.ilia-emblem {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
}

.vtmb-crest .ilia-emblem {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 0 4px rgba(103, 224, 228, 0.5));
}

/* Center Reticle (RWBY Shattered Moon × Bloodlines context morph) */
.hud-reticle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--hud-u) * 2.2);
  height: calc(var(--hud-u) * 2.2);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  opacity: 0.42;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
  transition: opacity 0.2s ease, transform 0.16s ease, width 0.16s ease, height 0.16s ease;
  pointer-events: none;
}

.hud-reticle[hidden] {
  display: none;
}

.hud-reticle svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hud-reticle.armed {
  opacity: 0.56;
}

.hud-reticle.in-reach {
  opacity: 0.86;
  transform: translate(-50%, -50%) scale(0.92);
}

.hud-reticle.context {
  width: calc(var(--hud-u) * 2.75);
  height: calc(var(--hud-u) * 2.75);
  opacity: 0.9;
}

/* the drawn weapon's Dust, bottom right (holo style, like the Scroll gauge) */
.hud-ammo {
  position: absolute;
  right: calc(var(--hud-u) * 1.8);
  bottom: calc(var(--hud-u) * 1.6);
  padding: calc(var(--hud-u) * 0.6) calc(var(--hud-u) * 0.9);
  background: rgba(6, 22, 28, 0.78);
  border: 1px solid rgba(103, 224, 228, 0.58);
  border-radius: 4px;
  font-family: "Share Tech Mono", monospace;
  color: #c9f4f2;
  text-shadow: none;
  filter: drop-shadow(0 4px calc(var(--hud-u) * 0.9) rgba(0, 0, 0, 0.88));
  transition: opacity 0.6s ease;
}
.hud-ammo[hidden] { display: none; }
.hud-ammo-name {
  font-size: calc(var(--hud-u) * 0.85);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #67e0e4;
}
.hud-ammo-row {
  display: flex;
  align-items: center;
  gap: calc(var(--hud-u) * 0.7);
  margin: calc(var(--hud-u) * 0.35) 0;
}
.hud-ammo-pips {
  display: flex;
  gap: calc(var(--hud-u) * 0.18);
}
.hud-ammo-pips i {
  width: calc(var(--hud-u) * 0.42);
  height: calc(var(--hud-u) * 1.2);
  background: rgba(201, 244, 242, 0.12);
  border: 1px solid rgba(201, 244, 242, 0.22);
}
.hud-ammo-pips i.on {
  background: #ff9848;
  border-color: #ffd27a;
  box-shadow: 0 0 calc(var(--hud-u) * 0.4) rgba(255, 152, 72, 0.7);
}
.hud-ammo-pips[hidden],
.hud-ammo-bar[hidden] { display: none; }
/* the sword's shard: one bar as wide as the cannon's row of pips */
.hud-ammo-bar {
  width: calc(var(--hud-u) * 11.6);
  height: calc(var(--hud-u) * 1.2);
  background: rgba(201, 244, 242, 0.12);
  border: 1px solid rgba(201, 244, 242, 0.22);
}
.hud-ammo-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ff9848, #ffd27a);
  box-shadow: 0 0 calc(var(--hud-u) * 0.4) rgba(255, 152, 72, 0.7);
  transition: width 0.25s ease;
}
.hud-ammo-row b {
  min-width: 2ch;
  text-align: right;
  font-size: calc(var(--hud-u) * 1.5);
  font-weight: normal;
  color: #ffe082;
}
.hud-ammo-note {
  font-size: calc(var(--hud-u) * 0.8);
  letter-spacing: 0.06em;
  color: #c9b993;
}
.hud-ammo.low .hud-ammo-row b { color: #ff9848; }
.hud-ammo.empty .hud-ammo-row b,
.hud-ammo.empty .hud-ammo-note { color: #ff8090; }
#mantle-hud.idle .hud-ammo { opacity: 0.55; }
/* touch: the on-screen buttons own the bottom right */
body.touch .hud-ammo { bottom: auto; top: calc(var(--hud-u) * 9); }

body.in-dialogue .hud-reticle,
body.in-cutscene .hud-reticle {
  opacity: 0;
}

/* Condensed interaction context caption directly below the center reticle */
.interact-prompt {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--hud-u) * 1.85);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: calc(var(--hud-u) * 0.48);
  font-family: var(--hud-serif);
  font-size: calc(var(--hud-u) * 1.18);
  letter-spacing: 0.04em;
  color: rgba(233, 223, 200, 0.92);
  opacity: 0;
  transition: opacity 0.15s ease;
  white-space: nowrap;
}

.interact-prompt.show { opacity: 1; }

.interact-prompt b {
  font-family: var(--hud-body);
  font-weight: 600;
  font-size: calc(var(--hud-u) * 0.96);
  line-height: 1.15;
  border: 1px solid rgba(141, 112, 64, 0.78);
  background: rgba(10, 6, 6, 0.78);
  color: #f3e6c8;
  padding: 0 calc(var(--hud-u) * 0.35);
}

/* Conversation panel: a fixed-height dark band across the bottom, line on top, numbered replies
   below. Long lines are split into pages that fit it (game.js splitDialoguePages). The speaker's
   portrait stands on the left and rises above the band. */
.dialogue-box {
  --dlg-u: min(1vw, 1.78vh);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  height: calc(var(--dlg-u) * 18);
  box-sizing: border-box;
  padding: calc(var(--dlg-u) * 1.8) max(calc(var(--dlg-u) * 12), env(safe-area-inset-right, 0px)) calc(var(--dlg-u) * 1.8);
  background: linear-gradient(180deg, rgba(4, 3, 3, 0) 0%, rgba(4, 3, 3, 0.86) 18%, rgba(4, 3, 3, 0.94) 100%);
  border-top: 1px solid rgba(141, 112, 64, 0.35);
  color: #e9dfc8;
  font-family: "Cormorant Garamond", Georgia, serif;
}

.dialogue-box[hidden] { display: none; }
.dialogue-box.has-portrait { padding-left: calc(var(--dlg-u) * 38); }

.dlg-portrait {
  position: absolute;
  left: calc(var(--dlg-u) * 3);
  bottom: 0;
  height: calc(var(--dlg-u) * 44);
  width: calc(var(--dlg-u) * 33);
  object-fit: contain;
  object-position: bottom;
  pointer-events: none;
}

.dlg-body {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dlg-more {
  position: absolute;
  right: max(calc(var(--dlg-u) * 12), env(safe-area-inset-right, 0px));
  bottom: calc(var(--dlg-u) * 1.2);
  font-size: calc(var(--dlg-u) * 1.4);
  color: #c9a45e;
  animation: dlg-more-bob 0.9s ease-in-out infinite alternate;
}
.dlg-more[hidden] { display: none; }
@keyframes dlg-more-bob { to { transform: translateY(calc(var(--dlg-u) * 0.4)); } }

.dlg-unread { visibility: hidden; } /* the rest of a typing page: holds its place so words don't jump lines */

.dlg-speaker {
  font-family: "IM Fell English SC", Georgia, serif;
  font-size: calc(var(--dlg-u) * 1.55);
  letter-spacing: 0.08em;
  color: #c9a45e;
}

.dlg-line {
  margin: calc(var(--dlg-u) * 0.4) 0 calc(var(--dlg-u) * 1);
  max-width: 70ch;
  font-size: calc(var(--dlg-u) * 1.85);
  line-height: 1.35;
  color: #f2ead8;
}

.dlg-options {
  list-style: none;
  display: grid;
  align-content: start;
  gap: calc(var(--dlg-u) * 0.35);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto; /* only when the replies alone don't fit their page */
}
.dlg-options[hidden] { display: none; }
.dlg-measure .dlg-options { flex: none; overflow: visible; } /* measuring: the replies at full height */

.dlg-options li {
  font-size: calc(var(--dlg-u) * 1.6);
  line-height: 1.3;
  color: #b3a78f;
  cursor: pointer;
  user-select: none;
}

.dlg-options li:hover { color: #f2ead8; }

.dlg-num {
  font-family: "IM Fell English SC", Georgia, serif;
  color: #8d7040;
  margin-right: calc(var(--dlg-u) * 0.3);
}

.dlg-skill {
  color: #c9a45e;
  font-style: italic;
}

/* in conversation the rest of the HUD steps aside */
body.in-dialogue #mantle-hud, body.in-stowaway #mantle-hud { opacity: 0; }

/* Items app */
.items-app {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.items-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.item-slot {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201, 244, 242, 0.35);
  background: rgba(6, 22, 28, 0.45);
  color: var(--sc-line);
  cursor: pointer;
}

.item-slot:hover { border-color: var(--sc-line); }
.item-slot.on { border-color: var(--sc-gold); background: rgba(211, 155, 42, 0.1); }
.item-slot.on::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px dashed rgba(201, 244, 242, 0.5);
  pointer-events: none;
}
.item-slot.empty { opacity: 0.3; cursor: default; }
.item-slot svg { width: 58%; height: 58%; }

.item-count {
  position: absolute;
  right: 6px;
  bottom: 4px;
  font-family: var(--sc-mono);
  font-size: 12px;
  color: var(--sc-ink);
}

.item-tag {
  position: absolute;
  left: 6px;
  top: 4px;
  font-family: var(--sc-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sc-gold);
}

.items-lien {
  margin-top: 12px;
  font-family: var(--sc-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--sc-gold);
}

.items-lien b { font-weight: 400; color: var(--sc-ink); margin-left: 6px; }

.items-detail {
  border: 1px solid var(--sc-line);
  background: var(--sc-panel);
  padding: 16px 18px;
  display: grid;
  gap: 8px;
  justify-items: start;
}

.item-type {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-dim);
}

.item-name {
  font-weight: 300;
  font-size: 28px;
  line-height: 1.1;
  color: var(--sc-ink);
}

.item-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--sc-body);
}

.item-dust-tag {
  position: absolute;
  left: 6px;
  bottom: 4px;
  font-family: var(--sc-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #ff9c42;
}

.item-slot.draggable-dust {
  cursor: grab;
}

.item-slot.draggable-dust:active,
.item-slot.dragging {
  cursor: grabbing;
  opacity: 0.65;
}

.item-slot.drop-hint,
.weapon-dust-socket.drop-hint {
  border-color: rgba(255, 156, 66, 0.85);
  box-shadow: 0 0 10px rgba(255, 120, 30, 0.35);
}

.item-slot.drop-ready,
.weapon-dust-box.drop-ready,
.weapon-dust-socket.drop-ready {
  border-color: #ffad54 !important;
  background: rgba(255, 122, 31, 0.22) !important;
  box-shadow: 0 0 14px rgba(255, 130, 40, 0.55);
}

.weapon-dust-box {
  width: 100%;
  border: 1px solid var(--sc-line);
  background: rgba(20, 14, 10, 0.65);
  padding: 10px 12px;
  display: grid;
  gap: 6px;
  margin-top: 2px;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.weapon-dust-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.weapon-dust-socket {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(201, 244, 242, 0.45);
  background: rgba(6, 22, 28, 0.55);
  color: rgba(201, 244, 242, 0.35);
  transition: all 0.15s ease;
}

.weapon-dust-socket.filled {
  border-style: solid;
  border-color: #ff9c42;
  background: rgba(255, 110, 24, 0.16);
  color: #ffbe6b;
  box-shadow: inset 0 0 10px rgba(255, 110, 24, 0.28);
}

.weapon-dust-socket svg,
.item-slot svg,
.item-slot span {
  pointer-events: none;
}

.weapon-dust-socket svg {
  width: 62%;
  height: 62%;
}

.dust-drag-ghost {
  position: fixed;
  width: 52px;
  height: 52px;
  margin-left: -26px;
  margin-top: -26px;
  display: grid;
  place-items: center;
  border: 1px solid #ffad54;
  background: rgba(20, 14, 10, 0.88);
  color: #ffbe6b;
  box-shadow: 0 0 14px rgba(255, 120, 30, 0.55);
  pointer-events: none;
  z-index: 99999;
}

.dust-drag-ghost svg {
  width: 68%;
  height: 68%;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.weapon-dust-info {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.weapon-dust-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--sc-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sc-dim);
}

.weapon-dust-head b {
  font-weight: 400;
  color: #ffad54;
}

.weapon-dust-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dust-unequip-btn {
  font-family: var(--sc-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid rgba(201, 244, 242, 0.45);
  background: rgba(6, 22, 28, 0.7);
  color: var(--sc-body);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.dust-unequip-btn:hover {
  border-color: #ffad54;
  background: rgba(255, 122, 31, 0.2);
  color: #ffbe6b;
}

#items-grid.drop-ready {
  outline: 1px dashed #ffad54;
  outline-offset: 4px;
}

.weapon-dust-bar {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 140, 60, 0.35);
}

.weapon-dust-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #38c6ff 0%, #ff7a1f 35%, #ffe173 100%);
}

.weapon-dust-note {
  font-size: 12px;
  color: var(--sc-dim);
}

.items-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

/* =========================================================================
   STOWAWAY (Ilia's Semblance = her inventory). Header centered at top with a prominent Lien readout;
   below it a centered split stage with the radial diamond wheel + slot pips on the left and item
   details/actions right beside it on the right.
   ========================================================================= */
.stowaway {
  --sw-u: clamp(10.5px, calc(min(1vw, 1.78vh) * 1.17), 17px);
  position: fixed;
  inset: 0;
  z-index: 38;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.35em 2.8em 1.15em;
  box-sizing: border-box;
  font: 300 var(--sw-u) / 1.3 Jost, sans-serif;
  color: #e9e3d6;
  background: radial-gradient(ellipse at 46% 52%, rgba(44, 11, 15, 0.58), rgba(0, 0, 0, 0.94) 66%);
  animation: title-in 0.25s ease both;
}
.stowaway[hidden] { display: none; }

.sw-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.2em;
  padding-bottom: 0.65em;
  border-bottom: 1px solid rgba(95, 90, 82, 0.32);
}
.sw-head-center {
  grid-column: 2;
  text-align: center;
}
.sw-title {
  padding-left: 0.28em; /* balances trailing letter-spacing so optical center matches screen center */
  font-family: "IM Fell English SC", Georgia, serif;
  font-size: 2em;
  line-height: 1.05;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #f4efe4;
}
.sw-sub {
  margin-top: 0.2em;
  padding-left: 0.26em;
  font-size: 0.78em;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #8f897d;
}

.stowaway .items-lien {
  grid-column: 3;
  justify-self: end;
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.95em;
  border: 1px solid rgba(217, 180, 106, 0.52);
  background: linear-gradient(180deg, rgba(32, 24, 14, 0.86), rgba(12, 9, 6, 0.92));
  box-shadow: 0 0.2em 0.9em rgba(0, 0, 0, 0.55), inset 0 0 0.9em rgba(217, 180, 106, 0.09);
}
.sw-lien-sym {
  width: 1.05em;
  height: 1.24em;
  flex: none;
  fill: #eac87c;
  filter: drop-shadow(0 0 0.32em rgba(217, 180, 106, 0.35));
}
.sw-lien-lbl {
  font-family: "IM Fell English SC", Georgia, serif;
  font-size: 0.92em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #c9a763;
}
.stowaway .items-lien b {
  margin-left: 0.2em;
  min-width: 1.5ch;
  text-align: right;
  font: 500 1.45em / 1 Jost, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: #f4dc9c;
}

.sw-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.4em;
}
.sw-wheel-col {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --n (set by game.js) is the number of slots: past 10 the ring grows gently so they don't crowd */
.sw-ring {
  position: relative;
  flex: none;
  --ring: 8.5em;
  --n: 10;
  --r: min(12em, calc(var(--ring) * max(1, var(--n) / 10)));
  width: calc(2 * var(--r) + 4em);
  height: calc(2 * var(--r) + 4em);
}
.sw-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(2.26 * var(--r));
  height: calc(2.26 * var(--r));
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px dashed rgba(143, 137, 125, 0.22);
  pointer-events: none;
}
.stowaway .items-grid {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
}
.stowaway .item-slot {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 3.9em;
  height: 3.9em;
  margin: -1.95em;
  aspect-ratio: auto;
  border: 0;
  background: none;
  font: inherit;
  color: #8f897d;
  isolation: isolate;
  transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a)));
}
/* the diamond is drawn behind the slot, so the icon and its labels stay upright */
.stowaway .item-slot::before {
  content: "";
  position: absolute;
  inset: 0.58em;
  z-index: -1;
  transform: rotate(45deg);
  border: 1px solid #5f5a52;
  background: rgba(0, 0, 0, 0.6);
  transition: border-color 0.12s ease, background 0.12s ease;
}
.stowaway .item-slot.on { z-index: 2; color: #f4efe4; background: none; }
.stowaway .item-slot:hover:not(.empty),
.stowaway .item-slot:focus-visible:not(.empty) {
  z-index: 20;
  color: #f4efe4;
}
.stowaway .item-slot:hover:not(.empty):not(.on)::before,
.stowaway .item-slot:focus-visible:not(.empty):not(.on)::before {
  border-color: #b9b1a2;
  background: rgba(26, 22, 19, 0.85);
}
.stowaway .item-slot.on::before { border-color: #b3262c; background: rgba(179, 38, 44, 0.2); box-shadow: 0 0 1.4em rgba(179, 38, 44, 0.35); }
.stowaway .item-slot.on::after { display: none; }
.stowaway .item-slot.empty { opacity: 1; }
.stowaway .item-slot, .stowaway .weapon-dust-socket { touch-action: none; } /* a finger drags Dust instead of scrolling */
.stowaway .item-slot.empty::before { border-style: dashed; border-color: #2a2723; background: none; }
.stowaway .item-slot.locked::before { border: 1px solid #1c1a18; background: repeating-linear-gradient(45deg, transparent 0 4px, rgba(60, 56, 51, 0.25) 4px 5px); }
.stowaway .item-slot svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.stowaway .item-count { right: 0.2em; bottom: 0.1em; font: 400 0.75em Jost, sans-serif; color: #e9e3d6; }
.stowaway .item-tag { left: 50%; top: -0.4em; transform: translateX(-50%); font: 400 0.6em Jost, sans-serif; letter-spacing: 0.18em; color: #e0484e; }
.stowaway .item-dust-tag { left: 0.1em; bottom: 0.1em; font: 400 0.65em Jost, sans-serif; }
.stowaway .item-slot.drop-hint::before { border-color: rgba(255, 156, 66, 0.85); }
.stowaway .item-slot.drop-ready::before { border-color: #ffad54; background: rgba(255, 122, 31, 0.22); }
.stowaway .item-slot.drop-hint, .stowaway .item-slot.drop-ready { border: 0; background: none !important; box-shadow: none; }
.stowaway #items-grid.drop-ready { outline: none; }

.sw-center {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 11.5em;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.sw-center svg { width: 4.8em; height: 4.8em; margin: 0 auto 0.45em; display: block; color: #f4efe4; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sw-center-name { font-family: "IM Fell English SC", Georgia, serif; font-size: 1.12em; letter-spacing: 0.14em; text-transform: uppercase; }

/* Occupied-slot diamonds directly beneath the radial wheel */
.sw-meter {
  margin-top: 0.85em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55em;
  max-width: 20em;
}
.sw-meter i {
  display: block;
  width: 0.62em;
  height: 0.62em;
  transform: rotate(45deg);
  border: 1px solid #5f5a52;
  background: rgba(0, 0, 0, 0.45);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.sw-meter i.on {
  background: #e9e3d6;
  border-color: #e9e3d6;
  box-shadow: 0 0 0.45em rgba(233, 227, 214, 0.28);
}

.sw-side {
  width: 24.5em;
  max-width: 44vw;
  min-height: 16em;
  padding-left: 2.4em;
  border-left: 1px solid rgba(95, 90, 82, 0.32);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.stowaway .items-detail { border: 0; background: none; padding: 0; gap: 0.5em; }
.stowaway .item-type { font-size: 0.72em; letter-spacing: 0.22em; color: #b3262c; }
.stowaway .item-name {
  display: block;
  font-family: "IM Fell English SC", Georgia, serif;
  font-size: 1.5em;
  line-height: 1.12;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f4efe4;
}
.stowaway .item-desc { margin: 0.1em 0 0; font-size: 0.95em; line-height: 1.5; color: #e9e3d6; }
.stowaway .weapon-dust-box { border-color: #2a2723; background: rgba(0, 0, 0, 0.5); }
.stowaway .weapon-dust-head, .stowaway .weapon-dust-note { font-family: Jost, sans-serif; color: #8f897d; }
.stowaway .vtmb-action-btn {
  padding: 0.3em 0 0.35em;
  border: 0;
  border-bottom: 1px solid #b3262c;
  background: none;
  font: 400 1.05em "IM Fell English SC", Georgia, serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f4efe4;
  cursor: pointer;
}
.sw-banner { margin: 0 0 0.9em; padding: 0.5em 0.7em; border-left: 2px solid #b3262c; background: rgba(179, 38, 44, 0.14); font-size: 0.85em; line-height: 1.4; color: #f4efe4; }
.sw-banner[hidden] { display: none; }
.stowaway .items-actions { gap: 2em; margin-top: 0.6em; }
.stowaway .vtmb-action-btn:not(.accept) { border-bottom-color: transparent; color: #8f897d; }
.stowaway .vtmb-action-btn:not(.accept):hover { color: #f4efe4; border-bottom-color: #5f5a52; }

.sw-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5em;
  padding-top: 0.55em;
  border-top: 1px solid rgba(95, 90, 82, 0.24);
}
.sw-keys { font-size: 0.8em; color: #5f5a52; letter-spacing: 0.04em; }
.sw-keys b { font-weight: 400; color: #8f897d; }
body.touch .sw-keys { visibility: hidden; }

/* short screens (phones in landscape) */
@media (max-height: 500px) {
  .stowaway { padding: 0.55em 1.5em 0.5em; }
  .sw-head { padding-bottom: 0.3em; }
  .sw-title { font-size: 1.35em; }
  .sw-sub, .stowaway .weapon-dust-note { display: none; }
  .stowaway .items-lien { padding: 0.24em 0.68em; }
  .stowaway .items-lien b { font-size: 1.18em; }
  .sw-stage { gap: 1.8em; }
  .sw-ring { --ring: 7.4em; --r: min(9.2em, calc(var(--ring) * max(1, var(--n) / 10))); }
  .stowaway .item-slot { width: 3.5em; height: 3.5em; margin: -1.75em; }
  .stowaway .item-slot::before { inset: 0.52em; }
  .sw-center svg { width: 3.5em; height: 3.5em; margin-bottom: 0.25em; }
  .sw-center-name { font-size: 0.92em; }
  .sw-meter { margin-top: 0.35em; gap: 0.42em; }
  .sw-meter i { width: 0.52em; height: 0.52em; }
  .sw-side { width: 21em; min-height: 0; padding-left: 1.4em; }
  .stowaway .item-name { font-size: 1.2em; }
  .stowaway .item-desc { font-size: 0.82em; line-height: 1.38; }
  .stowaway .weapon-dust-head { flex-wrap: wrap; gap: 0.3em; }
  .sw-foot { padding-top: 0.3em; }
}

/* Combat: the enemy you're fighting, under the cover masks */
.hud-target {
  display: grid;
  justify-items: center;
  gap: calc(var(--hud-u) * 0.3);
  margin-top: calc(var(--hud-u) * 0.4);
}

.hud-target[hidden] { display: none; }

.hud-target-name {
  font-family: var(--hud-serif);
  font-size: calc(var(--hud-u) * 1.4);
  letter-spacing: 0.06em;
}

.hud-target-bar {
  width: calc(var(--hud-u) * 16);
  height: calc(var(--hud-u) * 0.45);
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid #4a3a26;
}

.hud-target-bar i {
  display: block;
  height: 100%;
  transition: width 0.15s ease;
}

.hud-target-bar.aura i { background: var(--hud-aura); }
.hud-target-bar.hp i { background: var(--hud-vit); }

/* Ilia getting hit: a red bleed at the edges of the screen */
#hurt-flash {
  position: fixed;
  inset: 0;
  z-index: 19;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 18vmin rgba(170, 0, 0, 0.85);
}

#hurt-flash.hit { animation: hurt 0.45s ease-out; }

@keyframes hurt {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* knocked out */
#ko-fade {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background: #000;
  opacity: 0;
  transition: opacity 0.8s ease;
}

#ko-fade.show { opacity: 1; }

/* Stealth: light meter above the gauge while crouched */
.hud-shade {
  position: absolute;
  left: calc(var(--hud-u) * 2.2);
  bottom: calc(var(--hud-u) * 14);
  display: grid;
  gap: calc(var(--hud-u) * 0.3);
  font-family: var(--hud-serif);
  font-size: calc(var(--hud-u) * 1.2);
  color: #9fb3c8;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 2px #000;
}

.hud-shade[hidden] { display: none; }
.hud-shade.lit { color: #f2d27a; }

.hud-shade b {
  display: block;
  width: calc(var(--hud-u) * 11);
  height: calc(var(--hud-u) * 0.4);
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid #3a4250;
}

.hud-shade i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #4a5a70, #f2d27a);
  transition: width 0.25s linear;
}

/* Cutscenes: letterbox bars, no HUD */
.cs-bar {
  position: fixed;
  left: 0;
  right: 0;
  height: 0;
  z-index: 30;
  background: #000;
  pointer-events: none;
  transition: height 0.6s ease;
}

.cs-bar.top { top: 0; }
.cs-bar.bottom { bottom: 0; display: flex; align-items: center; justify-content: flex-end; }

.cs-bar span {
  margin-right: 3vw;
  font-family: "IM Fell English SC", Georgia, serif;
  font-size: 1.6vh;
  letter-spacing: 0.08em;
  color: rgba(220, 210, 190, 0.45);
  opacity: 0;
  transition: opacity 0.6s ease 1.2s;
}

body.in-cutscene .cs-bar { height: 11vh; }
body.in-cutscene .cs-bar span { opacity: 1; }
body.in-cutscene #mantle-hud,
body.in-cutscene #interact-prompt { opacity: 0; }

/* Journal (Missions app): quest list on the left, selected quest's full log on the right */
.quests-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  block-size: calc(min(660px, 86vh) - 200px);
  min-block-size: 260px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--sc-body);
}

.quests-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-inline-size: 0;
  min-block-size: 0;
  padding-inline-end: 14px;
  border-inline-end: 1px solid var(--sc-rule);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(103, 224, 228, 0.45) transparent;
}

.vtmb-quest-group {
  font-family: var(--sc-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-line);
  margin-block-start: 4px;
}

.vtmb-quest-group:first-child { margin-block-start: 0; }

.quests-item {
  inline-size: 100%;
  padding: 9px 12px;
  border: 1px solid var(--sc-rule);
  border-inline-start: 2px solid transparent;
  background: var(--sc-panel);
  color: var(--sc-body);
  font-family: var(--sc-font);
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.quests-item:hover {
  background: rgba(103, 224, 228, 0.06);
  border-color: rgba(103, 224, 228, 0.35);
}

.quests-item.on {
  border-color: rgba(103, 224, 228, 0.55);
  border-inline-start-color: var(--sc-cyan);
  background: rgba(103, 224, 228, 0.12);
}

.quests-item.closed { opacity: 0.65; }

.vtmb-quest-current {
  color: var(--sc-ink);
}

.vtmb-quest-last-done {
  margin-block-start: 5px;
  font-size: 12px;
  color: var(--sc-body);
  opacity: 0.6;
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.3);
}

.quests-detail {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  min-block-size: 0;
  padding-inline-start: 18px;
}

.quests-detail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-block: 2px 8px;
  border-block-end: 1px solid var(--sc-rule);
}

.quests-detail-title {
  margin: 0;
  color: var(--sc-ink);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.quests-detail-meta {
  flex-shrink: 0;
  color: var(--sc-gold);
  font-family: var(--sc-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.quests-detail-meta.done { color: var(--sc-line); }
.quests-detail-meta.failed { color: var(--sc-hot); }

.quests-detail-body {
  flex: 1 1 0;
  min-block-size: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-block: 12px;
  padding-inline-end: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(103, 224, 228, 0.45) transparent;
}

.quests-subhead {
  font-family: var(--sc-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-dim);
  margin-block-end: 5px;
}

.quests-desc {
  margin: 0;
  color: var(--sc-body);
  font-size: 13.5px;
  line-height: 1.5;
}

.quests-none {
  font-size: 12.5px;
  font-style: italic;
  color: var(--sc-dim);
  opacity: 0.7;
}

.quests-current-box {
  padding: 10px 12px;
  border: 1px solid rgba(103, 224, 228, 0.38);
  border-inline-start: 2px solid var(--sc-cyan);
  background: rgba(103, 224, 228, 0.08);
  color: var(--sc-ink);
  font-size: 14px;
  line-height: 1.45;
}

.vtmb-quest-steps {
  margin: 0;
  padding-inline-start: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
  color: var(--sc-body);
  opacity: 0.68;
}

.vtmb-quest-steps li {
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.28);
}

.vtmb-action-btn.accept:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

/* Shops: over the conversation, same look as the dialogue box */
.shop-panel {
  --dlg-u: min(1vw, 1.78vh);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 31;
  padding: calc(var(--dlg-u) * 2.2) max(calc(var(--dlg-u) * 12), 16px) calc(var(--dlg-u) * 2);
  background: linear-gradient(180deg, rgba(4, 3, 3, 0) 0%, rgba(4, 3, 3, 0.9) 12%, rgba(4, 3, 3, 0.96) 100%);
  border-top: 1px solid rgba(141, 112, 64, 0.35);
  color: #e9dfc8;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: calc(var(--dlg-u) * 1.6);
}

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

.shop-head {
  display: flex;
  justify-content: space-between;
  font-family: "IM Fell English SC", Georgia, serif;
  font-size: calc(var(--dlg-u) * 1.9);
  letter-spacing: 0.06em;
}

.shop-lien { color: #d9b46a; }

.shop-notes {
  min-height: 1.2em;
  font: 300 calc(var(--dlg-u) * 1.15) / 1.4 Jost, sans-serif;
  color: #c98a7a;
  letter-spacing: 0.04em;
}

.shop-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--dlg-u) * 3);
  margin-top: calc(var(--dlg-u) * 1);
}

.shop-cols h3 {
  margin: 0 0 0.3em;
  font: 500 calc(var(--dlg-u) * 1.05) / 1 "Share Tech Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8d7040;
}

.shop-list { list-style: none; margin: 0; padding: 0; }

.shop-list li {
  display: grid;
  grid-template-columns: calc(var(--dlg-u) * 2.4) 1fr auto auto;
  align-items: center;
  gap: calc(var(--dlg-u) * 1);
  padding: 0.18em 0.3em;
  border-bottom: 1px solid rgba(141, 112, 64, 0.15);
}

.shop-list li.on, .shop-list li:hover { background: rgba(141, 112, 64, 0.12); }

.shop-list svg.i {
  width: 100%;
  fill: none;
  stroke: #d8cdb4;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.shop-price { color: #d9b46a; font-variant-numeric: tabular-nums; }

.shop-list button {
  padding: 0.1em 0.8em;
  background: none;
  border: 1px solid rgba(217, 180, 106, 0.6);
  color: #e9dfc8;
  font: inherit;
  font-size: 0.85em;
  cursor: pointer;
}

.shop-list button:hover:not(:disabled) { background: rgba(179, 38, 44, 0.35); border-color: #d8343a; }
.shop-list button:disabled { opacity: 0.35; cursor: default; }
.shop-none { color: #7d7465; font-style: italic; grid-template-columns: 1fr !important; }

.shop-desc {
  min-height: 2.6em;
  margin: calc(var(--dlg-u) * 1) 0 0;
  font-style: italic;
  color: #b9ad94;
}

.shop-foot {
  font: 300 calc(var(--dlg-u) * 1.1) / 1 Jost, sans-serif;
  color: #6f6758;
  text-align: right;
  letter-spacing: 0.08em;
}

/* Lockpicking progress, under the interact prompt */
.pick-bar {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--hud-u) * 3.7);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: calc(var(--hud-u) * 0.28);
  font-family: var(--hud-serif);
  font-size: calc(var(--hud-u) * 1.05);
  letter-spacing: 0.06em;
  color: #e9e3d6;
  text-shadow: 0 1px 2px #000;
}

.pick-bar[hidden] { display: none; }

.pick-bar b {
  display: block;
  width: calc(var(--hud-u) * 11);
  height: calc(var(--hud-u) * 0.36);
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid #5a4a30;
}

.pick-bar i { display: block; height: 100%; width: 0; background: #d9b46a; }

/* Terminals: an old green CRT on top of everything */
.terminal {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.82);
}

.terminal[hidden] { display: none; }

.term-screen {
  width: min(820px, 100%);
  height: min(520px, 78vh);
  display: flex;
  flex-direction: column;
  padding: 22px 26px;
  background: radial-gradient(ellipse at center, #0b1a0e 0%, #040804 100%);
  border: 10px solid #1a1c1a;
  border-radius: 14px;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.9), 0 0 0 2px #2c2f2c, 0 20px 60px rgba(0, 0, 0, 0.8);
  font: 16px/1.35 "Share Tech Mono", monospace;
  color: #7cf29a;
  text-shadow: 0 0 6px rgba(80, 255, 130, 0.45);
  position: relative;
  overflow: hidden;
}

.term-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
}

.term-out {
  flex: 1;
  margin: 0;
  overflow-y: auto;
  white-space: pre-wrap;
  font: inherit;
  scrollbar-width: none;
}

.term-line { display: flex; gap: 0; align-items: baseline; }
.term-prompt { white-space: pre; }

.term-input {
  flex: 1;
  background: none;
  border: 0;
  outline: none;
  color: inherit;
  font: inherit;
  text-shadow: inherit;
  caret-color: #7cf29a;
  padding: 0;
}

.term-hint { font: 300 12px/1 Jost, sans-serif; color: #6f6758; letter-spacing: 0.08em; }

/* VR: keys to click on a terminal (there's no keyboard in a headset) */
.vr-keys { display: none; }
body.in-vr .vr-keys { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vr-keys div { display: flex; gap: 6px; }
.vr-keys button {
  min-width: 42px;
  height: 40px;
  padding: 0 8px;
  background: #0d140d;
  border: 1px solid #2f5a2f;
  color: #8fe08f;
  font: 16px/1 var(--font-mono);
  cursor: pointer;
}
.vr-keys button.wide { min-width: 240px; }

/* Release builds (build.js release: true) hide the developer tools */
body.release .dev-only { display: none !important; }

/* Build version, for testers' bug reports */
.title-version {
  position: absolute;
  right: 16px;
  bottom: 12px;
  font: 300 11px/1 Jost, sans-serif;
  letter-spacing: 0.08em;
  color: #3c3833;
}

/* VR: the headset button, just above the version (dimmed when the browser can't do VR) */
.title-vr {
  position: absolute;
  right: 12px;
  bottom: 30px;
  padding: 4px;
  background: none;
  border: 0;
  color: #6f6a60;
  cursor: pointer;
  transition: color 0.2s ease;
}
.title-vr:hover, .title-vr:focus-visible { color: #e8e0d0; }
.title-vr svg { display: block; width: 34px; height: 21px; fill: currentColor; }
.title-vr circle { fill: #000; }
body.in-vr .title-vr { display: none; } /* already in VR */
.title-vr.unavailable { color: #3c3833; }
.title-vr-status {
  position: absolute;
  right: 56px;
  bottom: 36px;
  max-width: 60vw;
  font: 300 12px/1.3 Jost, sans-serif;
  letter-spacing: 0.06em;
  color: #8f897d;
  text-align: right;
}

/* Touch controls (phones, tablets, Android) */
#touch-ui {
  --tu: min(1vw, 1.78vh);
  position: fixed;
  inset: 0;
  z-index: 28;
  pointer-events: none;
  font-family: "IM Fell English SC", Georgia, serif;
}

#touch-ui[hidden] { display: none; }
.touch-move, .touch-look, .touch-top button, .touch-actions button { pointer-events: auto; touch-action: none; }
.touch-move { position: absolute; left: 0; bottom: 0; width: 45%; height: 75%; }
.touch-look { position: absolute; right: 0; top: 0; width: 55%; height: 100%; }

.touch-stick {
  position: absolute;
  width: calc(var(--tu) * 13);
  height: calc(var(--tu) * 13);
  transform: translate(-50%, -50%);
  border: 2px solid rgba(233, 227, 214, 0.35);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.touch-stick[hidden] { display: none; }

.touch-stick i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  height: 42%;
  border-radius: 50%;
  background: rgba(233, 227, 214, 0.55);
  transform: translate(-50%, -50%);
}

.touch-top {
  position: absolute;
  top: max(calc(var(--tu) * 8), env(safe-area-inset-top));
  right: max(calc(var(--tu) * 2), env(safe-area-inset-right));
  display: flex;
  gap: calc(var(--tu) * 1);
}

.touch-top button,
.touch-actions button {
  border: 1px solid rgba(217, 180, 106, 0.55);
  background: rgba(8, 7, 6, 0.55);
  color: #e9e3d6;
  font: inherit;
  letter-spacing: 0.06em;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.touch-top button { padding: calc(var(--tu) * 0.8) calc(var(--tu) * 1.4); font-size: calc(var(--tu) * 1.5); border-radius: 4px; }

.touch-actions {
  position: absolute;
  right: max(calc(var(--tu) * 3), env(safe-area-inset-right));
  bottom: max(calc(var(--tu) * 3), env(safe-area-inset-bottom));
  width: calc(var(--tu) * 30);
  height: calc(var(--tu) * 26);
}

.touch-actions button {
  position: absolute;
  border-radius: 50%;
  font-size: calc(var(--tu) * 1.7);
}

.touch-actions .tb-attack { right: 0; bottom: 0; width: calc(var(--tu) * 13); height: calc(var(--tu) * 13); border-color: rgba(216, 52, 58, 0.8); }
.touch-actions .tb-use { right: calc(var(--tu) * 14.5); bottom: calc(var(--tu) * 1); width: calc(var(--tu) * 10); height: calc(var(--tu) * 10); }
.touch-actions .tb-jump { right: calc(var(--tu) * 1.5); bottom: calc(var(--tu) * 14.5); width: calc(var(--tu) * 10); height: calc(var(--tu) * 10); }
.touch-actions .tb-crouch { right: calc(var(--tu) * 13); bottom: calc(var(--tu) * 13); width: calc(var(--tu) * 9); height: calc(var(--tu) * 9); }
.touch-actions .on { background: rgba(217, 180, 106, 0.35); }
.touch-top button:active, .touch-actions button:active { background: rgba(217, 180, 106, 0.3); }

/* the stand-ins for Esc */
.dlg-close {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  top: 8px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(141, 112, 64, 0.45);
  background: rgba(0, 0, 0, 0.4);
  color: #e9dfc8;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.shop-foot, .term-hint, .scroll-put-away { cursor: pointer; }
.cs-bar.bottom span { pointer-events: auto; cursor: pointer; padding: 8px; }
body.touch .cs-bar span { font-size: 2.2vh; }
body.touch .dlg-options li { padding: 0.35em 0; }      /* bigger tap targets */

/* Ilia's thoughts: a quiet italic line in the middle of the screen's top-right quarter (game.js ILIA'S THOUGHTS) */
.thought {
  position: fixed;
  left: 75%;
  top: 25%;
  translate: -50% -50%;
  z-index: 55;
  max-width: min(34vw, 420px);
  text-align: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: calc(min(1vw, 1.78vh) * 2.1);
  line-height: 1.25;
  color: rgba(238, 232, 220, 0.92);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.thought.show { opacity: 1; transform: translateY(0); }

/* A cut-away (a date, a night out): black screen with one line of text */
#fade-card {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease;
}

#fade-card.show { opacity: 1; }
#fade-card.instant { transition: none; } /* black at once while a cutscene waits for the map to load */

/* Over a level while it's built (updateLevelLoad); over the cutscene fade-card too, under nothing else */
#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 72;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease; /* lifts slowly, but comes down at once (the old level is already gone) */
}

#loading-screen.show { opacity: 1; transition: none; }

#loading-screen .loading-place {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(18px, 2.6vw, 32px);
  letter-spacing: 0.08em;
  text-transform: capitalize;
  color: #e9e2d4;
  min-height: 1.3em;
}

#loading-screen .loading-bar {
  width: min(240px, 50vw);
  height: 1px;
  background: rgba(180, 141, 76, 0.25);
}

#loading-screen .loading-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: #b48d4c;
  transition: width 0.3s ease;
}

#fade-card p {
  max-width: 70vw;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(16px, 2.4vw, 28px);
  color: #e9e2d4;
  text-align: center;
}

/* Messages app on the Scroll: contacts | conversation + reply options */
.scroll-app { position: relative; }

.scroll-app[data-unread]:not([data-unread=""])::after { /* unread count */
  content: attr(data-unread);
  position: absolute;
  top: -2px;
  left: calc(50% + 12px); /* the icon's top-right corner */
  min-width: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--sc-cyan);
  color: #04121a;
  font-family: var(--sc-mono);
  font-size: 10px;
  letter-spacing: 0;
  line-height: 16px;
}

.msgs-app {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  /* fills the Scroll's screen below the heading: the dialog's height less the bar, hints and heading */
  height: calc(min(660px, 86vh) - 200px);
}

.msgs-contacts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 12px;
  border-right: 1px solid var(--sc-rule);
  overflow-y: auto;
}

.msgs-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 8px;
  padding: 7px 10px;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  color: var(--sc-body);
  font-family: var(--sc-font);
  text-align: left;
  cursor: pointer;
}

.msgs-contact:hover { background: rgba(103, 224, 228, 0.05); }

.msgs-contact.on {
  border-left-color: var(--sc-cyan);
  background: rgba(103, 224, 228, 0.1);
  color: var(--sc-ink);
}

.msgs-contact-name { font-size: 15px; }

/* she owes them an answer: a gold diamond after the name */
.msgs-contact.waiting .msgs-contact-name::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  vertical-align: middle;
  background: var(--sc-gold);
  transform: rotate(45deg);
}

.msgs-contact b {
  padding: 0 6px;
  border-radius: 9px;
  background: var(--sc-cyan);
  color: #04121a;
  font-family: var(--sc-mono);
  font-size: 11px;
}

.msgs-contact-last {
  grid-column: 1 / -1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--sc-dim);
  font-size: 12px;
  opacity: 0.8;
}

.msgs-convo {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding-left: 18px;
}

.msgs-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0 8px;
  border-bottom: 1px solid var(--sc-rule);
}

.msgs-head b {
  color: var(--sc-ink);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

#msgs-status {
  color: var(--sc-gold);
  font-family: var(--sc-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.msgs-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 8px 12px 0;
}

.msg {
  max-width: 70%;
  margin: 0;
  padding: 6px 12px;
  border: 1px solid var(--sc-rule);
  color: var(--sc-ink);
  font-size: 14px;
  line-height: 1.35;
}

.msg.turn { margin-top: 10px; }
.msg.them { align-self: flex-start; background: var(--sc-panel); border-left: 2px solid var(--sc-dim); }
.msg.me { align-self: flex-end; background: rgba(103, 224, 228, 0.16); border-color: rgba(103, 224, 228, 0.4); border-right: 2px solid var(--sc-cyan); }
.msgs-empty { color: var(--sc-dim); font-size: 14px; }

.msgs-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--sc-rule);
}

.msgs-replies[hidden] { display: none; }

.msgs-replies::before {
  content: "Reply";
  width: 100%;
  color: var(--sc-dim);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.msgs-reply {
  padding: 7px 14px;
  background: rgba(103, 224, 228, 0.06);
  border: 1px solid rgba(103, 224, 228, 0.45);
  color: var(--sc-cyan);
  font-family: var(--sc-font);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.msgs-reply:hover { background: rgba(103, 224, 228, 0.16); color: var(--sc-ink); }

/* =========================================================================
   NEWS ON THE SCROLL: "THE CRATER WIRE" — Underground Mantle Faunus Mesh Zine
   ========================================================================= */
@media (min-height: 501px) {
  #charsheet-modal[data-app="news"] .scroll-screen {
    padding: 10px 18px 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  #charsheet-modal[data-app="news"] .vtmb-sheet,
  #charsheet-modal[data-app="news"] .vtmb-sheet-body,
  #charsheet-modal[data-app="news"] .vtmb-left-col {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-block-size: 0;
    gap: 0;
  }
}

#vtmb-tabpanel-news:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-block-size: 0;
  gap: 7px;
  --uw-bg: #110d0f;
  --uw-paper: #181316;
  --uw-card: #211a1e;
  --uw-ink: #f2eadb;
  --uw-body: #d7cdbc;
  --uw-muted: #9a8f80;
  --uw-rule: #34292d;
  --uw-crimson: #df3b3e;
  --uw-crimson-dim: rgba(223, 59, 62, 0.16);
  --uw-amber: #e6a93d;
  --uw-cyan: #5ce1e6;
}

/* Pirate mesh browser chrome above the loaded underground page */
.news-browser-bar {
  display: flex;
  align-items: safe center;
  gap: 8px;
  padding: 4px 10px;
  border: 1px solid rgba(103, 224, 228, 0.28);
  border-radius: 4px;
  background: rgba(4, 11, 15, 0.72);
  font-family: var(--sc-mono);
  font-size: 11px;
}

.news-mesh-pill {
  flex: none;
  padding: 1px 6px;
  border: 1px solid rgba(223, 59, 62, 0.65);
  background: rgba(223, 59, 62, 0.18);
  color: #ff8c8e;
  font-size: 10px;
  letter-spacing: 0.1em;
}

.news-address {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #b8d3d6;
}

.news-signal {
  flex: none;
  color: var(--sc-dim);
  font-size: 10px;
  letter-spacing: 0.08em;
}

/* Loaded underground zine frame: soot-and-newsprint palette, distinct from the cyan Scroll OS */
.news-page {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-block-size: 0;
  border: 1px solid var(--uw-rule);
  border-top: 2px solid var(--uw-crimson);
  background:
    repeating-linear-gradient(-32deg, rgba(242, 234, 219, 0.014) 0 2px, transparent 2px 7px),
    radial-gradient(circle at 14% 0%, rgba(223, 59, 62, 0.11), transparent 46%),
    linear-gradient(180deg, #171215 0%, var(--uw-bg) 100%);
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.65);
  color: var(--uw-body);
  overflow: hidden;
}

/* Underground broadsheet masthead */
.news-masthead {
  display: flex;
  align-items: safe center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 8px 14px 7px;
  border-bottom: 3px double var(--uw-rule);
  background: linear-gradient(90deg, rgba(223, 59, 62, 0.09), rgba(24, 19, 22, 0.4) 45%);
}

.news-brand {
  display: flex;
  align-items: safe center;
  gap: 10px;
  min-inline-size: 0;
}

.news-emblem {
  width: 34px;
  height: 34px;
  flex: none;
  color: var(--uw-ink);
  filter: drop-shadow(0 0 6px rgba(223, 59, 62, 0.3));
}

.news-brand-copy {
  min-inline-size: 0;
}

.news-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.news-site {
  margin: 0;
  color: var(--uw-ink);
  font-family: "IM Fell English SC", "Cormorant Garamond", Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.07em;
  text-shadow: 1px 1px 0 rgba(223, 59, 62, 0.45);
}

.news-edition {
  color: var(--uw-amber);
  font-family: var(--sc-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.news-kicker {
  margin: 2px 0 0;
  color: var(--uw-muted);
  font-family: var(--sc-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Section stencil filter pills */
.news-filters {
  display: flex;
  align-items: safe center;
  flex-wrap: wrap;
  gap: 4px;
}

.news-filter {
  padding: 3px 8px;
  border: 1px solid var(--uw-rule);
  background: rgba(12, 9, 11, 0.65);
  color: var(--uw-muted);
  font-family: var(--sc-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.news-filter:hover {
  border-color: #5c4950;
  color: var(--uw-ink);
}

.news-filter.on {
  border-color: var(--uw-amber);
  background: rgba(230, 169, 61, 0.15);
  color: var(--uw-ink);
}

.news-filter.breaking {
  border-color: rgba(223, 59, 62, 0.55);
  color: #ff8082;
}

.news-filter.breaking.on {
  border-color: var(--uw-crimson);
  background: rgba(223, 59, 62, 0.24);
  color: #fff2f2;
}

.news-filter:focus-visible,
.news-item:focus-visible {
  outline: 1px dashed var(--uw-amber);
  outline-offset: -2px;
}

/* Reactive curbside bulletin bar */
.news-bulletin {
  display: flex;
  align-items: safe center;
  gap: 9px;
  padding: 4px 14px;
  border-bottom: 1px solid var(--uw-rule);
  background: rgba(230, 169, 61, 0.08);
  font-size: 11.5px;
  line-height: 1.25;
}

.news-bulletin.hot {
  background:
    repeating-linear-gradient(-45deg, rgba(223, 59, 62, 0.16) 0 8px, rgba(223, 59, 62, 0.08) 8px 16px);
  border-bottom-color: rgba(223, 59, 62, 0.45);
}

.news-bulletin-tag {
  flex: none;
  padding: 1px 6px;
  background: var(--uw-amber);
  color: #16100b;
  font-family: var(--sc-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.news-bulletin.hot .news-bulletin-tag {
  background: var(--uw-crimson);
  color: #fff6f4;
}

.news-bulletin-text {
  flex: 1;
  min-inline-size: 0;
  color: var(--uw-ink);
  font-family: var(--sc-mono);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Two-column wire + open dispatch reader */
.news-app {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  flex: 1;
  min-block-size: 0;
}

.news-list,
.news-story {
  min-block-size: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(223, 59, 62, 0.55) rgba(12, 9, 11, 0.45);
}

@media (prefers-contrast: more) {
  .news-list,
  .news-story {
    scrollbar-color: #f2eadb #110d0f;
  }
}

@supports not (scrollbar-color: auto) {
  .news-list::-webkit-scrollbar,
  .news-story::-webkit-scrollbar { width: 6px; }
  .news-list::-webkit-scrollbar-track,
  .news-story::-webkit-scrollbar-track { background: rgba(12, 9, 11, 0.45); }
  .news-list::-webkit-scrollbar-thumb,
  .news-story::-webkit-scrollbar-thumb { background: rgba(223, 59, 62, 0.55); }
}

.news-list {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--uw-rule);
  background: rgba(12, 9, 11, 0.36);
}

.news-item {
  display: grid;
  gap: 3px;
  padding: 8px 11px 9px 12px;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  border-bottom: 1px dashed rgba(242, 234, 219, 0.09);
  color: var(--uw-body);
  text-align: left;
  cursor: pointer;
}

.news-item:hover {
  background: rgba(242, 234, 219, 0.04);
}

.news-item.on {
  border-left-color: var(--uw-crimson);
  background: linear-gradient(90deg, rgba(223, 59, 62, 0.16), rgba(33, 26, 30, 0.65));
  color: var(--uw-ink);
}

.news-item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.news-section {
  margin: 0;
  color: var(--uw-amber);
  font-family: var(--sc-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.news-section.breaking { color: #ff6266; }
.news-section.sec-docks { color: var(--uw-cyan); }
.news-section.sec-sdc { color: #d896ff; }
.news-section.sec-mantle { color: var(--uw-amber); }
.news-section.sec-atlas { color: #9eb6cc; }
.news-section.sec-weather { color: #8ad6c6; }

.news-time {
  color: var(--uw-muted);
  font-family: var(--sc-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
}

.news-headline {
  color: var(--uw-ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.16;
}

.news-item-deck {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: clip;
  color: var(--uw-muted);
  font-family: var(--sc-font);
  font-size: 11.5px;
  line-height: 1.32;
}

.news-tipbox {
  margin-top: auto;
  padding: 8px 12px;
  border-top: 1px solid var(--uw-rule);
  background: rgba(223, 59, 62, 0.07);
  color: var(--uw-muted);
  font-family: var(--sc-mono);
  font-size: 10px;
  line-height: 1.38;
  letter-spacing: 0.04em;
}

/* Open story dispatch pane */
.news-story {
  min-inline-size: 0;
  padding: 12px 20px 18px 22px;
  color: var(--uw-body);
  font-family: var(--sc-font);
  font-size: 14px;
  line-height: 1.56;
}

.news-story-kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 5px;
}

.news-stamp {
  padding: 1px 6px;
  border: 1px solid rgba(230, 169, 61, 0.5);
  background: rgba(230, 169, 61, 0.1);
  color: var(--uw-amber);
  font-family: var(--sc-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.news-stamp.hot {
  border-color: rgba(223, 59, 62, 0.65);
  background: var(--uw-crimson-dim);
  color: #ff8789;
}

.news-story h3 {
  margin: 0 0 6px;
  color: var(--uw-ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 27px;
  font-weight: 600;
  line-height: 1.12;
}

.news-deck {
  margin: 0 0 8px;
  color: #dfd4c0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 16.5px;
  font-style: italic;
  line-height: 1.3;
}

.news-story .news-source {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--uw-rule);
  color: var(--uw-muted);
  font-family: var(--sc-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.news-body p {
  margin: 0 0 10px;
}

.news-body p:first-child::first-letter {
  float: left;
  margin: 2px 8px 0 0;
  padding: 1px 6px;
  border: 1px solid rgba(223, 59, 62, 0.5);
  background: rgba(223, 59, 62, 0.12);
  color: var(--uw-ink);
  font-family: "IM Fell English SC", "Cormorant Garamond", Georgia, serif;
  font-size: 28px;
  line-height: 1;
}

/* Stenciled underground margin advisory / fact-check */
.news-note {
  margin: 13px 0 12px;
  padding: 9px 12px;
  border: 1px dashed rgba(230, 169, 61, 0.45);
  border-left: 3px solid var(--uw-amber);
  background: rgba(230, 169, 61, 0.07);
}

.news-note-label {
  display: block;
  margin-bottom: 3px;
  color: var(--uw-amber);
  font-family: var(--sc-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
}

.news-note p {
  margin: 0;
  color: var(--uw-ink);
  font-size: 12.5px;
  line-height: 1.44;
}

/* Pseudonymous Lower Mantle mesh replies */
.news-comments {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 3px double var(--uw-rule);
}

.news-comments-head {
  margin: 0 0 7px;
  color: var(--uw-muted);
  font-family: var(--sc-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
}

.news-comment {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  padding: 5px 8px;
  margin-bottom: 4px;
  border-left: 2px solid var(--uw-rule);
  background: rgba(12, 9, 11, 0.48);
  font-size: 12.5px;
  line-height: 1.38;
}

.news-comment-from {
  color: var(--uw-cyan);
  font-family: var(--sc-mono);
  font-size: 11px;
}

.news-comment-text {
  color: var(--uw-body);
}

@container (max-width: 680px) {
  .news-app {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .news-kicker { display: none; }
}

/* short screens (phones in landscape): the Scroll's screen scrolls, so give the app a plain height */
@media (max-height: 500px) {
  .quests-app { block-size: 300px; }
  .msgs-app { height: 300px; grid-template-columns: 170px minmax(0, 1fr); }
  .news-app { height: 320px; grid-template-columns: 210px minmax(0, 1fr); }
  .scroll-app { width: 76px; }
}

/* =========================================================================
   GAMEPAD, TOUCH LOOK-ONLY & 1:1 SQUARE HANDHELD (ANBERNIC RG ROTATE 720×720)
   ========================================================================= */
.dlg-options li.selected {
  color: #f6efe0;
  background: linear-gradient(90deg, rgba(179, 38, 44, 0.24), rgba(201, 164, 94, 0.12) 65%, transparent);
  padding-inline-start: 0.35em;
  border-inline-start: 2px solid #c9a45e;
}
.dlg-options li.selected .dlg-num {
  color: #f0cf88;
}

.cr-row.gp-focus,
.cr-ft .title-btn.gp-focus {
  outline: 1px dashed #c9a45e;
  outline-offset: 2px;
}

.ts-select {
  background: #141210;
  color: #e9e3d6;
  border: 1px solid #3c3833;
  border-radius: 3px;
  padding: 4px 7px;
  font: 300 12px/1.2 Jost, sans-serif;
  max-width: 100%;
}
.ts-select:focus {
  outline: 1px solid #b3262c;
  border-color: #b3262c;
}

/* Touch mode 'auto' (with gamepad) or 'off': hide virtual buttons/stick, keep right-screen swipe-look */
#touch-ui.look-only .touch-move,
#touch-ui.look-only .touch-stick,
#touch-ui.look-only .touch-top,
#touch-ui.look-only .touch-actions {
  display: none !important;
}
#touch-ui.look-only .touch-look {
  width: 62%;
  height: 100%;
}
body.touch:has(#touch-ui.look-only) .hud-ammo {
  top: auto;
  bottom: calc(var(--hud-u) * 1.6);
}

/* Square / near-square viewports (RG Rotate 1:1 720×720 -> 480×480 CSS px at 1.5x DPR) */
@media (max-aspect-ratio: 6/5) {
  #mantle-hud {
    --hud-u: min(1.36vw, 1.36vh);
  }
  .dialogue-box {
    --dlg-u: min(1.52vw, 1.52vh);
    height: calc(var(--dlg-u) * 23);
    padding: calc(var(--dlg-u) * 1.4) max(calc(var(--dlg-u) * 6.5), env(safe-area-inset-right, 0px)) calc(var(--dlg-u) * 1.3) calc(var(--dlg-u) * 2.5);
  }
  .dialogue-box.has-portrait {
    padding-left: calc(var(--dlg-u) * 22);
  }
  .dlg-portrait {
    left: calc(var(--dlg-u) * 0.8);
    width: calc(var(--dlg-u) * 20);
    height: calc(var(--dlg-u) * 31);
  }
  .dlg-more {
    right: max(calc(var(--dlg-u) * 6.5), env(safe-area-inset-right, 0px));
  }
  .shop-panel {
    --dlg-u: min(1.42vw, 1.42vh);
    padding: calc(var(--dlg-u) * 1.6) max(calc(var(--dlg-u) * 4), 12px);
  }
}

/* Compact width (square handhelds & narrow screens <= 640px) */
@media (max-width: 640px) {
  .scroll-dialog {
    width: 98vw;
    height: 95dvh;
  }
  .scroll-device {
    --cap: 16px;
  }
  .scroll-bar {
    padding: 6px 10px 5px;
    gap: 6px;
    flex-wrap: wrap;
  }
  .scroll-apps {
    gap: 2px;
  }
  .scroll-app {
    width: 56px;
    font-size: 8.5px;
    letter-spacing: 0.05em;
    gap: 2px;
  }
  .scroll-app svg {
    width: 24px;
    height: 18px;
  }
  .scroll-status span:nth-child(2) {
    display: none;
  }
  .vtmb-four-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
  }
  .vtmb-sheet-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .msgs-app {
    grid-template-columns: 128px minmax(0, 1fr);
  }
  .news-app {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .title-settings {
    width: min(92vw, 420px);
    max-height: 88dvh;
    overflow-y: auto;
    padding-right: 4px;
  }
  .ts-row {
    grid-template-columns: 6.4em minmax(0, 1fr);
    gap: 0.6em;
  }

  .creation {
    padding: 0.7em 1em 0.65em;
  }
  .cr-body {
    flex-direction: column;
    gap: 0.8em;
    overflow-y: auto;
  }
  .cr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55em 1.2em;
  }
  .cr-panel {
    width: auto;
    padding-left: 0;
    padding-top: 0.6em;
    border-left: none;
    border-top: 1px solid #2a2723;
  }

  .stowaway {
    padding: 0.5em 0.9em 0.45em;
    overflow-y: auto;
  }
  .sw-stage {
    flex-direction: column;
    gap: 0.8em;
    overflow-y: auto;
  }
  .sw-ring {
    --ring: 6.2em;
    --r: min(7.6em, calc(var(--ring) * max(1, var(--n) / 10)));
  }
  .sw-side {
    width: 100%;
    padding-left: 0;
    padding-top: 0.55em;
    border-left: none;
    border-top: 1px solid #2a2723;
  }
}

/* =========================================================================
   Handheld / Mobile GPU Compositor Fast-Path (Mali-G52 / WebView)
   Avoids per-frame offscreen Gaussian blur & drop-shadow FBO passes over live WebGL.
   ========================================================================= */
body.handheld .hud-masks .vtmb-mask-slot,
body.handheld .hud-masks .vtmb-mask-slot.discovered,
body.handheld .hud-reticle,
body.handheld .hud-ammo,
body.handheld .scroll-device,
body.handheld .scroll-crest,
body.handheld .scroll-app.on,
body.handheld .scroll-sys-btn.on,
body.handheld .vtmb-crest .ilia-emblem {
  filter: none;
}

body.handheld .hud-ammo {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.85);
}

body.handheld .scroll-dialog[open] .scroll-device,
body.handheld .scroll-device {
  transform: none;
  animation: none;
}

body.handheld dialog::backdrop {
  backdrop-filter: none;
  background: rgba(3, 6, 10, 0.86);
}

body.handheld .scroll-glass {
  backdrop-filter: none;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.06) 0 16%, transparent 16% 100%),
    linear-gradient(172deg, rgba(12, 34, 40, 0.94), rgba(4, 11, 15, 0.96));
}