:root { --mando-gold: #fbbf24; --mando-bg: #020617; }
body, html {
    height: 100%; height: -webkit-fill-available;
    overflow: hidden; background: var(--mando-bg); color: white;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
#app { height: 100%; display: flex; flex-direction: column; padding: env(safe-area-inset-top) 1.25rem env(safe-area-inset-bottom); }

.helmet-logo { width: 60px; height: 60px; animation: helmetPulse 4s ease-in-out infinite; }
@keyframes helmetPulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.3)); } 50% { transform: scale(1.05); filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.5)); } }

.btn-mando { transition: all 0.2s ease; cursor: pointer; user-select: none; }
.btn-mando:active { transform: scale(0.96); filter: brightness(1.2); }

.streak-badge { animation: streakPop 0.3s ease-out; }
@keyframes streakPop { 0% { transform: scale(0.5); } 80% { transform: scale(1.2); } 100% { transform: scale(1); } }

.high-streak { animation: glowShake 0.5s infinite; color: #f59e0b; text-shadow: 0 0 10px #fbbf24; }
@keyframes glowShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-1px) rotate(-1deg); } 75% { transform: translateX(1px) rotate(1deg); } }

.transmission-block {
    flex: 1; max-height: 40vh; background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(251, 191, 36, 0.1); border-radius: 1.5rem;
    margin: 1rem 0; display: flex; flex-direction: column; overflow: hidden;
}
.transmission-scroll { overflow-y: auto; padding: 1rem; -webkit-overflow-scrolling: touch; }
.transmission-scroll::-webkit-scrollbar { width: 4px; }
.transmission-scroll::-webkit-scrollbar-thumb { background: var(--mando-gold); border-radius: 10px; }

@keyframes wheelSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(3600deg); } }
.spin-action { animation: wheelSpin 4s cubic-bezier(0.1, 0, 0.1, 1) forwards; }

@keyframes floatUp { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-500px) scale(1.5); opacity: 0; } }
.reaction { position: fixed; bottom: 20%; font-size: 3rem; animation: floatUp 2s ease-out forwards; pointer-events: none; z-index: 100; }

.point-ping { animation: pointPing 0.5s ease-out; }
@keyframes pointPing { 0% { transform: scale(1); } 50% { transform: scale(1.1); background: rgba(251, 191, 36, 0.2); } 100% { transform: scale(1); } }