@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400&display=swap');

:root {
    --cream: #fdfbf7;
    --warm-white: #fffdfa;
    --wood-light: #e5b98a;
    --wood-dark: #b87b46;
    --wood-panel: #d69f6a;
    
    /* Nuovi Colori Premium */
    --accent-green: #4ADE80;
    --accent-green-dark: #22c55e;
    --accent-blue: #60A5FA;
    --accent-blue-dark: #3B82F6;
    --accent-purple: #A78BFA;
    --accent-red: #F87171;
    --accent-gold: #FBBF24;

    --text-dark: #3e322b;
    --text-light: #7a6557;
    
    /* Ombre Avanzate */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 24px rgba(92, 75, 65, 0.1);
    --shadow-lg: 0 20px 40px rgba(92, 75, 65, 0.15);
    --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    
    /* 3D Button Shadows */
    --btn-shadow: 0 6px 0 rgba(0,0,0,0.1);
    
    --radius-full: 100px;
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 12px;
}

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    user-select: none; 
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Nunito', sans-serif;
    background-color: var(--cream);
    color: var(--text-dark);
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Un pattern di sfondo molto delicato */
    background-image: radial-gradient(rgba(229, 185, 138, 0.15) 2px, transparent 2px);
    background-size: 30px 30px;
}

/* --- HUD (Header UI) --- */
.hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: rgba(255, 253, 250, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 2px solid rgba(229, 185, 138, 0.5);
    z-index: 50;
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s ease, opacity 0.4s ease;
}
.hud.hidden { 
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.hud-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: white;
    padding: 0.5rem 1.2rem;
    border-radius: var(--radius-full);
    border: 2px solid rgba(229, 185, 138, 0.3);
    font-weight: 800;
    font-size: 1.1rem;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.03);
    transition: all 0.2s ease;
}

.hud-icon {
    font-size: 1.2rem;
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.hud-item:hover .hud-icon {
    transform: scale(1.2) rotate(5deg);
}
.hud-icon.lost { 
    filter: grayscale(1) opacity(0.2); 
    transform: scale(0.8);
}

.xp-box { 
    flex: 1; 
    max-width: 320px; 
    background: linear-gradient(to right, white, #fdfbf7);
}
.xp-bar-container { 
    flex: 1; 
    height: 14px; 
    background: #f0e6da; 
    border-radius: 10px; 
    overflow: hidden; 
    margin: 0 0.5rem;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}
.xp-bar-fill { 
    height: 100%; 
    width: 0%; 
    background: linear-gradient(90deg, var(--accent-purple), #d8b4e2); 
    border-radius: 10px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); 
    position: relative;
    overflow: hidden;
}
.xp-bar-fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: translateX(-100%);
    animation: shimmer 2s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* Audio & Settings Controls */
.audio-box { 
    display: flex; 
    gap: 0.8rem; 
    align-items: center; 
    background: transparent; 
    border: none; 
    padding: 0; 
    box-shadow: none;
}
.icon-btn { 
    background: white; 
    border: 2px solid rgba(229, 185, 138, 0.5); 
    border-radius: 50%; 
    width: 44px; 
    height: 44px; 
    font-size: 1.2rem; 
    cursor: pointer; 
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 4px 0 rgba(229, 185, 138, 0.3);
}
.icon-btn:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 6px 0 rgba(229, 185, 138, 0.3); 
    background: var(--cream);
}
.icon-btn:active { 
    transform: translateY(2px); 
    box-shadow: 0 2px 0 rgba(229, 185, 138, 0.3); 
}
#volume-slider { 
    width: 80px; 
    accent-color: var(--wood-dark); 
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}
#volume-slider:hover { opacity: 1; }

/* --- GAME WRAPPER & VIEWS --- */
.game-wrapper {
    flex: 1;
    position: relative;
    overflow: hidden;
    perspective: 1000px;
}

.view {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(0.96) translateY(20px);
}
.view.active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
}

/* Backgrounds are now mapped directly in the rules below */

/* --- CARDS & PANELS (Glassmorphism) --- */
.panel-glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: var(--shadow-glass), inset 0 0 0 2px rgba(255,255,255,0.8);
    border-radius: var(--radius-lg);
    position: relative;
    z-index: 10;
}

/* Common Backgrounds */
.welcome-view, .mode-selection-view, .learning-selection-view, .shop-view, .accounting-view, .upgrades-view {
    background-image: url('assets/shop_bg.jpg');
    background-size: cover;
    background-position: center;
}

#ambient-particles {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
}

.welcome-view::before, .mode-selection-view::before, .learning-selection-view::before, .upgrades-view::before {
    content: ''; 
    position: absolute; top:0; left:0; right:0; bottom:0; 
    background: rgba(253, 251, 247, 0.75); 
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 0;
}

/* --- VIEW 0: WELCOME --- */
.welcome-card { 
    padding: 4rem 3rem; 
    text-align: center; 
    max-width: 650px; 
    width: 90%; 
    animation: float 6s ease-in-out infinite;
}
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.game-title { 
    font-size: 4rem; 
    color: var(--text-dark);
    margin-bottom: 1rem; 
    font-weight: 900; 
    line-height: 1.1;
    text-shadow: 2px 4px 0 rgba(229, 185, 138, 0.4);
}
.welcome-subtitle { 
    font-size: 1.4rem; 
    color: var(--text-light); 
    margin-bottom: 2rem; 
    font-weight: 700; 
}
.welcome-instructions { 
    font-size: 1.15rem; 
    color: var(--accent-red); 
    margin-bottom: 3rem; 
    font-weight: 800; 
    background: rgba(248, 113, 113, 0.1); 
    padding: 1.2rem; 
    border-radius: var(--radius-sm); 
    border: 2px dashed rgba(248, 113, 113, 0.5); 
}

/* --- VIEW 1: SHOP --- */
.shop-view::before {
    content: ''; position: absolute; top:0; left:0; right:0; bottom:0;
    background: linear-gradient(to bottom, rgba(253, 251, 247, 0.1), rgba(253, 251, 247, 0.5));
}

.customer-area {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    padding-bottom: 4rem;
}

.customer-avatar {
    width: 320px;
    height: 320px;
    object-fit: cover;
    border-radius: 50%;
    border: 12px solid white;
    box-shadow: var(--shadow-lg);
    transform: translateY(150px) scale(0.9);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.customer-avatar.entered {
    transform: translateY(0) scale(1);
    opacity: 1;
    animation: breathe 6s ease-in-out infinite;
}

@keyframes breathe {
    0% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.03) translateY(-8px); }
    100% { transform: scale(1) translateY(0); }
}

.speech-bubble {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: 3px solid rgba(229, 185, 138, 0.6);
    box-shadow: var(--shadow-md);
    position: absolute;
    bottom: 340px;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-dark);
    max-width: 400px;
    text-align: center;
    z-index: 20;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: bottom center;
}
.speech-bubble::after {
    content: ''; position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
    border-width: 18px 16px 0; border-style: solid;
    border-color: rgba(229, 185, 138, 0.6) transparent transparent transparent;
}
.speech-bubble::before { 
    content: ''; position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
    border-width: 15px 13px 0; border-style: solid;
    border-color: white transparent transparent transparent;
    z-index: 1;
}
.speech-bubble.hidden { 
    opacity: 0; 
    transform: translateY(30px) scale(0.9); 
    pointer-events: none; 
}

.shop-ui {
    position: absolute;
    bottom: 4rem;
    z-index: 30;
}

/* --- BUTTONS --- */
.btn {
    font-family: 'Nunito', sans-serif;
    border-radius: var(--radius-full);
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    outline: none;
}

.btn svg, .icon-btn svg {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    stroke: currentColor;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn:hover svg {
    transform: scale(1.15);
}


.primary-btn {
    background: linear-gradient(135deg, var(--accent-green), var(--accent-green-dark));
    color: white;
    border: 3px solid rgba(255,255,255,0.8);
    padding: 1.2rem 3.5rem;
    font-size: 1.4rem;
    box-shadow: 0 8px 0 #16a34a, 0 15px 25px rgba(34, 197, 94, 0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.primary-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 11px 0 #16a34a, 0 20px 30px rgba(34, 197, 94, 0.4);
    filter: brightness(1.05);
}
.primary-btn:active {
    transform: translateY(6px);
    box-shadow: 0 2px 0 #16a34a, 0 5px 10px rgba(34, 197, 94, 0.2);
}
.primary-btn.hidden { display: none; }

.secondary-btn {
    background: white;
    color: var(--text-dark);
    border: 3px solid rgba(229, 185, 138, 0.6);
    padding: 1rem 2.5rem;
    font-size: 1.2rem;
    box-shadow: 0 6px 0 rgba(229, 185, 138, 0.4), 0 10px 20px rgba(0,0,0,0.05);
}
.secondary-btn:hover { 
    background: var(--cream);
    transform: translateY(-2px);
    box-shadow: 0 8px 0 rgba(229, 185, 138, 0.4), 0 12px 25px rgba(0,0,0,0.08);
}
.secondary-btn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 rgba(229, 185, 138, 0.4), 0 5px 10px rgba(0,0,0,0.05);
}

.welcome-buttons { display: flex; gap: 1rem; justify-content: center; align-items: center; flex-wrap: wrap; }
.welcome-buttons a { text-decoration: none; }

.pulse-anim { animation: customPulse 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes customPulse {
    0% { transform: scale(1); box-shadow: 0 8px 0 #16a34a, 0 0 0 0 rgba(74, 222, 128, 0.7); }
    50% { transform: scale(1.02); box-shadow: 0 8px 0 #16a34a, 0 0 0 15px rgba(74, 222, 128, 0); }
    100% { transform: scale(1); box-shadow: 0 8px 0 #16a34a, 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* --- VIEW 2: ACCOUNTING --- */
.accounting-view::before {
    content: ''; position: absolute; top:0; left:0; right:0; bottom:0;
    background: rgba(253, 251, 247, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.accounting-container {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 900px;
    padding: 1rem 1rem 2rem 1rem;
    height: 100%;
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Scontrino (Receipt) */
.receipt-card {
    background: #fff;
    padding: 1.5rem 2rem;
    border-radius: 8px;
    width: 100%;
    max-width: 550px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1), inset 0 0 0 1px rgba(0,0,0,0.05);
    position: relative;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.05));
    transition: transform 0.3s;
}
.receipt-card::before { /* Scontrino top edge */
    content: ""; position: absolute; top: -10px; left: 0; width: 100%; height: 10px;
    background: radial-gradient(circle at 10px 0, transparent 10px, #fff 11px) repeat-x;
    background-size: 20px 10px;
}
.receipt-card::after { /* Scontrino bottom edge */
    content: ""; position: absolute; bottom: -10px; left: 0; width: 100%; height: 10px;
    background: radial-gradient(circle at 10px 10px, transparent 10px, #fff 11px) repeat-x;
    background-size: 20px 10px;
}
.receipt-title {
    text-align: center; 
    font-size: 1.4rem; 
    margin-bottom: 0.8rem; 
    color: #64748b;
    font-weight: 800; 
    letter-spacing: 3px; 
    text-transform: uppercase;
    border-bottom: 2px dashed #e2e8f0;
    padding-bottom: 1rem;
}
.receipt-row {
    display: flex; 
    justify-content: space-between; 
    padding: 0.4rem 0;
    border-bottom: 1px dotted #cbd5e1; 
    font-size: 1.3rem;
    color: #334155;
}
.receipt-row:last-child { border-bottom: none; }
.receipt-row strong { font-weight: 800; color: #0f172a; }

.register-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 1.5rem;
}

/* Baskets */
.baskets { display: flex; gap: 2rem; width: 100%; }
.basket {
    flex: 1;
    background: rgba(255, 255, 255, 0.5);
    border: 4px dashed rgba(229, 185, 138, 0.8);
    border-radius: var(--radius-lg);
    min-height: 120px;
    padding: 2rem 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: inset 0 10px 20px rgba(0,0,0,0.02);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    align-items: center;
    position: relative;
}
.basket-label {
    position: absolute;
    top: -20px;
    background: white;
    color: var(--text-dark);
    padding: 0.5rem 2rem;
    border-radius: var(--radius-full);
    font-weight: 900; 
    font-size: 1.2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 3px solid transparent;
}
.dare-basket .basket-label { border-color: var(--accent-green); color: var(--accent-green-dark); }
.avere-basket .basket-label { border-color: var(--accent-blue); color: var(--accent-blue-dark); }

.dare-basket.drag-over { 
    border-style: solid;
    border-color: var(--accent-green); 
    background: rgba(74, 222, 128, 0.1); 
    transform: scale(1.03); 
    box-shadow: 0 10px 30px rgba(74, 222, 128, 0.2);
}
.avere-basket.drag-over { 
    border-style: solid;
    border-color: var(--accent-blue); 
    background: rgba(96, 165, 250, 0.1); 
    transform: scale(1.03); 
    box-shadow: 0 10px 30px rgba(96, 165, 250, 0.2);
}

/* Accounts Tray */
.accounts-tray {
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 1rem;
    background: rgba(229, 185, 138, 0.2);
    padding: 1rem;
    border-radius: var(--radius-lg);
    border: 2px solid rgba(229, 185, 138, 0.4);
    width: 100%;
    min-height: 100px;
    box-shadow: inset 0 5px 15px rgba(0,0,0,0.03);
}

/* Account Cards */
.account-card {
    background: white;
    color: var(--text-dark);
    padding: 0.8rem 1.4rem;
    border-radius: var(--radius-md);
    font-weight: 800;
    font-size: 1.1rem;
    border: 2px solid rgba(229, 185, 138, 0.3);
    border-bottom: 5px solid rgba(229, 185, 138, 0.5);
    cursor: grab;
    transition: border-color 0.2s, border-bottom-color 0.2s, box-shadow 0.2s, background-color 0.2s, opacity 0.2s, transform 0.1s ease-out;
    touch-action: none;
    -webkit-touch-callout: none;
    box-shadow: var(--shadow-sm);
    transform-style: preserve-3d;
    backface-visibility: hidden;
}
.account-card:hover { 
    transform: translateY(-4px); 
    border-bottom-color: var(--accent-purple); 
    box-shadow: 0 8px 15px rgba(167, 139, 250, 0.2);
}
.account-card:active { 
    cursor: grabbing; 
    transform: translateY(2px); 
    border-bottom-width: 2px; 
    margin-top: 3px;
}
.account-card.dragging { opacity: 0.4; transform: scale(1.05); }

.account-card.selected {
    border-color: var(--accent-purple);
    border-bottom-color: var(--accent-purple);
    background: #f5f3ff;
    transform: translateY(-6px) scale(1.05);
    box-shadow: 0 10px 20px rgba(167, 139, 250, 0.3);
    z-index: 20;
}

.drag-clone {
    position: fixed;
    z-index: 500;
    pointer-events: none;
    margin: 0;
    transform: scale(1.1) rotate(4deg);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    opacity: 0.9;
}

body.has-selection .basket { cursor: pointer; border-style: dashed; }
body.has-selection .dare-basket { border-color: var(--accent-green); }
body.has-selection .avere-basket { border-color: var(--accent-blue); }

.checkout-btn { margin-top: 1rem; width: 100%; max-width: 400px;}

/* --- FEEDBACK OVERLAY --- */
.feedback-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.8); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.4s; z-index: 100;
}
.feedback-overlay.active { opacity: 1; pointer-events: auto; }
.feedback-modal {
    background: white;
    padding: 3.5rem 3rem; 
    border-radius: var(--radius-lg);
    max-width: 500px; width: 90%; 
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
    transform: scale(0.8) translateY(20px); 
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}
.feedback-overlay.active .feedback-modal { transform: scale(1) translateY(0); }
.feedback-modal::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 8px;
    background: linear-gradient(90deg, var(--accent-green), var(--accent-blue));
}
.feedback-modal.error::before { background: var(--accent-red); }

.feedback-avatar-container { 
    margin: 0 auto 1.5rem; 
    width: 140px; height: 140px; 
    border-radius: 50%; 
    overflow: hidden; 
    border: 8px solid white; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); 
    background: var(--cream);
    position: relative;
    z-index: 2;
}
.feedback-avatar { width: 100%; height: 100%; object-fit: cover; }
.feedback-modal h2 { font-size: 2.5rem; margin-bottom: 1rem; color: var(--text-dark); font-weight: 900; }
.feedback-modal.error h2 { color: var(--accent-red); }
.feedback-modal p { font-size: 1.25rem; margin-bottom: 2.5rem; color: var(--text-light); font-weight: 600; line-height: 1.6; }

.rewards { display: flex; justify-content: center; gap: 1rem; margin-bottom: 2.5rem; }
.reward-pill { 
    background: linear-gradient(135deg, var(--accent-gold), #f59e0b); 
    color: white; 
    padding: 0.8rem 1.8rem; 
    border-radius: var(--radius-full); 
    font-weight: 900; 
    font-size: 1.3rem; 
    box-shadow: 0 6px 15px rgba(245, 158, 11, 0.3); 
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.feedback-modal.error .rewards { display: none; }

/* --- EOD VIEW (Night Mode) --- */
.night-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #0f172a, #1e1b4b);
    opacity: 0; pointer-events: none; transition: opacity 2s ease-in-out;
}
.night-overlay.active { opacity: 0.95; }

.eod-view {
    background: transparent;
    justify-content: center;
    overflow-y: auto;
    padding: 2rem 0;
}
.eod-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: var(--shadow-glass), inset 0 0 0 2px rgba(255,255,255,0.8);
    border-radius: var(--radius-lg);
    position: relative;
    z-index: 10;
    padding: 4rem 3rem;
    text-align: center;
    max-width: 550px;
    width: 90%;
    margin: auto;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
}
.eod-card h2 { font-size: 3.5rem; color: white; margin-bottom: 0.5rem; text-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.eod-subtitle { font-size: 1.4rem; color: #cbd5e1; font-weight: 700; margin-bottom: 3rem; }
.eod-stats { display: flex; flex-direction: column; gap: 1.2rem; margin-bottom: 3rem; }
.eod-stat { 
    background: rgba(255,255,255,0.1); 
    padding: 1.2rem 1.8rem; 
    border-radius: var(--radius-md); 
    display: flex; justify-content: space-between; 
    font-size: 1.3rem; font-weight: 800; 
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.1);
}
.eod-stat strong { color: var(--accent-gold); }
.eod-buttons { display: flex; flex-direction: column; gap: 1rem; }

/* --- GAMEOVER VIEW --- */
.gameover-view { background: linear-gradient(135deg, #451a1a, #2a0808); }
.gameover-card { 
    background: white; 
    padding: 4rem 3rem; 
    border-radius: var(--radius-lg); 
    text-align: center; 
    max-width: 550px; width: 90%; 
    z-index: 10; 
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    border-top: 10px solid var(--accent-red);
}
.gameover-title { font-size: 3.5rem; color: var(--accent-red); margin-bottom: 1.5rem; font-weight: 900; }
.gameover-text { font-size: 1.4rem; color: var(--text-light); font-weight: 700; margin-bottom: 3rem; line-height: 1.5; }

/* --- UPGRADES SHOP VIEW --- */
.upgrades-card { 
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: var(--shadow-glass), inset 0 0 0 2px rgba(255,255,255,0.8);
    border-radius: var(--radius-lg);
    position: relative;
    z-index: 10;
    padding: 3rem 2rem; 
    max-width: 650px; width: 90%; max-height: 90vh; 
    display: flex; flex-direction: column; 
}
.upgrades-card h2 { font-size: 2.8rem; color: var(--text-dark); margin-bottom: 1.5rem; text-align: center; font-weight: 900; }
.upgrades-balance { 
    text-align: center; font-size: 1.5rem; color: var(--text-dark); margin-bottom: 2.5rem; font-weight: 800; 
    background: rgba(229, 185, 138, 0.2); padding: 1rem; border-radius: var(--radius-sm); 
}
.upgrades-list { display: flex; flex-direction: column; gap: 1.2rem; overflow-y: auto; margin-bottom: 2rem; padding-right: 0.5rem; }
.upgrade-item { 
    display: flex; align-items: center; justify-content: space-between; 
    background: white; padding: 1.5rem 2rem; border-radius: var(--radius-md); 
    border: 2px solid rgba(229, 185, 138, 0.3); transition: all 0.2s; 
    box-shadow: var(--shadow-sm);
}
.upgrade-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.upgrade-item.purchased { background: #f8fafc; border-color: #e2e8f0; opacity: 0.7; filter: grayscale(0.5); }
.upgrade-info { display: flex; align-items: center; gap: 1.5rem; flex: 1; }
.upgrade-icon { font-size: 3.5rem; }
.upgrade-text { display: flex; flex-direction: column; gap: 0.3rem;}
.upgrade-name { font-size: 1.4rem; font-weight: 900; color: var(--text-dark); }
.upgrade-desc { font-size: 1.05rem; color: var(--text-light); font-weight: 600; line-height: 1.4; }

.buy-btn { 
    background: linear-gradient(135deg, var(--accent-gold), #f59e0b); 
    color: white; border: none; padding: 1rem 2rem; border-radius: var(--radius-full); 
    font-weight: 900; font-size: 1.3rem; cursor: pointer; 
    box-shadow: 0 6px 0 #d97706, 0 10px 20px rgba(245, 158, 11, 0.3); 
    transition: all 0.1s; min-width: 140px; text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.buy-btn:active { transform: translateY(6px); box-shadow: 0 0px 0 #d97706; }
.buy-btn:disabled { background: #e2e8f0; color: #94a3b8; box-shadow: none; transform: none; cursor: not-allowed; text-shadow: none;}

/* --- COSMETICS & EFFECTS --- */
.decor-item { position: absolute; font-size: 8rem; z-index: 5; pointer-events: none; filter: drop-shadow(0 10px 10px rgba(0,0,0,0.2)); }
#decor-plant { bottom: 100px; left: 50px; }
.hidden { display: none !important; }

body.theme-gold .receipt-card { border-color: #fbbf24; background: #fffbeb; }
body.theme-gold .basket-label { background: #fbbf24; color: #78350f; }

#confetti-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1000; }

.shake { animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake {
    10%, 90% { transform: translate3d(-2px, 0, 0); }
    20%, 80% { transform: translate3d(5px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-8px, 0, 0); }
    40%, 60% { transform: translate3d(8px, 0, 0); }
}

.bounce-in { animation: bounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes bounceIn {
    0% { transform: scale(0.3); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* --- ONBOARDING OVERLAY --- */
.onboarding-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 200;
}
.onboarding-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.onboarding-modal {
    padding: 3.5rem 3rem 2.5rem 3rem;
    max-width: 550px;
    width: 90%;
    text-align: center;
    box-shadow: var(--shadow-lg), 0 25px 50px -12px rgba(0,0,0,0.4);
    position: relative;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.onboarding-overlay.active .onboarding-modal {
    transform: scale(1) translateY(0);
}
.close-onboarding-btn {
    position: absolute;
    top: 1.2rem;
    right: 1.5rem;
    background: transparent;
    border: none;
    font-size: 2.2rem;
    color: var(--text-light);
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s, transform 0.2s;
}
.close-onboarding-btn:hover {
    color: var(--text-dark);
    transform: scale(1.1);
}
.onboarding-modal h2 {
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}
.onboarding-steps {
    position: relative;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.onboarding-step {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    animation: fadeInStep 0.4s ease forwards;
}
.onboarding-step.active {
    display: flex;
}
@keyframes fadeInStep {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.onboarding-icon-container {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(229, 185, 138, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(229, 185, 138, 0.4);
    box-shadow: inset 0 4px 8px rgba(0,0,0,0.02);
}
.onboarding-step-icon {
    font-size: 2.8rem;
}
.onboarding-step h3 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-dark);
}
.onboarding-step p {
    font-size: 1.15rem;
    color: var(--text-light);
    line-height: 1.6;
    font-weight: 600;
    max-width: 440px;
}
.onboarding-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px dashed rgba(229, 185, 138, 0.3);
    padding-top: 1.5rem;
    margin-top: 0.5rem;
}
.step-indicators {
    display: flex;
    gap: 0.6rem;
}
.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e2e8f0;
    cursor: pointer;
    transition: all 0.3s ease;
}
.indicator.active {
    background: var(--accent-purple);
    transform: scale(1.2);
    box-shadow: 0 0 8px rgba(167, 139, 250, 0.5);
}
.onboarding-next-btn {
    padding: 0.8rem 2.2rem;
    font-size: 1.15rem;
    box-shadow: 0 5px 0 #16a34a, 0 10px 20px rgba(34, 197, 94, 0.2);
}


/* --- MODE SELECTION VIEW --- */
.mode-card {
    padding: 3rem 2.5rem;
    text-align: center;
    max-width: 800px;
    width: 92%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    animation: float 6s ease-in-out infinite;
}
.mode-title {
    font-size: 2.8rem;
    font-weight: 900;
    color: var(--text-dark);
    text-shadow: 1px 2px 0 rgba(229, 185, 138, 0.4);
}
.mode-subtitle {
    font-size: 1.25rem;
    color: var(--text-light);
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.modes-container {
    display: flex;
    gap: 2rem;
    width: 100%;
    margin-bottom: 1rem;
}
.mode-option-card {
    flex: 1;
    background: white;
    border: 3px solid rgba(229, 185, 138, 0.3);
    border-radius: var(--radius-lg);
    padding: 2.2rem 1.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    cursor: pointer;
    position: relative;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: var(--shadow-sm);
}
.mode-option-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--accent-purple);
    box-shadow: 0 12px 24px rgba(167, 139, 250, 0.15);
}
.mode-option-card:active {
    transform: translateY(-2px) scale(1.0);
}
.mode-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.05);
    border: 2px solid transparent;
}
.challenge-icon {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
}
.learning-icon {
    background: rgba(96, 165, 250, 0.15);
    border-color: rgba(96, 165, 250, 0.3);
}
.mode-option-card h3 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-dark);
}
.mode-option-card p {
    font-size: 1.1rem;
    color: var(--text-light);
    line-height: 1.5;
    font-weight: 600;
    margin-bottom: 1rem;
    flex-grow: 1;
}
.mode-badge {
    background: var(--cream);
    border: 2px solid rgba(229, 185, 138, 0.5);
    padding: 0.4rem 1.2rem;
    border-radius: var(--radius-full);
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-dark);
    box-shadow: var(--shadow-sm);
}

/* --- LEARNING SELECTION VIEW --- */
.learning-card {
    padding: 3rem 2rem;
    text-align: center;
    max-width: 900px;
    width: 92%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    max-height: 92vh;
}
.learning-title {
    font-size: 2.6rem;
    font-weight: 900;
    color: var(--text-dark);
    text-shadow: 1px 2px 0 rgba(229, 185, 138, 0.4);
}
.learning-subtitle {
    font-size: 1.2rem;
    color: var(--text-light);
    font-weight: 700;
}
.learning-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    width: 100%;
    margin: 0.5rem 0 1.5rem 0;
    overflow-y: auto;
    padding: 0.5rem;
}
.learning-day-card {
    background: white;
    border: 2px solid rgba(229, 185, 138, 0.3);
    border-bottom: 5px solid rgba(229, 185, 138, 0.5);
    border-radius: var(--radius-md);
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: var(--shadow-sm);
    min-height: 220px;
}
.learning-day-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent-purple);
    border-bottom-color: var(--accent-purple);
    box-shadow: 0 10px 20px rgba(167, 139, 250, 0.15);
}
.learning-day-card:active {
    transform: translateY(2px);
    border-bottom-width: 2px;
    margin-top: 3px;
}
.day-num {
    background: rgba(167, 139, 250, 0.15);
    color: #7c3aed;
    font-size: 0.95rem;
    font-weight: 800;
    padding: 0.3rem 1rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(167, 139, 250, 0.3);
}
.learning-day-card h4 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.3;
}
.day-topics {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.4;
    font-weight: 600;
    flex-grow: 1;
}


.day-card-buttons {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    margin-top: auto; /* Push buttons to the bottom of the card */
}
.day-card-buttons .btn {
    flex: 1;
    font-size: 0.95rem;
    padding: 0.5rem 0.8rem;
    border-radius: var(--radius-sm);
    border-width: 2px;
}
.day-card-buttons .btn-study {
    background: white;
    color: var(--text-dark);
    border-color: rgba(167, 139, 250, 0.5);
    box-shadow: 0 3px 0 rgba(167, 139, 250, 0.2);
}
.day-card-buttons .btn-study:hover {
    background: #fdfafb;
    border-color: var(--accent-purple);
}
.day-card-buttons .btn-study:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 rgba(167, 139, 250, 0.2);
}
.day-card-buttons .btn-practice {
    background: linear-gradient(135deg, var(--accent-green), var(--accent-green-dark));
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 3px 0 #16a34a;
}
.day-card-buttons .btn-practice:hover {
    filter: brightness(1.05);
}
.day-card-buttons .btn-practice:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #16a34a;
}

/* --- LESSON OVERLAY & MODAL --- */
.lesson-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 300;
}
.lesson-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.lesson-modal {
    padding: 2.5rem;
    max-width: 960px;
    width: 95%;
    height: 90vh;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: var(--shadow-lg), 0 30px 60px rgba(0,0,0,0.25);
    position: relative;
    overflow: hidden;
}
.lesson-overlay.active .lesson-modal {
    transform: scale(1) translateY(0);
}
.close-lesson-btn {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: transparent;
    border: none;
    font-size: 2.2rem;
    color: var(--text-light);
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s, transform 0.2s;
    z-index: 10;
}
.close-lesson-btn:hover {
    color: var(--text-dark);
    transform: scale(1.1);
}
.lesson-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 2px dashed rgba(229, 185, 138, 0.3);
    padding-bottom: 1rem;
}
.lesson-day-badge {
    background: rgba(167, 139, 250, 0.15);
    color: #7c3aed;
    font-size: 1rem;
    font-weight: 800;
    padding: 0.3rem 1.2rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(167, 139, 250, 0.3);
}
.lesson-header h2 {
    font-size: 2rem;
    font-weight: 900;
    color: var(--text-dark);
}
.lesson-body-container {
    display: flex;
    gap: 2rem;
    flex: 1;
    overflow: hidden;
}
.lesson-theory-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    padding-right: 0.5rem;
}
.lesson-concept-box {
    background: rgba(229, 185, 138, 0.15);
    border-left: 5px solid var(--wood-panel);
    padding: 1rem;
    border-radius: var(--radius-sm);
    font-size: 1.05rem;
    line-height: 1.5;
}
.lesson-concept-box strong {
    color: var(--text-dark);
    display: block;
    margin-bottom: 0.3rem;
}
.lesson-text-content {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    color: var(--text-dark);
}
.lesson-text-content h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-dark);
    border-bottom: 1px solid rgba(229, 185, 138, 0.2);
    padding-bottom: 0.5rem;
}
.lesson-text-content p {
    font-size: 1.15rem;
    line-height: 1.6;
    font-weight: 600;
    color: var(--text-light);
}

/* --- ANIMATION PANEL --- */
.lesson-animation-panel {
    flex: 1.2;
    background: #fdfbf7;
    border: 2px solid rgba(229, 185, 138, 0.3);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 5px 15px rgba(0,0,0,0.02);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.animation-stage {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

/* Stage Personaggio */
.stage-avatar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    animation: bounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.stage-avatar-wrapper {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    border: 8px solid white;
    box-shadow: var(--shadow-md);
}
.stage-avatar-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.stage-avatar-name {
    background: white;
    border: 2px solid rgba(229, 185, 138, 0.4);
    padding: 0.4rem 1.4rem;
    border-radius: var(--radius-full);
    font-weight: 800;
    font-size: 1.1rem;
    box-shadow: var(--shadow-sm);
}

/* Stage T-Ledger */
.stage-ledger-container {
    display: flex;
    gap: 1rem;
    width: 100%;
    height: 100%;
    align-items: flex-start;
}
.ledger-t-box {
    flex: 1;
    background: white;
    border: 2px solid rgba(229, 185, 138, 0.3);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    min-height: 240px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}
.ledger-header {
    padding: 0.8rem;
    text-align: center;
    font-weight: 900;
    font-size: 1.05rem;
    border-bottom: 2px solid rgba(229, 185, 138, 0.3);
}
.dare-header { background: rgba(74, 222, 128, 0.1); color: var(--accent-green-dark); }
.avere-header { background: rgba(96, 165, 250, 0.1); color: var(--accent-blue-dark); }
.ledger-body {
    flex: 1;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
}
.ledger-entry {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-sm);
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.ledger-entry.highlight {
    border-color: var(--accent-purple);
    background: #f5f3ff;
    box-shadow: 0 0 10px rgba(167, 139, 250, 0.2);
}

/* Floating animated icons area */
.animation-floating-area {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 10;
}
.animated-icon {
    position: absolute;
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
    box-shadow: var(--shadow-lg), 0 0 0 4px rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    border: 2px solid var(--wood-light);
    z-index: 100;
}
.animated-icon.fly-to-dare {
    animation: flyToDare 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.animated-icon.fly-to-avere {
    animation: flyToAvere 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes flyToDare {
    0% { left: 45%; top: 40%; transform: scale(0.5) rotate(0deg); opacity: 0; }
    20% { opacity: 1; transform: scale(1.2); }
    100% { left: 22%; top: 60%; transform: scale(1) rotate(360deg); opacity: 1; }
}
@keyframes flyToAvere {
    0% { left: 45%; top: 40%; transform: scale(0.5) rotate(0deg); opacity: 0; }
    20% { opacity: 1; transform: scale(1.2); }
    100% { left: 72%; top: 60%; transform: scale(1) rotate(360deg); opacity: 1; }
}

/* --- FOOTER CONTROLS --- */
.lesson-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px dashed rgba(229, 185, 138, 0.3);
    padding-top: 1.2rem;
    margin-top: 0.2rem;
}
.small-btn {
    padding: 0.6rem 1.6rem !important;
    font-size: 1.1rem !important;
    box-shadow: var(--btn-shadow) !important;
}
.lesson-progress-bar {
    flex: 1;
    margin: 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}
.lesson-progress-fill {
    width: 100%;
    height: 8px;
    background: #f0e6da;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.lesson-progress-fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: var(--progress, 0%);
    background: linear-gradient(90deg, var(--accent-purple), #d8b4e2);
    border-radius: 4px;
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.lesson-progress-text {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-light);
}


/* --- MASCOT BARNABY STYLES --- */
.learning-mascot-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid rgba(229, 185, 138, 0.3);
    padding: 1.2rem 2rem;
    border-radius: var(--radius-lg);
    width: 100%;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
    text-align: left;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.mascot-img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 4px solid white;
    box-shadow: var(--shadow-md);
    object-fit: cover;
    flex-shrink: 0;
    animation: breathe 6s ease-in-out infinite;
}
.mascot-speech {
    background: white;
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
    border: 2px solid rgba(229, 185, 138, 0.4);
    position: relative;
    box-shadow: var(--shadow-sm);
    flex-grow: 1;
}
.mascot-speech::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 16px;
    height: 16px;
    background: white;
    border-left: 2px solid rgba(229, 185, 138, 0.4);
    border-bottom: 2px solid rgba(229, 185, 138, 0.4);
}
.mascot-speech p {
    font-size: 1.1rem;
    line-height: 1.5;
    font-weight: 700;
    color: var(--text-dark);
}

.lesson-mascot-tip {
    background: #fdf6ff;
    border: 2px solid #e9d5ff;
    border-left: 6px solid var(--accent-purple);
    padding: 1rem 1.2rem;
    border-radius: var(--radius-sm);
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-align: left;
    box-shadow: 0 4px 6px rgba(167, 139, 250, 0.05);
}
.mascot-tip-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #7c3aed;
    font-size: 1.05rem;
    font-weight: 800;
}
.mascot-tip-icon {
    font-size: 1.3rem;
}
#lesson-mascot-tip-text {
    font-size: 1.05rem;
    line-height: 1.5;
    font-weight: 600;
    color: #581c87;
}

/* --- RESPONSIVE MOBILE / TABLET --- */
@media (max-width: 768px), (max-height: 700px) {
    .hud { padding: 0.6rem 1rem; }
    .hud-item { padding: 0.4rem 0.8rem; font-size: 1rem; gap: 0.4rem;}
    .xp-box { max-width: 140px; }
    #volume-slider { display: none; }
    .icon-btn { width: 38px; height: 38px; font-size: 1rem; }

    .game-title { font-size: 2.8rem; }
    .welcome-card { padding: 2.5rem 1.5rem; }
    .btn { font-size: 1.2rem; padding: 1rem 2rem; width: 100%; }
    .welcome-buttons { flex-direction: column; width: 100%; }

    .accounting-container {
        overflow-y: auto;
        max-height: 100%;
        -webkit-overflow-scrolling: touch;
        gap: 1rem;
        padding: 1rem;
        justify-content: flex-start;
    }

    .receipt-card { padding: 1.5rem; }
    .receipt-title { font-size: 1.3rem; margin-bottom: 1rem; }
    .receipt-row { font-size: 1.1rem; padding: 0.5rem 0; }

    .baskets { gap: 1rem; }
    .basket { min-height: 140px; padding: 1.5rem 0.8rem 1rem; border-width: 3px; }
    .basket-label { font-size: 1rem; padding: 0.4rem 1.2rem; top: -16px; }

    .accounts-tray { padding: 1rem 0.8rem; gap: 0.6rem; min-height: auto; }
    .account-card { font-size: 0.95rem; padding: 0.6rem 1rem; }

    .customer-avatar { width: 220px; height: 220px; border-width: 8px;}
    .speech-bubble { bottom: 220px; font-size: 1.15rem; max-width: 300px; padding: 1.5rem; }

    .feedback-modal { padding: 2.5rem 1.5rem; }
    .feedback-modal h2 { font-size: 2rem; }
    .feedback-avatar-container { width: 100px; height: 100px; }
    
    .eod-card { padding: 2rem 1.5rem; }
    .eod-card h2 { font-size: 2.5rem; }
    .eod-stat { font-size: 1.1rem; padding: 1rem; }
    
    .upgrades-card { padding: 2rem 1.5rem; }
    .upgrade-item { flex-direction: column; text-align: center; gap: 1.5rem; }
    .upgrade-info { flex-direction: column; gap: 0.5rem; }
    .buy-btn { width: 100%; }

    /* Mode and Learning Selectors responsiveness */
    .mode-card, .learning-card { padding: 1.5rem; max-height: 98vh; gap: 1rem; }
    .mode-title { font-size: 1.8rem; }
    .mode-subtitle { font-size: 1.05rem; }
    .modes-container { flex-direction: column; gap: 1rem; }
    .mode-option-card { padding: 1.5rem; gap: 0.8rem; }
    .mode-option-card h3 { font-size: 1.3rem; }
    .mode-option-card p { font-size: 0.95rem; margin-bottom: 0.5rem; }
    .mode-icon-wrapper { width: 60px; height: 60px; font-size: 2rem; }
    
    .learning-title { font-size: 1.6rem; }
    .learning-subtitle { font-size: 1rem; }
    .learning-grid { grid-template-columns: 1fr; gap: 0.8rem; max-height: 60vh; }
    .learning-day-card { min-height: auto; padding: 1.2rem; flex-direction: row; gap: 1rem; text-align: left; }
    .learning-day-card h4 { font-size: 1.1rem; }
    .learning-day-card .day-topics { font-size: 0.85rem; }
    .day-num { padding: 0.2rem 0.8rem; font-size: 0.85rem; }

    /* Lesson Modal responsiveness */
    .lesson-overlay { padding: 0.5rem; }
    .lesson-modal { height: 98vh; width: 100%; padding: 1.2rem; gap: 0.8rem; }
    .lesson-header { padding-bottom: 0.6rem; }
    .lesson-header h2 { font-size: 1.35rem; }
    .lesson-day-badge { font-size: 0.85rem; padding: 0.2rem 0.8rem; }
    .lesson-body-container { flex-direction: column; gap: 1rem; overflow-y: auto; }
    .lesson-theory-panel { flex: none; overflow-y: visible; max-height: none; padding-right: 0; }
    .lesson-concept-box { padding: 0.8rem; font-size: 0.95rem; }
    .lesson-text-content h3 { font-size: 1.15rem; }
    .lesson-text-content p { font-size: 1rem; }
    .lesson-animation-panel { flex: 1; min-height: 280px; overflow: hidden; }
    .ledger-t-box { min-height: auto; height: 100%; }
    .ledger-header { font-size: 0.85rem; padding: 0.5rem; }
    .ledger-entry { font-size: 0.85rem; padding: 0.4rem 0.6rem; }
    .lesson-footer { padding-top: 0.8rem; margin-top: 0; }
    .lesson-progress-bar { margin: 0 0.8rem; }
    .lesson-progress-text { font-size: 0.85rem; }
    .small-btn { padding: 0.5rem 1rem !important; font-size: 0.95rem !important; }
    .close-lesson-btn { top: 0.5rem; right: 1rem; font-size: 1.8rem; }
    
    @keyframes flyToDare {
        0% { left: 45%; top: 40%; transform: scale(0.5); opacity: 0; }
        20% { opacity: 1; transform: scale(1.1); }
        100% { left: 15%; top: 50%; transform: scale(0.9); opacity: 1; }
    }
    @keyframes flyToAvere {
        0% { left: 45%; top: 40%; transform: scale(0.5); opacity: 0; }
        20% { opacity: 1; transform: scale(1.1); }
        100% { left: 65%; top: 50%; transform: scale(0.9); opacity: 1; }
    }

    /* Mascot mobile responsiveness */
    .learning-mascot-header { flex-direction: column; gap: 0.8rem; padding: 1rem; text-align: center; }
    .mascot-img { width: 70px; height: 70px; }
    .mascot-speech::before { left: 50%; top: -8px; transform: translateX(-50%) rotate(45deg); border-left: 2px solid rgba(229, 185, 138, 0.4); border-top: 2px solid rgba(229, 185, 138, 0.4); border-right: none; border-bottom: none; }
    .mascot-speech p { font-size: 0.95rem; }
    .lesson-mascot-tip { padding: 0.8rem; margin-top: 0.8rem; }
    #lesson-mascot-tip-text { font-size: 0.95rem; }

    /* Onboarding adjustments */
    .onboarding-modal { padding: 2.2rem 1.5rem 1.5rem 1.5rem; gap: 1rem; }
    .onboarding-modal h2 { font-size: 1.8rem; }
    .onboarding-steps { min-height: 220px; }
    .onboarding-step h3 { font-size: 1.25rem; }
    .onboarding-step p { font-size: 0.95rem; line-height: 1.45; }
    .onboarding-icon-container { width: 70px; height: 70px; }
    .onboarding-step-icon { font-size: 2.2rem; }
    .onboarding-footer { margin-top: 0.2rem; padding-top: 1rem; }
}

/* --- HUD HOME BUTTON & INTERACTION --- */
button.hud-item {
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    outline: none;
}
button.hud-item:hover {
    background: var(--cream);
    border-color: rgba(229, 185, 138, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
button.hud-item:active {
    transform: translateY(1px);
}

/* --- DANGER BUTTON (red gradient) --- */
.danger-btn {
    background: linear-gradient(135deg, var(--accent-red), #ef4444);
    color: white !important;
    border: 3px solid rgba(255,255,255,0.8);
    box-shadow: 0 8px 0 #dc2626, 0 15px 25px rgba(239, 68, 68, 0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.danger-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 11px 0 #dc2626, 0 20px 30px rgba(239, 68, 68, 0.4);
    filter: brightness(1.05);
}
.danger-btn:active {
    transform: translateY(6px);
    box-shadow: 0 2px 0 #dc2626, 0 5px 10px rgba(239, 68, 68, 0.2);
}

/* --- CONFIRM EXIT MODAL --- */
.confirm-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 250;
}
.confirm-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.confirm-modal {
    padding: 3rem 2.5rem;
    max-width: 480px;
    width: 90%;
    text-align: center;
    box-shadow: var(--shadow-lg), 0 25px 50px -12px rgba(0,0,0,0.3);
    position: relative;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.confirm-overlay.active .confirm-modal {
    transform: scale(1) translateY(0);
}
.confirm-modal h2 {
    font-size: 1.8rem;
    color: var(--text-dark);
    font-weight: 900;
}
.confirm-modal p {
    font-size: 1.1rem;
    color: var(--text-light);
    line-height: 1.5;
    font-weight: 600;
}
.confirm-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
}
@media (max-width: 768px) {
    .confirm-buttons {
        flex-direction: column;
        width: 100%;
    }
    .confirm-buttons .btn {
        width: 100%;
        padding: 0.8rem 1.5rem;
        font-size: 1.1rem;
    }
    .confirm-modal {
        padding: 2rem 1.5rem;
    }
    .confirm-modal h2 {
        font-size: 1.5rem;
    }
}

/* ==========================================
   Contabilizzando - MOBILE OPTIMIZATIONS & TABS
   ========================================== */

/* Selection Guide Banner style */
.selection-guide {
    width: 100%;
    background: rgba(167, 139, 250, 0.1);
    border: 2px dashed rgba(167, 139, 250, 0.4);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    text-align: center;
    margin-bottom: 0.5rem;
    animation: bounceIn 0.3s ease-out;
    box-sizing: border-box;
}
.selection-guide span {
    font-size: 1rem;
    font-weight: 800;
    color: var(--accent-purple-dark);
}
.selection-guide.hidden {
    display: none;
}

/* Pulsing animations for baskets during card selection */
@keyframes darePulse {
    0% { box-shadow: 0 0 4px rgba(74, 222, 128, 0.2); border-color: rgba(74, 222, 128, 0.5); }
    100% { box-shadow: 0 0 16px rgba(74, 222, 128, 0.6); border-color: var(--accent-green); background: rgba(74, 222, 128, 0.08); }
}
@keyframes averePulse {
    0% { box-shadow: 0 0 4px rgba(96, 165, 250, 0.2); border-color: rgba(96, 165, 250, 0.5); }
    100% { box-shadow: 0 0 16px rgba(96, 165, 250, 0.6); border-color: var(--accent-blue); background: rgba(96, 165, 250, 0.08); }
}

body.has-selection .dare-basket {
    animation: darePulse 1.2s infinite alternate;
}
body.has-selection .avere-basket {
    animation: averePulse 1.2s infinite alternate;
}
body.has-selection .accounts-tray {
    border-style: dashed;
    border-color: var(--accent-purple);
}

/* Zero Streak Auto Hide Class */
.streak-box.zero-streak {
    display: none !important;
}

/* Collapsible Receipt Default Desktop Styles */
.receipt-toggle-header {
    pointer-events: none;
    display: flex;
    justify-content: center;
    width: 100%;
}
.receipt-main-title {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #64748b;
    width: 100%;
    text-align: center;
    border-bottom: 2px dashed #e2e8f0;
    padding-bottom: 1rem;
    display: block;
}
.receipt-toggle-icon {
    display: none;
}
.receipt-header-icon {
    display: none;
}
.receipt-summary-text {
    display: none;
}

/* Lesson Tabs Default Desktop Styles */
.lesson-tabs {
    display: none;
}

/* Responsive Overrides (max-width: 768px) */
@media (max-width: 768px) {
    /* Collapsible Receipt on Mobile */
    .receipt-toggle-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        cursor: pointer;
        pointer-events: auto;
        padding-bottom: 0;
    }
    .receipt-main-title {
        font-size: 1.15rem;
        font-weight: 800;
        letter-spacing: 1px;
        color: #475569;
        border-bottom: none;
        padding-bottom: 0;
        text-align: left;
        display: inline;
    }
    .receipt-header-icon {
        display: inline;
        font-size: 1.2rem;
        margin-right: 0.3rem;
    }
    .receipt-toggle-icon {
        display: inline-block;
        font-size: 1rem;
        color: var(--text-light);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .receipt-card {
        padding: 0.8rem 1.2rem;
        border-radius: 16px;
        margin-bottom: 0.5rem;
        width: 100%;
        max-width: 100%;
    }
    .receipt-card::before, .receipt-card::after {
        display: none; /* Hide jagged edges on mobile to save layout spacing */
    }
    
    /* Toggle details block display */
    .receipt-card.collapsed .receipt-details {
        display: none;
    }
    .receipt-card.collapsed .receipt-toggle-icon {
        transform: rotate(-90deg);
    }
    .receipt-card:not(.collapsed) .receipt-details {
        display: block;
        margin-top: 0.8rem;
        border-top: 2px dashed #e2e8f0;
        padding-top: 0.8rem;
        animation: fadeInStep 0.3s ease;
    }
    
    .receipt-card.collapsed .receipt-summary-text {
        display: inline-block;
        font-size: 0.95rem;
        font-weight: 800;
        color: var(--accent-purple-dark);
        background: rgba(167, 139, 250, 0.12);
        padding: 0.2rem 0.6rem;
        border-radius: var(--radius-sm);
        margin-left: 0.6rem;
    }
    .receipt-card:not(.collapsed) .receipt-summary-text {
        display: none;
    }

    /* Lesson Tabs on Mobile */
    .lesson-tabs {
        display: flex;
        width: 100%;
        border-bottom: 3px solid rgba(229, 185, 138, 0.2);
        margin-bottom: 0.5rem;
        background: rgba(255, 255, 255, 0.5);
        border-radius: var(--radius-sm);
        padding: 0.2rem;
        box-sizing: border-box;
    }
    .lesson-tab-btn {
        flex: 1;
        padding: 0.75rem 0.5rem;
        background: transparent;
        border: none;
        font-family: inherit;
        font-weight: 800;
        font-size: 1rem;
        color: var(--text-light);
        cursor: pointer;
        transition: all 0.25s;
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
    }
    .lesson-tab-btn.active {
        color: var(--accent-purple-dark);
        background: white;
        box-shadow: var(--shadow-sm);
    }
    
    /* Control active panel display inside lesson body container */
    .lesson-body-container.active-tab-theory #lesson-theory-panel {
        display: flex !important;
    }
    .lesson-body-container.active-tab-theory #lesson-animation-panel {
        display: none !important;
    }
    .lesson-body-container.active-tab-animation #lesson-theory-panel {
        display: none !important;
    }
    .lesson-body-container.active-tab-animation #lesson-animation-panel {
        display: flex !important;
        flex-direction: column;
        min-height: 320px;
    }
    
    /* Responsive adjustments for Lesson modal heights */
    .lesson-modal {
        max-height: 96vh;
        height: 96vh;
    }
}

/* Extra Compact HUD Rules (< 600px) */
@media (max-width: 600px) {
    .hud {
        padding: 0.5rem 0.75rem;
        gap: 0.4rem;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #hud-home-btn .hud-text {
        display: none; /* Icon-only menu button */
    }
    .hud-item {
        padding: 0.4rem 0.6rem;
        font-size: 0.95rem;
        gap: 0.35rem;
    }
}

/* Ultra Compact HUD Rules (< 480px) */
@media (max-width: 480px) {
    .xp-box .xp-bar-container {
        display: none; /* Hide progress bar, leave star + Lv */
    }
    .xp-box {
        max-width: fit-content;
        flex: none;
    }
    .mode-box {
        display: none; /* Mode is already obvious or can be seen on scontrino */
    }
    .game-title {
        font-size: 2.2rem !important;
    }
    .welcome-subtitle {
        font-size: 1.1rem !important;
        line-height: 1.4;
    }
}

/* --- QUICK TOPIC FILTER BAR --- */
.topic-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 0.8rem;
}
.topic-chip {
    background: rgba(255, 255, 255, 0.8);
    border: 2px solid rgba(229, 185, 138, 0.5);
    color: var(--text-dark);
    font-family: inherit;
    font-weight: 800;
    font-size: 0.95rem;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: var(--shadow-sm);
}
.topic-chip:hover {
    transform: translateY(-2px);
    border-color: var(--accent-purple);
    background: white;
}
.topic-chip.active {
    background: var(--accent-purple);
    color: white;
    border-color: var(--accent-purple-dark);
    box-shadow: 0 4px 10px rgba(167, 139, 250, 0.3);
}

/* Day Badge Styling */
.badge-advanced {
    background: rgba(245, 158, 11, 0.18) !important;
    color: #d97706 !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}
.badge-master {
    background: rgba(239, 68, 68, 0.18) !important;
    color: #dc2626 !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
}
.highlight-card {
    border-color: rgba(167, 139, 250, 0.5) !important;
    background: linear-gradient(180deg, #ffffff 0%, #faf5ff 100%) !important;
}

/* --- FINANCIAL STATEMENTS & T-ACCOUNTS OVERLAY --- */
.financial-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 350;
}
.financial-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.financial-modal {
    padding: 2.5rem;
    max-width: 1100px;
    width: 95%;
    height: 92vh;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    transform: scale(0.92) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: var(--shadow-lg), 0 30px 60px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
}
.financial-overlay.active .financial-modal {
    transform: scale(1) translateY(0);
}
.close-financial-btn {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: transparent;
    border: none;
    font-size: 2.4rem;
    color: var(--text-light);
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s, transform 0.2s;
    z-index: 10;
}
.close-financial-btn:hover {
    color: var(--text-dark);
    transform: scale(1.1);
}
.financial-header {
    text-align: center;
    border-bottom: 2px dashed rgba(229, 185, 138, 0.4);
    padding-bottom: 0.8rem;
}
.financial-header h2 {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--text-dark);
}
.financial-header p {
    font-size: 1.05rem;
    color: var(--text-light);
    font-weight: 700;
}

/* Tabs */
.financial-tabs {
    display: flex;
    gap: 0.8rem;
    border-bottom: 2px solid rgba(229, 185, 138, 0.3);
    padding-bottom: 0.5rem;
}
.financial-tab-btn {
    flex: 1;
    padding: 0.8rem 1.2rem;
    background: rgba(248, 250, 252, 0.8);
    border: 2px solid rgba(229, 185, 138, 0.4);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.financial-tab-btn:hover {
    background: white;
    border-color: var(--accent-purple);
}
.financial-tab-btn.active {
    background: white;
    color: var(--accent-purple-dark);
    border-color: var(--accent-purple);
    box-shadow: var(--shadow-sm);
}

.financial-body {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.4rem;
}
.financial-tab-panel {
    display: none;
    height: 100%;
}
.financial-tab-panel.active {
    display: block;
}

/* Statements Grid (Stato Patrimoniale & Conto Economico) */
.financial-statements-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    height: 100%;
}
.statement-card {
    background: #fdfbf7;
    border: 2px solid rgba(229, 185, 138, 0.4);
    border-radius: var(--radius-md);
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: var(--shadow-sm);
}
.statement-card h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-dark);
    text-align: center;
    border-bottom: 2px solid rgba(229, 185, 138, 0.3);
    padding-bottom: 0.6rem;
}
.statement-table-wrapper {
    flex: 1;
    overflow-y: auto;
}
.statement-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
}
.statement-table th {
    background: #f1f5f9;
    padding: 0.8rem;
    font-weight: 800;
    text-align: left;
    border-bottom: 2px solid #cbd5e1;
}
.statement-table td {
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 700;
    color: var(--text-dark);
    vertical-align: top;
}
.statement-table tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.6);
}
.table-total-row td {
    background: #e2e8f0 !important;
    font-weight: 800;
    font-size: 1.05rem;
    border-top: 2px solid #94a3b8;
}
.result-row td {
    background: rgba(167, 139, 250, 0.15) !important;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--accent-purple-dark);
    padding: 0.9rem;
}

/* Mastrini Grid (T-Accounts) */
.mastrini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.2rem;
    padding: 0.5rem;
}
.t-account-card {
    background: white;
    border: 2px solid rgba(229, 185, 138, 0.5);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.t-account-header {
    background: var(--cream);
    padding: 0.6rem 1rem;
    font-weight: 800;
    font-size: 1.1rem;
    text-align: center;
    color: var(--text-dark);
    border-bottom: 2px solid var(--wood-light);
}
.t-account-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100px;
    background: #fafafa;
}
.t-col {
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.t-col-dare {
    border-right: 2px solid var(--wood-light);
    background: rgba(74, 222, 128, 0.05);
}
.t-col-avere {
    background: rgba(96, 165, 250, 0.05);
}
.t-col-title {
    font-size: 0.8rem;
    font-weight: 800;
    text-align: center;
    color: var(--text-light);
    border-bottom: 1px dashed rgba(0,0,0,0.1);
    padding-bottom: 0.2rem;
    margin-bottom: 0.2rem;
}
.t-entry {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-dark);
}
.t-account-footer {
    background: #f1f5f9;
    padding: 0.5rem 0.8rem;
    font-size: 0.95rem;
    font-weight: 800;
    text-align: right;
    border-top: 1px solid #cbd5e1;
    color: var(--accent-purple-dark);
}

@media (max-width: 768px) {
    .financial-modal { padding: 1.5rem 1rem; height: 96vh; }
    .financial-header h2 { font-size: 1.6rem; }
    .financial-statements-grid { grid-template-columns: 1fr; gap: 1rem; }
    .financial-tab-btn { font-size: 0.95rem; padding: 0.6rem 0.8rem; }
}

/* --- ENDLESS MODE STYLES --- */
.endless-icon {
    background: rgba(236, 72, 153, 0.15);
    border-color: rgba(236, 72, 153, 0.3);
}

/* --- DECORATIONS IN SHOP --- */
#decor-sofa {
    font-size: 3.5rem;
    position: absolute;
    bottom: 20px;
    left: 40px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
}
#decor-neon {
    font-size: 2.8rem;
    position: absolute;
    top: 20px;
    right: 40px;
    animation: neonGlow 2s ease-in-out infinite alternate;
}
#decor-plush {
    font-size: 2.2rem;
    position: absolute;
    bottom: 110px;
    right: 60px;
    animation: floatSmall 4s ease-in-out infinite;
}

@keyframes neonGlow {
    0% { filter: drop-shadow(0 0 5px #fbbf24) drop-shadow(0 0 10px #fbbf24); transform: scale(1); }
    100% { filter: drop-shadow(0 0 15px #f59e0b) drop-shadow(0 0 25px #f59e0b); transform: scale(1.05); }
}
@keyframes floatSmall {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* --- SHOP TABS & ACHIEVEMENTS GRID --- */
.shop-tabs {
    display: flex;
    gap: 0.8rem;
    width: 100%;
    margin-bottom: 1rem;
    border-bottom: 2px solid rgba(229, 185, 138, 0.3);
    padding-bottom: 0.4rem;
}
.shop-tab-btn {
    flex: 1;
    padding: 0.7rem 1rem;
    background: rgba(248, 250, 252, 0.8);
    border: 2px solid rgba(229, 185, 138, 0.4);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.shop-tab-btn.active {
    background: white;
    color: var(--accent-purple-dark);
    border-color: var(--accent-purple);
    box-shadow: var(--shadow-sm);
}

.shop-tab-content {
    display: none;
    width: 100%;
}
.shop-tab-content.active {
    display: block;
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    max-height: 55vh;
    overflow-y: auto;
    padding: 0.4rem;
}
.achievement-card {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    opacity: 0.55;
    filter: grayscale(80%);
    transition: all 0.3s ease;
}
.achievement-card.unlocked {
    opacity: 1;
    filter: grayscale(0%);
    border-color: rgba(167, 139, 250, 0.6);
    background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);
    box-shadow: 0 4px 12px rgba(167, 139, 250, 0.15);
}
.achievement-icon {
    font-size: 2.2rem;
    width: 50px;
    height: 50px;
    background: rgba(248, 250, 252, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.achievement-card.unlocked .achievement-icon {
    background: rgba(167, 139, 250, 0.15);
}
.achievement-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    text-align: left;
}
.achievement-info strong {
    font-size: 1rem;
    color: var(--text-dark);
}
.achievement-info p {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.3;
    margin: 0;
}

/* --- ACHIEVEMENT TOAST NOTIFICATION --- */
.achievement-toast {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background: white;
    border: 2px solid var(--accent-purple);
    border-radius: var(--radius-md);
    padding: 0.8rem 1.4rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--shadow-lg), 0 10px 25px rgba(167, 139, 250, 0.3);
    z-index: 500;
    transform: translateX(150%);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}
.achievement-toast.show {
    transform: translateX(0);
}
.toast-icon {
    font-size: 2.4rem;
    animation: pop 0.4s ease;
}
.toast-info {
    display: flex;
    flex-direction: column;
    text-align: left;
}
.toast-label {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #7c3aed;
}
.toast-info strong {
    font-size: 1.1rem;
    color: var(--text-dark);
}

/* --- TACTILE DRAG MICRO-ANIMATION --- */
.drag-clone {
    position: fixed;
    z-index: 500;
    pointer-events: none;
    transform: scale(1.08) rotate(3deg);
    box-shadow: 0 15px 30px rgba(167, 139, 250, 0.4);
    opacity: 0.95;
    transition: transform 0.05s ease-out;
}

/* --- COZY DARK MODE THEME --- */
[data-theme="dark"] {
    --cream: #181825;
    --warm-white: #1e1e2e;
    --wood-light: #45475a;
    --wood-dark: #cdd6f4;
    --wood-panel: #313244;
    --text-dark: #cdd6f4;
    --text-light: #a6adc8;
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] body {
    background: #181825;
    color: #cdd6f4;
}

[data-theme="dark"] .panel-glass {
    background: rgba(30, 30, 46, 0.88);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
}

[data-theme="dark"] .welcome-card,
[data-theme="dark"] .mode-card,
[data-theme="dark"] .game-card {
    background: rgba(30, 30, 46, 0.94);
}

[data-theme="dark"] .account-card {
    background: #313244;
    color: #cdd6f4;
    border-color: #45475a;
    border-bottom-color: #585b70;
}

[data-theme="dark"] .secondary-btn {
    background: #313244;
    color: #cdd6f4;
    border-color: #45475a;
    box-shadow: 0 6px 0 #1e1e2e, 0 10px 20px rgba(0,0,0,0.3);
}

[data-theme="dark"] .hud {
    background: rgba(30, 30, 46, 0.92);
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .receipt {
    background: #2b2b3d;
    color: #cdd6f4;
    border-color: #45475a;
}