/* Individual piano choices and their musical-symbol feedback. */
[data-look] .nss-free.show { display: flex; flex-direction: column; gap: clamp(8px, 1.3vh, 16px); padding: clamp(12px, 1.5vh, 20px) clamp(12px, 2vw, 28px); }
.nss-free > * { min-width: 0; flex-shrink: 0; }
.nss-free .nss-bar { min-height: 58px; }
.nss-free-stage {
    /* Give the history 30% of the height previously available to the keys. */
    position: relative; isolation: isolate; flex: 3 0 auto;
    height: clamp(120px, 16vh, 180px); min-height: clamp(120px, 16vh, 180px);
    display: grid; grid-template-columns: minmax(0, 1fr); align-content: center;
    align-items: center; justify-items: center; gap: 12px; padding: 12px; border: 2px solid #41516c;
    border-radius: 24px;
    background: radial-gradient(ellipse at 20% 30%, #17374e, transparent 65%),
                radial-gradient(ellipse at 85% 70%, #30214b, transparent 65%), #0c172c;
}
.nss-free-staff { position: absolute; left: 5%; right: 5%; top: 25%; height: 42%; display: flex; flex-direction: column; justify-content: space-between; z-index: -1; }
.nss-free-staff i { display: block; height: 2px; background: #6d8aa32b; }
.nss-free-current { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1vw, 16px); }
.nss-free-symbol { width: clamp(64px, 9vh, 110px); height: clamp(64px, 9vh, 110px); }
.nss-free-symbol svg { width: 100%; height: 100%; filter: drop-shadow(0 5px 0 #070c1e) drop-shadow(0 0 12px #759aef60); }
.nss-free-symbol.playing { animation: nss-music-play .65s ease-out; }
.nss-free-note-name { font-size: clamp(24px, 2.5vw, 44px); font-weight: 700; line-height: 1.15; text-align: center; }
.nss-free-history { min-width: 0; width: min(100%, 1200px); }
.nss-free-history-title { font-size: 18px; font-weight: 700; text-align: center; margin-bottom: 8px; }
.nss-free-trail { --history-columns: 10; --history-gap: clamp(4px, .6vw, 10px); list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--history-gap); min-height: 64px; }
.nss-free-history-key { position: relative; min-width: 0; width: calc((100% - (var(--history-columns) - 1) * var(--history-gap)) / var(--history-columns)); flex: none; height: clamp(64px, 8vh, 88px); display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid #263d52; border-top: 6px solid var(--note-color); border-radius: 4px 4px 12px 12px; background: #fffaf0; color: #18334a; box-shadow: inset 0 -4px #d3cbb8; }
.nss-free-history-key.black { background: #203446; color: #fff; box-shadow: inset 0 -4px #0b1d2a; }
.nss-free-history-key[aria-current] { outline: 3px solid currentColor; outline-offset: 2px; }
.nss-free-history-number { font-size: 15px; line-height: 1; }
.nss-free-history-note { font-size: clamp(18px, 1.5vw, 28px); line-height: 1; font-weight: 700; text-align: center; min-height: 36px; display: grid; align-items: center; }
.nss-free-history-key.arriving { animation: nss-music-arrive .4s ease-out; }
.nss-free-history-pick {
    position: absolute; inset: 0; width: 100%; height: 100%; padding: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    border: 0; border-radius: inherit; background: transparent; color: inherit;
    font: inherit; cursor: pointer; touch-action: manipulation;
}
.nss-free-history-pick.nss-focus, .nss-free-history-pick.nss-focus-full {
    outline: none !important; translate: none;
    box-shadow: inset 0 0 0 5px var(--focus-color), inset 0 0 0 8px var(--focus-ink) !important;
}
.nss-free-history-pick[data-narbe-scan-paused]::after { content: ''; position: absolute; inset: 5px; border: 3px dotted var(--focus-ink); pointer-events: none; }
.nss-free-stage.deleting { grid-template-columns: minmax(0, 1fr); }
.nss-free-stage.deleting .nss-free-current { display: none; }
.nss-free-stage.deleting .nss-free-history-key { height: max(72px, 8vh); }
.nss-free-scroll { flex: 7 1 0; min-height: 0; padding: 10px; overflow: visible; }
.nss-free-scroll.nss-focus, .nss-free-scroll.nss-focus-full { translate: none; }
.nss-free-scroll.nss-focus-full .nss-key.white { background: var(--focus-color) !important; }
.nss-free-scroll.nss-focus-full .nss-key.white .nss-key-label { color: var(--focus-ink); }
.nss-free-piano { position: relative; width: 100%; min-width: 0; height: 100%; }
.nss-free-key { padding: 0; margin: 0; min-height: 0; min-width: 0; width: calc(100% / var(--white-keys)); transition: none; z-index: 1; touch-action: manipulation; }
.nss-free-key.black { width: calc(100% / var(--white-keys) * .62); z-index: 2; }
.nss-free-key .nss-key-label { display: block; pointer-events: none; bottom: 5%; font-size: clamp(12px, 1.7vw, 28px); }
.nss-free-key.black .nss-key-label { font-size: clamp(9px, 1.25vw, 20px); }
.nss-free-key.nss-focus, .nss-free-key.nss-focus-full {
    outline: none !important; translate: none; z-index: 1;
    box-shadow: inset 0 0 0 6px var(--focus-color), inset 0 0 0 10px var(--focus-ink) !important;
}
.nss-free-key.black.nss-focus, .nss-free-key.black.nss-focus-full { z-index: 3; }
.nss-free-key.nss-focus-full .nss-key-label { color: var(--focus-ink) !important; }
.nss-free-key[data-narbe-scan-paused]::after { content: ''; position: absolute; inset: 8px; border: 4px dotted var(--focus-ink); border-radius: 4px; pointer-events: none; }
.nss-free .nss-song-foot { gap: 12px; }
.nss-free .nss-song-foot .nss-hint { max-width: 42%; font-size: clamp(16px, 1.2vw, 22px); }
.nss-free .nss-song-actions { flex: 1; min-width: 0; }
.nss-free .nss-song-actions .nss-ctrl { min-width: 0; flex: 1; }
.nss-free .nss-song-actions button:disabled { opacity: .55; cursor: default; }

[data-look="contrast"] .nss-free-stage { background: #000; border-color: #fff; border-radius: 0; }
[data-look="contrast"] .nss-free-symbol { --free-main: white; --free-deep: white; --free-light: white; }
[data-look="contrast"] .nss-free-symbol svg { filter: none; }
[data-look="contrast"] .nss-free-staff { display: none; }
[data-look="contrast"] .nss-free-history-key { border-color: #fff; background: #fff; color: #000; box-shadow: none; }
[data-look="contrast"] .nss-free-history-key.black { background: #000; color: #fff; }
[data-look="contrast"] .nss-free-history-key[aria-current] { outline-color: #fff; }
@keyframes nss-music-play { 0% { transform: translateY(8px) scale(.94); } 45% { transform: translateY(-4px) scale(1.06); } 100% { transform: none; } }
@keyframes nss-music-arrive { from { transform: translateY(8px); opacity: .25; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nss-free-symbol.playing, .nss-free-history-key.arriving { animation: none; } }

@media (max-width: 1100px) {
    .nss-free-key.nss-focus, .nss-free-key.nss-focus-full {
        box-shadow: inset 0 0 0 3px var(--focus-color), inset 0 0 0 5px var(--focus-ink) !important;
    }
    .nss-free-key[data-narbe-scan-paused]::after { inset: 4px; border-width: 2px; }
}
@media (max-width: 900px) {
    .nss-free-stage { height: auto; min-height: 0; gap: 6px; padding: 8px; }
    .nss-free-symbol { width: 44px; height: 44px; }
    .nss-free-note-name { font-size: 28px; }
    .nss-free-history-title { font-size: 16px; margin-bottom: 6px; }
    .nss-free-history-key { height: 60px; }
    .nss-free-history-number { font-size: 12px; }
    .nss-free-history-note { font-size: 18px; min-height: 32px; }
    .nss-free-stage.deleting .nss-free-trail { --history-columns: 5; }
    .nss-free-stage.deleting .nss-free-history-key { height: 72px; }
    .nss-free .nss-song-foot { flex-direction: column; align-items: stretch; gap: 8px; }
    .nss-free .nss-song-foot .nss-hint { max-width: none; font-size: 16px; }
    .nss-free .nss-song-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .nss-free .nss-song-actions .nss-ctrl { min-height: 64px; font-size: 20px; padding: 8px 6px; }
}
/* All 25 notes stay visible. Two complete octave rows give portrait phones
   and tablets wider keys while preserving the same low-to-high scan order. */
@media (orientation: portrait) and (max-width: 900px) {
    .nss-free-key { left: var(--row-left); top: var(--row-top); width: var(--row-width); height: calc(50% - 5px); }
    .nss-free-key.black { width: var(--row-width); height: calc((50% - 5px) * .63); }
    [data-look] .nss-free-piano { background: transparent; }
    .nss-free-key .nss-key-label { font-size: clamp(14px, 3vw, 26px); }
    .nss-free-key.black .nss-key-label { font-size: clamp(11px, 2.2vw, 19px); }
}
@media (max-width: 600px) {
    [data-look] .nss-free.show { padding: 10px 12px; gap: 8px; }
    [data-look] .nss-free.show .nss-bar { min-height: 40px; padding: 4px 12px; }
    .nss-free .nss-bar-title { font-size: 26px; }
    .nss-free-stage { padding: 6px; gap: 4px; }
    .nss-free-symbol { width: 36px; height: 36px; }
    .nss-free-note-name { font-size: 24px; }
    .nss-free-trail { --history-columns: 5; --history-gap: 5px; min-height: 0; }
    .nss-free-history-key { height: 54px; border-top-width: 4px; }
    .nss-free-history-note { font-size: 17px; min-height: 30px; }
    .nss-free-stage.deleting .nss-free-history-key { height: 60px; }
    .nss-free-scroll { padding: 6px; border-radius: 12px; }
    [data-look] .nss-free-key { border-width: 1px; border-radius: 0 0 6px 6px; }
    .nss-free .nss-song-actions .nss-ctrl { font-size: 18px; }
    .nss-free .nss-song-foot .nss-hint { font-size: 14px; }
}
/* A compact strip leaves enough vertical room for the piano on short screens. */
@media (orientation: landscape) and (max-height: 600px) {
    [data-look] .nss-free.show { padding: 8px 16px; gap: 6px; }
    [data-look] .nss-free.show .nss-bar { min-height: 36px; padding: 4px 12px; }
    .nss-free .nss-bar-title { font-size: 24px; }
    .nss-free-stage { height: auto; min-height: 0; padding: 6px; gap: 4px; }
    .nss-free-symbol { width: 28px; height: 28px; }
    .nss-free-note-name { font-size: 22px; }
    .nss-free-history-title { font-size: 14px; margin-bottom: 4px; }
    .nss-free-trail, .nss-free-stage.deleting .nss-free-trail { --history-columns: 10; --history-gap: 4px; min-height: 0; }
    .nss-free-history-key, .nss-free-stage.deleting .nss-free-history-key { height: 52px; border-top-width: 4px; }
    .nss-free-history-note { font-size: 16px; min-height: 30px; }
    .nss-free-history-number { font-size: 11px; }
    .nss-free-stage.deleting { grid-template-columns: minmax(0, 1fr); }
    .nss-free-scroll { padding: 6px; }
    .nss-free .nss-song-foot { flex-direction: row; align-items: center; gap: 8px; }
    .nss-free .nss-song-foot .nss-hint { max-width: 36%; font-size: 13px; line-height: 1.25; }
    .nss-free .nss-song-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .nss-free .nss-song-actions .nss-ctrl { min-height: 64px; font-size: 17px; padding: 6px 4px; }
}