/**
 * player-portal-bg.css — page-baggrund for spillerportalen (index.php).
 *
 * Body-klasse `hd-player-mode-player-portal` sættes af PlayerMode-controller
 * når brugeren er i spillerportalen. Læder-tekstur (512px native tile, repeat)
 * er bageste lag — per-tema: leather-dark (mørk) / leather-light (lys, varmere
 * rust-brun). Mounten (.hd-player-content-mount) får papir-tekstur via
 * --hd-parchment-surface ovenpå. Påvirker ikke admin-pages, TV-display
 * (legacy), eller anonymous landing.
 *
 * Texture-URLs kommer fra design-tokens.css (--hd-texture-leather-*).
 */
@layer components {
  /* Leather-baggrund gælder BÅDE indlogget portal (player-portal) OG den
   * anonyme flade (anonymous), så de to flader deler samme skriftrulle-look.
   * Begge bruger de delte .hd-player-content-mount, der bærer parchment-laget
   * (player-content-zoom.css) oven på dette body-leather (A1). */
  body.hd-player-mode-player-portal,
  body.hd-player-mode-dm,
  body.hd-player-mode-anonymous {
    background-color: var(--hd-surface-base);
    background-image: var(--hd-texture-leather-dark);
    background-size: 512px 512px;
    background-repeat: repeat;
    background-attachment: fixed;
  }

  [data-theme="light"] body.hd-player-mode-player-portal,
  [data-theme="light"] body.hd-player-mode-dm,
  [data-theme="light"] body.hd-player-mode-anonymous {
    background-image: var(--hd-texture-leather-light);
    --hd-hp-empty-bg: var(--hd-surface-2);
  }
}

@layer components {
  /* === Global fg-card for portal-sektioner ===
   * Wrapper-klasse for Forside/Karakterark/Færd-handout indhold.
   * Stack (bagfra-foran): paper-tekstur → dark-overlay (kun mørk tema) → guld-bånd
   * 3px guld-bånd kun foroven (Item 7). Alt via background-image-stacking (ingen ::before for at undgå
   * z-stacking-problemer med eksisterende sektion-indhold).
   * INGEN drop-shadow. 1px border + isolation:isolate giver tydelig kant. */
  .hd-portal-fg-card {
    position: relative;
    background-color: var(--hd-surface-1);
    border: 1px solid rgba(94, 69, 38, 0.4);
    border-radius: 4px;
    overflow: hidden;
    isolation: isolate;
  }

  /* Mørk tema: guld-bånd + 65% sort overlay + dark-paper (lag-stack, øverst først) */
  :root:not([data-theme="light"]) .hd-portal-fg-card {
    background-image:
      var(--hd-texture-gold-seam),           /* Item 7 — single top band only */
      linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
      var(--hd-texture-dark-paper);
    background-size: 60px 3px, cover, 500px 500px;
    background-repeat: repeat-x, no-repeat, repeat;
    background-position: 0 0, center, center;
  }

  /* Lys tema: guld-bånd + seam-paper (ingen overlay — papir er allerede lyst) */
  [data-theme="light"] .hd-portal-fg-card {
    background-color: var(--hd-surface-base);
    /* Item 7 — single gold band foroven (light theme). */
    background-image:
      var(--hd-texture-gold-seam),
      var(--hd-texture-seam-paper);
    background-size: 60px 3px, 500px 500px;
    background-repeat: repeat-x, repeat;
    background-position: 0 0, center;
  }

  /* === Shared portal paper cards (option B, 2026-05-28) ===
   * Store læse-/panel-flader genbruger Forside-stack'en: papir + 3px
   * guld-bånd. Små inner controls, activity rows, tags, avatars og status-
   * badges er bevidst IKKE i selector-listen; de beholder semantiske tokens.
   * :is() er valgt over :where() for at vinde over senere hover-backgrounds
   * i destination-CSS uden !important. Safari 16.6 understøtter :is(). */
  body:is(.hd-player-mode-player-portal, .hd-player-mode-dm) :is(
    .hd-portal-fg-card,
    .hd-player-overview__hero,
    .hd-player-overview__section,
    .hd-hold-display__member,
    .hd-hold-display__info,
    .hd-hold-display__activity,
    .hd-hold-display__detail,
    .hd-settings__section,
    .hd-butik__gold,
    .hd-butik__item,
    .hd-ruler__grid-cell,
    .hd-ruler__result,
    .hd-ruler__row,
    .hd-ruler__empty--snapshot
  ) {
    position: relative;
    background-color: var(--hd-surface-1);
    border: 1px solid rgba(94, 69, 38, 0.4);
    border-radius: 4px;
    overflow: hidden;
    isolation: isolate;
    box-shadow: none;
  }

  :root:not([data-theme="light"]) body:is(.hd-player-mode-player-portal, .hd-player-mode-dm) :is(
    .hd-portal-fg-card,
    .hd-player-overview__hero,
    .hd-player-overview__section,
    .hd-hold-display__member,
    .hd-hold-display__info,
    .hd-hold-display__activity,
    .hd-hold-display__detail,
    .hd-settings__section,
    .hd-butik__gold,
    .hd-butik__item,
    .hd-ruler__grid-cell,
    .hd-ruler__result,
    .hd-ruler__row,
    .hd-ruler__empty--snapshot
  ) {
    /* Item 7 — single gold band foroven: only the top seam remains; sides + bottom
       use the base 1px border, so the bottom now matches the sides. */
    background-image:
      var(--hd-texture-gold-seam),
      linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
      var(--hd-texture-dark-paper);
    background-size: 60px 3px, cover, 500px 500px;
    background-repeat: repeat-x, no-repeat, repeat;
    background-position: 0 0, center, center;
  }

  [data-theme="light"] body:is(.hd-player-mode-player-portal, .hd-player-mode-dm) :is(
    .hd-portal-fg-card,
    .hd-player-overview__hero,
    .hd-player-overview__section,
    .hd-hold-display__member,
    .hd-hold-display__info,
    .hd-hold-display__activity,
    .hd-hold-display__detail,
    .hd-settings__section,
    .hd-butik__gold,
    .hd-butik__item,
    .hd-ruler__grid-cell,
    .hd-ruler__result,
    .hd-ruler__row,
    .hd-ruler__empty--snapshot
  ) {
    background-color: var(--hd-surface-base);
    /* Item 7 — single gold band foroven (light theme). */
    background-image:
      var(--hd-texture-gold-seam),
      var(--hd-texture-seam-paper);
    background-size: 60px 3px, 500px 500px;
    background-repeat: repeat-x, repeat;
    background-position: 0 0, center;
  }

  /* portal settings paper flex guard
   * .hd-settings is a vertical flex scroller. Paper cards use overflow clipping
   * for texture/border polish, so keep settings sections from shrinking below
   * their content height inside that stack. */
  body:is(.hd-player-mode-player-portal, .hd-player-mode-dm) .hd-settings__section {
    flex-shrink: 0;
  }

  /* portal destination parchment roots
   * Karakter/Færd are full destination canvases, not inner cards. In light theme
   * they should keep the same parchment mount backdrop as Hold, while their
   * child cards/rows can still use the brighter paper-card treatment. */
  [data-theme="light"] body:is(.hd-player-mode-player-portal, .hd-player-mode-dm) :is(
    .hd-karakterark,
    .hd-quest-feed
  ) {
    background-color: var(--hd-surface-base);
    background-image: var(--hd-parchment-surface);
    background-size: var(--hd-parchment-size, auto);
    background-repeat: var(--hd-parchment-repeat, repeat);
    background-position: 0 0;
  }

  /* === portal light opaque controls (2026-05-28) ===
   * Lyst tema har nu mørkere læder bag pergamentet. Transparent outline-
   * knapper/rækker kan derfor blande sig med baggrunden og miste læsbarhed.
   * Denne portal-scope override giver de interaktive kontroller en solid
   * token-surface uden at ændre semantiske badges/dots. */
  [data-theme="light"] body:is(.hd-player-mode-player-portal, .hd-player-mode-dm) :is(
    .hd-player-tab-bar__tab,
    .hd-player-top-bar__hp-bar,
    .hd-player-top-bar__login-cta,
    .hd-player-top-bar__char-option,
    .hd-player-overview__stat-card,
    .hd-player-overview__resource-row,
    .hd-player-overview__chip,
    .hd-pwa-banner__dismiss,
    .hd-ruler__filter-toggle,
    .hd-ruler__filter-chip,
    .hd-ruler__back,
    .hd-ruler-detail__back,
    .hd-hold-detail-pane--inline .hd-hold-detail-pane__root,
    .hd-hold-detail-pane__close-icon,
    .hd-dasham-portal__chip,
    .hd-dasham-portal-dashboard__section,
    .hd-dasham-portal-dashboard__stat,
    .hd-dasham-portal-dashboard__hero-cta,
    .hd-dasham-portal-kort__new-btn,
    .hd-dasham-portal-kort__hand-card,
    .hd-dasham-portal-kort__hand-card-edit,
    .hd-dasham-portal-kort__filter-pill,
    .hd-dasham-portal-modal__btn--accent,
    .hd-dasham-portal-modal__btn--ghost,
    .hd-dasham-portal-modal__close,
    .hd-dasham-portal-modal__name-input,
    .hd-dasham-portal-modal__card-slot,
    .hd-dasham-portal-modal__tag,
    .hd-dasham-portal-modal__cb-select,
    .hd-dasham-portal-modal__cb-pill,
    .hd-dasham-portal-spil__refresh-btn,
    .hd-dasham-portal-spil__row,
    .hd-dasham-portal-spil__action-btn,
    .hd-dasham-portal-spil__summary-pill,
    .hd-dasham-portal-spil__turn-banner,
    .hd-dasham-portal-spil__match-board,
    .hd-dasham-portal-spil__board-cell--empty,
    .hd-dasham-portal-spil__match-overlay-cta,
    .hd-dasham-portal-spil__match-overlay-secondary,
    .hd-dasham-portal-spil__scoreboard-row,
    .hd-dasham-portal-turnering__tour-card,
    .hd-dasham-portal-turnering__bracket-pairing,
    .hd-dasham-portal-turnering__row,
    .hd-dasham-portal-turnering__match-row,
    .hd-dasham-portal-turnering__join-row,
    .hd-dasham-portal-turnering__badge,
    .hd-dasham-portal-turnering__cta,
    .hd-dasham-portal-dice__panel,
    .hd-dasham-portal-dice__formula-token,
    .hd-dasham-portal-dice__formula-clear,
    .hd-dasham-portal-dice__modifier-btn,
    .hd-dasham-portal-dice__history-btn,
    .hd-dasham-portal-dice__roll-btn,
    .hd-richrow__row,
    .hd-richrow__close,
    .hd-karakterark__section--activeEffects,
    .hd-karakterark__ability-roll,
    .hd-karakterark__trait-row
  ) {
    background-color: var(--hd-surface-1);
  }

  [data-theme="light"] body:is(.hd-player-mode-player-portal, .hd-player-mode-dm) :is(
    .hd-player-tab-bar__tab--active,
    .hd-player-tab-bar__tab:not(.hd-player-tab-bar__tab--disabled):not(.hd-player-tab-bar__tab--active):hover,
    .hd-ruler__filter-toggle:hover,
    .hd-ruler__filter-chip:hover,
    .hd-ruler__back:hover,
    .hd-ruler-detail__back:hover,
    .hd-hold-detail-pane__close-icon:hover,
    .hd-dasham-portal-dashboard__hero-cta:hover,
    .hd-dasham-portal-kort__new-btn:hover,
    .hd-dasham-portal-kort__filter-pill--on,
    .hd-dasham-portal-kort__hand-card--active,
    .hd-dasham-portal-modal__btn--accent,
    .hd-dasham-portal-modal__cb-pill--on,
    .hd-dasham-portal-spil__row--incoming,
    .hd-dasham-portal-spil__action-btn--challenge,
    .hd-dasham-portal-spil__action-btn--challenge:hover:not(:disabled),
    .hd-dasham-portal-spil__action-btn--practice:hover:not(:disabled),
    .hd-dasham-portal-spil__turn-banner--mine,
    .hd-dasham-portal-spil__match-overlay-cta,
    .hd-dasham-portal-spil__scoreboard-row--mine,
    .hd-dasham-portal-turnering__tour-card--selected,
    .hd-dasham-portal-turnering__bracket-pairing--mine,
    .hd-dasham-portal-turnering__row--mine,
    .hd-dasham-portal-dice__formula-token:hover,
    .hd-dasham-portal-dice__modifier-btn:hover:not(:disabled),
    .hd-dasham-portal-dice__roll-btn:hover:not(:disabled),
    .hd-dasham-portal-dice__history-btn:hover,
    .hd-richrow__close:hover,
    .hd-karakterark__trait-row:hover,
    .hd-karakterark__trait-row:focus-visible
  ) {
    background-color: var(--hd-surface-2);
  }

  /* === portal red leather buttons (option B follow-up, 2026-05-28) ===
   * In light theme the primary CTA token is oxblood-red, so filled portal
   * action buttons such as "Skriv besked" should read as red leather rather
   * than flat paint. Badges, unread dots and error surfaces are intentionally
   * excluded; they keep their semantic flat-color signals. */
  [data-theme="light"] body:is(.hd-player-mode-player-portal, .hd-player-mode-dm) :is(
    .hd-hold-detail-pane__write-btn,
    .hd-quest-compose-modal__save,
    .hd-quest-feed__chip--active,
    .hd-settings__theme-option--active,
    .hd-settings__toggle--on,
    .hd-settings-account__char--active,
    .hd-settings-account__btn--cta,
    .hd-settings__radio.is-active,
    .hd-ruler__filter-chip--active,
    .hd-karakterark__levelup-btn,
    .hd-karakterark__levelup-confirm,
    .hd-portal-questionnaire-cta,
    .hd-btn--destruct,
    .hd-player-top-bar__hp-btn--dmg,
    .hd-stat-popup__hp-btn--dmg
  ) {
    background-color: var(--hd-accent-primary);
    background-image:
      linear-gradient(rgba(74, 18, 8, 0.22), rgba(74, 18, 8, 0.42)),
      var(--hd-texture-leather-red);
    background-size: cover, 512px 512px;
    background-repeat: no-repeat, repeat;
    background-position: center, center;
    color: var(--hd-text-on-scrim);
    border-color: var(--hd-accent-primary);
  }

  [data-theme="dark"] body:is(.hd-player-mode-player-portal, .hd-player-mode-dm) .hd-quest-feed__chip--active {
    background-color: var(--hd-accent-primary);
    background-image: none;
    border-color: var(--hd-accent-primary);
    color: var(--hd-text-on-accent);
  }

  [data-theme="light"] body:is(.hd-player-mode-player-portal, .hd-player-mode-dm) :is(
    .hd-hold-detail-pane__write-btn,
    .hd-quest-compose-modal__save,
    .hd-quest-feed__chip--active,
    .hd-settings__theme-option--active,
    .hd-settings__toggle--on,
    .hd-settings-account__char--active,
    .hd-settings-account__btn--cta,
    .hd-settings__radio.is-active,
    .hd-ruler__filter-chip--active,
    .hd-karakterark__levelup-btn,
    .hd-karakterark__levelup-confirm,
    .hd-portal-questionnaire-cta,
    .hd-btn--destruct,
    .hd-player-top-bar__hp-btn--dmg,
    .hd-stat-popup__hp-btn--dmg
  ):is(:hover, :focus-visible) {
    background-image:
      linear-gradient(rgba(74, 18, 8, 0.14), rgba(74, 18, 8, 0.34)),
      var(--hd-texture-leather-red);
  }

  /* Danger/damage controls are red in both themes, unlike primary CTAs. */
  body:is(.hd-player-mode-player-portal, .hd-player-mode-dm) :is(
    .hd-btn--destruct,
    .hd-player-top-bar__hp-btn--dmg,
    .hd-stat-popup__hp-btn--dmg
  ) {
    background-color: var(--hd-accent-error);
    background-image:
      linear-gradient(rgba(74, 18, 8, 0.18), rgba(74, 18, 8, 0.38)),
      var(--hd-texture-leather-red);
    background-size: cover, 512px 512px;
    background-repeat: no-repeat, repeat;
    background-position: center, center;
    color: var(--hd-text-on-scrim);
    border-color: var(--hd-accent-error);
  }

  body:is(.hd-player-mode-player-portal, .hd-player-mode-dm) :is(
    .hd-btn--destruct,
    .hd-player-top-bar__hp-btn--dmg,
    .hd-stat-popup__hp-btn--dmg
  ):is(:hover, :focus-visible) {
    background-image:
      linear-gradient(rgba(74, 18, 8, 0.10), rgba(74, 18, 8, 0.30)),
      var(--hd-texture-leather-red);
  }

  body:is(.hd-player-mode-player-portal, .hd-player-mode-dm) :is(
    .hd-player-top-bar__hp-btn--heal,
    .hd-stat-popup__hp-btn--heal
  ) {
    background-color: var(--hd-hp-btn-heal-end, var(--hd-accent-success));
    background-image:
      linear-gradient(rgba(4, 38, 18, 0.14), rgba(4, 38, 18, 0.34)),
      var(--hd-texture-leather-green);
    background-size: cover, 512px 512px;
    background-repeat: no-repeat, repeat;
    background-position: center, center;
    color: var(--hd-text-on-scrim);
    border-color: var(--hd-hp-btn-heal-end, var(--hd-accent-success));
  }

  body:is(.hd-player-mode-player-portal, .hd-player-mode-dm) :is(
    .hd-player-top-bar__hp-btn--heal,
    .hd-stat-popup__hp-btn--heal
  ):is(:hover, :focus-visible) {
    background-image:
      linear-gradient(rgba(4, 38, 18, 0.06), rgba(4, 38, 18, 0.26)),
      var(--hd-texture-leather-green);
  }

  body:is(.hd-player-mode-player-portal, .hd-player-mode-dm) :is(
    .hd-player-top-bar__hp-btn--temp,
    .hd-stat-popup__hp-btn--temp
  ) {
    background-color: var(--hd-hp-btn-temp-end, var(--hd-dasham-owner-blue));
    background-image:
      linear-gradient(rgba(8, 47, 61, 0.14), rgba(8, 47, 61, 0.34)),
      var(--hd-texture-leather-blue);
    background-size: cover, 512px 512px;
    background-repeat: no-repeat, repeat;
    background-position: center, center;
    color: var(--hd-text-on-scrim);
    border-color: var(--hd-hp-btn-temp-end, var(--hd-dasham-owner-blue));
  }

  body:is(.hd-player-mode-player-portal, .hd-player-mode-dm) :is(
    .hd-player-top-bar__hp-btn--temp,
    .hd-stat-popup__hp-btn--temp
  ):is(:hover, :focus-visible) {
    background-image:
      linear-gradient(rgba(8, 47, 61, 0.06), rgba(8, 47, 61, 0.26)),
      var(--hd-texture-leather-blue);
  }
}