/**
 * player-roller.css — skriftrulle-look for top-bar + tab-bar på index.php.
 * Halv-cylinder tværsnit (buler ved skærmkanten, flader mod pergamentet) +
 * crease-skygge + glimt-ende-vinduer + tuck-overlay. Alle farver via --hd-roller-*.
 * Safari 16.6-safe: linear-gradient masker, mix-blend-mode overlay, calc().
 * Glimt/overlay-DOM injiceres af PlayerRoller (player-roller.js).
 */

@layer components {
  /* --- cylinder-gradient på selve barerne (ingen DOM nødvendig) ---
   * Scoped til BÅDE player-portal (indlogget) OG anonymous (ulogget landing),
   * så begge flader får skriftrulle-barerne. PlayerRoller-gaten i
   * player-roller.js er tilsvarende åbnet for anonymous. */
  body:is(.hd-player-mode-player-portal, .hd-player-mode-anonymous, .hd-player-mode-dm) .hd-player-top-bar {
    background: linear-gradient(180deg,var(--hd-roller-core) 0%,var(--hd-roller-hi) 16%,
      var(--hd-roller-mid) 36%,var(--hd-roller-dk) 64%,var(--hd-roller-end) 100%);
    /* Position is owned by the player shell: fixed in player/anonymous modes,
     * relative in non-player contexts. Both values are containing blocks for the
     * roller chrome, so this decoration layer must not override it. */
    /* Ingen flad-design-border: den 1px lyse border-bottom (--hd-border-subtle)
     * lavede en lys søm mellem rullens mørke bund og crease-skyggen → brød
     * tuck-illusionen. Uden border'en er padding-box = border-box, så glimt/
     * overlay/crease alle flugter med rullens reelle bund (y=bar-højde, ikke -1px). */
    border-bottom: none;
    /* Bar-indhold (avatar, navn, view-name) ligger MELLEM hjulene: reservér
     * ende-vindue-bredden som vandret padding, så glimt-hjulene i venstre/højre
     * ende ikke lægger sig oven på indholdet. +space-2 = lille luft inden for hjulet. */
    padding-left: calc(var(--hd-roller-glint-w) + var(--hd-space-2));
    padding-right: calc(var(--hd-roller-glint-w) + var(--hd-space-2));
  }
  body:is(.hd-player-mode-player-portal, .hd-player-mode-anonymous, .hd-player-mode-dm) .hd-player-tab-bar {
    background: linear-gradient(0deg,var(--hd-roller-core) 0%,var(--hd-roller-hi) 16%,
      var(--hd-roller-mid) 36%,var(--hd-roller-dk) 64%,var(--hd-roller-end) 100%);
    /* ingen flad gylden border-top: lavede en lys søm mellem bund-rullen og dens
     * crease-skygge (samme tuck-illusion-brud som top-baren). Landskab: flad bar
     * har allerede border-top:none + beholder sin border-left-divider. */
    border-top: none;
    /* menu-fanerne mellem hjulene (portræt: glimt i venstre/højre ende; nulstilles i landskab) */
    padding-left: var(--hd-roller-glint-w);
    padding-right: var(--hd-roller-glint-w);
  }
  /* --- crease-skygge lige inden for hver rulle (pseudo, smitter minimalt på indhold) --- */
  body:is(.hd-player-mode-player-portal, .hd-player-mode-anonymous, .hd-player-mode-dm) .hd-player-top-bar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: var(--hd-roller-crease-h);
    background: var(--hd-roller-crease-down);
    pointer-events: none;
    z-index: 1;
  }
  body:is(.hd-player-mode-player-portal, .hd-player-mode-anonymous, .hd-player-mode-dm) .hd-player-tab-bar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--hd-roller-crease-h);
    background: var(--hd-roller-crease-up);
    pointer-events: none;
    z-index: 1;
  }

  /* --- pergamentet ligger MELLEM rullerne: fri af crease-skyggen ---
   * Uden dette sad indholdet flush med bar-kanterne (mount: top=+top-bar,
   * bottom=tab-bar, padding 0), så top-/bund-crease-skyggen (--hd-roller-crease-h)
   * lå oven på øverste/nederste indhold — det så ud som om rullerne overlappede
   * arket. Clearance = præcis crease-dybden. Crease er fast chrome-geometri (IKKE
   * content-zoom-skaleret), så clearance bruger samme faste token (skaleres ikke).
   * Out-cascader player-content-zoom.css' `padding-top: 0` (samme specificitet i
   * @layer components; roller.css loades efter → vinder på kilde-rækkefølge). */
  /* A1: anonymous shares the same .hd-player-content-mount shell (positioned
   * between the bars by player-content-zoom.css), so it takes the SAME crease
   * clearance as player-portal. */
  body.hd-player-mode-player-portal .hd-player-content-mount,
  body.hd-player-mode-anonymous .hd-player-content-mount,
  body.hd-player-mode-dm .hd-player-content-mount {
    --hd-player-surface-pad-top: var(--hd-roller-crease-h);
    --hd-player-surface-pad-bottom: var(--hd-roller-crease-h);
  }

  /* --- landskab: tab-bar er flad lodret bar i højre kant (ingen siderulle) --- */
  @media (min-aspect-ratio: 1/1) {
    body:is(.hd-player-mode-player-portal, .hd-player-mode-anonymous, .hd-player-mode-dm) .hd-player-top-bar {
      /* På brede landscape-skærme må procent-hjulene ikke blive bredere end
       * halvdelen af rullens faste højde; padding og glint-vinduer læser samme
       * aktive token, så indholdet bliver ved med at ligge mellem hjulene. */
      --hd-roller-glint-w: min(var(--hd-roller-glint-base-w, 5%), calc(var(--player-top-bar-height, 48px) / 2));
    }
    body:is(.hd-player-mode-player-portal, .hd-player-mode-anonymous, .hd-player-mode-dm) .hd-player-tab-bar {
      background: var(--hd-surface-1);
      /* lodret bar uden vandrette hjul → ingen L/R-hjul-padding (bevar safe-area højre) */
      padding-left: 0;
      padding-right: env(safe-area-inset-right, 0);
    }
    body:is(.hd-player-mode-player-portal, .hd-player-mode-anonymous, .hd-player-mode-dm) .hd-player-tab-bar::after { display: none; }
    /* ingen bund-rulle i landskab → ingen bund-clearance (top-rullen består) */
    body.hd-player-mode-player-portal .hd-player-content-mount,
    body.hd-player-mode-anonymous .hd-player-content-mount,
    body.hd-player-mode-dm .hd-player-content-mount { --hd-player-surface-pad-bottom: 0px; }
  }

  /* === glimt-ende-vinduer (injiceres af PlayerRoller som .hd-roller-glint) === */
  .hd-roller-glint {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--hd-roller-glint-w, 5%);
    overflow: hidden;
    pointer-events: none;
    background: var(--hd-roller-winwash);
    z-index: 2;
  }
  .hd-roller-glint--l {
    left: 0;
    border-right: 1px solid var(--hd-roller-line);
  }
  .hd-roller-glint--r {
    right: 0;
    border-left: 1px solid var(--hd-roller-line);
  }
  .hd-roller-glint > i {
    position: absolute;
    inset: 0;
    display: block;
    will-change: background-position;
    background-image: repeating-linear-gradient(180deg,
      transparent 0 5px,rgba(0,0,0,0.26) 5px 6.5px,
      transparent 6.5px 12px,rgba(255,255,255,0.22) 12px 13px,transparent 13px 16px);
    background-size: 100% 16px;
    background-position-y: var(--hd-roller-g,0px);
    mix-blend-mode: overlay;
  }
  /* crest: receding kant fader over oscillerende --hd-roller-crest (sat fra JS) */
  .hd-player-tab-bar .hd-roller-glint > i {
    -webkit-mask: linear-gradient(180deg,transparent 0,#000 var(--hd-roller-crest,9px),#000 100%);
            mask: linear-gradient(180deg,transparent 0,#000 var(--hd-roller-crest,9px),#000 100%);
  }
  .hd-player-top-bar .hd-roller-glint > i {
    -webkit-mask: linear-gradient(0deg,transparent 0,#000 var(--hd-roller-crest,9px),#000 100%);
            mask: linear-gradient(0deg,transparent 0,#000 var(--hd-roller-crest,9px),#000 100%);
  }

  /* === tuck-overlay (injiceres som .hd-roller-overlay; rullen lagt gradvist OVEN PÅ) === */
  .hd-roller-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 3;
  }
  .hd-player-top-bar .hd-roller-overlay {
    background: linear-gradient(180deg,var(--hd-roller-core) 0%,var(--hd-roller-hi) 16%,var(--hd-roller-mid) 36%,var(--hd-roller-dk) 64%,var(--hd-roller-end) 100%);
    -webkit-mask: linear-gradient(0deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.3) calc(var(--hd-roller-ovl)*0.35),rgba(0,0,0,0.12) calc(var(--hd-roller-ovl)*0.68),rgba(0,0,0,0) var(--hd-roller-ovl));
            mask: linear-gradient(0deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.3) calc(var(--hd-roller-ovl)*0.35),rgba(0,0,0,0.12) calc(var(--hd-roller-ovl)*0.68),rgba(0,0,0,0) var(--hd-roller-ovl));
  }
  .hd-player-tab-bar .hd-roller-overlay {
    background: linear-gradient(0deg,var(--hd-roller-core) 0%,var(--hd-roller-hi) 16%,var(--hd-roller-mid) 36%,var(--hd-roller-dk) 64%,var(--hd-roller-end) 100%);
    -webkit-mask: linear-gradient(180deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.3) calc(var(--hd-roller-ovl)*0.35),rgba(0,0,0,0.12) calc(var(--hd-roller-ovl)*0.68),rgba(0,0,0,0) var(--hd-roller-ovl));
            mask: linear-gradient(180deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.3) calc(var(--hd-roller-ovl)*0.35),rgba(0,0,0,0.12) calc(var(--hd-roller-ovl)*0.68),rgba(0,0,0,0) var(--hd-roller-ovl));
  }

  /* === wood-overlay over rullens midter-90% (mellem glint-ende-vinduerne) ===
   * Injiceres af PlayerRoller som .hd-roller-wood parallelt med .hd-roller-glint--l/r
   * og .hd-roller-overlay. Geometrisk afgrænset via left/right: var(--hd-roller-glint-w),
   * så glint-ende-vinduerne forbliver urørte. z:4 placerer wood OVER tuck (z:3) så
   * tuck-mask (fader til 0 ved inderkant) ikke tinter wood. Theme-keyed opacity/blend:
   * dark=0.40 overlay, light=0.42 soft-light (se design-tokens.css). */
  .hd-roller-wood {
    position: absolute;
    left: var(--hd-roller-glint-w);
    right: var(--hd-roller-glint-w);
    top: 0;
    bottom: 0;
    background-image: var(--hd-texture-wood);
    background-size: 240px auto;
    background-repeat: repeat;
    opacity: var(--hd-roller-wood-opacity);
    mix-blend-mode: var(--hd-roller-wood-blend);
    pointer-events: none;
    z-index: 4;
  }

  /* reduced-motion: ingen vandrende glimt (statisk look bevares) */
  @media (prefers-reduced-motion: reduce) {
    .hd-roller-glint > i { background-position-y: 0 !important; }
  }
  /* landskab: tab-bar flad → skjul dens rulle-dekoration */
  @media (min-aspect-ratio: 1/1) {
    .hd-player-tab-bar .hd-roller-glint,
    .hd-player-tab-bar .hd-roller-overlay,
    .hd-player-tab-bar .hd-roller-wood { display: none; }
  }
}