/* ==========================================
   GLOBAL - ZOOM PREVENTION & SMOOTH SCALING
========================================== */
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    touch-action: manipulation; /* Prevents pinch-zoom on mobile */
}
.grownups-body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: "Comic Sans MS", cursive, sans-serif;
    background: black;
    height: 100vh;
    width: 100vw;
    touch-action: manipulation;
}
/* Background wrapper */
.bg-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url("../assets/bg_grownups.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}

/* ==========================================
   BANNER
========================================== */
.grownups-banner {
    width: calc(100vh * 0.45);
    display: block;
    position: absolute;
    top: calc(100vh * 0.38);
    left: 50.5%;
    transform: translateX(-50%);
}

/* ==========================================
   LOGIN AREA
========================================== */
.login-wrapper {
    position: absolute;
    /* center anchor */
    top: 50%;
    left: 50%;
    /* 👇 MOVE UP / DOWN HERE ONLY */
    transform: translate(-50%, -10%); /* change second value only */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(100vh * 0.015);
}

/* ==========================================
   USERNAME HEADER (FIRST ONE)
========================================== */
.login-panel .login-title:nth-of-type(1) {
    transform: translateY(-2px); /* negative = up, positive = down */
}

/* ==========================================
   USERNAME HEADER
========================================== */
.login-panel > .login-title:nth-child(1) {
    transform: translateY(-2px); /* negative = up, positive = down */
}

/* ==========================================
   SECURITY CODE HEADER
========================================== */
.login-panel > .login-title:nth-child(3) {
    transform: translateY(-15px); /* negative = up, positive = down */
}

.login-panel {
    position: relative; /* REQUIRED */
    width: calc(100vh * 0.34);
    padding: calc(100vh * 0.001) calc(100vh * 0.03);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(100vh * 0.02);
}

/* 👇 PINK BOX ONLY */
.login-panel::before {
    content: "";
    position: absolute;
    /* SIZE CONTROLS */
    width: 100%;
    height: calc(100vh * 0.25); /* ⬅ ADJUST HEIGHT HERE */
    /* POSITION CONTROLS */
    top: 0;
    left: 0;
    transform: translateY(-8px); /* move pink box only */
    background: #ff00b7;
    z-index: -1;
}

/* ==========================================
   SECTION HEADERS (USERNAME / SECURITY CODE)
========================================== */
.login-title {
    font-size: calc(100vh * 0.02);
    color: yellow;
    letter-spacing: 2px;
    margin-bottom: calc(100vh * 0.005);
}

/* ==========================================
   USERNAME FIELD
========================================== */
/* 👇 MOVE USERNAME SECTION UP / DOWN */
.login-box {
    transform: translateY(-12px); /* negative = up, positive = down */
    width: calc(100vh * 0.35);
    height: calc(100vh * 0.055);
    border: 7px solid yellow;
    background: white;
    display: flex;
    align-items: center;
    padding: 0 calc(100vh * 0.002);
}

/* ✅ FIX: anchor for the Hint button (add class "username-row" to the username .login-box) */
.username-row {
    position: relative; /* REQUIRED so Hint sits beside username box */
}

/* Optional spacing below username */
.login-box:first-of-type {
    margin-bottom: calc(100vh * 0.01);
}

/* Username input text */
.login-box input {
    width: 100%;
    font-size: calc(100vh * 0.025);
    border: none;
    outline: none;
    background: transparent;
    color: hotpink;
    font-family: "Comic Sans MS", cursive, sans-serif;
    pointer-events: auto !important;
}

/* Username placeholder */
.login-box input::placeholder {
    color: hotpink;
    opacity: 1;
}

/* ============================================================
   ✅ FIX: DESKTOP ONLY "HINT" BUTTON + POPUP (NON SECRET ONLY)
   - Put this HTML INSIDE the username .login-box (the one with the input)
   - Give that username .login-box the class: username-row
   - Hide on mobile automatically
   - Hide in secret mode automatically
============================================================ */
@media (pointer: fine) {
    .hint-wrap {
        position: absolute;
        left: calc(100% + 10px);
        top: 50%;
        transform: translateY(-50%);
        z-index: 50;
        display: block;
    }

    /* pink Hint box */
    .hint-btn {
        font-family: "Comic Sans MS","Comic Sans","Chalkboard SE","Marker Felt" !important;
        background: #ff66cc;
        color: #000;
        border: 3px solid #000;
        padding: 6px 10px;
        cursor: pointer;
        font-size: 16px;
        line-height: 1;
        box-shadow: 2px 2px 0 #000;
    }

    .hint-btn:active {
        transform: translateY(1px);
    }

    /* yellow popup above */
    .hint-popup {
        position: absolute;
        bottom: calc(100% + 8px);
        left: 0;
        background: #ffee00;
        border: 3px solid #000;
        padding: 10px 12px;
        min-width: 230px;
        box-shadow: 3px 3px 0 #000;
        display: none;
    }

    /* ==========================================
       SECOND IDENTICAL HINT BOX (STACKED BELOW)
       ✅ FIX: remove fixed width, scale using --u
    ========================================== */
    .hint-popup--bottom{
        top: calc(100% + calc(var(--u) * 0.8));  /* stacked below, scaled */
        bottom: auto;

        /* ✅ taller / roomier (scaled) */
        padding: calc(var(--u) * 1.4) calc(var(--u) * 1.2);
       min-height: calc(var(--u) * 5);
 min-width: calc(var(--u) * 28);
    }

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

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

    /* ✅ ONLY the bottom box can wrap to multiple lines (and stays inside scaled width) */
    .hint-popup--bottom .hint-popup-text{
        white-space: normal;
        max-width: calc(var(--u) * 28);
    }

    /* tiny X */
    .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;
    }

    /* ✅ non secret only */
    body.from-secret-desktop .hint-wrap {
        display: none !important;
    }
}

/* ✅ mobile hard-off */
@media (pointer: coarse) {
    .hint-wrap {
        display: none !important;
    }
}

@media (pointer: fine) {
    .hint-popup--bottom {
        width: calc(var(--u) * 25);
        height: calc(var(--u) * 1);
    }
}


/* ==========================================
   🔐 SECURITY CODE - PERFECTLY CENTERED UNDER USERNAME
========================================== */
.code-wrapper {
    transform: translateY(-25px); /* negative = up, positive = down */
    width: calc(100vh * 0.35); /* exact same width as username */
    display: flex;
    justify-content: center; /* perfectly center the group */
    gap: calc(100vh * 0.012); /* nice visible gap between boxes - adjust if needed */
    padding: 0 calc(100vh * 0.01); /* small side padding to prevent edge touching */
    box-sizing: border-box;
}


/* ==========================================
   ✅ FIX: Hint stays above access code when scaling
   WHY: transforms create stacking contexts, so we must layer rows
   WHERE: paste right after .code-wrapper { ... }
========================================== */

/* make z-index actually work on these sections */
.login-panel {
    position: relative;
}

.username-row {
    position: relative; /* you already have this, keep it */
    z-index: 200;       /* ABOVE code-wrapper */
}

.code-wrapper {
    position: relative; /* add this */
    z-index: 50;        /* BELOW username-row */
}

/* also force the hint itself above anything inside the panel */
@media (pointer: fine) {
    .hint-wrap { z-index: 500; }
    .hint-popup { z-index: 600; }
}


/* Individual code boxes */
.code-box {
    width: calc(100vh * 0.0525);
    height: calc(100vh * 0.055);
    border: 4px solid yellow;
    background: white;
    text-align: center;
    font-size: calc(100vh * 0.025);
    color: hotpink;
    font-family: "Comic Sans MS", cursive, sans-serif;
    outline: none;
    box-sizing: border-box;
    flex-shrink: 0; /* prevent shrinking */
}

/* ==========================================
   OK BUTTON - RAISED A LITTLE
========================================== */
#login-btn {
    margin-top: calc(100vh * 0.01); /* reduced to raise the button */
    font-size: calc(100vh * 0.028);
    padding: calc(100vh * 0.005) calc(100vh * 0.05);
    border: 5px solid yellow;
    background: #ff00b7;
    color: yellow;
    cursor: pointer;
    font-family: "Comic Sans MS", cursive, sans-serif;
    transform: translate(0px, 0px) scale(0.8);
}
#login-btn:hover {
    color: red;
}

/* ==========================================
   ERROR MESSAGE - RIGHT ABOVE THE OK BUTTON (NO PUSH)
========================================== */
#error-message {
    position: absolute;
    bottom: calc(100vh * 0.065);  /* ← THIS LINE CONTROLS THE POSITION */
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: yellow;
    font-size: calc(100vh * 0.02);
    z-index: 10;
    white-space: nowrap; 
    pointer-events: none;
}

/* ==========================
   FOLLOW PLUSHY SECTION
========================== */
@font-face {
    font-family: "VGA-FONT";
    src: url("../assets/fonts/Px437_ACM_VGA_8x16.ttf") format("truetype");
}
.follow-plushy {
    position: absolute;
    top: calc(100vh * 0.83);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(100vh * 0.010);
    font-family: "VGA-FONT", monospace;
    font-size: calc(100vh * 0.024);
    color: hotpink;
}
.follow-box {
    background: yellow;
    padding: calc(100vh * 0.005) calc(100vh * 0.015);
    display: flex;
    align-items: center;
    justify-content: center;
}
.follow-plushy span {
    color: hotpink;
    text-shadow: none !important;
}
.insta-icon {
    width: calc(100vh * 0.035);
    image-rendering: pixelated;
    cursor: pointer;
    position: relative;
    top: 3px;
}

/* ==========================================
   BOTTOM LINKS
========================================== */
.bottom-links {
    position: absolute;
    bottom: calc(100vh * 0.05);
    left: 50%;
    transform: translateX(-50%);
    background: #ff00b7;
    padding: calc(100vh * 0.010) calc(100vh * 0.030);
    display: flex;
    align-items: center;
    gap: calc(100vh * 0.012);
    font-size: calc(100vh * 0.025);
    color: yellow;
    font-family: "Comic Sans MS", cursive, sans-serif;
    white-space: nowrap;
}
.bottom-links a {
    color: yellow;
    text-decoration: none;
}
.bottom-links a:hover {
    color: red;
}
.bottom-links span {
    color: yellow;
}

/* ==========================================
   ✅ UNIVERSAL UI JITTER (DEFAULT: OFF)
========================================== */
/* (intentionally no animation here anymore) */

/* ==========================================
   🔧 ULTRA-SOFT JITTER (USED ONLY IN SECRET MODE)
========================================== */
@keyframes uiJitter {
    0%   { translate: 0px 0px; }
    10%  { translate: -0.25px 0px; }
    20%  { translate: 0.25px -0.25px; }
    30%  { translate: 0px 0.25px; }
    40%  { translate: -0.5px 0.25px; }
    50%  { translate: 0.5px 0px; }
    60%  { translate: -0.25px -0.25px; }
    70%  { translate: 0.25px 0.5px; }
    80%  { translate: 0px -0.5px; }
    90%  { translate: -0.25px 0.25px; }
    100% { translate: 0px 0px; }
}

/* ==========================================
   UNIVERSAL CLICK EFFECT
========================================== */
#login-btn:active,
.bottom-links a:active,
.bottom-links span:active {
    color: red !important;
    transition: color 0s !important;
}
#login-btn:active,
.bottom-links a:active {
    transform: translateY(1px);
}

/* ============================================================
   📱 PORTRAIT PHONES - UPDATED
============================================================ */
@media screen and (max-width: 500px) and (orientation: portrait) {
    .login-box {
        width: 60vw;
        height: 6.2vh;
        border: 5px solid yellow;
    }
    .code-wrapper {
        width: 60vw;
        gap: 2.5vw;
        padding: 0 2vw;
    }
    .code-box {
        width: 6.2vh;
        height: 6.2vh;
        border: 5px solid yellow;
        font-size: 4.5vh;
    }
    #login-btn {
        margin-top: 2vh;
    }
    #error-message {
        bottom: 18vh; /* adjusted for mobile */
    }
}

/* ============================================================
   📱 LANDSCAPE PHONES
============================================================ */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .login-box,
    .code-box {
        border: 3px solid yellow !important;
    }
    #login-btn {
        border: 3px solid yellow !important;
    }
}

/* ============================================================
   REMOVE OK BUTTON — PORTRAIT ONLY
============================================================ */
@media screen and (max-width: 600px) and (orientation: portrait) {
    #login-btn {
        display: none !important;
    }
}

/* ============================================================
   AOL KEYBOARD
============================================================ */
#aolKeyboard {
    position: fixed;
    left: 50%;
    bottom: 2.5vh;
    transform: translateX(-50%) scale(0.75);
    transform-origin: top center;
    z-index: 999999;
    display: none;
    background: #d0d0d0;
    padding: 2vh 2vw;
    border: 3px solid #808080;
    border-top: 4px solid #ffffff;
    border-left: 4px solid #ffffff;
    border-radius: 10px;
}
#aolKeyboard.show {
    display: block !important;
}
.aol-key-row {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-bottom: 6px;
}
.aol-key {
    width: 8vw;
    height: 8vw;
    min-width: 30px;
    min-height: 30px;
    background: #d0d0d0;
    border: 2px solid #808080;
    border-top: 3px solid #ffffff;
    border-left: 3px solid #ffffff;
    border-radius: 8px;
    font-size: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}
.aol-key[data-key="ENTER"] {
    width: 22vw;
    min-width: 70px;
    font-size: 0.5rem !important;
}
.aol-key[data-key="ESC"] {
    font-size: 0.55rem !important;
}
.aol-key[data-key="BACK"] {
    width: 14vw;
}
.aol-key-space {
    width: 60vw;
    height: 10vw;
}
.aol-key:active {
    background: #b0b0b0;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-bottom: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
}
@media (orientation: landscape) and (max-width: 900px) {
    #aolKeyboard {
        display: none !important;
    }
}

/* ============================================================
   ✅ SECRET MODE — ALWAYS FORCE BLACK CODE BOXES (ALL SIZES)
   ✅ RED TEXT IS UNCHANGED HERE
============================================================ */
body.from-secret-desktop input.code-box {
    background: #000000 !important;
    color: #ff0000 !important;
    caret-color: #ff0000 !important;
    -webkit-text-fill-color: #ff0000 !important;
    border-color: #f2f2f2 !important;
    background-clip: padding-box !important;
}

/* ============================================================
   ✅ DESKTOP ONLY SECRET MODE
   - BACKGROUND EVEN LESS INTENSE (SOFTER + SLOWER + LOWER OPACITY)
   - UI glitch/jitter stays exactly as you had it
============================================================ */
@media (min-width: 901px) and (pointer: fine) {

    body.from-secret-desktop .bg-wrapper {
        background-image: url("../assets/bg_grownupsbw.jpg") !important;
        filter: grayscale(1) contrast(1.18) brightness(0.96); /* ✅ softer */
    }

    body.from-secret-desktop .bg-wrapper::before,
    body.from-secret-desktop .bg-wrapper::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;

        background-image: inherit;
        background-size: inherit;
        background-position: inherit;
        background-repeat: inherit;

        mix-blend-mode: screen;
        filter: grayscale(1) contrast(1.15) brightness(1); /* ✅ softer */
        will-change: clip-path, filter, opacity, background-position;
    }

    body.from-secret-desktop .bg-wrapper::before {
        opacity: 0.18; /* ✅ much lower */
        animation:
            bgJitterA 0.45s infinite steps(1, end),  /* ✅ slower */
            bgGlitchA 1.10s infinite steps(1, end),  /* ✅ slower */
            bgTearA   0.90s infinite steps(1, end);  /* ✅ slower */
    }

    body.from-secret-desktop .bg-wrapper::after {
        opacity: 0.12; /* ✅ much lower */
        animation:
            bgJitterB 0.55s infinite steps(1, end),  /* ✅ slower */
            bgGlitchB 1.25s infinite steps(1, end),  /* ✅ slower */
            bgTearB   1.00s infinite steps(1, end);  /* ✅ slower */
    }

    /* BW filter on most UI (✅ REMOVED .login-panel) */
    body.from-secret-desktop .grownups-banner,
    body.from-secret-desktop .login-panel::before,
    body.from-secret-desktop .login-title,
    body.from-secret-desktop #login-btn,
    body.from-secret-desktop #error-message,
    body.from-secret-desktop .follow-plushy,
    body.from-secret-desktop .follow-box,
    body.from-secret-desktop .follow-plushy span,
    body.from-secret-desktop .insta-icon,
    body.from-secret-desktop .bottom-links,
    body.from-secret-desktop .bottom-links a,
    body.from-secret-desktop .bottom-links span {
        filter: grayscale(1) contrast(1.35);
    }

    body.from-secret-desktop .login-panel {
        filter: none !important;
        -webkit-filter: none !important;
    }

    body.from-secret-desktop .login-panel::before {
        background: #555555 !important;
    }
    body.from-secret-desktop #login-btn {
        background: #555555 !important;
        color: #f2f2f2 !important;
        border-color: #f2f2f2 !important;
    }
    body.from-secret-desktop .bottom-links,
    body.from-secret-desktop .follow-box {
        background: #555555 !important;
    }
    body.from-secret-desktop .login-title,
    body.from-secret-desktop #error-message,
    body.from-secret-desktop .bottom-links,
    body.from-secret-desktop .bottom-links a,
    body.from-secret-desktop .bottom-links span,
    body.from-secret-desktop .follow-plushy,
    body.from-secret-desktop .follow-plushy span {
        color: #f2f2f2 !important;
    }

    body.from-secret-desktop .login-box {
        border-color: #f2f2f2 !important;
        background: #000000 !important;
    }

    body.from-secret-desktop .login-box input {
        color: #ff0000 !important;
        caret-color: #ff0000 !important;
        -webkit-text-fill-color: #ff0000 !important;
        background: transparent !important;
    }

    body.from-secret-desktop .login-box input::placeholder,
    body.from-secret-desktop input.code-box::placeholder {
        color: #ff0000 !important;
        -webkit-text-fill-color: #ff0000 !important;
        opacity: 1;
    }

    /* UI stays the same */
    body.from-secret-desktop .grownups-banner,
    body.from-secret-desktop .login-panel::before,
    body.from-secret-desktop .login-title,
    body.from-secret-desktop #login-btn,
    body.from-secret-desktop #error-message,
    body.from-secret-desktop .follow-plushy,
    body.from-secret-desktop .follow-box,
    body.from-secret-desktop .insta-icon,
    body.from-secret-desktop .bottom-links,
    body.from-secret-desktop .bottom-links a,
    body.from-secret-desktop .bottom-links span {
        animation:
            uiGlitchIntense 0.28s infinite steps(1, end),
            uiJitter 0.14s infinite steps(1, end);
        will-change: clip-path, filter, opacity, translate;
    }

    body.from-secret-desktop .login-box,
    body.from-secret-desktop .login-box input,
    body.from-secret-desktop .code-wrapper,
    body.from-secret-desktop input.code-box {
        animation: none !important;
        text-shadow: none !important;
        filter: none !important;
        -webkit-filter: none !important;
        translate: 0px 0px !important;
    }

    @keyframes uiJitter {
        0%   { translate: 0px 0px; }
        10%  { translate: -0.25px 0px; }
        20%  { translate: 0.25px -0.25px; }
        30%  { translate: 0px 0.25px; }
        40%  { translate: -0.5px 0.25px; }
        50%  { translate: 0.5px 0px; }
        60%  { translate: -0.25px -0.25px; }
        70%  { translate: 0.25px 0.5px; }
        80%  { translate: 0px -0.5px; }
        90%  { translate: -0.25px 0.25px; }
        100% { translate: 0px 0px; }
    }

    @keyframes uiGlitchIntense {
        0%, 60%, 100% {
            filter: grayscale(1) contrast(1.35) brightness(1);
            text-shadow: none;
            opacity: 1;
        }
        61% {
            filter: grayscale(1) contrast(2.2) brightness(1.25);
            text-shadow: -6px 0 rgba(255,255,255,0.6), 6px 0 rgba(0,0,0,0.85);
            opacity: 0.9;
        }
        62% {
            filter: grayscale(1) contrast(2.4) brightness(0.8);
            text-shadow: 7px 0 rgba(255,255,255,0.55), -7px 0 rgba(0,0,0,0.95);
            opacity: 1;
        }
        63% {
            filter: grayscale(1) contrast(1.85) brightness(1.15);
            text-shadow: -8px 0 rgba(255,255,255,0.5), 8px 0 rgba(0,0,0,0.9);
            opacity: 0.88;
        }
        64% {
            filter: grayscale(1) contrast(1.35) brightness(1);
            text-shadow: none;
            opacity: 1;
        }
    }

    /* ✅ smaller, slower jitter */
    @keyframes bgJitterA {
        0%   { background-position: 50% 50%; }
        20%  { background-position: 49.8% 50.2%; }
        40%  { background-position: 50.2% 49.8%; }
        60%  { background-position: 49.9% 50.1%; }
        80%  { background-position: 50.1% 49.9%; }
        100% { background-position: 50% 50%; }
    }

    @keyframes bgJitterB {
        0%   { background-position: 50% 50%; }
        25%  { background-position: 50.2% 50.1%; }
        50%  { background-position: 49.8% 49.9%; }
        75%  { background-position: 50.1% 49.8%; }
        100% { background-position: 50% 50%; }
    }

    /* ✅ fewer slices */
    @keyframes bgGlitchA {
        0%, 86%, 100% { clip-path: inset(0 0 0 0); }
        87% { clip-path: inset(18% 0 70% 0); }
        88% { clip-path: inset(58% 0 24% 0); }
        89% { clip-path: inset(0 0 0 0); }
    }

    @keyframes bgGlitchB {
        0%, 82%, 100% { clip-path: inset(0 0 0 0); }
        83% { clip-path: inset(28% 0 56% 0); }
        84% { clip-path: inset(0 0 0 0); }
    }

    /* ✅ lighter tearing */
    @keyframes bgTearA {
        0%, 100% { clip-path: inset(0 0 0 0); }
        50% { clip-path: inset(0 0 92% 0); }
        75% { clip-path: inset(70% 0 10% 0); }
    }

    @keyframes bgTearB {
        0%, 100% { clip-path: inset(0 0 0 0); }
        60% { clip-path: inset(10% 0 80% 0); }
    }
}