/* =========================================================================
   THEME — CELERFIDUS
   Aesthetic: Sophisticated Calm. Matte charcoal, deep slate, spotlight gold,
   glowing security telemetry, clean typography.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* ── SURFACES ────────────────────────────────────────────────────────
       Matte charcoal / midnight blue */
    --bg-base:        #0f1217;
    --bg-surface:     #151921;
    --bg-elevated:    #1c222c;
    --bg-deep:        #0a0c10;

    /* ── TYPE ────────────────────────────────────────────────────────────
       Bone white - clean, non-glare readability */
    --text-primary:   #f0ece1;
    --text-mute:      rgba(240, 236, 225, 0.70);
    --text-faint:     rgba(240, 236, 225, 0.40);

    /* ── ACCENTS ─────────────────────────────────────────────────────────
       Spotlight gold for secure activation, deep cyan for safe state. */
    --accent:         #dfb15b;   /* spotlight gold */
    --accent-glow:    rgba(223, 177, 91, 0.35);
    --accent-teal:    #49a596;   /* clean room green/teal */
    --accent-warm:    #c89243;
    --border:         rgba(240, 236, 225, 0.08);
    --border-strong:  rgba(240, 236, 225, 0.20);

    /* ── TYPE STACK ───────────────────────────────────────────────────── */
    --font-heading:   'Cinzel', 'Georgia', serif;
    --font-label:     'JetBrains Mono', monospace;
    --font-body:      'Inter', system-ui, sans-serif;

    /* Legacy variables expected by shared pages */
    --paper:          var(--bg-base);
    --ink:            var(--text-primary);
    --rule:           var(--border-strong);
    --gold:           var(--accent);
    --gold-bright:    var(--accent);
    --gold-dim:       rgba(223, 177, 91, 0.15);
    --gold-glow:      rgba(223, 177, 91, 0.30);
    --gold-border:    var(--border-strong);
    --violet:         var(--accent);
    --violet-dim:     rgba(223, 177, 91, 0.10);
    --violet-hi:      #f5dfb8;
    --violet-glow:    rgba(223, 177, 91, 0.25);
    --violet-edge:    rgba(223, 177, 91, 0.45);
    --border-hi:      var(--border-strong);
    --serif:          var(--font-heading);
    --mono:           var(--font-label);
}

body {
    background: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-body);
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    letter-spacing: -0.01em;
}

/* ── HUD Telemetry ─────────────────────────────────────────── */
.cf-hud {
    position: fixed;
    top: 24px;
    right: 32px;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 1000;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.cf-bucket-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(21, 25, 33, 0.85);
    border: 1px solid var(--border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 2px;
}
.cf-bucket-label {
    color: var(--text-mute);
}
.cf-halo {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2.5px solid var(--text-faint);
    position: relative;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 0 transparent;
}
.cf-halo::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px dashed rgba(240, 236, 225, 0.1);
    opacity: 0.5;
}
.cf-halo.active {
    border-color: var(--accent);
    box-shadow: 0 0 16px var(--accent-glow), inset 0 0 12px var(--accent-glow);
    animation: cf-halo-pulse 2s infinite alternate;
}
.cf-halo.active::before {
    border-color: rgba(223, 177, 91, 0.3);
    animation: cf-rotate 20s linear infinite;
}

@keyframes cf-halo-pulse {
    0% { transform: scale(1); box-shadow: 0 0 10px var(--accent-glow), inset 0 0 8px var(--accent-glow); }
    100% { transform: scale(1.08); box-shadow: 0 0 24px rgba(223, 177, 91, 0.55), inset 0 0 16px rgba(223, 177, 91, 0.45); }
}

@keyframes cf-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── Doors ─────────────────────────────────────────────────── */
.cf-doors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1120px;
    width: 100%;
    margin: 40px auto;
}

.cf-door-card {
    height: 480px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s;
    background-color: var(--bg-surface);
}
.cf-door-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent);
}

.cf-door-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.28) contrast(1.1) grayscale(100%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s;
}
.cf-door-card:hover .cf-door-bg {
    transform: scale(1.04);
    filter: brightness(0.42) contrast(1.15) grayscale(0%);
}

.cf-door-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 36px 28px;
    z-index: 2;
    background: linear-gradient(to top, rgba(15,18,23,0.92) 0%, rgba(15,18,23,0.3) 50%, transparent 100%);
}

.cf-door-num {
    font-family: var(--font-label);
    font-size: 10px;
    color: var(--accent);
    letter-spacing: 0.2em;
    margin-bottom: 8px;
}
.cf-door-title {
    font-size: 26px;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 10px;
}
.cf-door-desc {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-mute);
    margin-bottom: 24px;
}
.cf-door-action {
    font-family: var(--font-label);
    font-size: 10px;
    color: var(--text-faint);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cf-door-card:hover .cf-door-action {
    color: var(--accent);
}

/* ── Auth Modal Stylings (Celerfidus Custom) ───────────────── */
.cf-auth-modal {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 4px !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7), 0 0 45px rgba(223, 177, 91, 0.12) !important;
}

.cf-auth-modal .auth-left {
    background: radial-gradient(120% 80% at 0% 0%, rgba(223, 177, 91, 0.06) 0%, transparent 60%), var(--bg-deep) !important;
    border-right: 1px solid var(--border) !important;
}

.cf-auth-modal .auth-left::after {
    background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(240, 236, 225, 0.008) 3px, rgba(240, 236, 225, 0.008) 4px) !important;
}

.cf-auth-modal .auth-left-logo::before {
    background: var(--accent) !important;
    box-shadow: 0 0 12px var(--accent) !important;
}

.cf-auth-modal .auth-left-headline {
    font-family: var(--font-heading) !important;
    letter-spacing: -0.01em !important;
    color: var(--text-primary) !important;
}

.cf-auth-modal .auth-feature-icon {
    background: rgba(223, 177, 91, 0.08) !important;
    color: var(--accent) !important;
    border: 1px solid rgba(223, 177, 91, 0.15) !important;
    border-radius: 2px !important;
}

.cf-auth-modal .auth-tab {
    font-family: var(--font-label) !important;
    font-size: 11px !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
}

.cf-auth-modal .auth-tab.active {
    color: var(--accent) !important;
    border-bottom-color: var(--accent) !important;
}

.cf-auth-modal label {
    font-family: var(--font-label) !important;
    font-size: 9px !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--text-mute) !important;
}

.cf-auth-modal input {
    background: var(--bg-deep) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    border-radius: 2px !important;
}

.cf-auth-modal input:focus {
    border-color: var(--accent) !important;
    outline: none !important;
    box-shadow: 0 0 10px rgba(223, 177, 91, 0.2) !important;
}

.cf-auth-modal .su-type {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 10px 14px !important;
    border: 1px solid var(--border) !important;
    background: rgba(10, 12, 16, 0.4) !important;
    border-radius: 4px !important;
    clip-path: none !important;
    transition: all 0.3s ease-in-out !important;
}

.cf-auth-modal .su-type:hover {
    border-color: rgba(223, 177, 91, 0.5) !important;
    background: rgba(223, 177, 91, 0.04) !important;
}

.cf-auth-modal .su-type[style*="var(--gold)"] {
    border-color: var(--accent) !important;
    background: rgba(223, 177, 91, 0.1) !important;
    box-shadow: 0 0 15px rgba(223, 177, 91, 0.15), inset 0 0 8px rgba(223, 177, 91, 0.05) !important;
}

.cf-auth-modal .su-plan {
    border: 1px solid var(--border) !important;
    background: rgba(10, 12, 16, 0.4) !important;
    border-radius: 4px !important;
    clip-path: none !important;
    transition: all 0.3s ease-in-out !important;
}

.cf-auth-modal .su-plan:hover {
    border-color: rgba(223, 177, 91, 0.5) !important;
    background: rgba(223, 177, 91, 0.04) !important;
}

.cf-auth-modal .su-plan[style*="var(--gold)"],
.cf-auth-modal .su-plan.selected {
    border-color: var(--accent) !important;
    background: rgba(223, 177, 91, 0.1) !important;
    box-shadow: 0 0 15px rgba(223, 177, 91, 0.15) !important;
}

.cf-auth-modal #actorPlanWrap > div,
.cf-auth-modal #freeJoinWrap > div {
    border-color: var(--border) !important;
    background: var(--bg-deep) !important;
    border-radius: 4px !important;
    clip-path: none !important;
}

.cf-auth-modal .auth-divider {
    font-family: var(--font-label) !important;
    font-size: 9px !important;
    letter-spacing: 0.15em !important;
}

.cf-auth-modal .btn-primary {
    background: var(--accent) !important;
    color: var(--bg-deep) !important;
    font-family: var(--font-label) !important;
    font-size: 11px !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    border-radius: 2px !important;
    font-weight: 600 !important;
    transition: all 0.2s !important;
}

.cf-auth-modal .btn-primary:hover {
    background: #ecc57b !important;
    box-shadow: 0 0 12px var(--accent-glow) !important;
}

.cf-auth-modal .btn-ghost {
    border: 1px solid var(--border-strong) !important;
    color: var(--text-mute) !important;
    font-family: var(--font-label) !important;
    font-size: 11px !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    border-radius: 2px !important;
    background: transparent !important;
}

.cf-auth-modal .btn-ghost:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}