/* ==========================================================
   777 ENCLAVE SECURE CONSOLE — ENHANCE LAYER v1.0
   Additive chrome + prefs + calm mode. Every rule here is
   scoped to the enhance layer (#nx-* / html.nx-*). Remove
   this file + enhance.js and the console is 100% original.
========================================================== */

:root{
    --nx-bar-h: 34px;
}

/* The bar exists in markup but stays hidden until
   enhance.js arms it — no JS, no dead buttons. */
#nx-bar{
    display:none;
}

html.nx-on #nx-bar{
    position:fixed;
    top:0; left:0; right:0;
    height:var(--nx-bar-h);
    z-index:40;
    display:flex;
    align-items:center;
    gap:14px;
    padding:0 12px;
    background:rgba(0,0,0,.88);
    border-bottom:1px solid var(--chrome-line, rgba(0,255,0,.35));
    font-family:"Courier New","Lucida Console",monospace;
    font-size:12px;
    letter-spacing:.08em;
    color:var(--chrome-dim, rgba(102,255,102,.72));
    text-shadow:0 0 6px rgba(0,255,0,.45);
    transition:opacity .45s ease;
}

/* When a game / screensaver / sim owns the screen, the bar bows out */
html.nx-on #nx-bar.nx-bow{
    opacity:0;
    pointer-events:none;
}

/* Make room for the bar inside the locked viewport */
html.nx-on #screen{
    padding-top:calc(20px + var(--nx-bar-h));
}
@media (max-width: 640px){
    html.nx-on #screen{
        padding-top:calc(12px + var(--nx-bar-h));
    }
}

.nx-brand{
    font-weight:bold;
    color:var(--original-text, #66ff66);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.nx-brand-short{ display:none; }
@media (max-width: 700px){
    .nx-brand-full{ display:none; }
    .nx-brand-short{ display:inline; }
}

.nx-clock{
    margin-left:auto;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
    opacity:.85;
}
@media (max-width: 520px){
    .nx-clock{ display:none; }
}

.nx-actions{
    display:flex;
    gap:8px;
    margin-left:auto;
}
.nx-clock + .nx-actions{ margin-left:0; }

.nx-btn{
    appearance:none;
    background:rgba(0,40,0,.25);
    border:1px solid rgba(0,255,0,.4);
    color:var(--terminal-text, #7dff7d);
    font:inherit;
    font-size:11px;
    letter-spacing:.08em;
    padding:4px 10px;
    min-height:26px;
    cursor:pointer;
    text-shadow:0 0 6px rgba(0,255,0,.5);
}
.nx-btn:hover{
    background:rgba(0,80,0,.35);
    box-shadow:0 0 10px rgba(0,255,0,.35);
}
.nx-btn:active{ transform:translateY(1px); }
.nx-btn[aria-pressed="true"]{
    background:var(--glow-primary, #00ff00);
    color:#000;
    text-shadow:none;
    font-weight:bold;
}

/* ===================================================== */
/* CALM MODE — one switch stills the CRT (also the        */
/* automatic state for prefers-reduced-motion visitors)   */
/* ===================================================== */
html.nx-calm #flicker{ display:none !important; }
html.nx-calm #noise{ opacity:0 !important; }
html.nx-calm #scanlines{ opacity:.07 !important; }
html.nx-calm body{ text-shadow:0 0 3px rgba(0,255,0,.5); }
html.nx-calm #logo{ animation:none !important; }
html.nx-calm #console{ animation:none !important; }

/* ==========================================================
   ★★★ ENHANCE v2.0 — THE INTEGRATED CONSOLE DECK ★★★
   (2026-10-17 OVERHAUL) Everything above is v1.0, preserved:
   same ids, same classes, same arming logic in enhance.js.
   This section re-metals the bar so it reads as part of the
   machine: brushed green deck, engraved brand, recessed
   clock readout, beveled keys with an LED on the live one.
========================================================== */

:root{
    --nx-bar-h: 42px;
}

html.nx-on #nx-bar{
    height: var(--nx-bar-h);
    padding: 0 14px;
    gap: 16px;
    font-size: 12.5px;
    background:
        linear-gradient(180deg, rgba(0,52,12,.92), rgba(0,22,5,.94) 55%, rgba(0,12,2,.96));
    border-bottom: 1px solid rgba(0,255,0,.6);
    box-shadow:
        0 1px 0 rgba(157,255,157,.16) inset,
        0 6px 18px rgba(0,0,0,.6),
        0 0 24px rgba(0,255,0,.12);
}

.nx-brand{
    letter-spacing: .14em;
    color: var(--color-toxic-green, #39FF14);
    text-shadow:
        0 0 7px rgba(57,255,20,.8),
        0 0 20px rgba(0,255,0,.4);
}
/* a lit pip before the brand — the deck's power lamp */
.nx-brand::before{
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    margin-right: 10px;
    border-radius: 50%;
    background: var(--glow-primary, #00ff00);
    box-shadow: 0 0 9px var(--glow-primary, #00ff00), 0 0 3px var(--glow-primary, #00ff00);
    vertical-align: 1px;
}

/* the clock becomes a recessed readout window */
.nx-clock{
    padding: 4px 10px;
    border: 1px solid rgba(0,255,0,.28);
    border-radius: 4px;
    background: rgba(0,10,2,.75);
    box-shadow:
        inset 0 2px 5px rgba(0,0,0,.85),
        inset 0 0 12px rgba(0,255,0,.06);
    color: var(--terminal-text, #7dff7d);
    opacity: 1;
}

/* keys: beveled metal-green, pressed = lit */
.nx-btn{
    min-height: 29px;
    padding: 5px 12px;
    border: 1px solid rgba(0,255,0,.55);
    border-radius: 5px;
    background: linear-gradient(180deg, rgba(0,64,14,.5), rgba(0,26,5,.55));
    box-shadow:
        inset 0 1px 0 rgba(157,255,157,.22),
        inset 0 -6px 10px rgba(0,0,0,.45),
        0 2px 6px rgba(0,0,0,.5);
}
.nx-btn:hover{
    background: linear-gradient(180deg, rgba(0,92,20,.55), rgba(0,36,7,.6));
    box-shadow:
        inset 0 1px 0 rgba(157,255,157,.3),
        inset 0 -6px 10px rgba(0,0,0,.4),
        0 0 14px rgba(0,255,0,.45);
}
.nx-btn:active{
    transform: translateY(1px);
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,.65),
        0 0 8px rgba(0,255,0,.3);
}
.nx-btn[aria-pressed="true"]{
    background: linear-gradient(180deg, #4dff4d, var(--glow-primary, #00ff00));
    box-shadow:
        0 0 16px rgba(0,255,0,.65),
        inset 0 1px 0 rgba(255,255,255,.5);
}

/* the deck's clearance inside the cabinet (padding comp, v2 height) */
html.nx-on #screen{
    padding-top: calc(20px + var(--nx-bar-h));
}
@media (max-width: 640px){
    html.nx-on #screen{
        padding-top: calc(12px + var(--nx-bar-h));
    }
    html.nx-on #nx-bar{ gap: 9px; padding: 0 9px; }
    .nx-btn{ padding: 5px 8px; }
}