* { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }
html, body { background: #000; color: #ddd; font: 15px/1.4 system-ui, "Segoe UI", Arial, sans-serif; overflow: hidden; overscroll-behavior: none; }
/* body is the "screen". Normally it's just the viewport. When a phone browser is in
   "Desktop site" mode (layout ~980px wide), app.js shrinks it to the real screen size
   in CSS px (--w/--h) and zooms it back up by --u, so the page and the player inside
   render at phone size and fill the screen. Layout rules are container queries on it. */
body {
  position: fixed; top: 0; left: 0;
  width: var(--w, 100vw); height: var(--h, 100dvh);
  zoom: var(--u, 1);
  container-type: size;
  user-select: none; -webkit-user-select: none;
}
/* Desktop: top bar, video fills the screen, title under it */
#app {
  height: 100%; display: grid;
  grid-template: "bar" auto "stage" 1fr "info" auto / 100%;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Top bar: prev/next on the right, logo in the middle, "all videos" on the left */
/* Brand: white + yellow on dark navy (same as icon.svg) */
#bar { grid-area: bar; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; height: 56px; padding: 0 8px; background: #11151C; border-bottom: 1px solid #1d2330; }
#nav { display: flex; gap: 6px; }
#tools { display: flex; justify-content: flex-end; }
#logo { display: flex; align-items: center; gap: 7px; font-size: 24px; font-weight: 800; letter-spacing: -0.5px; text-decoration: none; color: #EDEFF2; white-space: nowrap; }
#logo b { color: #F2B90F; font-weight: 800; margin-left: -7px; }
#logo svg { width: 26px; height: 26px; color: #F2B90F; flex: none; }
button { border: 0; color: #dfe2e7; font: inherit; font-size: 15px; line-height: 1; height: 40px; padding: 0 14px; background: #1b2130; cursor: pointer; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; touch-action: manipulation; }
#prev, #next { min-width: 44px; }
/* Icons are SVG (not text glyphs like ›) so they sit exactly in the middle of the button */
button svg { width: 20px; height: 20px; flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
button:active { background: #2a3245; }
@media (hover: hover) { button:hover { background: #252c3d; } }
button:disabled { color: #3c4352; cursor: default; background: #151a24; }
/* Hamburger: three bars that turn into an X while the menu is open */
#menuBtn { width: 44px; padding: 0; }
.burger, .burger::before, .burger::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, background-color .2s; }
.burger { position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -6px; } .burger::after { top: 6px; }
#menuBtn[aria-expanded="true"] { background: #F2B90F; color: #11151C; }
#menuBtn[aria-expanded="true"] .burger { background: transparent; }
#menuBtn[aria-expanded="true"] .burger::before { transform: translateY(6px) rotate(45deg); }
#menuBtn[aria-expanded="true"] .burger::after { transform: translateY(-6px) rotate(-45deg); }

/* Menu: drops down from the hamburger on the left */
#bar { position: relative; }
#menu { position: absolute; top: calc(100% + 6px); left: 8px; z-index: 5; min-width: 250px; padding: 6px; background: #1b2130; border: 1px solid #2a3245; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.55); display: flex; flex-direction: column; gap: 2px; }
#menu[hidden] { display: none; }
#menu button { justify-content: flex-start; gap: 12px; height: 48px; padding: 0 12px; background: transparent; font-size: 16px; color: #EDEFF2; }
#menu button:active { background: #2a3245; }
@media (hover: hover) { #menu button:hover { background: #252c3d; } }
#menu svg { width: 20px; height: 20px; flex: none; fill: none; stroke: #F2B90F; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

#stage, #msg { grid-area: stage; min-height: 0; min-width: 0; }
#stage iframe { width: 100%; height: 100%; border: 0; display: block; }
#info { grid-area: info; min-width: 0; display: flex; align-items: baseline; gap: 12px; padding: 10px 16px 14px; }
#title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 17px; font-weight: 600; color: #f2f2f2; }
#meta { color: #777; font-size: 13px; white-space: nowrap; }
#hint { display: none; }
#msg { display: none; align-items: center; justify-content: center; text-align: center; padding: 16px; color: #888; }

/* "All videos": a scrolling grid covering everything below the bar */
#gallery { grid-row: 2 / -1; grid-column: 1 / -1; z-index: 1; background: #000; overflow-y: auto; overscroll-behavior: contain; }
#gallery[hidden] { display: none; }
/* Search row, pinned right under the top bar while the gallery scrolls */
#galleryHead { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: #0d1016; border-bottom: 1px solid #1d2330; }
#search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; background: #1b2130; border: 1px solid #2a3245; border-radius: 10px; cursor: text; }
#search:focus-within { border-color: #F2B90F; }
#search svg { width: 18px; height: 18px; flex: none; fill: none; stroke: #8a93a6; stroke-width: 2.2; stroke-linecap: round; }
#q { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: 0; color: #EDEFF2; font: inherit; font-size: 16px; }
#q::placeholder { color: #6b7385; }
#q::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a93a6' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat; }
#galleryClose { width: 44px; height: 44px; padding: 0; flex: none; }
#grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px 14px; padding: 16px; }
.card[hidden] { display: none; }
.card { display: block; cursor: pointer; color: inherit; text-decoration: none; border-radius: 10px; }
.thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #161616; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dur { position: absolute; bottom: 6px; left: 6px; background: rgba(0,0,0,.8); color: #fff; font-size: 12px; padding: 2px 6px; border-radius: 4px; direction: ltr; }
.card h3 { font-size: 14px; font-weight: 600; color: #eee; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card time { font-size: 12px; color: #777; }
.card.current .thumb { outline: 3px solid #F2B90F; outline-offset: -3px; }
@media (hover: hover) { .card:hover h3 { color: #fff; text-decoration: underline; } }
#more { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: #6b7385; font-size: 14px; padding: 8px 16px 28px; }
#more:empty { padding: 0; }
#more button { height: 40px; padding: 0 16px; font-size: 14px; }

/* Narrow screens: arrows only, so the bar fits */
@container (max-width: 560px) {
  #bar { padding: 0 6px; gap: 6px; }
  #prev span, #next span { display: none; }
  #prev, #next { padding: 0; width: 44px; }
  #logo { font-size: 20px; }
  #logo svg { width: 22px; height: 22px; }
  #grid { grid-template-columns: repeat(2, 1fr); gap: 16px 10px; padding: 12px 10px; }
  #galleryHead { padding: 8px 10px; }
}

/* Phone portrait: 16:9 video edge to edge under the bar, title under it */
@container (orientation: portrait) {
  #app { grid-template: "bar" auto "stage" auto "info" auto "swipe" 1fr / 100%; }
  #stage, #msg { aspect-ratio: 16 / 9; width: 100%; }
  #info { flex-direction: column; align-items: stretch; gap: 4px; padding: 14px 16px; }
  #title { white-space: normal; font-size: 18px; }
  #hint { display: block; grid-area: swipe; align-self: end; text-align: center; color: #444; font-size: 13px; padding-bottom: 12px; }
}

/* Phone landscape: bar on top, video as large as fits under it */
@container (orientation: landscape) and (max-height: 520px) {
  #bar { height: 48px; }
  #stage, #msg { height: 100%; aspect-ratio: 16 / 9; max-width: 100%; justify-self: center; }
  #info { display: none; }
}