:root { --primary-color: #f1c40f; --bg-dark: #1e1e1e; --text-light: #ecf0f1; --btn-green: #27ae60; --btn-red: #c0392b; }

body {
    margin: 0; padding: 0; font-family: 'Roboto', sans-serif;
    background: url('pozadi.png') no-repeat center center fixed;
    background-size: cover; color: var(--text-light);
    height: 100vh; width: 100vw; overflow: hidden; 
    user-select: none; -webkit-tap-highlight-color: transparent;
    transition: background-image 0.5s ease-in-out;
}

.scoreboard {
    position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
    background: rgba(30, 30, 30, 0.95); padding: 10px 20px;
    border-radius: 15px; border: 3px solid var(--primary-color);
    text-align: center; z-index: 10; width: 85%; max-width: 400px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); pointer-events: none; 
}
.scoreboard h1 { font-family: 'Russo One', sans-serif; color: var(--primary-color); margin: 0; font-size: 1.5rem; }
#score { display: block; color: #fff; font-size: 2.2rem; font-weight: bold; font-family: 'Russo One', sans-serif; margin: 5px 0; }
.unit { font-size: 0.8rem; color: #bbb; text-transform: uppercase; }
.stats-detail { margin-top: 5px; font-size: 0.9rem; color: #ddd; display: flex; justify-content: center; gap: 15px; font-weight:bold;}

.click-zone { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; display: flex; align-items: flex-end; justify-content: center; }

#majsner-img {
    height: 70vh; max-width: 90vw; object-fit: contain;
    margin-bottom: 2vh; cursor: pointer; pointer-events: auto;
    mix-blend-mode: multiply; filter: contrast(1.1) brightness(1.05);
}

@keyframes vibrateClick {
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(0.85) rotate(-3deg); filter: brightness(1.3) contrast(1.2); }
    100% { transform: scale(1) rotate(0deg); }
}
.vibrate-active { animation: vibrateClick 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

#centrala-img { position: absolute; bottom: 5%; right: 25%; width: 220px; cursor: pointer; z-index: 5; pointer-events: auto; transition: transform 0.1s; }
#centrala-img:active { transform: scale(0.95); }
#bejr-img { position: absolute; bottom: 5%; right: 15%; width: 250px; z-index: 6; display: none; transition: transform 3s linear; }

.floating-number { position: absolute; font-weight: bold; font-size: 2.5rem; color: var(--primary-color); text-shadow: 2px 2px 0 #000; pointer-events: none; animation: floatUp 0.8s ease-out forwards; z-index: 100; }
@keyframes floatUp { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-100px) scale(1.5); opacity: 0; } }

#shop-toggle-btn {
    position: fixed; top: 50%; right: 0; transform: translateY(-50%);
    background: var(--primary-color); color: #000; font-family: 'Russo One', sans-serif;
    padding: 20px 10px; border: 3px solid #000; border-right: none; border-radius: 12px 0 0 12px;
    cursor: pointer; z-index: 500; writing-mode: vertical-rl; text-orientation: upright; font-size: 1rem; letter-spacing: 2px;
}
#settings-btn { position: absolute; top: 15px; left: 15px; background: rgba(0,0,0,0.6); color: #fff; border: 2px solid var(--primary-color); width: 45px; height: 45px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; z-index: 500; display: flex; align-items: center; justify-content: center; }
#leaderboard-btn { position: absolute; top: 70px; left: 15px; background: rgba(0,0,0,0.8); color: var(--primary-color); border: 2px solid var(--primary-color); padding: 10px; border-radius: 10px; font-family: 'Russo One', sans-serif; font-size: 0.9rem; cursor: pointer; z-index: 500; text-transform: uppercase; }
#wardrobe-btn { position: absolute; top: 120px; left: 15px; background: rgba(0,0,0,0.8); color: #3498db; border: 2px solid #3498db; padding: 10px; border-radius: 10px; font-family: 'Russo One', sans-serif; font-size: 0.9rem; cursor: pointer; z-index: 500; text-transform: uppercase; }

/* Tlačítko Galerie / Kina */
#gallery-btn {
    position: absolute; top: 170px; left: 15px; background: rgba(0,0,0,0.8); color: #9b59b6;
    border: 2px solid #9b59b6; padding: 10px; border-radius: 10px; font-family: 'Russo One', sans-serif;
    font-size: 0.9rem; cursor: pointer; z-index: 500; text-transform: uppercase;
}

#event-toast {
    position: fixed; top: 120px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.9); border: 3px solid #e74c3c; border-radius: 10px;
    padding: 15px 25px; z-index: 1500; text-align: center;
    box-shadow: 0 0 20px rgba(231, 76, 60, 0.6);
    animation: slideDown 0.5s forwards;
}
#event-toast.good-event { border-color: #2ecc71; box-shadow: 0 0 20px rgba(46, 204, 113, 0.6); }
#event-toast h3 { margin: 0 0 5px 0; font-family: 'Russo One', sans-serif; }
#event-toast p { margin: 0; font-size: 0.9rem; color: #ddd; }
@keyframes slideDown { 0% { top: -100px; opacity: 0; } 100% { top: 130px; opacity: 1; } }

.shop-sidebar { position: fixed; top: 0; right: 0; width: 100%; height: 100%; background: #1a1a1a; border-left: 4px solid var(--primary-color); z-index: 1000; transform: translateX(105%); transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); display: flex; flex-direction: column; }
.shop-sidebar:not(.hidden-sidebar) { transform: translateX(0); }
.shop-header { background: #252525; padding: 15px 20px; border-bottom: 2px solid var(--primary-color); display: flex; justify-content: space-between; align-items: center; }
.shop-header h2 { margin: 0; font-family: 'Russo One', sans-serif; color: var(--primary-color); }
#close-shop-btn { background: transparent; border: 2px solid var(--btn-red); color: var(--btn-red); font-weight: bold; padding: 5px 12px; border-radius: 6px; cursor: pointer; }
#shop-list { flex: 1; overflow-y: auto; padding: 15px; }

.shop-item { display: flex; justify-content: space-between; align-items: center; background: #2c2c2c; color: #fff; border: none; border-left: 5px solid #555; margin-bottom: 10px; padding: 15px; border-radius: 8px; width: 100%; text-align: left; transition: transform 0.1s; }
.shop-item:active { transform: scale(0.98); }
.item-info h3 { margin: 0; font-size: 1rem; color: #fff; }
.item-info p { margin: 4px 0 0; font-size: 0.8rem; color: #aaa; }
.item-price { background: #333; color: var(--primary-color); font-weight: bold; padding: 8px 12px; border-radius: 6px; min-width: 70px; text-align: center; border: 1px solid var(--primary-color); }
.shop-item.disabled { opacity: 0.5; filter: grayscale(1); }
.shop-item.sold-out { background: #111; border-color: #333; }
.shop-item:not(.disabled):not(.sold-out) { border-left-color: var(--primary-color); }
.rebirth-btn { background: linear-gradient(45deg, #f1c40f, #e67e22) !important; border: 2px solid #fff !important; text-align: center !important; display: block !important; margin-top: 20px; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center; z-index: 2000; }
.hidden { display: none !important; }
.modal-content { background: var(--bg-dark); border: 2px solid var(--primary-color); border-radius: 12px; padding: 25px; width: 85%; max-width: 320px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.modal-content h2 { color: var(--primary-color); font-family: 'Russo One', sans-serif; margin-top: 0; margin-bottom: 20px; }
.setting-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-weight: bold; color: #fff; background: #2a2a2a; padding: 10px; border-radius: 8px; font-size: 0.9rem;}
.toggle-btn { padding: 6px 15px; border-radius: 6px; border: none; font-weight: bold; cursor: pointer; min-width: 60px; }
.toggle-btn.on { background: var(--btn-green); color: white; }
.toggle-btn.off { background: var(--btn-red); color: white; }
input[type="email"], input[type="password"] { width: 100%; padding: 12px; margin-bottom: 10px; background: #333; border: 1px solid #555; color: #fff; border-radius: 6px; box-sizing: border-box; }
.danger-btn { width: 100%; padding: 12px; background: transparent; color: var(--btn-red); border: 2px solid var(--btn-red); font-weight: bold; cursor: pointer; border-radius: 6px; margin-top: 10px; }
.close-btn { width: 100%; padding: 12px; background: #333; color: #fff; border: none; font-weight: bold; cursor: pointer; border-radius: 6px; margin-top: 10px; }

.leaderboard-item { background: #2a2a2a; margin-bottom: 5px; padding: 10px; border-radius: 5px; border-left: 3px solid var(--primary-color); display: flex; justify-content: space-between; align-items: center; }
.lb-rank { font-weight: bold; color: var(--primary-color); width: 35px; }
.lb-name { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff;}
.lb-score { font-size: 0.8rem; color: #aaa; text-align: right; }

.skin-btn { background: #333; color: #fff; border: 2px solid #555; padding: 10px; border-radius: 8px; font-weight: bold; cursor: pointer; transition: 0.2s;}
.skin-btn.active { border-color: #3498db; background: #2980b9; }

@media (min-width: 768px) {
    .shop-sidebar { width: 400px; transform: translateX(450px); }
    #shop-toggle-btn { top: 20px; right: 20px; writing-mode: horizontal-tb; transform: none; border-radius: 10px; }
}