/**
 * dasham-portal.css — Tab 5 'Spil' Dasham player-frontend foundation (Plan F C1).
 *
 * C1 ships: mount-styles, shared HdChipNav chip-row wrapper, view-container and
 * placeholder layouts. Card-styles, dashboard/kort/spil/turnering sections land
 * in C3-C8.
 *
 * Tokens & allowlists:
 *   --hd-font-parchment        body/UI font (Libre Baskerville fallback chain)
 *   --hd-tab-label-font        IM Fell English (defined locally per file convention)
 *   --hd-text-primary/secondary/accent-primary  parchment + lifted gold AAA pairs
 *   --hd-dasham-owner-red/blue  match-board owner-tint tokens (C7)
 *   rgba(201,169,110,0.22)     allowlisted gold-mid for active chip-fill (same as
 *                              player-tab-bar.css §4)
 */

@layer components {

  /* ============================================================ */
  /* Local tokens                                                  */
  /* ============================================================ */

  .hd-dasham-portal-mount {
    /* IM Fell English fallback chain — mirrors player-tab-bar.css and karakterark
     * destination so headlines + chip-labels look consistent across player surfaces. */
    --hd-dasham-portal-font: var(--hd-font-display);
  }

  /* ============================================================ */
  /* Mount                                                         */
  /* ============================================================ */

  /**
   * Full-bleed flex column inside the player content area. Tab-bar bootstrap toggles
   * the [hidden] attribute to show/hide; the parent container provides the framing
   * (top-bar above, tab-bar below).
   */
  .hd-dasham-portal-mount {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0; /* allow inner scroll containers to size correctly inside flex parents */
    min-width: 0;
    box-sizing: border-box;
    color: var(--hd-text-primary);
    font-family: var(--hd-dasham-portal-font);
    background: var(--hd-surface-base);
    /* container query target: chip-row stage decisions derive from THIS width
     * (not viewport), so the portal works equally well in narrow iframes/PiP. */
    container-type: inline-size;
    container-name: hd-dasham-portal;
  }

  .hd-player-surface-slot.hd-dasham-portal-mount {
    width: auto;
    max-width: 100%;
    min-width: 0;
  }

  .hd-dasham-portal-mount[hidden] {
    display: none !important;
  }

  /* ============================================================ */
  /* Chip-row                                                      */
  /* ============================================================ */

  /* Skive 1 — neutral flex-shrink wrapper around HdChipNav's .hd-chip-row.
     Layout (flex/gap/padding/overflow/container-query) now lives in chip-nav.css;
     this only keeps the row from compressing in the mount's flex column. */
  .hd-dasham-portal__chip-row {
    flex-shrink: 0;
  }

  /* ============================================================ */
  /* View container                                                */
  /* ============================================================ */

  .hd-dasham-portal__view {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    /* Scrollbar styling handled by player-portal's global rules — no override here. */
  }

  /* ============================================================ */
  /* Placeholder (C1 stub views + Dice chip)                       */
  /* ============================================================ */

  .hd-dasham-portal__placeholder {
    padding: 24px 16px;
    text-align: center;
    color: var(--hd-text-secondary);
    font-family: var(--hd-dasham-portal-font);
    font-size: var(--hd-text-body);
    line-height: var(--hd-leading-normal);
  }

  .hd-dasham-portal__placeholder--error {
    color: var(--hd-accent-error);
  }

  .hd-dasham-portal__inline-icon {
    --hd-player-icon-size: 1em;
    flex: 0 0 auto;
  }

  .hd-dasham-portal__icon-label {
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-1);
  }

  /* C1 stub-view layouts (replaced by real content in C4-C8). Keep low-fi so the
   * difference between "stub" and "shipped" is visually obvious during review. */
  .hd-dasham-portal-dashboard--stub,
  .hd-dasham-portal-kort--stub,
  .hd-dasham-portal-spil--stub,
  .hd-dasham-portal-turnering--stub {
    padding: 24px 16px;
    color: var(--hd-text-secondary);
    font-style: italic;
    font-size: var(--hd-text-body);
    line-height: var(--hd-leading-normal);
  }

  /* ============================================================ */
  /* Dasham card (C3)                                              */
  /* ============================================================ */

  /**
   * `.hd-dasham-card` is a self-contained card-renderer used across all views.
   * Aspect-ratio + position:relative reserve the cross-shaped corner-value
   * layout; child layers (art, gradient, values, rarity, name) stack via
   * absolute positioning + ::after pseudos.
   *
   * Card SIZE is driven by the parent (collection-strip sets width:60px etc).
   * This block defines proportions only.
   */
  .hd-dasham-card {
    /* Local tokens — surface different sizes via overrides on --mini/--large */
    --hd-dasham-card-val-size:       calc(13px * var(--hd-player-content-zoom, 1));   /* T/R/B/L numeral size */
    --hd-dasham-card-name-size:       calc(7px * var(--hd-player-content-zoom, 1));   /* bottom name strip */
    --hd-dasham-card-rarity-size:     calc(7px * var(--hd-player-content-zoom, 1));   /* top-right stars */
    --hd-dasham-card-border:        calc(1.5px * var(--hd-player-content-zoom, 1));
    --hd-dasham-card-val-inset:       calc(3px * var(--hd-player-content-zoom, 1));   /* edge-offset for T/B */
    --hd-dasham-card-val-inset-side:  calc(4px * var(--hd-player-content-zoom, 1));   /* edge-offset for L/R */
    --hd-dasham-card-name-bottom:     calc(1px * var(--hd-player-content-zoom, 1));
    --hd-dasham-card-val-b-bottom:   calc(14px * var(--hd-player-content-zoom, 1));   /* clears name-strip */

    position: relative;
    aspect-ratio: 2.5 / 3.5;
    background: var(--hd-surface-1);
    border: var(--hd-dasham-card-border) solid var(--hd-border-subtle);
    border-radius: 4px;
    overflow: hidden;
    font-family: var(--hd-font-fantasy);
    color: var(--hd-dasham-card-ink);
  }

  /* Kort-løft (magi §4.5) — fladt i hvile, løft + glød/skygge FØRST ved hover.
   * Mørkt tema: skygge ses ikke på mørk bund → tilføj gylden glød + lys-rand +
   * brightness. Engangs-transition (ikke loop) via motion-token (parity-konform). */
  .hd-dasham-card.lift {
    box-shadow: none;
    transition: transform var(--hd-motion-normal) ease,
                box-shadow var(--hd-motion-normal) ease,
                filter var(--hd-motion-normal) ease;
  }
  .hd-dasham-card.lift:hover {
    transform: translateY(-14px) scale(1.06);
    box-shadow: 0 22px 42px rgba(0, 0, 0, .85),
                0 0 24px rgba(255, 205, 110, .4),
                0 0 0 1px rgba(255, 225, 160, .5);
    filter: brightness(1.14);
    z-index: 5;
  }
  @media (prefers-reduced-motion: reduce) {
    .hd-dasham-card.lift { transition: none; }
  }

  /* Art-layer is inset 5% from the card border and contains the image (no crop)
   * so the full artwork is always visible; ::after applies bottom-gradient for
   * value/name legibility against bright artwork. Letterbox bars fall back to
   * the card surface, so they read as a seamless frame. */
  .hd-dasham-card__art {
    position: absolute;
    inset: 5%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--hd-surface-1); /* fallback while image loads */
  }

  .hd-dasham-card__art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
  }

  .hd-dasham-card__art--placeholder {
    background: linear-gradient(135deg, var(--hd-surface-1), var(--hd-surface-base));
  }

  /* 4 corner values — absolute spans positioned by cross-axis CSS vars. */
  .hd-dasham-card__val {
    position: absolute;
    font-size: var(--hd-dasham-card-val-size);
    color: var(--hd-dasham-card-ink);
    font-weight: var(--hd-weight-extrabold);
    line-height: var(--hd-leading-icon);
    text-shadow: 0 1px 2px rgba(0,0,0,1), 0 0 4px rgba(0,0,0,0.95);
    font-family: var(--hd-font-fantasy);
    letter-spacing: -0.02em;
    pointer-events: none;
    z-index: 1;
  }
  .hd-dasham-card__val--t { top:    var(--hd-dasham-card-val-inset);      left: 50%; transform: translateX(-50%); }
  /* Default: bottom numeral sits on the bottom edge, symmetric with --t, so it
   * reads as centered on its side. Only --named cards (with a name-strip) raise
   * it via --hd-dasham-card-val-b-bottom to clear the strip. */
  .hd-dasham-card__val--b { bottom: var(--hd-dasham-card-val-inset);      left: 50%; transform: translateX(-50%); }
  .hd-dasham-card--named .hd-dasham-card__val--b { bottom: var(--hd-dasham-card-val-b-bottom); }
  .hd-dasham-card__val--l { left:   var(--hd-dasham-card-val-inset-side); top:  50%; transform: translateY(-50%); }
  .hd-dasham-card__val--r { right:  var(--hd-dasham-card-val-inset-side); top:  50%; transform: translateY(-50%); }

  /* Rarity stars (top-right) */
  .hd-dasham-card__rarity {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: var(--hd-dasham-card-rarity-size);
    color: var(--hd-dasham-card-ink);
    line-height: var(--hd-leading-icon);
    text-shadow: 0 0 3px rgba(0,0,0,1);
    letter-spacing: -0.5px;
    z-index: 1;
    pointer-events: none;
  }

  /* Card name (bottom-center, ellipsis on overflow) */
  .hd-dasham-card__name {
    position: absolute;
    bottom: var(--hd-dasham-card-name-bottom);
    left: 0;
    right: 0;
    text-align: center;
    font-size: var(--hd-dasham-card-name-size);
    color: var(--hd-dasham-card-ink);
    font-family: var(--hd-font-fantasy);
    padding: 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,1);
    pointer-events: none;
  }

  /* ---- Size variants ---------------------------------------------- */

  .hd-dasham-card--mini {
    --hd-dasham-card-val-size:       calc(16px * var(--hd-player-content-zoom, 1));
    --hd-dasham-card-name-size:     calc(5.5px * var(--hd-player-content-zoom, 1));
    --hd-dasham-card-rarity-size:   calc(5.5px * var(--hd-player-content-zoom, 1));
    --hd-dasham-card-val-b-bottom:   calc(15px * var(--hd-player-content-zoom, 1));
  }

  .hd-dasham-card--large {
    --hd-dasham-card-val-size:       calc(20px * var(--hd-player-content-zoom, 1));
    --hd-dasham-card-name-size:      calc(11px * var(--hd-player-content-zoom, 1));
    --hd-dasham-card-rarity-size:    calc(11px * var(--hd-player-content-zoom, 1));
    --hd-dasham-card-val-b-bottom:   calc(22px * var(--hd-player-content-zoom, 1));
  }

  /* ---- Owner-tint (red = me / blue = opponent) -------------------- */

  .hd-dasham-card--red {
    border-color: var(--hd-dasham-owner-red);
    box-shadow: inset 0 0 0 2px rgba(122, 32, 13, 0.55), 0 0 6px rgba(122, 32, 13, 0.4);
  }

  .hd-dasham-card--blue {
    border-color: var(--hd-dasham-owner-blue);
    box-shadow: inset 0 0 0 2px rgba(11, 73, 95, 0.55), 0 0 6px rgba(11, 73, 95, 0.4);
  }

  /* ---- Selected (gold lift) --------------------------------------- */

  .hd-dasham-card--selected {
    transform: translateY(-4px);
    box-shadow: inset 0 0 0 2px var(--hd-accent-primary), 0 4px 8px rgba(0,0,0,0.4);
    transition: transform var(--hd-motion-fast) var(--hd-ease-page-turn),
                box-shadow var(--hd-motion-fast) var(--hd-ease-page-turn);
  }

  /* ---- Face-down (parchment back) --------------------------------- */

  .hd-dasham-card--back {
    background: linear-gradient(135deg, var(--hd-surface-1), var(--hd-surface-base));
    border-color: var(--hd-border-subtle);
  }
  .hd-dasham-card--back::after {
    content: '🂠';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Scales with card-size via local val-size token (larger glyph on large cards). */
    font-size: calc(var(--hd-dasham-card-val-size) * 1.6);
    color: var(--hd-text-tertiary);
  }

  /* ============================================================ */
  /* 🏠 Dashboard view (C4)                                        */
  /* ============================================================ */

  .hd-dasham-portal-dashboard {
    /* Component-scoped layout tokens plus canonical player text tokens. */
    --hd-dasham-dash-hero-pad-y:     calc(10px * var(--hd-player-content-zoom, 1));
    --hd-dasham-dash-hero-pad-x:     calc(12px * var(--hd-player-content-zoom, 1));
    --hd-dasham-dash-hero-title-sz:  var(--hd-text-ui);
    --hd-dasham-dash-hero-sub-sz:    var(--hd-text-ui-small);
    --hd-dasham-dash-hero-kicker-sz: var(--hd-text-ui-small);
    --hd-dasham-dash-hero-cta-sz:    var(--hd-text-ui-small);
    --hd-dasham-dash-section-gap:    calc(10px * var(--hd-player-content-zoom, 1));
    --hd-dasham-dash-row-sz:         var(--hd-text-ui-small);
    --hd-dasham-dash-stat-num-sz:    var(--hd-text-h4);
    --hd-dasham-dash-stat-label-sz:  var(--hd-text-micro);
    --hd-dasham-dash-empty-sz:       var(--hd-text-ui-small);

    padding: 8px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: var(--hd-dasham-dash-section-gap);
    color: var(--hd-text-primary);
    font-family: var(--hd-dasham-portal-font);
  }

  /* ---- Hero banner ------------------------------------------------ */

  .hd-dasham-portal-dashboard__hero {
    background: linear-gradient(135deg, rgba(122, 32, 13, 0.20), rgba(201, 169, 110, 0.10));
    border: 1px solid rgba(212, 160, 80, 0.45);
    border-radius: 10px;
    padding: var(--hd-dasham-dash-hero-pad-y) var(--hd-dasham-dash-hero-pad-x);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .hd-dasham-portal-dashboard__hero-kicker {
    font-size: var(--hd-dasham-dash-hero-kicker-sz);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hd-text-tertiary);
    line-height: var(--hd-leading-snug);
  }

  .hd-dasham-portal-dashboard__hero-title {
    font-size: var(--hd-dasham-dash-hero-title-sz);
    font-weight: var(--hd-weight-bold);
    color: var(--hd-text-primary);
    line-height: var(--hd-leading-snug);
    margin: 2px 0;
  }

  .hd-dasham-portal-dashboard__hero-sub {
    font-size: var(--hd-dasham-dash-hero-sub-sz);
    color: var(--hd-text-secondary);
    line-height: var(--hd-leading-snug);
  }

  /* rgba(201,169,110,0.22) = allowlisted gold-mid */
  .hd-dasham-portal-dashboard__hero-cta {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 8px;
    background: rgba(201, 169, 110, 0.22);
    border: 1px solid var(--hd-accent-primary);
    color: var(--hd-accent-primary);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: var(--hd-dasham-dash-hero-cta-sz);
    line-height: var(--hd-leading-icon);
    font-family: var(--hd-dasham-portal-font);
    cursor: pointer;
    transition: var(--hd-transition-fast);
  }

  .hd-dasham-portal-dashboard__hero-cta:hover {
    background: rgba(201, 169, 110, 0.32);
  }

  .hd-dasham-portal-dashboard__hero-cta:focus-visible {
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: 2px;
  }

  /* ---- Reward-ribbon --------------------------------------------- */

  .hd-dasham-portal-dashboard__ribbon {
    background: rgba(122, 32, 13, 0.20);
    border: 1px solid rgba(122, 32, 13, 0.5);
    border-radius: 6px;
    padding: 6px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: var(--hd-dasham-dash-row-sz);
    color: var(--hd-text-primary);
    line-height: var(--hd-leading-snug);
  }

  .hd-dasham-portal-dashboard__ribbon-cta {
    background: var(--hd-dasham-owner-red);
    color: var(--hd-text-on-scrim);
    border: none;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: var(--hd-dasham-dash-hero-cta-sz);
    line-height: var(--hd-leading-icon);
    font-family: var(--hd-dasham-portal-font);
    cursor: pointer;
  }

  .hd-dasham-portal-dashboard__ribbon-cta:hover {
    background: var(--hd-dasham-owner-red-soft);
  }

  /* ---- Grid / sections / rows ------------------------------------ */

  .hd-dasham-portal-dashboard__grid {
    display: flex;
    flex-direction: column;
    gap: var(--hd-dasham-dash-section-gap);
  }

  .hd-dasham-portal-dashboard__col {
    display: flex;
    flex-direction: column;
    gap: var(--hd-dasham-dash-section-gap);
  }

  .hd-dasham-portal-dashboard__section {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  /* Match the karakterark section-heading recipe (IM Fell display font, h4,
   * subtle bottom rule) on a transparent ground — "Seneste"/"Aktive kampe"/
   * "Stilling" all read as the same heading family across the portal. */
  .hd-dasham-portal-dashboard__section-title {
    font-family: var(--hd-font-display);
    font-size: var(--hd-text-h4);
    font-weight: var(--hd-weight-semibold);
    color: var(--hd-text-primary);
    border-bottom: 1px solid var(--hd-border-subtle);
    padding-bottom: var(--hd-space-1);
    margin: 0 0 var(--hd-space-2);
    line-height: var(--hd-leading-icon);
  }

  .hd-dasham-portal-dashboard__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid rgba(106, 74, 42, 0.4);
    font-size: var(--hd-dasham-dash-row-sz);
    line-height: var(--hd-leading-snug);
  }

  .hd-dasham-portal-dashboard__row-label {
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-1);
  }

  .hd-dasham-portal-dashboard__row-icon-glyph {
    --hd-player-icon-size: 1em;
  }

  .hd-dasham-portal-dashboard__row:last-child {
    border-bottom: none;
  }

  .hd-dasham-portal-dashboard__row-delta--win  { color: var(--hd-accent-success); }
  .hd-dasham-portal-dashboard__row-delta--loss { color: var(--hd-accent-error); }

  .hd-dasham-portal-dashboard__empty {
    font-size: var(--hd-dasham-dash-empty-sz);
    color: var(--hd-text-tertiary);
    font-style: italic;
    padding: 4px 0;
    line-height: var(--hd-leading-snug);
  }

  /* ---- Stat-strip ------------------------------------------------- */

  .hd-dasham-portal-dashboard__stat-strip {
    display: flex;
    gap: 10px;
  }

  .hd-dasham-portal-dashboard__stat {
    flex: 1;
    background: rgba(58, 36, 24, 0.45);
    border: 1px solid rgba(106, 74, 42, 0.5);
    border-radius: 6px;
    padding: 6px 8px;
    text-align: center;
    min-width: 0;
  }

  /* Light-tema: den hardkodede mørke rgba-baggrund gav for lav kontrast for de
   * lyse-temas mørke tekst-tokens (stat-num oxblod, stat-label tertiary). Solid
   * pergament-surface løser det (Fase 7.11.2-mønster). */
  [data-theme="light"] .hd-dasham-portal-dashboard__stat {
    background: var(--hd-surface-2);
    border-color: var(--hd-border-subtle);
  }

  .hd-dasham-portal-dashboard__stat-num {
    font-size: var(--hd-dasham-dash-stat-num-sz);
    font-weight: var(--hd-weight-bold);
    color: var(--hd-accent-primary);
    line-height: var(--hd-leading-snug);
  }

  .hd-dasham-portal-dashboard__stat-label {
    font-size: var(--hd-dasham-dash-stat-label-sz);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hd-text-tertiary);
    margin-top: 2px;
    line-height: var(--hd-leading-snug);
  }

  /* ---- Landscape 2-column layout via container query ------------- */

  /* Portrait default: side-section hidden (standings collapse) and grid stacks.
   * The standings section uses the section--standings modifier so we can hide
   * it specifically without affecting the stat-strip (which lives in the same col). */
  .hd-dasham-portal-dashboard__section--standings {
    display: none;
  }

  @container hd-dasham-portal (min-width: 640px) {
    .hd-dasham-portal-dashboard__grid {
      flex-direction: row;
      align-items: flex-start;
    }
    .hd-dasham-portal-dashboard__col--main {
      flex: 1.4 1 0;
      min-width: 0;
    }
    .hd-dasham-portal-dashboard__col--side {
      flex: 1 1 0;
      min-width: 0;
    }
    /* Landscape: stat-strip stacks vertically so each card has breathing room. */
    .hd-dasham-portal-dashboard__stat-strip {
      flex-direction: column;
      gap: 6px;
    }
    /* Landscape: standings re-enabled. */
    .hd-dasham-portal-dashboard__section--standings {
      display: flex;
    }
  }

  /* ============================================================ */
  /* 🃏 Kort view (C5)                                             */
  /* ============================================================ */

  .hd-dasham-portal-kort {
    /* Component-scoped tokens */
    --hd-dasham-kort-pane-title-sz:   calc(11px * var(--hd-player-content-zoom, 1));
    --hd-dasham-kort-pane-count-sz:   calc(10px * var(--hd-player-content-zoom, 1));
    --hd-dasham-kort-new-btn-sz:      calc(10px * var(--hd-player-content-zoom, 1));
    --hd-dasham-kort-hand-title-sz:   calc(11px * var(--hd-player-content-zoom, 1));
    --hd-dasham-kort-hand-meta-sz:     calc(10px * var(--hd-player-content-zoom, 1));
    --hd-dasham-kort-filter-label-sz:  calc(10px * var(--hd-player-content-zoom, 1));
    --hd-dasham-kort-filter-pill-sz:   calc(10px * var(--hd-player-content-zoom, 1));
    --hd-dasham-kort-empty-sz:        calc(11px * var(--hd-player-content-zoom, 1));
    --hd-dasham-kort-hand-card-w:    calc(200px * var(--hd-player-content-zoom, 1));
    --hd-dasham-kort-col-card-w:      calc(60px * var(--hd-player-content-zoom, 1));
    --hd-dasham-kort-pane-pad:        calc(12px * var(--hd-player-content-zoom, 1));

    display: flex;
    flex-direction: column;
    padding: 8px 0 12px;
    gap: 6px;
    color: var(--hd-text-primary);
    font-family: var(--hd-dasham-portal-font);
    overflow: hidden;
    min-width: 0;
  }

  /* ---- Pane wrappers --------------------------------------------- */

  .hd-dasham-portal-kort__pane {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .hd-dasham-portal-kort__pane-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px var(--hd-dasham-kort-pane-pad) 4px;
    gap: 8px;
    flex-shrink: 0;
    /* Full-width karakterark-style heading rule (the title span shares this row
     * with a button/count, so the rule lives on the row, not the span). */
    border-bottom: 1px solid var(--hd-border-subtle);
  }

  .hd-dasham-portal-kort__pane-head-left {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  /* "Mine kort" / collection headings read as karakterark-style section headings
   * (parchment display font, h4) on a transparent ground — matches "Seneste".
   * The subtle bottom rule goes on the head ROW (below) so it spans full width,
   * since the title span shares its row with an action button + count. */
  .hd-dasham-portal-kort__pane-title {
    font-family: var(--hd-font-parchment);
    font-size: var(--hd-text-h4);
    color: var(--hd-text-primary);
    font-weight: var(--hd-weight-semibold);
    line-height: var(--hd-leading-icon);
  }

  .hd-dasham-portal-kort__pane-count {
    font-size: var(--hd-dasham-kort-pane-count-sz);
    color: var(--hd-text-tertiary);
    font-family: var(--hd-dasham-portal-font);
    line-height: var(--hd-leading-icon);
  }

  /* "+ Ny hånd" dashed-pill button */
  .hd-dasham-portal-kort__new-btn {
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px dashed rgba(212, 160, 80, 0.55);
    color: var(--hd-accent-primary);
    font-size: var(--hd-dasham-kort-new-btn-sz);
    font-family: var(--hd-dasham-portal-font);
    line-height: var(--hd-leading-icon);
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--hd-transition-fast);
  }

  .hd-dasham-portal-kort__new-btn:hover {
    border-color: var(--hd-accent-primary);
    background: rgba(201, 169, 110, 0.10);
  }

  /* ---- Hands list (portrait horizontal / landscape vertical) ----- */

  .hd-dasham-portal-kort__hands-list {
    display: flex;
    gap: 8px;
    padding: 4px var(--hd-dasham-kort-pane-pad) 10px;
    overflow-x: auto;
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
  }
  .hd-dasham-portal-kort__hands-list::-webkit-scrollbar { display: none; }

  .hd-dasham-portal-kort__hand-card {
    flex-shrink: 0;
    width: var(--hd-dasham-kort-hand-card-w);
    background: rgba(58, 36, 24, 0.45);
    border: 1px solid rgba(106, 74, 42, 0.5);
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .hd-dasham-portal-kort__hand-card--active {
    border-color: rgba(212, 160, 80, 0.5);
    background: rgba(212, 160, 80, 0.08);
  }

  .hd-dasham-portal-kort__hand-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px;
  }

  .hd-dasham-portal-kort__hand-card-title {
    font-size: var(--hd-dasham-kort-hand-title-sz);
    color: var(--hd-text-primary);
    font-weight: var(--hd-weight-bold);
    font-family: var(--hd-dasham-portal-font);
    line-height: var(--hd-leading-icon);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
  }

  .hd-dasham-portal-kort__hand-card-title--active {
    color: var(--hd-accent-primary);
  }

  .hd-dasham-portal-kort__hand-card-default,
  .hd-dasham-portal-kort__hand-card-invalid {
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-1);
    font-size: var(--hd-dasham-kort-hand-meta-sz);
    line-height: var(--hd-leading-icon);
    font-family: var(--hd-dasham-portal-font);
    flex-shrink: 0;
  }
  .hd-dasham-portal-kort__hand-card-default { color: var(--hd-accent-primary); }
  .hd-dasham-portal-kort__hand-card-invalid { color: var(--hd-accent-error); }

  /* Mini-cards row inside hand-card — each card 32px wide. */
  .hd-dasham-portal-kort__hand-card-cards {
    display: flex;
    gap: 3px;
  }
  .hd-dasham-portal-kort__hand-card-cards > .hd-dasham-card {
    width: 32px;
    flex-shrink: 0;
  }

  .hd-dasham-portal-kort__hand-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    font-size: var(--hd-dasham-kort-hand-meta-sz);
    color: var(--hd-text-tertiary);
    font-family: var(--hd-dasham-portal-font);
    line-height: var(--hd-leading-icon);
  }

  .hd-dasham-portal-kort__hand-card-edit {
    background: transparent;
    border: 1px solid rgba(212, 160, 80, 0.35);
    color: var(--hd-accent-primary);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: var(--hd-dasham-kort-hand-meta-sz);
    font-family: var(--hd-dasham-portal-font);
    line-height: var(--hd-leading-icon);
    cursor: pointer;
  }

  /* ---- Filter pills ---------------------------------------------- */

  .hd-dasham-portal-kort__filter-block {
    padding: 4px var(--hd-dasham-kort-pane-pad);
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
  }

  .hd-dasham-portal-kort__filter-row {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
  }

  .hd-dasham-portal-kort__filter-label {
    font-size: var(--hd-dasham-kort-filter-label-sz);
    color: var(--hd-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    min-width: 46px;
    font-family: var(--hd-dasham-portal-font);
    line-height: var(--hd-leading-icon);
  }

  .hd-dasham-portal-kort__filter-pill {
    background: rgba(58, 36, 24, 0.5);
    border: 1px solid rgba(106, 74, 42, 0.5);
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--hd-text-tertiary);
    font-size: var(--hd-dasham-kort-filter-pill-sz);
    line-height: var(--hd-leading-icon);
    font-family: var(--hd-dasham-portal-font);
    cursor: pointer;
    transition: var(--hd-transition-fast);
  }

  .hd-dasham-portal-kort__filter-pill--on {
    background: rgba(201, 169, 110, 0.18);
    color: var(--hd-accent-primary);
    border-color: rgba(212, 160, 80, 0.4);
  }

  .hd-dasham-portal-kort__filter-pill:hover:not(.hd-dasham-portal-kort__filter-pill--on) {
    border-color: rgba(212, 160, 80, 0.35);
  }

  /* ---- Collection strip ------------------------------------------ */

  .hd-dasham-portal-kort__col-strip {
    display: flex;
    gap: 3px;
    padding: 4px var(--hd-dasham-kort-pane-pad);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
  }
  .hd-dasham-portal-kort__col-strip::-webkit-scrollbar { display: none; }
  .hd-dasham-portal-kort__col-strip > .hd-dasham-card {
    width: var(--hd-dasham-kort-col-card-w);
    flex-shrink: 0;
    cursor: pointer;
  }

  .hd-dasham-portal-kort__empty {
    padding: 12px var(--hd-dasham-kort-pane-pad);
    font-size: var(--hd-dasham-kort-empty-sz);
    color: var(--hd-text-tertiary);
    font-family: var(--hd-dasham-portal-font);
    font-style: italic;
    line-height: var(--hd-leading-snug);
  }

  /* ---- Landscape 2-pane layout via container query --------------- */

  @container hd-dasham-portal (min-width: 640px) {
    .hd-dasham-portal-kort {
      display: grid;
      grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
      gap: 10px;
      padding: 8px var(--hd-dasham-kort-pane-pad) 12px;
      overflow: hidden;
    }

    /* Hands pane (left) — vertical stack of hand-rows */
    .hd-dasham-portal-kort__pane--hands {
      overflow: hidden;
    }
    .hd-dasham-portal-kort__pane--hands .hd-dasham-portal-kort__pane-head {
      padding: 0 0 4px;
    }
    .hd-dasham-portal-kort__pane--hands .hd-dasham-portal-kort__hands-list {
      flex-direction: column;
      padding: 0;
      overflow-x: hidden;
      overflow-y: auto;
      min-height: 0;
    }
    .hd-dasham-portal-kort__pane--hands .hd-dasham-portal-kort__hand-card {
      width: auto;
    }

    /* Collection pane (right) — keeps horizontal scroll-strip layout */
    .hd-dasham-portal-kort__pane--collection {
      overflow: hidden;
    }
    .hd-dasham-portal-kort__pane--collection .hd-dasham-portal-kort__pane-head,
    .hd-dasham-portal-kort__pane--collection .hd-dasham-portal-kort__filter-block,
    .hd-dasham-portal-kort__pane--collection .hd-dasham-portal-kort__col-strip {
      padding-left: 0;
      padding-right: 0;
    }
  }

  /* ============================================================ */
  /* Modals (C5 deck-builder + card-detail; C6/C7 extend)         */
  /* ============================================================ */

  .hd-dasham-portal-modal {
    --hd-dasham-modal-pad:    calc(16px * var(--hd-player-content-zoom, 1));
    --hd-dasham-modal-radius: calc(10px * var(--hd-player-content-zoom, 1));
    --hd-dasham-modal-max-w:  calc(640px * var(--hd-player-content-zoom, 1));
    --hd-dasham-modal-title-sz: calc(14px * var(--hd-player-content-zoom, 1));
    --hd-dasham-modal-close-sz: calc(18px * var(--hd-player-content-zoom, 1));
    --hd-dasham-modal-body-sz:  calc(12px * var(--hd-player-content-zoom, 1));
    --hd-dasham-modal-btn-sz:   calc(12px * var(--hd-player-content-zoom, 1));
    --hd-dasham-modal-err-sz:   calc(11px * var(--hd-player-content-zoom, 1));
  }

  .hd-dasham-portal-modal:not(.hd-modal) {
    padding: 0;
    background: var(--hd-surface-base);
    color: var(--hd-text-primary);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-dasham-modal-radius);
    max-width: var(--hd-dasham-modal-max-w);
    width: calc(100vw - 32px);
    max-height: calc(100vh - 64px);
    font-family: var(--hd-dasham-portal-font);
    overflow: hidden;
  }

  .hd-dasham-portal-modal:not(.hd-modal)::backdrop {
    background: rgba(0, 0, 0, 0.6);
  }

  .hd-dasham-portal-modal__inner {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 64px);
  }

  .hd-dasham-portal-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px var(--hd-dasham-modal-pad);
    border-bottom: 1px solid var(--hd-border-subtle);
    gap: 12px;
  }

  .hd-dasham-portal-modal__title {
    margin: 0;
    font-size: var(--hd-dasham-modal-title-sz);
    font-weight: var(--hd-weight-bold);
    font-family: var(--hd-dasham-portal-font);
    color: var(--hd-text-primary);
    line-height: var(--hd-leading-snug);
    /* 14px from compound font-size — guarded by typography-coverage gate. */
  }

  .hd-dasham-portal-modal__close {
    background: transparent;
    border: none;
    color: var(--hd-text-secondary);
    font-size: var(--hd-dasham-modal-close-sz);
    line-height: var(--hd-leading-icon);
    cursor: pointer;
    padding: 4px 8px;
    min-width: 44px; /* WCAG 2.5.5 touch-target */
    min-height: 44px; /* WCAG 2.5.5 touch-target */
  }

  .hd-dasham-portal-modal__close:hover { color: var(--hd-accent-primary); }

  .hd-dasham-portal-modal__body {
    padding: var(--hd-dasham-modal-pad);
    overflow-y: auto;
    flex: 1 1 auto;
    font-size: var(--hd-dasham-modal-body-sz);
    line-height: var(--hd-leading-snug);
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .hd-dasham-portal-modal__footer {
    padding: 10px var(--hd-dasham-modal-pad);
    border-top: 1px solid var(--hd-border-subtle);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .hd-dasham-portal-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }

  .hd-dasham-portal-modal__btn {
    padding: 6px 16px;
    border-radius: 999px;
    font-family: var(--hd-dasham-portal-font);
    font-size: var(--hd-dasham-modal-btn-sz);
    line-height: var(--hd-leading-icon);
    cursor: pointer;
    transition: var(--hd-transition-fast);
    min-height: 44px; /* WCAG 2.5.5 touch-target */
  }

  .hd-dasham-portal-modal__btn--accent {
    background: rgba(201, 169, 110, 0.22);
    border: 1px solid var(--hd-accent-primary);
    color: var(--hd-accent-primary);
  }

  .hd-dasham-portal-modal__btn--accent:hover:not(:disabled) {
    background: rgba(201, 169, 110, 0.32);
  }

  .hd-dasham-portal-modal__btn--accent:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .hd-dasham-portal-modal__btn--ghost {
    background: transparent;
    border: 1px solid rgba(212, 160, 80, 0.35);
    color: var(--hd-text-secondary);
  }

  .hd-dasham-portal-modal__btn--ghost:hover {
    border-color: var(--hd-accent-primary);
    color: var(--hd-accent-primary);
  }

  .hd-dasham-portal-modal__error {
    font-size: var(--hd-dasham-modal-err-sz);
    color: var(--hd-accent-error);
    line-height: var(--hd-leading-snug);
  }

  /* ---- Rules-help specifics -------------------------------------- */

  .hd-dasham-portal-modal__rules-intro {
    font-size: var(--hd-dasham-modal-err-sz);
    color: var(--hd-text-secondary);
    line-height: var(--hd-leading-snug);
    margin-bottom: 12px;
  }

  .hd-dasham-portal-modal__rules-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .hd-dasham-portal-modal__rule-row {
    padding: 8px 12px;
    border-left: 3px solid var(--hd-accent-primary);
    background: rgba(201, 169, 110, 0.10);
    border-radius: 4px;
  }

  .hd-dasham-portal-modal__rule-label {
    font-family: var(--hd-dasham-portal-font);
    font-size: var(--hd-dasham-modal-body-sz);
    font-weight: var(--hd-weight-bold);
    color: var(--hd-accent-primary);
    text-transform: capitalize;
  }

  .hd-dasham-portal-modal__rule-desc {
    font-size: var(--hd-dasham-modal-body-sz);
    color: var(--hd-text-secondary);
    line-height: var(--hd-leading-snug);
    margin-top: 2px;
  }

  /* ---- Deck-builder specifics ------------------------------------ */

  .hd-dasham-portal-modal__field {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .hd-dasham-portal-modal__field-label {
    flex-shrink: 0;
  }

  .hd-dasham-portal-modal__name-input {
    flex: 1;
    background: rgba(58, 36, 24, 0.45);
    border: 1px solid rgba(106, 74, 42, 0.5);
    border-radius: 4px;
    padding: 6px 10px;
    color: var(--hd-text-primary);
    font-family: var(--hd-dasham-portal-font);
    font-size: var(--hd-dasham-modal-body-sz);
    line-height: var(--hd-leading-snug);
    min-height: 44px; /* WCAG 2.5.5 touch-target */
  }

  .hd-dasham-portal-modal__name-input:focus {
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: 1px;
  }

  .hd-dasham-portal-modal__checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--hd-dasham-modal-body-sz);
    line-height: var(--hd-leading-snug);
    color: var(--hd-text-secondary);
  }

  .hd-dasham-portal-modal__slot-indicator {
    text-align: center;
    font-size: var(--hd-dasham-modal-body-sz);
    color: var(--hd-text-tertiary);
    font-family: var(--hd-dasham-portal-font);
    line-height: var(--hd-leading-snug);
  }

  .hd-dasham-portal-modal__slot-indicator--full {
    color: var(--hd-accent-primary);
    font-weight: var(--hd-weight-bold);
  }

  .hd-dasham-portal-modal__selected-strip {
    display: flex;
    gap: 6px;
    justify-content: center;
  }

  .hd-dasham-portal-modal__selected-strip > .hd-dasham-card {
    width: 48px;
    flex-shrink: 0;
    cursor: pointer;
  }

  .hd-dasham-portal-modal__slot-empty {
    width: 48px;
    aspect-ratio: 2.5 / 3.5;
    background: rgba(58, 36, 24, 0.30);
    border: 1px dashed rgba(106, 74, 42, 0.5);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hd-text-tertiary);
    font-size: var(--hd-dasham-modal-body-sz);
    font-family: var(--hd-dasham-portal-font);
    line-height: var(--hd-leading-icon);
  }

  .hd-dasham-portal-modal__picker-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .hd-dasham-portal-modal__picker-strip > .hd-dasham-card {
    width: 56px;
    flex-shrink: 0;
    cursor: pointer;
  }

  .hd-dasham-portal-modal__picker-card--locked {
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* ---- Card-detail specifics ------------------------------------- */

  .hd-dasham-portal-modal__card-preview {
    display: flex;
    justify-content: center;
  }

  .hd-dasham-portal-modal__card-preview > .hd-dasham-card {
    width: 180px;
    flex-shrink: 0;
  }

  .hd-dasham-portal-modal__meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--hd-dasham-modal-body-sz);
    color: var(--hd-text-secondary);
    line-height: var(--hd-leading-snug);
  }

  .hd-dasham-portal-modal__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
  }

  .hd-dasham-portal-modal__tag {
    background: rgba(58, 36, 24, 0.5);
    border: 1px solid rgba(106, 74, 42, 0.5);
    color: var(--hd-text-tertiary);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--hd-dasham-modal-err-sz);
    line-height: var(--hd-leading-icon);
    font-family: var(--hd-dasham-portal-font);
  }

  /* ---- Challenge-builder specifics (C6) -------------------------- */

  .hd-dasham-portal-modal__cb-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .hd-dasham-portal-modal__cb-label {
    font-size: var(--hd-text-micro);
    font-family: var(--hd-dasham-portal-font);
    color: var(--hd-text-tertiary);
    line-height: var(--hd-leading-icon);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .hd-dasham-portal-modal__cb-opponent {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--hd-dasham-modal-body-sz);
    color: var(--hd-text-primary);
    line-height: var(--hd-leading-snug);
  }

  .hd-dasham-portal-modal__cb-opponent-name {
    font-weight: var(--hd-weight-bold);
  }

  .hd-dasham-portal-modal__cb-opponent-badge {
    font-size: var(--hd-text-micro);
    color: var(--hd-text-tertiary);
    border: 1px solid rgba(212, 160, 80, 0.35);
    border-radius: 999px;
    padding: 1px 8px;
    line-height: var(--hd-leading-icon);
  }

  /* Practice note under the opponent block — explains the no-stakes rules. */
  .hd-dasham-portal-modal__cb-note {
    margin-top: 4px;
    font-size: var(--hd-text-micro);
    font-family: var(--hd-dasham-portal-font);
    color: var(--hd-text-tertiary);
    line-height: var(--hd-leading-snug);
    font-style: italic;
  }

  .hd-dasham-portal-modal__cb-select {
    background: rgba(58, 36, 24, 0.45);
    border: 1px solid rgba(106, 74, 42, 0.5);
    border-radius: 4px;
    padding: 6px 10px;
    color: var(--hd-text-primary);
    font-family: var(--hd-dasham-portal-font);
    font-size: var(--hd-dasham-modal-body-sz);
    line-height: var(--hd-leading-snug);
    min-height: 44px; /* WCAG 2.5.5 touch-target */
  }

  .hd-dasham-portal-modal__cb-select:focus {
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: 1px;
  }

  .hd-dasham-portal-modal__cb-empty {
    font-size: var(--hd-dasham-modal-body-sz);
    color: var(--hd-text-tertiary);
    line-height: var(--hd-leading-snug);
    font-style: italic;
  }

  .hd-dasham-portal-modal__cb-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .hd-dasham-portal-modal__cb-pill {
    background: transparent;
    border: 1px solid rgba(201, 169, 110, 0.28);
    border-radius: 999px;
    padding: 4px 10px;
    color: var(--hd-text-secondary);
    font-family: var(--hd-dasham-portal-font);
    font-size: var(--hd-dasham-modal-err-sz);
    line-height: var(--hd-leading-icon);
    cursor: pointer;
    transition: var(--hd-transition-fast);
    min-height: 44px; /* WCAG 2.5.5 touch-target */
  }

  .hd-dasham-portal-modal__cb-pill:hover:not(:disabled):not(.hd-dasham-portal-modal__cb-pill--on) {
    border-color: rgba(201, 169, 110, 0.5);
    color: var(--hd-text-primary);
  }

  .hd-dasham-portal-modal__cb-pill--on {
    background: rgba(201, 169, 110, 0.22);
    border-color: var(--hd-accent-primary);
    color: var(--hd-accent-primary);
  }

  .hd-dasham-portal-modal__cb-pill--locked {
    cursor: not-allowed;
    opacity: 0.85;
  }

  /* ============================================================ */
  /* Spil — lobby + live-match (C6 lobby + C7 stub)                */
  /* ============================================================ */

  .hd-dasham-portal-spil {
    /* Local tokens — keeps sizes consistent across portrait + landscape and
     * makes the relationship between row-name (12px), meta (10px) and section-
     * title (11px) explicit. */
    --hd-dasham-spil-pad:           calc(12px * var(--hd-player-content-zoom, 1));
    --hd-dasham-spil-section-gap:   calc(12px * var(--hd-player-content-zoom, 1));
    --hd-dasham-spil-row-gap:        calc(8px * var(--hd-player-content-zoom, 1));
    --hd-dasham-spil-section-title-sz: calc(11px * var(--hd-player-content-zoom, 1));
    --hd-dasham-spil-row-name-sz:    calc(12px * var(--hd-player-content-zoom, 1));
    --hd-dasham-spil-row-meta-sz:    calc(10px * var(--hd-player-content-zoom, 1));
    --hd-dasham-spil-action-sz:      calc(11px * var(--hd-player-content-zoom, 1));
    --hd-dasham-spil-empty-sz:       calc(11px * var(--hd-player-content-zoom, 1));

    display: flex;
    flex-direction: column;
    gap: var(--hd-dasham-spil-section-gap);
    padding: var(--hd-dasham-spil-pad);
    color: var(--hd-text-primary);
    font-family: var(--hd-dasham-portal-font);
  }

  .hd-dasham-portal-spil__grid {
    display: flex;
    flex-direction: column;
    gap: var(--hd-dasham-spil-section-gap);
  }

  .hd-dasham-portal-spil__col {
    display: flex;
    flex-direction: column;
    gap: var(--hd-dasham-spil-section-gap);
    min-width: 0;
  }

  .hd-dasham-portal-spil__section {
    display: flex;
    flex-direction: column;
    gap: var(--hd-dasham-spil-row-gap);
  }

  /* "Find en modstander" is an .hd-portal-fg-card (gold-edged Overblik box);
   * pad it so the opponent rows clear the 3px gold seams top/bottom. */
  .hd-dasham-portal-spil__section--opponents {
    padding: var(--hd-space-3);
  }

  .hd-dasham-portal-spil__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .hd-dasham-portal-spil__section-title {
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-1);
    font-size: var(--hd-dasham-spil-section-title-sz);
    font-family: var(--hd-dasham-portal-font);
    color: var(--hd-text-secondary);
    line-height: var(--hd-leading-icon);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .hd-dasham-portal-spil__refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-1);
    background: transparent;
    border: 1px solid rgba(201, 169, 110, 0.28);
    border-radius: 999px;
    padding: 3px 10px;
    color: var(--hd-text-secondary);
    font-family: var(--hd-dasham-portal-font);
    font-size: var(--hd-dasham-spil-action-sz);
    line-height: var(--hd-leading-icon);
    cursor: pointer;
    transition: var(--hd-transition-fast);
    min-height: 44px; /* WCAG 2.5.5 touch-target */
  }

  .hd-dasham-portal-spil__refresh-btn:hover:not(:disabled) {
    border-color: var(--hd-accent-primary);
    color: var(--hd-accent-primary);
  }

  .hd-dasham-portal-spil__refresh-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .hd-dasham-portal-spil__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(58, 36, 24, 0.25);
    border: 1px solid rgba(106, 74, 42, 0.4);
    border-radius: 6px;
  }

  /* Incoming-row: subtle gold-tint to highlight that user-action is required. */
  .hd-dasham-portal-spil__row--incoming {
    background: rgba(201, 169, 110, 0.10);
    border-color: rgba(201, 169, 110, 0.32);
  }

  /* Practice (Prøvekamp) row — dashed border signals a synthetic opponent that
   * sits below the real ones. */
  .hd-dasham-portal-spil__row--practice {
    background: rgba(58, 36, 24, 0.15);
    border-style: dashed;
    border-color: rgba(201, 169, 110, 0.4);
  }

  .hd-dasham-portal-spil__row-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .hd-dasham-portal-spil__row-name {
    font-size: var(--hd-dasham-spil-row-name-sz);
    font-family: var(--hd-dasham-portal-font);
    line-height: var(--hd-leading-snug);
    color: var(--hd-text-primary);
    font-weight: var(--hd-weight-bold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .hd-dasham-portal-spil__row-badge {
    font-size: var(--hd-text-micro);
    color: var(--hd-text-tertiary);
    border: 1px solid rgba(212, 160, 80, 0.35);
    border-radius: 999px;
    padding: 1px 6px;
    line-height: var(--hd-leading-icon);
    font-weight: var(--hd-weight-regular);
  }

  .hd-dasham-portal-spil__row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: var(--hd-dasham-spil-row-meta-sz);
    font-family: var(--hd-dasham-portal-font);
    color: var(--hd-text-tertiary);
    line-height: var(--hd-leading-snug);
  }

  .hd-dasham-portal-spil__row-rules,
  .hd-dasham-portal-spil__row-trade,
  .hd-dasham-portal-spil__row-waiting,
  .hd-dasham-portal-spil__row-region {
    font-size: var(--hd-dasham-spil-row-meta-sz);
    line-height: var(--hd-leading-snug);
  }

  .hd-dasham-portal-spil__row-region {
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-1);
  }

  .hd-dasham-portal-spil__row-waiting {
    color: var(--hd-text-secondary);
  }

  .hd-dasham-portal-spil__row-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }

  .hd-dasham-portal-spil__action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hd-space-1);
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--hd-dasham-portal-font);
    font-size: var(--hd-dasham-spil-action-sz);
    line-height: var(--hd-leading-icon);
    cursor: pointer;
    transition: var(--hd-transition-fast);
    min-height: 44px; /* WCAG 2.5.5 touch-target */
    border: 1px solid transparent;
  }

  .hd-dasham-portal-spil__action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .hd-dasham-portal-spil__action-btn--accept {
    background: transparent;
    border-color: var(--hd-accent-success);
    color: var(--hd-accent-success);
  }

  .hd-dasham-portal-spil__action-btn--accept:hover:not(:disabled) {
    background: color-mix(in srgb, var(--hd-accent-success) 14%, var(--hd-surface-base));
  }

  .hd-dasham-portal-spil__action-btn--decline {
    background: transparent;
    border-color: var(--hd-accent-error);
    color: var(--hd-accent-error);
  }

  .hd-dasham-portal-spil__action-btn--decline:hover:not(:disabled) {
    background: color-mix(in srgb, var(--hd-accent-error) 14%, var(--hd-surface-base));
  }

  .hd-dasham-portal-spil__action-btn--cancel {
    background: transparent;
    border-color: rgba(212, 160, 80, 0.35);
    color: var(--hd-text-secondary);
  }

  .hd-dasham-portal-spil__action-btn--cancel:hover:not(:disabled) {
    border-color: var(--hd-accent-primary);
    color: var(--hd-accent-primary);
  }

  .hd-dasham-portal-spil__action-btn--challenge {
    background: rgba(201, 169, 110, 0.22);
    border-color: var(--hd-accent-primary);
    color: var(--hd-accent-primary);
    font-weight: var(--hd-weight-bold);
  }

  .hd-dasham-portal-spil__action-btn--challenge:hover:not(:disabled) {
    background: rgba(201, 169, 110, 0.32);
  }

  /* Practice action — ghost-gold, lighter than the filled challenge button. */
  .hd-dasham-portal-spil__action-btn--practice {
    background: transparent;
    border-color: var(--hd-accent-primary);
    color: var(--hd-accent-primary);
    font-weight: var(--hd-weight-bold);
  }

  .hd-dasham-portal-spil__action-btn--practice:hover:not(:disabled) {
    background: rgba(201, 169, 110, 0.18);
  }

  /* Lobby toolbar — holds the "Scan fysisk kort" action above the grid. */
  .hd-dasham-portal-spil__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    margin-bottom: 10px;
  }

  /* Scan action — filled gold, the lobby's primary "get more cards" CTA. */
  .hd-dasham-portal-spil__action-btn--scan {
    padding-inline: 14px;
    background: rgba(201, 169, 110, 0.22);
    border-color: var(--hd-accent-primary);
    color: var(--hd-accent-primary);
    font-weight: var(--hd-weight-bold);
  }

  .hd-dasham-portal-spil__action-btn--scan:hover:not(:disabled) {
    background: rgba(201, 169, 110, 0.32);
  }

  .hd-dasham-portal-spil__empty {
    padding: 12px 10px;
    font-size: var(--hd-dasham-spil-empty-sz);
    color: var(--hd-text-tertiary);
    font-family: var(--hd-dasham-portal-font);
    line-height: var(--hd-leading-snug);
    font-style: italic;
    text-align: center;
  }

  .hd-dasham-portal-spil__error {
    padding: 10px 12px;
    background: color-mix(in srgb, var(--hd-accent-error) 12%, var(--hd-surface-base));
    border: 1px solid var(--hd-accent-error);
    border-radius: 6px;
    color: var(--hd-accent-error);
    font-size: var(--hd-dasham-spil-row-meta-sz);
    font-family: var(--hd-dasham-portal-font);
    line-height: var(--hd-leading-snug);
  }

  /* ============================================================ */
  /* Live match (C7) — 3×3 board + hand-strip + player-cards       */
  /* ============================================================ */

  /* Match-root override: positioned container so the match-end overlay can
   * absolute-position over the whole spil-view; portrait stacks naturally. */
  .hd-dasham-portal-spil--match {
    position: relative;
    gap: 10px;
  }

  .hd-dasham-portal-spil__match {
    --hd-dasham-spil-card-min:     calc(44px * var(--hd-player-content-zoom, 1));
    --hd-dasham-spil-card-max:     calc(120px * var(--hd-player-content-zoom, 1));
    --hd-dasham-spil-gap:          calc(6px * var(--hd-player-content-zoom, 1));
    --hd-dasham-spil-flag-portrait: calc(42px * var(--hd-player-content-zoom, 1));
    --hd-dasham-spil-match-player-name-sz: calc(13px * var(--hd-player-content-zoom, 1));
    --hd-dasham-spil-match-player-score-sz: calc(28px * var(--hd-player-content-zoom, 1));

    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  /* Kompakt kontrol-klynge — en flow-top-række (var tidligere position:absolute
   * "koster ingen layout-højde", men lå dermed oven på flag + øverste kort-række
   * på smalle viewports hvor det centrerede grid fyldte bredden). Som almindelig
   * række reserverer den sin egen højde og kan aldrig overlappe; _applyFit
   * afleder bræt-størrelsen fra feltets top, så brættet kompenserer automatisk. */
  .hd-dasham-portal-spil__controls {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
    flex: 0 0 auto;
  }
  .hd-dasham-portal-spil__round-chip {
    font-size: var(--hd-dasham-spil-match-player-name-sz);
    font-family: var(--hd-dasham-portal-font);
    color: var(--hd-accent-primary);
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(201, 169, 110, 0.18);
    border: 1px solid var(--hd-accent-primary);
  }

  /* Battlefield = inline-size-container → width-@container til reflow (Stadie
   * A/B/C). Ingen definite-height-krav (Spil-containeren er content-driven), så
   * højde-fit klares af _applyFit (JS) der måler ledig viewport-højde og sætter
   * --hd-dasham-spil-card præcist. CSS-formlen nedenfor er no-JS-fallback. */
  .hd-dasham-portal-spil__battlefield {
    container-type: inline-size;
    width: 100%;
    min-height: 0;
  }

  /* __field — grid'et. Kort-størrelse = clamp(min, min(højde-budget, bredde-
   * budget), max). Højde-budget = dvh-approksimation (fallback); _applyFit
   * overskriver med præcis viewport-måling. Bredde-budget = cqw/--_wdiv. */
  .hd-dasham-portal-spil__field {
    --_hoff: 0px;
    --_wdiv: 5.5;
    --hd-dasham-spil-card: clamp(
      var(--hd-dasham-spil-card-min),
      min(
        calc((78dvh - var(--_hoff) - 24px) / 3 * 0.7143),
        calc((100cqw - 16px) / var(--_wdiv))
      ),
      var(--hd-dasham-spil-card-max)
    );

    display: grid;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    gap: var(--hd-dasham-spil-gap);
    justify-content: center;
    align-content: center;
    align-items: start;
    grid-template-columns: auto minmax(0, max-content) auto;
    grid-template-areas: "opp board mine";
  }

  .hd-dasham-portal-spil__side--opp  { grid-area: opp; }
  .hd-dasham-portal-spil__side--mine { grid-area: mine; }
  .hd-dasham-portal-spil__board-wrap { grid-area: board; display: flex; justify-content: center; align-items: flex-start; }

  /* Side-kolonne: flag (øverst) + hånd. Lodret som standard. */
  .hd-dasham-portal-spil__side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hd-dasham-spil-gap);
    min-width: 0;
  }

  /* ---- Stadie B: smal — modstander rykker OP (vandret), board+mine nedenunder. */
  @container (max-width: 280px) {
    .hd-dasham-portal-spil__field {
      --_wdiv: 4.25;
      --_hoff: calc(var(--hd-dasham-spil-card) / 0.7143 * 0.55 + var(--hd-dasham-spil-flag-portrait) + 8px);
      grid-template-columns: auto minmax(0, max-content);
      grid-template-areas:
        "opp   opp"
        "board mine";
    }
    .hd-dasham-portal-spil__side--opp { flex-direction: row; align-items: center; }
    .hd-dasham-portal-spil__side--opp .hd-dasham-portal-spil__hand { flex-direction: row; }
    .hd-dasham-portal-spil__side--opp .hd-dasham-portal-spil__hand-card-wrap:not(:last-child) {
      margin-bottom: 0;
      margin-right: calc(var(--hd-dasham-spil-card) * -0.5);
    }
  }

  /* ---- Stadie C: smallest — egen hånd rykker NED (vandret), board fuld bredde. */
  @container (max-width: 210px) {
    .hd-dasham-portal-spil__field {
      --_wdiv: 3;
      --_hoff: calc((var(--hd-dasham-spil-card) / 0.7143 * 0.55 + var(--hd-dasham-spil-flag-portrait) + 8px) * 2);
      grid-template-columns: minmax(0, max-content);
      grid-template-areas:
        "opp"
        "board"
        "mine";
    }
    .hd-dasham-portal-spil__side { flex-direction: row; align-items: center; }
    .hd-dasham-portal-spil__hand { flex-direction: row; }
    .hd-dasham-portal-spil__hand-card-wrap:not(:last-child) {
      margin-bottom: 0;
      margin-right: calc(var(--hd-dasham-spil-card) * -0.5);
    }
  }

  /* Minimalt flag — portræt + navn + point, øverst i hånd-kolonnen.
   * Aktivt flag (--active) får gyldent glow = tur-markering. */
  .hd-dasham-portal-spil__flag {
    /* Width is pinned to the card-size so a long participant name can NEVER
     * widen the flag — and therefore can't grow the `auto` side-column and push
     * the board/hand into overlap. The name itself shrinks-then-ellipsises
     * inside this fixed box (font shrink via _fitFlagNames, ellipsis via the
     * overflow rules on __flag-name). */
    width: var(--hd-dasham-spil-card);
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-radius: 6px;
    color: var(--hd-dasham-card-ink);
    font-family: var(--hd-dasham-portal-font);
  }
  .hd-dasham-portal-spil__flag--red {
    background: color-mix(in srgb, var(--hd-dasham-owner-red) 24%, var(--hd-surface-base));
    border: 1px solid var(--hd-dasham-owner-red);
  }
  .hd-dasham-portal-spil__flag--blue {
    background: color-mix(in srgb, var(--hd-dasham-owner-blue) 24%, var(--hd-surface-base));
    border: 1px solid var(--hd-dasham-owner-blue);
  }
  .hd-dasham-portal-spil__flag--active {
    box-shadow: 0 0 0 2px var(--hd-accent-primary), 0 0 14px color-mix(in srgb, var(--hd-accent-primary) 60%, transparent);
  }
  .hd-dasham-portal-spil__flag-portrait {
    width: var(--hd-dasham-spil-flag-portrait);
    height: var(--hd-dasham-spil-flag-portrait);
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid rgba(0, 0, 0, 0.25);
  }
  .hd-dasham-portal-spil__flag-portrait--initial {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--hd-weight-bold);
    font-size: calc(var(--hd-dasham-spil-flag-portrait) * 0.5);
    background: radial-gradient(circle at 35% 30%, var(--hd-text-primary), var(--hd-gold-deep));
    color: var(--hd-text-on-accent);
  }
  .hd-dasham-portal-spil__flag-name {
    font-size: var(--hd-dasham-spil-match-player-name-sz);
    font-weight: var(--hd-weight-bold);
    line-height: var(--hd-leading-snug);
    /* Capped to the flag width (= card-size). min-width:0 stops the flex box from
     * stretching to the name's min-content width. Stage 1 = font shrink
     * (_fitFlagNames), stage 2 = ellipsis here when even the floor font overflows. */
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hd-dasham-portal-spil__flag-score {
    font-size: var(--hd-dasham-spil-match-player-score-sz);
    font-weight: var(--hd-weight-bold);
    line-height: var(--hd-leading-tight);
  }

  /* (player-card-regler fjernet — point/portræt vises nu i __flag) */

  /* (banner-row + turn-banner fjernet — tur vises nu som glow på det aktive flag) */

  /* Rules-help button — compact "?" that opens the active-match rule overview.
   * Touch-target kept ≥44px for iPad/iPhone players. */
  .hd-dasham-portal-spil__rules-help-btn {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    border-radius: 999px;
    background: rgba(201, 169, 110, 0.18);
    border: 1px solid var(--hd-accent-primary);
    color: var(--hd-accent-primary);
    font-family: var(--hd-dasham-portal-font);
    font-size: calc(16px * var(--hd-player-content-zoom, 1));
    font-weight: var(--hd-weight-bold);
    cursor: pointer;
    transition: var(--hd-transition-fast);
  }

  .hd-dasham-portal-spil__rules-help-btn:hover {
    background: rgba(201, 169, 110, 0.30);
  }

  /* Music mute-toggle button; mirrors rules-help button sizing/palette.
   * Touch-target ≥44×44px (WCAG 2.5.5). */
  .hd-dasham-music-toggle {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    border-radius: 999px;
    background: rgba(201, 169, 110, 0.18);
    border: 1px solid var(--hd-accent-primary);
    color: var(--hd-accent-primary);
    font-family: var(--hd-dasham-portal-font);
    font-size: calc(16px * var(--hd-player-content-zoom, 1));
    cursor: pointer;
    transition: var(--hd-transition-fast);
  }

  .hd-dasham-music-toggle:hover {
    background: rgba(201, 169, 110, 0.30);
  }

  .hd-dasham-music-toggle__icon {
    --hd-player-icon-size: calc(16px * var(--hd-player-content-zoom, 1));
  }

  /* (turn-banner--mine/--theirs fjernet — se __flag--active) */

  /* Board — 3×3 grid; hver celle har kort-størrelse fra --hd-dasham-spil-card
   * (aspect 2.5/3.5). Brættet skaleres dermed med fit-formlen på __field. */
  .hd-dasham-portal-spil__board {
    display: grid;
    grid-template-columns: repeat(3, var(--hd-dasham-spil-card));
    grid-auto-rows: calc(var(--hd-dasham-spil-card) / 0.7143);
    gap: var(--hd-dasham-spil-gap);
    box-sizing: border-box;
    padding: 6px;
    background: rgba(58, 36, 24, 0.30);
    border: 1px solid var(--hd-accent-primary);
    border-radius: 8px;
  }

  .hd-dasham-portal-spil__board-cell {
    width: var(--hd-dasham-spil-card);
    aspect-ratio: 2.5 / 3.5;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hd-dasham-portal-spil__board-cell--empty {
    border: 1px dashed rgba(106, 74, 42, 0.6);
    background: rgba(58, 36, 24, 0.15);
  }

  .hd-dasham-portal-spil__board-cell--playable {
    border-color: var(--hd-accent-primary);
    cursor: pointer;
    transition: var(--hd-transition-fast);
  }

  .hd-dasham-portal-spil__board-cell--playable:hover {
    background: rgba(201, 169, 110, 0.18);
  }

  .hd-dasham-portal-spil__board-cell--filled {
    border: 2px solid transparent;
  }

  .hd-dasham-portal-spil__board-cell--red {
    border-color: var(--hd-dasham-owner-red);
    box-shadow: 0 0 6px color-mix(in srgb, var(--hd-dasham-owner-red) 50%, transparent);
  }

  .hd-dasham-portal-spil__board-cell--blue {
    border-color: var(--hd-dasham-owner-blue);
    box-shadow: 0 0 6px color-mix(in srgb, var(--hd-dasham-owner-blue) 50%, transparent);
  }

  .hd-dasham-portal-spil__board-cell--optimistic {
    opacity: 0.65;
  }

  .hd-dasham-portal-spil__board-cell > .hd-dasham-card {
    width: 100%;
    /* height: auto via aspect-ratio (2.5/3.5) — matcher cellens portrait. */
  }

  /* Hånd — lodret stak med overlap som standard (flag sidder ovenover).
   * Reflow (Stadie B/C) gør den vandret via @container ovenfor. */
  .hd-dasham-portal-spil__hand {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
  }
  .hd-dasham-portal-spil__hand::-webkit-scrollbar { display: none; }
  .hd-dasham-portal-spil__hand-card-wrap {
    flex: 0 0 auto;
    width: var(--hd-dasham-spil-card);
    transition: var(--hd-transition-fast);
  }
  /* Lodret overlap (stak). */
  .hd-dasham-portal-spil__hand-card-wrap:not(:last-child) {
    margin-bottom: calc(var(--hd-dasham-spil-card) / 0.7143 * -0.66);
  }
  .hd-dasham-portal-spil__hand-card-wrap--selected {
    transform: translateY(-6px);
    z-index: 2;
  }
  .hd-dasham-portal-spil__hand-card-wrap--opp {
    opacity: 0.85;
  }
  .hd-dasham-portal-spil__hand-card-wrap > .hd-dasham-card {
    width: 100%;
    cursor: pointer;
  }

  /* Match-end overlay — scrim covering the spil-view container.
   * Local tokens keep the typography-coverage gate happy and make the
   * overlay's vertical rhythm easy to tune in one place. */
  .hd-dasham-portal-spil__match-overlay {
    --hd-dasham-spil-overlay-winner-sz:  calc(20px * var(--hd-player-content-zoom, 1));
    --hd-dasham-spil-overlay-score-sz:   calc(14px * var(--hd-player-content-zoom, 1));
    --hd-dasham-spil-overlay-note-sz:    calc(12px * var(--hd-player-content-zoom, 1));
    --hd-dasham-spil-overlay-cta-sz:     calc(13px * var(--hd-player-content-zoom, 1));
    --hd-dasham-spil-overlay-dismiss-sz: calc(12px * var(--hd-player-content-zoom, 1));

    position: absolute;
    inset: 0;
    background: rgba(8, 6, 4, 0.70);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 5;
  }

  .hd-dasham-portal-spil__match-overlay-inner {
    background: var(--hd-surface-base);
    border: 1px solid var(--hd-accent-primary);
    border-radius: 10px;
    padding: 20px 24px;
    max-width: 360px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    text-align: center;
    color: var(--hd-text-primary);
    font-family: var(--hd-dasham-portal-font);
  }

  .hd-dasham-portal-spil__match-overlay-winner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hd-space-1);
    font-size: var(--hd-dasham-spil-overlay-winner-sz);
    line-height: var(--hd-leading-snug);
    font-weight: var(--hd-weight-bold);
    color: var(--hd-accent-primary);
  }

  .hd-dasham-portal-spil__match-overlay-score {
    font-size: var(--hd-dasham-spil-overlay-score-sz);
    line-height: var(--hd-leading-snug);
    color: var(--hd-text-secondary);
  }

  .hd-dasham-portal-spil__match-overlay-note {
    font-size: var(--hd-dasham-spil-overlay-note-sz);
    line-height: var(--hd-leading-snug);
    color: var(--hd-text-tertiary);
    font-style: italic;
  }

  .hd-dasham-portal-spil__match-overlay-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .hd-dasham-portal-spil__match-overlay-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hd-space-1);
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(201, 169, 110, 0.22);
    border: 1px solid var(--hd-accent-primary);
    color: var(--hd-accent-primary);
    font-family: var(--hd-dasham-portal-font);
    font-size: var(--hd-dasham-spil-overlay-cta-sz);
    line-height: var(--hd-leading-icon);
    font-weight: var(--hd-weight-bold);
    cursor: pointer;
    transition: var(--hd-transition-fast);
    min-height: 44px; /* WCAG 2.5.5 touch-target */
  }

  .hd-dasham-portal-spil__match-overlay-cta:hover {
    background: rgba(201, 169, 110, 0.32);
  }

  .hd-dasham-portal-spil__match-overlay-dismiss {
    padding: 6px 12px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid rgba(212, 160, 80, 0.35);
    color: var(--hd-text-secondary);
    font-family: var(--hd-dasham-portal-font);
    font-size: var(--hd-dasham-spil-overlay-dismiss-sz);
    line-height: var(--hd-leading-icon);
    cursor: pointer;
    transition: var(--hd-transition-fast);
    min-height: 44px; /* WCAG 2.5.5 touch-target */
  }

  .hd-dasham-portal-spil__match-overlay-dismiss:hover {
    border-color: var(--hd-accent-primary);
    color: var(--hd-accent-primary);
  }

  /* ---- Reward-claim modal (C7) ----------------------------------- */

  .hd-dasham-portal-modal--reward-claim {
    --hd-dasham-modal-max-w: calc(520px * var(--hd-player-content-zoom, 1));
  }

  .hd-dasham-portal-modal__rc-countdown {
    font-size: var(--hd-dasham-modal-body-sz);
    line-height: var(--hd-leading-snug);
    color: var(--hd-accent-primary);
    font-family: var(--hd-dasham-portal-font);
    text-align: center;
    padding: 6px 8px;
    background: rgba(201, 169, 110, 0.10);
    border: 1px solid rgba(201, 169, 110, 0.32);
    border-radius: 6px;
  }

  .hd-dasham-portal-modal__rc-countdown--expired {
    color: var(--hd-accent-error);
    background: color-mix(in srgb, var(--hd-accent-error) 10%, var(--hd-surface-base));
    border-color: var(--hd-accent-error);
  }

  .hd-dasham-portal-modal__rc-limit {
    font-size: var(--hd-dasham-modal-body-sz);
    line-height: var(--hd-leading-snug);
    color: var(--hd-text-secondary);
    text-align: center;
  }

  .hd-dasham-portal-modal__rc-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }

  .hd-dasham-portal-modal__rc-card {
    width: 80px;
    flex-shrink: 0;
    cursor: pointer;
    transition: var(--hd-transition-fast);
  }

  .hd-dasham-portal-modal__rc-card--selected {
    transform: translateY(-4px);
  }

  .hd-dasham-portal-modal__rc-card > .hd-dasham-card {
    width: 100%;
  }

  /* ============================================================ */
  /* Turnering (C8) — mine + detail + tilmeld                      */
  /* ============================================================ */

  .hd-dasham-portal-turnering {
    --hd-dasham-turnering-pad:           calc(12px * var(--hd-player-content-zoom, 1));
    --hd-dasham-turnering-section-gap:   calc(12px * var(--hd-player-content-zoom, 1));
    --hd-dasham-turnering-section-title-sz: calc(11px * var(--hd-player-content-zoom, 1));
    --hd-dasham-turnering-card-name-sz:  calc(13px * var(--hd-player-content-zoom, 1));
    --hd-dasham-turnering-card-rank-sz:  calc(20px * var(--hd-player-content-zoom, 1));
    --hd-dasham-turnering-card-meta-sz:  calc(10px * var(--hd-player-content-zoom, 1));
    --hd-dasham-turnering-table-sz:      calc(11px * var(--hd-player-content-zoom, 1));
    --hd-dasham-turnering-detail-title-sz: calc(14px * var(--hd-player-content-zoom, 1));
    --hd-dasham-turnering-detail-meta-sz: calc(11px * var(--hd-player-content-zoom, 1));
    --hd-dasham-turnering-match-row-sz:  calc(11px * var(--hd-player-content-zoom, 1));
    --hd-dasham-turnering-join-row-sz:   calc(11px * var(--hd-player-content-zoom, 1));
    --hd-dasham-turnering-empty-sz:      calc(11px * var(--hd-player-content-zoom, 1));
    /* Phase 2 bracket-vis local tokens */
    --hd-dasham-turnering-bracket-label-sz:  calc(10px * var(--hd-player-content-zoom, 1));
    --hd-dasham-turnering-bracket-slot-sz:   calc(12px * var(--hd-player-content-zoom, 1));
    --hd-dasham-turnering-bracket-badge-sz:  calc(10px * var(--hd-player-content-zoom, 1));
    --hd-dasham-turnering-bracket-round-gap: calc(6px * var(--hd-player-content-zoom, 1));
    --hd-dasham-turnering-bracket-pairing-gap: calc(4px * var(--hd-player-content-zoom, 1));
    --hd-dasham-turnering-bracket-slot-pad-y: calc(4px * var(--hd-player-content-zoom, 1));
    --hd-dasham-turnering-bracket-slot-pad-x: calc(8px * var(--hd-player-content-zoom, 1));

    display: flex;
    flex-direction: column;
    padding: var(--hd-dasham-turnering-pad);
    color: var(--hd-text-primary);
    font-family: var(--hd-dasham-portal-font);
  }

  .hd-dasham-portal-turnering__grid {
    display: flex;
    flex-direction: column;
    gap: var(--hd-dasham-turnering-section-gap);
  }

  .hd-dasham-portal-turnering__col {
    display: flex;
    flex-direction: column;
    gap: var(--hd-dasham-turnering-section-gap);
    min-width: 0;
  }

  .hd-dasham-portal-turnering__section {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .hd-dasham-portal-turnering__section-title {
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-1);
    font-size: var(--hd-dasham-turnering-section-title-sz);
    line-height: var(--hd-leading-icon);
    color: var(--hd-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* Tour-card (mine-turneringer entry) */
  .hd-dasham-portal-turnering__tour-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .hd-dasham-portal-turnering__tour-card {
    text-align: left;
    background: rgba(58, 36, 24, 0.30);
    border: 1px solid rgba(106, 74, 42, 0.45);
    border-radius: 6px;
    padding: 10px 12px;
    cursor: pointer;
    font-family: var(--hd-dasham-portal-font);
    color: var(--hd-text-primary);
    transition: var(--hd-transition-fast);
  }

  .hd-dasham-portal-turnering__tour-card:hover {
    border-color: rgba(201, 169, 110, 0.5);
  }

  .hd-dasham-portal-turnering__tour-card--selected {
    background: rgba(201, 169, 110, 0.18);
    border-color: var(--hd-accent-primary);
  }

  .hd-dasham-portal-turnering__tour-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }

  .hd-dasham-portal-turnering__tour-card-name {
    font-size: var(--hd-dasham-turnering-card-name-sz);
    line-height: var(--hd-leading-snug);
    font-weight: var(--hd-weight-bold);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hd-dasham-portal-turnering__tour-card-rank {
    font-size: var(--hd-dasham-turnering-card-rank-sz);
    line-height: var(--hd-leading-tight);
    font-weight: var(--hd-weight-bold);
    color: var(--hd-accent-primary);
    flex-shrink: 0;
  }

  .hd-dasham-portal-turnering__tour-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
    font-size: var(--hd-dasham-turnering-card-meta-sz);
    line-height: var(--hd-leading-snug);
    color: var(--hd-text-tertiary);
  }

  .hd-dasham-portal-turnering__tour-card-format,
  .hd-dasham-portal-turnering__tour-card-round,
  .hd-dasham-portal-turnering__tour-card-wl {
    font-size: var(--hd-dasham-turnering-card-meta-sz);
    line-height: var(--hd-leading-snug);
  }

  /* Detail section */
  .hd-dasham-portal-turnering__detail-head {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--hd-border-subtle);
  }

  .hd-dasham-portal-turnering__detail-title {
    font-size: var(--hd-dasham-turnering-detail-title-sz);
    line-height: var(--hd-leading-snug);
    font-weight: var(--hd-weight-bold);
    color: var(--hd-text-primary);
  }

  .hd-dasham-portal-turnering__detail-meta {
    font-size: var(--hd-dasham-turnering-detail-meta-sz);
    line-height: var(--hd-leading-snug);
    color: var(--hd-text-secondary);
  }

  /* ------------------------------------------------------------ */
  /* Bracket-vis (Phase 2) — singleElimination + shortMode         */
  /* ------------------------------------------------------------ */

  .hd-dasham-portal-turnering__bracket {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
  }

  .hd-dasham-portal-turnering__bracket-title {
    font-size: var(--hd-dasham-turnering-section-title-sz);
    line-height: var(--hd-leading-icon);
    color: var(--hd-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .hd-dasham-portal-turnering__bracket-grid {
    display: flex;
    flex-direction: column;
    gap: var(--hd-dasham-turnering-bracket-round-gap);
  }

  .hd-dasham-portal-turnering__bracket-round {
    display: flex;
    flex-direction: column;
    gap: var(--hd-dasham-turnering-bracket-pairing-gap);
    min-width: 0;
  }

  .hd-dasham-portal-turnering__bracket-round-label {
    font-size: var(--hd-dasham-turnering-bracket-label-sz);
    line-height: var(--hd-leading-icon);
    color: var(--hd-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--hd-weight-bold);
  }

  .hd-dasham-portal-turnering__bracket-round-empty {
    font-size: var(--hd-dasham-turnering-bracket-slot-sz);
    line-height: var(--hd-leading-snug);
    color: var(--hd-text-tertiary);
    font-style: italic;
    padding: var(--hd-dasham-turnering-bracket-slot-pad-y) var(--hd-dasham-turnering-bracket-slot-pad-x);
  }

  .hd-dasham-portal-turnering__bracket-pairing {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--hd-border-subtle);
    border-radius: 4px;
    overflow: hidden;
    background: rgba(245, 230, 198, 0.04);
    transition: border-color var(--hd-motion-fast-out, 0.15s ease),
                background var(--hd-motion-fast-out, 0.15s ease);
  }

  .hd-dasham-portal-turnering__bracket-pairing--mine {
    border-color: var(--hd-accent-primary);
    background: rgba(201, 169, 110, 0.14);
    box-shadow: inset 3px 0 0 0 var(--hd-accent-primary);
  }

  .hd-dasham-portal-turnering__bracket-pairing--pending {
    opacity: 0.65;
  }

  .hd-dasham-portal-turnering__bracket-pairing--bye {
    background: rgba(106, 74, 42, 0.10);
  }

  .hd-dasham-portal-turnering__bracket-slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: var(--hd-dasham-turnering-bracket-slot-pad-y) var(--hd-dasham-turnering-bracket-slot-pad-x);
    font-size: var(--hd-dasham-turnering-bracket-slot-sz);
    line-height: var(--hd-leading-snug);
    color: var(--hd-text-primary);
  }

  .hd-dasham-portal-turnering__bracket-slot--top {
    border-bottom: 1px solid var(--hd-border-subtle);
  }

  .hd-dasham-portal-turnering__bracket-slot--winner {
    font-weight: var(--hd-weight-bold);
    color: var(--hd-accent-primary);
  }

  .hd-dasham-portal-turnering__bracket-slot--bye-empty {
    color: var(--hd-text-tertiary);
    font-style: italic;
  }

  .hd-dasham-portal-turnering__bracket-slot-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
  }

  .hd-dasham-portal-turnering__bracket-slot-badge {
    font-size: var(--hd-dasham-turnering-bracket-badge-sz);
    line-height: var(--hd-leading-icon);
    color: var(--hd-text-tertiary);
    border: 1px solid rgba(212, 160, 80, 0.35);
    border-radius: 999px;
    padding: 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex: 0 0 auto;
  }

  /* Standings table */
  .hd-dasham-portal-turnering__standings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--hd-dasham-turnering-table-sz);
    line-height: var(--hd-leading-snug);
  }

  .hd-dasham-portal-turnering__standings-table th,
  .hd-dasham-portal-turnering__standings-table td {
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid rgba(106, 74, 42, 0.30);
    font-size: var(--hd-dasham-turnering-table-sz);
    line-height: var(--hd-leading-snug);
  }

  .hd-dasham-portal-turnering__standings-table th {
    color: var(--hd-text-tertiary);
    font-weight: var(--hd-weight-regular);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--hd-text-micro);
  }

  .hd-dasham-portal-turnering__td-rank {
    width: 32px;
    color: var(--hd-text-secondary);
  }

  .hd-dasham-portal-turnering__td-points {
    color: var(--hd-accent-primary);
    font-weight: var(--hd-weight-bold);
  }

  .hd-dasham-portal-turnering__row--mine {
    background: rgba(201, 169, 110, 0.14);
    box-shadow: inset 3px 0 0 0 var(--hd-accent-primary);
  }

  .hd-dasham-portal-turnering__row-badge {
    margin-left: 6px;
    font-size: var(--hd-text-micro);
    color: var(--hd-text-tertiary);
    border: 1px solid rgba(212, 160, 80, 0.35);
    border-radius: 999px;
    padding: 0 6px;
    line-height: var(--hd-leading-icon);
  }

  /* Mine matches list */
  .hd-dasham-portal-turnering__matches {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
  }

  .hd-dasham-portal-turnering__matches-title {
    font-size: var(--hd-dasham-turnering-section-title-sz);
    line-height: var(--hd-leading-icon);
    color: var(--hd-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .hd-dasham-portal-turnering__match-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: rgba(58, 36, 24, 0.22);
    border-radius: 4px;
    font-size: var(--hd-dasham-turnering-match-row-sz);
    line-height: var(--hd-leading-snug);
  }

  .hd-dasham-portal-turnering__match-row-label {
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-1);
    font-size: var(--hd-dasham-turnering-match-row-sz);
    line-height: var(--hd-leading-snug);
  }

  .hd-dasham-portal-turnering__match-row-score {
    font-size: var(--hd-dasham-turnering-match-row-sz);
    line-height: var(--hd-leading-snug);
    color: var(--hd-text-tertiary);
    font-variant-numeric: tabular-nums;
  }

  /* Join section */
  .hd-dasham-portal-turnering__join-hint {
    font-size: var(--hd-dasham-turnering-match-row-sz);
    line-height: var(--hd-leading-snug);
    color: var(--hd-text-tertiary);
    font-style: italic;
    padding: 4px 0;
  }

  .hd-dasham-portal-turnering__join-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .hd-dasham-portal-turnering__join-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    background: rgba(58, 36, 24, 0.22);
    border-radius: 4px;
    font-size: var(--hd-dasham-turnering-join-row-sz);
    line-height: var(--hd-leading-snug);
  }

  .hd-dasham-portal-turnering__join-row-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--hd-dasham-turnering-join-row-sz);
    line-height: var(--hd-leading-snug);
  }

  .hd-dasham-portal-turnering__join-row-meta {
    font-size: var(--hd-dasham-turnering-join-row-sz);
    line-height: var(--hd-leading-snug);
    color: var(--hd-text-tertiary);
  }

  .hd-dasham-portal-turnering__join-row-badge {
    font-size: var(--hd-text-micro);
    line-height: var(--hd-leading-icon);
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(201, 169, 110, 0.18);
    border: 1px solid var(--hd-accent-primary);
    color: var(--hd-accent-primary);
    flex-shrink: 0;
  }

  .hd-dasham-portal-turnering__join-row-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hd-space-1);
    padding: 4px 12px;
    border-radius: 999px;
    font-family: var(--hd-dasham-portal-font);
    font-size: var(--hd-dasham-turnering-join-row-sz);
    line-height: var(--hd-leading-snug);
    cursor: pointer;
    transition: var(--hd-transition-fast);
    min-height: 44px; /* WCAG 2.5.5 touch-target */
    background: transparent;
    border: 1px solid var(--hd-accent-primary);
    color: var(--hd-accent-primary);
    flex-shrink: 0;
  }

  .hd-dasham-portal-turnering__join-row-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--hd-accent-primary) 14%, var(--hd-surface-base));
  }

  .hd-dasham-portal-turnering__join-row-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .hd-dasham-portal-turnering__join-row-status {
    font-size: var(--hd-text-micro);
    line-height: var(--hd-leading-snug);
    color: var(--hd-text-tertiary);
    flex-shrink: 0;
  }

  .hd-dasham-portal-turnering__join-row-status--error {
    color: var(--hd-accent-error);
  }

  .hd-dasham-portal-turnering__empty {
    padding: 12px 10px;
    font-size: var(--hd-dasham-turnering-empty-sz);
    line-height: var(--hd-leading-snug);
    color: var(--hd-text-tertiary);
    font-style: italic;
    text-align: center;
  }

  .hd-dasham-portal-turnering__error {
    padding: 10px 12px;
    background: color-mix(in srgb, var(--hd-accent-error) 12%, var(--hd-surface-base));
    border: 1px solid var(--hd-accent-error);
    border-radius: 6px;
    color: var(--hd-accent-error);
    font-size: var(--hd-dasham-turnering-match-row-sz);
    line-height: var(--hd-leading-snug);
  }

  /* ============================================================ */
  /* Landscape (≥640px) — lobby grid + match-grid + turnering 2-pane */
  /* ============================================================ */

  /* Lobby: 2-column grid (incoming+outgoing left · opponents right).
   * Mirrors the kort/dashboard breakpoint (640px) for visual consistency. */
  @container hd-dasham-portal (min-width: 640px) {
    .hd-dasham-portal-spil__grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: var(--hd-dasham-spil-section-gap);
      align-items: start;
    }

    /* Live match: board-max er nu styret af battlefield-grid (container queries
     * på __battlefield), så viewport-baseret override af board-max er overflødig.
     * Den tidligere landscape-bump til 480px er fjernet — battlefield falder
     * naturligt tilbage til trin 2/3 hvis container er smal. */

    /* Turnering: 2-pane (260px tour-list + 1fr detail) — mirrors the kort
     * landscape pattern for visual consistency. */
    .hd-dasham-portal-turnering__grid {
      display: grid;
      grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
      gap: var(--hd-dasham-turnering-section-gap);
      align-items: start;
    }

    /* Bracket-grid: rounds lægges side-om-side venstre→højre (klassisk
     * elimination-tree). Hver runde får lige meget plads; pairings stacker
     * stadig vertikalt indenfor en round-kolonne. Horizontal scroll når
     * total-bredden overskrider container — tournaments med mange runder
     * (e.g. 16-deltagere → 4 runder) overflyder pænt frem for at kompakte. */
    .hd-dasham-portal-turnering__bracket-grid {
      flex-direction: row;
      align-items: stretch;
      gap: var(--hd-dasham-turnering-section-gap);
      overflow-x: auto;
    }

    .hd-dasham-portal-turnering__bracket-round {
      flex: 1 1 0;
      min-width: 140px;
    }

    /* Reposition top/bottom-border: landscape stacker pairings vertikalt,
     * så top-bottom-border bliver pairing-intern separator igen — uændret
     * fra portrait. Slot--top behold border-bottom. */
  }

  /* ============================================================ */
  /* 🎲 Dice view (Plan G — Tab 5 Terningeslagsmodus)              */
  /* ============================================================ */

  /* Local tokens — typography-coverage gate kræver --hd-* tokens for raw font-
   * size + line-height. Layout-dimensioner (pad, gap, border-radius) gentager
   * mønstret fra turnering-section. */
  .hd-dasham-portal-dice {
    --hd-dasham-dice-pad:                calc(12px * var(--hd-player-content-zoom, 1));
    --hd-dasham-dice-section-gap:        calc(14px * var(--hd-player-content-zoom, 1));
    --hd-dasham-dice-formula-min-h:      calc(48px * var(--hd-player-content-zoom, 1));
    --hd-dasham-dice-formula-label-sz:   var(--hd-text-ui-small);
    --hd-dasham-dice-formula-empty-sz:   var(--hd-text-body-small);
    --hd-dasham-dice-formula-token-sz:   var(--hd-text-ui);
    --hd-dasham-dice-formula-pad-y:      calc(6px * var(--hd-player-content-zoom, 1));
    --hd-dasham-dice-formula-pad-x:      calc(10px * var(--hd-player-content-zoom, 1));
    --hd-dasham-dice-die-btn-sz:         calc(16px * var(--hd-player-content-zoom, 1));
    --hd-dasham-dice-die-btn-h:          calc(48px * var(--hd-player-content-zoom, 1));
    --hd-dasham-dice-die-btn-min-w:      calc(48px * var(--hd-player-content-zoom, 1));
    --hd-dasham-dice-die-glyph-sz:       calc(40px * var(--hd-player-content-zoom, 1));
    --hd-dasham-dice-font-result-min-h:  calc(64px * var(--hd-player-content-zoom, 1));
    --hd-dasham-dice-modifier-btn-sz:    calc(20px * var(--hd-player-content-zoom, 1));
    --hd-dasham-dice-modifier-value-sz:  calc(24px * var(--hd-player-content-zoom, 1));
    --hd-dasham-dice-roll-btn-sz:        calc(16px * var(--hd-player-content-zoom, 1));
    --hd-dasham-dice-roll-btn-h:         calc(56px * var(--hd-player-content-zoom, 1));
    --hd-dasham-dice-history-title-sz:   var(--hd-text-ui-small);
    --hd-dasham-dice-history-empty-sz:   var(--hd-text-ui-small);
    --hd-dasham-dice-history-row-sz:     var(--hd-text-ui-small);
    --hd-dasham-dice-history-time-sz:    var(--hd-text-ui-small);
    --hd-dasham-dice-history-total-sz:   var(--hd-text-ui);

    display: flex;
    flex-direction: column;
    gap: var(--hd-dasham-dice-section-gap);
    padding: var(--hd-dasham-dice-pad);
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Formel-row: label + content (tokens) + ryd-knap. Content wrapper er flex
   * så tokens kan flow på flere linjer ved mange terninger. */
  .hd-dasham-portal-dice__formula-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .hd-dasham-portal-dice__formula-label {
    font-size: var(--hd-dasham-dice-formula-label-sz);
    line-height: var(--hd-leading-icon);
    color: var(--hd-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .hd-dasham-portal-dice__formula-content {
    position: relative;
    flex: 1 1 auto;
    min-height: var(--hd-dasham-dice-formula-min-h);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: var(--hd-dasham-dice-formula-pad-y) calc(var(--hd-dasham-dice-formula-pad-x) + 42px) var(--hd-dasham-dice-formula-pad-y) var(--hd-dasham-dice-formula-pad-x);
    border: 1px solid var(--hd-border-subtle);
    border-radius: 6px;
    background: rgba(245, 230, 198, 0.04);
  }

  .hd-dasham-portal-dice__formula-empty {
    font-size: var(--hd-dasham-dice-formula-empty-sz);
    line-height: var(--hd-leading-snug);
    /* primary — placeholderen skal være AAA-læsbar på den lyse-tinted formula-boks;
     * tertiary lå ~5:1 og secondary kun ~6.4:1 (boksens svage lys-tint hæver effektiv-bg). */
    color: var(--hd-text-primary);
    font-style: italic;
  }

  .hd-dasham-portal-dice__formula-token {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: rgba(201, 169, 110, 0.22);
    border: 1px solid var(--hd-accent-primary);
    border-radius: 999px;
    color: var(--hd-accent-primary);
    font-family: var(--hd-dasham-portal-font);
    font-size: var(--hd-dasham-dice-formula-token-sz);
    line-height: var(--hd-leading-icon);
    cursor: pointer;
    transition: var(--hd-transition-fast);
    white-space: nowrap;
  }

  .hd-dasham-portal-dice__formula-token:hover {
    background: rgba(201, 169, 110, 0.32);
  }

  .hd-dasham-portal-dice__formula-token--modifier {
    cursor: default;
    background: transparent;
    border-color: var(--hd-border-subtle);
    color: var(--hd-text-primary);
  }

  .hd-dasham-portal-dice__formula-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--hd-border-subtle);
    border-radius: 50%;
    color: var(--hd-text-secondary);
    font-family: var(--hd-dasham-portal-font);
    font-size: calc(18px * var(--hd-player-content-zoom, 1));
    line-height: var(--hd-leading-icon);
    cursor: pointer;
    transition: var(--hd-transition-fast);
  }

  .hd-dasham-portal-dice__formula-clear:hover:not(:disabled) {
    border-color: var(--hd-accent-primary);
    color: var(--hd-accent-primary);
  }

  .hd-dasham-portal-dice__formula-clear:disabled {
    /* Dæmpet via solide tokens i stedet for opacity: 0.4 — auditten måler (bevidst)
     * også disabled-kontroller, og opacity ville trække enhver tekst under AAA.
     * Solid surface-1 (mørk) + tertiary = ≥7:1 (tertiary på den lysere mount-surface-3
     * lå kun ~6:1) og forbliver tydeligt inaktiv. */
    background: var(--hd-surface-1);
    color: var(--hd-text-tertiary);
    border-color: var(--hd-border-subtle);
    cursor: not-allowed;
  }

  /* Dice-grid: 7 fritstående quick-roll terninger. Flex-wrap giver 4 på første
   * række og 3 centreret på næste, med samme vandrette fordeling i begge rækker. */
  .hd-dasham-portal-dice__dice-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  /* Hver knap er en helfarvet SVG-mask terning i accent-farve. */
  .hd-dasham-portal-dice__dice-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--hd-dasham-dice-die-btn-min-w);
    min-height: var(--hd-dasham-dice-die-btn-h);
    flex: 0 1 calc((100% - 24px) / 4);
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--hd-accent-primary);   /* terningformens fyldfarve (currentColor) */
    cursor: pointer;
    transition: var(--hd-transition-fast);
  }

  /* Terningformen fra PlayerIconRegistry/Game-icons.net SVG assets. */
  .hd-dasham-portal-dice__die-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--hd-dasham-dice-die-glyph-sz);
    line-height: var(--hd-leading-icon);
    color: inherit;
  }
  .hd-dasham-portal-dice__die-glyph-unit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
  }
  .hd-dasham-portal-dice__die-glyph-icon {
    --hd-player-icon-size: 1em;
  }

  /* d100 vises som to tætstående d10-terninger. */
  .hd-dasham-portal-dice__die-glyph--d100 {
    font-size: calc(34px * var(--hd-player-content-zoom, 1));
  }
  .hd-dasham-portal-dice__die-glyph--d100 .hd-dasham-portal-dice__die-glyph-unit + .hd-dasham-portal-dice__die-glyph-unit {
    margin-left: calc(-8px * var(--hd-player-content-zoom, 1));
  }

  .hd-dasham-portal-dice__dice-btn:hover:not(:disabled) {
    color: var(--hd-accent-hover, var(--hd-accent-primary));
    filter: brightness(1.12);
  }

  .hd-dasham-portal-dice__dice-btn:focus-visible {
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: 2px;
  }

  .hd-dasham-portal-dice__dice-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* Modifier-row: − / value / + centered group. */
  .hd-dasham-portal-dice__modifier-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  .hd-dasham-portal-dice__modifier-btn {
    width: 44px;
    height: 44px;
    background: rgba(245, 230, 198, 0.06);
    border: 1px solid var(--hd-border-subtle);
    border-radius: 50%;
    color: var(--hd-text-primary);
    font-family: var(--hd-dasham-portal-font);
    font-size: var(--hd-dasham-dice-modifier-btn-sz);
    line-height: var(--hd-leading-icon);
    cursor: pointer;
    transition: var(--hd-transition-fast);
  }

  .hd-dasham-portal-dice__modifier-btn:hover:not(:disabled) {
    background: rgba(201, 169, 110, 0.18);
    border-color: var(--hd-accent-primary);
    color: var(--hd-accent-primary);
  }

  .hd-dasham-portal-dice__modifier-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .hd-dasham-portal-dice__modifier-value {
    min-width: 48px;
    text-align: center;
    font-family: var(--hd-dasham-portal-font);
    font-size: var(--hd-dasham-dice-modifier-value-sz);
    line-height: var(--hd-leading-snug);
    color: var(--hd-accent-primary);
    font-weight: var(--hd-weight-bold);
  }

  /* Primary CTA — stor knap, gold-tone. */
  .hd-dasham-portal-dice__roll-btn {
    height: var(--hd-dasham-dice-roll-btn-h);
    background: rgba(201, 169, 110, 0.22);
    border: 1px solid var(--hd-accent-primary);
    border-radius: 10px;
    color: var(--hd-accent-primary);
    font-family: var(--hd-dasham-portal-font);
    font-size: var(--hd-dasham-dice-roll-btn-sz);
    line-height: var(--hd-leading-icon);
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: var(--hd-transition-fast);
    font-weight: var(--hd-weight-bold);
  }

  .hd-dasham-portal-dice__roll-btn:hover:not(:disabled) {
    background: rgba(201, 169, 110, 0.32);
  }

  .hd-dasham-portal-dice__roll-btn:focus-visible {
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: 2px;
  }

  .hd-dasham-portal-dice__roll-btn:disabled {
    /* Dæmpet via solide tokens i stedet for opacity: 0.4 (samme grund som
     * formula-clear). Solid surface-bg + tertiary tekst = ≥7:1 og tydeligt inaktiv. */
    background: var(--hd-surface-1);
    color: var(--hd-text-tertiary);
    border-color: var(--hd-border-subtle);
    cursor: not-allowed;
  }

  /* Roll-row: roll-btn (vokser) + valgfri ✕ clear-btn til højre (A3). */
  .hd-dasham-portal-dice__roll-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--hd-space-2, 8px);
  }
  .hd-dasham-portal-dice__roll-row .hd-dasham-portal-dice__roll-btn {
    flex: 1 1 auto;
  }

  /* ✕ clear-btn — fjerner 3D-terningerne fra skærmen; vises kun efter et slag. */
  .hd-dasham-portal-dice__dice-clear-btn {
    flex: 0 0 auto;
    min-width: 44px;   /* WCAG 2.5.5 touch-target */
    height: var(--hd-dasham-dice-roll-btn-h);
    background: var(--hd-surface-1);
    border: 1px solid var(--hd-border-accent);
    border-radius: 10px;
    color: var(--hd-text-secondary);
    font-size: var(--hd-dasham-dice-roll-btn-sz);
    line-height: var(--hd-leading-icon);
    cursor: pointer;
    transition: var(--hd-transition-fast);
  }
  .hd-dasham-portal-dice__dice-clear-btn:hover:not(:disabled) {
    background: var(--hd-surface-2);
    color: var(--hd-text-primary);
  }
  .hd-dasham-portal-dice__dice-clear-btn:focus-visible {
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: 2px;
  }

  /* 2D-resultat-mount (foretagende pulje + font-resultat). Reserver altid plads
   * til en fuld terning (krav 2: "der skal altid være plads … også mens de slås")
   * og clip aldrig pop/scale-reveal-animationen. */
  .hd-dasham-portal-dice__font-result {
    min-height: calc(var(--hd-dasham-dice-font-result-min-h) + 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }

  .hd-dasham-portal-dice__result-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    color: var(--hd-accent-primary);
    text-align: center;
  }

  .hd-dasham-portal-dice__result-total {
    font-family: var(--hd-dasham-portal-font);
    font-size: calc(56px * var(--hd-player-content-zoom, 1));
    line-height: var(--hd-leading-display);
    font-weight: var(--hd-weight-extrabold);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 22px color-mix(in srgb, var(--hd-accent-primary) 55%, transparent);
  }

  .hd-dasham-portal-dice__result-formula {
    max-width: 100%;
    font-family: var(--hd-dasham-portal-font);
    font-size: calc(14px * var(--hd-player-content-zoom, 1));
    line-height: var(--hd-leading-snug);
    color: var(--hd-text-secondary);
    overflow-wrap: anywhere;
  }

  .hd-dasham-portal-dice__result-dice {
    display: flex;
    justify-content: center;
    overflow: visible;
  }

  /* Historik — scrollable liste. */
  .hd-dasham-portal-dice__history {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
  }

  .hd-dasham-portal-dice__history-title {
    font-size: var(--hd-dasham-dice-history-title-sz);
    line-height: var(--hd-leading-icon);
    color: var(--hd-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .hd-dasham-portal-dice__history-empty {
    font-size: var(--hd-dasham-dice-history-empty-sz);
    line-height: var(--hd-leading-snug);
    color: var(--hd-text-tertiary);
    font-style: italic;
    padding: 8px 4px;
  }

  .hd-dasham-portal-dice__history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .hd-dasham-portal-dice__history-row {
    display: block;
  }

  .hd-dasham-portal-dice__history-btn {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid var(--hd-border-subtle);
    border-radius: 6px;
    color: var(--hd-text-primary);
    font-family: var(--hd-dasham-portal-font);
    font-size: var(--hd-dasham-dice-history-row-sz);
    line-height: var(--hd-leading-snug);
    text-align: left;
    cursor: pointer;
    transition: var(--hd-transition-fast);
  }

  .hd-dasham-portal-dice__history-btn:hover {
    border-color: var(--hd-accent-primary);
    background: rgba(201, 169, 110, 0.10);
  }

  .hd-dasham-portal-dice__history-time {
    font-size: var(--hd-dasham-dice-history-time-sz);
    line-height: var(--hd-leading-icon);
    color: var(--hd-text-tertiary);
    font-variant-numeric: tabular-nums;
  }

  .hd-dasham-portal-dice__history-formula {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* Når cellen indeholder den halve-størrelse terninge-grafik (ikke tekst-
   * fallback) skal den ikke clippe/ellipsere — terningerne wrapper selv via
   * .hd-dice-font (krav 1/2). */
  .hd-dasham-portal-dice__history-formula--graphic {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    display: flex;
    align-items: center;
  }

  .hd-dasham-portal-dice__history-arrow {
    color: var(--hd-text-tertiary);
  }

  .hd-dasham-portal-dice__history-total {
    font-size: var(--hd-dasham-dice-history-total-sz);
    line-height: var(--hd-leading-icon);
    color: var(--hd-accent-primary);
    font-weight: var(--hd-weight-bold);
    font-variant-numeric: tabular-nums;
  }

  /* KampDice3D-mount — overlay; engine selv styler hide/show via inline display
   * + opacity (kamp-dice3d.js linje 234-236). Base = full-bleed (admin/andre
   * kontekster); spillerportalen overskriver til området MELLEM rullerne nedenfor. */
  .hd-dasham-portal-dice__dice3d-mount {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--hd-z-modal, 1000);
  }

  /* Spillerportal (#2/A2): begræns terning-fysikkens område til det synlige
   * pergament MELLEM skriftrullerne — top-bar = toprulle, tab-bar = bundrulle —
   * ved at spejle .hd-player-content-mount (player-content-zoom.css). DiceBox
   * sætter væg-barrierer ved 93 % af container-højden (DiceBox.js:155-173), så
   * når containeren kun dækker det synlige felt, lander terningerne aldrig bag
   * rullerne. kamp-dice3d.js måler clientWidth/Height på containeren ved preload. */
  body.hd-player-mode-player-portal .hd-dasham-portal-dice__dice3d-mount {
    inset: auto;
    top: var(--player-top-bar-height, 48px);
    left: 0;
    right: 0;
    bottom: var(--player-tab-bar-size, 56px);   /* inkl. safe-area-inset-bottom */
  }

  /* Landskab: tab-bar er en flad lodret bar i højre kant (ingen bundrulle) —
   * ryd højre kant i stedet for bunden (matcher player-tab-bar.css landskab). */
  @media (min-aspect-ratio: 1/1) {
    body.hd-player-mode-player-portal .hd-dasham-portal-dice__dice3d-mount {
      bottom: 0;
      right: calc(56px + env(safe-area-inset-right, 0px));
    }
  }

  /* Initial hidden state — engine flipper til display:block ved første roll(). */
  .hd-dasham-portal-dice__dice3d-mount--hidden {
    display: none;
  }

  /* Landscape (≥640px container): history flytter til højre side-panel.
   * Mobile portrait beholder lodret stack. */
  @container hd-dasham-portal (min-width: 640px) {
    .hd-dasham-portal-dice {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(220px, 360px);
      grid-template-rows: auto auto auto auto;
      column-gap: var(--hd-dasham-dice-section-gap);
      row-gap: var(--hd-dasham-dice-section-gap);
      align-items: start;
    }

    .hd-dasham-portal-dice__formula-row,
    .hd-dasham-portal-dice__dice-grid,
    .hd-dasham-portal-dice__modifier-row,
    .hd-dasham-portal-dice__roll-row,
    .hd-dasham-portal-dice__font-result {
      grid-column: 1 / 2;
    }

    .hd-dasham-portal-dice__history {
      grid-column: 2 / 3;
      grid-row: 1 / 5;
      max-height: 100%;
      overflow-y: auto;
    }
  }

} /* end @layer components */