/* =========================================================
   STABLE VIEWPORT + SAFE AREA (GROWNUPS)
   PUT AT VERY TOP
========================================================= */
:root{
  --H: 100vh;       /* fallback */
  --u: 1vh;         /* fallback = 1% of viewport height */
  --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 — GROWNUPS PAGE
   PORTRAIT-LOCKED HUD
   MOBILE ONLY (DESKTOP UNAFFECTED)
========================================================= */

/* ===============================
   PX437 VGA FONT (FOLLOW ME ONLY)
================================ */
@font-face {
    font-family: "Px437_ACM_VGA_8x16";
    src: url("../assets/fonts/Px437_ACM_VGA_8x16.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

/* ===============================
   MASTER POSITION CONTROL (NEW)
================================ */
:root {
    --login-stack-offset-y: 18px;
}

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

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overscroll-behavior: none;
    touch-action: manipulation;
    background: black;

    /* ✅ NORMAL FONT */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

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

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

    /* ✅ NORMAL FONT */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* ===============================
   2. ROOT HUD CONTAINER
================================ */
.grownups-body {
    position: fixed;
    inset: 0;
    width: 100%;
    height: var(--H);
    background: black;
    overflow: hidden;
    touch-action: none;
}

/* ===============================
   2.5 SAFARI SCALE WRAPPER
================================ */
.grownups-scale {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    transform-origin: top center;
}

/* ===============================
   3. BACKGROUND (VISUAL ONLY)
================================ */
.bg-wrapper {
    position: fixed;
    inset: 0;
    height: var(--H);
    background: url("../assets/bg_grownups_mobil.jpg") center / cover no-repeat;
    pointer-events: none;
    z-index: -1;
}

/* ===============================
   4. BANNER
================================ */
.grownups-banner {
    position: absolute;
    top: calc(30px + var(--safeTop));
    left: 51%;
    transform: translateX(-50%);
    width: 300px;
    image-rendering: pixelated;
    pointer-events: none;
}

/* ===============================
   5. LOGIN STACK (CENTER HUD)
================================ */
.login-wrapper {
    position: absolute;
    top: calc(45% + var(--login-stack-offset-y));
    left: 50%;
    transform: translate(-50%, -10%);
    width: 100%;
    display: flex;
    justify-content: center;
}

.login-panel {
    position: relative;
    width: 230px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.login-panel::before {
    content: "";
    position: absolute;
    width: 240px;
    height: 160px;
    left: 50%;
    top: -20px;
    transform: translate(-50%, 14px);
    background: #ff00b7;
    z-index: -1;
    pointer-events: none;
}

/* ===============================
   6. HEADERS
================================ */
.login-title {
    font-size: 14px;
    color: yellow;
    letter-spacing: 1.5px;
}

/* ===============================
   7. USERNAME
================================ */
.login-box {
    width: 100%;
    height: 36px;
    border: 4px solid yellow;
    background: white;
    display: flex;
    align-items: center;
    padding: 0 6px;
}

.login-box input {
    width: 100%;
    height: 100%;
    padding: 0 !important;
    margin: 0 !important;
    text-indent: 0 !important;
    font-size: 16px;
    border: none;
    outline: none;
    background: transparent;
    color: hotpink;
    text-align: left;

    /* ✅ FORCE NORMAL FONT */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* ===============================
   8. SECURITY CODE
================================ */
.code-wrapper {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
}

.code-box {
    width: 28px;
    height: 32px;
    border: 3px solid yellow;
    background: white;
    font-size: 16px;
    color: hotpink;
    text-align: center;
    line-height: 26px;
    padding: 0;

    /* ✅ FORCE NORMAL FONT */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* ===============================
   9. ERROR MESSAGE
================================ */
#error-message {
    position: absolute;
    bottom: 52px;
    left: 50%;
    transform: translateX(-50%);
    color: yellow;
    font-size: 13px;
    white-space: nowrap;
    pointer-events: none;
}

/* ===============================
   12. BOTTOM LINKS (MATCH VIDEOS PAGE)
   - identical height, padding, gap, font, font-size, z-index
================================ */
.bottom-links {
    position: absolute;
    left: 50%;
    bottom: calc(24px + var(--safeBot));
    transform: translateX(-50%);
    height: 44px;
    padding: 0 16px;
    background: #ff00b7;
    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;

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

.bottom-links a {
    color: yellow;
    text-decoration: none;
}

.bottom-links a:active {
    color: red;
}

/* ===============================
   13. SAFARI ONLY — HUD ZOOM FIX
================================ */
@supports (-webkit-touch-callout: none) {
    .grownups-scale {
        transform: scale(0.9);
    }
}

/* =========================================================
   14. LANDSCAPE MODE — HARD LOCK (FIXED)
========================================================= */
@media (pointer: coarse) and (orientation: landscape) {

  /* hide your app UI (DO NOT hide body) */
  .grownups-scale,
  .bg-wrapper,
  .grownups-banner,
  .login-wrapper,
  .follow-plushy,
  .bottom-links,
  .bottom-links--raised,
  #aolKeyboard {
    display: none !important;
  }

  /* force yellow screen */
  html,
  body {
    background: #ffff00 !important;
  }

  /* full screen blocker + smaller gif */
  html::before {
    content: "";
    position: fixed;
    inset: 0;
    background-color: #ffff00;
    background-image: url("../assets/plushy_cartoon.gif");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: min(50vw, 220px) auto;
    pointer-events: none;
    z-index: 2147483647;
  }
}



/* =========================================================
   FINAL OK BUTTON POSITION + SIZE CONTROL (iOS SAFE)
========================================================= */
:root {
    --ok-btn-padding-y: 4px;
    --ok-btn-padding-x: 10px;
    --ok-btn-border: 3px;
    --ok-btn-offset-y: 7px;
    --ok-text-offset-y: 0px;
}

button.login-btn--mobile {
    all: unset !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    line-height: 1 !important;
    padding-top: calc(var(--ok-btn-padding-y) + var(--ok-text-offset-y)) !important;
    padding-bottom: calc(var(--ok-btn-padding-y) - var(--ok-text-offset-y)) !important;
    padding-left: var(--ok-btn-padding-x) !important;
    padding-right: var(--ok-btn-padding-x) !important;
    border: var(--ok-btn-border) solid yellow !important;
    background: #ff00b7 !important;
    color: yellow !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: var(--ok-btn-offset-y) !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    text-align: center !important;
}

button.login-btn--mobile:hover {
    color: red !important;
}

button.login-btn--mobile:active {
    margin-top: calc(var(--ok-btn-offset-y) + 1px) !important;
    color: red !important;
}

/* 🔤 LABEL TEXT — FORCE NORMAL FONT */
.login-title,
label {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

/* 🔘 OK BUTTON — FORCE NORMAL FONT */
button.login-btn--mobile {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

/* ❌ NO CURSIVE FOR LOSE MESSAGE */
#error-message {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

/* =========================================================
   MOBILE FOLLOW BAR (SITS WHERE DUPLICATE LINKS WERE)
   - Uses same math as the old duplicate links placement
   - Hides DESKTOP follow on mobile, but keeps .follow-plushy--mobile visible
========================================================= */
.follow-plushy--mobile {
    display: none;
}

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

    /* hide DESKTOP follow only */
    .follow-plushy:not(.follow-plushy--mobile) {
        display: none !important;
    }

    /* show + position MOBILE follow */
    .follow-plushy--mobile {
        display: flex;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);

        /* ✅ SAME MATH AS DUPLICATE LINKS */
        bottom: calc((24px + var(--safeBot)) + 44px + 10px);

        /* override any desktop follow top positioning */
        top: auto !important;

        z-index: 1001;
        pointer-events: auto;
    }
}

/* =========================================================
   CLEANUP: old "raised bar" no longer used (keep hidden always)
========================================================= */
.bottom-links--raised {
    display: none !important;
}

/* =========================================================
   CLEANUP: old duplicate links class no longer needed
   (safe to leave, but does nothing if you removed the HTML)
========================================================= */
.bottom-links--duplicate {
    bottom: calc(max(24px, env(safe-area-inset-bottom)) + 44px + 10px);
}

/* =========================================================
   ✅ MOBILE HINT (BOTTOM BOX ONLY)
   - Shows the pink Hint button on mobile
   - Opens ONLY the bottom yellow caption
   - Top caption is hard-hidden on mobile
========================================================= */

/* keep anchor */
.username-row { position: relative; }

/* make room for the Hint button inside the username field */
.login-box input { padding-right: 78px !important; }

/* show hint wrap on mobile (overrides desktop css that hid it) */
.hint-wrap{
  position: absolute;
  right: -55px;
  top: 300%;

  transform: translateY(-50%) scale(1.4); /* 🔽 SCALE WHOLE BUTTON */
  transform-origin: center;

  z-index: 3000;
  display: block !important;
}


/* pink Hint button (mobile — smaller) */
.hint-btn{
  font-family: "Comic Sans MS","Comic Sans","Chalkboard SE","Marker Felt" !important;
  background: #ff33aa;
  color: yellow;

  border: 2px solid #000;
  padding: 3px 6px;
  font-size: 11px;
  line-height: 1;

  box-shadow: 1px 1px 0 #000;
  cursor: pointer;
}


/* NEVER show the TOP popup on mobile */
.hint-popup--top{
  display: none !important;
}

/* bottom yellow popup (mobile — smaller) */
.hint-popup--bottom{
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  transform: none;

  background: #ffee00;
  border: 2px solid #000;
  padding: 8px 10px;

  width: min(220px, 80vw);

  box-shadow: 2px 2px 0 #000;
  display: none;
  white-space: normal;

}

.hint-popup.is-open{
  display: block;
}

.hint-popup--bottom .hint-popup-text{
  font-family: "Comic Sans MS","Comic Sans","Chalkboard SE","Marker Felt" !important;
  color: #ff33aa;
  font-size: 12px;
  padding-right: 18px;
  white-space: normal;
}

/* X */
.hint-popup--bottom .hint-close{
  position: absolute;
  top: 3px;
  right: 6px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 12px;
  cursor: pointer;
  color: #000;
  user-select: none;
}


/* =========================================================
   ✅ MOBILE FINAL OVERRIDE — neutralize desktop .hint-popup rules
   Paste at VERY BOTTOM of grownups-mobile.css
========================================================= */
.hint-popup{
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
}