/* MapFun — immersive "game mode" (src/ui/immersive.js). Loaded last, after css/wow.css, whose
   `:root.chrome-hidden … { display:none !important }` blanket this file selectively re-admits.

   Game mode reuses poster view's chrome toggle, so `:root.immersive` is always accompanied by
   `:root.chrome-hidden`. Everything here is keyed on those classes and on env(safe-area-inset-*),
   never on a viewport width: a landscape phone is 844×390, which no `max-width: 720px` phone query
   ever matches, and the insets land on the LEFT and RIGHT edges there rather than the bottom. */

/* A 0×0 probe wearing the safe-area insets as padding: immersive.js reads them back in px through
   getComputedStyle and hands them to scene.setInset(). env() is not otherwise reachable from JS. */
.imm-safe-probe {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  visibility: hidden; pointer-events: none;
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}

:root.immersive {
  /* the top bar is gone, so everything anchored below it starts at the top of the screen */
  --topbar-h: 0px !important;
  --imm-gap: 8px;
  --imm-t: calc(env(safe-area-inset-top, 0px) + var(--imm-gap));
  --imm-r: calc(env(safe-area-inset-right, 0px) + var(--imm-gap));
  --imm-b: calc(env(safe-area-inset-bottom, 0px) + var(--imm-gap));
  --imm-l: calc(env(safe-area-inset-left, 0px) + var(--imm-gap));
  --imm-veil: color-mix(in srgb, var(--bg) 58%, transparent);
  --imm-veil-strong: color-mix(in srgb, var(--bg) 82%, transparent);
}
/* the fullscreen element paints its own backdrop black by default */
:root.immersive #app, #app:fullscreen, #app:-webkit-full-screen { background: var(--bg); }

/* Nothing else floats over the map. These panels are not in poster view's hide list (they came later),
   and a game must not have a 340-px empire blurb parked in the corner. */
:root.immersive #toolbox, :root.immersive #extras-rail, :root.immersive #truesize, :root.immersive #areatint-legend,
:root.immersive #sealevel-slot, :root.immersive #terminator-clock, :root.immersive .empires, :root.immersive .emp-blurb,
:root.immersive .hist-card, :root.immersive .dn-sheet, :root.immersive .dn-strip,
:root.immersive .nl-card, :root.immersive .nl-prov,
:root.immersive .sealevel.floating, :root.immersive .skin-tip { display: none !important; }

/* ---------------------------------------------------------------------------------------------
   Re-admitted chrome: the projection picker (the chip has to be able to open something) and the
   two instruments that earn their pixels — the skin rail and the timeline.

   The `:not([hidden])` is load-bearing: `[hidden] { display: none !important }` in base.css loses to a more
   specific !important rule, so re-admitting these unconditionally would make the picker impossible to close. */
:root.immersive.chrome-hidden #picker:not([hidden]),
:root.immersive.chrome-hidden #skinbar:not([hidden]),
:root.immersive.chrome-hidden #timeline:not([hidden]) { display: flex !important; }
:root.immersive.chrome-hidden .scrim:not([hidden]) { display: block !important; }

/* ---------------------------------------------------------------------------------------------
   The HUD: a chip, a round exit button, a rotate hint. Edge-docked, translucent, small.
   --------------------------------------------------------------------------------------------- */
#imm-hud { position: absolute; inset: 0; z-index: 26; pointer-events: none; }
#imm-hud > * { pointer-events: auto; }
/* a modal-ish panel owns the screen while it is open; Esc or its own close button brings the HUD back */
:root.picker-open #imm-hud { opacity: 0; pointer-events: none; }

.imm-chip, .imm-round {
  color: var(--ink);
  background: var(--imm-veil);
  backdrop-filter: blur(12px) saturate(1.15); -webkit-backdrop-filter: blur(12px) saturate(1.15);
  border: 1px solid var(--panel-border);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .3);
  transition: opacity 300ms ease, background-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.imm-chip:active, .imm-round:active { transform: scale(.94); }

#imm-proj {
  position: absolute; top: var(--imm-t); left: var(--imm-l);
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; max-width: min(46vw, 260px); padding: 0 12px; border-radius: 999px;
  font-family: var(--font-display); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; line-height: 1;
}
#imm-proj .imm-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#imm-proj::after {
  content: ""; flex: none; width: 6px; height: 6px; margin-left: 1px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: .55;
}

#imm-exit {
  position: absolute; top: var(--imm-t); right: var(--imm-r);
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  color: var(--ink);
  /* the one control that must always be findable: a heavier veil and a heavier stroke than the chip */
  background: var(--imm-veil-strong);
}
#imm-exit svg { width: 18px; height: 18px; stroke-width: 2.2; }

/* the polite rotate hint (iPhone standalone, where orientation cannot be locked) */
#imm-rotate.imm-hint {
  /* just above the scrubber: top-centre would sit on the projection chip on a 390-px-wide phone */
  position: absolute; left: 50%; bottom: calc(var(--imm-b) + var(--tl-h, 56px) + 12px); transform: translateX(-50%);
  max-width: calc(100vw - 2 * var(--imm-l));
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px; font-size: 12px; white-space: nowrap;
  color: var(--ink); background: var(--imm-veil-strong);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--panel-border);
}
#imm-rotate svg { width: 16px; height: 16px; color: var(--accent); animation: imm-rock 2.6s ease-in-out infinite; }
@keyframes imm-rock { 0%, 55%, 100% { transform: rotate(0); } 72%, 88% { transform: rotate(-84deg); } }

/* ---------------------------------------------------------------------------------------------
   Auto-fade. Three seconds after the last touch the controls go; the next touch brings them back.
   The exit affordance never leaves — it only dims.
   --------------------------------------------------------------------------------------------- */
:root.immersive #imm-proj, :root.immersive #imm-rotate,
:root.immersive.chrome-hidden #skinbar, :root.immersive.chrome-hidden #timeline {
  transition: opacity 320ms ease, bottom var(--t-med);
}
:root.immersive.hud-idle #imm-proj,
:root.immersive.hud-idle #imm-rotate,
:root.immersive.hud-idle.chrome-hidden #skinbar,
:root.immersive.hud-idle.chrome-hidden #timeline { opacity: 0; pointer-events: none; }
:root.immersive.hud-idle #imm-exit { opacity: .4; }

/* ---------------------------------------------------------------------------------------------
   Skin rail -> a thin strip docked under the projection chip on the left edge. The rail is already a
   56-px column of group tiles with a position:fixed flyout (css/skins.css); game mode just narrows it,
   drops the tile captions and gives the strip a darker veil. NOTHING here may put a `transform` on
   #skinbar: the flyout is a position:fixed child that src/ui/skinbar.js places in viewport
   coordinates, and a transformed ancestor would become its containing block.
   --------------------------------------------------------------------------------------------- */
:root.immersive.chrome-hidden #skinbar.skinbar {
  --rail-strip-w: 46px;
  max-height: none; padding-bottom: 0;
  flex-direction: column; align-items: flex-start; gap: 6px;
  left: var(--imm-l); right: auto;
  top: calc(var(--imm-t) + 36px); bottom: auto;
  width: auto; max-width: var(--rail-strip-w);
  background: none;
}
:root.immersive #skinbar .rail-head { width: var(--rail-strip-w); }
:root.immersive #skinbar .rail-groups {
  display: flex; flex-direction: column; width: var(--rail-strip-w); gap: 2px; padding: 5px; border-radius: 14px;
  max-height: calc(100dvh - var(--imm-t) - var(--imm-b) - 108px);
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  background: var(--imm-veil);
}
:root.immersive #skinbar .rail-groups::-webkit-scrollbar { display: none; }
:root.immersive #skinbar .rail-tile { width: 36px; padding: 2px 0; }
:root.immersive #skinbar .rail-tile .tile-thumb { width: 32px; height: 32px; border-radius: 9px; }
:root.immersive #skinbar .rail-tile .tile-icon, :root.immersive #skinbar .rail-tile .tile-icon svg { width: 16px; height: 16px; }
/* the captions are what makes the rail tall; the flyout and the tooltip still name every group */
:root.immersive #skinbar .rail-tile .tile-label { display: none; }
/* the status card is wide enough to reach the timeline — not in a game */
:root.immersive #skinbar .skin-status { display: none !important; }

/* ---------------------------------------------------------------------------------------------
   Timeline → a slim scrubber. Centred, never full-width, no era labels, a short track.
   --------------------------------------------------------------------------------------------- */
:root.immersive.chrome-hidden #timeline.timeline,
:root.immersive.chrome-hidden #timeline.timeline[data-mode="now"] {
  left: 50%; right: auto; transform: translateX(-50%);
  bottom: var(--imm-b);
  /* the rail sits at the top of the left edge, so the scrubber only has to stay off the screen edges */
  width: min(560px, calc(100vw - 2 * var(--imm-l) - 8px));
  padding: 3px 9px 4px; border-radius: 13px;
  background: var(--imm-veil-strong);
}
:root.immersive.chrome-hidden #timeline.timeline[data-mode="now"] { width: max-content; }
:root.immersive #timeline .tl-bar { flex-wrap: nowrap; gap: 8px; min-height: 30px; }
:root.immersive #timeline .tl-spacer { display: none; }
:root.immersive #timeline .tl-modes { padding: 2px; }
:root.immersive #timeline .tl-mode { height: 24px; padding: 0 9px; font-size: 11.5px; }
:root.immersive #timeline .tl-sentence { flex: 1 1 auto; order: 0; min-width: 0; font-size: 12.5px; overflow: hidden; }
:root[data-theme="atlas"].immersive #timeline .tl-sentence { font-size: 13.5px; }
:root.immersive #timeline .tl-pick { height: 24px; padding: 0 5px 0 8px; font-size: 12px; }
:root.immersive #timeline .tl-actions { gap: 4px; margin-left: 0; }
:root.immersive #timeline .tl-actions .btn { height: 26px; padding: 0 7px; font-size: 12px; }
:root.immersive #timeline .tl-actions .btn.icon { width: 26px; }
:root.immersive #timeline .tl-actions .btn span, :root.immersive #timeline .dn-chip-label { display: none; }
:root.immersive #timeline .tl-trackwrap { padding: 1px 2px 0; }
:root.immersive #timeline .tl-track { height: 34px; }
:root.immersive #timeline .tl-band-label { display: none; }
:root.immersive #timeline .tl-tick text { font-size: 9px; }

/* The picker opens over the map; give it the same short leash so it does not become the app. */
:root.immersive #picker { top: calc(var(--imm-t)); left: var(--imm-l); right: var(--imm-r); max-height: calc(100dvh - 2 * var(--imm-t)); }
:root.immersive .scrim { inset: 0; }

/* ---------------------------------------------------------------------------------------------
   The iPhone sheet. Shown when there is no Fullscreen API and we are not installed: the only way
   off Safari's chrome is the Home Screen.
   --------------------------------------------------------------------------------------------- */
#imm-sheet {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 28px)); max-height: min(520px, calc(100dvh - 32px));
  display: flex; flex-direction: column; overflow: hidden; z-index: 40;
  animation: pop-in var(--t-med);
}
#imm-sheet[hidden] { display: none !important; }
.imm-sheet-head { display: flex; align-items: center; gap: 10px; padding: 11px 8px 11px 16px; border-bottom: 1px solid var(--panel-border); }
.imm-sheet-head h2 { margin: 0; flex: 1; font-family: var(--font-display); font-size: 15.5px; font-weight: 600; }
.imm-sheet-body { padding: 13px 16px 14px; overflow-y: auto; }
.imm-lead { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; }
.imm-steps { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.imm-step { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.5; }
.imm-step-n {
  flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: var(--accent-ink); background: var(--accent);
}
.imm-glyph {
  display: inline-grid; place-items: center; width: 22px; height: 22px; vertical-align: -6px; border-radius: 6px;
  color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}
.imm-note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-muted); }
.imm-sheet-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------------------------
   Short landscape phones (390 px and under of height): tighten everything one notch so the map
   really is the whole screen and no two affordances touch.
   --------------------------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 440px) {
  :root.immersive { --imm-gap: 6px; }
  :root.immersive #imm-proj { height: 27px; font-size: 11.5px; padding: 0 10px; }
  :root.immersive #imm-exit { width: 30px; height: 30px; }
  :root.immersive #imm-exit svg { width: 16px; height: 16px; }
  :root.immersive.chrome-hidden #skinbar.skinbar { --rail-strip-w: 42px; }
  :root.immersive #skinbar .rail-groups { padding: 4px; gap: 1px; }
  :root.immersive #skinbar .rail-tile { width: 34px; }
  :root.immersive #skinbar .rail-tile .tile-thumb { width: 30px; height: 30px; }
  :root.immersive #timeline .tl-track { height: 28px; }
  :root.immersive #timeline .tl-bar { min-height: 26px; }
  :root.immersive #timeline .tl-mode { height: 22px; font-size: 11px; padding: 0 8px; }
  :root.immersive #timeline .tl-sentence { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #imm-rotate svg { animation: none; }
  :root.immersive #imm-proj, :root.immersive.chrome-hidden #skinbar, :root.immersive.chrome-hidden #timeline { transition: none; }
}