/**
 * player-overview-destination.css — idle overview for player portal.
 *
 * The mount is a normal .hd-player-content-mount so content zoom, split reflow,
 * and PiP scroll clearance are inherited from player-content-zoom.css.
 */
@layer components {
  .hd-player-overview-mount {
    color: var(--hd-text-primary);
    background: transparent;
    background-color: transparent;
    background-image: none;
    pointer-events: auto;
  }

  body.hd-player-mode-player-portal .hd-player-overview-mount {
    background: transparent;
    background-color: transparent;
    background-image: none;
  }

  body.hd-player-mode-player-portal .hd-player-content-mount.hd-player-overview-mount--layout-backdrop,
  body.hd-player-mode-anonymous .hd-player-content-mount.hd-player-overview-mount--layout-backdrop {
    position: fixed;
    margin-top: 0;
    top: calc(var(--hd-visual-viewport-offset-top, 0px) + var(--player-top-bar-height, 0px));
    right: 0;
    bottom: var(--player-tab-bar-size, 0px);
    left: 0;
    z-index: 0;
    width: auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .hd-player-overview-mount--backdrop {
    pointer-events: none;
    overflow: hidden;
  }

  .hd-player-overview-mount--backdrop .hd-player-overview {
    display: none;
  }

  @media (min-aspect-ratio: 1/1) {
    body.hd-player-mode-player-portal .hd-player-content-mount.hd-player-overview-mount--layout-backdrop,
    body.hd-player-mode-anonymous .hd-player-content-mount.hd-player-overview-mount--layout-backdrop {
      right: var(--player-tab-bar-size, 0px);
      bottom: 0;
    }
  }

  .hd-player-overview {
    min-height: 100%;
    box-sizing: border-box;
    padding: clamp(14px, 3.5vw, 28px);
    display: grid;
    gap: clamp(12px, 2.6vw, 22px);
    align-content: start;
    font-family: var(--hd-font-body, Georgia, serif);
  }

  .hd-player-overview__hero,
  .hd-player-overview__section {
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-md);
    background: color-mix(in srgb, var(--hd-surface-2) 88%, transparent);
    box-shadow: var(--hd-shadow-sm);
  }

  .hd-player-overview__hero {
    padding: clamp(18px, 4vw, 34px);
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--hd-surface-2) 96%, transparent), color-mix(in srgb, var(--hd-surface-3) 82%, transparent)),
      radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--hd-accent-primary) 20%, transparent), transparent 38%);
  }

  .hd-player-overview__eyebrow,
  .hd-player-overview__section-title,
  .hd-player-overview__stat-label,
  .hd-player-overview__resource-meta {
    margin: 0;
    letter-spacing: 0;
    text-transform: uppercase;
    font-size: var(--hd-text-ui);
    color: var(--hd-text-tertiary);
    font-weight: var(--hd-weight-extrabold);
  }

  /* Item 5 — let the OVERBLIK eyebrow breathe from the title it labels. */
  .hd-player-overview__eyebrow {
    margin-bottom: var(--hd-space-1);
  }

  .hd-player-overview__title {
    margin: 0.25em 0 0;
    font-family: var(--hd-font-display, Georgia, serif);
    /* ~26px default (≈50% of the prior viewport-fluid --hd-text-display), scaled
     * by content-zoom so the hero title grows/shrinks with the rest of the
     * surface. Explicit half-size rather than var(--hd-text-display) (which now
     * scales but resolves to full 32px). */
    font-size: calc(1.625rem * var(--hd-player-content-zoom, 1));
    line-height: var(--hd-leading-snug); /* wrapping hero-title — komfortabel multiline-leading (WCAG 1.4.8) */
    color: var(--hd-text-primary);
  }

  .hd-player-overview__subtitle {
    margin: 0.75rem 0 0;
    font-size: var(--hd-text-body-large);
    color: var(--hd-text-secondary);
  }

  .hd-player-overview__section {
    padding: clamp(14px, 3vw, 22px);
  }

  .hd-player-overview__section-title {
    font-family: var(--hd-font-display);
    font-size: var(--hd-text-h4);
    border-bottom: 1px solid var(--hd-border-subtle);
    padding-bottom: var(--hd-space-1);
    margin: 0 0 var(--hd-space-2);
    color: var(--hd-text-primary);
    font-weight: var(--hd-weight-semibold);
  }

  .hd-player-overview__stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(8px, 2vw, 14px);
  }

  .hd-player-overview__stat-card {
    min-width: 0;
    padding: clamp(10px, 2.6vw, 16px);
    border-radius: var(--hd-radius-md);
    background: color-mix(in srgb, var(--hd-surface-1) 82%, transparent);
    border: 1px solid var(--hd-border-subtle);
  }

  .hd-player-overview__stat-label {
    display: block;
  }

  .hd-player-overview__stat-value {
    display: block;
    margin-top: 0.25rem;
    font-family: var(--hd-font-display, Georgia, serif);
    font-size: var(--hd-text-h3);
    line-height: var(--hd-leading-icon);
    color: var(--hd-text-primary);
  }

  .hd-player-overview__resource-list,
  .hd-player-overview__chip-list {
    display: grid;
    gap: 0.65rem;
  }

  .hd-player-overview__resource-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0.85rem;
    border-radius: var(--hd-radius-md);
    background: color-mix(in srgb, var(--hd-surface-1) 74%, transparent);
    border: 1px solid var(--hd-border-subtle);
  }

  .hd-player-overview__resource-main {
    min-width: 0;
  }

  .hd-player-overview__resource-name {
    display: block;
    font-weight: var(--hd-weight-extrabold);
    color: var(--hd-text-primary);
  }

  .hd-player-overview__resource-meta {
    display: block;
    margin-top: 0.1rem;
  }

  .hd-player-overview__resource-dots {
    display: inline-flex;
    gap: 0.18rem;
    align-items: center;
    white-space: nowrap;
  }

  .hd-player-overview__resource-dot {
    font-size: var(--hd-text-body-large);
    line-height: var(--hd-leading-icon);
  }

  .hd-player-overview__resource-dot--used {
    color: var(--hd-text-disabled);
  }

  .hd-player-overview__resource-dot--available {
    color: var(--hd-accent-primary);
    text-shadow: 0 1px 0 color-mix(in srgb, var(--hd-surface-base) 65%, transparent);
  }

  .hd-player-overview__chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .hd-player-overview__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-1);
    min-height: 2rem;
    padding: 0 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--hd-border-subtle);
    background: color-mix(in srgb, var(--hd-surface-1) 78%, transparent);
    font-weight: var(--hd-weight-bold);
    color: var(--hd-text-primary);
  }

  .hd-player-overview__chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    height: 1.1em;
    flex: 0 0 1.1em;
  }

  .hd-player-overview__chip-icon-glyph {
    --hd-player-icon-size: 1.1em;
  }

  .hd-player-overview__empty {
    margin: 0;
    color: var(--hd-text-tertiary);
    font-style: italic;
  }

  @media (min-width: 720px) {
    .hd-player-overview {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      align-items: start;
    }

    .hd-player-overview__hero {
      grid-row: span 3;
      min-height: 15rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
  }

  @media (max-width: 420px) {
    .hd-player-overview__stat-grid {
      grid-template-columns: 1fr;
    }

    .hd-player-overview__resource-row {
      grid-template-columns: 1fr;
      gap: 0.45rem;
    }
  }
}

@layer components {
  /* === Portal-fg-card visual på Overblik-cards (paper + guld-bånd) ===
   * Anvendes på .hd-player-overview__hero og .hd-player-overview__section.
   * Erstatter eksisterende gradient/box-shadow ovenfor (cascade-rækkefølge).
   * Genopretter samme stack som .hd-portal-fg-card (Task 7) — duplikeret her
   * for at undgå JS-baseret class-mutation på BEM-elementerne.
   * Refactor-opportunity: efter Tasks 8-10 alle shipped kan disse 3 ens blokke
   * (Forside/Karakterark/Færd) konsolideres til ét comma-selector i
   * player-portal-bg.css. */
  .hd-player-overview__hero,
  .hd-player-overview__section {
    position: relative;
    background-color: var(--hd-surface-1);
    border: 1px solid var(--hd-border-subtle);
    border-radius: 4px;
    overflow: hidden;
    isolation: isolate;
    box-shadow: none;
  }

  :root:not([data-theme="light"]) .hd-player-overview__hero,
  :root:not([data-theme="light"]) .hd-player-overview__section {
    background-image:
      var(--hd-texture-gold-seam),
      var(--hd-texture-gold-seam),
      linear-gradient(
        color-mix(in srgb, var(--hd-surface-overlay) 65%, transparent),
        color-mix(in srgb, var(--hd-surface-overlay) 65%, transparent)
      ),
      var(--hd-texture-dark-paper);
    background-size: 60px 3px, 60px 3px, cover, 500px 500px;
    background-repeat: repeat-x, repeat-x, no-repeat, repeat;
    background-position: 0 0, 0 100%, center, center;
  }

  [data-theme="light"] .hd-player-overview__hero,
  [data-theme="light"] .hd-player-overview__section {
    background-color: transparent;
    background-image:
      var(--hd-texture-gold-seam),
      var(--hd-texture-gold-seam),
      var(--hd-texture-seam-paper);
    background-size: 60px 3px, 60px 3px, 500px 500px;
    background-repeat: repeat-x, repeat-x, repeat;
    background-position: 0 0, 0 100%, center;
  }
}