* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --pac-yellow: #FFE600; --bg-dark: #0a0a1a; }
body { font-family: 'Press Start 2P', monospace; background: var(--bg-dark); color: white; min-height: 100vh; overflow-x: hidden; }
.scanlines { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 1px, transparent 1px, transparent 3px); }
.maze-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: radial-gradient(ellipse at center, #0d0d2b 0%, #0a0a1a 70%), linear-gradient(90deg, transparent 49.5%, #1a1a4e22 49.5%, #1a1a4e22 50.5%, transparent 50.5%), linear-gradient(0deg, transparent 49.5%, #1a1a4e22 49.5%, #1a1a4e22 50.5%, transparent 50.5%); background-size: 100% 100%, 40px 40px, 40px 40px; }
.floating-ghosts { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.ghost-svg { animation: floatGhost 6s ease-in-out infinite; }
@keyframes floatGhost { 0%,100%{transform:translateY(0) translateX(0)} 25%{transform:translateY(-20px) translateX(10px)} 50%{transform:translateY(-10px) translateX(-10px)} 75%{transform:translateY(-25px) translateX(5px)} }
.app { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 30px 20px; opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; }
.app.loaded { opacity: 1; transform: translateY(0); }
header { text-align: center; margin-bottom: 50px; }
.title-container { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 20px; }
h1 { font-size: 3rem; letter-spacing: 6px; animation: titleGlow 2s ease-in-out infinite alternate; }
.title-pac, .title-man { color: var(--pac-yellow); text-shadow: 0 0 10px var(--pac-yellow), 0 0 30px var(--pac-yellow), 0 0 60px var(--pac-yellow); }
.title-dash { color: white; animation: dashBlink 1s step-end infinite; }
@keyframes titleGlow { 0%{filter:brightness(1)} 100%{filter:brightness(1.3)} }
@keyframes dashBlink { 0%,49%{opacity:1} 50%,100%{opacity:0.3} }
h2 { font-size: 0.85rem; color: #00FFFF; letter-spacing: 4px; text-shadow: 0 0 10px #00FFFF66; animation: subtitlePulse 3s ease-in-out infinite; }
@keyframes subtitlePulse { 0%,100%{opacity:1} 50%{opacity:0.7} }
.pacman { display: inline-block; }
.pacman-body { width: 40px; height: 40px; background: var(--pac-yellow); border-radius: 50%; position: relative; animation: pacChomp 0.4s ease-in-out infinite; }
.pacman { filter: drop-shadow(0 0 10px rgba(255,230,0,0.5)); }
.pacman-eye { position:absolute; top:6px; left:14px; width:6px; height:6px; background:var(--bg-dark); border-radius:50%; z-index:5; }
.pacman.right .pacman-body { transform: scaleX(-1); }
@keyframes pacChomp {
  0%, 100% { clip-path: polygon(50% 50%, 100% 50%, 100% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 50%); }
  50% { clip-path: polygon(50% 50%, 100% 10%, 100% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 90%); }
}
.pacman-dots { display:flex; justify-content:center; gap:12px; margin-top:20px; flex-wrap:wrap; }
.dot { width:6px; height:6px; background:#FFB897; border-radius:50%; animation:dotAppear 0.3s ease forwards, dotPulse 2s ease-in-out infinite; opacity:0; box-shadow:0 0 4px rgba(255,184,151,0.4); }
@keyframes dotAppear { to{opacity:1} }
@keyframes dotPulse { 0%,100%{transform:scale(1);opacity:0.6} 50%{transform:scale(1.3);opacity:1} }
.scoreboard { display:flex; flex-direction:column; gap:20px; }
.score-row { display:grid; grid-template-columns:200px 1fr 160px; align-items:center; gap:16px; padding:16px 20px; background:linear-gradient(135deg,rgba(26,26,62,0.53),rgba(13,13,43,0.53)); border:1px solid #2a2a5e; border-radius:12px; opacity:0; transform:translateX(-60px); transition:all 0.6s cubic-bezier(0.16,1,0.3,1); position:relative; overflow:hidden; }
.score-row::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.03),transparent); animation:shimmer 3s ease-in-out infinite; }
@keyframes shimmer { 0%{left:-100%} 100%{left:200%} }
.score-row.visible { opacity:1; transform:translateX(0); }
.score-row:hover { transform:translateX(5px) scale(1.01); border-color:#4a4a8e; background:linear-gradient(135deg,rgba(26,26,78,0.67),rgba(13,13,59,0.67)); box-shadow:0 5px 30px rgba(0,0,0,0.3); }
.score-row.first-place { border-color:rgba(255,230,0,0.27); background:linear-gradient(135deg,rgba(42,42,30,0.53),rgba(26,26,13,0.53)); }
.score-row.first-place .bar-container { border-color:rgba(255,230,0,0.2); }
.score-row.first-place::after { content:''; position:absolute; top:-1px; left:-1px; right:-1px; bottom:-1px; border-radius:12px; border:1px solid transparent; background:linear-gradient(135deg,rgba(255,230,0,0.2),transparent,rgba(255,230,0,0.07)) border-box; -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; animation:goldenBorder 3s ease-in-out infinite alternate; }
@keyframes goldenBorder { 0%{opacity:0.5} 100%{opacity:1} }
.player-info { display:flex; align-items:center; gap:8px; }
.rank { font-size:0.7rem; color:#888; min-width:28px; }
.rank-emoji { font-size:1.1rem; min-width:24px; animation:rankBounce 2s ease-in-out infinite; }
@keyframes rankBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
.player-ghost { font-size:1.3rem; animation:ghostWobble 3s ease-in-out infinite; }
@keyframes ghostWobble { 0%,100%{transform:rotate(0)} 25%{transform:rotate(5deg)} 75%{transform:rotate(-5deg)} }
.player-name { font-size:0.9rem; color:var(--pac-yellow); text-shadow:0 0 8px rgba(255,230,0,0.27); letter-spacing:2px; }
.bar-container { height:32px; background:#0a0a2a; border-radius:16px; position:relative; overflow:hidden; border:1px solid #1a1a4e; }
.bar { height:100%; border-radius:16px; width:0%; transition:width 2s cubic-bezier(0.16,1,0.3,1); position:relative; overflow:hidden; }
.bar-shine { position:absolute; top:0; left:0; width:100%; height:50%; background:linear-gradient(180deg,rgba(255,255,255,0.2),transparent); border-radius:16px 16px 0 0; }
.bar-particles { position:absolute; top:0; left:0; width:100%; height:100%; }
.particle { position:absolute; bottom:0; width:3px; height:3px; background:rgba(255,255,255,0.8); border-radius:50%; animation:particleFloat 2s ease-in-out infinite; }
@keyframes particleFloat { 0%{transform:translateY(0) scale(1);opacity:0.8} 50%{transform:translateY(-15px) scale(0.5);opacity:0.3} 100%{transform:translateY(-25px) scale(0);opacity:0} }
.bar-end-glow { position:absolute; right:-4px; top:50%; transform:translateY(-50%); width:12px; height:12px; border-radius:50%; animation:endGlow 1.5s ease-in-out infinite alternate; filter:blur(3px); }
@keyframes endGlow { 0%{opacity:0.5;transform:translateY(-50%) scale(1)} 100%{opacity:1;transform:translateY(-50%) scale(1.5)} }
.score-value { text-align:right; display:flex; flex-direction:column; align-items:flex-end; }
.score-number { font-size:1.1rem; color:white; text-shadow:0 0 10px rgba(255,255,255,0.5); font-variant-numeric:tabular-nums; }
.score-pts { font-size:0.5rem; color:#666; letter-spacing:3px; margin-top:2px; }
footer { text-align:center; margin-top:60px; padding-bottom:40px; }
.footer-dots { margin-bottom:20px; }
.footer-dot { font-size:2rem; color:#FFB897; animation:footerDotPulse 2s ease-in-out infinite; display:inline-block; margin:0 2px; }
@keyframes footerDotPulse { 0%,100%{opacity:0.3;transform:scale(0.8)} 50%{opacity:1;transform:scale(1.2)} }
.insert-coin { font-size:0.65rem; color:#666; letter-spacing:4px; animation:insertCoin 1.5s step-end infinite; cursor:default; user-select:none; }
@keyframes insertCoin { 0%,49%{opacity:1} 50%,100%{opacity:0} }
.high-score-flash { margin-top:20px; font-size:0.75rem; color:var(--pac-yellow); text-shadow:0 0 15px rgba(255,230,0,0.4); animation:highScoreFlash 2s ease-in-out infinite alternate; letter-spacing:3px; }
@keyframes highScoreFlash { 0%{opacity:0.7} 100%{opacity:1;text-shadow:0 0 20px var(--pac-yellow),0 0 40px rgba(255,230,0,0.4)} }

/* ADMIN */
.admin-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); z-index:9999; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.3s ease; }
.admin-overlay.open { opacity:1; pointer-events:all; }
.admin-panel { background:linear-gradient(135deg,#1a1a3e,#0d0d2b); border:2px solid var(--pac-yellow); border-radius:16px; padding:30px; max-width:520px; width:90%; max-height:85vh; overflow-y:auto; box-shadow:0 0 40px rgba(255,230,0,0.2); position:relative; }
.admin-panel h3 { font-size:0.85rem; color:var(--pac-yellow); text-align:center; margin-bottom:20px; }
.admin-close { position:absolute; top:12px; right:16px; background:none; border:none; color:#FF0000; font-size:1.1rem; cursor:pointer; font-family:'Press Start 2P',monospace; }
.admin-close:hover { text-shadow:0 0 10px #FF0000; }
.admin-form { display:flex; flex-direction:column; align-items:center; gap:15px; width:100%; }
.admin-input { font-family:'Press Start 2P',monospace; font-size:0.65rem; padding:10px 14px; background:#0a0a2a; border:1px solid #2a2a5e; border-radius:8px; color:white; text-align:center; width:100%; outline:none; }
.admin-input:focus { border-color:var(--pac-yellow); box-shadow:0 0 10px rgba(255,230,0,0.2); }
.admin-btn { font-family:'Press Start 2P',monospace; font-size:0.55rem; padding:10px 18px; background:linear-gradient(135deg,#2a2a5e,#1a1a4e); border:1px solid #4a4a8e; border-radius:8px; color:white; cursor:pointer; transition:all 0.2s; }
.admin-btn:hover { background:linear-gradient(135deg,#3a3a7e,#2a2a5e); border-color:var(--pac-yellow); box-shadow:0 0 15px rgba(255,230,0,0.2); }
.admin-btn.green { border-color:#00FF0066; }
.admin-btn.green:hover { border-color:#00FF00; box-shadow:0 0 15px rgba(0,255,0,0.3); }
.admin-btn.red { border-color:#FF000066; }
.admin-btn.red:hover { border-color:#FF0000; box-shadow:0 0 15px rgba(255,0,0,0.3); }
.admin-error { color:#FF0000; font-size:0.5rem; text-shadow:0 0 5px rgba(255,0,0,0.5); animation:shake 0.3s ease; }
.admin-success { color:#00FF00; font-size:0.5rem; text-shadow:0 0 5px rgba(0,255,0,0.5); text-align:center; margin-top:8px; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.admin-players { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.admin-row { display:flex; align-items:center; gap:6px; padding:8px; background:rgba(10,10,42,0.8); border:1px solid #2a2a5e; border-radius:8px; flex-wrap:wrap; }
.admin-row input { font-family:'Press Start 2P',monospace; font-size:0.55rem; padding:6px 8px; background:#0a0a2a; border:1px solid #2a2a5e; border-radius:6px; color:white; outline:none; }
.admin-row input:focus { border-color:var(--pac-yellow); }
.admin-row .n { flex:1; min-width:80px; }
.admin-row .s { width:90px; text-align:right; }
.admin-row .e { width:45px; text-align:center; }
.admin-row .c { width:36px; height:28px; padding:2px; cursor:pointer; border-radius:6px; background:#0a0a2a; border:1px solid #2a2a5e; }
.admin-del { background:none; border:none; color:#FF000088; font-size:0.9rem; cursor:pointer; padding:2px 6px; }
.admin-del:hover { color:#FF0000; }
.admin-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:12px; }
.admin-divider { border:none; border-top:1px solid #2a2a5e; margin:18px 0; }
.admin-label { font-size:0.55rem; color:#00FFFF; margin-bottom:6px; letter-spacing:2px; }
.admin-pw-section input { font-family:'Press Start 2P',monospace; font-size:0.55rem; padding:8px; background:#0a0a2a; border:1px solid #2a2a5e; border-radius:6px; color:white; outline:none; width:100%; margin-bottom:6px; }
.admin-pw-section input:focus { border-color:var(--pac-yellow); }

@media (max-width:768px) {
  h1{font-size:2rem} h2{font-size:0.6rem}
  .score-row{grid-template-columns:1fr;gap:8px;padding:12px 16px}
  .player-info{justify-content:center} .bar-container{height:24px}
  .score-value{align-items:center;flex-direction:row;justify-content:center;gap:8px}
  .score-number{font-size:0.9rem}
  .pacman-body{width:28px;height:28px} .pacman-eye{top:4px;left:12px;width:5px;height:5px}
  .title-container{gap:12px}
}
@media (max-width:480px) {
  h1{font-size:1.4rem;letter-spacing:3px} .app{padding:20px 10px}
  .player-name{font-size:0.75rem} .score-number{font-size:0.8rem}
}