/* GLOBAL SETTINGS */
body { margin: 0; overflow: hidden; background-color: #020202; font-family: 'Orbitron', sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; }

/* ROTATION MSG */
#rotate-msg { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 9999; color: white; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
#rotate-msg svg { width: 64px; height: 64px; fill: #FFD700; animation: rotatePhone 2s infinite; }
#rotate-msg p { margin-top: 20px; font-size: 18px; color: #FFD700; }
@keyframes rotatePhone { 0% { transform: rotate(0deg); } 50% { transform: rotate(90deg); } 100% { transform: rotate(0deg); } }
@media screen and (orientation: portrait) and (max-width: 900px) { #rotate-msg { display: flex; } #menu-screen, #ui-layer, #leaderboard, canvas { display: none !important; } }

/* UI */
#ui-layer { position: fixed; top: 10px; left: 10px; z-index: 50; pointer-events: none; display: flex; flex-direction: column; gap: 5px; }
.stat-box { background: rgba(0, 0, 0, 0.4); padding: 5px 10px; border-radius: 4px; border-left: 3px solid #FFD700; color: white; font-weight: bold; font-size: 12px; text-transform: uppercase; min-width: 100px; backdrop-filter: blur(2px); }
.value { float: right; color: #FFD700; }

#sound-btn { position: fixed; top: 20px; right: 20px; width: 40px; height: 40px; background: rgba(0, 0, 0, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; color: white; display: flex; justify-content: center; align-items: center; font-size: 20px; cursor: pointer; z-index: 100; transition: transform 0.2s; }
#sound-btn:hover { transform: scale(1.1); border-color: #00FFFF; }

#leaderboard { position: fixed; top: 70px; right: 10px; width: 180px; background: rgba(0, 0, 0, 0.3); border-radius: 8px; padding: 8px; color: white; z-index: 50; pointer-events: none; border: 1px solid rgba(255, 255, 255, 0.1); font-family: 'Segoe UI', sans-serif; }
#leaderboard h3 { margin: 0 0 5px 0; text-align: center; color: #FFD700; font-size: 11px; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 3px; }
#ranking-list { list-style: none; padding: 0; margin: 0; }
#ranking-list li { font-size: 10px; margin-bottom: 3px; display: flex; justify-content: space-between; }
.is-me { color: #00FF00 !important; font-weight: bold; text-shadow: 0 0 3px #00FF00; }

#joystick-zone { position: fixed; bottom: 30px; left: 30px; width: 120px; height: 120px; background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 50%; z-index: 60; display: none; }
#joystick-knob { width: 50px; height: 50px; background: rgba(0, 255, 255, 0.6); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 15px rgba(0, 255, 255, 0.4); pointer-events: none; }

/* MENU */
#menu-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, #111 0%, #000 100%); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 200; color: white; opacity: 1; transition: opacity 0.5s; }
.logo { font-size: 40px; color: #fff; text-shadow: 0 0 15px #00FFFF; margin-bottom: 10px; text-align: center; }
.subtitle { color: #888; margin-bottom: 20px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
input#player-name { background: transparent; border: none; border-bottom: 2px solid #FFD700; color: #FFD700; font-family: 'Orbitron', sans-serif; font-size: 20px; text-align: center; padding: 8px; width: 250px; margin-bottom: 15px; outline: none; }
.btn-group { display: flex; gap: 10px; margin-bottom: 20px; }
.play-btn, .skin-btn { padding: 12px 30px; font-size: 18px; background: transparent; color: #00FFFF; border: 2px solid #00FFFF; border-radius: 50px; cursor: pointer; font-family: 'Orbitron', sans-serif; font-weight: 900; transition: transform 0.1s; }
.skin-btn { border-color: #FFD700; color: #FFD700; }
.play-btn:active, .skin-btn:active { transform: scale(0.95); }

/* SETTINGS BUTTON */
#settings-btn { margin-top: 15px; background: transparent; border: 1px solid #666; color: #666; font-size: 20px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; transition: 0.3s; z-index: 20; display: flex; justify-content: center; align-items: center;}
#settings-btn:hover { border-color: #FFF; color: #FFF; transform: rotate(90deg); }

/* SETTINGS MODAL */
#settings-modal, #skin-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 350; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.setting-row { margin-bottom: 30px; width: 80%; max-width: 300px; text-align: center; }
.setting-row label { display: block; color: #00FFFF; font-size: 14px; margin-bottom: 10px; font-weight: bold; }

/* SLIDERS */
input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; }
input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 8px; cursor: pointer; background: #333; border-radius: 5px; border: 1px solid #555; }
input[type=range]::-webkit-slider-thumb { height: 20px; width: 20px; border-radius: 50%; background: #FFD700; cursor: pointer; -webkit-appearance: none; margin-top: -7px; box-shadow: 0 0 10px #FFD700; }

/* SKINS */
#skin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; width: 90%; max-width: 600px; max-height: 60vh; overflow-y: auto; padding: 15px; background: rgba(20,20,20,0.8); border-radius: 10px; }
.skin-card { background: #111; border: 1px solid #333; border-radius: 6px; padding: 10px; text-align: center; cursor: pointer; position: relative; }
.skin-card.locked { opacity: 0.5; }
.skin-card.selected { border-color: #00FF00; background: #052205; }
.skin-preview { width: 30px; height: 30px; border-radius: 50%; margin: 0 auto 5px; }
.skin-name { font-size: 10px; color: #ccc; }
.skin-req { font-size: 10px; font-weight: bold; }
.close-btn { margin-top: 15px; background: #FF4444; border: none; color: white; padding: 8px 25px; border-radius: 20px; font-weight: bold; cursor: pointer; }

/* OTHERS */
#alert-msg { position: fixed; top: 30%; left: 50%; transform: translate(-50%, -50%); font-size: 18px; font-weight: bold; color: #fff; background: rgba(0,0,0,0.9); padding: 15px 30px; border-radius: 8px; border: 2px solid #FF4444; pointer-events: none; z-index: 1000; opacity: 0; transition: opacity 0.3s; text-align: center; box-shadow: 0 0 20px rgba(255,0,0,0.4); text-transform: uppercase; }
.share-container { display: flex; gap: 10px; }
.share-btn { width: 35px; height: 35px; border-radius: 50%; border: none; display: flex; justify-content: center; align-items: center; color: white; font-weight: bold; text-decoration: none; }
.bg-wa { background: #25D366; } .bg-fb { background: #1877F2; } .bg-tw { background: #000000; border: 1px solid #333; } .bg-in { background: #E1306C; }
.high-score-box { color: #FFD700; margin-bottom: 20px; z-index: 10; font-size: 14px;}
.hidden { display: none !important; }