/* ============================================================
   GATE PAGE — gate.php
   Fully standalone. Inspired by JTG design language.
   No dependency on styles.css or scripts.js.
   Phone-first. Tablet: 768px+. Desktop: 1140px+.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html { width: 100%; min-height: 100vh; }

body {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    font-family: 'Open Sans', sans-serif;
    color: #ffffff;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6vw 0vw 16vw 0vw;
    /* JTG diagonal stripe body pattern */
    background-color: #000000;
    background-image: repeating-linear-gradient(
        135deg,
        #000000 0,
        #000000 4vw,
        #0a0a0a 4vw,
        #0a0a0a 8vw
    );
}

/* ── OpenMoji emoji reset — mirrors styles.css .emoji ── */
.gate-emoji { position: relative; display: inline-block; padding: 0; transform: scale(1.75); aspect-ratio: 1 / 1; object-fit: contain; vertical-align: middle; top: 0vw; }

/* ── Starfield canvas ── */
#gateStars { position: fixed; inset: 0; z-index: 0; pointer-events: none; width: 100%; height: 100%; }

/* ── Main wrap ── */
.gate-wrap { position: relative; z-index: 1; width: 92%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8vw; }

/* ── Hero block ── */
.gate-hero { display: flex; flex-direction: column; align-items: center; gap: 4vw; text-align: center; width: 100%; }

/* ── Logo — h1 ── */
.gate-logo { font-family: 'Headline', 'Open Sans', sans-serif; font-size: 10vw; color: #f0c040; line-height: 1; display: flex; align-items: center; justify-content: center; gap: 3vw; margin: 0; padding: 0; text-shadow: -0.15vw -0.15vw 0 #000, 0.15vw -0.15vw 0 #000, -0.15vw 0.15vw 0 #000, 0.15vw 0.15vw 0 #000; }
.gate-logo img { width: 10vw; height: 10vw; display: block; flex-shrink: 0; }

/* ── Headline — h2 ── */
.gate-headline { font-family: 'Headline', 'Open Sans', sans-serif; font-size: 5.5vw; color: #f0c040; line-height: 140%; margin: 0; padding: 0; text-shadow: -0.1vw -0.1vw 0 #000, 0.1vw -0.1vw 0 #000, -0.1vw 0.1vw 0 #000, 0.1vw 0.1vw 0 #000; }

/* ── Subhead — p ── */
.gate-subhead { font-family: 'Open Sans', sans-serif; font-size: 4vw; color: #ffffff; opacity: 0.75; line-height: 140%; margin: 0; padding: 0; }

/* ── Lock panel ── */
.gate-lock {
    width: 100%;
    padding: 6vw 4vw;
    border-radius: 2vw;
    background: linear-gradient(145deg, rgba(75,85,99,0.35), rgba(31,41,55,0.35));
    border-top: 0.25vw solid #4b5563;
    border-left: 0.25vw solid #4b5563;
    border-bottom: 0.25vw solid #1f2937;
    border-right: 0.25vw solid #1f2937;
    box-shadow: 1vw 1vw 2vw rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4vw;
}

/* ── Lock icon inline ── */
.gate-lock-inline-icon { width: 5vw; height: 5vw; display: inline-block; vertical-align: middle; margin-right: 1.5vw; position: relative; top: -0.3vw; }

/* ── Lock label ── */
.gate-lock-label { font-family: 'Open Sans', sans-serif; font-size: 3.5vw; color: #ffffff; text-align: center; }
.gate-lock-label span { opacity: 0.75; font-weight: bolder; }

/* ── Input row ── */
.gate-input-row { display: flex; width: 100%; gap: 2vw; }

/* ── Disabled / not-ready button state ── */
.gate-submit-btn--disabled { background: linear-gradient(145deg, #4b5563, #1f2937); border-top-color: #4b5563; border-left-color: #4b5563; border-bottom-color: #1f2937; border-right-color: #1f2937; opacity: 0.6; cursor: not-allowed; transform: none !important; }

/* ── Ready button state ── */
.gate-submit-btn--ready { background: linear-gradient(145deg, #34c46a, #14532d); border-top-color: #34c46a; border-left-color: #34c46a; border-bottom-color: #14532d; border-right-color: #14532d; }

/* ── Code input ── */
.gate-code-input {
    flex: 1;
    font-family: 'Bitstream', monospace;
    font-size: 4vw;
    color: #ffffff;
    text-align: center;
    letter-spacing: 0.05em;
    padding: 2vw 4vw;
    border-radius: 2vw;
    outline: none;
    background: linear-gradient(145deg, #000000, #0a0a0a);
    border-top: 0.25vw solid #4b5563;
    border-left: 0.25vw solid #4b5563;
    border-bottom: 0.25vw solid #1f2937;
    border-right: 0.25vw solid #1f2937;
    box-shadow: 0.5vw 0.5vw 1vw rgba(0,0,0,0.5);
    transition: border-color 0.2s ease;
}
.gate-code-input:focus {
    border-top-color: #34c46a;
    border-left-color: #34c46a;
    border-bottom-color: #14532d;
    border-right-color: #14532d;
}
.gate-code-input.is-error {
    border-top-color: #f43f5e;
    border-left-color: #f43f5e;
    border-bottom-color: #7f1616;
    border-right-color: #7f1616;
}

/* ── Submit button ── */
.gate-submit-btn {
    font-family: 'Open Sans', sans-serif;
    font-size: 4vw;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 2vw 4vw;
    border-radius: 2vw;
    border: 0.25vw solid transparent;
    cursor: pointer;
    box-shadow: 0.5vw 0.5vw 2vw rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    gap: 1.5vw;
    transition: opacity 0.2s ease, transform 0.1s ease, background 0.2s ease, border-color 0.2s ease;
    justify-content: center;
}
.gate-submit-btn img { width: 4vw; height: 4vw; display: block; }
.gate-submit-btn:hover:not(:disabled) { opacity: 0.85; transform: scale(1.05); }
.gate-submit-btn:active:not(:disabled) { transform: scale(0.95); }

/* ── Lock label error state ── */
.gate-lock-label--error { color: #f43f5e !important; opacity: 1 !important; }

/* ── Shake animation ── */
@keyframes gateShake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-2vw); }
    40%       { transform: translateX(2vw); }
    60%       { transform: translateX(-1.5vw); }
    80%       { transform: translateX(1.5vw); }
}
.gate-shake { animation: gateShake 0.4s ease; }

/* ── Footer ── */
.gate-footer { position: relative; z-index: 1; font-family: 'Open Sans', sans-serif; font-size: 3vw; color: #ffffff; opacity: 0.25; text-align: center; margin-top: 6vw; }

/* ============================================================
   TABLET — 768px+
   ============================================================ */
@media (min-width: 768px) {
    body { padding: 8vw 0; background-image: repeating-linear-gradient(135deg, #000000 0, #000000 2.5vw, #0a0a0a 2.5vw, #0a0a0a 5vw); }
    .gate-wrap { width: 75%; gap: 5vw; }
    .gate-hero { gap: 2.5vw; }
    .gate-logo { font-size: 7vw; gap: 2vw; }
    .gate-logo img { width: 7vw; height: 7vw; }
    .gate-headline { font-size: 4vw; }
    .gate-subhead { font-size: 2.75vw; }
    .gate-lock { padding: 4vw; gap: 3vw; }
    .gate-lock-icon img { width: 6vw; height: 6vw; }
    .gate-lock-label { font-size: 2.25vw; }
    .gate-code-input { font-size: 2.75vw; padding: 1.75vw 3vw; }
    .gate-submit-btn { font-size: 2.75vw; padding: 1.75vw 3vw; }
    .gate-submit-btn img { width: 3vw; height: 3vw; }
    .gate-input-row { gap: 1.5vw; }
    .gate-error { font-size: 2vw; min-height: 2.5vw; }
    .gate-footer { font-size: 2vw; margin-top: 4vw; }
	.gate-emoji { top: 0vw; }
}

/* ============================================================
   DESKTOP — 1140px+
   ============================================================ */
@media (min-width: 1140px) {
    body { padding: 80px 0; background-image: repeating-linear-gradient(135deg, #000000 0, #000000 28px, #0a0a0a 28px, #0a0a0a 56px); }
    .gate-wrap { width: 520px; gap: 40px; }
    .gate-hero { gap: 18px; }
    .gate-logo { font-size: 2.8rem; gap: 14px; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
    .gate-logo img { width: 48px; height: 48px; }
    .gate-headline { font-size: 1.5rem; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
    .gate-subhead { font-size: 1rem; }
    .gate-lock { padding: 32px 28px; border-radius: 12px; gap: 18px; border-width: 1px; box-shadow: 8px 8px 20px rgba(0,0,0,0.5); }
    .gate-lock-inline-icon { width: 22px; height: 22px; margin-right: 8px; }
    .gate-lock-label { font-size: 0.85rem; }
    .gate-code-input { font-size: 1.1rem; padding: 12px 18px; border-radius: 8px; letter-spacing: 0.1em; border-width: 1px; }
    .gate-submit-btn { font-size: 1rem; padding: 12px 20px; border-radius: 8px; gap: 8px; border-width: 1px; box-shadow: 4px 4px 12px rgba(0,0,0,0.6); }
    .gate-submit-btn img { width: 18px; height: 18px; }
    .gate-input-row { gap: 10px; }
    .gate-error { font-size: 0.85rem; min-height: 20px; }
    .gate-footer { font-size: 0.75rem; margin-top: 20px; }
	.gate-emoji { top: -1px; }
    @keyframes gateShake {
        0%, 100% { transform: translateX(0); }
        20%       { transform: translateX(-8px); }
        40%       { transform: translateX(8px); }
        60%       { transform: translateX(-6px); }
        80%       { transform: translateX(6px); }
    }
}