/* =====================================================================
   hruska.army – společný základ obou vzhledů (hub = stream, Cobblemon = pixely)
   Barvy a písma si definuje každé téma v :root (hub.css, cobblemon.css).
   ===================================================================== */

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

html { scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--bg);
    color: var(--ink);
    font: 400 1rem/1.6 var(--font-body);
    font-synthesis: none;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
strong { color: var(--ink); font-weight: 700; }
::selection { background: var(--pear); color: var(--pear-ink); }

:focus-visible { outline: 3px solid var(--focus, var(--pear)); outline-offset: 4px; }

.skip-link {
    position: absolute; left: 12px; top: -60px; z-index: 100;
    padding: 12px 18px; background: var(--pear); color: var(--pear-ink); font-weight: 700;
}
.skip-link:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
main { overflow-x: clip; }

.px-icon { width: 100%; height: 100%; image-rendering: pixelated; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* do spuštění JS schovat úvodní obsah (animace ho ukáže), pojistka v <head> po 4 s */
.js .hero__copy, .js .s-hero__copy, .js .scroll-hint { visibility: hidden; }
.is-wiping body::after { content: ''; position: fixed; inset: 0; z-index: 94; background: var(--wipe, #1c1835); }

/* ---------- Hruška v rohu: mechanika (vzhled bubliny má každé téma) ----- */

.buddy {
    position: fixed; z-index: 60;
    right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom));
    display: flex; align-items: flex-end; gap: 12px; pointer-events: none;
}
.buddy > * { pointer-events: auto; }
.buddy__bubble { position: relative; width: min(340px, calc(100vw - 132px)); margin-bottom: 34px; transform-origin: 100% 100%; }
.buddy__name { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.buddy__close { display: grid; place-items: center; width: 44px; height: 44px; margin: -14px -16px -12px 0; padding: 15px; border: 0; background: none; color: inherit; cursor: pointer; }
.buddy__close svg { width: 14px; height: 14px; }
.buddy__text { margin-top: 4px; min-height: 2.7em; }
.buddy__body { position: relative; width: 80px; height: 72px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.buddy__body:active { cursor: grabbing; }
.buddy__sprite {
    position: absolute; inset: 0; transform-origin: 50% 100%;
    background: url("../img/hruska-avatar.png") 0 0 / 400% 100% no-repeat;
    image-rendering: pixelated;
    filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .35));
}
.buddy__sprite[data-frame="1"] { background-position: 33.333% 0; }
.buddy__sprite[data-frame="2"] { background-position: 66.667% 0; }
.buddy__sprite[data-frame="3"] { background-position: 100% 0; }
.buddy__shadow { position: absolute; left: 18%; right: 18%; bottom: -6px; height: 8px; background: rgba(0, 0, 0, .5); border-radius: 50%; filter: blur(2px); }
.buddy.is-quiet .buddy__bubble { display: none; }

@media (max-width: 599px) {
    .buddy__body { width: 60px; height: 54px; }
    .buddy__bubble { margin-bottom: 26px; }
}

/* ---------- částice ------------------------------------------------------ */

.spark { position: fixed; z-index: 70; width: 8px; height: 8px; pointer-events: none; }

/* ---------- keyframes a omezení pohybu --------------------------------- */

@keyframes blink { 50% { opacity: 0; } }
@keyframes ping {
    0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .7); }
    100% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}