/* Mobile shares the desktop palette, with a document that can scroll naturally.
   Desktop layout sizes saved by the player never constrain this view. */
.mobile-player-health,.quick-hint-mobile,.mobile-party-toggle,.mobile-party-options { display:none; }
.mobile-chat-toggle,.mobile-chat-drawer { display:none; }
.mobile-nav-edges { display:none; }
.mobile-settings { margin:28px 0; }
.mobile-channel-settings { margin:16px 0; padding:16px; border:1px solid var(--border); border-radius:7px; min-width:0; }
.mobile-channel-settings legend { padding:0 6px; color:var(--text); font-weight:600; }
.mobile-channel-settings p { color:var(--muted); font-size:13px; line-height:1.6; margin:0 0 12px; }
.mobile-channel-settings > div { display:flex; flex-wrap:wrap; gap:8px; }
.mobile-channel-settings label { display:flex; align-items:center; gap:9px; min-height:42px; padding:8px 12px; border:1px solid var(--border); border-radius:5px; cursor:pointer; }
.mobile-channel-settings label[data-channel="world"] { color:#F2B84B; }
.mobile-channel-settings label[data-channel="party"] { color:#58C7E8; }
.mobile-channel-settings label[data-channel="field"] { color:#D7DCE2; }
.mobile-channel-settings label[data-channel="guild"] { color:#5FD36D; }
.mobile-channel-settings label[data-channel="whisper"] { color:#dba5e9; }
.mobile-settings input[type="checkbox"] { flex:none; width:18px; height:18px; min-height:0; margin:0; accent-color:#9ea97c; }
.mobile-slots-setting { display:flex; align-items:flex-start; gap:12px; cursor:pointer; }
.mobile-slots-setting > input { margin-top:3px; }
.mobile-slots-setting strong,.mobile-slots-setting small { display:block; }
.mobile-slots-setting small { margin-top:6px; color:var(--muted); line-height:1.6; }

@media (max-width:1023px) {
  :root {
    color-scheme:dark;
    --bg:#24211c; --sidebar:#1e211b; --panel:#302c24; --panel-soft:#373229;
    --border:#4b4437; --border-soft:#413b30; --text:#e4dcc9; --muted:#b5aa92;
    --dim:#988e78; --gold:#c8ac75; --green:#9da77c; --red:#c58b70; --accent:#c0b181;
  }
  html { scroll-padding-bottom:90px; }
  html,body { scrollbar-width:none; scrollbar-gutter:auto; }
  html::-webkit-scrollbar,body::-webkit-scrollbar { display:none; width:0; height:0; }
  body { background:var(--bg); overflow:auto; }
  #app,.main,.content,#page-content { height:auto; min-height:0; overflow:visible; }
  #app { display:block; }
  .main { margin:0; padding:0; }
  .content {
    display:flex; flex-direction:column; gap:12px;
    padding:calc(10px + env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) calc(82px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
  }
  .footer { display:none; }
  .panel { color:var(--text); background:var(--panel); border-color:var(--border); box-shadow:none; }
  input,select { color:var(--text); background:#28251f; border-color:#504738; border-radius:5px; }
  input::placeholder { color:#9d927b; }
  input:focus,select:focus { border-color:#a89d70; box-shadow:0 0 0 2px #a89d7018; }
  .btn { color:#d0c6ad; background:#38372a; border-color:#57553e; border-radius:5px; min-height:42px; }
  .btn.primary { color:#fff7e5; background:#64764c; border-color:#64764c; box-shadow:none; }
  .btn.secondary { color:#c5bea6; background:#353128; border-color:#57503e; }
  .text-btn { color:#b7b08b; }
  .icon-btn { border-color:#56583f; color:#b0b98a; }
  .progress { background:#454033; border-radius:3px; }
  .progress.hp > span { background:#ae715d; }
  .progress.xp > span { background:#7c8b58; }
  .count-pill { color:#bcc09b; background:#b4b67d12; }

  /* Every destination remains accessible by swiping the bottom navigation. */
  .sidebar {
    position:fixed; z-index:30; top:auto; left:0; right:0; bottom:0; width:auto;
    height:calc(66px + env(safe-area-inset-bottom)); min-height:0;
    display:flex; flex-direction:row; align-items:center; gap:4px;
    padding:3px calc(26px + env(safe-area-inset-right)) calc(3px + env(safe-area-inset-bottom)) calc(26px + env(safe-area-inset-left));
    background:var(--sidebar); border:0; border-top:1px solid var(--border);
    overflow-x:auto; overflow-y:hidden; scrollbar-width:none; backdrop-filter:none;
    touch-action:pan-x; overscroll-behavior-x:contain; user-select:none;
    scroll-snap-type:x mandatory; scroll-padding-left:calc(26px + env(safe-area-inset-left)); scroll-padding-right:calc(26px + env(safe-area-inset-right));
  }
  .mobile-nav-edges { display:block; position:fixed; z-index:32; inset:auto 0 0; height:calc(66px + env(safe-area-inset-bottom)); pointer-events:none; }
  .mobile-nav-arrow:not([hidden]) { display:flex; align-items:center; justify-content:center; position:absolute; top:1px; bottom:0; width:26px; padding:0 4px env(safe-area-inset-bottom); border:0; border-radius:0; color:#d8c896; background:var(--sidebar); pointer-events:auto; cursor:pointer; }
  .mobile-nav-arrow-left { left:env(safe-area-inset-left); }
  .mobile-nav-arrow-right { right:env(safe-area-inset-right); }
  .mobile-nav-arrow svg { width:18px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .mobile-nav-arrow:focus-visible { outline:2px solid #d8c896; outline-offset:-3px; }
  .sidebar[data-free-scroll="true"] { scroll-snap-type:none; }
  .sidebar::-webkit-scrollbar { display:none; }
  .sidebar nav,.sidebar .sidebar-bottom { display:contents; }
  .sidebar .brand,.sidebar .sidebar-divider,.sidebar .nav-label,.sidebar .journey-note,.sidebar .server-status { display:none; }
  .sidebar .nav-item,.sidebar .nav-item[data-page] {
    display:flex; flex:0 0 var(--mobile-nav-item-width,100px); flex-direction:column; justify-content:center; align-items:center;
    min-width:0; width:var(--mobile-nav-item-width,100px); height:58px; margin:0; padding:7px;
    gap:5px; border-radius:5px; color:#b6baa6; background:none;
    scroll-snap-align:start;
  }
  .sidebar .nav-item > .icon { width:19px; height:19px; }
  .sidebar .nav-item > span:not(.nav-badge) { font-size:max(10px,var(--ui-font-navigation)); white-space:nowrap; }
  .sidebar .nav-item.active { background:#e7dec317; color:#f0e5bf; border-color:#c9ba8230; }
  .sidebar .nav-item.active .icon { color:#dccb8c; }
  .sidebar .nav-badge { color:#e9d5a2; background:#c4ac7124; border:0; }

  .hud.hud-adventure { --hud-inner-gap:14px; display:flex; flex-direction:column; height:auto; min-height:0; gap:14px; padding:10px; margin:0; }
  .hud-adventure .hud-character { flex:auto; width:100%; min-width:0; padding:0; }
  .hud-adventure .hud-character-heading { justify-content:space-between; gap:8px; flex-wrap:wrap; }
  .hud-adventure .hud-identity { flex:1 1 auto; min-width:0; gap:7px; }
  .hud-adventure .hud-identity .hud-name { min-width:0; }
  .hud-adventure .hud-identity .hud-name strong,.hud-adventure .hud-name > .guild-tag { font-size:max(13px,var(--ui-font-hud)); white-space:normal; overflow-wrap:anywhere; }
  .hud-adventure .hud-resources { margin-left:auto; }
  .hud-adventure .hud-resources::before { display:none; }
  .hud.hud-adventure .hud-stat > span,.hud.hud-adventure .hud-stat strong,.hud.hud-adventure .hud-bar > div:first-child,.hud-adventure .hud-bar strong { font-size:max(12px,var(--ui-font-hud)); }
  .hud-adventure .hud-professions { display:none; }
  .hud-adventure .hud-party { flex:auto; width:100%; padding:12px 0 0; font-size:max(12px,var(--ui-font-hud)); }
  .hud-adventure .hud-party::before { width:100%; height:1px; bottom:auto; }
  .hud-adventure .hud-party-roster { width:100%; grid-template-columns:calc(6ch + 2.4em) minmax(0,1fr) max-content; grid-template-rows:repeat(4,minmax(var(--hud-line),auto)); gap:4px 8px; }
  .hud-adventure .hud-party-roster:not(:has(.hud-party-member)) { grid-template-rows:auto; }
  .hud-adventure .hud-party-name { white-space:normal; overflow-wrap:anywhere; }
  .hud-adventure .hud-party-heading,.hud-adventure .hud-party-leave { font-size:max(11px,var(--ui-font-hud)); min-height:28px; }
  .hud-adventure .hud-party { padding-top:6px; }
  .hud-adventure .hud-party-heading { display:none; }
  .mobile-party-toggle { display:flex; flex:1; align-items:center; gap:8px; min-height:40px; padding:0; border:0; background:none; color:#bcb68e; font-size:max(12px,var(--ui-font-hud)); text-align:left; cursor:pointer; }
  .mobile-party-toggle > .icon { width:14px; height:14px; }
  .mobile-party-toggle[aria-expanded="true"] > .icon { transform:rotate(90deg); }
  .mobile-party-toggle > span:first-of-type { text-transform:uppercase; letter-spacing:1.5px; }
  .mobile-party-count { color:var(--muted); font-variant-numeric:tabular-nums; }
  .mobile-party-options.icon-btn { display:grid; place-items:center; width:40px; min-height:40px; padding:8px; border:0; background:none; }
  .hud-adventure .hud-party[data-mobile-expanded="false"] .hud-party-roster,
  .hud-adventure .hud-party[data-mobile-expanded="false"] .hud-party-leave { display:none; }

  .world-layout { display:flex; flex-direction:column; height:auto; min-height:0; gap:0; border:1px solid #4a4232; border-radius:9px; background:radial-gradient(ellipse at 20% 5%,#403c2f 0,transparent 65%),#2d2a23; }
  .world-main,.world-storage { width:100%; height:auto; min-height:0; container-type:normal; }
  .gameplay-frame,.gameplay-frame:has(.enemy:nth-child(3)) { display:flex; flex-direction:column; gap:22px; height:auto; min-height:0; padding:12px; border:0; background:none; box-shadow:none; container-type:normal; overflow:visible; }
  .scene-layout { display:contents; }
  .scene-layout > .map-panel,.scene-layout > .location-panel,.scene-layout > .enemies-panel,.scene-layout > .people-panel { width:100%; height:auto; min-height:0; padding:0; border:0; background:none; box-shadow:none; overflow:visible; }
  .scene-layout > .map-panel { order:0; display:block; }
  .scene-layout > .enemies-panel { order:1; }
  .scene-layout > .location-panel { order:4; display:block; }
  .scene-layout > .people-panel { order:5; }
  .map-stage { min-height:0; padding:0; background:none; overflow:visible; }
  .map-north { display:none; }
  .tile-grid { width:100%; max-width:600px; margin:0 auto; aspect-ratio:1; transform:none; gap:1px; padding:0; border:3px solid #4b4538; outline:1px solid #736950; border-radius:2px; background:#000; box-shadow:none; }
  .tile { border:0; border-radius:0; background:#000; }
  .tile img { filter:brightness(1.12) saturate(.85); }
  .tile.blocked img { filter:none; opacity:1; mix-blend-mode:normal; }
  .tile.blocked:after { display:none; }
  .tile.unmapped { background:#000; }
  /* Keep the shield centred even when other players arrive on this tile. */
  .tile-grid .player-marker { --player-marker-size:clamp(28px,54cqw,40px); top:50%; left:50%; }
  .tile-grid .tile-players { height:18px; min-width:18px; padding:0 2px; font-size:13px; right:2px; bottom:2px; }
  #tile-grid .tile-quest { top:1px; right:2px; width:16px; height:26px; font-size:26px; }
  @container map-tile (max-width:54px) {
    .tile-grid .tile-players { height:16px; min-width:16px; padding:0 1px; font-size:12px; right:1px; bottom:1px; }
  }
  .cooldown-track { background:none; margin:3px 0 0; }
  .cooldown-track > span { background:#8e9568; }
  .world-layout .panel-heading { height:auto; min-height:26px; padding:0; border:0; background:none; }
  .world-layout .panel-heading h2 { color:#b9aa87; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.7px; }
  .world-layout .panel-heading > div > .icon { display:none; }
  .world-layout .panel-heading .subtle { font-size:10px; color:#a99b7d; }
  .world-layout .panel-heading > div { gap:8px; flex-wrap:wrap; }
  .mobile-player-health { display:inline-flex; align-items:center; gap:4px; color:#d9c9b5; font-size:max(12px,var(--ui-font-encounter)); font-variant-numeric:tabular-nums; }
  .mobile-player-health .icon { display:block; width:14px; height:14px; color:#c58b70; }
  .mobile-player-health strong { font-weight:600; }
  .mobile-player-health > span { color:#b5aa92; }
  #enemy-panel .enemy-list { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:none; grid-auto-rows:auto; height:auto; min-height:0; overflow:visible; scrollbar-gutter:auto; padding:8px 0 0; gap:8px; }
  #enemy-panel .enemy { min-height:62px; padding:0; border:0; background:none; }
  #enemy-panel .enemy-empty[aria-hidden="true"] { display:none; }
  #enemy-panel .enemy-empty { min-height:0; }
  #enemy-panel .attack-btn { min-height:42px; }
  .location-image { background-image:none!important; background-color:transparent; min-height:0; height:auto; overflow:visible; margin:0 0 10px; }
  .location-image:after,.location-symbol { display:none; }
  .location-overline { position:static; color:#aa9e7e; font-size:11px; letter-spacing:2px; text-shadow:none; }
  .location-body { padding:0; overflow:visible; }
  .location-title { flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:14px; }
  .location-title h2 { color:#e6d8b9; font:400 30px/1.15 var(--serif); letter-spacing:-.5px; }
  .location-title .field-coordinates { font-size:12px; color:#a8b585; }
  .location-body > p { color:#bdb29a; font-size:max(14px,var(--ui-font-field)); line-height:1.65; }
  .field-actions { margin-top:18px; gap:8px; }
  .field-actions .btn { min-height:44px; }
  .action-status { color:#a6ab82; font-size:12px; margin-top:14px; }
  .status-dot { background:#939d6d; }
  .people-body { padding:8px 0 0; overflow:visible; }
  #people-panel .person { gap:8px; min-width:0; width:100%; }
  #people-panel .person > .person-line { flex:1 1 0; }
  .person .person-line strong { width:auto; white-space:normal; overflow:visible; overflow-wrap:anywhere; }
  .person-actions .icon-btn { min-width:36px; min-height:42px; }

  /* Scroll chaining is intentional: reaching a journal edge continues the page. */
  .gameplay-frame > .journal { display:contents; }
  .journal .activity-pane,.journal .chat-pane { display:flex; flex-direction:column; min-height:0; padding:0; border:0; background:none; }
  .journal .activity-pane { order:2; }
  .journal .chat-pane { order:3; }
  .journal .journal-entries { flex:none; height:auto; min-height:64px; max-height:220px; padding:6px 0; overflow:auto; overscroll-behavior-y:auto; scrollbar-gutter:auto; scrollbar-width:thin; }
  .journal-entry,.journal-entry > span { font-size:max(13px,var(--ui-font-journal)); overflow-wrap:anywhere; }
  .journal-entry > span { min-width:0; }
  .journal-entry time { color:#97886f; font-size:11px; }
  .journal-empty { color:#a6987b; font-size:13px; }
  .chat-form { display:grid; grid-template-columns:minmax(0,1fr) auto; background:none; border:0; padding:6px 0 0; gap:8px; }
  .chat-form input,.chat-form select { min-height:42px; background:#302a20; border-color:#544a36; padding:8px; font-size:max(13px,var(--ui-font-journal)); }
  #chat-form .chat-routing { height:42px; grid-template-columns:9em minmax(0,1fr); }
  .chat-form .icon-btn { width:42px; min-height:42px; }

  .mobile-chat-toggle:not([hidden]) { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; position:fixed; z-index:35; left:0; top:48%; width:calc(28px + env(safe-area-inset-left)); min-width:0; min-height:98px; padding:9px 3px 9px max(3px,env(safe-area-inset-left)); border:1px solid #807557; border-left:0; border-radius:0 9px 9px 0; background:#302f25; color:#e4d9b8; box-shadow:2px 3px 12px #0005; cursor:pointer; }
  .mobile-chat-toggle > .icon { width:18px; height:18px; }
  .mobile-chat-toggle > span:not(.mobile-chat-badge) { font-size:11px; letter-spacing:1px; writing-mode:vertical-rl; }
  .mobile-chat-badge:not([hidden]) { display:grid; place-items:center; position:absolute; top:-10px; right:-7px; min-width:23px; height:23px; padding:0 5px; border:2px solid #302c24; border-radius:12px; background:#debd79; color:#262217; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }
  .mobile-chat-drawer[open] { display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0; margin:0; width:min(440px,calc(100% - 28px)); max-width:none; height:100%; height:100dvh; max-height:none; padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); border:1px solid #73684e; border-left:0; border-radius:0 12px 12px 0; background:linear-gradient(145deg,#363429,#28261f); color:var(--text); box-shadow:10px 0 36px #0005; overflow:hidden; }
  .mobile-chat-drawer::backdrop { background:#0b0c09a8; }
  .mobile-chat-header { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:12px; border-bottom:1px solid #685f454f; }
  .mobile-chat-header > div { display:flex; align-items:center; gap:10px; color:#d7c79d; }
  .mobile-chat-header h2 { margin:0; font:400 25px var(--serif); }
  .mobile-chat-header .icon-btn { width:42px; height:42px; }
  .mobile-chat-drawer .chat-pane { display:flex; flex:1; flex-direction:column; min-height:0; padding-top:12px; border:0; }
  .mobile-chat-drawer .chat-pane > .panel-heading { display:none; }
  .mobile-chat-drawer .journal-entries { flex:1 1 0; min-height:0; height:auto; max-height:none; overflow:auto; padding:0 0 10px; scrollbar-width:thin; overscroll-behavior-y:contain; }
  .mobile-chat-drawer .chat-form { flex:none; margin:0; padding-top:12px; border-top:1px solid #685f454f; }
  .mobile-chat-drawer .chat-form input,.mobile-chat-drawer .chat-form select { font-size:max(16px,var(--ui-font-journal)); }
  .mobile-chat-drawer #chat-form .chat-routing { grid-template-columns:8em minmax(0,1fr); }
  .mobile-chat-drawer .chat-routing .whisper-recipient { min-width:0; }
  .mobile-chat-drawer .journal-entry time { font-size:11px; }

  .world-storage { display:flex; flex-direction:column; gap:20px; padding:20px 12px 14px; border:0; border-top:1px solid #62574360; }
  .world-storage .panel { display:flex; flex-direction:column; padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
  .world-storage .pack-panel { flex:none; min-height:0; }
  .pack-heading { padding:0; }
  .world-storage .panel-heading h2 { font:400 21px var(--serif); text-transform:none; letter-spacing:0; color:#d2c2a0; }
  #pack-search { margin:10px 0 0; min-height:42px; font-size:14px; }
  .pack-list { flex:none; min-height:0; max-height:300px; margin-top:8px; padding:0; overflow:auto; overscroll-behavior-y:auto; }
  .pack-item { min-height:44px; padding:6px 0; border-color:#4c433280; }
  .pack-item strong,.pack-item span { font-size:max(13px,var(--ui-font-inventory)); }
  .pack-use { min-height:36px; }
  .quick-label { color:#ac9e80; font-size:11px; letter-spacing:1px; }
  .quick-label .quick-hint-desktop { display:none; }
  .quick-label .quick-hint-mobile { display:inline; font-size:10px; letter-spacing:0; }
  .quickslots { display:grid; grid-template-columns:minmax(0,1fr); gap:5px; }
  .quickslots .quickslot,.quickslots .quickslot.filled { min-height:42px; padding:6px 10px; background:#332f24; border:1px solid #554d38; color:#aaa781; border-radius:4px; }
  .quickslot kbd { color:#a79a7b; }
  .quickslots .quickslot.filled { background:#42482d; border-color:#737d51; }
  .quickslot.filled > span { color:#c8d6a1; }
  #app:not(.in-tutorial):not([data-mobile-empty-slots="true"]) .quickslots .quickslot:not(.filled),
  #app:not(.in-tutorial):not([data-mobile-empty-slots="true"]) .quick-panel:not(:has(.quickslot.filled)) { display:none; }
  /* The assignment step needs empty slots even with the normal mobile default. */
  #app.in-tutorial .quick-panel,#app.in-tutorial .quickslots .quickslot:not(.filled) { display:flex; }
  .layout-handle { display:none; }
  .atlas-page,.atlas-panel { height:auto; }
  .atlas-scroll { flex:none; height:440px; max-height:70svh; }
}