@font-face{font-family:'Lethal Craze';src:url('./lethal-craze-title.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Main Frame';src:url('./main-frame-title.woff2?v=social-dex3') format('woff2');font-weight:400;font-style:normal;font-display:swap}
:root{color-scheme:dark;--bg:#000;--ink:#e5eeee;--muted:#a0b5bd;--line:#2a3e48;--accent:#bde858;font-family:system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.5}:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.shell{height:100dvh;display:flex;flex-direction:column;padding:16px;gap:12px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;letter-spacing:.08em}.brand{font-weight:600}.mark{color:var(--accent);margin-right:10px}.hint{color:var(--muted);letter-spacing:0}
.stage-wrap{position:relative;flex:1;min-height:300px;border:1px solid var(--line);overflow:hidden}#stage{position:absolute;inset:0}canvas{display:block;touch-action:none}.scene-label{position:absolute;left:16px;top:14px;font-size:13px;color:var(--muted);pointer-events:none}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:8px}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.controls{display:flex;gap:4px;flex:1}.control,.animate,summary{background:#13212a;border:1px solid var(--line);border-radius:5px;padding:10px 14px;font-size:14px;color:var(--ink)}.control.active{color:var(--accent);border-color:var(--accent)}.animate{min-width:136px}.lighting{position:absolute;right:14px;top:14px;width:300px;max-width:calc(100% - 28px);z-index:2}summary{cursor:pointer;width:fit-content;margin-left:auto}.lighting[open]{background:rgba(11,18,23,.96);border:1px solid var(--line);border-radius:6px;padding:12px}.lighting[open] summary{padding:4px 0 12px;background:none;border:0;width:100%;margin:0}fieldset{padding:0;margin:0;border:0}.light-row{display:grid;grid-template-columns:1fr 85px 42px;align-items:center;gap:8px;font-size:13px;margin:12px 0}.light-row label{display:flex;align-items:center;gap:7px}.light-row input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}.light-row input[type=range]{width:100%;accent-color:var(--accent)}output{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}.lighting p{font-size:12px;color:var(--muted);margin:10px 0 0;line-height:1.5}
@media(max-width:650px){.shell{padding:10px}.hint{display:none}.controls{flex-wrap:wrap}.control{padding:9px 10px}.toolbar{gap:6px}.animate{min-width:110px}.scene-label{top:58px;font-size:12px}.lighting{right:10px;top:10px}.stage-wrap{min-height:260px}}

.shell[inert]{opacity:0;pointer-events:none}
.shell{position:relative;z-index:0;isolation:isolate;transition:opacity 1s ease;padding:0;gap:0}
.topbar,.toolbar,.lighting,.scene-label{display:none}
.stage-wrap{border:0;min-height:0}
#stage:focus{outline:none}
.room-title{position:absolute;top:clamp(24px,4vw,52px);left:clamp(24px,4vw,60px);z-index:1;margin:0;color:#fff;font-family:'Lethal Craze',cursive;font-size:clamp(34px,5vw,68px);font-weight:400;line-height:1.2;text-shadow:0 3px 18px #0009;pointer-events:none;opacity:0;transform:translateY(12px)}
.shell:not([inert]) .room-title{animation:title-arrive .9s ease 2.1s both}
@keyframes title-arrive{to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.shell:not([inert]) .room-title{animation:none;opacity:1;transform:none}}
.intro{position:fixed;inset:0;z-index:10;isolation:isolate;overflow:hidden;background:#000;display:grid;place-items:center;transition:opacity .7s ease 1.3s}
.intro[hidden]{display:none}
#doorViewport{position:absolute;inset:0}
.intro-action{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .25s}
#enterBtn{position:absolute;left:50%;top:50%;width:60px;height:56px;transform:translate(-50%,-50%);padding:0;border:0;border-radius:50%;background:transparent;color:#24231f;pointer-events:auto;touch-action:manipulation}
#enterBtn:hover:not(:disabled){box-shadow:0 0 22px #e7d8b970;background:#e7d8b914}
#enterBtn:focus-visible{outline:3px solid #f3eedc;outline-offset:4px}
.door-hint{position:absolute;left:calc(100% - 4px);bottom:-2px;display:flex;flex-direction:row-reverse;align-items:center;width:220px;pointer-events:none;filter:drop-shadow(2px 4px 2px #0008)}
#doorHintLabel{display:block;padding:10px 13px 8px;border:2px solid #24231f;border-radius:12px 9px 14px 8px;box-shadow:0 0 0 3px #fffdf4;background:#f3eedc;font:400 23px/1.1 'Main Frame',cursive;white-space:nowrap;transform:rotate(-7deg)}
.door-hint img{width:68px;height:56px;object-fit:contain;margin-right:8px}
@media(max-width:600px){.door-hint{left:auto;right:calc(100% - 10px);bottom:28px;flex-direction:column;align-items:flex-end;width:150px}.door-hint img{transform:rotate(210deg);margin:5px -8px -9px 0}}
#enterBtn:disabled{opacity:.65}
#enterBtn:disabled #doorHintLabel{font-size:0}
#enterBtn:disabled #doorHintLabel::after{content:'LOADING…';font-size:20px}
#introStatus{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.intro.entering{opacity:0;pointer-events:none}
.intro.entering .intro-action{opacity:0}
@media(prefers-reduced-motion:reduce){.intro,.shell{transition:none}}
.gallery-access{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;border:0}
.gallery-access:focus-visible{width:auto;height:auto;clip-path:none;bottom:24px;right:24px;padding:12px;background:#10151b;color:#fff;z-index:3}
#photoGallery{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#211c17;color:#fff;overflow:hidden;isolation:isolate}
#photoGallery::backdrop{background:#000}
.gallery-floor{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 109px,#08060499 110px,#413329 112px,#0000 114px),repeating-linear-gradient(92deg,#402f2120 0 2px,#16110d20 3px 5px),linear-gradient(115deg,#30281f,#1b1814 75%)}
.gallery-floor:before{content:'';position:absolute;left:50%;top:50%;width:132vw;height:115dvh;background:url('./gallery/floor.jpg') center/cover no-repeat;transform:translate(-50%,-50%) rotate(-12deg);box-shadow:0 10px 30px #0008;filter:brightness(.52) saturate(.6)}
.gallery-floor:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 45% 38%,#adc5bc14,transparent 60%),radial-gradient(ellipse at center,transparent 12%,#080b0d99 100%);box-shadow:inset 0 0 100px #0006}
#galleryPhotos{position:absolute;inset:0;perspective:1400px;perspective-origin:50% 40%}
.floor-photo{position:absolute;left:50%;top:50%;width:min(36vw,390px,44dvh);margin:0;padding:9px 9px 22px;border:1px solid #d7d3c6;border-radius:2px;background:#eee9dd;line-height:0;box-shadow:1px 2px 1px #0007,3px 6px 8px #0006;transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotateZ(var(--angle)) rotateX(8deg) scale(.63);filter:brightness(.76);transition:transform 1.15s cubic-bezier(.22,.75,.2,1),box-shadow 1.15s ease,filter .9s ease;will-change:transform;z-index:1;touch-action:manipulation}
.floor-photo img{display:block;width:100%;max-height:65dvh;object-fit:contain;pointer-events:none;user-select:none}
#photoGallery.is-focused .floor-photo[aria-pressed=true]{transform:translate(-50%,-50%) translate(0,-1dvh) rotateZ(-1.3deg) rotateX(var(--look-y,0deg)) rotateY(var(--look-x,0deg)) translateZ(65px) scale(1);box-shadow:1px 3px 1px #ada797,10px 28px 22px #0005,24px 58px 65px #0008;filter:brightness(1);z-index:5}
.floor-photo:focus-visible{outline:2px solid #eee9dd;outline-offset:7px}
.gallery-navigation{position:absolute;inset:0;pointer-events:none;z-index:10}
.gallery-navigation button{position:absolute;top:50%;width:52px;height:64px;padding:12px;border:0;background:transparent;color:#f6f0e1;pointer-events:auto;transform:translateY(-50%);filter:drop-shadow(0 2px 5px #000);opacity:.7;transition:opacity .2s,translate .2s}
.gallery-navigation button:hover,.gallery-navigation button:focus-visible{opacity:1;translate:0 -2px}
.gallery-navigation button:focus-visible{outline:1px solid #eee9dd80;outline-offset:0;border-radius:50%}
.gallery-navigation button:disabled{opacity:.2;cursor:default}
.gallery-navigation svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
[data-gallery-step="-1"]{left:clamp(8px,3vw,60px)}[data-gallery-step="1"]{right:clamp(8px,3vw,60px)}
.gallery-navigation #closeGallery{top:max(20px,env(safe-area-inset-top));bottom:auto;left:max(20px,env(safe-area-inset-left));width:clamp(72px,8vw,104px);height:clamp(72px,8vw,104px);padding:4px;opacity:1;transform:rotate(-7deg);filter:drop-shadow(2px 5px 3px #0008)}
.gallery-navigation #closeGallery img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.gallery-navigation #closeGallery:hover{translate:-3px -3px}
@media(max-width:600px){.floor-photo{width:min(64vw,42dvh);padding:6px 6px 16px;transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotateZ(var(--angle)) scale(.55)}.gallery-navigation button{width:38px;padding:8px}.gallery-floor:before{width:180vw;height:110dvh}}
@media(prefers-reduced-motion:reduce){.floor-photo,.gallery-navigation button{transition:none}}
.project-panel{position:absolute;z-index:2;top:clamp(28px,4vw,56px);right:clamp(20px,4vw,60px);width:190px;text-align:right}
.social-stickers{display:flex;flex-direction:column;align-items:flex-end;gap:23px;padding:8px}
.social-sticker{--tilt:-3deg;--size:32px;--shift:0px;display:block;width:max-content;min-height:44px;padding:8px 4px;color:#191816;font:400 var(--size)/1.2 'Main Frame',cursive;letter-spacing:0;text-align:center;text-decoration:none;-webkit-text-stroke:7px #fffdf4;paint-order:stroke fill;filter:drop-shadow(0 1px 0 #fff) drop-shadow(0 2px 0 #b9b5a8) drop-shadow(1px 3px 1px #0005) drop-shadow(3px 8px 5px #0006);transform:translateX(var(--shift)) rotate(var(--tilt));transform-origin:65% 50%;transition:transform .2s,filter .2s}
.social-sticker:nth-child(2){--tilt:2deg;--size:32px;--shift:0px}
.social-sticker:nth-child(3){--tilt:-2deg;--size:32px;--shift:0px}
.sticker-word{display:inline-flex;align-items:baseline;gap:.1em}
.sticker-letter{display:inline-block;font-size:calc(1em * var(--scale));transform:rotate(var(--angle));transform-origin:50% 75%}
.sticker-logo{display:inline-block;width:.85em;height:.85em;margin-left:9px;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(2px 0 0 #fffdf4) drop-shadow(-2px 0 0 #fffdf4) drop-shadow(0 2px 0 #fffdf4) drop-shadow(0 -2px 0 #fffdf4)}
.social-sticker:hover,.social-sticker:focus-visible{transform:translate(var(--shift),-4px) rotate(var(--tilt));filter:drop-shadow(0 1px 0 #fff) drop-shadow(0 2px 0 #b9b5a8) drop-shadow(2px 5px 2px #0004) drop-shadow(5px 12px 7px #0007)}
.social-sticker[aria-disabled=true]{cursor:default}
.project-panel [hidden]{display:none}
.market-links{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.market-links a{padding:9px 13px;background:#211b2ae6;border:1px solid #e7d8b980;border-radius:5px;color:#fff1d5;text-decoration:none;font:20px 'Main Frame',cursive;min-height:44px}
.contract{position:relative;margin:26px 4px 18px;padding:14px 15px 21px;border:2px solid #24231f;border-radius:13px 9px 17px 10px;background:#fffdf4;color:#24231f;text-align:left;box-shadow:0 0 0 4px #fffdf4,2px 5px 0 4px #a49d87,5px 12px 16px #0007;transform:rotate(2deg)}
.contract::after{content:'';position:absolute;right:0;bottom:0;width:20px;height:20px;background:linear-gradient(135deg,#d8cfb5 48%,#fffdf4 50%);border-radius:6px 0 13px 0;pointer-events:none}
.contract-label{display:inline-block;margin:0 0 10px;padding:3px 9px;border:2px solid #24231f;border-radius:5px;background:#c6e978;font:400 23px/1 'Main Frame',cursive;transform:rotate(-4deg)}
#contractAddress{display:block;padding-top:9px;border-top:1px dashed #797568;font:13px/1.5 'Courier New',monospace;overflow-wrap:anywhere;user-select:all}
.config-status{font-size:11px;color:#e7d8b9}.config-status:empty{display:none}
@media(max-width:600px){.project-panel{top:100px;right:18px;width:150px}.social-sticker{font-size:calc(var(--size) * .64);padding:8px 4px;-webkit-text-stroke-width:5px}.social-stickers{gap:10px}.market-links{margin-top:16px}}
@media(max-height:500px){.social-stickers{gap:4px}.social-sticker{padding:5px 4px;font-size:calc(var(--size) * .64);-webkit-text-stroke-width:5px}.market-links{margin-top:10px}.project-panel{top:20px}}
@media(prefers-reduced-motion:reduce){.social-sticker{transition:none}}

.sticker-logo-solid{fill:currentColor;stroke:none;width:1em;height:1.15em}

#itemInfo{position:fixed;inset:auto auto 32px 32px;margin:0;width:min(330px,calc(100vw - 64px));max-height:calc(100dvh - 64px);padding:27px 25px 30px;box-sizing:border-box;border:3px solid #24231f;border-radius:18px 14px 24px 12px;background:#f3eedc;color:#24231f;box-shadow:0 0 0 5px #fffdf4,3px 7px 0 5px #a49d87,8px 18px 26px #0008;z-index:8;transform:rotate(-2deg);overflow:auto}
#itemInfo::after{content:'';position:absolute;right:0;bottom:0;width:24px;height:24px;background:linear-gradient(135deg,#d8cfb5 48%,#fffdf4 50%);border-radius:8px 0 18px 0;pointer-events:none}
#itemInfo h2{font:400 32px/1.15 'Main Frame',cursive;text-transform:uppercase;margin:0 36px 16px 0;overflow-wrap:anywhere}
#itemInfo p{font-size:14px;line-height:1.6;margin:0;max-width:28ch}
#itemInfo button{position:absolute;top:8px;right:8px;width:44px;height:44px;padding:0;border:2px solid #24231f;border-radius:50%;background:#c6e978;color:inherit;font-size:27px;line-height:1;box-shadow:2px 3px 0 #24231f;cursor:pointer}
#itemInfo button:hover{background:#ddf4a6}
#itemInfo a{display:inline-block;margin-top:20px;padding:10px 20px;border:2px solid #24231f;border-radius:8px;background:#c6e978;color:#24231f;font:400 23px/1.2 'Main Frame',cursive;text-decoration:none;box-shadow:3px 3px 0 #24231f;transform:rotate(1deg)}
#itemInfo a:hover{background:#ddf4a6}
#itemInfo [hidden]{display:none}
#itemInfo :focus-visible{outline:3px solid #526d31;outline-offset:4px}
@media(max-width:600px){#itemInfo{inset:auto auto 24px 24px;width:min(300px,calc(100vw - 48px));max-height:calc(100dvh - 48px);padding:24px 20px}#itemInfo h2{font-size:28px}}

.about-sticker{border:0;background:none}
body:has(#aboutDialog[open]) .project-panel,body:has(#aboutDialog[open]) .room-title{visibility:hidden}
#aboutDialog{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden;color:#27251f}
#aboutDialog::backdrop{background:linear-gradient(90deg,transparent 35%,#0005)}
#closeAbout{position:absolute;top:22px;left:24px;width:80px;height:80px;padding:4px;border:0;background:none;filter:drop-shadow(2px 4px 3px #0008);z-index:2}
#closeAbout img{width:100%;height:100%;object-fit:contain}
.about-receipt{position:absolute;top:50%;right:clamp(24px,5vw,100px);width:clamp(300px,29vw,420px);max-height:calc(100dvh - 64px);overflow:auto;padding:32px 28px;background:linear-gradient(95deg,#d8d4c8,#f4f0e5 9%,#eeebdf 48%,#fffdf2 51%,#e6e1d3);box-shadow:8px 16px 34px #0007;clip-path:polygon(0 0,5% 1%,10% 0,15% 1%,20% 0,25% 1%,30% 0,35% 1%,40% 0,45% 1%,50% 0,55% 1%,60% 0,65% 1%,70% 0,75% 1%,80% 0,85% 1%,90% 0,95% 1%,100% 0,100% 99%,95% 100%,90% 99%,85% 100%,80% 99%,75% 100%,70% 99%,65% 100%,60% 99%,55% 100%,50% 99%,45% 100%,40% 99%,35% 100%,30% 99%,25% 100%,20% 99%,15% 100%,10% 99%,5% 100%,0 99%);font:14px/1.65 'Courier New',monospace;opacity:0;transform:translateY(calc(-50% + 28px)) rotate(3deg);transition:opacity .45s,transform .6s}
#aboutDialog.is-ready .about-receipt{opacity:1;transform:translateY(-50%) rotate(2deg)}
.about-receipt header,.about-receipt footer{text-align:center;letter-spacing:.08em}
.about-receipt h2{font:400 38px/1.2 'Main Frame',cursive;margin:10px 0}
.about-receipt p{margin:20px 0}
.about-receipt hr{border:0;border-top:2px dashed #615d51}
.about-receipt footer{font-size:11px}
.receipt-barcode{height:30px;width:150px;margin:16px auto 10px;background:repeating-linear-gradient(90deg,#292820 0 2px,transparent 2px 4px,#292820 4px 5px,transparent 5px 9px,#292820 9px 13px,transparent 13px 15px)}
@media(max-width:600px){#closeAbout{top:12px;left:12px;width:64px;height:64px}.about-receipt{top:auto;bottom:18px;right:20px;width:calc(100% - 40px);max-height:45dvh;padding:22px;font-size:13px;transform:translateY(25px) rotate(2deg)}#aboutDialog.is-ready .about-receipt{transform:translateY(0) rotate(1deg)}.about-receipt h2{font-size:28px}}
@media(prefers-reduced-motion:reduce){.about-receipt{transition:none}}

/* A depth-tested hole in the CRT glass reveals this perspective-matched display. */
#stage canvas{position:relative;z-index:1}
#tvChart{position:absolute;left:0;top:0;transform-origin:0 0;background:#080e14;color:#cadad5;overflow:hidden;border-radius:9% / 12%;pointer-events:none}
#tvChart[hidden],#closeTVChart[hidden]{display:none}
#tvChart p{position:absolute;inset:0;display:grid;place-content:center;margin:0;font:28px monospace;letter-spacing:.12em;text-transform:uppercase}
#tvChart iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#080e14}
#tvChart::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0 3px,#0001 3px 4px),radial-gradient(ellipse at 42% 35%,transparent 45%,#0007);box-shadow:inset 0 0 35px #000a}
.viewing-tv #stage canvas{pointer-events:none}
.viewing-tv #tvChart.is-ready{pointer-events:auto}
.viewing-tv .room-title,.viewing-tv .project-panel{visibility:hidden}
#closeTVChart{position:absolute;left:24px;top:24px;z-index:4;width:80px;height:80px;padding:0;border:0;background:none;filter:drop-shadow(2px 4px 3px #0008)}
#closeTVChart img{width:100%;height:100%;object-fit:contain}