/* SOLFÈGE MATCH — board/card flip come from ../match/match.css; screens etc. from play/style.css */
.mode-grid { grid-template-columns: repeat(2, 1fr); }
.key-grid { margin-top: 2px; }
.key-grid .inst { padding: 9px 6px; }
#staff-opts.off { opacity: .35; pointer-events: none; }

/* syllable colors (the classic rainbow chart: Do red ... Ti purple) */
:root {
  --s-do: #ff4b4b; --s-re: #ff9a2e; --s-mi: #ffd93b; --s-fa: #39d66a;
  --s-sol: #2ec4d6; --s-la: #5b7cfa; --s-ti: #c55bf0;
}
.syl-face { font-size: clamp(26px, 7.5vw, 44px); font-weight: 900; letter-spacing: 1px;
  color: var(--c); text-shadow: 0 0 10px var(--c); }
.syl-face sup { font-size: .45em; vertical-align: super; margin-left: 1px; }
.face-back.paper { background: #f4ead2; border-color: #b8a57a; }
.card.matched .face-back.paper { border-color: var(--green); box-shadow: 0 0 14px rgba(57,255,136,.6); }
.hand-face { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hand-face .ink { width: 92%; aspect-ratio: 1; background: #cfe7ff;
  -webkit-mask: var(--img) center / contain no-repeat; mask: var(--img) center / contain no-repeat; }
.hand-face { filter: drop-shadow(0 0 3px rgba(0,240,255,.55)); }
.card.matched .hand-face { filter: drop-shadow(0 0 4px var(--c)); }
.face-back.paper .hand-face { filter: none; }
.hand-face .tag-hi { color: #8a94a8; }
.face-back.paper .hand-face .tag-hi { color: #6b5a3a; }
.card.matched .hand-face .ink { background: var(--c); }
.face-back.paper .hand-face .ink { background: #1a1030; }
.hand-face .tag-hi { font-size: 10px; letter-spacing: 1px; margin-top: -4px; }
.card.matched .syl-label { opacity: 1; }
.syl-label { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: 11px; font-weight: 700;
  letter-spacing: 1px; color: var(--c); opacity: 0; transition: opacity .3s; text-shadow: none; }
.face-back.paper .syl-label { color: #1a1030; }

/* cheat sheet + end-of-game scale */
.cheat { width: 100%; box-sizing: border-box; }
.cheat summary { cursor: pointer; list-style: none; text-align: center; }
.cheat summary::-webkit-details-marker { display: none; }
.cheat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.cheat-cell { background: #0a0d16; border: 1px solid var(--dim); border-radius: 6px; padding: 4px 4px 6px; text-align: center; }
.cheat-cell .ink { width: 100%; aspect-ratio: 1; background: var(--c); -webkit-mask: var(--img) center / contain no-repeat; mask: var(--img) center / contain no-repeat; }
.cheat-cell b { color: var(--c); font-size: 16px; text-shadow: 0 0 6px var(--c); }
.cheat a { color: var(--neon); }
.sing-row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 8px 0; }
.sing-row span { font-weight: 900; font-size: 18px; color: var(--c); padding: 2px 4px; transition: transform .1s, text-shadow .1s; }
.sing-row span.on { transform: translateY(-6px) scale(1.25); text-shadow: 0 0 12px var(--c); }