/* m2m-play-focus — shared mobile play focus for classroom + daily
   Classes: body.m2m-play-focus, .is-playing-line
   Mobile chrome hide gated @ max-width 640px (and html.m2m-phone).
   Desktop: light highlight only.
*/
.is-playing-line,
button.playing.is-playing-line,
.cul-block.is-playing.is-playing-line,
.v.is-playing-line {
  position: relative;
  transition: background .2s ease, box-shadow .2s ease, color .2s ease, transform .2s ease;
}
button.playing,
.cul-block.is-playing .cul-en,
.en.is-playing-line,
#lineEn.is-playing-line,
.jp.is-playing-line,
#mainLine.is-playing-line {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #2563eb) 28%, transparent);
}

@media (max-width: 640px) {
  html.m2m-phone body.m2m-play-focus,
  body.m2m-play-focus {
    /* dark focus stage */
  }
  html.m2m-phone body.m2m-play-focus .chrome .top .pills,
  html.m2m-phone body.m2m-play-focus .chrome .top .find-wrap,
  html.m2m-phone body.m2m-play-focus .chrome .rail,
  html.m2m-phone body.m2m-play-focus .wrap > .lessons,
  html.m2m-phone body.m2m-play-focus #lessons,
  html.m2m-phone body.m2m-play-focus .cat-pack,
  html.m2m-phone body.m2m-play-focus #catPack,
  html.m2m-phone body.m2m-play-focus .m2m-tabbar,
  html.m2m-phone body.m2m-play-focus .m2m-edge-l,
  html.m2m-phone body.m2m-play-focus .m2m-edge-t,
  html.m2m-phone body.m2m-play-focus .yihang-footer,
  html.m2m-phone body.m2m-play-focus .m2m-side-panel,
  html.m2m-phone body.m2m-play-focus .m2m-top-sheet,
  html.m2m-phone body.m2m-play-focus .m2m-scrim,
  body.m2m-play-focus .m2m-tabbar,
  body.m2m-play-focus .yihang-footer {
    display: none !important;
  }

  /* Hide non-active list rows — current stays first/top */
  html.m2m-phone body.m2m-play-focus #rel button:not(.playing):not(.is-playing-line),
  html.m2m-phone body.m2m-play-focus #relBox button:not(.playing):not(.is-playing-line),
  html.m2m-phone body.m2m-play-focus #catPack button:not(.playing):not(.is-playing-line),
  html.m2m-phone body.m2m-play-focus #nounCats button:not(.playing):not(.is-playing-line),
  html.m2m-phone body.m2m-play-focus #variantList button:not(.playing):not(.is-playing-line),
  html.m2m-phone body.m2m-play-focus #variantBox button:not(.playing):not(.is-playing-line),
  html.m2m-phone body.m2m-play-focus #chunks button.vocab-head:not(.playing):not(.is-playing-line),
  html.m2m-phone body.m2m-play-focus #cultureAside button:not(.playing):not(.is-playing-line),
  html.m2m-phone body.m2m-play-focus .cul-block:not(.is-playing):not(.is-playing-line) {
    display: none !important;
  }

  html.m2m-phone body.m2m-play-focus button.playing,
  html.m2m-phone body.m2m-play-focus button.is-playing-line,
  html.m2m-phone body.m2m-play-focus .cul-block.is-playing,
  html.m2m-phone body.m2m-play-focus .is-playing-line {
    order: -1;
    background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 12px 40px -16px rgba(37, 99, 235, .85), 0 0 0 2px rgba(147, 197, 253, .45) !important;
  }
  html.m2m-phone body.m2m-play-focus button.playing *,
  html.m2m-phone body.m2m-play-focus .is-playing-line * {
    color: inherit !important;
  }

  /* Main board line emphasis */
  html.m2m-phone body.m2m-play-focus .board .en.is-playing-line,
  html.m2m-phone body.m2m-play-focus .board .jp.is-playing-line,
  html.m2m-phone body.m2m-play-focus #lineEn.is-playing-line,
  html.m2m-phone body.m2m-play-focus .cul-block.is-playing .cul-en {
    font-size: clamp(1.25rem, 4.2vw + .55rem, 1.75rem) !important;
    line-height: 1.45 !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 100%) !important;
    color: #fff !important;
  }

  /* Keep listen controls */
  html.m2m-phone body.m2m-play-focus .acts,
  html.m2m-phone body.m2m-play-focus #tts,
  html.m2m-phone body.m2m-play-focus .listen-tools {
    opacity: 1;
  }
}

/* Daily page extras (also used when daily links this sheet) */
@media (max-width: 640px) {
  body.m2m-play-focus.m2m-daily {
    background: #0b1220;
  }
  body.m2m-play-focus.m2m-daily .hero,
  body.m2m-play-focus.m2m-daily .progress,
  body.m2m-play-focus.m2m-daily .date-pill,
  body.m2m-play-focus.m2m-daily .meta,
  body.m2m-play-focus.m2m-daily .ipa,
  body.m2m-play-focus.m2m-daily .stress,
  body.m2m-play-focus.m2m-daily .note,
  body.m2m-play-focus.m2m-daily #phaseSay,
  body.m2m-play-focus.m2m-daily .navrow {
    display: none !important;
  }
  body.m2m-play-focus.m2m-daily #phaseVariants:not(:has(.is-playing-line)) {
    display: none !important;
  }
  body.m2m-play-focus.m2m-daily #phaseVariants:has(.is-playing-line) h2 {
    display: none !important;
  }
  body.m2m-play-focus.m2m-daily #phaseVariants:has(.is-playing-line) .v:not(.is-playing-line) {
    display: none !important;
  }
  body.m2m-play-focus.m2m-daily:has(.v.is-playing-line) .en,
  body.m2m-play-focus.m2m-daily:has(.v.is-playing-line) .zh {
    display: none !important;
  }
  body.m2m-play-focus.m2m-daily .en.is-playing-line,
  body.m2m-play-focus.m2m-daily .v.is-playing-line {
    background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 100%);
    color: #fff;
    box-shadow: 0 12px 40px -16px rgba(37, 99, 235, .85), 0 0 0 2px rgba(147, 197, 253, .45);
    border-radius: 12px;
    padding: 12px 14px;
  }
  body.m2m-play-focus.m2m-daily .v.is-playing-line strong { color: #fff; }
  body.m2m-play-focus.m2m-daily .v.is-playing-line small { color: #bfdbfe; }
  body.m2m-play-focus.m2m-daily .card {
    background: transparent; border: 0; box-shadow: none;
  }
  body.m2m-play-focus.m2m-daily .zh { color: #94a3b8; }
  body.m2m-play-focus.m2m-daily .en { color: #f8fafc; font-size: clamp(1.35rem, 4.5vw + .6rem, 1.85rem); }
  body.m2m-play-focus.m2m-daily .top {
    background: transparent; backdrop-filter: none;
  }
  body.m2m-play-focus.m2m-daily .back {
    color: #cbd5e1; background: rgba(255,255,255,.08);
  }
  body.m2m-play-focus.m2m-daily .actions .btn {
    background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #e2e8f0;
  }
  body.m2m-play-focus.m2m-daily .actions .btn.primary {
    background: #2563eb; border-color: #2563eb; color: #fff;
  }
}