/* Website editor page (/create/{videoId}): phone first. The video sits on top, the editor drawer below it. */
:root { --we-bg: #2b1170; --we-ink: #fff; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--we-bg); color: var(--we-ink); font-family: Fredoka, system-ui, sans-serif; }
body { min-height: 100dvh; padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
.we-skip { position: absolute; left: -999px; top: 8px; z-index: 3000; padding: 8px 14px; border-radius: 10px; background: #fff; color: #2b1170; font-weight: 700; }
.we-skip:focus { left: 8px; }
.we-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#we-main:focus { outline: none; }
.we-top { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 14px; }
.we-logo { font-family: 'GZ Bangers', Fredoka, sans-serif; font-size: 26px; letter-spacing: 1px; color: #ffd93d; text-decoration: none; }
/* The player box is #movie_player's stand-in: OverlayRenderer appends its stage here and fits it to the iframe */
.we-player { position: relative; width: 100%; max-width: 960px; margin: 0 auto; aspect-ratio: 16 / 9; background: #000; overflow: hidden; touch-action: manipulation; }
.we-player .html5-video-container { position: absolute; inset: 0; }
.we-player { --we-crop: 80px; }                     /* = GZYTVideo crop in page.js: hides YouTube's paused title bar and shelf */
.we-player iframe { position: absolute; left: 0; top: calc(-1 * var(--we-crop)); width: 100%; height: calc(100% + 2 * var(--we-crop)); border: 0; pointer-events: none; }
.we-bigplay { position: absolute; left: 50%; top: 50%; z-index: 80; width: 76px; height: 76px; margin: -38px 0 0 -38px; border: 0; border-radius: 50%;
  background: rgba(30, 10, 80, .75); color: #fff; font-size: 32px; cursor: pointer; }
.we-bigplay[hidden] { display: none; }
.we-bigplay:disabled { opacity: .5; cursor: default; }
.we-msg { max-width: 960px; margin: 12px auto; padding: 12px 16px; border-radius: 12px; background: #fff; color: #2b1170; font-weight: 600; }
.we-msg[hidden] { display: none; }
@media (min-width: 700px) { .we-player { border-radius: 16px; margin-top: 8px; } }
/* While editing, the video must fit above the drawer (--gze-h, editor.css) on any screen */
html.gze-editing .we-player { max-width: min(960px, calc((100dvh - 64px - var(--gze-h)) * 16 / 9)); }
html.gze-showing .we-player { max-width: min(100%, calc((100dvh - 56px) * 16 / 9)); }
/* Before editing: the video AND the two start buttons must be on the first screen (header 56 + gap 8 + buttons 110 + slack 16),
   or visitors on a short window never see them (BUG-058). The floor keeps the video from shrinking below 480px wide. */
html:not(.gze-editing):not(.gze-showing) body:has(#we-actions:not([hidden])) .we-player { max-width: min(960px, max(480px, calc((100dvh - 190px) * 16 / 9))); }
/* Portrait phones and tablets: the drawer takes everything under the video (header + a 16:9 video at full width,
   at most 960px) instead of leaving a gap */
@media (orientation: portrait) and (max-width: 1100px) {
  html.gze-editing { --gze-h: max(300px, calc(100dvh - 64px - min(960px, 100vw) * .5625 - env(safe-area-inset-top))); }
  /* Show mode: the video in the middle of the screen, not stuck under the header */
  html.gze-showing .we-player { margin-top: max(0px, calc((100dvh - 48px - min(960px, 100vw) * .5625) / 2 - 24px)); }
}
/* Show mode buttons: a bar in normal flow right under the picture. Not inside the video box and not position:fixed:
   iPhone browsers drew neither (BUG-013). Same on every screen; landscape phones overlay it at the top corners. */
.we-showbar { display: none; }
html.gze-showing .we-showbar { display: flex; justify-content: center; gap: 12px; max-width: 960px; margin: 0 auto; padding: 14px 12px 0; }
html.gze-showing .we-showbar .gze-exit-show {
  position: static; transform: none; top: auto; left: auto; right: auto; bottom: auto; flex: 1 1 0; max-width: 200px; height: 48px; padding: 0 6px;
  justify-content: center; text-align: center; line-height: 1.05; font-size: clamp(13px, 4.2vw, 16px); white-space: nowrap;
}
.we-sound { display: none; }
html.gze-showing .we-sound, html.we-playmode .we-sound { display: flex; justify-content: center; max-width: 960px; margin: 0 auto; padding: 8px 12px 0; }
/* Short landscape screens (landscape phones, and desktop browsers zoomed to 150-200%, BUG-028): too short for video +
   fixed drawer. The page scrolls instead: the whole picture fits under the header, the drawer follows it in the page
   flow. Show mode plays full width. */
.we-rotate { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  html.gze-editing:not(.gze-showing), html.gze-editing:not(.gze-showing) body { height: auto; }
  html.gze-editing:not(.gze-showing) body { padding-bottom: 0 !important; }
  html.gze-editing:not(.gze-showing) .we-player { max-width: min(960px, calc((100dvh - 56px) * 16 / 9)); }
  html.gze-editing:not(.gze-showing) .gze-root { position: relative; left: auto; right: auto; bottom: auto; margin-top: 8px; }
  .we-rotate-ico { font-size: 56px; animation: we-rot 1.6s ease-in-out infinite; }
  html.gze-showing .we-top { display: none; }
  html.gze-showing .we-player { max-width: calc(100dvh * 16 / 9); margin-top: 0; }
  html.gze-showing .we-showbar { position: fixed; top: 12px; left: 0; right: 0; max-width: none; padding: 0 12px; justify-content: space-between; pointer-events: none; z-index: 1000; }
  html.gze-showing .we-sound { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); padding: 0; z-index: 1000; width: min(240px, calc(100vw - 440px)); }
  html.gze-showing .we-showbar .gze-exit-show { flex: 0 0 auto; max-width: none; height: 44px; padding: 0 16px; pointer-events: auto; font-size: 16px; }
}
/* Real landscape phones only (touch, no hover; never a mouse browser, however zoomed): suggest turning the phone, with a
   button that keeps editing sideways (WCAG 1.3.4). While it shows, everything else is visibility:hidden, so neither Tab
   nor a screen reader reaches the controls under it. */
@media (orientation: landscape) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
  html.gze-editing:not(.gze-showing):not(.we-landscape-ok) body { visibility: hidden; }
  html.gze-editing:not(.gze-showing):not(.we-landscape-ok) .we-rotate { display: flex; visibility: visible; position: fixed; inset: 0; z-index: 2500;
    flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: var(--we-bg); text-align: center; font-size: 20px;
    font-weight: 700; padding: 24px; }
}
.we-rotate-ok { min-height: 44px; margin-top: 4px; padding: 0 20px; border: 2px solid #fff; border-radius: 999px; background: transparent; color: #fff;
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.we-rotate-ok:focus-visible { outline: 3px solid #ffd93d; outline-offset: 2px; }
@keyframes we-rot { 0%, 30% { transform: rotate(-90deg); } 60%, 100% { transform: rotate(0deg); } }
/* Reduced motion (BUG-020): the icon stays still, tilted like the phone it asks to turn */
@media (prefers-reduced-motion: reduce) { .we-rotate-ico { animation: none; transform: rotate(-90deg); } }
.we-bigplay--start::after { content: attr(data-cap); position: absolute; left: 50%; top: 100%; margin-top: 10px; transform: translateX(-50%);
  white-space: nowrap; font-size: 15px; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
/* Phones: no double-tap zoom on quick taps, no rubber-band scroll under the drawer, room for the home indicator */
html { touch-action: manipulation; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
html.gze-editing .gze-root { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
/* Narrow pictures (a 4:3 or vertical video on a phone): the selected-item toolbar wraps into two rows instead of
   being cut off by the stage */
.we-player .gz-overlay { container-type: inline-size; }
@container (max-width: 360px) {
  .gze-selbar.gze-on { flex-wrap: wrap; justify-content: center; max-width: calc(100cqw - 8px); border-radius: 20px; }
  .gze-selbar button { height: 34px; min-width: 34px; font-size: 15px; padding: 0 6px; }
}
/* Phones: the top bar is two rows of five, each icon with a one-word caption under it (touch has no tooltips).
   Same height as the old icon-only rows, so the tray keeps its room. Same breakpoint as GZ_HOST.dockSelBar. */
@media (max-width: 760px) {
  .gze-controls { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .gze-controls > button { width: auto; min-width: 0; height: 48px; padding: 3px 2px; flex-direction: column; gap: 1px; font-size: 19px; border-radius: 14px; }
  .gze-controls > .gze-icon { font-size: 17px; }
  .gze-controls > button > span:first-child { line-height: 1.1; }
  .gze-cap { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 700; line-height: 1.15; }
  .gze-timeline { grid-column: 1 / -1; }
}
@media (max-width: 339px) { .gze-cap { font-size: 9.5px; } }

/* Sign-in notice + Terms / Privacy / Accessibility (BUG-023): on the page before editing; the drawer covers it while
   editing, so it is not there to tab into behind the drawer */
.we-foot { max-width: 960px; margin: 8px auto 0; padding: 0 14px calc(16px + env(safe-area-inset-bottom)); color: #d9ccff; font-size: 13px; line-height: 1.45; text-align: center; }
.we-foot p { margin: 4px 0; }
.we-foot a { color: #fff; font-weight: 700; }
.we-foot-links a { display: inline-block; padding: 6px 2px; }
.we-foot a:focus-visible { outline: 3px solid #ffd93d; outline-offset: 2px; border-radius: 4px; }
html.gze-editing .we-foot { display: none; }
/* Before editing: the two ways in */
.we-a11y { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-left: auto; margin-right: 6px; border-radius: 999px; color: #efe9ff; text-decoration: none; font-size: 20px; }
.we-a11y:hover, .we-a11y:focus-visible { background: rgba(255,255,255,.15); }
html.gze-showing .we-a11y { display: none; }
.we-top-lucky { border: 0; border-radius: 999px; padding: 8px 14px; background: #3ddc84; color: #0d3b20; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
html.gze-showing .we-top-lucky { display: none; }
.we-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 960px; margin: 16px auto; padding: 0 14px; }
.we-actions[hidden] { display: none; }
.we-action { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 12px; border: 0; border-radius: 18px; background: #fff;
  color: #1d1340; font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; box-shadow: 0 5px 0 rgba(0,0,0,.18); }
.we-action small { font-size: 13px; font-weight: 500; color: #6b5f99; }
.we-action--lucky { background: #3ddc84; color: #0d3b20; }
.we-action--lucky small { color: #135c33; }
.we-action:disabled { opacity: .6; cursor: default; }
@media (max-width: 420px) { .we-actions { grid-template-columns: 1fr; } }
/* The lucky layer */
.we-layer { position: fixed; inset: 0; z-index: 2400; display: flex; align-items: flex-start; justify-content: center; padding: 16px; overflow-y: auto;
  background: rgba(20,10,50,.7); }
.we-layer[hidden] { display: none; }
.we-card { width: 100%; max-width: 460px; margin-top: max(16px, env(safe-area-inset-top)); background: #fff; color: #1d1340; border-radius: 22px; padding: 18px; }
.we-card h2 { margin: 0 0 6px; font-size: 22px; }
.we-help { margin: 0 0 12px; color: #6b5f99; font-size: 14px; }
.we-label { display: block; font-weight: 700; font-size: 14px; margin: 8px 0 4px; }
.we-optional { font-weight: 500; color: #6b5f99; }
.we-input { width: 100%; height: 46px; padding: 0 12px; border: 3px solid #8a7bb8; border-radius: 14px; font: inherit; font-size: 16px; color: #1d1340; }
.we-input[aria-invalid=true] { border-color: #ff4d4d; }
.we-err { display: block; min-height: 1.1em; color: #d11a2a; font-size: 13px; font-weight: 600; }
.we-vibes { border: 0; padding: 0; margin: 4px 0 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.we-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 2px solid #e0d8ff; font-weight: 700; cursor: pointer; }
.we-chip:has(input:checked) { border-color: #1d1340; background: #ffd93d; }
.we-row { display: flex; gap: 10px; justify-content: flex-end; }
.we-btn { height: 48px; padding: 0 20px; border: 0; border-radius: 14px; background: #3ddc84; color: #0d3b20; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
.we-btn--ghost { background: #f0ebff; color: #1d1340; }
.we-btn:disabled { opacity: .6; cursor: default; }