/* A Realm of Dragons v22.18.0 — mobile fit corrections.

   Loaded last on purpose. The project carries fifteen stylesheets and several
   hundred !important declarations, so the only reliable way to correct a layout
   rule that a later sheet re-opened is to win the cascade at the end. Each rule
   below states the root cause it fixes. */

/* ---------------------------------------------------------------------------
   1. Every <table> on the site carried min-width:760px from a global rule.
      On a 360px phone that forced the whole document to at least 760px wide,
      which is what produced the horizontal scrollbar, the cut-off navigation
      and the need to pinch out before anything fit. Tables that genuinely need
      the width keep it, but only inside a container that can scroll them.
--------------------------------------------------------------------------- */
table { min-width: 0; }
.table-shell { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-shell table { min-width: 760px; }
.roblox-directory table,
.movement-breakdown table { min-width: 0; }

/* ---------------------------------------------------------------------------
   2. Backstop: nothing may make the document wider than the screen. If a future
      panel reintroduces an over-wide element this contains it rather than
      breaking the whole page again. overflow-x:clip does not create a scroll
      container, so sticky positioning keeps working; hidden is the fallback.
--------------------------------------------------------------------------- */
html { overflow-x: hidden; overflow-x: clip; }
body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
img, svg, video, canvas, iframe { max-width: 100%; }

/* ---------------------------------------------------------------------------
   3. The atlas reserved exactly 66px for the mobile navigation, but the bar
      also carries env(safe-area-inset-bottom) for the gesture area. On any
      phone with a gesture bar the two disagreed, so the navigation sat on top
      of the bottom of the map. One shared variable now drives both.
--------------------------------------------------------------------------- */
:root { --mobile-nav: 66px; }

@media (max-width: 760px) {
  :root { --mobile-nav: calc(66px + env(safe-area-inset-bottom, 0px)); }

  .mobile-nav {
    height: var(--mobile-nav);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* Five equal columns overflowed once labels grew. Let them shrink instead. */
  .mobile-nav button { min-width: 0; padding: 0 2px; }
  .mobile-nav button span { font-size: 18px; }
  .mobile-nav button:not(:has(span)) { font-size: 10px; }

  .atlas-view { height: calc(100dvh - var(--header) - var(--mobile-nav)); }
  .page-view { padding-bottom: calc(var(--mobile-nav) + 26px); }
  .locked-staff { min-height: calc(100dvh - var(--header) - var(--mobile-nav) - 40px); }

  /* Floating map furniture sat above a 66px bar; follow the real height. */
  .preset-bar { bottom: calc(var(--mobile-nav) - 13px); }
  .map-readout { bottom: calc(var(--mobile-nav) + 34px); }
  .toast { bottom: calc(var(--mobile-nav) + 16px); }

  /* The detail sheet slides up from the bottom and must clear the bar. */
  .detail-sheet { bottom: var(--mobile-nav); height: min(64dvh, 580px); }
  .drawer { bottom: var(--mobile-nav); }
}

/* ---------------------------------------------------------------------------
   4. Long single-word content (house words, Roblox names, place names) could
      push a card wider than its column.
--------------------------------------------------------------------------- */
.house-card, .army-card, .metric-card, .detail-stat, .panel { min-width: 0; }
.house-title h2, .house-title p, .detail-stat strong, .roblox-identity strong {
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   5. Small-screen breathing room. The topbar crowded at narrow widths because
      the brand had no lower bound on how much it could shrink.
--------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .brand-text strong { font-size: 16px; }
  .brand-seal { width: 36px; height: 36px; font-size: 20px; }
  .topbar { gap: 8px; }
  .topbar-actions { gap: 6px; }
  .topbar-actions .button { padding: 7px 8px; font-size: 10.5px; }
  .atlas-search-panel { width: calc(100% - 58px); }
  .search-box { height: 40px; }
  .page-hero h1 { font-size: 25px; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* Landscape phones: the header and nav together eat most of a short viewport. */
@media (max-height: 460px) and (orientation: landscape) and (max-width: 950px) {
  .mobile-nav { height: 54px; }
  :root { --mobile-nav: calc(54px + env(safe-area-inset-bottom, 0px)); }
  .mobile-nav button span { font-size: 15px; }
}

/* ===========================================================================
   22.18.0 — topbar fit, map legibility
   =========================================================================== */

/* ---------------------------------------------------------------------------
   6. THE REMAINING OVERFLOW. The save button's label ("Saved on this device ✓")
      is unshrinkable text roughly 150px wide. Together with the brand, the seal
      and the undo/redo pair it exceeded a 360px topbar, which is what pushed
      the whole document sideways. The label is now short on mobile (app.js);
      these rules make every other topbar child able to give way too.
--------------------------------------------------------------------------- */
.topbar { min-width: 0; }
.topbar > * { min-width: 0; }
.brand { overflow: hidden; }
.brand-text { min-width: 0; }
.brand-text strong,
.brand-text em,
.brand-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { min-width: 0; flex-shrink: 0; }
.save-button { white-space: nowrap; }

@media (max-width: 760px) {
  /* Undo and redo are map-editing controls; on a phone they cost more width
     than they earn. They remain available in the map tools panel. */
  .topbar-actions .icon-action { display: none; }
  .brand-text strong { max-width: 46vw; }
}
@media (max-width: 420px) {
  .brand-text strong { max-width: 40vw; font-size: 15px; }
  .save-button { padding: 7px 9px !important; font-size: 10.5px; }
}

/* ---------------------------------------------------------------------------
   7. MAP LEGIBILITY. The place names on the terrain — THE WALL, DORNE, the
      city names — are printed into the Quartermaester tile images themselves,
      so they cannot be restyled as text. Dimming and slightly desaturating the
      imagery stops them glaring, and lets the app's own labels sit clearly on
      top instead of competing with the print underneath.
--------------------------------------------------------------------------- */
.world-map-image {
  filter: brightness(0.74) saturate(0.86) contrast(1.06);
}
/* Deeper vignette so the eye settles on the centre of the view. */
.map-shade {
  box-shadow: inset 0 0 130px rgba(0, 0, 0, 0.66),
              inset 0 0 0 1px rgba(240, 214, 143, 0.12);
}
/* The hex mesh is drawn in near-black; easing it back reduces visual noise
   without losing the grid. */
.v19-grid-cell { stroke-opacity: 0.62; }
.v19-grid-cell.overview.land,
.v19-grid-cell.overview.sea { stroke-opacity: 0.5; }

/* ---------------------------------------------------------------------------
   8. PLACE LABELS ALWAYS READABLE. The app's own labels had a translucent chip
      that disappeared over pale terrain. They now carry a solid backing, a
      gold rule and a dark halo, so they read at every zoom level and over any
      colour underneath.
--------------------------------------------------------------------------- */
.pin-name {
  background: rgba(9, 8, 6, 0.93) !important;
  border: 2px solid rgba(240, 214, 143, 0.82) !important;
  color: #fff6dc !important;
  font-weight: 800 !important;
  padding: 6px 11px !important;
  text-shadow: 0 0 6px #000, 0 2px 4px #000 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.65) !important;
}
/* Held, war and open locations keep their meaning without losing contrast. */
.map-pin.selected .pin-name { border-color: #ffe9ae !important; background: rgba(24, 18, 8, 0.96) !important; }

/* Army and development tokens sit on the same darker map. */
.army-token, .development-token { box-shadow: 0 3px 12px rgba(0, 0, 0, 0.7); }

/* The readout and preset bar sit over the map and need the same treatment. */
.map-readout { background: rgba(6, 8, 7, 0.88); }
.preset-bar { background: rgba(10, 10, 8, 0.95); }