/*
 * styles.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Tutti gli stili estratti da index.html originale.
 * Nessun JavaScript inline, nessuna logica.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Base ─────────────────────────────────────────────────────────────────── */
body {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* ── Scrollbar ────────────────────────────────────────────────────────────── */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ── Glass Navigation ─────────────────────────────────────────────────────── */
.glass-nav {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0,0,0,0.1);
}
.dark .glass-nav {
    background: rgba(28, 28, 30, 0.85);
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* ── Day Cell ─────────────────────────────────────────────────────────────── */
.day-cell {
    aspect-ratio: 1/1;
    transition: transform 0.1s;
}
.day-cell:active { transform: scale(0.95); }

/* ── Splash Screen ────────────────────────────────────────────────────────── */
#splash-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #000;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    padding: 2rem;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 300;
    opacity: 1;
    transition: opacity 1s ease-out;
}

.fade-text { animation: fadeInOut 4s forwards; }
@keyframes fadeInOut {
    0%   { opacity: 0; transform: translateY(10px); }
    20%  { opacity: 1; transform: translateY(0); }
    80%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-10px); }
}

/* ── Toggle Switch ────────────────────────────────────────────────────────── */
.toggle-checkbox:checked {
    right: 0;
    border-color: #34C759;
}
.toggle-checkbox:checked + .toggle-label {
    background-color: #34C759;
}

/* ── Meter Fill ───────────────────────────────────────────────────────────── */
.meter-fill {
    transition: width 0.5s ease-in-out, background-color 0.5s ease;
}

/* ── Vacation Gradient ────────────────────────────────────────────────────── */
.vacation-gradient {
    background: linear-gradient(45deg, #FF9A9E 0%, #FECFEF 99%, #FECFEF 100%);
    background-size: 200% 200%;
    animation: gradientMove 5s ease infinite;
}
.dark .vacation-gradient {
    background: linear-gradient(45deg, #8E2DE2 0%, #4A00E0 100%);
}
@keyframes gradientMove {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── Mood Selection ───────────────────────────────────────────────────────── */
.mood-btn.selected {
    background-color: #007AFF;
    color: white;
    border-color: #007AFF;
}
.dark .mood-btn.selected {
    background-color: #0A84FF;
    border-color: #0A84FF;
}

/* ── Achievement Toast ────────────────────────────────────────────────────── */
#achievement-toast {
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* ── Confetti Canvas ──────────────────────────────────────────────────────── */
#confetti-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 10000;
}

/* ── Trophy Card ──────────────────────────────────────────────────────────── */
.trophy-card.locked {
    filter: grayscale(100%) opacity(0.6);
}
.trophy-card.unlocked {
    border-color: #FFD700;
    background: linear-gradient(135deg, rgba(255,215,0,0.1) 0%, rgba(255,255,255,0) 100%);
}
.dark .trophy-card.unlocked {
    background: linear-gradient(135deg, rgba(255,215,0,0.15) 0%, rgba(0,0,0,0) 100%);
}

/* ── Color Picker Reset ───────────────────────────────────────────────────── */
input[type="color"] {
    -webkit-appearance: none;
    border: none;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 8px;
}

/* ── Loot Bar Phase Animations ────────────────────────────────────────────── */
#lootbar-phase-title { transition: color 0.5s ease; }

.lootbar-phase-1 #lootbar-phase-title { color: #34C759 !important; }

.lootbar-phase-2 #lootbar-phase-title {
    color: #FFD700 !important;
    animation: pulse-gold 2s infinite;
}

.lootbar-phase-3 #lootbar-phase-title {
    color: #FF3B30 !important;
    animation: pulse-red 1.5s infinite;
}

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

@keyframes pulse-red {
    0%, 100% { opacity: 1; text-shadow: 0 0 10px rgba(255,59,48,0.5); }
    50%       { opacity: 0.8; text-shadow: 0 0 20px rgba(255,59,48,0.8); }
}

#lootbar-progress-bar.phase-2 {
    background: linear-gradient(90deg, #FFD700, #FFA500) !important;
}

#lootbar-progress-bar.phase-3 {
    background: linear-gradient(90deg, #FF6B6B, #FF3B30) !important;
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0%   { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}

/* ── Contract Modal / Tabs / Cards ───────────────────────────────────────── */
.contract-tab { transition: all 0.2s ease; }
.contract-tab:hover { background-color: rgba(99,102,241,0.1); }

.contract-card-enter { animation: slideInUp 0.3s ease-out; }
@keyframes slideInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.contract-tab-content { animation: fadeIn 0.3s ease; }
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Contract Badges ──────────────────────────────────────────────────────── */
.contract-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: bold;
}
.contract-badge-green  { background-color: #10b981; color: white; }
.contract-badge-orange { background-color: #f59e0b; color: white; }
.contract-badge-red    { background-color: #ef4444; color: white; }

/* ── Input Focus Enhancement ──────────────────────────────────────────────── */
input:focus, textarea:focus, select:focus {
    transform: scale(1.01);
    transition: all 0.2s ease;
}

/* ── Vacation Progress Bar ────────────────────────────────────────────────── */
#vacation-progress-container {
    position: relative;
    overflow: visible;
}
#vacation-emoji {
    position: absolute;
    top: 50%;
    transform: translateX(-50%);
    transition: left 0.5s ease;
    font-size: 1.1rem;
    line-height: 1;
    pointer-events: none;
}