/* Approved mobile layout: map/menu above, thumb controls below, world in between. */
@media (max-width:750px), (pointer:coarse) and (max-width:1100px), (max-width:1100px) and (max-height:600px) {
  #game {
    --mobile-map-size:114px;
    --mobile-menu-size:36px;
    --mobile-skill-size:58px;
    --mobile-stick-size:120px;
    --mobile-edge:16px;
    --mobile-bottom:calc(var(--safe-bottom,0px) + 28px);
  }
  #game .map-card {
    left:calc(var(--safe-left,0px) + var(--mobile-edge));right:auto;
    top:calc(var(--safe-top,0px) + 12px);bottom:auto;width:var(--mobile-map-size);
    display:flex;flex-direction:column;gap:5px;
  }
  #game .map-card .minimap-frame {order:0;width:100%}
  #game .map-card .section-title {order:1;margin:0;min-height:22px;padding:3px 5px;font-size:9px}
  #game #map-expand kbd {display:none}
  #game .map-coordinates {
    display:block;position:static;order:2;transform:none;width:100%;
    margin:0;padding:3px 5px;text-align:center;font-size:10px;line-height:14px;
    font-variant-numeric:tabular-nums;background:#07120ce6;
  }
  #game #map-expand {width:32px;height:32px;font-size:23px}
  #game .hud-menu {
    top:calc(var(--safe-top,0px) + 12px);right:calc(var(--safe-right,0px) + var(--mobile-edge));
    display:flex;flex-wrap:wrap;justify-content:flex-end;gap:18px 3px;
    max-width:calc(100% - var(--safe-left,0px) - var(--safe-right,0px) - var(--mobile-map-size) - 3 * var(--mobile-edge));
  }
  #game .hud-menu button,#game .hud-menu #travel-btn,#game .hud-menu .hud-menu-utility {
    width:var(--mobile-menu-size);height:var(--mobile-menu-size);flex-shrink:0;
  }
  #game .hud-menu .hud-menu-label {display:block;font-size:9px;line-height:14px}
  #game .hud-menu kbd {display:none}
  #game .resource-card {display:none}
  #game .gold-display {top:calc(var(--safe-top,0px) + 145px);right:calc(var(--safe-right,0px) + var(--mobile-edge));font-size:10px;padding:3px 7px}
  #game #joystick {
    display:block;left:calc(var(--safe-left,0px) + var(--mobile-edge));bottom:var(--mobile-bottom);
    width:var(--mobile-stick-size);height:var(--mobile-stick-size);border-radius:50%;z-index:var(--z-control);
    background:radial-gradient(circle,#172a1f33 34%,#07140e55 72%);
    border:2px solid #c7a96a99;box-shadow:inset 0 0 15px #0004,0 0 0 2px #15251b55;touch-action:none;
  }
  #game #joystick-knob {
    width:44px;height:44px;left:calc(50% - 22px);top:calc(50% - 22px);
    border:2px solid #d9c08b;border-radius:50%;background:radial-gradient(circle at 35% 25%,#e5d4a5,#928064 75%);
    box-shadow:0 2px 8px #0008;pointer-events:none;
  }
  #game #hotbar {
    left:auto;right:calc(var(--safe-right,0px) + var(--mobile-edge));bottom:var(--mobile-bottom);
    transform:none;display:block;width:218px;height:220px;z-index:var(--z-control);
    padding:0;border:0;border-radius:0;background:none;backdrop-filter:none;pointer-events:none;
  }
  #game #hotbar .slot {
    position:absolute;width:var(--mobile-skill-size);height:var(--mobile-skill-size);
    padding:3px;border:2px solid #c6a55f;border-radius:50%;overflow:hidden;pointer-events:auto;
    background:radial-gradient(circle at 35% 25%,#365143,#102019 72%);
    box-shadow:0 0 0 2px #102019,0 3px 10px #0007;
  }
  #game #hotbar .slot.empty {display:none}
  #game #hotbar .slot[data-slot="1"] {right:142px;bottom:56px}
  #game #hotbar .slot[data-slot="2"] {right:78px;bottom:116px}
  #game #hotbar .slot[data-slot="3"] {right:8px;bottom:162px}
  #game #hotbar .slot.item {width:44px;height:44px}
  #game #hotbar .slot[data-slot="4"] {right:146px;bottom:0}
  #game #hotbar .slot[data-slot="5"] {right:94px;bottom:0}
  #game #hotbar .slot-icon {border-radius:50%;overflow:hidden;font-size:25px}
  #game #hotbar .slot-icon img {object-fit:contain}
  #game #hotbar kbd {left:7px;bottom:4px;font-size:9px}
  #game #hotbar .cost {top:3px;right:6px;font-size:9px;color:#a2dcf1}
  #game #hotbar .count {bottom:4px;right:7px;font-size:10px}
  #game #hotbar .cooldown,#game #hotbar .skill-lock {border-radius:50%;font-size:10px}
  #game #attack-btn {
    right:calc(var(--safe-right,0px) + var(--mobile-edge));bottom:var(--mobile-bottom);
    width:82px;height:82px;z-index:var(--z-control);border:2px solid #d8bd79;
    background:radial-gradient(circle at 35% 25%,#375240,#102019 75%);
    box-shadow:0 0 0 2px #102019,0 4px 14px #0008;
  }
  #game #attack-btn svg {width:34px;height:34px;color:#f4dfa2}
  #game #attack-btn kbd {display:none}
  #game #attack-btn.pressed {background:#5c6140;box-shadow:0 0 18px #d9bf7988}
  #game #loot-btn {
    left:50%;right:auto;bottom:calc(var(--safe-bottom,0px) + 170px);transform:translateX(-50%);
    min-height:44px;max-width:calc(100% - 40px);font-size:11px;
  }
  #game .cast-panel {left:50%;right:auto;bottom:calc(var(--safe-bottom,0px) + 230px);transform:translateX(-50%);width:min(220px,60vw);padding:7px}
  #game .party-card {top:calc(var(--safe-top,0px) + 165px);left:calc(var(--safe-left,0px) + var(--mobile-edge));width:140px;max-height:110px;overflow:auto}
  #game #boss-bar {top:calc(var(--safe-top,0px) + 105px);width:min(220px,45vw);padding:6px}
  #game #chat-panel[data-compact=true].chat-collapsed {
    left:calc(var(--safe-left,0px) + var(--mobile-edge));right:auto;
    top:calc(var(--safe-top,0px) + var(--mobile-map-size) + 84px);bottom:auto;
    width:44px;height:44px;padding:0;overflow:visible;
  }
  #game #chat-panel[data-compact=true].chat-collapsed .chat-body {display:none}
  #game #chat-panel[data-compact=true].chat-collapsed .chat-toggle {left:0;bottom:0;width:44px;height:44px}
  #game #chat-panel[data-compact=true]:not(.chat-collapsed) {
    top:auto;bottom:calc(var(--safe-bottom,0px) + var(--mobile-stick-size) + 42px);
    left:calc(var(--safe-left,0px) + var(--mobile-edge));right:auto;
    width:min(360px,calc(100% - var(--safe-left,0px) - var(--safe-right,0px) - 32px));
    height:min(270px,calc(100dvh - var(--safe-top,0px) - var(--safe-bottom,0px) - var(--mobile-stick-size) - 64px));
  }
  /* Anchor the thin meter to the screen edge, including on iOS. */
  #game .experience-card {bottom:0;height:8px;padding:0}
  #game .experience-card .xp {inset:0;height:100%}
  #game .experience-card #xp-text {inset:0;line-height:7px;font-size:7px}
  #game #combat-feedback {
    top:calc(var(--safe-top,0px) + min(calc(var(--mobile-map-size) + 84px),22dvh));
    width:max-content;max-width:calc(100% - var(--safe-left,0px) - var(--safe-right,0px) - 2 * var(--mobile-edge));
    padding:7px 12px;font-size:12px;line-height:1.5;
  }
  #game #zone-banner {top:32%;font-size:18px}
}
@media (max-width:750px) and (orientation:landscape), (pointer:coarse) and (max-width:1100px) and (orientation:landscape), (max-width:1100px) and (max-height:600px) and (orientation:landscape) {
  #game {--mobile-map-size:108px;--mobile-menu-size:40px;--mobile-stick-size:112px}
  #game .hud-menu {flex-wrap:nowrap}
  #game #combat-feedback {top:calc(var(--safe-top,0px) + 64px);max-width:40%;padding:5px 10px;font-size:11px}
  #game .gold-display {top:calc(var(--safe-top,0px) + 58px)}
  #game .party-card {left:calc(var(--safe-left,0px) + 70px);top:calc(var(--safe-top,0px) + 160px);max-height:58px;font-size:9px}
}
@media (max-width:360px) {
  #game {--mobile-map-size:98px;--mobile-menu-size:38px;--mobile-skill-size:48px;--mobile-stick-size:100px;--mobile-edge:12px}
  #game .gold-display {top:calc(var(--safe-top,0px) + 195px)}
  #game #hotbar {width:182px;height:198px}
  #game #hotbar .slot[data-slot="1"] {right:112px;bottom:60px}
  #game #hotbar .slot[data-slot="2"] {right:58px;bottom:116px}
  #game #hotbar .slot[data-slot="3"] {right:0;bottom:150px}
  #game #hotbar .slot[data-slot="4"] {right:128px}
  #game #hotbar .slot[data-slot="5"] {right:78px}
  #game #attack-btn {width:70px;height:70px}
}