/* Wirtualne studio Mr. Shuffle — wygląd (27 października 2026). Kolory z makiety mrshuffle.eu. */
#wirtualne-studio {
  --ws-bg: var(--bg-2, #131311); --ws-bg2: var(--bg-3, #1c1b18); --ws-line: var(--line, #2c2a25);
  --ws-text: var(--text, #f3efe6); --ws-muted: var(--muted, #a8a295); --ws-accent: var(--accent, #e1a418);
  --ws-ink: var(--accent-ink, #1b1405);
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start;
  color: var(--ws-text); font-family: var(--font-body, system-ui, sans-serif);
}
@media (max-width: 900px) { #wirtualne-studio { grid-template-columns: minmax(0, 1fr); } }
.ws-gora { grid-column: 1 / -1; }   /* zdjęcie na całą szerokość, player i zamówienie niżej obok siebie */
#wirtualne-studio h3 { font-family: var(--font-display, Impact, sans-serif); font-weight: 400; letter-spacing: .03em;
  font-size: 22px; margin: 0 0 12px; text-transform: uppercase; }
#wirtualne-studio button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }

/* scena */
.scena { display: block; width: 100%; height: auto; border-radius: var(--radius, 14px); background: #15130f;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.scena .panel { fill: #1d1a15; stroke: #262219; }
.scena .dywan { fill: #3a1712; opacity: .85; }
.scena .statyw { stroke: #77736b; stroke-width: 4; fill: none; stroke-linecap: round; }
.scena .korpus { fill: url(#ws-korpus); }
.scena .korpus-stopa { fill: url(#ws-korpus); }
.scena .front { fill: #0d0c0a; }
.scena .obrecz-stopa { fill: none; stroke: #b9b4aa; stroke-width: 5; }
.scena .obrecz { fill: none; stroke: #b9b4aa; stroke-width: 4; }
.scena .naciag { fill: #e9e3d6; stroke: #b9b4aa; stroke-width: 4; }
.scena .srubka { fill: #cfcac0; }
.scena .pedal { fill: #8f8a80; stroke: #5b5850; }
.scena .blacha { fill: url(#ws-blacha); stroke: #6d4f15; stroke-width: 1.5; }
.scena .kopula { fill: #e8c25c; opacity: .9; }
.scena .etykieta { fill: var(--ws-muted); font-size: 15px; text-anchor: middle; letter-spacing: .06em;
  text-transform: uppercase; pointer-events: none; }
.scena .instr { touch-action: none; cursor: pointer; transform-box: fill-box; transform-origin: center; outline: none; }
.scena .instr:hover { filter: brightness(1.12); }
.scena .instr:focus-visible { filter: drop-shadow(0 0 6px var(--ws-accent)); }
.scena .instr.hit { animation: ws-uderz .2s ease-out; }
@keyframes ws-uderz { 0% { transform: scale(.965); filter: brightness(1.45); } 100% { transform: none; filter: none; } }
.ws-podpowiedz { color: var(--ws-muted); font-size: 14px; margin: 10px 2px 18px; }

/* twój zestaw */
.ws-zestaw, .ws-player, .ws-ustawienia, .ws-zamowienie { background: var(--ws-bg); border: 1px solid var(--ws-line); border-radius: var(--radius, 14px); padding: 18px; }
.ws-slot { display: grid; grid-template-columns: 74px 36px minmax(0, 1fr) 36px 40px; align-items: center; gap: 6px;
  padding: 8px 0; border-top: 1px solid var(--ws-line); }
.ws-slot:first-of-type { border-top: 0; }
.ws-nazwa { color: var(--ws-muted); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.ws-wariant { min-width: 0; text-align: center; line-height: 1.25; }
.ws-wariant b { display: block; font-weight: 600; font-size: 15px; }
.ws-wariant .ws-opis { display: block; font-style: normal; color: var(--ws-muted); font-size: 12px; line-height: 1.3; }
.ws-wariant small { display: block; color: var(--ws-muted); font-size: 12px; min-height: 1em; }
#wirtualne-studio .ws-str, #wirtualne-studio .ws-odsluch { width: 36px; height: 36px; border-radius: 50%; background: var(--ws-bg2);
  font-size: 20px; line-height: 1; }
#wirtualne-studio .ws-odsluch { width: 40px; height: 40px; font-size: 14px; background: var(--ws-accent); color: var(--ws-ink); }
#wirtualne-studio .ws-str:hover { background: var(--ws-line); }
#wirtualne-studio .ws-str:disabled { opacity: .25; cursor: default; }

/* player */
.ws-rytmy { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
#wirtualne-studio .ws-rytmy button, #wirtualne-studio .ws-pedzel button, #wirtualne-studio .ws-dol button {
  padding: 7px 12px; border-radius: 999px; background: var(--ws-bg2); border: 1px solid var(--ws-line); font-size: 14px; }
#wirtualne-studio .ws-rytmy button:hover, #wirtualne-studio .ws-rytmy button.on { border-color: var(--ws-accent); color: var(--ws-accent); }
.ws-sterowanie { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
#wirtualne-studio .ws-graj { padding: 10px 22px; border-radius: 999px; background: var(--ws-accent); color: var(--ws-ink);
  font-weight: 700; font-size: 16px; min-width: 110px; }
.ws-tempo { display: flex; align-items: center; gap: 8px; color: var(--ws-muted); font-size: 14px; flex: 1; min-width: 180px; }
.ws-tempo input { flex: 1; accent-color: var(--ws-accent); }
.ws-tempo output { color: var(--ws-text); min-width: 3ch; font-variant-numeric: tabular-nums; }
.ws-pedzel { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; color: var(--ws-muted); font-size: 14px; }
#wirtualne-studio .ws-pedzel button.on { background: var(--ws-accent); color: var(--ws-ink); border-color: var(--ws-accent); }

/* kostki */
.ws-siatka { display: grid; grid-template-columns: 64px repeat(var(--kroki, 16), minmax(0, 1fr)); gap: 3px; align-items: center;
  margin-bottom: 14px; }
#wirtualne-studio .ws-rzad { font-size: 11px; text-align: left; color: var(--ws-muted); text-transform: uppercase;
  letter-spacing: .03em; padding: 0 2px; line-height: 1.1; height: 100%; }
#wirtualne-studio .ws-rzad:hover { color: var(--ws-text); }
#wirtualne-studio .ws-k { aspect-ratio: 1; min-height: 16px; border-radius: 4px; background: var(--ws-bg2); position: relative; }
#wirtualne-studio .ws-k.b1 { background: #24221d; }
#wirtualne-studio .ws-k.raz { box-shadow: inset 2px 0 0 #3a372f; }
#wirtualne-studio .ws-k.v1 { background: var(--ws-accent); }
#wirtualne-studio .ws-k.v2 { background: #ffd35c; box-shadow: 0 0 0 2px #fff4cc inset; }
#wirtualne-studio .ws-k.v3 { background: var(--ws-accent); opacity: .42; }
#wirtualne-studio .ws-k.teraz { outline: 2px solid var(--ws-text); outline-offset: -1px; }
.ws-przerwa { grid-column: 1 / -1; height: 10px; }
.ws-dol { display: flex; gap: 8px; margin-bottom: 16px; }
.ws-zamow { display: block; text-align: center; padding: 12px 18px; border-radius: 999px; background: var(--ws-accent);
  color: var(--ws-ink); font-weight: 700; text-decoration: none; }
@media (max-width: 420px) {
  .ws-siatka { grid-template-columns: 50px repeat(var(--kroki, 16), minmax(0, 1fr)); gap: 2px; }
  #wirtualne-studio .ws-rzad { font-size: 9.5px; }
  .ws-zestaw, .ws-player { padding: 14px; }
  .ws-slot { grid-template-columns: 32px minmax(0, 1fr) 32px 36px; row-gap: 2px; }
  .ws-nazwa { grid-column: 1 / -1; font-size: 11px; }
  #wirtualne-studio .ws-str { width: 32px; height: 32px; }
  #wirtualne-studio .ws-odsluch { width: 36px; height: 36px; }
  .ws-player { position: static; }
}
/* scena ze zdjęcia: pola do stukania niewidoczne, widać je przy najechaniu i przy uderzeniu */
.scena.foto { background: #000; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.scena.foto.obraca { cursor: grab; }
.scena.foto.kreci { cursor: grabbing; }
.scena.foto .strefa { fill: rgba(225, 164, 24, 0); stroke: rgba(225, 164, 24, 0); stroke-width: 4; }
.scena.foto .instr:hover .strefa, .scena.foto .instr:focus-visible .strefa { stroke: rgba(225, 164, 24, .85); stroke-dasharray: 10 8; }
.scena.foto .instr.hit { animation: none; }
.scena.foto .instr.hit .strefa { animation: ws-foto-uderz .28s ease-out; }
@keyframes ws-foto-uderz { 0% { fill: rgba(225, 164, 24, .38); stroke: rgba(255, 220, 120, 1); } 100% { fill: rgba(225, 164, 24, 0); } }
.scena.foto .etykieta { font-size: 30px; font-weight: 700; fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, .75); stroke-width: 6px;
  opacity: 0; transition: opacity .15s; }
.scena.foto .instr:hover .etykieta, .scena.foto .instr.hit .etykieta { opacity: 1; }
.ws-wariant { display: flex; align-items: center; justify-content: center; gap: 10px; }
.ws-wariant img[hidden] { display: none; }
.ws-wariant img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex: none; }
@media (prefers-reduced-motion: reduce) { .scena .instr.hit { animation: none; } }

/* ---------- układ jak w wirtualnych perkusjach: panele z mgłą na zdjęciu (28 października 2026) ---------- */
.ws-kadr { position: relative; }
.ws-szklo h3 { font-size: 18px !important; margin-bottom: 8px !important; }
.ws-slot { grid-template-columns: 30px minmax(0, 1fr) 30px 32px; row-gap: 1px; padding: 3px 4px; border-radius: 8px; }
.ws-slot .ws-nazwa { grid-column: 1 / -1; font-size: 11px; }
.ws-slot.on .ws-nazwa { color: var(--ws-accent); }
.ws-slot { transition: background .12s; }
.ws-slot.wskazany { background: rgba(225, 164, 24, .26); }
.ws-slot.wskazany .ws-nazwa { color: var(--ws-accent); }
.scena.foto .etykieta { display: none; }   /* bez napisów na zdjęciu (Bartek 28.10.2026); nazwa podświetla się w „Twój zestaw” */
.ws-slot .ws-wariant b { font-size: 14px; }
.ws-slot .ws-wariant img { display: none; }   /* miniatura tylko na dole, w karcie wybranego (Bartek 28.10.2026) */
#wirtualne-studio .ws-slot .ws-str { width: 30px; height: 30px; font-size: 18px; }
#wirtualne-studio .ws-slot .ws-odsluch { width: 32px; height: 32px; font-size: 12px; }
.ws-info { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--ws-line); }
.ws-info img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex: none; }
.ws-info img[hidden] { display: none; }
.ws-info span { display: block; color: var(--ws-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.ws-info b { display: block; font-size: 15px; margin: 1px 0 3px; }
.ws-info p { margin: 0; color: var(--ws-muted); font-size: 13px; line-height: 1.4; }

/* pokrętła */
.ws-ustawienia { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ws-ustawienia h3 { align-self: stretch; }
.ws-pok { display: grid; justify-items: center; width: 100px; padding: 4px 0 8px; cursor: ns-resize; touch-action: none;
  user-select: none; -webkit-user-select: none; border-radius: 10px; outline: none; }
.ws-pok:focus-visible { box-shadow: 0 0 0 2px var(--ws-accent); }
.ws-pok svg { width: 64px; height: 64px; }
.ws-pok-szyna { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 4; stroke-linecap: round; }
.ws-pok-luk { fill: none; stroke: var(--ws-accent); stroke-width: 4; stroke-linecap: round; }
.ws-pok-galka { fill: #2a2823; stroke: #4a463d; stroke-width: 1.5; }
.ws-pok:hover .ws-pok-galka { fill: #34312b; }
.ws-pok-wsk { stroke: var(--ws-text); stroke-width: 3; stroke-linecap: round; }
.ws-pok-nazwa { color: var(--ws-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; text-align: center; line-height: 1.2; margin-top: 2px; }
.ws-pok output { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* zamówienie */
.ws-zamowienie > p { color: var(--ws-muted); font-size: 14px; line-height: 1.5; margin: 0 0 12px; }
.ws-lista { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0 0 18px; font-size: 14px; }
.ws-lista dt { color: var(--ws-muted); text-transform: uppercase; font-size: 12px; letter-spacing: .05em; padding-top: 2px; }
.ws-lista dd { margin: 0; font-weight: 600; }

/* szeroki ekran: zestaw i pokrętła leżą na zdjęciu, pod mgłą */
@media (min-width: 981px) {
  .ws-kadr .scena { border-radius: var(--radius, 14px); }
  .ws-kadr .ws-szklo { position: absolute; top: 16px; max-height: calc(100% - 32px); overflow: auto; padding: 14px;
    background: rgba(12, 11, 9, .55); border: 1px solid rgba(255, 255, 255, .09); border-radius: 12px;
    -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
  .ws-kadr .ws-zestaw { left: 16px; width: 272px; }
  .ws-kadr .ws-ustawienia { right: 16px; width: 132px; }
  .ws-szklo .ws-slot { border-top-color: rgba(255, 255, 255, .07); }
  #wirtualne-studio .ws-szklo .ws-str, #wirtualne-studio .ws-szklo .ws-pok-galka { background: rgba(255, 255, 255, .08); }
  #wirtualne-studio .ws-szklo .ws-str:hover { background: rgba(255, 255, 255, .16); }
  .ws-szklo .ws-info { border-top-color: rgba(255, 255, 255, .1); }
  /* ciasna lista, żeby kadr mógł być niski (mało sufitu nad bębnami) */
  .ws-szklo .ws-slot { padding: 2px 4px; }
  .ws-szklo .ws-slot .ws-nazwa { line-height: 14px; }
  #wirtualne-studio .ws-szklo .ws-slot .ws-str { width: 28px; height: 28px; }
  #wirtualne-studio .ws-szklo .ws-slot .ws-odsluch { width: 28px; height: 28px; }
}
/* węższy ekran: zdjęcie, podpowiedź, a pod nimi zestaw i pokrętła jako zwykłe panele */
@media (max-width: 980px) {
  .ws-gora { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; }
  .ws-kadr { display: contents; }
  .ws-gora .scena, .ws-podpowiedz { grid-column: 1 / -1; }
  .ws-podpowiedz { order: 1; margin: -6px 2px 0; }
  .ws-gora .ws-zestaw { order: 2; }
  .ws-gora .ws-ustawienia { order: 3; }
}
@media (max-width: 640px) {
  .ws-gora { grid-template-columns: minmax(0, 1fr); }
  .ws-ustawienia { flex-direction: row; flex-wrap: wrap; justify-content: space-around; }
  .ws-ustawienia h3 { flex-basis: 100%; }
  .ws-pok { width: 92px; }
}
.ws-info small { display: block; margin-top: 4px; color: var(--ws-accent); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.ws-slot .ws-wariant small:empty { display: none; }