/* MelodyMath — #591 music-game screens. Mobile first: every target is at
   least 48px, rows wrap inside the card, nothing widens a phone page.
   Colors come from the src/sefirot.css tokens only. */
.mm-game{margin-bottom:16px}
.mm-game h3{margin:8px 0}
.jam-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.jam-head .mm-music-toggle{width:auto;min-height:48px;padding:6px 14px}
.jam-prompt{font-size:1.15rem;font-weight:bold;margin:6px 0 10px}
.jam-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.jam-row>button{width:auto;min-height:48px;padding:8px 16px;flex:1 1 auto}
.jam-free{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0;color:var(--muted)}
.jam-pad{min-width:64px;min-height:56px;border-radius:16px;border:2px solid var(--line);background:var(--card);color:var(--ink);font-size:1.05rem;font-weight:bold}
.jam-msg{min-height:1.5em;font-weight:bold;margin:6px 0}
.jam-msg.good{color:var(--good)}
.jam-msg.soft{color:var(--purple)}
.jam-lit{background:color-mix(in srgb, var(--mint) 45%, var(--card))!important}
.fbp-bar{display:flex;height:64px;border:3px solid var(--ink);border-radius:12px;overflow:hidden;background:var(--card)}
.fbp-bar.done{border-color:var(--good);box-shadow:0 0 0 4px color-mix(in srgb, var(--good) 25%, transparent)}
.fbp-seg{display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--yellow) 60%, var(--card));color:var(--ink);border-inline-start:2px solid var(--ink);font-weight:bold;min-width:0;overflow:hidden}
.fbp-seg:nth-child(even){background:color-mix(in srgb, var(--pink) 22%, var(--card))}
.fbp-seg.lit{animation:mmTap .25s ease-out;background:color-mix(in srgb, var(--mint) 45%, var(--card))}
.gg-cell{background:color-mix(in srgb, var(--yellow) 35%, var(--card));border:2px solid var(--ink);border-radius:6px}
.gg-cell.on{animation:mmTap .25s ease-out;background:color-mix(in srgb, var(--mint) 55%, var(--card))}
.fbp-out{margin-inline-start:auto;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--muted);font-size:.8rem}
.fbp-over{display:flex;align-items:center;gap:8px;margin:6px 0;color:var(--purple);font-weight:bold}
.fbp-overbar{display:inline-block;height:20px;max-width:60%;background:color-mix(in srgb, var(--purple) 25%, var(--card));border:2px dashed var(--purple);border-radius:6px}
.fbp-sum{margin:6px 0}
.fbp-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:76px;min-height:72px;border-radius:16px;border:2px solid var(--line);background:var(--card);color:var(--ink);font-size:1.3rem}
.fbp-tile span{font-size:.85rem;color:var(--muted)}
.bc-slots{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.bc-slot{width:56px;height:56px;min-width:44px;border-radius:50%;border:3px dashed var(--line);background:var(--card);font-size:1.6rem;padding:0}
.bc-slot.full{border-style:solid;border-color:var(--good)}
.bc-row2{display:flex;flex-wrap:wrap;gap:20px;margin:8px 0;font-size:1.3rem}
.jam-extra{margin-top:12px;padding:10px;border:2px dashed var(--line);border-radius:12px}
.jam-extra h4{margin:0 0 4px;color:var(--muted)}
.ttg-beats{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0;direction:ltr}
.ttg-beat{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:32px;border-radius:8px;background:var(--bg);color:var(--muted);font-size:.85rem}
.ttg-beat.acc{min-width:40px;background:color-mix(in srgb, var(--yellow) 60%, var(--card));color:var(--ink);font-weight:bold;font-size:1rem}
.ttg-beat.ask{border:2px dashed var(--purple)}
.ttg-plain{font-size:1.3rem;font-weight:bold;margin:8px 0}
.mm-game [aria-pressed="true"]:not(.mm-music-toggle){border-color:var(--purple);box-shadow:0 0 0 3px color-mix(in srgb, var(--purple) 25%, transparent)}
.anim-math-merge{animation:mathMerge .45s cubic-bezier(.2,.8,.2,1)}
.anim-math-takeaway{animation:mathTakeaway .45s ease-out}
.anim-math-repeat{animation:mathRepeat .45s ease-in-out}
.anim-math-split{animation:mathSplit .45s ease-out}
.anim-math-glow{animation:mathGlow .5s ease-out}
@keyframes mathMerge{0%{transform:scale(.95)}50%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes mathTakeaway{0%{opacity:1}50%{opacity:.4;transform:translateY(4px)}100%{opacity:1;transform:none}}
@keyframes mathRepeat{0%{transform:scale(1)}50%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes mathSplit{0%{letter-spacing:normal}50%{letter-spacing:4px}100%{letter-spacing:normal}}
@keyframes mathGlow{0%{box-shadow:none}50%{box-shadow:0 0 12px var(--mint)}100%{box-shadow:none}}
@media (prefers-reduced-motion:reduce){.fbp-seg.lit,.anim-math-merge,.anim-math-takeaway,.anim-math-repeat,.anim-math-split,.anim-math-glow{animation:none}}
.np-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}
.np-btn{min-width:48px;min-height:48px;border-radius:14px;border:2px solid var(--ink);background:var(--purple);color:#fff;font-size:1.3rem;touch-action:manipulation}
.np-circles,.np-group{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px}
.np-dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--ink);background:var(--card)}.np-ten{width:34px;height:34px;font-size:.7rem;line-height:30px;text-align:center;font-weight:700}
.np-dot.lit{background:var(--yellow)}
.np-dot[data-group="1"].lit{background:var(--pink)}
.np-dot[data-group="2"].lit{background:var(--mint)}
.np-gap{display:inline-block;width:12px}