/* Lexicon Heist — Game Styles */

:root {
    --bg-dark: #1a1a2e;
    --bg-card: #16213e;
    --bg-surface: #0f3460;
    --accent: #e94560;
    --accent-gold: #f5c518;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0b0;
    --text-muted: #666680;
    --additive-color: #4ecdc4;
    --multiplier-color: #ff6b6b;
    --final-color: #f5c518;
    --success: #2ecc71;
    --danger: #e74c3c;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg-dark);
    color: var(--text-primary);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
}

/* Menu */
.menu-screen {
    text-align: center;
    padding: 4rem 1rem;
}

.menu-screen h1 {
    font-size: 3rem;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

/* Buttons */
.btn-start, .btn-continue {
    padding: 0.75rem 2rem;
    font-size: 1.1rem;
    border: 2px solid var(--accent);
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-start:hover, .btn-continue:hover {
    background: var(--accent);
    color: #fff;
}

.act3-teaser {
    margin-top: 1.5rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
}

/* Round HUD */
.round-hud {
    background: var(--bg-card);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.hud-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.hud-row:last-child {
    margin-bottom: 0;
}

.hud-item {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.hud-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hud-value {
    font-size: 1.4rem;
    font-weight: 700;
}

.hud-separator {
    color: var(--text-muted);
}

.hud-target {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.hud-overkill .hud-value {
    color: var(--accent-gold);
}

.round-type {
    font-size: 0.75rem;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: 600;
}

.round-type-elite {
    background: var(--accent-gold);
    color: #000;
}

.round-type-boss {
    background: var(--accent);
    color: #fff;
}

.streak-style {
    color: var(--additive-color);
    font-weight: 600;
}

.streak-tier {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.streak-hint {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-style: italic;
    display: block;
}

.modifier-display {
    color: var(--accent);
    font-size: 0.9rem;
    font-style: italic;
}

.allin-display .hud-value {
    color: var(--multiplier-color);
}

.btn-redraw, .btn-panic {
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    border: 1px solid;
    transition: all 0.2s;
}

.btn-redraw {
    border-color: var(--additive-color);
    background: transparent;
    color: var(--additive-color);
}

.btn-redraw:hover:not(:disabled) {
    background: var(--additive-color);
    color: #000;
}

.btn-redraw:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-panic {
    border-color: var(--accent);
    background: transparent;
    color: var(--accent);
}

.btn-panic:hover {
    background: var(--accent);
    color: #fff;
}

/* Letter Tray */
.letter-tray {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 1.5rem 0;
    flex-wrap: wrap;
}

.tray-letter {
    width: 60px;
    height: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
    border: 2px solid var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    transition: all 0.15s;
}

.tray-letter:hover {
    border-color: var(--text-primary);
    transform: translateY(-2px);
}

.tray-letter.selected {
    border-color: var(--accent);
    background: #2a1a3e;
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(233, 69, 96, 0.3);
}

.tray-letter.locked {
    border-color: var(--accent-gold);
}

.tray-letter.blank-tile {
    border-style: dashed;
    border-color: var(--additive-color);
}

.letter-char {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.letter-value {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.lock-icon {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 0.6rem;
    color: var(--accent-gold);
}

/* Word Assembly */
.word-assembly {
    text-align: center;
    margin: 1rem 0;
}

.assembled-word-container {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 1rem;
    min-height: 2.5rem;
    margin-bottom: 0.5rem;
}

.assembled-word {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--text-primary);
}

.score-preview {
    font-size: 1.4rem;
    color: var(--accent-gold);
    font-weight: 600;
}

.streak-break-warning {
    color: var(--danger);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    animation: pulse 1s ease-in-out infinite;
}

.streak-forecast {
    display: block;
    color: var(--text-muted, #999);
    font-size: 0.7rem;
    font-weight: 400;
    margin-top: 0.15rem;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.style-hint {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-style: italic;
}

.word-message {
    color: var(--danger);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.word-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.btn-clear, .btn-submit, .btn-allin {
    padding: 0.5rem 1.2rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    border: 2px solid;
    transition: all 0.2s;
}

.btn-clear {
    border-color: var(--text-muted);
    background: transparent;
    color: var(--text-secondary);
}

.btn-submit {
    border-color: var(--success);
    background: transparent;
    color: var(--success);
}

.btn-submit:hover:not(:disabled) {
    background: var(--success);
    color: #fff;
}

.btn-allin {
    border-color: var(--multiplier-color);
    background: transparent;
    color: var(--multiplier-color);
}

.btn-allin:hover:not(:disabled) {
    background: var(--multiplier-color);
    color: #fff;
}

.btn-clear:disabled, .btn-submit:disabled, .btn-allin:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Score Breakdown */
.score-breakdown {
    background: var(--bg-card);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.breakdown-header {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--text-muted);
    margin-bottom: 0.5rem;
}

.breakdown-title {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

.breakdown-toggle {
    color: var(--text-muted);
}

.breakdown-line {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    font-size: 0.9rem;
}

.breakdown-line.additive span:last-child {
    color: var(--additive-color);
}

.breakdown-line.multiplier span:last-child {
    color: var(--multiplier-color);
}

.breakdown-line.subtotal {
    border-top: 1px solid var(--text-muted);
    padding-top: 0.5rem;
    margin-top: 0.25rem;
}

.breakdown-line.final {
    border-top: 1px solid var(--text-muted);
    padding-top: 0.5rem;
    margin-top: 0.25rem;
    font-weight: 700;
    font-size: 1.1rem;
}

.breakdown-line.final span:last-child {
    color: var(--final-color);
}

.breakdown-line.streak-break span:last-child {
    color: var(--danger);
}

.breakdown-line.allin span:last-child {
    color: var(--multiplier-color);
    font-weight: 700;
}

.breakdown-detail {
    display: flex;
    justify-content: space-between;
    padding: 0.15rem 0 0.15rem 1rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Relic Strip */
.relic-strip {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    min-height: 2rem;
}

.relic-item {
    padding: 0.3rem 0.6rem;
    background: var(--bg-surface);
    border: 1px solid var(--text-muted);
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: default;
    transition: all 0.2s;
}

.relic-item.triggered {
    border-color: var(--accent-gold);
    box-shadow: 0 0 8px rgba(245, 197, 24, 0.3);
}

.relic-item.contraband {
    border-color: var(--accent);
}

.relic-empty {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Word History */
.word-history {
    margin-top: 1.5rem;
}

.word-history h3 {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.history-entry {
    display: flex;
    gap: 1rem;
    padding: 0.25rem 0;
    font-size: 0.85rem;
}

.history-word {
    font-weight: 600;
    min-width: 100px;
}

.history-score {
    color: var(--accent-gold);
}

.history-style {
    color: var(--additive-color);
    font-size: 0.75rem;
}

/* Round End Actions */
.round-end-actions {
    text-align: center;
    margin: 1.5rem 0;
}

/* Run Summary Panel */
.run-summary-panel {
    text-align: center;
    padding: 2rem 1rem;
    max-width: 500px;
    margin: 0 auto;
}

.run-result {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.run-win {
    color: var(--accent);
}

.run-fail {
    color: #e74c3c;
}

.pb-callout {
    background: linear-gradient(90deg, #f1c40f, #e67e22);
    color: #1a1a2e;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: bold;
    font-size: 1.1rem;
    margin: 0.5rem auto;
    max-width: 300px;
}

.run-stats, .failure-diagnosis, .pb-display {
    background: var(--bg-card);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    text-align: left;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.stat-row:last-child {
    border-bottom: none;
}

.stat-label {
    color: var(--text-muted, #888);
}

.stat-value {
    font-weight: bold;
}

.failure-diagnosis {
    border-left: 3px solid #e74c3c;
}

.failure-diagnosis h3 {
    color: #e74c3c;
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
}

/* Word of the Run */
.word-of-run {
    background: var(--bg-card);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
    border: 1px solid var(--accent);
}

.word-of-run h3 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    color: var(--text-muted, #888);
}

.wotr-word {
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: var(--accent);
}

.wotr-score {
    font-size: 1.2rem;
    margin-top: 0.25rem;
}

.wotr-style {
    font-size: 0.85rem;
    color: var(--text-muted, #888);
    margin-top: 0.25rem;
}

/* Relics on summary */
.run-relics {
    margin: 1rem 0;
}

.run-relics h3 {
    font-size: 0.9rem;
    color: var(--text-muted, #888);
    margin: 0 0 0.5rem 0;
}

.relic-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
}

.relic-badge {
    background: var(--bg-card);
    border: 1px solid var(--border, #333);
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
}

/* Round history on summary */
.round-history {
    margin: 1rem 0;
    text-align: left;
}

.round-history h3 {
    font-size: 0.9rem;
    color: var(--text-muted, #888);
    margin: 0 0 0.5rem 0;
}

.round-row {
    display: flex;
    gap: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

.round-won {
    background: rgba(46, 204, 113, 0.1);
}

.round-lost {
    background: rgba(231, 76, 60, 0.1);
}

.round-num {
    font-weight: bold;
    min-width: 2rem;
}

.round-overkill {
    color: var(--accent);
    font-size: 0.8rem;
}

.run-end-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* Menu PB display */
.menu-pb {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin: 1rem 0;
    color: var(--text-muted, #888);
    font-size: 0.9rem;
}

/* Shop Screen */
.shop-screen {
    padding: 1.5rem 1rem;
    max-width: 700px;
    margin: 0 auto;
}

.shop-screen h2 {
    text-align: center;
    color: var(--accent-gold);
    margin-bottom: 0.5rem;
}

.shop-cash {
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent-gold);
    margin-bottom: 1rem;
}

.boss-preview {
    background: var(--accent);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.boss-icon {
    font-weight: 700;
    font-size: 0.75rem;
    background: #fff;
    color: var(--accent);
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    text-transform: uppercase;
}

.boss-name {
    font-weight: 700;
    color: #fff;
}

.boss-rule {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.85);
}

.modifier-preview {
    background: var(--bg-surface);
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    font-style: italic;
    color: var(--text-secondary);
}

.shop-section {
    background: var(--bg-card);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.shop-section h3 {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    margin: 0 0 0.75rem 0;
}

.shop-empty {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.shop-offer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--text-muted);
}

.shop-offer:last-child {
    margin-bottom: 0;
}

.relic-offer.rarity-common { border-color: var(--text-muted); }
.relic-offer.rarity-uncommon { border-color: var(--additive-color); }
.relic-offer.rarity-rare { border-color: var(--accent-gold); }
.relic-offer.rarity-legendary { border-color: var(--accent); }

.offer-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
}

.offer-name {
    font-weight: 600;
}

.offer-rarity {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.offer-effect {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.offer-count {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.synergy-spark {
    font-size: 0.8rem;
    color: var(--accent-gold);
    font-weight: 600;
}

.btn-buy {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--accent-gold);
    background: transparent;
    color: var(--accent-gold);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-buy:hover:not(:disabled) {
    background: var(--accent-gold);
    color: #000;
}

.btn-buy:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.bag-edit-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bag-edit-controls select {
    padding: 0.3rem;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--text-muted);
    border-radius: 3px;
    font-size: 0.85rem;
}

.shop-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.btn-reroll {
    padding: 0.5rem 1rem;
    border: 1px solid var(--additive-color);
    background: transparent;
    color: var(--additive-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-reroll:hover:not(:disabled) {
    background: var(--additive-color);
    color: #000;
}

.btn-reroll:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.reroll-exhausted {
    color: var(--text-muted);
    font-size: 0.85rem;
    align-self: center;
}

/* Node Map */
.node-map {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border-radius: 6px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.node {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    border: 1px solid var(--text-muted);
    min-width: 40px;
}

.node.current {
    border-color: var(--accent);
    background: rgba(233, 69, 96, 0.15);
    font-weight: 700;
}

.node.completed {
    opacity: 0.5;
    border-color: var(--success);
}

.node-standard { }
.node-elite .node-icon { color: var(--accent-gold); }
.node-boss .node-icon { color: var(--accent); }
.node-shop .node-icon { color: var(--accent-gold); }

.node-icon {
    font-size: 1rem;
}

.node-label {
    font-size: 0.65rem;
    color: var(--text-secondary);
}

.node-connector {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.node-boss-name {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--accent);
}

.node-boss-rule {
    font-size: 0.5rem;
    color: var(--text-muted);
    max-width: 8rem;
    text-align: center;
    line-height: 1.2;
}

.node-target {
    font-size: 0.55rem;
    color: var(--text-secondary);
}

.node-elite-badge {
    font-size: 0.5rem;
    font-weight: 700;
    color: var(--accent-gold);
    text-transform: uppercase;
}

/* Bag Fingerprint — Phase 4 §8 */

.bag-fingerprint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
}

.bag-fingerprint-toggle {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.15rem 0.5rem;
    font-size: 0.7rem;
    cursor: pointer;
    color: var(--text-secondary);
}

.bag-fingerprint-stats {
    display: flex;
    gap: 0.75rem;
}

.bag-stat {
    color: var(--text-secondary);
    font-size: 0.7rem;
}

/* Corrupted Relic Visual Distinction — Phase 4 Spec §11 */

.relic-offer.corrupted {
    border-left: 3px solid #a855f7;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), transparent);
}

.relic-offer.corrupted .offer-name::before {
    content: "\26A0 ";
    color: #a855f7;
}

.relic-item.corrupted {
    border: 1px solid #a855f7;
    background: rgba(168, 85, 247, 0.1);
}

.relic-item.corrupted .relic-name::before {
    content: "\26A0 ";
    color: #a855f7;
    font-size: 0.7rem;
}

/* Etymology Chain Indicator — Phase 4 Spec §10 */

.history-chain {
    font-size: 0.7rem;
    color: #22d3ee;
    font-style: italic;
    margin-left: 0.25rem;
}

.etymology-chain {
    color: #22d3ee;
}

/* Round screen focus */
.round-screen:focus {
    outline: none;
}

/* Responsive */
@media (max-width: 600px) {
    .tray-letter {
        width: 48px;
        height: 58px;
    }

    .letter-char {
        font-size: 1.2rem;
    }

    .assembled-word {
        font-size: 1.5rem;
    }

    .hud-row {
        gap: 0.75rem;
    }
}

/* ===== Pace Bar (Phase 2-10) ===== */
.pace-bar {
    margin: 0.5rem 0;
    padding: 0.5rem;
    border-radius: 6px;
    background: #1a1a2e;
}

.pace-bar-track {
    position: relative;
    height: 8px;
    background: #333;
    border-radius: 4px;
    overflow: hidden;
}

.pace-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease, background 0.3s ease;
}

.pace-bar-marker {
    position: absolute;
    left: 50%;
    top: -2px;
    width: 2px;
    height: 12px;
    background: rgba(255,255,255,0.4);
}

.pace-green .pace-bar-fill { background: #22c55e; }
.pace-amber .pace-bar-fill { background: #f59e0b; }
.pace-red .pace-bar-fill { background: #ef4444; }

.pace-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.pace-status {
    font-weight: bold;
    text-transform: uppercase;
}

.pace-green .pace-status { color: #22c55e; }
.pace-amber .pace-status { color: #f59e0b; }
.pace-red .pace-status { color: #ef4444; }

.pace-score { color: #aaa; }

/* ===== Celebration Popup (Phase 2-10) ===== */
.celebration-overlay {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    pointer-events: none;
    animation: overlayFade 2.5s ease-out forwards;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
}

.celebration-moment {
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    font-weight: bold;
    text-transform: uppercase;
    animation: celebrationPop 1.5s ease-out forwards;
    white-space: nowrap;
}

.celebration-tier1 {
    background: rgba(245, 197, 24, 0.9);
    color: #1a1a2e;
    font-size: 1rem;
}

.celebration-tier2 {
    background: rgba(233, 69, 96, 0.9);
    color: #fff;
    font-size: 1.1rem;
}

.celebration-tier3 {
    background: rgba(138, 43, 226, 0.9);
    color: #fff;
    font-size: 1.3rem;
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.5);
}

@keyframes celebrationPop {
    0% { opacity: 0; transform: scale(0.5) translateY(20px); }
    20% { opacity: 1; transform: scale(1.1) translateY(0); }
    80% { opacity: 1; transform: scale(1) translateY(-10px); }
    100% { opacity: 0; transform: scale(0.9) translateY(-30px); }
}

@keyframes overlayFade {
    0% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

/* ===== Event Modal (Phase 2-10) ===== */
.event-modal {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.event-card {
    background: #16213e;
    border: 2px solid #e94560;
    border-radius: 12px;
    padding: 2rem;
    max-width: 500px;
    width: 100%;
}

.event-title {
    color: #e94560;
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
}

.event-description {
    color: #ccc;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.event-prompt {
    color: #f5c518;
    margin-bottom: 0.75rem;
}

.event-narrative {
    color: var(--accent-gold, #d4a843);
    font-style: italic;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.event-warning {
    color: #ef4444;
    font-weight: bold;
    margin-bottom: 1rem;
}

.contraband-reckoning {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--accent-gold, #d4a843);
}

.reckoning-text {
    color: var(--accent-gold, #d4a843);
    font-style: italic;
    font-size: 0.95rem;
}

.event-letter-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.event-letter-btn {
    width: 40px;
    height: 40px;
    background: #1a1a2e;
    border: 1px solid #555;
    border-radius: 4px;
    color: #fff;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
}

.event-letter-btn.selected {
    border-color: #e94560;
    background: #3a1a2e;
    box-shadow: 0 0 8px rgba(233, 69, 96, 0.4);
}

.event-relic-offer {
    background: #1a1a2e;
    border: 1px solid #f5c518;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.event-relic-offer .relic-name {
    display: block;
    color: #f5c518;
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.event-relic-offer .relic-effect {
    color: #aaa;
    font-size: 0.9rem;
}

.event-contraband-offer {
    background: #1a1a2e;
    border: 2px solid #555;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: border-color 0.2s;
}

.event-contraband-offer.selected {
    border-color: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

.event-contraband-offer .relic-name.contraband {
    color: #ef4444;
}

.relic-downside {
    display: block;
    color: #ef4444;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.event-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.btn-event-accept {
    flex: 1;
    padding: 0.75rem;
    background: #22c55e;
    color: #1a1a2e;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
}

.btn-event-accept:disabled {
    background: #555;
    color: #888;
    cursor: not-allowed;
}

.btn-event-accept.contraband {
    background: #ef4444;
    color: #fff;
}

.btn-event-decline {
    flex: 1;
    padding: 0.75rem;
    background: transparent;
    color: #aaa;
    border: 1px solid #555;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
}

.btn-event-decline:hover {
    border-color: #aaa;
    color: #fff;
}

/* ===== Loadout Selector (Phase 2-10) ===== */
.loadout-selector {
    display: flex;
    gap: 1rem;
    margin: 1.5rem 0;
    justify-content: center;
    flex-wrap: wrap;
}

.loadout-card {
    background: #16213e;
    border: 2px solid #555;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    cursor: pointer;
    transition: border-color 0.2s, opacity 0.2s;
    min-width: 200px;
    text-align: center;
}

.loadout-card.selected {
    border-color: #e94560;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.3);
}

.loadout-card.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.loadout-name {
    color: #fff;
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
}

.loadout-desc {
    color: #aaa;
    font-size: 0.85rem;
    margin: 0 0 0.5rem 0;
}

.loadout-lock {
    color: #ef4444;
    font-size: 0.8rem;
    font-style: italic;
}

.loadout-relics {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.loadout-relic-badge {
    background: #0f3460;
    color: #f5c518;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

/* ===== Run Thesis (Phase 2-10) ===== */
.run-thesis {
    margin: 1.5rem 0;
    text-align: center;
}

.run-thesis h3 {
    color: #f5c518;
    margin-bottom: 0.75rem;
}

.thesis-prompt {
    color: #aaa;
    margin-bottom: 0.75rem;
}

.thesis-candidates {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}

.thesis-option {
    background: #16213e;
    border: 1px solid #555;
    border-radius: 6px;
    color: #fff;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    font-size: 1rem;
    min-width: 250px;
    transition: border-color 0.2s;
}

.thesis-option:hover {
    border-color: #f5c518;
    color: #f5c518;
}

.thesis-selected {
    margin-top: 0.5rem;
}

.thesis-label {
    color: #f5c518;
    font-size: 1.3rem;
    font-weight: bold;
    font-style: italic;
}

/* ===== Difficulty Selector (Phase 3) ===== */
.difficulty-selector {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin: 1rem 0 1.5rem;
}

.difficulty-btn {
    padding: 0.5rem 1.2rem;
    border: 2px solid var(--text-muted);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.2s;
    position: relative;
}

.difficulty-btn:hover:not(:disabled) {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

.difficulty-btn.selected {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.25);
}

.difficulty-btn.locked {
    opacity: 0.4;
    cursor: not-allowed;
}

.difficulty-btn .lock-icon {
    position: static;
    font-size: 0.8rem;
    margin-left: 0.25rem;
}

/* ===== Boss Dialogue (Phase 3) ===== */
.boss-dialogue,
.boss-adaptation {
    background: rgba(233, 69, 96, 0.08);
    border-left: 3px solid var(--accent);
    border-radius: 0 6px 6px 0;
    padding: 0.5rem 0.75rem;
}

.boss-adaptation {
    border-left-color: var(--accent-gold);
    background: rgba(245, 197, 24, 0.08);
}

.boss-quote {
    font-style: italic;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* ===== Run Quirks (Phase 3) ===== */
.run-quirks {
    margin: 1rem 0;
}

.run-quirks h3 {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0 0 0.5rem 0;
}

.quirk-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.quirk-badge {
    padding: 0.3rem 0.7rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--text-muted);
    background: var(--bg-surface);
}

.quirk-gambler {
    border-color: var(--multiplier-color);
    color: var(--multiplier-color);
}

.quirk-perfectionist {
    border-color: var(--success);
    color: var(--success);
}

.quirk-stylechameleon {
    border-color: var(--additive-color);
    color: var(--additive-color);
}

.quirk-minimalist {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

.quirk-novelist {
    border-color: #a78bfa;
    color: #a78bfa;
}

/* ===== Expanded PB Updates (Phase 3) ===== */
.expanded-pb-updates {
    margin: 0.75rem 0;
}

.expanded-pb-updates .pb-callout {
    font-size: 0.9rem;
    padding: 0.35rem 0.75rem;
    margin: 0.3rem auto;
    max-width: 280px;
}

/* ===== Relic Incubation Panel ===== */
.relic-incubation {
    margin: 1rem 0;
    text-align: center;
}

.relic-incubation-toggle {
    background: transparent;
    border: 1px solid var(--border-color, #444);
    color: var(--text-muted, #888);
    padding: 0.4rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}

.relic-incubation-toggle:hover {
    color: var(--accent-gold, #f0c040);
    border-color: var(--accent-gold, #f0c040);
}

.relic-incubation-list {
    max-width: 420px;
    margin: 0.75rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.incubation-row {
    background: var(--surface, #1a1a2e);
    border: 1px solid var(--border-color, #444);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.incubation-row.unlocked {
    border-color: var(--accent-gold, #f0c040);
}

.incubation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3rem;
}

.incubation-relic {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary, #eee);
}

.incubation-row.unlocked .incubation-relic {
    color: var(--accent-gold, #f0c040);
}

.incubation-fraction {
    font-size: 0.8rem;
    color: var(--text-muted, #888);
}

.incubation-row.unlocked .incubation-fraction {
    color: var(--accent-gold, #f0c040);
    font-weight: 700;
}

.incubation-bar-track {
    height: 6px;
    background: var(--bg-darker, #111);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.25rem;
}

.incubation-bar-fill {
    height: 100%;
    background: var(--accent, #4a9eff);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.incubation-row.unlocked .incubation-bar-fill {
    background: var(--accent-gold, #f0c040);
}

.incubation-metric {
    font-size: 0.75rem;
    color: var(--text-muted, #888);
}

.incubation-effect {
    font-size: 0.75rem;
    color: var(--accent, #4a9eff);
    margin-top: 0.2rem;
    font-style: italic;
}

/* ===== Difficulty Badge (Phase 3) ===== */
.difficulty-badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--accent);
    color: #fff;
    margin: 0.75rem 0;
}

/* === Phase 5 UI Components === */

/* Nemesis Status Badge */
.nemesis-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--danger);
    margin: 0.5rem 0;
}
.nemesis-badge.nemesis-none { border-color: var(--text-muted); }
.nemesis-badge.nemesis-defeated { border-color: var(--accent-gold); }
.nemesis-label { font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted); }
.nemesis-name { font-weight: 700; color: var(--danger); }
.nemesis-none .nemesis-name { color: var(--text-muted); }
.nemesis-losses { font-size: 0.85rem; color: var(--text-secondary); }
.nemesis-badge-icon { color: var(--accent-gold); font-size: 1.2rem; }

/* Weekly Challenge Panel */
.weekly-challenge-panel {
    background: var(--bg-card);
    border: 1px solid var(--bg-surface);
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 0.75rem 0;
}
.weekly-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.weekly-header h3 { margin: 0; font-size: 1rem; }
.weekly-timer { font-size: 0.85rem; color: var(--text-secondary); }
.weekly-modifier { margin-bottom: 0.5rem; }
.weekly-modifier-name { font-weight: 700; color: var(--accent); display: block; }
.weekly-modifier-effect { font-size: 0.85rem; color: var(--text-secondary); }
.weekly-pb { display: flex; justify-content: space-between; margin-bottom: 0.5rem; }
.weekly-loadouts { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
.btn-weekly {
    width: 100%;
    padding: 0.5rem;
    border: none;
    border-radius: 0.25rem;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}
.btn-weekly:disabled { background: var(--text-muted); cursor: not-allowed; }

/* Synergy Encyclopedia */
.synergy-encyclopedia { margin: 0.75rem 0; }
.synergy-encyclopedia-toggle {
    width: 100%;
    padding: 0.5rem 1rem;
    border: 1px solid var(--bg-surface);
    border-radius: 0.5rem;
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}
.synergy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.synergy-card {
    background: var(--bg-card);
    border: 1px solid var(--bg-surface);
    border-radius: 0.375rem;
    padding: 0.5rem;
}
.synergy-card.discovered { border-color: var(--accent-gold); }
.synergy-card.locked { opacity: 0.6; }
.synergy-name { font-weight: 700; display: block; margin-bottom: 0.25rem; }
.synergy-relics { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.25rem; }
.synergy-relic-badge { font-size: 0.75rem; background: var(--bg-surface); padding: 0.125rem 0.375rem; border-radius: 0.25rem; }
.synergy-effect { font-size: 0.8rem; color: var(--text-secondary); }
.synergy-type { font-size: 0.8rem; color: var(--text-muted); }

/* Descent Selector */
.descent-selector { margin: 0.75rem 0; }
.descent-selector h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.descent-depths { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.descent-depth-btn {
    flex: 1;
    min-width: 100px;
    padding: 0.5rem;
    border: 1px solid var(--bg-surface);
    border-radius: 0.375rem;
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    text-align: center;
}
.descent-depth-btn.selected { border-color: var(--accent); background: var(--bg-surface); }
.depth-label { display: block; font-weight: 700; }
.depth-corrupted { display: block; font-size: 0.8rem; color: var(--danger); }
.depth-pb { display: block; font-size: 0.8rem; color: var(--accent-gold); }
.descent-cancel-btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--text-muted);
    border-radius: 0.375rem;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}
.descent-locked { font-size: 0.85rem; color: var(--text-muted); margin: 0.5rem 0; }

/* Mutation Toggles */
.mutation-toggles { margin: 0.75rem 0; }
.mutation-toggles h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.mutation-row {
    background: var(--bg-card);
    border: 1px solid var(--bg-surface);
    border-radius: 0.375rem;
    padding: 0.5rem;
    margin-bottom: 0.375rem;
}
.mutation-row.locked { opacity: 0.6; }
.mutation-header { display: flex; justify-content: space-between; align-items: center; }
.mutation-relic { font-weight: 700; }
.mutation-toggle { display: flex; align-items: center; gap: 0.375rem; cursor: pointer; }
.mutation-toggle input[type="checkbox"] { cursor: pointer; }
.mutation-progress { font-size: 0.85rem; color: var(--text-muted); }
.mutation-details { display: flex; gap: 1rem; font-size: 0.8rem; margin-top: 0.25rem; }
.mutation-upside { color: var(--success); }
.mutation-downside { color: var(--danger); }

/* Momentum Badge */
.momentum-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    font-weight: 700;
    text-transform: uppercase;
}
.momentum-tier-1 { background: rgba(78, 205, 196, 0.2); color: var(--additive-color); border: 1px solid var(--additive-color); }
.momentum-tier-2 { background: rgba(245, 197, 24, 0.2); color: var(--accent-gold); border: 1px solid var(--accent-gold); }
.momentum-tier-3 { background: rgba(233, 69, 96, 0.2); color: var(--accent); border: 1px solid var(--accent); }
.momentum-label { font-size: 0.75rem; }
.momentum-streak { font-size: 1rem; }

/* Rivalry Dialogue */
.rivalry-dialogue { border-left: 3px solid var(--danger); }

/* Thesis Display */
.thesis-display { font-style: italic; }
.thesis-quote { color: var(--text-secondary); font-size: 0.9rem; }


/* ===== Direction B — Editorial Heist reconstruction ===== */
:root {
    --editorial-ink-950: #090b12;
    --editorial-ink-900: #10141f;
    --editorial-ink-800: #171d2b;
    --editorial-paper-100: #f2e6c8;
    --editorial-paper-200: #ead9ae;
    --editorial-paper-300: #c9b783;
    --editorial-redline-500: #ff3d5a;
    --editorial-gold-500: #f5c15d;
    --editorial-cyan-400: #39d3c7;
    --editorial-green-500: #41d17d;
    --editorial-purple-500: #a66cff;
    --editorial-shadow-card: 0 18px 48px rgba(0, 0, 0, 0.34);
    --editorial-shadow-redline: 0 0 24px rgba(255, 61, 90, 0.25);
    --editorial-shadow-gold: 0 0 28px rgba(245, 193, 93, 0.22);
    --editorial-paper-texture:
        linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 24%),
        radial-gradient(circle at 16% 12%, rgba(255,255,255,0.10), transparent 26%),
        linear-gradient(160deg, rgba(242,230,200,0.95), rgba(201,183,131,0.92));
    --bg-dark: var(--editorial-ink-950);
    --bg-card: var(--editorial-ink-800);
    --bg-surface: var(--editorial-ink-900);
    --accent: var(--editorial-redline-500);
    --accent-gold: var(--editorial-gold-500);
    --text-primary: #f4ead2;
    --text-secondary: #d4c6a8;
    --text-muted: #9e9178;
    --additive-color: var(--editorial-cyan-400);
    --multiplier-color: var(--editorial-purple-500);
    --final-color: var(--editorial-gold-500);
    --success: var(--editorial-green-500);
    --danger: var(--editorial-redline-500);
}

html, body {
    background:
        radial-gradient(circle at top, rgba(42, 23, 32, 0.96), transparent 28%),
        radial-gradient(circle at 18% 0, rgba(90, 52, 35, 0.20), transparent 24%),
        linear-gradient(180deg, #0b0d13 0%, #090b12 100%);
    color: var(--text-primary);
    font-family: Inter, 'Segoe UI', system-ui, -apple-system, sans-serif;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.015) 0, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 100%),
        linear-gradient(180deg, rgba(255,255,255,0.012) 0, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 100%);
    background-size: 28px 28px;
    opacity: 0.15;
}

.game-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.menu-screen,
.round-screen {
    position: relative;
}

.menu-screen {
    text-align: left;
    padding: 2rem 0 3rem;
}

.menu-hero {
    max-width: 48rem;
    margin: 0 auto 1.5rem;
    text-align: center;
}

.menu-kicker {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    margin-bottom: 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 61, 90, 0.35);
    background: rgba(255, 61, 90, 0.10);
    color: var(--editorial-redline-500);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.menu-screen h1 {
    font-family: Georgia, 'Iowan Old Style', ui-serif, serif;
    font-size: clamp(3rem, 5vw, 4.3rem);
    color: var(--editorial-paper-100);
    margin: 0;
    text-shadow: 0 2px 24px rgba(0,0,0,0.34);
}

.menu-subtitle {
    max-width: 42rem;
    margin: 0.85rem auto 0;
    color: var(--text-secondary);
    font-size: 1.02rem;
    line-height: 1.6;
}

.menu-pb,
.loadout-card,
.round-hud,
.score-breakdown,
.word-history,
.node-map,
.shop-section,
.run-stats,
.failure-diagnosis,
.pb-display,
.word-of-run {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)), var(--bg-card);
    border: 1px solid rgba(201, 183, 131, 0.18);
    box-shadow: var(--editorial-shadow-card);
}

.menu-pb {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    max-width: 56rem;
    margin: 0 auto 1rem;
    padding: 0.9rem 1rem;
    border-radius: 18px;
    color: var(--text-secondary);
}

.menu-pb span {
    display: block;
    padding: 0.55rem 0.7rem;
    border-radius: 12px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(201,183,131,0.10);
}

.loadout-selector,
.difficulty-selector,
.relic-incubation,
.menu-primary-action {
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
}

.loadout-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)), var(--bg-card);
    border: 1px solid rgba(201,183,131,0.22);
    border-radius: 18px;
    min-width: 250px;
    text-align: left;
}

.loadout-card.selected {
    border-color: rgba(255, 61, 90, 0.68);
    box-shadow: var(--editorial-shadow-redline);
}

.loadout-name {
    font-family: Georgia, 'Iowan Old Style', ui-serif, serif;
    color: var(--editorial-paper-100);
    font-size: 1.3rem;
}

.loadout-desc {
    color: var(--text-secondary);
    line-height: 1.5;
}

.loadout-relic-badge,
.difficulty-btn,
.btn-start,
.btn-continue,
.btn-redraw,
.btn-panic,
.btn-clear,
.btn-submit,
.btn-allin,
.btn-buy,
.btn-reroll {
    border-radius: 12px;
    font-weight: 700;
}

.loadout-relic-badge {
    background: rgba(245,193,93,0.12);
    border: 1px solid rgba(245,193,93,0.28);
    color: var(--editorial-gold-500);
}

.difficulty-selector {
    flex-wrap: wrap;
}

.difficulty-btn {
    border-color: rgba(201,183,131,0.28);
    color: var(--text-secondary);
    background: rgba(255,255,255,0.02);
}

.difficulty-btn.selected {
    border-color: rgba(255, 61, 90, 0.7);
    color: var(--editorial-paper-100);
    background: rgba(255, 61, 90, 0.12);
    box-shadow: var(--editorial-shadow-redline);
}

.menu-primary-action {
    margin-top: 1.5rem;
    text-align: center;
}

.menu-action-note {
    max-width: 40rem;
    margin: 0 auto 0.9rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.btn-start,
.btn-continue {
    padding: 0.9rem 2rem;
    border-color: rgba(255, 61, 90, 0.58);
    background: linear-gradient(180deg, rgba(255,61,90,0.14), rgba(255,61,90,0.04));
    color: var(--editorial-paper-100);
    box-shadow: var(--editorial-shadow-redline);
}

.btn-start:hover,
.btn-continue:hover,
.btn-start:focus-visible,
.btn-continue:focus-visible {
    background: linear-gradient(180deg, rgba(255,61,90,0.26), rgba(255,61,90,0.10));
    color: #fff;
    transform: translateY(-1px);
}

button:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(245, 193, 93, 0.58);
    outline-offset: 3px;
}

.round-screen {
    padding-bottom: 2rem;
}

.round-hud {
    border-radius: 20px;
    padding: 1.1rem 1.2rem;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
        linear-gradient(145deg, rgba(23,29,43,0.96), rgba(16,20,31,0.96));
}

.hud-label {
    color: var(--text-muted);
    letter-spacing: 0.14em;
}

.hud-value,
.hud-target {
    font-family: ui-monospace, 'Cascadia Code', 'SF Mono', monospace;
}

.round-type,
.hud-overkill,
.allin-display {
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(201,183,131,0.2);
    background: rgba(255,255,255,0.03);
}

.streak-display {
    display: grid;
    gap: 0.22rem;
    padding: 0.85rem 1rem;
    min-width: min(100%, 30rem);
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(201,183,131,0.2);
}

.streak-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.streak-style {
    font-family: Georgia, 'Iowan Old Style', ui-serif, serif;
    font-size: 1.35rem;
    color: var(--editorial-paper-100);
}

.streak-tier {
    color: var(--text-secondary);
}

.streak-hint {
    color: var(--text-muted);
}

.streak-pips {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.2rem;
}

.streak-pip {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(201,183,131,0.24);
    background: rgba(255,255,255,0.04);
}

.streak-pip.filled {
    background: currentColor;
    box-shadow: 0 0 14px currentColor;
    border-color: currentColor;
}

.streak-clean-copy { color: #d8e9ff; }
.streak-speed-typist { color: var(--editorial-cyan-400); }
.streak-heavy-metal { color: #ffb000; }
.streak-longform { color: var(--editorial-purple-500); }
.streak-sticky-endings { color: var(--editorial-green-500); }

.letter-tray {
    gap: 0.75rem;
}

.tray-letter {
    width: 72px;
    height: 88px;
    border-radius: 12px;
    border: 2px solid #5d4c2e;
    background: transparent;
    color: #19130b;
    box-shadow: var(--editorial-shadow-card);
    overflow: hidden;
}

.letter-face {
    position: absolute;
    inset: 0;
    background: var(--editorial-paper-texture);
    opacity: 1;
}

.tray-letter:hover {
    border-color: var(--editorial-paper-100);
    transform: translateY(-3px);
}

.tray-letter.selected {
    border-color: var(--editorial-redline-500);
    background: transparent;
    box-shadow: var(--editorial-shadow-redline);
}

.tray-letter.selected::after {
    content: 'STAMPED';
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%) rotate(-9deg);
    font-size: 0.52rem;
    letter-spacing: 0.14em;
    color: rgba(255, 61, 90, 0.95);
    border: 1px solid rgba(255, 61, 90, 0.8);
    border-radius: 999px;
    padding: 0.05rem 0.28rem;
    background: rgba(255, 241, 244, 0.65);
}

.tray-letter.locked {
    border-color: var(--editorial-gold-500);
    box-shadow: var(--editorial-shadow-gold);
}

.tray-letter.blank-tile {
    border-style: dashed;
}

.letter-char,
.letter-value,
.lock-icon {
    position: relative;
    z-index: 1;
}

.letter-char {
    font-family: Georgia, 'Iowan Old Style', ui-serif, serif;
    font-size: 2rem;
}

.letter-value {
    color: #4f432c;
    font-weight: 700;
}

.lock-icon {
    top: 6px;
    right: 7px;
    color: #7e5f1b;
    font-weight: 800;
}

.word-assembly {
    margin: 1.25rem 0;
}

.assembled-word-container {
    align-items: stretch;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.assembled-word-manuscript,
.score-preview-stack {
    display: grid;
    gap: 0.25rem;
    padding: 0.85rem 1rem;
    border-radius: 16px;
    border: 1px solid rgba(201,183,131,0.22);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)), rgba(23,29,43,0.92);
    box-shadow: var(--editorial-shadow-card);
}

.assembled-word-label,
.score-preview-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-muted);
}

.assembled-word {
    font-family: Georgia, 'Iowan Old Style', ui-serif, serif;
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--editorial-paper-100);
}

.score-preview {
    font-family: ui-monospace, 'Cascadia Code', 'SF Mono', monospace;
    font-size: 1.8rem;
    color: var(--editorial-gold-500);
}

.word-message {
    color: var(--editorial-redline-500);
}

.word-actions {
    align-items: flex-start;
    flex-wrap: wrap;
}

.btn-clear,
.btn-submit,
.btn-allin,
.btn-redraw,
.btn-panic,
.btn-buy,
.btn-reroll {
    padding: 0.7rem 1.1rem;
    background: rgba(255,255,255,0.02);
}

.btn-clear {
    border-color: rgba(201,183,131,0.3);
    color: var(--text-secondary);
}

.btn-submit {
    border-color: rgba(65,209,125,0.45);
    color: var(--editorial-green-500);
}

.btn-submit:hover:not(:disabled),
.btn-submit:focus-visible {
    background: rgba(65,209,125,0.16);
    color: #f7fff8;
}

.btn-allin {
    border-color: rgba(166,108,255,0.45);
    color: var(--editorial-paper-100);
    background: linear-gradient(180deg, rgba(166,108,255,0.16), rgba(166,108,255,0.06));
}

.btn-allin:hover:not(:disabled),
.btn-allin:focus-visible {
    background: linear-gradient(180deg, rgba(166,108,255,0.26), rgba(166,108,255,0.12));
    color: #fff;
}

.allin-action {
    position: relative;
    display: grid;
    gap: 0.45rem;
    justify-items: center;
}

.allin-threshold-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
    background: rgba(245,193,93,0.12);
    border: 1px solid rgba(245,193,93,0.3);
    color: var(--editorial-gold-500);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.allin-preview {
    display: grid;
    gap: 0.25rem;
    min-width: 14rem;
    padding: 0.8rem 0.9rem;
    border-radius: 14px;
    border: 1px solid rgba(166,108,255,0.32);
    background: linear-gradient(180deg, rgba(166,108,255,0.12), rgba(23,29,43,0.98));
    color: var(--editorial-paper-100);
    box-shadow: var(--editorial-shadow-card);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.allin-action:hover .allin-preview,
.allin-action:focus-within .allin-preview {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.allin-preview-score,
.allin-preview-win,
.allin-preview-loss {
    font-size: 0.82rem;
}

.allin-preview-score {
    color: var(--editorial-gold-500);
    font-weight: 700;
}

.word-history {
    padding: 1rem 1.2rem;
    border-radius: 18px;
}

.history-entry {
    align-items: baseline;
    border-bottom: 1px solid rgba(201,183,131,0.08);
    padding: 0.45rem 0;
}

.history-entry:last-child {
    border-bottom: none;
}

.history-word {
    color: var(--editorial-paper-100);
}

@media (max-width: 720px) {
    .game-container {
        padding: 1rem 0.75rem 2rem;
    }

    .menu-screen {
        padding-top: 1.25rem;
    }

    .menu-pb {
        grid-template-columns: 1fr;
    }

    .tray-letter {
        width: 58px;
        height: 72px;
    }

    .assembled-word-container {
        justify-content: center;
    }

    .word-actions {
        justify-content: center;
    }
}


/* ===== Direction B polish follow-up ===== */
.round-screen {
    background:
        radial-gradient(circle at top, rgba(242,230,200,0.06), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
    border-radius: 24px;
    padding: 1rem;
}

.node-map {
    border-radius: 18px;
    padding: 0.85rem 1rem;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
        rgba(16,20,31,0.96);
}

.node {
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
    border-color: rgba(201,183,131,0.18);
}

.node.current {
    border-color: rgba(255,61,90,0.6);
    box-shadow: var(--editorial-shadow-redline);
}

.node.shop,
.node.event,
.node.boss,
.node.elite {
    background: rgba(255,255,255,0.035);
}

.pace-bar {
    padding: 0.7rem 0.9rem;
    border-radius: 16px;
    border: 1px solid rgba(201,183,131,0.16);
    background: rgba(16,20,31,0.92);
    box-shadow: var(--editorial-shadow-card);
}

.pace-bar-track {
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
}

.pace-bar-marker {
    background: rgba(242,230,200,0.8);
}

.pace-bar-label {
    color: var(--text-secondary);
}

.relic-strip {
    padding: 0.6rem 0.7rem;
    border-radius: 16px;
    background: rgba(16,20,31,0.9);
    border: 1px solid rgba(201,183,131,0.16);
}

.relic-item {
    border-radius: 999px;
    border-color: rgba(201,183,131,0.18);
    background: rgba(255,255,255,0.025);
    color: var(--editorial-paper-100);
}

.relic-item.triggered {
    border-color: rgba(245,193,93,0.55);
    box-shadow: var(--editorial-shadow-gold);
}

.bag-fingerprint {
    margin-top: 1rem;
}

.bag-fingerprint-toggle,
.bag-fingerprint-stats {
    border-radius: 14px;
    border: 1px solid rgba(201,183,131,0.16);
    background: rgba(16,20,31,0.92);
    box-shadow: var(--editorial-shadow-card);
}

.bag-fingerprint-toggle {
    color: var(--text-secondary);
}

.bag-fingerprint-stats {
    padding: 0.7rem 0.8rem;
    color: var(--text-secondary);
}

.weekly-challenge-panel,
.mutation-toggles,
.relic-incubation-list,
.synergy-encyclopedia,
.nemesis-badge {
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
}

.weekly-challenge-panel,
.mutation-row,
.nemesis-badge,
.relic-incubation-toggle,
.synergy-encyclopedia-toggle {
    border-radius: 16px;
    border: 1px solid rgba(201,183,131,0.18);
    box-shadow: var(--editorial-shadow-card);
}

.weekly-challenge-panel,
.mutation-row,
.nemesis-badge {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)), rgba(23,29,43,0.94);
}

.btn-weekly {
    border-radius: 12px;
    border: 1px solid rgba(255,61,90,0.4);
    background: linear-gradient(180deg, rgba(255,61,90,0.16), rgba(255,61,90,0.06));
}

@media (max-width: 720px) {
    .round-screen {
        padding: 0.75rem;
    }
}

/* ===== Direction B round parity pass ===== */
.round-hud,
.score-breakdown,
.word-history,
.relic-strip,
.bag-fingerprint-toggle,
.bag-fingerprint-stats,
.pace-bar,
.node-map,
.assembled-word-manuscript,
.score-preview-stack {
    position: relative;
    overflow: hidden;
}

.round-hud::before,
.score-breakdown::before,
.word-history::before,
.node-map::before,
.pace-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(242,230,200,0.06), transparent 18%),
        repeating-linear-gradient(180deg, transparent 0 28px, rgba(242,230,200,0.04) 28px 29px);
    opacity: 0.55;
}

.round-hud::after {
    content: 'ACTIVE FILE';
    position: absolute;
    top: 0.9rem;
    right: 1rem;
    padding: 0.16rem 0.42rem;
    border: 1px solid rgba(255,61,90,0.68);
    border-radius: 4px;
    color: rgba(255, 94, 116, 0.92);
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transform: rotate(-5deg);
    background: rgba(255, 244, 246, 0.10);
    box-shadow: var(--editorial-shadow-redline);
}

.round-hud {
    padding-top: 2.2rem;
    border: 1px solid rgba(201,183,131,0.24);
}

.hud-row {
    position: relative;
    z-index: 1;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-top: 1px solid rgba(201,183,131,0.12);
}

.hud-row:first-child {
    border-top: none;
    padding-top: 0;
}

.hud-item {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
    border: 1px solid rgba(201,183,131,0.14);
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    min-width: 0;
}

.hud-label,
.pace-status,
.assembled-word-label,
.score-preview-label,
.word-history h3,
.score-breakdown .breakdown-title,
.node-sequence,
.node-note,
.allin-threshold-chip,
.streak-tier,
.streak-hint {
    font-family: ui-monospace, 'Cascadia Code', 'SF Mono', monospace;
}

.hud-label {
    font-size: 0.66rem;
    color: var(--editorial-paper-300);
}

.hud-value {
    color: var(--editorial-paper-100);
    font-size: 1.28rem;
}

.hud-target {
    color: var(--editorial-gold-500);
}

.round-type,
.hud-overkill,
.allin-display,
.modifier-display,
.momentum-badge {
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.round-type,
.hud-overkill,
.allin-display {
    border-radius: 4px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)),
        rgba(255,255,255,0.02);
}

.modifier-display,
.boss-dialogue,
.boss-adaptation,
.thesis-display {
    position: relative;
    padding-left: 1rem;
}

.modifier-display::before,
.boss-dialogue::before,
.boss-adaptation::before,
.thesis-display::before {
    content: '¶';
    position: absolute;
    left: 0.1rem;
    top: 0.45rem;
    color: rgba(245,193,93,0.72);
    font-weight: 700;
}

.streak-display {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
        rgba(14, 18, 28, 0.94);
    border-color: rgba(201,183,131,0.26);
}

.streak-style {
    letter-spacing: 0.01em;
}

.streak-pip {
    border-radius: 3px;
    width: 1rem;
    height: 0.72rem;
}

.pace-bar {
    padding-top: 1.5rem;
}

.pace-bar::after {
    content: 'PACE LEDGER';
    position: absolute;
    top: 0.55rem;
    left: 0.9rem;
    color: var(--editorial-paper-300);
    font-size: 0.64rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.pace-bar-track {
    position: relative;
    z-index: 1;
    border: 1px solid rgba(201,183,131,0.2);
}

.pace-bar-fill {
    background: linear-gradient(90deg, rgba(57,211,199,0.86), rgba(245,193,93,0.78));
}

.pace-bar-label {
    position: relative;
    z-index: 1;
    margin-top: 0.5rem;
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.pace-status {
    color: var(--editorial-paper-100);
    letter-spacing: 0.14em;
}

.node-map {
    align-items: stretch;
    gap: 0.55rem;
    padding-top: 1.7rem;
}

.node-map::after {
    content: 'ROUTE // editorial chain';
    position: absolute;
    top: 0.55rem;
    left: 1rem;
    color: var(--editorial-paper-300);
    font-size: 0.64rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.node {
    display: grid;
    gap: 0.32rem;
    min-width: 8.4rem;
    padding: 0.55rem 0.62rem 0.7rem;
    border-radius: 6px;
    align-content: start;
    text-align: left;
}

.node.current {
    transform: translateY(-1px);
}

.node.completed {
    border-color: rgba(65,209,125,0.30);
    background: rgba(65,209,125,0.05);
}

.node-standard,
.node-elite,
.node-shop,
.node-event,
.node-boss,
.node-rest {
    background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
}

.node-head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.45rem;
    align-items: start;
}

.node-heading {
    display: grid;
    gap: 0.12rem;
}

.node-sequence {
    color: var(--editorial-paper-300);
    font-size: 0.57rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.node-icon {
    width: 1.45rem;
    height: 1.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(201,183,131,0.22);
    border-radius: 4px;
    background: rgba(255,255,255,0.04);
}

.node-label {
    font-family: Georgia, 'Iowan Old Style', ui-serif, serif;
    font-size: 0.9rem;
    color: var(--editorial-paper-100);
    line-height: 1.1;
}

.node-note,
.node-target,
.node-boss-rule,
.node-elite-badge {
    color: var(--text-secondary);
    font-size: 0.6rem;
    letter-spacing: 0.04em;
}

.node-boss-name {
    margin-top: 0.2rem;
    font-size: 0.76rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.node-elite-badge {
    display: inline-flex;
    width: fit-content;
    padding: 0.12rem 0.32rem;
    border: 1px solid rgba(245,193,93,0.26);
    border-radius: 4px;
    color: var(--editorial-gold-500);
}

.node-connector {
    display: inline-flex;
    align-items: center;
    color: rgba(242,230,200,0.46);
    font-size: 0.95rem;
}

.relic-strip::after {
    content: 'TOOLS IN PLAY';
    position: absolute;
    top: 0.45rem;
    left: 0.7rem;
    color: var(--editorial-paper-300);
    font-size: 0.58rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.relic-strip {
    padding-top: 1.35rem;
}

.relic-item {
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.assembled-word-manuscript,
.score-preview-stack {
    background:
        linear-gradient(180deg, rgba(242,230,200,0.06), rgba(255,255,255,0.015)),
        rgba(14, 18, 28, 0.94);
}

.assembled-word-manuscript::after {
    content: '';
    position: absolute;
    top: 0.85rem;
    bottom: 0.85rem;
    left: 0.8rem;
    width: 2px;
    background: rgba(255,61,90,0.28);
}

.assembled-word,
.score-preview {
    position: relative;
    z-index: 1;
}

.word-actions {
    gap: 0.7rem;
}

.btn-clear,
.btn-submit,
.btn-allin,
.btn-redraw,
.btn-panic,
.btn-buy,
.btn-reroll {
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    box-shadow: none;
}

.btn-clear:hover:not(:disabled),
.btn-redraw:hover:not(:disabled) {
    background: rgba(242,230,200,0.10);
    color: var(--editorial-paper-100);
}

.allin-action {
    justify-items: stretch;
}

.allin-preview {
    min-width: 16rem;
    border-radius: 6px;
    border-style: dashed;
}

.score-breakdown {
    padding-top: 1.8rem;
}

.score-breakdown .breakdown-header,
.score-breakdown .breakdown-collapsed,
.score-breakdown .breakdown-expanded {
    position: relative;
    z-index: 1;
}

.score-breakdown .breakdown-header {
    margin-bottom: 0.55rem;
}

.score-breakdown .breakdown-title {
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--editorial-paper-100);
}

.word-history {
    padding-top: 2rem;
}

.word-history h3 {
    color: var(--editorial-paper-100);
    letter-spacing: 0.16em;
}

.word-history h3::after {
    content: ' // filed words';
    color: var(--text-muted);
}

@media (max-width: 900px) {
    .node {
        min-width: 7rem;
    }

    .pace-bar-label {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 720px) {
    .node-map {
        padding-top: 2rem;
        overflow-x: auto;
        justify-content: flex-start;
    }

    .node {
        min-width: 6.8rem;
    }

    .round-hud::after {
        right: 0.75rem;
    }
}