/* ==========================================================================
   decker website theme  —  Terminal.css (terminalcss.xyz) + decker palette
   --------------------------------------------------------------------------
   Loaded by web/templates/website/base.html AFTER terminal.css. We retheme
   Terminal.css purely through its CSS custom properties, then add a thin
   cyberpunk chrome (scanlines, glow, ASCII header) on top.

   Palette is the decker webclient's wintermux "Catppuccin Mocha" look
   (see web/static/webclient/css/custom.css).
   ========================================================================== */

:root {
    /* --- decker palette ------------------------------------------------- */
    --bg:        #282A3B;
    --crust:     #11111b;
    --surface0:  #313244;
    --surface1:  #45475a;
    --surface2:  #585b70;
    --overlay0:  #6c7086;
    --overlay1:  #7f849c;
    --subtext0:  #a6adc8;
    --subtext1:  #bac2de;
    --fg:        #e0e0e0;
    --border:    #45475a;

    --mauve:     #cba6f7;
    --lavender:  #b4befe;
    --red:       #f38ba8;
    --blue:      #89b4fa;
    --yellow:    #f9e2af;
    --green:     #a6e3a1;

    /* --- Terminal.css variable overrides -------------------------------- */
    --global-font-size: 15px;
    --global-line-height: 1.45em;
    --font-stack: "Courier New", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
    --mono-font-stack: var(--font-stack);

    --background-color: var(--bg);
    --font-color: var(--fg);
    --invert-font-color: var(--bg);
    --primary-color: var(--mauve);
    --secondary-color: var(--subtext0);
    --error-color: var(--red);
    --progress-bar-background: var(--surface0);
    --progress-bar-fill: var(--blue);
    --code-bg-color: var(--surface0);
    --block-background-color: var(--surface0);
    --input-style: solid;
    --display-h1-decoration: none;

    --page-width: 56em;
}

/* === Base ============================================================== */
html { background: var(--crust); }
body {
    background:
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.14) 0px,
            rgba(0, 0, 0, 0.14) 1px,
            transparent 1px,
            transparent 3px),                 /* faint CRT scanlines */
        var(--bg);
    color: var(--fg);
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--lavender); text-decoration: underline; }

::selection { background: var(--mauve); color: var(--bg); }

hr {
    border: 0;
    border-top: 1px dashed var(--surface2);
    margin: 1.5rem 0;
}

.container {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0 1rem;
}
.main-content { padding-top: 1.5rem; padding-bottom: 3rem; }

/* === Top navigation =================================================== */
.terminal-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--surface1);
    padding: 0.6rem 0;
    margin-bottom: 0.5rem;
}
.terminal-logo .logo {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--mauve);
    text-shadow: 0 0 8px rgba(203, 166, 247, 0.45);
}
.terminal-logo .logo a { color: var(--mauve); }
.terminal-logo .logo a:hover { color: var(--lavender); text-decoration: none; }
.terminal-logo .logo small {
    display: block;
    color: var(--overlay1);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
    font-size: 0.7rem;
}
/* suppress Terminal.css's default "> " caret; the "~$" is rendered after the
   wordmark instead (see .tl-prompt-sym in _menu.html) */
.terminal-logo .terminal-prompt::before { content: ""; }
.terminal-prompt .tl-prompt-sym {
    color: var(--green);
    text-shadow: none;
}

.terminal-menu ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0;
}
.terminal-menu li { margin: 0; border: 0; }
.terminal-menu li a.menu-item {
    color: var(--subtext1);
    border: 0;
    padding: 0.15rem 0.1rem;
    background: transparent;
}
.terminal-menu li a.menu-item:hover {
    color: var(--mauve);
    text-decoration: none;
}
.terminal-menu li a.menu-item.active,
.terminal-menu li a.menu-item.btn {
    color: var(--bg);
}

/* --- nav-link echo at the terminal-prompt ----------------------------- *
   Hovering a nav link types its text into #nav-log, which lives right after
   the wordmark inside the existing .terminal-prompt (top of the page), so the
   text appears at the prompt with its blinking cursor trailing (nav_type.js). */
.terminal-prompt .tl-text { color: var(--mauve); }
/* "Play / jack in" call-to-action button living in the nav */
.nav-cta {
    background: var(--mauve) !important;
    color: var(--bg) !important;
    border-color: var(--mauve) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.nav-cta:hover {
    background: var(--lavender) !important;
    border-color: var(--lavender) !important;
    text-decoration: none;
}

/* === Headings ========================================================= */
h1, h2, h3, h4, h5, h6 { color: var(--subtext1); }
h1 { color: var(--mauve); text-shadow: 0 0 10px rgba(203, 166, 247, 0.35); }

/* === Hero (homepage) ================================================== */
.hero {
    text-align: center;
    padding: 1rem 0 0.5rem;
}
.hero-ascii {
    color: var(--mauve);
    font-size: clamp(4px, 1.55vw, 11px);
    line-height: 1.05;
    margin: 0 auto 0.5rem;
    white-space: pre;
    overflow-x: auto;
    text-shadow: 0 0 10px rgba(203, 166, 247, 0.45);
    display: inline-block;
    text-align: left;
}
.hero-tagline {
    color: var(--subtext0);
    font-size: 1.05rem;
    margin: 0.25rem 0 1.25rem;
}
.hero-tagline .accent { color: var(--blue); }
.hero-tagline .accent-2 { color: var(--yellow); }

.play-cta {
    display: inline-block;
    background: var(--mauve);
    color: var(--bg) !important;
    border: 1px solid var(--mauve);
    padding: 0.55rem 1.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 0 14px rgba(203, 166, 247, 0.4);
    transition: background 0.12s ease, box-shadow 0.12s ease;
}
.play-cta:hover {
    background: var(--lavender);
    border-color: var(--lavender);
    text-decoration: none;
    box-shadow: 0 0 22px rgba(180, 190, 254, 0.55);
}

.connect-info {
    margin-top: 1.25rem;
    color: var(--subtext0);
    font-size: 0.9rem;
}
.connect-info code, .connect-info strong { color: var(--green); }

/* === Cards / widgets ================================================== */
.widget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
.terminal-card {
    border: 1px solid var(--surface1);
    background: var(--surface0);
}
.terminal-card > header {
    background: var(--surface1);
    color: var(--mauve);
    text-transform: lowercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    padding: 0.4rem 0.75rem;
}
.terminal-card > header::before { content: "// "; color: var(--overlay1); }
.terminal-card > div { padding: 0.75rem; color: var(--subtext1); }
.terminal-card strong { color: var(--blue); }
.terminal-card ul { list-style: none; margin: 0; padding: 0; }
.terminal-card ul li {
    padding: 0.2rem 0;
    border-bottom: 1px dashed var(--surface1);
}
/* Terminal.css renders the <ul> bullet as an absolutely-positioned "-" in
   li::after (top:0/left:0). With our left padding zeroed above, that dash lands
   on top of the first character; suppress it. */
.terminal-card ul li::after { content: none; }
.terminal-card ul li:last-child { border-bottom: 0; }
.terminal-card em { color: var(--overlay1); font-style: normal; }

/* === Forms (login / register / character create) ====================== */
label { color: var(--subtext0); }
input, textarea, select {
    background: var(--surface0) !important;
    color: var(--fg) !important;
    border: 1px solid var(--surface2) !important;
    border-radius: 0 !important;
    font-family: var(--font-stack);
}
input:focus, textarea:focus, select:focus {
    border-color: var(--mauve) !important;
    outline: none !important;
    box-shadow: 0 0 6px rgba(203, 166, 247, 0.35) !important;
}

/* === Buttons ========================================================== */
.btn, button, input[type="submit"] {
    border-radius: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.82rem;
}
.btn-primary, .btn.btn-primary {
    background: var(--mauve);
    border-color: var(--mauve);
    color: var(--bg);
}
.btn-primary:hover { background: var(--lavender); border-color: var(--lavender); }

/* === Tables (character / channel / help lists) ======================== */
table { border-collapse: collapse; width: 100%; }
th { color: var(--mauve); border-bottom: 1px solid var(--surface2); text-align: left; }
td { border-bottom: 1px dashed var(--surface1); color: var(--subtext1); }

/* === Alerts / messages ================================================ */
.terminal-alert {
    border: 1px solid var(--surface2);
    background: var(--surface0);
    color: var(--subtext1);
}
.terminal-alert-error { border-color: var(--red); color: var(--red); }
.terminal-alert-primary { border-color: var(--mauve); color: var(--mauve); }

/* === Auth / generic forms ============================================ */
.auth-form { max-width: 30rem; margin: 1.5rem auto; }
.form-group { margin-bottom: 0.9rem; }
.form-group label { display: block; margin-bottom: 0.25rem; }
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea { width: 100%; }
.form-help { display: block; color: var(--overlay1); font-size: 0.78rem; margin-top: 0.2rem; }
.btn-block { width: 100%; }
.auth-links { text-align: center; margin-top: 0.75rem; color: var(--overlay1); font-size: 0.85rem; }

/* === Character management ============================================= */
.char-row {
    padding: 0.75rem 0;
    border-bottom: 1px dashed var(--surface1);
}
.char-row:last-child { border-bottom: 0; }
.char-name { margin: 0 0 0.2rem; }
.char-name small { color: var(--overlay1); font-weight: 400; }
.char-meta { margin: 0 0 0.4rem; color: var(--overlay1); font-size: 0.82rem; }
.char-meta em { color: var(--overlay0); font-style: normal; }
.char-desc { margin: 0; color: var(--subtext1); }

/* === Footer =========================================================== */
.footer {
    border-top: 1px dashed var(--surface2);
    margin-top: 2rem;
    padding: 1rem 0 2rem;
    text-align: center;
    color: var(--overlay0);
    font-size: 0.8rem;
}
.footer a { color: var(--overlay1); }
.footer a:hover { color: var(--mauve); }
.footer .blink {
    color: var(--green);
    animation: blink 1.1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }