/* Shared title / HUD identity. Effects are confined to the title screen. */
:root{--sigil-image:url('assets/brand/aicromancer-sigil.png')}
.sigil-mark{position:relative;display:block;flex:none;isolation:isolate}
.sigil-mark img{display:block;width:100%;height:100%;object-fit:contain}
.wordmark i{font-style:normal;color:#e95d53;text-shadow:0 0 14px #df4d4966}
#start-screen .crest{display:block;width:94px;height:94px;margin:0 auto 19px;border:0;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 0 13px #e3474a4d)}
#start-screen .crest:before,#start-screen .crest:after{content:'';position:absolute;inset:0;border:0;border-radius:0;box-shadow:none;background:#e64643;-webkit-mask:var(--sigil-image) center/contain no-repeat;mask:var(--sigil-image) center/contain no-repeat;opacity:0;pointer-events:none;transform:none;animation:sigil-glitch-red 8.6s steps(1,end) infinite}
#start-screen .crest:after{background:#9de0ef;animation-name:sigil-glitch-cyan;animation-delay:-.045s}
#start-screen .crest img{animation:sigil-link 8.6s steps(1,end) infinite}
.brand .brand-sigil{width:37px;height:42px;filter:drop-shadow(0 0 7px #d64b4233)}
.brand b.wordmark{font-family:'DM Sans',system-ui,sans-serif;font-size:17px;letter-spacing:.12em;font-weight:400;color:#ddebf2;text-shadow:0 0 15px #346b8655;white-space:nowrap}
.brand small{color:#91a4af;letter-spacing:1.55px;font-size:5.5px;margin-top:4px}
#start-screen{isolation:isolate;overflow:hidden}
#start-screen>.menu-top,#start-screen>.start-content,#start-screen>.menu-bottom{position:relative;z-index:1}
.title-atmosphere{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict;opacity:.8}
.title-smoke{position:absolute;left:-30%;bottom:-24%;width:130%;height:70%;background:radial-gradient(ellipse at 28% 65%,#8facbe1f,transparent 49%),radial-gradient(ellipse at 65% 40%,#8aa8b823,transparent 52%);animation:title-smoke-drift 28s ease-in-out infinite alternate;will-change:transform,opacity}
.title-smoke.far{left:-10%;bottom:0;height:85%;background:radial-gradient(ellipse at 70% 55%,#9a798917,transparent 47%),radial-gradient(ellipse at 20% 70%,#799ebf17,transparent 47%);animation-duration:39s;animation-delay:-16s;animation-direction:alternate-reverse}
.title-dust{position:absolute;inset:-30%;opacity:.32;background-image:radial-gradient(circle,#c6d7e0b8 0 1px,transparent 1.7px),radial-gradient(circle,#e5a495b8 0 .8px,transparent 1.5px),radial-gradient(circle,#8caebb99 0 .6px,transparent 1.3px);background-size:227px 251px,311px 197px,139px 317px;background-position:0 0,97px 63px,31px 121px;animation:title-dust-drift 34s linear infinite;will-change:transform}
.title-debris{position:absolute;inset:0}
.title-debris i{position:absolute;bottom:-12px;left:var(--x);width:var(--size);height:calc(var(--size)*1.8);background:#e18b6e;box-shadow:0 0 6px #dd674e77;opacity:0;animation:title-debris-rise var(--duration) linear var(--delay) infinite;will-change:transform,opacity}
.title-debris i:nth-child(3n){background:#9dadb4;box-shadow:none}
#start-screen.hidden .title-atmosphere *,#start-screen.hidden .crest img,#start-screen.hidden .crest:before,#start-screen.hidden .crest:after,.story-active #start-screen .title-atmosphere *{animation-play-state:paused}
@keyframes sigil-link{0%,93%,94.4%,95.8%,100%{opacity:1;transform:none}93.3%,94.8%{opacity:.72;transform:translateX(1px)}93.8%,95.2%{opacity:.9;transform:translateX(-1px)}}
@keyframes sigil-glitch-red{0%,92.9%,96%,100%{opacity:0;transform:none;clip-path:inset(0)}93%,94.6%{opacity:.8;transform:translateX(3px);clip-path:inset(20% 0 62%)}93.5%,95.1%{opacity:.7;transform:translateX(-4px);clip-path:inset(64% 0 17%)}94%,95.5%{opacity:0}}
@keyframes sigil-glitch-cyan{0%,93%,96%,100%{opacity:0;transform:none;clip-path:inset(0)}93.2%,94.7%{opacity:.55;transform:translateX(-3px);clip-path:inset(38% 0 52%)}93.8%,95.2%{opacity:.55;transform:translateX(4px);clip-path:inset(76% 0 12%)}94.1%,95.6%{opacity:0}}
@keyframes title-smoke-drift{from{transform:translate3d(-4%,3%,0) scale(1);opacity:.45}to{transform:translate3d(10%,-8%,0) scale(1.12);opacity:.85}}
@keyframes title-dust-drift{from{transform:translate3d(0,60px,0)}to{transform:translate3d(-65px,-137px,0)}}
@keyframes title-debris-rise{0%{transform:translate3d(0,0,0) rotate(0);opacity:0}12%{opacity:.4}75%{opacity:.28}100%{transform:translate3d(var(--drift),-105dvh,0) rotate(160deg);opacity:0}}
/* Preserve the uncluttered mobile HUD; share the mark wherever its brand is shown. */
@media(max-width:900px){.brand b.wordmark{font-size:14px}.brand .brand-sigil{width:30px;height:34px}.brand small{font-size:5px;letter-spacing:1px}}
@media(max-width:650px){#start-screen .crest{width:82px;height:82px;margin-bottom:16px}.title-atmosphere{opacity:.65}.title-debris i:nth-child(n+9){display:none}}
@media(orientation:portrait) and (max-height:650px){#start-screen .crest{width:62px;height:62px;margin-bottom:10px}#start-screen .start-eyebrow{margin-top:8px;margin-bottom:10px}#start-screen .tagline{margin:20px 0}#start-screen .start-content{margin-top:0}}
@media(orientation:landscape) and (max-height:600px){
 .title-brand{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;gap:0 16px;text-align:left}
 #start-screen .crest{grid-column:1;grid-row:1/3;display:block;width:62px;height:62px;margin:0}
 #start-screen .title-brand .start-eyebrow{grid-column:2;grid-row:1;margin:0 0 7px;font-size:7px;letter-spacing:2px}
 #start-screen .title-brand h1{grid-column:2;grid-row:2;font-size:34px}
}
@media(orientation:landscape) and (max-height:360px){#start-screen .crest{width:48px;height:48px}.title-brand{column-gap:12px}#start-screen .title-brand h1{font-size:29px}#start-screen .tagline{margin:8px 0}}
@media(prefers-reduced-motion:reduce){.title-atmosphere{display:none}#start-screen .crest img,#start-screen .crest:before,#start-screen .crest:after{animation:none!important}.sigil-mark:before,.sigil-mark:after{display:none}}