/* ============================================================
   pro-virtual-piano.css
   Pro Virtual Piano — tools.dotiam.com
   ============================================================ */

/* ── Variables ── */
:root {
    --pvp-bg:       #0d0d14;
    --pvp-surface:  #13131f;
    --pvp-card:     #1a1a2e;
    --pvp-border:   #2a2a45;
    --pvp-accent:   #7c6af7;
    --pvp-accent2:  #f7516a;
    --pvp-green:    #22d47e;
    --pvp-gold:     #f5c842;
    --pvp-blue:     #3ecfff;
    --pvp-text:     #e8e8f0;
    --pvp-muted:    #7070a0;
    --key-white:    #f8f5ff;
    --key-black:    #1a1025;
    --key-active-w: #a78bfa;
    --key-active-b: #7c6af7;
    --key-tiles-w:  #22d47e;
    --key-tiles-b:  #16a85f;
    --tile-color1:  #7c6af7;
    --tile-color2:  #f7516a;
    --tile-color3:  #22d47e;
    --tile-color4:  #f5c842;
    --tile-color5:  #3ecfff;
}

/* ── Wrap ── */
.pvp-wrap {
    background: var(--pvp-bg);
    border-radius: 20px;
    padding: 0 0 32px;
    margin: 0 auto;
    max-width: 1100px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 60px rgba(124,106,247,.15);
}

.pvp-wrap::before {
    content: '';
    position: absolute;
    top: -120px; right: -120px;
    width: 350px; height: 350px;
    background: radial-gradient(circle, rgba(124,106,247,.12) 0%, transparent 70%);
    pointer-events: none;
}

/* ── Toolbar ── */
.pvp-toolbar {
    background: var(--pvp-surface);
    border-bottom: 1px solid var(--pvp-border);
    padding: 14px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
}

.pvp-modes {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mode-btn {
    background: var(--pvp-card);
    color: var(--pvp-muted);
    border: 1px solid var(--pvp-border);
    border-radius: 30px;
    padding: 7px 16px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}

.mode-btn:hover,
.mode-btn.active {
    background: var(--pvp-accent);
    color: #fff;
    border-color: var(--pvp-accent);
    box-shadow: 0 0 16px rgba(124,106,247,.4);
}

.pvp-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.ctrl-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ctrl-group label {
    color: var(--pvp-muted);
    font-size: .78rem;
    white-space: nowrap;
}

.ctrl-group select,
.ctrl-group input[type="number"] {
    background: var(--pvp-card);
    color: var(--pvp-text);
    border: 1px solid var(--pvp-border);
    border-radius: 8px;
    padding: 5px 8px;
    font-size: .8rem;
    outline: none;
}

.ctrl-group select:focus,
.ctrl-group input[type="number"]:focus {
    border-color: var(--pvp-accent);
}

.ctrl-group input[type="range"] {
    width: 80px;
    accent-color: var(--pvp-accent);
}

.ctrl-group input[type="number"] {
    width: 58px;
    text-align: center;
}

.oct-btns {
    display: flex;
    align-items: center;
    gap: 4px;
}

.oct-btns button {
    background: var(--pvp-card);
    color: var(--pvp-text);
    border: 1px solid var(--pvp-border);
    border-radius: 6px;
    width: 26px; height: 26px;
    cursor: pointer;
    font-size: .75rem;
    transition: background .15s;
}

.oct-btns button:hover { background: var(--pvp-accent); }

#octDisplay {
    color: var(--pvp-gold);
    font-weight: 700;
    font-size: .9rem;
    min-width: 18px;
    text-align: center;
}

.toggle-btn {
    background: var(--pvp-card);
    color: var(--pvp-muted);
    border: 1px solid var(--pvp-border);
    border-radius: 8px;
    padding: 5px 12px;
    font-size: .78rem;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}

.toggle-btn.active {
    background: var(--pvp-accent);
    color: #fff;
    border-color: var(--pvp-accent);
}

/* ── Buttons ── */
.pvp-btn {
    background: var(--pvp-card);
    color: var(--pvp-text);
    border: 1px solid var(--pvp-border);
    border-radius: 8px;
    padding: 7px 14px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}

.pvp-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.pvp-btn.green { background: var(--pvp-green); color: #000; border-color: var(--pvp-green); }
.pvp-btn.green:hover:not(:disabled) { box-shadow: 0 0 14px rgba(34,212,126,.5); }

.pvp-btn.red { background: var(--pvp-accent2); color: #fff; border-color: var(--pvp-accent2); }
.pvp-btn.red:hover:not(:disabled) { box-shadow: 0 0 14px rgba(247,81,106,.5); }

.pvp-btn.blue { background: var(--pvp-blue); color: #000; border-color: var(--pvp-blue); }
.pvp-btn.blue:hover:not(:disabled) { box-shadow: 0 0 14px rgba(62,207,255,.5); }

.pvp-btn.big { padding: 10px 22px; font-size: .9rem; }
.pvp-btn.small { padding: 4px 10px; font-size: .75rem; }

.pvp-btn:not(.green):not(.red):not(.blue):hover:not(:disabled) {
    background: var(--pvp-border);
}

/* ── Panels ── */
.pvp-panel {
    padding: 16px 20px;
    border-bottom: 1px solid var(--pvp-border);
}

/* Piano Tiles Panel */
.tiles-header {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.tiles-score-box {
    background: var(--pvp-card);
    border: 1px solid var(--pvp-border);
    border-radius: 10px;
    padding: 6px 16px;
    text-align: center;
    min-width: 70px;
}

.score-label {
    font-size: .7rem;
    color: var(--pvp-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.score-val {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--pvp-gold);
}

.score-val.miss { color: var(--pvp-accent2); }

.tiles-song-sel {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    flex: 1;
}

.tiles-song-sel label { color: var(--pvp-muted); font-size: .8rem; }

.tiles-song-sel select {
    background: var(--pvp-card);
    color: var(--pvp-text);
    border: 1px solid var(--pvp-border);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: .82rem;
    outline: none;
    flex: 1;
    min-width: 140px;
}

.tiles-canvas-wrap {
    position: relative;
    width: 100%;
    height: 260px;
    background: #07070f;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--pvp-border);
}

#tilesCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

.tiles-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(7,7,15,.85);
    backdrop-filter: blur(4px);
    z-index: 10;
}

.tiles-msg {
    text-align: center;
    color: var(--pvp-text);
}

.tiles-msg-icon { font-size: 2.5rem; margin-bottom: 8px; }
.tiles-msg h3 { font-size: 1.3rem; margin: 0 0 6px; }
.tiles-msg p { color: var(--pvp-muted); font-size: .85rem; margin: 4px 0; }

/* Record Panel */
.record-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rec-status {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--pvp-card);
    border: 1px solid var(--pvp-border);
    border-radius: 10px;
    padding: 10px 16px;
}

.rec-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--pvp-muted);
    transition: background .3s;
}

.rec-dot.recording {
    background: var(--pvp-accent2);
    animation: recPulse .8s ease-in-out infinite alternate;
}

@keyframes recPulse {
    from { box-shadow: 0 0 4px rgba(247,81,106,.4); }
    to   { box-shadow: 0 0 14px rgba(247,81,106,.9); }
}

#recStatusText {
    color: var(--pvp-text);
    font-weight: 600;
    font-size: .9rem;
    flex: 1;
}

.rec-time {
    color: var(--pvp-gold);
    font-weight: 700;
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}

.rec-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.rec-hint {
    color: var(--pvp-muted);
    font-size: .82rem;
    margin: 0;
}

/* Upload Panel */
.upload-panel { display: flex; flex-direction: column; gap: 14px; }

.upload-zone {
    background: var(--pvp-card);
    border: 2px dashed var(--pvp-border);
    border-radius: 14px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
}

.upload-zone:hover,
.upload-zone.dragover {
    border-color: var(--pvp-accent);
    background: rgba(124,106,247,.08);
}

.upload-zone .upload-icon { font-size: 2.5rem; }
.upload-zone p { color: var(--pvp-text); margin: 6px 0; }
.upload-zone small { color: var(--pvp-muted); font-size: .78rem; }

.upload-loaded {
    background: var(--pvp-card);
    border: 1px solid var(--pvp-border);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.upload-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.upload-fname {
    color: var(--pvp-text);
    font-weight: 600;
    font-size: .88rem;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-btns { display: flex; gap: 10px; flex-wrap: wrap; }

.upload-status {
    color: var(--pvp-muted);
    font-size: .82rem;
}

.upload-hint {
    color: var(--pvp-muted);
    font-size: .82rem;
    margin: 0;
}

/* ── Songs Section ── */
.pvp-songs {
    padding: 14px 20px;
    border-bottom: 1px solid var(--pvp-border);
}

.songs-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    color: var(--pvp-text);
    font-weight: 600;
    font-size: .9rem;
    flex-wrap: wrap;
}

.song-speed {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--pvp-muted);
    font-size: .8rem;
    font-weight: 400;
}

.song-speed select {
    background: var(--pvp-card);
    color: var(--pvp-text);
    border: 1px solid var(--pvp-border);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: .78rem;
    outline: none;
}

.songs-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.song-btn {
    background: var(--pvp-card);
    color: var(--pvp-text);
    border: 1px solid var(--pvp-border);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: .8rem;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.song-btn:hover {
    border-color: var(--pvp-accent);
    color: var(--pvp-accent);
    box-shadow: 0 0 10px rgba(124,106,247,.2);
}

.song-btn.playing {
    background: var(--pvp-accent);
    color: #fff;
    border-color: var(--pvp-accent);
    animation: songPulse 1.2s ease-in-out infinite alternate;
}

@keyframes songPulse {
    from { box-shadow: 0 0 8px rgba(124,106,247,.4); }
    to   { box-shadow: 0 0 20px rgba(124,106,247,.8); }
}

.song-category {
    color: var(--pvp-muted);
    font-size: .72rem;
    padding: 2px 10px;
    background: var(--pvp-surface);
    border-radius: 20px;
    border: 1px solid var(--pvp-border);
    cursor: default;
    pointer-events: none;
}

/* ── Piano Keyboard ── */
.pvp-keyboard-wrap {
    padding: 20px 20px 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pvp-keyboard {
    position: relative;
    display: flex;
    align-items: flex-start;
    height: 160px;
    min-width: 620px;
    margin: 0 auto;
    width: max-content;
    max-width: 100%;
}

/* White keys */
.pk-white {
    position: relative;
    width: 48px;
    height: 155px;
    background: linear-gradient(180deg, #f0ecff 0%, #fff 100%);
    border: 1px solid #bbb;
    border-radius: 0 0 8px 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 8px;
    transition: background .08s;
    user-select: none;
    -webkit-user-select: none;
    flex-shrink: 0;
    box-shadow: 0 4px 8px rgba(0,0,0,.25), inset 0 -2px 4px rgba(0,0,0,.1);
    z-index: 1;
}

.pk-white:hover {
    background: linear-gradient(180deg, #e0d8ff 0%, #f0eeff 100%);
}

.pk-white.active,
.pk-white.tiles-hit {
    background: linear-gradient(180deg, var(--key-active-w) 0%, #c4b5fd 100%);
    box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 0 20px rgba(167,139,250,.6);
    transform: translateY(2px);
}

.pk-white.tiles-hit {
    background: linear-gradient(180deg, var(--key-tiles-w) 0%, #16a85f 100%);
    box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 0 20px rgba(34,212,126,.7);
}

/* Black keys */
.pk-black {
    position: absolute;
    width: 30px;
    height: 95px;
    background: linear-gradient(180deg, #3a2060 0%, #1a1025 100%);
    border-radius: 0 0 6px 6px;
    cursor: pointer;
    z-index: 2;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 6px;
    transition: background .08s;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: 0 4px 10px rgba(0,0,0,.6), inset 0 -2px 3px rgba(0,0,0,.5);
}

.pk-black:hover {
    background: linear-gradient(180deg, #5a3880 0%, #2a1840 100%);
}

.pk-black.active,
.pk-black.tiles-hit {
    background: linear-gradient(180deg, var(--key-active-b) 0%, #5b21b6 100%);
    box-shadow: 0 2px 6px rgba(0,0,0,.5), 0 0 16px rgba(124,106,247,.8);
    transform: translateY(2px);
}

.pk-black.tiles-hit {
    background: linear-gradient(180deg, var(--key-tiles-b) 0%, #0d6d40 100%);
    box-shadow: 0 2px 6px rgba(0,0,0,.5), 0 0 16px rgba(34,212,126,.8);
}

/* Key labels */
.pk-note {
    font-size: .65rem;
    font-weight: 700;
    color: #9980fa;
    line-height: 1;
}

.pk-white .pk-note { color: #7c6af7; }
.pk-black .pk-note { color: #a78bfa; }

.pk-key {
    font-size: .6rem;
    color: #aaa;
    line-height: 1;
    margin-top: 2px;
}

.pk-black .pk-key { color: #888; }

/* Key hint bar */
.pvp-key-hint {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    padding: 10px 0 4px;
    color: var(--pvp-muted);
    font-size: .75rem;
}

/* ── Particles Canvas ── */
.particle-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9999;
}

/* ── Metronome flash ── */
.pvp-wrap.metro-beat::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(124,106,247,.04);
    pointer-events: none;
    animation: metroBeat .1s ease-out;
}

@keyframes metroBeat {
    0% { background: rgba(124,106,247,.1); }
    100% { background: transparent; }
}

/* ── Scrollbar ── */
.pvp-keyboard-wrap::-webkit-scrollbar { height: 4px; }
.pvp-keyboard-wrap::-webkit-scrollbar-track { background: var(--pvp-surface); }
.pvp-keyboard-wrap::-webkit-scrollbar-thumb { background: var(--pvp-border); border-radius: 2px; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .pvp-toolbar {
        padding: 10px 14px;
        gap: 10px;
    }

    .mode-btn {
        padding: 6px 12px;
        font-size: .78rem;
    }

    .pvp-controls {
        gap: 8px;
        width: 100%;
    }

    .ctrl-group input[type="range"] {
        width: 60px;
    }

    .pvp-panel,
    .pvp-songs {
        padding: 12px 14px;
    }

    .pvp-keyboard-wrap {
        padding: 14px 10px 8px;
    }

    .pvp-keyboard {
        min-width: 520px;
        height: 130px;
    }

    .pk-white {
        width: 38px;
        height: 125px;
    }

    .pk-black {
        width: 24px;
        height: 78px;
    }

    .pk-note { font-size: .58rem; }
    .pk-key { font-size: .55rem; }

    .tiles-canvas-wrap { height: 200px; }

    .songs-grid { gap: 6px; }

    .song-btn {
        font-size: .75rem;
        padding: 5px 11px;
    }

    .pvp-key-hint {
        font-size: .7rem;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .pvp-keyboard {
        min-width: 440px;
        height: 115px;
    }

    .pk-white {
        width: 32px;
        height: 110px;
        padding-bottom: 5px;
    }

    .pk-black {
        width: 20px;
        height: 68px;
    }

    .tiles-header { gap: 8px; }
    .tiles-canvas-wrap { height: 170px; }

    .tiles-song-sel select { min-width: 110px; }

    .rec-btns { gap: 8px; }
    .pvp-btn.big { padding: 8px 16px; font-size: .82rem; }

    .tiles-score-box { padding: 5px 10px; min-width: 58px; }
    .score-val { font-size: 1.2rem; }
}

@media (max-width: 360px) {
    .pvp-keyboard {
        min-width: 380px;
        height: 105px;
    }

    .pk-white { width: 28px; height: 100px; }
    .pk-black { width: 18px; height: 62px; }
}

/* Touch devices — bigger hit area */
@media (hover: none) and (pointer: coarse) {
    .pk-white { height: 140px; }
    .pk-black { height: 88px; }

    .song-btn {
        padding: 8px 16px;
        font-size: .84rem;
    }
}