/*
 * player-pip.css — Plan C C2
 *
 * PiP-frame, dual-plane, and Tab[0]-ctx-state CSS rules.
 * All design-tokens consumed via var() — no hex literals (hex-zero gate).
 *
 * Cascade layers (per docs/architecture/design-system.md §Fase 1 Foundation):
 *   reset → tokens → base → components → utilities → overrides
 *
 * Plan C styles live in @layer components.
 *
 * Token-mapping note: plan referenced --hd-border-1/--hd-border-2 (do not
 * exist in this codebase); substituted with project's existing tokens
 * --hd-border-medium (frame outer) and --hd-border-subtle (control buttons).
 * Transitions use composed --hd-transition-{fast,normal} tokens which embed
 * --hd-ease-page-turn (no separate easing argument needed).
 */

@layer components {

  body {
    --hd-pip-projection-scale: 1;
    --hd-pip-projection-offset-x: 0px;
    --hd-pip-projection-offset-y: 0px;
  }

  /* ============================================================
   * Mount + frame
   * ============================================================ */

  #player-pip-frame.hd-player-pip-frame {
    position: fixed;
    z-index: 500;
    pointer-events: auto;
    background: var(--hd-surface-1);
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-radius-md);
    box-shadow: var(--hd-shadow-lg);
    overflow: hidden;
    /* Suppress native touch-scroll/pan arbitration so PlayerGestures' pointer
     * stream survives on iOS Safari (a drag on this position:fixed frame would
     * otherwise be claimed as a page pan → pointercancel before pointerup).
     * Required in all interactive sizes — pip/dualplane/fullscreen. */
    touch-action: none;
    transition: transform var(--hd-transition-normal),
                opacity var(--hd-transition-fast);
    /* CSS-owned stable AAA touch target across pip/split/fullscreen. */
    --hd-pip-control-size: 44px;
    /* Knapperne tangerer hinanden som ét cluster (Fase 1 typografi). */
    --hd-pip-control-gap: 0px;
    --hd-pip-control-font: calc(var(--hd-pip-control-size) * 0.45);
    /* 4px gives equal top/bottom margin for two 44px controls in 96px PiP. */
    --hd-pip-control-inset: 4px;
    --hd-pip-control-art-height: calc(var(--hd-pip-control-size) * 0.75);
    --hd-pip-control-border-radius: min(var(--hd-radius-sm), calc(var(--hd-pip-control-size) * 0.32));
    --hd-pip-control-icon-color: var(--hd-text-primary);
    --hd-pip-control-icon-active-color: var(--hd-accent-primary);
    --hd-pip-control-icon-opacity: 0.86;
  }

  /* Fase 3 — FLIP state-transition (pip↔dualplane↔fullscreen).
   * Klassen sættes af _animateStateTransition() lige efter inverted transform
   * er committet, og fjernes på transitionend/transitioncancel. Duration
   * bruger motion-token; easing kommer fra CONFIG.PLAYER_PIP_FLIP_EASING
   * via --cfg-pip-flip-easing root-var.
   * will-change er KUN aktiv mens animationen kører (ikke permanent — undgår
   * VRAM-pres på Pi 5 / iPad). */
  #player-pip-frame.hd-player-pip-frame.hd-player-pip-frame--animating {
    transition: transform var(--hd-motion-slow) var(--cfg-pip-flip-easing, var(--hd-ease-spring)),
                opacity var(--hd-transition-fast);
    will-change: transform;
  }

  #player-pip-frame[hidden] {
    display: none !important;
  }

  /* ============================================================
   * Size variants (driven by body-class set by PlayerPip)
   * ============================================================ */

  /* PiP — small floating frame */
  body.hd-pip-state-pip #player-pip-frame {
    width: 160px;
    height: 96px;
    bottom: 6px;
  }

  body.hd-player-mode-player-portal.hd-pip-state-pip #player-pip-frame {
    bottom: calc(var(--player-tab-bar-size, 56px) + 6px);
  }

  body.hd-player-mode-player-portal.hd-pip-state-pip.hd-pip-side-left #player-pip-frame {
    left: calc(var(--hd-visual-viewport-offset-left, 0px) + 6px);
    right: auto;
  }

  body.hd-player-mode-player-portal.hd-pip-state-pip.hd-pip-side-right #player-pip-frame {
    left: auto;
    right: calc(100vw - var(--hd-visual-viewport-offset-left, 0px) - var(--hd-visual-viewport-width, 100vw) + 6px);
  }

  @media (min-aspect-ratio: 1/1) {
    body.hd-player-mode-player-portal.hd-pip-state-pip #player-pip-frame {
      bottom: 6px;
    }

    body.hd-player-mode-player-portal.hd-pip-state-pip.hd-pip-side-right #player-pip-frame {
      right: calc(100vw - var(--hd-visual-viewport-offset-left, 0px) - var(--hd-visual-viewport-width, 100vw) + var(--player-tab-bar-size, 0px) + 6px);
    }
  }

  body.hd-pip-state-pip.hd-pip-side-left #player-pip-frame {
    left: 6px;
    right: auto;
  }

  body.hd-pip-state-pip.hd-pip-side-right #player-pip-frame {
    right: 6px;
    left: auto;
  }

  /* Dual-plane — 50% viewport split (mobile portrait = top/bottom; landscape = left/right) */
  body.hd-pip-state-dualplane #player-pip-frame {
    width: 100vw;
    height: 50vh;
    left: 0;
    bottom: 0;
    top: auto;
    right: auto;
    border-radius: 0;
    box-shadow: none;
    /* touch-action:none now lives on the base #player-pip-frame rule (all sizes). */
  }

  body.hd-pip-state-dualplane.hd-dualplane-flipped #player-pip-frame {
    top: 0;
    bottom: auto;
  }

  body.hd-player-mode-player-portal.hd-pip-state-dualplane #player-pip-frame {
    height: var(--hd-player-split-height, calc((var(--hd-visual-viewport-height, 100vh) - var(--player-top-bar-height, 0px) - var(--player-tab-bar-size, 0px)) / 2));
    bottom: var(--player-tab-bar-size, 0px);
    top: auto;
  }

  body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-dualplane-flipped #player-pip-frame {
    top: calc(var(--hd-visual-viewport-offset-top, 0px) + var(--player-top-bar-height, 0px));
    bottom: auto;
  }

  @media (min-aspect-ratio: 1/1) {
    body.hd-pip-state-dualplane #player-pip-frame {
      width: var(--hd-player-split-width, 50vw);
      height: 100vh;
      top: 0;
      bottom: auto;
      left: 0;
      right: auto;
    }

    body.hd-pip-state-dualplane.hd-dualplane-flipped #player-pip-frame {
      left: auto;
      right: var(--player-tab-bar-size, 0px);
    }

    body.hd-player-mode-player-portal.hd-pip-state-dualplane #player-pip-frame {
      width: var(--hd-player-split-width);
      top: calc(var(--hd-visual-viewport-offset-top, 0px) + var(--player-top-bar-height, 0px));
      left: var(--hd-visual-viewport-offset-left, 0px);
      right: auto;
      bottom: 0;
      height: auto;
    }

    /* Flipped portrait rule has higher specificity and would set bottom:auto —
     * override explicitly so the frame fills full usable height in landscape. */
    body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-dualplane-flipped #player-pip-frame {
      left: calc(var(--hd-visual-viewport-offset-left, 0px) + var(--hd-player-split-width));
      right: auto;
      bottom: 0;
      height: auto;
    }
  }

  /* Fullscreen — admin's projection fills viewport, controls overlay */
  body.hd-pip-state-fullscreen #player-pip-frame {
    width: 100vw;
    height: 100vh;
    inset: 0;
    z-index: 1500;
    border-radius: 0;
    /* Frame itself MUST stay hittable (inherits pointer-events:auto from the base
     * rule) so edge-band swipes reach PlayerGestures' _onPointerDown. The projected
     * admin content below is left non-interactive so it can't swallow the gesture;
     * the frame then becomes the direct hit-target for those pointers. */
  }

  body.hd-pip-state-fullscreen #player-pip-frame .hd-player-pip-content {
    pointer-events: none;
    cursor: default;
  }

  body.hd-pip-state-fullscreen #player-pip-frame .hd-player-pip-chrome,
  body.hd-pip-state-fullscreen #player-pip-frame .hd-player-pip-controls,
  body.hd-pip-state-fullscreen #player-pip-frame .hd-player-pip-control,
  body.hd-pip-state-fullscreen #player-pip-frame .hd-player-pip-mode-tag {
    pointer-events: auto;
  }

  body.hd-player-mode-preview #player-pip-frame .hd-player-pip-controls,
  body.hd-player-mode-preview #player-pip-frame .hd-player-pip-mode-tag {
    display: none !important;
  }

  body.hd-player-mode-player-portal.hd-pip-state-fullscreen #player-pip-frame {
    top: calc(var(--hd-visual-viewport-offset-top, 0px) + var(--player-top-bar-height, 0px));
    left: var(--hd-visual-viewport-offset-left, 0px);
    right: calc(100vw - var(--hd-visual-viewport-offset-left, 0px) - var(--hd-visual-viewport-width, 100vw));
    bottom: var(--player-tab-bar-size, 0px);
    z-index: 1500;
    border-radius: 0;
    width: auto;
    height: auto;
    aspect-ratio: auto;
  }

  @media (min-aspect-ratio: 1/1) {
    body.hd-player-mode-player-portal.hd-pip-state-fullscreen #player-pip-frame {
      right: calc(100vw - var(--hd-visual-viewport-offset-left, 0px) - var(--hd-visual-viewport-width, 100vw) + var(--player-tab-bar-size, 0px));
      bottom: 0;
    }
  }

  /* ============================================================
   * Chrome (mode-tag pill + controls + content slot)
   * Controls: 2 i PiP-mode (split + minimize), 3 i dualplane/fullscreen
   * (pip-toggle + split + minimize). Knapperne stables vertikalt uden
   * gap så de fremstår som ét sammenhængende cluster.
   * ============================================================ */

  .hd-player-pip-chrome {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .hd-player-pip-mode-tag {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 510;
    padding: 2px 6px;
    font-size: var(--hd-text-micro);
    font-weight: var(--hd-weight-semibold);
    color: var(--hd-text-primary);
    background: var(--hd-surface-2);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-sm);
    pointer-events: none;
    /* Default hidden until C3 sets data-mode-tag content */
  }

  .hd-player-pip-mode-tag:empty {
    display: none;
  }

  .hd-player-pip-controls {
    position: absolute;
    top: var(--hd-pip-control-inset);
    right: var(--hd-pip-control-inset);
    z-index: 510;
    display: flex;
    flex-direction: column;
    gap: var(--hd-pip-control-gap);
  }

  .hd-player-pip-control {
    width: var(--hd-pip-control-size);
    height: var(--hd-pip-control-size);
    min-width: var(--hd-pip-control-size);
    min-height: var(--hd-pip-control-size);
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    padding: 0;
    position: relative;
    border: 1px solid var(--hd-border-subtle);
    background: var(--hd-surface-2);
    color: var(--hd-pip-control-icon-color);
    border-radius: var(--hd-pip-control-border-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--hd-pip-control-font);
    line-height: var(--hd-leading-icon);
    opacity: 1;
    transition: color var(--hd-transition-fast),
                border-color var(--hd-transition-fast),
                background var(--hd-transition-fast);
  }

  .hd-player-pip-control[data-pip-icon] {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    white-space: nowrap;
  }

  .hd-player-pip-control:hover,
  .hd-player-pip-control:focus-visible {
    --hd-pip-control-icon-opacity: 1;
    color: var(--hd-pip-control-icon-active-color);
    border-color: var(--hd-border-accent);
  }

  .hd-player-pip-control:hover::after,
  .hd-player-pip-control:focus-visible::after {
    border-color: var(--hd-border-accent);
  }

  .hd-player-pip-control::before {
    content: '';
    position: absolute;
    display: none;
    width: var(--hd-pip-control-size);
    height: var(--hd-pip-control-size);
    top: 50%;
    left: 50%;
    background-color: currentColor;
    opacity: var(--hd-pip-control-icon-opacity);
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(var(--hd-pip-control-icon-rotate, 0deg));
    -webkit-mask: var(--hd-pip-control-icon) center / contain no-repeat;
    -webkit-mask-image: var(--hd-pip-control-icon);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask: var(--hd-pip-control-icon) center / contain no-repeat;
    z-index: 1;
  }

  .hd-player-pip-control::after {
    content: '';
    position: absolute;
    display: none;
    width: var(--hd-pip-control-size);
    height: var(--hd-pip-control-art-height);
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    background: var(--hd-surface-2);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-pip-control-border-radius);
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(var(--hd-pip-control-icon-rotate, 0deg));
    transition: border-color var(--hd-transition-fast),
                background var(--hd-transition-fast);
    z-index: 0;
  }

  .hd-player-pip-control[data-pip-icon]::before {
    display: block;
  }

  .hd-player-pip-control[data-pip-icon]::after {
    display: block;
  }

  .hd-player-pip-control[data-pip-icon="pip"] {
    --hd-pip-control-icon: url('../img/player-pip-controls/pip.png');
  }

  .hd-player-pip-control[data-pip-icon="fullscreen"] {
    --hd-pip-control-icon: url('../img/player-pip-controls/full.png');
  }

  .hd-player-pip-control[data-pip-icon="minimize"] {
    --hd-pip-control-icon: url('../img/player-pip-controls/minimize.png');
  }

  .hd-player-pip-control[data-pip-icon="split-top"] {
    --hd-pip-control-icon: url('../img/player-pip-controls/split-top.png');
  }

  .hd-player-pip-control[data-pip-icon="split-bottom"] {
    --hd-pip-control-icon: url('../img/player-pip-controls/split-bottom.png');
  }

  .hd-player-pip-control[data-pip-icon="split-left"] {
    --hd-pip-control-icon: url('../img/player-pip-controls/split-bottom.png');
    --hd-pip-control-icon-rotate: 90deg;
  }

  .hd-player-pip-control[data-pip-icon="split-right"] {
    --hd-pip-control-icon: url('../img/player-pip-controls/split-top.png');
    --hd-pip-control-icon-rotate: 90deg;
  }

  .hd-player-pip-content {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    overflow: hidden;
  }

  /* Temporary on-screen PiP diagnostic (#1) — readout when content is empty,
   * gated behind ?pipdebug=1 (player-pip.js _pipDebugEnabled). Small, muted,
   * wraps inside the little frame so the chain-state tuple is legible on iOS. */
  .hd-player-pip-empty-diag {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--hd-space-2, 8px);
    font-size: var(--hd-text-2xs, 0.6875rem);
    line-height: var(--hd-leading-snug, 1.3);
    color: var(--hd-text-secondary);
    text-align: center;
    overflow-wrap: anywhere;
  }

  /* ============================================================
   * Reduced motion
   * ============================================================ */

  @media (prefers-reduced-motion: reduce) {
    #player-pip-frame.hd-player-pip-frame,
    .hd-player-pip-control {
      transition: none;
    }
  }

  /* ============================================================
   * Admin-screen positioning when shown inside PiP-frame.
   *
   * Strategy: when body has hd-pip-state-{pip|dualplane|fullscreen} +
   * hd-pip-profile-{X}, the corresponding #X-screen is positioned to
   * cover the PiP-frame area via fixed + transform.
   *
   * KAMP-mode (kamp profile) does NOT scale #kamp-screen in PiP size —
   * instead C4's mini-summary renders into .hd-player-pip-content.
   * CSS rule for KAMP is intentionally absent in PiP-size selectors.
   * ============================================================ */

  /* PiP size — scale-down to fit frame by measured placement */
  body.hd-pip-state-pip.hd-pip-profile-vis #vis-screen,
  body.hd-pip-state-pip.hd-pip-profile-kort #kort-screen,
  body.hd-pip-state-pip.hd-pip-profile-butik #butik-screen,
  body.hd-pip-state-pip.hd-pip-profile-dasham #dasham-screen,
  body.hd-pip-state-pip.hd-pip-profile-eventyrere #eventyrere-screen,
  body.hd-pip-state-pip.hd-pip-profile-splash #splash-screen,
  body.hd-pip-state-pip.hd-pip-profile-npc #container {
    position: fixed;
    width: 100vw;
    height: 100vh;
    inset: 0;
    transform-origin: top left;
    transform:
      translate(var(--hd-pip-projection-offset-x), var(--hd-pip-projection-offset-y))
      scale(var(--hd-pip-projection-scale));
    z-index: 499;
    pointer-events: none;
    overflow: hidden;
  }

  /* Dual-plane size — admin-screen takes 50% of viewport */
  body.hd-pip-state-dualplane.hd-pip-profile-vis #vis-screen,
  body.hd-pip-state-dualplane.hd-pip-profile-kort #kort-screen,
  body.hd-pip-state-dualplane.hd-pip-profile-kamp #kamp-screen,
  body.hd-pip-state-dualplane.hd-pip-profile-butik #butik-screen,
  body.hd-pip-state-dualplane.hd-pip-profile-dasham #dasham-screen,
  body.hd-pip-state-dualplane.hd-pip-profile-eventyrere #eventyrere-screen,
  body.hd-pip-state-dualplane.hd-pip-profile-splash #splash-screen,
  body.hd-pip-state-dualplane.hd-pip-profile-npc #container {
    position: fixed;
    width: 100vw;
    height: 50vh;
    top: auto;
    bottom: 0;
    left: 0;
    z-index: 499;
  }

  body.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-vis #vis-screen,
  body.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-kort #kort-screen,
  body.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-kamp #kamp-screen,
  body.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-butik #butik-screen,
  body.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-dasham #dasham-screen,
  body.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-eventyrere #eventyrere-screen,
  body.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-splash #splash-screen,
  body.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-npc #container {
    top: 0;
    bottom: auto;
  }

  body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-pip-profile-vis #vis-screen,
  body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-pip-profile-kort #kort-screen,
  body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-pip-profile-kamp #kamp-screen,
  body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-pip-profile-butik #butik-screen,
  body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-pip-profile-dasham #dasham-screen,
  body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-pip-profile-eventyrere #eventyrere-screen,
  body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-pip-profile-splash #splash-screen,
  body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-pip-profile-npc #container {
    height: var(--hd-player-split-height, calc((var(--hd-visual-viewport-height, 100vh) - var(--player-top-bar-height, 0px) - var(--player-tab-bar-size, 0px)) / 2));
    bottom: var(--player-tab-bar-size, 0px);
    top: auto;
  }

  body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-vis #vis-screen,
  body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-kort #kort-screen,
  body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-kamp #kamp-screen,
  body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-butik #butik-screen,
  body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-dasham #dasham-screen,
  body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-eventyrere #eventyrere-screen,
  body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-splash #splash-screen,
  body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-npc #container {
    top: calc(var(--hd-visual-viewport-offset-top, 0px) + var(--player-top-bar-height, 0px));
    bottom: auto;
  }

  @media (min-aspect-ratio: 1/1) {
    body.hd-pip-state-dualplane.hd-pip-profile-vis #vis-screen,
    body.hd-pip-state-dualplane.hd-pip-profile-kort #kort-screen,
    body.hd-pip-state-dualplane.hd-pip-profile-kamp #kamp-screen,
    body.hd-pip-state-dualplane.hd-pip-profile-butik #butik-screen,
    body.hd-pip-state-dualplane.hd-pip-profile-dasham #dasham-screen,
    body.hd-pip-state-dualplane.hd-pip-profile-eventyrere #eventyrere-screen,
    body.hd-pip-state-dualplane.hd-pip-profile-splash #splash-screen,
    body.hd-pip-state-dualplane.hd-pip-profile-npc #container {
      width: var(--hd-player-split-width, 50vw);
      height: 100vh;
      top: 0;
      bottom: auto;
      left: 0;
      right: auto;
    }

    body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-pip-profile-vis #vis-screen,
    body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-pip-profile-kort #kort-screen,
    body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-pip-profile-kamp #kamp-screen,
    body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-pip-profile-butik #butik-screen,
    body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-pip-profile-dasham #dasham-screen,
    body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-pip-profile-eventyrere #eventyrere-screen,
    body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-pip-profile-splash #splash-screen,
    body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-pip-profile-npc #container {
      width: var(--hd-player-split-width);
      top: calc(var(--hd-visual-viewport-offset-top, 0px) + var(--player-top-bar-height, 0px));
      left: var(--hd-visual-viewport-offset-left, 0px);
      right: auto;
      bottom: 0;
      height: auto;
    }

    body.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-vis #vis-screen,
    body.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-kort #kort-screen,
    body.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-kamp #kamp-screen,
    body.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-butik #butik-screen,
    body.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-dasham #dasham-screen,
    body.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-eventyrere #eventyrere-screen,
    body.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-splash #splash-screen,
    body.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-npc #container {
      left: auto;
      right: var(--player-tab-bar-size, 0px);
    }

    body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-vis #vis-screen,
    body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-kort #kort-screen,
    body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-kamp #kamp-screen,
    body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-butik #butik-screen,
    body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-dasham #dasham-screen,
    body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-eventyrere #eventyrere-screen,
    body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-splash #splash-screen,
    body.hd-player-mode-player-portal.hd-pip-state-dualplane.hd-dualplane-flipped.hd-pip-profile-npc #container {
      left: calc(var(--hd-visual-viewport-offset-left, 0px) + var(--hd-player-split-width));
      right: auto;
      /* Flipped portrait rule wins on specificity and sets bottom:auto —
       * restore full-height stretch in landscape. */
      bottom: 0;
      height: auto;
    }
  }

  /* Fullscreen — admin-screen fills viewport */
  body.hd-pip-state-fullscreen.hd-pip-profile-vis #vis-screen,
  body.hd-pip-state-fullscreen.hd-pip-profile-kort #kort-screen,
  body.hd-pip-state-fullscreen.hd-pip-profile-kamp #kamp-screen,
  body.hd-pip-state-fullscreen.hd-pip-profile-butik #butik-screen,
  body.hd-pip-state-fullscreen.hd-pip-profile-dasham #dasham-screen,
  body.hd-pip-state-fullscreen.hd-pip-profile-eventyrere #eventyrere-screen,
  body.hd-pip-state-fullscreen.hd-pip-profile-splash #splash-screen,
  body.hd-pip-state-fullscreen.hd-pip-profile-npc #container {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1499;
  }

  body.hd-player-mode-player-portal.hd-pip-state-fullscreen.hd-pip-profile-vis #vis-screen,
  body.hd-player-mode-player-portal.hd-pip-state-fullscreen.hd-pip-profile-kort #kort-screen,
  body.hd-player-mode-player-portal.hd-pip-state-fullscreen.hd-pip-profile-kamp #kamp-screen,
  body.hd-player-mode-player-portal.hd-pip-state-fullscreen.hd-pip-profile-butik #butik-screen,
  body.hd-player-mode-player-portal.hd-pip-state-fullscreen.hd-pip-profile-dasham #dasham-screen,
  body.hd-player-mode-player-portal.hd-pip-state-fullscreen.hd-pip-profile-eventyrere #eventyrere-screen,
  body.hd-player-mode-player-portal.hd-pip-state-fullscreen.hd-pip-profile-splash #splash-screen,
  body.hd-player-mode-player-portal.hd-pip-state-fullscreen.hd-pip-profile-npc #container {
    position: fixed;
    top: calc(var(--hd-visual-viewport-offset-top, 0px) + var(--player-top-bar-height, 0px));
    left: var(--hd-visual-viewport-offset-left, 0px);
    right: calc(100vw - var(--hd-visual-viewport-offset-left, 0px) - var(--hd-visual-viewport-width, 100vw));
    bottom: var(--player-tab-bar-size, 0px);
    width: auto;
    height: auto;
    z-index: 1499;
  }

  @media (min-aspect-ratio: 1/1) {
    body.hd-player-mode-player-portal.hd-pip-state-fullscreen.hd-pip-profile-vis #vis-screen,
    body.hd-player-mode-player-portal.hd-pip-state-fullscreen.hd-pip-profile-kort #kort-screen,
    body.hd-player-mode-player-portal.hd-pip-state-fullscreen.hd-pip-profile-kamp #kamp-screen,
    body.hd-player-mode-player-portal.hd-pip-state-fullscreen.hd-pip-profile-butik #butik-screen,
    body.hd-player-mode-player-portal.hd-pip-state-fullscreen.hd-pip-profile-dasham #dasham-screen,
    body.hd-player-mode-player-portal.hd-pip-state-fullscreen.hd-pip-profile-eventyrere #eventyrere-screen,
    body.hd-player-mode-player-portal.hd-pip-state-fullscreen.hd-pip-profile-splash #splash-screen,
    body.hd-player-mode-player-portal.hd-pip-state-fullscreen.hd-pip-profile-npc #container {
      right: calc(100vw - var(--hd-visual-viewport-offset-left, 0px) - var(--hd-visual-viewport-width, 100vw) + var(--player-tab-bar-size, 0px));
      bottom: 0;
    }
  }

  /* Hosted projection content.
   *
   * In player-portal mode the active admin-display screen is physically moved
   * into .hd-player-pip-content by PlayerPip. These rules neutralize the
   * legacy fullscreen/fixed positioning on the adopted root so the view is
   * contained by the PiP, split, or fullscreen frame instead of sitting behind
   * it as a sibling overlay.
   */
  body.hd-player-mode-player-portal #player-pip-frame .hd-player-pip-content > .hd-player-pip-projection {
    position: absolute;
    inset: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    padding-top: 0;
    margin: 0;
    box-sizing: border-box;
    transform: none;
    transform-origin: center;
    z-index: 1;
    pointer-events: auto;
    overflow: hidden;
  }

  body.hd-player-mode-player-portal #player-pip-frame .hd-player-pip-content > #container.hd-player-pip-projection {
    display: flex;
  }

  body.hd-player-mode-player-portal #player-pip-frame .hd-player-pip-content > .hd-player-pip-projection #active-npc-image {
    height: 95%;
    max-height: 95%;
  }

  body.hd-player-mode-player-portal #player-pip-frame .hd-player-pip-content > .hd-player-pip-projection #background-image {
    height: 110%;
  }

  body.hd-player-mode-player-portal #player-pip-frame .hd-player-pip-content > .hd-player-pip-projection .hd-display-overlay__caption {
    margin-bottom: min(20px, 4%);
  }

  /* ============================================================
   * KAMP mini-summary (C4) — rendered into .hd-player-pip-content
   * for KAMP-profile in PiP-size mode.
   * ============================================================ */

  .hd-player-pip-kamp-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: var(--hd-space-1);
    box-sizing: border-box;
    gap: 2px;
    text-align: center;
  }

  .hd-player-pip-kamp-summary__portrait {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--hd-surface-2);
    border: 1px solid var(--hd-border-subtle);
  }

  .hd-player-pip-kamp-summary__name {
    font-size: var(--hd-text-ui-small);
    font-weight: var(--hd-weight-semibold);
    color: var(--hd-text-primary);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: var(--hd-leading-tight);
  }

  .hd-player-pip-kamp-summary__turn {
    font-size: var(--hd-text-micro);
    color: var(--hd-text-secondary);
    line-height: var(--hd-leading-tight);
  }

  /* ============================================================
   * Fase 1 — self-rendered NPC/VIS/KORT projection content
   * (replaces legacy-DOM adoption). Each fills .hd-player-pip-content.
   * ============================================================ */

  .hd-player-pip-npc-summary,
  .hd-player-pip-vis-content,
  .hd-player-pip-kort-content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--hd-surface-2);
    /* A1: the scene background-image is set inline on the container itself
     * (e.g. container.style.backgroundImage = url(npc.background)). Without
     * cover/center/no-repeat the browser falls back to auto/0% 0%/repeat
     * and only the upper-left corner is visible inside the PiP frame.
     * Affects all three projections (NPC, VIS-with-NpcBackground, KORT). */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
  }

  .hd-player-pip-npc-summary__portrait,
  .hd-player-pip-vis-content__image,
  .hd-player-pip-kort-content__image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* A2: portrait switched from <div background-image> to <img> so ImageLoader
   * can probe webp/png/jpg fallbacks. The wrapper keeps positioning; the inner
   * <img> fills it via object-fit:cover so the NPC face stays centred and the
   * frame is fully covered across pip/dualplane/fullscreen sizes. */
  .hd-player-pip-npc-summary__portrait > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    /* Hide alt-text + broken-image glyph until the ImageLoader fallback chain
     * resolves; opacity transitions in once a src is set. */
    background: transparent;
  }

  .hd-player-pip-kort-content__image {
    background-size: contain;
  }

  .hd-player-pip-npc-summary__name,
  .hd-player-pip-vis-content__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2px var(--hd-space-1);
    font-size: var(--hd-text-micro);
    font-weight: var(--hd-weight-semibold);
    color: var(--hd-text-primary);
    background-color: var(--hd-surface-overlay);
    text-align: center;
    line-height: var(--hd-leading-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
  }

  /* ============================================================
   * Fase 2 — self-rendered DASHAM / BUTIK / EVENTYRERE projection
   * content. Each fills .hd-player-pip-content and scales responsively
   * (pip / split / fullscreen) via %/aspect-ratio/cqi — no transform —
   * so it always fits its frame instead of overflowing.
   * ============================================================ */

  .hd-player-pip-dasham-content,
  .hd-player-pip-butik-content,
  .hd-player-pip-eventyrere-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: var(--hd-space-1);
    gap: var(--hd-space-1);
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--hd-surface-2);
    color: var(--hd-text-primary);
  }

  .hd-player-pip-dasham-content__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--hd-space-1);
    width: 100%;
    flex: 0 0 auto;
    font-size: var(--hd-text-micro);
    line-height: var(--hd-leading-tight);
  }

  .hd-player-pip-dasham-content__player {
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hd-player-pip-dasham-content__player--red { color: var(--hd-dasham-owner-red); }
  .hd-player-pip-dasham-content__player--blue { color: var(--hd-dasham-owner-blue); }
  .hd-player-pip-dasham-content__score { flex: 0 0 auto; font-weight: var(--hd-weight-bold); }

  /* Square 3×3 board that shrinks to the smaller frame dimension. */
  .hd-player-pip-dasham-content__board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 1px;
    flex: 1 1 auto;
    aspect-ratio: 1 / 1;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    container-type: inline-size;
  }

  .hd-player-pip-dasham-content__cell {
    position: relative;
    background-color: var(--hd-surface-1);
    border-radius: 2px;
  }

  .hd-player-pip-dasham-content__cell[data-owner="red"] {
    background-color: color-mix(in srgb, var(--hd-dasham-owner-red) 32%, var(--hd-surface-1));
  }

  .hd-player-pip-dasham-content__cell[data-owner="blue"] {
    background-color: color-mix(in srgb, var(--hd-dasham-owner-blue) 32%, var(--hd-surface-1));
  }

  /* Card values scale with the board width (cqi) so they stay legible from the
   * tiny PiP up to fullscreen, with a readable floor + cap. */
  .hd-player-pip-dasham-content__val {
    position: absolute;
    /* cqi keeps values proportional to the board across pip/split/fullscreen;
     * token bounds give a readability floor (micro) and a sane cap (body). */
    font-size: clamp(var(--hd-text-micro), 7cqi, var(--hd-text-body));
    line-height: var(--hd-leading-icon);
    color: var(--hd-text-primary);
  }
  .hd-player-pip-dasham-content__val--top { top: 1px; left: 50%; transform: translateX(-50%); }
  .hd-player-pip-dasham-content__val--bottom { bottom: 1px; left: 50%; transform: translateX(-50%); }
  .hd-player-pip-dasham-content__val--left { left: 1px; top: 50%; transform: translateY(-50%); }
  .hd-player-pip-dasham-content__val--right { right: 1px; top: 50%; transform: translateY(-50%); }

  /* ============================================================
   * BUTIK paritet (C3+C4) — backdrop + item-grid + sold-section
   * Container-query-driven adaption: pip = title/keeper/counter only,
   * dualplane = items grid, fullscreen = + backdrop + sold-section.
   * ============================================================ */

  .hd-player-pip-butik-content {
    justify-content: flex-start;
    text-align: center;
    /* Container-query context so the item-grid can adapt per PiP size. */
    container-type: inline-size;
  }
  .hd-player-pip-eventyrere-content {
    justify-content: flex-start;
    text-align: center;
    container-type: inline-size;
  }

  .hd-player-pip-butik-content__title,
  .hd-player-pip-eventyrere-content__title {
    max-width: 100%;
    font-size: var(--hd-text-ui-small);
    font-weight: var(--hd-weight-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .hd-player-pip-butik-content__keeper {
    max-width: 100%;
    font-size: var(--hd-text-micro);
    color: var(--hd-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .hd-player-pip-butik-content__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 0;
    pointer-events: none;
  }
  /* Backdrop only shows in fullscreen (subtle ambience, doesn't clutter pip). */
  @container (min-width: 800px) {
    .hd-player-pip-butik-content__bg { opacity: 0.3; }
  }

  /* Counter (visible only in pip-size; items grid takes over above 400px). */
  .hd-player-pip-butik-content__counter,
  .hd-player-pip-butik-content__more,
  .hd-player-pip-butik-content__empty {
    font-size: var(--hd-text-micro);
    color: var(--hd-text-secondary);
    flex: 0 0 auto;
    z-index: 1;
  }
  .hd-player-pip-butik-content__items {
    display: none;
    width: 100%;
    flex: 1 1 auto;
    overflow-y: auto;
    z-index: 1;
  }
  @container (min-width: 400px) {
    .hd-player-pip-butik-content__items {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: var(--hd-space-1);
      padding: 0 var(--hd-space-1);
    }
    .hd-player-pip-butik-content__counter { display: none; }
  }
  @container (min-width: 800px) {
    .hd-player-pip-butik-content__more { display: none; }
  }

  /* Sold-section only in fullscreen. */
  .hd-player-pip-butik-content__sold {
    display: none;
    width: 100%;
    flex: 0 0 auto;
    z-index: 1;
  }
  @container (min-width: 800px) {
    .hd-player-pip-butik-content__sold {
      display: block;
      opacity: 0.55;
    }
  }
  .hd-player-pip-butik-content__sold-title {
    font-size: var(--hd-text-micro);
    color: var(--hd-text-tertiary);
    margin: var(--hd-space-1) 0;
  }

  /* Item card. Rarity colour via design tokens.
   * Hidden-flag placeholders use --hd-text-tertiary so they read as ??? */
  .hd-player-pip-butik-content__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--hd-space-1);
    background-color: var(--hd-surface-1);
    border: 1px solid var(--hd-border-medium);
    border-radius: 4px;
    overflow: hidden;
    min-width: 0;
  }
  .hd-player-pip-butik-content__item[data-rarity="uncommon"]  { border-color: var(--hd-rarity-uncommon-fill); }
  .hd-player-pip-butik-content__item[data-rarity="rare"]      { border-color: var(--hd-rarity-rare-fill); }
  .hd-player-pip-butik-content__item[data-rarity="very rare"] { border-color: var(--hd-rarity-very-rare-fill); }
  .hd-player-pip-butik-content__item[data-rarity="legendary"] { border-color: var(--hd-rarity-legendary-fill); }
  .hd-player-pip-butik-content__item[data-rarity="artifact"]  { border-color: var(--hd-rarity-artifact-fill); }
  .hd-player-pip-butik-content__item[data-rarity="hidden"]    { border-color: var(--hd-text-tertiary); border-style: dashed; }
  .hd-player-pip-butik-content__item--sold {
    opacity: 0.6;
    text-decoration: line-through;
  }
  .hd-player-pip-butik-content__item-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 2px;
    background-color: var(--hd-surface-3);
  }
  .hd-player-pip-butik-content__item-icon {
    --hd-pip-butik-item-icon-font-size: clamp(calc(var(--hd-text-ui) + 0.125rem), 12cqi, calc(var(--hd-text-ui) + 1.125rem));
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--hd-pip-butik-item-icon-font-size);
    background-color: var(--hd-surface-3);
    border-radius: 2px;
  }
  .hd-player-pip-butik-content__item-icon-glyph {
    --hd-player-icon-size: var(--hd-pip-butik-item-icon-font-size);
  }
  .hd-player-pip-butik-content__item-name {
    font-size: var(--hd-text-micro);
    color: var(--hd-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .hd-player-pip-butik-content__item-name--hidden { color: var(--hd-text-tertiary); font-style: italic; }
  .hd-player-pip-butik-content__item-meta {
    display: flex;
    gap: var(--hd-space-1);
    font-size: var(--hd-text-micro);
    color: var(--hd-text-secondary);
  }
  .hd-player-pip-butik-content__item-price--hidden,
  .hd-player-pip-butik-content__item-qty--hidden {
    color: var(--hd-text-tertiary);
    font-style: italic;
  }

  /* ============================================================
   * EVENTYRERE paritet (B3) — member cards (portrait + name +
   * pronouns + player name). Grid auto-fills based on PiP size.
   * ============================================================ */

  .hd-player-pip-eventyrere-content__members {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--hd-space-1);
    padding: 0 var(--hd-space-1);
    width: 100%;
    flex: 1 1 auto;
    overflow-y: auto;
  }
  @container (min-width: 400px) {
    .hd-player-pip-eventyrere-content__members {
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
  }
  .hd-player-pip-eventyrere-content__empty {
    font-size: var(--hd-text-micro);
    color: var(--hd-text-tertiary);
    text-align: center;
    padding: var(--hd-space-2);
  }
  .hd-player-pip-eventyrere-content__member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--hd-space-1);
    background-color: var(--hd-surface-1);
    border: 1px solid var(--hd-border-medium);
    border-radius: 4px;
    overflow: hidden;
    min-width: 0;
  }
  .hd-player-pip-eventyrere-content__member-portrait {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
    background-color: var(--hd-surface-3);
  }
  .hd-player-pip-eventyrere-content__member-name {
    font-size: var(--hd-text-micro);
    font-weight: var(--hd-weight-semibold);
    color: var(--hd-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .hd-player-pip-eventyrere-content__member-pronouns {
    font-size: var(--hd-text-micro);
    font-style: italic;
    color: var(--hd-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .hd-player-pip-eventyrere-content__member-player {
    font-size: var(--hd-text-micro);
    color: var(--hd-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  /* ============================================================
   * Dual-plane flipped variant (z-order swap between PiP-frame
   * and #karakterark-destination-mount or current destination).
   * Triggered by PlayerDualPlane swipe detection.
   * ============================================================ */

  body.hd-pip-state-dualplane #player-pip-frame {
    bottom: 0;
    top: auto;
    z-index: 500;
  }

  body.hd-pip-state-dualplane.hd-dualplane-flipped #player-pip-frame {
    top: 0;
    bottom: auto;
  }

  @media (min-aspect-ratio: 1/1) {
    body.hd-pip-state-dualplane #player-pip-frame {
      left: 0;
      right: auto;
    }
    body.hd-pip-state-dualplane.hd-dualplane-flipped #player-pip-frame {
      left: auto;
      right: 0;
    }
  }

  /* Will-change applied ONLY during active swipe (Safari 16.6 transform-layer mitigation) */
  body.hd-dualplane-swiping #player-pip-frame {
    will-change: transform;
  }

  /* ============================================================
   * D6 — When combat-companion-view is active, suppress the PiP
   * KAMP-mini-summary (avoid double-render of same data).
   * ============================================================ */

  body.hd-combat-companion-active .hd-player-pip-kamp-summary {
    display: none;
  }
}