/* Shell: nav, view switching, and the persistent video layer. */
:root {
  --app-bg: #ffffff;
  --app-fg: #0f0f10;
  --app-dim: #606069;
  --app-line: rgba(0, 0, 0, .12);
  --app-hover: rgba(0, 0, 0, .06);
  --app-tile: #e8e8ec;
  --app-accent: #22d37a;
  --app-nav-h: 62px;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Light, matching exp-theme.css and the rest of the site. */
html[data-view="home"],
html[data-view="watch"],
body[data-view="home"],
body[data-view="watch"] {
  background: var(--app-bg) !important;
  color: var(--app-fg) !important;
}

/* ---- Header --------------------------------------------------------------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 300;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  height: var(--app-nav-h);
  padding: 0 16px;
  background: var(--app-bg);
  border-bottom: 1px solid var(--app-line);
}
body[data-view="play"] .app-header { display: none; }

.app-header__brand {
  display: inline-flex;
  align-items: center;
  height: 40px;
}
.app-header__brand img { height: 34px; width: auto; display: block; }

.app-search {
  display: flex;
  justify-content: center;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}
.app-search__input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 14px;
  font: inherit;
  font-size: 15px;
  color: var(--app-fg);
  background: #fff;
  border: 1px solid #c8c8ce;
  border-right: 0;
  border-radius: 19px 0 0 19px;
  outline: none;
}
.app-search__input::placeholder { color: #8b8b93; }
.app-search__input:focus { border-color: var(--app-accent); }
.app-search__go {
  display: grid;
  place-items: center;
  width: 60px;
  height: 38px;
  color: #3a3a42;
  background: #f2f2f4;
  border: 1px solid #c8c8ce;
  border-radius: 0 19px 19px 0;
  cursor: pointer;
}
.app-search__go:hover { background: #e6e6ea; }

.app-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Beats .exp-social-link from exp-theme.css, which is kept on the profile link
   only because shared/auth.js selects it to show/hide on sign-in. */
.app-header .app-header__btn {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 13px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--app-fg);
  background: transparent;
  border: 1px solid var(--app-line);
  border-radius: 999px;
  cursor: pointer;
  position: static;
  min-width: 0;
}
.app-header .app-header__btn:hover { background: var(--app-hover); }
.app-header .app-header__btn--solid { background: #f2f2f4; }
.app-header .app-header__btn--accent {
  background: var(--app-accent);
  border-color: var(--app-accent);
  color: #06210f;
}
.app-header .app-header__btn--accent:hover { filter: brightness(1.08); background: var(--app-accent); }
.app-header .app-header__btn--live {
  background: #e0203a;
  border-color: #e0203a;
  color: #fff;
}
.app-header .app-header__btn--live:hover { filter: brightness(1.08); background: #e0203a; }

/* ---- Filter chips --------------------------------------------------------- */
.app-chips {
  position: sticky;
  top: var(--app-nav-h);
  z-index: 200;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 12px 0 14px;
  margin-bottom: 4px;
  background: var(--app-bg);
  scrollbar-width: none;
}
.app-chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 13px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--app-fg);
  background: #f0f0f3;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.chip:hover { background: #e2e2e7; }
.chip.is-active { background: var(--app-fg); color: #fff; }

/* Narrow: the actions wrap to their own scrollable row under the search rather
   than being hidden — there is no menu button to bring them back. */
@media (max-width: 900px) {
  .app-header {
    grid-template-columns: auto minmax(0, 1fr);
    height: auto;
    gap: 10px 12px;
    padding: 10px 12px;
  }
  .app-header__actions {
    grid-column: 1 / -1;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .app-header__actions::-webkit-scrollbar { display: none; }
  .app-chips { top: 0; }
}

/* View switching. Only the active view is in the layout. */
.app-view { display: none; }
body[data-view="home"] #homeView { display: block; }
body[data-view="watch"] #watchView { display: grid; }

#gameRoot { display: none; }
body[data-view="play"] #gameRoot { display: block; }
body[data-view="play"] #viewRoot { display: none; }

/* The game owns the whole screen, including the nav. */
body[data-view="play"] .exp-social-nav { display: none; }
body[data-view="play"] { overflow: hidden; }

/* Home and watch are an ordinary scrolling page, not a locked game viewport.
   game.css locks html/body for the game; undo that outside the play view. */
body:not([data-view="play"]),
body:not([data-view="play"]) > #viewRoot {
  position: static;
  overflow: visible;
  height: auto;
  width: auto;
}
html:has(body:not([data-view="play"])) { overflow-y: auto; height: auto; }

#viewRoot {
  max-width: 1680px;
  margin: 0 auto;
  padding: 20px 24px 96px;
  position: relative;
  z-index: 1;
}

/* Persistent video layer. Never re-parented; positioned per dock target.
   Empty and inert until a slot is opened. */
#videoLayer {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}
#videoLayer:empty { display: none; }
#videoLayer > * { pointer-events: auto; }

/* The legacy in-game thumbnail strip is retired — the Video-button picker replaces
   it. legacy-game.js re-parents this to <body> on the home map, so a stylesheet
   rule is the only thing that can guarantee it never covers the world again. */
#expVideoPanel { display: none !important; }

.feed-status {
  color: var(--app-dim);
  padding: 32px 4px;
  font-size: 15px;
}
.feed-status[hidden] { display: none; }

.shelf-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 12px;
}
.shelf-head h2 {
  font-size: 19px;
  font-weight: 700;
  margin: 0;
}

@media (max-width: 700px) {
  #viewRoot { padding: 12px 12px 80px; }
  :root { --app-nav-h: 54px; }
}