/* ============================================
   Szótár / szófelhő ([szofelho], szekely-szinonima-cloud)
   Layout és design itt él; a pluginban csak az állapot-szabályok
   maradtak (betöltés látszik/rejtve).

   Színek: a márka kékje és navyja (--color-four, --color-two), plusz a site
   három kiegészítő színe (tengerkék, ég, borostyán, bordó). Átlátszóság csak
   0.08 / 0.13 / 0.21 / 0.34 / 0.55 / 0.89. A méretek, térközök, sugarak és az
   időzítés Fibonacci-számok.
   Animálni csak transform és opacity: ahol a hover színt cserél, ott egy
   pszeudo-elem opacity-je halványul be. Az állapotváltás (aktív pill,
   aktív betű) azonnali.
   ============================================ */

/* ---------- Változók ---------- */
.szf-wrap {
    /* Paletta */
    --szf-blue: var(--color-four, #0285BA);
    --szf-navy: var(--color-two, #013A63);
    --szf-marine: #02497C;
    --szf-sky: #9fd3ff;
    --szf-amber: #f4a261;
    --szf-crimson: #c0392b;

    --szf-bg: var(--color-one, #fff);
    --szf-bg-soft: color-mix(in srgb, var(--szf-blue) 8%, #fff);
    --szf-text: var(--szf-navy);
    --szf-text-soft: color-mix(in srgb, var(--szf-navy) 89%, #fff);
    --szf-border: color-mix(in srgb, var(--szf-navy) 13%, transparent);
    --szf-shadow: 0 var(--sd-2) var(--sd-21) color-mix(in srgb, var(--szf-navy) 13%, transparent);
    --szf-glass: color-mix(in srgb, #fff 55%, transparent);
    --szf-radius: var(--sd-21);
    --szf-radius-sm: var(--sd-13);
    --szf-radius-pill: var(--sd-34);

    /* Kitöltött vezérlők (aktív betű, kilépő chip, gombok): a tengerkék fehér szöveggel 9.35:1. */
    --szf-accent: var(--szf-marine);
    /* A site saját betűtípusa (Inter, önhosztolt woff2): nincs külső betöltés. */
    --szf-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --szf-font-fun: var(--szf-font);

    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: var(--sd-34) var(--sd-21) var(--sd-21);
    background: var(--szf-bg);
    font-family: var(--szf-font);
    color: var(--szf-text);
    box-sizing: border-box;
}

/* Színes fények az üveg-konténer mögött (az üveg ezeket homályosítja). Statikus. */
.szf-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse var(--sd-377) var(--sd-233) at 13% 34%, color-mix(in srgb, var(--szf-sky) 34%, transparent), transparent),
        radial-gradient(ellipse var(--sd-377) var(--sd-233) at 89% 55%, color-mix(in srgb, var(--szf-blue) 21%, transparent), transparent),
        radial-gradient(ellipse var(--sd-233) var(--sd-144) at 55% 89%, color-mix(in srgb, var(--szf-amber) 21%, transparent), transparent);
}

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

/* A hidden attribútum a display: flex szabályokkal szemben is rejt. */
.szf-wrap [hidden] {
    display: none !important;
}

/* ---------- Fejléc ---------- */
/* Cím és leírás egy sorban; keskeny képernyőn a leírás új sorba törik. */
.szf-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: var(--sd-3) var(--sd-8);
    margin-bottom: var(--sd-21);
    text-align: center;
}

.szf-title {
    font-family: var(--szf-font);
    font-weight: 800;
    font-size: var(--sd-21);
    line-height: 1.2;
    margin: 0;
    color: var(--color-two, #013A63);
    letter-spacing: -0.01em;
}

.szf-title-sep {
    color: var(--szf-text-soft);
    font-weight: 700;
}

.szf-subtitle {
    font-size: var(--sd-13);
    line-height: 1.618;
    color: var(--szf-text-soft);
    margin: 0;
}

/* ---------- Szótár-pillek ---------- */
.szf-dict-selector {
    margin-bottom: var(--sd-21);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: var(--sd-5) 0;
}

.szf-dict-selector::-webkit-scrollbar {
    display: none;
}

.szf-dict-pills {
    display: flex;
    gap: var(--sd-8);
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 var(--sd-8);
}

/* A pill, a betű és a Véletlen gomb közös alapja: a hover egy pszeudo-
   elem halvány kitöltése (opacity) + egy kis emelkedés (transform). */
.szf-pill,
.szf-abc-letter,
.szf-random-btn,
.szf-letter-exit,
.szf-more-btn,
.szf-back {
    position: relative;
    isolation: isolate;
    font-family: var(--szf-font);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--sd-hover) var(--sd-ease);
}

.szf-pill::before,
.szf-abc-letter::before,
.szf-random-btn::before,
.szf-letter-exit::before,
.szf-more-btn::before,
.szf-back::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--fill, var(--szf-blue));
    opacity: 0;
    transition: opacity var(--sd-hover) var(--sd-ease);
}

.szf-pill:hover::before,
.szf-abc-letter:not(:disabled):hover::before,
.szf-random-btn:hover::before,
.szf-letter-exit:hover::before,
.szf-more-btn:hover::before,
.szf-back:hover::before {
    opacity: 0.21;
}

.szf-pill:hover,
.szf-abc-letter:not(:disabled):hover,
.szf-random-btn:hover,
.szf-letter-exit:hover,
.szf-more-btn:hover,
.szf-back:hover {
    transform: translateY(calc(var(--sd-2) * -1));
}

.szf-pill:focus-visible,
.szf-abc-letter:focus-visible,
.szf-random-btn:focus-visible,
.szf-letter-exit:focus-visible,
.szf-more-btn:focus-visible,
.szf-back:focus-visible,
.szf-word:focus-visible,
.szf-search-input:focus-visible {
    outline: var(--sd-2) solid var(--szf-accent);
    outline-offset: var(--sd-2);
}

.szf-pill {
    --fill: var(--pill-color, var(--szf-blue));
    display: inline-flex;
    align-items: center;
    gap: var(--sd-5);
    min-height: var(--sd-34);
    padding: var(--sd-5) var(--sd-21);
    border-radius: var(--szf-radius-pill);
    border: var(--sd-2) solid var(--szf-border);
    background: var(--szf-bg);
    color: var(--szf-text-soft);
    font-size: var(--sd-13);
    font-weight: 700;
    white-space: nowrap;
}

/* Az aktív pill tónusos, nem tömör: a szöveg a szín 0.34-es sötét keveréke (AA a világos színeken is). */
.szf-pill.active {
    border-color: var(--pill-color, var(--szf-blue));
    background: color-mix(in srgb, var(--pill-color, var(--szf-blue)) var(--pill-tint, 21%), #fff);
    color: color-mix(in srgb, var(--pill-color, var(--szf-blue)) 34%, #000);
    box-shadow: 0 var(--sd-3) var(--sd-13) color-mix(in srgb, var(--pill-color, var(--szf-blue)) 34%, transparent);
}

.szf-pill.active::before {
    display: none;
}

.szf-pill-icon {
    font-size: var(--sd-13);
}

.szf-pill-count {
    font-size: var(--sd-13);
    color: var(--szf-text-soft);
    font-weight: 600;
}

/* ---------- Kereső ---------- */
/* Kereső + Keverés egy sorban (mobilon is). */
.szf-search-area {
    display: flex;
    align-items: center;
    gap: var(--sd-13);
    margin-bottom: var(--sd-21);
    justify-content: center;
    flex-wrap: nowrap;
}

.szf-search-box {
    position: relative;
    flex: 1 1 auto;
    max-width: var(--sd-377);
    min-width: 0;
}

.szf-search-input {
    width: 100%;
    min-height: var(--sd-55);
    padding: var(--sd-13) var(--sd-55) var(--sd-13) var(--sd-21);
    background: var(--szf-bg-soft);
    border: var(--sd-2) solid var(--szf-border);
    border-radius: var(--szf-radius-pill);
    color: var(--szf-text);
    font-family: var(--szf-font);
    font-size: var(--sd-16);
    font-weight: 600;
    outline: none;
}

.szf-search-input::placeholder {
    color: var(--szf-text-soft);
    font-weight: 500;
}

.szf-search-input:focus {
    border-color: var(--szf-accent);
    background: #fff;
    box-shadow: 0 0 0 var(--sd-5) color-mix(in srgb, var(--szf-blue) 21%, transparent);
}

.szf-search-btn {
    position: absolute;
    right: var(--sd-8);
    top: 50%;
    margin-top: calc(var(--sd-34) / -2);
    background: var(--szf-accent);
    border: none;
    border-radius: 50%;
    width: var(--sd-34);
    height: var(--sd-34);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: transform var(--sd-hover) var(--sd-ease);
}

.szf-search-btn:hover {
    transform: scale(1.08);
}

.szf-random-btn {
    --fill: var(--szf-amber);
    display: inline-flex;
    align-items: center;
    gap: var(--sd-8);
    min-height: var(--sd-55);
    padding: var(--sd-8) var(--sd-21);
    background: var(--szf-bg-soft);
    border: var(--sd-2) solid var(--szf-border);
    border-radius: var(--szf-radius-pill);
    color: var(--szf-text);
    font-size: var(--sd-13);
    font-weight: 700;
    white-space: nowrap;
}

.szf-random-btn:active {
    transform: scale(0.96);
}

.szf-random-btn.spin svg {
    animation: szfSpin var(--sd-hover-slow) var(--sd-ease);
}

@keyframes szfSpin {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
}

/* ---------- ABC-sor ---------- */
.szf-abc {
    margin-bottom: var(--sd-21);
}

/* A sor magassága fix (a betűk betöltése előtt is), hogy ne ugorjon az oldal. */
.szf-abc-scroll {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sd-8);
    min-height: var(--sd-55);
}

.szf-abc-letters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sd-3);
}

.szf-abc-letter {
    --fill: var(--szf-blue);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: var(--sd-34);
    height: var(--sd-55);
    padding: 0 var(--sd-8);
    border: 0;
    border-radius: var(--szf-radius-sm);
    background: transparent;
    color: var(--szf-text);
    line-height: 1.2;
}

.szf-abc-letter-label {
    font-size: var(--sd-21);
    font-weight: 800;
}

.szf-abc-letter-count {
    font-size: var(--sd-13);
    font-weight: 600;
    color: var(--szf-text-soft);
}

.szf-abc-letter[aria-pressed='true'] .szf-abc-letter-count {
    color: inherit;
}

.szf-abc-letter:disabled {
    cursor: default;
    opacity: 0.34;
}

.szf-abc-letter[aria-pressed='true'] {
    background: var(--szf-accent);
    color: #fff;
}

.szf-abc-letter[aria-pressed='true']::before {
    display: none;
}

/* ---------- Aktuális szó ---------- */
.szf-current-word {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sd-8);
    margin-bottom: var(--sd-13);
    text-align: center;
    animation: szfSlideIn var(--sd-hover-slow) var(--sd-ease);
}

.szf-current-value {
    display: inline-block;
    padding: var(--sd-5) var(--sd-21);
    background: var(--szf-marine);
    border-radius: var(--szf-radius-pill);
    font-weight: 800;
    font-size: var(--sd-21);
    color: #fff;
    letter-spacing: 0.01em;
}

.szf-back {
    --fill: var(--szf-blue);
    display: inline-flex;
    align-items: center;
    min-height: var(--sd-34);
    padding: var(--sd-5) var(--sd-13);
    border: var(--sd-2) solid var(--szf-border);
    border-radius: var(--szf-radius-pill);
    background: var(--szf-bg-soft);
    color: var(--szf-text);
    font-size: var(--sd-13);
    font-weight: 700;
}

@keyframes szfSlideIn {
    from { opacity: 0; transform: translateY(calc(var(--sd-8) * -1)); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Felhő ---------- */
/* Üveg csak itt (és a kártyán): a 100+ chipen nincs backdrop-filter. */
.szf-cloud-container {
    position: relative;
    min-height: var(--sd-377);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sd-21) var(--sd-13);
    background: var(--szf-bg-soft);
    border-radius: var(--szf-radius);
    border: var(--sd-2) solid var(--szf-border);
    box-shadow: var(--szf-shadow);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .szf-cloud-container {
        background: var(--szf-glass);
        -webkit-backdrop-filter: blur(var(--sd-13));
        backdrop-filter: blur(var(--sd-13));
    }
}

.szf-cloud-canvas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sd-5) var(--sd-8);
    width: 100%;
    padding: var(--sd-8);
    line-height: 1.618;
}

/* ---------- Szó-chipek ---------- */
.szf-word {
    --tone: var(--word-tone, var(--szf-blue));
    --fill: var(--tone);
    position: relative;
    isolation: isolate;
    display: inline-block;
    margin: 0;
    padding: var(--sd-5) var(--sd-13);
    border-radius: var(--szf-radius-pill);
    font-family: var(--szf-font);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    border: var(--sd-2) solid transparent;
    /* A szöveg a tónus 0.34-es sötét keveréke: min. 6:1 a háttéren és hoverkor is. */
    background: color-mix(in srgb, var(--tone) var(--tint, 13%), #fff);
    color: color-mix(in srgb, var(--tone) 34%, #000);
    transition: transform var(--sd-hover) var(--sd-ease);
    /* belépő animáció: legfeljebb 13 szó lépcsőzik, 89 ms-os lépésközzel */
    animation: szfWordPop var(--sd-calm) var(--sd-ease) backwards;
    animation-delay: calc(var(--i, 0) * var(--sd-stagger-fast));
}

.szf-word::before {
    content: '';
    position: absolute;
    inset: calc(var(--sd-2) * -1);
    z-index: -1;
    border-radius: inherit;
    background: var(--fill);
    opacity: 0;
    transition: opacity var(--sd-hover) var(--sd-ease);
}

.szf-word:hover {
    transform: translateY(calc(var(--sd-3) * -1)) scale(1.05);
}

.szf-word:hover::before {
    opacity: 0.34;
}

.szf-word:active {
    transform: scale(0.96);
}

.szf-word--xl { font-size: var(--sd-34); padding: var(--sd-5) var(--sd-21); font-weight: 900; }
.szf-word--lg { font-size: var(--sd-21); padding: var(--sd-5) var(--sd-21); font-weight: 800; }
.szf-word--md { font-size: var(--sd-21); font-weight: 600; }
.szf-word--sm { font-size: var(--sd-13); font-weight: 700; }
.szf-word--xs { font-size: var(--sd-13); font-weight: 600; }

/* Tónusok: a nagy chipek többsége kék család, minden negyedik kiemelés (borostyán, bordó). */
.szf-tone-blue { --word-tone: var(--szf-blue); }
.szf-tone-navy { --word-tone: var(--szf-navy); }
.szf-tone-marine { --word-tone: var(--szf-marine); }
.szf-tone-sky { --word-tone: var(--szf-sky); --tint: 34%; }
.szf-tone-amber { --word-tone: var(--szf-amber); --tint: 34%; }
.szf-tone-crimson { --word-tone: var(--szf-crimson); }

/* Legfeljebb három kiemelt chip lebeg lassan (987 ms, oda-vissza); mobilon és kevesebb mozgásnál nem. */
@media (hover: hover) and (min-width: 610px) {
    .szf-word.szf-float {
        animation: szfWordPop var(--sd-calm) var(--sd-ease) backwards, szfFloat var(--sd-calm-slow) ease-in-out 1.5s infinite alternate;
        animation-delay: calc(var(--i, 0) * var(--sd-stagger-fast)), 1.5s;
    }
}

.szf-word.szf-float:hover {
    animation: none;
}

@keyframes szfFloat {
    from { transform: translateY(0); }
    to { transform: translateY(calc(var(--sd-3) * -1)); }
}

@keyframes szfWordPop {
    from { opacity: 0; transform: scale(0.89) translateY(var(--sd-8)); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---------- Még több ---------- */
.szf-more {
    display: flex;
    justify-content: center;
    margin-top: var(--sd-13);
}

.szf-more-btn {
    --fill: var(--szf-blue);
    min-height: var(--sd-34);
    padding: var(--sd-8) var(--sd-34);
    border: var(--sd-2) solid var(--szf-border);
    border-radius: var(--szf-radius-pill);
    background: var(--szf-bg-soft);
    color: var(--szf-text);
    font-size: var(--sd-13);
    font-weight: 700;
}

/* ---------- Betöltés ---------- */
.szf-loading {
    position: absolute;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sd-13);
    background: color-mix(in srgb, #fff 89%, transparent);
    z-index: 10;
    border-radius: var(--szf-radius);
}

.szf-spinner {
    width: var(--sd-34);
    height: var(--sd-34);
    border: var(--sd-3) solid var(--szf-border);
    border-top-color: var(--szf-accent);
    border-radius: 50%;
    animation: szfRotate var(--sd-calm-slow) linear infinite;
}

.szf-loading-text {
    font-size: var(--sd-13);
    color: var(--szf-text-soft);
    font-weight: 600;
}

@keyframes szfRotate {
    to { transform: rotate(360deg); }
}

/* ---------- Üres / nincs találat / hiba ---------- */
.szf-not-found {
    text-align: center;
    padding: var(--sd-34);
    color: var(--szf-text-soft);
    font-size: var(--sd-16);
}

.szf-not-found-icon {
    font-size: var(--sd-34);
    display: block;
    margin-bottom: var(--sd-8);
}

.szf-not-found-hint {
    font-size: var(--sd-13);
    margin-top: var(--sd-5);
    opacity: 0.89;
}

/* "Erre gondoltál?" javaslatok a nincs-találat üzenet alatt */
.szf-suggest {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sd-8);
    margin-top: var(--sd-13);
}

.szf-suggest .szf-not-found-hint {
    flex-basis: 100%;
    margin: 0;
}

.szf-not-found .szf-more-btn {
    margin-top: var(--sd-13);
}

/* ---------- Kilépő chip ("A betű ×") a számláló mellett ---------- */
.szf-count-group {
    display: inline-flex;
    align-items: center;
    gap: var(--sd-8);
    flex-wrap: wrap;
}

.szf-letter-exit {
    --fill: var(--szf-accent);
    display: inline-flex;
    align-items: center;
    min-height: var(--sd-34);
    padding: var(--sd-3) var(--sd-13);
    border: var(--sd-2) solid var(--szf-accent);
    border-radius: var(--szf-radius-pill);
    background: var(--szf-bg-soft);
    color: var(--szf-accent);
    font-family: var(--szf-font);
    font-size: var(--sd-13);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

/* ---------- Statisztika-sor ---------- */
.szf-stats-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--sd-13);
    padding-top: var(--sd-8);
    border-top: var(--sd-2) solid var(--szf-border);
    font-size: var(--sd-13);
    color: var(--szf-text-soft);
    font-weight: 600;
    flex-wrap: wrap;
    gap: var(--sd-8);
}

.szf-tip {
    font-family: var(--szf-font-fun);
    font-size: var(--sd-21);
    color: var(--szf-marine);
}

/* ---------- Tooltip ---------- */
.szf-tooltip {
    position: fixed;
    z-index: 9999;
    padding: var(--sd-8) var(--sd-13);
    background: var(--color-two, #013A63);
    border-radius: var(--sd-13);
    color: #fff;
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: var(--sd-13);
    font-weight: 600;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 var(--sd-5) var(--sd-13) color-mix(in srgb, #000 13%, transparent);
    animation: szfSlideIn var(--sd-stagger) var(--sd-ease);
}

/* ---------- Konfetti ---------- */
.szf-confetti {
    position: fixed;
    pointer-events: none;
    z-index: 9998;
    font-size: var(--sd-21);
    animation: szfConfettiFall var(--sd-calm-slow) var(--sd-ease) forwards;
}

@keyframes szfConfettiFall {
    0% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
    100% { opacity: 0; transform: translateY(var(--sd-144)) rotate(720deg) scale(0.34); }
}

/* ---------- Szótárváltás ---------- */
.szf-cloud-container.switching {
    animation: szfBounce var(--sd-hover-slow) var(--sd-ease);
}

@keyframes szfBounce {
    0% { transform: scale(1); }
    34% { transform: scale(0.98); }
    100% { transform: scale(1); }
}

/* ---------- Érintőképernyő: nagyobb célok ---------- */
@media (pointer: coarse) {
    .szf-pill,
    .szf-letter-exit,
    .szf-more-btn,
    .szf-back {
        min-height: var(--sd-55);
    }
}

/* ---------- Mobil ---------- */
@media (max-width: 609px) {
    .szf-wrap {
        padding: var(--sd-21) var(--sd-13);
    }

    .szf-search-box {
        max-width: none;
    }

    .szf-random-btn {
        flex: none;
        padding: var(--sd-8) var(--sd-13);
    }

    /* Mobilon a leírás a cím alá törik, a pont elmarad. */
    .szf-title-sep {
        display: none;
    }

    .szf-subtitle {
        flex-basis: 100%;
    }

    .szf-cloud-container {
        padding: var(--sd-13) var(--sd-5);
    }

    .szf-word--xl { font-size: var(--sd-21); }
    .szf-word--lg { font-size: var(--sd-21); }
    .szf-word--md { font-size: var(--sd-13); font-weight: 700; }

    .szf-dict-pills {
        justify-content: flex-start;
        flex-wrap: nowrap;
        padding-inline: var(--sd-21);
        /* a belső térköz a görgethető tartalom része legyen (a végén is) */
        width: max-content;
        min-width: 100%;
    }

    /* Az ABC-sor egy sorban, vízszintesen görgethető. */
    .szf-abc-scroll {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-inline: var(--sd-21);
    }

    /* Halvány fade a két szélen: látszik, hogy van még tartalom. A 21px-es
       belső térköz miatt a sor elején és végén a fade üres részre esik. */
    .szf-dict-selector,
    .szf-abc-scroll {
        scroll-padding-inline: var(--sd-21);
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--sd-21), #000 calc(100% - var(--sd-21)), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 var(--sd-21), #000 calc(100% - var(--sd-21)), transparent 100%);
    }

    .szf-abc-scroll::-webkit-scrollbar {
        display: none;
    }

    .szf-abc-letters {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .szf-abc-letter {
        flex: none;
        scroll-snap-align: center;
    }
}

/* ---------- Kevesebb mozgás ---------- */
@media (prefers-reduced-motion: reduce) {
    .szf-wrap *,
    .szf-wrap *::before,
    .szf-wrap *::after,
    .szf-tooltip,
    .szf-confetti {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================
   Magyarázat-kártya (szinonima-card.js) — definíciós szótárak
   Önálló blokk: a body-ra kerül, ezért saját változói vannak.
   Üveg (backdrop-filter) csak itt és a felhő konténerén. Animáció: csak
   transform + opacity, 377 ms. Asztalon a chipből nyílik (a transform-origin
   a chipnél van), mobilon alulról felcsúszó lap.
   ============================================ */
.szf-card,
.szf-card-scrim {
    --szf-blue: var(--color-four, #0285BA);
    --szf-navy: var(--color-two, #013A63);
    --szf-marine: #02497C;
    --szf-sky: #9fd3ff;
}

.szf-card {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--sd-8);
    width: min(var(--sd-377), calc(100vw - var(--sd-13) * 2));
    max-height: calc(100vh - var(--sd-34));
    padding: var(--sd-21);
    box-sizing: border-box;
    background: var(--color-one, #fff);
    border: var(--sd-2) solid color-mix(in srgb, var(--szf-navy) 13%, transparent);
    border-radius: var(--sd-21);
    box-shadow: 0 var(--sd-13) var(--sd-34) color-mix(in srgb, var(--szf-navy) 21%, transparent);
    color: var(--szf-navy);
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    opacity: 0;
    transform: scale(0.55);
    transition: opacity var(--sd-hover-slow) var(--sd-ease), transform var(--sd-hover-slow) var(--sd-ease);
    outline: none;
}

.szf-card[hidden],
.szf-card-scrim[hidden] {
    display: none;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .szf-card {
        background: color-mix(in srgb, var(--color-one, #fff) 89%, transparent);
        -webkit-backdrop-filter: blur(var(--sd-13));
        backdrop-filter: blur(var(--sd-13));
    }
}

.szf-card.is-open {
    opacity: 1;
    transform: scale(1);
}

.szf-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sd-13);
}

.szf-card-title {
    margin: 0;
    font-size: var(--sd-21);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--szf-navy);
    overflow-wrap: anywhere;
}

.szf-card-close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sd-34);
    height: var(--sd-34);
    margin: calc(var(--sd-8) * -1) calc(var(--sd-8) * -1) 0 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--szf-navy);
    cursor: pointer;
    transition: background-color var(--sd-hover) var(--sd-ease);
}

.szf-card-close:hover {
    background: color-mix(in srgb, var(--szf-blue) 13%, transparent);
}

.szf-card-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    font-size: var(--sd-16);
    line-height: 1.618;
}

.szf-card-see {
    display: inline;
    padding: 0 var(--sd-5);
    border: 0;
    border-radius: var(--sd-13);
    background: color-mix(in srgb, var(--szf-blue) 13%, #fff);
    color: color-mix(in srgb, var(--szf-blue) 34%, #000);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--sd-hover) var(--sd-ease);
}

.szf-card-see:hover {
    background: color-mix(in srgb, var(--szf-blue) 21%, #fff);
}

.szf-card-close:focus-visible,
.szf-card-see:focus-visible {
    outline: var(--sd-2) solid var(--szf-marine);
    outline-offset: var(--sd-2);
}

.szf-card-scrim {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: color-mix(in srgb, var(--szf-navy) 34%, transparent);
    opacity: 0;
    transition: opacity var(--sd-hover-slow) var(--sd-ease);
}

.szf-card-scrim.is-open {
    opacity: 1;
}

/* Mobil: alulról felcsúszó lap. */
@media (max-width: 609px) {
    .szf-card {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        max-height: calc(100vh - var(--sd-89));
        padding: var(--sd-21) var(--sd-21) calc(var(--sd-21) + env(safe-area-inset-bottom, 0px));
        border-radius: var(--sd-21) var(--sd-21) 0 0;
        border-bottom: 0;
        opacity: 0;
        transform: translateY(100%);
        transform-origin: 50% 100%;
    }

    .szf-card.is-open {
        opacity: 1;
        transform: translateY(0);
    }

    .szf-card::before {
        content: '';
        align-self: center;
        width: var(--sd-55);
        height: var(--sd-5);
        margin-top: calc(var(--sd-8) * -1);
        border-radius: var(--sd-5);
        background: color-mix(in srgb, var(--szf-navy) 21%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .szf-card,
    .szf-card-scrim,
    .szf-card-close,
    .szf-card-see {
        transition: none !important;
    }
}

/* ============================================
   Vízszintes görgetés (docs/STYLE-INDEX.md §17)
   A swipe-navigation (swipe-nav.css) a html, body, a div-ek és a
   .wp-block-post-content elemekre `touch-action: pan-y !important`-ot tesz,
   ami az érintős vízszintes görgetést minden gyerek-görgetőben tiltja (a
   szótár-pillek és az ABC-sor sem mozdult). A /szotar/ oldalon (ahol van
   .szf-wrap) ezt visszaállítjuk; azonos fontosság, nagyobb specificitás.
   ============================================ */
html:has(.szf-wrap),
body:has(.szf-wrap),
html:has(.szf-wrap) .wp-block-post-content,
html:has(.szf-wrap) .single_class_swipe,
html:has(.szf-wrap) .szf-wrap,
html:has(.szf-wrap) .szf-wrap * {
    touch-action: auto !important;
}