@font-face {
  font-family: 'Leckerli One';
  src: url('fonts/LeckerliOne-Regular.ttf') format('truetype');
  font-display: swap;
}

/* "Castle at Midnight": night-sky indigo with pixie-dust gold. */
:root {
  --bg: #0a0d2a;
  --panel: #0f1338;
  --surface: #1a1f52;
  --surface-2: #262c6b;
  --line: #2c3274;
  --text: #f1f0ff;
  --muted: #a3a6d6;
  --accent: #f6c453;
  --accent-ink: #231a02;
  --dust: #fff6c8;
  --radius: 14px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 500 16px/1.35 'Quicksand', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ---- banner */
.banner {
  position: relative; flex: none; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  height: 84px; padding: 0 22px;
  background: radial-gradient(120% 160% at 78% 130%, #3a2a8c 0%, #1a1560 45%, #0a0d2a 100%);
  border-bottom: 1px solid var(--line);
  transition: height .25s ease;
}
.logo {
  /* The gold is painted inside this box, so the bottom padding has to hold
     the tails of y and g, which dip well below Leckerli One's baseline. */
  position: relative; margin: 0; padding: 4px 6px .22em; white-space: nowrap;
  font: 400 50px/1 'Leckerli One', 'Brush Script MT', cursive; letter-spacing: .5px;
  background: linear-gradient(180deg, #fff3c2 0%, #f6c453 55%, #d99a22 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)) drop-shadow(0 0 14px rgba(246, 196, 83, .45));
  transition: font-size .25s ease;
}
.logo.small { font-size: 30px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35)); }
.tagline {
  position: relative; margin-top: 26px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #cfc9ff;
  white-space: nowrap; transition: opacity .2s ease;
}
.banner .castle { position: absolute; right: 28px; bottom: -2px; height: 92%; fill: #8f86ff; opacity: .3; }
/* Once you scroll into the videos the banner tucks itself away to give the height back. */
.banner.tucked { height: 44px; }
.banner.tucked .logo { font-size: 32px; }
.banner.tucked .tagline { opacity: 0; }

/* ---- pixie dust */
.dust { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dust i {
  position: absolute; display: block; width: var(--s); height: var(--s);
  background: var(--c, var(--dust)); opacity: .15;
  animation: twinkle var(--d, 3s) ease-in-out var(--delay, 0s) infinite;
}
.dust i.star, .burst i { clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.dust i.dot { border-radius: 50%; box-shadow: 0 0 6px 1px var(--c, var(--dust)); }
/* Drifting dust floats slowly upward as it twinkles. `translate` is animated
   separately from `transform`, so older browsers simply get the twinkle. */
.dust i.drift {
  animation: twinkle var(--d, 3s) ease-in-out var(--delay, 0s) infinite,
             drift var(--t, 14s) ease-in-out var(--delay, 0s) infinite alternate;
}
@keyframes drift {
  from { translate: 0 0; }
  to { translate: var(--dx, 10px) var(--dy, -50px); }
}
@keyframes twinkle {
  0%, 100% { opacity: .12; transform: scale(.6) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(25deg); }
}
/* The puff of dust when a video is favourited. */
.burst { position: fixed; z-index: 40; width: 0; height: 0; pointer-events: none; }
.burst i {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; background: var(--c, var(--accent));
  animation: puff .7s ease-out forwards;
}
@keyframes puff {
  0% { opacity: 1; transform: translate(0, 0) scale(.4) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.2) rotate(140deg); }
}
@media (prefers-reduced-motion: reduce) {
  .dust i, .dust i.drift { animation: none; opacity: .7; }
  .park.on { animation: none; background-position: 50% 0; }
  .burst { display: none; }
  .banner, .logo { transition: none; }
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }

.app {
  display: grid;
  grid-template-columns: 226px 1fr;
  flex: 1;
  min-height: 0;
}

/* ---- park rail */
/* The dust sits behind the list and stays put while the list scrolls over it. */
.rail {
  position: relative; min-height: 0; overflow: hidden; display: flex;
  background: var(--panel);
  border-right: 1px solid var(--line);
}
.parks {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.park {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 6px 8px;
  border-radius: 12px;
  text-align: left;
  width: 100%;
}
a.park { text-decoration: none; color: inherit; }
.park .ico { width: 24px; text-align: center; flex: none; }
.park .lbl { flex: 1; font-weight: 550; font-size: 14.5px; }
.park .n { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.park:active { background: var(--surface); }
.park.on {
  color: var(--accent-ink);
  /* A band of light that slowly sweeps across the gold. */
  background: linear-gradient(110deg, var(--accent) 0%, var(--accent) 38%, #fff7d6 50%, var(--accent) 62%, var(--accent) 100%);
  background-size: 260% 100%;
  box-shadow: 0 0 14px rgba(246, 196, 83, .35);
  animation: shimmer 4.5s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 35% { background-position: 120% 0; }
  100% { background-position: -40% 0; }
}
.park.on .n { color: inherit; opacity: .7; }
.park.parent .lbl { font-weight: 700; }
.park.child { padding-left: 22px; min-height: 44px; }
.park.mode .lbl { font-weight: 400; font-size: 14px; color: var(--muted); }
.park.mode b { color: var(--text); }
.sep { height: 1px; background: var(--line); margin: 8px 6px; flex: none; }
/* Buy me a coffee: a warm gold box that stands apart from the settings below it. */
.park.support {
  margin: 2px 0 8px;
  background: linear-gradient(135deg, rgba(246, 196, 83, .2), rgba(246, 196, 83, .07));
  border: 1px solid rgba(246, 196, 83, .55);
  box-shadow: 0 0 12px rgba(246, 196, 83, .15);
}
.park.support .lbl { color: var(--accent); font-weight: 700; }
.park.support small { display: block; margin-top: 1px; font-size: 12px; font-weight: 500; color: var(--muted); }
.park.support:active { background: rgba(246, 196, 83, .25); }

/* ---- main column */
.main {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px calc(24px + env(safe-area-inset-bottom));
}

.toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  background: var(--bg);
}
.search { position: relative; flex: 1; min-width: 0; }
.search input {
  width: 100%;
  height: 48px;
  padding: 0 44px 0 16px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--surface);
  outline: none;
}
.search input:focus { border-color: var(--accent); }
.search input::-webkit-search-cancel-button { display: none; }
.search .icon-btn { position: absolute; right: 2px; top: 2px; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 18px;
}
.icon-btn.star { font-size: 26px; }
.icon-btn.on { color: var(--accent); }

.select {
  display: flex; align-items: center; gap: 6px;
  height: 48px; padding: 0 4px 0 12px;
  border-radius: 24px; border: 1px solid var(--line); background: var(--surface);
  flex: none;
}
.select span { color: var(--muted); font-size: 13px; }
.select select {
  height: 44px; border: 0; background: transparent; outline: none;
  font-weight: 600; padding-right: 0; max-width: 118px;
}
.select option { background: var(--surface); color: var(--text); }

.btn {
  height: 48px; padding: 0 16px; border-radius: 24px; flex: none;
  background: var(--surface-2); font-weight: 600; white-space: nowrap;
  display: inline-flex; align-items: center; text-decoration: none; color: var(--text);
}
.btn:active { background: var(--line); }
#shuffle .lbl { margin-left: 6px; }
@media (max-width: 1100px) { #shuffle .lbl { display: none; } }

/* ---- chip rows */
.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 16px 10px;
  margin: 0 -16px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 21px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 14px;
  font-weight: 550;
  white-space: nowrap;
}
.chip .n { color: var(--muted); font-weight: 400; margin-left: 2px; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip.on .n { color: inherit; opacity: .7; }
.chip-sep { flex: none; width: 1px; background: var(--line); margin: 8px 2px; }
#places .chip { background: transparent; }
#places .chip.on { background: var(--text); border-color: var(--text); color: var(--bg); }

.status {
  display: flex; align-items: center; gap: 12px;
  color: var(--muted); font-size: 14px; min-height: 32px;
}
.link { color: var(--accent); font-weight: 600; min-height: 32px; padding: 0 4px; }

/* ---- results */
.group {
  display: flex; align-items: baseline; gap: 8px;
  margin: 18px 0 10px; font-size: 19px; font-weight: 700;
}
.group:first-child { margin-top: 6px; }
.group .n { color: var(--muted); font-size: 14px; font-weight: 400; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.card {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  outline: none;
}
.card:active { transform: scale(.98); }
.card:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.thumb { position: relative; aspect-ratio: 16 / 9; background: var(--surface-2); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dur {
  position: absolute; left: 8px; bottom: 8px;
  background: rgba(0, 0, 0, .78); border-radius: 6px;
  padding: 2px 7px; font-size: 12.5px; font-weight: 600;
}
.yt-only {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(0, 0, 0, .78); border-radius: 6px;
  padding: 2px 7px; font-size: 12px; font-weight: 600; color: var(--accent);
}
.card .star {
  position: absolute; right: 4px; top: 4px;
  width: 44px; height: 44px; border-radius: 50%;
  font-size: 24px; line-height: 1; color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
}
.card .star.on { color: var(--accent); }
.info { padding: 10px 12px 12px; }
.title {
  font-size: 14.5px; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.7em;
}
.meta {
  margin-top: 4px; color: var(--muted); font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.empty { padding: 60px 20px; text-align: center; color: var(--muted); }

/* Community list counts, top left of the thumbnail. */
.count {
  position: absolute; left: 8px; top: 8px;
  background: rgba(0, 0, 0, .78); border-radius: 6px;
  padding: 2px 7px; font-size: 12.5px; font-weight: 700; color: var(--accent);
}

/* ---- linking devices */
.linking {
  width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  padding: 0; border: 1px solid var(--line); border-radius: 18px;
  background: var(--panel); color: var(--text);
}
.linking::backdrop { background: rgba(5, 6, 26, .7); }
.linking form { padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 14px; }
.linking h2 { margin: 0; font-size: 21px; }
.linking h3 { margin: 0 0 6px; font-size: 16px; }
.linking p { margin: 0 0 8px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.linking .lead { margin: 0; }
.linking .small { font-size: 13px; margin: 6px 0 0; }
.linking section { padding-top: 12px; border-top: 1px solid var(--line); }
.linking .row { display: flex; gap: 8px; }
.linking input {
  flex: 1; min-width: 0; height: 48px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 17px; letter-spacing: 1px;
}
.linking input:focus { border-color: var(--accent); outline: none; }
.linking .code {
  font-size: 24px; font-weight: 700; letter-spacing: 3px; color: var(--accent);
  user-select: all; font-variant-numeric: tabular-nums;
}
.linking .go { background: var(--accent); color: var(--accent-ink); }
.linking .go:disabled { opacity: .5; }
.linking .msg { margin: 0; min-height: 1.4em; font-weight: 600; }
.linking .msg.ok { color: #9be7a8; }
.linking .msg.bad { color: #ffb4a8; }
.linking .done { align-self: flex-end; }

/* ---- player */
.player {
  position: fixed; inset: 0; z-index: 20;
  background: #000;
  display: flex; flex-direction: column;
}
.player[hidden] { display: none; }
/* The video fills the whole window; the bar floats over its top edge and
   tucks away while a video plays (see "fill the window" in app.js). */
.player-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px 22px;
  background: linear-gradient(180deg, rgba(10, 13, 42, .96) 0%, rgba(10, 13, 42, .88) 65%, rgba(10, 13, 42, 0) 100%);
  transition: transform .3s ease, opacity .3s ease;
}
.player.bar-hidden .player-bar { transform: translateY(-100%); opacity: 0; pointer-events: none; }
/* Pointer moves over the video only reach YouTube's player, so this clear
   layer over it notices movement and brings the bar back. It steps aside
   after each move so clicks reach YouTube's own controls. */
.player-sense { position: absolute; inset: 0; z-index: 1; display: none; }
.player.immersive .player-sense { display: block; }
.player.sense-yield .player-sense { pointer-events: none; }
.player-title {
  flex: 1; min-width: 0; font-weight: 600; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player-frame { position: absolute; inset: 0; }
.fallback {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 24px; text-align: center; color: var(--muted);
}
.fallback img { width: min(60%, 420px); border-radius: var(--radius); opacity: .85; }
.fallback p { margin: 0; font-size: 16px; }
.btn.big { height: 56px; padding: 0 28px; font-size: 17px; background: var(--accent); color: var(--accent-ink); }
.player-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---- portrait / narrow: the park rail becomes a swipeable strip */
@media (max-width: 760px) {
  body { overflow: auto; display: block; }
  .banner { position: sticky; top: 0; z-index: 6; height: 60px; padding: 0 14px; }
  .banner .logo { font-size: 38px; }
  .banner.tucked .logo { font-size: 30px; }
  .banner .tagline { display: none; }
  .banner .castle { right: 10px; }
  .toolbar { top: 44px; }
  .app { display: block; height: auto; }
  .rail { display: block; border-right: 0; border-bottom: 1px solid var(--line); }
  .parks {
    flex-direction: row; overflow-x: auto; overflow-y: hidden;
    padding: 8px 12px; gap: 6px; scrollbar-width: none;
  }
  .parks::-webkit-scrollbar { display: none; }
  .park { width: auto; flex: none; min-height: 44px; border: 1px solid var(--line); border-radius: 22px; padding: 4px 14px; gap: 6px; }
  .park .lbl { white-space: nowrap; }
  .park.child { padding-left: 14px; }
  .park.support { margin: 0; }
  .park.support small { display: none; }
  .sep { width: 1px; height: auto; margin: 6px 2px; }
  .main { overflow: visible; padding: 0 12px 24px; }
  .chips { margin: 0 -12px; padding: 2px 12px 10px; }
  .toolbar { flex-wrap: wrap; }
  .search { flex-basis: 100%; }
  .select { flex: 1; }
  .select select { max-width: none; flex: 1; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .player-bar .btn { padding: 0 12px; font-size: 14px; }
}