/* Braver Together: the approved cover composition and quiet corner HUD. */
:root{--paper:#f0dfb9;--ink:#132d3b;--edge:#c7c2a0;--hud-left:max(24px,env(safe-area-inset-left));--hud-top:max(22px,env(safe-area-inset-top));--plaque:264px}
#menu{display:block;padding:0;background:#142d3b;overflow:hidden}
#menu:after{display:none}.title-art{position:absolute;inset:0}.title-art svg{inset:0;width:100%;height:100%;opacity:1}
.title-copy{position:absolute;left:50%;top:7%;transform:translateX(-50%);width:min(750px,90vw);max-width:none;margin:0;padding:0;text-align:center}
h1{font-size:clamp(76px,9.3vw,148px);font-weight:700;line-height:.83;letter-spacing:-.06em;margin:0;color:#f4e4bf;text-shadow:-2px -2px 0 #213742,2px -2px 0 #213742,-2px 2px 0 #213742,2px 2px 0 #213742,4px 7px 0 #122b36,0 12px 30px #142b3699}
h1 span{font-size:.91em;letter-spacing:-.035em;transform:rotate(-3deg);transform-origin:center}h1 em{font-style:normal;font-weight:700;color:inherit;transform:rotate(-3deg);transform-origin:center;margin-top:7px}
.tagline{font-size:clamp(16px,1.7vw,24px);font-style:normal;color:#f1dfbc;letter-spacing:.03em;margin:24px 0 0;text-shadow:0 2px 8px #102b38,0 1px 3px #102b38}
.title-ornament{margin-top:12px;color:#e3cf9f;font-size:24px;letter-spacing:14px;text-shadow:0 2px 5px #152c38}
.title-bottom{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(380px,88vw);text-align:center}
.title-actions{display:flex;flex-direction:column;gap:4px;max-width:none}.title-actions button{box-shadow:none;border:0;min-height:48px;padding:9px 20px;font-size:20px}
.title-actions #solo{background:#eed8a7;color:#233841;font-size:27px;min-height:60px;clip-path:polygon(3% 4%,25% 2%,51% 5%,76% 1%,96% 5%,98% 28%,100% 52%,97% 72%,98% 95%,75% 98%,50% 95%,24% 99%,3% 96%,2% 72%,0 47%,2% 25%);filter:drop-shadow(0 4px 0 #0d2535);text-shadow:0 1px #fff6d3}
.title-actions #solo:before,.title-actions #solo:after{content:'❧';display:inline-block;color:#94613d;font-size:20px;margin:0 15px}.title-actions #solo:hover{background:#ffe7b3}.title-actions #online{background:transparent;color:#f1dfb9;font-weight:400;letter-spacing:.02em}.title-actions #online:hover{background:#f0dfb90b}.title-actions #resume{font-size:16px;color:#fff1ca;border:1px solid #dfc99566;background:#18313be8}
.title-bottom:has(#resume:not([hidden])) #solo{font-size:20px;min-height:46px}.title-bottom:has(#resume:not([hidden])) #online{min-height:40px;font-size:17px}
#chapters{position:fixed;right:max(25px,env(safe-area-inset-right));bottom:max(21px,env(safe-area-inset-bottom));margin:0;max-width:270px;text-align:left}#chapters summary{color:#e2d3ae;font:14px Georgia;padding:12px;min-height:44px;text-shadow:0 2px 3px #142835;list-style:none}#chapters summary:before{content:'✧';margin-right:9px}#chapters[open]{padding:6px 10px;max-height:65dvh;background:#142f3bf5;border:1px solid #baae8855;border-radius:2px;box-shadow:0 12px 40px #07172299}.chapter-list{max-height:52dvh;overflow:auto}.chapter-list button{border-radius:1px;background:transparent;border-color:#c8c5a322;min-height:44px}
.controls{margin:0;font:10px system-ui;color:#9fafaa}.controls span{font-size:10px;color:#9fafaa}
.cover-falling{animation:cover-drift 9s ease-in-out infinite}.cover-party{animation:cover-bob 5s ease-in-out infinite;transform-origin:800px 650px}@keyframes cover-bob{50%{transform:translateY(-7px) rotate(.3deg)}}@keyframes cover-drift{50%{transform:translate(15px,12px) rotate(1deg)}}
/* Area name and all progress belong to one corner, leaving the party unobscured. */
#hud{height:56px;padding:0;background:none;pointer-events:none;z-index:5}.area-brand{position:absolute;left:var(--hud-left);top:var(--hud-top);display:flex;align-items:baseline;gap:12px;max-width:calc(100vw - 180px)}.brand{font-size:23px;line-height:1.1;max-width:none;padding:0;color:#f4e5c5;text-shadow:0 2px 6px #102735}.area-brand small{font:12px Georgia;white-space:nowrap;color:#d9cba9;font-variant-numeric:tabular-nums}
#hud .tools{position:absolute;right:max(20px,env(safe-area-inset-right));top:var(--hud-top);gap:6px}.tools button{border:0;background:#142c3866;min-width:44px;min-height:44px;border-radius:2px;color:#f0e2bf}.tools #menuButton{font:bold 25px Georgia;background:none;padding:5px}
#collectionHUD{position:fixed;left:var(--hud-left);top:calc(var(--hud-top) + 40px);transform:none;width:var(--plaque);padding:15px 17px 7px;border-radius:1px;background:#102733ed;box-shadow:0 5px 16px #0b202a33}
.collection-outline .frame-edge{fill:none;stroke:#a8b8ae99;stroke-width:1;stroke-dasharray:none;filter:none;opacity:1}.collection-outline .fill-line{stroke-width:1.8;opacity:calc(.45 + var(--collection-glow));filter:drop-shadow(0 0 3px #ffe6ab)}
.key-line{flex-direction:column;gap:3px}#keyInventory{gap:34px;margin:0}.key-token{width:32px;height:42px;opacity:.36;color:var(--key);filter:saturate(.5)}.key-token.collected{opacity:1;color:var(--key);filter:drop-shadow(0 0 7px var(--key))}.key-line small{font:17px Georgia;color:#e6d6b4;margin-top:0}
#collectionToggle{min-height:44px;gap:16px;border-top:1px solid #a8b5a744;border-radius:0;margin-top:8px;color:#e6d8b9;font:12px Georgia}#collectionToggle>span{gap:6px}#collectionToggle i{width:20px;height:21px}#collectionToggle>span:first-child i{color:#b3c397}#collectionToggle>span:nth-child(2) i{color:#e7a454}#collectionToggle>span:nth-child(3) i{color:#e5d6a5}.tally-chevron{font-size:10px;margin-left:-9px}
#candyTimer{position:static;transform:none;border:0;padding:0 0 3px;background:none;text-align:center;color:#efbe72;font:14px Georgia;min-height:20px}#candyTimer.urgent{color:#ffd498}
#collectionPanel{top:calc(var(--hud-top) + 204px);left:var(--hud-left);transform:none;width:var(--plaque);max-height:calc(100dvh - var(--hud-top) - 222px);padding:0;border:1px solid #a8b8ae99;border-radius:1px;background:#102733f5;box-shadow:0 10px 30px #091c2866;overflow:auto;color:#e9ddc0;scrollbar-width:thin}
.collection-heading{min-height:35px;padding:0 6px 0 12px;border-bottom:1px solid #b2bba333}.collection-heading span{display:none}.collection-heading strong{font:11px Georgia;color:#a9b7aa;margin:0}.collection-heading button{min-width:44px;min-height:44px;font-size:21px;border:0;border-radius:0}.collection-rows{display:flex;flex-direction:column;gap:0}.collection-row{min-height:57px;border:0;border-bottom:1px solid #b2bba333;border-radius:0;padding:10px 12px;gap:10px;background:transparent;font-size:14px}.collection-row i{width:25px;flex-basis:25px}.collection-row b{font:12px Georgia;color:#daceb0;white-space:nowrap}.collection-row em{display:none}.collection-row[aria-expanded=true]{background:#ede0b510;box-shadow:inset 2px 0 #ecd4a5}.collection-row.earned{background:#e7ce9310}.collection-row.earned b{color:#f6ca75}#icon-enemies{color:#b3c397}#icon-candy{color:#e7a454}#icon-keepsakes{color:#e5d6a5}
#collectionDetail{padding:13px 14px;margin:0;background:#e8d8b5;color:#223d45;border:0;border-radius:0;gap:9px}#detailIcon{display:none}#detailTitle{font:13px Georgia;color:#324f50}#detailText{font:13px/1.5 Georgia;color:#32464a;margin:5px 0 0}
#status{z-index:8;top:auto;bottom:max(69px,calc(env(safe-area-inset-bottom) + 60px));max-width:min(410px,88vw);background:#142d3be6;color:#e6d7b8;border-radius:2px}body.collections-open #chapterIntro{display:none}#chapterIntro{top:29%;z-index:3}#hint{background:#142d3bb3;color:#d5d5bd;font-size:12px;border-radius:2px}
@media(max-width:700px){:root{--hud-left:max(14px,env(safe-area-inset-left));--hud-top:max(14px,env(safe-area-inset-top));--plaque:232px}.area-brand{gap:8px;max-width:calc(100vw - 64px)}.brand{font-size:18px}.area-brand small{font-size:10px}#hud .tools{right:8px;top:44px}.tools button{font-size:11px;padding:7px}#collectionHUD{top:calc(var(--hud-top) + 33px);padding:11px 13px 5px}#keyInventory{gap:30px}.key-token{width:28px;height:37px}#collectionToggle{gap:12px;font-size:11px}#collectionPanel{top:calc(var(--hud-top) + 184px);max-height:calc(100dvh - var(--hud-top) - 204px)}.collection-row{font-size:13px;padding:9px 10px;gap:8px}.collection-row b{font-size:11px}#status{bottom:170px}.title-copy{top:15%;width:94vw}h1{font-size:clamp(62px,12.5vw,91px)}.tagline{font-size:16px;margin-top:20px}.title-ornament{margin-top:8px;font-size:19px}.title-bottom{bottom:68px;width:min(350px,88vw)}.title-actions #solo{font-size:23px;min-height:55px}.title-actions #solo:before,.title-actions #solo:after{margin:0 10px}.title-actions #online{font-size:18px}.controls{margin-top:0}#chapters{bottom:12px;right:14px}#chapters[open]{max-height:65dvh}.chapter-list{max-height:53dvh}.title-art svg{width:140%;left:-20%;height:100%;top:0}.cover-party{scale:.8;translate:0 40px;transform-origin:800px 650px}}
@media(max-height:580px){.title-copy{top:6%;width:75vw}h1{font-size:70px}.tagline{font-size:14px;margin-top:13px}.title-ornament{display:none}.title-bottom{bottom:8px;width:285px}.title-actions #solo{min-height:46px;font-size:21px}.title-actions #online{min-height:44px;font-size:16px}.title-actions #solo:before,.title-actions #solo:after{font-size:15px;margin:0 6px}.controls{display:none}#chapters{bottom:8px;right:10px}#collectionPanel{top:calc(var(--hud-top) + 184px);max-height:calc(100dvh - var(--hud-top) - 195px)}#collectionHUD{padding-top:8px}.key-token{height:32px}.collection-row{min-height:44px}}
@media(prefers-reduced-motion:reduce){.cover-party,.cover-falling{animation:none}.collection-outline path,.key-token{transition:none}}

/* The rescue stays in the world; one quiet line, no failure dialog. */
#rescueNote{position:fixed;bottom:max(36px,env(safe-area-inset-bottom));left:10%;width:80%;text-align:center;color:#f0e5ca;font:italic 20px Georgia,serif;text-shadow:0 2px 8px #142e38;pointer-events:none;z-index:16}
@media(max-width:600px){#rescueNote{font-size:17px}}

/* A timed sweet run becomes the primary task; other progress remains available. */
#candyRun{position:fixed;top:22px;left:50%;transform:translateX(-50%);width:320px;padding:14px 20px 16px;background:#183a45f5;color:#ffe8bd;border:2px solid #e9b675;box-shadow:0 0 30px #eac28322,0 8px 28px #10232e88;z-index:7;pointer-events:none;clip-path:polygon(2% 0,97% 2%,100% 93%,96% 100%,1% 97%,0 6%)}
.run-heading{font:12px Georgia;letter-spacing:.12em;display:flex;justify-content:space-between;gap:10px}.run-heading span{letter-spacing:0;white-space:nowrap;color:#e9b8ca}.run-numbers{display:flex;align-items:center;justify-content:space-between;margin:3px 0 7px}.run-numbers strong{font:48px/1 Georgia;font-variant-numeric:tabular-nums}.run-numbers b{font:22px Georgia}.run-pips{display:flex;gap:8px;margin-bottom:12px}.run-pips i{flex:1;height:7px;border:1px solid #f0cd96;transform:skew(-10deg);background:#ffffff0a}.run-pips .filled{background:#ffe1a1;box-shadow:0 0 6px #ffe1a166}.run-track{height:4px;background:#eacb8b22;overflow:hidden}.run-track i{display:block;width:100%;height:100%;background:#f8ce87;transform-origin:left}
#candyRun.urgent{border-color:#ffb789;color:#fff2ce;background:#633c45f5;box-shadow:0 0 35px #e9a36b33}.urgent .run-track i{background:#ffbb88}.urgent #runClock{animation:timer-heartbeat 1s ease-in-out infinite}@keyframes timer-heartbeat{50%{text-shadow:0 0 15px #ffcc8f;transform:scale(1.055)}}
.candy-running #candyTimer{display:none}.candy-running #chapterIntro,.collection-cheer #chapterIntro{display:none}.candy-running #hint{visibility:hidden}.candy-running #collectionHUD{opacity:.88}.candy-running .key-line{flex-direction:row;justify-content:space-between}.candy-running .key-token{width:22px;height:29px}.candy-running #keyInventory{gap:18px}
#pickupFeedback{position:fixed;bottom:90px;left:50%;translate:-50% 0;display:flex;align-items:center;gap:13px;width:max-content;max-width:calc(100vw - 28px);padding:13px 22px;background:#1b3e48f2;color:#f4e5be;border:1px solid #d9c99a88;box-shadow:0 5px 20px #0c253b55;pointer-events:none;z-index:8}
#pickupIcon{width:34px;height:34px;flex-shrink:0;color:#efc98d}#pickupIcon svg{width:100%;height:100%}#pickupTitle{display:block;font:22px Georgia}#pickupDetail{display:block;font:14px Georgia;margin-top:5px;color:#dddbc3}.cheer-stars{display:none}
#pickupFeedback.complete{background:#eee0bafa;border:2px solid #fff0c4;color:#294d4f;padding:18px 28px;box-shadow:0 0 40px #f4d29944,0 8px 25px #18303d77}.complete #pickupIcon{color:#9b6f38;width:44px;height:44px}.complete #pickupTitle{font-size:27px}.complete #pickupDetail{color:#536256}.complete .cheer-stars{display:block;position:absolute;top:-20px;left:50%;translate:-50% 0;color:#fff1c0;font-size:25px;letter-spacing:16px;white-space:nowrap}.retry #pickupIcon{color:#c9b7dc}
@media(max-width:1000px) and (min-width:701px){#candyRun{width:280px}.candy-running #collectionHUD{width:215px}.candy-running #collectionToggle{gap:7px;font-size:10px}.candy-running #collectionToggle i{width:15px}.candy-running #keyInventory{gap:16px}}
@media(max-width:700px){#candyRun{top:150px;width:min(330px,calc(100vw - 28px));padding:10px 17px 12px}.run-numbers strong{font-size:40px}.run-numbers b{font-size:20px}.run-pips{margin-bottom:8px}.run-heading{font-size:11px}#pickupFeedback{bottom:180px;padding:12px 16px}#pickupTitle{font-size:19px}#pickupDetail{font-size:12px}.complete #pickupTitle{font-size:23px}#pickupFeedback.complete{padding:16px 20px}.candy-running #collectionPanel{top:285px;max-height:calc(100dvh - 305px)}.candy-running .tools{max-width:110px;flex-wrap:wrap;justify-content:flex-end}}
@media(max-height:580px) and (min-width:701px){#candyRun{top:14px;padding:10px 16px}.run-numbers strong{font-size:36px}#pickupFeedback{bottom:48px}.run-pips{margin-bottom:6px}}
@media(prefers-reduced-motion:reduce){.urgent #runClock{animation:none}}

.candy-running #status,.collection-feedback #status{display:none}

@media(max-width:700px){#hud .tools{width:70px;max-width:70px;flex-direction:column;align-items:flex-end;flex-wrap:nowrap}.tools #soundToggle{min-width:44px}.tools button{max-width:70px}}

/* A living, peaceful cover. Typography and controls stay still and legible. */
.title-copy{isolation:isolate}#menu h1{color:#112e3b;-webkit-text-stroke:2px #f3e4bd;paint-order:stroke fill;text-shadow:0 3px 0 #f3e4bd,0 5px 8px #10273344}
.title-ornament{margin-top:24px;color:#17313d;text-shadow:0 1px 2px #f3e4bd}.title-actions #online{background:#142d3bed;color:#fff0cd;border:1px solid #d8c69d55}.title-actions #online:hover{background:#27434c}.controls{margin-top:7px}.controls span{display:inline-block;padding:4px 9px;background:#142d3bed;border-radius:2px;color:#e8dfc9;font-size:12px}#chapters summary{background:#142d3bed;color:#f2e4c4;border-radius:2px;text-shadow:none}
.cover-party{animation:cover-float 7s ease-in-out infinite;transform-origin:800px 650px}.cover-friend{animation:cover-friend-float 4.8s ease-in-out infinite;animation-delay:var(--delay)}
.cover-cloud-far{animation:cover-cloud-drift 36s ease-in-out infinite alternate}.cover-cloud-near{animation:cover-cloud-drift 29s ease-in-out -13s infinite alternate-reverse}.cover-mist{animation:cover-mist-drift 23s ease-in-out -8s infinite alternate}.cover-canopy{animation:cover-canopy-sway 10s ease-in-out -2s infinite;transform-origin:800px 0}.cover-lamplight{animation:cover-warm-light 5s ease-in-out infinite}.cover-wind-leaf{animation:cover-wind var(--wind-time) linear var(--wind-delay) infinite}.cover-mote{animation:cover-mote-float 9s ease-in-out var(--delay) infinite}
@keyframes cover-float{0%,100%{transform:translate(-8px,7px) rotate(-.4deg)}50%{transform:translate(12px,-18px) rotate(.5deg)}}
@keyframes cover-friend-float{0%,100%{transform:translateY(3px)}50%{transform:translateY(-4px)}}
@keyframes cover-cloud-drift{from{transform:translateX(-95px)}to{transform:translateX(125px)}}
@keyframes cover-mist-drift{from{transform:translate(-75px,7px);opacity:.06}to{transform:translate(90px,-10px);opacity:.13}}
@keyframes cover-canopy-sway{0%,100%{transform:rotate(-.35deg)}50%{transform:rotate(.45deg)}}
@keyframes cover-warm-light{0%,100%{opacity:.65}50%{opacity:1}}
@keyframes cover-wind{0%{opacity:0;transform:translate(-95px,-90px) rotate(-4deg)}12%{opacity:.85}85%{opacity:.85}100%{opacity:0;transform:translate(140px,270px) rotate(12deg)}}
@keyframes cover-mote-float{0%,100%{opacity:.12;transform:translate(0,7px)}50%{opacity:.55;transform:translate(12px,-20px)}}
body:not(.at-title) .title-art *,body.page-hidden .title-art *{animation-play-state:paused!important}
@media(max-width:700px){.title-copy:before{inset:-25px -8px -20px}.title-ornament{margin-top:20px}.controls span{font-size:11px}}
@media(prefers-reduced-motion:reduce){.title-art *{animation:none!important}}

/* Fixed press origin, invisible until held; paint never steals a native UI tap. */
#touch{position:fixed;inset:0;pointer-events:none;padding:0}
#stick{position:fixed;left:0;top:0;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .12s;background:#d9e7cf12;border:1px solid #e7e8c45c}
#stick.active{opacity:1}
#knob{pointer-events:none;background:#eff0d779;border:1px solid #ffffff86;box-shadow:0 0 18px #d8efdd28}

body.touch .controls span:after{content:'Touch and drag anywhere to move'}
body.touch #hint{bottom:24px}
/* The platform owns its corner controls; keep the paper HUD clear of both. */
.on-sleepypines{--hud-top:max(68px,var(--sp-menu-h,60px),var(--sp-home-h,60px))}
.on-sleepypines #hud .tools{top:var(--hud-top)}
.on-sleepypines #candyRun{top:68px}
.haunt-manual{position:absolute!important;bottom:0;right:-44px}
.on-sleepypines #runClock{font-size:clamp(20px,3vw,34px)}
@media(max-width:700px){.on-sleepypines #candyRun{top:205px}.on-sleepypines .candy-running #collectionPanel{top:350px;max-height:calc(100dvh - 370px)}.haunt-manual{right:0;bottom:-48px}}
#lobbyCount{font:12px Georgia;color:#e9d9b9;margin-left:8px;white-space:nowrap}
#lobbyHUD{position:fixed;inset:20px 20px auto;z-index:8;color:#eee3c9;pointer-events:none;text-shadow:0 2px 8px #102530}
#lobbyHUD>div{display:flex;flex-direction:column;gap:4px}#lobbyHUD strong{font:24px Georgia}#lobbyHUD small{font:13px Georgia}#lobbyHUD button{position:absolute;right:0;top:0;pointer-events:auto;min-height:44px}#lobbyHUD p{font:14px Georgia;margin-top:12px;max-width:290px;line-height:1.5}
#lobbyLabels{position:fixed;inset:0;pointer-events:none;z-index:6}.lobby-gate-label{position:absolute;transform:translate(-50%,-100%);padding:7px 12px;background:#163b43df;border:1px solid #b9d6b388;color:#f5e8be;font:15px Georgia;white-space:nowrap;border-radius:18px}
.on-sleepypines #lobbyHUD{top:76px}
.in-lobby #chapterIntro,.in-lobby #collectionPanel,.in-lobby #candyRun,.in-lobby #pickupFeedback,.in-lobby #rescueNote{display:none!important}
.on-sleepypines .run-numbers strong{font-size:30px}
