/* ============================================================================================
   IMMERSIVE DECK - EXPERIMENTAL PRESENTATION, NORTH ONLY, BEHIND ?ui=immersive

   EVERY RULE IN THIS FILE IS SCOPED TO html.ui-immersive, AND THAT CLASS IS ONLY EVER SET BY
   assets/immersive-deck.js WHEN THE SWITCH IS PRESENT. Without the switch this stylesheet is
   inert: it still downloads, and it changes nothing. Deleting this file and its script tag
   removes the whole experiment, which is the point - it is a layer over the existing pages,
   not a second set of them.

   IT DOES NOT TOUCH DESKTOP. The whole file sits inside one mobile media query, because an
   unfinished mobile layout forced onto a working desktop is worse than no experiment at all.
   At 900px and up, ?ui=immersive renders the existing presentation unchanged.

   IT DOES NOT MOVE A SINGLE PIN. Registration is the engine's own: .dpk-pl is inset:0 over
   .dpk-frame and every marker is positioned in PER CENT of that frame, and the zone canvas is
   width/height 100% of it. Make the frame wider and the markers, the zones and the deck all
   grow together. The one geometry rule below is .dpk-big, which the hide flow has used for
   months. Nothing here computes a coordinate.
   ============================================================================================ */

@media (max-width: 899px) {

  /* ---------- the page becomes a dark room with a deck in it ---------- */
  html.ui-immersive, html.ui-immersive body {
    background: #070d1a;
    overflow-x: hidden;
  }
  html.ui-immersive body { color: #e8eefc; }

  /* EVERYTHING THE LEGACY COMPOSITION PUTS ON SCREEN IS HIDDEN, NOT DELETED. The nodes stay in
     the document and stay mounted, because the immersive chrome re-uses them: the filter chips,
     the collections and the share panel are MOVED into floating surfaces, with their handlers,
     their counts and their viewer-rebind behaviour intact. Hiding what is left means there is
     exactly one of each control on the page. */
  html.ui-immersive .wrap > header,
  html.ui-immersive .lede,
  html.ui-immersive .jwrap > h1,
  html.ui-immersive .jwrap > p,
  html.ui-immersive .site-footer,
  html.ui-immersive .cwa-chrome,
  html.ui-immersive #mapFilterNote,
  html.ui-immersive .dpk-deckrail-head,
  html.ui-immersive .dpk-decks-head,
  html.ui-immersive .dpk-deckscroll,
  html.ui-immersive .dpk-back,
  html.ui-immersive .dpk-hint { display: none !important; }

  /* the three-column composition collapses to the deck alone */
  html.ui-immersive .jcompose { display: block !important; margin: 0 !important; gap: 0 !important; }
  html.ui-immersive .jdeckarea { display: block !important; }
  html.ui-immersive .dob-pane { display: none !important; }
  html.ui-immersive #boardShare { display: none !important; }
  html.ui-immersive .wrap, html.ui-immersive .jwrap { padding: 0 !important; max-width: none !important; margin: 0 !important; }

  /* ---------- THE DECK ---------- */
  /* THE STAGE IS THE SCREEN. Top and bottom insets keep the deck clear of the floating bars
     without a permanent gutter: the deck scrolls UNDER them, which is what makes the surface
     feel larger than the phone. */
  html.ui-immersive #viewer .dpk-stage,
  html.ui-immersive .immersive-stage {
    position: fixed; inset: 0;
    max-height: none !important;
    border-radius: 0;
    background: #070d1a;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding: 108px 0 136px;
    z-index: 1;
  }
  /* AUTHENTIC PROPORTIONS, FULL WIDTH. width:100% and height:auto - the image keeps its own
     aspect ratio, so a short deck stays short and nothing is stretched to fill the screen.

     NEARLY EDGE TO EDGE, WITH THE EDGES VISIBLE - AND THE GUTTER IS THE WHOLE POINT. The hull
     art reaches the image's OWN left and right edge at the ship's widest beam: the lifeboat
     sponsons are drawn hard against x=0 and x=582 of a 582-wide plan. Drawn at exactly 100% of
     a full-bleed screen those edges sit flush against the glass, the pulsing zone band (which
     carries a stroke, so its box is ~7px wider than the frame at each side) is clipped away by
     the stage, and the deck reads as cut off at both sides instead of complete. Ten pixels of
     dark each side is the difference between "full width" and "visibly whole" - the deck still
     owns 95% of a 393px screen, which is the "nearly" in nearly edge-to-edge.

     IT MOVES NOTHING. Every marker is positioned in PER CENT of this frame and the zone canvas
     is 100%/100% of it, so narrowing the frame carries the deck, the zones and the pins
     together. deck-picker's hit test reads the live .dpk-pl rect, so it follows them. */
  html.ui-immersive #viewer .dpk-frame {
    display: block !important; width: calc(100% - 20px) !important; max-width: none !important;
    margin-left: auto !important; margin-right: auto !important;
  }
  html.ui-immersive #viewer img.dpk-deck {
    width: 100% !important; height: auto !important; max-width: none !important; max-height: none !important;
    display: block;
  }
  /* THE MARKER KEEPS THE ENGINE'S SIZE, AND THAT IS A CORRECTNESS RULE, NOT A TASTE ONE.
     deck-picker's onMarkTap hit-tests in pixels: a 26px radius around (x*w, y*h - 21), where
     the 21 is half the 42px marker it draws. Enlarging the image here to 54px moved what the
     visitor sees away from what the engine tests, and the first build of this experiment did
     exactly that - a tap on the top of a marker opened nothing. Changing the engine's maths to
     suit a skin would put presentation inside the hit test, so the skin gives way instead.
     The glow is a box-shadow: it reads as larger and occupies no layout at all. */
  html.ui-immersive #viewer .dpk-pin img {
    box-shadow: 0 0 0 6px rgba(167,139,250,.30), 0 6px 18px rgba(0,0,0,.6);
    border-color: rgba(244,196,48,.85);
  }
  html.ui-immersive #viewer .dpk-mark { cursor: pointer; }

  /* the individual Deck Journey's SVG, same idea: viewBox scaling keeps every pin registered */
  html.ui-immersive #zoneView .deckwrap {
    position: fixed !important; inset: 0;
    margin: 0 !important; padding: 108px 0 136px !important;
    background: #070d1a; border-radius: 0; box-shadow: none;
    overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain; display: block !important; z-index: 1;
  }
  /* the same gutter, for the same reason: the viewBox is the hull's own bounding box, so the
     art touches both of its edges and 100% put them against the glass. */
  html.ui-immersive #zoneView #deck {
    width: calc(100% - 20px) !important; height: auto !important; max-width: none !important;
    display: block; margin-left: auto !important; margin-right: auto !important;
  }
  html.ui-immersive #zoneView .stage,
  html.ui-immersive #zoneView .jcompose > .dob-pane,
  html.ui-immersive #zoneView .hintbar,
  html.ui-immersive #zoneView .live,
  html.ui-immersive #zoneView .trackbar,
  html.ui-immersive #zoneView .ctxbar,
  html.ui-immersive #zoneView .backtop,
  html.ui-immersive #zoneView #djNav { display: none !important; }

  /* ---------- FLOATING CHROME ---------- */
  html.ui-immersive .imm-top, html.ui-immersive .imm-bottom {
    position: fixed; left: 0; right: 0; z-index: 30;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(7,13,26,.94), rgba(7,13,26,.55) 70%, rgba(7,13,26,0));
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    pointer-events: none;
  }
  html.ui-immersive .imm-top { top: 0; padding-top: max(10px, env(safe-area-inset-top)); }
  html.ui-immersive .imm-bottom {
    bottom: 0; top: auto;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    background: linear-gradient(0deg, rgba(7,13,26,.95), rgba(7,13,26,.6) 70%, rgba(7,13,26,0));
  }
  html.ui-immersive .imm-top > *, html.ui-immersive .imm-bottom > * { pointer-events: auto; }

  html.ui-immersive .imm-row { display: flex; align-items: center; gap: 8px; justify-content: center; }
  html.ui-immersive .imm-row + .imm-row { margin-top: 8px; }
  /* THE ROW GIVES WAY BEFORE THE SCREEN DOES, AND THIS IS THE ACTUAL OVERFLOW RULE. A flex
     item's min-width is auto, which floors it at its max-content width - so a long label did
     not shrink, it pushed. Measured at 390px: the identity label alone rendered 304px inside a
     366px row that also held a 40px control and an 8px gap, leaving four pixels between the
     header and the right edge of the phone, and any device whose font metrics run a few per
     cent wider has nowhere to put them. Letting every child shrink is the fix; capping the
     text with a character count was the bug. */
  html.ui-immersive .imm-row { max-width: 100%; }
  html.ui-immersive .imm-row > * { min-width: 0; }
  html.ui-immersive .imm-btn, html.ui-immersive .imm-count { flex: 0 0 auto; }

  /* the glass control - one treatment, used by every button here */
  html.ui-immersive .imm-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 40px; min-width: 40px; padding: 0 14px;
    border-radius: 999px; border: 1px solid rgba(167,139,250,.34);
    background: rgba(18,26,48,.72); color: #dfe7fb;
    font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 2px 12px rgba(0,0,0,.4);
  }
  html.ui-immersive .imm-btn:active { transform: scale(.97); }
  html.ui-immersive .imm-btn[aria-pressed="true"],
  html.ui-immersive .imm-btn.on {
    border-color: #f4c430; color: #fff;
    background: linear-gradient(120deg, rgba(58,37,80,.92), rgba(31,39,70,.92));
    box-shadow: 0 0 0 1px rgba(244,196,48,.25), 0 4px 16px rgba(0,0,0,.5);
  }
  html.ui-immersive .imm-btn:focus-visible { outline: 2px solid #f4c430; outline-offset: 2px; }
  html.ui-immersive .imm-ship {
    font-size: 15px; font-weight: 800; color: #fff; letter-spacing: .01em;
    flex: 0 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* THE DECK NAME IS TRUNCATED BY THE BOX IT IS IN, NOT BY A CHARACTER COUNT. The pill used to
     carry "<ship> · <deck name>" cut at 26 characters, which is how "Deck 4 Atlantic" reached
     the owner as "Deck 4 At". The ship now has its own line and the pill carries the deck name
     whole; if a deck name is ever wider than the screen the browser ellipsises it, which is a
     rule that cannot cut a short name. display:block (over .imm-btn's inline-flex) is what
     makes text-overflow apply to the label itself. */
  html.ui-immersive .imm-deckname {
    flex: 0 1 auto; display: block; min-width: 0; max-width: 100%;
    line-height: 38px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.ui-immersive .imm-count { font-size: 12px; color: #9fb0cb; font-weight: 700; }
  html.ui-immersive .imm-sub { font-size: 11px; color: #9fb0cb; font-weight: 700; letter-spacing: .04em; }

  /* THE EXISTING FILTER, REHOUSED. The element is MOVED here, not rebuilt, so every count,
     handler, aria-pressed state and viewer-rebind guard travels with it. Only its skin changes. */
  html.ui-immersive #mapFilter {
    display: flex !important; grid-template-columns: none !important;
    flex-wrap: nowrap; overflow-x: auto; gap: 7px; margin: 0 !important;
    scrollbar-width: none; -ms-overflow-style: none; padding: 2px 0;
  }
  html.ui-immersive #mapFilter::-webkit-scrollbar { display: none; }
  html.ui-immersive #mapFilter button {
    flex: 0 0 auto; min-height: 38px; padding: 0 14px; border-radius: 999px;
    border: 1px solid rgba(167,139,250,.34); background: rgba(18,26,48,.72);
    color: #cfe0f2; font-size: 13px; font-weight: 700; justify-content: center;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  html.ui-immersive #mapFilter button[aria-pressed="true"] {
    border-color: #f4c430; color: #fff;
    background: linear-gradient(120deg, rgba(58,37,80,.92), rgba(31,39,70,.92));
  }

  /* ---------- THE CONTEXTUAL PANEL ---------- */
  html.ui-immersive .imm-panel {
    position: fixed; left: 10px; right: 10px; bottom: 150px; z-index: 40;
    border-radius: 20px; padding: 14px;
    background: linear-gradient(150deg, rgba(31,24,58,.95), rgba(16,21,44,.95));
    border: 1px solid rgba(244,196,48,.42);
    box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(167,139,250,.18) inset;
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    max-height: 56vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    animation: immRise .18s ease-out;
  }
  @keyframes immRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  html.ui-immersive .imm-panel-head { display: flex; align-items: flex-start; gap: 10px; }
  html.ui-immersive .imm-panel-title { flex: 1; min-width: 0; }
  html.ui-immersive .imm-panel-title h3 { margin: 0; font-size: 17px; color: #fff; font-weight: 800; }
  html.ui-immersive .imm-panel-title .imm-sub { display: block; margin-top: 2px; text-transform: none; letter-spacing: 0; }
  html.ui-immersive .imm-x {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08);
    color: #fff; font-size: 17px; line-height: 1; cursor: pointer;
  }
  html.ui-immersive .imm-card {
    margin-top: 11px; border-radius: 14px; padding: 11px;
    background: linear-gradient(140deg, rgba(58,37,80,.55), rgba(31,39,70,.55));
    border: 1px solid rgba(167,139,250,.22);
  }
  html.ui-immersive .imm-duck { display: flex; align-items: center; gap: 11px; }
  html.ui-immersive .imm-duck img {
    width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
    border: 2px solid rgba(244,196,48,.6); background: #0a1628;
  }
  html.ui-immersive .imm-duck .imm-nm { font-size: 15.5px; font-weight: 800; color: #ffd35d; }
  html.ui-immersive .imm-fact { display: flex; gap: 8px; font-size: 13px; color: #cfe0f2; margin-top: 8px; line-height: 1.45; }
  html.ui-immersive .imm-fact b { color: #9fb0cb; font-weight: 700; flex: 0 0 auto; }
  html.ui-immersive .imm-state {
    display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px;
    font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    background: rgba(167,139,250,.26); color: #e4d9ff; border: 1px solid rgba(167,139,250,.45);
  }
  html.ui-immersive .imm-go {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 12px; min-height: 46px; border-radius: 999px; text-decoration: none;
    background: linear-gradient(120deg, #4c2f82, #6d4bb0);
    border: 1px solid rgba(244,196,48,.45); color: #fff; font-size: 15px; font-weight: 800;
  }
  html.ui-immersive .imm-pick { display: block; width: 100%; text-align: left; margin-top: 7px; }

  /* ---------- SHEETS (collections, share) ---------- */
  html.ui-immersive .imm-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    max-height: 72vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    border-radius: 20px 20px 0 0; padding: 12px 12px max(16px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(16,21,44,.98), rgba(7,13,26,.99));
    border-top: 1px solid rgba(167,139,250,.35);
    box-shadow: 0 -18px 50px rgba(0,0,0,.62);
    animation: immSheet .2s ease-out;
  }
  @keyframes immSheet { from { transform: translateY(26px); opacity: .4; } to { transform: none; opacity: 1; } }
  html.ui-immersive .imm-sheet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  html.ui-immersive .imm-sheet-head h3 { margin: 0; flex: 1; font-size: 15px; color: #ffd35d; font-weight: 800; }
  /* the collections keep their own component styling; only the frame around them is new */
  html.ui-immersive .imm-sheet .dob { height: auto !important; max-height: 58vh !important; }
  html.ui-immersive .imm-sheet .dob .dob-row { flex: 0 0 auto !important; }
  html.ui-immersive .imm-scrim { position: fixed; inset: 0; z-index: 38; background: rgba(4,8,18,.55); }

  /* Blingy keeps its own launcher; it is only lifted clear of the bottom bar. */
  html.ui-immersive #blingy-launch, html.ui-immersive .blingy-fab { bottom: 150px !important; z-index: 36 !important; }

  @media (prefers-reduced-motion: reduce) {
    html.ui-immersive .imm-panel, html.ui-immersive .imm-sheet { animation: none; }
    html.ui-immersive #viewer .dpk-zc.dpk-pulsing { animation: none; }
  }
}