/* =========================================================
   IPHONESECRET.CSS (FULL CODE WITH NO SCROLL + NO CUTOFF)
   ✅ no scroll
   ✅ no top/bottom cutoff (stable viewport + safe areas)
   ✅ never overlaps bottom links (reserved zone + gap)
   ✅ width limited by available height (so player MUST shrink)
========================================================= */

/* =========================================================
   FONT
========================================================= */
@font-face{
  font-family: "VGA-FONT";
  src: url("../assets/fonts/Px437_ACM_VGA_8x16.ttf") format("truetype");
  font-display: swap;
}

/* =========================================================
   SAFE AREAS + TUNABLE RESERVES
========================================================= */
:root{
  --safeTop: env(safe-area-inset-top, 0px);
  --safeBot: env(safe-area-inset-bottom, 0px);

  /* tune these only if you want */
  --linksReserve: 150px; /* iPhone needs more reserve than Android usually */
  --playerGap: 18px;
  --topPad: 10px;
}

/* =========================================================
   STABLE VIEWPORT HEIGHT (iOS FRIENDLY)
   Prefer svh (no URL bar jump), fallback dvh, then vh
========================================================= */
:root{ --H: 100vh; }
@supports (height: 100svh){
  :root{ --H: 100svh; }
}
@supports not (height: 100svh){
  @supports (height: 100dvh){
    :root{ --H: 100dvh; }
  }
}

/* =========================================================
   GLOBAL BASELINE (NO SCROLL)
========================================================= */
*,
*::before,
*::after{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  background: #000;

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /* iOS: prevents bounce scroll side effects */
  overscroll-behavior: none;
}

body{
  font-family: "VGA-FONT";
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================================
   ROOT CONTAINER (FIXED HEIGHT + SAFE PADDING)
========================================================= */
.secret-body{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: var(--H);

  padding-top: calc(var(--safeTop) + var(--topPad));
  padding-bottom: var(--safeBot);

  background: #000;
  overflow: hidden !important;
}

/* =========================================================
   MAIN WRAPPER (RESERVES SPACE FOR LINKS)
========================================================= */
.secret-wrapper{
  position: relative;
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  /* ✅ THIS is what stops overlap: player is forced above a reserved zone */
  padding-bottom: calc(var(--linksReserve) + var(--playerGap));
}

/* =========================================================
   VIDEO PLAYER STACK (THE REAL FIX)
   Width is LIMITED by the height available, so it MUST shrink.
========================================================= */
#dos-player{
  /* available vertical space for the player stack */
  --availH: calc(
    var(--H)
    - var(--safeTop)
    - var(--safeBot)
    - var(--topPad)
    - var(--linksReserve)
    - var(--playerGap)
  );

  /* frame ratio 981/1326 ≈ 0.7409 */
  --maxWFromH: calc(var(--availH) * 0.7409);

  /* ✅ width can never exceed what the height allows */
  width: min(clamp(210px, 74vw, 340px), var(--maxWFromH));

  max-width: calc(100vw - 16px);
  margin: 0;

  /* ✅ make absolutely sure it never grows taller than avail */
  max-height: var(--availH);
}

.hidden{ display: none !important; }

/* ---------------------------------------------------------
   VIDEO FRAME
--------------------------------------------------------- */
.dos-frame{
  width: 100%;
  aspect-ratio: 981 / 1326;
  background: #000;

  border: 2px solid #111;
  outline: 2px solid #333;

  display: flex;

  /* ✅ IMPORTANT: do NOT shove sideways on iPhone */
  transform: translateX(0) !important;
}

/* iPhone Safari safe: ensure video never overflows */
#dos-video{
  width: 100%;
  height: 100%;
  display: block;

  /* ✅ contain prevents accidental crop + keeps within frame */
  object-fit: cover;
}

/* =========================================================
   CONTROLS BAR
========================================================= */
.dos-controls{
  width: calc(100% + 2px);
  margin-left: -1px;

  background: #0d0d0d;

  border-left: 1px solid #222;
  border-right: 1px solid #222;
  border-bottom: 1px solid #222;
  outline: 1px solid #333;

  padding: 4px 0;

  display: flex;
  align-items: center;

  transform: translateX(0) !important;
}

/* ---------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */
.retro-btn{
  background: #202020;
  color: #c8c8c8;

  border: 1px solid #444;
  outline: 1px solid #000;

  font-family: "VGA-FONT";
  cursor: pointer;
  touch-action: manipulation;

  width: 34px;
  height: 25px;

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

  padding: 0;
  line-height: 1;
}

#btn-play{
  margin-left: 8px;
  margin-right: auto;
  font-size: 0.5rem;
}

#btn-full{
  margin-right: 8px;
  font-size: 0.4rem;
}

/* =========================================================
   VOLUME (HIDDEN)
========================================================= */
#dos-volume{ display: none !important; }

/* =========================================================
   NUMBER LINKS (FIXED BLOCK HEIGHT = RESERVE ZONE)
========================================================= */
.secret-number-links{
  position: absolute;
  bottom: calc(max(14px, var(--safeBot)) + 2px);

  left: 50%;
  transform: translateX(-50%);

  display: flex;
  flex-direction: column;
  gap: 1.4vh;
  align-items: center;

  padding-bottom: 8px;

  /* ✅ makes reserve zone real + consistent */
  min-height: var(--linksReserve);
  justify-content: flex-end;

  max-width: calc(100vw - 16px);
  z-index: 50;
}

.secret-number-links a{
  font-size: 2.1vh;          /* slightly safer on iPhone */
  letter-spacing: 0.22vh;
  color: red;
  text-decoration: none;
  cursor: pointer;
}

.secret-number-links a:hover,
.secret-number-links a.active{
  color: #777;
}

/* =========================================================
   TIC TAC TOE (UNCHANGED, SAFE WIDTH)
========================================================= */
#ttt-box{
  position: absolute;
  top: 12vh;
  width: clamp(280px, 82vw, 380px);
  max-width: calc(100vw - 16px);
  aspect-ratio: 1 / 1;
  display: none;
}

#ttt-grid{
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  border: 2px solid #111;
  outline: 1px solid #333;
}

.ttt-cell{
  border: 2px solid #111;
  outline: 1px solid #333;
  font-size: 6vh;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
}

#ttt-win-message{
  position: absolute;
  top: 40vh;
  font-size: 3vh;
  color: #555;
  display: none;
}

#unlock-username{
  cursor: pointer;
  color: red;
  text-decoration: underline;
}

/* =========================================================
   EXTRA SAFETY FOR VERY SHORT IPHONES (SE / MINI ETC)
========================================================= */
@media (max-height: 700px) and (pointer: coarse){
  :root{
    --linksReserve: 140px;
    --playerGap: 14px;
    --topPad: 8px;
  }

  #dos-player{
    width: min(clamp(190px, 70vw, 310px), var(--maxWFromH));
    max-width: calc(100vw - 14px);
  }

  .secret-number-links a{
    font-size: 1.95vh;
    letter-spacing: 0.18vh;
  }
}

/* =========================================================
   LANDSCAPE BLOCKER (MOBILE ONLY)
========================================================= */

.secret-landscape-lock{
  display: none;
}

@media (max-width: 900px) and (pointer: coarse) and (orientation: landscape){

  .secret-wrapper{
    display: none !important;
  }

  .secret-landscape-lock{
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 99999999;

    background: red !important;

    background-image: url("/assets/plushy_cartoon.gif") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;

    /* 👇 SMALLER GIF */
background-size: min(45vw, 200px) auto !important;



    pointer-events: auto;
    touch-action: none;
  }
}