/* ============================================================
   pro-xylophone.css
   Pro Virtual Xylophone — 17 bars, colorful, mobile-ready
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

:root {
    --bg:     #0f0f14;
    --surf:   #18181f;
    --card:   #202028;
    --card2:  #28283a;
    --bdr:    #32324a;
    --accent: #f7c948;
    --green:  #2ed573;
    --red:    #ff4757;
    --blue:   #1e90ff;
    --purple: #9c88ff;
    --txt:    #e8e8f5;
    --muted:  #6060a0;
}

/* ═══ WRAP ═══ */
.xy-wrap {
    background: var(--bg);
    border-radius: 16px;
    overflow: hidden;
    max-width: 1100px;
    margin: 0 auto;
    box-shadow: 0 0 0 1px var(--bdr), 0 16px 60px rgba(0,0,0,.6);
    position: relative;
}

/* ═══ HEADER ═══ */
.xy-header {
    background: var(--surf);
    border-bottom: 1px solid var(--bdr);
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    flex-wrap: nowrap;
}
.xy-logo {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}
.xy-logo-icon { font-size: 1.4rem; line-height: 1; }
.xy-logo-text {
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    white-space: nowrap;
}
.xy-logo-text b { color: var(--accent); }

/* Tabs */
.xy-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 10px;
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
    -webkit-tap-highlight-color: transparent;
    min-height: 34px;
}
.tab-btn.active { background: var(--accent); color: #000; border-color: var(--accent); }
.tab-btn:not(.active):hover { border-color: var(--accent); color: var(--accent); }

/* ═══ TOOLBAR ═══ */
.xy-toolbar {
    background: var(--surf);
    border-bottom: 1px solid var(--bdr);
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
}
.xy-toolbar::-webkit-scrollbar { display: none; }
.xy-ctrl { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; white-space: nowrap; }
.xy-ctrl label { font-size: .7rem; color: var(--muted); }
.xy-ctrl input[type="range"] { width: 80px; accent-color: var(--accent); min-height: 34px; }
.xy-ctrl select, .xy-ctrl input[type="number"] {
    background: var(--card); color: var(--txt); border: 1px solid var(--bdr);
    border-radius: 6px; padding: 5px 8px; font-size: .76rem; outline: none;
    min-height: 34px; cursor: pointer;
}
#volNum { font-size: .76rem; color: var(--accent); font-weight: 700; min-width: 32px; }
.xy-sep { width: 1px; height: 22px; background: var(--bdr); flex-shrink: 0; }

/* ═══ TAB PANES ═══ */
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ═══ STAGE — xylophone bars area ═══ */
.xy-stage {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 20px 12px 16px;
    position: relative;
    overflow: hidden;
    min-height: 280px;
}
.xy-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(247,201,72,.06) 0%, transparent 70%);
    pointer-events: none;
}

/* Frame rails */
.xy-frame {
    position: relative;
    padding: 12px 8px 8px;
    background: rgba(0,0,0,.25);
    border-radius: 12px;
    border: 2px solid rgba(247,201,72,.15);
    box-shadow: inset 0 2px 10px rgba(0,0,0,.4);
}

/* Sharp bars row */
.xy-sharps {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 6px;
    margin-bottom: 6px;
    padding: 0 4px;
}

/* Natural bars row */
.xy-naturals {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 6px;
}

/* ═══ BAR STYLES ═══ */
.xy-bar {
    position: relative;
    border-radius: 8px 8px 6px 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px 6px;
    border: 2px solid rgba(255,255,255,.2);
    box-shadow: 0 6px 20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.3);
    transition: transform .1s, box-shadow .1s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}
.xy-bar:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 12px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4);
}
.xy-bar:active { transform: scale(0.95); }
.xy-bar.hit {
    animation: xyHit .3s ease;
}
@keyframes xyHit {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.12) translateY(-8px); box-shadow: 0 20px 40px rgba(255,255,255,.3); }
    100% { transform: scale(1); }
}
.xy-bar.glow-next {
    animation: glowPulse .6s ease infinite alternate;
    border-color: #fff !important;
    box-shadow: 0 0 24px rgba(255,255,255,.7), 0 8px 20px rgba(0,0,0,.4) !important;
}
@keyframes glowPulse {
    from { transform: translateY(0); }
    to   { transform: translateY(-6px) scale(1.06); }
}

/* Natural bar */
.nat-bar {
    width: 54px;
}

/* Sharp bar — narrower */
.sharp-bar {
    width: 36px;
    opacity: .95;
}

/* Bar label */
.xy-label {
    color: rgba(255,255,255,.95);
    font-weight: 900;
    font-size: .9rem;
    text-shadow: 0 2px 4px rgba(0,0,0,.5);
    line-height: 1;
    text-align: center;
}
.sharp-label { font-size: .7rem; }

/* Keyboard key badge */
.xy-key {
    background: rgba(0,0,0,.5);
    color: rgba(255,255,255,.8);
    font-size: .65rem;
    font-weight: 700;
    border-radius: 4px;
    padding: 1px 4px;
    border: 1px solid rgba(255,255,255,.25);
    line-height: 1.4;
    min-width: 18px;
    text-align: center;
}

/* ═══ INFO BAR below stage ═══ */
.xy-info-bar {
    background: var(--card);
    border-top: 1px solid var(--bdr);
    padding: 6px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .72rem;
    color: var(--muted);
}
.xy-now-playing { color: var(--accent); font-weight: 700; font-size: .8rem; }
.xy-hint-keys b { color: #9090c0; }

/* ═══ SONGS TAB ═══ */
.songs-pane { padding: 12px 14px; }
.songs-filters {
    display: flex;
    gap: 5px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 10px;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
}
.songs-filters::-webkit-scrollbar { display: none; }
.cat-btn {
    background: var(--card); color: var(--muted); border: 1px solid var(--bdr);
    border-radius: 20px; padding: 4px 12px; font-size: .73rem; font-weight: 600;
    cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: all .14s;
    -webkit-tap-highlight-color: transparent; min-height: 32px;
}
.cat-btn.active { background: var(--accent); color: #000; border-color: var(--accent); }
.songs-speed { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; color: var(--muted); margin-left: auto; flex-shrink: 0; }
.songs-speed select { background: var(--card); color: var(--txt); border: 1px solid var(--bdr); border-radius: 5px; padding: 3px 6px; font-size: .72rem; outline: none; }
.songs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px,1fr));
    gap: 7px;
    margin-bottom: 10px;
}
.song-btn {
    background: var(--card); border: 1px solid var(--bdr); border-radius: 9px;
    padding: 9px 8px; text-align: center; cursor: pointer; transition: all .15s;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    -webkit-tap-highlight-color: transparent;
}
.song-btn:hover, .song-btn.playing { border-color: var(--accent); background: rgba(247,201,72,.07); }
.s-icon { font-size: 1.3rem; line-height: 1; }
.s-name { font-size: .73rem; font-weight: 600; color: var(--txt); line-height: 1.3; }
.s-cat  { font-size: .6rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.songs-now { background: var(--card); border: 1px solid var(--bdr); border-radius: 8px; padding: 8px 12px; display: flex; align-items: center; gap: 10px; }
.now-txt { font-size: .82rem; font-weight: 700; color: var(--accent); }

/* ═══ LEARN TAB ═══ */
.learn-pane { padding: 12px 14px; }
.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: 220px; }
.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.1rem; font-weight: 800; color: var(--accent); 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; }

/* ═══ RECORD TAB ═══ */
.rec-pane { padding: 12px 14px; }
.rec-status { 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.active { background: var(--red); box-shadow: 0 0 8px rgba(255,71,87,.6); animation: blink 1s infinite; }
@keyframes blink { 0%,100%{opacity:1}50%{opacity:.2} }
#recStatusTxt { font-size: .8rem; color: var(--txt); }
#recTimer { margin-left: auto; font-size: .9rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.rec-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; }
.rec-info { font-size: .72rem; color: var(--muted); text-align: center; margin: 0; }

/* ═══ BUTTONS ═══ */
.xy-btn {
    background: var(--card2); color: var(--txt); border: 1px solid var(--bdr);
    border-radius: 7px; padding: 6px 13px; font-size: .76rem; font-weight: 600;
    cursor: pointer; transition: all .15s; white-space: nowrap; min-height: 34px;
    -webkit-tap-highlight-color: transparent;
}
.xy-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.xy-btn:disabled { opacity: .35; cursor: not-allowed; }
.xy-btn.green { background: rgba(46,213,115,.1); color: var(--green); border-color: var(--green); }
.xy-btn.green:hover:not(:disabled) { background: var(--green); color: #000; }
.xy-btn.red   { background: rgba(255,71,87,.1); color: var(--red); border-color: var(--red); }
.xy-btn.red:hover:not(:disabled)   { background: var(--red); color: #fff; }
.xy-btn.blue  { background: rgba(30,144,255,.1); color: var(--blue); border-color: var(--blue); }
.xy-btn.blue:hover:not(:disabled)  { background: var(--blue); color: #fff; }

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

/* ═══ RESPONSIVE ═══ */
@media (max-width: 600px) {
    .xy-logo-text { display: none; }
    .tab-btn { padding: 5px 8px; font-size: .68rem; }
    .nat-bar { width: 40px; }
    .sharp-bar { width: 26px; }
    .xy-label { font-size: .75rem; }
    .sharp-label { font-size: .6rem; }
    .xy-key { font-size: .55rem; }
    .songs-grid { grid-template-columns: repeat(2,1fr); }
    .learn-stats { grid-template-columns: repeat(2,1fr); }
    .xy-stage { padding: 14px 6px 10px; min-height: 220px; }
    .xy-naturals { gap: 4px; }
    .xy-sharps  { gap: 4px; }
}

@media (max-width: 400px) {
    .nat-bar { width: 32px; }
    .sharp-bar { width: 20px; }
    .xy-key { display: none; }
}

/* ══════════════════════════════════════════
   MOBILE + TABLET FIX — RESPONSIVE XYLOPHONE
   ══════════════════════════════════════════ */

/* Outer wrap — always has side padding so bars never touch edge */
.xy-wrap {
    margin: 0 12px;  /* breathing room on both sides */
}

/* Stage — horizontal scroll on small screens */
.xy-stage {
    padding: 14px 0 10px;
    overflow: hidden;
}

/* Frame — scrollable container */
.xy-frame {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(247,201,72,.4) transparent;
    padding: 12px 16px 8px;
}
.xy-frame::-webkit-scrollbar        { height: 4px; }
.xy-frame::-webkit-scrollbar-track  { background: transparent; }
.xy-frame::-webkit-scrollbar-thumb  { background: rgba(247,201,72,.4); border-radius: 4px; }

/* Naturals row — minimum width so bars never squish */
.xy-naturals {
    min-width: max-content;
    justify-content: flex-start;
    gap: 5px;
    padding: 0 4px;
}

/* Sharps row — same min width, aligned with naturals */
.xy-sharps {
    min-width: max-content;
    justify-content: flex-start;
    gap: 5px;
    padding: 0 4px;
    margin-bottom: 4px;
}

/* Natural bar — fixed width, never shrink */
.nat-bar {
    width: 52px;
    flex-shrink: 0;
}

/* Sharp bar — fixed width */
.sharp-bar {
    width: 34px;
    flex-shrink: 0;
}

/* Info bar — wrap on small screens */
.xy-info-bar {
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 14px;
}

/* Songs grid — 2 cols on phone */
@media (max-width: 500px) {
    .xy-wrap        { margin: 0 8px; }
    .songs-grid     { grid-template-columns: repeat(2, 1fr); }
    .learn-stats    { grid-template-columns: repeat(2, 1fr); }
    .nat-bar        { width: 44px; }
    .sharp-bar      { width: 28px; }
    .xy-label       { font-size: .78rem; }
    .sharp-label    { font-size: .58rem; }
    .xy-info-bar    { font-size: .62rem; }
    .xy-hint-keys   { display: none; }   /* hide long hint on tiny phone */
}

/* Tablet 600-900px */
@media (min-width: 600px) and (max-width: 900px) {
    .xy-wrap     { margin: 0 16px; }
    .nat-bar     { width: 52px; }
    .sharp-bar   { width: 34px; }
    .songs-grid  { grid-template-columns: repeat(3, 1fr); }
    .learn-stats { grid-template-columns: repeat(4, 1fr); }
}

/* Desktop 900px+ — no scroll needed, fits fine */
@media (min-width: 900px) {
    .xy-wrap  { margin: 0 auto; }
    .nat-bar  { width: 58px; }
    .sharp-bar{ width: 38px; }
    .xy-frame { overflow: visible; }   /* no scroll needed on desktop */
}