/* ══ Hoří ══════════════════════════════════════════════════════════════════
   Denní slovní hra pro kviz.kvizky.cz.
   Barva se odvozuje plynule od teploty, nikdy od slovního stupně, a nikdy
   nenese informaci sama – teplota ve °C je vždy vypsaná textem.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
    --hori-panel:    #141a26;
    --hori-panel-2:  #1b2230;
    --hori-line:     rgba(255, 255, 255, 0.09);
    --hori-text:     #f2f4f8;
    --hori-dim:      #93a0b5;
    --hori-zlata:    #ffcb00;
}

/* Na body jen plátno stránky. Font ani barvu tu nenastavovat – prosáklo by
   to do sdíleného menu a zápatí, kde má platit styl webu. */
body {
    background: radial-gradient(ellipse at top, #253251 0%, #131722 48%, #05070c 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
}

.main { min-height: 100vh; box-sizing: border-box; }
.doc  { padding-top: 80px; padding-bottom: 96px; min-height: 120vh; }

.hori-wrap {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 0 12px;
    font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--hori-text);
}

/* ── Hlavička ───────────────────────────────────────────────────────────── */

/* Nadpis nese logo. Zůstává jako h1 s alt textem, aby stránka měla
   čitelný nadpis i pro roboty a čtečky. */
.hori-title {
    text-align: center;
    margin: 0 0 14px;
    line-height: 1;
}
.hori-title img {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 250px;
    height: auto;
    transition: max-width 0.35s cubic-bezier(0.22, 0.9, 0.24, 1);
}
/* Po spuštění hry logo ustoupí – hlavní je herní plocha */
.hori-title.male img { max-width: 120px; }
.hori-title a { display: block; }
.hori-podtitul {
    text-align: center;
    color: var(--hori-dim);
    font-size: 0.9rem;
    margin: 0 0 18px;
}

/* ── Přihlašovací panel ─────────────────────────────────────────────────── */

.hori-gate {
    background: var(--hori-panel);
    border: 1px solid var(--hori-line);
    border-radius: 16px;
    padding: 22px 18px;
    max-width: 380px;
    margin: 0 auto 20px;
    text-align: center;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}
.hori-gate.compact {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}
.hori-gate-title {
    font-weight: 800;
    letter-spacing: 0.1em;
    font-size: 0.95rem;
    color: var(--hori-dim);
    margin-bottom: 4px;
}
.hori-gate small { display: block; color: var(--hori-dim); font-size: 0.78rem; margin-bottom: 12px; }
.hori-gate input {
    width: 100%;
    background: var(--hori-panel-2);
    border: 1px solid var(--hori-line);
    border-radius: 10px;
    color: var(--hori-text);
    padding: 11px 13px;
    font-size: 1rem;
    margin-bottom: 9px;
}
.hori-gate input:focus {
    outline: none;
    border-color: #f28c28;
    box-shadow: 0 0 0 3px rgba(242, 140, 40, 0.18);
}
.hori-prezdivka { color: var(--hori-dim); font-size: 0.72rem; letter-spacing: 0.08em; margin: 6px 0 4px; }
.hori-sex {
    background: var(--hori-panel-2);
    border: 1px solid var(--hori-line);
    color: var(--hori-text);
    border-radius: 8px;
    width: 42px; height: 34px;
    font-size: 1.1rem;
    margin: 0 3px 10px;
    cursor: pointer;
}
.hori-sex:hover { border-color: #f28c28; color: #f28c28; }

.hori-btn {
    display: inline-block;
    border: none;
    border-radius: 11px;
    padding: 13px 26px;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    background: linear-gradient(180deg, #f59801 0%, #d71500 100%);
    color: #fff;
    transition: transform 0.15s ease, filter 0.2s ease;
}
.hori-btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08); }
.hori-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* Hlavní tlačítko není přes celou šířku – vypadá to vzdušněji */
.hori-btn-blok { display: block; width: 100%; max-width: 210px; margin: 0 auto; }

.hori-maly {
    background: transparent;
    border: 1px solid var(--hori-line);
    color: var(--hori-dim);
    border-radius: 9px;
    padding: 8px 15px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.hori-maly:hover { color: var(--hori-text); border-color: rgba(255, 255, 255, 0.3); }
.hori-akce { display: flex; justify-content: center; gap: 9px; flex-wrap: wrap; margin-top: 14px; }

/* ── Stavová lišta: pokusy vlevo, den na středu, ovládání vpravo ────────── */

.hori-stav-lista {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--hori-panel);
    border: 1px solid var(--hori-line);
    border-radius: 12px;
    padding: 9px 12px;
    margin-bottom: 12px;
}
.hori-stav-blok.vlevo  { flex: 1 1 auto; min-width: 0; text-align: left; }
/* Absolutní střed, aby datum sedělo přesně uprostřed bez ohledu na to,
   jak široké jsou bloky po stranách. */
.hori-stav-blok.stred {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
}
.hori-stav-blok.vpravo { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 5px; }
.hori-stav-lista .cislo { font-weight: 800; font-size: 1.05rem; line-height: 1.2; }
.hori-stav-lista .popis { color: var(--hori-dim); font-size: 0.66rem; letter-spacing: 0.08em; }

.hori-ikona {
    background: transparent;
    border: 1px solid var(--hori-line);
    border-radius: 8px;
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--hori-dim);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.hori-ikona svg { width: 18px; height: 18px; display: block; }
.hori-ikona:hover { color: var(--hori-text); border-color: rgba(255, 255, 255, 0.3); }
.hori-ikona.akt {
    background: rgba(242, 140, 40, 0.16);
    border-color: rgba(242, 140, 40, 0.5);
    color: #ffb14e;
}

/* ── Vstupní pole ───────────────────────────────────────────────────────── */

.hori-vstup { display: flex; gap: 8px; margin-bottom: 12px; }
.hori-vstup input {
    flex: 1 1 auto;
    min-width: 0;
    background: #0d1320;
    border: 2px solid rgba(242, 140, 40, 0.55);
    border-radius: 12px;
    color: var(--hori-text);
    padding: 13px 15px;
    font-size: 1.05rem;
    font-weight: 600;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hori-vstup input::placeholder { color: #5f6c82; font-weight: 400; }
.hori-vstup input:focus {
    outline: none;
    border-color: #f28c28;
    box-shadow: 0 0 0 4px rgba(242, 140, 40, 0.22);
}
.hori-vstup input:disabled { opacity: 0.5; border-color: var(--hori-line); }
.hori-vstup button { flex: 0 0 auto; padding: 13px 20px; }

.hori-hlaska {
    min-height: 20px;
    font-size: 0.86rem;
    text-align: center;
    margin-bottom: 10px;
    color: #ffb14e;
}
.hori-hlaska.ok { color: #6fd3a3; }

/* Zavrtění vstupním polem u neznámého slova */
@keyframes horiTres {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-7px); }
    40%      { transform: translateX(6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(3px); }
}
.hori-tres { animation: horiTres 0.4s ease; }

/* ── Poslední odeslaný tip ──────────────────────────────────────────────── */

.hori-posledni {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: var(--hori-panel);
    border: 1px solid var(--hori-line);
    margin-bottom: 12px;
}
.hp-vypln {
    position: absolute;
    inset: 0;
    background: var(--hp-barva, #1b3a6b);
    transform: scaleX(0);
    transform-origin: left center;
}
.hp-obsah {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    /* Bílý text musí zůstat čitelný i na žluté a světle zelené části škály */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 14px rgba(0, 0, 0, 0.55);
}
.hp-slovo {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.35rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hp-udaje { flex: 0 0 auto; text-align: right; line-height: 1.2; }
.hp-stupen { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; }
.hp-teplota { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── Archivní režim a výběr dnů ─────────────────────────────────────────── */

.hori-archiv-pruh {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    background: rgba(47, 163, 199, 0.12);
    border: 1px solid rgba(47, 163, 199, 0.45);
    border-radius: 10px;
    padding: 9px 12px;
    margin-bottom: 14px;
    font-size: 0.84rem;
    color: #9fdcef;
}
.hori-archiv-zpet {
    flex: 0 0 auto;
    border: 1px solid rgba(47, 163, 199, 0.5);
    border-radius: 7px;
    padding: 4px 10px;
    font-size: 0.74rem;
    color: #9fdcef;
    text-decoration: none;
    white-space: nowrap;
}
.hori-archiv-zpet:hover {
    background: rgba(47, 163, 199, 0.16);
    color: #cdeef8;
    text-decoration: none;
}

.hori-archiv-karta { max-width: 420px; }
.hori-archiv-popis { color: var(--hori-dim); font-size: 0.82rem; margin: 0 0 12px; }
/* Sedm dnů se musí vejít i na mobil, proto úzké bloky a den před datem */
.hori-archiv-dny {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(66px, 1fr));
    gap: 5px;
}
.hori-archiv-den {
    display: block;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--hori-line);
    border-radius: 8px;
    padding: 6px 3px;
    text-align: center;
    text-decoration: none;
    color: var(--hori-text);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
/* Bez podtržení a bez modré – odkaz se má chovat jako dlaždice */
.hori-archiv-den:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(242, 140, 40, 0.55);
    color: var(--hori-text);
    text-decoration: none;
    transform: translateY(-2px);
}
.hori-archiv-den .datum {
    display: block; font-size: 0.82rem; font-weight: 800; white-space: nowrap;
}
.hori-archiv-den .stav {
    display: block; font-size: 0.6rem; color: var(--hori-dim); margin-top: 2px;
    line-height: 1.25;
}
/* Dohraný den je ztlumený, rozehraný naopak vypíchnutý */
.hori-archiv-den.hotovo { opacity: 0.55; }
.hori-archiv-den.rozehrano { border-color: var(--hori-zlata); }
.hori-archiv-den.rozehrano .stav { color: var(--hori-zlata); }

/* ── Nejčastější tipy dne v závěrečné kartě ─────────────────────────────── */

.hori-nejcastejsi { margin: 14px 0 4px; }
.hori-nejcastejsi .titulek {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--hori-dim);
    margin-bottom: 6px;
}
.hori-nejcastejsi ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
}
.hori-nejcastejsi li {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--hori-line);
    border-radius: 4px;
    padding: 3px 9px;
    font-size: 0.8rem;
}
.hori-nejcastejsi li .pocet { color: var(--hori-dim); font-size: 0.72em; margin-left: 5px; }

/* ── Slovo předchozího dne ──────────────────────────────────────────────── */

/* Slovo samo se ukazuje v okně .hori-modal, tady je jen tlačítko */
.hori-vcera { text-align: center; margin: 4px 0 18px; }
.hori-vcera button { border-style: dashed; border-color: rgba(242, 140, 40, 0.55); color: #f69701; }
.hori-vcera button:hover { background: rgba(242, 140, 40, 0.1); }

/* ── Upozornění na zlom dne ─────────────────────────────────────────────── */

.hori-novy-den {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    background: rgba(242, 140, 40, 0.12);
    border: 1px solid rgba(242, 140, 40, 0.45);
    border-radius: 10px;
    padding: 9px 12px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: #ffce9a;
}

/* ── Indicie ────────────────────────────────────────────────────────────── */

.hori-indicie {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.hori-indicie:empty { display: none; }

.indicie-tag {
    display: inline-flex;
    align-items: baseline;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--ind-barva, #f28c28);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--hori-text);
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
    transition: background-color 0.2s ease, transform 0.15s ease;
}
.indicie-tag:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-1px); }

/* Okno s právě odemčenou indicií */
.hori-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(4, 7, 13, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.hori-modal-karta {
    background: linear-gradient(160deg, #1d2536 0%, #2b1b21 100%);
    border: 2px solid var(--ind-barva, #f28c28);
    border-radius: 18px;
    padding: 24px 28px;
    text-align: center;
    max-width: 330px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    will-change: transform, opacity;
}
.hori-modal-karta.prilet { animation: indiciePrilet 0.45s cubic-bezier(0.18, 0.9, 0.24, 1); }
@keyframes indiciePrilet {
    from { opacity: 0; transform: scale(0.7) translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.im-nadpis {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: var(--ind-barva, #f28c28);
    margin-bottom: 8px;
}
/* Slovo v okně – jeden formát pro všechna tři použití: indicie,
   včerejší slovo na herní stránce i hledané slovo v žebříčku. */
.im-slovo {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 8px;
    word-break: break-word;
    text-transform: uppercase;
    color: var(--hori-zlata);
}
.im-udaje { display: flex; justify-content: center; gap: 12px; align-items: baseline; }
.im-stupen { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; color: var(--hori-dim); }
.im-teplota {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ind-barva, #f28c28);
    font-variant-numeric: tabular-nums;
}
.im-popis { color: var(--hori-dim); font-size: 0.8rem; margin-top: 12px; }

/* ── Seznam tipů – tlumený, ať nepřebíjí poslední tip ───────────────────── */

.hori-tipy { position: relative; }

.tip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    /* Barva v plné sytosti až po hodnotu teploty, zbytek řádku neutrální */
    background-color: rgba(255, 255, 255, 0.05);
    background-image: linear-gradient(90deg,
        var(--tip-barva) 0%,
        var(--tip-barva) var(--tip-t),
        transparent var(--tip-t));
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 7px 11px;
    margin-bottom: 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    will-change: transform;
}
.tip-slovo {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tip-teplota {
    flex: 0 0 auto;
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Rámeček má jen poslední zadaný tip, ostatní jsou bez něj.
   Zlatá je stejná jako u zvýraznění vlastního řádku v žebříčcích. */
.tip.tip-posledni {
    border-color: var(--hori-zlata);
    box-shadow: 0 0 0 1px var(--hori-zlata), 0 0 16px rgba(255, 203, 0, 0.3);
}

/* Nový panel přiletí a zasune se na své místo */
@keyframes horiPrilet {
    from { opacity: 0; transform: translateY(-9px) scale(0.965); }
    to   { opacity: 1; transform: none; }
}
.tip.tip-novy { animation: horiPrilet 0.34s cubic-bezier(0.22, 0.9, 0.24, 1); }

/* Překonání dosud nejteplejšího tipu – krátká oslava */
@keyframes horiOslava {
    0%   { box-shadow: 0 0 0 0 rgba(255, 203, 0, 0.5); }
    100% { box-shadow: 0 0 0 12px rgba(255, 203, 0, 0); }
}
.tip.tip-oslava { animation: horiOslava 0.7s ease-out; }

/* ── Skrytí slov (aby je neprozradil screenshot) ────────────────────────── */

/* Vše s !important a s vypnutým background-clip: gradientový text
   (slovo dne) by se jinak obarvil vlastním pozadím a zůstal čitelný. */
.skryta-slova .tip-slovo,
.skryta-slova .hp-slovo,
.skryta-slova .slovo-dne,
.skryta-slova .indicie-tag .s,
.skryta-slova .hori-nejcastejsi li,
.skryta-slova .hori-nejcastejsi li .pocet {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    background: rgba(255, 255, 255, 0.15) !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    border-color: transparent !important;
    border-radius: 5px;
    text-shadow: none !important;
    user-select: none;
}

/* ── Karta konce hry ────────────────────────────────────────────────────── */

.hori-konec {
    background: linear-gradient(160deg, #1e2436 0%, #2a1c22 100%);
    border: 1px solid rgba(242, 194, 48, 0.35);
    border-radius: 16px;
    padding: 20px 18px;
    margin-bottom: 14px;
    text-align: center;
    animation: horiPrilet 0.4s cubic-bezier(0.22, 0.9, 0.24, 1);
}
.hori-konec h2 { font-size: 1.6rem; font-weight: 800; margin: 0 0 4px; }
.hori-konec .slovo-dne {
    display: inline-block;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #ffd66b 0%, #e8532b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    margin: 6px 0 10px;
}
.hori-konec p { color: var(--hori-dim); margin: 0 0 14px; font-size: 0.92rem; }
/* Uvození slova v kartě prohry – patří ke slovu pod ním, ne k odstavci nad */
.hori-konec .hori-bylo {
    margin: 0 0 2px;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.hori-nezapsano {
    background: rgba(232, 83, 43, 0.14);
    border: 1px solid rgba(232, 83, 43, 0.45);
    border-radius: 9px;
    padding: 9px 12px;
    font-size: 0.8rem;
    color: #ffb59a !important;
    margin: 0 0 14px !important;
}
.hori-konec .tlacitka { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }

.hori-odpocet {
    margin: 14px 0 0 !important;
    font-size: 0.82rem;
    color: var(--hori-dim) !important;
}
/* Číslice v proměnlivé šířce by odpočtem cukaly */
.hori-odpocet strong {
    color: var(--hori-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* ── Pravidla ───────────────────────────────────────────────────────────── */

.hori-pravidla {
    background: var(--hori-panel);
    border: 1px solid var(--hori-line);
    border-radius: 12px;
    padding: 0 14px;
    margin: 18px 0;
}
.hori-pravidla > summary {
    cursor: pointer;
    padding: 12px 0;
    font-weight: 700;
    font-size: 1rem;
    list-style: none;
    color: #f69701;
    text-align: center;
}
.hori-pravidla > summary::-webkit-details-marker { display: none; }
.hori-pravidla > summary::after { content: ' ▾'; opacity: 0.7; }
.hori-pravidla[open] > summary::after { content: ' ▴'; }

/* Pravidla jsou zároveň text pro vyhledávače – proto nadpisy, ne odrážky */
.hori-pravidla h2 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--hori-text);
    margin: 16px 0 4px;
}
.hori-pravidla h2:first-of-type { margin-top: 6px; }
.hori-pravidla p { color: var(--hori-dim); font-size: 0.88rem; line-height: 1.55; margin: 0 0 4px; }
.hori-pravidla p:last-child { margin-bottom: 14px; }
.hori-pravidla strong { color: var(--hori-text); }

/* ── Malá obrazovka ─────────────────────────────────────────────────────── */

@media (max-width: 400px) {
    .hori-title   { font-size: 2.15rem; }
    .hori-wrap    { padding: 0 9px; }
    .hori-ikona   { width: 31px; height: 31px; }
    .hp-slovo     { font-size: 1.2rem; }
    .hp-teplota   { font-size: 1.4rem; }
    .hori-vstup button { padding: 13px 15px; font-size: 0.95rem; }
    .hori-stav-lista .cislo { font-size: 0.95rem; }
}

/* ── Respekt k prefers-reduced-motion ───────────────────────────────────── */

/* Záložní pravidlo pro případ, že by neproběhl JavaScript – rozhoduje
   samo nastavení systému. Třídu .hori-anim přidává ladicí přepínač ?anim=1. */
@media (prefers-reduced-motion: reduce) {
    :root:not(.hori-anim) .hori-wrap,
    :root:not(.hori-anim) .hori-wrap * {
        transition: none !important;
        animation: none !important;
    }
    :root:not(.hori-anim) .hori-btn:hover:not(:disabled) { transform: none; }
}

/* Rozhodnutí, které udělal JavaScript (viz redukovanyPohyb v hori-game.js).
   Musí vypínat i inline transition, kterou si FLIP nastavuje na panelech. */
:root.hori-bez-anim .hori-wrap,
:root.hori-bez-anim .hori-wrap * {
    transition: none !important;
    animation: none !important;
}
:root.hori-bez-anim .hori-btn:hover:not(:disabled) { transform: none; }