/* ═══════════════════════════════════════════════════════════════════════
   world-phone.css — THE WORLD ON A PHONE HELD SIDEWAYS (GH #3754).

   Wray, 2026-10-04, picking A off the pick sheet and then playing the game
   on his phone: "A looks good but are we sure we cant make the page more
   efficient ... the biggest moan was that map being too big but the icons
   too surely we can hide them behind some kind of draw. first steps could
   maybe go in that top right, and the chat tabs are a bit strange floating
   there." What a new player saw at 844x390: the minimap and First Steps in
   the middle of the screen, on their own cat; eight doors across the top;
   the plate's three number rows; Play Arena (Legacy) and four chat tabs
   floating down the left; a BASE tag under every empty button.

   Everything here is under `max-height: 540px`, the breakpoint every phone
   rule in the world already uses for a phone on its side (portrait is not a
   target: Wray, 2026-09-29). A desktop never matches it, so the desktop is
   exactly what it was. Every rule is under `body.hud-v2` (and the corner's
   under `body.nav-albion`), so with the HUD pass off this file styles
   nothing.

   THE SHAPE:

       top left    the plate: portrait, name, level, health, XP bar
       top right   First Steps | the menu | the minimap, on one line
       bottom left the chat button over the stick
       bottom right the action cluster
       bottom middle Nerm's home bubble, while he is talking (section 6)

   ── THE LAYER ───────────────────────────────────────────────────────────
   `corners`, the layer of every sheet it answers (world-albion.css,
   world-map-v2.css, world-tracker.css, world-chat-v2.css,
   world-actionbar.css's corner block, world-legacy-door.css). It loads
   after all of them, so at equal weight it wins by order; where it needs
   more, it says so.
   ═══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer corners {

/* The menu button is built on every screen (world-albion-nav.js) and drawn
   on none but a phone held sideways. */
body.nav-albion .an-tr > .an-drawer { display: none; }

@media (max-height: 540px) {

  /* ── 1. THE TOP-RIGHT BAND ─────────────────────────────────────────────
     First Steps, the menu, the minimap: one line along the top edge, the
     minimap in the corner. The corner was a column (the row, then the map
     under it, then the list under that), and the action cluster's column
     pushed the map and the list left into the middle of the picture
     (world-actionbar.css: `translateX(-claim)`), which is where your cat
     stands. On one line they end above the cluster's top at both phone
     sizes, so nothing has to step aside. */
  body.nav-albion.hud-v2 .an-tr {
    flex-direction: row;
    align-items: flex-start;
    max-width: none;
  }
  body.nav-albion.hud-v2 .an-tr > .wtk { order: 1; }
  body.nav-albion.hud-v2 .an-tr > .an-drawer { order: 2; }
  body.nav-albion.hud-v2 .an-tr > .wt-map { order: 3; }
  body.hud-v2.mv-cluster .an-tr > .wt-map,
  body.hud-v2.mv-cluster .an-tr > .wtk { transform: none; }

  /* THE MINIMAP, A SIZE DOWN: 72 across its painting (84 framed), from the
     phone's 120. "The map being too big" was the first thing he said. A
     tap on it still opens the Map. */
  body.nav-albion.hud-v2 { --an-map-w: 72px; }

  /* ── 2. THE MENU: THE DOORS BEHIND ONE BUTTON ──────────────────────────
     The button is a door tile (the kit's frame, the row's size) with a
     four-square glyph, the shape every phone game uses for "everything
     else". Pressed, the eight doors drop under it on the kit's slate, two
     columns, each door's name beside its icon: a new player reads "Store"
     where the row only ever showed a sack. A door pressed there opens its
     window and folds the menu; a press anywhere else folds it. */
  body.nav-albion.hud-v2 .an-tr > .an-drawer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body.nav-albion.hud-v2 .an-drawer .an-drawerglyph {
    display: block;
    width: var(--an-ico);
    height: var(--an-ico);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23140e08' d='M1 1h7v7H1zM8 1h7v7H8zM1 8h7v7H1zM8 8h7v7H8z'/%3E%3Cpath fill='%23e3c79a' d='M2 2h5v5H2zM9 2h5v5H9zM2 9h5v5H2zM9 9h5v5H9z'/%3E%3Cpath fill='%23f0e2c6' d='M2 2h5v1H2zM9 2h5v1H9zM2 9h5v1H2zM9 9h5v1H9z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    image-rendering: pixelated;
    pointer-events: none;
  }
  /* the menu is lit while it is open, as an open door's tile is */
  body.nav-albion.hud-v2 .an-drawer[aria-expanded="true"] {
    border-image: url('/assets/ui/kitb/dooron.png?v=2026-09-24a') 11 fill / calc(11px * var(--hv-k, 1)) / calc(3px * var(--hv-k, 1)) stretch;
  }
  /* a door with news (a pip) puts a dot on the menu: the doors' own
     badge, the journal mark's dot (world-doors-v2.css) */
  body.nav-albion.hud-v2 .an-drawer[data-has]::after {
    content: '';
    position: absolute;
    z-index: 3;
    top: -3px;
    right: -3px;
    width: 20px;
    height: 21px;
    background: url('/assets/ui/kitb/badge.png?v=2026-09-24a') center / 100% 100% no-repeat;
    image-rendering: pixelated;
    pointer-events: none;
  }

  /* folded: the row is not drawn (its tiles stay in it, so every file that
     finds a door by `.an-row .an-tile` still finds it) */
  body.nav-albion.hud-v2 .an-tr > .an-row { display: none; }
  /* open: over the action cluster (42) and the chat (41) for as long as it
     is open, under every window (60) */
  body.nav-albion.hud-v2 .an-tr.an-open { z-index: 50; }
  body.nav-albion.hud-v2 .an-tr.an-open > .an-row {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 6px 10px;
    position: absolute;
    /* under the menu button: its right edge is the map's frame and one gap
       in from the corner's */
    top: calc(var(--an-tile) + var(--an-gap, 6px));
    right: calc(var(--an-map-w) + 12px + var(--an-gap, 6px));
    /* over the map's ribbon, which hangs below its frame and is drawn after
       the row in the corner */
    z-index: 10;
    margin: 0;
    max-width: none;
    box-sizing: border-box;
    padding: 12px;
    border-style: solid;
    border-width: 0;
    border-image: url('/assets/ui/kitb/panel.png?v=2026-09-24a') 12 fill / 12px stretch;
    image-rendering: pixelated;
  }
  /* each door a plank: the icon, then its name, in the door's own frame */
  body.nav-albion.hud-v2 .an-tr.an-open > .an-row > .an-tile {
    width: auto;
    min-width: 124px;
    justify-content: flex-start;
    gap: 6px;
    padding: 0 10px 0 4px;
  }
  body.nav-albion.hud-v2 .an-tr.an-open > .an-row > .an-tile::after {
    content: attr(data-label);
    font: 400 18px/1 var(--hv-f-vt, 'VT323', monospace);
    color: var(--hv-ink, #f0e2c6);
    text-shadow: 1px 1px 0 var(--hv-black, #07090d);
    white-space: nowrap;
    pointer-events: none;
  }
  /* the menu stands aside with the rest of the corner under a window and
     under the Pit, as the row did (world-windows-v2.css, world-pit.css) */
  body.hud-v2.skin-majesty.ws-sheet-open .an-tr > .an-drawer,
  body.nav-albion.pit-open .an-tr > .an-drawer { visibility: hidden; }

  /* ── 3. THE PLATE: WHO YOU ARE, AND YOUR HEALTH ────────────────────────
     XP, Obols and Infamy are one tap away in the Bag; the XP bar under the
     health bar stays. */
  body.nav-albion.hud-v2 .an-tl .ws-barrow { display: none; }

  /* ── 4. WHAT LEAVES A PHONE'S PICTURE ──────────────────────────────────
     Play Arena (Legacy), the 2D arena's way in, floated between the plate
     and the chat; the Play door in the menu is the Pit's. And the BASE tag
     under every empty button: on a phone the buttons are the bar. */
  body.hud-v2 .wld-door { display: none; }
  body.hud-v2 #w0worldbar.ab2 .ab2-bs { display: none; }

  /* ── 5. CHAT: ONE BUTTON, NOT FOUR TABS ────────────────────────────────
     At rest the panel folds to its tab row on a short screen
     (world-actionbar.css, world-chat-v2.css), and four tabs with no panel
     under them floated over the stick. At rest only the chosen tab is
     drawn, as a door tile with a speech bubble; a press on it opens chat on
     that tab, as a press on any tab did. Open, the panel is unchanged. */
  body.hud-v2 { --chat-h-fold: 40px; }
  body.hud-v2 #world-chat-panel[data-state='rest'] .wp-chan:not(.is-on) { display: none; }
  body.hud-v2 #world-chat-panel[data-state='rest'] .wp-chan.is-on {
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    font-size: 0;
    color: transparent;
    border-image: url('/assets/ui/kitb/door.png?v=2026-09-24a') 8 fill / 8px stretch;
  }
  body.hud-v2 #world-chat-panel[data-state='rest'] .wp-chan.is-on::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 4px;
    width: 32px;
    height: 32px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23f0e2c6' d='M3 3h10v7H3z'/%3E%3Cpath fill='%23140e08' d='M3 2h10v1H3zM2 3h1v7H2zM13 3h1v7h-1zM3 10h10v1H3zM4 11h3v1H4zM4 12h2v1H4zM4 13h1v1H4zM4 6h2v2H4zM7 6h2v2H7zM10 6h2v2h-2z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    image-rendering: pixelated;
    pointer-events: none;
  }
  /* OPEN, chat is the only thing in this corner (world-chat-v2.css says so
     for the plank and the guide's bubble): its 180 reach from over the
     stick to y 36 at 844x390, and its tabs sat across the plate's name. The
     plate steps aside while chat is open and comes back when it rests. */
  body.hud-v2:has(#world-chat-panel[data-state='open']) .an-tl { visibility: hidden; }
  /* news on a tab the button hides: the doors' dot on the button */
  body.hud-v2 #world-chat-panel[data-state='rest']:has(.wp-chan:not(.is-on)[data-unread]) .wc2-tabs::after {
    content: '';
    position: absolute;
    z-index: 3;
    top: -3px;
    left: calc(7px * var(--hv-k, 1) + 40px - 17px);
    width: 20px;
    height: 21px;
    background: url('/assets/ui/kitb/badge.png?v=2026-09-24a') center / 100% 100% no-repeat;
    image-rendering: pixelated;
    pointer-events: none;
  }

  /* ── 6. NERM'S HOME BUBBLE: ALONG THE FOOT, BETWEEN THE THUMBS (#4099) ──
     On a desktop the guide's home bubble (a step with nothing to point at:
     `cards`, the island's chapters, Help's walkthrough between anchored
     steps) stands on the chat panel (world-chat-v2.css, THE STACK ABOVE THE
     PANEL). Held sideways that stack is the stick's resting ring, the chat
     button and then the bubble, and a 390 tall screen has no room for it:
     measured on the served world at 844x390 the bubble was (12, -98, 320,
     208), Nerm's face and first lines above the top edge, the rest over the
     plate. Two things lifted it there: the stack, and room for the PLAY
     ARENA plank, which section 4 hides but `:has(.wld-door)` still finds.
       - The plank is not drawn here, so nothing stands on it.
       - Under the cluster, home is the band along the foot between the
         stick's ring (`--mv-ring-right`) and the cluster (`--mv-claim-r`),
         both published by world-cluster.js: wide and low, clear of the
         plate, the menu, the minimap, the ring and every button (444 x 164
         at 844x390, 532 x 169 at 932x430). A phone's home was bottom-centre
         before the cluster too (nerm-guide.css).
       - Never narrower than its desktop 320: a phone smaller than the
         target (under about 720 wide; an iPhone 8 held sideways is 667)
         has no band that wide, and a narrow box grows taller than the
         screen. There it reaches left over the ring's edge instead, as far
         as it must and no further; the stick still starts anywhere in its
         zone outside the box.
     The second selector carries the chat panel so it outweighs the stack's
     rules, which name it; the first is for a page without one. An anchored
     step writes its own left and top and is not touched. */
  body.hud-v2:has(#world-chat-panel):has(.wld-door) #ng.ng-home .ng-bubble {
    bottom: calc(var(--chat-lift) + 8px);
  }
  body.hud-v2.mv-cluster #ng.ng-home .ng-bubble,
  body.hud-v2.mv-cluster:has(#world-chat-panel) #ng.ng-home .ng-bubble {
    left: max(12px, min(calc(var(--mv-ring-right, 140px) + 12px), calc(100vw - var(--mv-claim-r, 236px) - 12px - 320px)));
    right: calc(var(--mv-claim-r, 236px) + 12px);
    width: auto;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
}
}
/* end of @layer corners */