/* youtube.css — La Canción Pensada (logo que sintoniza y abre el reproductor) */

/* Barra de salida (igual que el resto de efectos) */
.exit-bar { position:fixed; top:10px; right:10px; display:flex; gap:8px; z-index:60; }
.exit-btn { font-size:12px; font-weight:600; padding:6px 11px; border-radius:9px; border:1px solid var(--line); background:rgba(255,255,255,.92); color:var(--muted); cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.08); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.exit-btn:active { transform:translateY(1px); }
.exit-btn.danger { color:var(--danger); border-color:#f3c9d2; }
#logout-btn { display:none; }

/* ===================== JUEGO (escena) ===================== */
.yt-screen { min-height:100svh; min-height:100vh; background:#0f0f0f; color:#f1f1f1; overflow:hidden; }
.yt-screen .exit-btn { background:rgba(35,35,35,.88); color:#aaa; border-color:#3a3a3a; }

.yt-stage { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; padding:20px; text-align:center; }
.yt-conn { margin:0; min-height:18px; font-size:12.5px; font-style:italic; color:#8a8a8a; }
.yt-conn.is-ready { color:#c9a84c; }
.yt-conn.is-error { color:#d66; }

/* Logo con ondas y destellos */
.yt-logowrap { position:relative; width:190px; height:190px; display:flex; align-items:center; justify-content:center; }
.yt-logo { position:relative; width:126px; z-index:2; animation:ytBeat 2.6s ease-in-out infinite; filter:drop-shadow(0 8px 30px rgba(255,0,0,.45)); }
.yt-logo svg { width:100%; height:auto; display:block; }
@keyframes ytBeat { 0%,100% { transform:scale(1); } 50% { transform:scale(1.07); } }

/* Ondas tipo sonar (se encienden al sintonizar) */
.yt-ring { position:absolute; left:50%; top:50%; width:130px; height:96px; margin:-48px 0 0 -65px; border:2.5px solid rgba(255,0,0,.55); border-radius:26px; opacity:0; pointer-events:none; }
.searching .yt-ring { animation:ytRing 2.1s ease-out infinite; }
.searching .r2 { animation-delay:.7s; }
.searching .r3 { animation-delay:1.4s; }
@keyframes ytRing { 0% { transform:scale(1); opacity:.75; } 100% { transform:scale(2.6); opacity:0; } }

/* Destellos orbitando (solo al sintonizar) */
.yt-dot { position:absolute; left:50%; top:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; background:#ff4d4d; box-shadow:0 0 12px #ff0000; opacity:0; pointer-events:none; }
.searching .yt-dot { opacity:1; }
.searching .d1 { animation:ytOrbit 1.9s linear infinite; }
.searching .d2 { animation:ytOrbit 2.7s linear infinite reverse; }
.searching .d3 { animation:ytOrbit 3.4s linear infinite; animation-delay:.5s; }
@keyframes ytOrbit {
  from { transform:rotate(0deg) translateX(105px); }
  to   { transform:rotate(360deg) translateX(105px); }
}

/* Al sintonizar, el latido se acelera */
.searching .yt-logo { animation:ytBeat 1s ease-in-out infinite; filter:drop-shadow(0 8px 42px rgba(255,0,0,.7)); }

.yt-hint { margin:0; font-size:15px; color:#cfcfcf; font-style:italic; min-height:22px; }
.searching + .yt-hint { color:#ff8a8a; }

.yt-new { font-size:14px; font-weight:800; letter-spacing:2px; padding:13px 40px; border-radius:14px; border:1px solid #3a3a3a; background:linear-gradient(135deg,#262626,#101010); color:#f1f1f1; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.6); }
.yt-new:active { transform:translateY(1px); }
.yt-new:disabled { opacity:.4; cursor:default; }

/* ===================== REPRODUCTOR ===================== */
.yt-player { position:fixed; inset:0; z-index:40; background:#0f0f0f; display:flex; flex-direction:column; animation:ytOpen .5s ease; }
@keyframes ytOpen { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:none; } }
.yt-playerbar { display:flex; align-items:center; gap:8px; padding:14px 16px; font-size:16px; font-weight:700; letter-spacing:-.5px; }
.yt-framebox { width:100%; aspect-ratio:16/9; background:#000; }
.yt-framebox iframe { width:100%; height:100%; display:block; border:0; }
.yt-playercap { margin:18px 16px 0; font-size:14px; color:#aaa; font-style:italic; text-align:center; }

/* ===================== CONTROL ===================== */
.yt-note { margin:0; font-size:12px; color:var(--muted); text-align:left; width:100%; }
.yt-send { width:100%; padding:13px; border-radius:13px; border:none; cursor:pointer; color:#fff; font-weight:800; letter-spacing:.5px; background:linear-gradient(135deg,#ff4d4d,#c00812); }
.yt-send:active { transform:translateY(1px); }
.yt-reset { width:100%; padding:12px; border-radius:13px; border:none; cursor:pointer; color:#e6e9f2; font-weight:800; letter-spacing:.5px; background:#3a4150; }
.yt-reset:active { transform:translateY(1px); }