/* TV screen on the live map: always top-left of the map. Warm white card like the rest of the map,
   with a small "broadcast" feel: channel label, progress line, power-on / power-off like an old TV. */
.tvdock{position:absolute;top:14px;left:14px;z-index:1006;width:380px;max-width:calc(100% - 28px);pointer-events:none;direction:rtl;display:flex;flex-direction:column;align-items:flex-end}
.tvdock .tv{width:100%}
.tvdock>*{pointer-events:auto}
.tvdock[hidden]{display:none}

/* the screen */
.tv{position:relative;background:#fff;border-radius:20px;box-shadow:0 2px 6px rgba(80,70,50,.06),0 18px 44px rgba(80,70,50,.16);overflow:hidden;transform-origin:50% 50%;display:none}
.tv.on{display:block;animation:tvOn .65s cubic-bezier(.2,.9,.25,1) both}
.tv.off{display:block;animation:tvOff .5s ease-in both}
@keyframes tvOn{0%{transform:scale(.18,.012);filter:brightness(3);opacity:.2}35%{transform:scale(1,.02);filter:brightness(2.4);opacity:1}100%{transform:none;filter:none}}
@keyframes tvOff{0%{transform:none}55%{transform:scale(1,.015);filter:brightness(2.2)}100%{transform:scale(0,.01);opacity:0}}
.tv-bar{display:flex;align-items:center;gap:8px;padding:9px 12px 8px;font-size:12px;color:var(--muted,#8A928F)}
.tv-ch{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:#C46A3B;background:#FDEBDF;border-radius:999px;padding:2px 10px 2px 8px;letter-spacing:.2px}
.tv-ch i{width:7px;height:7px;border-radius:50%;background:#E07A72;animation:tvRec 1.4s infinite}
@keyframes tvRec{50%{opacity:.25}}
.tv-kind{font-weight:500;color:var(--ink,#33403F);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tv-btn{margin-inline-start:auto;border:0;background:var(--panel-2,#F7F6F2);border-radius:50%;width:26px;height:26px;display:grid;place-items:center;color:var(--muted,#8A928F);flex:none}
.tv-btn:hover{background:#FDEBDF;color:#C46A3B}
.tv-btn+.tv-btn{margin-inline-start:0}
.tv-body{position:relative}
.tv-prog{height:3px;background:var(--panel-2,#F7F6F2)}
.tv-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#F4925E,#6CBFAF);border-radius:0 3px 3px 0}
.tv.paused .tv-prog i{animation-play-state:paused!important}
@keyframes tvProg{from{width:0}to{width:100%}}

/* photo / video */
.tv-media{position:relative;aspect-ratio:16/10;background:#F2EDE1;overflow:hidden}
.tv-media img,.tv-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:tvKen 12s ease-out both}
.tv-media img.fit,.tv-media video.fit{object-fit:contain;background:#2b2b2b}
@keyframes tvKen{from{transform:scale(1.08)}to{transform:scale(1)}}
.tv-media .slide{position:absolute;inset:0;opacity:0;transition:opacity .7s}
.tv-media .slide.cur{opacity:1}
.tv-dots{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:5px;z-index:2}
.tv-dots button{width:7px;height:7px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.55);box-shadow:0 0 2px rgba(0,0,0,.3)}
.tv-dots button.cur{background:#fff;width:18px;border-radius:99px}
.tv-count{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.45);color:#fff;font-size:11px;border-radius:999px;padding:1px 8px;z-index:2}
.tv-mute{position:absolute;bottom:8px;left:8px;z-index:2;border:0;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;font-size:12px;padding:3px 9px}
.tv-cap{padding:10px 14px 12px;font-size:13.5px;line-height:1.5}
.tv-cap p{margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tv-meta{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12px;color:var(--muted,#8A928F);flex-wrap:wrap}
.tv-who{display:inline-flex;align-items:center;gap:6px;border:0;background:color-mix(in srgb,var(--c) 14%,#fff);border-radius:999px;padding:2px 10px 2px 3px;font-size:12px;font-weight:500;color:var(--ink,#33403F)}
.tv-who .a{width:20px;height:20px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-size:9px;overflow:hidden}
.tv-who .a img{width:100%;height:100%;object-fit:cover}

/* flash / stat card */
.tv-card{position:relative;padding:12px 14px 14px;overflow:hidden}
.tv-card .head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.tv-card .head .a{width:38px;height:38px;border-radius:50%;background:var(--c);border:2.5px solid #fff;box-shadow:0 0 0 2px var(--c);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:600;overflow:hidden;flex:none;animation:tvPop .5s .25s both}
.tv-card .head .a img{width:100%;height:100%;object-fit:cover}
.tv-card .head b{display:block;font-family:var(--f-display,"Varela Round");font-weight:400;font-size:17px;line-height:1.2}
.tv-card .head small{color:var(--muted,#8A928F);font-size:12px}
.tv-card .head .when{margin-inline-start:auto;text-align:center;background:#fff;border-radius:12px;padding:3px 9px;font-size:11px;color:var(--muted,#8A928F);box-shadow:0 1px 3px rgba(80,70,50,.08);flex:none;line-height:1.3}
.tv-card .head .when b{font-family:var(--f-body,Rubik);font-size:14px;font-weight:600;color:var(--ink,#33403F)}
.tv-card .gfx{position:relative;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.6);height:150px}
.tv-card .gfx svg{display:block;width:100%;height:100%}
.tv-card .big{position:absolute;top:8px;inset-inline-end:8px;text-align:end;z-index:2;pointer-events:none;background:rgba(255,255,255,.82);border-radius:12px;padding:4px 10px 3px;backdrop-filter:blur(2px)}
.tv-card.night .big{background:rgba(59,67,99,.75)}
.tv-card .big b{display:block;direction:ltr;unicode-bidi:isolate;font-family:var(--f-display,"Varela Round");font-weight:400;font-size:26px;line-height:1;color:var(--k,#C46A3B)}
.tv-card .big span{font-size:11.5px;color:var(--muted,#8A928F)}
.tv-card .badge{position:absolute;bottom:8px;inset-inline-end:10px;z-index:2;background:var(--k,#C46A3B);color:#fff;font-size:11px;font-weight:600;border-radius:999px;padding:2px 10px;animation:tvPop .45s 1.3s both}
.tv-card h4{margin:10px 0 2px;font-family:var(--f-display,"Varela Round");font-weight:400;font-size:18px;line-height:1.3;animation:tvUp .5s .35s both}
.tv-card p.txt{margin:0;font-size:13.5px;line-height:1.55;color:#4A5553;animation:tvUp .5s .6s both}
.tv-card p.txt b{font-weight:600;color:var(--ink,#33403F)}
.tv-card .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;animation:tvUp .5s .85s both}
.tv-card .chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;background:#fff;border-radius:999px;padding:2px 9px;box-shadow:0 1px 3px rgba(80,70,50,.08)}
@keyframes tvPop{from{transform:scale(.3);opacity:0}70%{transform:scale(1.12)}to{transform:none;opacity:1}}
@keyframes tvUp{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}

/* themes per story kind (soft pastels; night is the only darker one) */
.tv-card.t-climb{background:linear-gradient(160deg,#FFF3EA,#FDE1D3);--k:#D9692F}
.tv-card.t-descent{background:linear-gradient(160deg,#EAF7F4,#D3EEE8);--k:#14988A}
.tv-card.t-flat{background:linear-gradient(160deg,#FFF8E8,#F6E9C8);--k:#B5832A}
.tv-card.t-twisty{background:linear-gradient(160deg,#F3F0FF,#E3DDFB);--k:#7466D1}
.tv-card.t-sea{background:linear-gradient(160deg,#EAF4FB,#D4E8F5);--k:#3F7FB0}
.tv-card.t-top{background:linear-gradient(160deg,#FFF0F3,#F8DCE3);--k:#C24F78}
.tv-card.t-cp,.tv-card.t-finish{background:linear-gradient(160deg,#F1F8EE,#DDEFD6);--k:#4E8F45}
.tv-card.t-stat{background:linear-gradient(160deg,#F6F5F1,#ECE8DF);--k:#C46A3B}
.tv-card.t-duel{background:linear-gradient(160deg,#FFF1EC,#EFE9FB);--k:#C24F78}
.tv-card.night{background:linear-gradient(160deg,#3B4363,#5B5F86);color:#F4F2FA;--k:#FFD38A}
.tv-card.night .head small,.tv-card.night .big span,.tv-card.night p.txt{color:#D9D7EA}
.tv-card.night p.txt b,.tv-card.night h4{color:#fff}
.tv-card.night .gfx{background:rgba(255,255,255,.08)}
.tv-card.night .head .when{background:rgba(255,255,255,.14);color:#E6E4F2}
.tv-card.night .head .when b{color:#fff}
.tv-card.night .chip{background:rgba(255,255,255,.14)}

/* drawing animations inside the graphic */
.tv .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:tvDraw 1.8s .3s ease-out forwards}
.tv .fadein{opacity:0;animation:tvFade .9s 1.1s forwards}
.tv .grow{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);animation:tvGrow 1s .4s cubic-bezier(.2,.9,.3,1.1) forwards}
.tv .growx{transform-box:fill-box;transform-origin:100% 50%;transform:scaleX(0);animation:tvGrowX 1.1s .4s cubic-bezier(.2,.9,.3,1) forwards}
.tv .spin{transform-box:fill-box;transform-origin:center;animation:tvSpin 12s linear infinite}
.tv .blink{animation:tvTw 2.4s ease-in-out infinite}
.tv .wind{stroke-dasharray:18 60;animation:tvWind 1.6s linear infinite}
.tv .rain{animation:tvRain .9s linear infinite}
.tv .road{stroke-dasharray:10 14;animation:tvRoad .7s linear infinite}
.tv .shimmer{animation:tvShim 2.2s ease-in-out infinite}
.tv .pulse{transform-box:fill-box;transform-origin:center;animation:tvPulse 1.6s ease-out infinite}
@keyframes tvDraw{to{stroke-dashoffset:0}}
@keyframes tvFade{to{opacity:1}}
@keyframes tvGrow{to{transform:none}}
@keyframes tvGrowX{to{transform:none}}
@keyframes tvSpin{to{transform:rotate(360deg)}}
@keyframes tvTw{50%{opacity:.25}}
@keyframes tvWind{from{stroke-dashoffset:78}to{stroke-dashoffset:0}}
@keyframes tvRain{from{transform:translateY(-10px);opacity:0}30%{opacity:1}to{transform:translateY(14px);opacity:0}}
@keyframes tvRoad{to{stroke-dashoffset:-24}}
@keyframes tvShim{50%{transform:translateY(-1.5px);opacity:.55}}
@keyframes tvPulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.4);opacity:0}}

/* rider avatars inside the graphics */
.tvav{width:100%;height:100%;border-radius:50%;background:var(--c);border:2.5px solid #fff;box-shadow:0 1px 4px rgba(60,50,40,.3);color:#fff;display:grid;place-items:center;font:600 11px var(--f-body,Rubik);overflow:hidden;box-sizing:border-box}
.tvav.sm{border-width:2px;font-size:9px}
.tvav img{width:100%;height:100%;object-fit:cover;display:block}

/* the TV when it is not on air: a small round button, with a note when something new waits */
.tv-mini{display:inline-flex;align-items:center;gap:8px;border:0;background:#fff;border-radius:999px;box-shadow:0 2px 6px rgba(80,70,50,.08),0 8px 22px rgba(80,70,50,.12);height:42px;padding:0 6px;color:var(--ink,#33403F);font-size:12.5px;font-weight:500;position:relative}
.tv-mini .ico{width:30px;height:30px;border-radius:50%;background:#FDEBDF;color:#C46A3B;display:grid;place-items:center;flex:none}
.tv-mini .lbl{padding-inline-end:8px;white-space:nowrap}
.tv-mini .lbl:empty{display:none}
.tv-mini .n{position:absolute;top:-4px;inset-inline-start:22px;min-width:18px;height:18px;border-radius:999px;background:#E07A72;color:#fff;font-size:10.5px;display:grid;place-items:center;padding:0 5px;border:2px solid #fff}
.tv-mini .n:empty{display:none}
.tv-mini.waiting .ico{animation:tvWait 1.8s infinite}
@keyframes tvWait{0%{box-shadow:0 0 0 0 rgba(244,146,94,.55)}100%{box-shadow:0 0 0 12px rgba(244,146,94,0)}}
.tv-mini:hover .ico{background:#F4925E;color:#fff}
.tv-mini[hidden]{display:none}

/* photo pins on the map */
.tvpin{position:relative;width:36px;height:36px;border-radius:10px;border:2.5px solid #fff;box-shadow:0 2px 8px rgba(60,50,40,.3);background:#F2EDE1;transform:rotate(-4deg);transform-origin:50% 120%;transition:transform .2s;cursor:pointer}
.tvpin img{width:100%;height:100%;object-fit:cover;display:block;border-radius:7px}
.tvpin::after{content:"";position:absolute;left:50%;bottom:-8px;margin-left:-5px;border:5px solid transparent;border-top-color:#fff}
.tvpin:hover{transform:rotate(0) scale(1.3)}
.tvpin.new{animation:tvPop .6s both}

@media (max-width:1100px){ .tvdock{width:330px} .tv-card .gfx{height:130px} }
@media (max-width:860px){
  .tvdock{top:10px;left:10px;width:min(300px,calc(100% - 70px))}
  .tv-card{padding:10px 12px 12px}
  .tv-card .gfx{height:96px}
  .tv-card .big{padding:2px 8px}
  .tv-card .big span{font-size:10px}
  .tv-card h4{font-size:15.5px;margin-top:8px}
  .tv-card p.txt{font-size:12.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .tv-card .head .a{width:30px;height:30px}
  .tv-card .head b{font-size:15px}
  .tv-card .big b{font-size:19px}
  .tv-cap{font-size:12.5px;padding:8px 12px 10px}
  .tv-card .chips{display:none}
}
@media (prefers-reduced-motion:reduce){
  .tv.on,.tv.off,.tv *{animation-duration:.01s!important;animation-iteration-count:1!important}
}

/* paintings (web/tv-art): the scene fills the graphic box; data sits small on top of it */
.tv-card .gfx.scene{height:188px;background:#F3E3C3}
.tv-card .gfx .art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:35% 60%;animation:tvKen 16s ease-out both}
.tv-card .gfx .an{position:absolute;inset:0;z-index:1;pointer-events:none}
.tv-card .gfx.scene .big{right:8px;left:auto}
.tv-card .gfx.scene .badge{top:8px;bottom:auto;left:10px;right:auto;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.tv-card .gfx .mini{position:absolute;right:8px;bottom:8px;z-index:2;width:46%;height:72px;border-radius:12px;background:rgba(255,255,255,.84);backdrop-filter:blur(3px);box-shadow:0 1px 4px rgba(80,70,50,.12);overflow:hidden}
.tv-card .gfx .mini svg{width:100%;height:100%}
.tv-card .gfx .tvstrip{position:absolute;left:0;right:0;bottom:0;z-index:2;height:62px;background:linear-gradient(to top,rgba(255,255,255,.85) 40%,rgba(255,255,255,0))}
.tv-card .gfx .tvstrip svg{width:100%;height:100%}
.tv-card.night .gfx .mini{background:rgba(48,54,84,.8)}
.tv-card .chip .ic{width:15px;height:15px;margin:-2px 0}
.tv-card.night .chip .ic{filter:invert(1) brightness(1.6)}
/* the short "breaking news" / "new photo" sting played over the screen as an item opens */
.tv-sting{position:absolute;inset:0;z-index:5;pointer-events:none;transition:opacity .4s}
.tv-sting.done{opacity:0}
@media (prefers-reduced-motion: reduce){.tv-card .gfx .art{animation:none}}
@media (max-width:1100px){ .tv-card .gfx.scene{height:160px} }
@media (max-width:860px){ .tv-card .gfx.scene{height:132px} .tv-card .gfx .mini{height:52px;width:48%} .tv-card .gfx .tvstrip{height:58px} }
/* the same painting at night: darker and bluer, with the stars animation on top */
.tv-card .gfx .art.dark{filter:brightness(.5) saturate(.75) hue-rotate(-12deg) contrast(1.05)}
/* the TV stays on between items; the next one comes in with a short channel switch */
.tv.idle .tv-prog i{width:100%!important;animation:none!important;opacity:.35}
.tv-body.sw{animation:tvSwitch .55s ease-out}
@keyframes tvSwitch{0%{filter:brightness(2.2) contrast(.6);transform:scaleY(.96);opacity:.4}30%{filter:brightness(1.4);transform:none;opacity:1}100%{filter:none}}
/* phones: a smaller TV so the map and the riders stay in view */
/* phones: the TV is a slim ticker across the top of the map: a small picture beside the headline and two lines,
   so it never covers the map (the numbers stay in the text) */
@media (max-width:560px){
  .tvdock{top:8px;left:8px;width:calc(100% - 64px)}
  .tv{border-radius:16px}
  .tv-bar{padding:5px 8px 4px;font-size:11px;gap:6px}
  .tv-ch{padding:1px 8px 1px 6px}
  .tv-btn{width:22px;height:22px}
  .tv-card{display:grid!important;grid-template-columns:84px minmax(0,1fr);grid-template-areas:"g h" "g t" "g x";column-gap:10px;align-items:start;padding:4px 10px 9px!important}
  .tv-card .gfx,.tv-card .gfx.scene{grid-area:g;height:84px!important;border-radius:12px}
  .tv-card .head{grid-area:h;margin:0;gap:6px;min-width:0}
  .tv-card .head>div{min-width:0}
  .tv-card .head b{font-size:13px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tv-card .head small,.tv-card .head .when{display:none}
  .tv-card .head .a{width:20px!important;height:20px!important;font-size:9px;border-width:1.5px;box-shadow:0 0 0 1.5px var(--c)}
  .tv-card h4{grid-area:t;font-size:13.5px!important;margin:2px 0 0!important;line-height:1.25;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .tv-card p.txt{grid-area:x;font-size:11.5px!important;line-height:1.4;margin:2px 0 0;-webkit-line-clamp:2!important}
  .tv-card .gfx .mini,.tv-card .gfx .tvstrip,.tv-card .gfx .badge,.tv-card .chips{display:none!important}
  .tv-card .gfx .big{top:auto;bottom:4px;inset-inline-end:4px;right:4px;padding:1px 5px;border-radius:7px}
  .tv-card .gfx .big b{font-size:13px!important}
  .tv-card .gfx .big span{display:none}
  .tv-media{aspect-ratio:auto;height:120px}
  .tv-cap{font-size:12px;padding:6px 10px 8px}
  .tv-cap p{-webkit-line-clamp:2}
}
@media (max-width:560px){
  .tvdock{top:8px;left:8px;width:calc(100% - 64px)}
  .tv-card{padding:8px 10px 10px}
  .tv-card .gfx,.tv-card .gfx.scene{height:92px}
  .tv-card .gfx .mini{height:46px}
  .tv-card .gfx .tvstrip{height:46px}
  .tv-card h4{font-size:14px;margin-top:6px}
  .tv-card p.txt{font-size:12px;-webkit-line-clamp:2}
  .tv-card .head .a{width:26px;height:26px}
  .tv-card .head b{font-size:14px}
  .tv-card .big b{font-size:17px}
}