/* ============================================================
   CC LITE — PLAYER BOARD EDITOR — Styles
   Standalone: no dependency on the full game's code.
   ============================================================ */

* { box-sizing: border-box; }

body {
    margin: 0; padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #1a1a2e; color: #eee;
    min-height: 100vh;
}

/* --- Auth gate --- */
.auth-gate {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    background: #1a1a2e;
}
.auth-card {
    background: #16213e; border-radius: 16px; padding: 2.5rem;
    max-width: 380px; width: 90%; text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.auth-card h1 { color: #e2c044; margin: 0 0 .25rem; font-size: 1.6rem; font-family: 'Georgia', serif; }
.auth-card .subtitle { color: #aaa; margin: 0 0 1.5rem; font-size: .9rem; }
.auth-input {
    width: 100%; padding: .6rem .8rem; border: 1px solid #333;
    border-radius: 8px; background: #0f1629; color: #eee;
    font-size: .95rem; margin-bottom: .8rem;
}
.auth-input:focus { outline: none; border-color: #e2c044; }
.auth-error { color: #f44; margin: 0 0 .8rem; font-size: .85rem; }
.btn-full { width: 100%; }

/* --- Buttons --- */
.btn {
    display: inline-block; padding: .55rem 1.2rem; border: none;
    border-radius: 8px; font-size: .85rem; cursor: pointer;
    font-weight: 600; transition: all .15s;
    text-decoration: none; text-align: center;
}
.btn-primary { background: #e2c044; color: #1a1a2e; }
.btn-primary:hover { background: #d4a82a; }
.btn-secondary { background: #3a506b; color: #eee; }
.btn-secondary:hover { background: #4a6a8b; }
.btn-danger { background: #c0392b; color: #fff; }
.btn-danger:hover { background: #e74c3c; }
.btn-sm { padding: .35rem .8rem; font-size: .78rem; }
.btn-xs { padding: .15rem .45rem; font-size: .72rem; border-radius: 5px; }

/* --- Header --- */
.app-header {
    background: #16213e; padding: .8rem 1.5rem;
    display: flex; align-items: center; gap: 1rem;
    border-bottom: 2px solid #e2c044;
    flex-wrap: wrap;
}
.app-header h1 {
    color: #e2c044; font-size: 1.25rem; margin: 0;
    font-family: 'Georgia', serif;
}
.app-header .header-actions {
    display: flex; gap: .5rem; margin-left: auto; align-items: center; flex-wrap: wrap;
}
.save-indicator {
    font-size: .75rem; font-weight: 600;
    transition: opacity .4s;
}
.save-indicator.state-saved   { color: #27ae60; }
.save-indicator.state-saving  { color: #e2c044; }
.save-indicator.state-unsaved { color: #e2c044; }
.save-indicator.state-error   { color: #e74c3c; }

/* --- Views --- */
.view-panel { display: none; }
.view-panel.active { display: block; }

/* --- Board List --- */
.board-list { padding: 1.5rem; max-width: 960px; margin: 0 auto; }
.board-list-header h2 { margin: 0 0 .3rem; color: #e2c044; }
.board-list-header .hint { color: #888; font-size: .8rem; margin: 0 0 1.2rem; }
.board-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.board-card {
    background: #16213e; border-radius: 12px; padding: 1.2rem;
    border: 1px solid #2a2a4a; cursor: pointer;
    transition: all .15s;
}
.board-card:hover { border-color: #e2c044; transform: translateY(-2px); }
.board-card h3 { margin: 0 0 .2rem; color: #eee; font-size: 1.05rem; }
.board-type-tag {
    background: #2a2419; border: 1px solid #6b5628; color: #d9b45a;
    border-radius: 999px; padding: 1px 8px; font-size: .62rem;
    font-weight: 800; letter-spacing: 1px; vertical-align: middle;
}
.board-card .board-player { color: #e2c044; font-size: .8rem; margin-bottom: .3rem; }
.board-card .board-meta { color: #888; font-size: .78rem; }
.board-card .board-actions { margin-top: .8rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.board-grid .empty-msg { color: #888; grid-column: 1/-1; text-align: center; padding: 2rem 0; }

/* --- Editor layout --- */
.editor-layout { display: flex; gap: 0; min-height: calc(100vh - 60px); }
.editor-left {
    flex: 1; padding: 1rem; overflow-y: auto;
    display: flex; flex-direction: column; align-items: center;
}
.editor-right {
    width: 400px; min-width: 400px;
    background: #16213e; border-left: 1px solid #2a2a4a;
    padding: 0 1rem 1rem; overflow-y: auto;
    max-height: calc(100vh - 60px);
}

/* --- Side panel tabs --- */
.panel-tabs {
    display: flex; gap: .4rem; margin: 0 -1rem 1rem;
    padding: .6rem 1rem 0; position: sticky; top: 0;
    background: #16213e; z-index: 10;
    border-bottom: 1px solid #2a2a4a;
}
.tab-btn {
    background: transparent; border: none; color: #aaa;
    padding: .5rem .9rem; font-size: .85rem; font-weight: 600;
    cursor: pointer; border-bottom: 2px solid transparent;
}
.tab-btn:hover { color: #eee; }
.tab-btn.active { color: #e2c044; border-bottom-color: #e2c044; }
.side-panel { display: none; }
.side-panel.active { display: block; }

/* --- Board name --- */
.board-name-bar {
    display: flex; align-items: center; gap: .5rem;
    margin-bottom: .8rem; width: 100%; max-width: 860px;
}
.board-name-input {
    flex: 1; background: transparent; border: none; border-bottom: 2px solid #333;
    color: #e2c044; font-size: 1.2rem; font-weight: 700;
    padding: .3rem .5rem; font-family: 'Georgia', serif;
}
.board-name-input:focus { outline: none; border-bottom-color: #e2c044; }

/* --- Board preview --- */
.board-preview-wrapper { width: 100%; max-width: 860px; }
.board-preview {
    /* Scaled representation of an 11 x 8.5 landscape board */
    width: 100%;
    aspect-ratio: 11 / 8.5;
    background: #111;
    border-radius: 12px;
    border: 2px solid #333;
    position: relative;
    overflow: hidden;
    padding: 1.5%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.board-preview.print-mode {
    width: 960px;   /* 10in at 96dpi */
    height: 720px;  /* 7.5in */
    aspect-ratio: auto;
}

.board-row {
    display: flex;
    align-items: center;
    border-radius: 8px;
    padding: 4px 8px;
    position: relative;
    flex: 1;
    min-height: 0;
}
.board-row .row-aspect-icon {
    position: absolute; top: 4%; left: 6px;
    height: 30%; width: auto; max-width: 12%;
    object-fit: contain;
    z-index: 2; pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
/* Keep the vertical row name in the band's lower 62% so it clears the
   upright aspect icon parked in the top-left corner */
.board-row .board-row-label {
    align-self: flex-end;
    max-height: 64%;
    font-size: .68rem;
    display: flex; align-items: center;
    overflow: hidden;
}
.board-row-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-weight: 800;
    font-size: .75rem;
    color: #fff;
    text-transform: uppercase;
    margin-right: 6px;
    letter-spacing: 2px;
    min-width: 20px;
    max-height: 100%;
    overflow: hidden;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.board-spaces {
    display: flex;
    gap: 4px;
    flex: 1;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    min-width: 0;
}

/* --- Calamity track (Rules 4.1b/4.3, 2026-08-04) --- */
.calamity-track {
    display: flex;
    align-items: center;
    border-radius: 8px;
    padding: 3px 8px;
    flex: 0 1 auto;
    min-height: 0;
    background: #1c1620;
    border: 1px dashed #5a3a44;
}
.calamity-track .calamity-spaces {
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 10px;
    height: auto;
}
.calamity-track-label { color: #c98787 !important; }
.calamity-space {
    cursor: default;
    background: #26202c;
    border: 2px dashed rgba(220,150,150,.5);
    display: flex; align-items: center; justify-content: center;
}
.calamity-space:hover { transform: none; border-color: rgba(220,150,150,.5); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.calamity-space .calamity-space-num {
    color: rgba(220,150,150,.75);
    font-weight: 800; font-size: .7rem; text-align: center;
    line-height: 1.05; padding: 2px;
}
.calamity-space.collapse-space {
    border-color: rgba(224,90,80,.85);
    background: #301a1c;
}
.calamity-space.collapse-space .calamity-space-num { color: #e05a50; font-size: .55rem; }
.calamity-track-side {
    margin-left: 12px;
    flex: 1 1 46%; min-width: 210px;
    display: flex; flex-direction: column; gap: 5px;
    justify-content: center;
}
.calamity-track-hint {
    color: #a08289; font-size: .66rem; font-style: italic;
    line-height: 1.35;
}
.calamity-track-hint b { color: #c98787; font-style: normal; }
.darkage-penalties {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: .62rem; color: #a08289;
}
.darkage-penalties b { color: #c98787; margin-right: 2px; }
.darkage-penalties span {
    background: #2a2130; border: 1px solid #5a3a44;
    border-radius: 999px; padding: 1px 8px;
    color: #d8a8a8; font-weight: 700; white-space: nowrap;
}

/* --- Glory track (Rules 4.4, 2026-08-07) --- */
/* Gold rather than the Calamity track's red: this is the one track you want
   to advance on, and the two sit adjacent under the rows. */
.glory-track {
    display: flex;
    align-items: center;
    border-radius: 8px;
    padding: 3px 8px;
    /* shrinkable: the rows are flex:1 and must keep the lion's share of the
       board. Two fixed-height tracks starved them to nothing (2026-08-10). */
    flex: 0 1 auto;
    min-height: 0;
    background: #1e1a14;
    border: 1px dashed #6b5628;
}
.glory-track .glory-spaces {
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 8px;
    height: auto;
}
.glory-track-label { color: #d9b45a !important; }
.glory-space {
    cursor: default;
    background: #2a2419;
    border: 2px solid rgba(217,180,90,.45);
    display: flex; align-items: center; justify-content: center;
}
.glory-space:hover { transform: none; border-color: rgba(217,180,90,.45); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.glory-space .glory-space-num {
    color: rgba(217,180,90,.8);
    font-weight: 800; font-size: .72rem; text-align: center;
    line-height: 1.05; padding: 2px;
}
/* The 0 space is where every marker starts — dashed, clearly "not scored yet" */
.glory-space.glory-start {
    border-style: dashed;
    border-color: rgba(217,180,90,.3);
    background: #221e17;
}
.glory-space.glory-start .glory-space-num { color: rgba(217,180,90,.5); }
/* Max Glory: you can't advance past one space per Era */
.glory-space.glory-max {
    border-color: rgba(240,200,105,.9);
    background: #332a17;
    box-shadow: 0 0 0 2px rgba(240,200,105,.15);
}
.glory-space.glory-max .glory-space-num { color: #f0c869; }
.glory-track-side {
    margin-left: 12px;
    flex: 1 1 46%; min-width: 210px;
    display: flex; flex-direction: column; gap: 5px;
    justify-content: center;
}
.glory-track-hint {
    color: #9b8a63; font-size: .66rem; font-style: italic;
    line-height: 1.35;
}
.glory-track-hint b { color: #d9b45a; font-style: normal; }
.glory-vp-note {
    font-size: .62rem; color: #9b8a63;
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.glory-vp-note b { color: #d9b45a; margin-right: 2px; }
.glory-vp-note span {
    background: #2a2419; border: 1px solid #6b5628;
    border-radius: 999px; padding: 1px 8px;
    color: #e8cd8a; font-weight: 700; white-space: nowrap;
}
/* Unsettled value reads as provisional, not as a printed rule */
.glory-vp-note span.glory-tbd {
    color: #b9a06a; border-style: dashed; font-style: italic; font-weight: 600;
}

/* --- Pillars (columns 3/5/7 = Bronze/Silver/Gold — Rules.md 4.2b) --- */
.pillar-header {
    display: flex;
    align-items: flex-end;
    padding: 0 8px 2px;
}
.pillar-header-spacer { min-width: 20px; margin-right: 6px; }
.pillar-header .board-spaces { height: auto; }
.pillar-head-cell { flex: 0 0 auto; text-align: center; }
.pillar-head-label {
    display: inline-block;
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.15;
}
.pillar-label-bronze { color: #cd7f32; }
.pillar-label-silver { color: #a8a9ad; }
.pillar-label-gold   { color: #e2c044; }
.token-space.pillar-bronze { box-shadow: 0 0 0 3px rgba(205,127,50,.55), 0 2px 6px rgba(0,0,0,.4); }
.token-space.pillar-silver { box-shadow: 0 0 0 3px rgba(168,169,173,.60), 0 2px 6px rgba(0,0,0,.4); }
.token-space.pillar-gold   { box-shadow: 0 0 0 3px rgba(226,192,68,.60), 0 2px 6px rgba(0,0,0,.4); }

/* --- Token space circles --- */
.token-space {
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.35);
    flex: 0 0 auto;
    /* width/height set by JS to fit row */
}
.token-space:hover {
    transform: scale(1.1);
    border-color: #e2c044;
    box-shadow: 0 0 12px rgba(226,192,68,.5);
    z-index: 5;
}
.token-space.selected {
    border-color: #e2c044;
    box-shadow: 0 0 16px rgba(226,192,68,.7);
    transform: scale(1.12);
    z-index: 5;
}

/* Corruption space (Rules 4.2c): every row's 5th space forces a
   Corruption marker onto a face-up Civ Card when a Resource lands
   there — shown as in-slot text (icon badge retired 2026-08-04) */

.token-space-letter {
    position: absolute;
    top: 2px; left: 50%;
    transform: translateX(-50%);
    font-size: .5rem;
    font-weight: 700;
    opacity: .65;
    text-transform: uppercase;
    z-index: 2;
    pointer-events: none;
}
.token-space-text {
    line-height: 1.12;
    text-align: center;
    font-weight: 600;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    /* font-size set dynamically by autoFitText() */
}
.token-space-text.text-top    { top: 14%; left: 10%; right: 10%; bottom: 52%; }
.token-space-text.text-bottom { top: 52%; left: 10%; right: 10%; bottom: 8%; }
.token-space-text.text-center { top: 12%; left: 10%; right: 10%; bottom: 10%; }

/* --- Side panel fields --- */
.panel-section {
    border: 1px solid #2a2a4a; border-radius: 10px;
    padding: .8rem; margin-bottom: 1rem; background: #131c36;
}
.panel-section h3 {
    margin: 0 0 .6rem; color: #e2c044; font-size: .8rem;
    text-transform: uppercase; letter-spacing: 1px;
}
.panel-section .section-hint { color: #778; font-size: .72rem; margin: -.3rem 0 .6rem; }

.editor-field { margin-bottom: .8rem; }
.editor-field:last-child { margin-bottom: 0; }
.editor-field label {
    display: block; color: #aaa; font-size: .72rem;
    text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: .3rem;
}
.editor-field input[type="text"],
.editor-field input[type="number"],
.editor-field textarea,
.editor-field select {
    width: 100%; padding: .5rem .7rem;
    background: #0f1629; border: 1px solid #333;
    color: #eee; border-radius: 6px; font-size: .85rem;
}
.editor-field input:focus, .editor-field textarea:focus { outline: none; border-color: #e2c044; }

/* Rows config */
.row-config {
    display: flex; gap: .4rem; align-items: center; margin-bottom: .45rem;
}
.row-config input[type="text"] {
    flex: 1; min-width: 0; padding: .4rem .6rem;
    background: #0f1629; border: 1px solid #333;
    color: #eee; border-radius: 6px; font-size: .82rem;
}
.row-config input[type="number"] {
    width: 58px; padding: .4rem .4rem;
    background: #0f1629; border: 1px solid #333;
    color: #eee; border-radius: 6px; font-size: .82rem;
}
.row-config input[type="color"],
.palette-row input[type="color"] {
    width: 34px; height: 30px; padding: 2px;
    background: #0f1629; border: 1px solid #333; border-radius: 6px;
    cursor: pointer; flex: 0 0 auto;
}

/* Palette config */
.palette-row {
    display: flex; gap: .4rem; align-items: center; margin-bottom: .45rem;
}
.palette-row input[type="text"] {
    flex: 1; min-width: 0; padding: .4rem .6rem;
    background: #0f1629; border: 1px solid #333;
    color: #eee; border-radius: 6px; font-size: .82rem;
}
.palette-usage { color: #778; font-size: .68rem; min-width: 46px; text-align: right; }

/* Slot editor */
.slot-editor-title {
    font-size: 1rem; color: #e2c044; margin: 0 0 .8rem;
    display: flex; align-items: center; gap: .5rem;
}
.slot-editor-title .slot-letter {
    display: inline-flex; width: 28px; height: 28px;
    border-radius: 50%; background: #e2c044; color: #1a1a2e;
    align-items: center; justify-content: center;
    font-weight: 800; font-size: .85rem;
}
.slot-type-options { display: flex; gap: .5rem; }
.slot-type-btn {
    flex: 1; padding: .55rem; border: 2px solid #333;
    border-radius: 8px; cursor: pointer; text-align: center;
    font-size: .7rem; font-weight: 600; transition: all .15s;
    background: #0f1629; color: #ccc;
}
.slot-type-btn:hover { border-color: #e2c044; }
.slot-type-btn.active { border-color: #e2c044; box-shadow: 0 0 8px rgba(226,192,68,.3); }
.slot-type-btn .type-preview {
    width: 34px; height: 34px; border-radius: 50%;
    margin: 0 auto .3rem; border: 1px solid rgba(255,255,255,.25);
}

/* Color chips */
.color-chips { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.color-chip {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.25); cursor: pointer;
    transition: transform .1s, border-color .1s;
}
.color-chip:hover { transform: scale(1.15); }
.color-chip.active { border-color: #fff; box-shadow: 0 0 0 2px #e2c044; }
.color-chip-label { font-size: .68rem; color: #889; }

/* Ability autocomplete */
.ability-input-wrapper { position: relative; }
.ability-suggestions {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #1e2b4e; border: 1px solid #333;
    border-radius: 0 0 6px 6px; max-height: 170px;
    overflow-y: auto; z-index: 30; display: none;
}
.ability-suggestions.open { display: block; }
.ability-suggestion {
    padding: .45rem .7rem; cursor: pointer; font-size: .8rem;
    border-bottom: 1px solid #222;
}
.ability-suggestion:hover { background: #29396b; }

/* Font scale row */
.font-scale-row { display: flex; align-items: center; gap: .5rem; }
.font-scale-row input[type="range"] { flex: 1; }
.font-scale-display { color: #e2c044; font-weight: 700; min-width: 42px; text-align: center; font-size: .85rem; }

.slot-nav-row { display: flex; gap: .5rem; margin-top: 1rem; }

.no-slot-selected { text-align: center; color: #666; padding: 3rem 1rem; }
.no-slot-selected .icon { font-size: 3rem; margin-bottom: .5rem; }

/* --- Confirm modal --- */
.modal-overlay {
    position: fixed; inset: 0; z-index: 9998;
    background: rgba(10, 12, 26, .72);
    display: flex; align-items: center; justify-content: center;
}
.modal-card {
    background: #16213e; border: 1px solid #2a2a4a; border-radius: 14px;
    padding: 1.4rem 1.6rem; max-width: 420px; width: 92%;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.modal-card h3 { margin: 0 0 .5rem; color: #e2c044; font-size: 1.05rem; }
.modal-card p { margin: 0 0 1.2rem; color: #ccc; font-size: .88rem; line-height: 1.45; }
.modal-actions { display: flex; gap: .6rem; justify-content: flex-end; }

/* --- Toasts --- */
.toast-container {
    position: fixed; top: 1.5rem; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.toast {
    padding: .7rem 1.2rem; border-radius: 8px; font-size: .85rem;
    animation: toastIn .3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.toast-success { background: #27ae60; color: #fff; }
.toast-error { background: #c0392b; color: #fff; }
.toast-info { background: #2980b9; color: #fff; }
@keyframes toastIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Responsive --- */
@media (max-width: 980px) {
    .editor-layout { flex-direction: column; }
    .editor-right { width: 100%; min-width: auto; border-left: none;
        border-top: 1px solid #2a2a4a; max-height: none; }
}

/* ============================================================
   PRINT — 8.5 x 11 in, landscape, board only
   ============================================================ */
@media print {
    @page { size: letter landscape; margin: 0.5in; }
    body { background: #fff !important; color: #000; margin: 0; padding: 0; }
    .app-header, .editor-right, .board-name-bar, .toast-container,
    .board-list, #view-list, .modal-overlay, .auth-gate { display: none !important; }
    #main-app, .view-panel.active, .editor-layout, .editor-left {
        display: block !important;
        padding: 0 !important; margin: 0 !important; overflow: visible !important;
    }
    /* Print ALL board colors (row bands, slot tints, track) — the
       slot colors are gameplay information, not decoration. Overrides
       the browser's "don't print backgrounds" default. */
    .board-preview, .board-preview * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .board-preview-wrapper { max-width: none; }
    .board-preview, .board-preview.print-mode {
        width: 10in !important;
        height: 7.5in !important;
        border: 2px solid #000;
        border-radius: 0;
        background: #fff;
        page-break-inside: avoid;
    }
    .token-space { border: 2px solid #000; box-shadow: none; }
    .token-space.selected { transform: none; box-shadow: none; border-color: #000; }
    .board-row-label { text-shadow: none; }
    /* Pillar columns keep their metal rings as printed borders */
    .token-space.pillar-bronze { border: 3px solid #cd7f32; }
    .token-space.pillar-silver { border: 3px solid #8e8f93; }
    .token-space.pillar-gold   { border: 3px solid #b8860b; }
    .calamity-track { background: #fff; border: 1px dashed #000; }
    .calamity-track-label { color: #000 !important; }
    .calamity-space { background: #fff; border: 2px dashed #555; }
    .calamity-space .calamity-space-num { color: #555; }
    .calamity-space.collapse-space { border: 3px solid #000; }
    .calamity-space.collapse-space .calamity-space-num { color: #000; }
    .calamity-track-hint { color: #333; }
    .calamity-track-hint b { color: #000; }
    .darkage-penalties { color: #333; }
    .darkage-penalties b { color: #000; }
    .darkage-penalties span { background: #fff; border-color: #000; color: #000; }
    /* Glory track — solid borders (Calamity prints dashed) so the two tracks
       stay distinguishable once the gold is gone. */
    .glory-track { background: #fff; border: 1px dashed #000; }
    .glory-track-label { color: #000 !important; }
    .glory-space { background: #fff; border: 2px solid #555; }
    .glory-space .glory-space-num { color: #333; }
    .glory-space.glory-start { background: #fff; border: 2px dashed #999; }
    .glory-space.glory-start .glory-space-num { color: #888; }
    .glory-space.glory-max { border: 3px solid #000; box-shadow: none; }
    .glory-space.glory-max .glory-space-num { color: #000; }
    .glory-track-hint { color: #333; }
    .glory-track-hint b { color: #000; }
    .glory-vp-note { color: #333; }
    .glory-vp-note b { color: #000; }
    .glory-vp-note span { background: #fff; border-color: #000; color: #000; }
}