/* Calm colours from the agreed designs. Sizes are the design's pixels on a 1280×800 tablet,
   scaled with --u so the layout looks the same on any screen. */
:root {
  --bg: #EEF4FA;
  --ink: #1E3A5F;
  --ink2: #2B4A72;
  --muted: #3E5675;
  --teal: #2F8F7F;
  --pale: #DCE8F5;
  --mint: #E3F3EC;
  --blush: #F9E6E4;
  --player: #1B2330;
  --u: min(calc(100vw / 1280), calc(100dvh / 800));
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: Nunito, ui-rounded, system-ui, -apple-system, sans-serif;
  overscroll-behavior: none;
  overflow: hidden;
}

body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button { font: inherit; color: inherit; border: 0; padding: 0; background: none; cursor: pointer; }
button { transition: transform 90ms ease, filter 90ms ease, box-shadow 120ms ease; }
button:active { transform: scale(0.94); filter: brightness(0.94); }
/* The button whose word is being spoken. */
.speaking { box-shadow: inset 0 0 0 calc(5 * var(--u)) var(--teal); }

#app { height: 100%; display: flex; flex-direction: column; }

/* ---- Top bar ---- */

.topbar {
  flex-shrink: 0;
  height: calc(96 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: calc(14 * var(--u)) calc(20 * var(--u)) calc(10 * var(--u));
}
.pill {
  height: calc(72 * var(--u));
  padding: 0 calc(30 * var(--u)) 0 calc(22 * var(--u));
  border-radius: calc(28 * var(--u));
  background: var(--pale);
  color: var(--ink2);
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  font-size: calc(28 * var(--u));
  font-weight: 800;
}
.pill[aria-current="page"] { background: var(--teal); color: #FFFFFF; }
.lock {
  margin-left: auto;
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.3;
  color: var(--ink);
}
.lock:active { transform: none; }

/* ---- Launch pad ---- */

.body {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: calc(16 * var(--u));
  padding: 0 calc(16 * var(--u)) calc(16 * var(--u));
}
.videos {
  width: calc(220 * var(--u));
  flex-shrink: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  scrollbar-width: none;
}
.vcard {
  flex-shrink: 0;
  padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  border-radius: calc(22 * var(--u));
  border: calc(3 * var(--u)) solid transparent;
  background: var(--blush);
}
.vcard:nth-child(odd) { background: var(--mint); }
.vcard[aria-current="true"] { background: var(--mint); border-color: var(--teal); }
.vthumb {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: calc(14 * var(--u));
  background: #CFE3F2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8DA2B8;
}
.vthumb img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.vbadge {
  position: absolute;
  right: calc(-6 * var(--u));
  top: 50%;
  transform: translateY(-50%);
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  border-radius: 50%;
  background: var(--teal);
  border: calc(3 * var(--u)) solid var(--mint);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: calc(3 * var(--u));
}
.player {
  flex: 1;
  min-width: 0;
  border-radius: calc(24 * var(--u));
  background: var(--player);
  overflow: hidden;
  position: relative;
  display: flex;
}
.player iframe, .player video { flex: 1; width: 100%; height: 100%; border: 0; background: #000; }
.player-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--u));
  color: #8A97A8;
  font-size: calc(20 * var(--u));
  font-weight: 700;
  text-align: center;
  padding: calc(32 * var(--u));
}
.rail {
  width: calc(176 * var(--u));
  flex-shrink: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  scrollbar-width: none;
}
.qw {
  height: calc(104 * var(--u));
  flex-shrink: 0;
  border-radius: calc(22 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--u));
  font-size: calc(22 * var(--u));
  font-weight: 800;
  color: var(--ink);
}
.photo { border-radius: calc(12 * var(--u)); overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Talk ---- */

.talkrow {
  flex-shrink: 0;
  height: calc(88 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: 0 calc(20 * var(--u));
}
.strip {
  flex: 1;
  min-width: 0;
  height: 100%;
  border-radius: calc(22 * var(--u));
  background: #FFFFFF;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: 0 calc(12 * var(--u));
  overflow-x: auto;
  scrollbar-width: none;
}
.strip:active { transform: none; }
.bit {
  width: calc(76 * var(--u));
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 800;
  white-space: nowrap;
}
.round { border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.round.say { width: calc(88 * var(--u)); height: calc(88 * var(--u)); background: var(--teal); color: #FFFFFF; }
.round.small { width: calc(76 * var(--u)); height: calc(76 * var(--u)); background: var(--pale); color: var(--ink2); }
.tabs {
  flex-shrink: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(calc(104 * var(--u)), 1fr);
  gap: calc(8 * var(--u));
  padding: calc(14 * var(--u)) calc(20 * var(--u)) 0;
  overflow-x: auto;
  scrollbar-width: none;
}
/* Up to ten tabs across: the picture above the name. */
.tab {
  height: calc(76 * var(--u));
  padding: 0 calc(4 * var(--u));
  border-radius: calc(18 * var(--u));
  border: calc(3 * var(--u)) solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(2 * var(--u));
  font-size: calc(15 * var(--u));
  font-weight: 800;
  min-width: 0;
  white-space: nowrap;
}
.tab[aria-selected="true"] { border-color: var(--teal); }
.grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: calc(236 * var(--u));
  gap: calc(14 * var(--u));
  padding: calc(16 * var(--u)) calc(20 * var(--u));
  align-content: start;
}
.word {
  border-radius: calc(24 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  padding: calc(8 * var(--u));
  font-size: calc(26 * var(--u));
  font-weight: 800;
  min-width: 0;
}
.word span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Apps ---- */

.tiles {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: calc(200 * var(--u));
  gap: calc(16 * var(--u));
  align-content: start;
}
.tile {
  border-radius: calc(24 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--u));
  font-size: calc(20 * var(--u));
  font-weight: 800;
  color: var(--ink);
  min-width: 0;
  padding: calc(8 * var(--u));
}
.tile .face {
  width: calc(112 * var(--u));
  height: calc(112 * var(--u));
  border-radius: calc(26 * var(--u));
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink2);
}
.tile span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Games ---- */

.stage {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
  border-radius: calc(24 * var(--u));
  background: #E3EFF9;
  touch-action: none;
}
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.game-stars {
  position: absolute;
  right: calc(20 * var(--u));
  top: calc(18 * var(--u));
  height: calc(60 * var(--u));
  padding: 0 calc(22 * var(--u)) 0 calc(16 * var(--u));
  border-radius: calc(30 * var(--u));
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  font-size: calc(30 * var(--u));
  font-weight: 800;
  pointer-events: none;
}
.game-stars img { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
/* The pulsing hand on a first go, until the first tap. */
.game-hint {
  position: absolute;
  left: 50%;
  top: 45%;
  width: calc(160 * var(--u));
  height: calc(160 * var(--u));
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.game-hint .ring, .game-hint .dot {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.game-hint .ring {
  width: calc(150 * var(--u));
  height: calc(150 * var(--u));
  border: calc(6 * var(--u)) solid rgba(47, 143, 127, 0.35);
  animation: hint-pulse 1.4s ease-in-out infinite;
}
.game-hint .dot { width: calc(96 * var(--u)); height: calc(96 * var(--u)); background: rgba(47, 143, 127, 0.18); }
.game-hint img {
  position: absolute;
  left: calc(52 * var(--u));
  top: calc(60 * var(--u));
  width: calc(92 * var(--u));
  animation: hint-tap 1.4s ease-in-out infinite;
}
@keyframes hint-pulse { 50% { transform: translate(-50%, -50%) scale(1.12); opacity: 0.5; } }
@keyframes hint-tap { 50% { transform: translate(calc(-4 * var(--u)), calc(-8 * var(--u))); } }

/* ---- Grown-up dialog (normal sizes: it's for adults) ---- */

.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(30, 58, 95, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 10;
}
.dialog {
  width: 100%;
  max-width: 420px;
  background: #FFFFFF;
  border-radius: 24px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 17px;
  -webkit-user-select: text;
  user-select: text;
}
.dialog h2 { margin: 0; font-size: 22px; }
.dialog p { margin: 0; line-height: 1.45; color: var(--muted); }
.code { font-size: 44px; font-weight: 800; letter-spacing: 8px; text-align: center; color: var(--ink); padding: 8px 0; }
.dialog input {
  font: inherit;
  font-size: 20px;
  height: 52px;
  border: 2px solid #C9D6E3;
  border-radius: 12px;
  padding: 0 14px;
  color: var(--ink);
}
.actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.btn { height: 48px; padding: 0 22px; border-radius: 14px; background: var(--teal); color: #FFFFFF; font-weight: 800; }
.btn.secondary { background: var(--pale); color: var(--ink2); }
.btn.danger { background: transparent; color: #B5525F; }
.error { color: #B5525F; font-weight: 700; }

/* ---- A device that isn't linked yet: who's using it, then the code ---- */

.welcome {
  min-height: 100dvh;
  box-sizing: border-box;
  padding: calc(40 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(22 * var(--u));
  text-align: center;
  position: relative;
}
.welcome h1 { margin: 0; font-size: calc(34 * var(--u)); font-weight: 800; color: var(--ink); }
.welcome-icon { width: calc(72 * var(--u)); height: calc(72 * var(--u)); border-radius: calc(18 * var(--u)); }
.welcome-lede { margin: 0; max-width: calc(640 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1.45; color: var(--muted); }
.welcome-note { margin: 0; font-size: calc(15 * var(--u)); color: var(--muted); }
.choices { display: flex; gap: calc(24 * var(--u)); flex-wrap: wrap; justify-content: center; }
.choice {
  width: calc(420 * var(--u));
  min-height: calc(340 * var(--u));
  box-sizing: border-box;
  border-radius: calc(28 * var(--u));
  padding: calc(26 * var(--u));
  background: #FFFFFF;
  border: calc(3 * var(--u)) solid #C9D6E3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--u));
  color: var(--ink);
  text-decoration: none;
  font: inherit;
}
.choice.child { background: #E0F1E4; border-color: #6FAE7F; }
.choice b { font-size: calc(26 * var(--u)); }
.choice > span:not(.btn):not(.trio) { font-size: calc(16 * var(--u)); color: var(--muted); line-height: 1.4; }
.choice .btn { display: inline-flex; align-items: center; margin-top: calc(6 * var(--u)); }
.trio { display: flex; gap: calc(8 * var(--u)); }
.btn.light { background: #FFFFFF; color: var(--ink); border: 2px solid #C9D6E3; }
.bigcode { display: flex; gap: calc(10 * var(--u)); min-height: calc(96 * var(--u)); align-items: center; font-size: calc(48 * var(--u)); font-weight: 800; color: var(--ink); }
.bigcode span { width: calc(76 * var(--u)); height: calc(96 * var(--u)); border-radius: calc(18 * var(--u)); background: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.welcome .back { position: absolute; bottom: calc(32 * var(--u)); }
@media (max-width: 700px) {
  .welcome { --u: calc(100vw / 520); padding: 24px 16px 100px; }
  .choice { width: 100%; min-height: 0; }
}