/* ═══════════════════════════════════════════════════════════════
   Scapewatch — Base Styles
   Fixed 1920×1080 container, centered with letterboxing.
   ═══════════════════════════════════════════════════════════════ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --game-font: 'Chakra Petch', sans-serif;

    /* ── Theme Colors (defaults = Oldschool) ──────────────── */
    --bg-darkest:       #1a1a1a;
    --bg-dark:          #1c1c0e;
    --bg-panel:         #2b2216;
    --bg-cell:          #3a3226;
    --bg-hover:         #4a4230;
    --border-primary:   #5c4a2a;
    --border-secondary: #7a6a3a;
    --text-bright:      #ffff00;
    --text-gold:        #FFD700;
    --text-accent:      #c8a83e;
    --text-light:       #cccccc;
    --text-muted:       #888888;
    --text-dim:         #aaaaaa;
    --text-dark:        #666666;
    --text-disabled:    #555555;

    /* ── Slay Tier Colors ──────────────────────────────────── */
    --tier-feeble:  #4CAF50;  /* T1 green */
    --tier-dire:    #4FC3F7;  /* T2 light blue */
    --tier-savage:  #FF9800;  /* T3 orange */
    --tier-fell:    #F44336;  /* T4 red */
    --tier-ancient: #9C27B0;  /* T5 purple */
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    font-family: var(--game-font);
}

#game-container {
    position: absolute;
    width: 1920px;
    height: 1080px;

    /* Center in viewport */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Scale down to fit if viewport is smaller than 1920×1080 */
    transform-origin: center center;

    /* Game-feel: prevent text selection and image dragging */
    user-select: none;
    -webkit-user-select: none;
}

#game-container img {
    -webkit-user-drag: none;
    pointer-events: none;
}

#game-canvas {
    display: block;
    width: 100%;
    height: 100%;
    background: #1a1a2e;
    image-rendering: pixelated;
}

/* Responsive scaling — fit the 1920×1080 container within the viewport.
   Disabled when body.no-scale is set (Constants.SCALED_CONTAINER = false). */
@media (max-aspect-ratio: 16/9) {
    /* Viewport is taller than 16:9 — width is the constraint */
    body:not(.no-scale) #game-container {
        width: 100vw;
        height: calc(100vw * 9 / 16);
    }
}

@media (min-aspect-ratio: 16/9) {
    /* Viewport is wider than 16:9 — height is the constraint */
    body:not(.no-scale) #game-container {
        height: 100vh;
        width: calc(100vh * 16 / 9);
    }
}


/* ═══════════════════════════════════════════════════════════════
   UI Overlay Container
   Positioned over the canvas. Scales with the game container.
   All panels are children of this container and use 1920×1080
   coordinate space (scaled via CSS transform).
   ═══════════════════════════════════════════════════════════════ */

#ui-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    z-index: 10;
    pointer-events: none;
}

/* All interactive panels need pointer events */
#ui-container > * {
    pointer-events: auto;
}

/* Overlay containers must NOT capture events (overrides > * specificity) */
#ui-container > .loot-drop-zone,
#ui-container > .xp-drops-container,
#ui-container > .celebration-container,
#ui-container > .combat-encounter,
#ui-container > #screen-effects {
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════
   Skills Panel — Bottom Right (320×440)
   4×8 grid: 7 rows of skills + 1 row of totals.
   Matches mocks/skills_panel.html exactly.
   ═══════════════════════════════════════════════════════════════ */

.skills-panel {
    position: absolute;
    right: 0px;
    bottom: 66px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 6px;
    background: var(--bg-panel);
    border: 2px solid var(--border-primary);
    border-radius: 6px;
    width: 320px;
    height: 440px;
}

/* ── Individual skill cell ── */
.skill-cell {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-cell);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    padding: 3px 5px;
    cursor: pointer;
    height: 50px;
    width: 73px;
}

.skill-cell:hover {
    background: var(--bg-hover);
    border-color: var(--text-accent);
}

.skill-cell img {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}

.skill-level {
    margin-left: auto;
    font-size: 20px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
    line-height: 1;
}

/* ── Progress bar under each cell ── */
.skill-progress {
    position: absolute;
    bottom: 1px;
    left: 3px;
    right: 3px;
    height: 3px;
    background: var(--bg-darkest);
    border-radius: 1px;
    overflow: hidden;
}

.skill-progress-fill {
    height: 100%;
    background: #4caf50;
    transition: width .3s;
}

/* ── Total level row (two cells) ── */
.total-cell {
    grid-column: span 2;
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-cell);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    padding: 3px 5px;
    height: 50px;
    width: 150px;
    position: relative;
    cursor: pointer;
}

.total-cell:hover {
    background: var(--bg-hover);
    border-color: var(--text-accent);
}

.total-cell img {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}

.total-cell .skill-level {
    margin-left: auto;
    font-size: 20px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
    line-height: 1;
}


/* ═══════════════════════════════════════════════════════════════
   Inventory (Bag) Panel — Bottom Right (shares slot with Skills)
   4×7 grid with 28 item slots.
   ═══════════════════════════════════════════════════════════════ */

.inventory-panel {
    position: absolute;
    right: 0px;
    bottom: 66px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(7, 1fr);
    gap: 4px;
    padding: 6px;
    background: var(--bg-panel);
    border: 2px solid var(--border-primary);
    border-radius: 6px;
    width: 320px;
    height: 440px;
    justify-items: center;
}

/* ═══════════════════════════════════════════════════════════
   Barter Panel — Bottom Right (shares slot with other panels)
   6 item slots: 3 resource, 3 equipment with buy/sell controls.
   ═══════════════════════════════════════════════════════════ */

.barter-panel {
    position: absolute;
    right: 0px;
    bottom: 66px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 6px 0 6px;
    background: var(--bg-panel);
    border: 2px solid var(--border-primary);
    border-radius: 6px;
    width: 320px;
    height: 440px;
    overflow: hidden;
    font-family: var(--game-font);
    box-sizing: border-box;
}

.barter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2px;
    flex-shrink: 0;
}

.barter-title-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.barter-title-icon {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.5));
}

.barter-title {
    color: var(--text-bright);
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
}

.barter-gold-wrap {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: 8px;
}

.barter-header-gold-icon {
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
}

.barter-header-gold {
    color: var(--text-gold);
    font-size: 20px;
    font-weight: bold;
}

.barter-reroll-btn {
    position: relative;
    background: var(--bg-cell);
    border: 1px solid var(--border-secondary);
    color: var(--text-accent);
    font-family: var(--game-font);
    font-size: 20px;
    padding: 2px 8px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s;
}

.barter-reroll-btn:hover:not(.disabled) {
    background: var(--bg-hover);
}

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

/* ── Slot rows ── */

.barter-slot-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    border-radius: 4px;
    background: var(--bg-cell);
    border: 1px solid var(--border-primary);
    min-height: 54px;
    flex-shrink: 0;
}

.barter-slot-row.barter-slot-locked {
    opacity: 0.45;
}

.barter-slot-locked .barter-slot-icon,
.barter-slot-locked .barter-slot-info,
.barter-slot-locked .barter-slot-controls {
    pointer-events: none;
}

.barter-slot-type {
    position: relative;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 1px;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    cursor: default;
}

.barter-slot-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.barter-slot-icon .inv-slot {
    margin: 0;
}

/* ── Info column (price + bank qty) ── */

.barter-slot-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 80px;
    flex: 1;
}

.barter-price {
    display: flex;
    align-items: center;
    gap: 3px;
}

.barter-gold-icon {
    width: 24px;
    height: 24px;
    image-rendering: pixelated;
}

.barter-price-value {
    color: var(--text-gold);
    font-size: 20px;
    font-weight: bold;
}

.barter-mod-label {
    font-size: 20px;
    color: var(--text-muted);
}

.barter-mod-good {
    color: #4CAF50;
}

.barter-mod-bad {
    color: #F44336;
}

/* ── Controls column (qty + buy/sell) ── */

.barter-slot-controls {
    display: flex;
    flex-direction: row;
    gap: 3px;
    align-items: center;
    flex-shrink: 0;
}

.barter-btn-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.barter-qty-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.barter-qty-label {
    color: var(--text-bright);
    font-family: var(--game-font);
    font-size: 16px;
    margin-bottom: 6px;
}

.barter-qty-input {
    -webkit-appearance: none;
    appearance: none;
    width: 80px;
    height: 12px;
    background: var(--bg-darkest);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.barter-qty-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 16px;
    background: var(--text-accent);
    border-radius: 2px;
    cursor: pointer;
}

.barter-qty-input::-moz-range-thumb {
    width: 10px;
    height: 16px;
    background: var(--text-accent);
    border: none;
    border-radius: 2px;
    cursor: pointer;
}

.barter-btn {
    font-family: var(--game-font);
    font-size: 16px;
    padding: 1px 6px;
    border-radius: 2px;
    border: 1px solid var(--border-secondary);
    cursor: pointer;
    transition: background 0.15s;
}

.barter-buy-btn {
    background: #2a4a2a;
    color: #88cc88;
}

.barter-buy-btn:hover:not(:disabled) {
    background: #3a5a3a;
}

.barter-sell-btn {
    background: #4a2a2a;
    color: #cc8888;
}

.barter-sell-btn:hover:not(:disabled) {
    background: #5a3a3a;
}

.barter-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ── Lockout state (5s after task completion) ── */

.barter-lockout .barter-btn,
.barter-lockout .barter-reroll-btn,
.barter-lockout .barter-qty-input {
    opacity: 0.35;
    pointer-events: none;
}

/* ── Equipment Panel (bottom-right, same position as other panels) ── */
.equipment-panel {
    position: absolute;
    right: 0px;
    bottom: 66px;
    display: flex;
    flex-direction: column;
    background: var(--bg-panel);
    border: 2px solid var(--border-primary);
    border-radius: 6px;
    width: 320px;
    height: 440px;
    overflow: hidden;
}

.equip-panel-tabs {
    display: flex;
    flex-shrink: 0;
    border-bottom: 2px solid var(--border-primary);
}

.equip-panel-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 2px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-right: 1px solid var(--bg-cell);
    font-family: var(--game-font);
    font-size: 16px;
    color: var(--text-muted);
    text-shadow: 1px 1px 0 #000;
    cursor: pointer;
    transition: all 0.15s;
}
.equip-panel-tab:last-child { border-right: none; }
.equip-panel-tab:hover { background: var(--bg-panel); color: var(--text-light); }
.equip-panel-tab.active {
    color: var(--text-bright);
    border-bottom: 2px solid var(--text-accent);
    background: var(--bg-panel);
}
.equip-panel-tab img {
    width: 22px;
    height: 22px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}

.equip-panel-paperdoll {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 90px);
    grid-template-rows: repeat(5, 68px);
    gap: 4px;
    justify-content: center;
    align-content: center;
    padding: 8px 6px;
}

.equip-panel-paperdoll .inv-slot {
    width: 72px;
    height: 60px;
    cursor: default;
    border-color: var(--bg-hover);
    background: var(--bg-cell);
    border-radius: 4px;
    justify-self: center;
    align-self: center;
}
.equip-panel-paperdoll .inv-slot.empty {
    background: var(--bg-darkest);
    border-color: var(--bg-cell);
}

.equip-panel-paperdoll .inv-slot .equip-panel-item-img {
    transform: scale(1.75);
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}
.equip-panel-paperdoll .inv-slot .equip-panel-sil {
    transform: scale(1.75);
    image-rendering: pixelated;
    opacity: 0.4;
    filter: drop-shadow(1px 1px 0 #000);
}

.equip-panel-view-toggle {
    border-left: 2px solid var(--border-primary);
    border-right: none !important;
    flex: 0 0 36px;
}

.equip-panel-stats {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
    overflow-y: auto;
}
.equip-panel-stats .stats-weapon-line {
    text-align: center;
    font-size: 20px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
}
.equip-panel-stats .stats-info-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    font-size: 18px;
    text-shadow: 1px 1px 0 #000;
    margin-bottom: 4px;
}
.equip-panel-stats .stats-info-label {
    color: var(--text-muted);
    text-align: right;
}
.equip-panel-stats .stats-info-grid .style-val { color: var(--text-accent); }
.equip-panel-stats .stats-info-grid .speed-val { color: #88cc88; }
.equip-panel-stats .stats-info-grid .maxhit-val { color: #ff6644; }
.equip-panel-stats .stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 20px;
    text-shadow: 1px 1px 0 #000;
}
.equip-panel-stats .stats-table th {
    color: var(--text-accent);
    font-weight: normal;
    padding: 2px 6px;
    text-align: center;
    border-bottom: 1px solid var(--bg-cell);
}
.equip-panel-stats .stats-table th:first-child {
    text-align: left;
    width: 30px;
}
.equip-panel-stats .stats-table td {
    padding: 3px 6px;
    text-align: center;
    color: var(--text-light);
}
.equip-panel-stats .stats-table td:first-child {
    text-align: center;
    width: 30px;
}
.equip-panel-stats .stats-table .stat-pos { color: #4caf50; }
.equip-panel-stats .stats-table .stat-zero { color: var(--border-primary); }
.equip-panel-stats .stats-table .stat-neg { color: #ff4444; }
.equip-panel-stats .stats-table .str-cell { text-align: center; }
.equip-panel-stats .stats-table .stats-icon-wrap {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
}
.equip-panel-stats .stats-table .stats-icon-wrap img {
    width: 20px;
    height: 20px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}
.equip-panel-stats .potion-stats-toggle-wrap {
    top: 44px;
}

.inv-slot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: default;
    height: 56px;
    width: 56px;
}

.inv-slot img {
    transform: scale(1.5);
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}

/* ── Scale variants (32×32 base sprite) ── */
.inv-slot.inv-s05 { width: 24px; height: 24px; }
.inv-slot.inv-s05 img { transform: scale(0.5); }

.inv-slot.inv-s10 { width: 40px; height: 40px; }
.inv-slot.inv-s10 img { transform: scale(1.0); }

.inv-slot.inv-s15 { width: 56px; height: 56px; }
.inv-slot.inv-s15 img { transform: scale(1.5); }

.inv-slot.inv-s20 { width: 72px; height: 72px; }
.inv-slot.inv-s20 img { transform: scale(2.0); }

.inv-qty {
    position: absolute;
    top: -2px;
    left: 2px;
    font-size: 18px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
    line-height: 1;
    pointer-events: none;
}
.inv-label {
    position: absolute;
    bottom: 0px;
    left: 2px;
    font-size: 16px;
    color: #ffffff;
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
    line-height: 1;
    pointer-events: none;
}
.hide-potion-labels .inv-label { display: none; }

.inv-tier-label {
    position: absolute;
    bottom: 0px;
    left: 2px;
    font-size: 16px;
    color: #ffffff;
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
    line-height: 1;
    pointer-events: none;
}
.hide-bank-tier-labels .bank-tier-label { display: none; }
.hide-task-tier-labels .task-tier-label { display: none; }


/* ═══════════════════════════════════════════════════════════════
   Floating Current Task HUD — Top Center (340px)
   Shows active task, progress, and level bar.
   Matches mocks/floating_task.html exactly.
   ═══════════════════════════════════════════════════════════════ */

.floating-current-task {
    position: absolute;
    top: 0;
    left: var(--playable-center-x, 50%);
    transform: translateX(-50%);
    width: 340px;
    z-index: 500;
    transition: left 0.3s ease;
}

.float-task-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-panel);
    border: 2px solid var(--border-primary);
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 6px 10px;
}

.floating-current-task.combat-expanded .float-task-inner {
    border-radius: 0;
    border-bottom: 1px solid var(--border-primary);
}

/* ── Skill icon ── */
.float-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-cell);
    border: 2px solid var(--text-accent);
    border-radius: 4px;
}

.float-icon img,
.float-icon canvas {
    width: 44px;
    height: 44px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}

/* ── Details column ── */
.float-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.float-task-name {
    font-size: 20px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.float-task-node {
    font-size: 18px;
    color: var(--text-light);
    text-shadow: 1px 1px 0 #000;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Progress bars ── */
.float-bar {
    position: relative;
    width: 100%;
    height: 16px;
    background: var(--bg-darkest);
    border-radius: 3px;
    overflow: hidden;
}

.float-bar-fill {
    height: 100%;
    transition: width .3s;
}

.float-bar-fill.task-fill {
    background: linear-gradient(180deg, #4caf50 0%, #2e7d32 100%);
}

.float-bar-fill.level-fill {
    background: linear-gradient(180deg, #3a8fd6 0%, #2567a8 100%);
}

/* ── Text overlay on bars ── */
.float-bar-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 6px;
    pointer-events: none;
}

.float-bar-text span {
    font-size: 16px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
    line-height: 1;
}

.float-bar-text .bar-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* ── Combat info row (Row 2: loadout + skill, two equal columns) ── */
.float-combat-info {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--bg-panel);
    border-left: 2px solid var(--border-primary);
    border-right: 2px solid var(--border-primary);
    font-size: 17px;
    line-height: 1;
}

.float-combat-col {
    flex: 1;
    text-align: center;
    text-shadow: 1px 1px 0 #000;
    cursor: pointer;
}
.float-combat-col:hover {
    text-decoration: underline;
}

.float-combat-col:first-child {
    color: var(--text-gold);
}

.float-combat-col:last-child {
    color: var(--text-light);
}

/* ── Combat toggle row (Row 3: auto-slay + auto-loadout pills, two equal columns) ── */
.float-combat-toggles {
    display: flex;
    align-items: center;
    padding: 4px 10px 5px;
    background: var(--bg-panel);
    border: 2px solid var(--border-primary);
    border-top: 1px solid var(--border-primary);
    border-radius: 0 0 6px 6px;
}

.float-toggle-pill {
    flex: 1;
    font-family: var(--game-font);
    font-size: 15px;
    color: var(--text-muted);
    text-shadow: 1px 1px 0 #000;
    background: var(--bg-darkest);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    padding: 2px 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.float-toggle-pill:hover {
    background: var(--bg-cell);
    color: var(--text-light);
    border-color: var(--text-accent);
}

.float-toggle-pill.active {
    color: var(--text-bright);
    border-color: var(--text-accent);
    background: var(--bg-cell);
}

/* ── Auto toggle row (auto-slay + auto-loadout side by side) ── */
.auto-toggle-row {
    display: flex;
    gap: 6px;
}

.auto-toggle-row .auto-slay-btn {
    flex: 1;
}

/* ── Save Autoloadout button (Mob Selection Modal) ── */
.save-autoloadout-btn {
    width: 100%;
    height: 38px;
    padding: 4px 20px;
    font-family: var(--game-font);
    font-size: 19px;
    color: var(--text-light);
    text-shadow: 1px 1px 0 #000;
    background: var(--bg-panel);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.save-autoloadout-btn:hover {
    background: var(--bg-cell);
    color: var(--text-gold);
    border-color: var(--text-accent);
}

.autoloadout-confirm {
    font-family: var(--game-font);
    font-size: 17px;
    color: #4caf50;
    text-shadow: 1px 1px 0 #000;
    text-align: center;
    padding: 4px 0;
}

/* ── Combat Defaults (Settings) ── */
.combat-defaults-wrap {
    padding: 4px 0;
}

.combat-defaults-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.combat-defaults-btn {
    font-family: var(--game-font);
    font-size: 18px;
    color: var(--text-muted);
    text-shadow: 1px 1px 0 #000;
    background: var(--bg-darkest);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    padding: 4px 14px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.combat-defaults-btn:hover {
    background: var(--bg-cell);
    color: var(--text-light);
    border-color: var(--text-accent);
}

.combat-defaults-btn.active {
    color: var(--text-bright);
    border-color: var(--text-accent);
    background: var(--bg-cell);
}

/* ── Potion Stats Toggle (brew icon in stats panels) ── */
.potion-stats-toggle-wrap {
    position: absolute;
    top: 6px;
    right: 6px;
    cursor: pointer;
    z-index: 1;
}

.equip-stats-panel {
    position: relative;
}

.potion-stats-toggle {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    opacity: 0.4;
    transition: opacity 0.15s;
    filter: drop-shadow(1px 1px 0 #000);
}

.potion-stats-toggle.active {
    opacity: 1.0;
}

.potion-stats-toggle:hover {
    opacity: 0.8;
}

.potion-stats-toggle.active:hover {
    opacity: 1.0;
}

.combat-defaults-apply-btn {
    width: 100%;
    padding: 8px 16px;
    font-family: var(--game-font);
    font-size: 20px;
    color: var(--text-gold);
    text-shadow: 1px 1px 0 #000;
    background: var(--bg-panel);
    border: 2px solid var(--border-primary);
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, border-color 0.15s;
    margin-top: 6px;
}

.combat-defaults-apply-btn:hover {
    background: var(--bg-cell);
    border-color: var(--text-accent);
}


/* ═══════════════════════════════════════════════════════════════
   Shared Tooltip Styles
   Used by Skills Panel, Inventory, and future panels.
   ═══════════════════════════════════════════════════════════════ */

.tooltip {
    display: none;
    position: absolute;
    z-index: 100;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    padding: 6px 10px;
    white-space: nowrap;
    pointer-events: none;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

/* Per-element tooltips stay display:none — TooltipManager shows the global tooltip */

/* Global tooltip rendered by TooltipManager.js. Mounted on document.body
   (a sibling of the tutorial overlay) so its z-index can directly beat
   the tutorial highlight ring/bubble. position: fixed + viewport coords;
   TooltipManager applies transform: scale(...) to match the scaled
   #ui-container so the tooltip looks the right size at any viewport. */
.global-tooltip {
    position: fixed;
    z-index: 99999;
    left: auto;
    bottom: auto;
    transform: none;
}

.tooltip .tt-name {
    font-size: 24px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
}

.tooltip .tt-line {
    font-size: 22px;
    color: var(--text-light);
    text-shadow: 1px 1px 0 #000;
}
.tt-potion-boost {
    display: flex;
    align-items: center;
    gap: 4px;
}
.tt-skill-icon {
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
}
.tt-section-label {
    color: var(--accent, #f0a040);
    font-weight: 700;
    margin-top: 4px;
}
.tt-pool-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.tt-pool-label {
    min-width: 160px;
}
.tt-pool-tier {
    min-width: 70px;
    color: var(--text-bright);
    font-weight: 600;
}
.tt-pool-icons {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.tooltip .tt-bar-bg {
    margin-top: 4px;
    height: 6px;
    background: var(--bg-darkest);
    border-radius: 2px;
    overflow: hidden;
}

.tooltip .tt-bar-fill {
    height: 100%;
    background: #4caf50;
}

/* Equipment stat table inside tooltips — mirrors stats panel layout */
.tooltip .tt-equip-table {
    border-collapse: collapse;
    font-size: 22px;
    text-shadow: 1px 1px 0 #000;
    margin-top: 4px;
}
.tooltip .tt-equip-table th {
    color: var(--text-accent);
    font-weight: normal;
    padding: 1px 6px;
    text-align: center;
    border-bottom: 1px solid var(--bg-cell);
}
.tooltip .tt-equip-table th:first-child {
    text-align: left;
    width: 100px;
}
.tooltip .tt-equip-table td {
    padding: 1px 6px;
    text-align: center;
    color: var(--text-light);
}
.tooltip .tt-equip-table td:first-child {
    text-align: left;
    color: var(--text-accent);
    width: 100px;
}
.tooltip .tt-equip-table .stat-pos { color: #4caf50; }
.tooltip .tt-equip-table .stat-zero { color: var(--border-primary); }
.tooltip .tt-equip-table .stat-neg { color: #ff4444; }
.tooltip .tt-equip-table .str-cell { text-align: center; color: var(--text-light); }
.tooltip .tt-equip-table .str-label { color: var(--text-muted); }
.tooltip .tt-equip-icon-wrap {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin-right: 4px;
}
.tooltip .tt-equip-icon-wrap img {
    width: 20px;
    height: 20px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}
.tooltip .tt-style-val { color: var(--text-accent); }
.tooltip .tt-speed-val { color: #88cc88; }
.tooltip .tt-maxhit-val { color: #ff6644; }
.tooltip .tt-compare-hint {
    font-size: 18px;
    color: var(--text-dim);
    margin-top: 2px;
}

/* Overworld node tooltip — wraps multi-line content (default tooltip is nowrap). */
.global-tooltip.node-style {
    white-space: normal;
    max-width: 520px;
    padding: 8px 12px;
}
/* Keep "Nearest bank: <name> (<dist>)" on a single line — the parenthetical
   distance was wrapping below the bank name at the previous max-width. */
.global-tooltip.node-style .tt-bank-line {
    white-space: nowrap;
}
.global-tooltip.node-style .tt-name {
    font-size: 24px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
    margin-bottom: 2px;
}
.global-tooltip.node-style .tt-line {
    font-size: 22px;
    color: var(--text-light);
    text-shadow: 1px 1px 0 #000;
}
.global-tooltip.node-style .tt-val {
    color: var(--text-bright);
    font-weight: 600;
}
.global-tooltip.node-style .tt-dim {
    color: var(--text-dim);
    font-size: 20px;
}
.global-tooltip.node-style .tt-section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--accent, #f0a040);
    font-weight: 700;
    font-size: 22px;
    margin-top: 6px;
    margin-bottom: 2px;
}
.global-tooltip.node-style .tt-skill-icon {
    width: 22px;
    height: 22px;
    image-rendering: pixelated;
}
.global-tooltip.node-style .tt-act-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    color: var(--text-light);
    text-shadow: 1px 1px 0 #000;
    padding: 1px 0;
}
.global-tooltip.node-style .tt-act-lv {
    min-width: 56px;
    color: var(--text-bright);
    font-weight: 600;
}
.global-tooltip.node-style .tt-act-icon {
    width: 24px;
    height: 24px;
    image-rendering: pixelated;
}
.global-tooltip.node-style .tt-act-name {
    flex: 1;
}
.global-tooltip.node-style .tt-attack-line {
    display: flex;
    align-items: center;
    gap: 6px;
}
.global-tooltip.node-style .tt-style-icon {
    width: 22px;
    height: 22px;
    image-rendering: pixelated;
    vertical-align: middle;
}


/* ═══════════════════════════════════════════════════════════════
   Custom Scrollbar (matches mockup palette)
   ═══════════════════════════════════════════════════════════════ */

#ui-container ::-webkit-scrollbar { width: 8px; }
#ui-container ::-webkit-scrollbar-track { background: var(--bg-dark); }
#ui-container ::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 4px; }


/* ═══════════════════════════════════════════════════════════════
   Tasks Panel — Right Side (320×440, above Skills Panel)
   1 current-slot + 5 queue-slots with hover popout.
   Matches mocks/tasks_panel.html exactly.
   ═══════════════════════════════════════════════════════════════ */

.tasks-panel {
    position: absolute;
    right: 0px;
    bottom: 66px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    background: var(--bg-panel);
    border: 2px solid var(--border-primary);
    border-radius: 6px;
    width: 320px;
    height: 440px;
}

/* ── Current Task Row ── */
.current-slot {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-cell);
    border: 2px solid var(--border-secondary);
    border-radius: 4px;
    padding: 4px 6px;
}

.current-slot .icon-option {
    border-color: var(--text-accent);
}

.task-progress-bar {
    height: 4px;
    background: var(--bg-darkest);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 2px;
}

.task-progress-fill {
    height: 100%;
    background: linear-gradient(180deg, #4caf50 0%, #2e7d32 100%);
    transition: width .3s;
}

/* ── Queue Slot Row ── */
.queue-slot {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-cell);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    padding: 4px 6px;
}

/* ── Icon Container: popout on hover ── */
.icon-container {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    overflow: visible;
    z-index: 20;
}

.icons-wrapper {
    display: flex;
    gap: 4px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 100;
    transition: all 0.2s ease;
    flex-direction: row-reverse;
}

/* Hide non-selected icons by default */
.icon-container:not(:hover) .icon-option:not(.selected) {
    display: none;
}
.icon-container:not(:hover) .reroll-option {
    display: none;
}

/* Expand on hover */
.icon-container:hover .icons-wrapper {
    background: var(--bg-panel);
    padding: 4px;
    border-radius: 4px;
    border: 1px solid var(--border-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    flex-direction: row;
}

.icon-container:hover .icon-option,
.icon-container:hover .reroll-option {
    display: flex !important;
}

/* ── Individual icon option ── */
.icon-option {
    position: relative;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-cell);
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.icon-option:hover {
    background: var(--bg-hover);
    border-color: var(--text-accent);
    transform: scale(1.08);
}

.icon-option.selected {
    background: var(--bg-cell);
    border-color: var(--text-accent);
}

.icon-option:not(.selected) {
    opacity: 0.5;
}
.icon-option:not(.selected):hover {
    opacity: 0.9;
}

.icon-option > img {
    width: 44px;
    height: 44px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}

.icon-qty {
    position: absolute;
    top: 0px;
    left: 2px;
    font-size: 22px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
    line-height: 1;
    pointer-events: none;
}

.icon-qty-orange { color: #ff8c00; }
.icon-qty-red { color: #ff3232; }

.task-material-line {
    font-size: 16px;
    color: var(--text-muted);
    text-shadow: 1px 1px 0 #000;
}

.recenter-camera-btn {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    padding: 6px 16px;
    font-family: var(--game-font);
    font-size: 18px;
    color: var(--text-light);
    background: var(--bg-panel);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    cursor: pointer;
    text-shadow: 1px 1px 0 #000;
    opacity: 0.8;
}
.recenter-camera-btn:hover {
    opacity: 1;
    color: var(--text-bright);
    border-color: var(--text-accent);
}
.recenter-camera-btn.combat-active {
    bottom: 140px;
}

.icon-scroll-row {
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 16px;
    pointer-events: none;
}

.icon-scroll-indicator {
    position: absolute;
    bottom: 0;
    width: 22px;
    height: 22px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}

/* ── Reroll button in popout ── */
.reroll-option {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2a2a1e;
    border: 2px solid var(--bg-hover);
    border-radius: 4px;
    cursor: pointer;
    font-size: 22px;
    color: var(--text-muted);
    font-family: var(--game-font);
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.reroll-option:hover {
    color: var(--text-bright);
    border-color: var(--text-accent);
    background: var(--bg-cell);
    transform: scale(1.08);
}

.reroll-option.paused {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
    border-color: var(--text-accent);
}

.reroll-option.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ── Task panel tooltips ── */
.icon-tooltip {
    display: none;
    position: absolute;
    z-index: 200;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    padding: 6px 10px;
    white-space: nowrap;
    pointer-events: none;
    text-align: left;
}
.icon-option:hover .icon-tooltip,
.reroll-option:hover .icon-tooltip {
    display: block;
}
.icon-tooltip .tt-name {
    font-size: 24px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
}
.icon-tooltip .tt-line {
    font-size: 22px;
    color: var(--text-light);
    text-shadow: 1px 1px 0 #000;
}

/* ── Task details (to the right of icon) ── */
.task-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    min-width: 0;
}

.task-name {
    font-size: 20px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-node {
    font-size: 18px;
    color: #ffffff;
    text-shadow: 1px 1px 0 #000;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ═══════════════════════════════════════════════════════════════
   Quests Panel — At-a-glance active quest tracker (bottom-right)
   ═══════════════════════════════════════════════════════════════ */

.quests-panel {
    position: absolute;
    right: 0px;
    bottom: 66px;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 6px;
    background: var(--bg-panel);
    border: 2px solid var(--border-primary);
    border-radius: 6px;
    width: 320px;
    height: 440px;
}

/* ── Toggle Bar (Active / List) ── */
.qp-toggle-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
    flex-shrink: 0;
}

.qp-toggle-btn {
    flex: 1;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-cell);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.qp-toggle-btn:hover {
    color: var(--text-light);
    background: var(--bg-hover);
}

.qp-toggle-btn.active {
    color: var(--text-accent);
    background: var(--bg-hover);
    border-color: var(--text-accent);
}

.friends-add-btn {
    flex: 0 0 28px;
    font-size: 20px;
    font-weight: bold;
}
.friends-add-input {
    flex: 1;
    height: 28px;
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    padding: 2px 8px;
    font-family: var(--game-font);
    font-size: 18px;
    color: var(--text-light);
    outline: none;
}
.friends-add-input::placeholder { color: var(--text-dim); }
.friends-add-error {
    padding: 2px 8px;
    font-family: var(--game-font);
    font-size: 16px;
    color: #ff3232;
    text-shadow: 1px 1px 0 #000;
}

/* ── Content Area ── */
.qp-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.qp-content-active {
    gap: 4px;
}

.qp-content-list {
    gap: 0;
}

/* ── List Mode ── */
.qp-list-header {
    flex-shrink: 0;
    padding: 6px 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-light);
    text-align: center;
    background: var(--bg-cell);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    margin-bottom: 4px;
}

.qp-list-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.qp-list-row {
    padding: 8px 10px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: background 0.1s ease;
    text-shadow: 1px 1px 0 #000;
}

.qp-list-row:hover {
    background: var(--bg-hover);
}

.quest-slot {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6px 10px;
    background: var(--bg-cell);
    border: 2px solid var(--border-secondary);
    border-radius: 4px;
}

.quest-slot-empty {
    opacity: 0.4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quest-slot-empty-text {
    font-size: 13px;
    color: var(--text-dim);
}

.quest-slot-active {
    border-color: var(--text-accent);
}

.quest-slot-paused {
    border-color: var(--border-secondary);
    opacity: 0.7;
}

.quest-slot-claimable {
    border-color: var(--text-bright);
    box-shadow: 0 0 6px color-mix(in srgb, var(--text-bright) 30%, transparent);
}

.quest-slot-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.quest-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.quest-dot-active {
    background: #e8d44d;
}

.quest-dot-paused {
    background: #c89a2e;
}

.quest-dot-claimable {
    background: #4a4;
}

.quest-slot-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.quest-slot-badge {
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--text-accent) 25%, transparent);
    color: var(--text-accent);
    flex-shrink: 0;
}

.quest-slot-badge-claim {
    background: color-mix(in srgb, var(--text-bright) 20%, transparent);
    color: var(--text-bright);
}

.quest-slot-progress {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quest-slot-hint {
    font-size: 13px;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 4px;
}

.quest-hint-icon {
    width: 14px;
    height: 14px;
    image-rendering: pixelated;
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════
   Friends Panel — Friend list with Online/Offline toggle
   ═══════════════════════════════════════════════════════════════ */

.friends-panel {
    position: absolute;
    right: 0px;
    bottom: 66px;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 6px;
    background: var(--bg-panel);
    border: 2px solid var(--border-primary);
    border-radius: 6px;
    width: 320px;
    height: 440px;
}

.friends-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--text-dim);
}

.friend-row {
    padding: 6px 8px;
    background: var(--bg-cell);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: background 0.1s ease;
}

.friend-row:hover {
    background: var(--bg-hover);
}

.friend-row-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.friend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.friend-row-name {
    font-size: 18px;
    font-weight: 600;
    text-shadow: 1px 1px 0 #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friend-row-activity {
    font-size: 14px;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friend-activity-icon {
    width: 24px;
    height: 24px;
    image-rendering: pixelated;
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════
   Player Context Menu — Right-click menu for player interactions
   ═══════════════════════════════════════════════════════════════ */

.player-ctx-menu {
    position: absolute;
    width: 180px;
    background: var(--bg-panel);
    border: 2px solid var(--border-secondary);
    border-radius: 6px;
    z-index: 2500;
    overflow: hidden;
}

.ctx-menu-header {
    padding: 8px 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-gold);
    text-shadow: 1px 1px 0 #000;
    border-bottom: 1px solid var(--border-primary);
    background: var(--bg-cell);
}

.ctx-menu-option {
    padding: 6px 12px;
    font-size: 14px;
    color: var(--text-light);
    cursor: pointer;
    transition: background 0.1s ease;
}

.ctx-menu-option:hover {
    background: var(--bg-hover);
    color: var(--text-accent);
}

/* ── In-game Confirmation Dialog ── */
.ctx-confirm-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    background: rgba(0, 0, 0, 0.5);
    z-index: 6600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ctx-confirm-dialog {
    background: var(--bg-panel);
    border: 2px solid var(--border-secondary);
    border-radius: 8px;
    padding: 20px 28px;
    min-width: 280px;
    text-align: center;
}

.ctx-confirm-text {
    font-size: 18px;
    color: var(--text-light);
    text-shadow: 1px 1px 0 #000;
    margin-bottom: 16px;
}

.ctx-confirm-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.ctx-confirm-btn {
    padding: 6px 20px;
    font-size: 16px;
    font-family: var(--game-font);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ctx-confirm-yes {
    background: #5c2a2a;
    border: 1px solid #f44336;
    color: #f44336;
}

.ctx-confirm-yes:hover {
    background: #7a3a3a;
}

.ctx-confirm-no {
    background: var(--bg-cell);
    border: 1px solid var(--border-primary);
    color: var(--text-muted);
}

.ctx-confirm-no:hover {
    background: var(--bg-hover);
    color: var(--text-light);
}

/* ── Settings Muted Players List ── */
.settings-muted-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.settings-muted-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    background: var(--bg-cell);
    border-radius: 4px;
}

.settings-muted-name {
    font-size: 16px;
    color: #f44336;
    text-shadow: 1px 1px 0 #000;
}

.settings-muted-unmute {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.settings-muted-unmute:hover {
    color: #f44336;
    background: var(--bg-hover);
}


/* ═══════════════════════════════════════════════════════════════
   Chat Panel — Bottom-left chat with channel filters
   ═══════════════════════════════════════════════════════════════ */

.chat-panel {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 580px;
    height: 220px;
    display: flex;
    flex-direction: column;
    background: var(--bg-panel);
    border: 2px solid var(--border-primary);
    border-radius: 6px;
    z-index: 5;
}

.chat-panel.chat-minimized {
    height: auto;
}

/* ── Filter Bar ── */
.chat-filter-bar {
    display: flex;
    gap: 0;
    flex-shrink: 0;
    background: var(--bg-cell);
    border-top: 2px solid var(--border-primary);
    border-radius: 0 0 6px 6px;
    padding: 0 4px;
}

/* ── Font Size Buttons ── */
.chat-font-btn {
    width: 24px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-family: var(--game-font);
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.chat-font-btn:hover {
    color: var(--text-light);
}

/* ── Toggle Button (minimize/maximize) ── */
.chat-toggle-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.chat-toggle-btn:hover {
    color: var(--text-light);
}

/* ── Resize Handle (top edge) ── */
.chat-resize-handle {
    position: absolute;
    top: -3px;
    left: 10px;
    right: 10px;
    height: 6px;
    cursor: ns-resize;
    z-index: 11;
}

.chat-resize-handle-right {
    position: absolute;
    top: 10px;
    right: -3px;
    bottom: 10px;
    width: 6px;
    cursor: ew-resize;
    z-index: 11;
}

.chat-filter-btn {
    flex: 1;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--game-font);
    cursor: pointer;
    opacity: 0.35;
    transition: opacity 0.15s ease;
    text-shadow: 1px 1px 0 #000;
}

.chat-filter-btn:hover {
    opacity: 0.7;
}

.chat-filter-btn.active {
    opacity: 1;
}

/* ── Content Wrapper ── */
.chat-content-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ── Message Area ── */
.chat-message-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 8px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.chat-timestamp {
    display: inline-block;
    width: 7.5ch;
    flex-shrink: 0;
    color: var(--text-dim);
}

.chat-game-icon {
    width: 1.15em;
    height: 1.15em;
    image-rendering: pixelated;
    vertical-align: middle;
    margin-right: 3px;
}

.chat-message {
    font-size: inherit;
    font-family: var(--game-font);
    line-height: 1.3;
    text-shadow: 1px 1px 0 #000;
    word-wrap: break-word;
}

/* ── Input Row ── */
.chat-input-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-top: 2px solid var(--border-primary);
    flex-shrink: 0;
}

.chat-channel-label {
    font-size: 14px;
    font-family: var(--game-font);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    text-shadow: 1px 1px 0 #000;
    flex-shrink: 0;
    padding: 0 4px;
}

.chat-channel-label:hover {
    filter: brightness(1.3);
}

.chat-input {
    flex: 1;
    height: 26px;
    background: var(--bg-cell);
    color: var(--text-light);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    padding: 0 8px;
    font-size: 14px;
    font-family: var(--game-font);
    outline: none;
}

.chat-input:focus {
    border-color: var(--text-accent);
}

.chat-input::placeholder {
    color: var(--text-disabled);
}


/* ═══════════════════════════════════════════════════════════════
   HP Bar — Below panel tab bar (bottom-right)
   ═══════════════════════════════════════════════════════════════ */

.hp-bar {
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 320px;
    height: 24px;
    background: var(--bg-darkest);
    border: 2px solid var(--border-primary);
    border-radius: 0 0 6px 6px;
    z-index: 10;
    overflow: hidden;
}

.hp-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, #4caf50 0%, #2e7d32 100%);
    transition: width 0.3s ease;
}

.hp-bar-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 1;
}

.hp-bar-icon {
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.hp-bar-text {
    font-size: 16px;
    font-family: var(--game-font);
    font-weight: 600;
    color: var(--text-light);
    text-shadow: 1px 1px 0 #000;
}


/* ═══════════════════════════════════════════════════════════════
   Panel Tab Bar — Horizontal tabs above the bottom-right panels.
   Toggles Tasks, Skills, Inventory, Quests, and Bank.
   ═══════════════════════════════════════════════════════════════ */

.panel-tab-bar {
    position: absolute;
    right: 0px;
    bottom: 24px;
    width: 320px;
    display: flex;
    flex-direction: row;
    gap: 0;
    z-index: 10;
}

.panel-tab-btn {
    flex: 1;
    height: 42px;
    background: var(--bg-panel);
    border: 2px solid var(--border-primary);
    border-top: none;
    border-radius: 0 0 6px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-right: -2px;
}

.panel-tab-btn:last-child {
    margin-right: 0;
}

.panel-tab-btn:hover {
    border-color: var(--text-accent);
    background: var(--bg-cell);
}

.panel-tab-btn {
    position: relative;
}
.panel-tab-btn.active {
    border-color: var(--text-accent);
    background: var(--bg-cell);
    box-shadow: 0 0 8px color-mix(in srgb, var(--text-accent) 40%, transparent);
    z-index: 1;
}

.panel-tab-dot {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4caf50;
    box-shadow: 0 0 4px #4caf50;
    pointer-events: none;
    z-index: 2;
}

.panel-tab-btn img {
    width: 28px;
    height: 28px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}


/* ═══════════════════════════════════════════════════════════════
   Group of Modals — Full-screen tabbed modal system (1920×1080)
   UI Rendering Layer 2. Covers map and all persistent panels.
   Matches mocks/group_of_modals_bank.html exactly.
   ═══════════════════════════════════════════════════════════════ */

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.modal-container {
    background: var(--bg-panel);
    border: 2px solid var(--border-primary);
    border-radius: 6px;
    width: 1920px;
    height: 1080px;
    position: relative;
    display: flex;
    overflow: hidden;
}

/* ── Left Tab Navigation ── */
.modal-tabs {
    width: 60px;
    flex-shrink: 0;
    background: var(--bg-dark);
    border-right: 2px solid var(--border-primary);
    display: flex;
    flex-direction: column;
    padding: 4px 0;
    gap: 1px;
    z-index: 10;
}

.tab-btn {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-panel);
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    position: relative;
    transition: background 0.1s;
    font-family: var(--game-font);
}
.tab-btn:hover {
    background: var(--bg-cell);
}
.tab-btn.active {
    background: var(--bg-cell);
    border-left: 3px solid var(--text-accent);
}
.tab-btn .tab-icon {
    font-size: 28px;
    filter: grayscale(0.3);
}
.tab-btn.active .tab-icon {
    filter: none;
}

.tab-tooltip {
    display: none;
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    padding: 4px 10px;
    white-space: nowrap;
    pointer-events: none;
    font-size: 20px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.8);
    z-index: 100;
}
.tab-btn:hover .tab-tooltip { display: block; }

.tab-separator {
    height: 1px;
    margin: 4px 8px;
    background: var(--border-primary);
}

/* ── Main Content Area ── */
.modal-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Header ── */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-dark);
    border-bottom: 2px solid var(--border-primary);
    flex-shrink: 0;
    min-height: 60px;
    position: relative;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-icon {
    width: 48px;
    height: 48px;
    background: var(--bg-cell);
    border: 2px solid var(--text-accent);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}

.header-info-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.header-name {
    font-size: 36px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
    line-height: 1;
}

.header-stats {
    display: flex;
    gap: 14px;
    font-size: 22px;
    color: #ffffff;
    text-shadow: 1px 1px 0 #000;
}

/* Modal close button — square widget matching the top-right
   window-control aesthetic but slightly larger since it's the
   modal's primary action. Subtle bg + border, red on hover for
   the destructive intent. margin-right reserves space for the
   global fullscreen + exit controls sitting top-right of the
   viewport. */
.modal-close {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--game-font);
    font-size: 30px;
    line-height: 1;
    color: rgba(255,255,255,0.7);
    background: rgba(20,16,28,0.7);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    cursor: pointer;
    padding: 0 0 4px;
    margin-right: 90px;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.modal-close:hover {
    background: rgba(120,28,28,0.75);
    border-color: rgba(220,80,80,0.85);
    color: #ffe0e0;
}
.modal-close:active {
    transform: scale(0.94);
}

/* ── Content Body ── */
.modal-body {
    flex: 1;
    overflow: hidden;
    display: flex;
}

.tab-content {
    display: none;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
.tab-content.active {
    display: flex;
    flex-direction: column;
}
.tab-content.active.layout-row {
    flex-direction: row;
}

/* ── Placeholder for future modals ── */
.placeholder-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
}
.placeholder-icon { font-size: 80px; opacity: 0.3; }
.placeholder-text {
    font-size: 32px;
    color: var(--border-primary);
    text-shadow: 1px 1px 0 #000;
}


/* ═══════════════════════════════════════════════════════════════
   Bank Modal (Tab 1) — Left: Bank Grid, Right: Equipment
   ═══════════════════════════════════════════════════════════════ */

.bank-layout {
    flex: 1;
    display: flex;
    gap: 0;
    overflow: hidden;
}

/* ── Bank Side (Left) ── */
.bank-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 2px solid var(--border-primary);
}

.bank-toolbar {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-primary);
    gap: 8px;
    flex-shrink: 0;
}

.bank-search {
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    padding: 4px 8px;
    font-family: var(--game-font);
    font-size: 20px;
    color: var(--text-bright);
    width: 200px;
    outline: none;
}
.bank-search::placeholder { color: var(--border-primary); }
.bank-search:focus { border-color: var(--text-accent); }

.bank-filter-btn {
    padding: 4px 10px;
    background: var(--bg-panel);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    color: var(--text-light);
    cursor: pointer;
    font-family: var(--game-font);
    font-size: 18px;
    text-shadow: 1px 1px 0 #000;
}
.bank-filter-btn:hover { background: var(--bg-cell); color: var(--text-bright); border-color: var(--text-accent); }
.bank-filter-btn.active { color: var(--text-bright); border-color: var(--text-accent); background: var(--bg-cell); }

.bank-grid-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}

.bank-scrap-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-primary);
}

.bank-scraps-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--game-font);
    font-size: 18px;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
}
.bank-scraps-toggle input[type="checkbox"] {
    cursor: pointer;
}

.bank-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 57px);
    gap: 8px;
    justify-content: start;
}

/* ═══════════════════════════════════════════════════════════════
   Equipment Panel (Right side of Bank Modal)
   ═══════════════════════════════════════════════════════════════ */

.equip-side {
    width: 540px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Loadout Style Tabs ── */
.loadout-tabs {
    display: flex;
    background: var(--bg-dark);
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
}

.loadout-tab {
    flex: 1;
    padding: 4px 2px;
    text-align: center;
    font-family: var(--game-font);
    font-size: 20px;
    color: var(--text-muted);
    text-shadow: 1px 1px 0 #000;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    background: none;
    border-top: none;
    border-left: none;
    border-right: 1px solid var(--bg-panel);
    transition: all 0.1s;
}
.loadout-tab:last-child { border-right: none; }
.loadout-tab:hover { background: var(--bg-panel); color: var(--text-light); }
.loadout-tab.active {
    color: var(--text-bright);
    border-bottom: 2px solid var(--text-accent);
    background: var(--bg-panel);
}

.loadout-tab .style-icon { font-size: 18px; margin-right: 2px; }

.loadout-tab-icon {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
    vertical-align: middle;
    margin-right: 4px;
}

/* ── Equipment Display ── */
.equip-display {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.equip-title {
    font-size: 40px;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
    margin-bottom: 2px;
}

/* ── Paperdoll Grid (3 columns x 5 rows) ── */
.paperdoll {
    display: grid;
    grid-template-columns: repeat(3, 146px);
    grid-template-rows: repeat(5, 114px);
    gap: 6px;
    justify-content: center;
    align-content: center;
    justify-items: center;
}

/* ── Equipment slots in paperdoll — uses .inv-slot as base ── */
.paperdoll .inv-slot {
    cursor: pointer;
    border-color: var(--bg-hover);
    width: 108px;
    height: 108px;
}

.paperdoll .inv-slot img {
    transform: scale(2);
    filter: drop-shadow(2px 2px 0 #000);
}
.paperdoll .inv-slot.empty img { opacity: 0.5; }

/* Label for empty equipment slots (e.g. "Head", "Cape") */
.inv-slot-label {
    font-size: 13px;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
    pointer-events: none;
    text-align: center;
    width: 100%;
}
.inv-slot:not(.empty) .inv-slot-label { display: none; }

/* ── Paperdoll Grid Positions ── */
.slot-head     { grid-column: 2; grid-row: 1; }
.slot-cape     { grid-column: 1; grid-row: 2; }
.slot-neck     { grid-column: 2; grid-row: 2; }
.slot-ammo     { grid-column: 3; grid-row: 2; }
.slot-mainhand { grid-column: 1; grid-row: 3; }
.slot-body     { grid-column: 2; grid-row: 3; }
.slot-offhand  { grid-column: 3; grid-row: 3; }
.slot-hands    { grid-column: 1; grid-row: 4; }
.slot-belt     { grid-column: 2; grid-row: 4; }
.slot-ring1    { grid-column: 1; grid-row: 5; }
.slot-legs     { grid-column: 2; grid-row: 5; }
.slot-ring2    { grid-column: 3; grid-row: 5; }


/* ═══════════════════════════════════════════════════════════════
   Combat Stats Panel (bottom of Equipment side)
   ═══════════════════════════════════════════════════════════════ */

.equip-stats-panel {
    flex-shrink: 0;
    background: var(--bg-dark);
    border-top: 2px solid var(--border-primary);
    padding: 10px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stats-weapon-line {
    text-align: center;
    font-size: 24px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
}

.stats-style-line {
    text-align: center;
    font-size: 22px;
    color: var(--text-light);
    text-shadow: 1px 1px 0 #000;
    margin-bottom: 4px;
}
.stats-style-line .style-val { color: var(--text-accent); }
.stats-style-line .speed-val { color: #88cc88; }

.stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 20px;
    text-shadow: 1px 1px 0 #000;
}

.stats-table th {
    color: var(--text-accent);
    font-weight: normal;
    padding: 2px 6px;
    text-align: center;
    border-bottom: 1px solid var(--bg-cell);
}
.stats-table th:first-child {
    text-align: left;
    width: 70px;
}

.stats-table td {
    padding: 1px 6px;
    text-align: center;
    color: var(--text-light);
}
.stats-table td:first-child {
    text-align: left;
    color: var(--text-accent);
    width: 106px;
}

.stats-table .stat-pos { color: #4caf50; }
.stats-table .stat-zero { color: var(--border-primary); }
.stats-table .stat-neg { color: #ff4444; }

.stats-table .str-cell {
    text-align: center;
    color: var(--text-light);
}
.stats-table .str-label { color: var(--text-muted); }

.stats-table .stats-icon-wrap {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin-right: 4px;
}
.stats-table .stats-icon-wrap img {
    width: 20px;
    height: 20px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}

.stats-style-line .maxhit-val { color: #ff6644; }


/* ── Swap / Insert Mode Toggle Buttons ── */
.bank-mode-btn {
    padding: 4px 10px;
    background: var(--bg-panel);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--game-font);
    font-size: 18px;
    text-shadow: 1px 1px 0 #000;
}
.bank-mode-btn:hover { background: var(--bg-cell); color: var(--text-light); border-color: var(--text-accent); }
.bank-mode-btn.active { color: var(--text-bright); border-color: var(--text-accent); background: var(--bg-cell); }

/* ── Placeholder Slots (qty 0 — holds position) ── */
.bank-placeholder {
    opacity: 0.5;
}
.bank-placeholder .inv-qty {
    color: var(--text-dim);
}

/* ── Drag Ghost (follows cursor during drag) ── */
.bank-drag-ghost {
    position: absolute;
    z-index: 10000;
    pointer-events: none;
    opacity: 0.85;
    background: var(--bg-panel);
    border: 2px solid var(--text-accent);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}
.bank-drag-ghost img {
    transform: scale(1.5);
    image-rendering: pixelated;
}

/* ── Source slot dimmed while dragging ── */
.bank-slot-dragging {
    opacity: 0.3;
    border: 2px dashed var(--text-accent);
}

/* ── Image-based tab icons ── */
.tab-icon-img {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    display: block;
}

/* ── Header icon image ── */
.header-icon-img {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
}

/* ── Bank Grid Scrollbar ── */
.bank-grid-scroll::-webkit-scrollbar { width: 8px; }
.bank-grid-scroll::-webkit-scrollbar-track { background: var(--bg-dark); }
.bank-grid-scroll::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 4px; }


/* ═══════════════════════════════════════════════════════════════
   XP Drops — Floating gold text, top-center of screen.
   UI Rendering Layer 4. Z-index below Group of Modals.
   Matches mocks/xp_drops.html exactly.
   ═══════════════════════════════════════════════════════════════ */

.xp-drops-container {
    position: absolute;
    top: 12%;
    left: var(--playable-center-x, 50%);
    transform: translateX(-50%);
    width: 280px;
    height: 36%;
    pointer-events: none;
    z-index: 2900;
    transition: left 0.3s ease;
}

.xp-drop {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    animation: xpFloat 2s ease-out forwards;
    white-space: nowrap;
}

.xp-drop-icon {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}

.xp-drop-text {
    font-family: var(--game-font);
    font-size: 24px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
}

@keyframes xpFloat {
    0%   { bottom: 0;    opacity: 1; }
    70%  {                opacity: 1; }
    100% { bottom: 100%; opacity: 0; }
}


/* ═══════════════════════════════════════════════════════════════
   Loot Drops — Spinning item icons at player position.
   Z-index below Group of Modals.
   Matches mocks/loot_drops.html exactly.
   ═══════════════════════════════════════════════════════════════ */

.loot-drop-zone {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    pointer-events: none;
    z-index: 1000;
}

.loot-drop {
    position: absolute;
    pointer-events: none;
    animation: lootRise 0.5s ease-out forwards;
}

.loot-drop-icon {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
    animation: lootSpin 0.5s ease-out forwards;
}

@keyframes lootSpin {
    0%   { transform: rotate(0deg) scale(0.4); }
    40%  { transform: rotate(270deg) scale(1.65); }
    100% { transform: rotate(360deg) scale(1.5); }
}

@keyframes lootRise {
    0%   { transform: translate(-50%, 0); opacity: 1; }
    50%  { opacity: 1; }
    100% { transform: translate(-50%, -60px); opacity: 0; }
}

/* ── Plunder food consume animation (downward variant) ── */
.loot-consume {
    position: absolute;
    pointer-events: none;
    animation: lootConsume 0.5s ease-in forwards;
}

.loot-consume-icon {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
    animation: lootSpinConsume 0.5s ease-in forwards;
}

@keyframes lootSpinConsume {
    0%   { transform: rotate(0deg) scale(1.5); }
    60%  { transform: rotate(270deg) scale(1.65); }
    100% { transform: rotate(360deg) scale(0.4); }
}

@keyframes lootConsume {
    0%   { transform: translate(-50%, 0); opacity: 1; }
    50%  { opacity: 1; }
    100% { transform: translate(-50%, 60px); opacity: 0; }
}

/* ── Inventory loot animation (reuses lootSpin) ── */
.inv-slot.loot-received img {
    animation: lootSpin 0.5s ease-out;
}

/* ── Inventory consume animation (counter-clockwise spin out) ── */
.inv-slot.loot-consumed img {
    animation: lootSpinReverse 0.5s ease-in forwards;
}

@keyframes lootSpinReverse {
    0%   { transform: rotate(0deg) scale(1.5); opacity: 1; }
    60%  { transform: rotate(-270deg) scale(1.65); opacity: 0.6; }
    100% { transform: rotate(-360deg) scale(0.4); opacity: 0; }
}

/* ── Inventory gold spend animation (horizontal shake) ── */
.inv-slot.gold-shake img {
    animation: goldShake 0.3s ease-in-out;
}

@keyframes goldShake {
    0%   { transform: scale(1.5) translateX(0); }
    25%  { transform: scale(1.5) translateX(4px); }
    50%  { transform: scale(1.5) translateX(-4px); }
    75%  { transform: scale(1.5) translateX(4px); }
    100% { transform: scale(1.5) translateX(0); }
}


/* ═══════════════════════════════════════════════════════════════
   Notifications — Centered celebration popups.
   UI Rendering Layer 4. Z-index ABOVE Group of Modals.
   Matches mocks/notifications.html exactly.
   ═══════════════════════════════════════════════════════════════ */

.celebration-container {
    position: absolute;
    top: 0px;
    left: calc(var(--playable-center-x, 50%) - 400px);
    pointer-events: none;
    z-index: 3000;
    width: 800px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: left 0.3s ease;
}

/* ── Level Up ── */
.celeb-levelup {
    animation: celebPulse 3s ease-out forwards;
    text-align: center;
}

.celeb-title {
    font-family: var(--game-font);
    font-size: 80px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6), 0 0 24px rgba(255,255,0,0.5);
    margin-bottom: 14px;
    animation: titleGlow 1.5s ease-in-out infinite;
}

.celeb-skill-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.celeb-icon {
    width: 56px;
    height: 56px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}

.celeb-level-text {
    font-family: var(--game-font);
    font-size: 56px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
}

/* ── Task Complete ── */
.celeb-task {
    animation: celebSlide 2.5s ease-out forwards;
    text-align: center;
}

.celeb-task-text {
    font-family: var(--game-font);
    font-size: 56px;
    color: #4caf50;
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6), 0 0 18px rgba(76,175,80,0.5);
}

/* ── Death ── */
.celeb-death {
    animation: celebPulse 2.8s ease-out forwards;
    text-align: center;
}

.celeb-death-title {
    font-family: var(--game-font);
    font-size: 80px;
    color: #ff4444;
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6), 0 0 24px rgba(255,50,50,0.5);
    margin-bottom: 14px;
    animation: titleGlow 1.5s ease-in-out infinite;
}

.celeb-death-sub {
    font-family: var(--game-font);
    font-size: 40px;
    color: #ff6666;
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
}

/* ── Notification Keyframes ── */
@keyframes celebPulse {
    0%   { transform: scale(0);    opacity: 0; }
    20%  { transform: scale(1.2);  opacity: 1; }
    40%  { transform: scale(0.95); }
    60%  { transform: scale(1.05); }
    80%  { transform: scale(1);    opacity: 1; }
    100% { transform: scale(1);    opacity: 0; }
}

@keyframes celebSlide {
    0%   { transform: translateY(50px); opacity: 0; }
    20%  { transform: translateY(0);    opacity: 1; }
    80%  { transform: translateY(0);    opacity: 1; }
    100% { transform: translateY(-30px);opacity: 0; }
}

@keyframes titleGlow {
    0%, 100% {
        text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6), 0 0 24px rgba(255,255,0,0.5);
    }
    50% {
        text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6), 0 0 44px rgba(255,255,0,0.8);
    }
}

/* ── Slay Task Complete ── */
.celeb-slay-task {
    animation: celebSlide 2.3s ease-out forwards;
    text-align: center;
}

.celeb-slay-task-title {
    font-family: var(--game-font);
    font-size: 48px;
    color: #c0392b;
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6), 0 0 18px rgba(192,57,43,0.5);
    margin-bottom: 6px;
}

.celeb-slay-task-sub {
    font-family: var(--game-font);
    font-size: 36px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
}

/* ── Quest Begun ── */
.celeb-quest-begun {
    animation: celebSlide 2.3s ease-out forwards;
    text-align: center;
}

.celeb-quest-begun-title {
    font-family: var(--game-font);
    font-size: 48px;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6), 0 0 18px rgba(200,168,62,0.5);
    margin-bottom: 6px;
}

.celeb-quest-begun-sub {
    font-family: var(--game-font);
    font-size: 36px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
}

/* ── Quest Step Complete ── */
.celeb-quest-step {
    animation: celebSlide 2.3s ease-out forwards;
    text-align: center;
}

.celeb-quest-step-title {
    font-family: var(--game-font);
    font-size: 48px;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
    margin-bottom: 6px;
}

.celeb-quest-step-sub {
    font-family: var(--game-font);
    font-size: 36px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
}

/* ── Reroll Credit Reward Icon (quests) ── */
.reroll-reward-icon {
    font-size: 32px;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: var(--game-font);
}

/* ── Scroll Drop ── */
.celeb-scroll {
    animation: celebPulse 2.3s ease-out forwards;
    text-align: center;
}

.celeb-scroll-title {
    font-family: var(--game-font);
    font-size: 72px;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6), 0 0 24px rgba(200,168,62,0.5);
    margin-bottom: 10px;
    animation: titleGlow 1.5s ease-in-out infinite;
}

.celeb-scroll-sub {
    font-family: var(--game-font);
    font-size: 40px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
}

/* ── Scroll Step Complete ── */
.celeb-scroll-step {
    animation: celebSlide 1.8s ease-out forwards;
    text-align: center;
}

.celeb-scroll-step-title {
    font-family: var(--game-font);
    font-size: 48px;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
    margin-bottom: 6px;
}

.celeb-scroll-step-sub {
    font-family: var(--game-font);
    font-size: 36px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
}

/* ── Scroll Complete — Treasure Chest ── */
.celeb-scroll-complete {
    animation: celebPulse 3.2s ease-out forwards;
    text-align: center;
}

.celeb-scroll-complete-title {
    font-family: var(--game-font);
    font-size: 80px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6), 0 0 30px rgba(255,215,0,0.6);
    margin-bottom: 10px;
    animation: titleGlow 1.5s ease-in-out infinite;
}

.celeb-scroll-complete-sub {
    font-family: var(--game-font);
    font-size: 44px;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
}

/* ══════════════════════════════
   XP MILESTONE (10M, 20M…)
   ══════════════════════════════ */
.celeb-milestone {
    animation: celebPulse 3s ease-out forwards;
    text-align: center;
}

.celeb-milestone-title {
    font-family: var(--game-font);
    font-size: 72px;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6), 0 0 20px rgba(200,168,62,0.6);
    animation: titleGlowGold 1.5s ease-in-out infinite;
}

/* ══════════════════════════════
   TOTAL LEVEL MILESTONE
   ══════════════════════════════ */
.celeb-total {
    animation: celebPulse 3s ease-out forwards;
    text-align: center;
}

/* ══════════════════════════════
   SKILL CAPE / TRIMMED CAPE
   ══════════════════════════════ */
.celeb-cape {
    animation: celebPulse 3.5s ease-out forwards;
    text-align: center;
}

.celeb-cape-icon {
    width: 72px;
    height: 72px;
    image-rendering: pixelated;
    margin-bottom: 8px;
    filter: drop-shadow(1px 1px 0 #000);
}

.celeb-cape-text {
    font-family: var(--game-font);
    font-size: 52px;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6), 0 0 18px rgba(200,168,62,0.5);
}

.celeb-cape-text-gold {
    font-family: var(--game-font);
    font-size: 52px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6), 0 0 24px rgba(255,255,0,0.8);
}

/* ══════════════════════════════
   PET OBTAINED
   ══════════════════════════════ */
.celeb-pet {
    animation: petBounce 4s ease-out forwards;
    text-align: center;
}

.celeb-pet-icon {
    width: 72px;
    height: 72px;
    image-rendering: pixelated;
    animation: petSpin 2s ease-in-out;
    filter: drop-shadow(1px 1px 0 #000);
}

.celeb-pet-text {
    font-family: var(--game-font);
    font-size: 52px;
    color: #9b59b6;
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6), 0 0 18px rgba(155,89,182,0.5);
}

.celeb-pet-text-shiny {
    font-family: var(--game-font);
    font-size: 52px;
    background: linear-gradient(45deg, #ff0000,#ff7f00,#ffff00,#00ff00,#0000ff,#4b0082,#9400d3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: rainbowShift 2s linear infinite;
}

/* ══════════════════════════════
   MAX CAPE / TRIMMED MAX
   ══════════════════════════════ */
.celeb-max {
    animation: maxCeleb 5s ease-out forwards;
    text-align: center;
}

.celeb-congrats {
    font-family: var(--game-font);
    font-size: 68px;
    color: var(--text-accent);
    margin-bottom: 14px;
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
}

.celeb-congrats-big {
    font-family: var(--game-font);
    font-size: 80px;
    color: var(--text-bright);
    margin-bottom: 14px;
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6), 0 0 30px rgba(255,255,0,0.8);
    animation: titleGlow 1.5s ease-in-out infinite;
}

.celeb-max-icon {
    width: 88px;
    height: 88px;
    image-rendering: pixelated;
    margin-bottom: 8px;
    filter: drop-shadow(1px 1px 0 #000);
}

.celeb-max-text {
    font-family: var(--game-font);
    font-size: 68px;
    color: #e74c3c;
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6), 0 0 28px rgba(231,76,60,0.8);
}

.celeb-max-text-gold {
    font-family: var(--game-font);
    font-size: 68px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6), 0 0 34px rgba(255,255,0,1);
}

/* ══════════════════════════════
   FIREWORKS
   ══════════════════════════════ */
.fireworks, .fireworks-small {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}

.fw-burst {
    position: absolute;
    width: 4px; height: 4px;
    animation: fwBurst 1.5s ease-out forwards;
}

.fw-particle {
    position: absolute;
    width: 5px; height: 5px;
    background: radial-gradient(circle, #ffff00 0%, #c8a83e 50%, transparent 100%);
    border-radius: 50%;
    animation: fwShoot 1.5s ease-out forwards;
}

.fireworks-small .fw-burst { animation-duration: 1.2s; }
.fireworks-small .fw-particle {
    width: 4px; height: 4px;
    animation: fwShootSmall 1.2s ease-out forwards;
}

.fireworks-cape .fw-particle {
    background: radial-gradient(circle, #c8a83e 0%, #ffff00 50%, transparent 100%);
}

.fireworks-shiny .fw-particle {
    background: radial-gradient(circle, #ff0000 0%, #00ff00 25%, #0000ff 50%, #ffff00 75%, transparent 100%);
    animation: fwShootRainbow 1.5s ease-out forwards;
}

.fireworks-epic .fw-burst { animation-duration: 2s; }
.fireworks-epic .fw-particle {
    width: 7px; height: 7px;
    background: radial-gradient(circle, #ffff00 0%, #c8a83e 30%, #9400d3 60%, transparent 100%);
    animation: fwShootEpic 2s ease-out forwards;
}

/* ══════════════════════════════
   NEW KEYFRAMES (Layer 16C)
   ══════════════════════════════ */
@keyframes titleGlowGold {
    0%, 100% {
        text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6), 0 0 20px rgba(200,168,62,0.5);
    }
    50% {
        text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6), 0 0 40px rgba(200,168,62,0.8);
    }
}

@keyframes petBounce {
    0%   { transform: scale(0) rotate(0deg);     opacity: 0; }
    20%  { transform: scale(1.3) rotate(360deg); opacity: 1; }
    40%  { transform: scale(0.9) rotate(350deg); }
    60%  { transform: scale(1.1) rotate(370deg); }
    80%  { transform: scale(1) rotate(360deg);   opacity: 1; }
    100% { transform: scale(1) rotate(360deg);   opacity: 0; }
}

@keyframes petSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(720deg); }
}

@keyframes maxCeleb {
    0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
    20%  { transform: scale(1.2) rotate(20deg); opacity: 1; }
    30%  { transform: scale(0.95) rotate(-10deg); }
    40%  { transform: scale(1.05) rotate(5deg); }
    50%  { transform: scale(1) rotate(0deg); }
    90%  { transform: scale(1) rotate(0deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 0; }
}

@keyframes rainbowShift {
    0%   { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

@keyframes fwBurst {
    0%   { transform: scale(0); opacity: 1; }
    100% { transform: scale(1); opacity: 0; }
}

@keyframes fwShoot {
    0%   { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(110px); opacity: 0; }
}

@keyframes fwShootSmall {
    0%   { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(65px); opacity: 0; }
}

@keyframes fwShootRainbow {
    0%   { transform: translateX(0); opacity: 1; filter: hue-rotate(0deg); }
    100% { transform: translateX(130px); opacity: 0; filter: hue-rotate(360deg); }
}

@keyframes fwShootEpic {
    0%   { transform: translateX(0) scale(1);   opacity: 1; }
    100% { transform: translateX(160px) scale(0.5); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   Treasure Chest Opening Overlay (UI Rendering Layer 3)
   Matches mocks/treasure_chest_opening.html
   Z-index above all other modals (2200)
   ═══════════════════════════════════════════════════════════════ */

.chest-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2200;
    transition: opacity 0.4s ease;
}
.chest-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

.chest-overlay .chest-panel {
    background: linear-gradient(168deg, rgba(40,30,15,0.97) 0%, rgba(25,18,8,0.98) 100%);
    border: 2px solid rgba(255, 215, 0, 0.45);
    border-radius: 6px;
    padding: 28px 36px 24px;
    width: 480px;
    text-align: center;
    position: relative;
    box-shadow: 0 0 30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,215,0,0.1), 0 0 80px rgba(255,180,0,0.06);
}

/* Corner accents */
.chest-overlay .chest-panel::before,
.chest-overlay .chest-panel::after {
    content: '';
    position: absolute;
    width: 12px; height: 12px;
    border-color: rgba(255, 215, 0, 0.6);
    border-style: solid;
}
.chest-overlay .chest-panel::before { top: 4px; left: 4px; border-width: 2px 0 0 2px; }
.chest-overlay .chest-panel::after { top: 4px; right: 4px; border-width: 2px 2px 0 0; }
.chest-overlay .corner-bl,
.chest-overlay .corner-br {
    position: absolute; width: 12px; height: 12px;
    border-color: rgba(255, 215, 0, 0.6); border-style: solid;
}
.chest-overlay .corner-bl { bottom: 4px; left: 4px; border-width: 0 0 2px 2px; }
.chest-overlay .corner-br { bottom: 4px; right: 4px; border-width: 0 2px 2px 0; }

/* Header */
.chest-overlay .chest-title {
    font-family: var(--game-font);
    font-size: 40px;
    color: var(--text-gold);
    text-shadow: 0 0 8px rgba(255,180,0,0.4), 2px 2px 0 #000;
    letter-spacing: 3px;
    line-height: 1;
}
.chest-overlay .chest-tier {
    font-size: 32px;
    color: rgba(255, 215, 0, 0.6);
    margin-top: 4px;
    letter-spacing: 1px;
    font-family: var(--game-font);
}
.chest-overlay .chest-xp {
    font-size: 28px;
    color: #8ef08e;
    text-shadow: 1px 1px 0 #000;
    margin-top: 6px;
    font-family: var(--game-font);
}

/* Divider */
.chest-overlay .chest-divider {
    width: 80%; height: 1px;
    margin: 14px auto 16px;
    background: linear-gradient(90deg, transparent, rgba(255,215,0,0.35), transparent);
}

/* Loot grid */
.chest-overlay .chest-loot-grid {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 56px;
    margin-bottom: 18px;
}

.chest-overlay .inv-slot.chest-pending {
    visibility: hidden;
}

/* Collect button */
.chest-overlay .chest-btn {
    font-family: var(--game-font);
    font-size: 30px;
    padding: 8px 36px;
    color: var(--text-gold);
    background: rgba(255, 215, 0, 0.08);
    border: 2px solid rgba(255, 215, 0, 0.5);
    border-radius: 3px;
    cursor: pointer;
    letter-spacing: 2px;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.chest-overlay .chest-btn:hover {
    background: rgba(255, 215, 0, 0.18);
    border-color: rgba(255, 215, 0, 0.8);
    box-shadow: 0 0 12px rgba(255, 180, 0, 0.2);
}
.chest-overlay .chest-btn:active {
    transform: scale(0.97);
}

/* ═══════════════════════════════════════════════════════════════
   Alms Modal (Tab 5)
   Matches mocks/group_of_modals_alms.html exactly.
   ═══════════════════════════════════════════════════════════════ */

.alms-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 40px 60px;
}

.alms-skill-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}

.alms-skill-bubble {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-cell);
    border: 2px solid var(--border-primary);
    border-radius: 6px;
    padding: 10px 24px;
    min-width: 220px;
    justify-content: center;
}

.alms-skill-bubble img {
    width: 48px;
    height: 48px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}

.alms-skill-bubble .skill-level {
    font-family: var(--game-font);
    font-size: 40px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
    line-height: 1;
}

.alms-skill-bubble .skill-progress {
    position: absolute;
    bottom: 3px;
    left: 8px;
    right: 8px;
    height: 4px;
    background: var(--bg-darkest);
    border-radius: 2px;
    overflow: hidden;
}

.alms-skill-bubble .skill-progress-fill {
    height: 100%;
    background: #4caf50;
    transition: width .3s;
}

.alms-xp-text {
    font-family: var(--game-font);
    font-size: 24px;
    color: var(--text-light);
    text-shadow: 1px 1px 0 #000;
    text-align: center;
}

.alms-xp-text .xp-val {
    color: var(--text-bright);
}

.alms-divider {
    width: 500px;
    height: 1px;
    background: var(--border-primary);
    margin: 16px 0;
}

.alms-gold-display {
    font-family: var(--game-font);
    font-size: 28px;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
    margin-bottom: 20px;
}

.alms-gold-display .gold-val {
    color: var(--text-bright);
}

.alms-input-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.alms-input-label {
    font-family: var(--game-font);
    font-size: 26px;
    color: var(--text-light);
    text-shadow: 1px 1px 0 #000;
}

.alms-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.alms-nudge-btn {
    padding: 6px 12px;
    background: var(--bg-panel);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    color: var(--text-light);
    cursor: pointer;
    font-family: var(--game-font);
    font-size: 22px;
    text-shadow: 1px 1px 0 #000;
    transition: all 0.1s;
    flex-shrink: 0;
}
.alms-nudge-btn:hover {
    background: var(--bg-cell);
    color: var(--text-bright);
    border-color: var(--text-accent);
}

.alms-gold-input {
    background: var(--bg-dark);
    border: 2px solid var(--border-primary);
    border-radius: 4px;
    padding: 8px 14px;
    font-family: var(--game-font);
    font-size: 32px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
    width: 260px;
    text-align: center;
    outline: none;
    flex-shrink: 1;
    min-width: 0;
}

.alms-gold-input:focus {
    border-color: var(--text-accent);
}

.alms-gold-input::placeholder {
    color: var(--border-primary);
}

.alms-presets {
    display: flex;
    gap: 8px;
}

.alms-preset-btn {
    padding: 6px 16px;
    background: var(--bg-panel);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    color: var(--text-light);
    cursor: pointer;
    font-family: var(--game-font);
    font-size: 22px;
    text-shadow: 1px 1px 0 #000;
    transition: all 0.1s;
}

.alms-preset-btn:hover {
    background: var(--bg-cell);
    color: var(--text-bright);
    border-color: var(--text-accent);
}

.alms-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 16px 0;
    padding: 16px 32px;
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    min-width: 440px;
}

.alms-preview-title {
    font-family: var(--game-font);
    font-size: 24px;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
    margin-bottom: 4px;
}

.alms-preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-family: var(--game-font);
    font-size: 24px;
    text-shadow: 1px 1px 0 #000;
}

.alms-preview-row .preview-label {
    color: var(--text-muted);
}

.alms-preview-row .preview-val {
    color: var(--text-light);
}

.alms-preview-row .preview-val.gold {
    color: var(--text-accent);
}

.alms-preview-row .preview-val.xp {
    color: var(--text-bright);
}

.alms-preview-row .preview-val.level-up {
    color: #4caf50;
}

.alms-preview .preview-bar-bg {
    width: 100%;
    height: 6px;
    background: var(--bg-darkest);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}

.alms-preview .preview-bar-fill {
    height: 100%;
    background: #4caf50;
    transition: width .3s;
}

.alms-confirm-btn {
    padding: 12px 48px;
    background: #3a6a3a;
    border: 2px solid #4caf50;
    border-radius: 6px;
    color: var(--text-bright);
    cursor: pointer;
    font-family: var(--game-font);
    font-size: 32px;
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
    transition: all 0.15s;
    margin-top: 12px;
}

.alms-confirm-btn:hover {
    background: #4a8a4a;
    border-color: #66cc66;
}

.alms-confirm-btn:active {
    background: #2a5a2a;
}

.alms-confirm-btn.disabled {
    background: var(--bg-panel);
    border-color: var(--border-primary);
    color: var(--border-primary);
    cursor: not-allowed;
}

.alms-confirm-btn.disabled:hover {
    background: var(--bg-panel);
    border-color: var(--border-primary);
}

.alms-info {
    font-family: var(--game-font);
    font-size: 20px;
    color: var(--border-primary);
    text-shadow: 1px 1px 0 #000;
    text-align: center;
    margin-top: 16px;
    max-width: 500px;
    line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════════════
   Brew Enhancement Modal (Tab 4)
   Matches mocks/group_of_modals_brew_modal.html card grid layout.
   ═══════════════════════════════════════════════════════════════ */

.brew-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Style Filter Tabs ── */
.brew-style-filters {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.brew-style-tab {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background: var(--bg-panel);
    border: 2px solid var(--border-primary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.1s;
}
.brew-style-tab:hover { background: var(--bg-cell); border-color: var(--border-secondary); }
.brew-style-tab.active { background: var(--bg-cell); border-color: var(--text-accent); }

.brew-style-tab-name {
    font-family: var(--game-font);
    font-size: 22px;
    color: var(--text-light);
    text-shadow: 1px 1px 0 #000;
}
.brew-style-tab.active .brew-style-tab-name { color: var(--text-bright); }

/* ── Recipes Area ── */
.brew-recipes-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 8px;
}

.brew-recipes-header {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 4px 4px 0 0;
    flex-shrink: 0;
    gap: 10px;
}

.brew-recipes-scroll {
    flex: 1;
    overflow-y: auto;
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-top: none;
    border-radius: 0 0 4px 4px;
    padding: 10px;
}

.brew-recipes-scroll::-webkit-scrollbar { width: 8px; }
.brew-recipes-scroll::-webkit-scrollbar-track { background: var(--bg-dark); }
.brew-recipes-scroll::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 4px; }

/* ── Tier Dividers ── */
.brew-tier-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0 4px 0;
    margin-top: 6px;
}
.brew-tier-divider:first-child { margin-top: 0; }

.brew-tier-level {
    font-family: var(--game-font);
    font-size: 22px;
    text-shadow: 1px 1px 0 #000;
    white-space: nowrap;
    flex-shrink: 0;
}
.brew-tier-level.has { color: #4caf50; }
.brew-tier-level.needs { color: #e74c3c; }

.brew-tier-line {
    flex: 1;
    height: 1px;
    background: var(--border-primary);
}

/* ── Recipe Grid ── */
.brew-recipes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 344px);
    gap: 8px;
    margin-bottom: 8px;
}

/* ── Recipe Card ── */
.brew-recipe-card {
    width: 344px;
    background: var(--bg-panel);
    border: 2px solid var(--border-primary);
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.15s;
}
.brew-recipe-card:hover { border-color: var(--border-secondary); }
.brew-recipe-card.brewable { border-color: #4caf50; }
.brew-recipe-card.brewable:hover { border-color: #6fcf70; }
.brew-recipe-card.locked { opacity: 0.35; pointer-events: none; }

.brew-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Brew item slots — borderless, integrated into card */
.brew-recipe-card .inv-slot {
    background: none;
    border-color: transparent;
    flex-shrink: 0;
}

.brew-cost-slot.inv-slot {
    width: 56px; height: 56px;
}

.brew-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.brew-card-name {
    font-family: var(--game-font);
    font-size: 22px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brew-card-sub {
    font-family: var(--game-font);
    font-size: 16px;
    color: var(--text-muted);
    text-shadow: 1px 1px 0 #000;
}

/* Style colors — shared with style dots */
.style-melee      { background: #3a2020; color: #ff6b6b; border: 1px solid #8b3030; }
.style-ranged     { background: #2a3a20; color: #6bff6b; border: 1px solid #308b30; }
.style-magic      { background: #20203a; color: #6b8bff; border: 1px solid #30308b; }
.style-defensive  { background: #3a3a20; color: #ffff6b; border: 1px solid #8b8b30; }
.style-movement   { background: #203a3a; color: #6bffff; border: 1px solid #308b8b; }

.style-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-melee     { background: #ff6b6b; }
.dot-ranged    { background: #6bff6b; }
.dot-magic     { background: #6b8bff; }
.dot-defensive { background: #ffff6b; }
.dot-movement  { background: #6bffff; }

/* ── Card Details ── */
.brew-card-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 0 2px 0;
    border-top: 1px solid var(--bg-cell);
}

.brew-detail-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 22px;
    text-shadow: 1px 1px 0 #000;
}

.brew-detail-value { color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brew-detail-xp { color: var(--text-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.brew-btn {
    padding: 4px 14px;
    background: #2a3a20;
    border: 2px solid #4caf50;
    border-radius: 4px;
    color: #4caf50;
    cursor: pointer;
    font-family: var(--game-font);
    font-size: 22px;
    text-shadow: 1px 1px 0 #000;
    transition: all 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brew-btn:hover { background: #3a4a2a; color: #6fcf70; border-color: #6fcf70; }
.brew-btn.disabled { background: var(--bg-panel); border-color: var(--border-primary); color: var(--border-primary); cursor: default; pointer-events: none; }

/* ── Brew Flash Animation ── */
@keyframes brewFlash {
    0% { background: #4a6a30; }
    100% { background: var(--bg-panel); }
}
.brew-recipe-card.flash { animation: brewFlash 0.4s ease-out; }

/* ═══════════════════════════════════════════════════════════════
   Active Potions Panel — HUD (top-right, auto-sizing)
   ═══════════════════════════════════════════════════════════════ */

.active-potions-panel {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    z-index: 10;
    pointer-events: auto;
}

.potion-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 155px;
    height: 62px;
    padding: 4px 8px;
    background: var(--bg-cell);
    border: 2px solid var(--border-primary);
    border-radius: 6px;
    cursor: default;
    position: relative;
    box-sizing: border-box;
}

.potion-row-icon-wrap {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}
.potion-row-icon {
    transform: scale(1.5);
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}

.potion-row-number {
    font-family: var(--game-font);
    font-size: 22px;
    color: var(--text-bright);
    font-weight: 600;
    margin-left: auto;
}

.potion-tt-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 24px;
    text-shadow: 1px 1px 0 #000;
}

.potion-tt-icon {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   Skill Customize - tab content for the GroupOfModals 'skillcustom' tab.
   Renders inside .tab-content; the GoM modal-header is hidden for this
   tab so this wrapper provides its own header + close button.
   Scoped under .skill-custom-tab to avoid GroupOfModals conflicts.
   ═══════════════════════════════════════════════════════════════ */

.skill-custom-tab {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Skill-custom overlay reuses the .modal-close aesthetic but at a
   smaller size and positioned absolutely in the corner. No
   margin-right override needed — this overlay sits inside the GoM
   and doesn't approach the global window-controls. */
.skill-custom-tab .modal-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 36px;
    height: 36px;
    font-size: 24px;
    margin-right: 0;
    z-index: 10;
}
.skill-custom-tab .modal-close:hover { color: var(--text-bright); }

/* ── Header ── */
.skill-custom-tab .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 80px 10px 10px;
    background: var(--bg-dark);
    border-bottom: 2px solid var(--border-primary);
    flex-shrink: 0;
    position: relative;
    z-index: 5;
}

.skill-custom-tab .header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.skill-custom-tab .header-mid-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.skill-custom-tab .header-mid-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.skill-custom-tab .header-icon {
    width: 56px; height: 56px;
    background: var(--bg-cell);
    border: 2px solid var(--text-accent);
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.skill-custom-tab .header-icon img {
    width: 44px; height: 44px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}

.skill-custom-tab .header-info { display: flex; flex-direction: column; gap: 2px; }

.skill-custom-tab .header-name {
    font-size: 36px; color: var(--text-bright);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
    line-height: 1; white-space: nowrap;
}

.skill-custom-tab .header-stats {
    display: flex; gap: 14px;
    font-size: 22px; color: #ffffff;
    text-shadow: 1px 1px 0 #000;
}

.skill-custom-tab .header-right {
    display: flex; flex-direction: column;
    align-items: flex-end; gap: 2px;
    margin-right: 30px;
}

.skill-custom-tab .cred-display {
    font-size: 26px; color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
}
.skill-custom-tab .cred-amount { color: var(--text-bright); }

.skill-custom-tab .tasks-completed-text {
    font-size: 22px; color: #ffffff;
    text-shadow: 1px 1px 0 #000;
}

/* ── Skill Weight Lever (header-mid-left) ── */
.skill-custom-tab .skill-weight-label {
    font-size: 22px; color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
    white-space: nowrap;
}

.skill-custom-tab .lever-control { display: flex; align-items: center; gap: 4px; }

.skill-custom-tab .lever-btn {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-panel);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    color: var(--text-light); cursor: pointer;
    font-family: var(--game-font);
    font-size: 22px; line-height: 1;
    text-shadow: 1px 1px 0 #000;
}
.skill-custom-tab .lever-btn:hover { background: var(--bg-hover); color: var(--text-bright); border-color: var(--text-accent); }

.skill-custom-tab .lever-track { display: flex; gap: 2px; align-items: center; }

.skill-custom-tab .lever-pip {
    width: 14px; height: 14px;
    background: var(--bg-darkest);
    border: 1px solid var(--border-primary);
    border-radius: 2px;
    transition: all 0.15s;
}
.skill-custom-tab .lever-pip.active-pos { background: #4caf50; border-color: #6fcf70; box-shadow: 0 0 4px rgba(76,175,80,0.5); }
.skill-custom-tab .lever-pip.active-neg { background: #e74c3c; border-color: #f06050; box-shadow: 0 0 4px rgba(231,76,60,0.5); }
.skill-custom-tab .lever-pip.center { border-color: var(--text-accent); width: 16px; height: 16px; }

.skill-custom-tab .lever-value {
    font-size: 22px; color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
    width: 30px; text-align: center;
}
.skill-custom-tab .lever-value.positive { color: #4caf50; }
.skill-custom-tab .lever-value.negative { color: #e74c3c; }

.skill-custom-tab .lever-mult {
    font-size: 22px; color: #ffffff;
    text-shadow: 1px 1px 0 #000;
    margin-left: 4px; width: 62px; text-align: center;
}

/* ── Main Content Layout ── */
.skill-custom-tab .main-layout {
    display: flex; flex: 1;
    overflow: hidden;
    padding: 8px; gap: 8px;
}

/* ── History Sidebar ── */
.skill-custom-tab .history-sidebar {
    width: 200px; flex-shrink: 0;
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    display: flex; flex-direction: column;
    overflow: hidden;
}

.skill-custom-tab .history-title {
    font-size: 24px; color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
    padding: 6px 8px; text-align: center;
    border-bottom: 1px solid var(--border-primary);
    background: var(--bg-cell); flex-shrink: 0;
}

.skill-custom-tab .history-stats {
    font-size: 20px; color: #ffffff;
    text-shadow: 1px 1px 0 #000;
    padding: 4px 8px; text-align: center;
    border-bottom: 1px solid var(--bg-panel); flex-shrink: 0;
}

.skill-custom-tab .history-scroll { flex: 1; overflow-y: auto; padding: 4px; }

.skill-custom-tab .history-row {
    display: flex; align-items: center; gap: 4px;
    padding: 3px 4px;
    font-size: 14px; color: var(--text-dim);
    text-shadow: 1px 1px 0 #000;
    border-bottom: 1px solid var(--bg-panel);
}
.skill-custom-tab .history-row:hover { background: var(--bg-cell); }

.skill-custom-tab .history-num { color: var(--text-muted); width: 28px; text-align: right; flex-shrink: 0; font-size: 14px; }
.skill-custom-tab .history-desc { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.skill-custom-tab .history-time { color: var(--text-dark); flex-shrink: 0; font-size: 13px; }

.skill-custom-tab .history-skill-icon {
    width: 16px; height: 16px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
    flex-shrink: 0;
}

/* ── Columns Container ── */
.skill-custom-tab .columns-container { flex: 1; display: flex; gap: 8px; overflow: hidden; }

.skill-custom-tab .column {
    flex: 1;
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    display: flex; flex-direction: column;
    overflow: hidden;
}

.skill-custom-tab .column-header {
    display: flex; align-items: center;
    padding: 6px 8px;
    background: var(--bg-cell);
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
}

.skill-custom-tab .column-title {
    font-size: 24px; color: var(--text-bright);
    text-shadow: 1px 1px 0 #000; flex: 1;
}

.skill-custom-tab .column-subtitle {
    font-size: 22px; color: #ffffff;
    text-shadow: 1px 1px 0 #000;
}

/* ── Sub-headers ── */
.skill-custom-tab .activities-subheader,
.skill-custom-tab .nodes-subheader {
    display: flex; align-items: center;
    padding: 3px 6px;
    border-bottom: 1px solid var(--bg-panel);
    flex-shrink: 0;
    font-size: 20px; color: var(--text-muted);
    text-shadow: 1px 1px 0 #000;
}
.skill-custom-tab .sh-info-section {
    flex: 1; display: flex; align-items: center;
    gap: 6px; min-width: 0; overflow: hidden;
}
.skill-custom-tab .sh-ctrl-section {
    display: flex; align-items: center;
    gap: 2px; flex-shrink: 0;
}
.skill-custom-tab .sh-ctrl-label { margin-left: 10px; width: 78px; text-align: center; flex-shrink: 0; }
.skill-custom-tab .sh-lv { width: 40px; flex-shrink: 0; }
.skill-custom-tab .sh-name { flex: 1; }
.skill-custom-tab .sh-chance { width: 60px; text-align: left; flex-shrink: 0; margin-right: -8px; }
.skill-custom-tab .sh-qty { width: 70px; text-align: left; flex-shrink: 0; margin-right: 4px; }
.skill-custom-tab .sh-location { flex: 1; }
.skill-custom-tab .sh-bank { width: 120px; text-align: left; flex-shrink: 0; padding-left: 10px; }
.skill-custom-tab .sh-dist { width: 70px; text-align: right; flex-shrink: 0; margin-right: 10px; }
.skill-custom-tab .sh-nchance { width: 44px; text-align: center; flex-shrink: 0; margin-right: 8px; }
.skill-custom-tab .sh-sortable { cursor: pointer; user-select: none; }
.skill-custom-tab .sh-sortable:hover { color: var(--text-accent); }

.skill-custom-tab .column-scroll { flex: 1; overflow-y: auto; padding: 2px; }

/* ── Activity Row ── */
.skill-custom-tab .activity-row {
    display: flex; align-items: center;
    padding: 4px 6px;
    border-bottom: 1px solid var(--bg-panel);
    min-height: 38px;
    transition: background 0.1s;
    cursor: pointer;
}
.skill-custom-tab .activity-row:hover { background: var(--bg-cell); }
.skill-custom-tab .activity-row.locked { opacity: 0.4; }
.skill-custom-tab .activity-row.locked:hover { background: var(--bg-cell); }
.skill-custom-tab .activity-row.hl-green { background: #2a3a20; outline: 2px solid #4caf50; outline-offset: -4px; }
.skill-custom-tab .activity-row.hl-red { background: #3a2020; outline: 2px solid #e74c3c; outline-offset: -4px; }
.skill-custom-tab .activity-row.hidden { display: none; }

.skill-custom-tab .activity-info {
    flex: 1; display: flex; align-items: center;
    gap: 6px; min-width: 0; overflow: hidden;
}

.skill-custom-tab .activity-level { font-size: 20px; text-shadow: 1px 1px 0 #000; width: 40px; flex-shrink: 0; }
.skill-custom-tab .activity-level.has { color: #4caf50; }
.skill-custom-tab .activity-level.needs { color: #e74c3c; }

.skill-custom-tab .activity-item-icon {
    width: 22px; height: 22px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
    flex-shrink: 0;
}

.skill-custom-tab .slay-mob-sprite {
    width: 64px; height: 64px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    flex-shrink: 0;
}

.skill-custom-tab .activity-name { font-size: 22px; color: #ffffff; text-shadow: 1px 1px 0 #000; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skill-custom-tab .activity-chance { font-size: 22px; color: var(--text-accent); text-shadow: 1px 1px 0 #000; width: 60px; text-align: right; flex-shrink: 0; }
.skill-custom-tab .activity-qty-range { font-size: 22px; color: #ffffff; text-shadow: 1px 1px 0 #000; width: 95px; text-align: center; flex-shrink: 0; }
.skill-custom-tab .lock-icon { font-size: 16px; color: #e74c3c; margin-right: 4px; }

/* ── Lever Controls in rows ── */
.skill-custom-tab .row-controls { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.skill-custom-tab .control-group { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
.skill-custom-tab .control-emoji { font-size: 18px; margin-right: 2px; }

.skill-custom-tab .ctrl-btn {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-panel);
    border: 1px solid var(--border-primary);
    border-radius: 2px;
    color: var(--text-light); cursor: pointer;
    font-family: var(--game-font);
    font-size: 22px; line-height: 1;
    text-shadow: 1px 1px 0 #000;
    position: relative; white-space: nowrap;
}
.skill-custom-tab .ctrl-btn:hover { background: var(--bg-hover); color: var(--text-bright); border-color: var(--text-accent); }
.skill-custom-tab .ctrl-btn.disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.skill-custom-tab .ctrl-btn.has-value { font-size: 22px; }
.skill-custom-tab .ctrl-btn.val-pos { color: #4caf50; border-color: #4caf50; }
.skill-custom-tab .ctrl-btn.val-neg { color: #e74c3c; border-color: #e74c3c; }

/* ── Global Tooltip (positioned on overlay, escapes overflow containers) ── */
/* Skill-custom credit-button tooltip. Mounted on document.body (NOT
   inside .skill-custom-tab) so its z-index can beat the tutorial
   overlay's highlight ring. SkillCustomModal applies a scale transform
   matching the overlay so it visually aligns with the rest of the UI. */
.ctrl-global-tooltip {
    position: fixed;
    z-index: 99999;
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    padding: 4px 8px;
    white-space: nowrap;
    pointer-events: none;
    font-size: 20px;
    color: var(--text-light);
    text-shadow: 1px 1px 0 #000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.8);
    line-height: 1.4;
}
.ctrl-global-tooltip .tt-action { color: var(--text-bright); }
.ctrl-global-tooltip .tt-effect { color: #ffffff; }
.ctrl-global-tooltip .tt-cost { color: var(--text-accent); }

/* ── Node Row ── */
.skill-custom-tab .node-row {
    display: flex; align-items: center;
    padding: 4px 6px;
    border-bottom: 1px solid var(--bg-panel);
    min-height: 38px;
    transition: background 0.1s;
    cursor: pointer;
}
.skill-custom-tab .node-row:hover { background: var(--bg-cell); }
.skill-custom-tab .node-row.hl-green { background: #2a3a20; outline: 2px solid #4caf50; outline-offset: -2px; }
.skill-custom-tab .node-row.hl-red { background: #3a2020; outline: 2px solid #e74c3c; outline-offset: -2px; }
.skill-custom-tab .node-row.hidden { display: none; }

.skill-custom-tab .node-info {
    flex: 1; display: flex; align-items: center;
    gap: 6px; min-width: 0; overflow: hidden;
}
.skill-custom-tab .node-name { font-size: 22px; color: #ffffff; text-shadow: 1px 1px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.skill-custom-tab .node-bank { font-size: 22px; color: var(--text-muted); text-shadow: 1px 1px 0 #000; white-space: nowrap; width: 120px; flex-shrink: 0; overflow: clip; }
.skill-custom-tab .node-dist { font-size: 22px; color: var(--text-muted); text-shadow: 1px 1px 0 #000; width: 70px; text-align: right; flex-shrink: 0; }
.skill-custom-tab .node-chance { font-size: 22px; color: var(--text-accent); text-shadow: 1px 1px 0 #000; width: 44px; text-align: right; flex-shrink: 0; }

/* ── Scrollbar ── */
.skill-custom-tab .column-scroll::-webkit-scrollbar,
.skill-custom-tab .history-scroll::-webkit-scrollbar { width: 8px; }
.skill-custom-tab .column-scroll::-webkit-scrollbar-track,
.skill-custom-tab .history-scroll::-webkit-scrollbar-track { background: var(--bg-dark); }
.skill-custom-tab .column-scroll::-webkit-scrollbar-thumb,
.skill-custom-tab .history-scroll::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 4px; }

/* ── Unlocks Row (header-mid-right in Individual view) ── */
.skill-custom-tab .unlocks-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Unlock items (shared) ── */
.skill-custom-tab .unlock-item {
    position: relative;
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-cell);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    cursor: default;
}
.skill-custom-tab .unlock-item img {
    transform: scale(1.5);
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}
.skill-custom-tab .unlock-item.locked { opacity: 0.3; }
.skill-custom-tab .unlock-item.unlocked { border-color: var(--text-accent); }
.skill-custom-tab .unlock-item.selected { border-color: var(--text-bright); cursor: pointer; }
.skill-custom-tab .unlock-item.unlocked.pet-selectable { cursor: pointer; }

.skill-custom-tab .unlock-tooltip {
    display: none;
    pointer-events: none;
}

.global-tooltip.unlock-style {
    font-size: 24px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
}

/* ══════════════════════════════════════════════════════════════
   TOTAL VIEW — Section A (Unlocks Grid) & Section B (Skill Columns)
   ══════════════════════════════════════════════════════════════ */

.skill-custom-tab .total-content {
    flex: 1; display: flex; flex-direction: column;
    gap: 8px; overflow: hidden;
}

/* Section A: Unlocks Grid */
.skill-custom-tab .unlocks-grid-section {
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    flex-shrink: 0;
}

.skill-custom-tab .unlocks-grid-header {
    display: flex; align-items: center;
    padding: 4px 8px;
    background: var(--bg-cell);
    border-bottom: 1px solid var(--border-primary);
}

.skill-custom-tab .unlocks-grid-title {
    font-size: 30px; color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
}

.skill-custom-tab .unlocks-grid {
    display: grid;
    grid-template-columns: repeat(29, 56px);
    gap: 2px; padding: 6px;
    justify-content: center;
}

.skill-custom-tab .grid-skill-header {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-panel);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    position: relative;
}
.skill-custom-tab .grid-skill-header.clickable { cursor: pointer; }
.skill-custom-tab .grid-skill-header.clickable:hover { border-color: var(--text-accent); background: var(--bg-cell); }
.skill-custom-tab .unlock-item.clickable { cursor: pointer; }
.skill-custom-tab .unlock-item.clickable:hover { border-color: var(--text-accent); }
.skill-custom-tab .skill-weight-row.clickable { cursor: pointer; }

.skill-custom-tab .grid-skill-header img {
    transform: scale(1.5);
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}

/* Section B: Skill Weighting Columns */
.skill-custom-tab .skill-columns-section {
    flex: 1;
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    display: flex; flex-direction: column;
    overflow: hidden;
}

.skill-custom-tab .skill-columns-header {
    display: flex; align-items: center;
    padding: 4px 8px;
    background: var(--bg-cell);
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
}

.skill-custom-tab .skill-columns-title {
    font-size: 30px; color: var(--text-bright);
    text-shadow: 1px 1px 0 #000; flex: 1;
}

.skill-custom-tab .skill-columns-subtitle {
    font-size: 20px; color: #ffffff;
    text-shadow: 1px 1px 0 #000;
}

.skill-custom-tab .skill-columns-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 6px; flex: 1;
    overflow: hidden; padding: 6px;
}

.skill-custom-tab .skill-col {
    display: flex; flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--bg-panel);
    border-radius: 3px;
}

.skill-custom-tab .skill-col-header {
    display: flex; align-items: center;
    padding: 3px 6px;
    border-bottom: 1px solid var(--bg-panel);
    font-size: 18px; color: var(--text-muted);
    text-shadow: 1px 1px 0 #000;
    background: var(--bg-panel);
    flex-shrink: 0;
}

.skill-custom-tab .sch-lv { width: 68px; flex-shrink: 0; }
.skill-custom-tab .sch-skill { flex: 1; }
.skill-custom-tab .sch-pct { width: 40px; text-align: center; flex-shrink: 0; margin-right: 4px; }
.skill-custom-tab .sch-weight { width: 100px; text-align: center; flex-shrink: 0; }

.skill-custom-tab .skill-col-body { flex: 1; overflow-y: auto; }

.skill-custom-tab .skill-weight-row {
    display: flex; align-items: center;
    padding: 3px 6px;
    border-bottom: 1px solid var(--bg-panel);
    min-height: 34px;
}
.skill-custom-tab .skill-weight-row:hover { background: var(--bg-cell); }
.skill-custom-tab .skill-weight-row.non-rollable { opacity: 0.7; }

.skill-custom-tab .swr-level {
    font-size: 30px; color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
    width: 68px; flex-shrink: 0;
}

.skill-custom-tab .swr-skill {
    flex: 1; display: flex; align-items: center; gap: 4px;
    min-width: 0; overflow: hidden;
}

.skill-custom-tab .swr-skill-icon {
    width: 36px; height: 36px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
    flex-shrink: 0;
}

.skill-custom-tab .swr-skill-name {
    font-size: 30px; color: #ffffff;
    text-shadow: 1px 1px 0 #000;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.skill-custom-tab .swr-pct {
    font-size: 28px; color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
    width: 40px; text-align: right; flex-shrink: 0; margin-right: 6px;
}

.skill-custom-tab .swr-weight {
    width: 100px;
    display: flex; align-items: center; justify-content: center;
    gap: 2px; flex-shrink: 0;
}

.skill-custom-tab .swr-weight .ctrl-btn {
    width: 36px; height: 36px;
    font-size: 24px;
}

/* ═══════════════════════════════════════════════════════════════
   Processing Modal — Tab 3: Smith / Craft / Imbue
   Equipment crafting from processed materials.
   ═══════════════════════════════════════════════════════════════ */

/* ── Layout wrapper ── */
.proc-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Main Layout ── */
.proc-main-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
    padding: 8px;
    gap: 8px;
}

/* ── Tier Sidebar ── */
.proc-tier-sidebar {
    width: 300px;
    flex-shrink: 0;
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.proc-tier-sidebar-title {
    font-size: 24px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
    padding: 6px 8px;
    text-align: center;
    border-bottom: 1px solid var(--border-primary);
    background: var(--bg-cell);
    flex-shrink: 0;
}

.proc-tier-sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 4px;
}

.proc-tier-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--bg-panel);
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.1s;
}
.proc-tier-row:hover { background: var(--bg-cell); }
.proc-tier-row.active { background: var(--bg-cell); outline: 2px solid var(--text-accent); outline-offset: -2px; }
.proc-tier-row.locked { opacity: 0.35; }

.proc-tier-badge {
    font-size: 18px;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}

/* Tier sidebar material icon — inv-slot sized for sidebar */
.proc-tier-mat-icon.inv-slot {
    width: 36px; height: 36px;
    background: none;
    border-color: transparent;
    flex-shrink: 0;
}

.proc-tier-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.proc-tier-mat-name {
    font-size: 20px;
    color: #ffffff;
    text-shadow: 1px 1px 0 #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.proc-tier-level {
    font-size: 16px;
    text-shadow: 1px 1px 0 #000;
}
.proc-tier-level.has { color: #4caf50; }
.proc-tier-level.needs { color: #e74c3c; }

.proc-tier-bank-qty {
    font-size: 20px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
    flex-shrink: 0;
    text-align: right;
    min-width: 40px;
}

.proc-lock-icon { font-size: 14px; color: #e74c3c; }

/* ── Recipes Area ── */
.proc-recipes-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.proc-recipes-header {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 4px 4px 0 0;
    flex-shrink: 0;
    gap: 10px;
}

.proc-recipes-material-display {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg-panel);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    height: 56px;
}
/* Material inv-slot in recipes header */
.proc-mat-slot.inv-slot {
    width: 56px; height: 56px;
    flex-shrink: 0;
}
.proc-recipes-material-display .proc-mat-label {
    font-size: 22px;
    color: #ffffff;
    text-shadow: 1px 1px 0 #000;
}
.proc-recipes-material-display .proc-mat-bank {
    font-size: 22px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
}

/* ── Craft Amount Control ── */
.proc-amount-control {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg-panel);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    height: 56px;
}
.proc-amount-label {
    font-size: 22px;
    color: var(--text-muted);
    text-shadow: 1px 1px 0 #000;
    white-space: nowrap;
}
.proc-amount-input {
    width: 3ch;
    max-width: 500px;
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    color: var(--text-bright);
    font-family: var(--game-font);
    font-size: 22px;
    text-align: center;
    padding: 2px 8px;
    text-shadow: 1px 1px 0 #000;
    outline: none;
}
.proc-amount-input:focus { border-color: var(--text-accent); }
.proc-amount-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.proc-amount-input[type=number] { -moz-appearance: textfield; }

.proc-amount-max-btn {
    padding: 2px 10px;
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    color: var(--text-light);
    font-family: var(--game-font);
    font-size: 22px;
    cursor: pointer;
    text-shadow: 1px 1px 0 #000;
    transition: all 0.15s;
}
.proc-amount-max-btn:hover { border-color: var(--text-accent); color: var(--text-bright); }
.proc-amount-max-btn.active { background: rgba(200, 168, 62, 0.2); border-color: var(--text-accent); color: var(--text-accent); }

.proc-amount-reset-btn {
    padding: 2px 10px;
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    color: var(--text-light);
    font-family: var(--game-font);
    font-size: 22px;
    cursor: pointer;
    text-shadow: 1px 1px 0 #000;
    transition: all 0.15s;
}
.proc-amount-reset-btn:hover { border-color: var(--text-accent); color: var(--text-bright); }

.proc-recipes-grid-scroll {
    flex: 1;
    overflow-y: auto;
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-top: none;
    border-radius: 0 0 4px 4px;
    padding: 10px;
}

.proc-recipes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}

/* ── Recipe Card ── */
.proc-recipe-card {
    background: var(--bg-panel);
    border: 2px solid var(--border-primary);
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.15s;
    height: 232px;
    width: 242px;
}
.proc-recipe-card:hover { border-color: var(--border-secondary); }
.proc-recipe-card.craftable { border-color: #4caf50; }
.proc-recipe-card.craftable:hover { border-color: #6fcf70; }

.proc-recipe-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Processing recipe item slots — borderless, integrated into card */
.proc-recipe-card .inv-slot {
    background: none;
    border-color: transparent;
    flex-shrink: 0;
}

.proc-recipe-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.proc-recipe-item-name {
    font-size: 22px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.proc-recipe-slot-label {
    font-size: 16px;
    color: var(--text-muted);
    text-shadow: 1px 1px 0 #000;
}

.proc-recipe-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 0 2px 0;
    border-top: 1px solid var(--bg-cell);
}

.proc-recipe-detail-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    font-size: 22px;
    text-shadow: 1px 1px 0 #000;
}

/* Cost inv-slot in recipe card detail row */
.proc-cost-slot.inv-slot {
    width: 56px; height: 56px;
}

.proc-gem-cost-slot.inv-slot {
    margin-left: -50px;
}
.proc-gem-cost-slot-tight.inv-slot {
    margin-left: -51px;
}
.proc-cost-plus {
    color: #aaa;
    font-size: 20px;
    text-shadow: 1px 1px 0 #000;
    align-self: center;
}
.proc-detail-value { color: #ffffff; overflow-x: hidden; }
.proc-detail-xp { color: var(--text-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.proc-craft-btn {
    padding: 4px 14px;
    background: #2a3a20;
    border: 2px solid #4caf50;
    border-radius: 4px;
    color: #4caf50;
    cursor: pointer;
    font-family: var(--game-font);
    font-size: 22px;
    text-shadow: 1px 1px 0 #000;
    transition: all 0.15s;
    white-space: nowrap;
    overflow-x: clip;
}
.proc-craft-btn:hover { background: #3a4a2a; color: #6fcf70; border-color: #6fcf70; }
.proc-craft-btn.disabled { background: var(--bg-panel); border-color: var(--border-primary); color: var(--border-primary); cursor: default; pointer-events: none; }

/* ── Scrollbar ── */
.proc-tier-sidebar-scroll::-webkit-scrollbar,
.proc-recipes-grid-scroll::-webkit-scrollbar { width: 8px; }
.proc-tier-sidebar-scroll::-webkit-scrollbar-track,
.proc-recipes-grid-scroll::-webkit-scrollbar-track { background: var(--bg-dark); }
.proc-tier-sidebar-scroll::-webkit-scrollbar-thumb,
.proc-recipes-grid-scroll::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 4px; }

/* ── Craft Flash ── */
@keyframes procCraftFlash {
    0% { background: #4a6a30; }
    100% { background: var(--bg-panel); }
}
.proc-recipe-card.flash { animation: procCraftFlash 0.4s ease-out; }

/* ══════════════════════════════════════════════════════════════════
   MOB SELECTION MODAL (Tab 2 — Layer 13B)
   ══════════════════════════════════════════════════════════════════ */

.mob-layout {
    flex: 1;
    display: flex;
    gap: 0;
    overflow: hidden;
}

/* ── Mob List (Left Side) ── */
.mob-list-side {
    width: 390px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 2px solid var(--border-primary);
}

.mob-list-toolbar {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-primary);
    gap: 8px;
    flex-shrink: 0;
}

.mob-search {
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    padding: 4px 8px;
    font-family: var(--game-font);
    font-size: 20px;
    color: var(--text-bright);
    width: 180px;
    outline: none;
}
.mob-search::placeholder { color: var(--border-primary); }
.mob-search:focus { border-color: var(--text-accent); }

.mob-filter-btn {
    padding: 4px 10px;
    background: var(--bg-panel);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    color: var(--text-light);
    cursor: pointer;
    font-family: var(--game-font);
    font-size: 18px;
    text-shadow: 1px 1px 0 #000;
}
.mob-filter-btn:hover { background: var(--bg-cell); color: var(--text-bright); border-color: var(--text-accent); }
.mob-filter-btn.active { color: var(--text-bright); border-color: var(--text-accent); background: var(--bg-cell); }

/* ── Mob List Sub-header ── */
.mob-list-subheader {
    display: flex;
    align-items: center;
    padding: 3px 8px;
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
    font-size: 18px;
    color: var(--text-muted);
    text-shadow: 1px 1px 0 #000;
    background: var(--bg-panel);
}
.mlsh-icon { width: 64px; flex-shrink: 0; text-align: center; }
.mlsh-name { flex: 1; padding-left: 4px; }

/* ── Mob List Scroll ── */
.mob-list-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 2px;
}

/* ── Mob Row ── */
.mob-row {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border-bottom: 1px solid var(--bg-panel);
    min-height: 72px;
    cursor: pointer;
    transition: background 0.1s;
}
.mob-row:hover { background: var(--bg-cell); }
.mob-row.selected { background: #2a3a20; outline: 2px solid #4caf50; outline-offset: -2px; }
.mob-row.locked { opacity: 0.4; }
.mob-row.locked:hover { background: #3a2020; }

.mob-row-icon {
    width: 128px;
    height: 128px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-cell);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
}
.mob-row.selected .mob-row-icon { border-color: #4caf50; }
.mob-row-icon img, .mob-row-icon canvas {
    width: 128px;
    height: 128px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter: drop-shadow(1px 1px 0 #000);
}

.mob-row-name {
    flex: 1;
    padding-left: 8px;
    overflow: hidden;
    min-width: 0;
}

.mob-row-name-text {
    font-size: 24px;
    color: #ffffff;
    text-shadow: 1px 1px 0 #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mob-row-level {
    font-size: 20px;
    color: var(--text-dim);
    text-shadow: 1px 1px 0 #000;
    margin-top: 2px;
}

.lock-icon { font-size: 16px; color: #e74c3c; margin-right: 2px; }

/* ── Detail Side (Right) ── */
.mob-detail-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mob-detail-top {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* ── Mob Info Panel ── */
.mob-info-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 12px 16px;
    gap: 10px;
}

/* ── Encounter Header ── */
.mob-encounter-name {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
    line-height: 1;
    margin-bottom: 4px;
}

.mob-encounter-level {
    font-size: 20px;
    color: var(--text-dim);
    text-shadow: 1px 1px 0 #000;
    margin-bottom: 8px;
}

/* ── Mob Unit Row (clickable portraits) ── */
.mob-unit-row {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
    height: 180px;
}
.mob-unit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    border: 2px solid var(--border-primary);
    transition: border-color 0.15s;
    width: 128px;
    height: 128px;
}
.mob-unit-item:hover {
    border-color: var(--text-accent);
}
.mob-unit-item.active {
    border-color: var(--text-bright);
    background: rgba(58, 50, 38, 0.5);
}
.mob-unit-item canvas {
    width: 128px;
    height: 128px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter: drop-shadow(2px 2px 0 #000);
}
.mob-unit-name {
    font-size: 16px;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
    margin-top: 2px;
    text-align: center;
}
.mob-unit-level {
    font-size: 13px;
    color: var(--text-muted);
    text-shadow: 1px 1px 0 #000;
    text-align: center;
}

.mob-info-meta {
    display: flex;
    gap: 14px;
    font-size: 22px;
    color: var(--text-light);
    text-shadow: 1px 1px 0 #000;
}
.mob-info-meta .val-red { color: #ff4444; }
.mob-info-meta .val-gold { color: var(--text-accent); }
.mob-info-meta .val-green { color: #88cc88; }
.mob-info-meta .val-blue { color: #66aaff; }

/* ── Mob Combat Stats Table ── */
.mob-stats-section {
    flex: 1;
    overflow-y: auto;
}

.mob-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 20px;
    text-shadow: 1px 1px 0 #000;
}

.mob-stats-table th {
    color: var(--text-accent);
    font-weight: normal;
    padding: 3px 8px;
    text-align: center;
    border-bottom: 1px solid var(--bg-cell);
    background: var(--bg-panel);
}
.mob-stats-table th:first-child { text-align: left; width: 80px; }

.mob-stats-table td {
    padding: 2px 8px;
    text-align: center;
    color: var(--text-light);
    border-bottom: 1px solid var(--bg-panel);
}
.mob-stats-table td:first-child { text-align: left; color: var(--text-muted); }

.mob-stats-table .stat-pos { color: #4caf50; }
.mob-stats-table .stat-zero { color: var(--border-primary); }

.stat-section-label {
    font-size: 22px;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
    margin-top: 8px;
    margin-bottom: 2px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--bg-cell);
}

/* ── Mob Detail: Panel Header + Derived Grid + Two-Column Layout ── */
.mob-panel-header { text-align: center; margin-bottom: 6px; }
.mob-panel-name { font-size: 28px; font-weight: 700; color: var(--text-bright); text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6); }
.mob-panel-level { font-size: 22px; color: #ffffff; text-shadow: 1px 1px 0 #000; }

.mob-derived-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 6px;
    margin-bottom: 10px;
}
.mob-derived-item {
    background: var(--bg-cell);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    padding: 6px 5px;
    text-align: center;
}
.mob-derived-label {
    font-size: 16px;
    color: var(--text-bright);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    text-shadow: 1px 1px 0 #000;
    margin-bottom: 2px;
}
.mob-derived-value {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 1px 1px 0 #000;
}

.mob-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    margin-bottom: 10px;
}

.mob-section-header {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin: 0 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--bg-cell);
}

/* Skill grid (left column) */
.mob-skill-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 10px;
}
.mob-skill-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 5px;
    border-radius: 3px;
}
.mob-skill-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}
.mob-skill-name {
    font-size: 20px;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
    flex: 1;
}
.mob-skill-val {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
    min-width: 28px;
    text-align: right;
}

/* Equipment bonuses (right column) — table layout, visually matched to Combat Skills */
.mob-col-right {
    min-width: 0;
}
.mob-equip-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 20px;
    text-shadow: 1px 1px 0 #000;
}
/* Header row: match .mob-section-header style
   padding-bottom 10px + first td padding-top 4px = 14px gap,
   matching section-header's 4px pad + 1px border + 6px margin + 3px row pad */
.mob-equip-table th {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 0 5px 10px;
    border-bottom: 1px solid var(--bg-cell);
    text-align: center;
}
.mob-equip-table th:first-child {
    text-align: left;
    width: 100px;
}
/* Data rows: match .mob-skill-row spacing
   4px top + 4px bottom = 8px between rows, matching grid gap 2px + 3px pad each side */
.mob-equip-table td {
    padding: 4px 5px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
}
/* Label cell: match .mob-skill-name */
.mob-equip-table td:first-child {
    text-align: left;
    font-weight: normal;
    color: var(--text-accent);
    width: 120px;
}
.mob-equip-table .stat-pos { color: #4caf50; }
.mob-equip-table .stat-zero { color: var(--border-primary); }
.mob-equip-table .stat-neg { color: #ff4444; }
/* Strength cell: label left, value right */
.mob-equip-table .str-cell {
    text-align: left;
    font-weight: normal;
    color: var(--text-light);
}
.mob-equip-table .str-label { color: var(--text-accent); }
.mob-equip-table .str-val {
    float: right;
    font-weight: 600;
}
/* Icon inside label cell: 32×32 matching .mob-skill-icon */
.mob-equip-table .mob-equip-icon-wrap {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    margin-right: 6px;
}
.mob-equip-table .mob-equip-icon-wrap img {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}

/* ── Loot Table Preview ── */
.loot-section {
    border-top: 1px solid var(--border-primary);
    padding-top: 8px;
}

.loot-label {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin: 0 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--bg-cell);
}

.loot-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 20px;
    text-shadow: 1px 1px 0 #000;
}
.loot-table th {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 0 5px 8px;
    border-bottom: 1px solid var(--bg-cell);
    text-align: left;
}
.loot-table th:nth-child(3),
.loot-table th:nth-child(4) {
    text-align: center;
}
.loot-table td {
    padding: 3px 5px;
    font-size: 20px;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
    vertical-align: middle;
}
.loot-table td:nth-child(3),
.loot-table td:nth-child(4) {
    text-align: center;
    font-weight: 600;
}
/* Item icon cell */
.loot-table .loot-item-cell {
    width: 56px;
    padding: 2px;
}
.loot-table .loot-item-cell .inv-slot {
    width: 48px;
    height: 48px;
    background: var(--bg-cell);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
}
.loot-table .loot-item-cell .inv-slot img {
    transform: none;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}
.loot-table .loot-item-cell .inv-qty {
    font-size: 18px;
}
/* Name cell */
.loot-table .loot-name-cell {
    font-weight: normal;
    color: var(--text-accent);
}
/* Drop rate coloring */
.loot-table .loot-rate-cell {
    color: var(--text-light);
}

/* ── Right Config Panel ── */
.mob-config-panel {
    width: 444px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-left: 2px solid var(--border-primary);
}

.config-section {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-primary);
}

.config-label {
    font-size: 24px;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
    margin-bottom: 6px;
    text-align: center;
}

.loadout-buttons {
    display: flex;
    gap: 4px;
}

.loadout-btn {
    flex: 1;
    padding: 6px 4px;
    text-align: center;
    font-family: var(--game-font);
    font-size: 20px;
    color: var(--text-muted);
    text-shadow: 1px 1px 0 #000;
    cursor: pointer;
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    background: var(--bg-panel);
    transition: all 0.1s;
}
.loadout-btn:hover { background: var(--bg-cell); color: var(--text-light); }
.loadout-btn.active {
    color: var(--text-bright);
    border-color: var(--text-accent);
    background: var(--bg-cell);
}
.loadout-btn .style-icon { font-size: 18px; margin-right: 2px; }

.loadout-btn-icon {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
    vertical-align: middle;
    margin-right: 4px;
}

/* ── Paperdoll Grid (3×5, matches bank modal) ── */
.mob-config-panel .paperdoll {
    display: grid;
    grid-template-columns: repeat(3, 73px);
    grid-template-rows: repeat(5, 57px);
    gap: 4px;
    justify-content: center;
    align-content: center;
    margin-top: 8px;
}

.mob-config-panel .paperdoll .inv-slot {
    width: 56px;
    height: 56px;
    background: var(--bg-cell);
    border-color: var(--border-primary);
}
.mob-config-panel .paperdoll .inv-slot:hover { border-color: var(--text-accent); background: var(--bg-hover); }
.mob-config-panel .paperdoll .inv-slot:not(.empty) { border-color: var(--border-secondary); }
.mob-config-panel .paperdoll .inv-slot:not(.empty):hover { border-color: var(--text-accent); }
.mob-config-panel .paperdoll .inv-slot.empty { background: var(--bg-panel); }

.mob-config-panel .paperdoll .inv-slot img {
    transform: scale(1.5);
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}

/* Silhouette for empty slots */
.mob-config-panel .paperdoll .equip-silhouette {
    opacity: 0.5;
    transform: scale(1.5);
}
.mob-config-panel .paperdoll .inv-slot:not(.empty) .equip-silhouette { display: none; }

/* Paperdoll grid positions */
.mob-config-panel .slot-head     { grid-column: 2; grid-row: 1; }
.mob-config-panel .slot-cape     { grid-column: 1; grid-row: 2; }
.mob-config-panel .slot-neck     { grid-column: 2; grid-row: 2; }
.mob-config-panel .slot-ammo     { grid-column: 3; grid-row: 2; }
.mob-config-panel .slot-mainhand { grid-column: 1; grid-row: 3; }
.mob-config-panel .slot-body     { grid-column: 2; grid-row: 3; }
.mob-config-panel .slot-offhand  { grid-column: 3; grid-row: 3; }
.mob-config-panel .slot-hands    { grid-column: 1; grid-row: 4; }
.mob-config-panel .slot-belt     { grid-column: 2; grid-row: 4; }
.mob-config-panel .slot-ring1    { grid-column: 1; grid-row: 5; }
.mob-config-panel .slot-legs     { grid-column: 2; grid-row: 5; }
.mob-config-panel .slot-ring2    { grid-column: 3; grid-row: 5; }

/* ── Equipment Stats Panel ── */
.mob-config-panel .equip-stats-panel {
    background: var(--bg-dark);
    border-top: 1px solid var(--border-primary);
    padding: 8px 14px 10px;
}

.mob-config-panel .stats-weapon-line {
    text-align: center;
    font-size: 24px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
}

.mob-config-panel .stats-style-line {
    text-align: center;
    font-size: 22px;
    color: var(--text-light);
    text-shadow: 1px 1px 0 #000;
    margin-bottom: 4px;
}
.mob-config-panel .stats-style-line .style-val { color: var(--text-accent); }
.mob-config-panel .stats-style-line .speed-val { color: #88cc88; }
.mob-config-panel .stats-style-line .maxhit-val { color: #ff4444; }

.mob-config-panel .stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 20px;
    text-shadow: 1px 1px 0 #000;
}
.mob-config-panel .stats-table th {
    color: var(--text-accent);
    font-weight: normal;
    padding: 2px 6px;
    text-align: center;
    border-bottom: 1px solid var(--bg-cell);
}
.mob-config-panel .stats-table th:first-child { text-align: left; width: 70px; }
.mob-config-panel .stats-table td {
    padding: 1px 6px;
    text-align: center;
    color: var(--text-light);
}
.mob-config-panel .stats-table td:first-child { text-align: left; color: var(--text-accent); width: 100px; }
.mob-config-panel .stats-table .stat-pos { color: #4caf50; }
.mob-config-panel .stats-table .stat-zero { color: var(--border-primary); }
.mob-config-panel .stats-table .stat-neg { color: #ff4444; }
.mob-config-panel .stats-table .str-cell { display: flex; justify-content: space-between; color: var(--text-light); }
.mob-config-panel .stats-table .str-label { color: var(--text-muted); }

/* ── XP Toggle ── */
.xp-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.xp-toggle-btn {
    flex: 1;
    padding: 0px 4px;
    text-align: center;
    font-family: var(--game-font);
    font-size: 22px;
    color: var(--text-muted);
    text-shadow: 1px 1px 0 #000;
    cursor: pointer;
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    background: var(--bg-panel);
    transition: all 0.1s;
    height: 38px;
}
.xp-toggle-btn:hover { background: var(--bg-cell); color: var(--text-light); }
.xp-toggle-btn.active {
    color: var(--text-bright);
    border-color: var(--text-accent);
    background: var(--bg-cell);
}

.xp-toggle-icon {
    width: 24px;
    height: 24px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
    vertical-align: middle;
    margin-right: 4px;
}

/* ── Potion Display ── */
.potion-display {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.potion-icon {
    transform: scale(1.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.potion-icon img {
    width: 28px;
    height: 28px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}

.potion-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.potion-name {
    font-size: 20px;
    color: #ffffff;
    text-shadow: 1px 1px 0 #000;
    line-height: 1;
}

.potion-effect {
    font-size: 16px;
    color: #4caf50;
    text-shadow: 1px 1px 0 #000;
    line-height: 1;
}

.potion-remaining {
    font-size: 20px;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
    flex-shrink: 0;
}

.potion-inactive {
    font-size: 18px;
    color: var(--border-primary);
    text-shadow: 1px 1px 0 #000;
    text-align: center;
    padding: 4px;
}

/* ── Fight Button ── */
.fight-section {
    margin-top: auto;
    padding: 12px 14px;
    border-top: 2px solid var(--border-primary);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fight-btn {
    width: 100%;
    height: 52px;
    font-family: var(--game-font);
    font-size: 32px;
    color: var(--text-bright);
    text-shadow: 2px 2px 0 #000;
    background: linear-gradient(180deg, #4a6a2a 0%, #3a5a1a 100%);
    border: 2px solid #6a8a3a;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}
.fight-btn:hover { background: linear-gradient(180deg, #5a7a3a 0%, #4a6a2a 100%); border-color: #8aaa5a; }
.fight-btn:active { background: linear-gradient(180deg, #3a5a1a 0%, #2a4a0a 100%); }
.fight-btn.disabled {
    background: linear-gradient(180deg, #3a2020 0%, #2a1515 100%);
    border-color: #5a3030;
    color: #884444;
    cursor: not-allowed;
}

.fight-warning {
    font-size: 18px;
    color: #e74c3c;
    text-shadow: 1px 1px 0 #000;
    text-align: center;
}

/* ── No Selection Placeholder ── */
.no-selection {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
}
.no-selection-icon { font-size: 80px; opacity: 0.3; }
.no-selection-text {
    font-size: 28px;
    color: var(--border-primary);
    text-shadow: 1px 1px 0 #000;
}

/* ── Mob Selection Scrollbars ── */
.mob-stats-section {
    scrollbar-width: none;
}
.mob-stats-section::-webkit-scrollbar { display: none; }
.mob-list-scroll::-webkit-scrollbar,
.mob-config-panel::-webkit-scrollbar { width: 8px; }
.mob-list-scroll::-webkit-scrollbar-track,
.mob-config-panel::-webkit-scrollbar-track { background: var(--bg-dark); }
.mob-list-scroll::-webkit-scrollbar-thumb,
.mob-config-panel::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 4px; }

/* ═══════════════════════════════════════════════════════════════
   COMBAT ENCOUNTER — Floating Side Panels (Reworked)
   No longer a full-screen overlay. Panels float at screen edges,
   triggered by clicking units in the world via CombatWorldRenderer.
   All sprites, bars, and hitsplats are canvas-drawn.
   ═══════════════════════════════════════════════════════════════ */

.combat-encounter {
    position: absolute;
    inset: 0;
    z-index: 150;
    font-family: var(--game-font);
    color: #ffffff;
    transition: opacity 0.4s ease;
    pointer-events: none;
    /* NO background, NO backdrop */
}
.combat-encounter.fade-out { opacity: 0; pointer-events: none; }

/* Panel Wrappers — floating side panels */
.combat-encounter .panel-wrapper {
    width: 400px;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.combat-encounter .panel-wrapper.player-side {
    left: 0;
    pointer-events: auto;
}
.combat-encounter .panel-wrapper.mob-side {
    right: 0;
    pointer-events: auto;
}

/* Tab Bar (on panel wrappers) */
.combat-encounter .panel-tab-bar {
    display: none;
    flex-direction: column;
    gap: 4px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: auto;
    height: 76px;
    width: 38px;
}
.combat-encounter .panel-tab-bar.visible { display: flex; }
.combat-encounter .panel-tab-bar.player-tabs { right: -38px; }
.combat-encounter .panel-tab-bar.mob-tabs { left: -38px; }

.combat-encounter .panel-tab {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    background: var(--bg-dark);
    border: 2px solid var(--bg-cell);
    border-radius: 6px;
    transition: all 0.15s;
    user-select: none;
    padding: 0;
}
.combat-encounter .panel-tab:hover { background: var(--bg-panel); border-color: var(--border-secondary); }
.combat-encounter .panel-tab.active {
    background: var(--bg-panel);
    border-color: var(--text-accent);
    box-shadow: 0 0 8px rgba(200,168,62,0.2);
}

/* Stat Panel */
.combat-encounter .combat-panel {
    width: 400px;
    background: var(--bg-panel);
    border: 2px solid var(--border-primary);
    border-radius: 6px;
    box-shadow: 0 0 40px rgba(0,0,0,0.7), inset 0 1px 0 rgba(200,168,62,0.08);
    display: flex;
    flex-direction: column;
    padding: 14px;
    pointer-events: auto;
    height: 640px;
    overflow-y: auto;
    transition: height 0.3s ease, padding 0.3s ease, opacity 0.25s ease;
}
.combat-encounter .combat-panel.panel-hidden {
    height: 0;
    padding: 0 14px;
    overflow: hidden;
    opacity: 0;
    border-width: 0;
    box-shadow: none;
    pointer-events: none;
}
.combat-encounter .combat-panel.panel-dead {
    border-color: #cc3333;
    box-shadow: 0 0 40px rgba(0,0,0,0.7), inset 0 1px 0 rgba(204,51,51,0.08);
}
.combat-encounter .combat-panel::-webkit-scrollbar { width: 5px; }
.combat-encounter .combat-panel::-webkit-scrollbar-track { background: var(--bg-panel); }
.combat-encounter .combat-panel::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 3px; }

.combat-encounter .panel-content { display: none; }
.combat-encounter .panel-content.active { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.combat-encounter .panel-content > .equip-stats-panel { margin-top: auto; }

/* Panel Header */
.combat-encounter .panel-header { text-align: center; margin-bottom: 8px; }
.combat-encounter .panel-name { font-size: 20px; font-weight: 700; color: var(--text-bright); text-shadow: 1px 1px 0 #000; }
.combat-encounter .panel-name.dead-name { color: #ff6666; text-decoration: line-through; opacity: 0.7; }
.combat-encounter .panel-level { font-size: 18px; color: #ffffff; text-shadow: 1px 1px 0 #000; }

.combat-encounter .section-header {
    font-size: 14px; font-weight: 700; color: var(--text-bright);
    text-shadow: 1px 1px 0 #000; text-transform: uppercase;
    letter-spacing: 1.2px; margin: 12px 0 6px; padding-bottom: 4px;
    border-bottom: 1px solid var(--bg-cell);
}

/* Derived Grid */
.combat-encounter .derived-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 5px; margin-bottom: 8px; }
.combat-encounter .derived-item { background: var(--bg-cell); border: 1px solid var(--border-primary); border-radius: 3px; padding: 5px 4px; text-align: center; }
.combat-encounter .derived-label { font-size: 10px; color: var(--text-bright); text-transform: uppercase; letter-spacing: 0.6px; text-shadow: 1px 1px 0 #000; margin-bottom: 2px; }
.combat-encounter .derived-value { font-size: 18px; font-weight: 700; color: #ffffff; text-shadow: 1px 1px 0 #000; }

/* Skill Grid */
.combat-encounter .skill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.combat-encounter .skill-row { display: flex; align-items: center; gap: 6px; padding: 3px 5px; border-radius: 3px; border: 1px solid transparent; }
.combat-encounter .skill-icon { width: 32px; height: 32px; flex-shrink: 0; image-rendering: pixelated; filter: drop-shadow(1px 1px 0 #000); }
.combat-encounter .skill-name { font-size: 14px; color: var(--text-accent); text-shadow: 1px 1px 0 #000; flex: 1; }
.combat-encounter .skill-val { font-size: 16px; font-weight: 600; color: var(--text-accent); text-shadow: 1px 1px 0 #000; min-width: 24px; text-align: right; }

.combat-encounter .skill-row.selectable { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.combat-encounter .skill-row.selectable:hover { border-color: var(--border-secondary); background: rgba(200,168,62,0.06); }
.combat-encounter .skill-row.selectable.chosen { border-color: var(--text-accent); background: rgba(200,168,62,0.12); }
.combat-encounter .skill-row.selectable.chosen .skill-name,
.combat-encounter .skill-row.selectable.chosen .skill-val { color: var(--text-bright); }


/* Equipment Stats Panel (inside combat encounter stats tab) */
.combat-encounter .equip-stats-panel {
    background: none;
    border-top: 2px solid var(--border-primary);
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}
.combat-encounter .equip-stats-panel .stats-weapon-line {
    text-align: center;
    font-size: 16px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
}
.combat-encounter .equip-stats-panel .stats-style-line {
    text-align: center;
    font-size: 14px;
    color: var(--text-light);
    text-shadow: 1px 1px 0 #000;
    margin-bottom: 2px;
}
.combat-encounter .equip-stats-panel .stats-style-line .style-val { color: var(--text-accent); }
.combat-encounter .equip-stats-panel .stats-style-line .speed-val { color: #88cc88; }
.combat-encounter .equip-stats-panel .stats-style-line .maxhit-val { color: #ff6644; }
.combat-encounter .equip-stats-panel .stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    text-shadow: 1px 1px 0 #000;
}
.combat-encounter .equip-stats-panel .stats-table th {
    color: var(--text-accent);
    font-weight: normal;
    padding: 1px 4px;
    text-align: center;
    border-bottom: 1px solid var(--bg-cell);
}
.combat-encounter .equip-stats-panel .stats-table th:first-child {
    text-align: left;
    width: 70px;
}
.combat-encounter .equip-stats-panel .stats-table td {
    padding: 1px 4px;
    text-align: center;
    color: var(--text-light);
}
.combat-encounter .equip-stats-panel .stats-table td:first-child {
    text-align: left;
    color: var(--text-accent);
    width: 80px;
}
.combat-encounter .equip-stats-panel .stats-table .stat-pos { color: #4caf50; }
.combat-encounter .equip-stats-panel .stats-table .stat-zero { color: var(--border-primary); }
.combat-encounter .equip-stats-panel .stats-table .stat-neg { color: #ff4444; }
.combat-encounter .equip-stats-panel .stats-table .str-cell { text-align: center; color: var(--text-light); }
.combat-encounter .equip-stats-panel .stats-table .str-label { color: var(--text-muted); }
.combat-encounter .equip-stats-panel .stats-icon-wrap {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-right: 3px;
}
.combat-encounter .equip-stats-panel .stats-icon-wrap img {
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}

/* Loadout Dropdown */
.combat-encounter .loadout-dropdown {
    position: relative;
    margin-bottom: 10px;
}
.combat-encounter .loadout-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background 0.15s;
}
.combat-encounter .loadout-dropdown-trigger:hover { background: rgba(200, 168, 62, 0.1); }
.combat-encounter .loadout-dropdown.open .loadout-dropdown-trigger { background: rgba(200, 168, 62, 0.15); }
.combat-encounter .loadout-dropdown-icon {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}
.combat-encounter .loadout-dropdown-arrow {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.15s;
}
.combat-encounter .loadout-dropdown.open .loadout-dropdown-arrow { transform: rotate(180deg); }
.combat-encounter .loadout-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    padding: 4px 0;
    min-width: 200px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}
.combat-encounter .loadout-dropdown-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background 0.1s;
}
.combat-encounter .loadout-dropdown-option:hover { background: rgba(200, 168, 62, 0.15); }
.combat-encounter .loadout-dropdown-option.active { background: rgba(200, 168, 62, 0.25); }
.combat-encounter .paperdoll {
    display: grid; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(5, 56px);
    gap: 4px; justify-content: center; align-content: center; margin: 0 auto;
}
.combat-encounter .paperdoll .inv-slot {
    width: 56px; height: 56px;
    border-color: var(--bg-hover); background: var(--bg-darkest);
    cursor: default; justify-self: center; align-self: center;
}
.combat-encounter .paperdoll .inv-slot.empty { border-color: var(--bg-cell); background: #151510; }
.combat-encounter .paperdoll .inv-slot img { transform: scale(1.5); }

/* Loot Tab */
.combat-encounter .loot-tab-header { text-align: center; margin-bottom: 10px; }
.combat-encounter .loot-tab-title { font-size: 16px; font-weight: 700; color: var(--text-accent); text-shadow: 1px 1px 0 #000; text-transform: uppercase; letter-spacing: 1px; }
.combat-encounter .loot-grid { display: grid; grid-template-columns: repeat(5, 56px); gap: 4px; justify-content: center; margin: 0 auto; }
.combat-encounter .loot-sub-tabs { display: flex; gap: 4px; margin-bottom: 8px; justify-content: center; }
.combat-encounter .loot-sub-tab {
    background: var(--bg-cell); border: 1px solid var(--border-primary); color: #b8a070; padding: 4px 12px;
    font-family: inherit; font-size: 12px; cursor: pointer; border-radius: 3px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.combat-encounter .loot-sub-tab:hover { border-color: var(--text-accent); color: #e0d0a0; }
.combat-encounter .loot-sub-tab.active { background: var(--bg-hover); border-color: var(--text-accent); color: var(--text-accent); }
.combat-encounter .loot-table { width: 100%; margin-top: 4px; }
.combat-encounter .loot-drop-scroll { overflow-y: auto; }

/* Combat HUD — floating kill count + end button at bottom center */
.combat-encounter .combat-hud {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

/* End Combat Button */
.btn-end-combat {
    padding: 10px 32px; pointer-events: auto;
    background: rgba(43,34,22,0.95); border: 2px solid var(--text-accent);
    color: var(--text-accent); font-family: var(--game-font);
    font-size: 20px; font-weight: 700; border-radius: 4px;
    cursor: pointer; text-shadow: 1px 1px 0 #000;
    transition: all 0.2s; letter-spacing: 0.8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.btn-end-combat:hover {
    background: rgba(200,168,62,0.15); border-color: #e0c060; color: #e0c060;
    box-shadow: 0 0 12px rgba(200,168,62,0.3), 0 4px 16px rgba(0,0,0,0.5);
}
.float-end-combat-btn {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}

/* Kill Count */
.combat-encounter .ce-kill-count {
    pointer-events: auto;
    font-size: 20px; font-weight: 700; color: var(--text-accent);
    text-shadow: 1px 1px 0 #000; letter-spacing: 0.5px;
    transition: color 0.3s, text-shadow 0.3s;
}
.combat-encounter .ce-kill-count.kill-flash {
    color: var(--text-bright);
    text-shadow: 0 0 8px rgba(255,255,0,0.6), 1px 1px 0 #000;
    animation: ce-kill-pulse 0.6s ease-out;
}
@keyframes ce-kill-pulse {
    0% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Eat Indicator (inside combat HUD) */
.combat-encounter .eat-indicator {
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
    font-size: 13px; font-weight: 700; color: #5cbf60;
    text-shadow: 1px 1px 0 #000; white-space: nowrap;
    display: flex; align-items: center; gap: 4px;
    pointer-events: none;
    opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 2300;
    margin-bottom: 4px;
}
.combat-encounter .eat-indicator.visible { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.combat-encounter .eat-indicator.fading { opacity: 0; transform: translateX(-50%) translateY(-16px); transition: opacity 0.6s ease, transform 0.6s ease; }

/* ═══════════════════════════════════════════════════════════════
   LOGIN SCREEN (Layer 14D)
   Full-screen overlay for login/register before the game loads.
   Animated map background, vignette, social links, patch notes.
   ═══════════════════════════════════════════════════════════════ */

.login-screen {
    position: absolute;
    inset: 0;
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #1a1a2e;
    font-family: var(--game-font);
    overflow: hidden;
}

/* ── Background canvas ─────────────────────────────────────── */
.login-bg-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* ── Vignette overlay ──────────────────────────────────────── */
.login-vignette {
    position: absolute;
    inset: -10px;
    background:
        radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.9) 100%);
    pointer-events: none;
    z-index: 1;
}

/* ── Social links (top-left) — 1.1x scale ─────────────────── */
.login-social {
    position: absolute;
    top: 57px;
    left: 31px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 2;
    animation: loginFadeIn 0.8s ease-out 1.6s both;
}
.login-social-link {
    display: flex;
    align-items: center;
    gap: 11px;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    font-size: 17px;
    font-family: var(--game-font);
    letter-spacing: 0.55px;
    transition: color 0.25s, transform 0.2s;
}
.login-social-link:hover {
    color: rgba(255,255,255,0.95);
    transform: translateX(2px);
}
.login-social-link svg {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    opacity: 0.7;
    transition: opacity 0.25s;
}
.login-social-link:hover svg {
    opacity: 1;
}

/* ── Version tag (top-left, above social links) — 1.1x ─────── */
.login-version {
    position: absolute;
    top: 26px;
    left: 31px;
    z-index: 2;
    font-family: var(--game-font);
    font-size: 14px;
    font-weight: 300;
    color: rgba(255,255,255,0.2);
    letter-spacing: 1.65px;
    text-transform: uppercase;
    animation: loginFadeIn 0.6s ease-out 1.8s both;
}

/* ── Online counter (top-right) — 1.1x scale ─────────────── */
/* right: 274px clears the top-right window controls so the online
   pill doesn't render under / overlap them. */
.login-online {
    position: absolute;
    top: 26px;
    right: 274px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--game-font);
    font-size: 17px;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.88px;
    animation: loginFadeIn 0.6s ease-out 1.4s both;
}
.login-online-dot {
    width: 9px;
    height: 9px;
    background: #4CAF50;
    border-radius: 50%;
    box-shadow: 0 0 9px rgba(76,175,80,0.6);
    animation: onlinePulse 2s ease-in-out infinite;
}
@keyframes onlinePulse {
    0%, 100% { box-shadow: 0 0 7px rgba(76,175,80,0.4); }
    50% { box-shadow: 0 0 15px rgba(76,175,80,0.8); }
}

/* ── Patch notes panel (top-right, below online counter) — 1.1x ── */
.login-patch-notes {
    position: absolute;
    top: 62px;
    right: 31px;
    width: 330px;
    max-height: 46vh;
    overflow-y: auto;
    z-index: 2;
    background: rgba(10,8,18,0.55);
    border: 1px solid rgba(200,168,62,0.12);
    border-radius: 8px;
    padding: 20px 22px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: slideInRight 0.8s ease-out 1.2s both;
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
.login-patch-notes::-webkit-scrollbar {
    width: 4px;
}
.login-patch-notes::-webkit-scrollbar-thumb {
    background: rgba(200,168,62,0.2);
    border-radius: 2px;
}
.patch-notes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}
.patch-notes-title {
    font-size: 19px;
    color: var(--text-gold);
    margin: 0;
    font-weight: 600;
    letter-spacing: 1.1px;
    text-shadow: 1px 1px 0 #000;
}
.patch-notes-nav {
    display: flex;
    gap: 4px;
}
.patch-notes-arrow {
    width: 28px;
    height: 28px;
    background: rgba(200,168,62,0.10);
    border: 1px solid rgba(200,168,62,0.25);
    border-radius: 4px;
    color: var(--text-gold);
    font-size: 22px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    font-family: inherit;
}
.patch-notes-arrow:hover {
    background: rgba(200,168,62,0.22);
    border-color: rgba(200,168,62,0.55);
    color: #fff;
}
.patch-notes-arrow.disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}
.patch-note-version {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}
.patch-note-ver {
    color: var(--text-accent);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.55px;
}
.patch-note-date {
    color: rgba(255,255,255,0.3);
    font-size: 13px;
}
.patch-note-item {
    color: rgba(255,255,255,0.6);
    font-size: 14px;
    padding-left: 7px;
    line-height: 1.6;
}

/* ── Center login area (logo top, button bottom) ──────────── */
/* Full-screen vertical flex — logo pinned near top, button near
   bottom. Padding controls how close they get to each edge.
   IMPORTANT: height must be 100% (not 100vh) so the layout matches
   the fixed 1080px #ui-container. vh is viewport-relative and would
   drift when the user toggles fullscreen. */
.login-area {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 100px 0 220px;
    box-sizing: border-box;
    pointer-events: none;
    /* No animation on the wrapper — keeps the logo statically
       positioned across the loading→login transition so it doesn't
       slide. The button fades in on its own (below). */
}
.login-area > * { pointer-events: auto; }

/* No glass — just hosts the button and inline error. */
.login-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    /* Fade-in just the button area — logo stays in place. */
    animation: loginFadeIn 0.8s ease-out both;
}

.login-btn {
    flex: 1;
    padding: 13px 0;
    font-family: var(--game-font);
    font-size: 18px;
    font-weight: 700;
    border: 1px solid;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.25s;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
}
.login-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 50%);
    pointer-events: none;
}
.login-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.login-error {
    display: none;
    color: #ff4444;
    font-size: 18px;
    text-align: center;
    text-shadow: 1px 1px 0 #000;
    padding: 6px 0;
    margin-top: -14px;
    margin-bottom: -14px;
    height: 0;
    overflow: visible;
}

/* ── Steam sign-in button — 1.1x scale ─────────────────────── */
.login-btn-steam {
    /* Override .login-btn flex:1 so the button sizes to its content. */
    flex: 0 0 auto;
    padding: 24px 62px;
    font-family: var(--game-font);
    font-size: 29px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    color: #d8e0ee;
    background: linear-gradient(180deg, rgba(60,90,140,0.55) 0%, rgba(28,52,92,0.7) 100%);
    border: 1px solid rgba(150,180,220,0.65);
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.login-btn-steam svg { color: #d8e0ee; }
.login-btn-steam:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(80,118,180,0.55) 0%, rgba(40,72,124,0.65) 100%);
    border-color: rgba(170,200,240,0.85);
    box-shadow: 0 0 20px rgba(120,160,220,0.25), 0 0 60px rgba(120,160,220,0.08);
    transform: translateY(-1px);
}
.login-btn-steam:active:not(:disabled) {
    transform: translateY(0);
}
.login-btn-steam:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── First-time signup: display-name picker ─────────────────── */
.login-signup {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 8px 0;
    min-width: 480px;
}
.login-signup-title {
    margin: 0;
    text-align: center;
    color: #FFD700;
    font-family: 'Cinzel', serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}
.login-signup-blurb {
    margin: 0;
    text-align: center;
    color: rgba(220,220,235,0.85);
    font-family: var(--game-font);
    font-size: 16px;
    line-height: 1.45;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.8);
}
.login-signup-input {
    background: rgba(20,20,32,0.7);
    border: 1px solid rgba(150,180,220,0.5);
    border-radius: 6px;
    color: #fff;
    font-family: var(--game-font);
    font-size: 22px;
    letter-spacing: 1px;
    padding: 14px 18px;
    text-align: center;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.login-signup-input:focus {
    border-color: rgba(255,215,0,0.7);
    box-shadow: 0 0 14px rgba(255,215,0,0.18);
}
.login-signup-feedback {
    min-height: 22px;
    text-align: center;
    font-family: var(--game-font);
    font-size: 16px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.8);
    color: rgba(200,200,215,0.65);
}
.login-signup-feedback[data-kind='ok']      { color: #6dd66d; }
.login-signup-feedback[data-kind='error']   { color: #ff6464; }
.login-signup-feedback[data-kind='pending'] { color: rgba(220,220,235,0.6); }
.login-btn-submit {
    /* Re-uses login-btn-steam visual; just a hook for any future tweaks. */
    margin-top: 4px;
}

/* "Sign in as a different Steam user" — secondary, smaller version
   shown below the primary Continue-as-X button when running inside
   the Steam wrapper. */
.login-btn-steam.login-btn-steam-alt {
    padding: 12px 28px;
    font-size: 16px;
    letter-spacing: 1.4px;
    background: rgba(40,60,90,0.35);
    border: 1px solid rgba(120,150,190,0.35);
    color: rgba(200,215,235,0.85);
    margin-top: 6px;
}
.login-btn-steam.login-btn-steam-alt svg {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}
.login-btn-steam.login-btn-steam-alt:hover:not(:disabled) {
    background: rgba(60,90,130,0.45);
    border-color: rgba(160,190,225,0.55);
}

/* ── Top-right window controls (fullscreen toggle + close) ── */
/* z-index pushed above everything — login screen (3000), loading
   screen (4000), modal overlays (2000), notification stacks (9999).
   Stays on top regardless of what's open. */
.window-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 6px;
    z-index: 99999;
}
/* Hide the top-right fullscreen+close buttons while a fullscreen
   modal is open. The Group of Modals has its own close button in the
   header; the window controls would overlap it. body.modal-open is
   toggled by GroupOfModals.open / .close. */
body.modal-open .window-controls {
    display: none;
}
.window-control-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20,16,28,0.75);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    padding: 0;
    pointer-events: auto;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.window-control-btn:hover {
    background: rgba(40,32,56,0.85);
    color: rgba(255,255,255,0.95);
    border-color: rgba(255,255,255,0.3);
}
.window-control-btn-x:hover {
    background: rgba(120,28,28,0.7);
    border-color: rgba(220,80,80,0.85);
    color: #ffe0e0;
}

/* ── Game logo (top of screen) ────────────────────────────── */
.login-logo {
    display: block;
    width: 512px;
    height: 512px;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    filter: drop-shadow(0 8px 32px rgba(0,0,0,0.65))
            drop-shadow(0 0 60px rgba(255,215,0,0.1));
    user-select: none;
}

/* ── Login animations ──────────────────────────────────────── */
@keyframes loginFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── "Did you know?" tip (shared by login + loading screens) ── */
.screen-tip {
    position: absolute;
    bottom: 53px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    max-width: 1900px;
    text-align: center;
    font-size: 15px;
    color: rgba(255,255,255,0.55);
    font-family: var(--game-font);
    letter-spacing: 0.44px;
    line-height: 1.5;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    padding: 9px 26px;
    background: rgba(16,12,8,0.55);
    border: 1px solid rgba(200,168,62,0.1);
    border-radius: 22px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: loginFadeIn 0.8s ease-out 2.0s both;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
    pointer-events: none;
}

/* ══════════════════════════════════════════════
   HISCORES TAB (Layer 15B)
   ══════════════════════════════════════════════ */

.hiscores-layout {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 14px;
    gap: 10px;
    overflow: hidden;
}

/* ── LEFT: Categories ── */
.hs-categories {
    width: 180px;
    flex-shrink: 0;
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    padding: 8px;
    overflow-y: auto;
}

.hs-cat-title {
    font-size: 22px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
    margin-bottom: 8px;
    text-align: center;
}

.hs-cat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    margin: 1px 0;
    cursor: pointer;
    font-size: 18px;
    color: var(--text-light);
    border-radius: 3px;
    text-shadow: 1px 1px 0 #000;
    border: 1px solid transparent;
}
.hs-cat-item:hover { background: var(--bg-cell); }
.hs-cat-item.active {
    background: var(--bg-cell);
    color: var(--text-bright);
    border: 1px solid var(--border-primary);
}
.hs-cat-item img {
    width: 20px; height: 20px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}
.hs-cat-item.disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.hs-cat-divider {
    border: none;
    border-top: 1px solid var(--border-primary);
    margin: 6px 0;
}

/* ── CENTER: Leaderboard ── */
.hs-leaderboard {
    flex: 1;
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    padding: 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.hs-lb-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}
.hs-lb-title-row img {
    width: 28px; height: 28px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}
.hs-lb-title {
    font-size: 24px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
}

/* ── Table ── */
.hs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 18px;
}
.hs-table th {
    background: var(--bg-cell);
    padding: 6px 8px;
    text-align: left;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
    border-bottom: 2px solid var(--border-primary);
}
.hs-table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--bg-panel);
    color: var(--text-light);
}
.hs-table tr:hover { background: var(--bg-cell); }

.hs-table .rank-col { width: 60px; text-align: center; color: var(--text-dim); }
.hs-table .name-col { color: #5dade2; cursor: pointer; }
.hs-table .name-col:hover { text-decoration: underline; }
.hs-table .level-col { text-align: center; color: var(--text-bright); }
.hs-table .xp-col { text-align: right; color: var(--text-light); }

.hs-own-row { background: #3a2a1a !important; }

/* ── Pagination ── */
.hs-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    font-size: 18px;
}
.hs-pagination button {
    padding: 4px 12px;
    background: var(--bg-cell);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    color: var(--text-light);
    cursor: pointer;
    font-family: var(--game-font);
    font-size: 18px;
}
.hs-pagination button:hover { background: var(--bg-hover); color: var(--text-bright); }
.hs-pagination button:disabled { opacity: 0.3; cursor: default; }
.hs-pagination button:disabled:hover { background: var(--bg-cell); color: var(--text-light); }
.hs-pagination span { color: var(--text-dim); }

/* ── RIGHT: Controls ── */
.hs-controls {
    width: 190px;
    flex-shrink: 0;
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hs-search-section label {
    display: block;
    font-size: 18px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
    margin-bottom: 4px;
}

.hs-search-input {
    width: 100%;
    padding: 4px 6px;
    background: var(--bg-panel);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    color: var(--text-light);
    font-family: var(--game-font);
    font-size: 18px;
    margin-bottom: 4px;
    outline: none;
}
.hs-search-input:focus { border-color: var(--text-accent); }

.hs-search-btn {
    width: 100%;
    padding: 5px;
    background: var(--bg-cell);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    color: var(--text-light);
    cursor: pointer;
    font-family: var(--game-font);
    font-size: 18px;
}
.hs-search-btn:hover { background: var(--bg-hover); color: var(--text-bright); }

.hs-your-rank-btn {
    width: 100%;
    padding: 8px;
    background: var(--text-accent);
    border: none;
    border-radius: 3px;
    color: var(--bg-dark);
    font-weight: bold;
    cursor: pointer;
    font-family: var(--game-font);
    font-size: 20px;
    text-shadow: none;
}
.hs-your-rank-btn:hover { background: #dabb4e; }

/* ── Player profile view ── */
.hs-profile-skill-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}
.hs-profile-skill-cell img {
    width: 20px; height: 20px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}
.hs-profile-skill-link {
    color: #5dade2;
    cursor: pointer;
}
.hs-profile-skill-link:hover {
    text-decoration: underline;
}

.hs-back-btn {
    margin-top: 14px;
    padding: 8px 18px;
    background: var(--bg-cell);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    color: var(--text-light);
    cursor: pointer;
    font-family: var(--game-font);
    font-size: 20px;
}
.hs-back-btn:hover { background: var(--bg-hover); color: var(--text-bright); }

/* ── Scrollbar styling ── */
.hs-categories::-webkit-scrollbar,
.hs-leaderboard::-webkit-scrollbar {
    width: 8px;
}
.hs-categories::-webkit-scrollbar-track,
.hs-leaderboard::-webkit-scrollbar-track {
    background: var(--bg-dark);
}
.hs-categories::-webkit-scrollbar-thumb,
.hs-leaderboard::-webkit-scrollbar-thumb {
    background: var(--border-primary);
    border-radius: 4px;
}

.hs-loading {
    text-align: center;
    color: var(--text-dim);
    font-size: 20px;
    padding: 40px 0;
}

.hs-no-results {
    text-align: center;
    color: var(--text-muted);
    font-size: 18px;
    padding: 20px 0;
}

/* ══════════════════════════════════════════════
   LOADING SCREEN (Layer 17A)
   ══════════════════════════════════════════════ */

.loading-screen {
    position: absolute;
    inset: 0;
    z-index: 4000;
    display: flex;
    flex-direction: column;
    /* Top-align the logo to match .login-area's padding-top so the
       image lands at the same pixel position when transitioning to
       the login screen. */
    align-items: center;
    padding-top: 100px;
    box-sizing: border-box;
    background-color: #0a0a1a;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-family: var(--game-font);
}

.loading-bottom {
    position: absolute;
    /* Sit well above the .screen-tip pill (which is anchored at
       bottom: 53px). The previous bottom: 60px caused the rounded
       tip pill to poke out behind the progress bar as the "notch". */
    bottom: 130px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.loading-bar-track {
    width: 420px;
    height: 18px;
    background: #2a2a3e;
    border: 2px solid #3a3a4e;
    border-radius: 4px;
    overflow: hidden;
}

.loading-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--text-gold);
    border-radius: 2px;
    transition: width 0.15s ease-out;
}

.loading-status {
    font-size: 20px;
    color: var(--text-dim);
    text-shadow: 1px 1px 0 #000, 0 0 4px rgba(0,0,0,0.8);
    letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════════════════════════
   Settings Modal (Tab 7)
   ═══════════════════════════════════════════════════════════════ */

#tab-settings {
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    gap: 0 20px;
    padding: 10px;
}

.settings-section {
    width: 640px;
    margin-bottom: 28px;
    padding: 40px;
}

.settings-header-nav {
    display: flex;
    gap: 4px;
    flex: 1;
    justify-content: center;
    flex-wrap: wrap;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.settings-nav-btn {
    background: var(--bg-panel);
    border: 1px solid #444;
    color: var(--text-dim);
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    font-family: inherit;
    transition: border-color 0.15s, color 0.15s;
}

.settings-nav-btn:hover {
    border-color: var(--text-gold);
    color: var(--text-gold);
}

.settings-section-header {
    font-size: 30px;
    color: var(--text-gold);
    text-shadow: 1px 1px 0 #000;
    border-bottom: 1px solid #333;
    padding-bottom: 6px;
    margin-bottom: 14px;
    letter-spacing: 1px;
}

.settings-subheading {
    font-size: 30px;
    color: var(--text-dim);
    margin-top: 10px;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.settings-icon-size-control {
    display: flex;
    gap: 6px;
    align-items: center;
}

.settings-icon-size-btn {
    background: #222;
    border: 1px solid #444;
    color: var(--text-dim);
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    transition: border-color 0.15s, color 0.15s;
}

.settings-icon-size-btn:hover {
    border-color: var(--text-dark);
    color: #CCC;
}

.settings-icon-size-btn.active {
    border-color: var(--text-gold);
    color: var(--text-gold);
}

.settings-color-picker {
    width: 40px;
    height: 30px;
    border: 1px solid #444;
    border-radius: 4px;
    background: #222;
    cursor: pointer;
    padding: 2px;
    flex-shrink: 0;
}

.settings-color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.settings-color-picker::-webkit-color-swatch {
    border: none;
    border-radius: 2px;
}

.settings-theme-select {
    background: var(--bg-cell);
    color: var(--text-bright);
    border: 1px solid var(--border-primary);
    padding: 6px 10px;
    font-family: var(--game-font);
    font-size: 20px;
    cursor: pointer;
    outline: none;
}
.settings-theme-select:hover {
    border-color: var(--text-accent);
}
.settings-theme-select option {
    background: var(--bg-panel);
    color: var(--text-light);
}

/* Account info */
.settings-account-info {
    margin-bottom: 14px;
}

.settings-account-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.settings-account-label {
    font-size: 18px;
    color: var(--text-dim);
}

.settings-account-value {
    font-size: 18px;
    color: #ddd;
}

.settings-total-level {
    color: var(--text-gold);
}

.settings-account-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--text-gold);
}

/* Logout button */
.settings-logout-btn {
    background: #8B0000;
    color: #fff;
    border: 1px solid #a33;
    border-radius: 4px;
    padding: 8px 24px;
    font-family: var(--game-font);
    font-size: 20px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: background 0.15s;
}

.settings-logout-btn:hover {
    background: #a30000;
}

.settings-reset-btn {
    background: #333;
    color: var(--text-dim);
    border: 1px solid var(--text-disabled);
    border-radius: 4px;
    padding: 8px 24px;
    font-family: var(--game-font);
    font-size: 20px;
    margin-left: 60px;
    cursor: pointer;
    letter-spacing: 0.5px;
    margin-top: 12px;
    transition: background 0.15s, color 0.15s;
}

.settings-reset-btn:hover {
    background: #444;
    color: var(--text-gold);
}

/* Toggle rows */
.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #222;
}

.settings-toggle-text {
    flex: 1;
    margin-right: 16px;
}

.settings-toggle-label {
    font-size: 18px;
    color: #ddd;
}

.settings-toggle-desc {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* CSS-only toggle switch */
.settings-switch {
    width: 44px;
    height: 24px;
    background: #333;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background 0.2s;
    border: 1px solid var(--text-disabled);
}

.settings-switch.on {
    background: #5a4a00;
    border-color: var(--text-gold);
}

.settings-switch-knob {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--text-muted);
    position: absolute;
    top: 2px;
    left: 2px;
    transition: left 0.2s, background 0.2s;
}

.settings-switch.on .settings-switch-knob {
    left: 22px;
    background: var(--text-gold);
}

/* Map quality slider */
.settings-quality-control {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.settings-quality-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 140px;
    height: 6px;
    border-radius: 3px;
    background: #333;
    outline: none;
    cursor: pointer;
}

.settings-quality-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-gold);
    cursor: pointer;
    border: 2px solid #5a4a00;
}

.settings-quality-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-gold);
    cursor: pointer;
    border: 2px solid #5a4a00;
}

.settings-quality-badge {
    min-width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: #5a4a00;
    border: 1px solid var(--text-gold);
    border-radius: 4px;
    color: var(--text-gold);
    font-size: 18px;
    font-family: var(--game-font);
    cursor: default;
    position: relative;
}

/* Audio placeholder */
.settings-audio-placeholder {
    font-size: 18px;
    color: var(--text-disabled);
    font-style: italic;
    padding: 12px 0;
}

/* ══════════════════════════════════════════════
   CHARACTER CREATOR (Layer 18A)
   ══════════════════════════════════════════════ */

.character-creator.creator-layout {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* ── Category Sidebar ── */
.character-creator .creator-sidebar {
    width: 78px;
    flex-shrink: 0;
    background: var(--bg-dark);
    border-left: 2px solid var(--border-primary);
    border-right: 2px solid var(--border-primary);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0;
    overflow-y: auto;
}

.character-creator .cat-btn {
    width: 72px;
    height: 56px;
    background: var(--bg-panel);
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    color: var(--text-muted);
    transition: all .15s;
    position: relative;
    font-family: var(--game-font);
}
.character-creator .cat-btn:hover { background: var(--bg-cell); color: var(--text-light); }
.character-creator .cat-btn.active { background: var(--bg-cell); border-left: 3px solid var(--text-accent); color: var(--text-bright); }
.character-creator .cat-btn .icon { font-size: 22px; }
.character-creator .cat-btn .lbl { font-size: 15px; line-height: 1; text-shadow: 1px 1px 0 #000; }
.character-creator .cat-btn .dot {
    position: absolute;
    top: 5px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-accent);
}
.character-creator .cat-btn .cat-tooltip {
    display: none;
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    padding: 4px 10px;
    white-space: nowrap;
    pointer-events: none;
    font-size: 20px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.8);
    z-index: 100;
}
.character-creator .cat-btn:hover .cat-tooltip { display: block; }

/* ── Center: Slots Area ── */
.character-creator .creator-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.character-creator .cc-slots-area {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

.character-creator .cc-slot-group {
    margin-bottom: 12px;
}

.character-creator .cc-slot-label {
    font-size: 20px;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.character-creator .cc-slot-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 2px;
}

.character-creator .cc-slot-row select {
    flex: 1;
    min-width: 100px;
    background: var(--bg-dark);
    color: var(--text-bright);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    padding: 5px 8px;
    font-family: var(--game-font);
    font-size: 20px;
    cursor: pointer;
    outline: none;
    text-shadow: 1px 1px 0 #000;
}
.character-creator .cc-slot-row select:hover,
.character-creator .cc-slot-row select:focus { border-color: var(--text-accent); }

.character-creator .cc-slot-clear {
    background: none;
    border: 1px solid transparent;
    color: var(--border-primary);
    cursor: pointer;
    font-size: 22px;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: var(--game-font);
}
.character-creator .cc-slot-clear:hover { color: #ff0000; background: rgba(255,0,0,.1); border-color: var(--border-primary); }

/* ── Variant (2nd) Dropdown Row ── */
.character-creator .cc-variant-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 2px;
}

.character-creator .cc-variant-row select {
    flex: 1;
    min-width: 100px;
    background: var(--bg-dark);
    color: var(--text-light);
    border: 1px solid var(--bg-cell);
    border-radius: 3px;
    padding: 5px 8px;
    font-family: var(--game-font);
    font-size: 18px;
    cursor: pointer;
    outline: none;
    text-shadow: 1px 1px 0 #000;
}
.character-creator .cc-variant-row select:hover,
.character-creator .cc-variant-row select:focus { border-color: var(--text-accent); color: var(--text-bright); }

.character-creator .cc-variant-label {
    font-size: 16px;
    color: var(--text-muted);
    text-shadow: 1px 1px 0 #000;
    min-width: 56px;
    flex-shrink: 0;
}

/* ── Preview Panel (Left) ── */
.character-creator .creator-preview {
    width: 240px;
    flex-shrink: 0;
    background: var(--bg-dark);
    border-right: 2px solid var(--border-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    gap: 12px;
}

.character-creator .creator-preview h3 {
    font-size: 26px;
    font-weight: normal;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
}

.character-creator .cc-canvas-wrap {
    background: var(--border-primary);
    border-radius: 4px;
    border: 2px solid var(--border-primary);
    image-rendering: pixelated;
    overflow: hidden;
}

/* ── Direction Buttons ── */
.character-creator .cc-dir-btns {
    display: flex;
    gap: 4px;
}
.character-creator .cc-dir-btns button {
    padding: 5px 14px;
    font-size: 22px;
    border-radius: 3px;
    cursor: pointer;
    background: var(--bg-panel);
    color: var(--text-muted);
    border: 1px solid var(--border-primary);
    font-family: var(--game-font);
    text-shadow: 1px 1px 0 #000;
    transition: all .1s;
}
.character-creator .cc-dir-btns button:hover { background: var(--bg-cell); color: var(--text-light); border-color: var(--text-accent); }
.character-creator .cc-dir-btns button.active { background: var(--bg-cell); color: var(--text-bright); border-color: var(--text-accent); }

/* ── Play Button ── */
.character-creator .cc-play-btn {
    padding: 6px 16px;
    font-size: 20px;
    border-radius: 3px;
    cursor: pointer;
    background: var(--bg-panel);
    color: var(--text-light);
    border: 1px solid var(--border-primary);
    font-family: var(--game-font);
    text-shadow: 1px 1px 0 #000;
}
.character-creator .cc-play-btn:hover { background: var(--bg-cell); border-color: var(--text-accent); color: var(--text-bright); }

/* ── Save Button ── */
.character-creator .cc-save-area {
    border-top: 1px solid var(--border-primary);
    width: 100%;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.character-creator .cc-save-btn {
    width: 100%;
    padding: 14px;
    font-size: 30px;
    font-weight: normal;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid #6a8a3a;
    font-family: var(--game-font);
    text-shadow: 2px 2px 0 #000;
    background: linear-gradient(180deg, #4a6a2a 0%, #3a5a1a 100%);
    color: var(--text-bright);
    transition: all .15s;
    text-align: center;
}
.character-creator .cc-save-btn:hover { background: linear-gradient(180deg, #5a7a3a 0%, #4a6a2a 100%); border-color: #8aaa5a; }
.character-creator .cc-save-btn:active { background: linear-gradient(180deg, #3a5a1a 0%, #2a4a0a 100%); }

/* ── Layers Summary ── */
.character-creator .cc-layers-summary {
    border-top: 1px solid var(--border-primary);
    width: 100%;
    padding-top: 8px;
    max-height: 332px;
    overflow-y: auto;
}

.character-creator .cc-ls-title {
    font-size: 18px;
    color: var(--text-muted);
    text-shadow: 1px 1px 0 #000;
    margin-bottom: 4px;
}

.character-creator .cc-ls-row {
    font-size: 16px;
    color: var(--text-muted);
    padding: 2px 0;
    display: flex;
    gap: 4px;
    text-shadow: 1px 1px 0 #000;
}
.character-creator .cc-ls-row .z { color: var(--text-accent); min-width: 32px; text-align: right; }

.character-creator .cc-loading-msg {
    color: var(--border-primary);
    font-size: 22px;
    padding: 8px 0;
    text-shadow: 1px 1px 0 #000;
}

/* ── Body Type Select (in header) ── */
.cc-header-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cc-header-controls label {
    font-size: 22px;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
}

.cc-body-select {
    background: var(--bg-dark);
    color: var(--text-bright);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    padding: 4px 8px;
    font-family: var(--game-font);
    font-size: 22px;
    cursor: pointer;
    outline: none;
    text-shadow: 1px 1px 0 #000;
}
.cc-body-select:hover,
.cc-body-select:focus { border-color: var(--text-accent); }

/* ── Scrollbars (game style) ── */
.character-creator .cc-slots-area::-webkit-scrollbar,
.character-creator .cc-layers-summary::-webkit-scrollbar,
.character-creator .creator-sidebar::-webkit-scrollbar { width: 8px; }
.character-creator .cc-slots-area::-webkit-scrollbar-track,
.character-creator .cc-layers-summary::-webkit-scrollbar-track,
.character-creator .creator-sidebar::-webkit-scrollbar-track { background: var(--bg-dark); }
.character-creator .cc-slots-area::-webkit-scrollbar-thumb,
.character-creator .cc-layers-summary::-webkit-scrollbar-thumb,
.character-creator .creator-sidebar::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 4px; }

/* ═══════════════════════════════════════════════════════════════
   Slay Masters Tab (Phase 4)
   ═══════════════════════════════════════════════════════════════ */

#tab-slay { flex-direction: column; }

/* ── Info Bar (current task + slay stats) ── */
.slay-info-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 14px;
    background: var(--bg-panel);
    border-bottom: 2px solid var(--border-primary);
    flex-shrink: 0;
    height: 64px;
}

.slay-current-task {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.slay-current-task .task-label {
    font-size: 20px;
    color: var(--text-muted);
    text-shadow: 1px 1px 0 #000;
}

.slay-current-task .task-name {
    font-size: 24px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
}

.task-progress {
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-progress-bar {
    width: 200px;
    height: 18px;
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    overflow: hidden;
}

.task-progress-fill {
    height: 100%;
    background: linear-gradient(180deg, #4caf50 0%, #2e7d32 100%);
    transition: width 0.3s;
}

.task-progress-text {
    font-size: 20px;
    color: var(--text-light);
    text-shadow: 1px 1px 0 #000;
}

.slay-stats {
    display: flex;
    align-items: center;
    gap: 16px;
}

.auto-slay-btn {
    height: 38px;
    font-family: var(--game-font);
    font-size: 20px;
    color: var(--text-muted);
    text-shadow: 1px 1px 0 #000;
    background: var(--bg-panel);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    cursor: pointer;
    min-width: 160px;
    text-align: center;
}
.auto-slay-btn:hover { background: var(--bg-cell); color: var(--text-light); border-color: var(--text-accent); }
.auto-slay-btn.active { color: var(--text-bright); border-color: var(--text-accent); background: var(--bg-cell); }

.skip-task-btn {
    padding: 6px 20px;
    font-family: var(--game-font);
    font-size: 20px;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
    background: var(--bg-panel);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    cursor: pointer;
    min-width: 160px;
    text-align: center;
}
.skip-task-btn:hover { border-color: var(--text-accent); color: var(--text-bright); }

/* ── Unlocks Bar ── */
.slay-unlocks-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px 14px;
    background: var(--bg-dark);
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
    font-size: 18px;
    color: var(--text-muted);
    text-shadow: 1px 1px 0 #000;
}

.unlock-item { display: flex; align-items: center; gap: 6px; }
.unlock-item .val { color: var(--text-gold); }

/* ── Tier Rows Container ── */
.slay-tiers-container {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.slay-tiers-container::-webkit-scrollbar { width: 8px; }
.slay-tiers-container::-webkit-scrollbar-track { background: var(--bg-dark); }
.slay-tiers-container::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 4px; }

/* ── Single Tier Row ── */
.tier-row {
    display: flex;
    align-items: stretch;
    border-bottom: 2px solid var(--border-primary);
    min-height: 220px;
}
.tier-row:last-child { border-bottom: none; }

/* ── Master Panel ── */
.master-panel {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    border-right: 2px solid var(--border-primary);
    background: var(--bg-dark);
}

.master-name-line {
    font-size: 22px;
    text-shadow: 1px 1px 0 #000;
    text-align: center;
}
.master-name-line .range { font-size: 20px; color: var(--text-dim); }

.master-portrait {
    width: 128px;
    height: 128px;
    background: var(--bg-cell);
    border: 2px solid var(--border-primary);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    image-rendering: pixelated;
}

.get-task-btn {
    margin-top: 2px;
    padding: 6px 24px;
    font-family: var(--game-font);
    font-size: 22px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
    background: var(--bg-cell);
    border: 1px solid var(--border-secondary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}
.get-task-btn:hover { background: var(--bg-hover); border-color: var(--text-accent); }
.get-task-btn.disabled {
    background: var(--bg-dark);
    border-color: var(--border-primary);
    color: var(--text-disabled);
    cursor: not-allowed;
}

/* ── Mob Cards Scroll Area ── */
.mob-cards-scroll {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    overflow-x: auto;
    overflow-y: hidden;
}

.mob-cards-scroll::-webkit-scrollbar { height: 6px; }
.mob-cards-scroll::-webkit-scrollbar-track { background: var(--bg-dark); }
.mob-cards-scroll::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 3px; }

/* ── Individual Mob Card ── */
.mob-card {
    width: 140px;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 4px 8px;
    background: var(--bg-cell);
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}
.mob-card:hover { background: var(--bg-hover); border-color: var(--text-accent); }
.mob-card.locked { opacity: 0.75; background: none; }
.mob-card.locked:hover { background: var(--bg-dark); border-color: var(--border-primary); }

.mob-card-level {
    font-size: 18px;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
    margin-bottom: 2px;
}

.mob-card-name {
    font-size: 18px;
    color: var(--text-light);
    text-shadow: 1px 1px 0 #000;
    text-align: center;
    line-height: 1.1;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.mob-card-sprite {
    width: 128px;
    height: 128px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    image-rendering: pixelated;
    overflow: hidden;
}

.mob-card-sprite canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.mob-card-style {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 2;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
}

.mob-card-style img {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}

.mob-slay-task-icon {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    display: none;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
}

.mob-slay-task-icon img {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}

.mob-quest-task-icon {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 1;
    display: none;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
}

.mob-quest-task-icon img {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}

.slay-weights-link {
    display: none;
    cursor: pointer;
    color: var(--text-gold);
    margin-left: 48px;
    font-size: 20px;
}

.slay-weights-link:hover {
    color: var(--text-bright);
}

.mob-card-chance {
    position: absolute;
    bottom: 0px;
    left: 4px;
    font-size: 22px;
    color: var(--text-bright);
    background: var(--bg-cell);
    text-shadow: 1px 1px 0 #000;
    z-index: 2;
}

/* ── Tier color accents ── */
.tier-feeble .master-name-line  { color: #4caf50; }
.tier-feeble .master-panel { border-left: 3px solid #4caf50; }
.tier-dire .master-name-line    { color: #4fc3f7; }
.tier-dire .master-panel   { border-left: 3px solid #4fc3f7; }
.tier-savage .master-name-line  { color: #ff9800; }
.tier-savage .master-panel { border-left: 3px solid #ff9800; }
.tier-fell .master-name-line    { color: #f44336; }
.tier-fell .master-panel   { border-left: 3px solid #f44336; }
.tier-ancient .master-name-line { color: #9c27b0; }
.tier-ancient .master-panel { border-left: 3px solid #9c27b0; }
.tier-chaos .master-panel { border-left: 3px solid; border-image: linear-gradient(180deg, #ff4444, #ff8800, #ffdd00, #44ff44, #4488ff, #8844ff) 1; }
.tier-chaos .master-name-line { text-shadow: none; filter: drop-shadow(1px 1px 0 #000); }
.chaos-blurb {
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding: 16px 24px; flex: 1; min-width: 0;
}
.chaos-blurb-title {
    font-size: 20px; font-weight: bold; margin-bottom: 8px;
    filter: drop-shadow(1px 1px 0 #000);
}
.chaos-blurb-text {
    font-size: 14px; color: var(--text-dim); line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════
   QUEST MODAL
   ══════════════════════════════════════════════════════════════ */

.quest-layout {
    flex: 1;
    display: flex;
    gap: 0;
    overflow: hidden;
}

/* ── Quest List (Left Side) ── */
.quest-list-side {
    width: 420px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 2px solid var(--border-primary);
}

.quest-list-toolbar {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-primary);
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.quest-search {
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    padding: 4px 8px;
    font-family: var(--game-font);
    font-size: 20px;
    color: var(--text-bright);
    width: 160px;
    outline: none;
}
.quest-search::placeholder { color: var(--border-primary); }
.quest-search:focus { border-color: var(--text-accent); }

.quest-filter-btn {
    padding: 4px 8px;
    background: var(--bg-panel);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    color: var(--text-light);
    cursor: pointer;
    font-family: var(--game-font);
    font-size: 17px;
    text-shadow: 1px 1px 0 #000;
}
.quest-filter-btn:hover { background: var(--bg-cell); color: var(--text-bright); border-color: var(--text-accent); }
.quest-filter-btn.active { color: var(--text-bright); border-color: var(--text-accent); background: var(--bg-cell); }

.quest-sort-row {
    display: flex;
    align-items: center;
    padding: 3px 10px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-primary);
    gap: 6px;
    flex-shrink: 0;
}

.quest-sort-label {
    font-size: 17px;
    color: var(--text-muted);
    text-shadow: 1px 1px 0 #000;
}

.quest-sort-btn {
    padding: 2px 8px;
    background: var(--bg-panel);
    border: 1px solid var(--bg-cell);
    border-radius: 3px;
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--game-font);
    font-size: 16px;
    text-shadow: 1px 1px 0 #000;
}
.quest-sort-btn:hover { color: var(--text-light); border-color: var(--border-primary); }
.quest-sort-btn.active { color: var(--text-accent); border-color: var(--text-accent); }

/* ── Quest List Scroll ── */
.quest-list-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 2px;
}

/* ── Quest Row ── */
.quest-row {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid var(--bg-panel);
    min-height: 80px;
    cursor: pointer;
    transition: background 0.1s;
    gap: 10px;
}
.quest-row:hover { background: var(--bg-cell); }
.quest-row.selected { background: #2a3a20; outline: 2px solid #4caf50; outline-offset: -2px; }

.quest-status-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.4);
}
.quest-status-dot.locked { background: #f44336; }
.quest-status-dot.available { background: #f44336; }
.quest-status-dot.in-progress { background: #ffff00; }
.quest-status-dot.paused { background: #ff9800; }
.quest-status-dot.completed {
    background: transparent;
    border: none;
    color: #4caf50;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-shadow: 1px 1px 0 #000;
    font-weight: bold;
}

.quest-row-info {
    flex: 1;
    min-width: 0;
}

.quest-row-name {
    font-size: 22px;
    color: var(--text-light);
    text-shadow: 1px 1px 0 #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
}

/* Status-based row name coloring */
.quest-row.status-locked .quest-row-name { color: #f44336; }
.quest-row.status-available .quest-row-name { color: #f44336; }
.quest-row.status-active .quest-row-name { color: #ffff00; }
.quest-row.status-paused .quest-row-name { color: #ff9800; }
.quest-row.status-claimable .quest-row-name { color: #ffff00; }
.quest-row.status-completed .quest-row-name { color: #4caf50; }

.quest-row-reqs {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    max-width: 300px;
    overflow-x: clip;
}

.quest-req-badge {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 1px 5px;
    background: var(--bg-dark);
    border: 1px solid var(--bg-cell);
    border-radius: 2px;
    font-size: 22px;
    color: var(--text-muted);
    text-shadow: 1px 1px 0 #000;
}
.quest-req-badge .req-icon {
    width: 32px;
    height: 32px;
    border-radius: 2px;
    display: inline-block;
}

.quest-row-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 2px;
}

.quest-step-badge {
    font-size: 22px;
    color: var(--text-muted);
    text-shadow: 1px 1px 0 #000;
    white-space: nowrap;
}

/* Status-based step badge coloring */
.quest-row.status-locked .quest-step-badge { color: #f44336; }
.quest-row.status-available .quest-step-badge { color: #f44336; }
.quest-row.status-active .quest-step-badge { color: #ffff00; }
.quest-row.status-paused .quest-step-badge { color: #ff9800; }
.quest-row.status-claimable .quest-step-badge { color: #ffff00; }
.quest-row.status-completed .quest-step-badge { color: #4caf50; }

.quest-progress-badge {
    font-size: 22px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
    white-space: nowrap;
}

/* Status-based progress badge coloring */
.quest-row.status-active .quest-progress-badge { color: #ffff00; }
.quest-row.status-paused .quest-progress-badge { color: #ff9800; }
.quest-row.status-claimable .quest-progress-badge { color: #ffff00; }

/* ══════════════════════════════════════════════
   QUEST DETAIL (Right Side)
   ══════════════════════════════════════════════ */

.quest-detail-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.quest-detail-header {
    padding: 14px 18px 10px;
    background: var(--bg-dark);
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
}

.quest-detail-title {
    font-size: 32px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
    line-height: 1;
    margin-bottom: 4px;
}

.quest-detail-desc {
    font-size: 22px;
    color: var(--text-dim);
    text-shadow: 1px 1px 0 #000;
    line-height: 1.2;
}

/* Status-based detail title coloring */
.quest-detail-side.status-locked .quest-detail-title { color: #f44336; }
.quest-detail-side.status-available .quest-detail-title { color: #f44336; }
.quest-detail-side.status-active .quest-detail-title { color: #ffff00; }
.quest-detail-side.status-paused .quest-detail-title { color: #ff9800; }
.quest-detail-side.status-claimable .quest-detail-title { color: #ffff00; }
.quest-detail-side.status-completed .quest-detail-title { color: #4caf50; }

/* Status-based detail desc coloring (muted shades) */
.quest-detail-side.status-locked .quest-detail-desc { color: #b33a3a; }
.quest-detail-side.status-available .quest-detail-desc { color: #b33a3a; }
.quest-detail-side.status-active .quest-detail-desc { color: #cccc66; }
.quest-detail-side.status-paused .quest-detail-desc { color: #cc8833; }
.quest-detail-side.status-claimable .quest-detail-desc { color: #cccc66; }
.quest-detail-side.status-completed .quest-detail-desc { color: #3a8a3a; }

/* ── Requirements Section ── */
.quest-reqs-section {
    padding: 10px 18px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.quest-reqs-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quest-reqs-label {
    font-size: 24px;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
}

.quest-req-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 22px;
    text-shadow: 1px 1px 0 #000;
}

.quest-req-item .req-skill-icon {
    width: 32px;
    height: 32px;
    border-radius: 3px;
    display: inline-block;
}

.req-met { color: #4caf50; }
.req-unmet { color: #f44336; }
.req-check { font-size: 18px; }

/* ── Main Detail Content (Steps + Dialogue) ── */
.quest-detail-content {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* ── Steps Column ── */
.quest-steps-col {
    width: 480px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--bg-cell);
    overflow: hidden;
}

.quest-steps-header {
    padding: 8px 14px;
    font-size: 22px;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
    border-bottom: 1px solid var(--bg-cell);
    flex-shrink: 0;
    background: var(--bg-panel);
}

.quest-steps-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}

.quest-step {
    display: flex;
    align-items: flex-start;
    padding: 8px 14px;
    gap: 10px;
    min-height: 60px;
    transition: background 0.1s;
}
.quest-step.current { background: rgba(255,255,0,0.06); }

.quest-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    text-shadow: 1px 1px 0 #000;
    flex-shrink: 0;
    border: 2px solid;
}
.quest-step-num.done {
    background: #2a4a20;
    border-color: #4caf50;
    color: #4caf50;
}
.quest-step-num.active {
    background: #4a4a10;
    border-color: #ffff00;
    color: #ffff00;
    box-shadow: 0 0 8px rgba(255,255,0,0.3);
}
.quest-step-num.future {
    background: var(--bg-panel);
    border-color: var(--text-muted);
    color: var(--text-muted);
}

.quest-step-body {
    flex: 1;
    min-width: 0;
}

.quest-step-text {
    font-size: 20px;
    text-shadow: 1px 1px 0 #000;
    line-height: 1.2;
}
.quest-step-text.done { color: #4caf50; }
.quest-step-text.active { color: #ffff00; }
.quest-step-text.future { color: var(--text-muted); }

/* ── Dialogue / Quest Log Column ── */
.quest-dialogue-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.quest-dialogue-header {
    padding: 8px 14px;
    font-size: 22px;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
    border-bottom: 1px solid var(--bg-cell);
    flex-shrink: 0;
    background: var(--bg-panel);
}

.quest-dialogue-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px;
}

.quest-dialogue-entry {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--bg-panel);
}
.quest-dialogue-entry:last-child { border-bottom: none; }

.quest-dialogue-step-label {
    font-size: 22px;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
    margin-bottom: 4px;
}

.quest-dialogue-text {
    font-size: 20px;
    color: var(--text-light);
    text-shadow: 1px 1px 0 #000;
    line-height: 1.35;
    font-style: italic;
}

.quest-dialogue-active {
    border-left: 3px solid var(--text-accent);
    padding-left: 10px;
}

.quest-dialogue-active .quest-dialogue-step-label {
    color: var(--text-bright);
}

.quest-dialogue-pending {
    color: var(--text-muted);
    font-style: italic;
}

.quest-dialogue-locked {
    font-size: 22px;
    color: var(--text-muted);
    text-shadow: 1px 1px 0 #000;
    text-align: center;
    margin-top: 6px;
}

/* ── Rewards + Actions Bar (bottom) ── */
.quest-bottom-bar {
    border-top: 2px solid var(--border-primary);
    background: var(--bg-dark);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 10px 18px;
    gap: 20px;
}

.quest-rewards-section {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
}

.quest-rewards-label {
    font-size: 20px;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
    flex-shrink: 0;
}

.quest-reward-xp-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.quest-reward-xp {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 19px;
    text-shadow: 1px 1px 0 #000;
}
.quest-reward-xp .xp-icon {
    width: 32px;
    height: 32px;
    border-radius: 3px;
    display: inline-block;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}
.quest-reward-xp .xp-amount { color: #4caf50; }
.quest-reward-xp .xp-skill { color: var(--text-light); }

.quest-reward-items {
    display: flex;
    gap: 4px;
}

/* ── Action Buttons ── */
.quest-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.quest-btn {
    padding: 10px 24px;
    font-family: var(--game-font);
    font-size: 26px;
    text-shadow: 2px 2px 0 #000;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    white-space: nowrap;
}

.quest-btn-begin {
    color: var(--text-bright);
    background: linear-gradient(180deg, #4a6a2a 0%, #3a5a1a 100%);
    border: 2px solid #6a8a3a;
}
.quest-btn-begin:hover { background: linear-gradient(180deg, #5a7a3a 0%, #4a6a2a 100%); border-color: #8aaa5a; }

.quest-btn-pause {
    color: var(--text-accent);
    background: var(--bg-panel);
    border: 2px solid var(--border-primary);
}
.quest-btn-pause:hover { background: var(--bg-cell); border-color: var(--text-accent); }

.quest-btn-resume {
    color: #ff9800;
    background: #2a2010;
    border: 2px solid var(--border-primary);
}
.quest-btn-resume:hover { background: #3a3020; border-color: #ff9800; }

.quest-btn-complete {
    color: var(--text-bright);
    background: linear-gradient(180deg, #6a5a1a 0%, #5a4a0a 100%);
    border: 2px solid var(--text-accent);
    box-shadow: 0 0 10px rgba(200,168,62,0.3);
}
.quest-btn-complete:hover { background: linear-gradient(180deg, #7a6a2a 0%, #6a5a1a 100%); box-shadow: 0 0 15px rgba(200,168,62,0.5); }

.quest-btn-disabled {
    color: var(--border-primary);
    background: var(--bg-panel);
    border: 2px solid var(--bg-cell);
    cursor: not-allowed;
}

.quest-btn-done-label {
    font-size: 24px;
    color: #4caf50;
    text-shadow: 1px 1px 0 #000;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── No Selection Placeholder ── */
.quest-detail-side .no-selection {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
}
.quest-detail-side .no-selection-icon { transform: scale(2); image-rendering: pixelated; filter: drop-shadow(1px 1px 0 #000); opacity: 0.3; margin-bottom: 12px; }
.quest-detail-side .no-selection-text {
    font-size: 28px;
    color: var(--border-primary);
    text-shadow: 1px 1px 0 #000;
}

/* ── Scrollbars ── */
.quest-list-scroll::-webkit-scrollbar,
.quest-steps-list::-webkit-scrollbar,
.quest-dialogue-scroll::-webkit-scrollbar { width: 8px; }
.quest-list-scroll::-webkit-scrollbar-track,
.quest-steps-list::-webkit-scrollbar-track,
.quest-dialogue-scroll::-webkit-scrollbar-track { background: var(--bg-dark); }
.quest-list-scroll::-webkit-scrollbar-thumb,
.quest-steps-list::-webkit-scrollbar-thumb,
.quest-dialogue-scroll::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 4px; }

/* ═══════════════════════════════════════════════════════════════
   Reconnect Overlay
   ═══════════════════════════════════════════════════════════════ */

.reconnect-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.reconnect-box {
    background: var(--bg-panel);
    border: 2px solid var(--border-secondary);
    border-radius: 8px;
    padding: 32px 40px;
    width: 480px;
    max-height: 80%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.reconnect-title {
    font-size: 36px;
    color: var(--text-gold);
    text-align: center;
    text-shadow: 2px 2px 0 #000;
}

.reconnect-countdown {
    font-size: 28px;
    color: var(--text-bright);
    text-align: center;
    text-shadow: 1px 1px 0 #000;
    min-height: 36px;
}

.reconnect-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.reconnect-btn {
    font-family: var(--game-font);
    font-size: 22px;
    padding: 8px 24px;
    border: 2px solid var(--border-secondary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--bg-cell);
    color: var(--text-light);
}

.reconnect-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-gold);
    color: var(--text-gold);
}

.reconnect-btn-now {
    background: var(--bg-cell);
    border-color: var(--text-gold);
    color: var(--text-gold);
}

.reconnect-btn-now:hover {
    background: var(--bg-hover);
}

.reconnect-btn-cancel {
    color: var(--text-muted);
    border-color: var(--border-primary);
}

.reconnect-btn-cancel:hover {
    color: #ff6666;
    border-color: #ff6666;
}

.reconnect-phase {
    font-size: 18px;
    color: var(--text-muted);
    text-align: center;
}

.reconnect-log-header {
    font-size: 18px;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
    border-bottom: 1px solid var(--border-primary);
    padding-bottom: 6px;
}

.reconnect-log {
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reconnect-log::-webkit-scrollbar { width: 8px; }
.reconnect-log::-webkit-scrollbar-track { background: var(--bg-dark); }
.reconnect-log::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 4px; }

.reconnect-log-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px;
    font-size: 18px;
    border-radius: 3px;
    background: var(--bg-cell);
}

.reconnect-log-entry.failed .reconnect-log-status { color: #ff6666; }
.reconnect-log-entry.success .reconnect-log-status { color: #66ff66; }
.reconnect-log-entry.connecting .reconnect-log-status { color: var(--text-gold); }
.reconnect-log-entry.success { background: rgba(102, 255, 102, 0.1); border: 1px solid rgba(102, 255, 102, 0.3); }

.reconnect-log-num {
    color: var(--text-dim);
    min-width: 40px;
}

.reconnect-log-status {
    flex: 1;
    color: var(--text-light);
}

.reconnect-log-time {
    color: var(--text-dark);
    font-size: 16px;
}

/* ── Screen Effects (beam drops) ───────────────────────────── */
#screen-effects {
    position: absolute;
    top: 0; left: 0;
    width: 1920px;
    height: 1080px;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.screen-effect {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    opacity: 0;
}
.screen-effect.active {
    animation: seFade 2.2s ease-out forwards;
}
.se-beam {
    position: absolute;
    top: -20%;
    left: var(--playable-center-x, 50%);
    transform: translateX(-50%);
    width: 6px;
    height: 0;
    border-radius: 3px;
    filter: blur(1px);
    z-index: 1;
}
.screen-effect.active .se-beam {
    animation: seBeamDrop 0.5s ease-in forwards;
}
.se-beam-glow {
    position: absolute;
    top: -20%;
    left: var(--playable-center-x, 50%);
    transform: translateX(-50%);
    width: 40px;
    height: 0;
    border-radius: 20px;
    filter: blur(8px);
    z-index: 0;
}
.screen-effect.active .se-beam-glow {
    animation: seBeamDrop 0.5s ease-in forwards;
}
.se-impact {
    position: absolute;
    top: 50%;
    left: var(--playable-center-x, 50%);
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    opacity: 0;
    z-index: 2;
}
.screen-effect.active .se-impact {
    animation: seImpact 0.6s ease-out 0.45s forwards;
}
.se-ring {
    position: absolute;
    top: 50%;
    left: var(--playable-center-x, 50%);
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border: 2px solid;
    border-radius: 50%;
    opacity: 0;
    z-index: 2;
}
.screen-effect.active .se-ring {
    animation: seRing 0.8s ease-out 0.45s forwards;
}
.se-shard {
    position: absolute;
    top: 50%;
    left: var(--playable-center-x, 50%);
    width: 4px;
    height: 4px;
    border-radius: 1px;
    opacity: 0;
    z-index: 3;
}
.screen-effect.active .se-shard {
    animation: seShard 0.8s ease-out 0.5s forwards;
}
.se-shard-0  { --sx: -60px; --sy: -80px; --rot: 15deg; }
.se-shard-1  { --sx: 20px;  --sy: -90px; --rot: -30deg; }
.se-shard-2  { --sx: 70px;  --sy: -50px; --rot: 45deg; }
.se-shard-3  { --sx: 85px;  --sy: 10px;  --rot: -15deg; }
.se-shard-4  { --sx: 60px;  --sy: 60px;  --rot: 60deg; }
.se-shard-5  { --sx: 10px;  --sy: 80px;  --rot: -45deg; }
.se-shard-6  { --sx: -40px; --sy: 70px;  --rot: 30deg; }
.se-shard-7  { --sx: -80px; --sy: 30px;  --rot: -60deg; }
.se-shard-8  { --sx: -70px; --sy: -20px; --rot: 20deg; }
.se-shard-9  { --sx: 50px;  --sy: -70px; --rot: -40deg; }
.se-shard-10 { --sx: -30px; --sy: 85px;  --rot: 50deg; }
.se-shard-11 { --sx: 80px;  --sy: -30px; --rot: -25deg; }
.se-mist {
    position: absolute;
    top: 50%;
    left: var(--playable-center-x, 50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 0;
    z-index: 1;
    filter: blur(3px);
}
.screen-effect.active .se-mist {
    animation: seMist 1.2s ease-out 0.5s forwards;
}
.se-mist-0 { --mx: -40px; --my: -30px; --mdy: 50px; width: 12px; height: 12px; }
.se-mist-1 { --mx: 30px;  --my: -40px; --mdy: 60px; width: 10px; height: 10px; }
.se-mist-2 { --mx: 50px;  --my: -10px; --mdy: 40px; width: 14px; height: 14px; }
.se-mist-3 { --mx: -50px; --my: -15px; --mdy: 45px; width: 11px; height: 11px; }
.se-mist-4 { --mx: -20px; --my: -50px; --mdy: 70px; width: 16px; height: 16px; }
.se-mist-5 { --mx: 45px;  --my: -35px; --mdy: 55px; width: 9px;  height: 9px; }
.se-mist-6 { --mx: -35px; --my: -45px; --mdy: 65px; width: 13px; height: 13px; }
.se-mist-7 { --mx: 15px;  --my: -20px; --mdy: 35px; width: 10px; height: 10px; }

@keyframes seFade {
    0%   { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes seBeamDrop {
    0%   { height: 0; top: -20%; }
    100% { height: 70%; top: -20%; }
}
@keyframes seImpact {
    0%   { width: 0; height: 0; opacity: 1; }
    40%  { width: 160px; height: 160px; opacity: 0.8; }
    100% { width: 220px; height: 220px; opacity: 0; }
}
@keyframes seShard {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    30%  { opacity: 1; }
    100% { transform: translate(var(--sx), var(--sy)) rotate(var(--rot)); opacity: 0; }
}
@keyframes seMist {
    0%   { transform: translate(0, -60px) scale(0.5); opacity: 0.8; }
    30%  { transform: translate(var(--mx), var(--my)) scale(1.2); opacity: 0.6; }
    100% { transform: translate(var(--mx), var(--mdy)) scale(0.3); opacity: 0; }
}
@keyframes seRing {
    0%   { width: 0; height: 0; opacity: 0.8; border-width: 3px; }
    100% { width: 180px; height: 180px; opacity: 0; border-width: 1px; }
}

/* Rare drop floating item icon */
.se-rare-item {
    position: absolute;
    top: 50%;
    left: var(--playable-center-x, 50%);
    transform: translate(-50%, -50%) scale(1.5);
    z-index: 4;
    pointer-events: none;
    opacity: 0;
}
.se-rare-item.active {
    animation: seRareItem 3.2s ease-out forwards;
}
.se-rare-item img {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    filter: drop-shadow(2px 2px 0 #000) drop-shadow(0 0 8px rgba(255, 68, 68, 0.6));
}
@keyframes seRareItem {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    15%  { opacity: 1; transform: translate(-50%, -50%) scale(1.5); }
    75%  { opacity: 1; transform: translate(-50%, -50%) scale(1.5); }
    100% { opacity: 0; transform: translate(-50%, -60%) scale(1.5); }
}

/* ── Lamp Overlay ──────────────────────────────────────────── */
.lamp-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2200;
}
.lamp-panel {
    background: linear-gradient(168deg, rgba(40,30,15,0.97) 0%, rgba(25,18,8,0.98) 100%);
    border: 2px solid rgba(255, 215, 0, 0.45);
    border-radius: 6px;
    padding: 24px 32px;
    text-align: center;
    font-family: var(--game-font);
}
.lamp-title {
    font-size: 28px;
    color: #ffd700;
    text-shadow: 1px 1px 0 #000;
    margin-bottom: 4px;
}
.lamp-subtitle {
    font-size: 18px;
    color: #ccc;
    text-shadow: 1px 1px 0 #000;
    margin-bottom: 16px;
}
.lamp-grid {
    display: grid;
    grid-template-columns: repeat(4, 80px);
    gap: 4px;
    margin-bottom: 16px;
}
.lamp-skill-cell {
    width: 80px;
    height: 72px;
    background: #2b2216;
    border: 1px solid #5c4a2a;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.lamp-skill-cell:hover:not(.disabled) {
    border-color: #c8a83e;
    background: #3a2e1a;
}
.lamp-skill-cell.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.lamp-skill-icon {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}
.lamp-skill-name {
    font-size: 14px;
    color: #ccc;
    text-shadow: 1px 1px 0 #000;
    margin-top: 2px;
}
.lamp-skill-level {
    font-size: 12px;
    color: #888;
    text-shadow: 1px 1px 0 #000;
}
.lamp-cancel-btn {
    font-family: var(--game-font);
    font-size: 20px;
    color: #ccc;
    background: #2b2216;
    border: 1px solid #5c4a2a;
    border-radius: 3px;
    padding: 6px 24px;
    cursor: pointer;
    transition: border-color 0.15s;
}
.lamp-cancel-btn:hover {
    border-color: #c8a83e;
    color: #ffd700;
}

/* ── Unlocks Modal ─────────────────────────────────────────── */

/* Reuse SkillCustomModal grid patterns — these are scoped to the unlocks tab */
#tab-unlocks .unlocks-grid-section {
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
}
#tab-unlocks .unlocks-grid-header {
    display: flex; align-items: center;
    padding: 4px 8px;
    background: var(--bg-cell);
}
#tab-unlocks .unlocks-grid-title {
    font-size: 30px; color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
}
#tab-unlocks .unlocks-grid {
    display: grid;
    gap: 2px; padding: 6px;
}
#tab-unlocks .grid-skill-header {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-panel);
    border-radius: 3px;
}
#tab-unlocks .grid-skill-header img {
    transform: scale(1.5);
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}
#tab-unlocks .unlock-item {
    position: relative;
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
}
#tab-unlocks .unlock-item img {
    transform: scale(1.5);
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}
#tab-unlocks .unlock-item.locked { opacity: 0.3; }
#tab-unlocks .unlock-item.unlocked { border-color: var(--text-accent); }
#tab-unlocks .unlock-item.selected { border-color: var(--text-bright); cursor: pointer; }
#tab-unlocks .unlock-item.unlocked.pet-selectable { cursor: pointer; }
#tab-unlocks .unlock-item.obtained { border-color: #888; opacity: 0.7; }
#tab-unlocks .unlock-item.empty { border-color: transparent; background: transparent; }

/* Unlocks/Collections sub-view toggle in the modal-header (unlocks tab only) */
.modal-header .unlocks-header-slot {
    display: flex;
    gap: 4px;
    margin-left: auto;
    margin-right: 12px;
}
.modal-header .unlocks-header-slot .qp-toggle-btn {
    padding: 6px 14px;
    font-size: 20px;
    cursor: pointer;
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    background: var(--bg-dark);
    color: var(--text-light);
    text-shadow: 1px 1px 0 #000;
    user-select: none;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.modal-header .unlocks-header-slot .qp-toggle-btn:hover {
    border-color: var(--text-accent);
    color: var(--text-bright);
}
.modal-header .unlocks-header-slot .qp-toggle-btn.active {
    border-color: var(--text-accent);
    color: var(--text-accent);
    background: var(--bg-hover);
}

/* Collections indicator pill (shown in modal-header on mobs/slay/unlocks tabs) */
.modal-header .collections-indicator {
    margin-left: auto;
    margin-right: 12px;
    padding: 6px 14px;
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    color: var(--text-accent);
    font-size: 20px;
    text-shadow: 1px 1px 0 #000;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.modal-header .collections-indicator:hover {
    border-color: var(--text-accent);
    color: var(--text-bright);
}

/* Collections collapsible sections */
#tab-unlocks .collections-section {
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
}
#tab-unlocks .collections-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-cell);
    cursor: pointer;
    user-select: none;
}
#tab-unlocks .collections-section-header:hover {
    background: var(--bg-hover);
}
#tab-unlocks .collections-chevron {
    color: var(--text-accent);
    font-size: 18px;
    width: 18px;
    text-align: center;
    flex: 0 0 auto;
}
#tab-unlocks .collections-section-title {
    font-size: 30px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
    flex: 1;
}
#tab-unlocks .collections-section-content {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Collections view */
#tab-unlocks .collections-row {
    display: flex;
    gap: 12px;
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    padding: 8px;
    align-items: center;
}
#tab-unlocks .collections-mob-icon {
    width: 96px; height: 96px;
    flex: 0 0 96px;
    background-color: var(--bg-cell);
    background-size: cover;
    background-position: center;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
#tab-unlocks .collections-mob-icon canvas {
    width: 96px; height: 96px;
    image-rendering: pixelated;
}
#tab-unlocks .collections-row-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
#tab-unlocks .collections-row-name {
    font-size: 24px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
}
#tab-unlocks .collections-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
#tab-unlocks .collections-slots-items {
    gap: 32px;
}
#tab-unlocks .collections-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 56px;
}
/* Lock/unlock styling mirrors .unlock-item, but applied to the inner .inv-slot
   so the rate badge underneath stays at full opacity. */
#tab-unlocks .collections-slot.locked .inv-slot {
    opacity: 0.3;
}
#tab-unlocks .collections-slot.unlocked .inv-slot {
    border-color: var(--text-accent);
}
#tab-unlocks .collections-rate-badge {
    color: var(--text-accent);
    font-size: 18px;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 1px 1px 0 #000;
}

#tab-unlocks .unlock-tooltip {
    display: none;
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.9); color: var(--text-light);
    padding: 3px 8px; border-radius: 3px; font-size: 14px;
    white-space: nowrap; pointer-events: none; z-index: 10;
    text-shadow: 1px 1px 0 #000;
}
/* unlock-tooltip display handled by TooltipManager (no CSS :hover needed) */

/* Perk icon cells (alms perks section) */
#tab-unlocks .perk-icon-cell {
    width: 56px; height: 56px;
}
#tab-unlocks .perk-icon-cell .inv-qty {
    font-size: 20px;
    top: auto;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
}

/* Alms perk rows */
#tab-unlocks .unlocks-perk-row {
    margin-bottom: 10px;
}
#tab-unlocks .unlocks-perk-row-label {
    font-size: 20px;
    color: var(--text-light);
    text-shadow: 1px 1px 0 #000;
    margin-bottom: 4px;
}
#tab-unlocks .unlocks-perk-row-desc {
    font-size: 20px;
    color: var(--text-dim);
}
#tab-unlocks .unlocks-perk-row-cells {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════
   Clan Modal — Tab content for clan management + browse
   ═══════════════════════════════════════════════════════════════ */

.clan-accept-btn {
    background: #2a4a2a;
    border: 1px solid #4caf50;
    color: #4caf50;
}

.clan-accept-btn:hover {
    background: #3a5a3a;
}

.clan-decline-btn {
    background: #5c2a2a;
    border: 1px solid #f44336;
    color: #f44336;
}

.clan-decline-btn:hover {
    background: #7a3a3a;
}

.clan-view-toggle {
    display: flex;
    gap: 6px;
    padding: 10px 14px 6px;
}

.clan-view-toggle .qp-toggle-btn {
    font-size: 24px;
    height: 36px;
    padding: 4px 12px;
}

.clan-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 14px;
}

/* Create section */
.clan-create-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 14px;
}

.clan-create-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
}

.clan-create-desc {
    font-size: 16px;
    color: var(--text-light);
    text-align: center;
    max-width: 500px;
}

.clan-create-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.clan-create-input,
.clan-invite-input {
    background: var(--bg-darkest);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    color: var(--text-light);
    font-family: var(--game-font);
    font-size: 16px;
    padding: 6px 10px;
    width: 240px;
    outline: none;
}

.clan-create-input:focus,
.clan-invite-input:focus {
    border-color: var(--text-accent);
}

.clan-error {
    color: #f44336;
    font-size: 14px;
    min-height: 18px;
}

/* My Clan view */
.clan-info-header {
    margin-bottom: 14px;
}

.clan-name-display {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
    margin-bottom: 6px;
}

.clan-stats-row {
    display: flex;
    gap: 20px;
    font-size: 16px;
    color: var(--text-light);
    font-family: var(--game-font);
}

.clan-stats-row strong {
    color: var(--text-accent);
}

.clan-section-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border-primary);
    padding-bottom: 4px;
}

.clan-members-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}

.clan-member-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-cell);
    border-radius: 4px;
    font-size: 16px;
    color: var(--text-light);
}

.clan-member-row:hover {
    background: var(--bg-hover);
}

.clan-member-name {
    flex: 1;
    font-weight: 600;
    text-shadow: 1px 1px 0 #000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clan-leader-badge {
    color: var(--text-accent);
    font-weight: 400;
    font-size: 20px;
}

.clan-member-level {
    color: var(--text-dim);
    font-size: 14px;
}

.clan-kick-btn {
    padding: 2px 8px;
    background: var(--bg-panel);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    color: #f44336;
    font-family: var(--game-font);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}

.clan-kick-btn:hover {
    background: var(--bg-hover);
    border-color: #f44336;
}

/* Actions row (invite + leave on same line) */
.clan-actions-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 10px 0;
}

.clan-action-btn {
    padding: 6px 14px;
    background: var(--bg-cell);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    color: var(--text-light);
    font-family: var(--game-font);
    font-size: 15px;
    cursor: pointer;
    text-shadow: 1px 1px 0 #000;
    transition: background 0.15s, border-color 0.15s;
    text-align: center;
}

.clan-action-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-accent);
    color: var(--text-bright);
}

.clan-leave-btn {
    color: #f44336;
    border-color: #f44336;
    max-width: 320px;
}

.clan-leave-btn:hover {
    background: rgba(244, 67, 54, 0.15);
}

/* Loading */
.clan-loading {
    text-align: center;
    color: var(--text-dim);
    font-size: 16px;
    padding: 40px;
}

/* Browse clans */
.clan-browse-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.clan-browse-row {
    border-radius: 4px;
    overflow: hidden;
}

.clan-browse-main {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-cell);
    cursor: pointer;
    font-size: 22px;
    transition: background 0.1s;
}

.clan-browse-main:hover {
    background: var(--bg-hover);
}

.clan-browse-rank {
    color: var(--text-dim);
    min-width: 50px;
    font-weight: 600;
}

.clan-browse-name {
    color: #5dade2;
    font-weight: 600;
    flex: 1;
    text-shadow: 1px 1px 0 #000;
}

.clan-browse-members {
    color: var(--text-dim);
    font-size: 18px;
    min-width: 50px;
    text-align: center;
}

.clan-browse-level {
    color: var(--text-bright);
    min-width: 80px;
    text-align: center;
}

.clan-browse-xp {
    color: var(--text-light);
    min-width: 140px;
    text-align: right;
}

.clan-browse-expand {
    color: var(--text-dim);
    font-size: 16px;
    min-width: 20px;
    text-align: center;
}

/* Inline detail (expanded) */
.clan-detail-inline {
    background: var(--bg-dark);
    border-top: 1px solid var(--border-primary);
    padding: 8px 14px;
}

.clan-detail-member {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px;
    font-size: 15px;
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.1s;
}

.clan-detail-member:hover {
    background: var(--bg-cell);
}

.clan-detail-member-name {
    flex: 1;
    color: var(--text-light);
    font-weight: 600;
}

.clan-detail-member-level {
    color: var(--text-bright);
    min-width: 80px;
}

.clan-detail-member-xp {
    color: var(--text-light);
    min-width: 100px;
    text-align: right;
}

/* ── Clan detail summary stats ── */
.clan-detail-summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0 8px;
    font-size: 24px;
    color: var(--text-light);
    font-family: var(--game-font);
}

.clan-detail-stat-line strong {
    color: var(--text-accent);
}

/* ── Clan detail member table ── */
.clan-detail-mtable {
    margin-bottom: 10px;
}

.clan-detail-mrow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    font-size: 24px;
    color: var(--text-light);
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.1s;
}

.clan-detail-mrow:hover {
    background: var(--bg-cell);
}

.clan-detail-mhead {
    cursor: default;
    color: var(--text-dim);
    font-size: 20px;
    border-bottom: 1px solid var(--border-primary);
    padding-bottom: 3px;
    margin-bottom: 2px;
}

.clan-detail-mhead:hover {
    background: transparent;
}

.clan-detail-mcol-name {
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

.clan-detail-mname-text {
    font-weight: 600;
    text-shadow: 1px 1px 0 #000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clan-detail-mactivity {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 20px;
    color: var(--text-dim);
    margin-top: 2px;
}

.clan-detail-mactivity img {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}

.clan-detail-mcol-lvl {
    color: var(--text-bright);
    min-width: 70px;
    text-align: right;
    padding-right: 8px;
    flex-shrink: 0;
}

.clan-detail-mcol-xp {
    color: var(--text-light);
    min-width: 120px;
    text-align: right;
    flex-shrink: 0;
}

/* Side-by-side skill grids row */
.clan-grids-row {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 16px 0 8px;
}

.clan-skill-grid-wrapper {
    flex-shrink: 0;
    width: 320px;
}

.clan-skill-grid-label {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-accent);
    text-shadow: 1px 1px 0 #000;
    text-align: center;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}

/* 4-column grid matching skills panel layout */
.clan-skill-grid-4col {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
}

.clan-sg-cell {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 3px 5px;
    background: var(--bg-cell);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    font-size: 20px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
    height: 50px;
    min-width: 0;
    overflow: hidden;
    cursor: default;
}

.clan-sg-cell:hover {
    background: var(--bg-hover);
    border-color: var(--text-accent);
}

.clan-sg-cell img {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}

.clan-sg-cell span {
    margin-left: auto;
    line-height: 1;
}

/* Grid footer (Total Level + Total XP) — matches grid width */
.clan-sg-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px;
    margin-top: 4px;
    width: 100%;
}

.clan-sg-footer-cell {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 5px;
    background: var(--bg-cell);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    font-size: 18px;
    min-width: 0;
    overflow: hidden;
    height: 50px;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
}

.clan-sg-footer-cell img {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}

.clan-sg-footer-cell span {
    margin-left: auto;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
    line-height: 1;
}

/* Expanded member hiscores table */
.clan-member-hs-table {
    padding: 6px 12px 10px;
    background: var(--bg-dark);
    border-radius: 4px;
    margin: 2px 0 6px;
}

.clan-member-hs-table .hs-table {
    font-size: 15px;
}

/* Hiscores mode toggle */
.hs-mode-toggle {
    display: flex;
    gap: 6px;
    padding: 10px 14px 0;
}

/* ═══════════════════════════════════════════════════════════════
   Chat Category Filter Context Menu
   ═══════════════════════════════════════════════════════════════ */

.chat-category-menu {
    position: absolute;
    z-index: 2300;
    background: var(--bg-panel);
    border: 2px solid var(--border-primary);
    border-radius: 6px;
    padding: 8px 0;
    min-width: 200px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    font-family: var(--game-font);
}

.chat-category-title {
    padding: 4px 12px 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-accent);
    border-bottom: 1px solid var(--border-primary);
    margin-bottom: 4px;
}

.chat-category-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-light);
    transition: background 0.1s;
}

.chat-category-row:hover {
    background: var(--bg-hover);
}

.chat-category-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.chat-category-check {
    width: 16px;
    height: 16px;
    border: 1px solid var(--border-secondary);
    border-radius: 3px;
    background: var(--bg-darkest);
    margin-left: auto;
    flex-shrink: 0;
    position: relative;
}

.chat-category-check.checked {
    background: var(--text-accent);
    border-color: var(--text-accent);
}

.chat-category-check.checked::after {
    content: '\2713';
    position: absolute;
    top: -1px;
    left: 2px;
    font-size: 12px;
    color: var(--bg-dark);
    font-weight: bold;
}

/* ═══════════════════════════════════════════════════════════════
   Floating Tab Strip — always-visible icons over game world
   Matches .modal-tabs positioning exactly so icons align when
   modal opens. Hidden when GroupOfModals is open.
   ═══════════════════════════════════════════════════════════════ */

.floating-tab-strip {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 60px;
    display: flex;
    flex-direction: column;
    padding: 4px 0;
    gap: 1px;
    z-index: 15;
    pointer-events: none;
}

.floating-tab-btn {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    pointer-events: auto;
    border-left: 3px solid transparent;
    transition: background 0.15s;
    border-radius: 0 6px 6px 0;
}

.floating-tab-btn:hover {
    background: rgba(0, 0, 0, 0.5);
    border-left-color: var(--text-accent);
}

.floating-tab-btn.active {
    background: rgba(0, 0, 0, 0.6);
    border-left-color: var(--text-accent);
}

.floating-tab-icon {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8));
    transition: filter 0.15s;
}

.floating-tab-btn:hover .floating-tab-icon {
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8)) brightness(1.3);
}

.floating-tab-emoji {
    font-size: 28px;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8));
}

.floating-tab-btn:hover .floating-tab-emoji {
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8)) brightness(1.3);
}

.floating-tab-tooltip {
    display: none;
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-dark);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    padding: 4px 10px;
    white-space: nowrap;
    pointer-events: none;
    font-size: 20px;
    font-family: var(--game-font);
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    z-index: 100;
}

.floating-tab-btn:hover .floating-tab-tooltip {
    display: block;
}

.floating-tab-hotkey {
    position: absolute;
    bottom: 2px;
    left: 4px;
    font-size: 16px;
    color: #ffffff;
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
    line-height: 1;
    pointer-events: none;
    font-family: var(--game-font);
}

.panel-tab-hotkey {
    position: absolute;
    bottom: 2px;
    left: 4px;
    font-size: 14px;
    color: #ffffff;
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
    line-height: 1;
    pointer-events: none;
    font-family: var(--game-font);
    z-index: 2;
}

.modal-tab-hotkey {
    position: absolute;
    bottom: 2px;
    left: 4px;
    font-size: 16px;
    color: #ffffff;
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
    line-height: 1;
    pointer-events: none;
    font-family: var(--game-font);
}

.hide-floating-tab-hotkeys .floating-tab-hotkey,
.hide-floating-tab-hotkeys .modal-tab-hotkey { display: none; }
.hide-panel-tab-hotkeys .panel-tab-hotkey { display: none; }

/* Tab reorder via custom drag on the grip in Settings > Hotkeys */
.settings-hotkey-row.tab-dragging {
    opacity: 0.4;
}
.settings-hotkey-row.tab-drag-over {
    box-shadow: inset 0 3px 0 var(--text-gold);
    background: rgba(255, 215, 0, 0.08);
}
.settings-hotkey-grip {
    color: #888;
    font-size: 22px;
    line-height: 1;
    padding: 0 10px 0 0;
    cursor: grab;
    user-select: none;
    letter-spacing: -3px;
    flex-shrink: 0;
}
.settings-hotkey-grip:active {
    cursor: grabbing;
}
.settings-hotkey-row:hover .settings-hotkey-grip {
    color: var(--text-gold);
}
.settings-hotkey-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 12px;
    flex-shrink: 0;
    font-size: 22px;
}
.settings-hotkey-icon img {
    width: 28px;
    height: 28px;
    image-rendering: pixelated;
}

/* Hotkey rebind button states (Settings > Hotkeys) */
.settings-hotkey-bind-btn:hover {
    background: #6b5a00;
    border-color: #ffd700;
}
.settings-hotkey-bind-btn.capturing {
    background: #1a3a6a;
    border-color: #4488ff;
    color: #aaccff;
    animation: hotkey-capture-pulse 0.9s ease-in-out infinite;
}
.settings-hotkey-bind-btn.error {
    background: #5a1a1a;
    border-color: #ff6666;
    color: #ff9999;
}
@keyframes hotkey-capture-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   Bank Consume Context Menu (bulk potions/crystals)
   ═══════════════════════════════════════════════════════════════ */

.bank-consume-menu {
    position: absolute;
    z-index: 2300;
    background: var(--bg-panel);
    border: 2px solid var(--border-primary);
    border-radius: 6px;
    padding: 10px 12px;
    min-width: 200px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    font-family: var(--game-font);
}

.consume-menu-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
}

.consume-menu-header img {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 #000);
}

.consume-menu-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.consume-menu-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--bg-darkest);
    border-radius: 3px;
    outline: none;
}

.consume-menu-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-accent);
    cursor: pointer;
    border: 2px solid var(--border-secondary);
}

.consume-menu-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-accent);
    cursor: pointer;
    border: 2px solid var(--border-secondary);
}

.consume-menu-count {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-bright);
    text-shadow: 1px 1px 0 #000;
    min-width: 36px;
    text-align: center;
}

.consume-menu-btn {
    width: 100%;
    padding: 6px 14px;
    background: var(--text-accent);
    color: var(--bg-dark);
    font-family: var(--game-font);
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}

.consume-menu-btn:hover {
    background: #dabb4e;
}