/* Tilemori typography. Font files and their licenses are served locally.
   Keep Maplestory's original Light/Bold files; do not synthesize other weights. */
@font-face {
  font-family: 'Maplestory';
  src: url('/fonts/maplestory-light.ttf') format('truetype');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Maplestory';
  src: url('/fonts/maplestory-bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/pretendard-variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --font-ui: 'Pretendard', system-ui, 'Segoe UI', sans-serif;
  --font-game: 'Maplestory', var(--font-ui);
  --text-caption: 12px;
  --text-small: 13px;
  --text-body: 14px;
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: 1.5;
  font-synthesis: none;
}
input, select, textarea { font-family: var(--font-ui); }

/* Characterful titles and game commands. Information stays in the UI face. */
.brand h1, .world-heading h2, .inventory-heading h2, .places-heading h2,
dialog h2, .loading strong, .moment strong {
  font-family: var(--font-game);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
}
.brand h1 { font-size: 26px; white-space: nowrap; }
.world-heading h2 { font-size: 34px; }
.inventory-heading h2, .places-heading h2 { font-size: 20px; }
.controls-dock .tool, .material-choice .material-name, .material-colors-heading strong, .inventory-filters button, .inventory-types button,
.brush-sizes button, .world-links > button, .selection-options > button, .material-pick, #precision-toggle, #scope-toggle, #edit-back,
#line-reset, #line-apply, .primary-button, .secondary-button,
.place-jump strong, .marker-entry strong, .first-dig-hint button,
.inventory-open #bag-material {
  font-family: var(--font-game);
  font-weight: 300;
  letter-spacing: 0;
}
.controls-dock .tool { font-size: var(--text-body); }
.material-choice .material-name { font-size: 15px; }
.material-choice[data-family="wool"] .material-name,
.material-choice[data-family="concrete"] .material-name,
.material-choice[data-family="terracotta"] .material-name { font-size: 13px; white-space: nowrap; padding: 0; }
.inventory-filters button, .brush-sizes button, .world-links > button,
.selection-options > button, #line-reset, #line-apply,
.primary-button, .secondary-button, .first-dig-hint button {
  font-size: var(--text-body);
  line-height: 1.4;
}
.inventory-filters button[aria-pressed=true], .brush-sizes button[aria-pressed=true] {
  font-weight: 300;
}
.place-jump strong, #places-dialog .place-jump strong { font-size: 15px; }
.inventory-open #bag-material { font-size: 15px; }
.controls-dock .bag { min-width: 100px; max-width: 110px; }
.controls-dock .tool { padding: 8px 5px; }
.controls-dock .tool > span { line-height: 1.4; }

/* Caption sizes apply equally on desktop and mobile. */
.brand span, .connection, .quiet-button, .world-heading p,
.world-heading-meta .eyebrow, .map-mode, .map-caption, .tile-detail,
.input-hint, .section-label, .section-label > span:not(.live-dot),
.together .share-button, .together .player, .together p,
.inventory-filters button, #inventory-total, #inventory-selected,
.inventory-note, .inventory-empty, .places-heading > button,
.place-jump span, .place-jump small, #places-dialog .place-jump span,
#places-dialog .place-jump small, .activity li, .activity li small,
.world-footer, .brush-heading, #brush-summary,
.account-button > span, .bag > span, .selection-info span,
.onboarding p, .moment span, .marker-entry span,
dialog .help-note, dialog li span {
  font-size: var(--text-caption);
  line-height: 1.5;
}
.world-heading-meta .eyebrow { letter-spacing: .3px; }
.map-mode { font-size: 11px; }
.section-label, .activity li, .inventory-note, .together p,
.place-jump span, .place-jump small { color: #64755e; }
.activity li small, .world-footer { color: #71816a; }
.account-button strong, .together-title h2,
.selection-bar .selection-info strong { font-size: var(--text-small); }
.account-button strong, .account-energy strong, .tile-detail, .map-caption {
  font-variant-numeric: tabular-nums;
}
.together-title strong { font-size: 23px; }
.together-heading { flex-wrap: wrap; }
.places-heading { flex-wrap: wrap; }
.selection-options > button { min-height: 40px; padding: 7px 8px; }
#line-reset, #line-apply { font-weight: 300; }
#edit-more, #edit-close { font-family: var(--font-ui); font-weight: 400; }
dialog p, dialog li strong { font-size: var(--text-body); line-height: 1.7; }
dialog h2 { padding-right: 12px; }
.onboarding strong { font-size: var(--text-small); }

@media(max-width:760px) {
  .brand h1 { font-size: 22px; }
  .brand span { font-size: 11px; }
  .world-heading h2 { font-size: 26px; }
  .world-heading-meta .eyebrow { font-size: 11px; }
  .world-links > button { font-size: var(--text-small); padding: 8px; }
  .controls-dock .tool { font-size: var(--text-small); padding: 7px 3px; }
  .controls-dock .tool > span { overflow-wrap: normal; word-break: keep-all; }
  .controls-dock .bag { min-width: 77px; max-width: 82px; padding-left: 6px; }
  .inventory-open #bag-material { font-size: var(--text-body); max-width: 68px; }
  .bag > span { font-size: 11px; }
  .selection-options > button { font-size: var(--text-small); padding: 6px; }
  .selection-options .undo-button { font-size: var(--text-caption); }
  .account-button { min-width: 84px; }
  .account-button strong { font-size: var(--text-caption); }
  .account-button > span { font-size: 11px; }
  .header-actions { gap: 5px; }
  .brand { flex-shrink: 0; }
  .header-actions #help-open { font-size: 0; width: 36px; flex: 0 0 36px; }
  .header-actions #help-open span { font-size: 12px; }
  #place-name, #capital-search { font-size: 16px; }
  .input-hint { font-size: 11px; }
  .brush-sizes button { padding: 6px; }
  .map-mode { font-size: 11px; }
  #inventory-dialog .inventory-heading h2 { font-size: 22px; }
}
@media(max-width:370px) {
  .brand { gap: 7px; }
  .brand h1 { font-size: 21px; }
  .world-heading-meta .map-mode { display: none; }
  .selection-options > button { font-size: var(--text-caption); }
  .controls-dock .tool { font-size: var(--text-small); }
}
@media(max-width:760px) and (max-height:650px) {
  .world-heading h2 { font-size: 23px; }
}