/*
 * Feelip — spoločný vizuálny základ pre hráčsky frontend aj admin.
 * Tmavý, prémiový, dobrodružný štýl: teplá hnedá + vínová/burgundy.
 * Mobile-first.
 *
 * Textúra/gradienty sú zámerne odvodené len z existujúcich farebných
 * premenných nižšie (žiadne nové "cudzie" odtiene) — cieľom je pridať
 * hĺbku a život, nie zmeniť paletu.
 */

:root {
    --feelip-bg: #17110d;
    --feelip-bg-elevated: #241a14;
    --feelip-surface: #2c1f18;
    --feelip-surface-2: #362619;
    --feelip-border: #4a352a;

    --feelip-text: #f3e9df;
    --feelip-text-muted: #b8a695;

    --feelip-accent: #8a2f3b;       /* burgundy/vínová */
    --feelip-accent-hover: #a5394a;
    --feelip-accent-light: #b8465a;
    --feelip-accent-text: #fbeceb;

    --feelip-warm: #b06a35;         /* teplá hnedá */
    --feelip-warm-light: #d0904f;
    --feelip-success: #4f7c47;
    --feelip-error: #c4453f;
    --feelip-info: #3f6f8a;

    --feelip-radius: 14px;
    --feelip-radius-sm: 8px;
    --feelip-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Jemná zrnitá textúra (SVG šum) — používa sa ako opakovaná vrstva
       na pozadí tela stránky, veľmi nízka priehľadnosť. */
    --feelip-grain: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz4KPGZpbHRlciBpZD0nbic+PGZlVHVyYnVsZW5jZSB0eXBlPSdmcmFjdGFsTm9pc2UnIGJhc2VGcmVxdWVuY3k9JzAuODUnIG51bU9jdGF2ZXM9JzInIHN0aXRjaFRpbGVzPSdzdGl0Y2gnLz48ZmVDb2xvck1hdHJpeCB0eXBlPSdzYXR1cmF0ZScgdmFsdWVzPScwJy8+PC9maWx0ZXI+CjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPgo8L3N2Zz4K");
}

* {
    box-sizing: border-box;
}

/* Atribút `hidden` musí vždy vyhrať, aj keď má prvok inde nastavené
   vlastné `display` (napr. .modal-overlay { display: flex }) — inak
   sa prvok zobrazí vždy, bez ohľadu na hidden. Toto bol reálny bug:
   obe modálne okná nápovedy boli viditeľné hneď po načítaní stránky. */
[hidden] {
    display: none !important;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    color: var(--feelip-text);
    font-family: var(--feelip-font);
    line-height: 1.5;
    min-height: 100vh;
    -webkit-text-size-adjust: 100%;

    /* Vrstvy odspodu nahor: základná farba -> jemná vinetáž (svetlejšia
       hore, tmavšia dole) -> teplý odlesk hore -> jemné zrno navrchu. */
    background-color: var(--feelip-bg);
    background-image:
        var(--feelip-grain),
        radial-gradient(ellipse 900px 500px at 50% -5%, rgba(176, 106, 53, 0.10), transparent 60%),
        radial-gradient(ellipse 900px 600px at 50% 115%, rgba(138, 47, 59, 0.14), transparent 60%);
    background-repeat: repeat, no-repeat, no-repeat;
    background-attachment: fixed, fixed, fixed;
}

h1, h2, h3 {
    font-weight: 700;
    letter-spacing: 0.02em;
}

a {
    color: var(--feelip-warm);
}

/* Spoločný "prémiový" text efekt pre FEELIP wordmark. */
.feelip-logo,
.landing-hero__logo,
.admin-login__logo,
.admin-header__logo {
    background: linear-gradient(180deg, var(--feelip-warm-light) 0%, var(--feelip-warm) 65%, var(--feelip-accent) 130%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 1px 18px rgba(176, 106, 53, 0.25);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 20px;
    margin-top: 20px;
    border-radius: var(--feelip-radius-sm);
    border: none;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    min-height: 48px; /* dostatočne veľký dotykový cieľ */
    box-sizing: border-box;
}

.btn--primary {
    background: linear-gradient(180deg, var(--feelip-accent-hover) 0%, var(--feelip-accent) 100%);
    color: var(--feelip-accent-text);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.btn--primary:hover,
.btn--primary:focus-visible {
    background: linear-gradient(180deg, var(--feelip-accent-light) 0%, var(--feelip-accent-hover) 100%);
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.btn--primary:active {
    transform: translateY(1px);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3);
}

.btn--primary:disabled {
    background: var(--feelip-border);
    color: var(--feelip-text-muted);
    box-shadow: none;
    cursor: not-allowed;
}

.card {
    background:
        linear-gradient(165deg, var(--feelip-surface-2) 0%, var(--feelip-surface) 55%, var(--feelip-bg-elevated) 100%);
    border: 1px solid var(--feelip-border);
    border-radius: var(--feelip-radius);
    padding: 24px;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

input[type="text"],
input[type="password"],
input[type="email"] {
    width: 100%;
    padding: 12px 14px;
    background: linear-gradient(180deg, var(--feelip-bg) 0%, var(--feelip-bg-elevated) 100%);
    border: 1px solid var(--feelip-border);
    border-radius: var(--feelip-radius-sm);
    color: var(--feelip-text);
    font-size: 1rem;
    min-height: 48px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.28);
}

select {
    width: 100%;
    padding: 12px 14px;
    background: linear-gradient(180deg, var(--feelip-bg) 0%, var(--feelip-bg-elevated) 100%);
    border: 1px solid var(--feelip-border);
    border-radius: var(--feelip-radius-sm);
    color: var(--feelip-text);
    font-size: 1rem;
    font-family: inherit;
    min-height: 48px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.28);
}

input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--feelip-warm);
    outline-offset: 2px;
}

label {
    display: block;
    margin: 16px 0 6px;
    font-size: 0.9rem;
    color: var(--feelip-text-muted);
}

.alert {
    padding: 12px 16px;
    border-radius: var(--feelip-radius-sm);
    margin: 0 0 16px;
    font-size: 0.9rem;
}

.alert--error {
    background: linear-gradient(180deg, rgba(196, 69, 63, 0.18), rgba(196, 69, 63, 0.10));
    border: 1px solid var(--feelip-error);
    color: #ffd9d6;
}

.alert--info {
    background: linear-gradient(180deg, rgba(63, 111, 138, 0.18), rgba(63, 111, 138, 0.10));
    border: 1px solid var(--feelip-info);
    color: #d6ecf7;
}