/* Last stylesheet: semantic sizes override the prototype's earlier compact pass. */
:root {
  --type-ui-micro: 11px;
  --type-ui-body: 14px;
  --type-ui-control: 15px;
  --type-ui-emphasis: 20px;
  --type-display-event: 40px;
  --type-display-hero: 80px;
  --type-narrative-accent: 25px;
  --type-narrative-title: 44px;
}

/* Warbler is the only information face. Keep the most constrained UI compact. */
body { font-size: var(--type-ui-body); }
.journal p, .tower-card #selection-text, .charm-tooltip p, .overlay-inner p,
.lab .muted, .type-system-entry .muted { font-family: var(--font-ui); font-size: var(--type-ui-body); line-height: 1.4; }
.tiny, .wave-forecast .tiny, .wave-forecast strong, .tower-card #tower-stats,
.tower-card #ring-help, .charm-tooltip .item-type,
.charm-tooltip small { font-family: var(--font-ui); font-size: var(--type-ui-micro); line-height: 1.35; }
.charm-tooltip .item-lore { font-family: var(--font-ui); font-size: 11px; font-style: italic; line-height: 1.45; }
.map-hud .wave-buttons button, .run-clock, .tower-card .primary,
.tower-card .tower-actions button, .lab button, .lab select,
.lab input[type=text], .lab label, .lab summary, .overlay-inner .primary {
  font-family: var(--font-ui); font-size: var(--type-ui-control); line-height: 1.25;
}
.hud-pill b, #token-hud b, .card-heading b { font-family: var(--font-ui); font-size: calc(var(--type-ui-control) + 2px); }
.card-heading strong { font-family: var(--font-ui); font-size: var(--type-ui-emphasis); }
.final-score-value { font-family: var(--font-ui); font-size: clamp(42px, 6vw, 70px); }
.final-score-card h3 { font-family: var(--font-ui); font-size: var(--type-ui-emphasis); }

/* These are Regular-only, fine-stroked display faces: scale, space, and contrast. */
#welcome-title { font-family: var(--font-event); font-size: clamp(54px, var(--type-display-hero), 10vw); line-height: 1.04; letter-spacing: 0; }
#welcome-title em { font-family: var(--font-nature); font-size: .5em; line-height: 1.12; letter-spacing: 0; }
.wordmark, .event-moment h2, .round-summary h2, .final-score-card h2 {
  font-family: var(--font-event); font-size: clamp(32px, var(--type-display-event), 11vw);
  line-height: 1.13; letter-spacing: .01em;
}
.minimal-packing header h2, .nature-moment h2, #field-guide h2,
.loadout-warning-card h2 {
  font-family: var(--font-nature); font-size: clamp(34px, var(--type-narrative-title), 10vw);
  line-height: 1.18; letter-spacing: .01em;
}
.sack-caption > span:first-child { font-family: var(--font-nature); font-size: var(--type-narrative-accent); line-height: 1.2; }
.welcome-options button, .welcome-join button, #welcome-start,
.minimal-packing .loadout-footer .primary, .overlay-inner .primary,
.pause-menu #resume, .welcome-join #online-join {
  font-family: var(--font-ui); font-size: clamp(15px, var(--type-ui-control), 22px);
  line-height: 1.25;
}

/* The guide is a full page in the existing dev-tools modal flow. */
.type-system {
  width: min(1160px, calc(100vw - 28px)); max-width: none;
  max-height: min(92dvh, 1000px); margin: auto; padding: 0;
  overflow: auto; color: #f1e9cf; background: #17271f;
  border: 7px solid #8c875f; border-radius: 8px;
  box-shadow: 0 24px 80px #06110ecc;
  font: 400 14px/1.45 var(--font-ui); font-synthesis: none;
}
.type-system::backdrop { background: #07150fdb; backdrop-filter: blur(4px); }
.type-system-header {
  position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between;
  align-items: flex-start; gap: 20px; padding: 22px 28px 20px;
  background: #243a2b; border-bottom: 2px solid #879264;
}
.type-system h2, .type-system h3, .type-system p { margin-top: 0; }
.type-system-header h2 { font: 400 clamp(34px, 5vw, 48px)/1.15 var(--font-nature); margin: 3px 0 8px; color: #f0dda7; }
.type-system-header p:last-child { max-width: 720px; margin: 0; }
.type-kicker { font: 400 11px/1.3 var(--font-ui); letter-spacing: .08em; color: #d0dca9; }
.type-system button { font: 400 14px/1.2 var(--font-ui); white-space: normal; }
.type-system button:focus-visible, .type-system a:focus-visible, .type-system input:focus-visible { outline: 3px solid #f1d88b; outline-offset: 3px; }
.type-system-content { padding: 24px 28px 28px; }
.type-principles { padding: 20px 22px; background: #20372a; border: 1px solid #778660; }
.type-principles h3 { font: 400 24px/1.2 var(--font-nature); margin-bottom: 10px; }
.type-principles ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 30px; margin: 0; padding-left: 22px; }
.type-principles li { padding-left: 4px; }
.type-family-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 20px 0; }
.type-family { min-width: 0; padding: 20px; background: #1d3227; border: 1px solid #657957; display: flex; flex-direction: column; }
.type-family h3 { margin: 0 0 10px; line-height: 1.12; }
.type-warbler h3 { font: 400 28px/1.2 var(--font-ui); }
.type-copal h3 { font: 400 38px/1.16 var(--font-event); }
.type-wind h3 { font: 400 38px/1.16 var(--font-nature); }
.type-source { min-height: 72px; color: #d2ddc4; }
.type-sample { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 5px; min-height: 160px; margin: 5px 0 14px; padding: 14px; background: #10251c; border-left: 3px solid #c8c78a; overflow-wrap: anywhere; }
.type-sample b, .type-sample strong { font-weight: 400; }
.type-ui-preview { font-family: var(--font-ui); }
.type-ui-preview small { font-size: var(--type-ui-micro); }
.type-ui-preview span { font-size: var(--type-ui-body); }
.type-ui-preview b { font-size: var(--type-ui-control); }
.type-ui-preview strong { font-size: var(--type-ui-emphasis); }
.type-event-preview { font-family: var(--font-event); }
.type-event-preview span { font-size: var(--type-display-event); line-height: 1.14; }
.type-event-preview strong { font-size: var(--type-display-hero); line-height: 1.05; }
.type-narrative-preview { font-family: var(--font-nature); }
.type-narrative-preview span { font-size: var(--type-narrative-title); line-height: 1.18; }
.type-narrative-preview strong { font-size: var(--type-narrative-accent); line-height: 1.2; }
.type-family ul { padding-left: 19px; margin: 0 0 18px; }
.type-family li { margin: 0 0 8px; }
.type-tuners { margin-top: auto; padding-top: 14px; border-top: 1px solid #677953; }
.type-tuners label { display: flex; justify-content: space-between; gap: 12px; margin: 9px 0 3px; font: 400 13px/1.3 var(--font-ui); }
.type-tuners output { color: #f0d990; font-variant-numeric: tabular-nums; }
.type-tuners input { display: block; width: 100%; margin: 0 0 10px; accent-color: #d7e19a; }
.type-use { margin: 8px 0; color: #e6d79e; }
.type-family a { color: #d5e4ae; text-decoration: underline; text-underline-offset: 3px; }
.type-system-footer { display: flex; gap: 20px; align-items: center; justify-content: space-between; padding: 18px 0 0; border-top: 1px solid #657957; }
.type-system-footer p { margin: 0; max-width: 750px; }
.type-system-entry h3 { font: 400 23px/1.15 var(--font-nature); margin: 0 0 6px; }
.type-system-entry button { width: 100%; margin-top: 10px; }
@media (max-width: 930px) {
  .type-family-grid { grid-template-columns: 1fr; }
  .type-family { display: block; }
  .type-source { min-height: 0; }
  .type-sample { min-height: 92px; }
}
@media (max-width: 620px) {
  /* Give the larger, fine-stroked wordmark a full screen, not the map's short 8:5 strip. */
  .welcome-screen { position: fixed; inset: 0; min-height: 100dvh; max-height: 100dvh; }
  #welcome-title { font-size: clamp(54px, var(--type-display-hero), 10vw); line-height: .94; margin: 5px 0 10px; }
  #welcome-title em { margin: 3px auto 7px; }
  .type-system { width: calc(100vw - 12px); max-height: 96dvh; border-width: 4px; }
  .type-system-header { position: static; padding: 16px; }
  .type-system-content { padding: 15px; }
  .type-principles { padding: 15px; }
  .type-principles ol { grid-template-columns: 1fr; }
  .type-family { padding: 16px; }
  .type-system-footer { display: block; }
  .type-system-footer button { width: 100%; margin-top: 12px; }
}