/* =====================================================================
   Tadapop explainer film — fullscreen cinematic player + app-mock styles
   Self-contained; brand tokens mirror styles.css. No dependencies.
   Internal scene coordinate space is 1000 x 563 (16:9), scaled to fit.
   ===================================================================== */

:root {
  --f-void: #0B0E17;
  --f-panel: #141A29;
  --f-panel2: #1A2233;
  --f-line: #26304a;
  --f-line-soft: #1c2540;
  --f-ink: #E8ECF5;
  --f-dim: #7C8AA5;
  --f-faint: #4F5B76;
  --f-amber: #FFB454;
  --f-amber-deep: #E8922E;
  --f-go: #5BE39B;
  --f-go-deep: #2FB979;
  --f-blue: #7FA9FF;
  --f-red: #FF9A7C;
  --f-teal: #38D9D2;
  --f-violet: #C9A6FF;
  --f-disp: 'Chivo', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --f-body: 'Inter', system-ui, sans-serif;
}

/* ---- hero launch button ---- */
.film-cta-row { display: flex; justify-content: center; margin: 4px 0 30px; }
.film-launch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--f-ink);
  background: rgba(20, 26, 41, 0.7);
  border: 1px solid var(--f-line);
  border-radius: 999px;
  padding: 11px 20px 11px 14px;
  cursor: pointer;
  transition: border-color .2s, transform .08s, box-shadow .25s, background .2s;
}
.film-launch:hover {
  border-color: rgba(255, 180, 84, 0.55);
  box-shadow: 0 0 0 4px rgba(255, 180, 84, 0.08), 0 14px 40px -16px rgba(255, 180, 84, 0.5);
  background: rgba(26, 34, 51, 0.85);
}
.film-launch:active { transform: translateY(1px); }
.film-launch-ico {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--f-amber), var(--f-amber-deep));
  color: #1a1206;
  font-size: 12px;
  padding-left: 2px;
  box-shadow: 0 0 18px -2px rgba(255, 180, 84, 0.7);
  animation: film-pulse 2.4s ease-out infinite;
}
.film-launch b { color: var(--f-amber); font-weight: 700; }
.film-launch .film-launch-time { color: var(--f-faint); }

/* ---- overlay ---- */
.film-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: radial-gradient(1200px 700px at 50% -8%, rgba(255, 180, 84, 0.06), transparent 60%), #05070C;
  display: flex;
  opacity: 0;
  transition: opacity .35s ease;
}
.film-overlay[hidden] { display: none; }
.film-overlay.show { opacity: 1; }

/* ---- top bar ---- */
.film-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  pointer-events: none;
}
.film-top .film-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-disp); font-weight: 900; letter-spacing: 2px; font-size: 14px; color: var(--f-ink);
}
.film-top .film-brand img { width: 24px; height: 24px; border-radius: 6px; }
.film-close {
  pointer-events: auto;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em;
  color: var(--f-dim); background: rgba(20,26,41,.6); border: 1px solid var(--f-line);
  border-radius: 8px; padding: 8px 12px; cursor: pointer; transition: color .2s, border-color .2s;
}
.film-close:hover { color: var(--f-ink); border-color: var(--f-faint); }

/* ---- stage ---- */
.film-stagewrap { position: absolute; inset: 0; overflow: hidden; }
.film-stage {
  position: absolute;
  left: 50%; top: 46%;
  width: 1000px; height: 563px;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
}
.film-scene {
  position: absolute; inset: 0;
  font-family: var(--f-body);
  color: var(--f-ink);
}

/* ---- captions ---- */
.film-caption {
  position: absolute;
  left: 50%; bottom: 86px;
  transform: translateX(-50%);
  z-index: 5;
  width: min(86vw, 920px);
  text-align: center;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(20px, 3vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
.film-caption .hi { color: var(--f-amber); }
.film-caption .go { color: var(--f-go); }

/* ---- controls ---- */
.film-controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px 18px;
  background: linear-gradient(0deg, rgba(5,7,12,.85), transparent);
}
.film-progress {
  position: relative;
  flex: 1;
  height: 4px;
  border-radius: 3px;
  background: rgba(124, 138, 165, 0.25);
  overflow: hidden;
}
.film-progress > span {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--f-amber-deep), var(--f-amber));
  box-shadow: 0 0 10px rgba(255, 180, 84, 0.6);
}
.film-btn {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em;
  color: var(--f-dim); background: rgba(20,26,41,.6); border: 1px solid var(--f-line);
  border-radius: 8px; padding: 8px 12px; cursor: pointer; transition: color .2s, border-color .2s;
  white-space: nowrap;
}
.film-btn:hover { color: var(--f-ink); border-color: var(--f-faint); }
.film-time { font-family: var(--f-mono); font-size: 11px; color: var(--f-faint); min-width: 78px; text-align: right; }

/* "tap for sound" prompt shown during muted autoplay */
.film-unmute {
  position: absolute;
  left: 50%; top: 70px;
  transform: translateX(-50%);
  z-index: 8;
  display: none;
  font-family: var(--f-mono); font-size: 13px; letter-spacing: .06em;
  color: #1a1206;
  background: linear-gradient(180deg, var(--f-amber), var(--f-amber-deep));
  border: none; border-radius: 999px; padding: 11px 22px; cursor: pointer;
  box-shadow: 0 0 0 0 rgba(255, 180, 84, .5);
  animation: film-pulse 1.8s ease-out infinite;
}
@keyframes film-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 180, 84, .5); }
  70% { box-shadow: 0 0 0 16px rgba(255, 180, 84, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 180, 84, 0); }
}

/* ---- host avatar (presenter) ---- */
.film-host {
  position: absolute;
  left: 26px; bottom: 24px;
  width: 132px;
  z-index: 4;
  text-align: center;
  opacity: 0;
}
/* No ring/clip: BOBO stands free in the corner (full body). */
.film-host .film-host-ring {
  position: relative;
  width: 100%; aspect-ratio: 1844 / 2128;
  margin: 0 auto;
  background: none; box-shadow: none; padding: 0; border-radius: 0;
}
.film-host .film-host-inner {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 0; overflow: visible; background: none;
}
.film-host svg { width: 100%; height: 100%; display: block; }
/* Painted-hero host: full-body BOBO as stacked PNG layers (base + eye + mouth).
   Box aspect matches the art, so the % transform-origins map to image space. */
.film-host .bobo-fit { position: absolute; inset: 0; }
.film-host .bobo { position: absolute; inset: 0; }
.film-host .bobo-layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; pointer-events: none; user-select: none;
}
.film-host .bobo-eye { transform-origin: 41.81% 28.34%; }
.film-host #alienMouth { transform-origin: 43.06% 39.71%; transform: scaleY(.18); }
.film-host .film-host-name {
  margin-top: 8px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; color: var(--f-dim);
}
.film-host .film-host-name b { color: var(--f-amber); font-weight: 700; }
/* Bobo's "Tada!" celebration bubble (pops on task completion) */
.film-host-tada {
  position: absolute; top: -14px; left: 70px; z-index: 5;
  padding: 5px 11px; border-radius: 14px 14px 14px 3px;
  background: linear-gradient(135deg, #FFD978, #FF9F45);
  color: #2A1700; font-family: var(--f-disp); font-weight: 800; font-size: 13px;
  white-space: nowrap; pointer-events: none;
  box-shadow: 0 6px 18px -4px rgba(255, 160, 70, .7);
  opacity: 0; transform: scale(.3);
}
.film-host-tada.show { animation: film-tada 1.4s ease forwards; }
@keyframes film-tada {
  0%   { opacity: 0; transform: scale(.3) translateY(8px) rotate(-8deg); }
  14%  { opacity: 1; transform: scale(1.18) translateY(0) rotate(-5deg); }
  28%  { transform: scale(1) rotate(-5deg); }
  78%  { opacity: 1; transform: scale(1) rotate(-5deg); }
  100% { opacity: 0; transform: scale(.95) translateY(-8px) rotate(-5deg); }
}
.film-wave {
  display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 14px; margin-top: 6px;
}
.film-wave i {
  width: 3px; height: 4px; border-radius: 2px; background: var(--f-go);
  box-shadow: 0 0 6px rgba(91, 227, 155, 0.6);
}
.film-host.speaking .film-wave i { animation: film-eq 0.7s ease-in-out infinite; }
/* Bobo (vector host): rigged parts. Eye blinks always; body/antennae/arms come
   alive while talking. Mouth lip-sync is driven from JS (#alienMouth). */
.film-host .ag-eye { animation: ag-blink 5s ease-in-out infinite; }
@keyframes ag-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
.film-host.speaking .ag-bob { animation: ag-bob 1.1s ease-in-out infinite; }
@keyframes ag-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-1.5px) rotate(-1deg); } }
.film-host.speaking .ag-ant { animation: ag-ant 0.95s ease-in-out infinite; }
@keyframes ag-ant { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.film-host.speaking .ag-arm-l { animation: ag-arm-l 1.25s ease-in-out infinite; }
@keyframes ag-arm-l { 0%, 100% { transform: rotate(0deg); } 40% { transform: rotate(-8deg); } 70% { transform: rotate(4deg); } }
.film-host.speaking .ag-arm-r { animation: ag-arm-r 1.45s ease-in-out infinite; }
@keyframes ag-arm-r { 0%, 100% { transform: rotate(0deg); } 40% { transform: rotate(8deg); } 70% { transform: rotate(-4deg); } }
.film-wave i:nth-child(2) { animation-delay: .12s; }
.film-wave i:nth-child(3) { animation-delay: .24s; }
.film-wave i:nth-child(4) { animation-delay: .36s; }
.film-wave i:nth-child(5) { animation-delay: .18s; }
@keyframes film-eq { 0%, 100% { height: 4px; } 50% { height: 14px; } }

/* ---- end panel ---- */
.film-end {
  position: absolute; inset: 0; z-index: 7;
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: rgba(5, 7, 12, 0.72);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .4s ease;
}
.film-end.show { display: flex; opacity: 1; }
.film-end img { width: 84px; height: 84px; border-radius: 20px; box-shadow: 0 0 52px rgba(255, 180, 84, 0.25); }
.film-end h3 { font-family: var(--f-disp); font-weight: 900; font-size: clamp(22px, 4vw, 32px); text-align: center; }
.film-end .film-end-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.film-end .film-cta {
  font-family: var(--f-disp); font-weight: 700; letter-spacing: 1px; font-size: 14px;
  color: #1a1205; background: var(--f-amber); border: none; border-radius: 10px; padding: 13px 24px; cursor: pointer;
  transition: background .15s;
}
.film-end .film-cta:hover { background: var(--f-amber-deep); }

/* =====================================================================
   App-mock primitives (recreated, branded UI inside scenes)
   ===================================================================== */
.fm-mono { font-family: var(--f-mono); }
.fm-disp { font-family: var(--f-disp); }
.fm-panel {
  background: linear-gradient(180deg, var(--f-panel), var(--f-void));
  border: 1px solid var(--f-line);
  border-radius: 14px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .03);
}
.fm-row { display: flex; align-items: center; gap: 14px; padding: 11px 10px; border-top: 1px solid var(--f-line-soft); }
.fm-row:first-child { border-top: none; }
.fm-toggle {
  position: relative; width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
  border: 1.5px solid var(--f-faint); background: rgba(255, 255, 255, .02);
  display: grid; place-items: center; color: var(--f-amber);
  font-family: var(--f-mono); font-weight: 700; font-size: 13px;
}
.fm-toggle.on { border-color: var(--f-go-deep); background: rgba(91, 227, 155, .14); color: var(--f-go);
  box-shadow: 0 0 0 4px rgba(91, 227, 155, .1), 0 0 22px -4px rgba(91, 227, 155, .6); }
.fm-toggle.run { border-color: var(--f-blue); color: var(--f-blue); background: rgba(127, 169, 255, .12); }
.fm-toggle svg { width: 21px; height: 21px; }
.fm-check { fill: none; stroke: var(--f-go); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 26; stroke-dashoffset: 26; }
.fm-toggle.on .fm-check { animation: fm-draw .36s ease forwards; }
@keyframes fm-draw { to { stroke-dashoffset: 0; } }
.fm-title { font-family: var(--f-disp); font-size: 17px; font-weight: 500; }
.fm-title.done { color: var(--f-dim); text-decoration: line-through; text-decoration-color: rgba(124,138,165,.5); }
.fm-meta { display: flex; align-items: center; gap: 10px; margin-top: 3px; flex-wrap: wrap; }
.fm-meta span { font-family: var(--f-mono); font-size: 11px; color: var(--f-faint); letter-spacing: .04em; }
.fm-tag {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; padding: 4px 8px; border-radius: 6px;
  border: 1px solid rgba(255, 180, 84, .4); color: var(--f-amber); white-space: nowrap;
}
.fm-timerbar { height: 6px; border-radius: 3px; background: rgba(79, 91, 118, .25); overflow: hidden; margin-top: 7px; }
.fm-timerbar > div { height: 100%; width: 0%; background: linear-gradient(90deg, #4F7FE8, var(--f-blue));
  box-shadow: 0 0 8px rgba(127, 169, 255, .6); }
.fm-float {
  position: absolute; font-family: var(--f-mono); font-weight: 700; color: var(--f-go); font-size: 22px;
  text-shadow: 0 0 14px rgba(91, 227, 155, .7); opacity: 0; pointer-events: none;
}
.fm-seg { display: flex; gap: 5px; flex: 1; }
.fm-seg > i { flex: 1; height: 9px; border-radius: 3px; background: rgba(79, 91, 118, .28); display: block; }
.fm-seg > i.on { background: linear-gradient(90deg, var(--f-go-deep), var(--f-go)); box-shadow: 0 0 12px -2px rgba(91, 227, 155, .6); }
.fm-cleared {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 10px;
  border: 1px solid rgba(91, 227, 155, .35); background: rgba(91, 227, 155, .08); color: var(--f-go);
  font-family: var(--f-mono); font-size: 13px; letter-spacing: .12em;
}
.fm-stat { flex: 1; padding: 16px 18px; }
.fm-stat .k { font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; color: var(--f-faint); }
.fm-stat .v { font-family: var(--f-disp); font-weight: 700; font-size: 30px; color: var(--f-amber); margin-top: 6px; }
.fm-cell { aspect-ratio: 1; border-radius: 3px; background: rgba(79, 91, 118, .16); }

/* leaderboard */
.fm-lb-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 10px; border-radius: 10px;
  border-top: 1px solid var(--f-line-soft);
}
.fm-lb-row.me { background: rgba(127, 169, 255, .08); border-top-color: transparent; }
.fm-rank { font-family: var(--f-disp); font-weight: 700; font-size: 18px; width: 26px; color: var(--f-faint); text-align: center; }
.fm-rank.lead { color: var(--f-amber); }
.fm-ava {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-mono); font-weight: 700; font-size: 13px; flex: 0 0 auto;
  background: var(--f-panel2); border: 1px solid var(--f-line); color: var(--f-dim);
}
.fm-ava.me { background: var(--f-blue); color: #0a1022; }
.fm-lb-name { font-family: var(--f-disp); font-size: 16px; font-weight: 500; color: var(--f-dim); }
.fm-lb-row.me .fm-lb-name { color: var(--f-ink); font-weight: 700; }
.fm-lb-sub { font-family: var(--f-mono); font-size: 10px; color: var(--f-faint); margin-top: 2px; letter-spacing: .06em; }
.fm-lb-sub.done { color: var(--f-go); }
.fm-lb-score { font-family: var(--f-mono); font-weight: 700; font-size: 17px; margin-left: auto; }
.fm-lb-score.lead { color: var(--f-amber); }

/* confetti for the win scene */
.fm-conf { position: absolute; width: 12px; height: 12px; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .film-overlay, .film-overlay * { transition: none !important; }
  .film-host .ag-eye, .film-host.speaking .ag-bob, .film-host.speaking .ag-ant,
  .film-host.speaking .ag-arm-l, .film-host.speaking .ag-arm-r { animation: none !important; }
}

/* ==========================================================================
   Traditional Chinese
   ==========================================================================
   The film has its OWN font variables, so the CJK stack added to styles.css
   never reached it — this overlay was the worst-looking Chinese on the site
   while the pages around it were already fixed.

   Two problems, the same two the pages had:

   1. None of Chivo / Inter / JetBrains Mono contains a CJK glyph, so every
      Chinese character was drawn by an unspecified fallback. The TC faces go
      BEFORE system-ui deliberately: on Android system-ui font-links to Noto
      Sans CJK **SC**, which puts Simplified glyph shapes on a Traditional
      page. The mono falls through to the same proportional sans on purpose —
      mono is here for stable digits, and a browser resolving CJK through the
      `monospace` generic can land on a full-width CJK mono, which is far worse
      than a proportional CJK beside monospaced Latin.

   2. Letter-spacing is a Latin idiom. Applied to Chinese it pushes the
      characters apart and the word stops reading as a word — 「喝 水 挑 戰」,
      「最 終 排 名」. Every rule below whose text can be Chinese loses its
      tracking; the ones that are always Latin (the BOBO host name is a Latin
      brand, the timecode is digits) keep it.

   Scoped to :lang(zh-Hant), which the overlay inherits from <html> on /zh, so
   the English film is untouched. */
:root:lang(zh-Hant) {
  --f-disp: 'Chivo', 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --f-mono: 'JetBrains Mono', 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --f-body: 'Inter', 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
}

:lang(zh-Hant) .film-launch,
:lang(zh-Hant) .film-close,
:lang(zh-Hant) .film-btn,
:lang(zh-Hant) .film-unmute,
:lang(zh-Hant) .film-end .film-cta,
:lang(zh-Hant) .fm-meta span,
:lang(zh-Hant) .fm-stat .k,
:lang(zh-Hant) .fm-lb-sub,
:lang(zh-Hant) .fm-lb-head,
:lang(zh-Hant) .fm-chip { letter-spacing: normal; }

/* Captions are the film. They carry the display face at a large size, where
   Latin negative tracking closes CJK glyphs into each other, and a leading
   tuned for Latin lets two Chinese lines touch. */
:lang(zh-Hant) .film-cap { letter-spacing: normal; line-height: 1.35; }