:root{color-scheme:dark;--pink:#ff00c7;--paper:#fff;--quiet:#868086;--hand:'Ink Free','Apple Chancery','Comic Sans MS',cursive}
*{box-sizing:border-box}
body{margin:0;background:#000;color:var(--paper);font-family:var(--hand);min-height:100svh;display:flex;flex-direction:column}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
a{color:inherit}
button:focus-visible,a:focus-visible{outline:2px solid var(--pink);outline-offset:7px}
.game-header{display:flex;align-items:center;gap:26px;min-height:94px;padding:20px clamp(20px,4.8vw,92px);border-bottom:1px solid #191219}
.portfolio-link{display:flex;align-items:center;font-weight:650;font-size:27px;text-decoration:none;letter-spacing:-1.5px;min-height:44px;min-width:44px}
.portfolio-link span{color:var(--pink);font-size:32px;font-weight:400;letter-spacing:0;margin-left:3px}
.game-title{font-family:var(--hand);font-size:clamp(24px,2vw,30px);line-height:1.8;letter-spacing:-.02em}
.game-header>.quiet-button{margin-left:auto}
.quiet-button{background:none;border:0;color:var(--quiet);min-width:44px;min-height:44px;padding:8px 6px;font-size:17px;white-space:nowrap}
.quiet-button:hover{color:var(--pink)}
.quiet-button:disabled{color:#383038;cursor:default}
#scene{width:min(1643px,86.6%);margin:0 auto;padding:clamp(42px,6.3vw,122px) 0 76px;flex:1;outline:none;display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - 184px)}
.scene-copy{font-family:var(--hand);font-size:clamp(15px,2.085vw,40px);line-height:1.5;letter-spacing:-.011em;overflow-wrap:anywhere;white-space:pre-line}
.scene-copy p{margin:0 0 1.5em}
.scene-copy p:last-child{margin-bottom:0}
.scene-copy.long-copy{font-size:clamp(14px,1.565vw,30px);line-height:1.9}
.scene-copy.very-long-copy{font-size:clamp(13px,1.305vw,25px);line-height:2}
.choices{display:flex;justify-content:space-evenly;align-items:flex-start;flex-wrap:wrap;gap:32px 60px;margin-top:clamp(65px,8vw,154px)}
.choice{border:0;background:none;color:var(--pink);font-family:var(--hand);font-size:clamp(27px,2.61vw,50px);line-height:1.5;letter-spacing:-.011em;min-height:52px;max-width:43%;padding:8px 0;text-align:left;white-space:pre-line;overflow-wrap:anywhere;position:relative}
.choice:hover{color:#ff76e1;text-shadow:0 0 15px #ff00c750}
.choice::before{content:'›';position:absolute;left:-23px;color:var(--pink);opacity:0;transition:opacity .12s}
.choice:hover::before,.choice:focus-visible::before{opacity:1}
.choices.single .choice{max-width:80%}
.choices.many .choice{max-width:28%;font-size:clamp(24px,2.4vw,46px)}
.map-scene .scene-copy{align-self:flex-start;max-width:40%}
.map-scene .choices{display:grid;grid-template-columns:1fr 1fr;width:100%;margin-top:55px;gap:48px 14%}
.map-scene .choice{max-width:none;min-height:160px;border:1px solid #32102b;padding:20px}
.map-scene .choice:last-child{grid-column:2;grid-row:1}
.map-scene .choice:nth-child(2){grid-column:2;grid-row:2}
.map-scene .choice:first-child{grid-column:1;grid-row:2}
.illustrations{margin-top:38px;display:flex;justify-content:center;gap:24px}
.illustrations:empty{display:none}
.illustration{margin:0;max-width:min(48%,550px)}
.illustration img{display:block;width:100%;height:auto;object-fit:contain}
.illustration.pending{width:min(48%,340px);aspect-ratio:1/1;border:1px dashed #382232;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:#877383;font-size:13px;line-height:1.8}
.ending-scene .scene-copy{font-size:clamp(21px,3.7vw,70px);line-height:1.7;color:#fff;text-align:center}
.ending-scene .choices{margin-top:64px}
.dead-end{color:#999;font-size:14px;line-height:1.8;margin-top:60px;border-top:1px solid #211321;padding-top:24px}
.dead-end[hidden]{display:none}
.game-footer{display:flex;align-items:center;gap:30px;padding:17px clamp(20px,4.8vw,92px);min-height:90px;border-top:1px solid #191219;color:var(--quiet);font-size:15px;line-height:1.8;flex-wrap:wrap}
.game-controls{display:flex;gap:28px}
#ending-count{color:#bb9caf;margin-left:auto;white-space:nowrap}
.save-status{font-size:14px;color:#555055}
dialog{background:#080408;color:#ded4dc;border:1px solid #562048;max-width:600px;width:calc(100% - 36px);padding:40px;font-size:21px;line-height:1.7}
dialog::backdrop{background:#000b}
dialog h2{font-family:var(--hand);font-size:30px;line-height:1.8;color:#fff}
dialog a{color:var(--pink)}
.dialog-close{position:absolute;right:10px;top:8px;font-size:28px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:700px){
 .game-header{min-height:82px;padding:15px 22px;gap:18px}.portfolio-link{font-size:23px}.portfolio-link span{font-size:26px}.game-title{font-size:20px;max-width:170px}.game-header>.quiet-button{font-size:16px}
 #scene{width:calc(100% - 44px);padding:48px 0 55px;min-height:calc(100svh - 198px);justify-content:flex-start}
 .scene-copy{font-size:23px;line-height:1.65;letter-spacing:0}.scene-copy.long-copy,.scene-copy.very-long-copy{font-size:22px;line-height:1.7}
 .choices{margin-top:48px;gap:24px;flex-direction:column;align-items:stretch}.choice,.choices.single .choice,.choices.many .choice{max-width:100%;width:100%;font-size:30px;min-height:52px;padding:10px 0}.choice::before{left:-16px}
 .map-scene .scene-copy{max-width:100%}.map-scene .choices{display:flex;gap:20px;margin-top:36px}.map-scene .choice{font-size:26px;min-height:92px;padding:20px}
 .illustrations{margin-top:24px}.illustration,.illustration.pending{max-width:100%;width:min(100%,330px)}
 .ending-scene .scene-copy{font-size:21px;line-height:1.8;text-align:left}
 .game-footer{gap:10px 25px;padding:14px 22px;min-height:116px}.game-controls{gap:22px}.save-status{width:100%;text-align:right}.quiet-button{font-size:16px}
 dialog{padding:32px 25px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Source scene coordinates stay together on desktop. Mobile keeps readable text. */
#scene.source-layout{width:min(1920px,100%);padding:0;display:block;position:relative;height:var(--artwork-height,calc(100svh - 184px));min-height:var(--artwork-height,calc(100svh - 184px));flex:0 0 auto;overflow:clip}
.scene-transition-old{pointer-events:none}
.source-layout #scene-artwork{position:absolute;left:0;top:0;width:var(--source-frame-width,1920px);height:var(--source-frame-height,1080px);transform:scale(var(--artwork-scale,1));transform-origin:top left}
.source-layout .scene-copy,.source-layout .illustrations,.source-layout .choices{position:absolute;inset:0;width:100%;height:100%;margin:0;display:block;max-width:none}
.source-layout .illustrations{z-index:0;pointer-events:none}
.source-layout .scene-copy{z-index:1;pointer-events:none;font-size:25px;line-height:2;text-align:left}
.source-layout .choices{z-index:2;pointer-events:none}
.source-layout .source-positioned{position:absolute;left:var(--source-x,0px);top:var(--source-y,0px);width:var(--source-width,auto);height:var(--source-height,auto);font-size:var(--source-font-size,inherit);line-height:var(--source-line-height,inherit);letter-spacing:var(--source-letter-spacing,inherit);filter:blur(var(--source-blur,0px));margin:0}
.source-layout .scene-copy>.source-positioned{max-width:calc(100% - var(--source-x,0px))}
.source-layout .choice,.source-layout.map-scene .choice{pointer-events:auto;min-height:calc(44px / var(--artwork-scale,1));min-width:calc(44px / var(--artwork-scale,1));max-width:none;padding:0;border:0;background:none;text-align:left;font-family:var(--hand);font-size:var(--source-font-size,50px);line-height:var(--source-line-height,1.5)}
.source-layout .illustration{max-width:none;aspect-ratio:1/1}
.source-layout .illustration img{width:100%;height:100%;object-fit:cover;max-width:none;position:absolute;left:0;top:0}
.source-layout .illustration.source-crop{overflow:hidden}
.source-layout .dead-end{position:absolute;left:7%;right:7%;bottom:24px;margin:0}
.source-layout .source-text-block{display:block;margin:0 0 var(--block-margin-bottom,0px)}
.source-layout .source-empty-block{min-height:var(--block-min-height,1em)}
.source-layout .source-layout-gap{font-size:0;line-height:0;white-space:normal}
@media(min-width:1101px){.source-layout .source-text-run,.source-layout .source-text-block{font-size:var(--run-font-size,inherit);line-height:var(--run-line-height,inherit);letter-spacing:var(--run-letter-spacing,inherit);font-family:var(--run-font-family,inherit)}}
@media(max-width:1100px){
 #scene.source-layout{width:calc(100% - 44px);padding:48px 0 55px;height:auto;min-height:calc(100svh - 198px);overflow:visible;flex:1}
 .source-layout #scene-artwork{position:relative;left:auto;top:auto;width:100%;height:auto;transform:none}
 .source-layout .scene-copy,.source-layout .choices{position:relative;inset:auto;height:auto}
 .source-layout .source-positioned{position:relative;left:auto;top:auto;width:auto;height:auto;font-size:inherit;line-height:inherit;letter-spacing:inherit;filter:none}
 .source-layout .scene-copy{font-size:23px;line-height:1.65;letter-spacing:0}
 .source-layout .scene-copy.long-copy,.source-layout .scene-copy.very-long-copy{font-size:22px;line-height:1.7}
 .source-layout .scene-copy p{margin:0 0 1.5em;text-align:left!important}
 .source-layout .scene-copy>.source-positioned{max-width:none}
 .source-layout .scene-copy p:last-child{margin-bottom:0}
 .source-layout .choices,.source-layout.map-scene .choices{display:flex;flex-direction:column;gap:24px;margin-top:48px;pointer-events:auto}
 .source-layout .choice,.source-layout.map-scene .choice{width:100%;min-height:52px;min-width:44px;max-width:none;font-size:30px;line-height:1.5;padding:10px 0}
 .source-layout .illustrations{position:absolute;inset:0;opacity:1}
 .source-layout .illustration.source-positioned{position:absolute;left:var(--source-x-ratio);top:var(--source-y-ratio);width:var(--source-width-ratio);height:auto;max-width:none}
 .source-layout.ending-scene .scene-copy{font-size:32px;line-height:1.7}
 .source-layout .dead-end{position:relative;left:auto;right:auto;bottom:auto;margin:36px 0 0}
}

/* Sam requested the existing option handwriting for every game label. */
@media(min-width:1101px){.source-layout .scene-copy>.source-positioned{font-size:max(24px,var(--source-font-size,24px))}.source-layout .source-text-run,.source-layout .source-text-block{font-size:max(24px,var(--run-font-size,24px))}}