:root {
  --bg:
    radial-gradient(circle at top, rgba(207, 153, 73, 0.16), transparent 28%),
    radial-gradient(circle at 20% 10%, rgba(81, 125, 120, 0.14), transparent 24%),
    linear-gradient(180deg, #231f1a 0%, #121512 35%, #090b0d 100%);
  --panel: rgba(17, 22, 21, 0.92);
  --panel-soft: rgba(24, 29, 28, 0.94);
  --panel-elevated: rgba(28, 35, 34, 0.98);
  --overlay: rgba(10, 14, 15, 0.8);
  --border: rgba(214, 198, 157, 0.16);
  --border-strong: rgba(214, 170, 88, 0.42);
  --text: #f4edd7;
  --text-dim: #b4af9d;
  --accent: #d6aa5d;
  --accent-strong: #f2dca2;
  --good: #8fdaa0;
  --bad: #f07c67;
  --warning: #f2c267;
  --info: #8bcde9;
  --scrollbar-track: rgba(17, 22, 21, 0.94);
  --scrollbar-track-edge: rgba(214, 198, 157, 0.08);
  --scrollbar-thumb:
    linear-gradient(180deg, rgba(124, 92, 39, 0.96), rgba(76, 55, 24, 0.98));
  --scrollbar-thumb-hover:
    linear-gradient(180deg, rgba(168, 124, 52, 0.98), rgba(101, 72, 30, 0.99));
  --scrollbar-thumb-border: rgba(242, 220, 162, 0.18);
  --shadow: 0 22px 48px rgba(0, 0, 0, 0.45);
  --soft-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(168, 124, 52, 0.92) rgba(17, 22, 21, 0.94);
}

*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

*::-webkit-scrollbar-track {
  background:
    linear-gradient(180deg, rgba(28, 34, 33, 0.96), rgba(11, 15, 16, 0.98));
  border-left: 1px solid var(--scrollbar-track-edge);
  border-top: 1px solid var(--scrollbar-track-edge);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 1px solid var(--scrollbar-thumb-border);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 215, 0.14),
    0 0 0 1px rgba(0, 0, 0, 0.12);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-corner {
  background: rgba(11, 15, 16, 0.98);
}

html,
body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

body {
  font-family: "Georgia", "Palatino Linotype", serif;
  background: var(--bg);
  color: var(--text);
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
  color: var(--text);
  touch-action: manipulation;
}

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

html[data-ui-scale="large"] .action-button,
html[data-ui-scale="large"] .pad-button,
html[data-ui-scale="large"] .spell-chip,
html[data-ui-scale="large"] .menu-button,
html[data-ui-scale="large"] .tiny-button {
  min-height: 58px;
  font-size: 1rem;
}

html[data-ui-scale="large"] .mobile-app {
  gap: 16px;
}

.mobile-app {
  min-height: 100vh;
  max-width: 1460px;
  margin: 0 auto;
  padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.top-shell,
.panel,
.mobile-sheet,
.field-input,
.status-strip,
.message-log,
.creation-preview,
.mini-caption,
.panel-content {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
}

.top-shell {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 13px 16px;
  background:
    linear-gradient(180deg, rgba(28, 33, 31, 0.98), rgba(14, 18, 18, 0.95)),
    radial-gradient(circle at top left, rgba(214, 170, 88, 0.14), transparent 44%);
}

.brand-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.eyebrow,
.capsule-label,
.panel-title,
.modal-title,
.field-label,
.advisor-label,
.panel-kicker,
.meta-chip-label,
.status-pill-label {
  color: var(--accent);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.app-title {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 0.95;
  letter-spacing: 0.03em;
}

.shell-tagline,
.muted,
.dock-caption,
.board-stage-note,
.meta-chip-value,
.save-stamp {
  color: var(--text-dim);
  font-size: 0.84rem;
  line-height: 1.35;
}

.top-shell-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 8px;
  width: min(420px, 100%);
}

.meta-chip {
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(214, 198, 157, 0.12);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(42, 46, 45, 0.72), rgba(22, 27, 26, 0.86));
  box-shadow: var(--soft-shadow);
}

.meta-chip-value {
  margin-top: 6px;
  color: var(--text);
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  font-weight: 700;
}

.meta-chip-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.meta-chip-button {
  flex: 1;
}

.play-layout {
  display: grid;
  gap: 12px;
}

.board-cluster {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.board-stage {
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(20, 24, 24, 0.98), rgba(8, 11, 12, 0.98)),
    radial-gradient(circle at top, rgba(214, 170, 88, 0.12), transparent 48%);
}

.board-stage-header,
.dock-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 10px;
}

.board-stage-title {
  margin-top: 2px;
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
}

.board-frame {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(214, 198, 157, 0.14);
  background:
    linear-gradient(180deg, rgba(40, 26, 12, 0.28), rgba(8, 12, 12, 0.1)),
    #050706;
  box-shadow: inset 0 0 0 1px rgba(255, 229, 164, 0.04), 0 24px 46px rgba(0, 0, 0, 0.36);
}

.board-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 231, 188, 0.06), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.24)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.3), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.22));
}

#game-canvas,
#map-canvas {
  width: 100%;
  image-rendering: pixelated;
  display: block;
  background: #040606;
}

#game-canvas {
  aspect-ratio: 1;
  min-height: min(74vh, 820px);
}

#game-canvas.three-board {
  image-rendering: auto;
  cursor: crosshair;
  touch-action: manipulation;
}

.board-frame-3d {
  background: radial-gradient(circle at 50% 28%, #142421 0%, #07100f 62%, #030706 100%);
}

.board-frame-3d::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.2;
  background: linear-gradient(135deg, rgba(255, 230, 177, 0.08), transparent 34%, rgba(0, 0, 0, 0.22));
  mix-blend-mode: screen;
}

.board-frame-3d.board-low-hp {
  box-shadow:
    inset 0 0 70px rgba(118, 15, 20, 0.5),
    inset 0 0 0 2px rgba(239, 89, 75, 0.38),
    0 24px 46px rgba(0, 0, 0, 0.42);
}

#map-canvas {
  aspect-ratio: 1;
  max-height: 164px;
  border-radius: 16px;
  border: 1px solid rgba(214, 198, 157, 0.1);
}

.floating-stack {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.floating-stack.top-left {
  top: 10px;
  left: 10px;
}

.floating-stack.top-right {
  top: 10px;
  right: 10px;
}

.floating-stack.bottom-left {
  left: 10px;
  bottom: 12px;
}

.floating-stack.bottom-right {
  right: 10px;
  bottom: 12px;
  align-items: flex-end;
}

.floating-capsule,
.floating-map,
.advisor-strip {
  background: linear-gradient(180deg, rgba(16, 20, 21, 0.92), rgba(8, 10, 11, 0.82));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(234, 220, 183, 0.14);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
  transition: opacity 140ms ease, transform 180ms ease, border-color 180ms ease;
}

.floating-capsule {
  width: min(304px, calc(100vw - 40px));
  border-radius: 20px;
  padding: 12px 14px;
}

.floating-capsule[data-burden-state="danger"],
.floating-capsule[data-burden-state="overloaded"] {
  border-color: rgba(240, 124, 103, 0.28);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(240, 124, 103, 0.16);
}

.floating-map {
  width: min(180px, 35vw);
  border-radius: 22px;
  padding: 8px;
}

.capsule-topline,
.capsule-hero,
.capsule-badge-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.capsule-headline {
  margin-top: 2px;
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
}

.capsule-subline {
  margin-top: 4px;
  color: var(--text-dim);
  font-size: 0.84rem;
}

.capsule-badge,
.advisor-chip,
.map-chip,
.threat-tag,
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(214, 198, 157, 0.14);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.75rem;
}

.capsule-badge {
  color: var(--accent-strong);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.capsule-badge.good,
.threat-tag.good,
.status-pill.good {
  border-color: rgba(143, 218, 160, 0.25);
  color: var(--good);
}

.capsule-badge.warning,
.threat-tag.warning,
.status-pill.warning {
  border-color: rgba(242, 194, 103, 0.25);
  color: var(--warning);
}

.capsule-badge.bad,
.threat-tag.bad,
.status-pill.bad {
  border-color: rgba(240, 124, 103, 0.25);
  color: var(--bad);
}

.meter-stack {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.meter-row,
.capsule-line,
.stat-line,
.equip-line,
.quest-line,
.advisor-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.meter-row,
.capsule-line,
.stat-line,
.equip-line,
.quest-line {
  font-size: 0.84rem;
}

.meter {
  position: relative;
  overflow: hidden;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #b85e55, #ef8f74);
  box-shadow: 0 0 12px rgba(240, 124, 103, 0.28);
  transition: width 150ms ease-out, box-shadow 180ms ease-out, filter 180ms ease-out;
}

.meter.mana > span {
  background: linear-gradient(90deg, #4773b2, #88d2ff);
  box-shadow: 0 0 12px rgba(139, 205, 233, 0.25);
}

.meter.threat > span {
  background: linear-gradient(90deg, #b97836, #efc164);
  box-shadow: 0 0 12px rgba(242, 194, 103, 0.22);
}

.meter.threat-health {
  height: 8px;
  margin-top: 6px;
}

.meter.threat-health > span {
  background: linear-gradient(90deg, #7fbf88, var(--warning) 62%, var(--bad));
  box-shadow: 0 0 10px rgba(240, 124, 103, 0.18);
}

.meter.xp > span {
  background: linear-gradient(90deg, #648b4f, #a8dd73);
  box-shadow: 0 0 12px rgba(143, 218, 160, 0.2);
}

.meter.burden > span,
.mini-meter.burden > span {
  background: linear-gradient(90deg, #7ca89d, #b6d8cf);
  box-shadow: 0 0 12px rgba(143, 218, 160, 0.16);
}

.meter.burden-warning > span,
.mini-meter.burden-warning > span {
  background: linear-gradient(90deg, #b68442, var(--warning));
  box-shadow: 0 0 12px rgba(242, 194, 103, 0.24);
}

.meter.burden-danger > span,
.mini-meter.burden-danger > span {
  background: linear-gradient(90deg, #b85e55, var(--bad));
  box-shadow: 0 0 12px rgba(240, 124, 103, 0.26);
}

.meter.burden-overloaded > span,
.mini-meter.burden-overloaded > span {
  background: linear-gradient(90deg, #9b2d24, #ff8f73);
  box-shadow: 0 0 14px rgba(240, 124, 103, 0.34);
}

.burden-value.burden-safe,
.burden-safe {
  color: var(--good);
}

.burden-value.burden-warning,
.burden-warning {
  color: var(--warning);
}

.burden-value.burden-danger,
.burden-value.burden-overloaded,
.burden-danger,
.burden-overloaded {
  color: var(--bad);
}

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

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

.threat-tags,
.advisor-meta,
.status-strip,
.spell-chip-meta,
.map-caption-row,
.run-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.panel-map .mini-caption {
  margin-top: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.map-caption-row + .map-caption-row {
  margin-top: 6px;
}

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

.map-chip.subtle {
  color: var(--text-dim);
}

.objective-chip {
  color: #ffd5c7;
}

.threat-capsule .capsule-headline {
  color: #ffd5a1;
}

.threat-roster {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.threat-row {
  padding: 9px 10px;
  border-radius: 14px;
  border: 1px solid rgba(214, 198, 157, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

.threat-row.active {
  border-color: rgba(214, 170, 88, 0.34);
  background: rgba(214, 170, 88, 0.08);
}

.threat-row-main,
.threat-row-side {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.threat-row-main {
  flex-wrap: wrap;
}

.threat-row-name {
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  font-weight: 700;
}

.threat-row-meta,
.threat-row-distance {
  color: var(--text-dim);
  font-size: 0.78rem;
}

.advisor-strip {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 20px;
}

.advisor-text {
  margin-top: 4px;
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  font-size: 0.95rem;
  line-height: 1.35;
  max-width: 56ch;
}

.status-strip,
.message-log,
.creation-preview,
.text-block,
.panel-content,
.inventory-detail {
  padding: 12px;
}

.text-block,
.inventory-detail,
.mini-panel,
.inventory-list-panel,
.paper-slot {
  background: rgba(255, 255, 255, 0.03);
  border: 0;
  border-radius: 18px;
  box-shadow: none;
}

.status-strip {
  margin-top: 10px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(17, 21, 21, 0.92), rgba(10, 13, 13, 0.95));
}

.status-pill {
  min-width: 96px;
  padding: 8px 10px;
  border-radius: 16px;
  border: 1px solid rgba(214, 198, 157, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

.status-pill strong {
  display: block;
  margin-top: 4px;
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  font-size: 0.92rem;
}

.hud-dock {
  padding: 8px;
  background:
    linear-gradient(180deg, rgba(17, 21, 22, 0.94), rgba(9, 12, 13, 0.98)),
    radial-gradient(circle at top left, rgba(214, 170, 88, 0.09), transparent 44%);
}

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

.action-button,
.menu-button,
.tiny-button,
.pad-button,
.choice-card {
  border: 1px solid rgba(214, 198, 157, 0.16);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(64, 72, 76, 0.92) 0%, rgba(25, 31, 34, 0.98) 100%);
  box-shadow: var(--soft-shadow);
}

.action-button,
.menu-button,
.tiny-button {
  min-height: 48px;
  padding: 10px 12px;
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  font-weight: 700;
}

.action-button.primary {
  background: linear-gradient(180deg, rgba(142, 117, 55, 0.96) 0%, rgba(88, 65, 24, 1) 100%);
  color: #fff6d8;
}

.dock-action {
  min-height: 62px;
  text-align: left;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: linear-gradient(180deg, rgba(30, 36, 39, 0.98), rgba(14, 18, 20, 0.98));
  transition: transform 150ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.dock-action.recommended {
  border-color: var(--border-strong);
  background: linear-gradient(180deg, rgba(97, 72, 31, 0.94), rgba(52, 39, 18, 0.98));
}

.dock-action.is-active {
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 0 0 1px rgba(242, 220, 162, 0.18), var(--soft-shadow);
}

.menu-button,
.tiny-button {
  min-height: 42px;
}

.context-slot {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(214, 198, 157, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-strong);
  font-size: 0.76rem;
}

.context-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.context-main {
  display: block;
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
}

.context-note {
  display: block;
  color: var(--text-dim);
  font-size: 0.72rem;
  line-height: 1.3;
}

.floating-capsule,
.advisor-strip {
  animation: hud-fade-in 180ms ease;
}

@keyframes hud-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.compact-line {
  margin-top: 10px;
}

.message-log {
  min-height: 132px;
  max-height: 240px;
  overflow: auto;
  background: linear-gradient(180deg, rgba(12, 16, 17, 0.96), rgba(6, 9, 10, 0.98));
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 0.82rem;
  line-height: 1.5;
}

.log-line {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 4px 0;
}

.log-turn {
  color: #87b7ff;
}

.log-warning {
  color: var(--warning);
}

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

.log-good {
  color: var(--good);
}

.value-good {
  color: var(--good);
}

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

.value-warning {
  color: var(--warning);
}

.touch-controls {
  display: grid;
  gap: 10px;
  opacity: 0.72;
}

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

.pad-button {
  min-height: 48px;
  font-size: 1.06rem;
  border-color: rgba(214, 198, 157, 0.08);
  background: linear-gradient(180deg, rgba(43, 49, 52, 0.76) 0%, rgba(20, 24, 27, 0.86) 100%);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.pad-center {
  font-size: 1.4rem;
}

.modal-root {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: end;
  justify-content: center;
  padding: 16px 12px calc(16px + env(safe-area-inset-bottom));
  background: rgba(4, 8, 6, 0.68);
  backdrop-filter: blur(6px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-app.modal-open .floating-stack,
.mobile-app.modal-open .advisor-strip,
.mobile-app.modal-open .hud-dock,
.mobile-app.modal-open #touch-controls {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.mobile-app.modal-open .board-frame,
.mobile-app.modal-open .top-shell {
  filter: blur(4px) saturate(0.78);
  opacity: 0.34;
}

.hidden {
  display: none;
}

/* Universal keyboard focus ring fallback. Elements with their own
   focus-visible styles keep them via higher specificity; this only
   paints a ring on elements that would otherwise have no indicator. */
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgba(241, 201, 112, 0.85);
  outline-offset: 2px;
  border-radius: 6px;
}

.modal {
  width: min(840px, 100%);
  max-height: 88vh;
  overflow: auto;
  position: relative;
}

#modal-root .modal > .modal-close-button,
.mobile-sheet > .modal-close-button,
.modal > .modal-close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(214, 198, 157, 0.24);
  background: rgba(14, 18, 22, 0.82);
  color: var(--ui-text, #e8dfc4);
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 30;
  backdrop-filter: blur(4px);
  transition: background 120ms ease-out, border-color 120ms ease-out, transform 120ms ease-out;
}

.modal-close-button::before {
  content: "\00d7";
  display: block;
  font-size: 22px;
  line-height: 1;
  color: inherit;
}

.modal-close-button:hover,
.modal-close-button:focus-visible {
  background: rgba(68, 36, 28, 0.82);
  border-color: rgba(241, 177, 159, 0.55);
  outline: none;
  transform: scale(1.05);
}

.modal-close-button:active {
  transform: scale(0.96);
}

.mobile-sheet {
  padding: 14px;
  border-radius: 28px 28px 18px 18px;
  background: var(--panel-elevated);
}

.title-screen {
  width: min(880px, 100%);
  padding: 24px;
  border-radius: 34px;
  background:
    radial-gradient(circle at top left, rgba(214, 170, 88, 0.18), transparent 36%),
    linear-gradient(180deg, rgba(30, 35, 33, 0.98), rgba(13, 16, 17, 0.98));
}

.title-hero {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.title-screen-heading {
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 0.92;
}

.title-screen-copy {
  max-width: 42rem;
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1.6;
}

.title-screen-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 14px;
}

.title-screen-panel {
  padding: 14px;
  border-radius: 20px;
  background: rgba(20, 25, 24, 0.72);
  border: 1px solid rgba(214, 198, 157, 0.12);
}

.title-save-summary,
.title-feature-list {
  display: grid;
  gap: 8px;
}

.title-audio-banner,
.save-slot-music-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(12, 17, 17, 0.76);
  border: 1px solid rgba(214, 198, 157, 0.18);
}

.title-audio-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.title-audio-label {
  color: var(--accent-strong);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.title-audio-note {
  color: var(--text-dim);
  font-size: 0.92rem;
}

.title-audio-toggle {
  flex: 0 0 auto;
  min-width: 144px;
}

.creation-audio-banner {
  margin-bottom: 14px;
}

.title-save-label,
.title-feature {
  color: var(--text-dim);
  font-size: 0.88rem;
}

.title-save-name {
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
}

.title-save-meta {
  color: var(--accent-strong);
}

.title-feature {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(214, 198, 157, 0.08);
}

.title-actions {
  justify-content: flex-start;
  margin-top: 18px;
}

.hub-window {
  display: grid;
  gap: 12px;
}

.hub-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.hub-tab {
  min-height: 44px;
  border: 1px solid rgba(214, 198, 157, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  font-weight: 700;
}

.hub-tab.active {
  border-color: var(--border-strong);
  background: linear-gradient(180deg, rgba(94, 70, 32, 0.9), rgba(48, 36, 16, 0.96));
  color: var(--accent-strong);
}

.hub-body {
  display: grid;
  gap: 12px;
}

.panel-title {
  margin-bottom: 8px;
}

.hub-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.hub-section {
  display: grid;
  gap: 8px;
}

.pack-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(300px, 1.05fr) minmax(250px, 0.85fr);
  gap: 12px;
  align-items: start;
}

.pack-equipment-panel,
.pack-inventory-panel,
.pack-inspector-panel {
  align-self: stretch;
}

.pack-paperdoll {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "cloak head amulet1 amulet2"
    "weapon core offhand offhand"
    "weapon armor armor ring1"
    "ring4 feet feet ring2"
    ". . . ring3";
  gap: 10px;
  align-items: stretch;
}

.paperdoll-core {
  grid-area: core;
  min-height: 320px;
  padding: 14px;
  border-radius: 24px;
  border: 1px solid rgba(214, 198, 157, 0.12);
  background:
    radial-gradient(circle at top, rgba(214, 170, 88, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(29, 36, 35, 0.96), rgba(16, 21, 23, 0.98));
  display: grid;
  gap: 12px;
  justify-items: center;
  align-content: center;
  text-align: center;
}

.paperdoll-core-kicker {
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.paperdoll-core-note {
  color: var(--text-dim);
  font-size: 0.82rem;
  line-height: 1.45;
}

.paperdoll-avatar {
  position: relative;
  width: 110px;
  height: 170px;
}

.avatar-head,
.avatar-body,
.avatar-arms,
.avatar-legs {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid rgba(214, 198, 157, 0.28);
  background: rgba(255, 255, 255, 0.03);
}

.avatar-head {
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.avatar-body {
  top: 36px;
  width: 64px;
  height: 70px;
  border-radius: 24px 24px 18px 18px;
}

.avatar-arms {
  top: 52px;
  width: 98px;
  height: 16px;
  border-radius: 999px;
}

.avatar-legs {
  top: 102px;
  width: 52px;
  height: 58px;
  border-radius: 0 0 18px 18px;
}

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

.journal-log {
  min-height: 180px;
  max-height: 320px;
}

.modal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.modal-body,
.choice-grid,
.inventory-window,
.inventory-paper,
.inventory-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-actions,
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.pickup-triage {
  display: grid;
  gap: 12px;
}

.pickup-triage-summary {
  display: grid;
  gap: 4px;
}

.pickup-triage-title {
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
}

.pickup-triage-note {
  color: var(--text-dim);
}

.pickup-triage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pickup-triage-copy {
  line-height: 1.45;
}

.field-input {
  width: 100%;
  padding: 10px 12px;
  color: var(--text);
}

.field-group {
  margin-bottom: 14px;
}

.creation-stat-header,
.creation-stat-row,
.creation-stat-stepper,
.creation-stat-notes {
  display: flex;
  align-items: center;
}

.creation-stat-header {
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.creation-points-note {
  margin-bottom: 10px;
  color: var(--text-dim);
}

.creation-stat-allocation {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.creation-stat-row {
  gap: 10px;
  justify-content: space-between;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-soft);
}

.creation-stat-copy {
  flex: 1;
  min-width: 0;
}

.creation-stat-title {
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  font-weight: 700;
}

.creation-stat-notes {
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  color: var(--text-dim);
  font-size: 0.82rem;
}

.creation-stat-stepper {
  flex-shrink: 0;
  gap: 6px;
}

.creation-stat-button {
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 1rem;
}

.creation-stat-value {
  min-width: 60px;
  text-align: center;
  font-weight: 700;
}

.choice-card {
  padding: 12px;
  text-align: left;
}

.choice-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(214, 184, 120, 0.22), var(--shadow);
}

.choice-title {
  margin-bottom: 3px;
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  font-weight: 700;
}

.section-block {
  margin-bottom: 10px;
}

.shop-sell-group + .shop-sell-group {
  margin-top: 12px;
}

.paperdoll-grid,
.inventory-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.paper-slot,
.inventory-list-panel,
.inventory-detail,
.mini-panel {
  background: var(--panel-soft);
}

.paper-slot {
  position: relative;
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 12px;
  min-height: 88px;
  text-align: left;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, opacity 150ms ease;
}

.paper-slot.active {
  border-color: var(--border-strong);
  background: linear-gradient(180deg, rgba(90, 67, 28, 0.36), rgba(29, 24, 16, 0.5));
  box-shadow: 0 0 0 1px rgba(214, 170, 88, 0.2), var(--soft-shadow);
  transform: translateY(-1px);
}

.pack-paperdoll:has(.paper-slot.active) .paper-slot:not(.active),
.pack-group-list:has(.pack-item-row.active) .pack-item-row:not(.active) {
  opacity: 0.58;
}

.slot-cloak { grid-area: cloak; }
.slot-head { grid-area: head; }
.slot-amulet1 { grid-area: amulet1; }
.slot-amulet2 { grid-area: amulet2; }
.slot-weapon { grid-area: weapon; }
.slot-armor { grid-area: armor; }
.slot-offhand { grid-area: offhand; }
.slot-ring1 { grid-area: ring1; }
.slot-ring2 { grid-area: ring2; }
.slot-ring3 { grid-area: ring3; }
.slot-ring4 { grid-area: ring4; }
.slot-feet { grid-area: feet; }

.paper-slot-note {
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.4;
}

.paper-slot-quality {
  justify-self: start;
}

.paper-slot-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(214, 170, 88, 0.14);
  color: var(--accent-strong);
  font-size: 0.68rem;
}

.paper-slot-label {
  color: var(--text-dim);
  font-size: 0.74rem;
  text-transform: uppercase;
}

.paper-slot-item {
  margin-top: 4px;
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
}

.mini-panel {
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}

.inventory-list-panel {
  max-height: 48vh;
  overflow: auto;
  padding: 4px;
}

.pack-list-panel {
  max-height: 60vh;
  padding: 10px;
}

.pack-group {
  display: grid;
  gap: 8px;
}

.pack-group + .pack-group {
  margin-top: 10px;
}

.pack-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pack-group-title {
  color: var(--accent);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pack-group-count {
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(214, 170, 88, 0.12);
  color: var(--accent-strong);
  font-size: 0.72rem;
  text-align: center;
}

.pack-group-list {
  display: grid;
  gap: 8px;
}

.pack-subgroup + .pack-subgroup {
  margin-top: 12px;
}

.pack-subgroup-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.pack-subgroup-title,
.magic-category-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.pack-subgroup-count,
.magic-category-count {
  color: var(--text-dim);
  font-size: 0.76rem;
}

.pack-filter-row,
.pack-item-head,
.pack-item-tags,
.pack-build-tags,
.pack-inspector-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pack-filter-row {
  margin-bottom: 10px;
}

.pack-filter-row-compact {
  margin-bottom: 6px;
}

.hub-filter-chip {
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(214, 198, 157, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  font-size: 0.76rem;
}

.hub-filter-chip.active {
  border-color: rgba(214, 170, 88, 0.28);
  background: linear-gradient(180deg, rgba(94, 70, 30, 0.84), rgba(46, 34, 15, 0.92));
  color: var(--text);
}

.pack-item-row {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  border: 1px solid rgba(214, 198, 157, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, opacity 150ms ease;
}

.pack-item-row.pack-item-row-good {
  border-color: rgba(104, 180, 115, 0.24);
  background: linear-gradient(180deg, rgba(24, 44, 27, 0.4), rgba(14, 23, 17, 0.56));
}

.pack-item-row.pack-item-row-neutral {
  border-color: rgba(214, 170, 88, 0.2);
  background: linear-gradient(180deg, rgba(57, 43, 19, 0.26), rgba(24, 20, 13, 0.44));
}

.pack-item-row.pack-item-row-bad {
  border-color: rgba(196, 106, 86, 0.24);
  background: linear-gradient(180deg, rgba(60, 28, 20, 0.32), rgba(24, 16, 14, 0.48));
}

.pack-item-row.active {
  border-color: var(--border-strong);
  background: linear-gradient(180deg, rgba(93, 68, 28, 0.42), rgba(36, 29, 17, 0.62));
  box-shadow: 0 0 0 1px rgba(214, 170, 88, 0.18), var(--soft-shadow);
  transform: translateY(-1px);
}

.pack-item-head {
  align-items: center;
  justify-content: space-between;
}

.pack-item-name {
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  font-weight: 700;
}

.pack-item-stack,
.pack-decision-chip,
.paper-slot-quality {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(214, 170, 88, 0.1);
  color: var(--accent-strong);
  font-size: 0.72rem;
}

.pack-item-meta,
.pack-item-note,
.pack-item-reason,
.pack-inspector-kicker,
.pack-inspector-note,
.pack-hover-preview-note,
.pack-hover-preview-copy {
  color: var(--text-dim);
  font-size: 0.8rem;
}

.pack-item-reason,
.pack-decision-reason {
  color: var(--text);
  line-height: 1.45;
}

.pack-inspector-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  min-height: 100%;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(25, 31, 31, 0.98), rgba(13, 18, 18, 0.98)),
    radial-gradient(circle at top left, rgba(214, 170, 88, 0.08), transparent 40%);
  border: 1px solid rgba(214, 198, 157, 0.14);
  box-shadow: 0 0 0 1px rgba(255, 229, 164, 0.04), var(--soft-shadow);
}

.pack-inspector-title {
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
}

.pack-inspector-summary {
  align-items: center;
}

.pack-item-badges,
.pack-compatible-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.shop-row .pack-item-badges {
  margin-top: 6px;
}

.shop-row .pack-item-tags,
.pickup-triage .pack-item-tags {
  margin-top: 8px;
}

.item-chip {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(214, 198, 157, 0.1);
  color: var(--text-dim);
  font-size: 0.74rem;
}

.kind-chip {
  color: var(--accent-strong);
}

.category-chip {
  color: #f1ddb6;
  border-color: rgba(214, 170, 88, 0.24);
  background: rgba(214, 170, 88, 0.1);
}

.semantic-chip {
  color: #d7e4ee;
  border-color: rgba(159, 208, 255, 0.16);
}

.pack-risk-callout {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(154, 86, 42, 0.14);
  border: 1px solid rgba(206, 136, 84, 0.2);
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.45;
}

.warning-chip {
  color: var(--warning);
}

.bad-chip,
.bad-note {
  color: var(--bad);
}

.pack-inspector-copy {
  padding: 0;
  line-height: 1.5;
}

.pack-hover-preview {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(159, 208, 255, 0.2);
  background: linear-gradient(180deg, rgba(28, 37, 43, 0.92), rgba(16, 23, 28, 0.96));
}

.shop-hover-preview-host:empty {
  display: none;
}

.shop-hover-preview {
  margin-bottom: 0;
}

.shop-hover-preview-hero {
  margin-top: 6px;
}

.shop-hover-comparison-card {
  margin-top: 2px;
}

.pack-hover-preview-head,
.magic-category-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.pack-hover-preview-kicker {
  color: #d7e4ee;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pack-hover-preview-title {
  font-family: var(--font-display);
  color: #f2dfbb;
  font-size: 1rem;
}

.pack-stat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pack-stat-pill,
.pack-ready-chip {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(214, 198, 157, 0.08);
  color: var(--text);
  font-size: 0.76rem;
}

.pack-comparison-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
}

.pack-comparison-title {
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
}

.pack-comparison-list {
  display: grid;
  gap: 6px;
}

.pack-comparison-row {
  font-size: 0.82rem;
}

.pack-action-primary {
  border-color: rgba(214, 170, 88, 0.3);
  background: linear-gradient(180deg, rgba(95, 71, 30, 0.96), rgba(48, 36, 16, 0.98));
}

.pack-build-panel {
  align-content: start;
}

.pack-build-tags {
  margin-top: 2px;
}

.mini-meter {
  position: relative;
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.mini-meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.mini-panel-note {
  color: var(--text-dim);
  font-size: 0.74rem;
}

.spell-learn-grid {
  display: grid;
  gap: 10px;
}

.spell-learn-groups {
  display: grid;
  gap: 16px;
}

.spell-learn-group {
  display: grid;
  gap: 10px;
}

.spell-learn-card {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 14px;
  text-align: left;
  border: 1px solid rgba(214, 198, 157, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(39, 46, 48, 0.96), rgba(18, 24, 27, 0.98)),
    radial-gradient(circle at top left, rgba(214, 170, 88, 0.1), transparent 45%);
}

.spell-learn-tier {
  color: var(--accent);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.spell-learn-name {
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  font-size: 1rem;
  font-weight: 700;
}

.spell-learn-meta,
.spell-learn-copy {
  color: var(--text-dim);
  font-size: 0.84rem;
  line-height: 1.45;
}

.inventory-list-row,
.list-row,
.shop-row {
  display: grid;
  gap: 8px;
  padding: 10px;
  margin-bottom: 8px;
  background: rgba(62, 77, 68, 0.56);
  border-radius: 14px;
  border: 1px solid rgba(148, 160, 144, 0.15);
}

.pill {
  margin-right: 6px;
}

@media (min-width: 920px) {
  #game-canvas {
    min-height: min(78vh, 900px);
  }

  .modal-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

@media (max-width: 780px) {
  .top-shell,
  .board-stage-header,
  .touch-controls {
    grid-template-columns: 1fr;
    display: grid;
  }

  .top-shell-meta {
    width: 100%;
  }

  .shell-tagline {
    max-width: 44ch;
  }

  .title-screen-grid,
  .pack-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .mobile-app {
    gap: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .top-shell {
    gap: 10px;
    padding: 10px 12px;
  }

  .brand-block {
    gap: 1px;
  }

  .app-title {
    font-size: 1.6rem;
  }

  .shell-tagline,
  .eyebrow,
  .meta-chip-label {
    display: none;
  }

  .top-shell-meta {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .meta-chip {
    min-height: 0;
    padding: 8px 10px;
    border-radius: 14px;
  }

  .meta-chip-value {
    margin-top: 4px;
    font-size: 0.78rem;
    line-height: 1.22;
  }

  .save-stamp {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .meta-chip-actions {
    margin-top: 6px;
    gap: 6px;
  }

  .meta-chip-button {
    min-height: 38px;
    padding: 8px 10px;
  }

  .board-stage {
    padding: 8px;
  }

  .board-frame {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(110px, 34vw);
    grid-template-areas:
      "player map"
      "board board"
      "threat threat";
    gap: 8px;
    padding: 8px;
  }

  .floating-stack {
    position: static;
    gap: 0;
  }

  .floating-stack.top-left {
    grid-area: player;
  }

  .floating-stack.top-right {
    grid-area: map;
  }

  .floating-stack.bottom-left {
    grid-area: threat;
  }

  .floating-stack > * {
    width: 100%;
  }

  .floating-map {
    width: 100%;
    padding: 6px;
    border-radius: 18px;
  }

  .floating-capsule {
    width: 100%;
    padding: 9px 10px;
    border-radius: 18px;
  }

  .floating-stack.top-left,
  .floating-stack.top-right {
    top: auto;
  }

  .floating-stack.top-left {
    left: auto;
  }

  .floating-stack.top-right {
    right: auto;
  }

  .floating-stack.bottom-left {
    left: auto;
    bottom: auto;
  }

  .threat-capsule {
    width: 100%;
  }

  #map-canvas {
    max-height: none;
  }

  .capsule-label,
  .advisor-label,
  .panel-title {
    font-size: 0.64rem;
    letter-spacing: 0.11em;
  }

  .capsule-headline {
    font-size: 0.86rem;
  }

  .capsule-subline,
  .pack-item-note,
  .context-note {
    font-size: 0.7rem;
  }

  .capsule-badge,
  .advisor-chip,
  .map-chip,
  .threat-tag,
  .pill {
    min-height: 22px;
    padding: 3px 8px;
    font-size: 0.68rem;
  }

  #player-capsule .capsule-line:last-of-type,
  .threat-roster,
  .threat-capsule .capsule-line,
  .floating-map .mini-caption,
  .advisor-meta {
    display: none;
  }

  .threat-capsule .capsule-subline,
  .context-note {
    display: none;
  }

  .meter-stack {
    gap: 6px;
    margin-top: 8px;
  }

  .meter-row,
  .capsule-line {
    font-size: 0.76rem;
  }

  .advisor-strip {
    padding: 10px 12px;
  }

  .advisor-text {
    font-size: 0.85rem;
  }

  #game-canvas {
    grid-area: board;
    min-height: min(54vh, 520px);
    border-radius: 18px;
  }

  .action-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .dock-action {
    min-height: 56px;
    gap: 8px;
    padding: 9px 10px;
  }

  .paperdoll-grid,
  .inventory-summary,
  .hub-summary,
  .capsule-grid,
  .stat-grid {
    grid-template-columns: 1fr;
  }

  .pack-paperdoll {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "amulet"
      "core"
      "armor"
      "cloak"
      "weapon"
      "offhand"
      "ring"
      "feet";
  }

  .paperdoll-core {
    min-height: 220px;
  }

  .touch-controls {
    gap: 6px;
    opacity: 0.6;
  }

  .pad-button {
    min-height: 42px;
    font-size: 0.98rem;
  }
}

@media (max-width: 420px) {
  .board-frame {
    grid-template-columns: minmax(0, 1fr) 106px;
  }

  .floating-capsule {
    padding: 8px 9px;
  }

  .threat-capsule {
    width: 100%;
  }

  .capsule-headline {
    font-size: 0.81rem;
  }

  .advisor-text {
    font-size: 0.8rem;
  }

  .action-button,
  .pad-button,
  .menu-button,
  .tiny-button {
    min-height: 44px;
    font-size: 0.92rem;
  }

  .board-stage {
    padding: 10px;
  }
}

/* Board-first mobile shell refresh */
.mobile-app {
  max-width: 980px;
  padding: calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
}

.utility-bar {
  position: sticky;
  top: calc(8px + env(safe-area-inset-top));
  z-index: 12;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto auto auto;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 8px;
  background:
    linear-gradient(180deg, rgba(21, 25, 26, 0.98), rgba(11, 14, 15, 0.98)),
    radial-gradient(circle at top left, rgba(214, 170, 88, 0.12), transparent 42%);
}

.utility-chip,
.utility-menu-button {
  min-height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(214, 198, 157, 0.14);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: var(--soft-shadow);
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  font-weight: 700;
}

.utility-chip {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  color: var(--text);
}

.utility-run-status {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.utility-pressure-status {
  white-space: nowrap;
}

.utility-chip-muted {
  color: var(--text-dim);
}

.utility-pressure-status.tone-good {
  color: #bfe9c8;
}

.utility-pressure-status.tone-warning {
  color: #f0d287;
}

.utility-pressure-status.tone-bad {
  color: #f09a8e;
}

.utility-menu-button {
  padding: 0 14px;
}

.play-layout,
.board-cluster {
  gap: 10px;
}

.board-stage {
  padding: 8px;
}

.board-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  grid-template-areas:
    "player map"
    "board board";
  gap: 8px;
  padding: 8px;
  align-items: start;
}

.floating-stack {
  position: static;
  gap: 0;
}

.floating-stack.top-left {
  grid-area: player;
}

.floating-stack.top-right {
  grid-area: map;
}

.floating-stack > * {
  width: 100%;
}

.floating-capsule {
  width: 100%;
  padding: 10px 12px;
  border-radius: 18px;
}

.floating-map {
  width: 100%;
  padding: 6px;
  border-radius: 18px;
}

#game-canvas {
  grid-area: board;
  min-height: min(62vh, 540px);
  border-radius: 18px;
}

#map-canvas {
  max-height: 132px;
}

.capsule-headline {
  font-size: 0.92rem;
}

.capsule-subline,
.capsule-line,
.meter-row {
  font-size: 0.78rem;
}

.advisor-strip {
  margin-top: 8px;
  padding: 12px;
  border-radius: 18px;
  display: grid;
  gap: 8px;
}

.event-ticker {
  margin-top: 8px;
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
}

.event-ticker-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.35;
}

.event-ticker-banner {
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(214, 198, 157, 0.12);
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--text);
}

.event-ticker-turn {
  color: var(--accent);
  font-weight: 700;
}

.event-ticker-text {
  min-width: 0;
}

.event-ticker-empty {
  color: var(--text-dim);
  font-size: 0.78rem;
}

.ticker-good .event-ticker-text {
  color: #bfe9c8;
}

.ticker-warning .event-ticker-text {
  color: #f0d287;
}

.ticker-bad .event-ticker-text {
  color: #f09a8e;
}

.advisor-ribbon-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.advisor-state {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(214, 198, 157, 0.12);
  color: var(--text);
  font-size: 0.72rem;
  white-space: nowrap;
}

.advisor-text {
  font-size: 0.9rem;
  line-height: 1.4;
}

.advisor-support {
  color: var(--text-dim);
  font-size: 0.76rem;
  line-height: 1.35;
}

.footer-dock {
  position: sticky;
  bottom: calc(8px + env(safe-area-inset-bottom));
  z-index: 11;
  display: grid;
  gap: 8px;
  padding: 8px;
  background:
    linear-gradient(180deg, rgba(18, 23, 24, 0.98), rgba(9, 12, 13, 0.98)),
    radial-gradient(circle at top, rgba(214, 170, 88, 0.08), transparent 44%);
}

.hud-dock {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.action-bar {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dock-action {
  min-height: 64px;
  gap: 10px;
  padding: 10px 12px;
  align-items: center;
}

.dock-action.recommended {
  border-color: rgba(214, 170, 88, 0.42);
  background: linear-gradient(180deg, rgba(99, 74, 33, 0.94), rgba(53, 39, 18, 0.98));
}

.dock-action.secondary {
  background: linear-gradient(180deg, rgba(28, 34, 37, 0.98), rgba(14, 19, 21, 0.98));
}

.context-slot {
  width: 28px;
  height: 28px;
}

.context-main {
  font-size: 0.9rem;
}

.context-note {
  font-size: 0.72rem;
}

.touch-controls {
  gap: 8px;
  opacity: 1;
}

.touch-pad {
  gap: 8px;
}

.pad-button {
  min-height: 44px;
  border-radius: 16px;
}

.mobile-app.modal-open .floating-stack,
.mobile-app.modal-open .advisor-strip,
.mobile-app.modal-open .event-ticker,
.mobile-app.modal-open .footer-dock {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.mobile-app.modal-open .board-frame,
.mobile-app.modal-open .utility-bar {
  filter: blur(4px) saturate(0.78);
  opacity: 0.34;
}

.title-screen {
  width: min(420px, 100%);
  padding: 20px 16px;
  border-radius: 28px;
}

.title-hero {
  gap: 6px;
  margin-bottom: 14px;
}

.title-screen-heading {
  font-size: clamp(2rem, 10vw, 2.6rem);
}

.title-screen-copy {
  max-width: none;
  font-size: 0.94rem;
  line-height: 1.45;
}

.title-screen-panel {
  padding: 12px;
}

.title-save-summary {
  gap: 6px;
}

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

.title-actions .action-button:last-child {
  grid-column: 1 / -1;
}

.save-slot-music-banner {
  margin-bottom: 14px;
}

@media (max-width: 780px) {
  .title-audio-banner,
  .save-slot-music-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .title-audio-toggle {
    width: 100%;
    min-width: 0;
  }
}

.utility-menu-sheet {
  width: min(420px, 100%);
}

.utility-menu-body {
  display: grid;
  gap: 12px;
}

.utility-menu-panel {
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(214, 198, 157, 0.12);
}

.utility-menu-summary {
  display: grid;
  gap: 4px;
}

.utility-menu-title {
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  font-weight: 700;
}

.utility-menu-meta {
  color: var(--text-dim);
  font-size: 0.84rem;
  line-height: 1.4;
}

.save-slot-modal {
  display: grid;
  gap: 12px;
}

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

.save-slot-list.compact {
  gap: 8px;
}

.save-slot-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(216, 194, 154, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

.save-slot-card.active {
  border-color: rgba(216, 194, 154, 0.34);
  background: linear-gradient(180deg, rgba(216, 194, 154, 0.12), rgba(255, 255, 255, 0.03));
}

.save-slot-head {
  display: grid;
  gap: 4px;
}

.save-slot-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.save-slot-title {
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.save-slot-name {
  font-weight: 700;
  color: var(--text-main);
}

.save-slot-meta {
  color: var(--text-dim);
  font-size: 0.82rem;
  line-height: 1.4;
}

.save-slot-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(216, 194, 154, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.save-slot-badge.active {
  border-color: rgba(214, 230, 187, 0.38);
  color: #dcebb8;
}

.save-slot-actions {
  display: flex;
  justify-content: flex-start;
}

.save-slot-actions .menu-button,
.save-slot-actions .tiny-button {
  min-width: 112px;
}

.title-save-summary .save-slot-list {
  margin-top: 4px;
}

.title-save-summary .save-slot-card,
.utility-menu-summary .save-slot-card {
  padding: 10px;
}

.title-save-summary .save-slot-actions,
.utility-menu-summary .save-slot-actions {
  justify-content: flex-end;
}

.utility-menu-actions {
  display: grid;
  gap: 10px;
}

.utility-menu-group {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(214, 198, 157, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

.utility-menu-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.utility-menu-primary-action {
  grid-column: 1 / -1;
}

.action-button-subtle {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(214, 198, 157, 0.12);
  color: var(--text-dim);
}

.utility-trace-button {
  justify-self: stretch;
}

.help-panel {
  display: grid;
  gap: 10px;
}

.help-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 18px;
  color: var(--text-dim);
  line-height: 1.45;
}

.help-list strong {
  color: var(--text-main);
}

@media (min-width: 920px) {
  .mobile-app {
    max-width: 1460px;
    padding-left: 12px;
    padding-right: 12px;
    gap: 12px;
  }

  .utility-bar {
    position: static;
  }

  .board-stage {
    padding: 10px;
  }

  .board-frame {
    display: block;
    padding: 0;
  }

  .floating-stack {
    position: absolute;
    gap: 8px;
  }

  .floating-stack.top-left {
    top: 10px;
    left: 10px;
  }

  .floating-stack.top-right {
    top: 10px;
    right: 10px;
  }

  .floating-capsule {
    width: min(280px, 26vw);
  }

  .floating-map {
    width: min(176px, 16vw);
    padding: 8px;
    border-radius: 22px;
  }

  #map-canvas {
    max-height: 164px;
  }

  #game-canvas {
    min-height: min(78vh, 900px);
    border-radius: 24px;
  }

  .footer-dock {
    position: static;
    padding: 8px;
  }

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

  .touch-controls {
    max-width: 520px;
  }

  .title-screen {
    width: min(540px, 100%);
    padding: 24px;
    border-radius: 34px;
  }

  .title-actions .action-button:last-child {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .utility-chip,
  .utility-menu-button {
    min-height: 38px;
  }

  .utility-chip {
    padding: 0 10px;
    font-size: 0.82rem;
  }

  .utility-menu-button {
    padding: 0 12px;
  }

  .board-frame {
    grid-template-columns: minmax(0, 1fr) 104px;
  }

  .floating-capsule {
    padding: 9px 10px;
  }

  #game-canvas {
    min-height: min(58vh, 500px);
  }

  .advisor-strip {
    padding: 10px 11px;
  }

  .advisor-state {
    max-width: 52%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 420px) {
  .utility-bar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px;
    padding: 7px;
  }

  .board-frame {
    grid-template-columns: minmax(0, 1fr) 96px;
  }

  .capsule-headline {
    font-size: 0.84rem;
  }

  .utility-menu-actions,
  .title-actions {
    grid-template-columns: 1fr;
  }

    .title-actions .action-button:last-child {
      grid-column: auto;
    }
}

/* Hub modal refresh */
.hub-window {
  gap: 10px;
}

.hub-tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-bottom: 2px;
  background: linear-gradient(180deg, var(--panel-elevated), rgba(28, 35, 34, 0.92));
}

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

.mini-panel {
  min-height: 74px;
  padding: 10px;
}

.pack-layout {
  grid-template-columns: 1fr;
  gap: 10px;
}

.pack-inspector-panel {
  order: 1;
}

.pack-inventory-panel {
  order: 2;
}

.pack-equipment-panel {
  order: 3;
}

.pack-paperdoll {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: none;
  gap: 8px;
}

.pack-paperdoll .paper-slot {
  grid-area: auto;
  min-height: 76px;
}

.paper-slot {
  padding: 10px 12px;
}

.paper-slot-item {
  font-size: 0.86rem;
}

.paper-slot-note {
  font-size: 0.72rem;
}

.pack-list-panel {
  max-height: 34vh;
  padding: 8px;
}

.pack-group + .pack-group {
  margin-top: 8px;
}

.pack-item-row {
  padding: 11px 12px;
}

.pack-item-meta,
.pack-item-reason,
.pack-item-note,
.pack-inspector-kicker,
.pack-inspector-note {
  font-size: 0.76rem;
}

.pack-inspector-card {
  padding: 12px;
  border-radius: 18px;
}

.pack-inspector-title {
  font-size: 1rem;
}

.pack-field-note {
  padding: 12px;
  line-height: 1.45;
}

.magic-intro {
  margin-bottom: 8px;
}

.magic-grid {
  display: grid;
  gap: 10px;
}

.magic-category-list {
  display: grid;
  gap: 16px;
}

.magic-category-group {
  display: grid;
  gap: 10px;
}

.magic-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(214, 198, 157, 0.12);
  background:
    linear-gradient(180deg, rgba(29, 36, 37, 0.98), rgba(14, 18, 20, 0.98)),
    radial-gradient(circle at top left, rgba(214, 170, 88, 0.08), transparent 42%);
}

.magic-card.active {
  border-color: rgba(255, 177, 111, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 177, 111, 0.12);
}

.magic-card.pinned {
  border-color: rgba(159, 208, 255, 0.2);
}

.magic-card-select {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.magic-card-tags,
.spell-tray-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.spell-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(214, 198, 157, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.spell-badge.accent {
  color: #ffd5bf;
  border-color: rgba(255, 177, 111, 0.28);
  background: rgba(255, 177, 111, 0.08);
}

.spell-badge.subtle {
  color: #d7e4ee;
  border-color: rgba(159, 208, 255, 0.18);
}

.magic-card-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.magic-card-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  font-weight: 700;
}

.spell-symbol-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.05em;
  color: #f4d79f;
  font-size: 1.02em;
  line-height: 1;
}

.magic-card-cost,
.magic-card-meta {
  color: var(--text-dim);
  font-size: 0.78rem;
}

.magic-card-cost.warning {
  color: var(--warning);
}

.magic-card-status {
  color: var(--text-dim);
  font-size: 0.74rem;
}

.magic-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.magic-card-actions .menu-button {
  flex: 1 1 120px;
}

.magic-card-copy {
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.45;
}

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

.shop-sell-section + .shop-sell-section {
  margin-top: 10px;
}

.shop-sell-category {
  margin-bottom: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shop-panel-row {
  margin-top: 10px;
  margin-bottom: 12px;
}

.mark-sale-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(214, 198, 157, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  font-size: 0.78rem;
}

.mark-sale-toggle input {
  margin: 0;
}

.inspector-mark-toggle {
  justify-self: start;
}

.pixel-sprite {
  display: block;
  width: calc(var(--frame-width) * var(--pixel-scale));
  height: calc(var(--frame-height) * var(--pixel-scale));
  background-repeat: no-repeat;
  background-position: calc(var(--frame-x-scaled, 0px) * -1) calc(var(--frame-y-scaled, 0px) * -1);
  background-size: var(--sheet-width-scaled, 100%) var(--sheet-height-scaled, 100%);
  image-rendering: pixelated;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.32));
}

.title-screen {
  width: min(980px, 100%);
  padding: 22px;
  border-radius: 34px;
  background:
    radial-gradient(circle at top left, rgba(214, 170, 88, 0.14), transparent 34%),
    radial-gradient(circle at 85% 10%, rgba(87, 133, 122, 0.12), transparent 26%),
    linear-gradient(180deg, rgba(26, 31, 31, 0.98), rgba(12, 16, 17, 0.98));
}

.title-screen-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 14px;
  align-items: start;
}

.title-showcase-panel {
  display: grid;
  gap: 14px;
}

.title-screen-kicker,
.title-feature-kicker,
.title-scene-label {
  color: var(--accent);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.title-hero {
  display: grid;
  gap: 8px;
  margin: 0;
}

.title-screen-heading {
  margin: 0;
  max-width: 9ch;
  font-size: clamp(2.5rem, 6vw, 4.3rem);
  line-height: 0.88;
  text-wrap: balance;
}

.title-screen-copy {
  max-width: 44rem;
  color: var(--text-dim);
  font-size: 0.98rem;
  line-height: 1.55;
}

.title-screen-panel {
  padding: 14px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(20, 25, 24, 0.84), rgba(10, 13, 14, 0.8)),
    rgba(20, 25, 24, 0.72);
  border: 1px solid rgba(214, 198, 157, 0.12);
}

.title-scene {
  position: relative;
  overflow: hidden;
  min-height: 286px;
  padding: 16px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(37, 25, 33, 0.2), rgba(10, 14, 16, 0.74)),
    url("assets/vendor/pixel-dungeon-pack/2D Pixel Dungeon Asset Pack/character and tileset/demonstration.png") center / cover no-repeat;
  border: 1px solid rgba(214, 198, 157, 0.12);
  display: grid;
  align-content: space-between;
  gap: 14px;
}

.title-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(13, 17, 19, 0.08), rgba(13, 17, 19, 0.74)),
    linear-gradient(90deg, rgba(15, 16, 18, 0.48), transparent 24%, transparent 76%, rgba(15, 16, 18, 0.38));
}

.title-scene-copy,
.title-feature {
  position: relative;
  z-index: 1;
}

.title-scene-copy {
  display: grid;
  gap: 8px;
  justify-items: start;
}

.title-scene-copy.threat {
  justify-items: end;
}

.title-sprite-line,
.title-feature-list,
.adventurer-card,
.adventurer-card-copy,
.adventurer-card-stage,
.adventurer-card-tags,
.choice-card-body,
.choice-card-meta {
  display: grid;
  gap: 8px;
}

.title-sprite-line {
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 10px;
}

.sprite-chip {
  display: inline-grid;
  gap: 6px;
  align-items: center;
  justify-items: center;
  min-width: 88px;
  padding: 10px 8px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--chip-accent) 44%, rgba(214, 198, 157, 0.16));
  background: linear-gradient(180deg, rgba(15, 17, 20, 0.86), rgba(7, 10, 12, 0.9));
  backdrop-filter: blur(5px);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.22);
}

.sprite-chip.tone-cold {
  background: linear-gradient(180deg, rgba(12, 17, 23, 0.88), rgba(8, 10, 13, 0.92));
}

.sprite-chip-frame {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

.sprite-chip-label {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.title-feature-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.title-feature {
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(214, 198, 157, 0.08);
  align-content: start;
}

.title-feature-copy {
  color: var(--text-dim);
  font-size: 0.84rem;
  line-height: 1.45;
}

.title-save-panel {
  display: grid;
  gap: 12px;
  min-height: 100%;
}

.title-save-summary {
  gap: 10px;
}

.title-save-name {
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
}

.title-save-meta {
  color: var(--accent-strong);
  line-height: 1.45;
}

.title-actions {
  justify-content: flex-start;
  margin-top: 16px;
}

.choice-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  text-align: left;
}

.choice-card-art {
  display: grid;
  place-items: center;
}

.choice-art-frame {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--choice-accent) 44%, rgba(214, 198, 157, 0.16));
  background: linear-gradient(180deg, rgba(19, 22, 25, 0.94), rgba(8, 10, 13, 0.98));
}

.choice-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(214, 198, 157, 0.12);
  color: var(--accent-strong);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.choice-title {
  margin: 0;
}

.choice-note {
  color: var(--text-dim);
  line-height: 1.45;
}

.adventurer-card {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--adventurer-accent) 20%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(22, 25, 28, 0.96), rgba(10, 12, 14, 0.98));
  border: 1px solid rgba(214, 198, 157, 0.12);
}

.adventurer-card.compact {
  padding: 12px;
  border-radius: 20px;
}

.adventurer-card-kicker {
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.adventurer-card-name {
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  font-size: 1.18rem;
  font-weight: 700;
}

.adventurer-card-summary,
.adventurer-card-detail {
  color: var(--text-dim);
  font-size: 0.84rem;
  line-height: 1.45;
}

.adventurer-card-stage {
  align-content: center;
}

.adventurer-portrait-frame {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 108px;
  min-height: 108px;
  padding: 14px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top, color-mix(in srgb, var(--adventurer-accent-soft) 26%, transparent), transparent 54%),
    linear-gradient(180deg, rgba(36, 20, 25, 0.34), rgba(10, 13, 16, 0.86));
  border: 1px solid rgba(214, 198, 157, 0.12);
}

.adventurer-card.compact .adventurer-portrait-frame {
  min-width: 96px;
  min-height: 96px;
  padding: 12px;
}

.adventurer-race-seal {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 6px;
  border-radius: 999px;
  background: rgba(8, 11, 13, 0.88);
  border: 1px solid rgba(214, 198, 157, 0.12);
  color: var(--accent-strong);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.adventurer-race-sprite {
  filter: none;
}

.pack-equipment-panel .adventurer-card,
.floating-capsule .adventurer-card {
  margin-bottom: 12px;
}

@media (max-width: 780px) {
  .title-screen-grid,
  .adventurer-card,
  .adventurer-card.compact {
    grid-template-columns: 1fr;
  }

  .title-scene {
    min-height: 208px;
    padding: 12px;
  }

  .title-feature-list {
    grid-template-columns: 1fr;
  }

  .title-feature {
    padding: 10px 12px;
  }

  .title-feature-copy {
    font-size: 0.8rem;
  }

  .title-sprite-line {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .title-scene-copy,
  .title-scene-copy.threat {
    justify-items: stretch;
  }
}

@media (min-width: 920px) {
  .hub-summary-compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pack-layout {
    grid-template-columns: minmax(300px, 1fr) minmax(320px, 1fr) minmax(320px, 1.1fr);
    align-items: start;
  }

  .pack-inspector-panel,
  .pack-equipment-panel,
  .pack-inventory-panel {
    order: initial;
  }

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

  .pack-list-panel {
    max-height: 56vh;
  }

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

@media (max-width: 640px) {
  .utility-bar {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  #controller-status {
    display: none;
  }

  .hub-tabs {
    gap: 6px;
  }

  .hub-tab {
    min-height: 40px;
    border-radius: 14px;
  }

  .hub-summary-compact {
    gap: 6px;
  }

  .mini-panel {
    min-height: 66px;
    padding: 9px;
  }

  .pack-list-panel {
    max-height: 30vh;
  }

  .magic-card-actions .menu-button {
    width: 100%;
  }
}

/* Readability-first layout override */

:root {
  --classic-bg: #101112;
  --classic-panel: #17191b;
  --classic-panel-2: #1f2225;
  --classic-border: #383d43;
  --classic-border-strong: #666d76;
  --classic-text: #e7e2d7;
  --classic-text-dim: #b7b0a4;
  --classic-gold: #c89d55;
  --classic-gold-2: #e1c48b;
}

.hidden {
  display: none !important;
}

body {
  background: linear-gradient(180deg, #171819 0%, #0f1113 100%);
  color: var(--classic-text);
  font-family: "Trebuchet MS", "Verdana", sans-serif;
}

.mobile-app {
  max-width: 1240px;
  padding: 10px;
  gap: 8px;
}

.top-band,
.bottom-band,
.board-stage,
.title-screen,
.creation-sheet {
  border-radius: 0;
  border: 1px solid var(--classic-border-strong);
  background: linear-gradient(180deg, var(--classic-panel-2), var(--classic-panel));
  box-shadow: none;
}

.top-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
}

.top-band-status,
.top-band-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.top-band-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.utility-chip,
.utility-menu-button {
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 0;
  border: 1px solid var(--classic-border-strong);
  background: linear-gradient(180deg, #272c31, #1a1d20);
  color: var(--classic-text);
  font-size: 0.78rem;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.08);
}

.utility-run-status {
  max-width: 48ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.save-stamp-chip {
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.play-layout,
.board-cluster {
  gap: 8px;
}

.board-stage {
  padding: 6px;
}

.board-frame {
  border-radius: 0;
  border: 1px solid #4d535a;
  background: #070809;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

.board-frame::after {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 8%, transparent 92%, rgba(0,0,0,0.24));
}

#game-canvas {
  min-height: min(72vh, 820px);
  background: #040506;
}

.bottom-band {
  display: grid;
  gap: 8px;
  padding: 8px;
}

.status-band {
  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) minmax(320px, 1fr);
  gap: 8px;
}

.field-summary,
.stat-band,
.message-log,
.map-drawer-inner {
  border: 1px solid var(--classic-border);
  background: linear-gradient(180deg, #121416, #0f1113);
  padding: 8px 10px;
}

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

.field-summary-state,
.advisor-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.advisor-label {
  color: var(--classic-gold);
}

.field-summary-state {
  color: var(--classic-text-dim);
}

.field-summary-text,
.field-summary-support {
  margin-top: 4px;
  line-height: 1.35;
  font-size: 0.84rem;
}

.field-summary-support {
  color: var(--classic-text-dim);
}

.stat-band {
  display: grid;
  gap: 6px;
}

.stat-band-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.8rem;
  text-transform: uppercase;
}

.stat-band-name {
  color: var(--classic-gold-2);
  font-weight: 700;
}

.stat-band-role {
  color: var(--classic-text-dim);
}

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

.stat-band-cell {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.8rem;
}

.stat-band-cell span {
  color: var(--classic-text-dim);
}

.stat-band-cell strong {
  color: var(--classic-text);
}

.stat-meter-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}

.stat-meter-label {
  font-size: 0.72rem;
  color: var(--classic-text-dim);
}

.meter {
  height: 10px;
  border-radius: 0;
  border: 1px solid var(--classic-border);
  background: #0b0d0f;
}

.meter span {
  display: block;
  height: 100%;
}

.message-log {
  display: grid;
  gap: 4px;
  min-height: 110px;
  max-height: 150px;
  overflow: auto;
  font-size: 0.82rem;
}

.event-ticker-line {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 0;
  border: 0;
}

.event-ticker-turn {
  color: var(--classic-gold);
  font-size: 0.72rem;
}

.event-ticker-text,
.event-ticker-empty {
  color: var(--classic-text);
  font-size: 0.82rem;
}

.event-ticker-banner {
  display: none;
}

.classic-action-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.dock-slot,
.action-button,
.menu-button,
.tiny-button,
.pad-button {
  border-radius: 0;
  border: 1px solid var(--classic-border-strong);
  background: linear-gradient(180deg, #31363c, #1d2125);
  color: var(--classic-text);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.08);
}

.dock-slot {
  min-height: 54px;
  padding: 7px 9px;
  text-align: left;
}

.dock-slot.recommended {
  background: linear-gradient(180deg, #6a5327, #473719);
  border-color: #8a6a35;
}

.context-slot {
  color: var(--classic-gold-2);
  font-size: 0.72rem;
}

.context-main {
  font-size: 0.9rem;
  font-weight: 700;
}

.context-note {
  font-size: 0.74rem;
  color: var(--classic-text-dim);
}

.map-drawer {
  display: block;
}

.map-drawer-inner {
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

#map-canvas {
  width: 164px;
  height: 164px;
  max-height: none;
  border-radius: 0;
  border: 1px solid var(--classic-border-strong);
  background: #0a0b0d;
}

.mini-caption {
  border-radius: 0;
  box-shadow: none;
  border: 0;
  background: transparent;
  padding: 0;
}

.touch-controls {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.touch-pad {
  width: min(260px, 100%);
}

.pad-button {
  min-height: 44px;
}

.title-screen {
  width: min(760px, 100%);
  padding: 14px;
}

.title-launcher {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
  gap: 12px;
  align-items: stretch;
}

.title-launcher-main,
.title-save-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--classic-border);
  background: linear-gradient(180deg, #111315, #0d0f10);
}

.title-launcher-head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.title-crest {
  width: 42px;
  height: 42px;
  image-rendering: pixelated;
  border: 1px solid var(--classic-border-strong);
  background: #0d0f10;
}

.title-screen-heading {
  max-width: none;
  font-family: "Georgia", "Palatino Linotype", serif;
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  line-height: 0.92;
}

.title-screen-copy,
.title-note,
.title-save-meta {
  color: var(--classic-text-dim);
  font-size: 0.86rem;
  line-height: 1.45;
}

.title-launcher-notes {
  display: grid;
  gap: 6px;
}

.title-note {
  padding: 7px 8px;
  border: 1px solid var(--classic-border);
  background: #141719;
}

.title-actions {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 12px;
}

.creation-sheet {
  width: min(880px, 100%);
  padding: 14px;
}

.creation-sheet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 12px;
}

.creation-sheet-main,
.creation-sheet-preview {
  display: grid;
  gap: 12px;
}

.creation-preview,
.field-input,
.text-block,
.choice-card,
.choice-art-frame {
  border-radius: 0;
  box-shadow: none;
}

.creation-preview,
.text-block {
  border: 1px solid var(--classic-border);
  background: linear-gradient(180deg, #121416, #0f1113);
}

.choice-card {
  padding: 10px;
  gap: 10px;
}

.choice-art-frame {
  width: 48px;
  height: 48px;
  border: 1px solid var(--classic-border-strong);
  background: #0f1113;
}

.pixel-sprite {
  filter: none;
}

.title-scene,
.title-feature-list,
.floating-capsule,
.advisor-strip,
.event-ticker.panel,
.footer-dock,
.hud-dock,
.utility-bar {
  box-shadow: none;
}

@media (max-width: 960px) {
  .status-band,
  .title-launcher,
  .creation-sheet-grid,
  .map-drawer-inner {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 640px) {
  .top-band {
    display: grid;
    grid-template-columns: 1fr;
  }

  .top-band-status,
  .top-band-actions {
    flex-wrap: wrap;
  }

  .save-stamp-chip {
    max-width: 100%;
  }

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

  .stat-meter-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

.title-launcher-head {
  grid-template-columns: 42px minmax(0, 1fr);
}
}

.status-band {
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1.1fr) minmax(320px, 0.9fr);
}

.objective-band {
  border-radius: 18px;
  border: 1px solid rgba(216, 194, 154, 0.14);
  background: linear-gradient(180deg, rgba(22, 28, 33, 0.96), rgba(15, 20, 24, 0.98));
  padding: 12px 14px;
  display: grid;
  gap: 7px;
}

.objective-band-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.objective-band-state {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ui-text-dim);
}

.objective-band-state.tone-good {
  color: #a9d4b2;
}

.objective-band-state.tone-warning {
  color: #f0d287;
}

.objective-band-state.tone-bad {
  color: #f1b19f;
}

.objective-band-line {
  font-size: 0.9rem;
  line-height: 1.32;
  color: var(--ui-text);
}

.objective-band-line.muted-line {
  color: var(--ui-text-dim);
  font-size: 0.82rem;
}

.objective-band-line.accent-line {
  color: #ffd7bf;
  font-size: 0.82rem;
}

.board-overlays {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.board-overlays > * {
  pointer-events: auto;
}

.spell-tray {
  position: absolute;
  top: 12px;
  left: 12px;
  width: min(340px, calc(100% - 84px));
  max-height: calc(100% - 72px);
  overflow: auto;
  border-radius: 20px;
  border: 1px solid rgba(216, 194, 154, 0.18);
  background:
    linear-gradient(180deg, rgba(13, 18, 21, 0.96), rgba(10, 12, 15, 0.98)),
    radial-gradient(circle at top left, rgba(214, 170, 88, 0.12), transparent 32%);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(12px);
}

.spell-tray.hidden {
  display: none;
}

.spell-tray-shell {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.spell-tray-header,
.spell-tray-summary-head,
.spell-tray-card-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}

.spell-tray-kicker {
  color: var(--text-dim);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.spell-tray-title {
  font-family: "Cinzel", "Trebuchet MS", serif;
  font-size: 1rem;
}

.spell-tray-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.spell-tray-summary {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(216, 194, 154, 0.14);
  background: rgba(255, 255, 255, 0.03);
}

.spell-tray-summary.valid {
  border-color: rgba(159, 208, 255, 0.24);
}

.spell-tray-summary.invalid {
  border-color: rgba(240, 124, 103, 0.34);
}

.spell-tray-summary-head span,
.spell-tray-summary-note,
.spell-tray-card-cost {
  color: var(--text-dim);
  font-size: 0.74rem;
}

.spell-tray-summary-copy,
.spell-tray-card-copy {
  font-size: 0.8rem;
  line-height: 1.4;
}

.spell-tray-summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.spell-tray-summary-actions .tiny-button {
  flex: 1 1 96px;
}

.spell-tray-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: 8px;
}

.spell-tray-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 60px;
  padding: 0;
  border-radius: 16px;
  border: 1px solid rgba(216, 194, 154, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  text-align: center;
}

.spell-tray-card.active {
  border-color: rgba(255, 177, 111, 0.34);
  background: linear-gradient(180deg, rgba(58, 33, 22, 0.55), rgba(21, 17, 18, 0.8));
}

.spell-tray-card-symbol {
  font-size: 1.45rem;
  line-height: 1;
  color: #f4d79f;
}

.spell-tray-card.warning .spell-tray-card-symbol {
  color: var(--warning);
}

#event-ticker.message-log {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  min-height: 168px;
  max-height: 168px;
  padding: 10px 12px;
  display: grid;
  grid-auto-rows: minmax(0, auto);
  gap: 6px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border-radius: 14px;
  border: 1px solid rgba(216, 194, 154, 0.18);
  background:
    linear-gradient(180deg, rgba(13, 18, 21, 0.92), rgba(10, 12, 15, 0.96)),
    radial-gradient(circle at top left, rgba(214, 170, 88, 0.08), transparent 34%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(10px);
  pointer-events: auto;
}

#event-ticker.message-log.hidden {
  display: none;
}

.inline-modal-actions {
  margin-top: 10px;
}

.onboarding-checklist {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(216, 194, 154, 0.14);
}

.onboarding-checklist-label {
  color: var(--ui-text-dim);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.onboarding-step-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.onboarding-step {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(216, 194, 154, 0.16);
  background: rgba(27, 32, 40, 0.88);
  color: var(--ui-text-dim);
  font-size: 0.76rem;
}

.onboarding-step.active {
  border-color: rgba(242, 194, 103, 0.44);
  background: rgba(79, 56, 20, 0.56);
  color: #ffe4b2;
}

.onboarding-step.done {
  border-color: rgba(125, 208, 172, 0.32);
  background: rgba(23, 56, 45, 0.68);
  color: #cbeedd;
}

@media (max-width: 960px) {
  .status-band {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
#event-ticker.message-log {
    left: 10px;
    right: 10px;
    bottom: 10px;
    min-height: 156px;
    max-height: 156px;
  }
}

/* Pack screen refinement */

#modal-root .modal:has(.hub-window-pack) {
  width: min(1120px, 100%);
  max-height: 90vh;
}

.hub-window-pack {
  gap: 8px;
}

.hub-window-pack .hub-body-pack {
  gap: 10px;
}

.hub-window-pack .hub-summary-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hub-window-pack .mini-panel {
  min-height: 64px;
  padding: 8px 10px;
}

.hub-window-pack .mini-panel-note {
  display: block;
  margin-top: 4px;
  color: var(--classic-text-dim);
  font-size: 0.74rem;
}

.hub-window-pack .pack-layout {
  grid-template-columns: minmax(220px, 0.78fr) minmax(360px, 1.15fr) minmax(280px, 0.92fr);
  gap: 10px;
}

.hub-window-pack .pack-equipment-panel {
  order: 1;
}

.hub-window-pack .pack-inventory-panel {
  order: 2;
}

.hub-window-pack .pack-inspector-panel {
  order: 3;
}

.pack-equipment-summary {
  display: grid;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--classic-border);
  background: #121416;
}

.pack-equipment-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--classic-gold-2);
}

.pack-equipment-copy {
  color: var(--classic-text-dim);
  font-size: 0.78rem;
  line-height: 1.35;
}

.hub-window-pack .pack-paperdoll {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.hub-window-pack .paper-slot {
  min-height: 68px;
  padding: 8px 9px;
}

.hub-window-pack .paper-slot-label {
  font-size: 0.66rem;
}

.hub-window-pack .paper-slot-item {
  font-size: 0.78rem;
}

.hub-window-pack .paper-slot-note,
.hub-window-pack .paper-slot-quality {
  font-size: 0.68rem;
}

.hub-window-pack .pack-list-panel {
  max-height: 44vh;
  padding: 6px;
}

.hub-window-pack .pack-item-row {
  padding: 8px 9px;
  gap: 3px;
}

.hub-window-pack .pack-item-head {
  gap: 6px;
}

.hub-window-pack .pack-item-name {
  font-size: 0.84rem;
}

.hub-window-pack .pack-item-meta,
.hub-window-pack .pack-item-reason,
.hub-window-pack .pack-item-note {
  font-size: 0.7rem;
  line-height: 1.3;
}

.hub-window-pack .pack-inspector-panel {
  position: sticky;
  top: 0;
  align-self: start;
}

.hub-window-pack .pack-inspector-card {
  padding: 10px;
}

.hub-window-pack .pack-inspector-title {
  font-size: 0.96rem;
}

.hub-window-pack .pack-stat-grid {
  gap: 6px;
}

.hub-window-pack .item-chip,
.hub-window-pack .pack-stat-pill,
.hub-window-pack .pack-ready-chip {
  font-size: 0.68rem;
  padding: 4px 6px;
}

.hub-window-pack .pack-field-note {
  padding: 8px 10px;
  font-size: 0.74rem;
}

@media (max-width: 960px) {
  #modal-root .modal:has(.hub-window-pack) {
    width: min(920px, 100%);
  }

  .hub-window-pack .pack-layout {
    grid-template-columns: 1fr;
  }

  .hub-window-pack .pack-inspector-panel {
    position: static;
  }

  .hub-window-pack .hub-summary-compact {
    grid-template-columns: 1fr;
  }
}

html.controller-active button:focus,
html.controller-active input:focus,
html.controller-active select:focus,
html.controller-active textarea:focus,
html.controller-active [tabindex]:focus {
  outline: none;
  box-shadow:
    inset 0 0 0 2px #fff6d8,
    0 0 0 2px #0d1013,
    0 0 0 4px #d89f3b;
  border-color: #f0cf84 !important;
}

html.controller-active .pack-item-row:focus,
html.controller-active .paper-slot:focus,
html.controller-active .hub-tab:focus,
html.controller-active .hub-filter-chip:focus,
html.controller-active .spell-learn-card:focus,
html.controller-active .choice-card:focus,
html.controller-active .dock-slot:focus,
html.controller-active .utility-menu-button:focus {
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(109, 82, 33, 0.92), rgba(52, 38, 16, 0.96));
  color: #fff6d8;
}

html.controller-active #map-canvas:focus {
  box-shadow:
    inset 0 0 0 2px #fff6d8,
    0 0 0 2px #0d1013,
    0 0 0 4px #d89f3b;
}

/* Field kit polish override */

:root {
  --ui-bg: #0d1114;
  --ui-bg-2: #13191d;
  --surface-base: rgba(18, 24, 28, 0.92);
  --surface-raised: rgba(24, 31, 36, 0.94);
  --surface-sheet: rgba(16, 22, 27, 0.97);
  --ui-border: rgba(173, 151, 111, 0.3);
  --ui-border-strong: rgba(201, 172, 110, 0.55);
  --ui-text: #f0e7d5;
  --ui-text-dim: #b9ae99;
  --ui-accent: #c69a49;
  --ui-accent-soft: rgba(198, 154, 73, 0.18);
  --ui-blue: #79aecd;
  --ui-blue-soft: rgba(121, 174, 205, 0.2);
  --ui-danger: #c36c58;
  --ui-danger-soft: rgba(195, 108, 88, 0.18);
  --font-ui: "Alegreya Sans", "Trebuchet MS", "Verdana", sans-serif;
  --font-display: "Cinzel", "Georgia", "Palatino Linotype", serif;
}

body {
  background:
    radial-gradient(circle at top, rgba(198, 154, 73, 0.08), transparent 28%),
    radial-gradient(circle at 20% 20%, rgba(121, 174, 205, 0.08), transparent 24%),
    linear-gradient(180deg, #0d1216 0%, #070b0d 100%);
  color: var(--ui-text);
  font-family: var(--font-ui);
}

.mobile-app {
  max-width: 1320px;
  gap: 12px;
  padding: 12px;
}

.top-band,
.bottom-band,
.board-stage,
.title-screen,
.creation-sheet,
.mobile-sheet {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--ui-border);
  background:
    linear-gradient(180deg, rgba(30, 37, 43, 0.9), rgba(13, 18, 22, 0.95)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.02), transparent 45%);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 244, 219, 0.05);
}

.top-band::before,
.bottom-band::before,
.board-stage::before,
.title-screen::before,
.creation-sheet::before,
.mobile-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at top left, rgba(198, 154, 73, 0.08), transparent 34%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.02), transparent 26%);
}

.top-band > *,
.bottom-band > *,
.board-stage > *,
.title-screen > *,
.creation-sheet > *,
.mobile-sheet > * {
  position: relative;
  z-index: 1;
}

.top-band {
  min-height: 56px;
  padding: 10px 12px;
  gap: 10px;
}

.top-band-status {
  flex: 1;
  min-width: 0;
}

.top-band-actions {
  flex: 0 0 auto;
}

.utility-chip,
.utility-menu-button,
.action-button,
.menu-button,
.tiny-button,
.pad-button,
.hub-tab,
.hub-filter-chip,
.paper-slot,
.pack-item-row,
.spell-learn-card,
.choice-card {
  font-family: var(--font-ui);
}

.utility-chip,
.utility-menu-button {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(216, 194, 154, 0.18);
  background:
    linear-gradient(180deg, rgba(36, 44, 50, 0.96), rgba(18, 23, 28, 0.96));
  color: var(--ui-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 237, 0.07),
    0 8px 18px rgba(0, 0, 0, 0.18);
}

.utility-menu-button {
  font-weight: 700;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.utility-menu-button:hover,
.action-button:hover,
.menu-button:hover,
.tiny-button:hover,
.hub-tab:hover,
.hub-filter-chip:hover,
.paper-slot:hover,
.pack-item-row:hover {
  transform: translateY(-1px);
  border-color: rgba(216, 194, 154, 0.34);
}

.utility-run-status {
  max-width: none;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.play-layout,
.board-cluster {
  gap: 12px;
}

.board-stage {
  padding: 14px;
}

.board-frame {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(216, 194, 154, 0.14);
  background: #050709;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 30px 70px rgba(0, 0, 0, 0.42);
}

.board-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(circle at center, transparent 58%, rgba(0, 0, 0, 0.26) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 10%, transparent 88%, rgba(0, 0, 0, 0.28));
}

#game-canvas {
  min-height: min(76vh, 860px);
  background: #040506;
}

.board-overlays {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 4;
  display: grid;
  justify-items: end;
  gap: 10px;
  pointer-events: none;
}

.board-overlays > * {
  pointer-events: auto;
}

.map-chip-button {
  min-width: 0;
  min-height: 28px;
  padding: 5px 9px;
  font-size: 0.72rem;
  background:
    linear-gradient(180deg, rgba(46, 56, 64, 0.96), rgba(18, 23, 28, 0.96));
  backdrop-filter: blur(12px);
}

.spell-chip-button {
  margin-top: 38px;
}

.map-drawer {
  display: block;
  width: min(248px, 42vw);
}

.map-drawer-inner {
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 12px;
  border-radius: 20px;
  border: 1px solid rgba(216, 194, 154, 0.18);
  background:
    linear-gradient(180deg, rgba(13, 18, 22, 0.96), rgba(8, 11, 14, 0.98));
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

#map-canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  border: 1px solid rgba(216, 194, 154, 0.18);
  background: #0a0d10;
}

.mini-caption {
  display: grid;
  gap: 6px;
  padding: 0;
}

.map-caption-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.map-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(216, 194, 154, 0.14);
  background: rgba(24, 31, 36, 0.92);
  color: var(--ui-text);
  font-size: 0.72rem;
}

.map-chip.subtle {
  color: var(--ui-text-dim);
}

.bottom-band {
  gap: 10px;
  padding: 12px;
}

.status-band {
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.95fr);
  gap: 10px;
}

.map-panel,
.field-summary,
.stat-band,
.message-log,
.inventory-list-panel,
.inventory-detail,
.mini-panel,
.pack-inspector-card,
.text-block,
.creation-preview,
.utility-menu-panel,
.title-screen-panel,
.title-save-summary {
  border-radius: 18px;
  border: 1px solid rgba(216, 194, 154, 0.14);
  background:
    linear-gradient(180deg, rgba(17, 22, 27, 0.94), rgba(10, 13, 17, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.map-panel,
.field-summary,
.stat-band,
.message-log {
  padding: 12px 14px;
}

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

.map-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.map-panel #map-canvas {
  width: 100%;
  max-width: 100%;
  max-height: min(360px, 44vh);
  border-radius: 18px;
}

.map-panel .mini-caption {
  gap: 8px;
}

.map-panel .map-caption-row {
  align-items: center;
}

.panel-title,
.modal-title,
.field-label,
.title-screen-kicker,
.title-feature-kicker,
.title-scene-label,
.advisor-label,
.status-pill-label,
.pack-inspector-kicker {
  font-family: var(--font-display);
  letter-spacing: 0.1em;
}

.field-summary-head {
  align-items: center;
  gap: 12px;
}

.advisor-label,
.field-summary-state {
  font-size: 0.7rem;
}

.advisor-label {
  color: var(--ui-accent);
}

.field-summary-state {
  color: var(--ui-text-dim);
}

.field-brief-text {
  margin-top: 8px;
  font-size: 1rem;
  line-height: 1.34;
  color: var(--ui-text);
}

.field-brief-support {
  margin-top: 6px;
  color: var(--ui-text-dim);
  font-size: 0.83rem;
  line-height: 1.4;
}

.field-brief-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(216, 194, 154, 0.18);
  background: linear-gradient(180deg, rgba(76, 57, 26, 0.24), rgba(17, 22, 27, 0.92));
  color: var(--ui-text);
  font-size: 0.84rem;
  line-height: 1.3;
}

.field-brief-cta strong {
  color: #f8efdc;
}

.stat-band {
  gap: 10px;
}

.stat-band-head {
  align-items: center;
  margin-bottom: 0;
}

.stat-band-name {
  color: #f3ddb1;
  font-size: 1rem;
}

.stat-band-role {
  color: var(--ui-text-dim);
  font-size: 0.82rem;
}

.rail-stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.rail-stat-pill {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 10px 11px;
  border-radius: 14px;
  border: 1px solid rgba(216, 194, 154, 0.12);
  background:
    linear-gradient(180deg, rgba(30, 37, 43, 0.9), rgba(13, 18, 22, 0.94));
}

.rail-stat-pill span {
  color: var(--ui-text-dim);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rail-stat-pill strong {
  font-size: 0.98rem;
  color: var(--ui-text);
}

.rail-stat-pill.tone-health {
  border-color: rgba(214, 132, 108, 0.22);
}

.rail-stat-pill.tone-mana {
  border-color: rgba(121, 174, 205, 0.24);
}

.rail-stat-pill.tone-load {
  border-color: rgba(198, 154, 73, 0.24);
}

.rail-stat-pill.tone-meta {
  border-color: rgba(150, 183, 166, 0.2);
}

.rail-meter {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}

.rail-meter span {
  display: block;
  height: 100%;
}

.rail-meter.hp span {
  background: linear-gradient(90deg, #d67b66, #f0a18e);
}

.rail-meter.mana span {
  background: linear-gradient(90deg, #5d88a2, #86bfdc);
}

.rail-meter.xp span {
  background: linear-gradient(90deg, #b08d4a, #e1c27a);
}

.character-sheet {
  display: grid;
  gap: 14px;
}

.character-sheet-hero {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(216, 194, 154, 0.14);
  background:
    linear-gradient(180deg, rgba(33, 40, 45, 0.94), rgba(16, 21, 24, 0.96));
}

.character-sheet-name {
  font-family: "Cinzel", serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ui-text);
}

.character-sheet-subtitle,
.character-sheet-meter-note {
  color: var(--ui-text-dim);
  font-size: 0.82rem;
  line-height: 1.45;
}

.character-sheet-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

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

.character-sheet-section {
  display: grid;
  gap: 8px;
}

.character-sheet-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(62, 77, 68, 0.56);
  border: 1px solid rgba(148, 160, 144, 0.15);
}

.character-sheet-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  font-size: 0.84rem;
}

.character-sheet-row > :last-child {
  justify-self: end;
}

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

.message-log {
  min-height: auto;
  max-height: none;
  overflow: hidden;
  display: grid;
  gap: 6px;
}

.event-ticker-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 24px;
}

.event-ticker-turn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(198, 154, 73, 0.14);
  color: var(--ui-accent);
  font-size: 0.72rem;
}

.event-ticker-text,
.event-ticker-empty {
  display: block;
  color: var(--ui-text);
  font-size: 0.88rem;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}

.event-ticker-line {
  align-items: start;
}

.ticker-warning .event-ticker-turn {
  background: var(--ui-danger-soft);
  color: #f1b19f;
}

.ticker-good .event-ticker-turn {
  background: rgba(119, 169, 130, 0.16);
  color: #a9d4b2;
}

.ticker-context .event-ticker-turn {
  background: rgba(105, 122, 145, 0.16);
  color: #b7c7da;
}

.ticker-context .event-ticker-text {
  color: var(--ui-text-dim);
}

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

.dock-slot {
  min-height: 82px;
  padding: 12px 12px 11px;
  text-align: left;
  border-radius: 18px;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.dock-slot:hover,
.dock-slot:focus-visible {
  transform: translateY(-2px);
}

.dock-tone-primary {
  border-color: rgba(198, 154, 73, 0.34);
  background:
    linear-gradient(180deg, rgba(73, 58, 33, 0.95), rgba(41, 31, 18, 0.97));
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 202, 0.08),
    0 14px 28px rgba(0, 0, 0, 0.22);
}

.dock-tone-secondary {
  border-color: rgba(216, 194, 154, 0.14);
  background:
    linear-gradient(180deg, rgba(38, 46, 53, 0.94), rgba(17, 22, 27, 0.96));
}

.dock-tone-utility {
  border-color: rgba(121, 174, 205, 0.24);
  background:
    linear-gradient(180deg, rgba(29, 44, 53, 0.94), rgba(15, 21, 26, 0.96));
}

.context-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: #f6dfb3;
  font-size: 0.72rem;
}

.context-copy {
  display: grid;
  gap: 4px;
}

.context-main {
  font-size: 1rem;
  line-height: 1.05;
}

.context-note {
  color: var(--ui-text-dim);
  line-height: 1.25;
}

.touch-controls {
  justify-self: start;
}

.touch-pad {
  width: min(272px, 100%);
  gap: 8px;
}

.pad-button {
  min-height: 46px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(37, 45, 51, 0.95), rgba(14, 18, 21, 0.97));
}

.title-screen {
  width: min(1240px, calc(100vw - 24px));
  padding: 0;
  overflow: hidden;
}

.title-screen-grid {
  display: block;
}

.title-showcase-panel {
  position: relative;
  display: grid;
  align-content: stretch;
  min-height: 720px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: #081019;
}

.title-cinematic-backdrop {
  position: absolute;
  inset: 0;
}

.title-cinematic-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 216, 158, 0.44), transparent 24%),
    linear-gradient(92deg, rgba(4, 8, 14, 0.74) 0%, rgba(5, 9, 15, 0.34) 36%, rgba(6, 10, 16, 0.04) 58%, rgba(4, 7, 12, 0.52) 100%),
    linear-gradient(180deg, rgba(5, 8, 13, 0.04) 0%, rgba(5, 8, 13, 0.08) 34%, rgba(4, 7, 12, 0.74) 100%);
}

.title-cinematic-media {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  filter: saturate(1.12) contrast(1.06) brightness(0.82);
  transform: scale(1.02);
}

.title-showcase-content {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 34px;
}

.title-launcher-copy {
  display: grid;
  gap: 10px;
  max-width: min(31rem, 100%);
}

.title-launcher-copy-hero {
  margin-top: 8px;
}

.title-screen-kicker,
.title-save-label {
  color: #f2d69d;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.title-screen-heading {
  margin: 0;
  max-width: 8ch;
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 6.8rem);
  line-height: 0.84;
  color: #fff5de;
  text-wrap: balance;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.4);
}

.title-screen-copy {
  max-width: 22rem;
  color: rgba(246, 237, 218, 0.9);
  font-size: 1.05rem;
  line-height: 1.5;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.36);
}

.title-save-summary {
  width: fit-content;
  max-width: min(100%, 320px);
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(245, 225, 186, 0.14);
  background:
    linear-gradient(180deg, rgba(10, 15, 22, 0.72), rgba(7, 10, 15, 0.88));
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22);
}

.title-save-summary.hidden {
  display: none;
}

.title-save-card {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.title-save-label {
  color: #f2d69d;
}

.title-save-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: #f7e8c4;
}

.title-save-meta {
  color: rgba(230, 220, 198, 0.84);
  line-height: 1.35;
}

.title-save-card:hover .title-save-name,
.title-save-card:focus-visible .title-save-name {
  color: #fff0ca;
}

.title-save-card:focus-visible {
  outline: 2px solid rgba(255, 220, 159, 0.9);
  outline-offset: 8px;
  border-radius: 12px;
}

.title-hero-footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
}

.title-actions {
  margin-top: 0;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.action-button,
.menu-button,
.tiny-button {
  border-radius: 16px;
  border: 1px solid rgba(216, 194, 154, 0.18);
  background:
    linear-gradient(180deg, rgba(43, 51, 58, 0.94), rgba(17, 22, 27, 0.97));
  color: var(--ui-text);
  box-shadow: inset 0 1px 0 rgba(255, 250, 237, 0.05);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.action-button.primary,
.menu-button.pack-action-primary {
  border-color: rgba(198, 154, 73, 0.36);
  background:
    linear-gradient(180deg, rgba(89, 69, 36, 0.97), rgba(49, 37, 20, 0.98));
}

.title-help-link {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: rgba(245, 234, 213, 0.82);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.creation-sheet {
  width: min(1040px, 100%);
  padding: 18px;
}

.creation-intro {
  margin-bottom: 14px;
}

.creation-sheet-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 14px;
}

.creation-sheet-main,
.creation-sheet-preview {
  gap: 14px;
}

.creation-sheet-preview {
  position: sticky;
  top: 0;
  align-self: start;
}

.field-input,
.choice-card,
.choice-art-frame,
.creation-preview,
.text-block {
  border-radius: 18px;
}

.field-input,
.creation-preview,
.text-block {
  padding: 14px;
}

.choice-card {
  border: 1px solid rgba(216, 194, 154, 0.12);
  background:
    linear-gradient(180deg, rgba(21, 28, 33, 0.94), rgba(11, 15, 18, 0.96));
}

.choice-card.active,
.hub-tab.active,
.hub-filter-chip.active,
.paper-slot.active,
.pack-item-row.active {
  border-color: rgba(198, 154, 73, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 241, 210, 0.06),
    0 10px 24px rgba(0, 0, 0, 0.2);
}

#modal-root .modal {
  border-radius: 24px;
  border: 1px solid var(--ui-border);
  background:
    linear-gradient(180deg, rgba(25, 31, 36, 0.98), rgba(10, 14, 18, 0.98));
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.42);
}

#modal-root .modal:has(.modal-body) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

#modal-root .modal:has(.modal-body) .modal-body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#modal-root .modal:has(.hub-window-pack),
#modal-root .modal:has(.hub-window-journal),
#modal-root .modal:has(.hub-window-magic) {
  width: min(1180px, 100%);
  height: min(92vh, 960px);
  max-height: min(92vh, 960px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

#modal-root .modal:has(.hub-window-pack) .modal-body,
#modal-root .modal:has(.hub-window-journal) .modal-body,
#modal-root .modal:has(.hub-window-magic) .modal-body {
  min-height: 0;
  overflow: auto;
}

.hub-window {
  display: grid;
  gap: 12px;
}

.hub-tabs {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  gap: 8px;
  padding-bottom: 4px;
  background: linear-gradient(180deg, rgba(25, 31, 36, 0.98), rgba(25, 31, 36, 0.72), transparent);
}

.hub-tab {
  min-height: 38px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(216, 194, 154, 0.14);
  background: rgba(24, 31, 36, 0.92);
  color: var(--ui-text-dim);
}

.hub-tab.active {
  background: rgba(78, 60, 31, 0.96);
  color: #f7e8c3;
}

.hub-window-pack .hub-body-pack {
  gap: 12px;
}

.hub-window-pack .hub-summary-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.hub-window-pack .mini-panel {
  min-height: 72px;
  padding: 10px 12px;
}

.hub-window-pack .pack-layout {
  grid-template-columns: minmax(250px, 0.9fr) minmax(0, 1.05fr) minmax(340px, 1.15fr);
  gap: 12px;
}

.hub-window-pack .pack-equipment-panel,
.hub-window-pack .pack-inventory-panel,
.hub-window-pack .pack-inspector-panel {
  align-self: start;
}

.hub-window-pack .pack-inspector-panel {
  position: sticky;
  top: 48px;
}

.pack-equipment-summary,
.pack-comparison-card,
.pack-risk-callout {
  border-radius: 16px;
}

.pack-list-panel {
  max-height: 52vh;
  padding: 8px;
}

.pack-item-row {
  border-radius: 14px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.02);
}

.pack-inspector-card {
  gap: 14px;
  padding: 16px;
  background:
    radial-gradient(circle at top left, rgba(198, 154, 73, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(27, 33, 39, 0.98), rgba(11, 16, 19, 0.99));
}

.pack-inspector-title {
  font-family: var(--font-display);
  font-size: 1.16rem;
  color: #f2dfbb;
}

.pack-inspector-actions {
  position: sticky;
  bottom: 0;
  padding-top: 12px;
  margin-top: 2px;
  background: linear-gradient(180deg, transparent, rgba(11, 16, 19, 0.92) 24%);
}

.hub-window-journal .hub-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.hub-window-journal .hub-summary,
.hub-window-journal .hub-section:has(.journal-log),
.hub-window-journal .utility-row {
  grid-column: 1 / -1;
}

.field-guide-kicker,
.journal-section-row,
.field-guide-layout {
  grid-column: 1 / -1;
}

.journal-section-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.journal-section-row .hub-filter-chip {
  min-height: 42px;
}

.field-guide-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.field-guide-layout .hub-section:has(.journal-log),
.field-guide-layout .hub-section:has(.section-block) {
  grid-column: 1 / -1;
}

.field-guide-layout .utility-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.journal-log {
  min-height: 220px;
  max-height: none;
  overflow: auto;
}

.utility-menu-sheet {
  width: min(760px, 100%);
}

.utility-menu-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.utility-menu-actions {
  grid-column: 1 / -1;
}

.utility-menu-panel {
  padding: 14px;
}

.utility-menu-title {
  font-family: var(--font-display);
  color: #f1ddb6;
  font-size: 1rem;
}

.utility-menu-meta {
  color: var(--ui-text-dim);
  line-height: 1.4;
}

@media (max-width: 980px) {
  .status-band,
  .creation-sheet-grid,
  .hub-window-journal .hub-body,
  .field-guide-layout,
  .utility-menu-body,
  .hub-window-pack .pack-layout {
    grid-template-columns: 1fr;
  }

  .utility-menu-group-grid {
    grid-template-columns: 1fr;
  }

  .journal-section-row,
  .field-guide-layout .utility-row {
    grid-template-columns: 1fr;
  }

  .hub-window-pack .pack-inspector-panel {
    position: static;
  }

  .title-showcase-panel {
    min-height: 640px;
  }

  .title-screen-heading {
    font-size: clamp(3.4rem, 10vw, 5.2rem);
  }

  .title-hero-footer {
    align-items: start;
    flex-direction: column;
  }
}

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

  .top-band {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .top-band-status {
    min-width: 0;
  }

  .rail-stat-row,
  .action-bar,
  .classic-action-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .title-screen {
    max-height: calc(100vh - 24px);
    overflow: auto;
  }

  .title-showcase-panel {
    min-height: 560px;
  }

  .title-showcase-content {
    padding: 22px 18px 18px;
  }

  .title-screen-heading {
    max-width: 7ch;
    font-size: clamp(3rem, 13vw, 4.1rem);
  }

  .title-screen-copy {
    max-width: 15rem;
    font-size: 0.98rem;
  }

  .title-actions {
    gap: 8px;
  }

  .board-overlays {
    top: 16px;
    right: 16px;
  }

  .map-drawer {
    width: min(78vw, 280px);
  }

  .creation-sheet-preview {
    position: static;
  }
}

@media (max-width: 640px) {
  .mobile-app {
    gap: 10px;
  }

  .top-band {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
  }

  .top-band-actions {
    justify-content: end;
  }

  .utility-chip,
  .utility-menu-button {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 0.74rem;
  }

  .board-stage {
    padding: 10px;
  }

  #game-canvas {
    min-height: min(62vh, 560px);
  }

  .field-summary,
  .stat-band,
  .message-log {
    padding: 11px 12px;
  }

  .field-brief-text,
  .event-ticker-text,
  .event-ticker-empty {
    font-size: 0.86rem;
  }

  .dock-slot {
    min-height: 74px;
    padding: 11px;
  }

  .title-showcase-content {
    padding: 18px 14px 14px;
  }

  .title-showcase-panel {
    min-height: 500px;
  }

  .title-screen-kicker,
  .title-save-label {
    font-size: 0.68rem;
  }

  .title-save-summary {
    max-width: 100%;
  }

  .title-actions {
    width: 100%;
  }

  .title-actions .action-button {
    flex: 1 1 auto;
  }

  #modal-root .modal:has(.hub-window-pack),
  #modal-root .modal:has(.hub-window-journal),
  #modal-root .modal:has(.hub-window-magic) {
    width: min(100%, 460px);
    height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
  }

  .utility-menu-sheet,
  .creation-sheet {
    max-height: calc(100vh - 20px);
    overflow: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .utility-menu-button,
  .action-button,
  .menu-button,
  .tiny-button,
  .hub-tab,
  .hub-filter-chip,
  .paper-slot,
  .pack-item-row,
  .dock-slot,
  .meter > span,
  .mini-meter > span,
  .choice-card,
  .choice-card-compact,
  .spell-chip,
  .modal,
  .mobile-sheet {
    transition: none;
  }

  .floating-capsule,
  .floating-map,
  [class*="hud-fade"] {
    animation: none;
  }
}

/* Adaptive shell modes */

.mobile-app[data-layout="desktop"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas:
    "top top"
    "main rail";
  align-items: start;
  max-width: 1720px;
  gap: 12px;
}

.mobile-app[data-layout="desktop"] .top-band {
  grid-area: top;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 12px 14px;
}

.mobile-app[data-layout="desktop"] .top-band-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.mobile-app[data-layout="desktop"] .top-band-actions {
  justify-self: end;
}

.mobile-app[data-layout="desktop"] .play-layout {
  grid-area: main;
  min-width: 0;
}

.mobile-app[data-layout="desktop"] .board-cluster {
  gap: 0;
}

.mobile-app[data-layout="desktop"] .board-stage {
  padding: 8px;
}

.mobile-app[data-layout="desktop"] #game-canvas {
  min-height: min(72vh, 840px);
  max-width: 100%;
  margin: 0 auto;
  display: block;
}

.mobile-app[data-layout="desktop"] .board-frame {
  display: grid;
  place-items: center;
  max-width: 100%;
}

.mobile-app[data-layout="desktop"] .board-overlays {
  top: 18px;
  right: 18px;
  left: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.mobile-app[data-layout="desktop"] .board-overlays > * {
  pointer-events: auto;
}

.mobile-app[data-layout="desktop"] #event-ticker.message-log {
  left: 18px;
  right: 18px;
  bottom: 18px;
  min-height: 128px;
  max-height: 148px;
}

.mobile-app[data-layout="desktop"] .spell-tray {
  top: 18px;
  left: 18px;
  width: min(360px, 24vw);
}

.mobile-app[data-layout="desktop"] .map-drawer {
  width: min(280px, 20vw);
}

.mobile-app[data-layout="desktop"].targeting-active .play-layout,
.mobile-app[data-layout="desktop"].targeting-active #game-canvas {
  cursor: crosshair;
}

.mobile-app[data-layout="desktop"].targeting-active .board-frame {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(255, 211, 107, 0.28),
    0 24px 56px rgba(0, 0, 0, 0.4);
}

.mobile-app[data-layout="desktop"] .bottom-band {
  grid-area: rail;
  position: sticky;
  top: 12px;
  align-self: start;
  max-height: calc(100vh - 24px - env(safe-area-inset-top));
  overflow: auto;
  scrollbar-gutter: stable;
  padding: 8px;
  gap: 10px;
}

.mobile-app[data-layout="desktop"] .status-band {
  grid-template-columns: 1fr;
  gap: 10px;
}

.mobile-app[data-layout="desktop"] #map-panel {
  order: 1;
}

.mobile-app[data-layout="desktop"] #player-capsule {
  order: 2;
}

.mobile-app[data-layout="desktop"] .map-panel,
.mobile-app[data-layout="desktop"] .field-summary,
.mobile-app[data-layout="desktop"] .stat-band,
.mobile-app[data-layout="desktop"] .message-log {
  padding: 11px;
}

.mobile-app[data-layout="desktop"] .action-bar,
.mobile-app[data-layout="desktop"] .classic-action-bar {
  grid-template-columns: 1fr;
}

.mobile-app[data-layout="desktop"] .dock-slot {
  min-height: 68px;
  padding: 10px 11px;
}

.mobile-app[data-layout="desktop"] #touch-controls {
  display: none !important;
}

.mobile-app[data-layout="mobile"] {
  display: flex;
  flex-direction: column;
}

.mobile-app[data-layout="mobile"] .spell-tray {
  top: 58px;
  right: 12px;
  left: 12px;
  width: auto;
  max-height: min(46vh, 360px);
}

.mobile-app[data-layout="mobile"] .top-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.mobile-app[data-layout="mobile"] .top-band-status {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.mobile-app[data-layout="mobile"] .top-band-actions {
  justify-self: end;
}

.mobile-app[data-layout="mobile"] .bottom-band {
  gap: 10px;
}

.mobile-app[data-layout="mobile"] .status-band {
  grid-template-columns: 1fr;
  gap: 8px;
}

.mobile-app[data-layout="mobile"] #map-panel {
  order: 1;
}

.mobile-app[data-layout="mobile"] #player-capsule {
  order: 2;
}

.mobile-app[data-layout="mobile"] .action-bar,
.mobile-app[data-layout="mobile"] .classic-action-bar {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mobile-app[data-layout="mobile"] .dock-slot {
  min-height: 72px;
}

.mobile-app[data-layout="mobile"] .map-drawer {
  width: min(82vw, 300px);
}

.mobile-app.modal-open .top-band,
.mobile-app.modal-open .bottom-band,
.mobile-app.modal-open .play-layout,
.mobile-app.modal-open .board-overlays,
.mobile-app.modal-open .map-drawer {
  pointer-events: none;
}

.mobile-app.modal-open .top-band,
.mobile-app.modal-open .bottom-band,
.mobile-app.modal-open .play-layout {
  filter: blur(3px) saturate(0.8);
  opacity: 0.38;
}

#modal-root .modal {
  position: relative;
  z-index: 1;
}

#modal-root .modal.title-screen,
#modal-root .modal.creation-sheet {
  width: min(1180px, calc(100vw - 24px));
  max-height: min(92vh, 940px);
  overflow: auto;
  overscroll-behavior: contain;
}

#modal-root .modal.title-screen {
  padding: 0;
}

#modal-root .modal.creation-sheet {
  width: min(980px, calc(100vw - 24px));
  padding: 14px 16px;
}

.title-screen-heading {
  max-width: 8ch;
  font-size: clamp(4rem, 8vw, 6.8rem);
}

.creation-sheet-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.86fr);
  gap: 12px;
}

.creation-sheet-preview {
  position: static;
}

.creation-sheet .modal-actions {
  position: sticky;
  bottom: 0;
  margin-top: 14px;
  padding-top: 12px;
  background: linear-gradient(180deg, rgba(10, 14, 18, 0), rgba(10, 14, 18, 0.96) 42%);
}

.mobile-app[data-layout="desktop"] ~ #modal-root {
  align-items: center;
  padding: 20px 16px;
}

.mobile-app[data-layout="mobile"] ~ #modal-root {
  align-items: end;
}

@media (min-width: 1180px) {
  .creation-sheet-preview {
    position: sticky;
    top: 0;
  }
}

@media (max-width: 980px) {
  #modal-root .modal.title-screen,
  #modal-root .modal.creation-sheet {
    width: min(760px, calc(100vw - 24px));
  }

  .creation-sheet-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  #modal-root .modal.title-screen,
  #modal-root .modal.creation-sheet {
    width: min(100%, calc(100vw - 20px));
    max-height: calc(100vh - 20px);
  }

  .title-showcase-panel {
    min-height: 420px;
  }

  .title-showcase-content {
    padding: 16px;
  }

  .title-screen-heading {
    font-size: clamp(3rem, 13vw, 4.1rem);
  }

  .creation-sheet .modal-actions {
    position: static;
    margin-top: 12px;
    padding-top: 0;
    background: none;
  }
}

/* Responsiveness review: stronger focus, clearer selection, clearer blocked states */

.utility-menu-button,
.action-button,
.menu-button,
.tiny-button,
.hub-tab,
.hub-filter-chip,
.paper-slot,
.pack-item-row,
.spell-learn-card,
.choice-card,
.dock-slot,
.spell-tray-card {
  transition:
    transform 110ms ease,
    border-color 110ms ease,
    box-shadow 110ms ease,
    background 110ms ease,
    opacity 110ms ease,
    filter 110ms ease;
}

.magic-card,
.magic-card-select {
  transition:
    transform 110ms ease,
    border-color 110ms ease,
    box-shadow 110ms ease,
    background 110ms ease,
    opacity 110ms ease,
    filter 110ms ease;
}

.magic-card-select {
  border-radius: 14px;
}

.action-button:active,
.menu-button:active,
.tiny-button:active,
.hub-tab:active,
.hub-filter-chip:active,
.utility-menu-button:active,
.paper-slot:active,
.pack-item-row:active,
.spell-learn-card:active,
.choice-card:active,
.dock-slot:active,
.spell-tray-card:active,
.magic-card-select:active {
  transform: translateY(0);
  filter: brightness(0.96);
}

.action-button:focus-visible,
.menu-button:focus-visible,
.tiny-button:focus-visible,
.hub-tab:focus-visible,
.hub-filter-chip:focus-visible,
.pack-item-row:focus-visible,
.paper-slot:focus-visible,
.spell-learn-card:focus-visible,
.choice-card:focus-visible,
.dock-slot:focus-visible,
.utility-menu-button:focus-visible,
.spell-tray-card:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 2px #fff6d8,
    0 0 0 2px #0d1013,
    0 0 0 4px #d89f3b;
  border-color: #f0cf84 !important;
}

.magic-card-select:focus-visible {
  outline: none;
}

.pack-item-row:focus-visible,
.paper-slot:focus-visible,
.spell-learn-card:focus-visible,
.choice-card:focus-visible,
.dock-slot:focus-visible,
.spell-tray-card:focus-visible,
.magic-card:has(.magic-card-select:focus-visible),
.action-button:focus-visible,
.menu-button:focus-visible,
.tiny-button:focus-visible,
.hub-tab:focus-visible,
.hub-filter-chip:focus-visible,
.utility-menu-button:focus-visible {
  transform: translateY(-1px);
}

.pack-item-row:focus-visible,
.paper-slot:focus-visible,
.spell-learn-card:focus-visible,
.choice-card:focus-visible,
.dock-slot:focus-visible,
.spell-tray-card:focus-visible,
.magic-card:has(.magic-card-select:focus-visible) {
  background: linear-gradient(180deg, rgba(109, 82, 33, 0.92), rgba(52, 38, 16, 0.96));
  color: #fff6d8;
}

.magic-card:has(.magic-card-select:focus-visible) {
  border-color: #f0cf84 !important;
  box-shadow:
    inset 0 0 0 2px #fff6d8,
    0 0 0 2px #0d1013,
    0 0 0 4px #d89f3b;
}

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

.action-button:disabled,
.menu-button:disabled,
.tiny-button:disabled {
  border-color: rgba(150, 158, 166, 0.18);
  background: linear-gradient(180deg, rgba(35, 40, 45, 0.96), rgba(19, 24, 28, 0.98));
  color: rgba(216, 208, 190, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  filter: saturate(0.7);
}

.action-button:disabled:hover,
.menu-button:disabled:hover,
.tiny-button:disabled:hover {
  transform: none;
  border-color: rgba(150, 158, 166, 0.18);
}

.paper-slot.active,
.pack-item-row.active,
.magic-card.active,
.spell-tray-card.active,
.choice-card.active,
.choice-card.selected {
  border-color: rgba(214, 170, 88, 0.52);
  background: linear-gradient(180deg, rgba(112, 82, 32, 0.5), rgba(43, 31, 17, 0.78));
  box-shadow:
    inset 0 1px 0 rgba(255, 241, 210, 0.08),
    0 14px 28px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(214, 170, 88, 0.24);
  transform: translateY(-1px);
}

.hub-tab.active,
.hub-filter-chip.active {
  border-color: rgba(214, 170, 88, 0.42);
  background: linear-gradient(180deg, rgba(109, 82, 33, 0.92), rgba(52, 38, 16, 0.96));
  color: #fff6d8;
  box-shadow:
    inset 0 1px 0 rgba(255, 241, 210, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.2);
}

.magic-grid:has(.magic-card.active) .magic-card:not(.active),
.spell-tray-grid:has(.spell-tray-card.active) .spell-tray-card:not(.active),
.spell-learn-grid:has(.spell-learn-card:focus-visible) .spell-learn-card:not(:focus-visible) {
  opacity: 0.56;
  filter: saturate(0.72);
}

/* Step 09: new game screen simplification */

.creation-sheet {
  width: min(760px, 100%);
  padding: 16px;
}

.creation-intro {
  margin-bottom: 12px;
  padding: 12px 14px;
  font-size: 0.95rem;
}

.creation-sheet-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

.creation-sheet-main {
  gap: 12px;
}

.creation-sheet-main .field-group {
  gap: 10px;
}

.choice-card.choice-card-compact {
  min-height: 0;
  padding: 10px 12px;
  gap: 10px;
  align-items: center;
}

.choice-card.choice-card-compact .choice-card-art {
  align-self: stretch;
}

.choice-card.choice-card-compact .choice-art-frame {
  min-height: 78px;
  padding: 8px;
}

.choice-card.choice-card-compact .choice-card-body {
  gap: 4px;
}

.choice-card.choice-card-compact .choice-title {
  font-size: 1rem;
}

.choice-card.choice-card-compact .choice-note {
  font-size: 0.86rem;
  line-height: 1.35;
  color: rgba(235, 224, 201, 0.8);
}

.choice-card.choice-card-compact .choice-card-meta {
  margin-top: 2px;
}

@media (max-width: 980px) {
  .creation-sheet-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .creation-sheet {
    padding: 14px;
  }

  .creation-sheet-grid {
    padding-bottom: 112px;
  }

  .creation-intro {
    font-size: 0.9rem;
  }

  .choice-card.choice-card-compact {
    padding: 9px 10px;
  }

  .choice-card.choice-card-compact .choice-art-frame {
    min-height: 70px;
  }

  .creation-sheet .modal-actions {
    position: sticky;
    bottom: 0;
    margin-top: 10px;
    padding-top: 10px;
    background: linear-gradient(180deg, transparent, rgba(10, 14, 18, 0.96) 28%);
  }
}

/* Classic character creation sheet */

#modal-root .modal.creation-sheet {
  width: min(960px, calc(100vw - 24px));
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--classic-border-strong);
  background:
    linear-gradient(180deg, rgba(26, 29, 31, 0.99), rgba(11, 13, 15, 0.99));
  box-shadow:
    inset 0 0 0 1px rgba(255, 246, 216, 0.04),
    0 26px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.creation-sheet-frame {
  display: grid;
  gap: 0;
}

.creation-sheet-header {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 18px 24px 16px;
  border-bottom: 1px solid var(--classic-border-strong);
  background:
    linear-gradient(180deg, rgba(32, 36, 39, 0.98), rgba(18, 21, 23, 0.96)),
    radial-gradient(circle at top, rgba(200, 157, 85, 0.12), transparent 56%);
  text-align: center;
}

.creation-sheet-heading {
  color: var(--classic-text);
  font-family: "Cinzel", serif;
  font-size: clamp(1.22rem, 2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.creation-sheet-subheading {
  max-width: 56ch;
  color: var(--classic-text-dim);
  font-size: 0.9rem;
  line-height: 1.45;
}

.creation-sheet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.95fr);
  gap: 0;
}

.creation-sheet-main {
  display: grid;
  gap: 18px;
  padding: 20px 22px 18px;
  border-right: 1px solid rgba(102, 109, 118, 0.7);
}

.creation-sheet-main .field-group {
  margin: 0;
}

.creation-sheet-preview {
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(19, 21, 24, 0.98), rgba(11, 13, 15, 0.98));
}

.creation-row,
.creation-choice-group,
.creation-stat-group,
.creation-preview-copy {
  display: grid;
  gap: 10px;
}

.creation-label {
  color: var(--classic-gold-2);
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
}

.creation-name-input {
  min-height: 52px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--classic-border);
  background: linear-gradient(180deg, rgba(17, 19, 21, 0.98), rgba(10, 12, 14, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  color: var(--classic-text);
  font-family: "Lucida Console", "Courier New", monospace;
}

.creation-choice-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.creation-choice-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 10px 8px;
  border-radius: 8px;
  border: 1px solid var(--classic-border);
  background: linear-gradient(180deg, rgba(33, 38, 43, 0.96), rgba(16, 19, 22, 0.98));
  box-shadow: none;
  text-align: center;
}

.creation-choice-pill:hover {
  border-color: rgba(200, 157, 85, 0.46);
}

.creation-choice-pill.selected {
  border-color: rgba(200, 157, 85, 0.9);
  background: linear-gradient(180deg, rgba(102, 74, 30, 0.9), rgba(45, 31, 13, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 241, 210, 0.08),
    0 0 0 1px rgba(200, 157, 85, 0.24);
  transform: none;
}

.creation-choice-pill.selected::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid rgba(200, 157, 85, 0.9);
}

.creation-choice-label {
  color: inherit;
  font-family: "Alegreya Sans", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.creation-stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}

.creation-points-note {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid rgba(102, 109, 118, 0.7);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--classic-text-dim);
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 0.82rem;
}

.creation-points-note strong {
  color: var(--classic-gold-2);
}

.creation-stat-allocation {
  display: grid;
  gap: 8px;
}

.creation-stat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(102, 109, 118, 0.52);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(24, 27, 31, 0.92), rgba(13, 15, 18, 0.96));
}

.creation-stat-title {
  margin: 0;
  color: var(--classic-text);
  font-family: "Alegreya Sans", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
}

.creation-stat-stepper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.creation-stat-button {
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 6px;
}

.creation-stat-value {
  min-width: 3ch;
  color: var(--classic-text);
  text-align: center;
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 1rem;
}

.creation-preview-panel {
  display: grid;
  gap: 14px;
  height: 100%;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid rgba(102, 109, 118, 0.8);
  background:
    linear-gradient(180deg, rgba(16, 18, 21, 0.98), rgba(11, 13, 15, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.creation-preview-portrait {
  display: grid;
  place-items: center;
}

.creation-portrait-frame {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 238px;
  width: 100%;
  padding: 24px 20px 58px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--creation-accent) 54%, rgba(102, 109, 118, 0.9));
  background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--creation-accent-soft) 28%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(18, 20, 23, 0.98), rgba(10, 12, 14, 0.98));
}

.creation-portrait-frame::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(200, 157, 85, 0.18);
  pointer-events: none;
}

.creation-portrait-runes {
  position: absolute;
  inset: auto 50% 56px auto;
  width: 150px;
  height: 150px;
  transform: translateX(50%);
  border-radius: 50%;
  border: 1px solid rgba(200, 157, 85, 0.18);
  box-shadow:
    0 0 0 12px rgba(200, 157, 85, 0.04),
    0 0 0 28px rgba(127, 197, 179, 0.03);
}

.creation-portrait-sprite {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.56));
}

.creation-portrait-badge {
  position: absolute;
  bottom: 14px;
  left: 50%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  padding: 7px 10px;
  border: 1px solid rgba(102, 109, 118, 0.72);
  border-radius: 999px;
  background: rgba(10, 12, 14, 0.9);
  color: var(--classic-text-dim);
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.creation-preview-title {
  color: var(--classic-text);
  font-family: "Cinzel", serif;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.creation-preview-subtitle {
  color: var(--classic-gold-2);
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.creation-preview-summary {
  color: var(--classic-text-dim);
  font-size: 0.94rem;
  line-height: 1.55;
}

.creation-preview-facts {
  display: grid;
  gap: 6px;
}

.creation-preview-actions {
  display: grid;
  gap: 8px;
  padding-top: 6px;
}

.creation-preview-contract {
  width: 100%;
}

.creation-preview-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(102, 109, 118, 0.3);
  color: var(--classic-text-dim);
  font-size: 0.84rem;
}

.creation-preview-fact strong {
  color: var(--classic-text);
  font-size: 0.88rem;
  font-weight: 700;
  text-align: right;
}

.creation-sheet .modal-actions.creation-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 22px 20px;
  border-top: 1px solid var(--classic-border-strong);
  background:
    linear-gradient(180deg, rgba(15, 17, 20, 0.72), rgba(11, 13, 15, 0.98) 34%);
}

.creation-actions .action-button {
  min-width: 160px;
}

@media (max-width: 920px) {
  .creation-sheet-grid {
    grid-template-columns: 1fr;
  }

  .creation-sheet-main {
    border-right: 0;
    border-bottom: 1px solid rgba(102, 109, 118, 0.7);
  }
}

@media (max-width: 640px) {
  #modal-root .modal.creation-sheet {
    width: min(100%, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
  }

  .creation-sheet-header,
  .creation-sheet-main,
  .creation-sheet-preview,
  .creation-sheet .modal-actions.creation-actions {
    padding-left: 14px;
    padding-right: 14px;
  }

  .creation-sheet-header {
    padding-top: 16px;
    padding-bottom: 14px;
  }

  .creation-sheet-subheading {
    font-size: 0.84rem;
  }

  .creation-sheet-main,
  .creation-sheet-preview {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .creation-choice-row {
    gap: 8px;
  }

  .creation-choice-pill {
    min-height: 48px;
    padding: 8px 6px;
  }

  .creation-choice-label {
    font-size: 0.92rem;
  }

  .creation-stat-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .creation-stat-stepper {
    justify-self: end;
  }

  .creation-portrait-frame {
    min-height: 186px;
    padding-top: 18px;
  }

  .creation-sheet .modal-actions.creation-actions {
    padding-top: 12px;
    padding-bottom: 14px;
  }

  .creation-actions .action-button {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Step 07: perceived slowness cleanup */

.menu-quick-state {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid rgba(214, 170, 88, 0.2);
  background:
    linear-gradient(180deg, rgba(72, 55, 27, 0.34), rgba(26, 22, 14, 0.58)),
    radial-gradient(circle at top left, rgba(214, 170, 88, 0.08), transparent 62%);
  box-shadow: inset 0 1px 0 rgba(255, 241, 210, 0.04);
}

.menu-quick-state-eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(230, 200, 142, 0.82);
}

.menu-quick-state-title {
  font-family: var(--font-display);
  color: #fff1cb;
  font-size: 0.95rem;
}

.menu-quick-state-detail {
  color: rgba(232, 224, 206, 0.82);
  font-size: 0.8rem;
  line-height: 1.4;
}

#modal-root .modal-interaction-feedback {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  margin: 6px 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(214, 170, 88, 0.24);
  background:
    linear-gradient(180deg, rgba(35, 42, 48, 0.96), rgba(18, 22, 28, 0.98)),
    radial-gradient(circle at top left, rgba(214, 170, 88, 0.09), transparent 60%);
  color: #f3e6c6;
  line-height: 1.4;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 24px rgba(0, 0, 0, 0.18);
}

#modal-root .modal-interaction-feedback::before {
  content: "i";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 999px;
  background: rgba(196, 210, 255, 0.16);
  color: #dbe6ff;
  font-weight: 700;
  font-size: 0.72rem;
}

#modal-root .modal-interaction-feedback.good {
  border-color: rgba(122, 214, 138, 0.34);
  background:
    linear-gradient(180deg, rgba(26, 48, 33, 0.96), rgba(14, 25, 17, 0.98)),
    radial-gradient(circle at top left, rgba(122, 214, 138, 0.1), transparent 60%);
}

#modal-root .modal-interaction-feedback.good::before {
  content: "+";
  background: rgba(122, 214, 138, 0.18);
  color: #c8ffd1;
}

#modal-root .modal-interaction-feedback.warning {
  border-color: rgba(255, 192, 110, 0.36);
  background:
    linear-gradient(180deg, rgba(58, 40, 20, 0.96), rgba(24, 18, 12, 0.98)),
    radial-gradient(circle at top left, rgba(255, 192, 110, 0.12), transparent 60%);
}

#modal-root .modal-interaction-feedback.warning::before {
  content: "!";
  background: rgba(255, 192, 110, 0.2);
  color: #fff0c6;
}

#modal-root .modal-interaction-feedback.bad {
  border-color: rgba(255, 129, 110, 0.34);
  background:
    linear-gradient(180deg, rgba(66, 29, 25, 0.96), rgba(28, 14, 12, 0.98)),
    radial-gradient(circle at top left, rgba(255, 129, 110, 0.12), transparent 60%);
}

#modal-root .modal-interaction-feedback.bad::before {
  content: "x";
  background: rgba(255, 129, 110, 0.18);
  color: #ffd6cf;
}

.mobile-app.modal-open .top-band,
.mobile-app.modal-open .bottom-band,
.mobile-app.modal-open .play-layout,
.mobile-app.modal-open .board-frame,
.mobile-app.modal-open .utility-bar,
.mobile-app.modal-open .top-shell {
  filter: saturate(0.96) brightness(0.92);
  opacity: 0.72;
}

@media (max-width: 760px) {
  .menu-quick-state {
    padding: 8px 10px;
    border-radius: 10px;
  }

  .menu-quick-state-title {
    font-size: 0.9rem;
  }

  .menu-quick-state-detail {
    font-size: 0.77rem;
  }

  #modal-root .modal-interaction-feedback {
    padding: 9px 10px;
    gap: 8px;
  }
}

/* Wave 1: hub-first menu surface system */

:root {
  --menu-surface-quick-opacity: 0.86;
  --menu-surface-workspace-opacity: 0.96;
  --menu-surface-reader-opacity: 0.945;
  --menu-section-gap: 14px;
  --menu-section-gap-tight: 10px;
  --menu-title-size: clamp(1.18rem, 2vw, 1.46rem);
  --menu-kicker-size: 0.7rem;
  --menu-chip-gap: 8px;
  --menu-action-row-height: 48px;
  --menu-width-quick: 620px;
  --menu-width-workspace: 920px;
  --menu-width-reader: 880px;
}

#modal-root[data-surface-tier] {
  transition:
    background 140ms ease,
    backdrop-filter 140ms ease;
}

#modal-root[data-surface-tier="quick"] {
  background: linear-gradient(180deg, rgba(7, 10, 12, 0.18), rgba(7, 10, 12, 0.34));
  backdrop-filter: blur(3px);
}

#modal-root[data-surface-tier="workspace"] {
  background: linear-gradient(180deg, rgba(7, 10, 12, 0.28), rgba(7, 10, 12, 0.52));
  backdrop-filter: blur(5px);
}

#modal-root[data-surface-tier="reader"] {
  background: linear-gradient(180deg, rgba(8, 10, 12, 0.24), rgba(8, 10, 12, 0.46));
  backdrop-filter: blur(4px);
}

body:has(#modal-root[data-surface-tier="quick"]:not(.hidden)) .mobile-app.modal-open .top-band,
body:has(#modal-root[data-surface-tier="quick"]:not(.hidden)) .mobile-app.modal-open .bottom-band,
body:has(#modal-root[data-surface-tier="quick"]:not(.hidden)) .mobile-app.modal-open .play-layout,
body:has(#modal-root[data-surface-tier="quick"]:not(.hidden)) .mobile-app.modal-open .board-frame,
body:has(#modal-root[data-surface-tier="quick"]:not(.hidden)) .mobile-app.modal-open .utility-bar,
body:has(#modal-root[data-surface-tier="quick"]:not(.hidden)) .mobile-app.modal-open .top-shell {
  filter: blur(2px) saturate(0.88) brightness(0.82);
  opacity: 0.58;
}

body:has(#modal-root[data-surface-tier="workspace"]:not(.hidden)) .mobile-app.modal-open .top-band,
body:has(#modal-root[data-surface-tier="workspace"]:not(.hidden)) .mobile-app.modal-open .bottom-band,
body:has(#modal-root[data-surface-tier="workspace"]:not(.hidden)) .mobile-app.modal-open .play-layout,
body:has(#modal-root[data-surface-tier="workspace"]:not(.hidden)) .mobile-app.modal-open .board-frame,
body:has(#modal-root[data-surface-tier="workspace"]:not(.hidden)) .mobile-app.modal-open .utility-bar,
body:has(#modal-root[data-surface-tier="workspace"]:not(.hidden)) .mobile-app.modal-open .top-shell,
body:has(#modal-root[data-surface-tier="reader"]:not(.hidden)) .mobile-app.modal-open .top-band,
body:has(#modal-root[data-surface-tier="reader"]:not(.hidden)) .mobile-app.modal-open .bottom-band,
body:has(#modal-root[data-surface-tier="reader"]:not(.hidden)) .mobile-app.modal-open .play-layout,
body:has(#modal-root[data-surface-tier="reader"]:not(.hidden)) .mobile-app.modal-open .board-frame,
body:has(#modal-root[data-surface-tier="reader"]:not(.hidden)) .mobile-app.modal-open .utility-bar,
body:has(#modal-root[data-surface-tier="reader"]:not(.hidden)) .mobile-app.modal-open .top-shell {
  filter: blur(4px) saturate(0.72) brightness(0.68);
  opacity: 0.34;
}

#modal-root .modal.modal-frame:not(.title-screen):not(.creation-sheet) {
  width: min(var(--menu-width-workspace), calc(100vw - 18px));
  max-height: min(92vh, 940px);
  padding: 14px 14px 10px;
  border-radius: 24px;
  border: 1px solid rgba(212, 181, 119, 0.2);
  background:
    linear-gradient(180deg, rgba(20, 23, 27, 0.98), rgba(9, 11, 14, 0.98)),
    radial-gradient(circle at top left, rgba(214, 170, 88, 0.08), transparent 58%);
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.44),
    0 0 0 1px rgba(255, 241, 210, 0.04),
    inset 0 1px 0 rgba(255, 241, 210, 0.05);
}

#modal-root .modal-frame:not(.title-screen):not(.creation-sheet) .modal-title {
  padding: 12px 12px 10px;
  font-size: var(--menu-title-size);
  letter-spacing: 0.04em;
}

#modal-root .modal-frame:not(.title-screen):not(.creation-sheet) .modal-body {
  display: grid;
  gap: var(--menu-section-gap);
  padding: 4px 12px 12px;
}

#modal-root .modal-frame:not(.title-screen):not(.creation-sheet) > .modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  padding: 12px;
  border-top: 1px solid rgba(212, 181, 119, 0.12);
  background: linear-gradient(180deg, rgba(7, 10, 12, 0), rgba(7, 10, 12, 0.98) 38%);
}

#modal-root .modal:has(.hub-window-pack) > .modal-actions,
#modal-root .modal:has(.shop-workspace) > .modal-actions {
  display: none;
}

#modal-root .modal-frame.modal-surface-quick:not(.title-screen):not(.creation-sheet) {
  width: min(var(--menu-width-quick), calc(100vw - 18px));
  max-height: min(74vh, 720px);
  background:
    linear-gradient(180deg, rgba(18, 22, 27, var(--menu-surface-quick-opacity)), rgba(9, 12, 16, 0.94)),
    radial-gradient(circle at top left, rgba(127, 197, 179, 0.08), transparent 64%);
}

#modal-root .modal-frame.modal-surface-workspace:not(.title-screen):not(.creation-sheet) {
  width: min(var(--menu-width-workspace), calc(100vw - 18px));
  background:
    linear-gradient(180deg, rgba(20, 23, 27, var(--menu-surface-workspace-opacity)), rgba(8, 10, 13, 0.985)),
    radial-gradient(circle at top left, rgba(214, 170, 88, 0.09), transparent 56%);
}

#modal-root .modal-frame.modal-surface-reader:not(.title-screen):not(.creation-sheet) {
  width: min(var(--menu-width-reader), calc(100vw - 18px));
  background:
    linear-gradient(180deg, rgba(18, 22, 26, var(--menu-surface-reader-opacity)), rgba(10, 12, 15, 0.985)),
    radial-gradient(circle at top left, rgba(196, 210, 255, 0.08), transparent 56%);
}

.workspace-stack {
  display: grid;
  gap: var(--menu-section-gap);
}

.workspace-hero {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(214, 170, 88, 0.14);
  background:
    linear-gradient(180deg, rgba(34, 40, 45, 0.9), rgba(15, 18, 21, 0.94)),
    radial-gradient(circle at top left, rgba(214, 170, 88, 0.08), transparent 64%);
}

.workspace-hero.compact {
  gap: 6px;
  padding: 12px 14px;
}

.workspace-eyebrow {
  color: rgba(235, 208, 152, 0.82);
  font-size: var(--menu-kicker-size);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.workspace-title {
  color: #fff2d0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.24rem);
  line-height: 1.25;
}

.workspace-detail {
  color: rgba(232, 224, 206, 0.8);
  font-size: 0.86rem;
  line-height: 1.5;
}

.workspace-overview {
  display: grid;
  gap: 8px;
}

.workspace-section-stack {
  display: grid;
  gap: 10px;
}

.settings-sheet,
.save-slot-workspace,
.town-workspace,
.bank-workspace,
.character-sheet-workspace {
  gap: 12px;
}

.settings-stack {
  display: grid;
  gap: 8px;
}

.settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(214, 170, 88, 0.12);
  background: linear-gradient(180deg, rgba(37, 44, 49, 0.74), rgba(18, 22, 26, 0.9));
}

.utility-menu-sheet {
  display: grid;
  gap: 12px;
  max-height: min(100%, calc(100vh - 20px));
}

.utility-command-summary {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(127, 197, 179, 0.2);
  background:
    linear-gradient(180deg, rgba(28, 38, 42, 0.72), rgba(13, 18, 22, 0.82)),
    radial-gradient(circle at top left, rgba(127, 197, 179, 0.08), transparent 60%);
}

.utility-command-lead {
  color: #f4ebd3;
  font-size: 0.9rem;
  line-height: 1.45;
}

.utility-command-chips,
.field-guide-inline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--menu-chip-gap);
}

.utility-command-chip {
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(127, 197, 179, 0.22);
  background: rgba(12, 18, 20, 0.64);
  color: rgba(236, 230, 216, 0.84);
  font-size: 0.76rem;
  line-height: 1.35;
}

.utility-menu-group-primary,
.utility-menu-group-secondary {
  display: grid;
  gap: 8px;
}

.utility-menu-group-grid-primary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.utility-menu-group-grid-primary .action-button,
.utility-menu-secondary-links .action-button,
.utility-command-actions .action-button {
  min-height: var(--menu-action-row-height);
}

.utility-menu-secondary-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.utility-menu-secondary-links .action-button {
  background: linear-gradient(180deg, rgba(29, 35, 40, 0.88), rgba(16, 20, 24, 0.96));
}

.utility-command-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding-top: 8px;
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, rgba(10, 14, 18, 0), rgba(10, 14, 18, 0.94) 28%, rgba(10, 14, 18, 0.98));
}

.utility-command-actions .action-button {
  width: 100%;
}

.pack-build-strip .mini-panel,
.magic-summary-strip .mini-panel {
  background: linear-gradient(180deg, rgba(35, 41, 46, 0.74), rgba(17, 21, 24, 0.9));
  border-color: rgba(214, 170, 88, 0.12);
}

.hub-body-pack .pack-layout {
  display: grid;
  gap: 12px;
}

.pack-side-rail {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.pack-column {
  min-width: 0;
}

.pack-inventory-panel {
  min-width: 0;
}

.pack-equipment-summary .pack-build-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pack-list-panel {
  max-height: min(42vh, 520px);
}

.pack-item-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.pack-item-head-main,
.pack-item-head-side {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.pack-item-head-side {
  justify-items: end;
  flex: 0 0 auto;
}

.pack-item-meta-compact {
  font-size: 0.74rem;
  line-height: 1.3;
}

.pack-row-chip {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(214, 198, 157, 0.1);
  color: rgba(241, 221, 182, 0.9);
  font-size: 0.7rem;
}

.pack-row-chip.pack-row-chip-good {
  color: #d6f0d9;
  border-color: rgba(113, 188, 127, 0.22);
  background: rgba(27, 55, 31, 0.42);
}

.pack-row-chip.pack-row-chip-neutral {
  color: #f0ddb0;
  border-color: rgba(214, 170, 88, 0.22);
  background: rgba(80, 57, 19, 0.34);
}

.pack-row-chip.pack-row-chip-bad {
  color: #ffd4c6;
  border-color: rgba(212, 123, 88, 0.22);
  background: rgba(65, 31, 22, 0.42);
}

.pack-group-list:has(.pack-item-row.active) .pack-item-row:not(.active),
.magic-grid:has(.magic-card.active) .magic-card:not(.active) {
  opacity: 0.72;
  filter: saturate(0.88);
}

.magic-feature-card {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  border-radius: 18px;
  border: 1px solid rgba(137, 184, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(26, 34, 45, 0.92), rgba(12, 18, 28, 0.96)),
    radial-gradient(circle at top left, rgba(137, 184, 255, 0.12), transparent 58%);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
}

.magic-feature-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.magic-feature-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.magic-feature-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #eef4ff;
  font-family: var(--font-display);
  font-size: 1.18rem;
  line-height: 1.2;
}

.spell-symbol-inline-feature {
  color: #ffe2a8;
  font-size: 1.12em;
}

.magic-feature-detail {
  margin-top: 4px;
  color: rgba(223, 230, 244, 0.84);
  font-size: 0.85rem;
  line-height: 1.55;
}

.magic-feature-cost {
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(10, 16, 22, 0.66);
  color: #dce8ff;
  font-size: 0.8rem;
  white-space: nowrap;
}

.magic-feature-cost.warning {
  color: #ffd6c6;
  background: rgba(74, 33, 22, 0.6);
}

.magic-feature-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.field-guide-body {
  gap: 12px;
}

.modal-frame.modal-surface-reader .modal-title {
  color: #eef3ff;
}

.modal-frame.modal-surface-reader .field-guide-layout {
  display: grid;
  gap: 16px;
}

.modal-frame.modal-surface-reader .field-guide-layout .hub-section {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.modal-frame.modal-surface-reader .field-guide-layout .panel-title {
  margin-bottom: 8px;
  color: #f3e6c6;
  font-size: 0.98rem;
}

.modal-frame.modal-surface-reader .field-guide-layout .text-block,
.modal-frame.modal-surface-reader .field-guide-layout .help-list {
  padding: 0;
  border: 0;
  background: none;
  color: rgba(234, 232, 224, 0.86);
  line-height: 1.7;
}

.modal-frame.modal-surface-reader .field-guide-layout .section-block,
.modal-frame.modal-surface-reader .field-guide-layout .journal-log {
  border-radius: 16px;
  border: 1px solid rgba(196, 210, 255, 0.12);
  background: linear-gradient(180deg, rgba(24, 29, 34, 0.6), rgba(12, 15, 18, 0.78));
  padding: 12px 14px;
}

.save-slot-card {
  border-radius: 16px;
  border: 1px solid rgba(214, 170, 88, 0.12);
  background: linear-gradient(180deg, rgba(36, 41, 46, 0.78), rgba(16, 20, 24, 0.92));
}

.save-slot-card.active {
  border-color: rgba(214, 170, 88, 0.36);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.18);
}

.save-slot-badge {
  background: rgba(12, 18, 20, 0.86);
}

.save-slot-badge.active {
  background: rgba(112, 82, 32, 0.92);
}

.character-sheet-workspace .character-sheet-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.character-sheet-workspace .character-sheet-card {
  background: linear-gradient(180deg, rgba(36, 43, 48, 0.76), rgba(17, 20, 24, 0.92));
  border-color: rgba(214, 170, 88, 0.12);
}

.bank-actions-panel .modal-actions,
.town-workspace .modal-actions.inline-modal-actions {
  justify-content: flex-start;
}

.bank-actions-panel .text-block.muted {
  margin-top: 4px;
}

@media (min-width: 920px) {
  .hub-body-pack .pack-layout {
    grid-template-columns: minmax(0, 1.24fr) minmax(320px, 0.76fr);
    align-items: start;
  }

  .hub-body-pack > .menu-quick-state {
    display: none;
  }

  .pack-side-rail {
    position: sticky;
    top: 0;
    align-self: start;
  }

  .pack-inventory-panel {
    min-height: min(64vh, 760px);
  }

  .pack-inventory-panel [data-pack-filter-host] {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-bottom: 8px;
    background: linear-gradient(180deg, rgba(11, 14, 17, 0.98), rgba(11, 14, 17, 0.88) 75%, rgba(11, 14, 17, 0));
  }

  .pack-list-panel {
    max-height: min(60vh, 720px);
  }

  .pack-item-row {
    gap: 4px;
    padding: 10px 11px;
  }

  .pack-item-meta-compact {
    color: rgba(214, 221, 212, 0.74);
  }

  .pack-item-name {
    font-size: 0.88rem;
  }

  .pack-equipment-summary {
    padding: 11px 12px;
  }

  .pack-equipment-summary .workspace-detail,
  .hub-window-pack .paper-slot-note {
    display: none;
  }

  .hub-window-pack .paper-slot {
    min-height: 58px;
  }

  .hub-window-pack .paper-slot-item {
    font-size: 0.8rem;
  }

  .hub-window-pack .paper-slot-label {
    font-size: 0.64rem;
  }

  .hub-window-pack .paper-slot-quality,
  .hub-window-pack .paper-slot-badge {
    font-size: 0.64rem;
  }

  .pack-field-note {
    font-size: 0.74rem;
    line-height: 1.4;
  }

  .pack-inspector-card {
    gap: 8px;
  }

  .pack-inspector-copy {
    -webkit-line-clamp: 2;
  }

  .pack-inspector-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  .field-guide-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .field-guide-layout .hub-section:has(.journal-log) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  #modal-root .modal.modal-frame:not(.title-screen):not(.creation-sheet) {
    width: min(100%, calc(100vw - 12px));
    max-height: calc(100vh - 12px);
    padding: 10px 10px 8px;
    border-radius: 20px;
  }

  #modal-root .modal-frame:not(.title-screen):not(.creation-sheet) .modal-title,
  #modal-root .modal-frame:not(.title-screen):not(.creation-sheet) .modal-body,
  #modal-root .modal-frame:not(.title-screen):not(.creation-sheet) > .modal-actions {
    padding-left: 10px;
    padding-right: 10px;
  }

  .utility-menu-group-grid-primary,
  .utility-menu-secondary-links,
  .magic-feature-actions,
  .character-sheet-workspace .character-sheet-hero {
    grid-template-columns: 1fr;
  }

  .settings-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .hub-body-pack .pack-layout,
  .field-guide-layout {
    grid-template-columns: 1fr;
  }

  .pack-side-rail {
    order: 1;
  }

  .pack-inventory-panel {
    order: 2;
  }

  .pack-list-panel {
    max-height: none;
  }
}

/* Wave 1B: field guide briefing layout */

.field-guide-body {
  gap: 10px;
}

.field-guide-kicker.workspace-hero {
  gap: 6px;
  padding: 12px 14px;
}

.field-guide-kicker .workspace-title {
  font-size: clamp(0.98rem, 1.35vw, 1.16rem);
}

.field-guide-kicker .workspace-detail {
  max-width: 62ch;
  font-size: 0.8rem;
  line-height: 1.45;
}

.field-guide-inline-meta .item-chip {
  padding: 5px 8px;
  font-size: 0.68rem;
}

.journal-section-row {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid rgba(196, 210, 255, 0.12);
  background: linear-gradient(180deg, rgba(17, 21, 25, 0.92), rgba(10, 12, 15, 0.96));
}

.journal-section-row .hub-filter-chip {
  min-width: 0;
}

.field-guide-shell {
  display: grid;
  gap: 14px;
}

.field-guide-rail,
.field-guide-main {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.field-guide-brief,
.modal-frame.modal-surface-reader .field-guide-layout .field-guide-card {
  padding: 14px 15px;
  border-radius: 18px;
  border: 1px solid rgba(196, 210, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(24, 29, 34, 0.72), rgba(12, 15, 18, 0.88)),
    radial-gradient(circle at top left, rgba(196, 210, 255, 0.06), transparent 62%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.field-guide-brief.priority {
  border-color: rgba(214, 170, 88, 0.18);
  background:
    linear-gradient(180deg, rgba(54, 44, 24, 0.72), rgba(25, 21, 14, 0.9)),
    radial-gradient(circle at top left, rgba(214, 170, 88, 0.08), transparent 62%);
}

.field-guide-brief-label {
  margin-bottom: 6px;
  color: rgba(235, 208, 152, 0.82);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.field-guide-brief-title {
  color: #f6edd7;
  font-family: var(--font-display);
  font-size: 0.98rem;
  line-height: 1.32;
}

.field-guide-brief-detail,
.field-guide-copy {
  margin-top: 6px;
  color: rgba(234, 232, 224, 0.84);
  font-size: 0.88rem;
  line-height: 1.62;
}

.field-guide-brief-actions {
  margin-top: 10px;
}

.field-guide-action-row {
  justify-content: flex-start;
}

.field-guide-fact-list {
  display: grid;
  gap: 10px;
}

.field-guide-fact-row {
  display: grid;
  gap: 3px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(196, 210, 255, 0.08);
}

.field-guide-fact-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.field-guide-fact-label {
  color: rgba(235, 208, 152, 0.78);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.field-guide-fact-value {
  color: rgba(240, 236, 226, 0.9);
  font-size: 0.88rem;
  line-height: 1.58;
}

.field-guide-list {
  margin: 0;
  padding-left: 18px;
  color: rgba(240, 236, 226, 0.88);
  display: grid;
  gap: 10px;
  line-height: 1.58;
}

.modal-frame.modal-surface-reader .field-guide-layout .field-guide-card .panel-title {
  margin-bottom: 10px;
}

.modal-frame.modal-surface-reader .field-guide-layout .field-guide-card .section-block,
.modal-frame.modal-surface-reader .field-guide-layout .field-guide-card .journal-log {
  margin-top: 10px;
}

@media (min-width: 920px) {
  .field-guide-shell {
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    align-items: start;
  }

  .field-guide-rail {
    position: sticky;
    top: 58px;
  }

  .field-guide-main.field-guide-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .field-guide-shell-chronicle .field-guide-main.field-guide-layout .field-guide-card:has(.journal-log) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .journal-section-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    top: -2px;
  }

  .field-guide-brief,
  .modal-frame.modal-surface-reader .field-guide-layout .field-guide-card {
    padding: 12px 13px;
    border-radius: 16px;
  }

  .field-guide-brief-title {
    font-size: 0.92rem;
  }

  .field-guide-brief-detail,
  .field-guide-copy,
  .field-guide-fact-value,
  .field-guide-list {
    font-size: 0.82rem;
  }

  .field-guide-action-row {
    grid-template-columns: 1fr;
  }
}

/* Wave 2: space consolidation and progressive disclosure */

.ui-disclosure {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(216, 194, 154, 0.12);
  background: linear-gradient(180deg, rgba(21, 27, 31, 0.76), rgba(10, 14, 17, 0.88));
}

.ui-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.ui-disclosure summary::-webkit-details-marker {
  display: none;
}

.ui-disclosure summary::after {
  content: "+";
  flex: 0 0 auto;
  color: rgba(235, 208, 152, 0.82);
  font-size: 1rem;
  line-height: 1;
}

.ui-disclosure[open] summary::after {
  content: "-";
}

.ui-disclosure-title {
  color: #f3e7c9;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ui-disclosure-summary {
  margin-left: auto;
  color: rgba(226, 219, 205, 0.72);
  font-size: 0.75rem;
  text-align: right;
}

.ui-disclosure-body {
  display: grid;
  gap: 10px;
}

.utility-menu-body {
  gap: 10px;
}

.utility-command-summary {
  gap: 6px;
  padding: 10px 12px;
}

.utility-command-lead {
  font-size: 0.86rem;
  line-height: 1.4;
}

.utility-menu-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #f5ecd6;
}

.utility-menu-meta {
  margin-top: 2px;
  color: rgba(229, 224, 212, 0.8);
  font-size: 0.72rem;
  line-height: 1.3;
}

.utility-menu-meta.subtle {
  color: rgba(196, 212, 208, 0.64);
}

.utility-command-chip {
  min-height: 0;
  padding: 7px 9px;
}

.utility-menu-group-disclosure {
  gap: 6px;
}

.utility-more-toggle {
  display: grid;
  gap: 3px;
  justify-items: start;
  padding: 10px 12px;
}

.utility-more-toggle [data-utility-more-label] {
  font-size: 0.84rem;
  font-weight: 700;
}

.utility-more-toggle [data-utility-more-meta] {
  color: rgba(214, 226, 222, 0.7);
  font-size: 0.72rem;
}

.utility-menu-secondary-links {
  gap: 6px;
}

.utility-menu-secondary-links[hidden] {
  display: none;
}

.pack-inspector-card {
  gap: 10px;
  padding: 12px 13px;
}

.pack-inspector-copy {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.pack-stat-grid {
  gap: 6px;
}

.pack-stat-grid-secondary {
  margin-top: 0;
}

.pack-inspector-disclosure {
  margin-top: 0;
}

.pack-inspector-disclosure .pack-comparison-card {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.hub-body-pack .pack-equipment-summary {
  gap: 5px;
  padding: 10px 12px;
}

.hub-body-pack .pack-paperdoll {
  gap: 8px;
}

.hub-body-pack .pack-field-note {
  padding: 10px 12px;
}

.pack-group-list:has(.pack-item-row.active) .pack-item-row:not(.active),
.magic-grid:has(.magic-card.active) .magic-card:not(.active) {
  opacity: 0.82;
  filter: saturate(0.92);
}

.magic-feature-card {
  gap: 10px;
  padding: 12px 14px;
}

.magic-feature-detail {
  line-height: 1.45;
}

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

.magic-feature-disclosure,
.field-guide-disclosure,
.bank-disclosure,
.shop-row-disclosure {
  margin-top: 0;
}

.magic-feature-copy {
  color: rgba(223, 230, 244, 0.84);
  font-size: 0.82rem;
  line-height: 1.5;
}

.magic-feature-meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.magic-card {
  gap: 6px;
  padding: 10px 11px;
}

.magic-card-copy {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.36;
}

.magic-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.magic-card-actions-secondary,
.magic-feature-actions-secondary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.magic-card-actions .menu-button {
  min-height: 42px;
}

.field-guide-main {
  gap: 10px;
}

.field-guide-shell.field-guide-rail-collapsed .field-guide-rail {
  gap: 8px;
}

.field-guide-shell.field-guide-rail-collapsed .field-guide-rail .field-guide-brief:not(:first-child) {
  display: none;
}

.shop-row {
  gap: 6px;
  padding: 9px 10px;
}

.shop-row-disclosure .ui-disclosure-body {
  gap: 8px;
}

.shop-row-disclosure .pack-item-tags {
  margin-top: 0;
}

.workspace-overview {
  gap: 6px;
}

.top-band {
  min-height: 50px;
  padding: 8px 10px;
  gap: 8px;
}

.bottom-band {
  gap: 8px;
  padding: 10px;
}

.utility-bar {
  min-height: 50px;
  padding: 6px;
  gap: 6px;
}

#action-bar,
.action-bar,
.classic-action-bar {
  gap: 6px;
}

@media (min-width: 920px) {
  .hub-body-pack .pack-layout {
    grid-template-columns: minmax(320px, 0.92fr) minmax(280px, 0.8fr);
    align-items: start;
  }

  .hub-body-pack .pack-inventory-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .ui-disclosure {
    padding: 9px 10px;
    border-radius: 14px;
  }

  .ui-disclosure summary {
    align-items: start;
  }

  .ui-disclosure-summary {
    max-width: 54%;
    font-size: 0.7rem;
  }

  .utility-command-summary {
    padding: 9px 10px;
  }

  .utility-command-chips {
    gap: 6px;
  }

  .utility-command-chip {
    flex: 1 1 100%;
  }

  .utility-more-toggle {
    padding: 9px 10px;
  }

  .magic-feature-card {
    padding: 11px 12px;
  }

  .hub-body-pack [data-pack-equipment-host] {
    order: 1;
  }

  .hub-body-pack [data-pack-inspector-host] {
    order: 2;
  }

  .hub-body-pack .pack-inventory-panel {
    order: 3;
  }

  .magic-card-actions,
  .magic-feature-actions,
  .magic-card-actions-secondary,
  .magic-feature-actions-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field-guide-shell.field-guide-rail-collapsed .field-guide-rail {
    position: sticky;
    top: 38px;
    z-index: 3;
  }

  .field-guide-shell.field-guide-rail-collapsed .field-guide-rail .field-guide-brief {
    padding: 10px 11px;
  }

  .top-band {
    min-height: 46px;
    padding: 7px 8px;
  }

  .bottom-band {
    padding: 8px;
  }

  .utility-bar {
    min-height: 46px;
    padding: 5px;
  }
}

@media (min-width: 920px) {
  .hub-body-pack .pack-layout {
    grid-template-columns: minmax(0, 1.24fr) minmax(320px, 0.76fr);
  }

  .hub-body-pack .pack-inventory-panel {
    grid-column: 1;
    grid-row: 1;
  }

  .hub-body-pack .pack-side-rail {
    grid-column: 2;
    grid-row: 1;
  }
}

.pack-value-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pack-value-chip {
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(214, 198, 157, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  font-size: 0.72rem;
}

.pack-toolbar {
  display: grid;
  gap: 4px;
}

.pack-toolbar-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.pack-toolbar-chip,
.pack-toolbar-focus,
.pack-toolbar-detail {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(214, 198, 157, 0.06);
  font-size: 0.66rem;
}

.pack-toolbar-chip {
  color: #f1ddb6;
}

.pack-toolbar-detail {
  color: rgba(214, 221, 212, 0.72);
}

.pack-toolbar-focus {
  color: rgba(225, 230, 221, 0.88);
}

.pack-row-inline-compare {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 3px;
}

.pack-inline-chip {
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(214, 198, 157, 0.08);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(222, 226, 217, 0.82);
  font-size: 0.66rem;
  line-height: 1.25;
}

.pack-inline-chip.tone-good {
  color: #cde9d2;
  border-color: rgba(113, 188, 127, 0.18);
  background: rgba(27, 55, 31, 0.42);
}

.pack-inline-chip.tone-bad {
  color: #ffd2c2;
  border-color: rgba(212, 123, 88, 0.18);
  background: rgba(65, 31, 22, 0.42);
}

.pack-inline-chip.tone-neutral {
  color: rgba(228, 225, 214, 0.84);
}

.pack-layout.pack-layout-classic {
  grid-template-columns: minmax(240px, 0.78fr) minmax(320px, 1.08fr) minmax(300px, 0.94fr);
  align-items: start;
}

.pack-classic-toolbar,
.shop-transaction-toolbar {
  margin-bottom: 8px;
}

.pack-slot-panel,
.pack-classic-candidates {
  display: grid;
  gap: 10px;
}

.hub-window-pack .pack-slot-panel,
.hub-window-pack .pack-inventory-panel,
.hub-window-pack .pack-inspector-panel,
.shop-transaction-list-panel,
.shop-result-panel {
  align-content: start;
}

.hub-window-pack .pack-slot-panel {
  grid-template-rows: auto minmax(0, 1fr);
}

.hub-window-pack .pack-inventory-panel {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.hub-window-pack .pack-slot-list,
.hub-window-pack .pack-list-panel,
.shop-transaction-list-panel .shop-transaction-list {
  min-height: 0;
}

.pack-slot-list,
.pack-classic-list {
  display: grid;
  gap: 0;
}

.pack-slot-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  width: 100%;
  padding: 7px 2px;
  border: 0;
  border-bottom: 1px solid rgba(214, 198, 157, 0.1);
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.pack-slot-row.active {
  border-color: rgba(214, 170, 88, 0.24);
  box-shadow: inset 3px 0 0 rgba(214, 170, 88, 0.8);
  background: linear-gradient(90deg, rgba(104, 74, 27, 0.2), rgba(104, 74, 27, 0.04));
}

.pack-slot-row-main,
.pack-slot-row-side {
  display: grid;
  gap: 2px;
}

.pack-slot-row-side {
  justify-items: end;
  align-content: start;
}

.pack-slot-row-label {
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(214, 198, 157, 0.82);
}

.pack-slot-row-item {
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: #f2dfbb;
}

.pack-slot-row-note,
.pack-classic-note,
.pack-slot-row-stat {
  color: rgba(214, 221, 212, 0.72);
  font-size: 0.68rem;
  line-height: 1.2;
}

.pack-slot-row-ready {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(214, 198, 157, 0.08);
  color: rgba(242, 223, 187, 0.88);
  font-size: 0.62rem;
}

.pack-classic-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 2px;
}

.pack-classic-title {
  font-family: var(--font-display);
  font-size: 1rem;
  color: #f2dfbb;
}

.pack-item-row.pack-item-row-keep {
  border-style: dashed;
}

.pack-classic-empty {
  padding: 12px;
  border-radius: 8px;
  border: 1px dashed rgba(214, 198, 157, 0.12);
  background: rgba(255, 255, 255, 0.025);
}

.hub-body-pack-classic > .menu-quick-state {
  display: none;
}

.hub-body-pack-classic > .hub-summary-compact {
  display: none;
}

.pack-layout.pack-layout-classic .pack-equipment-summary.workspace-hero,
.pack-layout.pack-layout-classic .pack-value-strip {
  display: none;
}

@media (min-width: 920px) {
  .pack-layout.pack-layout-classic > [data-pack-equipment-host] {
    grid-column: 1;
    grid-row: 1;
  }

  .pack-layout.pack-layout-classic > .pack-inventory-panel {
    grid-column: 2;
    grid-row: 1;
  }

  .pack-layout.pack-layout-classic > .pack-side-rail {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (max-width: 760px) {
  .pack-layout.pack-layout-classic {
    grid-template-columns: 1fr;
  }

  .pack-layout.pack-layout-classic > .pack-side-rail {
    order: 1;
  }

  .pack-layout.pack-layout-classic > .pack-inventory-panel {
    order: 2;
  }

  .pack-layout.pack-layout-classic > [data-pack-equipment-host] {
    order: 3;
  }

  .pack-classic-header {
    display: none;
  }

  .pack-classic-candidates > .panel-title,
  .shop-transaction-list-panel > .panel-title {
    margin-bottom: 4px;
  }
}

.pack-decision-summary-grid {
  display: grid;
  gap: 3px;
  margin-bottom: 6px;
}

.pack-decision-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: rgba(222, 226, 217, 0.78);
  font-size: 0.74rem;
}

.pack-decision-summary-row strong {
  color: #f2dfbb;
  font-family: var(--font-display);
  font-size: 0.84rem;
}

.pack-decision-inline-row {
  margin-bottom: 10px;
}

.pack-decision-deltas,
.shop-decision-list {
  margin-bottom: 10px;
}

.shop-transaction-shell {
  display: grid;
  grid-template-columns: minmax(300px, 1.02fr) minmax(300px, 0.92fr);
  gap: 14px;
  align-items: start;
}

.shop-transaction-list {
  display: grid;
  gap: 6px;
}

.shop-transaction-row {
  text-align: left;
}

.shop-result-panel .pack-inspector-card {
  gap: 8px;
}

.shop-bulk-actions {
  margin-top: 10px;
}

@media (max-width: 760px) {
  .shop-transaction-shell {
    grid-template-columns: 1fr;
  }

  .shop-result-panel .pack-inspector-card,
  .pack-decision-panel .pack-inspector-card {
    gap: 6px;
  }

  .pack-decision-summary-grid {
    gap: 2px;
    margin-bottom: 4px;
  }

  .pack-comparison-row {
    font-size: 0.72rem;
    line-height: 1.2;
  }

  .pack-inspector-actions .menu-button {
    min-height: 40px;
    padding: 9px 12px;
  }
}

.hub-window-pack .pack-group-list,
.pack-classic-list,
.shop-transaction-list {
  gap: 0;
}

.hub-window-pack .pack-group-list .pack-item-row,
.pack-classic-list .pack-item-row,
.shop-transaction-list .pack-item-row {
  padding: 8px 2px;
  gap: 2px;
  border: 0;
  border-bottom: 1px solid rgba(214, 198, 157, 0.1);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.hub-window-pack .pack-group-list .pack-item-row:first-child,
.pack-classic-list .pack-item-row:first-child,
.shop-transaction-list .pack-item-row:first-child {
  border-top: 1px solid rgba(214, 198, 157, 0.08);
}

.hub-window-pack .pack-group-list .pack-item-row.pack-item-row-good,
.pack-classic-list .pack-item-row.pack-item-row-good,
.shop-transaction-list .pack-item-row.pack-item-row-good,
.hub-window-pack .pack-group-list .pack-item-row.pack-item-row-neutral,
.pack-classic-list .pack-item-row.pack-item-row-neutral,
.shop-transaction-list .pack-item-row.pack-item-row-neutral,
.hub-window-pack .pack-group-list .pack-item-row.pack-item-row-bad,
.pack-classic-list .pack-item-row.pack-item-row-bad,
.shop-transaction-list .pack-item-row.pack-item-row-bad {
  background: transparent;
}

.hub-window-pack .pack-group-list .pack-item-row.active,
.pack-classic-list .pack-item-row.active,
.shop-transaction-list .pack-item-row.active,
.hub-window-pack .pack-group-list .pack-item-row:focus-visible,
.pack-classic-list .pack-item-row:focus-visible,
.shop-transaction-list .pack-item-row:focus-visible {
  border-color: rgba(214, 170, 88, 0.24);
  background: linear-gradient(90deg, rgba(104, 74, 27, 0.22), rgba(104, 74, 27, 0.06));
  box-shadow: inset 4px 0 0 rgba(214, 170, 88, 0.9);
  transform: none;
}

.hub-window-pack .pack-group-list .pack-item-head,
.pack-classic-list .pack-item-head,
.shop-transaction-list .pack-item-head {
  gap: 8px;
  align-items: baseline;
}

.hub-window-pack .pack-group-list .pack-item-head-main,
.pack-classic-list .pack-item-head-main,
.shop-transaction-list .pack-item-head-main {
  gap: 1px;
}

.hub-window-pack .pack-group-list .pack-item-head-side,
.pack-classic-list .pack-item-head-side,
.shop-transaction-list .pack-item-head-side {
  gap: 2px;
}

.hub-window-pack .pack-group-list .pack-item-name,
.pack-classic-list .pack-item-name,
.shop-transaction-list .pack-item-name {
  font-size: 0.86rem;
}

.hub-window-pack .pack-group-list .pack-item-meta-compact,
.pack-classic-list .pack-item-meta-compact,
.shop-transaction-list .pack-item-meta-compact,
.shop-transaction-list .pack-slot-row-note {
  font-size: 0.68rem;
  line-height: 1.2;
  color: rgba(214, 221, 212, 0.68);
}

.hub-window-pack .pack-group-list .pack-row-chip,
.pack-classic-list .pack-row-chip,
.shop-transaction-list .pack-row-chip {
  padding: 1px 6px;
  font-size: 0.62rem;
}

.hub-window-pack .pack-group-list .pack-row-inline-compare,
.pack-classic-list .pack-row-inline-compare,
.shop-transaction-list .pack-row-inline-compare {
  display: none;
}

.pack-inspector-card {
  gap: 8px;
  padding: 11px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(22, 28, 30, 0.92), rgba(12, 17, 19, 0.95));
  border: 1px solid rgba(214, 198, 157, 0.1);
  box-shadow: none;
}

.pack-inspector-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pack-inspector-title {
  font-size: 0.98rem;
}

.pack-inspector-note,
.pack-hover-preview-note,
.pack-hover-preview-copy {
  font-size: 0.74rem;
}

.pack-comparison-row {
  font-size: 0.76rem;
  line-height: 1.25;
}

.pack-inspector-actions {
  margin-top: 2px;
}

.pack-side-rail .pack-inspector-card {
  border-color: rgba(214, 198, 157, 0.08);
  background: linear-gradient(180deg, rgba(19, 24, 27, 0.84), rgba(11, 15, 18, 0.9));
}

.pack-column .pack-classic-list,
.shop-transaction-list {
  border-top: 1px solid rgba(214, 198, 157, 0.08);
}

@media (max-width: 760px) {
  .pack-toolbar-meta {
    gap: 3px;
  }

  .pack-toolbar-chip,
  .pack-toolbar-detail {
    padding: 2px 6px;
    font-size: 0.62rem;
  }

  .pack-inspector-card {
    padding: 10px 11px;
  }

  .pack-slot-row {
    padding: 6px 1px;
  }
}

.pack-loadout-disclosure {
  margin-top: 0;
}

@media (min-width: 920px) {
  #modal-root .modal:has(.hub-window-pack) {
    width: min(1280px, calc(100vw - 48px));
    height: min(91vh, 940px);
    max-height: min(91vh, 940px);
  }

  .hub-body-pack > .menu-quick-state,
  .hub-window-pack .menu-quick-state {
    display: none !important;
  }

  .hub-window-pack .hub-summary-compact {
    gap: 8px;
  }

  .hub-window-pack .mini-panel {
    min-height: 66px;
    padding: 9px 11px;
  }

  .hub-body-pack .pack-layout {
    grid-template-columns: minmax(0, 1.44fr) minmax(300px, 0.7fr);
    gap: 14px;
  }

  .hub-window-pack .pack-inventory-panel,
  .hub-window-pack .pack-equipment-panel,
  .hub-window-pack .pack-inspector-panel {
    padding: 12px;
  }

  .hub-window-pack .pack-inventory-panel .panel-title,
  .hub-window-pack .pack-equipment-panel .panel-title,
  .hub-window-pack .pack-inspector-panel .panel-title {
    margin-bottom: 4px;
  }

  .hub-window-pack [data-pack-filter-host] {
    margin-bottom: 2px;
  }

  .hub-window-pack .pack-toolbar {
    gap: 6px;
  }

  .hub-window-pack .pack-toolbar-meta {
    gap: 5px;
  }

  .hub-window-pack .pack-toolbar-chip,
  .hub-window-pack .pack-toolbar-detail,
  .hub-window-pack .pack-toolbar-focus {
    padding: 3px 7px;
    font-size: 0.66rem;
  }

  .hub-window-pack .pack-group {
    gap: 6px;
  }

  .hub-window-pack .pack-group + .pack-group {
    margin-top: 8px;
  }

  .hub-window-pack .pack-subgroup + .pack-subgroup {
    margin-top: 8px;
  }

  .hub-window-pack .pack-subgroup-heading {
    margin-bottom: 5px;
  }

  .hub-window-pack .pack-group-list {
    gap: 5px;
  }

  .hub-window-pack .pack-item-row {
    padding: 9px 10px;
    gap: 3px;
  }

  .hub-window-pack .pack-item-head {
    gap: 8px;
  }

  .hub-window-pack .pack-item-head-main {
    gap: 2px;
  }

  .hub-window-pack .pack-item-name {
    font-size: 0.82rem;
  }

  .hub-window-pack .pack-item-meta-compact {
    font-size: 0.68rem;
    line-height: 1.2;
    color: rgba(214, 221, 212, 0.7);
  }

  .hub-window-pack .pack-row-chip {
    padding: 2px 7px;
    font-size: 0.64rem;
  }

  .hub-window-pack .pack-row-inline-compare {
    gap: 4px;
    margin-top: 2px;
  }

  .hub-window-pack .pack-inline-chip {
    padding: 2px 5px;
    font-size: 0.62rem;
  }

  .hub-window-pack .pack-inspector-card {
    gap: 10px;
    padding: 12px;
  }

  .hub-window-pack .pack-inspector-copy {
    font-size: 0.76rem;
    line-height: 1.35;
  }

  .hub-window-pack .pack-risk-callout {
    padding: 8px 10px;
    font-size: 0.76rem;
    line-height: 1.35;
  }

  .hub-window-pack .pack-equipment-summary {
    gap: 4px;
    padding: 8px 10px;
  }

  .hub-window-pack .pack-equipment-summary .workspace-title {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .hub-window-pack .pack-build-tags {
    margin-top: 0;
    gap: 6px;
  }

  .hub-window-pack .pack-equipment-summary .pack-build-tags {
    display: none;
  }

  .hub-window-pack .paper-slot {
    min-height: 58px;
    padding: 7px 8px;
  }

  .hub-window-pack .pack-field-note {
    padding: 0;
    border: 0;
    background: transparent;
  }
}

.hub-window-pack .pack-equip-workspace {
  display: grid;
  gap: 12px;
}

#modal-root .modal:has(.hub-window-pack-equip) .modal-interaction-feedback {
  display: none;
}

.hub-window-pack-equip .hub-tabs {
  gap: 6px;
  padding-bottom: 2px;
  background: linear-gradient(180deg, rgba(18, 22, 25, 0.88), rgba(18, 22, 25, 0.4), transparent);
}

.hub-window-pack-equip .hub-tab {
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 0.84rem;
  opacity: 0.78;
}

.hub-window-pack-equip .hub-tab.active {
  opacity: 1;
}

.hub-window-pack .pack-equip-controls {
  display: grid;
  gap: 10px;
}

.hub-window-pack .pack-equip-controls [data-pack-filter-host] {
  margin-bottom: 0;
}

.hub-window-pack .pack-slot-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hub-window-pack .pack-slot-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hub-window-pack .pack-slot-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(214, 198, 157, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  color: rgba(232, 221, 199, 0.86);
  text-align: left;
}

.hub-window-pack .pack-slot-tab.active,
.hub-window-pack .pack-slot-tab:focus-visible {
  border-color: rgba(214, 170, 88, 0.28);
  background: linear-gradient(180deg, rgba(104, 74, 27, 0.24), rgba(104, 74, 27, 0.08));
  box-shadow: inset 0 0 0 1px rgba(214, 170, 88, 0.08);
}

.hub-window-pack .pack-slot-tab-label {
  font-size: 0.72rem;
  font-family: var(--font-display);
  color: #f2dfbb;
}

.hub-window-pack .pack-slot-tab-badge,
.hub-window-pack .pack-slot-tab-state {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(214, 198, 157, 0.08);
  color: rgba(214, 221, 212, 0.78);
  font-size: 0.62rem;
}

.hub-window-pack .pack-slot-subtab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid rgba(214, 198, 157, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.015);
  color: rgba(214, 221, 212, 0.78);
}

.hub-window-pack .pack-slot-subtab.active,
.hub-window-pack .pack-slot-subtab:focus-visible {
  border-color: rgba(214, 170, 88, 0.22);
  background: linear-gradient(180deg, rgba(104, 74, 27, 0.16), rgba(104, 74, 27, 0.05));
}

.hub-window-pack .pack-slot-subtab-label {
  font-size: 0.66rem;
  font-family: var(--font-display);
  color: #f2dfbb;
}

.hub-window-pack .pack-slot-subtab-state {
  color: rgba(214, 221, 212, 0.68);
  font-size: 0.6rem;
}

.hub-window-pack .pack-layout.pack-layout-equip {
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.82fr);
  gap: 16px;
  align-items: start;
}

.hub-window-pack .pack-layout.pack-layout-equip .pack-inventory-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
}

.hub-window-pack .pack-layout.pack-layout-equip .pack-side-rail {
  min-width: 0;
}

.hub-window-pack .pack-equip-list-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px 2px;
}

.hub-window-pack .pack-equip-list-title {
  font-family: var(--font-display);
  font-size: 1rem;
  color: #f2dfbb;
}

.hub-window-pack .pack-equip-list-note {
  color: rgba(214, 221, 212, 0.7);
  font-size: 0.68rem;
}

.hub-window-pack .pack-layout.pack-layout-equip .pack-list-panel {
  max-height: min(58vh, 620px);
}

.pack-group-list,
.pack-classic-list,
.pack-list-panel {
  align-content: start;
}

@media (max-width: 760px) {
  .pack-loadout-disclosure .pack-paperdoll {
    margin-top: 2px;
  }

  .pack-loadout-disclosure .ui-disclosure-body {
    gap: 8px;
  }

  .pack-toolbar {
    gap: 7px;
  }

  .pack-toolbar-meta {
    gap: 5px;
  }

  .pack-toolbar-focus {
    flex-basis: 100%;
  }

  .hub-window-pack .pack-slot-tabs {
    flex-wrap: wrap;
    padding-bottom: 2px;
  }

  .hub-window-pack .pack-slot-subtabs {
    flex-wrap: wrap;
    padding-bottom: 2px;
  }

  .hub-window-pack .pack-slot-tab {
    flex: 1 1 auto;
    min-width: 88px;
    justify-content: center;
  }

  .hub-window-pack .pack-layout.pack-layout-equip {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hub-window-pack .pack-layout.pack-layout-equip .pack-side-rail {
    order: 2;
  }

  .hub-window-pack .pack-layout.pack-layout-equip .pack-inventory-panel {
    order: 1;
  }

  .hub-window-pack-equip .hub-tabs {
    gap: 4px;
  }

  .hub-window-pack-equip .hub-tab {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 0.8rem;
  }
}

.hub-window-magic .hub-tabs {
  gap: 6px;
  padding-bottom: 2px;
  background: linear-gradient(180deg, rgba(18, 22, 25, 0.88), rgba(18, 22, 25, 0.4), transparent);
}

#modal-root .modal:has(.hub-window-magic) .modal-interaction-feedback {
  display: none;
}

.hub-window-magic .hub-tab {
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 0.84rem;
}

.hub-window-magic .hub-body-magic-classic {
  display: grid;
  gap: 12px;
}

.hub-window-magic .magic-workspace {
  display: grid;
  gap: 12px;
}

.hub-window-magic .magic-controls {
  display: grid;
  gap: 8px;
}

.hub-window-magic .magic-layout {
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.82fr);
  gap: 16px;
  align-items: start;
}

.hub-window-magic .magic-book-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
}

.hub-window-magic .magic-book-list {
  gap: 0;
  align-content: start;
  max-height: min(58vh, 620px);
}

.hub-window-magic .magic-book-list .magic-card {
  padding: 8px 2px;
  gap: 2px;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid rgba(214, 198, 157, 0.1);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.hub-window-magic .magic-book-list .magic-card:first-child {
  border-top: 1px solid rgba(214, 198, 157, 0.08);
}

.hub-window-magic .magic-book-list .magic-card.pack-item-row-good,
.hub-window-magic .magic-book-list .magic-card.pack-item-row-neutral,
.hub-window-magic .magic-book-list .magic-card.pack-item-row-bad {
  background: transparent;
}

.hub-window-magic .magic-book-list .magic-card.active,
.hub-window-magic .magic-book-list .magic-card:focus-visible {
  border-color: rgba(214, 170, 88, 0.24);
  background: linear-gradient(90deg, rgba(104, 74, 27, 0.22), rgba(104, 74, 27, 0.06));
  box-shadow: inset 4px 0 0 rgba(214, 170, 88, 0.9);
  transform: none;
}

.hub-window-magic .magic-book-list:has(.magic-card.active) .magic-card:not(.active) {
  opacity: 0.82;
  filter: saturate(0.92);
}

.hub-window-magic .magic-book-list .pack-item-head {
  gap: 8px;
  align-items: baseline;
}

.hub-window-magic .magic-book-list .pack-item-head-main {
  gap: 1px;
}

.hub-window-magic .magic-book-list .pack-item-head-side {
  gap: 2px;
}

.hub-window-magic .magic-book-list .pack-item-name {
  font-size: 0.86rem;
}

.hub-window-magic .magic-book-list .pack-item-meta-compact,
.hub-window-magic .magic-list-row-note {
  font-size: 0.68rem;
  line-height: 1.2;
  color: rgba(214, 221, 212, 0.68);
}

.hub-window-magic .magic-book-list .pack-row-chip {
  padding: 1px 6px;
  font-size: 0.62rem;
}

.hub-window-magic .magic-result-panel .pack-inspector-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.magic-result-copy {
  color: rgba(223, 230, 244, 0.84);
  font-size: 0.82rem;
  line-height: 1.45;
}

.magic-result-rows {
  display: grid;
  gap: 6px;
}

.magic-result-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: 0.76rem;
}

.magic-result-row span {
  color: rgba(214, 221, 212, 0.68);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.64rem;
}

.magic-result-row strong {
  justify-self: end;
  text-align: right;
}

.magic-result-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.magic-result-actions .menu-button {
  min-height: 40px;
}

@media (max-width: 760px) {
  .hub-window-magic .hub-tabs {
    gap: 4px;
  }

  .hub-window-magic .hub-tab {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 0.8rem;
  }

  .hub-window-magic .magic-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hub-window-magic .magic-side-rail {
    order: 2;
  }

  .hub-window-magic .magic-book-panel {
    order: 1;
  }
}

/* Menu readability pass */
.hub-window-pack .panel-title,
.hub-window-magic .panel-title,
.shop-workspace .panel-title {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
}

.hub-window-pack .hub-tab,
.hub-window-magic .hub-tab,
.shop-workspace .hub-filter-chip {
  font-size: 0.92rem;
}

.hub-window-pack .hub-filter-chip,
.hub-window-magic .hub-filter-chip {
  font-size: 0.84rem;
}

.hub-window-pack .pack-toolbar-chip,
.hub-window-pack .pack-toolbar-detail,
.hub-window-pack .pack-toolbar-focus,
.hub-window-magic .pack-toolbar-chip,
.hub-window-magic .pack-toolbar-detail,
.hub-window-magic .pack-toolbar-focus,
.shop-workspace .pack-toolbar-chip,
.shop-workspace .pack-toolbar-detail {
  font-size: 0.76rem;
}

.hub-window-pack .pack-item-name,
.hub-window-magic .magic-book-list .pack-item-name,
.shop-transaction-list .pack-item-name {
  font-size: 0.96rem;
}

.hub-window-pack .pack-item-meta-compact,
.hub-window-pack .pack-slot-row-note,
.hub-window-magic .magic-book-list .pack-item-meta-compact,
.hub-window-magic .magic-list-row-note,
.shop-transaction-list .pack-item-meta-compact,
.shop-transaction-list .pack-slot-row-note {
  font-size: 0.78rem;
  line-height: 1.3;
}

.hub-window-pack .pack-row-chip,
.hub-window-magic .magic-book-list .pack-row-chip,
.shop-transaction-list .pack-row-chip {
  font-size: 0.72rem;
  padding: 2px 7px;
}

.hub-window-pack .pack-inspector-kicker,
.hub-window-magic .pack-inspector-kicker,
.shop-result-panel .pack-inspector-kicker {
  font-size: 0.74rem;
}

.hub-window-pack .pack-inspector-title,
.hub-window-magic .pack-inspector-title,
.shop-result-panel .pack-inspector-title {
  font-size: 1.08rem;
}

.hub-window-pack .pack-inspector-note,
.hub-window-pack .pack-inspector-copy,
.hub-window-pack .pack-hover-preview-note,
.hub-window-pack .pack-hover-preview-copy,
.hub-window-magic .pack-inspector-note,
.hub-window-magic .magic-result-copy,
.shop-result-panel .pack-inspector-note,
.shop-result-panel .pack-inspector-copy {
  font-size: 0.84rem;
  line-height: 1.4;
}

.hub-window-pack .pack-comparison-row,
.hub-window-magic .magic-result-row,
.shop-result-panel .pack-comparison-row {
  font-size: 0.82rem;
}

.hub-window-magic .magic-result-row span {
  font-size: 0.68rem;
}

.hub-window-pack .pack-slot-tab-label {
  font-size: 0.8rem;
}

.hub-window-pack .pack-slot-tab-badge,
.hub-window-pack .pack-slot-tab-state,
.hub-window-pack .pack-slot-subtab-label,
.hub-window-pack .pack-slot-subtab-state {
  font-size: 0.68rem;
}

.hub-window-pack .pack-equip-list-note,
.hub-window-magic .pack-equip-list-note {
  font-size: 0.78rem;
}

@media (max-width: 760px) {
  .hub-window-pack .panel-title,
  .hub-window-magic .panel-title,
  .shop-workspace .panel-title {
    font-size: 0.78rem;
  }

  .hub-window-pack .hub-tab,
  .hub-window-magic .hub-tab,
  .shop-workspace .hub-filter-chip {
    font-size: 0.86rem;
  }

  .hub-window-pack .hub-filter-chip,
  .hub-window-magic .hub-filter-chip {
    font-size: 0.8rem;
  }

  .hub-window-pack .pack-toolbar-chip,
  .hub-window-pack .pack-toolbar-detail,
  .hub-window-magic .pack-toolbar-chip,
  .hub-window-magic .pack-toolbar-detail,
  .shop-workspace .pack-toolbar-chip,
  .shop-workspace .pack-toolbar-detail {
    font-size: 0.72rem;
    padding: 3px 7px;
  }

  .hub-window-pack .pack-item-name,
  .hub-window-magic .magic-book-list .pack-item-name,
  .shop-transaction-list .pack-item-name {
    font-size: 0.9rem;
  }

  .hub-window-pack .pack-item-meta-compact,
  .hub-window-pack .pack-slot-row-note,
  .hub-window-magic .magic-book-list .pack-item-meta-compact,
  .hub-window-magic .magic-list-row-note,
  .shop-transaction-list .pack-item-meta-compact,
  .shop-transaction-list .pack-slot-row-note {
    font-size: 0.74rem;
  }

  .hub-window-pack .pack-row-chip,
  .hub-window-magic .magic-book-list .pack-row-chip,
  .shop-transaction-list .pack-row-chip {
    font-size: 0.68rem;
  }

  .hub-window-pack .pack-inspector-title,
  .hub-window-magic .pack-inspector-title,
  .shop-result-panel .pack-inspector-title {
    font-size: 1rem;
  }

  .hub-window-pack .pack-inspector-note,
  .hub-window-pack .pack-inspector-copy,
  .hub-window-magic .pack-inspector-note,
  .hub-window-magic .magic-result-copy,
  .shop-result-panel .pack-inspector-note,
  .shop-result-panel .pack-inspector-copy {
    font-size: 0.8rem;
  }
}

/* Let workspace menus use the screen */
#modal-root .modal.modal-frame.modal-surface-workspace:not(.title-screen):not(.creation-sheet) {
  width: min(1480px, calc(100vw - 10px));
  height: calc(100vh - 10px);
  max-height: calc(100vh - 10px);
}

#modal-root .modal:has(.hub-window-pack),
#modal-root .modal:has(.hub-window-journal),
#modal-root .modal:has(.hub-window-magic),
#modal-root .modal:has(.shop-workspace) {
  width: min(1480px, calc(100vw - 10px));
  height: calc(100vh - 10px);
  max-height: calc(100vh - 10px);
}

@media (min-width: 920px) {
  #modal-root .modal:has(.hub-window-pack),
  #modal-root .modal:has(.hub-window-journal),
  #modal-root .modal:has(.hub-window-magic),
  #modal-root .modal:has(.shop-workspace) {
    width: min(1560px, calc(100vw - 20px));
    height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
  }
}

@media (max-width: 760px) {
  #modal-root .modal.modal-frame.modal-surface-workspace:not(.title-screen):not(.creation-sheet),
  #modal-root .modal:has(.hub-window-pack),
  #modal-root .modal:has(.hub-window-journal),
  #modal-root .modal:has(.hub-window-magic),
  #modal-root .modal:has(.shop-workspace) {
    width: calc(100vw - 6px);
    height: calc(100vh - 6px);
    max-height: calc(100vh - 6px);
    border-radius: 18px;
  }
}

@media (min-width: 920px) {
  #modal-root .modal:has(.hub-window-pack) .modal-interaction-feedback,
  #modal-root .modal:has(.hub-window-magic) .modal-interaction-feedback,
  #modal-root .modal:has(.shop-workspace) .modal-interaction-feedback {
    display: none;
  }

  #modal-root .modal:has(.hub-window-pack) .modal-title,
  #modal-root .modal:has(.hub-window-magic) .modal-title,
  #modal-root .modal:has(.shop-workspace) .modal-title {
    padding: 16px 18px 12px;
    font-size: 1.7rem;
    line-height: 1.05;
    letter-spacing: 0;
  }

  #modal-root .modal:has(.hub-window-pack) .modal-body,
  #modal-root .modal:has(.hub-window-magic) .modal-body,
  #modal-root .modal:has(.shop-workspace) .modal-body,
  #modal-root .modal:has(.hub-window-pack) > .modal-actions,
  #modal-root .modal:has(.hub-window-magic) > .modal-actions,
  #modal-root .modal:has(.shop-workspace) > .modal-actions {
    padding-left: 18px;
    padding-right: 18px;
  }

  .hub-window-pack,
  .hub-window-magic,
  .shop-workspace {
    gap: 16px;
  }

  .hub-window-pack .panel-title,
  .hub-window-magic .panel-title,
  .shop-workspace .panel-title {
    margin-bottom: 6px;
    font-size: 0.98rem;
    letter-spacing: 0;
  }

  .hub-window-pack .hub-tab,
  .hub-window-magic .hub-tab,
  .shop-workspace .hub-filter-chip {
    min-height: 40px;
    padding: 8px 14px;
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0;
  }

  .hub-window-pack .hub-filter-chip,
  .hub-window-magic .hub-filter-chip {
    min-height: 34px;
    padding: 6px 12px;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0;
  }

  .hub-window-pack .pack-toolbar-chip,
  .hub-window-pack .pack-toolbar-detail,
  .hub-window-pack .pack-toolbar-focus,
  .hub-window-magic .pack-toolbar-chip,
  .hub-window-magic .pack-toolbar-detail,
  .hub-window-magic .pack-toolbar-focus,
  .shop-workspace .pack-toolbar-chip,
  .shop-workspace .pack-toolbar-detail {
    font-family: var(--font-ui);
    font-size: 0.86rem;
    font-weight: 700;
  }

  .hub-window-pack .pack-layout.pack-layout-equip,
  .hub-window-magic .magic-layout,
  .shop-transaction-shell {
    gap: 20px;
  }

  .hub-window-pack .pack-layout.pack-layout-equip {
    grid-template-columns: minmax(0, 1.18fr) minmax(430px, 0.88fr);
  }

  .hub-window-magic .magic-layout {
    grid-template-columns: minmax(0, 1.12fr) minmax(430px, 0.88fr);
  }

  .shop-transaction-shell {
    grid-template-columns: minmax(0, 1.04fr) minmax(440px, 0.96fr);
  }

  .hub-window-pack .pack-equip-list-title,
  .hub-window-magic .pack-equip-list-title {
    font-size: 1.12rem;
    letter-spacing: 0;
  }

  .hub-window-pack .pack-equip-list-note,
  .hub-window-magic .pack-equip-list-note {
    font-size: 0.84rem;
  }

  .hub-window-pack .pack-layout.pack-layout-equip .pack-list-panel,
  .hub-window-magic .magic-book-list,
  .shop-transaction-list-panel .shop-transaction-list {
    max-height: min(71vh, 860px);
  }

  .hub-window-pack .pack-group-list .pack-item-row,
  .pack-classic-list .pack-item-row,
  .shop-transaction-list .pack-item-row,
  .hub-window-magic .magic-book-list .magic-card {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .hub-window-pack .pack-item-name,
  .hub-window-magic .magic-book-list .pack-item-name,
  .shop-transaction-list .pack-item-name {
    font-family: var(--font-ui);
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.15;
  }

  .hub-window-pack .pack-item-meta-compact,
  .hub-window-pack .pack-slot-row-note,
  .hub-window-magic .magic-book-list .pack-item-meta-compact,
  .hub-window-magic .magic-list-row-note,
  .shop-transaction-list .pack-item-meta-compact,
  .shop-transaction-list .pack-slot-row-note {
    font-family: var(--font-ui);
    font-size: 0.86rem;
    line-height: 1.35;
  }

  .hub-window-pack .pack-row-chip,
  .hub-window-magic .magic-book-list .pack-row-chip,
  .shop-transaction-list .pack-row-chip {
    border-radius: 8px;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 2px 7px;
  }

  .hub-window-pack .pack-inspector-card,
  .hub-window-magic .pack-inspector-card,
  .shop-result-panel .pack-inspector-card {
    gap: 10px;
    padding: 16px 18px;
  }

  .hub-window-pack .pack-inspector-kicker,
  .hub-window-magic .pack-inspector-kicker,
  .shop-result-panel .pack-inspector-kicker {
    font-size: 0.8rem;
    letter-spacing: 0;
  }

  .hub-window-pack .pack-inspector-title,
  .hub-window-magic .pack-inspector-title,
  .shop-result-panel .pack-inspector-title {
    font-family: var(--font-ui);
    font-size: 1.34rem;
    font-weight: 800;
    line-height: 1.12;
  }

  .hub-window-pack .pack-inspector-note,
  .hub-window-pack .pack-inspector-copy,
  .hub-window-pack .pack-hover-preview-note,
  .hub-window-pack .pack-hover-preview-copy,
  .hub-window-magic .pack-inspector-note,
  .hub-window-magic .magic-result-copy,
  .shop-result-panel .pack-inspector-note,
  .shop-result-panel .pack-inspector-copy {
    font-family: var(--font-ui);
    font-size: 0.96rem;
    line-height: 1.45;
  }

  .hub-window-pack .pack-comparison-row,
  .hub-window-magic .magic-result-row,
  .shop-result-panel .pack-comparison-row {
    font-family: var(--font-ui);
    font-size: 0.94rem;
    line-height: 1.35;
  }

  .hub-window-magic .magic-result-row span {
    font-size: 0.82rem;
  }

  .hub-window-pack .pack-slot-tab-label {
    font-size: 0.94rem;
  }

  .hub-window-pack .pack-slot-tab-badge,
  .hub-window-pack .pack-slot-tab-state,
  .hub-window-pack .pack-slot-subtab-label,
  .hub-window-pack .pack-slot-subtab-state {
    font-size: 0.76rem;
  }
}

/* Desktop remaster shell */

.desktop-shell {
  position: absolute;
  top: 14px;
  left: 18px;
  right: 18px;
  display: grid;
  gap: 8px;
  z-index: 2;
}

.desktop-shell.hidden,
.desktop-aux-stack.hidden,
.desktop-map-host.hidden,
.desktop-status-host.hidden {
  display: none;
}

.desktop-shell-menu-row,
.desktop-shell-verb-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.desktop-shell-menu-row {
  justify-content: flex-start;
}

.desktop-shell-surface,
.desktop-verb-button,
.desktop-quickslot {
  border: 1px solid rgba(216, 194, 154, 0.18);
  background:
    linear-gradient(180deg, rgba(16, 22, 28, 0.86), rgba(9, 13, 18, 0.74)),
    radial-gradient(circle at top left, rgba(214, 170, 88, 0.07), transparent 36%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 12px 24px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(10px);
}

.desktop-shell-surface {
  min-width: 112px;
  min-height: 42px;
  padding: 9px 16px;
  border-radius: 15px;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.desktop-shell-surface:disabled,
.desktop-verb-button:disabled,
.desktop-quickslot:disabled {
  opacity: 0.5;
  cursor: default;
}

.desktop-shell-verb-row {
  justify-content: space-between;
}

.desktop-verb-host {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.desktop-verb-button {
  min-height: 46px;
  padding: 8px 11px;
  border-radius: 16px;
  display: grid;
  gap: 0;
  justify-items: start;
  text-align: left;
}

.desktop-verb-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.desktop-verb-prompt {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(231, 206, 150, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(236, 212, 164, 0.88);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.desktop-verb-button .desktop-verb-label {
  font-size: 0.96rem;
  font-weight: 800;
  color: #f3e7ca;
  line-height: 1;
}

.desktop-verb-button.active,
.desktop-verb-button:focus-visible,
.desktop-quickslot.active,
.desktop-quickslot:focus-visible,
.desktop-shell-surface:focus-visible {
  border-color: rgba(228, 196, 122, 0.44);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 14px 28px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(228, 196, 122, 0.18);
}

.desktop-verb-button.desktop-context-verb {
  background:
    linear-gradient(180deg, rgba(110, 82, 26, 0.94), rgba(82, 56, 16, 0.86)),
    radial-gradient(circle at top left, rgba(255, 215, 140, 0.1), transparent 42%);
}

.desktop-verb-button.desktop-context-verb .desktop-verb-label,
.desktop-verb-button.desktop-context-verb .desktop-verb-note {
  color: #f9efda;
}

.desktop-quickslots-host {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 6px;
  max-width: min(620px, 46vw);
  overflow-x: auto;
  padding-bottom: 2px;
}

.desktop-quickslot {
  width: 56px;
  min-width: 56px;
  min-height: 54px;
  padding: 6px;
  border-radius: 15px;
  display: grid;
  gap: 3px;
  align-content: space-between;
  justify-items: center;
  text-align: center;
}

.desktop-quickslot-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.2em;
  font-size: 1.22rem;
  line-height: 1;
  color: #f4d79f;
}

.desktop-quickslot-name {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.1;
  color: #ede3cb;
}

.desktop-quickslot-cost {
  font-size: 0.68rem;
  color: rgba(205, 215, 224, 0.74);
}

.desktop-quickslot.warning .desktop-quickslot-cost {
  color: #f2b49c;
}

.desktop-quickslot-empty {
  opacity: 0.42;
  justify-items: center;
  align-content: center;
}

.desktop-quickslot-empty .desktop-quickslot-symbol {
  min-width: 1.1rem;
}

.desktop-quickslot-empty .desktop-quickslot-name,
.desktop-quickslot-empty .desktop-quickslot-cost {
  display: none;
}

.desktop-quickslot-open {
  width: 72px;
  min-width: 72px;
  justify-items: center;
  align-content: center;
}

.desktop-quickslot-open .desktop-quickslot-name {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.desktop-aux-stack {
  position: absolute;
  right: 18px;
  bottom: 206px;
  display: grid;
  gap: 10px;
  justify-items: end;
  z-index: 2;
}

.desktop-map-host,
.desktop-status-host {
  min-width: 0;
}

.desktop-map-host .map-panel,
.desktop-status-host .stat-band {
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(216, 194, 154, 0.16);
  background:
    linear-gradient(180deg, rgba(11, 15, 20, 0.92), rgba(8, 10, 15, 0.86)),
    radial-gradient(circle at top left, rgba(214, 170, 88, 0.06), transparent 34%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 14px 28px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
}

.desktop-map-host .map-panel {
  width: 210px;
  gap: 8px;
}

.desktop-map-host .map-panel-head {
  gap: 8px;
}

.desktop-map-host #map-canvas {
  width: 100%;
  max-height: 176px;
  border-radius: 14px;
}

.desktop-map-host .mini-caption {
  display: grid;
  gap: 4px;
  font-size: 0.7rem;
}

.desktop-status-host {
  width: 234px;
}

.desktop-status-host .stat-band-head {
  display: none;
}

.desktop-status-host .rail-stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.desktop-status-host .rail-stat-pill {
  gap: 5px;
  padding: 8px 9px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
}

.desktop-status-host .rail-stat-pill span {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.desktop-status-host .rail-stat-pill strong {
  font-size: 0.92rem;
}

.desktop-status-host .rail-meter {
  height: 5px;
}

@media (min-width: 1080px) {
  .mobile-app[data-layout="desktop"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "top"
      "main";
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    align-items: stretch;
    max-width: 1720px;
    gap: 10px;
    overflow: hidden;
  }

  .mobile-app[data-layout="desktop"] .top-band {
    display: none;
  }

  .mobile-app[data-layout="desktop"] .play-layout {
    grid-area: main;
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
  }

  .mobile-app[data-layout="desktop"] .board-cluster {
    gap: 0;
    min-height: 0;
  }

  .mobile-app[data-layout="desktop"] .board-stage {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    padding: 8px;
  }

  .mobile-app[data-layout="desktop"] .board-frame {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
  }

  .mobile-app[data-layout="desktop"] #game-canvas {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    margin: 0 auto;
  }

  .mobile-app[data-layout="desktop"] .board-overlays {
    top: 0;
    right: 0;
  }

  .mobile-app[data-layout="desktop"] #event-ticker.message-log {
    left: 18px;
    right: 18px;
    bottom: 18px;
    min-height: 176px;
    max-height: 176px;
  }

  .mobile-app[data-layout="desktop"] .spell-tray,
  .mobile-app[data-layout="desktop"] #spell-tray-toggle-button {
    display: none !important;
  }

.mobile-app[data-layout="desktop"] .bottom-band {
  display: none;
  }
}

#modal-root .modal-interaction-feedback[hidden],
#modal-root .modal-interaction-feedback:not(.visible) {
  display: none !important;
}

.workspace-summary-strip {
  display: grid;
  gap: 8px;
}

.workspace-summary-chip {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(214, 198, 157, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.workspace-summary-label {
  color: rgba(214, 221, 212, 0.68);
  font-size: 0.74rem;
  font-family: var(--font-ui);
  font-weight: 700;
  text-transform: uppercase;
}

.workspace-summary-chip strong,
.workspace-detail-title {
  color: #f4ebd5;
  font-family: var(--font-ui);
  font-weight: 800;
}

.workspace-shell {
  display: grid;
  gap: 14px;
}

.workspace-rail,
.workspace-rail-detail,
.save-slot-detail-stack,
.character-resource-stack {
  display: grid;
  gap: 12px;
  min-width: 0;
  align-content: start;
}

.workspace-detail-card,
.workspace-ledger-group {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(214, 198, 157, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}

.workspace-plain-copy {
  color: rgba(224, 228, 220, 0.84);
  font-size: 0.86rem;
  line-height: 1.5;
}

.workspace-ledger {
  display: grid;
  gap: 0;
}

.workspace-ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 10px 0;
  border-top: 1px solid rgba(214, 198, 157, 0.08);
}

.workspace-ledger-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.workspace-ledger-row:last-child {
  padding-bottom: 0;
}

.workspace-ledger-row strong {
  color: #f0e7d2;
  font-family: var(--font-ui);
}

.save-slot-ledger {
  display: grid;
  gap: 0;
}

.save-slot-select {
  width: 100%;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 0;
  border-top: 1px solid rgba(214, 198, 157, 0.08);
  background: transparent;
  text-align: left;
}

.save-slot-select:first-child {
  border-top: 0;
}

.save-slot-select-head,
.save-slot-select-badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.save-slot-select-name {
  color: #f3ead6;
  font-family: var(--font-ui);
  font-weight: 800;
}

.save-slot-select-meta {
  color: rgba(214, 221, 212, 0.7);
  font-size: 0.82rem;
  line-height: 1.35;
}

.save-slot-select.active,
.save-slot-select:focus-visible {
  background: linear-gradient(90deg, rgba(104, 74, 27, 0.2), rgba(104, 74, 27, 0.05));
  box-shadow: inset 4px 0 0 rgba(214, 170, 88, 0.9);
}

.save-slot-detail-actions,
.service-ledger-actions,
.save-slot-title-music-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.service-ledger-row .muted,
.settings-ledger-row .muted,
.workspace-ledger-row .muted {
  line-height: 1.35;
}

.settings-ledger-row .menu-button,
.service-ledger-actions .menu-button,
.save-slot-detail-actions .menu-button {
  min-width: 120px;
}

.field-guide-reader-detail .field-guide-rail {
  display: none;
}

.field-guide-reader-detail .field-guide-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.field-guide-reader-detail .field-guide-main.field-guide-layout {
  display: grid;
  gap: 12px;
}

.utility-menu-detail-grid {
  display: grid;
  gap: 8px;
}

@media (min-width: 920px) {
  .workspace-summary-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .workspace-shell {
    grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.08fr);
    gap: 20px;
    align-items: start;
  }

  .utility-workspace-shell {
    grid-template-columns: minmax(360px, 0.94fr) minmax(0, 1.06fr);
  }

  .save-slot-shell {
    grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 0.88fr);
  }

  .settings-shell,
  .character-sheet-shell,
  .service-shell,
  .bank-shell {
    grid-template-columns: minmax(360px, 0.92fr) minmax(0, 1.08fr);
  }

  .field-guide-reader-shell {
    grid-template-columns: minmax(310px, 0.78fr) minmax(0, 1.22fr);
  }

  .utility-menu-sheet {
    width: min(1560px, calc(100vw - 20px));
    height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
  }

  .utility-menu-body,
  .save-slot-workspace,
  .settings-sheet,
  .character-sheet-workspace,
  .town-workspace,
  .field-guide-reader-workspace {
    gap: 16px;
  }

  .utility-launch-grid,
  .save-slot-ledger {
    align-content: start;
  }

  .save-slot-ledger,
  .field-guide-reader-detail,
  .bank-detail-rail,
  .service-detail-rail,
  .settings-detail-rail,
  .character-sheet-detail-rail {
    min-height: 0;
  }

  .save-slot-ledger,
  .utility-launch-grid,
  .field-guide-reader-detail {
    max-height: min(68vh, 760px);
    overflow: auto;
  }

  .workspace-summary-chip {
    min-height: 74px;
    padding: 12px 14px;
  }

  .workspace-summary-label {
    font-size: 0.78rem;
  }

  .workspace-summary-chip strong,
  .workspace-detail-title {
    font-size: 1.14rem;
    line-height: 1.2;
  }

  .workspace-detail-card,
  .workspace-ledger-group {
    padding: 14px 16px;
  }

  .workspace-plain-copy {
    font-size: 0.94rem;
  }

  .workspace-ledger-row {
    padding: 12px 0;
  }

  .save-slot-select {
    padding: 12px 14px;
  }

  .save-slot-select-name {
    font-size: 1.02rem;
  }

  .save-slot-select-meta {
    font-size: 0.86rem;
  }

  .settings-overview-rail .menu-quick-state,
  .field-guide-index-rail .menu-quick-state {
    min-height: 0;
  }

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

  .character-sheet-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    font-size: 0.92rem;
    padding: 10px 0;
    border-top: 1px solid rgba(214, 198, 157, 0.08);
  }

  .character-sheet-row:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .character-sheet-row:last-child {
    padding-bottom: 0;
  }

  .field-guide-reader-detail .field-guide-main.field-guide-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .field-guide-reader-detail .field-guide-main.field-guide-layout .field-guide-card:has(.journal-log),
  .field-guide-reader-detail .field-guide-main.field-guide-layout .field-guide-card:has(.section-block) {
    grid-column: 1 / -1;
  }

  .field-guide-reader-shell .journal-section-row {
    grid-template-columns: 1fr;
    padding: 0;
    border: 0;
    background: none;
  }

  .field-guide-reader-shell .journal-section-row .hub-filter-chip {
    justify-content: flex-start;
  }
}

@media (max-width: 919px) {
  .workspace-summary-strip,
  .workspace-shell,
  .character-resource-stack,
  .utility-menu-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 920px) {
  #modal-root .modal.utility-menu-sheet.modal-frame.modal-surface-quick:not(.title-screen):not(.creation-sheet) {
    width: min(1560px, calc(100vw - 20px)) !important;
    height: calc(100vh - 20px) !important;
    max-height: calc(100vh - 20px) !important;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  #modal-root .modal.utility-menu-sheet .utility-menu-body {
    grid-template-columns: 1fr;
    min-height: 0;
    overflow: auto;
    align-content: start;
  }

  #modal-root .modal.utility-menu-sheet .utility-workspace-shell {
    grid-template-columns: minmax(360px, 0.94fr) minmax(0, 1.06fr);
    min-height: min(68vh, 780px);
  }

  #modal-root .modal.modal-large.modal-frame.modal-surface-reader {
    width: min(1560px, calc(100vw - 20px));
    height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  #modal-root .modal.modal-large.modal-frame.modal-surface-reader .modal-body {
    min-height: 0;
    overflow: auto;
  }

  #modal-root .modal:has(.utility-workspace-shell),
  #modal-root .modal:has(.save-slot-workspace),
  #modal-root .modal:has(.settings-sheet),
  #modal-root .modal:has(.character-sheet-workspace),
  #modal-root .modal:has(.field-guide-reader-workspace),
  #modal-root .modal:has(.town-workspace) {
    width: min(1560px, calc(100vw - 20px));
    height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  #modal-root .modal:has(.utility-workspace-shell) .modal-body,
  #modal-root .modal:has(.save-slot-workspace) .modal-body,
  #modal-root .modal:has(.settings-sheet) .modal-body,
  #modal-root .modal:has(.character-sheet-workspace) .modal-body,
  #modal-root .modal:has(.field-guide-reader-workspace) .modal-body,
  #modal-root .modal:has(.town-workspace) .modal-body {
    min-height: 0;
    overflow: auto;
  }

  #modal-root .modal:has(.utility-workspace-shell) .modal-title,
  #modal-root .modal:has(.save-slot-workspace) .modal-title,
  #modal-root .modal:has(.settings-sheet) .modal-title,
  #modal-root .modal:has(.character-sheet-workspace) .modal-title,
  #modal-root .modal:has(.field-guide-reader-workspace) .modal-title,
  #modal-root .modal:has(.town-workspace) .modal-title {
    padding: 16px 18px 12px;
    font-size: 1.7rem;
    line-height: 1.05;
    letter-spacing: 0;
  }

  #modal-root .modal:has(.utility-workspace-shell) .modal-body,
  #modal-root .modal:has(.save-slot-workspace) .modal-body,
  #modal-root .modal:has(.settings-sheet) .modal-body,
  #modal-root .modal:has(.character-sheet-workspace) .modal-body,
  #modal-root .modal:has(.field-guide-reader-workspace) .modal-body,
  #modal-root .modal:has(.town-workspace) .modal-body,
  #modal-root .modal:has(.utility-workspace-shell) > .modal-actions,
  #modal-root .modal:has(.save-slot-workspace) > .modal-actions,
  #modal-root .modal:has(.settings-sheet) > .modal-actions,
  #modal-root .modal:has(.character-sheet-workspace) > .modal-actions,
  #modal-root .modal:has(.field-guide-reader-workspace) > .modal-actions,
  #modal-root .modal:has(.town-workspace) > .modal-actions {
    padding-left: 18px;
    padding-right: 18px;
  }

  .workspace-summary-strip {
    grid-auto-rows: min-content;
    align-items: start;
  }

  .workspace-summary-chip {
    min-height: 0;
    align-content: start;
  }

  .utility-menu-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .utility-workspace-shell,
  .save-slot-shell,
  .settings-shell,
  .character-sheet-shell,
  .field-guide-reader-shell,
  .service-shell,
  .bank-shell {
    min-height: min(68vh, 780px);
  }
}

@media (min-width: 920px) {
  .utility-destination-list {
    grid-template-columns: 1fr;
  }

  .utility-destination-list .action-button {
    min-height: 48px;
    justify-content: flex-start;
    padding-inline: 14px;
  }

  .utility-menu-detail-grid {
    grid-template-columns: 1fr;
  }

  .utility-command-chip {
    min-height: 0;
    padding: 10px 12px;
    border-radius: 8px;
  }

  .utility-command-summary,
  .utility-menu-group-disclosure {
    align-content: start;
  }

  .utility-menu-secondary-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .utility-menu-secondary-links .action-button {
    min-height: 44px;
  }

  .utility-menu-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .utility-menu-body,
  .save-slot-workspace,
  .settings-sheet,
  .character-sheet-workspace,
  .field-guide-reader-workspace,
  .town-workspace {
    min-height: calc(100vh - 168px);
  }

  .workspace-shell,
  .shop-transaction-shell,
  .hub-window-pack .pack-layout.pack-layout-equip,
  .hub-window-pack .pack-layout:not(.pack-layout-equip),
  .hub-window-magic .magic-layout {
    min-height: min(76vh, 980px);
    align-items: stretch;
  }

  .workspace-rail,
  .workspace-rail-detail,
  .hub-window-pack .hub-section,
  .hub-window-magic .hub-section,
  .pack-side-rail {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-height: 0;
  }

  .workspace-rail .workspace-ledger,
  .workspace-rail-detail .workspace-ledger,
  .save-slot-ledger,
  .pack-classic-list,
  .magic-book-list,
  .shop-transaction-list,
  .field-guide-reader-detail,
  .utility-launch-grid {
    flex: 1 1 auto;
    min-height: 0;
  }

  .workspace-summary-chip {
    min-height: 88px;
    padding: 14px 16px;
  }

  .workspace-summary-label,
  .panel-title {
    font-size: 0.84rem;
  }

  .workspace-summary-chip strong,
  .workspace-detail-title {
    font-size: 1.26rem;
  }

  .workspace-plain-copy,
  .workspace-ledger-row,
  .save-slot-select-meta,
  .hub-window-pack .mini-panel-note,
  .hub-window-magic .mini-panel-note,
  .shop-sell-note {
    font-size: 1rem;
    line-height: 1.5;
  }

  .menu-button,
  .hub-filter-chip,
  .action-button {
    font-size: 1rem;
  }

  .settings-shell {
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  }

  .save-slot-shell {
    grid-template-columns: minmax(420px, 0.96fr) minmax(0, 1.04fr);
  }

  .save-slot-select {
    gap: 6px;
    padding: 16px 18px;
  }

  .save-slot-select-name {
    font-size: 1.12rem;
  }

  .save-slot-select-meta {
    font-size: 0.94rem;
  }

  .field-guide-reader-shell {
    grid-template-columns: minmax(250px, 280px) minmax(0, 1fr);
    min-height: min(78vh, 980px);
  }

  .field-guide-index-rail {
    gap: 14px;
    padding-right: 14px;
    border-right: 1px solid rgba(214, 198, 157, 0.08);
  }

  .field-guide-reader-shell .journal-section-row {
    display: grid;
    gap: 8px;
  }

  .field-guide-reader-shell .journal-section-row .hub-filter-chip {
    width: 100%;
    min-height: 42px;
    justify-content: flex-start;
    padding: 8px 12px;
    border-radius: 8px;
    font-family: var(--font-ui);
    font-size: 0.92rem;
    letter-spacing: 0;
  }

  .field-guide-reader-detail {
    overflow: auto;
    padding-right: 8px;
  }

  .field-guide-article {
    display: grid;
    gap: 16px;
    align-content: start;
    max-width: 1100px;
    padding-bottom: 24px;
  }

  .field-guide-article .workspace-detail-card,
  .field-guide-article .workspace-ledger-group {
    gap: 14px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.015);
  }

  .field-guide-article .field-guide-copy,
  .field-guide-article .field-guide-list {
    max-width: 78ch;
    font-size: 1rem;
    line-height: 1.65;
  }

  .field-guide-article .field-guide-fact-list {
    display: grid;
    gap: 0;
    max-width: 88ch;
  }

  .field-guide-article .field-guide-fact-row {
    display: grid;
    grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
    gap: 16px;
    padding: 10px 0;
    border-top: 1px solid rgba(214, 198, 157, 0.08);
  }

  .field-guide-article .field-guide-fact-row:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .field-guide-article .field-guide-fact-label,
  .field-guide-article .field-guide-fact-value {
    font-size: 0.92rem;
    line-height: 1.5;
  }

  .field-guide-article-actions {
    justify-content: flex-start;
  }

  .field-guide-article-actions .menu-button {
    min-width: 140px;
  }

  .hub-window-pack .hub-summary-compact,
  .hub-window-magic .hub-summary-compact {
    gap: 18px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(214, 198, 157, 0.08);
  }

  .hub-window-pack .mini-panel,
  .hub-window-magic .mini-panel {
    min-height: 0;
    padding: 0 14px 0 0;
    border: 0;
    border-right: 1px solid rgba(214, 198, 157, 0.08);
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .hub-window-pack .mini-panel:last-child,
  .hub-window-magic .mini-panel:last-child {
    padding-right: 0;
    border-right: 0;
  }

  .hub-window-pack .mini-panel strong,
  .hub-window-magic .mini-panel strong {
    font-family: var(--font-ui);
    font-size: 1rem;
  }

  .hub-window-pack .mini-panel-note,
  .hub-window-magic .mini-panel-note {
    font-size: 0.82rem;
    line-height: 1.4;
  }

  .hub-window-pack .pack-toolbar,
  .hub-window-magic .pack-toolbar,
  .shop-transaction-toolbar {
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(214, 198, 157, 0.08);
  }

  .hub-window-pack .pack-toolbar-chip,
  .hub-window-pack .pack-toolbar-detail,
  .hub-window-pack .pack-toolbar-focus,
  .hub-window-magic .pack-toolbar-chip,
  .hub-window-magic .pack-toolbar-detail,
  .hub-window-magic .pack-toolbar-focus,
  .shop-workspace .pack-toolbar-chip,
  .shop-workspace .pack-toolbar-detail {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }

  .hub-window-pack .pack-filter-row,
  .hub-window-magic .pack-filter-row,
  .shop-panel-row {
    gap: 6px;
    margin-bottom: 8px;
  }

  .hub-window-pack .pack-list-panel,
  .hub-window-magic .magic-book-list,
  .shop-transaction-list-panel .shop-transaction-list {
    max-height: min(80vh, 1000px);
  }

  .shop-sell-note {
    margin-top: 12px;
  }

  .bank-investment-ledger {
    gap: 0;
  }

  .bank-investment-row {
    align-items: center;
  }

  .bank-investment-actions .menu-button {
    min-width: 96px;
  }

  .service-ledger-row {
    align-items: center;
    gap: 14px;
    padding-block: 14px;
  }

  .service-ledger-actions {
    justify-content: flex-end;
  }

  .service-ledger-actions .menu-button,
  .save-slot-detail-actions .menu-button,
  .bank-investment-actions .menu-button {
    min-height: 44px;
    min-width: 112px;
  }

  .bank-workspace .bank-disclosure {
    display: none !important;
  }
}

/* ------------------------------------------------------------
   JRPG window skin — step 1 of the classic-JRPG UI redesign.
   Aesthetic target: FFVI / FFVII / Chrono Trigger / Dragon Quest.
   Navy-gradient windows with a double white border, a gold
   triangle cursor on the active option, and a pixel-era display
   font for titles and stat labels.
   These styles are additive; legacy chrome keeps rendering until
   step 2 (play-screen recompose) migrates elements over.
   See: C:\Users\pzgam\.claude\plans\staged-conjuring-shell.md
   ------------------------------------------------------------ */

:root {
  --jrpg-navy-deep: #0c1a3a;
  --jrpg-navy-royal: #1f3a78;
  --jrpg-text: #ffffff;
  --jrpg-text-dim: #bac7e8;
  --jrpg-border: #ffffff;
  --jrpg-cursor: #f5c560;
  --jrpg-alert: #d94a3a;
  --jrpg-mp: #8fb3ff;
  --jrpg-hp: #e56a5a;
  --jrpg-load: #f5c560;
  --jrpg-disabled: #7a7f92;
  --jrpg-window-fill:
    linear-gradient(180deg, var(--jrpg-navy-royal) 0%, var(--jrpg-navy-deep) 100%);
  --jrpg-window-glow: 0 0 0 1px rgba(0, 0, 0, 0.85), 0 0 18px rgba(255, 255, 255, 0.08);
  --jrpg-font-display: "VT323", "Menlo", "Consolas", monospace;
  --jrpg-font-body: "Alegreya Sans", system-ui, sans-serif;
}

.jrpg-window {
  display: block;
  position: relative;
  padding: 12px 14px;
  background: var(--jrpg-window-fill);
  color: var(--jrpg-text);
  font-family: var(--jrpg-font-body);
  font-size: 15px;
  line-height: 1.35;
  border: 3px double var(--jrpg-border);
  border-radius: 4px;
  box-shadow: var(--jrpg-window-glow);
}

.jrpg-window + .jrpg-window {
  margin-top: 8px;
}

.jrpg-window-title {
  font-family: var(--jrpg-font-display);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--jrpg-text);
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.jrpg-window-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}

.jrpg-window-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 5px 8px 5px 24px;
  background: transparent;
  border: 0;
  color: var(--jrpg-text);
  font-family: var(--jrpg-font-body);
  font-size: 16px;
  text-align: left;
  position: relative;
  cursor: pointer;
  border-radius: 3px;
}

.jrpg-window-option::before {
  content: "\25B6";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--jrpg-cursor);
  opacity: 0;
  transition: opacity 90ms ease-out;
  font-size: 14px;
}

.jrpg-window-option.is-active,
.jrpg-window-option:focus-visible,
.jrpg-window-option:hover {
  color: var(--jrpg-cursor);
  outline: none;
}

.jrpg-window-option.is-active::before,
.jrpg-window-option:focus-visible::before,
.jrpg-window-option:hover::before {
  opacity: 1;
}

.jrpg-window-option:disabled,
.jrpg-window-option.is-disabled {
  color: var(--jrpg-disabled);
  cursor: not-allowed;
}

.jrpg-window-option:disabled:hover,
.jrpg-window-option.is-disabled:hover {
  color: var(--jrpg-disabled);
}

.jrpg-window-option:disabled::before,
.jrpg-window-option.is-disabled::before {
  display: none;
}

.jrpg-window-option-value {
  margin-left: auto;
  color: var(--jrpg-text-dim);
  font-family: var(--jrpg-font-display);
  font-size: 16px;
  letter-spacing: 0.04em;
}

/* Horizontal verb row (USE / EQUIP / DROP / BACK) inside a window. */
.jrpg-window-verbs {
  display: flex;
  gap: 4px;
}

.jrpg-window-verbs .jrpg-window-option {
  width: auto;
  flex: 1 1 0;
  justify-content: center;
  padding: 6px 10px 6px 26px;
}

/* State variants for the window frame itself — used for pressure. */
.jrpg-window.is-warning {
  --jrpg-border: var(--jrpg-cursor);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85), 0 0 18px rgba(245, 197, 96, 0.25);
}

.jrpg-window.is-alert {
  --jrpg-border: var(--jrpg-alert);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85), 0 0 18px rgba(217, 74, 58, 0.35);
  animation: jrpg-alert-pulse 1.6s ease-in-out infinite;
}

@keyframes jrpg-alert-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85), 0 0 18px rgba(217, 74, 58, 0.25); }
  50%      { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85), 0 0 28px rgba(217, 74, 58, 0.6); }
}

/* Frame-tint utilities. Apply on a container to cascade --jrpg-border
   into any .jrpg-window descendants. Used by the pressure director. */
.jrpg-frame-tint-calm    { --jrpg-border: #ffffff; }
.jrpg-frame-tint-rising  { --jrpg-border: var(--jrpg-cursor); }
.jrpg-frame-tint-leave   { --jrpg-border: var(--jrpg-alert); }

/* Segmented HP / MP / Load / XP bars used inside status windows. */
.jrpg-bar {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 10px;
  align-items: center;
  font-family: var(--jrpg-font-display);
  font-size: 16px;
  letter-spacing: 0.04em;
}

.jrpg-bar-label {
  color: var(--jrpg-text-dim);
  text-transform: uppercase;
}

.jrpg-bar-track {
  position: relative;
  height: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 2px;
  overflow: hidden;
}

.jrpg-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: var(--jrpg-hp);
  transition: width 180ms ease-out, background-color 180ms ease-out;
}

.jrpg-bar.is-hp   .jrpg-bar-fill { background: var(--jrpg-hp); }
.jrpg-bar.is-mp   .jrpg-bar-fill { background: var(--jrpg-mp); }
.jrpg-bar.is-load .jrpg-bar-fill { background: var(--jrpg-load); }
.jrpg-bar.is-xp   .jrpg-bar-fill { background: var(--jrpg-cursor); }

.jrpg-bar.is-hp.is-critical .jrpg-bar-fill { background: var(--jrpg-alert); }

.jrpg-bar-value {
  color: var(--jrpg-text);
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
  text-align: right;
}

/* Dialog variant with a Dragon-Quest-style speaker tab and blinking
   advance indicator in the bottom-right. */
.jrpg-dialog { position: relative; }

.jrpg-dialog-speaker {
  position: absolute;
  top: -12px;
  left: 16px;
  padding: 2px 10px;
  background: var(--jrpg-navy-deep);
  border: 2px solid var(--jrpg-border);
  border-radius: 3px;
  font-family: var(--jrpg-font-display);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jrpg-cursor);
}

.jrpg-dialog-advance {
  position: absolute;
  right: 12px;
  bottom: 10px;
  color: var(--jrpg-cursor);
  animation: jrpg-blink 900ms steps(2, start) infinite;
  font-family: var(--jrpg-font-display);
}

@keyframes jrpg-blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0.15; }
}

/* Respect the global accessibility scale toggle. */
html[data-ui-scale="large"] .jrpg-window          { font-size: 17px; }
html[data-ui-scale="large"] .jrpg-window-option   { font-size: 18px; padding-top: 7px; padding-bottom: 7px; }
html[data-ui-scale="large"] .jrpg-window-title    { font-size: 17px; }
html[data-ui-scale="large"] .jrpg-bar             { font-size: 17px; }

/* Reduced motion — disable the pulse and blink animations. */
@media (prefers-reduced-motion: reduce) {
  .jrpg-window.is-alert,
  .jrpg-dialog-advance {
    animation: none;
  }
}

/* ------------------------------------------------------------
   Step 2 — play-screen recompose.
   When the advisor emits .jrpg-window content into #player-capsule
   and #action-bar, strip the legacy panel chrome from those
   containers, hide the always-on floor-survey minimap, and lay the
   two windows out side-by-side above the touch pad. Scoped via
   :has() so non-migrated screens still render the legacy shell.
   ------------------------------------------------------------ */

.bottom-band:has(.jrpg-window) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "status command"
    "touch  touch";
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.bottom-band:has(.jrpg-window) > .status-band {
  grid-area: status;
  display: contents; /* let #player-capsule participate in the bottom-band grid */
}

.bottom-band:has(.jrpg-window) > .status-band > #map-panel {
  display: none;
}

.mobile-app.mobile-map-open[data-layout="mobile"] .bottom-band:has(.jrpg-window) > .status-band > #map-panel {
  display: grid;
  grid-column: 1 / -1;
  grid-row: auto;
  order: -1;
  margin-bottom: 6px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(214, 198, 157, 0.24);
  background: rgba(12, 16, 20, 0.94);
}

.mobile-app.mobile-map-open[data-layout="mobile"] .bottom-band:has(.jrpg-window) > .status-band > #map-panel #map-canvas {
  max-height: min(240px, 30vh);
}

.bottom-band:has(.jrpg-window) > .status-band > #player-capsule {
  grid-area: status;
  background: transparent !important;
  border: 0;
  padding: 0;
  box-shadow: none;
  min-height: 0;
  display: block;
}

.bottom-band:has(.jrpg-window) > #action-bar {
  grid-area: command;
  background: transparent !important;
  border: 0;
  padding: 0;
  box-shadow: none;
  min-height: 0;
  display: block;
}

.bottom-band:has(.jrpg-window) > #touch-controls {
  grid-area: touch;
}

/* Status window — tight 3-bar stack. */
.jrpg-status-window {
  padding: 10px 12px;
  min-height: 100%;
}

.jrpg-status-window .jrpg-bar {
  padding-block: 2px;
}

.jrpg-status-window .jrpg-window-title {
  margin-bottom: 6px;
  padding-bottom: 4px;
}

/* Command window — vertical verb list with ► cursor. Each button carries
   both .jrpg-window-option (for the JRPG cursor) and the legacy
   .action-button.dock-slot classes (kept for focus + test selectors).
   Override the legacy .action-button visuals so only the JRPG skin shows. */
.jrpg-command-window {
  padding: 10px 12px;
  min-height: 100%;
}

.jrpg-command-window .jrpg-window-title {
  margin-bottom: 6px;
  padding-bottom: 4px;
}

.jrpg-command-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.jrpg-command-option.action-button,
.jrpg-command-option.dock-slot {
  /* Wipe the legacy dock-button chrome — the .jrpg-window-option rules win. */
  background: transparent !important;
  border: 0 !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  min-height: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--jrpg-text);
}

.jrpg-command-option.action-button.is-active,
.jrpg-command-option.dock-slot.is-active,
.jrpg-command-option.action-button:hover,
.jrpg-command-option.dock-slot:hover,
.jrpg-command-option.action-button:focus-visible,
.jrpg-command-option.dock-slot:focus-visible {
  color: var(--jrpg-cursor);
  background: transparent !important;
}

.jrpg-command-option.is-active.recommended .jrpg-command-label {
  font-weight: 600;
}

.jrpg-command-label {
  font-size: 16px;
  line-height: 1.2;
}

.jrpg-command-note {
  font-size: 12px;
  color: var(--jrpg-text-dim);
  margin-left: auto;
  max-width: 60%;
  text-align: right;
  line-height: 1.1;
}

/* A/B/X/Y prompt glyphs — hidden on touch builds, revealed only when a
   gamepad is detected. No-op until step 2.5 wires up the flag. */
.jrpg-command-prompt {
  display: none;
  font-family: var(--jrpg-font-display);
  font-size: 13px;
  color: var(--jrpg-text-dim);
  min-width: 16px;
  text-align: center;
  letter-spacing: 0.05em;
}

.mobile-app[data-gamepad-active="true"] .jrpg-command-prompt {
  display: inline-block;
}

/* Narrow phones (360px): stack status on top of command so neither squeezes. */
@media (max-width: 400px) {
  .bottom-band:has(.jrpg-window) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "status"
      "command"
      "touch";
  }
  .jrpg-command-note {
    display: none; /* too cramped to include the hint line */
  }
}

/* ------------------------------------------------------------
   Step 3 — pressure state visuals.
   The game adds .jrpg-frame-tint-rising / -leave to .board-stage and
   .mobile-app whenever dungeon pressure crosses a threshold. These
   classes:
     • tint any descendant .jrpg-window border via the --jrpg-border
       custom property cascade (already defined above)
     • halo the board canvas itself so the shift is felt in the play
       area, not just in the chrome
     • pulse on the "leave" bucket as an urgent signal
   The warning/alert banner is injected on top of .board-overlays as
   a .jrpg-pressure-banner element.
   ------------------------------------------------------------ */

.board-stage.jrpg-frame-tint-rising .board-frame {
  box-shadow: 0 0 0 2px var(--jrpg-cursor), 0 0 18px rgba(245, 197, 96, 0.3);
  transition: box-shadow 240ms ease-out;
}

.board-stage.jrpg-frame-tint-leave .board-frame {
  box-shadow: 0 0 0 2px var(--jrpg-alert), 0 0 22px rgba(217, 74, 58, 0.5);
  transition: box-shadow 240ms ease-out;
  animation: jrpg-board-pulse 1.6s ease-in-out infinite;
}

@keyframes jrpg-board-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--jrpg-alert), 0 0 18px rgba(217, 74, 58, 0.35); }
  50%      { box-shadow: 0 0 0 2px var(--jrpg-alert), 0 0 34px rgba(217, 74, 58, 0.8); }
}

/* The warning / alert banner window. Sits across the top of the board
   overlays. Title is centered and uppercase for readability. */
.jrpg-pressure-banner {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(92%, 420px);
  padding: 8px 14px;
  z-index: 6;
  pointer-events: none;
}

.jrpg-pressure-banner .jrpg-window-title {
  text-align: center;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom-color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  letter-spacing: 0.1em;
}

.jrpg-pressure-banner .jrpg-window-row {
  justify-content: center;
  text-align: center;
  font-size: 13px;
  padding: 0;
}

/* Urgent primary verb — when pressure is bad, the first command option
   relabels to Ascend!/Flee! and gets a red pulse. Higher specificity
   overrides both the JRPG cursor gold and the legacy dock-tone-primary
   amber, so "urgent" always wins. */
.jrpg-command-option.is-urgent,
.jrpg-command-option.is-urgent:hover,
.jrpg-command-option.is-urgent:focus-visible,
.jrpg-command-option.is-urgent.is-active {
  color: var(--jrpg-alert) !important;
  font-weight: 600;
}

.jrpg-command-option.is-urgent::before {
  color: var(--jrpg-alert);
  opacity: 1;
  animation: jrpg-urgent-blink 700ms steps(2, start) infinite;
}

@keyframes jrpg-urgent-blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .board-stage.jrpg-frame-tint-leave .board-frame,
  .jrpg-command-option.is-urgent::before {
    animation: none;
  }
}

/* ------------------------------------------------------------
   Step 4a — utility menu (main pause menu) in JRPG skin.
   Two windows side-by-side: "Right Now" (current run summary) on
   the left, "Menu" (verb list) on the right. Legacy action-button
   chrome is stripped off any option that also carries
   .jrpg-window-option so the JRPG cursor treatment wins.
   ------------------------------------------------------------ */

.jrpg-utility-sheet {
  background: linear-gradient(180deg, rgba(4, 10, 24, 0.95), rgba(2, 6, 18, 0.98));
  border: 2px solid rgba(255, 255, 255, 0.18);
}

.jrpg-utility-sheet .modal-title {
  font-family: var(--jrpg-font-display);
  font-size: 22px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jrpg-text);
  text-align: center;
  padding: 12px 16px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 0;
}

.jrpg-utility-body {
  padding: 14px 16px;
  background: transparent !important;
}

.jrpg-utility-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 10px;
}

.jrpg-utility-party .jrpg-window-title,
.jrpg-utility-verbs .jrpg-window-title {
  margin-bottom: 8px;
  padding-bottom: 6px;
}

.jrpg-utility-run-line {
  font-family: var(--jrpg-font-body);
  font-size: 15px;
  line-height: 1.35;
  color: var(--jrpg-text);
  margin-bottom: 8px;
}

.jrpg-utility-meta-line {
  font-family: var(--jrpg-font-body);
  font-size: 12px;
  color: var(--jrpg-text-dim);
  line-height: 1.35;
  padding: 2px 0;
}

.jrpg-utility-meta-line:empty {
  display: none;
}

.jrpg-utility-verb-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jrpg-utility-verb-divider {
  height: 1px;
  margin: 10px 0 6px;
  background: linear-gradient(90deg, transparent, rgba(214, 198, 157, 0.28), transparent);
}

.jrpg-utility-verb-label {
  padding: 0 10px;
  color: rgba(214, 198, 157, 0.56);
  font-family: var(--jrpg-font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.jrpg-utility-verb-tools .jrpg-window-option.action-button {
  opacity: 0.82;
}

.jrpg-utility-verb-tools .utility-trace-button {
  opacity: 0.6;
  font-size: 14px;
}

/* Strip legacy .action-button visuals off options inside the utility menu
   so only the JRPG skin styles the verbs. Specificity beats the legacy
   .action-button rules earlier in the file. */
.jrpg-utility-verbs .jrpg-window-option.action-button {
  background: transparent !important;
  border: 0 !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  min-height: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 5px 10px 5px 24px;
  font-family: var(--jrpg-font-body);
  font-size: 16px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--jrpg-text);
  justify-content: flex-start;
}

.jrpg-utility-verbs .jrpg-window-option.action-button:hover,
.jrpg-utility-verbs .jrpg-window-option.action-button:focus-visible,
.jrpg-utility-verbs .jrpg-window-option.action-button.is-active {
  color: var(--jrpg-cursor);
  background: transparent !important;
}

.jrpg-utility-verbs .jrpg-window-option.action-button:disabled {
  color: var(--jrpg-disabled);
  opacity: 1;
}

.jrpg-utility-actions {
  padding: 8px 16px 16px;
  justify-content: flex-end;
  display: flex;
  gap: 8px;
  background: transparent;
}

.jrpg-utility-sheet .utility-menu-primary-action {
  font-family: var(--jrpg-font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Narrow viewports: stack the two windows vertically. */
@media (max-width: 520px) {
  .jrpg-utility-grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------
   Step 4b/c — Pack and Magic hubs in JRPG skin (CSS-only pass).
   The hub markup is large and threaded through focus/nav selectors,
   so we reskin via CSS rather than rewriting HTML. The existing
   .hub-window becomes a JRPG window, tabs become plain options with
   a ► cursor on the active tab, and filter chips drop to minimal
   text buttons. Item/spell rows gain the ► cursor on .active.
   ------------------------------------------------------------ */

.hub-window {
  background: var(--jrpg-window-fill) !important;
  border: 3px double var(--jrpg-border) !important;
  border-radius: 4px !important;
  box-shadow: var(--jrpg-window-glow) !important;
  color: var(--jrpg-text) !important;
}

.hub-window,
.hub-window * {
  font-family: var(--jrpg-font-body);
}

.hub-window .panel-title,
.hub-window .hub-section-title,
.hub-window .pack-section-title,
.hub-window .magic-section-title,
.hub-window .loadout-heading {
  font-family: var(--jrpg-font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jrpg-text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 4px;
  margin-bottom: 6px;
}

/* Top-level tabs (Pack / Magic / Guide) — JRPG cursor on active. */
.hub-window .hub-tabs {
  display: flex;
  gap: 14px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
}

.hub-window .hub-tab {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--jrpg-text-dim) !important;
  font-family: var(--jrpg-font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 15px;
  padding: 4px 8px 4px 20px !important;
  position: relative;
  min-height: 0 !important;
  min-width: 0 !important;
}

.hub-window .hub-tab::before {
  content: "\25B6";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--jrpg-cursor);
  font-size: 12px;
  opacity: 0;
  transition: opacity 90ms ease-out;
}

.hub-window .hub-tab.active,
.hub-window .hub-tab:focus-visible,
.hub-window .hub-tab:hover {
  color: var(--jrpg-cursor) !important;
}

.hub-window .hub-tab.active::before,
.hub-window .hub-tab:focus-visible::before,
.hub-window .hub-tab:hover::before {
  opacity: 1;
}

/* Filter chip strip — minimal: small inline text options, not colored pills. */
.hub-window .hub-filter-chip {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  color: var(--jrpg-text-dim) !important;
  font-family: var(--jrpg-font-body);
  font-size: 13px;
  padding: 3px 10px !important;
  text-transform: none;
  letter-spacing: normal;
  min-height: 0 !important;
  font-weight: 400;
}

.hub-window .hub-filter-chip.active,
.hub-window .hub-filter-chip:hover,
.hub-window .hub-filter-chip:focus-visible {
  color: var(--jrpg-cursor) !important;
  border-color: var(--jrpg-cursor) !important;
  background: transparent !important;
}

/* Item / spell rows — ► cursor on the active row. */
.hub-window .pack-item-row,
.hub-window .magic-card-select {
  background: transparent !important;
  border: 0 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  padding: 6px 8px 6px 24px !important;
  color: var(--jrpg-text) !important;
  font-family: var(--jrpg-font-body);
  font-size: 15px !important;
  position: relative;
  min-height: 0 !important;
  text-align: left;
}

.hub-window .pack-item-row::before,
.hub-window .magic-card-select::before {
  content: "\25B6";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--jrpg-cursor);
  opacity: 0;
  font-size: 12px;
  transition: opacity 90ms ease-out;
}

.hub-window .pack-item-row.active,
.hub-window .pack-item-row:hover,
.hub-window .pack-item-row:focus-visible,
.hub-window .magic-card-select.active,
.hub-window .magic-card-select:hover,
.hub-window .magic-card-select:focus-visible {
  color: var(--jrpg-cursor) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.hub-window .pack-item-row.active::before,
.hub-window .pack-item-row:hover::before,
.hub-window .pack-item-row:focus-visible::before,
.hub-window .magic-card-select.active::before,
.hub-window .magic-card-select:hover::before,
.hub-window .magic-card-select:focus-visible::before {
  opacity: 1;
}

/* Kill italic on item names — only the focused detail card gets italic. */
.hub-window .pack-item-row em,
.hub-window .pack-item-row .item-name {
  font-style: normal;
  font-weight: 600;
}

/* Detail panels (loadout card, selected-item card, magic detail) — sub-windows. */
.hub-window .loadout-panel,
.hub-window .pack-focus-panel,
.hub-window .pack-focus-card,
.hub-window .selected-item-card,
.hub-window .magic-detail-card,
.hub-window .spell-result-card {
  background: rgba(12, 26, 58, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  color: var(--jrpg-text) !important;
}

/* Verb row at the bottom of item detail (Use / Equip / Drop / Back) — these
   already render as .action-button inside the detail card; give them the
   JRPG ► treatment without !importanting everything. */
.hub-window .pack-focus-panel .action-button,
.hub-window .selected-item-card .action-button,
.hub-window .magic-detail-card .action-button,
.hub-window .spell-result-card .action-button {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  color: var(--jrpg-text);
  font-family: var(--jrpg-font-body);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  min-height: 36px;
  box-shadow: none;
}

.hub-window .pack-focus-panel .action-button.primary,
.hub-window .selected-item-card .action-button.primary,
.hub-window .magic-detail-card .action-button.primary {
  background: transparent;
  color: var(--jrpg-cursor);
  border-color: var(--jrpg-cursor);
}

.hub-window .pack-focus-panel .action-button:hover,
.hub-window .selected-item-card .action-button:hover,
.hub-window .magic-detail-card .action-button:hover {
  color: var(--jrpg-cursor);
  border-color: var(--jrpg-cursor);
}

/* Right-align MP cost in the magic list with the pixel display font. */
.hub-window .magic-card-select .magic-card-cost,
.hub-window .magic-card-select .mp-cost {
  font-family: var(--jrpg-font-display);
  font-size: 15px;
  color: var(--jrpg-text-dim);
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------
   Step 5 — event ticker as a JRPG message window.
   The existing #event-ticker.message-log already auto-hides when
   empty. We reskin it to the navy gradient / double-border look
   and convert the leading chip ("T1", "Next", "Pressure", etc.)
   into a small icon glyph so it reads as severity, not as a
   clickable pill.
   ------------------------------------------------------------ */

#event-ticker.message-log {
  background: var(--jrpg-window-fill) !important;
  border: 3px double var(--jrpg-border) !important;
  border-radius: 4px !important;
  box-shadow: var(--jrpg-window-glow) !important;
  color: var(--jrpg-text);
  padding: 8px 12px !important;
  font-family: var(--jrpg-font-body);
}

#event-ticker .event-ticker-line {
  display: flex;
  gap: 10px;
  padding: 2px 0;
  font-size: 14px;
  line-height: 1.3;
  color: var(--jrpg-text);
  background: transparent;
  border: 0;
  border-radius: 0;
}

#event-ticker .event-ticker-turn {
  font-family: var(--jrpg-font-display);
  font-size: 13px;
  color: var(--jrpg-text-dim);
  min-width: 44px;
  letter-spacing: 0.05em;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
}

#event-ticker .event-ticker-text {
  color: var(--jrpg-text);
}

/* Severity tones: leading color dot via pseudo-element instead of chip. */
#event-ticker .event-ticker-line.ticker-bad .event-ticker-turn {
  color: var(--jrpg-alert);
}
#event-ticker .event-ticker-line.ticker-bad .event-ticker-text {
  color: var(--jrpg-alert);
}
#event-ticker .event-ticker-line.ticker-warning .event-ticker-turn {
  color: var(--jrpg-cursor);
}
#event-ticker .event-ticker-line.ticker-warning .event-ticker-text {
  color: var(--jrpg-cursor);
}
#event-ticker .event-ticker-line.ticker-good .event-ticker-turn {
  color: var(--jrpg-mp);
}

/* ------------------------------------------------------------
   Step 6 — title screen refresh.
   Full-bleed cinematic, one windowed menu with the \u25ba cursor.
   Legacy title-showcase / audio banner / hero-footer collapse.
   ------------------------------------------------------------ */

.title-screen .title-showcase-content {
  gap: 18px;
}

.title-screen .title-launcher-copy-hero {
  text-align: center;
}

.title-screen .title-screen-kicker {
  font-family: var(--jrpg-font-display);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jrpg-cursor);
  opacity: 0.85;
}

.title-screen .title-screen-heading {
  font-family: "Cinzel", var(--jrpg-font-display), serif;
  font-size: clamp(40px, 11vw, 72px);
  letter-spacing: 0.04em;
  color: var(--jrpg-text);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7), 0 0 24px rgba(255, 255, 255, 0.18);
  margin: 4px 0;
}

.title-screen .title-screen-copy {
  font-family: var(--jrpg-font-body);
  font-size: 15px;
  color: var(--jrpg-text-dim);
  letter-spacing: 0.02em;
}

.title-screen .title-audio-banner {
  background: transparent;
  border: 0;
  padding: 0;
  opacity: 0.6;
}

.title-screen .title-audio-banner .title-audio-toggle {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  color: var(--jrpg-text-dim);
  font-family: var(--jrpg-font-body);
  font-size: 13px;
  padding: 4px 10px;
  text-transform: none;
  letter-spacing: normal;
  min-height: 28px;
}

.title-screen .title-actions {
  flex-direction: column;
  gap: 6px;
  padding: 10px 16px;
  background: var(--jrpg-window-fill);
  border: 3px double var(--jrpg-border);
  border-radius: 4px;
  box-shadow: var(--jrpg-window-glow);
  align-items: stretch;
}

.title-screen .title-actions .action-button {
  background: transparent !important;
  border: 0 !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  color: var(--jrpg-text);
  font-family: var(--jrpg-font-body);
  font-size: 17px;
  padding: 6px 12px 6px 26px !important;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-height: 36px !important;
  position: relative;
}

.title-screen .title-actions .action-button::before {
  content: "\25B6";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--jrpg-cursor);
  opacity: 0;
  font-size: 13px;
  transition: opacity 90ms ease-out;
}

.title-screen .title-actions .action-button.primary,
.title-screen .title-actions .action-button:hover,
.title-screen .title-actions .action-button:focus-visible {
  color: var(--jrpg-cursor) !important;
  background: transparent !important;
}

.title-screen .title-actions .action-button.primary::before,
.title-screen .title-actions .action-button:hover::before,
.title-screen .title-actions .action-button:focus-visible::before {
  opacity: 1;
}

/* ------------------------------------------------------------
   Step 7 — character creation, level-up, and dialog modals in
   JRPG skin. We reskin via CSS; the creation sheet preserves its
   two-column layout on desktop and stacks on narrow phones.
   ------------------------------------------------------------ */

.creation-sheet {
  background: linear-gradient(180deg, rgba(4, 10, 24, 0.97), rgba(2, 6, 18, 0.98));
  border: 2px solid rgba(255, 255, 255, 0.18);
}

.creation-sheet .creation-sheet-heading {
  font-family: var(--jrpg-font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jrpg-text);
}

.creation-sheet .creation-sheet-subheading {
  font-family: var(--jrpg-font-body);
  color: var(--jrpg-text-dim);
  font-size: 14px;
}

.creation-sheet .field-label,
.creation-sheet .creation-label {
  font-family: var(--jrpg-font-display);
  color: var(--jrpg-text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px;
}

.creation-sheet .creation-preview-panel {
  background: var(--jrpg-window-fill) !important;
  border: 3px double var(--jrpg-border) !important;
  border-radius: 4px !important;
  box-shadow: var(--jrpg-window-glow) !important;
  color: var(--jrpg-text);
}

.creation-sheet .creation-preview-title {
  font-family: "Cinzel", var(--jrpg-font-display), serif;
  color: var(--jrpg-text);
}

.creation-sheet .creation-preview-subtitle {
  font-family: var(--jrpg-font-display);
  color: var(--jrpg-cursor);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px;
}

/* Level-up modal — when the game renders its level-up sheet, give it
   the JRPG window feel. Uses the existing .mobile-sheet base class. */
.mobile-sheet[data-mode="levelup"],
.modal.mobile-sheet .modal-title:has(+ * .spell-learn-group) {
  /* Targeted further via the parent modal chrome below. */
}

/* Modal chrome — any .modal-frame inherits the navy/double-border look
   automatically via the :root tokens. This rule gently lifts the panel
   background so the content (already restyled above) sits correctly. */
.modal-frame.jrpg-utility-sheet,
.modal-frame.creation-sheet,
.modal-frame.title-screen {
  /* Handled above per-sheet; this is documentation. */
}

/* ============================================================
   POLISH + PERFORMANCE + RESPONSIVE PASS
   Scopes everything below via [data-jrpg-ui="true"] on the shell
   (set once at Game boot). Attribute selectors are cheaper than
   the :has() rules used earlier in this file, and they let us
   opt specific legacy elements out of the JRPG treatment by
   dropping the attribute — useful for A/B or debugging.
   ============================================================ */

/* ---- performance: containment ---- */

.jrpg-window,
#event-ticker.message-log {
  contain: layout style;              /* prevent descendants from reflowing the tree */
}

.jrpg-pressure-banner {
  contain: layout style paint;        /* also paint-contain since it's absolutely positioned */
  will-change: opacity;
}

/* ---- pressure state via dataset attribute (replaces class toggles) ---- */

[data-jrpg-pressure="calm"]   { --jrpg-border: #ffffff; }
[data-jrpg-pressure="rising"] { --jrpg-border: var(--jrpg-cursor); }
[data-jrpg-pressure="leave"]  { --jrpg-border: var(--jrpg-alert); }

.board-stage[data-jrpg-pressure="rising"] .board-frame {
  box-shadow: 0 0 0 2px var(--jrpg-cursor), 0 0 18px rgba(245, 197, 96, 0.3);
  transition: box-shadow 240ms ease-out;
}

.board-stage[data-jrpg-pressure="leave"] .board-frame {
  box-shadow: 0 0 0 2px var(--jrpg-alert), 0 0 22px rgba(217, 74, 58, 0.5);
  transition: box-shadow 240ms ease-out;
  animation: jrpg-board-pulse 1.6s ease-in-out infinite;
  will-change: box-shadow;
}

.board-stage[data-jrpg-pressure="calm"] .board-frame {
  transition: box-shadow 240ms ease-out;
}

/* Smooth border-color transition when pressure bucket changes. */
.mobile-app[data-jrpg-ui="true"] .jrpg-window {
  transition: border-color 240ms ease-out, box-shadow 240ms ease-out;
}

/* ---- polish: unify primary/secondary modal buttons ---- */

/* Any .action-button.primary that lives inside a JRPG-flavored modal sheet
   collapses to the JRPG ghost-outline treatment with the \u25ba cursor. No more
   solid gold fills for Return to Run / Start Run / Use / Cast / etc.
   Buttons that already carry .jrpg-window-option are excluded — those are
   menu items inside a window and should stay borderless (the window frames
   them; individual borders would be visual clutter). */
[data-jrpg-ui="true"] .jrpg-utility-sheet .action-button.primary:not(.jrpg-window-option),
[data-jrpg-ui="true"] .jrpg-utility-sheet .action-button:not(.primary):not(.jrpg-window-option),
[data-jrpg-ui="true"] .creation-sheet .creation-actions .action-button:not(.jrpg-window-option),
[data-jrpg-ui="true"] .title-screen .title-actions .action-button:not(.jrpg-window-option),
[data-jrpg-ui="true"] .modal-frame .modal-actions .action-button:not(.jrpg-window-option) {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  color: var(--jrpg-text) !important;
  font-family: var(--jrpg-font-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
  min-height: 38px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-shadow: none !important;
}

[data-jrpg-ui="true"] .jrpg-utility-sheet .action-button.primary,
[data-jrpg-ui="true"] .creation-sheet .creation-actions .action-button.primary,
[data-jrpg-ui="true"] .title-screen .title-actions .action-button.primary,
[data-jrpg-ui="true"] .modal-frame .modal-actions .action-button.primary {
  color: var(--jrpg-cursor) !important;
  border-color: var(--jrpg-cursor) !important;
}

[data-jrpg-ui="true"] .modal-frame .modal-actions .action-button:hover,
[data-jrpg-ui="true"] .modal-frame .modal-actions .action-button:focus-visible {
  color: var(--jrpg-cursor) !important;
  border-color: var(--jrpg-cursor) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

/* ---- polish: top-band chips (run-status, pressure-status, music, menu) ---- */

[data-jrpg-ui="true"] .top-band.panel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 4px 8px;
}

[data-jrpg-ui="true"] .top-band .utility-chip {
  background: var(--jrpg-window-fill) !important;
  border: 2px double var(--jrpg-border) !important;
  border-radius: 3px !important;
  color: var(--jrpg-text) !important;
  font-family: var(--jrpg-font-body);
  font-size: 13px !important;
  padding: 4px 10px !important;
  box-shadow: none !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

[data-jrpg-ui="true"] .top-band .utility-chip.utility-pressure-status.tone-warning {
  color: var(--jrpg-cursor) !important;
  --jrpg-border: var(--jrpg-cursor);
}

[data-jrpg-ui="true"] .top-band .utility-chip.utility-pressure-status.tone-bad {
  color: var(--jrpg-alert) !important;
  --jrpg-border: var(--jrpg-alert);
}

[data-jrpg-ui="true"] .top-band .utility-menu-button {
  background: var(--jrpg-window-fill) !important;
  border: 2px double var(--jrpg-border) !important;
  border-radius: 3px !important;
  color: var(--jrpg-text) !important;
  font-family: var(--jrpg-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 4px 12px !important;
  min-height: 30px !important;
  box-shadow: none !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

[data-jrpg-ui="true"] .top-band .utility-menu-button:hover,
[data-jrpg-ui="true"] .top-band .utility-menu-button:focus-visible {
  color: var(--jrpg-cursor) !important;
  --jrpg-border: var(--jrpg-cursor);
}

/* ---- polish: board-overlay chips (Magic, map, spell tray) ---- */

[data-jrpg-ui="true"] .board-overlays .map-chip-button,
[data-jrpg-ui="true"] .board-overlays .spell-chip-button,
[data-jrpg-ui="true"] .board-overlays .utility-menu-button {
  background: var(--jrpg-window-fill) !important;
  border: 2px double var(--jrpg-border) !important;
  border-radius: 3px !important;
  color: var(--jrpg-text) !important;
  font-family: var(--jrpg-font-body) !important;
  font-size: 13px !important;
  padding: 4px 10px !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  min-height: auto !important;
}

/* ---- polish: d-pad buttons ---- */

[data-jrpg-ui="true"] .touch-pad .pad-button {
  background: var(--jrpg-window-fill) !important;
  border: 2px double var(--jrpg-border) !important;
  border-radius: 3px !important;
  color: var(--jrpg-text) !important;
  font-family: var(--jrpg-font-display) !important;
  font-size: 16px !important;
  box-shadow: none !important;
  min-height: 44px !important;
  min-width: 44px !important;
}

[data-jrpg-ui="true"] .touch-pad .pad-button:hover,
[data-jrpg-ui="true"] .touch-pad .pad-button:focus-visible {
  color: var(--jrpg-cursor) !important;
  --jrpg-border: var(--jrpg-cursor);
}

[data-jrpg-ui="true"] .touch-pad .pad-center {
  --jrpg-border: var(--jrpg-cursor);
  color: var(--jrpg-cursor) !important;
}

/* ---- polish: kill blue-fill filter chip active state ---- */

[data-jrpg-ui="true"] .hub-window .hub-filter-chip.active {
  background: transparent !important;
  color: var(--jrpg-cursor) !important;
  border-color: var(--jrpg-cursor) !important;
}

/* ---- polish: pack focus panel - kill legacy gold Use and dark Drop ---- */

[data-jrpg-ui="true"] .hub-window .pack-focus-panel .action-button,
[data-jrpg-ui="true"] .hub-window .selected-item-card .action-button,
[data-jrpg-ui="true"] .hub-window .magic-detail-card .action-button,
[data-jrpg-ui="true"] .hub-window .spell-result-card .action-button {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  color: var(--jrpg-text) !important;
  font-family: var(--jrpg-font-body) !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 12px !important;
  min-height: 34px !important;
}

[data-jrpg-ui="true"] .hub-window .pack-focus-panel .action-button.primary,
[data-jrpg-ui="true"] .hub-window .selected-item-card .action-button.primary,
[data-jrpg-ui="true"] .hub-window .magic-detail-card .action-button.primary {
  color: var(--jrpg-cursor) !important;
  border-color: var(--jrpg-cursor) !important;
}

[data-jrpg-ui="true"] .hub-window .pack-focus-panel .action-button:hover,
[data-jrpg-ui="true"] .hub-window .selected-item-card .action-button:hover,
[data-jrpg-ui="true"] .hub-window .magic-detail-card .action-button:hover,
[data-jrpg-ui="true"] .hub-window .spell-result-card .action-button:hover {
  color: var(--jrpg-cursor) !important;
  border-color: var(--jrpg-cursor) !important;
}

/* ---- polish: small inline pills (Potion or Scroll, Tray 1 selected, etc.) ---- */

[data-jrpg-ui="true"] .hub-window .item-category-pill,
[data-jrpg-ui="true"] .hub-window .pack-focus-panel .chip,
[data-jrpg-ui="true"] .hub-window .pack-focus-panel .pill,
[data-jrpg-ui="true"] .hub-window .selected-item-card .chip,
[data-jrpg-ui="true"] .hub-window .selected-item-card .pill,
[data-jrpg-ui="true"] .hub-window .magic-detail-card .chip,
[data-jrpg-ui="true"] .hub-window .spell-result-card .chip {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 2px !important;
  color: var(--jrpg-text-dim) !important;
  font-family: var(--jrpg-font-display) !important;
  font-size: 12px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 2px 8px !important;
  font-weight: 400 !important;
}

/* ---- polish: "Do Not Sell" checkbox row ---- */

[data-jrpg-ui="true"] .hub-window .pack-sell-toggle,
[data-jrpg-ui="true"] .hub-window .inline-checkbox {
  color: var(--jrpg-text-dim) !important;
  font-family: var(--jrpg-font-body) !important;
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ---- polish: modal-actions row — push to the right and uppercase ---- */

[data-jrpg-ui="true"] .modal-frame .modal-actions {
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px 16px;
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---- responsive: tablet breakpoint (768px+) ---- */

@media (min-width: 768px) {
  [data-jrpg-ui="true"] .bottom-band:has(.jrpg-window) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "status command"
      "touch  touch";
    gap: 12px;
  }
  [data-jrpg-ui="true"] .jrpg-command-note {
    display: inline-block !important;   /* tablets have room for the hint */
  }
  [data-jrpg-ui="true"] .jrpg-utility-sheet,
  [data-jrpg-ui="true"] .creation-sheet,
  [data-jrpg-ui="true"] .modal-frame {
    max-width: 640px;
    margin-inline: auto;
  }
  [data-jrpg-ui="true"] .jrpg-utility-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  }
  [data-jrpg-ui="true"] .jrpg-window {
    font-size: 16px;
  }
  [data-jrpg-ui="true"] .jrpg-window-title {
    font-size: 16px;
  }
  [data-jrpg-ui="true"] .jrpg-bar {
    font-size: 17px;
  }
}

/* ---- responsive: desktop breakpoint (1280px+) ---- */

@media (min-width: 1280px) {
  [data-jrpg-ui="true"] .jrpg-utility-sheet,
  [data-jrpg-ui="true"] .creation-sheet,
  [data-jrpg-ui="true"] .modal-frame {
    max-width: 720px;
  }
  [data-jrpg-ui="true"] .jrpg-utility-sheet .modal-title {
    font-size: 26px;
  }
  /* Main-menu verb list gets slightly taller targets on a mouse build. */
  [data-jrpg-ui="true"] .jrpg-utility-verbs .jrpg-window-option.action-button {
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 17px;
  }
  /* Pack/Magic hub content panels stretch. */
  [data-jrpg-ui="true"] .hub-window {
    max-width: 900px;
    margin-inline: auto;
  }
}

/* ---- responsive: ultra-wide guard (1600px+) ---- */

@media (min-width: 1600px) {
  [data-jrpg-ui="true"] .jrpg-utility-sheet,
  [data-jrpg-ui="true"] .creation-sheet,
  [data-jrpg-ui="true"] .modal-frame {
    max-width: 820px;
  }
  [data-jrpg-ui="true"] .hub-window {
    max-width: 1080px;
  }
}

/* ---- reduced-motion final sweep ---- */

@media (prefers-reduced-motion: reduce) {
  [data-jrpg-ui="true"] .jrpg-window,
  [data-jrpg-ui="true"] .board-stage[data-jrpg-pressure] .board-frame {
    transition: none !important;
    animation: none !important;
  }
}

/* ---- polish: missed-class cleanup ---- */
/* The pack-inspector hierarchy uses different class names than I anticipated.
   Catch them here with the same ghost-outline treatment. */

[data-jrpg-ui="true"] .hub-window .pack-inspector-panel,
[data-jrpg-ui="true"] .hub-window .pack-inspector-card,
[data-jrpg-ui="true"] .hub-window .pack-decision-panel,
[data-jrpg-ui="true"] .hub-window .pack-decision-result-card,
[data-jrpg-ui="true"] .hub-window .pack-classic-list,
[data-jrpg-ui="true"] .hub-window .pack-group-list {
  background: rgba(12, 26, 58, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  color: var(--jrpg-text) !important;
}

[data-jrpg-ui="true"] .hub-window .pack-inspector-panel .action-button,
[data-jrpg-ui="true"] .hub-window .pack-inspector-card .action-button,
[data-jrpg-ui="true"] .hub-window .pack-decision-panel .action-button,
[data-jrpg-ui="true"] .hub-window .pack-decision-result-card .action-button,
[data-jrpg-ui="true"] .hub-window .pack-inspector-actions .action-button {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  color: var(--jrpg-text) !important;
  font-family: var(--jrpg-font-body) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 5px 12px !important;
  min-height: 34px !important;
}

[data-jrpg-ui="true"] .hub-window .pack-inspector-panel .action-button.primary,
[data-jrpg-ui="true"] .hub-window .pack-inspector-card .action-button.primary,
[data-jrpg-ui="true"] .hub-window .pack-decision-panel .action-button.primary,
[data-jrpg-ui="true"] .hub-window .pack-decision-result-card .action-button.primary,
[data-jrpg-ui="true"] .hub-window .pack-inspector-actions .action-button.primary {
  color: var(--jrpg-cursor) !important;
  border-color: var(--jrpg-cursor) !important;
}

/* Strong override for the Return to Run button in the utility menu. The
   legacy .action-button.primary gradient at styles.css:706 was still
   winning on this one because .utility-command-actions has its own
   background rule at :7405. Force ghost outline here. */

[data-jrpg-ui="true"] .jrpg-utility-sheet .utility-command-actions,
[data-jrpg-ui="true"] .jrpg-utility-sheet .jrpg-utility-actions {
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 12px 16px 16px !important;
}

[data-jrpg-ui="true"] .jrpg-utility-sheet .utility-menu-primary-action.action-button,
[data-jrpg-ui="true"] .jrpg-utility-sheet .utility-menu-primary-action.action-button.primary {
  background: transparent !important;
  background-image: none !important;
  border: 2px solid var(--jrpg-cursor) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  color: var(--jrpg-cursor) !important;
  font-family: var(--jrpg-font-body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  padding: 8px 18px !important;
  min-height: 42px !important;
  width: auto !important;
  margin-inline: auto !important;
}

[data-jrpg-ui="true"] .jrpg-utility-sheet .utility-menu-primary-action.action-button:hover,
[data-jrpg-ui="true"] .jrpg-utility-sheet .utility-menu-primary-action.action-button:focus-visible {
  background: rgba(245, 197, 96, 0.08) !important;
}

/* Same treatment for the Begin Adventure / Continue / Start Run buttons. */
[data-jrpg-ui="true"] .creation-sheet .creation-actions .action-button.primary,
[data-jrpg-ui="true"] .title-screen .title-actions .action-button.primary {
  background: transparent !important;
  background-image: none !important;
  border: 2px solid var(--jrpg-cursor) !important;
  border-radius: 2px !important;
  color: var(--jrpg-cursor) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* ============================================================
   SMART INVENTORY — glyph badges + noise dim + shop affordability.

   Motivation: filters are a retreat. A smart-sorted list with
   single-char signal glyphs lets players scan the pack at a
   glance without changing filter chips every time they open it.

   Visual contract:
     • Each .pack-item-row gets a fixed 22px glyph column on the left
     • .glyph-upgrade  → gold \u2191    (upgrade over equipped)
     • .glyph-urgent   → red  !     (use me now — matches recommendation)
     • .glyph-unknown  → blue ?     (unidentified)
     • .glyph-cursed   → red  \u00D7    (cursed, usually also .is-noise)
     • .glyph-damaged  → dim  ~     (charges spent / low durability)
     • .is-noise       → opacity .55 (cursed, spent, duplicate spellbook)
     • .is-unaffordable → can't-buy treatment in shops
   ============================================================ */

[data-jrpg-ui="true"] .hub-window .pack-item-row {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  column-gap: 8px;
  align-items: center;
  padding-left: 8px !important;         /* remove the 24px ::before cursor pad */
}

[data-jrpg-ui="true"] .hub-window .pack-item-row::before {
  /* The existing ► cursor now lives in the glyph column instead of its
     own pseudo, so we don't double up. Still shown via class on active. */
  display: none;
}

[data-jrpg-ui="true"] .hub-window .pack-item-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  min-height: 22px;
  font-family: var(--jrpg-font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--jrpg-text-dim);
  line-height: 1;
  user-select: none;
}

[data-jrpg-ui="true"] .hub-window .pack-item-row .pack-item-head {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

/* The active row's \u25ba cursor moves into the glyph column. */
[data-jrpg-ui="true"] .hub-window .pack-item-row.active .pack-item-glyph::after {
  content: "\25B6";
  color: var(--jrpg-cursor);
  font-size: 13px;
  margin-left: 2px;
}

/* Glyph color variants. */
[data-jrpg-ui="true"] .hub-window .pack-item-row.glyph-upgrade .pack-item-glyph { color: var(--jrpg-cursor); }
[data-jrpg-ui="true"] .hub-window .pack-item-row.glyph-urgent  .pack-item-glyph { color: var(--jrpg-alert); }
[data-jrpg-ui="true"] .hub-window .pack-item-row.glyph-unknown .pack-item-glyph { color: var(--jrpg-mp); }
[data-jrpg-ui="true"] .hub-window .pack-item-row.glyph-cursed  .pack-item-glyph { color: var(--jrpg-alert); }
[data-jrpg-ui="true"] .hub-window .pack-item-row.glyph-damaged .pack-item-glyph { color: var(--jrpg-text-dim); }

/* Noise dim — applied to cursed / already-learned / spent items so signal pops. */
[data-jrpg-ui="true"] .hub-window .pack-item-row.is-noise {
  opacity: 0.55;
}

[data-jrpg-ui="true"] .hub-window .pack-item-row.is-noise:hover,
[data-jrpg-ui="true"] .hub-window .pack-item-row.is-noise:focus-visible,
[data-jrpg-ui="true"] .hub-window .pack-item-row.is-noise.active {
  opacity: 1; /* when the player actively engages with a noise item, show it full */
}

/* Shop: can't-afford treatment. The row stays scannable but dims and the
   inline meta already surfaces the cost — player sees the price they can't
   pay without a secondary warning. */
[data-jrpg-ui="true"] .hub-window .pack-item-row.is-unaffordable {
  opacity: 0.45;
}

[data-jrpg-ui="true"] .hub-window .pack-item-row.is-unaffordable .pack-item-meta {
  color: var(--jrpg-alert) !important;
}

[data-jrpg-ui="true"] .hub-window .pack-item-row.is-unaffordable:hover,
[data-jrpg-ui="true"] .hub-window .pack-item-row.is-unaffordable:focus-visible {
  opacity: 0.7; /* still visually distinct, but readable when engaged */
}

/* Upgrade rows get a subtle amber left-edge underline even when not active,
   so the "this beats what you have" signal survives when the eye is scanning. */
[data-jrpg-ui="true"] .hub-window .pack-item-row.glyph-upgrade:not(.active) {
  box-shadow: inset 2px 0 0 var(--jrpg-cursor);
}

[data-jrpg-ui="true"] .hub-window .pack-item-row.glyph-urgent:not(.active) {
  box-shadow: inset 2px 0 0 var(--jrpg-alert);
}

/* ============================================================
   SHOP "SELL ALL UNMARKED" HERO ROW
   Pinned at the top of the sell list. Treated as a gold-bordered
   window option so it reads as the primary action without hiding
   the individual-item rows below. The star glyph + concrete gold
   preview ("+88 gp") makes the outcome obvious before the tap.
   ============================================================ */

[data-jrpg-ui="true"] .hub-window .shop-transaction-row-bulk.is-hero {
  background: linear-gradient(180deg, rgba(245, 197, 96, 0.08), rgba(245, 197, 96, 0.02)) !important;
  border: 2px solid var(--jrpg-cursor) !important;
  border-radius: 3px !important;
  margin-bottom: 10px;
  padding: 10px 8px !important;
  opacity: 1 !important;    /* override .is-noise / .is-unaffordable if they ever apply */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5) !important;
}

[data-jrpg-ui="true"] .hub-window .shop-transaction-row-bulk.is-hero:hover,
[data-jrpg-ui="true"] .hub-window .shop-transaction-row-bulk.is-hero:focus-visible {
  background: linear-gradient(180deg, rgba(245, 197, 96, 0.18), rgba(245, 197, 96, 0.06)) !important;
}

[data-jrpg-ui="true"] .hub-window .shop-transaction-row-bulk.is-hero .pack-item-glyph {
  color: var(--jrpg-cursor) !important;
  font-size: 18px;
}

[data-jrpg-ui="true"] .hub-window .shop-transaction-row-bulk.is-hero .pack-item-name {
  color: var(--jrpg-cursor) !important;
  font-family: var(--jrpg-font-display);
  font-size: 16px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
}

[data-jrpg-ui="true"] .hub-window .shop-transaction-row-bulk.is-hero .pack-item-meta {
  color: #9ae67a !important;   /* soft "profit green" for the gold preview line */
  font-family: var(--jrpg-font-display);
  font-size: 15px;
  letter-spacing: 0.04em;
}

[data-jrpg-ui="true"] .hub-window .shop-transaction-row-bulk.is-hero .pack-row-chip {
  background: var(--jrpg-cursor) !important;
  color: var(--jrpg-navy-deep) !important;
  font-family: var(--jrpg-font-display);
  font-size: 11px !important;
  letter-spacing: 0.1em;
  font-weight: 700;
  padding: 2px 6px !important;
  border: 0 !important;
  border-radius: 2px !important;
}

[data-jrpg-ui="true"] .hub-window .shop-transaction-row-bulk.is-hero .pack-slot-row-note {
  color: var(--jrpg-text-dim);
  font-size: 12px;
}

[data-jrpg-ui="true"] .hub-window .shop-transaction-row-bulk.is-hero:disabled {
  opacity: 0.45 !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  background: transparent !important;
}

[data-jrpg-ui="true"] .hub-window .shop-transaction-row-bulk.is-hero:disabled .pack-item-name,
[data-jrpg-ui="true"] .hub-window .shop-transaction-row-bulk.is-hero:disabled .pack-item-glyph {
  color: var(--jrpg-text-dim) !important;
}

/* ============================================================
   MAIN PLAY SCREEN \u2014 aesthetic match to the menus.
   The board stage becomes a proper JRPG window: double border,
   navy-tinted outer frame, subtle glow. The top location chip
   becomes a name-plate banner. All three surfaces (top-band,
   board, bottom-band) share the same double-border language so
   the play screen reads as one cohesive JRPG UI.
   ============================================================ */

[data-jrpg-ui="true"] .board-stage.panel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

[data-jrpg-ui="true"] .board-frame {
  background: var(--jrpg-navy-deep);
  border: 3px double var(--jrpg-border);
  border-radius: 4px;
  padding: 2px;
  box-shadow:
    var(--jrpg-window-glow),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

[data-jrpg-ui="true"] .board-frame #game-canvas {
  display: block;
  border-radius: 2px;
}

/* Top band — location chip becomes a JRPG name-plate banner:
   a wide window fragment pinned to the left with uppercase pixel
   typography. Music/Menu stay as small utility chips on the right. */

[data-jrpg-ui="true"] .top-band {
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
}

[data-jrpg-ui="true"] .top-band .top-band-status {
  display: flex;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

[data-jrpg-ui="true"] .top-band .utility-run-status {
  font-family: var(--jrpg-font-display) !important;
  font-size: 14px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 14px !important;
  border-width: 3px !important;
  border-style: double !important;
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-jrpg-ui="true"] .top-band .utility-pressure-status {
  font-family: var(--jrpg-font-display) !important;
  font-size: 12px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px !important;
  flex: 0 1 auto;
  min-width: 0;
}

[data-jrpg-ui="true"] .top-band-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

/* Ensure consistent vertical rhythm between the three play-screen bands. */
[data-jrpg-ui="true"] .mobile-app {
  gap: 10px;
}

[data-jrpg-ui="true"] .board-cluster {
  display: block;
}

/* The message log / event ticker is positioned over the board. Give it a
   tighter top offset so it reads as a classic battle dialog window. */
[data-jrpg-ui="true"] .board-overlays #event-ticker.message-log {
  bottom: 10px;
  left: 10px;
  right: 10px;
  width: auto;
  max-height: 34%;
}

/* The "Magic" side chip gets a vertical ribbon-tab treatment so it reads
   as an anchored JRPG side-panel rather than a floating button. */
[data-jrpg-ui="true"] .board-overlays .spell-chip-button,
[data-jrpg-ui="true"] .board-overlays .map-chip-button {
  writing-mode: initial;       /* explicit reset in case a legacy rule rotated it */
  font-family: var(--jrpg-font-display) !important;
  font-size: 13px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px !important;
}

/* Tablet+ — the play screen can breathe: wider status/command windows,
   louder name plate. Also keeps the board from getting overly wide. */
@media (min-width: 768px) {
  [data-jrpg-ui="true"] .board-frame {
    max-width: 720px;
    margin-inline: auto;
  }
  [data-jrpg-ui="true"] .top-band .utility-run-status {
    font-size: 16px !important;
  }
}

@media (min-width: 1280px) {
  [data-jrpg-ui="true"] .board-frame {
    max-width: 860px;
  }
}

/* ============================================================
   Menu Design Cleanup Pass
   Final cascade layer for the active menu family. This removes
   fullscreen dead-space rules from compact workspaces, fixes row
   alignment in icon-based lists, and makes Utility a true command
   palette instead of a dashboard.
   ============================================================ */

:root {
  --menu-smart-gap: 10px;
  --menu-smart-panel-pad: 10px 12px;
  --menu-smart-row-pad: 7px 8px;
  --menu-smart-list-max: min(68vh, 780px);
}

#modal-root .modal:has(.hub-window-pack) .modal-body,
#modal-root .modal:has(.hub-window-magic) .modal-body,
#modal-root .modal:has(.shop-workspace) .modal-body,
#modal-root .modal.utility-menu-sheet .modal-body {
  align-content: start !important;
}

.hub-window,
.hub-window-pack .pack-equip-workspace,
.hub-window-magic .magic-workspace,
.shop-workspace {
  align-content: start !important;
}

.workspace-shell,
.shop-transaction-shell,
.hub-window-pack .pack-layout.pack-layout-equip,
.hub-window-pack .pack-layout:not(.pack-layout-equip),
.hub-window-magic .magic-layout,
.utility-menu-body,
.town-workspace {
  min-height: 0 !important;
  align-items: start !important;
}

@media (min-width: 920px) {
  #modal-root .modal:has(.hub-window-pack),
  #modal-root .modal:has(.hub-window-magic),
  #modal-root .modal:has(.shop-workspace) {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 20px) !important;
  }

  #modal-root .modal.utility-menu-sheet.modal-frame:not(.title-screen):not(.creation-sheet) {
    width: min(760px, calc(100vw - 20px)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 20px) !important;
  }

  .hub-window-pack,
  .hub-window-magic,
  .shop-workspace {
    gap: var(--menu-smart-gap) !important;
  }
}

.hub-window .hub-tabs {
  padding-block: 5px !important;
}

.hub-window-pack .pack-toolbar,
.hub-window-magic .pack-toolbar,
.shop-transaction-toolbar {
  margin-bottom: 0 !important;
  padding-bottom: 6px !important;
}

.hub-window-pack .pack-equip-controls,
.hub-window-magic .magic-controls,
.shop-workspace [data-shop-panel-tabs-host] {
  gap: 6px !important;
}

.hub-window-pack .pack-layout.pack-layout-equip,
.hub-window-magic .magic-layout,
.shop-transaction-shell {
  gap: 12px !important;
}

.pack-classic-list,
.magic-book-list,
.shop-transaction-list {
  contain: layout paint;
}

.hub-window-pack .pack-layout.pack-layout-equip .pack-list-panel,
.hub-window-magic .magic-book-list,
.shop-transaction-list-panel .shop-transaction-list {
  max-height: var(--menu-smart-list-max) !important;
}

.hub-window .pack-item-row,
.hub-window .magic-card-select,
.shop-transaction-list .pack-item-row {
  padding: var(--menu-smart-row-pad) !important;
  column-gap: 8px !important;
}

.hub-window .pack-item-row .pack-item-head,
.hub-window .magic-card-select .pack-item-head,
.shop-transaction-list .pack-item-head {
  min-width: 0;
  width: 100%;
}

.hub-window .pack-item-name,
.hub-window .pack-item-meta,
.hub-window .pack-item-meta-compact,
.hub-window .magic-list-row-note {
  min-width: 0;
}

.hub-window .pack-item-name,
.hub-window .pack-item-meta-compact,
.hub-window .magic-list-row-note {
  overflow: hidden;
  text-overflow: ellipsis;
}

.hub-window .pack-item-name {
  white-space: nowrap;
}

.hub-window-magic .magic-book-list .magic-card {
  grid-template-columns: 22px minmax(0, 1fr) !important;
  row-gap: 2px !important;
}

.hub-window-magic .magic-book-list .magic-card .magic-list-row-note {
  grid-column: 2;
  white-space: nowrap;
  color: rgba(214, 221, 212, 0.62) !important;
}

.hub-window-magic .magic-book-list .magic-card .pack-item-head-side {
  flex: 0 0 auto;
}

.hub-window-magic .magic-book-list .spell-symbol-inline.pack-item-glyph {
  font-size: 18px;
  color: #f4d79f;
}

.pack-classic-list .pack-row-inline-compare {
  grid-column: 2;
  display: none !important;
}

.pack-classic-list .pack-item-row.active .pack-row-inline-compare,
.pack-classic-list .pack-item-row:hover .pack-row-inline-compare,
.pack-classic-list .pack-item-row:focus-visible .pack-row-inline-compare {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.hub-window .pack-inspector-panel,
.hub-window .pack-inspector-card,
.hub-window .pack-decision-panel,
.hub-window .pack-decision-result-card,
.hub-window .pack-classic-list,
.hub-window .pack-group-list,
.shop-result-panel,
.shop-transaction-list-panel {
  padding: var(--menu-smart-panel-pad) !important;
}

.hub-window .pack-inspector-copy,
.hub-window .pack-inspector-note,
.hub-window .magic-result-copy,
.shop-sell-note {
  line-height: 1.35 !important;
}

.hub-window .pack-inspector-actions,
.hub-window .magic-result-actions {
  gap: 6px !important;
}

.hub-window .pack-inspector-actions .action-button,
.hub-window .magic-result-actions .menu-button,
.shop-result-panel .menu-button {
  min-height: 32px !important;
  padding: 5px 10px !important;
}

.jrpg-utility-sheet .modal-title {
  padding: 9px 14px 4px !important;
  font-size: 20px !important;
}

.jrpg-utility-body {
  padding: 10px 12px !important;
}

.jrpg-utility-grid {
  gap: 8px !important;
}

.jrpg-utility-party .jrpg-window-title,
.jrpg-utility-verbs .jrpg-window-title {
  margin-bottom: 5px !important;
  padding-bottom: 4px !important;
}

.jrpg-utility-run-line {
  margin-bottom: 4px !important;
  font-size: 14px !important;
  line-height: 1.28 !important;
}

.jrpg-utility-meta-line {
  font-size: 11px !important;
  line-height: 1.25 !important;
}

#utility-control-summary {
  display: none !important;
}

.jrpg-utility-verb-list {
  gap: 0 !important;
}

.jrpg-utility-verbs .jrpg-window-option.action-button {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  font-size: 15px !important;
}

.jrpg-utility-verb-divider {
  margin: 7px 0 4px !important;
}

.jrpg-utility-verb-label {
  margin-bottom: 2px !important;
}

.jrpg-utility-sheet .utility-command-actions,
.jrpg-utility-sheet .jrpg-utility-actions {
  padding: 8px 12px 10px !important;
}

.jrpg-utility-sheet .utility-menu-primary-action.action-button,
.jrpg-utility-sheet .utility-menu-primary-action.action-button.primary {
  min-height: 36px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
}

.jrpg-utility-sheet .utility-trace-button {
  display: none !important;
}

@media (max-width: 760px) {
  #modal-root .modal.utility-menu-sheet {
    width: calc(100vw - 14px) !important;
    max-height: calc(100vh - 14px) !important;
  }

  .jrpg-utility-sheet .modal-title {
    padding-top: 7px !important;
  }

  .jrpg-utility-body {
    padding: 8px 9px !important;
  }

  .jrpg-utility-grid {
    gap: 7px !important;
  }

  .jrpg-utility-party.jrpg-window,
  .jrpg-utility-verbs.jrpg-window {
    padding: 9px 10px !important;
  }

  .jrpg-utility-party .jrpg-window-title,
  .jrpg-utility-verbs .jrpg-window-title {
    font-size: 13px !important;
  }

  .jrpg-utility-run-line {
    font-size: 13px !important;
    margin-bottom: 2px !important;
  }

  .jrpg-utility-meta-line {
    font-size: 10px !important;
    padding-block: 1px !important;
  }

  .jrpg-utility-verb-list,
  .jrpg-utility-verb-tools {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 8px !important;
    row-gap: 1px !important;
  }

  .jrpg-utility-verbs .jrpg-window-option.action-button {
    min-height: 30px !important;
    padding: 3px 8px 3px 20px !important;
    font-size: 13px !important;
  }

  .jrpg-utility-verbs .jrpg-window-option::before {
    left: 2px !important;
  }

  .jrpg-utility-verb-divider {
    margin: 5px 0 3px !important;
  }

  .jrpg-utility-verb-label {
    padding-inline: 4px !important;
    font-size: 10px !important;
  }

  .jrpg-utility-sheet .utility-command-actions,
  .jrpg-utility-sheet .jrpg-utility-actions {
    padding: 7px 9px 8px !important;
  }

  .hub-window-magic .magic-book-list .magic-card .magic-list-row-note {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .hub-window .pack-item-row .pack-item-head,
  .hub-window .magic-card-select .pack-item-head {
    align-items: start !important;
  }

  .hub-window .pack-item-head-side {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

/* Town + Map Readability Pass */
.desktop-map-host .map-panel {
  width: 260px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(8, 15, 28, 0.98), rgba(5, 9, 18, 0.96)),
    radial-gradient(circle at top left, rgba(245, 197, 96, 0.08), transparent 38%) !important;
  border: 3px double rgba(246, 224, 182, 0.78) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

.desktop-aux-stack:has(.desktop-map-host:not(.hidden)) {
  top: 92px;
  bottom: auto;
}

.desktop-map-host #map-canvas {
  max-height: 210px;
  border-radius: 8px;
  image-rendering: pixelated;
  border: 1px solid rgba(246, 224, 182, 0.26);
}

.map-caption-row {
  gap: 5px;
}

.desktop-map-host .map-chip {
  padding: 4px 7px;
  border-radius: 3px;
  font-size: 0.66rem;
}

.map-panel #map-canvas {
  background: #07100c;
}

@media (max-width: 760px) {
  .map-panel {
    gap: 8px;
  }

  .map-panel #map-canvas {
    image-rendering: pixelated;
  }

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

  .map-chip {
    justify-content: center;
    min-width: 0;
  }
}