@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap');
:root{font-family:'DM Sans',system-ui,sans-serif;color:#30463d;background:#f4efdf;font-synthesis:none;--ink:#30463d;--muted:#7b8274;--paper:#fffdf6;--green:#365b49;--gold:#edba62;--line:#dddccd}
*{box-sizing:border-box}body{margin:0;overscroll-behavior:none}button,a,input{ -webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #bd752a;outline-offset:3px}button{border:0;background:none}svg{width:22px;height:22px;display:block;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}button svg{pointer-events:none}button:hover:not(:disabled){filter:brightness(.96)}[hidden]{display:none!important}
#app{height:100vh;height:100svh;display:flex;flex-direction:column;padding:0 max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));max-width:1920px;margin:auto;overflow:hidden}
.topbar{height:84px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;font-family:'Fraunces',Georgia,serif;font-size:25px;line-height:1}.brand b{font-weight:600}.brand small{display:block;font-family:'DM Sans',sans-serif;font-size:9px;letter-spacing:2px;font-weight:600;margin-top:8px;color:#7c8978}.brand-mark{width:42px;height:44px;border-radius:15px 15px 15px 4px;background:var(--gold);font-size:43px;line-height:39px;text-align:center;position:relative}.brand-mark span{position:absolute;font-size:15px;right:1px;top:-11px}.location{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:600}.location small{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:3px}.sun{font-size:29px;color:#ba8036}.top-actions{display:flex;gap:8px;align-items:center}#save-status{font-size:12px;color:#77866f;margin-right:9px}.icon-button{display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;width:40px;height:40px;background:#faf8ed}
#play-space{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;border:1px solid #dedbca;border-radius:22px;background:#e9e0c7;overflow:hidden;box-shadow:0 4px 24px #45502b09}.scene-header{height:40px;padding:0 17px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:#fff9eddd;z-index:8;border-bottom:1px solid #a49b7b22}.place-label{font-size:10px;letter-spacing:2px;font-weight:700;color:#6f7b64}.place-label span{font-size:9px;background:#e9e8d9;letter-spacing:0;padding:4px 7px;border-radius:5px;margin-left:7px}.scene-tools{display:flex;align-items:center;gap:4px}#zoom-label{font-size:11px;width:40px;text-align:center}.small-button{min-width:32px;min-height:32px;border-radius:7px;font-size:18px;display:flex;align-items:center;gap:6px;justify-content:center}.small-button span{font-size:12px}.small-button:hover{background:#e4e5d4}
#viewport{flex:1;min-height:0;overflow:auto;position:relative;touch-action:pan-x pan-y;background:#e9dfc8;scrollbar-width:thin;scrollbar-color:#9f9d77 transparent}#world{width:1600px;height:900px;position:relative;transform-origin:top left;margin:auto;isolation:isolate}.backplate{position:absolute;width:100%;height:100%;object-fit:fill;user-select:none;pointer-events:none}.finish{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply}#wall-finish{clip-path:polygon(0 0,100% 0,100% 58%,0 58%)}#floor-finish{clip-path:polygon(0 58%,100% 58%,100% 100%,0 100%)}
.entity{position:absolute;bottom:auto;padding:0;transform:translate(-50%,-100%);touch-action:none;user-select:none;-webkit-user-select:none;outline:0;border-radius:15px;background:transparent;min-width:44px;min-height:44px;overflow:visible}.entity.dragging{z-index:9999!important;filter:drop-shadow(0 16px 10px #352e2925);cursor:grabbing}.entity.selected .name-tag{opacity:1}.name-tag{position:absolute;left:50%;top:-22px;transform:translateX(-50%);font-size:18px;background:#fffdf0;border:1px solid #c7c8b1;padding:5px 14px;border-radius:20px;white-space:nowrap;opacity:0;pointer-events:none;color:#34513f;box-shadow:0 2px 4px #0001}.sprite-art{width:100%;height:100%;display:block;pointer-events:none;background-repeat:no-repeat}.entity.flipped>.sprite-art{transform:scaleX(-1)}.entity.seated .sprite-art{transform:scaleY(.82);transform-origin:bottom}.entity.seated.flipped .sprite-art{transform:scaleX(-1) scaleY(.82)}.count-badge{position:absolute;right:7px;bottom:8px;border-radius:20px;background:#fff9e6;color:#39553e;font-size:18px;padding:2px 8px;border:1px solid #baa97d}.sparkling{filter:drop-shadow(0 0 12px #fff1a3)}
.secret-spot{position:absolute;left:48%;top:11%;width:14%;height:28%;z-index:1;border:0;touch-action:manipulation}.secret-spot:focus-visible{outline:4px dashed #dfbd63}.note-spot{left:870px;top:414px;width:60px;height:65px;font-size:40px;z-index:2;color:#fff4c9;text-shadow:0 2px 4px #87683d}
.scene-bottom{height:39px;display:flex;align-items:center;justify-content:space-between;background:#fff9edee;padding:0 17px;gap:12px;flex-shrink:0;z-index:8}#hint{font-size:12px;color:#7c826e}.discovery-button{font-size:14px;white-space:nowrap;min-height:36px}.discovery-button:first-letter{color:#ab7c31}.discovery-label{font-size:12px;color:#7c826e}
.dock{height:88px;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;padding-bottom:env(safe-area-inset-bottom)}.dock-main{display:flex;gap:9px}.dock-button{height:59px;min-width:87px;border:1px solid transparent;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;font-size:11px;font-weight:600;position:relative}.dock-button svg{width:22px;height:22px}.dock-button.active{background:var(--green);color:#fffcef;box-shadow:0 3px 8px #304f3422}.dock-button:not(.active):hover{background:#e7e7d6}.dock-note{position:absolute;right:16px;font-family:'Fraunces',Georgia,serif;font-size:15px;line-height:1.2;color:#8b927d}.dock-note em{font-style:italic;color:#50684e}
#tray{flex-shrink:0;max-height:225px;background:var(--paper);border:1px solid var(--line);border-radius:18px;margin-top:9px;box-shadow:0 2px 10px #00000004;overflow:auto}.tray-heading{display:flex;align-items:center;justify-content:space-between;padding:12px 15px 0;gap:10px}.tray-heading h2{font-family:'Fraunces',Georgia,serif;font-size:18px;font-weight:500;margin:0}.tray-heading p{font-size:12px;color:var(--muted);margin:3px 0 0}.tray-close{min-width:38px;min-height:38px;border-radius:50%;font-size:24px}.tray-tabs{display:flex;gap:5px}.tray-tabs button{font-size:12px;padding:8px 12px;border-radius:18px;border:1px solid var(--line)}.tray-tabs button.active{background:#e4eadc;border-color:#adbb9e}.catalog-list{display:flex;gap:9px;padding:10px 15px 13px;overflow-x:auto;overscroll-behavior:contain}.catalog-card{flex-shrink:0;width:96px;min-height:105px;border:1px solid #e2e2d4;border-radius:12px;background:#f6f5ec;padding:6px 7px;font-size:11px;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center}.catalog-card .thumb{width:72px;height:65px;display:block}.catalog-card.active{border-color:#6c8c55;background:#eef1e3;box-shadow:inset 0 0 0 1px #6c8c55}.catalog-card .color-sample{width:58px;height:53px;border-radius:7px;border:1px solid #0002}.character-card .thumb{width:52px;height:75px}.character-card{min-height:115px}.outfit-list{display:flex;align-items:center;gap:20px}.outfit-group{display:flex;gap:8px}.outfit-group .catalog-card{width:100px}.selected-name{font-family:'Fraunces',Georgia,serif;font-size:20px}.tray-footnote{font-size:12px;color:var(--muted);padding:0 15px 12px}
#selection{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);z-index:15;display:flex;align-items:center;gap:6px;padding:6px 8px;background:#fffdf3f5;border:1px solid #d3d7c2;border-radius:13px;box-shadow:0 4px 20px #26392020;white-space:nowrap}#selection>span{font-size:12px;font-weight:600;padding:0 7px}#selection button{padding:8px;min-height:36px;font-size:12px;border-radius:8px;background:#edf0e2}#selection .remove{color:#9b5143;background:#f4e9dc}
#toast{position:fixed;bottom:105px;left:50%;transform:translate(-50%,12px);max-width:min(90vw,530px);background:#2d4c3f;color:#fffcec;font-size:14px;padding:13px 22px;border-radius:14px;opacity:0;pointer-events:none;transition:.2s;z-index:80;box-shadow:0 6px 24px #22392833;text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}dialog{padding:0;border:1px solid #d9d8c3;border-radius:24px;background:var(--paper);color:var(--ink);width:min(92vw,500px);max-height:85svh;box-shadow:0 20px 100px #23362655}dialog::backdrop{background:#27342670;backdrop-filter:blur(4px)}#dialog-content{padding:25px}dialog h2{font-family:'Fraunces',Georgia,serif;font-size:28px;margin:0 0 12px;font-weight:500}dialog h3{font-size:15px;margin:17px 0 6px}dialog p,dialog li{font-size:14px;line-height:1.7;color:#6c7867}.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.dialog-top button{font-size:25px;min-width:40px;min-height:40px}.dialog-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:17px}.action-button{padding:12px 15px;border-radius:10px;font-size:14px;background:#e9edde}.action-button.primary{background:var(--green);color:#fffdf1}.action-button.danger{background:#f3e4da;color:#92503e}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #e6e6d9;padding:12px 0;font-size:14px}.setting-row input{width:22px;height:22px;accent-color:#42634c}.discovery-item{border:1px solid var(--line);border-radius:12px;margin:10px 0;padding:13px}.discovery-item h3{margin:0;font-size:15px}.discovery-item p{font-size:13px;margin:5px 0 0}.reward-thumb{height:90px;width:90px;margin:10px auto}.empty-message{padding:20px;color:var(--muted);font-size:14px}
#loading{position:absolute;inset:0;background:#f3ecd9;z-index:50;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}#loading h1{font-family:'Fraunces',Georgia,serif;font-size:32px;font-weight:500;margin:10px}#loading p{color:#7c856e;font-size:14px}.loading-sun{font-size:44px;color:#c79942;animation:breathe 2s infinite}#rotate{display:none}@keyframes breathe{50%{opacity:.5;transform:rotate(15deg)}}
@media (min-width:1450px){#app{padding:0 40px}.topbar{height:95px}.dock{height:96px}}
@media (max-height:650px){#app{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}.topbar{height:55px}.brand{font-size:21px}.brand-mark{height:34px;width:32px;font-size:33px;line-height:30px}.brand small{display:none}.location small{display:none}.location{font-size:12px}.sun{font-size:22px}#save-status{font-size:10px}.icon-button{width:35px;height:35px}.scene-header{height:31px}.scene-bottom{height:30px}.dock{height:64px}.dock-button{height:49px;min-width:73px;font-size:10px;gap:3px}.dock-button svg{width:20px;height:20px}.dock-note{font-size:12px}#play-space{border-radius:15px}#tray{position:absolute;bottom:calc(66px + env(safe-area-inset-bottom));left:12px;right:12px;z-index:25;max-height:175px;box-shadow:0 -6px 22px #27391b25}.tray-heading{padding-top:5px}.tray-heading h2{font-size:16px}.tray-heading p{display:none}.catalog-list{padding-top:5px;padding-bottom:8px}.catalog-card{min-height:87px;width:87px}.catalog-card .thumb{height:50px;width:60px}.character-card .thumb{height:65px;width:44px}.character-card{min-height:95px}.tray-close{min-height:32px}.catalog-card .color-sample{height:38px}#selection{bottom:34px}#toast{bottom:75px}.tray-footnote{padding-bottom:5px;font-size:11px}}
@media (max-width:800px){.location{display:none}.dock-note{display:none}.brand{font-size:21px}.top-actions{gap:5px}#hint{font-size:10px}.discovery-label{display:none}.place-label{font-size:9px}.scene-bottom{padding:0 10px}.dock-main{gap:4px}.dock-button{min-width:68px}}
@media (orientation:portrait) and (max-width:1024px){#rotate{position:fixed;inset:0;background:#f4efdf;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;z-index:100;padding:30px}#rotate>span{font-size:75px;color:#b6863f}#rotate h2{font:500 30px 'Fraunces',Georgia,serif}#rotate p{font-size:16px;line-height:1.7;color:#7c856e}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.entity::before{content:'';position:absolute;left:calc(-1 * var(--hit-x,0px));right:calc(-1 * var(--hit-x,0px));top:calc(-1 * var(--hit-y,0px));bottom:calc(-1 * var(--hit-y,0px));pointer-events:auto}
#wall-finish{clip-path:polygon(evenodd,0 0,100% 0,100% 60%,0 60%,0 0,27% 6%,27% 53%,75% 53%,75% 6%,27% 6%)}
#floor-finish{clip-path:polygon(0 70.78%,18.375% 58%,83.75% 58%,100% 68.89%,100% 100%,0 100%)}
#wall-finish{clip-path:polygon(evenodd,0 0,100% 0,100% 68.89%,83.75% 58%,18.375% 58%,0 70.78%,0 0,28% 6%,28% 53%,75% 53%,75% 6%,28% 6%)}

/* These shadows follow the sprite alpha, including legs and gaps in the silhouette. */
.entity.selected>.sprite-art,.entity:focus-visible>.sprite-art,.entity.drop-target>.sprite-art{filter:drop-shadow(2px 0 0 #fff4a0) drop-shadow(-2px 0 0 #fff4a0) drop-shadow(0 2px 0 #fff4a0) drop-shadow(0 -2px 0 #fff4a0)}
.entity:focus-visible{outline:none}.entity:focus-visible>.sprite-art{filter:drop-shadow(3px 0 0 #80dfab) drop-shadow(-3px 0 0 #80dfab) drop-shadow(0 3px 0 #80dfab) drop-shadow(0 -3px 0 #80dfab)}
.entity.drop-target>.sprite-art{filter:drop-shadow(3px 0 0 #ffd455) drop-shadow(-3px 0 0 #ffd455) drop-shadow(0 3px 0 #ffd455) drop-shadow(0 -3px 0 #ffd455)}
.bed-cover{position:absolute;transform:translate(-50%,-100%);pointer-events:none}.bed-cover.flipped>.sprite-art{transform:scaleX(-1)}
.sleep-label{position:absolute;right:-8px;top:-14px;color:#304c65;font-weight:700;font-size:20px;pointer-events:none}
.capacity-label{font-size:11px;color:#62745e}.catalog-navigation{display:flex;gap:6px;margin-left:auto}.catalog-navigation button{border:1px solid var(--line);padding:8px 10px;border-radius:12px;font-size:12px;min-height:36px}
.catalog-card small{font-size:10px;color:#74806b}.room-card{width:115px}.variant-card{width:120px}.catalog-navigation button:hover{background:#e4eadc}
@media(max-height:650px){.room-card,.variant-card{width:108px}.catalog-card small{font-size:9px}.catalog-navigation button{padding:5px 8px;min-height:32px}#tray{max-height:185px}}
.entity:not(.sleeping)>.sleep-label{display:none}

.container-composite{position:relative}.container-composite>.sprite-art{position:absolute;inset:0}.stored-art{position:absolute;display:block;pointer-events:none}.container-front{pointer-events:none}

.trash-target{position:absolute;left:12px;top:96px;width:98px;height:112px;z-index:120;display:flex;align-items:center;justify-content:center;flex-direction:column;background:transparent;pointer-events:none;color:#30463d}
.trash-target .trash-can{position:relative;display:block;width:96px;height:96px;transform-origin:50% 88%;transform:rotate(var(--trash-tilt,0deg));transition:transform 60ms linear}
.trash-can img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.bin-fill{position:absolute;inset:0;background:#75bdb7;clip-path:polygon(9% 24%,91% 24%,80% 89%,75% 94%,25% 94%,20% 89%)}
.trash-target>span{font-size:11px;font-weight:700;background:transparent;padding:1px 7px;text-shadow:0 1px 2px #fff9e9}.trash-target.ready .trash-can{filter:drop-shadow(2px 0 0 #ffe29a) drop-shadow(-2px 0 0 #ffe29a) drop-shadow(0 2px 0 #ffe29a) drop-shadow(0 -2px 0 #ffe29a)}
.trash-ghost{position:fixed;z-index:119;pointer-events:none;transform-origin:center;will-change:transform,opacity}
@media(orientation:portrait) and (max-width:1024px){.trash-target{display:none}}
@media(max-height:650px){.trash-target{top:82px}}
.normalized-character{position:relative;overflow:visible}
.occupied-duvet{position:absolute;pointer-events:none}.bed-cover.flipped>.occupied-duvet{transform:scaleX(-1)}

#light-layer{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}.light-glow{position:absolute;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,#fff2af85 0%,#ffe29850 22%,#ffd47825 48%,transparent 72%);mix-blend-mode:screen;pointer-events:none}
.item-state{font-size:11px;color:#6c7867}.state-button{white-space:nowrap}#selection .state-button{background:#f7dda0;color:#4d492f}.tray-heading .state-button{font-size:12px;padding:8px 12px;min-height:36px}
@media(max-width:600px){.dock-main{width:100%;gap:2px}.dock-button{flex:1;min-width:0;padding:4px 2px;font-size:10px}.dock-note{display:none}}
#room-navigation{display:flex;align-items:center;justify-content:center;gap:6px;padding:5px 10px;flex-shrink:0;background:#fff9e9;border-bottom:1px solid #dddccd;overflow-x:auto;min-height:44px}.room-tab,.room-arrow{padding:8px 14px;min-height:34px;border-radius:10px;font-size:14px;white-space:nowrap}.room-tab.active{background:#365b49;color:#fffdf3}.room-arrow{background:#eef0e1;font-size:18px;padding:5px 12px}#selection{max-width:calc(100% - 16px);overflow-x:auto;justify-content:flex-start}#selection button{flex-shrink:0}
@media(max-height:650px){#room-navigation{min-height:39px;padding:3px 8px}.room-tab{padding:5px 10px;font-size:12px}.room-arrow{padding:3px 10px;min-height:30px}}
.doorway-layer{position:absolute;inset:0;pointer-events:none;z-index:4}
.layered-character{position:relative;overflow:visible}.layered-sleeper{clip-path:inset(0 -100% 0 -100%)}.character-rig,.character-layer{pointer-events:none;user-select:none}.character-layer{display:block}
.room-stage{position:relative;width:1600px;height:900px;margin:auto;overflow:hidden;isolation:isolate;transform-origin:top left}
.room-track{position:absolute;inset:0;width:1600px;height:900px;will-change:transform}
.room-track>#world{position:absolute;left:0;top:0;margin:0;overflow:hidden}
.room-scene{position:absolute;width:1600px;height:900px;overflow:hidden;isolation:isolate;pointer-events:none;background:#f5e7cb}
.room-scene .wall-finish{clip-path:polygon(0 0,100% 0,100% 58%,0 58%)}.room-scene .floor-finish{clip-path:polygon(0 58%,100% 58%,100% 100%,0 100%)}
.preview-lights{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.room-opening{position:absolute;top:0;width:240px;height:660px;overflow:hidden;pointer-events:none;background:#f5e7cb;clip-path:polygon(0 6%,92% 18%,92% 87%,0 100%)}
.room-opening.left{left:0}.room-opening.right{right:0;clip-path:polygon(8% 18%,100% 6%,100% 100%,8% 87%)}
.room-opening>.opening-view{left:-456px;top:12px;transform:scale(.72);transform-origin:top left}