/* ==========================================================================
   RENAISSANCE PRAHA 2026 — PREMIUM DESIGN SYSTEM V2
   Aesthetics: Imperial Renaissance · Gold Leaf · Alchemy · Starlight
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    --clr-void: #050608;
    --clr-midnight: #08090d;
    --clr-velvet: #0d0f18;
    --clr-velvet-light: #151825;
    --clr-surface: #1a1d2e;

    --clr-gold: #d4af37;
    --clr-gold-bright: #ffe680;
    --clr-gold-pale: #fff5d6;
    --clr-gold-dark: #a07d1c;
    --clr-gold-shadow: #5c4308;
    --grad-gold: linear-gradient(135deg, #fff5d6 0%, #ffe680 25%, #d4af37 50%, #a07d1c 75%, #7a5c10 100%);
    --grad-gold-text: linear-gradient(180deg, #fff8e7 0%, #ffe680 35%, #d4af37 70%, #a07d1c 100%);
    --grad-gold-shine: linear-gradient(135deg, #ffffff 0%, #ffe680 40%, #d4af37 100%);

    --clr-crimson: #8c1d2f;
    --clr-crimson-dark: #5c0f1c;
    --clr-crimson-light: #c4354f;
    --grad-crimson: linear-gradient(135deg, #d44060 0%, #a02040 40%, #6b0f1f 100%);

    --clr-parchment: #fdf8ed;
    --clr-parchment-mid: #f0e4c8;
    --clr-parchment-dark: #ddd0a8;
    --clr-parchment-border: #c9b88a;
    --clr-ink: #2b1f13;
    --clr-ink-light: #5e4a36;
    --grad-parchment: radial-gradient(ellipse at 50% 30%, #fefbf3 0%, #f8f0da 50%, #eedcb0 100%);

    --font-display: 'Cinzel Decorative', Georgia, serif;
    --font-heading: 'Cinzel', Georgia, serif;
    --font-elegant: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'EB Garamond', Georgia, serif;

    --glow-gold: 0 0 20px rgba(212,175,55,0.5), 0 0 60px rgba(212,175,55,0.15);
    --glow-gold-intense: 0 0 15px rgba(255,230,128,0.8), 0 0 40px rgba(212,175,55,0.5), 0 0 80px rgba(212,175,55,0.2);
    --glow-crimson: 0 0 20px rgba(140,29,47,0.5), 0 0 50px rgba(140,29,47,0.15);
}

/* ══════════════════════════════════════════════════════════════════════════
   2. GLOBAL RESET
   ══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    font-size: 16px;
    background: var(--clr-void);
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    color: #d8dce6;
    background: var(--clr-void);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    line-height: 1.65;
    letter-spacing: 0.015em;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: rgba(212,175,55,0.3);
    color: #ffe680;
}

/* ══════════════════════════════════════════════════════════════════════════
   3. ATMOSPHERIC BACKGROUNDS
   ══════════════════════════════════════════════════════════════════════════ */
.bg-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

/* Dense multi-layered starfield */
.stars-layer {
    z-index: -5;
    opacity: 0.6;
    background-image:
        radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1.5px 1.5px at 25% 60%, rgba(255,230,128,0.8), transparent),
        radial-gradient(1px 1px at 35% 5%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 50% 35%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 65% 80%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1.5px 1.5px at 80% 20%, rgba(255,230,128,0.7), transparent),
        radial-gradient(1px 1px at 90% 55%, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 15% 85%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 45% 95%, rgba(255,230,128,0.5), transparent),
        radial-gradient(1.5px 1.5px at 70% 45%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 5% 50%, rgba(212,175,55,0.6), transparent),
        radial-gradient(2.5px 2.5px at 55% 10%, rgba(255,255,255,0.9), transparent);
    background-size: 300px 400px, 500px 350px, 400px 500px, 350px 300px, 
                     450px 500px, 300px 450px, 500px 300px, 250px 350px,
                     400px 300px, 350px 450px, 500px 400px, 280px 380px;
    animation: starfield-drift 180s linear infinite;
}

@keyframes starfield-drift {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100px); }
}

/* Cosmic nebula gradient overlays */
.nebula-layer {
    z-index: -4;
    background:
        radial-gradient(ellipse 70% 50% at 15% 20%, rgba(140,29,47,0.12) 0%, transparent 70%),
        radial-gradient(ellipse 60% 60% at 80% 75%, rgba(212,175,55,0.08) 0%, transparent 60%),
        radial-gradient(ellipse 80% 40% at 50% 50%, rgba(30,30,80,0.15) 0%, transparent 70%),
        radial-gradient(ellipse 50% 70% at 85% 15%, rgba(90,50,120,0.08) 0%, transparent 60%);
    animation: nebula-pulse 25s ease-in-out infinite alternate;
}

@keyframes nebula-pulse {
    0% { opacity: 0.7; }
    50% { opacity: 1; }
    100% { opacity: 0.8; }
}

/* Dark vignette border */
.vignette-layer {
    z-index: -3;
    background: radial-gradient(ellipse 65% 60% at 50% 50%, transparent 0%, rgba(5,6,8,0.6) 80%, rgba(5,6,8,0.95) 100%);
}

/* Particle canvas layer */
.particles-layer {
    z-index: -2;
    opacity: 0.7;
}

/* ══════════════════════════════════════════════════════════════════════════
   4. FLOATING GOLD DUST MOTES
   ══════════════════════════════════════════════════════════════════════════ */
.floating-motes {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.mote {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,230,128,0.9) 0%, rgba(212,175,55,0.4) 50%, transparent 70%);
    animation: mote-float linear infinite;
    opacity: 0;
}

.mote-1  { width: 4px; height: 4px; left: 8%;   animation-duration: 18s; animation-delay: 0s;  }
.mote-2  { width: 3px; height: 3px; left: 15%;  animation-duration: 22s; animation-delay: -3s; }
.mote-3  { width: 5px; height: 5px; left: 25%;  animation-duration: 16s; animation-delay: -7s; }
.mote-4  { width: 3px; height: 3px; left: 35%;  animation-duration: 24s; animation-delay: -2s; }
.mote-5  { width: 4px; height: 4px; left: 45%;  animation-duration: 19s; animation-delay: -10s; }
.mote-6  { width: 6px; height: 6px; left: 55%;  animation-duration: 15s; animation-delay: -5s; }
.mote-7  { width: 3px; height: 3px; left: 65%;  animation-duration: 21s; animation-delay: -8s; }
.mote-8  { width: 4px; height: 4px; left: 72%;  animation-duration: 17s; animation-delay: -1s; }
.mote-9  { width: 5px; height: 5px; left: 80%;  animation-duration: 20s; animation-delay: -12s; }
.mote-10 { width: 3px; height: 3px; left: 88%;  animation-duration: 23s; animation-delay: -6s; }
.mote-11 { width: 4px; height: 4px; left: 50%;  animation-duration: 25s; animation-delay: -15s; }
.mote-12 { width: 3px; height: 3px; left: 20%;  animation-duration: 14s; animation-delay: -9s; }

@keyframes mote-float {
    0%   { transform: translateY(110vh) translateX(0) scale(0); opacity: 0; }
    10%  { opacity: 0.8; transform: translateY(90vh) translateX(10px) scale(1); }
    50%  { opacity: 0.5; transform: translateY(50vh) translateX(-15px) scale(0.8); }
    90%  { opacity: 0.7; transform: translateY(10vh) translateX(20px) scale(0.6); }
    100% { transform: translateY(-5vh) translateX(5px) scale(0); opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   5. MAIN LAYOUT
   ══════════════════════════════════════════════════════════════════════════ */
.main-container {
    width: 100%;
    max-width: 1000px;
    padding: 4rem 2rem 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5rem;
    position: relative;
    z-index: 1;
}

.gold-text {
    background: var(--grad-gold-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ══════════════════════════════════════════════════════════════════════════
   6. ROYAL CREST EMBLEM (CSS-only ornamental element replacing hero image)
   ══════════════════════════════════════════════════════════════════════════ */
.royal-crest {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Radiating golden rays behind crest */
.crest-rays {
    position: absolute;
    inset: -40px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg, rgba(212,175,55,0.06) 5deg, transparent 10deg,
        transparent 20deg, rgba(212,175,55,0.04) 25deg, transparent 30deg,
        transparent 40deg, rgba(212,175,55,0.06) 45deg, transparent 50deg,
        transparent 60deg, rgba(212,175,55,0.04) 65deg, transparent 70deg,
        transparent 80deg, rgba(212,175,55,0.06) 85deg, transparent 90deg,
        transparent 100deg, rgba(212,175,55,0.04) 105deg, transparent 110deg,
        transparent 120deg, rgba(212,175,55,0.06) 125deg, transparent 130deg,
        transparent 140deg, rgba(212,175,55,0.04) 145deg, transparent 150deg,
        transparent 160deg, rgba(212,175,55,0.06) 165deg, transparent 170deg,
        transparent 180deg, rgba(212,175,55,0.04) 185deg, transparent 190deg,
        transparent 200deg, rgba(212,175,55,0.06) 205deg, transparent 210deg,
        transparent 220deg, rgba(212,175,55,0.04) 225deg, transparent 230deg,
        transparent 240deg, rgba(212,175,55,0.06) 245deg, transparent 250deg,
        transparent 260deg, rgba(212,175,55,0.04) 265deg, transparent 270deg,
        transparent 280deg, rgba(212,175,55,0.06) 285deg, transparent 290deg,
        transparent 300deg, rgba(212,175,55,0.04) 305deg, transparent 310deg,
        transparent 320deg, rgba(212,175,55,0.06) 325deg, transparent 330deg,
        transparent 340deg, rgba(212,175,55,0.04) 345deg, transparent 360deg
    );
    animation: rays-spin 90s linear infinite;
    z-index: -1;
}

@keyframes rays-spin { to { transform: rotate(360deg); } }

.crest-outer-ring {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 3px solid var(--clr-gold);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: var(--glow-gold), inset 0 0 20px rgba(212,175,55,0.1);
    animation: crest-breathe 6s ease-in-out infinite;
}

@keyframes crest-breathe {
    0%, 100% { box-shadow: var(--glow-gold), inset 0 0 20px rgba(212,175,55,0.1); }
    50% { box-shadow: var(--glow-gold-intense), inset 0 0 30px rgba(212,175,55,0.2); }
}

/* Zodiac symbols ring */
.crest-zodiac-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rot-counter 60s linear infinite;
}

.zodiac-mark {
    position: absolute;
    font-size: 0.9rem;
    color: var(--clr-gold);
    opacity: 0.6;
    text-shadow: 0 0 6px rgba(212,175,55,0.5);
    top: 50%;
    left: 50%;
    transform-origin: 0 0;
    transform: rotate(calc(var(--i) * 30deg)) translateY(-82px) translateX(-50%) rotate(calc(var(--i) * -30deg + 60deg * var(--rot-dir, 1)));
}

@keyframes rot-counter { to { transform: rotate(-360deg); } }

.crest-inner-ring {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 2px solid rgba(212,175,55,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, rgba(15,17,26,0.95) 0%, rgba(8,9,13,0.98) 100%);
    box-shadow: inset 0 0 30px rgba(0,0,0,0.8);
}

.crest-shield {
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--clr-gold);
    border-radius: 4px 4px 50% 50%;
    background: linear-gradient(180deg, rgba(140,29,47,0.4) 0%, rgba(92,15,28,0.6) 100%);
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5), 0 0 10px rgba(212,175,55,0.2);
}

.shield-lion {
    font-size: 2rem;
    color: var(--clr-gold-bright);
    text-shadow: 0 0 10px rgba(255,230,128,0.6);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}

/* ══════════════════════════════════════════════════════════════════════════
   7. SITE HEADER
   ══════════════════════════════════════════════════════════════════════════ */
.site-header {
    text-align: center;
    max-width: 850px;
    animation: header-emerge 2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes header-emerge {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

.header-pretitle {
    font-family: var(--font-elegant);
    font-size: 1.1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: var(--clr-gold);
    text-shadow: 0 0 15px rgba(212,175,55,0.4);
    display: block;
    margin-bottom: 0.75rem;
}

.site-title {
    font-family: var(--font-display);
    font-weight: 900;
    line-height: 1.05;
    margin-bottom: 1.5rem;
}

.title-line {
    display: block;
    background: var(--grad-gold-shine);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.9));
}

.title-line:first-child {
    font-size: 2.8rem;
    letter-spacing: 0.12em;
}

.title-line.title-accent {
    font-size: 5.5rem;
    letter-spacing: 0.06em;
    background: var(--grad-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    animation: title-shimmer 4s ease-in-out infinite;
}

@keyframes title-shimmer {
    0%, 100% { filter: drop-shadow(0 4px 12px rgba(0,0,0,0.9)) brightness(1); }
    50% { filter: drop-shadow(0 4px 20px rgba(212,175,55,0.4)) brightness(1.15); }
}

/* ── Ornament Divider ── */
.ornament-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem auto 2rem;
    width: 100%;
    max-width: 500px;
}

.ornament-wing {
    flex: 1;
    height: 1px;
    position: relative;
}

.ornament-wing.left {
    background: linear-gradient(to right, transparent 0%, var(--clr-gold) 100%);
}
.ornament-wing.right {
    background: linear-gradient(to left, transparent 0%, var(--clr-gold) 100%);
}

.wing-curl {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid var(--clr-gold);
    border-radius: 50%;
    top: -6px;
}

.ornament-wing.left .wing-curl { left: 0; border-right: none; border-bottom: none; }
.ornament-wing.right .wing-curl { right: 0; border-left: none; border-top: none; }

.ornament-diamond {
    width: 6px;
    height: 6px;
    background: var(--clr-gold);
    transform: rotate(45deg);
    box-shadow: 0 0 6px rgba(212,175,55,0.6);
}

.ornament-center {
    font-size: 1.4rem;
    color: var(--clr-gold-bright);
    text-shadow: var(--glow-gold);
    animation: ornament-pulse 3s ease-in-out infinite;
    margin: 0 0.25rem;
}

@keyframes ornament-pulse {
    0%, 100% { opacity: 0.7; text-shadow: 0 0 10px rgba(212,175,55,0.3); }
    50% { opacity: 1; text-shadow: 0 0 25px rgba(255,230,128,0.6); }
}

.site-subtitle {
    font-family: var(--font-elegant);
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1.7;
    color: #a0aec0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.site-subtitle em {
    color: var(--clr-gold);
    font-style: normal;
    font-weight: 600;
    text-shadow: 0 0 12px rgba(212,175,55,0.3);
}

/* ── Alchemy Symbols Bar ── */
.alchemy-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
    opacity: 0.6;
    transition: opacity 0.4s ease;
}

.alchemy-bar:hover { opacity: 1; }

.alch-sym {
    font-size: 1.5rem;
    color: var(--clr-gold);
    text-shadow: 0 0 8px rgba(212,175,55,0.3);
    cursor: default;
    transition: transform 0.3s ease, text-shadow 0.3s ease;
}

.alch-sym:hover {
    transform: scale(1.3) translateY(-3px);
    text-shadow: 0 0 15px rgba(255,230,128,0.8);
}

.alch-dot {
    width: 3px;
    height: 3px;
    background: var(--clr-gold-dark);
    border-radius: 50%;
}

/* ══════════════════════════════════════════════════════════════════════════
   8. ASTRONOMICAL COUNTDOWN (ASTROLABE)
   ══════════════════════════════════════════════════════════════════════════ */
.countdown-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    text-align: center;
    letter-spacing: 0.15em;
    color: var(--clr-gold);
    text-shadow: 0 0 20px rgba(212,175,55,0.3);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.section-title-ornament {
    font-size: 1rem;
    opacity: 0.5;
    animation: ornament-pulse 3s ease-in-out infinite;
}

.astrolabe-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Outer ethereal glow ring around astrolabe */
.astrolabe-aura {
    position: absolute;
    width: 530px;
    height: 530px;
    border-radius: 50%;
    border: 1px solid rgba(212,175,55,0.08);
    box-shadow: 
        0 0 60px rgba(212,175,55,0.06),
        inset 0 0 60px rgba(212,175,55,0.03);
    animation: aura-breathe 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes aura-breathe {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.05); opacity: 0.9; }
}

.astrolabe-clock {
    width: 460px;
    height: 460px;
    border-radius: 50%;
    border: 4px solid var(--clr-gold);
    background: radial-gradient(circle, rgba(20,23,38,0.95) 0%, rgba(8,9,13,0.98) 70%);
    box-shadow:
        0 0 0 1px rgba(212,175,55,0.3),
        0 0 0 6px rgba(8,9,13,0.9),
        0 0 0 7px rgba(212,175,55,0.15),
        0 30px 60px rgba(0,0,0,0.9),
        var(--glow-gold),
        inset 0 0 80px rgba(0,0,0,0.9);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

/* Tick marks around outer ring */
.astrolabe-ticks {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.tick {
    position: absolute;
    width: 2px;
    height: 12px;
    background: var(--clr-gold);
    opacity: 0.4;
    top: 8px;
    left: 50%;
    transform-origin: 0 calc(230px - 8px);
    transform: translateX(-50%) rotate(calc(var(--t) * 15deg));
}

.tick.major {
    height: 18px;
    width: 3px;
    opacity: 0.7;
    background: var(--clr-gold-bright);
    box-shadow: 0 0 4px rgba(212,175,55,0.5);
}

.astrolabe-inner-dial {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.dial-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.ring-outer {
    width: 88%;
    height: 88%;
    border: 2px solid rgba(212,175,55,0.12);
    border-top-color: rgba(212,175,55,0.5);
    border-bottom-color: rgba(212,175,55,0.5);
    animation: rot-cw 50s linear infinite;
}

.ring-middle {
    width: 76%;
    height: 76%;
    border: 1px dashed rgba(212,175,55,0.2);
    border-left-color: rgba(255,230,128,0.5);
    border-right-color: rgba(255,230,128,0.5);
    animation: rot-ccw 35s linear infinite;
}

.ring-inner {
    width: 64%;
    height: 64%;
    border: 1px dotted rgba(212,175,55,0.15);
    animation: rot-cw 22s linear infinite;
}

/* Decorative pointer hand */
.astrolabe-hand {
    position: absolute;
    width: 2px;
    height: 42%;
    bottom: 50%;
    left: calc(50% - 1px);
    background: linear-gradient(to top, var(--clr-gold) 0%, var(--clr-gold-bright) 80%, transparent 100%);
    transform-origin: bottom center;
    animation: hand-sweep 60s linear infinite;
    opacity: 0.5;
    z-index: 3;
}

.astrolabe-hand::after {
    content: '';
    position: absolute;
    top: 0;
    left: -3px;
    width: 8px;
    height: 8px;
    background: var(--clr-gold-bright);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255,230,128,0.8);
}

@keyframes hand-sweep { to { transform: rotate(360deg); } }
@keyframes rot-cw { to { transform: rotate(360deg); } }
@keyframes rot-ccw { to { transform: rotate(-360deg); } }

/* ── Countdown Cards ── */
.countdown-grid {
    position: absolute;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 260px;
    height: 260px;
    justify-content: center;
    align-content: center;
}

.countdown-card {
    background: rgba(8,9,13,0.9);
    border: 1.5px solid rgba(212,175,55,0.5);
    border-radius: 6px;
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow:
        0 8px 25px rgba(0,0,0,0.7),
        inset 0 0 15px rgba(212,175,55,0.08);
    backdrop-filter: blur(12px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: default;
    overflow: hidden;
}

.countdown-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(212,175,55,0.05) 0%, transparent 50%);
    pointer-events: none;
}

.countdown-card:hover {
    transform: scale(1.1) translateY(-5px);
    border-color: var(--clr-gold-bright);
    box-shadow:
        0 15px 35px rgba(0,0,0,0.8),
        0 0 25px rgba(212,175,55,0.3),
        inset 0 0 20px rgba(255,230,128,0.1);
}

/* Ornamental corner dots on countdown cards */
.card-corner {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--clr-gold);
    border-radius: 50%;
    opacity: 0.5;
}
.card-corner.tl { top: 4px; left: 4px; }
.card-corner.tr { top: 4px; right: 4px; }
.card-corner.bl { bottom: 4px; left: 4px; }
.card-corner.br { bottom: 4px; right: 4px; }

.countdown-value {
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
    background: var(--grad-gold-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 8px rgba(212,175,55,0.4));
}

.countdown-label {
    font-family: var(--font-elegant);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #7a8599;
    margin-top: 6px;
    font-weight: 600;
}

.countdown-target-desc {
    font-family: var(--font-elegant);
    font-size: 1.3rem;
    text-align: center;
    color: #7a8599;
    max-width: 600px;
}

/* ══════════════════════════════════════════════════════════════════════════
   9. PARCHMENT SCROLL WAITLIST
   ══════════════════════════════════════════════════════════════════════════ */
.waitlist-section {
    width: 100%;
    display: flex;
    justify-content: center;
}

.parchment-scroll-container {
    width: 100%;
    max-width: 620px;
    position: relative;
    filter: drop-shadow(0 25px 40px rgba(0,0,0,0.8));
}

.scroll-wood {
    display: flex;
    align-items: center;
    width: 108%;
    margin-left: -4%;
    position: relative;
    z-index: 10;
}

.wood-shaft {
    flex-grow: 1;
    height: 20px;
    background: linear-gradient(to bottom, #5a3a12 0%, #7a5220 20%, #6b4518 50%, #3d2208 80%, #2a1605 100%);
    border-radius: 5px;
    border: 1px solid #1a0d02;
    box-shadow: 0 4px 10px rgba(0,0,0,0.6), inset 0 2px 3px rgba(255,255,255,0.08);
}

.wood-knob {
    width: 28px;
    height: 28px;
    background: radial-gradient(circle at 35% 35%, #ffe680 0%, #d4af37 30%, #8a6914 70%, #3d2208 100%);
    border: 1.5px solid rgba(90,60,10,0.8);
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(0,0,0,0.6), inset 0 1px 2px rgba(255,255,255,0.3);
}

.scroll-wood-top { margin-bottom: -16px; }
.scroll-wood-bottom { margin-top: -16px; }

.parchment-scroll {
    background: var(--grad-parchment);
    border-left: 2px solid var(--clr-parchment-border);
    border-right: 2px solid var(--clr-parchment-border);
    padding: 3.5rem 2.5rem;
    position: relative;
    z-index: 5;
    overflow: hidden;
    box-shadow:
        inset 15px 0 30px rgba(132,108,62,0.12),
        inset -15px 0 30px rgba(132,108,62,0.12),
        inset 0 25px 50px rgba(43,31,19,0.06),
        inset 0 -25px 50px rgba(43,31,19,0.06);
}

/* Corner filigree decorations */
.filigree {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(180,150,90,0.3);
    pointer-events: none;
    z-index: 6;
}

.filigree-tl { top: 12px; left: 12px; border-right: none; border-bottom: none; border-radius: 6px 0 0 0; }
.filigree-tr { top: 12px; right: 12px; border-left: none; border-bottom: none; border-radius: 0 6px 0 0; }
.filigree-bl { bottom: 12px; left: 12px; border-right: none; border-top: none; border-radius: 0 0 0 6px; }
.filigree-br { bottom: 12px; right: 12px; border-left: none; border-top: none; border-radius: 0 0 6px 0; }

.filigree::before {
    content: '✦';
    position: absolute;
    font-size: 0.6rem;
    color: rgba(180,150,90,0.5);
}

.filigree-tl::before { top: -2px; left: -2px; }
.filigree-tr::before { top: -2px; right: -2px; }
.filigree-bl::before { bottom: -2px; left: -2px; }
.filigree-br::before { bottom: -2px; right: -2px; }

.parchment-scroll::before,
.parchment-scroll::after {
    content: '';
    position: absolute;
    top: 0;
    width: 8px;
    height: 100%;
    z-index: 6;
    pointer-events: none;
}

.parchment-scroll::before {
    left: 0;
    background: linear-gradient(to right, rgba(43,31,19,0.1), transparent);
}

.parchment-scroll::after {
    right: 0;
    background: linear-gradient(to left, rgba(43,31,19,0.1), transparent);
}

.parchment-content-wrapper {
    position: relative;
    z-index: 2;
    color: var(--clr-ink);
}

.scroll-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    color: var(--clr-ink);
    margin-bottom: 1.25rem;
    text-shadow: 0 1px 1px rgba(255,255,255,0.6);
    border-bottom: 2px dashed rgba(94,74,54,0.2);
    padding-bottom: 14px;
}

.scroll-title-icon {
    font-size: 1.2rem;
    margin-right: 0.5rem;
}

.scroll-intro {
    font-family: var(--font-body);
    font-size: 1.2rem;
    line-height: 1.65;
    text-align: center;
    color: var(--clr-ink-light);
    margin-bottom: 2.5rem;
    font-style: italic;
}

/* ══════════════════════════════════════════════════════════════════════════
   10. FORM ELEMENTS
   ══════════════════════════════════════════════════════════════════════════ */
.guild-form {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    transition: opacity 0.5s ease;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
}

.form-label {
    font-family: var(--font-elegant);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--clr-ink);
    letter-spacing: 0.03em;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 15px;
    width: 20px;
    height: 20px;
    color: var(--clr-ink-light);
    opacity: 0.5;
    transition: all 0.3s ease;
    pointer-events: none;
}

.input-wrapper input {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1.2rem;
    padding: 14px 15px 14px 48px;
    background: rgba(255,255,255,0.5);
    border: 1.5px solid var(--clr-parchment-border);
    border-radius: 4px;
    color: var(--clr-ink);
    box-shadow: inset 0 2px 6px rgba(43,31,19,0.05);
    transition: all 0.3s ease;
}

.input-wrapper input:focus {
    outline: none;
    border-color: var(--clr-gold-dark);
    background: rgba(255,255,255,0.85);
    box-shadow:
        0 0 0 3px rgba(212,175,55,0.12),
        inset 0 2px 4px rgba(43,31,19,0.06);
}

.input-wrapper:focus-within .input-icon {
    color: var(--clr-gold-dark);
    transform: scale(1.15) rotate(-5deg);
    opacity: 1;
}

.input-wrapper input::placeholder {
    color: rgba(94,74,54,0.35);
    font-style: italic;
}

.form-group.invalid input {
    border-color: #c93b3b;
    background: rgba(201,59,59,0.03);
}

.error-msg {
    color: #a81c1c;
    font-size: 0.92rem;
    font-weight: 600;
    margin-top: 2px;
    display: none;
    font-family: var(--font-elegant);
}

.form-group.invalid .error-msg {
    display: block;
    animation: shake-error 0.4s ease-out;
}

@keyframes shake-error {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

/* ══════════════════════════════════════════════════════════════════════════
   11. SUBMIT BUTTON
   ══════════════════════════════════════════════════════════════════════════ */
.guild-submit-btn {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #fff;
    background: var(--grad-crimson);
    border: 2px solid var(--clr-gold);
    border-radius: 4px;
    padding: 16px 20px;
    cursor: pointer;
    box-shadow:
        0 8px 25px rgba(140,29,47,0.4),
        0 0 0 1px rgba(92,67,8,0.3),
        inset 0 1px 0 rgba(255,255,255,0.2);
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-top: 0.75rem;
}

.guild-submit-btn:hover {
    transform: translateY(-3px);
    border-color: var(--clr-gold-bright);
    box-shadow:
        0 12px 30px rgba(140,29,47,0.5),
        0 0 20px rgba(255,230,128,0.2),
        inset 0 1px 0 rgba(255,255,255,0.3);
}

.guild-submit-btn:active {
    transform: translateY(1px);
    box-shadow:
        0 4px 10px rgba(140,29,47,0.4),
        inset 0 2px 5px rgba(0,0,0,0.4);
}

.btn-shine {
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 20%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.05) 80%, transparent 100%);
    transform: skewX(-20deg);
    pointer-events: none;
    animation: btn-shine-sweep 5s infinite linear;
}

@keyframes btn-shine-sweep {
    0% { left: -120%; }
    20% { left: 150%; }
    100% { left: 150%; }
}

.mini-btn { padding: 10px 18px; font-size: 1rem; width: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   12. SUCCESS SCREEN & WAX SEAL
   ══════════════════════════════════════════════════════════════════════════ */
.success-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 0;
    animation: fade-in 0.6s ease-out;
}

.success-screen.hidden, .guild-form.hidden { display: none !important; }

.wax-seal-wrapper {
    perspective: 800px;
    margin-bottom: 2rem;
    width: 140px;
    height: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wax-seal-stamped {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #d43050 0%, #a01830 50%, #600a18 100%);
    box-shadow:
        0 12px 25px rgba(0,0,0,0.5),
        inset 0 -5px 10px rgba(0,0,0,0.4),
        inset 0 5px 10px rgba(255,255,255,0.2);
    border: 3px solid #6b0c19;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.4));
}

.wax-seal-stamped::before {
    content: '';
    position: absolute;
    width: 106%;
    height: 103%;
    border-radius: 46% 54% 50% 50% / 45% 45% 55% 55%;
    border: 2px solid rgba(96,10,24,0.6);
    top: -2%;
    left: -3%;
}

.seal-inner {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px dashed rgba(255,255,255,0.15);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    color: #ffb8c4;
    text-shadow: 0 -1.5px 0.5px rgba(0,0,0,0.7), 0 1.5px 0.5px rgba(255,255,255,0.15);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.4);
    background: rgba(0,0,0,0.08);
}

.seal-crest { font-size: 2rem; line-height: 1; }
.seal-crest-sub { font-size: 1rem; line-height: 1; letter-spacing: 0.1em; }

.animate-stamp {
    animation: stamp-drop 0.6s cubic-bezier(0.25, 1.25, 0.5, 1) forwards;
}

@keyframes stamp-drop {
    0% { transform: translateZ(500px) scale(3) rotate(-35deg); opacity: 0; }
    75% { transform: translateZ(0) scale(0.96) rotate(3deg); opacity: 1; }
    85% { transform: scale(1.04) rotate(-1deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.success-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--clr-ink);
    margin-bottom: 0.75rem;
}

.success-msg {
    font-family: var(--font-body);
    font-size: 1.15rem;
    color: var(--clr-ink-light);
    line-height: 1.55;
    margin-bottom: 2rem;
    max-width: 420px;
}

.registered-highlight {
    font-family: var(--font-heading);
    color: var(--clr-crimson-dark);
    font-size: 1.2rem;
    border-bottom: 1px dotted var(--clr-crimson-dark);
}

.guild-reset-btn {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--clr-ink);
    background: transparent;
    border: 1.5px solid rgba(94,74,54,0.35);
    border-radius: 4px;
    padding: 10px 22px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.guild-reset-btn:hover {
    color: #fff;
    background: var(--clr-ink);
    border-color: var(--clr-ink);
}

.danger-btn { color: #c93b3b; border-color: rgba(201,59,59,0.25); }
.danger-btn:hover { background: #c93b3b; border-color: #c93b3b; color: #fff; }

/* ══════════════════════════════════════════════════════════════════════════
   13. FOOTER
   ══════════════════════════════════════════════════════════════════════════ */
.site-footer {
    width: 100%;
    margin-top: 1rem;
    padding-top: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.footer-divider {
    margin-bottom: 1.5rem;
}

.footer-copy {
    font-family: var(--font-elegant);
    font-size: 1.05rem;
    letter-spacing: 0.12em;
    color: #4a5568;
}

.footer-hint {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: #3d4756;
    font-style: italic;
}

.admin-seal-btn {
    position: absolute;
    right: 0;
    bottom: -10px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffe680 0%, #d4af37 40%, #8a6914 80%, #3d2208 100%);
    border: 2.5px solid var(--clr-gold-bright);
    box-shadow:
        0 5px 15px rgba(0,0,0,0.7),
        0 0 12px rgba(212,175,55,0.3),
        inset 0 2px 4px rgba(255,255,255,0.35);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.admin-seal-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    font-family: var(--font-display);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.8);
}

.admin-seal-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; }
.admin-seal-symbol { font-size: 0.7rem; margin-top: 1px; opacity: 0.8; }

.admin-seal-btn:hover {
    transform: scale(1.2) rotate(15deg);
    box-shadow:
        0 8px 25px rgba(0,0,0,0.8),
        0 0 25px rgba(255,230,128,0.6),
        inset 0 2px 4px rgba(255,255,255,0.5);
}

/* ══════════════════════════════════════════════════════════════════════════
   14. LEDGER MODAL
   ══════════════════════════════════════════════════════════════════════════ */
.ledger-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
}

.ledger-modal.hidden { display: none !important; }

.ledger-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5,6,8,0.88);
    backdrop-filter: blur(10px);
    z-index: 1;
}

.ledger-modal-content {
    background: var(--grad-parchment);
    border: 3px solid var(--clr-gold);
    border-radius: 4px;
    padding: 3rem 2.5rem;
    width: 100%;
    max-width: 780px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    z-index: 2;
    box-shadow:
        0 35px 80px rgba(0,0,0,0.9),
        0 0 50px rgba(212,175,55,0.15),
        inset 0 0 40px rgba(43,31,19,0.1);
    color: var(--clr-ink);
}

.animate-modal-open {
    animation: modal-unfurl 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modal-unfurl {
    0% { opacity: 0; transform: scale(0.9) translateY(25px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.ledger-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2.5rem;
    cursor: pointer;
    color: var(--clr-ink-light);
    line-height: 1;
    transition: all 0.3s ease;
}

.ledger-close-btn:hover {
    color: var(--clr-crimson);
    transform: scale(1.1) rotate(90deg);
}

.ledger-title {
    font-family: var(--font-heading);
    font-size: 1.9rem;
    text-align: center;
    border-bottom: 2px dashed rgba(94,74,54,0.2);
    padding-bottom: 10px;
    margin-bottom: 0.5rem;
}

.ledger-subtitle {
    font-family: var(--font-body);
    font-size: 1.1rem;
    text-align: center;
    font-style: italic;
    color: var(--clr-ink-light);
    margin-bottom: 2rem;
}

.ledger-table-container {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--clr-parchment-border);
    border-radius: 4px;
    background: rgba(255,255,255,0.25);
    margin-bottom: 2rem;
}

.ledger-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 1.1rem;
}

.ledger-table th {
    font-family: var(--font-elegant);
    font-weight: 700;
    font-size: 1.05rem;
    background: var(--clr-parchment-dark);
    color: var(--clr-ink);
    padding: 12px 15px;
    border-bottom: 2px solid var(--clr-parchment-border);
    letter-spacing: 0.05em;
    text-align: left;
}

.ledger-table td {
    padding: 10px 15px;
    border-bottom: 1px solid rgba(201,184,138,0.35);
    color: var(--clr-ink-light);
}

.ledger-table tr:hover td {
    background: rgba(255,255,255,0.45);
    color: var(--clr-ink);
}

.ledger-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--clr-ink-light);
    font-style: italic;
    font-size: 1.15rem;
}

.ledger-empty.hidden { display: none !important; }

.empty-icon { width: 45px; height: 45px; opacity: 0.4; }

.ledger-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    border-top: 1.5px solid rgba(94,74,54,0.12);
    padding-top: 1.5rem;
}

/* Custom scrollbar */
.ledger-modal-content::-webkit-scrollbar { width: 8px; }
.ledger-modal-content::-webkit-scrollbar-track { background: var(--clr-parchment-dark); border-radius: 4px; }
.ledger-modal-content::-webkit-scrollbar-thumb { background: var(--clr-parchment-border); border-radius: 4px; }
.ledger-modal-content::-webkit-scrollbar-thumb:hover { background: var(--clr-gold-dark); }

/* ══════════════════════════════════════════════════════════════════════════
   15. RESPONSIVENESS
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    html { font-size: 15px; }

    .main-container { padding: 2.5rem 1.25rem; gap: 3.5rem; }

    .title-line:first-child { font-size: 2rem; }
    .title-line.title-accent { font-size: 3.8rem; }

    .royal-crest { width: 150px; height: 150px; margin-bottom: 1.5rem; }
    .crest-outer-ring { width: 140px; height: 140px; }
    .crest-inner-ring { width: 85px; height: 85px; }
    .crest-shield { width: 55px; height: 55px; }
    .shield-lion { font-size: 1.6rem; }
    .zodiac-mark { font-size: 0.7rem; transform: rotate(calc(var(--i) * 30deg)) translateY(-62px) translateX(-50%); }

    .astrolabe-clock { width: 340px; height: 340px; }
    .astrolabe-aura { width: 400px; height: 400px; }
    .countdown-grid { width: 200px; height: 200px; gap: 14px; }
    .countdown-value { font-size: 1.9rem; }
    .countdown-label { font-size: 0.75rem; margin-top: 4px; }
    .tick { height: 8px; transform-origin: 0 calc(170px - 6px); }

    .parchment-scroll { padding: 2.5rem 1.5rem; }
    .scroll-title { font-size: 1.7rem; }
    .scroll-intro { font-size: 1.1rem; }
    .input-wrapper input { font-size: 1.1rem; padding: 12px 12px 12px 42px; }
    .input-icon { left: 12px; width: 18px; height: 18px; }
    .guild-submit-btn { font-size: 1.1rem; padding: 14px 15px; }

    .ledger-modal-content { padding: 2rem 1.5rem; }
    .ledger-title { font-size: 1.5rem; }
    .ledger-actions { flex-direction: column; gap: 1rem; }
    .ledger-actions button { width: 100%; }

    .alchemy-bar { gap: 0.5rem; }
    .alch-sym { font-size: 1.3rem; }
}

@media (max-width: 480px) {
    html { font-size: 14px; }

    .title-line:first-child { font-size: 1.6rem; letter-spacing: 0.08em; }
    .title-line.title-accent { font-size: 3rem; }

    .royal-crest { width: 120px; height: 120px; margin-bottom: 1rem; }
    .crest-outer-ring { width: 110px; height: 110px; }
    .crest-inner-ring { width: 65px; height: 65px; }
    .crest-shield { width: 42px; height: 42px; }
    .shield-lion { font-size: 1.3rem; }
    .zodiac-mark { font-size: 0.6rem; transform: rotate(calc(var(--i) * 30deg)) translateY(-48px) translateX(-50%); }

    .astrolabe-clock { width: 280px; height: 280px; border-width: 3px; }
    .astrolabe-aura { width: 330px; height: 330px; }
    .countdown-grid { width: 168px; height: 168px; gap: 10px; }
    .countdown-card { padding: 10px 6px; }
    .countdown-value { font-size: 1.5rem; }
    .countdown-label { font-size: 0.7rem; }
    .tick { height: 6px; transform-origin: 0 calc(140px - 5px); }

    .scroll-wood { width: 105%; margin-left: -2.5%; }
    .wood-knob { width: 20px; height: 20px; }
    .wood-shaft { height: 14px; }
    .scroll-wood-top { margin-bottom: -12px; }
    .scroll-wood-bottom { margin-top: -12px; }

    .admin-seal-btn { right: 5px; width: 48px; height: 48px; }
    .admin-seal-label { font-size: 0.5rem; }

    .section-title { font-size: 1.5rem; letter-spacing: 0.08em; }
    .alchemy-bar { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════════════════════
   16. KEYFRAME HELPERS
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes fade-in {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}