:root {
  color-scheme: dark;
  --navy: #071a35;
  --panel: #0c2749;
  --blue: #168fea;
  --gold: #f2c14e;
  --text: #f7fbff;
  --muted: #b9cce1;
  --border: rgba(255,255,255,.16);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { overflow: hidden; background: var(--navy) url("../site/bck2-music.jpg") center / cover fixed no-repeat; color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
[hidden] { display: none !important; }

.song-menu { min-height: 100dvh; padding: clamp(20px, 4vw, 52px); background: linear-gradient(rgba(4,18,38,.28), rgba(4,18,38,.5)); }
.menu-header { width: min(1050px, 100%); margin: auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.menu-header h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.8rem); }
.count-pill { padding: 7px 11px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--muted); font-size: .82rem; font-weight: 750; }
.song-grid { width: min(1050px, 100%); margin: 26px auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 290px)); gap: 18px; }
.song-card { padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: #0c2749; color: var(--text); text-align: left; cursor: pointer; box-shadow: 0 14px 30px rgba(0,0,0,.25); transition: transform .16s ease, border-color .16s ease; }
.song-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.song-card:focus-visible { outline: 4px solid var(--gold); outline-offset: 3px; }
.cover-art { display: grid; place-items: center; aspect-ratio: 16 / 10; background: linear-gradient(145deg, rgba(255,255,255,.08), transparent), radial-gradient(circle at 70% 28%, #27a4ff, #073262 64%); }
.cover-art span { color: #fff3a9; font-size: 6rem; text-shadow: 4px 5px 0 rgba(0,0,0,.25); transform: rotate(-8deg); }
.anthem-art { background: linear-gradient(145deg, rgba(255,255,255,.09), transparent), radial-gradient(circle at 70% 28%, #f2c14e, #087148 66%); }
.alphabet-art { background: linear-gradient(145deg, rgba(255,255,255,.09), transparent), radial-gradient(circle at 70% 28%, #a78bfa, #44308c 66%); }
.alphabet-art span { font-size: 3.2rem; letter-spacing: .08em; transform: none; }
.gumtrees-art { background: linear-gradient(145deg, rgba(255,255,255,.09), transparent), radial-gradient(circle at 70% 28%, #8bcf75, #205d3a 66%); }
.hello-goodbye-art { background: linear-gradient(145deg, rgba(255,255,255,.1), transparent), radial-gradient(circle at 70% 28%, #ff8a65, #8c2452 66%); }
.hello-goodbye-art span { font-size: 2.8rem; transform: rotate(-5deg); }
.pyjamas-art { background: radial-gradient(circle at 32% 34%, #8b5cf6 0 8%, transparent 9%), radial-gradient(circle at 70% 66%, #8b5cf6 0 8%, transparent 9%), linear-gradient(145deg, #ffffff, #dbeafe); }
.pyjamas-art span { color: #7c3aed; font-size: 2.5rem; letter-spacing: .35em; text-shadow: none; transform: rotate(-8deg); }
.card-copy { display: grid; gap: 4px; padding: 16px; }
.card-copy strong { font-size: 1.15rem; }
.card-copy span { color: #d9e7f5; }
.card-copy small { margin-top: 5px; color: var(--muted); }
.language-dialog { width: min(440px, calc(100vw - 28px)); padding: 0; border: 1px solid var(--border); border-radius: 18px; background: #0c2749; color: var(--text); box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.language-dialog::backdrop { background: rgba(2,12,28,.74); backdrop-filter: blur(4px); }
.language-dialog form { display: grid; gap: 13px; padding: 24px; }
.language-dialog h2 { margin: 0 0 4px; font-size: 1.5rem; }
.language-dialog label { color: var(--muted); font-size: .85rem; font-weight: 750; }
.language-dialog select { width: 100%; padding: 13px 38px 13px 13px; font-size: 1rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.dialog-button { padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.07); color: white; font: inherit; font-weight: 800; cursor: pointer; }
.dialog-button.primary { border-color: var(--blue); background: var(--blue); }

.song-app { height: 100dvh; display: flex; flex-direction: column; background: rgba(4,18,38,.48); }
.video-section { flex: 0 0 auto; padding: 14px clamp(16px, 3vw, 42px) 16px; background: linear-gradient(135deg, #08264d, #06172f); box-shadow: 0 8px 24px rgba(0,0,0,.32); z-index: 2; }
.topbar { flex: 0 0 auto; width: 100%; padding: 12px clamp(16px, 2.5vw, 34px); display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; background: linear-gradient(135deg, #08264d, #06172f); box-shadow: 0 6px 20px rgba(0,0,0,.28); z-index: 2; }
.back-button { padding: 9px 13px; border: 1px solid var(--border); border-radius: 11px; color: var(--text); background: rgba(255,255,255,.07); text-decoration: none; font: inherit; font-weight: 750; cursor: pointer; }
.title-block h1 { margin: 0; font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.05; }
.eyebrow { margin: 0 0 3px; color: var(--gold); font-size: .72rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.artist { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }
.language-control { display: grid; gap: 4px; color: var(--muted); font-size: .75rem; font-weight: 750; }
select { min-width: 185px; padding: 9px 32px 9px 10px; border: 1px solid var(--border); border-radius: 10px; background: #0b2342; color: white; font: inherit; }
.activity-workspace { min-height: 0; flex: 1 1 auto; display: grid; grid-template-columns: minmax(480px, 1.1fr) minmax(420px, .9fr); gap: 18px; padding: 18px; }
.right-rail { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 18px; }
.video-wrap { width: 100%; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: #000; box-shadow: 0 12px 35px rgba(0,0,0,.35); }
.video-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
.language-panel { min-height: 0; display: grid; justify-items: center; align-items: start; padding: clamp(22px, 3vw, 42px) clamp(14px, 1.8vw, 26px); border: 1px solid var(--border); border-radius: 16px; background: radial-gradient(circle at 50% 25%, rgba(22,143,234,.13), transparent 55%), #0c2749; }
.language-panel .language-control { width: min(520px, 100%); gap: 12px; color: var(--text); font-size: 1.1rem; text-align: center; }
.language-panel select { width: 100%; padding: 14px 40px 14px 15px; border-color: rgba(242,193,78,.5); font-size: 1.05rem; }
.activity-instructions { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--border); color: #dce9f6; font-size: 1rem; line-height: 1.55; text-align: left; }
.activity-instructions ol { margin: 0; padding-left: 1.35em; }
.activity-instructions li + li { margin-top: 9px; }
.activity-instructions[dir="rtl"] { text-align: right; }
.activity-instructions[dir="rtl"] ol { padding-right: 1.35em; padding-left: 0; }

.lyrics-section { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px clamp(16px, 3vw, 38px) 36px; border: 1px solid var(--border); border-radius: 16px; background: radial-gradient(circle at 90% 0, rgba(22,143,234,.13), transparent 40%), #0a1f3a; }
.lyrics-heading, .lyrics-list { width: min(820px, 100%); margin-inline: auto; }
.lyrics-heading { margin-bottom: 14px; }
.lyrics-heading h2 { margin: 0; font-size: clamp(1.45rem, 3vw, 2rem); }
.lyrics-heading > p { margin: 0; color: var(--muted); font-size: .9rem; }
.click-mode { display: flex; padding: 3px; border: 1px solid var(--border); border-radius: 11px; background: rgba(0,0,0,.18); }
.mode-button { padding: 8px 11px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; }
.mode-button.active { background: var(--blue); color: white; }
.translation-panel { position: fixed; z-index: 30; top: 90px; left: 50%; width: max-content; min-width: 230px; max-width: min(470px, calc(100vw - 24px)); max-height: min(620px, calc(100vh - 24px)); overflow-y: auto; padding: 0; opacity: 0; visibility: hidden; transform: translateY(5px); transition: opacity .12s ease, transform .12s ease, visibility .12s; pointer-events: auto; }
.translation-panel.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.translation-result { min-height: 96px; padding: 18px; border: 1px solid rgba(242,193,78,.65); border-radius: 16px; background: rgba(7,26,53,.98); box-shadow: 0 20px 55px rgba(0,0,0,.5); }
.result-prompt { display: block; color: var(--muted); font-size: .9rem; }
.result-original { display: block; color: var(--muted); font-size: 1rem; }
.result-translation { display: block; margin-top: 5px; color: #fff; font-size: 1.45rem; line-height: 1.3; font-weight: 800; }
.result-notes { display: block; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); color: #d8e6f4; font-size: 1.15rem; line-height: 1.6; }
.result-notes strong { display: block; margin-bottom: 4px; color: var(--gold); }
.note-image { margin: 14px 0 0; }
.result-notes.picture-only .note-image { margin-top: 0; }
.note-image a { display: block; overflow: hidden; width: min(320px, 100%); border: 1px solid var(--border); border-radius: 10px; background: #06172f; }
.note-image img { display: block; width: 100%; height: auto; object-fit: contain; }
.note-sprite { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; background: #f8f4ea; }
.note-sprite img { width: calc(var(--sprite-columns) * 100%); max-width: none; transform: translate(calc(var(--sprite-column) * -100% / var(--sprite-columns)), calc(var(--sprite-row) * -100% / var(--sprite-rows))); transform-origin: top left; }
.note-image figcaption { margin-top: 5px; color: var(--muted); font-size: .72rem; }
.translation-result.loading .result-translation { color: var(--gold); }
.translation-result.error .result-translation { color: #ffb4b4; font-weight: 650; }
.lyrics-list { display: grid; gap: 5px; padding: 8px 0 20px; }
.lyric-line { margin: 0; padding: 8px 10px; border: 1px solid transparent; border-radius: 9px; color: #eef6ff; font-size: clamp(1.25rem, 2.5vw, 1.55rem); line-height: 1.65; }
.lyric-line.chorus { margin-block: 7px; border-left: 4px solid var(--gold); background: rgba(242,193,78,.07); }
.lyric-line.blank { height: 9px; padding: 0; }
.word { display: inline-block; margin: 1px 2px; padding: 1px 3px; border: 0; border-radius: 5px; background: transparent; color: inherit; font: inherit; cursor: help; }
.word-mode .word:hover, .word:focus-visible { background: var(--blue); outline: none; }
.lyric-line.selected, .word.selected { background: var(--blue) !important; color: white; }
.line-translate { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-right: 8px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,.06); color: white; font-size: 1rem; cursor: pointer; vertical-align: middle; }
.line-translate:hover, .line-translate:focus-visible { border-color: var(--gold); background: rgba(242,193,78,.14); outline: none; }
.section-list { display: grid; gap: 10px; }
.song-section { width: 100%; padding: 0; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.055); color: inherit; text-align: left; overflow: hidden; cursor: pointer; }
.song-section:hover { border-color: rgba(242,193,78,.7); }
.section-summary { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; }
.section-number { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--blue); font-weight: 850; }
.section-label { display: block; font-size: 1rem; font-weight: 800; }
.section-theme { display: block; margin-top: 2px; color: var(--muted); font-size: .86rem; }
.chevron { color: var(--gold); font-size: 1.35rem; transition: transform .18s ease; }
.song-section[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.explanation { display: none; margin: 0; padding: 0 18px 17px 74px; color: #e3edf8; font-size: 1rem; line-height: 1.55; }
.song-section[aria-expanded="true"] .explanation { display: block; }
.song-section.rtl .explanation { direction: rtl; text-align: right; }
.copyright-note { margin-top: 18px; color: #91a9c3; font-size: .78rem; text-align: center; }

@media (max-width: 900px) {
  body { overflow: auto; }
  .song-app { height: auto; min-height: 100dvh; }
  .activity-workspace { grid-template-columns: 1fr; }
  .lyrics-section { max-height: 70dvh; }
  .right-rail { grid-row: 1; }
  .translation-panel { top: auto !important; right: 10px; bottom: 10px; left: 10px !important; width: auto; max-height: 52vh; }
}
@media (max-width: 640px) {
  .topbar { gap: 10px; }
  select { min-width: 0; width: 100%; }
  .language-panel { padding: 20px; }
  .lyrics-section { padding: 18px 12px 30px; }
  .lyrics-heading { align-items: start; flex-direction: column; gap: 5px; }
  .click-mode { width: 100%; }
  .mode-button { flex: 1; }
  .explanation { padding-left: 16px; }
}

@media (prefers-reduced-motion: reduce) { .chevron { transition: none; } }