/* =====================================================
   GHOST OF THE GLITCH — PHONE SUPPORT (LANDSCAPE ONLY)
   Shared across every page. Desktop is untouched: all
   layout changes live inside the phone-landscape query.
   ===================================================== */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    touch-action: manipulation;           /* no double-tap zoom */
    -webkit-tap-highlight-color: transparent;
}

html, body {
    overscroll-behavior: none;            /* no pull-to-refresh / bounce */
}

/* Use the real visible height on mobile browsers (address bar aware) */
@supports (height: 100dvh) {
    html body { height: 100dvh; }
}

/* ---------- ROTATE-YOUR-PHONE SCREEN ---------- */
#rotate-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    background: #030803;
    color: #00ff41;
    font-family: "Courier New", Courier, monospace;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 30px;
    gap: 22px;
    letter-spacing: 2px;
}

#rotate-overlay .rot-phone {
    width: 46px;
    height: 80px;
    border: 3px solid #00ff41;
    border-radius: 8px;
    box-shadow: 0 0 18px rgba(0, 255, 65, .5);
    animation: rotPhone 2.2s ease-in-out infinite;
}

#rotate-overlay .rot-title {
    font-size: 1.2rem;
    font-weight: bold;
    text-shadow: 0 0 10px #00ff41;
}

#rotate-overlay .rot-sub {
    font-size: .85rem;
    color: rgba(0, 255, 65, .6);
    line-height: 1.6;
}

@keyframes rotPhone {
    0%, 20%   { transform: rotate(0deg); }
    50%, 80%  { transform: rotate(-90deg); }
    100%      { transform: rotate(0deg); }
}

@media (orientation: portrait) and (pointer: coarse) and (max-width: 900px) {
    #rotate-overlay { display: flex; }
    /* Hide the game while upright so wide layouts can't zoom the page out */
    body > *:not(#rotate-overlay) { display: none !important; }
}

/* ---------- ENTER BUTTON FOR TOUCH KEYBOARDS ---------- */
.m-enter-btn {
    flex: 0 0 auto;
    margin-left: 8px;
    background: transparent;
    color: #00ff41;
    border: 1px solid #00ff41;
    padding: 6px 12px;
    font-family: "Courier New", Courier, monospace;
    font-size: .8rem;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    vertical-align: middle;
}

.m-enter-btn:active {
    background: #00ff41;
    color: #000;
}

/* Touch screens have no hover: show the menu arrow on tap */
@media (hover: none) {
    .menu-btn:active { color: #00ff41; text-shadow: 0 0 15px #00ff41; }
    .menu-btn:active .selector { visibility: visible; }
}

/* =====================================================
   PHONE LANDSCAPE LAYOUT
   ===================================================== */
@media (orientation: landscape) and (max-height: 540px) {

    /* iOS zooms into inputs smaller than 16px — prevent it */
    input, textarea, select { font-size: 16px !important; }

    /* ---------- index.html (boot loader) ---------- */
    [data-page="index"] .container { padding: 16px 24px; max-height: 96dvh; overflow-y: auto; }
    [data-page="index"] h1 { font-size: 22px; margin-bottom: 10px; }
    [data-page="index"] .text { font-size: 13px; margin-bottom: 10px; }
    [data-page="index"] .bar-container { height: 18px; margin: 10px 0; }
    [data-page="index"] #status { font-size: 13px; margin-top: 6px; }
    [data-page="index"] button { margin-top: 12px; padding: 10px 24px; font-size: 15px; }

    /* ---------- start.html / freshstart.html (menus) ---------- */
    [data-page="start"] .menu-container,
    [data-page="freshstart"] .menu-container { padding: 5vh 6vw; }
    [data-page="start"] .title-box,
    [data-page="freshstart"] .title-box { gap: 0; }
    [data-page="start"] .title-line,
    [data-page="freshstart"] .title-line { font-size: min(2.6rem, 12dvh); line-height: 1.1; }
    [data-page="start"] .menu-options,
    [data-page="freshstart"] .menu-options { margin-bottom: 5vh; gap: 10px; }
    [data-page="start"] .menu-btn,
    [data-page="freshstart"] .menu-btn { font-size: 1.5rem; padding: 4px 0; }
    [data-page="start"] .footer-line,
    [data-page="freshstart"] .footer-line { font-size: .75rem; }

    /* ---------- corrupted.html ---------- */
    [data-page="corrupted"] .container { width: 90%; max-height: 96dvh; overflow-y: auto; padding: 10px 0; }
    [data-page="corrupted"] h1 { font-size: 1.8rem; margin-bottom: 12px; }
    [data-page="corrupted"] .text { font-size: 1rem; line-height: 1.5; }
    [data-page="corrupted"] button { margin-top: 16px; padding: 10px 26px; font-size: 1rem; }

    /* ---------- rules.html ---------- */
    [data-page="rules"] .rules-container { width: min(600px, 92vw); padding: 16px 20px; max-height: 94dvh; overflow-y: auto; }
    [data-page="rules"] h1 { font-size: 1rem; margin-bottom: 10px; padding-bottom: 6px; }
    [data-page="rules"] .rules-text { font-size: .85rem; line-height: 1.5; margin-bottom: 12px; }
    [data-page="rules"] .rules-text li { margin-bottom: 8px; }

    /* ---------- loading.html (main terminal) ---------- */
    [data-page="loading"] .workspace-wrapper {
        width: 98vw;
        height: 96dvh;
        grid-template-columns: minmax(0, 1fr) 210px;
        gap: 8px;
    }
    [data-page="loading"] .terminal-container { min-height: 0; }
    [data-page="loading"] .terminal-header { padding: 4px 8px; flex-wrap: wrap; gap: 4px; }
    [data-page="loading"] .terminal-title { font-size: .62rem; letter-spacing: 0; }
    [data-page="loading"] .auth-bar { gap: 4px; flex-wrap: wrap; }
    [data-page="loading"] .user-status-tag { font-size: .6rem; margin-right: 0; }
    [data-page="loading"] .top-btn { padding: 4px 7px; font-size: .62rem; }
    [data-page="loading"] .terminal-body { padding: 6px 10px; min-height: 0; }
    [data-page="loading"] .output-history { margin-bottom: 6px; min-height: 0; }
    [data-page="loading"] .output-history div { font-size: .75rem; margin-bottom: 6px; line-height: 1.35; }
    [data-page="loading"] .system-warning-tab { padding: 6px 10px; margin-bottom: 6px; min-height: 0; max-height: 32%; overflow-y: auto; gap: 4px; flex-shrink: 0; }
    [data-page="loading"] .system-warning-tab .tab-title { font-size: .7rem; padding-bottom: 3px; }
    [data-page="loading"] .warning-text { font-size: .75rem; }
    [data-page="loading"] .suggestion-row { gap: 5px; margin-bottom: 6px; flex-wrap: nowrap; overflow-x: auto; flex-shrink: 0; }
    [data-page="loading"] .suggest-btn { padding: 5px 8px; font-size: .6rem; letter-spacing: 0; white-space: nowrap; }
    [data-page="loading"] .input-line { padding-top: 6px; flex-shrink: 0; }
    [data-page="loading"] .prompt-label { font-size: .7rem; margin-right: 6px; white-space: nowrap; }
    [data-page="loading"] .command-input { min-width: 0; }
    [data-page="loading"] .sidebar { padding: 8px; overflow-y: auto; min-height: 0; }
    [data-page="loading"] .panel-header { font-size: .68rem; padding-bottom: 5px; margin-bottom: 8px; }
    [data-page="loading"] .tool-widget p { font-size: .62rem; margin-bottom: 6px; }
    [data-page="loading"] .widget-field { height: 64px; padding: 6px; margin-bottom: 6px; }
    [data-page="loading"] .action-row { gap: 6px; margin-bottom: 6px; }
    [data-page="loading"] .tool-btn { padding: 7px 4px; font-size: .65rem; }
    [data-page="loading"] .widget-log { font-size: .65rem; min-height: 40px; padding: 6px; }
    [data-page="loading"] .modal-box { max-width: 92vw !important; max-height: 92dvh; overflow-y: auto; padding: 14px 18px; gap: 8px; }
    [data-page="loading"] .modal-title { font-size: .9rem; padding-bottom: 5px; }
    [data-page="loading"] #hint-content { font-size: .8rem; line-height: 1.5 !important; }
    [data-page="loading"] .modal-actions { margin-top: 4px; }
    [data-page="loading"] .auth-input { padding: 6px; }
    [data-page="loading"] #ending-overlay { padding: 14px 24px; overflow-y: auto; }
    [data-page="loading"] .ending-title { font-size: 1.5rem; margin-bottom: 10px; }
    [data-page="loading"] .ending-desc { font-size: .9rem; margin-bottom: 14px; line-height: 1.45; }
    [data-page="loading"] .btn-restart { padding: 10px 24px; font-size: .9rem; }

    /* ---------- one.html / two.html / three.html (story terminals) ---------- */
    [data-page="one"] .workspace,
    [data-page="two"] .workspace,
    [data-page="three"] .workspace { width: 98vw; height: 96dvh; }
    [data-page="one"] header,
    [data-page="two"] header,
    [data-page="three"] header { height: 34px; padding: 0 10px; font-size: .7rem; gap: 10px; flex-shrink: 0; }
    [data-page="one"] .title,
    [data-page="two"] .title,
    [data-page="three"] .title { font-size: .7rem; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    [data-page="one"] .status,
    [data-page="two"] .status,
    [data-page="three"] .status { font-size: .62rem; white-space: nowrap; }
    [data-page="one"] .line,
    [data-page="two"] .line,
    [data-page="three"] .line { font-size: .8rem; margin-bottom: 8px; line-height: 1.45; }

    /* one.html */
    [data-page="one"] main { padding: 10px 12px; min-height: 0; }
    [data-page="one"] .inputRow { margin-top: 8px; padding-top: 8px; flex-shrink: 0; }
    [data-page="one"] .prompt { font-size: .75rem; white-space: nowrap; }
    [data-page="one"] #input { min-width: 0; }
    [data-page="one"] #choicesRow { margin-top: 6px !important; flex-shrink: 0; }
    [data-page="one"] .choice-btn { padding: 8px 14px; font-size: .8rem; margin: 3px; }
    [data-page="one"] .bootOverlay { font-size: .85rem; }
    [data-page="one"] .bootLine { margin: 3px 0; }

    /* two.html */
    [data-page="two"] main { padding: 8px 10px; gap: 10px; min-height: 0; }
    [data-page="two"] .sidebar { width: 140px; flex-shrink: 0; padding-right: 8px; }
    [data-page="two"] .folder { padding: 8px; font-size: .72rem; margin-bottom: 8px; }
    [data-page="two"] .viewer { padding: 4px 6px; }
    [data-page="two"] .file { padding: 8px 10px; margin: 5px 0; font-size: .8rem; }
    [data-page="two"] .choice { padding: 8px 14px; margin: 4px; font-size: .8rem; }
    [data-page="two"] #viewer input { width: 290px; max-width: calc(100% - 110px); }

    /* three.html */
    [data-page="three"] main { min-height: 0; }
    [data-page="three"] .viewer { padding: 10px 12px; }
    [data-page="three"] .choice { margin-top: 8px; margin-right: 6px; padding: 8px 14px; font-size: .8rem; }

    /* ---------- thanks.html ---------- */
    [data-page="thanks"] .card { padding: 16px 24px; max-height: 94dvh; overflow-y: auto; }
    [data-page="thanks"] .title { font-size: 1.3rem; margin-bottom: 10px; }
    [data-page="thanks"] .creepy-text { font-size: .82rem; line-height: 1.5; margin-bottom: 8px; }
    [data-page="thanks"] .creepy-text p { margin-bottom: 8px; }
    [data-page="thanks"] .button-group { margin-top: 8px; }
    [data-page="thanks"] .btn-action { padding: 10px 22px; font-size: .85rem; }
}

/* Extra-small landscape phones (e.g. iPhone SE: 568 x 320) */
@media (orientation: landscape) and (max-height: 340px) {
    [data-page="loading"] .workspace-wrapper { grid-template-columns: minmax(0, 1fr) 170px; }
    [data-page="two"] .sidebar { width: 110px; }
    [data-page="start"] .menu-btn,
    [data-page="freshstart"] .menu-btn { font-size: 1.25rem; }
    [data-page="one"] .line,
    [data-page="two"] .line,
    [data-page="three"] .line,
    [data-page="loading"] .output-history div { font-size: .72rem; }
}