:root {
    --bg:            #0d0a05;
    --bg2:           #1a1208;
    --bg3:           #251a0a;
    --gold:          #c9973a;
    --gold-light:    #e8c06a;
    --parchment:     #e8d5a3;
    --parchment-dim: #c4ad7a;
    --red:           #8b1a1a;
    --red-bright:    #cc3333;
    --text:          #d4bc87;
    --text-dim:      #7a6040;
    --border:        rgba(201,151,58,0.28);
    --card-alpha:    0.95;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    min-height: 100vh;
    overflow-x: hidden;
}

/* rune watermark — top-left corner, fixed */
body::before {
    content: '';
    position: fixed; top: 0; left: 0;
    width: 50vh; height: 50vh;
    background: url('whiterunes.webp') no-repeat top left / contain;
    pointer-events: none; z-index: 9998;
    opacity: 0.75;
}

/* subtle noise grain */
body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 9999;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    opacity: .35;
}

.screen { display: none; min-height: 100vh; position: relative; }
.screen.active { display: flex; }

/* ═══════════════════════════════════════
   LANDING
═══════════════════════════════════════ */
#screen-landing {
    flex-direction: column; align-items: center; justify-content: center;
    padding: 3rem 2rem; text-align: center;
    background: radial-gradient(ellipse at 50% 30%, #2d1c08 0%, #0d0a05 65%);
}

.emblem {
    width: 110px; height: 110px;
    border: 1px solid var(--gold); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 2rem; position: relative;
    animation: emblem-glow 3s ease-in-out infinite;
}
.emblem::before { content: '♥'; font-size: 2.8rem; color: var(--red-bright); filter: drop-shadow(0 0 16px rgba(200,40,40,.7)); }
.emblem::after {
    content: ''; position: absolute; inset: -10px;
    border: 1px solid rgba(201,151,58,.2); border-radius: 50%;
    animation: spin 25s linear infinite;
}

@keyframes emblem-glow {
    0%,100% { box-shadow: 0 0 18px rgba(201,151,58,.25); }
    50%      { box-shadow: 0 0 50px rgba(201,151,58,.6), 0 0 80px rgba(200,40,40,.2); }
}
@keyframes spin { to { transform: rotate(360deg); } }

.logo {
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(2.6rem, 9vw, 5.5rem);
    font-weight: 700; color: var(--gold);
    text-shadow: 0 0 40px rgba(201,151,58,.45), 2px 2px 0 #000;
    letter-spacing: .04em; line-height: 1; margin-bottom: .4rem;
}
.logo-tagline {
    font-family: 'Cinzel', serif; font-size: clamp(.6rem, 1.8vw, .85rem);
    color: var(--parchment-dim); letter-spacing: .3em; text-transform: uppercase;
    margin-bottom: 2.5rem;
}
.landing-pitch {
    font-size: clamp(.95rem, 2.5vw, 1.2rem); color: var(--parchment);
    max-width: 520px; line-height: 1.75; margin-bottom: .8rem; font-style: italic;
}
.landing-fine {
    font-size: .72rem; color: var(--text-dim); margin-bottom: 3rem; font-style: italic;
}

/* hex button */
.btn-hex {
    font-family: 'Cinzel', serif; font-size: .95rem; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--bg); background: linear-gradient(135deg, var(--gold), var(--gold-light) 50%, var(--gold));
    border: none; padding: 1rem 2.8rem; cursor: pointer; position: relative;
    clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0% 50%);
    transition: transform .2s, filter .2s;
}
.btn-hex:hover { transform: scale(1.06); filter: brightness(1.15); }
.btn-hex:active { transform: scale(.97); }

.divider {
    width: 180px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin: 2rem auto; opacity: .4;
}
.match-chips { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center; max-width: 380px; margin-top: 1.5rem; }
.chip {
    font-family: 'Cinzel', serif; font-size: .6rem; color: var(--text-dim);
    letter-spacing: .1em; border: 1px solid rgba(201,151,58,.12);
    padding: .2rem .55rem;
}

/* ═══════════════════════════════════════
   ONBOARDING
═══════════════════════════════════════ */
#screen-onboarding {
    flex-direction: column; align-items: center; justify-content: center;
    padding: 2rem 1rem;
    background: radial-gradient(ellipse at 50% 0%, #221508 0%, #0d0a05 60%);
}
.card {
    background: linear-gradient(160deg, rgba(30,21,8,0.8), rgba(19,14,4,0.8));
    border: 1px solid var(--border);
    max-width: 460px; width: 100%; padding: 2.5rem;
    position: relative;
}
.card::before,.card::after { content: '✦'; position: absolute; color: var(--gold); opacity: .35; font-size: .75rem; }
.card::before { top: .5rem; left: .6rem; }
.card::after  { bottom: .5rem; right: .6rem; }

.card-title    { font-family:'Cinzel',serif; font-size:1.25rem; color:var(--gold); text-align:center; margin-bottom:.4rem; letter-spacing:.1em; }
.card-subtitle { font-size:.85rem; color:var(--text-dim); text-align:center; font-style:italic; margin-bottom:2rem; }

.form-group  { margin-bottom: 1.5rem; }
.form-label  { font-family:'Cinzel',serif; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--parchment-dim); display:block; margin-bottom:.45rem; }
.form-input  {
    width:100%; background:rgba(0,0,0,.5); border:1px solid var(--border);
    border-bottom-color: var(--gold); color:var(--parchment);
    padding:.7rem 1rem; font-family:'IM Fell English',serif; font-size:1rem;
    outline:none; transition:border-color .2s, box-shadow .2s;
}
.form-input:focus { border-color:var(--gold); box-shadow:0 0 18px rgba(201,151,58,.12); }
.form-input.error { border-bottom-color: var(--red-bright); }

.portrait-area {
    border: 2px dashed var(--border); padding: 1.8rem; text-align:center;
    cursor:pointer; transition:all .3s; position:relative;
}
.portrait-area:hover { border-color:var(--gold); background:rgba(201,151,58,.04); }
.portrait-area.done  { border-style:solid; border-color:var(--gold); }

.portrait-icon {
    width:72px; height:72px; border-radius:50%;
    background: radial-gradient(circle, #3a2a10, #1a1208);
    border:2px solid var(--border); margin:0 auto .8rem;
    display:flex; align-items:center; justify-content:center; font-size:1.8rem;
}
.portrait-hint  { font-size:.82rem; color:var(--text-dim); }
.portrait-small { font-size:.68rem; opacity:.55; display:block; margin-top:.2rem; }

#portrait-result { display:none; }
#portrait-result.show { display:block; }
.portrait-avatar {
    width:72px; height:72px; border-radius:50%;
    background: radial-gradient(circle, #2e1e0a, #0d0a05);
    border:2px solid var(--gold); margin:0 auto .4rem;
    display:flex; align-items:center; justify-content:center;
    font-size:2.2rem;
    filter:drop-shadow(0 0 10px rgba(201,151,58,.4));
}
.portrait-stunning { font-family:'Cinzel',serif; color:var(--gold); letter-spacing:.25em; font-size:.85rem; }

#portrait-file { display:none; }

.ornament {
    display:flex; align-items:center; gap:1rem; margin:1.5rem 0;
}
.ornament::before,.ornament::after {
    content:''; flex:1; height:1px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.3;
}
.ornament-glyph { font-size:.7rem; color:var(--text-dim); }

.btn-full { width:100%; }
.consent { font-size:.68rem; color:var(--text-dim); text-align:center; margin-top:.8rem; font-style:italic; }

/* ═══════════════════════════════════════
   QUESTIONS
═══════════════════════════════════════ */
#screen-questions {
    flex-direction:column; align-items:center;
    padding: 2rem 1rem 4rem;
    background: radial-gradient(ellipse at 50% 0%, #1e1305 0%, #0d0a05 55%);
}

.prog-wrap { width:100%; max-width:580px; margin-bottom:1.6rem; }
.prog-meta {
    display:flex; justify-content:space-between;
    font-family:'Cinzel',serif; font-size:.95rem; letter-spacing:.18em;
    color:var(--text-dim); margin-bottom:.35rem;
}
.prog-track {
    height:3px; background:rgba(201,151,58,.08);
    border:1px solid rgba(201,151,58,.15); position:relative;
}
.prog-fill {
    height:100%;
    background:linear-gradient(90deg, var(--red), var(--gold));
    transition:width .55s ease;
}
.prog-fill::after {
    content:'◆'; position:absolute; right:-5px; top:50%;
    transform:translateY(-50%); font-size:.45rem; color:var(--gold);
}
.act-badge {
    font-family:'Cinzel',serif; font-size:.95rem; letter-spacing:.28em;
    text-align:center; margin-top:.4rem; color:var(--text-dim);
    transition:color .6s;
}
.act-badge.act2 { color:var(--parchment-dim); }
.act-badge.act3 { color:var(--red-bright); letter-spacing:.35em; }

.q-card {
    background:linear-gradient(160deg, rgba(30,21,8,var(--card-alpha)), rgba(19,14,4,var(--card-alpha)));
    border:1px solid var(--border);
    max-width:580px; width:100%; padding:2rem 2.5rem;
    animation: fadeUp .4s ease;
}
@keyframes fadeUp {
    from { opacity:0; transform:translateY(18px); }
    to   { opacity:1; transform:translateY(0); }
}

.q-num  { font-family:'Cinzel',serif; font-size:.82rem; color:var(--text-dim); letter-spacing:.2em; margin-bottom:.9rem; }
.q-text { font-size:clamp(1.05rem,2.8vw,1.55rem); color:var(--parchment); line-height:1.55; margin-bottom:1.8rem; font-style:italic; }

.answers { display:flex; flex-direction:column; gap:.55rem; }

.ans-btn {
    background:rgba(0,0,0,.3); border:1px solid rgba(201,151,58,.18);
    color:var(--text); padding:.75rem 1.1rem; text-align:left;
    cursor:pointer; font-family:'IM Fell English',serif; font-size:.92rem;
    line-height:1.45; transition:all .18s; position:relative;
}
.ans-btn::before { content:'◇'; color:var(--text-dim); margin-right:.55rem; transition:all .18s; }
.ans-btn:hover   { border-color:var(--gold); background:rgba(201,151,58,.07); color:var(--parchment); transform:translateX(5px); }
.ans-btn:hover::before { content:'◆'; color:var(--gold); }
.ans-btn.chosen  { border-color:var(--gold); background:rgba(201,151,58,.14); color:var(--gold-light); pointer-events:none; }
.ans-btn.chosen::before { content:'◆'; color:var(--gold); }
.ans-btn:disabled { opacity:.5; pointer-events:none; }

/* ═══════════════════════════════════════
   CALCULATING
═══════════════════════════════════════ */
#screen-calculating {
    flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:2rem;
    background:radial-gradient(ellipse at center, #1a0808 0%, #0d0a05 60%);
}
.orb {
    width:90px; height:90px; border-radius:50%;
    background:radial-gradient(circle, #3a1010 30%, #0d0a05);
    border:2px solid var(--red-bright);
    margin:0 auto 1.8rem;
    display:flex; align-items:center; justify-content:center; font-size:2.2rem;
    animation:orb-beat 1.4s ease-in-out infinite;
}
@keyframes orb-beat {
    0%,100% { box-shadow:0 0 20px rgba(200,40,40,.35), inset 0 0 20px rgba(200,40,40,.15); transform:scale(1); }
    50%      { box-shadow:0 0 60px rgba(200,40,40,.75), inset 0 0 40px rgba(200,40,40,.35); transform:scale(1.04); }
}

.calc-title    { font-family:'Cinzel Decorative',serif; font-size:clamp(1.4rem,4vw,2.2rem); color:var(--gold); margin-bottom:.5rem; }
.calc-subtitle { font-size:.95rem; color:var(--text-dim); font-style:italic; margin-bottom:2.5rem; }

.calc-steps { display:flex; flex-direction:column; gap:.4rem; min-height:160px; }
.calc-step  {
    font-family:'Cinzel',serif; font-size:.68rem; letter-spacing:.18em;
    color:transparent; opacity:0; transform:translateY(4px);
    transition:all .4s;
}
.calc-step.vis  { opacity:1; transform:translateY(0); color:var(--parchment-dim); }
.calc-step.done { color:var(--gold); }

/* ═══════════════════════════════════════
   RESULT
═══════════════════════════════════════ */
#screen-result {
    flex-direction:column; align-items:center;
    padding:2.5rem 1rem 5rem;
    background:radial-gradient(ellipse at top, #180a18 0%, #0d0a05 55%);
}

.res-eyebrow { font-family:'Cinzel',serif; font-size:.65rem; letter-spacing:.4em; color:var(--text-dim); margin-bottom:.4rem; text-align:center; }
.res-headline { font-family:'Cinzel Decorative',serif; font-size:clamp(1.6rem,5vw,3rem); color:var(--gold); text-shadow:0 0 30px rgba(201,151,58,.45); text-align:center; margin-bottom:2rem; }

/* THE CARD */
#result-card {
    max-width:390px; width:100%;
    background:linear-gradient(160deg, #1f1609, #120d04);
    border:2px solid var(--gold); position:relative; overflow:hidden;
    animation:card-reveal .8s cubic-bezier(.22,.68,0,1.2) both;
}
@keyframes card-reveal {
    from { opacity:0; transform:scale(.88) translateY(28px); }
    to   { opacity:1; transform:scale(1) translateY(0); }
}
#result-card::before {
    content:''; position:absolute; inset:6px;
    border:1px solid rgba(201,151,58,.18); pointer-events:none;
}

.card-header {
    background:linear-gradient(90deg, transparent, rgba(201,151,58,.08), transparent);
    border-bottom:1px solid var(--border);
    padding:.7rem 1.4rem;
    display:flex; justify-content:space-between; align-items:center;
}
.card-header-logo { font-family:'Cinzel Decorative',serif; font-size:.72rem; color:var(--gold); letter-spacing:.08em; }
.card-header-badge {
    font-family:'Cinzel',serif; font-size:.5rem; letter-spacing:.22em;
    color:var(--red-bright); border:1px solid var(--red-bright);
    padding:.12rem .4rem; animation:badge-blink 2.2s ease-in-out infinite;
}
@keyframes badge-blink { 0%,100%{opacity:1;} 50%{opacity:.45;} }

.portrait-wrap {
    width:160px; height:185px; margin:1.4rem auto .8rem;
    position:relative;
}
.portrait-wrap::before {
    content:''; position:absolute; inset:-4px;
    border:1px solid rgba(201,151,58,.35); pointer-events:none; z-index:1;
}
.portrait-wrap::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:44px;
    background:linear-gradient(to top, #120d04, transparent); z-index:2;
}
.portrait-img {
    width:100%; height:100%; object-fit:cover; object-position:top;
    filter:sepia(25%) contrast(1.08); display:block;
}
.portrait-empty {
    width:100%; height:100%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:.5rem; border:2px dashed rgba(201,151,58,.25);
    color:var(--text-dim); font-style:italic; font-size:.78rem;
}

.match-name  { font-family:'Cinzel',serif; font-size:clamp(1.2rem,4vw,1.7rem); color:var(--parchment); text-align:center; padding:0 1.4rem .3rem; line-height:1.2; }

.compat-block { text-align:center; padding:0 1.4rem .8rem; }
.compat-label { font-family:'Cinzel',serif; font-size:.55rem; letter-spacing:.28em; color:var(--text-dim); display:block; margin-bottom:.2rem; }
.compat-val   { font-family:'Cinzel Decorative',serif; font-size:2rem; color:var(--gold); text-shadow:0 0 18px rgba(201,151,58,.45); line-height:1; }
.compat-bar   { height:2px; background:rgba(201,151,58,.1); border:1px solid rgba(201,151,58,.1); margin:.35rem 0 0; }
.compat-fill  { height:100%; background:linear-gradient(90deg, var(--red), var(--gold)); transition:width 1.2s ease .6s; }

.match-tagline { font-size:.83rem; font-style:italic; color:var(--text-dim); text-align:center; padding:0 1.4rem .9rem; line-height:1.55; border-bottom:1px solid var(--border); }
.match-quote   { font-size:.83rem; font-style:italic; color:var(--parchment-dim); text-align:center; padding:.9rem 1.4rem; line-height:1.6; }

.card-footer {
    border-top:1px solid var(--border);
    padding:.7rem 1.4rem;
    display:flex; justify-content:space-between; align-items:center;
    background:rgba(0,0,0,.2);
}
.card-footer-label { font-family:'Cinzel',serif; font-size:.55rem; letter-spacing:.18em; color:var(--text-dim); }
.card-footer-name  { font-family:'Cinzel',serif; font-size:.88rem; color:var(--gold); }

/* stamp */
.stamp {
    position:absolute; top:.9rem; right:.9rem;
    width:58px; height:58px; border:2px solid var(--red-bright); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transform:rotate(14deg); opacity:0;
    animation:stamp-in .25s ease 1.3s forwards;
}
.stamp::before {
    content:'MATCHED'; font-family:'Cinzel',serif; font-size:.42rem;
    letter-spacing:.08em; color:var(--red-bright); text-align:center; line-height:1.3;
}
@keyframes stamp-in {
    from { opacity:0; transform:rotate(14deg) scale(2.2); }
    to   { opacity:.75; transform:rotate(14deg) scale(1); }
}

/* actions */
.result-actions { margin-top:1.8rem; display:flex; flex-direction:column; gap:.9rem; width:100%; max-width:390px; text-align:center; }

.btn-claim {
    font-family:'Cinzel',serif; font-size:.82rem; font-weight:600;
    letter-spacing:.18em; text-transform:uppercase;
    color:var(--bg); background:linear-gradient(135deg, var(--gold), var(--gold-light) 50%, var(--gold));
    border:none; padding:.95rem 2rem; cursor:pointer;
    text-decoration:none; display:block; transition:all .2s;
}
.btn-claim:hover { filter:brightness(1.18); transform:translateY(-2px); box-shadow:0 8px 28px rgba(201,151,58,.28); }

.btn-again {
    font-family:'Cinzel',serif; font-size:.72rem; letter-spacing:.16em;
    color:var(--text-dim); background:transparent;
    border:1px solid var(--border); padding:.72rem 2rem;
    cursor:pointer; transition:all .2s;
}
.btn-again:hover { border-color:var(--gold); color:var(--parchment); }

.result-disclaimer { font-size:.68rem; font-style:italic; color:var(--text-dim); text-align:center; margin-top:1.5rem; max-width:390px; line-height:1.65; }

@media(max-width:480px) {
    .q-card  { padding:1.4rem; }
    .card    { padding:1.5rem; }
}