/* Základní barvy Fortnite */
:root {
    --bg-gradient: radial-gradient(circle, #2b4da3, #0a1329);
    --fortnite-yellow: #f8fb3c;
    --legendary: #fb9a3d;
    --epic: #b23af1;
    --rare: #2196f3;
    --uncommon: #51b539;
}

body, html {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
    font-family: 'Arial Black', sans-serif;
    background: var(--bg-gradient);
    color: white;
    overflow: hidden;
}

.game-wrapper {
    display: flex; flex-direction: column; height: 100vh;
}

/* Navigace */
.main-nav {
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(0,0,0,0.6); padding: 10px 50px;
}

.nav-links { display: flex; gap: 10px; }

.nav-btn {
    background: none; border: none; color: #ccc; font-size: 1.2rem;
    padding: 10px 25px; cursor: pointer; transition: 0.2s;
    transform: skew(-15deg);
}

.nav-btn.active { background: white; color: black; }
.nav-btn:hover:not(.active) { color: white; border-bottom: 2px solid white; }

.currency .vbucks {
    background: rgba(0,0,0,0.5); padding: 5px 15px; border-radius: 20px;
    display: flex; align-items: center; gap: 8px;
}

/* Obsah */
.tab-content { display: none; padding: 40px; animation: fade 0.4s; }
.tab-content.active { display: block; }

@keyframes fade { from {opacity: 0;} to {opacity: 1;} }

/* Lobby */
.lobby-view { position: relative; height: 80vh; text-align: center; }
.skin-img { height: 100%; filter: drop-shadow(0 0 30px rgba(0,0,0,0.5)); }

.play-btn {
    position: absolute; bottom: 40px; right: 60px;
    background: var(--uncommon); border: none; color: white;
    padding: 20px 80px; font-size: 3rem; transform: skew(-15deg);
    cursor: pointer; box-shadow: 0 5px 0 #1a4a12;
}

/* Shop */
.grid-shop { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.shop-card { background: #111; border-bottom: 4px solid white; cursor: pointer; transition: 0.2s; }
.shop-card:hover { transform: scale(1.05); z-index: 10; }

.legendary { border-color: var(--legendary); background: linear-gradient(0deg, #4d2b0a, #111); }
.epic { border-color: var(--epic); background: linear-gradient(0deg, #3d0a4d, #111); }
.rare { border-color: var(--rare); background: linear-gradient(0deg, #0a2b4d, #111); }
.uncommon { border-color: var(--uncommon); background: linear-gradient(0deg, #134d0a, #111); }

.img-holder img { width: 100%; }
.card-info { padding: 10px; text-align: center; }

/* Locker */
.grid-locker { display: grid; grid-template-columns: repeat(3, 200px); gap: 20px; justify-content: center; }
.locker-box {
    aspect-ratio: 1/1; background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
}