/* =====================================================================
   Locus GM Screen — styles.css
   Theme: personal horror, guilt, broken places, dark atmospheric.
   Palette: deep blacks, muted greys, faded violet, pale bone.
   ===================================================================== */

/* ─── Google Font ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=Share+Tech+Mono&display=swap');

/* ─── Custom Properties ───────────────────────────────────────────── */
:root {
    --bg-void:       #050507;
    --bg-deep:       #0a090e;
    --bg-panel:      #0e0d14;
    --bg-card:       #131220;
    --bg-hover:      #1b1929;
    --border-dim:    #2a2838;
    --border-mid:    #3d3a52;
    --border-glow:   #6b5d8a;
    --accent-violet: #8c7ab0;
    --accent-pale:   #b0a3cc;
    --accent-bone:   #d8cfc0;
    --accent-gold:   #c8aa70;
    --text-primary:  #ccc8d8;
    --text-secondary:#8a8598;
    --text-muted:    #5a5570;
    --text-pale:     #e8e4f0;
    --red-dim:       #7a2a2a;
    --red-mid:       #a03030;
    --red-bright:    #c84040;
    --shadow-void:   rgba(0,0,0,0.85);
    --shadow-violet: rgba(100,80,150,0.15);
    --radius-sm:     4px;
    --radius-md:     8px;
    --radius-lg:     12px;
    --font-head:     'IM Fell English', Georgia, serif;
    --font-body:     'Crimson Text', Georgia, serif;
    --font-mono:     'Share Tech Mono', monospace;
    --transition:    0.2s ease;
}

/* ─── Reset & Base ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    background: var(--bg-void);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    min-height: 100vh;
}

/* ─── Skip Link ───────────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--accent-violet);
    color: #000;
    padding: 8px 16px;
    z-index: 9999;
    text-decoration: none;
    font-family: var(--font-mono);
}
.skip-link:focus { top: 0; }

/* ─── Site Nav ────────────────────────────────────────────────────── */
.site-nav {
    background: var(--bg-deep);
    border-bottom: 1px solid var(--border-dim);
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.site-nav ul {
    list-style: none;
    display: flex;
    gap: 0;
    padding: 0;
}

.site-nav a {
    display: block;
    padding: 12px 16px;
    color: var(--text-secondary);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    transition: color var(--transition);
}
.site-nav a:hover, .site-nav a[aria-current="page"] {
    color: var(--accent-pale);
}

.theme-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-muted);
}
.theme-switcher select {
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border-dim);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.78rem;
}

/* ─── Screen Wrapper ──────────────────────────────────────────────── */
.locus-screen {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 0 40px;
}

/* ─── Screen Header ───────────────────────────────────────────────── */
.screen-header {
    background: linear-gradient(180deg, #08070f 0%, var(--bg-deep) 100%);
    border-bottom: 1px solid var(--border-dim);
    padding: 28px 32px 24px;
    position: relative;
    overflow: hidden;
}

.screen-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 50% 120%, rgba(100,80,160,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.screen-header h1 {
    font-family: var(--font-head);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    color: var(--accent-bone);
    letter-spacing: 0.12em;
    font-weight: 400;
    text-shadow: 0 0 30px rgba(140,122,176,0.3);
    line-height: 1.1;
}

.screen-header .subtitle {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--text-secondary);
    margin-top: 4px;
    font-size: 1rem;
    letter-spacing: 0.05em;
}

.header-tagline {
    font-family: var(--font-head);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--text-muted);
    letter-spacing: 0.03em;
    line-height: 1.5;
    max-width: 420px;
    text-align: right;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    transition: color var(--transition);
    margin-top: 8px;
}
.back-link:hover { color: var(--accent-pale); }

/* ─── Tab Navigation ──────────────────────────────────────────────── */
.tabs {
    background: var(--bg-deep);
    border-bottom: 1px solid var(--border-dim);
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0 16px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 16px var(--shadow-void);
}

.tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    padding: 14px 18px;
    text-transform: uppercase;
    transition: color var(--transition), border-color var(--transition);
    white-space: nowrap;
}
.tab-btn:hover { color: var(--accent-pale); }
.tab-btn.active {
    color: var(--accent-pale);
    border-bottom-color: var(--accent-violet);
}

/* ─── Panels ──────────────────────────────────────────────────────── */
.content-panels { padding: 0; }

.panel {
    display: none;
    padding: 28px 32px;
    animation: fadeIn 0.2s ease;
}
.panel.active { display: block; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.panel > h2 {
    font-family: var(--font-head);
    font-size: 1.5rem;
    color: var(--accent-bone);
    font-weight: 400;
    margin-bottom: 24px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-dim);
    letter-spacing: 0.08em;
}

/* ─── Rules Grid ──────────────────────────────────────────────────── */
.rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.rule-section {
    background: var(--bg-card);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-md);
    padding: 20px;
    transition: border-color var(--transition);
}
.rule-section:hover { border-color: var(--border-mid); }

.rule-section h3 {
    font-family: var(--font-head);
    font-size: 1.05rem;
    color: var(--accent-violet);
    font-weight: 400;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}

.rule-section p {
    color: var(--text-primary);
    font-size: 0.95rem;
    margin-bottom: 8px;
    line-height: 1.6;
}
.rule-section p:last-child { margin-bottom: 0; }

.rule-section ul, .rule-section ol {
    padding-left: 18px;
    margin: 8px 0;
}
.rule-section li {
    color: var(--text-primary);
    font-size: 0.93rem;
    margin-bottom: 5px;
    line-height: 1.5;
}

/* ─── Tables ──────────────────────────────────────────────────────── */
.ref-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    margin-top: 8px;
}

.ref-table th {
    background: rgba(100,80,150,0.12);
    color: var(--accent-pale);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-mid);
}

.ref-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-dim);
    color: var(--text-primary);
    vertical-align: top;
    line-height: 1.45;
}

.ref-table tr:last-child td { border-bottom: none; }
.ref-table tr:hover td { background: rgba(255,255,255,0.02); }

/* ─── Highlight Boxes ─────────────────────────────────────────────── */
.highlight-box {
    background: rgba(100,80,150,0.08);
    border: 1px solid var(--border-glow);
    border-left: 3px solid var(--accent-violet);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin: 12px 0;
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.55;
}

.highlight-box.warning {
    background: rgba(120,40,40,0.12);
    border-color: var(--red-mid);
    border-left-color: var(--red-bright);
}

.highlight-box.gold {
    background: rgba(200,170,112,0.07);
    border-color: rgba(200,170,112,0.3);
    border-left-color: var(--accent-gold);
}

/* ─── Attribute Block ─────────────────────────────────────────────── */
.attr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.attr-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    padding: 12px;
}

.attr-name {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-violet);
    margin-bottom: 4px;
}

.attr-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

/* ─── Vice/Virtue Grid ────────────────────────────────────────────── */
.vv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 10px;
}

@media (max-width: 600px) {
    .vv-grid { grid-template-columns: 1fr; }
}

.vv-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
}

.vv-card.vice {
    border-left: 3px solid var(--red-dim);
}

.vv-card.virtue {
    border-left: 3px solid #3a6045;
}

.vv-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.vv-card.vice .vv-label { color: #a06060; }
.vv-card.virtue .vv-label { color: #60a080; }

.vv-name {
    font-family: var(--font-head);
    font-size: 1rem;
    color: var(--accent-bone);
    font-weight: 400;
    margin-bottom: 4px;
}

.vv-suit {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 6px;
}

.vv-examples {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

/* ─── Stress Block ────────────────────────────────────────────────── */
.stress-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.stress-badge {
    flex: 1 1 120px;
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    padding: 12px;
    text-align: center;
}

.stress-badge .stress-name {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-pale);
    margin-bottom: 4px;
}

.stress-badge .stress-cost {
    font-size: 0.88rem;
    color: var(--text-secondary);
}

/* ─── Monster Builder ─────────────────────────────────────────────── */
.monster-builder {
    background: var(--bg-card);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 20px;
}

.monster-builder h3 {
    font-family: var(--font-head);
    font-size: 1.15rem;
    color: var(--accent-bone);
    font-weight: 400;
    margin-bottom: 16px;
    letter-spacing: 0.05em;
}

.mb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.mb-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mb-field label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-violet);
}

.mb-field input,
.mb-field select,
.mb-field textarea {
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.9rem;
    padding: 8px 10px;
    transition: border-color var(--transition);
    width: 100%;
}

.mb-field input:focus,
.mb-field select:focus,
.mb-field textarea:focus {
    outline: none;
    border-color: var(--border-glow);
}

.mb-field textarea { resize: vertical; min-height: 70px; }

.mb-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

/* ─── Buttons ─────────────────────────────────────────────────────── */
.btn {
    background: transparent;
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    padding: 8px 16px;
    text-transform: uppercase;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn:hover {
    background: var(--bg-hover);
    color: var(--accent-pale);
    border-color: var(--border-glow);
}

.btn-primary {
    background: rgba(100,80,150,0.2);
    border-color: var(--accent-violet);
    color: var(--accent-pale);
}
.btn-primary:hover {
    background: rgba(100,80,150,0.35);
}

.btn-danger {
    border-color: var(--red-dim);
    color: #a06060;
}
.btn-danger:hover {
    background: rgba(120,40,40,0.2);
    border-color: var(--red-mid);
    color: var(--red-bright);
}

/* ─── Monster Cards ───────────────────────────────────────────────── */
.monster-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.monster-card {
    background: var(--bg-card);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-md);
    padding: 18px;
    position: relative;
}

.monster-card .mc-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.monster-card .mc-name {
    font-family: var(--font-head);
    font-size: 1.05rem;
    color: var(--accent-bone);
    font-weight: 400;
    letter-spacing: 0.04em;
}

.monster-card .mc-source {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--text-muted);
    margin-top: 2px;
}

.monster-card .mc-attrs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 10px;
}

.mc-attr {
    background: var(--bg-panel);
    border-radius: var(--radius-sm);
    padding: 5px 8px;
    font-size: 0.82rem;
}
.mc-attr-key {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-violet);
    display: block;
    margin-bottom: 1px;
}
.mc-attr-val { color: var(--text-primary); }

.mc-dd {
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.mc-dd-bar {
    display: flex;
    gap: 3px;
    margin-top: 5px;
    flex-wrap: wrap;
}

.dd-seg {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    cursor: pointer;
    transition: background var(--transition);
}

.dd-seg.filled { background: var(--red-dim); border-color: var(--red-mid); }
.dd-seg.minor { background: #4a3020; }
.dd-seg.major { background: #5a2510; }
.dd-seg.grievous { background: var(--red-dim); }

.dd-group {
    display: flex;
    gap: 2px;
    margin-right: 4px;
}

/* ─── Character Tracker ───────────────────────────────────────────── */
.tracker-controls {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.char-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
}

.char-card {
    background: var(--bg-card);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-md);
    padding: 20px;
    position: relative;
}

.char-card .ch-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 8px;
}

.char-card .ch-name-input {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-mid);
    color: var(--accent-bone);
    font-family: var(--font-head);
    font-size: 1.1rem;
    padding: 2px 4px;
    width: 100%;
    letter-spacing: 0.04em;
    font-weight: 400;
}
.char-card .ch-name-input:focus { outline: none; border-bottom-color: var(--accent-violet); }
.char-card .ch-name-input::placeholder { color: var(--text-muted); }

.ch-attrs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 14px;
}

.ch-attr {
    text-align: center;
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    padding: 6px 4px;
}

.ch-attr-label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    display: block;
    margin-bottom: 3px;
}

.ch-attr input[type="number"] {
    background: transparent;
    border: none;
    color: var(--accent-pale);
    font-family: var(--font-mono);
    font-size: 1rem;
    text-align: center;
    width: 100%;
    padding: 0;
}
.ch-attr input[type="number"]:focus { outline: none; }

.ch-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.ch-row label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    min-width: 80px;
}

.ch-row input[type="text"],
.ch-row select {
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.88rem;
    padding: 5px 8px;
    flex: 1;
    min-width: 120px;
}
.ch-row input[type="text"]:focus,
.ch-row select:focus { outline: none; border-color: var(--border-glow); }

/* Willpower */
.wp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.wp-row label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    min-width: 80px;
}

.wp-display {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    color: var(--accent-pale);
    min-width: 28px;
    text-align: center;
}

.wp-btn {
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), color var(--transition);
}
.wp-btn:hover { background: var(--bg-hover); color: var(--accent-pale); }

/* Stress */
.stress-row-char {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.stress-pip {
    padding: 4px 10px;
    border: 1px solid var(--border-dim);
    border-radius: 12px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    color: var(--text-muted);
    background: transparent;
}

.stress-pip.active-uneasy {
    background: rgba(80,140,80,0.2);
    border-color: #508050;
    color: #80b880;
}
.stress-pip.active-tense {
    background: rgba(140,120,40,0.2);
    border-color: #8c7820;
    color: #c0a840;
}
.stress-pip.active-stressed {
    background: rgba(140,40,40,0.2);
    border-color: var(--red-dim);
    color: var(--red-bright);
}

/* Death's Door */
.dd-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.dd-tracker {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.dd-symbol-group {
    display: flex;
    gap: 3px;
    flex-direction: column;
    margin-right: 6px;
}

.dd-symbol-row {
    display: flex;
    gap: 3px;
}

.dd-pip {
    width: 13px;
    height: 13px;
    border-radius: 2px;
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    cursor: pointer;
    transition: background var(--transition);
}
.dd-pip.filled { background: #5a2020; border-color: #8a3030; }

/* Injuries */
.injury-list {
    list-style: none;
    padding: 0;
    margin: 6px 0;
}
.injury-item {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
    font-size: 0.85rem;
}
.injury-severity {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    padding: 2px 6px;
    border-radius: 10px;
    white-space: nowrap;
}
.sev-minor { background: rgba(80,100,40,0.3); color: #a0b860; border: 1px solid #608040; }
.sev-major { background: rgba(140,100,20,0.3); color: #c8a050; border: 1px solid #8c7020; }
.sev-grievous { background: rgba(120,30,30,0.3); color: #c06060; border: 1px solid #8c2020; }

/* ─── Dice Roller ─────────────────────────────────────────────────── */
.dice-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 700px) {
    .dice-area { grid-template-columns: 1fr; }
}

.dice-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-md);
    padding: 24px;
}

.dice-panel h3 {
    font-family: var(--font-head);
    font-size: 1.1rem;
    color: var(--accent-bone);
    font-weight: 400;
    margin-bottom: 18px;
    letter-spacing: 0.06em;
}

.dice-config {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dice-config label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-violet);
    display: block;
    margin-bottom: 5px;
}

.dice-config select,
.dice-config input[type="number"] {
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    padding: 8px 10px;
    width: 100%;
    transition: border-color var(--transition);
}
.dice-config select:focus,
.dice-config input:focus { outline: none; border-color: var(--border-glow); }

.roll-result {
    background: var(--bg-deep);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-top: 16px;
    text-align: center;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.roll-dice-display {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.die-face {
    width: 44px;
    height: 44px;
    background: var(--bg-card);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 1.2rem;
    color: var(--accent-bone);
    transition: background 0.3s;
}

.die-face.used-die {
    border-color: var(--accent-violet);
    background: rgba(100,80,150,0.2);
    color: var(--accent-pale);
}

.die-face.success-die {
    border-color: #3a7a40;
    background: rgba(40,100,50,0.2);
    color: #80cc80;
}

.die-face.fail-die {
    border-color: var(--red-dim);
    background: rgba(100,30,30,0.2);
    color: #c07070;
}

.roll-outcome {
    font-family: var(--font-head);
    font-size: 1.3rem;
    letter-spacing: 0.05em;
}
.outcome-success { color: #80cc80; }
.outcome-fail    { color: #c07070; }
.outcome-critical { color: var(--accent-gold); text-shadow: 0 0 12px rgba(200,170,112,0.5); }

.roll-detail {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.roll-history {
    margin-top: 14px;
    max-height: 220px;
    overflow-y: auto;
}

.roll-history h4 {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.history-entry {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-secondary);
    padding: 4px 0;
    border-bottom: 1px solid var(--border-dim);
    line-height: 1.45;
}
.history-entry:last-child { border-bottom: none; }

.history-success { color: #80cc80; }
.history-fail    { color: #c07070; }
.history-critical { color: var(--accent-gold); }

/* ─── Card Hand Tracker ───────────────────────────────────────────── */
.hand-tracker {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.hand-tracker label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    min-width: 80px;
}

.card-pips {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.card-pip {
    width: 22px;
    height: 30px;
    border: 1px solid var(--border-mid);
    border-radius: 3px;
    cursor: pointer;
    background: var(--bg-panel);
    transition: background var(--transition), border-color var(--transition);
    position: relative;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
}

.card-pip.haunt-card {
    background: rgba(120,30,30,0.35);
    border-color: var(--red-dim);
    color: var(--red-bright);
}

.card-pip.neutral-card {
    background: rgba(60,60,80,0.4);
    border-color: var(--border-mid);
    color: var(--text-muted);
}

.card-pip.virtue-card {
    background: rgba(40,100,50,0.3);
    border-color: #3a7a40;
    color: #80cc80;
}

/* ─── Director's Tools ────────────────────────────────────────────── */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

.tool-section {
    background: var(--bg-card);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-md);
    padding: 20px;
}

.tool-section h3 {
    font-family: var(--font-head);
    font-size: 1.05rem;
    color: var(--accent-bone);
    font-weight: 400;
    margin-bottom: 14px;
    letter-spacing: 0.05em;
}

.generator-result {
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    padding: 14px;
    margin-top: 10px;
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--accent-bone);
    min-height: 60px;
    line-height: 1.55;
}

/* ─── Notes Panel ─────────────────────────────────────────────────── */
.notes-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 800px) {
    .notes-container { grid-template-columns: 1fr; }
}

.notes-block {
    background: var(--bg-card);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-md);
    padding: 20px;
}

.notes-block h3 {
    font-family: var(--font-head);
    font-size: 1.05rem;
    color: var(--accent-bone);
    font-weight: 400;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}

.notes-textarea {
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.93rem;
    line-height: 1.6;
    padding: 12px;
    resize: vertical;
    width: 100%;
    min-height: 200px;
    transition: border-color var(--transition);
}
.notes-textarea:focus { outline: none; border-color: var(--border-glow); }

.notes-status {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 6px;
    text-align: right;
    letter-spacing: 0.04em;
}

/* ─── Layer Tracker ───────────────────────────────────────────────── */
.layer-display {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.layer-row {
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.layer-row.current-layer {
    border-color: var(--accent-violet);
    background: rgba(100,80,150,0.12);
}

.layer-num {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--accent-violet);
    min-width: 60px;
}

.layer-name {
    font-family: var(--font-head);
    font-size: 0.95rem;
    color: var(--accent-bone);
    font-weight: 400;
    flex: 1;
}

.layer-threshold {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* ─── Hand Average Calculator ─────────────────────────────────────── */
.hand-calc {
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    padding: 14px;
    margin-top: 10px;
}

.hand-calc-result {
    font-family: var(--font-mono);
    font-size: 0.88rem;
    color: var(--accent-pale);
    margin-top: 8px;
}

/* ─── Scrollbar ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-void); }
::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-glow); }

/* ─── Footer ──────────────────────────────────────────────────────── */
footer {
    border-top: 1px solid var(--border-dim);
    padding: 16px 32px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    background: var(--bg-deep);
}

/* ─── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .panel { padding: 20px 16px; }
    .rules-grid { grid-template-columns: 1fr; }
    .char-grid { grid-template-columns: 1fr; }
    .tools-grid { grid-template-columns: 1fr; }
    .dice-area { grid-template-columns: 1fr; }
    .ch-attrs-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 600px) {
    .screen-header { padding: 20px 16px; }
    .header-top { flex-direction: column; }
    .header-tagline { text-align: left; max-width: 100%; }
    .ch-attrs-grid { grid-template-columns: repeat(2, 1fr); }
    .vv-grid { grid-template-columns: 1fr; }
    .mb-grid { grid-template-columns: 1fr; }
    .tabs { padding: 0 8px; }
    .tab-btn { padding: 12px 10px; font-size: 0.7rem; }
}

/* ─── Utility ─────────────────────────────────────────────────────── */
.text-muted   { color: var(--text-muted); }
.text-accent  { color: var(--accent-pale); }
.text-gold    { color: var(--accent-gold); }
.font-mono    { font-family: var(--font-mono); }
.italic       { font-style: italic; }
.mt-8         { margin-top: 8px; }
.mt-12        { margin-top: 12px; }
strong, b     { color: var(--accent-pale); font-weight: 600; }
em            { color: var(--accent-bone); }
hr.divider    { border: none; border-top: 1px solid var(--border-dim); margin: 16px 0; }