/* Custom CSS for RPG Idle Kingdom */

/* Medieval Fantasy Theme */
body {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    font-family: 'MedievalSharp', cursive;
}

/* Loading Screen */
#loadingScreen {
    transition: opacity 0.5s ease-out;
}

/* --- NEW PLAYER HUD --- */
#playerHud {
    background: linear-gradient(180deg, #854d0e 0%, #a16207 100%);
    border-bottom: 4px solid #422006;
}

#playerHud #hpBar, #enemyHPBar {
    background: linear-gradient(90deg, #dc2626 0%, #ef4444 100%);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
    position: relative;
    overflow: hidden;
}

#playerHud #xpBar {
    background: linear-gradient(90deg, #2563eb 0%, #3b82f6 100%);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
    position: relative;
    overflow: hidden;
}

#playerHud #hpBar::after, #playerHud #xpBar::after, .bar-shine-effect {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(255,255,255,0.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, transparent 75%, transparent);
    background-size: 20px 20px;
    animation: bar-shine 2s linear infinite;
}

@keyframes bar-shine {
    from { background-position: 0 0; }
    to { background-position: -20px 0; }
}

/* Glowing Golden UI Elements */
.tab-btn.active {
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.6);
    text-shadow: 0 0 5px rgba(245, 158, 11, 0.8);
}

/* --- BATTLE ARENA --- */
#battleArena {
    background-image: url('https://www.transparenttextures.com/patterns/old-wall.png'), linear-gradient(135deg, #fdf6e3, #f7d9a3);
    background-blend-mode: overlay;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}

#enemySprite {
    filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.3));
}

#enemySprite.enemy-enter {
    animation: enemy-enter 0.5s ease-out;
}
#enemySprite.enemy-exit {
    animation: enemy-exit 0.5s ease-in;
}
@keyframes enemy-enter {
    from { opacity: 0; transform: scale(0.5) translateY(50px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes enemy-exit {
    from { opacity: 1; transform: scale(1) rotate(0deg); }
    to { opacity: 0; transform: scale(0) rotate(720deg); }
}

/* --- COMBAT LOG REMOVED: clean up styles safely (kept basic colors for retrocompatibility) --- */
.log-entry {
    display: none;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-bottom: 0.25rem;
}

.log-entry-icon {
    margin-right: 0.75rem;
    font-size: 1.25em;
}

.combat-log-player { color: #15803d; }
.combat-log-enemy { color: #b45309; }
.combat-log-reward { color: #b45309; background-color: rgba(251, 191, 36, 0.1); border-left: 3px solid #fbbf24; }
.combat-log-error { color: #b91c1c; background-color: rgba(239, 68, 68, 0.1); border-left: 3px solid #ef4444; }
.combat-log-system { color: #4b5563; font-style: italic; }

/* Combat Log Toggle */
#combatLogToggle {
    transition: all 0.3s ease-in-out;
}

#combatLogToggle:hover {
    background: linear-gradient(135deg, rgba(254, 243, 199, 0.3), rgba(253, 230, 138, 0.3));
    border-radius: 0.5rem;
    padding: 0.5rem;
    margin: -0.5rem;
}

#combatLogArrow {
    transition: transform 0.3s ease-in-out;
}

#combatLogArrow.expanded {
    transform: rotate(180deg);
}

#combatLogContainer {
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

#combatLogContainer.show {
    animation: slideDown 0.3s ease-in-out;
}

#combatLogContainer.hide {
    animation: slideUp 0.3s ease-in-out;
}

@keyframes slideDown {
    from {
        max-height: 0;
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        max-height: 300px;
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        max-height: 300px;
        opacity: 1;
        transform: translateY(0);
    }
    to {
        max-height: 0;
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* Enemy Sprite Animations */
.enemy-sprite.damaged {
    animation: shake 0.3s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Status Effect Glowing */
.status-effect {
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from { box-shadow: 0 0 5px currentColor; }
    to { box-shadow: 0 0 20px currentColor, 0 0 30px currentColor; }
}

/* Skill Tree Connections */
.skill-connection {
    position: absolute;
    background: linear-gradient(90deg, #f59e0b, #d97706);
    height: 2px;
    z-index: 1;
}

/* Item Rarity Colors */
.item-common {
    border-color: #6b7280;
    color: #6b7280;
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
}

.item-rare {
    border-color: #3b82f6;
    color: #3b82f6;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}

.item-epic {
    border-color: #d97706;
    color: #d97706;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    box-shadow: 0 0 12px rgba(217, 119, 6, 0.4);
}

.item-crazy {
    border-color: #9333ea;
    color: #9333ea;
    background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
    box-shadow: 0 0 15px rgba(147, 51, 234, 0.5);
    animation: crazy-glow 2s ease-in-out infinite alternate;
    will-change: transform, box-shadow; /* prevent layout shift */
    transform-origin: center center;    /* avoid affecting scroll */
}

@keyframes crazy-glow {
    from {
        box-shadow: 0 0 15px rgba(147, 51, 234, 0.5);
        transform: translateZ(0) scale(1); /* composite-only */
    }
    to {
        box-shadow: 0 0 25px rgba(147, 51, 234, 0.8);
        transform: translateZ(0) scale(1.02);
    }
}

/* Inventory Items */
.inventory-item {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 2px solid #d97706;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.inventory-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.item-icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

.item-name {
    font-size: 0.75rem;
    font-weight: bold;
    margin-bottom: 4px;
    line-height: 1.1;
}

.item-stats {
    font-size: 0.65rem;
    color: #059669;
    margin-bottom: 8px;
}

.item-quantity {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: bold;
}

/* Filter Buttons */
.filter-btn {
    background: #f59e0b;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.filter-btn:hover {
    background: #d97706;
    transform: translateY(-1px);
}

.filter-btn.active {
    background: #059669;
    box-shadow: 0 0 8px rgba(5, 150, 105, 0.3);
}

/* Loading Animation */
.loading-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Combat Timer */
.combat-timer {
    background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981);
    background-size: 200% 100%;
    animation: timer-gradient 3s linear infinite;
}

@keyframes timer-gradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Skill Cooldown Overlay */
.skill-cooldown {
    position: relative;
}

.skill-cooldown::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    border-radius: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}

/* Inventory Item Hover Effects */
.inventory-item {
    transition: all 0.2s ease-in-out;
}

.inventory-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Shop Item Pulse */
.shop-item-new {
    animation: shop-pulse 2s ease-in-out infinite;
}

@keyframes shop-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Responsive Design Enhancements */
@media (max-width: 768px) {
    .tab-btn {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }
    
    #combatLog {
        height: 200px;
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #fdf6e3;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #d97706;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #b45309;
}

/* Inline message bar styles */
#messageBarInner.info { border-color: #2563eb; color: #1e3a8a; background: #dbeafe; }
#messageBarInner.success { border-color: #16a34a; color: #065f46; background: #d1fae5; }
#messageBarInner.error { border-color: #dc2626; color: #7f1d1d; background: #fee2e2; }
#messageBarInner.warning { border-color: #f59e0b; color: #7c2d12; background: #ffedd5; }

/* Tutorial overlay adjustments */
#tutorialOverlay * { user-select: none; }
#tutorialTooltip { z-index: 2147483001; }
#tutorialSpotlight { z-index: 2147483000; border-radius: 12px; }
#tutorialPrev, #tutorialNext, #tutorialSkip { position: relative; z-index: 2147483002; }

/* Focus States for Accessibility */
button:focus,
input:focus {
    outline: 2px solid #f59e0b;
    outline-offset: 2px;
}

/* Combat Input Enhancement */
#combatInput {
    font-weight: bold;
    text-transform: uppercase;
}

#combatInput:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

#combatInput.input-error {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
    animation: shake 0.3s ease-in-out;
}

#combatInput.input-error::placeholder {
    color: #dc2626;
    font-weight: 900;
    text-shadow: 0 0 5px rgba(220, 38, 38, 0.5);
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Known Words Display */
.known-word {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #d97706;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
}

.known-word:hover {
    transform: scale(1.05);
}

.known-word.on-cooldown {
    opacity: 0.5;
    background: #6b7280;
    color: #d1d5db;
}

/* Equipment Slots */
.equipment-slot {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 3px solid #d97706;
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    position: relative;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.equipment-slot:hover {
    border-color: #f59e0b;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
    transform: translateY(-2px);
}

.equipment-slot.equipped {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border-color: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.slot-icon {
    font-size: 2rem;
    margin-bottom: 4px;
}

.slot-label {
    font-size: 0.75rem;
    font-weight: bold;
    color: #92400e;
    margin-bottom: 4px;
}

.equipped-item {
    font-size: 0.7rem;
    color: #451a03;
    font-weight: 600;
    text-align: center;
    line-height: 1.1;
}

.lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}

.lock-overlay::before {
    content: '🔒';
    font-size: 1.5rem;
    margin-bottom: 4px;
}

/* Skill Tree Node */
/* legacy node style replaced by enhanced nodes below */

.skill-node:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
}

.skill-node.unlocked {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border-color: #10b981;
}

.skill-node.available {
    background: linear-gradient(135deg, #fef3c7, #fbbf24);
    border-color: #f59e0b;
    animation: available-pulse 2s ease-in-out infinite;
}

@keyframes available-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.skill-node.locked {
    background: #6b7280;
    border-color: #4b5563;
    color: #9ca3af;
    cursor: not-allowed;
}

/* Boss Encounter Styling */
.boss-encounter {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border: 3px solid #dc2626;
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.3);
}

.boss-encounter h3 {
    color: #dc2626;
    text-shadow: 0 0 10px rgba(220, 38, 38, 0.5);
}

/* Level Up Animation */
.level-up {
    animation: level-up-flash 1.2s ease-in-out;
}

@keyframes level-up-flash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
    50% { box-shadow: 0 0 20px 10px rgba(251, 191, 36, 0.7); }
}

/* Enhanced Skill Trees */
.skill-tree-tabs {
    display: flex;
    gap: 4px;
}

.skill-tree-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 24px;
    background: linear-gradient(145deg, #f3f4f6, #e5e7eb);
    border: 2px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 100px;
    gap: 4px;
}

.skill-tree-tab:hover {
    background: linear-gradient(145deg, #e5e7eb, #d1d5db);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.skill-tree-tab.active {
    background: linear-gradient(145deg, #fbbf24, #f59e0b);
    border-color: #d97706;
    color: white;
    box-shadow: 0 4px 16px rgba(251, 191, 36, 0.4);
}

.skill-tree {
    min-height: 600px;
}

.skill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    grid-auto-rows: 1fr;
    gap: 14px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 22px 26px; /* extra padding to prevent hover clipping */
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    border-radius: 16px;
    backdrop-filter: blur(8px);
    border: 1px dashed rgba(217, 119, 6, 0.35);
    overflow: hidden; /* avoid overlap outside grid */
}

.skill-node {
    aspect-ratio: 1;
    background: linear-gradient(145deg, #f8fafc, #e2e8f0);
    border: 3px solid #cbd5e1;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    padding: 10px;
    text-align: center;
    min-height: 100px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.skill-node:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    z-index: 2;
}

.skill-node.available {
    background: linear-gradient(145deg, #dbeafe, #bfdbfe);
    border-color: #3b82f6;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
}

.skill-node.available:hover {
    background: linear-gradient(145deg, #bfdbfe, #93c5fd);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.skill-node.learned {
    background: linear-gradient(145deg, #dcfce7, #bbf7d0);
    border-color: #10b981;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
}

.skill-node.learned::after {
    content: '✓';
    position: absolute;
    top: 4px;
    right: 4px;
    color: #10b981;
    font-weight: bold;
    font-size: 16px;
}

.skill-node.locked {
    background: linear-gradient(145deg, #f1f5f9, #e2e8f0);
    border-color: #94a3b8;
    color: #64748b;
    cursor: not-allowed;
    opacity: 0.6;
}

.skill-node.tier-1 {
    border-width: 2px;
}

.skill-node.tier-2 {
    border-width: 3px;
}

.skill-node.tier-3 {
    border-width: 4px;
    border-style: double;
}

.skill-node.tier-4 {
    border-width: 5px;
    border-style: double;
    background: linear-gradient(145deg, #fef3c7, #fed7aa);
    animation: ultimate-glow 3s ease-in-out infinite;
}

@keyframes ultimate-glow {
    0%, 100% { box-shadow: 0 0 15px rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 0 30px rgba(245, 158, 11, 0.7); }
}

.skill-node.strength {
    border-color: #dc2626;
}

.skill-node.strength.available {
    background: linear-gradient(145deg, #fee2e2, #fecaca);
    border-color: #dc2626;
}

.skill-node.strength.learned {
    background: linear-gradient(145deg, #fecaca, #fca5a5);
    border-color: #b91c1c;
}

.skill-node.defense {
    border-color: #2563eb;
}

.skill-node.defense.available {
    background: linear-gradient(145deg, #dbeafe, #bfdbfe);
    border-color: #2563eb;
}

.skill-node.defense.learned {
    background: linear-gradient(145deg, #bfdbfe, #93c5fd);
    border-color: #1d4ed8;
}

.skill-node.spells {
    border-color: #7c3aed;
}

.skill-node.spells.available {
    background: linear-gradient(145deg, #ede9fe, #ddd6fe);
    border-color: #7c3aed;
}

.skill-node.spells.learned {
    background: linear-gradient(145deg, #ddd6fe, #c4b5fd);
    border-color: #6d28d9;
}

.skill-name {
    font-size: 11px;
    font-weight: bold;
    margin-top: 4px;
    line-height: 1.2;
    word-wrap: break-word;
    hyphens: auto;
}

.skill-node {
    position: relative;
}

.skill-cost {
    position: absolute !important;
    bottom: -14px;   /* move below node */
    left: 50% !important;
    transform: translateX(-50%);
}


.skill-type-icon {
    font-size: 20px;
    margin-bottom: 2px;
}

.skill-connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.skill-connection {
    position: absolute;
    background: linear-gradient(90deg, #cbd5e1, #94a3b8);
    height: 3px;
    border-radius: 2px;
    opacity: 0.6;
}

.skill-connection.unlocked {
    background: linear-gradient(90deg, #10b981, #059669);
    opacity: 1;
}

/* Skill Info Panel */
#skillInfoPanel {
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.3s ease;
}

#skillInfoPanel.show {
    transform: translateY(0);
    opacity: 1;
}

.skill-info-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
}

.skill-stat {
    color: #059669;
    font-weight: bold;
}

.skill-stat.negative {
    color: #dc2626;
}

/* Spell Word Highlight */
.spell-word {
    background: linear-gradient(145deg, #f3e8ff, #e9d5ff);
    border: 2px solid #8b5cf6;
    border-radius: 6px;
    padding: 2px 6px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    color: #6d28d9;
    font-size: 12px;
    margin-top: 2px;
}

/* ===== Overhauled Skill Trees Modal ===== */
/* Category buttons */
.skill-cat-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(145deg, #ede9fe, #ddd6fe);
    border: 2px solid #c4b5fd;
    color: #5b21b6;
    border-radius: 10px;
    font-weight: 800;
    transition: transform .2s ease, box-shadow .2s ease, background .3s ease;
}
.skill-cat-btn:hover { transform: translateX(2px); box-shadow: 0 6px 16px rgba(91,33,182,.15); }
.skill-cat-btn.active { background: linear-gradient(145deg, #c7d2fe, #a5b4fc); border-color: #7c3aed; color: #312e81; }

/* Nodes wrap area */
#skillNodesWrap { position: relative; min-height: 520px; }

/* Decagon tile overrides inside modal */
#skillTreesModal .skill-node {
    --accent: #7c3aed;
    position: absolute;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #1f2937;
    background: radial-gradient(circle at 50% 38%, rgba(255,255,255,0.98) 0%, #f8fafc 55%, #e5e7eb 100%);
    border: 0;
    clip-path: polygon(50% 0%, 69% 6%, 85% 19%, 94% 38%, 94% 62%, 85% 81%, 69% 94%, 50% 100%, 31% 94%, 15% 81%, 6% 62%, 6% 38%, 15% 19%, 31% 6%);
    box-shadow: 0 10px 26px rgba(124,58,237,0.22), inset 0 0 18px rgba(124,58,237,0.10);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

/* Mobile optimization for skill nodes */
@media (max-width: 768px) {
    #skillTreesModal .skill-node {
        width: 100px;
        height: 100px;
        box-shadow: 0 6px 18px rgba(124,58,237,0.15), inset 0 0 12px rgba(124,58,237,0.08);
    }
    #skillTreesModal .skill-node .skill-name {
        font-size: 9px !important;
    }
    #skillTreesModal .skill-node .skill-summary {
        font-size: 8px !important;
        padding: 1px 4px !important;
    }
    #skillTreesModal .skill-node .spell-word {
        font-size: 8px !important;
        padding: 1px 4px !important;
    }
    #skillTreesModal .skill-node .skill-cost {
        font-size: 9px !important;
    }
    /* Disable hover effects on mobile for better performance */
    #skillTreesModal .skill-node:hover {
        transform: none;
    }
}
#skillTreesModal .skill-node::before {
    content: '';
    position: absolute; inset: -5px; z-index: 0;
    clip-path: inherit;
    background: conic-gradient(from 0deg, var(--accent), rgba(124,58,237,0.55), var(--accent));
    filter: saturate(120%);
    animation: border-spin 12s linear infinite;
}
#skillTreesModal .skill-node::after {
    content: '';
    position: absolute; inset: 4px; z-index: 1;
    clip-path: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0) 45% 60%, rgba(255,255,255,0));
}
#skillTreesModal .skill-node > * { position: relative; z-index: 2; }
#skillTreesModal .skill-node:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 20px 40px rgba(124,58,237,0.45), inset 0 0 22px rgba(124,58,237,0.18); filter: saturate(110%); z-index: 3; }
#skillTreesPanel { pointer-events: auto; }

/* Hide scrollbars inside skill nodes wrap but keep scrolling */
#skillNodesWrap { scrollbar-width: none; }
#skillNodesWrap::-webkit-scrollbar { display: none; }

/* Readable skill node text */
#skillTreesModal .skill-node .skill-name { 
    font-size: 11px; 
    font-weight: 900; 
    line-height: 1.1; 
    padding: 0 4px; 
    color: #1f2937; 
    text-shadow: 0 1px 0 rgba(255,255,255,.7);
    margin: 2px 0;
}
#skillTreesModal .skill-node .skill-type-icon { 
    font-size: 16px; 
    margin-bottom: 4px; 
    width: 30px; 
    height: 30px; 
    border-radius: 9999px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border: 2px solid var(--accent); 
    background: radial-gradient(circle, #ffffff 0%, rgba(124,58,237,0.08) 70%); 
    box-shadow: 0 3px 8px rgba(124,58,237,.16); 
}
#skillTreesModal .skill-node .skill-cost {
    position: absolute;
    bottom: 14px;
    left: 50%;
    right: auto; /* override generic rule */
    top: auto;   /* ensure bottom anchor */
    transform: translateX(-50%);
    background: linear-gradient(90deg, var(--accent), rgba(124,58,237,.75));
    color: #fff;
    padding: 2px 6px;
    border-radius: 9999px;
    font-weight: 900;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
    font-size: 10px;
    line-height: 1;
}
#skillTreesModal .skill-node .skill-cost::before { content: '◆ '; opacity: .9; }
@keyframes border-spin { to { transform: rotate(360deg); } }

/* Category color accents */
#skillTreesModal .skill-node.strength { --accent: #dc2626; }
#skillTreesModal .skill-node.defense { --accent: #2563eb; }
#skillTreesModal .skill-node.spells { --accent: #7c3aed; }

/* State colors */
#skillTreesModal .skill-node.available { background: radial-gradient(circle at 50% 38%, #ffffff 0%, #ede9fe 58%, #ddd6fe 100%); }
#skillTreesModal .skill-node.strength.available { background: radial-gradient(circle at 50% 38%, #ffffff 0%, #fee2e2 58%, #fecaca 100%); }
#skillTreesModal .skill-node.defense.available { background: radial-gradient(circle at 50% 38%, #ffffff 0%, #dbeafe 58%, #bfdbfe 100%); }
#skillTreesModal .skill-node.spells.available { background: radial-gradient(circle at 50% 38%, #ffffff 0%, #ede9fe 58%, #ddd6fe 100%); }
#skillTreesModal .skill-node.learned { --accent: #059669; background: radial-gradient(circle at 50% 38%, #ffffff 0%, #d1fae5 58%, #a7f3d0 100%); }
#skillTreesModal .skill-node.locked { --accent: #94a3b8; background: radial-gradient(circle at 50% 38%, #f8fafc 0%, #f1f5f9 58%, #e2e8f0 100%); color: #64748b; opacity: .75; }

/* Improve summary and word readability */
#skillTreesModal .skill-node .skill-summary { 
    color: #0f766e; 
    text-shadow: 0 1px 2px rgba(255,255,255,.9); 
    font-weight: 800; 
    background: rgba(255,255,255,0.9);
    padding: 1px 4px;
    border-radius: 4px;
    margin: 2px 0;
    font-size: 9px;
    line-height: 1.1;
    border: 1px solid rgba(20, 184, 166, 0.3);
}
#skillTreesModal .skill-node .spell-word { 
    color: #5b21b6; 
    background: linear-gradient(145deg, #ffffff, #ede9fe); 
    border: 1px solid #7c3aed;
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
    font-weight: 900;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 4px;
    margin: 2px 0;
    line-height: 1;
}

/* Fix overlapping elements */
#skillTreesModal .skill-node::before,
#skillTreesModal .skill-node::after {
    z-index: -1;
}

/* Make all text elements higher z-index */
#skillTreesModal .skill-node .skill-name,
#skillTreesModal .skill-node .skill-type-icon,
#skillTreesModal .skill-node .skill-cost,
#skillTreesModal .skill-node .spell-word,
#skillTreesModal .skill-node .skill-summary {
    position: relative;
    z-index: 10;
}

/* Mesh lines drawn via canvas; keep DOM helper if needed */
.mesh-line { position: absolute; height: 2px; background: linear-gradient(90deg, #c4b5fd, #7c3aed); opacity: .35; transform-origin: left center; pointer-events: none; filter: blur(.2px); }

/* Big category cards in Skills tab */
.skill-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 16px;
    border: 3px solid #7c3aed;
    background: radial-gradient(circle at 50% 30%, #ffffff 0%, #ede9fe 55%, #ddd6fe 100%);
    color: #4c1d95;
    box-shadow: 0 12px 28px rgba(124,58,237,.25);
    transition: transform .2s ease, box-shadow .2s ease;
}
.skill-cat-card:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 18px 40px rgba(124,58,237,.35); }
.skill-cat-card.strength { border-color: #dc2626; background: radial-gradient(circle at 50% 30%, #fff 0%, #fee2e2 55%, #fecaca 100%); color: #991b1b; }
.skill-cat-card.defense { border-color: #2563eb; background: radial-gradient(circle at 50% 30%, #fff 0%, #dbeafe 55%, #bfdbfe 100%); color: #1e3a8a; }
.skill-cat-card.spells { border-color: #7c3aed; background: radial-gradient(circle at 50% 30%, #fff 0%, #ede9fe 55%, #ddd6fe 100%); color: #4c1d95; }

/* --- STATS MODAL --- */
.stat-help-btn-small {
    background: linear-gradient(145deg, #3b82f6, #2563eb);
    color: white;
    border: 2px solid #1d4ed8;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    flex-shrink: 0;
}

.stat-help-btn-small:hover {
    background: linear-gradient(145deg, #2563eb, #1d4ed8);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
}

.stat-help-btn-small:active {
    transform: scale(0.95);
}

#statHelpTooltip {
    z-index: 100 !important;
}

/* Stat Help Tooltip Styling */
#statHelpTooltip h4 {
    font-size: 1.5rem !important;
    line-height: 1.3;
}

#statHelpTooltip p {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    font-weight: 600 !important;
    color: #1e3a8a !important;
}

#statHelpTooltip button {
    font-size: 1.125rem !important;
    padding: 0.75rem 1rem !important;
    font-weight: 700 !important;
}

/* Ensure stats modal stays below tooltip */
#statsModal {
    z-index: 50 !important;
}

/* --- TUTORIAL PAGE --- */
#tutorialPage {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#tutorialPage * {
    pointer-events: auto !important;
}

#tutorialPage::-webkit-scrollbar {
    width: 14px;
}

#tutorialPage::-webkit-scrollbar-track {
    background: #451a03;
    border-radius: 0;
}

#tutorialPage::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
    border-radius: 7px;
    border: 2px solid #451a03;
}

#tutorialPage::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #fcd34d 0%, #fbbf24 100%);
}

#tutorialPage .max-w-5xl {
    max-width: 80rem;
    margin: 0 auto;
}

#tutorialPage h1 {
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.9), 0 0 20px rgba(251, 191, 36, 0.5);
}

#tutorialPage h2 {
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
    font-weight: 900;
}

#tutorialPage h3 {
    font-weight: 800;
}

#tutorialPage code {
    font-family: 'Courier New', monospace;
    font-size: 0.95em;
    font-weight: 700;
}

#tutorialPage strong {
    font-weight: 900;
    color: #78350f;
}

#tutorialPage ul, #tutorialPage ol {
    line-height: 2;
}

#tutorialPage li {
    margin-bottom: 0.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #111827 !important;
}

#tutorialPage p {
    font-size: 1.05rem;
    font-weight: 600;
    color: #111827 !important;
}

/* Make all text dark and readable */
#tutorialPage .text-gray-900 {
    color: #111827 !important;
    font-weight: 600;
}

#tutorialPage .bg-green-100,
#tutorialPage .bg-white,
#tutorialPage .bg-amber-100,
#tutorialPage .bg-amber-200 {
    color: #111827 !important;
}

#tutorialPage .bg-green-100 ol,
#tutorialPage .bg-green-100 li,
#tutorialPage .bg-white ol,
#tutorialPage .bg-white li {
    color: #111827 !important;
    font-weight: 700;
}

/* Make section text more readable */
#tutorialPage .text-amber-900,
#tutorialPage .text-amber-800,
#tutorialPage .text-red-800,
#tutorialPage .text-purple-800,
#tutorialPage .text-green-800,
#tutorialPage .text-blue-800 {
    font-weight: 700;
}

/* Tutorial section cards */
#tutorialPage .space-y-6 > div {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}

#tutorialPage button {
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

#tutorialPage button:hover {
    transform: translateY(-3px) scale(1.02);
    filter: brightness(1.1);
}

#tutorialPage button:active {
    transform: translateY(-1px) scale(0.98);
}

#tutorialPage #closeTutorialPage:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7), 0 0 40px rgba(34, 197, 94, 0.6) !important;
}

#tutorialPage #closeTutorialPageBottom:hover {
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.8), 0 0 50px rgba(34, 197, 94, 0.7) !important;
}

/* --- AUTHENTICATION SCREEN --- */
#authScreen {
    background: transparent;
    backdrop-filter: blur(1px);
}

/* Parallax Background for Auth Screen */
.parallax-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(135deg, #1e1b18 0%, #422006 50%, #78350f 100%);
    will-change: transform;
}

.bg-layer {
    position: absolute;
    width: 120%;
    height: 120%;
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    will-change: transform;
    transform: translate3d(0, 0, 0); /* GPU acceleration */
}

.layer-1 {
    background: radial-gradient(circle at 20% 50%, rgba(147, 51, 234, 0.2) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(245, 158, 11, 0.15) 0%, transparent 50%);
    animation: float-bg 25s ease-in-out infinite;
}

.layer-2 {
    background: radial-gradient(circle at 60% 30%, rgba(220, 38, 38, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 40% 70%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
    animation: float-bg 30s ease-in-out infinite reverse;
}

.layer-3 {
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 2px,
        rgba(245, 158, 11, 0.03) 2px,
        rgba(245, 158, 11, 0.03) 4px
    );
    animation: float-bg 35s ease-in-out infinite;
}

@keyframes float-bg {
    0%, 100% { transform: translate3d(0, 0, 0); }
    33% { transform: translate3d(20px, -20px, 0); }
    66% { transform: translate3d(-15px, 15px, 0); }
}

/* Particles Canvas */
#particlesCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    will-change: contents;
}

/* Ensure game container is above background */
#gameContainer {
    position: relative;
    z-index: 10;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

#authScreen input {
    background-color: #fef3c7;
    color: #422006;
    font-family: 'Cinzel', serif;
    font-weight: 600;
}

#authScreen input::placeholder {
    color: #a16207;
}

#authScreen input:focus {
    background-color: #fff;
    border-color: #f59e0b;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
}

/* Shop Level Warning */
#shopLevelWarning {
    animation: fadeInOut 0.3s ease-in;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

@keyframes fadeInOut {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --- LEADERBOARD STYLING --- */
.leaderboard-filter-btn {
    transition: all 0.3s ease;
    transform: translateY(0);
}

.leaderboard-filter-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

.leaderboard-filter-btn.active {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

#leaderboardTable {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}

#leaderboardTable thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

#leaderboardTable thead th {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.5px;
    vertical-align: middle;
    padding: 1rem 1.5rem;
}

#leaderboardTable tbody tr {
    transition: all 0.2s ease;
    vertical-align: middle;
}

#leaderboardTable tbody tr:hover {
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background-color: rgba(251, 191, 36, 0.5) !important;
}

#leaderboardTable tbody tr td {
    vertical-align: middle;
    padding: 1rem 1.5rem;
    white-space: nowrap;
}

#leaderboardTable tbody tr.bg-green-200 {
    box-shadow: inset 0 0 20px rgba(34, 197, 94, 0.2);
    background-color: rgba(187, 247, 208, 0.8) !important;
}

/* Ensure consistent cell heights */
#leaderboardTable tbody tr td {
    height: 64px;
    line-height: 1.5;
}

/* Better rank styling - strict alignment */
#leaderboardTable tbody tr td:first-child {
    font-size: 1.125rem;
    text-align: center;
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Player name column - strict alignment */
#leaderboardTable tbody tr td:nth-child(2) {
    text-align: left;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Better value alignment - strict alignment */
#leaderboardTable tbody tr td:last-child {
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: right;
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Ensure table container doesn't overflow awkwardly */
#leaderboardTable {
    min-width: 600px;
}

/* Column borders for clear separation */
#leaderboardTable thead th,
#leaderboardTable tbody tr td {
    border-right: 2px solid rgba(146, 64, 14, 0.4);
}

#leaderboardTable thead th:last-child,
#leaderboardTable tbody tr td:last-child {
    border-right: none;
}

/* Improve table wrapper for better scrolling */
.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
}

/* --- QUESTS TAB --- */

/* Main Container - Light blue fading to page background */
.quest-board-container {
    background: linear-gradient(180deg, 
        rgba(186, 230, 253, 0.9) 0%, 
        rgba(186, 230, 253, 0.7) 20%,
        rgba(224, 242, 254, 0.5) 40%,
        rgba(254, 249, 195, 0.3) 60%,
        rgba(254, 243, 199, 0.1) 80%,
        transparent 100%);
    border-radius: 20px 20px 0 0;
    padding: 28px;
    padding-bottom: 60px;
    border: none;
    border-top: 3px solid rgba(14, 165, 233, 0.5);
    margin-bottom: -30px;
}

/* Header */
.quest-board-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid rgba(14, 165, 233, 0.3);
}

.quest-board-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.quest-scroll-icon {
    font-size: 2.5rem;
    filter: drop-shadow(0 2px 4px rgba(14, 165, 233, 0.3));
}

.quest-board-title h2 {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 700;
    color: #0369a1;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    margin: 0;
}

.quest-stats {
    background: rgba(255, 255, 255, 0.7);
    border: 2px solid #0ea5e9;
    border-radius: 10px;
    padding: 8px 16px;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15);
}

.quest-stat-label {
    color: #0369a1;
    font-size: 0.875rem;
    font-weight: 500;
}

.quest-stat-value {
    color: #0284c7;
    font-weight: 700;
    font-size: 1.25rem;
    margin-left: 4px;
}

/* Quest Cards Grid */
.quest-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

/* Individual Quest Card */
.quest-card {
    background: linear-gradient(145deg, #ffffff 0%, #f0f9ff 100%);
    border-radius: 16px;
    padding: 20px;
    border: 2px solid #7dd3fc;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.1);
}

.quest-card:hover {
    transform: translateY(-4px);
    border-color: #0ea5e9;
    box-shadow: 0 12px 30px rgba(14, 165, 233, 0.2);
}

.quest-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0ea5e9, #06b6d4, #14b8a6);
}

.quest-card.completed {
    border-color: #22c55e;
    background: linear-gradient(145deg, #f0fdf4 0%, #dcfce7 100%);
}

.quest-card.completed::before {
    background: linear-gradient(90deg, #22c55e, #4ade80, #86efac);
}

/* Quest Card Header */
.quest-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.quest-card-title {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0c4a6e;
    margin: 0 0 6px 0;
}

.quest-difficulty {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quest-difficulty.easy {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #166534;
    border: 1px solid #86efac;
}

.quest-difficulty.medium {
    background: linear-gradient(135deg, #fef9c3, #fef08a);
    color: #854d0e;
    border: 1px solid #fde047;
}

.quest-difficulty.hard {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.quest-reroll-btn {
    background: linear-gradient(135deg, #e0f2fe, #bae6fd);
    border: 2px solid #7dd3fc;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.quest-reroll-btn:hover:not(.disabled) {
    background: linear-gradient(135deg, #bae6fd, #7dd3fc);
    transform: rotate(180deg);
    border-color: #0ea5e9;
}

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

/* Quest Description */
.quest-description {
    color: #475569;
    font-size: 0.9rem;
    margin-bottom: 16px;
    line-height: 1.5;
}

/* Progress Bar */
.quest-progress {
    margin-bottom: 16px;
}

.quest-progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 6px;
    font-weight: 600;
}

.quest-progress-bar {
    height: 10px;
    background: linear-gradient(180deg, #e0f2fe, #f0f9ff);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #bae6fd;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.quest-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0ea5e9, #06b6d4);
    border-radius: 10px;
    transition: width 0.5s ease;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.4);
}

.quest-card.completed .quest-progress-fill {
    background: linear-gradient(90deg, #22c55e, #4ade80);
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
}

/* Rewards */
.quest-rewards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.quest-reward {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
}

.quest-reward.xp {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1d4ed8;
    border: 1px solid #93c5fd;
}

.quest-reward.gold {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #b45309;
    border: 1px solid #fcd34d;
}

.quest-reward.item {
    background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
    color: #7c3aed;
    border: 1px solid #c4b5fd;
}

/* Claim Button */
.quest-claim-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
}

.quest-claim-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.5);
}

/* Reroll Bar */
.quest-reroll-bar {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(186, 230, 253, 0.4));
    border-radius: 12px;
    padding: 14px 20px;
    border: 1px solid rgba(14, 165, 233, 0.2);
    backdrop-filter: blur(8px);
}

.reroll-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.reroll-icon {
    font-size: 1.3rem;
}

.reroll-label {
    color: #0369a1;
    font-size: 0.95rem;
    font-weight: 600;
}

.reroll-timer {
    color: #059669;
    font-weight: 700;
    font-size: 1rem;
}

.reroll-timer.on-cooldown {
    color: #d97706;
}

/* Locked State */
.quest-locked-placeholder {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    border: 3px dashed #7dd3fc;
    backdrop-filter: blur(4px);
}

.quest-locked-icon {
    font-size: 4rem;
    margin-bottom: 16px;
    opacity: 0.7;
}

.quest-locked-text {
    color: #0369a1;
    font-size: 1.2rem;
    font-weight: 700;
}

.quest-locked-level {
    color: #0ea5e9;
    font-size: 0.95rem;
    margin-top: 8px;
    font-weight: 500;
}