/* ==========================================================
   777 ENCLAVE SECURE CONSOLE
   Theme v4.7 (Global iPad Viewport Lock Applied)
========================================================== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    /* The Apple Safari iPad Lock is now active instantly on load */
    height: 100vh;
    height: -webkit-fill-available; 
    background:#000;
    overflow: hidden; 
    color:#66ff66;
    font-family:
        "Courier New",
        "Lucida Console",
        monospace;
}

body{
    text-shadow:
        0 0 4px #00ff00,
        0 0 8px #00cc00,
        0 0 18px rgba(0,255,0,.35);
}

/* ===================================================== */
#screen{
    height: 100vh;
    height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
}

/* ===================================================== */
.hidden{
    display:none;
}

/* ===================================================== */
#boot{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#bootlog{
    white-space:pre-wrap;
    /* Scaled down to prevent bleeding off the bottom */
    font-size: 16px; 
    line-height: 1.2;
}

/* ===================================================== */
#console{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation:fadein .8s ease;
}

/* ===================================================== */
#logo{
    display:block;
    width:fit-content;
    margin: 0 0 10px 0;
    /* Scaled down to prevent the iPad from horizontal pinch-zooming */
    font-size: 14px; 
    line-height: 1.1;
    color:#66ff66;
    white-space:pre;
    animation:
        glow 2s infinite alternate,
        bleed 7s infinite;
}

/* ===================================================== */
#terminal{
    flex-grow: 1;
    overflow-y: auto;
    padding: 0;
    color:#7dff7d;
    white-space:pre-wrap;
    word-break:break-word;
    -webkit-overflow-scrolling: touch;
}

#terminal::-webkit-scrollbar { 
    display: none; 
}

/* ===================================================== */
/* CRT Overlay                                            */
/* ===================================================== */
#scanlines{
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.18;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,.03) 0px,
            rgba(255,255,255,.03) 2px,
            transparent 4px,
            transparent 6px
        );
}
/* ===================================================== */
#noise{
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.03;
    background-image:
        radial-gradient(#00ff00 1px, transparent 1px);
    background-size:6px 6px;
}
/* ===================================================== */
#flicker{
    position:fixed;
    inset:0;
    pointer-events:none;
    background:rgba(255,255,255,.015);
    animation:flicker .15s infinite;
}
/* ===================================================== */
.boot-flicker{
    filter:brightness(.35);
}
/* ===================================================== */
@keyframes fadein{ from{ opacity:0; } to{ opacity:1; } }
/* ===================================================== */
@keyframes glow{
    from{ text-shadow: 0 0 3px #00ff00, 0 0 6px #00ff00, 0 0 12px #00ff00; }
    to{ text-shadow: 0 0 8px #00ff00, 0 0 18px #00ff00, 0 0 34px #00ff00; }
}
/* ===================================================== */
@keyframes flicker{
    0%{opacity:.03;} 15%{opacity:.06;} 30%{opacity:.025;}
    45%{opacity:.05;} 60%{opacity:.02;} 80%{opacity:.055;} 100%{opacity:.035;}
}
/* ===================================================== */
@keyframes bleed{
    0%{ transform:translateY(0); }
    20%{ text-shadow: 0 1px #00ff00, 0 3px rgba(0,255,0,.45), 0 5px rgba(0,255,0,.18), 0 0 20px #00ff00; }
    40%{ text-shadow: 0 2px #00ff00, 0 5px rgba(0,255,0,.30), 0 8px rgba(0,255,0,.10), 0 0 24px #00ff00; }
    60%{ text-shadow: 0 1px #00ff00, 0 4px rgba(0,255,0,.35), 0 6px rgba(0,255,0,.15), 0 0 22px #00ff00; }
    80%{ text-shadow: 0 3px #00ff00, 0 6px rgba(0,255,0,.20), 0 9px rgba(0,255,0,.08), 0 0 24px #00ff00; }
    100%{ text-shadow: 0 1px #00ff00, 0 2px rgba(0,255,0,.45), 0 4px rgba(0,255,0,.18), 0 0 18px #00ff00; }
}