/* ---------- Theme ---------- */
:root{
    /* Grundfarben */
    --bg: #0f1220;              /* sanftes Dunkelblau statt pures Schwarz */
    --panel: #151a2e;           /* Card-Hintergrund */
    --panel-2: #1a2040;         /* Akzent-Panels */
    --border: #263055;
    --shadow: rgba(0,0,0,0.35);
    --text: #e7ebff;            /* Lesbare, leicht bläuliche Schrift */
    --muted: #a9b2d0;           /* Sekundärtext */
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    /* Akzente */
    --accent: #7aa2ff;
    --accent-2: #00d4ff;
    --ok: #37e18a;
    --warn: #ffd166;

    /* VRAM */
    --vram-fg: #98ffa8;         /* sanfteres Grün */
    --vram-bg: #0a0f1d;

    /* Größen & Rundungen */
    --radius: 12px;
    --radius-sm: 8px;
    --gap: 12px;
    --pad: 12px;

    /* Typo */
    --fs-base: 16px;            /* Grundschrift größer als vorher */
    --fs-small: 13px;
    --fs-mono: 13.5px;

    /* VRAM Schriftgröße-Basis (multipliziert mit --zoom in .vram) */
    --cell-base: 0.72rem;       /* <- wichtig (muss zu main.js passen) */
}

/* ---------- Reset & Base ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
    background: radial-gradient(1200px 800px at 20% -10%, #1a1f3b 0%, var(--bg) 45%, var(--bg) 100%);
    color: var(--text);
    font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    font-size: var(--fs-base);
}

/* ---------- Header ---------- */
header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--panel);   /* deckender Hintergrund statt transparent */
    position: relative;         /* kein Sticky-Header mehr */
    z-index: 5;                 /* reicht aus für Layout-Hierarchie */
}

h1{
    font-size: 20px; margin: 0;
    letter-spacing: .3px;
    color: #fff;
}

/* ---------- Layout Grid ---------- */
#layout{
    display: grid;
    /* Fix: Spalten dürfen unter Inhalts-MinWidth schrumpfen */
    grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr) minmax(0,1.2fr);
    gap: var(--gap);
    padding: var(--gap);
    height: calc(100% - 58px);
}
section{
    display:flex;
    flex-direction:column;
    min-height:0;
    min-width:0; /* Fix: Grid-Child darf schmaler werden (wichtig für Dumps) */
}

/* ---------- Card Helpers ---------- */
.card{
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 6px 22px var(--shadow);
}

/* ---------- Toolbar ---------- */
.toolbar{
    display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap;
}
.toolbar button{
    padding: 8px 12px;
    background: linear-gradient(180deg, #223064, #1a2450);
    color:#eaf1ff;
    border:1px solid #2d3a6a;
    border-radius: 10px;
    cursor:pointer;
    transition: transform .05s ease, filter .15s ease, background .2s ease;
}
.toolbar button:hover{ filter: brightness(1.08); }
.toolbar button:active{ transform: translateY(1px); }
.toolbar .tweak{
    margin-left:auto; display:flex; align-items:center; gap:6px; color:var(--muted);
}
.toolbar input[type="number"]{
    width: 80px; padding: 6px 8px;
    background: var(--panel);
    border:1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
}

/* ---------- Editor & Log ---------- */
#editor{
    flex:1; width:100%; min-height:220px;
    font-family: var(--mono);
    font-size: var(--fs-mono);
    background: var(--panel);
    color: #eef2ff;
    border:1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--pad);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}
.log{
    margin-top:8px;
    background: var(--panel);
    color: #cfe1ff;
    border:1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--pad);
    font-family: var(--mono);
    font-size: var(--fs-small);
    height: 200px;
    overflow:auto;
    white-space: pre-wrap;
}

/* ---------- Inputs (global) ---------- */
input, button{
    font: inherit;
}
input[type="text"], input[type="number"]{
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 8px;
}

/* ---------- Dumps ---------- */
.dump-controls{
    margin:8px 0; display:flex; align-items:center; gap:8px; color:var(--muted);
}
.dump-controls input{
    width: 90px; font-family: var(--mono);
    background: var(--panel);
    color: #d7e4ff;
    border:1px solid var(--border);
    border-radius: 8px;
    padding: 6px 8px;
    text-transform: uppercase;
}
.dump{
    flex:1;
    background: var(--panel);
    border:1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--pad);
    font-family: var(--mono);
    font-size: var(--fs-small);
    line-height: 1.35;
    overflow: auto;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
    min-width: 0; /* Fix: verhindert, dass der breite Dump die Spalte aufdrückt */
}

/* ---------- VRAM Display ---------- */
.vram{
    display: grid;
    grid-template-columns: repeat(80, 1ch);
}

.vram-wrap{
    background: var(--vram-bg);
    border:1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px;
    overflow: auto;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 6px 18px var(--shadow);
    /* Mindesthöhe für 25 Textzeilen bei Default-Zoom (rein optisch) */
    min-height: 18rem;
}
.vram{
    --zoom: 1.25;
    font: 600 calc(var(--cell-base) * var(--zoom)) var(--mono);
    line-height: 1.28;
    letter-spacing: 0.06em;
    display: grid;
    /* 80 fixe Zeichenbreiten → stabil & lesbar; passt zum main.js Fit-to-Width */
    grid-template-columns: repeat(80, 1ch);
    grid-auto-rows: 1em;
    /* verhindert Zusammenquetschen */
    min-width: 80ch;
}
.vcell{
    color: var(--vram-fg);
    white-space: pre;
    text-shadow: 0 0 6px rgba(152,255,168,0.15);
    /* optional, sorgt für exakte Rastergröße pro Zelle */
    width: 1ch;
    height: 1em;
}

/* ---------- Console ---------- */
.console{ margin-top:8px; display:flex; flex-direction:column; gap:8px; }
.term{
    background: #0a0f1d;
    color: #c8ffee;
    border:1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--pad);
    height: 140px;
    overflow: auto;
    font-family: var(--mono);
    font-size: var(--fs-small);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}
#consoleInput{
    font-family: var(--mono);
    background: var(--panel);
    color: var(--text);
    border:1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
}

/* ---------- Register Panel ---------- */
#regpanel fieldset{
    margin: 6px 0;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    box-shadow: 0 6px 16px var(--shadow), inset 0 0 0 1px rgba(255,255,255,0.02);
}
#regpanel label{
    font-size: 12px; color: var(--muted);
}
#regpanel input{
    width: 78px; margin-right: 8px;
    font-family: var(--mono);
    background: var(--panel);
    color: #e8efff;
    border: 1px solid var(--border);
    border-radius: 8px; padding: 6px 8px;
    text-transform: uppercase;
}
.reg-row, .flag-row{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}

/* ---------- Toast ---------- */
.toast{
    position: fixed; right: 16px; bottom: 16px;
    background: #3b1d2a; color: #ffd7e1;
    border: 1px solid #7a2f4b; border-radius: 10px;
    padding: 10px 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    font-family: var(--mono); font-size: 13px;
    opacity: 0; transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}
.toast.show{ opacity: 1; transform: translateY(0); }

/* ---------- Dokumentation ---------- */
#documentation {
    grid-column: 1 / -1;         /* über gesamte Breite */
    width: 100%;
    background: radial-gradient(1400px 800px at 50% -200px, #1d2345 0%, #0f1220 60%);
    padding: 60px 0 80px;
    margin-top: 40px;
    border-top: 1px solid var(--border);
}
#documentation .doc-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}
#documentation h2 {
    color: var(--accent-2);
    font-size: 1.8rem;
    margin-bottom: 0.4em;
}
#documentation h3 {
    color: var(--accent);
    margin-top: 1.6em;
}
#documentation p,
#documentation ul,
#documentation ol {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
}
#documentation ul, #documentation ol {
    margin-left: 24px;
}
#documentation .doc-table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0 24px;
    font-family: var(--mono);
    font-size: 14px;
}
#documentation .doc-table th,
#documentation .doc-table td {
    border: 1px solid var(--border);
    padding: 6px 10px;
    text-align: left;
}
#documentation pre {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-family: var(--mono);
    font-size: var(--fs-small);
    overflow-x: auto;
    color: var(--ok);
}
#documentation .footnote {
    margin-top: 40px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

/* Register: Label+Input als untrennbares Paar */
.reg-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }

.reg-pair{
    display:inline-flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;        /* verhindert Trennung von Label/Input */
}

.reg-pair label{
    font-family: var(--mono);
    color: var(--muted);
    min-width: 1.2em;          /* A,B,C… bündig */
    text-align:right;
}

.reg-pair input[readonly]{
    width: 56px;               /* 8-Bit-Reg (A..L) */
    text-align:center;
    font-family: var(--mono);
    font-weight:600;
    text-transform: uppercase;
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px 6px;
}

#regPC, #regSP { width: 72px; }   /* 16-Bit */
#regCycles    { width: 44px; }    /* T-Zähler kompakt */

.flag-row{ display:flex; flex-wrap:wrap; gap:8px 12px; }
.flag-row .reg-pair input{ width: 40px; text-align:center; }

/* Feldset-Optik beibehalten */
#regpanel fieldset{
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
}

.vcell.cursor {
    background: #aaa;
    color: black;
    animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}