/* Shared parchment game shell inspired by a hand-painted fantasy atlas. */
:root {
  color-scheme: light;
  --paper: #e7d4a6;
  --paper-light: #f1dfb7;
  --paper-dark: #c8aa75;
  --ink: #302315;
  --ink-soft: #65513a;
  --wood: #51351f;
  --wood-dark: #2d1c12;
  --rust: #873a28;
  --paper-line: #8b6a3f;
  --panel-shadow: 0 3px 8px #2e1b0f42;
  --left-rail: clamp(188px, 14.5vw, 224px);
  --right-rail: clamp(210px, 16vw, 246px);
}

body {
  color: var(--ink);
  background: #281b12;
}

body::before,
body::after { display: none; }

.site-frame {
  width: min(100%, 1680px);
  min-height: 100svh;
  overflow: visible;
  background:
    linear-gradient(#dfc991e8, #e8d7acee),
    url("/eter-autumn-forest.png") center center / cover no-repeat;
  border-inline: 4px solid #2b1c12;
  box-shadow: 0 0 70px #000c;
}

.world {
  position: absolute;
  inset: 0;
  background: #755a35 url("/eter-autumn-forest.png") center center / cover no-repeat;
  opacity: .22;
}

.screen-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #28180f7d, transparent 5% 95%, #28180f7d),
    linear-gradient(180deg, #28180f33, transparent 24% 82%, #28180f5c);
}

.game-header {
  height: 176px;
  grid-template-columns: minmax(220px, 1fr) auto minmax(430px, 1fr);
  align-items: end;
  padding: 0 22px 12px;
  border: 7px solid #352116;
  border-bottom-width: 12px;
  background:
    linear-gradient(180deg, transparent 0 69%, #3b2818e8 69% 100%),
    linear-gradient(90deg, #18231240, transparent 28% 75%, #18231245),
    url("/forest-exploration-main.png") center 48% / cover no-repeat;
  box-shadow: inset 0 0 0 2px #b89256, 0 5px 12px #2e1b0f99;
}

.brand {
  position: relative;
  align-self: center;
  gap: 9px;
  padding: 9px 18px 10px 12px;
  color: #3f2115;
  background: #e5ce9aeb;
  border: 2px solid #674224;
  box-shadow: 4px 5px 0 #3b241aa8, inset 0 0 12px #9b71394a;
  font-size: 2rem;
  letter-spacing: .15em;
  text-shadow: 0 1px #fff2c2;
  transform: rotate(-1deg);
}

.brand::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid #8a64374f;
  pointer-events: none;
}

.brand-icon { width: 50px; height: 50px; }

.location {
  align-self: end;
  color: #f3dba7;
  font-size: .86rem;
  text-shadow: 0 2px 3px #000;
}

.location-rule { background: #cba664; }

.account-area {
  align-self: end;
  display: grid;
  grid-template-columns: auto 34px auto auto;
  align-items: center;
  gap: 10px;
  min-width: max-content;
  padding: 8px 10px;
  border: 1px solid #b98e53;
  background: #ead8adc9;
  box-shadow: inset 0 0 0 2px #5b3c2452, 2px 3px 0 #2a190f8c;
  color: var(--ink);
}

.server-clock,
.server-state { color: #66523b; }
.server-state span { display: inline; }
.server-clock {
  width: 94px;
  min-width: 94px;
  justify-items: end;
  line-height: 1.15;
}
.server-clock time { color: #392719; }
.account-chip > a { color: #4a2c1b; }
.account-chip button {
  color: #f5e3bb;
  border-color: #4e2e1f;
  background: linear-gradient(#71402b, #4b281c);
}
.action-log-trigger {
  border-color: #75502d;
  border-radius: 2px;
  background: #d5bc86;
  color: #4d2d1c;
  box-shadow: inset 0 0 0 2px #f4e4b8, 2px 2px 0 #38211580;
}

.game-stage {
  display: grid;
  grid-template-columns: var(--left-rail) minmax(0, 1fr) var(--right-rail);
  align-content: start;
  align-items: start;
  gap: 12px;
  height: auto !important;
  min-height: calc(100svh - 176px) !important;
  padding: 12px 14px 96px !important;
}

.left-sidebar,
.right-sidebar {
  position: static;
  z-index: 2;
  min-width: 0;
}

.left-sidebar {
  grid-column: 1;
  grid-row: 1;
  inset-inline: auto;
  width: auto;
  overflow: visible;
  border: 2px solid #684525;
  background:
    linear-gradient(#ecd9acdb, #dfc28ddd),
    url("/forest-exploration-main.png") 18% bottom / auto 46% no-repeat;
  box-shadow: inset 0 0 0 3px #f6e6bb, var(--panel-shadow);
}

.primary-menu {
  padding: 10px 9px 122px;
  border: 0;
  background: linear-gradient(180deg, transparent 0 80%, #cfad7266 100%);
}

.panel-title {
  margin: 9px 8px 5px;
  padding: 0 0 5px;
  border-color: #8b683c73;
  color: #734229;
  font-size: .68rem;
  letter-spacing: .15em;
}
.panel-section-divider { margin: 8px; background: #8b683c80; }

.menu-item {
  min-height: 39px;
  gap: 10px;
  padding: 0 9px;
  color: #3c2b1c;
  font-size: .84rem;
  text-decoration: none;
}
.menu-item span,
.menu-item .menu-icon { width: 23px; flex-basis: 23px; color: #663c25; }
.menu-item .menu-icon { filter: sepia(.55) saturate(.85) brightness(.58); opacity: .9; }
.menu-item:hover,
.menu-item:focus-visible,
.menu-item.is-active {
  border-color: #70472c;
  color: #f8e5b8;
  background: linear-gradient(90deg, #4a2d1f, #68452e);
  box-shadow: inset 3px 0 #b98c4c;
}
.menu-item:hover .menu-icon,
.menu-item:focus-visible .menu-icon,
.menu-item.is-active .menu-icon { filter: sepia(.25) brightness(1.55); }

.right-sidebar {
  grid-column: 3;
  grid-row: 1;
  display: grid;
  gap: 10px;
}

.sidebar-character-card,
.sidebar-stats,
.sidebar-actions,
.cooldown-dock,
.right-sidebar .resource-dock {
  border: 2px solid #684525;
  background: linear-gradient(145deg, #efddb3f2, #d9bc86f2);
  box-shadow: inset 0 0 0 2px #f8e9c1, var(--panel-shadow);
}

.cooldown-dock[hidden] { display: none; }
.cooldown-dock h2 { padding-bottom: 7px; }
.cooldown-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 49px;
  padding: 6px 8px;
  border-bottom: 1px solid #9a764b;
  background: #e4cc99d9;
}
.cooldown-row:last-child { border-bottom: 0; }
.cooldown-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #5a3823;
  background: radial-gradient(circle at 38% 30%, #8a5035, #372116 76%);
  box-shadow: inset 0 0 0 2px #e9cc8e42, 1px 2px 0 #3e25175c;
  color: #f1d393;
}
.cooldown-icon svg { width: 21px; height: 21px; fill: currentColor; stroke: currentColor; stroke-width: 1.5; }
.cooldown-herbal .cooldown-icon { color: #c7dd8d; background: radial-gradient(circle at 38% 30%, #5d7238, #26321d 76%); }
.cooldown-herbal .cooldown-icon svg,
.cooldown-summoning .cooldown-icon svg { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cooldown-summoning .cooldown-icon { color: #c7b9eb; background: radial-gradient(circle at 38% 30%, #66507d, #2c2439 76%); }
.cooldown-body { min-width: 0; }
.cooldown-body > div { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 5px; }
.cooldown-body strong { min-width: 0; overflow: hidden; color: #3d281a; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.cooldown-body time { color: #6f281e; font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cooldown-meter { display: block; height: 7px; overflow: hidden; border: 1px solid #705137; background: #6f5a4057; }
.cooldown-meter i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #9d3c2d, #d98248); transition: width .8s linear; }
.cooldown-herbal .cooldown-meter i { background: linear-gradient(90deg, #66843c, #a9c85f); }
.cooldown-summoning .cooldown-meter i { background: linear-gradient(90deg, #634386, #a37ac4); }
.cooldown-row.is-ready .cooldown-body time { color: #356331; }
.cooldown-row.is-ready .cooldown-icon { box-shadow: inset 0 0 0 2px #ffe4a65e, 0 0 8px #e3b85d8a; }

.sidebar-character-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
  padding: 10px;
}
.sidebar-character-card img {
  grid-row: 1 / 3;
  width: 56px;
  height: 56px;
  padding: 5px;
  border: 1px solid #735033;
  background: #4d3927;
}
.sidebar-character-card div { display: grid; gap: 3px; }
.sidebar-character-card a { color: #382315; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.sidebar-character-card span,
.sidebar-character-card small { color: #6b5237; font-size: .72rem; }
.sidebar-character-card > small { grid-column: 2; }

.right-sidebar .resource-dock {
  display: block;
  position: static;
  width: auto;
  border-color: #684525;
  background: #e3cc9aef;
}
.right-sidebar .resource-dock[hidden] { display: block; visibility: hidden; }
.right-sidebar h2 {
  margin: 0;
  padding: 8px 10px;
  border-bottom: 1px solid #8c693d;
  color: #422a1a;
  font-size: .9rem;
}
.right-sidebar .resource {
  min-height: 58px;
  grid-template-columns: 35px minmax(0, 1fr);
  padding: 7px 8px;
  border-color: #9a764b;
  background: transparent;
  color: #392719;
}
.right-sidebar .resource-emblem { width: 28px; height: 28px; border-color: #513320; }
.right-sidebar .resource-line { color: #392719; font-size: .72rem; }
.right-sidebar .resource-line strong { color: #3a2719; }
.right-sidebar .resource-meta { color: #775d40; font-size: .62rem; }
.right-sidebar .meter { background: #806b4c52; border-color: #7b5935; }

.sidebar-stats dl { margin: 0; padding: 5px 10px 9px; }
.sidebar-stats dl div { display: flex; justify-content: space-between; gap: 8px; padding: 7px 2px; border-bottom: 1px solid #99764c73; }
.sidebar-stats dl div:last-child { border: 0; }
.sidebar-stats dt { color: #4f3823; }
.sidebar-stats dt i { display: inline-block; width: 21px; color: #8b3d28; font-style: normal; }
.sidebar-stats dd { margin: 0; color: #3e291a; font-weight: 700; font-variant-numeric: tabular-nums; }

.sidebar-actions { padding-bottom: 8px; }
.sidebar-actions a {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 7px 9px 0;
  padding: 8px 9px;
  border: 1px solid #a17a49;
  color: #472e1d;
  background: #ead7a7a8;
  text-decoration: none;
  font-size: .8rem;
}
.sidebar-actions a:hover { color: #fff0c8; background: #6b3d29; }
.sidebar-actions span { width: 20px; color: #7b3427; font-size: 1rem; text-align: center; }

:where(.world-mark, .campfire-view, .adventures-view, .inventory-view, .action-log-view, .character-details,
  .community-view, .shops-view, .market-view, .combat-view, .infirmary-view, .summoning-view) {
  grid-column: 2;
  width: auto;
  min-width: 0;
  margin-left: 0 !important;
}

.world-mark {
  position: relative;
  inset: auto;
  width: auto;
  transform: none;
  text-align: left;
  filter: none;
}

.home-view { display: grid; gap: 11px; }
.home-view[hidden] { display: none; }
.home-hero {
  min-height: clamp(260px, 35vw, 430px);
  display: flex;
  align-items: center;
  padding: clamp(18px, 4vw, 40px);
  border: 2px solid #654326;
  background:
    linear-gradient(90deg, #1e160b14 0 45%, #1e160b00 75%),
    url("/forest-exploration-main.png") center / cover no-repeat;
  box-shadow: inset 0 0 0 4px #ead09b80, var(--panel-shadow);
}
.home-hero-copy {
  width: min(430px, 68%);
  padding: clamp(17px, 3vw, 28px);
  border: 1px solid #8b6438;
  background: #f2dfb7e8;
  box-shadow: 5px 6px 0 #41281969, inset 0 0 18px #9e713536;
}
.home-hero-copy > span { color: #8a3e2b; font-size: .69rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.home-hero-copy h1 {
  margin: 5px 0 10px;
  color: #3c2618;
  font-size: clamp(1.55rem, 3vw, 2.45rem);
  letter-spacing: 0;
  line-height: 1.1;
  text-indent: 0;
  text-shadow: none;
}
.home-hero-copy p { margin: 0 0 18px; color: #5d4730; font-size: .84rem; font-weight: 400; line-height: 1.55; letter-spacing: normal; text-indent: 0; text-transform: none; }
.home-hero-copy a,
.home-destination b {
  display: inline-block;
  padding: 9px 14px;
  border: 1px solid #613221;
  color: #f6e1b4;
  background: linear-gradient(#944b34, #713524);
  text-decoration: none;
  font-size: .77rem;
}

.home-destinations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.home-destination {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 1px solid #8b693e;
  color: #3b291a;
  background: #ead7abe8;
  text-decoration: none;
  box-shadow: var(--panel-shadow);
}
.home-destination > span { display: block; aspect-ratio: 1.45; border: 1px solid #7e5a35; background-position: center; background-size: cover; }
.home-destination-forest > span { background-image: url("/forest-north.png"); }
.home-destination-market > span { background-image: url("/assets/items/cyan-crystal.png"), linear-gradient(135deg, #263e38, #a27c45); background-size: contain, cover; background-repeat: no-repeat; }
.home-destination-camp > span { background-image: url("/eter-autumn-forest.png"); }
.home-destination-summon > span { background-image: url("/eter-gateway.png"); }
.home-destination strong { font-size: .84rem; }
.home-destination small { min-height: 32px; color: #70593d; font-size: .68rem; line-height: 1.35; }
.home-destination b { align-self: end; justify-self: stretch; padding: 7px; text-align: center; font-weight: 400; }

.home-guidance {
  padding: 13px 16px;
  border: 1px solid #86623b;
  background: #ead7abe8;
  box-shadow: var(--panel-shadow);
}
.home-guidance h2 { margin: 0 0 6px; color: #472e1d; font-size: 1rem; }
.home-guidance p { margin: 0 0 10px; color: #624d34; font-size: .78rem; font-weight: 400; line-height: 1.55; letter-spacing: normal; text-indent: 0; text-transform: none; }
.home-guidance div { display: flex; flex-wrap: wrap; gap: 14px; }
.home-guidance a { color: #7c3425; font-size: .76rem; font-weight: 700; }

/* Parchment surfaces shared by feature pages. */
:where(.campfire-view, .adventures-view, .inventory-view, .action-log-view, .character-details,
  .community-view, .shops-view, .market-view, .combat-view, .infirmary-view) { color: var(--ink); }

/* Keep supporting copy readable over the painted scene and light parchment. */
:where(.campfire-view, .adventures-view, .inventory-view, .action-log-view, .character-details,
  .community-view, .shops-view, .market-view, .combat-view, .infirmary-view)
  :where(p, li, label, legend, small) { text-shadow: none; }
.meditation-heading p,
.meditation-note,
.meditation-message,
#inventory-total,
.inventory-message,
.adventure-unlock-hint,
.profile-identity,
.profile-portrait small,
.profile-counter small,
.profile-award small,
.combat-actions small,
.combat-log li span,
.infirmary-empty { color: #59442f !important; }
.meditation-stats legend,
.meditation-controls > label,
.meditation-controls p,
.offering-panel label { color: #4f3a27 !important; }
.meditation-controls strong { color: #376d63 !important; }
.offering-heading h1 { color: #452c1b !important; }
.offering-heading > span,
.offering-select-wrap::after { color: #783b27 !important; }
.inventory-list-status {
  color: #f5e2b7 !important;
  background: #5b3d29 !important;
}
.inventory-toolbar,
.inventory-category-bar,
.inventory-type-bar { background: #dec38fe6 !important; }
.inventory-list-title { color: #3a2719 !important; }
.inventory-category-button,
.inventory-type-button,
.inventory-tab-count { color: #513a25; }
.inventory-category-button:hover { color: #fff0c7; background: #714b31; }
.inventory-category-button[aria-pressed="true"],
.inventory-type-button[aria-pressed="true"] { color: #fff0c7; background: #63422c; }
.inventory-search { border-color: #775334; color: #352519; background: #f3e2ba; }
.inventory-search::placeholder { color: #79654b; opacity: 1; }
.inventory-item-row { color: #352519; background: #ead8afe8; }
.inventory-item-row:nth-child(even) { background: #ddc391e8 !important; }
.inventory-item-row:hover { background: #f3e3bce8; }
.inventory-item-row.is-equipped td { color: #f4e7c8; background: #556044 !important; }
.inventory-item-type { color: #58442e; }
.inventory-quantity,
.inventory-table .inventory-gear-stat { color: #6b4728; }
.inventory-table .inventory-empty { color: #58442e; background: #e3cd9e; }
.action-log-entry { color: #362519; background: #ead8b1e8; }
.action-log-entry:nth-child(even) { background: #ddc391e8; }
.action-log-entry time { color: #604a33; }
.action-log-entry time span:last-child,
.action-log-description,
.action-log-changes,
.action-log-changes > span + span::before { color: #3c2b1d; }
.action-log-outcome.success,
.action-log-changes .is-gain { color: #2f6a38; }
.action-log-outcome.failure,
.action-log-changes .is-loss { color: #8b3027; }
.adventure-result > strong,
.adventure-result p,
.adventure-result > div { color: #493522 !important; }
.character-table th,
.character-table td { color: #3c2b1d; }
.character-table tbody tr:nth-child(even) { background: #ddc391b8; }
.character-table tfoot { color: #f5e2b7; background: #5b3d29; }
.character-stat-value { color: #456a36; }

/* Feature-specific legacy colors were designed for black panels. Normalize them
   when those panels are rendered on parchment. */
.shop-panel-heading .shop-test-prices { color: #f1ddb2 !important; }
.shops-view { color: #493522 !important; }
.shop-directory-card p,
.shop-directory-card span { color: #5d452f !important; }
.shop-quantity-label,
.shop-total { color: #5d452f; }
.shop-type-medical .shop-item-mark,
.shop-type-magical .shop-item-mark,
.shop-type-weapon .shop-item-mark { color: #5a3923 !important; }
.shop-note {
  margin: 10px 0 0;
  padding: 9px 11px;
  border: 1px solid #947043;
  color: #493522 !important;
  background: #ead7abe8;
}

.market-field,
.market-range legend,
.market-view small,
.market-quote,
.market-table td,
.market-table td:nth-child(n+3),
.market-sale-table td:first-child { color: #493522; }
.market-range { border-color: #9b774b; }
.market-sale-table tbody tr.is-selected { background: #c5ae7e !important; }
.community-table td,
.community-table tbody th { color: #3d2b1c; }
.community-tabs a { color: #6c3324; }
.community-tabs a[aria-current="page"] { color: #fff0c8; }

/* Combat keeps its dark arena treatment so its pale combat labels remain legible. */
.combat-fighter,
.combat-panel {
  border-color: #6b5c32 !important;
  color: #d7d3c5 !important;
  background: rgba(10, 16, 15, .95) !important;
  box-shadow: inset 0 3px #28271f, var(--panel-shadow) !important;
}
.combat-actions small { color: #aaa796 !important; }
.combat-log li span { color: #99937f !important; }

.infirmary-panel h2,
.infirmary-panel > p,
.infirmary-panel dt,
.infirmary-panel dd { color: #493522 !important; }
.infirmary-panel dt { background: #d4bb8b; }
.infirmary-timer { border-color: #8b6243; background: #6a3f2f; }
.infirmary-timer span { color: #f2dfbd; }

@media (min-width: 721px) {
  html[data-page="campfire"] .left-sidebar { grid-row: 1 / span 2; }
  html[data-page="campfire"] .campfire-view { grid-row: 1; }
  html[data-page="campfire"] .character-details { grid-row: 2; margin-top: 0; }
}

@media (min-width: 1051px) {
  html[data-page="campfire"] .right-sidebar { grid-row: 1 / span 2; }
}

:where(.meditation-panel, .offering-panel, .character-box, .adventure-progress, .adventure-result,
  .community-panel, .community-tabs, .shop-directory-card, .shop-panel, .market-panel,
  .combat-fighter, .combat-panel, .infirmary-panel) {
  border-color: var(--paper-line) !important;
  color: var(--ink) !important;
  background: #ead7abed !important;
  box-shadow: inset 0 0 0 2px #f7e7bd80, var(--panel-shadow) !important;
}

:where(.community-panel-heading, .shop-panel-heading, .market-panel-title, .character-box > summary,
  .character-subheading) {
  border-color: #8e693e !important;
  color: #f7e4b8 !important;
  background: linear-gradient(#67452d, #4c301f) !important;
}

:where(.adventures-heading h1, .adventure-location-heading h2, .inventory-heading h1,
  .community-page-heading h1, .shop-page-heading h1, .market-heading h1, .combat-heading h1,
  .infirmary-heading h1, .meditation-heading h1) { color: #4a2e1c !important; }

:where(.character-note, .community-copy, .community-test-note, .profile-identity, .shop-note,
  .shop-test-prices, .market-note, .market-heading > span, .infirmary-panel > p,
  .adventure-message, .test-copy) { color: #6c573c !important; }

:where(.character-table, .community-table, .inventory-table, .market-table, .infirmary-directory-table) {
  color: #3c2b1d !important;
  background: #ead9b1e8 !important;
}
:where(.character-table th, .character-table td, .community-table th, .community-table td,
  .inventory-table th, .inventory-table td, .market-table th, .market-table td,
  .infirmary-directory-table th, .infirmary-directory-table td) { border-color: #9e7b4e !important; }
:where(.community-table thead, .market-table th, .inventory-table thead,
  .infirmary-directory-table th) { color: #f3dfb2 !important; background: #61422b !important; }
:where(.community-table tr:nth-child(even), .market-table tbody tr:nth-child(even),
  .inventory-table tbody tr:nth-child(even), .infirmary-directory-table tbody tr:nth-child(even)) { background: #ddc392b8 !important; }

.adventure-tile { border-color: #7c5935; color: #3b291a; background: #e6cf9fe8; box-shadow: var(--panel-shadow); }
.adventure-tile-caption { color: #3f2a1b; background: #e5cd9bdc; }
.adventure-tile-caption strong,
.shop-item-info h3 { color: #452d1c; }
.adventure-tile-status,
.shop-item-type,
.shop-note { color: #70583b; }
.shop-item { border-color: #a07d50; }
.shop-item-mark { background: #d7bd89; border-color: #84613d; }
.shop-price,
.shop-purchase-limit,
.shop-status,
.market-status { color: #7b3424; }
.shop-quantity,
.market-view input,
.market-view select,
.meditation-controls select,
.offering-select-wrap select {
  border-color: #85633e !important;
  color: #3b291a !important;
  background: #f0dfb7 !important;
}
:where(.shop-buy, .shop-retry, .market-button, .meditation-controls button) {
  border-color: #673a26 !important;
  color: #f5e1b7 !important;
  background: linear-gradient(#8e4933, #693120) !important;
}

.character-table a,
.community-link,
.shop-link,
.market-view a,
.combat-fighter-title a,
.infirmary-directory-table a { color: #803624 !important; }
.profile-nameplate,
.profile-portrait,
.profile-counter,
.profile-award,
.profile-actions a,
.profile-actions button { border-color: #987247 !important; color: #3d291b !important; background: #dfc693 !important; }

@media (max-width: 1050px) {
  :root { --left-rail: 196px; }
  .game-stage { grid-template-columns: var(--left-rail) minmax(0, 1fr); }
  .right-sidebar {
    position: static;
    grid-column: 2;
    grid-row: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sidebar-character-card,
  .right-sidebar .resource-dock { grid-row: span 2; }
  .sidebar-stats,
  .sidebar-actions { min-width: 0; }
}

@media (max-width: 900px) {
  .game-header {
    height: auto;
    min-height: 136px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
    padding: 12px;
  }
  .brand { align-self: start; font-size: 1.35rem; }
  .brand-icon { width: 38px; height: 38px; }
  .location { display: none; }
  .mobile-nav-toggle {
    display: inline-flex;
    align-self: start;
    color: #f2dfb4;
    border: 1px solid #b89156;
    background: #4d3020e8;
  }
  .account-area { grid-column: 1 / -1; width: 100%; justify-self: stretch; justify-content: flex-end; }
  .server-clock { margin-right: auto; text-align: left; }
  .game-stage { min-height: calc(100svh - 136px) !important; }
  .home-destinations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .game-stage { grid-template-columns: minmax(0, 1fr); padding: 10px 10px 86px !important; }
  .left-sidebar,
  .right-sidebar,
  :where(.world-mark, .campfire-view, .adventures-view, .inventory-view, .action-log-view, .character-details,
    .community-view, .shops-view, .market-view, .combat-view, .infirmary-view, .summoning-view) {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }
  .left-sidebar { position: relative; }
  .primary-menu { padding-bottom: 10px; }
  .primary-menu:not([hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .right-sidebar { display: grid; grid-template-columns: 1fr; }
  .sidebar-character-card,
  .right-sidebar .resource-dock { grid-row: auto; }
  .home-hero { min-height: 320px; align-items: end; padding: 12px; }
  .home-hero-copy { width: 100%; }
  .home-destinations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-page="eterhome"] body .game-stage { padding-top: 10px !important; }
}

@media (max-width: 430px) {
  .game-header { min-height: 150px; }
  .account-area { align-items: center; }
  .server-state { display: none; }
  .home-destinations { grid-template-columns: 1fr; }
  .home-destination { grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .home-destination > span { grid-row: 1 / 4; aspect-ratio: auto; min-height: 105px; }
  .home-destination b { justify-self: start; }
}