:root {
  --game-max-width: 1600px;
  --layout-gutter: clamp(18px, 2.6vw, 42px);
  --sidebar-width: clamp(220px, 18vw, 278px);
  --content-offset: calc(var(--sidebar-width) + clamp(14px, 2vw, 32px));
  font-size: clamp(14px, calc(13px + 0.16vw), 16px);
}

img,
svg,
video,
canvas { max-width: 100%; }

input,
select,
textarea { max-width: 100%; }

.site-frame { width: min(100%, var(--game-max-width)); }
body::before { left: max(0px, calc((100vw - var(--game-max-width)) / 2)); }
body::after { right: max(0px, calc((100vw - var(--game-max-width)) / 2)); }
.game-stage { padding-inline: var(--layout-gutter); }
.left-sidebar { left: var(--layout-gutter); width: var(--sidebar-width); }

:where(.campfire-view, .adventures-view, .inventory-view, .action-log-view, .character-details,
  .community-view, .shops-view, .market-view, .combat-view, .infirmary-view, .summoning-view) {
  margin-left: var(--content-offset);
  min-width: 0;
}

.mobile-nav-toggle { display: none; }
.primary-menu[hidden] { display: none !important; }

@media (max-width: 1100px) {
  :root {
    --layout-gutter: clamp(14px, 2.3vw, 24px);
    --sidebar-width: 226px;
  }

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

  .site-frame { width: 100%; }
  .game-header { padding-inline: var(--layout-gutter); }
  .game-header .location-rule { display: none; }
  .account-area { gap: 11px; }
  .server-state span { display: none; }

  html body .game-stage {
    height: auto;
    min-height: calc(100svh - 76px);
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    align-content: start;
    align-items: start;
    gap: 18px;
    padding: 24px var(--layout-gutter) 36px;
  }

  html[data-page="eterhome"] body .game-stage { padding-top: 230px; }
  .left-sidebar {
    position: sticky;
    inset: 16px auto auto;
    grid-column: 1;
    width: 100%;
  }
  .world-mark { position: absolute; top: 42px; left: 50%; width: min(520px, 72vw); transform: translateX(-50%); }

  :where(.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;
    margin-left: 0;
  }

  .campfire-view { grid-template-columns: 1fr; }
  .offering-panel { width: 100%; }
  .character-details { grid-column: 2; padding: 0; }
}

@media (max-width: 800px) {
  :root { --layout-gutter: clamp(10px, 3.5vw, 18px); }

  .game-header {
    min-height: 0;
    height: auto;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px 12px;
    padding: max(9px, env(safe-area-inset-top)) max(var(--layout-gutter), env(safe-area-inset-right)) 10px max(var(--layout-gutter), env(safe-area-inset-left));
  }
  .game-header .brand { grid-column: 1; grid-row: 1; justify-self: start; font-size: 1.2rem; }
  .brand-icon { width: 40px; height: 40px; }
  .location { display: none; }
  .mobile-nav-toggle {
    grid-column: 2;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 11px;
    border: 1px solid rgba(217, 182, 109, .42);
    color: #ead9af;
    background: #171914;
    cursor: pointer;
  }
  .mobile-nav-toggle:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
  .mobile-nav-icon { display: grid; width: 19px; gap: 4px; }
  .mobile-nav-icon i { display: block; height: 1px; background: currentColor; transition: transform .16s ease, opacity .16s ease; }
  .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-icon i:first-child { transform: translateY(5px) rotate(45deg); }
  .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-icon i:nth-child(2) { opacity: 0; }
  .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-icon i:last-child { transform: translateY(-5px) rotate(-45deg); }
  .account-area {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    justify-self: stretch;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px 11px;
  }
  .server-clock { margin-right: auto; text-align: left; }
  .action-log-trigger { width: 36px; height: 36px; flex-basis: 36px; }
  .account-chip button { min-height: 36px; }

  html body .game-stage {
    min-height: calc(100svh - 112px);
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 14px max(var(--layout-gutter), env(safe-area-inset-right)) calc(82px + env(safe-area-inset-bottom)) max(var(--layout-gutter), env(safe-area-inset-left));
  }
  html[data-page="eterhome"] body .game-stage { padding-top: 190px; }
  .world-mark { top: 30px; width: min(480px, 88vw); }
  .world-mark h1 { font-size: clamp(2.8rem, 15vw, 4.4rem); }

  .left-sidebar {
    position: relative;
    inset: auto;
    grid-column: 1;
    width: 100%;
  }
  .resource-dock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resource-money { min-height: 0; }
  .primary-menu:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    padding: 10px;
  }
  .left-menu.primary-menu .panel-title,
  .left-menu.primary-menu .panel-section-divider { display: block; grid-column: 1 / -1; }
  .left-menu.primary-menu .panel-title { margin: 9px 5px 4px; }
  .left-menu.primary-menu .panel-section-divider { margin: 8px 5px; }
  .left-menu.primary-menu .menu-item {
    min-height: 48px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 8px;
    padding: 7px 9px;
    font-size: .8rem;
    text-align: left;
  }
  .left-menu.primary-menu .menu-item span,
  .left-menu.primary-menu .menu-item .menu-icon { width: 20px; height: 20px; flex-basis: 20px; font-size: .9rem; }

  :where(.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;
    width: 100%;
    margin-left: 0;
  }

  .campfire-view,
  .character-details { margin-bottom: 0; }
  .adventures-heading h1,
  .combat-heading h1,
  .infirmary-heading h1 { font-size: clamp(1.65rem, 7vw, 2.2rem); }
  .adventure-location { padding: clamp(12px, 4vw, 18px); }
  .inventory-table { min-width: 640px; }
  .infirmary-directory { max-width: 100%; overflow-x: auto; }
  .infirmary-directory-table { min-width: 560px; }
  .combat-arena { grid-template-columns: minmax(0, 1fr); }
  .combat-versus { text-align: center; }
  .combat-silhouette { height: clamp(230px, 80vw, 330px); }
  .summoning-circle-panel { overflow: hidden; }

  .chat-dock {
    left: max(5px, env(safe-area-inset-left));
    right: max(5px, env(safe-area-inset-right));
    bottom: env(safe-area-inset-bottom);
    width: auto;
  }
  .chat-window-body { height: min(520px, 70svh); }
}

@media (max-width: 520px) {
  .game-header .brand { letter-spacing: .16em; }
  .server-clock > span { display: none; }
  .resource { grid-template-columns: 1fr; padding: 8px 9px; }
  .resource-emblem { display: none; }
  .resource-line { margin-bottom: 5px; }
  .resource-meta { gap: 4px; }
  .meditation-stats { grid-template-columns: 1fr; }
  .meditation-controls { grid-template-columns: 1fr; }
  .meditation-controls p { grid-column: 1; grid-row: auto; }
  .character-equipment { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-user { grid-template-columns: 1fr; }
  .profile-portrait { min-height: 210px; }
  .profile-awards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .action-log-head,
  .action-log-entry { grid-template-columns: minmax(0, 1fr) 76px; }
  .action-log-entry time { font-size: .68rem; }
  .chat-toggle { font-size: 11px !important; }
}

@media (max-width: 380px) {
  .game-header { gap: 7px; }
  .mobile-nav-toggle > span:last-child { display: none; }
  .server-state { display: none; }
  .account-chip { margin-left: auto; }
  .left-menu.primary-menu .menu-item { font-size: .72rem; }
  .adventure-grid { grid-template-columns: 1fr; }
}

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