/* v37/v39: title screen (loaded in <head> so it shows before the game scripts finish loading) */
#intro.title{background:linear-gradient(100deg,#fff7e2f2 0%,#fff1d0d9 34%,#fff1d000 62%),radial-gradient(ellipse at 78% 60%,#fff8e055 0%,#fff8e000 55%);padding:0;align-items:stretch;justify-content:stretch;overflow:hidden;color:#4a3524}
 #intro.title .panel{max-width:none;width:min(54%,640px);padding:clamp(18px,5vh,56px) clamp(20px,5vw,72px);display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2}
 #intro.title .kicker{color:#6f9a5a;font-weight:800;letter-spacing:.32em;font-size:clamp(9px,1.1vw,12px)}
 #intro.title h1{font-family:'Hiragino Maru Gothic ProN','Yu Gothic UI','Meiryo',sans-serif;font-weight:900;font-size:clamp(46px,9.2vw,118px);letter-spacing:.02em;line-height:1.05;margin:.12em 0 .05em;white-space:nowrap;display:flex}
 #intro.title h1 span{display:inline-block;color:#f39a36;-webkit-text-stroke:.085em #5a3a22;paint-order:stroke fill;text-shadow:0 .07em 0 #5a3a22,0 .13em 0 #0002;animation:ttlBob 2.6s ease-in-out infinite;animation-delay:calc(var(--i)*.12s);transform-origin:50% 90%}
 #intro.title h1 span:nth-child(odd){color:#ffb64a}
 @keyframes ttlBob{0%,100%{transform:translateY(0) rotate(calc((var(--i) - 2)*-1.5deg))}50%{transform:translateY(-.08em) rotate(calc((var(--i) - 2)*1.5deg))}}
 #intro.title .subtitle{font-family:'Hiragino Maru Gothic ProN','Yu Gothic UI',sans-serif;font-weight:800;font-size:clamp(15px,2.4vw,28px);letter-spacing:.3em;color:#4f8f5b;margin:0 0 .8em;display:flex;align-items:center;gap:.6em}
 #intro.title .subtitle::before,#intro.title .subtitle::after{content:'';flex:0 0 1.6em;height:3px;border-radius:3px;background:#9ccf8a}
 #intro.title .ornament{display:none}
 #intro.title .panel>p:not(.hint){color:#5a4a3a;font-size:clamp(12px,1.35vw,15px);line-height:1.9;margin:0 0 1.2em;font-weight:600}
 #intro.title .buttons{margin-top:0;gap:14px;flex-wrap:wrap}
 #intro.title .buttons button{font-weight:900;font-size:clamp(14px,1.7vw,19px);padding:.75em 1.7em;border-radius:999px;border:3px solid #5a3a22;background:#ffcf5c;color:#4a3018;box-shadow:0 5px 0 #5a3a22;transition:transform .08s,box-shadow .08s}
 #intro.title .buttons button:hover{background:#ffdc7c;transform:translateY(-2px);box-shadow:0 7px 0 #5a3a22}
 #intro.title .buttons button:active{transform:translateY(4px);box-shadow:0 1px 0 #5a3a22}
 #intro.title #start{animation:ttlPulse 1.6s ease-in-out infinite}
 @keyframes ttlPulse{50%{box-shadow:0 5px 0 #5a3a22,0 0 0 8px #ffcf5c55}}
 #intro.title #continue{background:#bfe8a8}
 #intro.title details{margin-top:1.2em;font-size:12px;color:#6a5a48}
 #intro.title summary{cursor:pointer;font-weight:800;color:#4f8f5b;list-style:none;display:inline-block;padding:4px 12px;border:2px solid #9ccf8a;border-radius:999px;background:#ffffffaa}
 #intro.title summary::-webkit-details-marker{display:none}
 #intro.title .legend{margin-top:10px;font-size:11.5px;line-height:2;color:#5a4a3a;background:#fffdf4e6;border-radius:12px;padding:10px 14px;max-height:34vh;overflow:auto}
 #intro.title .hint{display:none}
 #intro.title .version{color:#5a3a22;opacity:.55;right:20px;bottom:12px}
 #ttlArt{position:absolute;right:clamp(0px,4vw,70px);bottom:0;height:min(88vh,62vw);aspect-ratio:385/385;pointer-events:none;z-index:1}
 #ttlArt img{position:absolute;filter:drop-shadow(3px 0 0 #fffdf4) drop-shadow(-3px 0 0 #fffdf4) drop-shadow(0 3px 0 #fffdf4) drop-shadow(0 -3px 0 #fffdf4) drop-shadow(0 10px 14px #5a3a2240)}
 #ttlArt .hero{right:4%;bottom:5%;height:86%;animation:ttlFloat 3.2s ease-in-out infinite;transform-origin:50% 100%}
 #ttlArt .walk{left:-18%;bottom:4%;height:34%;animation:ttlHop 1.1s ease-in-out infinite}
 @keyframes ttlFloat{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-2.2%) rotate(1.5deg)}}
 @keyframes ttlHop{0%,100%{transform:translateY(0)}50%{transform:translateY(-9%)}}
 #ttlArt i{position:absolute;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,#fff 0 25%,#e6ffb0 45%,#b8f08c00 72%);animation:ttlOrb 4s ease-in-out infinite;animation-delay:calc(var(--d)*1s);left:calc(var(--x)*1%);bottom:calc(var(--y)*1%);transform:scale(var(--s))}
 @keyframes ttlOrb{0%{opacity:0;translate:0 10px}30%{opacity:1}100%{opacity:0;translate:0 -70px}}
 #ttlGround{position:absolute;right:0;bottom:0;width:62%;height:9%;background:radial-gradient(ellipse at 60% 100%,#5a3a2233 0%,#5a3a2200 70%);z-index:1;pointer-events:none}
 @media (max-width:820px),(max-height:460px){#intro.title .panel{width:58%;padding:14px 18px}#intro.title .panel>p:not(.hint){display:none}#intro.title details{margin-top:.8em}#ttlArt{height:min(92vh,56vw)}#ttlArt .walk{display:none}#intro.title .legend{max-height:28vh}}
 @media (orientation:portrait) and (max-width:700px){#intro.title{background:linear-gradient(180deg,#fff7e2f2 0%,#fff1d0d9 46%,#fff1d000 70%)}#intro.title .panel{width:100%;justify-content:flex-start;padding-top:9vh}#ttlArt{height:46vh;right:50%;transform:translateX(50%)}}
 body.on-title .hud,body.on-title #weaponBar,body.on-title #questCard,body.on-title #beamMeter,body.on-title #comboHUD,body.on-title #dayChip,body.on-title #windChip,body.on-title #tc,body.on-title #travelButton,body.on-title #adviceBubble,body.on-title #actionState,body.on-title #lookHint,body.on-title #reachBoost{visibility:hidden!important}
 @media (prefers-reduced-motion:reduce){#intro.title *{animation:none!important}}
 #intro.title .buttons button:disabled{background:#e8dcc0;color:#8a7a62;box-shadow:0 5px 0 #a8987a;border-color:#a8987a;animation:none;cursor:progress}
 #ttlLoad{margin-top:10px;font-size:12px;font-weight:700;color:#6f9a5a;display:flex;align-items:center;gap:8px}
 #ttlLoad::before{content:'';width:14px;height:14px;border-radius:50%;border:3px solid #9ccf8a;border-top-color:transparent;animation:ttlSpin .8s linear infinite}
 @keyframes ttlSpin{to{transform:rotate(360deg)}}

 body.on-title{background:linear-gradient(#a9d6ee 0%,#d9efd2 58%,#b9d99a 100%)}