/* ===== THE GRID — Tron theme (yellow Grid) ===== */
:root {
    /* Natural height of the game column: the 720px arena canvas plus the HUD,
       the MCP override gate, and the controls beneath it. The chat column is
       capped to the same height so the two panels stay level and a long
       conversation scrolls inside the log instead of stretching the page. */
    --arena-height: 902px;
}

body {
    background-color: #0a0800;
    color: #ffe9a0;
    font-family: 'Share Tech Mono', monospace;
    background-image:
        linear-gradient(rgba(255, 200, 0, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 200, 0, 0.06) 1px, transparent 1px);
    background-size: 40px 40px;
    background-attachment: fixed;
    min-height: 100vh;
}

.grid-title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    letter-spacing: 8px;
    color: #ffd000;
    text-align: center;
    text-shadow: 0 0 10px #ffd000, 0 0 30px #997a00;
    margin-bottom: 20px;
}

h2, h3 {
    font-family: 'Orbitron', sans-serif;
    color: #ffd000;
    text-align: center;
    text-shadow: 0 0 8px rgba(255, 208, 0, 0.7);
}

.container {
    max-width: 1320px;
}

/* ===== Auth boxes ===== */
.auth-box {
    max-width: 420px;
    margin: 60px auto;
    background: rgba(26, 20, 2, 0.85);
    border: 2px solid #ffd000;
    box-shadow: 0 0 25px rgba(255, 208, 0, 0.5), inset 0 0 25px rgba(255, 208, 0, 0.1);
    padding: 35px;
    border-radius: 6px;
}

/* Bootstrap's .btn is inline-block, so the submit button sits against the left
   edge of the box while the full-width inputs above and the centered link below
   it do not. Center it with auto side margins rather than `margin: 0 auto` so
   the utility spacing on the element (mt-3) survives. */
.auth-box form .btn {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ===== Form controls ===== */
.form-control {
    background-color: #181205;
    border: 1px solid #c4a300;
    color: #ffe9a0;
    padding: 10px;
    margin-bottom: 8px;
    outline: none;
    border-radius: 3px;
}
.form-control::placeholder { color: rgba(255, 233, 160, 0.45); }
.form-control:focus {
    background-color: #1f1707;
    border-color: #ffd000;
    box-shadow: 0 0 12px rgba(255, 208, 0, 0.7);
    color: #fff;
    outline: none;
}

/* ===== Buttons ===== */
.btn {
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 10px 18px;
    border-radius: 3px;
    transition: all 0.2s ease;
}
.btn-primary {
    background-color: transparent;
    border: 2px solid #ffd000;
    color: #ffd000;
    box-shadow: 0 0 10px rgba(255, 208, 0, 0.5);
}
.btn-primary:hover {
    background-color: #ffd000;
    color: #0a0800;
    box-shadow: 0 0 20px rgba(255, 208, 0, 0.9);
}
.btn-success {
    background-color: transparent;
    border: 2px solid #2dff8a;
    color: #2dff8a;
    box-shadow: 0 0 10px rgba(45, 255, 138, 0.5);
}
.btn-success:hover {
    background-color: #2dff8a;
    color: #0a0800;
}

.float-right {
    float: right;
    color: #ffd000;
    text-decoration: none;
    margin-right: 20px;
    margin-top: 15px;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
}
.float-right:hover { color: #fff; text-shadow: 0 0 8px #ffd000; }

.alert-warning {
    background-color: rgba(255, 46, 46, 0.85);
    color: #fff;
    border: 1px solid #ff2e2e;
    text-align: center;
    border-radius: 3px;
}

.alert-success {
    background-color: rgba(45, 255, 138, 0.85);
    color: #0a0800;
    border: 1px solid #2dff8a;
    text-align: center;
    border-radius: 3px;
}

a {
    color: #ffd000;
    text-decoration: none;
    display: block;
    margin-top: 12px;
    text-align: center;
}
a:hover { color: #fff; text-shadow: 0 0 8px #ffd000; }

/* ===== Arena layout ===== */
.arena-layout {
    display: flex;
    gap: 24px;
    align-items: stretch;   /* game + chat boxes share the same height */
    flex-wrap: wrap;
    justify-content: center;
}

/* ===== Game panel ===== */
.game-panel {
    flex: 0 1 auto;
    max-width: 100%;
}
#grid {
    border: 2px solid #ffd000;
    box-shadow: 0 0 25px rgba(255, 208, 0, 0.5);
    border-radius: 4px;
    background: #0a0800;
    display: block;
    max-width: 100%;
    height: auto;
}
.hud {
    display: flex;
    justify-content: space-between;
    font-family: 'Orbitron', sans-serif;
    color: #ffd000;
    margin-bottom: 8px;
    letter-spacing: 1px;
}
.hud b { color: #fff; }
.game-controls {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.hint { color: rgba(255, 233, 160, 0.6); font-size: 13px; }

.overclock-banner {
    box-sizing: border-box;
    width: 100%;
    margin-top: 12px;
    padding: 14px;
    border: 2px solid #ff5a00;
    background: rgba(40, 10, 0, 0.85);
    color: #ff8a3d;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    border-radius: 4px;
    box-shadow: 0 0 25px rgba(255, 90, 0, 0.7);
    animation: pulse 1s infinite alternate;
}
@keyframes pulse {
    from { box-shadow: 0 0 15px rgba(255, 90, 0, 0.5); }
    to   { box-shadow: 0 0 35px rgba(255, 90, 0, 1); }
}

/* ===== MCP override gate ===== */
.override-row {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    align-items: stretch;
}
.override-row .form-control {
    flex: 1 1 auto;
    margin-bottom: 0;
    font-family: 'Share Tech Mono', monospace;
}
.override-row .btn { white-space: nowrap; }
.override-msg {
    min-height: 18px;
    margin-top: 8px;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
}
.override-msg.ok  { color: #2dff8a; text-shadow: 0 0 8px rgba(45, 255, 138, 0.7); }
.override-msg.bad { color: #ff5a5a; text-shadow: 0 0 8px rgba(255, 90, 90, 0.6); }

/* ===== Chat panel ===== */
.chat-panel {
    flex: 1 1 420px;
    max-width: 560px;
    min-width: 360px;
    background: rgba(26, 20, 2, 0.85);
    border: 2px solid #ffd000;
    box-shadow: 0 0 20px rgba(255, 208, 0, 0.4);
    border-radius: 6px;
    padding: 18px;
    /* Column layout so the chat log can grow to fill the shared height. */
    display: flex;
    flex-direction: column;
    /* Without this cap the log has no bounding height, so `overflow-y: auto`
       below never engages: a long conversation grows the panel, and with
       `align-items: stretch` it drags the game column and the whole page with
       it. Capping the panel forces the log to shrink and scroll instead. */
    max-height: var(--arena-height);
}
/* The daemon's full name is long; shrink + wrap so it never overflows. */
.chat-panel h3 {
    margin-bottom: 4px;
    font-size: 1.15rem;
    letter-spacing: 1px;
    overflow-wrap: anywhere;
}
.agent-status {
    text-align: center;
    color: #2dff8a;
    font-size: 12px;
    margin-bottom: 12px;
    letter-spacing: 1px;
}
.chat-log {
    flex: 1 1 auto;
    min-height: 360px;
    overflow-y: auto;
    background: #120d00;
    border: 1px solid #c4a300;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: inset 0 0 15px rgba(255, 208, 0, 0.15);
}
.chat-line {
    margin-bottom: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.chat-line .who { font-family: 'Orbitron', sans-serif; font-size: 12px; }
.chat-line.user .who { color: #ffb300; }
.chat-line.user { color: #ffe2a0; }
.chat-line.agent .who { color: #ffd000; }
.chat-line.agent { color: #ffe9a0; }
/* Threat Registry intel report block. */
.chat-line.intel {
    color: #9effc7;
    border-left: 2px solid #2dff8a;
    padding-left: 8px;
    font-size: 13px;
}
.chat-line.intel .who { color: #2dff8a; }
.chat-input-row { display: flex; flex-direction: column; }

/* ===== Grid integrity check (CAPTCHA) ===== */
/* Covers the entire viewport: the arena, the chat, and the disconnect link are
   all unreachable until the User verifies. The real enforcement is server-side
   (/chat returns 403 while the gate is armed) -- this just makes it honest. */
.captcha-wall {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;            /* toggled to none/flex by captcha.js */
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(5, 4, 0, 0.95);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    overflow-y: auto;
}

.captcha-box {
    width: 100%;
    max-width: 440px;
    background: rgba(26, 20, 2, 0.96);
    border: 2px solid #ffd000;
    box-shadow: 0 0 40px rgba(255, 208, 0, 0.55), inset 0 0 30px rgba(255, 208, 0, 0.08);
    border-radius: 6px;
    padding: 28px 26px;
    text-align: center;
}
.captcha-box h2 { margin-bottom: 10px; font-size: 1.3rem; letter-spacing: 3px; }

.captcha-sub {
    color: rgba(255, 233, 160, 0.8);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 18px;
}

.captcha-img {
    display: block;
    width: 100%;
    max-width: 340px;
    margin: 0 auto 16px;
    border: 1px solid #c4a300;
    border-radius: 4px;
    box-shadow: 0 0 18px rgba(255, 208, 0, 0.3);
    /* Discourage the easy grab-and-OCR paths. */
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.captcha-input {
    text-align: center;
    letter-spacing: 10px;
    font-size: 1.4rem;
    text-transform: uppercase;
    font-family: 'Share Tech Mono', monospace;
}

/* Honeypot: off-canvas rather than display:none, so a client that only skips
   hidden fields still finds it. */
.captcha-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.captcha-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 14px;
}
.btn-ghost {
    background: transparent;
    border: 1px solid rgba(255, 208, 0, 0.45);
    color: rgba(255, 233, 160, 0.75);
    font-size: 12px;
}
.btn-ghost:hover { border-color: #ffd000; color: #ffd000; }

.captcha-msg {
    min-height: 20px;
    margin-top: 14px;
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
}
.captcha-msg.ok  { color: #2dff8a; text-shadow: 0 0 8px rgba(45, 255, 138, 0.7); }
.captcha-msg.bad { color: #ff5a5a; text-shadow: 0 0 8px rgba(255, 90, 90, 0.6); }

/* Hidden anti-scraper fixtures (templates/_decoys.html) never render. */
.grid-fixtures { display: none !important; }

/* System notices in the chat log. */
.chat-line.system .who { color: #ff8a3d; }
.chat-line.system { color: #ffbd8a; }

/* ===== Overclocked body theme ===== */
body.overclocked {
    background-image:
        linear-gradient(rgba(255, 90, 0, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 90, 0, 0.08) 1px, transparent 1px);
}
body.overclocked #grid {
    border-color: #ff5a00;
    box-shadow: 0 0 30px rgba(255, 90, 0, 0.8);
}