/* =====================================================================
   Učiteľský Šuflík – spoločný dizajn (doplnok k Tailwindu)
   Téma: tmavá "tabuľa" + zošit na štvorčeky + šuflík plný materiálov
   ===================================================================== */

:root {
    --su-ink: #060810;
    --su-ink-2: #0b0f1a;
    --su-pink: #ED5686;
    --su-mint: #A9E8A1;
    --su-pencil: #FACC15;
    --su-up: #A9E8A1;
    --su-down: #fb7185;
    --su-line: rgba(255, 255, 255, 0.045);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }
[x-cloak] { display: none !important; }

.font-display { font-family: 'Bricolage Grotesque', 'Inter', sans-serif; letter-spacing: -0.02em; }
.font-hand { font-family: 'Caveat', cursive; }
.font-mono-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

::selection { background: var(--su-pink); color: #fff; }

/* Tenký scrollbar v štýle stránky */
* { scrollbar-width: thin; scrollbar-color: #1e293b transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 99px; }

/* ---------------------------------------------------------------------
   Pozadie: zošit na štvorčeky + jemná žiara
   --------------------------------------------------------------------- */
.bg-notebook { background-color: var(--su-ink); }
/* Mriežka je na samostatnej pevnej vrstve – "background-attachment: fixed" by pri scrollovaní
   prekresľovalo celú stránku (najmä na mobiloch to sekalo). */
.bg-notebook::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(1200px 600px at 10% -10%, rgba(237, 86, 134, 0.08), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(169, 232, 161, 0.06), transparent 60%),
        linear-gradient(var(--su-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--su-line) 1px, transparent 1px);
    background-size: auto, auto, 28px 28px, 28px 28px;
}

/* Červená "okrajová čiara" zošita – len dekorácia na veľkých obrazovkách */
.notebook-margin::before {
    content: '';
    position: fixed;
    top: 0; bottom: 0; left: 56px;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(237, 86, 134, 0.25) 15%, rgba(237, 86, 134, 0.25) 85%, transparent);
    pointer-events: none;
    z-index: 0;
}
@media (max-width: 1023px) { .notebook-margin::before { display: none; } }

/* ---------------------------------------------------------------------
   Doodles – plávajúce školské pomôcky
   --------------------------------------------------------------------- */
.doodle-layer { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.doodle { position: absolute; opacity: 0.55; will-change: transform; }
.doodle-float { animation: su-float 9s ease-in-out infinite; }
.doodle-float-slow { animation: su-float 14s ease-in-out infinite reverse; }
.doodle-spin { animation: su-spin 40s linear infinite; }
.doodle-wiggle { animation: su-wiggle 6s ease-in-out infinite; transform-origin: 50% 90%; }

@keyframes su-float {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)); }
    50% { transform: translate3d(0, -16px, 0) rotate(calc(var(--r, 0deg) + 6deg)); }
}
@keyframes su-spin { to { transform: rotate(360deg); } }
@keyframes su-wiggle {
    0%, 100% { transform: rotate(-8deg); }
    50% { transform: rotate(8deg); }
}

/* Papierové lietadielko preletí cez hero */
.paper-plane { animation: su-plane 18s ease-in-out infinite; }
@keyframes su-plane {
    0% { transform: translate(-10vw, 30px) rotate(8deg); opacity: 0; }
    8% { opacity: 0.8; }
    50% { transform: translate(50vw, -40px) rotate(-6deg); }
    92% { opacity: 0.8; }
    100% { transform: translate(110vw, 10px) rotate(10deg); opacity: 0; }
}

/* ---------------------------------------------------------------------
   Štítky trendu, košík, šuflík
   --------------------------------------------------------------------- */
@keyframes su-draw { to { stroke-dashoffset: 0; } }

/* Košík po pridaní poskočí */
.animate-cart-bump { animation: su-bump .6s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes su-bump {
    0% { transform: scale(1); }
    30% { transform: scale(1.25) rotate(-8deg); }
    60% { transform: scale(.95) rotate(4deg); }
    100% { transform: scale(1); }
}

/* Zamknutý šuflík v okne pre neprihlásených */
.animate-drawer-shake { animation: su-shake .7s .35s ease-in-out both; }
@keyframes su-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px) rotate(-2deg); }
    40%, 80% { transform: translateX(6px) rotate(2deg); }
}
.animate-lock-bounce { animation: su-lock 1.6s 1s ease-in-out infinite; transform-origin: 60px 34px; transform-box: view-box; }
@keyframes su-lock {
    0%, 70%, 100% { transform: translateY(0); }
    80% { transform: translateY(-5px); }
    90% { transform: translateY(1px); }
}

/* Otvárajúci sa šuflík v hlavičke úvodnej stránky */
.drawer-open { animation: su-drawer 1.1s .3s cubic-bezier(.34, 1.4, .64, 1) both; }
@keyframes su-drawer { from { transform: translateY(0); } to { transform: translateY(22px); } }
.drawer-paper { animation: su-paper .9s cubic-bezier(.34, 1.56, .64, 1) both; transform-box: fill-box; transform-origin: bottom center; }
.drawer-paper.p1 { animation-delay: 1.1s; } .drawer-paper.p2 { animation-delay: 1.25s; } .drawer-paper.p3 { animation-delay: 1.4s; }
@keyframes su-paper { from { transform: translateY(40px) scale(.6); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.drawer-sparkle { animation: su-sparkle 2.4s 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes su-sparkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1); } }

/* ---------------------------------------------------------------------
   Messenger "Zborovňa"
   --------------------------------------------------------------------- */
/* Hlavička ako zelená školská tabuľa s kriedovým prachom */
.chalkboard {
    background:
        radial-gradient(120px 60px at 85% 20%, rgba(255, 255, 255, 0.08), transparent 70%),
        radial-gradient(160px 80px at 10% 90%, rgba(255, 255, 255, 0.05), transparent 70%),
        linear-gradient(135deg, #1d3b31 0%, #15302a 55%, #10251f 100%);
    border-bottom: 3px solid #7c5a3a; /* drevený rám tabule */
    box-shadow: inset 0 -6px 12px -8px rgba(0, 0, 0, 0.6);
}

/* Pozadie chatu: tmavý zošit s linajkami, okrajovou čiarou a čmáranicami */
.chat-paper {
    background-color: #0b1120;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.045' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M30 40 l40 -14 l6 6 l-40 14 z M30 40 l-6 4 l2 -7'/%3E%3Ccircle cx='160' cy='60' r='14'/%3E%3Cpath d='M160 46 q4 -8 10 -6'/%3E%3Cpath d='M40 150 h30 M55 135 v30'/%3E%3Cpath d='M140 160 l12 -24 l12 24 M144 152 h16'/%3E%3Cpath d='M100 100 l6 12 l13 2 l-9 9 l2 13 l-12 -6 l-12 6 l2 -13 l-9 -9 l13 -2 z'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(90deg, transparent 34px, rgba(237, 86, 134, 0.28) 34px, rgba(237, 86, 134, 0.28) 35px, transparent 35px),
        repeating-linear-gradient(to bottom, transparent 0, transparent 27px, rgba(148, 163, 184, 0.07) 27px, rgba(148, 163, 184, 0.07) 28px);
}

/* Bublina / riadok sa objaví s jemným "vyskočením" */
.msg-pop { animation: su-msg-pop .45s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes su-msg-pop {
    from { opacity: 0; transform: translateY(10px) scale(.92); }
    to { opacity: 1; transform: none; }
}

/* Tlačidlo správ sa zavrtí, keď prišla nová správa */
.launcher-wiggle { animation: su-wiggle-btn 2.4s ease-in-out infinite; }
@keyframes su-wiggle-btn {
    0%, 80%, 100% { transform: rotate(0); }
    84% { transform: rotate(-12deg) scale(1.08); }
    88% { transform: rotate(10deg) scale(1.08); }
    92% { transform: rotate(-6deg); }
}

/* Papierové lietadielko po odoslaní odletí */
.plane-fly { animation: su-plane-fly .7s ease-in forwards; }
@keyframes su-plane-fly {
    0% { transform: translate(0, 0) rotate(0); opacity: 1; }
    60% { transform: translate(18px, -18px) rotate(-12deg); opacity: 0; }
    61% { transform: translate(-18px, 18px); opacity: 0; }
    100% { transform: translate(0, 0); opacity: 1; }
}

.quote-up { color: var(--su-up); }
.quote-down { color: var(--su-down); }

/* Blikajúci "live" bod */
.live-dot { position: relative; }
.live-dot::after {
    content: ''; position: absolute; inset: -4px; border-radius: 999px;
    border: 2px solid currentColor; opacity: 0; animation: su-ping 2s ease-out infinite;
}
@keyframes su-ping { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }

/* ---------------------------------------------------------------------
   Karty a komponenty
   --------------------------------------------------------------------- */
.su-card {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(9, 13, 24, 0.92));
    border: 1px solid rgba(51, 65, 85, 0.7);
    border-radius: 1.5rem;
    box-shadow: 0 20px 50px -25px rgba(0, 0, 0, 0.8);
    /* bez backdrop-filter: karta je takmer nepriehľadná a rozmazanie pod desiatkami kariet brzdilo scroll */
}

/* Karta materiálu – jemný náklon a "lepiaca páska" */
.material-card { transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .25s, box-shadow .35s; }
.material-card:hover {
    transform: translateY(-6px) rotate(-0.4deg);
    border-color: rgba(237, 86, 134, 0.55);
    box-shadow: 0 28px 60px -28px rgba(237, 86, 134, 0.45);
}
.material-card .tape {
    position: absolute; top: -10px; left: 50%; width: 84px; height: 22px;
    transform: translateX(-50%) rotate(-3deg);
    background: rgba(250, 204, 21, 0.18);
    border: 1px dashed rgba(250, 204, 21, 0.35);
    border-radius: 3px; z-index: 20;
}

/* Postupné objavenie prvkov pri načítaní */
.reveal { opacity: 0; transform: translateY(14px); animation: su-reveal .7s cubic-bezier(.16, 1, .3, 1) forwards; }
.reveal-1 { animation-delay: .05s; } .reveal-2 { animation-delay: .12s; } .reveal-3 { animation-delay: .19s; }
.reveal-4 { animation-delay: .26s; } .reveal-5 { animation-delay: .33s; } .reveal-6 { animation-delay: .4s; }
@keyframes su-reveal { to { opacity: 1; transform: none; } }
/* Pri návrate späť, obnovení a ďalších stránkach bez čakania na animáciu (viď partials/head) */
.su-no-intro .reveal, .su-no-intro main { animation: none !important; opacity: 1 !important; transform: none !important; }

.animate-card-fade { animation: su-reveal .4s cubic-bezier(.16, 1, .3, 1) both; }

/* Text s prechodom farieb (logo/nadpisy) */
.text-gradient {
    background: linear-gradient(120deg, var(--su-mint) 0%, #f9a8d4 45%, var(--su-pink) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Podčiarknutie "fixkou" */
.marker-underline { position: relative; white-space: nowrap; }
.marker-underline svg { position: absolute; left: -2%; bottom: -0.35em; width: 104%; height: .6em; overflow: visible; }
.marker-underline path { stroke-dasharray: 300; stroke-dashoffset: 300; animation: su-draw 1.2s .6s ease forwards; }

.star-glow { filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.6)); }

/* Formulárové prvky – jednotný focus */
.su-input {
    width: 100%;
    background: rgba(2, 6, 23, 0.85);
    border: 1px solid #1e293b;
    border-radius: 0.85rem;
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    color: #e2e8f0;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.su-input:focus { border-color: var(--su-mint); box-shadow: 0 0 0 3px rgba(169, 232, 161, 0.12); }
.su-input::placeholder { color: #475569; }

/* Číselné pole bez šípok prehliadača */
.no-spin { -moz-appearance: textfield; appearance: textfield; }
.no-spin::-webkit-outer-spin-button, .no-spin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------------------------------------------------------------------
   Plynulé prechody medzi stránkami a jemné "ožitie" obsahu
   --------------------------------------------------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: su-vt-out .18s ease-in both; }
::view-transition-new(root) { animation: su-vt-in .28s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes su-vt-out { to { opacity: 0; } }
@keyframes su-vt-in { from { opacity: 0; transform: translateY(6px); } }

/* Len priehľadnosť – transform na <main> by rozbil okná s position: fixed vo vnútri */
main { animation: su-page-in .3s ease-out backwards; }
@keyframes su-page-in { from { opacity: 0; } }

/* Tlačidlá reagujú na stlačenie */
button:not(:disabled):active, a.su-press:active { transform: scale(.97); }

/* Viditeľný fokus pri ovládaní klávesnicou – len odkazy, tlačidlá a zaškrtávacie polia.
   Textové polia majú vlastný štýl (rámik políčka/formulára), inak by vznikol dvojitý rámik. */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
    outline: 2px solid var(--su-mint); outline-offset: 2px; border-radius: 6px;
}

/* Rozbaľovací panel (katalóg: Teraz frčí / Šuflíky) */
.su-chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Kostra načítania (shimmer) */
.su-skeleton {
    background: linear-gradient(90deg, rgba(30, 41, 59, .55) 25%, rgba(51, 65, 85, .55) 37%, rgba(30, 41, 59, .55) 63%);
    background-size: 400% 100%;
    animation: su-shimmer 1.3s ease infinite;
    border-radius: 1rem;
}
@keyframes su-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* Výsledky katalógu počas načítania jemne zbelejú */
.is-loading { opacity: .45; filter: saturate(.6); transition: opacity .2s, filter .2s; pointer-events: none; }

/* ---------------------------------------------------------------------
   Animácia "papier padá do šuflíka" (partials/drawer-drop)
   --------------------------------------------------------------------- */
.drawer-drop .dd-front { animation: dd-front 2s .15s cubic-bezier(.34, 1.3, .64, 1) both; }
@keyframes dd-front {
    0% { transform: translateY(0); }
    18%, 58% { transform: translateY(16px); }
    74% { transform: translateY(-3px); }
    84%, 100% { transform: translateY(0); }
}
.drawer-drop .dd-paper { animation: dd-paper 2s .15s cubic-bezier(.55, 0, .45, 1) both; transform-box: fill-box; transform-origin: center; }
@keyframes dd-paper {
    0% { transform: translate(0, -60px) rotate(-16deg); opacity: 0; }
    12% { opacity: 1; }
    30% { transform: translate(-4px, -30px) rotate(-6deg); }
    52% { transform: translate(0, 50px) rotate(2deg); }
    58% { transform: translate(0, 46px) rotate(0); }
    80%, 100% { transform: translate(0, 76px) rotate(0); opacity: 1; }
}
.drawer-drop .dd-spark { animation: dd-spark 1.6s 1.65s ease-out both; transform-box: fill-box; transform-origin: center; }
@keyframes dd-spark { 0% { opacity: 0; transform: scale(.3); } 40% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.25); } }
.drawer-drop .dd-check { animation: dd-check .5s 1.75s cubic-bezier(.34, 1.8, .64, 1) both; transform-box: fill-box; transform-origin: center; }
@keyframes dd-check { from { opacity: 0; transform: scale(0) rotate(-40deg); } to { opacity: 1; transform: none; } }

/* Konfety pri oslave */
.su-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.su-confetti i {
    position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; opacity: 0;
    animation: su-confetti 2.6s cubic-bezier(.2, .6, .4, 1) forwards;
}
@keyframes su-confetti {
    0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
    100% { opacity: 0; transform: translate3d(var(--dx, 0), 110vh, 0) rotate(var(--rot, 540deg)); }
}

/* Pätička: platobné metódy sa postupne objavia, pri prejdení myšou sa jemne zdvihnú */
.su-paymethod { animation: su-pay-in .5s cubic-bezier(.16, 1, .3, 1) both; transition: transform .2s, border-color .2s, color .2s; }
.su-paymethod:hover { transform: translateY(-2px); border-color: rgba(169, 232, 161, .45); color: #fff; }
@keyframes su-pay-in { from { opacity: 0; transform: translateY(6px) scale(.95); } }
.su-lock svg { animation: su-lock-pulse 3.2s ease-in-out infinite; transform-origin: 50% 70%; }
@keyframes su-lock-pulse { 0%, 85%, 100% { transform: none; } 90% { transform: scale(1.18) rotate(-6deg); } 95% { transform: scale(1.05) rotate(4deg); } }

/* Lišta cookies: koláčik sa zakýve */
.su-cookie { display: inline-block; animation: su-cookie 2.6s .6s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes su-cookie { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-14deg) scale(1.08); } 86% { transform: rotate(10deg); } 93% { transform: rotate(-4deg); } }

/* Admin graf návštevnosti: stĺpce vyrastú zdola */
.su-bar { transform-origin: bottom; animation: su-bar-grow .6s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes su-bar-grow { from { transform: scaleY(0); } }

/* Prístupnosť: bez animácií pre používateľov, ktorí ich nechcú */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .marker-underline path { stroke-dashoffset: 0 !important; }
    .reveal, .drawer-paper { opacity: 1 !important; transform: none !important; }
    .doodle-layer, .paper-plane, .su-confetti { display: none; }
    main { animation: none; }
}

/* Admin: záložka / tlačidlo s nevybavenými vecami jemne bliká */
.su-attn { animation: su-attn 1.8s ease-in-out infinite; }
@keyframes su-attn {
    0%, 100% { box-shadow: 0 0 0 0 rgba(237, 86, 134, 0); background-color: rgba(237, 86, 134, 0.04); }
    50% { box-shadow: 0 0 0 3px rgba(237, 86, 134, 0.35), 0 0 18px rgba(237, 86, 134, 0.35); background-color: rgba(237, 86, 134, 0.16); }
}
@media (prefers-reduced-motion: reduce) { .su-attn { animation: none; box-shadow: 0 0 0 2px rgba(237, 86, 134, 0.45); } }

/* ---------------------------------------------------------------------
   Ikony rozhrania (Lucide, App\Support\Icon / @icon) – veľkosť podľa písma okolo,
   triedy Tailwindu (w-4 h-4…) ju môžu prepísať, preto sú vo vrstve „base“.
   --------------------------------------------------------------------- */
@layer base {
    /* Položky mriežky sa nesmú roztiahnuť podľa dlhého textu (inak stránka na mobile preteká do strany) */
    .grid > * { min-width: 0; }
    .su-i { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex-shrink: 0; }
}
.su-i-fill { fill: currentColor; }

/* ---------------------------------------------------------------------
   Tlač: bez navigácie, kresieb a tmavého pozadia – čistý biely papier (platí pre všetky vzhľady a režimy)
   --------------------------------------------------------------------- */
@media print {
    html, body, body.bg-notebook { background: #fff !important; color: #0f172a !important; }
    .bg-notebook::before, .bg-notebook::after, .notebook-margin::before { display: none !important; }
    .doodle-layer, .zs-layer, body > div.sticky.top-0, footer, .no-print, [x-data="cookieConsent"] { display: none !important; }
    main, .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
    .su-card { box-shadow: none !important; background: #fff !important; border-color: #e2e8f0 !important; color: #0f172a !important; }
    /* bežné stránky: všetok text tmavý (svetlé písmo z tmavého režimu by na papieri nebolo vidieť); doklady majú vlastné farby */
    body:not(.su-print-doc) main * { color: #0f172a !important; text-shadow: none !important; background-image: none !important; }
}

/* ---------------------------------------------------------------------
   Farebné ikony: každá ikona má tón podľa významu (oheň = oranžová, hviezda = zlatá, košík = ružová…)
   a uzavreté tvary jemnú farebnú výplň (duotone). V plných tlačidlách berú farbu textu tlačidla.
   --------------------------------------------------------------------- */
:root {
    --t-orange: #fb923c; --t-amber: #fbbf24; --t-gold: #facc15; --t-sky: #7dd3fc; --t-violet: #c4b5fd;
    --t-fuchsia: #f0abfc; --t-mint: #A9E8A1; --t-pink: #f472b6; --t-emerald: #6ee7b7; --t-rose: #fb7185; --t-teal: #5eead4;
}
@layer base {
    .su-t-orange { color: var(--t-orange); } .su-t-amber { color: var(--t-amber); } .su-t-gold { color: var(--t-gold); }
    .su-t-sky { color: var(--t-sky); } .su-t-violet { color: var(--t-violet); } .su-t-fuchsia { color: var(--t-fuchsia); }
    .su-t-mint { color: var(--t-mint); } .su-t-pink { color: var(--t-pink); } .su-t-emerald { color: var(--t-emerald); }
    .su-t-rose { color: var(--t-rose); } .su-t-teal { color: var(--t-teal); }
}
.su-duo :is(path, circle, rect, ellipse, polygon) { fill: currentColor; fill-opacity: 0.2; }
.su-i-fill :is(path, circle, rect, polygon), [data-theme] .su-i-fill :is(path, circle, rect, polygon) { fill: currentColor; fill-opacity: 1; }
/* V plných farebných tlačidlách a odznakoch ikona preberá farbu ich textu */
:is(.bg-pink, .bg-pink-dark, .bg-mint, .bg-mint-dark, .bg-pencil, .bg-rose-500, .bg-rose-600, .bg-amber-500, .bg-sky-500, .bg-blue-500,
    .bg-emerald-500, .from-pink, .bg-\[\#ED5686\], .bg-\[\#A9E8A1\]) .su-t { color: inherit; }
:is(.bg-pink, .bg-pink-dark, .bg-mint, .bg-pencil, .bg-rose-500, .from-pink) .su-duo :is(path, circle, rect, ellipse, polygon) { fill-opacity: 0.28; }

/* Ikony ožijú: pri prejdení myšou nad odkazom alebo tlačidlom sa pohnú, oheň jemne plápolá */
.su-t { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), filter .3s; transform-origin: 50% 60%; }
:is(a, button, label, summary):hover > .su-t,
:is(a, button, label, summary):hover > span > .su-t { transform: rotate(-8deg) scale(1.14); filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 45%, transparent)); }
.su-flame { animation: su-flicker 3.2s ease-in-out infinite; }
@keyframes su-flicker { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.06) rotate(-2deg); } 60% { transform: scale(.98) rotate(1deg); } }
@media (prefers-reduced-motion: reduce) { .su-t, .su-flame { animation: none; transition: none; } }

/* Medaily a pohár: jemný pohyb, iskra na pohári blikne */
.su-medal-swing { animation: su-medal-swing 4s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes su-medal-swing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
a:hover .su-medal { transform: scale(1.08); }
.su-medal { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.su-trophy-spark { animation: su-sparkle 2.6s 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .su-medal-swing, .su-trophy-spark { animation: none; } }