/* Home page (version picker) and the 2D video page. Night-time bedroom palette, matching the 3D intro screen. */
@font-face { font-family: 'Fredoka'; font-weight: 600; font-display: swap; src: url('../fonts/fredoka-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 700; font-display: swap; src: url('../fonts/fredoka-latin-700-normal.woff2') format('woff2'); }

:root {
  --night: #0d0c2e; --dusk: #1a1a4a; --glow: #3a2f6e;
  --jb: #ff9a1f; --straw: #ff4f7b; --sun: #ffd23f; --title: #ffc04d;
  --ink: #2a1f33; --text: #f4f0ff; --soft: #b8b0e0;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--night); }
html, body { margin: 0; min-height: 100%; }
body { background: var(--night); color: var(--text); font-family: 'Fredoka', 'Trebuchet MS', sans-serif; font-weight: 600; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }

/* ---------- home ---------- */
/* Everything is sized from the screen height as well as the width, so the page always fits one
   screen with no scrolling: cards side by side with big thumbnails on wide screens, thumbnail
   beside the text on short (sideways phone) or narrow (upright phone) screens. */
html:has(.home-page) { height: 100%; overflow: hidden; }
.home-page { height: 100%; overflow: hidden; background: radial-gradient(circle at 50% 20%, var(--glow), var(--dusk) 50%, var(--night)); }
.home-page main { height: 100%; max-width: 1100px; margin: 0 auto; padding-block: clamp(10px, 3vh, 40px); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 3.5vh, 36px); }
header { text-align: center; display: grid; justify-items: center; gap: clamp(2px, 1vh, 8px); }
h1 { margin: 0; font-size: clamp(32px, min(11vw, 11vh), 112px); font-weight: 700; line-height: 1; color: var(--title); -webkit-text-stroke: clamp(3px, 0.9vh, 8px) var(--ink); paint-order: stroke fill; text-wrap: balance; }
.sub { margin: 0; font-size: clamp(13px, min(2.6vw, 2.8vh), 22px); color: var(--soft); }
.jb { position: relative; width: clamp(28px, 7vh, 56px); height: clamp(40px, 10vh, 80px); margin-top: clamp(20px, 5vh, 40px); background: var(--jb); border: clamp(3px, 0.5vh, 4px) solid var(--ink); border-radius: 7px; animation: bob 1.6s ease-in-out infinite; }
.jb .straw { position: absolute; right: 16%; top: -46%; width: 14%; height: 52%; background: var(--straw); border: 2px solid var(--ink); border-radius: 4px; transform: rotate(8deg); }
.jb .label { position: absolute; left: 16%; top: 25%; width: 54%; height: 41%; border-radius: 50%; background: #fff3c4; border: 2px solid var(--ink); }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-6deg); } }

.picks { display: flex; justify-content: center; gap: clamp(12px, 3vw, 28px); min-height: 0; }
.pick { flex: 0 1 calc(32vh * 16 / 9 + 8px); min-width: 0; display: grid; grid-template-rows: auto 1fr; text-decoration: none; background: var(--dusk); border: 4px solid var(--ink); border-radius: 18px; overflow: hidden; box-shadow: 0 6px 0 var(--ink); transition: transform .15s; }
.pick:hover, .pick:focus-visible { transform: translateY(-4px) rotate(-0.5deg); }
.pick:nth-child(2):hover, .pick:nth-child(2):focus-visible { transform: translateY(-4px) rotate(0.5deg); }
.pick img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 4px solid var(--ink); }
.pick .txt { display: grid; align-content: start; gap: clamp(3px, 0.9vh, 8px); padding: clamp(8px, 2vh, 18px) clamp(12px, 2vh, 20px) clamp(10px, 2.4vh, 22px); }
.pick .name { font-size: clamp(16px, 3.2vh, 28px); font-weight: 700; color: var(--text); }
.pick .what { color: var(--soft); font-size: clamp(12px, 2.1vh, 17px); line-height: 1.35; }
.pick .new { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 1px 0.6em; font-size: 0.55em; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); background: var(--straw); border-radius: 999px; }
.pick .go { justify-self: start; margin-top: clamp(2px, 0.8vh, 8px); display: inline-flex; align-items: center; gap: 0.5em; padding: 0.45em 1.1em; border: 3px solid var(--ink); border-radius: 999px; background: var(--sun); color: var(--ink); font-weight: 700; font-size: clamp(14px, 2.5vh, 19px); box-shadow: 0 3px 0 var(--ink); }
.pick .tri { width: 0; height: 0; border-left: 0.7em solid var(--ink); border-top: 0.42em solid transparent; border-bottom: 0.42em solid transparent; }
.len { margin: 0; text-align: center; color: var(--soft); font-size: clamp(12px, 2vh, 16px); }

/* short or narrow screens: thumbnail beside the text */
@media (max-height: 600px), (max-aspect-ratio: 1/1) {
  .pick { grid-template-columns: 42% 1fr; grid-template-rows: none; border-radius: 14px; box-shadow: 0 4px 0 var(--ink); }
  .pick img { height: 100%; border-bottom: 0; border-right: 4px solid var(--ink); }
  .pick .txt { align-content: center; padding: clamp(6px, 2vh, 14px) clamp(8px, 2vw, 14px); }
  .pick .name { font-size: clamp(14px, min(4.4vw, 5vh), 22px); }
  .pick .what { font-size: clamp(11px, min(3.4vw, 3.6vh), 15px); }
  .pick .go { font-size: clamp(13px, min(3.8vw, 4.4vh), 17px); }
}
/* sideways phone: title on one line with the juice box beside it, cards side by side */
@media (max-height: 600px) and (min-aspect-ratio: 1/1) {
  header { grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 14px; row-gap: 0; text-align: left; }
  header .jb { grid-row: span 2; }
  .pick { flex: 1 1 0; }
}
/* upright phone: cards stacked */
@media (max-aspect-ratio: 1/1) {
  .picks { flex-direction: column; align-items: stretch; }
  .pick { flex: 0 1 auto; }
}
@media (max-height: 340px) { .sub, .len, .pick .what { display: none; } }

/* ---------- 2D video page ---------- */
.video-page { height: 100%; background: #000; display: grid; grid-template-rows: 1fr auto; overflow: hidden; }
html:has(.video-page) { height: 100%; overflow: hidden; }
.player { position: relative; min-height: 0; }
.player video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-block: 10px calc(10px + env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); background: var(--night); font-size: 16px; }
.bar a { color: var(--sun); text-underline-offset: 3px; }
.bar .t { color: var(--soft); text-align: center; flex: 1; min-width: 0; }
@media (max-width: 560px) { .bar .t { display: none; } }

@media (prefers-reduced-motion: reduce) { .jb { animation: none; } .pick { transition: none; } }