:root {
    --bg: #0b0f14; 
    --panel: #111823; 
    --card: #151d2a;
    --border: #243042; 
    --text: #e5edf5; 
    --text-muted: #7f8995;
    --accent: #60a5fa;
    --radius: 10px;
    --g: 10px; 
    --cell: 120px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

body {
    background-color: var(--bg);
    color: var(--text);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* FIXED HEADER SETUP */
.fixed-top-panel { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    background-color: var(--panel); 
    z-index: 10; 
    border-bottom: 1px solid var(--border); 
}
.app-header { display: flex; flex-direction: column; padding: 8px; background-color: var(--panel); gap: 6px; }

.identity-config-row { display: flex; gap: 8px; background: var(--bg); padding: 6px; border-radius: 8px; border: 1px solid var(--border); }
.player-input-box { flex: 1; display: flex; gap: 4px; align-items: center; }
.player-input-box label { font-size: 0.55rem; font-weight: bold; color: var(--text-muted); text-transform: uppercase; }
.player-input-box input, .player-input-box select { background: var(--card); border: 1px solid var(--border); color: #ffffff; font-size: 0.65rem; padding: 3px 6px; border-radius: 4px; width: 100%; }

.player-matrix-row { display: flex; gap: 8px; align-items: stretch; justify-content: space-between; }
.player-column { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.player-column.side-p1 { border-left: 3px solid #6b8fa6; }
.player-column.side-p2 { border-left: 3px solid #a66b6b; }
.player-tag { font-size: 0.6rem; font-weight: bold; color: var(--text-muted); text-align: center; letter-spacing: 0.5px; text-transform: uppercase; }

.center-control-column { width: 130px; display: flex; flex-direction: column; gap: 6px; justify-content: flex-start; flex-shrink: 0; }
.center-turn-bar { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; background: var(--bg); padding: 4px; border-radius: 8px; border: 1px solid var(--border); min-height: 44px; }
.turn-title { font-size: 0.75rem; font-weight: 800; color: #ffffff; letter-spacing: 0.5px; text-align: center; }
.match-context-tagline { font-size: 0.52rem; font-weight: bold; color: var(--text-muted); text-align: center; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.stat-controls { display: flex; flex-direction: column; gap: 4px; }
.stat-sub-box { background: var(--panel); border: 1px solid var(--border); border-radius: 4px; padding: 4px; display: flex; flex-direction: column; align-items: center; width: 100%; }
.stat-mini-label { font-size: 0.55rem; font-weight: bold; color: var(--text-muted); text-transform: uppercase; margin-bottom: 2px; }

/* MULTI-BUTTON VP ADVANCEMENT GRID */
.mini-actions { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; }
.mini-actions.score-macro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: 100%; }
.mini-actions button { background: var(--card); border: 1px solid var(--border); color: var(--text); font-weight: bold; padding: 4px 0; font-size: 0.65rem; border-radius: 3px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mini-actions button:hover { border-color: var(--accent); background: #1a2433; }
.large-score-text { font-size: 1.1rem; font-weight: 800; color: #ffffff; text-align: center; padding: 2px 0; }
.macro-math-row { display: flex; justify-content: center; gap: 2px; width: 100%; margin-top: 4px; border-top: 1px dashed var(--border); padding-top: 4px; }
.macro-math-row button { background: var(--card); border: 1px solid var(--border); color: var(--text); font-size: 0.55rem; font-weight: bold; padding: 3px 0; flex: 1; border-radius: 2px; cursor: pointer; text-align: center; }

.primary-collapse-wrapper { width: 100%; display: block; overflow: hidden; transition: max-height 0.2s ease-out; max-height: 100px; margin-top: auto; }
.fixed-top-panel.primaries-collapsed .primary-collapse-wrapper { max-height: 0px !important; }
.pinned-slot.primary-slot { flex: 1; height: 38px; background-color: var(--panel); border: 1px dashed var(--border); border-radius: 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2px; text-align: center; cursor: pointer; }
.pinned-slot.active-card { border: 1px solid var(--accent); background-color: var(--card); }
.pinned-slot .slot-title { font-size: 0.48rem; color: var(--text-muted); font-weight: bold; }
.pinned-slot .slot-name { font-size: 0.58rem; font-weight: bold; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; padding: 0 4px; }
#pinned-primary-p1.active-card { border-left: 3px solid #4ade80; }
#pinned-primary-p2.active-card { border-left: 3px solid #f87171; }
.minimize-toggle-action-bar { width: 100%; margin-top: 6px; padding: 4px 0; font-size: 0.58rem; font-weight: 800; color: #ffffff; background-color: #243042; border: 1px solid #3d4f68; border-radius: 4px; cursor: pointer; text-align: center; }

.pinned-missions-bar { display: flex; gap: 6px; padding: 4px 8px; background-color: var(--bg); border-top: 1px solid var(--border); height: 48px; align-items: center; }
.player-deck-container { flex: 1; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; height: 40px; padding: 3px; display: flex; flex-direction: column; overflow: hidden; }
.deck-indicator-text { font-size: 0.45rem; font-weight: bold; margin-bottom: 1px; letter-spacing: 0.2px; }
.deck-indicator-text.p1-col { color: #6b8fa6; }
.deck-indicator-text.p2-col { color: #a66b6b; }
.secondary-deck-scroll { display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; align-items: center; flex: 1; width: 100%; }
.empty-deck-notice { font-size: 0.55rem; color: var(--text-muted); font-style: italic; text-align: center; width: 100%; }
.deck-micro-card { background: var(--card); border: 1px solid var(--border); border-radius: 3px; padding: 2px 4px; display: inline-flex; align-items: center; gap: 4px; height: 24px; font-size: 0.55rem; font-weight: 600; color: var(--text); cursor: pointer; flex-shrink: 0; }
.deck-micro-card.p1-border { border-left: 2px solid #6b8fa6; }
.deck-micro-card.p2-border { border-left: 2px solid #a66b6b; }
.clear-micro-btn { color: #d69fa2; font-size: 0.65rem; font-weight: bold; cursor: pointer; padding: 0 2px; }

/* CONTENT WRAPPER WINDOWS */
.app-content { flex: 1; margin-top: 315px; margin-bottom: 65px; padding: 15px; overflow-y: auto; transition: margin-top 0.2s ease-out; }
.view-section-title { margin-top: 15px; margin-bottom: 15px; font-size: 1rem; border-left: 3px solid var(--accent); padding-left: 10px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text); }

.checklist { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.check-item { background-color: var(--panel); padding: 14px; border-radius: 8px; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; border: 1px solid var(--border); font-size: 0.9rem; }
.check-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; }

/* ORIGINAL PRESERVED DASHBOARD GRID ENGINE */
.dashboard { display: grid; grid-template-columns: 160px auto; grid-template-rows: 60px auto; gap: var(--g); margin-bottom: 50px; }
.dashboard-wrapper { width: 100%; overflow-x: auto; margin-bottom: 10px; padding-bottom: 10px; }
.label-btn { background: var(--card); border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem; text-align: center; }
.side-labels { display: grid; grid-template-rows: repeat(5, var(--cell)); gap: var(--g); }
.top-labels { display: grid; grid-template-columns: repeat(5, var(--cell)); gap: var(--g); }
.grid { display: grid; grid-template-columns: repeat(5, var(--cell)); grid-template-rows: repeat(5, var(--cell)); gap: var(--g); padding: var(--g); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }

/* CELL BUTTONS */
.mission-btn { background: var(--card); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 0.72rem; cursor: pointer; transition: 0.18s; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 6px; height: 100%; width: 100%; font-weight: 500; }
.mission-btn:hover { background: #1a2433; border-color: var(--accent); }
.mission-btn.secondary-cell-style { height: 60px; }
.mission-btn.targeted-preview-cell { border: 2px solid #ffffff !important; background-color: #1a2433 !important; }

.secondary-container-block { width: 100%; padding: 5px 0; }
.secondary-pure-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--g); width: 100%; }

/* SIGNIFICANTLY ENLARGED HUD PREVIEW OVERLAYS */
.inline-3d-popup { 
    position: fixed; 
    z-index: 2000; 
    width: 95vw; 
    max-width: 1140px;
    height: 90vh;
    max-height: 850px;
    background: #111823; 
    border: 2px solid var(--accent); 
    border-radius: 12px; 
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.95); 
    display: flex; 
    flex-direction: column; 
    animation: popupScaleIn 0.12s ease-out; 
}
.popup-3d-header { display: flex; justify-content: space-between; align-items: center; background: #151d2a; padding: 12px 18px; border-bottom: 1px solid var(--border); }
#popup-title-text { font-size: 0.95rem; font-weight: 800; text-transform: uppercase; color: #ffffff; }
.popup-close-x { background: none; border: none; color: #d69fa2; font-size: 1.8rem; font-weight: bold; cursor: pointer; }
.popup-3d-body { padding: 16px; display: flex; flex-direction: column; gap: 16px; background-color: #0b0f14; flex: 1; overflow-y: auto; }

/* Massive Graphics Target Containers */
.popup-preview-graphic-frame { width: 100%; height: 620px; background: #111823; border: 1px solid var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.popup-preview-graphic-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }

.popup-btn-row { display: flex; gap: 12px; width: 100%; margin-top: auto; padding-top: 8px; }
.popup-action-btn { flex: 1; border: 1px solid var(--border); padding: 14px 0; border-radius: 6px; font-size: 0.85rem; font-weight: bold; cursor: pointer; text-align: center; color: #ffffff; text-transform: uppercase; }
.popup-action-btn.lock-p1-btn { background-color: #164e2c; border-color: #277c47; }
.popup-action-btn.lock-p2-btn { background-color: #542323; border-color: #8c3a3a; }
.popup-action-btn.lock-primary-universal { background-color: #1c3d5a; border-color: #31628c; width: 100%; }
.popup-action-btn:disabled { background-color: #111823 !important; border: 1px dashed #243042 !important; color: #4b525d !important; cursor: not-allowed !important; opacity: 0.5; }

.ledger-log-container { background-color: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-top: 10px; }
.ledger-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 8px; }
.ledger-header span { font-size: 0.72rem; font-weight: 800; color: var(--text-muted); }
.clear-ledger-btn { background: none; border: 1px dashed var(--border); color: #d69fa2; font-size: 0.62rem; font-weight: bold; padding: 2px 6px; border-radius: 3px; cursor: pointer; }
.ledger-entries-stack { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.ledger-empty-msg { font-size: 0.68rem; color: var(--text-muted); font-style: italic; text-align: center; padding: 10px 0; }
.ledger-row-node { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; font-size: 0.68rem; display: flex; flex-direction: column; border-left: 3px solid var(--accent); }
.ledger-row-node.node-p1 { border-left-color: #6b8fa6; }
.ledger-row-node.node-p2 { border-left-color: #a66b6b; }
.ledger-node-meta { display: flex; justify-content: space-between; font-size: 0.58rem; color: var(--text-muted); font-weight: bold; }

.report-panel-container { background-color: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px; }
.report-action-header-bar { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.download-report-pdf-btn { background-color: #164e2c; border: 1px solid #277c47; color: #ffffff; font-size: 0.75rem; font-weight: bold; padding: 8px 16px; border-radius: 4px; cursor: pointer; text-transform: uppercase; }
.report-infographic-timeline { display: flex; flex-direction: column; gap: 14px; background: var(--bg); padding: 15px; border-radius: var(--radius); border: 1px solid var(--border); }
.report-round-block-node { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 10px; }
.report-round-header { font-size: 0.85rem; font-weight: 800; color: #ffffff; border-bottom: 1px dashed var(--border); padding-bottom: 4px; margin-bottom: 8px; }
.report-event-stream { display: flex; flex-direction: column; gap: 4px; }
.report-event-row { font-size: 0.7rem; padding: 4px 8px; border-left: 2px solid var(--accent); background: rgba(255,255,255,0.02); color: var(--text); }
.report-event-row.p1-event { border-left-color: #6b8fa6; }
.report-event-row.p2-event { border-left-color: #a66b6b; }

.calc-container { background-color: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px; max-width: 480px; margin: 0 auto; }
.calc-display { background-color: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 12px; margin-bottom: 15px; display: flex; flex-direction: column; gap: 6px; }
.calc-display-row { display: flex; justify-content: space-between; align-items: center; }
.calc-display-row.total-row { border-top: 1px dashed var(--border); padding-top: 6px; margin-top: 2px; }
.calc-label { font-size: 0.7rem; font-weight: bold; color: var(--text-muted); }
.calc-val { font-size: 1.4rem; font-weight: bold; color: var(--text); }
.calc-val-highlight { font-size: 1.6rem; font-weight: bold; color: #4ade80; }
.calc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 15px; }
.calc-btn { padding: 14px 0; font-size: 0.95rem; font-weight: bold; border-radius: 4px; border: 1px solid var(--border); cursor: pointer; text-align: center; }
.calc-btn-neg { background-color: #2b1f20; color: #d69fa2; }
.calc-btn-pos { background-color: #1f2b22; color: #4ade80; }
.calc-btn-clear { background-color: #151d2a; color: #7f8995; }
.calc-btn-action { background-color: var(--card); color: var(--text); font-size: 0.8rem; }
.calc-btn-roll { background-color: #243042; color: #ffffff; border-color: var(--accent); }
.calc-results-panel { background-color: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 12px; }
.panel-section-title { display: block; font-size: 0.7rem; font-weight: bold; color: var(--text-muted); text-transform: uppercase; margin-bottom: 10px; }
.calc-tally-list { display: flex; flex-direction: column; gap: 6px; }
.tally-row { background-color: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; display: flex; align-items: center; cursor: pointer; }
.tally-face { font-size: 1rem; font-weight: bold; color: var(--text); width: 45px; }
.tally-separator { color: var(--text-muted); margin-right: 15px; }
.tally-qty { font-size: 1.2rem; font-weight: bold; color: #ffffff; flex: 1; }
.tally-action-hint { font-size: 0.65rem; color: var(--text-muted); border: 1px dashed var(--border); padding: 2px 6px; border-radius: 3px; }

/* REVISED FULL-BACKDROP ACTION MODAL FRAMEWORK */
.modal-content-wrapper { background: #111823; border: 2px solid var(--accent); border-radius: 8px; max-width: 95%; width: 500px; box-shadow: 0 24px 50px rgba(0,0,0,0.9); overflow: hidden; margin: auto; }
.workflow-modal-header { background: #151d2a; padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.workflow-modal-header h3 { font-size: 0.85rem; font-weight: bold; text-transform: uppercase; color: #ffffff; }
.workflow-modal-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.workflow-desc-para { font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; }
.workflow-action-strip-btn { width: 100%; text-align: left; background: #151d2a; border: 1px solid var(--border); padding: 12px; border-radius: 4px; color: #ffffff; font-size: 0.8rem; font-weight: bold; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.scoring-grid-sub-frame { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 4px; background: #0b0f14; padding: 8px; border-radius: 4px; border: 1px solid var(--border); }
.score-select-bubble { background: #151d2a; border: 1px solid var(--border); border-radius: 4px; padding: 8px 0; text-align: center; color: #ffffff; font-size: 0.75rem; font-weight: 800; cursor: pointer; }

.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 65px; background-color: var(--panel); display: flex; border-top: 1px solid var(--border); z-index: 10; }
.nav-item { flex: 1; background: none; border: none; color: var(--text-muted); font-size: 0.8rem; font-weight: bold; cursor: pointer; }
.nav-item.active { color: var(--text); border-top: 2px solid var(--text); background-color: var(--bg); }
.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(5px); justify-content: center; align-items: center; z-index: 1000; padding: 15px; cursor: pointer; }

@keyframes popupScaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@media print {
    body * { visibility: hidden; }
    #report-print-area, #report-print-area * { visibility: visible; }
    #report-print-area { position: absolute; left: 0; top: 0; width: 100%; display: block !important; }
    .download-report-pdf-btn { display: none; }
}