@font-face{font-family:Bull;src:url('./intro-assets/title.ttf') format('truetype');font-display:swap}
:root{--paper:#fff8e7;--ink:#171b13;--green:#91f52b;--forest:#125021}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);font-family:system-ui,'Microsoft YaHei',sans-serif}
[hidden]{display:none!important}button,a{ -webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:4px solid #125021;outline-offset:5px}button:disabled{cursor:default}
#stage{position:fixed;inset:0;background:var(--forest)}#canvas{display:block;width:100%;height:100%;outline:none;touch-action:none}
#loading{position:fixed;inset:0;z-index:3;overflow:hidden;background:var(--paper);isolation:isolate;transition:opacity .4s ease,transform .4s ease}
#loading.leaving{opacity:0;transform:scale(1.025);pointer-events:none}
.intro-art{position:absolute;inset:-2%;z-index:-3;background:#e8bc7e url('./intro-assets/starting-gate.png') center/cover no-repeat;transform-origin:72% 55%;transform:scale(1.035) translateX(1%);transition:transform 3s cubic-bezier(.2,.65,.25,1)}
[data-chapter="1"] .intro-art{transform:scale(1.085) translateX(-1%)}[data-chapter="2"] .intro-art{transform:scale(1.015)}
.intro-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#fff0cbdc 0%,#fff0cb82 29%,transparent 55%),linear-gradient(0deg,#fff0cbee 0%,#fff0cb65 13%,transparent 28%)}
.track-dust{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:hidden}.track-dust i{position:absolute;left:66%;top:78%;width:8px;height:8px;background:#ffe3a8;border-radius:50%;opacity:0;animation:dust 5s ease-out infinite}.track-dust i:nth-child(2){left:83%;top:74%;animation-delay:.7s;width:5px;height:5px}.track-dust i:nth-child(3){left:56%;top:83%;animation-delay:1.5s}.track-dust i:nth-child(4){left:91%;top:79%;animation-delay:2.4s}.track-dust i:nth-child(5){left:73%;top:85%;animation-delay:3.2s;width:4px;height:4px}.track-dust i:nth-child(6){left:62%;top:70%;animation-delay:4.1s;width:5px;height:5px}
@keyframes dust{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:.8}100%{opacity:0;transform:translate(-130px,-90px) scale(1.3)}}
.intro-header{position:absolute;top:4.2%;left:4.6%;right:4.6%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand-chip{font:24px Bull,sans-serif;letter-spacing:.03em}.brand-chip small{display:block;font:10px system-ui,sans-serif;letter-spacing:.21em;margin-top:5px}
.intro-options{display:flex;gap:10px}.intro-options button{border:2px solid var(--ink);border-radius:6px;background:#fff8e7eb;color:var(--ink);padding:9px 16px;font-size:13px;font-weight:700}.intro-options button:hover{background:#fff}
.intro-copy{position:absolute;left:7%;top:18%;width:48%;max-width:730px}
.intro-eyebrow{display:inline-block;background:#ffdc39;border:2px solid var(--ink);padding:7px 15px;font-size:13px;font-weight:800;letter-spacing:.12em;transform:rotate(-3deg);margin:0 0 16px;box-shadow:3px 3px 0 var(--ink)}
.intro-title{font:clamp(74px,10.5vw,174px)/.91 Bull,sans-serif;letter-spacing:-.055em;color:var(--forest);margin:0 0 22px;filter:drop-shadow(3px 4px 0 #fff8e7)}
.intro-title>span{display:block;width:max-content;animation:title-in .7s cubic-bezier(.16,1,.3,1) both;transform:rotate(-5deg)}
.intro-title>span+span{margin:8px 0 0 14%;color:var(--ink);animation-delay:.18s;transform:rotate(-5deg)}
.intro-title i{color:var(--green);font-style:normal;-webkit-text-stroke:2px var(--ink)}
.story{margin-top:12px;max-width:480px}.story-number{font-size:11px;font-weight:800;letter-spacing:.15em;margin:0 0 5px;color:#345735}.story h2{font:clamp(26px,3.4vw,52px)/1.2 Bull,sans-serif;margin:0 0 8px}.story>p:last-child{font-size:clamp(13px,1.25vw,19px);line-height:1.5;margin:0;max-width:90%}
.story-steps{display:flex;gap:14px;margin-top:20px;font-size:11px;font-weight:700}.story-steps span{border-bottom:3px solid #8e957d;padding:0 0 6px;color:#48523b}
[data-chapter="0"] .story-steps span:nth-child(1),[data-chapter="1"] .story-steps span:nth-child(2),[data-chapter="2"] .story-steps span:nth-child(3){border-color:#125021;color:#125021}
.comic-stamp{position:absolute;right:35%;top:14%;background:#ffdd39;border:3px solid var(--ink);padding:16px 22px;font:clamp(20px,2.6vw,42px) Bull,sans-serif;box-shadow:5px 6px 0 var(--ink);transform:rotate(9deg);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.comic-stamp:after{content:'';position:absolute;width:20px;height:20px;bottom:-13px;left:25px;background:#ffdd39;border-bottom:3px solid var(--ink);border-right:3px solid var(--ink);transform:skewY(-25deg)}
[data-chapter="1"] .comic-stamp{transform:translate(-20px,25px) rotate(-8deg)}[data-chapter="2"] .comic-stamp{transform:translate(15px,0) rotate(5deg);background:var(--green)}[data-chapter="2"] .comic-stamp:after{background:var(--green)}
.speed-lines{position:absolute;right:2%;top:53%;width:27%;height:24%;pointer-events:none;transform:rotate(-15deg)}.speed-lines i{display:block;height:3px;background:#fff8e7;margin:18px 0;transform-origin:right;animation:rush 1.5s ease-out infinite;opacity:0}.speed-lines i:nth-child(2){width:64%;animation-delay:.2s}.speed-lines i:nth-child(3){width:83%;animation-delay:.35s}
.intro-footer{position:absolute;left:4.6%;right:4.6%;bottom:4%;display:flex;align-items:center;gap:34px;border-top:2px solid var(--ink);padding-top:18px}.load-info{flex:1;min-width:0}.load-caption{display:flex;justify-content:space-between;align-items:baseline;gap:20px;font-size:14px}.load-caption strong{font-weight:650}.load-caption>span{white-space:nowrap;font-size:12px;font-variant-numeric:tabular-nums}
.track{height:12px;background:#dfd3b4;border:2px solid var(--ink);border-radius:20px;overflow:hidden;margin-top:10px}#progress{height:100%;width:100%;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .2s linear}
#load-hint{font-size:11px;color:#4a503e;margin:9px 0 0;line-height:1.5}.load-label{font:20px/1.4 Bull,sans-serif;min-width:180px;padding-left:20px;border-left:2px solid #b1b498}
.primary{display:flex;align-items:center;gap:26px;justify-content:space-between;min-width:195px;border:3px solid var(--ink);border-radius:8px;box-shadow:0 5px 0 var(--forest);padding:16px 24px;color:var(--ink);background:var(--green);font:24px Bull,sans-serif;text-decoration:none}.primary:hover{background:#b0ff65}.primary:active{transform:translateY(3px);box-shadow:0 2px 0 var(--forest)}
#rotate{display:none;position:fixed;inset:0;z-index:4;background:var(--paper);place-content:center;text-align:center;padding:28px}#rotate strong{font:36px Bull,sans-serif;color:var(--forest)}#rotate button{padding:12px;border:2px solid var(--ink);background:var(--green);border-radius:6px}
.settled .speed-lines,.reduced .speed-lines,.settled .track-dust,.reduced .track-dust{display:none}.reduced *{animation:none!important;transition:none!important}.reduced .intro-art{transform:none}
@keyframes title-in{from{opacity:0;transform:translateX(-70px) rotate(-12deg) scale(.8)}to{opacity:1;transform:translateX(0) rotate(-5deg) scale(1)}}
@keyframes rush{0%{transform:translateX(-30%) scaleX(.1);opacity:0}25%{opacity:.8}100%{transform:translateX(35%) scaleX(1);opacity:0}}
@media(max-height:700px) and (min-width:701px){.intro-copy{top:17%}.intro-title{font-size:clamp(70px,15vh,120px);margin-bottom:14px}.intro-eyebrow{margin-bottom:12px;padding:5px 12px}.story h2{font-size:30px}.story-steps{margin-top:12px}.intro-footer{bottom:3%;padding-top:12px}.intro-header{top:4%}.comic-stamp{top:24%}}
@media(max-height:460px) and (min-width:701px){.intro-title{font-size:65px}.intro-copy{top:18%}.intro-eyebrow{display:none}.story{margin-top:0}.story h2{font-size:24px}.story-number,.story-steps,#load-hint{display:none}.intro-header{top:3%}.brand-chip{font-size:18px}.intro-options button{padding:6px 12px}.intro-footer{bottom:4%;padding-top:8px}.primary{padding:10px 18px;font-size:20px}.load-label{font-size:16px}.comic-stamp{padding:12px}}
@media(max-width:700px) and (orientation:portrait){.intro-art{background-position:61% center;opacity:.7}.intro-shade{background:linear-gradient(90deg,#fff8e7ef,transparent),linear-gradient(0deg,#fff8e7,transparent 55%)}.intro-header{top:3%;left:6%;right:6%}.brand-chip{font-size:19px}.brand-chip small{font-size:8px}.intro-options{gap:6px}.intro-options button{font-size:11px;padding:8px}.intro-copy{left:8%;top:19%;width:88%}.intro-title{font-size:clamp(88px,24vw,145px)}.intro-title>span+span{margin-left:10%}.story h2{font-size:34px}.story>p:last-child{font-size:14px}.comic-stamp{right:8%;top:49%;font-size:20px;padding:13px;z-index:-1}.intro-footer{left:7%;right:7%;bottom:4%;flex-wrap:wrap;gap:14px}.load-info{flex-basis:100%}.load-label{display:none}.primary{width:100%;font-size:22px;padding:12px 18px}.load-caption{font-size:12px}.story-steps{margin-top:14px}}
@media(prefers-reduced-motion:reduce){#loading *{animation:none!important;transition:none!important}.speed-lines,.track-dust{display:none}#loading{transition:none}.intro-art{transform:none!important}}
@media(orientation:portrait) and (max-width:700px){body.game-ready #rotate{display:grid}}
/* Community controls stay outside gameplay and respect phone safe areas. */
.brand-chip{display:flex;align-items:center;gap:10px}.brand-chip img{border-radius:50%;object-fit:cover}
#social-links{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:5;display:flex;gap:10px}
#social-links a{display:grid;place-items:center;width:46px;height:46px;background:var(--paper);border:2px solid var(--ink);border-radius:12px;box-shadow:0 3px 0 var(--forest)}
#social-links a:hover{background:var(--green)}
body:not(.game-ready) #social-links{bottom:auto;top:90px}
body.game-ready #social-links{display:none}body.game-ready[data-screen="home"] #social-links{display:flex;bottom:auto;top:max(76px,env(safe-area-inset-top))}
#stage{inset:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.intro-header{top:max(18px,env(safe-area-inset-top))}.intro-footer{bottom:max(18px,env(safe-area-inset-bottom))}
@media(max-height:460px) and (orientation:landscape){.brand-chip img{width:32px;height:32px}.intro-options button{min-height:40px}.story>p:last-child{max-width:95%;font-size:12px}.story h2{font-size:21px}.intro-title{font-size:54px;margin-bottom:8px}.intro-footer{bottom:max(8px,env(safe-area-inset-bottom))}.load-label{display:none}#social-links{gap:6px}body:not(.game-ready) #social-links{top:66px}}
@media(max-width:440px) and (orientation:portrait){.intro-header{left:5%;right:5%;align-items:flex-start}.brand-chip{font-size:16px;gap:6px}.brand-chip img{width:36px;height:36px}.intro-options{flex-direction:column}.intro-options button{min-height:40px}.intro-copy{top:19%}.intro-title{font-size:clamp(76px,23vw,101px)}.story h2{font-size:28px}.story-steps{margin-top:8px}.intro-footer{gap:10px}.comic-stamp{display:none}body:not(.game-ready) #social-links{top:116px}.primary{min-height:48px}}
/* Portrait home is laid out by Godot at the actual phone aspect ratio. */
@media(orientation:portrait) and (max-width:700px){body.game-ready[data-screen="home"] #rotate{display:none}body.game-ready[data-screen="home"] #social-links{top:auto;bottom:max(12px,env(safe-area-inset-bottom))}body.game-ready[data-screen="home"] #stage{inset:0}}
#mobile-fullscreen{display:none;position:fixed;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));z-index:6;border:2px solid var(--ink);border-radius:10px;background:var(--paper);padding:10px 14px;min-height:44px}
@media(pointer:coarse){body.game-ready[data-screen="home"] #mobile-fullscreen{display:block}}
:fullscreen #mobile-fullscreen{display:none!important}
#fullscreen-status{position:fixed;z-index:10;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(90vw,480px);padding:12px 16px;border:2px solid #171b13;border-radius:10px;background:#fff8e7;color:#171b13;font-size:14px;text-align:center;pointer-events:none}