* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', Arial, sans-serif; background: #f5f0e8; color: #2c1810; touch-action: manipulation; overflow-x: hidden; }
        body.theme-dark { background: #1a1a1a; color: #e0e0e0; }
        body.theme-dark .card { background: #2a2a2a; }
        body.theme-dark .day-header { background: #3a3a3a; }
        body.theme-dark .task-list { background: #252525; }
        body.theme-dark .info-section-header { background: #4a4a4a; }
        body.theme-dark .info-section-content { background: #333; }
        body.theme-dark .avail-tap-circle { background: #4a4a4a; color: #e0e0e0; }
        
        /* Generic fix for all text in dark mode */
        body.theme-dark,
        body.theme-dark * {
            color: #e0e0e0;
        }
        
        /* Fix text colors in dark mode */
        body.theme-dark .task-label {
            color: #e0e0e0;
        }
        
        body.theme-dark .task-text.line-through .task-label {
            color: #9ca3af;
        }
        
        body.theme-dark .day-name {
            color: inherit;
        }
        
        body.theme-dark .today-badge {
            background: #f59e0b;
            color: white;
        }
        
        /* Fix input text in dark mode */
        body.theme-dark input,
        body.theme-dark textarea,
        body.theme-dark .prize-input {
            color: #e0e0e0;
            background: #3a3a3a;
        }
        
        body.theme-dark input::placeholder {
            color: #9ca3af;
        }
        
        /* Fix modal content text */
        body.theme-dark .modal-content {
            color: #e0e0e0;
        }
        
        body.theme-dark .modal-content .text-gray-500 {
            color: #9ca3af;
        }
        
        /* Fix info section text */
        body.theme-dark .info-section-header {
            color: #e0e0e0;
            background: #4a4a4a;
        }
        
        body.theme-dark .info-section-content {
            color: #e0e0e0;
        }
        
        body.theme-dark .info-section-content .text-gray-500 {
            color: #9ca3af;
        }
        
        /* Fix streak and epic badges */
        body.theme-dark .streak-badge,
        body.theme-dark .epic-badge {
            background: #3a3a3a;
            color: #e0e0e0;
        }
        
        /* Fix why button */
        body.theme-dark .why-btn {
            background: rgba(245, 158, 11, 0.2);
            color: #fbbf24;
        }
        
        /* Fix tap circles */
        body.theme-dark .tap-circle {
            background: #4a4a4a;
            color: #e0e0e0;
        }
        
        /* Daily status tap circle custom style */
        .daily-status-tap.custom {
            border: 2px solid #f59e0b;
            box-shadow: 0 0 4px #f59e0b;
        }
        
        body.theme-dark .daily-status-tap.custom {
            border: 2px solid #f59e0b;
            box-shadow: 0 0 4px #f59e0b;
        }
        
        /* Fix task check unchecked state */
        body.theme-dark .task-check {
            background: #3a3a3a;
            border-color: #4a7c59;
        }
        
        /* Fix player list items */
        body.theme-dark .player-list-item {
            background: #3a3a3a;
            color: #e0e0e0;
        }
        
        /* Fix bonus and task items */
        body.theme-dark .task-item,
        body.theme-dark .bonus-item {
            background: #3a3a3a;
            color: #e0e0e0;
        }
        
        /* Fix difficulty row */
        body.theme-dark .difficulty-label {
            color: #e0e0e0;
        }
        
        /* Fix reward select labels */
        body.theme-dark .reward-select label {
            color: #e0e0e0;
        }
        
        /* Fix epic prize input */
        body.theme-dark .prize-input {
            background: #3a3a3a;
            color: #e0e0e0;
            border-color: #555;
        }
        
        /* Fix undo toast */
        body.theme-dark .undo-toast {
            background: #1a1a1a;
            color: #e0e0e0;
        }
        
        /* Fix floating buttons in dark mode */
        body.theme-dark .floating-btn {
            background: #4a7c59;
            color: white;
        }
        
        /* Fix day header active state text */
        body.theme-dark .day-header.active {
            color: white;
        }
        
        /* Fix toggle button */
        body.theme-dark .setup-toggle {
            background: #4a4a4a;
            color: #e0e0e0;
        }
        body.theme-dark .setup-toggle.active {
            background: #4a7c59;
            color: white;
        }
        
        /* Debug: Run this in console to find white-on-white elements:
        document.querySelectorAll('*').forEach(el => { const bg = getComputedStyle(el).backgroundColor; const color = getComputedStyle(el).color; if (bg === 'rgb(255, 255, 255)' && color === 'rgb(255, 255, 255)') console.log('White on white:', el); });
        */
        
        body.theme-blue { background: #e8f0f8; color: #1a2e3a; }
        body.theme-blue .card { background: white; }
        .card-deck { overflow-x: auto; scroll-snap-type: x mandatory; display: flex; height: 100vh; align-items: flex-start; }
        .card { scroll-snap-align: start; flex: 0 0 100%; background: white; padding: 20px; overflow-y: auto; height: 100%; transition: all 0.2s; }
        @media (max-width: 480px) {
            .card { padding: 12px; }
            .day-header { padding: 8px 12px; }
            .task-row { padding: 8px; }
            .tap-circle { width: 40px; height: 40px; font-size: 16px; }
            .monster-svg { width: 40px; height: 30px; }
        }

/* Swipe hint animation */
@keyframes swipeHint {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
}

.card-deck-hint::after {
    content: '← →';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: rgba(100, 116, 139, 0.6);
    animation: swipeHint 2s ease-in-out infinite;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

#cardDeck:hover .card-deck-hint::after,
#cardDeck:active .card-deck-hint::after {
    opacity: 1;
}
        @media (min-width: 700px) {
            .card-deck { padding: 0 20px 20px; gap: 20px; height: auto; }
            .card { border-radius: 28px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); height: auto; max-height: 90vh; }
        }
        .floating-btn { background: #4a7c59; color: white; border: none; border-radius: 40px; padding: 8px 20px; cursor: pointer; font-size: 14px; white-space: nowrap; }
        .floating-btn:disabled { opacity: 0.6; cursor: wait; }

        .player-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 8px; gap: 8px; }
        .player-name { font-size: 24px; font-weight: bold; background: #4a7c59; color: white; padding: 6px 18px; border-radius: 40px; }
        .streak-badge, .epic-badge { font-size: 12px; background: #e0d5c8; padding: 4px 12px; border-radius: 20px; }
        .completion-bar { margin: 8px 0 10px; height: 6px; background: #e0d5c8; border-radius: 3px; overflow: hidden; }
        .completion-fill { height: 100%; width: 0%; background: #4a7c59; transition: width 0.3s; }
        .day-item { margin-bottom: 6px; }
        .day-header { background: #e0d5c8; padding: 10px 16px; border-radius: 40px; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
        .day-header.active { background: #4a7c59; color: white; border-radius: 40px 40px 0 0; }
        .day-header.options-active { background: #4a7c59; color: white; border-radius: 40px 40px 0 0; }
        .today-badge { font-size: 10px; font-weight: normal; background: #f59e0b; color: white; padding: 2px 8px; border-radius: 20px; margin-left: 6px; }
        .monster-icons-group { display: inline-flex; align-items: center; gap: 5px; position: relative; }
        .monster-svg { width: 52px; height: 38px; display: inline-block; vertical-align: middle; transition: all 0.2s; }
        .monster-jaw { transform-box: view-box; transform-origin: 2px 19px; transform: rotate(15deg); }
        @keyframes jawChomp {
            0%   { transform: rotate(15deg); }
            18%  { transform: rotate(46deg); }
            40%  { transform: rotate(0deg);  }
            58%  { transform: rotate(22deg); }
            75%  { transform: rotate(11deg); }
            88%  { transform: rotate(17deg); }
            100% { transform: rotate(15deg); }
        }
        .monster-jaw.chomping { animation: jawChomp 0.52s cubic-bezier(0.36,0.07,0.19,0.97) both; }
        .monster-svg.full-belly .monster-jaw { transform: rotate(0deg); }
        .monster-svg.full-belly .monster-jaw path { fill: #6b8c5c; }
        .monster-svg.full-belly::after { content: "✨"; position: absolute; top: -8px; right: -8px; font-size: 12px; animation: sparkle 0.5s ease-out; }
        @keyframes sparkle { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } }
        .uneaten-icons { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; }
        .uneaten-icon { font-size: 18px; cursor: pointer; transition: transform 0.1s; }
        .uneaten-icon:active { transform: scale(0.9); }
        @keyframes iconEaten { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.55) translateX(-16px); opacity: 0.7; } 100% { transform: scale(0) translateX(-28px); opacity: 0; } }
        .uneaten-icon.being-eaten { animation: iconEaten 0.3s forwards; pointer-events: none; }
        @keyframes nomPop { 0% { opacity: 0; transform: translateY(2px); } 25% { opacity: 1; transform: translateY(-7px); } 75% { opacity: 0.8; transform: translateY(-16px); } 100% { opacity: 0; transform: translateY(-24px); } }
        .nom-text { position: absolute; top: -4px; left: 46px; font-size: 12px; font-weight: bold; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 0 6px rgba(0,0,0,0.4); animation: nomPop 0.75s forwards; pointer-events: none; white-space: nowrap; z-index: 30; }
        .task-list { background: #faf8f5; border-radius: 0 0 20px 20px; padding: 8px 12px; }
        .task-row { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-bottom: 1px solid #e0d5c8; cursor: pointer; transition: background 0.1s; }
        .task-row:active { background: #e8e0d5; }
        .task-text { display: flex; align-items: center; gap: 6px; pointer-events: none; }
        .task-icon { cursor: pointer; pointer-events: auto; padding: 4px; border-radius: 12px; }
        .task-icon:active { background: #e0d5c8; }
        .task-text.checked .task-label { text-decoration: line-through; color: #aaa; }
        .task-check { width: 28px; height: 28px; border: 2px solid #4a7c59; border-radius: 8px; background: white; pointer-events: none; flex-shrink: 0; transition: all 0.1s; }
        .task-check.checked { background: #4a7c59; position: relative; }
        .task-check.checked::after { content: "✔"; color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 18px; font-weight: bold; }
        .info-section { margin-top: 16px; border: 1px solid #e0d5c8; border-radius: 20px; overflow: hidden; }
        .info-section-header { background: #e0d5c8; padding: 12px 18px; cursor: pointer; display: flex; justify-content: space-between; font-weight: bold; }
        .info-section-content { padding: 16px; display: none; background: #fff8e5; }
        
        /* <details>/<summary> overrides for native open/close behavior */
        details.info-section .info-section-content {
            display: block;
        }
        details.info-section summary {
            list-style: none;
            cursor: pointer;
        }
        details.info-section summary::-webkit-details-marker {
            display: none;
        }
        details.info-section summary::marker {
            display: none;
            content: '';
        }

        .toggle-icon { transition: transform 0.2s ease; display: inline-block; }
        .setup-content { margin-top: 16px; }
        .setup-content.hidden { display: none; }
        .setup-content.visible { display: block; }
        .setup-toggle { transition: all 0.2s; cursor: pointer; }
        .setup-toggle.active { background-color: #4a7c59; color: white; }
        .avail-grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; justify-content: center; }
        .avail-day-item { text-align: center; }
        .avail-day-label { font-size: 11px; font-weight: bold; margin-bottom: 6px; }
        .tap-circle { width: 48px; height: 48px; border-radius: 50%; background: #e0d5c8; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: bold; cursor: pointer; transition: transform 0.05s; }
        .tap-circle:active { transform: scale(0.95); }
        .difficulty-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
        .difficulty-icon { font-size: 24px; width: 36px; text-align: center; cursor: pointer; }
        .difficulty-label { min-width: 80px; }
        .task-manager { margin-top: 16px; border-top: 1px solid #e0d5c8; padding-top: 12px; }
        .task-item, .bonus-item { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; background: #faf8f5; padding: 6px 12px; border-radius: 40px; flex-wrap: wrap; }
        .task-edit-btn, .task-delete-btn, .add-task-btn, .add-bonus-btn { background: #4a7c59; border: none; color: white; border-radius: 20px; padding: 4px 12px; cursor: pointer; font-size: 11px; }
        .task-delete-btn { background: #c0392b; }
        .add-task-btn, .add-bonus-btn { border-radius: 40px; padding: 6px 16px; margin-top: 8px; }
        .reward-select { margin: 12px 0; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
        .theme-buttons { display: flex; gap: 12px; justify-content: center; margin: 12px 0; }
        .theme-btn { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; border: 2px solid #ccc; }
        .theme-btn.green { background: #4a7c59; }
        .theme-btn.dark { background: #2c3e2c; }
        .theme-btn.blue { background: #3a6b8a; }
        .setup-buttons { display: flex; gap: 12px; margin-top: 16px; justify-content: center; }
        .setup-label { font-weight: bold; margin-top: 14px; display: block; }
        .prize-input { width: 100%; margin-top: 6px; padding: 7px 14px; border: 1px solid #c0b5a8; border-radius: 20px; background: white; }
        body.theme-dark .prize-input { background: #3a3a3a; color: #e0e0e0; border-color: #555; }
        .week-summary { margin-top: 20px; padding-top: 12px; border-top: 1px solid #e0d5c8; font-size: 12px; text-align: center; color: #888; }
        .why-btn { transition: transform 0.1s; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(245, 158, 11, 0.1); }
        .why-btn:hover { transform: scale(1.15); background: rgba(245, 158, 11, 0.2); }
        .toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 1000; background: #4a7c59; color: white; padding: 8px 20px; border-radius: 40px; font-size: 14px; animation: fadeInUp 0.3s; }
        @keyframes fadeInUp { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
        .undo-toast { position: fixed; bottom: 140px; left: 50%; transform: translateX(-50%); z-index: 1001; background: #2c1810; color: white; padding: 8px 20px; border-radius: 40px; cursor: pointer; display: flex; gap: 12px; align-items: center; }
        .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 2000; animation: fadeIn 0.2s; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        .modal-content { max-width: 90vw; width: 420px; max-height: 80vh; overflow-y: auto; background: white; border-radius: 28px; padding: 20px; }
        body.theme-dark .modal-content { background: #2a2a2a; }
        .score-bar { transition: width 0.5s ease-out; }
        .print-table-container { display: none; }
        .drop-target { background-color: rgba(16, 185, 129, 0.2); border: 2px solid #10b981; transition: all 0.1s ease; }
        .player-list-item { display: flex; align-items: center; gap: 8px; padding: 8px; background: #faf8f5; border-radius: 40px; margin-bottom: 8px; }
        body.theme-dark .player-list-item { background: #3a3a3a; }
        .install-btn { position: fixed; bottom: 20px; left: 20px; background: #4a7c59; color: white; padding: 8px 16px; border-radius: 40px; font-size: 12px; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.2); cursor: pointer; transition: all 0.2s; }
        .install-btn:hover { transform: scale(1.05); }
        
        /* ========== OPTIONS HEADER ========== */
        .options-header-container {
            margin-top: 16px;
            margin-bottom: 8px;
        }
        
        @media print {
            body > *:not(#printTableContainer) { display: none; }
            #printTableContainer { display: block; padding: 0.5in; }
            .print-table { width: 100%; border-collapse: collapse; font-size: 10pt; }
            .print-table th, .print-table td { border: 1px solid #ccc; padding: 6px; text-align: center; }
        }

/* ========== HORIZONTAL SCROLL FIX ========== */
/* Ensure horizontal scrolling works */
#cardDeck {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
}

/* Hide scrollbars for clean look */
#cardDeck::-webkit-scrollbar {
    display: none;
}
#cardDeck {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Ensure cards don't shrink */
.card {
    flex-shrink: 0;
}

/* Light variant UI styling */
#lightVariantFields {
    transition: all 0.2s ease;
    border-left: 2px solid #f59e0b;
    padding-left: 1rem;
}

.variant-checkbox:checked + span {
    color: #f59e0b;
    font-weight: bold;
}

/* Light variant badge */
.text-xs.bg-amber-200 {
    background-color: #fef3c7;
    color: #92400e;
}

.dark .text-xs.bg-amber-800 {
    background-color: #92400e;
    color: #fef3c7;
}

/* Create Light Variant button */
.text-xs.bg-amber-500 {
    background-color: #f59e0b;
    color: white;
    transition: background-color 0.2s ease;
}

.text-xs.bg-amber-500:hover {
    background-color: #d97706;
}

/* Tab styles for task modal */
.tab-btn {
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    color: #6b7280;
}

.tab-btn.active {
    border-bottom-color: #10b981;
    color: #10b981;
    font-weight: 600;
}

.tab-btn:hover:not(.active) {
    color: #4b5563;
    border-bottom-color: #9ca3af;
}

.tab-content {
    transition: opacity 0.2s ease;
}

/* Task modal specific styles */
.task-modal {
    max-width: 600px;
    width: 90vw;
}

.task-modal input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    outline: none;
}

.task-modal input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #10b981;
    border-radius: 50%;
    cursor: pointer;
}

.task-modal input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #10b981;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* Light variant section */
#lightVariantFields {
    border-left: 2px solid #f59e0b;
    padding-left: 1rem;
    transition: all 0.3s ease;
}

/* Dark mode tab styles */
body.theme-dark .tab-btn {
    color: #9ca3af;
}

body.theme-dark .tab-btn.active {
    color: #34d399;
    border-bottom-color: #34d399;
}

body.theme-dark .tab-btn:hover:not(.active) {
    color: #d1d5db;
}

body.theme-dark .task-modal input[type="range"] {
    background: #4b5563;
}

body.theme-dark .task-modal input[type="range"]::-webkit-slider-thumb {
    background: #34d399;
}

body.theme-dark .task-modal input[type="range"]::-moz-range-thumb {
    background: #34d399;
}

/* Catch all buttons in dark mode - ensures no white-on-white */
body.theme-dark button {
    color: white;
}

/* Specific backgrounds for different button types */
body.theme-dark .task-edit-btn,
body.theme-dark .add-task-btn,
body.theme-dark .add-bonus-btn,
body.theme-dark .modal-save,
body.theme-dark #exportAllBtn,
body.theme-dark #importAllBtn {
    background: #4a7c59;
}

body.theme-dark .task-delete-btn,
body.theme-dark .delete-bonus,
body.theme-dark .delete-player {
    background: #c0392b;
}

body.theme-dark .modal-cancel {
    background: #555;
}

body.theme-dark .edit-player {
    background: #3b82f6;
}

body.theme-dark #restoreSelectedBtn {
    background: #d97706;
}