/* ============================================================
   Oliver Jansta — Pixel Quest
   Retro-gaming portfolio: level select, tvrdé stíny,
   skokové (steps) animace, XP bary.
   ============================================================ */

:root {
    color-scheme: dark;
    --bg: #140f2e;
    --panel: #1b1440;
    --panel-line: #2e2363;
    --ink: #0c0920;
    --text: #f2efff;
    --muted: rgba(242, 239, 255, 0.68);
    --yellow: #facc15;
    --pink: #f472b6;
    --blue: #38bdf8;
    --green: #4ade80;
    --violet: #a78bfa;
    --card-yellow: #f2d838;
    --px-shadow: 4px;
    --px-shadow-hover: 7px;
    --tile-gap: 1.5rem;
    --pixel-font: "Press Start 2P", ui-monospace, Menlo, monospace;
    --mono-font: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}

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

html {
    scroll-behavior: smooth;
    background: var(--bg);
    /* clip (ne hidden) – nevytváří scroll-kontejner, takže skokové fx
       animace (translateX -130px) ani scrollIntoView na mobilu nemůžou
       odrolovat stránku vodorovně a "schovat" obsah za levý okraj */
    overflow-x: clip;
}

body {
    min-width: 320px;
    margin: 0;
    font-family: var(--mono-font);
    color: var(--text);
    background-color: var(--bg);
    background-image:
        linear-gradient(rgba(242, 239, 255, 0.035) 2px, transparent 2px),
        linear-gradient(90deg, rgba(242, 239, 255, 0.035) 2px, transparent 2px);
    background-size: 28px 28px;
    overflow-x: clip;
}

::selection {
    background: var(--yellow);
    color: var(--ink);
}

a {
    color: inherit;
}

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

/* ---------- Custom kurzor (pixel šipka) ----------
   Jen na desktopu (jemný pointer + hover) – na dotykových zařízeních
   nemá kurzor smysl a JS trail by jen překážel. Hotspot 1 1 sedí na
   špičku šipky; každé pravidlo má fallback (auto / pointer) pro případ,
   že se data-URI nenačte. Šipka je opravdový pixel-art sprite (mřížka
   <rect> 1×1, shape-rendering: crispEdges), takže pixely jsou ostře
   vidět – žádné vyhlazené diagonály. */
@media (hover: hover) and (pointer: fine) {
    body {
        cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2718%27%20height%3D%2730%27%20viewBox%3D%270%200%209%2015%27%20shape-rendering%3D%27crispEdges%27%3E%3Crect%20x%3D%270%27%20y%3D%270%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%272%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%272%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%272%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%273%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%273%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%273%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%277%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%277%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%277%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%277%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%277%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%277%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%277%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%277%27%20y%3D%277%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%278%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%278%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%278%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%278%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%278%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%278%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%278%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%277%27%20y%3D%278%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%278%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%279%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%279%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%279%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%279%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%279%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%279%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%279%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%277%27%20y%3D%279%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%279%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%2710%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%2710%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%2710%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%2710%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%2710%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%2710%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%2710%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%2711%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%2711%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%2711%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%2711%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%2711%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%2711%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%2711%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%2712%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%2712%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%2712%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%2712%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%2712%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%2712%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%277%27%20y%3D%2712%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%2713%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%2713%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%2713%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23f2efff%27%2F%3E%3Crect%20x%3D%277%27%20y%3D%2713%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%2714%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%2714%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3C%2Fsvg%3E") 1 1, auto;
    }

    /* klikatelné prvky: stejná šipka, ale žlutá (akcentová barva) */
    a,
    button,
    summary,
    label,
    [role="button"],
    .level,
    .item,
    .press-start,
    .support,
    .brand {
        cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2718%27%20height%3D%2730%27%20viewBox%3D%270%200%209%2015%27%20shape-rendering%3D%27crispEdges%27%3E%3Crect%20x%3D%270%27%20y%3D%270%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%272%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%272%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%272%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%273%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%273%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%273%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%277%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%277%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%277%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%277%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%277%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%277%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%277%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%277%27%20y%3D%277%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%278%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%278%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%278%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%278%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%278%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%278%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%278%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%277%27%20y%3D%278%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%278%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%279%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%279%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%279%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%279%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%279%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%279%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%279%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%277%27%20y%3D%279%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%279%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%2710%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%2710%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%2710%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%2710%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%2710%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%2710%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%2710%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%2711%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%2711%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%2711%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%2711%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%2711%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%2711%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%2711%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%2712%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%2712%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%2712%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%2712%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%2712%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%2712%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%277%27%20y%3D%2712%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%2713%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%2713%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%2713%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23facc15%27%2F%3E%3Crect%20x%3D%277%27%20y%3D%2713%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%2714%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%2714%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%230c0920%27%2F%3E%3C%2Fsvg%3E") 1 1, pointer;
    }
}

/* Trail: žlutý pixel s tvrdým ink stínem, který se skokově (steps)
   zmenší a zmizí. Spawnuje ho script.js jen na desktopu a jen když
   uživatel nemá zapnutý prefers-reduced-motion. */
.cursor-trail {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    background: var(--yellow);
    box-shadow: 2px 2px 0 0 var(--ink);
    pointer-events: none;
    z-index: 9999;
    animation: trailFade 460ms steps(4, end) forwards;
}

@keyframes trailFade {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.2); }
}

/* ---------- Hlavička ---------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem clamp(1rem, 5vw, 4rem);
    background: rgba(20, 15, 46, 0.92);
    border-bottom: 3px solid var(--panel-line);
}

/* logo vlevo; podpora + menu se drží vpravo (auto mezera napravo od loga) */
.brand {
    margin-right: auto;
}

.brand {
    display: grid;
    place-items: center;
    width: 2.6rem;
    aspect-ratio: 1;
    border: 3px solid var(--ink);
    box-shadow: 3px 3px 0 0 var(--ink);
    background: var(--yellow);
    color: var(--ink);
    font-family: var(--pixel-font);
    font-size: 0.7rem;
    text-decoration: none;
    transition: transform 130ms steps(2, end), box-shadow 130ms steps(2, end);
}

.brand:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 0 var(--ink);
}

/* Podpoř mě – pixel tlačítko v menu, vlevo před „Start“ */
.support {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.75rem;
    border: 3px solid var(--ink);
    box-shadow: 3px 3px 0 0 var(--ink);
    background: var(--green);
    color: var(--ink);
    font-family: var(--pixel-font);
    font-size: 0.55rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 130ms steps(2, end), box-shadow 130ms steps(2, end);
}

.support:hover,
.support:focus-visible {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 0 var(--ink);
}

/* Pixel-art lektvar (box-shadow sprite, 8×11 pixelů) – obrys ink,
   růžová náplň, světlý odlesk. ::before je jeden „pixel" (1em),
   zbytek dokresluje box-shadow; rodič rezervuje plochu spritu. */
.support .potion {
    position: relative;
    display: inline-block;
    width: 8em;
    height: 11em;
    font-size: 1.7px;
    flex: none;
}

.support .potion::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1em;
    height: 1em;
    /* spread 0.5px = pixely se nepatrně překrývají → žádné seams (mezery),
       rohy zůstávají ostré (blur 0). Pořadí: ink (navrchu) → odlesk → náplň. */
    box-shadow:
        /* obrys + zátka (ink) */
        3em 0 0 0.5px var(--ink), 4em 0 0 0.5px var(--ink),
        3em 1em 0 0.5px var(--ink), 4em 1em 0 0.5px var(--ink),
        3em 2em 0 0.5px var(--ink), 4em 2em 0 0.5px var(--ink),
        2em 3em 0 0.5px var(--ink), 3em 3em 0 0.5px var(--ink), 4em 3em 0 0.5px var(--ink), 5em 3em 0 0.5px var(--ink),
        1em 4em 0 0.5px var(--ink), 6em 4em 0 0.5px var(--ink),
        0 5em 0 0.5px var(--ink), 7em 5em 0 0.5px var(--ink),
        0 6em 0 0.5px var(--ink), 7em 6em 0 0.5px var(--ink),
        0 7em 0 0.5px var(--ink), 7em 7em 0 0.5px var(--ink),
        0 8em 0 0.5px var(--ink), 7em 8em 0 0.5px var(--ink),
        1em 9em 0 0.5px var(--ink), 6em 9em 0 0.5px var(--ink),
        2em 10em 0 0.5px var(--ink), 3em 10em 0 0.5px var(--ink), 4em 10em 0 0.5px var(--ink), 5em 10em 0 0.5px var(--ink),
        /* odlesk (světlý) */
        1em 5em 0 0.5px var(--text), 1em 6em 0 0.5px var(--text),
        /* náplň (fialová) */
        2em 4em 0 0.5px var(--violet), 3em 4em 0 0.5px var(--violet), 4em 4em 0 0.5px var(--violet), 5em 4em 0 0.5px var(--violet),
        2em 5em 0 0.5px var(--violet), 3em 5em 0 0.5px var(--violet), 4em 5em 0 0.5px var(--violet), 5em 5em 0 0.5px var(--violet), 6em 5em 0 0.5px var(--violet),
        2em 6em 0 0.5px var(--violet), 3em 6em 0 0.5px var(--violet), 4em 6em 0 0.5px var(--violet), 5em 6em 0 0.5px var(--violet), 6em 6em 0 0.5px var(--violet),
        1em 7em 0 0.5px var(--violet), 2em 7em 0 0.5px var(--violet), 3em 7em 0 0.5px var(--violet), 4em 7em 0 0.5px var(--violet), 5em 7em 0 0.5px var(--violet), 6em 7em 0 0.5px var(--violet),
        1em 8em 0 0.5px var(--violet), 2em 8em 0 0.5px var(--violet), 3em 8em 0 0.5px var(--violet), 4em 8em 0 0.5px var(--violet), 5em 8em 0 0.5px var(--violet), 6em 8em 0 0.5px var(--violet),
        2em 9em 0 0.5px var(--violet), 3em 9em 0 0.5px var(--violet), 4em 9em 0 0.5px var(--violet), 5em 9em 0 0.5px var(--violet);
    animation: pixBob 1.7s step-end 0.4s infinite;
}

.site-header nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.site-header nav a {
    padding: 0.6rem 0.8rem;
    font-family: var(--pixel-font);
    font-size: 0.58rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--muted);
    transition: color 130ms steps(2, end), background 130ms steps(2, end);
}

.site-header nav a:hover,
.site-header nav a:focus-visible {
    color: var(--ink);
    background: var(--yellow);
}

/* ---------- Sekce ---------- */
.scene {
    max-width: 72rem;
    margin: 0 auto;
    padding: clamp(5rem, 12vh, 8rem) clamp(1.2rem, 5vw, 4rem);
}

/* Kotvy ze zafixovaného menu musí přistát pod hlavičkou, ne za ní –
   jinak je nadpis sekce (např. „Kontakt“) schovaný za fixed headerem. */
.scene[id] {
    scroll-margin-top: 6rem;
}

.hero {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    align-items: center;
    gap: clamp(2rem, 6vw, 6rem);
    padding-top: 7.5rem;
}

.hero-copy {
    display: flex;
    flex-direction: column;
}

/* ---------- Pixel-art scéna v hero ---------- */
.hero-scene {
    position: relative;
    width: 24em;
    height: 21em;
    font-size: clamp(9px, 1.5vw, 16px);
}

.hero-scene .sprite {
    position: absolute;
    width: 1em;
    height: 1em;
}

/* Space invader: 11×8 pixelů kreslených box-shadow, dvousnímková
   sprite animace (frame A/B) + skokové nadskakování */
.invader {
    left: 6em;
    top: 7em;
    color: var(--green);
    --frame-a:
        2em 0, 8em 0,
        3em 1em, 7em 1em,
        2em 2em, 3em 2em, 4em 2em, 5em 2em, 6em 2em, 7em 2em, 8em 2em,
        1em 3em, 2em 3em, 4em 3em, 5em 3em, 6em 3em, 8em 3em, 9em 3em,
        0 4em, 1em 4em, 2em 4em, 3em 4em, 4em 4em, 5em 4em, 6em 4em, 7em 4em, 8em 4em, 9em 4em, 10em 4em,
        0 5em, 2em 5em, 3em 5em, 4em 5em, 5em 5em, 6em 5em, 7em 5em, 8em 5em, 10em 5em,
        0 6em, 2em 6em, 8em 6em, 10em 6em,
        3em 7em, 4em 7em, 6em 7em, 7em 7em;
    --frame-b:
        2em 0, 8em 0,
        0 1em, 3em 1em, 7em 1em, 10em 1em,
        0 2em, 2em 2em, 3em 2em, 4em 2em, 5em 2em, 6em 2em, 7em 2em, 8em 2em, 10em 2em,
        0 3em, 1em 3em, 2em 3em, 4em 3em, 5em 3em, 6em 3em, 8em 3em, 9em 3em, 10em 3em,
        1em 4em, 2em 4em, 3em 4em, 4em 4em, 5em 4em, 6em 4em, 7em 4em, 8em 4em, 9em 4em,
        2em 5em, 3em 5em, 4em 5em, 5em 5em, 6em 5em, 7em 5em, 8em 5em,
        2em 6em, 8em 6em,
        1em 7em, 9em 7em;
    box-shadow: var(--frame-a);
    animation: invaderWalk 1s step-end infinite;
}

@keyframes invaderWalk {
    0%, 100% {
        box-shadow: var(--frame-a);
        transform: translateY(0);
    }
    50% {
        box-shadow: var(--frame-b);
        transform: translateY(-0.6em);
    }
}

.pix-heart {
    top: 1em;
    right: 1.5em;
    color: var(--pink);
    box-shadow:
        1em 0, 2em 0, 4em 0, 5em 0,
        0 1em, 1em 1em, 2em 1em, 3em 1em, 4em 1em, 5em 1em, 6em 1em,
        0 2em, 1em 2em, 2em 2em, 3em 2em, 4em 2em, 5em 2em, 6em 2em,
        1em 3em, 2em 3em, 3em 3em, 4em 3em, 5em 3em,
        2em 4em, 3em 4em, 4em 4em,
        3em 5em;
    animation: pixBob 1.8s step-end 0.3s infinite;
}

.pix-coin {
    left: 1.5em;
    bottom: 2em;
    color: var(--yellow);
    box-shadow:
        2em 0, 3em 0,
        1em 1em, 2em 1em, 3em 1em, 4em 1em,
        0 2em, 1em 2em, 2em 2em, 3em 2em, 4em 2em, 5em 2em,
        0 3em, 1em 3em, 2em 3em, 3em 3em, 4em 3em, 5em 3em,
        1em 4em, 2em 4em, 3em 4em, 4em 4em,
        2em 5em, 3em 5em;
    animation: pixBob 1.4s step-end 0.7s infinite;
}

@keyframes pixBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-0.7em); }
}

.dot {
    background: currentColor;
}

.dot-a { top: 4em; left: 1em; color: var(--blue); animation: dotBlink 1.3s step-end infinite; }
.dot-b { bottom: 5em; right: 1em; color: var(--violet); animation: dotBlink 1.7s step-end 0.4s infinite; }
.dot-c { top: 0; left: 13em; color: var(--text); animation: dotBlink 1.1s step-end 0.8s infinite; }

@keyframes dotBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.12; }
}

.hud {
    /* herní HUD přes celou šířku hero: životy vlevo, skóre vpravo */
    grid-column: 1 / -1;
    align-self: start;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 3px solid var(--panel-line);
    font-family: var(--pixel-font);
    font-size: 0.68rem;
}

.hud-lives {
    color: var(--pink);
    letter-spacing: 0.2em;
}

.hud-score {
    color: var(--muted);
}

.eyebrow {
    margin: 0 0 1.4rem;
    font-family: var(--pixel-font);
    font-size: clamp(0.55rem, 1.6vw, 0.72rem);
    line-height: 1.8;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--green);
}

h1 {
    margin: 0 0 1.6rem;
    font-family: var(--pixel-font);
    font-size: clamp(1.7rem, 7vw, 4rem);
    font-weight: 400;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--yellow);
    text-shadow:
        0.09em 0.09em 0 #7c2d92,
        0.18em 0.18em 0 var(--ink);
}

h1 span {
    display: block;
}

.lead {
    max-width: 54ch;
    margin: 0 0 2.8rem;
    font-size: clamp(0.95rem, 1.8vw, 1.1rem);
    line-height: 1.8;
    color: var(--muted);
}

.press-start {
    align-self: flex-start;
    padding: 1rem 1.4rem;
    border: 3px solid var(--ink);
    box-shadow: 5px 5px 0 0 var(--ink);
    background: var(--green);
    color: var(--ink);
    font-family: var(--pixel-font);
    font-size: 0.72rem;
    text-transform: uppercase;
    text-decoration: none;
    animation: pressBlink 1.2s step-end infinite;
    transition: transform 130ms steps(2, end), box-shadow 130ms steps(2, end);
}

.press-start:hover,
.press-start:focus-visible {
    animation: none;
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 0 var(--ink);
}

@keyframes pressBlink {
    50% { opacity: 0.35; }
}

.section-label {
    margin: 0 0 1rem;
    font-family: var(--pixel-font);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green);
}

.section-label::before {
    content: "▸ ";
    color: var(--yellow);
}

h2 {
    margin: 0 0 1.8rem;
    font-family: var(--pixel-font);
    font-size: clamp(1.15rem, 3.6vw, 1.9rem);
    font-weight: 400;
    line-height: 1.4;
    text-transform: uppercase;
    text-shadow: 0.12em 0.12em 0 var(--ink);
}

.section-intro {
    max-width: 56ch;
    margin: 0 0 2.8rem;
    line-height: 1.8;
    color: var(--muted);
}

/* ---------- O mně / Player stats ---------- */
.stats-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 1fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
}

.about-text {
    margin: 0;
    font-size: clamp(0.95rem, 1.6vw, 1.05rem);
    line-height: 1.85;
    color: var(--muted);
}

.about-text strong {
    font-family: var(--pixel-font);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--yellow);
}

.skills {
    display: grid;
    gap: 1.4rem;
    padding: 1.5rem 1.3rem;
    background: var(--panel);
    border: 3px solid var(--ink);
    box-shadow: var(--px-shadow) var(--px-shadow) 0 0 var(--ink);
    /* přilétající .skill řádky nesmí vyčnívat z rámečku */
    overflow: hidden;
}

.skill {
    display: grid;
    gap: 0.55rem;
}

.skill-name {
    font-family: var(--pixel-font);
    font-size: 0.56rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
}

.bar {
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 3px solid var(--panel-line);
    background: var(--ink);
}

.bar i {
    flex: 1;
    height: 0.85rem;
    background: var(--panel-line);
}

.bar .fill {
    background: var(--green);
    opacity: 0;
}

.is-visible .bar .fill {
    animation: xpFill 1ms step-end forwards;
    animation-delay: calc(var(--d, 0ms) + 350ms + var(--i) * 110ms);
}

@keyframes xpFill {
    to { opacity: 1; }
}

/* ---------- Projekty / Level select ---------- */
.levels {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: var(--tile-gap);
    /* tvrdý stín míří doprava dolů – padding mřížky vyrovnává optické mezery */
    padding-right: var(--px-shadow);
}

.level {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-height: 14rem;
    padding: 1.25rem 1.15rem 1.05rem;
    border: 3px solid var(--ink);
    box-shadow: var(--px-shadow) var(--px-shadow) 0 0 var(--ink);
    text-decoration: none;
    transition: transform 130ms steps(2, end), box-shadow 130ms steps(2, end);
}

a.level:hover,
a.level:focus-visible {
    transform: translate(-3px, -3px);
    box-shadow: var(--px-shadow-hover) var(--px-shadow-hover) 0 0 var(--ink);
}

.level-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.5rem;
}

.lvl {
    font-family: var(--pixel-font);
    font-size: 0.52rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.85;
}

.status {
    padding: 0.3rem 0.5rem;
    border: 2px solid currentColor;
    font-family: var(--pixel-font);
    font-size: 0.46rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.status.on { color: #14532d; background: rgba(255, 255, 255, 0.35); }
.status.wip { color: #713f12; background: rgba(255, 255, 255, 0.35); }
.status.soon { color: #312e81; background: rgba(255, 255, 255, 0.35); }
.status.locked { color: var(--muted); background: transparent; }

.level h3 {
    margin: 0;
    font-family: var(--pixel-font);
    font-size: clamp(0.82rem, 2vw, 0.98rem);
    font-weight: 400;
    line-height: 1.45;
    text-transform: uppercase;
}

.level-meta {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.75;
}

.level-desc {
    margin: 0.25rem 0 0;
    font-size: 0.86rem;
    line-height: 1.65;
    opacity: 0.9;
}

.level-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: auto;
    padding-top: 0.9rem;
}

.stars {
    font-size: 0.95rem;
    letter-spacing: 0.22em;
}

.play {
    font-family: var(--pixel-font);
    font-size: 0.52rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.lvl-yellow { background: var(--card-yellow); color: #221c04; }
.lvl-pink { background: var(--pink); color: #36091f; }
.lvl-blue { background: var(--blue); color: #06222e; }
.lvl-green { background: var(--green); color: #0a2413; }
.lvl-violet { background: var(--violet); color: #1f1438; }

.lvl-locked {
    background: var(--panel);
    color: var(--muted);
    border-style: dashed;
    border-color: var(--panel-line);
    box-shadow: var(--px-shadow) var(--px-shadow) 0 0 var(--ink);
}

/* ---------- Sociální sítě / Multiplayer ---------- */
.inventory {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: var(--tile-gap);
    padding-right: var(--px-shadow);
}

.item {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.1rem 1.05rem;
    background: var(--panel);
    border: 3px solid var(--ink);
    box-shadow: var(--px-shadow) var(--px-shadow) 0 0 var(--ink);
    text-decoration: none;
    transition: transform 130ms steps(2, end), box-shadow 130ms steps(2, end), background 130ms steps(2, end);
}

.item:hover,
.item:focus-visible {
    transform: translate(-3px, -3px);
    box-shadow: var(--px-shadow-hover) var(--px-shadow-hover) 0 0 var(--ink);
    background: var(--panel-line);
}

.item span {
    font-family: var(--pixel-font);
    font-size: 0.5rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--green);
}

.item strong {
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.item:hover span,
.item:focus-visible span {
    color: var(--yellow);
}

/* ---------- Patička ---------- */
footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 72rem;
    margin: 0 auto;
    padding: 2rem clamp(1.2rem, 5vw, 4rem) 2.6rem;
    border-top: 3px solid var(--panel-line);
    font-family: var(--pixel-font);
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.insert-coin i {
    font-style: normal;
    animation: pressBlink 1s step-end infinite;
}

/* ---------- Scroll animace (sprite steps) ---------- */
.fx {
    opacity: 0;
}

.fx.from-right { --sx: 130px; }
.fx:not(.from-right) { --sx: -130px; }

.is-visible .fx {
    animation: spriteIn 480ms steps(6, end) forwards;
    animation-delay: var(--d, 0ms);
}

/* Dlaždice v mřížkách se "spawnují" na místě (pop-in) – jakýkoli let
   zleva/shora by během animace rozbíjel zarovnání mřížky */
.is-visible .levels .fx,
.is-visible .inventory .fx {
    animation-name: tilePop;
    animation-duration: 240ms;
    animation-timing-function: steps(2, end);
}

/* Vstupní animace hýbou samostatnými vlastnostmi translate/scale (ne transform).
   Důvod: animace běží s fill: forwards, takže po doběhnutí trvale „vlastní"
   animovanou vlastnost. Kdyby to byl transform, přebila by hover transform
   na .level/.press-start/.item a hover by nefungoval. translate/scale se
   s transform skládají, takže si hover svůj transform řídí nezávisle. */
@keyframes spriteIn {
    from { opacity: 1; translate: var(--sx, -130px) 0; }
    to { opacity: 1; translate: 0 0; }
}

@keyframes tilePop {
    0% { opacity: 0; translate: 0 -10px; scale: 0.94; }
    55% { opacity: 1; translate: 0 -4px; scale: 0.97; }
    100% { opacity: 1; translate: 0 0; scale: 1; }
}

/* ---------- Responzivita ---------- */
@media (max-width: 880px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .hero {
        grid-template-columns: 1fr;
    }

    .hero-scene {
        justify-self: center;
        margin-top: 1.5rem;
    }
}

@media (max-width: 560px) {
    .site-header {
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 0.75rem;
    }

    /* logo + tlačítko podpory na prvním řádku (stejná výška),
       menu se zalomí na druhý řádek přes celou šířku */
    .brand {
        margin-right: 0;
    }

    .site-header nav {
        flex-basis: 100%;
    }

    /* Header je na mobilu dvouřádkový (logo + menu), takže vyšší. */
    .scene[id] {
        scroll-margin-top: 7.5rem;
    }

    .hero {
        padding-top: 9.5rem;
    }

    .hud {
        max-width: none;
    }

    h1 {
        font-size: clamp(1.5rem, 9.5vw, 2.2rem);
    }

    .levels,
    .inventory {
        grid-template-columns: 1fr;
    }

    .level {
        min-height: auto;
    }
}

/* ---------- Omezený pohyb ---------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .fx,
    .bar .fill {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .press-start,
    .insert-coin i,
    .invader,
    .pix-heart,
    .pix-coin,
    .dot,
    .support .potion::before {
        animation: none !important;
    }

    .brand,
    .support,
    .level,
    .item,
    .press-start {
        transition: none !important;
    }

    #bmc-wbtn::after {
        animation: none !important;
    }

    /* trail se sice při reduced-motion ani nespawnuje (viz script.js),
       ale pro jistotu ho schováme i v CSS */
    .cursor-trail {
        display: none !important;
    }
}

/* ---------- Buy Me a Coffee widget – ikona = pixel lektvar ----------
   Čistě kosmetická vrstva nad oficiálním widgetem: jen schová jejich
   ikonu kávy a nakreslí náš lektvar (stejný sprite jako „Send me a potion").
   Skript, formulář i posílání peněz běží nezávisle. Když BMC změní
   strukturu tlačítka (jiné id, nebo tlačítko v iframu), tahle pravidla
   se neuplatní a vrátí se jejich výchozí ikona – funkčnost zůstává. */
#bmc-wbtn {
    position: relative;
}

#bmc-wbtn img {
    /* schová kávu; pokud selektor selže, ikona se zobrazí zpět */
    display: none !important;
}

#bmc-wbtn::after {
    content: "";
    position: absolute;
    /* 1em = 3px → sprite 24×33 px; centrování přes margin,
       transform necháváme volný pro skokový bob */
    font-size: 3px;
    width: 1em;
    height: 1em;
    top: 50%;
    left: 50%;
    margin-top: -5.5em;
    margin-left: -4em;
    pointer-events: none;
    box-shadow:
        3em 0 0 0.5px var(--ink), 4em 0 0 0.5px var(--ink),
        3em 1em 0 0.5px var(--ink), 4em 1em 0 0.5px var(--ink),
        3em 2em 0 0.5px var(--ink), 4em 2em 0 0.5px var(--ink),
        2em 3em 0 0.5px var(--ink), 3em 3em 0 0.5px var(--ink), 4em 3em 0 0.5px var(--ink), 5em 3em 0 0.5px var(--ink),
        1em 4em 0 0.5px var(--ink), 6em 4em 0 0.5px var(--ink),
        0 5em 0 0.5px var(--ink), 7em 5em 0 0.5px var(--ink),
        0 6em 0 0.5px var(--ink), 7em 6em 0 0.5px var(--ink),
        0 7em 0 0.5px var(--ink), 7em 7em 0 0.5px var(--ink),
        0 8em 0 0.5px var(--ink), 7em 8em 0 0.5px var(--ink),
        1em 9em 0 0.5px var(--ink), 6em 9em 0 0.5px var(--ink),
        2em 10em 0 0.5px var(--ink), 3em 10em 0 0.5px var(--ink), 4em 10em 0 0.5px var(--ink), 5em 10em 0 0.5px var(--ink),
        1em 5em 0 0.5px var(--text), 1em 6em 0 0.5px var(--text),
        2em 4em 0 0.5px var(--violet), 3em 4em 0 0.5px var(--violet), 4em 4em 0 0.5px var(--violet), 5em 4em 0 0.5px var(--violet),
        2em 5em 0 0.5px var(--violet), 3em 5em 0 0.5px var(--violet), 4em 5em 0 0.5px var(--violet), 5em 5em 0 0.5px var(--violet), 6em 5em 0 0.5px var(--violet),
        2em 6em 0 0.5px var(--violet), 3em 6em 0 0.5px var(--violet), 4em 6em 0 0.5px var(--violet), 5em 6em 0 0.5px var(--violet), 6em 6em 0 0.5px var(--violet),
        1em 7em 0 0.5px var(--violet), 2em 7em 0 0.5px var(--violet), 3em 7em 0 0.5px var(--violet), 4em 7em 0 0.5px var(--violet), 5em 7em 0 0.5px var(--violet), 6em 7em 0 0.5px var(--violet),
        1em 8em 0 0.5px var(--violet), 2em 8em 0 0.5px var(--violet), 3em 8em 0 0.5px var(--violet), 4em 8em 0 0.5px var(--violet), 5em 8em 0 0.5px var(--violet), 6em 8em 0 0.5px var(--violet),
        2em 9em 0 0.5px var(--violet), 3em 9em 0 0.5px var(--violet), 4em 9em 0 0.5px var(--violet), 5em 9em 0 0.5px var(--violet);
    animation: pixBob 1.7s step-end 0.4s infinite;
}