/* Partituralar: the list (/partituralar) and one score (/partituralar/<id>). Builds on play.css (header) and
   game-stream.css (chips). */
.game-row.wide { max-width: 860px; }

/* List */
.pt-main { max-width: 720px; margin: 0 auto; padding: 6px var(--pad) 32px; }
.pt-main h1 { font-size: 1.5rem; margin: 6px 0 2px; }
.pt-lead { color: var(--ink-2); font-size: 0.9rem; margin: 0 0 12px; }
.pt-search { width: 100%; min-height: 46px; border: 1.5px solid var(--line); border-radius: 12px; padding: 0 14px; font: inherit; background: var(--card); color: var(--ink); }
.pt-main .chips { margin: 10px 0 4px; }
.pt-group { font-size: 0.8rem; font-weight: 800; color: var(--muted); margin: 16px 2px 0; text-transform: uppercase; letter-spacing: 0.04em; }
.pt-list { list-style: none; margin: 8px 0 0; padding: 2px 12px; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; }
.pt-list li + li { border-top: 1px solid var(--line); }
.pt-row { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 8px 0; text-decoration: none; color: var(--ink); }
.pt-ic { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 1.2rem; background: #fbe9df; color: #b9531c; }
.pt-ic.c-classic { background: #eeedfe; color: #4b3fb0; }
.pt-ic.c-beginner { background: #fdf3d8; color: #8a5a00; }
.pt-ic.c-folk { background: #e6f1fb; color: #1d5a8f; }
.pt-ic.c-holiday { background: #e1f5ee; color: #0f6e56; }
.pt-t { flex: 1; min-width: 0; display: grid; }
.pt-t small { color: var(--muted); font-size: 0.8rem; }
.pt-lv { flex: none; font-size: 0.75rem; font-weight: 800; color: var(--accent-ink); }
.pt-none { margin-top: 16px; text-align: center; color: var(--muted); }

/* One score */
.sc-head { max-width: 860px; margin: 0 auto; padding: 10px var(--pad) 0; }
.sc-head h1 { font-size: 1.5rem; margin: 4px 0 2px; }
.sc-meta { color: var(--muted); font-size: 0.85rem; }
.sc-tags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.sc-tags span { font-size: 0.75rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); }
.sc-opts { max-width: 860px; margin: 10px auto 0; padding: 0 var(--pad); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 0.85rem; color: var(--ink-2); }
.sc-opts .chips { margin: 0; }
.sc-opts .chip { min-height: 34px; padding: 4px 12px; }
.sc-opts .sc-lbl + .chips { margin-right: 6px; }
.sc-card { max-width: 860px; margin: 12px auto 0; background: #fff; border: 1.5px solid var(--line); border-radius: 18px; padding: 8px 6px 4px; }
@media (max-width: 899px) { .sc-card { margin-left: 6px; margin-right: 6px; } }
.sc-card svg { display: block; }
.sc-card .abcjs-note { cursor: pointer; }
.sc-card .abcjs-note.done, .sc-card .abcjs-note.done path { fill: #9aa0b8; color: #9aa0b8; }
.sc-card .abcjs-note.tap, .sc-card .abcjs-note.tap path { fill: var(--teal) !important; color: var(--teal) !important; }
.sc-card .abcjs-note.now, .sc-card .abcjs-note.now path { fill: var(--accent) !important; color: var(--accent) !important; }
.sc-tap { max-width: 860px; margin: 6px auto 0; padding: 0 var(--pad); text-align: center; color: var(--muted); font-size: 0.8rem; }
.sc-bar { position: sticky; bottom: 0; margin-top: 12px; background: rgba(250, 247, 242, 0.96); border-top: 1px solid var(--line); padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 5; }
.sc-bar-in { max-width: 860px; margin: 0 auto; display: flex; align-items: center; gap: 10px; }
.sc-play { flex: 1; min-height: 52px; font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.sc-play .i-pause, .sc-play.on .i-play { display: none; }
.sc-play.on .i-pause { display: block; }
.sc-icon { flex: none; width: 52px; height: 52px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); display: grid; place-items: center; color: var(--ink); }
.sc-time { flex: none; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.85rem; min-width: 76px; text-align: center; }

/* Phone in landscape: a compact head and bar so more of the score shows */
@media (orientation: landscape) and (max-height: 520px) {
  .sc-head { padding-top: 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  .sc-head h1 { font-size: 1.15rem; margin: 0; }
  .sc-tags { margin-top: 0; }
  .sc-opts { margin-top: 6px; }
  .sc-tap { display: none; }
  .sc-bar { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  .sc-play, .sc-icon { min-height: 40px; height: 40px; }
  .sc-icon { width: 44px; }
}

/* Plus: tags on the list, the locked score */
.pt-free { margin: -4px 0 12px; padding: 8px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); font-size: 0.85rem; font-weight: 700; }
.pt-tag { font-style: normal; font-size: 0.65rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); vertical-align: 2px; }
.pt-tag.free { background: var(--teal-soft); color: var(--teal); }
.sc-lock { max-width: 860px; margin: 16px auto 0; padding: 20px; margin-left: max(6px, calc((100% - 860px) / 2)); margin-right: max(6px, calc((100% - 860px) / 2)); background: #fff; border: 1.5px solid var(--line); border-radius: 18px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.sc-lock svg { color: var(--accent); }
.sc-lock p { margin: 0; color: var(--ink-2); }
.sc-lock .btn { min-width: 220px; }