:root {
  --bg: #060810;
  --card-bg: #101422;
  --border: rgba(255, 105, 180, 0.2);
  --border-glow: rgba(255, 105, 180, 0.35);
  --text: #FFFFFF;
  --subtext: rgba(255, 255, 255, 0.65);
  --lite-pink: #FF69B4;
  --lite-pink-glow: rgba(255, 105, 180, 0.4);
  --faded-green: rgba(48, 209, 88, 0.85);
  --dark-blue: #0A84FF;
  --dark-blue-glow: rgba(10, 132, 275, 0.4);
  --cric-gradient: linear-gradient(135deg, #FF69B4 0%, #FF1493 50%, #0A84FF 100%);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', sans-serif; overflow: hidden; touch-action: manipulation; }
button { font: inherit; cursor: pointer; border: 0; background: none; position: relative; z-index: 5; }

.floating-tg {
  position: fixed; bottom: 80px; right: 20px; width: 52px; height: 52px;
  background: linear-gradient(135deg, #0088cc 0%, #00aced 100%); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3); z-index: 99999999; cursor: pointer;
  animation: floatBadge 3s ease-in-out infinite; text-decoration: none;
  border: 0.5px solid rgba(255,255,255,0.2); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.floating-tg:hover { transform: scale(1.1); }
.floating-tg svg { width: 26px; height: 26px; fill: #fff; transform: translateX(1px); }
@keyframes floatBadge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.modal-overlay {
  position: fixed; inset: 0; z-index: 2147483647; background: rgba(6, 8, 16, 0.85);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  display: flex; align-items: center; justify-content: center; padding: 20px; 
  opacity: 0; pointer-events: none;
  transition: opacity 1s ease-in-out;
}
.modal-overlay.show { opacity: 1; pointer-events: auto; transition: opacity 1s ease-in-out; }

.modal-card {
  position: relative; background: var(--card-bg); border-radius: 28px;
  border: 1px solid var(--border-glow); width: 100%; max-width: 360px;
  padding: 30px 24px; text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), inset 0 0 15px rgba(255, 105, 180, 0.05);
  overflow: hidden; transform: scale(0.9);
  transition: transform 1s ease-in-out;
}
.modal-overlay.show .modal-card { transform: scale(1); }

.water-fill {
  position: absolute; bottom: 0; left: -50%; width: 200%; height: 100%;
  background: linear-gradient(180deg, rgba(255, 105, 180, 0) 0%, rgba(255, 105, 180, 0.04) 100%);
  z-index: 0; pointer-events: none; animation: waveMotion 6s ease-in-out infinite alternate;
}
@keyframes waveMotion { 0% { transform: translateY(50px) rotate(0deg); } 100% { transform: translateY(15px) rotate(360deg); } }

.modal-content { position: relative; z-index: 1; }
.player-controls-fade { transition: opacity 0.4s ease; }
.player-controls-fade.hidden { opacity: 0; pointer-events: none; }