@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;700;800&family=Yeseva+One&display=swap");

:root {
  --font-display: "Yeseva One", Georgia, "Times New Roman", serif;
  --font-ui: "Roboto Slab", Georgia, "Times New Roman", serif;
  --ink: #241d18;
  --muted: #6b5b4f;
  --paper: #f6ead4;
  --panel: #fff8ea;
  --line: #d2b98f;
  --red: #a33a2f;
  --green: #3f7652;
  --blue: #2e637a;
  --gold: #b47d24;
  --dark: #31251d;
  --asset-map-bg: url("/assets/map/map-board.webp?v=2026-07-01.1");
  --western-bg: #0b0a08;
  --western-board: #17100b;
  --western-paper: #c49a5f;
  --western-paper-light: #d6b77f;
  --western-paper-dark: #8b5f32;
  --western-leather: #2a1710;
  --western-leather-light: #4b2b1b;
  --western-brass: #b47a32;
  --western-brass-light: #d1a45c;
  --western-red: #8f2f1e;
  --western-red-dark: #4d1710;
  --western-olive: #4f5a34;
  --western-ink: #211712;
  --western-dust: rgba(220, 172, 93, 0.15);
  --western-shadow: rgba(0, 0, 0, 0.45);
}

* {
  box-sizing: border-box;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    linear-gradient(rgba(44, 32, 24, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44, 32, 24, 0.08) 1px, transparent 1px),
    linear-gradient(135deg, #d9b16d 0%, #efe0bf 38%, #b6c7b3 100%);
  background-size: 28px 28px, 28px 28px, cover;
}

button,
input,
select {
  font: inherit;
}

button,
select,
input {
  border-radius: 8px;
}

button {
  min-height: 40px;
  border: 1px solid #8e7148;
  background: #fbf0d8;
  color: var(--ink);
  cursor: pointer;
  font-weight: 700;
}

button.primary {
  border-color: #612a22;
  background: var(--red);
  color: #fff8ea;
}

button.danger-button,
.danger-button {
  border-color: #612a22;
  background: #7f241e;
  color: #fff8ea;
}

button:hover {
  filter: brightness(0.98);
}

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

input,
select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  padding: 0 10px;
  background: #fffdf7;
  color: var(--ink);
}

.app {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  min-height: 100vh;
  padding: 14px;
}

.loading-app {
  place-items: center;
}

.loading-screen {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 28px);
  width: 100%;
}

.loading-card {
  width: min(520px, 100%);
  text-align: center;
}

.loading-mark {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border: 5px solid #ead8b7;
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

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

.home-app {
  align-content: center;
}

.home-screen {
  display: grid;
  gap: 14px;
  width: min(980px, 100%);
  margin: 0 auto;
}

.home-hero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  padding: 20px;
  border: 1px solid rgba(69, 48, 31, 0.24);
  border-radius: 8px;
  background: rgba(255, 248, 234, 0.94);
}

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

.home-card {
  display: grid;
  gap: 10px;
}

.restore-card {
  grid-column: 1 / -1;
}

.app-top,
.game-layout {
  display: grid;
  gap: 12px;
}

.game-layout {
  grid-template-columns: minmax(620px, 1fr) 410px;
  align-items: start;
}

.game-table {
  display: grid;
  grid-template-columns: minmax(640px, 1fr) 380px;
  gap: 12px;
  align-items: start;
}

.table-main,
.table-side {
  display: grid;
  gap: 12px;
  align-content: start;
}

.table-side {
  position: relative;
  z-index: 0;
}

.party-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(69, 48, 31, 0.24);
  border-radius: 8px;
  background: rgba(255, 248, 234, 0.94);
}

.coop-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.1fr 1fr;
  gap: 12px;
  align-items: stretch;
}

.coop-card {
  min-height: 158px;
}

.activity-title {
  margin: 6px 0 4px;
  font-weight: 950;
}

.shared-roll {
  display: grid;
  gap: 3px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid #dec89e;
  border-radius: 8px;
  background: #fffdf7;
  font-size: 12px;
}

.night-attack-card {
  display: grid;
  gap: 3px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--red);
  border-radius: 8px;
  background: #ffe5df;
  color: #6b2a24;
  font-size: 12px;
  font-weight: 800;
}

.night-attack-card b {
  color: var(--red);
}

.shared-roll.success {
  border-color: var(--green);
  background: #f5fff0;
}

.shared-roll.failure {
  border-color: var(--red);
  background: #ffe5df;
}

.shared-roll span {
  color: var(--muted);
  font-weight: 800;
}

.turn-timeline {
  display: grid;
  gap: 5px;
  margin: 8px 0 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.mini-status-list {
  display: grid;
  gap: 7px;
}

.mini-player {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  align-items: center;
  padding: 6px;
  border: 1px solid #dec89e;
  border-radius: 8px;
  background: #fffdf7;
}

.mini-player b,
.mini-player small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-player small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.mini-player.is-me {
  border-color: var(--blue);
}

.mini-player.is-active {
  box-shadow: inset 0 0 0 2px rgba(63, 118, 82, 0.16);
}

.mini-player.is-offline {
  opacity: 0.58;
}

.player-token,
.legend-token {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  min-height: 30px;
  padding: 3px 5px;
  border: 2px solid rgba(49, 37, 29, 0.42);
  border-radius: 8px;
  color: #fffdf7;
  font-size: 11px;
  font-weight: 950;
}

.color-0 { background: #a33a2f; }
.color-1 { background: #2e637a; }
.color-2 { background: #3f7652; }
.color-3 { background: #8d5a1f; }
.color-4 { background: #684b8f; }
.color-5 { background: #6d6a27; }

.hud-badge {
  display: grid;
  gap: 1px;
  min-height: 40px;
  padding: 6px 9px;
  border: 1px solid #dec89e;
  border-radius: 8px;
  background: #fffdf7;
}

.hud-badge small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.hud-badge b {
  font-size: 13px;
  line-height: 1.1;
}

.left,
.right {
  display: grid;
  gap: 12px;
  align-content: start;
}

.top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: stretch;
  padding: 16px;
  border: 1px solid rgba(69, 48, 31, 0.24);
  border-radius: 8px;
  background: rgba(255, 248, 234, 0.94);
}

.top-actions {
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px;
  align-items: stretch;
}

.room-chip {
  display: grid;
  gap: 2px;
  min-width: 132px;
  padding: 7px 10px;
  border: 1px solid var(--dark);
  border-radius: 8px;
  background: #fffdf7;
}

.room-chip span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.room-chip b {
  font-size: 16px;
}

.help-button {
  min-width: 116px;
  border-color: var(--blue);
  background: #e9f2f5;
  color: var(--blue);
}

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

h1 {
  font-size: clamp(28px, 3.5vw, 48px);
  line-height: 0.95;
}

h2 {
  font-size: 16px;
}

h3 {
  font-size: 15px;
}

.subtitle {
  margin-top: 8px;
  color: var(--muted);
}

.panel-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  margin-bottom: 10px;
}

.panel-title.compact {
  align-items: center;
}

.action-hint {
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.tip {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  border: 1px solid #8e7148;
  border-radius: 999px;
  background: #fffdf7;
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  text-transform: none;
  cursor: help;
}

.code {
  display: grid;
  place-items: center;
  min-width: 132px;
  padding: 8px 12px;
  border: 2px solid var(--dark);
  border-radius: 8px;
  background: #fffdf7;
  font-size: 20px;
  font-weight: 900;
}

.state-message,
.lobby-screen {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.lobby-screen {
  display: grid;
  gap: 12px;
}

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

.invite-box {
  display: grid;
  gap: 5px;
  min-width: 260px;
}

.invite-box span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.invite-box b {
  font-size: 24px;
}

.lobby-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 12px;
  align-items: start;
}

.lobby-main,
.lobby-side {
  display: grid;
  gap: 12px;
}

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

.lobby-character-section {
  position: relative;
  overflow: hidden;
  border-color: rgba(209, 164, 92, 0.20);
  background:
    radial-gradient(circle at 16% 8%, rgba(143, 47, 30, 0.16), transparent 30%),
    radial-gradient(circle at 84% 92%, rgba(11, 10, 8, 0.52), transparent 44%),
    radial-gradient(circle at 50% 0%, rgba(209, 164, 92, 0.10), transparent 36%),
    linear-gradient(135deg, var(--western-leather-light), var(--western-board) 52%, var(--western-bg));
  box-shadow:
    inset 0 0 0 1px rgba(209, 164, 92, 0.14),
    inset 0 0 70px rgba(0, 0, 0, 0.28),
    0 18px 38px rgba(0, 0, 0, 0.24);
}

.lobby-character-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(220, 172, 93, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 172, 93, 0.035) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.38;
}

.lobby-character-section > * {
  position: relative;
  z-index: 1;
}

.lobby-character-section .panel-title h2 {
  color: #e4cfaa;
}

.lobby-character-section .panel-title .muted {
  color: rgba(228, 207, 170, 0.72);
}

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

.character-card.is-taken {
  opacity: 0.62;
}

.character-select-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  align-self: stretch;
  gap: 0;
  width: 100%;
  max-width: 420px;
  min-width: 0;
  margin: 0 auto;
  padding: 0;
  border: 1px solid rgba(75, 47, 31, 0.78);
  border-radius: 24px;
  background:
    var(--grain),
    radial-gradient(circle at 19% 10%, rgba(208, 163, 92, 0.34), transparent 29%),
    radial-gradient(circle at 85% 92%, rgba(75, 47, 31, 0.22), transparent 34%),
    radial-gradient(circle at 6% 78%, rgba(89, 100, 61, 0.16), transparent 26%),
    linear-gradient(145deg, #d8bd8d 0%, #e4cfaa 48%, #caa978 100%);
  box-shadow:
    inset 0 0 0 2px rgba(232, 220, 199, 0.20),
    inset 0 0 34px rgba(75, 47, 31, 0.18),
    0 16px 30px rgba(62, 43, 24, 0.23),
    0 4px 9px rgba(62, 43, 24, 0.16);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease,
    transform 180ms ease;
}

.character-select-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(208, 163, 92, 0.58);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0 0, rgba(75, 47, 31, 0.52) 0 7px, transparent 8px),
    radial-gradient(circle at 100% 0, rgba(75, 47, 31, 0.40) 0 7px, transparent 8px),
    radial-gradient(circle at 0 100%, rgba(75, 47, 31, 0.34) 0 7px, transparent 8px),
    radial-gradient(circle at 100% 100%, rgba(75, 47, 31, 0.48) 0 7px, transparent 8px),
    radial-gradient(circle at 32% 36%, rgba(75, 47, 31, 0.10), transparent 22%),
    linear-gradient(90deg, rgba(183, 131, 63, 0.24), transparent 18%, transparent 82%, rgba(89, 100, 61, 0.18)),
    linear-gradient(180deg, rgba(228, 207, 170, 0.30), transparent 23%, transparent 73%, rgba(75, 47, 31, 0.14));
  box-shadow:
    inset 0 0 0 3px rgba(216, 189, 141, 0.28),
    inset 0 0 24px rgba(75, 47, 31, 0.18),
    inset 0 -18px 30px rgba(75, 47, 31, 0.12);
}

.character-select-card > * {
  position: relative;
  z-index: 2;
}

.character-select-card:hover {
  transform: translateY(-1px);
  border-color: rgba(208, 163, 92, 0.86);
  box-shadow:
    inset 0 0 0 2px rgba(232, 220, 199, 0.22),
    inset 0 0 34px rgba(75, 47, 31, 0.16),
    0 20px 38px rgba(62, 43, 24, 0.27),
    0 6px 13px rgba(62, 43, 24, 0.16);
}

@keyframes status-stamp-pop {
  0% {
    transform: rotate(-2deg) scale(0.94);
  }
  60% {
    transform: rotate(-2deg) scale(1.04);
  }
  100% {
    transform: rotate(-2deg) scale(1);
  }
}

.character-select-main {
  display: grid;
  grid-template-columns: minmax(96px, 116px) minmax(0, 1fr);
  gap: 9px;
  padding: 13px 13px 7px;
}

.character-portrait {
  position: relative;
  display: grid;
  place-items: center;
  align-self: start;
  overflow: hidden;
  --portrait-scale: 1.42;
  --portrait-x: 0px;
  --portrait-y: 0px;
  --portrait-origin-x: 50%;
  --portrait-origin-y: 18%;
  aspect-ratio: 4 / 5;
  min-height: 130px;
  border: 1px solid rgba(75, 47, 31, 0.62);
  border-radius: 18px;
  background:
    var(--grain),
    radial-gradient(circle at 42% 28%, rgba(228, 207, 170, 0.46), transparent 30%),
    linear-gradient(145deg, rgba(89, 100, 61, 0.78), rgba(91, 56, 37, 0.62));
  box-shadow:
    inset 0 0 0 3px rgba(216, 189, 141, 0.24),
    inset 0 -22px 26px rgba(45, 36, 26, 0.24),
    0 5px 12px rgba(62, 43, 24, 0.18);
}

.character-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 10%;
  transform: translate(var(--portrait-x), var(--portrait-y)) scale(var(--portrait-scale));
  transform-origin: var(--portrait-origin-x) var(--portrait-origin-y);
}

.portrait-butch {
  --portrait-scale: 1.5;
  --portrait-y: -2px;
  --portrait-origin-y: 16%;
}

.portrait-botts {
  --portrait-scale: 1.45;
  --portrait-y: -3px;
  --portrait-origin-y: 16%;
}

.portrait-hardin {
  --portrait-scale: 1.42;
  --portrait-y: -4px;
  --portrait-origin-y: 16%;
}

.portrait-etta {
  --portrait-scale: 1.48;
  --portrait-y: -2px;
  --portrait-origin-y: 15%;
}

.portrait-logan {
  --portrait-scale: 1.42;
  --portrait-y: -4px;
  --portrait-origin-y: 15%;
}

.portrait-walsh {
  --portrait-scale: 1.52;
  --portrait-y: -5px;
  --portrait-origin-y: 14%;
}

.character-portrait span {
  color: rgba(61, 43, 24, 0.46);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 0;
}

.character-select-info {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.character-select-title {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.character-select-title h3 {
  margin: 0;
  color: var(--dark);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.1;
}

.character-select-title p {
  margin: 2px 0 0;
  color: var(--moss);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

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

.character-primary-stat,
.character-resource-stat,
.character-stat-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  border: 1px solid rgba(75, 47, 31, 0.28);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(216, 189, 141, 0.74), rgba(202, 169, 120, 0.44));
  font-weight: 800;
  line-height: 1.15;
}

.character-primary-stat {
  gap: 5px;
  min-height: 38px;
  padding: 3px 7px;
  border-color: rgba(183, 131, 63, 0.58);
  border-radius: 14px;
  background:
    var(--grain),
    radial-gradient(circle at 30% 20%, rgba(228, 207, 170, 0.88), rgba(202, 169, 120, 0.52) 56%, rgba(89, 100, 61, 0.16));
  box-shadow:
    inset 0 1px 0 rgba(228, 207, 170, 0.42),
    inset 0 -5px 10px rgba(75, 47, 31, 0.08),
    0 2px 5px rgba(62, 43, 24, 0.10);
}

.character-primary-stat img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(62, 43, 24, 0.28));
}

.character-primary-stat b {
  color: var(--dark);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.character-resource-stat {
  grid-column: 1 / -1;
  gap: 6px;
  min-height: 30px;
  padding: 3px 8px;
  border-color: rgba(183, 131, 63, 0.42);
  border-radius: 12px;
  color: var(--dark);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(216, 189, 141, 0.70), rgba(183, 131, 63, 0.26));
  box-shadow:
    inset 0 1px 0 rgba(228, 207, 170, 0.38),
    inset 0 -4px 8px rgba(75, 47, 31, 0.06);
}

.character-resource-stat img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(62, 43, 24, 0.22));
}

.character-resource-stat b {
  color: var(--dark);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.character-stat-chip {
  gap: 4px;
  min-height: 29px;
  padding: 2px 6px 2px 4px;
  border-radius: 11px;
  color: var(--dark);
  box-shadow:
    inset 0 1px 0 rgba(228, 207, 170, 0.38),
    inset 0 -4px 8px rgba(75, 47, 31, 0.06);
}

.character-stat-chip img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(62, 43, 24, 0.22));
}

.character-stat-chip b {
  min-width: 1ch;
  color: var(--dark);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

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

.character-select-notes {
  display: grid;
  gap: 5px;
  padding: 0 13px 9px;
  min-width: 0;
}

.character-ability-block {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 7px 8px 7px 28px;
  border: 1px solid rgba(75, 47, 31, 0.24);
  border-radius: 14px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(228, 207, 170, 0.54), rgba(202, 169, 120, 0.26));
  box-shadow:
    inset 0 1px 0 rgba(228, 207, 170, 0.38),
    inset 0 -7px 12px rgba(75, 47, 31, 0.06);
}

.character-ability-block::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 9px;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(75, 47, 31, 0.34);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(228, 207, 170, 0.92), rgba(183, 131, 63, 0.68) 58%, rgba(89, 100, 61, 0.46));
  box-shadow:
    inset 0 1px 1px rgba(228, 207, 170, 0.56),
    0 1px 2px rgba(62, 43, 24, 0.18);
}

.character-ability-block b {
  color: var(--dark);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.15;
}

.character-ability-block p,
.character-card-description {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--dark);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.3;
  -webkit-box-orient: vertical;
}

.character-ability-block p {
  -webkit-line-clamp: 2;
}

.character-card-description {
  padding-top: 2px;
  border-top: 1px solid rgba(75, 47, 31, 0.12);
  color: rgba(58, 43, 30, 0.70);
  font-style: italic;
  font-weight: 760;
  -webkit-line-clamp: 2;
}

.character-select-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 7px;
  align-items: center;
  padding: 7px 13px 10px;
  border-top: 1px solid rgba(75, 47, 31, 0.14);
  background:
    linear-gradient(180deg, rgba(89, 100, 61, 0.06), rgba(75, 47, 31, 0.08)),
    rgba(202, 169, 120, 0.26);
}

.character-inventory-slots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.inventory-slots-label {
  flex: 0 0 auto;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-slots-track {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 11px;
  gap: 4px;
  min-width: 0;
}

.inventory-slot {
  width: 11px;
  height: 15px;
  border: 1px solid rgba(75, 47, 31, 0.48);
  border-radius: 4px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(228, 207, 170, 0.84), rgba(183, 131, 63, 0.30));
  box-shadow:
    inset 0 1px 0 rgba(228, 207, 170, 0.54),
    inset 0 -4px 6px rgba(75, 47, 31, 0.10),
    0 1px 2px rgba(62, 43, 24, 0.16);
}

.character-status-stamp {
  justify-self: end;
  min-width: 0;
  padding: 4px 8px 3px;
  border: 1px solid rgba(75, 47, 31, 0.24);
  border-radius: 999px;
  background:
    var(--grain),
    rgba(228, 207, 170, 0.32);
  color: rgba(45, 36, 26, 0.70);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(228, 207, 170, 0.30);
}

.character-status-stamp.status-selected,
.character-status-stamp.status-taken {
  display: none;
}

.character-status-stamp.status-free {
  display: none;
}

.character-card-stamp {
  position: absolute;
  right: 9px;
  bottom: 9px;
  z-index: 7;
  width: clamp(72px, 7vw, 96px);
  pointer-events: none;
  user-select: none;
  transform: rotate(-5deg);
  filter: drop-shadow(0 6px 8px rgba(45, 20, 14, 0.22));
}

.character-card-stamp img {
  display: block;
  width: 100%;
  height: auto;
}

.character-card-stamp--selected {
  width: clamp(72px, 7vw, 98px);
  right: 7px;
  bottom: 10px;
  transform: rotate(-5deg);
  transform-origin: 50% 50%;
}

.character-select-card.selected .character-card-stamp--selected {
  animation: stamp-slap 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.character-card-stamp--taken {
  width: clamp(72px, 7vw, 98px);
  right: 7px;
  bottom: 10px;
  transform: rotate(-6deg);
  opacity: 0.88;
}

@keyframes stamp-slap {
  0% {
    opacity: 0;
    transform: translate3d(18px, -24px, 0) rotate(-13deg) scale(1.34);
    filter: drop-shadow(0 26px 18px rgba(45, 20, 14, 0.24)) blur(0.4px);
  }
  45% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(-5deg) scale(0.93);
    filter: drop-shadow(0 2px 2px rgba(45, 20, 14, 0.20));
  }
  62% {
    transform: translate3d(0, -2px, 0) rotate(-5.5deg) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(-5deg) scale(1);
    filter: drop-shadow(0 6px 8px rgba(45, 20, 14, 0.22));
  }
}

.character-select-footer button {
  min-height: 30px;
  padding: 5px 11px;
  border-color: rgba(75, 47, 31, 0.52);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(228, 207, 170, 0.14), rgba(75, 47, 31, 0.08)),
    #8f6840;
  box-shadow: 0 3px 7px rgba(45, 36, 26, 0.14);
  white-space: nowrap;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.character-select-footer button:hover:not(:disabled) {
  transform: translateY(-1px);
  background:
    linear-gradient(180deg, rgba(228, 207, 170, 0.18), rgba(75, 47, 31, 0.10)),
    #9a7147;
}

.character-select-footer button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 5px rgba(45, 36, 26, 0.14);
}

.character-select-card.selected {
  border-color: rgba(143, 47, 30, 0.72);
  box-shadow:
    inset 0 0 0 2px rgba(228, 207, 170, 0.20),
    inset 0 0 34px rgba(75, 47, 31, 0.14),
    0 18px 34px rgba(62, 43, 24, 0.22),
    0 0 0 3px rgba(208, 163, 92, 0.28),
    0 0 0 6px rgba(143, 47, 30, 0.13);
}

.character-select-card.selected::before {
  border-color: rgba(192, 142, 58, 0.68);
  box-shadow:
    inset 0 0 0 3px rgba(232, 220, 199, 0.30),
    inset 0 0 22px rgba(96, 108, 56, 0.16),
    inset 0 -16px 28px rgba(98, 70, 39, 0.08);
}

.character-select-card.is-taken {
  opacity: 0.72;
  filter: saturate(0.72) brightness(0.88);
}

.character-select-card.is-taken .character-portrait img {
  filter: saturate(0.78);
}

@media (hover: hover) and (pointer: fine) {
  .character-select-card:hover {
    transform: translateY(-2px) rotate(-0.25deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .character-select-card,
  .character-status-stamp.status-selected,
  .character-card-stamp,
  .character-select-footer button,
  .lobby-app .top button,
  .lobby-screen button,
  .lobby-player-row,
  .toast {
    animation: none !important;
    transition-duration: 0.001ms !important;
  }
}

.selected-character {
  border-color: var(--red);
}

.ready-badge,
.wait-badge {
  display: inline-grid;
  place-items: center;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #fff8ea;
  font-size: 12px;
}

.ready-badge {
  background: var(--green);
}

.wait-badge {
  background: var(--gold);
}

.panel {
  border: 1px solid rgba(69, 48, 31, 0.24);
  border-radius: 8px;
  background: rgba(255, 248, 234, 0.94);
  box-shadow: 0 18px 38px rgba(62, 42, 23, 0.12);
}

.panel.pad {
  padding: 14px;
}

.view-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px;
}

.view-controls button {
  min-height: 34px;
  font-size: 12px;
}

.collapsible {
  padding: 0;
  overflow: hidden;
}

.collapse-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 58px;
  padding: 12px;
  border: 0;
  border-radius: 0;
  background: #fffdf7;
  text-align: left;
}

.collapse-head span {
  display: grid;
  gap: 4px;
}

.collapse-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.collapse-head i {
  color: var(--blue);
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

.collapse-body {
  padding: 0 12px 12px;
  border-top: 1px solid #ead8b7;
}

.accent-economy .collapse-head,
.accent-contact .secondary-tabs button.active {
  background: #fff3cf;
}

.party-state {
  border-color: rgba(49, 37, 29, 0.42);
}

.active-goal {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(63, 118, 82, 0.1), 0 18px 38px rgba(62, 42, 23, 0.12);
}

.primary-mission-actions {
  margin-top: 10px;
}

.check-button {
  display: grid;
  gap: 3px;
  min-height: 66px;
  padding: 9px;
  text-align: left;
}

.check-button span,
.check-button small {
  color: var(--muted);
  font-weight: 800;
}

.check-button small {
  font-size: 11px;
}

.check-button .action-missing {
  color: var(--red);
  font-weight: 900;
}

.danger-note {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--red);
  border-radius: 8px;
  background: #ffe5df;
  color: var(--red);
  font-size: 12px;
  font-weight: 900;
}

.danger-card,
.delete-room-zone,
.delete-warning {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--red);
  border-radius: 8px;
  background: #ffe5df;
}

.danger-card p,
.delete-warning p {
  color: #6b2a24;
  font-size: 13px;
  line-height: 1.35;
}

.danger-pill {
  display: inline-grid;
  place-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--red);
  color: #fff8ea;
  font-size: 11px;
  font-weight: 950;
}

.item-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.item-chip-row button {
  min-height: 32px;
  font-size: 12px;
}

.compact-shop {
  margin-bottom: 0;
}

.action-panel.is-current {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(63, 118, 82, 0.12), 0 18px 38px rgba(62, 42, 23, 0.12);
}

.action-panel.is-muted {
  opacity: 0.86;
}

.phase-note {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid #dec89e;
  border-radius: 8px;
  background: #fffdf7;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.join {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items: end;
}

label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

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

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

.compact-metrics .metric {
  min-height: 62px;
}

.compact-metrics .metric b {
  font-size: 20px;
}

.metric {
  min-height: 74px;
  padding: 10px;
  border: 1px solid #dec89e;
  border-radius: 8px;
  background: #fffdf7;
}

.metric.active-turn {
  border-color: var(--green);
  box-shadow: inset 0 0 0 2px rgba(63, 118, 82, 0.12);
}

.metric.danger-mid {
  border-color: var(--gold);
  background: #fff4d8;
}

.metric.danger-high {
  border-color: var(--red);
  background: #ffe5df;
}

.metric b {
  display: block;
  font-size: 24px;
  line-height: 1.08;
}

.metric span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.phase,
.goal-count {
  display: inline-grid;
  place-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--dark);
  color: #fff8ea;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.phase-day {
  background: var(--green);
}

.phase-event,
.phase-finale {
  background: var(--red);
}

.phase-lobby,
.phase-night {
  background: var(--blue);
}

.next-step {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #dec89e;
  border-radius: 8px;
  background: #fffdf7;
}

.next-step.inline {
  margin: 0 0 10px;
}

.next-step p {
  margin-top: 4px;
  color: var(--muted);
}

.goal-count {
  background: var(--gold);
}

.map-panel {
  padding-bottom: 14px;
}

.map {
  position: relative;
  min-height: 680px;
  border: 1px solid #dec89e;
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 14%, rgba(120, 90, 55, 0.22), transparent 18%),
    radial-gradient(circle at 22% 77%, rgba(49, 99, 86, 0.22), transparent 22%),
    #e6c98f;
}

.roads {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.road {
  stroke: rgba(75, 54, 34, 0.45);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 9 8;
}

.loc {
  position: absolute;
  width: 138px;
  min-height: 78px;
  transform: translate(-50%, -50%);
  padding: 9px;
  border: 2px solid #5c3f29;
  border-radius: 8px;
  background: #fff6df;
  box-shadow: 0 8px 20px rgba(51, 35, 22, 0.18);
}

.loc.current {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(163, 58, 47, 0.16), 0 8px 20px rgba(51, 35, 22, 0.18);
}

.loc.reachable {
  border-color: var(--green);
}

.loc.objective {
  border-color: var(--green);
  background: #eff8e8;
  box-shadow: 0 0 0 4px rgba(63, 118, 82, 0.18), 0 8px 20px rgba(51, 35, 22, 0.18);
}

.loc.near-danger {
  box-shadow: 0 0 0 4px rgba(180, 125, 36, 0.2), 0 8px 20px rgba(51, 35, 22, 0.18);
}

.loc button {
  width: 100%;
  min-height: 28px;
  margin-top: 7px;
  font-size: 12px;
}

.region {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.tokens,
.pieces,
.enemies {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.piece,
.enemy,
.token,
.marker {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  color: white;
  font-size: 11px;
  font-weight: 900;
}

.piece {
  background: var(--blue);
}

.enemy {
  background: var(--red);
}

.enemy-map-chip {
  width: auto;
  height: auto;
  min-height: 24px;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 8px;
  text-align: left;
}

.enemy-card.danger-here {
  border-color: var(--red);
  background: #ffe5df;
}

.token {
  background: var(--gold);
}

.marker {
  width: auto;
  background: var(--green);
}

.player-chip {
  display: inline-grid;
  grid-template-columns: auto;
  gap: 1px;
  align-items: center;
  min-width: 34px;
  min-height: 28px;
  padding: 3px 5px;
  border: 2px solid rgba(49, 37, 29, 0.42);
  border-radius: 8px;
  color: #fffdf7;
  line-height: 1;
  box-shadow: 0 4px 9px rgba(51, 35, 22, 0.18);
}

.player-chip b {
  font-size: 11px;
}

.player-chip small {
  font-size: 8px;
  font-weight: 900;
}

.player-chip.is-me {
  border-color: #fffdf7;
  box-shadow: 0 0 0 2px var(--blue), 0 4px 9px rgba(51, 35, 22, 0.18);
}

.player-chip.is-active {
  outline: 2px solid var(--green);
}

.player-chip.is-offline {
  opacity: 0.55;
  filter: grayscale(0.5);
}

.map-legend,
.map-roster {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid #dec89e;
  border-radius: 8px;
  background: #fffdf7;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.map-legend span,
.map-roster span {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.legend-token {
  min-width: 24px;
  min-height: 22px;
  border-radius: 6px;
  font-size: 10px;
}

.cards {
  display: grid;
  gap: 8px;
}

.card {
  padding: 12px;
  border: 1px solid #dec89e;
  border-radius: 8px;
  background: #fffdf7;
}

.card.selected {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(163, 58, 47, 0.12);
}

.card.active-player {
  border-color: var(--green);
}

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

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

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: 8px;
  font-size: 12px;
}

.inventory-note {
  margin: 8px 0 0;
  padding: 7px 9px;
  border: 1px solid rgba(111, 74, 42, 0.28);
  border-radius: 8px;
  background: #fff3cf;
  color: #5b3a24;
  font-size: 12px;
}

.stat-bonus {
  color: #247645;
  font-style: normal;
  font-weight: 800;
}

.bar {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #ead8b7;
}

.bar i {
  display: block;
  height: 100%;
  background: var(--green);
}

.bar.red i {
  background: var(--red);
}

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.inventory,
.shop {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.item,
.shop-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid #ead8b7;
  border-radius: 8px;
  background: #fffaf0;
}

.item .action-hint,
.shop-item .action-hint {
  grid-column: 1 / -1;
}

.item-actions {
  display: grid;
  grid-template-columns: auto minmax(88px, 1fr) auto auto;
  gap: 5px;
  align-items: center;
}

.item-actions button,
.item-actions select,
.shop-item button {
  min-height: 32px;
  font-size: 12px;
}

.section-title {
  margin-top: 12px;
}

.section-split {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #ead8b7;
}

.hero-inventory,
.hero-shop {
  min-width: 0;
}

.inventory-count,
.item-kind {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid rgba(111, 74, 42, 0.3);
  border-radius: 999px;
  background: rgba(255, 248, 234, 0.86);
  color: #5b3a24;
  font-size: 11px;
  font-weight: 800;
}

.compact-inventory-list {
  margin-bottom: 0;
}

.compact-inventory-list .item,
.shop-offers .shop-item {
  align-items: start;
}

.compact-inventory-list .item-actions {
  align-self: center;
}

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

.inventory-more {
  width: 100%;
}

.shop-modal {
  width: min(760px, 100%);
}

.shop-status {
  padding: 0 14px 10px;
}

.shop-modal .shop {
  padding: 0 14px 14px;
}

.missions {
  display: grid;
  gap: 8px;
}

.mission {
  display: grid;
  gap: 8px;
}

.mission.done {
  opacity: 0.6;
}

.mission.current-mission {
  border-color: var(--green);
  background: #f5fff0;
}

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

.method {
  display: grid;
  gap: 5px;
  padding: 9px;
  border: 1px dashed #d9bf8f;
  border-radius: 8px;
  background: #fffaf0;
}

.method + .method {
  margin-top: 7px;
}

.economy-actions {
  grid-template-columns: 1fr 1fr;
}

.event {
  border: 2px solid var(--dark);
  background: #fff3cf;
}

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

.app-top .secondary-panel {
  width: 100%;
}

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

.secondary-tabs button {
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 8px;
  text-align: left;
}

.secondary-tabs button.active {
  border-color: var(--red);
  background: #fff3cf;
}

.secondary-tabs span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.secondary-body > .embedded-panel {
  padding: 12px;
  border: 1px solid #dec89e;
  border-radius: 8px;
  background: #fffdf7;
}

.secondary-body > .event {
  border: 2px solid var(--dark);
  background: #fff3cf;
}

.log {
  display: grid;
  gap: 7px;
  max-height: 280px;
  overflow: auto;
  font-size: 13px;
}

.log div {
  padding-bottom: 7px;
  border-bottom: 1px solid #ead8b7;
}

.table-chat {
  display: grid;
  gap: 10px;
  min-width: 0;
  align-self: start;
}

.chat-feed {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 330px;
  max-height: min(52vh, 560px);
  overflow: auto;
  padding: 8px;
  border: 1px solid #dec89e;
  border-radius: 8px;
  background: rgba(255, 253, 247, 0.62);
}

.table-side .chat-feed {
  min-height: 220px;
  max-height: min(34vh, 360px);
}

.feed-entry {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid #ead8b7;
  border-radius: 8px;
  background: #fffdf7;
}

.feed-entry > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.feed-entry b {
  font-size: 12px;
}

.feed-entry span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.feed-entry p {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.3;
}

.feed-entry.system {
  border-color: #dac49a;
  background: #f4ead5;
}

.feed-entry.system b {
  color: #7b4323;
}

.feed-entry.chat {
  border-color: rgba(46, 99, 122, 0.38);
}

.feed-entry.chat b {
  color: var(--blue);
}

.chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
  min-width: 0;
}

.chat-form input {
  min-width: 0;
}

.chat-form button {
  min-width: 64px;
}

.last-result,
.result-card {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #dec89e;
  border-radius: 8px;
  background: #fffdf7;
}

.last-result.success,
.result-card.success {
  border-color: var(--green);
  background: #f5fff0;
}

.last-result.failure,
.result-card.failure {
  border-color: var(--red);
  background: #ffe5df;
}

.last-result span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.roll-modal {
  width: min(620px, 100%);
}

.roll-preview {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.formula {
  padding: 10px;
  border: 1px solid #dec89e;
  border-radius: 8px;
  background: #fffdf7;
}

.roll-outcomes {
  display: grid;
  gap: 6px;
}

.roll-outcomes p {
  padding: 8px;
  border: 1px solid #ead8b7;
  border-radius: 8px;
  background: #fffdf7;
  color: var(--muted);
  font-size: 13px;
}

.roll-dice {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 3vw, 26px);
  padding: 18px 14px;
}

.dice-asset {
  display: block;
  flex: 0 0 auto;
  width: clamp(72px, 9vw, 118px);
  height: clamp(72px, 9vw, 118px);
  min-width: 72px;
  min-height: 72px;
  object-fit: contain;
  image-rendering: auto;
  user-select: none;
  pointer-events: none;
  filter:
    drop-shadow(0 12px 16px rgba(29, 16, 8, 0.38))
    drop-shadow(0 3px 2px rgba(255, 231, 176, 0.18));
  transform-origin: 50% 58%;
}

.dice-asset.is-settled {
  animation: dicePop 360ms cubic-bezier(0.2, 0.9, 0.25, 1.2);
}

.dice-asset.is-rolling {
  animation: diceShake 0.18s linear infinite alternate;
}

.roll-breakdown {
  display: grid;
  gap: 6px;
  padding: 0 14px 14px;
}

.roll-breakdown p {
  padding: 8px;
  border: 1px solid #ead8b7;
  border-radius: 8px;
  background: #fffdf7;
}

.bonus-details {
  display: grid;
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid rgba(96, 108, 56, 0.28);
  border-radius: 8px;
  background: rgba(255, 253, 247, 0.72);
}

.bonus-details ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
}

.bonus-details li {
  color: var(--muted);
}

.log-modal {
  width: min(760px, 100%);
}

.delete-modal {
  width: min(560px, 100%);
}

.full-log {
  max-height: min(62vh, 620px);
}

@keyframes diceShake {
  from { transform: rotate(-5deg) translateY(1px) scale(0.98); }
  to { transform: rotate(5deg) translateY(-2px) scale(1.04); }
}

@keyframes dicePop {
  0% {
    opacity: 0;
    transform: scale(0.72) rotate(-8deg);
  }
  65% {
    opacity: 1;
    transform: scale(1.08) rotate(3deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.final {
  padding: 24px;
  border: 2px solid var(--dark);
  border-radius: 8px;
  background: #fff8ea;
  text-align: center;
}

.final-app {
  display: grid;
  gap: 18px;
  align-content: start;
  width: min(1480px, 100%);
}

.final-app .top {
  min-height: 0;
  padding: clamp(18px, 2vw, 28px);
  align-items: center;
}

.final-app .top h1 {
  font-size: clamp(34px, 4.2vw, 64px);
  line-height: 0.98;
}

.final-app .top .muted {
  color: rgba(232, 220, 199, 0.78);
}

.final {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid rgba(209, 164, 92, 0.36);
  border-radius: 22px;
  background:
    var(--grain),
    radial-gradient(circle at 50% 0%, rgba(209, 164, 92, 0.18), transparent 34%),
    linear-gradient(145deg, rgba(54, 31, 21, 0.96), rgba(17, 11, 8, 0.98));
  color: #e8dcc7;
  text-align: left;
  box-shadow:
    inset 0 0 0 1px rgba(228, 207, 170, 0.07),
    0 22px 48px rgba(0, 0, 0, 0.28);
}

.final-result {
  display: grid;
  gap: 8px;
  min-height: 220px;
  align-content: center;
  padding: clamp(18px, 3vw, 34px);
  border: 1px solid rgba(209, 164, 92, 0.28);
  border-radius: 20px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(212, 184, 149, 0.94), rgba(176, 139, 110, 0.66));
  color: var(--western-paper-text);
  text-align: center;
}

.final.is-defeat .final-result {
  background:
    var(--grain),
    linear-gradient(145deg, rgba(212, 184, 149, 0.92), rgba(143, 47, 30, 0.22)),
    linear-gradient(145deg, rgba(176, 139, 110, 0.72), rgba(96, 108, 56, 0.18));
}

.final.is-victory .final-result {
  background:
    var(--grain),
    linear-gradient(145deg, rgba(212, 184, 149, 0.94), rgba(139, 157, 131, 0.34));
}

.final-kicker {
  justify-self: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(75, 47, 31, 0.18);
  border-radius: 999px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(209, 164, 92, 0.76), rgba(176, 139, 110, 0.50));
  color: #211712;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.final h2 {
  margin: 0;
  color: #2a1b12;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1;
  text-shadow: none;
}

.final-result p {
  max-width: 760px;
  margin: 0 auto;
  color: rgba(47, 42, 32, 0.76);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.4;
}

.final-result .final-logline {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(75, 47, 31, 0.14);
  color: rgba(47, 42, 32, 0.66);
  font-size: 13px;
}

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

.final-stats span {
  display: grid;
  gap: 4px;
  min-height: 66px;
  align-content: center;
  padding: 10px 12px;
  border: 1px solid rgba(209, 164, 92, 0.24);
  border-radius: 16px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(212, 184, 149, 0.82), rgba(176, 139, 110, 0.54));
  color: rgba(47, 42, 32, 0.66);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.final-stats b {
  color: #211712;
  font-size: 20px;
}

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

.final-actions button {
  min-height: 52px;
  border-radius: 15px;
  white-space: normal;
}

@media (max-width: 900px) {
  .final-stats,
  .final-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .final-app {
    gap: 10px;
  }

  .final-app .top {
    padding: 14px;
  }

  .final-result {
    min-height: 0;
    padding: 18px 14px;
  }

  .final-stats,
  .final-actions {
    grid-template-columns: 1fr;
  }
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(31, 23, 18, 0.5);
}

.modal {
  width: min(940px, 100%);
  max-height: min(86vh, 860px);
  overflow: auto;
  border: 2px solid var(--dark);
  border-radius: 8px;
  background: #fff8ea;
  box-shadow: 0 28px 80px rgba(27, 19, 13, 0.35);
}

.modal-head,
.modal-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid #ead8b7;
}

.modal-actions {
  border-top: 1px solid #ead8b7;
  border-bottom: 0;
  justify-content: end;
}

.help-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid #ead8b7;
  overflow-x: auto;
}

.help-tabs button {
  min-height: 34px;
  white-space: nowrap;
}

.help-tabs button.active {
  border-color: var(--red);
  background: var(--red);
  color: #fff8ea;
}

.help-body {
  padding: 14px;
}

.help-stack,
.help-grid,
.glossary {
  display: grid;
  gap: 10px;
}

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

.help-section {
  padding: 12px;
  border: 1px solid #dec89e;
  border-radius: 8px;
  background: #fffdf7;
}

.help-section summary {
  cursor: pointer;
  font-weight: 900;
}

.help-section p,
.help-section li {
  margin-top: 7px;
  color: var(--muted);
}

.help-section ol,
.help-section ul {
  margin: 8px 0 0;
  padding-left: 22px;
}

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

.glossary article {
  padding: 10px;
  border: 1px solid #ead8b7;
  border-radius: 8px;
  background: #fffdf7;
}

.glossary p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
}

.tutorial-modal {
  width: min(620px, 100%);
}

.tutorial-card {
  display: grid;
  gap: 12px;
  margin: 14px;
  padding: 18px;
  border: 1px solid #dec89e;
  border-radius: 8px;
  background: #fffdf7;
}

.tutorial-card p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
}

.check-row {
  display: flex;
  grid-template-columns: none;
  gap: 8px;
  align-items: center;
  padding: 0 14px 14px;
  color: var(--ink);
}

.check-row input {
  width: auto;
  min-height: auto;
}

/* Asset pack v0 visual layer */
body {
  color: var(--ink);
  background:
    radial-gradient(circle at 16% 8%, rgba(180, 125, 36, 0.22), transparent 24%),
    radial-gradient(circle at 88% 86%, rgba(63, 118, 82, 0.14), transparent 28%),
    linear-gradient(135deg, #7d5633 0%, #d4b176 42%, #8f9d76 100%);
  background-size: cover;
}

body::before {
  display: none;
}

button {
  border: 1px solid #6f4a2a;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 248, 234, 0.18), rgba(62, 42, 23, 0.12)),
    #7a4a24;
  color: #fff8ea;
  box-shadow: 0 4px 10px rgba(36, 23, 15, 0.16);
  text-shadow: none;
}

button:hover:not(:disabled) {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 7px 16px rgba(36, 23, 15, 0.18);
}

button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(36, 23, 15, 0.15);
}

button:disabled {
  background:
    linear-gradient(180deg, rgba(255, 248, 234, 0.64), rgba(180, 164, 136, 0.5)),
    #d7ccb7;
  color: #55483b;
  box-shadow: none;
  filter: none;
  opacity: 1;
}

button.primary,
.help-tabs button.active {
  border-color: #612a22;
  background:
    linear-gradient(180deg, rgba(255, 248, 234, 0.14), rgba(62, 42, 23, 0.1)),
    var(--red);
}

button.danger-button,
.danger-button {
  border-color: #612a22;
  background:
    linear-gradient(180deg, rgba(255, 248, 234, 0.12), rgba(62, 42, 23, 0.18)),
    #7f241e;
}

input,
select {
  border: 1px solid #b99a6b;
  border-radius: 7px;
  background: #fff8ea;
  box-shadow: inset 0 1px 3px rgba(61, 38, 24, 0.08);
}

.panel,
.home-hero,
.top,
.party-hud {
  border: 1px solid rgba(61, 38, 24, 0.32);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 248, 234, 0.9), rgba(243, 217, 164, 0.76)),
    var(--panel);
  box-shadow: 0 18px 38px rgba(62, 42, 23, 0.16);
}

.card,
.metric,
.hud-badge,
.shared-roll,
.mini-player,
.room-chip,
.invite-box,
.next-step,
.phase-note,
.formula,
.roll-outcomes p,
.roll-breakdown p,
.help-section,
.glossary article,
.tutorial-card,
.secondary-body > .embedded-panel,
.item,
.shop-item,
.method {
  border: 1px solid rgba(111, 74, 42, 0.46);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 253, 247, 0.88), rgba(243, 217, 164, 0.7)),
    #fff8ea;
  box-shadow: 0 8px 20px rgba(36, 23, 15, 0.1);
}

.collapse-head {
  border-bottom: 1px solid rgba(61, 38, 24, 0.24);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255, 248, 234, 0.92), rgba(243, 217, 164, 0.72)),
    #f3d9a4;
  color: var(--ink);
}

.collapse-head h2,
.collapse-head small,
.collapse-head i {
  color: var(--ink);
  text-shadow: none;
}

.collapse-head small {
  color: var(--muted);
}

.secondary-tabs button,
.secondary-tabs button b,
.secondary-tabs span,
.secondary-tabs button.active,
.secondary-tabs button.active span {
  text-shadow: none;
}

.secondary-tabs button:not(.active) b {
  color: #fff8ea;
}

.secondary-tabs button:not(.active) span {
  color: #f2dfc2;
}

.secondary-tabs button.active {
  background:
    linear-gradient(135deg, rgba(255, 253, 247, 0.96), rgba(255, 232, 183, 0.86)),
    #fff3cf;
}

.secondary-tabs button.active b {
  color: var(--red);
}

.secondary-tabs button.active span {
  color: #5f4d3f;
}

.check-button b {
  color: #fff8ea;
}

.check-button span,
.check-button small {
  color: #f0dcc1;
}

.check-button:disabled b,
.check-button:disabled span,
.check-button:disabled small {
  color: #4f4438;
}

.check-button:disabled .action-missing {
  color: #9e2f27;
}

.active-goal,
.action-panel.is-current,
.mission.current-mission {
  border-color: var(--green);
  background:
    linear-gradient(135deg, rgba(255, 248, 234, 0.9), rgba(63, 118, 82, 0.16)),
    var(--panel);
  box-shadow: 0 0 0 3px rgba(63, 118, 82, 0.14), 0 18px 38px rgba(62, 42, 23, 0.14);
}

.danger-card,
.danger-note,
.delete-room-zone,
.delete-warning,
.enemy-card.danger-here,
.metric.danger-high,
.night-attack-card {
  border: 1px solid rgba(127, 36, 30, 0.7);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 248, 234, 0.84), rgba(163, 58, 47, 0.18)),
    #ffe5df;
  color: #5a1f18;
  box-shadow: 0 8px 22px rgba(83, 27, 21, 0.16);
}

.ready-badge,
.wait-badge,
.phase,
.goal-count,
.danger-pill,
.token,
.marker {
  border: 1px solid rgba(61, 38, 24, 0.28);
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(36, 23, 15, 0.13);
  text-transform: none;
}

.map {
  border: 2px solid #4e331f;
  border-radius: 8px;
  background:
    linear-gradient(rgba(255, 248, 234, 0.12), rgba(78, 51, 31, 0.1)),
    var(--asset-map-bg) center / cover no-repeat,
    #d8a95f;
  image-rendering: auto;
  box-shadow: inset 0 0 0 1px rgba(255, 243, 207, 0.34), 0 18px 40px rgba(36, 23, 15, 0.18);
}

.road {
  stroke: rgba(69, 48, 31, 0.38);
  stroke-width: 4;
  stroke-dasharray: 9 8;
}

.loc {
  border: 1px solid rgba(61, 38, 24, 0.58);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 248, 234, 0.92), rgba(243, 217, 164, 0.78)),
    #fff6df;
  box-shadow: 0 10px 22px rgba(36, 23, 15, 0.18);
}

.loc h3 {
  border-bottom: 1px solid rgba(61, 38, 24, 0.18);
}

.loc.current {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(163, 58, 47, 0.18), 0 10px 22px rgba(36, 23, 15, 0.18);
}

.loc.reachable {
  border-color: var(--green);
}

.loc.objective {
  background:
    linear-gradient(180deg, rgba(255, 248, 234, 0.92), rgba(63, 118, 82, 0.16)),
    #eff8e8;
}

.loc.near-danger:not(.current) {
  box-shadow: 0 0 0 3px rgba(180, 125, 36, 0.2), 0 10px 22px rgba(36, 23, 15, 0.18);
}

.piece,
.enemy,
.token,
.marker,
.player-token,
.legend-token,
.player-chip {
  border-radius: 999px;
  image-rendering: auto;
}

.marker {
  min-height: 24px;
  padding-left: 8px;
  background: var(--green);
}

.player-token,
.legend-token,
.player-chip {
  border: 1px solid rgba(49, 37, 29, 0.42);
  box-shadow: 0 4px 10px rgba(36, 23, 15, 0.15);
}

.player-chip {
  min-width: 36px;
  min-height: 30px;
  padding: 4px 6px;
}

.player-chip::before {
  content: none;
}

.player-chip.is-me {
  border-color: #fffdf7;
  box-shadow: 0 0 0 2px var(--blue), 0 4px 10px rgba(36, 23, 15, 0.15);
}

.player-chip.is-active {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.enemy,
.enemy-map-chip {
  border: 1px solid #621c17;
  background: var(--red);
  color: #fff8ea;
}

.enemy-map-chip {
  min-height: 26px;
  padding: 4px 7px;
  border-radius: 8px;
  text-shadow: none;
}

.map-legend,
.map-roster {
  border: 1px solid rgba(111, 74, 42, 0.38);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 253, 247, 0.9), rgba(243, 217, 164, 0.72)),
    #fff8ea;
  box-shadow: 0 8px 20px rgba(36, 23, 15, 0.08);
}

.modal {
  border: 1px solid rgba(61, 38, 24, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 248, 234, 0.94), rgba(243, 217, 164, 0.82)),
    var(--panel);
  box-shadow: 0 28px 80px rgba(27, 19, 13, 0.35);
}

.roll-modal {
  image-rendering: auto;
}

.roll-preview {
  background:
    linear-gradient(rgba(255, 248, 234, 0.82), rgba(243, 217, 164, 0.52)),
    #f3d9a4;
}

.result-card {
  border-width: 1px;
  border-radius: 8px;
}

.result-card h3 {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  font-size: 18px;
  transform: none;
  text-transform: none;
}

.result-card h3::before {
  content: none;
}

@media (max-width: 1050px) {
  .coop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-layout,
  .game-table {
    grid-template-columns: 1fr;
  }

  .lobby-grid {
    grid-template-columns: 1fr;
  }

  .map {
    min-height: 680px;
  }
}

@media (max-width: 720px) {
  .app {
    padding: 8px;
  }

  .join,
  .metrics,
  .actions,
  .top-actions,
  .home-grid,
  .home-hero,
  .lobby-head,
  .character-grid,
  .view-controls,
  .help-grid,
  .glossary {
    grid-template-columns: 1fr;
  }

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

  .coop-grid {
    grid-template-columns: 1fr;
  }

  .hud-badge {
    min-height: 36px;
  }

  .map {
    min-height: 560px;
  }

  .home-hero,
  .lobby-head,
  .top {
    display: grid;
  }

  .invite-box {
    min-width: 0;
  }

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

  .secondary-tabs button {
    min-height: 46px;
  }

  .item,
  .shop-item,
  .shop-offer {
    grid-template-columns: 1fr;
  }

  .item-actions {
    grid-template-columns: 1fr 1fr;
  }

  .panel-title {
    display: grid;
  }

  .loc {
    width: 122px;
  }
}

/* Organic redesign: ranch ledger layout */
:root {
  --ink: #2f2a20;
  --muted: #6d604d;
  --paper: #E8DCC7;
  --panel: #D4B895;
  --line: #8f765c;
  --red: #C66B3D;
  --green: #606C38;
  --blue: #8B9D83;
  --gold: #C08E3A;
  --dark: #3b3327;
  --clay: #B08B6E;
  --sage: #8B9D83;
  --moss: #606C38;
  --sand: #E8DCC7;
  --oat: #D4B895;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 .025'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

body {
  color: var(--ink);
  font-family: "Fraunces", "Big Caslon", "Iowan Old Style", "Georgia", serif;
  background:
    var(--grain),
    radial-gradient(circle at 12% 10%, rgba(192, 142, 58, 0.26), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(139, 157, 131, 0.34), transparent 26%),
    radial-gradient(circle at 70% 92%, rgba(176, 139, 110, 0.28), transparent 30%),
    linear-gradient(135deg, #8B9D83 0%, #E8DCC7 46%, #B08B6E 100%);
  letter-spacing: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(96, 108, 56, 0.10) 1px, transparent 1px),
    linear-gradient(rgba(96, 108, 56, 0.08) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,.08));
}

button,
input,
select {
  font-family: "Fraunces", "Big Caslon", "Iowan Old Style", "Georgia", serif;
}

button {
  min-height: 42px;
  border: 1px solid rgba(59, 51, 39, 0.42);
  border-radius: 18px;
  background:
    var(--grain),
    linear-gradient(180deg, rgba(198, 107, 61, 0.94), rgba(96, 108, 56, 0.92));
  color: #E8DCC7;
  box-shadow: 0 10px 22px rgba(47, 42, 32, 0.18);
  text-shadow: none;
  transition: transform 320ms ease, box-shadow 320ms ease, filter 320ms ease;
}

button:hover:not(:disabled) {
  filter: saturate(1.05) brightness(1.02);
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(47, 42, 32, 0.20);
}

button.primary,
button.danger-button,
.danger-button,
.help-tabs button.active {
  background:
    var(--grain),
    linear-gradient(180deg, #C66B3D, #606C38);
  color: #E8DCC7;
}

button:disabled {
  border-color: rgba(59, 51, 39, 0.24);
  background:
    var(--grain),
    linear-gradient(180deg, rgba(212, 184, 149, 0.82), rgba(176, 139, 110, 0.76));
  color: rgba(47, 42, 32, 0.64);
  opacity: 1;
}

button.is-pending {
  cursor: progress;
  color: #2f2a20;
  background:
    var(--grain),
    linear-gradient(180deg, rgba(232, 220, 199, 0.96), rgba(192, 142, 58, 0.72));
  box-shadow: inset 0 0 0 2px rgba(96, 108, 56, 0.18), 0 8px 18px rgba(47, 42, 32, 0.16);
}

button.is-pending::after {
  content: "";
  display: inline-block;
  width: 0.72em;
  height: 0.72em;
  margin-left: 0.5em;
  border: 2px solid rgba(47, 42, 32, 0.28);
  border-top-color: rgba(47, 42, 32, 0.88);
  border-radius: 50%;
  vertical-align: -0.08em;
  animation: pending-spin 800ms linear infinite;
}

.ui-feedback {
  width: fit-content;
  max-width: min(560px, 100%);
  margin: 6px 0 0;
  padding: 5px 9px;
  border: 1px solid rgba(96, 108, 56, 0.28);
  border-radius: 999px;
  background: rgba(232, 220, 199, 0.82);
  color: #2f2a20;
  font-weight: 800;
  font-size: 0.9rem;
}

.item.is-highlighted,
.shop-item.is-highlighted,
.moonshine-batch-row.is-highlighted {
  animation: soft-highlight 1600ms ease-out both;
}

@keyframes pending-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes soft-highlight {
  0% {
    box-shadow: inset 0 0 0 2px rgba(192, 142, 58, 0.65), 0 0 0 5px rgba(192, 142, 58, 0.18);
    filter: brightness(1.04);
  }
  100% {
    box-shadow: none;
    filter: none;
  }
}

input,
select {
  border: 1px solid rgba(96, 108, 56, 0.34);
  border-radius: 16px;
  background:
    var(--grain),
    rgba(232, 220, 199, 0.92);
  color: var(--ink);
}

.app {
  gap: 18px;
  width: min(1720px, 100%);
  margin: 0 auto;
  padding: clamp(10px, 2vw, 22px);
}

.panel,
.home-hero,
.top,
.party-hud,
.card,
.metric,
.hud-badge,
.shared-roll,
.mini-player,
.room-chip,
.invite-box,
.next-step,
.phase-note,
.formula,
.roll-outcomes p,
.roll-breakdown p,
.help-section,
.glossary article,
.tutorial-card,
.secondary-body > .embedded-panel,
.item,
.shop-item,
.method,
.modal,
.collapse-head,
.map-legend,
.map-roster,
.feed-entry,
.chat-feed,
.last-result,
.result-card {
  border: 1px solid rgba(59, 51, 39, 0.22);
  border-radius: 24px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(232, 220, 199, 0.92), rgba(212, 184, 149, 0.78));
  box-shadow: 0 18px 45px rgba(47, 42, 32, 0.13);
}

.panel.pad {
  padding: clamp(14px, 1.5vw, 22px);
}

.panel.pad.lobby-character-section {
  border-color: rgba(209, 164, 92, 0.20);
  background:
    radial-gradient(circle at 16% 8%, rgba(143, 47, 30, 0.16), transparent 30%),
    radial-gradient(circle at 84% 92%, rgba(11, 10, 8, 0.52), transparent 44%),
    radial-gradient(circle at 50% 0%, rgba(209, 164, 92, 0.10), transparent 36%),
    linear-gradient(135deg, var(--western-leather-light), var(--western-board) 52%, var(--western-bg));
  box-shadow:
    inset 0 0 0 1px rgba(209, 164, 92, 0.14),
    inset 0 0 70px rgba(0, 0, 0, 0.28),
    0 18px 38px rgba(0, 0, 0, 0.24);
}

.lobby-app {
  position: relative;
  isolation: isolate;
  width: min(1480px, 100%);
  min-height: 100vh;
  color: #e8dcc7;
  background:
    radial-gradient(circle at 18% 12%, rgba(209, 164, 92, 0.16), transparent 28%),
    radial-gradient(circle at 82% 24%, rgba(143, 47, 30, 0.18), transparent 31%),
    radial-gradient(circle at 56% 84%, rgba(79, 90, 52, 0.18), transparent 34%),
    linear-gradient(rgba(220, 172, 93, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 172, 93, 0.028) 1px, transparent 1px),
    linear-gradient(135deg, #090806 0%, #17100b 42%, #24130d 100%);
  background-size: cover, cover, cover, 34px 34px, 34px 34px, cover;
  box-shadow: 0 0 0 100vmax #090806;
  clip-path: inset(0 -100vmax);
}

.lobby-app::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 12%, rgba(209, 164, 92, 0.16), transparent 28%),
    radial-gradient(circle at 82% 24%, rgba(143, 47, 30, 0.18), transparent 31%),
    radial-gradient(circle at 56% 84%, rgba(79, 90, 52, 0.18), transparent 34%),
    linear-gradient(rgba(220, 172, 93, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 172, 93, 0.028) 1px, transparent 1px),
    linear-gradient(135deg, #090806 0%, #17100b 42%, #24130d 100%);
  background-size: cover, cover, cover, 34px 34px, 34px 34px, cover;
}

.lobby-app::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.46), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.50)),
    radial-gradient(circle at 50% 45%, transparent 0 36%, rgba(0, 0, 0, 0.50) 100%);
}

.lobby-app .top {
  border-color: rgba(209, 164, 92, 0.24);
  border-radius: 18px;
  background:
    var(--grain),
    radial-gradient(circle at 12% 0%, rgba(209, 164, 92, 0.16), transparent 28%),
    linear-gradient(135deg, rgba(75, 43, 27, 0.96), rgba(23, 16, 11, 0.96));
  box-shadow:
    inset 0 0 0 1px rgba(228, 207, 170, 0.08),
    inset 0 -22px 34px rgba(0, 0, 0, 0.24),
    0 18px 46px rgba(0, 0, 0, 0.30);
}

.lobby-app .top h1 {
  color: #e4cfaa;
  font-size: clamp(28px, 3.6vw, 48px);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.34);
}

.lobby-app .subtitle,
.lobby-app .ui-feedback {
  color: rgba(232, 220, 199, 0.76);
}

.lobby-app .top-actions {
  align-items: center;
}

.lobby-app .room-chip {
  border-color: rgba(209, 164, 92, 0.36);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(228, 207, 170, 0.18), rgba(42, 23, 16, 0.78));
  color: #e8dcc7;
  box-shadow: inset 0 0 0 1px rgba(228, 207, 170, 0.08);
}

.lobby-app .room-chip span {
  color: rgba(228, 207, 170, 0.68);
}

.lobby-app .room-chip b {
  color: #f0dfbc;
}

.lobby-app .top button,
.lobby-screen button {
  border-color: rgba(209, 164, 92, 0.45);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(202, 169, 120, 0.88), rgba(139, 95, 50, 0.84));
  color: #211712;
  box-shadow:
    inset 0 1px 0 rgba(240, 223, 188, 0.38),
    0 8px 18px rgba(0, 0, 0, 0.20);
}

.lobby-app .top button:hover,
.lobby-screen button:hover:not(:disabled) {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.lobby-app .top button.primary,
.lobby-screen button.primary,
.lobby-app .top .help-button {
  border-color: rgba(209, 164, 92, 0.55);
  background:
    var(--grain),
    linear-gradient(145deg, #a36c2f, #8f2f1e);
  color: #fff8ea;
}

.lobby-screen button.danger-button {
  border-color: rgba(209, 164, 92, 0.30);
  background:
    var(--grain),
    linear-gradient(145deg, #7a261a, #4d1710);
  color: #fff8ea;
}

.lobby-screen {
  gap: 16px;
}

.lobby-scene-title {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  padding: 2px 4px 0;
}

.lobby-scene-title h2 {
  margin: 0;
  color: #f0dfbc;
  font-size: clamp(24px, 3vw, 38px);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.34);
}

.lobby-scene-title p {
  margin: 6px 0 0;
  color: rgba(232, 220, 199, 0.72);
  font-weight: 750;
}

.lobby-top-strip {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
  gap: 16px;
  align-items: stretch;
}

.panel.pad.lobby-room-panel,
.panel.pad.lobby-roster-panel,
.panel.pad.team-board {
  border-color: rgba(209, 164, 92, 0.24);
  border-radius: 18px;
  background:
    var(--grain),
    radial-gradient(circle at 12% 0%, rgba(209, 164, 92, 0.14), transparent 26%),
    linear-gradient(145deg, rgba(65, 37, 24, 0.94), rgba(21, 14, 10, 0.96));
  color: #e8dcc7;
  box-shadow:
    inset 0 0 0 1px rgba(228, 207, 170, 0.08),
    inset 0 -30px 46px rgba(0, 0, 0, 0.22),
    0 18px 38px rgba(0, 0, 0, 0.28);
}

.panel.pad.lobby-room-panel {
  display: grid;
  grid-template-columns: minmax(150px, auto) minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding-block: 13px;
}

.room-ticket-mark {
  display: grid;
  gap: 3px;
  min-width: 150px;
  padding: 9px 13px;
  border: 1px solid rgba(209, 164, 92, 0.30);
  border-radius: 12px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(228, 207, 170, 0.14), rgba(0, 0, 0, 0.16));
}

.room-ticket-mark span,
.lobby-roster-panel .goal-count,
.team-board .phase {
  color: rgba(228, 207, 170, 0.68);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.room-ticket-mark b {
  color: #f0dfbc;
  font-size: 22px;
  line-height: 1;
}

.room-ticket-copy {
  min-width: 0;
}

.room-ticket-copy h3 {
  margin: 0 0 3px;
  color: #e4cfaa;
  font-size: 16px;
}

.lobby-room-panel .muted,
.lobby-roster-panel .muted,
.team-board .muted {
  color: rgba(232, 220, 199, 0.68);
}

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

.lobby-room-actions button {
  min-height: 34px;
}

.lobby-room-actions .compact-action {
  padding: 7px 12px;
  font-size: 12px;
}

.lobby-room-actions .subtle-danger {
  border-color: rgba(209, 164, 92, 0.22);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(122, 38, 26, 0.76), rgba(77, 23, 16, 0.86));
  box-shadow: none;
}

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

.lobby-roster-panel .panel-title h2,
.team-board-title h2 {
  color: #e4cfaa;
}

.lobby-player-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.lobby-player-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(209, 164, 92, 0.18);
  border-radius: 14px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(228, 207, 170, 0.10), rgba(0, 0, 0, 0.14));
}

.lobby-player-row.selected {
  border-color: rgba(209, 164, 92, 0.44);
  box-shadow: inset 0 0 0 1px rgba(228, 207, 170, 0.08);
}

.lobby-player-row b {
  display: block;
  overflow: hidden;
  color: #f0dfbc;
  font-size: 14px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobby-player-row p {
  margin: 3px 0 0;
  overflow: hidden;
  color: rgba(232, 220, 199, 0.62);
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-token {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(209, 164, 92, 0.34);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 24%, rgba(240, 223, 188, 0.42), transparent 28%),
    linear-gradient(145deg, #8b5f32, #4b2b1b);
  color: #fff8ea;
  font-size: 12px;
  font-weight: 950;
}

.lobby-player-row .ready-badge,
.lobby-player-row .wait-badge {
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid rgba(228, 207, 170, 0.18);
  border-radius: 999px;
  color: #fff8ea;
  font-size: 11px;
  font-weight: 900;
}

.lobby-player-row .ready-badge {
  background: linear-gradient(145deg, #4f5a34, #2f4d34);
}

.lobby-player-row .wait-badge {
  background: linear-gradient(145deg, #8b5f32, #6f351f);
}

.lobby-side {
  position: sticky;
  top: 12px;
}

.team-board {
  display: grid;
  gap: 12px;
}

.team-board-section {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(209, 164, 92, 0.18);
  border-radius: 14px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(228, 207, 170, 0.10), rgba(0, 0, 0, 0.16));
}

.team-board-section h3 {
  margin: 0;
  color: #e4cfaa;
}

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

.compact-metrics .metric {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(209, 164, 92, 0.16);
  border-radius: 12px;
  background:
    var(--grain),
    rgba(0, 0, 0, 0.12);
  color: rgba(232, 220, 199, 0.62);
  font-size: 11px;
  font-weight: 850;
}

.compact-metrics .metric b {
  color: #f0dfbc;
  font-size: 16px;
}

.team-board .compact-metrics .metric span {
  color: rgba(228, 207, 170, 0.78);
}

.team-board .compact-metrics .metric b {
  color: #fff4d8;
}

.compact-metrics .metric {
  box-shadow: none;
}

.team-state button {
  width: 100%;
}

.team-choice-line {
  margin: 0;
  color: rgba(232, 220, 199, 0.68);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.team-choice-line.is-ready {
  color: rgba(228, 207, 170, 0.82);
}

.action-hint {
  margin: 0;
  color: rgba(240, 223, 188, 0.74);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.lobby-app .character-select-card {
  max-width: none;
}

.top {
  align-items: center;
  border-radius: 28px;
}

h1 {
  font-size: clamp(30px, 4.2vw, 62px);
  line-height: 0.92;
  letter-spacing: 0;
}

h2 {
  font-size: clamp(18px, 1.55vw, 24px);
  line-height: 1.08;
}

h3 {
  font-size: clamp(15px, 1.1vw, 19px);
}

.subtitle,
.muted,
.action-hint,
.secondary-tabs span,
.region {
  color: var(--muted);
}

.game-table {
  grid-template-columns: minmax(620px, 1fr) minmax(330px, 430px);
  gap: 18px;
  align-items: start;
}

.table-main,
.table-side,
.app-top {
  gap: 16px;
}

.party-hud {
  display: grid;
  grid-template-columns: repeat(9, minmax(92px, 1fr));
  gap: 10px;
  padding: 12px;
}

.hud-badge {
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 20px;
  background:
    var(--grain),
    linear-gradient(155deg, rgba(232, 220, 199, 0.82), rgba(139, 157, 131, 0.32));
}

.hud-badge small,
.metric span,
.room-chip span,
.invite-box span {
  color: rgba(47, 42, 32, 0.64);
  font-size: 11px;
  font-weight: 800;
  text-transform: none;
}

.hud-badge b,
.metric b {
  font-variant-numeric: tabular-nums;
}

.active-goal,
.action-panel.is-current,
.mission.current-mission {
  border-color: rgba(96, 108, 56, 0.42);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(232, 220, 199, 0.92), rgba(139, 157, 131, 0.42));
  box-shadow: 0 0 0 4px rgba(96, 108, 56, 0.12), 0 18px 45px rgba(47, 42, 32, 0.13);
}

.action-panel {
  position: static;
}

.stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  font-size: 13px;
}

.stats span {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(96, 108, 56, 0.18);
  border-radius: 16px;
  background: rgba(232, 220, 199, 0.42);
}

.stat-bonus {
  color: var(--moss);
}

.phase,
.goal-count,
.ready-badge,
.wait-badge,
.danger-pill,
.inventory-count,
.item-kind,
.token,
.marker {
  min-height: 30px;
  border: 1px solid rgba(59, 51, 39, 0.20);
  border-radius: 999px;
  background:
    var(--grain),
    linear-gradient(180deg, #8B9D83, #606C38);
  color: #E8DCC7;
  box-shadow: none;
}

.goal-count,
.wait-badge,
.token {
  background:
    var(--grain),
    linear-gradient(180deg, #C08E3A, #B08B6E);
  color: var(--ink);
}

.phase-event,
.phase-finale,
.danger-pill {
  background:
    var(--grain),
    linear-gradient(180deg, #C66B3D, #B08B6E);
}

.phase-lobby,
.phase-night {
  background:
    var(--grain),
    linear-gradient(180deg, #8B9D83, #606C38);
}

.map-panel {
  border-radius: 28px;
}

.map {
  min-height: clamp(560px, 62vh, 760px);
  border: 1px solid rgba(59, 51, 39, 0.30);
  border-radius: 28px;
  background:
    var(--grain),
    linear-gradient(rgba(232, 220, 199, 0.04), rgba(96, 108, 56, 0.08)),
    var(--asset-map-bg) center / cover no-repeat,
    #D4B895;
  box-shadow: inset 0 0 0 1px rgba(232, 220, 199, 0.28), 0 22px 52px rgba(47, 42, 32, 0.18);
}

.loc {
  width: clamp(116px, 9vw, 154px);
  min-height: 76px;
  padding: 10px;
  border: 1px solid rgba(59, 51, 39, 0.34);
  border-radius: 20px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(232, 220, 199, 0.90), rgba(212, 184, 149, 0.82));
  box-shadow: 0 12px 26px rgba(47, 42, 32, 0.17);
}

.loc h3 {
  border: 0;
}

.loc.current {
  border-color: #C66B3D;
  box-shadow: 0 0 0 4px rgba(198, 107, 61, 0.18), 0 12px 26px rgba(47, 42, 32, 0.17);
}

.loc.objective {
  background:
    var(--grain),
    linear-gradient(145deg, rgba(232, 220, 199, 0.90), rgba(139, 157, 131, 0.54));
}

.road {
  stroke: rgba(47, 42, 32, 0.34);
  stroke-width: 5;
  stroke-dasharray: 10 9;
}

.player-token,
.legend-token,
.player-chip,
.piece,
.enemy,
.enemy-map-chip {
  border-radius: 999px;
}

.player-chip,
.player-token,
.legend-token {
  border-color: rgba(232, 220, 199, 0.54);
}

.color-0 { background: #C66B3D; }
.color-1 { background: #606C38; }
.color-2 { background: #8B9D83; color: var(--ink); }
.color-3 { background: #C08E3A; color: var(--ink); }
.color-4 { background: #B08B6E; }
.color-5 { background: #606C38; }

.actions,
.mission-actions,
.economy-actions {
  gap: 10px;
}

.check-button {
  min-height: 74px;
  border-radius: 20px;
  background:
    var(--grain),
    linear-gradient(145deg, #606C38, #8B9D83);
}

.check-button b {
  color: #E8DCC7;
}

.check-button span,
.check-button small {
  color: rgba(232, 220, 199, 0.78);
}

.check-button:disabled {
  background:
    var(--grain),
    linear-gradient(145deg, rgba(212, 184, 149, 0.82), rgba(176, 139, 110, 0.70));
}

.check-button:disabled b,
.check-button:disabled span,
.check-button:disabled small {
  color: rgba(47, 42, 32, 0.66);
}

.danger-card,
.danger-note,
.delete-room-zone,
.delete-warning,
.enemy-card.danger-here,
.metric.danger-high,
.night-attack-card,
.last-result.failure,
.result-card.failure {
  border-color: rgba(198, 107, 61, 0.44);
  border-radius: 22px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(232, 220, 199, 0.90), rgba(198, 107, 61, 0.28));
  color: #5d3727;
}

.last-result.success,
.result-card.success,
.shared-roll.success {
  border-color: rgba(96, 108, 56, 0.44);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(232, 220, 199, 0.90), rgba(139, 157, 131, 0.38));
}

.inventory,
.shop,
.cards,
.missions,
.mini-status-list,
.help-stack,
.help-grid,
.glossary {
  gap: 10px;
}

.item,
.shop-item,
.method {
  border-radius: 20px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(232, 220, 199, 0.84), rgba(212, 184, 149, 0.62));
}

.item-actions {
  gap: 8px;
}

.inventory-more {
  background:
    var(--grain),
    linear-gradient(180deg, #8B9D83, #606C38);
}

.section-split {
  border-top: 1px solid rgba(96, 108, 56, 0.22);
}

.secondary-panel {
  border-radius: 28px;
}

.secondary-tabs {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.secondary-tabs button {
  min-height: 64px;
  border-radius: 20px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(96, 108, 56, 0.92), rgba(139, 157, 131, 0.82));
}

.secondary-tabs button.active {
  border-color: rgba(47, 42, 32, 0.28);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(232, 220, 199, 0.94), rgba(192, 142, 58, 0.32));
}

.secondary-tabs button:not(.active) b {
  color: #E8DCC7;
}

.secondary-tabs button:not(.active) span {
  color: rgba(232, 220, 199, 0.72);
}

.secondary-tabs button.active b {
  color: var(--ink);
}

.secondary-tabs button.active span {
  color: var(--muted);
}

.chat-feed {
  min-height: 280px;
  background:
    var(--grain),
    rgba(232, 220, 199, 0.42);
}

.feed-entry.system {
  background:
    var(--grain),
    linear-gradient(145deg, rgba(212, 184, 149, 0.76), rgba(192, 142, 58, 0.18));
}

.feed-entry.chat {
  border-color: rgba(96, 108, 56, 0.30);
}

.modal-backdrop {
  background: rgba(47, 42, 32, 0.58);
  backdrop-filter: blur(4px);
}

.modal {
  border-radius: 28px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(232, 220, 199, 0.98), rgba(212, 184, 149, 0.94));
}

.modal-head,
.modal-actions {
  border-color: rgba(96, 108, 56, 0.22);
}

.loading-card {
  border-radius: 28px;
}

.loading-mark {
  border-color: rgba(96, 108, 56, 0.22);
  border-top-color: #C66B3D;
}

.toast-stack {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 80;
  display: grid;
  gap: 8px;
  width: min(340px, calc(100vw - 28px));
  pointer-events: none;
}

.toast {
  padding: 11px 13px;
  border: 1px solid rgba(209, 164, 92, 0.32);
  border-radius: 14px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(65, 37, 24, 0.96), rgba(21, 14, 10, 0.96));
  color: #f0dfbc;
  box-shadow:
    inset 0 0 0 1px rgba(228, 207, 170, 0.08),
    0 16px 34px rgba(0, 0, 0, 0.34);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  animation: toast-enter 180ms ease both;
}

.toast--success {
  border-color: rgba(79, 90, 52, 0.56);
}

.toast--error {
  border-color: rgba(143, 47, 30, 0.70);
  color: #fff8ea;
}

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

.home-screen,
.lobby-screen,
.state-message {
  width: min(1220px, 100%);
}

.lobby-grid {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 16px;
}

.character-grid {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 12px;
}

.character-card,
.player-card,
.selected-character {
  border-radius: 24px;
}

.inventory-note {
  border-color: rgba(96, 108, 56, 0.24);
  border-radius: 16px;
  background:
    var(--grain),
    rgba(139, 157, 131, 0.24);
}

@media (max-width: 1180px) {
  .party-hud {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .game-table {
    grid-template-columns: 1fr;
  }

  .action-panel {
    position: static;
  }

  .table-side {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.7fr);
  }
}

@media (max-width: 860px) {
  .top,
  .home-hero,
  .lobby-head,
  .modal-head {
    display: grid;
  }

  .table-side,
  .home-grid,
  .lobby-grid,
  .character-grid,
  .help-grid,
  .glossary {
    grid-template-columns: 1fr;
  }

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

  .mission-actions,
  .actions,
  .economy-actions {
    grid-template-columns: 1fr;
  }

  .map {
    min-height: 620px;
  }

  .lobby-top-strip {
    grid-template-columns: 1fr;
  }

  .panel.pad.lobby-room-panel {
    grid-template-columns: 1fr;
  }

  .lobby-room-actions {
    justify-content: stretch;
  }

  .lobby-room-actions button {
    flex: 1 1 180px;
  }

  .lobby-side {
    position: static;
  }

  .toast-stack {
    top: 10px;
    right: 10px;
    bottom: auto;
    left: 10px;
    width: auto;
  }
}

@media (max-width: 560px) {
  .app {
    padding: 8px;
    gap: 10px;
  }

  .party-hud,
  .stats,
  .metrics,
  .shop-status {
    grid-template-columns: 1fr 1fr;
  }

  .hud-badge {
    min-height: 52px;
  }

  .panel.pad {
    padding: 12px;
  }

  .lobby-app .top {
    border-radius: 16px;
  }

  .lobby-app .top-actions {
    grid-template-columns: 1fr;
  }

  .lobby-scene-title h2 {
    font-size: 26px;
  }

  .lobby-player-list,
  .compact-metrics {
    grid-template-columns: 1fr;
  }

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

  .lobby-player-row .ready-badge,
  .lobby-player-row .wait-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .map {
    min-height: 540px;
    border-radius: 22px;
  }

  .loc {
    width: 112px;
    padding: 8px;
  }

  .loc h3 {
    font-size: 13px;
  }

  .item,
  .shop-item,
  .shop-offer {
    grid-template-columns: 1fr;
  }

  .item-actions {
    grid-template-columns: 1fr 1fr;
  }

  .modal-backdrop {
    padding: 8px;
  }

  .modal {
    max-height: 92vh;
    border-radius: 22px;
  }
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

h1,
h2,
h3,
b,
strong,
button,
.hud-badge b,
.metric b,
.room-chip b,
.invite-box b,
.activity-title,
.collapse-head b,
.check-button b,
.feed-entry b,
.phase,
.goal-count,
.ready-badge,
.wait-badge,
.danger-pill,
.inventory-count,
.item-kind {
  font-weight: 700;
}

h1,
h2,
h3,
.character-select-title h3,
.lobby-scene-title h2,
.team-board-title h2,
.lobby-roster-panel .panel-title h2,
.character-status-stamp {
  font-family: var(--font-display);
}

b,
strong,
button,
.hud-badge b,
.metric b,
.room-chip b,
.room-ticket-mark b,
.activity-title,
.collapse-head b,
.check-button b,
.feed-entry b,
.phase,
.goal-count,
.ready-badge,
.wait-badge,
.danger-pill,
.inventory-count,
.item-kind {
  font-family: var(--font-ui);
}

h1 {
  font-size: clamp(28px, 3.7vw, 54px);
  line-height: 1;
}

h2 {
  font-size: clamp(17px, 1.35vw, 22px);
}

h3 {
  font-size: clamp(14px, 1vw, 18px);
}

button {
  font-weight: 700;
}

.subtitle,
.muted,
.action-hint,
.secondary-tabs span,
.feed-entry p,
.help-section p,
.help-section li,
.glossary p {
  line-height: 1.42;
}

.stats,
.hud-badge,
.metric,
.secondary-tabs button,
.item,
.shop-item,
.method,
.loc,
.feed-entry {
  line-height: 1.28;
}

/* UX reorganization: compact play table */
.app-top {
  gap: 8px;
}

.top {
  min-height: auto;
  padding: 10px 14px;
  border-radius: 22px;
}

.top h1 {
  font-size: clamp(22px, 2.2vw, 34px);
}

.top .subtitle {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.3;
}

.top-actions {
  grid-template-columns: auto auto auto;
}

.top-actions button,
.room-chip {
  min-height: 34px;
}

.room-chip {
  min-width: 118px;
  padding: 5px 9px;
  border-radius: 16px;
}

.room-chip b {
  font-size: 15px;
}

.party-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border-radius: 20px;
}

.hud-badge {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 999px;
}

.hud-badge small {
  font-size: 10px;
}

.hud-badge b {
  font-size: 12px;
}

.game-table {
  grid-template-columns: minmax(0, 70fr) minmax(300px, 30fr);
  gap: 14px;
}

.table-side {
  display: grid;
  gap: 14px;
  align-content: start;
}

.active-goal {
  display: grid;
  gap: 9px;
}

.active-goal .panel-title {
  margin-bottom: 0;
}

.goal-brief {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.goal-brief span {
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid rgba(96, 108, 56, 0.20);
  border-radius: 999px;
  background: rgba(232, 220, 199, 0.42);
  font-size: 12px;
}

button.tertiary {
  justify-self: start;
  min-height: 34px;
  padding: 6px 12px;
  border-color: rgba(96, 108, 56, 0.28);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(232, 220, 199, 0.86), rgba(139, 157, 131, 0.34));
  color: var(--ink);
  box-shadow: none;
}

.goal-method-list {
  display: grid;
  gap: 8px;
}

.goal-method {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(220px, 1.2fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid rgba(96, 108, 56, 0.20);
  border-radius: 18px;
  background: rgba(232, 220, 199, 0.34);
}

.goal-method.is-blocked {
  opacity: 0.78;
}

.compact-checks {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.compact-checks .check-button {
  min-height: 58px;
  padding: 8px;
}

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

.map {
  min-height: clamp(560px, 66vh, 780px);
}

.map-legend {
  display: inline-flex;
  max-width: 100%;
  padding: 6px 8px;
  font-size: 11px;
}

.map-roster {
  display: none;
}

.action-panel {
  border-radius: 24px;
  z-index: 1;
  max-height: none;
  overflow: visible;
}

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

.action-panel .subtitle {
  font-size: 12px;
}

.action-panel .stats {
  gap: 5px;
}

.action-panel .stats span {
  padding: 6px 7px;
  font-size: 12px;
}

.section-split {
  margin-top: 9px;
  padding-top: 9px;
}

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

.actions button,
.item-actions button,
.item-actions select {
  min-height: 34px;
}

.compact-inventory-list .item {
  padding: 8px;
}

.compact-inventory-list .muted {
  font-size: 11px;
}

.secondary-panel {
  gap: 9px;
  padding: 10px;
  border-radius: 22px;
  position: relative;
  z-index: 3;
}

.secondary-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.secondary-tabs button {
  flex: 0 0 auto;
  min-width: 128px;
  min-height: 42px;
  padding: 7px 10px;
  border-radius: 999px;
}

.secondary-tabs button span {
  max-width: 110px;
  font-size: 10px;
}

.secondary-body > .embedded-panel,
.secondary-body .collapsible {
  padding: 12px;
  border-radius: 20px;
  box-shadow: none;
}

.team-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
  align-items: start;
}

.team-grid-single {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.team-chat {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.compact-chat {
  min-height: 220px;
  max-height: min(38vh, 360px);
}

.compact-log {
  max-height: min(42vh, 420px);
}

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

.moonshine-stock,
.moonshine-recipes {
  display: grid;
  gap: 10px;
}

.moonshine-recipes {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.moonshine-intro {
  max-width: 920px;
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.moonshine-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.moonshine-chips span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid rgba(96, 108, 56, 0.22);
  border-radius: 999px;
  background:
    var(--grain),
    rgba(232, 220, 199, 0.42);
  font-size: 12px;
}

.moonshine-route-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.moonshine-route-guide article {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(96, 108, 56, 0.22);
  border-radius: 16px;
  background:
    var(--grain),
    rgba(255, 248, 234, 0.42);
}

.moonshine-route-guide b,
.moonshine-route-guide p {
  margin: 0;
}

.moonshine-route-guide p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.moonshine-route-guide div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.moonshine-route-guide span {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid rgba(96, 108, 56, 0.2);
  border-radius: 999px;
  background: rgba(232, 220, 199, 0.5);
  color: var(--ink);
  font-size: 11px;
  line-height: 1.2;
}

.moonshine-route-guide span.is-current {
  border-color: rgba(192, 142, 58, 0.58);
  background: rgba(192, 142, 58, 0.22);
  font-weight: 900;
}

.moonshine-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.moonshine-toolbar p {
  margin: 0;
}

.moonshine-recipe-card,
.moonshine-batch-row {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(96, 108, 56, 0.22);
  border-radius: 18px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(232, 220, 199, 0.76), rgba(139, 157, 131, 0.24));
}

.moonshine-card-head {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: start;
  min-width: 0;
}

.moonshine-card-head h4,
.moonshine-card-head p,
.moonshine-batch-main b,
.moonshine-batch-main span {
  margin: 0;
}

.moonshine-card-head h4 {
  font-size: 16px;
}

.moonshine-card-head p,
.moonshine-batch-main span,
.moonshine-card-actions span,
.moonshine-batch-row small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.moonshine-card-head > b {
  flex: 0 0 auto;
  min-width: 42px;
  padding: 5px 8px;
  border: 1px solid rgba(96, 108, 56, 0.24);
  border-radius: 999px;
  background: rgba(255, 248, 234, 0.72);
  text-align: center;
}

.moonshine-facts {
  display: grid;
  gap: 6px;
  margin: 0;
}

.moonshine-facts div {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 8px;
}

.moonshine-facts dt,
.moonshine-facts dd {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
}

.moonshine-facts dt {
  color: var(--muted);
  font-weight: 900;
}

.moonshine-card-actions,
.moonshine-batch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.moonshine-card-actions button,
.moonshine-batch-actions button {
  min-height: 34px;
  padding: 6px 10px;
}

.moonshine-batch-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.moonshine-batch-row.is-empty {
  opacity: 0.78;
}

.moonshine-batch-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

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

  .table-side {
    display: grid;
  }

  .action-panel {
    position: static;
  }
}

@media (max-width: 820px) {
  .top-actions {
    grid-template-columns: 1fr;
  }

  .party-hud {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .hud-badge {
    flex: 0 0 auto;
  }

  .goal-method,
  .team-grid {
    grid-template-columns: 1fr;
  }

  .map {
    min-height: 560px;
  }
}

@media (max-width: 560px) {
  .app {
    padding: 7px;
  }

  .top {
    padding: 9px;
  }

  .party-hud {
    border-radius: 18px;
  }

  .active-goal,
  .map-panel,
  .action-panel,
  .secondary-panel {
    border-radius: 20px;
  }

  .map {
    min-height: 500px;
  }

  .secondary-tabs button {
    min-width: 104px;
  }

  .moonshine-recipes,
  .moonshine-route-guide,
  .moonshine-batch-row,
  .item-actions {
    grid-template-columns: 1fr;
  }

  .moonshine-toolbar,
  .moonshine-card-head,
  .moonshine-card-actions,
  .moonshine-batch-actions {
    align-items: stretch;
  }

  .moonshine-toolbar,
  .moonshine-card-head {
    display: grid;
  }

  .moonshine-card-actions button,
  .moonshine-batch-actions button {
    width: 100%;
  }

  .chat-form {
    grid-template-columns: 1fr;
  }
}

/* Consistency system pass: shared western tabletop primitives */
:root {
  --western-bg: #0b0a08;
  --western-board: #17100b;
  --western-panel: #26160f;
  --western-panel-2: #3a2116;
  --western-paper: #d4b895;
  --western-paper-dark: #b08b6e;
  --western-leather: #2a1710;
  --western-brass: #b47a32;
  --western-brass-light: #d1a45c;
  --western-red: #8f2f1e;
  --western-red-dark: #4d1710;
  --western-olive: #606c38;
  --western-olive-light: #8b9d83;
  --western-ink: #211712;
  --western-muted: #6d604d;
  --western-paper-text: #2f2a20;
  --western-line: rgba(209, 164, 92, 0.28);
  --western-line-strong: rgba(209, 164, 92, 0.46);
  --western-shadow: rgba(0, 0, 0, 0.44);
  --font-display: "Yeseva One", Georgia, "Times New Roman", serif;
  --font-ui: "Roboto Slab", Georgia, "Times New Roman", serif;
}

html {
  overflow-x: hidden;
}

body {
  min-width: 0;
  color: #e8dcc7;
  font-family: var(--font-ui);
  background:
    var(--grain),
    radial-gradient(circle at 50% 14%, rgba(209, 164, 92, 0.18), transparent 34%),
    radial-gradient(circle at 12% 22%, rgba(143, 47, 30, 0.16), transparent 28%),
    radial-gradient(circle at 84% 82%, rgba(96, 108, 56, 0.16), transparent 32%),
    linear-gradient(rgba(220, 172, 93, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 172, 93, 0.028) 1px, transparent 1px),
    linear-gradient(135deg, #090806 0%, #17100b 42%, #24130d 100%);
  background-size: auto, cover, cover, cover, 34px 34px, 34px 34px, cover;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.50), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.54)),
    radial-gradient(circle at 50% 44%, transparent 0 38%, rgba(0, 0, 0, 0.52) 100%);
}

.app {
  width: min(1720px, 100%);
  color: #e8dcc7;
}

h1,
h2,
h3 {
  color: inherit;
}

.subtitle,
.muted {
  color: rgba(232, 220, 199, 0.70);
}

/* Buttons */
.button,
button {
  min-height: 40px;
  border: 1px solid var(--western-line-strong);
  border-radius: 14px;
  padding: 8px 13px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(202, 169, 120, 0.92), rgba(139, 95, 50, 0.88));
  color: var(--western-ink);
  box-shadow:
    inset 0 1px 0 rgba(240, 223, 188, 0.34),
    0 8px 18px rgba(0, 0, 0, 0.20);
  font-family: var(--font-ui);
  font-weight: 800;
  text-decoration: none;
  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.button--primary,
button.primary {
  border-color: rgba(209, 164, 92, 0.58);
  background:
    var(--grain),
    linear-gradient(145deg, #b16d2f, var(--western-red));
  color: #fff8ea;
}

.button--secondary,
button.secondary,
button.tertiary,
.help-button {
  background:
    var(--grain),
    linear-gradient(145deg, rgba(228, 207, 170, 0.88), rgba(176, 139, 110, 0.70));
  color: var(--western-ink);
}

.button--ghost,
.modal-head button,
.help-tabs button {
  background:
    var(--grain),
    linear-gradient(145deg, rgba(228, 207, 170, 0.18), rgba(42, 23, 16, 0.70));
  color: #f0dfbc;
  box-shadow: inset 0 0 0 1px rgba(228, 207, 170, 0.06);
}

.button--danger,
button.danger-button,
.danger-button {
  border-color: rgba(209, 164, 92, 0.32);
  background:
    var(--grain),
    linear-gradient(145deg, #7a261a, var(--western-red-dark));
  color: #fff8ea;
}

.button--small,
button.compact-action,
.item-actions button,
.item-actions select,
.shop-offer-action button {
  min-height: 34px;
  padding: 6px 11px;
  font-size: 12px;
}

.button--large,
.modal-actions button.primary,
#startBtn {
  min-height: 48px;
  font-size: 16px;
}

button:hover:not(:disabled),
.button:hover {
  filter: brightness(1.05) saturate(1.03);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(240, 223, 188, 0.38),
    0 12px 24px rgba(0, 0, 0, 0.24);
}

button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.16),
    0 5px 12px rgba(0, 0, 0, 0.20);
}

button:disabled,
.button--disabled {
  border-color: rgba(209, 164, 92, 0.18);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(69, 48, 31, 0.44), rgba(21, 14, 10, 0.50));
  color: rgba(232, 220, 199, 0.45);
  box-shadow: none;
  opacity: 1;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(209, 164, 92, 0.52);
  outline-offset: 3px;
}

/* Inputs */
input,
select,
textarea {
  min-height: 42px;
  border: 1px solid rgba(209, 164, 92, 0.34);
  border-radius: 14px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(240, 223, 188, 0.95), rgba(212, 184, 149, 0.86));
  color: var(--western-ink);
  box-shadow: inset 0 2px 8px rgba(45, 20, 14, 0.12);
}

input::placeholder,
textarea::placeholder {
  color: rgba(47, 42, 32, 0.52);
}

label {
  color: rgba(232, 220, 199, 0.74);
}

/* Shells and panels */
.top,
.panel,
.party-hud,
.secondary-panel,
.modal,
.phase-banner {
  border: 1px solid var(--western-line);
  border-radius: 18px;
  background:
    var(--grain),
    radial-gradient(circle at 12% 0%, rgba(209, 164, 92, 0.14), transparent 26%),
    linear-gradient(145deg, rgba(65, 37, 24, 0.95), rgba(21, 14, 10, 0.97));
  color: #e8dcc7;
  box-shadow:
    inset 0 0 0 1px rgba(228, 207, 170, 0.07),
    inset 0 -30px 46px rgba(0, 0, 0, 0.22),
    0 18px 38px rgba(0, 0, 0, 0.28);
}

.panel.pad {
  padding: clamp(14px, 1.4vw, 20px);
}

.panel-title h2,
.modal-head h2,
.top h1 {
  color: #f0dfbc;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.34);
}

.phase-banner.night {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(10px, 1.2vw, 16px);
  min-height: auto;
  padding: clamp(10px, 1.1vw, 14px) clamp(14px, 1.5vw, 20px);
}

.phase-banner.night > div {
  min-width: 0;
  max-width: 58ch;
}

.phase-banner.night b {
  display: block;
  color: #f0dfbc;
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.05;
}

.phase-banner.night p {
  margin: 2px 0 0;
  color: rgba(232, 220, 199, 0.86);
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

button.night-continue-button {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 36px;
  padding: 7px 16px 8px;
  border-radius: 13px;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.05;
  white-space: nowrap;
}

.activity-card .night-continue-button {
  justify-self: start;
  margin-top: 6px;
}

.panel-title {
  gap: 10px;
}

.card,
.metric,
.hud-badge,
.next-step,
.phase-note,
.formula,
.roll-outcomes p,
.roll-breakdown p,
.secondary-body > .embedded-panel,
.item,
.shop-item,
.method,
.collapse-head,
.map-legend,
.map-roster,
.feed-entry,
.chat-feed,
.last-result,
.result-card,
.bonus-details,
.goal-method,
.moonshine-recipe-card,
.moonshine-batch-row,
.stats span,
.goal-brief span {
  border: 1px solid rgba(96, 108, 56, 0.24);
  border-radius: 16px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(232, 220, 199, 0.88), rgba(212, 184, 149, 0.70));
  color: var(--western-paper-text);
  box-shadow: none;
}

.card .muted,
.metric span,
.hud-badge small,
.next-step p,
.phase-note,
.formula,
.roll-outcomes p,
.roll-breakdown p,
.secondary-body > .embedded-panel .muted,
.item .muted,
.shop-item .muted,
.method .muted,
.feed-entry span,
.feed-entry p,
.bonus-details li,
.goal-brief span,
.stats span {
  color: rgba(47, 42, 32, 0.68);
}

.card h2,
.card h3,
.card b,
.metric b,
.hud-badge b,
.next-step b,
.formula b,
.roll-outcomes b,
.roll-breakdown b,
.secondary-body > .embedded-panel h2,
.secondary-body > .embedded-panel h3,
.secondary-body > .embedded-panel b,
.item b,
.shop-item b,
.method b,
.collapse-head b,
.map-legend b,
.map-roster b,
.feed-entry b,
.bonus-details b,
.goal-method b,
.goal-brief b,
.stats b,
.loc h3,
.loc b,
.moonshine-recipe-card b,
.moonshine-batch-row b,
.active-goal h2,
.active-goal h3,
.active-goal b {
  color: var(--western-paper-text);
  text-shadow: none;
}

.loc,
.loc .region,
.loc p,
.active-goal .muted,
.active-goal .action-hint,
.secondary-body > .embedded-panel p,
.secondary-body > .embedded-panel .subtitle {
  color: rgba(47, 42, 32, 0.70);
}

/* Start screen */
.home-app {
  align-content: center;
  width: min(1180px, 100%);
}

.home-screen {
  gap: 16px;
}

.home-hero {
  border: 1px solid var(--western-line);
  border-radius: 20px;
  background:
    var(--grain),
    radial-gradient(circle at 15% 8%, rgba(209, 164, 92, 0.18), transparent 32%),
    linear-gradient(145deg, rgba(75, 43, 27, 0.96), rgba(18, 12, 8, 0.98));
  color: #e8dcc7;
  box-shadow:
    inset 0 0 0 1px rgba(228, 207, 170, 0.08),
    0 22px 50px rgba(0, 0, 0, 0.30);
}

.home-hero h1 {
  margin: 0;
  color: #f0dfbc;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.34);
}

.home-card,
.restore-card {
  min-width: 0;
}

.home-card label {
  color: rgba(232, 220, 199, 0.76);
}

.home-card .muted,
.restore-card .muted {
  color: rgba(232, 220, 199, 0.68);
}

.restore-card .stats span {
  color: var(--western-paper-text);
}

/* Lobby refinements */
.panel.pad.lobby-room-panel {
  grid-template-columns: minmax(160px, auto) minmax(220px, 1fr) auto;
}

.room-ticket-copy p {
  max-width: 34rem;
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
}

.lobby-room-actions .subtle-danger {
  opacity: 0.88;
}

.lobby-room-actions .subtle-danger:hover:not(:disabled) {
  opacity: 1;
}

.team-board .action-hint {
  color: rgba(240, 223, 188, 0.74);
}

/* Game screen */
.app:not(.home-app):not(.lobby-app) .top {
  padding: 11px 14px;
}

.top h1 {
  font-size: clamp(24px, 2.7vw, 40px);
}

.room-chip {
  border-color: rgba(209, 164, 92, 0.36);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(228, 207, 170, 0.18), rgba(42, 23, 16, 0.78));
  color: #e8dcc7;
}

.room-chip span {
  color: rgba(228, 207, 170, 0.68);
}

.room-chip b {
  color: #f0dfbc;
}

.party-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 9px;
}

.hud-badge {
  min-height: 38px;
  padding: 7px 10px;
  border-radius: 999px;
}

.hud-badge.actions {
  border-color: rgba(209, 164, 92, 0.46);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(209, 164, 92, 0.72), rgba(176, 139, 110, 0.55));
}

.hud-badge.turn {
  border-color: rgba(139, 157, 131, 0.48);
}

.hud-badge.danger-mid {
  border-color: rgba(192, 142, 58, 0.58);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(232, 220, 199, 0.88), rgba(192, 142, 58, 0.38));
}

.hud-badge.danger-high {
  border-color: rgba(198, 107, 61, 0.58);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(232, 220, 199, 0.88), rgba(198, 107, 61, 0.34));
}

.active-goal {
  border-color: rgba(209, 164, 92, 0.34);
  background:
    var(--grain),
    radial-gradient(circle at 12% 0%, rgba(209, 164, 92, 0.16), transparent 28%),
    linear-gradient(145deg, rgba(65, 37, 24, 0.96), rgba(21, 14, 10, 0.96));
  color: #e8dcc7;
}

.active-goal .goal-brief span,
.active-goal .goal-method {
  color: var(--western-paper-text);
}

.map-panel {
  overflow: hidden;
}

.map {
  border-color: rgba(209, 164, 92, 0.30);
  box-shadow:
    inset 0 0 0 2px rgba(45, 20, 14, 0.18),
    inset 0 0 44px rgba(45, 20, 14, 0.20),
    0 22px 52px rgba(0, 0, 0, 0.26);
}

.loc button {
  border-radius: 12px;
}

.map-legend {
  color: var(--western-paper-text);
}

.action-panel {
  border-color: rgba(209, 164, 92, 0.34);
}

.action-panel.is-current {
  border-color: rgba(139, 157, 131, 0.54);
  box-shadow:
    inset 0 0 0 1px rgba(139, 157, 131, 0.16),
    0 18px 38px rgba(0, 0, 0, 0.26);
}

/* Tabs */
.secondary-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.secondary-tabs button,
.help-tabs button {
  flex: 0 0 auto;
  min-width: 132px;
  min-height: 44px;
  border-radius: 999px;
}

.secondary-tabs button.active,
.help-tabs button.active {
  border-color: rgba(209, 164, 92, 0.54);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(228, 207, 170, 0.96), rgba(192, 142, 58, 0.40));
  color: var(--western-ink);
}

.secondary-tabs button.active b,
.secondary-tabs button.active span,
.help-tabs button.active {
  color: var(--western-ink);
}

.secondary-body > .embedded-panel {
  margin-top: 2px;
}

/* Chat */
.chat-feed {
  min-height: 260px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(228, 207, 170, 0.20), rgba(0, 0, 0, 0.16));
}

.feed-entry {
  color: var(--western-paper-text);
}

.feed-entry.chat {
  border-color: rgba(96, 108, 56, 0.38);
}

.chat-form {
  align-items: stretch;
}

.chat-form button {
  min-width: 70px;
}

/* Modals */
.modal-backdrop {
  z-index: 80;
  background:
    radial-gradient(circle at 50% 38%, rgba(209, 164, 92, 0.10), transparent 36%),
    rgba(7, 5, 4, 0.72);
  backdrop-filter: blur(4px);
}

.modal {
  border-radius: 22px;
  background:
    var(--grain),
    radial-gradient(circle at 12% 0%, rgba(209, 164, 92, 0.16), transparent 28%),
    linear-gradient(145deg, rgba(65, 37, 24, 0.98), rgba(21, 14, 10, 0.98));
  color: #e8dcc7;
}

.modal-head,
.modal-actions {
  border-color: rgba(209, 164, 92, 0.22);
}

.modal-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(65, 37, 24, 0.98), rgba(21, 14, 10, 0.98));
}

.modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(42, 23, 16, 0.98), rgba(21, 14, 10, 0.98));
}

.roll-preview,
.roll-breakdown,
.shop-status,
.shop-offers,
.full-log,
.help-body,
.tutorial-card,
.delete-warning {
  color: var(--western-paper-text);
}

.roll-preview {
  margin: 14px;
  border: 1px solid rgba(209, 164, 92, 0.26);
  border-radius: 18px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(232, 220, 199, 0.92), rgba(212, 184, 149, 0.78));
}

.roll-preview > p,
.roll-preview .muted {
  color: rgba(47, 42, 32, 0.70);
}

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

.formula {
  border-color: rgba(192, 142, 58, 0.48);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(240, 223, 188, 0.96), rgba(192, 142, 58, 0.28));
}

.result-card h3 {
  color: var(--western-paper-text);
  text-shadow: none;
}

/* Shop */
.shop-modal {
  width: min(1500px, 96vw);
}

.shop-status {
  margin: 0 14px 10px;
  padding: 0;
}

.shop-offers {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  max-height: min(72vh, 820px);
  overflow: auto;
  padding: 0 14px 14px;
}

.shop-offer {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.shop-offer-card {
  padding: 8px;
  border-color: rgba(209, 164, 92, 0.34);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(42, 23, 16, 0.92), rgba(21, 14, 10, 0.96));
}

.shop-offer-action {
  display: grid;
  gap: 5px;
  align-content: start;
  justify-items: stretch;
}

.shop-offer-action .action-hint {
  min-height: 30px;
  margin: 0;
  color: rgba(232, 220, 199, 0.78);
  text-align: center;
}

.shop-unavailable {
  min-height: 34px;
  margin: 0;
  display: grid;
  place-items: center;
  color: rgba(232, 220, 199, 0.84);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.shop-offer-action button:disabled {
  min-width: 110px;
  border-style: dashed;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(111, 96, 77, 0.22), rgba(69, 48, 31, 0.18));
  color: rgba(47, 42, 32, 0.58);
}

.item-card-image {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid rgba(209, 164, 92, 0.34);
  border-radius: 8px;
  background: var(--western-leather);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.item-card-button {
  display: block;
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  cursor: zoom-in;
}

.item-card-button:hover,
.item-card-button:focus-visible {
  outline: 2px solid rgba(209, 164, 92, 0.82);
  outline-offset: 2px;
}

.shop-card-image {
  border-radius: 10px;
}

.inventory .item {
  grid-template-columns: minmax(64px, 92px) minmax(0, 1fr);
  align-items: start;
}

.inventory-card-image {
  width: min(92px, 100%);
  justify-self: start;
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.20);
}

.compact-inventory-list .item {
  grid-template-columns: 58px minmax(0, 1fr);
}

.compact-inventory-list .inventory-card-image {
  width: 58px;
}

.item-preview-modal {
  width: min(560px, 96vw);
}

.item-preview-body {
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: 0 16px 16px;
}

.item-preview-image {
  width: min(390px, 82vw);
  max-height: min(68vh, 600px);
  object-fit: contain;
}

.item-preview-actions {
  width: min(390px, 100%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.item-preview-actions select,
.item-preview-actions .shop-unavailable {
  grid-column: 1 / -1;
}

/* Utility variants */
.danger-card,
.danger-note,
.delete-room-zone,
.delete-warning,
.enemy-card.danger-here,
.metric.danger-high,
.night-attack-card,
.last-result.failure,
.result-card.failure {
  border-color: rgba(198, 107, 61, 0.52);
}

.last-result.success,
.result-card.success,
.shared-roll.success {
  border-color: rgba(96, 108, 56, 0.52);
}

.toast-stack {
  z-index: 100;
  top: 92px;
}

.toast {
  pointer-events: none;
}

@media (max-width: 900px) {
  .panel.pad.lobby-room-panel {
    grid-template-columns: 1fr;
  }

  .lobby-room-actions {
    justify-content: stretch;
  }

  .lobby-room-actions button {
    flex: 1 1 160px;
  }

  .home-hero {
    display: grid;
  }

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

@media (max-width: 560px) {
  .app {
    width: 100%;
    padding: 8px;
  }

  .top,
  .home-hero,
  .panel,
  .secondary-panel,
  .modal {
    border-radius: 16px;
  }

  .top-actions,
  .home-grid,
  .shop-offer {
    grid-template-columns: 1fr;
  }

  .party-hud {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .hud-badge {
    flex: 0 0 auto;
  }

  .secondary-tabs button {
    min-width: 116px;
  }

  .roll-stat-grid,
  .shop-status {
    grid-template-columns: 1fr 1fr;
  }

  .shop-offer-action {
    justify-items: stretch;
  }

  .shop-offer-action .action-hint {
    max-width: none;
    text-align: left;
  }

  .modal-backdrop {
    padding: 8px;
  }

  .modal {
    max-height: 94vh;
  }
}

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

/* Targeted cleanup after consistency pass */
.lobby-top-strip {
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
  align-items: stretch;
}

.panel.pad.lobby-room-panel {
  grid-template-columns: minmax(138px, auto) minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
  overflow: hidden;
}

.room-ticket-mark,
.room-ticket-copy,
.lobby-room-actions {
  min-width: 0;
}

.room-ticket-copy p {
  overflow-wrap: anywhere;
}

.lobby-room-actions {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.lobby-room-actions button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.lobby-room-actions .subtle-danger {
  color: #f6e3c4;
}

.lobby-player-list {
  min-width: 0;
}

.lobby-player-row {
  min-width: 0;
}

.lobby-player-row .ready-badge,
.lobby-player-row .wait-badge {
  white-space: nowrap;
}

.secondary-panel {
  border-radius: 20px;
}

.secondary-tabs {
  align-items: stretch;
}

.secondary-tabs button {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 136px;
  min-height: 50px;
  padding: 8px 12px;
  border-color: rgba(209, 164, 92, 0.30);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(65, 37, 24, 0.86), rgba(21, 14, 10, 0.90));
  color: #e8dcc7;
}

.secondary-tabs button:not(.active) b,
.secondary-tabs button:not(.active) span {
  color: rgba(232, 220, 199, 0.78);
}

.secondary-tabs button.active {
  border-color: rgba(209, 164, 92, 0.64);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(228, 207, 170, 0.96), rgba(192, 142, 58, 0.42));
}

.secondary-body > .embedded-panel,
.secondary-body .collapsible {
  border-color: rgba(209, 164, 92, 0.26);
  background:
    var(--grain),
    radial-gradient(circle at 12% 0%, rgba(209, 164, 92, 0.10), transparent 28%),
    linear-gradient(145deg, rgba(65, 37, 24, 0.90), rgba(21, 14, 10, 0.92));
  color: #e8dcc7;
}

.secondary-body > .embedded-panel .panel-title h2,
.secondary-body > .embedded-panel > h2,
.secondary-body > .embedded-panel > h3 {
  color: #f0dfbc;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.30);
}

.secondary-body > .embedded-panel .muted,
.secondary-body > .embedded-panel .subtitle,
.secondary-body > .embedded-panel > p {
  color: rgba(232, 220, 199, 0.70);
}

.secondary-body > .embedded-panel .card,
.secondary-body > .embedded-panel .mini-player,
.secondary-body > .embedded-panel .moonshine-recipe-card,
.secondary-body > .embedded-panel .moonshine-batch-row,
.secondary-body > .embedded-panel .stats span,
.secondary-body > .embedded-panel .feed-entry,
.secondary-body > .embedded-panel .method,
.secondary-body > .embedded-panel .goal-method {
  color: var(--western-paper-text);
}

.secondary-body > .embedded-panel .card .muted,
.secondary-body > .embedded-panel .mini-player small,
.secondary-body > .embedded-panel .moonshine-recipe-card p,
.secondary-body > .embedded-panel .moonshine-batch-row span,
.secondary-body > .embedded-panel .stats span {
  color: rgba(47, 42, 32, 0.68);
}

.log.compact-log div {
  border-color: rgba(209, 164, 92, 0.18);
  color: rgba(232, 220, 199, 0.78);
}

.hero-card {
  display: grid;
  gap: 12px;
  border-radius: 18px;
  background:
    var(--grain),
    radial-gradient(circle at 18% 4%, rgba(209, 164, 92, 0.14), transparent 30%),
    linear-gradient(145deg, rgba(65, 37, 24, 0.94), rgba(21, 14, 10, 0.96));
}

.hero-card-head {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.hero-card .character-portrait {
  width: 92px;
  height: 116px;
  border-radius: 14px;
  border-color: rgba(209, 164, 92, 0.36);
  box-shadow:
    inset 0 0 0 1px rgba(228, 207, 170, 0.12),
    0 10px 18px rgba(0, 0, 0, 0.26);
}

.hero-card-title {
  min-width: 0;
}

.hero-card-title h2 {
  margin: 0;
  color: var(--western-paper-text);
  font-size: clamp(18px, 1.55vw, 24px);
  line-height: 1.05;
  text-shadow: none;
}

.hero-card-title .muted {
  margin: 4px 0 0;
  color: rgba(47, 42, 32, 0.64);
}

.hero-turn-badge {
  justify-self: end;
  white-space: nowrap;
}

.hero-resource-grid,
.hero-skill-grid {
  display: grid;
  gap: 7px;
}

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

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

.hero-resource-token,
.hero-skill-token {
  display: inline-grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
  min-height: 38px;
  padding: 6px 8px;
  border: 1px solid rgba(209, 164, 92, 0.20);
  border-radius: 13px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(228, 207, 170, 0.82), rgba(176, 139, 110, 0.58));
  color: var(--western-paper-text);
}

.hero-resource-token img,
.hero-skill-token img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.hero-resource-token b,
.hero-skill-token b {
  color: var(--western-paper-text);
  font-size: 14px;
  line-height: 1;
  text-shadow: none;
}

.hero-skill-token .stat-bonus {
  justify-self: end;
  color: #49602f;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.hero-action-token {
  grid-template-columns: minmax(0, 1fr) auto;
}

.action-token-mark {
  overflow: hidden;
  color: rgba(47, 42, 32, 0.62);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-ability-block {
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  border: 1px solid rgba(209, 164, 92, 0.22);
  border-radius: 14px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(228, 207, 170, 0.16), rgba(0, 0, 0, 0.14));
}

.hero-ability-block b {
  color: #f0dfbc;
}

.hero-ability-block p {
  margin: 0;
  color: rgba(232, 220, 199, 0.72);
  font-size: 12px;
  line-height: 1.35;
}

.hero-card .actions button {
  border-radius: 13px;
}

.hero-card h3 {
  color: var(--western-paper-text);
  text-shadow: none;
}

.hero-card .actions button[data-shop-open],
.hero-card .actions button[data-action="rest"],
.hero-card .actions button[data-earn] {
  background:
    var(--grain),
    linear-gradient(145deg, rgba(209, 164, 92, 0.88), rgba(139, 95, 50, 0.82));
  color: var(--western-ink);
}

.hero-card .actions button[data-action="endTurn"] {
  border-color: rgba(209, 164, 92, 0.46);
  background:
    var(--grain),
    linear-gradient(145deg, #a36c2f, var(--western-red));
  color: #fff8ea;
}

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

.hero-inventory-slots .inventory-slot {
  display: block;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 56px;
  border: 1px solid rgba(209, 164, 92, 0.22);
  border-radius: 13px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(228, 207, 170, 0.11), rgba(0, 0, 0, 0.16));
}

.hero-inventory-slots .inventory-slot--empty {
  position: relative;
  border-style: dashed;
}

.hero-inventory-slots .inventory-slot--empty::after {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(228, 207, 170, 0.10);
  border-radius: 10px;
}

.hero-inventory-slots .inventory-slot--filled {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-column: 1 / -1;
  gap: 7px;
  padding: 8px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(228, 207, 170, 0.86), rgba(176, 139, 110, 0.64));
  color: var(--western-paper-text);
}

.inventory-slot-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.inventory-slot-main b {
  overflow: hidden;
  color: var(--western-paper-text);
  font-size: 12px;
  line-height: 1.15;
  text-overflow: ellipsis;
  text-shadow: none;
  white-space: normal;
}

.inventory-slot-main span {
  color: rgba(47, 42, 32, 0.62);
  font-size: 10px;
  font-weight: 900;
}

.inventory-slot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.inventory-slot-actions button,
.inventory-slot-actions select {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 28px;
  padding: 4px 7px;
  border-radius: 9px;
  font-size: 10px;
}

.hero-inventory-empty {
  margin: 0;
}

@media (max-width: 1180px) {
  .lobby-top-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .panel.pad.lobby-room-panel {
    grid-template-columns: 1fr;
  }

  .lobby-room-actions {
    justify-content: stretch;
  }

  .lobby-room-actions button {
    flex: 1 1 160px;
  }

  .hero-card-head {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .hero-card .character-portrait {
    width: 82px;
    height: 104px;
  }

  .hero-turn-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .toast-stack {
    top: auto;
    bottom: 10px;
  }
}

@media (max-width: 430px) {
  .hero-resource-grid,
  .hero-skill-grid,
  .hero-inventory-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .secondary-tabs button {
    min-width: 122px;
  }
}

/* Gameplay UI cleanup pass */
.secondary-panel {
  gap: 12px;
  padding: 12px;
  border-color: rgba(209, 164, 92, 0.34);
  background:
    var(--grain),
    radial-gradient(circle at 16% 0%, rgba(209, 164, 92, 0.16), transparent 30%),
    linear-gradient(145deg, rgba(48, 27, 18, 0.96), rgba(13, 9, 7, 0.97));
}

.secondary-tabs {
  gap: 8px;
  padding: 2px 2px 4px;
}

.secondary-tabs button {
  min-width: 138px;
  min-height: 52px;
  padding: 8px 12px;
  border-radius: 16px;
  border-color: rgba(209, 164, 92, 0.28);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(47, 28, 19, 0.92), rgba(20, 13, 9, 0.94));
  box-shadow: inset 0 0 0 1px rgba(228, 207, 170, 0.05);
}

.secondary-tabs button b {
  font-size: 13px;
  line-height: 1.1;
}

.secondary-tabs button span {
  max-width: 118px;
  color: rgba(232, 220, 199, 0.66);
  font-size: 10px;
  line-height: 1.15;
}

.secondary-tabs button.active {
  border-color: rgba(209, 164, 92, 0.68);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(212, 184, 149, 0.98), rgba(192, 142, 58, 0.54));
  box-shadow:
    inset 0 1px 0 rgba(240, 223, 188, 0.35),
    0 8px 18px rgba(0, 0, 0, 0.22);
}

.secondary-tabs button:hover:not(:disabled),
.secondary-tabs button:focus-visible {
  border-color: rgba(209, 164, 92, 0.58);
}

.secondary-body > .embedded-panel,
.secondary-body .collapsible {
  padding: 14px;
  border-color: rgba(209, 164, 92, 0.32);
  border-radius: 18px;
  background:
    var(--grain),
    radial-gradient(circle at 15% 0%, rgba(209, 164, 92, 0.12), transparent 28%),
    linear-gradient(145deg, rgba(40, 24, 17, 0.94), rgba(20, 13, 10, 0.96));
  color: #e8dcc7;
}

.secondary-body > .embedded-panel .panel-title h2,
.secondary-body > .embedded-panel > h2,
.secondary-body > .embedded-panel > h3,
.secondary-body > .embedded-panel .section-title {
  color: #f0dfbc;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.28);
}

.secondary-body > .embedded-panel .muted,
.secondary-body > .embedded-panel .subtitle,
.secondary-body > .embedded-panel > p,
.moonshine-intro {
  color: rgba(232, 220, 199, 0.76);
}

.active-goal {
  display: grid;
  gap: 12px;
}

.active-goal .panel-title {
  margin-bottom: 0;
}

.active-goal .panel-title h2 {
  line-height: 1.08;
}

.goal-brief,
.moonshine-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.goal-brief .goal-chip,
.moonshine-chips span,
.moonshine-summary-chip,
.inventory-count,
.team-status-chip,
.method-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid rgba(209, 164, 92, 0.32);
  border-radius: 999px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(212, 184, 149, 0.86), rgba(176, 139, 110, 0.58));
  color: var(--western-paper-text);
  font-size: 12px;
  font-weight: 850;
}

.goal-brief .goal-chip b,
.moonshine-chips span b,
.moonshine-summary-chip {
  color: #251a12;
}

.goal-method-list {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
}

.goal-method {
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 12px;
  border-color: rgba(209, 164, 92, 0.30);
  border-radius: 18px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(212, 184, 149, 0.92), rgba(176, 139, 110, 0.68));
  color: var(--western-paper-text);
}

.goal-method.is-ready {
  border-color: rgba(139, 157, 131, 0.46);
}

.goal-method.is-blocked {
  opacity: 1;
  border-color: rgba(176, 139, 110, 0.30);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(162, 135, 102, 0.74), rgba(86, 64, 45, 0.48));
}

.goal-method-head {
  display: flex;
  gap: 8px;
  align-items: start;
  justify-content: space-between;
}

.goal-method-head > b {
  font-size: 16px;
  line-height: 1.12;
}

.method-status {
  flex: 0 0 auto;
  min-height: 24px;
  padding: 3px 8px;
  font-size: 10px;
  text-transform: uppercase;
}

.method-status.is-ready {
  border-color: rgba(96, 108, 56, 0.44);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(139, 157, 131, 0.74), rgba(96, 108, 56, 0.36));
}

.method-status.is-blocked {
  border-color: rgba(143, 47, 30, 0.32);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(198, 107, 61, 0.30), rgba(111, 71, 48, 0.36));
}

.goal-method-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.goal-method-main .muted {
  color: rgba(47, 42, 32, 0.72);
}

.goal-method-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.goal-method-meta span {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid rgba(96, 108, 56, 0.20);
  border-radius: 999px;
  background: rgba(232, 220, 199, 0.32);
  color: rgba(47, 42, 32, 0.70);
  font-size: 11px;
  font-weight: 800;
}

.method-reason,
.check-button .action-missing {
  color: #7a261a;
}

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

.check-button {
  min-height: 68px;
  border-color: rgba(209, 164, 92, 0.34);
  border-radius: 14px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(232, 220, 199, 0.92), rgba(192, 142, 58, 0.34));
  color: var(--western-paper-text);
  text-align: left;
}

.check-button span,
.check-button small {
  color: rgba(47, 42, 32, 0.68);
}

.check-button:disabled {
  border-color: rgba(86, 64, 45, 0.28);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(128, 108, 83, 0.44), rgba(69, 48, 31, 0.34));
}

.team-panel {
  background:
    var(--grain),
    linear-gradient(145deg, rgba(40, 24, 17, 0.94), rgba(20, 13, 10, 0.96));
}

.team-grid-single {
  gap: 10px;
}

.mini-player {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-color: rgba(209, 164, 92, 0.28);
  border-radius: 16px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(212, 184, 149, 0.90), rgba(176, 139, 110, 0.60));
}

.mini-player-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.mini-player b {
  color: var(--western-paper-text);
  line-height: 1.1;
}

.mini-player small {
  color: rgba(47, 42, 32, 0.68);
  line-height: 1.25;
}

.mini-player.is-active {
  border-color: rgba(139, 157, 131, 0.62);
  box-shadow: inset 0 0 0 1px rgba(96, 108, 56, 0.18);
}

.mini-player.is-offline {
  filter: saturate(0.72);
  opacity: 0.78;
}

.team-status-chip {
  min-height: 24px;
  padding: 3px 8px;
  border-color: rgba(96, 108, 56, 0.24);
  font-size: 10px;
  white-space: nowrap;
}

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

.moonshine-head {
  align-items: start;
}

.moonshine-summary-chip {
  justify-self: end;
  max-width: 280px;
  white-space: normal;
}

.moonshine-intro {
  max-width: 880px;
  font-size: 13px;
}

.moonshine-route-guide {
  gap: 10px;
}

.moonshine-route-guide article,
.moonshine-recipe-card,
.moonshine-batch-row {
  border-color: rgba(209, 164, 92, 0.28);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(212, 184, 149, 0.90), rgba(176, 139, 110, 0.62));
  color: var(--western-paper-text);
}

.moonshine-route-guide article {
  border-radius: 17px;
  padding: 12px;
}

.moonshine-route-guide b,
.moonshine-card-head h4,
.moonshine-batch-main b {
  color: var(--western-paper-text);
}

.moonshine-route-guide p,
.moonshine-card-head p,
.moonshine-batch-main span,
.moonshine-card-actions span,
.moonshine-batch-row small {
  color: rgba(47, 42, 32, 0.68);
}

.moonshine-route-guide span {
  border-color: rgba(96, 108, 56, 0.22);
  background: rgba(232, 220, 199, 0.36);
  color: rgba(47, 42, 32, 0.76);
}

.moonshine-route-guide span.is-current {
  border-color: rgba(192, 142, 58, 0.64);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(209, 164, 92, 0.68), rgba(139, 157, 131, 0.32));
  color: #211712;
}

.moonshine-toolbar {
  padding: 10px;
  border: 1px solid rgba(209, 164, 92, 0.22);
  border-radius: 16px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(228, 207, 170, 0.10), rgba(0, 0, 0, 0.16));
}

.moonshine-card-head > b {
  border-color: rgba(192, 142, 58, 0.44);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(209, 164, 92, 0.74), rgba(176, 139, 110, 0.48));
  color: #211712;
}

.moonshine-facts div {
  padding: 7px 8px;
  border: 1px solid rgba(96, 108, 56, 0.16);
  border-radius: 12px;
  background: rgba(232, 220, 199, 0.28);
}

.moonshine-facts dt {
  color: rgba(47, 42, 32, 0.62);
}

.moonshine-facts dd {
  color: var(--western-paper-text);
}

.moonshine-batch-row.is-empty {
  opacity: 1;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(154, 130, 101, 0.54), rgba(69, 48, 31, 0.32));
}

.hero-card {
  border-color: rgba(209, 164, 92, 0.34);
  background:
    var(--grain),
    radial-gradient(circle at 18% 0%, rgba(209, 164, 92, 0.20), transparent 30%),
    linear-gradient(145deg, rgba(212, 184, 149, 0.92), rgba(139, 157, 131, 0.34)),
    linear-gradient(145deg, rgba(48, 27, 18, 0.82), rgba(21, 14, 10, 0.86));
  color: var(--western-paper-text);
}

.hero-card .character-portrait {
  border-color: rgba(75, 47, 31, 0.42);
}

.hero-card-title h2,
.hero-card h3 {
  color: #2a1b12;
}

.hero-card-title .muted,
.hero-card .subtitle,
.hero-inventory-empty {
  color: rgba(47, 42, 32, 0.68);
}

.hero-turn-badge {
  border-color: rgba(96, 108, 56, 0.38);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(139, 157, 131, 0.76), rgba(96, 108, 56, 0.40));
  color: #211712;
}

.hero-resource-token,
.hero-skill-token {
  border-color: rgba(75, 47, 31, 0.16);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(232, 220, 199, 0.84), rgba(212, 184, 149, 0.62));
}

.hero-resource-token img,
.hero-skill-token img {
  width: 24px;
  height: 24px;
}

.hero-ability-block {
  border-color: rgba(75, 47, 31, 0.16);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(87, 67, 45, 0.22), rgba(228, 207, 170, 0.16));
}

.hero-ability-block b {
  color: #2a1b12;
}

.hero-ability-block p {
  color: rgba(47, 42, 32, 0.72);
}

.hero-card .section-split {
  border-color: rgba(75, 47, 31, 0.12);
}

.hero-card .actions button[data-shop-open],
.hero-card .actions button[data-action="rest"],
.hero-card .actions button[data-earn] {
  border-color: rgba(75, 47, 31, 0.18);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(209, 164, 92, 0.88), rgba(176, 139, 110, 0.76));
}

.hero-card .actions button[data-action="endTurn"] {
  border-color: rgba(143, 47, 30, 0.44);
}

.hero-inventory-slots .inventory-slot {
  border-color: rgba(75, 47, 31, 0.18);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(232, 220, 199, 0.26), rgba(87, 67, 45, 0.18));
}

.hero-inventory-slots .inventory-slot--empty::after {
  border-color: rgba(75, 47, 31, 0.12);
  background: rgba(232, 220, 199, 0.12);
}

.hero-inventory-slots .inventory-slot--filled {
  border-color: rgba(75, 47, 31, 0.20);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(232, 220, 199, 0.92), rgba(176, 139, 110, 0.66));
}

.tutorial-modal {
  width: min(640px, 100%);
}

/* Targeted repair for the in-game hero card. Keeps the game mechanics/handlers intact. */
.panel.pad.action-panel.hero-card,
.panel.pad.action-panel.hero-card.is-current,
.panel.pad.action-panel.hero-card.is-muted {
  gap: 10px;
  border-color: rgba(209, 164, 92, 0.42);
  background:
    var(--grain),
    radial-gradient(circle at 16% 0%, rgba(209, 164, 92, 0.18), transparent 28%),
    linear-gradient(145deg, #4a2b1b, #24150e 52%, #120b08);
  color: #f2dfbd;
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 198, 0.07),
    0 18px 34px rgba(0, 0, 0, 0.32);
}

.hero-card-head {
  grid-template-columns: 78px minmax(0, 1fr) auto;
  gap: 10px;
}

.hero-card .character-portrait {
  width: 78px;
  height: 98px;
  border-radius: 11px;
  border-color: rgba(209, 164, 92, 0.42);
}

.hero-card-title h2 {
  color: #f2dfbd;
  font-size: clamp(17px, 1.3vw, 22px);
  line-height: 1.08;
}

.hero-card-title .muted,
.hero-card .subtitle,
.hero-inventory-empty {
  color: rgba(232, 220, 199, 0.72);
}

.hero-card h3 {
  color: #f2dfbd;
}

.hero-turn-badge {
  border-color: rgba(209, 164, 92, 0.34);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(209, 164, 92, 0.78), rgba(79, 90, 52, 0.62));
  color: #211712;
}

.hero-resource-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

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

.hero-resource-token,
.hero-skill-token {
  min-height: 32px;
  padding: 5px 7px;
  border-color: rgba(75, 47, 31, 0.24);
  border-radius: 10px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(232, 220, 199, 0.94), rgba(196, 154, 95, 0.70));
  box-shadow: inset 0 1px 0 rgba(255, 248, 234, 0.30);
}

.hero-resource-token {
  grid-template-columns: 22px minmax(0, 1fr);
}

.hero-skill-token {
  grid-template-columns: 22px auto minmax(18px, 1fr);
}

.hero-skill-token.has-bonus {
  border-color: rgba(79, 90, 52, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 234, 0.34),
    0 0 0 1px rgba(79, 90, 52, 0.10);
}

.hero-resource-token img,
.hero-skill-token img {
  width: 21px;
  height: 21px;
}

.hero-resource-token b,
.hero-skill-token b {
  font-size: 13px;
}

.hero-skill-token .stat-bonus {
  justify-self: end;
  min-width: 28px;
  padding: 2px 6px;
  border: 1px solid rgba(255, 248, 234, 0.28);
  border-radius: 999px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(79, 90, 52, 0.96), rgba(49, 62, 28, 0.92));
  color: #fff8ea;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

.hero-action-token {
  grid-template-columns: minmax(0, 1fr) auto;
}

.action-token-mark {
  color: rgba(47, 42, 32, 0.66);
  font-size: 10px;
}

.hero-ability-block {
  padding: 9px 10px;
  border-color: rgba(209, 164, 92, 0.22);
  border-radius: 12px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(232, 220, 199, 0.16), rgba(75, 47, 31, 0.20));
}

.hero-ability-block b {
  color: #f2dfbd;
}

.hero-ability-block p {
  color: rgba(232, 220, 199, 0.74);
}

.hero-card .section-split {
  margin-top: 8px;
  padding-top: 8px;
  border-color: rgba(209, 164, 92, 0.18);
}

.hero-card .actions {
  gap: 6px;
  margin-top: 8px;
}

.hero-card .actions button {
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 12px;
}

.hero-inventory .panel-title.compact {
  align-items: center;
  gap: 8px;
}

.hero-inventory .inventory-count {
  border-color: rgba(209, 164, 92, 0.32);
  background:
    var(--grain),
    linear-gradient(145deg, rgba(209, 164, 92, 0.76), rgba(139, 95, 50, 0.58));
  color: #211712;
}

.hero-inventory-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hero-inventory-item {
  display: block;
  flex: 0 0 auto;
  min-width: 0;
  padding: 4px;
  border: 1px solid rgba(75, 47, 31, 0.22);
  border-radius: 9px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(232, 220, 199, 0.95), rgba(196, 154, 95, 0.62));
  color: var(--western-paper-text);
}

.hero-inventory-card-image {
  width: 46px;
  border-radius: 6px;
  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.18);
}

.hero-inventory-item .action-hint,
.hero-inventory-list > .action-hint {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 10px;
}

.hero-inventory-empty {
  margin: 0;
  padding: 7px 8px;
  border: 1px dashed rgba(209, 164, 92, 0.24);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.12);
}

@media (max-width: 760px) {
  .hero-card-head {
    grid-template-columns: 66px minmax(0, 1fr);
  }

  .hero-card .character-portrait {
    width: 66px;
    height: 84px;
  }

  .hero-turn-badge {
    grid-column: 2;
    justify-self: start;
  }

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

  .hero-inventory-item {
    padding: 4px;
  }

  .hero-inventory-card-image {
    width: 44px;
  }
}

.tutorial-modal .modal-head .muted,
.tutorial-modal .check-row {
  color: rgba(232, 220, 199, 0.78);
}

.tutorial-card {
  gap: 13px;
  margin: 14px;
  padding: 16px;
  border-color: rgba(209, 164, 92, 0.34);
  border-radius: 18px;
  background:
    var(--grain),
    radial-gradient(circle at 18% 0%, rgba(209, 164, 92, 0.18), transparent 34%),
    linear-gradient(145deg, rgba(212, 184, 149, 0.96), rgba(176, 139, 110, 0.72));
  color: var(--western-paper-text);
}

.tutorial-card h3 {
  margin: 0;
  color: #2a1b12;
}

.tutorial-card p {
  color: rgba(47, 42, 32, 0.74);
}

.tutorial-progress {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.tutorial-progress i {
  position: relative;
  display: block;
  height: 10px;
  overflow: hidden;
  border: 1px solid rgba(75, 47, 31, 0.20);
  border-radius: 999px;
  background: rgba(75, 47, 31, 0.18);
}

.tutorial-progress i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--tutorial-progress);
  border-radius: inherit;
  background:
    var(--grain),
    linear-gradient(90deg, rgba(139, 157, 131, 0.78), rgba(209, 164, 92, 0.88));
}

.check-row {
  margin: 0 14px 14px;
  padding: 10px 12px;
  border: 1px solid rgba(209, 164, 92, 0.24);
  border-radius: 14px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(228, 207, 170, 0.10), rgba(0, 0, 0, 0.12));
}

.check-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  accent-color: var(--western-brass);
}

.tutorial-modal .modal-actions {
  gap: 8px;
}

.tutorial-modal .modal-actions button[data-tutorial-skip] {
  background:
    var(--grain),
    linear-gradient(145deg, rgba(228, 207, 170, 0.16), rgba(42, 23, 16, 0.70));
  color: #f0dfbc;
}

.roll-modal {
  width: min(640px, 100%);
}

.roll-modal .modal-head {
  align-items: start;
}

.roll-dice {
  padding: 14px;
}

.dice-asset {
  width: clamp(72px, 9vw, 118px);
  height: clamp(72px, 9vw, 118px);
}

.roll-breakdown {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 14px 12px;
}

.roll-breakdown p {
  margin: 0;
  padding: 8px 9px;
  border-radius: 13px;
}

.roll-breakdown .bonus-details {
  grid-column: 1 / -1;
}

.result-card {
  display: grid;
  gap: 6px;
  margin: 0 14px 14px;
  padding: 12px;
  border-radius: 16px;
  background:
    var(--grain),
    linear-gradient(145deg, rgba(212, 184, 149, 0.92), rgba(176, 139, 110, 0.62));
}

.result-card-head {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

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

.result-card h3 {
  color: #2a1b12;
}

.result-card p {
  color: rgba(47, 42, 32, 0.74);
}

.result-card-head span {
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(232, 220, 199, 0.34);
  color: rgba(47, 42, 32, 0.72);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.result-effects {
  padding-top: 5px;
  color: #5a321f;
}

.map-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-radius: 18px;
  scrollbar-color: rgba(209, 164, 92, 0.58) rgba(45, 20, 14, 0.20);
}

.map-scroll::-webkit-scrollbar {
  height: 10px;
}

.map-scroll::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(45, 20, 14, 0.18);
}

.map-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(209, 164, 92, 0.58);
}

.map-panel {
  overflow: visible;
}

.map {
  aspect-ratio: 1672 / 941;
  min-height: 0;
  border: 0;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 48%, rgba(242, 207, 132, 0.08), transparent 44%),
    linear-gradient(rgba(37, 18, 12, 0.02), rgba(37, 18, 12, 0.06)),
    var(--asset-map-bg) center / 102% 104% no-repeat,
    #D4B895;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
}

.map .roads {
  opacity: 1;
}

.map .road {
  pointer-events: none;
}

.map .road-bed,
.map .road-rut,
.map .road-route {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.map .road-bed {
  stroke: rgba(88, 54, 24, 0.50);
  stroke-width: 17;
  filter:
    drop-shadow(0 1px 0 rgba(247, 217, 153, 0.28))
    drop-shadow(0 2px 3px rgba(47, 27, 13, 0.24));
}

.map .road-rut {
  stroke: rgba(238, 197, 112, 0.66);
  stroke-width: 3.6;
}

.map .road-rut-left {
  stroke: rgba(250, 215, 132, 0.62);
}

.map .road-rut-right {
  stroke: rgba(47, 28, 14, 0.20);
  stroke-width: 1.2;
}

.map .reachable-road .road-bed {
  stroke: rgba(112, 75, 33, 0.58);
}

.map .reachable-road .road-rut {
  stroke: rgba(255, 224, 145, 0.76);
}

.map .route-road .road-bed {
  stroke: rgba(112, 69, 25, 0.64);
}

.map .route-road .road-route {
  stroke: rgba(246, 188, 72, 0.96);
  stroke-width: 5.4;
  filter:
    drop-shadow(0 0 4px rgba(247, 202, 108, 0.82))
    drop-shadow(0 0 8px rgba(198, 131, 42, 0.45))
    drop-shadow(0 1px 0 rgba(76, 42, 18, 0.36));
}

.map .loc {
  display: block;
  width: clamp(88px, 7.6vw, 116px);
  min-height: 0;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 5px 5px rgba(35, 17, 10, 0.20));
  isolation: isolate;
  outline: none;
  z-index: 2;
}

.map .loc::before {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 188, 82, 0.24), rgba(240, 188, 82, 0));
  opacity: 0;
  pointer-events: none;
  transform: scale(1);
  z-index: 0;
}

.map .loc::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 13%;
  height: 18%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(49, 31, 18, 0.24), rgba(49, 31, 18, 0));
  filter: blur(2px);
  opacity: 0.72;
  pointer-events: none;
  z-index: -1;
}

.map .loc.current,
.map .loc.objective {
  z-index: 5;
}

.map .loc.current::before {
  inset: 0;
  opacity: 0.92;
  box-shadow:
    0 0 0 3px rgba(255, 222, 126, 0.72),
    0 0 22px rgba(224, 169, 70, 0.82);
  animation: mapCurrentPulse 2200ms ease-in-out infinite;
}

.map .loc.objective::before {
  inset: 6%;
  opacity: 0.78;
  box-shadow:
    0 0 0 2px rgba(210, 184, 94, 0.48),
    0 0 16px rgba(96, 108, 56, 0.72);
  background: radial-gradient(circle, rgba(198, 169, 86, 0.34), rgba(96, 108, 56, 0.18) 46%, rgba(96, 108, 56, 0));
}

.map .loc.current.objective::before {
  background: radial-gradient(circle, rgba(248, 202, 101, 0.38), rgba(139, 157, 96, 0.22) 48%, rgba(139, 157, 96, 0));
}

@keyframes mapCurrentPulse {
  0%,
  100% {
    transform: scale(0.98);
    opacity: 0.72;
  }
  50% {
    transform: scale(1.14);
    opacity: 1;
  }
}

.loc-art {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
  pointer-events: none;
  user-select: none;
  opacity: 0.96;
  filter: sepia(0.10) saturate(0.88) contrast(0.97);
  z-index: 1;
}

.loc-label {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: grid;
  min-width: 82%;
  max-width: 172%;
  transform: translateX(-50%);
  padding: 3px 7px 4px;
  border: 1px solid rgba(86, 52, 27, 0.42);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(236, 207, 151, 0.92), rgba(177, 123, 63, 0.82));
  color: #2a1b12;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 205, 0.34),
    0 3px 7px rgba(37, 20, 10, 0.18);
  pointer-events: none;
  z-index: 2;
}

.loc-label b,
.loc-label small {
  overflow: hidden;
}

.loc-label b {
  color: #21150f;
  display: -webkit-box;
  font-size: clamp(10px, 0.82vw, 13px);
  line-height: 1.05;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.loc-label small {
  color: rgba(47, 32, 21, 0.74);
  font-size: clamp(7px, 0.54vw, 9px);
  font-weight: 900;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.loc-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.loc-overlay .pieces,
.loc-overlay .enemies {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 0;
  pointer-events: none;
}

.loc-overlay .pieces {
  top: -7px;
  left: 50%;
  justify-content: center;
  width: max-content;
  max-width: 110%;
  transform: translateX(-50%);
}

.loc-overlay .enemies {
  right: 2px;
  bottom: 22px;
  justify-content: end;
  max-width: 92%;
}

.loc-overlay button,
.loc-overlay .player-chip,
.loc-overlay .marker,
.loc-overlay .enemy-map-chip {
  pointer-events: auto;
}

.map .loc.current {
  filter:
    drop-shadow(0 0 0 rgba(198, 107, 61, 0))
    drop-shadow(0 0 4px rgba(255, 231, 148, 0.92))
    drop-shadow(0 0 16px rgba(224, 169, 70, 0.86))
    drop-shadow(0 8px 8px rgba(35, 17, 10, 0.28));
}

.map .loc.reachable:not(.current) {
  filter:
    drop-shadow(0 0 6px rgba(189, 154, 92, 0.44))
    drop-shadow(0 6px 6px rgba(35, 17, 10, 0.22));
}

.map .loc.objective {
  filter:
    drop-shadow(0 0 4px rgba(230, 205, 126, 0.72))
    drop-shadow(0 0 14px rgba(117, 132, 78, 0.76))
    drop-shadow(0 7px 8px rgba(35, 17, 10, 0.26));
}

.map .loc.current.objective {
  filter:
    drop-shadow(0 0 5px rgba(255, 231, 148, 0.95))
    drop-shadow(0 0 18px rgba(224, 169, 70, 0.88))
    drop-shadow(0 0 12px rgba(117, 132, 78, 0.72))
    drop-shadow(0 8px 8px rgba(35, 17, 10, 0.28));
}

.map .loc.route-step:not(.current):not(.objective) {
  filter:
    drop-shadow(0 0 8px rgba(224, 169, 70, 0.48))
    drop-shadow(0 6px 6px rgba(35, 17, 10, 0.22));
}

.map .loc.near-danger:not(.current) {
  filter:
    drop-shadow(0 0 7px rgba(122, 38, 26, 0.40))
    drop-shadow(0 6px 6px rgba(35, 17, 10, 0.22));
}

.map .player-chip {
  min-width: 24px;
  min-height: 22px;
  padding: 2px 5px;
  border-width: 1px;
  font-size: 10px;
  box-shadow: 0 3px 7px rgba(35, 17, 10, 0.24);
}

.map .player-chip b {
  font-size: 10px;
}

.map .player-chip small {
  display: none;
}

.map .marker,
.map .enemy-map-chip,
.map .loc-move {
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9px;
  line-height: 1;
  box-shadow: 0 4px 8px rgba(35, 17, 10, 0.24);
}

.map .objective-marker {
  min-height: 16px;
  padding: 1px 6px;
  border-color: rgba(96, 108, 56, 0.54);
  background: linear-gradient(180deg, rgba(202, 183, 105, 0.92), rgba(116, 132, 78, 0.82));
  color: #fff4cf;
  font-size: 8px;
  text-transform: uppercase;
}

.map .loc-move {
  position: absolute;
  top: 8px;
  right: 2px;
  width: 26px;
  min-width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(95, 57, 23, 0.42);
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 240, 181, 0.92), rgba(203, 147, 65, 0.94) 58%, rgba(113, 65, 28, 0.92));
  color: #2a170d;
  font-size: 24px;
  line-height: 21px;
  margin: 0;
  opacity: 0.88;
  transform: rotate(-18deg);
}

.map .loc-move:hover,
.map .loc-move:focus-visible {
  opacity: 1;
  transform: rotate(-18deg) scale(1.08);
}

.map .loc-grid {
  width: clamp(122px, 10.5vw, 154px);
}

.map .loc-tavern,
.map .loc-station {
  width: clamp(96px, 8.3vw, 126px);
}

.map .loc-commissariat,
.map .loc-stable,
.map .loc-port {
  width: clamp(88px, 7.4vw, 114px);
}

.map .loc-commissariat,
.map .loc-port {
  width: clamp(76px, 7.4vw, 114px);
}

.map .loc-mine,
.map .loc-witch,
.map .loc-cabin,
.map .loc-lumber,
.map .loc-swamp,
.map .loc-moonshine {
  width: clamp(80px, 6.8vw, 104px);
}

.map .loc-cabin {
  width: clamp(74px, 6.1vw, 94px);
}

.map .loc-commissariat {
  transform: translate(calc(-50% + clamp(30px, 3.4vw, 48px)), -50%);
}

.loc-tooltip {
  position: absolute;
  left: 50%;
  top: calc(100% - 20px);
  display: grid;
  gap: 2px;
  min-width: 132px;
  max-width: 168px;
  padding: 6px 8px;
  border: 1px solid rgba(91, 57, 31, 0.46);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(235, 211, 166, 0.98), rgba(194, 151, 93, 0.96));
  color: #2a1b12;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 205, 0.42),
    0 8px 16px rgba(28, 15, 8, 0.28);
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transform: translate(-50%, -4px) scale(0.98);
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 12;
}

.map .loc.tooltip-up .loc-tooltip {
  top: auto;
  bottom: calc(100% - 16px);
  transform: translate(-50%, 4px) scale(0.98);
}

.loc-tooltip b {
  font-size: 12px;
  line-height: 1.04;
}

.loc-tooltip span,
.loc-tooltip small {
  color: rgba(45, 29, 18, 0.78);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.08;
}

.loc-tooltip-move {
  min-height: 22px;
  margin-top: 3px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 9px;
}

.map .loc:hover .loc-tooltip,
.map .loc:focus-within .loc-tooltip,
.map .loc:focus .loc-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

@media (max-width: 760px) {
  .map-scroll {
    margin-inline: -2px;
  }

  .map {
    width: 760px;
    max-width: none;
  }

  .secondary-panel {
    padding: 10px;
  }

  .secondary-tabs button {
    min-width: 118px;
    min-height: 48px;
  }

  .goal-method-list,
  .moonshine-route-guide,
  .moonshine-recipes {
    grid-template-columns: 1fr;
  }

  .moonshine-head,
  .goal-method-head,
  .moonshine-toolbar,
  .moonshine-batch-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .moonshine-summary-chip {
    justify-self: start;
  }

  .mini-player {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .team-status-chip {
    grid-column: 2;
    justify-self: start;
  }

  .roll-breakdown {
    grid-template-columns: 1fr;
  }

  .tutorial-modal .modal-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}