@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Noto+Sans+SC:wght@400;700;900&display=swap');:root{--v:#251252;--p:#5d3cc0;--g:#e5c951;--i:#181426;--f:'Press Start 2P',monospace}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#edf1f6;color:var(--i);font-family:'Noto Sans SC'}button{cursor:pointer}nav{height:52px;background:#f7f7fb;border-bottom:1px solid #d2d3dd;display:flex;align-items:center;justify-content:space-between;padding:0 max(18px,calc((100vw - 1060px)/2));font-size:13px}nav a{color:inherit;text-decoration:none;margin-left:24px}.station{max-width:1060px;margin:22px auto;background:var(--v);padding:8px 22px 0;border:3px solid #170b3c;box-shadow:0 9px 24px #17102f66}.bar,.bottom{height:52px;color:#bca9e8;display:flex;align-items:center;justify-content:space-between;font:10px var(--f)}.bar i{color:var(--g)}.stage{height:560px;border:3px solid #120d1c;position:relative;overflow:hidden;background:#242027}.office{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#29262b 0 52px,#101014 53px 56px),repeating-linear-gradient(90deg,transparent 0 108px,#101014 109px 114px)}.office:after{content:'';position:absolute;inset:46% 0 0;background:linear-gradient(#514a40,#252126)}.office b{position:absolute;z-index:1;top:29%;left:46%;font:90px Arial;color:#111;background:#eee;width:120px;height:120px;border-radius:50%;text-align:center;padding-top:10px}.office small{position:absolute;z-index:1;top:55%;left:38%;font:bold 48px Arial;color:#16151b}.scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#ffffff0b 0 1px,#00000022 2px 4px)}.title{position:absolute;top:75px;left:0;width:100%;text-align:center;color:#eef2f7}.title h1{margin:0;font:clamp(40px,6vw,75px) var(--f);text-shadow:4px 4px #1b1d28,8px 8px #4373b7}.title p{display:inline-block;background:#151421d9;color:var(--g);font:10px var(--f);padding:11px}.idle{position:absolute;z-index:2;bottom:-55px;left:85px;height:295px;mix-blend-mode:multiply;image-rendering:pixelated}.stage button{position:absolute;z-index:3;bottom:120px;left:50%;transform:translateX(-50%);border:0;background:#6d43bf;color:white;padding:17px 27px;font:11px var(--f);box-shadow:0 4px #26104e}.bottom button{background:#170d3b;color:#f2ecff;border:2px solid #40287d;padding:12px;font:9px var(--f)}#theme{position:absolute;left:50%;transform:translateX(-50%);border-radius:50%;padding:11px;color:var(--g)}.fortune,.book,.archive{max-width:920px;margin:auto;padding:75px 0}.fortune{text-align:center}.fortune>p{line-height:1.9;color:#4e495c}.fortune article{margin:30px auto 22px;width:560px;max-width:100%;min-height:280px;display:flex;align-items:center;text-align:left;padding:35px 40px 35px 175px;background:#3d2367;border:4px solid #141128;color:white;position:relative;overflow:hidden}.fortune article img{position:absolute;height:310px;left:-42px;bottom:-50px;mix-blend-mode:multiply}.fortune article b{font:10px var(--f);color:var(--g)}blockquote{font-size:20px;line-height:1.8;margin:18px 0}.fortune button,.archive>button{padding:10px 16px;border:1px solid #7c699a;background:white;color:#392363}.fortune #draw{background:var(--p);color:white}.book,.archive{border-top:1px solid #c9c4d4}.book h2,.archive h2{margin:0;font-size:30px}.book>p,.archive>p{margin:7px 0;color:#716b7c;font-size:13px}#quick{display:flex;gap:8px;margin:30px 0}#quick button{width:48px;height:36px;background:#fff;border:1px solid #c3bdd0;color:#412669;font:12px var(--f)}.chapter{border-top:1px solid #d2cddd;padding:40px 0}.chapter h3{font-size:17px;margin:0 0 20px}.chapter h3 i{font:21px var(--f);color:#7350b9;margin-right:25px;font-style:normal}.row{background:#fff;border-left:3px solid #b7a0e7;margin:7px 0;padding:15px 18px;display:flex;gap:10px;font-size:15px;line-height:1.8}.row span{flex:1}.row button{border:0;background:none;color:#7651b8}.item{display:block;background:#fff;border-left:3px solid #d5caea;margin:7px 0;padding:17px 21px;line-height:1.7}.item small{display:block;color:#867e91}.archive>button{display:block;margin:auto}.float{position:fixed;right:12px;bottom:10px;border:0;background:transparent;z-index:3}.float img{height:115px;mix-blend-mode:multiply;filter:drop-shadow(2px 2px #8b6bc7)}footer{text-align:center;background:#1f1047;color:#a997d5;padding:19px;font:10px var(--f)}.modal{display:none;position:fixed;inset:0;z-index:9;background:#0a0715dd;align-items:center;justify-content:center;padding:18px}.modal.on{display:flex}.modal>div{position:relative;width:min(1020px,100%);background:#22104e;border:3px solid #896fc0;padding:18px;color:#efeaff}.x{position:absolute;right:10px;top:3px;border:0;background:none;color:white;font-size:30px}.modal header{font:10px var(--f);display:flex;justify-content:space-between;padding-right:35px}.modal i{color:var(--g);font-size:20px}.modal h3{font:15px var(--f)}.modal>div>p{font-size:13px}.modal canvas{width:100%;display:block;border:3px solid #0d0822;image-rendering:pixelated}.modal em{position:absolute;left:50%;top:50%;transform:translate(-50%,-10%);padding:15px;background:#110a27e8;text-align:center;font-size:13px;font-style:normal;line-height:1.8}.modal em b{color:var(--g)}.modal em.off{opacity:0}.modal aside{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.modal aside button{height:34px;min-width:42px;background:#412175;color:white;border:1px solid #a992d0}.modal aside button:last-child{background:var(--g);color:var(--v)}body.dark{background:#141221;color:#e8e3f3}body.dark nav,body.dark .row,body.dark .item,body.dark .fortune button{background:#231e31;color:#e8e3f3}@media(max-width:700px){nav a{margin-left:10px;font-size:11px}.station{margin:0;border:0;padding:6px 10px}.stage{height:500px}.title h1{font-size:38px}.title p{font-size:8px;line-height:1.8}.idle{left:-15px;height:220px}.stage button{font-size:8px}.fortune,.book,.archive{padding:55px 18px}.fortune article{padding:32px 20px 32px 135px}.fortune article img{height:245px}.fortune article blockquote{font-size:16px}.chapter h3 i{display:block;margin-bottom:14px}.modal>div{padding:12px}.modal h3{font-size:10px}.modal em{font-size:11px}.float{transform:scale(.7);transform-origin:bottom right}}
@keyframes jackson-walk{0%,100%{left:8%;transform:scaleX(1)}48%{left:67%;transform:scaleX(1)}50%{left:67%;transform:scaleX(-1)}98%{left:8%;transform:scaleX(-1)}}@keyframes jackson-step{50%{margin-bottom:4px}}.station .idle{transform-origin:center bottom!important;animation:jackson-walk 9s linear infinite,jackson-step .38s steps(2,end) infinite!important;will-change:left,transform,opacity}.station.playing .idle{animation:none!important;opacity:0;transition:opacity 180ms ease-out;pointer-events:none}
@keyframes hero-patrol{0%,100%{left:8%;transform:scaleX(1)}47%{left:67%;transform:scaleX(1)}50%{left:67%;transform:scaleX(-1)}97%{left:8%;transform:scaleX(-1)}}@keyframes left-step{0%,100%{transform:rotate(11deg) translateY(2px)}50%{transform:rotate(-15deg) translateY(-2px)}}@keyframes right-step{0%,100%{transform:rotate(-15deg) translateY(-2px)}50%{transform:rotate(11deg) translateY(2px)}}.stage .walker{position:absolute;z-index:6;bottom:-55px;left:8%;height:295px;width:295px;animation:hero-patrol 9s linear infinite;transform-origin:center bottom;pointer-events:none}.walker .idle{position:absolute!important;left:0!important;bottom:0!important;height:295px!important;margin:0!important;animation:none!important;opacity:1!important}.walker .torso{clip-path:inset(0 0 25% 0)}.walker .leg{clip-path:inset(70% 0 0 0);transform-origin:48% 76%}.walker .leg-left{animation:left-step .42s steps(2,end) infinite!important}.walker .leg-right{animation:right-step .42s steps(2,end) infinite!important}.station.playing .walker{animation:none;opacity:0;transition:opacity 180ms ease-out}
.stage .walker .idle{animation:none!important;left:0!important;bottom:0!important}.stage .walker .leg-left{animation:left-step .42s steps(2,end) infinite!important}.stage .walker .leg-right{animation:right-step .42s steps(2,end) infinite!important}
.station .bar{display:none}.station{padding-top:0}
.fortune>button{min-width:132px}.gugu{position:absolute;width:74px;height:104px;background:url('assets/gugu-reference.jpg') left center/300% 100% no-repeat;filter:drop-shadow(1px 2px 2px #34245b44);transform:rotate(var(--tilt,-5deg));pointer-events:none}.fortune,.book,.archive{position:relative}.fortune .gugu{right:-32px;top:105px}.book .gugu{left:-48px;top:120px;--tilt:8deg}.archive .gugu{right:-41px;top:76px;--tilt:5deg}.gugu.small{width:54px;height:76px;left:8%;bottom:23px;--tilt:-9deg}@media(max-width:700px){.gugu{transform:scale(.72) rotate(var(--tilt,-5deg))}.fortune .gugu{right:-28px}.book .gugu{left:-28px}.archive .gugu{right:-26px}}
.gugu{background:url('assets/gugu-transparent.png') center/contain no-repeat!important;filter:drop-shadow(1px 2px 2px #34245b33)!important}.fortune .gugu:not(.small){right:-94px!important;top:165px!important}.book .gugu.small{left:-108px!important;top:330px!important;bottom:auto!important}.archive .gugu:not(.small){right:-102px!important;top:200px!important}@media(max-width:1080px){.gugu{display:none!important}}
.station,.fortune,.book,.archive{overflow:visible}.station .gugu,.fortune .gugu,.book .gugu,.archive .gugu{display:block!important;width:58px;height:82px;z-index:4}.station .gugu-station{right:18px;top:65px;left:auto;bottom:auto;--tilt:6deg}.fortune .gugu:not(.small){right:-58px!important;top:175px!important}.fortune .gugu-fortune{left:-58px;right:auto;top:82px;--tilt:-7deg}.book .gugu.small{left:-62px!important;top:350px!important}.book .gugu-book{right:-62px;left:auto;top:270px;--tilt:7deg}.archive .gugu:not(.small){right:-62px!important;top:185px!important}.archive .gugu-archive{left:-62px;right:auto;top:260px;--tilt:-6deg}@media(max-width:620px){.station .gugu,.fortune .gugu,.book .gugu,.archive .gugu{display:none!important}}
/* Guguga palette: slate-blue shells, ice-blue cards, soft beak-yellow accents. */
body{background:#e8eff3!important;color:#1d2d37!important}nav{background:#f2f6f7!important;border-color:#c4d1d8!important}.station{background:#354c5d!important;border-color:#1c2c38!important;box-shadow:0 9px 24px #1c2c3855!important}.bottom,.bar{color:#c3d5dd!important}.bottom button{background:#263b49!important;border-color:#668696!important}.stage button,.fortune #draw{background:#607f90!important;box-shadow:0 4px #334e5e!important}.title p{color:#e8c95b!important}.fortune>p,.book>p,.archive>p{color:#5a6b76!important}.fortune article{background:#f4f8f9!important;color:#1f3440!important;border-color:#5f8193!important;box-shadow:7px 7px 0 #b4c7d0!important}.fortune article b{color:#51758a!important}.fortune article small{color:#667a86!important}.fortune button,.archive>button{border-color:#9fb2bd!important;color:#385565!important;background:#f7fafb!important}.book,.archive,.chapter{border-color:#c5d3d9!important}.book h2,.archive h2{color:#233b49!important}#quick button{border-color:#9eb3bd!important;color:#385565!important}.row,.item{background:#f8fbfc!important;border-left-color:#8eabb9!important}.row button{color:#52768a!important}footer{background:#263e4d!important;color:#c2d6de!important}.modal>div{background:#314b5b!important;border-color:#8aa6b4!important}.modal aside button{background:#4d7082!important;border-color:#9bb4bf!important}.modal aside button:last-child{background:#e5c951!important;color:#294250!important}.modal i,.bar i,#theme{color:#e5c951!important}
.office{background:url('assets/station-background.jpg') center/cover no-repeat!important;filter:none!important}.office:after{display:none!important}.fortune article{padding:35px 175px 35px 40px!important}.fortune article img{left:auto!important;right:-42px!important;bottom:-50px!important;transform:none!important}.fortune article>div{position:relative;z-index:1}@media(max-width:700px){.fortune article{padding:32px 132px 32px 20px!important}.fortune article img{right:-54px!important;height:245px!important}}
.fortune>button{height:46px;min-width:158px!important;box-shadow:none!important;border:1px solid #9fb2bd!important}.fortune #draw{box-shadow:none!important}.fortune-actions{gap:0!important}.fortune #draw,.fortune #copy{border-radius:0!important}
.stage .start-button{position:absolute;z-index:3;bottom:120px;left:50%;transform:translateX(-50%);border:0;background:#607f90;color:white;padding:17px 27px;font:11px var(--f);box-shadow:0 4px #334e5e;text-decoration:none}
.fortune::before,.book::before,.archive::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-image:url('assets/avatar-watermark.png');background-repeat:no-repeat;background-size:760px 760px;opacity:.055}.fortune::before{background-position:calc(100% + 250px) 80px}.book::before{background-position:calc(0% - 290px) 300px}.archive::before{background-position:calc(100% + 270px) 180px}.fortune>*,.book>*,.archive>*{position:relative;z-index:1}@media(max-width:700px){.fortune::before,.book::before,.archive::before{background-size:560px 560px;opacity:.035}.fortune::before{background-position:calc(100% + 210px) 90px}.book::before{background-position:calc(0% - 240px) 320px}.archive::before{background-position:calc(100% + 220px) 160px}}
.fortune::before,.book::before,.archive::before{display:none!important}body::after{display:none!important}body{background-color:#e8eff3!important;background-image:url('assets/avatar-watermark.jpg')!important;background-repeat:repeat!important;background-size:720px 720px!important;background-position:0 0!important;background-blend-mode:soft-light!important}
/* The game occupies the station screen itself, not a page-blocking overlay. */
.stage>.modal{display:none;position:absolute;inset:0;z-index:20;padding:0;background:#314b5b!important;overflow:hidden}.stage>.modal.on{display:block}.station.playing .stage{height:560px}.station.playing .office,.station.playing .scan,.station.playing .title,.station.playing .start-button{display:none}.stage>.modal>div{position:relative;width:100%!important;height:100%;min-height:0;padding:0;background:#314b5b!important;border:0;color:#efeaff}.stage>.modal canvas{display:block;width:100%!important;height:100%!important;max-height:none;border:0}.stage>.modal header{position:absolute;z-index:2;top:16px;left:18px;right:62px;height:auto;padding:0;font-size:9px;text-shadow:1px 1px #182a35}.stage>.modal h3,.stage>.modal>div>p{display:none}.stage>.modal button{position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;font:9px var(--f);box-shadow:none!important}.stage>.modal .x{position:absolute!important;z-index:3;right:12px!important;top:10px!important;left:auto!important;bottom:auto!important;width:32px;height:32px;padding:0!important;border:0;background:#263e4d;color:white;font-size:23px;line-height:30px}.stage>.modal aside{position:absolute;z-index:2;right:16px;bottom:16px;display:flex;gap:8px;margin:0}.stage>.modal aside button{height:34px;min-width:42px;padding:0!important}.stage>.modal em{position:absolute;z-index:2}.stage>.modal #msg{max-width:240px}@media(max-width:700px){.station.playing .stage{height:500px}.stage>.modal header{top:10px;left:12px;font-size:7px}.stage>.modal .x{top:5px!important;right:6px!important}.stage>.modal aside{right:8px;bottom:8px;gap:4px}.stage>.modal aside button{height:28px;min-width:36px;font-size:7px}.stage>.modal #reset{min-width:72px}}
.recommendations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px}.recommendation{min-height:118px;display:flex;align-items:center;gap:14px;padding:18px;text-decoration:none;color:#233b49;background:#f8fbfc;border:1px solid #9fb2bd;box-shadow:4px 4px 0 #b4c7d0;transition:transform 180ms ease,box-shadow 180ms ease}.recommendation:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #7595a5}.recommendation i{font:16px var(--f);font-style:normal;color:#52768a}.recommendation span{min-width:0;flex:1}.recommendation b,.recommendation small{display:block}.recommendation b{font-size:16px}.recommendation small{margin-top:7px;color:#667a86;font-size:12px}.recommendation em{font:18px var(--f);font-style:normal;color:#e0bd43}@media(max-width:700px){.recommendations{grid-template-columns:1fr}.recommendation{min-height:96px}}
.walker-video{position:absolute;z-index:5;right:18px;bottom:14px;width:auto;height:150px;pointer-events:none;object-fit:contain;image-rendering:pixelated}.station.playing .walker-video{display:none}@media(max-width:700px){.walker-video{right:10px;bottom:10px;height:96px}}
.fortune>h2{margin:0;font-size:30px;color:#233b49;text-align:left}