/* Pierwsza próbka wspólnego UI: czytelne linki i dotykowe sterowanie. */
#copy-nick { color: var(--muted); background: none; border: 0; padding: 6px 12px; font: inherit; font-size: 11px; margin: 0 0 8px; }
#stage:focus { outline: none; }
#socials { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.social { width: 100%; height: auto; min-height: 66px; padding: 9px 3px; gap: 7px; border: 1px solid rgb(255 255 255 / .09); }
.social-label { font: 11px/1.3 system-ui,sans-serif; color: var(--muted); white-space: nowrap; }
#ui #theme-switcher { padding: 5px; gap: 3px; }
.theme-dot { display: flex; gap: 7px; align-items: center; justify-content: center; width: auto; min-height: 44px; padding: 0 12px; border-radius: 8px; background: transparent; color: var(--muted); border: 1px solid transparent; font: 12px system-ui,sans-serif; text-transform: capitalize; }
.theme-dot::before { content: ''; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--sw); }
.theme-dot[aria-pressed=true] { transform: none; border-color: var(--sw); color: white; box-shadow: none; background: rgb(255 255 255 / .04); }
.theme-dot:hover { transform: none; color: white; }
#play-toggle, #mute-toggle { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border: 0; background: none; color: white; }
#play-toggle svg, #mute-toggle svg { width: 18px; height: 18px; fill: currentColor; }
#volume, #audio-control:hover #volume, #audio-control:focus-within #volume { width: 74px; opacity: 1; margin: 0; }
#ui #audio-control { gap: 7px; padding: 3px 12px 3px 4px; }
#track-name { max-width: 180px; }
#term-close { margin-left: auto; width: 40px; height: 36px; border: 0; background: transparent; color: white; font-size: 22px; }
body.scanlines.border-glow #card { box-shadow: 0 24px 70px #0008, 0 0 20px rgb(0 255 65 / .10); }
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
@media (max-width: 760px) {
  #stage { inset: calc(132px + env(safe-area-inset-top)) 0 calc(112px + env(safe-area-inset-bottom)); padding: 12px 16px; scroll-padding: 12px; }
  #ui #theme-switcher { top: calc(12px + env(safe-area-inset-top)); left: 12px; right: 12px; justify-content: space-between; }
  .theme-dot { flex: 1; padding: 0 3px; gap: 4px; font-size: 11px; }
  #ui #views { top: calc(78px + env(safe-area-inset-top)); bottom: auto; right: 12px; padding: 12px 9px; font-size: 11px; }
  #ui #audio-control { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); border-radius: 12px; flex-wrap: wrap; gap: 4px 8px; padding: 8px; }
  #audio-control #viz { display: none; }
  #track-name { order: -1; width: 100%; max-width: none; padding-left: 8px; font-size: 12px; }
  #volume, #audio-control:hover #volume, #audio-control:focus-within #volume { flex: 1; width: 80px; min-width: 48px; }
  #play-toggle, #mute-toggle { width: 44px; height: 44px; }
  #card { padding: 28px 18px; }
  .social-label { font-size: 10px; }
}