/* Composited, image-authored title screen. All art is local and original pixels are preserved. */
body[data-mode="boot"] :is(.hud,#game,.edge-shade,#loading){visibility:hidden;pointer-events:none}
#title-button{background:none;border:0;padding:0;text-align:left;pointer-events:auto;color:inherit}
#title-button:disabled{cursor:default;opacity:1}
.boot-menu{--look-x:0;--look-y:0;position:fixed;inset:0;z-index:25;overflow:hidden;isolation:isolate;background:#111821;color:#f6dfb2;opacity:1;transition:opacity .65s ease}
.boot-menu[hidden]{display:none}.boot-menu.leaving{opacity:0;pointer-events:none}
.boot-world{position:absolute;inset:-2%;transform:translate(calc(var(--look-x)*-7px),calc(var(--look-y)*-4px)) scale(1.025);transition:transform 1.2s ease-out;will-change:transform;background:#112632}
.boot-world:before{content:"";position:absolute;inset:0;background:url('assets/boot/storm-spire.png') center/cover;animation:world-breathe 46s ease-in-out infinite alternate}
.boot-clouds{position:absolute;width:135%;max-width:none;left:-17%;pointer-events:none;user-select:none;object-fit:fill;animation:mist-drift 35s ease-in-out infinite alternate}
.boot-clouds.far{height:75%;bottom:13%;opacity:.22;animation-duration:49s;filter:brightness(.65)}
.boot-clouds.near{height:75%;bottom:-19%;opacity:.37;animation-delay:-18s;animation-direction:alternate-reverse}
.boot-stormlight{position:absolute;inset:0;background:radial-gradient(ellipse at 59% 20%,#aedfdf35,transparent 45%);mix-blend-mode:screen;pointer-events:none;animation:storm-light 17s ease-in-out infinite}
.boot-veil{position:absolute;inset:0;background:linear-gradient(90deg,#061116d6 0%,#11151d9e 31%,#12162730 62%,#10202b2b),linear-gradient(0deg,#061015f5 0%,transparent 31%,transparent 70%,#09111a70);pointer-events:none}
.boot-knight{position:absolute;right:1%;bottom:-11%;height:113%;width:auto;max-width:59%;object-fit:contain;object-position:bottom;transform:translate(calc(var(--look-x)*10px),calc(var(--look-y)*6px));transition:transform 1.3s ease-out;filter:drop-shadow(0 25px 25px #0004);pointer-events:none;user-select:none}
.boot-content{position:absolute;left:3%;top:48%;width:min(52%,710px);transform:translateY(-50%);display:flex;align-items:center;flex-direction:column;text-align:center}
.boot-crest{position:relative;width:100%;aspect-ratio:1.5;margin:-5% 0 -8%;isolation:isolate;filter:drop-shadow(0 10px 22px #0009);pointer-events:none}
.boot-crest img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;animation:crest-fire 7s ease-in-out infinite}
.boot-crest:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 40%,#fcecd333 46%,#fff9db9e 49%,#ffd08f33 52%,transparent 58%) -170% 0/250% 100% no-repeat;mask:url('assets/boot/spirestorm-logo.png') center/contain no-repeat;mix-blend-mode:screen;animation:crest-shine 10s ease-in-out infinite;opacity:.65}
.boot-motto{font:10px/1.6 'Segoe UI',sans-serif;letter-spacing:3.5px;color:#e8d9bd;text-shadow:0 2px 12px #000;margin:0 0 23px}
.boot-actions{display:grid;gap:3px;justify-items:center}
.baked-button{position:relative;display:block;width:246px;aspect-ratio:329/118;padding:0;background:none;border:0;color:#fff0cf;transition:filter .2s,transform .2s;filter:brightness(.83) drop-shadow(0 6px 7px #030b14a3);clip-path:polygon(3% 15%,9% 3%,91% 3%,97% 15%,100% 43%,97% 88%,91% 98%,9% 98%,3% 87%,0 45%)}
.baked-button svg{display:block;width:100%;height:100%;overflow:hidden;pointer-events:none}
.baked-button:first-child{filter:brightness(1.12) drop-shadow(0 0 12px #d3924730)}
.baked-button:is(:hover,:focus-visible){filter:brightness(1.38) drop-shadow(0 0 13px #efb8608f);transform:translateY(-2px) scale(1.035);outline:0}
.baked-button:active{transform:translateY(1px) scale(.985)}.baked-button:disabled{filter:grayscale(.5) brightness(.6);cursor:wait}
.boot-journey{font:10px/1.7 'Segoe UI',sans-serif;letter-spacing:1.1px;color:#dbc9ae;margin:18px 0 0;text-shadow:0 2px 8px #000;max-width:88%}
.boot-loading{width:220px;margin-top:16px}.boot-loading p{font-size:10px;color:#dccbb2;margin:0 0 8px}.boot-loading>div{height:2px;background:#d1ac7333}.boot-loading i{display:block;height:100%;width:0;background:#ebc78d;transition:width .25s}
.boot-retry{border:0;background:transparent;color:#eed0a0;text-decoration:underline;font-size:11px;margin-top:13px}
.boot-footer{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));left:3.5%;right:3.5%;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:1.6px;color:#a8b5b6;gap:15px;text-shadow:0 2px 6px #061015}
.boot-footer button{color:#d7c6aa;padding:9px 0;border:0;background:none;font-size:9px;letter-spacing:1.5px}.boot-footer button:hover{color:#ffe3ad}.boot-footer span{opacity:.85}.boot-footer kbd{margin-left:7px;font-size:8px}
.boot-embers{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.boot-embers i{position:absolute;left:var(--x);bottom:-5%;width:var(--size);height:calc(var(--size)*1.7);border-radius:50%;background:#ffbd6c;box-shadow:0 0 7px #ff8a3899;opacity:0;animation:ember-rise var(--duration) var(--delay) linear infinite}
.boot-credits-dialog{width:min(500px,92vw);padding:40px;color:#e9d5b5;border:1px solid #a98a565e;border-radius:5px;background:linear-gradient(135deg,#1d3033,#0b171e);box-shadow:0 30px 100px #000a;max-height:85dvh;overflow:auto}
.boot-credits-dialog::backdrop{background:#050c15bd;backdrop-filter:blur(10px)}
.boot-credits-dialog h2{font:28px Georgia,serif;letter-spacing:2px;color:#f5d296;margin:0 0 8px}.boot-credits-dialog p{font-size:13px;line-height:1.8;color:#bfc8be}.boot-credits-dialog h3{font:17px Georgia,serif;color:#e8cea3;margin:24px 0 0}.boot-credits-dialog a{color:#ebcc93;text-underline-offset:4px}.boot-credits-dialog .secondary{margin-top:20px;min-height:44px;width:100%}
.menu-motion-setting{padding-top:20px;margin-top:22px;border-top:1px solid #d3c19830}.menu-motion-setting label{display:flex;align-items:center;justify-content:space-between;font-size:12px;gap:15px}.menu-motion-setting input{accent-color:#e9bd76;width:18px;height:18px}.menu-motion-setting small{display:block;color:#adbbb5;font-size:10px;line-height:1.6;margin-top:7px}
.is-still :is(.boot-crest img,.boot-crest:after,.boot-embers i){animation:none}.is-still .boot-embers{display:none}.is-still .boot-crest:after{opacity:0}
.is-still .boot-world::before,.is-still .boot-clouds,.is-still .boot-stormlight{animation-play-state:paused}
.is-still .boot-crest::after{animation:none}
@keyframes world-breathe{from{transform:scale(1.005) translateY(0)}to{transform:scale(1.048) translateY(-.7%)}}
@keyframes mist-drift{from{transform:translate(-2%,1%) scale(1)}to{transform:translate(3%,-2%) scale(1.035)}}
@keyframes storm-light{0%,100%{opacity:.15}45%{opacity:.6}55%{opacity:.25}75%{opacity:.5}}
@keyframes crest-fire{0%,100%{filter:brightness(1) drop-shadow(0 0 1px #e7984000)}48%{filter:brightness(1.09) drop-shadow(0 0 9px #e798402b)}}
@keyframes crest-shine{0%,45%{background-position:170% 0}76%,100%{background-position:-100% 0}}
@keyframes ember-rise{0%{opacity:0;transform:translate(0,0) rotate(0)}12%{opacity:.6}76%{opacity:.4}100%{opacity:0;transform:translate(var(--drift),-87vh) rotate(130deg)}}
@media(min-width:1600px){.boot-content{left:7%}.baked-button{width:270px}.boot-motto{font-size:12px}.boot-journey{font-size:12px}}
@media(max-height:760px) and (min-width:761px){.boot-content{top:48%;width:min(49%,560px)}.boot-crest{width:90%;margin:-5% 0 -10%}.boot-motto{font-size:9px;margin-bottom:10px}.baked-button{width:216px}.boot-actions{gap:0}.boot-journey{margin-top:8px}.boot-knight{right:0;height:115%}}
@media(max-width:760px) and (orientation:portrait){.boot-world:before{background-position:57% center}.boot-veil{background:linear-gradient(0deg,#07121bf7,transparent 67%,#10141b66),linear-gradient(90deg,#0a10145c,transparent)}.boot-knight{height:80%;max-width:none;right:-14%;bottom:4%;opacity:.75}.boot-content{left:0;top:44%;width:100%;transform:translateY(-50%)}.boot-crest{width:min(100%,530px);margin:0 0 -10%;filter:drop-shadow(0 8px 16px #000)}.boot-motto{font-size:9px;letter-spacing:2px;margin-bottom:19px}.baked-button{width:225px}.boot-actions{gap:0;filter:drop-shadow(0 5px 22px #041016)}.boot-journey{margin-top:16px;font-size:10px}.boot-footer{font-size:8px;letter-spacing:1px;bottom:max(20px,env(safe-area-inset-bottom));left:6%;right:6%}.boot-footer span{max-width:160px;line-height:1.7}.boot-footer .boot-shortcuts{display:none}}
@media(max-height:500px){.boot-content{width:47%;left:4%;top:46%}.boot-crest{width:90%;margin:-3% 0 -16%}.boot-motto{font-size:7px;letter-spacing:2px;margin-bottom:5px}.baked-button{width:160px}.boot-actions{gap:0}.boot-journey{margin-top:5px;font-size:8px}.boot-footer{bottom:10px;font-size:7px}.boot-footer button{font-size:8px}.boot-knight{height:117%;right:1%}}
@media(prefers-reduced-motion:reduce){.boot-world,.boot-knight{transform:none}.boot-embers{display:none}.boot-crest:after{display:none}}

/* Keep the hanging jewel clear of the motto at every normal-height layout. */
@media(min-height:501px){.boot-crest{margin-bottom:-3%}}
@media(max-width:760px) and (orientation:portrait){.boot-crest{width:94%}.boot-journey{color:#e6d3b1;text-shadow:0 2px 6px #000,0 0 12px #000}}
@media(max-height:500px) and (orientation:landscape){.boot-content{top:48%}.boot-crest{width:76%;margin:0 0 -3%}.boot-motto,.boot-journey{display:none}.baked-button{width:144px}}
/* Focusing Retry must not scroll the fixed composition on short screens. */
.boot-menu{overflow:clip}
@media(max-height:500px) and (orientation:landscape){.boot-loading{position:absolute;left:calc(100% + 14px);bottom:10px;width:180px;text-align:left;text-shadow:0 2px 8px #000}.boot-retry{min-height:34px;margin-top:3px}}