:root {
    --od-panel:    #141a24;
    --od-panel-2:  #1c2432;
    --od-line:     rgba(255, 255, 255, 0.09);
    --od-text:     #eef2f7;
    --od-dim:      #8e9cb2;
    --od-akcent:   #c69169;
    --od-akcent-2: #96694a;
    --od-akcent-t: #2b1a0c;
    --od-razitko:  #d0402f;
    --od-zlata:    #ffcb00;
    --od-papir:    #ece6d8;
    --od-papir-2:  #e2dbc9;
    --od-inkoust:  #1d1c18;
    --od-cerna:    #14161c;
}

body {
    background: radial-gradient(ellipse at top, #1d2a3d 0%, #0d121b 52%, #04060a 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
}

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

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

.od-logo {
    text-align: center;
    margin: 0 0 10px;
    line-height: 1;
}
.od-logo img {
    width: 100%;
    max-width: 340px;
    height: auto;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55));
}
.od-logo a { display: inline-block; }

.od-logo.male { margin-bottom: 14px; }
.od-logo.male img { max-width: 190px; }
.od-logo.skryty { display: none; }

.od-logo:not(.male) img {
    animation: od-otisk 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
    transform-origin: 50% 60%;
}

@keyframes od-otisk {
    0%   { opacity: 0; transform: scale(2.4) rotate(9deg); filter: blur(7px) drop-shadow(0 0 0 transparent); }
    55%  { opacity: 1; transform: scale(0.9) rotate(-3deg); filter: blur(0) drop-shadow(0 10px 22px rgba(0, 0, 0, 0.6)); }
    72%  { transform: scale(1.06) rotate(1.5deg); }
    86%  { transform: scale(0.98) rotate(-0.6deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); filter: blur(0) drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55)); }
}

.od-podtitul {
    text-align: center;
    color: var(--od-dim);
    font-size: 0.92rem;
    margin: 0 0 22px;
}
.od-podtitul.skryty { display: none; }

.od-archiv-pruh {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
    background: rgba(198, 145, 105, 0.08);
    border: 1px solid rgba(198, 145, 105, 0.28);
    border-radius: 10px;
    padding: 9px 14px;
    margin: 0 auto 18px;
    max-width: 560px;
    font-size: 0.88rem;
    color: var(--od-dim);
}
.od-archiv-zpet { color: var(--od-akcent); font-weight: 700; }

.od-gate {
    background: var(--od-panel);
    border: 1px solid var(--od-line);
    border-radius: 16px;
    padding: 24px 20px;
    max-width: 380px;
    margin: 0 auto 20px;
    text-align: center;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
}
.od-gate.compact { background: transparent; border: none; box-shadow: none; padding: 0; }
.od-gate-title {
    font-weight: 800;
    letter-spacing: 0.12em;
    font-size: 0.92rem;
    color: var(--od-dim);
    margin-bottom: 4px;
}
.od-gate small { display: block; color: var(--od-dim); font-size: 0.76rem; margin-bottom: 12px; }
.od-gate input {
    width: 100%;
    background: var(--od-panel-2);
    border: 1px solid var(--od-line);
    border-radius: 10px;
    color: var(--od-text);
    padding: 11px 13px;
    font-size: 1rem;
    margin-bottom: 9px;
}
.od-gate input:focus {
    outline: none;
    border-color: var(--od-akcent);
    box-shadow: 0 0 0 3px rgba(198, 145, 105, 0.2);
}
.od-prezdivka { color: var(--od-dim); font-size: 0.7rem; letter-spacing: 0.09em; margin: 6px 0 4px; }
.od-sex {
    background: var(--od-panel-2);
    border: 1px solid var(--od-line);
    color: var(--od-text);
    border-radius: 8px;
    width: 42px; height: 34px;
    font-size: 1.1rem;
    margin: 0 3px 12px;
    cursor: pointer;
}
.od-sex:hover { border-color: var(--od-akcent); color: var(--od-akcent); }

.od-btn {
    border: none;
    border-radius: 11px;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    background: linear-gradient(180deg, var(--od-akcent) 0%, var(--od-akcent-2) 100%);
    color: var(--od-akcent-t);
    transition: transform 0.15s ease, filter 0.2s ease;
}
.od-btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.1); }
.od-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.od-btn-blok { display: block; width: 100%; max-width: 230px; margin: 0 auto; }

.od-maly {
    background: transparent;
    border: 1px solid var(--od-line);
    color: var(--od-dim);
    border-radius: 9px;
    padding: 8px 15px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.od-maly:hover { border-color: var(--od-akcent); color: var(--od-akcent); }

.od-akce { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.od-akce-hra { margin-top: 6px; }

.skryty { display: none !important; }

.od-plocha.pred-startem {
    display: block;
    min-height: 0;
}
.od-plocha.pred-startem .od-sloupec {
    position: static;
    align-items: center;
    margin-bottom: 18px;
}

.od-plocha {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    grid-template-areas:
        "zprava  zprava"
        "sloupec spis"
        "sloupec pravidla";
    grid-template-rows: auto auto 1fr;
    gap: 14px 20px;
    align-items: start;
    min-height: calc(100vh - 190px);
}

.od-sloupec  { grid-area: sloupec; }
.od-pravy    { grid-area: spis; }
.od-pravidla { grid-area: pravidla; }
.od-novy-den { grid-area: zprava; }

/* Levý sloupec jede s horním okrajem. Reklama je uvnitř, takže ji nic
   nepřejíždí; vlastní rolování se zapne jen když se sloupec nevejde. */
.od-sloupec {
    position: sticky;
    top: 78px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.od-sloupec > * { flex: 0 0 auto; }

.od-levy, .od-vedlejsi {
    background: var(--od-panel);
    border: 1px solid var(--od-line);
    border-radius: 16px;
    padding: 14px 13px 15px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.42);
}

.od-novy-den {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
    background: rgba(255, 203, 0, 0.09);
    border: 1px solid rgba(255, 203, 0, 0.3);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.86rem;
    color: #ffdd7a;
}

.od-vstup { display: flex; gap: 8px; margin-top: 14px; }
.od-vstup input {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--od-panel-2);
    border: 1px solid var(--od-line);
    border-radius: 11px;
    color: var(--od-text);
    padding: 12px 14px;
    font-size: 1.02rem;
}
.od-vstup input:focus {
    outline: none;
    border-color: var(--od-akcent);
    box-shadow: 0 0 0 3px rgba(198, 145, 105, 0.18);
}
.od-vstup input:disabled { opacity: 0.45; }
.od-vstup .od-btn { flex: 0 0 auto; padding: 12px 18px; }

.od-hlaska {
    min-height: 20px;
    font-size: 0.83rem;
    color: var(--od-dim);
    text-align: center;
    margin: 8px 0 0;
}
.od-hlaska.uspech { color: var(--od-akcent); font-weight: 700; }
.od-hlaska.chyba  { color: #ff9a8a; }

.od-stat {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
    gap: 6px;
    margin: 0 0 12px;
}
.od-stat-box {
    background: var(--od-panel-2);
    border: 1px solid var(--od-line);
    border-radius: 11px;
    padding: 9px 6px;
    text-align: center;
}
.od-stat-box .popis { font-size: 0.55rem; letter-spacing: 0.08em; color: var(--od-dim); }
.od-stat-box .cislo { font-size: 1.1rem; font-weight: 800; line-height: 1.25; }
#s-procenta { color: var(--od-akcent); }
#s-skore { color: var(--od-zlata); }
#s-skore.zaporne { color: #e2795f; }

.od-postup { margin-bottom: 2px; }
.od-postup-cara {
    position: relative;
    height: 9px;
    border-radius: 99px;
    background: var(--od-panel-2);
    border: 1px solid var(--od-line);
    overflow: hidden;
}
.od-postup-cara span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--od-akcent-2), var(--od-akcent));
    transition: width 0.45s cubic-bezier(0.22, 0.9, 0.24, 1);
}
.od-postup-popis {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 0.76rem;
    color: var(--od-dim);
    margin-top: 6px;
}
.od-postup-popis strong { color: var(--od-text); }
.od-cas {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.42);
    font-variant-numeric: tabular-nums;
}

.od-zvuk {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 14px 0 0;
    cursor: pointer;
    color: var(--od-dim);
    font-size: 0.84rem;
    user-select: none;
}
.od-zvuk input[type=checkbox] {
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: var(--od-akcent);
}
.od-zvuk-ikona { font-size: 1rem; }

.od-historie-hlava {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    color: var(--od-dim);
    margin-bottom: 8px;
}
.od-razeni { display: flex; gap: 4px; }
.od-razeni-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--od-dim);
    border-radius: 7px;
    padding: 3px 7px;
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.od-razeni-btn.akt { border-color: var(--od-line); color: var(--od-akcent); background: var(--od-panel-2); }

.od-historie {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.od-tip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--od-panel-2);
    border: 1px solid var(--od-line);
    border-radius: 7px;
    padding: 2px 6px;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--od-dim);
}
.od-tip.nalez { border-color: rgba(198, 145, 105, 0.45); color: var(--od-text); }
.od-tip.nalez .pocet {
    background: var(--od-akcent);
    color: var(--od-akcent-t);
    border-radius: 99px;
    padding: 0 5px;
    font-size: 0.66rem;
    font-weight: 800;
}
.od-tip.mimo { opacity: 0.62; text-decoration: line-through; }
.od-tip.posledni { box-shadow: 0 0 0 2px rgba(255, 203, 0, 0.45); }

.od-reklama {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 250px;
    position: relative;
    z-index: 1;
}

.od-pravy { min-width: 0; }

.od-spis {
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.014) 0 2px, transparent 2px 4px),
        linear-gradient(160deg, var(--od-papir) 0%, var(--od-papir-2) 100%);
    border-radius: 8px;
    padding: 20px 22px 26px;
    color: var(--od-inkoust);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.35);
    position: relative;
    overflow: hidden;
}
.od-spis::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 60px rgba(90, 70, 40, 0.16);
}
.od-spis-hlava {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    border-bottom: 2px solid rgba(29, 28, 24, 0.25);
    padding-bottom: 10px;
    margin-bottom: 14px;
    font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'DejaVu Sans Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: rgba(29, 28, 24, 0.62);
}
.od-razitko {
    border: 2px solid var(--od-razitko);
    color: var(--od-razitko);
    border-radius: 4px;
    padding: 2px 8px;
    font-weight: 800;
    letter-spacing: 0.16em;
    transform: rotate(-3deg);
    opacity: 0.85;
}
.od-spis.hotovo .od-razitko { border-color: var(--od-akcent-2); color: var(--od-akcent-2); }
.od-spis-udaj { margin-left: auto; }
.od-spis-hlava .od-spis-udaj + .od-spis-udaj { margin-left: 0; }

.od-spis-titulek {
    font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'DejaVu Sans Mono', monospace;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--od-inkoust);
    margin: 0 0 14px;
    min-height: 1.4em;
}
.od-spis-titulek .od-blok { height: 1.15em; vertical-align: -0.22em; }
.od-titulek-slovo { }

.od-text {
    font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'DejaVu Sans Mono', monospace;
    font-size: 0.95rem;
    line-height: 2.05;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.od-blok {
    position: relative;
    display: inline-block;
    width: calc(var(--d) * 1ch);
    max-width: 100%;
    height: 1.05em;
    vertical-align: -0.2em;
    background: linear-gradient(180deg, #23262e 0%, var(--od-cerna) 100%);
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
    cursor: pointer;
}
.lze-odhalit .od-blok {
    background: linear-gradient(180deg, #2c3140 0%, #191d26 100%);
    box-shadow: inset 0 0 0 1px rgba(198, 145, 105, 0.45);
}
.lze-odhalit .od-blok:hover {
    box-shadow: inset 0 0 0 1px rgba(198, 145, 105, 0.8);
}

.od-blok.vybrany::after {
    content: attr(data-pismen);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--od-dim);
}
.od-blok.vybrany {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.lze-odhalit .od-blok.k-odhaleni {
    background: linear-gradient(180deg, var(--od-akcent-2) 0%, #6d4a31 100%);
    box-shadow: 0 0 0 2px rgba(198, 145, 105, 0.75);
}
.od-blok.k-odhaleni::after { color: var(--od-papir); }

.od-odhaleni-pruh {
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}
.od-odhaleni-ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--od-akcent-2);
    color: #fff;
    cursor: help;
}
.od-odhaleni-ikona:focus { outline: none; box-shadow: 0 0 0 2px var(--od-papir); }
.od-odhaleni-ikona svg { width: 17px; height: 17px; fill: currentColor; }

.od-slovo {
    border-radius: 2px;
    transition: background-color 1.1s ease, color 1.1s ease, box-shadow 1.1s ease;
}

.od-slovo.nove {
    background: var(--od-zlata);
    color: var(--od-inkoust);
    box-shadow: 0 0 0 4px var(--od-zlata), 0 0 22px rgba(255, 203, 0, 0.85);
    animation: od-odkryti 0.65s cubic-bezier(0.2, 1.4, 0.35, 1);
}

@keyframes od-odkryti {
    0%   { transform: scale(0.7); filter: blur(2px); opacity: 0.2; }
    45%  { transform: scale(1.22); filter: blur(0); opacity: 1; }
    75%  { transform: scale(0.98); }
    100% { transform: scale(1); }
}

.od-slovo.pero {
    text-decoration: underline;
    text-decoration-color: var(--od-razitko);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.od-modal {
    position: fixed;
    inset: 0;
    background: rgba(3, 6, 12, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 3000;
}
.od-modal-karta {
    background: var(--od-panel);
    border: 1px solid var(--od-line);
    border-radius: 18px;
    padding: 24px 22px;
    max-width: 460px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    text-align: center;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}
.od-zamek-text {
    color: var(--od-text);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0 0 18px;
}

.od-modal-nadpis {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    color: var(--od-dim);
    margin-bottom: 14px;
}
.od-btn-vyhra {
    width: 100%;
    background: linear-gradient(180deg, #ffd23f 0%, #f2a10a 100%);
    color: #3a2600;
    box-shadow: 0 0 24px rgba(255, 203, 0, 0.35);
}

.od-skore {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--od-zlata);
    margin-bottom: 8px;
}

.od-tip-obal { position: relative; }
.od-tip-obal::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    width: max-content;
    max-width: 260px;
    background: var(--od-cerna);
    color: var(--od-papir);
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: center;
    white-space: normal;
    padding: 7px 10px;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 30;
}
.od-tip-obal:hover::after,
.od-tip-obal:focus::after,
.od-tip-obal:focus-visible::after,
.od-tip-obal.tip-otevreny::after { opacity: 1; }

.od-odpocet {
    background: var(--od-panel);
    border: 1px solid var(--od-line);
    border-radius: 16px;
    padding: 18px 14px 20px;
    text-align: center;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.42);
}
.od-odpocet .popis {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    color: var(--od-dim);
    margin-bottom: 8px;
}
.od-odpocet .cislo {
    font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', monospace;
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--od-akcent);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.od-vysledek-panel {
    background: var(--od-panel);
    border: 1px solid var(--od-line);
    border-radius: 16px;
    padding: 18px 16px 20px;
    margin-bottom: 16px;
    text-align: center;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.42);
}
.od-vysledek-panel .od-konec-mriz { max-width: 520px; margin-left: auto; margin-right: auto; }

.od-pohar {
    width: 140px;
    height: 140px;
    max-width: 45%;
    margin-bottom: 4px;
    filter: drop-shadow(0 8px 20px rgba(255, 203, 0, 0.28));
}

.od-vyhra {
    font-size: 2.1rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: var(--od-akcent);
    text-shadow: 0 0 26px rgba(198, 145, 105, 0.55);
    margin: 6px 0 2px;
}

.od-konec-titulek {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    margin: 4px 0 6px;
}
.od-konec-podtitul { color: var(--od-dim); font-size: 0.86rem; margin-bottom: 16px; }
.od-konec-mriz { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; }
.od-konec-box {
    background: var(--od-panel-2);
    border: 1px solid var(--od-line);
    border-radius: 11px;
    padding: 10px 6px;
}
.od-konec-box .popis { font-size: 0.6rem; letter-spacing: 0.12em; color: var(--od-dim); }
.od-konec-box .cislo { font-size: 1.3rem; font-weight: 800; }
.od-konec-akce { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* Zaverecna karta je sirsi nez ostatni modaly. Ve 460 px se pohar, nadpis
   a sest statistik ve dvou sloupcich naskladaji na tri rady a karta prerost
   88vh, takze se musela rolovat i na sirokem monitoru. Na tri sloupce vyjdou
   statistiky na dva rady a karta se vejde celá. */
@media (min-width: 720px) {
    #konec-modal .od-modal-karta { max-width: 660px; padding: 26px 28px; }
    #konec-modal .od-konec-mriz { grid-template-columns: repeat(3, 1fr); }
    #konec-modal .od-pohar { width: 104px; height: 104px; }
    #konec-modal .od-vyhra { font-size: 1.8rem; }
    #konec-modal .od-konec-titulek { font-size: 1.3rem; }
    #konec-modal .od-konec-podtitul { margin-bottom: 12px; }
}

.od-archiv-dny { display: grid; gap: 6px; margin-bottom: 12px; }
.od-archiv-den {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    background: var(--od-panel-2);
    border: 1px solid var(--od-line);
    border-radius: 10px;
    padding: 9px 12px;
    color: var(--od-text);
    font-size: 0.85rem;
}
.od-archiv-den:hover { border-color: var(--od-akcent); color: var(--od-text); text-decoration: none; }
.od-archiv-den .stav { color: var(--od-dim); font-size: 0.78rem; }
.od-archiv-den.hotovo { opacity: 0.6; }
.od-archiv-den.rozehrano { border-color: rgba(255, 203, 0, 0.4); }
.od-archiv-popis { color: var(--od-dim); font-size: 0.78rem; margin: 10px 0 14px; }

.od-wrap-uzky { max-width: 720px; }

.od-prepinac {
    display: flex;
    gap: 6px;
    justify-content: center;
    background: var(--od-panel);
    border: 1px solid var(--od-line);
    border-radius: 12px;
    padding: 5px;
    max-width: 420px;
    margin: 0 auto 10px;
}
.od-prepinac-btn {
    flex: 1 1 0;
    text-align: center;
    padding: 9px 10px;
    border-radius: 9px;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--od-dim);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.od-prepinac-btn:hover { color: var(--od-text); text-decoration: none; }
.od-prepinac-btn.akt {
    background: linear-gradient(180deg, var(--od-akcent) 0%, var(--od-akcent-2) 100%);
    color: var(--od-akcent-t);
}

.od-datum-radek {
    text-align: center;
    color: var(--od-dim);
    font-size: 0.86rem;
    letter-spacing: 0.06em;
    margin: 0 0 20px;
}

.od-sekce {
    text-align: center;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--od-text);
    margin: 26px 0 14px;
}
.od-sekce::after {
    content: "";
    display: block;
    width: 68px;
    height: 3px;
    margin: 8px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--od-akcent), transparent);
}

.od-razeni-velke {
    justify-content: center;
    gap: 6px;
    margin-bottom: 12px;
}
.od-razeni-velke .od-razeni-btn { font-size: 0.8rem; padding: 7px 16px; }

.od-spis-vysledky { margin-bottom: 18px; }
.od-spis-otevrit {
    cursor: pointer;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 800;
    color: var(--od-inkoust);
    letter-spacing: 0.03em;
    list-style: none;
}
.od-spis-otevrit::marker { content: ""; }
.od-spis-otevrit::before { content: "▸ "; }
.od-spis-vysledky[open] .od-spis-otevrit { margin-bottom: 12px; }
.od-spis-vysledky[open] .od-spis-otevrit::before { content: "▾ "; }
.od-spis-zdroj {
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.74rem;
    color: rgba(29, 28, 24, 0.55);
    margin: 14px 0 0;
    word-break: break-all;
}
.od-spis-zdroj a { color: rgba(29, 28, 24, 0.75); }
.od-cekani { text-align: center; }

.od-dny {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
}
.od-dny-datum {
    text-align: center;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin: 0;
    color: var(--od-text);
}
.od-dny .od-maly { text-align: center; text-decoration: none; }
.od-dny .od-maly:hover { text-decoration: none; }

.od-reklama-samostatna { margin-bottom: 20px; }
.od-stat-siroky {
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 10px;
}
.od-stat-siroky .popis { font-size: 0.58rem; }
.od-stat-siroky .cislo { font-size: 1.25rem; }

.od-tabulka-obal { margin-bottom: 18px; }
/* `minmax(0, 1fr)` a `min-width: 0` drzi tabulku v sirce stranky. Bez nich
   se sloupec mrizky natahne na min-content radku, a ten pocita s celym
   nerozdelitelnym jmenem – jedno dlouhe jmeno pak roztahlo tabulku pres okraj
   a na mobilu se objevil vodorovny jezdec. Samotne `min-width: 0` na jmenu
   nestaci: to resi az deleni volneho mista, ne vypocet min-content. */
.od-tabulka { display: grid; gap: 4px; grid-template-columns: minmax(0, 1fr); }
.od-radek {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 56px 62px 46px 46px;
    min-width: 0;
    gap: 8px;
    align-items: center;
    background: var(--od-panel-2);
    border: 1px solid var(--od-line);
    border-radius: 10px;
    padding: 8px 11px;
    font-size: 0.86rem;
}
.od-radek .poradi { color: var(--od-dim); font-weight: 800; }
/* Jméno je pružný pás: text se ořízne třemi tečkami, koruna VIP zůstane
   hned za ním a štítek prohry odletí na pravý okraj sloupce. */
.od-radek .hrac {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}
/* `min-width: 0` je tu to podstatne. Jmeno je polozka flexboxu a ta se sama
   od sebe nesmrskne pod sirku nejdelsiho slova (min-width ma vychozi `auto`).
   Jedno dlouhe jmeno bez mezery tak roztahlo cely radek a stranka dostala
   vodorovny jezdec. S nulou se jmeno oreze tremi teckami a tabulka drzi tvar. */
.od-radek .hrac .jm {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.od-radek .vip { color: var(--od-zlata); flex: 0 0 auto; }
.od-radek .od-prohra {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 0.58rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 4px;
    background: rgba(193, 68, 31, 0.16);
    border: 1px solid rgba(193, 68, 31, 0.42);
    color: #dd9a86;
    white-space: nowrap;
    cursor: help;
}
.od-radek .skore { color: var(--od-zlata); font-weight: 800; text-align: right; }
.od-radek .procenta { color: var(--od-akcent); font-weight: 700; text-align: right; }
.od-radek .pokusy,
.od-radek .chyby,
.od-radek .hodina,
.od-radek .tah {
    color: var(--od-dim);
    font-size: 0.8rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.od-tab-nejnovejsi .od-radek { grid-template-columns: minmax(0, 1fr) 56px 62px 46px 46px 52px; }
.od-tab-hraji .od-radek { grid-template-columns: minmax(0, 1fr) 62px 46px 46px 52px; }
.od-radek.medaile { border-color: rgba(198, 145, 105, 0.45); }
.od-radek.m1 { background: linear-gradient(180deg, rgba(198, 145, 105, 0.16), var(--od-panel-2)); }
.od-radek.m1 .poradi { color: #ffd24a; }
.od-radek.m2 .poradi { color: #d6dde8; }
.od-radek.m3 .poradi { color: #e0a06a; }

/* Vlastni zapis hrace – `highlight-row` prirazuje skript podle jmena,
   `vip-me` uz server podle id uctu. Musi stat az za medailemi, jinak by
   zlaty prelivec prvniho mista prebil pozadi (maji stejnou specificitu).
   Zelena, ne zlata jako v ostatnich hrach: tady je zlata barvou skore
   i stupnu vitezu a vlastni radek by s nimi splynul. */
.od-radek.highlight-row,
.od-radek.vip-me {
    background: rgba(63, 185, 128, 0.15);
    border-color: rgba(44, 254, 0, 0.76);
    outline: 1px solid rgba(63, 185, 128, 0.28);
    outline-offset: -3px;
}

.od-radek.od-hlavicka {
    background: transparent;
    border: 1px solid transparent;
    padding: 0 11px 6px;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    color: var(--od-dim);
}
.od-radek.od-hlavicka span {
    cursor: help;
    text-align: right;
}
.od-radek.od-hlavicka .poradi,
.od-radek.od-hlavicka .hrac { text-align: left; }
.od-cara {
    border: none;
    border-top: 1px solid rgba(198, 145, 105, 0.35);
    margin: 0 0 6px;
}

.od-zlom { display: none; }

@media (max-width: 599px) {
    .od-radek {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 2px 10px;
        padding: 8px 10px;
    }
    .od-radek .poradi { width: 20px; flex: 0 0 auto; }
    /* Zaklad 0, ne auto: flexbox rozhoduje o zalomeni podle puvodni sirky
       polozky, takze s `auto` se dlouhe jmeno nikdy nesmrsklo a misto toho
       odsunulo skore i statistiky na vlastni radky. */
    .od-radek .hrac { flex: 1 1 0; min-width: 0; }
    .od-radek .od-prohra { margin-left: 0; }
    .od-radek .skore { flex: 0 0 auto; margin-left: auto; text-align: right; }
    .od-zlom { display: block; flex: 0 0 100%; height: 0; }
    .od-radek .procenta,
    .od-radek .pokusy,
    .od-radek .chyby,
    .od-radek .hodina,
    .od-radek .tah {
        text-align: left;
        font-size: 0.72rem;
        font-weight: 400;
    }
    .od-tab-nejnovejsi .od-radek,
    .od-tab-hraji .od-radek { grid-template-columns: none; }
    .od-radek .procenta { color: var(--od-akcent); }
    .od-radek span[data-popis]::after {
        content: " " attr(data-popis);
        color: var(--od-dim);
        font-weight: 400;
        font-size: 0.68rem;
    }
    .od-radek .skore { font-size: 0.95rem; }
    .od-radek .hodina,
    .od-radek .tah { color: rgba(255, 255, 255, 0.45); }
    .od-radek.od-hlavicka, .od-cara { display: none; }
}

.od-reseni {
    background: var(--od-panel);
    border: 1px solid var(--od-line);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 18px;
    color: var(--od-dim);
    font-size: 0.88rem;
}
.od-reseni summary { cursor: pointer; color: var(--od-text); font-weight: 700; }
.od-reseni p { margin: 10px 0 0; color: var(--od-text); }

.od-pravidla {
    margin: 0;
    background: var(--od-panel);
    border: 1px solid var(--od-line);
    border-radius: 14px;
    padding: 14px 18px;
    color: var(--od-dim);
    font-size: 0.9rem;
}
.od-pravidla summary {
    cursor: pointer;
    color: var(--od-akcent);
    font-weight: 800;
    letter-spacing: 0.05em;
    text-align: center;
    list-style: none;
}
.od-pravidla summary::marker { content: ""; }
.od-pravidla summary::-webkit-details-marker { display: none; }
.od-pravidla summary::before { content: "▸ "; }
.od-pravidla[open] summary::before { content: "▾ "; }
.od-pravidla summary:hover { color: var(--od-text); }
.od-pravidla h2 { font-size: 1rem; color: var(--od-text); margin: 16px 0 4px; }
.od-pravidla p { margin: 0; line-height: 1.6; }
.od-pravidla strong { color: var(--od-text); }

@media (max-width: 899px) {
    .doc { padding-top: 64px; }
    .od-plocha {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "zprava" "ovladani" "spis" "vedlejsi" "reklama" "pravidla";
        grid-template-rows: repeat(6, auto);
        gap: 12px;
    }
    .od-sloupec {
        display: contents;
        position: static;
        max-height: none;
        overflow: visible;
    }
    .od-levy     { grid-area: ovladani; }
    .od-vedlejsi { grid-area: vedlejsi; }
    .od-reklama  { grid-area: reklama; }
    .od-pravidla { margin-top: 4px; }
    .od-levy {
        padding: 10px 11px 12px;
        border-radius: 14px;
    }
    .od-vstup input { padding: 10px 12px; font-size: 1rem; }
    .od-hlaska { margin: 6px 0 2px; min-height: 18px; }
    .od-stat { gap: 6px; margin: 6px 0 9px; }
    .od-stat-box { padding: 5px 4px; border-radius: 9px; }
    .od-stat-box .cislo { font-size: 1.02rem; }
    .od-historie { max-height: 200px; }
    .od-spis { padding: 16px 14px 20px; }
    .od-text { font-size: 0.9rem; line-height: 2; }
    .od-stat-box .popis { font-size: 0.53rem; }
    .od-stat-box .cislo { font-size: 1rem; }
}

@media (max-width: 420px) {
    .od-text { font-size: 0.84rem; }
    .od-logo { letter-spacing: 0.08em; }
}

@media (prefers-reduced-motion: reduce) {
    .od-btn, .od-postup-cara span { transition: none; }
    .od-slovo.nove { animation-duration: 0.01s; }
    .od-logo:not(.male) img { animation: od-otisk-klid 0.5s ease-out both; }
}

@keyframes od-otisk-klid {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}