:root {
    --ember-gold: #D4AF37;
}

/* ============================================
   SHARED — all pages
   ============================================ */

/* Material Symbols Icon Font */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #131313;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #27272A;
}

/* ============================================
   PAGE 1 — Osobní údaje
   ============================================ */

.glow-border:focus-within {
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
    border-color: var(--ember-gold) !important;
}

.ember-glow-btn:hover {
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
}

/* ============================================
   PAGE 2 — Výběr výpravy
   ============================================ */

.glow-ember:hover {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
    border-color: var(--ember-gold);
}

.custom-radio:checked + label {
    border-color: var(--ember-gold);
    background-color: #1c1b1b;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

.custom-radio:checked + label .selection-overlay {
    opacity: 1;
}

.custom-radio:checked + label .select-button {
    background-color: var(--ember-gold);
    color: #0D0D0D;
}

/* Ambient Fog Animation — scoped to page 2 body */
@keyframes fogMove {
    0%   { opacity: 0.06; }
    50%  { opacity: 0.12; }
    100% { opacity: 0.06; }
}

body.page-expedition::after {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 50% 40%, rgba(212, 175, 55, 0.07) 0%, transparent 65%);
    animation: fogMove 20s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
    will-change: opacity;
}

/* ============================================
   PAGE 3 — Výběr postavy
   ============================================ */

.character-card input:checked + div {
    border-color: var(--ember-gold);
    background-color: #18181B;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

.character-card input:checked + div .selection-indicator {
    background-color: var(--ember-gold);
}

.magical-glow {
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.1);
}

.miniature-crop {
    object-fit: cover;
    object-position: center 20%;
}

/* ============================================
   SHOWCASE PAGE — Výpravy
   ============================================ */

.showcase-modal-panel {
    transition: opacity 0.28s ease, transform 0.28s ease;
}

/* ============================================
   VIDEO BACKGROUND — all pages
   ============================================ */

body.has-video-bg {
    background-color: transparent;
}