/* Hearthold menu additions: scenario picker, goals, outcome overlay, save slots. Loaded after styles.css. */
.dialog { max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.dialog.wide { width: min(520px, 100%); }
.dialog h2 { margin: 0 0 4px; }
.picker-list { display: grid; gap: 8px; margin: 8px 0; max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pick { padding: 10px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.pick.on { border-color: var(--good); background: rgba(120, 180, 90, 0.12); }
.pick h4 { margin: 0 0 4px; }
.pick p { margin: 4px 0; }
.goal-bullets { margin: 4px 0; padding-left: 20px; }
.goal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 0; overflow-wrap: anywhere; }
.goal.fail { color: var(--muted); }
.goal.fail.hit { color: #ff8a7a; font-weight: 600; }
.goal-meter { width: 80px; flex: none; }
.goal .tick { width: 1.2em; }
.goal.done .tick { color: var(--good); }
#outcome { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.7); }
#outcome.hidden { display: none; }
.outcome.won h2 { color: var(--good); }
.outcome.lost h2 { color: #ff8a7a; }
.slot { padding: 10px; border: 1px solid var(--line); border-radius: 12px; margin: 8px 0; }
.slot h4 { margin: 0 0 4px; }
.menu-danger { margin-top: 18px; padding-top: 10px; border-top: 1px dashed var(--danger); }
.paste { width: 100%; min-height: 96px; box-sizing: border-box; border-radius: 8px; border: 1px solid var(--line); background: #141a12; color: var(--ink); font: inherit; -webkit-user-select: text; user-select: text; }
@media (max-width: 360px) { .dialog { padding: 12px; } .goal-meter { width: 56px; } }

/* Title screen: the live map stays visible, dimmed so the name reads over a bright summer map. */
#title { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(ellipse at center, rgba(12, 18, 10, 0.78) 0%, rgba(12, 18, 10, 0.5) 100%); }
#title.hidden { display: none; }
#menu { z-index: 25; }
.title-card { width: min(360px, 100%); text-align: center; max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.title-card h1 { margin: 0; font-size: 44px; letter-spacing: 1px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); }
.title-card .tagline { margin: 4px 0 18px; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9); }
.title-card .btn-row { justify-content: center; }
.title-card .btn-row .btn { flex: 1 1 140px; min-height: 44px; }
.title-resume { margin: -2px 0 10px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); }
.title-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
#outcome { background: rgba(0, 0, 0, 0.5); }
.music-row { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.music-row .btn { flex: 0 0 auto; min-height: 44px; }
.music-volume { flex: 1 1 auto; min-width: 0; min-height: 44px; accent-color: #d9a441; }

/* Custom game page: segmented choice rows, the summary line, a validation message. */
.custom-row { margin: 6px 0; }
.custom-row h4 { margin: 8px 0 2px; }
.custom-row .btn-row.seg { margin: 4px 0; gap: 6px; }
.custom-row .seg .btn { flex: 1 1 0; min-width: 0; padding: 0 8px; }
.custom-row .seg .btn:disabled { opacity: 0.4; }
.custom-summary { font-weight: 600; margin: 2px 0 6px; }
.custom-problem { color: #ff8a7a; font-weight: 600; }
.custom-pick { border-style: dashed; }