@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
* { box-sizing: border-box; }
body { font-family: 'VT323', monospace; background:#FFD1DC; margin:0; }
.launcher-header { text-align:center; padding:24px 12px 8px; font-size:42px; color:#000080; }
.launcher-main { display:flex; flex-direction:column; gap:16px; max-width:500px; margin:0 auto 40px; padding:0 16px; }
.app-card { display:block; background:#ffe8e8; border:2px solid #000; padding:16px 18px; text-decoration:none; color:#000; box-shadow:4px 4px 0 #000; transition:transform .1s; }
.app-card:active { transform:translateY(2px); }
.app-title { font-size:28px; }
.app-desc { font-size:16px; color:#222; }
.app-card.logout { background:#ffb3c6; }
.top-bar { display:flex; align-items:center; gap:12px; padding:10px 14px; background:#000080; color:#fff; font-size:22px; }
.back-link { color:#fff; text-decoration:none; font-size:20px; }
.game-wrapper { display:flex; flex-direction:column; align-items:center; padding:16px; }
canvas { max-width:100%; height:auto; image-rendering:pixelated; background:#000; }
.hud { margin-top:8px; display:flex; gap:24px; font-size:20px; }
.notes-page { display:flex; gap:18px; padding:16px; flex-wrap:wrap; }
.notes-sidebar { flex:0 0 180px; display:flex; flex-direction:column; gap:10px; }
.notes-content { flex:1 1 260px; min-width:260px; }
#notesList button { display:block; width:100%; text-align:center; background:#ffe8e8; border:2px solid #000; padding:8px 10px; margin:4px 0; font-size:20px; }
.note-text { background:#fff; padding:10px; min-height:200px; border:2px solid #000; white-space:pre-wrap; font-size:18px; }
.next-release { width:100%; }
.large-countdown { font-size:30px; line-height:1.15; width:100%; display:block; text-align:center; padding:14px 10px; background:#000080; color:#fff; border:2px solid #000; box-shadow:4px 4px 0 #000; font-weight:400; margin:0 auto; }
.login-main { max-width:380px; margin:0 auto; padding:0 20px 40px; }
.form-panel { display:flex; flex-direction:column; gap:18px; background:#ffe8e8; border:2px solid #000; box-shadow:4px 4px 0 #000; padding:28px 30px 32px; }
.input-label { display:flex; flex-direction:column; gap:6px; font-size:22px; }
.input-label input { font-family:inherit; font-size:22px; padding:10px 12px; border:2px solid #000; background:#fff; box-shadow:2px 2px 0 #000; }
.btn-action { font-family:inherit; font-size:24px; padding:12px 16px; background:#000080; color:#fff; border:2px solid #000; cursor:pointer; box-shadow:4px 4px 0 #000; }
.btn-action:active { transform:translateY(2px); box-shadow:2px 2px 0 #000; }
.error { background:#ffb3c6; border:2px solid #000; padding:8px 10px; margin:0 0 16px; font-size:18px; }
/* Mobile controls generic */
#mobile-controls { display:flex; flex-direction:column; gap:6px; margin-top:14px; }
#mobile-controls .row { display:flex; justify-content:center; gap:10px; }
#mobile-controls button { font-family:'VT323', monospace; font-size:28px; padding:10px 16px; background:#ffe8e8; border:2px solid #000; box-shadow:3px 3px 0 #000; min-width:64px; border-radius:6px; cursor:pointer; }
#mobile-controls button:active { transform:translateY(2px); box-shadow:1px 1px 0 #000; }
@media (max-width:600px){
  .launcher-header { font-size:34px; }
  .app-title { font-size:24px; }
  .hud { font-size:18px; }
  .notes-sidebar { flex:1 1 100%; max-width:100%; }
  .notes-content { flex:1 1 100%; }
  .large-countdown { font-size:34px; }
}

/* Heart particle effect (used on index and notes) */
.heart-particle { position:fixed; pointer-events:none; font-size:20px; color:#ff69b4; animation:float-up 2s ease-out forwards; z-index:1000; }
@keyframes float-up { 0% { opacity:1; transform:translateY(0) scale(1); } 100% { opacity:0; transform:translateY(-100px) scale(0.5); } }

/* Mad image on index */
#madGif { cursor:pointer; transition:transform .2s; width:120px; height:120px; display:block; margin:0 auto 20px; }
#madGif:hover { transform:scale(1.1); }
#madGif:active { transform:scale(0.95); }

/* Marcell gif above canvas on game page */
#marcellGif { display:block; margin:0 auto 10px; width:120px; height:120px; }

/* Game HUD and controls */
.hud-bar { display:flex; gap:26px; justify-content:center; font-size:22px; color:#000080; margin-top:6px; }
.hud-bar span { min-width:90px; display:inline-block; text-align:center; }
#gameOverOverlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(0,0,0,0.78); color:#fff; font-size:30px; letter-spacing:1px; text-align:center; padding:20px; }
#gameContainer { position:relative; width:100%; max-width:380px; }
#pauseBtn { position:absolute; top:6px; right:6px; background:#C0C0C0; border:2px solid #000; font-family:'VT323', monospace; font-size:20px; padding:4px 10px; cursor:pointer; box-shadow:3px 3px 0 #000; }
#pauseBtn:active { transform:translateY(2px); box-shadow:1px 1px 0 #000; }

/* Notes page Jo image */
#joGif { cursor:pointer; transition:transform .2s; width:120px; height:120px; display:block; margin:0 auto 20px; }
#joGif:hover { transform:scale(1.1); }
#joGif:active { transform:scale(0.95); }

/* Floating audio player on index */
.floating-player { position:fixed; bottom:20px; right:20px; background:rgba(255,209,220,0.95); border:2px solid #000; border-radius:15px; padding:15px; box-shadow:4px 4px 0 #000; z-index:1000; backdrop-filter:blur(10px); min-width:200px; }
.player-title { font-family:'VT323', monospace; font-size:16px; color:#000; text-align:center; margin-bottom:10px; font-weight:bold; }
.player-controls { display:flex; gap:10px; justify-content:center; align-items:center; }
.player-btn { background:#ffe8e8; border:2px solid #000; font-family:'VT323', monospace; font-size:18px; padding:8px 12px; cursor:pointer; box-shadow:2px 2px 0 #000; transition:all .2s; }
.player-btn:hover { transform:translateY(-2px); box-shadow:4px 4px 0 #000; }
.player-btn:active { transform:translateY(0); box-shadow:1px 1px 0 #000; }
.player-btn.playing { background:#FF1493; color:#fff; }
.player-progress { width:100%; height:6px; background:#ddd; border:1px solid #000; border-radius:3px; margin:10px 0; overflow:hidden; }
.progress-bar { height:100%; background:#FF1493; width:0%; transition:width .1s; }
.player-time { font-family:'VT323', monospace; font-size:14px; color:#000; text-align:center; margin-top:5px; }
.player-minimize { position:absolute; top:5px; right:5px; background:#ffe8e8; border:1px solid #000; font-family:'VT323', monospace; font-size:12px; padding:2px 6px; cursor:pointer; box-shadow:1px 1px 0 #000; }
.player-minimize:hover { background:#FF1493; color:#fff; }
.player-minimized { width:60px; height:60px; padding:10px; }
.player-minimized .player-title,
.player-minimized .player-controls,
.player-minimized .player-progress,
.player-minimized .player-time { display:none; }
.player-minimized .player-minimize { top:50%; left:50%; transform:translate(-50%, -50%); font-size:16px; padding:8px 12px; }

.game-over-screen { display:flex; flex-direction:column; align-items:center; gap:18px; }
.game-over-screen .winner-name { font-size:48px; color:#FF1493; font-weight:700; }

/* Confetti styles */
.confetti-container { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:2000; }
.confetti-piece { position:absolute; width:10px; height:14px; opacity:0.95; transform-origin:center; will-change:transform, opacity; }
@keyframes confetti-fall {
  0% { transform: translate3d(0,-10vh,0) rotate(0deg); opacity:1; }
  100% { transform: translate3d(var(--tx,0), 110vh, 0) rotate(720deg); opacity:0.85; }
}
@keyframes confetti-sway {
  0% { transform: translateX(0); }
 50% { transform: translateX(20px); }
 100% { transform: translateX(0); }
}

/* Playlist Guesser specific styles */
.playlist-guesser { display:flex; flex-direction:column; align-items:center; gap:18px; padding:20px; }
.playlist-guesser .current-track { display:flex; flex-direction:column; align-items:center; gap:12px; max-width:520px; width:100%; }
.playlist-guesser .album-cover { width:60%; max-width:320px; height:auto; border:4px solid #000; box-shadow:6px 6px 0 #000; background:#fff; }
.playlist-guesser .song-title { font-size:22px; margin:0; text-align:center; }
.playlist-guesser .artist-name { font-size:18px; margin:0; text-align:center; color:#333; }
.playlist-guesser .player-scores { width:100%; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.playlist-guesser .player-guess-buttons { width:100%; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.playlist-guesser .player-guess-button { font-size:18px; padding:8px 12px; background:#ffe8e8; border:2px solid #000; cursor:pointer; box-shadow:3px 3px 0 #000; }
.playlist-guesser .player-guess-button:disabled { opacity:0.45; cursor:not-allowed; box-shadow:none; }

/* Center game controls and give breathing room between guesses and the next-button */
.playlist-guesser .game-controls { display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; margin-top:12px; }
.playlist-guesser .player-guess-buttons { margin-bottom:10px; }
.playlist-guesser .game-controls .btn-action { align-self:center; margin:0; }
.playlist-guesser #nextSongButton { min-width:180px; }
.playlist-guesser .audio-controls { display:flex; gap:10px; align-items:center; }

@media (max-width:600px) {
  .playlist-guesser .album-cover { width:80%; max-width:260px; }
  .playlist-guesser .song-title { font-size:20px; }
  .playlist-guesser .artist-name { font-size:18px; }
  .playlist-guesser .player-guess-button { font-size:16px; padding:8px 10px; }
}