/**
 * display.css — Display-view CSS extraheret fra index.php inline <style>-block i Fase 3.4a.
 * Fase 3.4b mobile-first verifikation: alle rules er viewport-agnostiske (100vw/100vh),
 * ingen max-width breakpoints — fuldskærms-overlays er pr. definition mobile-first.
 * Fase 3.4c tilføjer container-queries til player-overlay (component-level responsive).
 * Player-facing view (TV-hub / iPad / phone). MUST NOT require admin session.
 *
 * Em-token-konvention (når breakpoints introduceres):
 *   --hd-bp-md: 40em (~640px)
 *   --hd-bp-lg: 64em (~1024px)
 *   --hd-bp-xl: 100em (~1600px)
 * Note: CSS custom-properties virker IKKE i @media-queries — hardcode em.
 */
@layer components {
    /* --------------- Reset & base --------------- */
    /* Removed: * { box-sizing: border-box; } — now in public/css/base.css @layer reset */
    body, html {
      margin: 0;
      padding: 0;
      width: 100vw;
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100); /* iOS fix */
      overflow: hidden;
      background: var(--hd-surface-base); /* default bg so we avoid flashes */
    }
    .safe-area {
  padding-top: env(safe-area-inset-top);
}

    /* --------------- SPLASH --------------- */
    #splash-screen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100); /* iOS fix */
      display: none;           /* toggles to flex when splashOverlayActive */
      visibility: hidden;      /* iPadOS 16 fix: ensure hidden by default */
      opacity: 0;              /* iPadOS 16 fix: ensure hidden by default */
      justify-content: center;
      align-items: center;
      background: var(--hd-surface-base);
      z-index: 10050;          /* above everything including effects */
    }
    #splash-screen img {
      width: 100%;             /* fill viewport while preserving aspect ratio */
      height: 100%;
      object-fit: contain;
      object-position: center;
    }

    /* --------------- KORT OVERLAY --------------- */
    #kort-screen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100); /* iOS fix */
      display: none;           /* toggles to flex when profil === "KORT" */
      background: var(--hd-surface-base);
      z-index: 10030;          /* above KAMP/KAMP-NPC, below effects/VIS/SPLASH */
      /* No justify-content/align-items - let Leaflet fill entire container */
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    #kort-map-display {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    /* Ensure Leaflet elements fill properly */
    #kort-map-display .leaflet-container {
      width: 100%;
      height: 100%;
      background: var(--hd-surface-base);
    }
    /* Cross marker styling */
    .kort-cross-marker {
      background: transparent !important;
      border: none !important;
    }

    /* --------------- KAMP OVERLAY --------------- */
    #kamp-screen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100); /* iOS fix */
      display: none;           /* toggles to block when profil === "KAMP" */
      background: var(--hd-surface-base);
      z-index: 9996;           /* below SPLASH/VIS/KORT but above NPC */
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    /* KampPlayer renders directly into #kamp-screen via JS */

    /* --------------- GLOBAL EFFECT LAYERS --------------- */
    /* Effect layers cover full viewport in all modes (position set by resizeEffectCanvases()) */
    /* Z-index is switched dynamically:
       - NPC mode: between=2, front=4 (interleaves with background z:1 and NPC image z:3)
       - Fullscreen modes: between=10035, front=10036 (above KAMP/KORT/VIS overlays) */
    .global-effect-layer {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
      contain: strict; /* Isolate paint — canvas repaints don't trigger parent relayout */
    }
    .effect-layer-between {
      z-index: 2;              /* NPC mode default: behind NPC image (z:3), above background (z:1) */
    }
    .effect-layer-front {
      z-index: 4;              /* NPC mode default: in front of NPC image (z:3) */
    }

    /* --------------- NPC VIEW --------------- */
    #container {
      display: flex;
      width: 100vw;
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100); /* iOS fix */
      background: var(--hd-surface-2);
      contain: layout style; /* Isolate layout/style from fullscreen overlays */
    }

    /* Inaktive NPC'er – venstre kolonne */
    #npc-list {
      width: 25%;              /* procentuel bredde */
      min-width: 150px;        /* minimum bredde */
      max-width: 300px;        /* maximum bredde — JS overrides for multi-column */
      height: 100%;            /* fuld højde */
      background: var(--hd-surface-1);
      padding: 10px;
      margin: 0;
      overflow-y: auto;        /* scroll hvis mange NPCs */
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-sizing: border-box;
      transition: transform var(--hd-motion-slower) ease, width var(--hd-motion-slower) ease, min-width var(--hd-motion-slower) ease, max-width var(--hd-motion-slower) ease, padding var(--hd-motion-slower) ease, opacity var(--hd-motion-slower) ease;
      flex-shrink: 0;          /* don't shrink by default */
      position: relative;      /* establish stacking context */
      z-index: 10037;          /* above effect layers (10035-10036) so effects play under sidebar */
    }
    body.preview-mode #npc-list {
      min-width: 50px;
    }
    #npc-list img {
      width: 100%;             /* fyld container */
      max-width: 280px;        /* max bredde */
      height: auto;            /* bevar proportioner */
      object-fit: contain;
      border-radius: 5px;
      flex-shrink: 0;          /* ikke skrump billederne */
    }

    /* Aktive NPC – højre kolonne (resten) */
    #active-npc {
      flex: 1;                 /* fylder resten af pladsen */
      display: flex;
      justify-content: center;
      align-items: flex-end;
      background: var(--hd-surface-base);
      position: relative;
      overflow: hidden;
    }
    #background-image {
      position: absolute;
      /* Extend 5% beyond viewport in all directions for parallax/camera effects */
      top: -5%;
      left: -5%;
      width: 110%;
      height: 110%;
      background-size: cover;
      background-position: center;
      z-index: 1;
      transform-origin: bottom center; /* Anchor for giant/frog perspective effects */
      will-change: transform, filter; /* GPU-accelerate for parallax + brightness transitions */
      contain: strict; /* Isolate layout/paint from parent */
    }
    /* Effect canvases are global (outside #container). In NPC mode z-index interleaves:
       background (z:1) < effect-between (z:2) < NPC image (z:3) < effect-front (z:4) */
    #active-npc-image {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0 auto;
      z-index: 3;
      max-width: 95%;          /* max 95% af container bredde */
      max-height: 95vh;        /* max 95% af viewport højde */
      height: 95vh;            /* fill available height */
      width: auto;             /* auto width to maintain aspect ratio */
      object-fit: contain;     /* scale to fit while maintaining aspect ratio */
      object-position: bottom center; /* anchor to bottom */
      border-radius: 8px;
      opacity: 0;              /* start hidden until JS applies size and fades in */
      transition: opacity var(--hd-motion-slow) ease; /* smooth fade only */
      transform-origin: bottom center; /* anchor animations to bottom */
      will-change: opacity, filter; /* GPU-accelerate for fade + brightness transitions */
    }

    /* Background-only mode: hide NPCs, fullscreen background */
    body.background-only-mode #npc-list {
      width: 0 !important;
      min-width: 0 !important;
      max-width: 0 !important;
      padding: 0 !important;
      opacity: 0 !important;
      pointer-events: none !important;
      overflow: hidden !important;
    }
    body.background-only-mode #active-npc-image {
      opacity: 0 !important;
      pointer-events: none !important;
    }
    body.background-only-mode #active-npc {
      flex: 1 !important;
    }

    /* --------------- SECRET REVEAL OVERLAY --------------- */
    #secret-reveal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
      display: none;
      justify-content: center;
      align-items: center;
      background: rgba(0, 0, 0, 0.75);
      z-index: 10080;
      opacity: 0;
      /* Dramatic reveal-fade (spil-feel): længere end normal UI-fade. Bygget
       * fra --hd-motion-slower (480ms) × 1.25 = ~600ms — respekterer
       * prefers-reduced-motion via token-cascade. */
      transition: opacity calc(var(--hd-motion-slower) * 1.25) ease;
    }
    #secret-reveal-overlay.active {
      display: flex;
      opacity: 1;
    }
    #secret-reveal-overlay.fading-out {
      opacity: 0;
    }
    #secret-reveal-box {
      max-width: 600px;
      width: 90%;
      padding: 32px 40px;
      background: radial-gradient(ellipse at center, rgba(20, 15, 30, 0.95), rgba(10, 8, 18, 0.98));
      border: 1px solid rgba(180, 140, 255, 0.3);
      border-radius: 12px;
      box-shadow:
        0 0 30px rgba(120, 80, 200, 0.3),
        0 0 60px rgba(80, 40, 160, 0.15),
        inset 0 0 20px rgba(120, 80, 200, 0.05);
      text-align: center;
      /* Spil-feel infinite-loop pulse: ~3s via token × 6.25 */
      animation: secretRevealPulse calc(var(--hd-motion-slower) * 6.25) ease-in-out infinite;
    }
    #secret-reveal-text {
      color: #e8e0f0;
      font-size: var(--hd-text-h4);
      line-height: var(--hd-leading-relaxed);
      font-family: var(--hd-font-narrative);
      text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    }
    @keyframes secretRevealPulse {
      0%, 100% { box-shadow: 0 0 30px rgba(120,80,200,0.3), 0 0 60px rgba(80,40,160,0.15); }
      50% { box-shadow: 0 0 40px rgba(140,100,220,0.4), 0 0 80px rgba(100,60,180,0.2); }
    }

    /* --------------- SESSION RECAP OVERLAY --------------- */
    #session-recap-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(0, 0, 0, 0.85);
      z-index: 10075;
      opacity: 0;
      pointer-events: none;
      /* Session-recap dramatic fade (spil-feel): ~800ms via token × 1.67. */
      transition: opacity calc(var(--hd-motion-slower) * 1.67) ease;
    }
    #session-recap-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }
    #session-recap-box {
      max-width: 700px;
      width: 90%;
      max-height: 80vh;
      padding: 32px 40px;
      box-sizing: border-box;
      background: radial-gradient(ellipse at center, rgba(15, 20, 30, 0.97), rgba(8, 10, 18, 0.99));
      border: 1px solid rgba(140, 180, 255, 0.25);
      border-radius: 12px;
      box-shadow:
        0 0 40px rgba(60, 100, 180, 0.2),
        0 0 80px rgba(40, 60, 140, 0.1);
      overflow-y: auto;
    }
    #session-recap-box::-webkit-scrollbar { width: 8px; }
    #session-recap-box::-webkit-scrollbar-track { background: rgba(100,100,255,0.1); border-radius: 4px; }
    #session-recap-box::-webkit-scrollbar-thumb { background: rgba(100,100,255,0.3); border-radius: 4px; }
    #session-recap-title {
      color: #b0c4ff;
      font-size: var(--hd-text-h4);
      font-family: var(--hd-font-display);
      text-align: center;
      margin-bottom: 16px;
      text-shadow: 0 2px 8px rgba(60, 100, 200, 0.3);
    }
    #session-recap-text {
      color: #d0d8e8;
      font-size: var(--hd-text-body-large);
      line-height: var(--hd-leading-narrative);
      font-family: var(--hd-font-narrative);
      white-space: pre-wrap;
      word-break: break-word;
    }

    /* --------------- CONTAINER-QUERIES (Fase 3.4c) --------------- */
    /* Component-level responsive. iOS Safari 16.6+ + Chrome 105+ understøtter
     * container-type: inline-size (caniuse 92%+ globally). For ældre browsers
     * falder reglerne tilbage til base-stilen (graceful degradation). */

    /* Player-overlay-content: per-player overlay-indhold (handouts, NPC-billeder,
     * compendium-entries). Container-queries lader indre layout reagere på
     * faktisk overlay-bredde (ikke viewport), så samme komponent virker både
     * i fuldskærms-overlay og i potentielle fremtidige sidebar-render-sites. */
    #player-overlay-content {
      container-type: inline-size;
      container-name: player-overlay;
    }
    @container player-overlay (min-width: 40em) {
      #player-overlay-content {
        padding: 32px;
      }
    }
    @container player-overlay (min-width: 64em) {
      #player-overlay-content {
        padding: 48px;
      }
    }

    /* Session-recap-box: nested container for recap-text scaling */
    #session-recap-box {
      container-type: inline-size;
      container-name: session-recap;
    }
    @container session-recap (min-width: 40em) {
      #session-recap-text {
        font-size: var(--hd-text-h4);
        line-height: var(--hd-leading-narrative);
      }
    }

    /* --------------- BEM CLASSES (Fase 3.4f) ---------------
     * Erstatter de 16 inline style="..." attrs i index.php. Bevarer
     * JS toggle-pattern (.style.display = 'flex'/'none') — gate scanner kun
     * statisk HTML, ikke runtime DOM. .hd-display-overlay--* default-hidden
     * via display:none; JS-toggle sætter inline display:flex/block ved aktivering.
     */

    /* Base for alle fullscreen player-facing overlays */
    .hd-display-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100); /* iOS fix */
      display: none; /* default-hidden; JS toggler til flex/block */
      box-sizing: border-box;
    }
    .hd-display-overlay--flex {
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    /* Fase 3.5a: server-seeded show-state for SSR-bootstrap.
       index.php applies .is-open to the correct screen at body-render based
       on the `hedensia_player_id` cookie, eliminating the brief flash of the
       wrong overlay before JS reads localStorage. JS continues to use inline
       style.display for runtime toggles (existing pattern). */
    .hd-display-overlay.is-open {
      display: flex;
    }

    /* Player-select-screen variant: top-stacked splash (z 20000).
     * Leather-baggrund (samme stack som body i player-portal-bg.css) så den
     * fullscreen login-overlay (QR-PIN / fejl / karaktervælger) matcher
     * skriftrulle-looket; panelerne indeni er .hd-portal-fg-card papir/guld-kort. */
    .hd-display-overlay--player-select {
      background-color: var(--hd-surface-base);
      background-image: var(--hd-texture-leather-dark);
      background-size: 512px 512px;
      background-repeat: repeat;
      z-index: 20000;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow-y: auto;
      padding: 20px;
    }
    [data-theme="light"] .hd-display-overlay--player-select {
      background-image: var(--hd-texture-leather-light);
    }
    .hd-player-select-container {
      max-width: 900px;
      width: 100%;
    }

    /* Player-overlay variant: semi-transparent fade (z 10105) */
    .hd-display-overlay--player-overlay {
      background: rgba(0, 0, 0, 0.85);
      z-index: 10105;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .hd-display-overlay--player-overlay > #player-overlay-content {
      width: 100%;
      min-height: 100%;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
    }

    /* Player-overlay toggle button (top-right minimize/maximize) */
    .hd-player-overlay-toggle {
      position: fixed;
      top: 12px;
      right: 12px;
      z-index: 10106;
      display: none; /* JS toggler til block/flex ved overlay-active */
      background: rgba(0, 0, 0, 0.85);
      color: var(--hd-text-on-scrim);
      border: 1px solid var(--hd-border-medium);
      width: 36px;
      height: 36px;
      border-radius: 6px;
      cursor: pointer;
      font-size: var(--hd-text-body);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      transition: background var(--hd-motion-fast) ease, border-color var(--hd-motion-fast) ease;
    }

    body.hd-player-mode-player-portal .hd-display-overlay--player-overlay {
      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;
      min-height: 0;
    }

    body.hd-player-mode-player-portal .hd-player-overlay-toggle {
      top: calc(var(--hd-visual-viewport-offset-top, 0px) + var(--player-top-bar-height, 0px) + 12px);
      right: calc(
        100vw - var(--hd-visual-viewport-offset-left, 0px)
        - var(--hd-visual-viewport-width, 100vw)
        + 12px
      );
    }

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

      body.hd-player-mode-player-portal .hd-player-overlay-toggle {
        right: calc(
          100vw - var(--hd-visual-viewport-offset-left, 0px)
          - var(--hd-visual-viewport-width, 100vw)
          + var(--player-tab-bar-size, 0px)
          + 12px
        );
      }
    }

    /* VIS overlay variant: fullscreen image-display (z 10040) */
    .hd-display-overlay--vis {
      background: var(--hd-surface-base);
      z-index: 10040;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .hd-display-overlay__image {
      flex: 1;
      width: 100%;
      object-fit: contain;
      object-position: center;
      min-height: 0;
    }
    .hd-display-overlay__card-container {
      display: none; /* JS toggler til flex ved kort-mode */
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      justify-content: center;
      align-items: center;
      z-index: 10;
    }
    .hd-display-overlay__caption {
      display: none; /* JS toggler til block ved caption-active */
      padding: 12px 24px;
      margin-bottom: 20px;
      background: rgba(0, 0, 0, 0.7);
      color: var(--hd-text-primary);
      font-size: var(--hd-text-h4);
      text-align: center;
      font-family: var(--hd-font-ui);
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
      max-width: 80%;
      border-radius: 8px;
      position: absolute;
      bottom: 20px;
      z-index: 20;
    }

    /* 3D dice overlay (transparent, fullscreen, pointer-events none) */
    .hd-display-overlay--dice-3d {
      z-index: 10060;
      pointer-events: none;
    }

    /* EVENTYRERE overlay variant (z 10032) */
    .hd-display-overlay--eventyrere {
      background: var(--hd-surface-base);
      z-index: 10032;
    }
    .hd-display-overlay__content--fill {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* --------------- CREATION DISPLAY JS TEMPLATE TYPOGRAPHY --------------- */
    .creation-display-screen {
      font-family: var(--hd-font-ui);
    }
    .creation-display-ability__abbr,
    .creation-display-ability__name,
    .creation-display-card__label,
    .creation-display-section-label,
    .creation-display-current-step__label {
      font-size: var(--hd-text-caption);
      line-height: var(--hd-leading-snug);
    }
    .creation-display-ability__value {
      font-size: var(--hd-text-h2);
      font-weight: var(--hd-weight-bold);
      line-height: var(--hd-leading-tight);
    }
    .creation-display-ability__modifier,
    .creation-display-tag {
      font-size: var(--hd-text-body-small);
      line-height: var(--hd-leading-snug);
    }
    .creation-display-card__value {
      font-size: var(--hd-text-body);
      font-weight: var(--hd-weight-medium);
      line-height: var(--hd-leading-snug);
    }
    .creation-display-card__detail {
      font-size: var(--hd-text-ui-small);
      line-height: var(--hd-leading-snug);
    }
    .creation-display-heading__eyebrow {
      font-size: var(--hd-text-ui-small);
      line-height: var(--hd-leading-snug);
    }
    .creation-display-heading__name {
      font-size: var(--hd-text-h1);
      font-weight: var(--hd-weight-bold);
      line-height: var(--hd-leading-tight);
    }
    .creation-display-heading__class {
      font-size: var(--hd-text-h4);
      line-height: var(--hd-leading-snug);
    }
    .creation-display-current-step__value {
      font-size: var(--hd-text-ui);
      font-weight: var(--hd-weight-medium);
      line-height: var(--hd-leading-snug);
    }

    /* --------------- EVENTYRERE DISPLAY JS TEMPLATE TYPOGRAPHY --------------- */
    .eventyrere-display-empty {
      font-size: var(--hd-text-h2);
      line-height: var(--hd-leading-tight);
    }
    .eventyrere-display-empty__icon {
      font-size: var(--hd-text-display);
      line-height: var(--hd-leading-tight);
    }
    .eventyrere-display-empty__hint {
      font-size: var(--hd-text-body);
      line-height: var(--hd-leading-snug);
    }
    .eventyrere-display-name {
      color: #fff;
      font-size: var(--eventyrere-name-size, var(--hd-text-h2));
      font-weight: var(--hd-weight-bold);
      margin-top: 12px;
      text-align: center;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    }
    .eventyrere-display-pronouns {
      color: #aaa;
      font-size: var(--eventyrere-small-size, var(--hd-text-body));
      margin-top: 2px;
      text-align: center;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    }
    .eventyrere-display-race {
      color: #9c9;
      font-size: var(--eventyrere-race-size, var(--hd-text-body-small));
      margin-top: 2px;
      text-align: center;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    }
    .eventyrere-display-classes {
      margin-top: 2px;
      text-align: center;
    }
    .eventyrere-display-class-line {
      color: #aaa;
      font-size: var(--eventyrere-class-size, var(--hd-text-body-small));
      text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    }
    .eventyrere-display-player-name {
      color: #888;
      font-size: var(--eventyrere-player-size, var(--hd-text-caption));
      margin-top: 4px;
      text-align: center;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    }
    .eventyrere-display-mini-sheet__title {
      font-size: var(--hd-text-h4);
      line-height: var(--hd-leading-tight);
    }
    .eventyrere-display-mini-sheet__subtitle,
    .eventyrere-display-mini-sheet__resource-value {
      font-size: var(--hd-text-ui-small);
      line-height: var(--hd-leading-snug);
    }
    .eventyrere-display-mini-ability__label,
    .eventyrere-display-mini-stat__label {
      font-size: var(--hd-text-caption);
      line-height: var(--hd-leading-snug);
    }
    .eventyrere-display-mini-ability__score {
      font-size: var(--hd-text-ui);
      font-weight: var(--hd-weight-bold);
      line-height: var(--hd-leading-tight);
    }
    .eventyrere-display-mini-ability__mod,
    .eventyrere-display-mini-stat__suffix,
    .eventyrere-display-mini-sheet__section-label,
    .eventyrere-display-mini-sheet__small-text,
    .eventyrere-display-mini-sheet__resource-label {
      font-size: var(--hd-text-caption);
      line-height: var(--hd-leading-snug);
    }
    .eventyrere-display-mini-stat__value {
      font-size: var(--hd-text-body);
      font-weight: var(--hd-weight-bold);
      line-height: var(--hd-leading-tight);
    }
    .eventyrere-display-mini-sheet__close {
      font-size: var(--hd-text-h4);
      line-height: var(--hd-leading-tight);
    }
    .eventyrere-display-mini-sheet__strong,
    .eventyrere-display-mini-sheet__resource-value {
      font-weight: var(--hd-weight-medium);
    }
    .eventyrere-display-mini-sheet__slot-label,
    .eventyrere-display-mini-sheet__count {
      font-size: var(--hd-text-caption);
      line-height: var(--hd-leading-snug);
    }

    /* --------------- PLAYER OVERLAY JS TEMPLATE TYPOGRAPHY --------------- */
    .hd-player-overlay__caption {
      font-family: var(--hd-font-ui);
      font-size: var(--hd-text-h3);
      line-height: var(--hd-leading-snug);
    }

    /* BUTIK overlay variant (z 10032, scroll-y) */
    .hd-display-overlay--butik {
      background: var(--hd-surface-2);
      z-index: 10032;
      overflow-y: auto;
    }
    /* DASHAM overlay variant (z 10032, scroll-y) */
    .hd-display-overlay--dasham {
      background: var(--hd-surface-2);
      z-index: 10032;
      overflow-y: auto;
    }
    /* Scrollable content-wrapper bruges af butik + dasham */
    .hd-display-overlay__content--scrollable {
      width: 100%;
      min-height: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 20px;
      box-sizing: border-box;
    }
}