/* /tv/ (tv.js): full-screen chain television. The sky canvas behind; the clock and corner text on top, the newest
   block's garlic in the middle, the ticker and the strip of earlier blocks at the bottom. Sizes follow the screen (vmin),
   so the same page works on a 1080p TV and a phone. Always dark, whatever the site theme. */
.tv-body { margin: 0; background: #120e0a; color: #f3e6c8; overflow: hidden; }
.tv { position: fixed; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "top" "hero" "foot"; gap: 1.5vh;
  padding: max(2.4vh, env(safe-area-inset-top)) max(2.6vw, env(safe-area-inset-right)) max(2.4vh, env(safe-area-inset-bottom)) max(2.6vw, env(safe-area-inset-left));
  background: radial-gradient(120% 90% at 50% 110%, #3a2a12 0%, #1b1510 55%, #120e0a 100%); overflow: hidden; }
.tv.tv-idle { cursor: none; }
.tv p { margin: 0; }
.tv-sky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tv-hide { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tv > :not(.tv-sky) { position: relative; }

/* the clock since the last block (bakery.js's oven timer), with a thin bar filling up to the average block time */
.tv-clock { grid-area: top; justify-self: start; display: grid; gap: .3vh; }
.tv-clock-label { font-size: clamp(.72rem, 1.7vmin, 1.25rem); letter-spacing: .08em; text-transform: uppercase; color: #c9b88f; }
.tv-time { font-family: "Fredoka", "Nunito", system-ui, sans-serif; font-weight: 600; font-size: clamp(2.6rem, 10vmin, 9rem); line-height: 1; color: #f2b632; font-variant-numeric: tabular-nums; }
.tv-clock::after { content: ""; display: block; height: max(3px, .5vmin); border-radius: 9px; margin-top: .6vh; background: linear-gradient(90deg, #f2b632 calc(var(--p, 0) * 100%), rgba(255, 244, 214, .12) 0); }
.tv-clock-note { font-size: clamp(.78rem, 1.9vmin, 1.35rem); color: #e9dcc0; opacity: .8; }
.tv-url { grid-area: top; justify-self: end; align-self: start; font-size: clamp(.75rem, 1.8vmin, 1.3rem); font-weight: 700; color: #e9dcc0; opacity: .65; letter-spacing: .02em; }
.tv-stale { grid-area: top; justify-self: end; align-self: end; font-size: clamp(.72rem, 1.6vmin, 1.1rem); color: #ff9f5a; }

/* the newest block */
.tv-hero { grid-area: hero; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6vh; min-height: 0; text-align: center; }
.tv-art { width: min(40vh, 62vw); aspect-ratio: 1; flex: 0 1 auto; min-height: 0; filter: drop-shadow(0 0 4vmin rgba(242, 182, 50, .22)); animation: tv-bob 7s ease-in-out infinite; }
.tv-art-in, .tv-art .garlic-art { width: 100%; height: 100%; display: block; }
.tv-art .garlic-art { border-radius: 18%; }
.tv-hero-text { display: grid; gap: .8vh; justify-items: center; }
.tv-block { font-family: "Fredoka", "Nunito", system-ui, sans-serif; font-weight: 600; font-size: clamp(1.5rem, 5.6vmin, 4.6rem); line-height: 1.05; color: #fff4d4; }
.tv-meta { font-size: clamp(.9rem, 2.5vmin, 1.8rem); color: #e9dcc0; opacity: .85; }
.tv-fortune { font-style: italic; font-size: clamp(1rem, 3vmin, 2.2rem); max-width: min(36em, 86vw); color: #f3e6c8; }
.tv-fortune:not(:empty)::before { content: "🥠 "; font-style: normal; }
.tv-grow { animation: tv-grow 2.2s cubic-bezier(.2, .8, .25, 1.12) both; }
.tv-flash { animation: tv-flash 2.4s ease-out; }
@keyframes tv-grow { from { opacity: 0; transform: scale(.3) translateY(14%); } 45% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes tv-bob { 50% { transform: translateY(-1.2vmin) rotate(.6deg); } }
@keyframes tv-flash { from { text-shadow: 0 0 3vmin rgba(255, 210, 110, .95); color: #fff; } }
@keyframes tv-in { from { opacity: 0; transform: translateY(40%); } }
@keyframes tv-fade { from { opacity: 0; } }

/* the ticker, the day's counts, and the strip of earlier blocks */
.tv-foot { grid-area: foot; display: grid; gap: 1.2vh; justify-items: center; min-width: 0; }
.tv-ticker { max-width: 100%; min-height: 1.4em; font-size: clamp(.92rem, 2.5vmin, 1.8rem); text-align: center; }
.tv-tick { display: inline-flex; align-items: baseline; gap: .5em; max-width: 100%; }
.tv-tick-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tv-tick strong { color: #fff4d4; }
.tv-tick q { font-style: italic; }
.tv-tick .tv-ago { flex: none; font-size: .75em; color: #c9b88f; }
.tv-tick-in { animation: tv-in .7s ease-out; }
.tv-tick-flash { animation: tv-in .7s ease-out, tv-flash 2.4s ease-out; }
.tv-day { font-size: clamp(.72rem, 1.6vmin, 1.15rem); color: #c9b88f; text-align: center; }
.tv-strip { list-style: none; margin: .4vh 0 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1.4vw; width: min(100%, 8 * 15vh); }
.tv-strip li { display: grid; justify-items: center; gap: .3vh; min-width: 0; font-size: clamp(.66rem, 1.5vmin, 1.05rem); color: #e9dcc0; }
.tv-strip .garlic-art { width: 100%; max-width: 11vh; height: auto; border-radius: 18%; display: block; opacity: .92; }
.tv-strip-h { font-weight: 700; font-variant-numeric: tabular-nums; }
.tv-strip .tv-ago { opacity: .7; white-space: nowrap; }
.tv-strip .tv-new { animation: tv-fade 1.6s ease-out; }

/* today's best game, for one playthrough */
.tv-reel { position: absolute !important; right: max(2.6vw, env(safe-area-inset-right)); top: 50%; width: min(25vw, 560px); transform: translateY(-50%); opacity: 0; transition: opacity 1.2s;
  display: grid; gap: .8vh; padding: 1.2vmin; border-radius: 2vmin; background: rgba(18, 14, 10, .72); border: 1px solid rgba(255, 244, 214, .14); }
.tv-reel.on { opacity: 1; }
.tv-reel[hidden] { display: none; }
.tv-reel-title { font-size: clamp(.72rem, 1.6vmin, 1.1rem); letter-spacing: .08em; text-transform: uppercase; color: #c9b88f; }
.tv-reel-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 1.2vmin; overflow: hidden; background: #1b160c; }
.tv-reel-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.tv-reel-cap { font-size: clamp(.8rem, 1.8vmin, 1.25rem); overflow-wrap: anywhere; }
.tv-reel-cap strong { color: #fff4d4; }

/* the bar: sound and fullscreen, shown on mouse move */
.tv-bar { position: absolute !important; left: 50%; bottom: max(2.4vh, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 2; display: flex; gap: 8px; padding: 6px;
  border-radius: 999px; background: rgba(18, 14, 10, .88); box-shadow: 0 4px 18px rgba(0, 0, 0, .45); transition: opacity .4s; white-space: nowrap; }
.tv-idle .tv-bar { opacity: 0; pointer-events: none; }
.tv-btn { font: inherit; font-weight: 700; font-size: 1rem; color: #f3e6c8; background: rgba(255, 244, 214, .08); border: 1px solid rgba(255, 244, 214, .28); border-radius: 999px; padding: 9px 18px; cursor: pointer; }
.tv-btn:hover { background: rgba(255, 244, 214, .16); }
.tv-btn:focus-visible { outline: 3px solid #ffd27a; outline-offset: 2px; }
.tv-btn[aria-pressed="true"] { background: #f2b632; border-color: #f2b632; color: #2b2416; }
.tv-btn[hidden] { display: none; }

/* no room for the game next to the garlic */
@media (max-width: 899px), (max-height: 559px) { .tv-reel { display: none !important; } }
/* portrait (phones, a TV on its side): the strip in two rows of four, a bigger garlic */
@media (orientation: portrait) {
  .tv-art { width: min(64vw, 34vh); }
  .tv-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4vh 4vw; width: min(100%, 4 * 14vh); }
  .tv-strip .garlic-art { max-width: 8.5vh; }
  .tv-ticker { font-size: clamp(.85rem, 2vh, 1.6rem); }
}
/* a short landscape screen (a phone on its side): the garlic beside its text, the clock smaller */
@media (orientation: landscape) and (max-height: 520px) {
  .tv { gap: 1vh; }
  .tv-hero { flex-direction: row; gap: 4vw; text-align: left; }
  .tv-hero-text { justify-items: start; }
  .tv-art { height: 100%; width: auto; max-width: 30vw; }
  .tv-time { font-size: clamp(1.8rem, 12vh, 4rem); }
  .tv-clock-label { display: none; }
  .tv-fortune { max-width: 46vw; }
  .tv-day, .tv-strip .tv-ago { display: none; }
  .tv-strip { width: min(100%, 760px); }
  .tv-strip .garlic-art { max-width: 13vh; }
}
@media (prefers-reduced-motion: reduce) {
  .tv-art { animation: none; }
  .tv-grow { animation: tv-fade 3s ease both; }
  .tv-flash, .tv-tick-flash { animation: tv-fade 2s ease; }
  .tv-tick-in, .tv-strip .tv-new { animation: tv-fade 2s ease; }
  .tv-reel, .tv-bar { transition-duration: 2s; }
}
/* the sound hint: browsers only allow sound after a click or key press */
.tv-hint { position: absolute !important; left: 50%; top: max(2.4vh, env(safe-area-inset-top)); transform: translateX(-50%); white-space: nowrap; max-width: 90vw; margin: 0; padding: 8px 16px; border-radius: 999px; background: rgba(20, 15, 10, .75); border: 1px solid rgba(242, 182, 50, .5); color: #f3e6c8; font-size: .95rem; z-index: 5; animation: tv-hint-pulse 2.4s ease-in-out infinite; }
.tv-hint[hidden] { display: none; }
@keyframes tv-hint-pulse { 50% { border-color: rgba(242, 182, 50, 1); } }
@media (prefers-reduced-motion: reduce) { .tv-hint { animation: none; } }

/* the Block Lotto draw (lottoshow.js): a banner at the top while it counts down and draws, a big card for the winner */
.tv-lotto { grid-area: top; justify-self: center; align-self: start; z-index: 3; max-width: 52vw; padding: .5em 1.1em; border-radius: 999px; text-align: center;
  font-size: clamp(.85rem, 2.3vmin, 1.7rem); font-weight: 700; color: #ffe2c4; background: rgba(40, 22, 8, .78); border: 1px solid rgba(255, 159, 90, .55); animation: tv-in .7s ease-out; }
.tv-lotto[hidden] { display: none; }
.tv-lotto-drawing { animation: tv-in .7s ease-out, tv-lotto-pulse 1.4s ease-in-out infinite; }
.tv-lotto-jackpot { border-color: #f2b632; color: #fff1c2; box-shadow: 0 0 3vmin rgba(242, 182, 50, .35); }
.tv-lotto-win { grid-area: auto; position: absolute !important; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 80vw; padding: 1em 1.6em; border-radius: 3vmin;
  font-size: clamp(1.1rem, 4.6vmin, 3.6rem); line-height: 1.25; color: #fff4d4; background: rgba(30, 18, 8, .9); border-width: 2px; animation: tv-lotto-pop 1s cubic-bezier(.2, .8, .25, 1.2) both; }
.tv-lotto-win strong { color: #f2b632; overflow-wrap: anywhere; }
.tv-lotto-win.tv-lotto-jackpot { font-size: clamp(1.3rem, 6vmin, 4.6rem); }
@keyframes tv-lotto-pulse { 50% { border-color: rgba(255, 159, 90, 1); box-shadow: 0 0 2.5vmin rgba(255, 159, 90, .4); } }
@keyframes tv-lotto-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.5); } }
@media (prefers-reduced-motion: reduce) { .tv-lotto, .tv-lotto-drawing, .tv-lotto-win { animation: tv-fade 1.5s ease both; } }

/* ?widget=1 (tv.js): the embeddable version. Sizes from the frame (vmin) without the rem floors, so it fits from 320×180
   to full HD: the garlic beside its text, the clock small, the strip only when there's room; a credit link; no bar */
.tv-credit { display: none; }
.tv-w .tv-credit { display: block; grid-area: top; justify-self: end; align-self: start; font-size: max(10px, 3.2vmin); font-weight: 700; color: #e9dcc0; opacity: .75; text-decoration: none; }
.tv-w .tv-credit:hover { opacity: 1; text-decoration: underline; }
.tv-w .tv-url, .tv-w .tv-bar, .tv-w .tv-day, .tv-w .tv-reel { display: none !important; }
.tv-w .tv { gap: 1.5vmin; padding: 3.5vmin 4vmin; }
.tv-w .tv-clock-label { font-size: max(8px, 2.6vmin); }
.tv-w .tv-time { font-size: max(16px, 11vmin); }
.tv-w .tv-clock-note { font-size: max(9px, 3vmin); }
.tv-w .tv-hero { flex-direction: row; gap: 4vmin; text-align: left; }
.tv-w .tv-hero-text { justify-items: start; gap: 1vmin; }
.tv-w .tv-art { height: 100%; width: auto; max-width: 36vw; }
.tv-w .tv-block { font-size: max(14px, 8vmin); }
.tv-w .tv-meta { font-size: max(10px, 3.8vmin); }
.tv-w .tv-fortune { font-size: max(10px, 4vmin); max-width: 54vw; }
.tv-w .tv-ticker { font-size: max(10px, 3.6vmin); }
.tv-w .tv-strip { display: none; }
.tv-w .tv-hint { font-size: max(10px, 3.2vmin); padding: .4em 1em; top: auto; bottom: 2vmin; }
.tv-w .tv-lotto { font-size: max(10px, 3.4vmin); max-width: 56vw; }
.tv-w .tv-lotto-win { font-size: max(14px, 6vmin); max-width: 88vw; }
@media (min-height: 480px) and (orientation: landscape) { .tv-w .tv-strip { display: grid; width: min(100%, 8 * 13vh); } .tv-w .tv-strip .garlic-art { max-width: 10vh; } }
@media (orientation: portrait) { .tv-w .tv-hero { flex-direction: column; text-align: center; } .tv-w .tv-hero-text { justify-items: center; } .tv-w .tv-art { height: auto; width: min(60vw, 30vh); max-width: none; } }
/* &bg=transparent: no sky, so a stream shows through; a shadow keeps the text readable on anything */
html.tv-clear, .tv-clear body, .tv-clear .tv { background: transparent !important; }
.tv-clear .tv { text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 10px rgba(0, 0, 0, .5); }
.tv-clear .tv-art { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); }
/* the oven at the front of the strip (tv.js oven()): the dough rises and browns with --p, darkens and steams with --q */
.tv-oven-box { width: 100%; max-width: 11vh; aspect-ratio: 1; border-radius: 18%; background: linear-gradient(#5b4a32, #3d3122); box-shadow: inset 0 -.6vh 0 rgba(0, 0, 0, .3); padding: 12%; display: grid; grid-template-rows: 1fr auto; gap: 8%; }
.tv-oven-win { position: relative; border-radius: 14%; overflow: hidden; background: radial-gradient(circle at 50% 80%, rgba(255, 150, 40, calc(.35 + var(--p, 0) * .45)), #1d140b 75%); border: max(1px, .25vmin) solid #2a2016; }
.tv-dough { position: absolute; left: 14%; right: 14%; bottom: 10%; height: 56%; border-radius: 50% 50% 22% 22% / 70% 70% 30% 30%; transform-origin: 50% 100%;
  transform: scaleY(calc(.55 + var(--p, 0) * .45)) scaleX(calc(.82 + var(--p, 0) * .18));
  background: color-mix(in srgb, #7a4313 calc(var(--q, 0) * 70%), color-mix(in srgb, #d38d2c calc(var(--p, 0) * 100%), #f6e8c8));
  box-shadow: inset 0 -.5vh .6vh rgba(120, 60, 10, calc(.15 + var(--p, 0) * .3)); transition: transform 1s linear, background 1s linear; }
.tv-steam { position: absolute; bottom: 60%; left: 38%; width: 10%; height: 30%; border-radius: 50%; background: rgba(255, 255, 255, .55); filter: blur(.4vmin); opacity: 0; animation: tv-steam 2.4s ease-out infinite; animation-play-state: paused; }
.tv-steam + .tv-steam { left: 56%; animation-delay: 1.2s; }
.tv-oven-knobs { height: max(4px, .7vh); border-radius: 9px; background: radial-gradient(circle, #c9b88f 30%, transparent 32%) 20% 50% / 25% 100% no-repeat, radial-gradient(circle, #c9b88f 30%, transparent 32%) 80% 50% / 25% 100% no-repeat; opacity: .7; }
@keyframes tv-steam { 0% { transform: translateY(40%) scale(.6); opacity: 0; } 30% { opacity: calc(var(--q, 0) * 1.2); } 100% { transform: translateY(-80%) scale(1.3); opacity: 0; } }
.tv-oven .tv-steam { animation-play-state: running; }
.tv-oven .tv-strip-h { color: #f2b632; }
.tv-oven-t { font-variant-numeric: tabular-nums; }
.tv-oven.tv-pop .tv-oven-box { animation: tv-pop .9s ease-out; }
@keyframes tv-pop { 0% { transform: scale(1); } 30% { transform: scale(1.12); box-shadow: 0 0 3vh rgba(242, 182, 50, .7); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .tv-dough { transition: none; } .tv-steam { animation: none; } .tv-oven.tv-pop .tv-oven-box { animation: none; } }
/* the oven is as big as the garlics next to it at every size */
.tv-strip-h { text-align: center; overflow-wrap: anywhere; }
@media (orientation: portrait) { .tv-strip .tv-oven-box { max-width: 8.5vh; } }
@media (orientation: landscape) and (max-height: 520px) { .tv-strip .tv-oven-box { max-width: 13vh; } }
@media (min-height: 480px) and (orientation: landscape) { .tv-w .tv-strip .tv-oven-box { max-width: 10vh; } }
/* one column no wider than the screen: a long ticker or day line (German, say) wraps or trims instead of widening the page */
.tv { grid-template-columns: minmax(0, 1fr); }
.tv-day { max-width: 100%; }
/* the bar under the clock keeps one width (it used to follow the note's width, so it seemed to shrink when the note
   changed), fills over the usual block time, then turns a deeper orange as a block runs late (--q) */
.tv-clock::after { width: clamp(150px, 24vmin, 340px); background: linear-gradient(90deg, color-mix(in srgb, #e0601c calc(var(--q, 0) * 100%), #f2b632) calc(var(--p, 0) * 100%), rgba(255, 244, 214, .12) 0); }
.tv-w .tv-clock::after { width: clamp(80px, 22vmin, 300px); }
/* the fortune and the block's haiku (haiku.js) take turns in one place, cross-fading every 20 s (tv.js) */
.tv-words { display: grid; justify-items: center; align-items: center; }
.tv-words > * { grid-area: 1 / 1; transition: opacity 1.4s ease; }
.tv-haiku { opacity: 0; font-style: italic; font-size: clamp(.95rem, 2.7vmin, 2rem); line-height: 1.35; color: #f3e6c8; }
.tv-haiku span { display: block; }
.tv-show-haiku .tv-fortune { opacity: 0; }
.tv-show-haiku .tv-haiku { opacity: 1; }
.tv-w .tv-words { justify-items: start; }
.tv-w .tv-haiku { font-size: max(9px, 3.4vmin); }
@media (orientation: landscape) and (max-height: 520px) { .tv-words { justify-items: start; } .tv-haiku { font-size: clamp(.85rem, 4vh, 1.4rem); } }
@media (orientation: portrait) { .tv-w .tv-words { justify-items: center; } }
@media (prefers-reduced-motion: reduce) { .tv-words > * { transition-duration: 2.5s; } }