/* Timmy TV: the lesson of the day, on a green paper-cut TV. */

/* Two friendly fonts: Fredoka, round and playful, for titles, labels and
   buttons; Andika, made for children learning to read, for what Timmy says. */
.tv-page {
  --display: "Fredoka", "Space Grotesk", sans-serif;
  --read: "Andika", "DM Sans", sans-serif;
  font-family: var(--display);
  position: relative; overflow: hidden;
  padding-block: var(--sp-5, 2rem) var(--sp-7, 4rem);
  background:
    linear-gradient(180deg, rgb(8 14 34 / 0.55), rgb(8 14 34 / 0.85)),
    url("/img/hoot-ground-night.webp") center / cover no-repeat,
    #0d1730;
  color: #fff;
}
.tv-head { text-align: center; margin-bottom: var(--sp-4, 1.5rem); }
.tv-head__brand {
  margin: 0; font: 900 clamp(2.4rem, 7vw, 4.6rem)/1 var(--display, sans-serif);
  letter-spacing: 0.02em; color: #f6a623;
  text-shadow: 0 4px 0 #8a4b0f, 0 10px 24px rgb(0 0 0 / 0.5);
}
.tv-head__brand span { color: #fff; }
.tv-head__eyebrow {
  display: inline-block; margin: 0.8rem 0 0.3rem; padding: 0.25rem 0.8rem; border-radius: 99px;
  background: #e4572e; color: #fff;
  font: 800 0.8rem/1.4 var(--display, sans-serif); letter-spacing: 0.12em; text-transform: uppercase;
}
.tv-head__title { margin: 0.2rem 0 0; font: 800 clamp(1.3rem, 3.4vw, 2rem)/1.2 var(--display, sans-serif); }
.tv-head__number { margin: 0.3rem 0 0; color: #cfe0ef; font-size: 0.95rem; }
.tv-more { margin: var(--sp-5, 2rem) auto 0; text-align: center; color: #cfe0ef; font-size: 0.95rem; }

/* --- The TV ------------------------------------------------------------------
   The green frame is drawn as a border-image laid over everything: its four
   corners keep their shape and only the wavy edges between them stretch, so
   the TV can be 4:3 on a laptop, tall on a phone, or fill a whole screen.
   --u is one pixel of the frame picture (1448 x 1086) at the current size. */
.tv-wrap { container-type: inline-size; width: min(1000px, 100%); margin-inline: auto; }
.tv {
  --u: calc(min(100cqw, 1000px) / 1448);
  position: relative; overflow: hidden; display: grid;
  aspect-ratio: 1448 / 1086;
  /* Inside the see-through middle of the frame, clear of its waves. */
  padding: calc(158 * var(--u)) calc(112 * var(--u)) calc(126 * var(--u)) calc(110 * var(--u));
  background:
    linear-gradient(rgb(10 16 30 / 0.3), rgb(10 16 30 / 0.3)),
    var(--scene, none) center / cover no-repeat,
    #1b2a4a;
  filter: drop-shadow(0 24px 40px rgb(0 0 0 / 0.55));
}
.tv__frame {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  border-style: solid;
  border-width: calc(300 * var(--u)) calc(260 * var(--u)) calc(330 * var(--u)) calc(260 * var(--u));
  border-image: url("/img/timmy-tv-frame.png") 300 260 330 260 stretch;
}

.tv__stage {
  position: relative; z-index: 1; min-height: 0;
  display: grid; gap: calc(22 * var(--u)) calc(30 * var(--u));
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  grid-template-areas: "card timmy" "sub sub" "nav nav";
}

/* The picture card: KidWings stickers on a frosted window onto the scene, so
   there is no white box around the white edges of the stickers. */
.tv__card {
  grid-area: card; position: relative; overflow: hidden;
  height: 100%; aspect-ratio: 4 / 3; max-width: 100%; justify-self: start;
  container-type: inline-size;
  border-radius: 18px; border: 2px solid rgb(255 255 255 / 0.35);
  background: rgb(255 244 220 / 0.12);
  -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15);
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.35), inset 0 0 40px rgb(255 255 255 / 0.08);
}
.tv__card--night { background: url("/img/ground-meadow-night.webp") center / cover; }
.tv__card.is-in { animation: tv-card-in 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes tv-card-in { from { transform: scale(0.85) rotate(-2deg); opacity: 0; } }

.timmy--tv {
  grid-area: timmy; align-self: end; justify-self: center;
  height: 100%; aspect-ratio: 1; max-width: 100%; max-height: 260px;
}
.timmy--tv .timmy__btn, .timmy--tv .timmy__body { height: 100%; }
.timmy--tv .timmy__body { scale: -1 1; } /* facing left, towards the card */

/* Timmy's words, with the quiz and the links when there are any. */
.tv__sub {
  grid-area: sub; position: relative; margin: 0;
  padding: 0.75rem 1rem; border-radius: 18px;
  background: #fffaf0; color: #1f2d33; box-shadow: 0 10px 24px rgb(0 0 0 / 0.4);
}
.tv__sub::after { /* the tail, up towards Timmy */
  content: ""; position: absolute; right: 18%; top: -13px;
  border: 13px solid transparent; border-bottom-color: #fffaf0; border-top: 0;
}
.tv__who {
  display: inline-block; margin-bottom: 0.25rem; padding: 0.05rem 0.55rem; border-radius: 99px;
  background: #2e9e8f; color: #fff; font: 800 0.7rem/1.5 var(--display, sans-serif);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.tv__talk { margin: 0; min-height: 2.7em; font: 400 clamp(1.05rem, 2.1cqw, 1.3rem)/1.4 var(--read); }
.tv__extra:empty { display: none; }
.tv__extra { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; align-items: center; }
.tv__options { display: flex; flex-wrap: wrap; gap: 0.5rem; width: 100%; }
.tv__option {
  flex: 1 1 12rem; padding: 0.55rem 0.8rem; border-radius: 12px; cursor: pointer; text-align: left;
  background: #fff; border: 3px solid #eadfc8; color: #1f2d33;
  font: 700 0.98rem/1.25 var(--display, sans-serif);
}
.tv__option:hover:not(:disabled) { border-color: #f6a623; }
.tv__option.is-right { background: #e3f6ee; border-color: #2e9e8f; }
.tv__option.is-right::before { content: "✓ "; color: #2e9e8f; }
.tv__option.is-wrong { opacity: 0.55; animation: tv-shake 0.4s; text-decoration: line-through; }
@keyframes tv-shake { 25% { translate: -6px 0; } 75% { translate: 6px 0; } }
.tv__try {
  padding: 0.5rem 0.8rem; border-radius: 12px; text-decoration: none;
  background: #fff; border: 3px solid #f6a623; color: #1f2d33; font: 700 0.98rem/1.25 var(--display, sans-serif);
}
.tv__try b {
  margin-right: 0.3rem; padding: 0.05rem 0.5rem; border-radius: 99px;
  background: #c97a06; color: #fff; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.tv__source { flex-basis: 100%; margin: 0; font: 400 0.88rem/1.35 var(--read); color: #4d5b60; }
.tv__source a { color: #155f56; font-weight: 700; }

/* The buttons, along the bottom of the screen. The bottom right corner of
   the frame has a wave in it, so the row stops short of it. */
.tv__nav {
  grid-area: nav; display: flex; align-items: center; gap: 0.6rem;
  padding-right: calc(110 * var(--u));
}
.tv__dots { flex: 1; display: flex; gap: 0.35rem; justify-content: center; }
.tv__dot { width: 10px; height: 10px; border-radius: 50%; background: rgb(255 255 255 / 0.4); box-shadow: 0 1px 3px rgb(0 0 0 / 0.5); }
.tv__dot.is-on { background: #f6a623; }
.tv__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
  min-height: 2.6rem; padding: 0.4rem 1rem; border-radius: 99px; cursor: pointer;
  background: #fffaf0; color: #1f2d33; border: 0;
  box-shadow: 0 4px 0 #c8bba0, 0 8px 16px rgb(0 0 0 / 0.35);
  font: 800 1rem/1 var(--display, sans-serif);
}
.tv__btn:hover:not(:disabled) { translate: 0 -1px; }
.tv__btn:active:not(:disabled) { translate: 0 3px; box-shadow: 0 1px 0 #c8bba0; }
.tv__btn:disabled { opacity: 0.45; cursor: default; }
.tv__btn[hidden] { display: inline-flex; visibility: hidden; }
.tv__btn--go { background: #f6a623; box-shadow: 0 4px 0 #a8650b, 0 8px 16px rgb(0 0 0 / 0.35); }
.tv__btn--full { width: 2.6rem; padding: 0; }
.tv__btn--full svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tv-wrap.is-full .tv__btn--full svg path { d: path("M9 4v5H4M20 9h-5V4M15 20v-5h5M4 15h5v5"); }

/* Confetti when the quiz is right. */
.tv-bit {
  position: absolute; z-index: 4; top: -12px; left: var(--x); width: 10px; height: 14px;
  background: var(--c); border-radius: 2px;
  animation: tv-fall 2.2s ease-in var(--d) both;
}
@keyframes tv-fall { to { transform: translateY(900px) rotate(var(--r)); opacity: 0.2; } }

/* --- What goes on the card ------------------------------------------------------
   Sizes in cqw: % of the card's width, so a picture looks the same at any size. */
.tv-st {
  position: absolute; height: auto;
  filter: drop-shadow(0 1.2cqw 1.6cqw rgb(0 0 0 / 0.3));
  -webkit-user-select: none; user-select: none; pointer-events: none;
}
.tv__card.is-in .tv-st--pop { animation: tv-pop 0.6s 0.1s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes tv-pop { from { scale: 0.6; opacity: 0; } }
.tv-st--peek { animation: tv-peek 2.4s ease-in-out infinite; }
@keyframes tv-peek { 0%, 100% { translate: 0 18%; } 45%, 60% { translate: 0 0; } }
.tv-st--faint { opacity: 0.6; }
.tv-st--rumble { animation: tv-rumble 0.22s steps(2) infinite; }
@keyframes tv-rumble { 50% { translate: 0 -0.5cqw; } }

.tv-tag { /* a little white label, like a sticker of its own */
  position: absolute; translate: -50% -50%; white-space: nowrap;
  padding: 0.9cqw 2.2cqw; border-radius: 99px;
  background: #fff; box-shadow: 0 0.6cqw 1.6cqw rgb(0 0 0 / 0.3);
  font: 900 4.6cqw/1 var(--display, sans-serif); color: #e4572e;
}
/* Question marks and stars float on their own, with no label. */
.tv-tag--q, .tv-tag--star { padding: 0; background: none; box-shadow: none; text-shadow: 0 0.4cqw 1.2cqw rgb(0 0 0 / 0.45); }
.tv-tag--big { font-size: 7cqw; letter-spacing: 0.06em; text-transform: uppercase; }
.tv-tag--q { font-size: 11cqw; color: #2e9e8f; animation: tv-bob 1.8s ease-in-out infinite; }
.tv-tag--soft { color: #5d6b70; }
.tv-tag--night { animation: tv-blink 2.4s ease-in-out infinite; }
.tv-tag--loud { color: #4a6fd9; font-size: 6.4cqw; animation: tv-shout 0.5s ease-in-out infinite alternate; }
.tv-tag--tiny { color: #5d6b70; font-size: 3.4cqw; }
.tv-tag--star { color: #ffcf4d; font-size: 10cqw; animation: tv-bob 1.6s ease-in-out infinite; }
@keyframes tv-bob { 50% { translate: -50% -62%; } }
@keyframes tv-blink { 0%, 30% { opacity: 0; } 50%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tv-shout { to { scale: 1.08; rotate: -3deg; } }

.tv-caption {
  position: absolute; left: 50%; bottom: 3cqw; translate: -50% 0; width: max-content; max-width: 92%;
  padding: 1.4cqw 3.2cqw; border-radius: 99px; text-align: center;
  background: rgb(15 24 40 / 0.78); color: #fff;
  font: 800 4.2cqw/1.2 var(--display, sans-serif);
}

.tv-waves { position: absolute; width: 0; height: 0; }
.tv-waves i {
  position: absolute; left: 0; top: 0; translate: -50% -50%; border-radius: 50%;
  border: 0.9cqw solid transparent; border-right-color: #e4572e;
  animation: tv-wave 1.4s ease-in-out infinite;
}
.tv-waves i:nth-child(1) { width: 5cqw; height: 5cqw; }
.tv-waves i:nth-child(2) { width: 10cqw; height: 10cqw; animation-delay: 0.18s; }
.tv-waves i:nth-child(3) { width: 15cqw; height: 15cqw; animation-delay: 0.36s; }
@keyframes tv-wave { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }

.tv-ear { /* where an ear opening is: a red dot with a white ring that pulses */
  position: absolute; width: 3.4cqw; height: 4.8cqw; translate: -50% -50%; border-radius: 50%;
  background: #e4572e; border: 0.7cqw solid #fff;
  box-shadow: 0 0.4cqw 1.2cqw rgb(0 0 0 / 0.35);
  animation: tv-ear 1.4s ease-in-out infinite;
}
@keyframes tv-ear { 50% { box-shadow: 0 0 0 1.4cqw rgb(228 87 46 / 0.35), 0 0.4cqw 1.2cqw rgb(0 0 0 / 0.35); } }
.tv-branch {
  position: absolute; left: 2%; top: 21%; width: 32%; height: 2.4cqw; border-radius: 99px;
  background: #7a5230;
}

/* --- On a phone: a taller TV ---------------------------------------------------
   The picture on top, then Timmy's words with Timmy beside them, then the
   buttons. The TV grows to fit. */
@container (max-width: 620px) {
  .tv { aspect-ratio: auto; }
  .tv__stage {
    grid-template-columns: minmax(0, 1fr) 30%;
    grid-template-rows: auto auto auto;
    grid-template-areas: "card card" "sub timmy" "nav nav";
    gap: 10px 8px;
  }
  .tv__card { height: auto; width: 100%; border-width: 3px; border-radius: 12px; }
  .timmy--tv { height: auto; width: 100%; align-self: end; }
  .tv__sub { padding: 0.6rem 0.75rem; }
  .tv__sub::after {
    right: -12px; top: auto; bottom: 1.4rem;
    border: 12px solid transparent; border-left-color: #fffaf0; border-right: 0;
  }
  .tv__talk { min-height: 4em; font-size: 1rem; }
  .tv__option, .tv__try { font-size: 0.9rem; flex-basis: 100%; }
  .tv__nav { gap: 0.35rem; padding-right: 0; }
  .tv__dots { gap: 0.2rem; }
  .tv__dot { width: 6px; height: 6px; }
  .tv__btn { min-height: 2.3rem; padding-inline: 0.75rem; font-size: 0.9rem; }
  .tv__btn--full { width: 2.3rem; padding: 0; }
  [data-tv-back] span { display: none; }
}

/* --- Full screen -----------------------------------------------------------------
   The TV over the whole window: as big as fits, still 4:3 on a wide screen. */
html.tv-full { overflow: hidden; }
.tv-wrap.is-full {
  position: fixed; inset: 0; z-index: 2000; width: auto; max-width: none;
  display: grid; place-items: center; padding: 0.5rem; overflow: auto;
  background:
    linear-gradient(180deg, rgb(8 14 34 / 0.6), rgb(8 14 34 / 0.9)),
    url("/img/hoot-ground-night.webp") center / cover no-repeat, #0d1730;
}
.tv-wrap.is-full .tv { width: min(100%, calc((100dvh - 1rem) * 1448 / 1086)); }
.tv-wrap.is-full .timmy--tv { max-height: none; }
.tv-wrap.is-full .tv__talk { font-size: clamp(1.05rem, 1.9cqw, 1.7rem); }
@container (max-width: 620px) {
  .tv-wrap.is-full .tv { width: 100%; min-height: calc(100dvh - 1rem); align-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .tv__card.is-in, .tv-st--pop, .tv-st--peek, .tv-st--rumble, .tv-tag, .tv-waves i, .tv-ear, .tv-bit { animation: none !important; }
}

/* The sound switch: a speaker with waves, or with a cross when it is off. */
[data-tv-sound] .tv-spk { fill: currentColor; stroke: none; }
[data-tv-sound] .tv-spk-off { display: none; }
[data-tv-sound].is-off .tv-spk-on { display: none; }
[data-tv-sound].is-off .tv-spk-off { display: inline; }
[data-tv-sound].is-off { color: #8a969a; }

/* The start button over the first picture: sound needs a click to begin. */
.tv__start {
  position: absolute; z-index: 3; left: 50%; top: 84%; translate: -50% -50%;
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.7em 1.4em; border: 0; border-radius: 99px; cursor: pointer;
  background: #f6a623; color: #1f2d33;
  box-shadow: 0 6px 0 #a8650b, 0 14px 28px rgb(0 0 0 / 0.4);
  font: 700 clamp(1.1rem, 6cqw, 2rem)/1 var(--display, sans-serif);
  animation: tv-start 1.6s ease-in-out infinite;
}
.tv__start:active { translate: -50% calc(-50% + 4px); box-shadow: 0 2px 0 #a8650b; }
@keyframes tv-start { 50% { scale: 1.06; } }
@media (prefers-reduced-motion: reduce) { .tv__start { animation: none; } }