/* 千里眼新聞 on the TV in the corner (js/campaign/news-tv.js): a Taiwanese
   cable news channel's graphics, as crowded and as saturated as theirs
   (art/NEWS.md): heavy 黑體 with a dark outline, red tags, the headline in
   black on a yellow bar, navy bands, yellow digits. Its own colours, not the
   game's: it's a television. Everything's sized off the picture's width
   (cqw), so it reads the same however big the TV is. */

.news {
  --tv-red: #d8232a; --tv-red-2: #9e0f16; --tv-gold: #f5b81c; --tv-yellow: #ffe14d; --tv-navy: #13306b; --tv-navy-2: #081a3f; --tv-blue: #1f5fd1;
  --tv-font: var(--cjk), 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  position: absolute; z-index: 1; right: calc(14px + 176px + 12px + var(--safe-r)); bottom: calc(14px + var(--safe-b)); width: min(480px, 34vw);
  pointer-events: none; text-shadow: none;
}
/* (English in Noto Sans JP: the same letters as TC's, but TC's ‘ ’ “ ” and · are a full em wide, CJK's, and split "street’s" in two) */
:root:lang(en) .news { --tv-font: 'Noto Sans JP', var(--cjk), 'PingFang TC', 'Microsoft JhengHei', sans-serif; }
.cards:not([data-n="1"]) ~ .news { bottom: calc(196px + var(--safe-b)); }
/* (a touch screen: its buttons have the bottom right; the TV goes under the card, top left) */
:root.touch .news { right: auto; left: calc(10px + var(--safe-l)); bottom: auto; top: calc(200px + var(--safe-t)); width: clamp(160px, min(31vw, (100vh - 214px) * 1.7778), 280px); }
/* A battle's news (js/ui/battle-news.js) leaves the player cards, minimap and touch controls clear. */
.news.battle-news { right: calc(16px + var(--safe-r)); bottom: calc(200px + var(--safe-b)); width: min(400px, 32vw); }
.cards:not([data-n="1"]) ~ .news.battle-news { bottom: calc(286px + var(--safe-b)); }
/* (in Taipei the minimap's under it, raised over the cards when there are several) */
.hud.roam .cards:not([data-n="1"]) ~ .news.battle-news { bottom: calc(384px + var(--safe-b)); }
:root.touch .news.battle-news { left: auto; right: calc(10px + var(--safe-r)); top: calc(210px + var(--safe-t)); bottom: auto; width: min(240px, 45vw); }
@media (max-height: 540px) and (orientation: landscape) {
  :root.touch .news.battle-news { left: calc(24px + min(330px, 44vw) + var(--safe-l)); right: auto; top: calc(150px + var(--safe-t)); width: min(220px, 100vw - min(330px, 44vw) - 270px); }
}
/* (a mission's instruments, polaris-hud.css: under the minimap on the right, as big as fits there, over
   the card's height; down in the corner beside the card where there's room for both; the kill feed moves
   over to the left of it while it's on) */
@media (min-width: 1000px) and (min-height: 600px) {
  :root:not(.touch) #hud:is(:has(.cp-hud), .endless) .news { --tv-w: clamp(240px, min(30.5vw, (100vh - 560px) * 1.7778), 460px); right: calc(16px + var(--safe-r)); bottom: calc(182px + var(--safe-b)); width: var(--tv-w); }
  :root:not(.touch) #hud:is(:has(.cp-hud), .endless):has(.news:not([hidden])) .feed { right: calc(28px + var(--safe-r) + clamp(240px, min(30.5vw, (100vh - 560px) * 1.7778), 460px)); }
}
@media (min-width: 1300px) and (min-height: 600px) {
  :root:not(.touch) #hud:is(:has(.cp-hud), .endless) .news { bottom: calc(16px + var(--safe-b)); }
}

/* over the whole screen (the prologue's special): the picture as big as fits, black round it */
.news.full { position: fixed; inset: 0; z-index: 0; width: auto; right: 0; bottom: 0; display: grid; place-items: center; background: #000; }
.news.full .tv { width: min(100vw, 100vh * 16 / 9); border: 0; box-shadow: none; }
.news.full.coming { animation: none; }
/* (see-through: the game's own city behind it, the black round it gone; a still; a guest cut out in front) */
.news.full:has(.tv.through) { background: transparent; }
/* (the city only inside the picture: black round it, as a TV's own bars, on a phone held upright or a wide screen) */
.news.full .tv.through { box-shadow: 0 0 0 100vmax #000; }
.tv.through { background: transparent; }
.tv.through .tv-feed { opacity: 0; }
.tv-blur { inset: 0; display: none; }
.tv.through .tv-blur { display: block; backdrop-filter: blur(var(--blur, 0px)) saturate(0.9); }
.tv-pic { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv-guest { bottom: 0; height: 92%; width: auto; max-width: 52%; object-fit: contain; object-position: bottom; }
.tv-guest[data-side="right"] { right: 12%; }
.tv-guest[data-side="left"] { left: 12%; }
.tv-pic[hidden], .tv-guest[hidden] { display: none; }

/* coming on: in from the right behind the channel's red and gold sting; going off: faded */
.news.coming { animation: tv-in 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.15); }
.news.going { opacity: 0; transition: opacity 0.8s ease; }
@keyframes tv-in { from { transform: translateX(115%); } }

.tv {
  position: relative; container-type: inline-size; aspect-ratio: 16 / 9; overflow: hidden; background: #000;
  border: 2px solid #04060b; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 8px 22px rgba(0, 0, 0, 0.6);
  font-family: var(--tv-font); font-weight: 900; color: #fff; line-height: 1.15;
}
.tv > * { position: absolute; }
.tv-feed, .tv-snow, .tv-studio, .tv-slate { inset: 0; width: 100%; height: 100%; display: none; }
.tv-feed { display: block; }
.tv[data-mode="studio"] .tv-studio { display: block; }
.tv[data-mode="snow"] .tv-snow { display: block; image-rendering: pixelated; }
.tv[data-mode="slate"] .tv-slate { display: grid; }
.tv[data-mode="snow"] .tv-gfx, .tv[data-mode="slate"] .tv-gfx { display: none; }
/* (live: a breath of the broadcast's scan lines and its corners darker) */
.tv[data-mode="live"]::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 45%, transparent 60%, rgba(0, 0, 0, 0.32)); }

/* The monochrome eye is white on air; the transparent art master is navy. */
.tv-eye { display: inline-block; flex: none; width: 1.05em; height: 1.05em; margin: 0 0.28em 0 0.1em; vertical-align: -0.12em; border-radius: 0 72% 0 72%; transform: rotate(-45deg); background: radial-gradient(circle, transparent 0 21%, #fff 22% 42%, transparent 43% 65%, #fff 66%); box-shadow: 0 0 0 0.06em rgba(0, 0, 0, 0.5); }
.logo-art .tv-eye { border-radius: 0; transform: none; box-shadow: none; background: var(--logo) center / contain no-repeat; filter: brightness(0) invert(1); }

/* ------------------------------------------------ the studio */
.tv-studio { background: radial-gradient(ellipse at 70% 30%, #2f6fe0 0%, #123a8f 40%, #071636 85%); }
.tv-studio::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 2cqw, transparent 2cqw 7cqw); }
.tv-set { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv-anchor { position: absolute; left: 6%; bottom: 0; height: 92%; width: auto; }
.tv-anchor-animated { left: 10%; bottom: 18%; height: 66%; }
.tv-anchor-animated[hidden], .tv.portrait-ready .tv-anchor-fallback { display: none; }
.tv:not(.drawn) .tv-anchor { display: none; }
.tv.drawn .tv-card { display: none; }
/* (no art yet: the channel's 快訊 card) */
.tv-card { position: absolute; inset: 0 0 32% 0; display: grid; place-content: center; justify-items: center; gap: 1.6cqw; font-size: 4.4cqw; }
.tv-card .tv-eye { font-size: 9cqw; margin: 0; }
.tv-card-flag { padding: 0.5cqw 3.6cqw 0.8cqw; font-size: 11cqw; line-height: 1; letter-spacing: 0.08em; color: #fff; background: linear-gradient(180deg, #ff3c3f, var(--tv-red) 55%, var(--tv-red-2)); border-bottom: 0.9cqw solid var(--tv-gold); box-shadow: 0 0.8cqw 2cqw rgba(0, 0, 0, 0.5); animation: tv-blink 1.1s steps(1) infinite; }
.tv-card-sub, .tv-anchor-super b { color: #fff; -webkit-text-stroke: 0.14em var(--tv-navy-2); paint-order: stroke fill; }
.tv-anchor-super { position: absolute; left: 2.4cqw; bottom: 40%; display: none; }
.tv.drawn .tv-anchor-super { display: block; }
.tv-anchor-super b { display: inline-block; box-sizing: border-box; max-width: 20cqw; padding: 0.3cqw 1cqw; font-size: 2.7cqw; background: rgba(8, 26, 63, 0.75); -webkit-text-stroke: 0; border-left: 0.8cqw solid var(--tv-gold); }
:root:lang(en) .tv-anchor-super b { font-size: 2.4cqw; }
@keyframes tv-blink { 50% { filter: brightness(1.35); } }

/* ------------------------------------------------ the picture gone */
.tv-slate { place-content: center; justify-items: center; gap: 1.2cqw; background: var(--standby, linear-gradient(180deg, #0b1d48, #050d22)) center / cover; font-size: 4cqw; }
/* (the art's slate has its own bars and emblem: only the words over it) */
.news[style*="--standby"] .tv-slate::before, .news[style*="--standby"] .tv-slate .tv-eye { visibility: hidden; }
.news[style*="--standby"] .tv-slate b { position: absolute; top: 74%; left: 6%; width: 88%; text-align: center; font-size: 5cqw; }
.news[style*="--standby"] .tv-slate small { position: absolute; top: 89%; left: 4%; width: 92%; text-align: center; font-size: 2.6cqw; }
.tv-slate::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 9%; background: linear-gradient(90deg, #c0c0c0 0 14.3%, #c0c000 0 28.6%, #00c0c0 0 42.9%, #00c000 0 57.2%, #c000c0 0 71.5%, #c00000 0 85.8%, #0000c0 0); opacity: 0.85; }
.tv-slate .tv-eye { font-size: 10cqw; margin: 0 0 1cqw; }
.tv-slate b { font-size: 7.5cqw; letter-spacing: 0.06em; }
.tv-slate small { font-size: 3.2cqw; font-weight: 700; color: #c8d6f5; }

/* ------------------------------------------------ the graphics */
.tv-gfx { inset: 0; }
.tv-gfx > * { position: absolute; }

/* Spoken subtitles, like Taiwanese broadcast captions: white with black edging,
   slightly right of centre, immediately above the lower third. */
.tv-subtitle {
  left: 14cqw; right: 2.4cqw; bottom: 17.1cqw; text-align: center;
  color: #fff; font-size: 4.1cqw; line-height: 1.25; font-weight: 900;
  white-space: nowrap; -webkit-text-stroke: .15em #090909; paint-order: stroke fill;
  text-shadow: 0 .12em .08em #000, 0 0 .22em #000;
  pointer-events: none;
}
.tv-subtitle[hidden] { display: none; }
/* Studio has no visible location/credit strip: sit just above the yellow headline.
   Live reports retain room for their location tags. */
.tv[data-mode="studio"] .tv-subtitle { bottom: 13.3cqw; }
.tv[data-mode="snow"] .tv-subtitle, .tv[data-mode="slate"] .tv-subtitle { display: none; }

/* the bug, top right, see-through; LIVE under it */
.tv-bug { top: 2.2cqw; right: 2.4cqw; display: flex; align-items: center; font-size: 3.4cqw; letter-spacing: 0.04em; opacity: 0.88; color: #fff; -webkit-text-stroke: 0.12em rgba(0, 0, 0, 0.55); paint-order: stroke fill; }
.tv-live { top: 7.6cqw; right: 2.4cqw; display: flex; font-size: 2.3cqw; }
.tv-live b, .tv-live span { padding: 0.35cqw 1cqw; }
.tv-live b { background: var(--tv-red); letter-spacing: 0.06em; }
.tv-live b::before { content: '\25CF\00A0'; animation: tv-blink 1s steps(1) infinite; }
.tv-live span { background: var(--tv-navy); }
.tv[data-mode="studio"] .tv-live { display: none; }

/* the tag and the story's title, top left */
.tv-sky { top: 2.2cqw; left: 2.4cqw; display: flex; align-items: stretch; font-size: 3.6cqw; max-width: 62%; }
.tv-flag { padding: 0.3cqw 1.3cqw; background: linear-gradient(180deg, #ff3c3f, var(--tv-red) 60%, var(--tv-red-2)); border: 0.3cqw solid #fff; white-space: nowrap; }
.tv-topic { padding: 0.3cqw 1.6cqw; color: var(--tv-yellow); background: linear-gradient(90deg, rgba(8, 26, 63, 0.9), rgba(8, 26, 63, 0.4)); -webkit-text-stroke: 0.12em #000; paint-order: stroke fill; white-space: nowrap; overflow: hidden; }

/* the title down the right edge: its red tag, then the words blue on yellow */
.tv-side { right: 2.4cqw; top: 13cqw; display: grid; justify-items: center; width: 5.4cqw; font-size: 3.4cqw; }
/* (vertical lines start at the right edge of their box: a grid puts the line in the middle of it) */
.tv-side b, .tv-side span { box-sizing: border-box; display: grid; place-items: center; }
.tv-side b { width: 100%; padding: 0.4cqw 0; text-align: center; font-size: 2.6cqw; background: var(--tv-red); writing-mode: vertical-rl; letter-spacing: 0.1em; }
.tv-side span { width: 100%; padding: 0.8cqw 0; text-align: center; color: var(--tv-navy); background: linear-gradient(90deg, var(--tv-yellow), var(--tv-gold)); writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 0.12em; transform-origin: 50% 0; }
:root:lang(en) .tv-side span { text-orientation: mixed; letter-spacing: 0.02em; font-size: 2.6cqw; }
.tv[data-mode="studio"] .tv-side { display: none; }

/* the reporter's box, as the link comes up */
.tv-reporter { left: 2.4cqw; top: 9cqw; display: none; width: 21cqw; background: var(--tv-navy-2); border: 0.4cqw solid #fff; box-shadow: 0 0.6cqw 1.6cqw rgba(0, 0, 0, 0.5); }
.tv.rep .tv-reporter { display: block; animation: tv-pop 0.3s ease-out; }
.tv-reporter img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: linear-gradient(180deg, #2a5bc0, #0b1d48); }
.tv-reporter img[hidden] { display: none; }
.tv-reporter-animated { display: block; width: 100%; height: auto; background: linear-gradient(180deg, #2a5bc0, #0b1d48); }
.tv-reporter-animated[hidden], .tv.field-ready .tv-reporter img { display: none; }
.tv-reporter b, .tv-reporter span { display: block; padding: 0.3cqw 1cqw; white-space: normal; overflow-wrap: anywhere; }
.tv-reporter b { font-size: 2.5cqw; background: var(--tv-red); }
.tv-reporter span { font-size: 2cqw; font-weight: 700; }
@keyframes tv-pop { from { transform: scale(0.6); opacity: 0; } }

/* the foot: the place and the credit; the box and the headline; the ticker */
.tv-low { left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.tv-info { display: flex; align-items: stretch; gap: 0; margin: 0 0 0.3cqw 2.4cqw; font-size: 2.4cqw; }
.tv-place { padding: 0.3cqw 1.2cqw; background: var(--tv-red); white-space: nowrap; }
.tv-place::before { content: '\25B6\00A0'; font-size: 0.8em; color: var(--tv-yellow); }
.tv-credit { padding: 0.3cqw 1.2cqw; font-weight: 700; background: rgba(8, 26, 63, 0.82); white-space: nowrap; }
.tv[data-mode="studio"] .tv-info { visibility: hidden; }
.tv-main { display: flex; align-items: stretch; height: 8cqw; }
.tv-box { flex: none; width: 19cqw; display: grid; align-content: center; justify-items: center; background: linear-gradient(180deg, var(--tv-navy), var(--tv-navy-2)); border-top: 0.4cqw solid var(--tv-gold); }
.tv-box b { font-size: 3.7cqw; line-height: 1; color: var(--tv-yellow); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.tv-box small { margin-top: 0.4cqw; font-size: 1.9cqw; font-weight: 700; color: #fff; white-space: nowrap; }
/* (Taiwan's market colours: red for up, green for down) */
.tv[data-box="market"] .tv-box b { color: #7dff9a; }
.tv-head { flex: 1; min-width: 0; display: flex; align-items: center; padding: 0 1.6cqw; overflow: hidden; color: #0b0b0b; background: linear-gradient(180deg, #fff27a, var(--tv-yellow) 45%, var(--tv-gold)); border-top: 0.4cqw solid #fff; }
.tv-head span { display: block; font-size: 4.3cqw; white-space: nowrap; transform-origin: 0 50%; }
.tv-head.flash { animation: tv-flash 0.5s ease-out; }
@keyframes tv-flash { 0% { filter: brightness(2.2); } 100% { filter: none; } }
/* the very foot (the channels' order: the ticker under the headline): the clock at its left end,
   black with yellow digits, and the ticker, one endless line on a crimson band, each item behind
   its own label pill (its desk's colour), in heavy type with no outline on the solid band */
.tv-ticker { display: flex; align-items: stretch; height: 4.8cqw; font-size: 2.75cqw; }
.tv-clock { flex: none; width: 19cqw; display: flex; align-items: baseline; justify-content: center; gap: 0.8cqw; padding-top: 0.6cqw; background: #050505; border-right: 0.3cqw solid var(--tv-gold); }
.tv-clock b { font-size: 3.1cqw; line-height: 1; color: var(--tv-yellow); font-variant-numeric: tabular-nums; }
.tv-clock small { font-size: 1.8cqw; font-weight: 700; color: #fff; white-space: nowrap; }
.tv-run { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; background: linear-gradient(180deg, #c3151d, #8e0a10 70%, #6d070b); }
.tv[data-alert="typhoon"] .tv-run { background: linear-gradient(180deg, #1f6fe0, #0f3f99 70%, #0a2c70); }
.tv-track { display: flex; align-items: center; white-space: nowrap; will-change: transform; }
.tv-item { display: inline-flex; align-items: center; gap: 1cqw; padding-right: 3.2cqw; }
.tv-item b { --c: var(--tv-navy); padding: 0.2cqw 0.9cqw; font-size: 2.35cqw; color: #fff; background: var(--c); border: 0.2cqw solid rgba(255, 255, 255, 0.85); border-radius: 0.5cqw; }
.tv-item span { font-weight: 900; color: #fff; letter-spacing: 0.01em; }
.tv-item[data-k="life"] b { --c: #e8731a; } .tv-item[data-k="society"] b { --c: #5b2a86; } .tv-item[data-k="politics"] b { --c: #1b3f8f; }
.tv-item[data-k="money"] b { --c: #0e7a4a; } .tv-item[data-k="world"] b { --c: #126e9e; } .tv-item[data-k="showbiz"] b { --c: #c2187a; }
.tv-item[data-k="sports"] b { --c: #0a8a7c; } .tv-item[data-k="weather"] b { --c: #2f7fd8; } .tv-item[data-k="traffic"] b { --c: #b97a00; }
.tv-item[data-k="local"] b { --c: #8a4b16; } .tv-item[data-k="tech"] b { --c: #4b4fc7; } .tv-item[data-k="animals"] b { --c: #4a8a1c; }
.tv-item[data-k="mech"] b { --c: #13306b; border-color: var(--tv-gold); }
.tv-item[data-k="live"] b { --c: #f5b81c; color: #3a0a00; border-color: #fff; }
.tv-item[data-k="promo"] b { --c: #fff; color: #c3151d; }
.tv-item[data-k="polls"] b { --c: #0b4f6c; border-color: var(--tv-gold); }
.news.paused *, .news.paused { animation-play-state: paused !important; }

/* the channel's red and gold sting, wiping across as it comes on */
.tv-sting { inset: 0; display: grid; place-items: center; font-size: 12cqw; background: linear-gradient(105deg, transparent 0 18%, var(--tv-red) 18% 70%, var(--tv-gold) 70% 78%, transparent 78%); transform: translateX(-130%); }
.tv-sting::before { content: ''; width: 1em; height: 1em; border-radius: 0 72% 0 72%; transform: rotate(-45deg); background: radial-gradient(circle, #121212 0 21%, var(--tv-gold) 22% 42%, #fff 43%); }
.news.coming .tv-sting { animation: tv-sting 0.75s ease-in-out 0.05s; }
/* (the art's sting: its own picture swept across) */
.news[style*="--sting"] .tv-sting { background: var(--sting) center / cover; }
.news[style*="--sting"] .tv-sting::before { display: none; }
@keyframes tv-sting { from { transform: translateX(-130%); } to { transform: translateX(130%); } }

/* ------------------------------------------------ the label over the crew's van in the game's picture */
.news-tag {
  position: absolute; left: 0; top: 0; translate: -50% -100%; display: flex; align-items: center; padding: 1px 7px 2px 4px;
  font: 900 12px/1.3 var(--cjk), sans-serif; white-space: nowrap; color: #fff; background: rgba(8, 26, 63, 0.82); border-bottom: 2px solid #d8232a; pointer-events: none;
}
.news-tag .tv-eye { font-size: 12px; }
.news-tag span { display: none; margin-left: 6px; padding: 0 4px; font-size: 10px; background: #d8232a; }
.news-tag.live span { display: inline-block; }