:root { --p: #ff007f; --dark: #111; }
body { margin: 0; background: #fff5f8; font-family: sans-serif; overflow: hidden; touch-action: manipulation; }

#global-msg {
    position: fixed; top: 100px; left: 50%; transform: translateX(-50%);
    background: black; color: white; border: 3px solid white; padding: 20px;
    border-radius: 10px; z-index: 9999; display: none; width: 80%; text-align: center;
}
.fade-out { animation: f 5s forwards; }
@keyframes f { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

#p-icon { position: fixed; bottom: 10px; right: 10px; width: 40px; height: 40px; background: var(--p); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 8888; opacity: 0.4; border: 2px solid white; touch-action: none; }

#admin-panel { position: fixed; top: 50px; left: 20px; width: 260px; background: var(--dark); border: 3px solid var(--p); border-radius: 15px; z-index: 9000; display: none; color: #0f0; }
#admin-header { padding: 10px; background: var(--p); color: white; text-align: center; touch-action: none; }
.admin-content { padding: 10px; }
.admin-content button, input { width: 100%; margin: 5px 0; padding: 10px; box-sizing: border-box; }

nav { position: fixed; top: 0; width: 100%; height: 50px; background: white; display: flex; justify-content: space-around; align-items: center; border-bottom: 3px solid var(--p); z-index: 1000; }
nav a { color: var(--p); font-weight: bold; text-decoration: none; font-size: 14px; }

.screen { width: 100%; height: calc(100vh - 50px); margin-top: 50px; display: none; flex-direction: column; align-items: center; padding: 10px; box-sizing: border-box; overflow-y: auto; }
.active { display: flex; }

.wheel-wrap { position: relative; width: 260px; height: 260px; border: 5px solid white; border-radius: 50%; box-shadow: 0 0 15px var(--p); margin: 10px; overflow: hidden; }
#wheel { width: 100%; height: 100%; border-radius: 50%; transition: 5s cubic-bezier(0.1, 0, 0, 1); position: relative; }
.sector { position: absolute; width: 50%; height: 50%; transform-origin: 100% 100%; display: flex; align-items: center; justify-content: center; color: white; font-size: 8px; font-weight: bold; }

.board { font-size: 1.8em; background: white; color: var(--p); padding: 10px; border: 3px solid var(--p); border-radius: 10px; letter-spacing: 3px; margin: 10px; min-width: 80%; text-align: center; }
#ui { display: none; width: 90%; }
.btns { display: flex; gap: 5px; }

.r-card { background: white; margin: 5px; padding: 10px; border-left: 5px solid var(--p); width: 90%; border-radius: 5px; }