/* Readable game layout and nearby actions. Loaded after the visual theme. */
main {
  max-width: 1920px;
  padding: 26px clamp(18px, 2vw, 38px) 24px;
}
.layout {
  display: grid;
  grid-template-columns: minmax(245px, 270px) minmax(0, 1fr) minmax(305px, 330px);
  gap: 16px;
  align-items: start;
}
.left-column, .right-column { min-width: 0; gap: 16px; }
.panel { padding: 18px; }
.panel-label { font-size: 12px; line-height: 1.4; }
.panel-label > span { font-size: 9px; }

/* Character: bring status and services higher into view. */
.character .portrait { width: 106px; height: 111px; margin: 14px auto 8px; }
.character-name h2 { font-size: 20px; }
.character-name > span { font-size: 11px; }
.level-row { margin-top: 15px; font-size: 11px; }
.level-row b { font-size: 20px; }
.level-row > span { font-size: 10px; }
.vital { margin-top: 13px; }
.vital label, .vital label span { font-size: 11px; }
.attributes { margin: 17px 0 13px; padding: 11px 0; }
.attributes span { font-size: 10px; }
.attributes b { font-size: 19px; }
.character-details > .wide { min-height: 42px; font-size: 12px; margin-top: 7px; width: 100%; }
.character-details > .wide span { font-size: 10px; }
.character-toggle { display: none; }
.equipment { margin-top: 12px; }
.equipped-slot { grid-template-columns: 42px minmax(0, 1fr); min-height: 42px; font-size: 10px; }
.equipped-slot b { font-size: 11px; }
.equipped-slot small { font-size: 9px; line-height: 1.5; }
.village button { min-height: 44px; padding: 10px 0; font-size: 12px; gap: 8px; }
.village small { font-size: 10px; text-align: right; line-height: 1.4; }
.village p { font-size: 10px; line-height: 1.6; }

/* Map: compact action row with readable controls. */
.adventure { min-width: 0; }
.map-top { min-height: 52px; height: auto; padding: 7px 12px; gap: 12px; }
.map-location { min-width: 0; display: flex; align-items: center; gap: 4px; }
.map-location strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.map-location #region-tag { font-size: 10px; white-space: nowrap; }
.map-actions { display: flex; align-items: center; gap: 5px; flex: none; }
.map-actions button { min-width: 36px; min-height: 36px; padding: 6px 9px; font-size: 15px; }
.map-actions .map-quick { min-width: 72px; display: inline-flex; justify-content: center; align-items: center; gap: 6px; font-size: 11px; }
.map-actions .map-quick[hidden] { display: none; }
.map-action-separator { height: 23px; width: 1px; background: #78908566; margin: 0 4px; }
.world-wrap { height: clamp(540px, 68vh, 760px); }
.world-tip { font-size: 11px; line-height: 1.45; padding: 8px 12px; }
.map-atlas { min-height: 39px; font-size: 11px; }
.zone-stamp span { font-size: 11px; }
.zone-stamp small { font-size: 10px; }
.hotbar { gap: 7px; padding: 10px; }
.hotbar button { min-height: 74px; padding: 10px 4px 6px; }
.hotbar b { font-size: 11px; }
.hotbar small { font-size: 10px; }
.hotbar kbd { font-size: 9px; }
.action-icon { font-size: 22px; margin-bottom: 3px; }
.battle-log { min-height: 96px; padding: 12px 16px; }
.battle-log > span { font-size: 11px; }
.log-line { font-size: 11px; line-height: 1.65; }

/* Objective, map and party stay legible in the right column. */
.quest { padding: 19px; }
.quest-symbol { margin: 18px 0 10px; font-size: 31px; }
.quest .eyebrow { font-size: 10px; letter-spacing: 1px; line-height: 1.45; }
.quest h2 { font-size: 24px; margin: 10px 0; }
.quest p { font-size: 12px; line-height: 1.75; min-height: 0; margin-bottom: 14px; }
.quest-count { font-size: 11px; margin: 10px 0 14px; }
.quest .wide { min-height: 44px; font-size: 12px; }
.first-journey { display: grid; grid-template-columns: minmax(140px, .8fr) minmax(0, 1.5fr) minmax(120px, auto); align-items: center; gap: 3px 12px; padding: 10px 13px; border: 1px solid #749077; background: #203a32; }
.first-journey[hidden], .guide-actions button[hidden] { display: none; }
.guide-head { grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.guide-head span { color: #d7c890; font-size: 10px; letter-spacing: .08em; }
.guide-head button { padding: 4px 6px; border: 0; background: transparent; color: #c7d0bf; font-size: 10px; text-decoration: underline; }
.first-journey h3 { grid-column: 1; grid-row: 2; margin: 0; color: #f2e2b6; font-size: 15px; font-weight: 600; }
.first-journey p { grid-column: 2; grid-row: 1 / 3; min-height: 0; margin: 0; color: #d1ded0; font-size: 11px; line-height: 1.6; }
.guide-actions { grid-column: 3; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 6px; }
.guide-actions button { min-height: 38px; background: #49634f; border-color: #8ca27f; color: #fff2cc; font-size: 11px; }
.item-delta .delta-up { color: #bfe0a5; background: #466846; }
.item-delta .delta-down { color: #efb7a7; background: #633f42; }
.atlas .panel-label { margin-bottom: 2px; }
.atlas-legend { flex-wrap: wrap; justify-content: flex-start; gap: 5px 14px; font-size: 10px; line-height: 1.5; }
.atlas-expand { min-height: 42px; font-size: 11px; }
.atlas > p { font-size: 10px; }
.party-map-info { padding: 12px; }
.party-map-heading { font-size: 11px; }
.party-map-location { font-size: 11px !important; }
.party-map-row { grid-template-columns: 8px minmax(0, 1fr) auto 52px; gap: 7px; align-items: center; margin-top: 9px; }
.party-map-row b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px !important; }
.party-map-row small { font-size: 10px !important; line-height: 1.45; }
.party-map-row em { font-size: 10px !important; white-space: nowrap; }
.party-map-row button { min-width: 52px; min-height: 36px; padding: 5px 7px; font-size: 11px; }
.journey > div:not(.panel-label) { margin-top: 13px; font-size: 12px; }
.journey b { font-size: 18px; }
.journey p { font-size: 11px; line-height: 1.65; }
.notice { font-size: 12px; }
footer { font-size: 10px; }
footer button { font-size: 10px; min-height: 34px; }

/* Two columns leave the game wide enough before the desktop sidebars fit. */
@media (max-width: 1499px) {
  .layout { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); }
  .right-column { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .right-column .quest { grid-column: auto; display: block; }
  .right-column .journey { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 16px; }
  .journey .panel-label, .journey p { grid-column: 1 / -1; }
  .journey > div:not(.panel-label) { margin-top: 8px; }
  .world-wrap { height: clamp(480px, 62vh, 680px); }
}
@media (max-width: 980px) {
  .layout { grid-template-columns: 210px minmax(0, 1fr); }
  .map-actions .map-quick { min-width: 38px; }
  .map-action-text { display: none; }
  .world-wrap { height: clamp(460px, 59vh, 620px); }
}

/* On handheld screens, show the objective before the map and keep every action large enough to tap. */
@media (max-width: 760px) {
  main { padding: 17px 12px 24px; }
  .page-heading { margin-bottom: 8px; }
  .page-heading .eyebrow, .page-heading p, .world-status { display: none; }
  .page-heading h1 { margin: 0; font-size: 16px; line-height: 1.4; }
  .page-heading h1 span { display: inline; font-size: inherit; }
  .expedition-bar { margin-bottom: 9px; padding: 6px 0; }
  .expedition-bar > div:first-child { display: none; }
  .layout { display: flex; flex-direction: column; gap: 13px; }
  .left-column, .right-column { display: contents; }
  .character { order: 0; width: 100%; display: grid; grid-template-columns: 75px repeat(2, minmax(0, 1fr)); column-gap: 10px; padding: 14px; }
  .character > .panel-label { grid-column: 1 / -1; margin-bottom: 8px; }
  .character-toggle { display: block; grid-column: 1 / -1; grid-row: 6; min-height: 38px; margin-top: 9px; padding: 5px 8px; color: #dcd4aa; font-size: 11px; }
  .character-details { grid-column: 1 / -1; grid-row: 7; }
  .character:not(.is-expanded) .character-details { display: none; }
  .character .portrait { grid-column: 1; grid-row: 2 / 6; width: 67px; height: 82px; margin: 2px 0 0; }
  .character-name { grid-column: 2 / -1; grid-row: 2; text-align: left; }
  .character-name h2 { font-size: 17px; }
  .level-row { grid-column: 2 / -1; grid-row: 3; margin-top: 8px; }
  .character > #xp { grid-column: 2 / -1; grid-row: 4; margin-top: 5px; }
  .character .vital { grid-column: 2; grid-row: 5; margin: 9px 0 0; }
  .character .vital.mana { grid-column: 3; }
  .attributes, .character > .wide, .character > .equipment { grid-column: 1 / -1; }
  .attributes { margin: 13px 0 8px; padding: 9px 0; }
  .character .equipment { display: block; margin-top: 8px; }
  .right-column .quest { order: 2; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; padding: 15px; }
  .quest .panel-label, .quest .eyebrow, .quest h2, .quest p, .quest > progress, .quest-count, .quest .wide { grid-column: 1 / -1; grid-row: auto; margin: 0; }
  .quest .panel-label { margin-bottom: 5px; }
  .quest .quest-symbol { display: none; }
  .quest h2 { font-size: 21px; }
  .quest p { font-size: 12px; }
  .quest-count { margin: 4px 0 8px; }
  .quest .wide { min-height: 43px; font-size: 12px; }
  .right-column .quest #quest-travel,
  .right-column .quest #quest-claim { grid-column: 1 / -1; grid-row: auto; margin: 0; }
  .adventure { order: 1; width: 100%; }
  .first-journey { grid-template-columns: 1fr; gap: 4px; padding: 10px 12px; }
  .guide-head, .first-journey h3, .first-journey p, .guide-actions { grid-column: 1; grid-row: auto; }
  .guide-actions { flex-direction: row; margin-top: 4px; }
  .guide-actions button { flex: 1; }
  .right-column .atlas { order: 3; width: 100%; }
  .right-column .journey { order: 4; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
  .journey .panel-label, .journey p { grid-column: 1 / -1; }
  .village { order: 5; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
  .village .panel-label, .village p { grid-column: 1 / -1; }
  .village button { min-height: 50px; align-items: flex-start; flex-direction: column; justify-content: center; padding: 8px; border: 1px solid #4b6563; border-radius: 5px; background: #233d42; font-size: 11px; }
  .village small { font-size: 9px; text-align: left; }
  .world-wrap { height: clamp(390px, 57svh, 570px); }
  .atlas-legend { font-size: 10px; }
  .party-map-row button { min-height: 44px; }
  .map-atlas { min-height: 44px; }
  .journey > div:not(.panel-label) { font-size: 11px; }
  footer { gap: 10px; }
  footer > div { display: flex; flex-wrap: wrap; gap: 6px; }
  footer button { min-height: 44px; font-size: 10px; }
}
@media (max-width: 600px) {
  .map-top { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 7px 9px; }
  .map-location { min-height: 25px; }
  .map-location #region-tag { font-size: 10px; }
  .map-actions { width: 100%; gap: 5px; }
  .map-actions button { min-width: 0; min-height: 44px; flex: 1; padding: 5px; font-size: 16px; }
  .map-actions .map-quick { min-width: 0; }
  .map-action-separator { margin: 0 2px; }
  .hotbar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px; }
  .hotbar button { min-height: 64px; }
  .hotbar b { font-size: 11px; }
  .hotbar small { font-size: 9px; }
  .hotbar kbd { display: none; }
  .action-icon { font-size: 20px; line-height: 22px; }
  .world-tip { font-size: 9px; }
  .log-line { font-size: 10px; }
}
@media (max-width: 390px) {
  .character { grid-template-columns: 65px repeat(2, minmax(0, 1fr)); column-gap: 8px; }
  .character .portrait { width: 59px; height: 75px; }
  .character-name h2 { font-size: 15px; }
  .vital label, .vital label span { font-size: 9px; }
  .world-wrap { height: 420px; }
}