@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');
:root{--ink:#f7e9d1;--muted:#aaa4bf;--pink:#ed9bbb;--line:#c4bacf;--box:#211e36}*{box-sizing:border-box}body{margin:0;background:#151320;color:var(--ink);font-family:'DotGothic16','Yu Gothic',monospace}header{max-width:1240px;margin:auto;padding:30px 26px 25px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:13px;align-items:center;color:var(--ink);text-decoration:none;font-size:27px;letter-spacing:3px}.brand small{display:block;font-family:monospace;font-size:10px;letter-spacing:3.6px;margin-top:7px;color:var(--muted)}.moon{font-size:48px;color:#f3d594;line-height:1}.hours{font-size:12px;color:#c3b8cc;letter-spacing:2px}.hours i{display:inline-block;width:6px;height:6px;background:#c5d3a6;margin-right:10px;box-shadow:0 0 12px #c5d3a655}main{max-width:1240px;margin:auto;padding:0 26px}.intro{display:flex;justify-content:space-between;padding:14px 0;color:var(--muted);font-size:11px;letter-spacing:2px;border-top:1px solid #3b3449}.game{position:relative;height:650px;overflow:hidden;background:linear-gradient(#25243f,#45405c 73%,#57445c);border:1px solid #65556c;box-shadow:0 14px 60px #0003}.game:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0 3px,#0000000b 3px 4px);z-index:8}.stars{position:absolute;width:3px;height:3px;left:7%;top:50px;background:#ded0c7;box-shadow:80px 29px #a29bb4,170px -8px #bdb4c3,290px 48px #d8bfd0,440px -12px #d4b9bd,510px 67px #9d94a7,665px 4px #d8bfd0,790px 35px #b5adc9,900px -13px #bdb4c3,1010px 75px #d8bfd0,360px 100px #aaa0b2,610px 109px #aaa0b2}.crescent{position:absolute;top:48px;left:42%;width:36px;height:36px;background:#f4d99f;clip-path:polygon(20% 0,40% 0,40% 20%,20% 20%,20% 60%,40% 60%,40% 80%,80% 80%,80% 60%,100% 60%,100% 80%,80% 80%,80% 100%,20% 100%,20% 80%,0 80%,0 20%,20% 20%)}.skyline{position:absolute;left:0;right:0;bottom:170px;height:260px;background:#29283e;clip-path:polygon(0 30%,6% 30%,6% 60%,12% 60%,12% 10%,20% 10%,20% 40%,30% 40%,30% 65%,40% 65%,40% 30%,47% 30%,47% 60%,57% 60%,57% 0,65% 0,65% 25%,76% 25%,76% 45%,85% 45%,85% 15%,93% 15%,93% 50%,100% 50%,100% 100%,0 100%)}.ground{position:absolute;bottom:0;width:100%;height:175px;background:repeating-linear-gradient(0deg,transparent 0 28px,#76607422 28px 30px),repeating-linear-gradient(90deg,#423647 0 50px,#493b4b 50px 52px);border-top:8px solid #6b5367}.path{position:absolute;bottom:0;left:14%;width:290px;height:175px;background:#80657355;transform:skewX(-24deg)}.shop{position:absolute;left:5%;bottom:183px;width:430px;height:310px;filter:drop-shadow(10px 12px 0 #19172655)}.chimney{position:absolute;top:-33px;left:65px;width:36px;height:55px;background:#736278;border-top:8px solid #a08c98}.roof{position:absolute;top:0;width:100%;height:118px;background:repeating-linear-gradient(0deg,transparent 0 14px,#342b4322 14px 18px),repeating-linear-gradient(90deg,#66516e 0 30px,#725b78 30px 34px);clip-path:polygon(9% 0,90% 0,90% 12%,94% 12%,94% 30%,97% 30%,97% 60%,100% 60%,100% 100%,0 100%,0 60%,3% 60%,3% 30%,6% 30%,6% 12%,9% 12%);border-bottom:10px solid #302639}.sign{position:absolute;top:32px;left:74px;right:74px;height:68px;background:#30283e;border:5px solid #b99b8e;text-align:center;padding:7px 0;font-size:24px;color:#ffe1a0;z-index:2;box-shadow:4px 4px 0 #221c30}.sign span{font-size:17px}.sign small{display:block;font:8px monospace;letter-spacing:2px;margin-top:3px;color:#d3b49e}.awning{position:absolute;top:111px;left:-7px;right:-7px;height:39px;background:repeating-linear-gradient(90deg,#bd7c94 0 37px,#e0b49e 37px 74px);border-top:7px solid #392d42;border-bottom:7px solid #5f4058;z-index:2;clip-path:polygon(3% 0,97% 0,100% 75%,100% 100%,0 100%,0 75%)}.building{position:absolute;top:138px;bottom:0;left:8px;right:8px;background:#977b85;border:8px solid #574354;border-bottom:15px solid #58404e;display:flex;gap:20px;justify-content:center;padding:15px 15px 0}.window{position:relative;width:100px;height:94px;border:7px solid #4b3549;background:#e4b773;box-shadow:inset 0 0 0 5px #c48c65,0 0 24px #f5bf6b22;display:flex;align-items:center;justify-content:space-evenly;color:#805473;font-size:25px}.window:before{content:'';position:absolute;left:45%;width:6px;height:100%;background:#705063}.shelf{position:absolute;bottom:19px;left:0;right:0;height:5px;background:#805667}.door{position:relative;width:82px;height:142px;background:#392e43;border:7px solid #664958;box-shadow:inset 0 0 0 4px #b99185}.door span{display:block;margin:16px 8px;background:#cdaa89;color:#4a374c;font:11px monospace;text-align:center;padding:6px 0;transform:rotate(-8deg)}.door b{position:absolute;right:8px;top:80px;width:6px;height:6px;background:#ecc181}.step{position:absolute;bottom:-15px;left:150px;width:130px;height:15px;background:#b79999;border-bottom:5px solid #6f5264}.plant{position:absolute;bottom:-12px;width:33px;height:39px;color:#83977c;font-size:49px;line-height:16px;border-bottom:19px solid #ad7a83;text-shadow:8px -10px #68836e}.plant-left{left:22px}.plant-right{right:19px}.counter{position:absolute;left:27%;bottom:88px;width:180px;height:218px;z-index:3}.counter img{position:absolute;bottom:48px;left:10px;width:160px;height:160px;object-fit:contain;image-rendering:pixelated}.keeper-label{position:absolute;top:-23px;left:0;right:0;text-align:center;font:9px monospace;letter-spacing:2px;color:#d9b9cd}.counter-top{position:absolute;bottom:54px;width:100%;height:16px;background:#c19391;border:4px solid #4b3349}.counter-front{position:absolute;bottom:0;width:100%;height:55px;background:repeating-linear-gradient(90deg,#785267 0 23px,#67465c 23px 27px);border:5px solid #4b3349;border-top:0;text-align:center}.counter-front span{color:#d4af9c;font-size:34px}.lantern{position:absolute;left:8%;bottom:130px;width:9px;height:120px;background:#211e30}.lantern:before{content:'';position:absolute;top:-15px;left:-13px;width:35px;height:12px;background:#241e30}.lantern span{position:absolute;top:0;left:-10px;width:28px;height:36px;background:#f4ca83;border:5px solid #443047;box-shadow:0 0 45px #f5c27c44}.interaction{position:absolute;left:49%;right:5%;top:148px;z-index:5}.pixel-box{position:relative;background:var(--box);border:3px solid var(--line);box-shadow:0 0 0 3px #282237,0 0 0 5px #68586e,7px 9px 0 #17142166;border-radius:3px}.dialog{padding:24px 23px 23px;min-height:120px}.name{position:absolute;top:-13px;left:15px;background:var(--box);padding:0 9px;color:var(--pink);font-size:13px;letter-spacing:2px}.dialog p{font-size:18px;line-height:1.9;margin:0;letter-spacing:1px}.dialog p span{padding-left:1em}.continue{position:absolute;right:15px;bottom:8px;color:#b5a6c2;font-size:10px;animation:blink 1.5s steps(2,end) infinite}.menu{margin:23px 0 0 43px;padding:10px}.menu a{display:flex;align-items:center;gap:11px;min-height:66px;padding:8px 10px;color:var(--ink);text-decoration:none;outline-offset:1px;border:1px solid transparent}.menu a.active{background:#443047;border-color:#89647c;color:#ffd2dd}.menu small{display:block;font:8px monospace;letter-spacing:1.5px;color:#9e91ab;margin-top:7px}.pointer{font-size:16px;color:#f3b8d0;visibility:hidden}.active .pointer{visibility:visible}.hint{display:flex;justify-content:flex-end;gap:15px;flex-wrap:wrap;color:#b0a0b8;font-size:9px;margin-top:19px}.scene-caption{position:absolute;bottom:22px;left:26px;right:26px;display:flex;justify-content:space-between;color:#d1b5c4;font-size:11px;letter-spacing:1px}.scene-caption b{margin-left:10px;color:#f2d4a3}footer{padding:23px 0 32px;display:flex;justify-content:space-between;color:#9b8da6;font-size:10px;letter-spacing:1px}footer b{margin:0 12px}dialog{background:#211e36;border:3px solid #c4bacf;color:var(--ink);padding:35px;max-width:460px;width:calc(100% - 36px);font-family:inherit;box-shadow:7px 7px 0 #85637c}dialog::backdrop{background:#111020cc}dialog small{color:var(--pink);letter-spacing:3px}dialog h2{font-size:23px}dialog p{font-size:14px;line-height:1.9}.notice{color:var(--muted);border-top:1px solid #65556c;padding-top:18px}button{font-family:inherit;cursor:pointer}.close{position:absolute;top:8px;right:12px;border:0;background:none;color:var(--ink);font-size:25px}.back{padding:10px 20px;background:#493249;border:1px solid #b88aa7;color:var(--ink);margin-top:12px}@keyframes blink{50%{opacity:0}}@media(min-width:1300px){.game{height:680px}.interaction{top:165px}}@media(max-width:950px) and (min-width:701px){.shop{left:0;transform:scale(.8);transform-origin:bottom left}.counter{left:20%}.interaction{left:46%;right:3%}.dialog{padding:22px 12px}.dialog p{font-size:15px}.menu{margin-left:15px}.menu a{font-size:14px}}@media(max-width:700px){header{padding:23px 20px}.brand{font-size:22px}.brand small{font-size:8px}.moon{font-size:38px}.hours{font-size:10px;letter-spacing:0}main{padding:0 14px}.intro{font-size:8px;letter-spacing:1px}.game{height:920px}.shop{left:50%;bottom:auto;top:129px;transform:translateX(-50%) scale(.78);transform-origin:top center}.crescent{left:auto;right:14%;top:32px}.skyline{top:130px;bottom:auto;height:280px}.ground{top:390px;bottom:0;height:auto}.path{top:390px;height:530px;left:10%}.counter{left:calc(50% + 23px);top:315px;bottom:auto;transform:scale(.85);transform-origin:top center}.keeper-label{display:none}.lantern{top:326px;left:13%;bottom:auto}.interaction{left:6%;right:6%;top:539px}.dialog{min-height:105px;padding:19px 15px}.dialog p{font-size:16px}.menu{margin:21px 0 0 19px;padding:6px}.menu a{min-height:55px;font-size:15px}.menu small{font-size:7px;margin-top:5px}.hint{font-size:8px;gap:9px}.scene-caption{bottom:15px;left:15px;right:15px;font-size:8px}footer{font-size:8px;gap:14px;line-height:1.8}footer span:last-child{text-align:right}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* Window light shares the shop coordinates, including its mobile scaling. */
.shop{z-index:1}
.window-light{position:absolute;top:310px;height:175px;width:165px;pointer-events:none;background:linear-gradient(180deg,#edbd792e,#edbd7917 65%,#edbd7900);clip-path:polygon(23% 0,77% 0,100% 100%,0 100%)}
.light-left{left:3px}
.light-right{right:3px}
@media(max-width:700px){.window-light{height:330px}}
/* A small red postbox beside the shop. */
.postbox{position:absolute;left:16px;bottom:-27px;width:46px;height:87px;z-index:3;filter:drop-shadow(5px 5px 0 #29223566)}
.postbox-cap{position:absolute;top:0;left:0;width:46px;height:10px;background:#d47886;border-top:4px solid #e39b9b;clip-path:polygon(9% 0,91% 0,91% 30%,100% 30%,100% 100%,0 100%,0 30%,9% 30%)}
.postbox-body{position:absolute;top:10px;left:4px;width:38px;height:47px;background:#b64e69;border-left:4px solid #ce6b7d;border-right:5px solid #873c59;border-bottom:4px solid #873c59;text-align:center}
.postbox-slot{position:absolute;top:5px;left:5px;width:20px;height:4px;background:#402b40;border-bottom:1px solid #df8b94}
.postbox-mark{position:absolute;top:13px;left:0;right:0;font:bold 19px monospace;color:#f7dfc4;line-height:20px}
.postbox-label{position:absolute;bottom:2px;left:0;right:0;font:5px monospace;letter-spacing:1px;color:#f7dfc4}
.postbox-pole{position:absolute;top:57px;left:17px;width:12px;height:24px;background:#8d4059;border-left:4px solid #b85c70}
.postbox-foot{position:absolute;bottom:0;left:9px;width:28px;height:6px;background:#573449;border-top:2px solid #975569}
.postbox{padding:0;border:0;background:none;transform:scale(1.3);transform-origin:center bottom;cursor:pointer}
.postbox:hover,.postbox:focus-visible{filter:drop-shadow(5px 5px 0 #29223566) drop-shadow(0 0 8px #f4ca8366)}
.postbox:focus-visible{outline:2px dashed #f4ca83;outline-offset:6px}
#contact{max-height:90vh;overflow:auto}#contact form label{display:block;font-size:13px;margin-top:16px;color:#e8d1df}
#contact input,#contact textarea{display:block;width:100%;margin-top:7px;padding:10px;background:#171423;border:1px solid #86718e;color:var(--ink);font:14px 'Yu Gothic',sans-serif;border-radius:0}#contact textarea{resize:vertical}#contact input:focus,#contact textarea:focus{outline:2px solid var(--pink);outline-offset:2px}#contact button:disabled{opacity:.55;cursor:not-allowed}
.postbox-tooltip{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);padding:7px 10px;background:var(--box);border:2px solid var(--line);box-shadow:3px 3px 0 #17142166;color:var(--ink);font-family:'DotGothic16','Yu Gothic',monospace;font-size:11px;line-height:1.5;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;z-index:10}
.postbox-tooltip::before{content:'';position:absolute;top:100%;left:calc(50% - 5px);border:5px solid transparent;border-top-color:var(--line)}
.postbox-tooltip::after{content:'';position:absolute;top:calc(100% - 2px);left:calc(50% - 3px);border:3px solid transparent;border-top-color:var(--box)}
.postbox:hover .postbox-tooltip,.postbox:focus-visible .postbox-tooltip{opacity:1;visibility:visible}
@media(max-width:700px){.game{height:980px}}

/* Raise the dialogue and the expanded menu together. */
.interaction{top:108px}
@media(min-width:1300px){.interaction{top:115px}}
@media(max-width:700px){.interaction{top:505px}}
/* Match the 86px window panes; stop the pools at the counter front. */
.window-light{width:190px;height:95px;clip-path:polygon(27% 0,73% 0,100% 100%,0 100%);background:linear-gradient(180deg,#edbd7938,#edbd7925 65%,#edbd790c)}
.light-left{left:0}.light-right{right:0}
@media(max-width:700px){.window-light{height:165px}}
/* Draw one connected silhouette behind the whole postbox. */
.postbox,.postbox:hover,.postbox:focus-visible{filter:none;isolation:isolate}
.postbox::before{content:'';position:absolute;inset:0;transform:translate(6px,6px);background:#29223580;z-index:-1;pointer-events:none;clip-path:polygon(9% 0,91% 0,91% 4%,100% 4%,100% 12%,91% 12%,91% 66%,63% 66%,63% 93%,80% 93%,80% 100%,20% 100%,20% 93%,37% 93%,37% 66%,9% 66%,9% 12%,0 12%,0 4%,9% 4%)}
.menu a:focus-visible{outline:none}
/* Plain panes, with no decorative symbols or shelf. */
.window::before{display:none}
/* The shadow lies on the ground, away from the window toward the viewer. */
.postbox::before{display:none}
.shop{filter:none}
.postbox-ground-shadow{position:absolute;left:-18px;top:335px;width:82px;height:66px;z-index:2;background:#211b2d70;pointer-events:none;clip-path:polygon(47% 0,87% 0,82% 17%,78% 31%,91% 39%,85% 88%,76% 100%,12% 100%,5% 88%,19% 39%,38% 31%,43% 17%)}
/* End the streetlamp at ground level, not inside the postbox shadow. */
.lantern{height:67px;bottom:183px}
@media(max-width:700px){.lantern{height:65px;bottom:auto}}
/* Keep the ground shadow the same color over lit and unlit paving. */
.postbox-ground-shadow{background:#332a3c}

/* Coarser scenery pixels; keep text and controls at their readable size. */
.crescent{width:40px;height:40px}
.stars{width:4px;height:4px}
.roof{background:repeating-linear-gradient(0deg,transparent 0 16px,#342b4322 16px 24px),repeating-linear-gradient(90deg,#66516e 0 32px,#725b78 32px 40px);border-bottom-width:8px}
.ground{background:repeating-linear-gradient(0deg,transparent 0 40px,#76607422 40px 44px),repeating-linear-gradient(90deg,#423647 0 64px,#493b4b 64px 68px)}
.building{border-left-width:8px;border-right-width:8px}
.window{border-width:8px;box-shadow:inset 0 0 0 8px #c48c65,0 0 24px #f5bf6b22}
.door{border-width:8px;box-shadow:inset 0 0 0 4px #b99185}
.awning{background:repeating-linear-gradient(90deg,#bd7c94 0 40px,#e0b49e 40px 80px);border-top-width:8px;border-bottom-width:8px}
.step{height:16px;border-bottom-width:8px}
.counter-top{height:16px;border-width:4px}
.counter-front{background:repeating-linear-gradient(90deg,#785267 0 24px,#67465c 24px 32px);border-width:4px;border-top:0}
.lantern{width:8px}
.lantern:before{height:16px;width:40px;left:-16px}
.lantern span{width:32px;height:40px;left:-12px;border-width:8px}
.game:after{background:repeating-linear-gradient(transparent 0 5px,#0000000b 5px 6px)}
/* Fit all six entrance options above the bottom caption. */
.menu a{min-height:60px}
@media(max-width:700px){.menu a{min-height:55px}.game{height:1040px}}
.reply-notice{font-size:12px;line-height:1.9;color:#c6bacb;margin:18px 0}.reply-notice a{color:#e8afcf;overflow-wrap:anywhere}

/* Move the shop dialogue and all menu choices upward together. */
.interaction{top:76px}
@media(min-width:1300px){.interaction{top:83px}}
@media(max-width:700px){.interaction{top:477px}}
.menu-game-label{margin-left:auto;font-size:10px;line-height:1.6;color:#b9a9c5;text-align:right;max-width:130px}
@media(max-width:950px){.menu-game-label{font-size:9px;max-width:96px}}
@media(max-width:380px){.menu a[href="game-tools.html"]{flex-wrap:wrap}.menu-game-label{max-width:none;margin-left:27px;text-align:left}}
.menu-game-label{font-size:12px;max-width:156px;visibility:hidden;color:#e0c2da}
.menu a.active .menu-game-label{visibility:visible}
@media(max-width:950px){.menu-game-label{font-size:11px;max-width:120px}}
@media(max-width:380px){.menu-game-label{max-width:none}}
/* Keep selected menu descriptions on one line. */
.menu-game-label{white-space:nowrap;max-width:none;flex-shrink:0}
@media(max-width:950px){.menu-game-label{max-width:none}}
@media(max-width:700px){.menu a{column-gap:7px}.menu-game-label{font-size:10px}}
@media(max-width:380px){.menu a[href="game-tools.html"]{flex-wrap:nowrap}.menu-game-label{margin-left:auto;text-align:right}}
.privacy-footer-link{display:inline-block;margin-left:18px}.privacy-footer-link a,.privacy-only-footer a,.privacy-form-note a{color:#d6b6d1;text-decoration:underline;text-underline-offset:3px}
.privacy-form-note{font-size:12px;line-height:1.8;margin:16px 0;color:#c6bacb}.privacy-only-footer{text-align:center;padding:24px;font-size:12px;color:#b6a9c0}
@media(max-width:640px){footer{flex-wrap:wrap;gap:12px}.privacy-footer-link{margin-left:0}}
/* Narrow layouts give the one-line selection hint its own space. */
@media(max-width:950px){
 .menu a{position:relative;min-height:76px;padding-bottom:28px}
 .menu-game-label{position:absolute;right:10px;bottom:7px;margin-left:0;font-size:11px;white-space:nowrap}
 .menu a>span:nth-child(2){min-width:0}
}
@media(max-width:700px){.menu a{min-height:72px}.game{height:1120px}}
@media(max-width:380px){.menu-game-label{font-size:10px}}
#contact{max-height:90dvh;overflow-y:auto}
@media(min-width:701px) and (max-width:950px){.game{height:840px}}