/* Lyrics share the tablet palette and the same playback clock as the circle. */
.tablet #tabletQueue[hidden], .tablet-lyrics [hidden], .tablet-lyrics[hidden] { display: none !important; }
.tablet-header #tabletKaraoke[aria-pressed="true"] { color: var(--tablet-active); }
.tablet-lyrics { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; }
.karaoke-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 8px; }
.karaoke-song { min-width: 0; }
.karaoke-song h2, .karaoke-song p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.karaoke-song h2 { font-size: 16px; line-height: 1.5; font-weight: 500; color: var(--tablet-ink); }
.karaoke-song p { font-size: 12px; color: var(--tablet-muted); }
.karaoke-heading .icon-btn { flex: none; color: var(--tablet-muted); }
.karaoke-heading .icon-btn svg { width: 20px; height: 20px; }
.karaoke-lines {
  position: relative; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 32px 10px; scrollbar-width: none; touch-action: pan-y;
  mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
}
.karaoke-lines::-webkit-scrollbar { display: none; }
.karaoke-lines.is-synced { padding-block: 0; }
.karaoke-lines.is-synced::before, .karaoke-lines.is-synced::after { content: ""; display: block; height: var(--lyrics-pad, 0px); }
.tablet .karaoke-line {
  display: block; width: 100%; min-height: 56px; padding: 14px 8px; border: 0; border-radius: 8px;
  text-align: start; white-space: pre-wrap; overflow-wrap: anywhere; text-wrap: pretty;
  font: 300 clamp(22px, 2.6vw, 40px)/1.3 var(--font); letter-spacing: -.035em;
  background: transparent; box-shadow: none; color: var(--tablet-muted); opacity: .68;
  transition: color .25s, opacity .25s; cursor: pointer;
}
.tablet .karaoke-line.is-past { opacity: .42; }
.tablet .karaoke-line.is-current { color: var(--tablet-active); font-weight: 700; opacity: 1; }
.tablet .karaoke-line:hover { opacity: 1; color: var(--tablet-active); background: transparent; box-shadow: none; }
.tablet .karaoke-line.is-break { letter-spacing: .22em; }
.karaoke-line:focus-visible { outline-offset: -2px; }
.karaoke-plain { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 300 clamp(20px, 2.2vw, 32px)/1.7 var(--font); }
.karaoke-status { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; padding: 20px; color: var(--tablet-muted); }
.karaoke-status p { margin: 0; font-size: clamp(18px, 2vw, 26px); font-weight: 300; }
.karaoke-footer { min-height: 50px; text-align: center; padding: 0 8px; }
.karaoke-hint { margin: 0 0 6px; color: var(--tablet-muted); font-size: 12px; }
.karaoke-provider { margin: 0; color: var(--tablet-muted); font-size: 11px; overflow-wrap: anywhere; }
.tablet .karaoke-follow, .tablet .karaoke-retry {
  min-height: 44px; padding: 8px 16px; font: 400 13px/1.3 var(--font); color: var(--tablet-active);
  background: var(--tablet-notice-bg); border: 1px solid var(--tablet-icon-border); border-radius: 24px; box-shadow: none;
}
.karaoke-footer:has(.karaoke-follow:not([hidden])) .karaoke-hint { display: none; }
.karaoke-follow { margin-bottom: 6px; }
.tablet.is-karaoke-focus .tablet-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 100px; gap: 0; }
.is-karaoke-focus .tablet-listening { display: contents; }
.is-karaoke-focus .tablet-visual, .is-karaoke-focus .tablet-volume { display: none; }
.is-karaoke-focus .tablet-transport { grid-column: 1; grid-row: 2; justify-self: center; }
.is-karaoke-focus .tablet-playlist { grid-column: 1; grid-row: 1; display: block; }
.is-karaoke-focus .tablet-lyrics { height: 100%; width: min(100%, 1100px); margin-inline: auto; }
.is-karaoke-focus .karaoke-line { font-size: clamp(28px, 4.4vw, 66px); padding-block: 18px; text-align: center; text-wrap: balance; }
.is-karaoke-focus .karaoke-lines { padding-inline: clamp(8px, 5vw, 80px); }
.is-karaoke-focus .karaoke-plain { text-align: center; }
@media (max-aspect-ratio: 9/10) {
  .tablet.has-karaoke .tablet-body { grid-template-rows: minmax(0, 1fr) minmax(0, 1.25fr); }
  .tablet.has-karaoke.is-karaoke-focus .tablet-body { grid-template-rows: minmax(0, 1fr) 84px; }
  .karaoke-heading { padding: 0 12px; }
  .karaoke-line { font-size: clamp(22px, 4vw, 34px); }
  .tablet-lyrics { gap: 4px; }
}
@media (max-height: 600px) and (min-aspect-ratio: 9/10) {
  .tablet.is-karaoke-focus .tablet-body { grid-template-rows: minmax(0, 1fr) 64px; }
  .tablet-lyrics { gap: 0; }
  .karaoke-heading .icon-btn { height: 40px; }
  .karaoke-footer { min-height: 34px; }
  .karaoke-line { padding-block: 10px; }
}
@media (max-width: 380px) { .tablet .tablet-header .tablet-exit { display: none; } }
@media (prefers-reduced-motion: reduce) { .tablet .karaoke-line { transition: none; } }