:root { --fs: 1; }
body { font-family: 'Inter', system-ui, sans-serif; }
.jp { font-family: 'Noto Sans JP', sans-serif; }
.bg-sakura { background: radial-gradient(circle at 20% 20%, #831843 0%, transparent 40%), radial-gradient(circle at 80% 80%, #1e3a8a 0%, transparent 45%), #020617; }

/* Subtítulos sobre el video */
.sub-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: 2.5rem 1rem 1.2rem; text-align: center;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 60%, transparent 100%);
  transition: opacity .25s;
}
.sub-overlay p { margin: 0; text-shadow: 0 2px 6px #000, 0 0 2px #000; line-height: 1.25; }
.sub-jp { font-size: calc(1.6rem * var(--fs)); font-weight: 700; color: #fff; }
.sub-ro { font-size: calc(.85rem * var(--fs)); color: #94a3b8; font-style: italic; }
.sub-pr { font-size: calc(1.15rem * var(--fs)); color: #fbcfe8; font-weight: 600; margin-top: .2rem !important; }
.sub-es { font-size: calc(1.1rem * var(--fs)); color: #fde68a; margin-top: .25rem !important; }
.sub-empty { opacity: 0; }
@media (max-width: 640px) {
  .sub-overlay { padding: 1.2rem .5rem .6rem; }
  .sub-jp { font-size: calc(1.05rem * var(--fs)); }
  .sub-pr, .sub-es { font-size: calc(.8rem * var(--fs)); }
}
#player-wrap:fullscreen .sub-jp { font-size: calc(3rem * var(--fs)); }
#player-wrap:fullscreen .sub-pr { font-size: calc(2rem * var(--fs)); }
#player-wrap:fullscreen .sub-es { font-size: calc(1.9rem * var(--fs)); }
#player-wrap:fullscreen .aspect-video { height: 100vh; aspect-ratio: auto; }

/* Controles */
.ctrl-btn { background: #1e293b; border-radius: .5rem; padding: .45rem .8rem; transition: background .15s; }
.ctrl-btn:hover { background: #334155; }
.ctrl-btn.on { background: #db2777; }
.toggle { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; color: #cbd5e1; user-select: none; }
.toggle input { accent-color: #ec4899; }

/* Pestañas */
.tab-btn { flex: 1; padding: .75rem .25rem; color: #94a3b8; border-bottom: 2px solid transparent; }
.tab-btn:hover { color: #fff; }
.tab-btn.active { color: #f472b6; border-color: #f472b6; }

/* Versos */
.line-card { border: 1px solid #1e293b; border-radius: .75rem; padding: .6rem .75rem; cursor: pointer; transition: all .15s; background: #0f172a; }
.line-card:hover { border-color: #475569; }
.line-card.active { border-color: #ec4899; background: #2a0f1f; box-shadow: 0 0 0 1px #ec4899 inset; }
.line-card.learned { border-left: 4px solid #10b981; }
.line-card .l-jp { font-size: 1.05rem; font-weight: 700; }
.line-card .l-pr { color: #f9a8d4; font-size: .9rem; }
.line-card .l-ro { color: #64748b; font-size: .75rem; font-style: italic; }
.line-card .l-es { color: #fde68a; font-size: .9rem; }
.line-card .l-time { font-size: .7rem; color: #64748b; font-variant-numeric: tabular-nums; }
.line-detail { margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed #334155; font-size: .82rem; }
.word-chip { display: inline-flex; flex-direction: column; background: #1e293b; border-radius: .5rem; padding: .3rem .5rem; margin: .15rem; }
.icon-btn { color: #64748b; padding: .15rem .35rem; border-radius: .35rem; }
.icon-btn:hover { color: #fff; background: #1e293b; }
.hide-ro .l-ro, .hide-ro #sub-ro { display: none; }

/* Práctica */
.blur-text { filter: blur(7px); cursor: pointer; transition: filter .2s; user-select: none; }
.blur-text.revealed { filter: none; }

/* Tarjetas de canciones */
.song-card { border-radius: 1rem; overflow: hidden; background: #0f172a; border: 1px solid #1e293b; transition: transform .15s, border-color .15s; }
.song-card:hover { transform: translateY(-3px); border-color: #ec4899; }