/* Visual language taken from the "verze 3" Claude artifact prototype (Bricolage Grotesque /
   Figtree, green/gold palette), which superseded the earlier mockup 1a/1d restyle (see plan.md
   decision log, 17. 9. 2026). Scoped under .app-shell so it never touches EasyAdmin's own layout
   (verified: /admin/login renders unaffected).

   Per-game colour (Claude Design "hadej-to-web" mockup, log 25. 9. 2026): the hub, profile,
   support and other game-neutral pages use this graphite accent; a page inside a game (data-game
   on <main>, set by that page's main_attributes block) restyles the whole page in that game's
   colour via the :has() blocks below. Zoo's block is today's colour unchanged (existing players
   see no difference); Památky/Landmarks gets its own warmer palette, both ground/surface and
   accent, not just the accent. */
.app-shell {
    --color-bg: #eef1ea;
    --color-surface: #fbfcf8;
    --color-inset: #e3e8df;
    --color-text: #18221c;
    --color-muted: #4a574e;
    --color-faint: #7a867d;
    --color-label: #7a867d;
    --color-border: #cbd3c6;
    --color-border-subtle: #dde3d7;
    --color-accent: #38463e;
    --color-accent-hover: #2f3c35;
    --color-accent-bg: #dfe5dc;
    --color-gold: #b87a1e;
    --color-gold-bg: #f3e4c6;
    --color-ok: #2c8a57;
    --color-ok-bg: #d6eedf;
    --color-wrong: #be4234;
    --color-wrong-bg: #f5dad5;
    --color-warn-bg: #f3e4c6;
    --color-warn-border: #e0c48c;
    --color-warn-text: #7a5115;
    --color-cta-bg: #38463e;
    --color-cta-hover: #2f3c35;
    --color-cta-text: #fff;
    --stripe-a: #e3e8df;
    --stripe-b: #cbd3c6;
    --shadow: 0 1px 2px rgba(24, 34, 28, .06), 0 8px 24px rgba(24, 34, 28, .07);

    background: var(--color-bg);
    color: var(--color-text);
    font-family: Figtree, system-ui, sans-serif;
    line-height: 1.5;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

:root[data-theme="dark"] .app-shell,
.app-shell[data-theme="dark"] {
    --color-bg: #101613;
    --color-surface: #18201c;
    --color-inset: #222c27;
    --color-text: #e4ebe5;
    --color-muted: #a9b6ad;
    --color-faint: #77857b;
    --color-label: #77857b;
    --color-border: #303c35;
    --color-border-subtle: #283831;
    --color-accent: #bfcec3;
    --color-accent-hover: #d4ded9;
    --color-accent-bg: #263129;
    --color-gold: #e0ac55;
    --color-gold-bg: #3a2f1c;
    --color-ok: #58c48a;
    --color-ok-bg: #173826;
    --color-wrong: #e77668;
    --color-wrong-bg: #3e211d;
    --color-warn-bg: #3a2f1c;
    --color-warn-border: #5a4520;
    --color-warn-text: #e0ac55;
    --color-cta-bg: #bfcec3;
    --color-cta-hover: #d4ded9;
    --color-cta-text: #101613;
    --stripe-a: #222c27;
    --stripe-b: #303c35;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
}

/* Zoo: today's colour, unchanged, just moved from the default into its own block. */
.app-shell:has(> main[data-game="zoo"]) {
    --color-accent: #1e6b55;
    --color-accent-hover: #17543f;
    --color-accent-bg: #d5e7df;
    --color-cta-bg: #1e6b55;
    --color-cta-hover: #17543f;
    --color-cta-text: #fff;
}

:root[data-theme="dark"] .app-shell:has(> main[data-game="zoo"]),
.app-shell[data-theme="dark"]:has(> main[data-game="zoo"]) {
    --color-accent: #5dbb98;
    --color-accent-hover: #79c9ab;
    --color-accent-bg: #1d3a30;
    --color-cta-bg: #5dbb98;
    --color-cta-hover: #79c9ab;
    --color-cta-text: #0c1511;
}

/* Památky/Landmarks: warmer, sandier surfaces, not just a different accent. */
.app-shell:has(> main[data-game="landmarks"]) {
    --color-bg: #f3efe8;
    --color-surface: #fcfaf6;
    --color-inset: #e9e1d4;
    --color-text: #221b13;
    --color-muted: #55493a;
    --color-faint: #857a6a;
    --color-label: #857a6a;
    --color-border: #d8cdbb;
    --color-border-subtle: #e3d9c8;
    --color-accent: #8a5326;
    --color-accent-hover: #7a4820;
    --color-accent-bg: #f0e0cb;
    --color-cta-bg: #8a5326;
    --color-cta-hover: #7a4820;
    --color-cta-text: #fff;
    --stripe-a: #e9e1d4;
    --stripe-b: #d8cdbb;
}

:root[data-theme="dark"] .app-shell:has(> main[data-game="landmarks"]),
.app-shell[data-theme="dark"]:has(> main[data-game="landmarks"]) {
    --color-bg: #16110c;
    --color-surface: #201913;
    --color-inset: #2c231a;
    --color-text: #ede5d9;
    --color-muted: #b6a892;
    --color-faint: #938670;
    --color-label: #938670;
    --color-border: #3d3125;
    --color-border-subtle: #352a1f;
    --color-accent: #dda860;
    --color-accent-hover: #e8bc80;
    --color-accent-bg: #3a2b18;
    --color-cta-bg: #dda860;
    --color-cta-hover: #e8bc80;
    --color-cta-text: #1a1209;
    --stripe-a: #2c231a;
    --stripe-b: #3d3125;
}

* {
    box-sizing: border-box;
}

.app-shell {
    margin: 0;
    padding: 0;
}

.app-shell h1,
.app-shell h2,
.app-shell h3 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
}

.app-shell h1 {
    font-size: clamp(28px, 4vw, 32px);
}

.app-shell h2 {
    font-size: clamp(22px, 3vw, 26px);
}

.app-shell p {
    margin: 0;
}

.app-shell a {
    color: var(--color-accent);
}
.app-shell a:hover {
    color: var(--color-accent-hover);
}

/* Overline label, e.g. "HÁDEJ TO", "TRÉNINK" (mockup 1d) */
.overline {
    font: 500 11px/1.4 'JetBrains Mono', monospace;
    letter-spacing: 0.08em;
    color: var(--color-label);
    text-transform: uppercase;
    margin: 0;
}

/* Skip link, focus (plan 8) */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--color-accent);
    color: #fff;
    padding: 10px 16px;
    z-index: 100;
}
.skip-link:focus {
    left: 8px;
    top: 8px;
}

.app-shell :focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.noscript-notice {
    background: var(--color-wrong-bg);
    color: var(--color-wrong);
    text-align: center;
    padding: 12px;
    margin: 0;
}

/* Header */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-border-subtle);
}

.app-header .brand {
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
    color: var(--color-text);
}

.app-header-account {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    margin-inline: auto 14px;
}
.app-header-account a {
    color: var(--color-muted);
    text-decoration: none;
}
.app-header-account a:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.theme-toggle {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 15px;
    cursor: pointer;
}
.theme-toggle:hover {
    border-color: var(--color-accent);
}

/* Layout */
#main {
    flex: 1;
    max-width: 60rem;
    width: 100%;
    margin-inline: auto;
    padding: 28px 20px;
}

.flash-message {
    max-width: 26rem;
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
}
.flash-success {
    background: var(--color-accent-bg);
    color: var(--color-accent);
}
.flash-error {
    background: var(--color-wrong-bg);
    color: var(--color-wrong);
}

.app-footer {
    border-top: 1px solid var(--color-border-subtle);
    padding: 20px;
    margin-top: 32px;
}

.app-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    max-width: 60rem;
    margin-inline: auto;
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
}

.app-footer a {
    color: var(--color-faint);
    text-decoration: none;
}
.app-footer a:hover {
    text-decoration: underline;
    color: var(--color-muted);
}

/* Cards and panels (mockup 1d) */
.panel {
    background: var(--color-inset);
    border-radius: 14px;
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 26rem;
}

.panel + .panel {
    margin-top: 20px;
}

.badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
    gap: 12px;
}
.badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.badge-item .badge-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-accent-bg);
    font-size: 22px;
}
.badge-item .badge-name {
    font-size: 12px;
    color: var(--color-muted);
}
.badge-item.is-locked .badge-icon {
    background: var(--color-inset);
    filter: grayscale(1);
    opacity: 0.5;
}
.badge-item.is-locked .badge-name {
    color: var(--color-faint);
}

.tile-row {
    display: flex;
    gap: 10px;
}

.tile {
    flex: 1;
    background: var(--color-inset);
    border-radius: 10px;
    padding: 13px;
}

.tile-value {
    display: block;
    font: 700 22px 'JetBrains Mono', monospace;
    color: var(--color-text);
}

.tile-label {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: var(--color-muted);
}

.callout {
    background: var(--color-accent);
    color: #fff;
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.callout .overline {
    color: rgba(255, 255, 255, 0.8);
}
.callout p {
    font: 600 19px 'Bricolage Grotesque', sans-serif;
    color: #fff;
}

/* Buttons */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: 500 16px 'Bricolage Grotesque', sans-serif;
    padding: 0 16px;
    min-height: 52px;
    border-radius: 12px;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    text-decoration: none;
    width: 100%;
}
.button:hover {
    border-color: var(--color-accent);
    text-decoration: none;
}
.button svg {
    width: 18px;
    height: 18px;
    flex: none;
}

.button-primary {
    background: var(--color-cta-bg);
    color: var(--color-cta-text);
    border-color: var(--color-cta-bg);
    font-weight: 600;
}
.button-primary:hover {
    background: var(--color-cta-hover);
    border-color: var(--color-cta-hover);
    color: var(--color-cta-text);
}

.button-on-callout {
    background: #fff;
    color: var(--color-text);
    border: 0;
}
.button-on-callout:hover {
    background: var(--color-bg);
}

.button-selected {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    font-weight: 600;
}

/* A compact, inline variant of .button: for secondary actions next to text, not a form's main CTA
   (e.g. unlinking one login method from a list). */
.button-small {
    width: auto;
    min-height: 0;
    padding: 6px 12px;
    font-size: 13px;
}

/*
 * Scoped under .app-shell, per this file's own top comment: assets/app.js (and this stylesheet
 * with it) also loads on admin pages, for Live Components and the moderation page's keyboard
 * shortcuts. These four rules had lost that scoping somewhere along the way and leaked into
 * EasyAdmin's own forms; "form label { display: block }" in particular hit the admin header's
 * search box (a <label> around its input, styled by EasyAdmin as `display: inline-grid`), pushing
 * its magnifying-glass icon onto its own line above the input instead of beside it (your report
 * 29. 9. 2026).
 */
.app-shell form fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

.app-shell form legend {
    padding: 0;
}

.app-shell form label {
    display: block;
    margin-block-end: 6px;
    font-size: 14px;
    color: var(--color-muted);
}

.app-shell form input[type="text"],
.app-shell form input[type="email"],
.app-shell form input[type="password"],
.app-shell form input[type="number"],
.app-shell form select,
.day-pick input[type="date"] {
    width: 100%;
    max-width: 24rem;
    padding: 10px 12px;
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 15px;
}
.app-shell form select {
    margin-top: 2px;
}

/* Hub tiles (root page) */
.hub-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 16px;
    max-width: none;
}

.hub-tile {
    display: block;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: 14px;
    padding: 20px;
    text-decoration: none;
    color: var(--color-text);
}
.hub-tile:hover {
    border-color: var(--color-accent);
}
.hub-tile h2 {
    color: var(--color-text);
}

/* Leaderboard rows (mockup 1d) */
.leaderboard-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid var(--color-border-subtle);
    gap: 10px;
}
.leaderboard-rank {
    font: 700 13px 'JetBrains Mono', monospace;
    color: var(--color-muted);
    width: 28px;
    flex: none;
}
.leaderboard-row:first-child .leaderboard-rank {
    color: var(--color-accent);
}
.leaderboard-name {
    font: 500 15px 'Bricolage Grotesque', sans-serif;
    color: var(--color-text);
    margin-right: auto;
}
.leaderboard-score {
    font: 500 13px 'JetBrains Mono', monospace;
    color: var(--color-text);
}
.leaderboard-row.is-you {
    background: var(--color-accent);
    margin: 0 -18px;
    padding: 12px 18px;
}
.leaderboard-row.is-you .leaderboard-rank,
.leaderboard-row.is-you .leaderboard-name,
.leaderboard-row.is-you .leaderboard-score {
    color: #fff;
}
.leaderboard-row.is-you .leaderboard-name {
    font-weight: 600;
}
.leaderboard-ellipsis {
    text-align: center;
    color: var(--color-faint);
    font: 500 13px 'JetBrains Mono', monospace;
    margin: 8px 0;
}

/* Time limit / choice grids (mockup 1d training start) */
.choice-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}
.choice-grid label {
    margin: 0;
}
.choice-grid input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.choice-grid span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    font: 500 14px 'JetBrains Mono', monospace;
    color: var(--color-text);
    background: var(--color-surface);
    cursor: pointer;
}
.choice-grid input:checked + span {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    font-weight: 600;
}
.choice-grid input:focus-visible + span {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* Game round (mockup 1a) */
.game-round {
    max-width: 26rem;
    background: var(--color-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
    display: flex;
    flex-direction: column;
}

.round-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 10px;
}
.round-header .round-id {
    font: 700 13px 'JetBrains Mono', monospace;
    letter-spacing: 0.02em;
}
.round-header .round-of {
    font: 500 12px 'JetBrains Mono', monospace;
    color: var(--color-muted);
}

.progress-bar {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 3px;
    padding: 0 18px 14px;
}
.progress-segment {
    height: 3px;
    background: var(--color-border);
}
/* Always green/red for correct/wrong, not the game's own accent colour (which varies per game
   since the per-game palette, log 25. 9. 2026, and on Landmarks doesn't read as "success" at all). */
.progress-segment.correct {
    background: var(--color-ok);
}
.progress-segment.wrong {
    background: var(--color-wrong);
}
.progress-segment.current {
    background: var(--color-text);
}

.round-gallery {
    position: relative;
}
.round-photo-frame {
    aspect-ratio: 4 / 3;
    background: repeating-linear-gradient(135deg, var(--stripe-a) 0 9px, var(--stripe-b) 9px 18px);
    overflow: hidden;
}
.round-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.round-thumbnails {
    display: flex;
    gap: 6px;
    padding: 6px 6px 0;
}
.round-thumbnail {
    flex: 1;
    aspect-ratio: 1;
    object-fit: cover;
    cursor: pointer;
    outline: 2px solid transparent;
    outline-offset: -2px;
}
.round-thumbnail.active {
    outline-color: var(--color-accent);
}

.round-question {
    padding: 18px 18px 6px;
}
.round-question p {
    font: 600 19px/1.25 'Bricolage Grotesque', sans-serif;
    color: var(--color-text);
    text-wrap: pretty;
}

.lifeline-bar {
    display: flex;
    gap: 8px;
    padding: 0 18px;
}
.lifeline-button {
    flex: 1;
    padding: 10px 12px;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    font: 600 13px 'Bricolage Grotesque', sans-serif;
    color: var(--color-text);
    cursor: pointer;
}
.lifeline-button:hover:not(:disabled) {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.lifeline-button:disabled {
    opacity: 0.45;
    cursor: default;
}
.lifeline-error {
    margin: 0 18px;
    font-size: 13px;
    color: var(--color-warn-text);
}

/* One column (per the prototype and the user's preference): answers stack, they don't sit
   side by side in a two-column grid. */
.round-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px 18px 0;
}

.option-button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 64px;
    padding: 12px;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    font: 500 16px/1.2 'Bricolage Grotesque', sans-serif;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
}
.option-button:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-bg);
}
.option-button.is-cut {
    opacity: 0.4;
    cursor: default;
}

/* Reveal state (plan 3.6): the right answer lights up green, the wrong pick red, the rest fade,
   and the player's own choice is ringed so the result is readable at a glance. */
.round-options.is-revealed .option-button {
    cursor: default;
}
.option-button.is-correct {
    border-color: var(--color-ok);
    background: var(--color-ok-bg);
}
.option-button.is-wrong {
    border-color: var(--color-wrong);
    background: var(--color-wrong-bg);
}
.option-button.is-dimmed {
    opacity: 0.45;
}
.option-button.is-picked {
    box-shadow: 0 0 0 2px var(--color-text);
}
.option-button .option-mark {
    margin-left: auto;
    font-weight: 700;
}
.option-button.is-correct .option-key {
    background: var(--color-ok);
    color: #fff;
}
.option-button.is-wrong .option-key {
    background: var(--color-wrong);
    color: #fff;
}

/* Feedback follows the prototype: the picked right answer pulses, a miss does not move at all;
   instead the photo's border and tint flash red (or green) and fade (see .gallery-main.flash-*). */
.option-button.is-picked.is-correct {
    animation: option-win 0.6s ease-out;
}
.round-options.is-revealed .option-button.is-correct:not(.is-picked) {
    animation: option-reveal 0.5s ease-out 0.25s both;
}
@keyframes option-win {
    0% { transform: scale(1); }
    35% { transform: scale(1.035); box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-ok) 25%, transparent); }
    100% { transform: none; }
}
.gallery-main.flash-ok::after,
.gallery-main.flash-bad::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    animation: photo-flash 0.7s ease-out forwards;
}
.gallery-main.flash-ok::after {
    box-shadow: inset 0 0 0 5px var(--color-ok);
    background: color-mix(in srgb, var(--color-ok) 22%, transparent);
}
.gallery-main.flash-bad::after {
    box-shadow: inset 0 0 0 5px var(--color-wrong);
    background: color-mix(in srgb, var(--color-wrong) 22%, transparent);
}
@keyframes photo-flash {
    0% { opacity: 0; }
    25% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes option-reveal {
    0% { opacity: 0.5; }
    50% { opacity: 1; box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-ok) 25%, transparent); }
    100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .option-button.is-picked.is-correct,
    .round-options.is-revealed .option-button.is-correct:not(.is-picked),
    .gallery-main.flash-ok::after,
    .gallery-main.flash-bad::after {
        animation: none;
        opacity: 0;
    }
}
.option-button .option-audience {
    position: absolute;
    inset: 0;
    width: var(--pct, 0%);
    background: var(--color-accent-bg);
    z-index: 0;
    transition: width 0.3s ease-out;
}
.option-button .option-key,
.option-button > span:not(.option-audience),
.option-button .option-percent {
    position: relative;
    z-index: 1;
}
.option-button .option-percent {
    margin-left: auto;
    flex: none;
    font: 700 13px 'JetBrains Mono', monospace;
    color: var(--color-muted);
}
.option-button .option-key {
    flex: none;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    background: var(--color-inset);
    border-radius: 10px;
    font: 700 11px 'JetBrains Mono', monospace;
    color: var(--color-muted);
}
.option-button em {
    display: block;
    font-style: italic;
    font-size: 12px;
    color: var(--color-faint);
}

.autocomplete-search {
    position: relative;
    padding: 14px 18px 0;
}
.autocomplete-input {
    width: 100%;
    padding: 12px 14px;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    font: 500 16px 'Bricolage Grotesque', sans-serif;
    color: var(--color-text);
}
.autocomplete-input:focus {
    outline: none;
    border-color: var(--color-accent);
}
.autocomplete-list {
    position: absolute;
    left: 18px;
    right: 18px;
    top: calc(100% - 4px);
    z-index: 5;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
}
.autocomplete-list:empty {
    display: none;
}
.autocomplete-list li {
    padding: 10px 14px;
    font: 500 14px 'Bricolage Grotesque', sans-serif;
    color: var(--color-text);
    cursor: pointer;
}
.autocomplete-list li.is-active,
.autocomplete-list li:hover {
    background: var(--color-accent-bg);
}

.hint-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 18px 0;
}
.hint-button {
    padding: 8px 12px;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    font: 600 13px 'Bricolage Grotesque', sans-serif;
    color: var(--color-text);
    cursor: pointer;
}
.hint-button:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.hint-revealed {
    padding: 8px 12px;
    background: var(--color-inset);
    border-radius: 10px;
    font: 600 13px 'Bricolage Grotesque', sans-serif;
    color: var(--color-muted);
}
.hints-used {
    font-size: 13px;
    color: var(--color-muted);
}

.round-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px;
}
.round-score {
    font: 500 13px 'JetBrains Mono', monospace;
    color: var(--color-muted);
}
.round-timer {
    display: flex;
    align-items: center;
    gap: 9px;
}
.round-timer .time {
    font: 500 13px 'JetBrains Mono', monospace;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.round-timer .ring {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: conic-gradient(var(--color-accent) var(--ring-pct, 0%), var(--color-border) 0);
    display: grid;
    place-items: center;
}
.round-timer .ring i {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-surface);
    display: block;
}

/* Reveal card (mockup 1a) */

.reveal-photo-frame {
    position: relative;
    aspect-ratio: 16 / 10;
    background: repeating-linear-gradient(135deg, var(--stripe-a) 0 9px, var(--stripe-b) 9px 18px);
    overflow: hidden;
}
.reveal-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.reveal-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.reveal-body .scientific-name {
    font: 400 15px 'JetBrains Mono', monospace;
    font-style: italic;
    color: var(--color-label);
    margin-top: 5px;
}

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}
/* Tags are buttons, not plain spans, so they take hover and keyboard focus for the tooltip
   (plan 3.11, per the prototype: IUCN status and family/order both explain themselves on hover). */
.tag {
    padding: 5px 9px;
    background: var(--color-inset);
    font: 500 11px 'JetBrains Mono', monospace;
    color: var(--color-muted);
    border: 0;
    border-radius: 99px;
    cursor: help;
}
.tag.iucn {
    background: var(--color-warn-bg);
    border: 1px solid var(--color-warn-border);
    color: var(--color-warn-text);
    font-weight: 600;
}
.tag.iucn-LC {
    background: var(--color-ok-bg);
    border-color: transparent;
    color: var(--color-ok);
}
.tag.iucn-VU,
.tag.iucn-EN,
.tag.iucn-CR,
.tag.iucn-EW,
.tag.iucn-EX {
    background: var(--color-wrong-bg);
    border-color: transparent;
    color: var(--color-wrong);
}

/* Tooltip for a .tag button (plan 3.11): shown on hover and on keyboard focus, so it works without
   a mouse too. Positioned below the tag, capped in width so it wraps on narrow screens. */
.tipwrap {
    position: relative;
    display: inline-flex;
}
.tipwrap .tip {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    z-index: 5;
    width: min(280px, 78vw);
    background: var(--color-text);
    color: var(--color-bg);
    font: 400 13px/1.45 'Bricolage Grotesque', sans-serif;
    padding: 10px 12px;
    border-radius: 10px;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.tipwrap:hover .tip,
.tipwrap:focus-within .tip {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.tip b {
    font-weight: 700;
}

.summary-text {
    margin-top: 16px;
    font: 400 15px/1.5 'Bricolage Grotesque', sans-serif;
    color: var(--color-text);
    text-wrap: pretty;
}

/* The one catchy sentence (plan 3.7) carries the reveal card, so it is set larger than the
   Wikipedia summary it replaces and marked with the game's accent. */
.fun-fact {
    margin-top: 16px;
    padding-left: 12px;
    border-left: 3px solid var(--color-accent);
    font: 500 16px/1.5 'Bricolage Grotesque', sans-serif;
    color: var(--color-text);
    text-wrap: pretty;
}

.reveal-body > a {
    display: inline-block;
    margin-top: 9px;
    font: 500 13px 'Bricolage Grotesque', sans-serif;
}

.life-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    margin: 16px 0 0;
    font-size: 14px;
}
.life-facts dt {
    font: 600 11px 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-label);
    align-self: baseline;
}
.life-facts dd {
    margin: 0;
    color: var(--color-text);
}

/* Collapsible map (plan 3.11, per the prototype): a toggle button with a short "kde žije" caption
   and a mini preview, expanding into the full map. Whether it's expanded is kept in localStorage
   (rangemap_controller.js), so collapsing it carries over to the next round instead of resetting
   on every re-render. */
.range-map {
    margin-top: 16px;
}
.range-map .map-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
}
.range-map .map-mini {
    width: 96px;
    flex: none;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-inset);
    transition: width 0.3s ease, opacity 0.2s ease, margin 0.3s ease;
}
.range-map .map-mini svg,
.range-map .map-mini img {
    display: block;
    width: 100%;
}
.range-map.is-expanded .map-mini {
    width: 0;
    opacity: 0;
    margin-right: -12px;
}
.map-toggle-label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}
.map-toggle-label .overline {
    margin: 0;
}
.map-toggle-where {
    font-size: 14px;
    color: var(--color-muted);
}
.map-chevron {
    flex: none;
    width: 20px;
    height: 20px;
    stroke: var(--color-muted);
    fill: none;
    stroke-width: 2;
    transition: transform 0.2s ease;
}
.range-map.is-expanded .map-chevron {
    transform: rotate(180deg);
}
.map-full {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.35s ease, opacity 0.3s ease;
}
.map-full > .map-wrap {
    min-height: 0;
    overflow: hidden;
}
.range-map.is-expanded .map-full {
    grid-template-rows: 1fr;
    opacity: 1;
}
.map-wrap {
    margin-top: 10px;
}
@media (prefers-reduced-motion: reduce) {
    .map-full,
    .range-map .map-mini {
        transition: none;
    }
}

.range-map img {
    display: block;
    width: 100%;
    border-radius: 10px;
    background: var(--color-inset);
    /* Recolors a black-on-white Commons range map toward the theme's accent hue (plan 3.11). */
    filter: grayscale(1) sepia(1) hue-rotate(100deg) saturate(2.5) brightness(0.95);
}
:root[data-theme="dark"] .range-map img,
.app-shell[data-theme="dark"] .range-map img {
    filter: grayscale(1) invert(1) sepia(1) hue-rotate(100deg) saturate(2.5) brightness(0.9);
}

.range-map-svg {
    display: block;
    width: 100%;
    border-radius: 10px;
    background: var(--color-inset);
    padding: 8px 4px;
}
.range-map-land {
    fill: color-mix(in srgb, var(--color-muted) 32%, transparent);
}
.range-map-dot {
    fill: var(--color-accent);
}
/* The halo pulses outward from each occurrence point, so the eye finds the range immediately. */
.range-map-halo {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 1.5;
    transform-box: fill-box;
    transform-origin: center;
    animation: range-map-pulse 2.4s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .range-map-halo {
        animation: none;
        opacity: 0.45;
    }
}
@keyframes range-map-pulse {
    0% { transform: scale(0.4); opacity: 0.9; }
    70% { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}

.gallery-strip-label {
    margin: 20px 0 9px;
    font: 500 10px 'JetBrains Mono', monospace;
    letter-spacing: 0.06em;
    color: var(--color-label);
    text-transform: uppercase;
}

.gallery-strip {
    display: flex;
    gap: 6px;
}
.gallery-item {
    position: relative;
    margin: 0;
    display: flex;
}
.gallery-strip > * {
    flex: 1;
    /* Flex items default to min-width: auto, so the 400px thumbnails refuse to shrink and push
       the strip out of the panel as soon as a round has more than two photos. */
    min-width: 0;
    aspect-ratio: 1;
    object-fit: cover;
    background: repeating-linear-gradient(135deg, var(--stripe-a) 0 6px, var(--stripe-b) 6px 12px);
}

/* Gallery (plan 3.9): dominant photo with its rating in the corner, thumbnails scrolling under it. */
.gallery {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gallery-main {
    position: relative;
    aspect-ratio: 16 / 10;
    background: repeating-linear-gradient(135deg, var(--stripe-a) 0 9px, var(--stripe-b) 9px 18px);
    overflow: hidden;
}
.gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-thumbs {
    display: flex;
    gap: 6px;
    padding: 0 8px 4px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.gallery-thumb-wrap {
    position: relative;
    flex: none;
    width: 84px;
    aspect-ratio: 1;
}
.gallery-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background: none;
    cursor: pointer;
}
.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gallery-thumb.is-active {
    border-color: var(--color-accent);
}

/* Thumbs up / down (plan 3.7), per the prototype: no circle behind the icon, just an outline that
   fills solid once picked, sitting in the photo's bottom right corner. Available on the dominant
   photo and on every thumbnail, in both phases. No counts: the player rates what they see instead
   of following a score. */
.photo-vote {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: flex;
    gap: 2px;
}
.photo-vote-button {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    padding: 0;
    background: none;
    border-radius: 6px;
    cursor: pointer;
}
.icon-thumb {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.65));
    transition: transform 0.15s ease-out;
}
.photo-vote-button:hover .icon-thumb {
    transform: scale(1.12);
}
.photo-vote-button.is-active .icon-thumb {
    fill: var(--color-accent);
}
.photo-vote-button[data-value="-1"].is-active .icon-thumb {
    fill: var(--color-wrong);
}
/* The thumbnail strip repeats the same overlay at a smaller size (prototype: 26px / 15px icon). */
.gallery-thumb-wrap .photo-vote {
    right: 1px;
    bottom: 1px;
    gap: 0;
}
.gallery-thumb-wrap .photo-vote-button {
    width: 26px;
    height: 26px;
}
.gallery-thumb-wrap .icon-thumb {
    width: 15px;
    height: 15px;
}

.attribution {
    margin-top: 14px;
    font: 400 10.5px/1.5 'JetBrains Mono', monospace;
    color: var(--color-muted);
}
.attribution a {
    color: var(--color-muted);
}

/* Summary / finished (prototype "Výsledek"): big score left, points right, coloured segments,
   the share text in a grey mono box. */
.round-summary {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 16px 0;
}
.summary-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
}
.summary-score {
    font: 800 64px/1 'Bricolage Grotesque', sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    color: var(--color-text);
}
.summary-score .of-ten {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-faint);
}
.summary-points {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
    color: var(--color-muted);
}
.summary-points b {
    font: 800 26px/1.1 'Bricolage Grotesque', sans-serif;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.round-summary .summary-segments {
    padding: 0;
}
.cta-panel {
    align-items: flex-start;
}

.share-text {
    margin: 0;
    background: var(--color-inset);
    border-radius: 14px;
    padding: 12px 14px;
    white-space: pre-wrap;
    overflow-x: auto;
    font: 500 14px/1.6 'JetBrains Mono', monospace;
    color: var(--color-text);
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    border-top: 1px solid var(--color-border-subtle);
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: 14px;
}
.stat-row .stat-row-value {
    font: 700 14px 'JetBrains Mono', monospace;
}

/* Long-form content pages (about, privacy, photo sources) */
.prose {
    max-width: 40rem;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.prose p {
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.6;
}
.prose h2 {
    margin-top: 10px;
    font-size: 20px;
}
.prose section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-block: 14px;
    border-top: 1px solid var(--color-border-subtle);
}
.prose section:first-of-type {
    border-top: 0;
    padding-top: 0;
}
.prose ul {
    margin: 0;
    padding-left: 18px;
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.6;
}
.prose li {
    margin-bottom: 4px;
}

/* Mobile */
@media (max-width: 30rem) {
    .app-header {
        padding: 10px 14px;
        /* Logged in, the account nav (nickname + Admin + Odhlásit se) no longer fits next to the
           logo and toggle; without this it squeezed in and wrapped every label onto its own line
           instead of wrapping as a group. */
        flex-wrap: wrap;
        row-gap: 8px;
    }
    .app-header .brand {
        order: 1;
        white-space: nowrap;
    }
    .app-header .theme-toggle {
        order: 2;
    }
    .app-header-account {
        order: 3;
        flex-basis: 100%;
        margin-inline: 0;
        justify-content: flex-end;
    }
    #main {
        padding: 18px 14px;
    }
    .panel,
    .game-round {
        max-width: none;
    }
}

/* Visible to screen readers only: the vote buttons are arrows, which say nothing out loud. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Moderation page (plan 7.6). Deliberately not scoped under .app-shell: it renders inside
   EasyAdmin's layout, and these class names exist nowhere else. The grid matters for speed,
   a moderator goes through ~1200 candidates and needs several visible at once. */
.moderation-progress {
    margin: 16px 0 4px;
    font-weight: 600;
}

.moderation-bulk {
    display: flex;
    gap: 8px;
    margin: 10px 0 14px;
}

.moderation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
}

.moderation-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.moderation-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
    background: #0002;
}
.moderation-card.is-next {
    outline: 2px solid #4a9;
    outline-offset: 4px;
    border-radius: 10px;
}
.moderation-next-badge {
    align-self: start;
    padding: 2px 8px;
    border-radius: 99px;
    background: #4a9;
    color: #06231a;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.moderation-card-actions {
    display: flex;
    gap: 6px;
}
.moderation-card-actions form {
    flex: 1;
}

.moderation-hint {
    margin-bottom: 14px;
}
.moderation-hint kbd {
    padding: 2px 7px;
    border-radius: 5px;
    background: #ffffff1a;
    font-family: monospace;
}

.moderation-button {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s ease-out;
}
.moderation-button:hover {
    filter: brightness(1.12);
}
.moderation-button.is-approve {
    background: #2f9e6e;
    color: #052b1d;
}
.moderation-button.is-reject {
    background: #2a2f2c;
    color: #e9b0a6;
    border-color: #6b3b33;
}

/* Leaderboard tabs (daily / all time, plan 4.4) and the badge icons next to a name (plan 4.5). */
.leaderboard-tabs {
    display: flex;
    gap: 6px;
}
.leaderboard-tabs .tab {
    flex: 1;
    padding: 9px 12px;
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}
.leaderboard-tabs .tab.is-active {
    border-color: var(--color-accent);
    background: var(--color-accent-bg);
    color: var(--color-accent);
}

.leaderboard-badge {
    margin-left: 4px;
    font-size: 14px;
}
.leaderboard-meta {
    font: 500 12px 'JetBrains Mono', monospace;
    color: var(--color-muted);
    white-space: nowrap;
}

/* Desktop (plan 7.5): the phone column stays as is below 56rem; above it the round becomes two
   columns (photos left, question or reveal card right) and panels get a wider container. */
@media (min-width: 56rem) {
    .panel {
        max-width: 40rem;
    }

    .zoo-intro {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        align-items: start;
    }
    .zoo-intro .panel {
        max-width: none;
    }
    .zoo-intro .panel + .panel {
        margin-top: 0;
    }
    /* Breadcrumbs sit above the columns, and a lone panel is centred instead of hanging in the right column. */
    .zoo-intro > .breadcrumbs {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }
    .zoo-intro > .panel:only-of-type {
        grid-column: 1 / -1;
        justify-self: center;
        width: min(100%, 40rem);
    }

    .game-round {
        max-width: none;
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        column-gap: 24px;
        align-content: start;
        border-radius: 14px;
    }
    .game-round > * {
        grid-column: 2;
    }
    .game-round > .round-header,
    .game-round > .progress-bar,
    .game-round > .round-summary,
    .game-round > .round-actions {
        grid-column: 1 / -1;
    }
    .game-round > .gallery {
        grid-column: 1;
        grid-row: 3 / span 12;
        align-self: start;
        position: sticky;
        top: 16px;
    }
    .game-round > .round-summary {
        max-width: 32rem;
        margin-inline: auto;
    }
    .gallery-main {
        aspect-ratio: 4 / 3;
    }
}
@media (min-width: 56rem) {
    .game-round > .gallery .attribution {
        padding: 0 8px;
    }
}

/* Prototype fidelity pass (docs/prototype v3.1, .phone/.screen/.round-head/.life/.opt): the round
   is one rounded card with 16px gutters, the header shows "Kolo n/10", running points and the
   streak chip, lifelines are icon pills and the audience bars grow in. */
.game-round {
    border: 1px solid var(--color-border);
    border-radius: 22px;
    box-shadow: 0 1px 2px rgba(24, 34, 28, 0.06), 0 8px 24px rgba(24, 34, 28, 0.07);
    overflow: hidden;
    gap: 16px;
    padding-bottom: 22px;
}
.game-round > * {
    margin: 0;
}

.round-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 8px 12px;
    padding: 18px 16px 0;
}
.round-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.round-title .eyebrow {
    font: 600 12px/1 Figtree, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--color-faint);
}
.round-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 12px;
}
.round-header .round-of {
    font: 700 18px/1.2 'Bricolage Grotesque', sans-serif;
    color: var(--color-text);
}
.chip.streak {
    display: inline-flex;
    align-items: center;
    font: 700 12px/1 Figtree, sans-serif;
    padding: 5px 9px;
    border-radius: 99px;
    background: var(--color-gold-bg);
    color: var(--color-gold);
}

/* Points sit in the header's top-right corner, above the timer ring when the timer is on. */
.round-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.round-points {
    font: 700 15px/1 Figtree, sans-serif;
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}
.round-points b {
    color: var(--color-text);
    font-size: 17px;
}

.round-timer {
    position: relative;
    width: 52px;
    height: 52px;
    flex: none;
}
.round-timer .ring {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: conic-gradient(var(--color-accent) var(--ring-pct, 100%), var(--color-inset) 0);
    display: grid;
    place-items: center;
}
.round-timer .ring i {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-surface);
}
.round-timer .time {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 700 16px/1 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
}

.progress-bar {
    gap: 4px;
    padding: 0 16px;
}
.progress-segment {
    height: 6px;
    border-radius: 3px;
    background: var(--color-inset);
}
.progress-segment.current {
    background: var(--color-faint);
}

.gallery {
    padding: 0 16px;
    gap: 6px;
}
.gallery-main {
    border-radius: 14px;
    aspect-ratio: 4 / 3;
}
.gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 0;
    overflow: visible;
}
.gallery-thumb-wrap {
    width: auto;
}
.gallery-thumb {
    border-radius: 10px;
}
.gallery .attribution {
    padding: 0;
}

.round-question {
    padding: 0 16px;
}
.round-question p {
    font: 700 22px/1.2 'Bricolage Grotesque', sans-serif;
}

.lifeline-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px;
}
.lifeline-button {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1.5px solid var(--color-border);
    border-radius: 99px;
    background: var(--color-surface);
    font: 700 14px Figtree, sans-serif;
    color: var(--color-text);
}
.lifeline-button svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.lifeline-button:hover:not(:disabled) {
    border-color: var(--color-gold);
    color: var(--color-gold);
}
.lifeline-button:disabled {
    opacity: 0.4;
}
.lifeline-button.is-used {
    background: var(--color-gold-bg);
    border-color: var(--color-gold);
    color: var(--color-gold);
    opacity: 1;
}
.lifeline-button small {
    font-weight: 600;
    color: var(--color-faint);
}
.crowd-note {
    margin: -8px 0 0;
    padding: 0 16px;
    font-size: 14px;
    color: var(--color-muted);
}

.round-options {
    gap: 8px;
    padding: 0 16px;
}
.option-button {
    min-height: 0;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 12px;
    font: 600 17px/1.25 Figtree, sans-serif;
}
.option-button .option-key {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    font: 600 13px/1 'JetBrains Mono', monospace;
    color: var(--color-muted);
}
.option-button .option-audience {
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    animation: audience-grow 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.option-button .option-percent {
    font: 600 14px/1 'JetBrains Mono', monospace;
    color: var(--color-muted);
}
.option-button.is-cut {
    opacity: 0.35;
    text-decoration: line-through;
    text-decoration-color: var(--color-faint);
}
@keyframes audience-grow {
    from { width: 0; }
    to { width: var(--pct, 0%); }
}
@media (prefers-reduced-motion: reduce) {
    .option-button .option-audience {
        animation: none;
    }
}
.reveal-body {
    padding: 0 16px;
}

/* Prototype shell and screens (docs/prototype: .top/.brand/.crumb, .screen, .panel, .game-tile, .hero). */
.app-header .brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 800 20px/1 'Bricolage Grotesque', sans-serif;
    letter-spacing: -0.02em;
}
.brand-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--color-accent);
    transform: rotate(45deg);
}
.crumb {
    margin-left: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-faint);
}

.eyebrow {
    margin: 0;
    font: 600 12px/1 Figtree, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--color-faint);
}
.lede {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-muted);
}

/* A white screen card with grey panels inside, like the prototype's phone. */
.screen-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 22px;
    box-shadow: 0 1px 2px rgba(24, 34, 28, 0.06), 0 8px 24px rgba(24, 34, 28, 0.07);
    padding: 22px 16px;
    gap: 16px;
}
.screen-panel h1 {
    font: 800 30px/1.1 'Bricolage Grotesque', sans-serif;
}
.screen-panel .panel.inset {
    max-width: none;
    margin: 0;
    background: var(--color-inset);
    border-radius: 14px;
    padding: 16px;
    gap: 10px;
}
.screen-panel .panel.inset h2 {
    font: 700 24px/1.15 'Bricolage Grotesque', sans-serif;
}
.button-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--color-inset);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
}
.tabs button {
    border: 0;
    background: none;
    border-radius: 9px;
    padding: 9px;
    font-weight: 700;
    color: var(--color-muted);
    cursor: pointer;
}
.tabs button:hover {
    color: var(--color-text);
}
.tabs button[aria-selected="true"] {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 1px 2px rgba(24, 34, 28, 0.08);
}
.tab-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}
.tab-panel[hidden] {
    display: none;
}

.hub-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.hero h1 {
    font: 800 34px/1.1 'Bricolage Grotesque', sans-serif;
}
.hero p {
    margin-top: 6px;
    color: var(--color-muted);
}
/* Game tiles on the hub (Claude Design "hadej-to-web" mockup, log 25. 9. 2026): one skeleton for
   every game, even one without data yet, a missing value is a dash (.empty-value), not a
   different layout. Two equal columns from 40rem, one below it. */
.game-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 40rem) {
    .game-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
.game-tile {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--color-surface);
    box-shadow: var(--shadow);
}
/* The hub itself stays neutral, but each tile bands its own game's colour, same values as the
   page-level overrides above (.app-shell:has(> main[data-game])). */
.game-tile[data-game="zoo"] {
    --color-accent: #1e6b55;
    --color-accent-bg: #d5e7df;
}
:root[data-theme="dark"] .game-tile[data-game="zoo"] {
    --color-accent: #5dbb98;
    --color-accent-bg: #1d3a30;
}
.game-tile[data-game="landmarks"] {
    --color-accent: #8a5326;
    --color-accent-bg: #f0e0cb;
}
:root[data-theme="dark"] .game-tile[data-game="landmarks"] {
    --color-accent: #dda860;
    --color-accent-bg: #3a2b18;
}
/* a.tile-band (not just .tile-band): needs to outrank .app-shell a's own color rule, which
   otherwise wins on specificity and renders the band's text in the (invisible-on-itself) accent
   colour instead of the text-on-accent colour. */
a.tile-band {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--color-accent);
    color: var(--color-cta-text);
    text-decoration: none;
}
a.tile-band:hover {
    text-decoration: none;
    color: var(--color-cta-text);
}
.tile-band h2 {
    color: inherit;
    font: 800 26px/1.1 'Bricolage Grotesque', sans-serif;
}
.tile-band .tile-count {
    margin-left: auto;
    font-size: 13px;
    font-weight: 700;
    opacity: 0.9;
    white-space: nowrap;
}
.tile-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
}
.tile-icon svg {
    width: 24px;
    height: 24px;
}
.tile-photo {
    width: 100%;
    height: 104px;
    object-fit: cover;
    display: block;
}
.tile-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
}
.game-tile .tile-desc {
    margin: 0;
    font-size: 14px;
    color: var(--color-muted);
    min-height: 2.6em;
}
.tile-today {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 78px;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-inset);
}
.tile-today > div {
    min-width: 0;
}
.tile-today h3 {
    font: 700 18px/1.2 'Bricolage Grotesque', sans-serif;
    margin: 4px 0 0;
}
.tile-today .button {
    margin-left: auto;
    width: auto;
    flex: none;
    white-space: nowrap;
}
.tile-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.tile-stats.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--color-inset);
}
.stat-value {
    font: 800 20px/1.1 'Bricolage Grotesque', sans-serif;
}
.stat-value.empty-value {
    color: var(--color-faint);
}
.stat-label {
    font-size: 12px;
    color: var(--color-muted);
}
.tile-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: auto 0 0;
    padding-top: 2px;
}
.tile-links a {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.soon {
    margin: 0;
    border: 1px dashed var(--color-border);
    border-radius: 14px;
    padding: 14px;
    color: var(--color-faint);
    font-size: 14px;
}
.support-teaser {
    max-width: none;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.support-teaser > div {
    flex: 1;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.support-teaser .button {
    margin-left: auto;
    width: auto;
    flex: none;
}
@media (max-width: 30rem) {
    .support-teaser {
        flex-direction: column;
        align-items: stretch;
    }
    .support-teaser .button {
        margin-left: 0;
        width: 100%;
    }
}
.seo-text {
    max-width: 40rem;
    border-top: 1px solid var(--color-border);
    padding-top: 18px;
}
.seo-text h2 {
    font: 700 20px/1.2 'Bricolage Grotesque', sans-serif;
    margin: 16px 0 6px;
}
.seo-text p,
.seo-text li {
    color: var(--color-muted);
    line-height: 1.55;
}
.seo-text ul {
    padding-left: 20px;
}
/* `.app-shell a:hover` (link colour) must not recolour buttons that are links. */
.app-shell a.button-primary:hover {
    color: var(--color-cta-text);
}
.app-shell a.button:not(.button-primary):not(.button-on-callout):hover {
    color: var(--color-text);
}
.app-shell a.button-primary,
.app-shell a.button-primary:hover {
    color: var(--color-cta-text);
}
.app-shell a.button:not(.button-primary):not(.button-on-callout) {
    color: var(--color-text);
    font-weight: 700;
}

/* Leaderboard as in the prototype: rank, "name #id", bold points over a small time, own row tinted. */
.lb {
    display: flex;
    flex-direction: column;
}
.leaderboard-row {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 4px;
    border-top: 0;
    border-bottom: 1px solid var(--color-border);
    font-variant-numeric: tabular-nums;
}
.leaderboard-row .leaderboard-rank {
    text-align: right;
    font: 700 16px Figtree, sans-serif;
    color: var(--color-faint);
    width: auto;
}
.leaderboard-row:first-child .leaderboard-rank {
    color: var(--color-faint);
}
.leaderboard-name {
    font: 500 16px Figtree, sans-serif;
    margin-right: 0;
}
.leaderboard-name small {
    color: var(--color-faint);
    font-weight: 500;
    font-size: inherit;
}
.leaderboard-score {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font: 700 17px Figtree, sans-serif;
}
.leaderboard-time {
    font: 500 12px Figtree, sans-serif;
    color: var(--color-faint);
}
/* The record to beat on a shared challenge's own leaderboard (plan, 29. 9. 2026 redesign); .is-you
   is declared after this on purpose, so a leader looking at their own row still gets the personal
   tint instead of the gold one. */
.leaderboard-row.is-leader {
    background: var(--color-gold-bg);
    margin: 0;
    padding: 10px 4px;
    border-radius: 10px;
    border-bottom-color: transparent;
}
.leaderboard-row.is-leader .leaderboard-rank {
    font-size: 18px;
}
.leaderboard-row.is-you {
    background: var(--color-accent-bg);
    margin: 0;
    padding: 10px 4px;
    border-radius: 10px;
    border-bottom-color: transparent;
}
.leaderboard-row.is-you .leaderboard-rank,
.leaderboard-row.is-you .leaderboard-name,
.leaderboard-row.is-you .leaderboard-score {
    color: var(--color-text);
}

/* Shared challenge invite (redesign, plan 29. 9. 2026): a fanned strip of the challenge's own
   photos as the hero, the most characteristic thing this page can lead with. Decorative
   (aria-hidden in the template), so no focus states or alt text to worry about. */
.shared-photo-strip {
    display: flex;
    justify-content: center;
    padding: 4px 0 10px;
}
.shared-photo-strip img {
    width: clamp(46px, 14vw, 64px);
    height: clamp(46px, 14vw, 64px);
    object-fit: cover;
    border-radius: 14px;
    border: 3px solid var(--color-surface);
    box-shadow: var(--shadow);
    background: var(--color-inset);
    margin-left: -16px;
}
.shared-photo-strip img:first-child {
    margin-left: 0;
}
.shared-photo-strip img:nth-child(odd) {
    transform: rotate(-4deg);
}
.shared-photo-strip img:nth-child(even) {
    transform: rotate(3deg);
}

/* Login and registration (prototype "Přihlášení"): segmented tabs, social button, divider. */
.seg-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    background: var(--color-inset);
    border-radius: 14px;
}
.seg-tabs a {
    text-align: center;
    padding: 10px 4px;
    border-radius: 11px;
    font-weight: 700;
    text-decoration: none;
    color: var(--color-muted);
}
.app-shell .seg-tabs a.is-active {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 1px 2px rgba(24, 34, 28, 0.12);
}
.social-button {
    justify-content: flex-start;
    gap: 12px;
    padding: 0 12px;
    font-weight: 700;
}
.social-mark {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: var(--color-inset);
    font: 800 13px/1 'Bricolage Grotesque', sans-serif;
}
.or-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 13px;
    color: var(--color-faint);
}
.or-divider::before,
.or-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
}
.text-link {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.auth-panel form label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}

/* Support (prototype "Podpora"): meter panel, big amount, QR panel with account details. */
.meter-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}
.meter-head span {
    font-size: 14px;
    color: var(--color-muted);
}
.meter {
    height: 12px;
    border-radius: 99px;
    background: var(--color-border);
    overflow: hidden;
}
.meter i {
    display: block;
    height: 100%;
    background: var(--color-accent);
    border-radius: 99px;
}
.qr-block {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.amount-display {
    text-align: center;
    font: 800 44px/1 'Bricolage Grotesque', sans-serif;
    font-variant-numeric: tabular-nums;
}
.amount-display small {
    display: block;
    margin-top: 6px;
    font: 500 14px Figtree, sans-serif;
    color: var(--color-muted);
}
.qr-panel {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}
.qr-panel img {
    background: #fff;
    border-radius: 12px;
    padding: 6px;
}
.qr-info {
    flex: 1;
    min-width: 12rem;
}
.qr-info p {
    margin: 4px 0 8px;
    color: var(--color-muted);
    font-size: 14px;
}
.qr-info dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    margin: 0;
    font-size: 13px;
}
.qr-info dt {
    color: var(--color-muted);
}
.qr-info dd {
    margin: 0;
    font: 600 12px 'JetBrains Mono', monospace;
    word-break: break-all;
}
.history-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.history-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
    color: var(--color-muted);
}
.history-row span:last-child {
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

input[type="range"] {
    accent-color: var(--color-accent);
}

/* Profile (prototype "Profil"): badge medals up top, then compact grey forms with the input and its button on one row. */
.profile-panel .badge-grid {
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
}
.profile-panel .panel.inset {
    gap: 8px;
}
.profile-panel .panel.inset h2 {
    font: 700 17px/1.2 Figtree, sans-serif;
}
.profile-panel .panel.inset form:not([style]) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
}
.profile-panel .panel.inset form input[type="text"],
.profile-panel .panel.inset form input[type="email"] {
    flex: 1;
    min-width: 0;
}
.profile-panel .panel.inset form .button {
    width: auto;
    margin-top: 0 !important;
    min-height: 46px;
}
.profile-panel .panel.inset form label:not([style]) {
    flex-basis: 100%;
    font-weight: 600;
}

/* Animals the player keeps getting wrong (profile list, training toggle). */
.weak-list {
    margin: 0;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.weak-list li {
    padding-left: 4px;
}
.weak-list li > span em {
    color: var(--color-faint);
    font-size: 13px;
}
.weak-list small {
    display: block;
    color: var(--color-muted);
}
.weak-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}
.weak-toggle small {
    font-weight: 500;
    color: var(--color-muted);
}

/* Zoo and theme collections as chips on the intro page. */
.collection-tiles {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.collection-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1.5px solid var(--color-border);
    border-radius: 99px;
    background: var(--color-surface);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}
.app-shell a.collection-chip {
    color: var(--color-text);
}
.app-shell a.collection-chip:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}
.collection-chip small {
    color: var(--color-faint);
    font-weight: 600;
}

/* "Nevím, dál" and hint labels. */
.skip-row {
    padding: 0 16px;
}
/* At the card's bottom, clearly apart from the hints above it (plan feedback 30. 9. 2026). */
.round-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 0;
    margin-top: 8px;
    border-top: 1px solid var(--color-border);
}
.reveal-body .round-actions {
    padding: 6px 0 0;
    margin-top: 0;
    border-top: 0;
}
.round-actions .skip-button {
    margin-left: auto;
}
.end-button {
    background: none;
    border: 0;
    padding: 6px 0;
    font: 600 14px Figtree, sans-serif;
    color: var(--color-faint);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.end-button:hover {
    color: var(--color-wrong);
}
.skip-button {
    background: none;
    border: 0;
    padding: 6px 0;
    font: 600 14px Figtree, sans-serif;
    color: var(--color-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.skip-button:hover {
    color: var(--color-accent);
}
.skip-note {
    margin: 0 16px;
    font-size: 14px;
    color: var(--color-muted);
}
.hint-revealed b {
    font-weight: 700;
}

/* Motion: things fade and rise in instead of popping (prototype's "rise"); all off for reduced motion. */
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes rise-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
@keyframes pop-in {
    from { opacity: 0; transform: scale(0.7); }
    to { opacity: 1; transform: none; }
}
.screen-panel,
.hero,
.game-tile,
.game-grid > .soon,
.hub-page > .support-teaser,
.seo-text {
    animation: rise-in 0.45s ease-out both;
}
.game-tile { animation-delay: 0.05s; }
.game-grid > .soon { animation-delay: 0.1s; }
.hub-page > .support-teaser { animation-delay: 0.15s; }
.seo-text { animation-delay: 0.2s; }
.game-round {
    animation: fade-in 0.35s ease-out both;
}
.game-round > .gallery,
.game-round > .round-question,
.game-round > .round-options {
    animation: fade-in 0.5s ease-out both;
}
.game-round > .round-options {
    animation-delay: 0.08s;
}
.reveal-body {
    animation: rise-in 0.5s ease-out 0.15s both;
}
.round-gain {
    display: inline-flex;
    padding: 4px 9px;
    border-radius: 99px;
    font: 800 13px/1 Figtree, sans-serif;
    animation: pop-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.round-gain.is-ok {
    background: var(--color-ok-bg);
    color: var(--color-ok);
}
.round-gain.is-bad {
    background: var(--color-wrong-bg);
    color: var(--color-wrong);
}
.crowd-note,
.hint-bar {
    animation: fade-in 0.4s ease-out both;
}
.progress-segment {
    transition: background-color 0.5s ease;
}
.option-button,
.lifeline-button,
.button {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
    .screen-panel,
    .hero,
    .game-tile,
    .game-grid > .soon,
    .hub-page > .support-teaser,
    .seo-text,
    .game-round,
    .game-round > .gallery,
    .game-round > .round-question,
    .game-round > .round-options,
    .reveal-body,
    .round-gain,
    .crowd-note,
    .hint-bar {
        animation: none;
    }
}

/* Hints as a stable column: "Kde žije: [Odhalit (−150 b)]", the button becomes the hint text in place. */
.hint-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 16px;
}
.hint-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
}
.hint-label {
    flex: none;
    min-width: 7.5rem;
    font-weight: 700;
    font-size: 14px;
    color: var(--color-muted);
}
.hint-row .hint-revealed {
    padding: 7px 12px;
    background: var(--color-inset);
    border-radius: 10px;
    font: 600 14px Figtree, sans-serif;
    color: var(--color-text);
    animation: fade-in 0.4s ease-out both;
}

.answer-caption {
    font: 600 12px Figtree, sans-serif;
    color: var(--color-muted);
}
.heading-mark {
    color: var(--color-ok);
    font-size: 0.8em;
}

/* The round on screen (live or one looked back at) has its segment drawn bigger with a soft glow in
   its result colour: green right, red wrong, grey while it is still unanswered. */
.progress-segment.correct {
    --seg: var(--color-ok);
}
.progress-segment.wrong {
    --seg: var(--color-wrong);
}
.progress-segment.is-viewed {
    transform: scaleY(1.6);
    box-shadow: 0 0 6px 1px color-mix(in srgb, var(--seg, var(--color-faint)) 22%, transparent);
}

/* The segments are buttons for the rounds already reached: click to look back or forward. */
.progress-bar button.progress-segment {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    cursor: pointer;
    position: relative;
}
.progress-bar button.progress-segment::after {
    content: "";
    position: absolute;
    inset: -9px 0;
}
.progress-bar button.progress-segment:hover {
    filter: brightness(0.92);
}
.progress-bar button.progress-segment:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}
.progress-segment.is-viewed {
    box-shadow: 0 0 8px 2px color-mix(in srgb, var(--seg, var(--color-faint)) 38%, transparent);
}

/* Answer box: input with a confirm arrow beside it; the suggestion list scrolls when it grows. */
.autocomplete-search {
    padding: 0 16px;
}
.autocomplete-field {
    display: flex;
    gap: 8px;
}
.autocomplete-field .autocomplete-input {
    flex: 1;
    min-width: 0;
}
.autocomplete-confirm {
    flex: none;
    width: 48px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: var(--color-ok);
    color: #fff;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.15s ease;
}
.autocomplete-confirm svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.autocomplete-confirm:disabled {
    opacity: 0.35;
    cursor: default;
}
.autocomplete-confirm:not(:disabled):hover {
    transform: scale(1.05);
}
.autocomplete-list {
    left: 16px;
    right: 72px;
    top: calc(100% + 4px);
    max-height: 14rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 8px 24px rgba(24, 34, 28, 0.15);
}

/* Leaderboard day picker: previous day, a date input (calendar), next day, back to today. */
.day-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
.day-step {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    font: 700 22px/1 Figtree, sans-serif;
    text-decoration: none;
}
.app-shell a.day-step {
    color: var(--color-text);
}
.day-step.is-off {
    opacity: 0.35;
}
.day-pick {
    flex: 1;
}
.day-pick input[type="date"] {
    max-width: none;
    height: 40px;
    padding: 0 10px;
    text-align: center;
}
.day-today {
    font-weight: 700;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* After the last round the result and the leaderboard are two separate rectangles, not one card. */
.game-round.is-ended {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    max-width: 36rem;
    margin-inline: auto;
    animation: none;
}
.game-round.is-ended > .round-summary,
.game-round.is-ended > .round-leaderboard {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 22px;
    box-shadow: 0 1px 2px rgba(24, 34, 28, 0.06), 0 8px 24px rgba(24, 34, 28, 0.07);
    padding: 22px 16px;
    max-width: none;
    margin: 0;
    animation: rise-in 0.45s ease-out both;
}
.game-round.is-ended > .round-leaderboard {
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation-delay: 0.15s;
}
.round-leaderboard h2 {
    font: 800 24px/1.1 'Bricolage Grotesque', sans-serif;
    margin: 0;
}

/* The glow of the round on screen breathes, so it is easy to spot which one you are on. */
@keyframes segment-glow {
    0%, 100% { box-shadow: 0 0 5px 1px color-mix(in srgb, var(--seg, var(--color-faint)) 22%, transparent); }
    50% { box-shadow: 0 0 11px 3px color-mix(in srgb, var(--seg, var(--color-faint)) 55%, transparent); }
}
.progress-segment.is-viewed {
    animation: segment-glow 2.2s ease-in-out infinite;
}
.progress-segment {
    transition: background-color 0.5s ease, transform 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
    .progress-segment.is-viewed {
        animation: none;
    }
}

.benefits-panel ul {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: var(--color-muted);
}
.benefits-panel li strong {
    color: var(--color-text);
}

/* Breadcrumbs: where am I and the way back (Hub > Zoo > Trénink ...). */
.breadcrumbs {
    margin: 0 0 14px;
}
.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}
.breadcrumbs li:not(:last-child)::after {
    content: "\203A";
    margin-left: 8px;
    color: var(--color-faint);
}
.breadcrumbs a {
    font-weight: 600;
    text-decoration: none;
}
.breadcrumbs a:hover {
    text-decoration: underline;
}
.breadcrumbs [aria-current] {
    color: var(--color-muted);
    font-weight: 600;
}

/* Fun fact dropdown: reuses the range map fold; the collapsed caption is a one line teaser. */
.fact-fold .fact-teaser {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fact-fold.is-expanded .fact-teaser {
    display: none;
}

/* Support page amount picker: preset chips plus a custom amount field. */
.amount-picker {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.amount-picker .overline {
    margin: 0;
}
.amount-picker input[type="number"] {
    /* Not inside a <form> (it only drives the QR code live, nothing is submitted), so it misses
       the site's generic "form input[type='number']" styling and needs its own. */
    width: 100%;
    max-width: none;
    padding: 10px 12px;
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 15px;
}
.amount-picker input[type="number"]:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

/* Training form: options on the left, filters on the right from tablet width up. */
.training-columns {
    display: grid;
    gap: 0;
}
@media (min-width: 40rem) {
    .training-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
        align-items: start;
    }
}
@media (min-width: 40rem) {
    .training-col > .overline:first-child {
        margin-top: 0 !important;
    }
}

/* Gallery arrows: previous/next photo on the dominant photo, plus a "2 / 4" counter. */
.gallery-main {
    position: relative;
}
.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: #17241d;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.gallery-arrow:hover,
.gallery-arrow:focus-visible {
    opacity: 1;
    background: #fff;
}
.gallery-arrow svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.gallery-arrow-prev {
    left: 10px;
}
.gallery-arrow-next {
    right: 10px;
}
.gallery-counter {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font: 600 12px 'JetBrains Mono', monospace;
    pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
    .gallery-arrow {
        opacity: 0.55;
    }
    .gallery-main:hover .gallery-arrow {
        opacity: 1;
    }
}
.gallery-main {
    touch-action: pan-y;
}

/* Live count under the training filters. */
.training-count {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--color-muted);
}
.training-count.is-short {
    color: var(--color-wrong);
    font-weight: 600;
}