/* ============================================================
   ultimate-virtual-piano.css — MOBILE FIRST COMPLETE REWRITE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

:root {
    --bg:      #0e0e10;
    --surf:    #161618;
    --card:    #1e1e22;
    --card2:   #252528;
    --bdr:     #2e2e36;
    --bdr2:    #3a3a45;
    --orange:  #f5931f;
    --green:   #1ed97a;
    --red:     #f7516a;
    --blue:    #3ecfff;
    --purple:  #a78bfa;
    --txt:     #e0e0ec;
    --muted:   #6060a0;
    --kw-a:    #f5931f;
    --kb-a:    #c06800;
    --k-learn: #1ed97a;
    --k-chord: #a78bfa;
}
.style-classic { --kw-a:#d97800; }
.style-neon    { --orange:#00fff0; --kw-a:#00fff0; --kb-a:#00b0b0; }
.style-wood    { --bg:#150f08; --surf:#1c1408; --card:#231a0c; --bdr:#3a280e; }

/* ═══════ OUTER WRAP ═══════ */
.uvp-piano-wrap {
    background: var(--bg);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    box-shadow: 0 0 0 1px var(--bdr);
}

/* ═══════ HEADER ═══════ */
.uvp-header {
    background: var(--surf);
    border-bottom: 1px solid var(--bdr);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    height: 50px;
    overflow: hidden;
}
.uvp-logo {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    white-space: nowrap;
}
.uvp-logo-icon { font-size: 1.2rem; line-height:1; }
.uvp-logo-text {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
.uvp-logo-text b { color: var(--orange); }

/* Search — hidden on phones, show on tablet+ */
.uvp-search-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    max-width: 280px;
    display: none; /* hidden mobile */
}
.uvp-search-wrap input {
    width: 100%;
    background: var(--card);
    color: var(--txt);
    border: 1px solid var(--bdr);
    border-radius: 7px;
    padding: 6px 10px 6px 28px;
    font-size: .8rem;
    outline: none;
}
.uvp-search-wrap input:focus { border-color: var(--orange); }
.uvp-search-icon {
    position: absolute;
    left: 8px; top: 50%;
    transform: translateY(-50%);
    font-size: .72rem;
    pointer-events: none;
    color: var(--muted);
}
#searchDrop {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--card2);
    border: 1px solid var(--bdr2);
    border-radius: 10px;
    z-index: 200;
    display: none;
    max-height: 240px;
    overflow-y: auto;
}
.search-item {
    padding: 8px 12px;
    font-size: .82rem;
    color: var(--txt);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid var(--bdr);
}
.search-item:last-child { border-bottom: none; }
.search-item span { font-size: .66rem; color: var(--muted); }
.search-item:hover { background: var(--bdr); }

/* Tab buttons */
.uvp-tabs {
    display: flex;
    gap: 3px;
    margin-left: auto;
    flex-shrink: 0;
}
.tab-btn {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--bdr);
    border-radius: 6px;
    padding: 5px 9px;
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
    -webkit-tap-highlight-color: transparent;
}
.tab-btn.active {
    background: var(--orange);
    color: #fff;
    border-color: var(--orange);
}
.tab-btn:not(.active):hover { border-color: var(--orange); color: var(--orange); }

/* ═══════ TOOLBAR — scrollable row on mobile ═══════ */
.uvp-toolbar {
    background: var(--surf);
    border-bottom: 1px solid var(--bdr);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;  /* single scrollable line */
    white-space: nowrap;
}
.uvp-toolbar::-webkit-scrollbar { display: none; }

.ctrl {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.ctrl-label { font-size: .68rem; color: var(--muted); }

.ctrl select,
.ctrl input[type="number"] {
    background: var(--card);
    color: var(--txt);
    border: 1px solid var(--bdr);
    border-radius: 6px;
    padding: 4px 6px;
    font-size: .75rem;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
}
.ctrl select { padding-right: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236060a0'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center; }
.ctrl input[type="number"] { width: 48px; text-align: center; }
.ctrl input[type="range"] { width: 72px; accent-color: var(--orange); cursor: pointer; }

.oct-btns { display: inline-flex; align-items: center; gap: 3px; }
.oct-btns button {
    background: var(--card);
    color: var(--txt);
    border: 1px solid var(--bdr);
    border-radius: 5px;
    width: 24px; height: 24px;
    font-size: .7rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}
.oct-btns button:hover { border-color: var(--orange); color: var(--orange); }
#octNum {
    font-size: .88rem;
    font-weight: 800;
    color: var(--orange);
    min-width: 16px;
    text-align: center;
}

.tog-btn {
    background: var(--card);
    color: var(--muted);
    border: 1px solid var(--bdr);
    border-radius: 6px;
    padding: 4px 9px;
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}
.tog-btn.on { background: var(--orange); color: #fff; border-color: var(--orange); }
.tog-btn:not(.on):hover { border-color: var(--orange); color: var(--orange); }

.ctrl-sep { width: 1px; height: 20px; background: var(--bdr); flex-shrink: 0; }

/* ═══════ TAB PANELS ═══════ */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Play panel */
.play-bar {
    background: var(--card);
    border-bottom: 1px solid var(--bdr);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
}
.play-hint { font-size: .72rem; color: var(--muted); line-height: 1.5; }
.play-hint b { color: #9090c0; }
.playing-label { font-size: .78rem; color: var(--muted); }
.playing-label span { font-size: 1rem; font-weight: 800; color: var(--orange); }

/* Sheets */
#tab-sheets { padding: 10px 12px; }
.sheet-filters {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 10px;
    padding-bottom: 2px;
}
.sheet-filters::-webkit-scrollbar { display: none; }
.filter-btn {
    background: var(--card);
    color: var(--muted);
    border: 1px solid var(--bdr);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: .74rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .14s;
    white-space: nowrap;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.filter-btn.active { background: var(--orange); color: #fff; border-color: var(--orange); }
.sheet-speed { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; color: var(--muted); margin-left: auto; flex-shrink: 0; }
.sheet-speed select { background: var(--card); color: var(--txt); border: 1px solid var(--bdr); border-radius: 5px; padding: 3px 5px; font-size: .72rem; outline: none; }
.sheets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 7px;
    margin-bottom: 10px;
}
.song-card {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 9px;
    padding: 9px 8px;
    text-align: center;
    cursor: pointer;
    transition: all .16s;
    -webkit-tap-highlight-color: transparent;
}
.song-card:hover, .song-card.active { border-color: var(--orange); background: rgba(245,147,31,.07); }
.song-icon { font-size: 1.4rem; margin-bottom: 4px; line-height: 1; }
.song-name { font-size: .73rem; font-weight: 600; color: var(--txt); line-height: 1.3; }
.song-cat  { font-size: .6rem; color: var(--muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; }
#sheetInfo { background: var(--card); border: 1px solid var(--bdr); border-radius: 9px; padding: 9px 12px; display: flex; align-items: center; gap: 10px; }
.sheet-now { font-size: .82rem; font-weight: 700; color: var(--orange); white-space: nowrap; }
.sheet-prog-wrap { flex: 1; height: 4px; background: var(--bdr); border-radius: 4px; overflow: hidden; min-width: 40px; }
.sheet-prog-bar { height: 100%; background: var(--orange); border-radius: 4px; width: 0%; transition: width .3s; }

/* Learn */
#tab-learn { padding: 10px 12px; }
.learn-top { margin-bottom: 10px; }
.learn-top h3 { font-size: .92rem; color: var(--txt); margin: 0 0 3px; }
.learn-top p  { font-size: .76rem; color: var(--muted); margin: 0; }
.learn-controls { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
.learn-controls label { font-size: .76rem; color: var(--muted); }
.learn-controls select { background: var(--card); color: var(--txt); border: 1px solid var(--bdr); border-radius: 7px; padding: 6px 8px; font-size: .78rem; outline: none; flex: 1; min-width: 0; max-width: 200px; }
.learn-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.lstat { background: var(--card); border: 1px solid var(--bdr); border-radius: 8px; padding: 8px 6px; text-align: center; }
.lstat-val { font-size: 1.15rem; font-weight: 800; color: var(--orange); line-height: 1; }
.lstat-lbl { font-size: .58rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
#learnHint { background: var(--card); border: 1px solid var(--bdr); border-radius: 8px; padding: 9px 12px; font-size: .78rem; color: var(--muted); text-align: center; }

/* Chords */
#tab-chords { padding: 10px 12px; }
.chords-top { margin-bottom: 10px; }
.chords-top h3 { font-size: .92rem; color: var(--txt); margin: 0 0 3px; }
.chords-top p  { font-size: .76rem; color: var(--muted); margin: 0; }
.chord-row { margin-bottom: 8px; }
.chord-row-label { font-size: .64rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 5px; }
.chord-btns-wrap { display: flex; flex-wrap: wrap; gap: 4px; }
.chord-btn {
    background: var(--card); color: var(--txt); border: 1px solid var(--bdr);
    border-radius: 6px; padding: 4px 9px; font-size: .73rem; font-weight: 600;
    cursor: pointer; transition: all .14s; -webkit-tap-highlight-color: transparent;
}
.chord-btn.active { background: var(--purple); color: #fff; border-color: var(--purple); }
.chord-result { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--bdr); border-radius: 9px; padding: 9px 12px; margin-top: 8px; }
#chordName { font-size: .95rem; font-weight: 800; color: var(--orange); min-width: 90px; }
.chord-pills { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.chord-pill { background: rgba(167,139,250,.12); border: 1px solid var(--purple); color: var(--purple); border-radius: 20px; padding: 2px 8px; font-size: .72rem; font-weight: 600; }

/* Record */
#tab-record { padding: 10px 12px; }
.rec-status-row { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--bdr); border-radius: 9px; padding: 9px 12px; margin-bottom: 9px; }
#recDot { width: 11px; height: 11px; border-radius: 50%; background: var(--bdr); flex-shrink: 0; transition: all .3s; }
#recDot.blink { background: var(--red); box-shadow: 0 0 8px rgba(247,81,106,.6); animation: blink 1s infinite; }
@keyframes blink { 0%,100%{opacity:1}50%{opacity:.25} }
#recStatus { font-size: .8rem; color: var(--txt); }
#recTimer  { margin-left: auto; font-size: .9rem; font-weight: 700; color: var(--orange); font-variant-numeric: tabular-nums; }
.rec-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; }
.rec-wave { background: var(--card); border: 1px solid var(--bdr); border-radius: 9px; height: 56px; padding: 5px; margin-bottom: 9px; }
.rec-wave canvas { width: 100%; height: 100%; }
.rec-info { font-size: .72rem; color: var(--muted); text-align: center; margin: 0; }

/* Buttons */
.uvp-btn {
    background: var(--card2); color: var(--txt); border: 1px solid var(--bdr);
    border-radius: 7px; padding: 6px 12px; font-size: .76rem; font-weight: 600;
    cursor: pointer; transition: all .15s; white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.uvp-btn:hover:not(:disabled) { border-color: var(--orange); color: var(--orange); }
.uvp-btn:disabled { opacity: .35; cursor: not-allowed; }
.uvp-btn.green { background: rgba(30,217,122,.08); color: var(--green); border-color: var(--green); }
.uvp-btn.green:hover:not(:disabled) { background: var(--green); color: #000; }
.uvp-btn.red { background: rgba(247,81,106,.08); color: var(--red); border-color: var(--red); }
.uvp-btn.red:hover:not(:disabled) { background: var(--red); color: #fff; }
.uvp-btn.blue { background: rgba(62,207,255,.08); color: var(--blue); border-color: var(--blue); }
.uvp-btn.blue:hover:not(:disabled) { background: var(--blue); color: #000; }


/* ═══════════════════════════════════════════════════
   PIANO KEYBOARD — virtualpiano.net exact
   36 white (34px×170px) + 25 black (21px×108px)
   Desktop: scale-to-fit | Mobile/Tablet: scroll
   ═══════════════════════════════════════════════════ */

.uvp-keyboard-section {
    background: #0a0a0c;
    padding: 14px 0 0;
    position: relative;
}

/* Scroll container */
.uvp-keys-outer {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #f5931f #1a1a24;
    padding-bottom: 10px;
    position: relative;
}
.uvp-keys-outer::-webkit-scrollbar       { height: 6px; }
.uvp-keys-outer::-webkit-scrollbar-track { background: #1a1a24; border-radius: 6px; }
.uvp-keys-outer::-webkit-scrollbar-thumb { background: #f5931f; border-radius: 6px; }
.uvp-keys-outer::-webkit-scrollbar-thumb:hover { background: #d97800; }

/* Keys wrapper */
#uvpKeys {
    position: relative;
    display: block;
    height: 170px;
    transform-origin: top left;
}

/* ━━━━ WHITE KEY — 34×170px ━━━━ */
.k-w {
    position: absolute;
    bottom: 0;
    width: 34px;
    height: 170px;
    background: linear-gradient(180deg, #f5f3ff 0%, #eae6f8 70%, #ddd8f5 100%);
    border-left:   1px solid #bbb;
    border-right:  1px solid #ddd;
    border-bottom: 1px solid #999;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 6px 14px rgba(0,0,0,.5),
                inset 0 -4px 8px rgba(0,0,0,.08);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 7px;
    gap: 3px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background .05s;
    z-index: 1;
}
.k-w:hover   { background: linear-gradient(180deg,#ece8ff,#ddd8f5,#ccc8ee); }
.k-w.active  { background: var(--kw-a) !important;
                box-shadow: 0 0 20px rgba(245,147,31,.55); }
.k-w.learn-glow { background: var(--k-learn) !important;
                   box-shadow: 0 0 20px rgba(30,217,122,.55); }
.k-w.chord-glow { background: var(--k-chord) !important; }

/* ━━━━ BLACK KEY — 21×108px ━━━━ */
.k-b {
    position: absolute;
    top: 0;
    width: 21px;
    height: 108px;
    background: linear-gradient(180deg, #2a2a38 0%, #16161e 55%, #0c0c12 100%);
    border-radius: 0 0 5px 5px;
    box-shadow: 2px 7px 14px rgba(0,0,0,.95),
                inset 0 -2px 5px rgba(255,255,255,.06);
    cursor: pointer;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 5px;
    gap: 2px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background .05s;
}
.k-b:hover   { background: linear-gradient(180deg,#303040,#1c1c24,#0e0e16); }
.k-b.active  { background: var(--kb-a) !important;
                box-shadow: 0 0 14px rgba(245,147,31,.4); }
.k-b.learn-glow { background: var(--k-learn) !important; }
.k-b.chord-glow { background: var(--k-chord) !important; }

/* ━━━━ KEY LABELS — virtualpiano.net style ━━━━ */

/* White key — note name small at top, keyboard letter BIG at bottom */
.k-note {
    font-size: .55rem;
    line-height: 1;
    font-weight: 600;
    color: rgba(100,90,150,.5);
    pointer-events: none;
    margin-top: auto;  /* push to top via flex */
    align-self: center;
}
.k-kb {
    font-size: .78rem;
    line-height: 1;
    font-weight: 800;
    color: rgba(80,70,130,.8);
    pointer-events: none;
    letter-spacing: -.01em;
}

/* White key flex layout: note top, kb letter bottom */
.k-w {
    justify-content: space-between;
    padding-top: 8px;
}

/* Black key labels */
.k-b .k-note {
    color: rgba(200,195,230,.45);
    font-size: .48rem;
    margin-top: 0;
    order: 2;
}
.k-b .k-kb {
    color: rgba(210,205,240,.75);
    font-size: .62rem;
    order: 1;
}
/* Black key: kb letter on top, note name below */
.k-b {
    justify-content: space-between;
    padding-top: 6px;
}

/* Active states */
.k-w.active .k-note,
.k-w.active .k-kb { color: rgba(255,255,255,.95); }
.k-b.active .k-note,
.k-b.active .k-kb  { color: rgba(255,255,255,.9); }

/* Key Assist — show all labels clearly */
#uvpKeys.key-assist .k-note      { color: rgba(70,55,130,.9); }
#uvpKeys.key-assist .k-b .k-note { color: rgba(210,200,255,.8); }
#uvpKeys.key-assist .k-kb        { color: rgba(60,45,120,.95); font-size: .82rem; }
#uvpKeys.key-assist .k-b .k-kb   { color: rgba(220,210,255,.9); }

/* Hint bar */
.uvp-kb-hint {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 5px 14px 8px;
    font-size: .68rem;
    color: var(--muted);
}
.uvp-kb-hint b { color: #9090c0; }

/* Particles */
.uvp-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

/* ━━━━ RESPONSIVE ━━━━ */

/* Phone <600px — scroll */
@media (max-width: 599px) {
    .uvp-piano-wrap  { margin: 0 6px; }
    .uvp-header      { padding: 0 8px; }
    .uvp-logo-text   { display: none; }
    .uvp-search-wrap { display: none; }
    .tab-btn         { padding: 5px 7px; font-size: .64rem; }
    .ctrl-sep        { display: none; }
    .uvp-kb-hint     { display: none; }
    .sheets-grid     { grid-template-columns: repeat(2,1fr); gap: 6px; }
    .learn-stats     { grid-template-columns: repeat(2,1fr); }
    /* Keys: same size, just scroll */
    .uvp-keys-outer  { height: 188px; }
    #uvpKeys         { height: 170px; }
}

/* Tablet 600-1023px — scroll */
@media (min-width: 600px) and (max-width: 1023px) {
    .uvp-piano-wrap  { margin: 0 10px; }
    .uvp-search-wrap { display: block; max-width: 200px; }
    .uvp-keys-outer  { height: 188px; }
    #uvpKeys         { height: 170px; }
    .sheets-grid     { grid-template-columns: repeat(3,1fr); }
    .learn-stats     { grid-template-columns: repeat(4,1fr); }
}

/* Desktop 1024px+ — scale to fit full width */
@media (min-width: 1024px) {
    .uvp-piano-wrap  { margin: 0 auto; }
    .uvp-search-wrap { display: block; }
    /* overflow hidden — JS scale handles it */
    .uvp-keys-outer  {
        overflow: hidden;
        scrollbar-width: none;
        padding-bottom: 0;
    }
    .uvp-keys-outer::-webkit-scrollbar { display: none; }
    .sheets-grid { grid-template-columns: repeat(auto-fill, minmax(148px,1fr)); }
    .learn-stats { grid-template-columns: repeat(4,1fr); }
}