/* Cantown's display case. One material system, one fixed camera. */
html,body{height:100%;overflow:hidden}body{background:#211918}body>.masthead,body>.prototype-label{display:none!important}#main{height:100svh;padding:0!important;outline:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.immersive-world,.film-entrance{--header:118px;--ledge:48px;--scene-width:min(100vw,calc((100svh - var(--header) - var(--ledge))*16/9));position:relative;height:100svh;width:100%;display:grid;grid-template-rows:var(--header) minmax(0,1fr) var(--ledge);align-content:center;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 0,#6a402a55,transparent 60%),repeating-linear-gradient(3deg,#ffffff01 0 1px,transparent 1px 5px),linear-gradient(100deg,#251a19,#35241f 35%,#2d211e 70%,#231a18)}
.town-welcome{position:relative;z-index:9;display:flex;justify-content:center;align-items:center;pointer-events:none}.welcome-plaque{width:380px;aspect-ratio:3;position:relative;filter:drop-shadow(0 7px 9px #100a0780)}.welcome-plaque>img{width:100%;height:100%;display:block}.welcome-lettering{position:absolute;inset:29% 10% 12%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#f3deb1;text-shadow:0 1px 1px #382011,0 -1px 0 #9f693944}.welcome-lettering>span{font:italic 12px/1 Georgia}.welcome-lettering h1{font:38px/.94 Georgia;letter-spacing:-.035em;margin:2px 0 6px}.welcome-lettering p{font:11px/1.2 Georgia;letter-spacing:.025em;margin:0;color:#ead2a7}.welcome-plaque:before,.welcome-plaque:after{content:'';position:absolute;top:-30px;left:18%;height:40px;width:2px;background:repeating-linear-gradient(#bc9254 0 3px,#523822 3px 5px);box-shadow:1px 0 2px #0b0705}.welcome-plaque:after{left:auto;right:18%}
.enter-town{position:absolute;pointer-events:auto;left:50%;top:92%;transform:translateX(-50%);z-index:10;display:flex;align-items:center;justify-content:center;gap:15px;min-height:42px;padding:9px 24px;color:#f6dfad;background:linear-gradient(100deg,#4d2f1d,#694328 50%,#44291b);border:1px solid #b38b5099;border-radius:3px 3px 17px 17px;box-shadow:inset 0 -2px 1px #2b1a12,0 4px 7px #0f080b77;font:15px Georgia;white-space:nowrap;cursor:pointer;animation:entrance-tab .7s both}.enter-town:before,.enter-town:after{content:'';position:absolute;top:-9px;width:2px;height:11px;left:17%;background:#ba8e4e;box-shadow:1px 1px 1px #24130b}.enter-town:after{left:auto;right:17%}.enter-town svg{width:21px;height:16px;fill:none;stroke:currentColor;stroke-width:1.2}.enter-town[hidden]{display:none}.enter-town:hover{color:#fff1cb;background:#79502c}.enter-town:focus-visible{outline:2px solid #f1d193;outline-offset:4px}@keyframes entrance-tab{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}
.town-surround,.entrance-screen{position:relative;width:var(--scene-width);height:100%;justify-self:center;overflow:hidden;border:1px solid #91613e66;box-shadow:0 12px 45px #0d070970,inset 0 0 0 2px #bd8c4d22}.town-pan{width:100%;height:100%;overflow:auto hidden;display:flex;align-items:center;scrollbar-width:none;touch-action:pan-x;cursor:grab;overscroll-behavior-x:contain}.town-pan::-webkit-scrollbar{display:none}.town-pan:active{cursor:grabbing}.town-pan:focus{outline:none}.town-pan:focus-visible{outline:2px solid #dab578;outline-offset:-3px}.immersive-stage{position:relative;isolation:isolate;flex:none;width:100%;height:100%;aspect-ratio:16/9;container-type:inline-size;overflow:hidden}.world-poster,.world-film,.world-grade,.scene-fx,.practical-lights{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.world-poster,.world-film{object-fit:fill;transition:filter 1.4s ease;z-index:0}.world-grade{z-index:2;mix-blend-mode:soft-light;transition:background 1.4s;background:transparent}.immersive-stage[data-light=moon] .world-film,.immersive-stage[data-light=moon] .world-poster{filter:brightness(.66) saturate(.65)}.immersive-stage[data-light=moon] .world-grade{background:#6879c78a}.immersive-stage[data-light=rose] .world-grade{background:#a73c7544}.immersive-stage[data-light=rose] .world-film{filter:saturate(.88) hue-rotate(-9deg)}.poster-mode .world-film{opacity:0}
.practical-lights{z-index:3;mix-blend-mode:screen}.practical-lights i{position:absolute;left:var(--x);top:var(--y);width:3.8%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff2bd70,#ffc87922 20%,transparent 70%);animation:practical-breathe 7s calc(var(--i)*-.73s) infinite ease-in-out}.party-lights .practical-lights i{background:radial-gradient(circle,hsl(calc(var(--i)*41) 80% 78% / .8),hsl(calc(var(--i)*41) 85% 65% / .4) 20%,transparent 65%)}.light-chase .practical-lights i{animation:bulb-chase 1.3s calc(var(--i)*.13s) 2 both}.immersive-stage:after{content:'';position:absolute;left:32%;top:3%;width:9%;height:17%;z-index:3;background:radial-gradient(ellipse,#ffdc8caa,transparent 68%);mix-blend-mode:screen;pointer-events:none;opacity:0;transition:opacity 1s}.window-awake:after{opacity:1}.secret-windows:after{animation:secret-lamp 2s 2}.lantern-bright .warmth-lantern{opacity:1;animation:none!important;background:radial-gradient(ellipse,#ffdd9caa,transparent 70%)}
.resident-hit,.prop-hit{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);min-width:44px;min-height:44px;transform:translate(-50%,-50%);z-index:4;background:none!important;border:0;border-radius:40%;padding:0;cursor:pointer;touch-action:pan-x}.prop-hit{z-index:5}.resident-hit:focus-visible,.prop-hit:focus-visible{outline:1px solid #fff1b9cc;outline-offset:1px;background:#ffeab50c!important}
.shop-door{position:absolute;right:.7%;top:36%;width:7.5%;height:32%;z-index:6;border:0;padding:0;background:none;cursor:pointer;touch-action:pan-x}.physical-shop{position:absolute;left:50%;top:71%;width:146%;height:24%;transform:translate(-50%,-50%) perspective(600px) rotateY(-12deg) rotate(-2deg);display:grid;place-items:center;filter:drop-shadow(1px 3px 2px #21120abf);transition:filter .3s}.prop-art{position:absolute;inset:0;background-image:url('assets/generated/town-fittings-v1.png');background-repeat:no-repeat;pointer-events:none}.physical-shop .prop-art{background-size:300% auto;background-position:0 50%}.physical-shop b{position:relative;font:600 clamp(10px,1.1cqw,18px) Georgia;color:#f6dcac;line-height:1;text-shadow:0 1px 1px #321b10;white-space:nowrap;transform:translateY(2%)}.shop-door:hover .physical-shop,.shop-door:focus-visible .physical-shop{filter:drop-shadow(1px 3px 3px #21120a) brightness(1.13)}.shop-door:focus-visible{outline:1px solid #f2cd8c;outline-offset:-5px;border-radius:45% 45% 10px 10px}
.scene-tools{position:absolute;z-index:12;top:max(22px,env(safe-area-inset-top));right:max(24px,env(safe-area-inset-right));display:flex;gap:7px}.scene-tools button{height:42px;min-width:42px;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid #d2a65e66;border-radius:50px;background:linear-gradient(140deg,#513b29,#291d16);color:#ead1a1;box-shadow:inset 0 1px 0 #fae1a533,1px 3px 6px #0d090770;padding:0 12px;cursor:pointer}.scene-tools svg{width:19px;height:19px}.scene-sound>span{font:11px Georgia}.scene-tools button:hover{background:#62472e}.scene-tools button:disabled{opacity:.45;cursor:default}.scene-tools button:focus-visible{outline:2px solid #f2cd8c;outline-offset:3px}.scene-sound[aria-pressed=false] .sound-waves,.scene-sound[aria-pressed=true] .sound-muted{display:none}.scene-pause[aria-pressed=true]{background:#755133}.scene-pause[aria-pressed=true] svg{opacity:.6}.opening-play{font:20px Georgia}
.town-ledge,.entrance-ledge{position:relative;z-index:6;justify-self:center;width:var(--scene-width);height:var(--ledge);display:flex;align-items:center;gap:16px;padding:0 22px;background:repeating-linear-gradient(2deg,transparent 0 2px,#d69b5d07 2px 3px),linear-gradient(#65412d,#493022 13%,#4f3223 75%,#332118);border:1px solid #a1734544;border-top-color:#ba8b5866;box-shadow:inset 0 1px 1px #d6a96b33,0 9px 15px #130b09;box-sizing:border-box}.town-carving{position:absolute;left:50%;transform:translateX(-50%);font:17px Georgia;letter-spacing:.08em;color:#29170fb0;text-shadow:0 1px 0 #c58c514a;pointer-events:none}.town-ticket{position:relative;width:150px;height:46px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer;filter:drop-shadow(0 2px 1px #1d100ca6)}.town-ticket .prop-art{background-size:300% auto;background-position:50% 50%}.town-ticket span{z-index:1;color:#e5c78c;font:600 12px Georgia;text-shadow:0 -1px 0 #25190f;white-space:nowrap}.town-ticket[aria-disabled=true],.social-badge[aria-disabled=true]{cursor:default}.town-ticket:hover{filter:drop-shadow(0 2px 1px #1d100ca6) brightness(1.1)}.social-badge{position:relative;margin-left:auto;width:42px;height:42px;display:grid;place-items:center;background:none;border:0;padding:0;cursor:pointer}.social-badge .prop-art{background-size:300% auto;background-position:100% 50%}.social-badge svg{position:relative;width:16px;height:16px;fill:#d5bb83}.ledge-replay{display:grid;place-items:center;width:34px;min-width:34px;height:34px;padding:6px;border-radius:50%;color:#c7a46b;border:1px solid #be97584d;background:linear-gradient(130deg,#6e4a2c,#302119);box-shadow:inset 0 1px 0 #e2b87944,0 2px 3px #170e08;cursor:pointer}.ledge-replay svg{width:20px;height:20px;fill:currentColor}.town-ledge button:focus-visible{outline:2px solid #f1cc89;outline-offset:2px}
.entrance-screen .intro-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:1;transform:none;filter:none}.entrance-ledge{justify-content:flex-end}.skip-film{position:static;min-height:38px;border:0;background:transparent;color:#d4b485;font:12px Georgia;cursor:pointer;padding:6px 12px}.opening-done .skip-film{visibility:hidden}.film-entrance .welcome-plaque{z-index:10}
/* Effects have material and origin: steam, paper, silk, leaves and practical light. */
.scene-fx{z-index:6;overflow:hidden}.effect{position:absolute;left:var(--x);top:var(--y);width:1px;height:1px;pointer-events:none}.steam-curl{position:absolute;bottom:0;width:18px;height:50px;border-left:2px solid #fff4dd9c;border-radius:50%;filter:blur(3px);animation:curl-up 3.8s both;left:-8px}.curl-two{animation-delay:.3s;left:1px}.curl-three{animation-delay:.6s;left:8px}.effect-chimney .steam-curl{width:32px;height:80px;filter:blur(6px);border-width:6px}.soft-warmth{position:absolute;left:-40px;top:-40px;width:80px;height:80px;background:radial-gradient(ellipse,#ffe3a199,transparent 66%);mix-blend-mode:screen;animation:local-warmth 3s both}.paper-flight{position:absolute;width:29px;height:17px;background:linear-gradient(150deg,#e4d7ad 47%,#aa986b 49%,#f6e5bc 52%);clip-path:polygon(0 0,100% 48%,15% 100%,27% 53%);filter:drop-shadow(0 2px 1px #40241066);animation:paper-glide 4.2s both ease-in-out}.effect-delivery .paper-flight{animation-name:paper-delivery}.effect-pages .paper-flight{animation-name:paper-peek;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);background:linear-gradient(110deg,#bba67b,#f4e4bb)}.silk-ribbon{position:absolute;left:-7px;top:0;width:5px;height:35px;background:linear-gradient(90deg,#704466,#c5a3be 45%,#78566e);border-radius:55% 10%;transform-origin:top;box-shadow:1px 2px 2px #43243555;animation:ribbon-unfurl 3.8s both ease-in-out}.ribbon-right{left:8px;animation-delay:.15s;rotate:-18deg}.little-leaf{position:absolute;width:10px;height:19px;border-radius:85% 0 80% 0;background:linear-gradient(54deg,#68783a 44%,#aeaa55 49%,#586b32 55%);box-shadow:inset 1px 1px 2px #e0c47b55;animation:leaf-gust 4s calc(var(--i)*.18s) both;--travel:calc(150px + var(--i)*22px)}.effect-bloom .little-leaf{width:8px;height:14px;--travel:40px}.biscuit-crumb{position:absolute;width:4px;height:4px;background:#c49a54;border-radius:1px;box-shadow:1px 1px 1px #3d261f55;animation:crumb-drop 1.6s both}.crumb-two{left:7px;animation-delay:.15s}.night-fireflies{position:absolute;inset:0;z-index:3;opacity:0;transition:opacity 1.5s;pointer-events:none}.immersive-stage[data-light=moon] .night-fireflies{opacity:1}.night-fireflies i{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;background:#ffe39a;border-radius:50%;box-shadow:0 0 8px 3px #ecce6450;animation:firefly-drift 9s calc(var(--i)*-.81s) infinite ease-in-out}.quiet-effect *{animation:none!important;opacity:.6}.motion-stopped *{animation-play-state:paused!important}
@keyframes practical-breathe{0%,100%{opacity:.3}50%{opacity:.6}}@keyframes bulb-chase{0%,70%,100%{opacity:.15}30%{opacity:1}}@keyframes secret-lamp{0%,100%{opacity:.3}50%{opacity:1}}@keyframes curl-up{0%{opacity:0;transform:translateY(10px) scale(.7)}20%{opacity:.6}100%{opacity:0;transform:translate(12px,-85px) scale(1.4)}}@keyframes local-warmth{0%,100%{opacity:0}35%,60%{opacity:.6}}@keyframes paper-glide{0%{opacity:0;transform:translate(0,0) rotate(-12deg)}10%{opacity:1}50%{transform:translate(-95px,25px) rotate(-29deg)}85%{opacity:1}100%{opacity:0;transform:translate(-230px,115px) rotate(-8deg)}}@keyframes paper-delivery{0%{opacity:0;transform:translate(0,0) rotate(5deg)}15%,65%{opacity:1}100%{opacity:0;transform:translate(45px,-18px) rotate(-10deg)}}@keyframes paper-peek{0%,100%{opacity:0;transform:translateY(0)}25%,65%{opacity:1;transform:translateY(-16px) rotate(-6deg)}}@keyframes ribbon-unfurl{0%,100%{opacity:0;transform:rotate(0) scaleY(.4)}25%{opacity:1;transform:rotate(30deg) scaleY(1)}60%{opacity:1;transform:rotate(-13deg) scaleY(1)}}@keyframes leaf-gust{0%{opacity:0;transform:translate(0,0) rotate(0)}12%,70%{opacity:.8}100%{opacity:0;transform:translate(var(--travel),85px) rotate(270deg)}}@keyframes crumb-drop{0%{opacity:0}20%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translate(7px,27px)}}@keyframes firefly-drift{0%,100%{opacity:0;transform:translate(0,0)}35%{opacity:.8}70%{opacity:.2;transform:translate(25px,-22px)}}
/* The shop is a quiet display inside the same world. */
dialog{max-height:calc(100svh - 48px);border-radius:22px!important;width:min(1060px,92vw);background:#f8f1e4}dialog::backdrop{background:#241a2477;backdrop-filter:blur(8px)}dialog .world-dock,dialog .scene-topline .scene-meta,dialog .cast-footer{display:none!important}dialog .light-page{padding:40px 40px 34px;min-height:0}dialog .page-head{padding:0;margin-bottom:27px}dialog .page-head h1{font:clamp(32px,4.2vw,58px)/1.02 Georgia;margin:0 25px 0 0;letter-spacing:-.045em}dialog .product-grid{grid-template-columns:repeat(3,1fr);gap:32px 26px}dialog .product-photo{aspect-ratio:1;border-radius:45% 45% 9px 9px;overflow:hidden}dialog .product-photo img{height:100%;width:100%;object-fit:cover;transform:none!important}dialog .shop-window-arrival{height:210px;border:0;border-radius:90px 90px 12px 12px;margin-bottom:32px;overflow:hidden}dialog .shop-window-arrival>img{object-fit:cover;object-position:center 45%;width:100%;height:100%}.product-card{opacity:1!important;transform:none!important;padding-bottom:0!important;transition:none!important}.product-card .product-photo{transition:box-shadow .3s}.product-card:hover .product-photo{box-shadow:0 6px 18px #6245291a}.product-card h3{margin:12px 0 0!important;font:20px/1.2 Georgia!important}.shop-note{text-align:center;opacity:.6;margin-top:30px}.shop-note p{font-size:11px!important}dialog .dialog-toolbar{position:sticky;top:0;z-index:20;height:0;overflow:visible}dialog .dialog-close{background:#f8efdde8;color:#503b38;box-shadow:0 3px 14px #2c1d221a;border-radius:50%;right:10px;top:10px;position:absolute}.toast{z-index:100;bottom:25px!important}
@media(max-width:760px){.immersive-world,.film-entrance{--header:116px;--ledge:52px;--scene-width:100vw}.welcome-plaque{width:300px}.welcome-lettering{inset:29% 8% 12%}.welcome-lettering h1{font-size:31px;margin-bottom:4px}.welcome-lettering>span{font-size:10px}.welcome-lettering p{font-size:10px}.town-welcome{align-items:flex-start;padding-top:6px}.scene-tools{top:auto;bottom:max(6px,env(safe-area-inset-bottom));right:9px;gap:5px}.scene-tools button{min-width:36px;width:36px;height:36px;padding:7px}.scene-sound>span{display:none}.town-surround{border-left:0;border-right:0}.immersive-stage{width:calc((100svh - var(--header) - var(--ledge))*16/9);height:100%;min-width:100vw}.town-ledge{padding:0 10px;gap:7px}.town-ticket{width:128px;height:44px}.town-ticket span{font-size:10px}.town-carving{display:none}.social-badge{margin-left:5px;width:38px;height:38px}.ledge-replay{width:32px;min-width:32px;height:32px}.entrance-screen .intro-image{object-fit:cover;object-position:58% center}.enter-town{min-height:36px;top:94%;font-size:12px;padding:7px 20px}.entrance-ledge{justify-content:flex-start;padding:0 8px}.skip-film{font-size:11px}.physical-shop b{font-size:14px}dialog{width:94vw;max-height:94svh;border-radius:20px!important}dialog .light-page{padding:42px 20px 25px}dialog .product-grid{grid-template-columns:repeat(2,1fr);gap:25px 13px}.product-card h3{font-size:17px!important}dialog .shop-window-arrival{height:140px;border-radius:60px 60px 8px 8px;margin-bottom:25px}dialog .page-head{margin-bottom:22px}}
@media(max-height:580px) and (min-width:761px){.immersive-world,.film-entrance{--header:82px;--ledge:36px}.welcome-plaque{width:270px}.welcome-lettering h1{font-size:27px}.welcome-lettering>span,.welcome-lettering p{font-size:9px}.enter-town{font-size:12px;min-height:30px;padding:5px 18px}.town-ticket{height:34px;width:130px}.social-badge{width:32px;height:32px}.ledge-replay{width:28px;min-width:28px;height:28px}.scene-tools{top:16px}}
@media(prefers-reduced-motion:reduce){.immersive-world *,.film-entrance *{animation:none!important;transition:none!important}.night-fireflies{display:none}}
.reduced .immersive-world *,.reduced .film-entrance *{animation:none!important;transition:none!important}.reduced .night-fireflies{display:none}
/* A quiet, tactile turntable, loaded only after selecting a plush. */
dialog[data-panel=product]{width:min(760px,94vw);background:#f5ebde}dialog[data-panel=product] #dialog-content{padding:0}.plush-inspector{padding:29px 34px 23px;text-align:center}.plush-inspector h2{font:clamp(25px,3vw,36px)/1.2 Georgia;margin:0 30px 7px}.plush-stage{height:min(55svh,520px);min-height:270px;position:relative;background:radial-gradient(ellipse at 50% 60%,#fcebd5,transparent 72%);border-radius:26px;overflow:hidden}.plush-canvas,.viewer-photo{position:absolute;inset:0;width:100%;height:100%}.plush-canvas{cursor:grab;touch-action:none}.plush-canvas:active{cursor:grabbing}.plush-canvas canvas{display:block;width:100%;height:100%;outline:none}.plush-canvas canvas:focus-visible{box-shadow:inset 0 0 0 2px #98734f;border-radius:26px}.viewer-photo{object-fit:contain;mix-blend-mode:multiply;pointer-events:none}.viewer-photo[hidden],.plush-canvas[hidden]{display:none}.viewer-side-controls{position:absolute;right:6px;bottom:16px;display:flex;flex-direction:column;gap:5px}.viewer-side-controls button,.viewer-controls button{border:1px solid #997c5426;background:#fff9ed99;color:#694f3c;min-width:42px;min-height:42px;border-radius:50px;cursor:pointer;font:15px Georgia;padding:9px 13px}.viewer-controls{display:flex;justify-content:center;align-items:center;gap:8px}.viewer-controls i{height:18px;width:1px;background:#af977344;margin:0 4px}.viewer-controls button[aria-pressed=true]{background:#68503d;color:#fff0d8}.viewer-controls button:hover,.viewer-side-controls button:hover{box-shadow:0 3px 12px #50382220}.viewer-status{font:12px Georgia;color:#9a816a;min-height:16px;margin:7px 0 14px}.viewer-footer{display:flex;flex-direction:column;gap:6px;margin-top:22px}.viewer-footer>span{font:19px Georgia;color:#604b3e}.viewer-footer small{font:10px/1.5 Arial;color:#9e8977}@media(max-width:700px){.plush-inspector{padding:38px 14px 21px}.plush-stage{height:47svh;min-height:240px}.viewer-controls{gap:5px}.viewer-controls button{font-size:13px;padding:8px 10px}.plush-inspector h2{font-size:25px}}
/* Final optical alignment: keep lettering inside the gold rule and the shop fixed to its shutter. */
.welcome-lettering{bottom:17%}.physical-shop{width:118%}.physical-shop b{font-size:clamp(10px,1.06cqw,16px)}
@media(max-width:760px){.welcome-plaque{width:min(300px,calc(100vw - 80px))}.scene-tools{top:max(18px,env(safe-area-inset-top));right:6px;bottom:auto;flex-direction:column;gap:5px}.scene-tools button{min-width:32px;width:32px;height:32px;padding:6px}.scene-tools svg{width:17px;height:17px}.social-badge{margin-left:auto}.physical-shop b{font-size:13px}}
@media(max-width:360px){.welcome-lettering h1{font-size:25px;margin-bottom:3px}.welcome-lettering>span{font-size:9px}.welcome-lettering p{font-size:8.5px}.enter-town{font-size:11px;min-height:34px;padding:7px 17px}.town-ticket{width:122px}}