/* =====================================================================
   MEDIAVIDA HERO — estilos
   Trap oscuro + menús de consola de 64 bits: tinta, hueso, sangre y brasa;
   letras góticas pixeladas, marcos dobles, cursor triangular que parpadea.
   ===================================================================== */
:root {
  color-scheme: dark;
  --ink: #0c0a09;
  --ink-2: #15110f;
  --panel: rgba(17, 13, 11, 0.93);
  --panel-2: rgba(30, 23, 19, 0.96);
  --bone: #e6dcc3;
  --bone-dim: #a89c84;
  --sepia: #3b2b22;
  --blood: #d6402c;
  --ember: #ff7a3d;
  --moss: #5fae8c;
  --l0: #2fe36b; --l1: #ff3b4e; --l2: #ffd93a; --l3: #3aa8ff; --l4: #ff8a1f;
  --sp: #5ff2ff;
  --display: "Jacquard 24", "UnifrakturCook", "Old English Text MT", serif;
  --ui: "Pixelify Sans", "Lucida Console", monospace;
  --frame: 0 0 0 2px var(--ink), 0 0 0 4px var(--bone-dim), 0 0 0 6px var(--ink), 0 0 0 7px rgba(230,220,195,.25);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--bone); font-family: var(--ui); overflow: hidden; -webkit-font-smoothing: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, .row:focus-visible { outline: 2px dashed var(--ember); outline-offset: 3px; }
.hidden { display: none !important; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
/* grano de película encima de todo */
.grain { position: fixed; inset: -50%; z-index: 40; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0,0) } 25% { transform: translate(-3%,2%) } 50% { transform: translate(2%,-3%) } 75% { transform: translate(-2%,-1%) } 100% { transform: translate(1%,3%) } }

/* marco de consola: doble borde de hueso con esquinas */
.frame { position: relative; box-shadow: var(--frame); }
.frame::before, .frame::after { content: ""; position: absolute; width: 8px; height: 8px; background: var(--bone); pointer-events: none; }
.frame::before { top: -6px; left: -6px; }
.frame::after { bottom: -6px; right: -6px; }

/* cursor triangular parpadeante */
.cursor { display: inline-block; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid var(--ember); margin-right: 12px; opacity: 0; vertical-align: middle; }
.active > .cursor, :hover > .cursor, :focus-visible > .cursor { opacity: 1; animation: blink .8s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; transform: translateX(3px); } }

.cd { width: 100%; height: 100%; display: block; border-radius: 50%; filter: drop-shadow(0 10px 30px rgba(0,0,0,.7)); user-select: none; -webkit-user-drag: none; }
.spin-slow { animation: spin 3s linear infinite; }
.spinning { animation: spin 1.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.boot { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 22px; background: var(--ink); z-index: 50; transition: opacity .6s; }
.boot .cd { width: 160px; height: 160px; }
.boot p { color: var(--bone-dim); margin: 0; letter-spacing: .08em; }

/* firma del creador */
.credit { position: fixed; left: 18px; bottom: 16px; z-index: 12; display: flex; align-items: center; gap: 10px; color: var(--bone-dim); text-decoration: none; pointer-events: auto; }
.credit canvas { width: 64px; height: 64px; image-rendering: pixelated; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.6)); }
.credit span { display: grid; font-size: 11px; line-height: 1.2; letter-spacing: .04em; }
.credit b { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: .9; color: var(--bone); letter-spacing: 0; }
body.in-menu .credit { left: 28px; bottom: 146px; }
body.in-menu .credit canvas { width: 52px; height: 52px; }
body.in-menu .side-foot { margin-bottom: 104px; }
@media (max-width: 760px) { body.in-menu .credit { display: none; } .credit { left: 10px; bottom: 10px; } }

/* =====================================================================
   INICIO
   ===================================================================== */
.title { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 45%, rgba(12,10,9,.15) 0%, rgba(12,10,9,.55) 55%, rgba(12,10,9,.92) 100%); }
.title-inner { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 24px 16px; }
.sun { width: clamp(84px, 12vh, 128px); aspect-ratio: 1; color: var(--bone); filter: drop-shadow(0 0 18px rgba(255,122,61,.55)); animation: sunpulse 2.4s ease-in-out infinite; }
.sun svg { width: 100%; height: 100%; display: block; animation: spin 40s linear infinite; }
@keyframes sunpulse { 50% { filter: drop-shadow(0 0 30px rgba(214,64,44,.8)); } }
.wordmark { margin: 4px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(64px, 13vw, 170px); line-height: .82; color: var(--bone);
  text-shadow: 5px 5px 0 #6b1a12, 10px 10px 0 rgba(0,0,0,.55); letter-spacing: .01em; }
.by { margin: 10px 0 26px; font-size: clamp(22px, 2.3vw, 30px); letter-spacing: .5em; text-shadow: 2px 2px 0 rgba(0,0,0,.6); color: var(--ember); text-transform: lowercase; padding-left: .5em; }
.start-menu { display: grid; gap: 2px; padding: 18px 22px; min-width: min(360px, 86vw); background: var(--panel); }
.start-menu button { display: flex; align-items: center; background: none; border: 0; padding: 12px 10px; font-size: 26px; text-align: left; color: var(--bone-dim); }
.start-menu button.active, .start-menu button:hover { color: var(--bone); background: linear-gradient(90deg, rgba(214,64,44,.25), transparent); }
.hint { margin: 18px 0 0; font-size: 14px; color: var(--bone-dim); opacity: .8; }
.gfx-toggle { display: flex; align-items: center; gap: 4px; margin-top: 14px; padding: 4px; border: 1px solid rgba(230,220,195,.18); background: var(--panel); font-size: 14px; }
.gfx-toggle span { padding: 0 10px 0 8px; color: var(--bone-dim); }
.spotify-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; padding: 7px 14px 7px 9px; background: var(--panel); border: 1px solid rgba(230,220,195,.18); color: var(--bone); text-decoration: none; font-size: 15px; transition: border-color .12s, color .12s; }
.spotify-link svg { width: 24px; height: 24px; fill: #1ed760; flex: none; }
.spotify-link:hover { border-color: #1ed760; color: #fff; }
.gfx-toggle button { background: none; border: 0; padding: 6px 12px; color: var(--bone-dim); font: inherit; cursor: pointer; }
.gfx-toggle button:hover { color: var(--bone); }
.gfx-toggle button.on { background: rgba(214,64,44,.3); color: var(--bone); }
.fs-btn { position: fixed; right: 18px; bottom: 18px; width: 44px; height: 44px; display: grid; place-items: center; background: var(--panel); border: 2px solid var(--bone-dim); }
.fs-btn svg { width: 22px; height: 22px; fill: var(--bone); }
.fs-btn:hover { border-color: var(--ember); }
.fs-btn.small { position: static; width: 38px; height: 38px; }
.title.leaving .title-inner { animation: unfold .35s ease-in forwards; }
@keyframes unfold { to { transform: scale(1.08); opacity: 0; filter: blur(4px); } }

/* =====================================================================
   INTERFAZ DESPLEGADA
   ===================================================================== */
.menu { position: fixed; inset: 0; z-index: 10; display: grid; grid-template-columns: 240px minmax(0, 1fr) 300px; grid-template-rows: minmax(0, 1fr) 84px; gap: 16px; padding: 16px; }
.menu.opening > * { animation: rise .45s cubic-bezier(.2,.8,.2,1) both; }
.menu.opening > .main { animation-delay: .05s; } .menu.opening > .now { animation-delay: .1s; } .menu.opening > .player { animation-delay: .15s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.side, .now, .player { background: var(--panel); }
.side { grid-row: 1; padding: 18px 14px; display: flex; flex-direction: column; gap: 22px; }
.brand { display: flex; align-items: center; gap: 12px; padding: 4px; background: none; border: 0; text-align: left; }
.brand-sun { width: 44px; height: 44px; color: var(--bone); flex: none; }
.brand-sun svg { width: 100%; height: 100%; }
.brand strong { display: block; font-family: var(--display); font-weight: 400; font-size: 34px; line-height: .9; }
.brand small { color: var(--bone-dim); font-size: 12px; }
.brand:hover small { color: var(--ember); }
nav { display: grid; gap: 2px; }
.nav-item { display: flex; align-items: center; background: none; border: 0; padding: 10px 6px; color: var(--bone-dim); font-size: 18px; text-align: left; }
.nav-item:hover, .nav-item.active { color: var(--bone); }
.side-foot { margin-top: auto; font-size: 13px; line-height: 1.5; color: var(--bone-dim); padding: 12px; border: 2px dashed rgba(168,156,132,.35); }
.side-foot p { margin: 0; }

.main { grid-row: 1; overflow: hidden auto; position: relative; }
.main::-webkit-scrollbar, .now::-webkit-scrollbar { width: 10px; }
.main::-webkit-scrollbar-thumb, .now::-webkit-scrollbar-thumb { background: var(--sepia); }
.view { display: none; }
.view.active { display: block; }
.album-head { display: flex; align-items: flex-end; gap: 28px; padding: 90px 28px 26px; background: linear-gradient(180deg, rgba(12,10,9,0) 0%, rgba(12,10,9,.3) 45%, var(--panel) 100%); }
.cover { width: 220px; height: 220px; object-fit: cover; flex: none; box-shadow: var(--frame), 0 20px 50px rgba(0,0,0,.6); }
.album-meta { min-width: 0; }
.kind { margin: 0 0 4px; font-size: 15px; color: var(--ember); }
.album-title { margin: 0; font-family: var(--display); font-weight: 400; line-height: .8; font-size: clamp(56px, 7vw, 132px); overflow-wrap: anywhere; color: var(--bone); text-shadow: 5px 5px 0 #6b1a12; }
.album-sub { margin: 12px 0 0; font-size: 16px; display: flex; flex-wrap: wrap; gap: 12px; }
.album-sub span { color: var(--bone-dim); }

.album-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; padding: 18px 28px; background: var(--panel); }
.big-play { width: 58px; height: 58px; border: 0; background: var(--blood); display: grid; place-items: center; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transition: transform .12s, background .12s; }
.big-play svg { width: 26px; height: 26px; fill: var(--bone); margin-left: 3px; }
.big-play:hover { transform: scale(1.08); background: var(--ember); }
.diff-switch { display: inline-flex; gap: 6px; }
.diff-switch button { border: 2px solid var(--sepia); background: var(--ink-2); padding: 7px 14px; font-size: 16px; color: var(--bone-dim); }
.diff-switch button[aria-checked="true"] { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.diff-switch button:hover { border-color: var(--ember); }
.mode-toggle { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--bone-dim); cursor: pointer; }
.mode-toggle input { width: 18px; height: 18px; accent-color: var(--blood); }

.tracklist { background: var(--panel); padding: 0 18px 40px; min-height: 50vh; }
.tl-head, .row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 150px 110px 60px; align-items: center; gap: 14px; padding: 0 12px; }
.tl-head .sort { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.tl-head .sort:hover, .tl-head .sort.on { color: var(--bone); }
.tl-head .sort i { font-style: normal; font-size: 10px; color: var(--ember); }
.tl-head .sort:first-child { justify-content: center; }
.tl-head { height: 38px; color: var(--bone-dim); font-size: 13px; border-bottom: 2px solid var(--sepia); margin-bottom: 6px; position: sticky; top: 0; background: var(--panel-2); z-index: 2; }
.c-dur, .row .dur { text-align: right; justify-self: end; }
.row { height: 56px; cursor: pointer; user-select: none; border-left: 3px solid transparent; }
.row:hover { background: rgba(230,220,195,.06); }
.row.selected { background: rgba(214,64,44,.16); border-left-color: var(--blood); }
.row .num { color: var(--bone-dim); text-align: center; position: relative; }
.row .num svg { width: 16px; height: 16px; fill: var(--bone); display: none; margin: auto; }
.row:hover .num span, .row.playing .num span { display: none; }
.row:hover .num svg, .row.playing .num svg { display: block; }
.row.playing .num svg { fill: var(--ember); }
.row .t { min-width: 0; }
.row .t b { display: block; font-weight: 600; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row.playing .t b { color: var(--ember); }
.row .t small { color: var(--bone-dim); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.exp { font-style: normal; display: inline-grid; place-items: center; width: 15px; height: 15px; background: var(--bone-dim); color: var(--ink); font-size: 10px; font-weight: 700; }
.row.missing { opacity: .4; cursor: default; }
.row.missing:hover { background: none; }
.miss { font-size: 12px; color: var(--bone-dim); }
.row .rec, .row .dur { color: var(--bone-dim); font-size: 15px; }
.pips { display: flex; gap: 4px; }
.pips i { width: 10px; height: 10px; background: rgba(230,220,195,.12); }
.pips i.on { background: var(--bone); }
.pips i.on:nth-child(n+4) { background: var(--blood); }
.row .play-row { opacity: 0; border: 0; background: var(--bone); color: var(--ink); font-size: 14px; padding: 5px 10px; justify-self: start; }
.row:hover .play-row, .row.selected .play-row { opacity: 1; }
.row .play-row:hover { background: var(--ember); }
.row .diffcell { display: flex; align-items: center; gap: 10px; min-width: 0; }

.now { grid-row: 1; padding: 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.now-label { margin: 0; color: var(--ember); font-size: 14px; }
.now-cd { width: min(190px, 70%); aspect-ratio: 1; align-self: center; margin: 4px 0 6px; }
.now-cd .cd.spinning { animation-duration: 2.2s; }
.now h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 52px; line-height: .9; overflow-wrap: anywhere; }
.now-artist { margin: 0; color: var(--bone-dim); }
.sections-bar { display: flex; height: 26px; gap: 2px; }
.sections-bar span { position: relative; display: block; min-width: 2px; }
.sections-bar span:hover::after { content: attr(data-name); position: absolute; bottom: 120%; left: 0; white-space: nowrap; background: var(--ink); border: 1px solid var(--bone-dim); padding: 3px 7px; font-size: 12px; z-index: 3; }
.sec-intro, .sec-outro { background: #4a3a30; }
.sec-verso { background: var(--bone-dim); }
.sec-puente { background: var(--moss); }
.sec-coro { background: var(--blood); }
.now-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--bone-dim); margin-top: -4px; }
.now-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; }
.now-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0; }
.now-stats dt { color: var(--bone-dim); font-size: 12px; }
.now-stats dd { margin: 2px 0 0; font-size: 20px; font-weight: 600; }
.play-btn { border: 0; background: var(--bone); color: var(--ink); font-weight: 700; padding: 13px 20px; font-size: 17px; transition: background .12s, transform .12s; display: flex; align-items: center; justify-content: center; }
.play-btn:hover { background: var(--ember); transform: translateY(-1px); }
.play-btn .cursor { border-left-color: var(--ink); }
#now-play { margin-top: auto; }

.player { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 300px 44px minmax(0, 1fr) 190px 38px; align-items: center; gap: 16px; padding: 0 16px; }
.pl-song { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pl-cover { width: 54px; height: 54px; object-fit: cover; flex: none; box-shadow: 0 0 0 2px var(--bone-dim); }
.pl-song strong { display: block; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-song small { color: var(--bone-dim); font-size: 12px; }
.pl-toggle { width: 44px; height: 44px; border: 2px solid var(--bone-dim); background: var(--ink-2); display: grid; place-items: center; }
.pl-toggle svg { width: 20px; height: 20px; fill: var(--bone); }
.pl-toggle .i-play { display: none; }
.pl-toggle.paused .i-play { display: block; } .pl-toggle.paused .i-pause { display: none; }
.pl-toggle:disabled { opacity: .35; cursor: default; }
.pl-toggle:not(:disabled):hover { border-color: var(--ember); }
.pl-wave canvas { width: 100%; height: 56px; display: block; image-rendering: pixelated; }
.pl-vol { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.pl-vol svg { width: 20px; height: 20px; fill: var(--bone-dim); }
input[type=range] { accent-color: var(--blood); }
.pl-vol input { width: 120px; }

.view-howto, .view-settings { padding: 36px 32px 60px; background: var(--panel); min-height: 100%; }
.view h2 { font-family: var(--display); font-weight: 400; font-size: 76px; margin: 0 0 24px; line-height: .9; text-shadow: 4px 4px 0 #6b1a12; }
.howto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 26px 30px; max-width: 1000px; }
.tip { padding: 16px 18px; background: rgba(230,220,195,.04); border-left: 3px solid var(--blood); }
.howto-grid h3 { margin: 0 0 8px; font-size: 20px; font-weight: 600; color: var(--bone); }
.howto-grid p { margin: 0 0 10px; color: #d2c8b0; line-height: 1.5; max-width: 60ch; }
.howto-grid .note { color: var(--bone-dim); font-size: 14px; }
kbd { display: inline-block; min-width: 26px; padding: 2px 7px; background: var(--ink); border: 2px solid var(--bone-dim); font: 600 14px var(--ui); text-align: center; color: var(--bone); }
.keys { display: flex; gap: 8px; margin: 12px 0; }
.keys kbd { width: 44px; height: 44px; display: grid; place-items: center; font-size: 18px; color: #111; border-color: #111; }
.keys .k0 { background: var(--l0); } .keys .k1 { background: var(--l1); } .keys .k2 { background: var(--l2); } .keys .k3 { background: var(--l3); } .keys .k4 { background: var(--l4); }
.settings { display: grid; gap: 18px; max-width: 580px; }
.settings label { display: grid; grid-template-columns: 1fr 200px 50px; align-items: center; gap: 14px; font-size: 17px; }
.settings label.check { grid-template-columns: 22px 1fr; }
.settings label.check input { width: 18px; height: 18px; accent-color: var(--blood); }
.settings select { grid-column: 2 / 4; background: var(--ink-2); color: var(--bone); border: 2px solid var(--sepia); padding: 8px 10px; font: inherit; font-size: 15px; }
.settings output { color: var(--bone-dim); text-align: right; }
.settings .hint { margin: -8px 0 0; color: var(--bone-dim); font-size: 13px; }
/* editor de teclas */
.keymap { max-width: 580px; margin-top: 34px; padding-top: 24px; border-top: 2px dashed rgba(168,156,132,.35); display: grid; gap: 14px; }
.keymap h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 40px; line-height: .9; color: var(--bone); text-shadow: 3px 3px 0 #6b1a12; }
.keymap .hint { margin: 0; color: var(--bone-dim); font-size: 13px; }
.keymap-frets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.kbind { position: relative; display: grid; justify-items: center; gap: 6px; padding: 10px 4px 8px; background: var(--ink); border: 2px solid var(--bone-dim); color: var(--bone); cursor: pointer; font: inherit; }
.kbind b { font: 600 22px var(--ui); min-height: 1.2em; }
.kbind small { font-size: 12px; color: var(--bone-dim); letter-spacing: .04em; }
.keymap-frets .kbind b { width: 100%; max-width: 64px; aspect-ratio: 1; display: grid; place-items: center; color: #111; border: 2px solid #111; box-shadow: 3px 3px 0 rgba(0,0,0,.5); font-size: 20px; }
.kbind.k0 b { background: var(--l0); } .kbind.k1 b { background: var(--l1); } .kbind.k2 b { background: var(--l2); } .kbind.k3 b { background: var(--l3); } .kbind.k4 b { background: var(--l4); }
.kbind:hover, .kbind:focus-visible { border-color: var(--ember); outline: none; }
.kbind.listening { border-color: var(--ember); background: rgba(214,64,44,.18); }
.kbind.listening b { animation: keyblink .7s steps(1) infinite; }
@keyframes keyblink { 50% { opacity: .3; } }
.kbind.flash { animation: keyok .5s ease-out; }
@keyframes keyok { from { border-color: var(--moss); box-shadow: 0 0 0 3px rgba(95,174,140,.45); } }
.keymap-other { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: stretch; }
.kbind.wide { grid-template-columns: 1fr auto; align-items: center; justify-items: start; padding: 10px 14px; }
.kbind.wide b { font-size: 17px; padding: 2px 10px; border: 2px solid var(--bone-dim); background: var(--ink-2); }
.reset-keys { background: none; border: 2px solid var(--sepia); color: var(--bone-dim); padding: 0 14px; font: inherit; font-size: 14px; cursor: pointer; }
.reset-keys:hover { color: var(--bone); border-color: var(--bone-dim); }
#keymap-msg.warn { color: var(--ember); }
@media (max-width: 760px) { .keymap-other { grid-template-columns: 1fr; } .reset-keys { padding: 10px; } }

.drop { position: absolute; inset: 16px; border: 4px dashed var(--ember); background: rgba(12,10,9,.9); display: grid; place-items: center; z-index: 20; font-family: var(--display); font-size: 56px; text-align: center; }

/* =====================================================================
   CD DE CARGA
   ===================================================================== */
.cd-loader { position: fixed; inset: 0; z-index: 35; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; background: radial-gradient(circle, rgba(12,10,9,.88), rgba(12,10,9,.98)); }
.cd-loader .cd { width: min(300px, 55vw); height: auto; aspect-ratio: 1; animation: cdin .5s cubic-bezier(.2,.9,.3,1.3) both, spin .9s linear infinite; }
.cd-loader.out .cd { animation: cdout .45s ease-in forwards; }
.cd-loader.out h2, .cd-loader.out p, .cd-loader.out .bar { opacity: 0; transition: opacity .3s; }
@keyframes cdin { from { transform: scale(.3) rotate(-200deg); opacity: 0; } }
@keyframes cdout { to { transform: scale(2.4) rotate(540deg); opacity: 0; filter: blur(6px); } }
.cd-loader h2 { margin: 10px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(48px, 7vw, 96px); line-height: .9; text-shadow: 4px 4px 0 #6b1a12; }
.cd-loader p { margin: 0; color: var(--bone-dim); }
.cd-loader .bar { width: 260px; height: 8px; background: var(--ink-2); box-shadow: 0 0 0 2px var(--bone-dim); }
.cd-loader .bar div { height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--blood) 0 8px, var(--ember) 8px 16px); transition: width .2s steps(8); }

/* =====================================================================
   HUD
   ===================================================================== */
.hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; font-family: var(--ui); }
.hud-score { position: absolute; width: 180px; transform: translate(-100%, -100%); display: grid; justify-items: end; gap: 7px; }
.score-num { font-size: 32px; font-weight: 700; line-height: 1; padding: 7px 12px; background: var(--panel); min-width: 150px; text-align: right; }
.mult-wrap { position: relative; width: 76px; height: 76px; }
.mult-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.mult-ring circle { fill: rgba(12,10,9,.8); stroke-width: 10; }
.mult-ring .track { stroke: rgba(230,220,195,.14); }
.mult-ring .fill { fill: none; stroke: var(--ember); stroke-dasharray: 264; stroke-dashoffset: 264; transition: stroke-dashoffset .12s steps(4), stroke .3s; }
.mult { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 40px; color: var(--bone); text-shadow: 3px 3px 0 #6b1a12; }
.hud.sp .mult-ring .fill { stroke: var(--sp); }
.hud.sp .mult { color: var(--sp); text-shadow: 3px 3px 0 #0b3b47; }
.mult.bump { animation: bump .3s steps(3); }
@keyframes bump { 40% { transform: scale(1.4); } }
.streak { font-size: 14px; color: var(--bone); background: var(--panel); padding: 3px 9px; box-shadow: 0 0 0 2px var(--sepia); }
.sp-meter { position: relative; width: 150px; height: 14px; background: var(--ink); box-shadow: 0 0 0 2px var(--bone-dim); overflow: hidden; }
.sp-fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: repeating-linear-gradient(90deg, #2fb8ff 0 6px, var(--sp) 6px 12px); transition: width .15s steps(6); }
.sp-meter.ready .sp-fill { animation: glow .5s steps(2) infinite; }
@keyframes glow { 50% { filter: brightness(1.7); } }
.sp-ticks { position: absolute; inset: 0; display: flex; justify-content: space-evenly; }
.sp-ticks i { width: 2px; background: var(--ink); }

.hud-rock { position: absolute; width: 150px; transform: translate(0, -100%); text-align: center; }
.rock-dial { width: 150px; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.7)); }
.rock-dial .z { fill: none; stroke-width: 14; }
.rock-dial .red { stroke: var(--blood); } .rock-dial .yellow { stroke: #e0a83a; } .rock-dial .green { stroke: var(--moss); }
#rock-needle line { stroke: var(--bone); stroke-width: 5; }
#rock-needle rect { fill: var(--bone); }
#rock-needle { transform-origin: 60px 70px; transition: transform .15s steps(3); }
.rock-label { font-size: 13px; color: var(--bone-dim); margin-top: -4px; text-shadow: 2px 2px 0 #000; }
.hud-rock.danger .rock-dial { animation: danger .4s steps(2) infinite; }
@keyframes danger { 50% { filter: drop-shadow(0 0 10px #ff2040); } }

.hud-top { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: min(420px, 60vw); }
.song-progress { height: 6px; background: var(--ink); box-shadow: 0 0 0 2px var(--sepia); }
.song-progress div { height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--blood) 0 6px, var(--ember) 6px 12px); }

.hud-intro { position: absolute; left: 4vw; top: 12vh; opacity: 0; transition: opacity .8s, transform .8s; transform: translateY(10px); }
.hud-intro.show { opacity: 1; transform: none; }
.hud-intro h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(56px, 8vw, 120px); line-height: .85; text-shadow: 5px 5px 0 #6b1a12, 0 0 30px rgba(0,0,0,.8); }
.hud-intro p { margin: 8px 0 0; font-size: 18px; color: var(--bone); text-shadow: 2px 2px 0 #000; }

.notify { position: absolute; left: 50%; top: 24%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.notify div { font-family: var(--display); font-size: clamp(48px, 6vw, 84px); color: var(--bone); text-shadow: 4px 4px 0 #6b1a12, 0 0 24px rgba(255,122,61,.7); animation: pop 1.6s steps(12) forwards; white-space: nowrap; }
.notify div.sp { color: #dbfcff; text-shadow: 4px 4px 0 #0b3b47, 0 0 24px var(--sp); }
@keyframes pop { 0% { opacity: 0; transform: scale(.6); } 12% { opacity: 1; transform: scale(1.1); } 22% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px); } }
.section-name { position: absolute; right: 3vw; top: 40px; font-size: 16px; color: var(--bone); opacity: 0; transition: opacity .5s; text-shadow: 2px 2px 0 #000; }
.section-name.show { opacity: .95; }
.countdown { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-family: var(--display); font-size: 160px; color: var(--bone); text-shadow: 6px 6px 0 #6b1a12; }
.pause-btn { pointer-events: auto; position: absolute; top: 12px; right: 14px; width: 42px; height: 42px; border: 2px solid var(--bone-dim); background: var(--panel); display: grid; place-items: center; }
.pause-btn svg { width: 20px; height: 20px; fill: var(--bone); }
.touch-frets { display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 26vh; pointer-events: auto; }
.touch-frets button { flex: 1; border: 0; background: transparent; touch-action: none; }
.fps { position: absolute; left: 10px; top: 10px; font-size: 13px; color: var(--bone-dim); }
@media (pointer: coarse) { .touch-frets { display: flex; } }

/* =====================================================================
   OVERLAYS
   ===================================================================== */
.overlay { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(12,10,9,.6); }
.panel { background: var(--panel-2); padding: 30px 34px; min-width: 330px; max-width: min(580px, 92vw); display: grid; gap: 10px; }
.panel h2 { margin: 0 0 8px; font-family: var(--display); font-weight: 400; font-size: 72px; line-height: .9; text-shadow: 4px 4px 0 #6b1a12; }
.panel button:not(.play-btn) { display: flex; align-items: center; justify-content: center; background: var(--ink-2); border: 2px solid var(--sepia); padding: 12px 20px; font-size: 17px; }
.panel button:not(.play-btn):hover { border-color: var(--ember); }
.pause-vol { display: flex; align-items: center; gap: 12px; margin-top: 8px; color: var(--bone-dim); font-size: 15px; }
.pause-vol input { flex: 1; }
.results { text-align: center; justify-items: center; min-width: min(540px, 92vw); }
.res-status { margin: 0; color: var(--ember); font-size: 17px; }
.res-diff { margin: -6px 0 0; color: var(--bone-dim); }
.stars { display: flex; gap: 8px; font-size: 44px; }
.stars span { color: rgba(230,220,195,.15); transform: scale(.4); opacity: 0; animation: star .45s steps(4) forwards; }
.stars span.on { color: var(--ember); text-shadow: 3px 3px 0 #6b1a12; }
.stars.gold span.on { color: #ffd36a; }
@keyframes star { to { transform: none; opacity: 1; } }
.res-score { font-size: 64px; font-weight: 700; line-height: 1; }
.res-record { margin: 0; color: var(--ember); min-height: 1.2em; }
.res-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; width: 100%; margin: 6px 0 10px; }
.res-grid dt { color: var(--bone-dim); font-size: 12px; }
.res-grid dd { margin: 4px 0 0; font-size: 24px; font-weight: 700; }
.res-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* =====================================================================
   RESPONSIVO
   ===================================================================== */
@media (max-width: 1180px) {
  .menu { grid-template-columns: 210px minmax(0, 1fr); }
  .now { display: none; }
  .tl-head, .row { grid-template-columns: 34px minmax(0, 1fr) 130px 90px 50px; }
  .player { grid-template-columns: minmax(0, 260px) 44px minmax(0, 1fr) 160px 38px; }
}
@media (max-width: 760px) {
  .menu { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) 72px; padding: 10px; gap: 12px; }
  .side { grid-row: 1; flex-direction: row; align-items: center; padding: 8px 12px; gap: 10px; }
  .side nav { display: flex; margin-left: auto; }
  .nav-item { font-size: 14px; padding: 6px; }
  .nav-item .cursor { display: none; }
  .brand small, .side-foot { display: none; }
  .brand strong { font-size: 26px; }
  .main { grid-row: 2; }
  .album-head { flex-direction: column; align-items: flex-start; padding: 40px 16px 18px; gap: 16px; }
  .cover { width: 140px; height: 140px; }
  .album-actions { padding: 14px 16px; gap: 14px; }
  .tracklist { padding: 0 6px 30px; }
  .tl-head, .row { grid-template-columns: 26px minmax(0, 1fr) 70px 44px; gap: 10px; padding: 0 8px; }
  .c-rec, .row .rec, .row .play-row { display: none; }
  .player { grid-row: 3; grid-template-columns: minmax(0, 1fr) 44px 30%; }
  .pl-vol, .player .fs-btn { display: none; }
  .view-howto, .view-settings { padding: 24px 16px 40px; }
  .settings label { grid-template-columns: 1fr; }
  .settings select { grid-column: auto; }
  .hud-score { transform: translate(-100%, -100%) scale(.75); transform-origin: right bottom; }
  .hud-rock { transform: translate(0, -100%) scale(.7); transform-origin: left bottom; }
  .res-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


#credit { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }

/* ---------- canción secreta (VENEZUELA RIAL NASTI): bloqueada hasta completar 3 canciones, solo experto */
.row.locked { opacity: .62; cursor: not-allowed; }
.row.locked .t b::before { content: '🔒 '; }
.row.bonus .t b { color: #ff4a3a; letter-spacing: .02em; }
.lockmsg { font-size: .78em; color: #ff8a6a; white-space: normal; line-height: 1.25; min-width: 0; }   /* en 2 líneas dentro de su columna: no tapa el récord */
.t .only { font-style: normal; font-size: .82em; padding: 0 5px; margin-right: 6px; vertical-align: 1px; border: 1px solid #ff4a3a; color: #ff4a3a; border-radius: 3px; letter-spacing: .08em; }
.row.shake { animation: lockShake .35s; }
@keyframes lockShake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.res-unlock { margin: .4em auto 0; padding: .45em 1em; display: table; color: #fff; background: #c4162a; border-radius: 4px; animation: unlockPop .6s .9s both; }
.res-unlock.hidden { display: none; }
@keyframes unlockPop { from { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); } to { transform: none; opacity: 1; } }

/* ---------- efectos del videoclip de "VENEZUELA RIAL NASTI" (lado izquierdo, sin fondo) */
.vfx { position: fixed; left: 2.5vw; top: 16vh; width: 31vw; height: 60vh; z-index: 4; pointer-events: none; display: none; }
.vfx.on { display: block; }
.vfx-cue { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; text-align: center; animation: vfxIn .16s ease-out both; }
.vfx-cue.out { animation: vfxOut .2s ease-in both; }
@keyframes vfxIn { from { opacity: 0; transform: translateY(-50%) scale(1.35); filter: blur(6px); } to { opacity: 1; transform: translateY(-50%) scale(1); filter: none; } }
@keyframes vfxOut { to { opacity: 0; transform: translateY(-50%) scale(.92); } }
/* texto gigante: condensado, blanco, sombra negra dura (como el video) y una palabra cursiva cruzando */
.vfx-big { font-family: 'Anton', Impact, sans-serif; color: #fff; line-height: .86; font-size: clamp(38px, min(6.6vw, 11vh), 140px); text-transform: uppercase; }
.vfx-big .ln { display: block; text-shadow: .045em .045em 0 #000, -.01em -.01em 0 #000, 0 0 .3em rgba(0,0,0,.45); opacity: 0; transform: scale(1.2); transition: opacity .08s, transform .14s ease-out; }
.vfx-big .ln.show { opacity: 1; transform: none; }
.vfx-big .scr { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-9deg); font-family: 'Great Vibes', cursive; font-style: normal; font-size: .62em; text-transform: none; white-space: nowrap; text-shadow: 0 0 .12em rgba(0,0,0,.5); animation: scrIn .3s .05s ease-out both; }
@keyframes scrIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* palabra por palabra */
.vfx-words { font-family: 'Anton', Impact, sans-serif; color: #fff; font-size: clamp(50px, min(9vw, 17vh), 190px); line-height: 1; }
.vfx-words span { display: none; text-shadow: .04em .04em 0 #000, 0 0 .3em rgba(0,0,0,.4); }
.vfx-words span.cur { display: block; animation: wordPop .12s ease-out both; }
@keyframes wordPop { from { transform: scale(1.3); } to { transform: none; } }
/* minúsculas con degradado celeste (ustedes, quitar mi alma, no son de guadalupe) */
.vfx-lower { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: clamp(30px, 4.2vw, 84px); line-height: .95; }
.vfx-lower span { opacity: 0; background: linear-gradient(180deg, #ffffff 30%, #6fc6ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 6px rgba(80,180,255,.7)) drop-shadow(2px 2px 0 rgba(0,0,0,.6)); }
.vfx-lower span.show { opacity: 1; animation: wordPop .14s ease-out both; }
.vfx-script { font-family: 'Great Vibes', cursive; font-size: clamp(40px, 5.6vw, 110px); line-height: .9; }
.vfx-script em { font-style: normal; opacity: 0; text-shadow: 0 0 .15em rgba(0,0,0,.55); }
.vfx-script em.show { opacity: 1; animation: scrIn .25s ease-out both; }
/* subtítulos de la parte de Suei */
.vfx-sub { top: auto; bottom: 0; transform: none; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: clamp(15px, 1.55vw, 30px); color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000, 2px 2px 0 #000; animation: subIn .18s ease-out both; }
.vfx-sub.out { animation: subOut .18s ease-in both; }
@keyframes subIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes subOut { to { opacity: 0; transform: translateY(-10px); } }
/* fotos recortadas: borde blanco y un poco giradas, como pegadas encima */
.vfx-img { gap: 10px; }
.vfx-img img { max-width: 100%; max-height: 19vh; border: 4px solid #f4f2ee; box-shadow: 6px 8px 0 rgba(0,0,0,.55); transform: rotate(var(--r)) scale(.6); opacity: 0; transition: transform .16s cubic-bezier(.2,1.6,.4,1), opacity .08s; }
.vfx-img img.show { transform: rotate(var(--r)); opacity: 1; }
.vfx-img img:only-of-type { max-height: 38vh; }
.vfx-img .emo { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; font-style: normal; font-size: clamp(34px, 4vw, 80px); pointer-events: none; }
.vfx-img .emo b { animation: emoPop .25s calc(var(--k) * .12s) cubic-bezier(.2,1.6,.4,1) both; filter: drop-shadow(0 0 4px #fff); }
@keyframes emoPop { from { transform: scale(0) rotate(-20deg); } to { transform: none; } }
.vfx-cut img { max-width: 100%; max-height: 40vh; filter: drop-shadow(5px 5px 0 #000); }
/* noticiero */
.vfx-news .fotos { display: flex; gap: 10px; justify-content: center; }
.vfx-news .fotos img { width: 44%; border: 3px solid #fff; box-shadow: 4px 6px 0 rgba(0,0,0,.5); }
.vfx-news .bar { width: 100%; margin-top: 8px; text-align: left; font-family: 'Montserrat', sans-serif; }
.vfx-news .bar b { display: inline-block; background: #c4162a; color: #fff; font-weight: 800; font-style: italic; font-size: clamp(11px, .95vw, 18px); padding: 3px 9px; }
.vfx-news .bar span { display: block; overflow: hidden; background: linear-gradient(90deg, #1d3c9c, #3a6ad6); color: #fff; font-weight: 800; font-size: clamp(14px, 1.5vw, 28px); padding: 6px 10px; white-space: nowrap; }
.vfx-news .bar i { display: inline-block; font-style: normal; animation: ticker 1.6s linear both; }
@keyframes ticker { from { transform: translateX(30%); } to { transform: translateX(-12%); } }
@media (max-width: 700px) { .vfx { width: 44vw; left: 1.5vw; } }

/* ---------- Perfil del jugador: insignia arriba, ranking en la barra lateral, ventana para editar */
.pf-chip { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--panel-2); border: 2px solid var(--sepia); cursor: pointer; min-width: 0; }
.pf-chip:hover { border-color: var(--ember); }
.pf-chip .av { width: 46px; height: 46px; flex: none; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 40%, #5a2318, #1a0f0c); box-shadow: 0 0 0 2px var(--bone-dim); }
.pf-chip .av img, .pf-rank .av img { width: 100%; height: 100%; object-fit: cover; }
.pf-chip .who { min-width: 0; flex: 1; }
.pf-chip .who b { display: block; font-size: 18px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-chip .who small { display: flex; align-items: center; gap: 6px; color: var(--bone-dim); font-size: 12px; white-space: nowrap; }
.pf-chip .fi, .pf-rank .fi { width: 18px; height: 13px; flex: none; background-size: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.pf-edit { flex: none; font: inherit; font-size: 13px; color: var(--ink); background: var(--bone); border: 0; padding: 5px 8px; cursor: pointer; }
.pf-chip:hover .pf-edit { background: var(--ember); }
.pf-chip-side .pf-edit span { display: none; }
.pf-chip-title { position: fixed; top: 18px; right: 18px; z-index: 3; max-width: 320px; background: var(--panel); }
/* ranking en la barra lateral */
.side-rank { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1; border-top: 2px solid var(--sepia); padding-top: 14px; margin-bottom: 58px; }   /* abajo queda el crédito de chucho */
.sr-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sr-head h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 26px; color: var(--ember); }
.pf-tabs { display: flex; gap: 3px; }
.pf-tabs button { font: inherit; font-size: 12px; padding: 4px 7px; color: var(--bone-dim); background: transparent; border: 2px solid var(--sepia); cursor: pointer; }
.pf-tabs button.on { color: var(--ink); background: var(--bone); border-color: var(--bone); }
.pf-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; overflow: auto; min-height: 0; }
.pf-rank li { display: grid; grid-template-columns: 18px 30px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 5px 6px; background: var(--panel-2); }
.pf-rank li.me { box-shadow: inset 0 0 0 2px var(--ember); }
.pf-rank .pos { font-size: 16px; color: var(--ember); text-align: center; }
.pf-rank .av { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: var(--sepia); }
.pf-rank .nm { min-width: 0; }
.pf-rank .nm b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-rank .nm small { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--bone-dim); }
.pf-rank .pts { font-size: 14px; color: var(--bone); }
.sr-hint { margin: 0; font-size: 11px; line-height: 1.4; color: var(--bone-dim); }
.drop-hint { margin: 18px 8px 30px; padding: 10px 12px; font-size: 13px; color: var(--bone-dim); border: 2px dashed rgba(168,156,132,.35); }
/* ventana para editar */
.pf-modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(5,3,3,.72); backdrop-filter: blur(2px); }
.pf-modal.hidden { display: none; }
.pf-panel { width: min(920px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--panel); padding: 20px 24px 22px; animation: rise .3s cubic-bezier(.2,.8,.2,1) both; }
.pf-panel header { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.pf-panel h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 48px; line-height: .9; text-shadow: 3px 3px 0 #6b1a12; }
.pf-panel h3 { font-family: var(--display); font-weight: 400; font-size: 28px; margin: 18px 0 8px; color: var(--ember); }
.pf-stats { margin: 0; color: var(--bone-dim); font-size: 14px; }
.pf-close { margin-left: auto; font: inherit; font-size: 22px; color: var(--bone); background: none; border: 2px solid var(--sepia); width: 40px; height: 40px; cursor: pointer; }
.pf-close:hover { border-color: var(--ember); color: var(--ember); }
.pf-namebox { display: grid; gap: 6px; font-size: 14px; color: var(--bone-dim); }
.pf-namebox input { font: inherit; font-size: 22px; color: var(--bone); background: #15100d; border: 2px solid var(--sepia); padding: 7px 12px; width: min(320px, 100%); }
.pf-namebox input:focus { border-color: var(--ember); outline: none; }
.pf-carousel { position: relative; height: min(48vh, 440px); background: radial-gradient(ellipse at 50% 85%, #3a1a12 0%, #110d0b 70%); overflow: hidden; box-shadow: inset 0 0 0 2px var(--sepia); }
.pf-carousel canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.pf-arrow { position: absolute; top: 40%; width: 48px; height: 66px; font-size: 50px; line-height: 1; color: var(--bone); background: rgba(0,0,0,.35); border: 0; cursor: pointer; left: 10px; }
.pf-arrow.r { left: auto; right: 10px; }
.pf-arrow:hover { color: var(--ember); }
.pf-under { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; flex-direction: column; align-items: center; gap: 7px; pointer-events: none; }
.pf-cname { font-family: var(--display); font-size: 40px; line-height: 1; text-shadow: 3px 3px 0 #6b1a12; }
.pf-dots { display: flex; gap: 6px; } .pf-dots i { width: 8px; height: 8px; background: var(--sepia); } .pf-dots i.on { background: var(--ember); }
.pf-pick { pointer-events: auto; font: inherit; font-size: 15px; padding: 7px 16px; color: var(--ink); background: var(--bone); border: 0; cursor: pointer; }
.pf-pick.mine { background: var(--blood); color: #fff; }
.pf-flags { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 6px; }
.pf-flags.otros { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--sepia); }
.pf-flags button { display: flex; align-items: center; gap: 8px; font: inherit; font-size: 13px; color: var(--bone-dim); background: var(--panel-2); border: 2px solid transparent; padding: 5px 7px; cursor: pointer; text-align: left; }
.pf-flags button .fi { width: 26px; height: 19px; flex: none; background-size: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.pf-flags button:hover { color: var(--bone); border-color: var(--sepia); }
.pf-flags button.on { color: var(--bone); border-color: var(--ember); background: #2a1612; }
.pf-panel footer { display: flex; justify-content: flex-end; margin-top: 16px; }
.pf-done { font: inherit; font-size: 18px; padding: 9px 26px; color: #fff; background: var(--blood); border: 0; cursor: pointer; }
.pf-done:hover { background: var(--ember); }
@media (max-width: 760px) {
  .side-rank { display: none; }
  .pf-chip-side { order: 2; padding: 4px; border-width: 1px; } .pf-chip-side .who { display: none; } .pf-chip-side .av { width: 34px; height: 34px; }
  .pf-chip-title { top: 10px; right: 10px; max-width: 220px; } .pf-chip-title .who b { font-size: 15px; }
  .pf-panel { padding: 14px; } .pf-panel h2 { font-size: 36px; }
}

/* ---------- "El Último Día Del Año" (necesitoperco): en verde */
.row.mode-perco .t b { color: #3aff6a; }
.t .only.tag-perco { border-color: #3aff6a; color: #3aff6a; }
.pf-pick.locked { background: #2a2420; color: var(--bone-dim); cursor: not-allowed; }
.row.mode-perco:hover { background: rgba(58,255,106,.12); }
.row.mode-perco.selected { background: rgba(58,255,106,.13); border-left-color: #3aff6a; }
.row.mode-perco.playing .t b, .row.mode-perco:hover .t b { color: #6dff92; }
.row.mode-perco.playing .num svg { fill: #3aff6a; }
.row.mode-perco .play-row { background: #3aff6a; color: #04140a; }
.row.mode-perco .play-row:hover { background: #6dff92; }
.row.mode-perco:hover .num svg { fill: #3aff6a; }
/* aviso de rendimiento (sin aceleración por hardware / FPS muy bajos) */
.perf-panel p, .perf-panel li { font-size: 16px; line-height: 1.4; color: var(--bone); }
.perf-panel ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.perf-panel .perf-tip { color: var(--bone-dim); font-size: 14px; }
.perf-panel h2 { font-size: 60px; }
/* cuenta (ranking online) */
.acct-panel { position: relative; width: min(420px, 92vw); }
.acct-panel h2 { font-size: 60px; }
.acct-why { margin: 0 0 6px; color: var(--bone-dim); font-size: 15px; line-height: 1.4; }
.acct-x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; padding: 0 !important; font-size: 22px !important; }
.panel button.acct-google:not(.play-btn) { gap: 10px; background: #f4f1ea; color: #1b1715; border-color: #f4f1ea; font-weight: 600; }
.panel button.acct-google:not(.play-btn):hover { background: #fff; border-color: #fff; }
.acct-google svg { width: 20px; height: 20px; }
.acct-or { display: flex; align-items: center; gap: 10px; color: var(--bone-dim); font-size: 13px; margin: 4px 0; }
.acct-or::before, .acct-or::after { content: ""; flex: 1; height: 1px; background: rgba(230,220,195,.2); }
.acct-panel input { background: var(--ink-2); border: 2px solid var(--sepia); color: var(--bone); padding: 11px 12px; font: inherit; font-size: 16px; }
.acct-panel input:focus { outline: none; border-color: var(--ember); }
.acct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acct-msg { margin: 0; min-height: 20px; font-size: 14px; }
.acct-msg.bad { color: #ff8a6a; }
.acct-msg.ok { color: var(--bone-dim); }
.sr-link { background: none !important; border: 0 !important; padding: 0 !important; color: var(--ember) !important; text-decoration: underline; font: inherit !important; cursor: pointer; display: inline !important; }
.panel .sr-link { justify-self: start; font-size: 14px !important; }
.pf-rank li.empty { display: block; color: var(--bone-dim); font-size: 13px; padding: 8px 10px; }   /* una sola línea a todo el ancho, no en la columna del puesto */

/* =====================================================================
   PANTALLAS BAJAS O ANGOSTAS (laptops, ventanas chicas): nada se corta ni se encima
   ===================================================================== */
/* la barra lateral nunca pasa por debajo de la firma de chucho (fija abajo a la izquierda): si no cabe, se desplaza */
.side { min-height: 0; overflow: hidden auto; padding-bottom: 84px; scrollbar-width: thin; scrollbar-color: var(--sepia) transparent; }
.side > * { flex-shrink: 0; }
.side-rank { margin-bottom: 0; flex: 1 1 auto; min-height: 190px; }
.sr-hint { flex: none; }
.now { overflow-x: hidden; }
/* el título del álbum se mide con el ancho de su columna (no de la ventana): nunca se parte */
.main { container-type: inline-size; }
.album-meta { flex: 1; }
.album-title { font-size: clamp(40px, calc((100cqi - 330px) / 5.2), 132px); overflow-wrap: normal; white-space: nowrap; }
@media (max-width: 760px) { .album-title { font-size: clamp(40px, 15cqi, 96px); } }

@media (max-height: 820px) and (min-width: 761px) {
  .side { gap: 14px; padding-top: 14px; }
  .nav-item { padding: 7px 6px; font-size: 17px; }
  .album-head { padding-top: 44px; }
  .cover { width: 180px; height: 180px; }
  .now { padding: 16px 18px; gap: 9px; }
  .now-cd { width: min(140px, 60%); margin: 0; }
  .now h2 { font-size: 42px; }
  .now-stats dd { font-size: 18px; }
}
@media (max-height: 700px) and (min-width: 761px) {
  .menu { gap: 10px; padding: 10px; grid-template-rows: minmax(0, 1fr) 66px; }
  .side { gap: 10px; padding: 10px 12px 76px; }
  .brand strong { font-size: 28px; } .brand-sun { width: 36px; height: 36px; }
  .pf-chip { padding: 6px 8px; } .pf-chip .av { width: 38px; height: 38px; } .pf-chip .who b { font-size: 16px; }
  .nav-item { padding: 5px 6px; font-size: 16px; }
  .side-rank { padding-top: 10px; min-height: 160px; }
  .sr-head h3 { font-size: 22px; }
  .album-head { padding: 24px 22px 16px; gap: 20px; }
  .cover { width: 136px; height: 136px; }
  .album-actions { padding: 12px 22px; gap: 14px; }
  .big-play { width: 48px; height: 48px; }
  .row { height: 48px; }
  .now { padding: 12px 16px; gap: 7px; }
  .now-cd { width: min(104px, 50%); }
  .now h2 { font-size: 34px; }
  .now-stats { gap: 8px; margin: 0; }
  .play-btn { padding: 10px 16px; font-size: 16px; }
  .player { gap: 12px; padding: 0 12px; }
  .pl-cover { width: 44px; height: 44px; }
  .pl-wave canvas { height: 44px; }
  .pl-toggle { width: 40px; height: 40px; }
  body.in-menu .credit { left: 20px; bottom: 88px; }
  body.in-menu .credit canvas { width: 42px; height: 42px; }
  body.in-menu .credit b { font-size: 24px; }
  .view-howto, .view-settings { padding: 24px 24px 40px; }
  .view h2 { font-size: 56px; margin-bottom: 16px; }
}
/* pantalla de inicio baja: el sol, el logo y el menú se achican para que la ayuda de abajo no quede tapada */
@media (max-height: 720px) {
  .sun { width: clamp(56px, 11vh, 84px); }
  .wordmark { font-size: clamp(56px, min(13vw, 19vh), 170px); }
  .by { margin: 6px 0 14px; font-size: clamp(18px, 3.2vh, 26px); }
  .start-menu { padding: 10px 18px; }
  .start-menu button { padding: 8px 10px; font-size: 22px; }
  .gfx-toggle { margin-top: 8px; }
  .spotify-link { margin-top: 8px; padding: 5px 12px 5px 8px; font-size: 14px; }
  .hint { margin-top: 10px; }
  .pf-chip-title { top: 10px; right: 10px; }
  .credit canvas { width: 48px; height: 48px; }
}
/* ventanas de perfil y cuenta: con poco alto, el carrusel se achica y todo se puede desplazar */
@media (max-height: 700px) {
  .pf-panel { padding: 14px 18px 16px; }
  .pf-panel h2 { font-size: 38px; }
  .pf-carousel { height: max(220px, 44vh); }
  .pf-cname { font-size: 30px; }
  .panel { max-height: calc(100vh - 24px); overflow: auto; padding: 22px 24px; }
  .panel h2 { font-size: 52px; }
  .acct-panel h2, .perf-panel h2 { font-size: 44px; }
}
/* en los paneles que se desplazan, las esquinas del marco van por dentro: si quedan afuera crean una barra fantasma */
.side.frame::before, .now.frame::before, .pf-panel.frame::before, .panel.frame::before { top: 0; left: 0; }
.side.frame::after, .now.frame::after, .pf-panel.frame::after, .panel.frame::after { bottom: 0; right: 0; }
/* celular: la barra de arriba en dos filas (logo + perfil, y debajo el menú), sin el espacio de la firma */
@media (max-width: 760px) {
  .side { padding: 8px 10px; flex-wrap: wrap; row-gap: 6px; overflow: visible; }
  .side .pf-chip-side { margin-left: auto; min-width: 0; max-width: 55%; padding: 4px 6px; }
  .side .pf-chip-side .av { width: 32px; height: 32px; }
  .side nav { order: 3; width: 100%; margin-left: 0; justify-content: space-between; }
  .tl-head .c-rec { display: none; }
  .player { gap: 10px; padding: 0 10px; }
  .pl-song small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* insignia del perfil sin sesión: botón "Iniciar sesión" (con sesión vuelve a ser personaje, nombre y bandera) */
.pf-chip.pf-wait { visibility: hidden; }
.pf-chip.pf-out { padding: 0; border-color: var(--ember); }
.pf-login { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 16px; color: var(--bone); font-size: 16px; font-weight: 600; cursor: pointer; }
.pf-login svg { width: 22px; height: 22px; fill: var(--ember); flex: none; }
.pf-chip.pf-out:hover { background: rgba(214,64,44,.25); }
/* VRN: nombre del cantante que entra por primera vez, sobre su cabeza */
.vrn-tag { position: fixed; left: 0; top: 0; z-index: 5; pointer-events: none; display: none; flex-direction: column; align-items: center; will-change: transform; }
.vrn-tag.on { display: flex; }
.vrn-tag b { font-family: 'Anton', Impact, sans-serif; font-weight: 400; font-size: clamp(34px, min(4.6vw, 8vh), 76px); line-height: 1; color: #fff; text-transform: uppercase; letter-spacing: .02em; padding: .08em .3em; background: #d6402c; box-shadow: .08em .08em 0 #000; white-space: nowrap; animation: vrnTagIn .35s cubic-bezier(.2,1.6,.4,1) both; }
.vrn-tag i { font-style: normal; color: #d6402c; font-size: 22px; line-height: 1; margin-top: 2px; text-shadow: 2px 2px 0 #000; animation: vrnTagBob .5s ease-in-out infinite alternate; }
.vrn-tag.out b, .vrn-tag.out i { opacity: 0; transition: opacity .45s; }
@keyframes vrnTagIn { from { transform: scale(.4) rotate(-6deg); opacity: 0; } }
@keyframes vrnTagBob { to { transform: translateY(5px); } }