@import url('https://fonts.googleapis.com/css2?family=Jura:wght@400;700;900&family=Russo+One&display=swap');

body { font-family: 'Jura', sans-serif; background-color: #020617; color: white; overflow: hidden; touch-action: none; margin: 0; padding: 0; user-select: none; }
h1, h2, h3, .font-russo { font-family: 'Russo One', sans-serif; }

#game-container { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #000; position: absolute; top:0; left:0; z-index: 10;}
canvas { display: block; cursor: crosshair; }

.screen-container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #020617; background-image: radial-gradient(circle at top right, #1e3a8a 0%, transparent 40%), radial-gradient(circle at bottom left, #064e3b 0%, transparent 40%); }

/* Glassmorphism */
.glass-panel { background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.neon-border { border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5); }

.color-btn { transition: all 0.2s; cursor: pointer; }
.color-btn.selected { transform: scale(1.1); border-color: #60a5fa; box-shadow: 0 0 20px rgba(96, 165, 250, 0.6); }
.color-btn:disabled { opacity: 0.2; cursor: not-allowed; }

.team-btn { transition: all 0.2s; cursor: pointer; border: 2px solid transparent; }
.team-btn.selected { transform: scale(1.05); border-color: currentColor; box-shadow: 0 0 20px currentColor; }
.team-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(100%); }

.modal { background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(10px); }
.select-btn { cursor: pointer; border: 2px solid transparent; transition: all 0.2s; }
.select-btn.selected { border-color: #3b82f6; background-color: rgba(59, 130, 246, 0.3); box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); }

@keyframes hitmarker-anim { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; } 50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } }
.hitmarker-active { animation: hitmarker-anim 0.2s ease-out forwards; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fade-in 0.4s ease-out forwards; }
@keyframes slide-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.slide-up { animation: slide-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

.roulette-container { display: flex; transition: transform 3.5s cubic-bezier(0.1, 1, 0.3, 1); }
.roulette-item { flex: 0 0 90px; min-width: 90px; width: 90px; height: 90px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: 'Russo One'; border-right: 1px solid rgba(255,255,255,0.05); }

/* ІНВЕНТАР ТА РІДКІСТЬ */
.inv-slot { aspect-ratio: 1/1; background: rgba(15, 23, 42, 0.8); border-radius: 0.75rem; border: 1px solid #334155; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; cursor: pointer; transition: all 0.2s; position: relative; }
.inv-slot:hover { transform: scale(1.05); z-index: 10; }
.inv-slot.empty { cursor: default; }
.inv-slot.empty:hover { transform: none; }

.item-common { border-color: #94a3b8; box-shadow: inset 0 0 10px rgba(148,163,184,0.2); }
.item-rare { border-color: #3b82f6; box-shadow: inset 0 0 15px rgba(59,130,246,0.3), 0 0 10px rgba(59,130,246,0.2); }
.item-epic { border-color: #a855f7; box-shadow: inset 0 0 20px rgba(168,85,247,0.4), 0 0 15px rgba(168,85,247,0.3); }
.item-legendary { border-color: #eab308; box-shadow: inset 0 0 25px rgba(234,179,8,0.5), 0 0 20px rgba(234,179,8,0.4); }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: rgba(59, 130, 246, 0.5); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(59, 130, 246, 0.8); }

/* --- ОПТИМІЗАЦІЯ ДЛЯ ГОРИЗОНТАЛЬНИХ МОБІЛЬНИХ --- */
@media (max-width: 1024px) {
    .roulette-item { width: 60px !important; min-width: 60px !important; height: 60px !important; }
    .roulette-item svg { width: 24px !important; height: 24px !important; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .screen-container { padding: 0.25rem !important; }
    .glass-panel { padding: 0.25rem !important; }
    .landscape-hide { display: none !important; }
    
    #shop-screen p.text-slate-400, 
    #shop-screen p.text-purple-200\/50, 
    #shop-screen p.text-yellow-200\/50 { display: none !important; } 
    #main-menu-screen p.text-slate-400 { display: none !important; }
    
    .mb-2, .mb-4, .mb-6, .mb-8, .mb-10 { margin-bottom: 0.25rem !important; }
    .mt-2, .mt-4, .mt-6, .mt-8 { margin-top: 0.25rem !important; }
    .gap-2, .gap-4, .gap-6, .gap-8 { gap: 0.25rem !important; }
}