/* Phone layout. Loaded last so it can reshape the shared desktop shell without
   duplicating or changing any game behaviour. */
.mobile-command-bar { display: none; }

@media (max-width: 720px) {
  :root {
    --mobile-gap: 8px;
    font-size: clamp(13px, 3.65vw, 15px);
  }

  html,
  body { max-width: 100%; overflow-x: clip; }

  body { min-width: 0; background: #2a1b12; }

  .site-frame {
    width: 100%;
    min-width: 0;
    border: 0;
    box-shadow: none;
  }

  .game-header {
    position: relative;
    z-index: 9;
    height: 64px;
    min-height: 64px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left));
    border-width: 0 0 3px;
    background: linear-gradient(180deg, #dbc28fe8, #c7a86ee8);
    box-shadow: inset 0 -1px #63401f, 0 2px 5px #2a190f80;
  }

  .game-header .brand {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    gap: 5px;
    max-width: 105px;
    padding: 4px 7px 4px 5px;
    border-width: 1px;
    font-size: clamp(.98rem, 4.7vw, 1.25rem);
    letter-spacing: .08em;
    transform: none;
  }

  .game-header .brand-icon { width: 29px; height: 29px; }
  .game-header .location { display: none; }

  .game-header .account-area {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    width: auto;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 5px;
    padding: 4px 5px;
    border-width: 1px;
    box-shadow: inset 0 0 0 1px #5b3c2438;
  }

  .game-header .server-clock {
    width: auto;
    min-width: 7.4ch;
    margin: 0 auto 0 0;
    text-align: left;
    font-size: .67rem;
  }

  .game-header .server-clock > span,
  .game-header .server-state span { display: none; }
  .game-header .server-state { gap: 0; }
  .game-header .server-state i { width: 7px; height: 7px; }
  .game-header .action-log-trigger { width: 31px; height: 31px; flex-basis: 31px; }
  .game-header .account-chip { min-width: 0; gap: 5px; font-size: .72rem; }
  .game-header .account-chip > a {
    max-width: 74px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .game-header .account-chip button { min-height: 31px; padding: 4px 7px; font-size: .68rem; }

  .mobile-command-bar {
    position: sticky;
    top: 0;
    z-index: 8;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
    border-bottom: 2px solid #53351f;
    background: #dfc998;
    box-shadow: 0 3px 7px #28180f73;
  }

  .mobile-command-bar > a,
  .mobile-command-bar > button {
    grid-column: auto;
    grid-row: auto;
    min-width: 0;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin: 0;
    padding: 4px 2px;
    border: 0;
    border-right: 1px solid #8e6b3e7a;
    border-radius: 0;
    color: #432b1b;
    background: transparent;
    font: 700 clamp(.58rem, 2.6vw, .7rem) Lora, Georgia, serif;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
  }

  .mobile-command-bar > :last-child { border-right: 0; }
  .mobile-command-bar > .is-active,
  .mobile-command-bar > a:focus-visible,
  .mobile-command-bar > button:focus-visible,
  .mobile-command-bar > button[aria-expanded="true"] {
    color: #f7e5bd;
    background: linear-gradient(#74452d, #52301f);
    outline: 0;
  }

  .mobile-command-bar img,
  .mobile-command-bar .mobile-nav-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: sepia(.55) saturate(.85) brightness(.58);
  }
  .mobile-command-bar .is-active img { filter: sepia(.2) brightness(1.75); }
  .mobile-command-bar .mobile-nav-icon { display: grid; align-content: center; gap: 4px; padding: 3px 1px; }
  .mobile-command-bar .mobile-nav-icon i { height: 2px; background: currentColor; }

  html body .game-stage,
  html[data-page="eterhome"] body .game-stage {
    min-height: calc(100svh - 116px) !important;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--mobile-gap);
    padding: var(--mobile-gap) max(var(--mobile-gap), env(safe-area-inset-right)) calc(78px + env(safe-area-inset-bottom)) max(var(--mobile-gap), env(safe-area-inset-left)) !important;
  }

  .left-sidebar {
    order: -20;
    position: relative;
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .left-sidebar:has(.primary-menu:not([hidden])) {
    border: 2px solid #684525;
    background: linear-gradient(#ecd9acf2, #dfc28df2);
    box-shadow: inset 0 0 0 3px #f6e6bb, var(--panel-shadow);
  }

  .primary-menu:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    padding: 8px;
  }

  .left-menu.primary-menu .menu-item { min-width: 0; min-height: 44px; }

  .right-sidebar { display: contents !important; }
  .sidebar-character-card,
  .right-sidebar .resource-dock,
  .cooldown-dock,
  .sidebar-stats,
  .sidebar-actions { width: 100%; min-width: 0; grid-column: 1; grid-row: auto; }

  .sidebar-character-card { order: -30; grid-template-columns: 42px minmax(0, 1fr); padding: 7px 8px; }
  .sidebar-character-card img { width: 42px; height: 42px; padding: 3px; }
  .sidebar-character-card .sidebar-level-ready { justify-self: stretch; align-self: center; grid-column: 2; }

  .right-sidebar .resource-dock,
  .right-sidebar .resource-dock[hidden] {
    order: -29;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    visibility: visible;
  }
  .right-sidebar .resource-dock[hidden] { visibility: hidden; }
  .right-sidebar .resource-dock > h2 { display: none; }
  .right-sidebar .resource {
    min-height: 49px;
    grid-template-columns: minmax(0, 1fr);
    padding: 6px;
    border-right: 1px solid #9a764b;
    border-bottom: 0;
  }
  .right-sidebar .resource:last-child { border-right: 0; }
  .right-sidebar .resource-emblem { display: none; }
  .right-sidebar .resource-line { display: grid; gap: 2px; margin: 0; font-size: clamp(.56rem, 2.6vw, .69rem); }
  .right-sidebar .resource-line strong { justify-self: start; }
  .right-sidebar .resource-meta { display: none; }
  .right-sidebar .meter { margin-top: 4px; }

  .cooldown-dock {
    order: -28;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cooldown-dock[hidden] { display: none; }
  .cooldown-dock > h2 { display: none; }
  .cooldown-row {
    min-width: 0;
    min-height: 43px;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 5px;
    padding: 5px;
    border-right: 1px solid #9a764b;
    border-bottom: 0;
  }
  .cooldown-row:last-child { border-right: 0; }
  .cooldown-icon { width: 27px; height: 27px; }
  .cooldown-icon svg { width: 17px; height: 17px; }
  .cooldown-body strong,
  .cooldown-body time { font-size: clamp(.53rem, 2.25vw, .64rem); }
  .cooldown-meter { height: 5px; }

  :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) {
    order: 0;
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    min-width: 0;
    margin: 0 !important;
  }

  /* Older tablet rules give a few views an explicit second column/row. The
     phone shell has one column, so reset those coordinates with equal or
     greater specificity to prevent invisible implicit tracks. */
  .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: 1; grid-row: auto; }
  html[data-page="campfire"] .character-details { grid-column: 1; grid-row: auto; }

  .sidebar-stats { order: 30; }
  .sidebar-actions { order: 31; }

  .sidebar-stats dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 5px 8px 8px;
  }
  .sidebar-stats dl div { min-width: 0; padding: 7px 5px; }
  .sidebar-stats dl div:nth-last-child(-n + 2) { border-bottom: 0; }

  .sidebar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 0 7px 7px;
  }
  .sidebar-actions h2 { grid-column: 1 / -1; margin-inline: -7px; }
  .sidebar-actions a { min-width: 0; margin: 0; padding: 8px 7px; }

  .home-view { gap: var(--mobile-gap); }
  .home-hero {
    min-height: 190px;
    align-items: center;
    padding: 10px;
  }
  .home-hero-copy { width: 100%; padding: 15px; }
  .home-hero-copy h1 { font-size: clamp(1.55rem, 7.5vw, 2.05rem); }
  .home-hero-copy p { margin-bottom: 12px; }

  .home-destinations { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mobile-gap); }
  .home-destination {
    min-width: 0;
    min-height: 145px;
    display: flex;
    flex-direction: column;
    grid-template: none;
    padding: 12px 10px 10px;
  }
  .home-destination > span { display: none; }
  .home-destination strong { font-size: .82rem; }
  .home-destination small { min-height: 38px; }
  .home-destination b { width: 100%; margin-top: auto; }
  .home-guidance { padding: 12px; }

  .campfire-tabs { padding-inline: 0; }
  .campfire-tabs button { min-width: 0; flex: 1 1 0; padding-inline: 7px; }
  .meditation-panel,
  .campfire-workspace .offering-panel { padding: 14px; }
  .meditation-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meditation-controls { grid-template-columns: minmax(0, 1fr); }
  .meditation-controls p { grid-column: 1; grid-row: auto; }
  .character-equipment { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .inventory-table-wrap,
  .market-table-wrap,
  .community-table-wrap,
  .infirmary-directory { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }

  .shop-grid { grid-template-columns: minmax(0, 1fr); }
  .summoning-layout { grid-template-columns: minmax(0, 1fr); }
  .combat-arena { grid-template-columns: minmax(0, 1fr); }
  .combat-silhouette { height: clamp(215px, 72vw, 310px); }

  .chat-dock {
    left: max(4px, env(safe-area-inset-left));
    right: max(4px, env(safe-area-inset-right));
    bottom: env(safe-area-inset-bottom);
    width: auto;
  }
}

@media (max-width: 390px) {
  .game-header .server-state,
  .game-header .server-clock { display: none; }
  .game-header .account-chip { margin-left: auto; }
  .mobile-command-bar > a,
  .mobile-command-bar > button { min-height: 49px; }
  .home-destination { min-height: 136px; padding-inline: 8px; }
  .meditation-stats { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-command-bar .mobile-nav-icon i { transition: none; }
}