/* Layer: 09-overrides.css
 * late fixups; order-dependent, must stay last
 *
 * Split out of app.css, which had grown to 8346 lines. Loaded in
 * order by app.css; do not reorder the @import lines there. Several rules in
 * the later layers override earlier ones by source order alone.
 */
/* —— Map / HUD / news polish (feedback 1–6) —— */
.map-modes--rail .mode-btn {
  white-space: normal;
  overflow: hidden;
  align-items: flex-start;
  padding: 6px 8px;
  min-height: 0;
  font-size: 0.98rem;
  line-height: 1.15;
}

.map-modes--rail .mode-btn__label {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.15;
}

.map-modes--rail .mode-btn__icon {
  margin-top: 1px;
}

.app-header__tagline {
  display: none !important;
}

.app-header__brand.rpg-plaque,
.app-header__brand {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.app-header__brand--sign {
  min-height: 2.75rem;
  overflow: visible;
}

.app-header__row {
  min-height: 3rem;
  align-items: center;
}

.app-header__brand--sign h1 {
  margin: 0;
  line-height: 1.2;
}

.app-header__brand h1 {
  margin: 0;
  line-height: 1.15;
}

/* —— HUD fixup: map size, vertical threats, news fill, schedule —— */
.map-fit {
  display: contents;
}

.map-root {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 3%;
  box-sizing: border-box;
}

.map-root svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain !important;
  overflow: hidden;
  background: transparent;
}

.map-hud__board--v3 .hud-mid {
  align-items: stretch;
  grid-template-columns: minmax(110px, 148px) minmax(0, 1.05fr) minmax(240px, 1.55fr) minmax(0, 1.05fr) minmax(110px, 148px);
}

html:not([data-layout='mobile']) .map-hud__board--v3 .hud-mid {
  grid-template-columns: minmax(110px, 148px) minmax(0, 1.05fr) minmax(240px, 1.55fr) minmax(0, 1.05fr) minmax(110px, 148px);
  align-items: stretch;
}

.map-hud__board--v3 .hud-threats--inline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-items: stretch;
  align-self: stretch;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  max-width: 100%;
}

.map-hud__board--v3 .hud-threat,
html:not([data-layout='mobile']) .map-hud__board--v3 .hud-threat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 3px 6px;
  height: 100%;
  max-height: 100%;
  min-height: 0 !important;
  padding: 4px 5px !important;
  justify-content: stretch !important;
  align-content: stretch;
  box-sizing: border-box;
  overflow: hidden;
}

.map-hud__board--v3 .hud-threat__meter {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 2.1em;
  min-width: 2.1em;
  height: 100%;
  min-height: 0;
  align-self: stretch;
  overflow: hidden;
}

.map-hud__board--v3 .hud-threat__label {
  grid-column: 1 / -1;
  grid-row: 1;
  font-family: var(--font-pixel, monospace);
  font-size: 0.95rem;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-hud__board--v3 .hud-threat__track,
html:not([data-layout='mobile']) .map-hud__board--v3 .hud-threat__track,
html:not([data-layout='mobile']) .hud-threat__track {
  position: relative;
  flex: 1 1 auto;
  width: 10px !important;
  min-width: 10px;
  max-width: 10px;
  min-height: 0 !important;
  height: auto !important;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-self: center;
  overflow: hidden;
  border: 2px solid var(--border, #4a2c14);
  border-radius: 4px;
  background: #3a2818;
  box-shadow: var(--bevel-in);
}

.map-hud__board--v3 .hud-threat__fill {
  position: relative;
  z-index: 1;
  width: 100% !important;
  min-height: 2px;
  border-radius: 0;
  transition: height 0.35s ease;
}

.map-hud__board--v3 .hud-threat__pct {
  flex: 0 0 auto;
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-clerk, monospace);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  letter-spacing: -0.03em;
}

.map-hud__board--v3 .hud-threat__face {
  grid-column: 2;
  grid-row: 2;
  align-self: stretch;
  justify-self: stretch;
  width: auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0;
  margin-top: -2px;
  overflow: hidden;
  color: var(--ink, #2b1a0e);
}

.map-hud__board--v3 .hud-threat--lorent .hud-threat__face {
  color: #3a2214;
}

.map-hud__board--v3 .hud-threat--gawed .hud-threat__face {
  color: #2a3340;
}

.map-hud__board--v3 .hud-threat--green .hud-threat__face,
.map-hud__board--v3 .hud-threat--yellow .hud-threat__face,
.map-hud__board--v3 .hud-threat--orange .hud-threat__face,
.map-hud__board--v3 .hud-threat--red .hud-threat__face,
.map-hud__board--v3 .hud-threat--burgundy .hud-threat__face {
  color: inherit;
}

.map-hud__board--v3 .hud-threat--lorent.hud-threat--green .hud-threat__face,
.map-hud__board--v3 .hud-threat--lorent.hud-threat--yellow .hud-threat__face,
.map-hud__board--v3 .hud-threat--lorent.hud-threat--orange .hud-threat__face,
.map-hud__board--v3 .hud-threat--lorent.hud-threat--red .hud-threat__face,
.map-hud__board--v3 .hud-threat--lorent.hud-threat--burgundy .hud-threat__face {
  color: #3a2214;
}

.map-hud__board--v3 .hud-threat--gawed.hud-threat--green .hud-threat__face,
.map-hud__board--v3 .hud-threat--gawed.hud-threat--yellow .hud-threat__face,
.map-hud__board--v3 .hud-threat--gawed.hud-threat--orange .hud-threat__face,
.map-hud__board--v3 .hud-threat--gawed.hud-threat--red .hud-threat__face,
.map-hud__board--v3 .hud-threat--gawed.hud-threat--burgundy .hud-threat__face {
  color: #2a3340;
}

.map-hud__board--v3 .hud-threat__face svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin-top: 0;
  align-self: stretch;
}

/* Compact / mobile: faces and meters stay readable */
html[data-layout='mobile'] .map-hud__board--v3 .hud-threats--inline {
  min-height: 96px;
}

html[data-layout='mobile'] .map-hud__board--v3 .hud-threat {
  min-height: 88px !important;
  grid-template-rows: auto minmax(64px, 1fr);
}

html[data-layout='mobile'] .map-hud__board--v3 .hud-threat__face {
  min-height: 64px;
  max-height: 88px;
  overflow: visible;
}

html[data-layout='mobile'] .map-hud__board--v3 .hud-threat__face svg {
  max-height: 80px;
  width: auto;
  margin-inline: auto;
}

@media (max-width: 1279px), (max-height: 799px) {
  .map-hud__board--v3 .hud-threats--inline {
    min-height: 96px;
  }

  .map-hud__board--v3 .hud-threat {
    min-height: 88px !important;
    grid-template-rows: auto minmax(64px, 1fr);
  }

  .map-hud__board--v3 .hud-threat__face {
    min-height: 64px;
    max-height: 88px;
    overflow: visible;
  }

  .map-hud__board--v3 .hud-threat__face svg {
    max-height: 80px;
    width: auto;
    margin-inline: auto;
  }
}

.map-hud__board--v3 .hud-mid--winged .aside-chip__text,
.map-hud__board--v3 .hud-mid--winged .next-step__text,
.map-hud__board--v3 .hud-mid--winged .schedule-compact__summary {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-hud__board--v3 .hud-mid__aside {
  max-height: none;
  overflow: hidden;
  gap: 6px;
  padding: 4px;
  border: 2px solid var(--border, #4a2c14);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(248, 232, 198, 0.55), rgba(232, 188, 122, 0.35));
  box-shadow: var(--bevel-out);
  align-self: stretch;
  min-width: 0;
  width: 100%;
  max-width: none;
  justify-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}

.map-hud__board--v3 .hud-mid__aside .map-hud__next,
.map-hud__board--v3 .hud-mid__aside .schedule-strip-host,
.map-hud__board--v3 .hud-mid__aside #schedule-strip-host {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  width: 100%;
  margin-top: 0;
  display: flex;
  flex-direction: column;
}

/* Compact layout: the tiles must size by content, not share a fixed height.
 *
 * Rules above deliberately give every tile in the aside `flex: 1 1 0` with
 * `min-height: 0` — that is the desktop design, where the aside has a fixed
 * height and the tiles split it. The `min-height: 44px` floors for the same
 * tiles in `08-polish.css` lose to these, because this layer loads last and
 * `#schedule-strip-host` even outranks them by id specificity.
 *
 * On a phone that design has nothing to split: measured on master the aside is
 * 24px tall, so "Сейчас" rendered at 0px and "Ближайшая игра" at 6px — both
 * below their own content and effectively invisible. The aside there is a
 * content-sized box in a column, so the tiles have to be content-sized too.
 *
 * `min-width: 0` is required, not cosmetic: with a content basis the aside
 * otherwise reports max-content width, which measured 489px in a 375px viewport
 * and scrolled the whole page sideways. */
html[data-layout='mobile'] .map-hud__board--v3 .hud-mid__aside {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
}

html[data-layout='mobile'] .map-hud__board--v3 .hud-mid__aside .map-hud__next,
html[data-layout='mobile'] .map-hud__board--v3 .hud-mid__aside .schedule-strip-host,
html[data-layout='mobile'] .map-hud__board--v3 .hud-mid__aside #schedule-strip-host {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 44px;
}

html[data-layout='mobile'] .map-hud__board--v3 .hud-mid__aside .aside-chip,
html[data-layout='mobile'] .map-hud__board--v3 .hud-mid__aside .next-step,
html[data-layout='mobile'] .map-hud__board--v3 .hud-mid__aside .schedule-compact {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 44px;
}

html[data-layout='mobile'] .map-hud__board--v3 .hud-mid__aside .hud-guild-level {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
}

.map-hud__board--v3 .hud-mid__aside .aside-chip,
.map-hud__board--v3 .hud-mid__aside .next-step,
.map-hud__board--v3 .hud-mid__aside .schedule-compact {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  padding: 0;
  border: 2px solid var(--border, #4a2c14);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(250, 235, 200, 0.95), rgba(232, 188, 122, 0.88));
  box-shadow: var(--bevel-out);
  display: grid;
  grid-template-columns: minmax(6.75rem, 8.25rem) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.map-hud__board--v3 .aside-chip--split .aside-chip__title,
.map-hud__board--v3 .aside-chip__title,
.map-hud__board--v3 .next-step__label,
.map-hud__board--v3 .schedule-compact__label {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  height: 100%;
  text-align: center;
  margin: 0;
  padding: 6px 8px;
  border-right: 2px solid rgba(74, 44, 20, 0.45);
  background: transparent;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: none;
  opacity: 1;
  color: var(--ink, #2b1a0e);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-sizing: border-box;
}

.map-hud__board--v3 .aside-chip--split .aside-chip__info,
.map-hud__board--v3 .aside-chip__info {
  display: flex;
  align-items: center;
  align-self: stretch;
  height: 100%;
  min-width: 0;
  padding: 6px 10px;
  box-sizing: border-box;
}

.map-hud__board--v3 .aside-chip__label,
.map-hud__board--v3 .aside-chip__body {
  display: none;
}

.map-hud__board--v3 .aside-chip__text,
.map-hud__board--v3 .next-step__text,
.map-hud__board--v3 .schedule-compact__summary {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-family: var(--font-clerk, Georgia, serif);
  font-size: 0.98rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink, #2b1a0e);
  opacity: 1;
}

.map-hud__board--v3 .hud-mid__aside .next-step__label,
.map-hud__board--v3 .hud-mid__aside .schedule-compact__label {
  color: var(--ink, #2b1a0e);
  text-transform: none;
  opacity: 1;
}

.map-hud__board--v3 .aside-chip__link,
.map-hud__board--v3 .schedule-compact__channel,
.map-hud__board--v3 a.schedule-compact__channel {
  display: none !important;
}

.map-hud__board--v3 .next-step--action {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  border: 0;
  background: transparent;
}

.map-hud__board--v3 .next-step__cta {
  display: inline-block;
  margin-top: 2px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.85;
}

.room-root:has(.news-room--paper) {
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.room-root:has(.master-room) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  height: 100%;
}

.room-root:has(.master-room) > .master-room {
  flex: 1 1 auto;
  min-height: 0;
}

.news-room--paper {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-bottom: 12px;
  overflow: visible;
}

.news-layout--velma.news-layout--paper-sheet,
html:not([data-layout='mobile']) .news-layout--velma.news-layout--paper-sheet {
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 16px;
  /* `start` keeps both columns at their natural height. Without it the shorter
     sidebar stretched to match the sheet, leaving a tall blank area under
     Velma's portrait. */
  align-items: start;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

.news-col--velma {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  height: auto;
  max-height: none;
  /* Velma's column carries dark ink (title, eyebrow, lead) but had no panel of
   * its own, so it sat straight on the dark room background — measured 1.8:1,
   * effectively unreadable. Give it the same parchment as the news sheet it
   * sits beside, matching the "newspaper spread" the room already imitates. */
  padding: 14px 16px 18px;
  border: 3px solid var(--border, #4a2c14);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(250, 244, 228, 0.98), rgba(236, 220, 188, 0.96)),
    var(--theme-parchment, #f5d1a0);
  box-shadow: var(--bevel-out);
  color: var(--ink, #2b1a0e);
  overflow: visible;
  align-self: start;
}

.news-paper__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
}

.news-paper__title-row .news-paper__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.news-paper__title-row .room-help {
  flex: 0 0 auto;
  margin: 0;
}

.news-col--velma .news-paper__velma,
.news-paper__velma {
  width: 100%;
  max-width: 220px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 3px solid var(--border, #4a2c14);
  box-shadow: var(--bevel-out);
  flex: 0 0 auto;
  align-self: center;
}

.news-month-pick {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 10px;
  font-size: 0.88rem;
  position: relative;
  z-index: 2;
}

.news-month-pick select {
  max-width: 100%;
  width: 100%;
  padding: 8px 10px;
  border: 2px solid var(--border, #5a4a36);
  border-radius: 4px;
  background: var(--panel-soft, #f4ecde);
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.news-paper-sheet {
  min-width: 0;
  min-height: 0;
  height: auto;
  max-height: none;
  padding: 14px 16px 18px;
  border: 3px solid var(--border, #4a2c14);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(250, 244, 228, 0.98), rgba(236, 220, 188, 0.96)),
    var(--theme-parchment, #f5d1a0);
  box-shadow: var(--bevel-out);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: visible;
}

.news-paper-sheet--empty {
  min-height: 0;
  align-self: start;
  justify-content: flex-start;
  padding: 18px 16px;
}

.news-paper-sheet--empty .news-empty__lead {
  margin: 0 0 8px;
  font-family: var(--font-display, Georgia, 'Times New Roman', serif);
  font-size: 1.05rem;
  color: var(--ink, #2b1a0e);
}

.news-paper-sheet--pack {
  gap: 0;
  overflow: auto;
  max-height: 100%;
  align-self: stretch;
}

.news-article {
  min-width: 0;
  min-height: 0;
  padding: 10px 8px 12px;
  display: flex;
  flex-direction: column;
}

.news-article__title {
  margin: 0 0 8px;
  font-family: var(--font-pixel, monospace);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  color: var(--ink, #2b1a0e);
  flex: 0 0 auto;
}

.news-article__body {
  flex: 0 1 auto;
  min-height: 0;
  height: auto;
  column-count: 1;
  column-gap: normal;
  column-fill: balance;
  column-rule: none;
}

.news-article__text {
  margin: 0 0 0.55em;
  font-size: 0.95rem;
  line-height: 1.45;
  text-align: justify;
  hyphens: auto;
  columns: unset;
}

.news-article__byline {
  flex: 0 0 auto;
  margin-top: 6px;
}

.news-article--lead {
  flex: 0 0 auto;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--border, #4a2c14);
  margin-bottom: 0;
  min-height: 0;
}

.news-article--lead .news-article__body {
  column-count: 1;
  min-height: 0;
}

.news-article--stack {
  flex: 0 0 auto;
  padding-top: 14px;
  border-top: 1px solid rgba(74, 44, 20, 0.35);
}

.news-article--stack + .news-article--stack {
  border-top: 1px solid rgba(74, 44, 20, 0.28);
}

.news-paper-sheet__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(74, 44, 20, 0.35);
}

.news-article--half {
  flex: 0 0 auto;
  min-width: 0;
  padding-top: 12px;
}

.news-article--half .news-article__body {
  column-count: 1;
  min-height: 0;
}

.news-article--left {
  border-right: 1px solid rgba(74, 44, 20, 0.28);
  padding-right: 10px;
}

.news-article--right {
  border-left: none;
  padding-left: 10px;
}

.news-article--stub {
  opacity: 0.92;
}

@media (max-width: 900px) {
  .news-layout--velma.news-layout--paper-sheet,
  html:not([data-layout='mobile']) .news-layout--velma.news-layout--paper-sheet {
    grid-template-columns: 1fr;
    height: auto;
  }

  .news-paper-sheet {
    height: auto;
  }

  .news-article__body,
  .news-article--lead .news-article__body,
  .news-article--half .news-article__body {
    column-count: 1;
    min-height: 0;
    height: auto;
  }

  .news-paper-sheet__row {
    grid-template-columns: 1fr;
  }

  .news-article--left {
    border-right: 0;
    border-bottom: 2px solid var(--border, #4a2c14);
    padding-right: 8px;
  }

  .news-article--right {
    padding-left: 8px;
  }
}

/* —— Mid-band / short desktop: compact HUD + map still in first viewport —— */
@media (max-width: 1279px), (max-height: 799px) {
  html:not([data-layout='mobile']) .map-hud__board--v3 {
    padding: 4px 6px;
  }

  html:not([data-layout='mobile']) .map-hud__board--v3 .hud-mid,
  html:not([data-layout='mobile']) .map-hud__board--v3 .hud-mid--winged {
    display: grid;
    flex-direction: unset;
    grid-template-columns: minmax(72px, 100px) minmax(0, 1fr) minmax(160px, 1.4fr) minmax(0, 1fr) minmax(72px, 100px);
    gap: 4px 6px;
    align-items: stretch;
  }

  html:not([data-layout='mobile']) .map-hud__board--v3 .hud-threats--inline,
  html:not([data-layout='mobile']) .map-hud__board--v3 .hud-mid--winged > .hud-threat {
    width: auto;
  }

  html:not([data-layout='mobile']) .map-hud__board--v3 .hud-vault--wing {
    grid-template-columns: 1fr;
    width: auto;
    gap: 3px;
  }

  html:not([data-layout='mobile']) .map-hud__board--v3 .hud-vault--wing .hud-vault__item {
    padding: 3px 5px;
  }

  html:not([data-layout='mobile']) .map-hud__board--v3 .hud-mid__aside {
    gap: 4px;
  }

  html:not([data-layout='mobile']) .map-hud__board--v3 .hud-guild-level {
    font-size: 0.72rem;
    margin: 0;
  }

  html:not([data-layout='mobile']) .map-stage {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    flex: 1 1 auto;
  }

  html:not([data-layout='mobile']) .map-canvas {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: min(42vh, 360px);
    height: min(48vh, 480px);
    flex: 1 1 auto;
  }

  html:not([data-layout='mobile']) .map-chrome-left,
  html:not([data-layout='mobile']) .map-modes--rail,
  html:not([data-layout='mobile']) .region-panel,
  html:not([data-layout='mobile']) .region-panel--overlay,
  html:not([data-layout='mobile']) .map-legend,
  html:not([data-layout='mobile']) .map-legend--overlay,
  html:not([data-layout='mobile']) .schedule-strip-host--overlay,
  html:not([data-layout='mobile']) .hud-vault--map {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 6px;
  }

  html:not([data-layout='mobile']) .map-modes--rail {
    flex-direction: row;
    flex-wrap: wrap;
  }

  html:not([data-layout='mobile']) .map-modes--rail .mode-btn {
    min-width: 40px;
    min-height: 40px;
  }

  html:not([data-layout='mobile']) .map-chrome-left {
    order: -1;
  }

  html:not([data-layout='mobile']) body,
  html:not([data-layout='mobile']) .app-body {
    overflow: auto;
    height: auto;
    min-height: 100%;
  }

  html:not([data-layout='mobile']) .room-root:has(.map-room--bleed) {
    overflow: visible;
    height: auto;
  }
}

/* Wide + tall desktop restores winged HUD (wins over mid-band when both would apply — this block is more specific via min queries) */
@media (min-width: 1280px) and (min-height: 800px) {
  html:not([data-layout='mobile']) .map-hud__board--v3 .hud-mid,
  html:not([data-layout='mobile']) .map-hud__board--v3 .hud-mid--winged {
    display: grid;
    grid-template-columns: minmax(110px, 148px) minmax(0, 1.05fr) minmax(240px, 1.55fr) minmax(0, 1.05fr) minmax(110px, 148px) !important;
    gap: 6px 10px;
    align-items: stretch;
  }

  html:not([data-layout='mobile']) .map-modes--rail .mode-btn {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ==========================================================================
   Shared room chrome (js/ui/room-ui.js)
   One header bar + one help button for every room, so the parchment treatment
   and the wrap behaviour live in a single place instead of eight.
   ========================================================================== */

/* Small round help affordance. Sits as a sibling of the title text, never
   inside it, so it cannot push the title onto extra lines. */
.room-help {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  margin-left: 8px;
  padding: 0;
  border: 2px solid var(--border, #4a2c14);
  border-radius: 50%;
  background: linear-gradient(180deg, #f6e2b4, #e4c88c);
  color: var(--ink, #2b1a0e);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--bevel-out, 1px 1px 0 rgba(0, 0, 0, 0.25));
  vertical-align: middle;
}

.room-help:hover,
.room-help:focus-visible {
  background: linear-gradient(180deg, #ffe9a8, #f0cf72);
  color: var(--ink, #2b1a0e);
}

/* Title rows reserve room for the button and keep the pill look. */
.ach-room__title,
.gloss-room__title,
.lib-room__title,
.npc-room__title,
.master-room__title,
.work-room__title,
.tickets-room__title,
.news-paper__title,
.characters-dossier__title,
.wh-room__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 2px;
  overflow-wrap: anywhere;
}

/* The shared bar: every room that opts into `.X-room__bar` gets this.
   `:not()` guards below keep the per-room nuances (status slot, controls). */
.ach-room__bar,
.gloss-room__bar,
.lib-room__bar,
.npc-room__bar,
.work-room__bar,
.tickets-room__bar,
.characters-dossier__bar,
.wh-room__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 14px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border: 2px solid var(--border, #4a2c14);
  border-radius: 8px;
  background: linear-gradient(180deg, #faebc8, #f0d8a0);
  box-shadow: var(--bevel-out);
  color: var(--ink, #2b1a0e);
}

.ach-room__head,
.gloss-room__head,
.lib-room__head,
.npc-room__head,
.work-room__head,
.tickets-room__head,
.characters-dossier__head,
.wh-room__head {
  flex: 1 1 320px;
  min-width: 0;
}

.ach-room__actions,
.gloss-room__actions,
.lib-room__actions,
.npc-room__actions,
.work-room__actions,
.tickets-room__actions,
.characters-dossier__actions,
.wh-room__actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Master keeps its bar compact (it is a full-height working surface). */
.master-room__bar {
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 10px;
  padding: 8px 14px;
  border: 2px solid var(--border, #4a2c14);
  border-radius: 8px;
  background: linear-gradient(180deg, #faebc8, #f0d8a0);
  box-shadow: var(--bevel-out);
  color: var(--ink, #2b1a0e);
}

/* Status lines only take space when they carry a message. */
.master-status:empty,
.work-status:empty,
.tickets-status:empty,
.gloss-status:empty,
.gossip-status:empty {
  display: none;
}

/* Long titles wrap on the word boundary first, then anywhere as a fallback,
   instead of overflowing or forcing the action button onto its own line. */
.ach-room__title,
.gloss-room__title,
.lib-room__title,
.npc-room__title,
.work-room__title,
.tickets-room__title,
.news-paper__title {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* ==========================================================================
   Calendar plaque — a small block sitting beside the guild title
   ========================================================================== */

.calendar-plaque {
  position: relative;
  display: inline-block;
  margin-top: 0;
  max-width: none;
}

.calendar-plaque__btn {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  width: auto;
  padding: 2px 10px;
  border: 2px solid var(--border, #4a2c14);
  border-radius: 999px;
  background: linear-gradient(180deg, #faebc8, #f0d8a0);
  color: var(--ink, #2b1a0e);
  box-shadow: var(--bevel-out);
}

.calendar-plaque__btn:hover {
  background: linear-gradient(180deg, #fff3cd, #f3ddab);
}

.calendar-plaque__ingame {
  font-family: var(--font-display, 'Spectral', Georgia, serif);
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.3;
  white-space: nowrap;
}

.calendar-plaque__real {
  font-size: 0.72rem;
  opacity: 0.75;
  white-space: nowrap;
}

.app-header__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.app-header__title-row h1 {
  margin: 0;
  min-width: 0;
  flex: 0 1 auto;
}

/* The title block lays the plaque out inline with the tagline row. */
.app-header__brand--sign .calendar-plaque {
  align-self: center;
}

@media (max-width: 720px) {
  .calendar-plaque__real {
    display: none;
  }
}

/* ==========================================================================
   Final desktop block. `split-css.mjs --check` requires this file to end on a
   `min-width` block: a `min-width` guard here beats any earlier `max-width`
   rule on source order alone, which is what the layer is for. Both rules below
   are desktop-only, so they belong here and nowhere earlier.
   ========================================================================== */
@media (min-width: 721px) {
  /* Header layout toggle visibility.
   *
   * `07-responsive.css` hides the toggle on compact layouts with
   * `display: none !important`, but an `!important` that loses the cascade
   * still measures zero-size while looking hidden. Playwright asks "can this be
   * clicked?", so the QA design pass read the hidden button as
   * present-but-unclickable and hung for its full 30s timeout, taking the whole
   * "mobile toggle" section with it.
   *
   * Hiding is a decision, so it is stated as one: `display: inline-flex` by
   * default and `display: none` on the compact layout. The JS that owns the
   * button keeps running — it is hidden, never removed. */
  #layout-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  html[data-layout='mobile'] #layout-toggle-btn {
    display: none;
  }

  /* Guild level between "Сейчас" and "Ближайшая игра".
   *
   * Placement (which tile it sits between) is decided in the markup, so this
   * only has to make the line behave in the column. `flex: 0 0 auto` keeps it
   * one short row instead of taking an equal share and squeezing the two
   * neighbours, which are `flex: 1 1 0`. The compact layout keeps its own
   * sizing from `08-polish.css` — the aside there is a fixed-height column and
   * giving this line desktop padding overflows it. */
  .map-hud__board--v3 .hud-mid__aside .hud-guild-level {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 0;
    margin: 0;
    padding: 5px 8px;
    border: 2px solid var(--border, #4a2c14);
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(240, 218, 174, 0.95), rgba(219, 174, 110, 0.9));
    box-shadow: var(--bevel-out);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    opacity: 1;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
  }
}