.brand-intro{position:fixed;inset:0;z-index:1000;display:grid;place-content:center;background:radial-gradient(ellipse at center,#443039,#17131d 68%);overflow:hidden;animation:intro-fade 8.2s both}
.brand-intro[hidden]{display:none}
.intro-running>:not(.brand-intro):not(script){animation:app-arrive 8.2s both}
.intro-art{position:relative;width:min(78vw,440px);aspect-ratio:1413/1113;animation:crest-impact 8.2s both}
.intro-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 25px #0008)}
.intro-caption{text-align:center;color:#c8ac79;font:11px/1.5 sans-serif;letter-spacing:.2em;margin-top:28px}
.intro-skip{position:absolute;bottom:max(28px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:transparent;border:1px solid #a4875040;border-radius:20px;padding:8px 18px;color:#bfac8a;font:12px sans-serif}
.ruby-socket{position:absolute;width:3.3%;aspect-ratio:1;border:1px solid #b59149;border-radius:50%;background:radial-gradient(circle at 65% 25%,#55432b,#120d09 62%);box-shadow:inset 0 1px 3px #000;--gem:#b51842;--light:#f47691;--dark:#620b25;--fall-y:260px}
.ruby-top{left:52.5%;top:25.5%;--dx:35px;--spin:140deg}
.ruby-left{left:38.4%;top:43.3%;--dx:-60px;--spin:-210deg;--gem:#138653;--light:#84efb4;--dark:#063829}
.ruby-right{left:66.8%;top:43.3%;--dx:75px;--spin:250deg;--gem:#275db8;--light:#90c9ff;--dark:#0b245d}
.ruby{position:absolute;inset:0;background:conic-gradient(var(--light),var(--dark),var(--gem),var(--light),var(--dark),var(--gem));border:1px solid var(--light);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);animation:ruby-fall 8.2s both;filter:drop-shadow(0 2px 3px #000)}
.gem-fragment{position:absolute;inset:0;background:linear-gradient(35deg,var(--dark),var(--gem),var(--light));clip-path:polygon(15% 0,100% 45%,30% 100%);opacity:0;animation:gem-shatter 8.2s both;--scatter-x:-24px;--scatter-y:-20px;--fragment-spin:-100deg}
.fragment-1{width:55%;height:65%;--scatter-x:-32px;--scatter-y:-24px}
.fragment-2{width:60%;height:45%;--scatter-x:24px;--scatter-y:-34px;--fragment-spin:130deg}
.fragment-3{width:45%;height:60%;--scatter-x:42px;--scatter-y:-12px;--fragment-spin:220deg}
.fragment-4{width:35%;height:40%;--scatter-x:-12px;--scatter-y:-45px;--fragment-spin:-240deg}
.crest-crack{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;animation:crack-open 8.2s both}
.crack-dark{stroke:#24110a;stroke-width:10}
.crack-light{stroke:#ffe3a0;stroke-width:15;transform:translateX(3px)}
#brand-art{position:relative}
.crest-damage{position:absolute;inset:0;pointer-events:none;opacity:0}
.crest-damaged .crest-damage{opacity:1}
.crest-damage .crest-crack{animation:none}
@keyframes crest-impact{0%{opacity:0;transform:scale(.9)}12%,22%{opacity:1;transform:scale(1)}23%{transform:translateX(3px) rotate(.5deg)}25%{transform:translateX(-2px) rotate(-.4deg)}27%,100%{opacity:1;transform:none}}
@keyframes ruby-fall{0%,26%{transform:none;opacity:1}40%{transform:translate(calc(var(--dx)*.25),calc(var(--fall-y)*.12)) rotate(20deg);opacity:1}52%{transform:translate(calc(var(--dx)*.65),calc(var(--fall-y)*.5)) rotate(80deg);opacity:1}61%{transform:translate(var(--dx),var(--fall-y)) rotate(var(--spin));opacity:1}62%,100%{transform:translate(var(--dx),var(--fall-y)) rotate(var(--spin));opacity:0}}
@keyframes gem-shatter{0%,60%{opacity:0;transform:translate(var(--dx),var(--fall-y)) scale(.7)}61%{opacity:1;transform:translate(var(--dx),var(--fall-y)) scale(.8)}68%{opacity:1;transform:translate(calc(var(--dx) + var(--scatter-x)),calc(var(--fall-y) + var(--scatter-y))) rotate(var(--fragment-spin))}77%{opacity:1;transform:translate(calc(var(--dx) + var(--scatter-x)*1.5),calc(var(--fall-y) + 10px)) rotate(var(--fragment-spin))}87%,100%{opacity:0;transform:translate(calc(var(--dx) + var(--scatter-x)*1.5),calc(var(--fall-y) + 10px)) rotate(var(--fragment-spin))}}
@keyframes crack-open{0%,25%{opacity:0}31%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.brand-intro,.intro-art,.ruby,.gem-fragment,.crest-crack,.intro-running>:not(.brand-intro):not(script){animation:none}.ruby,.gem-fragment{display:none}}
/* Centred persistent gold crest. */
body.ditarot-app .masthead{justify-content:center!important}body.ditarot-app .masthead .brand{flex-direction:column!important;gap:2px!important}body.ditarot-app .masthead .wordmark{align-items:center!important;text-align:center!important}body.ditarot-app:is(.initial-chat,.reading-chat) .masthead{height:176px!important;min-height:176px!important;padding:8px!important}body.ditarot-app:is(.initial-chat,.reading-chat) .brand-art,body.ditarot-app:is(.initial-chat,.reading-chat) .brand-art img{width:105px!important;height:83px!important}body.ditarot-app:is(.initial-chat,.reading-chat) .brand-ditarot{font-size:24px!important}body.ditarot-app:is(.initial-chat,.reading-chat) .about-link{top:70px!important}.overall-copy p{white-space:pre-line}
@media(max-height:650px){body.ditarot-app:is(.initial-chat,.reading-chat) .masthead{height:140px!important;min-height:140px!important}body.ditarot-app:is(.initial-chat,.reading-chat) .brand-art,body.ditarot-app:is(.initial-chat,.reading-chat) .brand-art img{width:76px!important;height:60px!important}}

@keyframes intro-fade{0%,84%{opacity:1}100%{opacity:0}}
@keyframes app-arrive{0%,84%{opacity:0}100%{opacity:1}}

/* One authoritative header layout, including welcome and keyboard states. */
body.ditarot-app #site-header{display:flex!important;justify-content:center!important;align-items:center!important;position:relative!important;width:100%!important;max-width:none!important;margin:0!important;padding:8px 40px!important}
body.ditarot-app #site-header .brand{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;margin:0 auto!important;gap:2px!important;max-width:100%}
body.ditarot-app #site-header .brand-art{display:flex!important;align-items:center!important;justify-content:center!important;margin:0 auto!important}
body.ditarot-app #site-header .brand-art img{display:block!important;object-fit:contain!important;margin:0 auto!important}
body.ditarot-app #site-header .wordmark{align-items:center!important;text-align:center!important;width:100%}
body.ditarot-app #site-header .about-link{position:absolute!important;right:16px!important;left:auto!important}

.intro-caption small{display:block;font-size:clamp(12px,2.4vw,18px);letter-spacing:.04em;line-height:1.5;margin-top:8px;text-transform:none}