/* Ecranul televizorului: interfață TV cu 6 canale desenate din CSS (02.11.2026).
   Totul e în cqw (lățimea ecranului), ca să arate la fel pe telefon și pe desktop. */
.scr { container-type: inline-size; }
.tvui { position: absolute; inset: 0; overflow: hidden; background: #02040a; }
.tvui i { position: absolute; display: block; }
.tvui .sc > span { position: absolute; }
.sc { position: absolute; inset: 0; opacity: 0; transition: opacity .45s cubic-bezier(.32,.72,0,1); }
.tvui[data-ch="0"] .sc-sport, .tvui[data-ch="1"] .sc-film, .tvui[data-ch="2"] .sc-doc,
.tvui[data-ch="3"] .sc-kids, .tvui[data-ch="4"] .sc-news, .tvui[data-ch="5"] .sc-music { opacity: 1; }
.sc .sky { inset: 0; }

/* ---- Sport: stadion noaptea ---- */
.sc-sport .sky { background: linear-gradient(#030817, #0a1834 40%, #10284d 58%); }
.sc-sport .fl { top: -18%; width: 46%; height: 70%; background: radial-gradient(closest-side, rgba(235,245,255,.6), rgba(160,200,255,.12) 55%, transparent); }
.sc-sport .fl.l { left: -10%; } .sc-sport .fl.r { right: -10%; }
/* luminile reflectoarelor (scoase: cădeau peste bara de sus) */
.sc-sport .stands { left: 0; right: 0; top: 24%; height: 27%; opacity: .7;
  background: radial-gradient(circle, rgba(255,255,255,.22) 0 .12cqw, transparent .18cqw) 0 0 / 1.9cqw 1.5cqw,
              radial-gradient(circle, rgba(255,111,181,.35) 0 .14cqw, transparent .2cqw) .6cqw .5cqw / 2.1cqw 1.6cqw,
              linear-gradient(#152241, #0c1530); }
.sc-sport .pitch { left: -10%; right: -10%; top: 50%; bottom: 0; clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg, transparent 49.85%, rgba(255,255,255,.8) 49.85% 50.15%, transparent 50.15%),
              repeating-linear-gradient(180deg, #1f7d3d 0 9%, #26903f 9% 18%); }
.sc-sport .pitch::before { content: ""; position: absolute; left: 24%; right: 24%; top: 0; height: .3cqw; background: rgba(255,255,255,.75); }
.sc-sport .pitch::after { content: ""; position: absolute; left: 50%; top: 42%; width: 16%; height: 30%; transform: translate(-50%, -50%);
  border: .3cqw solid rgba(255,255,255,.75); border-radius: 50%; }
.sc-sport .ball { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #fff; box-shadow: 0 0 1.2cqw rgba(255,255,255,.9), .3cqw .8cqw .6cqw rgba(0,0,0,.4);
  left: 44%; top: 64%; animation: ball 5s cubic-bezier(.45,.05,.3,1) infinite alternate; }
@keyframes ball { 0% { transform: translate(0, 0); } 35% { transform: translate(10cqw, -3cqw); } 70% { transform: translate(4cqw, 2cqw); } 100% { transform: translate(16cqw, -1cqw); } }

/* ---- Film: apus peste oraș ---- */
.sc-film .sky { background: linear-gradient(#170b2e, #4b2268 32%, #c5507a 58%, #ffaa66 74%, #ffd29a 80%); }
.sc-film .sun { width: 24cqw; aspect-ratio: 1; left: 54%; top: 26%; border-radius: 50%; background: linear-gradient(#fff1b8, #ffb064 55%, #ff6f8a);
  -webkit-mask: linear-gradient(#000 52%, transparent 52% 56%, #000 56% 63%, transparent 63% 67%, #000 67% 73%, transparent 73% 78%, #000 78%);
  mask: linear-gradient(#000 52%, transparent 52% 56%, #000 56% 63%, transparent 63% 67%, #000 67% 73%, transparent 73% 78%, #000 78%);
  box-shadow: 0 0 6cqw rgba(255,170,100,.6); animation: sunset 14s ease-in-out infinite alternate; }
@keyframes sunset { to { transform: translateY(3cqw); } }
.sc-film .city { left: 0; right: 0; bottom: 26%; }
.sc-film .city.c2 { height: 40%; background: #3a1650; opacity: .85;
  clip-path: polygon(0 100%, 0 55%, 6% 55%, 6% 35%, 11% 35%, 11% 60%, 18% 60%, 18% 20%, 21% 14%, 24% 20%, 24% 58%, 33% 58%, 33% 40%, 40% 40%, 40% 66%, 47% 66%, 47% 30%, 52% 30%, 52% 62%, 63% 62%, 63% 26%, 69% 26%, 69% 56%, 77% 56%, 77% 38%, 83% 38%, 83% 64%, 91% 64%, 91% 32%, 96% 32%, 96% 60%, 100% 60%, 100% 100%); }
.sc-film .city.c1 { height: 28%; background: linear-gradient(#1a0b2b, #0d0618);
  clip-path: polygon(0 100%, 0 40%, 8% 40%, 8% 20%, 14% 20%, 14% 50%, 22% 50%, 22% 10%, 27% 10%, 27% 46%, 36% 46%, 36% 28%, 44% 28%, 44% 58%, 55% 58%, 55% 18%, 60% 0, 65% 18%, 65% 48%, 74% 48%, 74% 30%, 82% 30%, 82% 54%, 90% 54%, 90% 22%, 100% 22%, 100% 100%); }
.sc-film .city.c1::after { content: ""; position: absolute; inset: 30% 0 0; background: radial-gradient(circle, rgba(255,214,140,.9) 0 .12cqw, transparent .18cqw) 0 0 / 1.6cqw 1.4cqw; opacity: .7; }
.sc-film .water { left: 0; right: 0; bottom: 0; height: 26%; background: repeating-linear-gradient(180deg, rgba(255,170,110,.22) 0 .25cqw, transparent .25cqw 1.1cqw), linear-gradient(#3b1652, #0c0517); }
.sc-film::before, .sc-film::after { content: ""; position: absolute; left: 0; right: 0; height: 7%; background: #000; z-index: 1; }
.sc-film::before { top: 0; } .sc-film::after { bottom: 0; }

/* ---- Documentare: munți cu aurora ---- */
.sc-doc .sky { background: linear-gradient(#01030c, #071330 55%, #0f2a4d); }
.sc-doc .stars { inset: 0 0 40%; background:
  radial-gradient(circle, #fff 0 .1cqw, transparent .16cqw) 0 0 / 7cqw 5cqw,
  radial-gradient(circle, rgba(255,255,255,.7) 0 .08cqw, transparent .14cqw) 3cqw 2cqw / 11cqw 7cqw,
  radial-gradient(circle, rgba(200,220,255,.8) 0 .12cqw, transparent .18cqw) 5cqw 4cqw / 17cqw 9cqw; }
.sc-doc .aurora { left: -20%; width: 140%; top: 4%; height: 44%; border-radius: 50%; filter: blur(2.2cqw); opacity: .85;
  background: linear-gradient(100deg, transparent 12%, rgba(79,224,160,.75) 32%, rgba(106,215,255,.55) 50%, rgba(165,148,255,.6) 66%, transparent 86%);
  animation: aurora 9s ease-in-out infinite alternate; }
@keyframes aurora { 0% { transform: translateX(-6%) skewY(-4deg); } 100% { transform: translateX(6%) skewY(5deg) scaleY(1.15); } }
.sc-doc .mt { left: 0; right: 0; bottom: 0; }
.sc-doc .m3 { height: 58%; background: linear-gradient(#5a77a8, #1d3560 30%); opacity: .8;
  clip-path: polygon(0 100%, 0 55%, 12% 30%, 22% 48%, 34% 12%, 46% 40%, 58% 22%, 70% 46%, 82% 18%, 92% 38%, 100% 30%, 100% 100%); }
.sc-doc .m2 { height: 46%; background: linear-gradient(#e6f0ff 0 6%, #3d5b8c 12%, #142849 60%);
  clip-path: polygon(0 100%, 0 60%, 16% 18%, 28% 50%, 40% 26%, 52% 2%, 66% 44%, 78% 30%, 100% 62%, 100% 100%); }
.sc-doc .m1 { height: 26%; background: #050c1d; clip-path: polygon(0 100%, 0 40%, 10% 52%, 14% 30%, 18% 50%, 30% 36%, 46% 60%, 60% 34%, 63% 14%, 66% 34%, 80% 50%, 92% 28%, 100% 44%, 100% 100%); }

/* ---- Copii: dealuri, nori, bule ---- */
.sc-kids .sky { background: linear-gradient(#69c6ff, #bfe9ff 70%); }
.sc-kids .ksun { width: 12cqw; aspect-ratio: 1; right: 10%; top: 10%; border-radius: 50%; background: #ffd84d; box-shadow: 0 0 0 1.4cqw rgba(255,216,77,.35), 0 0 0 3cqw rgba(255,216,77,.15); animation: spin 18s linear infinite; }
.sc-kids .cloud { height: 4cqw; border-radius: 9cqw; background: #fff; box-shadow: 3cqw -2cqw 0 .6cqw #fff, 7cqw -.6cqw 0 0 #fff; animation: cloud 22s linear infinite; }
.sc-kids .k1 { width: 12cqw; left: 6%; top: 22%; }
.sc-kids .k2 { width: 9cqw; left: 46%; top: 12%; animation-duration: 30s; opacity: .9; }
@keyframes cloud { to { transform: translateX(30cqw); } }
.sc-kids .hill { border-radius: 50%; }
.sc-kids .h2 { width: 90%; height: 60%; right: -20%; bottom: -30%; background: #47c17a; }
.sc-kids .h1 { width: 110%; height: 56%; left: -30%; bottom: -32%; background: #6fe08f; }
.sc-kids .bub { border-radius: 50%; animation: bounce 2.6s cubic-bezier(.3,0,.4,1) infinite; }
.sc-kids .b1 { width: 6cqw; aspect-ratio: 1; left: 66%; bottom: 40%; background: #ff6fb5; box-shadow: inset -.8cqw -.8cqw 0 rgba(0,0,0,.12); }
.sc-kids .b2 { width: 4.5cqw; aspect-ratio: 1; left: 76%; bottom: 44%; background: #ffcb6b; animation-delay: .4s; box-shadow: inset -.6cqw -.6cqw 0 rgba(0,0,0,.12); }
.sc-kids .b3 { width: 5cqw; aspect-ratio: 1; left: 85%; bottom: 38%; background: #a594ff; animation-delay: .8s; box-shadow: inset -.7cqw -.7cqw 0 rgba(0,0,0,.12); }
@keyframes bounce { 0%, 100% { transform: translateY(0) scale(1.06, .94); } 50% { transform: translateY(-7cqw) scale(.96, 1.04); } }

/* ---- Știri: studio cu glob ---- */
.sc-news .sky { background: linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 5cqw 5cqw, linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 5cqw 5cqw,
  radial-gradient(80% 90% at 70% 40%, #1f55d6, #0a1a4a 60%, #050b22); }
.sc-news .globe { width: 34cqw; aspect-ratio: 1; right: 6%; top: 10%; border-radius: 50%; border: .2cqw solid rgba(160,210,255,.5);
  background: repeating-linear-gradient(90deg, rgba(160,210,255,.35) 0 .15cqw, transparent .15cqw 3.4cqw), repeating-linear-gradient(0deg, rgba(160,210,255,.25) 0 .15cqw, transparent .15cqw 3.4cqw),
              radial-gradient(circle at 35% 30%, rgba(120,190,255,.7), rgba(20,60,150,.6) 60%, rgba(5,15,50,.8));
  box-shadow: 0 0 6cqw rgba(80,150,255,.45); animation: globe 10s linear infinite; }
@keyframes globe { to { background-position: 34cqw 0, 0 0, 0 0; } }
.sc-news .ticker { left: 0; right: 0; top: 13%; height: 5.4cqw; display: flex; align-items: stretch; background: rgba(255,255,255,.92); color: #0a1640; font: 600 1.7cqw var(--f-body); overflow: hidden; }
.sc-news .ticker b { display: flex; align-items: center; padding: 0 1.6cqw; background: #e11d48; color: #fff; font: 700 1.5cqw var(--f-mono); letter-spacing: .08em; z-index: 1; flex: none; }
.sc-news .tk { display: flex; align-items: center; white-space: nowrap; animation: tick 22s linear infinite; }
.sc-news .tk span { padding-left: 1cqw; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---- Muzică: concert ---- */
.sc-music .sky { background: radial-gradient(70% 60% at 50% 105%, rgba(255,61,139,.45), transparent 70%), radial-gradient(50% 40% at 50% 0%, rgba(165,148,255,.3), transparent), #06030e; }
.sc-music .beam { top: -6%; width: 28cqw; height: 110%; left: 50%; margin-left: -14cqw; transform-origin: 50% 0; mix-blend-mode: screen;
  background: linear-gradient(rgba(255,255,255,.55), rgba(165,148,255,.18) 45%, transparent 85%); clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%); }
.sc-music .b1 { animation: swing 4s ease-in-out infinite alternate; }
.sc-music .b2 { background: linear-gradient(rgba(255,255,255,.5), rgba(106,215,255,.2) 45%, transparent 85%); animation: swing 5s ease-in-out -2s infinite alternate-reverse; }
.sc-music .b3 { background: linear-gradient(rgba(255,255,255,.5), rgba(255,111,181,.22) 45%, transparent 85%); animation: swing 3.4s ease-in-out -1s infinite alternate; }
@keyframes swing { from { transform: rotate(-32deg); } to { transform: rotate(32deg); } }
.sc-music .eq { left: 70%; bottom: 36%; height: 16cqw; transform: translateX(-50%); display: flex; align-items: flex-end; gap: .7cqw; }
.sc-music .eq i { position: static; width: 1.5cqw; height: 100%; border-radius: .4cqw; transform-origin: bottom; background: linear-gradient(#6ad7ff, #a594ff 50%, #ff6fb5);
  animation: eq .7s ease-in-out infinite alternate; box-shadow: 0 0 1.4cqw rgba(165,148,255,.5); }
.sc-music .eq i:nth-child(3n) { animation-duration: .55s; } .sc-music .eq i:nth-child(3n+1) { animation-duration: .9s; animation-delay: -.3s; }
.sc-music .eq i:nth-child(4n) { animation-delay: -.5s; } .sc-music .eq i:nth-child(5n+2) { animation-duration: .45s; }
@keyframes eq { from { transform: scaleY(.15); } to { transform: scaleY(1); } }
.sc-music .crowd { left: -2%; right: -2%; bottom: 0; height: 16%; background: radial-gradient(circle at 50% 100%, #000 0 62%, transparent 64%) 0 100% / 4.2cqw 6cqw repeat-x,
  radial-gradient(circle at 50% 100%, #0b0614 0 62%, transparent 64%) 2cqw 100% / 5cqw 8cqw repeat-x; }

/* ---- Interfața de deasupra ---- */
.tvui .noise { z-index: 4; }
.hud { position: absolute; inset: 0; z-index: 3; padding: 3cqw 3.4cqw 2.8cqw; display: grid; grid-template-rows: auto 1fr auto auto; gap: 1.8cqw;
  background: linear-gradient(0deg, rgba(3,6,15,.94) 0%, rgba(3,6,15,.62) 34%, transparent 58%), linear-gradient(180deg, rgba(3,6,15,.55), transparent 20%); }
.htop { display: flex; align-items: center; gap: 1.4cqw; font: 600 1.55cqw var(--f-mono); letter-spacing: .06em; color: rgba(255,255,255,.9); }
.htop .live { font-size: 1.3cqw; padding: .35cqw 1cqw; gap: .6cqw; }
.htop .live::before { width: .8cqw; height: .8cqw; }
.htop .sp { flex: 1; }
.htop .q { padding: .2cqw .8cqw; border-radius: .5cqw; border: .15cqw solid rgba(255,255,255,.5); font-size: 1.2cqw; }
.score { position: absolute; left: 3.4cqw; top: 8cqw; display: flex; align-items: center; gap: 1cqw; padding: .6cqw 1.2cqw; border-radius: .8cqw;
  background: rgba(3,6,15,.72); border: .12cqw solid rgba(255,255,255,.14); font: 600 1.6cqw var(--f-mono); color: #fff; transition: opacity .3s; }
.score b { padding: .1cqw .8cqw; border-radius: .4cqw; background: #fff; color: #03060f; }
.score small { color: var(--ok); }
.tvui:not([data-ch="0"]) .score { opacity: 0; }
.tvui[data-ch="4"] .htop .live { visibility: visible; }
.now { grid-row: 3; display: grid; gap: .5cqw; max-width: 62%; }
.now .ng { font: 600 1.25cqw var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.now b { font: 600 4cqw/1.05 var(--f-display); letter-spacing: -.03em; color: #fff; text-shadow: 0 .4cqw 2cqw rgba(0,0,0,.5); }
.now .nm { font: 500 1.5cqw var(--f-body); color: rgba(255,255,255,.7); }
.now .np { margin-top: .6cqw; width: 34cqw; max-width: 100%; height: .5cqw; border-radius: 9px; background: rgba(255,255,255,.2); overflow: hidden; }
.now .np i { position: static; height: 100%; width: 40%; border-radius: inherit; background: #fff; transition: width .6s cubic-bezier(.32,.72,0,1); }
.rail { grid-row: 4; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.1cqw; }
.rail .t { position: relative; aspect-ratio: 16 / 10; border-radius: 1cqw; overflow: hidden; cursor: pointer; background: var(--tb);
  box-shadow: inset 0 0 0 .12cqw rgba(255,255,255,.16); transition: transform .45s cubic-bezier(.32,.72,0,1), box-shadow .3s; }
.rail .t span { position: absolute; left: .8cqw; bottom: .6cqw; font: 600 1.15cqw var(--f-body); color: #fff; text-shadow: 0 .2cqw .6cqw rgba(0,0,0,.6); }
.rail .t em { position: absolute; left: .8cqw; top: .5cqw; font: 600 1cqw var(--f-mono); font-style: normal; color: rgba(255,255,255,.75); }
.rail .t:hover { transform: translateY(-.4cqw); }
.rail .t.on { transform: translateY(-.6cqw) scale(1.06); box-shadow: 0 0 0 .3cqw #fff, 0 1cqw 2.4cqw rgba(0,0,0,.6); }

/* pornire: logo, apoi interfața */
.splash { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 1.6cqw; background: radial-gradient(60% 60% at 50% 50%, #0d1530, #02040a);
  font: 600 4.2cqw var(--f-display); letter-spacing: -.03em; color: #fff; opacity: 0; pointer-events: none; }
.splash .bm { width: 6cqw; height: 4.2cqw; border-width: .4cqw; }
.stage.on .splash { animation: splash 1.9s cubic-bezier(.32,.72,0,1) .35s both; }
@keyframes splash { 0% { opacity: 1; } 25% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
.stage.on .splash b { animation: splashT 1.2s cubic-bezier(.32,.72,0,1) .5s both; }
@keyframes splashT { from { opacity: 0; letter-spacing: .3em; filter: blur(1cqw); } }
.stage.on .hud > * { animation: hudIn .7s cubic-bezier(.32,.72,0,1) both; animation-delay: calc(1.9s + var(--i, 0) * 90ms); }
.htop { --i: 0; } .now { --i: 1; } .rail { --i: 2; }
@keyframes hudIn { from { opacity: 0; transform: translateY(1.5cqw); } }

@media (prefers-reduced-motion: reduce) {
  .tvui *, .tvui *::before, .tvui *::after { animation: none !important; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* cardul „Test activ” stă sub televizor, lângă telecomandă */
.stage .chip.c1 { left: 0; top: auto; bottom: -6px; }
@media (max-width: 640px) { .stage .chip.c1 { display: none; } }