:root {
  color-scheme: light;
  --ink: #1d2d2b;
  --ink-soft: #40504e;
  --paper: #f4ead2;
  --paper-deep: #e5d2aa;
  --paper-light: #fffaf0;
  --club: #163f3c;
  --club-2: #245f58;
  --gold: #c8923c;
  --gold-light: #e7bd6f;
  --rust: #9a3f2d;
  --blue: #336f7e;
  --success: #2f7359;
  --danger: #9f4438;
  --shadow: 0 18px 48px rgba(25, 38, 36, .22);
  --radius: 22px;
  --small-radius: 12px;
  --focus: 0 0 0 4px rgba(231, 189, 111, .55);
  --font-display: Georgia, 'Times New Roman', serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #102f2e; }
body {
  min-height: 100vh;
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 12%, rgba(231,189,111,.18), transparent 32rem),
    linear-gradient(135deg, #102f2e, #1d4b47 60%, #153936);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: url('assets/paper-grain.svg');
  mix-blend-mode: soft-light;
}
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--focus); }
img { max-width: 100%; display: block; }

.skip-link {
  position: fixed;
  z-index: 100;
  left: 1rem;
  top: -4rem;
  padding: .75rem 1rem;
  border-radius: 999px;
  background: var(--paper-light);
  color: var(--ink);
  transition: top .15s ease;
}
.skip-link:focus { top: 1rem; }

.app-shell {
  width: min(1500px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(.75rem, 2vw, 2rem);
}

.game-frame {
  min-height: calc(100vh - clamp(1.5rem, 4vw, 4rem));
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.28);
  background: var(--paper);
  position: relative;
}

.topbar {
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: .8rem clamp(1rem, 2.5vw, 2.25rem);
  color: #fff8e7;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 45%),
    var(--club);
  border-bottom: 3px solid var(--gold);
}
.brand-lockup { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.brand-lockup img { width: 42px; height: 42px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
.brand-lockup strong { font-family: var(--font-display); font-size: clamp(1rem, 2vw, 1.35rem); letter-spacing: .02em; }
.brand-lockup small { display: block; color: #d5e2db; margin-top: .1rem; }
.topbar-center { text-align: center; }
.renown-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .85rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(0,0,0,.15);
  font-weight: 800;
}
.top-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.icon-button {
  min-width: 44px; min-height: 44px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  color: #fff;
  background: rgba(255,255,255,.08);
}
.icon-button:hover { background: rgba(255,255,255,.16); }

main { min-height: calc(100vh - 150px); }
.screen { min-height: inherit; }
.screen-inner { padding: clamp(1rem, 3vw, 3rem); }

.hero-screen {
  display: grid;
  grid-template-columns: minmax(320px, 1.08fr) minmax(330px, .92fr);
  min-height: calc(100vh - 150px);
}
.hero-art {
  position: relative;
  min-height: 640px;
  background: #1a4f4a;
  overflow: hidden;
}
.hero-art > img { width: 100%; height: 100%; object-fit: cover; }
.hero-art::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 60%, rgba(20,49,46,.55));
  pointer-events: none;
}
.hero-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 5vw, 5rem);
  background:
    linear-gradient(180deg, rgba(255,255,255,.8), rgba(244,234,210,.93)),
    url('assets/paper-grain.svg');
}
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .76rem; font-weight: 900; color: var(--rust); }
h1, h2, h3 { font-family: var(--font-display); margin-top: 0; }
h1 { font-size: clamp(3rem, 7vw, 6.8rem); line-height: .88; margin-bottom: 1.25rem; letter-spacing: -.055em; }
h2 { font-size: clamp(2rem, 4vw, 3.8rem); line-height: 1; margin-bottom: .6rem; }
h3 { font-size: 1.3rem; margin-bottom: .35rem; }
.lede { font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.6rem); line-height: 1.42; color: var(--ink-soft); max-width: 35rem; }
.blurb { font-size: 1rem; line-height: 1.7; color: var(--ink-soft); max-width: 42rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }

.button {
  border: 0;
  border-radius: 999px;
  padding: .88rem 1.25rem;
  min-height: 48px;
  font-weight: 900;
  letter-spacing: .01em;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.button:hover { transform: translateY(-1px); filter: brightness(1.03); }
.button:active { transform: translateY(1px); }
.button-primary { color: #fffaf0; background: linear-gradient(180deg, #b7563c, #913722); box-shadow: 0 10px 24px rgba(145,55,34,.25); }
.button-secondary { color: #fff; background: linear-gradient(180deg, var(--club-2), var(--club)); box-shadow: 0 10px 24px rgba(22,63,60,.22); }
.button-paper { color: var(--ink); background: var(--paper-light); border: 1px solid #cdbb95; }
.button-ghost { color: var(--ink); background: transparent; border: 1px solid rgba(29,45,43,.25); }
.button-danger { color: #fff; background: var(--danger); }
.button:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.clubhouse-screen {
  min-height: calc(100vh - 150px);
  background:
    linear-gradient(180deg, rgba(18,48,46,.12), rgba(18,48,46,0) 35%),
    var(--paper);
}
.clubhouse-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: start;
}
.clubhouse-art {
  position: sticky;
  top: 1rem;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #193b38;
  aspect-ratio: 16 / 10;
}
.clubhouse-art img { width: 100%; height: 100%; object-fit: cover; }
.clubhouse-art .room-badge {
  position: absolute;
  padding: .42rem .65rem;
  border-radius: 999px;
  background: rgba(16,47,46,.88);
  color: #fff;
  font-size: .72rem;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.2);
}
.room-badge[data-room="library"] { left: 7%; top: 12%; }
.room-badge[data-room="workshop"] { left: 60%; top: 17%; }
.room-badge[data-room="kitchen"] { left: 10%; top: 70%; }
.room-badge[data-room="gallery"] { left: 42%; top: 49%; }
.room-badge[data-room="radio"] { right: 8%; top: 67%; }
.room-badge.locked { opacity: .45; filter: grayscale(1); }
.clubhouse-panel { display: grid; gap: 1rem; }
.panel, .paper-card {
  border: 1px solid #cbb98e;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,250,240,.88)),
    url('assets/paper-grain.svg');
  box-shadow: 0 14px 30px rgba(61,48,26,.12);
}
.panel { padding: clamp(1rem, 2vw, 1.5rem); }
.panel-header { display: flex; justify-content: space-between; gap: 1rem; align-items: start; margin-bottom: 1rem; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.stat {
  text-align: center;
  padding: .9rem .7rem;
  border-radius: 14px;
  background: rgba(36,95,88,.08);
  border: 1px solid rgba(36,95,88,.12);
}
.stat strong { display: block; font-family: var(--font-display); font-size: 1.6rem; }
.stat span { color: var(--ink-soft); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.room-list, .discovery-list { display: grid; gap: .65rem; }
.room-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .75rem;
  align-items: center;
  padding: .8rem;
  border-radius: 14px;
  background: rgba(255,255,255,.48);
  border: 1px solid rgba(92,75,42,.12);
}
.room-row p, .discovery-row p { margin: .2rem 0 0; color: var(--ink-soft); font-size: .86rem; line-height: 1.4; }
.discovery-row { padding: .75rem 0; border-bottom: 1px dashed rgba(92,75,42,.22); }
.discovery-row:last-child { border-bottom: 0; }
.empty-note { color: var(--ink-soft); font-style: italic; }

.planning-screen { background: var(--paper); }
.planning-header { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin-bottom: 1.25rem; }
.progress-steps { display: flex; flex-wrap: wrap; gap: .45rem; }
.step-pill { padding: .42rem .7rem; border-radius: 999px; border: 1px solid #c9b88e; background: rgba(255,255,255,.5); font-size: .78rem; font-weight: 900; }
.step-pill.active { background: var(--club); color: white; border-color: var(--club); }
.contract-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); gap: 1rem; }
.contract-card {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  border-radius: 18px;
  border: 0;
  padding: 0;
  text-align: left;
  background: #193f3c;
  box-shadow: var(--shadow);
  color: white;
}
.contract-card img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: transform .25s ease; }
.contract-card:hover img { transform: scale(1.025); }
.contract-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(7,24,22,.93)); }
.contract-copy { position: relative; z-index: 1; min-height: 250px; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.25rem; }
.contract-copy h3 { font-size: 1.6rem; }
.contract-copy p { margin: .35rem 0; color: #e7eee9; line-height: 1.45; }
.contract-card.selected { box-shadow: 0 0 0 4px var(--gold-light), var(--shadow); }
.contract-card.locked { filter: grayscale(.65); }
.badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .52rem; border-radius: 999px; font-size: .72rem; font-weight: 900; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.18); }
.badge-dark { color: var(--ink); background: rgba(36,95,88,.1); border-color: rgba(36,95,88,.2); }

.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .9rem; }
.member-card {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: .9rem;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: .85rem;
  border: 1px solid #ccb98e;
  border-radius: 18px;
  background: rgba(255,255,255,.62);
}
.member-card img { width: 84px; aspect-ratio: 4/5; object-fit: cover; border-radius: 12px; background: #d9c8a6; }
.member-card h3 { margin-bottom: .15rem; }
.member-card p { margin: 0; font-size: .83rem; line-height: 1.35; color: var(--ink-soft); }
.member-card.selected { background: rgba(36,95,88,.12); border-color: var(--club-2); box-shadow: 0 0 0 3px rgba(36,95,88,.12); }
.member-card:disabled { opacity: .45; }

.pack-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1rem; align-items: start; }
.equipment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.equipment-card {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: .7rem;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: .75rem;
  border: 1px solid #cbb98e;
  border-radius: 14px;
  background: rgba(255,255,255,.56);
}
.equipment-card .equip-icon { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--club); color: white; font-size: 1.25rem; }
.equipment-card strong { display: block; }
.equipment-card small { display: block; color: var(--ink-soft); line-height: 1.3; margin-top: .15rem; }
.equipment-card .weight { text-align: right; font-size: .72rem; font-weight: 900; color: var(--ink-soft); }
.equipment-card.selected { border-color: var(--rust); background: rgba(154,63,45,.1); box-shadow: inset 4px 0 var(--rust); }
.pack-summary { position: sticky; top: 1rem; padding: 1rem; }
.meter { margin: .9rem 0; }
.meter-head { display: flex; justify-content: space-between; font-weight: 900; font-size: .82rem; margin-bottom: .35rem; }
.meter-track { height: 12px; border-radius: 999px; overflow: hidden; background: #d8caab; }
.meter-fill { height: 100%; border-radius: inherit; background: var(--club-2); transition: width .2s ease; }
.meter-fill.over { background: var(--danger); }
.issue-list { margin: .75rem 0 0; padding-left: 1.2rem; color: var(--danger); font-weight: 800; }
.required-list { display: grid; gap: .45rem; margin: .8rem 0; }
.required-item { display: flex; justify-content: space-between; gap: .5rem; padding: .5rem .6rem; border-radius: 10px; background: rgba(36,95,88,.08); }
.required-item.missing { background: rgba(159,68,56,.1); color: var(--danger); }
.planning-footer { display: flex; justify-content: space-between; gap: .75rem; align-items: center; margin-top: 1.3rem; }

.expedition-screen {
  min-height: calc(100vh - 150px);
  background: #d8c794;
  position: relative;
}
.expedition-screen[data-region="desert"] { --region: #aa5d2c; --region-dark: #57321f; --region-soft: #f0d5a8; }
.expedition-screen[data-region="island"] { --region: #356c69; --region-dark: #1e3f3e; --region-soft: #bed7cf; }
.expedition-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; min-height: inherit; }
.map-panel {
  position: relative;
  overflow: hidden;
  min-height: 680px;
  background:
    radial-gradient(circle at 25% 15%, rgba(255,255,255,.28), transparent 25rem),
    linear-gradient(180deg, var(--region-soft), #b89a62);
}
.map-panel::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('assets/map-grid.svg');
  opacity: .42;
}
.map-header { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 1rem; align-items: start; padding: clamp(1rem, 2.5vw, 2rem); }
.map-title h2 { margin-bottom: .25rem; }
.map-title p { margin: 0; color: var(--ink-soft); }
.route-map { position: relative; z-index: 1; min-height: 520px; margin: 0 clamp(1rem, 3vw, 3rem) 2rem; }
.route-line { position: absolute; left: 8%; right: 8%; top: 49%; height: 4px; background: repeating-linear-gradient(90deg, var(--region-dark) 0 20px, transparent 20px 32px); opacity: .55; }
.route-stage { position: absolute; top: calc(49% - 30px); transform: translateX(-50%); }
.route-stage:nth-child(2) { left: 10%; }
.route-stage:nth-child(3) { left: 27%; top: 32%; }
.route-stage:nth-child(4) { left: 45%; top: 58%; }
.route-stage:nth-child(5) { left: 63%; top: 31%; }
.route-stage:nth-child(6) { left: 81%; top: 53%; }
.route-stage:nth-child(7) { left: 94%; }
.route-node {
  width: 120px;
  min-height: 86px;
  padding: .65rem;
  border-radius: 16px;
  border: 2px solid rgba(255,255,255,.75);
  background: var(--paper-light);
  color: var(--ink);
  box-shadow: 0 10px 20px rgba(72,48,22,.18);
  text-align: center;
}
.route-node strong { display: block; font-family: var(--font-display); font-size: .95rem; }
.route-node small { display: block; margin-top: .22rem; color: var(--ink-soft); }
.route-node.current { color: white; background: var(--region-dark); transform: scale(1.05); }
.route-node.visited { background: var(--region); color: white; }
.route-node.hidden { opacity: .36; filter: grayscale(1); }
.route-options { position: absolute; inset: auto 0 1rem; display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; padding: 1rem; z-index: 2; }
.route-option {
  width: min(260px, 42vw);
  padding: .9rem;
  border: 2px solid rgba(255,255,255,.75);
  border-radius: 16px;
  text-align: left;
  color: var(--ink);
  background: rgba(255,250,240,.93);
  box-shadow: var(--shadow);
}
.route-option:hover { transform: translateY(-2px); }
.route-option strong { display: block; font-family: var(--font-display); font-size: 1.05rem; }
.route-option span { display: block; color: var(--ink-soft); margin-top: .25rem; font-size: .82rem; }
.route-option em { display: inline-block; margin-top: .45rem; font-size: .7rem; font-style: normal; font-weight: 900; color: var(--rust); }

.expedition-sidebar { position: relative; z-index: 3; background: var(--club); color: #f8f0da; padding: 1rem; display: grid; align-content: start; gap: .85rem; }
.resource-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.resource-card { padding: .75rem; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.resource-card strong { display: block; font-family: var(--font-display); font-size: 1.45rem; }
.resource-card span { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #cfddd7; font-weight: 900; }
.expedition-team { display: flex; gap: .45rem; }
.expedition-team img { width: 52px; height: 62px; object-fit: cover; border-radius: 10px; border: 2px solid rgba(255,255,255,.18); }
.log-list { max-height: 250px; overflow: auto; display: grid; gap: .55rem; padding-right: .2rem; }
.log-entry { padding: .6rem; border-radius: 11px; background: rgba(0,0,0,.12); font-size: .8rem; line-height: 1.35; }
.log-entry strong { color: var(--gold-light); }
.sidebar-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.expedition-sidebar .button-paper { flex: 1; }

.event-modal-wrap {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(10,29,28,.74);
  backdrop-filter: blur(6px);
}
.event-card {
  width: min(920px, 100%);
  max-height: calc(100vh - 5rem);
  overflow: auto;
  border-radius: 24px;
  background: var(--paper-light);
  border: 5px solid var(--region);
  box-shadow: 0 30px 90px rgba(0,0,0,.4);
}
.event-art { height: 160px; background: linear-gradient(130deg, var(--region), var(--region-dark)); position: relative; overflow: hidden; }
.event-art::before { content: ''; position: absolute; inset: 0; background: url('assets/contours.svg') center/cover; opacity: .4; }
.event-art span { position: absolute; left: 1.5rem; bottom: 1rem; color: white; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.event-body { padding: clamp(1rem, 3vw, 2rem); }
.event-body > p { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.45; color: var(--ink-soft); }
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1rem; }
.choice-card { text-align: left; padding: 1rem; border-radius: 16px; border: 1px solid #cdbb95; background: #fffaf1; }
.choice-card:hover { border-color: var(--region); box-shadow: 0 10px 24px rgba(61,48,26,.14); }
.choice-card h3 { margin-bottom: .25rem; }
.choice-card p { color: var(--ink-soft); line-height: 1.45; font-size: .9rem; }
.outcome-preview { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.outcome-preview span { padding: .26rem .46rem; border-radius: 999px; background: rgba(36,95,88,.08); font-size: .72rem; font-weight: 900; }
.outcome-preview .risk { background: rgba(154,63,45,.11); color: var(--rust); }
.result-banner { padding: 1rem; border-radius: 16px; margin-top: 1rem; }
.result-banner.success { background: rgba(47,115,89,.12); border: 1px solid rgba(47,115,89,.25); }
.result-banner.fail { background: rgba(159,68,56,.1); border: 1px solid rgba(159,68,56,.22); }
.result-banner h3 { margin-bottom: .35rem; }
.result-banner p { margin: 0; color: var(--ink-soft); }

.result-screen { min-height: calc(100vh - 150px); display: grid; place-items: center; padding: 2rem; background: linear-gradient(180deg, var(--paper), #d8c48f); }
.result-card { width: min(800px, 100%); text-align: center; padding: clamp(1.5rem, 4vw, 3.5rem); }
.result-seal { width: 110px; height: 110px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; color: white; font-family: var(--font-display); font-size: 2.2rem; background: var(--success); border: 7px double var(--gold-light); box-shadow: 0 12px 24px rgba(0,0,0,.18); }
.result-seal.fail { background: var(--danger); }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: 1.2rem 0; }
.ending-panel { position: relative; overflow: hidden; text-align: left; margin-top: 1rem; padding: 1.2rem; border-radius: 18px; color: white; background: var(--club); }
.ending-panel::after { content: ''; position: absolute; right: -5%; bottom: -35%; width: 250px; height: 250px; border: 24px double rgba(231,189,111,.25); border-radius: 50%; }

.settings-wrap { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(7,24,23,.7); backdrop-filter: blur(8px); }
.settings-panel { width: min(620px, 100%); max-height: 90vh; overflow: auto; padding: 1.25rem; }
.how-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .65rem; margin: .9rem 0 1rem; }
.how-grid > div { padding: .75rem; border-radius: 14px; background: rgba(36,95,88,.07); border: 1px solid rgba(36,95,88,.12); }
.how-grid strong { font-family: var(--font-display); color: var(--club-2); }
.how-grid p { margin: .3rem 0 0; color: var(--ink-soft); font-size: .84rem; line-height: 1.4; }
.settings-row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: .9rem 0; border-bottom: 1px dashed rgba(92,75,42,.22); }
.settings-row p { margin: .2rem 0 0; color: var(--ink-soft); font-size: .86rem; }
.toggle { width: 52px; height: 30px; padding: 3px; border: 0; border-radius: 999px; background: #ac9d80; }
.toggle span { display: block; width: 24px; height: 24px; border-radius: 50%; background: white; transition: transform .16s ease; }
.toggle.on { background: var(--club-2); }
.toggle.on span { transform: translateX(22px); }

.toast { position: fixed; z-index: 90; left: 50%; bottom: 1.5rem; transform: translateX(-50%); padding: .75rem 1rem; border-radius: 999px; background: #102f2e; color: white; box-shadow: var(--shadow); font-weight: 800; }

.large-text { font-size: 112%; }
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }

@media (max-width: 1050px) {
  .hero-screen, .clubhouse-grid, .expedition-layout, .pack-layout { grid-template-columns: 1fr; }
  .hero-art { min-height: 420px; }
  .hero-art::after { background: linear-gradient(180deg, transparent 55%, rgba(20,49,46,.45)); }
  .clubhouse-art, .pack-summary { position: relative; top: auto; }
  .expedition-sidebar { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sidebar-actions, .expedition-team { align-self: start; }
}

@media (max-width: 720px) {
  .app-shell { padding: 0; }
  .game-frame { border-radius: 0; min-height: 100vh; }
  .topbar { grid-template-columns: 1fr auto; }
  .topbar-center { display: none; }
  .brand-lockup small { display: none; }
  .screen-inner { padding: 1rem; }
  h1 { font-size: 3.6rem; }
  .hero-art { min-height: 300px; }
  .hero-copy { padding: 1.5rem; }
  .planning-header { display: block; }
  .progress-steps { margin-top: .75rem; }
  .choice-grid, .result-stats, .how-grid { grid-template-columns: 1fr; }
  .expedition-sidebar { grid-template-columns: 1fr; }
  .map-panel { min-height: 590px; }
  .route-map { margin-inline: .5rem; }
  .route-node { width: 92px; min-height: 72px; padding: .48rem; }
  .route-stage:nth-child(2) { left: 8%; }
  .route-stage:nth-child(3) { left: 25%; }
  .route-stage:nth-child(4) { left: 43%; }
  .route-stage:nth-child(5) { left: 62%; }
  .route-stage:nth-child(6) { left: 80%; }
  .route-stage:nth-child(7) { left: 93%; }
  .route-node small { display: none; }
  .route-options { bottom: .2rem; }
  .route-option { width: min(44vw, 210px); }
  .event-modal-wrap { position: fixed; }
}

/* Pass 03 — authored expedition presentation */
.controller-status { display: block; margin-top: .3rem; color: #cbdcd5; font-size: .68rem; font-weight: 800; letter-spacing: .04em; }
.map-panel { background: linear-gradient(180deg, #efe0bc, #b89a62); }
.map-panel::before { display: none; }
.route-plate {
  position: relative;
  z-index: 1;
  margin: 0 clamp(1rem, 3vw, 3rem) 1rem;
  overflow: hidden;
  border-radius: 22px;
  border: 3px solid rgba(255,250,240,.85);
  background: var(--region-dark);
  box-shadow: 0 20px 40px rgba(61,42,20,.26);
}
.route-plate img { width: 100%; aspect-ratio: 16 / 8.8; object-fit: cover; }
.route-plate figcaption { position: absolute; left: 1rem; right: 1rem; bottom: .8rem; padding: .55rem .75rem; border-radius: 12px; color: #fff; background: rgba(17,43,41,.84); font-size: .75rem; font-weight: 800; }
.route-progress-strip { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(6, minmax(90px, 1fr)); gap: .55rem; margin: 0 clamp(1rem, 3vw, 3rem) 1rem; }
.route-stage { position: relative; inset: auto !important; transform: none !important; min-height: 86px; padding: .7rem; border-radius: 14px; border: 1px solid rgba(73,51,25,.18); background: rgba(255,250,240,.8); box-shadow: 0 8px 18px rgba(61,42,20,.12); }
.route-stage strong, .route-stage small { display: block; }
.route-stage strong { font-family: var(--font-display); margin-top: .25rem; }
.route-stage small { margin-top: .15rem; color: var(--ink-soft); }
.route-stage-number { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: var(--region-dark); font-size: .72rem; font-weight: 900; }
.route-stage.current { outline: 3px solid var(--gold-light); background: var(--paper-light); }
.route-stage.visited { color: #fff; background: var(--region-dark); }
.route-stage.visited small { color: #d7e4df; }
.route-stage.visited .route-stage-number { color: var(--region-dark); background: var(--gold-light); }
.route-stage.hidden { opacity: .5; filter: grayscale(.55); }
.route-choice-drawer { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(190px,.35fr) minmax(0,1fr); gap: 1rem; align-items: center; margin: 0 clamp(1rem, 3vw, 3rem) 2rem; padding: 1rem; border-radius: 20px; background: rgba(255,250,240,.9); border: 1px solid rgba(73,51,25,.2); box-shadow: 0 14px 32px rgba(61,42,20,.16); }
.route-choice-drawer h3 { margin: .3rem 0 0; }
.route-options { position: relative; inset: auto; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); padding: 0; }
.route-option { width: auto; min-height: 118px; }
.event-art { height: 230px; background: var(--region-dark); }
.event-art::before { display: none; }
.event-art img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.03); }
.event-art::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(10,28,27,.86)); }
.event-art span { z-index: 2; }
.member-reaction { display: grid; grid-template-columns: 64px 1fr; gap: .8rem; align-items: center; margin-top: 1rem; padding: .8rem; border-radius: 15px; background: #efe1bf; border: 1px solid #cfb47d; }
.member-reaction img { width: 64px; height: 74px; object-fit: cover; border-radius: 11px; border: 2px solid white; }
.member-reaction p { margin: 0; color: var(--ink-soft); font-family: var(--font-display); line-height: 1.45; }
.member-reaction strong { color: var(--club); font-family: var(--font-body); }
.tutorial-wrap { position: fixed; z-index: 95; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(8,28,26,.82); backdrop-filter: blur(12px); }
.tutorial-card { width: min(940px,100%); max-height: 92vh; overflow: auto; display: grid; grid-template-columns: minmax(280px,.95fr) minmax(360px,1.05fr); border-radius: 26px; overflow: hidden; border: 4px solid var(--gold-light); background: var(--paper-light); box-shadow: 0 35px 100px rgba(0,0,0,.48); }
.tutorial-art { min-height: 520px; background: var(--club); }
.tutorial-art img { width: 100%; height: 100%; object-fit: cover; }
.tutorial-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.4rem,4vw,3rem); }
.tutorial-copy h2 { max-width: 12ch; }
.tutorial-note { margin-top: 1rem; padding: .8rem 1rem; border-left: 4px solid var(--gold); background: #eadbb9; color: var(--ink-soft); font-weight: 800; line-height: 1.45; }
.tutorial-progress { display: flex; gap: .45rem; margin-top: 1rem; }
.tutorial-progress span { width: 34px; height: 6px; border-radius: 999px; background: #c8ba96; }
.tutorial-progress span.active { background: var(--rust); }
.tutorial-actions { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1rem; }

@media (max-width: 1050px) {
  .route-progress-strip { grid-template-columns: repeat(3, 1fr); }
  .route-choice-drawer { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .route-plate { margin-inline: .75rem; }
  .route-plate img { aspect-ratio: 4 / 3; }
  .route-progress-strip { margin-inline: .75rem; grid-template-columns: repeat(2, 1fr); }
  .route-choice-drawer { margin-inline: .75rem; }
  .route-options { grid-template-columns: 1fr; }
  .route-option { width: 100%; min-height: 0; }
  .event-art { height: 170px; }
  .tutorial-card { grid-template-columns: 1fr; }
  .tutorial-art { min-height: 210px; max-height: 240px; }
  .tutorial-copy { padding: 1.2rem; }
  .tutorial-copy h2 { font-size: 2.35rem; }
  .tutorial-actions { flex-direction: column-reverse; }
  .tutorial-actions .button { width: 100%; }
}


/* Pass 04 — destination dossiers, travelling party and debrief contact sheets */
.contract-card > img { transform: scale(1.015); transition: transform .25s ease, filter .25s ease; }
.contract-card:hover > img, .contract-card.selected > img { transform: scale(1.055); filter: saturate(1.08) contrast(1.04); }
.destination-ribbon { display:grid; grid-template-columns:180px 1fr; gap:1rem; align-items:center; margin:0 clamp(1rem,3vw,3rem) 1rem; padding:.75rem; border-radius:18px; color:#f9efd8; background:linear-gradient(120deg,var(--region-dark),#173e3c); box-shadow:0 14px 30px rgba(48,31,17,.2); }
.destination-ribbon img { width:180px; height:102px; object-fit:cover; border-radius:12px; border:2px solid rgba(255,255,255,.16); }
.destination-ribbon strong { display:block; font-family:var(--font-display); font-size:1.25rem; margin:.2rem 0; }
.destination-ribbon p { margin:0; color:#ded7c3; line-height:1.4; font-size:.88rem; }
.route-plate { overflow:visible; }
.travel-party { --journey:8; position:absolute; left:calc(var(--journey) * 1%); top:56%; z-index:5; display:flex; align-items:end; gap:.2rem; transform:translate(-50%,-50%); filter:drop-shadow(0 8px 9px rgba(39,22,12,.42)); transition:left .7s cubic-bezier(.2,.8,.2,1); }
.travel-member { position:relative; display:grid; justify-items:center; animation:expedition-step 1.2s ease-in-out infinite; animation-delay:calc(var(--traveller) * -.18s); }
.travel-member img { width:42px; height:50px; object-fit:cover; border-radius:12px 12px 16px 16px; border:3px solid #f4dfac; background:#173d3b; }
.travel-member small { margin-top:-3px; padding:.12rem .35rem; border-radius:999px; color:#fff8e6; background:#173d3b; font-size:.58rem; font-weight:900; }
@keyframes expedition-step { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-7px) rotate(2deg)} }
.debrief-section { margin:1.4rem 0; text-align:left; }
.debrief-heading { max-width:700px; margin:0 auto 1rem; text-align:center; }
.debrief-heading h3 { margin:.25rem 0; }
.debrief-heading p { margin:0; color:var(--ink-soft); }
.debrief-gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1rem; align-items:start; }
.debrief-card { margin:0; padding:.55rem; border:1px solid #c5ae7c; border-radius:8px; background:#fff9e9; box-shadow:0 13px 28px rgba(61,44,23,.18); transform:rotate(var(--tilt)); }
.debrief-card img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:4px; filter:saturate(.9) contrast(1.03); }
.debrief-card figcaption { display:grid; grid-template-columns:30px 1fr; gap:.45rem; padding:.6rem .2rem .2rem; }
.debrief-card figcaption > span { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:white; background:var(--club); font-size:.68rem; font-weight:900; }
.debrief-card strong { display:block; font-family:var(--font-display); font-size:.92rem; }
.debrief-card p { margin:.18rem 0 0; color:var(--ink-soft); font-size:.72rem; line-height:1.35; }
.debrief-card.setback { border-color:#b77868; }
.debrief-card.setback figcaption > span { background:var(--danger); }
.debrief-card.success { border-color:#6c9c78; }
.debrief-card.success figcaption > span { background:var(--success); }
@media (max-width:700px) { .destination-ribbon{grid-template-columns:110px 1fr;margin-inline:.75rem}.destination-ribbon img{width:110px;height:86px}.travel-member img{width:34px;height:42px}.travel-member small{display:none}.debrief-gallery{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (prefers-reduced-motion:reduce) { .travel-member{animation:none}.travel-party{transition:none}.contract-card>img{transition:none} }


.gallery-locked-note { margin: .9rem 0 0; padding: .8rem 1rem; border-radius: 14px; background: rgba(154,63,45,.08); color: var(--ink-soft); border: 1px dashed rgba(154,63,45,.28); }
.weather-front { position: absolute; z-index: 1; top: 0; bottom: 2.4rem; left: -18%; width: 62%; pointer-events: none; opacity: .8; transition: left .6s ease, opacity .3s ease; mix-blend-mode: multiply; }
.weather-front img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.weather-front.open { opacity: .48; }
.weather-front.narrow { opacity: .67; }
.weather-front.closing { opacity: .86; }
.weather-window { display: grid; grid-template-columns: minmax(0,1fr) minmax(140px,.28fr); gap: 1rem; align-items: center; margin: .75rem 0 0; padding: .85rem 1rem; border-radius: 16px; background: #e7e1c7; border: 1px solid #b8aa86; box-shadow: 0 8px 22px rgba(31,51,47,.12); }
.weather-window strong { display:block; font-family:var(--font-display); font-size:1.1rem; }
.weather-window p { margin:.2rem 0 0; color:var(--ink-soft); font-size:.82rem; line-height:1.45; }
.weather-window.narrow { border-color:#aa7c3c; background:#efe1ba; }
.weather-window.closing { border-color:#9f4438; background:#edd3c3; }
.weather-window-meter { height: 12px; border-radius: 999px; overflow: hidden; background: rgba(29,45,43,.16); }
.weather-window-meter span { display:block; height:100%; border-radius:inherit; background: linear-gradient(90deg,#2f7359,#c8923c); transition:width .45s ease; }
.weather-window.closing .weather-window-meter span { background: linear-gradient(90deg,#9f4438,#c8923c); }

.gallery-screen { background: var(--paper); }
.gallery-layout { display:grid; grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr); gap:1.25rem; align-items:start; }
.gallery-index { position:sticky; top:1rem; max-height:calc(100vh - 130px); overflow:auto; }
.archive-list { display:grid; gap:.65rem; }
.archive-row { display:grid; grid-template-columns:84px 1fr; gap:.75rem; align-items:center; width:100%; padding:.65rem; text-align:left; border-radius:14px; border:1px solid rgba(69,75,58,.18); background:rgba(255,255,255,.52); color:var(--ink); }
.archive-row img { width:84px; height:62px; object-fit:cover; border-radius:10px; }
.archive-row strong,.archive-row small { display:block; }
.archive-row small { margin-top:.22rem; color:var(--ink-soft); line-height:1.35; }
.archive-row.selected { border-color:var(--gold); box-shadow:0 0 0 2px rgba(200,146,60,.18); background:#fff8e7; }
.gallery-viewer { padding:clamp(1rem,2.4vw,2rem); min-height:620px; }
.gallery-viewer-head { display:flex; justify-content:space-between; gap:1rem; align-items:start; margin-bottom:1rem; }
.gallery-viewer-head p { color:var(--ink-soft); max-width:42rem; }
.gallery-team { display:flex; gap:.4rem; flex-shrink:0; }
.gallery-team img { width:54px; height:68px; object-fit:cover; border-radius:10px; border:2px solid #d2bc86; }
.gallery-archive-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.empty-gallery { min-height:440px; display:grid; place-items:center; align-content:center; text-align:center; color:var(--ink-soft); }

@media (max-width: 900px) {
  .gallery-layout { grid-template-columns:1fr; }
  .gallery-index { position:relative; top:auto; max-height:none; }
  .gallery-archive-grid { grid-template-columns:1fr; }
  .weather-window { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) { .weather-front, .weather-window-meter span { transition:none; } }
.reduced-motion .weather-front { transition:none; }

/* Pass 06 — sponsor confidence, member rapport and independent fieldwork */
.legacy-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.legacy-art { float:right; width:132px; margin:0 0 .55rem .8rem; }
.legacy-art img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; border:1px solid #c7ad76; box-shadow:0 8px 18px rgba(66,45,24,.16); }
.sponsor-list,.relationship-list { display:grid; gap:.55rem; margin-top:.8rem; clear:both; }
.sponsor-row,.relationship-row { display:flex; gap:.65rem; align-items:center; justify-content:space-between; padding:.6rem .68rem; border-radius:12px; border:1px solid rgba(63,75,59,.14); background:rgba(255,255,255,.48); }
.sponsor-row span,.relationship-row > span:last-child { min-width:0; }
.sponsor-row strong,.sponsor-row small,.relationship-row strong,.relationship-row small { display:block; }
.sponsor-row small,.relationship-row small { margin-top:.14rem; color:var(--ink-soft); font-size:.72rem; }
.standing { flex:0 0 auto; padding:.25rem .5rem; border-radius:999px; font-style:normal; font-size:.68rem; font-weight:900; background:#e6dcc2; color:var(--ink-soft); }
.standing-1,.standing-2,.standing-3 { background:#d9ead7; color:#275b43; }
.standing--1,.standing--2 { background:#eed7cc; color:#8a3f33; }
.relationship-faces { display:flex; width:66px; flex:0 0 66px; }
.relationship-faces img { width:42px; height:50px; object-fit:cover; border-radius:9px; border:2px solid #f8edce; box-shadow:0 3px 8px rgba(45,36,24,.16); }
.relationship-faces img + img { margin-left:-17px; }
.free-brief-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.free-brief-card { display:grid; grid-template-columns:minmax(150px,.62fr) minmax(0,1.38fr); gap:1rem; align-items:stretch; padding:.7rem; min-height:210px; text-align:left; border-radius:18px; border:2px solid transparent; background:#173d3b; color:#f8efd9; box-shadow:0 14px 32px rgba(26,45,42,.18); overflow:hidden; }
.free-brief-card > img { width:100%; height:100%; min-height:190px; object-fit:cover; border-radius:12px; }
.free-brief-card > span { align-self:center; padding:.45rem .6rem .45rem 0; }
.free-brief-card h3 { margin:.25rem 0 .45rem; color:#fff7df; }
.free-brief-card p { margin:.15rem 0 .6rem; color:#dcd5bf; line-height:1.45; }
.free-brief-card small { color:#efca7a; font-weight:800; line-height:1.45; }
.free-brief-card.selected { border-color:var(--gold-light); box-shadow:0 0 0 3px rgba(229,184,91,.22),0 18px 38px rgba(26,45,42,.24); }
.rapport-line { display:block; margin-top:.55rem; padding-top:.5rem; border-top:1px dashed rgba(68,74,56,.24); color:#795c32; font-weight:800; line-height:1.4; }
.team-chemistry { margin:1rem 0 0; }
.team-chemistry > strong { display:block; margin:.2rem 0 .55rem; font-family:var(--font-display); font-size:1.12rem; color:var(--club); }
.team-chemistry > div { display:flex; flex-wrap:wrap; gap:.4rem; }
.team-chemistry > div span { padding:.28rem .5rem; border-radius:999px; background:#e8dcc0; color:var(--ink-soft); font-size:.72rem; font-weight:800; }
.result-consequence { margin-top:1rem; text-align:left; }
.result-consequence h3 { margin:.2rem 0 .35rem; }
.result-consequence p { margin:.2rem 0; color:var(--ink-soft); }
.result-consequence small { color:var(--ink-soft); line-height:1.45; }
.relationship-result-list { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.7rem; }
.relationship-result-list span { padding:.45rem .6rem; border-radius:11px; background:#e8dcc0; color:var(--ink-soft); font-size:.75rem; }
.relationship-result-list strong { color:var(--club); }
@media (max-width:900px) { .legacy-grid,.free-brief-grid { grid-template-columns:1fr; } }
@media (max-width:620px) { .free-brief-card { grid-template-columns:1fr; }.free-brief-card > img { min-height:155px; max-height:190px; }.legacy-art { width:105px; } }