/* /Components/Layout/MainLayout.razor.rz.scp.css */
.lh-app[b-msvvpvzips] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

.lh-main[b-msvvpvzips] {
    flex: 1;
    padding-top: var(--lh-nav-height);
}

#blazor-error-ui[b-msvvpvzips] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-msvvpvzips] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.lh-nav[b-2cinx5tx5x] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--lh-nav-height);
    background: linear-gradient(135deg, rgba(10, 10, 26, 0.95), rgba(26, 26, 54, 0.95));
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--lh-border);
    display: flex;
    align-items: center;
    padding: 0 24px;
    z-index: 100;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.lh-nav-brand[b-2cinx5tx5x] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-right: auto;
}

.lh-nav-logo[b-2cinx5tx5x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    overflow: hidden;
}

.lh-nav-title[b-2cinx5tx5x] {
    font-size: 1.4em;
    font-weight: 800;
    background: linear-gradient(135deg, #ffc107, #ff9800, #ffc107);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
}

.lh-nav-links[b-2cinx5tx5x] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lh-nav-link[b-2cinx5tx5x] {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.95em;
    font-weight: 600;
    color: #aaa;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}

.lh-nav-icon[b-2cinx5tx5x] {
    font-size: 1.1em;
    line-height: 1;
}

.lh-nav-link:hover[b-2cinx5tx5x] {
    color: var(--lh-gold);
    background: rgba(255, 193, 7, 0.08);
}

.lh-nav-link.active[b-2cinx5tx5x] {
    color: var(--lh-gold);
    background: rgba(255, 193, 7, 0.12);
    box-shadow: inset 0 -2px 0 var(--lh-gold);
}

/* Hamburger - hidden on desktop */
.lh-nav-toggle[b-2cinx5tx5x] {
    display: none;
}

.lh-nav-hamburger[b-2cinx5tx5x] {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
}

.lh-nav-hamburger span[b-2cinx5tx5x] {
    display: block;
    width: 24px;
    height: 2px;
    background: #ccc;
    border-radius: 2px;
    transition: all 0.3s;
}

/* ── Charizard Character ─────────────────────────── */
.lh-charizard[b-2cinx5tx5x] {
    position: fixed;
    top: calc(var(--lh-nav-height) + 8px);
    right: 24px;
    z-index: 99;
    cursor: pointer;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lh-charizard:hover[b-2cinx5tx5x] {
    transform: scale(1.1);
}

.lh-charizard-body[b-2cinx5tx5x] {
    display: none;
}

.lh-charizard-sprite[b-2cinx5tx5x] {
    filter: drop-shadow(0 2px 8px rgba(255, 87, 34, 0.4));
    animation: lh-char-idle-b-2cinx5tx5x 3s ease-in-out infinite;
}

@keyframes lh-char-idle-b-2cinx5tx5x {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.lh-charizard-fire .lh-charizard-sprite[b-2cinx5tx5x] {
    animation: lh-char-fire-b-2cinx5tx5x 0.3s ease-in-out infinite;
}

@keyframes lh-char-fire-b-2cinx5tx5x {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-2px) scale(1.05); }
}

.lh-charizard-flame[b-2cinx5tx5x] {
    position: absolute;
    left: -30px;
    top: 10px;
    display: flex;
    gap: 2px;
}

.lh-flame-particle[b-2cinx5tx5x] {
    font-size: 1.2em;
    animation: lh-flame-float-b-2cinx5tx5x 0.5s ease-out forwards;
    opacity: 1;
}

.lh-flame-2[b-2cinx5tx5x] {
    animation-delay: 0.15s;
    font-size: 1em;
}

.lh-flame-3[b-2cinx5tx5x] {
    animation-delay: 0.3s;
    font-size: 0.8em;
}

@keyframes lh-flame-float-b-2cinx5tx5x {
    0% { transform: translateX(0) translateY(0) scale(1); opacity: 1; }
    100% { transform: translateX(-40px) translateY(-10px) scale(0.3); opacity: 0; }
}

@media (max-width: 640px) {
    .lh-nav[b-2cinx5tx5x] {
        padding: 0 16px;
        flex-wrap: wrap;
        height: auto;
        min-height: var(--lh-nav-height);
    }

    .lh-nav-hamburger[b-2cinx5tx5x] {
        display: flex;
    }

    .lh-nav-links[b-2cinx5tx5x] {
        display: none;
        width: 100%;
        flex-direction: column;
        padding: 8px 0 16px;
        gap: 2px;
    }

    .lh-nav-toggle:checked ~ .lh-nav-links[b-2cinx5tx5x] {
        display: flex;
    }

    .lh-nav-toggle:checked ~ .lh-nav-hamburger span:nth-child(1)[b-2cinx5tx5x] {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .lh-nav-toggle:checked ~ .lh-nav-hamburger span:nth-child(2)[b-2cinx5tx5x] {
        opacity: 0;
    }
    .lh-nav-toggle:checked ~ .lh-nav-hamburger span:nth-child(3)[b-2cinx5tx5x] {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    .lh-nav-link[b-2cinx5tx5x] {
        width: 100%;
        padding: 12px 16px;
    }

    .lh-charizard[b-2cinx5tx5x] {
        right: 12px;
        top: calc(var(--lh-nav-height) + 4px);
    }

    .lh-charizard-sprite svg[b-2cinx5tx5x] {
        width: 36px;
        height: 36px;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-14etree3pn],
.components-reconnect-repeated-attempt-visible[b-14etree3pn],
.components-reconnect-failed-visible[b-14etree3pn],
.components-pause-visible[b-14etree3pn],
.components-resume-failed-visible[b-14etree3pn],
.components-rejoining-animation[b-14etree3pn] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-14etree3pn],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-14etree3pn],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-14etree3pn],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-14etree3pn],
#components-reconnect-modal.components-reconnect-retrying[b-14etree3pn],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-14etree3pn],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-14etree3pn],
#components-reconnect-modal.components-reconnect-failed[b-14etree3pn],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-14etree3pn] {
    display: block;
}


#components-reconnect-modal[b-14etree3pn] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-14etree3pn 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-14etree3pn 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-14etree3pn 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-14etree3pn]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-14etree3pn 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-14etree3pn {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-14etree3pn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-14etree3pn {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-14etree3pn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-14etree3pn] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-14etree3pn] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-14etree3pn] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-14etree3pn] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-14etree3pn] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-14etree3pn] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-14etree3pn 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-14etree3pn] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-14etree3pn {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/CardGame.razor.rz.scp.css */
/* ===== ELEMENTAL CLASH - Card Game Styles ===== */
/* Graffiti × Anime | Neon Glow | Sleek & Colorful */
/* Fonts loaded via <link> in CardGame.razor */

/* ===== Main Container ===== */
.card-game-container[b-z2ulhaaeco] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #0d0d20 100%);
    color: #e0e0e0;
    font-family: 'Rajdhani', 'Segoe UI', sans-serif;
    padding: 0.5rem;
    user-select: none;
    overflow-x: hidden;
}

.game-title[b-z2ulhaaeco] {
    text-align: center;
    font-size: 2.2rem;
    font-family: 'Orbitron', sans-serif;
    color: #ffd700;
    text-shadow: 0 0 20px rgba(255,215,0,0.5), 0 0 40px rgba(255,215,0,0.2);
    margin: 0.5rem 0;
    letter-spacing: 5px;
    text-transform: uppercase;
}

/* ===== Setup / Deck Building Screen ===== */
.setup-screen[b-z2ulhaaeco] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    gap: 1.5rem;
}

.setup-title[b-z2ulhaaeco] {
    font-size: 2rem;
    font-family: 'Orbitron', sans-serif;
    color: #ffd700;
    text-shadow: 0 0 30px rgba(255,215,0,0.5);
    letter-spacing: 4px;
}

.setup-subtitle[b-z2ulhaaeco] {
    font-size: 1.1rem;
    font-family: 'Rajdhani', sans-serif;
    color: #aaa;
    margin-bottom: 0.5rem;
}

.setup-section[b-z2ulhaaeco] {
    text-align: center;
    margin: 1rem 0;
}

.setup-section h4[b-z2ulhaaeco] {
    color: #ccc;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
}

.element-buttons[b-z2ulhaaeco] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.element-btn[b-z2ulhaaeco] {
    width: 110px;
    height: 110px;
    border: 3px solid #333;
    border-radius: 12px;
    background: rgba(20,20,40,0.8);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    color: #ccc;
}

.element-btn:hover[b-z2ulhaaeco] {
    transform: scale(1.08);
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255,215,0,0.3);
}

.element-btn.selected[b-z2ulhaaeco] {
    border-color: #ffd700;
    box-shadow: 0 0 25px rgba(255,215,0,0.5);
    background: rgba(255,215,0,0.1);
}

.element-btn .elem-icon[b-z2ulhaaeco] {
    font-size: 2.2rem;
}

.element-btn.earth[b-z2ulhaaeco] { border-color: #8B4513; }
.element-btn.earth.selected[b-z2ulhaaeco] { border-color: #D2691E; box-shadow: 0 0 25px rgba(139,69,19,0.6); background: rgba(139,69,19,0.15); }
.element-btn.water[b-z2ulhaaeco] { border-color: #1E90FF; }
.element-btn.water.selected[b-z2ulhaaeco] { border-color: #00BFFF; box-shadow: 0 0 25px rgba(30,144,255,0.6); background: rgba(30,144,255,0.15); }
.element-btn.fire[b-z2ulhaaeco] { border-color: #FF4500; }
.element-btn.fire.selected[b-z2ulhaaeco] { border-color: #FF6347; box-shadow: 0 0 25px rgba(255,69,0,0.6); background: rgba(255,69,0,0.15); }
.element-btn.air[b-z2ulhaaeco] { border-color: #87CEEB; }
.element-btn.air.selected[b-z2ulhaaeco] { border-color: #B0E0E6; box-shadow: 0 0 25px rgba(135,206,235,0.6); background: rgba(135,206,235,0.15); }
.element-btn.ether[b-z2ulhaaeco] { border-color: #9370DB; }
.element-btn.ether.selected[b-z2ulhaaeco] { border-color: #BA55D3; box-shadow: 0 0 25px rgba(147,112,219,0.6); background: rgba(147,112,219,0.15); }

.confirm-btn[b-z2ulhaaeco] {
    padding: 0.8rem 2.5rem;
    font-size: 1.1rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    border: 2px solid #ffd700;
    background: rgba(255,215,0,0.15);
    color: #ffd700;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 1rem;
    letter-spacing: 1px;
}

.confirm-btn:hover[b-z2ulhaaeco] {
    background: rgba(255,215,0,0.3);
    box-shadow: 0 0 20px rgba(255,215,0,0.4);
}

.confirm-btn:disabled[b-z2ulhaaeco] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== Pass Overlay ===== */
.pass-overlay[b-z2ulhaaeco] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    gap: 1.5rem;
}

.pass-overlay h2[b-z2ulhaaeco] {
    color: #ffd700;
    font-size: 2rem;
    font-family: 'Orbitron', sans-serif;
    text-shadow: 0 0 20px rgba(255,215,0,0.5);
}

.pass-overlay p[b-z2ulhaaeco] {
    color: #aaa;
    font-size: 1.1rem;
}

.pass-overlay button[b-z2ulhaaeco] {
    padding: 1rem 3rem;
    font-size: 1.2rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    border: 2px solid #ffd700;
    background: rgba(255,215,0,0.15);
    color: #ffd700;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

.pass-overlay button:hover[b-z2ulhaaeco] {
    background: rgba(255,215,0,0.3);
    box-shadow: 0 0 25px rgba(255,215,0,0.5);
}

/* ===== Game Board ===== */
.game-board[b-z2ulhaaeco] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* ===== Player Area ===== */
.player-area[b-z2ulhaaeco] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.5rem;
    border-radius: 8px;
    background: rgba(20,20,40,0.5);
    border: 1px solid #333;
}

.player-area.opponent[b-z2ulhaaeco] {
    border-color: #444;
}

.player-area.active-player[b-z2ulhaaeco] {
    border-color: #ffd700;
    box-shadow: 0 0 10px rgba(255,215,0,0.2);
}

/* ===== Hero Display ===== */
.hero-row[b-z2ulhaaeco] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.3rem 0.5rem;
}

.hero-avatar[b-z2ulhaaeco] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    position: relative;
    flex-shrink: 0;
    transition: all 0.3s;
}

.hero-avatar.earth[b-z2ulhaaeco] { background: radial-gradient(circle, #5C4033, #2E1A0E); box-shadow: 0 0 15px rgba(139,69,19,0.6); }
.hero-avatar.water[b-z2ulhaaeco] { background: radial-gradient(circle, #1565C0, #0D47A1); box-shadow: 0 0 15px rgba(30,144,255,0.6); animation: waterPulse-b-z2ulhaaeco 3s ease-in-out infinite; }
.hero-avatar.fire[b-z2ulhaaeco] { background: radial-gradient(circle, #E65100, #BF360C); box-shadow: 0 0 15px rgba(255,69,0,0.6); animation: firePulse-b-z2ulhaaeco 1.5s ease-in-out infinite; }
.hero-avatar.air[b-z2ulhaaeco] { background: radial-gradient(circle, #546E7A, #37474F); box-shadow: 0 0 15px rgba(135,206,235,0.6); animation: airFloat-b-z2ulhaaeco 4s ease-in-out infinite; }
.hero-avatar.ether[b-z2ulhaaeco] { background: radial-gradient(circle, #6A1B9A, #4A148C); box-shadow: 0 0 15px rgba(147,112,219,0.6); animation: etherShift-b-z2ulhaaeco 3s ease-in-out infinite; }

.hero-info[b-z2ulhaaeco] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.hero-name[b-z2ulhaaeco] {
    font-weight: bold;
    font-size: 0.9rem;
    font-family: 'Rajdhani', sans-serif;
    color: #ffd700;
}

.hp-bar-container[b-z2ulhaaeco] {
    width: 100%;
    height: 18px;
    background: #1a1a2e;
    border-radius: 9px;
    border: 1px solid #444;
    overflow: hidden;
    position: relative;
}

.hp-bar[b-z2ulhaaeco] {
    height: 100%;
    border-radius: 9px;
    transition: width 0.5s ease;
    background: linear-gradient(90deg, #e74c3c, #2ecc71);
}

.hp-text[b-z2ulhaaeco] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px black;
}

/* ===== Energy Pool ===== */
.energy-pool[b-z2ulhaaeco] {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.2rem 0;
}

.energy-pool-label[b-z2ulhaaeco] {
    font-size: 0.7rem;
    color: #888;
    margin-right: 0.3rem;
}

.energy-gem[b-z2ulhaaeco] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    border: 2px solid;
    transition: all 0.3s;
}

.energy-gem.tapped[b-z2ulhaaeco] {
    opacity: 0.35;
    filter: grayscale(0.7);
}

.energy-gem.earth-energy[b-z2ulhaaeco] { border-color: #8B4513; background: rgba(139,69,19,0.3); }
.energy-gem.water-energy[b-z2ulhaaeco] { border-color: #1E90FF; background: rgba(30,144,255,0.3); }
.energy-gem.fire-energy[b-z2ulhaaeco] { border-color: #FF4500; background: rgba(255,69,0,0.3); }
.energy-gem.air-energy[b-z2ulhaaeco] { border-color: #87CEEB; background: rgba(135,206,235,0.3); }
.energy-gem.ether-energy[b-z2ulhaaeco] { border-color: #9370DB; background: rgba(147,112,219,0.3); }

/* ===== Field (monsters on battlefield) ===== */
.field-row[b-z2ulhaaeco] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    min-height: 170px;
    padding: 0.3rem;
    flex-wrap: wrap;
}

.field-slot[b-z2ulhaaeco] {
    width: 120px;
    height: 160px;
    border: 1px dashed #333;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: #444;
}

/* ===== Battlefield Divider ===== */
.battlefield-divider[b-z2ulhaaeco] {
    text-align: center;
    padding: 0.3rem;
    color: #ffd700;
    font-size: 0.8rem;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 6px;
    border-top: 2px solid rgba(255,215,0,0.3);
    border-bottom: 2px solid rgba(255,215,0,0.3);
    background: linear-gradient(90deg, transparent, rgba(255,215,0,0.05), transparent);
    text-shadow: 0 0 10px rgba(255,215,0,0.3);
}

/* ===== Hand ===== */
.hand-row[b-z2ulhaaeco] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0.3rem;
    min-height: 210px;
}

/* ============================================================
   CARD STYLES — Base
   ============================================================ */
.game-card[b-z2ulhaaeco] {
    width: 140px;
    height: 200px;
    border-radius: 8px;
    border: 2px solid #555;
    background: linear-gradient(180deg, #1a1a2e 0%, #252545 100%);
    display: flex;
    flex-direction: column;
    padding: 0.25rem;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.game-card:hover[b-z2ulhaaeco] {
    transform: translateY(-10px) scale(1.08);
    z-index: 10;
    box-shadow: 0 12px 30px rgba(0,0,0,0.6);
}

.game-card.selected-card[b-z2ulhaaeco] {
    transform: translateY(-14px) scale(1.08);
    border-color: #ffd700 !important;
    box-shadow: 0 0 25px rgba(255,215,0,0.6);
}

.game-card.field-card[b-z2ulhaaeco] {
    width: 120px;
    height: 160px;
}

.game-card.field-card:hover[b-z2ulhaaeco] {
    transform: translateY(-6px) scale(1.08);
}

.game-card.can-attack[b-z2ulhaaeco] {
    border-color: #ff4444 !important;
    box-shadow: 0 0 12px rgba(255,68,68,0.5);
    animation: attackReady-b-z2ulhaaeco 1.5s ease-in-out infinite;
}

.game-card.frozen-card[b-z2ulhaaeco] {
    filter: brightness(0.7) saturate(0.5);
    border-color: #00BFFF !important;
}

.game-card.summoning-sick[b-z2ulhaaeco] {
    opacity: 0.7;
}

/* ============================================================
   CARD TYPE DIFFERENTIATION
   ============================================================ */

/* --- MONSTER CARDS --- */
.game-card.monster-card[b-z2ulhaaeco] {
    border-width: 3px;
}

.game-card.monster-card.earth-card[b-z2ulhaaeco] {
    background: linear-gradient(180deg, #1a1a2e 0%, #252545 50%, rgba(139,69,19,0.15) 100%);
    border-color: #8B4513;
    box-shadow: 0 0 8px rgba(139,69,19,0.4), inset 0 0 15px rgba(139,69,19,0.08);
}
.game-card.monster-card.water-card[b-z2ulhaaeco] {
    background: linear-gradient(180deg, #1a1a2e 0%, #252545 50%, rgba(30,144,255,0.15) 100%);
    border-color: #1E90FF;
    box-shadow: 0 0 8px rgba(30,144,255,0.4), inset 0 0 15px rgba(30,144,255,0.08);
}
.game-card.monster-card.fire-card[b-z2ulhaaeco] {
    background: linear-gradient(180deg, #1a1a2e 0%, #252545 50%, rgba(255,69,0,0.15) 100%);
    border-color: #FF4500;
    box-shadow: 0 0 8px rgba(255,69,0,0.4), inset 0 0 15px rgba(255,69,0,0.08);
}
.game-card.monster-card.air-card[b-z2ulhaaeco] {
    background: linear-gradient(180deg, #1a1a2e 0%, #252545 50%, rgba(135,206,235,0.15) 100%);
    border-color: #87CEEB;
    box-shadow: 0 0 8px rgba(135,206,235,0.4), inset 0 0 15px rgba(135,206,235,0.08);
}
.game-card.monster-card.ether-card[b-z2ulhaaeco] {
    background: linear-gradient(180deg, #1a1a2e 0%, #252545 50%, rgba(147,112,219,0.15) 100%);
    border-color: #9370DB;
    box-shadow: 0 0 8px rgba(147,112,219,0.4), inset 0 0 15px rgba(147,112,219,0.08);
}

/* --- SPELL CARDS --- */
.game-card.spell-card[b-z2ulhaaeco] {
    border-width: 3px;
    border-style: double;
}

.game-card.spell-card.earth-card[b-z2ulhaaeco] {
    background: linear-gradient(135deg, #1a150e 0%, #2a2015 50%, #1a150e 100%);
    border-color: #8B4513;
    box-shadow: 0 0 10px rgba(139,69,19,0.5), inset 0 0 20px rgba(139,69,19,0.1);
}
.game-card.spell-card.water-card[b-z2ulhaaeco] {
    background: linear-gradient(135deg, #0e1520 0%, #152535 50%, #0e1520 100%);
    border-color: #1E90FF;
    box-shadow: 0 0 10px rgba(30,144,255,0.5), inset 0 0 20px rgba(30,144,255,0.1);
}
.game-card.spell-card.fire-card[b-z2ulhaaeco] {
    background: linear-gradient(135deg, #200e0a 0%, #351515 50%, #200e0a 100%);
    border-color: #FF4500;
    box-shadow: 0 0 10px rgba(255,69,0,0.5), inset 0 0 20px rgba(255,69,0,0.1);
}
.game-card.spell-card.air-card[b-z2ulhaaeco] {
    background: linear-gradient(135deg, #0e1a1e 0%, #152530 50%, #0e1a1e 100%);
    border-color: #87CEEB;
    box-shadow: 0 0 10px rgba(135,206,235,0.5), inset 0 0 20px rgba(135,206,235,0.1);
}
.game-card.spell-card.ether-card[b-z2ulhaaeco] {
    background: linear-gradient(135deg, #1a0e25 0%, #251540 50%, #1a0e25 100%);
    border-color: #9370DB;
    box-shadow: 0 0 10px rgba(147,112,219,0.5), inset 0 0 20px rgba(147,112,219,0.1);
}

/* --- ITEM CARDS --- */
.game-card.item-card[b-z2ulhaaeco] {
    border-width: 3px;
    border-radius: 14px;
    border-color: #DAA520;
    background: linear-gradient(180deg, #2a2a1e 0%, #1a1a15 60%, rgba(218,165,32,0.1) 100%);
    box-shadow: 0 0 8px rgba(218,165,32,0.4), inset 0 0 12px rgba(218,165,32,0.06);
}

/* --- ENERGY CARDS --- */
.game-card.energy-card[b-z2ulhaaeco] {
    border-width: 3px;
    border-style: dashed;
    text-align: center;
}

.game-card.energy-card.earth-card[b-z2ulhaaeco] {
    background: radial-gradient(ellipse at center, rgba(139,69,19,0.25) 0%, #1a1510 70%);
    border-color: #D2691E;
    box-shadow: 0 0 12px rgba(139,69,19,0.5);
    animation: energyPulseEarth-b-z2ulhaaeco 3s ease-in-out infinite;
}
.game-card.energy-card.water-card[b-z2ulhaaeco] {
    background: radial-gradient(ellipse at center, rgba(30,144,255,0.25) 0%, #0e1520 70%);
    border-color: #00BFFF;
    box-shadow: 0 0 12px rgba(30,144,255,0.5);
    animation: energyPulseWater-b-z2ulhaaeco 3s ease-in-out infinite;
}
.game-card.energy-card.fire-card[b-z2ulhaaeco] {
    background: radial-gradient(ellipse at center, rgba(255,69,0,0.25) 0%, #1a0e0a 70%);
    border-color: #FF6347;
    box-shadow: 0 0 12px rgba(255,69,0,0.5);
    animation: energyPulseFire-b-z2ulhaaeco 2s ease-in-out infinite;
}
.game-card.energy-card.air-card[b-z2ulhaaeco] {
    background: radial-gradient(ellipse at center, rgba(135,206,235,0.25) 0%, #0e1518 70%);
    border-color: #B0E0E6;
    box-shadow: 0 0 12px rgba(135,206,235,0.5);
    animation: energyPulseAir-b-z2ulhaaeco 3s ease-in-out infinite;
}
.game-card.energy-card.ether-card[b-z2ulhaaeco] {
    background: radial-gradient(ellipse at center, rgba(147,112,219,0.25) 0%, #150e20 70%);
    border-color: #BA55D3;
    box-shadow: 0 0 12px rgba(147,112,219,0.5);
    animation: energyPulseEther-b-z2ulhaaeco 3s ease-in-out infinite;
}

.game-card.energy-card .card-emoji[b-z2ulhaaeco] {
    font-size: 3rem;
    margin-top: 0.5rem;
    filter: drop-shadow(0 0 8px currentColor);
}
.game-card.energy-card.field-card .card-emoji[b-z2ulhaaeco] {
    font-size: 2.2rem;
}

/* ============================================================
   CARD INNER ELEMENTS
   ============================================================ */

/* Card back (opponent hand) */
.card-back[b-z2ulhaaeco] {
    width: 140px;
    height: 200px;
    border-radius: 8px;
    border: 2px solid #444;
    background: repeating-linear-gradient(45deg, #1a1a2e, #1a1a2e 5px, #222244 5px, #222244 10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
}

/* Cost badge — element colored */
.card-cost[b-z2ulhaaeco] {
    position: absolute;
    top: 3px;
    left: 3px;
    min-width: 26px;
    height: 26px;
    border-radius: 13px;
    background: #333;
    border: 1px solid #666;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 0.75rem;
    font-weight: bold;
    font-family: 'Rajdhani', sans-serif;
    color: #fff;
    padding: 0 4px;
    z-index: 2;
}

.card-cost.earth-cost[b-z2ulhaaeco] { background: linear-gradient(135deg, #5C4033, #8B4513); border-color: #D2691E; }
.card-cost.water-cost[b-z2ulhaaeco] { background: linear-gradient(135deg, #0D47A1, #1565C0); border-color: #1E90FF; }
.card-cost.fire-cost[b-z2ulhaaeco] { background: linear-gradient(135deg, #BF360C, #E65100); border-color: #FF4500; }
.card-cost.air-cost[b-z2ulhaaeco] { background: linear-gradient(135deg, #37474F, #546E7A); border-color: #87CEEB; }
.card-cost.ether-cost[b-z2ulhaaeco] { background: linear-gradient(135deg, #4A148C, #6A1B9A); border-color: #9370DB; }

.card-cost .cost-icon[b-z2ulhaaeco] {
    font-size: 0.6rem;
}

/* Card type label */
.card-type-label[b-z2ulhaaeco] {
    text-align: center;
    font-size: 0.55rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 0.05rem 0;
    color: #999;
}

.spell-card .card-type-label[b-z2ulhaaeco] { color: #c79dff; }
.item-card .card-type-label[b-z2ulhaaeco] { color: #DAA520; }
.energy-card .card-type-label[b-z2ulhaaeco] { color: #aaa; }

/* Card emoji */
.card-emoji[b-z2ulhaaeco] {
    text-align: center;
    font-size: 2.2rem;
    margin-top: 0.1rem;
    line-height: 1.2;
}

.field-card .card-emoji[b-z2ulhaaeco] {
    font-size: 1.8rem;
}

/* Card name — graffiti style */
.card-name[b-z2ulhaaeco] {
    text-align: center;
    font-size: 0.72rem;
    font-family: 'Bangers', cursive;
    letter-spacing: 0.8px;
    color: #fff;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 rgba(0,0,0,0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 3px;
}

.field-card .card-name[b-z2ulhaaeco] {
    font-size: 0.65rem;
}

/* Card stats */
.card-stats[b-z2ulhaaeco] {
    display: flex;
    justify-content: space-between;
    padding: 0 6px;
    margin-top: auto;
    font-size: 0.85rem;
    font-weight: bold;
    font-family: 'Rajdhani', sans-serif;
}

.field-card .card-stats[b-z2ulhaaeco] {
    font-size: 0.8rem;
}

.card-atk[b-z2ulhaaeco] { color: #ff6b6b; text-shadow: 0 0 6px rgba(255,107,107,0.4); }
.card-hp[b-z2ulhaaeco] { color: #51cf66; text-shadow: 0 0 6px rgba(81,207,102,0.4); }

/* Card ability text */
.card-ability-hint[b-z2ulhaaeco] {
    text-align: center;
    font-size: 0.58rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 500;
    color: #e67e22;
    padding: 1px 4px;
    white-space: normal;
    line-height: 1.2;
    max-height: 2.6em;
    overflow: hidden;
}

.field-card .card-ability-hint[b-z2ulhaaeco] {
    font-size: 0.52rem;
    max-height: 2em;
}

/* Rarity indicators */
.rarity-gem[b-z2ulhaaeco] {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    z-index: 2;
}
.rarity-gem.common[b-z2ulhaaeco] { background: #888; }
.rarity-gem.uncommon[b-z2ulhaaeco] { background: #2ecc71; box-shadow: 0 0 6px #2ecc71; }
.rarity-gem.rare[b-z2ulhaaeco] { background: #3498db; box-shadow: 0 0 8px #3498db; }
.rarity-gem.legendary[b-z2ulhaaeco] { background: #ffd700; box-shadow: 0 0 10px #ffd700; animation: legendaryGlow-b-z2ulhaaeco 2s ease-in-out infinite; }

/* Rarity bottom strip */
.game-card.rarity-uncommon[b-z2ulhaaeco] { border-bottom: 3px solid #2ecc71; }
.game-card.rarity-rare[b-z2ulhaaeco] { border-bottom: 3px solid #3498db; }
.game-card.rarity-legendary[b-z2ulhaaeco] { border-bottom: 3px solid #ffd700; }

/* ===== Turn / Phase Info ===== */
.turn-bar[b-z2ulhaaeco] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 1rem;
    background: rgba(30,30,50,0.8);
    border-radius: 6px;
    border: 1px solid #444;
}

.turn-info[b-z2ulhaaeco] {
    font-size: 0.85rem;
    font-family: 'Rajdhani', sans-serif;
    color: #aaa;
}

.phase-info[b-z2ulhaaeco] {
    font-size: 0.85rem;
    font-family: 'Orbitron', sans-serif;
    color: #ffd700;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(255,215,0,0.3);
}

.action-buttons[b-z2ulhaaeco] {
    display: flex;
    gap: 0.5rem;
}

.action-btn[b-z2ulhaaeco] {
    padding: 0.3rem 1rem;
    border: 1px solid #555;
    background: rgba(40,40,60,0.8);
    color: #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    transition: all 0.2s;
}

.action-btn:hover[b-z2ulhaaeco] {
    border-color: #ffd700;
    color: #ffd700;
    background: rgba(255,215,0,0.1);
}

.action-btn.primary-action[b-z2ulhaaeco] {
    border-color: #ffd700;
    color: #ffd700;
}

.action-btn:disabled[b-z2ulhaaeco] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== Game Log ===== */
.game-log[b-z2ulhaaeco] {
    max-height: 100px;
    overflow-y: auto;
    padding: 0.4rem 0.6rem;
    background: rgba(10,10,20,0.8);
    border-radius: 4px;
    border: 1px solid #222;
    font-size: 0.7rem;
    font-family: 'Rajdhani', sans-serif;
    color: #888;
}

.game-log p[b-z2ulhaaeco] {
    margin: 0.1rem 0;
    padding: 0;
}

.log-damage[b-z2ulhaaeco] { color: #e74c3c; }
.log-heal[b-z2ulhaaeco] { color: #2ecc71; }
.log-play[b-z2ulhaaeco] { color: #3498db; }
.log-energy[b-z2ulhaaeco] { color: #f1c40f; }
.log-ability[b-z2ulhaaeco] { color: #e67e22; }
.log-death[b-z2ulhaaeco] { color: #ff6b6b; }

/* ===== Targeting Overlay ===== */
.targeting-hint[b-z2ulhaaeco] {
    text-align: center;
    padding: 0.4rem;
    background: rgba(255,68,68,0.15);
    border: 1px solid #ff4444;
    border-radius: 4px;
    color: #ff6b6b;
    font-size: 0.8rem;
    animation: pulse-b-z2ulhaaeco 1.5s ease-in-out infinite;
}

.targetable[b-z2ulhaaeco] {
    border: 3px solid #ff4444 !important;
    box-shadow: 0 0 15px rgba(255,68,68,0.6) !important;
    cursor: crosshair !important;
}

.hero-targetable[b-z2ulhaaeco] {
    box-shadow: 0 0 20px rgba(255,68,68,0.7) !important;
    cursor: crosshair !important;
}

/* ===== Card Tooltip ===== */
.card-tooltip[b-z2ulhaaeco] {
    position: fixed;
    background: #1a1a2e;
    border: 2px solid #ffd700;
    border-radius: 8px;
    padding: 0.8rem;
    z-index: 500;
    min-width: 220px;
    max-width: 280px;
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
    pointer-events: none;
    font-family: 'Rajdhani', sans-serif;
}

.card-tooltip .tt-name[b-z2ulhaaeco] { color: #ffd700; font-weight: bold; font-size: 1rem; font-family: 'Bangers', cursive; }
.card-tooltip .tt-type[b-z2ulhaaeco] { color: #888; font-size: 0.75rem; }
.card-tooltip .tt-stats[b-z2ulhaaeco] { color: #ccc; font-size: 0.85rem; margin: 0.3rem 0; }
.card-tooltip .tt-ability[b-z2ulhaaeco] { color: #e67e22; font-size: 0.8rem; margin-top: 0.3rem; }
.card-tooltip .tt-desc[b-z2ulhaaeco] { color: #aaa; font-size: 0.75rem; font-style: italic; }

/* ===== Game Over ===== */
.game-over-overlay[b-z2ulhaaeco] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    gap: 1rem;
}

.game-over-overlay h1[b-z2ulhaaeco] {
    font-size: 3rem;
    font-family: 'Orbitron', sans-serif;
    color: #ffd700;
    text-shadow: 0 0 40px rgba(255,215,0,0.6);
    animation: victoryPulse-b-z2ulhaaeco 2s ease-in-out infinite;
}

.game-over-overlay h3[b-z2ulhaaeco] {
    color: #aaa;
    font-family: 'Rajdhani', sans-serif;
}

/* ============================================================
   DAMAGE / COMBAT ANIMATIONS
   ============================================================ */

/* Damage flash on hit */
@keyframes damageFlash-b-z2ulhaaeco {
    0% { filter: brightness(1); transform: scale(1); }
    15% { filter: brightness(2.5) sepia(1) hue-rotate(-30deg); transform: scale(1.08); }
    30% { filter: brightness(0.6); transform: scale(0.95); }
    100% { filter: brightness(1); transform: scale(1); }
}

.damage-flash[b-z2ulhaaeco] {
    animation: damageFlash-b-z2ulhaaeco 0.5s ease-out !important;
    z-index: 20;
}

/* Hero damage flash */
@keyframes heroDamageFlash-b-z2ulhaaeco {
    0% { filter: brightness(1); box-shadow: inherit; }
    20% { filter: brightness(2) sepia(1) hue-rotate(-30deg); box-shadow: 0 0 30px rgba(255,0,0,0.8) !important; }
    100% { filter: brightness(1); }
}

.hero-damage-flash[b-z2ulhaaeco] {
    animation: heroDamageFlash-b-z2ulhaaeco 0.6s ease-out !important;
}

/* Floating damage number */
@keyframes floatDamage-b-z2ulhaaeco {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    50% { opacity: 1; transform: translateY(-25px) scale(1.3); }
    100% { opacity: 0; transform: translateY(-50px) scale(0.8); }
}

.damage-popup[b-z2ulhaaeco] {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.6rem;
    font-family: 'Bangers', cursive;
    color: #ff4444;
    text-shadow: 0 0 10px rgba(255,0,0,0.8), 2px 2px 0 #000;
    pointer-events: none;
    z-index: 30;
    animation: floatDamage-b-z2ulhaaeco 1s ease-out forwards;
}

.damage-popup.heal-popup[b-z2ulhaaeco] {
    color: #51cf66;
    text-shadow: 0 0 10px rgba(81,207,102,0.8), 2px 2px 0 #000;
}

/* Card played animation */
@keyframes cardPlay-b-z2ulhaaeco {
    0% { transform: scale(0.5) translateY(30px); opacity: 0; }
    60% { transform: scale(1.1) translateY(-5px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.card-played-anim[b-z2ulhaaeco] {
    animation: cardPlay-b-z2ulhaaeco 0.5s ease-out;
}

/* ===== Element-specific Animations ===== */
@keyframes firePulse-b-z2ulhaaeco {
    0%, 100% { box-shadow: 0 0 15px rgba(255,69,0,0.6); }
    50% { box-shadow: 0 0 30px rgba(255,69,0,0.9), 0 0 50px rgba(255,165,0,0.3); }
}

@keyframes waterPulse-b-z2ulhaaeco {
    0%, 100% { box-shadow: 0 0 15px rgba(30,144,255,0.6); }
    50% { box-shadow: 0 0 25px rgba(30,144,255,0.8); }
}

@keyframes airFloat-b-z2ulhaaeco {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes etherShift-b-z2ulhaaeco {
    0%, 100% { box-shadow: 0 0 15px rgba(147,112,219,0.6); }
    33% { box-shadow: 0 0 20px rgba(186,85,211,0.8); }
    66% { box-shadow: 0 0 20px rgba(255,215,0,0.4); }
}

@keyframes legendaryGlow-b-z2ulhaaeco {
    0%, 100% { box-shadow: 0 0 10px #ffd700; }
    50% { box-shadow: 0 0 20px #ffd700, 0 0 30px rgba(255,215,0,0.4); }
}

@keyframes attackReady-b-z2ulhaaeco {
    0%, 100% { box-shadow: 0 0 12px rgba(255,68,68,0.5); }
    50% { box-shadow: 0 0 20px rgba(255,68,68,0.8), 0 0 30px rgba(255,68,68,0.3); }
}

@keyframes pulse-b-z2ulhaaeco {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes victoryPulse-b-z2ulhaaeco {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Energy card pulsing glow per element */
@keyframes energyPulseEarth-b-z2ulhaaeco {
    0%, 100% { box-shadow: 0 0 12px rgba(139,69,19,0.5); }
    50% { box-shadow: 0 0 20px rgba(210,105,30,0.7); }
}
@keyframes energyPulseWater-b-z2ulhaaeco {
    0%, 100% { box-shadow: 0 0 12px rgba(30,144,255,0.5); }
    50% { box-shadow: 0 0 20px rgba(0,191,255,0.7); }
}
@keyframes energyPulseFire-b-z2ulhaaeco {
    0%, 100% { box-shadow: 0 0 12px rgba(255,69,0,0.5); }
    50% { box-shadow: 0 0 22px rgba(255,99,71,0.8); }
}
@keyframes energyPulseAir-b-z2ulhaaeco {
    0%, 100% { box-shadow: 0 0 12px rgba(135,206,235,0.5); }
    50% { box-shadow: 0 0 20px rgba(176,224,230,0.7); }
}
@keyframes energyPulseEther-b-z2ulhaaeco {
    0%, 100% { box-shadow: 0 0 12px rgba(147,112,219,0.5); }
    50% { box-shadow: 0 0 22px rgba(186,85,211,0.8); }
}

/* ===== Scrollbar ===== */
.game-log[b-z2ulhaaeco]::-webkit-scrollbar { width: 4px; }
.game-log[b-z2ulhaaeco]::-webkit-scrollbar-track { background: transparent; }
.game-log[b-z2ulhaaeco]::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }
/* /Components/Pages/CardInvestor.razor.rz.scp.css */
/* Card Investor - Scoped Styles */
.ci-container[b-3jmlibcdri] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    color: #e0e0e0;
    width: 100%;
    box-sizing: border-box;
}

.ci-header[b-3jmlibcdri] {
    margin-bottom: 20px;
}

.ci-header h2[b-3jmlibcdri] {
    color: #ffc107;
    margin: 0;
    font-size: 1.8em;
}

.ci-subtitle[b-3jmlibcdri] {
    color: #888;
    margin: 4px 0 0;
    font-size: 0.9em;
}

/* Tabs */
.ci-tabs[b-3jmlibcdri] {
    display: flex;
    gap: 2px;
    border-bottom: 2px solid #333;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.ci-tab[b-3jmlibcdri] {
    background: transparent;
    border: none;
    color: #888;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 0.9em;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: all 0.2s;
    position: relative;
}

.ci-tab:hover[b-3jmlibcdri] {
    color: #ccc;
    background: rgba(255, 255, 255, 0.03);
}

.ci-tab.active[b-3jmlibcdri] {
    color: #ffc107;
    border-bottom-color: #ffc107;
}

.ci-badge[b-3jmlibcdri] {
    background: #e53935;
    color: white;
    font-size: 0.7em;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: top;
}

/* Panels */
.ci-panel[b-3jmlibcdri] {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
}

.ci-panel h3[b-3jmlibcdri], .ci-panel h4[b-3jmlibcdri], .ci-panel h5[b-3jmlibcdri] {
    color: #ddd;
    margin-bottom: 12px;
}

/* Summary Cards */
.ci-summary-cards[b-3jmlibcdri] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
    width: 100%;
}

@media (min-width: 900px) {
    .ci-summary-cards[b-3jmlibcdri] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.ci-card[b-3jmlibcdri] {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #333;
}

.ci-card-label[b-3jmlibcdri] {
    font-size: 0.8em;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ci-card-value[b-3jmlibcdri] {
    font-size: 1.5em;
    font-weight: bold;
    margin-top: 4px;
    color: #e0e0e0;
}

.ci-card-green .ci-card-value[b-3jmlibcdri] { color: #4caf50; }
.ci-card-red .ci-card-value[b-3jmlibcdri] { color: #e53935; }

/* Tables */
.ci-table-wrap[b-3jmlibcdri] {
    width: 100%;
    overflow-x: auto;
}

.ci-table[b-3jmlibcdri] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
    min-width: 600px;
}

.ci-table th[b-3jmlibcdri] {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 2px solid #333;
    color: #999;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.5px;
}

.ci-table td[b-3jmlibcdri] {
    padding: 8px 12px;
    border-bottom: 1px solid #2a2a3e;
}

.ci-table tbody tr:hover[b-3jmlibcdri] {
    background: rgba(255, 255, 255, 0.03);
}

.ci-row-green td:nth-child(6)[b-3jmlibcdri],
.ci-row-green td:nth-child(7)[b-3jmlibcdri] { color: #4caf50; }

.ci-row-red td:nth-child(6)[b-3jmlibcdri],
.ci-row-red td:nth-child(7)[b-3jmlibcdri] { color: #e53935; }

.ci-row-sold[b-3jmlibcdri] { opacity: 0.5; }

.ci-portfolio-totals[b-3jmlibcdri] {
    border-top: 2px solid #ffc107;
    background: rgba(255, 193, 7, 0.05);
}
.ci-portfolio-totals td[b-3jmlibcdri] { padding-top: 10px; padding-bottom: 10px; }

/* Portfolio mode toggle (Investments / Personal Collection) */
.ci-portfolio-mode-toggle[b-3jmlibcdri] {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
    width: fit-content;
}
.ci-mode-btn[b-3jmlibcdri] {
    padding: 8px 18px;
    background: transparent;
    color: #888;
    border: none;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ci-mode-btn:hover[b-3jmlibcdri] { background: rgba(255,255,255,0.05); color: #ccc; }
.ci-mode-btn.ci-mode-active[b-3jmlibcdri] {
    background: rgba(255, 193, 7, 0.12);
    color: #ffc107;
    font-weight: 600;
}
.ci-mode-count[b-3jmlibcdri] {
    background: rgba(255,255,255,0.08);
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.8em;
    min-width: 20px;
    text-align: center;
}
.ci-mode-active .ci-mode-count[b-3jmlibcdri] {
    background: rgba(255, 193, 7, 0.2);
}
.ci-pc-card-name[b-3jmlibcdri] { font-weight: 500; }
.ci-portfolio-card-link[b-3jmlibcdri] { color: #ffc107; text-decoration: none; cursor: pointer; font-weight: 500; }
.ci-portfolio-card-link:hover[b-3jmlibcdri] { text-decoration: underline; color: #ffecb3; }
.ci-lowest-link[b-3jmlibcdri] { color: #4db8ff; text-decoration: none; cursor: pointer; }
.ci-lowest-link:hover[b-3jmlibcdri] { text-decoration: underline; color: #80cfff; }

.ci-row-yellow[b-3jmlibcdri] { background: rgba(255, 193, 7, 0.05); }
.ci-row-critical[b-3jmlibcdri] {
    background: rgba(229, 57, 53, 0.1);
    animation: ci-pulse-b-3jmlibcdri 2s infinite;
}

@keyframes ci-pulse-b-3jmlibcdri {
    0%, 100% { background: rgba(229, 57, 53, 0.05); }
    50% { background: rgba(229, 57, 53, 0.15); }
}

.ci-text-green[b-3jmlibcdri] { color: #4caf50; }
.ci-text-red[b-3jmlibcdri] { color: #e53935; }

/* Toolbar */
.ci-toolbar[b-3jmlibcdri] {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.ci-search[b-3jmlibcdri] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #444;
    color: #e0e0e0;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.9em;
    min-width: 200px;
}

.ci-filter[b-3jmlibcdri] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #444;
    color: #e0e0e0;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.85em;
}

/* Force dark theme on all select options (prevents white-on-white in OS dropdowns) */
.ci-filter[b-3jmlibcdri],
.ci-field select[b-3jmlibcdri],
.ci-search[b-3jmlibcdri] {
    color-scheme: dark;
}

.ci-filter option[b-3jmlibcdri],
.ci-search option[b-3jmlibcdri],
.ci-field select option[b-3jmlibcdri] {
    background: #1a1a2e;
    color: #e0e0e0;
}

.ci-checkbox[b-3jmlibcdri] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #aaa;
    font-size: 0.9em;
    cursor: pointer;
}

/* Buttons */
.ci-btn[b-3jmlibcdri] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid #555;
    color: #ccc;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s;
}

.ci-btn:hover[b-3jmlibcdri] {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.ci-btn-primary[b-3jmlibcdri] {
    background: #ffc107;
    color: #1a1a2e;
    border-color: #ffc107;
    font-weight: 600;
}

.ci-btn-primary:hover[b-3jmlibcdri] {
    background: #ffca28;
    color: #1a1a2e;
}

.ci-btn-sm[b-3jmlibcdri] {
    font-size: 0.8em;
    padding: 4px 10px;
}

.ci-btn-sm[b-3jmlibcdri] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid #555;
    color: #ccc;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8em;
}

.ci-btn-sm:hover[b-3jmlibcdri] { background: rgba(255, 255, 255, 0.1); }

.ci-btn-danger[b-3jmlibcdri] {
    border-color: #e53935;
    color: #e53935;
}

.ci-btn-danger:hover[b-3jmlibcdri] {
    background: rgba(229, 57, 53, 0.15);
}

.ci-btn-accent[b-3jmlibcdri] {
    border-color: #ffc107;
    color: #ffc107;
}

.ci-btn-accent:hover[b-3jmlibcdri] {
    background: rgba(255, 193, 7, 0.15);
}

.ci-btn-accent:disabled[b-3jmlibcdri] {
    opacity: 0.6;
    cursor: wait;
}

/* Forms */
.ci-form-panel[b-3jmlibcdri] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.ci-form-grid[b-3jmlibcdri] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
    width: 100%;
}

.ci-field label[b-3jmlibcdri] {
    display: block;
    font-size: 0.8em;
    color: #888;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ci-field input[b-3jmlibcdri],
.ci-field select[b-3jmlibcdri],
.ci-field textarea[b-3jmlibcdri] {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid #444;
    color: #e0e0e0;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.9em;
    box-sizing: border-box;
}

.ci-field input:focus[b-3jmlibcdri],
.ci-field select:focus[b-3jmlibcdri],
.ci-field textarea:focus[b-3jmlibcdri] {
    border-color: #ffc107;
    outline: none;
}

.ci-field-full[b-3jmlibcdri] {
    grid-column: 1 / -1;
}

.ci-form-actions[b-3jmlibcdri] {
    display: flex;
    gap: 8px;
}

/* Product Grid — Vertical card layout with full-size images */
.ci-product-grid[b-3jmlibcdri] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
    width: 100%;
}

.ci-product-card[b-3jmlibcdri] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
}

.ci-product-card:hover[b-3jmlibcdri] {
    border-color: #555;
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-2px);
}

.ci-product-card.ci-selected[b-3jmlibcdri] {
    border-color: #ffc107;
    background: rgba(255, 193, 7, 0.05);
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.3);
}

.ci-product-img[b-3jmlibcdri] {
    width: 100%;
    aspect-ratio: 5 / 7;
    object-fit: cover;
    display: block;
}

.ci-product-img-placeholder[b-3jmlibcdri] {
    width: 100%;
    aspect-ratio: 5 / 7;
    background: rgba(255, 193, 7, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    font-weight: bold;
    color: #ffc107;
}

.ci-product-info[b-3jmlibcdri] {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
}

.ci-product-actions[b-3jmlibcdri] {
    display: flex;
    gap: 4px;
    padding: 0 12px 10px;
    justify-content: flex-end;
}

/* Pagination */
.ci-products-pagination[b-3jmlibcdri] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
}

.ci-products-page-info[b-3jmlibcdri] {
    color: #888;
    font-size: 0.85em;
}

.ci-product-name[b-3jmlibcdri] {
    font-weight: 600;
    font-size: 0.85em;
    color: #e0e0e0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
}

.ci-product-subtitle[b-3jmlibcdri] {
    font-size: 0.75em;
    color: #888;
}

.ci-product-meta[b-3jmlibcdri] {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.ci-tag[b-3jmlibcdri] {
    font-size: 0.7em;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
}

.ci-tag-type[b-3jmlibcdri] { background: rgba(33, 150, 243, 0.15); color: #2196f3; }
.ci-tag-lang[b-3jmlibcdri] { background: rgba(76, 175, 80, 0.15); color: #4caf50; }
.ci-tag-oop[b-3jmlibcdri] { background: rgba(229, 57, 53, 0.15); color: #e53935; }

.ci-product-price[b-3jmlibcdri] {
    font-size: 0.95em;
    font-weight: bold;
    color: #ffc107;
    margin-top: 4px;
}

.ci-product-actions[b-3jmlibcdri] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-self: center;
}

/* Detail Panel */
.ci-detail-panel[b-3jmlibcdri] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 20px;
    margin-top: 16px;
}

/* Charts */
.ci-chart-container[b-3jmlibcdri] {
    margin-top: 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 16px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.ci-chart-wrap[b-3jmlibcdri] {
    position: relative;
    width: 100%;
    height: 250px;
}

.ci-chart-wrap canvas[b-3jmlibcdri] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

/* Scarcity badges */
.ci-scarcity-badge[b-3jmlibcdri] {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
    text-transform: uppercase;
}

.ci-scarcity-abundant[b-3jmlibcdri] { background: rgba(76, 175, 80, 0.15); color: #4caf50; }
.ci-scarcity-normal[b-3jmlibcdri] { background: rgba(76, 175, 80, 0.1); color: #66bb6a; }
.ci-scarcity-thinning[b-3jmlibcdri] { background: rgba(255, 193, 7, 0.15); color: #ffc107; }
.ci-scarcity-scarce[b-3jmlibcdri] { background: rgba(229, 57, 53, 0.15); color: #e53935; }
.ci-scarcity-critical[b-3jmlibcdri] {
    background: rgba(229, 57, 53, 0.25);
    color: #ff5252;
    animation: ci-pulse-b-3jmlibcdri 2s infinite;
}

/* Scarcity score bar */
.ci-score-bar[b-3jmlibcdri] {
    width: 60px;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    margin-top: 4px;
    overflow: hidden;
}

.ci-score-fill[b-3jmlibcdri] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.ci-score-fill.ci-score-abundant[b-3jmlibcdri] { background: #4caf50; }
.ci-score-fill.ci-score-normal[b-3jmlibcdri] { background: #66bb6a; }
.ci-score-fill.ci-score-thinning[b-3jmlibcdri] { background: #ffc107; }
.ci-score-fill.ci-score-scarce[b-3jmlibcdri] { background: #e53935; }
.ci-score-fill.ci-score-critical[b-3jmlibcdri] { background: #ff5252; }

/* Market Regime Badges */
.ci-regime-badge[b-3jmlibcdri] {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.7em;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
}

.ci-regime-accumulation[b-3jmlibcdri] { background: rgba(76, 175, 80, 0.2); color: #4caf50; border: 1px solid rgba(76, 175, 80, 0.4); }
.ci-regime-distribution[b-3jmlibcdri] { background: rgba(255, 152, 0, 0.2); color: #ff9800; border: 1px solid rgba(255, 152, 0, 0.4); }
.ci-regime-strongmomentum[b-3jmlibcdri] { background: rgba(33, 150, 243, 0.2); color: #2196f3; border: 1px solid rgba(33, 150, 243, 0.4); }
.ci-regime-weakmomentum[b-3jmlibcdri] { background: rgba(33, 150, 243, 0.1); color: #64b5f6; border: 1px solid rgba(33, 150, 243, 0.2); }
.ci-regime-meanreversion[b-3jmlibcdri] { background: rgba(229, 57, 53, 0.15); color: #ef5350; border: 1px solid rgba(229, 57, 53, 0.3); }
.ci-regime-neutral[b-3jmlibcdri] { background: rgba(158, 158, 158, 0.1); color: #9e9e9e; border: 1px solid rgba(158, 158, 158, 0.2); }
.ci-regime-insufficientdata[b-3jmlibcdri] { background: rgba(97, 97, 97, 0.1); color: #616161; border: 1px solid rgba(97, 97, 97, 0.2); }

/* RSI Indicators */
.ci-rsi-overbought[b-3jmlibcdri] { color: #ff5252; font-weight: bold; }
.ci-rsi-oversold[b-3jmlibcdri] { color: #4caf50; font-weight: bold; }
.ci-rsi-neutral[b-3jmlibcdri] { color: #bbb; }

/* Seller Count Colors */
.ci-sellers-critical[b-3jmlibcdri] { color: #ff5252; font-weight: bold; }
.ci-sellers-scarce[b-3jmlibcdri] { color: #ff9800; font-weight: bold; }
.ci-sellers-thinning[b-3jmlibcdri] { color: #ffc107; }
.ci-sellers-normal[b-3jmlibcdri] { color: #66bb6a; }
.ci-sellers-abundant[b-3jmlibcdri] { color: #9e9e9e; }

/* Sub-Score Bar (stacked horizontal mini-bar) */
.ci-subscore-bar[b-3jmlibcdri] {
    display: flex;
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
    gap: 1px;
    min-width: 60px;
    margin-bottom: 2px;
}

.ci-sub[b-3jmlibcdri] { height: 100%; border-radius: 1px; min-width: 1px; }
.ci-sub-supply[b-3jmlibcdri] { background: #e53935; }
.ci-sub-demand[b-3jmlibcdri] { background: #ff9800; }
.ci-sub-tech[b-3jmlibcdri] { background: #2196f3; }
.ci-sub-struct[b-3jmlibcdri] { background: #9c27b0; }

/* Alert Items */
.ci-alert-item[b-3jmlibcdri] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #333;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ci-alert-unread[b-3jmlibcdri] {
    border-left: 3px solid #ffc107;
    background: rgba(255, 193, 7, 0.04);
}

.ci-alert-content[b-3jmlibcdri] {
    flex: 1;
}

.ci-alert-meta[b-3jmlibcdri] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ci-alert-time[b-3jmlibcdri] {
    font-size: 0.8em;
    color: #666;
}

/* Status */
.ci-status[b-3jmlibcdri] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 0.9em;
    z-index: 1000;
    animation: ci-slide-in-b-3jmlibcdri 0.3s ease;
}

.ci-status-success[b-3jmlibcdri] {
    background: rgba(76, 175, 80, 0.9);
    color: white;
}

.ci-status-error[b-3jmlibcdri] {
    background: rgba(229, 57, 53, 0.9);
    color: white;
}

@keyframes ci-slide-in-b-3jmlibcdri {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Empty states */
.ci-empty[b-3jmlibcdri] {
    text-align: center;
    color: #666;
    padding: 40px 20px;
    font-style: italic;
}

.mt-3[b-3jmlibcdri] { margin-top: 16px; }

/* View Toggle */
.ci-view-toggle[b-3jmlibcdri] {
    margin-left: auto;
    background: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.3);
    color: #ffc107;
}

.ci-view-toggle:hover[b-3jmlibcdri] {
    background: rgba(255, 193, 7, 0.2);
    color: #ffca28;
}

/* Product Table View */
.ci-product-table[b-3jmlibcdri] {
    min-width: 800px;
}

.ci-sortable[b-3jmlibcdri] {
    cursor: pointer;
    user-select: none;
}

.ci-sortable:hover[b-3jmlibcdri] {
    color: #ffc107;
}

.ci-table-name[b-3jmlibcdri] {
    font-weight: 600;
    color: #e0e0e0;
    font-size: 0.9em;
}

.ci-table-subtitle[b-3jmlibcdri] {
    font-size: 0.75em;
    color: #666;
}

.ci-table-set[b-3jmlibcdri] {
    font-size: 0.85em;
    color: #aaa;
}

.ci-table-price[b-3jmlibcdri] {
    font-weight: 700;
    color: #ffc107;
}

.ci-row-selected[b-3jmlibcdri] {
    background: rgba(255, 193, 7, 0.08) !important;
    border-left: 3px solid #ffc107;
}

.ci-product-table td[b-3jmlibcdri] {
    vertical-align: middle;
}

/* Smaller tags in cards */
.ci-tag[b-3jmlibcdri] {
    font-size: 0.65em;
    padding: 1px 5px;
}

/* ==================== BROWSE TCG TAB ==================== */

.ci-browse-set-header[b-3jmlibcdri] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #1a1a2e;
    border: 1px solid #333;
    border-radius: 8px;
    margin-bottom: 12px;
}

.ci-browse-set-header-name[b-3jmlibcdri] {
    font-weight: 600;
    color: #ffc107;
    font-size: 1em;
}

.ci-browse-set-header-count[b-3jmlibcdri] {
    color: #888;
    font-size: 0.85em;
    margin-left: auto;
}

/* Set-level analytics bar */
.ci-set-analytics[b-3jmlibcdri] {
    display: flex;
    gap: 16px;
    padding: 10px 16px;
    background: rgba(255, 193, 7, 0.04);
    border: 1px solid #333;
    border-radius: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.ci-set-stat[b-3jmlibcdri] {
    display: flex;
    flex-direction: column;
    min-width: 100px;
}
.ci-set-stat-val[b-3jmlibcdri] {
    font-weight: 700;
    font-size: 1em;
    color: #ffc107;
}
.ci-set-stat-label[b-3jmlibcdri] {
    font-size: 0.72em;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ci-set-stat-top .ci-set-stat-val[b-3jmlibcdri] { color: #4caf50; }
.ci-set-stat-top .ci-set-stat-label[b-3jmlibcdri] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.ci-browse-panel[b-3jmlibcdri] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ci-browse-search[b-3jmlibcdri] {
    display: flex;
    gap: 8px;
}

.ci-browse-input[b-3jmlibcdri] {
    flex: 1;
    min-width: 200px;
}

.ci-browse-filters[b-3jmlibcdri] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.ci-browse-filter-group[b-3jmlibcdri] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ci-browse-filter-group label[b-3jmlibcdri] {
    color: #aaa;
    font-size: 0.85em;
    white-space: nowrap;
}

/* Japanese Sets Quick Cards */
.ci-jp-sets h4[b-3jmlibcdri] {
    color: #ffc107;
    margin: 0 0 10px;
    font-size: 1em;
}

.ci-jp-set-grid[b-3jmlibcdri] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

.ci-jp-set-card[b-3jmlibcdri] {
    background: #1e1e2e;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    transition: border-color 0.15s, background 0.15s;
}

.ci-jp-set-card:hover[b-3jmlibcdri] {
    border-color: #555;
    background: #252538;
}

.ci-jp-set-card.ci-selected[b-3jmlibcdri] {
    border-color: #ffc107;
    background: #2a2a3e;
}

.ci-set-symbol[b-3jmlibcdri] {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.ci-jp-set-info[b-3jmlibcdri] {
    flex: 1;
    min-width: 0;
}

.ci-jp-set-name[b-3jmlibcdri] {
    font-weight: 600;
    color: #e0e0e0;
    font-size: 0.95em;
}

.ci-jp-set-code[b-3jmlibcdri] {
    color: #888;
    font-size: 0.8em;
    margin-top: 2px;
}

.ci-jp-set-date[b-3jmlibcdri] {
    color: #666;
    font-size: 0.75em;
}

.ci-jp-set-products[b-3jmlibcdri] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-shrink: 0;
}

.ci-tag-product[b-3jmlibcdri] {
    background: #1a3a1a;
    color: #6abf69;
    font-size: 0.7em;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
}

/* Loading */
.ci-loading[b-3jmlibcdri] {
    text-align: center;
    padding: 30px;
    color: #888;
    font-size: 0.95em;
}

.ci-loading-hint[b-3jmlibcdri] {
    color: #555;
    font-size: 0.8em;
    margin-top: 6px;
}

/* Results Header */
.ci-browse-results-header[b-3jmlibcdri] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #888;
    font-size: 0.85em;
    padding: 4px 0;
}

/* Card Grid */
.ci-browse-card-grid[b-3jmlibcdri] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.ci-browse-card[b-3jmlibcdri] {
    background: #1e1e2e;
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}

.ci-browse-card:hover[b-3jmlibcdri] {
    transform: translateY(-2px);
    border-color: #555;
}

.ci-browse-card.ci-selected[b-3jmlibcdri] {
    border-color: #ffc107;
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.3);
}

.ci-browse-card-img[b-3jmlibcdri] {
    width: 100%;
    aspect-ratio: 5 / 7;
    object-fit: cover;
    display: block;
}

.ci-browse-card-placeholder[b-3jmlibcdri] {
    width: 100%;
    aspect-ratio: 5 / 7;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #555;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ci-browse-card-info[b-3jmlibcdri] {
    padding: 8px;
}

.ci-browse-card-name[b-3jmlibcdri] {
    font-weight: 600;
    font-size: 0.8em;
    color: #e0e0e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ci-browse-card-meta[b-3jmlibcdri] {
    font-size: 0.7em;
    color: #888;
    margin-top: 2px;
}

.ci-browse-card-price[b-3jmlibcdri] {
    color: #6abf69;
    font-weight: 700;
    font-size: 0.85em;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ci-price-source[b-3jmlibcdri] {
    font-size: 0.65em;
    font-weight: 400;
    color: #888;
    opacity: 0.8;
}

/* Pagination */
.ci-browse-pagination[b-3jmlibcdri] {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 10px 0;
}

/* Card Detail Panel */
.ci-browse-detail[b-3jmlibcdri] {
    display: flex;
    gap: 20px;
    background: #1a1a2e;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 20px;
    margin-top: 10px;
}

.ci-browse-detail-left[b-3jmlibcdri] {
    flex-shrink: 0;
    width: 250px;
}

.ci-browse-detail-img[b-3jmlibcdri] {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.ci-browse-detail-right[b-3jmlibcdri] {
    flex: 1;
    min-width: 0;
}

.ci-browse-detail-right h3[b-3jmlibcdri] {
    color: #ffc107;
    margin: 0 0 10px;
    font-size: 1.3em;
}

.ci-browse-detail-right h4[b-3jmlibcdri] {
    color: #ccc;
    margin: 14px 0 6px;
    font-size: 0.95em;
}

.ci-browse-detail-meta p[b-3jmlibcdri] {
    margin: 3px 0;
    color: #bbb;
    font-size: 0.9em;
}

.ci-browse-price-table[b-3jmlibcdri] {
    font-size: 0.85em;
}

.ci-browse-actions[b-3jmlibcdri] {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.ci-browse-actions a.ci-btn[b-3jmlibcdri] {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

/* Related Products */
.ci-browse-related[b-3jmlibcdri] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ci-browse-related-item[b-3jmlibcdri] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #222236;
    border-radius: 6px;
    font-size: 0.85em;
}

.ci-browse-related-name[b-3jmlibcdri] {
    flex: 1;
    color: #ccc;
}

.ci-browse-related-price[b-3jmlibcdri] {
    color: #6abf69;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .ci-browse-detail[b-3jmlibcdri] {
        flex-direction: column;
    }

    .ci-browse-detail-left[b-3jmlibcdri] {
        width: 100%;
        max-width: 250px;
        margin: 0 auto;
    }

    .ci-browse-card-grid[b-3jmlibcdri] {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .ci-jp-set-grid[b-3jmlibcdri] {
        grid-template-columns: 1fr;
    }

    .ci-product-grid[b-3jmlibcdri] {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .ci-products-pagination[b-3jmlibcdri] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .ci-search-add-results[b-3jmlibcdri] {
        grid-template-columns: 1fr;
    }
}

/* English name subtext for Japanese cards */
.ci-browse-card-name-en[b-3jmlibcdri],
.ci-product-name-en[b-3jmlibcdri] {
    font-style: italic;
    font-size: 0.75rem;
    color: #999;
    margin-top: 1px;
    line-height: 1.2;
}

/* Search & Add panel */
.ci-search-add-results[b-3jmlibcdri] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.5rem;
    max-height: 400px;
    overflow-y: auto;
    padding: 0.25rem;
}

.ci-search-add-item[b-3jmlibcdri] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #1a1a2e;
    border: 1px solid #333;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.ci-search-add-item:hover[b-3jmlibcdri] {
    border-color: #6abf69;
}

.ci-search-add-img[b-3jmlibcdri] {
    width: 45px;
    height: 63px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.ci-search-add-info[b-3jmlibcdri] {
    flex: 1;
    min-width: 0;
}

.ci-search-add-name[b-3jmlibcdri] {
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ci-search-add-meta[b-3jmlibcdri] {
    font-size: 0.75rem;
    color: #888;
}

.ci-search-add-price[b-3jmlibcdri] {
    font-weight: 600;
    color: #6abf69;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* ── Attribution & Disclaimer ─────────────────────────── */
.ci-attribution[b-3jmlibcdri] {
    margin-top: 3rem;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--ci-border, #2a2a3e);
    text-align: center;
}

.ci-attribution-sources[b-3jmlibcdri] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.ci-attribution-label[b-3jmlibcdri] {
    font-size: 0.75rem;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ci-attribution-link[b-3jmlibcdri] {
    font-size: 0.75rem;
    color: #ffc107;
    text-decoration: none;
    transition: color 0.2s;
}

.ci-attribution-link:hover[b-3jmlibcdri] {
    color: #fff;
    text-decoration: underline;
}

.ci-attribution-sep[b-3jmlibcdri] {
    font-size: 0.65rem;
    color: #555;
}

.ci-attribution-platform[b-3jmlibcdri] {
    font-size: 0.75rem;
    color: #999;
}

.ci-attribution-disclaimer[b-3jmlibcdri] {
    font-size: 0.7rem;
    color: #666;
    line-height: 1.6;
    max-width: 800px;
    margin: 8px auto 0;
    text-align: left;
    border-top: 1px solid #2a2a3e;
    padding-top: 8px;
}

.ci-attribution-disclaimer p[b-3jmlibcdri] {
    margin: 0 0 6px;
}

.ci-attribution-disclaimer p:last-child[b-3jmlibcdri] {
    margin-bottom: 0;
}

.ci-attribution-disclaimer strong[b-3jmlibcdri] {
    color: #999;
}

.ci-attribution-disclaimer a[b-3jmlibcdri] {
    color: #888;
    text-decoration: underline;
    text-decoration-style: dotted;
}

.ci-attribution-disclaimer a:hover[b-3jmlibcdri] {
    color: #ffc107;
}

/* Targeted Refresh Panel */
.ci-targeted-refresh-panel[b-3jmlibcdri] {
    background: #1a1a2e;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 14px;
    margin: 10px 0;
}

.ci-targeted-header[b-3jmlibcdri] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
}

.ci-targeted-header h5[b-3jmlibcdri] {
    color: #ffc107;
    margin: 0;
    font-size: 0.95em;
}

.ci-targeted-actions[b-3jmlibcdri] {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.ci-targeted-set-list[b-3jmlibcdri] {
    max-height: 350px;
    overflow-y: auto;
    margin-bottom: 8px;
    border: 1px solid #2a2a3a;
    border-radius: 6px;
}

.ci-targeted-set-row[b-3jmlibcdri] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-bottom: 1px solid #222;
}

.ci-targeted-set-row:last-child[b-3jmlibcdri] {
    border-bottom: none;
}

.ci-targeted-set-row:hover[b-3jmlibcdri] {
    background: rgba(255, 255, 255, 0.02);
}

.ci-targeted-set-label[b-3jmlibcdri] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: #e0e0e0;
    font-size: 0.85em;
    flex: 1;
    min-width: 0;
}

.ci-targeted-set-label input[type="checkbox"][b-3jmlibcdri] {
    accent-color: #ffc107;
}

.ci-targeted-set-count[b-3jmlibcdri] {
    color: #777;
    font-size: 0.8em;
    white-space: nowrap;
}

.ci-targeted-set-ts[b-3jmlibcdri] {
    color: #666;
    font-size: 0.7em;
    margin-left: auto;
    white-space: nowrap;
}

.ci-targeted-card-list[b-3jmlibcdri] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2px;
    padding: 6px 16px 6px 28px;
    background: rgba(0, 0, 0, 0.2);
    max-height: 250px;
    overflow-y: auto;
}

.ci-targeted-card-item[b-3jmlibcdri] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78em;
    color: #ccc;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
}

.ci-targeted-card-item:hover[b-3jmlibcdri] {
    background: rgba(255, 255, 255, 0.04);
}

.ci-targeted-card-item input[type="checkbox"][b-3jmlibcdri] {
    accent-color: #ffc107;
}

.ci-targeted-card-en[b-3jmlibcdri] {
    color: #888;
    font-style: italic;
    font-size: 0.9em;
}

.ci-targeted-results[b-3jmlibcdri] {
    margin-top: 10px;
    border-top: 1px solid #333;
    padding-top: 8px;
}

.ci-targeted-results h5[b-3jmlibcdri] {
    color: #ffc107;
    margin: 0 0 6px;
    font-size: 0.85em;
}

.ci-targeted-result-row[b-3jmlibcdri] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
    font-size: 0.82em;
    color: #ccc;
}

/* === Condition Pricing === */
.ci-condition-prices[b-3jmlibcdri] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 0.5rem;
}

.ci-condition-prices h5[b-3jmlibcdri] {
    color: #e0a040;
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.ci-condition-row[b-3jmlibcdri] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}

.ci-condition-label[b-3jmlibcdri] {
    width: 100px;
    font-size: 0.8em;
    color: #bbb;
    flex-shrink: 0;
}

.ci-condition-price[b-3jmlibcdri] {
    width: 70px;
    font-size: 0.85em;
    font-weight: 600;
    color: #4fc3f7;
    text-align: right;
    flex-shrink: 0;
}

.ci-condition-bar-wrap[b-3jmlibcdri] {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    overflow: hidden;
}

.ci-condition-bar[b-3jmlibcdri] {
    height: 100%;
    background: linear-gradient(90deg, #4fc3f7, #29b6f6);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.ci-condition-bar.ci-graded-bar[b-3jmlibcdri] {
    background: linear-gradient(90deg, #ffd740, #ffab00);
}

/* === Seller Scarcity Indicator === */
.ci-seller-indicator[b-3jmlibcdri] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 0.85em;
}

.ci-seller-count[b-3jmlibcdri] {
    font-weight: 600;
}

.ci-seller-badge[b-3jmlibcdri] {
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 2px 8px;
    border-radius: 4px;
}

.ci-scarcity-critical[b-3jmlibcdri] {
    background: rgba(244, 67, 54, 0.15);
    border: 1px solid rgba(244, 67, 54, 0.4);
}
.ci-scarcity-critical .ci-seller-count[b-3jmlibcdri] { color: #ef5350; }
.ci-scarcity-critical .ci-seller-badge[b-3jmlibcdri] { background: #f44336; color: #fff; }

.ci-scarcity-scarce[b-3jmlibcdri] {
    background: rgba(255, 152, 0, 0.12);
    border: 1px solid rgba(255, 152, 0, 0.35);
}
.ci-scarcity-scarce .ci-seller-count[b-3jmlibcdri] { color: #ffa726; }
.ci-scarcity-scarce .ci-seller-badge[b-3jmlibcdri] { background: #ff9800; color: #fff; }

.ci-scarcity-thinning[b-3jmlibcdri] {
    background: rgba(255, 235, 59, 0.08);
    border: 1px solid rgba(255, 235, 59, 0.25);
}
.ci-scarcity-thinning .ci-seller-count[b-3jmlibcdri] { color: #fdd835; }
.ci-scarcity-thinning .ci-seller-badge[b-3jmlibcdri] { background: rgba(255, 235, 59, 0.3); color: #fdd835; }

.ci-scarcity-normal[b-3jmlibcdri] {
    background: rgba(76, 175, 80, 0.08);
    border: 1px solid rgba(76, 175, 80, 0.2);
}
.ci-scarcity-normal .ci-seller-count[b-3jmlibcdri] { color: #66bb6a; }
.ci-scarcity-normal .ci-seller-badge[b-3jmlibcdri] { background: rgba(76, 175, 80, 0.2); color: #66bb6a; }

.ci-scarcity-abundant[b-3jmlibcdri] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.ci-scarcity-abundant .ci-seller-count[b-3jmlibcdri] { color: #999; }
.ci-scarcity-abundant .ci-seller-badge[b-3jmlibcdri] { background: rgba(255, 255, 255, 0.08); color: #999; }

/* === Market/Low Spread Row === */
.ci-spread-row[b-3jmlibcdri] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
    margin-bottom: 4px;
    font-size: 0.82em;
    color: #bbb;
}

.ci-spread-row strong[b-3jmlibcdri] {
    color: #e0e0e0;
}

.ci-spread-pct[b-3jmlibcdri] {
    margin-left: auto;
    font-weight: 600;
    color: #e0a040;
    font-size: 0.9em;
}

/* === eBay Listings === */
.ci-ebay-listing-row[b-3jmlibcdri] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ci-ebay-listing-row:last-child[b-3jmlibcdri] {
    border-bottom: none;
}

.ci-ebay-price[b-3jmlibcdri] {
    font-size: 0.85em;
    font-weight: 600;
    color: #81c784;
    width: 70px;
}

.ci-ebay-condition[b-3jmlibcdri] {
    font-size: 0.75em;
    color: #aaa;
    flex: 1;
}

.ci-ebay-link[b-3jmlibcdri] {
    font-size: 0.75em;
    color: #4fc3f7;
    text-decoration: none;
}

.ci-ebay-link:hover[b-3jmlibcdri] {
    text-decoration: underline;
}

/* ═══════ MARKET INTELLIGENCE PANEL ═══════ */
.ci-intel-section[b-3jmlibcdri] {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #333;
}

.ci-intel-loading[b-3jmlibcdri] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    color: #888;
    font-size: 0.9em;
}

.ci-spinner[b-3jmlibcdri] {
    width: 20px;
    height: 20px;
    border: 2px solid #333;
    border-top-color: #ffc107;
    border-radius: 50%;
    animation: ci-spin-b-3jmlibcdri 0.8s linear infinite;
}

@keyframes ci-spin-b-3jmlibcdri {
    to { transform: rotate(360deg); }
}

.ci-intel-header[b-3jmlibcdri] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.ci-intel-header h4[b-3jmlibcdri] {
    color: #ffc107;
    margin: 0;
    font-size: 1.1em;
}

/* Market Health Cards */
.ci-intel-health[b-3jmlibcdri] {
    margin-bottom: 20px;
}

.ci-intel-health-cards[b-3jmlibcdri] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.ci-intel-metric[b-3jmlibcdri] {
    background: #1a1a2e;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 10px 16px;
    min-width: 100px;
    text-align: center;
}

.ci-intel-metric-value[b-3jmlibcdri] {
    display: block;
    font-size: 1.5em;
    font-weight: 700;
    color: #e0e0e0;
}

.ci-intel-metric-label[b-3jmlibcdri] {
    display: block;
    font-size: 0.75em;
    color: #888;
    margin-top: 2px;
}

.ci-intel-metric-critical .ci-intel-metric-value[b-3jmlibcdri] { color: #f44336; }
.ci-intel-metric-accum .ci-intel-metric-value[b-3jmlibcdri] { color: #4caf50; }

/* Portfolio Pulse */
.ci-intel-portfolio-pulse[b-3jmlibcdri] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85em;
    color: #888;
    padding: 6px 0;
}

.ci-intel-pulse-label[b-3jmlibcdri] { color: #aaa; font-weight: 600; }
.ci-intel-pulse-rising[b-3jmlibcdri] { color: #4caf50; }
.ci-intel-pulse-stable[b-3jmlibcdri] { color: #888; }
.ci-intel-pulse-falling[b-3jmlibcdri] { color: #f44336; }
.ci-intel-pulse-sep[b-3jmlibcdri] { color: #555; }

/* Buy Signals */
.ci-intel-signals[b-3jmlibcdri] {
    margin-bottom: 20px;
}

.ci-intel-signals h5[b-3jmlibcdri] {
    color: #e0e0e0;
    margin: 0 0 12px;
    font-size: 0.95em;
}

.ci-signal-card[b-3jmlibcdri] {
    background: #1a1a2e;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 8px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.ci-signal-card.ci-signal-urgent[b-3jmlibcdri] { border-left: 3px solid #f44336; }
.ci-signal-card.ci-signal-strong[b-3jmlibcdri] { border-left: 3px solid #4caf50; }
.ci-signal-card.ci-signal-moderate[b-3jmlibcdri] { border-left: 3px solid #ff9800; }
.ci-signal-card.ci-signal-watch[b-3jmlibcdri] { border-left: 3px solid #666; }

.ci-signal-badge[b-3jmlibcdri] {
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffc107;
    white-space: nowrap;
    min-width: 120px;
    padding-top: 2px;
}

.ci-signal-body[b-3jmlibcdri] {
    flex: 1;
}

.ci-signal-product[b-3jmlibcdri] {
    font-weight: 600;
    color: #e0e0e0;
    margin-bottom: 4px;
}

.ci-signal-set[b-3jmlibcdri] {
    font-size: 0.8em;
    color: #888;
    margin-left: 6px;
}

.ci-signal-reason[b-3jmlibcdri] {
    font-size: 0.85em;
    color: #aaa;
    line-height: 1.4;
    margin-bottom: 6px;
}

.ci-signal-stats[b-3jmlibcdri] {
    display: flex;
    gap: 12px;
    font-size: 0.8em;
    color: #888;
}

.ci-signal-sellers[b-3jmlibcdri] {
    color: #f44336;
    font-weight: 600;
}

/* Portfolio Value Chart */
/* Dashboard Charts Row */
.ci-dashboard-charts-row[b-3jmlibcdri] {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 8px;
}
.ci-dashboard-chart-main[b-3jmlibcdri] {
    flex: 2;
    min-width: 0;
}
.ci-dashboard-chart-side[b-3jmlibcdri] {
    flex: 1;
    min-width: 200px;
}
.ci-dashboard-charts-row h4[b-3jmlibcdri] {
    color: #e0e0e0;
    margin: 0 0 12px;
    font-size: 1em;
}

@media (max-width: 768px) {
    .ci-dashboard-charts-row[b-3jmlibcdri] {
        flex-direction: column;
    }
}

.ci-portfolio-chart-section[b-3jmlibcdri] {
    margin-top: 20px;
    margin-bottom: 8px;
}
.ci-portfolio-chart-section h4[b-3jmlibcdri] {
    color: #e0e0e0;
    margin: 0 0 12px;
    font-size: 1em;
}

/* Price Change Indicators */
.ci-change-up[b-3jmlibcdri] { color: #4caf50; font-size: 0.85em; font-weight: 600; }
.ci-change-down[b-3jmlibcdri] { color: #f44336; font-size: 0.85em; font-weight: 600; }
.ci-change-flat[b-3jmlibcdri] { color: #666; }

/* Condition Badges */
.ci-condition-badge[b-3jmlibcdri] {
    font-size: 0.75em;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
}
.ci-cond-mint[b-3jmlibcdri] { background: rgba(76, 175, 80, 0.2); color: #4caf50; }
.ci-cond-good[b-3jmlibcdri] { background: rgba(255, 193, 7, 0.2); color: #ffc107; }
.ci-cond-fair[b-3jmlibcdri] { background: rgba(255, 152, 0, 0.2); color: #ff9800; }
.ci-cond-poor[b-3jmlibcdri] { background: rgba(244, 67, 54, 0.2); color: #f44336; }
.ci-cond-graded[b-3jmlibcdri] { background: rgba(156, 39, 176, 0.2); color: #ce93d8; }

/* Intelligence Hint */
.ci-intel-hint[b-3jmlibcdri] {
    background: rgba(255, 193, 7, 0.06);
    border: 1px solid rgba(255, 193, 7, 0.2);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.ci-intel-hint p[b-3jmlibcdri] { margin: 0; font-size: 0.85em; color: #bbb; line-height: 1.5; }
.ci-intel-hint strong[b-3jmlibcdri] { color: #e0e0e0; }

/* Investment Scores */
.ci-intel-scores h5[b-3jmlibcdri] {
    color: #e0e0e0;
    margin: 0 0 12px;
    font-size: 0.95em;
}

.ci-score-bar[b-3jmlibcdri] {
    display: inline-block;
    width: 60px;
    height: 6px;
    background: #333;
    border-radius: 3px;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 6px;
}

.ci-score-fill[b-3jmlibcdri] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.ci-score-num[b-3jmlibcdri] {
    font-size: 0.85em;
    font-weight: 600;
    color: #e0e0e0;
}

/* Recommendation Badges */
.ci-rec-badge[b-3jmlibcdri] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ci-rec-strong-hold[b-3jmlibcdri] { background: #1b5e20; color: #4caf50; }
.ci-rec-hold[b-3jmlibcdri] { background: #1a3a1a; color: #8bc34a; }
.ci-rec-watch[b-3jmlibcdri] { background: #3e2723; color: #ff9800; }
.ci-rec-review[b-3jmlibcdri] { background: #4a1a1a; color: #f44336; }

/* Text colors */
.ci-text-green[b-3jmlibcdri] { color: #4caf50; }
.ci-text-red[b-3jmlibcdri] { color: #f44336; }

/* Button accent style (for $ price update button) */
.ci-btn-accent[b-3jmlibcdri] {
    background: #1a2a3e;
    color: #ffc107;
    border: 1px solid #ffc107;
}
.ci-btn-accent:hover[b-3jmlibcdri] { background: #2a3a4e; }
.ci-btn-accent:disabled[b-3jmlibcdri] { opacity: 0.5; cursor: not-allowed; }

/* Mobile responsiveness for intelligence panel */
@media (max-width: 768px) {
    .ci-intel-health-cards[b-3jmlibcdri] {
        gap: 8px;
    }
    .ci-intel-metric[b-3jmlibcdri] {
        min-width: 80px;
        padding: 8px 12px;
    }
    .ci-signal-card[b-3jmlibcdri] {
        flex-direction: column;
        gap: 6px;
    }
    .ci-signal-badge[b-3jmlibcdri] {
        min-width: auto;
    }
    .ci-signal-stats[b-3jmlibcdri] {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ═══════════════════════════════════════════
   FINDER TAB
   ═══════════════════════════════════════════ */

.ci-finder-search[b-3jmlibcdri] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.ci-finder-input[b-3jmlibcdri] { flex: 1; min-width: 200px; }
.ci-finder-credits[b-3jmlibcdri] { font-size: 0.75em; color: #666; white-space: nowrap; }
.ci-finder-status[b-3jmlibcdri] { padding: 8px 12px; margin-top: 8px; color: #aaa; font-size: 0.85em; background: rgba(255,255,255,0.03); border-radius: 6px; white-space: pre-line; }

/* Browse Grid (Phase 1) */
.ci-finder-selected-bar[b-3jmlibcdri] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    margin-top: 12px;
    background: rgba(255,193,7,0.06);
    border: 1px solid rgba(255,193,7,0.2);
    border-radius: 8px;
    color: #e0e0e0;
    font-size: 0.9em;
}
.ci-finder-selected-bar small[b-3jmlibcdri] { color: #888; margin-left: 4px; }
.ci-finder-browse-grid[b-3jmlibcdri] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.ci-finder-browse-card[b-3jmlibcdri] {
    background: #1e1e2e;
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}
.ci-finder-browse-card:hover[b-3jmlibcdri] {
    transform: translateY(-2px);
    border-color: #555;
}
.ci-finder-browse-card.ci-selected[b-3jmlibcdri] {
    border-color: #ffc107;
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.3);
}
.ci-finder-browse-img[b-3jmlibcdri] {
    width: 100%;
    aspect-ratio: 5 / 7;
    object-fit: cover;
    display: block;
}
.ci-finder-browse-info[b-3jmlibcdri] { padding: 8px; }
.ci-finder-browse-name[b-3jmlibcdri] {
    font-weight: 600;
    font-size: 0.8em;
    color: #e0e0e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ci-finder-browse-name-en[b-3jmlibcdri] { font-size: 0.7em; color: #888; }
.ci-finder-browse-meta[b-3jmlibcdri] { font-size: 0.7em; color: #888; margin-top: 2px; }
.ci-finder-browse-set[b-3jmlibcdri] {
    font-size: 0.65em;
    color: #666;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ci-finder-browse-price[b-3jmlibcdri] {
    color: #6abf69;
    font-weight: 700;
    font-size: 0.85em;
    margin-top: 4px;
}
.ci-price-age[b-3jmlibcdri] { color: #555; font-weight: 400; font-size: 0.75em; margin-left: 4px; }

@media (max-width: 768px) {
    .ci-finder-browse-grid[b-3jmlibcdri] {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
    .ci-finder-selected-bar[b-3jmlibcdri] {
        flex-direction: column;
        text-align: center;
    }
}

/* Result Card */
.ci-finder-result[b-3jmlibcdri] { margin-top: 16px; }
.ci-finder-card-layout[b-3jmlibcdri] { display: flex; gap: 24px; align-items: flex-start; }
.ci-finder-image[b-3jmlibcdri] { flex-shrink: 0; width: 220px; }
.ci-finder-image img[b-3jmlibcdri] { width: 100%; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
.ci-finder-no-image[b-3jmlibcdri] { width: 220px; height: 310px; background: rgba(255,255,255,0.05); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #555; font-size: 0.9em; }
.ci-finder-info[b-3jmlibcdri] { flex: 1; min-width: 0; }
.ci-finder-name[b-3jmlibcdri] { color: #ffc107; margin: 0 0 4px; font-size: 1.4em; }
.ci-finder-name-en[b-3jmlibcdri] { color: #aaa; font-size: 0.85em; margin-bottom: 8px; }
.ci-finder-meta[b-3jmlibcdri] { display: flex; gap: 12px; flex-wrap: wrap; color: #888; font-size: 0.85em; margin-bottom: 16px; }
.ci-finder-meta span[b-3jmlibcdri] { padding: 2px 8px; background: rgba(255,255,255,0.05); border-radius: 4px; }

/* Google Search Link */
.ci-google-link[b-3jmlibcdri] { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; background: rgba(66,133,244,0.12); color: #8ab4f8; border-radius: 4px; text-decoration: none; font-size: 0.85em; transition: background 0.2s; cursor: pointer; }
.ci-google-link:hover[b-3jmlibcdri] { background: rgba(66,133,244,0.25); color: #aecbfa; text-decoration: none; }
.ci-google-link-sm[b-3jmlibcdri] { font-size: 0.8em; padding: 1px 6px; margin-top: 4px; align-self: flex-start; }

/* TMV Display */
.ci-tmv-display[b-3jmlibcdri] { text-align: center; padding: 16px; background: linear-gradient(135deg, rgba(255,193,7,0.08), rgba(255,152,0,0.05)); border: 1px solid rgba(255,193,7,0.2); border-radius: 8px; margin-bottom: 16px; }
.ci-tmv-label[b-3jmlibcdri] { font-size: 0.75em; text-transform: uppercase; letter-spacing: 2px; color: #888; margin-bottom: 4px; }
.ci-tmv-value[b-3jmlibcdri] { font-size: 2em; font-weight: 700; color: #ffc107; }

/* Finder Metrics */
.ci-finder-metrics[b-3jmlibcdri] { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.ci-finder-metric[b-3jmlibcdri] { padding: 8px 12px; background: rgba(255,255,255,0.03); border-radius: 6px; }
.ci-metric-label[b-3jmlibcdri] { display: block; font-size: 0.7em; text-transform: uppercase; color: #666; letter-spacing: 1px; }
.ci-metric-value[b-3jmlibcdri] { display: block; font-size: 1.1em; font-weight: 600; color: #e0e0e0; }
.ci-metric-value small[b-3jmlibcdri] { font-weight: 400; font-size: 0.75em; margin-left: 4px; }
.ci-buy-target[b-3jmlibcdri] { color: #4caf50 !important; }

/* Deal Score Colors */
.ci-deal-steal[b-3jmlibcdri] { color: #4caf50 !important; font-weight: 700; }
.ci-deal-good[b-3jmlibcdri] { color: #ffc107 !important; }
.ci-deal-fair[b-3jmlibcdri] { color: #e0e0e0; }
.ci-deal-above[b-3jmlibcdri] { color: #f44336 !important; }

/* TMV Breakdown */
.ci-tmv-breakdown[b-3jmlibcdri] { margin-top: 16px; padding: 12px; background: rgba(255,255,255,0.02); border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); }
.ci-tmv-breakdown h4[b-3jmlibcdri] { color: #aaa; margin: 0 0 10px; font-size: 0.85em; text-transform: uppercase; letter-spacing: 1px; }
.ci-tmv-sources[b-3jmlibcdri] { display: flex; flex-direction: column; gap: 6px; }
.ci-tmv-source[b-3jmlibcdri] { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.ci-tmv-src-name[b-3jmlibcdri] { min-width: 100px; color: #888; font-size: 0.85em; }
.ci-tmv-src-price[b-3jmlibcdri] { color: #e0e0e0; font-weight: 600; font-size: 0.95em; }
.ci-tmv-src-price small[b-3jmlibcdri] { color: #666; font-weight: 400; }
.ci-tmv-src-weight[b-3jmlibcdri] { color: #555; font-size: 0.75em; }
.ci-tmv-supply[b-3jmlibcdri] { display: flex; gap: 16px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); font-size: 0.8em; color: #666; }

/* Condition Grid */
.ci-finder-conditions[b-3jmlibcdri] { margin-top: 16px; }
.ci-finder-conditions h4[b-3jmlibcdri] { color: #aaa; margin: 0 0 10px; font-size: 0.85em; text-transform: uppercase; letter-spacing: 1px; }
.ci-condition-grid[b-3jmlibcdri] { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.ci-cond-item[b-3jmlibcdri] { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: rgba(255,255,255,0.03); border-radius: 4px; }
.ci-cond-name[b-3jmlibcdri] { color: #aaa; font-size: 0.8em; flex: 1; }
.ci-cond-price[b-3jmlibcdri] { color: #e0e0e0; font-weight: 600; font-size: 0.9em; }
.ci-cond-listings[b-3jmlibcdri] { color: #555; font-size: 0.7em; }

/* Condition Breakdown Table */
.ci-condition-table[b-3jmlibcdri] { width: 100%; }
.ci-condition-table th[b-3jmlibcdri] { font-size: 0.7em; text-transform: uppercase; color: #888; padding: 4px 8px; }
.ci-condition-table td[b-3jmlibcdri] { font-size: 0.75em; padding: 5px 8px; }
.ci-cond-tag[b-3jmlibcdri] { display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 0.65em; font-weight: 700; margin-right: 4px; }
.ci-cond-nm[b-3jmlibcdri]  { background: rgba(76,175,80,0.2); color: #4caf50; }
.ci-cond-lp[b-3jmlibcdri]  { background: rgba(255,193,7,0.2); color: #ffc107; }
.ci-cond-mp[b-3jmlibcdri]  { background: rgba(255,152,0,0.2); color: #ff9800; }
.ci-cond-hp[b-3jmlibcdri]  { background: rgba(244,67,54,0.2); color: #f44336; }
.ci-cond-dmg[b-3jmlibcdri] { background: rgba(158,158,158,0.2); color: #9e9e9e; }
.ci-cond-lowest-row[b-3jmlibcdri] { border-left: 2px solid #42a5f5; background: rgba(66,165,245,0.05); }

/* PPT Match Warning */
.ci-match-warning[b-3jmlibcdri] {
    padding: 8px 12px; margin-bottom: 12px; border-radius: 6px;
    border: 1px solid rgba(255,152,0,0.4); background: rgba(45,31,0,0.6);
    color: #ffb74d; font-size: 0.85em;
}
.ci-match-warning strong[b-3jmlibcdri] { color: #ff9800; }
.ci-match-score[b-3jmlibcdri] { font-size: 0.7em; color: #888; margin-top: 2px; }
.ci-ppt-mismatch[b-3jmlibcdri] {
    padding: 4px 8px; margin-top: 6px; border-radius: 4px;
    background: rgba(255,152,0,0.08); color: #ffb74d; font-size: 0.8em;
}

/* Scarcity Intel */
.ci-finder-scarcity[b-3jmlibcdri] { display: flex; gap: 16px; margin-top: 12px; padding: 10px 12px; background: rgba(156,39,176,0.08); border-radius: 6px; border: 1px solid rgba(156,39,176,0.15); font-size: 0.85em; color: #ce93d8; }

/* Actions */
.ci-finder-actions[b-3jmlibcdri] { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Finder Marketplace Links */
.ci-finder-marketplace[b-3jmlibcdri] { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.06); }
.ci-finder-marketplace h4[b-3jmlibcdri] { color: #aaa; margin: 0 0 10px; font-size: 0.85em; text-transform: uppercase; letter-spacing: 1px; }
.ci-finder-shop-links[b-3jmlibcdri] { display: flex; gap: 8px; flex-wrap: wrap; }
.ci-btn-shop[b-3jmlibcdri] { text-decoration: none; display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid; border-radius: 4px; font-size: 0.85em; font-weight: 600; transition: background 0.2s; }
.ci-shop-tcg[b-3jmlibcdri] { border-color: rgba(0,150,255,0.3); color: #4db8ff; }
.ci-shop-tcg:hover[b-3jmlibcdri] { background: rgba(0,150,255,0.1); }
.ci-shop-ebay[b-3jmlibcdri] { border-color: rgba(229,57,53,0.3); color: #ef5350; }
.ci-shop-ebay:hover[b-3jmlibcdri] { background: rgba(229,57,53,0.1); }
.ci-shop-cm[b-3jmlibcdri] { border-color: rgba(255,193,7,0.3); color: #ffc107; }
.ci-shop-cm:hover[b-3jmlibcdri] { background: rgba(255,193,7,0.1); }

/* Dashboard Signal Links */
.ci-signal-link[b-3jmlibcdri] { color: #ffc107; text-decoration: none; cursor: pointer; }
.ci-signal-link:hover[b-3jmlibcdri] { text-decoration: underline; color: #ffecb3; }

/* History Table */
.ci-finder-history[b-3jmlibcdri] { margin-top: 24px; }
.ci-finder-history h4[b-3jmlibcdri] { color: #aaa; margin: 0 0 10px; font-size: 0.85em; text-transform: uppercase; letter-spacing: 1px; }
.ci-clickable[b-3jmlibcdri] { cursor: pointer; }
.ci-clickable:hover[b-3jmlibcdri] { background: rgba(255,193,7,0.05); }

/* Bulk Pull */
.ci-finder-bulk[b-3jmlibcdri] { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.06); }
.ci-finder-bulk h4[b-3jmlibcdri] { color: #aaa; margin: 0 0 4px; font-size: 0.85em; text-transform: uppercase; letter-spacing: 1px; }

/* Mobile Responsive */
@media (max-width: 768px) {
    .ci-finder-card-layout[b-3jmlibcdri] { flex-direction: column; }
    .ci-finder-image[b-3jmlibcdri] { width: 160px; align-self: center; }
    .ci-finder-no-image[b-3jmlibcdri] { width: 160px; height: 225px; }
    .ci-finder-metrics[b-3jmlibcdri] { grid-template-columns: repeat(2, 1fr); }
    .ci-condition-grid[b-3jmlibcdri] { grid-template-columns: 1fr; }
    .ci-tmv-value[b-3jmlibcdri] { font-size: 1.5em; }
}

/* ==================== UNIFIED BROWSE ENHANCEMENTS ==================== */

/* Set Badge on Card Tiles */
.ci-browse-card-set-badge[b-3jmlibcdri] {
    display: flex; align-items: center; gap: 4px;
    font-size: 0.65em; color: #aaa; overflow: hidden;
    white-space: nowrap; text-overflow: ellipsis;
    margin-bottom: 1px;
}
.ci-lang-dot[b-3jmlibcdri] {
    display: inline-block; padding: 0 4px; border-radius: 3px;
    font-size: 0.85em; font-weight: 700; letter-spacing: 0.5px;
}
.ci-lang-en[b-3jmlibcdri] { background: rgba(66,165,245,0.2); color: #42a5f5; }
.ci-lang-ja[b-3jmlibcdri] { background: rgba(236,64,122,0.2); color: #ec407a; }
.ci-set-label[b-3jmlibcdri] { overflow: hidden; text-overflow: ellipsis; }

/* Badge Row (scarcity, TMV, buy signal) */
.ci-browse-card-badges[b-3jmlibcdri] {
    display: flex; flex-wrap: wrap; gap: 3px;
    margin-top: 3px;
}
.ci-scarcity-badge[b-3jmlibcdri] {
    font-size: 0.6em; padding: 1px 4px; border-radius: 3px;
    font-weight: 700; letter-spacing: 0.5px;
}
.ci-badge-critical[b-3jmlibcdri] { background: rgba(229,57,53,0.2); color: #e53935; }
.ci-badge-scarce[b-3jmlibcdri] { background: rgba(255,152,0,0.2); color: #ff9800; }
.ci-badge-thinning[b-3jmlibcdri] { background: rgba(255,193,7,0.2); color: #ffc107; }
.ci-badge-normal[b-3jmlibcdri] { background: rgba(158,158,158,0.15); color: #999; }
.ci-tmv-badge[b-3jmlibcdri] {
    font-size: 0.6em; padding: 1px 4px; border-radius: 3px;
    background: rgba(171,71,188,0.2); color: #ab47bc;
    font-weight: 700;
}
.ci-signal-dot[b-3jmlibcdri] {
    font-size: 0.65em; font-weight: 900; padding: 0 3px;
    border-radius: 3px;
}
.ci-signal-urgent[b-3jmlibcdri] { color: #e53935; animation: ci-pulse-b-3jmlibcdri 1.5s ease-in-out infinite; }
.ci-signal-watch[b-3jmlibcdri] { color: #ff9800; }
@keyframes ci-pulse-b-3jmlibcdri {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Secondary Toolbar (CRUD buttons) */
.ci-browse-toolbar-secondary[b-3jmlibcdri] {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin: 4px 0; padding: 4px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* Detail Panel Quick Actions */
.ci-browse-detail-actions[b-3jmlibcdri] {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin: 0.5rem 0; padding: 0.5rem 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Detail Panel Scarcity Summary */
.ci-browse-detail-scarcity[b-3jmlibcdri],
.ci-browse-detail-tmv[b-3jmlibcdri] {
    margin: 0.5rem 0; padding: 0.5rem;
    background: rgba(255,255,255,0.02); border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.06);
}
.ci-browse-detail-scarcity h5[b-3jmlibcdri],
.ci-browse-detail-tmv h5[b-3jmlibcdri] {
    margin: 0 0 6px; font-size: 0.8em; color: var(--ci-accent);
    text-transform: uppercase; letter-spacing: 1px;
}
.ci-detail-scarcity-grid[b-3jmlibcdri],
.ci-detail-tmv-grid[b-3jmlibcdri] {
    display: flex; flex-wrap: wrap; gap: 8px 16px;
    font-size: 0.8em; color: #ccc;
}

/* View Toggle */
.ci-view-toggle[b-3jmlibcdri] { white-space: nowrap; }

/* Alert Product Search Options */
.ci-alert-product-option:hover[b-3jmlibcdri] { background: rgba(255,193,7,0.1); color: #ffc107; }

/* ══ Scarcity Badges ══ */
.ci-scarcity-badge[b-3jmlibcdri] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

/* ══ Exhaustion Labels ══ */
.ci-exhaustion-label[b-3jmlibcdri] {
    font-size: 0.7em;
    font-weight: 600;
    margin-top: 2px;
}
.ci-exhaustion-critical[b-3jmlibcdri] { color: #ef4444; animation: ci-pulse-glow-b-3jmlibcdri 1.5s ease-in-out infinite; }
.ci-exhaustion-urgent[b-3jmlibcdri] { color: #f97316; }
.ci-exhaustion-warning[b-3jmlibcdri] { color: #eab308; }
.ci-exhaustion-watch[b-3jmlibcdri] { color: #6b7280; }

@keyframes ci-pulse-glow-b-3jmlibcdri {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ══ Regime Pills ══ */
.ci-regime-pill[b-3jmlibcdri] {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.75em;
    font-weight: 500;
    background: #333;
    color: #ccc;
}
.ci-regime-pill.ci-regime-accumulation[b-3jmlibcdri] { background: #1a3a1a; color: #4ade80; }
.ci-regime-pill.ci-regime-distribution[b-3jmlibcdri] { background: #3a1a1a; color: #f87171; }
.ci-regime-pill.ci-regime-strongmomentum[b-3jmlibcdri] { background: #1a2a3a; color: #60a5fa; }
.ci-regime-pill.ci-regime-weakmomentum[b-3jmlibcdri] { background: #2a2a1a; color: #fbbf24; }
.ci-regime-pill.ci-regime-meanreversion[b-3jmlibcdri] { background: #2a1a2a; color: #c084fc; }
.ci-regime-pill.ci-regime-neutral[b-3jmlibcdri] { background: #2a2a2a; color: #9ca3af; }

.ci-regime-description[b-3jmlibcdri] {
    font-size: 0.8em;
    color: #888;
    font-style: italic;
    margin-top: 4px;
}

/* ══ Dashboard Scarcity Widget ══ */
.ci-scarcity-dashboard-widget[b-3jmlibcdri] {
    display: flex;
    gap: 12px;
    margin: 12px 0;
    flex-wrap: wrap;
}
.ci-scarcity-widget-item[b-3jmlibcdri] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 16px;
    border-radius: 8px;
    background: #1a1a2e;
    border: 1px solid #333;
    min-width: 80px;
}
.ci-scarcity-widget-count[b-3jmlibcdri] {
    font-size: 1.5em;
    font-weight: 700;
}
.ci-scarcity-widget-label[b-3jmlibcdri] {
    font-size: 0.75em;
    color: #888;
    text-align: center;
}
.ci-scarcity-widget-critical .ci-scarcity-widget-count[b-3jmlibcdri] { color: #ef4444; }
.ci-scarcity-widget-scarce .ci-scarcity-widget-count[b-3jmlibcdri] { color: #f97316; }
.ci-scarcity-widget-exhausting .ci-scarcity-widget-count[b-3jmlibcdri] { color: #eab308; }
.ci-scarcity-widget-accum .ci-scarcity-widget-count[b-3jmlibcdri] { color: #4ade80; }

/* ══ Watch Tab Badge ══ */
.ci-badge-watch[b-3jmlibcdri] {
    background: #8b5cf6;
    color: #fff;
    font-size: 0.7em;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 4px;
}

/* ══ Watch List ══ */
.ci-watch-add-results[b-3jmlibcdri] {
    border: 1px solid #333;
    border-radius: 6px;
    max-height: 250px;
    overflow-y: auto;
    margin: 4px 0 8px;
}
.ci-watch-add-result[b-3jmlibcdri] {
    padding: 6px 10px;
    cursor: pointer;
    display: flex;
    gap: 8px;
    align-items: center;
    border-bottom: 1px solid #222;
}
.ci-watch-add-result:hover[b-3jmlibcdri] {
    background: rgba(139, 92, 246, 0.15);
}
.ci-meta-text[b-3jmlibcdri] {
    font-size: 0.8em;
    color: #666;
    margin-top: 8px;
}

/* Browse Mobile */
@media (max-width: 768px) {
    .ci-browse-search[b-3jmlibcdri] { flex-direction: column; }
    .ci-browse-toolbar-secondary[b-3jmlibcdri] { flex-direction: column; }
    .ci-browse-detail-actions[b-3jmlibcdri] { flex-direction: column; }
    .ci-detail-scarcity-grid[b-3jmlibcdri],
    .ci-detail-tmv-grid[b-3jmlibcdri] { flex-direction: column; gap: 4px; }
    .ci-scarcity-dashboard-widget[b-3jmlibcdri] { flex-direction: column; }
}
/* /Components/Pages/Clear.razor.rz.scp.css */
.clear-page[b-vpp6trdin0] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 2rem;
}

.clear-card[b-vpp6trdin0] {
    text-align: center;
    padding: 3rem 4rem;
    background: linear-gradient(135deg, #0a1628 0%, #0f2040 50%, #0a1628 100%);
    border: 2px solid #2a6a2a;
    border-radius: 20px;
    box-shadow: 0 0 40px rgba(40, 160, 40, 0.15);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.85) translateY(20px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.clear-card.show[b-vpp6trdin0] {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.clear-icon[b-vpp6trdin0] {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: iconPop-b-vpp6trdin0 0.5s ease-out 0.4s both;
}

@keyframes iconPop-b-vpp6trdin0 {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.3); }
    100% { transform: scale(1); opacity: 1; }
}

.clear-message[b-vpp6trdin0] {
    color: #44dd66;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(68, 221, 102, 0.4), 0 0 40px rgba(68, 221, 102, 0.15);
    margin: 0;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.clear-glow[b-vpp6trdin0] {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(68, 221, 102, 0.08) 0%, transparent 70%);
    pointer-events: none;
    animation: glowPulse-b-vpp6trdin0 3s ease-in-out infinite;
}

@keyframes glowPulse-b-vpp6trdin0 {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}
/* /Components/Pages/Deciv.razor.rz.scp.css */
/* ════════════════════════════════════════════
   DECIV — Hidden Mini-Game Styles
   ════════════════════════════════════════════ */

/* ── CHARACTER SELECT ── */
.deciv-select-screen[b-em9ne8suyn] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a0a2a 50%, #0a1a1a 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    position: relative;
    overflow: hidden;
}

.deciv-select-vignette[b-em9ne8suyn] {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.6) 100%);
    pointer-events: none;
}

.deciv-title[b-em9ne8suyn] {
    font-size: 3rem;
    letter-spacing: 1.2rem;
    color: #d4aa50;
    text-shadow: 0 0 30px rgba(212, 170, 80, 0.4), 0 2px 8px rgba(0,0,0,0.8);
    font-family: 'Georgia', serif;
    margin: 0;
    z-index: 1;
}

.deciv-subtitle[b-em9ne8suyn] {
    color: #8a8a9a;
    font-size: 1rem;
    letter-spacing: 0.3rem;
    margin: 0;
    z-index: 1;
}

.deciv-char-grid[b-em9ne8suyn] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 600px;
    z-index: 1;
}

.deciv-char-card[b-em9ne8suyn] {
    background: rgba(30, 25, 40, 0.8);
    border: 2px solid rgba(100, 80, 60, 0.3);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.deciv-char-card:hover[b-em9ne8suyn] {
    border-color: #d4aa50;
    background: rgba(40, 35, 55, 0.9);
    transform: translateY(-2px);
}

.deciv-char-selected[b-em9ne8suyn] {
    border-color: #d4aa50 !important;
    box-shadow: 0 0 20px rgba(212, 170, 80, 0.3), inset 0 0 20px rgba(212, 170, 80, 0.05);
    background: rgba(50, 40, 60, 0.9) !important;
}

.deciv-char-preview[b-em9ne8suyn] {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.3);
}

.deciv-char-name[b-em9ne8suyn] {
    color: #d4aa50;
    font-weight: bold;
    font-size: 1rem;
    letter-spacing: 0.1rem;
}

.deciv-char-desc[b-em9ne8suyn] {
    color: #7a7a8a;
    font-size: 0.75rem;
}

.deciv-enter-btn[b-em9ne8suyn] {
    background: linear-gradient(135deg, #d4aa50, #b08830);
    color: #1a1a2a;
    border: none;
    padding: 14px 48px;
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 0.15rem;
    border-radius: 8px;
    cursor: pointer;
    z-index: 1;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.deciv-enter-btn:hover[b-em9ne8suyn] {
    background: linear-gradient(135deg, #e0bb60, #c09940);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(212, 170, 80, 0.4);
}

/* ── GAME SCREEN ── */
.deciv-game[b-em9ne8suyn] {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    background: #0a0a12;
    outline: none;
    position: relative;
}

.deciv-hud[b-em9ne8suyn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: rgba(20, 16, 28, 0.95);
    border-bottom: 1px solid rgba(100, 80, 60, 0.3);
    font-size: 0.75rem;
}

.deciv-hud-name[b-em9ne8suyn] {
    color: #d4aa50;
    font-weight: bold;
}

.deciv-hud-room[b-em9ne8suyn] {
    color: #9a9aaa;
}

.deciv-hud-players[b-em9ne8suyn] {
    color: #5a9a5a;
}

/* ── VIEWPORT ── */
.deciv-viewport[b-em9ne8suyn] {
    width: 480px;
    height: 320px;
    overflow: hidden;
    position: relative;
    border: 2px solid rgba(100, 80, 60, 0.4);
    image-rendering: pixelated;
}

.deciv-scene[b-em9ne8suyn] {
    position: absolute;
    width: 480px;
    height: 320px;
    background-size: 480px 320px;
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

/* ── SPRITES (NPCs, Players) ── */
.deciv-npc[b-em9ne8suyn],
.deciv-other-player[b-em9ne8suyn],
.deciv-player[b-em9ne8suyn] {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.deciv-sprite[b-em9ne8suyn] {
    image-rendering: pixelated;
}

.deciv-npc-name[b-em9ne8suyn] {
    color: #aaa;
    font-size: 8px;
    text-shadow: 0 1px 2px black, 0 0 4px black;
    white-space: nowrap;
    margin-top: -2px;
}

.deciv-player-name[b-em9ne8suyn] {
    color: #d4aa50;
    font-size: 9px;
    font-weight: bold;
    text-shadow: 0 1px 3px black, 0 0 6px black;
    white-space: nowrap;
    margin-top: -2px;
}

.deciv-player-self[b-em9ne8suyn] {
    color: #5ae05a;
}

/* ── SPEECH BUBBLES ── */
.deciv-speech[b-em9ne8suyn] {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 16, 28, 0.92);
    color: #e0d8c8;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid rgba(212, 170, 80, 0.3);
    font-size: 9px;
    white-space: nowrap;
    max-width: 160px;
    text-align: center;
    pointer-events: none;
    animation: deciv-speech-in-b-em9ne8suyn 0.3s ease;
    margin-bottom: 4px;
}

.deciv-speech[b-em9ne8suyn]::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(20, 16, 28, 0.92);
}

@keyframes deciv-speech-in-b-em9ne8suyn {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── EXIT ZONES ── */
.deciv-exit[b-em9ne8suyn] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(212, 170, 80, 0.5);
    border-radius: 4px;
    animation: deciv-exit-pulse-b-em9ne8suyn 2s ease infinite;
}

.deciv-exit span[b-em9ne8suyn] {
    color: #d4aa50;
    font-size: 8px;
    font-weight: bold;
    text-shadow: 0 1px 4px black;
    white-space: nowrap;
}

@keyframes deciv-exit-pulse-b-em9ne8suyn {
    0%, 100% { border-color: rgba(212, 170, 80, 0.3); }
    50% { border-color: rgba(212, 170, 80, 0.8); }
}

/* ── CHAT ── */
.deciv-chat[b-em9ne8suyn] {
    background: rgba(16, 12, 24, 0.95);
    border-top: 1px solid rgba(100, 80, 60, 0.3);
    padding: 6px;
}

.deciv-chat-log[b-em9ne8suyn] {
    max-height: 80px;
    overflow-y: auto;
    padding: 2px;
}

.deciv-chat-msg[b-em9ne8suyn] {
    font-size: 0.7rem;
    color: #b0a898;
    padding: 1px 0;
}

.deciv-chat-msg b[b-em9ne8suyn] {
    color: #d4aa50;
}

.deciv-chat-input input[b-em9ne8suyn] {
    width: 100%;
    background: rgba(30, 24, 40, 0.8);
    border: 1px solid rgba(100, 80, 60, 0.3);
    border-radius: 4px;
    color: #e0d8c8;
    padding: 4px 8px;
    font-size: 0.75rem;
    outline: none;
}

.deciv-chat-input input:focus[b-em9ne8suyn] {
    border-color: #d4aa50;
}

.deciv-chat-input input[b-em9ne8suyn]::placeholder {
    color: #5a5a6a;
}

/* ── MOBILE D-PAD ── */
.deciv-mobile-controls[b-em9ne8suyn] {
    display: none;
    position: relative;
    height: 120px;
    margin: 8px auto;
    width: 120px;
}

.deciv-dpad[b-em9ne8suyn] {
    position: absolute;
    width: 36px;
    height: 36px;
    background: rgba(212, 170, 80, 0.15);
    border: 1px solid rgba(212, 170, 80, 0.3);
    border-radius: 6px;
    color: #d4aa50;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
}

.deciv-dpad:active[b-em9ne8suyn] {
    background: rgba(212, 170, 80, 0.35);
}

.deciv-dpad-up[b-em9ne8suyn] { left: 42px; top: 0; }
.deciv-dpad-left[b-em9ne8suyn] { left: 0; top: 42px; }
.deciv-dpad-right[b-em9ne8suyn] { left: 84px; top: 42px; }
.deciv-dpad-down[b-em9ne8suyn] { left: 42px; top: 84px; }

/* ── RESPONSIVE ── */
@media (max-width: 520px) {
    .deciv-viewport[b-em9ne8suyn] {
        width: 100vw;
        height: calc(100vw * 320 / 480);
    }

    .deciv-char-grid[b-em9ne8suyn] {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 12px;
    }

    .deciv-mobile-controls[b-em9ne8suyn] {
        display: block;
    }

    .deciv-title[b-em9ne8suyn] {
        font-size: 2rem;
        letter-spacing: 0.8rem;
    }
}
/* /Components/Pages/DungeonLeaderboard.razor.rz.scp.css */
.leaderboard-container[b-0oviue3xcu] {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 1.5rem;
}

.leaderboard-header[b-0oviue3xcu] {
    text-align: center;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, rgba(120, 40, 237, 0.1), rgba(255, 215, 0, 0.1));
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.leaderboard-header h1[b-0oviue3xcu] {
    font-size: 2.5rem;
    margin: 0 0 0.5rem;
}

.leaderboard-subtitle[b-0oviue3xcu] {
    color: #aaa;
    font-size: 0.95rem;
}

.leaderboard-filters[b-0oviue3xcu] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
}

.filter-group[b-0oviue3xcu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-group label[b-0oviue3xcu] {
    color: #ffd700;
    font-weight: 600;
}

.filter-group select[b-0oviue3xcu] {
    padding: 0.5rem;
    background: rgba(255, 215, 0, 0.1);
    color: #ccc;
    border: 1px solid #ffd700;
    border-radius: 4px;
}

.leaderboard-table[b-0oviue3xcu] {
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #ffd700;
    border-radius: 6px;
    overflow: hidden;
}

.leaderboard-header-row[b-0oviue3xcu],
.leaderboard-row[b-0oviue3xcu] {
    display: grid;
    grid-template-columns: 60px 150px 80px 80px 60px 60px 100px;
    padding: 1rem;
    align-items: center;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.leaderboard-header-row[b-0oviue3xcu] {
    background: rgba(255, 215, 0, 0.1);
    font-weight: 700;
    color: #ffd700;
}

.leaderboard-row:hover[b-0oviue3xcu] {
    background: rgba(255, 215, 0, 0.05);
}

.rank-badge[b-0oviue3xcu] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 700;
    text-align: center;
    width: 45px;
}

.rank-gold[b-0oviue3xcu] {
    background: rgba(255, 215, 0, 0.3);
    color: #ffd700;
    border: 1px solid #ffd700;
}

.rank-silver[b-0oviue3xcu] {
    background: rgba(192, 192, 192, 0.2);
    color: #c0c0c0;
    border: 1px solid #c0c0c0;
}

.rank-bronze[b-0oviue3xcu] {
    background: rgba(205, 127, 50, 0.2);
    color: #cd7f32;
    border: 1px solid #cd7f32;
}

.rank-normal[b-0oviue3xcu] {
    background: transparent;
    color: #aaa;
}

.leaderboard-loading[b-0oviue3xcu],
.leaderboard-empty[b-0oviue3xcu] {
    text-align: center;
    padding: 3rem;
    color: #aaa;
}

@media (max-width: 768px) {
    .leaderboard-header-row[b-0oviue3xcu],
    .leaderboard-row[b-0oviue3xcu] {
        grid-template-columns: 40px 100px 60px 60px;
    }

    .kills[b-0oviue3xcu], .level[b-0oviue3xcu], .date[b-0oviue3xcu] {
        display: none;
    }
}
/* /Components/Pages/FormBuilder.razor.rz.scp.css */
/* === Form Builder === */
.fb-container[b-43dsrpk90l] {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #333;
}

/* Override dark theme on form inputs inside builder */
.fb-container[b-43dsrpk90l]  input,
.fb-container[b-43dsrpk90l]  select,
.fb-container[b-43dsrpk90l]  textarea,
.fb-container[b-43dsrpk90l]  .form-control,
.fb-container[b-43dsrpk90l]  .form-select {
    background-color: #fff;
    color: #333;
    border-color: #ccc;
}

.fb-container[b-43dsrpk90l]  input:focus,
.fb-container[b-43dsrpk90l]  select:focus,
.fb-container[b-43dsrpk90l]  textarea:focus,
.fb-container[b-43dsrpk90l]  .form-control:focus,
.fb-container[b-43dsrpk90l]  .form-select:focus {
    background-color: #fff;
    color: #333;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.fb-container[b-43dsrpk90l]  .form-control::placeholder {
    color: #999;
}

.fb-container[b-43dsrpk90l]  option {
    background: #fff;
    color: #333;
}

.fb-loading[b-43dsrpk90l] {
    text-align: center;
    padding: 60px;
    color: #6c757d;
}

/* Toolbar */
.fb-toolbar[b-43dsrpk90l] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
}

.fb-title-edit[b-43dsrpk90l] {
    flex: 1;
}

.fb-title[b-43dsrpk90l] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    color: #1a1a2e;
}

.fb-title:hover[b-43dsrpk90l] {
    background: #f0f0f0;
}

.fb-title-input[b-43dsrpk90l] {
    font-size: 1.2rem;
    font-weight: 600;
}

.fb-toolbar-right[b-43dsrpk90l] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fb-save-status[b-43dsrpk90l] {
    font-size: 0.8rem;
    color: #28a745;
    font-weight: 500;
}

/* Description */
.fb-description[b-43dsrpk90l] {
    margin-bottom: 16px;
}

/* Add bar */
.fb-add-bar[b-43dsrpk90l] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 12px 16px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 20px;
}

.fb-add-label[b-43dsrpk90l] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    margin-right: 4px;
}

/* Empty state */
.fb-empty-elements[b-43dsrpk90l] {
    text-align: center;
    padding: 60px 20px;
    color: #888;
    border: 2px dashed #ddd;
    border-radius: 8px;
    margin-top: 12px;
}

/* Elements list */
.fb-elements-list[b-43dsrpk90l] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fb-element-wrapper[b-43dsrpk90l] {
    transition: transform 0.15s;
}

/* SortableJS ghost / drag states */
[b-43dsrpk90l] .fc-sortable-ghost {
    opacity: 0.4;
    background: #e3f2fd !important;
}

[b-43dsrpk90l] .fc-sortable-chosen {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* === Element Editor (inline) === */
[b-43dsrpk90l] .fc-element-editor {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}

[b-43dsrpk90l] .fc-element-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fafafa;
    border-bottom: 1px solid #eee;
}

[b-43dsrpk90l] .fc-drag-handle {
    cursor: grab;
    font-size: 1.1rem;
    color: #aaa;
    padding: 2px 4px;
    user-select: none;
}

[b-43dsrpk90l] .fc-drag-handle:hover {
    color: #555;
}

[b-43dsrpk90l] .fc-element-type-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

[b-43dsrpk90l] .fc-type-header {
    background: #1a1a2e;
    color: #fff;
}

[b-43dsrpk90l] .fc-type-subheader {
    background: #6c757d;
    color: #fff;
}

[b-43dsrpk90l] .fc-type-question {
    background: #0d6efd;
    color: #fff;
}

[b-43dsrpk90l] .fc-type-signature {
    background: #d4a017;
    color: #fff;
}

[b-43dsrpk90l] .fc-question-type-label {
    font-size: 0.75rem;
    color: #666;
}

[b-43dsrpk90l] .fc-element-spacer {
    flex: 1;
}

/* Edit body */
[b-43dsrpk90l] .fc-element-edit-body {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

[b-43dsrpk90l] .fc-field-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

[b-43dsrpk90l] .fc-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

[b-43dsrpk90l] .fc-checkbox-group {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

[b-43dsrpk90l] .fc-edit-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

/* Preview (collapsed) */
[b-43dsrpk90l] .fc-element-preview {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-43dsrpk90l] .fc-element-preview:hover {
    background: #f8f9fa;
}

[b-43dsrpk90l] .fc-preview-text {
    font-size: 0.9rem;
    color: #333;
}

[b-43dsrpk90l] .fc-required-star {
    color: #dc3545;
    font-weight: bold;
}

[b-43dsrpk90l] .fc-condition-indicator {
    font-size: 0.85rem;
    opacity: 0.6;
}

/* === Options Editor === */
[b-43dsrpk90l] .fc-options-editor {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[b-43dsrpk90l] .fc-option-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-43dsrpk90l] .fc-option-num {
    font-size: 0.8rem;
    color: #888;
    width: 20px;
    text-align: right;
}

[b-43dsrpk90l] .fc-option-remove {
    padding: 1px 6px;
    font-size: 1rem;
    line-height: 1;
}

[b-43dsrpk90l] .fc-option-add {
    align-self: flex-start;
    margin-top: 2px;
}

/* === Condition Picker === */
[b-43dsrpk90l] .fc-condition-picker {
    border-top: 1px solid #eee;
    padding-top: 8px;
}

[b-43dsrpk90l] .fc-condition-toggle {
    margin-bottom: 6px;
}

[b-43dsrpk90l] .fc-condition-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 20px;
}

[b-43dsrpk90l] .fc-condition-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-43dsrpk90l] .fc-label-sm {
    font-size: 0.75rem;
    font-weight: 600;
    color: #888;
    min-width: 35px;
}

/* === Table type badge === */
[b-43dsrpk90l] .fc-type-table {
    background: #0d9488;
    color: #fff;
}

/* === Table column editor === */
[b-43dsrpk90l] .fc-table-columns {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[b-43dsrpk90l] .fc-table-col-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-43dsrpk90l] .fc-table-col-count {
    font-size: 0.75rem;
    color: #0d9488;
    font-weight: 500;
}

/* === Style Toolbar === */
[b-43dsrpk90l] .fc-style-toolbar {
    border-top: 1px solid #eee;
    padding-top: 8px;
}

[b-43dsrpk90l] .fc-style-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

[b-43dsrpk90l] .fc-style-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}

[b-43dsrpk90l] .fc-style-btn:hover {
    background: #f0f0f0;
}

[b-43dsrpk90l] .fc-style-btn.active {
    background: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}

[b-43dsrpk90l] .fc-style-sep {
    width: 1px;
    height: 24px;
    background: #ddd;
    margin: 0 4px;
}

[b-43dsrpk90l] .fc-style-font {
    width: 120px;
    font-size: 0.78rem;
}

[b-43dsrpk90l] .fc-style-highlight {
    width: 100px;
    font-size: 0.78rem;
}

[b-43dsrpk90l] .fc-label-inline {
    font-size: 0.75rem;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
}

/* === Responsive: Mobile === */
@media (max-width: 640px) {
    .fb-container[b-43dsrpk90l] {
        padding: 12px;
    }

    .fb-toolbar[b-43dsrpk90l] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .fb-title[b-43dsrpk90l] {
        font-size: 1.1rem;
    }

    .fb-toolbar-right[b-43dsrpk90l] {
        width: 100%;
        justify-content: flex-end;
    }

    .fb-add-bar[b-43dsrpk90l] {
        padding: 8px 10px;
        gap: 4px;
    }

    .fb-add-bar .btn[b-43dsrpk90l] {
        font-size: 0.72rem;
        padding: 3px 6px;
    }

    .fb-add-label[b-43dsrpk90l] {
        width: 100%;
        margin-bottom: 2px;
    }

    [b-43dsrpk90l] .fc-element-header {
        flex-wrap: wrap;
        padding: 6px 8px;
    }

    [b-43dsrpk90l] .fc-element-edit-body {
        padding: 10px 12px;
    }

    [b-43dsrpk90l] .fc-condition-fields {
        padding-left: 8px;
    }

    [b-43dsrpk90l] .fc-condition-row {
        flex-wrap: wrap;
    }

    [b-43dsrpk90l] .fc-option-row {
        flex-wrap: wrap;
    }
}
/* /Components/Pages/FormCreator.razor.rz.scp.css */
/* === Form Creator Dashboard === */
.fc-container[b-696a6omyj3] {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #333;
}

/* Override dark theme on form inputs inside creator */
.fc-container[b-696a6omyj3]  input,
.fc-container[b-696a6omyj3]  select,
.fc-container[b-696a6omyj3]  textarea,
.fc-container[b-696a6omyj3]  .form-control,
.fc-container[b-696a6omyj3]  .form-select {
    background-color: #fff;
    color: #333;
    border-color: #ccc;
}

.fc-container[b-696a6omyj3]  option {
    background: #fff;
    color: #333;
}

.fc-header[b-696a6omyj3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.fc-header h2[b-696a6omyj3] {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a1a2e;
}

.fc-subtitle[b-696a6omyj3] {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: #6c757d;
}

.fc-new-btn[b-696a6omyj3] {
    white-space: nowrap;
    font-weight: 600;
}

/* Loading / Empty states */
.fc-loading[b-696a6omyj3] {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
    font-size: 1rem;
}

.fc-empty[b-696a6omyj3] {
    text-align: center;
    padding: 80px 20px;
    color: #6c757d;
}

.fc-empty-icon[b-696a6omyj3] {
    font-size: 3rem;
    margin-bottom: 12px;
}

.fc-empty h4[b-696a6omyj3] {
    color: #1a1a2e;
    margin-bottom: 6px;
}

.fc-empty p[b-696a6omyj3] {
    margin-bottom: 16px;
}

/* Template cards */
.fc-templates-list[b-696a6omyj3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fc-template-card[b-696a6omyj3] {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.fc-template-card:hover[b-696a6omyj3] {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.fc-card-body[b-696a6omyj3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    gap: 16px;
}

.fc-card-info[b-696a6omyj3] {
    flex: 1;
    min-width: 0;
}

.fc-card-title[b-696a6omyj3] {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1a1a2e;
}

.fc-card-meta[b-696a6omyj3] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 0.78rem;
}

.fc-meta-text[b-696a6omyj3] {
    color: #888;
}

.fc-card-desc[b-696a6omyj3] {
    margin: 6px 0 0;
    font-size: 0.85rem;
    color: #6c757d;
}

.fc-badge[b-696a6omyj3] {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fc-badge-draft[b-696a6omyj3] {
    background: #f0f0f0;
    color: #666;
}

.fc-badge-published[b-696a6omyj3] {
    background: #d4edda;
    color: #155724;
}

.fc-card-actions[b-696a6omyj3] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Responses panel */
.fc-responses-panel[b-696a6omyj3] {
    border-top: 1px solid #e0e0e0;
    padding: 16px 20px;
    background: #fafafa;
}

.fc-responses-panel h6[b-696a6omyj3] {
    margin: 0 0 12px;
    font-weight: 600;
    color: #333;
}

.fc-no-responses[b-696a6omyj3] {
    color: #888;
    font-size: 0.85rem;
    font-style: italic;
}

.fc-responses-table[b-696a6omyj3] {
    font-size: 0.85rem;
    margin-bottom: 0;
}

/* Delete modal */
.fc-modal-backdrop[b-696a6omyj3] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.fc-modal[b-696a6omyj3] {
    background: #fff;
    border-radius: 10px;
    padding: 24px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.fc-modal h5[b-696a6omyj3] {
    margin: 0 0 12px;
    font-weight: 700;
}

.fc-modal p[b-696a6omyj3] {
    margin: 0 0 20px;
    color: #555;
    font-size: 0.9rem;
}

.fc-modal-actions[b-696a6omyj3] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* === Responsive: Mobile === */
@media (max-width: 640px) {
    .fc-container[b-696a6omyj3] {
        padding: 12px;
    }

    .fc-header[b-696a6omyj3] {
        flex-direction: column;
        gap: 12px;
    }

    .fc-header h2[b-696a6omyj3] {
        font-size: 1.3rem;
    }

    .fc-new-btn[b-696a6omyj3] {
        width: 100%;
    }

    .fc-card-body[b-696a6omyj3] {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px;
        gap: 10px;
    }

    .fc-card-actions[b-696a6omyj3] {
        width: 100%;
        flex-wrap: wrap;
    }

    .fc-card-actions .btn[b-696a6omyj3] {
        flex: 1;
        min-width: 0;
        font-size: 0.78rem;
        padding: 4px 8px;
    }

    .fc-responses-panel[b-696a6omyj3] {
        padding: 12px;
        overflow-x: auto;
    }

    .fc-responses-table[b-696a6omyj3] {
        font-size: 0.75rem;
        min-width: 500px;
    }

    .fc-modal[b-696a6omyj3] {
        width: 95%;
        padding: 16px;
    }

    .fc-empty[b-696a6omyj3] {
        padding: 40px 16px;
    }
}
/* /Components/Pages/FormFill.razor.rz.scp.css */
/* === Form Fill Page === */
.ff-container[b-9psg1re28q] {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #333;
}

/* Override dark theme on form inputs inside fill page */
.ff-container[b-9psg1re28q]  input,
.ff-container[b-9psg1re28q]  select,
.ff-container[b-9psg1re28q]  textarea,
.ff-container[b-9psg1re28q]  .form-control,
.ff-container[b-9psg1re28q]  .form-select {
    background-color: #fff;
    color: #333;
    border-color: #ccc;
}

.ff-container[b-9psg1re28q]  input:focus,
.ff-container[b-9psg1re28q]  select:focus,
.ff-container[b-9psg1re28q]  textarea:focus,
.ff-container[b-9psg1re28q]  .form-control:focus,
.ff-container[b-9psg1re28q]  .form-select:focus {
    background-color: #fff;
    color: #333;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.ff-container[b-9psg1re28q]  .form-control::placeholder {
    color: #999;
}

.ff-container[b-9psg1re28q]  option {
    background: #fff;
    color: #333;
}

.ff-loading[b-9psg1re28q],
.ff-error[b-9psg1re28q] {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

/* Header */
.ff-header[b-9psg1re28q] {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e0e0e0;
}

.ff-header h3[b-9psg1re28q] {
    margin: 0 0 6px;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a2e;
}

.ff-description[b-9psg1re28q] {
    margin: 0;
    color: #6c757d;
    font-size: 0.9rem;
}

/* Form elements */
.ff-form[b-9psg1re28q] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ff-element[b-9psg1re28q] {
    padding: 8px 0;
}

/* Element Renderer styles */
[b-9psg1re28q] .fr-header {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 2px solid #e0e0e0;
}

[b-9psg1re28q] .fr-header h4 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a2e;
}

[b-9psg1re28q] .fr-subheader {
    margin-top: 8px;
}

[b-9psg1re28q] .fr-subheader h6 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #495057;
}

[b-9psg1re28q] .fr-question {
    padding: 12px 16px;
    background: #fafafa;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
}

[b-9psg1re28q] .fr-question.fr-disabled {
    opacity: 0.5;
    pointer-events: none;
}

[b-9psg1re28q] .fr-question-label {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

[b-9psg1re28q] .fr-required {
    color: #dc3545;
    margin-left: 3px;
    font-size: 1.1em;
    font-weight: 700;
}

[b-9psg1re28q] .fr-input {
    max-width: 400px;
}

/* Radio / Checkbox groups */
[b-9psg1re28q] .fr-radio-group,
[b-9psg1re28q] .fr-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[b-9psg1re28q] .fr-yesno {
    flex-direction: row;
    gap: 16px;
}

[b-9psg1re28q] .fr-radio-option,
[b-9psg1re28q] .fr-checkbox-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    cursor: pointer;
}

[b-9psg1re28q] .fr-radio-option input,
[b-9psg1re28q] .fr-checkbox-option input {
    margin: 0;
}

/* Measurement */
[b-9psg1re28q] .fr-measurement {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

[b-9psg1re28q] .fr-meas-system-toggle {
    display: flex;
    gap: 16px;
}

[b-9psg1re28q] .fr-meas-imperial,
[b-9psg1re28q] .fr-meas-metric {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

[b-9psg1re28q] .fr-meas-field {
    display: flex;
    align-items: center;
    gap: 4px;
}

[b-9psg1re28q] .fr-meas-input {
    width: 80px;
    text-align: center;
}

[b-9psg1re28q] .fr-meas-unit {
    font-size: 0.85rem;
    color: #555;
    font-weight: 500;
    min-width: 20px;
}

[b-9psg1re28q] .fr-meas-fraction {
    width: 90px;
}

[b-9psg1re28q] .fr-meas-unit-select {
    width: 140px;
}

/* Photo Upload */
[b-9psg1re28q] .fr-photo-upload {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[b-9psg1re28q] .fr-photo-dropzone {
    position: relative;
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    max-width: 400px;
}

[b-9psg1re28q] .fr-photo-dropzone:hover {
    border-color: #0d6efd;
    background: #f0f7ff;
}

[b-9psg1re28q] .fr-photo-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

[b-9psg1re28q] .fr-photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #666;
    font-size: 0.9rem;
    pointer-events: none;
}

[b-9psg1re28q] .fr-photo-icon {
    font-size: 2rem;
}

[b-9psg1re28q] .fr-photo-hint {
    font-size: 0.75rem;
    color: #999;
}

[b-9psg1re28q] .fr-photo-preview {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

[b-9psg1re28q] .fr-photo-img {
    max-width: 400px;
    max-height: 300px;
    border-radius: 6px;
    border: 1px solid #ddd;
    object-fit: contain;
    background: #f5f5f5;
}

[b-9psg1re28q] .fr-photo-remove {
    align-self: flex-start;
}

[b-9psg1re28q] .fr-photo-uploading {
    font-size: 0.85rem;
    color: #0d6efd;
    font-weight: 500;
}

/* Date stamp */
[b-9psg1re28q] .fr-datestamp {
    padding: 8px 12px;
    background: #e9ecef;
    border-radius: 4px;
    font-size: 0.9rem;
    color: #333;
    font-weight: 500;
    max-width: 300px;
}

/* Validation */
[b-9psg1re28q] .fr-validation-msg {
    color: #dc3545;
    font-size: 0.8rem;
    margin-top: 4px;
}

.ff-validation-summary[b-9psg1re28q] {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 12px 16px;
    margin-top: 12px;
}

.ff-validation-summary ul[b-9psg1re28q] {
    margin: 6px 0 0;
    padding-left: 20px;
}

.ff-validation-summary li[b-9psg1re28q] {
    font-size: 0.85rem;
    color: #856404;
}

/* Signature */
[b-9psg1re28q] .fc-signature-container {
    padding: 12px 16px;
    background: #fafafa;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
}

[b-9psg1re28q] .fc-sig-label {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

[b-9psg1re28q] .fc-signature-canvas {
    display: block;
    border: 2px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: crosshair;
    max-width: 100%;
    touch-action: none;
}

[b-9psg1re28q] .fc-sig-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

[b-9psg1re28q] .fc-sig-status {
    font-size: 0.8rem;
    color: #28a745;
    font-weight: 500;
}

/* === Table Widget === */
[b-9psg1re28q] .fr-table-container {
    padding: 12px 16px;
    background: #fafafa;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
}

[b-9psg1re28q] .fr-table-wrapper {
    overflow-x: auto;
}

[b-9psg1re28q] .fr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    min-width: 400px;
}

[b-9psg1re28q] .fr-table th {
    background: #e9ecef;
    padding: 8px 10px;
    text-align: left;
    font-weight: 700;
    font-size: 0.85rem;
    color: #222;
    border: 1px solid #dee2e6;
    white-space: nowrap;
}

[b-9psg1re28q] .fr-table td {
    padding: 4px 6px;
    border: 1px solid #dee2e6;
    vertical-align: middle;
}

[b-9psg1re28q] .fr-table-rownum {
    width: 30px;
    text-align: center;
    color: #555;
    font-size: 0.8rem;
    font-weight: 500;
}

[b-9psg1re28q] .fr-table-actions {
    width: 40px;
    text-align: center;
}

[b-9psg1re28q] .fr-table-input {
    font-size: 0.82rem;
    padding: 2px 6px;
    border: 1px solid #ccc;
    min-width: 60px;
}

[b-9psg1re28q] .fr-table-calc {
    font-weight: 600;
    color: #0d6efd;
    font-size: 0.85rem;
    padding: 0 6px;
}

[b-9psg1re28q] .fr-table-add-row {
    margin-top: 8px;
}

[b-9psg1re28q] .fr-table-grand-total {
    text-align: right;
    padding: 8px 6px 0;
    font-size: 0.9rem;
    color: #1a1a2e;
}

/* Actions */
.ff-actions[b-9psg1re28q] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
}

.ff-save-msg[b-9psg1re28q] {
    text-align: right;
    font-size: 0.85rem;
    color: #28a745;
    margin-top: 8px;
}

/* Completed state */
.ff-completed[b-9psg1re28q] {
    text-align: center;
    padding: 60px 20px;
}

.ff-completed-header[b-9psg1re28q] {
    margin-bottom: 24px;
}

.ff-check-icon[b-9psg1re28q] {
    font-size: 3rem;
    margin-bottom: 8px;
}

.ff-completed-header h3[b-9psg1re28q] {
    margin: 0 0 4px;
    font-weight: 700;
    color: #1a1a2e;
}

.ff-completed-date[b-9psg1re28q] {
    font-size: 0.85rem;
    color: #888;
}

.ff-completed-actions[b-9psg1re28q] {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* === Responsive: Mobile === */
@media (max-width: 640px) {
    .ff-container[b-9psg1re28q] {
        padding: 12px;
    }

    .ff-header h3[b-9psg1re28q] {
        font-size: 1.2rem;
    }

    [b-9psg1re28q] .fr-input {
        max-width: 100%;
    }

    [b-9psg1re28q] .fr-photo-dropzone {
        max-width: 100%;
        padding: 20px 12px;
    }

    [b-9psg1re28q] .fr-photo-img {
        max-width: 100%;
    }

    [b-9psg1re28q] .fr-datestamp {
        max-width: 100%;
    }

    [b-9psg1re28q] .fr-meas-imperial,
    [b-9psg1re28q] .fr-meas-metric {
        flex-direction: column;
        align-items: flex-start;
    }

    [b-9psg1re28q] .fr-meas-field {
        width: 100%;
    }

    [b-9psg1re28q] .fr-meas-input {
        width: 100%;
    }

    [b-9psg1re28q] .fr-meas-fraction {
        width: 100%;
    }

    [b-9psg1re28q] .fr-meas-unit-select {
        width: 100%;
    }

    [b-9psg1re28q] .fc-signature-canvas {
        width: 100% !important;
        height: auto !important;
        min-height: 120px;
    }

    [b-9psg1re28q] .fr-question {
        padding: 10px 12px;
    }

    .ff-actions[b-9psg1re28q] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .ff-actions .btn[b-9psg1re28q] {
        flex: 1;
        min-width: 120px;
    }

    .ff-completed[b-9psg1re28q] {
        padding: 40px 12px;
    }

    .ff-completed-actions[b-9psg1re28q] {
        flex-wrap: wrap;
    }

    [b-9psg1re28q] .fr-table {
        min-width: 500px;
        font-size: 0.78rem;
    }

    [b-9psg1re28q] .fr-table-container {
        padding: 10px 12px;
    }
}
/* /Components/Pages/Game.razor.rz.scp.css */
/* ===== Main Container (game + inventory side-by-side) ===== */
.game-container[b-wv1fc35rtd] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    justify-content: center;
    padding: 1rem;
    flex-wrap: wrap;
}

/* ===== Game Area ===== */
.game-wrapper[b-wv1fc35rtd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    outline: none;
    user-select: none;
}

.game-wrapper:focus[b-wv1fc35rtd] {
    outline: 2px solid #ffd700;
    outline-offset: 4px;
    border-radius: 8px;
}

.game-title[b-wv1fc35rtd] {
    color: #ffd700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 0.5rem;
    font-family: 'Segoe UI', monospace;
    letter-spacing: 2px;
}

/* ===== CLASS SELECTION ===== */
.class-select-overlay[b-wv1fc35rtd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 768px;
    height: 576px;
    background: rgba(0, 0, 0, 0.9);
    border: 3px solid #ffd700;
    border-radius: 8px;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.2);
}

.class-select-title[b-wv1fc35rtd] {
    color: #ffd700;
    font-size: 2rem;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
    margin-bottom: 2rem;
    letter-spacing: 3px;
}

.class-cards[b-wv1fc35rtd] {
    display: flex;
    gap: 1.5rem;
}

.class-card[b-wv1fc35rtd] {
    width: 200px;
    padding: 1.5rem 1rem;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid #444;
    background: rgba(30, 30, 50, 0.9);
}

.class-card:hover[b-wv1fc35rtd] {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 8px 30px rgba(255, 215, 0, 0.3);
}

.class-card h3[b-wv1fc35rtd] {
    margin: 0.5rem 0;
    font-size: 1.3rem;
    letter-spacing: 1px;
}

.class-icon[b-wv1fc35rtd] {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.class-stats[b-wv1fc35rtd] {
    margin: 0.8rem 0;
    font-size: 0.85rem;
    color: #ccc;
    line-height: 1.8;
}

.class-stats p[b-wv1fc35rtd] {
    margin: 0;
}

.class-abilities[b-wv1fc35rtd] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    margin-top: 0.5rem;
}

.ability-tag[b-wv1fc35rtd] {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.08);
    color: #aaa;
    border: 1px solid #555;
}

/* Class-specific card colors */
.warrior-card[b-wv1fc35rtd] { border-color: #ff6633; }
.warrior-card:hover[b-wv1fc35rtd] { border-color: #ff9944; box-shadow: 0 8px 30px rgba(255, 100, 50, 0.3); }
.warrior-card h3[b-wv1fc35rtd] { color: #ff6633; }

.mage-card[b-wv1fc35rtd] { border-color: #6688ff; }
.mage-card:hover[b-wv1fc35rtd] { border-color: #88aaff; box-shadow: 0 8px 30px rgba(100, 130, 255, 0.3); }
.mage-card h3[b-wv1fc35rtd] { color: #6688ff; }

.rogue-card[b-wv1fc35rtd] { border-color: #44cc66; }
.rogue-card:hover[b-wv1fc35rtd] { border-color: #66ee88; box-shadow: 0 8px 30px rgba(68, 200, 100, 0.3); }
.rogue-card h3[b-wv1fc35rtd] { color: #44cc66; }

/* ===== Game Messages ===== */
.game-message[b-wv1fc35rtd] {
    padding: 0.4rem 1.2rem;
    border-radius: 6px;
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    animation: messageAppear-b-wv1fc35rtd 0.3s ease-out;
    text-align: center;
}

.msg-hit[b-wv1fc35rtd] {
    background: rgba(255, 165, 0, 0.2);
    color: #ffa500;
    border: 1px solid #ffa500;
}

.msg-kill[b-wv1fc35rtd] {
    background: rgba(255, 0, 0, 0.2);
    color: #ff4444;
    border: 1px solid #ff4444;
    font-size: 1.1rem;
}

.msg-spawn[b-wv1fc35rtd] {
    background: rgba(0, 200, 100, 0.2);
    color: #44dd88;
    border: 1px solid #44dd88;
}

.msg-gold[b-wv1fc35rtd] {
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
    border: 1px solid #ffd700;
}

.msg-loot[b-wv1fc35rtd] {
    background: rgba(150, 150, 150, 0.2);
    color: #aaa;
    border: 1px solid #888;
}

.msg-rare[b-wv1fc35rtd] {
    background: rgba(60, 120, 255, 0.2);
    color: #5599ff;
    border: 1px solid #5599ff;
}

.msg-legendary[b-wv1fc35rtd] {
    background: rgba(255, 215, 0, 0.15);
    color: #ffd700;
    border: 1px solid #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.msg-level[b-wv1fc35rtd] {
    background: rgba(0, 200, 100, 0.2);
    color: #44dd88;
    border: 1px solid #44dd88;
    font-size: 1.1rem;
}

.msg-block[b-wv1fc35rtd] {
    background: rgba(100, 150, 255, 0.2);
    color: #88bbff;
    border: 1px solid #88bbff;
}

.msg-dodge[b-wv1fc35rtd] {
    background: rgba(68, 200, 100, 0.2);
    color: #66ee88;
    border: 1px solid #66ee88;
}

@keyframes messageAppear-b-wv1fc35rtd {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Room & Tiles ===== */
.game-room[b-wv1fc35rtd] {
    position: relative;
    background: #1a1a2e;
    border: 3px solid #555;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), inset 0 0 40px rgba(0, 0, 0, 0.3);
}

.tile[b-wv1fc35rtd] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.tile.wall[b-wv1fc35rtd] {
    background: #2d2d44;
    border: 1px solid #3a3a55;
}

.tile.floor[b-wv1fc35rtd] {
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.tile.floor:nth-child(odd)[b-wv1fc35rtd] {
    background: #1c1c32;
}

/* Tile features */
.tile.tile-pillar[b-wv1fc35rtd] {
    background: #252540;
    border: 1px solid #3a3a55;
}

.tile.tile-lava[b-wv1fc35rtd] {
    background: #4a1500;
    border: 1px solid #661a00;
    animation: lavaGlow-b-wv1fc35rtd 1.5s ease-in-out infinite alternate;
}

@keyframes lavaGlow-b-wv1fc35rtd {
    from { background: #4a1500; box-shadow: inset 0 0 8px rgba(255, 80, 0, 0.3); }
    to { background: #5a2000; box-shadow: inset 0 0 16px rgba(255, 120, 0, 0.5); }
}

.tile.tile-bridge[b-wv1fc35rtd] {
    background: #3a2a1a;
    border: 1px solid #5a4a2a;
}

.tile.tile-pit[b-wv1fc35rtd] {
    background: #0a0a14;
    border: 1px solid #1a1a28;
}

.wall-detail[b-wv1fc35rtd] {
    font-size: 24px;
    line-height: 1;
    opacity: 0.9;
}

.feature-icon[b-wv1fc35rtd] {
    font-size: 20px;
    line-height: 1;
    opacity: 0.6;
}

.feature-torch[b-wv1fc35rtd] {
    font-size: 18px;
    opacity: 0.8;
    animation: torchFlicker-b-wv1fc35rtd 0.5s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 6px rgba(255, 150, 0, 0.6));
}

@keyframes torchFlicker-b-wv1fc35rtd {
    from { opacity: 0.7; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1.05); }
}

.feature-barrel[b-wv1fc35rtd] {
    font-size: 22px;
    opacity: 0.8;
    filter: drop-shadow(0 0 3px rgba(139, 90, 43, 0.5));
}

/* ===== Player ===== */
.player[b-wv1fc35rtd] {
    font-size: 32px;
    line-height: 1;
    z-index: 10;
    transition: transform 0.05s ease;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.5));
    animation: playerBob-b-wv1fc35rtd 1.5s ease-in-out infinite;
}

.player.facing-left[b-wv1fc35rtd] { transform: scaleX(-1); }
.player.facing-right[b-wv1fc35rtd] { transform: scaleX(1); }
.player.facing-up[b-wv1fc35rtd] { transform: translateY(-2px); }
.player.facing-down[b-wv1fc35rtd] { transform: translateY(2px); }

.player.damage-flash[b-wv1fc35rtd] {
    animation: damageFlash-b-wv1fc35rtd 0.3s ease-out !important;
    filter: drop-shadow(0 0 12px rgba(255, 0, 0, 0.9)) !important;
}

.player.dodging[b-wv1fc35rtd] {
    opacity: 0.5;
    filter: drop-shadow(0 0 10px rgba(68, 200, 100, 0.8)) !important;
}

.player.blocking[b-wv1fc35rtd] {
    filter: drop-shadow(0 0 10px rgba(100, 150, 255, 0.8)) !important;
}

@keyframes playerBob-b-wv1fc35rtd {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes damageFlash-b-wv1fc35rtd {
    0% { filter: brightness(3) drop-shadow(0 0 16px rgba(255, 0, 0, 1)); }
    50% { filter: brightness(0.3) drop-shadow(0 0 8px rgba(255, 0, 0, 0.6)); }
    100% { filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.5)); }
}

/* ===== Mob Types ===== */
.mob[b-wv1fc35rtd] {
    font-size: 28px;
    line-height: 1;
    z-index: 9;
}

.mob-rat[b-wv1fc35rtd] {
    filter: drop-shadow(0 0 4px rgba(139, 119, 101, 0.6));
    animation: mobWander-b-wv1fc35rtd 1.2s ease-in-out infinite;
}

.mob-bat[b-wv1fc35rtd] {
    filter: drop-shadow(0 0 5px rgba(100, 50, 150, 0.6));
    animation: batFlutter-b-wv1fc35rtd 0.4s ease-in-out infinite;
}

.mob-wolf[b-wv1fc35rtd] {
    font-size: 30px;
    filter: drop-shadow(0 0 6px rgba(100, 100, 120, 0.7));
    animation: wolfProwl-b-wv1fc35rtd 1s ease-in-out infinite;
}

.mob-dragon[b-wv1fc35rtd] {
    font-size: 36px;
    filter: drop-shadow(0 0 10px rgba(255, 50, 50, 0.7));
    animation: dragonPulse-b-wv1fc35rtd 1s ease-in-out infinite;
}

@keyframes mobWander-b-wv1fc35rtd {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(2px); }
}

@keyframes batFlutter-b-wv1fc35rtd {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.05); }
}

@keyframes wolfProwl-b-wv1fc35rtd {
    0%, 100% { transform: translateX(0) scale(1); }
    30% { transform: translateX(-2px) scale(1.02); }
    70% { transform: translateX(2px) scale(1.02); }
}

@keyframes dragonPulse-b-wv1fc35rtd {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(255, 50, 50, 0.7));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 18px rgba(255, 80, 30, 1));
        transform: scale(1.08);
    }
}

/* ===== Princess ===== */
.princess[b-wv1fc35rtd] {
    font-size: 28px;
    line-height: 1;
    z-index: 8;
    filter: drop-shadow(0 0 10px rgba(255, 180, 220, 0.8));
    animation: princessGlow-b-wv1fc35rtd 1.5s ease-in-out infinite;
}

@keyframes princessGlow-b-wv1fc35rtd {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 180, 220, 0.6)); }
    50% { filter: drop-shadow(0 0 16px rgba(255, 200, 240, 1)); }
}

/* ===== Companion ===== */
.companion[b-wv1fc35rtd] {
    font-size: 28px;
    line-height: 1;
    z-index: 9;
    filter: drop-shadow(0 0 8px rgba(100, 200, 255, 0.7));
    animation: companionGlow-b-wv1fc35rtd 1.5s ease-in-out infinite;
}

@keyframes companionGlow-b-wv1fc35rtd {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(100, 200, 255, 0.5)); }
    50% { filter: drop-shadow(0 0 12px rgba(100, 200, 255, 0.9)); }
}

/* ===== Wounded Hero ===== */
.wounded-hero[b-wv1fc35rtd] {
    font-size: 28px;
    line-height: 1;
    z-index: 8;
    filter: drop-shadow(0 0 6px rgba(255, 200, 100, 0.6));
    animation: heroWounded-b-wv1fc35rtd 1s ease-in-out infinite;
}

@keyframes heroWounded-b-wv1fc35rtd {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* ===== Cracked & Broken Walls ===== */
.cracked-wall[b-wv1fc35rtd] {
    font-size: 24px;
    line-height: 1;
    opacity: 0.8;
    filter: drop-shadow(0 0 4px rgba(200, 150, 50, 0.5));
    animation: crackShimmer-b-wv1fc35rtd 2s ease-in-out infinite;
}

@keyframes crackShimmer-b-wv1fc35rtd {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(200, 150, 50, 0.3)); }
    50% { filter: drop-shadow(0 0 8px rgba(200, 150, 50, 0.7)); }
}

.broken-wall[b-wv1fc35rtd] {
    font-size: 24px;
    line-height: 1;
    opacity: 0.6;
}

/* ===== Door icon ===== */
.door-icon[b-wv1fc35rtd] {
    filter: drop-shadow(0 0 6px rgba(100, 200, 100, 0.5));
}

/* ===== Damage Numbers ===== */
.damage-number[b-wv1fc35rtd] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    color: #ff4444;
    z-index: 30;
    pointer-events: none;
    text-shadow: 0 0 4px rgba(0,0,0,0.9), 0 0 8px rgba(255, 0, 0, 0.5);
    animation: damageFloat-b-wv1fc35rtd 0.6s ease-out forwards;
}

@keyframes damageFloat-b-wv1fc35rtd {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-25px); opacity: 0; }
}

/* ===== Projectiles ===== */
.projectile[b-wv1fc35rtd] {
    font-size: 26px;
    line-height: 1;
    z-index: 11;
}

.projectile.fireball[b-wv1fc35rtd] {
    filter: drop-shadow(0 0 10px rgba(255, 100, 0, 0.8));
    animation: fireballGlow-b-wv1fc35rtd 0.15s ease-in-out infinite alternate;
}

.projectile.arrow[b-wv1fc35rtd] {
    filter: drop-shadow(0 0 6px rgba(200, 200, 100, 0.7));
}

.projectile.fb-up[b-wv1fc35rtd] { transform: rotate(-90deg); }
.projectile.fb-down[b-wv1fc35rtd] { transform: rotate(90deg); }
.projectile.fb-left[b-wv1fc35rtd] { transform: scaleX(-1); }
.projectile.fb-right[b-wv1fc35rtd] { transform: scaleX(1); }

@keyframes fireballGlow-b-wv1fc35rtd {
    from { filter: drop-shadow(0 0 8px rgba(255, 100, 0, 0.7)); }
    to { filter: drop-shadow(0 0 16px rgba(255, 200, 0, 1)); }
}

/* Dragon fireball */
.dragon-fireball[b-wv1fc35rtd] {
    font-size: 22px;
    line-height: 1;
    z-index: 11;
    filter: drop-shadow(0 0 10px rgba(255, 50, 0, 0.9));
    animation: dragonFireGlow-b-wv1fc35rtd 0.2s ease-in-out infinite alternate;
}

@keyframes dragonFireGlow-b-wv1fc35rtd {
    from { filter: drop-shadow(0 0 8px rgba(255, 50, 0, 0.7)); transform: scale(1); }
    to { filter: drop-shadow(0 0 16px rgba(255, 100, 0, 1)); transform: scale(1.1); }
}

/* ===== Slash Effect ===== */
.slash-effect[b-wv1fc35rtd] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    z-index: 20;
    pointer-events: none;
    animation: slashSwing-b-wv1fc35rtd 0.3s ease-out forwards;
    filter: drop-shadow(0 0 8px rgba(255, 150, 50, 0.8));
}

@keyframes slashSwing-b-wv1fc35rtd {
    0% { transform: scale(0.5) rotate(-30deg); opacity: 1; }
    50% { transform: scale(1.2) rotate(15deg); opacity: 1; }
    100% { transform: scale(1.5) rotate(30deg); opacity: 0; }
}

/* ===== Blizzard Effect ===== */
.blizzard-effect[b-wv1fc35rtd] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    z-index: 20;
    pointer-events: none;
    animation: blizzardPulse-b-wv1fc35rtd 0.5s ease-out forwards;
    filter: drop-shadow(0 0 12px rgba(100, 180, 255, 0.9));
}

@keyframes blizzardPulse-b-wv1fc35rtd {
    0% { transform: scale(0.8); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
    100% { transform: scale(0.5); opacity: 0; }
}

/* ===== Dodge Trail ===== */
.dodge-trail[b-wv1fc35rtd] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 20;
    pointer-events: none;
    animation: dodgeFade-b-wv1fc35rtd 0.3s ease-out forwards;
    filter: drop-shadow(0 0 8px rgba(68, 200, 100, 0.6));
}

@keyframes dodgeFade-b-wv1fc35rtd {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.5); }
}

/* ===== Ground Loot ===== */
.ground-loot[b-wv1fc35rtd] {
    font-size: 24px;
    line-height: 1;
    z-index: 5;
    animation: lootBounce-b-wv1fc35rtd 1s ease-in-out infinite;
}

.ground-loot.gold-pile[b-wv1fc35rtd] {
    animation: goldShimmer-b-wv1fc35rtd 0.8s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
}

.ground-loot.rarity-common[b-wv1fc35rtd] {
    filter: drop-shadow(0 0 4px rgba(150, 150, 150, 0.5));
}

.ground-loot.rarity-rare[b-wv1fc35rtd] {
    filter: drop-shadow(0 0 8px rgba(60, 120, 255, 0.7));
}

.ground-loot.rarity-legendary[b-wv1fc35rtd] {
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
    animation: legendaryPulse-b-wv1fc35rtd 1s ease-in-out infinite;
}

@keyframes lootBounce-b-wv1fc35rtd {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes goldShimmer-b-wv1fc35rtd {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6)); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.9)); }
}

@keyframes legendaryPulse-b-wv1fc35rtd {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
    }
    50% {
        transform: scale(1.15);
        filter: drop-shadow(0 0 14px rgba(255, 215, 0, 1));
    }
}

/* ===== Explosion ===== */
.explosion[b-wv1fc35rtd] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    z-index: 20;
    pointer-events: none;
    animation: explode-b-wv1fc35rtd 0.4s ease-out forwards;
}

@keyframes explode-b-wv1fc35rtd {
    0% { transform: scale(0.5); opacity: 1; }
    50% { transform: scale(1.5); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
}

/* ===== Pickup Effect ===== */
.pickup-effect[b-wv1fc35rtd] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: #ffd700;
    z-index: 25;
    pointer-events: none;
    text-shadow: 0 0 6px rgba(0,0,0,0.8);
    animation: pickupFloat-b-wv1fc35rtd 0.6s ease-out forwards;
}

@keyframes pickupFloat-b-wv1fc35rtd {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-30px); opacity: 0; }
}

/* ===== HUD ===== */
.game-hud[b-wv1fc35rtd] {
    margin-top: 0.8rem;
    padding: 0.5rem 1.2rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #444;
    border-radius: 6px;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.9rem;
    flex-wrap: wrap;
}

.hud-item[b-wv1fc35rtd] { color: #ccc; }
.hud-item strong[b-wv1fc35rtd] { color: #fff; }
.hud-divider[b-wv1fc35rtd] { color: #555; }

[b-wv1fc35rtd] .hp-alive { color: #ff6666 !important; }
[b-wv1fc35rtd] .hp-dead { color: #555 !important; }
[b-wv1fc35rtd] .hp-low { color: #ff4444 !important; }
[b-wv1fc35rtd] .hp-text { color: #ff6666 !important; }
[b-wv1fc35rtd] .gold-text { color: #ffd700 !important; }

.cd-ready[b-wv1fc35rtd] { color: #44dd88; font-weight: bold; }
.cd-active[b-wv1fc35rtd] { color: #ff8844; font-weight: bold; }

/* ===== XP Bar in HUD ===== */
.hud-xp-bar[b-wv1fc35rtd] {
    display: inline-block;
    width: 60px;
    height: 10px;
    background: #222;
    border: 1px solid #555;
    border-radius: 4px;
    overflow: hidden;
    vertical-align: middle;
}

.hud-xp-fill[b-wv1fc35rtd] {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #44bb44, #88ff88);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* ===== Minimap ===== */
.minimap[b-wv1fc35rtd] {
    display: flex;
    gap: 3px;
    margin-top: 0.5rem;
    padding: 0.4rem 0.8rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #333;
    border-radius: 4px;
}

.minimap-room[b-wv1fc35rtd] {
    width: 28px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: bold;
    border: 1px solid #444;
    background: rgba(40, 40, 60, 0.6);
    color: #666;
}

.minimap-room.room-current[b-wv1fc35rtd] {
    background: rgba(255, 215, 0, 0.2);
    border-color: #ffd700;
    color: #ffd700;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.3);
}

.minimap-room.room-explored[b-wv1fc35rtd] {
    background: rgba(100, 200, 100, 0.15);
    border-color: #4a6a4a;
    color: #88bb88;
}

.minimap-room.room-dragon[b-wv1fc35rtd] {
    background: rgba(255, 50, 50, 0.2);
    border-color: #ff4444;
    color: #ff4444;
    animation: dragonMapPulse-b-wv1fc35rtd 1.5s ease-in-out infinite;
}

@keyframes dragonMapPulse-b-wv1fc35rtd {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 8px rgba(255, 50, 50, 0.4); }
}

.minimap-room.room-unknown[b-wv1fc35rtd] {
    background: rgba(30, 30, 45, 0.6);
    border-color: #333;
    color: #444;
}

/* ===== Controls Hint ===== */
.game-hint[b-wv1fc35rtd] {
    margin-top: 0.8rem;
    color: #aaa;
    font-size: 0.85rem;
}

.game-hint kbd[b-wv1fc35rtd] {
    background: #333;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #555;
    font-size: 0.8rem;
    box-shadow: 0 2px 0 #222;
}

/* ===== Game Over Overlay ===== */
.game-over-overlay[b-wv1fc35rtd] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 768px;
    height: 576px;
    background: rgba(0, 0, 0, 0.9);
    border: 3px solid #ff4444;
    border-radius: 8px;
    box-shadow: 0 0 40px rgba(255, 0, 0, 0.3);
    z-index: 1000;
    pointer-events: auto;
}

.game-over-panel[b-wv1fc35rtd] {
    text-align: center;
    padding: 2rem;
}

.game-over-title[b-wv1fc35rtd] {
    color: #ff4444;
    font-size: 2.5rem;
    text-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
    margin-bottom: 1.5rem;
    animation: deathPulse-b-wv1fc35rtd 1s ease-in-out infinite;
}

@keyframes deathPulse-b-wv1fc35rtd {
    0%, 100% { text-shadow: 0 0 20px rgba(255, 0, 0, 0.5); }
    50% { text-shadow: 0 0 40px rgba(255, 0, 0, 0.8); }
}

.game-over-stats[b-wv1fc35rtd] {
    color: #ccc;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    line-height: 2;
}

.game-over-stats strong[b-wv1fc35rtd] {
    color: #ffd700;
}

/* ===== Victory Overlay ===== */
.victory-overlay[b-wv1fc35rtd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 768px;
    height: 576px;
    background: rgba(0, 0, 0, 0.85);
    border: 3px solid #ffd700;
    border-radius: 8px;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.3);
}

.victory-panel[b-wv1fc35rtd] {
    text-align: center;
    padding: 2rem;
}

.victory-title[b-wv1fc35rtd] {
    color: #ffd700;
    font-size: 2.5rem;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    margin-bottom: 1rem;
    animation: victoryPulse-b-wv1fc35rtd 1s ease-in-out infinite;
}

@keyframes victoryPulse-b-wv1fc35rtd {
    0%, 100% { text-shadow: 0 0 20px rgba(255, 215, 0, 0.5); }
    50% { text-shadow: 0 0 40px rgba(255, 215, 0, 0.8); }
}

.victory-message[b-wv1fc35rtd] {
    color: #ccc;
    font-size: 1.1rem;
    font-style: italic;
    margin-bottom: 1.5rem;
}

.restart-btn[b-wv1fc35rtd] {
    background: linear-gradient(135deg, #44bb44, #228822);
    color: white;
    border: 2px solid #66dd66;
    padding: 0.8rem 2rem;
    font-size: 1.2rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: bold;
}

.restart-btn:hover[b-wv1fc35rtd] {
    transform: scale(1.05);
    box-shadow: 0 0 16px rgba(68, 187, 68, 0.5);
    background: linear-gradient(135deg, #55cc55, #33aa33);
}

/* ============================================
   INVENTORY PANEL
   ============================================ */
.inventory-panel[b-wv1fc35rtd] {
    width: 240px;
    background: #12121f;
    border: 2px solid #333;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.4);
}

.inv-title[b-wv1fc35rtd] {
    color: #ffd700;
    margin: 0;
    font-size: 1.1rem;
    text-align: center;
    letter-spacing: 1px;
    border-bottom: 1px solid #333;
    padding-bottom: 0.5rem;
}

/* Gold display */
.inv-gold[b-wv1fc35rtd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 6px;
}

.gold-icon[b-wv1fc35rtd] { font-size: 1.3rem; }

.gold-amount[b-wv1fc35rtd] {
    color: #ffd700;
    font-weight: bold;
    font-size: 1.1rem;
}

/* Weapon section */
.inv-weapon[b-wv1fc35rtd] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.inv-section-label[b-wv1fc35rtd] {
    color: #888;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.inv-item[b-wv1fc35rtd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 4px;
    border: 1px solid #333;
    background: rgba(255, 255, 255, 0.03);
}

.inv-item-icon[b-wv1fc35rtd] { font-size: 1.2rem; }

.inv-item-name[b-wv1fc35rtd] {
    color: #ddd;
    font-size: 0.85rem;
    flex: 1;
}

.inv-item-rarity[b-wv1fc35rtd] {
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
}

.inv-item-dmg[b-wv1fc35rtd] {
    font-size: 0.7rem;
    color: #ff8844;
    font-weight: bold;
}

/* Inventory grid */
.inv-items-section[b-wv1fc35rtd] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.inv-grid[b-wv1fc35rtd] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.inv-slot[b-wv1fc35rtd] {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    position: relative;
    border: 1px solid #333;
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.15s ease;
}

.inv-slot.filled[b-wv1fc35rtd] { cursor: default; }
.inv-slot.filled:hover[b-wv1fc35rtd] { transform: scale(1.05); }
.inv-slot.empty[b-wv1fc35rtd] { border: 1px dashed #2a2a3a; }

.inv-slot-icon[b-wv1fc35rtd] { font-size: 1.3rem; }
.empty-icon[b-wv1fc35rtd] { color: #2a2a3a; font-size: 1.5rem; }

.inv-slot-rarity-dot[b-wv1fc35rtd] {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

/* Item list */
.inv-item-list[b-wv1fc35rtd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 180px;
    overflow-y: auto;
    padding-right: 4px;
}

.inv-item-list[b-wv1fc35rtd]::-webkit-scrollbar { width: 4px; }
.inv-item-list[b-wv1fc35rtd]::-webkit-scrollbar-track { background: #1a1a2e; }
.inv-item-list[b-wv1fc35rtd]::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }

.inv-list-row[b-wv1fc35rtd] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.02);
}

.inv-list-row:hover[b-wv1fc35rtd] { background: rgba(255, 255, 255, 0.06); }

.inv-list-name[b-wv1fc35rtd] { flex: 1; color: #ccc; }

.inv-list-rarity[b-wv1fc35rtd] {
    font-size: 0.65rem;
    font-weight: bold;
    text-transform: uppercase;
}

/* Stats section */
.inv-stats[b-wv1fc35rtd] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-top: 0.5rem;
    border-top: 1px solid #333;
    font-size: 0.75rem;
    color: #666;
}

/* ============================================
   RARITY COLORS (used everywhere)
   ============================================ */

/* Common - Grey */
.rarity-common .inv-item-rarity[b-wv1fc35rtd],
.rarity-common .inv-list-rarity[b-wv1fc35rtd] { color: #999; }
.rarity-common.inv-item[b-wv1fc35rtd],
.rarity-common.inv-list-row[b-wv1fc35rtd] { border-left: 2px solid #666; }
.rarity-common.inv-slot[b-wv1fc35rtd] { border-color: #555; }
.rarity-common .inv-slot-rarity-dot[b-wv1fc35rtd] { background: #999; }

/* Rare - Blue */
.rarity-rare .inv-item-rarity[b-wv1fc35rtd],
.rarity-rare .inv-list-rarity[b-wv1fc35rtd] { color: #5599ff; }
.rarity-rare.inv-item[b-wv1fc35rtd],
.rarity-rare.inv-list-row[b-wv1fc35rtd] { border-left: 2px solid #5599ff; background: rgba(60, 120, 255, 0.06); }
.rarity-rare.inv-slot[b-wv1fc35rtd] { border-color: #5599ff; background: rgba(60, 120, 255, 0.08); }
.rarity-rare .inv-slot-rarity-dot[b-wv1fc35rtd] { background: #5599ff; }

/* Legendary - Gold */
.rarity-legendary .inv-item-rarity[b-wv1fc35rtd],
.rarity-legendary .inv-list-rarity[b-wv1fc35rtd] { color: #ffd700; }
.rarity-legendary.inv-item[b-wv1fc35rtd],
.rarity-legendary.inv-list-row[b-wv1fc35rtd] { border-left: 2px solid #ffd700; background: rgba(255, 215, 0, 0.06); }
.rarity-legendary.inv-slot[b-wv1fc35rtd] { border-color: #ffd700; background: rgba(255, 215, 0, 0.08); animation: legendarySlotGlow-b-wv1fc35rtd 2s ease-in-out infinite; }
.rarity-legendary .inv-slot-rarity-dot[b-wv1fc35rtd] { background: #ffd700; box-shadow: 0 0 4px rgba(255, 215, 0, 0.6); }

@keyframes legendarySlotGlow-b-wv1fc35rtd {
    0%, 100% { box-shadow: 0 0 4px rgba(255, 215, 0, 0.2); }
    50% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); }
}

/* ===== Leaderboard Submit ===== */
.lb-submit[b-wv1fc35rtd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
    padding: 12px 16px;
    background: rgba(255, 215, 0, 0.06);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 10px;
}

.lb-name-input[b-wv1fc35rtd] {
    width: 200px;
    padding: 8px 12px;
    background: #1a1a2e;
    border: 2px solid #444;
    border-radius: 6px;
    color: #fff;
    font-size: 1rem;
    text-align: center;
    font-weight: 600;
    letter-spacing: 1px;
    transition: border-color 0.2s;
}

.lb-name-input:focus[b-wv1fc35rtd] {
    border-color: #ffd700;
    outline: none;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

.lb-name-input[b-wv1fc35rtd]::placeholder {
    color: #666;
    font-weight: 400;
}

/* ============================================
   MOBILE TOUCH CONTROLS
   Hidden on desktop, visible on touch devices
   ============================================ */

/* Hide by default (desktop) */
.mobile-touch-overlay[b-wv1fc35rtd] {
    display: none;
}

@media (hover: none) and (pointer: coarse) {
    .mobile-touch-overlay[b-wv1fc35rtd] {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        justify-content: space-between;
        align-items: flex-end;
        padding: 12px 16px;
        z-index: 500;
        pointer-events: none;
        touch-action: manipulation;
    }

    /* D-pad container — cross layout */
    .touch-dpad[b-wv1fc35rtd] {
        display: grid;
        grid-template-columns: 56px 56px 56px;
        grid-template-rows: 56px 56px 56px;
        gap: 4px;
        pointer-events: auto;
    }

    .dpad-btn[b-wv1fc35rtd] {
        width: 56px;
        height: 56px;
        border: 2px solid rgba(255, 215, 0, 0.4);
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.6);
        color: #ffd700;
        font-size: 1.4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        transition: background 0.1s, transform 0.1s;
    }

    .dpad-btn:active[b-wv1fc35rtd] {
        background: rgba(255, 215, 0, 0.3);
        transform: scale(0.92);
    }

    /* Position d-pad buttons in cross pattern */
    .dpad-up[b-wv1fc35rtd] {
        grid-column: 2;
        grid-row: 1;
    }

    .dpad-left[b-wv1fc35rtd] {
        grid-column: 1;
        grid-row: 2;
    }

    .dpad-center[b-wv1fc35rtd] {
        grid-column: 2;
        grid-row: 2;
        border: none;
        background: transparent;
        pointer-events: none;
    }

    .dpad-right[b-wv1fc35rtd] {
        grid-column: 3;
        grid-row: 2;
    }

    .dpad-down[b-wv1fc35rtd] {
        grid-column: 2;
        grid-row: 3;
    }

    /* Action buttons — vertical stack on right side */
    .touch-actions[b-wv1fc35rtd] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        pointer-events: auto;
    }

    .touch-btn[b-wv1fc35rtd] {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.3);
        background: rgba(0, 0, 0, 0.6);
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        transition: background 0.1s, transform 0.1s;
    }

    .touch-btn:active[b-wv1fc35rtd] {
        transform: scale(0.9);
    }

    /* Attack button — red accent */
    .touch-attack[b-wv1fc35rtd] {
        border-color: rgba(255, 80, 50, 0.6);
        background: rgba(255, 50, 30, 0.25);
    }

    .touch-attack:active[b-wv1fc35rtd] {
        background: rgba(255, 50, 30, 0.5);
    }

    /* Ability button — blue/class accent */
    .touch-ability[b-wv1fc35rtd] {
        border-color: rgba(100, 150, 255, 0.5);
        background: rgba(60, 100, 255, 0.2);
    }

    .touch-ability:active[b-wv1fc35rtd] {
        background: rgba(60, 100, 255, 0.45);
    }

    /* Potion button — green accent */
    .touch-potion[b-wv1fc35rtd] {
        border-color: rgba(80, 200, 80, 0.5);
        background: rgba(50, 180, 50, 0.2);
    }

    .touch-potion:active[b-wv1fc35rtd] {
        background: rgba(50, 180, 50, 0.45);
    }

    /* Hide keyboard-only hints on mobile */
    .game-hint[b-wv1fc35rtd] {
        display: none;
    }

    /* Ensure game room doesn't get cut off by touch overlay */
    .game-wrapper[b-wv1fc35rtd] {
        padding-bottom: 200px;
    }

    /* Make inventory panel full-width below game on mobile */
    .game-container[b-wv1fc35rtd] {
        flex-direction: column;
        align-items: center;
    }

    .inventory-panel[b-wv1fc35rtd] {
        width: 100%;
        max-width: 500px;
    }

    /* Shrink the class select and game-over overlays for mobile */
    .class-select-overlay[b-wv1fc35rtd] {
        width: 100%;
        max-width: 100vw;
        height: auto;
        min-height: 400px;
        padding: 1rem;
    }

    .class-cards[b-wv1fc35rtd] {
        flex-direction: column;
        align-items: center;
        gap: 0.8rem;
    }

    .class-card[b-wv1fc35rtd] {
        width: 80%;
        max-width: 280px;
        padding: 0.8rem;
    }

    .game-over-overlay[b-wv1fc35rtd] {
        width: 90vw;
        max-width: 400px;
        height: auto;
        min-height: auto;
        padding: 1rem;
    }
}
/* /Components/Pages/Games.razor.rz.scp.css */
.games-page[b-4y0uzjwiwo] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 60px;
}

.games-header[b-4y0uzjwiwo] {
    text-align: center;
    margin-bottom: 48px;
}

.games-header h1[b-4y0uzjwiwo] {
    font-size: 3em;
    font-weight: 900;
    margin: 0;
    letter-spacing: -1px;
}

.games-subtitle[b-4y0uzjwiwo] {
    color: #888;
    font-size: 1.1em;
    margin: 8px 0 0;
}

.games-grid[b-4y0uzjwiwo] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.games-grid .game-card:last-child:nth-child(odd)[b-4y0uzjwiwo] {
    grid-column: 1 / -1;
    max-width: 50%;
    justify-self: center;
}

@media (max-width: 768px) {
    .games-grid[b-4y0uzjwiwo] { grid-template-columns: 1fr; }
    .games-header h1[b-4y0uzjwiwo] { font-size: 2em; }
}

.game-card[b-4y0uzjwiwo] {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: white;
    min-height: 320px;
    display: flex;
    transition: all 0.4s ease;
    border: 1px solid var(--lh-border);
}

.game-card:hover[b-4y0uzjwiwo] {
    transform: translateY(-6px) scale(1.01);
    color: white;
}

.game-card-bg[b-4y0uzjwiwo] {
    position: absolute;
    inset: 0;
    transition: all 0.4s ease;
}

.game-dungeon .game-card-bg[b-4y0uzjwiwo] {
    background: linear-gradient(135deg, #1a0a2e 0%, #3d1455 50%, #1a0a2e 100%);
}
.game-dungeon:hover .game-card-bg[b-4y0uzjwiwo] { background: linear-gradient(135deg, #2a1040 0%, #5a2070 50%, #2a1040 100%); }
.game-dungeon:hover[b-4y0uzjwiwo] { box-shadow: 0 12px 40px rgba(93, 32, 112, 0.5), 0 0 40px rgba(124, 58, 237, 0.2); }

.game-cardgame .game-card-bg[b-4y0uzjwiwo] {
    background: linear-gradient(135deg, #0a0a2e 0%, #1a3a6e 50%, #0a0a2e 100%);
}
.game-cardgame:hover .game-card-bg[b-4y0uzjwiwo] { background: linear-gradient(135deg, #10153e 0%, #2a508e 50%, #10153e 100%); }
.game-cardgame:hover[b-4y0uzjwiwo] { box-shadow: 0 12px 40px rgba(42, 80, 142, 0.5), 0 0 40px rgba(59, 130, 246, 0.2); }

.game-terrastake .game-card-bg[b-4y0uzjwiwo] {
    background: linear-gradient(135deg, #1a1a0a 0%, #4a3a0a 50%, #1a1a0a 100%);
}
.game-terrastake:hover .game-card-bg[b-4y0uzjwiwo] { background: linear-gradient(135deg, #2a2a10 0%, #6a5a1a 50%, #2a2a10 100%); }
.game-terrastake:hover[b-4y0uzjwiwo] { box-shadow: 0 12px 40px rgba(106, 90, 26, 0.5), 0 0 40px rgba(255, 193, 7, 0.15); }

.game-packs .game-card-bg[b-4y0uzjwiwo] {
    background: linear-gradient(135deg, #0a1a2e 0%, #1a3a5e 50%, #0a1a2e 100%);
}
.game-packs:hover .game-card-bg[b-4y0uzjwiwo] { background: linear-gradient(135deg, #102a40 0%, #2a5a80 50%, #102a40 100%); }
.game-packs:hover[b-4y0uzjwiwo] { box-shadow: 0 12px 40px rgba(42, 90, 128, 0.5), 0 0 40px rgba(100, 200, 255, 0.15); }

.game-card-content[b-4y0uzjwiwo] {
    position: relative;
    z-index: 1;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
}

.game-icon[b-4y0uzjwiwo] {
    font-size: 4em;
    margin-bottom: 16px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

.game-card h2[b-4y0uzjwiwo] {
    font-size: 1.8em;
    font-weight: 800;
    margin: 0 0 8px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.game-card p[b-4y0uzjwiwo] {
    color: rgba(255,255,255,0.7);
    font-size: 0.95em;
    line-height: 1.5;
    margin: 0 0 16px;
}

.game-tags[b-4y0uzjwiwo] {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.game-tag[b-4y0uzjwiwo] {
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.game-card .lh-btn[b-4y0uzjwiwo] {
    align-self: flex-start;
}

/* ============ LEADERBOARD ============ */
.leaderboard-section[b-4y0uzjwiwo] {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 2px solid var(--lh-border);
}

.leaderboard-title[b-4y0uzjwiwo] {
    text-align: center;
    font-size: 2em;
    font-weight: 900;
    margin: 0 0 8px;
}

.leaderboard-tabs[b-4y0uzjwiwo] {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 24px 0;
}

.lb-tab[b-4y0uzjwiwo] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--lh-border);
    color: #aaa;
    padding: 8px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    transition: all 0.2s;
}

.lb-tab:hover[b-4y0uzjwiwo] { color: var(--lh-gold); border-color: rgba(255, 193, 7, 0.3); }
.lb-tab-active[b-4y0uzjwiwo] { color: var(--lh-gold); border-color: var(--lh-gold); background: rgba(255, 193, 7, 0.08); }

.leaderboard-table-wrap[b-4y0uzjwiwo] {
    overflow-x: auto;
}

.leaderboard-table[b-4y0uzjwiwo] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
}

.leaderboard-table th[b-4y0uzjwiwo] {
    padding: 12px 16px;
    text-align: left;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75em;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--lh-border);
}

.leaderboard-table td[b-4y0uzjwiwo] {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #ccc;
}

.leaderboard-table tr:hover td[b-4y0uzjwiwo] {
    background: rgba(255, 255, 255, 0.03);
}

.lb-rank[b-4y0uzjwiwo] { font-size: 1.2em; text-align: center; width: 40px; }
.lb-name[b-4y0uzjwiwo] { font-weight: 700; color: #fff; font-size: 1.05em; }
.lb-gold-val[b-4y0uzjwiwo] { color: #ffd700; font-weight: 700; }
.lb-item[b-4y0uzjwiwo] { font-style: italic; color: #a78bfa; }
.lb-date[b-4y0uzjwiwo] { color: #666; font-size: 0.85em; }

.lb-gold td[b-4y0uzjwiwo] { background: rgba(255, 215, 0, 0.06); }
.lb-silver td[b-4y0uzjwiwo] { background: rgba(192, 192, 192, 0.04); }
.lb-bronze td[b-4y0uzjwiwo] { background: rgba(205, 127, 50, 0.04); }

.leaderboard-empty[b-4y0uzjwiwo] {
    text-align: center;
    padding: 40px;
    color: #666;
    font-size: 1em;
    border: 1px dashed var(--lh-border);
    border-radius: 12px;
}

/* ============ LEADERBOARD PREVIEW ============ */
.lb-preview-grid[b-4y0uzjwiwo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 32px;
}

@media (max-width: 768px) {
    .lb-preview-grid[b-4y0uzjwiwo] { grid-template-columns: 1fr; }
}

.lb-preview-card[b-4y0uzjwiwo] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--lh-border);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.lb-preview-card:hover[b-4y0uzjwiwo] {
    border-color: rgba(255, 193, 7, 0.25);
    background: rgba(255, 255, 255, 0.04);
}

.lb-preview-header[b-4y0uzjwiwo] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.lb-preview-header h3[b-4y0uzjwiwo] {
    margin: 0;
    font-size: 1.2em;
    font-weight: 800;
    color: #e0e0e0;
}

.lb-preview-icon[b-4y0uzjwiwo] {
    font-size: 1.6em;
}

.lb-preview-table[b-4y0uzjwiwo] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
    margin-bottom: 16px;
}

.lb-preview-table th[b-4y0uzjwiwo] {
    padding: 8px 10px;
    text-align: left;
    color: #666;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7em;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--lh-border);
}

.lb-preview-table td[b-4y0uzjwiwo] {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: #ccc;
}

.lb-preview-table tr:hover td[b-4y0uzjwiwo] {
    background: rgba(255, 255, 255, 0.03);
}

.lb-preview-empty[b-4y0uzjwiwo] {
    text-align: center;
    padding: 24px;
    color: #555;
    font-size: 0.9em;
    font-style: italic;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    margin-bottom: 16px;
}

.lb-preview-link[b-4y0uzjwiwo] {
    display: block;
    text-align: center;
    color: var(--lh-gold);
    font-weight: 600;
    font-size: 0.9em;
    text-decoration: none;
    padding: 10px;
    margin-top: auto;
    border-radius: 8px;
    transition: all 0.2s;
}

.lb-preview-link:hover[b-4y0uzjwiwo] {
    background: rgba(255, 193, 7, 0.08);
    color: #ffd54f;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ── Hero ─────────────────────────────────────────── */
.hero[b-r0trvo1q8r] {
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 60px 20px;
}

.hero-glow[b-r0trvo1q8r] {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.15) 0%, rgba(255, 193, 7, 0.05) 50%, transparent 70%);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: hero-pulse-b-r0trvo1q8r 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes hero-pulse-b-r0trvo1q8r {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

.hero-content[b-r0trvo1q8r] {
    position: relative;
    z-index: 1;
}

.hero-logo[b-r0trvo1q8r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    filter: drop-shadow(0 8px 40px rgba(124, 58, 237, 0.5)) drop-shadow(0 0 60px rgba(255, 193, 7, 0.2));
    animation: logo-float-b-r0trvo1q8r 3s ease-in-out infinite;
}

.hero-logo-svg[b-r0trvo1q8r] {
    max-width: 200px;
    height: auto;
}

@keyframes logo-float-b-r0trvo1q8r {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.hero-title[b-r0trvo1q8r] {
    font-size: 4em;
    font-weight: 900;
    margin: 0 0 8px;
    letter-spacing: -2px;
    outline: none !important;
    -webkit-text-stroke: 0;
}

.hero-title *[b-r0trvo1q8r] {
    outline: none !important;
}

.hero-tagline[b-r0trvo1q8r] {
    font-size: 1.2em;
    color: #888;
    margin: 0 0 32px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 300;
}

.hero-actions[b-r0trvo1q8r] {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Sections ────────────────────────────────────── */
.home-sections[b-r0trvo1q8r] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 60px;
}

.home-section[b-r0trvo1q8r] {
    margin-bottom: 48px;
}

.section-title[b-r0trvo1q8r] {
    font-size: 1.6em;
    font-weight: 700;
    color: #ddd;
    margin: 0 0 24px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--lh-border);
}

/* ── Feature Grid ────────────────────────────────── */
.feature-grid[b-r0trvo1q8r] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {
    .feature-grid[b-r0trvo1q8r] { grid-template-columns: 1fr; }
    .hero-title[b-r0trvo1q8r] { font-size: 2.5em; }
}

.feature-card[b-r0trvo1q8r] {
    background: var(--lh-surface);
    border: 1px solid var(--lh-border);
    border-radius: 16px;
    padding: 32px 24px;
    text-decoration: none;
    color: var(--lh-text);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.feature-card[b-r0trvo1q8r]::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 16px;
}

.feature-games[b-r0trvo1q8r]::before { background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), transparent); }
.feature-loot[b-r0trvo1q8r]::before { background: linear-gradient(135deg, rgba(255, 193, 7, 0.08), transparent); }
.feature-tools[b-r0trvo1q8r]::before { background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), transparent); }

.feature-card:hover[b-r0trvo1q8r] {
    transform: translateY(-6px);
    border-color: rgba(255, 193, 7, 0.3);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 193, 7, 0.08);
    color: var(--lh-text);
}

.feature-card:hover[b-r0trvo1q8r]::before { opacity: 1; }

.feature-icon[b-r0trvo1q8r] {
    font-size: 2.5em;
    margin-bottom: 16px;
}

.feature-card h3[b-r0trvo1q8r] {
    font-size: 1.4em;
    font-weight: 700;
    margin: 0 0 8px;
    color: #fff;
}

.feature-card p[b-r0trvo1q8r] {
    color: #888;
    margin: 0 0 16px;
    font-size: 0.95em;
    line-height: 1.5;
}

.feature-link[b-r0trvo1q8r] {
    color: var(--lh-gold);
    font-weight: 600;
    font-size: 0.9em;
}

/* ── Stats ───────────────────────────────────────── */
.stats-row[b-r0trvo1q8r] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 600px) {
    .stats-row[b-r0trvo1q8r] { grid-template-columns: repeat(2, 1fr); }
}

.stat-item[b-r0trvo1q8r] {
    background: var(--lh-surface);
    border: 1px solid var(--lh-border);
    border-radius: 12px;
    padding: 24px 16px;
    text-align: center;
}

.stat-value[b-r0trvo1q8r] {
    font-size: 2.2em;
    font-weight: 800;
}

.stat-label[b-r0trvo1q8r] {
    font-size: 0.85em;
    color: #888;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Ember Particles ────────────────────────────── */
.ember-field[b-r0trvo1q8r] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.ember[b-r0trvo1q8r] {
    position: absolute;
    bottom: -20px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ff6b35;
    box-shadow: 0 0 6px #ff6b35, 0 0 12px rgba(255,107,53,0.4);
    animation: ember-rise-b-r0trvo1q8r linear infinite;
    opacity: 0;
}
.e1[b-r0trvo1q8r] { left: 10%; animation-duration: 8s; animation-delay: 0s; }
.e2[b-r0trvo1q8r] { left: 25%; animation-duration: 10s; animation-delay: 2s; width: 3px; height: 3px; }
.e3[b-r0trvo1q8r] { left: 40%; animation-duration: 7s; animation-delay: 4s; }
.e4[b-r0trvo1q8r] { left: 55%; animation-duration: 12s; animation-delay: 1s; width: 2px; height: 2px; }
.e5[b-r0trvo1q8r] { left: 70%; animation-duration: 9s; animation-delay: 3s; }
.e6[b-r0trvo1q8r] { left: 85%; animation-duration: 11s; animation-delay: 5s; width: 3px; height: 3px; }
.e7[b-r0trvo1q8r] { left: 15%; animation-duration: 13s; animation-delay: 6s; width: 2px; height: 2px; }
.e8[b-r0trvo1q8r] { left: 60%; animation-duration: 8s; animation-delay: 7s; }

@keyframes ember-rise-b-r0trvo1q8r {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    10% { opacity: 0.8; }
    50% { opacity: 0.5; }
    100% { transform: translateY(-100vh) translateX(30px); opacity: 0; }
}

/* ── Live Activity Feed ─────────────────────────── */
.activity-feed[b-r0trvo1q8r] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--lh-surface);
    border: 1px solid var(--lh-border);
    border-radius: 12px;
    padding: 8px;
    max-height: 200px;
    overflow-y: auto;
}
.activity-item[b-r0trvo1q8r] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background 0.2s;
}
.activity-item:hover[b-r0trvo1q8r] { background: rgba(255,255,255,0.03); }
.activity-icon[b-r0trvo1q8r] { font-size: 16px; min-width: 24px; text-align: center; }
.activity-text[b-r0trvo1q8r] { font-size: 13px; color: #ccc; flex: 1; }
.activity-text b[b-r0trvo1q8r] { color: var(--lh-gold); }
.activity-text a[b-r0trvo1q8r] { color: var(--lh-gold); text-decoration: none; }
.activity-text a:hover[b-r0trvo1q8r] { text-decoration: underline; }
.activity-time[b-r0trvo1q8r] { font-size: 11px; color: #666; min-width: 50px; text-align: right; }
.activity-empty[b-r0trvo1q8r] { opacity: 0.7; }
/* /Components/Pages/Loot.razor.rz.scp.css */
.loot-page[b-j3is2n3t12] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 60px;
}

.loot-header[b-j3is2n3t12] {
    text-align: center;
    margin-bottom: 40px;
}

.loot-header h1[b-j3is2n3t12] {
    font-size: 3em;
    font-weight: 900;
    margin: 0;
    letter-spacing: -1px;
}

.loot-subtitle[b-j3is2n3t12] {
    color: #888;
    font-size: 1.1em;
    margin: 8px 0 0;
}

/* ── Whatnot Hero ────────────────────────────────── */
.loot-hero[b-j3is2n3t12] {
    position: relative;
    background: var(--lh-surface);
    border: 1px solid var(--lh-border);
    border-radius: 20px;
    padding: 60px 40px;
    text-align: center;
    margin-bottom: 48px;
    overflow: hidden;
}

.loot-hero-glow[b-j3is2n3t12] {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.08) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.loot-hero-content[b-j3is2n3t12] {
    position: relative;
    z-index: 1;
}

.whatnot-icon[b-j3is2n3t12] {
    font-size: 3em;
    margin-bottom: 16px;
    animation: live-pulse-b-j3is2n3t12 2s ease-in-out infinite;
}

@keyframes live-pulse-b-j3is2n3t12 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

.loot-hero h2[b-j3is2n3t12] {
    font-size: 2em;
    font-weight: 800;
    margin: 0 0 12px;
    color: #fff;
}

.loot-hero p[b-j3is2n3t12] {
    color: #aaa;
    font-size: 1.05em;
    max-width: 500px;
    margin: 0 auto 24px;
    line-height: 1.5;
}

.loot-whatnot-btn[b-j3is2n3t12] {
    font-size: 1.1em;
    padding: 14px 32px;
}

/* ── Categories ──────────────────────────────────── */
.loot-categories[b-j3is2n3t12] {
    margin-bottom: 48px;
}

.section-title[b-j3is2n3t12] {
    font-size: 1.6em;
    font-weight: 700;
    color: #ddd;
    margin: 0 0 24px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--lh-border);
}

.loot-grid[b-j3is2n3t12] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 900px) { .loot-grid[b-j3is2n3t12] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .loot-grid[b-j3is2n3t12] { grid-template-columns: 1fr; } }

.loot-card[b-j3is2n3t12] {
    background: var(--lh-surface);
    border: 1px solid var(--lh-border);
    border-radius: 14px;
    padding: 28px 20px;
    transition: all 0.3s ease;
}

.loot-card:hover[b-j3is2n3t12] {
    border-color: rgba(255, 193, 7, 0.2);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.loot-card-icon[b-j3is2n3t12] {
    font-size: 2em;
    margin-bottom: 12px;
}

.loot-card h3[b-j3is2n3t12] {
    font-size: 1.15em;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
}

.loot-card p[b-j3is2n3t12] {
    color: #888;
    font-size: 0.9em;
    line-height: 1.5;
    margin: 0;
}

/* ── CTA ─────────────────────────────────────────── */
.loot-cta[b-j3is2n3t12] {
    text-align: center;
    padding: 40px;
    background: var(--lh-surface);
    border: 1px solid var(--lh-border);
    border-radius: 16px;
}

.loot-cta p[b-j3is2n3t12] {
    color: #aaa;
    margin: 0 0 20px;
    font-size: 1.05em;
}
/* /Components/Pages/PackOpener.razor.rz.scp.css */
/* ===== Page Layout ===== */
.po-page[b-8rq6jhgalz] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 20px 60px;
    text-align: center;
}

.po-title[b-8rq6jhgalz] {
    font-size: 2.6em;
    font-weight: 900;
    margin: 0 0 4px;
    letter-spacing: -1px;
}

.po-subtitle[b-8rq6jhgalz] {
    color: #888;
    margin: 0 0 24px;
    font-size: 1.05em;
    letter-spacing: 1px;
}

/* ===== Stats Bar ===== */
.po-stats-bar[b-8rq6jhgalz] {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.po-stat[b-8rq6jhgalz] {
    background: var(--lh-surface, #1a1a2e);
    border: 1px solid var(--lh-border, #2a2a3e);
    border-radius: 12px;
    padding: 12px 20px;
    min-width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.po-stat-val[b-8rq6jhgalz] {
    font-size: 1.8em;
    font-weight: 800;
    color: #fff;
}

.po-stat-lbl[b-8rq6jhgalz] {
    font-size: 0.75em;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.po-stat-hl .po-stat-val[b-8rq6jhgalz] { color: #5599ff; }
.po-stat-legendary .po-stat-val[b-8rq6jhgalz] {
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

/* ===== Set Picker ===== */
.po-pick-section h2[b-8rq6jhgalz] {
    color: #ddd;
    margin: 0 0 16px;
    font-size: 1.4em;
}

.po-lang-tabs[b-8rq6jhgalz] {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.po-lang-tab[b-8rq6jhgalz] {
    background: var(--lh-surface, #1a1a2e);
    border: 1px solid var(--lh-border, #2a2a3e);
    color: #aaa;
    padding: 6px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s;
}

.po-lang-tab:hover[b-8rq6jhgalz] { border-color: #555; color: #fff; }
.po-lang-tab.active[b-8rq6jhgalz] {
    background: rgba(255, 193, 7, 0.12);
    border-color: rgba(255, 193, 7, 0.4);
    color: #ffd700;
}

.po-set-grid[b-8rq6jhgalz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    max-height: 500px;
    overflow-y: auto;
    padding: 4px;
}

.po-set-card[b-8rq6jhgalz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    background: var(--lh-surface, #1a1a2e);
    border: 1px solid var(--lh-border, #2a2a3e);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    color: #ddd;
}

.po-set-card:hover[b-8rq6jhgalz] {
    transform: translateY(-4px);
    border-color: rgba(255, 193, 7, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 193, 7, 0.08);
}

.po-set-icon[b-8rq6jhgalz] { font-size: 2em; }
.po-set-name[b-8rq6jhgalz] { font-weight: 700; font-size: 0.95em; line-height: 1.2; }
.po-set-meta[b-8rq6jhgalz] { font-size: 0.75em; color: #888; }

.po-empty[b-8rq6jhgalz] {
    color: #666;
    padding: 40px 20px;
    font-style: italic;
}

/* ===== Pack Stage ===== */
.po-pack-stage[b-8rq6jhgalz] {
    padding: 20px 0;
}

.po-set-label[b-8rq6jhgalz] {
    color: #ddd;
    margin: 0 0 20px;
    font-size: 1.3em;
}

.po-pack[b-8rq6jhgalz] {
    width: 200px;
    height: 300px;
    margin: 0 auto 20px;
    cursor: pointer;
    perspective: 600px;
    transition: transform 0.3s ease;
}

.po-pack:hover[b-8rq6jhgalz] {
    transform: scale(1.05);
}

.po-pack-front[b-8rq6jhgalz] {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #1a1a3e 0%, #0d0d2b 50%, #1a1a3e 100%);
    border: 2px solid rgba(255, 193, 7, 0.3);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 40px rgba(124, 58, 237, 0.1);
}

.po-pack-glow[b-8rq6jhgalz] {
    position: absolute;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.15) 0%, transparent 60%);
    animation: packPulse-b-8rq6jhgalz 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes packPulse-b-8rq6jhgalz {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

.po-pack-icon[b-8rq6jhgalz] { font-size: 4em; z-index: 1; }
.po-pack-text[b-8rq6jhgalz] {
    font-weight: 800;
    font-size: 1.1em;
    color: #ffd700;
    letter-spacing: 3px;
    z-index: 1;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
}
.po-pack-sub[b-8rq6jhgalz] {
    font-size: 0.8em;
    color: #888;
    z-index: 1;
}

/* ── Pack Tear Animation ── */
.po-pack-tear[b-8rq6jhgalz] {
    animation: packTear-b-8rq6jhgalz 0.6s ease-in forwards;
}

@keyframes packTear-b-8rq6jhgalz {
    0% { transform: scale(1); opacity: 1; }
    30% { transform: scale(1.1) rotate(-2deg); }
    60% { transform: scale(1.15) rotate(3deg); opacity: 0.8; }
    100% { transform: scale(1.3) rotate(0deg); opacity: 0; }
}

.po-back-btn[b-8rq6jhgalz] {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 0.9em;
    padding: 8px 16px;
    transition: color 0.2s;
}

.po-back-btn:hover[b-8rq6jhgalz] { color: #ffd700; }

/* ===== Cards Reveal Grid ===== */
.po-reveal-stage[b-8rq6jhgalz] {
    padding: 20px 0;
}

.po-cards-grid[b-8rq6jhgalz] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    max-width: 700px;
    margin: 0 auto 24px;
}

@media (max-width: 600px) {
    .po-cards-grid[b-8rq6jhgalz] { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

/* ── Card Slot ── */
.po-card-slot[b-8rq6jhgalz] {
    aspect-ratio: 2.5/3.5;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    transform-style: preserve-3d;
}

.po-card-slot:hover[b-8rq6jhgalz] {
    transform: translateY(-4px);
}

/* ── Face Down ── */
.po-card-facedown[b-8rq6jhgalz] {
    animation: cardDeal-b-8rq6jhgalz 0.4s ease-out backwards;
}

.po-card-facedown:nth-child(1)[b-8rq6jhgalz] { animation-delay: 0s; }
.po-card-facedown:nth-child(2)[b-8rq6jhgalz] { animation-delay: 0.06s; }
.po-card-facedown:nth-child(3)[b-8rq6jhgalz] { animation-delay: 0.12s; }
.po-card-facedown:nth-child(4)[b-8rq6jhgalz] { animation-delay: 0.18s; }
.po-card-facedown:nth-child(5)[b-8rq6jhgalz] { animation-delay: 0.24s; }
.po-card-facedown:nth-child(6)[b-8rq6jhgalz] { animation-delay: 0.30s; }
.po-card-facedown:nth-child(7)[b-8rq6jhgalz] { animation-delay: 0.36s; }
.po-card-facedown:nth-child(8)[b-8rq6jhgalz] { animation-delay: 0.42s; }
.po-card-facedown:nth-child(9)[b-8rq6jhgalz] { animation-delay: 0.48s; }
.po-card-facedown:nth-child(10)[b-8rq6jhgalz] { animation-delay: 0.54s; }

@keyframes cardDeal-b-8rq6jhgalz {
    0% { transform: scale(0.3) translateY(-40px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.po-card-back[b-8rq6jhgalz] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a3e 0%, #2d1f5e 50%, #1a1a3e 100%);
    border: 2px solid #444;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.po-card-back-design[b-8rq6jhgalz] {
    font-size: 2em;
    opacity: 0.5;
    animation: cardBackPulse-b-8rq6jhgalz 2s ease-in-out infinite;
}

@keyframes cardBackPulse-b-8rq6jhgalz {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

/* ── Card Revealed ── */
.po-card-revealed[b-8rq6jhgalz] {
    animation: cardFlip-b-8rq6jhgalz 0.5s ease-out;
}

@keyframes cardFlip-b-8rq6jhgalz {
    0% { transform: rotateY(180deg) scale(0.8); }
    50% { transform: rotateY(90deg) scale(1.1); }
    100% { transform: rotateY(0deg) scale(1); }
}

.po-card-face[b-8rq6jhgalz] {
    width: 100%;
    height: 100%;
    background: #111;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 2px solid #333;
}

.po-card-img[b-8rq6jhgalz] {
    width: 100%;
    flex: 1;
    object-fit: cover;
    object-position: top;
}

.po-card-placeholder[b-8rq6jhgalz] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a2e;
}

.po-card-placeholder-icon[b-8rq6jhgalz] { font-size: 2.5em; opacity: 0.4; }

.po-card-info[b-8rq6jhgalz] {
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.po-card-name[b-8rq6jhgalz] {
    font-size: 0.65em;
    font-weight: 700;
    color: #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.po-card-name-en[b-8rq6jhgalz] {
    font-size: 0.55em;
    color: #a0a0a0;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.po-card-num[b-8rq6jhgalz] {
    font-size: 0.55em;
    color: #888;
}

.po-card-rarity[b-8rq6jhgalz] {
    font-size: 0.55em;
    color: #aaa;
    font-style: italic;
}

/* ── Rarity Borders & Effects ── */
.po-rarity-common .po-card-face[b-8rq6jhgalz] { border-color: #444; }

.po-rarity-uncommon .po-card-face[b-8rq6jhgalz] {
    border-color: #4caf50;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
}

.po-rarity-rare .po-card-face[b-8rq6jhgalz] {
    border-color: #5599ff;
    box-shadow: 0 0 12px rgba(85, 153, 255, 0.4);
}

.po-rarity-rare .po-card-rarity[b-8rq6jhgalz] { color: #5599ff; }

.po-rarity-ultra .po-card-face[b-8rq6jhgalz] {
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5), 0 0 40px rgba(255, 215, 0, 0.15);
    animation: ultraGlow-b-8rq6jhgalz 2s ease-in-out infinite;
}

.po-rarity-ultra .po-card-rarity[b-8rq6jhgalz] {
    color: #ffd700;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
}

.po-rarity-ultra .po-card-name[b-8rq6jhgalz] { color: #ffd700; }

@keyframes ultraGlow-b-8rq6jhgalz {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.5), 0 0 40px rgba(255, 215, 0, 0.15); }
    50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.7), 0 0 60px rgba(255, 215, 0, 0.25); }
}

/* ── Sparkle overlay for rare+ cards ── */
.po-card-sparkle[b-8rq6jhgalz] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 10px;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.4) 0%, transparent 20%),
        radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.3) 0%, transparent 15%),
        radial-gradient(circle at 60% 70%, rgba(255, 255, 255, 0.3) 0%, transparent 18%),
        radial-gradient(circle at 30% 80%, rgba(124, 58, 237, 0.3) 0%, transparent 15%);
    animation: sparkleShift-b-8rq6jhgalz 3s ease-in-out infinite;
}

@keyframes sparkleShift-b-8rq6jhgalz {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* ===== Reveal Actions ===== */
.po-reveal-actions[b-8rq6jhgalz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.po-btn[b-8rq6jhgalz] {
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.po-btn-reveal[b-8rq6jhgalz] {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    color: #fff;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.po-btn-reveal:hover[b-8rq6jhgalz] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
}

.po-btn-next[b-8rq6jhgalz] {
    background: linear-gradient(135deg, #ffc107, #ff9800);
    color: #1a1a2e;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

.po-btn-next:hover[b-8rq6jhgalz] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.4);
}

/* ── Pull Summary ── */
.po-pull-summary[b-8rq6jhgalz] {
    background: rgba(255, 215, 0, 0.06);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 10px;
    padding: 10px 20px;
}

.po-summary-line[b-8rq6jhgalz] {
    color: #ffd700;
    font-weight: 700;
    font-size: 1.1em;
    margin: 0;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

/* ===== Responsive ===== */
@media (max-width: 600px) {
    .po-title[b-8rq6jhgalz] { font-size: 1.8em; }
    .po-stats-bar[b-8rq6jhgalz] { gap: 8px; }
    .po-stat[b-8rq6jhgalz] { padding: 8px 12px; min-width: 70px; }
    .po-stat-val[b-8rq6jhgalz] { font-size: 1.3em; }
    .po-pack[b-8rq6jhgalz] { width: 160px; height: 240px; }
    .po-set-grid[b-8rq6jhgalz] { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
/* /Components/Pages/TerraStake.razor.rz.scp.css */
/* ===== TerraStake - Main Game Styles ===== */

.ts-game-container[b-6mfjgp36os] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12px;
    background: #1a1a2e;
    min-height: 100vh;
    font-family: 'Segoe UI', sans-serif;
    color: #e0e0e0;
}

.ts-game-wrapper[b-6mfjgp36os] {
    outline: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    touch-action: manipulation;
}

.ts-game-wrapper:focus[b-6mfjgp36os] { outline: none; }

.ts-title[b-6mfjgp36os] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #8bc34a;
    text-shadow: 0 0 10px rgba(139, 195, 74, 0.4);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ===== MAIN LAYOUT (viewport + side panels) ===== */
.ts-main-layout[b-6mfjgp36os] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

/* ===== HUD ===== */
.ts-hud[b-6mfjgp36os] {
    display: flex;
    gap: 12px;
    align-items: center;
    background: rgba(0, 0, 0, 0.75);
    padding: 4px 12px;
    border-radius: 0 0 8px 8px;
    font-size: 11px;
    flex-wrap: wrap;
    max-width: 960px;
    z-index: 50;
}

.ts-hud-item[b-6mfjgp36os] { display: flex; align-items: center; gap: 6px; }
.ts-hud-label[b-6mfjgp36os] { font-weight: 700; font-size: 11px; min-width: 28px; color: #aaa; }
.ts-hud-val[b-6mfjgp36os] { font-size: 11px; color: #ccc; min-width: 50px; }
.ts-hud-level[b-6mfjgp36os] { color: #8bc34a; font-weight: 700; }
.ts-hud-gold[b-6mfjgp36os] { color: #ffc107; font-weight: 700; }
.ts-hud-lumen[b-6mfjgp36os] { color: #64b5f6; font-weight: 700; }
.ts-hud-mount[b-6mfjgp36os] { color: #daa520; font-weight: 600; }
.ts-hud-spirit[b-6mfjgp36os] { color: #ff8866; font-weight: 600; }
.ts-hud-claim[b-6mfjgp36os] { color: #8bc34a; font-weight: 600; }

.ts-bar-bg[b-6mfjgp36os] { width: 100px; height: 10px; background: #333; border-radius: 5px; overflow: hidden; border: 1px solid #555; }
.ts-bar[b-6mfjgp36os] { height: 100%; border-radius: 5px; transition: width 0.1s ease; }
.ts-hp-bar[b-6mfjgp36os] { background: linear-gradient(90deg, #e53935, #ff5252); }
.ts-sta-bar[b-6mfjgp36os] { background: linear-gradient(90deg, #ffc107, #ffeb3b); }

.ts-hud-coords[b-6mfjgp36os] { margin-left: auto; font-family: 'Consolas', monospace; font-size: 11px; color: #888; gap: 12px; }
.ts-hud-dir[b-6mfjgp36os] { color: #8bc34a; font-weight: 600; }

/* ===== MESSAGE ===== */
.ts-message[b-6mfjgp36os] {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 200;
    pointer-events: none;
    animation: ts-msg-fade-b-6mfjgp36os 2s ease forwards;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.ts-message.info[b-6mfjgp36os] { border-color: rgba(100, 181, 246, 0.4); color: #90caf9; }
.ts-message.success[b-6mfjgp36os] { border-color: rgba(139, 195, 74, 0.4); color: #a5d6a7; }
.ts-message.warning[b-6mfjgp36os] { border-color: rgba(255, 152, 0, 0.4); color: #ffcc80; }
.ts-message.levelup[b-6mfjgp36os] { border-color: rgba(255, 215, 0, 0.5); color: #ffd54f; text-shadow: 0 0 8px rgba(255, 215, 0, 0.3); }

@keyframes ts-msg-fade-b-6mfjgp36os { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* ===== VIEWPORT ===== */
.ts-viewport[b-6mfjgp36os] {
    position: relative;
    overflow: hidden;
    border: 2px solid #333;
    border-radius: 4px;
    background: #2d5a27;
    image-rendering: pixelated;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
    flex-shrink: 0;
}

/* Atmospheric vignette — darkens viewport edges for depth */
.ts-viewport[b-6mfjgp36os]::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.4) 100%);
    pointer-events: none;
    z-index: 45;
}

/* ===== WORLD LAYER ===== */
.ts-world-layer[b-6mfjgp36os] {
    will-change: transform;
    backface-visibility: hidden;
}

/* ===== TILE LAYER ===== */
.ts-tile-layer[b-6mfjgp36os] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ts-tile[b-6mfjgp36os] {
    position: absolute; box-sizing: border-box; overflow: hidden; image-rendering: pixelated;
    /* Prevent sub-pixel gaps between tiles */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    /* Slight overlap to prevent hairline gaps */
    margin: -0.5px;
    padding: 0.5px;
}

.ts-tile-grass[b-6mfjgp36os] { background: #3a7d32; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.15); }
.ts-tile-grass:nth-child(odd)[b-6mfjgp36os] { background: #3e8536; }
.ts-tile-grass:nth-child(3n)[b-6mfjgp36os] { background: #358130; }
.ts-tile-grass:nth-child(7n+2)[b-6mfjgp36os] { background: #437d3a; }

.ts-tile-dirt[b-6mfjgp36os] { background: #8b7355; box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2); }
.ts-tile-dirt:nth-child(odd)[b-6mfjgp36os] { background: #7d6848; }

.ts-tile-water[b-6mfjgp36os] { background: #2196f3; box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.3); animation: ts-water-shimmer-b-6mfjgp36os 3s ease-in-out infinite; }
.ts-tile-water:nth-child(odd)[b-6mfjgp36os] { animation-delay: -1.5s; }
@keyframes ts-water-shimmer-b-6mfjgp36os { 0%, 100% { background: #2196f3; } 50% { background: #42a5f5; } }

.ts-tile-stone[b-6mfjgp36os] { background: #757575; box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3); }
.ts-tile-stone:nth-child(odd)[b-6mfjgp36os] { background: #6d6d6d; }

.ts-tile-sand[b-6mfjgp36os] { background: #dcc282; box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); }
.ts-tile-sand:nth-child(odd)[b-6mfjgp36os] { background: #d4b96e; }

/* ===== AUTOTILE EDGE TRANSITIONS ===== */
/* Edge pseudo-elements: ::before = N/S edges, ::after = E/W edges */
/* Grass (#3a7d32) is the default terrain — edges blend FROM other types INTO grass */

/* --- DIRT edges blending into grass --- */
.ts-tile-dirt.ts-edge-n[b-6mfjgp36os]::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 18px; z-index: 1;
    background: linear-gradient(to bottom, rgba(58, 125, 50, 0.85), transparent);
    pointer-events: none;
}
.ts-tile-dirt.ts-edge-s[b-6mfjgp36os]::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 18px; z-index: 1;
    background: linear-gradient(to top, rgba(58, 125, 50, 0.85), transparent);
    pointer-events: none;
}
.ts-tile-dirt.ts-edge-e[b-6mfjgp36os] {
    box-shadow: inset -18px 0 14px -10px rgba(58, 125, 50, 0.7);
}
.ts-tile-dirt.ts-edge-w[b-6mfjgp36os] {
    box-shadow: inset 18px 0 14px -10px rgba(58, 125, 50, 0.7);
}
.ts-tile-dirt.ts-edge-e.ts-edge-w[b-6mfjgp36os] {
    box-shadow: inset -18px 0 14px -10px rgba(58, 125, 50, 0.7), inset 18px 0 14px -10px rgba(58, 125, 50, 0.7);
}

/* --- WATER edges (shoreline into grass) --- */
.ts-tile-water.ts-edge-n[b-6mfjgp36os]::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 20px; z-index: 1;
    background: linear-gradient(to bottom, rgba(58, 125, 50, 0.9) 0%, rgba(76, 140, 70, 0.5) 40%, transparent 100%);
    pointer-events: none; border-radius: 0 0 6px 6px;
}
.ts-tile-water.ts-edge-s[b-6mfjgp36os]::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 20px; z-index: 1;
    background: linear-gradient(to top, rgba(58, 125, 50, 0.9) 0%, rgba(76, 140, 70, 0.5) 40%, transparent 100%);
    pointer-events: none; border-radius: 6px 6px 0 0;
}
.ts-tile-water.ts-edge-e[b-6mfjgp36os] {
    box-shadow: inset -20px 0 16px -10px rgba(58, 125, 50, 0.75);
}
.ts-tile-water.ts-edge-w[b-6mfjgp36os] {
    box-shadow: inset 20px 0 16px -10px rgba(58, 125, 50, 0.75);
}
.ts-tile-water.ts-edge-e.ts-edge-w[b-6mfjgp36os] {
    box-shadow: inset -20px 0 16px -10px rgba(58, 125, 50, 0.75), inset 20px 0 16px -10px rgba(58, 125, 50, 0.75);
}

/* --- STONE edges blending into grass --- */
.ts-tile-stone.ts-edge-n[b-6mfjgp36os]::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 16px; z-index: 1;
    background: linear-gradient(to bottom, rgba(58, 125, 50, 0.8), transparent);
    pointer-events: none;
}
.ts-tile-stone.ts-edge-s[b-6mfjgp36os]::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 16px; z-index: 1;
    background: linear-gradient(to top, rgba(58, 125, 50, 0.8), transparent);
    pointer-events: none;
}
.ts-tile-stone.ts-edge-e[b-6mfjgp36os] {
    box-shadow: inset -16px 0 12px -8px rgba(58, 125, 50, 0.7);
}
.ts-tile-stone.ts-edge-w[b-6mfjgp36os] {
    box-shadow: inset 16px 0 12px -8px rgba(58, 125, 50, 0.7);
}
.ts-tile-stone.ts-edge-e.ts-edge-w[b-6mfjgp36os] {
    box-shadow: inset -16px 0 12px -8px rgba(58, 125, 50, 0.7), inset 16px 0 12px -8px rgba(58, 125, 50, 0.7);
}

/* --- SAND edges blending into grass --- */
.ts-tile-sand.ts-edge-n[b-6mfjgp36os]::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 16px; z-index: 1;
    background: linear-gradient(to bottom, rgba(58, 125, 50, 0.8), transparent);
    pointer-events: none;
}
.ts-tile-sand.ts-edge-s[b-6mfjgp36os]::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 16px; z-index: 1;
    background: linear-gradient(to top, rgba(58, 125, 50, 0.8), transparent);
    pointer-events: none;
}
.ts-tile-sand.ts-edge-e[b-6mfjgp36os] {
    box-shadow: inset -16px 0 12px -8px rgba(58, 125, 50, 0.7);
}
.ts-tile-sand.ts-edge-w[b-6mfjgp36os] {
    box-shadow: inset 16px 0 12px -8px rgba(58, 125, 50, 0.7);
}
.ts-tile-sand.ts-edge-e.ts-edge-w[b-6mfjgp36os] {
    box-shadow: inset -16px 0 12px -8px rgba(58, 125, 50, 0.7), inset 16px 0 12px -8px rgba(58, 125, 50, 0.7);
}

/* ===== AUTOTILE CORNER TRANSITIONS ===== */
/* Inner corners use radial gradients via box-shadow on the tile itself */
/* Corners only appear when both adjacent cardinal edges are same-type but diagonal is different */

.ts-tile-dirt.ts-corner-ne[b-6mfjgp36os],
.ts-tile-dirt.ts-corner-nw[b-6mfjgp36os],
.ts-tile-dirt.ts-corner-se[b-6mfjgp36os],
.ts-tile-dirt.ts-corner-sw[b-6mfjgp36os],
.ts-tile-water.ts-corner-ne[b-6mfjgp36os],
.ts-tile-water.ts-corner-nw[b-6mfjgp36os],
.ts-tile-water.ts-corner-se[b-6mfjgp36os],
.ts-tile-water.ts-corner-sw[b-6mfjgp36os],
.ts-tile-stone.ts-corner-ne[b-6mfjgp36os],
.ts-tile-stone.ts-corner-nw[b-6mfjgp36os],
.ts-tile-stone.ts-corner-se[b-6mfjgp36os],
.ts-tile-stone.ts-corner-sw[b-6mfjgp36os],
.ts-tile-sand.ts-corner-ne[b-6mfjgp36os],
.ts-tile-sand.ts-corner-nw[b-6mfjgp36os],
.ts-tile-sand.ts-corner-se[b-6mfjgp36os],
.ts-tile-sand.ts-corner-sw[b-6mfjgp36os] {
    position: absolute; /* already set, but ensure pseudo works */
}

/* Corner notch overlays — small radial gradient in the corner */
.ts-corner-ne[b-6mfjgp36os]::before { content: ''; position: absolute; top: 0; right: 0; width: 14px; height: 14px; z-index: 2;
    background: radial-gradient(circle at 100% 0%, rgba(58, 125, 50, 0.75) 0%, transparent 70%);
    pointer-events: none; }
.ts-corner-nw[b-6mfjgp36os]::before { content: ''; position: absolute; top: 0; left: 0; width: 14px; height: 14px; z-index: 2;
    background: radial-gradient(circle at 0% 0%, rgba(58, 125, 50, 0.75) 0%, transparent 70%);
    pointer-events: none; }
.ts-corner-se[b-6mfjgp36os]::after { content: ''; position: absolute; bottom: 0; right: 0; width: 14px; height: 14px; z-index: 2;
    background: radial-gradient(circle at 100% 100%, rgba(58, 125, 50, 0.75) 0%, transparent 70%);
    pointer-events: none; }
.ts-corner-sw[b-6mfjgp36os]::after { content: ''; position: absolute; bottom: 0; left: 0; width: 14px; height: 14px; z-index: 2;
    background: radial-gradient(circle at 0% 100%, rgba(58, 125, 50, 0.75) 0%, transparent 70%);
    pointer-events: none; }

/* ===== SURROUNDED (isolated tile) ===== */
.ts-surrounded[b-6mfjgp36os] {
    box-shadow: inset 0 0 16px 4px rgba(58, 125, 50, 0.6) !important;
    border-radius: 4px;
}

/* ===== BIOME-SPECIFIC AUTOTILE OVERRIDES ===== */
/* Desert: edges blend into sand (#dcc282) instead of grass */
.biome-desert .ts-tile-dirt.ts-edge-n[b-6mfjgp36os]::before { background: linear-gradient(to bottom, rgba(220, 194, 130, 0.85), transparent); }
.biome-desert .ts-tile-dirt.ts-edge-s[b-6mfjgp36os]::after { background: linear-gradient(to top, rgba(220, 194, 130, 0.85), transparent); }
.biome-desert .ts-tile-dirt.ts-edge-e[b-6mfjgp36os] { box-shadow: inset -18px 0 14px -10px rgba(220, 194, 130, 0.7); }
.biome-desert .ts-tile-dirt.ts-edge-w[b-6mfjgp36os] { box-shadow: inset 18px 0 14px -10px rgba(220, 194, 130, 0.7); }
.biome-desert .ts-tile-water.ts-edge-n[b-6mfjgp36os]::before { background: linear-gradient(to bottom, rgba(220, 194, 130, 0.9), transparent); }
.biome-desert .ts-tile-water.ts-edge-s[b-6mfjgp36os]::after { background: linear-gradient(to top, rgba(220, 194, 130, 0.9), transparent); }
.biome-desert .ts-tile-water.ts-edge-e[b-6mfjgp36os] { box-shadow: inset -20px 0 16px -10px rgba(220, 194, 130, 0.75); }
.biome-desert .ts-tile-water.ts-edge-w[b-6mfjgp36os] { box-shadow: inset 20px 0 16px -10px rgba(220, 194, 130, 0.75); }
.biome-desert .ts-surrounded[b-6mfjgp36os] { box-shadow: inset 0 0 16px 4px rgba(220, 194, 130, 0.6) !important; }
.biome-desert .ts-corner-ne[b-6mfjgp36os]::before,
.biome-desert .ts-corner-nw[b-6mfjgp36os]::before { background: radial-gradient(circle at 50% 0%, rgba(220, 194, 130, 0.75) 0%, transparent 70%); }
.biome-desert .ts-corner-se[b-6mfjgp36os]::after,
.biome-desert .ts-corner-sw[b-6mfjgp36os]::after { background: radial-gradient(circle at 50% 100%, rgba(220, 194, 130, 0.75) 0%, transparent 70%); }

/* Forest: edges blend into darker green (#2e7d32) */
.biome-forest .ts-tile-dirt.ts-edge-n[b-6mfjgp36os]::before { background: linear-gradient(to bottom, rgba(46, 125, 50, 0.9), transparent); }
.biome-forest .ts-tile-dirt.ts-edge-s[b-6mfjgp36os]::after { background: linear-gradient(to top, rgba(46, 125, 50, 0.9), transparent); }
.biome-forest .ts-tile-dirt.ts-edge-e[b-6mfjgp36os] { box-shadow: inset -18px 0 14px -10px rgba(46, 125, 50, 0.75); }
.biome-forest .ts-tile-dirt.ts-edge-w[b-6mfjgp36os] { box-shadow: inset 18px 0 14px -10px rgba(46, 125, 50, 0.75); }
.biome-forest .ts-tile-water.ts-edge-n[b-6mfjgp36os]::before { background: linear-gradient(to bottom, rgba(46, 125, 50, 0.9), transparent); }
.biome-forest .ts-tile-water.ts-edge-s[b-6mfjgp36os]::after { background: linear-gradient(to top, rgba(46, 125, 50, 0.9), transparent); }
.biome-forest .ts-tile-water.ts-edge-e[b-6mfjgp36os] { box-shadow: inset -20px 0 16px -10px rgba(46, 125, 50, 0.8); }
.biome-forest .ts-tile-water.ts-edge-w[b-6mfjgp36os] { box-shadow: inset 20px 0 16px -10px rgba(46, 125, 50, 0.8); }
.biome-forest .ts-surrounded[b-6mfjgp36os] { box-shadow: inset 0 0 16px 4px rgba(46, 125, 50, 0.65) !important; }
.biome-forest .ts-corner-ne[b-6mfjgp36os]::before,
.biome-forest .ts-corner-nw[b-6mfjgp36os]::before { background: radial-gradient(circle at 50% 0%, rgba(46, 125, 50, 0.8) 0%, transparent 70%); }
.biome-forest .ts-corner-se[b-6mfjgp36os]::after,
.biome-forest .ts-corner-sw[b-6mfjgp36os]::after { background: radial-gradient(circle at 50% 100%, rgba(46, 125, 50, 0.8) 0%, transparent 70%); }

/* Mountain: edges blend into stone gray (#9e9e9e) */
.biome-mountain .ts-tile-dirt.ts-edge-n[b-6mfjgp36os]::before { background: linear-gradient(to bottom, rgba(158, 158, 158, 0.8), transparent); }
.biome-mountain .ts-tile-dirt.ts-edge-s[b-6mfjgp36os]::after { background: linear-gradient(to top, rgba(158, 158, 158, 0.8), transparent); }
.biome-mountain .ts-tile-dirt.ts-edge-e[b-6mfjgp36os] { box-shadow: inset -18px 0 14px -10px rgba(158, 158, 158, 0.65); }
.biome-mountain .ts-tile-dirt.ts-edge-w[b-6mfjgp36os] { box-shadow: inset 18px 0 14px -10px rgba(158, 158, 158, 0.65); }
.biome-mountain .ts-tile-water.ts-edge-n[b-6mfjgp36os]::before { background: linear-gradient(to bottom, rgba(158, 158, 158, 0.85), transparent); }
.biome-mountain .ts-tile-water.ts-edge-s[b-6mfjgp36os]::after { background: linear-gradient(to top, rgba(158, 158, 158, 0.85), transparent); }
.biome-mountain .ts-surrounded[b-6mfjgp36os] { box-shadow: inset 0 0 16px 4px rgba(158, 158, 158, 0.55) !important; }

/* Volcanic: edges blend into dark red-brown (#d84315) */
.biome-volcanic .ts-tile-water.ts-edge-n[b-6mfjgp36os]::before { background: linear-gradient(to bottom, rgba(216, 67, 21, 0.85), transparent); }
.biome-volcanic .ts-tile-water.ts-edge-s[b-6mfjgp36os]::after { background: linear-gradient(to top, rgba(216, 67, 21, 0.85), transparent); }
.biome-volcanic .ts-tile-water.ts-edge-e[b-6mfjgp36os] { box-shadow: inset -20px 0 16px -10px rgba(216, 67, 21, 0.7); }
.biome-volcanic .ts-tile-water.ts-edge-w[b-6mfjgp36os] { box-shadow: inset 20px 0 16px -10px rgba(216, 67, 21, 0.7); }
.biome-volcanic .ts-surrounded[b-6mfjgp36os] { box-shadow: inset 0 0 16px 4px rgba(216, 67, 21, 0.5) !important; }

/* Swamp: edges blend into murky green (#5d7a3a) */
.biome-swamp .ts-tile-dirt.ts-edge-n[b-6mfjgp36os]::before { background: linear-gradient(to bottom, rgba(93, 122, 58, 0.85), transparent); }
.biome-swamp .ts-tile-dirt.ts-edge-s[b-6mfjgp36os]::after { background: linear-gradient(to top, rgba(93, 122, 58, 0.85), transparent); }
.biome-swamp .ts-tile-dirt.ts-edge-e[b-6mfjgp36os] { box-shadow: inset -18px 0 14px -10px rgba(93, 122, 58, 0.7); }
.biome-swamp .ts-tile-dirt.ts-edge-w[b-6mfjgp36os] { box-shadow: inset 18px 0 14px -10px rgba(93, 122, 58, 0.7); }
.biome-swamp .ts-tile-water.ts-edge-n[b-6mfjgp36os]::before { background: linear-gradient(to bottom, rgba(93, 122, 58, 0.9), transparent); }
.biome-swamp .ts-tile-water.ts-edge-s[b-6mfjgp36os]::after { background: linear-gradient(to top, rgba(93, 122, 58, 0.9), transparent); }
.biome-swamp .ts-surrounded[b-6mfjgp36os] { box-shadow: inset 0 0 16px 4px rgba(93, 122, 58, 0.6) !important; }

/* Tundra: edges blend into icy blue (#b3e5fc) */
.biome-tundra .ts-tile-dirt.ts-edge-n[b-6mfjgp36os]::before { background: linear-gradient(to bottom, rgba(179, 229, 252, 0.8), transparent); }
.biome-tundra .ts-tile-dirt.ts-edge-s[b-6mfjgp36os]::after { background: linear-gradient(to top, rgba(179, 229, 252, 0.8), transparent); }
.biome-tundra .ts-tile-dirt.ts-edge-e[b-6mfjgp36os] { box-shadow: inset -18px 0 14px -10px rgba(179, 229, 252, 0.65); }
.biome-tundra .ts-tile-dirt.ts-edge-w[b-6mfjgp36os] { box-shadow: inset 18px 0 14px -10px rgba(179, 229, 252, 0.65); }
.biome-tundra .ts-tile-water.ts-edge-n[b-6mfjgp36os]::before { background: linear-gradient(to bottom, rgba(179, 229, 252, 0.85), transparent); }
.biome-tundra .ts-tile-water.ts-edge-s[b-6mfjgp36os]::after { background: linear-gradient(to top, rgba(179, 229, 252, 0.85), transparent); }
.biome-tundra .ts-surrounded[b-6mfjgp36os] { box-shadow: inset 0 0 16px 4px rgba(179, 229, 252, 0.55) !important; }

/* ===== WALLS ===== */
.ts-wall[b-6mfjgp36os] { position: absolute; }

/* ===== TREES ===== */
.ts-tree-sprite[b-6mfjgp36os] {
    position: absolute;
    width: 64px;
    height: 80px;
    /* z-index set dynamically via Y-sort in inline style */
    image-rendering: pixelated;
    background-repeat: no-repeat;
    border: none;
    outline: none;
}

/* ===== COMPOSITE BUILDINGS ===== */
.ts-building-layer[b-6mfjgp36os] {
    position: absolute;
    image-rendering: pixelated;
    pointer-events: none;
    background-repeat: no-repeat;
}

.ts-building-roof[b-6mfjgp36os] {
    z-index: 20; /* Above player */
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

/* When player is under the roof, fade it to reveal player */
.ts-roof-transparent[b-6mfjgp36os] {
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

/* ===== RESOURCE NODES ===== */
.ts-resource-node[b-6mfjgp36os] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    border-radius: 6px;
    transition: filter 0.3s;
}
.ts-node-icon[b-6mfjgp36os] { font-size: 28px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); }
.ts-node-sprite[b-6mfjgp36os] { image-rendering: pixelated; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); }
.ts-node-active[b-6mfjgp36os] { animation: ts-node-pulse-b-6mfjgp36os 3s ease-in-out infinite; }
.ts-node-depleted[b-6mfjgp36os] { opacity: 0.3; filter: grayscale(0.8); }
.ts-node-nearby .ts-node-icon[b-6mfjgp36os],
.ts-node-nearby .ts-node-sprite[b-6mfjgp36os] { filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)); }

@keyframes ts-node-pulse-b-6mfjgp36os {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.ts-node-prompt[b-6mfjgp36os] {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #8bc34a;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #8bc34a;
    animation: ts-prompt-bounce-b-6mfjgp36os 1s ease-in-out infinite;
}

@keyframes ts-prompt-bounce-b-6mfjgp36os {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-4px); }
}

/* ===== NPCs ===== */
.ts-npc[b-6mfjgp36os] {
    position: absolute;
    width: 48px;
    height: 48px;
    /* z-index set dynamically via Y-sort in inline style */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: filter 0.2s;
}

.ts-npc-icon[b-6mfjgp36os] {
    font-size: 32px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    transition: transform 0.2s;
}

.ts-npc-near .ts-npc-icon[b-6mfjgp36os] {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
    transform: scale(1.1);
}

.ts-npc-sprite[b-6mfjgp36os] {
    image-rendering: pixelated;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
    transition: transform 0.2s;
}

.ts-npc-near .ts-npc-sprite[b-6mfjgp36os] {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
    transform: scale(1.1);
}

.ts-npc-name-tag[b-6mfjgp36os] {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 700;
    color: #e0e0e0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.6);
    padding: 1px 6px;
    border-radius: 8px;
}

.ts-npc-type-vendor .ts-npc-name-tag[b-6mfjgp36os] { color: #ffc107; }
.ts-npc-type-quest .ts-npc-name-tag[b-6mfjgp36os] { color: #4fc3f7; }
.ts-npc-type-trainer .ts-npc-name-tag[b-6mfjgp36os] { color: #81c784; }
.ts-npc-type-guard .ts-npc-name-tag[b-6mfjgp36os] { color: #ef5350; }
.ts-npc-type-wanderer .ts-npc-name-tag[b-6mfjgp36os] { color: #bdbdbd; }

.ts-npc-near[b-6mfjgp36os] {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

/* Quest marker */
.ts-quest-marker[b-6mfjgp36os] {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    font-weight: 900;
    animation: ts-quest-marker-bounce-b-6mfjgp36os 1s ease-in-out infinite;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.ts-quest-available[b-6mfjgp36os] { color: #ffc107; }
.ts-quest-ready[b-6mfjgp36os] { color: #66bb6a; }

@keyframes ts-quest-marker-bounce-b-6mfjgp36os {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-6px); }
}

/* Speech bubble */
.ts-speech-bubble[b-6mfjgp36os] {
    position: absolute;
    bottom: 56px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #e0e0e0;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 10px;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #444;
    pointer-events: none;
    z-index: 20;
    animation: ts-speech-in-b-6mfjgp36os 0.3s ease;
}
.ts-speech-bubble[b-6mfjgp36os]::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(0, 0, 0, 0.85);
}

@keyframes ts-speech-in-b-6mfjgp36os { from { opacity: 0; transform: translateX(-50%) translateY(4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* Interact prompt */
.ts-interact-prompt[b-6mfjgp36os] {
    position: absolute;
    top: -20px;
    right: -8px;
    background: rgba(0, 0, 0, 0.8);
    color: #8bc34a;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #8bc34a;
    animation: ts-prompt-bounce-b-6mfjgp36os 1s ease-in-out infinite;
}

/* ===== SPIRIT ANIMAL COMPANION ===== */
.ts-spirit-sprite[b-6mfjgp36os] {
    position: absolute;
    z-index: 9;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ts-spirit-icon[b-6mfjgp36os] {
    font-size: 28px;
    position: relative;
    z-index: 10;
    animation: ts-spirit-bob-b-6mfjgp36os 2s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

@keyframes ts-spirit-bob-b-6mfjgp36os {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.ts-spirit-aura[b-6mfjgp36os] {
    position: absolute;
    width: 56px;
    height: 56px;
    top: -8px;
    left: -8px;
    border-radius: 50%;
    animation: ts-spirit-aura-pulse-b-6mfjgp36os 2.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ts-spirit-aura-pulse-b-6mfjgp36os {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}

.ts-spirit-name-tag[b-6mfjgp36os] {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    pointer-events: none;
}

/* ===== GROUND LOOT ===== */
.ts-ground-loot[b-6mfjgp36os] {
    position: absolute;
    font-size: 18px;
    z-index: 3;
    animation: ts-loot-bob-b-6mfjgp36os 2s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.ts-ground-loot.rarity-common[b-6mfjgp36os] { }
.ts-ground-loot.rarity-rare[b-6mfjgp36os] { filter: drop-shadow(0 0 6px rgba(79, 195, 247, 0.6)); }
.ts-ground-loot.rarity-epic[b-6mfjgp36os] { filter: drop-shadow(0 0 8px rgba(255, 213, 79, 0.6)); }
.ts-ground-loot.rarity-legendary[b-6mfjgp36os] { filter: drop-shadow(0 0 10px rgba(255, 193, 7, 0.8)); }

@keyframes ts-loot-bob-b-6mfjgp36os {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* ===== HARVEST POPUP ===== */
.ts-harvest-popup[b-6mfjgp36os] {
    position: absolute;
    color: #a5d6a7;
    font-size: 13px;
    font-weight: 700;
    pointer-events: none;
    z-index: 20;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    transform: translateX(-50%);
}

/* ===== PLAYER ===== */
.ts-player[b-6mfjgp36os] { position: absolute; transition: none; /* z-index set dynamically via Y-sort */ }

/* Direction wrapper — handles left/right sprite flip without breaking animations */
.ts-sprite-dir[b-6mfjgp36os] { position: relative; z-index: 11; }
.ts-sprite-dir.facing-left[b-6mfjgp36os] { transform: scaleX(-1); }

.ts-player-sprite[b-6mfjgp36os] {
    image-rendering: pixelated;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.ts-player-shadow[b-6mfjgp36os] {
    position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 10px;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.35) 0%, transparent 70%);
    z-index: 9;
}

.ts-player.walking .ts-player-sprite[b-6mfjgp36os] { animation: ts-walk-bob-b-6mfjgp36os 0.3s ease-in-out infinite; }
@keyframes ts-walk-bob-b-6mfjgp36os { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

.ts-player.sprinting .ts-player-sprite[b-6mfjgp36os] { animation: ts-sprint-bob-b-6mfjgp36os 0.2s ease-in-out infinite; filter: brightness(1.05); }
@keyframes ts-sprint-bob-b-6mfjgp36os { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.ts-player.attacking .ts-player-sprite[b-6mfjgp36os] { animation: ts-attack-pulse-b-6mfjgp36os 0.15s ease-out; filter: brightness(1.2); }
@keyframes ts-attack-pulse-b-6mfjgp36os { 0% { transform: scale(1); } 30% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* ===== OTHER PLAYERS (MULTIPLAYER) ===== */
.ts-other-player[b-6mfjgp36os] { position: absolute; pointer-events: none; /* z-index set dynamically via Y-sort */ }
.ts-other-player-sprite[b-6mfjgp36os] { image-rendering: pixelated; opacity: 0.85; }
.ts-other-player-sprite.walking[b-6mfjgp36os] { animation: ts-walk-bob-b-6mfjgp36os 0.3s ease-in-out infinite; }
.ts-other-player-name[b-6mfjgp36os] {
    font-size: 9px; color: #4fc3f7; text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8); white-space: nowrap;
    position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%);
    font-family: 'Press Start 2P', monospace;
}

/* ===== PARTICLES ===== */
.ts-particle[b-6mfjgp36os] { position: absolute; border-radius: 50%; pointer-events: none; z-index: 15; }
.ts-particle-dust[b-6mfjgp36os] { background: rgba(139, 119, 85, 0.6); }
.ts-particle-leaf[b-6mfjgp36os] { background: rgba(76, 175, 80, 0.5); border-radius: 50% 0 50% 0; }
.ts-particle-attack[b-6mfjgp36os] { background: rgba(255, 235, 59, 0.8); box-shadow: 0 0 4px rgba(255, 235, 59, 0.4); }
.ts-particle-harvest[b-6mfjgp36os] { background: rgba(139, 195, 74, 0.7); box-shadow: 0 0 6px rgba(139, 195, 74, 0.4); }

/* ===== SIDE PANELS ===== */
.ts-side-panels[b-6mfjgp36os] {
    position: absolute;
    right: 8px;
    top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 50;
    pointer-events: auto;
}

.ts-panel[b-6mfjgp36os] {
    background: rgba(15, 15, 30, 0.95);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 10px;
    width: 280px;
    max-height: 620px;
    overflow-y: auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.ts-panel-header[b-6mfjgp36os] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    border-bottom: 1px solid #333;
    padding-bottom: 6px;
}

.ts-panel-header h4[b-6mfjgp36os] {
    margin: 0;
    font-size: 14px;
    color: #e0e0e0;
}

.ts-panel-close[b-6mfjgp36os] {
    background: none;
    border: 1px solid #555;
    color: #999;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
}
.ts-panel-close:hover[b-6mfjgp36os] { background: #333; color: #fff; }

/* ===== INVENTORY PANEL ===== */
.ts-inv-gold[b-6mfjgp36os] {
    font-size: 12px;
    color: #ffc107;
    margin-bottom: 6px;
    font-weight: 600;
}

.ts-inv-grid[b-6mfjgp36os] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
    margin-bottom: 8px;
}

.ts-inv-slot[b-6mfjgp36os] {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #444;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: border-color 0.15s;
}
.ts-inv-slot:hover[b-6mfjgp36os] { border-color: #888; }

.ts-inv-slot.filled[b-6mfjgp36os] { border-color: #555; }
.ts-inv-slot.filled.rarity-common[b-6mfjgp36os] { border-color: #777; }
.ts-inv-slot.filled.rarity-rare[b-6mfjgp36os] { border-color: #4fc3f7; background: rgba(79, 195, 247, 0.08); }
.ts-inv-slot.filled.rarity-epic[b-6mfjgp36os] { border-color: #ffd54f; background: rgba(255, 213, 79, 0.08); }
.ts-inv-slot.filled.rarity-legendary[b-6mfjgp36os] { border-color: #ffc107; background: rgba(255, 193, 7, 0.12); box-shadow: 0 0 6px rgba(255, 193, 7, 0.2); animation: ts-legendary-pulse-b-6mfjgp36os 2s ease-in-out infinite; }

@keyframes ts-legendary-pulse-b-6mfjgp36os {
    0%, 100% { box-shadow: 0 0 4px rgba(255, 193, 7, 0.2); }
    50% { box-shadow: 0 0 10px rgba(255, 193, 7, 0.4); }
}

.ts-inv-slot.empty[b-6mfjgp36os] { border-style: dashed; border-color: #333; }

.ts-inv-icon[b-6mfjgp36os] { font-size: 20px; }

.ts-inv-qty[b-6mfjgp36os] {
    position: absolute;
    bottom: 1px;
    right: 2px;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.ts-inv-quality-bar[b-6mfjgp36os] {
    position: absolute;
    bottom: 0;
    left: 2px;
    right: 2px;
    height: 2px;
    background: #333;
    border-radius: 1px;
}

.ts-inv-quality-fill[b-6mfjgp36os] {
    height: 100%;
    background: #8bc34a;
    border-radius: 1px;
    transition: width 0.2s;
}

/* ===== ITEM TOOLTIP ===== */
.ts-item-tooltip[b-6mfjgp36os] {
    background: rgba(20, 20, 40, 0.98);
    border: 1px solid #555;
    border-radius: 6px;
    padding: 8px;
    margin-top: 4px;
    font-size: 12px;
}
.ts-item-tooltip.rarity-rare[b-6mfjgp36os] { border-color: #4fc3f7; }
.ts-item-tooltip.rarity-epic[b-6mfjgp36os] { border-color: #ffd54f; }
.ts-item-tooltip.rarity-legendary[b-6mfjgp36os] { border-color: #ffc107; }

.ts-tooltip-header[b-6mfjgp36os] {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    margin-bottom: 4px;
}
.ts-tooltip-rarity[b-6mfjgp36os] { font-size: 10px; color: #999; text-transform: uppercase; }
.ts-tooltip-desc[b-6mfjgp36os] { color: #aaa; font-size: 11px; margin-bottom: 4px; line-height: 1.3; }
.ts-tooltip-stat[b-6mfjgp36os] { color: #a5d6a7; font-size: 11px; }
.ts-tooltip-price[b-6mfjgp36os] { color: #ffc107; font-size: 11px; margin-top: 4px; }

.ts-tooltip-actions[b-6mfjgp36os] {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.ts-btn[b-6mfjgp36os] {
    padding: 3px 10px;
    border: 1px solid #555;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    color: #ccc;
    transition: all 0.15s;
}
.ts-btn:hover[b-6mfjgp36os] { background: rgba(255, 255, 255, 0.12); color: #fff; }
.ts-btn:disabled[b-6mfjgp36os] { opacity: 0.4; cursor: not-allowed; }
.ts-btn:disabled:hover[b-6mfjgp36os] { background: rgba(255, 255, 255, 0.05); color: #ccc; }

.ts-btn-equip[b-6mfjgp36os] { border-color: #4fc3f7; color: #4fc3f7; }
.ts-btn-equip:hover[b-6mfjgp36os] { background: rgba(79, 195, 247, 0.15); }
.ts-btn-use[b-6mfjgp36os] { border-color: #81c784; color: #81c784; }
.ts-btn-use:hover[b-6mfjgp36os] { background: rgba(129, 199, 132, 0.15); }
.ts-btn-drop[b-6mfjgp36os] { border-color: #e57373; color: #e57373; }
.ts-btn-drop:hover[b-6mfjgp36os] { background: rgba(229, 115, 115, 0.15); }
.ts-btn-buy[b-6mfjgp36os] { border-color: #4fc3f7; color: #4fc3f7; }
.ts-btn-buy:hover[b-6mfjgp36os] { background: rgba(79, 195, 247, 0.15); }
.ts-btn-lumen[b-6mfjgp36os] { border-color: #64b5f6; color: #64b5f6; background: rgba(100, 181, 246, 0.1); }
.ts-btn-lumen:hover[b-6mfjgp36os] { background: rgba(100, 181, 246, 0.25); }
.ts-btn-sell[b-6mfjgp36os] { border-color: #ffc107; color: #ffc107; }
.ts-btn-sell:hover[b-6mfjgp36os] { background: rgba(255, 193, 7, 0.15); }
.ts-btn-accept[b-6mfjgp36os] { border-color: #66bb6a; color: #66bb6a; }
.ts-btn-accept:hover[b-6mfjgp36os] { background: rgba(102, 187, 106, 0.15); }
.ts-btn-turnin[b-6mfjgp36os] { border-color: #ffd54f; color: #ffd54f; }
.ts-btn-turnin:hover[b-6mfjgp36os] { background: rgba(255, 213, 79, 0.15); }

/* ===== EQUIPMENT PANEL ===== */
.ts-equip-panel[b-6mfjgp36os] {
    border-top: 1px solid #333;
    padding-top: 8px;
    margin-top: 6px;
}

.ts-equip-title[b-6mfjgp36os] {
    font-size: 12px;
    font-weight: 700;
    color: #aaa;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ts-equip-grid[b-6mfjgp36os] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    margin-bottom: 6px;
}

.ts-equip-slot[b-6mfjgp36os] {
    width: 52px;
    height: 36px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    position: relative;
    font-size: 10px;
}

.ts-equip-slot.empty[b-6mfjgp36os] { border-style: dashed; border-color: #2a2a2a; }

.ts-equip-slot.filled[b-6mfjgp36os] { border-color: #555; }
.ts-equip-slot.filled.rarity-common[b-6mfjgp36os] { border-color: #777; }
.ts-equip-slot.filled.rarity-rare[b-6mfjgp36os] { border-color: #4fc3f7; background: rgba(79, 195, 247, 0.06); }
.ts-equip-slot.filled.rarity-epic[b-6mfjgp36os] { border-color: #ffd54f; background: rgba(255, 213, 79, 0.06); }
.ts-equip-slot.filled.rarity-legendary[b-6mfjgp36os] { border-color: #ffc107; background: rgba(255, 193, 7, 0.08); animation: ts-legendary-pulse-b-6mfjgp36os 2s ease-in-out infinite; }

.ts-equip-slot-label[b-6mfjgp36os] {
    font-size: 12px;
    opacity: 0.5;
}
.ts-equip-slot.filled .ts-equip-slot-label[b-6mfjgp36os] { opacity: 0.3; font-size: 10px; }

.ts-equip-slot-item[b-6mfjgp36os] {
    font-size: 16px;
}

.ts-equip-unequip[b-6mfjgp36os] {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 14px;
    height: 14px;
    background: rgba(229, 115, 115, 0.8);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
}
.ts-equip-slot:hover .ts-equip-unequip[b-6mfjgp36os] { opacity: 1; }

.ts-equip-stats[b-6mfjgp36os] {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: #888;
    padding-top: 4px;
    border-top: 1px solid #2a2a2a;
}

/* ===== SKILLS PANEL ===== */
.ts-skills-list[b-6mfjgp36os] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ts-skill-row[b-6mfjgp36os] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    border: 1px solid transparent;
    transition: border-color 0.15s;
}
.ts-skill-row:hover[b-6mfjgp36os] { border-color: #444; }

.ts-skill-icon[b-6mfjgp36os] { font-size: 16px; min-width: 22px; text-align: center; }
.ts-skill-name[b-6mfjgp36os] { font-size: 12px; flex: 1; color: #ccc; }
.ts-skill-level[b-6mfjgp36os] {
    font-size: 13px;
    font-weight: 700;
    color: #8bc34a;
    min-width: 22px;
    text-align: right;
}

.ts-skill-xp-bar[b-6mfjgp36os] {
    width: 50px;
    height: 5px;
    background: #333;
    border-radius: 3px;
    overflow: hidden;
}

.ts-skill-xp-fill[b-6mfjgp36os] {
    height: 100%;
    background: #66bb6a;
    border-radius: 3px;
    transition: width 0.2s;
}

/* Skill gain rate indicator */
.ts-skill-gain[b-6mfjgp36os] {
    font-size: 10px;
    min-width: 28px;
    text-align: right;
    font-weight: 600;
    margin-right: 4px;
}
.ts-gain-easy[b-6mfjgp36os] { color: #66bb6a; }
.ts-gain-med[b-6mfjgp36os] { color: #ffa726; }
.ts-gain-hard[b-6mfjgp36os] { color: #ef5350; }

/* Next unlock hint */
.ts-skill-unlock-hint[b-6mfjgp36os] {
    font-size: 10px;
    color: #64b5f6;
    padding: 0 4px 4px 30px;
    opacity: 0.8;
}

/* Minimap settlement markers */
.ts-mm-town[b-6mfjgp36os] { border: 1px solid #ffc107 !important; font-size: 6px; display: flex; align-items: center; justify-content: center; }
.ts-mm-village[b-6mfjgp36os] { border: 1px solid #8bc34a !important; font-size: 5px; display: flex; align-items: center; justify-content: center; }

/* ===== OVERLAY (vendor, quest, trainer) ===== */
.ts-overlay[b-6mfjgp36os] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ts-overlay-in-b-6mfjgp36os 0.2s ease;
}

@keyframes ts-overlay-in-b-6mfjgp36os { from { opacity: 0; } to { opacity: 1; } }

.ts-overlay-box[b-6mfjgp36os] {
    background: rgba(15, 15, 35, 0.98);
    border: 1px solid #444;
    border-radius: 10px;
    padding: 16px;
    min-width: 340px;
    max-width: 420px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
    animation: ts-box-in-b-6mfjgp36os 0.25s ease;
}

@keyframes ts-box-in-b-6mfjgp36os { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* ===== VENDOR SHOP ===== */
.ts-vendor-header[b-6mfjgp36os] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #333;
}

.ts-vendor-icon[b-6mfjgp36os] { font-size: 36px; }

.ts-vendor-name[b-6mfjgp36os] {
    font-size: 16px;
    font-weight: 700;
    color: #ffc107;
}

.ts-vendor-greeting[b-6mfjgp36os] {
    font-size: 12px;
    color: #aaa;
    font-style: italic;
}

.ts-vendor-gold[b-6mfjgp36os] {
    font-size: 12px;
    color: #ffc107;
    margin-bottom: 8px;
    font-weight: 600;
}

.ts-vendor-section[b-6mfjgp36os] {
    margin-bottom: 10px;
}

.ts-vendor-section-title[b-6mfjgp36os] {
    font-size: 12px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
    border-bottom: 1px solid #2a2a2a;
    padding-bottom: 3px;
}

.ts-vendor-row[b-6mfjgp36os] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background 0.15s;
}
.ts-vendor-row:hover[b-6mfjgp36os] { background: rgba(255, 255, 255, 0.04); }

.ts-vendor-item-icon[b-6mfjgp36os] { font-size: 18px; min-width: 24px; text-align: center; }
.ts-vendor-item-name[b-6mfjgp36os] { flex: 1; font-size: 12px; color: #ccc; }
.ts-vendor-item-price[b-6mfjgp36os] { font-size: 11px; color: #ffc107; min-width: 40px; text-align: right; }

/* ===== QUEST DIALOG ===== */
.ts-quest-header[b-6mfjgp36os] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #333;
}

.ts-quest-npc-icon[b-6mfjgp36os] { font-size: 36px; }

.ts-quest-title[b-6mfjgp36os] {
    font-size: 16px;
    font-weight: 700;
    color: #ff9800;
}

.ts-quest-npc-name[b-6mfjgp36os] {
    font-size: 12px;
    color: #aaa;
}

.ts-quest-dialog[b-6mfjgp36os] {
    font-size: 12px;
    color: #bbb;
    font-style: italic;
    margin-bottom: 8px;
    line-height: 1.4;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
}

.ts-quest-desc[b-6mfjgp36os] {
    font-size: 12px;
    color: #ccc;
    margin-bottom: 10px;
    line-height: 1.4;
}

.ts-quest-req[b-6mfjgp36os] {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 4px;
}
.ts-req-met[b-6mfjgp36os] { color: #66bb6a; background: rgba(102, 187, 106, 0.08); }
.ts-req-unmet[b-6mfjgp36os] { color: #ef5350; background: rgba(239, 83, 80, 0.08); }

.ts-quest-rewards-title[b-6mfjgp36os] {
    font-size: 11px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    margin-top: 8px;
    margin-bottom: 4px;
}

.ts-quest-rewards[b-6mfjgp36os] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #ffd54f;
    margin-bottom: 10px;
}

.ts-quest-actions[b-6mfjgp36os] {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    border-top: 1px solid #333;
    padding-top: 10px;
}

.ts-quest-completed[b-6mfjgp36os] {
    color: #66bb6a;
    font-weight: 700;
    font-size: 14px;
}

/* ===== TRAINER DIALOG ===== */
.ts-trainer-skill[b-6mfjgp36os] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #ccc;
    padding: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    margin: 8px 0;
}

.ts-trainer-cost[b-6mfjgp36os] {
    font-size: 12px;
    color: #ffc107;
    margin-bottom: 8px;
}

/* ===== CONTROLS HINT ===== */
.ts-controls-hint[b-6mfjgp36os] {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: #666;
    padding: 4px 0;
    flex-wrap: wrap;
    justify-content: center;
}

.ts-controls-hint span[b-6mfjgp36os] {
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #333;
}

/* ===== MOBILE TOUCH CONTROLS ===== */
/* Hidden on desktop, visible on touch devices */
.ts-mobile-controls[b-6mfjgp36os] { display: none; }
.ts-desktop-only[b-6mfjgp36os] { display: flex; }

@media (hover: none) and (pointer: coarse) {
    .ts-desktop-only[b-6mfjgp36os] { display: none !important; }
    .ts-mobile-controls[b-6mfjgp36os] { display: block; }

    /* D-Pad (bottom-left) */
    .ts-dpad[b-6mfjgp36os] {
        position: fixed;
        bottom: 20px;
        left: 20px;
        z-index: 200;
        display: grid;
        grid-template-areas:
            ". up ."
            "left center right"
            ". down .";
        grid-template-columns: 52px 52px 52px;
        grid-template-rows: 52px 52px 52px;
        gap: 2px;
    }
    .ts-dpad-btn[b-6mfjgp36os] {
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 10px;
        color: #fff;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        user-select: none;
    }
    .ts-dpad-btn:active[b-6mfjgp36os] { background: rgba(255, 193, 7, 0.3); border-color: #ffc107; }
    .ts-dpad-up[b-6mfjgp36os] { grid-area: up; }
    .ts-dpad-left[b-6mfjgp36os] { grid-area: left; }
    .ts-dpad-center[b-6mfjgp36os] { grid-area: center; font-size: 14px; background: rgba(100, 181, 246, 0.15); border-color: rgba(100, 181, 246, 0.3); }
    .ts-dpad-center:active[b-6mfjgp36os] { background: rgba(100, 181, 246, 0.4); }
    .ts-dpad-right[b-6mfjgp36os] { grid-area: right; }
    .ts-dpad-down[b-6mfjgp36os] { grid-area: down; }

    /* Action Buttons (bottom-right) */
    .ts-mobile-actions[b-6mfjgp36os] {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 200;
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }
    .ts-action-btn[b-6mfjgp36os] {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        font-size: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        user-select: none;
    }
    .ts-action-btn:active[b-6mfjgp36os] { transform: scale(0.9); }
    .ts-action-attack[b-6mfjgp36os] { background: rgba(229, 57, 53, 0.2); border-color: rgba(229, 57, 53, 0.5); }
    .ts-action-attack:active[b-6mfjgp36os] { background: rgba(229, 57, 53, 0.5); }
    .ts-action-interact[b-6mfjgp36os] { background: rgba(76, 175, 80, 0.2); border-color: rgba(76, 175, 80, 0.5); font-weight: 700; font-size: 18px; }
    .ts-action-interact:active[b-6mfjgp36os] { background: rgba(76, 175, 80, 0.5); }
    .ts-action-sprint[b-6mfjgp36os] { background: rgba(255, 193, 7, 0.15); border-color: rgba(255, 193, 7, 0.4); }
    .ts-action-sprint:active[b-6mfjgp36os] { background: rgba(255, 193, 7, 0.4); }

    /* Quick Menu Bar (top-center, below HUD) */
    .ts-mobile-menu[b-6mfjgp36os] {
        position: fixed;
        top: auto;
        bottom: 180px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 200;
        display: flex;
        gap: 6px;
        background: rgba(0, 0, 0, 0.5);
        padding: 6px 10px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .ts-mmenu-btn[b-6mfjgp36os] {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    .ts-mmenu-btn:active[b-6mfjgp36os] { background: rgba(255, 193, 7, 0.25); }

    /* Make viewport fill screen on mobile */
    .ts-viewport[b-6mfjgp36os] {
        width: 100vw !important;
        height: calc(100vh - 40px) !important;
        touch-action: manipulation;
    }
    .ts-hud[b-6mfjgp36os] { font-size: 10px; padding: 2px 4px; gap: 4px; flex-wrap: wrap; min-width: unset; }
    .ts-hud-item[b-6mfjgp36os] { gap: 2px; }
    .ts-bar-bg[b-6mfjgp36os] { width: 60px; }
    .ts-hud-val[b-6mfjgp36os] { min-width: 30px; font-size: 9px; }

    /* Side panels become bottom sheets */
    .ts-panel[b-6mfjgp36os] {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-height: 50vh !important;
        border-radius: 12px 12px 0 0 !important;
        z-index: 100 !important;
        overflow-y: auto !important;
    }

    /* Panel close button: touch-friendly 44x44 tap target */
    .ts-panel-close[b-6mfjgp36os] {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

    /* Overlays full screen on mobile */
    .ts-overlay-box[b-6mfjgp36os] {
        width: 95vw !important;
        max-width: 95vw !important;
        min-width: unset !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }

    /* Minimap smaller */
    .ts-minimap[b-6mfjgp36os] { transform: scale(0.7); transform-origin: top right; }

    /* Build mode scrollable */
    .ts-build-toolbar[b-6mfjgp36os] {
        max-width: 100vw;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    /* Controls hint hidden on mobile (touch controls replace it) */
    .ts-controls-hint[b-6mfjgp36os] { display: none; }

    /* Character creation fits mobile */
    .ts-char-create-box[b-6mfjgp36os] {
        width: 90vw !important;
        padding: 16px !important;
    }

    /* Game wrapper fills screen */
    .ts-game-wrapper[b-6mfjgp36os] { padding: 0; }
}

/* ===== MAX-WIDTH MOBILE BREAKPOINT ===== */
@media screen and (max-width: 768px) {
    /* Game wrapper fills screen */
    .ts-game-wrapper[b-6mfjgp36os] { padding: 0; }

    /* HUD compresses */
    .ts-hud[b-6mfjgp36os] {
        flex-wrap: wrap;
        min-width: unset;
        gap: 4px;
        padding: 4px 8px;
        font-size: 10px;
    }
    .ts-hud-item[b-6mfjgp36os] { gap: 2px; }
    .ts-bar-bg[b-6mfjgp36os] { width: 60px; }
    .ts-hud-val[b-6mfjgp36os] { min-width: 30px; font-size: 9px; }

    /* Side panels become bottom sheets */
    .ts-panel[b-6mfjgp36os] {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-height: 50vh !important;
        border-radius: 12px 12px 0 0 !important;
        z-index: 100 !important;
        overflow-y: auto !important;
    }

    /* Panel close button: touch-friendly 44x44 tap target */
    .ts-panel-close[b-6mfjgp36os] {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

    /* Overlays full screen on mobile */
    .ts-overlay-box[b-6mfjgp36os] {
        width: 95vw !important;
        max-width: 95vw !important;
        min-width: unset !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }

    /* Minimap smaller */
    .ts-minimap[b-6mfjgp36os] { transform: scale(0.7); transform-origin: top right; }

    /* Build mode scrollable */
    .ts-build-toolbar[b-6mfjgp36os] {
        max-width: 100vw;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    /* Controls hint hidden on mobile (touch controls replace it) */
    .ts-controls-hint[b-6mfjgp36os] { display: none; }

    /* Character creation fits mobile */
    .ts-char-create-box[b-6mfjgp36os] {
        width: 90vw !important;
        padding: 16px !important;
    }
}

/* ===== SCROLLBAR STYLING ===== */
.ts-panel[b-6mfjgp36os]::-webkit-scrollbar { width: 4px; }
.ts-panel[b-6mfjgp36os]::-webkit-scrollbar-track { background: transparent; }
.ts-panel[b-6mfjgp36os]::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }
.ts-panel[b-6mfjgp36os]::-webkit-scrollbar-thumb:hover { background: #666; }

.ts-overlay-box[b-6mfjgp36os]::-webkit-scrollbar { width: 4px; }
.ts-overlay-box[b-6mfjgp36os]::-webkit-scrollbar-track { background: transparent; }
.ts-overlay-box[b-6mfjgp36os]::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }

/* ===== BIOME VARIANTS (Pixel Crawler Art Packs) ===== */
/* Grassland: Garden Environment tiles */
.biome-grassland .ts-tile-grass[b-6mfjgp36os] { background: url('images/sprites/environments/tiles/garden_tiles.png') 0 0 / 480px 480px; image-rendering: pixelated; }
.biome-grassland .ts-tile-grass:nth-child(odd)[b-6mfjgp36os] { background-position: -32px 0; }
.biome-grassland .ts-tile-grass:nth-child(3n)[b-6mfjgp36os] { background-position: -64px 0; }
.biome-grassland .ts-tile-dirt[b-6mfjgp36os] { background: url('images/sprites/environments/tiles/garden_tiles.png') -96px -32px / 480px 480px; image-rendering: pixelated; }

/* Forest: Fairy Forest tiles */
.biome-forest .ts-tile-grass[b-6mfjgp36os] { background: url('images/sprites/environments/tiles/forest_tiles.png') 0 -160px / 208px 320px; image-rendering: pixelated; }
.biome-forest .ts-tile-grass:nth-child(odd)[b-6mfjgp36os] { background-position: -48px -160px; }
.biome-forest .ts-tile-grass:nth-child(3n)[b-6mfjgp36os] { background-position: -96px -160px; }
.biome-forest .ts-tile-dirt[b-6mfjgp36os] { background: url('images/sprites/environments/tiles/forest_tiles.png') -48px -208px / 208px 320px; image-rendering: pixelated; }

/* Desert: Desert ground tiles */
.biome-desert .ts-tile-sand[b-6mfjgp36os] { background: url('images/sprites/environments/tiles/desert_ground.png') 0 0 / cover; image-rendering: pixelated; }
.biome-desert .ts-tile-sand:nth-child(odd)[b-6mfjgp36os] { background-position: center; }
.biome-desert .ts-tile-dirt[b-6mfjgp36os] { background: url('images/sprites/environments/tiles/desert_sand.png') 0 0 / cover; image-rendering: pixelated; }

/* Cave/Mountain: Cave tiles */
.biome-mountain .ts-tile-stone[b-6mfjgp36os] { background: url('images/sprites/environments/tiles/cave_tiles.png') 0 -192px / 272px 304px; image-rendering: pixelated; }
.biome-mountain .ts-tile-grass[b-6mfjgp36os] { background: url('images/sprites/environments/tiles/cave_tiles.png') -96px -192px / 272px 304px; image-rendering: pixelated; }
.biome-mountain .ts-tile-dirt[b-6mfjgp36os] { background: url('images/sprites/environments/tiles/cave_tiles.png') 0 -240px / 272px 304px; image-rendering: pixelated; }

/* Volcanic: Forge tiles */
.biome-volcanic .ts-tile-stone[b-6mfjgp36os] { background: url('images/sprites/environments/tiles/forge_tiles.png') 0 0 / 400px 400px; image-rendering: pixelated; }
.biome-volcanic .ts-tile-stone:nth-child(odd)[b-6mfjgp36os] { background-position: -32px -32px; }
.biome-volcanic .ts-tile-water[b-6mfjgp36os] { background: url('images/sprites/environments/tiles/forge_tiles.png') -336px 0 / 400px 400px; animation-name: ts-lava-shimmer-b-6mfjgp36os; image-rendering: pixelated; }
@keyframes ts-lava-shimmer-b-6mfjgp36os { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } }

/* Swamp: Sewer tiles */
.biome-swamp .ts-tile-grass[b-6mfjgp36os] { background: url('images/sprites/environments/tiles/sewer_tiles.png') 0 -160px / 416px 336px; image-rendering: pixelated; }
.biome-swamp .ts-tile-grass:nth-child(odd)[b-6mfjgp36os] { background-position: -32px -160px; }
.biome-swamp .ts-tile-water[b-6mfjgp36os] { background: url('images/sprites/environments/tiles/sewer_water.png') 0 0 / cover; animation: ts-murky-shimmer-b-6mfjgp36os 3s ease-in-out infinite; image-rendering: pixelated; }
@keyframes ts-murky-shimmer-b-6mfjgp36os { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } }

/* Tundra: Castle tiles (ice/stone) */
.biome-tundra .ts-tile-grass[b-6mfjgp36os] { background: url('images/sprites/environments/tiles/castle_tiles.png') 0 -128px / 416px 400px; image-rendering: pixelated; filter: hue-rotate(180deg) brightness(1.3); }
.biome-tundra .ts-tile-sand[b-6mfjgp36os] { background: #dde8f0; }
.biome-tundra .ts-tile-sand:nth-child(odd)[b-6mfjgp36os] { background: #d0dfe9; }
.biome-tundra .ts-tile-water[b-6mfjgp36os] { background: #90caf9; animation-name: ts-ice-shimmer-b-6mfjgp36os; }
@keyframes ts-ice-shimmer-b-6mfjgp36os { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } }

/* Ocean: keep CSS water */
.biome-ocean .ts-tile-water[b-6mfjgp36os] { background: #1565c0; }
.biome-ocean .ts-tile-sand[b-6mfjgp36os] { background: #e0c890; }

/* Tree canopy variants removed — trees now use sprite sheet */

/* ===== WORLD ENCOUNTERS ===== */
.ts-encounter[b-6mfjgp36os] {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 6;
    border-radius: 6px;
    transition: filter 0.3s;
    border: none;
    outline: none;
    box-shadow: none;
}

.ts-encounter-icon[b-6mfjgp36os] {
    font-size: 28px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    animation: ts-enc-pulse-b-6mfjgp36os 3s ease-in-out infinite;
}

.ts-encounter-sprite[b-6mfjgp36os] {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    animation: ts-enc-pulse-b-6mfjgp36os 3s ease-in-out infinite;
    background-repeat: no-repeat;
}

@keyframes ts-enc-pulse-b-6mfjgp36os {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.ts-encounter-name[b-6mfjgp36os] {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 700;
    color: #e0e0e0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.5);
    padding: 1px 4px;
    border-radius: 6px;
}

.ts-encounter.rarity-common .ts-encounter-name[b-6mfjgp36os] { color: #ccc; }
.ts-encounter.rarity-rare .ts-encounter-name[b-6mfjgp36os] { color: #4fc3f7; }
.ts-encounter.rarity-rare .ts-encounter-icon[b-6mfjgp36os],
.ts-encounter.rarity-rare .ts-encounter-sprite[b-6mfjgp36os] { filter: drop-shadow(0 0 6px rgba(79, 195, 247, 0.5)); }
.ts-encounter.rarity-epic .ts-encounter-name[b-6mfjgp36os] { color: #ffd54f; }
.ts-encounter.rarity-epic .ts-encounter-icon[b-6mfjgp36os],
.ts-encounter.rarity-epic .ts-encounter-sprite[b-6mfjgp36os] { filter: drop-shadow(0 0 8px rgba(255, 213, 79, 0.5)); }

.ts-encounter-searched[b-6mfjgp36os] {
    opacity: 0.35;
    filter: grayscale(0.7);
}
.ts-encounter-searched .ts-encounter-icon[b-6mfjgp36os],
.ts-encounter-searched .ts-encounter-sprite[b-6mfjgp36os] { animation: none; }

.ts-encounter-near .ts-encounter-icon[b-6mfjgp36os],
.ts-encounter-near .ts-encounter-sprite[b-6mfjgp36os] {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));
    animation: ts-interact-pulse-b-6mfjgp36os 1.2s ease-in-out infinite;
}

@keyframes ts-interact-pulse-b-6mfjgp36os {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5)); }
    50% { filter: drop-shadow(0 0 16px rgba(255, 220, 100, 0.9)); }
}

.ts-encounter-prompt[b-6mfjgp36os] {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #8bc34a;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #8bc34a;
    white-space: nowrap;
    animation: ts-prompt-bounce-b-6mfjgp36os 1s ease-in-out infinite;
}

/* ===== ZONE PORTALS ===== */
.ts-portal[b-6mfjgp36os] {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 7;
}

.ts-portal-icon[b-6mfjgp36os] {
    font-size: 32px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
    animation: ts-portal-glow-b-6mfjgp36os 2s ease-in-out infinite;
}

@keyframes ts-portal-glow-b-6mfjgp36os {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(100, 181, 246, 0.4)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 12px rgba(100, 181, 246, 0.8)); transform: scale(1.05); }
}

.ts-portal-label[b-6mfjgp36os] {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 700;
    color: #90caf9;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
}

.ts-portal-near .ts-portal-icon[b-6mfjgp36os] {
    filter: drop-shadow(0 0 14px rgba(100, 181, 246, 0.9));
}

.ts-portal-prompt[b-6mfjgp36os] {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #64b5f6;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #64b5f6;
    animation: ts-prompt-bounce-b-6mfjgp36os 1s ease-in-out infinite;
}

/* ===== WILD ANIMALS ===== */
.ts-wild-animal[b-6mfjgp36os] {
    position: absolute;
    width: 40px;
    height: 40px;
    /* z-index set dynamically via Y-sort in inline style */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: filter 0.2s;
    border: none;
    outline: none;
}

.ts-animal-icon[b-6mfjgp36os] {
    font-size: 26px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    animation: ts-animal-idle-b-6mfjgp36os 3s ease-in-out infinite;
}

@keyframes ts-animal-idle-b-6mfjgp36os {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

.ts-animal-name[b-6mfjgp36os] {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 600;
    color: #c0c0c0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.5);
    padding: 1px 4px;
    border-radius: 6px;
}

.ts-animal-passive .ts-animal-name[b-6mfjgp36os] { color: #a5d6a7; }
.ts-animal-hostile .ts-animal-name[b-6mfjgp36os] { color: #ef9a9a; }

.ts-animal-near .ts-animal-icon[b-6mfjgp36os] {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
    transform: scale(1.1);
}

.ts-animal-prompt[b-6mfjgp36os] {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #81c784;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #81c784;
    white-space: nowrap;
    animation: ts-prompt-bounce-b-6mfjgp36os 1s ease-in-out infinite;
}

/* ===== TAMING BAR ===== */
.ts-taming-bar[b-6mfjgp36os] {
    position: absolute;
    top: -8px;
    left: -4px;
    width: 48px;
    height: 6px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 3px;
    border: 1px solid #555;
    overflow: hidden;
}

.ts-taming-fill[b-6mfjgp36os] {
    height: 100%;
    background: linear-gradient(90deg, #66bb6a, #81c784);
    border-radius: 3px;
    transition: width 0.1s ease;
}

/* ===== PET COMPANIONS ===== */
.ts-pet-sprite[b-6mfjgp36os] {
    position: absolute;
    z-index: 9;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ts-pet-icon[b-6mfjgp36os] {
    font-size: 22px;
    animation: ts-pet-bob-b-6mfjgp36os 2.5s ease-in-out infinite;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}

@keyframes ts-pet-bob-b-6mfjgp36os {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.ts-pet-name[b-6mfjgp36os] {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    font-weight: 600;
    color: #a5d6a7;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
    pointer-events: none;
}

.ts-pet-row[b-6mfjgp36os] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    font-size: 12px;
    color: #ccc;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
    margin-bottom: 3px;
}
.ts-pet-row-name[b-6mfjgp36os] { flex: 1; }
.ts-pet-row-bonus[b-6mfjgp36os] { font-size: 10px; color: #81c784; }

/* ===== ZONE TRANSITION FLASH ===== */
.ts-zone-flash[b-6mfjgp36os] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 500;
    pointer-events: none;
    animation: ts-flash-out-b-6mfjgp36os 0.4s ease-out forwards;
}

@keyframes ts-flash-out-b-6mfjgp36os {
    0% { opacity: 0.7; }
    100% { opacity: 0; }
}

/* ===== MINIMAP ===== */
/* OLD minimap styles removed - see new minimap section below */
.ts-minimap-dot-legacy[b-6mfjgp36os] {
    display: none;
}

/* ===== HUD ZONE INFO ===== */
.ts-hud-zone-info[b-6mfjgp36os] {
    color: #90caf9;
    font-weight: 600;
    font-size: 11px;
}

/* ===== BIOME AMBIENT PARTICLES ===== */
.ts-particle-snow[b-6mfjgp36os] { background: rgba(255, 255, 255, 0.7); border-radius: 50%; }
.ts-particle-ember[b-6mfjgp36os] { background: rgba(255, 100, 20, 0.7); box-shadow: 0 0 4px rgba(255, 100, 20, 0.5); border-radius: 50%; }

/* ===== WATER MOVEMENT ===== */
.ts-player.on-water .ts-player-sprite[b-6mfjgp36os] {
    filter: brightness(0.9) saturate(1.2);
}
.ts-player.on-water .ts-player-shadow[b-6mfjgp36os] {
    background: radial-gradient(ellipse, rgba(33, 150, 243, 0.3) 0%, transparent 70%);
    width: 44px;
    animation: ts-water-ripple-b-6mfjgp36os 1.5s ease-in-out infinite;
}
@keyframes ts-water-ripple-b-6mfjgp36os {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.6; }
    50% { transform: translateX(-50%) scale(1.3); opacity: 0.3; }
}

/* ===== LOCKED TAMING PROMPT ===== */
.ts-prompt-locked[b-6mfjgp36os] {
    color: #ef5350 !important;
    border-color: #ef5350 !important;
}

/* ===== PET PANEL STYLES ===== */
.ts-pet-deploy-hint[b-6mfjgp36os] {
    font-size: 9px;
    color: #666;
    font-weight: 400;
    margin-left: 4px;
}
.ts-pet-deployed[b-6mfjgp36os] {
    border: 1px solid #66bb6a;
    background: rgba(102, 187, 106, 0.08) !important;
}
.ts-btn-pet[b-6mfjgp36os] {
    padding: 1px 6px;
    font-size: 9px;
    margin-left: auto;
}
.ts-pet-empty[b-6mfjgp36os] {
    font-size: 10px;
    color: #666;
    font-style: italic;
    padding: 4px;
}

/* ===== EQUIPMENT OVERLAYS ON CHARACTER ===== */
.ts-equip-overlay[b-6mfjgp36os] {
    position: absolute;
    pointer-events: none;
    z-index: 12;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
    line-height: 1;
}
.ts-equip-head[b-6mfjgp36os] {
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
}
.ts-equip-chest[b-6mfjgp36os] {
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    opacity: 0.75;
}
.ts-equip-weapon[b-6mfjgp36os] {
    bottom: 8px;
    right: -8px;
    font-size: 22px;
    transform: rotate(-30deg);
    transform-origin: bottom center;
}
.ts-weapon-swing[b-6mfjgp36os] {
    animation: ts-swing-weapon-b-6mfjgp36os 0.3s ease-in-out;
}
@keyframes ts-swing-weapon-b-6mfjgp36os {
    0% { transform: rotate(-30deg); }
    40% { transform: rotate(30deg); }
    100% { transform: rotate(-30deg); }
}

/* ===== DODGE VISUAL EFFECT ===== */
.ts-player.dodging[b-6mfjgp36os] {
    opacity: 0.5;
    filter: blur(1px) brightness(1.4);
    transition: opacity 0.05s, filter 0.05s;
}
.ts-player.dodging .ts-player-shadow[b-6mfjgp36os] {
    opacity: 0.2;
    transform: scaleX(1.8) scaleY(0.5);
}

/* ===== WORLD NEWS FEED ===== */
.ts-news-panel[b-6mfjgp36os] {
    position: absolute;
    left: 8px;
    top: 50px;
    width: 280px;
    max-height: 350px;
    z-index: 30;
    overflow-y: auto;
}
.ts-news-list[b-6mfjgp36os] { display: flex; flex-direction: column; gap: 2px; padding: 4px; }
.ts-news-empty[b-6mfjgp36os] { color: #888; font-size: 11px; padding: 8px; text-align: center; }
.ts-news-entry[b-6mfjgp36os] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.03);
    border-left: 2px solid #555;
}
.ts-news-icon[b-6mfjgp36os] { font-size: 14px; min-width: 18px; text-align: center; }
.ts-news-text[b-6mfjgp36os] { font-size: 10px; color: #ccc; flex: 1; }
.ts-news-text b[b-6mfjgp36os] { color: #8bc34a; }
.ts-news-time[b-6mfjgp36os] { font-size: 9px; color: #666; min-width: 40px; text-align: right; }
.ts-news-legendarykill[b-6mfjgp36os] { border-left-color: #ffc107; }
.ts-news-playerdeath[b-6mfjgp36os] { border-left-color: #ef5350; }
.ts-news-skillmastery[b-6mfjgp36os] { border-left-color: #64b5f6; }
.ts-news-landclaimed[b-6mfjgp36os] { border-left-color: #8bc34a; }
.ts-news-rarefind[b-6mfjgp36os] { border-left-color: #ab47bc; }
.ts-news-serverannouncement[b-6mfjgp36os] { border-left-color: #ff9800; }

/* ===== QUEST LOG PANEL ===== */
.ts-quest-log-panel[b-6mfjgp36os] {
    position: absolute;
    right: 8px;
    top: 50px;
    width: 260px;
    max-height: 320px;
    z-index: 30;
    overflow-y: auto;
}

.ts-quest-list[b-6mfjgp36os] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0;
}

.ts-quest-empty[b-6mfjgp36os] {
    font-size: 11px;
    color: #777;
    font-style: italic;
    text-align: center;
    padding: 16px 8px;
}

.ts-quest-row[b-6mfjgp36os] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid #ff9800;
    transition: background 0.15s;
}
.ts-quest-row:hover[b-6mfjgp36os] {
    background: rgba(255, 255, 255, 0.06);
}
.ts-quest-row.ts-quest-completed[b-6mfjgp36os] {
    border-left-color: #66bb6a;
    opacity: 0.7;
}

.ts-quest-status[b-6mfjgp36os] {
    font-size: 14px;
    min-width: 18px;
    text-align: center;
    margin-top: 1px;
}

.ts-quest-info[b-6mfjgp36os] {
    flex: 1;
    min-width: 0;
}

.ts-quest-log-panel .ts-quest-title[b-6mfjgp36os] {
    font-size: 12px;
    font-weight: 600;
    color: #e0c080;
    margin-bottom: 2px;
}

.ts-quest-log-panel .ts-quest-desc[b-6mfjgp36os] {
    font-size: 10px;
    color: #999;
    line-height: 1.3;
    margin: 0;
}

.ts-quest-row.ts-quest-completed .ts-quest-title[b-6mfjgp36os] {
    color: #88cc88;
    text-decoration: line-through;
    text-decoration-color: rgba(136, 204, 136, 0.4);
}

/* ===== RANGED ATTACK VISUAL ===== */
.ts-player.attacking .ts-equip-weapon[b-6mfjgp36os] {
    filter: drop-shadow(0 0 4px rgba(255, 200, 100, 0.6));
}

/* ===== SAVE / LOAD MENU ===== */
.ts-save-overlay[b-6mfjgp36os] {
    z-index: 200;
}

.ts-save-box[b-6mfjgp36os] {
    min-width: 320px;
    max-width: 400px;
    text-align: center;
}

.ts-save-header[b-6mfjgp36os] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 12px;
}

.ts-save-header h4[b-6mfjgp36os] {
    flex: 1;
    margin: 0;
    font-size: 16px;
    color: #e0e0e0;
}

.ts-save-icon[b-6mfjgp36os] {
    font-size: 24px;
}

.ts-save-status[b-6mfjgp36os] {
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 10px;
}

.ts-save-saving[b-6mfjgp36os] {
    background: rgba(255, 200, 60, 0.15);
    color: #ffcc44;
}

.ts-save-success[b-6mfjgp36os] {
    background: rgba(76, 175, 80, 0.15);
    color: #66cc66;
}

.ts-save-error[b-6mfjgp36os] {
    background: rgba(244, 67, 54, 0.15);
    color: #ff6666;
}

.ts-save-actions[b-6mfjgp36os] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
}

.ts-btn-save[b-6mfjgp36os] {
    background: linear-gradient(135deg, #2e7d32, #388e3c) !important;
    font-size: 14px;
    padding: 10px 16px;
    border-radius: 6px;
}

.ts-btn-save:hover:not(:disabled)[b-6mfjgp36os] {
    background: linear-gradient(135deg, #388e3c, #43a047) !important;
    box-shadow: 0 0 12px rgba(76, 175, 80, 0.4);
}

.ts-btn-load[b-6mfjgp36os] {
    background: linear-gradient(135deg, #1565c0, #1976d2) !important;
    font-size: 14px;
    padding: 10px 16px;
    border-radius: 6px;
}

.ts-btn-load:hover:not(:disabled)[b-6mfjgp36os] {
    background: linear-gradient(135deg, #1976d2, #2196f3) !important;
    box-shadow: 0 0 12px rgba(33, 150, 243, 0.4);
}

.ts-save-info[b-6mfjgp36os] {
    font-size: 11px;
    color: #888;
    padding: 4px 0;
}

.ts-save-nosave[b-6mfjgp36os] {
    color: #666;
    font-style: italic;
}

.ts-save-divider[b-6mfjgp36os] {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 8px 0;
}

.ts-save-stats[b-6mfjgp36os] {
    padding: 8px 0;
}

.ts-save-stats-title[b-6mfjgp36os] {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.ts-save-stats-grid[b-6mfjgp36os] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    font-size: 13px;
}

.ts-stat-label[b-6mfjgp36os] {
    color: #999;
    text-align: left;
}

.ts-stat-value[b-6mfjgp36os] {
    color: #e0e0e0;
    font-weight: 600;
    text-align: right;
}

/* ===== BUILDING SYSTEM ===== */
.ts-build-toolbar[b-6mfjgp36os] {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 20, 30, 0.92);
    border: 1px solid rgba(255, 200, 60, 0.4);
    border-radius: 8px;
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 60;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.ts-build-title[b-6mfjgp36os] {
    font-size: 13px;
    font-weight: bold;
    color: #ffcc44;
    letter-spacing: 1px;
}

.ts-build-items[b-6mfjgp36os] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}

.ts-build-item[b-6mfjgp36os] {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    background: rgba(40, 40, 55, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.15s;
}

.ts-build-item:hover[b-6mfjgp36os] {
    border-color: rgba(255, 200, 60, 0.6);
    background: rgba(60, 60, 80, 0.9);
}

.ts-build-selected[b-6mfjgp36os] {
    border-color: #ffcc44;
    background: rgba(255, 200, 60, 0.15) !important;
    box-shadow: 0 0 8px rgba(255, 200, 60, 0.3);
}

.ts-build-nostock[b-6mfjgp36os] {
    opacity: 0.35;
    cursor: not-allowed;
}

.ts-build-item-icon[b-6mfjgp36os] {
    font-size: 18px;
    line-height: 1;
}

.ts-build-item-qty[b-6mfjgp36os] {
    font-size: 9px;
    color: #aaa;
    position: absolute;
    bottom: 1px;
    right: 3px;
}

.ts-build-hint[b-6mfjgp36os] {
    font-size: 10px;
    color: #888;
}

/* Placed buildings in the world */
.ts-placed-building[b-6mfjgp36os] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 14;
}

.ts-building-icon[b-6mfjgp36os] {
    font-size: 28px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

.ts-building-durability[b-6mfjgp36os] {
    position: absolute;
    bottom: -4px;
    left: 4px;
    right: 4px;
    height: 3px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2px;
}

.ts-building-durability-fill[b-6mfjgp36os] {
    height: 100%;
    background: linear-gradient(90deg, #ff6633, #ffcc44);
    border-radius: 2px;
    transition: width 0.3s;
}

/* Ghost preview while placing */
.ts-build-ghost[b-6mfjgp36os] {
    position: absolute;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    opacity: 0.4;
    z-index: 50;
    pointer-events: none;
    animation: ts-ghost-pulse-b-6mfjgp36os 1s ease-in-out infinite;
    border: 1px dashed rgba(255, 200, 60, 0.5);
    border-radius: 4px;
}

@keyframes ts-ghost-pulse-b-6mfjgp36os {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* ===== CREATURE AI STATES ===== */
.ts-animal-sleeping[b-6mfjgp36os] {
    opacity: 0.6;
}

.ts-animal-sleeping .ts-animal-icon[b-6mfjgp36os] {
    filter: brightness(0.7);
}

.ts-animal-zzz[b-6mfjgp36os] {
    position: absolute;
    top: -18px;
    right: -8px;
    font-size: 12px;
    animation: ts-zzz-float-b-6mfjgp36os 2s ease-in-out infinite;
}

@keyframes ts-zzz-float-b-6mfjgp36os {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(-6px); opacity: 1; }
}

.ts-animal-alert .ts-animal-icon[b-6mfjgp36os] {
    animation: ts-alert-shake-b-6mfjgp36os 0.3s ease-in-out 3;
}

.ts-animal-alert-mark[b-6mfjgp36os] {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    animation: ts-alert-pop-b-6mfjgp36os 0.4s ease-out;
}

@keyframes ts-alert-shake-b-6mfjgp36os {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

@keyframes ts-alert-pop-b-6mfjgp36os {
    0% { transform: translateX(-50%) scale(0); opacity: 0; }
    60% { transform: translateX(-50%) scale(1.3); }
    100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

.ts-animal-aggro[b-6mfjgp36os] {
    filter: drop-shadow(0 0 4px rgba(255, 60, 40, 0.5));
}

.ts-animal-aggro .ts-animal-name[b-6mfjgp36os] {
    color: #ff5544 !important;
}

.ts-animal-fleeing[b-6mfjgp36os] {
    opacity: 0.75;
}

.ts-animal-grazing .ts-animal-icon[b-6mfjgp36os] {
    animation: ts-graze-bob-b-6mfjgp36os 1.5s ease-in-out infinite;
}

@keyframes ts-graze-bob-b-6mfjgp36os {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}

/* Animal HP bar for hostile creatures */
.ts-animal-hp-bar[b-6mfjgp36os] {
    position: absolute;
    bottom: -6px;
    left: 2px;
    right: 2px;
    height: 3px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 2px;
}

.ts-animal-hp-fill[b-6mfjgp36os] {
    height: 100%;
    background: linear-gradient(90deg, #ff3333, #ff6644);
    border-radius: 2px;
    transition: width 0.2s;
}

/* ===== DAY/NIGHT CYCLE ===== */
.ts-daynight-overlay[b-6mfjgp36os] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    transition: background 2s ease;
    mix-blend-mode: multiply;
}

.ts-time-display[b-6mfjgp36os] {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 56;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 10px;
    color: #ddd;
    display: flex;
    gap: 8px;
    align-items: center;
}

.ts-day-count[b-6mfjgp36os] {
    color: #aaa;
    font-size: 9px;
}

/* ===================================================================
   WEATHER SYSTEM
   =================================================================== */

.ts-weather-overlay[b-6mfjgp36os] {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 48;
    pointer-events: none;
    transition: background 3s ease;
}

.ts-weather-particle[b-6mfjgp36os] {
    position: absolute;
    z-index: 49;
    pointer-events: none;
}

.ts-wp-rain[b-6mfjgp36os] {
    width: 2px;
    height: 12px;
    background: linear-gradient(to bottom, rgba(150, 180, 220, 0), rgba(150, 180, 220, 0.7));
    border-radius: 0 0 1px 1px;
}

.ts-wp-snow[b-6mfjgp36os] {
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
}

.ts-wp-sand[b-6mfjgp36os] {
    width: 3px;
    height: 3px;
    background: rgba(200, 170, 100, 0.7);
    border-radius: 50%;
}

.ts-wp-fog[b-6mfjgp36os] {
    width: 40px;
    height: 20px;
    background: radial-gradient(ellipse, rgba(200, 200, 210, 0.3), transparent);
    border-radius: 50%;
}

.ts-lightning-flash[b-6mfjgp36os] {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.6);
    z-index: 55;
    pointer-events: none;
    animation: lightning-flash-b-6mfjgp36os 0.15s ease-out;
}

@keyframes lightning-flash-b-6mfjgp36os {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    70% { opacity: 0.8; }
    100% { opacity: 0; }
}

.ts-hud-weather[b-6mfjgp36os] {
    gap: 3px;
}

.ts-hud-season[b-6mfjgp36os] {
    gap: 3px;
}

/* ===== SEASON VIEWPORT TINTS ===== */
.ts-season-spring[b-6mfjgp36os]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(100, 200, 100, 0.04);
    pointer-events: none;
    z-index: 998;
}

.ts-season-summer[b-6mfjgp36os]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(220, 180, 60, 0.05);
    pointer-events: none;
    z-index: 998;
}

.ts-season-autumn[b-6mfjgp36os]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(200, 120, 40, 0.06);
    pointer-events: none;
    z-index: 998;
}

.ts-season-winter[b-6mfjgp36os]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(180, 200, 240, 0.07);
    pointer-events: none;
    z-index: 998;
}

/* ===================================================================
   STATUS EFFECTS BAR
   =================================================================== */

.ts-status-effects-bar[b-6mfjgp36os] {
    display: flex;
    gap: 4px;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    margin: 0 6px;
    flex-wrap: wrap;
    max-width: 960px;
}

.ts-status-effect[b-6mfjgp36os] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 9px;
    min-width: 32px;
    cursor: default;
}

.ts-buff[b-6mfjgp36os] {
    background: rgba(50, 150, 50, 0.4);
    border: 1px solid rgba(80, 200, 80, 0.5);
}

.ts-debuff[b-6mfjgp36os] {
    background: rgba(150, 50, 50, 0.4);
    border: 1px solid rgba(200, 80, 80, 0.5);
    animation: debuff-pulse-b-6mfjgp36os 1.5s infinite;
}

@keyframes debuff-pulse-b-6mfjgp36os {
    0%, 100% { border-color: rgba(200, 80, 80, 0.5); }
    50% { border-color: rgba(255, 80, 80, 0.9); }
}

.ts-effect-icon[b-6mfjgp36os] {
    font-size: 14px;
    line-height: 1;
}

.ts-effect-time[b-6mfjgp36os] {
    color: #ccc;
    font-size: 8px;
}

/* ===================================================================
   FARM PLOTS
   =================================================================== */

.ts-farm-plot[b-6mfjgp36os] {
    position: absolute;
    z-index: 15;
    border: 1px solid rgba(100, 80, 40, 0.5);
    border-radius: 3px;
    background: rgba(120, 90, 40, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ts-farm-icon[b-6mfjgp36os] {
    font-size: 20px;
    line-height: 1;
}

.ts-farm-ready[b-6mfjgp36os] {
    animation: farm-glow-b-6mfjgp36os 1.5s infinite;
    border-color: rgba(80, 200, 80, 0.7);
}

@keyframes farm-glow-b-6mfjgp36os {
    0%, 100% { box-shadow: 0 0 4px rgba(80, 200, 80, 0.3); }
    50% { box-shadow: 0 0 10px rgba(80, 200, 80, 0.7); }
}

.ts-farm-dead[b-6mfjgp36os] {
    opacity: 0.6;
    filter: grayscale(0.5);
}

.ts-farm-progress-bg[b-6mfjgp36os] {
    position: absolute;
    bottom: 2px;
    left: 3px;
    right: 3px;
    height: 3px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2px;
}

.ts-farm-progress[b-6mfjgp36os] {
    height: 100%;
    background: linear-gradient(90deg, #4caf50, #8bc34a);
    border-radius: 2px;
    transition: width 0.5s;
}

.ts-farm-water-bg[b-6mfjgp36os] {
    position: absolute;
    bottom: 6px;
    left: 3px;
    right: 3px;
    height: 2px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 1px;
}

.ts-farm-water[b-6mfjgp36os] {
    height: 100%;
    background: linear-gradient(90deg, #42a5f5, #64b5f6);
    border-radius: 1px;
    transition: width 0.5s;
}

.ts-farm-prompt[b-6mfjgp36os] {
    position: absolute;
    top: -16px;
    font-size: 8px;
    color: #ffd54f;
    background: rgba(0, 0, 0, 0.7);
    padding: 1px 4px;
    border-radius: 2px;
    white-space: nowrap;
}

/* ===================================================================
   CRAFTING PANEL
   =================================================================== */

.ts-crafting-panel[b-6mfjgp36os] {
    max-height: 500px;
    min-width: 280px;
    overflow-y: auto;
}

.ts-craft-categories[b-6mfjgp36os] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 4px;
}

.ts-craft-cat-btn[b-6mfjgp36os] {
    background: rgba(60, 60, 80, 0.6);
    border: 1px solid rgba(100, 100, 120, 0.4);
    color: #aaa;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
}

.ts-craft-cat-btn:hover[b-6mfjgp36os] {
    background: rgba(80, 80, 110, 0.7);
    color: #ddd;
}

.ts-craft-cat-btn.active[b-6mfjgp36os] {
    background: rgba(70, 120, 180, 0.6);
    border-color: rgba(100, 160, 220, 0.7);
    color: #fff;
}

.ts-craft-recipe-list[b-6mfjgp36os] {
    max-height: 200px;
    overflow-y: auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 4px;
    margin-bottom: 4px;
}

.ts-craft-recipe[b-6mfjgp36os] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.1s;
    font-size: 10px;
}

.ts-craft-recipe:hover[b-6mfjgp36os] {
    background: rgba(255, 255, 255, 0.1);
}

.ts-craft-available[b-6mfjgp36os] {
    color: #ddd;
}

.ts-craft-locked[b-6mfjgp36os] {
    color: #777;
    opacity: 0.7;
}

.ts-craft-selected[b-6mfjgp36os] {
    background: rgba(70, 120, 180, 0.3) !important;
    border-left: 2px solid #4fc3f7;
}

.ts-craft-recipe-icon[b-6mfjgp36os] {
    font-size: 16px;
    width: 22px;
    text-align: center;
}

.ts-craft-recipe-info[b-6mfjgp36os] {
    display: flex;
    flex-direction: column;
}

.ts-craft-recipe-name[b-6mfjgp36os] {
    font-size: 10px;
}

.ts-craft-recipe-qty[b-6mfjgp36os] {
    font-size: 8px;
    color: #999;
}

.ts-craft-detail[b-6mfjgp36os] {
    padding: 6px 4px;
}

.ts-craft-detail-header[b-6mfjgp36os] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.ts-craft-detail-icon[b-6mfjgp36os] {
    font-size: 22px;
}

.ts-craft-detail-name[b-6mfjgp36os] {
    font-size: 12px;
    font-weight: bold;
    color: #eee;
}

.ts-craft-ingredients[b-6mfjgp36os] {
    margin-bottom: 6px;
}

.ts-craft-ing-label[b-6mfjgp36os] {
    font-size: 9px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ts-craft-ing[b-6mfjgp36os] {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    padding: 1px 2px;
    border-radius: 2px;
}

.ts-ing-have[b-6mfjgp36os] {
    color: #8bc34a;
}

.ts-ing-need[b-6mfjgp36os] {
    color: #ef5350;
}

.ts-craft-skill-req[b-6mfjgp36os] {
    font-size: 9px;
    color: #ffd54f;
    margin-bottom: 4px;
}

.ts-craft-station-req[b-6mfjgp36os] {
    font-size: 9px;
    color: #90caf9;
    margin-bottom: 6px;
}

.ts-craft-btn[b-6mfjgp36os] {
    width: 100%;
    padding: 5px 8px;
    font-size: 11px;
    background: linear-gradient(135deg, #2e7d32, #388e3c);
    border: 1px solid rgba(76, 175, 80, 0.5);
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    font-weight: bold;
}

.ts-craft-btn:hover[b-6mfjgp36os] {
    background: linear-gradient(135deg, #388e3c, #43a047);
    box-shadow: 0 0 6px rgba(76, 175, 80, 0.5);
}

.ts-craft-btn.disabled[b-6mfjgp36os] {
    background: rgba(60, 60, 60, 0.5);
    border-color: rgba(100, 100, 100, 0.3);
    color: #666;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===== FISHING MINIGAME ===== */
.ts-fishing-overlay[b-6mfjgp36os] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.85);
    border: 2px solid rgba(64, 196, 255, 0.5);
    border-radius: 12px;
    padding: 20px 30px;
    z-index: 120;
    text-align: center;
    min-width: 280px;
    box-shadow: 0 0 30px rgba(64, 196, 255, 0.2);
    animation: ts-fishing-appear-b-6mfjgp36os 0.3s ease;
}

@keyframes ts-fishing-appear-b-6mfjgp36os {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.ts-fishing-cast[b-6mfjgp36os],
.ts-fishing-bite[b-6mfjgp36os],
.ts-fishing-reel[b-6mfjgp36os] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.ts-fishing-icon[b-6mfjgp36os] {
    font-size: 40px;
    animation: ts-bobber-bob-b-6mfjgp36os 1.5s ease-in-out infinite;
}

@keyframes ts-bobber-bob-b-6mfjgp36os {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.ts-fishing-alert[b-6mfjgp36os] {
    animation: ts-fishing-shake-b-6mfjgp36os 0.15s ease infinite !important;
    color: #ff5252;
}

@keyframes ts-fishing-shake-b-6mfjgp36os {
    0%, 100% { transform: translateX(0) scale(1.2); }
    25% { transform: translateX(-4px) scale(1.3); }
    75% { transform: translateX(4px) scale(1.3); }
}

.ts-fishing-text[b-6mfjgp36os] {
    font-size: 16px;
    color: #e0e0e0;
    font-weight: 600;
}

.ts-fishing-urgent[b-6mfjgp36os] {
    color: #ff5252;
    font-size: 20px;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(255, 82, 82, 0.5);
    animation: ts-urgent-pulse-b-6mfjgp36os 0.5s ease infinite;
}

@keyframes ts-urgent-pulse-b-6mfjgp36os {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.ts-fishing-bobber-anim[b-6mfjgp36os] {
    width: 8px;
    height: 8px;
    background: #ff5252;
    border-radius: 50%;
    animation: ts-bobber-bob-b-6mfjgp36os 2s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(255, 82, 82, 0.5);
}

/* Reel bar */
.ts-reel-bar[b-6mfjgp36os] {
    position: relative;
    width: 240px;
    height: 24px;
    background: rgba(30, 30, 30, 0.9);
    border: 2px solid rgba(100, 100, 100, 0.5);
    border-radius: 12px;
    overflow: hidden;
    margin: 8px 0;
}

.ts-reel-target[b-6mfjgp36os] {
    position: absolute;
    top: 0;
    height: 100%;
    background: rgba(76, 175, 80, 0.4);
    border-left: 2px solid #4caf50;
    border-right: 2px solid #4caf50;
    border-radius: 4px;
    transform: translateX(-50%);
}

.ts-reel-cursor[b-6mfjgp36os] {
    position: absolute;
    top: -2px;
    width: 6px;
    height: 28px;
    background: #ffc107;
    border-radius: 3px;
    transform: translateX(-50%);
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.6);
    z-index: 2;
}

/* Reel progress bar */
.ts-reel-progress-bar[b-6mfjgp36os] {
    width: 240px;
    height: 10px;
    background: rgba(30, 30, 30, 0.9);
    border: 1px solid rgba(100, 100, 100, 0.4);
    border-radius: 5px;
    overflow: hidden;
    margin: 4px 0;
}

.ts-reel-progress[b-6mfjgp36os] {
    height: 100%;
    background: linear-gradient(90deg, #2196f3, #64b5f6);
    border-radius: 5px;
    transition: width 0.1s ease;
}

.ts-fishing-hint[b-6mfjgp36os] {
    font-size: 11px;
    color: #888;
    font-style: italic;
}

.ts-fishing-cancel[b-6mfjgp36os] {
    margin-top: 10px;
    padding: 4px 14px;
    background: rgba(60, 60, 60, 0.6);
    border: 1px solid rgba(100, 100, 100, 0.4);
    border-radius: 6px;
    color: #aaa;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ts-fishing-cancel:hover[b-6mfjgp36os] {
    background: rgba(80, 40, 40, 0.6);
    border-color: rgba(255, 82, 82, 0.4);
    color: #ff8a80;
}

/* ===== DEATH OVERLAY ===== */
.ts-death-overlay[b-6mfjgp36os] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 0, 0, 0.85);
    z-index: 150;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: ts-death-fadein-b-6mfjgp36os 1s ease;
}

@keyframes ts-death-fadein-b-6mfjgp36os {
    0% { opacity: 0; background: rgba(180, 0, 0, 0.6); }
    30% { opacity: 1; background: rgba(180, 0, 0, 0.4); }
    100% { opacity: 1; background: rgba(20, 0, 0, 0.85); }
}

.ts-death-content[b-6mfjgp36os] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.ts-death-icon[b-6mfjgp36os] {
    font-size: 60px;
    animation: ts-death-icon-pulse-b-6mfjgp36os 2s ease infinite;
}

@keyframes ts-death-icon-pulse-b-6mfjgp36os {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}

.ts-death-title[b-6mfjgp36os] {
    font-size: 36px;
    font-weight: 700;
    color: #e53935;
    text-shadow: 0 0 20px rgba(229, 57, 53, 0.5), 0 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 8px;
    text-transform: uppercase;
    animation: ts-death-title-appear-b-6mfjgp36os 0.8s ease;
}

@keyframes ts-death-title-appear-b-6mfjgp36os {
    0% { transform: scale(2); opacity: 0; letter-spacing: 20px; }
    100% { transform: scale(1); opacity: 1; letter-spacing: 8px; }
}

.ts-death-info[b-6mfjgp36os] {
    font-size: 14px;
    color: #ff8a80;
    font-style: italic;
}

.ts-death-timer[b-6mfjgp36os] {
    font-size: 13px;
    color: #888;
}

.ts-death-respawn[b-6mfjgp36os] {
    margin-top: 8px;
    padding: 10px 28px;
    background: linear-gradient(135deg, #1b5e20, #2e7d32);
    border: 2px solid rgba(76, 175, 80, 0.4);
    border-radius: 8px;
    color: #a5d6a7;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    animation: ts-respawn-appear-b-6mfjgp36os 0.5s ease;
}

@keyframes ts-respawn-appear-b-6mfjgp36os {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.ts-death-respawn:hover[b-6mfjgp36os] {
    background: linear-gradient(135deg, #2e7d32, #388e3c);
    border-color: rgba(76, 175, 80, 0.7);
    color: #c8e6c9;
    box-shadow: 0 0 12px rgba(76, 175, 80, 0.3);
    transform: scale(1.05);
}

/* ===== HOVER TOOLTIP ===== */
.ts-hover-tooltip[b-6mfjgp36os] {
    position: absolute;
    bottom: 105%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 15, 25, 0.95);
    border: 1px solid rgba(100, 100, 100, 0.5);
    border-radius: 8px;
    padding: 8px 12px;
    min-width: 180px;
    max-width: 240px;
    z-index: 200;
    pointer-events: none;
    animation: ts-tooltip-fade-b-6mfjgp36os 0.15s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

@keyframes ts-tooltip-fade-b-6mfjgp36os {
    0% { opacity: 0; transform: translateX(-50%) translateY(4px); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.ts-hover-tooltip.rarity-common[b-6mfjgp36os] { border-color: rgba(150, 150, 150, 0.4); }
.ts-hover-tooltip.rarity-rare[b-6mfjgp36os] { border-color: rgba(64, 196, 255, 0.5); }
.ts-hover-tooltip.rarity-epic[b-6mfjgp36os] { border-color: rgba(255, 193, 7, 0.5); }
.ts-hover-tooltip.rarity-legendary[b-6mfjgp36os] { border-color: rgba(255, 215, 0, 0.6); box-shadow: 0 0 12px rgba(255, 215, 0, 0.15); }

.ts-ht-name[b-6mfjgp36os] {
    font-size: 13px;
    font-weight: 700;
    color: #e0e0e0;
    margin-bottom: 2px;
}

.ts-ht-rarity[b-6mfjgp36os] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.ts-hover-tooltip.rarity-common .ts-ht-rarity[b-6mfjgp36os] { color: #999; }
.ts-hover-tooltip.rarity-rare .ts-ht-rarity[b-6mfjgp36os] { color: #40c4ff; }
.ts-hover-tooltip.rarity-epic .ts-ht-rarity[b-6mfjgp36os] { color: #ffc107; }
.ts-hover-tooltip.rarity-legendary .ts-ht-rarity[b-6mfjgp36os] { color: #ffd700; text-shadow: 0 0 6px rgba(255, 215, 0, 0.3); }

.ts-ht-desc[b-6mfjgp36os] {
    font-size: 11px;
    color: #888;
    font-style: italic;
    margin-bottom: 4px;
    line-height: 1.3;
}

.ts-ht-stat[b-6mfjgp36os] {
    font-size: 11px;
    color: #aaa;
    padding: 1px 0;
}

.ts-stat-atk[b-6mfjgp36os] { color: #ff8a80; }
.ts-stat-def[b-6mfjgp36os] { color: #80cbc4; }
.ts-stat-heal[b-6mfjgp36os] { color: #a5d6a7; }

.ts-ht-qty[b-6mfjgp36os] {
    font-size: 10px;
    color: #777;
}

.ts-ht-price[b-6mfjgp36os] {
    font-size: 10px;
    color: #ffc107;
    margin-top: 3px;
    padding-top: 3px;
    border-top: 1px solid rgba(100, 100, 100, 0.3);
}

/* ===== MINIMAP ===== */
.ts-minimap[b-6mfjgp36os] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.92);
    border: 1px solid rgba(100, 100, 100, 0.5);
    border-radius: 6px;
    padding: 4px 6px 6px;
    z-index: 200;
    cursor: pointer;
    transition: all 0.2s ease;
    pointer-events: auto;
    /* Sticky: stay visible above all overlays */
    backdrop-filter: blur(4px);
}

.ts-minimap:hover[b-6mfjgp36os] {
    border-color: rgba(139, 195, 74, 0.4);
    box-shadow: 0 0 8px rgba(139, 195, 74, 0.15);
}

.ts-minimap-expanded[b-6mfjgp36os] {
    top: 50% !important;
    right: 50% !important;
    transform: translate(50%, -50%);
    padding: 8px 10px 10px;
    border: 1px solid rgba(139, 195, 74, 0.5);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    max-height: 80vh;
    max-width: 80vw;
    overflow: auto;
}

.ts-minimap-header[b-6mfjgp36os] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: #888;
    margin-bottom: 4px;
}

.ts-minimap-grid[b-6mfjgp36os] {
    display: grid;
    gap: 1px;
}

.ts-mm-cell[b-6mfjgp36os] {
    width: 10px;
    height: 10px;
    border-radius: 1px;
    transition: all 0.2s ease;
}

.ts-mm-unknown[b-6mfjgp36os] {
    background: rgba(30, 30, 30, 0.5) !important;
    border: 1px solid rgba(50, 50, 50, 0.3);
}

.ts-mm-visited[b-6mfjgp36os] {
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0.8;
}

.ts-mm-current[b-6mfjgp36os] {
    border: 2px solid #ffc107 !important;
    box-shadow: 0 0 4px rgba(255, 193, 7, 0.6);
    animation: ts-mm-pulse-b-6mfjgp36os 1.5s ease infinite;
}

@keyframes ts-mm-pulse-b-6mfjgp36os {
    0%, 100% { box-shadow: 0 0 4px rgba(255, 193, 7, 0.4); }
    50% { box-shadow: 0 0 8px rgba(255, 193, 7, 0.8); }
}

.ts-mm-claimed[b-6mfjgp36os] {
    border: 2px solid #8bc34a !important;
    box-shadow: 0 0 3px rgba(139, 195, 58, 0.5);
    opacity: 1 !important;
}

/* ===== ACHIEVEMENT TOASTS ===== */
.ts-toast-container[b-6mfjgp36os] {
    position: fixed;
    top: 120px;
    right: 20px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.ts-achievement-toast[b-6mfjgp36os] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(25, 20, 5, 0.95), rgba(40, 30, 10, 0.95));
    border: 2px solid rgba(255, 215, 0, 0.5);
    border-radius: 10px;
    padding: 12px 18px;
    min-width: 280px;
    max-width: 360px;
    box-shadow: 0 4px 24px rgba(255, 215, 0, 0.2), inset 0 1px 0 rgba(255, 215, 0, 0.1);
    animation: ts-toast-slidein-b-6mfjgp36os 0.4s ease;
    transition: opacity 0.3s ease;
}

.ts-toast-fadeout[b-6mfjgp36os] {
    opacity: 0;
}

@keyframes ts-toast-slidein-b-6mfjgp36os {
    0% { opacity: 0; transform: translateX(100px); }
    100% { opacity: 1; transform: translateX(0); }
}

.ts-toast-icon[b-6mfjgp36os] {
    font-size: 32px;
    animation: ts-toast-trophy-b-6mfjgp36os 0.6s ease;
}

@keyframes ts-toast-trophy-b-6mfjgp36os {
    0% { transform: scale(0); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.ts-toast-body[b-6mfjgp36os] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ts-toast-title[b-6mfjgp36os] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ffd700;
    font-weight: 700;
}

.ts-toast-name[b-6mfjgp36os] {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.ts-toast-desc[b-6mfjgp36os] {
    font-size: 11px;
    color: #bbb;
    font-style: italic;
}

.ts-toast-reward[b-6mfjgp36os] {
    font-size: 11px;
    color: #ffc107;
    font-weight: 600;
}

/* ===== Character Creation Screen ===== */
.ts-char-create[b-6mfjgp36os] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
}

.ts-char-create-box[b-6mfjgp36os] {
    background: rgba(10, 10, 26, 0.95);
    border: 2px solid #ffc107;
    border-radius: 16px;
    padding: 40px;
    max-width: 560px;
    width: 90%;
    box-shadow: 0 0 40px rgba(255, 193, 7, 0.1);
}

.ts-appear-option[b-6mfjgp36os] {
    padding: 16px 24px;
    border: 3px solid #333;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    background: rgba(20, 20, 40, 0.6);
    min-width: 200px;
}

.ts-appear-option:hover[b-6mfjgp36os] {
    border-color: #888;
    background: rgba(30, 30, 60, 0.8);
}

.ts-appear-selected[b-6mfjgp36os] {
    border-color: #ffc107 !important;
    box-shadow: 0 0 16px rgba(255, 193, 7, 0.4);
    background: rgba(40, 35, 20, 0.7);
}

/* ===== PROJECTILES ===== */
.ts-projectile[b-6mfjgp36os] {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, #ff6633, #cc3300);
    box-shadow: 0 0 4px rgba(255, 80, 30, 0.7), 0 0 8px rgba(255, 60, 20, 0.4);
    z-index: 20;
    pointer-events: none;
}

/* ===== COMBAT FEEDBACK: DAMAGE POPUPS ===== */
.ts-damage-popup[b-6mfjgp36os] {
    position: absolute;
    font-size: 16px;
    font-weight: 900;
    pointer-events: none;
    z-index: 25;
    transform: translateX(-50%);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.5);
    animation: ts-dmg-float-b-6mfjgp36os 0.5s ease-out;
}

.ts-dmg-taken[b-6mfjgp36os] {
    color: #ff4444;
}

.ts-dmg-dealt[b-6mfjgp36os] {
    color: #ffd700;
}

@keyframes ts-dmg-float-b-6mfjgp36os {
    0% { transform: translateX(-50%) scale(1.4); }
    100% { transform: translateX(-50%) scale(1); }
}

/* ===== COMBAT FEEDBACK: SCREEN SHAKE ===== */
.ts-screen-shake[b-6mfjgp36os] {
    animation: ts-shake-b-6mfjgp36os 0.2s ease-in-out;
}

@keyframes ts-shake-b-6mfjgp36os {
    0%, 100% { transform: translate(0); }
    25% { transform: translate(-3px, 2px); }
    50% { transform: translate(3px, -2px); }
    75% { transform: translate(-2px, -3px); }
}

/* ===== COMBAT FEEDBACK: ENEMY HIT FLASH ===== */
.ts-hit-flash[b-6mfjgp36os] {
    filter: brightness(3);
    transition: filter 0.1s ease-out;
}

/* ===== NPC SLEEPING STATE ===== */
.ts-npc-sleeping[b-6mfjgp36os] {
    opacity: 0.5;
}

.ts-npc-sleep-icon[b-6mfjgp36os] {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: #8899cc;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    animation: ts-sleep-bob-b-6mfjgp36os 2s ease-in-out infinite;
}

@keyframes ts-sleep-bob-b-6mfjgp36os {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-4px); }
}

/* ===== AMBIENT DECORATIONS ===== */
.ts-ambient-decor[b-6mfjgp36os] {
    position: absolute;
    width: 16px;
    height: 16px;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
    z-index: 2;
    animation: ts-decor-idle-b-6mfjgp36os 4s ease-in-out infinite;
}

@keyframes ts-decor-idle-b-6mfjgp36os {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* ===== DODGE I-FRAME VISUAL ===== */
.ts-player-dodging[b-6mfjgp36os] {
    opacity: 0.5;
    filter: blur(1px);
    transition: all 0.1s;
}

.ts-iframe-end-flash[b-6mfjgp36os] {
    opacity: 1;
    filter: brightness(2) saturate(0.5);
    transition: opacity 0.15s, filter 0.15s;
}

/* ===== ENEMY TELEGRAPH (WIND-UP) ===== */
.ts-enemy-windup[b-6mfjgp36os] {
    color: #ff4444;
    font-size: 16px;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    animation: ts-windup-pulse-b-6mfjgp36os 0.3s infinite;
    pointer-events: none;
    z-index: 20;
    text-shadow: 0 0 6px rgba(255, 68, 68, 0.8);
}

@keyframes ts-windup-pulse-b-6mfjgp36os {
    0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
    50% { opacity: 0.5; transform: translateX(-50%) scale(1.3); }
}

/* ===== COMBO INDICATOR ===== */
.ts-combo-indicator[b-6mfjgp36os] {
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffc107;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    pointer-events: none;
    z-index: 25;
    text-shadow: 0 0 6px rgba(255, 193, 7, 0.6), 0 1px 3px rgba(0, 0, 0, 0.9);
    animation: ts-combo-pop-b-6mfjgp36os 0.3s ease-out;
    letter-spacing: 1px;
}

.ts-combo-high[b-6mfjgp36os] {
    font-size: 16px;
    color: #ff9800;
    text-shadow: 0 0 10px rgba(255, 152, 0, 0.8), 0 0 20px rgba(255, 152, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.9);
    animation: ts-combo-pop-b-6mfjgp36os 0.3s ease-out, ts-combo-glow-b-6mfjgp36os 0.5s infinite alternate;
}

.ts-combo-perfect[b-6mfjgp36os] {
    font-size: 20px;
    color: #ffd700;
    text-shadow: 0 0 14px rgba(255, 215, 0, 1), 0 0 28px rgba(255, 215, 0, 0.6), 0 0 42px rgba(255, 165, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.9);
    animation: ts-combo-pop-b-6mfjgp36os 0.3s ease-out, ts-combo-glow-b-6mfjgp36os 0.3s infinite alternate;
}

@keyframes ts-combo-pop-b-6mfjgp36os {
    0% { transform: translateX(-50%) scale(0.5); opacity: 0; }
    60% { transform: translateX(-50%) scale(1.3); opacity: 1; }
    100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

@keyframes ts-combo-glow-b-6mfjgp36os {
    0% { filter: brightness(1); }
    100% { filter: brightness(1.4); }
}

/* ===== ELEMENTAL EFFECT PARTICLES ===== */
.ts-particle-fire[b-6mfjgp36os] { background: radial-gradient(circle, #ff6600, #ff3300); border-radius: 50%; }
.ts-particle-frost[b-6mfjgp36os] { background: radial-gradient(circle, #88ccff, #4488ff); border-radius: 50%; }
.ts-particle-poison[b-6mfjgp36os] { background: radial-gradient(circle, #66ff66, #22aa22); border-radius: 50%; }
.ts-particle-lightning[b-6mfjgp36os] { background: radial-gradient(circle, #ffff44, #ffcc00); border-radius: 2px; }
.ts-particle-combo_gold[b-6mfjgp36os] { background: radial-gradient(circle, #ffd700, #ff8c00); border-radius: 50%; }

/* ===== ELEMENTAL STATUS ON ENEMIES ===== */
.ts-elem-fire[b-6mfjgp36os] {
    filter: brightness(1.2);
    box-shadow: 0 0 12px rgba(255, 80, 0, 0.7), inset 0 0 8px rgba(255, 80, 0, 0.3);
    animation: ts-elem-fire-pulse-b-6mfjgp36os 0.4s infinite alternate;
}

.ts-elem-frost[b-6mfjgp36os] {
    filter: brightness(0.9) saturate(0.7);
    box-shadow: 0 0 12px rgba(100, 180, 255, 0.7), inset 0 0 8px rgba(100, 180, 255, 0.3);
    animation: ts-elem-frost-pulse-b-6mfjgp36os 0.6s infinite alternate;
}

.ts-elem-poison[b-6mfjgp36os] {
    box-shadow: 0 0 10px rgba(80, 200, 80, 0.6), inset 0 0 6px rgba(80, 200, 80, 0.2);
    animation: ts-elem-poison-pulse-b-6mfjgp36os 0.8s infinite;
}

.ts-elem-stun[b-6mfjgp36os] {
    filter: brightness(1.3) saturate(0.5);
    box-shadow: 0 0 14px rgba(255, 255, 100, 0.8);
    animation: ts-elem-stun-flash-b-6mfjgp36os 0.2s infinite alternate;
}

.ts-stun-stars[b-6mfjgp36os] {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    pointer-events: none;
    z-index: 22;
    animation: ts-stun-spin-b-6mfjgp36os 1s linear infinite;
    letter-spacing: 2px;
    white-space: nowrap;
}

@keyframes ts-elem-fire-pulse-b-6mfjgp36os {
    0% { box-shadow: 0 0 8px rgba(255, 80, 0, 0.5); }
    100% { box-shadow: 0 0 16px rgba(255, 80, 0, 0.9), 0 0 24px rgba(255, 40, 0, 0.3); }
}

@keyframes ts-elem-frost-pulse-b-6mfjgp36os {
    0% { box-shadow: 0 0 8px rgba(100, 180, 255, 0.5); filter: brightness(0.85) saturate(0.6); }
    100% { box-shadow: 0 0 14px rgba(100, 180, 255, 0.8); filter: brightness(0.95) saturate(0.8); }
}

@keyframes ts-elem-poison-pulse-b-6mfjgp36os {
    0%, 100% { box-shadow: 0 0 8px rgba(80, 200, 80, 0.4); }
    50% { box-shadow: 0 0 14px rgba(80, 200, 80, 0.8), 0 0 20px rgba(0, 160, 0, 0.3); }
}

@keyframes ts-elem-stun-flash-b-6mfjgp36os {
    0% { filter: brightness(1.1) saturate(0.4); }
    100% { filter: brightness(1.5) saturate(0.6); }
}

@keyframes ts-stun-spin-b-6mfjgp36os {
    0% { transform: translateX(-50%) rotate(0deg); }
    100% { transform: translateX(-50%) rotate(360deg); }
}

/* ===== BATTLE PASS PANEL ===== */
.ts-battlepass-panel[b-6mfjgp36os] {
    width: 320px;
}

.ts-bp-tier-display[b-6mfjgp36os] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.ts-bp-tier-label[b-6mfjgp36os] {
    font-size: 14px;
    font-weight: 700;
    color: #ffc107;
}

.ts-bp-premium-badge[b-6mfjgp36os] {
    background: linear-gradient(135deg, #ff6f00, #ffc107);
    color: #1a1a2e;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 1px;
}

.ts-bp-xp-section[b-6mfjgp36os] {
    margin-bottom: 8px;
}

.ts-bp-xp-bar[b-6mfjgp36os] {
    background: linear-gradient(90deg, #ffc107, #ff9800);
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.ts-bp-xp-text[b-6mfjgp36os] {
    font-size: 10px;
    color: #aaa;
    display: block;
    text-align: right;
    margin-top: 2px;
}

.ts-bp-upgrade-row[b-6mfjgp36os] {
    margin-bottom: 8px;
}

.ts-bp-tier-list[b-6mfjgp36os] {
    max-height: 400px;
    overflow-y: auto;
}

.ts-bp-tier-row[b-6mfjgp36os] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 11px;
}

.ts-bp-tier-locked[b-6mfjgp36os] {
    opacity: 0.5;
}

.ts-bp-tier-unlocked[b-6mfjgp36os] {
    opacity: 1;
}

.ts-bp-tier-num[b-6mfjgp36os] {
    color: #ffc107;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
    font-size: 12px;
}

.ts-bp-reward-free[b-6mfjgp36os],
.ts-bp-reward-prem[b-6mfjgp36os] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 3px 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
    position: relative;
}

.ts-bp-reward-prem[b-6mfjgp36os] {
    background: rgba(255, 193, 7, 0.06);
    border-left: 2px solid rgba(255, 193, 7, 0.3);
}

.ts-bp-claimed[b-6mfjgp36os] {
    opacity: 0.5;
}

.ts-bp-reward-label[b-6mfjgp36os] {
    font-size: 9px;
    color: #888;
}

.ts-bp-claim-btn[b-6mfjgp36os] {
    font-size: 9px !important;
    padding: 1px 6px !important;
    margin-top: 2px;
}

.ts-bp-check[b-6mfjgp36os] {
    color: #4caf50;
    font-size: 12px;
}

.ts-bp-lock[b-6mfjgp36os] {
    font-size: 10px;
    opacity: 0.4;
}

.ts-bp-lumen-reward[b-6mfjgp36os] {
    color: #ffc107;
    font-size: 9px;
}

/* ===== VILLAGE PANEL ===== */
.ts-village-panel[b-6mfjgp36os] {
    width: 280px;
}

.ts-village-info[b-6mfjgp36os] {
    margin-bottom: 10px;
}

.ts-village-name-display[b-6mfjgp36os] {
    font-size: 16px;
    font-weight: 700;
    color: #8bc34a;
    margin-bottom: 4px;
}

.ts-village-stats[b-6mfjgp36os] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    color: #aaa;
}

.ts-village-members-title[b-6mfjgp36os],
.ts-village-buildings-title[b-6mfjgp36os] {
    font-size: 12px;
    font-weight: 700;
    color: #e0e0e0;
    margin-top: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid #333;
    padding-bottom: 3px;
}

.ts-village-member-list[b-6mfjgp36os] {
    max-height: 200px;
    overflow-y: auto;
}

.ts-village-member-row[b-6mfjgp36os] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 11px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ts-village-member-name[b-6mfjgp36os] {
    color: #e0e0e0;
}

.ts-village-member-role[b-6mfjgp36os] {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
}

.ts-role-mayor[b-6mfjgp36os] { background: rgba(255, 193, 7, 0.2); color: #ffc107; }
.ts-role-elder[b-6mfjgp36os] { background: rgba(156, 39, 176, 0.2); color: #ce93d8; }
.ts-role-merchant[b-6mfjgp36os] { background: rgba(76, 175, 80, 0.2); color: #81c784; }
.ts-role-guard[b-6mfjgp36os] { background: rgba(244, 67, 54, 0.2); color: #ef9a9a; }
.ts-role-farmer[b-6mfjgp36os] { background: rgba(139, 195, 74, 0.2); color: #aed581; }
.ts-role-citizen[b-6mfjgp36os] { background: rgba(158, 158, 158, 0.15); color: #bdbdbd; }

.ts-village-building-row[b-6mfjgp36os] {
    font-size: 11px;
    color: #aaa;
    padding: 2px 0;
}

.ts-village-no-village[b-6mfjgp36os] {
    padding: 8px 0;
}

/* ===== SEASONAL EVENT SECTION (inside Quest Log) ===== */
.ts-seasonal-event-section[b-6mfjgp36os] {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #444;
}

.ts-seasonal-event-header[b-6mfjgp36os] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.ts-seasonal-event-name[b-6mfjgp36os] {
    font-size: 13px;
    font-weight: 700;
    color: #ffc107;
}

.ts-seasonal-event-desc[b-6mfjgp36os] {
    font-size: 10px;
    color: #888;
    margin-bottom: 6px;
}

.ts-seasonal-challenges[b-6mfjgp36os] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ts-seasonal-challenge[b-6mfjgp36os] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
    font-size: 11px;
}

.ts-challenge-done[b-6mfjgp36os] {
    opacity: 0.6;
}

.ts-challenge-status[b-6mfjgp36os] {
    font-size: 10px;
}

.ts-challenge-info[b-6mfjgp36os] {
    flex: 1;
}

.ts-challenge-desc[b-6mfjgp36os] {
    color: #ccc;
}

.ts-challenge-progress[b-6mfjgp36os] {
    font-size: 9px;
    color: #888;
}

.ts-challenge-pts[b-6mfjgp36os] {
    font-size: 9px;
    color: #ffc107;
    white-space: nowrap;
}

.ts-seasonal-rewards-title[b-6mfjgp36os] {
    font-size: 11px;
    font-weight: 700;
    color: #e0e0e0;
    margin-top: 6px;
    margin-bottom: 3px;
}

.ts-seasonal-reward-row[b-6mfjgp36os] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    padding: 2px 4px;
    border-radius: 3px;
}

.ts-reward-unlocked[b-6mfjgp36os] {
    color: #4caf50;
    background: rgba(76, 175, 80, 0.08);
}

.ts-reward-locked[b-6mfjgp36os] {
    color: #666;
}

.ts-reward-pts[b-6mfjgp36os] {
    font-size: 9px;
    color: #888;
}

/* ===== CHARACTER CUSTOMIZATION ===== */
.ts-skin-selector[b-6mfjgp36os] {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

.ts-skin-swatch[b-6mfjgp36os] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #444;
    transition: border-color 0.2s, transform 0.15s;
}

.ts-skin-swatch:hover[b-6mfjgp36os] {
    transform: scale(1.15);
    border-color: #888;
}

.ts-skin-selected[b-6mfjgp36os] {
    border-color: #ffc107 !important;
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.5);
}

.ts-skin-1[b-6mfjgp36os] { background-color: #FFE0BD; }
.ts-skin-2[b-6mfjgp36os] { background-color: #F5C7A0; }
.ts-skin-3[b-6mfjgp36os] { background-color: #D4A373; }
.ts-skin-4[b-6mfjgp36os] { background-color: #A0785A; }
.ts-skin-5[b-6mfjgp36os] { background-color: #6B4423; }

.ts-hair-selector[b-6mfjgp36os] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    justify-items: center;
    max-width: 360px;
    margin: 0 auto;
}

.ts-hair-option[b-6mfjgp36os] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    border: 2px solid #333;
    border-radius: 8px;
    cursor: pointer;
    background: rgba(20, 20, 40, 0.6);
    transition: border-color 0.2s, transform 0.15s;
}

.ts-hair-option:hover[b-6mfjgp36os] {
    border-color: #888;
    transform: scale(1.05);
}

.ts-hair-selected[b-6mfjgp36os] {
    border-color: #ffc107 !important;
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.4);
    background: rgba(255, 193, 7, 0.08);
}

.ts-hair-preview[b-6mfjgp36os] {
    width: 48px;
    height: 48px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    image-rendering: pixelated;
}

.ts-hair-label[b-6mfjgp36os] {
    font-size: 10px;
    color: #aaa;
    margin-top: 4px;
    text-transform: capitalize;
}

/* ===== QUICK EQUIP BELT BAR ===== */
.ts-belt-bar[b-6mfjgp36os] {
    display: flex;
    flex-direction: row;
    gap: 4px;
    justify-content: center;
    padding: 4px 8px;
    background: rgba(0,0,0,0.6);
    border-radius: 6px;
    margin: 4px auto;
    z-index: 50;
}

.ts-belt-slot[b-6mfjgp36os] {
    width: 32px;
    height: 32px;
    border: 1px solid #555;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: border-color 0.15s;
}

.ts-belt-slot:hover[b-6mfjgp36os] {
    border-color: #ffc107;
}

.ts-belt-slot.filled[b-6mfjgp36os] {
    border-color: #888;
    background: rgba(30, 30, 50, 0.8);
}

.ts-belt-key[b-6mfjgp36os] {
    position: absolute;
    top: -1px;
    left: 2px;
    font-size: 8px;
    color: #aaa;
    font-weight: bold;
    z-index: 1;
}

.ts-belt-icon[b-6mfjgp36os] {
    font-size: 16px;
    line-height: 1;
}

.ts-tooltip-belt-assign[b-6mfjgp36os] {
    display: flex;
    gap: 3px;
    align-items: center;
    margin-top: 4px;
}

.ts-btn-belt[b-6mfjgp36os] {
    width: 20px;
    height: 20px;
    font-size: 10px;
    padding: 0;
    border: 1px solid #666;
    background: #2a2a3e;
    color: #ffc107;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ts-btn-belt:hover[b-6mfjgp36os] {
    background: #3a3a5e;
    border-color: #ffc107;
}

/* ===== NPC Idle Breathing — subtle scale pulse ===== */
.ts-npc-sprite[b-6mfjgp36os], .ts-npc-icon[b-6mfjgp36os] {
    animation: ts-npc-breathe-b-6mfjgp36os 3s ease-in-out infinite;
}
@keyframes ts-npc-breathe-b-6mfjgp36os {
    0%, 100% { transform: scaleY(1.0); }
    50% { transform: scaleY(1.02); }
}
/* Stagger animation start per NPC so they don't all breathe in sync */
.ts-npc:nth-child(2n) .ts-npc-sprite[b-6mfjgp36os],
.ts-npc:nth-child(2n) .ts-npc-icon[b-6mfjgp36os] { animation-delay: -1.5s; }
.ts-npc:nth-child(3n) .ts-npc-sprite[b-6mfjgp36os],
.ts-npc:nth-child(3n) .ts-npc-icon[b-6mfjgp36os] { animation-delay: -0.8s; }
.ts-npc:nth-child(5n) .ts-npc-sprite[b-6mfjgp36os],
.ts-npc:nth-child(5n) .ts-npc-icon[b-6mfjgp36os] { animation-delay: -2.1s; }

/* ===== Animal Idle Bob ===== */
.ts-wild-animal[b-6mfjgp36os] {
    animation: ts-animal-idle-b-6mfjgp36os 2.5s ease-in-out infinite;
}
@keyframes ts-animal-idle-b-6mfjgp36os {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}
.ts-wild-animal:nth-child(2n)[b-6mfjgp36os] { animation-delay: -1.2s; }
.ts-wild-animal:nth-child(3n)[b-6mfjgp36os] { animation-delay: -0.6s; }

/* ===== Resource Node Glow for Nearby Harvestable ===== */
.ts-node-nearby:not(.ts-node-depleted) .ts-node-icon[b-6mfjgp36os],
.ts-node-nearby:not(.ts-node-depleted) .ts-node-sprite[b-6mfjgp36os] {
    animation: ts-resource-pulse-b-6mfjgp36os 2s ease-in-out infinite;
}
@keyframes ts-resource-pulse-b-6mfjgp36os {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)); }
    50% { filter: brightness(1.3) drop-shadow(0 0 4px rgba(255, 255, 200, 0.5)); }
}

/* ===== Encounter Discovery Pulse — Ember's "unfound treasure" ===== */
.ts-encounter:not(.ts-encounter-searched)[b-6mfjgp36os] {
    animation: ts-discover-pulse-b-6mfjgp36os 3s ease-in-out infinite;
}
@keyframes ts-discover-pulse-b-6mfjgp36os {
    0%, 100% { filter: drop-shadow(0 0 0px transparent); }
    50% { filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.4)); }
}

/* ===== Fire / Campfire Flicker Effect ===== */
.ts-fire-encounter .ts-encounter-icon[b-6mfjgp36os],
.ts-fire-encounter .ts-encounter-sprite[b-6mfjgp36os] {
    animation: ts-fire-flicker-b-6mfjgp36os 0.4s ease-in-out infinite alternate;
}
@keyframes ts-fire-flicker-b-6mfjgp36os {
    0% { filter: brightness(0.9); transform: scale(0.98); }
    100% { filter: brightness(1.2); transform: scale(1.02); }
}

/* ===== DUNGEON DEPTH VISUAL PROGRESSION ===== */
/* Darker, colder, more dangerous as you go deeper */
.ts-depth-shallow .ts-world-layer[b-6mfjgp36os] {
    filter: brightness(1.05) saturate(1.1);
}
.ts-depth-mid .ts-world-layer[b-6mfjgp36os] {
    filter: brightness(0.85) saturate(0.85) hue-rotate(-10deg);
}
.ts-depth-deep .ts-world-layer[b-6mfjgp36os] {
    filter: brightness(0.65) saturate(0.6) hue-rotate(-25deg);
}

/* Override vignette for depth — deeper = heavier vignette */
.ts-depth-mid[b-6mfjgp36os]::after {
    background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.55) 100%);
}
.ts-depth-deep[b-6mfjgp36os]::after {
    background: radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,0.7) 100%);
}

/* ===== HUD DANGER INDICATOR ===== */
.ts-hud-danger[b-6mfjgp36os] {
    border-left: 2px solid #ff4444;
    padding-left: 6px;
}
.ts-depth-deep ~ .ts-hud .ts-hud-danger .ts-hud-val[b-6mfjgp36os] {
    color: #ff4444;
    font-weight: bold;
}

/* ===== ENVIRONMENTAL BREATHING ===== */
/* World feels alive — subtle tile transition */
.ts-tile[b-6mfjgp36os] {
    transition: filter 2s ease-in-out;
}

/* Torch/fire encounters glow */
.ts-encounter-icon[b-6mfjgp36os] {
    transition: filter 0.5s;
}

/* ===== DAMAGE CHROMATIC ABERRATION FLASH ===== */
.ts-damage-flash .ts-world-layer[b-6mfjgp36os] {
    animation: ts-chromatic-b-6mfjgp36os 0.15s ease-out;
}
@keyframes ts-chromatic-b-6mfjgp36os {
    0% { filter: hue-rotate(15deg) saturate(1.5) brightness(1.3); }
    100% { filter: none; }
}

/* ===== LOOT PICKUP FLOAT ANIMATION ===== */
.ts-loot-pickup[b-6mfjgp36os] {
    animation: ts-float-up-b-6mfjgp36os 0.6s ease-out forwards;
}
@keyframes ts-float-up-b-6mfjgp36os {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-30px) scale(0.5); opacity: 0; }
}

/* ===== WATER RIPPLE ANIMATION (Day 5) ===== */
.ts-tile-water-anim[b-6mfjgp36os] {
    animation: ts-water-ripple-b-6mfjgp36os 3s ease-in-out infinite;
}
@keyframes ts-water-ripple-b-6mfjgp36os {
    0%, 100% { filter: brightness(1.0) hue-rotate(0deg); }
    33% { filter: brightness(1.05) hue-rotate(3deg); }
    66% { filter: brightness(0.95) hue-rotate(-3deg); }
}
/* Stagger water tiles so they don't all ripple in sync */
.ts-tile-water-anim:nth-child(3n)[b-6mfjgp36os] { animation-delay: -1s; }
.ts-tile-water-anim:nth-child(5n)[b-6mfjgp36os] { animation-delay: -2s; }

/* ===== ZONE TRANSITION FADE (Day 5) ===== */
.ts-zone-fade[b-6mfjgp36os] {
    opacity: 0;
    transition: opacity 0.15s ease-in;
}
.ts-zone-appear[b-6mfjgp36os] {
    opacity: 1;
    transition: opacity 0.2s ease-out;
}

/* ===== AMBIENT PARTICLES (Day 5) ===== */
.ts-ambient-particles[b-6mfjgp36os] {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 44; /* above world, below vignette (45) */
    overflow: hidden;
}

/* Fireflies at night in forest/grassland */
.ts-night .ts-ambient-particles[b-6mfjgp36os]::before,
.ts-night .ts-ambient-particles[b-6mfjgp36os]::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: #ffff88;
    border-radius: 50%;
    pointer-events: none;
}
.ts-night .ts-ambient-particles[b-6mfjgp36os]::before {
    animation: ts-firefly-b-6mfjgp36os 4s ease-in-out infinite;
    top: 30%;
    left: 40%;
}
.ts-night .ts-ambient-particles[b-6mfjgp36os]::after {
    animation: ts-firefly-b-6mfjgp36os 5s ease-in-out infinite 1.5s;
    top: 55%;
    left: 70%;
}
@keyframes ts-firefly-b-6mfjgp36os {
    0%, 100% { opacity: 0; transform: translate(0, 0); }
    25% { opacity: 0.6; transform: translate(10px, -8px); }
    50% { opacity: 0.8; transform: translate(20px, -15px); }
    75% { opacity: 0.4; transform: translate(5px, -20px); }
}

/* Dust motes in caves */
.ts-cave .ts-ambient-particles[b-6mfjgp36os]::before,
.ts-cave .ts-ambient-particles[b-6mfjgp36os]::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(180, 180, 180, 0.5);
    border-radius: 50%;
    pointer-events: none;
}
.ts-cave .ts-ambient-particles[b-6mfjgp36os]::before {
    animation: ts-dust-mote-b-6mfjgp36os 6s linear infinite;
    top: 15%;
    left: 25%;
}
.ts-cave .ts-ambient-particles[b-6mfjgp36os]::after {
    animation: ts-dust-mote-b-6mfjgp36os 8s linear infinite 2s;
    top: 40%;
    left: 60%;
}
@keyframes ts-dust-mote-b-6mfjgp36os {
    0% { opacity: 0; transform: translate(0, 0); }
    20% { opacity: 0.5; }
    80% { opacity: 0.3; }
    100% { opacity: 0; transform: translate(-10px, 60px); }
}

/* ===== DAY 6: EMOJI-FREE STYLED REPLACEMENTS ===== */

/* Resource node colored dots (replaces emoji fallback) */
.ts-resource-dot[b-6mfjgp36os] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.3);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
/* Foraging */
.ts-resource-berries[b-6mfjgp36os] { background: #DC143C; }
.ts-resource-mushrooms[b-6mfjgp36os] { background: #DAA520; }
.ts-resource-fish[b-6mfjgp36os] { background: #4169E1; }
.ts-resource-meat[b-6mfjgp36os] { background: #CD5C5C; }
.ts-resource-crops[b-6mfjgp36os] { background: #228B22; }
.ts-resource-freshwater[b-6mfjgp36os] { background: #87CEEB; }
.ts-resource-purifiedwater[b-6mfjgp36os] { background: #ADD8E6; }
/* Wood */
.ts-resource-oak[b-6mfjgp36os] { background: #8B4513; }
.ts-resource-pine[b-6mfjgp36os] { background: #6B8E23; }
.ts-resource-birch[b-6mfjgp36os] { background: #F5DEB3; }
.ts-resource-rarewood[b-6mfjgp36os] { background: #800080; }
/* Stone & Ore */
.ts-resource-granite[b-6mfjgp36os] { background: #808080; }
.ts-resource-marble[b-6mfjgp36os] { background: #E8E8E8; }
.ts-resource-limestone[b-6mfjgp36os] { background: #C4B896; }
.ts-resource-iron[b-6mfjgp36os] { background: #696969; }
.ts-resource-copper[b-6mfjgp36os] { background: #B87333; }
.ts-resource-gold[b-6mfjgp36os] { background: #FFD700; }
.ts-resource-gems[b-6mfjgp36os] { background: #9400D3; }
/* Botanical */
.ts-resource-herbs[b-6mfjgp36os] { background: #228B22; }
.ts-resource-flowers[b-6mfjgp36os] { background: #FF69B4; }
.ts-resource-seeds[b-6mfjgp36os] { background: #DEB887; }
.ts-resource-cotton[b-6mfjgp36os] { background: #FFFAF0; }
.ts-resource-wool[b-6mfjgp36os] { background: #F0E68C; }
.ts-resource-silk[b-6mfjgp36os] { background: #EEE8AA; }
/* Special */
.ts-resource-spiritenergy[b-6mfjgp36os] { background: #7B68EE; }

/* Animal colored dot (replaces emoji) */
.ts-animal-dot[b-6mfjgp36os] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.3);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    margin: 0 auto;
}

.ts-animal-sprite[b-6mfjgp36os] {
    image-rendering: pixelated;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    margin: 0 auto;
}

/* Stun stars - text styled instead of emoji */
.ts-stun-stars[b-6mfjgp36os] {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 900;
    color: #FFD700;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.8);
    animation: ts-stun-spin-b-6mfjgp36os 0.6s linear infinite;
    letter-spacing: 2px;
}
@keyframes ts-stun-spin-b-6mfjgp36os {
    0% { transform: translateX(-50%) rotate(0deg); }
    100% { transform: translateX(-50%) rotate(360deg); }
}

/* Sleep indicator - text styled */
.ts-animal-zzz[b-6mfjgp36os] {
    position: absolute;
    top: -18px;
    right: -8px;
    font-size: 10px;
    font-weight: 700;
    color: #90CAF9;
    text-shadow: 0 0 4px rgba(144, 202, 249, 0.6);
    animation: ts-zzz-float-b-6mfjgp36os 2s ease-in-out infinite;
}

/* Alert mark - text styled */
.ts-animal-alert-mark[b-6mfjgp36os] {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    font-weight: 900;
    color: #FF5722;
    text-shadow: 0 0 6px rgba(255, 87, 34, 0.8);
    animation: ts-alert-pop-b-6mfjgp36os 0.4s ease-out;
}

/* Enemy windup indicator - text styled */
.ts-enemy-windup[b-6mfjgp36os] {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 900;
    color: #FFC107;
    text-shadow: 0 0 6px rgba(255, 193, 7, 0.8);
    animation: ts-windup-pulse-b-6mfjgp36os 0.5s ease-in-out infinite;
}
@keyframes ts-windup-pulse-b-6mfjgp36os {
    0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
    50% { opacity: 0.6; transform: translateX(-50%) scale(1.2); }
}

/* NPC dot (replaces emoji fallback) */
.ts-npc-dot[b-6mfjgp36os] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #7E57C2;
    border: 2px solid rgba(255, 255, 255, 0.3);
    margin: 0 auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.ts-npc-type-vendor .ts-npc-dot[b-6mfjgp36os] { background: #ffc107; }
.ts-npc-type-quest .ts-npc-dot[b-6mfjgp36os] { background: #4fc3f7; }
.ts-npc-type-trainer .ts-npc-dot[b-6mfjgp36os] { background: #81c784; }
.ts-npc-type-guard .ts-npc-dot[b-6mfjgp36os] { background: #ef5350; }
.ts-npc-type-wanderer .ts-npc-dot[b-6mfjgp36os] { background: #bdbdbd; }

/* NPC sleep indicator - text styled */
.ts-npc-sleep-icon[b-6mfjgp36os] {
    position: absolute;
    top: -14px;
    right: -6px;
    font-size: 9px;
    font-weight: 700;
    color: #90CAF9;
    text-shadow: 0 0 4px rgba(144, 202, 249, 0.5);
    background: rgba(0, 0, 0, 0.5);
    padding: 1px 4px;
    border-radius: 4px;
}

/* Pet dot (replaces emoji) */
.ts-pet-dot[b-6mfjgp36os] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    margin: 0 auto;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
}

/* Spirit animal dot (replaces emoji) */
.ts-spirit-dot[b-6mfjgp36os] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    margin: 0 auto;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
    animation: ts-spirit-glow-b-6mfjgp36os 2s ease-in-out infinite;
}
@keyframes ts-spirit-glow-b-6mfjgp36os {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4)); }
    50% { filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.7)); }
}

/* Encounter dot (replaces emoji fallback) */
.ts-encounter-dot[b-6mfjgp36os] {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: #78909C;
    border: 2px solid rgba(255, 255, 255, 0.2);
    margin: 0 auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    animation: ts-enc-pulse-b-6mfjgp36os 3s ease-in-out infinite;
}
.ts-encounter.rarity-rare .ts-encounter-dot[b-6mfjgp36os] { background: #4fc3f7; filter: drop-shadow(0 0 6px rgba(79, 195, 247, 0.5)); }
.ts-encounter.rarity-epic .ts-encounter-dot[b-6mfjgp36os] { background: #ffd54f; filter: drop-shadow(0 0 8px rgba(255, 213, 79, 0.5)); }

/* Portal dot (replaces emoji) */
.ts-portal-dot[b-6mfjgp36os] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle, #7C4DFF 0%, #311B92 100%);
    border: 2px solid rgba(124, 77, 255, 0.5);
    margin: 0 auto;
    animation: ts-portal-spin-b-6mfjgp36os 3s linear infinite;
    filter: drop-shadow(0 0 8px rgba(124, 77, 255, 0.6));
}
@keyframes ts-portal-spin-b-6mfjgp36os {
    0% { box-shadow: 0 0 8px rgba(124, 77, 255, 0.4); }
    50% { box-shadow: 0 0 16px rgba(124, 77, 255, 0.8); }
    100% { box-shadow: 0 0 8px rgba(124, 77, 255, 0.4); }
}

/* Ground loot dot (replaces emoji) */
.ts-loot-dot[b-6mfjgp36os] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FFD700;
    border: 1px solid rgba(0, 0, 0, 0.3);
    animation: ts-loot-bob-b-6mfjgp36os 2s ease-in-out infinite;
}
.rarity-common .ts-loot-dot[b-6mfjgp36os] { background: #BDBDBD; }
.rarity-rare .ts-loot-dot[b-6mfjgp36os] { background: #4fc3f7; }
.rarity-epic .ts-loot-dot[b-6mfjgp36os] { background: #ffd54f; }

/* Farm stage dots (replaces emoji) */
.ts-farm-dot[b-6mfjgp36os] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.3);
    margin: 0 auto;
}
.ts-farm-stage-empty[b-6mfjgp36os] { background: #795548; }
.ts-farm-stage-planted[b-6mfjgp36os] { background: #4CAF50; opacity: 0.5; }
.ts-farm-stage-growing[b-6mfjgp36os] { background: #66BB6A; }
.ts-farm-stage-harvestable[b-6mfjgp36os] { background: #FFD700; animation: ts-farm-ready-pulse-b-6mfjgp36os 1.5s ease-in-out infinite; }
.ts-farm-stage-dead[b-6mfjgp36os] { background: #555; }
@keyframes ts-farm-ready-pulse-b-6mfjgp36os {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.4); }
}

/* Building dot (replaces emoji) */
.ts-building-dot[b-6mfjgp36os] {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: #8D6E63;
    border: 2px solid rgba(0, 0, 0, 0.3);
    margin: 0 auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

/* Ambient decoration dot (replaces emoji fallback) */
.ts-ambient-dot[b-6mfjgp36os] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
}

/* Fishing dot (replaces emoji) */
.ts-fishing-dot[b-6mfjgp36os] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #4169E1;
    border: 2px solid rgba(255, 255, 255, 0.3);
    margin: 0 auto 8px;
    animation: ts-bobber-float-b-6mfjgp36os 1.5s ease-in-out infinite;
}
.ts-fishing-alert-dot[b-6mfjgp36os] {
    background: #FF5722;
    animation: ts-fishing-alert-blink-b-6mfjgp36os 0.3s ease-in-out infinite alternate;
}
@keyframes ts-bobber-float-b-6mfjgp36os {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
@keyframes ts-fishing-alert-blink-b-6mfjgp36os {
    0% { opacity: 0.5; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1.2); }
}

/* Death X icon (replaces skull emoji) */
.ts-death-x-icon[b-6mfjgp36os] {
    font-size: 64px;
    font-weight: 900;
    color: #B71C1C;
    text-shadow: 0 0 20px rgba(183, 28, 28, 0.8);
    line-height: 1;
}

/* Time of day dots (replaces emoji) */
.ts-time-dot[b-6mfjgp36os] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 4px;
}
.ts-time-night[b-6mfjgp36os] { background: #5C6BC0; box-shadow: 0 0 4px rgba(92, 107, 192, 0.6); }
.ts-time-dawn[b-6mfjgp36os] { background: #FFB74D; box-shadow: 0 0 4px rgba(255, 183, 77, 0.6); }
.ts-time-day[b-6mfjgp36os] { background: #FFD54F; box-shadow: 0 0 4px rgba(255, 213, 79, 0.8); }
.ts-time-dusk[b-6mfjgp36os] { background: #FF8A65; box-shadow: 0 0 4px rgba(255, 138, 101, 0.6); }

/* Save menu dot (replaces floppy emoji) */
.ts-save-dot[b-6mfjgp36os] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: #42A5F5;
    border: 2px solid rgba(255, 255, 255, 0.3);
    margin: 0 auto;
}

/* ===== STANDARDIZED ENTITY SIZES ===== */
/* Resource nodes: 32px (reduced from 40) */
.ts-resource-node[b-6mfjgp36os] { width: 32px !important; height: 32px !important; }
/* Animals: 40px (standardize) */
.ts-wild-animal[b-6mfjgp36os] { width: 40px; height: 40px; }

/* ===== TUTORIAL POPUP ===== */
.ts-tutorial-popup[b-6mfjgp36os] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 400;
    background: linear-gradient(135deg, rgba(10, 8, 25, 0.95), rgba(20, 15, 40, 0.95));
    border: 2px solid rgba(100, 180, 255, 0.5);
    border-radius: 12px;
    padding: 24px 32px;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 0 40px rgba(100, 180, 255, 0.2);
    animation: ts-tutorial-fadein-b-6mfjgp36os 0.5s ease;
}

.ts-tutorial-title[b-6mfjgp36os] {
    font-size: 20px;
    font-weight: 700;
    color: #64b5f6;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.ts-tutorial-controls[b-6mfjgp36os] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: #ccc;
}

.ts-tutorial-controls b[b-6mfjgp36os] {
    color: #ffd700;
    font-weight: 700;
    min-width: 80px;
    display: inline-block;
}

@keyframes ts-tutorial-fadein-b-6mfjgp36os {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ===== QUEST TRACKER (top-right HUD) ===== */
.ts-quest-tracker[b-6mfjgp36os] {
    position: fixed;
    top: 50px;
    right: 10px;
    z-index: 200;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(10, 8, 25, 0.85);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    max-width: 260px;
    pointer-events: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.ts-quest-tracker-icon[b-6mfjgp36os] {
    font-size: 18px;
    flex-shrink: 0;
}

.ts-quest-tracker-info[b-6mfjgp36os] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ts-quest-tracker-title[b-6mfjgp36os] {
    font-size: 11px;
    font-weight: 700;
    color: #ffd700;
    letter-spacing: 0.5px;
}

.ts-quest-tracker-desc[b-6mfjgp36os] {
    font-size: 10px;
    color: #aaa;
    line-height: 1.3;
}
/* /Components/Pages/TerraStakeLeaderboard.razor.rz.scp.css */
.leaderboard-container[b-rve05jmums] {
    max-width: 1100px;
    margin: 2rem auto;
    padding: 1.5rem;
}

.leaderboard-header[b-rve05jmums] {
    text-align: center;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, rgba(120, 40, 237, 0.1), rgba(255, 215, 0, 0.1));
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.leaderboard-header h1[b-rve05jmums] {
    font-size: 2.5rem;
    margin: 0 0 0.5rem;
}

.leaderboard-subtitle[b-rve05jmums] {
    color: #aaa;
    font-size: 0.95rem;
}

.leaderboard-info[b-rve05jmums] {
    text-align: center;
    color: #bbb;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.leaderboard-table[b-rve05jmums] {
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #ffd700;
    border-radius: 6px;
    overflow: hidden;
}

.leaderboard-header-row[b-rve05jmums],
.leaderboard-row[b-rve05jmums] {
    display: grid;
    grid-template-columns: 60px 150px 70px 90px 60px 80px 80px 60px;
    padding: 1rem;
    align-items: center;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.leaderboard-header-row[b-rve05jmums] {
    background: rgba(255, 215, 0, 0.1);
    font-weight: 700;
    color: #ffd700;
    font-size: 0.9rem;
}

.leaderboard-row:hover[b-rve05jmums] {
    background: rgba(255, 215, 0, 0.05);
}

.rank-badge[b-rve05jmums] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 700;
    text-align: center;
    width: 45px;
}

.rank-gold[b-rve05jmums] {
    background: rgba(255, 215, 0, 0.3);
    color: #ffd700;
    border: 1px solid #ffd700;
}

.rank-silver[b-rve05jmums] {
    background: rgba(192, 192, 192, 0.2);
    color: #c0c0c0;
    border: 1px solid #c0c0c0;
}

.rank-bronze[b-rve05jmums] {
    background: rgba(205, 127, 50, 0.2);
    color: #cd7f32;
    border: 1px solid #cd7f32;
}

.rank-normal[b-rve05jmums] {
    background: transparent;
    color: #aaa;
}

.leaderboard-loading[b-rve05jmums],
.leaderboard-empty[b-rve05jmums] {
    text-align: center;
    padding: 3rem;
    color: #aaa;
}

@media (max-width: 768px) {
    .leaderboard-header-row[b-rve05jmums],
    .leaderboard-row[b-rve05jmums] {
        grid-template-columns: 40px 100px 60px 60px;
    }

    .playtime[b-rve05jmums], .zones[b-rve05jmums], .buildings[b-rve05jmums], .resources[b-rve05jmums], .level[b-rve05jmums] {
        display: none;
    }
}
/* /Components/Pages/Tools.razor.rz.scp.css */
.tools-page[b-6s7sx5nwx5] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 60px;
}

/* ── Password Gate ───────────────────────────────── */
.tools-gate[b-6s7sx5nwx5] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.tools-gate-card[b-6s7sx5nwx5] {
    background: var(--lh-surface);
    border: 1px solid var(--lh-border);
    border-radius: 20px;
    padding: 48px 40px;
    text-align: center;
    max-width: 400px;
    width: 100%;
}

.gate-icon[b-6s7sx5nwx5] {
    font-size: 3em;
    margin-bottom: 16px;
}

.tools-gate-card h2[b-6s7sx5nwx5] {
    font-size: 1.6em;
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
}

.tools-gate-card > p[b-6s7sx5nwx5] {
    color: #888;
    margin: 0 0 24px;
}

.gate-form[b-6s7sx5nwx5] {
    display: flex;
    gap: 8px;
}

.gate-input[b-6s7sx5nwx5] {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--lh-border);
    color: var(--lh-text);
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 1em;
    outline: none;
    transition: border-color 0.2s;
}

.gate-input:focus[b-6s7sx5nwx5] {
    border-color: var(--lh-gold);
}

.gate-btn[b-6s7sx5nwx5] {
    white-space: nowrap;
}

.gate-error[b-6s7sx5nwx5] {
    color: var(--lh-red);
    margin: 12px 0 0;
    font-size: 0.9em;
    font-weight: 600;
}

/* ── Tools Header ────────────────────────────────── */
.tools-header[b-6s7sx5nwx5] {
    text-align: center;
    margin-bottom: 48px;
}

.tools-header h1[b-6s7sx5nwx5] {
    font-size: 3em;
    font-weight: 900;
    margin: 0;
    letter-spacing: -1px;
}

.tools-subtitle[b-6s7sx5nwx5] {
    color: #888;
    font-size: 1.1em;
    margin: 8px 0 0;
}

/* ── Tool Cards ──────────────────────────────────── */
.tools-grid[b-6s7sx5nwx5] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 768px) {
    .tools-grid[b-6s7sx5nwx5] { grid-template-columns: 1fr; }
}

.tool-card[b-6s7sx5nwx5] {
    position: relative;
    background: var(--lh-surface);
    border: 1px solid var(--lh-border);
    border-radius: 20px;
    padding: 40px 32px;
    text-decoration: none;
    color: var(--lh-text);
    overflow: hidden;
    transition: all 0.4s ease;
}

.tool-card:hover[b-6s7sx5nwx5] {
    transform: translateY(-6px);
    border-color: rgba(255, 193, 7, 0.3);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 193, 7, 0.08);
    color: var(--lh-text);
}

.tool-card-accent[b-6s7sx5nwx5] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.accent-gold[b-6s7sx5nwx5] { background: linear-gradient(90deg, #ffc107, #ff9800); }
.accent-purple[b-6s7sx5nwx5] { background: linear-gradient(90deg, #7c3aed, #a78bfa); }

.tool-icon[b-6s7sx5nwx5] {
    font-size: 3em;
    margin-bottom: 16px;
}

.tool-card h2[b-6s7sx5nwx5] {
    font-size: 1.6em;
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
}

.tool-card p[b-6s7sx5nwx5] {
    color: #888;
    font-size: 0.95em;
    line-height: 1.5;
    margin: 0 0 16px;
}

.tool-stats[b-6s7sx5nwx5] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.tool-stats span[b-6s7sx5nwx5] {
    padding: 4px 10px;
    background: rgba(255, 193, 7, 0.08);
    border: 1px solid rgba(255, 193, 7, 0.15);
    border-radius: 6px;
    font-size: 0.8em;
    color: var(--lh-gold);
    font-weight: 600;
}

.tool-card .lh-btn[b-6s7sx5nwx5] {
    display: inline-flex;
}