:root{--acid:#dcff34;--hot:#ff3a9c;--aqua:#55f4ed;--ink:#18122e}
@font-face{font-family:Silkscreen;src:url("silkscreen-regular.ttf");font-display:swap}
@font-face{font-family:Silkscreen;src:url("silkscreen-bold.ttf");font-weight:700;font-display:swap}
@font-face{font-family:GrenzeGotisch;src:url("grenze-gotisch-variable.ttf");font-weight:100 900;font-display:swap}
@font-face{font-family:SpaceGrotesk;src:url("space-grotesk-variable.ttf");font-weight:300 700;font-display:swap}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#5044db}
body{color:#fff;font-family:Silkscreen,monospace;cursor:url("cursor-star.png") 24 18,auto;background:#071e83}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-image:url("twinkle-star.gif");background-size:118px 118px;opacity:.72;image-rendering:pixelated}
button{font:inherit}
.pan-shell{position:fixed;inset:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-color:#ff52ae #372d91;scrollbar-width:thin;cursor:grab}
.pan-shell.is-dragging{cursor:grabbing;scroll-behavior:auto}
.world{position:relative;width:min(100vw,1100px);min-height:100vh;margin:auto;padding:20px 0 72px;isolation:isolate}
.scene{position:relative;width:100%;aspect-ratio:2/3}
.building{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none}
.scene::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.07;background:repeating-linear-gradient(0deg,transparent 0 3px,#fff 4px);mix-blend-mode:screen}
.masthead{position:relative;z-index:30;width:min(780px,88%);margin:0 auto clamp(12px,2.2vw,28px);text-align:center;filter:drop-shadow(4px 5px 0 #27144d);pointer-events:none}
.masthead h1{margin:0;color:#f7edda;font:700 clamp(32px,5.6vw,64px)/.92 SpaceGrotesk,sans-serif;letter-spacing:.085em;text-shadow:2px 2px 0 #e9488f}
.masthead small{display:table;margin:0 auto 4px;padding:2px 7px;color:#f5eddb;background:#281a58e8;font-size:8px;letter-spacing:.1em;transform:rotate(-1deg)}
.portal,.curiosity{position:absolute;z-index:7;padding:0;border:0;background:transparent;cursor:url("cursor-star.png") 24 18,pointer}
.gif-charm{position:absolute;z-index:6;width:clamp(23px,5%,48px);height:auto;pointer-events:none;image-rendering:pixelated;filter:drop-shadow(0 0 5px #fff)}
.gif-charm--one{left:17%;top:32%}.gif-charm--two{right:13%;top:54%}.gif-charm--three{left:34%;top:70%;width:clamp(28px,6%,60px)}.gif-charm--four{right:13%;top:73%;width:clamp(25px,5.5%,54px)}.gif-charm--heart{left:73%;top:90%;width:clamp(30px,6.5%,62px)}
.rain-layer{position:absolute;inset:0;z-index:5;pointer-events:none;background:url("pixel-rain.gif") repeat;background-size:96px 144px;opacity:0;transition:opacity .25s}.scene.is-raining .rain-layer{opacity:.62}
.cloud-trigger{position:absolute;z-index:8;right:0;top:18%;width:14%;height:12%;border:0;background:transparent;cursor:pointer}.cloud-trigger:hover{filter:drop-shadow(0 0 10px #fff)}
.doorbell-trigger{position:absolute;z-index:9;left:37.7%;top:88.8%;width:5.4%;padding:0;border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 2px 3px #21143c)}.doorbell-trigger img{display:block;width:100%;height:auto}.doorbell-trigger:active img{transform:scale(.88)}
.road-motion{position:absolute;z-index:6;left:8%;bottom:.3%;width:84%;height:1.7%;object-fit:fill;image-rendering:pixelated;pointer-events:none;opacity:.72}
.portal span{position:absolute;left:50%;bottom:7%;min-width:max-content;padding:3px 8px;color:#fff7e7;background:#28173ed9;border:1px solid #f5eddb80;box-shadow:2px 2px 0 #e9488f99;opacity:1;translate:-50% 0;text-align:center;transition:.16s}
.portal:hover span,.portal:focus-visible span{scale:1.08;filter:brightness(1.15)}
.portal:hover,.portal:focus-visible{outline:0;filter:brightness(1.08) drop-shadow(0 0 8px #fff8)}
.portal:active{scale:.985}
.portal.is-entering{animation:portal-flash .18s steps(2) 2}
.portal--rate{left:20%;top:8%;width:66%;height:23%}
.portal--breakdown{left:22%;top:32%;width:64%;height:17%}
.portal--guides{left:22%;top:50%;width:64%;height:18%}
.portal--best{left:38%;top:69%;width:27%;height:13.5%}
.portal--giveaway{left:44%;top:84%;width:43%;height:14%}
.portal--rate span{bottom:4%;color:#fff7e7;font:700 clamp(16px,2.05vw,30px)/1 SpaceGrotesk,sans-serif;letter-spacing:.08em;text-shadow:none}
.portal--breakdown span{left:24%;top:34%;bottom:auto;width:29%;min-width:0;color:#fff7e7;font:700 clamp(9px,1.05vw,15px)/1.02 SpaceGrotesk,sans-serif;letter-spacing:.035em;text-shadow:none}
.portal--guides span{left:66%;top:55%;bottom:auto;width:32%;min-width:0;color:#fff7e7;font:700 clamp(14px,1.75vw,25px)/.92 SpaceGrotesk,sans-serif;letter-spacing:.07em;transform:rotate(-2deg);text-shadow:none}
.portal--best .billboard-title{top:8%;bottom:auto;width:100%;min-width:0;color:#fff7e7;font:700 clamp(8px,1.05vw,15px)/1 SpaceGrotesk,sans-serif;letter-spacing:.06em;text-shadow:none}
.portal--best .billboard-photo{position:absolute;left:15%;top:18%;width:70%;height:78%;min-width:0;padding:0;background:transparent;border:0;opacity:1;translate:0 0;pointer-events:none}
.portal--giveaway .giveaway-kicker{top:23%;bottom:auto;color:#fff7e7;font:700 clamp(16px,2.05vw,30px)/1 SpaceGrotesk,sans-serif;letter-spacing:.08em;text-shadow:none}
.portal--giveaway .giveaway-title{bottom:10%;color:#fff7e7;font:700 clamp(9px,1.05vw,15px)/1 SpaceGrotesk,sans-serif;letter-spacing:.045em;text-shadow:none}
.curiosity--chimes{left:9%;top:35%;width:11%;height:11%}
.curiosity--cat{left:8%;top:17%;width:13%;height:10%;border-radius:50%}
.curiosity.is-playing{animation:rattle .16s linear 3;filter:drop-shadow(0 0 14px #fff)}
.world-ticker{width:100%;margin-top:18px;overflow:hidden;color:#f5eddb;background:#21143c;border-block:2px solid #e9488f;font:700 clamp(8px,1vw,12px)/1.2 SpaceGrotesk,sans-serif;letter-spacing:.1em;white-space:nowrap}
.ticker-track{display:flex;width:max-content;animation:ticker 24s linear infinite}.ticker-track span{display:block;padding:10px 4vw}
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:18px;background:#281442a8;backdrop-filter:blur(3px)}.modal[hidden]{display:none}
.window{width:min(560px,94vw);color:#20122e;background:#dfdbe3;border:3px outset #fff;box-shadow:13px 16px 0 #351553a0;transform:rotate(-1deg)}
.window__bar{display:flex;justify-content:space-between;align-items:center;padding:4px 5px 4px 8px;color:#fff;background:linear-gradient(90deg,#ec3695,#684be6);font-size:11px}
.close{width:27px;height:24px;padding:0;border:2px outset #fff;background:#f3d9f0;font:bold 19px/15px Arial}.window__content{min-height:270px;padding:20px;background:#fff8dc}
.window__content h2{margin:0 0 13px;color:#301743;font:700 clamp(36px,9vw,68px)/.82 GrenzeGotisch,serif;text-transform:uppercase}
.window__content p{font:400 12px/1.55 Silkscreen,monospace}.stamp{display:inline-block;margin-top:13px;padding:7px 10px;color:#c40052;border:4px double #c40052;font-weight:700;transform:rotate(-4deg)}
.window__foot{padding:4px 7px;border-top:2px groove #fff;font-size:8px}.noscript{position:fixed;z-index:99;inset:auto 10px 10px;padding:8px;color:#111;background:#ff0}
@keyframes rattle{25%{translate:2px -1px}75%{translate:-2px 1px}}@keyframes ticker{to{translate:-50% 0}}@keyframes portal-flash{50%{filter:brightness(1.7) drop-shadow(0 0 20px #fff)}}
@media(max-width:700px){.world{width:100vw;min-height:0;margin:0;padding:18px 0 78px}.masthead{width:94vw;margin-bottom:18px}.masthead h1{font-size:clamp(27px,8.2vw,34px)}.masthead small{font-size:7px}.portal span{opacity:.98;translate:-50% 0}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
