/* Zeszycik - system "Naklejki-nagrody"
   Świat: arkusz naklejek od nauczycielki. Karty są naklejkami die-cut
   z białą obwódką, nagrody są gwiazdkami, puste stany to odklejone pola. */

:root {
    --paper: #EAF2F7;      /* niebieskawy papier podkładowy arkusza */
    --ink: #22303F;        /* granatowy tusz - tekst */
    --ink-soft: #51606F;   /* tekst drugorzędny (5.7:1 na papierze) */
    --berry: #D62B52;      /* malinowy - marka i akcja główna */
    --berry-deep: #B92345; /* malinowy ciemny - tekst na jasnym, hover */
    --sun: #FFC933;        /* słoneczny - nagrody, streak */
    --grass: #2E9E4F;      /* trawa - sukces (tylko duże napisy) */
    --grass-deep: #1F7A3A; /* trawa ciemna - mały tekst na zieleni */
    --sky: #2E7DD1;        /* niebo - informacja */
    --sky-deep: #1F62AC;
    --cut: #FFFFFF;        /* biała obwódka die-cut */
    --tilt: 0deg;
    --pop: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- powierzchnie przeglądarki należą do arkusza ---------- */

html {
    scrollbar-color: var(--berry) var(--paper);
}
body {
    background-color: var(--paper);
    /* kropkowany nadruk papieru podkładowego */
    background-image: radial-gradient(circle, rgba(46, 125, 209, 0.08) 1.2px, transparent 1.4px);
    background-size: 24px 24px;
    color: var(--ink);
    caret-color: var(--berry);
    -webkit-font-smoothing: antialiased;
}
::selection {
    background: var(--sun);
    color: var(--ink);
}
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb {
    background: var(--berry);
    border-radius: 8px;
    border: 3px solid var(--paper);
}
:focus-visible {
    /* linia cięcia: kreskowany obrys wokół naklejki */
    outline: 3px dashed var(--berry);
    outline-offset: 4px;
    border-radius: 6px;
}
a, button { touch-action: manipulation; }

/* FAB - position:fixed musi wygrac ze .stk (transform: rotate) */
.stk.stk-fab {
    position: fixed;
    transform: rotate(0deg);
}
.stk.stk-fab:hover { transform: translateY(-3px) scale(1.05); }

/* okragly slot (np. kafelek Rodzic na wyborze profilu) */
.stk-slot--round { border-radius: 50%; }

.num { font-variant-numeric: tabular-nums; }

/* ---------- naklejki ---------- */

.stk {
    position: relative;
    border-radius: 22px;
    background: #fff;
    transform: rotate(var(--tilt));
    box-shadow:
        0 0 0 4px var(--cut),
        0 1px 2px rgba(34, 48, 63, 0.10),
        0 10px 22px -8px rgba(34, 48, 63, 0.30);
}
.stk--round { border-radius: 50%; }
.stk--berry { background: var(--berry); color: #fff; }
.stk--sun   { background: var(--sun);   color: var(--ink); }
.stk--sky   { background: var(--sky-deep);   color: #fff; }
.stk--grass { background: var(--grass-deep); color: #fff; }
.stk--ink   { background: var(--ink);   color: #fff; }

.tilt-l { --tilt: -1.7deg; }
.tilt-r { --tilt: 1.3deg; }
.tilt-l2 { --tilt: -0.8deg; }
.tilt-r2 { --tilt: 2deg; }

/* naklejka-link: odklejanie przy najechaniu */
a.stk, button.stk, .stk--lift {
    transition: transform 0.35s var(--pop), box-shadow 0.35s var(--pop);
}
a.stk:hover, button.stk:hover, .stk--lift:hover {
    transform: rotate(0deg) translateY(-4px) scale(1.02);
    box-shadow:
        0 0 0 4px var(--cut),
        0 2px 3px rgba(34, 48, 63, 0.08),
        0 18px 30px -10px rgba(34, 48, 63, 0.35);
}
a.stk:active, button.stk:active {
    transform: rotate(var(--tilt)) translateY(1px) scale(0.99);
    transition-duration: 0.1s;
}

/* odklejone pole - pusty stan */
.stk-slot {
    border-radius: 22px;
    border: 2.5px dashed rgba(81, 96, 111, 0.45);
    background: rgba(255, 255, 255, 0.45);
    color: var(--ink-soft);
}

/* przycisk-pastylka */
.stk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 999px;
    background: var(--berry);
    color: #fff;
    font-weight: 700;
    padding: 0.9rem 1.75rem;
    box-shadow:
        0 0 0 4px var(--cut),
        0 8px 16px -6px rgba(185, 35, 69, 0.55);
    transition: transform 0.25s var(--pop), box-shadow 0.25s var(--pop), background-color 0.2s;
}
.stk-btn:hover { background: var(--berry-deep); transform: translateY(-2px); }
.stk-btn:active { transform: translateY(1px); box-shadow: 0 0 0 4px var(--cut), 0 4px 8px -4px rgba(185, 35, 69, 0.5); }
.stk-btn--ghost {
    background: rgba(255, 255, 255, 0.9);
    color: var(--berry-deep);
    box-shadow: 0 0 0 3px var(--cut), 0 4px 10px -5px rgba(34, 48, 63, 0.35);
}
.stk-btn--ghost:hover { background: #fff; color: var(--berry-deep); }
.stk-btn[disabled], .stk-btn--locked {
    background: var(--ink-soft);
    color: #fff;
    cursor: not-allowed;
    box-shadow: 0 0 0 4px var(--cut), 0 3px 8px -5px rgba(34, 48, 63, 0.3);
    transform: none;
}

/* pasek postępu jako pasek naklejek */
.stk-track {
    height: 14px;
    border-radius: 999px;
    background: rgba(34, 48, 63, 0.10);
    box-shadow: inset 0 1px 3px rgba(34, 48, 63, 0.15);
    overflow: hidden;
}
.stk-track > .fill {
    height: 100%;
    border-radius: 999px;
    background: repeating-linear-gradient(
        -55deg,
        var(--sun) 0 12px,
        #FFD65C 12px 24px
    );
    box-shadow: inset 0 -2px 0 rgba(34, 48, 63, 0.12);
}

/* logotyp */
.wordmark {
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
}

/* ---------- ruch: naklejka przyklejana do arkusza ---------- */

@keyframes slap {
    0%   { transform: rotate(var(--tilt)) scale(1.18); opacity: 0; }
    60%  { transform: rotate(var(--tilt)) scale(0.97); opacity: 1; }
    100% { transform: rotate(var(--tilt)) scale(1); opacity: 1; }
}
.slap-in { animation: slap 0.5s var(--pop) both; }
.slap-in.d1 { animation-delay: 0.08s; }
.slap-in.d2 { animation-delay: 0.16s; }
.slap-in.d3 { animation-delay: 0.24s; }

/* pola formularzy */
.stk-input {
    display: block;
    width: 100%;
    border-radius: 14px;
    border: 2.5px solid #D7E3EC;
    background: #fff;
    color: var(--ink);
    font-weight: 600;
    padding: 0.7rem 1rem;
    transition: border-color 0.2s;
}
.stk-input:focus {
    outline: none;
    border-color: var(--berry);
}
.stk-input::placeholder { color: var(--ink-soft); opacity: 0.7; }
.stk-label {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

/* checkbox w duchu naklejek */
.stk-check {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    border: 2.5px solid #D7E3EC;
    background: #fff;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s, background-color 0.15s;
}
.stk-check:checked {
    background: var(--berry);
    border-color: var(--berry);
}
.stk-check:checked::after {
    content: "";
    width: 12px;
    height: 7px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
}
.stk-check:focus-visible { outline: 3px dashed var(--berry); outline-offset: 3px; }

/* select w duchu naklejek */
.stk-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2351606F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    padding-right: 2.6rem;
}

/* PIN pad */
.pin-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2.5px solid var(--ink-soft);
}
.pin-dot.full { background: var(--berry); border-color: var(--berry); }

/* naklejka w albumie jeszcze nie zdobyta */
.stk-ghost {
    border-radius: 22px;
    border: 2.5px dashed rgba(81, 96, 111, 0.4);
    background: rgba(255, 255, 255, 0.35);
    filter: grayscale(1);
    opacity: 0.75;
}

/* landing: unoszace sie naklejki i slot na grafike hero */
.hero-art { position: relative; }
.hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
}
@keyframes floaty {
    0%, 100% { transform: translateY(0) rotate(var(--tilt)); }
    50%      { transform: translateY(-10px) rotate(var(--tilt)); }
}
.floaty { animation: floaty 4.5s ease-in-out infinite; }
.floaty.d1 { animation-delay: 0.4s; }
.floaty.d2 { animation-delay: 0.8s; }
.floaty.d3 { animation-delay: 1.2s; }
.floaty.d4 { animation-delay: 1.6s; }
@media (prefers-reduced-motion: reduce) {
    .floaty { animation: none; }
}

/* toast - naklejka z komunikatem przyklejana na dole ekranu */
.stk-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) rotate(-1deg);
    z-index: 50;
    max-width: min(92vw, 26rem);
    border-radius: 18px;
    background: var(--ink);
    color: #fff;
    font-weight: 600;
    padding: 0.9rem 1.25rem;
    box-shadow: 0 0 0 4px var(--cut), 0 12px 24px -8px rgba(34, 48, 63, 0.45);
    animation: slap 0.4s var(--pop) both;
}
.stk-toast.hide { opacity: 0; transition: opacity 0.3s; }

@media (prefers-reduced-motion: reduce) {
    .slap-in, .slap-in.d1, .slap-in.d2, .slap-in.d3, .stk-toast { animation: none; }
    a.stk, button.stk, .stk-btn, .stk--lift, .stk-track > .fill { transition: none; }
}