/* TV-visning: 16:9-scene, mørk aubergine, teal/fersken-aksenter, røde lyn. Størrelser i cqw så alt skalerer med skjermen. */
.tv-wrap { --tv-bg: #160b18; --tv-bg2: #2a1430; --tv-panel: #24122a; --tv-line: #3d2544; --tv-ink: #f6eef6; --tv-mut: #bfa9c3; --tv-acc: #ea412a; --tv-acc2: #f0694d; --tv-teal: #a0d8d8; --tv-peach: #f5d5c8; --tv-gold: #fce583;
  font-family: Roboto, var(--font-anthropic-sans), system-ui, sans-serif; color: var(--tv-ink); padding: 0; }
.tv-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding: 10px max(14px, env(safe-area-inset-left, 0px)); background: #f6f6f6; }
.ff--dark ~ .tv-wrap .tv-bar, .tv-wrap.dark .tv-bar { background: #1b0f1c; }
.tv-btn { border: 0; border-radius: 999px; background: #472449; color: #fff; font: inherit; font-size: 14px; font-weight: 600; padding: 10px 18px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.tv-btn.alt { background: transparent; color: #472449; border: 2px solid #472449; }
.tv-wrap.dark .tv-btn.alt { color: #f1dff2; border-color: #f1dff2; }
.tv-btn:focus-visible { outline: 2px solid var(--tv-acc); outline-offset: 3px; }

.tv-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; container-type: size; overflow: hidden; color: var(--tv-ink);
  background: radial-gradient(70% 90% at 18% 55%, #3a1b40 0%, transparent 60%), radial-gradient(60% 70% at 95% 0%, #2c3d44 0%, transparent 55%), linear-gradient(160deg, var(--tv-bg2), var(--tv-bg) 60%); }
.tv-wrap:fullscreen { background: #000; display: grid; place-items: center; }
.tv-wrap:fullscreen .tv-bar { display: none; }
.tv-wrap:fullscreen .tv-stage { width: min(100vw, 177.78vh); }

.tv-head { position: absolute; inset: 0 0 auto 0; height: 9cqh; display: flex; align-items: center; justify-content: space-between; padding: 0 2.2cqw;
  background: linear-gradient(90deg, var(--tv-teal), var(--tv-peach)); color: #472449; }
.tv-title { display: flex; align-items: baseline; gap: 1.2cqw; }
.tv-title h1 { margin: 0; font-family: "Lust Regular", var(--font-anthropic-serif), Georgia, serif; font-weight: 400; font-size: 3.4cqw; line-height: 1; }
.tv-title span { font-size: 1.15cqw; font-weight: 500; }
.tv-live { display: flex; align-items: center; gap: 1.6cqw; font-size: 1.15cqw; font-weight: 600; }
.tv-live .dot { width: .8cqw; height: .8cqw; border-radius: 50%; background: var(--tv-acc); box-shadow: 0 0 0 0 #ea412a99; }
@media (prefers-reduced-motion: no-preference) { .tv-live .dot { animation: tvpulse 1.6s ease-out infinite; } }
@keyframes tvpulse { to { box-shadow: 0 0 0 1cqw #ea412a00; } }
.tv-clock { font-variant-numeric: tabular-nums; font-size: 1.9cqw; font-weight: 700; }

.tv-grid { position: absolute; inset: 9cqh 0 0 0; display: grid; grid-template-columns: 34% 29% 37%; grid-template-rows: minmax(0, 1fr); }
.tv-mapcol { position: relative; }
.tv-map, .tv-bolts { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tv-map path.fy { stroke: #160b18; stroke-width: 1; }
.tv-map path.fy.hit { stroke: var(--tv-gold); stroke-width: 2.4; }
.tv-map text { font-size: 1.05cqw; font-weight: 700; fill: #fff; paint-order: stroke; stroke: #160b18; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.tv-map circle.st { fill: var(--tv-teal); fill-opacity: .85; stroke: #160b18; stroke-width: .8; }
.tv-toast { position: absolute; left: 1.4cqw; right: 1.4cqw; bottom: 2cqh; display: flex; gap: .9cqw; align-items: center; padding: 1.1cqh 1.1cqw; border-radius: 1cqw;
  background: #ffffff; color: #472449; box-shadow: 0 1cqh 3cqh #0008; font-size: 1.15cqw; opacity: 0; transform: translateY(1.5cqh); transition: opacity .4s, transform .4s; }
.tv-toast.on { opacity: 1; transform: none; }
.tv-toast b { font-weight: 700; }
.tv-toast .z { font-size: 2cqw; color: var(--tv-acc); line-height: 1; }
.tv-toast .sub { display: block; color: #5e6370; font-size: .95cqw; }
.tv-idle { position: absolute; left: 1.4cqw; top: 1.6cqh; font-size: .95cqw; color: var(--tv-mut); max-width: 80%; }

.tv-col { padding: 2cqh 1.4cqw 3cqh 0; display: flex; flex-direction: column; gap: 1.4cqh; min-width: 0; min-height: 0; overflow: hidden; }
.tv-mapcol { min-height: 0; overflow: hidden; }
.tv-card { background: color-mix(in srgb, var(--tv-panel) 88%, transparent); border: 1px solid var(--tv-line); border-radius: 1cqw; padding: 1.6cqh 1.2cqw; min-width: 0; }
.tv-card h2 { margin: 0 0 1cqh; font-size: 1.05cqw; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tv-teal); }
.tv-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 1cqw; }
.tv-total .n { font-family: var(--font-anthropic-serif), Georgia, serif; font-size: 5.4cqw; line-height: .95; color: #fff; font-variant-numeric: tabular-nums; }
.tv-total .s { text-align: right; font-size: 1cqw; color: var(--tv-mut); line-height: 1.5; }
.tv-total .s b { color: var(--tv-peach); font-size: 1.5cqw; }
.tv-total .n.bump { animation: tvbump .6s ease-out; }
@keyframes tvbump { 30% { color: var(--tv-gold); transform: scale(1.04); } }

.tv-rows { display: flex; flex-direction: column; gap: .75cqh; }
.tv-row { display: grid; grid-template-columns: 9.5cqw 1fr 3.2cqw 3.6cqw; align-items: center; gap: .6cqw; font-size: 1cqw; }
.tv-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-row .bar { height: 1.1cqh; border-radius: 99px; background: #ffffff14; overflow: hidden; }
.tv-row .bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--tv-teal), var(--tv-peach)); transition: width .8s ease; }
.tv-row.top .bar i { background: linear-gradient(90deg, var(--tv-acc2), var(--tv-acc)); }
.tv-row .c { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.tv-row .p { text-align: right; color: var(--tv-mut); font-variant-numeric: tabular-nums; }
.tv-row.flash .nm { color: var(--tv-gold); }
.tv-fylker { flex: 1; min-height: 0; }
.tv-fylker .tv-rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.2cqw; row-gap: .7cqh; grid-auto-flow: column; grid-template-rows: repeat(8, auto); }
.tv-fylker .tv-row { font-size: .88cqw; grid-template-columns: 1fr 2.4cqw 3.1cqw; gap: .4cqw; }
.tv-fylker .tv-row .bar { display: none; }
.tv-fylker .tv-row.top .nm { color: var(--tv-peach); font-weight: 600; }

.tv-split { display: flex; height: 3.2cqh; border-radius: 99px; overflow: hidden; font-size: .95cqw; font-weight: 700; }
.tv-split div { display: flex; align-items: center; padding: 0 .8cqw; white-space: nowrap; transition: flex-grow .8s ease; min-width: 0; overflow: hidden; }
.tv-split .a { background: var(--tv-acc); color: #fff; }
.tv-split .b { background: var(--tv-teal); color: #472449; justify-content: flex-end; }
.tv-splitlbl { display: flex; justify-content: space-between; font-size: .9cqw; color: var(--tv-mut); margin-top: .6cqh; }

.tv-cat { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; }
.tv-cat .k { font-size: .95cqw; color: var(--tv-mut); text-transform: uppercase; letter-spacing: .08em; }
.tv-cat .v { font-family: "Lust Regular", var(--font-anthropic-serif), Georgia, serif; font-size: 2.4cqw; color: #fff; line-height: 1.1; }
.tv-cat .m { font-size: 1cqw; color: var(--tv-peach); text-align: right; }
.tv-prog { height: .5cqh; background: #ffffff14; border-radius: 99px; overflow: hidden; margin-top: .8cqh; }
.tv-prog i { display: block; height: 100%; width: 0; background: var(--tv-acc); }
.tv-tops { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqw; flex: 1; min-height: 0; }
.tv-tops > section { min-width: 0; }
.tv-top { display: flex; flex-direction: column; gap: .5cqh; }
.tv-trow { display: grid; grid-template-columns: 1.7cqw 2.8cqw 1fr 2.2cqw; align-items: center; gap: .5cqw; font-size: .92cqw; min-height: 6cqh; }
.tv-trow .r { width: 1.7cqw; height: 1.7cqw; border-radius: 50%; display: grid; place-items: center; font-size: .8cqw; font-weight: 700; border: 2px solid #ffffff33; color: var(--tv-mut); }
.tv-trow.r1 .r { background: var(--tv-acc); border-color: var(--tv-acc); color: #fff; }
.tv-trow.r2 .r, .tv-trow.r3 .r { border-color: var(--tv-acc); color: var(--tv-acc2); }
.tv-trow .im { width: 2.8cqw; height: 2.8cqw; border-radius: 50%; object-fit: cover; background: #fff; display: grid; place-items: center; font-size: .85cqw; font-weight: 700; color: #472449; overflow: hidden; }
.tv-trow .im.logo { border-radius: .5cqw; object-fit: contain; width: 2.8cqw; height: 1.9cqw; }
.tv-trow .nm { min-width: 0; overflow: hidden; }
.tv-trow .nm b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-trow .nm span { display: block; font-size: .8cqw; color: var(--tv-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-trow .c { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.tv-empty { font-size: .95cqw; color: var(--tv-mut); padding: 1cqh 0; }
@media (prefers-reduced-motion: no-preference) { .tv-top.swap { animation: tvswap .5s ease; } }
@keyframes tvswap { from { opacity: 0; transform: translateY(1cqh); } }
.tv-foot { position: absolute; right: 1.4cqw; bottom: .8cqh; font-size: .75cqw; color: #bfa9c399; }


/* «Min salong» on the TV (bottom-right of the map column: empty sea east of southern Norway, above the lightning toast) */
.tv-mine { position: absolute; right: 1.2cqw; bottom: 12cqh; width: min(17.5cqw, 60%); z-index: 3; background: #fffffff2; color: #1f1f1f; border-radius: 1cqw; padding: 1.3cqh 1.1cqw; box-shadow: 0 1cqh 3cqh #00000055; border: .18cqw solid var(--tv-acc, #ea412a); display: grid; gap: .8cqh; }
.tv-mine[hidden] { display: none; }
.tv-mine .k { font-size: .85cqw; letter-spacing: .12em; text-transform: uppercase; color: var(--tv-acc, #ea412a); font-weight: 700; }
.tv-mine .row { display: flex; align-items: center; gap: .8cqw; }
.tv-mine .lg { width: 2.6cqw; height: 2.6cqw; object-fit: contain; border-radius: .5cqw; background: #fff; border: 1px solid #e5e7eb; }
.tv-mine .lg[hidden] { display: none; }
.tv-mine .tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tv-mine .nm { font-size: 1.2cqw; color: #472449; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-mine .rk { font-size: .9cqw; color: #5e6370; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-mine .vt { font-size: 1.2cqw; font-weight: 700; color: #fff; background: var(--tv-acc, #ea412a); border-radius: 999px; padding: .3cqh .8cqw; white-space: nowrap; }
.tv-mine .q { margin: 0; font-size: .95cqw; line-height: 1.4; color: #472449; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }
.tv-mine .qw { font-size: .8cqw; color: #5e6370; }
.tv-mine.flash { animation: tvmine 1.6s ease-out; }
@keyframes tvmine { 0% { box-shadow: 0 0 0 0 #ea412aaa; transform: scale(1.04); } 100% { box-shadow: 0 0 0 2.5cqw #ea412a00; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tv-mine.flash { animation: none; } }

/* Compact «Min salong»: only the label, the salon name and the number of hearts (everything must fit in the box) */
.tv-mine { width: auto; max-width: min(20cqw, 60%); gap: .5cqh; }
.tv-mine > * { min-width: 0; }
.tv-mine .rk, .tv-mine .q, .tv-mine .qw { display: none; }
.tv-mine .row { gap: .7cqw; }
.tv-mine .nm { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2; font-size: 1.15cqw; }
.tv-mine .vt { flex: none; font-size: 1.35cqw; }

/* up to 3 favourites stacked bottom-right of the map column; a dashed line (canvas) points to each salon */
.tv-mines { position: absolute; right: 1.2cqw; bottom: 12cqh; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: .8cqh; max-width: min(20cqw, 60%); pointer-events: none; }
.tv-mines .tv-mine { position: static; width: auto; max-width: 100%; }

/* Smaller favourite cards (still readable on a TV: name ≈ 1cqw ≈ 19px at 1920 wide) */
.tv-mines { gap: .6cqh; max-width: min(16cqw, 55%); }
.tv-mine { padding: .7cqh .7cqw; border-radius: .8cqw; border-width: .14cqw; gap: .3cqh; box-shadow: 0 .6cqh 1.8cqh #00000055; }
.tv-mine .k { font-size: .68cqw; letter-spacing: .1em; }
.tv-mine .row { gap: .55cqw; }
.tv-mine .lg { width: 1.9cqw; height: 1.9cqw; border-radius: .35cqw; }
.tv-mine .nm { font-size: 1cqw; }
.tv-mine .vt { font-size: 1cqw; padding: .2cqh .6cqw; }