/* Tajuplný knižní vzhled webu GameBookAI — sjednotný s MAUI appkou i administrací. */
:root {
    --bg:        #140F0A;
    --bg-mid:    #241A12;
    --bg-edge:   #0C0907;
    --gold:      #C9A24B;
    --gold-br:   #E4C36A;
    --parch:     #E8DCC3;
    --parch-dim: #B7A382;
    --card:      #241B12;
    --card-press:#33271A;
    --border:    #5A4327;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
    color: var(--parch);
    background: radial-gradient(ellipse 120% 85% at 50% 20%,
        var(--bg-mid) 0%, var(--bg) 55%, var(--bg-edge) 100%) fixed;
}

.page {
    max-width: 760px;
    margin: 0 auto;
    padding: 28px 22px 48px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1 {
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    color: var(--gold-br);
    letter-spacing: 0.08em;
    font-size: clamp(2rem, 7vw, 2.8rem);
    text-align: center;
    margin: 0.2rem 0 0.4rem;
    text-shadow: 0 2px 18px rgba(201, 162, 75, 0.25);
}

.ornament { text-align: center; color: var(--gold); font-size: 1.4rem; margin-bottom: 0.2rem; }

.subtitle {
    font-family: 'EB Garamond', serif;
    font-style: italic;
    text-align: center;
    color: var(--parch-dim);
    font-size: 1.15rem;
    margin: 0.2rem 0;
}
.subtitle.dim { font-size: 1.05rem; margin-top: 1.2rem; }

.rule {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border), transparent);
    max-width: 280px;
    margin: 1.4rem auto 0.4rem;
}

/* --- Karty příběhů --- */
#stories { display: flex; flex-direction: column; gap: 14px; margin-top: 1rem; }

.story-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.story-card:hover { border-color: var(--gold); background: var(--card-press); }
.story-card:active { transform: scale(0.99); }
.story-card .title {
    font-family: 'Cinzel', Georgia, serif;
    color: var(--gold-br);
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}
.story-card .best { font-style: italic; color: var(--parch-dim); font-size: 0.98rem; }

/* --- Tlačítka --- */
.btn {
    font-family: 'EB Garamond', serif;
    font-size: 1.05rem;
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    border: 1.5px solid var(--border);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn:disabled { opacity: 0.5; cursor: default; }

.btn-choice { background: var(--card); color: var(--parch); width: 100%; }
.btn-choice:hover:not(:disabled) { background: var(--card-press); color: var(--gold-br); border-color: var(--gold); }

.btn-outline { background: transparent; color: var(--gold); width: 100%; }
.btn-outline:hover:not(:disabled) { background: var(--card); border-color: var(--gold); }

.btn-gold {
    background: var(--gold); color: #221a10; border-color: var(--gold);
    font-family: 'Cinzel', serif; font-weight: 500; width: 100%;
}
.btn-gold:hover:not(:disabled) { background: var(--gold-br); border-color: var(--gold-br); }

.error-panel { text-align: center; margin-top: 1.4rem; }
.error-panel .btn { display: inline-block; width: auto; padding: 10px 22px; margin-top: 0.6rem; }

/* --- Herní obrazovka --- */
#game-screen { flex: 1; display: flex; flex-direction: column; position: relative; }

.back-link {
    background: none; border: none; color: var(--gold); font-family: 'Cinzel', serif;
    font-size: 0.95rem; cursor: pointer; padding: 0 0 0.8rem; align-self: flex-start; letter-spacing: 0.04em;
}

.story-text {
    flex: 1;
    font-size: 1.22rem;
    line-height: 1.6;
    color: var(--parch);
    white-space: pre-wrap;
    margin-bottom: 1.4rem;
}

.choices, .end { display: flex; flex-direction: column; gap: 14px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.card { background: var(--card); border: 1.5px solid var(--border); border-radius: 12px; padding: 18px; }
.record-panel { display: flex; flex-direction: column; gap: 12px; }
.record-label { color: var(--gold-br); font-size: 1.1rem; text-align: center; margin: 0; white-space: pre-wrap; }
.name-entry {
    font-family: 'EB Garamond', serif; font-size: 1.1rem; text-align: center;
    background: var(--bg-edge); color: var(--parch); border: 1.5px solid var(--border);
    border-radius: 8px; padding: 12px;
}
.name-entry::placeholder { color: var(--parch-dim); }
.name-entry:focus { outline: none; border-color: var(--gold); }

/* --- Načítání --- */
.spinner {
    width: 44px; height: 44px; margin: 1.5rem auto;
    border: 4px solid rgba(201, 162, 75, 0.25);
    border-top-color: var(--gold); border-radius: 50%;
    animation: spin 0.9s linear infinite;
}
.loading-overlay {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(12, 9, 7, 0.55); border-radius: 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Obrazovka hesla --- */
.gate-title { font-size: clamp(1.6rem, 5vw, 2.2rem); }
.pw-card { max-width: 420px; margin: 1.6rem auto 0; display: flex; flex-direction: column; gap: 12px; }
.pw-error { color: #e7a07a; text-align: center; margin: 0; font-style: italic; }

.foot { text-align: center; color: var(--parch-dim); font-size: 0.85rem; margin-top: 2rem; font-style: italic; }

[hidden] { display: none !important; }