*{box-sizing:border-box}
:root{color-scheme:dark}
[hidden]{display:none!important}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{background:#10061d url('assets/space.webp') center/cover;--crush:1;--saturation:1.3;--art-hue:0deg}
button{border:0;padding:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:3px dashed #c3ff00;outline-offset:-3px}
.graphic{display:block;background-repeat:no-repeat;margin:0}
.word{background-image:url('assets/interface.webp');background-size:300% 400%;aspect-ratio:2}
.logo{background-position:0 0}.shuffle{background-position:0 66.666667%}.close{background-position:100% 66.666667%}
.object{background-image:url('assets/objects.webp');background-size:200% 200%;aspect-ratio:1}
.face,.cat,.idol{background-position:0 0}.computer,.mouse,.cathedral{background-position:100% 0}
.dolphin,.moon,.angler{background-position:0 100%}.eye,.hand,.eclipse{background-position:100% 100%}
.cat,.mouse,.moon,.hand{background-image:url('assets/cursed.webp')}
.idol,.cathedral,.angler,.eclipse{background-image:url('assets/rare.webp')}
.phone,.smiley,.disc,.bust,.snail,.frog,.flower,.floppy{background-image:url('assets/cursed-pool.webp');background-size:300% 300%}
.fish{background-image:url('assets/fish.webp');background-size:100% 100%;background-position:center}.phone{background-position:50% 0}.smiley{background-position:100% 0}
.becel{background-image:url('assets/becel-dog-4.webp');background-size:100% 100%;background-position:center}
.disc{background-position:0 50%}.bust{background-position:50% 50%}.snail{background-position:100% 50%}
.frog{background-position:0 100%}.flower{background-position:50% 100%}.floppy{background-position:100% 100%}
.desktop{position:relative;height:100vh;height:100dvh;width:100%;isolation:isolate}
.identity{position:absolute;inset:0;pointer-events:none}
.identity .logo{position:absolute;left:2%;top:0;width:min(42vw,48dvh);transform:rotate(-10deg);filter:contrast(1.5) saturate(1.8) drop-shadow(5px 7px 0 #13051c);z-index:2}
.collage{position:absolute;inset:0;pointer-events:none}
.landscape{position:absolute;inset:-4%;background:url('assets/void.webp') center 46%/auto 265%;opacity:.78;filter:hue-rotate(var(--world-hue,0deg)) contrast(var(--crush)) saturate(var(--saturation));transform:rotate(var(--world-tilt,0deg)) scale(1.12);mask-image:radial-gradient(ellipse,black 10%,transparent 77%);pointer-events:none;z-index:-1;transition:transform 1.2s,filter 1.2s}
.edge-collage{position:absolute;inset:0;pointer-events:none;z-index:1;filter:contrast(1.2) saturate(1.4) hue-rotate(var(--world-hue,0deg));transition:filter 1.5s}
.edge-collage::before,.edge-collage::after{content:"";position:absolute;top:0;bottom:0;width:50%;background-image:url('assets/edge-collage.webp');background-size:auto 100%;background-repeat:no-repeat}
.edge-collage::before{left:0;background-position:left center;mask-image:linear-gradient(to right,#000 70%,transparent 100%)}
.edge-collage::after{right:0;background-position:right center;mask-image:linear-gradient(to left,#000 70%,transparent 100%)}
#watchers{position:absolute;inset:0;pointer-events:none;z-index:2}
.watcher{position:absolute;width:min(9vw,12dvh);opacity:.7;filter:contrast(1.8) saturate(2)}
.sticker{position:absolute;left:0;top:0;width:var(--size,25vw);height:var(--size,25vw);touch-action:none;cursor:grab;pointer-events:auto;transform:translate(var(--x,0px),var(--y,0px));border-radius:25%;z-index:3;will-change:transform}
.visual{position:absolute;inset:0;display:block;pointer-events:none;transform:rotate(var(--angle,0deg)) scale(calc(.9 * var(--growth,1)));filter:hue-rotate(var(--art-hue)) contrast(var(--crush)) saturate(var(--saturation));transition:scale .2s,opacity .3s}
.visual>.object:first-child,.pixels{position:absolute;inset:0;width:100%;height:100%}
.pixels{display:none;image-rendering:pixelated}
.pixelated .pixels{display:block}
.pixelated .visual>.object:first-child{opacity:0}
.sticker:hover .visual{scale:1.025}
.sticker.dragging{cursor:grabbing}
.sticker.dragging .visual{filter:hue-rotate(var(--art-hue)) contrast(var(--crush)) saturate(var(--saturation)) drop-shadow(0 0 10px #aaff00)}
.sticker.rare .visual{filter:hue-rotate(var(--art-hue)) contrast(var(--crush)) saturate(var(--saturation)) drop-shadow(0 0 12px #dfff00)}
.cameo,.following-pupil{display:none;position:absolute}
.cameo{left:28%;top:18%;width:38%;height:35%;background-color:transparent;filter:drop-shadow(0 0 4px #baff00)}
.screen-loaded .cameo{display:block}
.following-pupil{left:34%;top:35%;width:33%;height:33%;mix-blend-mode:screen}
.tracking .following-pupil{display:block}
.teeth{position:absolute;left:22%;top:49%;width:56%;height:20%;background:url('assets/cursed.webp') 20% 37%/303% 625%;opacity:var(--teeth,0);transform:scale(calc(.7 + var(--teeth,0) * .6));transition:opacity .2s,transform .25s}
.swallowed .visual{scale:.02;opacity:0}
.feeding .visual{scale:1.16}
.controls{position:absolute;left:50%;bottom:max(6px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:100000;pointer-events:none;display:flex;align-items:center;gap:min(3vw,36px)}
.controls button{width:min(19vw,22dvh);pointer-events:auto;filter:contrast(1.3) saturate(1.6)}
.controls button:hover{filter:contrast(1.8) saturate(2)}
.roll{background:url('assets/roll.webp') center/contain no-repeat;aspect-ratio:2}
.dial{position:absolute;right:max(15px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));width:min(11vw,14dvh);aspect-ratio:1;pointer-events:auto;z-index:100000;touch-action:none;cursor:ns-resize;border-radius:50%}
.dial-image{display:block;width:100%;height:100%;background:url('assets/dial.webp') center/contain no-repeat;transform:rotate(var(--dial-angle,-135deg))}
.relic-tab{position:absolute;right:2%;top:19%;width:min(9vw,12dvh);aspect-ratio:1;background:url('assets/relic.webp') center/contain no-repeat;transform:rotate(9deg);pointer-events:auto;z-index:100000;transition:transform .2s}
.relic-tab:hover{transform:rotate(-4deg) scale(1.1)}
[data-roll=ritual] .landscape{mask-image:none;opacity:.8;transform:rotate(var(--world-tilt)) scale(1.25);background-position:center 38%}
[data-roll=ritual] .edge-collage{filter:hue-rotate(65deg) saturate(2)}
dialog{padding:0;border:0;width:min(90vw,84dvh);height:min(92dvh,110vw);max-height:92dvh;max-width:94vw;overflow:hidden;background:#10061d url('assets/space.webp') center/cover}
dialog::backdrop{background:#08000be8;backdrop-filter:blur(10px)}
dialog .close{position:absolute;top:2%;right:3%;width:min(30%,20dvh);z-index:2}
#viewer-art{position:absolute;width:min(76vw,65dvh);height:min(76vw,65dvh);left:50%;top:56%;transform:translate(-50%,-50%);filter:contrast(var(--crush)) saturate(var(--saturation))}
#relic-art{position:absolute;left:4%;top:17%;width:92%;height:79%;object-fit:contain}
@media(max-aspect-ratio:3/4){
.identity .logo{width:min(68vw,35dvh);top:1%;left:0}
.dial{width:min(18vw,10dvh);right:2%;top:1%}
.relic-tab{width:min(17vw,10dvh);top:14%;right:3%}
.controls{gap:4vw}.controls button{width:min(38vw,19dvh)}
.landscape{background-size:auto 255%}.edge-collage{opacity:.85}
.watcher{width:14vw}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}



/* The shrine is the landing view; the existing toy box is a destination. */
body:not([data-room="playground"]) .collage,
body:not([data-room="playground"]) .controls,
body:not([data-room="playground"]) .dial,
body:not([data-room="playground"]) #watchers{display:none}
.relic-tab{display:none}
#shrine-room,#cabinet-room{position:absolute;inset:0;isolation:isolate}
body:not([data-room="playground"]) .identity .logo{width:min(38vw,36dvh);left:50%;top:0;transform:translateX(-50%) rotate(-6deg);z-index:4}
body:not([data-room="playground"]) .edge-collage{filter:contrast(1.2) saturate(1.4);transition:filter .8s}
.altar-floor{position:absolute;inset:26% 10% 4%;background:url('assets/void.webp') center 48%/auto 290%;mask-image:radial-gradient(ellipse,black 4%,transparent 69%);opacity:.6;pointer-events:none}
.crt{position:absolute;width:min(54vw,74dvh);aspect-ratio:1;left:50%;top:53%;transform:translate(-50%,-50%);background:url('assets/shrine-crt.webp') center/contain no-repeat;z-index:3}
.crt-screen{position:absolute;left:15%;top:17.7%;width:70%;height:40.5%;overflow:hidden;border-radius:8%;background:#08000c url('assets/space.webp') center/cover}
.crt-screen[data-world="seer"]{--crt-world:url('assets/crt-world-seer.webp')}
.crt-screen[data-world="grin"]{--crt-world:url('assets/crt-world-grin.webp')}
.crt-screen[data-channel="0"][data-world]{background-image:var(--crt-world)}
.crt-screen[data-channel="0"][data-world]::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--crt-world) center/cover no-repeat;-webkit-mask-image:linear-gradient(to bottom,transparent 61%,#000 78%);mask-image:linear-gradient(to bottom,transparent 61%,#000 78%);transform-origin:50% 70%;animation:crt-floor-warp 9s ease-in-out infinite alternate}
@keyframes crt-floor-warp{from{transform:scale(1.04) skewX(-1.5deg) scaleY(.98)}to{transform:scale(1.04) skewX(1.5deg) scaleY(1.03)}}
#channel-art{position:absolute;width:70%;height:85%;left:15%;top:7.5%;aspect-ratio:auto}
#channel-art{z-index:1}#channel-image{position:relative;z-index:1}
#channel-art.logo{width:90%;height:65%;left:5%;top:17.5%}
#channel-art.dog{width:100%;height:100%;left:0;top:0;background:var(--tv-dog,url('assets/becel-dog-2.webp')) center/contain no-repeat}
.dog-eyes{display:none;position:absolute;left:50%;top:0;height:100%;max-width:100%;aspect-ratio:1;transform:translateX(-50%);pointer-events:none}
#channel-art.dog[data-dog] .dog-eyes{display:block}
.dog-pupil{position:absolute;width:1.6%;aspect-ratio:1;background:url('assets/becel-pupil.webp') center/contain no-repeat;transform:translate(calc(-50% + var(--pupil-x,0px)),calc(-50% + var(--pupil-y,0px)))}
.dog-pupil-left{left:var(--eye-left);top:var(--eye-y)}.dog-pupil-right{left:var(--eye-right);top:var(--eye-y)}
#channel-art[data-dog="2"]{--eye-left:50.1%;--eye-right:62.25%;--eye-y:37.25%}
#channel-art[data-dog="2-dry"]{--eye-left:49.9%;--eye-right:61.6%;--eye-y:37.75%}
#channel-art[data-dog="5"]{--eye-left:50.75%;--eye-right:66.25%;--eye-y:32.4%}
#channel-art[data-dog="5-dry"]{--eye-left:50.5%;--eye-right:65.25%;--eye-y:33.4%}
#channel-image{width:100%;height:100%;object-fit:contain;display:block}
.crt-screen[data-channel="2"] #channel-art,.crt-screen[data-channel="3"] #channel-art{width:65%;height:100%;left:17.5%;top:0}
.channel-knob{position:absolute;top:65.5%;width:13%;height:13%;background:url('assets/dial.webp') center/contain no-repeat;border-radius:50%;transition:transform .2s}
.channel-knob.previous{left:26%}.channel-knob.next{left:61%}
.channel-knob:hover{transform:rotate(35deg)}
.cabinet-door{position:absolute;left:1%;top:48%;width:min(23vw,35dvh);aspect-ratio:1;transform:translateY(-50%) rotate(-8deg);z-index:3}
.cabinet-preview{position:absolute;inset:0;background:url('assets/cabinet.webp') center/contain no-repeat}
.cabinet-preview-card{position:absolute;left:42%;top:19%;width:16%;aspect-ratio:1;background:url('assets/relic.webp') center/contain no-repeat}
.cabinet-door:hover,.cabinet-door:focus-visible{filter:drop-shadow(0 0 12px #baff00)}
.playground-door{position:absolute;right:2%;top:48%;width:min(22vw,32dvh);aspect-ratio:1;transform:translateY(-50%) rotate(8deg);z-index:3}
.playground-door>.object{position:absolute;inset:0;width:100%;height:100%}
.playground-door>.roll{position:absolute;left:10%;bottom:-12%;width:80%;opacity:.7;transition:opacity .2s,transform .2s}
.playground-door:hover>.roll,.playground-door:focus-visible>.roll{opacity:1;transform:rotate(-8deg)}
.sentinel{position:absolute;left:9%;top:12%;width:min(11vw,16dvh);aspect-ratio:1;z-index:3}
.sentinel>.object{position:absolute;inset:0;translate:var(--look-x,0px) var(--look-y,0px)}
.sentinel.awakened{filter:drop-shadow(0 0 14px #caff00)}
.shrine-face{position:absolute;left:25%;bottom:3%;width:min(13vw,19dvh);aspect-ratio:1;z-index:3}
.shrine-face>.object{position:absolute;inset:0}
.face-reveal{opacity:0}
.shrine-face.changed>.face{opacity:0}.shrine-face.changed>.face-reveal{opacity:1}
.seals{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);display:flex;gap:1vw;pointer-events:none;z-index:4}
.seals span{width:min(4vw,5dvh);opacity:.2;filter:grayscale(1)}
.seals .found{opacity:1;filter:drop-shadow(0 0 5px #baff00)}
.hint{filter:drop-shadow(0 0 12px #baff00)}
.secret-portal{position:absolute;right:27%;bottom:2%;width:min(12vw,18dvh);z-index:4;filter:drop-shadow(0 0 15px #d4ff00)}
.return-shrine{position:absolute;left:max(14px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));width:min(11vw,13dvh);transform:scaleX(-1);z-index:100001}
.relic-cabinet{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:min(85vw,84dvh);aspect-ratio:1;background:url('assets/cabinet.webp') center/contain no-repeat}
.cabinet-item{position:absolute;width:18%;height:17%;transition:transform .2s}
.cabinet-item:hover,.cabinet-item:focus-visible{transform:scale(1.12) rotate(-5deg);filter:drop-shadow(0 0 8px #baff00)}
.hatred-card{background:url('assets/relic.webp') center/contain no-repeat}
.shelf-1-left{left:29%;top:19%}.shelf-1-right{left:54%;top:19%}
.shelf-2-left{left:29%;top:39%}.shelf-2-right{left:54%;top:39%}
.shelf-3-left{left:29%;top:59%}.shelf-3-right{left:54%;top:59%}
.alternate-shrine{background-image:url('assets/void.webp');background-size:auto 230%;background-position:center 46%}
.alternate-shrine #shrine-room{filter:hue-rotate(125deg) contrast(1.5) saturate(1.6)}
.alternate-shrine .edge-collage{filter:hue-rotate(140deg) contrast(1.5)!important}
.alternate-shrine .crt{transform:translate(-50%,-50%) rotate(-5deg)}
@media(max-aspect-ratio:3/4){
body:not([data-room="playground"]) .identity .logo{width:min(62vw,29dvh);top:1%}
.crt{width:min(91vw,57dvh);top:43%}
.cabinet-door{left:3%;top:79%;width:min(35vw,22dvh);transform:translateY(-50%) rotate(-6deg)}
.playground-door{right:3%;top:79%;width:min(32vw,21dvh)}
.sentinel{left:3%;top:17%;width:15vw}
.shrine-face{left:auto;right:3%;top:17%;bottom:auto;width:15vw}
.seals{bottom:3%;gap:2vw}.seals span{width:7vw}
.secret-portal{right:40%;bottom:10%;width:20vw}
.return-shrine{width:min(18vw,11dvh)}
.relic-cabinet{width:min(99vw,81dvh);top:51%}
}