/* =========================================================
   STABLE VIEWPORT + SAFE AREA (VIDEOS)
   PUT AT VERY TOP
========================================================= */
:root{
  --H: 100vh;       /* fallback */
  --u: 1vh;         /* fallback */
  --safeTop: env(safe-area-inset-top, 0px);
  --safeBot: env(safe-area-inset-bottom, 0px);
  --safeL:   env(safe-area-inset-left, 0px);
  --safeR:   env(safe-area-inset-right, 0px);
}
@supports (height: 100svh){
  :root{
    --H: 100svh;    /* stable on iPhone */
    --u: 1svh;
  }
}

/* =========================================================
   MOBILE — VIDEOS PAGE
   MOBILE ONLY (DESKTOP UNAFFECTED)
========================================================= */

/* ===============================
   1. GLOBAL BASELINE
================================ */
*, *::before, *::after { box-sizing: border-box; }

html,
body{
  margin: 0;
  padding: 0;
  height: var(--H);
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior: none;
}

button,
input,
select,
textarea{
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*{ -webkit-tap-highlight-color: transparent; }

iframe{
  display: block;
  border: none;
}

/* ===============================
   2. TUNING KNOBS — SAFE ACROSS ALL iPHONES (UPDATED)
================================ */
:root{
  /* ✅ keep centered */
  --stack-width: clamp(240px, calc(100vw - 24px), 380px);
  
    --playerToButtonsGap: 16px; /* <-- THIS is the constant distance */
  
  --stackLift: 20px; /* moves player + buttons up together */


  /* ✅ blue bar sizing (matches your HTML/CSS) */
  --bottomLinksH: 44px;
  --bottomLinksPadY: 24px; /* your bottom offset feel */

  /* ✅ fixed gap between Video buttons row and blue bar */
  --gapBetweenButtonsAndBlueBar: 18px;

  /* ✅ NEW: move Video 1/2/3 row toward the player
     + value = buttons go UP (closer to player)
     0 = current position
  */
  --buttonsLift: 30px; /* try 20px */

  /* ✅ safe bottom anchor for the Video 1/2/3 row */
  --raisedRowBottom: calc(
    var(--safeBot)
    + var(--bottomLinksPadY)
    + var(--bottomLinksH)
    + var(--gapBetweenButtonsAndBlueBar)
    + var(--buttonsLift)
    + var(--stackLift)   /* 👈 ADD THIS */
  );


  /* ✅ player must stay ABOVE the raised row by at least this gap */
  --gapPlayerToRaisedRow: 6px;

  /* Background behavior */
  --bg-pos-x: 48%;
  --bg-pos-y: 50%;
}

/* ===============================
   3. PORTRAIT LAYOUT
================================ */
.videos-body{
  position: fixed;
  inset: 0;
  height: var(--H);
  background: black;
  overflow: hidden;
  touch-action: none;
}

.videos-bg-wrapper{
  position: fixed;
  inset: 0;
  height: var(--H);

  background-image: url("../assets/videobg2.gif");
  background-repeat: no-repeat;

  background-size: auto 100%;
  background-position: var(--bg-pos-x) var(--bg-pos-y);

  pointer-events: none;
  z-index: -1;
  transform: translateZ(0);
}

.videos-ui-wrapper{
  position: relative;
  width: 100%;
  height: 100%;
}

/* ===============================
   PLAYER STACK (CENTERED, AND CLAMPED)
   ✅ stays centered
   ✅ shrinks on small iPhones instead of overlapping
================================ */
.player-stack{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% - var(--stackLift)));


  width: var(--stack-width);
  max-width: calc(100vw - 24px);

  /* ✅ never allow the player to extend into the button + blue bar zone */
  max-height: calc(
    var(--H)
    - var(--safeTop)
    - (var(--raisedRowBottom) + var(--gapPlayerToRaisedRow))
  );
}

/* The player takes full width */
.wmp-player{
  width: 100%;
  position: relative;
  margin: 0 !important;
}

/* If max-height clamps, make the inside shrink instead of overflow */
.wmp-screen{
  width: 100%;
  aspect-ratio: 4 / 3;

  /* ✅ allow shrinking if needed */
  max-height: 100%;
}

.wmp-screen iframe{
  width: 100%;
  height: 100%;
}

/* ===============================
   REMOVE BANNER COMPLETELY
================================ */
.videos-banner-gif{
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/* ===============================
   PLAYER UI
================================ */
.wmp-main{ padding: 5px; }

/* Controls */
.wmp-controls{ padding: 5px; }

.wmp-controls-row{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.wmp-buttons-row{
  display: inline-flex;
  gap: 5px;
}

.media-btn{
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  pointer-events: auto;
  image-rendering: pixelated;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
}

.media-btn:active{ transform: scale(0.85); }
.media-btn.pressed,
.media-btn.clicked{ transform: scale(0.85); }

.media-btn img{
  width: 100%;
  height: 110%;
  display: block;
}

/* ===============================
   TIMELINE SLIDER
================================ */
.wmp-track-slider{
  width: 99%;
  height: 10px;
  background: #808080;

  -webkit-appearance: none;
  appearance: none;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  margin: 4px 0;
  cursor: pointer;
  touch-action: pan-x pan-y;
  transform: translate(1px, -4px);
}

.wmp-track-slider::-webkit-slider-runnable-track{
  width: 100%;
  height: 100%;
  background: #808080;
  border: none !important;
  box-shadow: none !important;
}

.wmp-track-slider::-moz-range-track{
  width: 100%;
  height: 100%;
  background: #808080;
  border: none !important;
  box-shadow: none !important;
}

.wmp-track-slider::-webkit-slider-thumb{
  -webkit-appearance: none !important;
  width: 25px;
  height: 48px;
  margin-top: -19px;

  background: transparent
    url("../assets/timeline_thumb.png")
    center / contain no-repeat !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.wmp-track-slider::-moz-range-thumb{
  width: 48px;
  height: 48px;

  background: transparent
    url("../assets/timeline_thumb.png")
    center / contain no-repeat !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.wmp-track-slider:focus,
.wmp-track-slider:active{
  outline: none !important;
  box-shadow: none !important;
}

/* ===============================
   HIDE DESKTOP ELEMENTS (ON MOBILE ONLY)
================================ */
.top-video-wrap,
.top-video-buttons,
.top-video-btn,
.wmp-volume-right,
.wmp-volume-slider,
.wmp-speaker-icon{
  display: none !important;
}

/* ===============================
   BOTTOM LINKS — BLUE BAR
================================ */
.bottom-links{
  position: absolute;
  left: 50%;
  bottom: calc(var(--bottomLinksPadY) + var(--safeBot));
  transform: translateX(-50%);
  height: var(--bottomLinksH);

  padding: 0 16px;
  background: #0000ff;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;

  font-family:
    "Comic Sans MS",
    "Comic Sans",
    "Chalkboard SE",
    "Marker Felt",
    cursive;
  font-size: 18px;

  white-space: nowrap;
  z-index: 1001;
}

/* ===============================
   MOBILE VIDEO 1/2/3 ROW (PINNED ABOVE BLUE BAR)
   ✅ constant gap above blue bar
   ✅ shrinks on small screens
================================ */
.bottom-links--raised{
  position: absolute;
  left: 50%;
  bottom: var(--raisedRowBottom);
  transform: translateX(-50%);

  display: flex;
  align-items: center;
  justify-content: center;

  gap: clamp(10px, 4vw, 20px);
  background: transparent;
  z-index: 1002;
}

/* ✅ shrink the button images if screen is small */
.bottom-links--raised img{
  height: clamp(28px, 7vw, 44px);
  width: auto;
 

  pointer-events: auto;
  user-select: none;
  -webkit-user-drag: none;
  image-rendering: pixelated;
  cursor: pointer;
  transition: transform 0.20s ease;
}

.bottom-links--raised img:hover{ transform: scale(1.10); }
.bottom-links--raised img:active{ transform: scale(0.95); }
.bottom-links--raised img.clicked{ transform: scale(1.10); }

/* =========================================================
   FINAL: STABLE HEIGHT + SAFE AREA OVERRIDES (VIDEOS)
   PUT AT VERY BOTTOM
========================================================= */
html, body,
.videos-body,
.videos-bg-wrapper{
  height: var(--H) !important;
}

/* Safe padding for blue bar */
.bottom-links{
  padding-left: calc(16px + var(--safeL)) !important;
  padding-right: calc(16px + var(--safeR)) !important;
}


/* =========================================================
   LANDSCAPE BLOCKER (MOBILE ONLY)
   Pink background + plushy_cartoon.gif centered
========================================================= */
.landscape-blocker{
  display: none;                 /* hidden by default */
  position: fixed;
  inset: 0;
  z-index: 999999;               /* above everything */
  background: #0000FF;          

  /* center the gif */
  background-image: url("../assets/plushy_cartoon.gif");
  background-repeat: no-repeat;
  background-position: center center;
background-size: min(50vw, 220px) auto;

  /* keep it unclickable behind it? NO: we WANT it to block */
  pointer-events: auto;
}

/* show only when device is landscape */
@media (orientation: landscape){
  .landscape-blocker{
    display: block;
  }
}


/* =========================================================
   CONSTANT BUTTON DISTANCE BELOW PLAYER
   ✅ player does NOT move
   ✅ buttons always same distance below player
   ✅ still stays above blue bar
   PUT AT VERY END
========================================================= */

:root{
  --buttonsBelowPlayer: 60px; /* ✅ change this to move buttons up/down */
}

/* keep player centered exactly as you have it */
.player-stack{
  /* no changes on purpose */
}

/* ✅ anchor the buttons to the player's bottom instead of the screen bottom */
.bottom-links--raised{
  top: calc(
    50%
    - var(--stackLift)                 /* matches your player-stack translate */
    + ( (var(--stack-width) * (3/4)) / 2 )  /* half of player height (4:3) */
    + var(--buttonsBelowPlayer)        /* your constant gap */
  ) !important;

  bottom: auto !important;            /* stop using bottom anchoring */
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* ✅ safety: never let the buttons fall into the blue bar zone */
.bottom-links--raised{
  max-top: calc(
    var(--H)
    - var(--safeBot)
    - var(--bottomLinksPadY)
    - var(--bottomLinksH)
    - var(--gapBetweenButtonsAndBlueBar)
  );
}

/* If browser ignores max-top (it will), hard clamp using translateY */
@supports not (top: clamp(0px, 1px, 2px)){
  /* no-op */
}

/* Real clamp: use clamp() on top */
.bottom-links--raised{
  top: clamp(
    0px,
    calc(
      50%
      - var(--stackLift)
      + ( (var(--stack-width) * (3/4)) / 2 )
      + var(--buttonsBelowPlayer)
    ),
    calc(
      var(--H)
      - var(--safeBot)
      - var(--bottomLinksPadY)
      - var(--bottomLinksH)
      - var(--gapBetweenButtonsAndBlueBar)
      - 60px /* approx height of button row */
    )
  ) !important;
}