/* The Msounds app's pads on bigmstudio.com (round 3, the owner 11-01: the app's own buttons, not the site's). The rules
   are the app's (C:/AI_Core/sound/Msounds_mobil app.css at 39e5861: the pads, their zones, the loop's stop, the pads on
   the room, the pads' sand), copied and scoped to .app-pady; the grids and the stop's cell are this page's (the app has
   one grid and one stop, app/ZDROJ.md). */
.app-pady { --mono-app: "Geist Mono", ui-monospace, monospace; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr;
  gap: 10px; }
/* each pad faintly tinted by its category's element colour (--farba, pady.js), the lit zone in it */
.app-pady .pad { --farba: #7ee0a3; position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0;
  border-radius: 20px; background: radial-gradient(90% 90% at 50% 50%, color-mix(in srgb, var(--farba) 7%, #050506), #050506);
  color: #e9ebef; font: 400 15px/1.45 "Sora", system-ui, sans-serif;
  overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(233, 236, 239, .06); }
.app-pady .pad:disabled { opacity: .45; cursor: progress; }
.app-pady .pad-zona { position: absolute; left: 0; right: 0; display: flex; align-items: center; padding-left: 14px; pointer-events: none;
  transition: background .18s ease-out, box-shadow .18s ease-out; }
.app-pady .pad-zona + .pad-zona { box-shadow: inset 0 1px 0 rgba(233, 236, 239, .05); }
.app-pady .pad-zona.svieti { background: radial-gradient(85% 120% at 50% 50%, color-mix(in srgb, var(--farba) 42%, transparent),
  color-mix(in srgb, var(--farba) 6%, transparent) 70%, transparent); transition: none; }
/* the zones' names a little lighter than the app's rgba(140, 145, 155, .75) (about 4:1 on the pad): 5.8:1 here, AA */
.app-pady .pad-zona-meno { color: rgba(160, 165, 175, .9); font: 400 10.5px/1 var(--mono-app); letter-spacing: .1em; }
.app-pady .pad-nazov { position: relative; font-size: clamp(17px, 1.6vw, 22px); font-weight: 300; letter-spacing: .05em; pointer-events: none;
  color: rgba(233, 235, 239, .92); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--farba) 40%, transparent)); }
/* the names in the intro's lettering (app/pismo/bigm_pismo.js): the word for readers hidden, the strings drawn */
.app-pady .citatel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app-pady .pismo-slovo { display: block; width: auto; overflow: visible; }
.app-pady .pismo-slovo .vlna { fill: currentColor; }
/* a loop playing: the pad itself glows in its colour, no mark beside the name, so the name never moves (the owner, 10-24) */
.app-pady .pad.hra { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--farba) 55%, transparent), inset 0 0 34px color-mix(in srgb, var(--farba) 30%, transparent); }
/* the loop's stop, a square in its pad's top right corner (P12.39), here in a cell with its pad */
.app-pady .pad-bunka { position: relative; display: grid; min-height: 0; }
.app-pady .akordy-stop { position: absolute; top: 0; right: 0; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px;
  margin: 2px; padding: 0; border: 0; border-radius: 14px; background: none; touch-action: manipulation; cursor: pointer; }
.app-pady .akordy-stop span { width: 12px; height: 12px; border-radius: 2px; background: rgba(233, 235, 239, .9);
  box-shadow: 0 0 12px color-mix(in srgb, var(--farba) 70%, transparent); transition: background .18s ease-out, box-shadow .18s ease-out; }
.app-pady .akordy-stop:disabled { pointer-events: none; }
.app-pady .akordy-stop:disabled span { background: rgba(140, 145, 155, .3); box-shadow: none; }
.app-pady .pad:focus-visible, .app-pady .akordy-stop:focus-visible { outline: 2px solid #e9ebef; outline-offset: 3px; }
/* the pads' own sand (P12.20): drawn only with the visual switched on */
.app-pady .pad-platno { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; }
.app-pady .s-pieskom .pad-platno { display: block; }