/* «Звуки»: layout only; every key, fader, tab and LED comes from ../game/ui/pixel.css */
*{box-sizing:border-box}
html{background:#34281e;-webkit-text-size-adjust:100%}
body{margin:0;background:#34281e;color:var(--px-ink);min-height:100vh;overflow-x:hidden}
.zv{max-width:980px;margin:0 auto;padding:calc(12px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:18px}
.zv p{margin:0}

/* top: back link, title, LED */
.zv-top{display:flex;align-items:center;gap:14px;min-height:48px}
html body .zv .zv-back{display:inline-flex;align-items:center;--fs:16px;padding:4px 12px}
.zv-top h1{margin:0;font:32px/1 var(--px-ui);color:var(--px-ink);flex:1}
.zv-top .px-led{width:12px;height:12px}

/* the big play key */
.zv-deck{padding:14px;display:flex;flex-direction:column;gap:12px}
html body .zv .zv-play{width:100%;min-height:76px;display:flex;align-items:center;justify-content:center;gap:16px;--fs:32px;--lh:1}
.zv-play-glyph{font-family:var(--px-body)!important;font-size:28px}
.zv-status{font:16px/1.4 var(--px-body);letter-spacing:-1px;color:#e5dcd4;min-height:1.4em;overflow-wrap:anywhere}

.zv-sec{display:flex;flex-direction:column;gap:10px}
.zv-sec>h2{margin:0;color:var(--px-muted)}

/* presets: LED rows, two per line on a phone, three on a wide screen */
.zv-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
html body .zv .zv-presets .px-preset{min-height:52px;font-size:16px}
html body .zv .zv-presets .px-preset strong{line-height:1.15}

/* tiles */
.zv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.zv-tile{background:#261d16;box-shadow:inset 4px 4px 0 #0e0b08,inset -2px -2px 0 #5f4d3e,0 0 0 2px var(--px-edge);padding:10px 10px 4px;display:flex;flex-direction:column;gap:6px;min-width:0}
.zv-tile.is-on{background:#34281d}
html body .zv .zv-toggle{width:100%;min-height:64px;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:10px;row-gap:2px;align-items:center;align-content:center;text-align:left;padding:6px 10px;--fs:16px}
html body .zv .zv-toggle[aria-pressed=true]{--kon:#90755e}
.zv-toggle .px-icon{grid-row:1/3;width:24px;height:24px;color:var(--px-muted)}
.zv-toggle[aria-pressed=true] .px-icon{color:var(--px-warm)}
.zv-toggle .zv-name{font-size:16px;line-height:1.1;overflow-wrap:anywhere}
.zv-toggle small{grid-column:2;font-size:16px;line-height:1.1;color:var(--px-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zv-toggle .px-led{grid-row:1/3;grid-column:3}
.zv-tile input[type=range]{width:100%;margin:0}
.zv-pick{display:flex;margin:2px 0 6px}
html body .zv .zv-pick select{width:100%;min-height:40px!important;font-size:16px}
.zv-foot{display:flex;flex-direction:column;gap:10px}
.zv-foot a{color:#d9c7a8}

/* wide tiles: music and voices */
.zv-wide{gap:10px;padding-bottom:8px}
.zv-row{display:flex;align-items:center;gap:12px;min-width:0}
.zv-row input[type=range]{flex:1;min-width:0}
html body .zv .zv-next{flex:none;width:48px;min-width:48px;padding:0;--fs:16px}
html body .zv .zv-tabs{margin:0}
html body .zv .zv-tabs button{min-width:0;padding:4px 8px;--fs:16px;white-space:normal;text-align:left}
.zv-now{display:flex;flex-direction:column;gap:4px;min-width:0}
.zv-now strong{font-size:16px;line-height:1.25;color:var(--px-ink);overflow-wrap:anywhere}
.zv-now small:empty{display:none}
.zv-now small{font-size:16px;line-height:1.25;color:var(--px-muted);overflow-wrap:anywhere}

.zv-wides{display:flex;flex-direction:column;gap:18px}
.zv-sleep-left{font:16px/1.4 var(--px-ui);color:var(--px-muted);min-height:1.4em}
.zv-foot p{font:16px/1.6 var(--px-body);letter-spacing:-1px;color:#ae9f91}

@media(max-width:400px){
 html body .zv .zv-tabs button{padding:4px 4px;gap:6px!important}
 .zv-toggle small{display:none}
 html body .zv .zv-toggle{min-height:56px}
}
@media(min-width:720px){
 .zv-presets{grid-template-columns:repeat(3,minmax(0,1fr))}
 .zv-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .zv-wides{display:grid;grid-template-columns:1fr 1fr;gap:18px}
}
/* «Наші»: SoundCloud's own player, framed like the rest of the kit */
.zv-nashi[hidden]{display:none}
.zv-nashi{display:flex;flex-direction:column;gap:6px}
.zv-sc{display:block;width:100%;height:120px;border:0;box-shadow:0 0 0 2px var(--px-line,#3a2a1c);background:#2a2018}
.zv-nashi a{color:var(--px-muted);font-size:14px}