*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:'Baloo 2',Arial,Helvetica,sans-serif;color:#16120e;background:#eee1c4}a{color:inherit}button{font:inherit;cursor:pointer}.hidden{display:none!important}
.intro{position:relative;min-height:100vh;min-height:100dvh;overflow:hidden;text-align:center;color:#fff}
.intro-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}

/* painted red splash title */
.splat-title{position:absolute;top:5%;left:50%;transform:translateX(-50%);z-index:2;line-height:.9;margin:0;width:100%}
.splat-title span{font-family:'Permanent Marker',cursive;font-weight:400;font-size:clamp(2rem,8.5vw,4.6rem);letter-spacing:1px;line-height:1.05;color:#c81c0f;display:inline-block;position:relative;transform:rotate(-2deg);text-shadow:3px 3px 0 #7c0f07,5px 5px 8px rgba(0,0,0,.55)}
.splat-title span::before,.splat-title span::after{content:"";position:absolute;background:#c81c0f;border-radius:50% 50% 55% 45%/60% 60% 40% 40%;box-shadow:2px 3px 0 #7c0f07}
.splat-title span::before{width:10px;height:22px;left:18%;bottom:-16px;transform:rotate(4deg);animation:drip 3.4s ease-in infinite}
.splat-title span::after{width:7px;height:15px;right:24%;bottom:-11px;transform:rotate(-6deg);animation:drip 4.2s ease-in .8s infinite}
@keyframes drip{0%{transform:translateY(0) rotate(2deg);opacity:1}85%{opacity:1}100%{transform:translateY(14px) rotate(2deg);opacity:0}}

/* invisible tap-zone over the door's moon cutout, text only */
.enter-text{position:absolute;left:32%;top:47%;width:36%;height:12%;z-index:2;background:none;border:0;padding:0;color:#f3c744;font-family:'Permanent Marker',cursive;font-weight:400;font-size:clamp(1.4rem,6vw,2.3rem);letter-spacing:3px;text-shadow:2px 2px 0 #000,-1px -1px 0 #000;cursor:pointer;transition:transform .2s}
.enter-text:hover,.enter-text:focus-visible{transform:scale(1.08)}
.enter-text.open{animation:doorFlash .55s ease forwards}
@keyframes doorFlash{0%{transform:scale(1);opacity:1}100%{transform:scale(1.4);opacity:0}}

.intro-foot{position:absolute;bottom:5%;left:50%;transform:translateX(-50%);z-index:2;margin:0;font-family:'Baloo 2',Arial,sans-serif;font-weight:800;font-size:clamp(1rem,4.5vw,1.5rem);text-shadow:2px 2px 0 #000,0 0 12px rgba(0,0,0,.6)}
@media(prefers-reduced-motion:reduce){.splat-title span::before,.splat-title span::after{animation:none!important}}
.portal{position:relative;min-height:100vh;min-height:100dvh;overflow:hidden}
.portal-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.stall{position:relative;z-index:2;max-width:1000px;min-height:100vh;min-height:100dvh;margin:0 auto;display:flex;flex-direction:column;justify-content:center;padding:20px}

.orbit{position:relative;width:min(94vw,560px);aspect-ratio:1/1;margin:0 auto}
.orbit-tile{position:absolute;transform:translate(-50%,-50%);width:clamp(82px,21vw,120px);text-align:center;text-decoration:none;color:#fff;display:flex;flex-direction:column;align-items:center;gap:4px}
.orbit-tile .ot-icon{position:relative;width:clamp(50px,13vw,70px);height:clamp(50px,13vw,70px);display:flex;align-items:center;justify-content:center;font-size:clamp(1.4rem,4.6vw,1.9rem);background:#8a5a2e;border:4px solid #111;border-radius:52% 48% 46% 54%/58% 62% 38% 42%;box-shadow:4px 4px #000;transition:transform .15s}
.orbit-tile .ot-icon::before,.orbit-tile .ot-icon::after{content:"";position:absolute;top:14%;width:13%;height:13%;background:#fff;border:2px solid #111;border-radius:50%}
.orbit-tile .ot-icon::before{left:26%}
.orbit-tile .ot-icon::after{right:26%}
.orbit-tile:hover .ot-icon,.orbit-tile:focus-visible .ot-icon{transform:scale(1.1) rotate(-4deg)}
.orbit-tile .ot-label{font-size:clamp(.7rem,2.2vw,.85rem);font-weight:900;text-shadow:2px 2px #000;line-height:1.15}
.pos-top{left:50%;top:8%}.pos-right{left:89.9%;top:37%}.pos-br{left:74.7%;top:84%}.pos-bl{left:25.3%;top:84%}.pos-left{left:10.1%;top:37%}
.orbit-hint{text-align:center;color:#fff;font-weight:900;text-shadow:2px 2px #000;margin:14px 0 0}footer{text-align:center;background:#111;color:#fff;padding:16px;font-size:.75rem;letter-spacing:1px}
.bar{background:#111;color:#fff;min-height:60px;padding:12px max(18px,calc((100% - 1000px)/2));display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:5px solid #d76819}.back{font-weight:1000;text-decoration:none}.games-page,.game-page{max-width:1000px;margin:auto;padding:28px 20px 50px}.games-page h1,.game-page h1{font-size:clamp(2rem,7vw,4rem);margin:0 0 5px}.lead{font-size:1.1rem}.game-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:25px}.game-card{background:#fff7df;border:5px solid #111;padding:14px;box-shadow:8px 8px #633b20;display:flex;flex-direction:column}.art{height:145px;border:4px solid #111;display:flex;align-items:center;justify-content:center;font-size:4rem}.beach{background:linear-gradient(#65b8dc 0 55%,#e7c66c 55%)}.office{background:linear-gradient(#b9c1c5,#e5ddd0)}.space{background:#11152d;color:#fff}.grass{background:linear-gradient(#8fd3e8 0 45%,#7bc36b 45%)}.game-card h2{margin:14px 0 5px}.game-card p{line-height:1.45;flex:1}.play{display:inline-block;background:#d76819;color:#000;border:4px solid #111;padding:11px 14px;text-decoration:none;font-weight:1000}.disabled{background:#aaa;cursor:default}.locked{opacity:.75}.hud{display:flex;justify-content:space-between;align-items:center;margin:15px 0;font-size:1.1rem;gap:14px}
.meter{flex:1;height:22px;border:4px solid #111;background:#fff;position:relative;overflow:hidden}
.meter-fill{height:100%;width:0%;background:linear-gradient(90deg,#e7c66c,#d76819 60%,#e0392b);transition:width .3s linear}
.stage{height:min(60vh,430px);min-height:280px;border:6px solid #111;position:relative;overflow:hidden}
.beach-stage{background:linear-gradient(#65b8dc 0 55%,#e7c66c 55%)}
.office-stage{background:repeating-linear-gradient(90deg,#ddd 0 48px,#c9c9c9 49px 50px)}
.city-stage{background:linear-gradient(#8fa3b8 0 55%,#5c5c5c 55%)}
.zero-stage{background:radial-gradient(circle,#242b59,#070912 70%);color:#fff}
.walk-stage{padding-bottom:6px}
.character{position:absolute;bottom:8px;font-size:2.6rem;transition:left .18s ease;transform:translateX(-50%);z-index:3}
.hotspot{position:absolute;bottom:10px;transform:translateX(-50%);border:4px solid #111;background:#fff7df;border-radius:10px;width:56px;height:56px;font-size:1.7rem;display:flex;align-items:center;justify-content:center;box-shadow:3px 3px #000;opacity:.55;transition:opacity .2s,transform .2s}
.hotspot.in-range{opacity:1;transform:translateX(-50%) scale(1.12);box-shadow:0 0 0 4px #f3c744,3px 3px #000}
.hotspot.used{opacity:.25;filter:grayscale(1)}
.hotspot.caught{background:#e0392b;opacity:1}
.controls{display:flex;justify-content:center;gap:8px;margin:12px}
.controls button,.restart{border:4px solid #111;background:#f3c744;padding:10px 18px;font-weight:1000}
.prompt{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:#111;color:#fff;border:4px solid #f3c744;padding:12px 16px;text-align:center;z-index:5;width:min(88%,320px)}
.prompt p{margin:0 0 10px;font-weight:900}
.prompt button{border:4px solid #fff;padding:8px 14px;font-weight:1000;margin:0 4px;background:#d76819;color:#000}
.prompt #promptNo{background:#eee}
.runner,.player,.ship{position:absolute;font-size:2.7rem}
.runner{left:20px;bottom:25px}.ship{left:25px;top:45%}
.floating{position:absolute;border:0;background:none;font-size:3.2rem;padding:4px;transition:left .15s,top .15s;user-select:none}
.bathroom{position:absolute;right:20px;top:35%;font-size:5rem}
.game-message{background:#111;color:#fff;padding:12px;text-align:center;font-weight:900;margin:10px 0}
.restart{display:block;margin:15px auto}
.game-page>p{font-size:1.1rem}
.dumping-stage{background:linear-gradient(#8fd3e8 0 40%,#7bc36b 40%);display:flex;align-items:flex-end;justify-content:space-evenly;padding:20px 10px}
.spot{border:4px solid #111;background:#5a9b4a;border-radius:50%;width:clamp(56px,15vw,86px);height:clamp(56px,15vw,86px);font-size:clamp(1.8rem,6vw,2.6rem);display:flex;align-items:center;justify-content:center;box-shadow:4px 4px #2f5a26;transition:transform .15s,box-shadow .15s}
.spot.watched{box-shadow:0 0 0 5px #e0392b,4px 4px #2f5a26}
.spot.relief{transform:scale(1.15)}
.spot.caught{background:#e0392b;box-shadow:4px 4px #7a1c12}

/* Where TF Do I Shit */
/* Where TF Do I Shit is now a WalkAndHide (city) scene, see .city-stage above */
@media(max-width:600px){.stall{padding:14px}}