/* Mobile HUD overlay. Every rule sits inside one media query, so desktop never sees it, and every class is
   prefixed mo- so nothing here can restyle the live HUD (.game-hud, .hud-menu and friends).
   Proportions follow the owner's phone mock-up: a 70px player card, 42x36 shortcut chips, a ~27vw minimap, a 128px stick,
   one big attack circle with three ability circles and a 34px chat pill. Visible chips are compact; their
   tap areas are padded out to 44px with ::after. Sizes use both vw and dvh, so a short landscape phone shrinks the
   controls instead of overlapping them. Text never wraps: every label truncates with an ellipsis. */
@media (max-width: 820px), (pointer: coarse) and (max-height: 520px) {
  .mo-root {
    --mo-panel: rgb(7 19 15 / 91%);
    --mo-solid: #0a1611;
    --mo-gold: #d7b66e;
    --mo-gold-bright: #f0d28b;
    --mo-text: #f1e7ca;
    --mo-red: #bf3038;
    --mo-edge: 10px;
    --mo-gap: 8px;
    --mo-safe-t: env(safe-area-inset-top, 0px);
    --mo-safe-b: env(safe-area-inset-bottom, 0px);
    --mo-safe-l: env(safe-area-inset-left, 0px);
    --mo-safe-r: env(safe-area-inset-right, 0px);
    --mo-player-h: 70px;
    --mo-chip-w: 42px;
    --mo-chip-h: 36px;
    --mo-menu: 36px;
    --mo-minimap: min(27vw, 22dvh, 180px);
    --mo-chat-h: 34px;
    --mo-joy: min(33vw, 26dvh, 200px);
    --mo-combat: clamp(140px, 38vw, 230px);
    --mo-controls-bottom: calc(var(--mo-safe-b) + var(--mo-edge) + var(--mo-chat-h) + var(--mo-gap));
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    isolation: isolate;
    color: var(--mo-text);
    background: #17251e;
    font-family: Grenze Gotisch,Georgia,serif;
  }

  .mo-root.mo-live {
    background: transparent;
    pointer-events: none;
  }

  .mo-root[hidden],
  .mo-scrim[hidden],
  .mo-drawer[hidden],
  .mo-badge[hidden],
  .mo-context[hidden],
  .mo-level[hidden] {
    display: none;
  }

  .mo-world {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: center / cover no-repeat;
  }

  /* The HUD layer ignores pointer input; each control opts back in. */
  .mo-hud {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
  }

  .mo-hud button,
  .mo-hud [role="button"] {
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
    color: var(--mo-text);
    border: 1px solid var(--mo-gold);
    background: linear-gradient(145deg, #15261f, #09130f);
    box-shadow: inset 0 1px rgb(255 255 255 / 9%), 0 3px 10px #0008;
    font: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
    touch-action: manipulation;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
  }

  /* Line icons (see icon() in mobile-overlay.js). */
  .mo-icon {
    flex: none;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentcolor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
  }

  .mo-chip .mo-icon {
    width: 20px;
    height: 20px;
  }

  .mo-attack-art {
    position: absolute;
    inset: 16%;
    background: center / contain no-repeat;
    pointer-events: none;
  }

  .mo-menu .mo-icon {
    width: 22px;
    height: 22px;
  }

  .mo-drawer-close .mo-icon {
    width: 16px;
    height: 16px;
  }

  .mo-attack .mo-icon {
    width: 34px;
    height: 34px;
    stroke-width: 2.2;
  }

  .mo-handle-glyph,
  .mo-tab-glyph,
  .mo-context-icon {
    display: grid;
    place-items: center;
  }

  /* Compact chips keep a 44px tap area. */
  .mo-hud .mo-chip::after,
  .mo-hud .mo-handle::after,
  .mo-hud .mo-chat::after {
    content: "";
    position: absolute;
    inset: -4px -3px;
  }

  /* Player card: portrait with level badge, health and mana bars, thin XP bar. */
  .mo-player {
    position: absolute;
    top: calc(var(--mo-safe-t) + var(--mo-edge));
    left: calc(var(--mo-safe-l) + var(--mo-edge));
    box-sizing: border-box;
    display: grid;
    grid-template-columns: calc(var(--mo-player-h) - 18px) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: min(62vw, 400px);
    height: var(--mo-player-h);
    padding: 5px 10px 5px 5px;
    border: 2px solid var(--mo-gold);
    border-radius: 36px 16px 16px 36px;
    background: var(--mo-panel);
    box-shadow: 0 4px 16px #0009;
    pointer-events: auto;
  }

  .mo-portrait {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border: 3px solid var(--mo-gold);
    border-radius: 50%;
    background: #101512 center / cover no-repeat;
  }

  .mo-level {
    position: absolute;
    right: -6px;
    bottom: -6px;
    box-sizing: border-box;
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
    border: 2px solid var(--mo-gold);
    border-radius: 11px;
    background: #0b1511;
    color: var(--mo-gold-bright);
    font-size: 13px;
    line-height: 18px;
    text-align: center;
  }

  .mo-player-details {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .mo-player-name {
    overflow: hidden;
    color: var(--mo-gold-bright);
    font-size: 16.5px;
    line-height: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mo-bars {
    display: grid;
    gap: 2px;
  }

  .mo-bar {
    position: relative;
    box-sizing: border-box;
    height: 14px;
    overflow: hidden;
    border: 2px solid var(--mo-gold);
    border-radius: 7px;
    background: #101512;
  }

  .mo-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--fill, 70%);
    background: var(--bar, var(--mo-red));
  }

  .mo-bar-label {
    position: absolute;
    inset: 0;
    overflow: hidden;
    color: #fff;
    font-size: 11px;
    line-height: 10px;
    text-align: center;
    text-overflow: clip;
    text-shadow: 0 1px 3px #000;
    white-space: nowrap;
  }

  .mo-xp {
    height: 5px;
    overflow: hidden;
    border: 1px solid #9b8457;
    border-radius: 3px;
    background: #0b100e;
  }

  .mo-xp-fill {
    width: var(--fill, 17%);
    height: 100%;
    background: linear-gradient(90deg, #7047b9, #a171df);
  }

  /* Four shortcut chips under the player card. */
  .mo-shortcuts {
    position: absolute;
    top: calc(var(--mo-safe-t) + var(--mo-edge) + var(--mo-player-h) + 6px);
    left: calc(var(--mo-safe-l) + var(--mo-edge));
    display: grid;
    grid-template-columns: repeat(4, var(--mo-chip-w));
    gap: 8px;
    pointer-events: none;
  }

  .mo-hud .mo-chip {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--mo-chip-w);
    height: var(--mo-chip-h);
    padding: 0;
    border-radius: 12px;
    color: var(--mo-gold-bright);
    font-size: 17.5px;
    line-height: 1;
    overflow: visible;
  }

  /* Menu button, top-right, above the minimap. */
  .mo-hud .mo-menu {
    position: absolute;
    top: calc(var(--mo-safe-t) + var(--mo-edge));
    right: calc(var(--mo-safe-r) + var(--mo-edge));
    width: var(--mo-menu);
    height: var(--mo-menu);
    padding: 0;
    border-radius: 12px;
    background: var(--mo-panel);
    font-size: 20px;
    line-height: 1;
    overflow: visible;
  }

  /* Rounded square minimap, not a circle. */
  .mo-minimap {
    position: absolute;
    top: calc(var(--mo-safe-t) + var(--mo-edge) + var(--mo-menu) + 6px);
    right: calc(var(--mo-safe-r) + var(--mo-edge));
    box-sizing: border-box;
    width: var(--mo-minimap);
    aspect-ratio: 1;
    overflow: hidden;
    border: 3px solid var(--mo-gold);
    border-radius: 16%;
    background: #18251f;
    box-shadow: 0 4px 14px #0009;
    pointer-events: auto;
  }

  .mo-minimap-canvas {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Interaction prompt, shown only while something is in reach; it sits just above the combat cluster. */
  .mo-context {
    position: absolute;
    right: calc(var(--mo-safe-r) + var(--mo-edge));
    bottom: calc(var(--mo-controls-bottom) + max(var(--mo-joy), var(--mo-combat)) + 4px);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: min(74vw, 360px);
    height: 46px;
    padding: 4px 6px 4px 10px;
    border: 2px solid var(--mo-gold);
    border-radius: 16px;
    background: var(--mo-panel);
    box-shadow: 0 4px 14px #0008;
    pointer-events: auto;
  }

  .mo-context-icon {
    font-size: 20px;
    line-height: 1;
    text-align: center;
  }

  .mo-context-copy {
    display: grid;
    min-width: 0;
    line-height: 1.05;
  }

  .mo-context-label {
    overflow: hidden;
    color: #b9a77a;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mo-context-name {
    overflow: hidden;
    font-size: 16.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mo-hud .mo-context-action {
    max-width: 90px;
    height: 36px;
    padding: 0 10px;
    border-radius: 11px;
    color: var(--mo-gold-bright);
    font-size: 16.5px;
  }

  /* Movement stick, lower-left, ending above the chat pill. Push it to the rim to sprint. */
  .mo-joystick {
    position: absolute;
    left: calc(var(--mo-safe-l) + var(--mo-edge) + 2vw);
    bottom: var(--mo-controls-bottom);
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: var(--mo-joy);
    aspect-ratio: 1;
    border: 2px solid var(--mo-gold);
    border-radius: 50%;
    background: rgb(7 19 15 / 70%);
    box-shadow: inset 0 0 24px #0009, 0 4px 14px #0008;
    pointer-events: auto;
    touch-action: none;
  }

  .mo-joystick-knob {
    width: 38%;
    aspect-ratio: 1;
    border: 2px solid var(--mo-gold-bright);
    border-radius: 50%;
    background: rgb(77 67 45 / 92%);
  }

  .mo-joystick.mo-running {
    border-color: var(--mo-gold-bright);
    box-shadow: inset 0 0 24px #0009, 0 0 0 2px #f0d28b66, 0 4px 14px #0008;
  }

  /* Combat cluster, lower-right: one big attack circle with three ability circles tucked around it.
     The box is square, so the percentages always add up whatever the phone's height. */
  .mo-combat {
    position: absolute;
    right: calc(var(--mo-safe-r) + var(--mo-edge));
    bottom: var(--mo-controls-bottom);
    width: var(--mo-combat);
    aspect-ratio: 1;
    pointer-events: none;
  }

  .mo-hud .mo-combat button {
    position: absolute;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid var(--mo-gold);
    border-radius: 50%;
    background: var(--mo-panel);
    color: var(--mo-gold-bright);
    font-size: 22px;
    overflow: visible;
  }

  .mo-hud .mo-combat .mo-attack {
    left: 23%;
    bottom: 0;
    width: 55%;
    background: radial-gradient(circle, #651f20, #130e0c 78%);
    font-size: 33px;
  }

  .mo-hud .mo-combat .mo-ability-top {
    top: 0;
    left: 32%;
    width: 36%;
  }

  .mo-hud .mo-combat .mo-ability-left {
    top: 24%;
    left: 0;
    width: 34%;
  }

  .mo-hud .mo-combat .mo-ability-right {
    top: 24%;
    right: 0;
    width: 34%;
  }

  .mo-hud .mo-combat button.mo-empty {
    opacity: 0.55;
  }





  /* Collapsed chat pill, bottom-left. Opens the chat sidebar. */
  .mo-hud .mo-chat {
    position: absolute;
    left: calc(var(--mo-safe-l) + var(--mo-edge));
    bottom: calc(var(--mo-safe-b) + var(--mo-edge));
    display: flex;
    align-items: center;
    gap: 6px;
    width: min(42vw, 230px);
    height: var(--mo-chat-h);
    padding: 0 12px;
    border-width: 2px;
    border-radius: 17px;
    background: var(--mo-panel);
    color: var(--mo-gold-bright);
    font-size: 15.5px;
    line-height: 1;
    overflow: visible;
  }

  .mo-chat-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mo-badge {
    position: absolute;
    top: -7px;
    right: -5px;
    box-sizing: border-box;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--mo-red);
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
  }

  /* Sidebars: chat, quests and the world finder on the left; the game windows on the right. */
  .mo-scrim {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: rgb(0 0 0 / 35%);
    pointer-events: auto;
  }

  .mo-drawer {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 4;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: min(84vw, 340px);
    padding-top: var(--mo-safe-t);
    padding-bottom: var(--mo-safe-b);
    border: 2px solid var(--mo-gold);
    background: var(--mo-solid);
    box-shadow: 0 0 28px #000c;
    pointer-events: auto;
  }

  .mo-drawer-left {
    left: 0;
    padding-left: var(--mo-safe-l);
    border-left: 0;
    border-radius: 0 16px 16px 0;
  }

  .mo-drawer-right {
    right: 0;
    padding-right: var(--mo-safe-r);
    border-right: 0;
    border-radius: 16px 0 0 16px;
  }

  .mo-drawer-tabs {
    display: flex;
    flex: none;
    align-items: center;
    gap: 5px;
    padding: 6px;
  }

  .mo-drawer-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--mo-gold-bright);
    font-size: 18.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mo-hud .mo-drawer-tab {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    height: 40px;
    padding: 0 4px;
    border-radius: 11px;
    font-size: 15.5px;
    overflow: visible;
  }

  .mo-tab-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mo-hud .mo-drawer-tab[aria-selected="true"] {
    border-color: var(--mo-gold-bright);
    background: #3a3118;
    color: var(--mo-gold-bright);
  }

  .mo-hud .mo-drawer-close {
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 11px;
    font-size: 16.5px;
  }

  .mo-drawer-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    padding: 0 6px 6px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .mo-drawer-list {
    display: grid;
    flex: 1;
    align-content: start;
    gap: 6px;
    min-height: 0;
    padding: 0 6px 6px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .mo-hud .mo-menu-item {
    height: 40px;
    padding: 0 14px;
    border-radius: 11px;
    font-size: 16.5px;
    text-align: left;
  }

  /* Tab on the left edge, under the shortcut chips, that opens the left sidebar. */
  .mo-hud .mo-handle {
    position: absolute;
    top: calc(var(--mo-safe-t) + var(--mo-edge) + var(--mo-player-h) + 6px + var(--mo-chip-h) + 10px);
    left: var(--mo-safe-l);
    display: grid;
    place-items: center;
    width: 26px;
    height: 46px;
    padding: 0;
    border-left: 0;
    border-radius: 0 12px 12px 0;
    background: var(--mo-panel);
    font-size: 17.5px;
    line-height: 1;
    overflow: visible;
  }

  /* Invisible strip on the right edge: swiping in from it opens the menu. */
  .mo-edge-right {
    position: absolute;
    top: 30%;
    right: 0;
    width: var(--mo-edge);
    height: 30%;
    pointer-events: auto;
    touch-action: pan-y;
  }

  /* Short landscape phones: the stack above would not fit, so the controls drop to the bottom corners, the chat pill
     moves to the top centre and the interaction prompt sits left of the combat cluster. */
  @media (max-height: 520px) and (orientation: landscape) {
    .mo-root {
      --mo-edge: 8px;
      --mo-player-h: 64px;
      --mo-joy: min(28vw, 30dvh, 150px);
      --mo-combat: clamp(140px, 48dvh, 190px);
      --mo-minimap: min(18vw, 22dvh, 130px);
      --mo-controls-bottom: calc(var(--mo-safe-b) + var(--mo-edge));
    }

    .mo-player {
      width: min(34vw, 280px);
    }

    .mo-drawer {
      width: min(50vw, 340px);
    }


    .mo-hud .mo-chat {
      top: calc(var(--mo-safe-t) + var(--mo-edge));
      bottom: auto;
      left: 50%;
      width: min(24vw, 200px);
      transform: translateX(-50%);
    }

    .mo-context {
      right: calc(var(--mo-safe-r) + var(--mo-edge) + var(--mo-combat) + var(--mo-gap));
      bottom: calc(var(--mo-safe-b) + var(--mo-edge));
      width: min(30vw, 250px);
    }
  }
}