/* The front door: the same courtyard, before the first card is dealt. */
.main-menu,
.story-screen {
  width: min(100%, 1420px);
  min-height: calc(100svh - 178px);
  margin: 0 auto;
  padding: clamp(34px, 5.3vh, 72px) 5vw;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(330px, .9fr);
  align-items: center;
  gap: clamp(38px, 7vw, 110px);
}

.menu-intro {
  position: relative;
  isolation: isolate;
  padding: 32px 0;
}

.menu-intro::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -38px -45px;
  background: radial-gradient(ellipse at 36% 55%, #0a1b19ad 8%, transparent 72%);
  pointer-events: none;
}

.menu-intro > .eyebrow,
.story-copy > .eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #d5c6a6;
  font-size: 11px;
  letter-spacing: .19em;
}

.menu-intro > .eyebrow::before,
.story-copy > .eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  flex: 0 0 32px;
  background: var(--rust);
}

.menu-intro h1 {
  margin: 29px 0 30px;
  font-size: clamp(100px, 12.9vw, 184px);
  line-height: .91;
  font-weight: 600;
  letter-spacing: -.055em;
  color: #e3dbc2;
  text-shadow: 0 2px 0 #514d3c, 0 10px 38px #071916b0;
  transform: rotate(-1deg);
}

.menu-intro h1 em {
  display: block;
  margin-top: 23px;
  color: #c4875e;
  font-family: Georgia, serif;
  font-size: clamp(25px, 2.7vw, 38px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  letter-spacing: -.035em;
  text-shadow: 0 3px 12px #0a1c19;
}

.menu-tagline {
  max-width: 420px;
  margin: 0;
  color: #c0c6b4;
  font-size: 15px;
  line-height: 1.9;
  text-wrap: pretty;
}

.menu-location {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(38px, 7vh, 74px);
  color: #a5ad96;
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: .18em;
}

.menu-location::before {
  content: '◆';
  margin-right: 3px;
  color: var(--rust);
  font-size: 9px;
}

.menu-location span { color: #8f9e8b; }

.menu-panel {
  position: relative;
  padding: 30px;
  border: 1px solid #b8b18a30;
  background: linear-gradient(145deg, #21302aed, #111e1cf5);
  box-shadow: 0 22px 60px #06120f61;
}

.menu-panel::before,
.menu-dialog::before {
  content: '';
  position: absolute;
  left: 30px;
  top: -1px;
  width: 42px;
  height: 2px;
  background: var(--rust);
}

.menu-panel > h2 { margin: 6px 0 24px; font-size: 31px; }
.menu-panel > .eyebrow { font-size: 10px; letter-spacing: .16em; }
.version-options { display: grid; gap: 10px; margin-bottom: 24px; }

.version-card {
  position: relative;
  width: 100%;
  min-height: 108px;
  padding: 17px 16px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 6px 14px;
  align-items: start;
  border: 1px solid #b5b5942c;
  background: #14211d6e;
  text-align: left;
  transition: border-color .18s, background .18s, transform .18s;
}

.version-card:hover {
  background: #29382c8a;
  border-color: #b5b59469;
  transform: translateX(2px);
}

.version-card[aria-pressed="true"] {
  border-color: #c58e5b;
  background: linear-gradient(105deg, #98724724, #a57d4d0b);
  box-shadow: inset 3px 0 0 #bc8252;
}

.version-number {
  grid-row: 1 / 3;
  padding-top: 2px;
  color: #657d6b;
  font-family: var(--display);
  font-size: 31px;
  font-weight: 400;
  line-height: 1;
}

.version-card[aria-pressed="true"] .version-number { color: #bc9064; }
.version-content { display: block; min-width: 0; }
.version-content b { display: block; color: #ddd6ba; font-size: 16px; font-weight: 500; line-height: 1.3; }
.version-content small { display: block; margin-top: 6px; color: #9eac9b; font-size: 12px; line-height: 1.65; }
.version-state { grid-column: 2; color: #b2956c; font-size: 9px; line-height: 1.6; letter-spacing: .12em; }
.version-card[aria-pressed="true"] .version-state { color: #d3b07d; }
.menu-panel #menu-play { min-height: 52px; }

.menu-secondary {
  min-height: 44px;
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #a4af8e35;
  background: #10221b33;
  color: #b6c1ad;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .04em;
  transition: color .18s, background .18s, border-color .18s;
}

.menu-secondary:hover { color: var(--ink); background: #30423266; border-color: #acb3916b; }
.menu-panel > .menu-secondary { width: 100%; margin-top: 10px; }
.menu-note { margin: 19px 0 0; color: #8a9b89; font-size: 11px; line-height: 1.7; text-wrap: pretty; }

.story-screen { grid-template-columns: minmax(0, 1.2fr) minmax(260px, .75fr); }
.story-copy { max-width: 660px; }
.story-copy h1 { margin: 23px 0; font-size: clamp(53px, 6.1vw, 86px); line-height: 1.09; text-wrap: balance; }
.story-lead { max-width: 550px; color: #d1c3a5; font-family: Georgia, serif; font-size: 20px; font-style: italic; line-height: 1.6; }
.story-paragraphs { max-width: 550px; margin-top: 23px; }
.story-paragraphs p { margin: 14px 0; color: #afbba9; font-size: 14px; line-height: 1.85; text-wrap: pretty; }
.story-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin-top: 29px; }
.story-actions > .primary { width: auto; min-width: 230px; gap: 28px; }
.story-actions > .menu-secondary { flex: 0 1 auto; }

.story-dossier {
  position: relative;
  width: 100%;
  max-width: 360px;
  justify-self: center;
  padding: 13px 13px 20px;
  background: #16241fe8;
  border: 1px solid #b7ae843b;
  box-shadow: 0 20px 50px #07150f88;
  transform: rotate(1.2deg);
}

.story-dossier::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 38%;
  width: 27%;
  height: 18px;
  background: #b8b08736;
  transform: rotate(-4deg);
  z-index: 1;
}

.story-dossier > .portrait { width: 100%; aspect-ratio: .96; filter: saturate(.7) contrast(1.04); }
.story-dossier h2 { margin: 20px 10px 7px; font-size: 31px; }
.story-dossier > p { margin: 0 10px; color: #9dac94; font-size: 12px; line-height: 1.7; }
.story-chapter { margin: 21px 10px 0; padding-top: 14px; border-top: 1px solid var(--line); color: #bc9d71; font-size: 10px; line-height: 1.6; letter-spacing: .12em; }

.menu-dialog {
  width: min(510px, calc(100% - 30px));
  padding: 32px;
  border-color: #a7a37f77;
  background: linear-gradient(140deg, #24352b, #13221e);
}

.menu-dialog::before { top: 0; }
.menu-dialog > .eyebrow { padding-right: 14px; font-size: 10px; letter-spacing: .14em; }
.menu-dialog > h2 { margin: 8px 0 13px; padding-right: 18px; font-size: 34px; }
.menu-dialog > p { margin: 0; color: #aebaa5; font-size: 13px; }
.menu-dialog .close-modal { width: 38px; height: 38px; top: 6px; right: 7px; }
.speed-setting { min-width: 0; padding: 0; margin: 27px 0 12px; border: 0; }
.speed-setting legend { padding: 0; margin-bottom: 12px; color: #d4c9a9; font-size: 11px; letter-spacing: .1em; }
.speed-options { display: flex; gap: 7px; }
.speed-options button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 47px;
  padding: 10px 6px;
  border: 1px solid #a5ae8e42;
  background: #0e1d1880;
  color: #a8b29e;
  font-size: 12px;
  line-height: 1.5;
  transition: background .18s, border-color .18s, color .18s;
}
.speed-options button:hover { color: #e0d9bf; border-color: #b9aa7777; }
.speed-options button[aria-pressed="true"] { color: #e2ce9f; border-color: #c09563; background: #b6844d26; box-shadow: inset 0 -2px 0 #b88653; }
.menu-dialog #speed-description { min-height: 42px; margin: 0; color: #91a18e; font-size: 12px; line-height: 1.7; }
.menu-dialog-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 25px; }
.menu-dialog-actions > button { width: 100%; min-height: 46px; }
.menu-dialog-actions > .primary { padding: 15px 18px; font-size: 12px; }

.setup-back { display: inline-flex; align-items: center; gap: 8px; width: fit-content; min-height: 40px; margin: 0 0 15px; padding: 7px 0; border: 0; background: none; color: #a2b09a; font-size: 12px; line-height: 1.4; }
.setup-back:hover { color: #e0d4b6; }
.version-badge { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; padding: 5px 8px; border: 1px solid #b5966159; color: #c4a576; font-size: 10px; line-height: 1.4; letter-spacing: .06em; vertical-align: middle; }

.menu-intro, .menu-panel, .story-copy, .story-dossier { animation: menu-reveal .6s ease both; }
.menu-panel, .story-dossier { animation-delay: .1s; }
@keyframes menu-reveal { from { opacity: 0; translate: 0 9px; } to { opacity: 1; translate: 0 0; } }

@media (min-width: 801px) and (max-height: 760px) {
  .main-menu, .story-screen { padding-top: 26px; padding-bottom: 26px; min-height: calc(100svh - 151px); }
  .menu-intro { padding: 12px 0; }
  .menu-intro h1 { margin-top: 22px; font-size: clamp(100px, 11vw, 153px); }
  .menu-location { margin-top: 34px; }
  .menu-panel { padding: 24px; }
  .menu-panel > h2 { margin-bottom: 18px; }
  .version-card { min-height: 96px; padding: 13px 15px; }
  .version-options { margin-bottom: 18px; }
  .story-dossier { max-width: 300px; }
  .story-copy h1 { font-size: 63px; }
}

@media (max-width: 1000px) {
  .main-menu, .story-screen { gap: 35px; padding-right: 4vw; padding-left: 4vw; }
  .main-menu { grid-template-columns: minmax(0, 1fr) minmax(320px, .95fr); }
  .menu-panel { padding: 25px; }
  .menu-intro h1 { font-size: clamp(86px, 12.3vw, 126px); }
  .menu-tagline { font-size: 14px; }
  .story-copy h1 { font-size: 61px; }
  .story-lead { font-size: 18px; }
}

@media (max-width: 760px) {
  .main-menu, .story-screen { min-height: auto; max-width: 560px; display: flex; flex-direction: column; align-items: stretch; gap: 28px; padding: 30px 5vw 35px; }
  .menu-intro { padding: 5px 0 0; }
  .menu-intro::before { inset: -25px -4vw; }
  .menu-intro h1 { margin: 20px 0 22px; font-size: clamp(84px, 21vw, 126px); line-height: .92; }
  .menu-intro h1 em { margin-top: 14px; font-size: 26px; }
  .menu-intro > .eyebrow, .story-copy > .eyebrow { font-size: 10px; letter-spacing: .14em; }
  .menu-tagline { max-width: 420px; font-size: 13px; line-height: 1.8; }
  .menu-location { margin-top: 20px; font-size: 9px; }
  .menu-panel { padding: 25px; }
  .menu-panel > h2 { font-size: 28px; margin-bottom: 18px; }
  .version-card { min-height: 103px; }
  .menu-note { margin-top: 15px; }
  .story-screen { gap: 32px; }
  .story-copy h1 { margin: 20px 0; font-size: clamp(46px, 10.5vw, 62px); }
  .story-lead { font-size: 18px; }
  .story-paragraphs p { font-size: 13px; }
  .story-actions { margin-top: 25px; }
  .story-actions > .primary { min-width: 0; flex: 1 1 100%; }
  .story-actions > .menu-secondary { width: 100%; }
  .story-dossier { align-self: center; max-width: 300px; }
  .setup-back { margin-bottom: 10px; }
}

@media (max-width: 390px) {
  .menu-panel { padding: 21px 17px; }
  .version-card { padding: 14px 12px; grid-template-columns: 30px minmax(0, 1fr); gap: 6px 10px; }
  .version-number { font-size: 27px; }
  .version-content b { font-size: 15px; }
  .menu-dialog { padding: 29px 20px 23px; }
  .speed-options { gap: 5px; }
  .speed-options button { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-intro, .menu-panel, .story-copy, .story-dossier { animation: none; }
  .version-card, .menu-secondary, .speed-options button { transition: none; }
  .version-card:hover { transform: none; }
}

.menu-dialog [hidden] { display:none !important; }
.game-shell [data-hint-only][hidden] { display:none !important; }
.hand-caption { justify-content:flex-end; }
.exit-dialog .menu-dialog-actions { margin-top:24px; }
.exit-dialog [data-exit="leave"] { font-size:11px; letter-spacing:.04em; }
.speed-options b, .speed-options small { display:block; }
.speed-options b { font-weight:500; }
.speed-options small { color:#a18b64; font-size:11px; }
.story-copy > .text-button { margin-bottom:25px; }
.story-dossier > .eyebrow { display:block; margin:20px 10px 0; font-size:9px; }
.story-dossier > .eyebrow + h2 { margin-top:8px; }
.story-chapter > span, .story-chapter > b { display:block; }
.story-chapter > b { margin-top:12px; color:#d1c3a5; font-size:17px; font-weight:400; letter-spacing:0; }
.story-chapter > p { font-size:12px; color:#aebaa5; letter-spacing:0; }
.story-chapter > small { font-size:10px; letter-spacing:0; }
@media(max-width:580px) {
 .masthead nav { gap:12px; }
 #settings-btn, #rules-btn { font-size:10px; letter-spacing:0; }
 #settings-btn { white-space:nowrap; }
}
@media(max-width:580px) {
 .masthead { margin:0 12px; gap:10px; }
 .masthead .brand { font-size:25px; gap:7px; }
 .masthead .brand-suit { font-size:30px; }
 .masthead nav { gap:10px; }
 .masthead .text-button { gap:6px; }
 #settings-btn span, #rules-btn span { font-size:16px; }
}