/*!
 * Creative Spark — Creative Media Playground
 * พัฒนาระบบโดย อาจารย์ ดร.วรวิทย์ สังฆทิพย์
 * ภาควิชาสื่อนฤมิต คณะวิทยาการสารสนเทศ มหาวิทยาลัยมหาสารคาม
 * อีเมล worawith.s@msu.ac.th
 */
/* ═════════ โครงของ Hero (เหมือนเวอร์ชันเดิม) ═════════ */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: var(--header-h);
  overflow: clip;
  touch-action: pan-y;
  background: var(--bg);
  transition: background-color 0.6s;
  --accent: var(--sky);
  --accent-fill: var(--sky);
}
.hero:has(input[value='game']:checked) { --accent: var(--indigo-bright); --accent-fill: var(--indigo); }
.hero:has(input[value='film']:checked) { --accent: var(--teal-bright); --accent-fill: var(--teal); background: #000; }

.hero-stage, .poster, .hero-burst { position: absolute; inset: 0; pointer-events: none; }
.hero-stage { z-index: -1; }
.poster { opacity: 0; transition: opacity 0.6s ease; }
.poster svg { width: 100%; height: 100%; }
.hero:has(input[value='animation']:checked) .poster-animation,
.hero:has(input[value='game']:checked) .poster-game,
.hero:has(input[value='film']:checked) .poster-film { opacity: 1; }

.poster-animation {
  background:
    radial-gradient(60% 45% at 80% 15%, color-mix(in srgb, var(--sky) 26%, transparent), transparent 70%),
    radial-gradient(50% 40% at 10% 90%, color-mix(in srgb, var(--sky) 14%, transparent), transparent 70%);
}
.poster-film { background: #000; }

.spark-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.defs { position: absolute; }

.hud-frame span { position: absolute; width: 44px; height: 44px; border: 0 solid var(--indigo-bright); }
.hud-frame span:nth-child(1) { top: calc(var(--header-h) + 12px); left: 12px; border-width: 6px 0 0 6px; }
.hud-frame span:nth-child(2) { top: calc(var(--header-h) + 12px); right: 12px; border-width: 6px 6px 0 0; }
.hud-frame span:nth-child(3) { bottom: 88px; left: 12px; border-width: 0 0 6px 6px; }
.hud-frame span:nth-child(4) { bottom: 88px; right: 12px; border-width: 0 6px 6px 0; }

/* Game: พื้นกริดแบบ perspective และเส้น scanline */
.game-sky { position: absolute; inset: 0; }
.game-floor {
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: 0;
  height: 42%;
  transform-origin: 50% 0;
  transform: perspective(240px) rotateX(58deg);
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--indigo-bright) 45%, transparent) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--indigo-bright) 35%, transparent) 0 2px, transparent 2px 70px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%);
  mask-image: linear-gradient(to bottom, transparent, #000 35%);
}
.scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 2px, transparent 2px 4px);
  mix-blend-mode: multiply;
}

/* ═════════ เนื้อหา ═════════ */
.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding-block: 2.5rem 1.5rem;
  text-align: center;
}
.hero-eyebrow { color: var(--muted); transition: color 0.4s; }
.hero:has(input[value='film']:checked) .hero-eyebrow { color: var(--text); }

.title-wrap { position: relative; padding-bottom: 1.25rem; transition: padding 0.3s; }
/* เว้นพื้นให้ตัวละครพิกเซลวิ่งใต้ชื่อเว็บ */
.hero[data-mode='game'] .title-wrap { padding-bottom: 3rem; }
.hero-title {
  position: relative;
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(2.75rem, 14vw, 8rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: var(--text);
  transition: color 0.4s, letter-spacing 0.4s, text-shadow 0.4s;
}
.hero-title .word { display: block; }
.ch, .sk { display: inline-block; transform-origin: 50% 100%; }
.guide-line {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(60%, 18rem);
  height: 4px;
  translate: -50% 0;
  background: var(--grad-cmd);
}

/* เส้นร่างดินสอ: เห็นเฉพาะโหมด Animation */
.sketch {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--sky);
  opacity: 0;
  transform: translate(-0.035em, 0.03em);
  transition: opacity 0.4s;
  pointer-events: none;
}
.hero:has(input[value='animation']:checked) .sketch { opacity: 0.55; }
.sketch[data-boil='0'] { filter: url(#hm-boil-0); }
.sketch[data-boil='1'] { filter: url(#hm-boil-1); }
.sketch[data-boil='2'] { filter: url(#hm-boil-2); }

/* ลูกบอลกระโดดและ onion skin */
.hop { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.hero[data-mode='animation'] .hop { opacity: 1; }
.hop i {
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform-origin: 50% 100%;
}
.hop-ball { background: var(--spark); box-shadow: 0 0 14px 2px color-mix(in srgb, var(--spark) 55%, transparent); }
.hop-o1 { box-shadow: inset 0 0 0 1.5px var(--sky); opacity: 0.6; }
.hop-o2 { box-shadow: inset 0 0 0 1.5px var(--sky); opacity: 0.28; }

/* ตัวละครพิกเซล */
.runner { position: absolute; left: 0; top: 0; width: 32px; height: 32px; opacity: 0; transition: opacity 0.3s; pointer-events: none; overflow: visible; }
.hero[data-mode='game'] .runner { opacity: 1; }
.runner .leg-b, .runner .leg-j { display: none; }
.runner.f2 .leg-a, .runner.is-jump .leg-a { display: none; }
.runner.f2 .leg-b { display: inline; }
.runner.is-jump .leg-j { display: inline; }

.hero:has(input[value='game']:checked) .hero-title {
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: clamp(1.75rem, 8.6vw, 5rem);
  line-height: 1.25;
  color: var(--indigo-bright);
  text-shadow: 0.08em 0.08em 0 var(--indigo), 0.16em 0.16em 0 #000;
}
.hero:has(input[value='film']:checked) .hero-title {
  font-weight: 500;
  letter-spacing: 0.16em;
  text-shadow: 0 0 28px color-mix(in srgb, var(--teal) 60%, transparent);
}

/* ═════════ Film ═════════ */
.film-frame {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: calc(50% - 0.625rem);
  width: 100vw;
  max-height: 70dvh;
  aspect-ratio: 2.39;
  translate: -50% -50%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.6s;
  border-block: 1px solid color-mix(in srgb, var(--teal) 40%, transparent);
}
.hero:has(input[value='film']:checked) .film-frame { opacity: 1; }
.film-reel {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(30% 50% at 30% 60%, color-mix(in srgb, var(--spark) 28%, transparent), transparent 70%),
    radial-gradient(45% 70% at 75% 40%, color-mix(in srgb, var(--teal) 38%, transparent), transparent 75%),
    linear-gradient(180deg, #071a1b, #0c2f2e 60%, #050607);
}
.leak {
  position: absolute;
  inset: -30% -10%;
  background: radial-gradient(28% 60% at 0% 20%, rgba(255, 120, 60, 0.32), transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
}
.film-grain { position: absolute; inset: 0; opacity: 0.18; mix-blend-mode: overlay; }
.film-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.75) 100%);
}
.scratch { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(238, 243, 248, 0.35); opacity: 0; }
.scratch.s1 { left: 23%; }
.scratch.s2 { left: 71%; width: 2px; }
.crop { position: absolute; width: 18px; height: 18px; border: 0 solid var(--teal-bright); z-index: 1; }
.crop.tl { top: 10px; left: 16px; border-width: 2px 0 0 2px; }
.crop.tr { top: 10px; right: 16px; border-width: 2px 2px 0 0; }
.crop.bl { bottom: 10px; left: 16px; border-width: 0 0 2px 2px; }
.crop.br { bottom: 10px; right: 16px; border-width: 0 2px 2px 0; }

/* film leader 3-2-1 */
.leader {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: min(70%, calc(100% * 2.39 * 0.8 / 2.39));
  aspect-ratio: 1;
  max-height: 86%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
}
.leader.on { opacity: 1; }
.leader-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(238, 243, 248, 0.7), inset 0 0 0 10px rgba(0, 0, 0, 0.5), inset 0 0 0 12px rgba(238, 243, 248, 0.4);
  background: conic-gradient(from 0deg, rgba(238, 243, 248, 0.28) var(--sweep, 0deg), rgba(0, 0, 0, 0.55) 0);
}
.leader-cross { position: absolute; inset: 0; background: linear-gradient(rgba(238, 243, 248, 0.5), rgba(238, 243, 248, 0.5)) center / 1px 100% no-repeat, linear-gradient(rgba(238, 243, 248, 0.5), rgba(238, 243, 248, 0.5)) center / 100% 1px no-repeat; }
.leader b { position: relative; font-family: var(--font-head); font-weight: 600; font-size: clamp(3rem, 12vw, 8rem); line-height: 1; color: var(--text); }

.hero-lead { max-width: 34rem; font-size: 1.0625rem; color: var(--text); text-wrap: pretty; }

.hero-actions { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; max-width: 22rem; }
.hero-cta { width: 100%; }

/* ═════════ เครื่องมือของแต่ละโหมด ═════════ */
.widgets { display: grid; width: 100%; }
.widget {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s, visibility 0s 0.4s;
}
.hero:has(input[value='animation']:checked) .widget-animation,
.hero:has(input[value='game']:checked) .widget-game,
.hero:has(input[value='film']:checked) .widget-film { visibility: visible; opacity: 1; transition: opacity 0.4s; }

.anim-meta { display: flex; justify-content: space-between; font-family: var(--font-head); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--muted); }
.anim-meta b { color: var(--sky); font-weight: 500; }
.timeline {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  background:
    repeating-linear-gradient(90deg, var(--muted) 0 1px, transparent 1px calc((100% - 1px) / var(--ticks, 13))) center / 100% 12px no-repeat,
    linear-gradient(var(--line), var(--line)) center / 100% 2px no-repeat;
  cursor: ew-resize;
}
.timeline::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 30px; background: var(--sky); border: 0; clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); }
.timeline::-moz-range-thumb { width: 14px; height: 30px; background: var(--sky); border: 0; border-radius: 0; }

.widget-game { font-family: var(--font-pixel); }
.hud-row { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.625rem; line-height: 1.6; color: var(--indigo-bright); }
.hud-row b { color: var(--text); font-weight: 400; }
.hud-row b.pop { color: var(--spark); }
.press-start {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--text);
  background: var(--indigo);
  box-shadow: inset 0 0 0 2px var(--indigo-bright), 4px 4px 0 #000;
}
.press-start:hover { background: color-mix(in srgb, var(--indigo) 70%, var(--indigo-bright)); }

.film-meta { display: flex; justify-content: space-between; gap: 0.5rem; font-family: var(--font-head); font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--teal-bright); }
.film-meta .tc { font-variant-numeric: tabular-nums; color: var(--text); }
.rec { display: inline-flex; align-items: center; gap: 0.35rem; }
.rec::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #ff5a5f; }
.showreel-btn {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--teal-bright);
  box-shadow: inset 0 0 0 2px var(--teal);
  cursor: pointer;
}
.showreel-btn:hover { background: color-mix(in srgb, var(--teal) 18%, transparent); }

/* ═════════ แถบสลับโหมด ═════════ */
.switcher {
  position: relative;
  z-index: 2;
  border: 0;
  margin: 0;
  padding: 0 0 env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-top: 1px solid var(--line);
}
.switcher-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.mode {
  position: relative;
  display: flex;
  min-height: 3.75rem;
  flex-direction: column;
  justify-content: center;
  padding: 0.5rem 0.25rem 0.5rem 0.75rem;
  cursor: pointer;
  color: var(--muted);
  transition: color 0.3s, background-color 0.3s;
}
.mode + .mode { border-left: 1px solid var(--line); }
.mode-no { font-family: var(--font-head); font-weight: 300; font-size: 0.75rem; letter-spacing: 0.2em; }
.mode-name { font-family: var(--font-head); font-weight: 600; font-size: 0.9375rem; line-height: 1.2; }
.mode::before, .mode-progress { content: ''; position: absolute; top: -1px; left: 0; height: 3px; }
.mode::before { right: 0; background: var(--accent); opacity: 0; transition: opacity 0.3s; }
.mode-progress { width: calc(var(--p, 0) * 100%); background: var(--spark); opacity: 0; }
.mode:has(input:checked) { color: var(--accent); background: color-mix(in srgb, var(--accent-fill) 12%, transparent); }
.mode:has(input:checked)::before { opacity: 0.45; }
.mode:has(input:checked) .mode-progress { opacity: 1; }
.mode:has(input:focus-visible) { outline: 2px solid var(--spark); outline-offset: -4px; }
.mode:hover { color: var(--text); }

/* ═════════ ประกายไฟ CSS (ระดับ Lite / ไม่มี JS) ═════════ */
.embers i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--spark);
  box-shadow: 0 0 8px 2px color-mix(in srgb, var(--spark) 60%, transparent);
  opacity: 0.35;
}
.hero[data-tier='full'] .embers, .hero[data-tier='medium'] .embers { display: none; }
.hero-burst { z-index: 3; display: grid; place-items: center; }
.hero-burst i { grid-area: 1 / 1; width: var(--s); height: var(--s); background: var(--spark); opacity: 0; }

/* ═════════ ฉากเปิด ═════════ */
.intro-veil { position: absolute; inset: 0; z-index: 5; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity 0.45s ease; }
.intro-skip {
  position: absolute;
  z-index: 7;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  display: none;
  min-height: 2.75rem;
  padding-inline: 1rem;
  font-family: var(--font-head);
  font-weight: 500;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
  background: var(--bg);
  cursor: pointer;
}
.hero.intro-on .intro-veil { opacity: 1; }
.hero.intro-on .spark-canvas { z-index: 6; }
.hero.intro-on .intro-skip { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero.intro-on .hero-content > *, .hero.intro-on .switcher, .hero.intro-on .hop, .hero.intro-on .sketch { opacity: 0; }
.hero.intro-on.intro-reveal .intro-veil { opacity: 0; }
.hero.intro-on.intro-reveal .intro-skip { display: none; }
.hero.intro-on.intro-reveal .hero-content > *,
.hero.intro-on.intro-reveal .switcher { opacity: 1; transition: opacity 0.5s ease; }
.hero.intro-on.intro-reveal .hero-content > :nth-child(1) { transition-delay: 0.1s; }
.hero.intro-on.intro-reveal .hero-content > :nth-child(3) { transition-delay: 0.2s; }
.hero.intro-on.intro-reveal .hero-content > :nth-child(4) { transition-delay: 0.3s; }
.hero.intro-on.intro-reveal .switcher { transition-delay: 0.35s; }

/* ═════════ การเคลื่อนไหว (เฉพาะเมื่อไม่ได้ตั้ง reduced motion) ═════════ */
@media (prefers-reduced-motion: no-preference) {
  .embers i { animation: ember var(--d) linear var(--delay) infinite; }
  .hero-burst.is-bursting i { animation: burst 0.8s cubic-bezier(0.15, 0.7, 0.3, 1) forwards; }
  .film-reel { animation: reel 9s ease-in-out infinite alternate, weave 0.25s steps(2) infinite; }
  .film-grain { animation: grain 0.5s steps(4) infinite; }
  .leak { animation: leak 7s ease-in-out infinite; }
  .scratch.s1 { animation: scratch 1.7s steps(1) infinite; }
  .scratch.s2 { animation: scratch 2.3s steps(1) -0.8s infinite; }
  .blink { animation: blink 1s steps(2, jump-none) infinite; }
  .rec::before { animation: blink 1.4s steps(2, jump-none) infinite; }
  .twinkle { animation: twinkle 1.6s steps(2, jump-none) infinite; }
  .parallax { animation: parallax 40s linear infinite; }
  .game-floor { animation: floor 0.9s linear infinite; }
  .sketch-lines > * { stroke-dasharray: 1; animation: draw 6s ease-in-out infinite; }
  .sketch-lines > :nth-child(2) { animation-delay: -1s; }
  .sketch-lines > :nth-child(3) { animation-delay: -2s; }
  .sketch-lines > :nth-child(4) { animation-delay: -3s; }
  .sketch-lines > :nth-child(5) { animation-delay: -4s; }
  .sketch-lines > :nth-child(6) { animation-delay: -5s; }

  /* ตัวอักษรเข้าฉากตามภาษาภาพของแต่ละสาย */
  .hero[data-mode='animation'].enter .ch { animation: ch-drop 0.75s cubic-bezier(0.3, 0.6, 0.4, 1) both; animation-delay: calc(var(--i) * 45ms); }
  .hero[data-mode='game'].enter .ch { animation: ch-fall 0.6s steps(6, end) both; animation-delay: calc(var(--i) * 55ms); }
  .hero[data-mode='film'].enter .ch { animation: ch-focus 0.9s ease-out both; animation-delay: calc(0.75s + var(--i) * 45ms); }
  .hero[data-mode='film'].enter .film-frame { animation: letterbox 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .ch.squash { animation: squash 0.3s ease-out; }
  .ch.bump { animation: bump 0.3s steps(3, end); }
}
/* หยุด animation ของ CSS เมื่อ Hero พ้นจอ */
.hero.is-paused :is(*, *::before, *::after) { animation-play-state: paused !important; }
/* ฉากเปิดใช้ fade ของตัวอักษรเอง ไม่ใช้ animation เข้าฉาก */
.hero.intro-on .ch { animation: none !important; }

@keyframes ember {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 0.6; }
  100% { transform: translateY(-60vh) translateX(4vw); opacity: 0; }
}
@keyframes burst {
  0% { transform: rotate(var(--a)) translateX(0) scale(1.4); opacity: 1; background: var(--spark); }
  60% { opacity: 1; }
  100% { transform: rotate(var(--a)) translateX(var(--d)) scale(0.4); opacity: 0; background: var(--accent); }
}
@keyframes reel { 0% { transform: translate(-6%, 2%) scale(1); } 100% { transform: translate(6%, -3%) scale(1.12); } }
@keyframes weave { 50% { translate: 0.6px -0.8px; } }
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-1%, 3%); } }
@keyframes leak { 0%, 100% { opacity: 0; transform: translateX(0); } 40% { opacity: 1; } 70% { opacity: 0.6; transform: translateX(60%); } }
@keyframes scratch { 0% { opacity: 0; } 8% { opacity: 1; translate: 0 0; } 12% { opacity: 0; } 50% { opacity: 0.8; translate: 40px 0; } 53% { opacity: 0; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes twinkle { 50% { opacity: 0.15; } }
@keyframes parallax { to { transform: translateX(-1600px); } }
@keyframes floor { to { background-position: 0 46px, 0 0; } }
@keyframes draw { 0% { stroke-dashoffset: 1; } 45%, 60% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes ch-drop {
  0% { transform: translateY(-1.1em) scale(0.8, 1.35); opacity: 0; }
  20% { opacity: 1; }
  55% { transform: translateY(0) scale(1.28, 0.68); }
  75% { transform: translateY(-0.12em) scale(0.92, 1.08); }
  100% { transform: none; }
}
@keyframes ch-fall { 0% { transform: translateY(-2.4em); opacity: 0; } 17% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes ch-focus { 0% { opacity: 0; filter: blur(10px); transform: scale(1.25); } 100% { opacity: 1; filter: none; transform: none; } }
@keyframes letterbox { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
@keyframes squash { 0% { transform: scale(1.18, 0.78); } 60% { transform: scale(0.95, 1.05); } 100% { transform: none; } }
@keyframes bump { 50% { transform: translateY(-0.22em); } 100% { transform: none; } }

/* ═════════ หน้าต่าง showreel ═════════ */
.showreel-dialog { margin: auto; width: min(32rem, calc(100% - 2rem)); padding: 0; border: 0; background: transparent; color: var(--text); }
.showreel-dialog::backdrop { background: rgba(0, 0, 0, 0.8); }

/* ═════════ จอแนวนอน ═════════ */
@media (min-width: 768px) {
  .hero-title .word { display: inline; }
  .hero-title .word + .word { margin-left: 0.28em; }
  .hero-title { font-size: clamp(3.5rem, 9.5vw, 9rem); }
  .hero:has(input[value='game']:checked) .hero-title { font-size: clamp(2rem, 5vw, 4.75rem); }
  .hero:has(input[value='film']:checked) .hero-title { font-size: clamp(3rem, 7.4vw, 7.5rem); }
  .hero-actions { flex-direction: row; align-items: center; justify-content: center; max-width: 46rem; }
  .hero-cta { width: auto; min-width: 12rem; }
  .widgets { flex: 1; max-width: 26rem; }
  .mode { flex-direction: row; align-items: center; justify-content: center; gap: 0.75rem; padding-inline: 1rem; }
  .mode-name { font-size: 1.0625rem; }
  .hud-frame span:nth-child(1), .hud-frame span:nth-child(2) { top: calc(var(--header-h) + 24px); }
  .hud-frame span:nth-child(1), .hud-frame span:nth-child(3) { left: 24px; }
  .hud-frame span:nth-child(2), .hud-frame span:nth-child(4) { right: 24px; }
  .hud-frame span:nth-child(3), .hud-frame span:nth-child(4) { bottom: 84px; }
  .intro-skip { right: 2rem; bottom: 5.5rem; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .hero-content { gap: 0.75rem; padding-block: 1rem; }
  .hero-title { font-size: clamp(2rem, 9vh, 4rem); }
  .hero:has(input[value='game']:checked) .hero-title { font-size: clamp(1.25rem, 6vh, 2.5rem); }
  .hero-lead { font-size: 1rem; }
}