/* Piosenki: dwa wersy, podpowiedzi i spokojna pauza na pisanie. */
#piosenka-detal { padding-bottom: 0; }
.pd-prawa { min-width: 0; }
.pd-ekran { min-height: 200px; }
.pd-sterowanie { position: static; padding: 0; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; }
.pd-sterowanie .pd-btn { min-height: 46px; }
#mango-piosenka { flex-wrap: nowrap; gap: 12px; margin: 8px 20px 0; }
#mango-piosenka .mango-portret { width: 150px; flex-basis: 150px; height: 155px; }
#mango-piosenka .mango-dymek { flex: 1; min-width: 0; min-height: 85px; padding: 12px 16px; }
#mango-piosenka .mango-dymek p { font-size: 14px; }
.pd-jak, .pd-dodatki { margin: 0 20px 14px; padding: 10px 14px; background: #f7efdf; border: 1px solid #e7d8c3; border-radius: 12px; color: #655344; font-size: 13px; }
.pd-jak summary, .pd-dodatki summary { min-height: 28px; padding: 4px 0; color: #694d3c; font-weight: 600; cursor: pointer; }
.pd-jak p { margin-top: 8px; }
.pd-dodatki .pd-kafle { margin-top: 12px; }
.pd-dodatki .kafel { background: #fffdf7; }
.pd-dodatki .kafel b { color: #91242a; }
.pd-dodatki .kafel-opis { color: #655344; }
.karaoke.ma-luki .k-tekst { line-height: 1.85; overflow-wrap: anywhere; }
.k-wers { align-items: flex-start; }
.karaoke.ma-wynik .k-wers { opacity: 1; }
.karaoke .k-slowo:not(.k-teraz):not(.k-zaspiewane):not(.k-luka) { color: #65594b; }
.k-luka { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1.2; max-width: 100%; margin: 5px 1px; }
.k-luka input { min-height: 44px; max-width: 100%; padding: 6px; border: 1px solid #c9aa8c; border-bottom: 2px dashed #b43b3f; border-radius: 9px; font-size: 18px; }
.k-luka input:focus { outline: 2px solid #a7202c; outline-offset: 2px; }
.k-luka input:disabled { opacity: 1; -webkit-text-fill-color: currentColor; }
.k-pomoc-pole { display: flex; flex-direction: column; align-items: center; width: 100%; }
.k-literka { min-height: 44px; min-width: 65px; margin-top: 4px; padding: 7px 10px; border: 1px solid #dfcbb0; border-radius: 9px; font: inherit; font-size: 11px; font-weight: 700; color: #765234; background: #fff5de; cursor: pointer; }
.k-literka:hover:not(:disabled) { background: #f9e5b8; }
.k-literka:disabled { color: #796957; background: #f0e9dd; cursor: default; }
.k-wskazowka { min-height: 17px; margin-top: 3px; font-size: 13px; font-weight: 700; color: #8a491d; overflow-wrap: anywhere; }
.k-wskazowka:empty { display: none; }
.k-poprawna { position: static; transform: none; white-space: normal; font-size: 14px; line-height: 1.4; margin: 4px 0 0; }
.k-pauza { padding: 14px; line-height: 1.5; background: #f6e7d8; }
.k-dalej { min-height: 50px; }
.k-dalej:disabled { color: #786c5f; background: #e4d9cb; cursor: default; box-shadow: none; transform: none; }
.pd-stopka { flex-wrap: wrap; }
.pd-podsumowanie { width: 100%; padding: 22px; border-radius: 18px; color: #fff9eb; background: #ac2632; }
.pd-wynik-etykieta { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.pd-podsumowanie h2 { color: inherit; margin: 8px 0 12px; font-size: 30px; line-height: 1.15; }
.pd-podsumowanie p { font-size: 14px; line-height: 1.5; }
.pd-podsumowanie .pd-wynik-pomoc { margin-top: 14px; padding-top: 12px; border-top: 1px solid #ffffff40; font-size: 12px; }

@media (max-width: 760px) {
    #piosenka-detal:not([hidden]) { padding-bottom: 0; }
    .pd-naglowek { padding: 12px 16px; gap: 8px; }
    .pd-tytuly { min-width: 0; flex-basis: 100%; }
    .pd-tytuly h1 { font-size: 21px; }
    .pd-wynik { display: none; }
    .pd-lewa { padding: 12px 16px; gap: 10px; background: #671e28; }
    .pd-ekran { width: 100%; max-width: 420px; margin: 0 auto; }
    .pd-sterowanie { position: static; padding: 0; background: transparent; box-shadow: none; border: 0; gap: 6px; }
    .pd-sterowanie .pd-btn { flex: 1; font-size: 12px; padding: 8px 6px; background: #ffffff20; color: #fff9eb; }
    .pd-sterowanie .pd-btn-glowny { background: #fff0d2; color: #6b2029; }
    #mango-piosenka { margin: 4px 16px 0; gap: 8px; }
    #mango-piosenka .mango-portret { width: 115px; flex-basis: 115px; height: 130px; }
    #mango-piosenka .mango-dymek { padding: 10px 12px; }
    #mango-piosenka .mango-dymek p { font-size: 12px; line-height: 1.45; }
    .pd-tekst-scroll { padding-top: 8px; }
    .karaoke.okno .k-wers.jest-nastepny { opacity: .62; background: #f3eee5; }
    .karaoke.ma-luki .k-tekst { font-size: 18px; line-height: 1.85; }
    .karaoke.okno .k-wers { padding: 12px 8px; gap: 6px; }
    .k-luka input { font-size: 17px; }
    .pd-stopka { gap: 12px; }
    .pd-stopka .pd-sprawdz, .pd-stopka .pd-jeszcze { min-height: 48px; flex: 1 1 100%; }
    .pd-podsumowanie { padding: 20px; }
    .pd-podsumowanie h2 { font-size: 27px; }
    .pd-jak, .pd-dodatki { margin-left: 16px; margin-right: 16px; }
}