/* =============================================================================
   Tower of Destiny — Main Stylesheet
   ============================================================================= */

/* ── CSS Variables ──────────────────────────────────────────────────────────── */
:root {
    --tod-bg:           #0d0d0d;
    --tod-bg-panel:     #141414;
    --tod-bg-overlay:   rgba(0, 0, 0, 0.92);
    --tod-border:       #2a2a2a;
    --tod-border-gold:  #8B6914;
    --tod-text:         #c8c8c8;
    --tod-text-dim:     #666;
    --tod-text-bright:  #ffffff;
    --tod-gold:         #FFD700;
    --tod-green:        #4CAF50;
    --tod-red:          #F44336;
    --tod-blue:         #4488FF;
    --tod-orange:       #FFC107;
    --tod-purple:       #9C27B0;
    --tod-font-mono:    "Courier New", Courier, monospace;
    --tod-font-ui:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --tod-radius:       4px;
    --tod-transition:   0.15s ease;
}

/* ── Reset ──────────────────────────────────────────────────────────────────── */
#tod-wrapper *,
#tod-wrapper *::before,
#tod-wrapper *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Outer game container — aligns title, nav, and board to same max-width ── */
.tod-game-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

/* ── Wrapper ────────────────────────────────────────────────────────────────── */
#tod-wrapper {
    display: grid;
    grid-template-columns: 1fr 250px;
    grid-template-rows: 1fr 120px;
    grid-template-areas:
        "map  stats"
        "log  stats";
    width: 100%;
    max-width: 1100px;
    height: 744px;  /* increased from 724px to accommodate the Arrows stat row */
    background: var(--tod-bg);
    border: 1px solid var(--tod-border-gold);
    border-radius: var(--tod-radius);
    overflow: hidden;
    font-family: var(--tod-font-mono);
    color: var(--tod-text);
    position: relative;
}

/* ── Map Screen ─────────────────────────────────────────────────────────────── */
.tod-map-screen {
    grid-area: map;
    position: relative;
    overflow: hidden;
    background: #000;
}

.tod-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: default;
    outline: none;
}

/* ============================================================
   Equipment Display Bar (v1.5.83)
   ============================================================ */
.tod-equip-bar {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    height: 34px;
    min-height: 34px;
    background: var(--tod-bg-panel, #0e0e0e);
    border-bottom: 1px solid var(--tod-border, #2a2a2a);
    overflow: hidden;
    flex-shrink: 0;
}
.tod-equip-bar-slot {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2px 4px 1px;
    border-right: 1px solid var(--tod-border, #1e1e1e);
    cursor: pointer;
    transition: background 0.12s;
    overflow: hidden;
    min-width: 0;
    position: relative;
}
.tod-equip-bar-slot:last-child { border-right: none; }
.tod-equip-bar-slot:hover { background: rgba(139,105,20,0.18); }
.tod-equip-bar-slot--active { background: rgba(139,105,20,0.12); }
.tod-equip-bar-slot__label {
    font-size: 9px;
    color: var(--tod-text-dim, #666);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}
.tod-equip-bar-slot__name {
    font-size: 11px;
    color: var(--tod-text, #c8c8c8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.2;
}
.tod-equip-bar-slot__name--empty {
    color: var(--tod-text-dim, #444);
    font-style: italic;
}
.tod-equip-bar-slot__buc {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 3px;
    vertical-align: middle;
    flex-shrink: 0;
}
.tod-equip-bar-slot__buc--blessed  { background: #FFD700; }
.tod-equip-bar-slot__buc--uncursed { background: #888; }
.tod-equip-bar-slot__buc--cursed   { background: #F44336; }
.tod-equip-bar-slot__buc--unknown  { background: #ddd; }
.tod-equip-bar-slot__dur {
    width: 80%;
    height: 2px;
    background: rgba(255,255,255,0.1);
    border-radius: 1px;
    margin-top: 1px;
    overflow: hidden;
}
.tod-equip-bar-slot__dur-fill {
    height: 100%;
    border-radius: 1px;
    transition: width 0.2s;
}
/* ============================================================
   Equipment Info Panel (click-triggered)
   ============================================================ */
.tod-equip-info-panel {
    position: absolute;
    z-index: 9999;
    min-width: 200px;
    max-width: 280px;
    background: var(--tod-bg-panel, #141414);
    border: 1px solid var(--tod-border-gold, #8B6914);
    border-radius: var(--tod-radius, 4px);
    box-shadow: 0 4px 18px rgba(0,0,0,0.75);
    font-family: var(--tod-font-mono, "Courier New", monospace);
    font-size: 13px;
    color: var(--tod-text, #c8c8c8);
    pointer-events: auto;
    overflow: hidden;
}
.tod-equip-info-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px 5px;
    border-bottom: 1px solid var(--tod-border, #2a2a2a);
    background: rgba(0,0,0,0.35);
}
.tod-equip-info-panel__title {
    font-size: 15px;
    font-weight: bold;
    color: var(--tod-text-bright, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.tod-equip-info-panel__buc-badge {
    font-size: 11px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}
.tod-equip-info-panel__buc-badge--blessed  { background: rgba(255,215,0,0.18); color: #FFD700; border: 1px solid #FFD700; }
.tod-equip-info-panel__buc-badge--cursed   { background: rgba(244,67,54,0.18); color: #F44336; border: 1px solid #F44336; }
.tod-equip-info-panel__buc-badge--uncursed { background: rgba(136,136,136,0.12); color: #888; border: 1px solid #555; }
.tod-equip-info-panel__buc-badge--unknown  { background: rgba(221,221,221,0.1); color: #aaa; border: 1px solid #555; }
.tod-equip-info-panel__close {
    background: none;
    border: none;
    color: var(--tod-text-dim, #666);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 0 0 6px;
    flex-shrink: 0;
}
.tod-equip-info-panel__close:hover { color: var(--tod-text-bright, #fff); }
.tod-equip-info-panel__body {
    padding: 7px 8px 8px;
}
/* Stat grid inside the panel */
.tod-equip-info-stat-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 8px;
    margin-bottom: 5px;
}
.tod-equip-info-stat-label {
    color: var(--tod-text-dim, #666);
    font-size: 12px;
    white-space: nowrap;
}
.tod-equip-info-stat-value {
    color: var(--tod-text, #c8c8c8);
    font-size: 12px;
}
/* Durability bar in the panel */
.tod-equip-info-dur-track {
    height: 5px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 1px;
}
.tod-equip-info-dur-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.2s;
}
/* Divider */
.tod-equip-info-divider {
    border: none;
    border-top: 1px solid var(--tod-border, #2a2a2a);
    margin: 5px 0;
}
/* Effect / status rows */
.tod-equip-info-effect {
    font-size: 12px;
    line-height: 1.4;
    margin-top: 2px;
}

/* ── Stats Screen ───────────────────────────────────────────────────────────── */
.tod-stats-screen {
    grid-area: stats;
    background: var(--tod-bg-panel);
    border-left: 1px solid var(--tod-border);
    padding: 16px 14px;
    overflow: hidden;           /* no outer scroll — inner pane scrolls */
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tod-stat-block {
    border-bottom: 1px solid var(--tod-border);
    padding-bottom: 8px;
}

.tod-stat-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    line-height: 1.6;
}

.tod-stat-label {
    color: var(--tod-text);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.06em;
}

.tod-stat-value {
    color: var(--tod-text-bright);
    font-weight: bold;
}

/* ── Bars ───────────────────────────────────────────────────────────────────── */
.tod-bar-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    margin-bottom: 4px;
}
/* Keep the label and value columns fixed-width so all bar tracks are the same length */
.tod-bar-row .tod-stat-label {
    width: 28px;
    flex-shrink: 0;
    text-align: right;
}
.tod-bar-row .tod-stat-value {
    width: 90px;
    flex-shrink: 0;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tod-bar-track {
    flex: 1;
    height: 8px;
    background: #222;
    border-radius: 4px;
    overflow: hidden;
}

.tod-bar {
    height: 100%;
    border-radius: 4px;
    transition: width var(--tod-transition);
}

.tod-bar--hp  { background: var(--tod-red);    }
.tod-bar--mp  { background: var(--tod-blue);   }
.tod-bar--sta { background: var(--tod-green);  }
.tod-bar--hgr { background: var(--tod-orange); }
/* ATK bar — colour driven by JS class based on ratio vs maxAtk */
.tod-bar--atk             { background: #e8a020;           transition: background var(--tod-transition), width var(--tod-transition); }
.tod-bar--atk.atk-amber   { background: var(--tod-orange); }
.tod-bar--atk.atk-red     { background: var(--tod-red);    }
/* DEF bar — colour driven by JS class based on ratio */
.tod-bar--def             { background: var(--tod-green);  transition: background var(--tod-transition), width var(--tod-transition); }
.tod-bar--def.def-amber   { background: var(--tod-orange); }
.tod-bar--def.def-red     { background: var(--tod-red);    }
/* STR bar */
.tod-bar--str { background: var(--tod-purple); }
/* LD (Load) bar — colour driven by JS class based on load ratio */
.tod-bar--ld             { background: var(--tod-green);  transition: background var(--tod-transition), width var(--tod-transition); }
.tod-bar--ld.ld-amber    { background: var(--tod-orange); }
.tod-bar--ld.ld-red      { background: var(--tod-red);    }
/* Luck bar — bidirectional, grows from centre */
.tod-bar-track--luck {
    position: relative;
    height: 8px;          /* explicit — matches base .tod-bar-track */
    overflow: hidden;
    background: #222;
    border-radius: 4px;
}
/* Centre divider line */
.tod-bar-track--luck::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    background: #555;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 1;
}
/* Positive (green) bar — anchored at centre, grows right */
.tod-luck-bar--pos {
    position: absolute;
    left: 50%;
    top: 0;
    width: 0;             /* JS sets this via inline style */
    height: 100%;
    background: var(--tod-green);
    border-radius: 0 2px 2px 0;
    transition: width var(--tod-transition);
    max-width: 50%;
    z-index: 0;
}
/* Negative (red) bar — anchored at centre, grows left */
.tod-luck-bar {
    position: absolute;
    right: 50%;
    top: 0;
    width: 0;             /* JS sets this via inline style */
    height: 100%;
    background: var(--tod-red);
    border-radius: 2px 0 0 2px;
    transition: width var(--tod-transition);
    max-width: 50%;
    z-index: 0;
}
/* Infected HP bar — sickly green with bubbling animation */
@keyframes tod-bubble {
    0%   { filter: brightness(1.0) saturate(1.2); }
    25%  { filter: brightness(1.3) saturate(1.8) hue-rotate(10deg); }
    50%  { filter: brightness(0.9) saturate(2.0) hue-rotate(-5deg); }
    75%  { filter: brightness(1.2) saturate(1.6) hue-rotate(8deg); }
    100% { filter: brightness(1.0) saturate(1.2); }
}
.tod-bar--hp.tod-infected {
    background: #4a8c3f !important;   /* sickly muted green — distinct from sta bar */
    animation: tod-bubble 1.8s ease-in-out infinite;
    box-shadow: 0 0 6px 1px rgba(74, 140, 63, 0.7);
}

/* Stat comparison delta labels in inventory tooltips */
.tod-stat-delta-pos { color: var(--tod-green); font-weight: bold; margin-left: 4px; }
.tod-stat-delta-neg { color: var(--tod-red);   font-weight: bold; margin-left: 4px; }

/* Relic alignment labels */
.tod-relic-align                { font-style: italic; font-size: 0.85em; margin-left: 4px; }
.tod-relic-align--lawful        { color: var(--tod-gold);     }
.tod-relic-align--neutral       { color: var(--tod-text);     }
.tod-relic-align--chaotic       { color: var(--tod-red);      }
.tod-relic-align--unaligned     { color: var(--tod-text-dim); }

/* Item status badges (Blessed / Cursed / Uncursed) in relic offer menu */
.tod-item-status                { font-size: 0.82em; margin-left: 4px; padding: 1px 4px; border-radius: 3px; }
.tod-item-status--blessed       { color: var(--tod-gold); border: 1px solid var(--tod-gold); }
.tod-item-status--cursed        { color: var(--tod-red);  border: 1px solid var(--tod-red);  }
.tod-item-status--uncursed      { color: var(--tod-text-dim); border: 1px solid var(--tod-text-dim); }

/* ── System Messages / Log ──────────────────────────────────────────────────── */
.tod-log-screen {
    grid-area: log;
    background: var(--tod-bg-panel);
    border-top: 1px solid var(--tod-border);
    overflow: hidden;
}

.tod-log {
    height: 100%;
    overflow-y: auto;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.5;
    scroll-behavior: smooth;
}

.tod-log p {
    margin: 0;
    padding: 1px 0;
    color: var(--tod-text);
}

.tod-log p:last-child {
    color: var(--tod-text-bright);
}

/* ── Log message levels ─────────────────────────────────────────────────── */
.tod-log p.tod-log--warning {
    color: #e8a020;  /* amber — item critically damaged / destroyed */
    font-weight: 600;
}
.tod-log p.tod-log--danger {
    color: #e03030;  /* red — severe event (item destroyed, death warning) */
    font-weight: 600;
}
.tod-log p.tod-log--success {
    color: #4caf50;  /* green — positive outcome */
}
.tod-log p.tod-log--info {
    color: #5bc8e8;  /* cyan — neutral informational */
}
.tod-log p.tod-log--quest-fail {
    display: block;
    margin: 4px 0;
    padding: 6px 10px;
    background: rgba(120, 0, 0, 0.35);
    border-left: 3px solid #c0392b;
    border-radius: 2px;
    color: #ff6b6b;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.6;
    white-space: pre-line;
}

.tod-log p.tod-log--special {
    color: #d8a8f8;  /* soft violet -- rare/magical discovery (Bottled Fairy, unique finds) */
    font-weight: 600;
    font-style: italic;
}
.tod-log p.tod-log--blood {
    display: block;
    margin: 3px 0;
    padding: 5px 10px;
    background: rgba(100, 0, 0, 0.30);
    border-left: 3px solid #990000;
    border-radius: 2px;
    color: #ff4444;
    font-weight: 700;
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0.03em;
    line-height: 1.55;
    text-shadow: 0 0 6px rgba(200, 0, 0, 0.55);
}

/* ── Khazad-Zul dwarven ambient log messages ───────────────────────────── */
.tod-log p.tod-log--dwarf {
    display: block;
    margin: 3px 0;
    padding: 5px 10px;
    background: rgba(40, 28, 10, 0.45);
    border-left: 3px solid #c8a060;
    border-radius: 2px;
    color: #e0b870;
    font-weight: 600;
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0.02em;
    line-height: 1.55;
    text-shadow: 0 0 5px rgba(200, 140, 40, 0.45);
}

/* ── Controls Panel (tabbed keybinding reference) ──────────────────────── */
.tod-keybind-panel {
    display: flex;
    flex-direction: column;
    flex: 1;                        /* fill remaining sidebar space */
    min-height: 0;                  /* allow flex child to shrink */
    padding-top: 8px;
    border-top: 1px solid var(--tod-border);
    overflow: hidden;
}

.tod-keybind-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tod-text-bright);
    font-weight: bold;
    margin: 0 0 6px;
}

/* Tab bar */
.tod-kb-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.tod-kb-tab {
    flex: 1;
    background: #1a1a1a;
    border: 1px solid var(--tod-border);
    border-radius: var(--tod-radius) var(--tod-radius) 0 0;
    color: var(--tod-text);
    font-size: 12px;
    font-family: var(--tod-font-ui);
    padding: 4px 2px;
    cursor: pointer;
    transition: background var(--tod-transition), color var(--tod-transition);
}

.tod-kb-tab:hover {
    background: #2a2a2a;
    color: var(--tod-text-bright);
}

.tod-kb-tab--active {
    background: var(--tod-gold);
    color: #000;
    border-color: var(--tod-gold);
    font-weight: bold;
}

/* Tab panes */
.tod-kb-pane {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    position: relative;
}

.tod-kb-pane--hidden {
    display: none;
}

/* Shared keybind row (Actions + UI tabs) */
.tod-keybind-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Shift content left by the key-badge width so the scrollbar
       never overlaps the key badges on the right edge. */
    padding-right: 34px;
}

.tod-keybind-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--tod-text);
}

.tod-keybind-label {
    color: var(--tod-text);
    flex: 1;
    padding-right: 6px;
}

.tod-keybind-key {
    background: #1e1e1e;
    border: 1px solid #666;
    border-radius: 3px;
    padding: 1px 6px;
    color: var(--tod-gold);
    font-family: var(--tod-font-mono);
    font-size: 12px;
    font-weight: bold;
    flex-shrink: 0;
    min-width: 22px;
    text-align: center;
    transition: background 0.15s, color 0.15s;
}

/* Keybind row - clickable, highlights on hover */
.tod-keybind-row:hover {
    background: rgba(255, 215, 0, 0.06);
    border-radius: 3px;
}

/* Row currently being reassigned */
.tod-kb-row--listening {
    background: rgba(255, 215, 0, 0.08);
    border-radius: 3px;
}
.tod-kb-row--listening .tod-keybind-key {
    background: #3a2000;
    border-color: var(--tod-gold);
    color: var(--tod-gold);
    animation: tod-kb-pulse 0.7s ease-in-out infinite alternate;
}
@keyframes tod-kb-pulse {
    from { opacity: 1; }
    to   { opacity: 0.4; }
}

/* ── PWA standalone mode: keybind rows are read-only (touch controls used) ── */
@media ( display-mode: standalone ) {
    .tod-keybind-row,
    .tod-compass-cell:not( .tod-compass-cell--center ) {
        opacity:        0.5;
        cursor:         default !important;
        pointer-events: none;
    }
    .tod-keybind-row:hover {
        background: transparent;
    }
    /* Small notice above the controls tabs to signal read-only */
    #tod-controls-section::before {
        content:        '\1F512  View only in PWA mode';
        display:        block;
        font-size:      10px;
        color:          rgba( 200, 134, 10, 0.6 );
        text-align:     center;
        padding:        4px 0 2px;
        letter-spacing: 0.04em;
    }
}

/* ── Auto-pickup preferences tab ─────────────────────────────────────────── */
/* Instruction text above the checkbox grid */
.tod-pickup-pref-desc {
    font-size: 12px;
    font-family: var(--tod-font-ui);
    color: var(--tod-text);
    line-height: 1.5;
    text-align: left;
    margin: 0 0 6px;
    padding: 0;
}
/* Select All / Deselect All row */
.tod-pickup-pref-controls {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}
.tod-pickup-pref-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 0;
}
/* Two-column grid for checkboxes */
.tod-pickup-pref-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 4px;
}
.tod-pickup-pref-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-family: var(--tod-font-ui);
    color: var(--tod-text);
    cursor: pointer;
    padding: 3px 4px;
    border-radius: 3px;
    transition: background 0.1s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tod-pickup-pref-row:hover { background: rgba(255,255,255,0.05); }
.tod-pickup-pref-row input[type="checkbox"] {
    accent-color: var(--tod-gold);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    cursor: pointer;
}
.tod-pickup-pref-note {
    font-size: 12px;
    font-family: var(--tod-font-ui);
    color: #6a5a8a;
    margin-top: 4px;
    padding: 0 4px;
}

/* Scroll overflow indicator */
.tod-scroll-indicator {
    display: none;                  /* hidden by default; JS shows it */
    position: sticky;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-size: 10px;
    line-height: 1;
    padding: 4px 0 2px;
    color: var(--tod-gold);
    background: linear-gradient( transparent, var(--tod-bg-panel) 60% );
    pointer-events: none;
    user-select: none;
    letter-spacing: 0.05em;
}

.tod-scroll-indicator--visible {
    display: block;
}

/* Compass grid (Movement tab) */
.tod-keybind-list--stair {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--tod-border);
}

.tod-compass {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px 0;
}

.tod-compass-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    border: 1px solid var(--tod-border);
    border-radius: var(--tod-radius);
    padding: 6px 2px;
    gap: 3px;
    min-height: 44px;
}

.tod-compass-cell--center {
    background: #1e1a0e;
    border-color: #6b5200;
    cursor: default;
}
.tod-compass-rose {
    width: 32px;
    height: 32px;
    display: block;
    flex-shrink: 0;
}

.tod-compass-dir {
    font-size: 10px;
    color: var(--tod-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}

/* Action Buttons — sticky at bottom of sidebar, single row of 3 cards */
.tod-action-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    padding: 8px 0 0;
    flex-shrink: 0;
    border-top: 1px solid var(--tod-border);
}

/* Card layout for the three action buttons */
.tod-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px 7px;
    border-radius: 5px;
    text-align: center;
    min-height: 62px;
    transition: background var(--tod-transition), color var(--tod-transition),
                border-color var(--tod-transition), box-shadow var(--tod-transition);
}
.tod-action-card__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: block;
}
.tod-action-card__label {
    display: block;
    text-transform: uppercase;
    font-family: var(--tod-font-mono);
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.04em;
    line-height: 1.3;
    margin-top: auto;
}
/* Save & Exit — gold/primary */
.tod-action-card--save {
    border-color: var(--tod-border-gold);
    color: var(--tod-gold);
    background: rgba(255, 215, 0, 0.06);
}
.tod-action-card--save:hover {
    background: var(--tod-gold);
    color: #000;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.35);
}
/* Reset Floor — amber/warning */
.tod-action-card--reset {
    border-color: #c87800;
    color: #c87800;
    background: rgba(200, 120, 0, 0.06);
}
.tod-action-card--reset:hover {
    background: #c87800;
    color: #fff;
    box-shadow: 0 0 8px rgba(200, 120, 0, 0.35);
}
/* Quit Game — red/danger */
.tod-action-card--quit {
    border-color: var(--tod-red);
    color: var(--tod-red);
    background: rgba(244, 67, 54, 0.06);
}
.tod-action-card--quit:hover {
    background: var(--tod-red);
    color: #fff;
    box-shadow: 0 0 8px rgba(244, 67, 54, 0.35);
}

/* ── Quit / Cowardly-exit confirmation warning text ────────────────────── */
.tod-quit-warning {
    color: var(--tod-text);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 8px;
}

.tod-quit-warning strong {
    color: var(--tod-red);
}

/* ── Floor-loading overlay ─────────────────────────────────────────────────────── */
.tod-overlay-inner--loading {
    background: transparent;
    border: none;
    text-align: center;
    padding: 40px;
}

.tod-loading-msg {
    color: var(--tod-gold);
    font-family: var(--tod-font-mono);
    font-size: 18px;
    letter-spacing: 0.08em;
    animation: tod-pulse 1.2s ease-in-out infinite;
}

@keyframes tod-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

/* ── Overlays ───────────────────────────────────────────────────────────────── */
.tod-overlay {
    position: absolute;  /* inside #tod-wrapper — works in both normal and fullscreen mode */
    inset: 0;
    background: var(--tod-bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.tod-overlay.hidden {
    display: none;
}

.tod-overlay-inner {
    background: var(--tod-bg-panel);
    border: 1px solid var(--tod-border-gold);
    border-radius: var(--tod-radius);
    padding: 24px 28px;
    min-width: 340px;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    color: var(--tod-text);
    font-family: var(--tod-font-ui);
}

.tod-overlay-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--tod-gold);
    margin-bottom: 16px;
    font-family: var(--tod-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.tod-overlay-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    color: var(--tod-text-dim);
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    transition: color var(--tod-transition);
}

.tod-overlay-close:hover {
    color: var(--tod-text-bright);
}

/* ── Shop Overlay (wider to fit three columns) ────────────────────── */
.tod-overlay-inner--shop {
    max-width: 920px;
    min-width: 700px;
    /* Height is controlled by the scrollable item columns, not the overlay */
    overflow-y: visible;
}

/* ── Armory Overlay ──────────────────────────────────────────────── */
#tod-overlay-armory .tod-overlay-inner {
    display: flex;
    flex-direction: column;
    overflow: hidden;          /* prevent the panel itself from growing */
    width: 580px;
    height: 520px;             /* same fixed height as the Inventory overlay */
    max-width: 96vw;
    max-height: 90vh;
    min-width: 0;
    box-sizing: border-box;
}
.tod-overlay-inner--armory {
    max-width: 580px;
    min-width: 320px;
}
/* Armory body must be a flex column so it fills the remaining overlay height */
.tod-armory-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}
/* Armorer panes fill remaining height and scroll their content */
#tod-overlay-armory .tod-inv-pane {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}
/* Armorer trade lists scroll inside their pane */
#tod-overlay-armory .tod-trade-list {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}
.tod-armory-subtitle {
    font-size: 12px;
    color: var(--tod-text-dim);
    margin: -8px 0 10px;
    font-family: var(--tod-font-ui);
    flex-shrink: 0;
}
.tod-armory-subtitle strong {
    color: var(--tod-gold);
}
/* ── Armory trade-row action buttons ─────────────────────────────── */
.tod-armory-buy-btn,
.tod-armory-sell-btn,
.tod-armory-repair-btn {
    padding: 3px 10px;
    font-size: 11px;
    font-family: var(--tod-font-mono);
    background: #222;
    border: 1px solid var(--tod-border);
    border-radius: var(--tod-radius);
    color: var(--tod-text);
    cursor: pointer;
    transition: background var(--tod-transition), color var(--tod-transition), border-color var(--tod-transition);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Buy — green hover */
.tod-armory-buy-btn:hover:not(:disabled) {
    background: var(--tod-green);
    color: #000;
    border-color: var(--tod-green);
}

/* Sell — gold/amber hover */
.tod-armory-sell-btn:hover:not(:disabled) {
    background: var(--tod-gold);
    color: #000;
    border-color: var(--tod-gold);
}

/* Repair — teal hover */
.tod-armory-repair-btn:hover:not(:disabled) {
    background: #3cb87a;
    color: #000;
    border-color: #3cb87a;
}

/* Disabled state for all three */
.tod-armory-buy-btn:disabled,
.tod-armory-sell-btn:disabled,
.tod-armory-repair-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    color: #666;
    border-color: #444;
}

/* ── Fletcher (Archery Shop) overlay ──────────────────────────────────── */
#tod-overlay-fletcher .tod-overlay-inner {
    display: flex;
    flex-direction: column;
    overflow: hidden;          /* prevent the panel itself from growing */
    width: 480px;
    height: 520px;             /* same fixed height as the Inventory and Armorer overlays */
    max-width: 96vw;
    max-height: 90vh;
    min-width: 0;
    box-sizing: border-box;
}
.tod-overlay-inner--fletcher {
    max-width: 480px;
    min-width: 320px;
}
/* Fletcher body must be a flex column so it fills the remaining overlay height */
.tod-fletcher-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}
/* Fletcher panes fill remaining height and scroll their content */
#tod-overlay-fletcher .tod-inv-pane {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}
/* Fletcher trade lists scroll inside their pane */
#tod-overlay-fletcher .tod-trade-list {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}
.tod-fletcher-subtitle {
    font-size: 12px;
    color: var(--tod-text-dim);
    margin: -8px 0 10px;
    font-family: var(--tod-font-ui);
    flex-shrink: 0;
}
.tod-fletcher-subtitle strong {
    color: #88DD44;
}
/* ── Fletcher trade-row action buttons ──────────────────────────────────── */
.tod-fletcher-buy-btn,
.tod-fletcher-sell-btn {
    padding: 3px 10px;
    font-size: 11px;
    font-family: var(--tod-font-mono);
    background: #222;
    border: 1px solid var(--tod-border);
    border-radius: var(--tod-radius);
    color: var(--tod-text);
    cursor: pointer;
    transition: background var(--tod-transition), color var(--tod-transition), border-color var(--tod-transition);
    flex-shrink: 0;
    white-space: nowrap;
}
/* Buy — green hover */
.tod-fletcher-buy-btn:hover:not(:disabled) {
    background: #88DD44;
    color: #000;
    border-color: #88DD44;
}
/* Sell — gold/amber hover */
.tod-fletcher-sell-btn:hover:not(:disabled) {
    background: var(--tod-gold);
    color: #000;
    border-color: var(--tod-gold);
}
/* Disabled state */
.tod-fletcher-buy-btn:disabled,
.tod-fletcher-sell-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    color: #666;
    border-color: #444;
}
/* Repair button — same base style as buy/sell */
.tod-fletcher-repair-btn {
    padding: 3px 10px;
    font-size: 11px;
    font-family: var(--tod-font-mono);
    background: #222;
    border: 1px solid var(--tod-border);
    border-radius: var(--tod-radius);
    color: var(--tod-text);
    cursor: pointer;
    transition: background var(--tod-transition), color var(--tod-transition), border-color var(--tod-transition);
    flex-shrink: 0;
    white-space: nowrap;
}
/* Repair — teal hover (matches armorer) */
.tod-fletcher-repair-btn:hover:not(:disabled) {
    background: #3cb87a;
    color: #000;
    border-color: #3cb87a;
}
.tod-fletcher-repair-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    color: #666;
    border-color: #444;
}

/* ── Dragonscale Armory Tab ─────────────────────────────────────── */

/* Dragonscale tab button — golden-red accent */
.tod-inv-tab--dragonscale {
    color: #e8602a;
    border-color: #7a3010;
    font-weight: 700;
}
.tod-inv-tab--dragonscale.tod-inv-tab--active,
.tod-inv-tab--dragonscale:hover {
    background: rgba(232, 96, 42, 0.18);
    color: #ff9060;
    border-color: #e8602a;
}
/* Upgrade tab */
.tod-inv-tab--upgrade {
    color: #7ec8e3;
    border-color: #2a5a6a;
    font-weight: 700;
}
.tod-inv-tab--upgrade.tod-inv-tab--active,
.tod-inv-tab--upgrade:hover {
    background: rgba(126, 200, 227, 0.15);
    color: #b0e8ff;
    border-color: #7ec8e3;
}
/* Upgrade tab row button */
.tod-armory-upgrade-btn {
    background: #1a3a4a;
    color: #7ec8e3;
    border: 1px solid #2a5a6a;
    padding: 4px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    min-height: 44px;
    touch-action: manipulation;
}
.tod-armory-upgrade-btn:hover:not(:disabled) {
    background: #2a5a6a;
    color: #b0e8ff;
    border-color: #7ec8e3;
}
.tod-armory-upgrade-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Scales count line */
.tod-ds-scales-count {
    font-size: 12px;
    color: var(--tod-text-dim);
    margin-bottom: 8px;
}
.tod-ds-scales-count strong {
    color: #ff9060;
}

/* Busy banner — shown while Armorer is crafting */
.tod-ds-busy-banner {
    margin: 0 0 10px;
    padding: 8px 12px;
    background: rgba(232, 96, 42, 0.12);
    border-left: 3px solid #e8602a;
    border-radius: 3px;
    font-size: 12px;
    color: #e8c0a0;
    line-height: 1.6;
}
.tod-ds-turns-left {
    color: #ff9060;
    font-weight: 700;
}

/* Busy note shown in other tabs when Armorer is crafting */
.tod-ds-busy-note {
    font-size: 12px;
    color: #e8602a;
    margin: 0 0 8px;
    padding: 4px 8px;
    background: rgba(232, 96, 42, 0.08);
    border-radius: 3px;
}

/* Section headings inside the dragonscale pane */
.tod-ds-section {
    margin-bottom: 12px;
}
.tod-ds-section > strong {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tod-text-dim);
    margin-bottom: 4px;
}

/* Queue list */
.tod-ds-queue-list {
    margin: 4px 0 0 16px;
    padding: 0;
    font-size: 12px;
    color: #b0a090;
}

/* Ready-for-pickup row */
.tod-ds-ready-row {
    background: rgba(78, 205, 120, 0.08);
    border-left: 3px solid #4caf50;
}
.tod-ds-ready-name {
    color: #4caf50;
    font-weight: 700;
}

/* Craft row */
.tod-ds-craft-row {
    border-left: 3px solid transparent;
}
.tod-ds-craft-row:hover {
    border-left-color: #e8602a;
    background: rgba(232, 96, 42, 0.06);
}

/* Craft button */
.tod-ds-craft-btn {
    padding: 3px 10px;
    font-size: 11px;
    font-family: var(--tod-font-mono);
    background: #222;
    border: 1px solid #7a3010;
    border-radius: var(--tod-radius);
    color: #e8602a;
    cursor: pointer;
    transition: background var(--tod-transition), color var(--tod-transition), border-color var(--tod-transition);
    flex-shrink: 0;
    white-space: nowrap;
}
.tod-ds-craft-btn:hover:not(:disabled) {
    background: #e8602a;
    color: #000;
    border-color: #e8602a;
}
.tod-ds-craft-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    color: #666;
    border-color: #444;
}

/* Pickup button */
.tod-ds-pickup-btn {
    padding: 3px 10px;
    font-size: 11px;
    font-family: var(--tod-font-mono);
    background: #222;
    border: 1px solid #3a8040;
    border-radius: var(--tod-radius);
    color: #4caf50;
    cursor: pointer;
    transition: background var(--tod-transition), color var(--tod-transition);
    flex-shrink: 0;
    white-space: nowrap;
}
.tod-ds-pickup-btn:hover {
    background: #4caf50;
    color: #000;
    border-color: #4caf50;
}

/* Small meta line under piece name */
.tod-ds-meta {
    display: block;
    font-size: 10px;
    color: var(--tod-text-dim);
    margin-top: 1px;
}

/* ── Log: Dragonscale craft complete message ─────────────────────── */
.tod-log p.tod-log--dragonscale-complete {
    display: block;
    margin: 4px 0;
    padding: 6px 10px;
    background: rgba(232, 96, 42, 0.18);
    border-left: 3px solid #e8602a;
    border-radius: 2px;
    color: #ff9060;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    line-height: 1.6;
}

/* ── Full Map Overlay ─────────────────────────────────────────────── */
.tod-overlay-inner--fullmap {
    max-width: 90vw;
    max-height: 90vh;
}

.tod-fullmap-canvas {
    display: block;
    max-width: 100%;
    image-rendering: pixelated;
}

/* ── Level Up Overlay ───────────────────────────────────────────────────────── */
.tod-overlay-inner--levelup {
    background: transparent;
    border: none;
    text-align: center;
    pointer-events: none;
}

.tod-levelup-msg {
    font-size: 36px;
    font-weight: bold;
    color: var(--tod-gold);
    font-family: var(--tod-font-mono);
    text-shadow: 0 0 20px var(--tod-gold), 0 0 40px rgba(255,215,0,0.5);
    animation: tod-levelup-pop 0.4s ease-out;
}

@keyframes tod-levelup-pop {
    0%   { transform: scale(0.5); opacity: 0; }
    70%  { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1);   opacity: 1; }
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.tod-btn {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid var(--tod-border-gold);
    border-radius: var(--tod-radius);
    background: transparent;
    color: var(--tod-gold);
    font-family: var(--tod-font-mono);
    font-size: 13px;
    cursor: pointer;
    transition: background var(--tod-transition), color var(--tod-transition);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tod-btn:hover {
    background: var(--tod-gold);
    color: #000;
}

.tod-btn--primary {
    background: var(--tod-gold);
    color: #000;
    font-weight: bold;
}

.tod-btn--primary:hover {
    background: #e6c200;
}

.tod-btn--danger {
    border-color: var(--tod-red);
    color: var(--tod-red);
}

.tod-btn--danger:hover {
    background: var(--tod-red);
    color: #fff;
}

.tod-btn--warning {
    border-color: #c87800;
    color: #c87800;
}

.tod-btn--warning:hover {
    background: #c87800;
    color: #fff;
}

/* Resume Adventure button — teal/green to stand apart from Begin New Adventure (gold) */
.tod-btn--resume {
    border-color: #3cb87a;
    color: #3cb87a;
    font-weight: bold;
}

.tod-btn--resume:hover {
    background: #3cb87a;
    color: #000;
}

.tod-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    justify-content: center;
}

/* ── Action card row (Resume + Begin New Adventure) ─────────────────────────── */
/* Scoped under .tod-action-card-row to avoid collision with sidebar .tod-action-card */
.tod-action-card-row {
    display:         flex;
    flex-direction:  row;
    gap:             14px;
    align-items:     stretch;
    margin-top:      16px;
}

.tod-action-card-row .tod-action-card {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    flex:            1 1 0;
    min-width:       0;
    padding:         20px 16px;
    border-radius:   8px;
    border:          2px solid;
    background:      rgba(0,0,0,0.45);
    text-align:      center;
    cursor:          pointer;
    font-family:     var(--tod-font-mono);
    transition:      background 0.18s, border-color 0.18s, box-shadow 0.18s;
    min-height:      unset;
    justify-content: center;
}
.tod-action-card-row .tod-action-card:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* Resume card — teal accent */
.tod-action-card-row .tod-action-card--resume {
    border-color: #3cb87a;
    color:        #3cb87a;
}
.tod-action-card-row .tod-action-card--resume:hover,
.tod-action-card-row .tod-action-card--resume:focus-visible {
    background:  rgba(60,184,122,0.15);
    box-shadow:  0 0 12px rgba(60,184,122,0.35);
}

/* Begin New Adventure card — gold/purple accent */
.tod-action-card-row .tod-action-card--begin {
    border-color: var(--tod-border-gold);
    color:        var(--tod-gold);
}
.tod-action-card-row .tod-action-card--begin:hover,
.tod-action-card-row .tod-action-card--begin:focus-visible {
    background:  rgba(212,175,55,0.15);
    box-shadow:  0 0 12px rgba(212,175,55,0.35);
}

.tod-action-card-row .tod-action-card__icon {
    font-size:   2rem;
    line-height: 1;
    width:       auto;
    height:      auto;
}

.tod-action-card-row .tod-action-card__label {
    font-size:      0.80rem;
    font-weight:    700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin-top:     0;
}

.tod-action-card-row .tod-action-card__sub {
    font-size:   0.70rem;
    color:       var(--tod-text-dim, #888);
    font-family: var(--tod-font-ui);
}

/* ── Character Creation Form ────────────────────────────────────────────────── */
.tod-char-create-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 20px !important;
}

.tod-form-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tod-form-row label {
    min-width: 80px;
    color: var(--tod-text-dim);
    font-size: 13px;
}

.tod-form-row input[type="text"],
.tod-form-row select {
    flex: 1;
    background: #1a1a1a !important;
    border: 1px solid var(--tod-border) !important;
    border-radius: var(--tod-radius);
    color: #ffffff !important;
    padding: 6px 10px;
    font-family: var(--tod-font-mono);
    font-size: 13px;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff;
}

.tod-form-row input[type="text"]::placeholder {
    color: #666 !important;
    -webkit-text-fill-color: #666 !important;
    opacity: 1;
}

.tod-form-row input[type="text"]:focus,
.tod-form-row select:focus {
    outline: none;
    border-color: var(--tod-gold) !important;
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.25);
}

.tod-form-row select option {
    background: #1a1a1a;
    color: #ffffff;
}

.tod-form-row--align {
    gap: 16px;
}

.tod-form-row--align .tod-form-label {
    min-width: 80px;
    color: var(--tod-text-dim);
    font-size: 13px;
    flex-shrink: 0;
}

.tod-form-row--align label {
    min-width: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

/* ── Option Cards (Alignment & Gender) ───────────────────────────── */
.tod-form-row--cards {
    align-items: flex-start;
    gap: 10px;
}

.tod-form-row--cards .tod-form-label {
    min-width: 80px;
    color: var(--tod-text-dim);
    font-size: 13px;
    flex-shrink: 0;
    padding-top: 10px;
}

.tod-option-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
}

.tod-option-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 68px;
    padding: 8px 6px 7px;
    background: #1a1a1a;
    border: 1px solid var(--tod-border);
    border-radius: 6px;
    color: var(--tod-text-dim);
    font-family: var(--tod-font-mono);
    font-size: 11px;
    cursor: pointer;
    transition: border-color var(--tod-transition), color var(--tod-transition), background var(--tod-transition);
    user-select: none;
}

.tod-option-card:hover:not(:disabled) {
    border-color: var(--tod-border-gold);
    color: var(--tod-text);
    background: #222;
}

.tod-option-card.is-selected {
    border-color: var(--tod-gold);
    color: var(--tod-gold);
    background: rgba(255, 215, 0, 0.07);
}

.tod-option-card:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Locked race/class cards — distinct from generic :disabled */
.tod-option-card--locked {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: #3a3a3a;
    color: #555;
    position: relative;
}

.tod-card-lock {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 10px;
    height: 10px;
    color: #666;
    flex-shrink: 0;
}

.tod-card-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Race and class card rows: max 4 cards per row */
.tod-option-cards--race,
.tod-option-cards--class {
    display: grid;
    grid-template-columns: repeat(4, 68px);
    gap: 8px;
}

.tod-option-card--evil {
    color: #b44;
    border-color: #5a1a1a;
}

.tod-option-card--evil:hover:not(:disabled) {
    border-color: #c44;
    color: #e55;
    background: rgba(180, 40, 40, 0.1);
}

.tod-option-card--evil.is-selected {
    border-color: #e55;
    color: #ff6666;
    background: rgba(200, 40, 40, 0.12);
}

/* Widen the character creation overlay to accommodate race/class card grids */
#tod-overlay-char-create .tod-overlay-inner {
    min-width: 420px;
    max-width: 600px;
}
/* Two-column layout: form col + vertical divider + preview col */
.tod-overlay-inner--char-create {
    max-width: 960px !important;
    padding: 24px 24px;
}
.tod-char-create-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
}
.tod-char-create-form-col {
    flex: 0 0 auto;
    min-width: 420px;
    max-width: 600px;
    padding-bottom: 20px; /* space between cards and overlay bottom border */
}
/* Vertical divider — same colour as the keybind-profile-row top border */
.tod-char-create-divider {
    width: 1px;
    align-self: stretch;
    background: var(--tod-border);
    margin: 0 20px;
    flex-shrink: 0;
}
/* Preview column */
.tod-char-create-preview-col {
    flex: 0 0 200px;
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    padding-top: 2px;
    overflow: visible;
    word-break: break-word;
}
.tod-char-preview-title {
    font-family: var(--tod-font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tod-text-dim);
    margin-bottom: 12px;
}
.tod-char-preview-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Each stat row in the preview — label left, dotted fill, value right */
.tod-char-preview-stat {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--tod-font-mono);
    font-size: 12px;
    line-height: 1.6;
}
.tod-char-preview-stat__label {
    color: var(--tod-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    flex-shrink: 0;
}
.tod-char-preview-stat__fill {
    flex: 1;
    border-bottom: 1px dotted rgba(255,255,255,0.15);
    margin-bottom: 3px;
    min-width: 8px;
}
.tod-char-preview-stat__value {
    color: #f0d060;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
    flex-shrink: 0;
}
/* Bonus stats (ATK / DEF / LCK) — compact, no bar */
.tod-char-preview-bonus {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--tod-border);
}
.tod-char-preview-bonus__row {
    display: flex;
    justify-content: space-between;
    font-family: var(--tod-font-mono);
    font-size: 11px;
}
.tod-char-preview-bonus__row span:first-child { color: var(--tod-text-dim); }
.tod-char-preview-bonus__row span:last-child  { color: var(--tod-text-bright); }
/* Traits section */
.tod-char-preview-traits {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--tod-border);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.tod-char-preview-traits__heading {
    font-family: var(--tod-font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tod-text-dim);
    margin-bottom: 2px;
}
.tod-char-preview-trait {
    font-family: var(--tod-font-mono);
    font-size: 11px;
    color: #c8a84a;
}
/* Starting weapon section */
.tod-char-preview-weapon {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--tod-border);
}
.tod-char-preview-weapon__heading {
    font-family: var(--tod-font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tod-text-dim);
    margin-bottom: 3px;
}
.tod-char-preview-weapon__name {
    font-family: var(--tod-font-mono);
    font-size: 12px;
    color: var(--tod-text-bright);
}
/* Starting equipment list */
.tod-char-preview-items {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--tod-border);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.tod-char-preview-items__heading {
    font-family: var(--tod-font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tod-text-dim);
    margin-bottom: 2px;
}
.tod-char-preview-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-family: var(--tod-font-mono);
    font-size: 11px;
    padding-bottom: 3px;
}
.tod-char-preview-item__slot {
    color: var(--tod-text-dim);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tod-char-preview-item__name {
    color: var(--tod-text-bright);
    padding-left: 6px;
    word-break: break-word;
}
/* Constrain the character name input and keybind selector to match the 4-card grid width (4×68px + 3×8px gap) */
#tod-char-name,
#tod-char-keybind-profile {
    width: 296px;
    max-width: 296px;
    box-sizing: border-box;
}

.tod-stat-preview {
    background: #111;
    border: 1px solid var(--tod-border);
    border-radius: var(--tod-radius);
    padding: 8px 12px;
    font-size: 12px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 12px;
}

.tod-stat-preview span {
    color: var(--tod-text-dim);
}

.tod-stat-preview strong {
    color: var(--tod-text-bright);
}

/* ── Keybind Profile Row (char-create) ─────────────────────────────────────── */
#tod-keybind-profile-row {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--tod-border);
}
#tod-keybind-profile-row > label {
    min-width: 80px;
    color: var(--tod-text-dim);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    flex-shrink: 0;
}
#tod-keybind-profile-row > label::before {
    content: '⌨';
    font-size: 14px;
    opacity: 0.7;
}
#tod-char-keybind-profile {
    flex: 1;
    background: #1a1a1a !important;
    border: 1px solid var(--tod-border) !important;
    border-radius: var(--tod-radius);
    color: #ffffff !important;
    padding: 6px 10px;
    font-family: var(--tod-font-mono);
    font-size: 13px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    padding-right: 28px;
}
#tod-char-keybind-profile:focus {
    outline: none;
    border-color: var(--tod-gold) !important;
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.25);
}
#tod-char-keybind-profile option {
    background: #1a1a1a;
    color: #ffffff;
}

/* ── Inventory / Spellbook Lists ────────────────────────────────────────────── */
.tod-inv-list,
.tod-spell-list,
.tod-equip-list,
.tod-save-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tod-inv-item,
.tod-spell-item,
.tod-equip-slot,
.tod-save-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: #111;
    border: 1px solid var(--tod-border);
    border-radius: var(--tod-radius);
    font-size: 13px;
}

.tod-inv-name,
.tod-spell-name {
    flex: 1;
    min-width: 0;           /* allow flex item to shrink below content width */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--tod-text-bright);
}

.tod-inv-weight,
.tod-spell-cost {
    color: var(--tod-text-dim);
    font-size: 11px;
}

.tod-inv-empty,
.tod-spell-empty {
    color: var(--tod-text-dim);
    font-style: italic;
    padding: 8px;
}

/* ── Durability indicator ─────────────────────────────────────────────────── */
.tod-inv-durability {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.tod-dur-bar {
    display: inline-block;
    height: 6px;
    border-radius: 3px;
    min-width: 2px;
    max-width: 32px;
    background: #4caf50;  /* overridden inline */
    transition: width 0.2s, background 0.2s;
}
.tod-dur-label {
    font-size: 10px;
    color: var(--tod-text-dim);
    white-space: nowrap;
}

.tod-btn-identify {
    padding: 3px 8px;
    font-size: 11px;
    background: #2a1f00;
    border: 1px solid var(--tod-gold);
    border-radius: var(--tod-radius);
    color: var(--tod-gold);
    cursor: pointer;
    transition: background var(--tod-transition);
    min-height: 44px;           /* iOS/iPadOS minimum tap target */
    touch-action: manipulation; /* prevent double-tap zoom on iOS */
    min-width: 52px;
    width: 52px;
    text-align: center;
    flex-shrink: 0;
    box-sizing: border-box;
}

.tod-btn-identify:hover {
    background: var(--tod-gold);
    color: #000;
    border-color: var(--tod-gold);
}

/* Inventory footer (Identify All button) */
.tod-inv-footer {
    display: flex;
    justify-content: center;
    padding: 10px 0 4px;
    border-top: 1px solid var(--tod-border);
    margin-top: 6px;
}

.tod-btn-identify-all {
    padding: 5px 18px;
    font-size: 12px;
    background: #2a1f00;
    border: 1px solid var(--tod-gold);
    border-radius: var(--tod-radius);
    color: var(--tod-gold);
    cursor: pointer;
    transition: background var(--tod-transition);
    font-weight: bold;
    letter-spacing: 0.03em;
}

.tod-btn-identify-all:hover {
    background: var(--tod-gold);
    color: #000;
    border-color: var(--tod-gold);
}

.tod-btn-use,
.tod-btn-equip,
.tod-btn-drop,
.tod-btn-throw,
.tod-btn-select-spell,
.tod-btn-load-save {
    padding: 3px 8px;
    font-size: 11px;
    background: #222;
    border: 1px solid var(--tod-border);
    border-radius: var(--tod-radius);
    color: var(--tod-text);
    cursor: pointer;
    transition: background var(--tod-transition);
    min-height: 44px;           /* iOS/iPadOS minimum tap target */
    touch-action: manipulation; /* prevent double-tap zoom on iOS */
}

/* ── Uniform inventory action button width ───────────────────────────────── */
/* All per-item action buttons share the same fixed width so columns align.  */
.tod-inv-btn {
    min-width: 52px;
    width: 52px;
    text-align: center;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* ── Lock button ─────────────────────────────────────────────────────────── */
.tod-btn-lock {
    padding: 3px 4px;
    font-size: 13px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--tod-radius);
    color: #555;
    cursor: pointer;
    line-height: 1;
    min-height: 44px;
    min-width: 28px;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s;
    touch-action: manipulation;
}
.tod-btn-lock:hover {
    color: var(--tod-gold);
    border-color: var(--tod-gold);
}
.tod-btn-lock--locked {
    color: var(--tod-gold);
    border-color: var(--tod-gold);
}
/* Locked item row: subtle gold left border */
.tod-inv-item--locked {
    border-left: 3px solid var(--tod-gold) !important;
}

/* ── Auto-pickup toggle ──────────────────────────────────────────────────── */
.tod-btn-autopickup {
    padding: 2px 5px;
    font-size: 10px;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: var(--tod-radius);
    color: #555;
    cursor: pointer;
    line-height: 1.2;
    min-height: 44px;
    min-width: 28px;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    touch-action: manipulation;
    font-family: inherit;
}
.tod-btn-autopickup--on {
    color: var(--tod-green);
    border-color: var(--tod-green);
    background: #0a1a0a;
}
.tod-btn-autopickup--off {
    color: #555;
    border-color: #444;
    background: #1a1a1a;
}
.tod-btn-autopickup:hover {
    border-color: var(--tod-green);
    color: var(--tod-green);
}

/* ── Inventory load summary bar ──────────────────────────────────────────── */
.tod-inv-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px 2px;
    font-size: 11px;
    color: var(--tod-text-dim);
    border-top: 1px solid var(--tod-border);
    margin-top: 4px;
    flex-shrink: 0;
}
.tod-inv-summary-load {
    font-variant-numeric: tabular-nums;
}
.tod-inv-summary-load--heavy {
    color: #ff9800;
}
.tod-inv-summary-load--overloaded {
    color: var(--tod-red);
}

.tod-btn-use:hover,
.tod-btn-equip:hover,
.tod-btn-select-spell:hover,
.tod-btn-load-save:hover {
    background: var(--tod-green);
    color: #000;
    border-color: var(--tod-green);
}

.tod-btn-drop:hover {
    background: var(--tod-red);
    color: #fff;
    border-color: var(--tod-red);
}

/* Throw button (Golden Idol) — amber/orange hover */
.tod-btn-throw:hover {
    background: #CC6600;
    color: #fff;
    border-color: #CC6600;
}

/* Passive button (non-interactive, auto-use items like Plank) */
.tod-btn-passive {
    padding: 3px 8px;
    font-size: 11px;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: var(--tod-radius);
    color: #666;
    cursor: default;
    opacity: 0.7;
    pointer-events: none;
    min-width: 52px;
    width: 52px;
    text-align: center;
    flex-shrink: 0;
    box-sizing: border-box;
}
/* Broken item button (greyed-out, cannot equip until repaired) */
.tod-btn-broken {
    padding: 3px 8px;
    font-size: 11px;
    background: #1a1a1a;
    border: 1px solid #5a2a2a;
    border-radius: var(--tod-radius);
    color: #7a3a3a;
    cursor: not-allowed;
    opacity: 0.75;
    min-width: 52px;
    width: 52px;
    text-align: center;
    flex-shrink: 0;
    box-sizing: border-box;
}
/* Unequip button */
.tod-btn-unequip {
    padding: 3px 8px;
    font-size: 11px;
    background: #222;
    border: 1px solid var(--tod-border);
    border-radius: var(--tod-radius);
    color: var(--tod-text);
    cursor: pointer;
    transition: background var(--tod-transition);
    margin-left: auto;
    flex-shrink: 0;
}

.tod-btn-unequip:hover:not(:disabled) {
    background: var(--tod-red);
    color: #fff;
    border-color: var(--tod-red);
}

.tod-btn-unequip:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    color: var(--tod-red);
    border-color: var(--tod-red);
}

/* Equipment slot item status colours */
.tod-slot-cursed {
    color: var(--tod-red);
}

.tod-slot-blessed {
    color: var(--tod-gold);
}

.tod-slot-name {
    color: var(--tod-text-dim);
    min-width: 60px;
    flex-shrink: 0;
}

.tod-slot-sep {
    color: var(--tod-text-dim);
    margin-right: 4px;
}

.tod-slot-item {
    flex: 1;
    color: var(--tod-text-bright);
    cursor: default;
}

/* ── Floating item tooltip ──────────────────────────────────────────────────── */
.tod-item-tooltip {
    display: none;
    position: fixed;
    z-index: 10000;
    background: #1a1a1a;
    border: 1px solid var(--tod-border);
    border-radius: var(--tod-radius);
    color: var(--tod-text-bright);
    font-family: var(--tod-font-ui);
    font-size: 12px;
    line-height: 1.5;
    padding: 6px 10px;
    max-width: 240px;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

/* ── Adventure Log ──────────────────────────────────────────────────────────── */
.tod-adventure-log {
    font-family: var(--tod-font-ui);
    color: var(--tod-text-bright);
    background: var(--tod-bg);
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    border-radius: var(--tod-radius);
}

.tod-log-title {
    font-size: 22px;
    color: var(--tod-gold);
    margin-bottom: 16px;
    font-family: var(--tod-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ── Adventure Log hero banner ──────────────────────────────────────────── */
.tod-log-hero {
    position: relative;
    width: 100%;
    max-height: 340px;
    overflow: hidden;
    border-radius: var(--tod-radius);
    margin-bottom: 28px;
}

.tod-log-hero__img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    object-position: center 30%;  /* keep the tower in frame */
    display: block;
    filter: brightness(0.75);
}

.tod-log-hero__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 24px 20px;
    background: linear-gradient(
        to bottom,
        transparent 40%,
        rgba(0, 0, 0, 0.75) 100%
    );
    text-align: center;
}

.tod-log-hero__title {
    font-family: var(--tod-font-mono);
    font-size: 32px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tod-gold);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
    margin: 0 0 6px;
}

.tod-log-hero__sub {
    font-size: 14px;
    color: #ddd;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
    margin: 0;
    font-style: italic;
}

.tod-log-empty,
.tod-log-notice {
    color: var(--tod-text);
    font-style: italic;
    padding: 16px;
}

.tod-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.tod-log-table th,
.tod-log-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--tod-border);
    color: var(--tod-text-bright);
}

.tod-log-table th {
    color: var(--tod-gold);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
    background: #111;
    font-weight: bold;
}

.tod-log-table tbody tr {
    background: #161616;
}

.tod-log-table tbody tr:nth-child(even) {
    background: #1c1c1c;
}

.tod-log-table tr:hover td {
    background: #252525;
    color: #ffffff;
}

.tod-outcome--win    { color: var(--tod-gold);  font-weight: bold; }
.tod-outcome--death  { color: var(--tod-red);   }
.tod-outcome--quit   { color: var(--tod-text-dim); }
.tod-outcome--unlock { color: var(--tod-blue, #6ab0f5); font-weight: bold; }

/* ── Adventure Log view tabs ────────────────────────────────────────────────── */
.tod-log-tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 16px;
    border-bottom: 2px solid var(--tod-border);
    padding-bottom: 0;
}
.tod-log-tab {
    padding: 7px 18px;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: var(--tod-radius) var(--tod-radius) 0 0;
    color: var(--tod-text);
    text-decoration: none;
    font-size: 13px;
    transition: background var(--tod-transition), color var(--tod-transition);
    position: relative;
    bottom: -2px;
}
.tod-log-tab:hover {
    background: #1c1c1c;
    color: var(--tod-text-bright);
}
.tod-log-tab--active {
    background: #161616;
    border-color: var(--tod-border);
    border-bottom-color: #161616;
    color: var(--tod-gold);
    font-weight: bold;
}
/* Current user's rows get a subtle left accent */
.tod-log-row--mine td:first-child {
    border-left: 3px solid var(--tod-gold);
    padding-left: 7px;
}

.tod-log-pagination {
    display: flex;
    gap: 6px;
    margin-top: 16px;
    justify-content: center;
}

.tod-log-page-link {
    padding: 4px 10px;
    background: #111;
    border: 1px solid var(--tod-border);
    border-radius: var(--tod-radius);
    color: var(--tod-text);
    text-decoration: none;
    font-size: 13px;
    transition: background var(--tod-transition);
}

.tod-log-page-link:hover,
.tod-log-page-link.current {
    background: var(--tod-gold);
    color: #000;
    border-color: var(--tod-gold);
}

/* ── Chronicle Cards (Adventure Log narrative view) ─────────────────────────── */
.tod-chronicle-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px 0;
    max-width: 860px;
    margin: 0 auto;
}
.tod-chronicle-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-left: 4px solid #555;
    border-radius: 6px;
    padding: 18px 20px 14px;
    position: relative;
    transition: border-color 0.2s;
}
.tod-chronicle-card--death  { border-left-color: #8b0000; }
.tod-chronicle-card--win    { border-left-color: var(--tod-gold, #c9a227); background: #1c1a0e; }
.tod-chronicle-card--quit   { border-left-color: #555; }
.tod-chronicle-card--mine   { border-left-color: #2a6496; }
.tod-chronicle-card--mine.tod-chronicle-card--death { border-left-color: #a00; }
.tod-chronicle-card--mine.tod-chronicle-card--win   { border-left-color: var(--tod-gold, #c9a227); }
.tod-chronicle-card--unlock {
    background: #111;
    border-left-color: #6a4e23;
    padding: 12px 18px;
}
.tod-chronicle-unlock-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #bbb;
    flex-wrap: wrap;
}
.tod-chronicle-unlock-icon { font-size: 18px; }
.tod-chronicle-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.tod-chronicle-identity {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.tod-chronicle-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--tod-gold, #c9a227);
    letter-spacing: 0.02em;
}
.tod-chronicle-race-class {
    font-size: 13px;
    color: #aaa;
    font-style: italic;
}
.tod-chronicle-alignment {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 3px;
    background: #2a2a2a;
    color: #888;
}
.tod-chronicle-alignment.tod-align--lawful  { background: #0d2a4a; color: #7ab3e0; }
.tod-chronicle-alignment.tod-align--chaotic { background: #3a0d0d; color: #e07a7a; }
.tod-chronicle-alignment.tod-align--neutral { background: #2a2a2a; color: #999; }
.tod-chronicle-meta-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.tod-chronicle-player {
    font-size: 12px;
    color: #888;
}
.tod-chronicle-date {
    font-size: 12px;
    color: #666;
}
.tod-chronicle-outcome {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 9px;
    border-radius: 3px;
    background: #2a2a2a;
    color: #888;
}
.tod-outcome--death  { background: #3a0000; color: #e07a7a; }
.tod-outcome--win    { background: #2a2000; color: var(--tod-gold, #c9a227); }
.tod-outcome--quit   { background: #2a2a2a; color: #888; }
.tod-chronicle-narrative {
    font-size: 14px;
    line-height: 1.75;
    color: #ccc;
    margin-bottom: 14px;
    font-style: italic;
    border-left: 2px solid #333;
    padding-left: 14px;
}
.tod-chronicle-narrative p {
    margin: 0;
}
.tod-chronicle-narrative--loading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #666;
    font-style: italic;
    font-size: 13px;
}
.tod-chronicle-narrative--error {
    color: #a00;
    font-style: normal;
    font-size: 12px;
}
@keyframes tod-spin {
    to { transform: rotate(360deg); }
}
.tod-chronicle-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #444;
    border-top-color: var(--tod-gold, #c9a227);
    border-radius: 50%;
    animation: tod-spin 0.8s linear infinite;
    flex-shrink: 0;
}
.tod-chronicle-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 4px;
}
.tod-chronicle-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #888;
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    padding: 3px 8px;
    white-space: nowrap;
}
.tod-chronicle-stat--dark  { color: #c06060; border-color: #3a1a1a; }
.tod-chronicle-stat--cause { color: #a07050; border-color: #3a2a1a; }
.tod-chronicle-stat__icon  { font-size: 13px; }
.tod-chronicle-retry {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #888;
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    padding: 3px 10px;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    margin-top: 8px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tod-chronicle-retry:hover:not(:disabled) {
    color: var(--tod-gold, #c9a227);
    border-color: var(--tod-gold, #c9a227);
    background: #1a1800;
}
.tod-chronicle-retry:disabled {
    opacity: 0.5;
    cursor: default;
}
/* ── Share to Activity button ─────────────────────────────────────────────── */
.tod-chronicle-share {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #888;
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    padding: 3px 10px;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tod-chronicle-share:hover:not(:disabled) {
    color: var(--tod-gold, #c9a227);
    border-color: var(--tod-gold, #c9a227);
    background: #1a1800;
}
.tod-chronicle-share:disabled {
    opacity: 0.6;
    cursor: default;
}
.tod-chronicle-share--loading {
    opacity: 0.6;
    cursor: wait;
}
.tod-chronicle-share--done {
    color: #5a9a5a;
    border-color: #1a3a1a;
    background: #0d1a0d;
}
.tod-chronicle-share--error {
    color: #c06060;
    border-color: #3a1a1a;
    background: #1a0d0d;
}



.tod-chronicle-regen {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #888;
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    padding: 3px 10px;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tod-chronicle-regen:hover:not(:disabled) {
    color: #7ec8e3;
    border-color: #2a5a6a;
    background: #0d1a1f;
}
.tod-chronicle-regen:disabled {
    opacity: 0.6;
    cursor: default;
}
.tod-chronicle-regen--loading {
    opacity: 0.6;
    cursor: wait;
}
.tod-chronicle-regen--error {
    color: #c06060;
    border-color: #3a1a1a;
    background: #1a0d0d;
}
@media ( max-width: 600px ) {
    .tod-chronicle-header { flex-direction: column; }
    .tod-chronicle-meta-right { justify-content: flex-start; }
    .tod-chronicle-name { font-size: 15px; }
}
/* ── Win / Death Screens ────────────────────────────────────────────────────── */
.tod-win-body p,
.tod-death-body p {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.6;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media ( max-width: 700px ) {
    #tod-wrapper {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 200px 120px;
        grid-template-areas:
            "map"
            "stats"
            "log";
        height: auto;
    }

    .tod-map-screen {
        height: 300px;
    }

    .tod-stats-screen {
        border-left: none;
        border-top: 1px solid var(--tod-border);
        flex-direction: row;
        flex-wrap: wrap;
        padding: 8px;
    }

    .tod-stat-block {
        flex: 1 1 45%;
        border-bottom: none;
        border-right: 1px solid var(--tod-border);
        padding-right: 8px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Crown Story Button & Dialog
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Crown button below "Begin Adventure" ─────────────────────────────────── */
.tod-crown-story-wrap {
    text-align: center;
    margin-top: 10px;
}

.tod-crown-story-btn {
    background:    none;
    border:        2px solid transparent;
    border-radius: 50%;
    cursor:        pointer;
    font-size:     1.6rem;
    line-height:   1;
    padding:       6px 10px;
    transition:    transform 0.25s ease, filter 0.25s ease, border-color 0.25s ease;
    filter:        drop-shadow(0 0 4px rgba(255, 200, 50, 0.4));
    display:       inline-block;
}

.tod-crown-story-btn:hover,
.tod-crown-story-btn:focus {
    transform:    scale(1.25) rotate(-6deg);
    filter:       drop-shadow(0 0 10px rgba(255, 200, 50, 0.85))
                  drop-shadow(0 0 20px rgba(255, 160, 0, 0.55));
    border-color: rgba(255, 200, 50, 0.5);
    outline:      none;
}

/* ── Character Creation bottom row (D20 + Crown) ─────────────────────────── */
.tod-char-create-bottom-row {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             24px;
    margin-top:      10px;
}
.tod-char-create-bottom-row .tod-crown-story-wrap {
    margin-top: 0;
}
/* When the row sits above the action cards, tighten bottom margin */
.tod-char-create-bottom-row--above-cards {
    margin-top:    16px;
    margin-bottom: 4px;
}
/* ── D20 Randomizer button ────────────────────────────────────────────────── */
.tod-d20-wrap {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
}
.tod-d20-btn {
    background:      none;
    border:          none;
    cursor:          pointer;
    padding:         0;
    width:           48px;
    height:          48px;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    transition:      filter 0.25s ease, transform 0.25s ease;
    filter:          drop-shadow(0 0 4px rgba(180, 100, 255, 0.4));
}
.tod-d20-btn:hover,
.tod-d20-btn:focus {
    filter:  drop-shadow(0 0 10px rgba(180, 100, 255, 0.9))
             drop-shadow(0 0 20px rgba(120, 60, 220, 0.6));
    outline: none;
}
.tod-d20-svg {
    width:    48px;
    height:   48px;
    overflow: visible;
}
.tod-d20-face {
    fill:         #1a0a2e;
    stroke:       #9b59ff;
    stroke-width: 3;
}
.tod-d20-line {
    stroke:       #6a30cc;
    stroke-width: 1.2;
    opacity:      0.7;
}
.tod-d20-text {
    fill:              #d4aaff;
    font-family:       'Courier New', monospace;
    font-size:         26px;
    font-weight:       bold;
    text-anchor:       middle;
    dominant-baseline: middle;
    letter-spacing:    -1px;
}
/* Spin animation triggered by JS adding .tod-d20-spin */
@keyframes tod-d20-roll {
    0%   { transform: rotate(0deg)   scale(1);    }
    20%  { transform: rotate(72deg)  scale(1.15); }
    40%  { transform: rotate(144deg) scale(1.05); }
    60%  { transform: rotate(216deg) scale(1.15); }
    80%  { transform: rotate(288deg) scale(1.05); }
    100% { transform: rotate(360deg) scale(1);    }
}
.tod-d20-btn.tod-d20-spin {
    animation: tod-d20-roll 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
/* ── Story dialog overlay ─────────────────────────────────────────────────── */
.tod-overlay--story {
    /* Full-viewport dark veil — absolute so it covers #tod-wrapper in both normal and fullscreen modes */
    position:        absolute !important;
    inset:           0 !important;
    z-index:         9999 !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    background:      rgba(0, 0, 0, 0.88) !important;
    cursor:          pointer;
}

.tod-overlay--story.hidden {
    display: none !important;
}

.tod-story-inner {
    position:   relative;
    width:      min(680px, 92vw);
    height:     min(520px, 80vh);
    overflow:   hidden;
    border:     1px solid rgba(200, 134, 10, 0.35);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.72);
    box-shadow: 0 0 40px rgba(200, 134, 10, 0.25), inset 0 0 60px rgba(0,0,0,0.6);
    cursor:     pointer;
}

/* ── Giant crown watermark ─────────────────────────────────────────────────── */
.tod-story-crown-bg {
    position:    absolute;
    inset:       0;
    display:     flex;
    align-items: center;
    justify-content: center;
    font-size:   clamp(180px, 40vw, 320px);
    line-height: 1;
    opacity:     0.18;
    pointer-events: none;
    user-select: none;
    /* Subtle warm tint */
    filter:      sepia(0.4) saturate(1.8) drop-shadow(0 0 8px rgba(255,200,50,0.3));
    transition:  opacity 1.2s ease, filter 1.2s ease;
}

/* Animated glow once scrolling is complete */
.tod-story-crown-bg.tod-crown-glow {
    opacity: 0.55;
    animation: tod-crown-pulse 2.4s ease-in-out infinite;
}

@keyframes tod-crown-pulse {
    0%   { filter: sepia(0.4) saturate(1.8) drop-shadow(0 0 12px rgba(255,200,50,0.55)); }
    50%  { filter: sepia(0.2) saturate(2.4) drop-shadow(0 0 40px rgba(255,200,50,1.00))
                                             drop-shadow(0 0 80px rgba(255,160, 0,0.70)); }
    100% { filter: sepia(0.4) saturate(1.8) drop-shadow(0 0 12px rgba(255,200,50,0.55)); }
}

/* ── Scrolling text container ─────────────────────────────────────────────── */
.tod-story-scroll-wrap {
    position:     absolute;
    inset:        0;
    overflow:     hidden;       /* clips everything outside the box */
    pointer-events: none;
}

.tod-story-scroll-track {
    position:    absolute;
    left:        0;
    right:       0;
    /* Start with the top of the track at 100% = just below the bottom edge.
       JS will animate this value upward so lines rise into view from below. */
    top:         100%;
    text-align:  center;
    padding:     0 2rem;
    will-change: top;
}

/* Each story line uses the same medieval gradient as the page title */
.tod-story-line {
    display:        block;
    font-family:    'Cinzel Decorative', 'MedievalSharp', 'Palatino Linotype', Palatino, serif;
    font-size:      clamp(0.85rem, 2.2vw, 1.15rem);
    font-weight:    700;
    letter-spacing: 0.06em;
    line-height:    1.9;
    text-transform: uppercase;

    /* Gold gradient text — identical to .tod-page-title */
    background: linear-gradient(
        180deg,
        #fff5c0 0%,
        #f0c040 25%,
        #c8860a 55%,
        #7a4800 80%,
        #3d1f00 100%
    );
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
    color: #c8860a;

    /* Legibility over the crown watermark */
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.95))
            drop-shadow(0 0 6px rgba(0,0,0,0.80));
}

/* Empty lines become spacers */
.tod-story-line--blank {
    display:    block;
    height:     1.4em;
    background: none;
    filter:     none;
}

/* ── Dismiss hint ─────────────────────────────────────────────────────────── */
.tod-story-dismiss-hint {
    position:   absolute;
    bottom:     10px;
    left:       0;
    right:      0;
    text-align: center;
    font-size:  0.72rem;
    color:      rgba(200, 134, 10, 0.55);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    pointer-events: none;
    user-select: none;
}

/* Page Navigation Links (.tod-page-nav) */
.tod-page-nav { display: flex; justify-content: flex-end; margin: 0 0 10px; width: 100%; }
.tod-page-nav__link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; background: rgba(20,14,6,0.82); border: 1px solid #6b4c1e; border-radius: 4px; color: #c8860a; font-family: "Palatino Linotype", Georgia, serif; font-size: 0.82rem; letter-spacing: 0.06em; text-decoration: none; text-transform: uppercase; transition: background 0.18s, border-color 0.18s, color 0.18s; }
.tod-page-nav__link:hover, .tod-page-nav__link:focus { background: rgba(107,76,30,0.55); border-color: #c8860a; color: #f0c060; outline: none; }
.tod-page-nav__icon { font-size: 1em; line-height: 1; }
.tod-adventure-log .tod-page-nav { justify-content: flex-start; margin: 10px 0 14px 0; }

/* ── Board row: game board + side button column ────────────────────────────── */
.tod-board-row {
    display:     flex;
    align-items: flex-start;
    gap:         0;
    width:       100%;
}

/* Side button column sits flush to the right of #tod-wrapper */
.tod-side-buttons {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    padding:        10px 0 10px 10px;
    flex-shrink:    0;
    width:          150px;
    box-sizing:     border-box;
}

/* Buttons in the side column fill the column width and wrap text */
.tod-side-buttons .tod-page-nav__link {
    display:         flex;
    justify-content: flex-start;
    width:           100%;
    box-sizing:      border-box;
    white-space:     normal;
    word-break:      break-word;
    cursor:          pointer;
    /* Restore the base border and background from .tod-page-nav__link */
    border:          1px solid #6b4c1e;
    background:      rgba(20,14,6,0.82);
    color:           #c8860a;
    text-align:      left;
    padding:         6px 10px;
}

/* Eat button — food items in inventory (green-tinted, distinct from Use) */
.tod-btn-eat {
    padding: 3px 8px;
    font-size: 11px;
    background: #1a2e1a;
    border: 1px solid #3a7a3a;
    border-radius: 3px;
    color: #7ec87e;
    cursor: pointer;
    transition: background 0.15s ease;
    min-height: 44px;
    touch-action: manipulation;
    min-width: 52px;
    width: 52px;
    text-align: center;
    flex-shrink: 0;
    box-sizing: border-box;
}
.tod-btn-eat:hover {
    background: #4CAF50;
    color: #000;
    border-color: #4CAF50;
}

/* ── Read button — scrolls and books in inventory (v1.0.53) ─────────────── */
.tod-btn-read {
    background-color: #2a1a4a;
    color: #c8a0ff;
    border: 1px solid #7a40c0;
    padding: 3px 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85em;
    border-radius: 3px;
    transition: background-color 0.15s, color 0.15s;
    min-height: 44px;
    touch-action: manipulation;
    min-width: 52px;
    width: 52px;
    text-align: center;
    flex-shrink: 0;
    box-sizing: border-box;
}
.tod-btn-read:hover {
    background-color: #7a40c0;
    color: #fff;
}

/* ── Cast button — spellbook overlay (v1.0.53) ──────────────────────────── */
.tod-btn-cast-spell {
    background-color: #1a2a4a;
    color: #80b0ff;
    border: 1px solid #3060c0;
    padding: 3px 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85em;
    border-radius: 3px;
    transition: background-color 0.15s, color 0.15s;
}
.tod-btn-cast-spell:hover,
.tod-btn-cast-spell.active {
    background-color: #3060c0;
    color: #fff;
}
/* ── Spellbook list row (v1.2.193) ───────────────────────────────────────────── */
/* Columns: name | MP cost | target badge | uses label | select button */
.tod-spell-item {
    display: grid;
    grid-template-columns: 1fr 72px 82px 68px 72px;
    align-items: center;
    gap: 0 8px;
    padding: 6px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    white-space: nowrap;
}
.tod-spell-item.active {
    background: rgba(48, 96, 192, 0.18);
}
/* Column 1: spell name (tooltip wrapper takes the full first column) */
.tod-spell-item .tod-spell-tooltip-wrap {
    min-width: 0;
    overflow: hidden;
}
.tod-spell-name {
    display: block;
    font-weight: bold;
    color: #e8d8ff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Column 2: MP cost */
.tod-spell-cost {
    color: #80b0ff;
    font-size: 0.85em;
    white-space: nowrap;
    text-align: right;
}
/* Column 3: target badge */
.tod-spell-target {
    font-size: 0.78em;
    padding: 2px 6px;
    border-radius: 3px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
/* Column 4: Select / Active button */
.tod-btn-cast-spell {
    justify-self: end;
}
.tod-spell-target--enemy  { background: #4a1010; color: #ff8080; border: 1px solid #c04040; }
.tod-spell-target--player { background: #104a10; color: #80ff80; border: 1px solid #40c040; }
.tod-spell-target--item   { background: #3a3a10; color: #ffff80; border: 1px solid #c0c040; }
.tod-spell-target--mob    { background: #1a2a4a; color: #80b0ff; border: 1px solid #3060c0; }
.tod-spell-target--floor  { background: #2a1a0a; color: #c8a060; border: 1px solid #8a5a20; }

/* ── Admin: Scrolls & Spells tab source badges ──────────────────────────── */
.tod-source-builtin  { color: #666; font-size: 0.8em; }
.tod-source-override { color: #c07020; font-size: 0.8em; font-weight: bold; }
.tod-source-custom   { color: #2080c0; font-size: 0.8em; font-weight: bold; }

/* ── Give Mode overlay ──────────────────────────────────────────────────── */
/* Match the Inventory overlay: fixed height, flex column, scrollable list.  */
#tod-overlay-shop .tod-overlay-inner--shop {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 820px;
    height: 520px;
    max-width: 96vw;
    max-height: 90vh;
    min-width: 0;
    box-sizing: border-box;
    overflow-y: hidden;  /* prevent the panel itself from scrolling */
}
#tod-overlay-shop .tod-shop-body {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#tod-overlay-shop .tod-give-item-list {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}

.tod-give-item-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tod-give-item-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.tod-give-item-name {
    flex: 1 1 auto;
    color: #e8d8c0;
}
.tod-give-btn {
    background-color: #2a3a1a;
    color: #a0d060;
    border: 1px solid #5a8030;
    padding: 3px 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85em;
    border-radius: 3px;
    transition: background-color 0.15s, color 0.15s;
}
.tod-give-btn:hover {
    background-color: #5a8030;
    color: #fff;
}
.tod-give-hint {
    font-size: 0.85em;
    color: #c8b060;
    margin-bottom: 8px;
    padding: 4px 8px;
    background: rgba(200,176,96,0.08);
    border-left: 3px solid #c8b060;
    border-radius: 2px;
}

/* ── Throw Item overlay ─────────────────────────────────────────────────── */
/* Fixed height + flex column — matches the Inventory overlay sizing.         */
#tod-overlay-throw .tod-overlay-inner {
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    width:          460px;
    height:         520px;
    max-width:      96vw;
    max-height:     90vh;
    min-width:      0;
    box-sizing:     border-box;
    border: 2px solid #8B6914 !important;
    background: #141414 !important;
    color: #c8c8c8 !important;
}
/* The hint text and item list fill the remaining space; list scrolls. */
#tod-overlay-throw .tod-give-item-list {
    flex:       1 1 0;
    min-height: 0;
    overflow-y: auto;
}

/* Source label (inventory / equipped / on floor) */
.tod-throw-source {
    font-size: 0.82em;
    color: var(--tod-text-dim, #888);
    font-style: italic;
    margin-left: 4px;
}

/* ── Dedicated Give overlay ──────────────────────────────────────────────── */
#tod-overlay-give .tod-overlay-inner {
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    width:          460px;
    height:         520px;
    max-width:      96vw;
    max-height:     90vh;
    min-width:      0;
    box-sizing:     border-box;
    border: 2px solid #8B6914 !important;
    background: #141414 !important;
    color: #c8c8c8 !important;
}
#tod-overlay-give .tod-overlay-title {
    font-family: 'Cinzel', 'Palatino Linotype', serif;
    font-size: 13px;
    letter-spacing: 0.12em;
    color: var(--tod-gold, #c8860a);
    border-bottom: 1px solid var(--tod-border, #3a2a0a);
    padding-bottom: 6px;
    margin-bottom: 4px;
    flex-shrink: 0;
}
.tod-give-recipient {
    font-size: 12px;
    color: var(--tod-text-bright, #e0d0a0);
    margin: 0 0 4px 0;
    flex-shrink: 0;
}
#tod-overlay-give .tod-give-hint {
    flex-shrink: 0;
}
#tod-overlay-give .tod-give-item-list {
    flex:       1 1 0;
    min-height: 0;
    overflow-y: auto;
    margin-top: 4px;
}

/* ── NPC Trade overlay (v1.1.18) ─────────────────────────────────────────── */
.tod-trade-header {
    margin-bottom: 4px;
    color: #e8d8c0;
}
.tod-trade-gold {
    font-size: 0.88em;
    color: #c8b060;
    margin-bottom: 10px;
}
/* "Their Gold" line gets extra bottom margin to create space above the columns */
.tod-trade-gold--their {
    margin-bottom: 16px;
}
/* When there is no "Their Gold" line, the "Your Gold" line provides the gap */
.tod-trade-gold:only-of-type {
    margin-bottom: 16px;
}
.tod-trade-panels {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
/* The two item columns (Their Items + Your Inventory) share equal width
   and scroll internally so the overlay height stays controlled. */
.tod-trade-panel {
    flex: 1 1 0;
    min-width: 0;
}
.tod-trade-panel:not(.tod-trade-panel--exchange) {
    max-height: 340px;
    overflow-y: auto;
    /* Ensure the title stays visible above the scrollable list */
    display: flex;
    flex-direction: column;
}
.tod-trade-panel:not(.tod-trade-panel--exchange) .tod-trade-list {
    flex: 1 1 auto;
    overflow-y: auto;
}
.tod-trade-panel-title {
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8a6e30;
    margin: 0 0 6px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.tod-trade-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tod-trade-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tod-trade-item-name {
    flex: 1 1 auto;
    color: #e8d8c0;
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tod-trade-price {
    color: #c8b060;
    font-size: 0.82em;
    white-space: nowrap;
}
.tod-trade-buy-btn,
.tod-trade-sell-btn {
    background-color: #1a2a3a;
    border: 1px solid #3060a0;
    color: #70b0e0;
    padding: 3px 9px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.82em;
    border-radius: 3px;
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.tod-trade-buy-btn:hover {
    background-color: #3060a0;
    color: #fff;
}
.tod-trade-sell-btn {
    background-color: #2a1a0a;
    border-color: #a06030;
    color: #e09050;
}
.tod-trade-sell-btn:hover {
    background-color: #a06030;
    color: #fff;
}
.tod-trade-empty {
    color: #7a6a50;
    font-size: 0.88em;
    padding: 4px 0;
}

/* =========================================================================
   Currency Exchange panel (inside NPC trade overlay)
   ========================================================================= */
.tod-trade-panel--exchange {
    /* Narrower than the item columns; fixed width so the two item columns
       get all remaining space equally. */
    flex: 0 0 175px;
    min-width: 155px;
    max-width: 175px;
    border-left: 1px solid rgba(255,255,255,0.1);
    padding-left: 14px;
    /* Push Convert buttons to 5 px from the right edge of the shop overlay */
    padding-right: 5px;
    box-sizing: border-box;
}
.tod-exchange-row {
    margin-bottom: 14px;
}
.tod-exchange-label {
    display: block;
    color: #c8b060;
    font-size: 0.85em;
    margin-bottom: 6px;
    line-height: 1.4;
}
.tod-exchange-label small {
    color: #8a7a50;
    font-size: 0.9em;
}
.tod-exchange-controls {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
    /* Stretch to fill the exchange column so Convert sits at the right edge */
    width: 100%;
    justify-content: space-between;
}
.tod-exchange-input {
    width: 52px;
    background: #0d0d0d;
    border: 1px solid var(--tod-border-gold, #5a4a30);
    color: #e8d090;
    -webkit-text-fill-color: #e8d090;
    padding: 5px 8px;
    font-family: var(--tod-font-mono, inherit);
    font-size: 13px;
    border-radius: var(--tod-radius, 3px);
    caret-color: var(--tod-gold, #c8a040);
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.tod-exchange-input:focus {
    outline: none;
    border-color: var(--tod-gold, #c8a040);
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.22);
}
.tod-exchange-input::placeholder {
    color: #555;
    -webkit-text-fill-color: #555;
    opacity: 1;
}
.tod-btn--exchange {
    background-color: #1a2a1a;
    border: 1px solid #3a8040;
    color: #70d070;
    padding: 3px 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.82em;
    border-radius: 3px;
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.tod-btn--exchange:hover {
    background-color: #3a8040;
    color: #fff;
}
.tod-btn--exchange:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.tod-exchange-preview {
    color: #8a9a8a;
    font-size: 0.82em;
    margin-bottom: 4px;
}
.tod-exchange-preview strong {
    color: #c8d8c0;
}
.tod-exchange-msg {
    font-size: 0.82em;
    min-height: 1.2em;
    line-height: 1.3;
}

/* =========================================================================
   Lost Adventurer heal/cure offer dialog
   ========================================================================= */
.tod-la-offer-intro {
    color: #c8b87a;
    font-size: 0.92em;
    margin-bottom: 14px;
    line-height: 1.5;
}
.tod-la-offer-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 10px;
}
.tod-btn--accept {
    background-color: #0d2e0d;
    border: 1px solid #2e7d32;
    color: #66bb6a;
    padding: 6px 20px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9em;
    border-radius: 3px;
    transition: background-color 0.15s, color 0.15s;
}
.tod-btn--accept:hover {
    background-color: #2e7d32;
    color: #fff;
}
.tod-btn--decline {
    background-color: #2e0d0d;
    border: 1px solid #7d2e2e;
    color: #ef9a9a;
    padding: 6px 20px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9em;
    border-radius: 3px;
    transition: background-color 0.15s, color 0.15s;
}
.tod-btn--decline:hover {
    background-color: #7d2e2e;
    color: #fff;
}

/* =========================================================================
   Lost Adventurer — Identify Items panel
   ========================================================================= */
.tod-trade-panel--identify {
    min-width: 180px;
    max-width: 220px;
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tod-la-id-free-note,
.tod-la-id-fee-note {
    font-size: 0.8em;
    color: #c8b87a;
    display: block;
    margin-bottom: 4px;
}
.tod-la-id-free-note {
    color: #66bb6a;
}
.tod-la-id-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    max-height: 220px;
    flex: 1 1 auto;
}
.tod-la-id-row {
    padding: 3px 0;
    border-bottom: 1px solid var(--tod-border);
}
.tod-la-id-row:last-child {
    border-bottom: none;
}
.tod-la-id-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.85em;
    color: #c8b87a;
}
.tod-la-id-label input[type="checkbox"] {
    accent-color: var(--tod-gold);
    width: 13px;
    height: 13px;
    cursor: pointer;
    flex-shrink: 0;
}
.tod-la-id-name {
    color: #e0d0a0;
    font-style: italic;
}
.tod-la-id-footer {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 6px;
    border-top: 1px solid var(--tod-border);
    margin-top: 4px;
}
.tod-la-id-total {
    font-size: 0.82em;
    color: var(--tod-gold);
    font-weight: bold;
}
.tod-btn--la-identify {
    background-color: #2a1f00;
    border: 1px solid var(--tod-gold);
    color: var(--tod-gold);
    padding: 5px 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85em;
    font-weight: bold;
    border-radius: 3px;
    letter-spacing: 0.03em;
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.tod-btn--la-identify:hover:not(:disabled) {
    background-color: var(--tod-gold);
    color: #000;
}
.tod-btn--la-identify:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* =========================================================================
   Drink button — potions in inventory (.tod-btn-drink)
   ========================================================================= */
.tod-btn-drink {
    background: #1a0a2e;
    color: #c084fc;
    border: 1px solid #7c3aed;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    min-height: 44px;
    touch-action: manipulation;
    min-width: 52px;
    width: 52px;
    text-align: center;
    flex-shrink: 0;
    box-sizing: border-box;
}
.tod-btn-drink:hover {
    background: #7c3aed;
    color: #fff;
    box-shadow: 0 0 6px #7c3aed88;
}

/* =========================================================================
   Stats Screen — tabbed interface (.tod-info-tabs / .tod-info-tab)
   ========================================================================= */
.tod-info-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 2px solid #4a3a1a;
    padding-bottom: 4px;
}
.tod-info-tab {
    background: #1a1208;
    color: #a08040;
    border: 1px solid #4a3a1a;
    border-bottom: none;
    padding: 5px 18px;
    border-radius: 4px 4px 0 0;
    font-family: 'MedievalSharp', 'Palatino Linotype', serif;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.tod-info-tab:hover {
    background: #2a1e08;
    color: #d4a840;
}
.tod-info-tab--active {
    background: #2a1e08;
    color: #f0c060;
    border-color: #c8922a;
    font-weight: bold;
}
.tod-info-pane--hidden {
    display: none;
}
.tod-info-section {
    margin-bottom: 14px;
}

/* Identity section — ID-card layout: avatar left, fields right */
.tod-info-section--identity {
}
.tod-info-identity-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}
.tod-info-identity-fields {
    flex: 1;
    min-width: 0;
}
.tod-info-avatar-wrap {
    flex-shrink: 0;
}
.tod-charinfo-avatar {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 2px solid #5a4010;
    border-radius: 2px;
    display: block;
    image-rendering: pixelated;
}
.tod-info-section-title {
    font-size: 0.85rem;
    color: #b07820;  /* slightly softened amber — readable but not harsh */
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid #2a2010;  /* dark, subtle section divider */
    margin: 0 0 6px;
    padding-bottom: 3px;
}
.tod-info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    border: none !important;
}
.tod-info-table tr {
    border: none !important;
    border-bottom: 1px solid #1e1a12 !important;  /* very dark, barely-visible row divider */
}
.tod-info-table tr:last-child {
    border-bottom: none !important;
}
.tod-info-table td,
.tod-info-table th {
    padding: 3px 6px;
    vertical-align: top;
    color: #d4c8a0;  /* warm off-white — readable on dark background */
    border: none !important;  /* override any theme-injected td borders */
    border-bottom: 1px solid #1e1a12 !important;
}
.tod-info-table tr:last-child td,
.tod-info-table tr:last-child th {
    border-bottom: none !important;
}
.tod-info-label {
    color: #8a6e30;  /* muted amber label — distinct but not glaring */
    white-space: nowrap;
    width: 90px;
}

/* Weapon skill level label in the Equipment section of the Player tab */
.tod-info-weapon-skill {
    color:       #7a9e6a;  /* soft green — distinct from the amber labels */
    font-size:   0.85em;
    margin-left: 4px;
    opacity:     0.85;
}

/* =========================================================================
   Pet Memorial (.tod-memorial-*)
   ========================================================================= */

/* The Pets tab pane is a flex column so the memorial section can grow into it.
   Scoped to :not(.tod-info-pane--hidden) so the flex display cannot override
   the display:none that hides inactive panes. */
.tod-info-pane[data-pane="pet"]:not(.tod-info-pane--hidden) {
    display:        flex;
    flex-direction: column;
}

/* The memorial section (last section in the Pets pane) expands to fill
   all remaining vertical space so the list scrolls only when it overflows. */
.tod-info-pane[data-pane="pet"] .tod-info-section:last-child {
    flex:        1 1 0;
    min-height:  0;
    display:     flex;
    flex-direction: column;
    margin-bottom: 0;
}

/* The list itself fills the section and scrolls internally. */
.tod-memorial-list {
    display:    flex;
    flex-direction: column;
    gap:        6px;
    flex:       1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}
.tod-memorial-entry {
    background: #120e06;
    border: 1px solid #3a2a0a;
    border-radius: 3px;
    padding: 5px 8px;
    font-size: 0.8rem;
    color: #a09060;
    line-height: 1.4;
}
.tod-memorial-tomb {
    font-size: 1.1rem;
    margin-right: 6px;
    vertical-align: middle;
}
.tod-memorial-name {
    color: #d4a840;
    font-weight: bold;
}
.tod-memorial-species {
    color: #806040;
    font-style: italic;
    margin-left: 4px;
}
.tod-memorial-cause {
    color: #806040;
}

/* =========================================================================
   Pet name prompt row (.tod-pet-name-*)
   ========================================================================= */
.tod-pet-name-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}
.tod-pet-name-input {
    flex: 1;
    background: #1a1208;
    color: #e8d090;
    border: 1px solid #c8922a;
    border-radius: 3px;
    padding: 5px 8px;
    font-size: 0.9rem;
    font-family: 'MedievalSharp', 'Palatino Linotype', serif;
}
.tod-pet-name-input:focus {
    outline: none;
    border-color: #f0c060;
    box-shadow: 0 0 4px #f0c06066;
}

/* ============================================================
   Spellbook spell-name tooltips (.tod-spell-tooltip-wrap)
   ============================================================ */

/* Wrapper: positions the tooltip relative to the spell name */
.tod-spell-tooltip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* The tooltip card — hidden by default, shown on hover */
.tod-spell-tooltip {
    display: none;
    position: absolute;
    left: 0;
    bottom: calc( 100% + 8px );   /* default: above the spell name */
    top: auto;
    z-index: 10000;
    width: 260px;
    padding: 10px 12px;
    background: #1a1209;
    border: 1px solid #8b6914;
    border-radius: 4px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.75), 0 0 0 1px rgba(200,160,40,0.15);
    pointer-events: none;
    flex-direction: column;
    gap: 4px;
}

/* Flipped variant: render below the spell name when there is no room above */
.tod-spell-tooltip--below {
    bottom: auto;
    top: calc( 100% + 8px );
}

/* Show on hover */
.tod-spell-tooltip-wrap:hover .tod-spell-tooltip {
    display: flex;
}

/* Inventory overlay: fixed size — never resizes when switching tabs */
#tod-overlay-inventory .tod-overlay-inner {
    display: flex;
    flex-direction: column;
    overflow: hidden;          /* prevent the panel itself from growing */
    width: 620px;              /* wide enough for Bag of Holding two-column layout with Add/Remove buttons */
    height: 520px;             /* fixed height — matches reference screenshot */
    max-width: 96vw;           /* safety cap on very narrow viewports */
    max-height: 90vh;          /* safety cap on very small viewports */
    min-width: 0;              /* let max-width / width take full control */
    box-sizing: border-box;
}

/* ── Inventory tab bar ─────────────────────────────────────────────────── */
.tod-inv-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--tod-border);
    margin-bottom: 6px;
    flex-shrink: 0;
}
.tod-inv-tab {
    flex: 1;
    padding: 5px 6px;
    font-size: 11px;
    font-family: 'Cinzel', 'Palatino Linotype', serif;
    letter-spacing: 0.03em;
    background: #0d0d0d;
    border: 1px solid var(--tod-border);
    border-bottom: none;
    border-radius: var(--tod-radius) var(--tod-radius) 0 0;
    color: var(--tod-text-dim);
    cursor: pointer;
    transition: background var(--tod-transition), color var(--tod-transition);
    white-space: nowrap;
}
.tod-inv-tab:hover {
    background: #1a1a1a;
    color: var(--tod-text-bright);
}
.tod-inv-tab--active {
    background: #1c1208;
    color: var(--tod-gold);
    border-color: var(--tod-gold);
    border-bottom-color: #1c1208;
    font-weight: 700;
}
.tod-inv-tab--hidden {
    display: none;
}

/* ── Inventory tab panes ────────────────────────────────────────────────── */
.tod-inv-pane {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;               /* fill remaining height inside the fixed overlay */
    overflow: hidden;          /* clip — scrolling is on the list, not the pane */
    min-height: 0;             /* allow flex child to shrink below content size */
}
.tod-inv-pane--hidden {
    display: none;
}
#tod-overlay-inventory .tod-inv-list {
    flex: 1 1 0;               /* fill all available pane height */
    min-height: 0;             /* required for flex overflow to work */
    overflow-y: auto;          /* scroll within the fixed-height pane */
    touch-action: pan-y;       /* allow vertical scroll on touch devices */
    -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
    overscroll-behavior: contain; /* prevent scroll chaining to fullscreen exit */
}
/* ── Item group headers inside inventory panes ─────────────────────────── */
.tod-inv-group-header {
    list-style: none;
    font-size: 10px;
    font-family: 'Cinzel', 'Palatino Linotype', serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tod-text-dim);
    padding: 6px 4px 2px;
    border-bottom: 1px solid #2a2a2a;
    margin-top: 4px;
}
.tod-inv-group-header:first-child {
    margin-top: 0;
}

/* ── Inventory sidebar type-filter layout ──────────────────────────────── */

/* Panes with a sidebar switch to a horizontal flex layout */
.tod-inv-pane--with-sidebar {
    flex-direction: row;
    gap: 0;
}

/* ── Inventory search bar (All tab) ───────────────────────────────────────── */
.tod-inv-search-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 6px 4px;
    border-bottom: 1px solid var(--tod-border);
    flex-shrink: 0;
}

.tod-inv-search-input {
    flex: 1 1 0;
    min-width: 0;
    height: 30px;
    padding: 4px 8px !important;
    font-size: 12px !important;
    /* Override browser default 'search' input appearance */
    -webkit-appearance: none;
    appearance: none;
}
/* Remove the native clear (x) button on webkit search inputs */
.tod-inv-search-input::-webkit-search-cancel-button,
.tod-inv-search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    display: none;
}

.tod-inv-search-clear {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--tod-border);
    border-radius: var(--tod-radius);
    color: var(--tod-text-dim);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--tod-transition), border-color var(--tod-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}
.tod-inv-search-clear:hover {
    color: var(--tod-gold);
    border-color: var(--tod-gold);
}

/* When the search bar is present, the All pane becomes a column so the bar sits
   above the sidebar+content row. Use :not(.tod-inv-pane--hidden) to avoid
   overriding the hidden state with a higher-specificity ID selector. */
#tod-inv-pane-all:not(.tod-inv-pane--hidden) {
    display: flex;
    flex-direction: column;
}
/* Inner row wrapper for the All pane (search bar sits above this) */
.tod-inv-pane--all-inner {
    display: flex;
    flex-direction: row;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

/* Left sidebar: vertical stack of type-filter buttons */
.tod-inv-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    flex: 0 0 56px;
    padding: 4px 4px 4px 0;
    border-right: 1px solid var(--tod-border);
    overflow-y: auto;
    scrollbar-width: none;          /* Firefox */
    touch-action: pan-y;            /* allow vertical scroll on touch devices */
    -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
    overscroll-behavior: contain;   /* prevent scroll chaining to fullscreen exit */
}
.tod-inv-sidebar::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* Right content area: fills remaining width, keeps scroll on the list */
.tod-inv-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    padding-left: 6px;
}
.tod-inv-content .tod-inv-list {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    touch-action: pan-y;       /* allow vertical scroll on touch devices */
    -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
    overscroll-behavior: contain; /* prevent scroll chaining to fullscreen exit */
}

/* Type-filter button base style */
.tod-inv-type-btn {
    display: block;
    width: 100%;
    padding: 5px 6px;
    font-size: 10px;
    font-family: 'Cinzel', 'Palatino Linotype', serif;
    letter-spacing: 0.04em;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--tod-radius);
    color: var(--tod-text-dim);
    cursor: pointer;
    transition: background var(--tod-transition), color var(--tod-transition),
                border-color var(--tod-transition);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tod-inv-type-btn:hover {
    background: #1a1a1a;
    color: var(--tod-text-bright);
    border-color: var(--tod-border);
}
.tod-inv-type-btn--active {
    background: #1c1208;
    color: var(--tod-gold);
    border-color: var(--tod-gold);
    font-weight: 700;
}
.tod-inv-type-btn--active:hover {
    background: #261a0a;
}

/* ── Drop All Cursed Items button ──────────────────────────────────────── */
.tod-btn-drop-all {
    padding: 6px 20px;
    font-size: 12px;
    background: #1a0000;
    border: 1px solid #8b0000;
    border-radius: var(--tod-radius);
    color: #ff6666;
    cursor: pointer;
    transition: background var(--tod-transition);
    font-weight: bold;
    letter-spacing: 0.03em;
}
.tod-btn-drop-all:hover {
    background: #8b0000;
    color: #fff;
}
/* Spellbook overlay: wider so each spell row fits on one line */
#tod-overlay-spellbook .tod-overlay-inner {
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    min-width:      520px;
    max-width:      620px;
    width:          560px;
    height:         520px;
    max-height:     80vh;
}

#tod-overlay-spellbook .tod-spell-list {
    flex:       1 1 0;
    overflow-y: auto;
    margin:     0;
    padding:    0;
    list-style: none;
}

/* Tooltip header: spell name */
.tod-spell-tooltip__header {
    font-family: 'Cinzel', 'Palatino Linotype', serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #e8c84a;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

/* MP cost badge */
.tod-spell-tooltip__mp {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    color: #7ec8e3;
    background: rgba(100,180,220,0.12);
    border: 1px solid rgba(100,180,220,0.3);
    border-radius: 3px;
    padding: 1px 6px;
    margin-top: 2px;
    width: fit-content;
}

/* Target badge inside tooltip — reuses the existing colour classes */
.tod-spell-tooltip__target {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 3px;
    padding: 1px 6px;
    margin-top: 2px;
    width: fit-content;
}

/* Description body */
.tod-spell-tooltip__body {
    font-size: 0.78rem;
    color: #c8b88a;
    line-height: 1.45;
    margin-top: 4px;
    border-top: 1px solid rgba(139,105,20,0.35);
    padding-top: 5px;
}

/* Caret: downward arrow when tooltip is above the spell name (default) */
.tod-spell-tooltip:not(.tod-spell-tooltip--below)::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 14px;
    border: 6px solid transparent;
    border-top-color: #8b6914;
}
.tod-spell-tooltip:not(.tod-spell-tooltip--below)::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 15px;
    border: 5px solid transparent;
    border-top-color: #1a1209;
}

/* Caret: upward arrow when tooltip is below the spell name (flipped) */
.tod-spell-tooltip--below::after {
    content: '';
    position: absolute;
    bottom: 100%;
    top: auto;
    left: 14px;
    border: 6px solid transparent;
    border-bottom-color: #8b6914;
}
.tod-spell-tooltip--below::before {
    content: '';
    position: absolute;
    bottom: 100%;
    top: auto;
    left: 15px;
    border: 5px solid transparent;
    border-bottom-color: #1a1209;
}

/* ── Fullscreen Toggle Button ────────────────────────────────────────────────
   Positioned in the top-right corner of the map screen.
   ─────────────────────────────────────────────────────────────────────────── */
.tod-btn-fullscreen {
    position:        absolute;
    top:             6px;
    right:           6px;
    z-index:         10;
    width:           28px;
    height:          28px;
    padding:         0;
    background:      rgba(0, 0, 0, 0.55);
    border:          1px solid #8B6914;
    border-radius:   4px;
    color:           #FFD700;
    font-size:       16px;
    line-height:     1;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    opacity:         0.6;
    transition:      opacity 0.15s, background 0.15s;
}

.tod-btn-fullscreen:hover,
.tod-btn-fullscreen:focus {
    opacity:    1;
    background: rgba(139, 105, 20, 0.45);
    outline:    none;
}

/* ── Fullscreen Mode — game wrapper fills the entire screen ──────────────────
   The :fullscreen pseudo-class is applied by the browser to the element that
   was passed to requestFullscreen() — in our case #tod-wrapper.
   ─────────────────────────────────────────────────────────────────────────── */
#tod-wrapper:fullscreen,
#tod-wrapper:-webkit-full-screen,
#tod-wrapper:-moz-full-screen,
#tod-wrapper:-ms-fullscreen {
    width:      100vw !important;
    height:     100vh !important;
    max-width:  none  !important;
    max-height: none  !important;
    border:     none  !important;
    border-radius: 0  !important;
}

/* Increase system messages font size to 14pt in fullscreen for readability */
#tod-wrapper:fullscreen .tod-log,
#tod-wrapper:-webkit-full-screen .tod-log,
#tod-wrapper:-moz-full-screen .tod-log,
#tod-wrapper:-ms-fullscreen .tod-log {
    font-size: 14pt;
    line-height: 1.6;
}

/* ── Shared Modal Styles ─────────────────────────────────────────────────────────────────────── */
.tod-overlay--modal {
    position: absolute;      /* inside #tod-wrapper so it works in fullscreen mode */
    inset: 0;
    z-index: 10100;          /* above all overlays, canvas, and fullscreen layers */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.80);
     touch-action: auto;      /* allow tap events through to modal buttons on mobile */
    -webkit-overflow-scrolling: touch;
}
/* Viewport-fixed overlay for broadcast, suspend, and theme-preview modals
   appended to <body> — must use position:fixed so align-items:center centres
   within the viewport rather than the full document height. */
.tod-modal-overlay {
    position: fixed !important;
    inset: 0;
    z-index: 10200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.80);
}
/* Theme preview modal — shown via .is-open class */
.tod-theme-preview-modal {
    position: fixed !important;
    inset: 0;
    z-index: 10200;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.88);
    cursor: pointer;
}
.tod-theme-preview-modal.is-open {
    display: flex;
}
.tod-theme-preview-modal__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: min(640px, 90vw);
    max-height: 90vh;
    cursor: default;
}
.tod-theme-preview-modal__title {
    color: var(--tod-gold);
    font-family: var(--tod-font-mono);
    font-size: 15px;
    text-align: center;
    margin: 0;
}
.tod-theme-preview-modal__img {
    max-width: 100%;
    max-height: 70vh;
    border: 1px solid var(--tod-border-gold);
    border-radius: var(--tod-radius);
    display: block;
}
.tod-theme-preview-modal__hint {
    color: var(--tod-text-dim);
    font-family: var(--tod-font-mono);
    font-size: 12px;
    text-align: center;
    margin: 0;
}
.tod-modal-box {
    background: var(--tod-bg-panel);
    border: 1px solid var(--tod-border-gold);
    border-radius: var(--tod-radius);
    padding: 28px 32px;
    max-width: 380px;
    width: 90%;
    text-align: center;
    font-family: var(--tod-font-mono);
    color: var(--tod-text);
}

.tod-modal-title {
    color: var(--tod-gold);
    font-size: 16px;
    margin-bottom: 14px;
}

.tod-modal-body {
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 20px;
}

.tod-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;         /* stack on very narrow screens */
}

.tod-btn--confirm {
    background: var(--tod-gold);
    color: #000;
    font-weight: bold;
    border-color: var(--tod-gold);
    min-height: 44px;        /* iOS / Android minimum tap target */
    min-width: 100px;
    touch-action: manipulation;
}

.tod-btn--confirm:hover {
    background: #e6c200;
}

.tod-btn--cancel {
    border-color: var(--tod-text-dim);
    color: var(--tod-text-dim);
    min-height: 44px;        /* iOS / Android minimum tap target */
    min-width: 100px;
    touch-action: manipulation;
}

.tod-btn--cancel:hover {
    background: var(--tod-text-dim);
    color: #000;
}

/* ── Achievements & Unlocks tab ──────────────────────────────────────────────── */
.tod-ach-progress {
    font-size: 12px;
    font-weight: normal;
    color: var(--tod-text-dim);
    margin-left: 8px;
}

.tod-ach-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tod-ach-item {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    grid-template-rows: auto auto auto;  /* row 3 = progress bars */
    column-gap: 8px;
    row-gap: 2px;
    padding: 6px 4px;
    border-bottom: 1px solid var(--tod-border);
    opacity: 0.55;
}

.tod-ach-item--earned {
    opacity: 1;
}

.tod-ach-icon {
    grid-row: 1 / 4;  /* span all 3 rows: label, desc, progress bars */
    align-self: center;
    font-size: 14px;
    text-align: center;
}

.tod-ach-icon--earned { color: var(--tod-green); }
.tod-ach-icon--locked { color: var(--tod-text-dim); font-size: 12px; }

.tod-ach-label {
    font-weight: bold;
    color: var(--tod-text-bright);
    font-size: 13px;
}

.tod-ach-item--earned .tod-ach-label { color: var(--tod-gold); }

.tod-ach-desc {
    grid-column: 2;
    grid-row: 2;
    font-size: 11px;
    color: var(--tod-text-dim);
}

/* Progress bar row — spans icon + content columns */
.tod-ach-progress-bar {
    grid-column: 2;
    grid-row: 3;
}

.tod-ach-unlock {
    grid-row: 1 / 4;  /* span all 3 rows so it stays vertically centred */
    align-self: center;
    font-size: 11px;
    color: var(--tod-blue);
    white-space: nowrap;
}

.tod-unlock--earned td { color: var(--tod-text-bright); }
.tod-unlock--locked td { color: var(--tod-text-dim); opacity: 0.6; }
.tod-unlock--earned td:first-child { color: var(--tod-green); font-weight: bold; }
.tod-unlock--locked td:first-child { color: var(--tod-text-dim); }

/* ============================================================
   Unified in-game input field base style (.tod-input)
   Applied to all text/number inputs and selects inside overlays
   ============================================================ */
.tod-input,
.tod-altar-su-input,
.tod-pet-name-input,
.tod-form-row input[type="text"],
.tod-form-row input[type="number"],
.tod-form-row select {
    background: #0d0d0d !important;
    color: #e8d090 !important;
    -webkit-text-fill-color: #e8d090 !important;
    border: 1px solid var(--tod-border-gold) !important;
    border-radius: var(--tod-radius) !important;
    padding: 5px 8px !important;
    font-family: var(--tod-font-mono) !important;
    font-size: 13px !important;
    caret-color: var(--tod-gold);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

/* Override browser autofill yellow/white background */
.tod-input:-webkit-autofill,
.tod-input:-webkit-autofill:hover,
.tod-input:-webkit-autofill:focus,
.tod-input:-webkit-autofill:active,
.tod-altar-su-input:-webkit-autofill,
.tod-altar-su-input:-webkit-autofill:hover,
.tod-altar-su-input:-webkit-autofill:focus,
.tod-pet-name-input:-webkit-autofill,
.tod-pet-name-input:-webkit-autofill:hover,
.tod-pet-name-input:-webkit-autofill:focus,
.tod-form-row input:-webkit-autofill,
.tod-form-row input:-webkit-autofill:hover,
.tod-form-row input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #0d0d0d inset !important;
    box-shadow: 0 0 0px 1000px #0d0d0d inset !important;
    -webkit-text-fill-color: #e8d090 !important;
    caret-color: var(--tod-gold);
    border: 1px solid var(--tod-border-gold) !important;
    transition: background-color 5000s ease-in-out 0s;
}

.tod-input:focus,
.tod-altar-su-input:focus,
.tod-pet-name-input:focus,
.tod-form-row input[type="text"]:focus,
.tod-form-row input[type="number"]:focus,
.tod-form-row select:focus {
    border-color: var(--tod-gold) !important;
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.22) !important;
    outline: none !important;
}

.tod-input::placeholder,
.tod-altar-su-input::placeholder,
.tod-pet-name-input::placeholder,
.tod-form-row input[type="text"]::placeholder {
    color: #555 !important;
    -webkit-text-fill-color: #555 !important;
    opacity: 1;
}

/* Number spinner arrow buttons — match dark theme */
.tod-input[type="number"]::-webkit-inner-spin-button,
.tod-input[type="number"]::-webkit-outer-spin-button,
.tod-altar-su-input::-webkit-inner-spin-button,
.tod-altar-su-input::-webkit-outer-spin-button {
    opacity: 0.6;
    filter: invert(0.7) sepia(1) saturate(3) hue-rotate(5deg);
}

/* ============================================================
   Increase Stats overlay — 2×2 grid layout
   ============================================================ */
.tod-altar-su-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    margin: 12px 0;
}

.tod-altar-su-row {
    display: contents; /* each row's children participate directly in the grid */
}

/* Override: MAXMP and MAXSTA span only 1 column each — place them explicitly */
.tod-altar-su-grid .tod-altar-su-row:nth-child(2),
.tod-altar-su-grid .tod-altar-su-row:nth-child(3) {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Re-implement as a flat 4-cell grid instead of nested rows */
.tod-altar-su-grid {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    align-items: center;
    gap: 8px 10px;
    margin: 12px 0;
}

.tod-altar-su-row {
    display: contents;
}

.tod-altar-su-label {
    color: var(--tod-gold);
    font-family: var(--tod-font-mono);
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tod-altar-su-label-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
}

.tod-altar-su-tier {
    color: #888;
    font-size: 10px;
    font-family: var(--tod-font-mono);
    white-space: nowrap;
}

.tod-altar-su-input {
    width: 100%;
    min-width: 0;
}

/* Rows that only have one label+input pair — span both input columns */
.tod-altar-su-row--single {
    display: contents;
}

.tod-altar-su-row--single .tod-altar-su-input {
    grid-column: span 3; /* label col + input col + label col of right side */
}

.tod-altar-su-points {
    color: #ccc;
    font-size: 13px;
    margin-bottom: 4px;
}

.tod-altar-su-remaining {
    font-size: 13px;
    color: #aaa;
    margin-top: 4px;
}

.tod-altar-su-remaining strong {
    color: var(--tod-gold);
}

/* Pet stats sub-section inside the Increase Stats overlay */
#tod-altar-su-pet-section.hidden { display: none; }
#tod-altar-su-pet-section {
    margin-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 10px;
}

.tod-altar-su-pet-heading {
    font-size: 12px;
    font-family: var(--tod-font-mono);
    color: var(--tod-gold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 6px;
}

/* ============================================================
   Pet name input — match unified style
   ============================================================ */
.tod-pet-name-input {
    flex: 1;
    min-width: 0;
}

/* ============================================================
   Select dropdowns inside overlays
   ============================================================ */
.tod-form-row select option {
    background: #0d0d0d;
    color: #e8d090;
}

/* ============================================================
   About tab
   ============================================================ */

/* Lock the Info overlay to a fixed size so it never resizes when switching tabs. */
#tod-overlay-info .tod-overlay-inner {
    width:      570px;
    max-width:  90vw;
    height:     490px;
    max-height: 90vh;
    display:    flex;
    flex-direction: column;
    overflow:   hidden;
    box-sizing: border-box;
}

/* Tab bar never shrinks */
#tod-overlay-info .tod-info-tabs {
    flex: 0 0 auto;
}

/* The info body fills the remaining height of the overlay and is a flex column
   so the active pane can grow into it and scroll. */
#tod-overlay-info .tod-info-body {
    flex:           1 1 0;
    min-height:     0;
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
}

/* Every tab pane fills the remaining height and scrolls internally. */
.tod-info-pane:not(.tod-info-pane--hidden) {
    flex:       1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    box-sizing: border-box;
}

/* Floor Curse row in Status Effects (Character Info → Player tab) */
.tod-floor-curse-row {
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(80, 0, 80, 0.35);
    border-left: 3px solid #9b30ff;
    border-radius: 3px;
    color: #d8a0ff;
    font-size: 0.92em;
    line-height: 1.4;
}
.tod-floor-curse-name {
    color: #ff66ff;
    font-style: italic;
}

.tod-about {
    padding: 12px 16px;
    box-sizing: border-box;
}
.tod-about-title {
    font-size: 1.5em;
    color: var(--tod-gold, #e8d090);
    text-align: center;
    margin: 0 0 4px 0;
    letter-spacing: 0.05em;
    text-shadow: 0 0 12px rgba(232, 208, 144, 0.4);
}
.tod-about-version {
    text-align: center;
    font-size: 0.85em;
    color: #aaa;
    margin: 0 0 16px 0;
}
.tod-about-block {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 14px;
}
.tod-about-block p {
    margin: 0 0 8px 0;
    line-height: 1.65;
    color: #ccc;
}
.tod-about-block p:last-child {
    margin-bottom: 0;
}
.tod-about-block ol {
    margin: 6px 0 8px 0;
}
.tod-about-block a {
    color: var(--tod-gold, #e8d090);
    text-decoration: none;
}
.tod-about-block a:hover {
    text-decoration: underline;
}

/* ── Locked Chest loot overlay ──────────────────────────────────────────── */
.tod-locked-chest-list {
    list-style: none;
    margin: 0 0 4px 0;
    padding: 0;
    width: 100%;
}
.tod-locked-chest-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 0;
}
.tod-locked-chest-name {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tod-btn-chest-take-one {
    flex: 0 0 auto;
}
#tod-overlay-locked-chest .tod-form-actions {
    margin-top: 12px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   HOW TO PLAY PAGE  (.tod-htp)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Outer wrapper ────────────────────────────────────────────────────────── */
.tod-htp {
    font-family: var(--tod-font-ui);
    color: var(--tod-text-bright);
    background: rgba(10, 8, 5, 0.92);
    max-width: 960px;
    margin: 0 auto;
    padding: 0 0 60px;
    border-radius: var(--tod-radius);
    border: 1px solid var(--tod-border-gold);
    overflow: hidden;
}

/* ── Hero Banner ──────────────────────────────────────────────────────────── */
.tod-htp-hero {
    position: relative;
    width: 100%;
    height: 360px;
    overflow: hidden;
}

.tod-htp-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
    filter: brightness(0.55) saturate(0.85);
}

.tod-htp-hero__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px 20px;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.35) 0%,
        rgba(0,0,0,0.15) 40%,
        rgba(0,0,0,0.75) 100%
    );
    text-align: center;
}

.tod-htp-hero__ornament {
    font-size: 1.8rem;
    color: var(--tod-gold);
    filter: drop-shadow(0 0 8px rgba(255,215,0,0.5));
    line-height: 1;
}

.tod-htp-hero__title {
    font-family: 'Cinzel Decorative', 'Palatino Linotype', Georgia, serif;
    font-size: clamp(2rem, 5vw, 3.6rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
    background: linear-gradient(180deg, #fff5c0 0%, #f0c040 30%, #c8860a 65%, #7a4800 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #c8860a;
    filter: drop-shadow(0 0 14px rgba(255,200,50,0.5)) drop-shadow(0 3px 6px rgba(0,0,0,0.9));
}

.tod-htp-hero__sub {
    font-size: clamp(0.9rem, 2vw, 1.05rem);
    color: #ddd;
    text-shadow: 0 1px 4px rgba(0,0,0,0.95);
    font-style: italic;
    max-width: 600px;
    margin: 0;
}

/* ── Quick Navigation ─────────────────────────────────────────────────────── */
.tod-htp-quicknav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 18px 24px;
    background: rgba(20, 14, 6, 0.95);
    border-bottom: 1px solid var(--tod-border-gold);
}

.tod-htp-quicknav__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: rgba(139, 105, 20, 0.15);
    border: 1px solid rgba(139, 105, 20, 0.4);
    border-radius: 3px;
    color: #c8a050;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    white-space: nowrap;
}

.tod-htp-quicknav__link:hover,
.tod-htp-quicknav__link:focus {
    background: rgba(139, 105, 20, 0.4);
    border-color: var(--tod-gold);
    color: var(--tod-gold);
    outline: none;
}

/* ── Sections ─────────────────────────────────────────────────────────────── */
.tod-htp-section {
    padding: 0 28px;
    margin-top: 44px;
    scroll-margin-top: 20px;
}

.tod-htp-section__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--tod-border-gold);
}

.tod-htp-section__icon {
    font-size: 1.6rem;
    line-height: 1;
    filter: drop-shadow(0 0 6px rgba(255,215,0,0.3));
}

.tod-htp-section__title {
    font-family: 'Cinzel Decorative', 'Palatino Linotype', Georgia, serif;
    font-size: clamp(1.2rem, 3vw, 1.7rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tod-gold);
    margin: 0;
    text-shadow: 0 0 12px rgba(255,215,0,0.25);
}

.tod-htp-section__body {
    color: #ccc;
    line-height: 1.7;
}

.tod-htp-section__body p {
    margin: 0 0 14px;
}

.tod-htp-sub-title {
    font-family: 'Palatino Linotype', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #e0b060;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 10px;
}

.tod-htp-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(139,105,20,0.5), transparent);
    margin: 24px 0;
}

/* ── Intro paragraph ──────────────────────────────────────────────────────── */
.tod-htp-intro {
    font-size: 1.05rem;
    color: #ddd;
    margin-bottom: 24px !important;
}

/* ── Info box ─────────────────────────────────────────────────────────────── */
.tod-htp-info-box {
    background: rgba(139, 105, 20, 0.1);
    border: 1px solid rgba(139, 105, 20, 0.4);
    border-left: 3px solid var(--tod-gold);
    border-radius: 4px;
    padding: 14px 16px;
    color: #ccc;
    font-size: 0.92rem;
    line-height: 1.6;
}

.tod-htp-info-box strong {
    color: var(--tod-gold);
}

/* ── Note ─────────────────────────────────────────────────────────────────── */
.tod-htp-note {
    font-size: 0.85rem;
    color: #999;
    font-style: italic;
    margin-top: 14px !important;
}

/* ── Overview card grid ───────────────────────────────────────────────────── */
.tod-htp-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.tod-htp-card {
    background: rgba(20, 14, 6, 0.85);
    border: 1px solid rgba(139, 105, 20, 0.35);
    border-radius: 6px;
    padding: 20px 16px;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
}

.tod-htp-card:hover {
    border-color: var(--tod-gold);
    background: rgba(139, 105, 20, 0.12);
}

.tod-htp-card__icon {
    font-size: 2.2rem;
    margin-bottom: 10px;
    line-height: 1;
    filter: drop-shadow(0 0 6px rgba(255,215,0,0.3));
}

.tod-htp-card__title {
    font-family: 'Palatino Linotype', Georgia, serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--tod-gold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.tod-htp-card__text {
    font-size: 0.85rem;
    color: #aaa;
    line-height: 1.5;
    margin: 0;
}

/* ── Keybind groups ───────────────────────────────────────────────────────── */
.tod-htp-keybind-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 16px;
}

.tod-htp-keybind-group {
    background: rgba(15, 10, 5, 0.8);
    border: 1px solid rgba(139, 105, 20, 0.3);
    border-radius: 6px;
    padding: 18px;
}

.tod-htp-keybind-group__title {
    font-family: 'Palatino Linotype', Georgia, serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #e0b060;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(139, 105, 20, 0.3);
}

/* Compass demo */
.tod-htp-compass-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 14px;
}

.tod-htp-compass-row {
    display: flex;
    gap: 4px;
}

.tod-htp-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(30, 20, 8, 0.9);
    border: 1px solid rgba(139, 105, 20, 0.5);
    border-bottom: 3px solid rgba(139, 105, 20, 0.7);
    border-radius: 4px;
    color: #c8a050;
    font-family: var(--tod-font-mono);
    font-size: 0.85rem;
    font-weight: 700;
}

.tod-htp-key--arrow {
    color: var(--tod-gold);
    font-size: 1rem;
}

.tod-htp-key--center {
    background: rgba(139, 105, 20, 0.2);
    color: #555;
    border-color: rgba(139, 105, 20, 0.3);
}

/* ── Tables ───────────────────────────────────────────────────────────────── */
.tod-htp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    color: #ccc;
}

.tod-htp-table th {
    background: rgba(139, 105, 20, 0.2);
    color: var(--tod-gold);
    font-family: 'Palatino Linotype', Georgia, serif;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(139, 105, 20, 0.4);
}

.tod-htp-table td {
    padding: 7px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    vertical-align: top;
}

.tod-htp-table tr:last-child td {
    border-bottom: none;
}

.tod-htp-table tr:hover td {
    background: rgba(139, 105, 20, 0.07);
}

.tod-htp-table--locked {
    opacity: 0.65;
}

.tod-htp-table--races {
    margin-top: 14px;
}

.tod-htp-race-table-wrap {
    overflow-x: auto;
}

.tod-htp-key-cell {
    white-space: nowrap;
    color: #e0b060;
    width: 200px;
}

kbd {
    display: inline-block;
    padding: 1px 6px;
    background: #e8dfc0;
    border: 1px solid #8b6914;
    border-bottom: 2px solid #6b4e10;
    border-radius: 3px;
    font-family: var(--tod-font-mono);
    font-size: 0.82rem;
    color: #1a0f00;
    margin: 0 1px;
    text-shadow: none;
}

/* ── Mechanics grid ───────────────────────────────────────────────────────── */
.tod-htp-mechanic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.tod-htp-mechanic {
    background: rgba(15, 10, 5, 0.8);
    border: 1px solid rgba(139, 105, 20, 0.25);
    border-radius: 5px;
    padding: 16px;
}

.tod-htp-mechanic__title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #ddd;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tod-htp-mechanic p {
    font-size: 0.85rem;
    color: #aaa;
    margin: 0;
    line-height: 1.55;
}

/* Stat badges */
.tod-htp-stat {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 3px;
    font-family: var(--tod-font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.tod-htp-stat--hp  { background: rgba(244,67,54,0.25); color: #f44; border: 1px solid rgba(244,67,54,0.5); }
.tod-htp-stat--mp  { background: rgba(68,136,255,0.25); color: #4af; border: 1px solid rgba(68,136,255,0.5); }
.tod-htp-stat--sta { background: rgba(255,193,7,0.2); color: #fc0; border: 1px solid rgba(255,193,7,0.4); }
.tod-htp-stat--str { background: rgba(255,87,34,0.2); color: #f84; border: 1px solid rgba(255,87,34,0.4); }
.tod-htp-stat--def { background: rgba(76,175,80,0.2); color: #4c8; border: 1px solid rgba(76,175,80,0.4); }
.tod-htp-stat--ld   { background: rgba(156,39,176,0.2); color: #c8f; border: 1px solid rgba(156,39,176,0.4); }
.tod-htp-stat--luck { background: rgba(255,215,0,0.18);  color: #fd4; border: 1px solid rgba(255,215,0,0.45); }

/* ── Alignment row ────────────────────────────────────────────────────────── */
.tod-htp-align-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin: 16px 0;
}

.tod-htp-align {
    flex: 1 1 180px;
    background: rgba(15, 10, 5, 0.8);
    border-radius: 6px;
    padding: 16px;
    text-align: center;
    border: 1px solid rgba(139, 105, 20, 0.25);
}

.tod-htp-align--law { border-color: rgba(100, 140, 255, 0.4); }
.tod-htp-align--neu { border-color: rgba(139, 105, 20, 0.4); }
.tod-htp-align--cha { border-color: rgba(200, 50, 50, 0.4); }

.tod-htp-align__glyph {
    font-size: 2rem;
    margin-bottom: 8px;
    line-height: 1;
}

.tod-htp-align--law .tod-htp-align__glyph { color: #88aaff; }
.tod-htp-align--neu .tod-htp-align__glyph { color: var(--tod-gold); }
.tod-htp-align--cha .tod-htp-align__glyph { color: #ff6666; }

.tod-htp-align__name {
    font-family: 'Palatino Linotype', Georgia, serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.tod-htp-align--law .tod-htp-align__name { color: #88aaff; }
.tod-htp-align--neu .tod-htp-align__name { color: var(--tod-gold); }
.tod-htp-align--cha .tod-htp-align__name { color: #ff6666; }

.tod-htp-align__desc {
    font-size: 0.82rem;
    color: #999;
    line-height: 1.4;
}

/* ── Class cards ──────────────────────────────────────────────────────────── */
.tod-htp-class-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.tod-htp-class-card {
    background: rgba(15, 10, 5, 0.85);
    border: 1px solid rgba(139, 105, 20, 0.3);
    border-radius: 6px;
    padding: 18px 14px;
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.tod-htp-class-card:hover {
    border-color: var(--tod-gold);
    box-shadow: 0 0 16px rgba(255,215,0,0.1);
}

.tod-htp-class-card--explorer    { border-top: 3px solid #888; }
.tod-htp-class-card--archaeologist { border-top: 3px solid #a86; }
.tod-htp-class-card--knight      { border-top: 3px solid #aac; }
.tod-htp-class-card--wizard      { border-top: 3px solid #88f; }
.tod-htp-class-card--rogue       { border-top: 3px solid #484; }

.tod-htp-class-card__glyph {
    font-size: 2rem;
    margin-bottom: 10px;
    line-height: 1;
    color: var(--tod-gold);
    filter: drop-shadow(0 0 6px rgba(255,215,0,0.3));
}

.tod-htp-class-card__name {
    font-family: 'Palatino Linotype', Georgia, serif;
    font-size: 1rem;
    font-weight: 700;
    color: #eee;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 6px;
}

.tod-htp-class-card__flavour {
    font-size: 0.78rem;
    color: #888;
    font-style: italic;
    margin: 0 0 10px;
}

.tod-htp-class-card__traits {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: 0.8rem;
    color: #aaa;
    line-height: 1.5;
}

.tod-htp-class-card__traits li {
    padding: 2px 0;
    padding-left: 14px;
    position: relative;
}

.tod-htp-class-card__traits li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--tod-gold);
}

/* ── Item categories ──────────────────────────────────────────────────────── */
.tod-htp-item-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 8px;
}

.tod-htp-item-cat {
    background: rgba(15, 10, 5, 0.8);
    border: 1px solid rgba(139, 105, 20, 0.25);
    border-radius: 5px;
    padding: 16px;
}

.tod-htp-item-cat__title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #e0b060;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(139, 105, 20, 0.25);
}

.tod-htp-item-cat p {
    font-size: 0.83rem;
    color: #aaa;
    margin: 0 0 10px;
    line-height: 1.5;
}

.tod-htp-item-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.tod-htp-item-tag {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(30, 20, 8, 0.9);
    border: 1px solid rgba(139, 105, 20, 0.4);
    border-radius: 3px;
    font-size: 0.75rem;
    color: #c8a050;
    font-family: var(--tod-font-mono);
}

.tod-htp-item-tag--fire      { border-color: rgba(255, 80, 20, 0.6); color: #ff8855; }
.tod-htp-item-tag--lightning { border-color: rgba(170, 220, 255, 0.6); color: #aaddff; }
.tod-htp-item-tag--missile   { border-color: rgba(180, 80, 255, 0.6); color: #cc88ff; }
.tod-htp-item-tag--poison    { border-color: rgba(80, 200, 80, 0.6); color: #88ee88; }
.tod-htp-item-tag--healing   { border-color: rgba(0, 255, 136, 0.6); color: #00ff88; }
.tod-htp-item-tag--heal      { border-color: rgba(80, 200, 80, 0.5); color: #88ee88; }
.tod-htp-item-tag--mana      { border-color: rgba(80, 130, 255, 0.5); color: #88aaff; }

/* ── Wand display ─────────────────────────────────────────────────────────── */
.tod-htp-wand-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.tod-htp-wand {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(15, 10, 5, 0.8);
    border: 1px solid rgba(139, 105, 20, 0.25);
    border-radius: 5px;
    padding: 12px 16px;
    transition: border-color 0.2s;
}

.tod-htp-wand:hover { border-color: rgba(139, 105, 20, 0.6); }

.tod-htp-wand__beam {
    width: 60px;
    height: 6px;
    border-radius: 3px;
    flex-shrink: 0;
    position: relative;
}

.tod-htp-wand--fire      .tod-htp-wand__beam { background: linear-gradient(to right, #ff4400, #ffaa00); box-shadow: 0 0 8px rgba(255,100,0,0.8); }
.tod-htp-wand--lightning .tod-htp-wand__beam { background: linear-gradient(to right, #aaddff, #ffffff); box-shadow: 0 0 8px rgba(170,220,255,0.9); }
.tod-htp-wand--missile   .tod-htp-wand__beam { background: linear-gradient(to right, #aa44ff, #ee88ff); box-shadow: 0 0 8px rgba(180,80,255,0.8); }
.tod-htp-wand--poison    .tod-htp-wand__beam { background: linear-gradient(to right, #00cc44, #88ff44); box-shadow: 0 0 8px rgba(0,200,60,0.8); }
.tod-htp-wand--healing   .tod-htp-wand__beam { background: linear-gradient(to right, #00ff88, #aaffcc); box-shadow: 0 0 8px rgba(0,255,136,0.8); }
.tod-htp-wand--ice       .tod-htp-wand__beam { background: linear-gradient(to right, #88eeff, #ffffff); box-shadow: 0 0 8px rgba(136,238,255,0.9); }

.tod-htp-wand__info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tod-htp-wand__info strong {
    font-size: 0.9rem;
    color: #eee;
}

.tod-htp-wand--fire      .tod-htp-wand__info strong { color: #ff8855; }
.tod-htp-wand--lightning .tod-htp-wand__info strong { color: #aaddff; }
.tod-htp-wand--missile   .tod-htp-wand__info strong { color: #cc88ff; }
.tod-htp-wand--poison    .tod-htp-wand__info strong { color: #88ee88; }
.tod-htp-wand--healing   .tod-htp-wand__info strong { color: #00ff88; }
.tod-htp-wand--ice       .tod-htp-wand__info strong { color: #88eeff; }

.tod-htp-wand__info span {
    font-size: 0.82rem;
    color: #999;
}

/* ── Combat tips ──────────────────────────────────────────────────────────── */
.tod-htp-combat-tips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin: 16px 0;
}

.tod-htp-combat-tip {
    display: flex;
    gap: 12px;
    background: rgba(15, 10, 5, 0.8);
    border: 1px solid rgba(139, 105, 20, 0.25);
    border-radius: 5px;
    padding: 14px;
}

.tod-htp-combat-tip__icon {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(255,215,0,0.3));
}

.tod-htp-combat-tip strong {
    display: block;
    font-size: 0.88rem;
    color: #e0b060;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.tod-htp-combat-tip p {
    font-size: 0.82rem;
    color: #aaa;
    margin: 0;
    line-height: 1.5;
}

/* ── Enemy grid ───────────────────────────────────────────────────────────── */
.tod-htp-enemy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.tod-htp-enemy {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(15, 10, 5, 0.7);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 0.85rem;
    color: #bbb;
}

.tod-htp-enemy__glyph {
    font-family: var(--tod-font-mono);
    font-size: 1.2rem;
    font-weight: 700;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px currentColor);
}

/* ── Tile legend ──────────────────────────────────────────────────────────── */
.tod-htp-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.tod-htp-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: rgba(15, 10, 5, 0.8);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 4px;
    padding: 10px 6px;
    font-size: 0.78rem;
    color: #999;
    text-align: center;
}

.tod-htp-glyph {
    font-family: var(--tod-font-mono);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    filter: drop-shadow(0 0 4px currentColor);
}

/* ── Achievement grid ─────────────────────────────────────────────────────── */
.tod-htp-ach-bonus-callout {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: rgba(255, 215, 0, 0.07);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 6px;
    padding: 16px 18px;
    margin: 16px 0 20px;
}

.tod-htp-ach-bonus-callout__icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(255,215,0,0.5));
}

.tod-htp-ach-bonus-callout strong {
    display: block;
    font-size: 0.95rem;
    color: var(--tod-gold);
    letter-spacing: 0.04em;
    margin-bottom: 5px;
}

.tod-htp-ach-bonus-callout p {
    font-size: 0.85rem;
    color: #bbb;
    margin: 0;
}

.tod-htp-ach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.tod-htp-ach-card {
    background: rgba(15, 10, 5, 0.85);
    border: 1px solid rgba(139, 105, 20, 0.3);
    border-radius: 6px;
    padding: 16px 12px;
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.tod-htp-ach-card:hover {
    border-color: var(--tod-gold);
    box-shadow: 0 0 12px rgba(255,215,0,0.1);
}

.tod-htp-ach-card__icon {
    font-size: 1.8rem;
    margin-bottom: 8px;
    line-height: 1;
    filter: drop-shadow(0 0 5px rgba(255,215,0,0.3));
}

.tod-htp-ach-card__name {
    font-family: 'Palatino Linotype', Georgia, serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tod-gold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.tod-htp-ach-card__desc {
    font-size: 0.78rem;
    color: #999;
    line-height: 1.4;
}

/* ── Tips list ────────────────────────────────────────────────────────────── */
.tod-htp-tips-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tod-htp-tip {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: rgba(15, 10, 5, 0.8);
    border: 1px solid rgba(139, 105, 20, 0.25);
    border-radius: 5px;
    padding: 16px;
    transition: border-color 0.2s;
}

.tod-htp-tip:hover {
    border-color: rgba(139, 105, 20, 0.55);
}

.tod-htp-tip__num {
    font-family: 'Cinzel Decorative', 'Palatino Linotype', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: rgba(200, 134, 10, 0.4);
    line-height: 1;
    flex-shrink: 0;
    width: 36px;
    text-align: center;
    padding-top: 2px;
}

.tod-htp-tip__text strong {
    display: block;
    font-size: 0.92rem;
    color: #e0b060;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.tod-htp-tip__text p {
    font-size: 0.85rem;
    color: #aaa;
    margin: 0;
    line-height: 1.55;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.tod-htp-footer {
    margin-top: 60px;
    padding: 30px 28px;
    text-align: center;
    border-top: 1px solid var(--tod-border-gold);
    background: rgba(20, 14, 6, 0.6);
}

.tod-htp-footer__ornament {
    font-size: 1.6rem;
    color: var(--tod-gold);
    opacity: 0.6;
    margin-bottom: 12px;
    letter-spacing: 0.5em;
    filter: drop-shadow(0 0 6px rgba(255,215,0,0.3));
}

.tod-htp-footer__text {
    font-family: 'Palatino Linotype', Georgia, serif;
    font-size: 1rem;
    font-style: italic;
    color: #999;
    margin: 0 0 20px;
}

.tod-htp-footer__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    background: rgba(139, 105, 20, 0.2);
    border: 1px solid var(--tod-border-gold);
    border-radius: 4px;
    color: var(--tod-gold);
    font-family: 'Palatino Linotype', Georgia, serif;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.tod-htp-footer__cta:hover,
.tod-htp-footer__cta:focus {
    background: rgba(139, 105, 20, 0.45);
    border-color: var(--tod-gold);
    color: #fff5c0;
    box-shadow: 0 0 16px rgba(255,215,0,0.2);
    outline: none;
}

/* ── How to Play button in page nav (game page) ───────────────────────────── */
.tod-page-nav__link--htp {
    margin-right: 8px;
    border-color: rgba(80, 130, 200, 0.5);
    color: #88aadd;
}

.tod-page-nav__link--htp:hover,
.tod-page-nav__link--htp:focus {
    background: rgba(80, 130, 200, 0.2);
    border-color: #88aadd;
    color: #aaccff;
}

/* Adventure Log link - gap before Lock Position button */
.tod-page-nav__link--log {
    margin-right: 8px;
}
/* Lock Position toggle button - styled to match the nav links */
.tod-page-nav__link--lock {
    cursor: pointer;
    background: rgba(20,14,6,0.82);
    border: 1px solid #6b4c1e;
    border-radius: 4px;
    color: #c8860a;
    font-family: "Palatino Linotype", Georgia, serif;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.tod-page-nav__link--lock:hover,
.tod-page-nav__link--lock:focus {
    background: rgba(107,76,30,0.55);
    border-color: #c8860a;
    color: #f0c060;
    outline: none;
}
.tod-page-nav__link--lock.is-locked {
    background: rgba(60,40,10,0.90);
    border-color: #FFD700;
    color: #FFD700;
}
.tod-page-nav__link--lock.is-locked:hover,
.tod-page-nav__link--lock.is-locked:focus {
    background: rgba(100,70,10,0.90);
    border-color: #ffe566;
    color: #ffe566;
}
.tod-game-container.tod-position-locked {
    position: sticky;
    z-index: 100;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .tod-htp-section { padding: 0 16px; }
    .tod-htp-hero { height: 240px; }
    .tod-htp-hero__title { font-size: 1.8rem; }
    .tod-htp-card-grid,
    .tod-htp-class-grid,
    .tod-htp-mechanic-grid,
    .tod-htp-item-categories,
    .tod-htp-combat-tips,
    .tod-htp-ach-grid { grid-template-columns: 1fr; }
    .tod-htp-keybind-groups { grid-template-columns: 1fr; }
    .tod-htp-align-row { flex-direction: column; }
    .tod-htp-quicknav { padding: 12px 16px; }
    .tod-htp-footer { padding: 24px 16px; }
}

/* ── Teleport Floor Select Overlay ─────────────────────────────────────────── */
.tod-overlay-inner--teleport {
    min-width: 320px;
    max-width: 480px;
}

.tod-teleport-desc {
    font-size: 13px;
    color: var(--tod-text-dim);
    margin-bottom: 14px;
    line-height: 1.5;
}

.tod-teleport-floor-list {
    list-style: none;
    margin: 0 0 16px 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
}

.tod-teleport-floor-list li {
    margin-bottom: 6px;
}

.tod-teleport-floor-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--tod-border-gold);
    border-radius: 4px;
    color: var(--tod-text-bright);
    font-family: var(--tod-font-mono);
    font-size: 13px;
    cursor: pointer;
    transition: background var(--tod-transition), border-color var(--tod-transition);
    text-align: left;
}

.tod-teleport-floor-btn:hover {
    background: rgba(200,160,80,0.15);
    border-color: var(--tod-gold);
    color: var(--tod-gold);
}

.tod-teleport-floor-btn .tod-teleport-floor-num {
    font-weight: bold;
    font-size: 15px;
    min-width: 32px;
}

.tod-teleport-floor-btn .tod-teleport-floor-label {
    flex: 1;
    padding: 0 10px;
}

.tod-teleport-floor-btn .tod-teleport-floor-altar {
    font-size: 11px;
    color: var(--tod-text-dim);
    white-space: nowrap;
}

.tod-teleport-floor-btn[data-align="lawful"] .tod-teleport-floor-altar { color: #88aaff; }
.tod-teleport-floor-btn[data-align="neutral"] .tod-teleport-floor-altar { color: #aaffaa; }
.tod-teleport-floor-btn[data-align="chaotic"] .tod-teleport-floor-altar { color: #ff8888; }

.tod-teleport-empty {
    font-size: 13px;
    color: var(--tod-text-dim);
    font-style: italic;
    padding: 8px 0;
}

/* ── Offer Relic overlay ────────────────────────────────────────────────── */
#tod-overlay-relic-offer {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.80);
}
#tod-overlay-relic-offer.hidden {
    display: none;
}
#tod-overlay-relic-offer .tod-panel--dialog {
    background: var(--tod-bg-panel);
    border: 1px solid var(--tod-border-gold);
    border-radius: var(--tod-radius);
    padding: 28px 32px;
    min-width: 340px;
    max-width: 520px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    font-family: var(--tod-font-mono);
    color: var(--tod-text);
}
#tod-overlay-relic-offer .tod-panel__title {
    color: var(--tod-gold);
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}
#tod-overlay-relic-offer .tod-altar-intro {
    font-size: 13px;
    color: var(--tod-text-dim);
    margin-bottom: 14px;
}
#tod-overlay-relic-offer .tod-altar-id-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#tod-overlay-relic-offer .tod-altar-id-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--tod-border);
    border-radius: var(--tod-radius);
    font-size: 13px;
}
#tod-overlay-relic-offer .tod-altar-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 4px;
}

/* ── Newly-identified item highlight (session-scoped) ───────────────────── */
/* Applied to inventory list items that were identified during the current
   inventory session. Cleared when the inventory is closed and reopened. */
.tod-inv-item--new {
    border-color: var(--tod-gold) !important;
    background: rgba(200, 160, 40, 0.10) !important;
    box-shadow: inset 3px 0 0 var(--tod-gold);
}
.tod-inv-item--new .tod-inv-name {
    color: var(--tod-gold);
}

/* ── Inventory tab update badge ─────────────────────────────────────────── */
/* Applied to a tab button when it contains at least one newly-identified item.
   Renders a small gold dot in the top-right corner of the tab label. */
.tod-inv-tab--updated {
    position: relative;
}
.tod-inv-tab--updated::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tod-gold);
    box-shadow: 0 0 4px var(--tod-gold);
}

/* ══════════════════════════════════════════════════════════════════════════
   Altar Overlay — Redesigned Layout
   Two-column body: alignment logo (left) + vertical button stack (right).
   ══════════════════════════════════════════════════════════════════════════ */

/* Widen the altar overlay to accommodate the two-column layout */
.tod-overlay-inner--altar {
    min-width: 500px;
    max-width: 640px;
    padding-left: 20px;
}

/* Two-column body container */
.tod-altar-body {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 18px;
}

/* ── Left column: logo + glow ──────────────────────────────────────────── */
.tod-altar-logo-wrap {
    position: relative;
    flex: 0 0 140px;
    width: 140px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Animated glow ring behind the logo */
.tod-altar-glow {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: tod-altar-glow-pulse 2.4s ease-in-out infinite;
}

/* Lawful glow — gold/blue */
#tod-overlay-altar[data-align="lawful"] .tod-altar-glow {
    background: radial-gradient( circle, rgba(255,215,0,0.25) 0%, rgba(60,100,255,0.15) 55%, transparent 75% );
    box-shadow: 0 0 28px 10px rgba(255,215,0,0.30), 0 0 60px 20px rgba(60,100,255,0.15);
}

/* Neutral glow — purple/white */
#tod-overlay-altar[data-align="neutral"] .tod-altar-glow {
    background: radial-gradient( circle, rgba(180,100,255,0.25) 0%, rgba(200,200,200,0.10) 55%, transparent 75% );
    box-shadow: 0 0 28px 10px rgba(180,100,255,0.30), 0 0 60px 20px rgba(200,200,200,0.10);
}

/* Chaotic glow — red/orange */
#tod-overlay-altar[data-align="chaotic"] .tod-altar-glow {
    background: radial-gradient( circle, rgba(255,60,60,0.25) 0%, rgba(255,120,0,0.10) 55%, transparent 75% );
    box-shadow: 0 0 28px 10px rgba(255,60,60,0.35), 0 0 60px 20px rgba(255,120,0,0.15);
}

@keyframes tod-altar-glow-pulse {
    0%   { opacity: 0.65; transform: scale(0.94); }
    50%  { opacity: 1.00; transform: scale(1.06); }
    100% { opacity: 0.65; transform: scale(0.94); }
}

/* The glyph itself */
.tod-altar-logo {
    position: relative;
    z-index: 1;
    font-size: 64px;
    line-height: 1;
    text-align: center;
    user-select: none;
    filter: drop-shadow( 0 0 8px currentColor );
}

/* Alignment-specific logo colours */
#tod-overlay-altar[data-align="lawful"]  .tod-altar-logo { color: #FFD700; }
#tod-overlay-altar[data-align="neutral"] .tod-altar-logo { color: #c47fff; }
#tod-overlay-altar[data-align="chaotic"] .tod-altar-logo { color: #ff4444; }
/* ── Right column: 2×4 card grid ───────────────────────────────────────── */
.tod-altar-cards {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat( 4, 1fr );
    grid-template-rows: repeat( 2, 1fr );
    gap: 8px;
    align-content: center;
}

/* Base card style */
.tod-altar-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 4px 7px;
    background: rgba(30, 20, 10, 0.85);
    border: 1px solid rgba(180, 140, 60, 0.35);
    border-radius: 6px;
    color: #c8a84b;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
    transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
    user-select: none;
    min-height: 64px;
}
.tod-altar-card:hover:not(:disabled) {
    background: rgba(60, 45, 15, 0.95);
    border-color: rgba(255, 215, 0, 0.55);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.20);
    transform: translateY(-1px);
}
.tod-altar-card:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}
.tod-altar-card.hidden {
    visibility: hidden;
    pointer-events: none;
}
.tod-altar-card__icon {
    font-size: 22px;
    line-height: 1;
    display: block;
}
.tod-altar-card__label {
    display: block;
    font-size: 10px;
}

/* Pray card — alignment-tinted gold/purple/red */
.tod-altar-card--pray {
    border-width: 2px;
}
#tod-overlay-altar[data-align="lawful"]  .tod-altar-card--pray { border-color: #FFD700; color: #FFD700; background: rgba(60,50,0,0.9); }
#tod-overlay-altar[data-align="neutral"] .tod-altar-card--pray { border-color: #c47fff; color: #c47fff; background: rgba(40,20,60,0.9); }
#tod-overlay-altar[data-align="chaotic"] .tod-altar-card--pray { border-color: #ff4444; color: #ff4444; background: rgba(60,10,10,0.9); }
#tod-overlay-altar[data-align="lawful"]  .tod-altar-card--pray:hover { box-shadow: 0 0 12px rgba(255,215,0,0.45); }
#tod-overlay-altar[data-align="neutral"] .tod-altar-card--pray:hover { box-shadow: 0 0 12px rgba(196,127,255,0.45); }
#tod-overlay-altar[data-align="chaotic"] .tod-altar-card--pray:hover { box-shadow: 0 0 12px rgba(255,68,68,0.45); }

/* Identify card — cool blue-white */
.tod-altar-card--identify {
    border-color: rgba(100, 180, 255, 0.40);
    color: #8ecfff;
}
.tod-altar-card--identify:hover:not(:disabled) {
    border-color: rgba(100, 180, 255, 0.75);
    box-shadow: 0 0 8px rgba(100, 180, 255, 0.25);
}

/* Increase Stat card — green growth */
.tod-altar-card--statup {
    border-color: rgba(80, 200, 100, 0.40);
    color: #7de89a;
}
.tod-altar-card--statup:hover:not(:disabled) {
    border-color: rgba(80, 200, 100, 0.75);
    box-shadow: 0 0 8px rgba(80, 200, 100, 0.25);
}

/* Offer Relic card — gem purple */
.tod-altar-card--relic {
    border-color: rgba(180, 100, 255, 0.40);
    color: #c47fff;
}
.tod-altar-card--relic:hover:not(:disabled) {
    border-color: rgba(180, 100, 255, 0.75);
    box-shadow: 0 0 8px rgba(180, 100, 255, 0.25);
}

/* Recharge Wand card — electric cyan */
.tod-altar-card--wand {
    border-color: rgba(0, 220, 220, 0.35);
    color: #5aeaea;
}
.tod-altar-card--wand:hover:not(:disabled) {
    border-color: rgba(0, 220, 220, 0.70);
    box-shadow: 0 0 8px rgba(0, 220, 220, 0.25);
}

/* Remove Curse card — holy silver */
.tod-altar-card--curse {
    border-color: rgba(220, 220, 255, 0.35);
    color: #d0d0ff;
}
.tod-altar-card--curse:hover:not(:disabled) {
    border-color: rgba(220, 220, 255, 0.70);
    box-shadow: 0 0 8px rgba(200, 200, 255, 0.25);
}

/* Sacrificial Pact card — ominous crimson */
.tod-altar-card--pact {
    border-color: rgba(180, 0, 0, 0.50);
    color: #ff6666;
    background: rgba(40, 5, 5, 0.90);
}
.tod-altar-card--pact:hover:not(:disabled) {
    border-color: rgba(220, 0, 0, 0.80);
    box-shadow: 0 0 10px rgba(200, 0, 0, 0.35);
}
.tod-altar-card--pact.tod-altar-card--disabled,
.tod-altar-card--pact:disabled {
    opacity: 0.40;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Place Item card — warm amber */
.tod-altar-card--place {
    border-color: rgba(210, 150, 40, 0.40);
    color: #e8b84b;
}
.tod-altar-card--place:hover:not(:disabled) {
    border-color: rgba(210, 150, 40, 0.80);
    box-shadow: 0 0 8px rgba(210, 150, 40, 0.30);
}
.tod-altar-card--bag {
    border-color: rgba(60, 180, 100, 0.40);
    color: #5dd68c;
}
.tod-altar-card--bag:hover:not(:disabled) {
    border-color: rgba(60, 180, 100, 0.80);
    box-shadow: 0 0 8px rgba(60, 180, 100, 0.30);
}
/* Enchant Item card — arcane violet */
.tod-altar-card--enchant {
    border-color: rgba(160, 80, 240, 0.40);
    color: #c080f0;
}
.tod-altar-card--enchant:hover:not(:disabled) {
    border-color: rgba(160, 80, 240, 0.80);
    box-shadow: 0 0 8px rgba(160, 80, 240, 0.30);
}
/* Generic disabled state for once-per-floor altar cards */
.tod-altar-card--disabled {
    opacity: 0.38;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none;
}
/* ── Arcanum (Sorcerer Shop) Overlay ─────────────────────────────────────────────────────────────────── */

#tod-overlay-arcanum .tod-overlay-inner {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 640px;
    height: 520px;
    max-width: 96vw;
    max-height: 90vh;
    min-width: 0;
    box-sizing: border-box;
}
.tod-overlay-inner--arcanum {
    max-width: 640px;
    min-width: 320px;
}
/* Arcanum body must be a flex column so it fills the remaining overlay height */
.tod-arcanum-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}
/* Arcanum panes fill remaining height and scroll their content */
#tod-overlay-arcanum .tod-inv-pane {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}
/* Arcanum trade lists scroll inside their pane */
#tod-overlay-arcanum .tod-trade-list {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}
.tod-arcanum-subtitle {
    font-size: 12px;
    color: var(--tod-text-dim);
    margin: -8px 0 10px;
    font-family: var(--tod-font-ui);
    flex-shrink: 0;
}
.tod-arcanum-subtitle strong {
    color: #AA66FF;
}
/* ── Arcanum trade-row action buttons ────────────────────────────────────────── */
.tod-arcanum-buy-btn,
.tod-arcanum-sell-btn {
    padding: 3px 10px;
    font-size: 11px;
    font-family: var(--tod-font-mono);
    background: #222;
    border: 1px solid var(--tod-border);
    border-radius: var(--tod-radius);
    color: var(--tod-text);
    cursor: pointer;
    transition: background var(--tod-transition), color var(--tod-transition), border-color var(--tod-transition);
    flex-shrink: 0;
    white-space: nowrap;
}
/* Buy — violet hover */
.tod-arcanum-buy-btn:hover:not(:disabled) {
    background: #AA66FF;
    color: #000;
    border-color: #AA66FF;
}
/* Sell — gold/amber hover */
.tod-arcanum-sell-btn:hover:not(:disabled) {
    background: var(--tod-gold);
    color: #000;
    border-color: var(--tod-gold);
}
/* Disabled state */
.tod-arcanum-buy-btn:disabled,
.tod-arcanum-sell-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    color: #666;
    border-color: #444;
}
/* Repair button */
.tod-arcanum-repair-btn {
    padding: 3px 10px;
    font-size: 11px;
    font-family: var(--tod-font-mono);
    background: #222;
    border: 1px solid var(--tod-border);
    border-radius: var(--tod-radius);
    color: var(--tod-text);
    cursor: pointer;
    transition: background var(--tod-transition), color var(--tod-transition), border-color var(--tod-transition);
    flex-shrink: 0;
    white-space: nowrap;
}
/* Repair — teal hover */
.tod-arcanum-repair-btn:hover:not(:disabled) {
    background: #3cb87a;
    color: #000;
    border-color: #3cb87a;
}
.tod-arcanum-repair-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    color: #666;
    border-color: #444;
}

/* ── Dragonscale Armory Tab ─────────────────────────────────────────────────────────────────── */.tod-altar-card--tithe {
    border-color: rgba(180, 210, 80, 0.40);
    color: #b8d84b;
}
.tod-altar-card--tithe:hover:not(:disabled) {
    border-color: rgba(180, 210, 80, 0.80);
    box-shadow: 0 0 8px rgba(180, 210, 80, 0.30);
}
.tod-altar-card--services {
    border-color: rgba(200, 100, 80, 0.40);
    color: #e87060;
}
.tod-altar-card--services:hover:not(:disabled) {
    border-color: rgba(200, 100, 80, 0.80);
    box-shadow: 0 0 8px rgba(200, 100, 80, 0.30);
}

/* ── Place Item on Altar: BUC picker overlay ─────────────────────────────────── */
#tod-overlay-altar-place-item .tod-overlay-inner.tod-overlay-inner--place-item {
    display: flex;
    flex-direction: column;
    width: 420px;
    height: 480px;
    max-width: 96vw;
    max-height: 90vh;
    box-sizing: border-box;
    overflow: hidden;
}
#tod-overlay-altar-place-item .tod-overlay-title {
    flex-shrink: 0;
    margin-bottom: 6px;
}
.tod-altar-place-intro {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--tod-text-dim, #888);
    margin-bottom: 10px;
}
.tod-altar-place-list {
    flex: 1 1 auto;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0 2px 0 0;
    border: 1px solid rgba(180, 140, 60, 0.20);
    border-radius: 4px;
    background: rgba(10, 8, 4, 0.60);
}
.tod-altar-place-list::-webkit-scrollbar { width: 6px; }
.tod-altar-place-list::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
.tod-altar-place-list::-webkit-scrollbar-thumb { background: rgba(180,140,60,0.4); border-radius: 3px; }
.tod-altar-place-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(180, 140, 60, 0.12);
    cursor: pointer;
    transition: background 0.12s;
}
.tod-altar-place-item:last-child { border-bottom: none; }
.tod-altar-place-item:hover { background: rgba(60, 45, 15, 0.70); }
.tod-altar-place-check {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    accent-color: #c8a84b;
    cursor: pointer;
}
.tod-altar-place-label {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: #c8a84b;
    cursor: pointer;
    user-select: none;
}
.tod-altar-place-buc-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #888;
    background: rgba(0,0,0,0.40);
    border: 1px solid rgba(180,140,60,0.20);
    border-radius: 3px;
    padding: 1px 5px;
    flex-shrink: 0;
}
.tod-altar-place-footer {
    flex-shrink: 0;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 10px;
    border-top: 1px solid rgba(180,140,60,0.18);
    margin-top: 8px;
}
/* ── Altar: Identify Item overlay ──────────────────────────────────────────
   Constrained to the same dimensions as the Inventory overlay (460×520).
   The title, intro text, and close button are fixed; only the item list
   scrolls inside the remaining space.
   ──────────────────────────────────────────────────────────────────────── */
#tod-overlay-altar-identify .tod-overlay-inner {
    display: flex;
    flex-direction: column;
    overflow: hidden;          /* override base overflow-y:auto — only the list scrolls */
    width: 460px;
    height: 520px;
    max-width: 96vw;
    max-height: 90vh;
    min-width: 0;
    box-sizing: border-box;
    /* Override the base .tod-overlay-title margin so it doesn't push the list down */
}

/* Keep the title from consuming too much vertical space */
#tod-overlay-altar-identify .tod-overlay-title {
    flex-shrink: 0;
    margin-bottom: 8px;
}

/* ── Altar Identify picker — multi-select (v1.2.467) ──────────────────── */

.tod-overlay-inner--identify {
    width: 440px;
    max-width: 95vw;
    background: #0e0e18;
    border: 2px solid #3a3a8a;
    border-radius: 6px;
    padding: 18px 20px 16px;
    box-shadow: 0 0 28px rgba(80,80,200,0.40), inset 0 0 40px rgba(0,0,0,0.55);
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 80vh;
}

#tod-overlay-altar-identify .tod-altar-id-intro {
    flex-shrink: 0;
    font-size: 0.82rem;
    color: #a0a8d8;
    line-height: 1.45;
    margin: 0;
}

#tod-overlay-altar-identify .tod-altar-id-warning {
    flex-shrink: 0;
    font-size: 0.78rem;
    color: #e8a020;
    background: rgba(232,160,32,0.10);
    border: 1px solid rgba(232,160,32,0.35);
    border-radius: 4px;
    padding: 6px 10px;
    line-height: 1.4;
}

#tod-overlay-altar-identify .tod-altar-id-warning.hidden { display: none; }

#tod-overlay-altar-identify .tod-altar-id-list {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #2a2a5a;
    border-radius: 4px;
    background: #08080f;
}

#tod-overlay-altar-identify .tod-altar-id-list::-webkit-scrollbar       { width: 6px; }
#tod-overlay-altar-identify .tod-altar-id-list::-webkit-scrollbar-track  { background: #0e0e18; }
#tod-overlay-altar-identify .tod-altar-id-list::-webkit-scrollbar-thumb  { background: #3a3a8a; border-radius: 3px; }

#tod-overlay-altar-identify .tod-altar-id-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid #1a1a38;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}

#tod-overlay-altar-identify .tod-altar-id-item:last-child { border-bottom: none; }

#tod-overlay-altar-identify .tod-altar-id-item:hover { background: rgba(80,80,200,0.18); }

.tod-altar-id-cb {
    accent-color: #5a5aff;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    cursor: pointer;
}

.tod-altar-id-label {
    font-family: var(--tod-font-mono, monospace);
    font-size: 0.83rem;
    color: #c8d0f0;
    cursor: pointer;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tod-altar-id-buc-tag {
    font-size: 0.70rem;
    border-radius: 3px;
    padding: 1px 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    border: 1px solid;
}

.tod-altar-id-buc--blessed  { color: var(--tod-gold);     border-color: var(--tod-gold);     }
.tod-altar-id-buc--cursed   { color: var(--tod-red);      border-color: var(--tod-red);      }
.tod-altar-id-buc--uncursed { color: var(--tod-text-dim); border-color: var(--tod-text-dim); }
.tod-altar-id-buc--unknown  { color: #6060a0;             border-color: #6060a0;             }

.tod-altar-id-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 4px;
    gap: 10px;
}

.tod-altar-id-count {
    font-family: var(--tod-font-mono, monospace);
    font-size: 0.80rem;
    color: #8090c0;
}

.tod-altar-id-count strong { color: #a0b0e8; }

.tod-altar-id-btns {
    display: flex;
    gap: 8px;
}

/* ── Bag pane inside Inventory overlay ────────────────────────────────── */
.tod-inv-pane--bag {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 4px 0;
}
.tod-inv-pane--bag.tod-inv-pane--hidden {
    display: none;
}
.tod-bag-pane-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px 8px;
    border-bottom: 1px solid #3a2a5a;
    margin-bottom: 8px;
    flex-shrink: 0;
}
.tod-bag-columns--pane {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    max-height: none;
}

/* ============================================================
   Bag of Holding overlay
   ============================================================ */
#tod-overlay-bag {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.65);
    z-index: 9500;
}
#tod-overlay-bag.hidden { display: none; }

.tod-bag-panel {
    background: #1a1a2e;
    border: 2px solid #5a3e7a;
    border-radius: 8px;
    padding: 18px 22px 16px;
    min-width: 520px;
    max-width: 720px;
    width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 0 32px rgba(90,62,122,0.6);
    color: #e8e0f0;
    font-family: inherit;
}

.tod-bag-header {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #3a2a5a;
    padding-bottom: 10px;
}

.tod-bag-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #d4b8f0;
    flex: 1;
}

.tod-bag-status {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tod-bag-status--uncursed { background: #2a4a2a; color: #7ddc7d; border: 1px solid #4a7a4a; }
.tod-bag-status--blessed  { background: #2a3a5a; color: #7ab8ff; border: 1px solid #4a6a9a; }
.tod-bag-status--cursed   { background: #4a1a1a; color: #ff7070; border: 1px solid #7a2a2a; }

.tod-bag-slots {
    font-size: 0.82rem;
    color: #a090c0;
}

.tod-bag-close {
    background: transparent;
    border: 1px solid #5a3e7a;
    color: #c0a8e0;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}
.tod-bag-close:hover { background: #3a2a5a; color: #fff; }

.tod-bag-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    overflow-y: auto;
    max-height: 52vh;
}

.tod-bag-col-title {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #a090c0;
    margin: 0 0 6px;
}

.tod-bag-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tod-bag-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #12122a;
    border: 1px solid #2e2050;
    border-radius: 4px;
    padding: 5px 8px;
    gap: 8px;
}

.tod-bag-item-name {
    font-size: 0.85rem;
    color: #d0c8e8;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tod-bag-item-weight {
    font-size: 0.78rem;
    color: #8a7aaa;
    white-space: nowrap;
    flex-shrink: 0;
}

.tod-bag-empty {
    font-size: 0.82rem;
    color: #6a5a8a;
    font-style: italic;
    padding: 6px 4px;
}

.tod-btn--sm {
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid #5a3e7a;
    background: #2a1a4a;
    color: #c0a8e0;
    white-space: nowrap;
}
.tod-btn--sm:hover:not(:disabled) { background: #3a2a6a; color: #fff; }
.tod-btn--sm:disabled { opacity: 0.4; cursor: not-allowed; }

.tod-bag-hint {
    font-size: 0.75rem;
    color: #6a5a8a;
    text-align: center;
    margin: 0;
    padding-top: 6px;
    border-top: 1px solid #2e2050;
}

/* ── Armory: Sockets tab & Add Socket tab ─────────────────────────── */
.tod-sockets-ui {
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tod-sockets-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tod-sockets-row label {
    font-family: var(--tod-font-mono);
    font-size: 12px;
    color: var(--tod-text-dim);
    min-width: 52px;
    flex-shrink: 0;
}

.tod-sockets-row select {
    flex: 1;
    background: #1a1a1a;
    border: 1px solid var(--tod-border);
    border-radius: var(--tod-radius);
    color: var(--tod-text);
    font-family: var(--tod-font-mono);
    font-size: 12px;
    padding: 4px 6px;
    cursor: pointer;
    outline: none;
    transition: border-color var(--tod-transition);
}

.tod-sockets-row select:focus {
    border-color: var(--tod-gold);
}

.tod-sockets-row select option {
    background: #1a1a1a;
    color: var(--tod-text);
}

.tod-socket-preview {
    font-family: var(--tod-font-mono);
    font-size: 11px;
    color: var(--tod-text-dim);
    min-height: 18px;
    padding: 2px 0;
}

.tod-sockets-actions {
    margin-top: 4px;
    gap: 8px;
}

.tod-sockets-actions .tod-btn {
    padding: 4px 14px;
    font-size: 11px;
}

.tod-sockets-actions .tod-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Add Socket tab — per-row buttons */
.tod-armory-addsocket-btn {
    padding: 3px 10px;
    font-size: 11px;
    font-family: var(--tod-font-mono);
    background: #222;
    border: 1px solid var(--tod-border);
    border-radius: var(--tod-radius);
    color: var(--tod-text);
    cursor: pointer;
    transition: background var(--tod-transition), color var(--tod-transition), border-color var(--tod-transition);
    flex-shrink: 0;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
}

.tod-armory-addsocket-btn:hover:not(:disabled) {
    background: var(--tod-gold);
    color: #000;
    border-color: var(--tod-gold);
}

.tod-armory-addsocket-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    color: #666;
    border-color: #444;
}


/* ── Teleportation Trinket destination picker ─────────────────────── */
.tod-overlay--teleport {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    z-index: 3100;
}
.tod-overlay--teleport.hidden { display: none; }

.tod-teleport-panel {
    background: #0e0e1e;
    border: 2px solid #00bcd4;
    border-radius: 8px;
    padding: 18px 22px 16px;
    min-width: 360px;
    max-width: 560px;
    width: 90vw;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 0 32px rgba(0,188,212,0.35);
    color: #e0f7fa;
    font-family: inherit;
    overflow-y: auto;
}

.tod-teleport-header {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #006064;
    padding-bottom: 10px;
}

.tod-teleport-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #80deea;
    flex: 1;
}

.tod-teleport-charges {
    font-size: 0.78rem;
    color: #4dd0e1;
    background: #002b30;
    border: 1px solid #006064;
    border-radius: 4px;
    padding: 2px 8px;
}

.tod-teleport-close {
    background: transparent;
    border: 1px solid #006064;
    color: #4dd0e1;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}
.tod-teleport-close:hover { background: #003a3e; color: #fff; }

.tod-teleport-hint {
    font-size: 0.85rem;
    color: #80cbc4;
    margin: 0;
}

.tod-teleport-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    max-height: 40vh;
}

.tod-teleport-dest {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0a1a1e;
    border: 1px solid #006064;
    border-radius: 4px;
    padding: 6px 10px;
    gap: 10px;
}

.tod-teleport-dest-label {
    font-size: 0.88rem;
    color: #b2ebf2;
    flex: 1;
}

.tod-teleport-empty {
    font-size: 0.82rem;
    color: #4a7a80;
    font-style: italic;
    padding: 6px 4px;
}

.tod-teleport-dismiss {
    font-size: 0.72rem;
    color: #4a7a80;
    text-align: center;
    margin: 0;
    padding-top: 6px;
    border-top: 1px solid #003a3e;
}

.tod-teleport-go {
    font-size: 0.75rem;
    padding: 3px 12px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid #00838f;
    background: #003a3e;
    color: #80deea;
    white-space: nowrap;
}
.tod-teleport-go:hover { background: #006064; color: #fff; }

/* ── Quest Tab ─────────────────────────────────────────────────────────────── */

.tod-quest-entry {
    padding: 10px 12px;
    margin-bottom: 10px;
    border: 1px solid #1a4a50;
    border-radius: 6px;
    background: #0a1e22;
}
/* Active quest: light blue tint */
.tod-quest-entry--active {
    background: #071c2e;
    border-color: #1a4a70;
    box-shadow: inset 0 0 0 1px rgba(100,180,255,0.08);
}
/* Failed quest: red tint */
.tod-quest-entry--failed {
    background: #1e0a0a;
    border-color: #6a1a1a;
    opacity: 0.85;
}
.tod-quest-failed-check  { color: #e53935; font-size: 1rem; flex-shrink: 0; }
.tod-quest-failed-name   { color: #ef9a9a; font-size: 0.85rem; font-weight: 600; }
.tod-quest-failed-label  { color: #e57373; font-size: 0.78rem; font-style: italic; margin-left: 2px; }

.tod-quest-entry--done {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-color: #2a5a40;
    background: #0a1e14;
    opacity: 0.75;
}
.tod-quest-done-check { color: #4caf50; font-size: 1rem; flex-shrink: 0; }
.tod-quest-done-header {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    width: 100%;
}
.tod-quest-done-header:hover .tod-quest-done-name { color: #c8e6c9; }
.tod-quest-done-arrow {
    margin-left: auto;
    color: #66bb6a;
    font-size: 0.7rem;
    transition: transform 0.18s ease;
    flex-shrink: 0;
}
.tod-quest-done-body {
    margin-top: 8px;
    padding-left: 4px;
    border-top: 1px solid #1a4a30;
    padding-top: 6px;
}
.tod-quest-done-name  { color: #a5d6a7; font-size: 0.85rem; font-weight: 600; }
.tod-quest-done-label { color: #66bb6a; font-size: 0.78rem; font-style: italic; margin-left: 2px; }

.tod-quest-title  { margin: 0 0 4px; font-size: 0.95rem; color: #ffd700; letter-spacing: 0.03em; }
.tod-quest-status { margin: 0 0 6px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; }
.tod-quest-desc   { margin: 0 0 6px; font-size: 0.78rem; color: #80cbc4; }

.tod-quest-return-note        { margin: 0 0 6px; font-size: 0.82rem; color: #ff9800; font-style: italic; }
.tod-quest-return-note strong { color: #ffb74d; }

.tod-quest-obj-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }

.tod-quest-obj {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    padding: 2px 0;
}
.tod-quest-obj--done    { color: #a5d6a7; text-decoration: line-through; opacity: 0.8; }
.tod-quest-obj--pending { color: #b0bec5; }

.tod-quest-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    font-size: 0.85rem;
    border-radius: 3px;
}
.tod-quest-check--done {
    color: #4caf50;
    background: rgba(76,175,80,0.15);
    border: 1px solid #388e3c;
    font-weight: 700;
}
.tod-quest-check--pending {
    color: #546e7a;
    background: rgba(84,110,122,0.1);
    border: 1px solid #37474f;
}

/* ── Pet stat tooltip (canvas hover) ────────────────────────────────────── */
#tod-pet-tooltip {
    position: absolute;
    z-index: 9999;
    pointer-events: none;          /* never intercept mouse events */
    background: rgba(10, 10, 10, 0.92);
    border: 1px solid #8B6914;
    border-radius: 4px;
    padding: 8px 12px;
    min-width: 160px;
    max-width: 200px;
    font-family: var(--tod-font-ui, 'Segoe UI', sans-serif);
    font-size: 12px;
    color: #e8d8c0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.7);
    line-height: 1.5;
}
#tod-pet-tooltip.hidden {
    display: none;
}
.tod-pet-tip-name {
    font-family: var(--tod-font-mono, 'Courier New', monospace);
    font-size: 13px;
    font-weight: bold;
    color: #f0c040;
    border-bottom: 1px solid rgba(240,192,64,0.3);
    margin-bottom: 5px;
    padding-bottom: 3px;
    letter-spacing: 0.04em;
}
.tod-pet-tip-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.tod-pet-tip-label {
    color: #a09080;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tod-pet-tip-val {
    color: #e8d8c0;
    font-family: var(--tod-font-mono, 'Courier New', monospace);
    font-size: 11px;
}


/* =========================================================================
   Letter Reading UI  (v1.2.180)
   ========================================================================= */

/* ID-scoped overrides — prevent WordPress theme from injecting white backgrounds */
#tod-letter-overlay .tod-overlay-inner {
    background: #141414 !important;
    color: #c8c8c8 !important;
}
#tod-letter-overlay .tod-letter-body-wrap {
    background: #0e0b07 !important;
}
#tod-letter-overlay .tod-letter-body {
    background: transparent !important;
    color: #e8d8c0 !important;
}

/* Same dimensions as the inventory panel */
.tod-overlay-inner--letter {
    display: flex;
    flex-direction: column;
    width: 460px;
    height: 520px;
    max-width: 96vw;
    max-height: 90vh;
    min-width: 0;
    box-sizing: border-box;
    padding: 20px 22px 16px;
    gap: 8px;
}

/* Title: "Letter from [Writer]" */
.tod-letter-writer {
    font-family: 'Cinzel', 'Palatino Linotype', serif;
    font-size: 16px;
    color: #F5DEB3;          /* parchment wheat */
    text-align: center;
    margin: 0;
    flex-shrink: 0;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid #5a4020;
    padding-bottom: 8px;
}

/* "Letter 2 of 4" set indicator */
.tod-letter-set {
    font-family: 'Cinzel', 'Palatino Linotype', serif;
    font-size: 11px;
    color: #9a8060;
    text-align: center;
    margin: 0;
    flex-shrink: 0;
    min-height: 14px;
}

/* Scrollable body area */
.tod-letter-body-wrap {
    flex: 1 1 auto;
    overflow-y: auto;
    background: #0e0b07;
    border: 1px solid #5a4020;
    border-radius: 4px;
    padding: 12px 14px;
}

/* Letter text — use <pre> so whitespace / line breaks are preserved */
.tod-letter-body {
    font-family: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
    font-size: 13px;
    line-height: 1.7;
    color: #e8d8c0;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

/* Dismiss hint */
.tod-letter-dismiss-hint {
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    color: #5a5040;
    text-align: center;
    margin: 0;
    flex-shrink: 0;
}

/* ── Fae Realm Compass ──────────────────────────────────────────────────────── */
/* Positioned in the upper-right corner of the game board (tod-map-screen).   */
/* The compass is hidden on all floors except the Fae Realm.                  */

.tod-fae-compass {
    position:        absolute;
    top:             8px;
    right:           8px;
    z-index:         20;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             2px;
    padding:         6px 10px 8px;
    background:      rgba(10, 26, 6, 0.82);
    border:          1px solid #44BB44;
    border-radius:   6px;
    box-shadow:      0 0 8px rgba(68, 187, 68, 0.35);
    pointer-events:  none;
    user-select:     none;
    min-width:       52px;
    text-align:      center;
    transition:      opacity 0.3s ease;
}

.tod-fae-compass.hidden {
    display: none;
}

.tod-fae-compass__title {
    font-family:    'Courier New', Courier, monospace;
    font-size:      9px;
    color:          #88CC88;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height:    1;
    margin-bottom:  1px;
}

.tod-fae-compass__arrow {
    font-family: 'Courier New', Courier, monospace;
    font-size:   22px;
    line-height: 1;
    color:       #FFDD88;
    text-shadow: 0 0 6px rgba(255, 221, 136, 0.6);
}

.tod-fae-compass__label {
    font-family: 'Courier New', Courier, monospace;
    font-size:   9px;
    color:       #AADDAA;
    line-height: 1;
    margin-top:  1px;
}

/* ── Fae Realm log message style ───────────────────────────────────────────── */
.tod-log p.tod-log--fae {
    color:            #AADDAA;
    background-color: rgba(10, 26, 6, 0.55);
    border-left:      3px solid #44BB44;
    padding-left:     6px;
}

/* ============================================================================
   Aether Chest overlay
   ============================================================================ */

#tod-overlay-aether-chest .tod-overlay-inner.tod-aether-inner {
    max-width: 780px;
    width: min(780px, 96vw);
    /* Fill the available overlay height but never exceed the game wrapper */
    height: min(640px, 80vh);
    max-height: min(640px, 80vh);
    overflow: hidden;          /* outer wrapper never scrolls — columns scroll instead */
    display: flex;
    flex-direction: column;
    padding: 20px 22px 16px;
    background: #0d0d1a;
    border: 2px solid #7b5ea7;
    box-shadow: 0 0 32px rgba(123, 94, 167, 0.55), 0 0 8px rgba(123, 94, 167, 0.3);
    box-sizing: border-box;
}

.tod-aether-title {
    color: #c9a8ff;
    text-shadow: 0 0 10px rgba(180, 130, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 0.45em;
}

.tod-aether-glyph {
    color: #d4a0ff;
    font-size: 1.1em;
    filter: drop-shadow(0 0 6px #a060ff);
    animation: tod-aether-pulse 2.4s ease-in-out infinite;
}

@keyframes tod-aether-pulse {
    0%, 100% { opacity: 1;   filter: drop-shadow(0 0 6px #a060ff); }
    50%       { opacity: 0.7; filter: drop-shadow(0 0 14px #c080ff); }
}

.tod-aether-subtitle {
    font-size: 0.78em;
    color: #9070b0;
    margin: 0 0 0.75em 0;
    text-align: center;
    font-style: italic;
}

.tod-aether-columns {
    display: flex;
    gap: 1em;
    flex: 1 1 0;       /* grow to fill remaining height inside the fixed-height inner */
    overflow: hidden;
    min-height: 0;     /* critical: allows flex children to shrink below content size */
}

.tod-aether-col {
    flex: 1 1 0;       /* equal width, can shrink */
    display: flex;
    flex-direction: column;
    min-height: 0;     /* allows the inner list to scroll */
    overflow: hidden;  /* clip the column itself */
    border-radius: 4px;
    padding: 0.5em;
}

.tod-aether-col--inventory {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #2a2a3a;
}

.tod-aether-col--chest {
    background: rgba(123, 94, 167, 0.08);
    border: 1px solid #5a3a8a;
    box-shadow: inset 0 0 18px rgba(123, 94, 167, 0.12);
}

.tod-aether-col-title {
    font-size: 0.82em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.5em 0;
    padding-bottom: 0.35em;
    border-bottom: 1px solid currentColor;
}

.tod-aether-col--inventory .tod-aether-col-title {
    color: #aaa;
    border-color: #333;
}

.tod-aether-col--chest .tod-aether-col-title {
    color: #c9a8ff;
    border-color: #7b5ea7;
}

.tod-aether-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;  /* scroll when items exceed column height */
    flex: 1 1 0;       /* fill remaining column height */
    min-height: 0;     /* allow shrinking so scroll kicks in */
}

.tod-aether-list::-webkit-scrollbar { width: 5px; }
.tod-aether-list::-webkit-scrollbar-track { background: transparent; }
.tod-aether-list::-webkit-scrollbar-thumb { background: #4a3a6a; border-radius: 3px; }

.tod-aether-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    padding: 0.3em 0.4em;
    border-radius: 3px;
    font-size: 0.82em;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.15s;
}

.tod-aether-item:last-child { border-bottom: none; }
.tod-aether-item:hover { background: rgba(255,255,255,0.05); }

.tod-aether-item--inv {
    background: rgba(255,255,255,0.02);
}

.tod-aether-item--chest {
    background: rgba(123, 94, 167, 0.12);
    border-bottom-color: rgba(123, 94, 167, 0.18);
}

.tod-aether-item--chest:hover {
    background: rgba(123, 94, 167, 0.22);
}

.tod-aether-item__name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tod-aether-item--inv   .tod-aether-item__name { color: #d0d0d0; }
.tod-aether-item--chest .tod-aether-item__name { color: #d4b8ff; }

.tod-aether-item__status {
    font-size: 0.78em;
    opacity: 0.65;
    white-space: nowrap;
    flex-shrink: 0;
}

.tod-aether-item__weight {
    font-size: 0.75em;
    color: #8a7a5a;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
    padding-right: 0.4em;
}

.tod-aether-btn {
    font-size: 0.72em;
    padding: 0.2em 0.55em;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
}

.tod-aether-btn--put {
    background: rgba(80, 50, 120, 0.5);
    border-color: #7b5ea7;
    color: #c9a8ff;
}

.tod-aether-btn--put:hover {
    background: rgba(123, 94, 167, 0.7);
    color: #fff;
}

.tod-aether-btn--take {
    background: rgba(40, 80, 40, 0.5);
    border-color: #4a7a4a;
    color: #a0d0a0;
}

.tod-aether-btn--take:hover {
    background: rgba(60, 120, 60, 0.7);
    color: #fff;
}

.tod-aether-empty {
    font-size: 0.8em;
    color: #555;
    font-style: italic;
    padding: 0.5em 0.4em;
}
/* Aether Chest — dynamic search bar */
.tod-aether-search {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 0.6em 0;
    padding: 0.35em 0.6em;
    background: #0d0d1a;
    border: 1px solid #4a3a6a;
    border-radius: 4px;
    color: #d4b8ff;
    font-size: 0.82em;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}
.tod-aether-search::placeholder { color: #5a4a7a; }
.tod-aether-search:focus { border-color: #9060cc; }

/* Map glyph legend class (HTML-side) */
.tod-cell-aether-chest {
    color: #c9a8ff;
    text-shadow: 0 0 6px #a060ff;
}

/* ============================================================================
   The Prisoner Quest — Blue Door & Prisoner Dialogue Overlay
   ============================================================================ */

/* Prisoner dialogue overlay title */
#tod-overlay-prisoner .tod-overlay-title {
    color: #6fa8ff;
    text-shadow: 0 0 8px rgba(68, 136, 255, 0.6);
}

/* Prisoner body text */
#tod-prisoner-body p {
    margin: 0 0 8px;
}

/* Quest log: session-only badge */
.tod-quest-session-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 3px;
    background: #1a2a3a;
    color: #6fa8ff;
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.03em;
    vertical-align: middle;
    border: 1px solid #2a4a6a;
}

/* ============================================================================
   The Prisoner Quest — Blue Door & Prisoner Dialogue Overlay
   ============================================================================ */

/* Prisoner dialogue overlay title */
#tod-overlay-prisoner .tod-overlay-title {
    color: #6fa8ff;
    text-shadow: 0 0 8px rgba(68, 136, 255, 0.6);
}

/* Prisoner body text */
#tod-prisoner-body p {
    margin: 0 0 8px;
}

/* Quest log: session-only badge */
.tod-quest-session-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 3px;
    background: #1a2a3a;
    color: #6fa8ff;
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.03em;
    vertical-align: middle;
    border: 1px solid #2a4a6a;
}

/* ── Divine Aura Status Effect ─────────────────────────────────────────── */
.tod-status-effect {
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: 6px;
    border-left: 3px solid #ffd700;
    background: rgba(255, 215, 0, 0.07);
}
.tod-status-effect--divine {
    border-left-color: #ffd700;
    background: linear-gradient(90deg, rgba(255,215,0,0.10) 0%, rgba(255,215,0,0.03) 100%);
}
.tod-status-effect-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}
.tod-status-effect-icon {
    font-size: 1.1em;
    flex-shrink: 0;
}
.tod-status-effect-name {
    color: #ffd700;
    font-size: 0.95em;
    flex: 1;
}
.tod-status-effect-duration {
    font-size: 0.78em;
    color: #aaa;
    white-space: nowrap;
}
.tod-status-effect-desc {
    font-size: 0.82em;
    color: #bbb;
    margin: 0 0 7px 0;
    line-height: 1.45;
}
.tod-status-effect-bar-wrap {
    height: 5px;
    background: #333;
    border-radius: 3px;
    overflow: hidden;
}
.tod-status-effect-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease, background 0.4s ease;
}

/* =============================================================================
   Tarot Deck Inventory Tab
   ============================================================================= */

/* Outer pane layout: list on top, active panel on bottom */
.tod-tarot-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Card list section (top, scrollable) */
.tod-tarot-list-section {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    border-bottom: 2px solid var(--tod-border-gold);
}

.tod-tarot-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 8px 4px;
    font-size: 10px;
    font-family: 'Cinzel', 'Palatino Linotype', serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tod-text-dim);
    border-bottom: 1px solid var(--tod-border);
    flex-shrink: 0;
}

.tod-tarot-active-count {
    color: var(--tod-gold);
    font-weight: 700;
}

.tod-tarot-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 0;
    min-height: 0;
}

.tod-tarot-list::-webkit-scrollbar { width: 4px; }
.tod-tarot-list::-webkit-scrollbar-track { background: #0d0d0d; }
.tod-tarot-list::-webkit-scrollbar-thumb { background: var(--tod-border-gold); border-radius: 2px; }

/* Individual card row */
.tod-tarot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 8px;
    border-bottom: 1px solid #1a1a1a;
    transition: background var(--tod-transition);
}
.tod-tarot-row:hover { background: #111; }
.tod-tarot-row--active { background: #1a1208; }
.tod-tarot-row--active:hover { background: #221808; }

.tod-tarot-row-name {
    font-size: 12px;
    color: var(--tod-text);
    font-family: 'Cinzel', 'Palatino Linotype', serif;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 8px;
}
.tod-tarot-row--active .tod-tarot-row-name { color: var(--tod-gold); }
.tod-tarot-row-thumb {
    width: 40px;
    height: 60px;
    object-fit: cover;
    border: 1px solid #5a4010;
    border-radius: 2px;
    flex-shrink: 0;
    margin-right: 6px;
    image-rendering: pixelated;
}

.tod-tarot-empty {
    padding: 12px 8px;
    font-size: 11px;
    color: var(--tod-text-dim);
    text-align: center;
    font-style: italic;
}

/* Tarot action buttons */
.tod-tarot-btn {
    flex-shrink: 0;
    padding: 3px 8px;
    font-size: 11px;
    font-family: var(--tod-font-mono);
    letter-spacing: normal;
    border-radius: var(--tod-radius);
    border: 1px solid var(--tod-border);
    background: #222;
    color: var(--tod-text);
    cursor: pointer;
    transition: background var(--tod-transition), color var(--tod-transition), border-color var(--tod-transition);
    white-space: nowrap;
    min-width: 52px;
    width: 52px;
    min-height: 44px;
    text-align: center;
    box-sizing: border-box;
    touch-action: manipulation;
    line-height: 1.6;
}

.tod-tarot-btn--available {
    background: transparent;
    color: var(--tod-gold);
    border-color: var(--tod-border-gold);
}
.tod-tarot-btn--available:hover {
    background: rgba(255, 215, 0, 0.12);
    border-color: var(--tod-gold);
}

.tod-tarot-btn--active {
    background: rgba(255, 215, 0, 0.18);
    color: var(--tod-gold);
    border-color: var(--tod-gold);
    font-weight: 700;
    cursor: default;
}

.tod-tarot-btn--locked {
    background: transparent;
    color: #444;
    border-color: #2a2a2a;
    cursor: not-allowed;
}

/* Active cards section (bottom split panel) */
.tod-tarot-active-section {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--tod-border);
}

.tod-tarot-active-label {
    padding: 4px 8px 3px;
    font-size: 10px;
    font-family: 'Cinzel', 'Palatino Linotype', serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tod-gold);
    border-bottom: 1px solid var(--tod-border);
    flex-shrink: 0;
}

.tod-tarot-slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 6px;
}

/* Individual active card slot */
.tod-tarot-slot {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--tod-border);
    border-radius: var(--tod-radius);
    overflow: hidden;
    min-width: 0;
}

.tod-tarot-slot--empty {
    border-style: dashed;
    border-color: #2a2a2a;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

.tod-tarot-slot-empty-label {
    font-size: 10px;
    color: #333;
    font-family: 'Cinzel', 'Palatino Linotype', serif;
    letter-spacing: 0.05em;
    text-align: center;
    padding: 8px 4px;
}

.tod-tarot-slot--filled {
    border-color: var(--tod-border-gold);
    background: #0f0d08;
}

.tod-tarot-slot-top {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    padding: 5px 5px 4px;
    border-bottom: 1px solid var(--tod-border);
}

.tod-tarot-slot-img {
    width: 32px;
    height: 52px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
    border: 1px solid var(--tod-border-gold);
}

.tod-tarot-slot-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
}

.tod-tarot-slot-name {
    font-size: 10px;
    font-family: 'Cinzel', 'Palatino Linotype', serif;
    color: var(--tod-gold);
    font-weight: 700;
    line-height: 1.2;
    word-break: break-word;
}

.tod-tarot-deactivate-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    font-size: 9px;
    font-family: 'Cinzel', 'Palatino Linotype', serif;
    background: transparent;
    border: 1px solid #3a2a2a;
    border-radius: var(--tod-radius);
    color: #884444;
    cursor: pointer;
    transition: background var(--tod-transition), color var(--tod-transition), border-color var(--tod-transition);
    white-space: nowrap;
    align-self: flex-start;
}
.tod-tarot-deactivate-btn:hover {
    background: rgba(244, 67, 54, 0.12);
    color: var(--tod-red);
    border-color: var(--tod-red);
}

.tod-tarot-slot-effects {
    padding: 4px 5px 5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tod-tarot-effect {
    font-size: 9px;
    line-height: 1.3;
    display: flex;
    align-items: flex-start;
    gap: 3px;
}

.tod-tarot-effect-icon {
    flex-shrink: 0;
    font-size: 9px;
    margin-top: 1px;
}

.tod-tarot-effect--pos { color: var(--tod-green); }
.tod-tarot-effect--neg { color: #c0392b; }

/* ============================================================
   Developer Cheat Console (Ctrl+5, dev mode only)
   ============================================================ */
#tod-dev-console-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}
#tod-dev-console-overlay.hidden {
    display: none;
}
#tod-dev-console-panel {
    background: var(--tod-bg-panel);
    border: 1px solid var(--tod-border-gold);
    border-radius: var(--tod-radius);
    padding: 22px 26px 20px;
    width: 640px;
    max-width: 96vw;
    position: relative;
    font-family: var(--tod-font-mono);
    box-shadow: 0 0 40px rgba(255,215,0,0.10);
}
#tod-dev-console-title {
    font-size: 15px;
    font-weight: bold;
    color: var(--tod-gold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 4px;
}
#tod-dev-console-subtitle {
    font-size: 11px;
    color: var(--tod-text-dim);
    margin-bottom: 14px;
}
#tod-dev-console-close {
    position: absolute;
    top: 10px;
    right: 13px;
    background: none;
    border: none;
    color: var(--tod-text-dim);
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    transition: color var(--tod-transition);
}
#tod-dev-console-close:hover {
    color: var(--tod-text-bright);
}
#tod-dev-console-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.tod-dev-preset-btn {
    background: #1a1a1a;
    border: 1px solid #4a3a10;
    border-radius: 3px;
    color: #c8a830;
    font-family: var(--tod-font-mono);
    font-size: 11px;
    padding: 4px 10px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.tod-dev-preset-btn:hover {
    background: #2a2000;
    border-color: var(--tod-gold);
    color: var(--tod-gold);
}
#tod-dev-console-textarea {
    width: 100%;
    height: 130px;
    resize: vertical;
    background: #080808;
    color: #e8d090;
    border: 1px solid var(--tod-border-gold);
    border-radius: var(--tod-radius);
    padding: 8px 10px;
    font-family: var(--tod-font-mono);
    font-size: 12px;
    caret-color: var(--tod-gold);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
    margin-bottom: 10px;
    display: block;
}
#tod-dev-console-textarea:focus {
    border-color: var(--tod-gold);
    box-shadow: 0 0 0 2px rgba(255,215,0,0.18);
}
#tod-dev-console-textarea::placeholder {
    color: #444;
}
#tod-dev-console-output {
    background: #050505;
    border: 1px solid #2a2a2a;
    border-radius: var(--tod-radius);
    padding: 7px 10px;
    font-family: var(--tod-font-mono);
    font-size: 11px;
    min-height: 30px;
    max-height: 80px;
    overflow-y: auto;
    margin-bottom: 12px;
    color: #666;
    white-space: pre-wrap;
    word-break: break-all;
}
#tod-dev-console-output.ok  { color: #6fcf6f; }
#tod-dev-console-output.err { color: #e06060; }
#tod-dev-console-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* =========================================================================
   Spirit Companion Dialog & Log Prompts
   ========================================================================= */
.tod-spirit-companion-title {
    color: #c8a8ff;
    text-shadow: 0 0 8px rgba(180, 120, 255, 0.6);
}
.tod-spirit-companion-portrait {
    float: left;
    margin: 0 12px 8px 0;
    font-size: 36px;
    line-height: 1;
    color: #c8a8ff;
    text-shadow: 0 0 10px rgba(180, 120, 255, 0.8);
}
.tod-spirit-companion-body {
    overflow: hidden;
}
.tod-spirit-companion-message {
    color: #ddd;
    font-size: 14px;
    line-height: 1.6;
    font-style: italic;
    margin: 0 0 4px 0;
}
.tod-spirit-companion-loading {
    color: #a080cc;
    font-size: 13px;
    font-style: italic;
    animation: tod-spirit-pulse 1.2s ease-in-out infinite;
}
@keyframes tod-spirit-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}
/* Spirit Companion log prompts */
.tod-spirit-prompt {
    color: #c8a8ff;
    font-style: italic;
    text-shadow: 0 0 4px rgba(180, 120, 255, 0.5);
}

/* ── Spell uses / permanent indicator ─────────────────────────────────────── */
.tod-spell-item.tod-spell-permanent {
    border-left: 3px solid #ffd700;
    padding-left: 6px;
}
.tod-spell-uses {
    font-size: 0.75rem;
    color: #aaa;
    min-width: 4em;
    text-align: right;
    flex-shrink: 0;
    white-space: nowrap;
}
.tod-spell-uses--permanent {
    color: #ffd700;
    font-weight: bold;
    font-size: 0.9rem;
}

/* Spell tier badges (Tier I / II / III) in spellbook and Arcanum upgrade tab */
.tod-spell-tier-badge {
    display:       inline-block;
    margin-left:   6px;
    padding:       1px 6px;
    border-radius: 4px;
    font-size:     0.72rem;
    font-weight:   700;
    letter-spacing: 0.03em;
    vertical-align: middle;
    background:    rgba(0,0,0,0.35);
    border:        1px solid currentColor;
    opacity:       0.9;
}
.tod-spell-tier-badge--1 {
    color: #9ca3af; /* grey — base tier */
}
.tod-spell-tier-badge--2 {
    color: #818cf8; /* indigo — Tier II */
}
.tod-spell-tier-badge--3 {
    color: #f59e0b; /* amber — Tier III (max) */
}

/* Spell mastery badges in the spellbook (Apprentice … Grandmaster) */
.tod-spell-mastery-badge {
    display:        inline-block;
    margin-left:    6px;
    padding:        1px 6px;
    border-radius:  4px;
    font-size:      0.70rem;
    font-weight:    700;
    letter-spacing: 0.03em;
    vertical-align: middle;
    background:     rgba(0,0,0,0.35);
    border:         1px solid currentColor;
    opacity:        0.9;
    cursor:         default;
}
.tod-spell-mastery-badge--1 { color: #60a5fa; } /* blue      — Apprentice  */
.tod-spell-mastery-badge--2 { color: #34d399; } /* emerald   — Journeyman  */
.tod-spell-mastery-badge--3 { color: #f59e0b; } /* amber     — Expert      */
.tod-spell-mastery-badge--4 { color: #f97316; } /* orange    — Master      */
.tod-spell-mastery-badge--5 { color: #e879f9; } /* fuchsia   — Grandmaster */

/* ============================================================
   BREWING STAND UI
   ============================================================ */

/* Fixed-size overlay panel — never resizes */
.tod-overlay-inner--brewing {
    display:        flex;
    flex-direction: column;
    width:          580px;
    height:         540px;
    max-height:     90vh;
    background:     #0d0b07;
    border:         2px solid #7a5a1a;
    border-radius:  6px;
    box-shadow:     0 0 32px rgba(180, 100, 0, 0.45);
    overflow:       hidden;
    position:       relative;
}

.tod-brew-header {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         10px 14px;
    background:      #1a1206;
    border-bottom:   1px solid #4a3a0a;
    flex-shrink:     0;
}

.tod-brew-title {
    font-family: var(--tod-font-mono);
    font-size:   1.05rem;
    font-weight: bold;
    color:       #FFCC44;
    flex:        1;
    letter-spacing: 0.04em;
}

.tod-brew-water-badge {
    font-family:   var(--tod-font-mono);
    font-size:     0.72rem;
    padding:       2px 8px;
    border-radius: 3px;
    font-weight:   bold;
    letter-spacing: 0.05em;
}
.tod-brew-water-normal  { background: #1a2a3a; color: #88CCFF; border: 1px solid #336699; }
.tod-brew-water-holy    { background: #1a1a00; color: #FFEE44; border: 1px solid #AAAA00; }
.tod-brew-water-tainted { background: #1a0000; color: #FF6644; border: 1px solid #882200; }
.tod-brew-water-none    { background: #1a1a1a; color: #666666; border: 1px solid #333333; }

#tod-brewing-close {
    background:  transparent;
    border:      none;
    color:       #888;
    font-size:   1rem;
    cursor:      pointer;
    padding:     0 4px;
    line-height: 1;
}
#tod-brewing-close:hover { color: #FF6644; }

.tod-brew-list {
    flex:       1;
    overflow-y: auto;
    padding:    8px 10px;
    scrollbar-width: thin;
    scrollbar-color: #4a3a0a #0d0b07;
}
.tod-brew-list::-webkit-scrollbar       { width: 6px; }
.tod-brew-list::-webkit-scrollbar-track { background: #0d0b07; }
.tod-brew-list::-webkit-scrollbar-thumb { background: #4a3a0a; border-radius: 3px; }

.tod-brew-row {
    background:    #141008;
    border:        1px solid #3a2a06;
    border-radius: 4px;
    padding:       8px 10px;
    margin-bottom: 6px;
}
.tod-brew-row-disabled { opacity: 0.5; }

.tod-brew-row-top {
    display:       flex;
    align-items:   center;
    gap:           8px;
    margin-bottom: 4px;
}
.tod-brew-potion-name {
    font-family: var(--tod-font-mono);
    font-size:   0.88rem;
    color:       #FFCC44;
    font-weight: bold;
    flex:        1;
}

.tod-brew-qty-ctrl {
    display:     flex;
    align-items: center;
    gap:         4px;
}
.tod-brew-qty-btn {
    background:    #2a1a06;
    border:        1px solid #5a3a0a;
    color:         #FFAA00;
    font-family:   var(--tod-font-mono);
    font-size:     0.85rem;
    width:         22px;
    height:        22px;
    cursor:        pointer;
    border-radius: 3px;
    padding:       0;
    line-height:   1;
}
.tod-brew-qty-btn:hover { background: #3a2a0a; }
.tod-brew-qty-val {
    font-family: var(--tod-font-mono);
    font-size:   0.85rem;
    color:       #FFCC88;
    min-width:   20px;
    text-align:  center;
}

.tod-brew-btn {
    background:    #2a1a00;
    border:        1px solid #FFAA00;
    color:         #FFCC44;
    font-family:   var(--tod-font-mono);
    font-size:     0.78rem;
    padding:       3px 10px;
    cursor:        pointer;
    border-radius: 3px;
    font-weight:   bold;
    letter-spacing: 0.04em;
    transition:    background 0.15s;
}
.tod-brew-btn:hover:not(.tod-brew-btn-disabled) { background: #3a2a00; }
.tod-brew-btn-disabled {
    border-color: #444;
    color:        #555;
    cursor:       not-allowed;
}

.tod-brew-row-ings {
    font-family:   var(--tod-font-mono);
    font-size:     0.74rem;
    color:         #888;
    margin-bottom: 3px;
    display:       flex;
    flex-wrap:     wrap;
    gap:           6px;
}
.tod-brew-ing-ok      { color: #66CC66; }
.tod-brew-ing-missing { color: #CC4444; }

.tod-brew-row-desc {
    font-family: var(--tod-font-mono);
    font-size:   0.72rem;
    color:       #666;
    font-style:  italic;
    line-height: 1.35;
}

.tod-brew-footer {
    display:     flex;
    align-items: center;
    gap:         12px;
    padding:     8px 14px;
    background:  #1a1206;
    border-top:  1px solid #4a3a0a;
    flex-shrink: 0;
}
.tod-btn--brew-all {
    background:    #2a1a00;
    border:        1px solid #FFAA00;
    color:         #FFCC44;
    font-family:   var(--tod-font-mono);
    font-size:     0.82rem;
    padding:       5px 14px;
    cursor:        pointer;
    border-radius: 3px;
    font-weight:   bold;
    letter-spacing: 0.04em;
}
.tod-btn--brew-all:hover { background: #3a2a00; }
.tod-brew-status {
    font-family: var(--tod-font-mono);
    font-size:   0.78rem;
    color:       #FFCC88;
    flex:        1;
    text-align:  right;
}


/* ==========================================================================
   v3.0 Deity Favour System — Stat Panel & Overlays
   ========================================================================== */

/* ── Deity Standing block ─────────────────────────────────────────────────── */
.tod-deity-block {
    border-top: 1px solid rgba(255,200,80,0.18);
    padding-top: 4px;
    margin-top:  2px;
}

/* Deity Standing value — tier colours */
.tod-deity-standing          { font-weight: 600; letter-spacing: 0.03em; }
.tod-deity--exalted          { color: #FFD700; text-shadow: 0 0 6px rgba(255,215,0,0.55); }
.tod-deity--favoured         { color: #A8E6A3; }
.tod-deity--neutral          { color: #C8C8C8; }
.tod-deity--wary             { color: #E8A040; }
.tod-deity--forsaken         { color: #CC4444; }
.tod-deity--displeased       { color: #FF3333; text-shadow: 0 0 6px rgba(255,50,50,0.55); animation: tod-deity-pulse 1.4s ease-in-out infinite; }

@keyframes tod-deity-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
}

/* ── Momentum counter ─────────────────────────────────────────────────────── */
.tod-momentum--active { color: #88CCFF; }
.tod-momentum--high   { color: #FFD700; text-shadow: 0 0 5px rgba(255,215,0,0.5); font-weight: 600; }

/* ── Celestial Aegis indicator ────────────────────────────────────────────── */
.tod-aegis                { font-style: italic; font-weight: 600; }
.tod-aegis--lawful        { color: #A8D8FF; text-shadow: 0 0 5px rgba(168,216,255,0.5); }
.tod-aegis--neutral       { color: #C8A8FF; text-shadow: 0 0 5px rgba(200,168,255,0.5); }
.tod-aegis--chaotic       { color: #FF9966; text-shadow: 0 0 5px rgba(255,153,102,0.5); }

/* ==========================================================================
   v3.0 Altar — Sacrificial Pact Button
   ========================================================================== */
.tod-altar-btn--pact {
    background:    linear-gradient( 135deg, #2a0a2a 0%, #1a0a10 100% );
    border:        1px solid #8B3A8B;
    color:         #DDA0DD;
    letter-spacing: 0.04em;
    margin-top:    4px;
}
.tod-altar-btn--pact:hover:not([disabled]) {
    background: linear-gradient( 135deg, #3d1040 0%, #280a18 100% );
    border-color: #CC66CC;
    color:        #F0C0F0;
}
.tod-altar-btn--pact[disabled] {
    opacity: 0.45;
    cursor:  not-allowed;
}

/* ==========================================================================
   v3.0 Sacrificial Pact Overlay
   ========================================================================== */
.tod-pact-panel {
    max-width:  420px;
    border:     1px solid #8B3A8B;
    box-shadow: 0 0 24px rgba(139,58,139,0.35);
}

.tod-pact-title {
    color:       #DDA0DD;
    text-shadow: 0 0 8px rgba(221,160,221,0.5);
    font-size:   1.1rem;
    margin:      0 0 10px;
}

.tod-pact-intro {
    color:     #E8D8E8;
    font-size: 0.88rem;
    margin:    0 0 4px;
}

.tod-pact-reward-desc {
    color:       #C8A8FF;
    font-size:   0.82rem;
    font-style:  italic;
    margin:      0 0 8px;
    padding:     6px 8px;
    background:  rgba(100,50,120,0.25);
    border-left: 3px solid #8B3A8B;
    border-radius: 3px;
}

.tod-pact-cost-note {
    color:     #FFCC88;
    font-size: 0.82rem;
    margin:    0 0 12px;
}

.tod-pact-options {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    margin-bottom:  12px;
}

.tod-pact-stat-btn {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    background:      rgba(60,20,60,0.6);
    border:          1px solid #6B2A6B;
    color:           #E8C8E8;
    padding:         8px 12px;
    border-radius:   4px;
    cursor:          pointer;
    font-family:     var(--tod-font-mono);
    font-size:       0.85rem;
    transition:      background 0.15s, border-color 0.15s;
    text-align:      left;
    width:           100%;
}
.tod-pact-stat-btn:hover:not([disabled]) {
    background:   rgba(100,30,100,0.7);
    border-color: #CC66CC;
    color:        #F0C0F0;
}
.tod-pact-stat-btn--blocked,
.tod-pact-stat-btn[disabled] {
    opacity: 0.4;
    cursor:  not-allowed;
}

.tod-pact-stat-label {
    font-weight: 600;
    min-width:   70px;
}

.tod-pact-stat-cost {
    color:     #FFCC88;
    font-size: 0.82rem;
}

.tod-pact-ceiling-tag {
    font-size:     0.72rem;
    color:         #FF8888;
    background:    rgba(200,50,50,0.2);
    border:        1px solid #CC4444;
    border-radius: 3px;
    padding:       1px 5px;
    margin-left:   6px;
}

/* ============================================================
   ALTAR -- REMOVE CURSE ITEM PICKER  (v1.2.466)
   ============================================================ */

.tod-overlay-inner--remove-curse {
    width:  420px;
    max-width: 95vw;
    background: #1a1008;
    border: 2px solid #8b1a1a;
    border-radius: 6px;
    padding: 18px 20px 16px;
    box-shadow: 0 0 24px rgba(139,26,26,0.55), inset 0 0 40px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.tod-altar-rc-intro {
    font-family: var(--tod-font-mono, monospace);
    font-size: 0.82rem;
    color: #c8a96e;
    margin: 0 0 4px;
    line-height: 1.4;
}

.tod-altar-rc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid #4a2a0a;
    border-radius: 4px;
    background: #110b04;
}

.tod-altar-rc-list::-webkit-scrollbar        { width: 6px; }
.tod-altar-rc-list::-webkit-scrollbar-track  { background: #1a1008; }
.tod-altar-rc-list::-webkit-scrollbar-thumb  { background: #8b1a1a; border-radius: 3px; }

.tod-altar-rc-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid #2a1a06;
    cursor: pointer;
    transition: background 0.15s;
}

.tod-altar-rc-item:last-child { border-bottom: none; }

.tod-altar-rc-item:hover { background: rgba(139,26,26,0.25); }

.tod-altar-rc-radio {
    accent-color: #8b1a1a;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    cursor: pointer;
}

.tod-altar-rc-label {
    font-family: var(--tod-font-mono, monospace);
    font-size: 0.83rem;
    color: #e0c080;
    cursor: pointer;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tod-altar-rc-cursed-tag {
    font-size: 0.70rem;
    color: #8b1a1a;
    border: 1px solid #8b1a1a;
    border-radius: 3px;
    padding: 1px 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.tod-altar-rc-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 4px;
}


/* =============================================================================
   Altar: Recharge Wand - Two-Column Picker  (v1.2.468)
   ============================================================================= */

.tod-overlay-inner--recharge-wand {
    width: 560px;
    max-width: 96vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: #0d0d14;
    border: 2px solid #4a8fa8;
    border-radius: 6px;
    padding: 18px 20px 14px;
    box-shadow: 0 0 28px rgba(74, 143, 168, 0.35);
}
.tod-altar-rw-intro { font-size: 0.78rem; color: #8ab8cc; margin: 0 0 10px; line-height: 1.4; }
.tod-altar-rw-warning { background: rgba(200,80,30,0.18); border: 1px solid #c85020; border-radius: 4px; color: #e8905a; font-size: 0.75rem; padding: 6px 10px; margin-bottom: 10px; }
.tod-altar-rw-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1 1 auto; min-height: 0; }
.tod-altar-rw-col { display: flex; flex-direction: column; min-height: 0; }
.tod-altar-rw-col-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #4a8fa8; margin: 0 0 6px; padding-bottom: 4px; border-bottom: 1px solid #1e3a48; }
.tod-altar-rw-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1 1 auto; max-height: 300px; scrollbar-width: thin; scrollbar-color: #4a8fa8 #0d0d14; }
.tod-altar-rw-list::-webkit-scrollbar { width: 5px; }
.tod-altar-rw-list::-webkit-scrollbar-track { background: #0d0d14; }
.tod-altar-rw-list::-webkit-scrollbar-thumb { background: #4a8fa8; border-radius: 3px; }
.tod-altar-rw-item { display: flex; align-items: flex-start; gap: 7px; padding: 6px 8px; border-radius: 4px; cursor: pointer; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s; margin-bottom: 3px; }
.tod-altar-rw-item:hover { background: rgba(74,143,168,0.12); border-color: #2a5a70; }
.tod-altar-rw-item--match { background: rgba(60,160,80,0.12) !important; border-color: #3ca050 !important; }
.tod-altar-rw-item--no-match { opacity: 0.45; }
.tod-altar-rw-radio { margin-top: 3px; accent-color: #4a8fa8; flex-shrink: 0; }
.tod-altar-rw-label { display: flex; flex-direction: column; gap: 2px; cursor: pointer; flex: 1; }
.tod-altar-rw-name { font-size: 0.80rem; color: #d4c89a; font-weight: 600; }
.tod-altar-rw-meta { font-size: 0.70rem; color: #6a8a9a; }
.tod-altar-rw-tag { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em; color: #4a8fa8; text-transform: uppercase; background: rgba(74,143,168,0.15); border-radius: 3px; padding: 1px 5px; align-self: flex-start; }
.tod-altar-rw-risk { font-size: 0.65rem; font-weight: 700; color: #e05030; letter-spacing: 0.04em; background: rgba(200,60,20,0.15); border-radius: 3px; padding: 1px 5px; align-self: flex-start; }
.tod-altar-rw-footer { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #1e3a48; }
.tod-altar-rw-match-status { font-size: 0.75rem; min-height: 1.1em; text-align: center; }
.tod-altar-rw-match--ok      { color: #5cd87a; }
.tod-altar-rw-match--bad     { color: #e05030; }
.tod-altar-rw-match--neutral { color: #8ab8cc; }
.tod-altar-rw-btns { display: flex; gap: 10px; justify-content: flex-end; }

/* ── World Broadcast log message style ──────────────────────────────────────
   Injected into every active player's message log when a significant event
   occurs anywhere in the world (win, death, level milestone, achievement,
   floor milestone).  Uses a herald-gold palette to stand out from normal
   combat/exploration messages without being alarming.
   ─────────────────────────────────────────────────────────────────────────── */
.tod-log p.tod-log--broadcast {
    display:          block;
    margin:           5px 0;
    padding:          5px 10px 5px 12px;
    background:       rgba(180, 140, 20, 0.12);
    border-left:      3px solid #c8a020;
    color:            #e8cc70;
    font-style:       italic;
    font-size:        1em;
    letter-spacing:   0.01em;
}

/* ── Run History Sparkline Graph ─────────────────────────────────────────────
   Displayed on public TOD profiles showing floor-reached per run (last 20).
   ─────────────────────────────────────────────────────────────────────────── */
.tod-run-history-section {
    margin: 24px 0 8px;
}
.tod-run-history-wrap {
    background:    rgba(255,255,255,0.04);
    border:        1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding:       14px 16px 10px;
}
.tod-run-history-svg {
    display:  block;
    width:    100%;
    height:   auto;
    overflow: visible;
}
.tod-rh-grid {
    stroke:       rgba(255,255,255,0.12);
    stroke-width: 1;
}
.tod-rh-line {
    fill:            none;
    stroke:          #c8a020;
    stroke-width:    2;
    stroke-linejoin: round;
    stroke-linecap:  round;
}
.tod-rh-dot {
    stroke:       #1a1a1a;
    stroke-width: 1.5;
}
.tod-rh-dot--win   { fill: #4caf50; }
.tod-rh-dot--death { fill: #e05252; }
.tod-rh-dot--quit  { fill: #888; }
.tod-rh-legend {
    display:     flex;
    gap:         14px;
    margin-top:  8px;
    font-size:   0.75em;
    color:       rgba(255,255,255,0.55);
}
.tod-rh-legend-item {
    display:     flex;
    align-items: center;
    gap:         4px;
}
.tod-rh-legend-dot-svg {
    flex-shrink: 0;
}

/* == Adventurer's Guild ===================================================== */
.tod-guild-wrap{max-width:960px;margin:0 auto;padding:24px 16px 48px;color:#e8e0cc}
.tod-guild-header{text-align:center;margin-bottom:28px}
.tod-guild-title{font-family:'Cinzel Decorative','MedievalSharp',serif;font-size:clamp(1.6rem,4vw,2.6rem);font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(180deg,#fff5c0 0%,#f0c040 25%,#c8860a 55%,#7a4800 80%,#3d1f00 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#c8860a;filter:drop-shadow(0 0 10px rgba(255,200,50,.45)) drop-shadow(0 2px 5px rgba(0,0,0,.75));margin:0 0 6px}
.tod-guild-subtitle{color:#a09070;font-size:.9rem;margin:0}
.tod-guild-empty{text-align:center;color:#a09070;font-style:italic;padding:40px 0}
.tod-guild-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:600px){.tod-guild-grid{grid-template-columns:1fr}}
.tod-guild-card{background:rgba(20,14,8,.82);border:1px solid rgba(180,130,40,.35);border-radius:4px;transition:border-color .2s,box-shadow .2s}
.tod-guild-card:hover{border-color:rgba(240,192,64,.65);box-shadow:0 0 12px rgba(200,134,10,.2)}
.tod-guild-card__inner{display:flex;align-items:center;gap:1rem;padding:.85rem 1rem;text-decoration:none;color:inherit}
.tod-guild-card__inner:hover{text-decoration:none;color:inherit}
.tod-guild-card__avatar-wrap{position:relative;flex-shrink:0;width:64px;height:64px;min-width:64px;min-height:64px}.tod-guild-card__avatar{width:100%;height:100%;border-radius:4px;border:2px solid rgba(180,130,40,.4);background-color:rgba(40,28,12,.9);background-size:cover;background-position:center;background-repeat:no-repeat;image-rendering:pixelated}
.tod-guild-card__avatar-placeholder{font-size:1.6rem;line-height:1;color:#a09070}
.tod-guild-card__body{flex:1;min-width:0}
.tod-guild-card__name{font-size:1rem;font-weight:700;color:#f0c040;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.tod-guild-card__location{font-size:.75rem;color:#a09070;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tod-guild-card__bio{font-size:.78rem;color:#c8b890;line-height:1.45;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tod-guild-card__stats{display:flex;flex-wrap:wrap;gap:6px 12px}
.tod-guild-stat{font-size:.75rem;color:#a09070;display:inline-flex;align-items:center;gap:3px}
.tod-guild-stat__icon{font-size:.85em}
.tod-guild-pagination{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:32px}
.tod-guild-page-btn{display:inline-block;padding:5px 12px;background:rgba(20,14,8,.82);border:1px solid rgba(180,130,40,.4);border-radius:4px;color:#c8b890;font-size:.85rem;text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.tod-guild-page-btn:hover{background:rgba(60,40,10,.9);border-color:rgba(240,192,64,.7);color:#f0c040;text-decoration:none}
.tod-guild-page-btn--current{background:rgba(200,134,10,.25);border-color:rgba(240,192,64,.8);color:#f0c040;font-weight:700;cursor:default;pointer-events:none}
.tod-guild-page-ellipsis{color:#a09070;font-size:.85rem;padding:0 4px}

/* Faction: Guild card name row */
.tod-guild-card__name-row{display:flex;align-items:center;gap:6px;margin-bottom:2px;flex-wrap:wrap}
.tod-guild-card__name-row .tod-guild-card__name{margin-bottom:0}

/* Faction badge */
.tod-faction-badge{display:inline-block;padding:2px 8px;border-radius:3px;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border:1px solid transparent;line-height:1.5;white-space:nowrap;vertical-align:middle}
.tod-faction-badge--lawful {background:rgba(30,50,120,.55);border-color:rgba(100,160,255,.5);color:#a8c8ff}
.tod-faction-badge--neutral{background:rgba(50,50,50,.55);border-color:rgba(160,160,160,.45);color:#c8c8c8}
.tod-faction-badge--chaotic{background:rgba(100,20,20,.55);border-color:rgba(220,60,60,.5);color:#ff9090}

/* Faction: Guild card border accent */
.tod-guild-card--lawful {border-color:rgba(100,160,255,.45)}
.tod-guild-card--lawful:hover{border-color:rgba(100,160,255,.8);box-shadow:0 0 14px rgba(80,130,255,.25)}
.tod-guild-card--neutral{border-color:rgba(160,160,160,.35)}
.tod-guild-card--neutral:hover{border-color:rgba(200,200,200,.65);box-shadow:0 0 14px rgba(160,160,160,.2)}
.tod-guild-card--chaotic{border-color:rgba(220,60,60,.45)}
.tod-guild-card--chaotic:hover{border-color:rgba(255,80,80,.8);box-shadow:0 0 14px rgba(200,40,40,.3)}

/* ── Guild card badge styles (tod-my-account.css not loaded on guild page) ── */
.tod-guild-card__avatar-wrap .tod-verified-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #c9a84c 0%, #f0d060 50%, #a07820 100%);
    border: 1.5px solid #1a1400;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 900;
    color: #1a1400;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,0.7), 0 0 6px rgba(200,160,40,0.4);
    cursor: default;
    z-index: 10;
    pointer-events: none;
}
.tod-guild-card__avatar-wrap .tod-admin-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #1a4a9a 0%, #3a7aff 50%, #0a2a6a 100%);
    border: 1.5px solid #0a1a3a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 900;
    color: #c8e0ff;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,0.7), 0 0 6px rgba(60,120,255,0.4);
    cursor: default;
    z-index: 10;
    pointer-events: none;
}
.tod-guild-card__avatar-wrap .tod-custom-badge {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.7);
    cursor: default;
    z-index: 10;
    pointer-events: none;
}
.tod-guild-card__avatar-wrap .tod-custom-badge--1 {
    top: 3px;
    right: 21px;
    background: linear-gradient(135deg, #6a1a9a 0%, #b060ff 50%, #3a0a6a 100%);
    border: 1.5px solid #2a0a4a;
    color: #e0c0ff;
}
.tod-guild-card__avatar-wrap .tod-custom-badge--2 {
    top: 3px;
    right: 37px;
    background: linear-gradient(135deg, #9a1a1a 0%, #ff6060 50%, #6a0a0a 100%);
    border: 1.5px solid #4a0a0a;
    color: #ffc0c0;
}
.tod-guild-card__avatar-wrap .tod-custom-badge--3 {
    top: 3px;
    right: 53px;
    background: linear-gradient(135deg, #1a6a1a 0%, #60c060 50%, #0a4a0a 100%);
    border: 1.5px solid #0a3a0a;
    color: #c0ffc0;
}

/* ── Songbook deep-link highlight (added v1.2.738) ─────────────────────────── */
.tod-chronicle-card--highlighted {
    outline: 2px solid var(--tod-gold, #c9a227);
    outline-offset: 2px;
    animation: tod-chronicle-highlight-pulse 2s ease-out 3;
}
@keyframes tod-chronicle-highlight-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(201,162,39,0.6); }
    60%  { box-shadow: 0 0 0 10px rgba(201,162,39,0); }
    100% { box-shadow: 0 0 0 0 rgba(201,162,39,0); }
}

/* ==========================================================================
   Board Themes (v1.5.28)
   Each theme overrides CSS variables scoped to #tod-wrapper[data-theme="X"].
   The default theme uses the :root values defined at the top of this file.
   ========================================================================== */

/* -- Engraved Stone Fortress ------------------------------------------------ */
/* Deep grey stone with warm amber torchlight and runic gold accents */
#tod-wrapper[data-theme="stone"] {
    --tod-bg:           #1c1a16;
    --tod-bg-panel:     #2a2520;
    --tod-bg-overlay:   rgba(10, 9, 7, 0.95);
    --tod-border:       #6a5a3a;
    --tod-border-gold:  #c8922a;
    --tod-text:         #e8d8a8;
    --tod-text-dim:     #9a8060;
    --tod-text-bright:  #fff0c8;
    --tod-gold:         #f0b030;
    --tod-green:        #78b848;
    --tod-red:          #d04828;
    --tod-blue:         #6888c8;
    --tod-orange:       #e09030;
    --tod-purple:       #9868b8;
}

/* -- Illuminated Manuscript ------------------------------------------------- */
/* Warm parchment tones with crimson and gold leaf, aged vellum background */
#tod-wrapper[data-theme="manuscript"] {
    --tod-bg:           #2e2010;
    --tod-bg-panel:     #3d2c18;
    --tod-bg-overlay:   rgba(18, 12, 4, 0.95);
    --tod-border:       #8a5c28;
    --tod-border-gold:  #d4900a;
    --tod-text:         #f0e0b0;
    --tod-text-dim:     #a07840;
    --tod-text-bright:  #fff8d8;
    --tod-gold:         #e8a010;
    --tod-green:        #4a7830;
    --tod-red:          #c02818;
    --tod-blue:         #385898;
    --tod-orange:       #d07010;
    --tod-purple:       #6840a0;
}

/* -- Obsidian Crystal ------------------------------------------------------- */
/* Deep void-black with electric violet and cyan rune-glow accents */
#tod-wrapper[data-theme="obsidian"] {
    --tod-bg:           #07050f;
    --tod-bg-panel:     #100c1e;
    --tod-bg-overlay:   rgba(3, 2, 8, 0.97);
    --tod-border:       #2a1850;
    --tod-border-gold:  #8040e0;
    --tod-text:         #c0a8f0;
    --tod-text-dim:     #504878;
    --tod-text-bright:  #f0e8ff;
    --tod-gold:         #c060ff;
    --tod-green:        #20e0a0;
    --tod-red:          #ff2060;
    --tod-blue:         #40a0ff;
    --tod-orange:       #ff6020;
    --tod-purple:       #a020ff;
}

/* -- Candlelit Crypt -------------------------------------------------------- */
/* Near-black with deep amber candlelight, rust-iron borders, bone-white text */
#tod-wrapper[data-theme="crypt"] {
    --tod-bg:           #100a06;
    --tod-bg-panel:     #1e1008;
    --tod-bg-overlay:   rgba(8, 4, 2, 0.96);
    --tod-border:       #4a2808;
    --tod-border-gold:  #a04808;
    --tod-text:         #e8c890;
    --tod-text-dim:     #7a4820;
    --tod-text-bright:  #fff0c0;
    --tod-gold:         #e07010;
    --tod-green:        #507830;
    --tod-red:          #c02010;
    --tod-blue:         #284870;
    --tod-orange:       #d05808;
    --tod-purple:       #602870;
}
/* Pride Month seasonal theme — Intersex-Inclusive Progress Pride Flag palette */
#tod-wrapper[data-theme="pride"] {
    --tod-bg:           #0a0a12;
    --tod-bg-panel:     #12101e;
    --tod-bg-overlay:   rgba(5, 5, 14, 0.96);
    --tod-border:       #4a1878;
    --tod-border-gold:  #e040fb;
    --tod-text:         #f0e8ff;
    --tod-text-dim:     #8060a0;
    --tod-text-bright:  #ffffff;
    --tod-gold:         #ffed00;
    --tod-green:        #008026;
    --tod-red:          #e40303;
    --tod-blue:         #74d7ee;
    --tod-orange:       #ff8c00;
    --tod-purple:       #750787;
}


/* =============================================================================
   Raven Post — Messaging System
   ============================================================================= */

/* -- Palette ----------------------------------------------------------------- */
:root {
    --raven-bg:           #0e0c0a;
    --raven-border:       rgba(180, 130, 60, 0.35);
    --raven-gold:         #c8820a;
    --raven-gold-bright:  #f0b030;
    --raven-text:         #d8c090;
    --raven-text-dim:     #7a6040;
    --raven-unread-bg:    rgba(200, 130, 10, 0.12);
    --raven-expiry-bg:    rgba(200, 100, 10, 0.15);
    --raven-expiry-color: #e08020;
    --raven-bubble-sent:  rgba(30, 50, 80, 0.55);
    --raven-bubble-recv:  rgba(20, 18, 14, 0.75);
}

/* -- Tab badge --------------------------------------------------------------- */
.tod-raven-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--raven-gold);
    color: #000;
    font-size: 0.68rem;
    font-weight: 700;
    margin-left: 5px;
    line-height: 1;
}

/* -- Panel header ------------------------------------------------------------ */
.tod-raven-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0 1rem;
    border-bottom: 1px solid var(--raven-border);
    margin-bottom: 1rem;
}
.tod-raven-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.tod-raven-title-icon svg { color: var(--raven-gold); flex-shrink: 0; }
.tod-raven-title-row .tod-account-section-title { margin: 0; }
.tod-raven-btn-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.tod-raven-compose-btn {
    background: var(--raven-gold);
    color: #000;
    border: none;
    padding: 0.35rem 0.9rem;
    font-size: 0.82rem;
    cursor: pointer;
    border-radius: 3px;
    font-weight: 600;
    transition: background 0.15s;
}
.tod-raven-compose-btn:hover { background: var(--raven-gold-bright); }
.tod-raven-view-btn {
    background: transparent;
    border: 1px solid var(--raven-border);
    color: var(--raven-text-dim);
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: 3px;
    transition: border-color 0.15s, color 0.15s;
}
.tod-raven-view-btn:hover,
.tod-raven-view-btn.is-active {
    border-color: var(--raven-gold);
    color: var(--raven-gold);
}

/* -- Message list ------------------------------------------------------------ */
.tod-raven-list-wrap { display: flex; flex-direction: column; gap: 0.4rem; }
.tod-raven-empty { color: var(--raven-text-dim); font-style: italic; padding: 1rem 0; }
.tod-raven-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--raven-border);
    border-radius: 4px;
    background: rgba(255,255,255,0.02);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    position: relative;
}
.tod-raven-row:hover { background: rgba(200,130,10,0.07); border-color: var(--raven-gold); }
.tod-raven-row.is-unread { background: var(--raven-unread-bg); border-left: 3px solid var(--raven-gold); }
.tod-raven-row.is-expiring { background: var(--raven-expiry-bg); border-left: 3px solid var(--raven-expiry-color); }
.tod-raven-row-meta { display: flex; gap: 0.75rem; font-size: 0.78rem; color: var(--raven-text-dim); flex-shrink: 0; }
.tod-raven-row-who { font-weight: 600; color: var(--raven-text); }
.tod-raven-row-date { white-space: nowrap; }
.tod-raven-row-subject {
    flex: 1;
    font-size: 0.88rem;
    color: var(--raven-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.tod-raven-expiry-warn { font-size: 0.75rem; color: var(--raven-expiry-color); white-space: nowrap; }
.tod-raven-retain-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 0 2px;
    opacity: 0.5;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.tod-raven-retain-btn:hover,
.tod-raven-retain-btn.is-retained { opacity: 1; }
.tod-raven-del-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--raven-text-dim);
    font-size: 0.85rem;
    padding: 0 4px;
    transition: color 0.15s;
    flex-shrink: 0;
}
.tod-raven-del-btn:hover { color: #c03020; }

/* -- Pager ------------------------------------------------------------------- */
.tod-raven-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.75rem 0;
}
.tod-raven-pager-info { font-size: 0.82rem; color: var(--raven-text-dim); }

/* -- Thread view ------------------------------------------------------------- */
.tod-raven-back-btn { margin-bottom: 0.75rem; }
.tod-raven-thread-title {
    font-size: 1rem;
    color: var(--raven-gold);
    margin: 0 0 1rem;
    border-bottom: 1px solid var(--raven-border);
    padding-bottom: 0.5rem;
}
.tod-raven-bubble {
    padding: 0.65rem 0.85rem;
    border-radius: 6px;
    margin-bottom: 0.6rem;
    max-width: 82%;
    position: relative;
}
.tod-raven-bubble.is-sent {
    background: var(--raven-bubble-sent);
    border: 1px solid rgba(80,120,180,0.3);
    margin-left: auto;
}
.tod-raven-bubble.is-received {
    background: var(--raven-bubble-recv);
    border: 1px solid var(--raven-border);
    margin-right: auto;
}
.tod-raven-bubble-meta { font-size: 0.75rem; color: var(--raven-text-dim); margin-bottom: 0.4rem; }
.tod-raven-bubble-body {
    font-size: 0.88rem;
    color: var(--raven-text);
    line-height: 1.55;
    word-break: break-word;
}
.tod-raven-bubble-body blockquote,
.tod-raven-quote {
    border-left: 3px solid var(--raven-gold);
    margin: 0.4rem 0;
    padding: 0.3rem 0.75rem;
    color: var(--raven-text-dim);
    font-style: italic;
    background: rgba(0,0,0,0.2);
    border-radius: 0 3px 3px 0;
}
.tod-raven-bubble-body a { color: var(--raven-gold-bright); text-decoration: underline; }
.tod-raven-body-error { color: #c03020; font-style: italic; font-size: 0.82rem; }

/* -- Review key row ---------------------------------------------------------- */
.tod-raven-key-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--raven-border);
    font-size: 0.75rem;
    color: var(--raven-text-dim);
}
.tod-raven-key-val {
    font-family: monospace;
    font-size: 0.72rem;
    background: rgba(0,0,0,0.3);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--raven-text);
    word-break: break-all;
}
.tod-raven-report-link {
    background: transparent;
    border: 1px solid rgba(200,60,40,0.4);
    color: #c06040;
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.tod-raven-report-link:hover { background: rgba(200,60,40,0.15); color: #e08060; }

/* -- Expiry warning in thread ------------------------------------------------ */
.tod-raven-expiry-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--raven-expiry-color);
    background: rgba(200,100,10,0.1);
    border: 1px solid rgba(200,100,10,0.3);
    border-radius: 3px;
    padding: 0.3rem 0.6rem;
    margin-top: 0.4rem;
}
.tod-raven-retain-inline-btn {
    background: transparent;
    border: 1px solid var(--raven-expiry-color);
    color: var(--raven-expiry-color);
    font-size: 0.72rem;
    padding: 1px 6px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s;
}
.tod-raven-retain-inline-btn:hover { background: rgba(200,100,10,0.2); }

/* -- Reply area -------------------------------------------------------------- */
.tod-raven-reply-wrap {
    margin-top: 1.25rem;
    border-top: 1px solid var(--raven-border);
    padding-top: 1rem;
}
.tod-raven-reply-title {
    font-size: 0.88rem;
    color: var(--raven-text-dim);
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tod-raven-send-btn { margin-top: 0.6rem; }

/* -- Formatting toolbar ------------------------------------------------------ */
.tod-raven-toolbar {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.tod-raven-tb-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--raven-border);
    color: var(--raven-text);
    font-size: 0.78rem;
    padding: 2px 7px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.12s;
    min-width: 26px;
    text-align: center;
}
.tod-raven-tb-btn:hover { background: rgba(200,130,10,0.18); border-color: var(--raven-gold); }
.tod-raven-tb-bold { font-weight: 700; }
.tod-raven-tb-italic { font-style: italic; }
.tod-raven-tb-underline { text-decoration: underline; }
.tod-raven-tb-strike { text-decoration: line-through; }

/* -- Content-editable editor ------------------------------------------------- */
.tod-raven-editor {
    min-height: 100px;
    max-height: 320px;
    overflow-y: auto;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--raven-border);
    border-radius: 3px;
    padding: 0.5rem 0.65rem;
    color: var(--raven-text);
    font-size: 0.88rem;
    line-height: 1.55;
    outline: none;
    transition: border-color 0.15s;
    text-align: left;
}
.tod-raven-editor:focus { border-color: var(--raven-gold); }
.tod-raven-editor[placeholder]:empty:before {
    content: attr(placeholder);
    color: var(--raven-text-dim);
    pointer-events: none;
}

/* -- Compose modal ----------------------------------------------------------- */
.tod-raven-compose-box { max-width: 560px; width: 95vw; }
.tod-raven-field-wrap { margin-bottom: 0.85rem; }
.tod-raven-label {
    display: block;
    font-size: 0.78rem;
    color: var(--raven-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
/* Styled text inputs inside the compose modal */
.tod-raven-compose-box input[type="text"],
.tod-raven-compose-box input[type="search"] {
    width: 100%;
    background: rgba(0,0,0,0.35);
    border: 1px solid var(--raven-border);
    border-radius: 3px;
    padding: 0.45rem 0.65rem;
    color: var(--raven-text);
    font-size: 0.88rem;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
    text-align: left;
}
.tod-raven-compose-box input[type="text"]:focus,
.tod-raven-compose-box input[type="search"]:focus {
    border-color: var(--raven-gold);
    background: rgba(0,0,0,0.5);
}
.tod-raven-compose-box input[type="text"]::placeholder,
.tod-raven-compose-box input[type="search"]::placeholder {
    color: var(--raven-text-dim);
    opacity: 0.7;
}

/* -- Autocomplete dropdown --------------------------------------------------- */
.tod-raven-ac-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #1a1510;
    border: 1px solid var(--raven-border);
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 160px;
    overflow-y: auto;
    position: absolute;
    z-index: 9999;
    min-width: 200px;
}
.tod-raven-ac-item {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    color: var(--raven-text);
    cursor: pointer;
    transition: background 0.1s;
}
.tod-raven-ac-item:hover { background: rgba(200,130,10,0.15); }

/* -- Profile message icon ---------------------------------------------------- */
.tod-raven-msg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(200,130,10,0.1);
    border: 1px solid var(--raven-border);
    color: var(--raven-gold);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    padding: 0;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    margin-top: 4px;
}
.tod-raven-msg-btn:hover {
    background: rgba(200,130,10,0.25);
    border-color: var(--raven-gold-bright);
}
.tod-raven-icon { width: 16px; height: 16px; }

/* -- Avatar menu raven icon -------------------------------------------------- */
.tod-raven-menu-icon { vertical-align: middle; }

/* -- Messaging Privacy preference panel ------------------------------------- */
.tod-raven-privacy-card-group { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 1rem; margin-top: 8px; }
.tod-raven-privacy-card {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 12px 16px; border-radius: 5px; cursor: pointer;
    border: 2px solid rgba(140,100,30,.4); background: rgba(20,14,8,.82);
    color: #c8b890; font-family: var(--tod-font-mono, monospace); font-size: .85rem;
    transition: border-color .2s, background .2s, color .2s;
    min-width: 110px; max-width: 160px; text-align: center;
}
.tod-raven-privacy-card:hover { border-color: rgba(240,192,64,.6); color: #f0c040; }
.tod-raven-privacy-card.is-active { border-color: rgba(240,192,64,.9); color: #f0c040; background: rgba(60,40,10,.9); font-weight: 700; }
.tod-raven-privacy-card:disabled, .tod-raven-privacy-card[disabled] { opacity: .38; cursor: not-allowed; pointer-events: none; }
.tod-raven-privacy-card-icon { font-size: 1.4rem; line-height: 1; }
.tod-raven-privacy-card-label { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.tod-raven-privacy-card-desc { font-size: .72rem; color: #a09070; margin-top: 2px; line-height: 1.3; }
.tod-raven-privacy-card.is-active .tod-raven-privacy-card-desc { color: #c8a860; }

/* -- Key prompt modal -------------------------------------------------------- */
#tod-raven-key-modal .tod-modal-box { max-width: 420px; }

/* -- Sent message read/unread badge ----------------------------------------- */
.tod-raven-read-badge {
    display: inline-block;
    font-size: .72rem;
    padding: 1px 7px;
    border-radius: 10px;
    margin-left: 8px;
    vertical-align: middle;
    font-family: var(--tod-font-mono, monospace);
    letter-spacing: .03em;
    white-space: nowrap;
}
.tod-raven-read-badge.is-read {
    background: rgba(76,175,80,.15);
    color: #6fcf72;
    border: 1px solid rgba(76,175,80,.35);
}
.tod-raven-read-badge.is-unread-badge {
    background: rgba(140,100,30,.18);
    color: #a09060;
    border: 1px solid rgba(140,100,30,.35);
}

/* ── Raven Post: Bulk Action Toolbar ─────────────────────────────────── */
.tod-raven-bulk-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(180,140,60,.2);
    border-radius: 4px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.tod-raven-bulk-label {
    font-size: 0.8rem;
    color: #a09060;
    margin-right: 4px;
}
.tod-raven-bulk-btn {
    font-size: 0.78rem;
    padding: 3px 10px;
    border-radius: 3px;
    cursor: pointer;
}
.tod-raven-row-chk {
    width: 15px;
    height: 15px;
    margin-right: 6px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--raven-accent, #c8a040);
}

/* ── Raven Post: Retention Policy Label ──────────────────────────────── */
.tod-raven-retention-label {
    font-size: 0.72rem;
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
    margin-left: 4px;
}
.tod-raven-retention-label.is-retained {
    color: #7ec87e;
    background: rgba(80,160,80,.12);
    border: 1px solid rgba(80,160,80,.25);
}
.tod-raven-retention-label.is-expiring-label {
    color: #c8a040;
    background: rgba(200,160,40,.1);
    border: 1px solid rgba(200,160,40,.25);
}

/* ── Raven Post: Block User Button (thread view) ─────────────────────── */
.tod-raven-thread-block-row {
    margin: 10px 0 4px;
    text-align: right;
}
.tod-raven-block-btn {
    font-size: 0.78rem;
    padding: 3px 10px;
    border-radius: 3px;
    background: rgba(160,40,40,.15);
    border: 1px solid rgba(200,60,60,.3);
    color: #e08080;
    cursor: pointer;
    transition: background 0.15s;
}
.tod-raven-block-btn:hover { background: rgba(160,40,40,.3); }
.tod-raven-block-btn:disabled { opacity: 0.5; cursor: default; }

/* ── Raven Post: Draft Notice ─────────────────────────────────────────── */
.tod-raven-draft-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(180,140,40,.12);
    border: 1px solid rgba(180,140,40,.3);
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 0.82rem;
    color: #c8a040;
    margin-bottom: 8px;
}
.tod-raven-draft-discard {
    font-size: 0.78rem;
    padding: 2px 8px;
    border-radius: 3px;
    background: transparent;
    border: 1px solid rgba(180,140,40,.4);
    color: #c8a040;
    cursor: pointer;
}
.tod-raven-draft-discard:hover { background: rgba(180,140,40,.15); }

/* ── Raven Post: Subject Character Counter ───────────────────────────── */
.tod-raven-char-counter {
    display: block;
    font-size: 0.75rem;
    color: #706050;
    text-align: right;
    margin-top: 2px;
}
.tod-raven-char-counter.is-near-limit { color: #c8a040; }
.tod-raven-char-counter.is-at-limit   { color: #e05050; font-weight: 600; }

/* ── Admin: Report Queue Table ───────────────────────────────────────── */
.tod-report-queue-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-top: 10px;
}
.tod-report-queue-table th {
    text-align: left;
    padding: 6px 10px;
    background: #f0f0f0;
    border-bottom: 2px solid #ddd;
    font-weight: 600;
}
.tod-report-queue-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}
.tod-report-queue-table tr:last-child td { border-bottom: none; }
.tod-report-status-pending  { color: #b06000; font-weight: 600; }
.tod-report-status-resolved { color: #2a7a2a; font-weight: 600; }
.tod-report-status-dismissed { color: #666; font-weight: 600; }

/* ============================================================
   Raven Post -- Report status badge (v1.5.108)
   ============================================================ */
.tod-raven-report-link--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.tod-raven-report-status-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.78em;
    font-weight: 600;
    vertical-align: middle;
    letter-spacing: 0.02em;
}

.tod-raven-report-status-badge--pending {
    background: rgba(180, 130, 0, 0.18);
    color: #c9960a;
    border: 1px solid rgba(180, 130, 0, 0.35);
}

.tod-raven-report-status-badge--resolved {
    background: rgba(40, 160, 80, 0.15);
    color: #2da85a;
    border: 1px solid rgba(40, 160, 80, 0.3);
}

.tod-raven-report-status-badge--dismissed {
    background: rgba(120, 120, 120, 0.12);
    color: #888;
    border: 1px solid rgba(120, 120, 120, 0.25);
}


/* ---------------------------------------------------------------------------
   Birthdate Required Notice (v1.5.116)
   Shown in Raven Post compose modal, Tavern forms, and profile Add User button
   --------------------------------------------------------------------------- */
.tod-birthdate-notice {
    display: block;
    background: rgba(180, 100, 0, 0.12);
    border: 1px solid rgba(200, 130, 0, 0.45);
    border-radius: 6px;
    color: #d4a04a;
    font-size: 0.82rem;
    line-height: 1.5;
    padding: 0.55rem 0.85rem;
    margin-bottom: 1rem;
}
.tod-birthdate-notice strong {
    color: #e8b55a;
}
.tod-birthdate-notice-link {
    color: #e8b55a;
    text-decoration: underline;
    font-weight: 600;
}
.tod-birthdate-notice-link:hover {
    color: #ffd700;
}
.tod-birthdate-notice--inline {
    font-size: 0.78rem;
    padding: 0.35rem 0.65rem;
    margin-top: 0.4rem;
    margin-bottom: 0;
}

/* ── Vault Import Icon Button (v1.5.153) ─────────────────────────────────── */
.tod-vault-import-wrap {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    margin-top:      0;
}

.tod-vault-import-icon-btn {
    background:    none;
    border:        2px solid transparent;
    border-radius: 50%;
    cursor:        pointer;
    font-size:     1.6rem;
    line-height:   1;
    padding:       6px 10px;
    transition:    transform 0.25s ease, filter 0.25s ease, border-color 0.25s ease;
    filter:        drop-shadow(0 0 4px rgba(180, 130, 40, 0.4));
    display:       inline-block;
}

.tod-vault-import-icon-btn:hover,
.tod-vault-import-icon-btn:focus {
    transform:    scale(1.25) rotate(6deg);
    filter:       drop-shadow(0 0 10px rgba(212, 175, 55, 0.85))
                  drop-shadow(0 0 20px rgba(160, 120, 0, 0.55));
    border-color: rgba(212, 175, 55, 0.5);
    outline:      none;
}


/* ==========================================================================
   Avatar Frames - Verified Frame System on Guild Cards (v1.5.155)
   tod-my-account.css is not loaded on the guild page, so frames are
   duplicated here for .tod-guild-card__avatar.
   ========================================================================== */

.tod-guild-card__avatar.tod-avatar-frame {
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.tod-guild-card__avatar.tod-avatar-frame--verified {
    border: 3px solid #c9a84c !important;
    box-shadow:
        0 0 0 1px rgba(201, 168, 76, 0.35),
        0 0 8px rgba(201, 168, 76, 0.45),
        0 0 18px rgba(201, 168, 76, 0.18);
}

.tod-guild-card__avatar.tod-avatar-frame--admin {
    border: 3px solid #3a7aff !important;
    box-shadow:
        0 0 0 1px rgba(58, 122, 255, 0.35),
        0 0 8px rgba(58, 122, 255, 0.45),
        0 0 18px rgba(58, 122, 255, 0.18);
}

.tod-guild-card__avatar.tod-avatar-frame--custom1 {
    border: 3px solid #c080f0 !important;
    box-shadow:
        0 0 0 1px rgba(160, 80, 240, 0.35),
        0 0 8px rgba(160, 80, 240, 0.5),
        0 0 18px rgba(160, 80, 240, 0.2);
}

.tod-guild-card__avatar.tod-avatar-frame--custom2 {
    border: 3px solid #f08080 !important;
    box-shadow:
        0 0 0 1px rgba(240, 80, 80, 0.35),
        0 0 8px rgba(240, 80, 80, 0.5),
        0 0 18px rgba(240, 80, 80, 0.2);
}

.tod-guild-card__avatar.tod-avatar-frame--custom3 {
    border: 3px solid #60e0a0 !important;
    box-shadow:
        0 0 0 1px rgba(80, 220, 140, 0.35),
        0 0 8px rgba(80, 220, 140, 0.5),
        0 0 18px rgba(80, 220, 140, 0.2);
}

/* Evil faction badge (v1.6.1) */
.tod-faction-badge--evil{background:rgba(80,0,0,.65);border-color:rgba(200,20,20,.65);color:#ff5555;box-shadow:0 0 6px rgba(180,0,0,.25)}


/* =============================================================================
   Graphics View Mode (v1.7.44.14 / v1.7.44.15)
   Activated when the admin selects "Graphics View" in Settings → Display.
   The wrapper receives the class `tod-graphics-view` from both the PHP template
   and the JS bootstrap in main.js.

   Hybrid approach:
     Option B — Emoji for items and environmental objects (rendered in JS)
     Option C — Coloured + glowing letters for mobs (canvas shadowBlur in JS)
     Option D — Subtle CSS enhancements to the board chrome in Graphics View
     Option E — Animated dungeon atmosphere (drifting fog behind the canvas)
   ============================================================================= */

/* -- Subtle board border glow to signal Graphics View is active -------------- */
.tod-graphics-view {
    box-shadow: 0 0 18px rgba(200, 160, 80, 0.30), inset 0 0 6px rgba(200, 160, 80, 0.08);
}

/* -- Staircase tiles: pulsing glow keyframe (applied via CSS on the canvas    */
/*    wrapper; the actual tile glyph glow is done in JS via canvas shadowBlur) */
@keyframes tod-gv-stair-pulse {
    0%   { opacity: 0.80; }
    50%  { opacity: 1.00; }
    100% { opacity: 0.80; }
}

/* -- Player @ tile: gentle breathing glow in Graphics View ------------------- */
@keyframes tod-gv-player-breathe {
    0%   { filter: drop-shadow(0 0 2px rgba(255,255,255,0.35)); }
    50%  { filter: drop-shadow(0 0 5px rgba(255,255,255,0.70)); }
    100% { filter: drop-shadow(0 0 2px rgba(255,255,255,0.35)); }
}

/* -- Graphics View indicator badge ------------------------------------------- */
/* A small, unobtrusive badge in the bottom-right of the map screen that        */
/* confirms Graphics View is active.  Hidden in Classic View.                   */
.tod-gv-badge {
    display: none;
}
.tod-graphics-view .tod-gv-badge {
    display: block;
    position: absolute;
    bottom: 4px;
    right: 6px;
    font-size: 0.60rem;
    color: rgba(200, 160, 80, 0.55);
    letter-spacing: 0.04em;
    pointer-events: none;
    user-select: none;
    z-index: 5;
}

/* =============================================================================
   Option E — Dungeon Atmosphere / Drifting Fog (v1.7.44.15)
   A purely CSS animated layer that sits behind the canvas and adds a sense
   of depth and dungeon ambiance.  Two pseudo-elements on the map screen
   create overlapping fog wisps that drift at different speeds and opacities.
   The canvas itself sits on top (z-index: 1) so gameplay is never obscured.
   Only active when .tod-graphics-view is present on the wrapper.
   ============================================================================= */

/* Fog keyframes — two independent drift paths for natural-looking movement.
   translate() values are kept modest so the gradients stay within the
   map-screen bounds (overflow: hidden clips anything outside). */
@keyframes tod-fog-drift-a {
    0%   { transform: translate(0px,   0px); opacity: 0.00; }
    12%  { opacity: 1.00; }
    50%  { transform: translate(24px, -10px); opacity: 1.00; }
    88%  { opacity: 0.80; }
    100% { transform: translate(48px,  -4px); opacity: 0.00; }
}
@keyframes tod-fog-drift-b {
    0%   { transform: translate(0px,   0px); opacity: 0.00; }
    15%  { opacity: 1.00; }
    55%  { transform: translate(-20px, 12px); opacity: 1.00; }
    85%  { opacity: 0.70; }
    100% { transform: translate(-40px,  8px); opacity: 0.00; }
}

/* The map screen becomes the stacking context for the fog layers */
.tod-graphics-view .tod-map-screen {
    isolation: isolate;
}

/* Fog layer A — slow, wide wisp drifting left-to-right across the lower half.
   Stays within the element so overflow:hidden does not clip it. */
.tod-graphics-view .tod-map-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse 80% 45% at 25% 65%,
        rgba(160, 140, 100, 0.28) 0%,
        rgba(120, 105,  75, 0.14) 40%,
        transparent 68%
    );
    animation: tod-fog-drift-a 22s ease-in-out infinite;
    will-change: transform, opacity;
}

/* Fog layer B — slightly faster wisp drifting right-to-left across the upper half */
.tod-graphics-view .tod-map-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse 65% 38% at 72% 32%,
        rgba(130, 115,  85, 0.24) 0%,
        rgba( 90,  80,  60, 0.10) 48%,
        transparent 70%
    );
    animation: tod-fog-drift-b 16s ease-in-out 4s infinite;
    will-change: transform, opacity;
}

/* Canvas sits above the fog layers */
.tod-graphics-view .tod-map-screen .tod-canvas {
    position: relative;
    z-index: 1;
}

/* Equip bar also above fog */
.tod-graphics-view .tod-map-screen .tod-equip-bar {
    position: relative;
    z-index: 2;
}

/* All overlay elements (tooltips, compass, badge) stay above fog */
.tod-graphics-view .tod-map-screen .tod-pet-tooltip,
.tod-graphics-view .tod-map-screen .tod-fae-compass,
.tod-graphics-view .tod-map-screen .tod-gv-badge,
.tod-graphics-view .tod-map-screen #tod-btn-fullscreen {
    z-index: 10;
}

/* =============================================================================
   Acolyte Interaction Menu — Card Grid (v1.7.46.3)
   Replaces the flat button list with a 2-column card grid.
   ============================================================================= */
.tod-acm-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}

.tod-acm-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 8px 10px;
    border: 1px solid var(--tod-border-gold);
    border-radius: var(--tod-radius);
    background: rgba(255, 215, 0, 0.04);
    color: var(--tod-gold);
    font-family: var(--tod-font-mono);
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    cursor: pointer;
    transition: background var(--tod-transition), color var(--tod-transition),
                border-color var(--tod-transition), box-shadow var(--tod-transition);
    line-height: 1.3;
    min-height: 72px;
}

.tod-acm-card:hover:not(.tod-acm-card--unavailable) {
    background: var(--tod-gold);
    color: #000;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.35);
}

.tod-acm-card__icon {
    font-size: 20px;
    line-height: 1;
    display: block;
}

.tod-acm-card__label {
    display: block;
}

.tod-acm-card__unavail {
    display: block;
    font-size: 9px;
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.8;
    margin-top: 2px;
}

/* Unavailable state — dimmed, no hover effect */
.tod-acm-card--unavailable {
    opacity: 0.38;
    cursor: not-allowed;
    border-color: var(--tod-border);
    color: var(--tod-text-dim);
    background: transparent;
}

/* Danger variant — Pickpocket */
.tod-acm-card--danger {
    border-color: var(--tod-red);
    color: var(--tod-red);
    background: rgba(244, 67, 54, 0.04);
}

.tod-acm-card--danger:hover {
    background: var(--tod-red);
    color: #fff;
    box-shadow: 0 0 8px rgba(244, 67, 54, 0.35);
}

/* Farewell — muted secondary style, spans full width */
.tod-acm-card--farewell {
    grid-column: 1 / -1;
    border-color: #555;
    color: #999;
    background: transparent;
    min-height: 44px;
    padding: 8px;
    flex-direction: row;
    gap: 8px;
    font-size: 11px;
}

.tod-acm-card--farewell:hover {
    background: #333;
    color: #ccc;
    box-shadow: none;
    border-color: #777;
}

.tod-acm-card--farewell .tod-acm-card__icon {
    font-size: 16px;
}

/* =============================================================================
   Gender Selection — Card Grid (v1.7.46.6)
   Replaces the <select> dropdown with a 2×3 card grid on the My Information page.
   ============================================================================= */
.tod-gender-card-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 4px;
}

.tod-gender-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 6px 8px;
    border: 1px solid var(--tod-border);
    border-radius: var(--tod-radius);
    background: #1a1a1a;
    color: var(--tod-text-dim);
    font-family: var(--tod-font-mono);
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--tod-transition), color var(--tod-transition),
                background var(--tod-transition), box-shadow var(--tod-transition);
    user-select: none;
    min-height: 68px;
}

.tod-gender-card:hover {
    border-color: var(--tod-border-gold);
    color: var(--tod-text);
    background: #222;
}

.tod-gender-card.is-active {
    border-color: var(--tod-gold);
    color: var(--tod-gold);
    background: rgba(255, 215, 0, 0.07);
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.2);
}

.tod-gender-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tod-gender-card__icon svg {
    width: 24px;
    height: 24px;
}

.tod-gender-card__label {
    display: block;
    line-height: 1.2;
}

/* =============================================================================
   Character Creation — Gender Card Grid (v1.7.46.7)
   2 rows × 3 columns using the existing .tod-option-card style.
   ============================================================================= */
.tod-option-cards--gender {
    display: grid;
    grid-template-columns: repeat(3, 68px);
    gap: 8px;
}


/* =============================================================================
   ETERNAL TOWER — v1.8.0
   All ET-specific styles are prefixed with .et- to avoid collisions.
   ============================================================================= */

/* ── Enter ET button ──────────────────────────────────────────────────────── */
.tod-btn--et-enter {
    background: linear-gradient( 135deg, #1a2a4a 0%, #0d1a30 100% );
    border: 1px solid #4488ff;
    color: #88ccff;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: background 0.2s, box-shadow 0.2s, color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tod-btn--et-enter:hover,
.tod-btn--et-enter:focus-visible {
    background: linear-gradient( 135deg, #1e3060 0%, #112040 100% );
    box-shadow: 0 0 10px rgba( 68, 136, 255, 0.45 );
    color: #aaddff;
    outline: none;
}
.tod-et-enter-icon {
    display: inline-flex;
    align-items: center;
    opacity: 0.85;
}
/* Pulse animation on the lobby Enter button */
@keyframes et-btn-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba( 68, 136, 255, 0.40 ); }
    50%       { box-shadow: 0 0 18px rgba( 68, 136, 255, 0.80 ); }
}
.et-btn-pulse {
    animation: et-btn-pulse 2.4s ease-in-out infinite;
}

/* ── Session timer widget ─────────────────────────────────────────────────── */
/* ET session timer is now a tod-stat-block row inside the sidebar */
.et-session-timer-widget {
    /* inherits tod-stat-block layout — no absolute positioning needed */
    color: #88ccff;
}
.et-session-timer-widget.hidden { display: none; }
.et-session-timer {
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #88ccff;
}
/* Urgent: less than 1 hour remaining */
.et-timer--urgent {
    color: #ff8888;
    animation: et-timer-blink 1s step-end infinite;
}
@keyframes et-timer-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}

/* ── ET overlay base ──────────────────────────────────────────────────────── */
.et-overlay .tod-overlay-inner,
.et-overlay-inner {
    background: linear-gradient( 160deg, #0d1a30 0%, #070e1c 100% );
    border: 1px solid rgba( 68, 136, 255, 0.35 );
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
}
.et-overlay-title {
    color: #88ccff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.et-title-icon { font-size: 1.2em; }
.et-lobby-subtitle {
    color: #6699cc;
    font-size: 0.85rem;
    margin: -6px 0 12px;
    text-align: center;
}

/* ── Lobby session bar ────────────────────────────────────────────────────── */
.et-lobby-session-bar {
    background: rgba( 68, 136, 255, 0.08 );
    border: 1px solid rgba( 68, 136, 255, 0.25 );
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}
.et-lobby-session-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
}
.et-lobby-session-label { color: #6699cc; }
.et-lobby-session-value { color: #aaddff; font-weight: 600; }

/* ── Lobby character creation ─────────────────────────────────────────────── */
.et-lobby-section-title {
    font-size: 0.88rem;
    color: #88aacc;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 10px;
    border-bottom: 1px solid rgba( 68, 136, 255, 0.20 );
    padding-bottom: 4px;
}
.et-lobby-field-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}
.et-lobby-label {
    min-width: 90px;
    font-size: 0.82rem;
    color: #6699cc;
    padding-top: 4px;
}
.et-lobby-input {
    flex: 1;
    background: rgba( 10, 20, 40, 0.80 );
    border: 1px solid rgba( 68, 136, 255, 0.35 );
    border-radius: 3px;
    color: #cce4ff;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.88rem;
    padding: 5px 8px;
}
.et-lobby-input:focus {
    outline: none;
    border-color: #4488ff;
    box-shadow: 0 0 6px rgba( 68, 136, 255, 0.40 );
}
.et-lobby-select-group {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.et-lobby-select-group .tod-race-btn,
.et-lobby-select-group .tod-class-btn,
.et-lobby-align-btn {
    background: rgba( 10, 20, 40, 0.80 );
    border: 1px solid rgba( 68, 136, 255, 0.30 );
    border-radius: 3px;
    color: #88aacc;
    font-size: 0.78rem;
    padding: 4px 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.et-lobby-select-group .tod-race-btn:hover,
.et-lobby-select-group .tod-class-btn:hover,
.et-lobby-align-btn:hover {
    background: rgba( 68, 136, 255, 0.15 );
    border-color: #4488ff;
    color: #cce4ff;
}
.et-lobby-select-group .tod-race-btn.selected,
.et-lobby-select-group .tod-class-btn.selected,
.et-lobby-align-btn.selected {
    background: rgba( 68, 136, 255, 0.25 );
    border-color: #4488ff;
    color: #aaddff;
    font-weight: 600;
}

/* ── Lobby rejoin section ─────────────────────────────────────────────────── */
.et-lobby-rejoin-section { margin-bottom: 12px; }
.et-lobby-rejoin-msg {
    color: #88ccff;
    font-size: 0.85rem;
    text-align: center;
    margin: 0;
}

/* ── Lobby vault note ─────────────────────────────────────────────────────── */
.et-lobby-vault-note {
    font-size: 0.75rem;
    color: #556688;
    text-align: center;
    margin: 8px 0 12px;
}

/* ── Lobby actions ────────────────────────────────────────────────────────── */
.et-lobby-actions { justify-content: center; gap: 10px; }

/* ── Leaderboard panel ────────────────────────────────────────────────────── */
.et-leaderboard-panel {
    margin-top: 18px;
    border-top: 1px solid rgba( 68, 136, 255, 0.20 );
    padding-top: 12px;
}
.et-leaderboard-title {
    font-size: 0.88rem;
    color: #ffd700;
    text-align: center;
    margin: 0 0 8px;
}
.et-leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    color: #aabbcc;
}
.et-leaderboard-table th {
    color: #6699cc;
    text-align: left;
    padding: 3px 6px;
    border-bottom: 1px solid rgba( 68, 136, 255, 0.20 );
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
}
.et-leaderboard-table td {
    padding: 3px 6px;
    border-bottom: 1px solid rgba( 68, 136, 255, 0.08 );
}
.et-leaderboard-table tr:last-child td { border-bottom: none; }
.et-leaderboard-empty {
    text-align: center;
    color: #445566;
    font-style: italic;
    padding: 8px;
}

/* ── ET Death overlay ─────────────────────────────────────────────────────── */
.et-death-overlay {
    position: fixed;
    inset: 0;
    background: rgba( 0, 0, 0, 0.88 );
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
}
.et-death-overlay.et-hidden { display: none; }
.et-death-inner {
    background: linear-gradient( 160deg, #1a0505 0%, #0d0202 100% );
    border: 1px solid rgba( 200, 40, 40, 0.55 );
    border-radius: 6px;
    padding: 28px 32px;
    max-width: 420px;
    text-align: center;
}
.et-death-title {
    color: #ff6666;
    font-size: 1.4rem;
    margin: 0 0 10px;
}
.et-death-msg {
    color: #cc8888;
    font-size: 0.88rem;
    margin: 0 0 18px;
    line-height: 1.5;
}

/* ── Admin: ET settings tab ───────────────────────────────────────────────── */
.et-admin-section {
    background: rgba( 10, 20, 40, 0.60 );
    border: 1px solid rgba( 68, 136, 255, 0.25 );
    border-radius: 5px;
    padding: 16px 20px;
    margin-bottom: 18px;
}
.et-admin-section h3 {
    color: #88ccff;
    font-size: 0.95rem;
    margin: 0 0 12px;
    border-bottom: 1px solid rgba( 68, 136, 255, 0.20 );
    padding-bottom: 6px;
}
.et-admin-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 0.85rem;
}
.et-admin-row label { min-width: 180px; color: #aabbcc; }
.et-admin-row input[type="number"],
.et-admin-row input[type="text"],
.et-admin-row select {
    background: rgba( 5, 10, 20, 0.80 );
    border: 1px solid rgba( 68, 136, 255, 0.30 );
    border-radius: 3px;
    color: #cce4ff;
    padding: 4px 7px;
    font-size: 0.85rem;
    width: 120px;
}
.et-admin-row input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.et-admin-desc {
    font-size: 0.75rem;
    color: #556688;
    margin-left: 4px;
}

/* ============================================================
   SPELLBOOK — CARD LAYOUT  (v1.8.0.42)
   Replaces the old list-row layout with icon cards grouped
   by category.  The overlay dimensions are unchanged.
   ============================================================ */

/* ── Category section ─────────────────────────────────────── */
.tod-spell-category {
    margin: 0 0 2px 0;
    padding: 0;
    list-style: none;
}
.tod-spell-category-header {
    font-family: 'Cinzel', 'Palatino Linotype', serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 8px 4px;
    margin: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 6px;
}
/* Category header accent colours — mirrors existing target badge palette */
.tod-spell-category-header--enemy  { color: #ff8080; border-bottom-color: #c04040; }
.tod-spell-category-header--player { color: #80ff80; border-bottom-color: #40c040; }
.tod-spell-category-header--item   { color: #ffff80; border-bottom-color: #c0c040; }
.tod-spell-category-header--mob    { color: #80b0ff; border-bottom-color: #3060c0; }
.tod-spell-category-header--floor  { color: #c8a060; border-bottom-color: #8a5a20; }

/* ── Card grid ────────────────────────────────────────────── */
.tod-spell-card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 8px 8px;
}

/* ── Individual card ──────────────────────────────────────── */
.tod-spell-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 80px;
    min-height: 96px;
    padding: 6px 4px 5px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(20,15,30,0.80);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    user-select: none;
    box-sizing: border-box;
}
.tod-spell-card:hover {
    border-color: rgba(255,255,255,0.30);
    background: rgba(40,30,60,0.90);
}

/* Active card — highlighted ring */
.tod-spell-card.active {
    border-color: #ffd700;
    background: rgba(60,48,10,0.90);
    box-shadow: 0 0 8px rgba(255,215,0,0.45), inset 0 0 6px rgba(255,215,0,0.10);
}

/* Category-tinted border on hover / idle */
.tod-spell-card--enemy  { border-color: rgba(192,64,64,0.30); }
.tod-spell-card--player { border-color: rgba(64,192,64,0.30); }
.tod-spell-card--item   { border-color: rgba(192,192,64,0.30); }
.tod-spell-card--mob    { border-color: rgba(48,96,192,0.30); }
.tod-spell-card--floor  { border-color: rgba(138,90,32,0.30); }

.tod-spell-card--enemy:hover  { border-color: #c04040; }
.tod-spell-card--player:hover { border-color: #40c040; }
.tod-spell-card--item:hover   { border-color: #c0c040; }
.tod-spell-card--mob:hover    { border-color: #3060c0; }
.tod-spell-card--floor:hover  { border-color: #8a5a20; }

/* ── SVG icon area ────────────────────────────────────────── */
.tod-spell-card__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tod-spell-card__icon svg {
    width: 40px;
    height: 40px;
    overflow: visible;
}

/* ── Spell name ───────────────────────────────────────────── */
.tod-spell-card__name {
    font-family: 'Cinzel', 'Palatino Linotype', serif;
    font-size: 0.62rem;
    font-weight: 700;
    color: #f0d080;
    text-align: center;
    line-height: 1.25;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-shadow: 0 0 6px rgba(255, 200, 80, 0.55), 0 1px 2px rgba(0, 0, 0, 0.8);
    word-break: break-word;
    hyphens: auto;
    width: 100%;
    margin-bottom: 3px;
}

/* ── Meta row (tier · mastery) ────────────────────────────── */
.tod-spell-card__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    width: 100%;
    margin-bottom: 2px;
}

/* ── MP cost ──────────────────────────────────────────────── */
.tod-spell-card__mp {
    font-size: 0.62rem;
    color: #80b0ff;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Uses / permanent indicator ──────────────────────────── */
.tod-spell-card__uses {
    font-size: 0.60rem;
    color: #aaa;
    white-space: nowrap;
}
.tod-spell-card__uses--permanent {
    color: #ffd700;
    font-weight: 700;
    font-size: 0.72rem;
}

/* Active glow pulse on the icon for the selected spell */
.tod-spell-card.active .tod-spell-card__icon svg {
    filter: drop-shadow(0 0 4px #ffd700);
}

/* Tier badge inside card meta */
.tod-spell-card .tod-spell-tier-badge {
    margin-left: 0;
    font-size: 0.58rem;
    padding: 0 4px;
}

/* Mastery badge inside card meta */
.tod-spell-card .tod-spell-mastery-badge {
    margin-left: 0;
    font-size: 0.58rem;
    padding: 0 4px;
}

/* ── Spellbook overlay: switch list to block for category sections ── */
#tod-overlay-spellbook .tod-spell-list {
    display: block;
    padding: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Library overlay (Librarian NPC / Tome donation)
   ══════════════════════════════════════════════════════════════════════════════ */
.tod-overlay-inner--library {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 480px;
    height: 400px;
    max-width: 96vw;
    max-height: 90vh;
    min-width: 0;
    box-sizing: border-box;
    max-width: 480px;
    min-width: 280px;
}
/* Library body fills remaining overlay height */
.tod-library-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 0;
}
/* Subtitle flavour text */
.tod-library-subtitle {
    font-size: 12px;
    color: var(--tod-text-dim);
    margin: -8px 0 10px;
    font-family: var(--tod-font-ui);
    flex-shrink: 0;
}
/* Bonus XP note shown next to tomes for permanently-learned spells */
.tod-library-bonus-note {
    font-size: 10px;
    color: #D4A850;
    font-family: var(--tod-font-mono);
    margin-left: 6px;
}
/* Donate button — warm gold theme */
.tod-library-donate-btn {
    padding: 3px 10px;
    font-size: 11px;
    font-family: var(--tod-font-mono);
    background: #222;
    border: 1px solid var(--tod-border);
    border-radius: var(--tod-radius);
    color: var(--tod-text);
    cursor: pointer;
    transition: background var(--tod-transition), color var(--tod-transition), border-color var(--tod-transition);
    flex-shrink: 0;
    white-space: nowrap;
}
.tod-library-donate-btn:hover:not(:disabled) {
    background: #D4A850;
    color: #000;
    border-color: #D4A850;
}
.tod-library-donate-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    color: #666;
    border-color: #444;
}

/* ============================================================
   KENNEL OVERLAY (§6)
   ============================================================ */
.tod-overlay-inner--kennel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 460px;
    height: 360px;
    max-width: 96vw;
    max-height: 90vh;
    min-width: 0;
    box-sizing: border-box;
    max-width: 460px;
    min-width: 260px;
}
.tod-kennel-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 0;
}
.tod-kennel-subtitle {
    font-size: 12px;
    color: var(--tod-text-dim);
    margin: -8px 0 10px;
    font-family: var(--tod-font-ui);
    flex-shrink: 0;
}
.tod-kennel-boarded-info {
    font-size: 12px;
    color: var(--tod-text);
    margin: 0 0 10px;
    font-family: var(--tod-font-mono);
}
.tod-kennel-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.tod-kennel-btn {
    padding: 5px 14px;
    font-size: 12px;
    font-family: var(--tod-font-mono);
    background: #222;
    border: 1px solid var(--tod-border);
    border-radius: var(--tod-radius);
    color: var(--tod-text);
    cursor: pointer;
    transition: background var(--tod-transition), color var(--tod-transition), border-color var(--tod-transition);
    flex-shrink: 0;
    white-space: nowrap;
}
.tod-kennel-btn:hover:not(:disabled) {
    background: #A0C860;
    color: #000;
    border-color: #A0C860;
}
.tod-kennel-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    color: #666;
    border-color: #444;
}

/* ============================================================
   PET COMMAND CARDS (Pet tab)
   ============================================================ */
.tod-pet-command-cards {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 6px 0 10px;
}

.tod-pet-command-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 14px;
    min-width: 72px;
    background: #1a1a2e;
    border: 1px solid #444;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    user-select: none;
}

.tod-pet-command-card:hover {
    border-color: #a07040;
    background: #22203a;
}

.tod-pet-command-card.is-active {
    border-color: #d4a850;
    background: #2a2010;
    box-shadow: 0 0 6px rgba(212,168,80,.35);
}

.tod-pet-cmd-icon {
    font-size: 1.4em;
    line-height: 1;
}

.tod-pet-cmd-label {
    font-size: 0.8em;
    font-weight: bold;
    color: #d4a850;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.tod-pet-command-card.is-active .tod-pet-cmd-label {
    color: #ffe080;
}

.tod-pet-cmd-desc {
    font-size: 0.68em;
    color: #888;
    text-align: center;
}


/* ==========================================================================
   MENAGERIE TAB — The Merchant's Alcove
   ========================================================================== */

/* SVG artwork inside the standard card preview area */
.tod-men-svg {
    width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Stat badges (HP / STR / STA) shown below the card description */
.tod-men-stats {
    display: flex;
    gap: 5px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 4px;
}
.tod-men-stat {
    font-size: 0.68em;
    color: #a0c0a0;
    background: #0a1a0a;
    border: 1px solid #2a4a2a;
    border-radius: 4px;
    padding: 2px 5px;
    white-space: nowrap;
}