/* Kamienková modrá: tlmené modro-sivé tóny ako riečne kamene.
   Podklad je chladná sivá, akcent bridlicová modrá, karty o odtieň svetlejšie. */
:root {
    --bg: #e9edf2;
    --surface: #f8fafc;
    --surface-2: #eef2f6;
    --fg: #1e2833;
    --muted: #586677;
    --line: #d0d8e2;
    --accent: #3f6485;
    --accent-hover: #2f4f6c;
    --accent-fg: #ffffff;
    --accent-soft: #dde7f1;
    --thread: #9db5cc;
    --header-from: #4f7396;
    --header-to: #35526f;
    --header-fg: #f2f6fa;
    --error-bg: #f8e4e4;
    --error-fg: #8f1d1d;
    --new-bg: #e0eaf4;
    --focus: #6f97bd;
    --shadow: 0 1px 2px rgb(30 45 62 / .08), 0 4px 14px rgb(30 45 62 / .06);
    --shadow-header: 0 2px 10px rgb(30 45 62 / .18);
    --radius: .625rem;
    --indent: 1.25rem;
    /* farebný text v príspevkoch: na svetlej karte sýtejšie, jantárová namiesto žltej */
    --c-red: #b3261e;
    --c-green: #1e7a3c;
    --c-blue: #1f5fbf;
    --c-purple: #7b3fb5;
    --c-yellow: #945700;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #11161c;
        --surface: #19212a;
        --surface-2: #202a35;
        --fg: #e2e8ef;
        --muted: #9aa8b8;
        --line: #2b3643;
        --accent: #8fb1d1;
        --accent-hover: #adc8e0;
        --accent-fg: #0f1822;
        --accent-soft: #263647;
        --thread: #3f5a75;
        --header-from: #263646;
        --header-to: #1c2834;
        --header-fg: #e6edf4;
        --error-bg: #3a2022;
        --error-fg: #ffb9b9;
        --new-bg: #20324a;
        --focus: #7aa0c4;
        --shadow: 0 1px 2px rgb(0 0 0 / .35), 0 4px 14px rgb(0 0 0 / .25);
        --shadow-header: 0 2px 10px rgb(0 0 0 / .45);
        --c-red: #ff8a80;
        --c-green: #6fd08c;
        --c-blue: #7db4ff;
        --c-purple: #c9a0ff;
        --c-yellow: #ffd84d;
    }
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}

main { max-width: 52rem; margin: 0 auto; padding: 0 1rem 3rem; }

h1 { font-size: 1.6rem; line-height: 1.25; margin: 1.25rem 0 1rem; }
h2 { font-size: 1.25rem; margin: 1.5rem 0 .5rem; }

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
.muted, .meta { color: var(--muted); }
.meta { display: block; font-size: .875rem; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* hlavička so značkou */
.site-header {
    background: linear-gradient(135deg, var(--header-from), var(--header-to));
    box-shadow: var(--shadow-header);
    margin-bottom: 1rem;
}
.header-inner {
    max-width: 52rem;
    margin: 0 auto;
    padding: .8rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.site-header nav { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.site-header nav a,
.site-header button.link { color: var(--header-fg); text-decoration: none; font-size: .95rem; opacity: .92; }
.site-header nav a:hover,
.site-header button.link:hover { opacity: 1; text-decoration: underline; color: var(--header-fg); }

.brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: .01em;
    text-decoration: none;
    color: var(--header-fg);
}
.brand:hover { color: var(--header-fg); }
.brand-tld { font-weight: 400; opacity: .75; }
/* značka: hladký riečny kameň */
.brand-mark {
    width: 1.6rem;
    height: 1.1rem;
    border-radius: 55% 45% 50% 50% / 60% 55% 45% 40%;
    background: radial-gradient(ellipse at 30% 30%, #dbe6f0, #8fa9c1 55%, #5f7b96);
    box-shadow: inset 0 -2px 3px rgb(20 35 50 / .35), 0 1px 3px rgb(0 0 0 / .3);
    transform: rotate(-12deg);
}

.toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; margin: 1.25rem 0 -.5rem; }

/* tlačidlá */
button, .button {
    font: inherit;
    padding: .45rem 1rem;
    border: 0;
    border-radius: .5rem;
    background: var(--accent);
    color: var(--accent-fg);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 1px 2px rgb(20 35 50 / .2);
    transition: background-color .15s, box-shadow .15s;
}
button:hover, .button:hover { background: var(--accent-hover); color: var(--accent-fg); }
button:disabled { opacity: .6; cursor: default; }
button.link {
    background: none;
    box-shadow: none;
    color: var(--accent);
    padding: 0;
    text-decoration: underline;
}
button.link:hover { background: none; color: var(--accent-hover); }
form.inline { display: inline; }

/* formuláre */
.stack {
    display: grid;
    gap: 1rem;
    max-width: 32rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.stack label { display: grid; gap: .3rem; font-weight: 500; }
.stack button[type="submit"] { justify-self: start; }
input[type="text"], input[type="email"], input[type="password"], textarea {
    width: 100%;
    font: inherit;
    padding: .55rem .65rem;
    border: 1px solid var(--line);
    border-radius: .5rem;
    background: var(--bg);
    color: var(--fg);
}
input:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }

.error {
    background: var(--error-bg);
    color: var(--error-fg);
    padding: .55rem .8rem;
    border-radius: .5rem;
    border-left: 3px solid var(--error-fg);
}

/* zoznam tém ako karty */
.topics { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.topics li {
    padding: .8rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: border-color .15s, transform .15s;
}
.topics li:hover { border-color: var(--accent); transform: translateY(-1px); }
.topics a { font-weight: 600; }
.pager { display: flex; gap: 1rem; justify-content: center; align-items: center; margin-top: 1.5rem; flex-wrap: wrap; }
.pager-off { color: var(--muted); opacity: .55; }

/* záložky na hlavnej stránke: odkazy, na úzkej obrazovke sa lišta posúva vodorovne */
.tabs {
    position: relative; /* offsetLeft záložky sa počíta od lišty (forum.js) */
    scroll-margin-top: .5rem; /* po kliknutí na záložku (kotva #tabs) lišta nelepí na okraj okna */
    display: flex;
    gap: .25rem;
    margin: 1.5rem 0 1rem;
    box-shadow: inset 0 -3px 0 var(--line); /* spodná čiara; aktívna záložka ju prekryje */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}
.tab {
    flex: none;
    padding: .55rem 1rem;
    border-bottom: 3px solid transparent;
    border-radius: .5rem .5rem 0 0;
    color: var(--muted);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s, color .15s, border-color .15s;
}
.tab:hover { background: var(--surface-2); color: var(--fg); }
.tab[aria-selected="true"] {
    background: var(--surface);
    color: var(--accent);
    font-weight: 700;
    border-bottom-color: var(--accent);
}
.tabs :focus-visible { outline-offset: -2px; }

/* záložka Príspevky: karty pod sebou */
.feed { display: grid; gap: .6rem; }

/* vlákno: plochý zoznam, odsadenie podľa hĺbky (viditeľné najviac 8 úrovní) */
.post {
    margin-left: calc(min(var(--depth), 8) * var(--indent));
    padding: .65rem .9rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--thread);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-top: .6rem;
}
.post header { font-size: .9rem; }
.post header time { color: var(--muted); margin-left: .5rem; }
.post header .edited time { margin-left: 0; }
time { white-space: nowrap; }
.post .body { white-space: pre-wrap; overflow-wrap: anywhere; margin: .3rem 0; }
/* formátovanie v texte príspevku (format_body): farby a lokálne nadpisy menšie než nadpisy stránky */
.c-red { color: var(--c-red); }
.c-green { color: var(--c-green); }
.c-blue { color: var(--c-blue); }
.c-purple { color: var(--c-purple); }
.c-yellow { color: var(--c-yellow); }
.post .body .post-h { margin: 0; line-height: 1.3; font-weight: 700; }
.post .body h2.post-h { font-size: 1.15rem; }
.post .body h3.post-h { font-size: 1.025rem; }.post footer { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; font-size: .9rem; }
.post.deleted { opacity: .7; background: var(--surface-2); box-shadow: none; }
.post.new { background: var(--new-bg); border-left-color: var(--accent); }

.post .author { color: inherit; text-decoration: none; }
.post .author:hover { text-decoration: underline; }
/* pri úprave sa telo a tlačidlá skryjú, zostane len formulár */
.post.editing .body, .post.editing footer { display: none; }

.reply-form, .edit-form { margin-top: .5rem; display: grid; gap: .5rem; }
.reply-form .actions, .edit-form .actions, .stack .actions { display: flex; justify-content: flex-end; gap: .5rem; }
.reply-form .cancel, .edit-form .cancel, .stack .cancel { background: none; box-shadow: none; color: var(--muted); }
.reply-form .cancel:hover, .edit-form .cancel:hover, .stack .cancel:hover { background: var(--surface-2); color: var(--fg); }

/* lišta formátovania a smajlíkov pri textovom poli (editor-tools.js) */
.editor-bar, .emoji-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.editor-bar button, .emoji-bar button {
    padding: .2rem .5rem;
    min-width: 2.1rem;
    min-height: 2.1rem;
    line-height: 1.2;
    background: var(--surface-2);
    color: var(--fg);
    border: 1px solid var(--line);
    box-shadow: none;
}
.editor-bar button:hover, .emoji-bar button:hover { background: var(--accent-soft); color: var(--fg); border-color: var(--accent); }
.editor-bar button[aria-expanded="false"] { opacity: .7; }
.editor-bar .tb-sep { width: 1px; align-self: stretch; margin: .2rem .15rem; background: var(--line); }
.editor-bar .tb-spacer { flex: 1 1 0; }
.editor-bar .tb-b { font-weight: 800; }
.editor-bar .tb-i { font-style: italic; font-family: Georgia, serif; }
.editor-bar .tb-u { text-decoration: underline; }
.editor-bar .tb-h { font-weight: 700; font-size: .85rem; }
.tb-dot { display: inline-block; width: 1rem; height: 1rem; border-radius: 50%; vertical-align: middle; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .25); }
.tb-dot-red { background: var(--c-red); }
.tb-dot-green { background: var(--c-green); }
.tb-dot-blue { background: var(--c-blue); }
.tb-dot-purple { background: var(--c-purple); }
.tb-dot-yellow { background: var(--c-yellow); }
.emoji-bar { gap: .1rem; }
.emoji-bar button { background: none; border-color: transparent; font-size: 1.2rem; padding: .1rem .25rem; min-width: 2.1rem; }
.editor-note { margin: 0; font-size: .85rem; color: var(--error-fg); }
.stack .field { display: grid; gap: .3rem; font-weight: 500; }
.stack .field > label { font-weight: 500; }
@media (max-width: 520px) {
    .editor-bar button { min-width: 2.4rem; min-height: 2.4rem; }
    .emoji-bar button { min-width: 2.2rem; min-height: 2.2rem; }
}

.mod-tools { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }

/* štatistika témy pod názvom: tlmený drobný text, na úzkom displeji sa zalomí */
.topic-stats { margin: -.4rem 0 1rem; font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; cursor: help; }
.mod-tools + .topic-stats { margin-top: 0; }

.excerpt { overflow-wrap: anywhere; margin-top: .25rem; }

/* avatar 50x50: obrázok, alebo kruh s iniciálou v kamienkovej modrej */
.avatar {
    flex: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--line);
}
.avatar img { display: block; width: 50px; height: 50px; }
.avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--header-from), var(--header-to));
    color: var(--header-fg);
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1;
    user-select: none;
}
.avatar-link { display: inline-block; line-height: 0; text-decoration: none; }

.hint { font-weight: 400; font-size: .85rem; color: var(--muted); }
.notice {
    background: var(--accent-soft);
    color: var(--fg);
    padding: .55rem .8rem;
    border-radius: .5rem;
    border-left: 3px solid var(--accent);
}
input[type="file"] { font: inherit; max-width: 100%; color: var(--fg); }

/* profil: avatar vedľa mena */
.profile-head { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0 1rem; }
.profile-head h1 { margin: 0; }
.profile-head .meta { margin-top: .15rem; }
.profile-actions { margin: 0 0 .6rem; }
input:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.avatar-edit { margin-bottom: 1rem; }
.avatar-edit summary { cursor: pointer; color: var(--accent); width: fit-content; }
.avatar-edit .stack { margin: .6rem 0; }

/* vlákno: avatar vľavo, hlavička, text a tlačidlá vpravo; formuláre cez celú šírku */
.post:not(.deleted) {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    column-gap: .8rem;
}
.post:not(.deleted) > * { grid-column: 2; }
.post:not(.deleted) > .avatar-link { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
.post:not(.deleted) > .reply-form,
.post:not(.deleted) > .edit-form { grid-column: 1 / -1; }

/* najnovšie príspevky na hlavnej stránke: 4 stĺpce, 2 riadky */
.latest { margin-bottom: 1.5rem; }
.latest h1 { margin-top: 1.5rem; } /* začína v úrovni horného okraja bočného menu (.side má margin-top 1.5rem) */
.latest-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.latest-card {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    min-width: 0;
    padding: .8rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: border-color .15s, transform .15s;
}
.latest-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.latest-author { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.latest-author > div { display: grid; min-width: 0; line-height: 1.3; }
.latest-author .author {
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.latest-author .author:hover { text-decoration: underline; }
.latest-author .meta { font-size: .8rem; }
.latest-excerpt {
    margin: 0;
    font-size: .92rem;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}
.latest-topic {
    margin-top: auto;
    font-size: .9rem;
    font-weight: 600;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* užšia obrazovka: 2 stĺpce */
@media (max-width: 52rem) {
    .latest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
    :root { --indent: .75rem; }
    .latest-grid { grid-template-columns: 1fr; }
    .post:not(.deleted) { column-gap: .6rem; }
    h1 { font-size: 1.4rem; }
    .header-inner { padding: .65rem .9rem; }
    .brand { font-size: 1.2rem; }
    .stack { padding: 1rem; }
    .post { padding: .55rem .7rem; }
}

/* hlasy: 👍 a 👎 s počtom; zvýraznený je hlas prihláseného, hosť a autor vidia vypnuté tlačidlá */
.votes { display: inline-flex; gap: .3rem; }
.vote-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 2.75rem;
    min-height: 2rem; /* na dotykovom displeji aspoň približne ťukateľná plocha */
    padding: .15rem .6rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: .875rem;
    line-height: 1;
    box-shadow: none;
}
.vote-btn:hover { background: var(--accent-soft); color: var(--fg); border-color: var(--accent); }
.vote-btn[aria-pressed="true"] {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--accent);
}
.vote-btn[aria-pressed="true"]:hover { background: var(--accent-soft); color: var(--accent-hover); }
.vote-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .65; }
.vote-btn[aria-disabled="true"]:hover { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
.vote-count { font-variant-numeric: tabular-nums; min-width: .6rem; text-align: left; }

/* súhrn hlasov v kartách a v profile */
.votes-summary { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 40rem) {
    .votes { gap: .45rem; }
    .vote-btn { min-height: 2.5rem; padding-inline: .85rem; }
}

/* obrázky vložené do príspevku ([img:...] v texte): zmestia sa do šírky, rozmery width/height
   v HTML držia miesto, kým sa načítajú; kliknutím sa plná verzia otvorí v novej záložke */
.post-image {
    display: block; /* obrázok je vždy na vlastnom riadku; okolité zalomenia riadkov pohltí render_body_images() */
    width: fit-content;
    max-width: 100%;
    margin: .4rem 0;
    line-height: 0;
}
.post-image img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--line);
    border-radius: .5rem;
    background: var(--surface-2);
    box-shadow: var(--shadow);
}
.post-image:hover img { border-color: var(--thread); }
.post-image:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: .5rem; }

/* stav vkladania obrázka (assets/paste-image.js) pod textovým poľom */
.paste-status { margin: 0; font-size: .85rem; color: var(--muted); font-weight: 400; }
.paste-status.error { color: var(--error-fg); }
textarea.drag-over { outline: 2px dashed var(--focus); outline-offset: 0; background: var(--accent-soft); }

/* pätička s odkazmi na cookies */
.site-footer {
    max-width: 52rem;
    margin: 0 auto;
    padding: 1rem 1rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem 1.25rem;
    border-top: 1px solid var(--line);
    font-size: .875rem;
}
/* štatistiky a podpis pod odkazmi: tlmený drobný text, na úzkom displeji sa zalomí */
.footer-meta { flex: 0 0 100%; margin: .25rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem; font-size: .8rem; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent-hover); }

/* stránka Podmienky používania: obsah hore, sekcie s kotvami */
.toc {
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.toc ol { margin: 0; padding-left: 1.4rem; columns: 2 14rem; column-gap: 2rem; }
.toc li { padding: .1rem 0; break-inside: avoid; }
.legal { max-width: 42rem; }
.legal section { scroll-margin-top: 1.25rem; }
.legal h2 { scroll-margin-top: 1.25rem; }
.legal ul { padding-left: 1.4rem; }
.legal li { margin: .2rem 0; }

/* panel so súhlasom: lepí sa na spodok okna, no zostáva v toku stránky (na konci nič neprekrýva);
   obe tlačidlá sú rovnako výrazné */
.cookie-banner {
    position: sticky;
    bottom: 0;
    z-index: 20;
    padding: 0 .75rem .75rem;
    pointer-events: none; /* klikať sa dá len na samotný panel, nie na okraje okolo neho */
}
.cookie-banner-inner {
    pointer-events: auto;
    max-width: 52rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem 1.1rem;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 3px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: 0 -2px 6px rgb(30 45 62 / .08), 0 8px 28px rgb(30 45 62 / .22);
}
.cookie-stone {
    width: 2.4rem;
    height: 1.6rem;
    border-radius: 55% 45% 50% 50% / 60% 55% 45% 40%;
    background: radial-gradient(ellipse at 30% 30%, #dbe6f0, #8fa9c1 55%, #5f7b96);
    box-shadow: inset 0 -2px 3px rgb(20 35 50 / .35), 0 1px 3px rgb(0 0 0 / .3);
    transform: rotate(-12deg);
}
.cookie-text h2 { margin: 0 0 .2rem; font-size: 1.05rem; }
.cookie-text p { margin: 0; font-size: .92rem; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.cookie-actions button { min-height: 2.5rem; }
.cookie-actions button[aria-current] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }

/* užšia obrazovka: tlačidlá pod textom cez celú šírku panela */
@media (max-width: 52rem) {
    .cookie-banner-inner { grid-template-columns: auto minmax(0, 1fr); }
    .cookie-actions { grid-column: 1 / -1; }
    .cookie-actions button { flex: 1 1 9rem; }
}

@media (max-width: 40rem) {
    .cookie-banner { padding: 0 .5rem .5rem; }
    .cookie-banner-inner { grid-template-columns: minmax(0, 1fr); padding: .85rem 1rem; }
    .cookie-stone { display: none; }
}

/* stránka cookies: tabuľka sa na úzkej obrazovke zalomí do kariet */
.table-wrap { overflow-x: auto; margin: 1rem 0 1.5rem; }
.cookie-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-size: .92rem;
}
.cookie-table th, .cookie-table td { padding: .6rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.cookie-table thead th { background: var(--surface-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cookie-table tbody tr:last-child > * { border-bottom: 0; }
.cookie-table code { font-size: .9em; background: var(--accent-soft); padding: .1rem .35rem; border-radius: .3rem; }
.badge {
    display: inline-block;
    padding: .05rem .55rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}
.badge-optional { background: transparent; box-shadow: inset 0 0 0 1px var(--accent); }
.consent-choice { max-width: none; margin-bottom: 1.25rem; }
.consent-choice h2 { margin: 0; }
.consent-choice p { margin: 0; }

@media (max-width: 40rem) {
    .cookie-table thead { display: none; }
    .cookie-table, .cookie-table tbody, .cookie-table tr, .cookie-table th, .cookie-table td { display: block; }
    .cookie-table tr { padding: .5rem 0; border-bottom: 1px solid var(--line); }
    .cookie-table tbody tr:last-child { border-bottom: 0; }
    .cookie-table th, .cookie-table td { border: 0; padding: .2rem .9rem; }
    .cookie-table td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--muted); }
}

/* číslo príspevku: odznak na ľavom hornom okraji karty (nemení rozloženie ani odsadenie podľa hĺbky);
   vpravo v hlavičke je odkaz na rodiča, hodinky vedú do chronologického zobrazenia */
.post { position: relative; margin-top: .9rem; scroll-margin-top: 1.25rem; }
.post > .post-num,
.post:not(.deleted) > .post-num {
    position: absolute;
    grid-area: auto; /* nie je položkou mriežky príspevku, inak by sa uložil do 2. stĺpca */
    top: -.65rem;
    left: .6rem;
    padding: .05rem .5rem;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--thread);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}
.post > .post-num:hover { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.post .post-parent {
    float: right;
    margin-left: .75rem;
    padding: 0 .4rem;
    border-radius: .4rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-decoration: none;
}
.post .post-parent:hover { background: var(--accent-soft); color: var(--accent-hover); }
.post.deleted .post-parent { margin: .1rem 0 0 .75rem; }

.chain-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2rem;
    padding: .15rem .5rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    font-size: .95rem;
    line-height: 1;
    text-decoration: none;
}
a.chain-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.chain-btn.active { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.reply-link { text-decoration: underline; }
.chain-intro { margin: 0 0 .4rem; }

/* cieľ odkazu na príspevok (rodič, číslo, #post-ID z iných stránok) a vybraný príspevok v chronologickom zobrazení */
.post:target {
    background: var(--new-bg);
    border-left-color: var(--accent);
    box-shadow: 0 0 0 2px var(--focus), var(--shadow);
}
.post.selected { border-left-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow); }
.post.selected:target { box-shadow: 0 0 0 2px var(--focus), var(--shadow); }

@media (max-width: 40rem) {
    .post > .post-num,
    .post:not(.deleted) > .post-num { left: .45rem; }
    .chain-btn { min-height: 2.5rem; min-width: 2.75rem; }
}

/* obrázok, ktorého súbor už neexistuje (zmazal ho admin): krátky zástupný text namiesto rozbitého obrázka */
.post-image-gone { display: block; margin: .4rem 0; color: var(--muted); font-style: italic; }

/* záložka Obrázky: mriežka kariet s pevným pomerom strán náhľadu, 4 až 1 stĺpec podľa šírky */
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: .75rem; }
.image-card {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    min-width: 0;
    padding: .6rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: border-color .15s;
}
.image-card:hover { border-color: var(--accent); }
.image-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: .4rem;
    background: var(--surface-2);
    box-shadow: 0 0 0 1px var(--line);
}
.image-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.image-thumb:hover img { opacity: .9; }
.image-thumb:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.image-missing { color: var(--muted); font-size: .85rem; }
.image-links { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .9rem; margin-top: auto; font-size: .875rem; }
.image-links .image-delete-btn { margin-left: auto; color: var(--error-fg); }
.badge {
    padding: .05rem .5rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: .8rem;
}

@media (max-width: 40rem) {
    .image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
}

@media (max-width: 24rem) {
    .image-grid { grid-template-columns: 1fr; }
}

/* modálne okno s obrázkom v plnej veľkosti (forum.js): natívny <dialog>, zatvorí ho krížik, Esc alebo pozadie */
.lightbox {
    max-width: min(96vw, 1100px);
    max-height: 96vh;
    margin: auto;
    padding: .5rem;
    overflow: auto;
    background: var(--surface);
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgb(0 0 0 / .45);
}
.lightbox::backdrop { background: rgb(10 18 26 / .78); }
.lightbox-img {
    display: block;
    max-width: 100%;
    max-height: calc(96vh - 4.5rem);
    margin: 0 auto;
    border-radius: .4rem;
    background: var(--surface-2);
}
.lightbox-open { display: block; margin-top: .5rem; text-align: center; font-size: .875rem; }
.lightbox-close {
    position: absolute;
    top: .9rem;
    right: .9rem;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 50%;
    background: rgb(15 24 34 / .72);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    box-shadow: 0 0 0 1px rgb(255 255 255 / .35);
}
.lightbox-close:hover { background: rgb(15 24 34 / .92); color: #fff; }
html:has(dialog.lightbox[open]) { overflow: hidden; } /* pod oknom sa stránka neposúva */

/* dvojstĺpcové rozloženie. Vľavo úzke menu (prihlásený má v ňom aj online účastníkov a Čet), vpravo doterajší
   obsah (main je teda o šírku stĺpca širší celok, samotný obsah ostáva rovnako široký ako pri hosťovi).
   Od 60 rem stĺpec lepí pri posúvaní; na užšej obrazovke sa zloží nad obsah ako zbaliteľný blok. */
:root { --side-w: 13rem; --side-gap: 1.25rem; --wide-w: calc(52rem + var(--side-w) + var(--side-gap)); }

.has-side .header-inner,
.has-side .site-footer { max-width: var(--wide-w); }

.layout {
    max-width: var(--wide-w);
    margin: 0 auto;
    padding: 0 1rem;
    display: grid;
    grid-template-columns: var(--side-w) minmax(0, 1fr);
    column-gap: var(--side-gap);
    align-items: start;
}
.layout > main { max-width: none; margin: 0; padding: 0 0 3rem; }

.side {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    margin-top: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.side-box { min-height: 0; display: flex; flex-direction: column; }
.side-box[open] { overflow: hidden; }
.side-box summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem .85rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.side-box summary::-webkit-details-marker { display: none; }
.side-box summary::after { content: "▾"; margin-left: auto; color: var(--muted); transition: transform .15s; }
.side-box:not([open]) summary::after { transform: rotate(-90deg); }
.online-dot { flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--c-green); box-shadow: 0 0 0 3px var(--accent-soft); }
.online-body { min-height: 0; overflow-y: auto; padding: 0 .5rem .5rem; scrollbar-width: thin; }
.online-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.online-list li { min-width: 0; }
.online-list a {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    padding: .2rem .35rem;
    border-radius: .4rem;
    color: inherit;
    text-decoration: none;
}
.online-list a:hover { background: var(--accent-soft); color: var(--accent-hover); }
.online-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online-me { flex: none; color: var(--muted); font-size: .8rem; }
.online-more { margin: .35rem .35rem 0; font-size: .85rem; }
.side-link {
    display: block;
    padding: .6rem .85rem;
    border-top: 1px solid var(--line);
    background: var(--surface-2);
    font-weight: 600;
    text-decoration: none;
}
.side-link:hover { background: var(--accent-soft); }
.side > .side-link:first-child { border-top: 0; } /* hosť nemá nad odkazmi blok Online */

/* malý avatar v zozname online (28 px) */
.avatar-sm { width: 28px; height: 28px; }
.avatar-sm img { width: 28px; height: 28px; }
.avatar-sm.avatar-fallback { font-size: .9rem; }

/* s ľavým stĺpcom je obsah užší: 4 karty najnovších príspevkov by boli stlačené */
@media (min-width: 60.01rem) and (max-width: 67rem) {
    .has-side .latest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* užšia obrazovka: stĺpec nad obsahom, v jednom stĺpci; zoznam sa otvára klepnutím na „Online (N)“ */
@media (max-width: 60rem) {
    .layout { display: block; padding: 0 1rem; }
    .layout > main { padding-bottom: 3rem; }
    .side { position: static; max-height: none; margin: 0 0 .5rem; }
    .latest h1 { margin-top: .5rem; } /* menu je tu nad obsahom, netreba ďalší odstup */
    .online-body { max-height: 40vh; }
    .side-box summary { min-height: 2.75rem; }
    .side-link { padding-block: .7rem; }
}

/* stránka Štatistiky: prepínač obdobia a mriežka kariet s top zoznamami (20 položiek, číslované) */
.period { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .5rem; }
.period a {
    padding: .35rem .95rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-weight: 500;
    text-decoration: none;
}
.period a:hover { background: var(--accent-soft); color: var(--fg); }
.period a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); font-weight: 700; }
.period-note { margin: 0 0 1rem; font-size: .875rem; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: .85rem; align-items: start; }
.stat-wide { grid-column: 1 / -1; }
.stat-card {
    min-width: 0;
    padding: .9rem 1rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.stat-card h2 { margin: 0 0 .5rem; font-size: 1.1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; }
.stat-card h2 .badge { font-size: .75rem; font-weight: 600; }
.stat-card .hint { margin: -.25rem 0 .5rem; }
.stat-card > p { margin: 0; }
.top-list { list-style: none; counter-reset: top; margin: 0; padding: 0; }
.top-list li {
    counter-increment: top;
    display: grid;
    grid-template-columns: 1.9rem minmax(0, 1fr) auto;
    column-gap: .5rem;
    align-items: baseline;
    padding: .4rem 0;
    border-top: 1px solid var(--line);
}
.top-list li:first-child { border-top: 0; }
.top-list li::before { content: counter(top) "."; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.top-main { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.top-user { display: inline-flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; }
.top-user:hover { text-decoration: underline; }
.top-user > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.top-value { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.top-sub { grid-column: 2 / -1; color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.top-sub a { color: inherit; }

@media (max-width: 40rem) {
    .top-list li { grid-template-columns: 1.7rem minmax(0, 1fr); }
    .top-value { grid-column: 2; text-align: left; font-size: .9rem; }
}

/* záložka Účastníci (len prihlásení): súhrn a tabuľka; na úzkej obrazovke sa riadky zložia do kariet */
.users-summary { margin: 0 0 .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.users-wrap {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.users-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.users-table th, .users-table td { padding: .55rem .85rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.users-table thead th { background: var(--surface-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.users-table tbody tr:last-child > * { border-bottom: 0; }
.users-table tbody tr:hover { background: var(--surface-2); }
.users-table tbody th { font-weight: 600; }
.u-name { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.u-link { display: inline-flex; align-items: center; gap: .55rem; min-width: 0; color: inherit; text-decoration: none; }
.u-link:hover .u-text { color: var(--accent-hover); text-decoration: underline; }
.u-text { min-width: 0; overflow-wrap: anywhere; }
.u-role { flex: none; font-size: .75rem; }
.u-state { display: inline-flex; align-items: center; gap: .45rem; color: var(--muted); font-weight: 500; }
.u-dot { flex: none; width: .6rem; height: .6rem; border-radius: 50%; border: 2px solid var(--muted); } /* offline: prázdny uzol */
.u-state.is-online { color: var(--c-green); font-weight: 600; }
.u-state.is-online .u-dot { background: var(--c-green); border-color: var(--c-green); box-shadow: 0 0 0 3px var(--accent-soft); } /* online: plná bodka */
.users-table td time { white-space: nowrap; }

@media (max-width: 40rem) {
    .users-wrap { background: none; border: 0; box-shadow: none; overflow: visible; }
    .users-table, .users-table tbody, .users-table tr, .users-table th, .users-table td { display: block; }
    .users-table thead { /* hlavička sa zrieka vizuálne, no ostáva pre čítačky */
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%);
    }
    .users-table tbody tr {
        margin-bottom: .6rem;
        padding: .35rem .85rem .5rem;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
    }
    .users-table th, .users-table td { padding: .25rem 0; border-bottom: 0; }
    .users-table tbody tr:hover { background: var(--surface); }
    .users-table td { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: .5rem; align-items: baseline; font-size: .9rem; }
    .users-table td::before { content: attr(data-label); color: var(--muted); font-size: .8rem; }
    .u-name { padding-bottom: .35rem; }
}

/* Čet (privátne správy): odznak neprečítaných, zoznam konverzácií a vlákno správ.
   Neprečítané sa líšia aj textom (odznak „N nové správy“, „Nové“), nie len farbou. */
.badge-unread { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 700; }
.side-link-row { display: flex; align-items: center; gap: .4rem; }
.side-badge { margin-left: auto; min-width: 1.5rem; text-align: center; font-size: .75rem; }

.chat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.chat-item {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-width: 0;
    padding: .7rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: inherit;
    text-decoration: none;
    transition: background-color .15s, border-color .15s;
}
.chat-item:hover { background: var(--surface-2); border-color: var(--accent); }
.chat-item.is-unread { background: var(--new-bg); border-left-color: var(--accent); }
.chat-main { min-width: 0; flex: 1; display: grid; gap: .15rem; }
.chat-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; }
.chat-name { font-weight: 600; overflow-wrap: anywhere; }
.chat-time { margin-left: auto; font-size: .85rem; color: var(--muted); }
.chat-preview { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-you { font-weight: 600; }
.chat-item.is-unread .chat-name,
.chat-item.is-unread .chat-preview { font-weight: 700; color: var(--fg); }

.chat-thread { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .6rem; }
.msg {
    justify-self: start;
    min-width: 0;
    max-width: min(100%, 36rem);
    padding: .55rem .85rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--thread);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    scroll-margin-top: 1rem;
}
.msg-mine { justify-self: end; background: var(--accent-soft); border-left-color: var(--accent); }
.msg-new { border-left-color: var(--accent); background: var(--new-bg); }
.msg-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; font-size: .85rem; color: var(--muted); }
.msg-who { font-weight: 700; color: var(--fg); overflow-wrap: anywhere; }
.msg-state { margin-left: auto; }
.msg-body { margin-top: .25rem; white-space: pre-wrap; overflow-wrap: anywhere; }
a.autolink { overflow-wrap: anywhere; } /* odkaz zo samotnej adresy v príspevku alebo správe (with_links() v helpers.php) */
.chat-form { max-width: none; margin-top: 1rem; }
.chat-form + .error, .error + .chat-form { margin-top: .75rem; }

@media (max-width: 40rem) {
    .chat-item { padding: .65rem .75rem; gap: .6rem; }
    .msg { max-width: 100%; }
    .chat-preview { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* nápoveda ku Ctrl+Enter vľavo od tlačidiel formulára; na dotykovom zariadení bez klávesnice sa nezobrazuje */
.actions-hint { margin-right: auto; align-self: center; }
@media (hover: none) { .actions-hint { display: none; } }

/* Zábava: dlaždice na rozcestníku a spoločné prvky hier (ovládanie, plátno, stav) */
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .85rem; }
.game-tile {
    display: block;
    min-width: 0;
    padding: 1rem 1.1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.game-tile:hover { border-color: var(--accent); transform: translateY(-1px); color: inherit; }
.game-tile h2 { margin: .35rem 0 .3rem; font-size: 1.15rem; }
.game-tile p { margin: 0; color: var(--muted); font-size: .92rem; }
.game-icon { font-size: 2.2rem; line-height: 1; }

.game-back { margin: 1rem 0 0; }
.game-back + h1 { margin-top: .35rem; }
.game { display: grid; gap: .75rem; margin-top: 1rem; }
.game .hint { margin: 0; }
.game-controls {
    display: grid;
    gap: .85rem;
    padding: .9rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.game-row { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem 1.25rem; }
.game-row label { display: grid; gap: .25rem; font-weight: 500; min-width: 0; }
/* všetky prvky v riadku majú rovnakú výšku (2,4 rem) a sedia na spodnej čiare, takže tlačidlá, polia a zaškrtávatká lícujú */
.game-row .game-check { display: flex; align-items: center; gap: .45rem; min-height: 2.4rem; }
.game-row input[type="number"], .game-row select {
    font: inherit;
    padding: .4rem .55rem;
    border: 1px solid var(--line);
    border-radius: .5rem;
    background: var(--bg);
    color: var(--fg);
}
.game-row input[type="number"] { width: 6rem; }
.game-row input[type="range"] { width: 11rem; max-width: 100%; height: 2.4rem; margin: 0; accent-color: var(--accent); }
.game-row input:disabled { cursor: not-allowed; opacity: .6; }
.game-buttons { align-items: end; gap: .5rem; }
.game-pad { display: inline-flex; gap: .3rem; }
.game-pad button { min-width: 2.6rem; padding-inline: .6rem; }
.game-status { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.game-status span + span { margin-left: .4rem; }
.game-board { line-height: 0; }
.game-board canvas {
    display: block;
    width: 100%;
    height: auto;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    touch-action: none;
    cursor: crosshair;
}
.game-board canvas[data-board][tabindex] { cursor: grab; }
.game-board canvas[data-board][tabindex]:active { cursor: grabbing; }
.game kbd { font: inherit; font-size: .85em; padding: .05rem .35rem; border: 1px solid var(--line); border-radius: .3rem; background: var(--surface-2); }

/* Hadík: štvorcová plocha najviac 32 rem, tlačidlá smeru pod ňou (hlavne pre dotykové zariadenia) */
.game-board canvas.snake-board { max-width: 32rem; margin-inline: auto; cursor: default; }
.game .snake-pad { display: flex; justify-content: center; gap: .5rem; }
.game .snake-pad button { min-width: 3rem; }

/* Adresovanie @nick: odkaz v príspevku a zoznam návrhov pod textovým poľom (assets/mentions.js) */
a.mention { font-weight: 600; text-decoration: none; background: var(--accent-soft); border-radius: .3rem; padding: 0 .25em; }
a.mention:hover { text-decoration: underline; }

.mention-list {
    position: fixed;
    z-index: 60;
    box-sizing: border-box;
    margin: 0;
    padding: .25rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--muted) transparent;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.mention-list[hidden] { display: none; }
.mention-option {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 2.75rem; /* dostatočne veľká plocha pre prst */
    padding: .25rem .5rem;
    border-radius: .4rem;
    cursor: pointer;
}
.mention-option[aria-selected="true"] { background: var(--accent-soft); }
.mention-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mention-nick { margin-left: auto; padding-left: .5rem; color: var(--muted); white-space: nowrap; }

/* Kto hlasoval: tlačidlo „kto?“ a malé okno so zoznamom nickov pod hlasmi */
.votes { position: relative; align-items: center; }
.voters-btn { font-size: .8rem; }
.voters {
    position: absolute;
    z-index: 20;
    top: calc(100% + .35rem);
    left: 0;
    box-sizing: border-box;
    width: max-content;
    min-width: 12rem;
    max-width: min(22rem, calc(100vw - 2rem));
    max-height: 16rem;
    overflow-y: auto;
    padding: .6rem .8rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: .6rem 1.2rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-size: .875rem;
    font-weight: 400;
    white-space: normal;
}
.voters h4 { margin: 0 0 .25rem; font-size: .8rem; color: var(--muted); font-weight: 600; }
.voters ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .15rem; }
.voters p { margin: 0; }
.voters a { overflow-wrap: anywhere; }

/* Pexeso: mriežka kariet (počet stĺpcov z --cols), karta sa otáča okolo zvislej osi; symbol sa zmenšuje s plochou */
.pexeso-board {
    --cols: 4;
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    gap: clamp(.25rem, 1.8vw, .6rem);
    width: 100%;
    max-width: calc(var(--cols) * 6rem);
    margin-inline: auto;
    container-type: inline-size;
}
.game .pexeso-card {
    position: relative;
    display: block;
    aspect-ratio: 1;
    min-width: 0;
    padding: 0;
    background: none;
    border-radius: .6rem;
    box-shadow: none;
    color: var(--fg);
    perspective: 40rem;
}
.game .pexeso-card:hover { background: none; color: var(--fg); }
.pexeso-inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform .3s;
}
.pexeso-card.is-open .pexeso-inner, .pexeso-card.is-matched .pexeso-inner { transform: rotateY(180deg); }
.pexeso-face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: .6rem;
    box-shadow: var(--shadow);
    backface-visibility: hidden;
    font-size: clamp(1.1rem, 7vw, 2rem); /* záloha pre prehliadače bez container query jednotiek */
    font-size: calc(100cqw / var(--cols) * .5);
    line-height: 1;
}
.pexeso-back {
    background: repeating-linear-gradient(45deg, var(--accent) 0 .45rem, var(--accent-hover) .45rem .9rem);
    color: var(--accent-fg);
    font-weight: 700;
}
.pexeso-card:hover .pexeso-back { border-color: var(--accent-fg); }
.pexeso-front {
    transform: rotateY(180deg);
    background: var(--surface);
}
.pexeso-card.is-matched .pexeso-front { background: var(--accent-soft); border: 2px solid var(--c-green); }
.pexeso-card.is-matched .pexeso-front::after {
    content: "✓";
    position: absolute;
    top: .1em;
    right: .2em;
    font-size: .4em;
    font-weight: 700;
    color: var(--c-green);
}
.pexeso-player.is-turn { font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }
@media (prefers-reduced-motion: reduce) {
    .pexeso-inner { transition: none; }
}

/* Bloky: plocha najviac 28 rem, tlačidlá lávky pod ňou (hlavne pre dotykové zariadenia; podržanie nesmie označovať text) */
.game-board canvas.bloky-board { max-width: 28rem; margin-inline: auto; cursor: default; }
.game .bloky-pad { display: flex; justify-content: center; gap: .5rem; }
.game .bloky-pad button { min-width: 5rem; user-select: none; -webkit-user-select: none; touch-action: manipulation; }

/* Dziotris: plocha 7 : 10 (hracie pole + bočný panel) najviac 24 rem, tlačidlá ovládania pod ňou (podržanie nesmie označovať text) */
.game-board canvas.dziotris-board { max-width: 24rem; margin-inline: auto; cursor: default; }
.game .dziotris-pad { display: flex; justify-content: center; gap: .5rem; }
.game .dziotris-pad button { min-width: 3rem; user-select: none; -webkit-user-select: none; touch-action: manipulation; }

/* Guličky: plocha 11 : 15 najviac 26 rem, mierenie myšou aj prstom (ťahanie nesmie označovať text ani otvárať ponuku) */
.game-board canvas.gulicky-board { max-width: 26rem; margin-inline: auto; cursor: crosshair; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* Dziovina: plocha 3 : 2 najviac 40 rem (kreslí sa na <canvas>, škáluje sa na šírku stránky), bez kurzora na uchopenie */
.game-board canvas.dziovina-board { max-width: 40rem; margin-inline: auto; cursor: default; }

/* Jasmír: myšlienková mapa na <canvas> (výšku a ostrosť nastavuje assets/jasmir.js), editor textu a ponuka uzla sú nad plátnom */
.jasmir-stage { position: relative; }
.game-board canvas.jasmir-board { cursor: crosshair; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.jasmir-editor {
    position: absolute;
    z-index: 2;
    max-width: calc(100% - .5rem);
    padding: .45rem .7rem;
    font: inherit;
    font-size: 1rem; /* menej ako 16 px by iOS pri zaostrení priblížilo stránku */
    line-height: 1.3;
    text-align: center;
    resize: none;
    overflow: hidden;
    color: var(--fg);
    background: var(--surface);
    border: 2px solid var(--accent);
    border-radius: 1.1rem;
    box-shadow: var(--shadow);
}
.jasmir-menu {
    position: absolute;
    z-index: 3;
    display: grid;
    gap: .1rem;
    min-width: 12.5rem;
    max-width: calc(100% - .5rem);
    padding: .35rem;
    line-height: 1.3;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.jasmir-editor[hidden], .jasmir-menu[hidden], .jasmir-menu [hidden] { display: none; }
.jasmir-menu > button, .jasmir-menu-row > button {
    display: block;
    width: 100%;
    padding: .55rem .7rem;
    text-align: left;
    color: var(--fg);
    background: none;
    box-shadow: none;
}
.jasmir-menu > button:hover, .jasmir-menu > button:focus-visible,
.jasmir-menu-row > button:hover:not(:disabled), .jasmir-menu-row > button:focus-visible { color: var(--fg); background: var(--accent-soft); }
.jasmir-menu-row { display: flex; gap: .1rem; }
.jasmir-menu-row > button { flex: 1; width: auto; text-align: center; white-space: nowrap; }
.jasmir-menu-title { padding: .35rem .7rem 0; font-size: .85rem; color: var(--muted); }
.jasmir-swatches { display: flex; flex-wrap: wrap; gap: .45rem; padding: .3rem .7rem .5rem; }
.jasmir-swatch {
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 2px solid rgb(0 0 0 / .3);
    border-radius: 50%;
    box-shadow: none;
}
.jasmir-swatch:hover { border-color: var(--accent); }
.jasmir-swatch[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }

/* Jasmír: ukladanie máp (názov mapy, výber uloženej mapy) */
.jasmir-save input[type="text"] {
    font: inherit;
    width: 14rem;
    max-width: 100%;
    padding: .4rem .55rem;
    border: 1px solid var(--line);
    border-radius: .5rem;
    background: var(--bg);
    color: var(--fg);
}
.jasmir-save select { max-width: 16rem; }

/* Jasmír: popis uzla (bublina pri prechode myšou, okienko na úpravu, popis v ponuke uzla) */
.jasmir-tip,
.jasmir-note-box {
    position: absolute;
    z-index: 4;
    line-height: 1.35;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: .55rem;
    box-shadow: var(--shadow);
}
.jasmir-tip {
    max-width: min(18rem, calc(100% - 1rem));
    padding: .45rem .65rem;
    font-size: .9rem;
    color: var(--fg);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    pointer-events: none;
}
.jasmir-note-box { z-index: 5; display: grid; gap: .5rem; padding: .6rem; width: min(20rem, calc(100% - 1rem)); }
.jasmir-note-box textarea {
    box-sizing: border-box;
    width: 100%;
    font: inherit;
    font-size: 1rem; /* menej ako 16 px by iOS pri zaostrení priblížilo stránku */
    padding: .4rem .55rem;
    border: 1px solid var(--line);
    border-radius: .5rem;
    background: var(--bg);
    color: var(--fg);
    resize: vertical;
}
.jasmir-note-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.jasmir-tip[hidden], .jasmir-note-box[hidden], .jasmir-menu-note[hidden] { display: none; }
.jasmir-menu-note {
    margin: 0;
    padding: .4rem .7rem;
    max-width: 16rem;
    font-size: .9rem;
    color: var(--muted);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    border-bottom: 1px solid var(--line);
}