/* ¤¤¤ ============================================================ ¤¤¤
   ¤¤¤ ========================   PÍSMA   ========================= ¤¤¤
   ¤¤¤ ============================================================ ¤¤¤ */

@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('cinzel.woff2') format('woff2');
}

@font-face {
    font-family: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('hanken.woff2') format('woff2');
}

/* ¤¤¤ ============================================================ ¤¤¤
   ¤¤¤ ========================   BARVY   ========================= ¤¤¤
   ¤¤¤ ============================================================ ¤¤¤ */
/* ¤¤¤ Stejné role v obou vzhledech: plocha, text, tlumený text, zlato, chyba. Plocha hry je černá vždy. ¤¤¤ */

:root {
    --plocha: #060912;
    --plocha-zare: rgba(63, 123, 255, .16);
    --text: #c6cfe6;
    --tlumeny: #8b96b3;
    --nazev-1: #f6e2a8;
    --nazev-2: #e6c884;
    --nazev-3: #b48f3f;
    --linka: rgba(230, 200, 132, .32);
    --chyba: #ff8a94;
    --chyba-plocha: rgba(255, 138, 148, .08);
    --zlato-1: #f6e2a8;
    --zlato-2: #e6c884;
    --zlato-3: #b48f3f;
    --na-zlate: #1b1508;
    --tlacitko-okraj: #f6e2a8;
    --zlato-zare: rgba(246, 226, 168, .75);
    --hra: #000;
    --hra-text: #8b96b3;
    --vyska-ovladani: 46px;
    color-scheme: dark;
}

@media (prefers-color-scheme: light) {
    :root {
        --plocha: #efe8d6;
        --plocha-zare: rgba(180, 143, 63, .18);
        --text: #2a2f45;
        --tlumeny: #5b6178;
        --nazev-1: #8a6a24;
        --nazev-2: #a07b2c;
        --nazev-3: #6e5219;
        --linka: rgba(110, 82, 25, .3);
        --chyba: #a3202e;
        --chyba-plocha: rgba(163, 32, 46, .07);
        --zlato-zare: rgba(160, 123, 44, .55);
        --tlacitko-okraj: #8a6a24;
        color-scheme: light;
    }
}

/* ¤¤¤ ============================================================ ¤¤¤
   ¤¤¤ =======================   STRÁNKA   ======================== ¤¤¤
   ¤¤¤ ============================================================ ¤¤¤ */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    overflow: hidden;
    color: var(--text);
    background: radial-gradient(60% 50% at 50% 38%, var(--plocha-zare), transparent 70%), var(--plocha);
    font: 17px/1.55 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

.uvod {
    display: grid;
    min-height: 100%;
    place-content: center;
    justify-items: center;
    gap: 14px;
    padding: 32px 20px;
    text-align: center;
}

.znak { display: block; width: 112px; height: 112px; }

.nazev {
    margin: 0;
    background: linear-gradient(180deg, var(--nazev-1), var(--nazev-2) 55%, var(--nazev-3));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font: 700 clamp(2.4rem, 7vw, 3.6rem)/1.05 'Cinzel', Georgia, serif;
    letter-spacing: .24em;
    text-transform: uppercase;
    padding-left: .24em;
}

.text { max-width: 30rem; margin: 0; min-height: 3.1em; }

.poznamka { max-width: 30rem; margin: 0; color: var(--tlumeny); font-size: .9rem; }

.chyba {
    max-width: 32rem;
    margin: 0;
    padding: 14px 18px;
    border: 1px solid var(--linka);
    border-left: 3px solid var(--chyba);
    background: var(--chyba-plocha);
    text-align: left;
}

/* ¤¤¤ ============================================================ ¤¤¤
   ¤¤¤ =======================   TLAČÍTKO   ======================= ¤¤¤
   ¤¤¤ ============================================================ ¤¤¤ */

.tlacitko {
    display: inline-flex;
    min-width: 220px;
    height: var(--vyska-ovladani);
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    padding: 0 28px;
    border: 1px solid var(--tlacitko-okraj);
    border-radius: 6px;
    color: var(--na-zlate);
    background: linear-gradient(180deg, var(--zlato-1), var(--zlato-2) 55%, var(--zlato-3));
    box-shadow: 0 10px 30px -12px var(--zlato-zare);
    font: 700 1.05rem/1 'Cinzel', Georgia, serif;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: box-shadow .2s ease, filter .2s ease;
}

.tlacitko:hover:not(:disabled) {
    filter: brightness(1.08);
    box-shadow: 0 0 0 2px var(--zlato-3), 0 0 34px -4px var(--zlato-zare);
}

.tlacitko:focus-visible { outline: 2px solid var(--nazev-2); outline-offset: 3px; }

.tlacitko:disabled { opacity: .5; cursor: default; }

/* ¤¤¤ ============================================================ ¤¤¤
   ¤¤¤ =========================   HRA   ========================== ¤¤¤
   ¤¤¤ ============================================================ ¤¤¤ */
/* ¤¤¤ Plátno drží 16:9 a vyplní okno, myš přepočítává klient podle skutečné velikosti. ¤¤¤ */

.hra {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--hra);
}

.hra canvas {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    width: min(100vw, calc(100vh * 16 / 9));
    height: min(100vh, calc(100vw * 9 / 16));
    background: transparent;
}

.hra.okno canvas { width: 100vw; height: 100vh; }

.nacitani {
    grid-area: 1 / 1;
    margin: 0;
    color: var(--hra-text);
    font: 600 1.1rem/1.6 'Cinzel', Georgia, serif;
    letter-spacing: .08em;
    text-align: center;
}

.nacitani span { font: 400 .9rem/1.6 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: 0; }

.pad {
    position: fixed;
    inset: 0;
    z-index: 2;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 10px;
    padding: 20px;
    background: rgba(0, 0, 0, .78);
    color: #c6cfe6;
    text-align: center;
}

.pad-text { margin: 0; }