/* futerko.css — karta postaci RemiTheLynx */

:root {
    /* kolory zebrane z artów Remiego */
    --futro: #F8C701;
    --pregi: #DD8A02;
    --grzywka: #B36D02;
    --kontur: #4A2306;
    --nosek: #22160C;
    --jezorek: #EBA3A6;

    --tlo: #FF4F7B;
    --mleko: #FFF6FA;
    --iskra: #47D7FF;
    --olow: #8D93A3;
    --bialy: #FFFFFF;

    --kreska: 4px;
    --skok: cubic-bezier(.34, 1.56, .64, 1);

    --f-tytul: "Gluten", "Fredoka", "Comic Sans MS", cursive;
    --f-tekst: "M PLUS Rounded 1c", "Nunito", system-ui, sans-serif;

    color-scheme: light only;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--tlo);
    /* plamki rysia */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' fill='%23B8204A' fill-opacity='.28'%3E%3Cellipse cx='22' cy='30' rx='7' ry='5' transform='rotate(-20 22 30)'/%3E%3Cellipse cx='34' cy='40' rx='4' ry='3'/%3E%3Cellipse cx='96' cy='18' rx='5' ry='4' transform='rotate(30 96 18)'/%3E%3Cellipse cx='140' cy='70' rx='8' ry='5' transform='rotate(15 140 70)'/%3E%3Cellipse cx='152' cy='82' rx='3' ry='3'/%3E%3Cellipse cx='60' cy='110' rx='6' ry='4' transform='rotate(-35 60 110)'/%3E%3Cellipse cx='72' cy='118' rx='3' ry='2'/%3E%3Cellipse cx='120' cy='150' rx='5' ry='4' transform='rotate(10 120 150)'/%3E%3Cellipse cx='18' cy='160' rx='4' ry='3'/%3E%3C/svg%3E");
    color: var(--kontur);
    font-family: var(--f-tekst);
    font-size: 1.0625rem;
    line-height: 1.6;
}

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

:focus-visible {
    outline: 4px solid var(--iskra);
    outline-offset: 4px;
    border-radius: 12px;
}

.pole {
    overflow-x: clip;
    padding: 210px 16px 110px;
}

.scena {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
}

/* ───────── arkusz ───────── */

.arkusz {
    position: relative;
    z-index: 1;
    background: var(--mleko);
    border: var(--kreska) solid var(--kontur);
    border-radius: 28px;
    box-shadow: 14px 16px 0 -4px var(--futro), 14px 16px 0 0 var(--kontur);
    padding: clamp(28px, 5vw, 56px);
    transform: rotate(-1deg);
    animation: klap .65s var(--skok) backwards;
}

@keyframes klap {
    0%   { opacity: 0; transform: translateY(-40px) scale(1.08) rotate(3deg); }
    60%  { opacity: 1; transform: translateY(0) scale(.98) rotate(-1.6deg); }
    100% { transform: rotate(-1deg); }
}

/* taśma przyklejona w poprzek rogu; --wglab to jak daleko od rogu, w głąb kartki, wypada jej środek */
.tasma {
    --dl: 184px;
    --gr: 36px;
    --wglab: 30px;
    position: absolute;
    z-index: 9;
    top: calc(var(--wglab) - var(--gr) / 2);
    width: var(--dl);
    height: var(--gr);
    background:
        linear-gradient(180deg, rgb(255 255 255 / .45), rgb(255 255 255 / 0) 45%),
        rgb(255 236 176 / .9);
    clip-path: polygon(3% 0, 97% 0, 100% 14%, 97% 28%, 100% 42%, 97% 57%, 100% 71%, 97% 85%, 100% 100%, 3% 100%, 0 85%, 3% 71%, 0 57%, 3% 42%, 0 28%, 3% 14%, 0 0);
    pointer-events: none;
}
.tasma--l { left: calc(var(--wglab) - var(--dl) / 2); rotate: -45deg; }
.tasma--p { right: calc(var(--wglab) - var(--dl) / 2); rotate: 45deg; }

.arkusz h2 {
    font-family: var(--f-tytul);
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 1.1;
    margin: 0 0 .6rem;
}

.arkusz section,
.arkusz nav {
    border-top: 3px dashed rgb(74 35 6 / .35);
    margin-top: 2.5rem;
    padding-top: 2rem;
}

/* ───────── głowa: awatar + imię ───────── */

.glowa {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(32px, 6vw, 64px);
    align-items: center;
}

.awatar {
    position: relative;
    width: 220px;
    height: 220px;
    margin-top: 40px;
}

.boop {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 9px solid var(--bialy);
    border-radius: 44% 56% 48% 52% / 52% 46% 54% 48%;
    background: var(--tlo);
    box-shadow: 0 0 0 var(--kreska) var(--kontur), 8px 10px 0 var(--kreska) var(--kontur);
    overflow: hidden;
    cursor: pointer;
    transition: transform .2s var(--skok);
}
.boop img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.boop:hover { transform: rotate(-3deg) scale(1.03); }
.boop:focus-visible { outline-offset: 10px; border-radius: 44% 56% 48% 52% / 52% 46% 54% 48%; }
.boop.zboopowany { animation: squish .42s var(--skok); }

@keyframes squish {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.12, .84); }
    60%  { transform: scale(.94, 1.08); }
    100% { transform: scale(1); }
}

/* uszy z pędzelkami: podstawa siedzi głęboko za kółkiem, więc nawet przy drgnięciu się nie wychyla */
.ucho {
    position: absolute;
    z-index: 1;
    top: -46px;
    width: 80px;
    height: 110px;
    overflow: visible;
    transform-origin: 50% 97.5%;
    transform: rotate(var(--obrot));
    animation: uszy-hop .5s var(--skok) .9s backwards;
}
.ucho--l { left: 30px; --obrot: -16deg; }
.ucho--p { right: 30px; --obrot: 16deg; }

.ucho__zewn { fill: var(--futro); stroke: var(--kontur); stroke-width: 4; stroke-linejoin: round; }
.ucho__wewn { fill: var(--pregi); }
.ucho__pedzelek { fill: none; stroke: var(--nosek); stroke-width: 4.5; stroke-linecap: round; }

@keyframes uszy-hop {
    from { transform: rotate(var(--obrot)) translateY(60px) scaleY(.3); }
    to   { transform: rotate(var(--obrot)); }
}

/* po wejściu animacje startowe gasną, żeby hover ich nie odpalał od nowa */
.gotowe .arkusz, .gotowe .l, .gotowe .ucho, .gotowe .czapka, .gotowe .deko { animation: none; }

.gotowe .awatar:hover .ucho,
.gotowe .ucho.drga { animation: drgniecie .5s ease-in-out; }

@keyframes drgniecie {
    0%, 100% { transform: rotate(var(--obrot)); }
    20% { transform: rotate(calc(var(--obrot) * 1.5)); }
    45% { transform: rotate(calc(var(--obrot) * .55)); }
    70% { transform: rotate(calc(var(--obrot) * 1.3)); }
}

/* czapka-uszatka z ołowiem: pozycję trzyma JS w --hx / --hy / --hr */
.czapka {
    position: absolute;
    z-index: 6;
    top: -40px;
    right: 0;
    width: 104px;
    height: 80px;
    padding: 0;
    border: 0;
    background: none;
    cursor: grab;
    touch-action: none;
    translate: var(--hx, 0px) var(--hy, 0px);
    rotate: var(--hr, 16deg);
    transition: translate .45s var(--skok), rotate .45s var(--skok), scale .2s var(--skok);
    animation: czapka-wjazd .5s var(--skok) 1.15s backwards;
}
.czapka svg { width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.czapka__kopula { fill: var(--olow); stroke: var(--kontur); stroke-width: 4; stroke-linejoin: round; }
.czapka__klapa { fill: #6F7484; stroke: var(--kontur); stroke-width: 4; stroke-linejoin: round; }
.czapka__futro { fill: #E9E2DA; stroke: var(--kontur); stroke-width: 4; stroke-linejoin: round; }
.czapka__pb { font-family: var(--f-tytul); font-weight: 800; font-size: 22px; fill: var(--mleko); }
.czapka:hover { scale: 1.06; }
.czapka.ciagnieta { cursor: grabbing; scale: 1.12; transition: scale .2s var(--skok); }
.czapka.leci { transition: none; }

@keyframes czapka-wjazd {
    from { opacity: 0; transform: translateY(-50px); }
}

.dymek {
    position: absolute;
    z-index: 7;
    left: 50%;
    top: -150px;
    translate: -50% 0;
    width: max-content;
    max-width: 230px;
    margin: 0;
    padding: .5rem .9rem;
    background: var(--bialy);
    border: 3px solid var(--kontur);
    border-radius: 20px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    opacity: 0;
    transform: scale(.6) translateY(10px);
    transform-origin: 50% 100%;
    transition: opacity .2s, transform .35s var(--skok);
    pointer-events: none;
}
.dymek.widac { opacity: 1; transform: none; }
/* ogonek dymka, celuje w Remiego */
.dymek::after {
    content: "";
    position: absolute;
    left: calc(50% - 9px);
    bottom: -11px;
    width: 16px;
    height: 16px;
    background: inherit;
    border-right: 3px solid var(--kontur);
    border-bottom: 3px solid var(--kontur);
    rotate: 45deg;
}
.dymek.krzyk {
    background: var(--futro);
    font-family: var(--f-tytul);
    font-size: 1.25rem;
    animation: krzyk .3s linear infinite;
}
@keyframes krzyk {
    0%, 100% { rotate: 0deg; }
    25% { rotate: -3deg; }
    75% { rotate: 3deg; }
}
.dymek .pakiety { display: inline-flex; gap: 4px; margin-left: 4px; }
.dymek .pakiety i {
    width: 8px; height: 8px;
    background: var(--iskra);
    border: 2px solid var(--kontur);
    border-radius: 2px;
    animation: pakiet 1.2s linear infinite;
}
.dymek .pakiety i:nth-child(2) { animation-delay: .2s; }
.dymek .pakiety i:nth-child(3) { animation-delay: .4s; }
@keyframes pakiet {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* reakcje po boopie: napis z wianuszkiem serduszek startuje z miejsca kliknięcia i odlatuje razem */
.reakcja,
.plamka {
    position: absolute;
    z-index: 8;
    left: var(--x, 50%);
    top: var(--y, 50%);
    pointer-events: none;
}

.reakcja {
    font-family: var(--f-tytul);
    font-weight: 900;
    font-size: 1.6rem;
    color: var(--futro);
    -webkit-text-stroke: 6px var(--kontur);
    paint-order: stroke fill;
    white-space: nowrap;
    animation: reakcja 1.2s cubic-bezier(.2, .8, .3, 1) forwards;
}
.reakcja--duza { font-size: 2.6rem; color: var(--iskra); }
.reakcja__tekst { position: relative; z-index: 1; display: block; }

@keyframes reakcja {
    0%   { opacity: 0; transform: translate(-50%, -50%) translateY(0) scale(.3) rotate(0deg); }
    15%  { opacity: 1; transform: translate(-50%, -50%) translateY(-34px) scale(1.15) rotate(var(--r)); }
    70%  { opacity: 1; transform: translate(-50%, -50%) translateY(-70px) scale(1) rotate(var(--r)); }
    100% { opacity: 0; transform: translate(-50%, -50%) translateY(-92px) scale(.95) rotate(var(--r)); }
}

/* serduszka wyskakują wokół napisu i zostają przy nim */
.serduszko {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--w, 26px);
    height: var(--w, 26px);
    animation: serduszko .8s cubic-bezier(.2, .9, .3, 1.2) var(--opoz, 0s) both;
}
.serduszko svg { width: 100%; height: 100%; overflow: visible; display: block; }
.serduszko path { fill: var(--tlo); stroke: var(--kontur); stroke-width: 2.4; stroke-linejoin: round; }

@keyframes serduszko {
    0%   { transform: translate(-50%, -50%) scale(.2) rotate(0deg); }
    45%  { transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(1.15) rotate(var(--r)); }
    100% { transform: translate(-50%, -50%) translate(calc(var(--dx) * 1.12), calc(var(--dy) * 1.12)) scale(1) rotate(var(--r)); }
}

.plamka {
    width: 14px;
    height: 10px;
    border-radius: 50%;
    background: var(--c);
    border: 2px solid var(--kontur);
    animation: wybuch .9s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes wybuch {
    from { transform: translate(-50%, -50%); opacity: 1; }
    to   { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(200deg); opacity: 0; }
}

/* imię */
.kto { min-width: 0; }

.imie {
    margin: 0 0 1.25rem;
    font-family: var(--f-tytul);
    font-weight: 900;
    font-size: clamp(3rem, 9vw, 6.25rem);
    line-height: .95;
    color: var(--futro);
    -webkit-text-stroke: 10px var(--kontur);
    paint-order: stroke fill;
    text-shadow: 5px 6px 0 var(--kontur);
    letter-spacing: -.01em;
}
.slowo { display: inline-block; white-space: nowrap; }
.l {
    display: inline-block;
    animation: litera .55s var(--skok) backwards;
    animation-delay: calc(.3s + var(--i) * 45ms);
}
.l:nth-child(odd) { --tilt: -3deg; }
.l:nth-child(even) { --tilt: 2.5deg; }
.l { transform: rotate(var(--tilt)); }
.gotowe .l:hover { animation: podskok .45s var(--skok); }

@keyframes litera {
    0%   { opacity: 0; transform: translateY(-70px) rotate(var(--tilt)); }
    60%  { opacity: 1; transform: translateY(4px) scale(1.15, .8) rotate(var(--tilt)); }
    100% { transform: rotate(var(--tilt)); }
}
@keyframes podskok {
    0%, 100% { transform: rotate(var(--tilt)); }
    40% { transform: translateY(-18px) rotate(calc(var(--tilt) * -3)); }
}

.pola {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 0 0 1.25rem;
}
.pola div {
    padding: .35rem 1rem .45rem;
    background: var(--futro);
    border: 3px solid var(--kontur);
    border-radius: 999px;
    line-height: 1.25;
}
.pola div:nth-child(2) { background: #FBD3D4; }
.pola div:nth-child(3) { background: var(--bialy); }
.pola dt { font-size: .78rem; opacity: .8; }
.pola dd { margin: 0; font-weight: 800; }

.bio { max-width: 52ch; margin: 0 0 1rem; }
.bio strong { font-weight: 800; }

.licznik { margin: 0; font-size: .95rem; }
.licznik strong {
    display: inline-block;
    min-width: 1.8em;
    padding: 0 .4em;
    background: var(--iskra);
    border: 2px solid var(--kontur);
    border-radius: 8px;
    text-align: center;
    font-weight: 800;
}
.licznik strong.hop { animation: squish .35s var(--skok); }
.licznik__twoje { font-size: .9em; opacity: .75; }

/* ───────── kolory ───────── */

.podpowiedz { margin: -.3rem 0 1.25rem; font-size: .9rem; opacity: .8; }

.kolory ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 1.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.probka {
    display: grid;
    justify-items: center;
    gap: .15rem;
    width: 96px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 1.25;
}
.probka__kolor {
    width: 72px;
    height: 72px;
    margin-bottom: .4rem;
    background: var(--k);
    border: var(--kreska) solid var(--kontur);
    border-radius: 52% 48% 46% 54% / 48% 56% 44% 52%;
    box-shadow: 4px 5px 0 var(--kontur);
    transition: transform .25s var(--skok);
}
.kolory li:nth-child(even) .probka__kolor { border-radius: 46% 54% 56% 44% / 55% 45% 55% 45%; }
.probka:hover .probka__kolor { transform: scale(1.08) rotate(-6deg); }
.probka:active .probka__kolor { transform: scale(.94); }
.probka__nazwa { font-weight: 800; }
.probka__hex { font-size: .82rem; opacity: .8; }
.probka.skopiowana .probka__hex { opacity: 1; font-weight: 800; color: var(--tlo); }

/* ───────── lubię / nie lubię / ciekawostki ───────── */

.o-mnie {
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr;
    gap: 2rem;
}
.kolumna + .kolumna {
    border-left: 3px dashed rgb(74 35 6 / .35);
    padding-left: 2rem;
}
.kolumna ul { margin: 0; padding: 0; list-style: none; }
.kolumna li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: .55rem;
    line-height: 1.5;
}
.kolumna li::before {
    position: absolute;
    left: 0;
    top: .05em;
    font-weight: 800;
}
.kolumna--lubie li::before { content: "♥"; color: var(--tlo); }
.kolumna--nie li::before { content: "✕"; color: var(--kontur); opacity: .7; }
.kolumna--fakty li::before { content: "✦"; color: var(--pregi); }

/* ───────── linki-naklejki ───────── */

.naklejki {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.1rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.naklejka {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem 1.1rem;
    background: var(--futro);
    border: 3px solid var(--kontur);
    border-radius: 16px;
    box-shadow: 0 0 0 6px var(--bialy), 3px 5px 0 6px rgb(74 35 6 / .22);
    color: var(--kontur);
    font-weight: 800;
    text-decoration: none;
    transform: rotate(var(--r, 0deg));
    transition: transform .25s var(--skok), box-shadow .25s;
}
.naklejki li:nth-child(3n+1) .naklejka { --r: -2deg; }
.naklejki li:nth-child(3n+2) .naklejka { --r: 1.5deg; background: #FBD3D4; }
.naklejki li:nth-child(3n) .naklejka { --r: -1deg; background: var(--bialy); }
.naklejka svg { width: 24px; height: 24px; fill: currentColor; flex: none; }

.naklejka--duza {
    padding: .9rem 1.5rem .9rem 1.2rem;
    font-size: 1.35rem;
    line-height: 1.15;
}
.naklejka--duza svg { width: 38px; height: 38px; }
.naklejka--duza b { display: block; font-family: var(--f-tytul); font-weight: 800; font-size: 1.6rem; }
.naklejka--duza small { display: block; font-size: .85rem; font-weight: 700; opacity: .85; }

/* róg, który się odkleja */
.naklejka::after {
    content: "";
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 0;
    height: 0;
    background: linear-gradient(135deg, var(--bialy) 48%, var(--mleko) 52%);
    border-top-left-radius: 10px;
    box-shadow: -2px -2px 4px rgb(74 35 6 / .25);
    transition: width .25s var(--skok), height .25s var(--skok);
}
.naklejka:hover,
.naklejka:focus-visible {
    transform: translateY(-5px) rotate(calc(var(--r) * -1.5));
    box-shadow: 0 0 0 6px var(--bialy), 6px 10px 0 6px rgb(74 35 6 / .22);
}
.naklejka:hover::after,
.naklejka:focus-visible::after { width: 20px; height: 20px; }

.sr {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ───────── stopka ───────── */

.stopka {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 3rem;
    font-size: .9rem;
}
.stopka p { margin: 0; opacity: .8; }

.uwu {
    padding: .35rem .9rem;
    border: 2px solid var(--kontur);
    border-radius: 999px;
    background: var(--mleko);
    cursor: pointer;
    font-size: .9rem;
    font-weight: 700;
}
.uwu[aria-pressed="true"] { background: var(--iskra); }

/* ───────── arty-dekoracje ───────── */

.deko {
    position: absolute;
    z-index: 0;
    height: auto;
    filter: drop-shadow(4px 6px 0 rgb(74 35 6 / .3));
    transition: transform .4s var(--skok), translate .35s ease-in-out;
    animation: wychyl .6s var(--skok) 1.1s backwards;
}
@keyframes wychyl {
    from { opacity: 0; translate: 0 60px; }
}

/* „HI!” wychyla się zza górnej krawędzi; okienko obraca się razem z kartką i ucina art równo z jej brzegiem */
.zza-kartki {
    position: absolute;
    z-index: 0;
    right: 150px;
    bottom: calc(100% + var(--kreska));
    width: 190px;
    height: 200px;
    overflow: hidden;
    pointer-events: none;
}
.deko--hej {
    left: 0;
    top: 24px;
    width: 100%;
    pointer-events: auto;
    animation-name: wychyl-hej;
}
/* dół artu jest ucięty, więc przy podskoku musi zostać za krawędzią: 24 + 190 - 10 > 200 */
.deko--hej:hover { transform: translateY(-10px); }
@keyframes wychyl-hej {
    from { translate: 0 160px; }
}

.deko--palce {
    z-index: 2;
    right: -190px;
    bottom: 120px;
    width: 250px;
    transform: rotate(-6deg);
    animation-name: wychyl-bok;
}
.deko--palce:hover { transform: rotate(-10deg) translateX(-10px); }
@keyframes wychyl-bok {
    from { opacity: 0; translate: 60px 0; }
}

.deko--spioch {
    z-index: 4;
    left: 22px;
    bottom: -64px;
    width: 170px;
    transform: rotate(3deg);
    animation-delay: 1.3s;
}

/* ───────── wąsko ───────── */

@media (max-width: 1320px) {
    .deko--palce { display: none; }
}

@media (max-width: 820px) {
    .glowa { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .kto { width: 100%; }
    .pola { justify-content: center; }
    .bio { margin-left: auto; margin-right: auto; }
    .o-mnie { grid-template-columns: 1fr; gap: 1.75rem; }
    .kolumna + .kolumna {
        border-left: 0;
        padding-left: 0;
        border-top: 3px dashed rgb(74 35 6 / .35);
        padding-top: 1.5rem;
    }
}

@media (max-width: 560px) {
    .pole { padding: 150px 16px 90px; }
    .arkusz { padding: 28px 20px 40px; border-radius: 22px; box-shadow: 8px 10px 0 -4px var(--futro), 8px 10px 0 0 var(--kontur); }
    .tasma { --dl: 132px; --gr: 30px; --wglab: 22px; }
    .awatar { width: 180px; height: 180px; }
    .ucho { top: -40px; width: 70px; height: 96px; }
    .ucho--l { left: 24px; }
    .ucho--p { right: 24px; }
    .czapka { top: -36px; right: -4px; width: 92px; height: 71px; }
    .zza-kartki { right: 64px; width: 140px; height: 150px; }
    .deko--hej { top: 24px; }
    /* na telefonie dymek zasłania „HI!”, więc ten ryś chowa się za kartkę, kiedy Remi krzyczy */
    .arkusz:has(.dymek.widac) .deko--hej { translate: 0 160px; }
    .deko--spioch { width: 120px; bottom: -46px; left: 8px; }
    .imie { -webkit-text-stroke-width: 8px; text-shadow: 4px 5px 0 var(--kontur); }
    .naklejka--duza { width: 100%; }
    .naklejki { gap: .9rem 1rem; }
    .naklejka:not(.naklejka--duza) { padding: .5rem .8rem; font-size: .95rem; }
    .kolory ul { justify-content: center; gap: 1rem; }
    .probka { width: 84px; }
    .probka__kolor { width: 62px; height: 62px; }
}

/* ───────── podstrony: projekty i komisze ───────── */

.wroc { margin-bottom: 2rem; --r: -2deg; background: var(--bialy); font-size: .95rem; }

.podstrona__glowa { margin-bottom: 2.5rem; }
.podstrona .imie { font-size: clamp(3rem, 10vw, 6rem); margin-bottom: 1rem; }
.podstrona .bio { max-width: 58ch; }

.arkusz .podstrona__glowa + section { border-top: 0; margin-top: 0; padding-top: 0; }

/* karta projektu */
.projekty { display: grid; gap: 2.5rem; }
.projekt {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2rem;
    align-items: center;
    padding: 1.75rem;
    background: var(--bialy);
    border: 3px solid var(--kontur);
    border-radius: 22px;
    box-shadow: 6px 8px 0 var(--kontur);
    rotate: -.6deg;
}
.projekt:nth-child(even) { rotate: .7deg; }
.projekt__obrazek {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    background: var(--futro);
    border: 3px solid var(--kontur);
    border-radius: 18px;
}
.projekt__obrazek svg { width: 88%; height: auto; overflow: visible; }
.projekt h2 { font-size: 2.4rem; margin: 0; }
.projekt__adres { margin: .1rem 0 .9rem; font-size: .9rem; opacity: .75; }
.projekt p { max-width: 54ch; }
.kod {
    padding: 0 .4em;
    background: var(--iskra);
    border: 2px solid var(--kontur);
    border-radius: 8px;
    font-family: var(--f-tytul);
    font-weight: 800;
    white-space: nowrap;
}
.tagi {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0 1.5rem;
    padding: 0;
    list-style: none;
}
.tagi li {
    padding: .1rem .75rem;
    background: #FBD3D4;
    border: 2px solid var(--kontur);
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
}

/* ilustracja rdropa */
.rdrop__sprzet { fill: var(--mleko); stroke: var(--kontur); stroke-width: 4; stroke-linejoin: round; }
.rdrop__ekran { fill: var(--iskra); stroke: var(--kontur); stroke-width: 3; }
.rdrop__luk { fill: none; stroke: var(--kontur); stroke-width: 3; stroke-dasharray: 2 8; stroke-linecap: round; }
.rdrop__plik { fill: var(--bialy); stroke: var(--kontur); stroke-width: 3; stroke-linejoin: round; }
.rdrop__kod rect { fill: var(--bialy); stroke: var(--kontur); stroke-width: 3; }
.rdrop__kod text { font-family: var(--f-tytul); font-weight: 800; font-size: 15px; fill: var(--kontur); }

/* usługi na stronie komiszy */
.uslugi__lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}
.usluga {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
    column-gap: 1rem;
    align-items: center;
    padding: 1.1rem 1.25rem;
    background: var(--bialy);
    border: 3px solid var(--kontur);
    border-radius: 18px;
    box-shadow: 4px 6px 0 var(--kontur);
}
.usluga:nth-child(3n+1) { rotate: -1deg; }
.usluga:nth-child(3n+2) { rotate: .8deg; }
.usluga__ikona {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    background: var(--futro);
    border: 3px solid var(--kontur);
    border-radius: 50%;
}
.usluga:nth-child(even) .usluga__ikona { background: #FBD3D4; }
.usluga__ikona svg { width: 28px; height: 28px; fill: none; stroke: var(--kontur); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.usluga h3 { margin: 0; font-size: 1.05rem; font-weight: 800; line-height: 1.3; }
.usluga__opis { grid-column: 1 / -1; align-self: start; margin: .75rem 0 .9rem; font-size: .92rem; line-height: 1.5; }
.usluga__cena {
    grid-column: 1 / -1;
    justify-self: start;
    margin: 0;
    padding: .1rem .7rem;
    background: var(--futro);
    border: 2px solid var(--kontur);
    border-radius: 999px;
    font-family: var(--f-tytul);
    font-size: 1.15rem;
    font-weight: 800;
}
.uslugi__uwagi { margin: 1.75rem 0 0; max-width: 62ch; font-size: .95rem; }

/* pakiet Start streamera: najważniejsza oferta na stronie komiszy */
.pakiet__karta {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem 3rem;
    align-items: center;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: var(--futro);
    border: var(--kreska) solid var(--kontur);
    border-radius: 26px;
    box-shadow: 8px 10px 0 var(--kontur);
    rotate: -1deg;
}
.pakiet__karta h2 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin-bottom: .4rem; }
.pakiet__opis > p { margin: 0 0 1.25rem; max-width: 46ch; }
.pakiet__znaczek {
    position: absolute;
    top: -26px;
    right: -18px;
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    background: var(--tlo);
    border: 3px solid var(--kontur);
    border-radius: 50%;
    color: var(--mleko);
    font-family: var(--f-tytul);
    font-weight: 900;
    font-size: 1.3rem;
    rotate: 12deg;
}
.pakiet__lista { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.pakiet__lista li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem .9rem;
    background: var(--mleko);
    border: 2px solid var(--kontur);
    border-radius: 12px;
    font-weight: 700;
}
.pakiet__lista li::before { content: "♥"; color: var(--tlo); margin-right: -.4rem; }
.pakiet__lista span { flex: 1; }
.pakiet__lista s { opacity: .6; font-weight: 400; white-space: nowrap; }
.pakiet__cena { display: grid; justify-items: center; text-align: center; }
.pakiet__bylo { margin: 0; font-size: .95rem; }
.pakiet__jest {
    margin: 0;
    font-family: var(--f-tytul);
    font-weight: 900;
    font-size: clamp(3.2rem, 9vw, 4.5rem);
    line-height: 1;
    color: var(--mleko);
    -webkit-text-stroke: 8px var(--kontur);
    paint-order: stroke fill;
    text-shadow: 4px 5px 0 var(--kontur);
}
.pakiet__zysk { margin: .4rem 0 1.1rem; font-weight: 800; }
.pakiet__cena .naklejka { background: var(--bialy); }

@media (max-width: 820px) {
    .pakiet__karta { grid-template-columns: 1fr; }
    .pakiet__znaczek { top: -30px; right: -8px; width: 66px; height: 66px; font-size: 1.1rem; }
}

@media (max-width: 560px) {
    .pakiet__karta { padding: 1.5rem 1rem 1.25rem; rotate: -.6deg; }
    .pakiet__karta h2 { padding-right: 2.5rem; }
    .pakiet__lista li { gap: .6rem; padding: .45rem .7rem; font-size: .92rem; }
}

.kontakt .naklejki { margin-top: 1.25rem; }

@media (max-width: 820px) {
    .projekt { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.25rem; }
    .projekt__obrazek { width: min(220px, 100%); }
}

/* ───────── tryb uwu ───────── */

/* tło: plamki zamieniają się w serduszka i powoli płyną */
body.uwu-tryb {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' fill='%23B8204A' fill-opacity='.28'%3E%3Cdefs%3E%3Cpath id='s' d='M0 9s-8-5-10-9.5C-11.5-4-9.5-8-6-8c2.4 0 4.3 1.3 6 3 1.7-1.7 3.6-3 6-3 3.5 0 5.5 4 4 7.5C8 4 0 9 0 9z'/%3E%3C/defs%3E%3Cuse href='%23s' transform='translate(26 34) rotate(-15)'/%3E%3Cuse href='%23s' transform='translate(100 22) rotate(20) scale(.7)'/%3E%3Cuse href='%23s' transform='translate(146 76) rotate(10) scale(1.1)'/%3E%3Cuse href='%23s' transform='translate(62 112) rotate(-25) scale(.85)'/%3E%3Cuse href='%23s' transform='translate(124 152) rotate(8) scale(.6)'/%3E%3Cuse href='%23s' transform='translate(20 160) rotate(-8) scale(.75)'/%3E%3C/svg%3E");
    animation: tlo-plynie 40s linear infinite;
}
@keyframes tlo-plynie {
    to { background-position: 180px -360px; }
}

.uwu-tryb .arkusz { background: #FFEFF5; transition: background .6s; }
.uwu-tryb .ucho__wewn { fill: var(--jezorek); }

/* kartka trzęsie się jak galaretka w chwili przełączenia */
.uwu-przemiana .arkusz { animation: galaretka-kartka .7s var(--skok); }
@keyframes galaretka-kartka {
    0%, 100% { scale: 1; }
    25% { scale: 1.025 .975; }
    50% { scale: .985 1.02; }
    75% { scale: 1.008 .994; }
}

/* imię: różowe, faluje literka po literce */
.imie .l { transition: color .4s; }
.uwu-tryb .imie { color: #FFA6C1; }
.uwu-tryb .l,
.uwu-tryb .l:hover {
    animation: fala 1.4s ease-in-out infinite;
    animation-delay: calc(var(--i) * -110ms);
}
@keyframes fala {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -12px; }
}
/* litera obraca się jak karta, kiedy R i L zamieniają się w W */
.l.obrot { scale: 1; transition: scale .15s ease-in; }
.l.obrot.w-polowie { scale: 0 1; }

/* naklejki jak żelki */
.uwu-tryb .naklejka { animation: zelek 2.2s ease-in-out infinite; }
.uwu-tryb .naklejki li:nth-child(2n) .naklejka { animation-delay: -.7s; }
.uwu-tryb .naklejki li:nth-child(3n) .naklejka { animation-delay: -1.4s; }
@keyframes zelek {
    0%, 100% { scale: 1; }
    20% { scale: 1.05 .95; }
    40% { scale: .97 1.04; }
    60% { scale: 1.01 .99; }
}

.uwu[aria-pressed="true"] { background: #FFA6C1; }
.uwu[aria-pressed="true"]::before { content: "♥ "; color: var(--tlo); }

/* serduszka unoszące się za kartką */
.serca-tlo {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity .8s;
}
.uwu-tryb .serca-tlo { opacity: 1; }
.unosi {
    position: absolute;
    left: var(--lewo);
    top: 100%;
    width: var(--w);
    height: var(--w);
    animation: unos var(--czas) linear var(--opoz) infinite;
    animation-play-state: paused;
}
.uwu-tryb .unosi { animation-play-state: running; }
.unosi svg, .slad svg, .pieczatka .serduszko svg { width: 100%; height: 100%; display: block; overflow: visible; }
.unosi path, .slad path { fill: var(--kolor); stroke: var(--kontur); stroke-width: 2.4; stroke-linejoin: round; }
@keyframes unos {
    0%   { transform: translate(0, 0) rotate(-12deg); }
    25%  { transform: translate(var(--bujanie), -32vh) rotate(12deg); }
    50%  { transform: translate(0, -64vh) rotate(-12deg); }
    75%  { transform: translate(calc(var(--bujanie) * -1), -96vh) rotate(12deg); }
    100% { transform: translate(0, -130vh) rotate(-12deg); }
}

/* ślad z serduszek za kursorem */
.slad {
    position: fixed;
    z-index: 60;
    width: var(--w, 14px);
    height: var(--w, 14px);
    pointer-events: none;
    animation: slad .8s ease-out forwards;
}
@keyframes slad {
    from { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(var(--r)); }
    to   { opacity: 0; transform: translate(-50%, -50%) translateY(22px) scale(.3) rotate(var(--r)); }
}

/* pieczątka „UwU” na wejście */
.pieczatka {
    position: fixed;
    z-index: 70;
    left: 50%;
    top: 45%;
    display: grid;
    justify-items: center;
    pointer-events: none;
    font-family: var(--f-tytul);
    font-weight: 900;
    color: var(--futro);
    -webkit-text-stroke: 10px var(--kontur);
    paint-order: stroke fill;
    text-align: center;
    white-space: nowrap;
    animation: pieczatka 1.6s cubic-bezier(.2, .8, .3, 1) forwards;
}
.pieczatka__uwu {
    position: relative;
    z-index: 1;
    font-size: clamp(5rem, 22vw, 11rem);
    line-height: .9;
    text-shadow: 6px 8px 0 var(--kontur);
}
.pieczatka__opis {
    position: relative;
    z-index: 1;
    font-size: clamp(1.1rem, 4vw, 1.6rem);
    color: var(--mleko);
    -webkit-text-stroke-width: 6px;
}
.pieczatka .serduszko path { fill: #FFA6C1; }
@keyframes pieczatka {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(2.6) rotate(-14deg); }
    18%  { opacity: 1; transform: translate(-50%, -50%) scale(.92) rotate(-6deg); }
    26%  { transform: translate(-50%, -50%) scale(1.04) rotate(-8deg); }
    32%  { transform: translate(-50%, -50%) scale(1) rotate(-8deg); }
    75%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-8deg); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(.9) translateY(-30px) rotate(-8deg); }
}

/* ───────── mniej ruchu ───────── */

@media (prefers-reduced-motion: reduce) {
    .arkusz, .l, .ucho, .czapka, .deko { animation: none !important; }
    .gotowe .awatar:hover .ucho, .gotowe .ucho.drga, .gotowe .l:hover { animation: none; }
    .boop, .naklejka, .probka__kolor, .deko, .czapka { transition: none; }
    .boop.zboopowany, .dymek.krzyk { animation: none; }
    .reakcja { animation: znik 1s ease-out forwards; transform: translate(-50%, -150%); }
    .serduszko, .plamka { display: none; }
    .dymek .pakiety i { animation: none; }
    body.uwu-tryb, .uwu-tryb .l, .uwu-tryb .l:hover, .uwu-tryb .naklejka, .uwu-przemiana .arkusz { animation: none; }
    .l.obrot.w-polowie { scale: 1; }
    .serca-tlo, .slad { display: none; }
    .pieczatka { animation: znik 1.6s ease-out forwards; transform: translate(-50%, -50%) rotate(-8deg); }
}
@keyframes znik {
    0% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 0; }
}