/* ============================================================
   steel-tongue-drum.css — Real Steel Tongue Drum Look
   Dark brushed steel body, glowing tongues, teal/cyan theme
   tools.dotiam.com
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

:root {
    --bg:       #060a0e;
    --surf:     #0a1018;
    --card:     #0e1620;
    --card2:    #121e28;
    --bdr:      #1e3040;
    --bdr2:     #2a4458;
    --accent:   #6ee7f7;
    --accent2:  #38bcd4;
    --steel:    #8aacbc;
    --steel2:   #4a7088;
    --drum-dark:#0c1620;
    --drum-mid: #14232e;
    --drum-rim: #2a4050;
    --tongue:   #1e3a4a;
    --tongue2:  #163040;
    --glow:     rgba(110,231,247,.55);
    --txt:      #d4eef8;
    --muted:    #486878;
    --green:    #34d399;
    --red:      #f87171;
    --blue:     #60a5fa;
}

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

/* ═══════ HEADER ═══════ */
.std-header {
    background: linear-gradient(135deg, var(--surf) 0%, var(--bg) 100%);
    border-bottom: 2px solid var(--accent2);
    padding: 0 16px;
    display: flex; align-items: center; gap: 10px;
    height: 54px;
    border-radius: 16px 16px 0 0;
}
.std-logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.std-logo-icon { font-size: 1.5rem; }
.std-logo-text {
    font-size: .72rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .12em; color: var(--muted);
}
.std-logo-text b { color: var(--accent); }

.std-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 11px; 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: #040810; border-color: var(--accent); }
.tab-btn:not(.active):hover { border-color: var(--accent); color: var(--accent); }

/* ═══════ TOOLBAR ═══════ */
.std-toolbar {
    background: var(--surf); border-bottom: 1px solid var(--bdr);
    padding: 6px 14px; display: flex; align-items: center;
    gap: 10px; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.std-toolbar::-webkit-scrollbar { display: none; }

.s-ctrl { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
.s-ctrl label { font-size: .7rem; color: var(--muted); }
.s-ctrl input[type="range"] { width: 80px; accent-color: var(--accent); }
.s-ctrl select {
    background: var(--card); color: var(--txt);
    border: 1px solid var(--bdr); border-radius: 6px;
    padding: 4px 7px; font-size: .72rem; outline: none;
}
#volNum { font-size: .78rem; color: var(--accent); font-weight: 700; }
.s-sep { width: 1px; height: 20px; background: var(--bdr); flex-shrink: 0; }
.active-note-display {
    margin-left: auto; font-size: .9rem; font-weight: 800;
    color: var(--accent); flex-shrink: 0; min-width: 44px;
    text-align: center;
}

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

/* ═══════ SCALES TAB ═══════ */
.scale-pane { padding: 14px; }
.scale-top { margin-bottom: 12px; }
.scale-top h3 { font-size: .95rem; color: var(--txt); margin: 0 0 3px; }
.scale-top p  { font-size: .76rem; color: var(--muted); margin: 0; }
.std-scale-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 8px;
}
.std-scale-btn {
    background: var(--card); border: 1px solid var(--bdr); border-radius: 10px;
    padding: 10px 12px; cursor: pointer; transition: all .16s; text-align: left;
    display: flex; flex-direction: column; gap: 2px;
    -webkit-tap-highlight-color: transparent;
}
.std-scale-btn:hover  { border-color: var(--accent); background: var(--card2); }
.std-scale-btn.active {
    border-color: var(--accent); background: rgba(110,231,247,.07);
    box-shadow: 0 0 18px rgba(110,231,247,.18);
}
.std-scale-icon  { font-size: 1.3rem; line-height: 1; }
.std-scale-name  { font-size: .8rem; font-weight: 700; color: var(--txt); }
.std-scale-style { font-size: .64rem; color: var(--accent); }
.std-scale-desc  { font-size: .64rem; color: var(--muted); }

/* ═══════ PATTERNS TAB ═══════ */
.pattern-pane { padding: 14px; }
.pattern-top { margin-bottom: 12px; }
.pattern-top h3 { font-size: .95rem; color: var(--txt); margin: 0 0 3px; }
.pattern-top p  { font-size: .76rem; color: var(--muted); margin: 0; }
.pattern-controls {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap; margin-bottom: 12px;
}
.pattern-controls label { font-size: .76rem; color: var(--muted); }
.pattern-controls select {
    background: var(--card); color: var(--txt);
    border: 1px solid var(--bdr); border-radius: 7px;
    padding: 5px 8px; font-size: .78rem; outline: none;
}
.pattern-now { font-size: .82rem; color: var(--accent); font-weight: 700; margin-left: auto; }
.std-pattern-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 8px;
}
.std-pattern-btn {
    background: var(--card); border: 1px solid var(--bdr); border-radius: 10px;
    padding: 10px 12px; cursor: pointer; transition: all .16s; text-align: left;
    display: flex; flex-direction: column; gap: 2px;
    -webkit-tap-highlight-color: transparent;
}
.std-pattern-btn:hover  { border-color: var(--accent); background: var(--card2); }
.std-pattern-btn.active {
    border-color: var(--accent); background: rgba(110,231,247,.07);
    box-shadow: 0 0 18px rgba(110,231,247,.18);
}
.std-pattern-icon  { font-size: 1.3rem; line-height: 1; }
.std-pattern-name  { font-size: .8rem; font-weight: 700; color: var(--txt); }
.std-pattern-style { font-size: .64rem; color: var(--accent); }
.std-pattern-desc  { font-size: .64rem; color: var(--muted); }

/* ═══════ RECORD TAB ═══════ */
.rec-pane { padding: 14px; }
.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(248,113,113,.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 ═══════ */
.s-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;
}
.s-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.s-btn:disabled { opacity: .35; cursor: not-allowed; }
.s-btn.green { background: rgba(52,211,153,.1); color: var(--green); border-color: var(--green); }
.s-btn.green:hover:not(:disabled) { background: var(--green); color: #fff; }
.s-btn.red   { background: rgba(248,113,113,.1); color: var(--red); border-color: var(--red); }
.s-btn.red:hover:not(:disabled)   { background: var(--red); color: #fff; }
.s-btn.blue  { background: rgba(96,165,250,.1); color: var(--blue); border-color: var(--blue); }
.s-btn.blue:hover:not(:disabled)  { background: var(--blue); color: #fff; }

/* ═══════ DRUM BODY ═══════ */
.std-body {
    position: relative;
    background:
        radial-gradient(ellipse at 40% 35%, #1a2e3e 0%, #0c1824 40%, #060e14 100%);
    padding: 28px 16px 24px;
    display: flex; flex-direction: column; align-items: center;
    overflow: visible; /* NEVER hidden — SVG tongues must not clip */
}

/* Subtle steel texture overlay */
.std-body::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-conic-gradient(
        rgba(110,231,247,.012) 0deg,
        transparent 1deg,
        transparent 5deg
    );
    pointer-events: none;
}

/* Drum body wrapper (for particle canvas positioning) */
.std-body-wrap {
    position: relative;
    width: 100%;
    max-width: 420px;
    overflow: visible;
}

/* ═══════ SVG DRUM STYLES ═══════ */
.std-svg {
    overflow: visible; /* tongues near edges must not be clipped */
}

/* Outer drum rim */
.std-body circle.std-body {
    fill: #0a1820;
    stroke: var(--drum-rim);
    stroke-width: 6;
    filter: drop-shadow(0 4px 24px rgba(0,0,0,.8));
}

/* SVG internal classes via CSS */
.std-svg .std-body {
    fill: #0c1c28;
    stroke: #2a4458;
    stroke-width: 5;
}
.std-svg .std-inner {
    fill: #0e2030;
    stroke: #1e3848;
    stroke-width: 1.5;
}
.std-svg .std-ring {
    fill: #0a1820;
    stroke: var(--accent2);
    stroke-width: 1.5;
    filter: drop-shadow(0 0 6px rgba(110,231,247,.3));
}

/* ═══════ TONGUE STYLES ═══════ */
.std-tongue-shadow {
    fill: #040c14;
    rx: 50%;
}
.std-tongue {
    fill: var(--tongue);
    stroke: var(--steel2);
    stroke-width: 1;
    transition: fill .06s, filter .08s, transform .05s;
    cursor: pointer;
}
.std-tongue-group:hover .std-tongue {
    fill: #224058;
    stroke: var(--accent);
    filter: drop-shadow(0 0 8px rgba(110,231,247,.4));
}
.std-tongue-group:active .std-tongue,
.std-tongue.struck {
    fill: #2a5068 !important;
    stroke: var(--accent) !important;
    filter: drop-shadow(0 0 18px var(--glow)) !important;
    animation: tongueStrike .55s ease !important;
}
@keyframes tongueStrike {
    0%   { fill: #4a90b8; filter: drop-shadow(0 0 24px rgba(110,231,247,.9)); }
    40%  { fill: #2a6080; filter: drop-shadow(0 0 16px rgba(110,231,247,.6)); }
    100% { fill: var(--tongue); filter: drop-shadow(0 0 0px transparent); }
}

/* Metallic shine line on each tongue */
.std-tongue-shine {
    fill: rgba(180,230,255,.06);
    rx: 4;
    pointer-events: none;
}

/* Tongue labels */
.std-tongue-label {
    font-size: 11px;
    font-weight: 700;
    fill: rgba(110,231,247,.8);
    font-family: inherit;
    pointer-events: none;
    letter-spacing: -.3px;
}
.std-tongue-group:hover .std-tongue-label {
    fill: var(--accent);
}
.std-key-hint {
    font-size: 8px;
    font-weight: 600;
    fill: rgba(110,231,247,.35);
    font-family: inherit;
    pointer-events: none;
}

/* Brand mark in center */
.std-brand {
    font-size: 14px;
    fill: rgba(110,231,247,.3);
    font-family: inherit;
    pointer-events: none;
}

/* ═══════ PARTICLES (ripple canvas) ═══════ */
.std-particles {
    position: absolute; inset: 0;
    pointer-events: none; z-index: 10;
}

/* ═══════ SCALE DISPLAY (below drum) ═══════ */
.std-scale-display {
    margin-top: 14px;
    display: flex; align-items: center; gap: 8px;
    font-size: .74rem; color: var(--muted);
    flex-wrap: wrap; justify-content: center;
}
.std-scale-current {
    color: var(--accent); font-weight: 700; font-size: .8rem;
}
.std-notes-row {
    display: flex; gap: 4px; flex-wrap: wrap; justify-content: center;
}
.std-note-pill {
    padding: 2px 8px;
    background: rgba(110,231,247,.07);
    border: 1px solid rgba(110,231,247,.18);
    border-radius: 12px;
    font-size: .68rem; font-weight: 700;
    color: rgba(110,231,247,.65);
}

/* ═══════ INFO BAR ═══════ */
.std-info-bar {
    background: var(--surf); border-top: 1px solid var(--bdr);
    padding: 6px 16px; display: flex; align-items: center;
    justify-content: space-between; flex-wrap: wrap; gap: 6px;
    font-size: .7rem; color: var(--muted);
}
.std-info-bar b { color: var(--accent); opacity: .7; }

/* ═══════ RESPONSIVE ═══════ */
@media (max-width: 599px) {
    .std-logo-text { display: none; }
    .tab-btn { padding: 5px 7px; font-size: .64rem; }
    .std-scale-grid,
    .std-pattern-grid { grid-template-columns: repeat(2,1fr); gap: 6px; }
    .std-key-hint { display: none; }
    .std-body { padding: 16px 10px 14px; }
}

/* Tablet: side margins so tool is not edge-to-edge */
@media (min-width: 600px) {
    .std-wrap {
        border-radius: 16px;
        margin: 0 16px;
    }
}

/* Desktop: auto-center, no side margins needed */
@media (min-width: 900px) {
    .std-wrap {
        margin: 0 auto;
    }
}

@media (min-width: 600px) and (max-width: 900px) {
    .std-scale-grid,
    .std-pattern-grid { grid-template-columns: repeat(3,1fr); }
}