/* Daily Melody (/piano) */
.pn {
    max-width: 760px;
    margin: 0 auto;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
.pn button { touch-action: manipulation; }
.pn-key, .pn-key *, #pn-circle, #pn-circle * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }

/* Melody parts and free-play parts swap with the mode */
.pn-free-only { display: none; }
.pn.free .pn-free-only { display: flex; }
.pn.free .pn-notes, .pn.free .pn-melody-only { display: none; }

.pn-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.75rem; }
.pn-kicker { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #6c757d; }
.pn-title { font-size: clamp(1.4rem, 5vw, 2rem); margin: 0.1rem 0; }
.pn-about { color: #6c757d; font-size: 0.95rem; }
.pn-streak { text-align: center; background: #fff4e0; color: #8a5300; border-radius: 0.75rem; padding: 0.4rem 0.8rem; white-space: nowrap; }
.pn-streak b { font-size: 1.3rem; display: block; line-height: 1.1; }
.pn-streak span { display: block; color: #e0a100; font-size: 0.85rem; }

.pn-modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.pn-btn {
    border: 0; border-radius: 0.75rem; padding: 0.7rem 0.2rem;
    font-size: clamp(0.85rem, 3.6vw, 1.05rem); font-weight: 600; white-space: nowrap;
    background: #e9ecef; color: #212529;
}
.pn-btn.on { background: #2b6cb0; color: #fff; }

.pn-status { min-height: 3em; margin: 0.75rem 0 0.25rem; font-size: 1rem; }

.pn-notes {
    display: flex; gap: 0.75rem; overflow-x: auto; padding: 0.4rem 0.1rem 0.6rem;
    scrollbar-width: none;
}
.pn-notes::-webkit-scrollbar { display: none; }
.pn-phrase { display: flex; gap: 0.2rem; flex: none; }
.pn-chip {
    min-width: 1.9rem; padding: 0.2rem 0.3rem; text-align: center;
    border-radius: 0.4rem; background: #e9ecef; color: #495057; font-size: 0.9rem; font-weight: 600;
    transition: background 0.15s, color 0.15s;
}
.pn-chip.ok { background: #d1f2dc; color: #1e7b3c; }
.pn-chip.now { background: #2b6cb0; color: #fff; }
.pn-notes.blind .pn-chip:not(.ok) { color: transparent; }

/* Keyboard */
.pn-keyboard {
    position: relative;
    height: clamp(150px, 38vh, 280px);
    margin: 0.25rem 0 0.75rem;
    touch-action: none;
    border-radius: 0 0 0.6rem 0.6rem;
    overflow: hidden;
    border-top: 6px solid #2d2d2d;
}
.pn-key { position: absolute; top: 0; box-sizing: border-box; display: flex; align-items: flex-end; justify-content: center; }
.pn-white {
    height: 100%;
    background: linear-gradient(#f4f4f4, #fff 20%);
    border: 1px solid #bbb; border-top: 0;
    border-radius: 0 0 0.5rem 0.5rem;
    z-index: 1;
}
.pn-black {
    height: 60%;
    background: linear-gradient(#444, #111);
    border-radius: 0 0 0.35rem 0.35rem;
    z-index: 2;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
}
.pn-lab { display: none; pointer-events: none; font-weight: 600; margin-bottom: 0.6rem; font-size: 0.95rem; color: #868e96; }
.pn-black .pn-lab { font-size: 0.65rem; color: #adb5bd; margin-bottom: 0.4rem; }
.pn-keyboard.names .pn-lab { display: block; }
.pn-key.hint .pn-lab, .pn-key.lit .pn-lab { display: block; color: #fff; }

.pn-white.lit { background: linear-gradient(#ffd27a, #ffb938); }
.pn-black.lit { background: linear-gradient(#ffb938, #d98c00); }
.pn-white.hint { background: linear-gradient(#9cc7f5, #5a9de6); }
.pn-black.hint { background: linear-gradient(#5a9de6, #2b6cb0); }
.pn-white.scale { background: linear-gradient(#e3f4e8, #c4ebd0); }
.pn-black.scale { background: linear-gradient(#3d7a52, #24573a); }
.pn-white.tonic { background: linear-gradient(#bfe8cb, #8fd6a6); }
.pn-black.tonic { background: linear-gradient(#2f9c58, #1e7b3c); }
.pn-key.scale .pn-lab { color: #1e7b3c; }
.pn-black.scale .pn-lab { color: #d1f2dc; }
.pn-white.down { background: #dde3ea; }
.pn-black.down { background: #555; }
.pn-key.bad { animation: pn-bad 0.35s; }
@keyframes pn-bad { 0%, 60% { background: #f28b82; } }

.pn-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.pn-small { border: 1px solid #ced4da; background: #fff; border-radius: 0.5rem; padding: 0.35rem 0.8rem; }
.pn-check { display: flex; align-items: center; gap: 0.35rem; color: #495057; }

.pn-more { margin-bottom: 1rem; }

/* Free play */
.pn-octave { align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0.25rem 0 0.4rem; }
.pn-octave span { font-weight: 600; color: #495057; }
.pn-small:disabled { opacity: 0.4; }
.pn-fifths { flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; margin-bottom: 1.25rem; }
#pn-circle { width: min(100%, 340px); touch-action: manipulation; flex: none; margin: 0 auto; }
.pn-seg { cursor: pointer; }
.pn-seg path { fill: #e9ecef; stroke: #fff; stroke-width: 1.2; transition: fill 0.15s; }
.pn-seg.minor path { fill: #dee2e6; }
.pn-seg text, .pn-center text { text-anchor: middle; dominant-baseline: central; font-weight: 600; pointer-events: none; }
.pn-seg text { font-size: 11px; fill: #343a40; }
.pn-seg.minor text { font-size: 8.5px; fill: #495057; }
.pn-seg.near path { fill: #c4ebd0; }
.pn-seg.on path { fill: #1e7b3c; }
.pn-seg.on text { fill: #fff; }
.pn-center circle { fill: #fff; }
.pn-center text { font-size: 13px; fill: #6c757d; }
.pn-key-info { flex: 1 1 16rem; color: #495057; font-size: 0.95rem; line-height: 1.6; }
.pn-scale { font-weight: 600; color: #1e7b3c; letter-spacing: 0.05em; }
.pn-more summary { font-weight: 600; cursor: pointer; padding: 0.3rem 0; }
.pn-list { padding-left: 1.6rem; margin-top: 0.4rem; columns: 2 16rem; }
.pn-list li { padding: 0.15rem 0; break-inside: avoid; }
.pn-list button { border: 0; background: none; padding: 0; color: #2b6cb0; text-align: left; }
.pn-list button.on { font-weight: 700; color: #212529; }
.pn-tag { margin-left: 0.4rem; font-size: 0.75rem; background: #fff4e0; color: #8a5300; border-radius: 0.3rem; padding: 0 0.3rem; }
.pn-help { color: #6c757d; font-size: 0.9rem; }

/* Landscape phones: title and modes share a row, the keys get the height */
@media (orientation: landscape) and (max-height: 500px) {
    .pn { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; max-width: none; }
    .pn > :not(.pn-head):not(.pn-modes) { grid-column: 1 / -1; }
    .pn-head { margin: 0; }
    .pn-kicker, .pn-about, .pn-streak span, .pn-help { display: none; }
    .pn-title { font-size: 1.15rem; margin: 0; }
    .pn-streak { padding: 0.2rem 0.6rem; }
    .pn-streak b { font-size: 1rem; }
    .pn-btn { padding: 0.45rem; font-size: 0.95rem; }
    .pn-status { min-height: 1.5em; margin: 0.3rem 0 0; font-size: 0.95rem; }
    .pn-notes { padding: 0.2rem 0.1rem 0.3rem; }
    .pn-keyboard { height: max(140px, calc(100vh - 210px)); }
}