
.rd { display: grid; gap: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); scroll-margin-top: 88px; }
.rd-topp { display: flex; flex-wrap: nowrap; align-items: start; justify-content: space-between; gap: var(--s-3); }
.rd-topp > .stack { min-width: 0; }
.rd-topp h2 { font-size: var(--t-2); }

.rd-topp h2:focus, .rd-topp h2:focus-visible { outline: none; }
.rd-rad { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-4); }

#rd-plass .rd-rad { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.rd-opne { display: inline-flex; align-items: center; gap: 8px; }
.rd-opne svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rd-tal { min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--r-pill); display: inline-grid; place-items: center; background: var(--surface-2); color: var(--ink-2); font: 650 .8125rem/1 var(--font-text); font-variant-numeric: tabular-nums; }
.rd-opne[aria-expanded="true"] { background: var(--surface-2); border-color: var(--ink); }
.rd-opne[aria-expanded="true"] .rd-tal { background: var(--ink); color: var(--ground); }
.rd-kort { display: grid; grid-template-rows: auto 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; min-width: 0; }
.rd-kort.rd-i-bruk { border-color: var(--go); box-shadow: 0 0 0 1px var(--go) inset; }
.rd-plakat { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #0b0c10; cursor: pointer; overflow: hidden; }
.rd-plakat img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rd-plakat-tom { position: absolute; inset: 0; display: grid; place-items: center; color: #9AA0AD; font-size: var(--t-small);
  background: linear-gradient(100deg, #15171e 30%, #22252f 50%, #15171e 70%); background-size: 220% 100%; animation: rd-vask 2.4s linear infinite; }
@keyframes rd-vask { from { background-position: 100% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .rd-plakat-tom { animation: none; } }
.rd-spel-ikon { position: absolute; left: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(12, 13, 17, .78); color: #fff; }
.rd-spel-ikon svg { width: 20px; height: 20px; margin-left: 2px; }
.rd-plakat:hover .rd-spel-ikon, .rd-plakat:focus-visible .rd-spel-ikon { background: rgba(12, 13, 17, .95); }
.rd-kort-tekst { display: grid; gap: var(--s-2); padding: var(--s-4); align-content: start; }
.rd-namn { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); font-size: var(--t-3); }
.rd-score { font: 650 1.25rem/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink-2); padding: 6px 10px; border-radius: var(--r-pill); background: var(--surface-2); }
.rd-score.rd-over { color: var(--go); background: var(--go-soft); }
.rd-score.rd-umaalt { font-family: inherit; font-size: var(--t-small); font-weight: 500; color: var(--ink-3); }
.rd-under { color: var(--ink-3); font-size: var(--t-small); }
.rd-merknad { color: var(--ink-2); font-size: var(--t-small); line-height: 1.5; }
.rd-sjef { font-weight: 650; color: var(--ink); }
.rd-handling { margin-top: var(--s-2); }
.rd-handling .btn { min-height: var(--target); }
.rd-merke-bruk { min-height: var(--target); padding: 0 var(--s-4); font-size: var(--t-small); }
.rd-spor { padding: var(--s-3); border-radius: 14px; background: var(--surface-2); }
.rd-spor p { font-size: var(--t-small); color: var(--ink-2); }
.rd-meld { font-size: var(--t-small); color: var(--ink-2); }
.rd-verktoy { gap: var(--s-3); }
.rd-lyd { border-left-color: var(--go); }


.rd-sammen { display: grid; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); }
.rd-sammen-topp { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.rd-kontroll { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; }
.rd-kontroll .chips { grid-column: 1 / -1; }
.rd-kontroll input[type="range"] { width: 100%; min-height: 48px; accent-color: var(--ink); }
.rd-klokke { font: 600 var(--t-small)/1 var(--font-text); font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.rd-scene-mount .sp { position: relative; }


.rd-tilbake { border: 1px solid var(--line); border-radius: var(--r-card); padding: 0 var(--s-4); background: var(--surface); }
.rd-tilbake > summary { min-height: var(--target); display: flex; align-items: center; cursor: pointer; font-weight: 600; list-style-position: inside; }
.rd-tilbake[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: var(--s-4); }
.rd-tilbake > .stack { padding-bottom: var(--s-4); }
.rd-tilbake .textarea { width: 100%; }
.rd-sendt { color: var(--ink-2); }


.rd-off-l { display: flex; align-items: center; gap: var(--s-3); min-height: var(--target); font-weight: 600; cursor: pointer; }
.rd-off-l input { width: 22px; height: 22px; accent-color: var(--go); }


.rd-spelar { width: min(1100px, calc(100vw - 32px)); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--ink); }
.rd-spelar::backdrop { background: rgba(8, 9, 12, .72); }
.rd-spelar-topp { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.rd-spelar-namn { font-weight: 650; }
.rd-spelar-skjerm { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.rd-spelar-skjerm iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


.rd-made main { padding-block: var(--s-7) var(--s-8); }
.rd-artikkel { display: grid; gap: var(--s-7); }
.rd-hovud { max-width: 46rem; }
.rd-hovud h1 { font-size: var(--t-1); }
.rd-sammen-off, .rd-artikkel .rd-sammen { display: grid; gap: var(--s-3); }
.rd-scene { position: relative; min-height: 120px; border-radius: var(--r-film); overflow: hidden; background: #0b0c10; box-shadow: var(--lift-film); }
.rd-scene-plakat { position: absolute; inset: 0; z-index: 2; }
.rd-scene-plakat img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-scene:has(.rd-scene-plakat:not([hidden])) { aspect-ratio: 16 / 9; }

.rd-tal-rad { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.rd-tal-rad li { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink-2); font-size: var(--t-small); }
.rd-tal-rad .rd-score { font-size: 1rem; }
.rd-bar { padding-left: var(--s-4); border-left: 1px solid var(--line); }
.rd-bar-tal { font: 650 1rem/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); padding: 6px 10px; border-radius: var(--r-pill); border: 1px solid var(--ink-3); }
.rd-bar-ord { color: var(--ink-3); }
@media (max-width: 520px) { .rd-bar { padding-left: 0; border-left: 0; flex-basis: 100%; } }

.rd-lyd-rad { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.rd-lyd-knapp { display: inline-flex; align-items: center; gap: 8px; min-height: var(--target); }
.rd-lyd-knapp svg, .rd-lyd-en svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rd-lyd-knapp[aria-pressed="true"], .rd-lyd-en[aria-pressed="true"] { background: var(--surface-2); border-color: var(--ink); }
.rd-lyd-merk { grid-column: 1 / -1; color: var(--ink-3); font-size: var(--t-small); margin: 0; }
.rd-utan-lyd { font-style: normal; }
.rd-spelar-topp .row { align-items: center; gap: var(--s-2); }
.rd-spelar-merk { color: var(--ink-3); font-size: var(--t-small); margin: 0; }
.rd-lenke { display: contents; color: inherit; text-decoration: none; }
.rd-rad-indeks .rd-kort { cursor: pointer; }
.rd-cta { max-width: 46rem; }
.rd-fot { padding-block: var(--s-6); border-top: 1px solid var(--line); }
@media (max-width: 860px) {
  .rd-rad, #rd-plass .rd-rad { grid-template-columns: minmax(0, 1fr); }
  .rd-made main { padding-block: var(--s-6) var(--s-7); }
}
