/* ============================================================
   KidTube — playful "building-blocks" 10-foot TV UI
   Targets Tizen 6.0 WebKit (Chromium ~85): no aspect-ratio,
   no :has(); uses padding-hack ratios + -webkit-line-clamp.
   ============================================================ */

:root {
  --bg-top: #2a1a5e;
  --bg-bottom: #160d33;
  --card: #241a4d;
  --card-edge: #3a2c73;
  --ink: #fdf6ff;
  --ink-soft: #b9a9e8;
  --focus: #ffd23f;
  --pop-1: #ff5d8f;
  --pop-2: #4ad6c4;
  --pop-3: #ffa14a;
  /* System fonts only — no web-font fetch/glyph rendering, which is costly on
     the TV engine. (Was Fredoka/Nunito from Google Fonts.) */
  --display: "Trebuchet MS", system-ui, "Segoe UI", Roboto, sans-serif;
  --body: "Trebuchet MS", system-ui, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--body);
  /* Solid background — gradients force a full-viewport repaint on every scroll
     step on the TV engine. A flat color composites for free. */
  background: var(--bg-top);
}

#app { position: relative; z-index: 1; height: 100vh; display: flex; flex-direction: column; }

.hidden { display: none !important; }

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 36px 56px 18px;
  flex: 0 0 auto;
}
.brand { display: flex; align-items: center; gap: 20px; }
.brand__badge {
  width: 76px; height: 76px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 22px;
  background: linear-gradient(150deg, var(--pop-1), var(--pop-3));
  box-shadow: 0 12px 28px rgba(255, 93, 143, 0.45);
  transform: rotate(-6deg);
}
.brand__triangle {
  width: 0; height: 0;
  border-style: solid;
  border-width: 18px 0 18px 30px;
  border-color: transparent transparent transparent #fff;
  margin-left: 6px;
}
.brand__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 56px;
  letter-spacing: 0.5px;
  line-height: 1;
}
.brand__name-accent { color: var(--pop-2); }
.topbar__hint {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 30px;
  color: var(--ink-soft);
}
.topbar__star { color: var(--focus); }

/* ---------- Feed grid ---------- */
.feed {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Explicit row height = thumbnail height + room for the 2-line title and
     channel pill. Decoupled from content intrinsic sizing on purpose: a grid
     item with overflow:hidden inside a definite-height flex container makes
     Chromium under-size auto rows, collapsing the tiles. */
  grid-auto-rows: calc(12.5vw + 168px);
  gap: 40px 36px;
  padding: 28px 56px 64px;
  overflow-y: auto;
  flex: 1 1 auto;
  align-content: start;
  -webkit-overflow-scrolling: touch;
  transform: translateZ(0); /* composite the scroll container on the GPU */
}

/* ---------- Tiles ---------- */
.tile {
  position: relative;
  background: linear-gradient(180deg, var(--card), #1d1540);
  border: 3px solid var(--card-edge);
  border-radius: 26px;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  /* Only transform is animated (GPU-composited, cheap on the TV). Border color
     swaps instantly. No box-shadow transition — animating a blurred shadow on
     every D-pad move was the main cause of remote lag. */
  transition: transform 0.12s ease, border-color 0.12s ease;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
  will-change: transform; /* keep each tile on its own GPU layer */
}

.tile__thumb {
  position: relative;
  width: 100%;
  background: #120c2b;
  overflow: hidden;
}
.tile__thumb img {
  /* In-flow image with a definite height defines the thumb height reliably.
     (A definite height on an absolutely-positioned child is NOT counted during
     grid row intrinsic sizing on Chromium, which collapsed the row; and
     aspect-ratio is unsupported on Tizen 6.0 / Chromium 85.)
     ~16:9 at 1920px, scales down on smaller viewports; crops thumbnail bars. */
  display: block;
  width: 100%;
  height: 12.5vw; /* ~240px at 1920; clamp()/min()/max() unsupported on Chromium 76 */
  object-fit: cover;
}
/* play glyph that appears on focus */
.tile__play {
  position: absolute;
  left: 50%; top: 50%;
  width: 84px; height: 84px;
  margin: -42px 0 0 -42px;
  border-radius: 50%;
  background: rgba(22, 13, 51, 0.55);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.85) inset;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.tile__play::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  border-style: solid;
  border-width: 16px 0 16px 26px;
  border-color: transparent transparent transparent #fff;
  transform: translate(-40%, -50%);
}

.tile__thumb { margin-bottom: 24px; }
.tile__body { padding: 0 20px 24px; }
.title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.22;
  /* clamp to two lines */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 64px;
}
.tile__channel {
  margin-top: 12px;
  display: inline-block;
  font-family: var(--body);
  font-weight: 800;
  font-size: 18px;
  color: #160d33;
  background: linear-gradient(120deg, var(--pop-2), #79e8d9);
  padding: 5px 16px;
  border-radius: 999px;
}

/* ---------- Focus (D-pad / TV remote) ---------- */
.tile:focus,
.tile:hover {
  /* Cheap focus: a composited lift (translate doesn't re-rasterize the
     thumbnail the way scale does) + a solid gold ring. Keeps D-pad snappy. */
  transform: translateY(-8px);
  border-color: var(--focus);
  box-shadow: 0 0 0 5px var(--focus), 0 10px 22px rgba(0, 0, 0, 0.45);
}
.tile:focus .tile__play,
.tile:hover .tile__play {
  opacity: 1;
}

/* ---------- Player ---------- */
.player { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #000; z-index: 50; }
.player iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Messages (empty / error) ---------- */
.message {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 64px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 44px;
  color: var(--ink);
}
.message::before {
  content: "📺";
  font-size: 96px;
  margin-bottom: 8px;
}

/* ---------- Parents button ---------- */
.topbar__right { display: flex; align-items: center; gap: 28px; }
.parents-btn {
  font-family: var(--display);
  font-size: 24px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.10);
  border: 3px solid var(--card-edge);
  border-radius: 999px;
  padding: 10px 22px;
  cursor: pointer;
  outline: none;
}
.parents-btn:focus, .parents-btn:hover {
  border-color: var(--focus);
  box-shadow: 0 0 0 4px var(--focus);
}

/* ---------- Parent overlay ---------- */
.parent {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 60;
  background: #160d33;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  overflow-y: auto;
}
.parent {
  align-items: flex-start; /* pin panel near the top so the header stays put */
}
.parent__panel {
  background: var(--card);
  border: 3px solid var(--card-edge);
  border-radius: 24px;
  padding: 40px;
  width: 720px;
  max-width: 90%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.parent__panel--wide { width: 1100px; }
.parent__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex: 0 0 auto;
}
.parent__title { font-family: var(--display); font-size: 40px; margin: 0; }
.parent__subtitle { font-family: var(--display); font-size: 28px; margin: 28px 0 12px; }
.parent__challenge { font-size: 32px; margin: 0 0 20px; }
.parent__status { color: var(--ink-soft); font-size: 22px; min-height: 26px; margin: 12px 0; }
.parent__input {
  font-size: 28px;
  padding: 12px 18px;
  border-radius: 12px;
  border: 3px solid var(--card-edge);
  background: #1d1540;
  color: var(--ink);
  outline: none;
  width: 360px;
}
.parent__input:focus { border-color: var(--focus); }
.parent__searchrow { display: flex; gap: 16px; align-items: center; }
.parent__btn {
  font-family: var(--display);
  font-size: 26px;
  color: #160d33;
  background: var(--focus);
  border: none;
  border-radius: 12px;
  padding: 12px 26px;
  margin-top: 20px;
  cursor: pointer;
  outline: none;
}
.parent__btn--sm { font-size: 22px; padding: 8px 18px; margin: 0; }
.parent__btn:focus, .parent__btn:hover { box-shadow: 0 0 0 4px var(--ink); }
.parent__btn:disabled { background: var(--pop-2); }
.parent__results { margin-top: 12px; max-height: 46vh; overflow-y: auto; flex: 0 0 auto; }
.parent__current { margin-top: 12px; display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.parent__list { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.parent__row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 2px solid var(--card-edge);
}
.parent__rowname { flex: 1 1 auto; font-size: 26px; }
.parent__thumb { width: 88px; height: 50px; object-fit: cover; border-radius: 8px; }

/* ---------- Parent gate (math) + keypad ---------- */
.parent__gate { text-align: center; }
.parent__gate .parent__title,
.parent__gate .parent__challenge { text-align: center; }
.parent__answer {
  font-family: var(--display);
  font-size: 44px;
  letter-spacing: 6px;
  min-height: 60px;
  margin: 18px auto 8px;
  max-width: 360px;
  padding: 10px 18px;
  background: #1d1540;
  border: 3px solid var(--card-edge);
  border-radius: 14px;
  color: var(--ink);
}
.parent__pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 360px;
  margin: 16px auto;
}
.parent__key {
  font-family: var(--display);
  font-size: 34px;
  color: var(--ink);
  background: #1d1540;
  border: 3px solid var(--card-edge);
  border-radius: 14px;
  padding: 18px 0;
  cursor: pointer;
  outline: none;
}
.parent__key:focus, .parent__key:hover {
  border-color: var(--focus);
  box-shadow: 0 0 0 4px var(--focus);
}
.parent__enter {
  display: block;
  width: 360px;
  max-width: 100%;
  margin: 4px auto 0;
  text-align: center;
}

/* ---------- Toast (e.g. "Press Back again to exit") ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 56px;
  transform: translateX(-50%);
  z-index: 70;
  background: rgba(22, 13, 51, 0.92);
  color: var(--ink);
  border: 3px solid var(--card-edge);
  border-radius: 999px;
  padding: 14px 30px;
  font-family: var(--display);
  font-size: 26px;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.toast--show { opacity: 1; }

/* ---------- Channel tile grid (suggestions + search results) ---------- */
.parent__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  margin-top: 10px;
}
.parent__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: #1d1540;
  border: 3px solid var(--card-edge);
  border-radius: 16px;
  padding: 16px 8px;
  cursor: pointer;
  outline: none;
  color: var(--ink);
  font-family: var(--display);
}
.parent__tile:focus, .parent__tile:hover {
  border-color: var(--focus);
  box-shadow: 0 0 0 4px var(--focus);
}
.parent__tileimg {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  background: #120c2b;
}
.parent__tilename {
  font-size: 19px;
  line-height: 1.2;
  text-align: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 46px;
}
.parent__tile--added { opacity: 0.45; }