.mt-game { --mt-ink:#3d4f4a; --mt-mint:#7ccfba; color:var(--mt-ink); max-width:1280px; margin:0 auto; padding:clamp(10px,2vw,20px); border-radius:26px; background:#fff8ea; box-shadow:0 18px 45px rgba(61,79,74,.2); }
.mt-toolbar { display:flex; gap:14px; align-items:center; justify-content:space-between; margin-bottom:12px; }
.mt-toolbar strong { display:block; font-size:clamp(1rem,2.3vw,1.45rem); }
.mt-toolbar span { display:block; margin-top:3px; color:#687a74; font-size:.9rem; }
.mt-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.mt-actions button { min-height:42px; padding:8px 14px; border:2px solid #bfd8cf; border-radius:14px; background:#fff; color:var(--mt-ink); font:inherit; font-weight:800; cursor:pointer; box-shadow:0 3px 0 #bfd8cf; }
.mt-actions button:active { transform:translateY(2px); box-shadow:0 1px 0 #bfd8cf; }
.mt-actions button:disabled { opacity:.42; cursor:default; }
.mt-actions .mt-save { background:var(--mt-mint); border-color:#57ad98; color:#173d35; }
.mt-world { position:relative; width:min(100%,1040px); aspect-ratio:13/10; overflow:hidden; border-radius:20px; margin:0 auto; background:#cfdfd5; touch-action:none; user-select:none; box-shadow:inset 0 0 0 3px rgba(255,255,255,.72),0 8px 22px rgba(76,97,81,.18); cursor:grab; }
.mt-world.is-panning { cursor:grabbing; }
.mt-scene { --mt-wall-furniture-base:74%; position:absolute; inset:0 auto 0 0; width:230.769%; height:100%; transform:translate3d(-85%,0,0); transform-origin:0 0; will-change:transform; }
.mt-place-image { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:fill; pointer-events:none; transition:filter .28s ease; }
.mt-world[data-light="off"] .mt-place-image { filter:brightness(.68) saturate(.8) hue-rotate(7deg); }
.mt-world[data-light="off"]::after { content:""; position:absolute; inset:0; z-index:5000; pointer-events:none; background:rgba(44,57,93,.16); mix-blend-mode:multiply; }
.mt-window-night { position:absolute; z-index:2; left:35.75%; top:11.5%; width:21.85%; height:34.5%; border-radius:1%; opacity:0; pointer-events:none; transition:opacity .35s ease; background:radial-gradient(circle at 18% 24%,#fff9c7 0 1px,transparent 2px),radial-gradient(circle at 68% 17%,#fff9c7 0 1.5px,transparent 2.5px),radial-gradient(circle at 45% 48%,#fff 0 1px,transparent 2px),linear-gradient(#394f91 0%,#687bb0 56%,rgba(137,143,177,.55) 100%); mix-blend-mode:multiply; }
.mt-world[data-window="night"] .mt-window-night { opacity:.72; }
.mt-place-name,.mt-pan-hint { position:absolute; z-index:9001; padding:7px 12px; border-radius:999px; font-weight:900; pointer-events:none; }
.mt-place-name { left:2%; top:2%; background:rgba(255,248,234,.94); box-shadow:0 2px 8px rgba(61,79,74,.18); }
.mt-pan-hint { right:2%; bottom:2%; color:#fff; background:rgba(40,65,57,.82); font-size:.76rem; }
.mt-prop,.mt-character { position:absolute; z-index:100; padding:0; border:0; background:transparent; transform:translate(-50%,-100%); transform-origin:50% 100%; cursor:pointer; filter:drop-shadow(0 2px 2px rgba(83,76,55,.16)); touch-action:none; }
.mt-prop::before { content:""; position:absolute; z-index:-1; left:12%; right:12%; bottom:0; height:2.4%; border-radius:50%; background:rgba(92,71,48,.2); filter:blur(1px); }
.mt-character::before { content:""; position:absolute; z-index:-1; left:18%; right:18%; bottom:1%; height:5%; border-radius:50%; background:rgba(102,82,58,.18); filter:blur(2px); }
.mt-prop img,.mt-character img { display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom; pointer-events:none; -webkit-user-drag:none; }
.mt-prop > span { position:absolute; left:50%; bottom:-3px; transform:translate(-50%,100%); padding:3px 8px; border-radius:999px; background:rgba(255,255,255,.9); color:#456058; font-size:clamp(.58rem,.95vw,.74rem); font-weight:900; white-space:nowrap; opacity:0; transition:opacity .15s ease; }
.mt-prop:hover > span,.mt-prop:focus-visible > span { opacity:1; }
.mt-prop:hover,.mt-prop:focus-visible,.mt-character:focus-visible { outline:3px solid #ffd862; outline-offset:4px; border-radius:18px; }
.mt-prop:active { transform:translate(-50%,-98%) scale(.98); }
.mt-lamp { left:24%; top:var(--mt-wall-furniture-base); width:4.6%; height:32%; z-index:72; }
.mt-chest { left:50%; top:var(--mt-wall-furniture-base); width:7.6%; height:24%; z-index:74; }
.mt-wardrobe { left:73.5%; top:var(--mt-wall-furniture-base); width:10.7%; height:45%; z-index:70; }
.mt-character { left:57.666%; top:87%; width:4.8%; height:30%; cursor:grab; z-index:180; }
.mt-character[hidden] { display:none; }
.mt-character.is-dragging { cursor:grabbing; transform:translate(-50%,-104%) scale(1.04); z-index:1000; }
.mt-wear-items { position:absolute; z-index:230; display:grid; grid-template-columns:repeat(3,1fr); transform:translateX(-50%); touch-action:none; }
.mt-wear-items[hidden] { display:none; }
.mt-wear-items button { position:relative; min-width:0; padding:0; border:0; background:transparent; cursor:grab; touch-action:none; }
.mt-wear-items button img { display:block; width:100%; height:100%; object-fit:contain; opacity:.025; pointer-events:none; filter:drop-shadow(0 3px 4px rgba(63,53,43,.2)); }
.mt-wear-items button:hover { outline:2px dashed rgba(255,210,91,.8); outline-offset:1px; border-radius:8px; }
.mt-wear-items button.is-dragging { z-index:6000; cursor:grabbing; }
.mt-wear-items button.is-dragging img { opacity:1; }
.mt-clothes-rack { left:73.5%; top:47%; width:7.7%; height:19%; }
.mt-accessory-drawer-items { left:50%; top:58%; width:6.2%; height:8%; }
.mt-accessory-drawer-items button img { opacity:.02; }
.mt-accessory-image { position:absolute!important; left:50%; top:-1%; width:66%!important; height:auto!important; transform:translateX(-50%); z-index:4; filter:drop-shadow(0 1px 1px rgba(75,54,42,.14)); }
.mt-accessory-image[hidden] { display:none!important; }
.mt-scene-action { position:absolute; z-index:40; padding:0; border:0; background:transparent; cursor:pointer; touch-action:none; }
.mt-scene-action > span:last-child:not(.mt-reflection) { position:absolute; left:50%; bottom:0; transform:translate(-50%,100%); padding:3px 8px; border-radius:999px; background:rgba(255,255,255,.84); color:#49625b; font-size:clamp(.55rem,.85vw,.7rem); font-weight:900; white-space:nowrap; opacity:.58; transition:opacity .15s ease; }
.mt-scene-action:hover > span:last-child,.mt-scene-action:focus-visible > span:last-child { opacity:1; }
.mt-scene-action:focus-visible { outline:0; }
.mt-scene-action:focus-visible > span:last-child { box-shadow:0 0 0 3px #ffd862; }
.mt-bed-action { left:9%; top:77%; width:17%; height:55%; transform:translate(-50%,-100%); }
.mt-window-action { left:46%; top:61%; width:28%; height:43%; transform:translate(-50%,-100%); }
.mt-rug-action { left:49%; top:88%; width:25%; height:20%; transform:translate(-50%,-100%); z-index:45; }
.mt-rug-sparkles { position:absolute; z-index:35; left:37%; top:65%; width:25%; height:24%; pointer-events:none; opacity:0; transition:opacity .25s ease; }
.mt-world[data-rug="sparkle"] .mt-rug-sparkles { opacity:1; }
.mt-rug-sparkles i { position:absolute; width:12px; height:12px; background:#fff4a8; clip-path:polygon(50% 0,61% 37%,100% 50%,61% 63%,50% 100%,39% 63%,0 50%,39% 37%); animation:mt-twinkle 1.25s ease-in-out infinite alternate; filter:drop-shadow(0 0 4px #ffcc55); }
.mt-rug-sparkles i:nth-child(1){left:12%;top:28%}.mt-rug-sparkles i:nth-child(2){left:36%;top:62%;animation-delay:.2s}.mt-rug-sparkles i:nth-child(3){left:58%;top:20%;animation-delay:.5s}.mt-rug-sparkles i:nth-child(4){left:78%;top:54%;animation-delay:.8s}.mt-rug-sparkles i:nth-child(5){left:48%;top:43%;animation-delay:1s}
@keyframes mt-twinkle { from{transform:scale(.65) rotate(0);opacity:.55} to{transform:scale(1.25) rotate(20deg);opacity:1} }
.mt-sleep-bubble { position:absolute; z-index:120; left:7%; top:31%; padding:7px 12px; border-radius:50%; background:rgba(255,255,255,.88); color:#736799; font-weight:1000; font-size:clamp(.8rem,1.4vw,1.05rem); opacity:0; transform:scale(.7); transition:.25s ease; pointer-events:none; }
.mt-world[data-bed="sleeping"] .mt-sleep-bubble { opacity:1; transform:scale(1); animation:mt-sleep 1.6s ease-in-out infinite alternate; }
@keyframes mt-sleep { to{transform:translateY(-5px) scale(1.04)} }
.mt-mirror { left:82%; top:62%; width:7.2%; height:42%; transform:translate(-50%,-100%); border-radius:48%; z-index:80; }
.mt-mirror-label { bottom:-2%!important; }
.mt-reflection { position:absolute; inset:5% 11% 4%; overflow:hidden; border-radius:48%; opacity:.62; filter:saturate(.78) brightness(1.08); }
.mt-reflection[hidden] { display:none; }
.mt-reflection .mt-character-image { position:absolute; left:50%; bottom:-2%; width:88%; height:76%; object-fit:contain; transform:translateX(-50%) scaleX(-1); }
.mt-reflection .mt-accessory-image { top:18%; width:56%!important; transform:translateX(-50%) scaleX(-1); }
.mt-choice-tray { position:absolute; left:50%; bottom:4%; z-index:9100; width:min(90%,530px); padding:10px 12px 12px; transform:translateX(-50%); border:3px solid #fff2b6; border-radius:18px; background:rgba(47,72,64,.94); color:#fffbe5; box-shadow:0 10px 28px rgba(31,48,43,.3); }
.mt-choice-tray[hidden] { display:none; }
.mt-choice-tray > strong { display:block; margin-bottom:7px; text-align:center; font-size:.88rem; }
.mt-choice-tray > div { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.mt-choice-tray .mt-accessory-options { grid-template-columns:repeat(4,1fr); }
.mt-choice-tray button { display:flex; height:72px; align-items:center; justify-content:center; gap:6px; padding:5px 8px; border:2px solid transparent; border-radius:12px; background:#fff8ea; color:#3d4f4a; font:inherit; font-size:.76rem; font-weight:900; cursor:pointer; }
.mt-choice-tray button img { width:34px; height:58px; object-fit:contain; }
.mt-accessory-options button { flex-direction:column; height:76px; gap:1px; }
.mt-accessory-options button img { width:48px; height:45px; }
.mt-accessory-options button b { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#e7eee9; font-size:1.5rem; }
.mt-choice-tray button.is-selected { border-color:#ffbf47; background:#fff0bd; box-shadow:0 0 0 2px #ffdc79; }
.mt-status { position:absolute; left:50%; top:8%; z-index:9200; max-width:86%; padding:9px 15px; border-radius:999px; background:rgba(40,65,57,.94); color:#fff; font-weight:800; opacity:0; transform:translate(-50%,-8px); transition:.18s ease; pointer-events:none; }
.mt-status.is-visible { opacity:1; transform:translate(-50%,0); }
.mt-help { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
.mt-help span { padding:10px 12px; border-radius:14px; background:#eef8f4; font-size:.84rem; line-height:1.45; }
.mt-help b { display:block; color:#356c5f; }
@media (max-width:760px) { .mt-game{padding:8px;border-radius:18px}.mt-toolbar{align-items:stretch;flex-direction:column}.mt-actions{display:grid;grid-template-columns:1fr 1fr 1.35fr}.mt-actions button{min-height:40px;padding:6px 8px;font-size:.76rem}.mt-help{grid-template-columns:1fr;gap:6px}.mt-help span{padding:7px 10px}.mt-pan-hint{font-size:.64rem}.mt-choice-tray{padding:8px}.mt-choice-tray button{height:62px;padding:3px;font-size:.64rem;gap:2px}.mt-choice-tray button img{width:28px;height:48px}.mt-accessory-options button{height:65px}.mt-accessory-options button img{width:38px;height:38px}.mt-accessory-options button b{width:30px;height:30px} }
@media (prefers-reduced-motion:reduce) { .mt-rug-sparkles i,.mt-sleep-bubble{animation:none!important} }

/* Interactive play expansion */
.mt-toybox { left:35%; top:var(--mt-wall-furniture-base); width:10%; height:32%; z-index:73; }
.mt-plant { left:62%; top:var(--mt-wall-furniture-base); width:4.8%; height:24%; z-index:72; }
.mt-vanity { left:93%; top:var(--mt-wall-furniture-base); width:8.8%; height:43%; z-index:71; }
.mt-wear-items button img,.mt-drag-source img { -webkit-user-drag:none; pointer-events:none; }
.mt-toybox-items { left:35%; top:55%; width:8.6%; height:12%; grid-template-columns:repeat(4,1fr); }
.mt-vanity-items { left:93%; top:58%; width:5%; height:9%; grid-template-columns:repeat(2,1fr); }
.mt-drag-source { position:absolute; z-index:235; padding:0; border:0; background:transparent; cursor:grab; touch-action:none; filter:drop-shadow(0 2px 2px rgba(83,76,55,.2)); }
.mt-drag-source img { width:100%; height:100%; object-fit:contain; }
.mt-drag-source.is-dragging { z-index:6000; }
.mt-watering-can { left:66%; top:73%; width:3.7%; height:14%; transform:translate(-50%,-100%); }
.mt-blanket { left:14%; top:69%; width:5.2%; height:17%; transform:translate(-50%,-100%); }
.mt-curtains { position:absolute; z-index:15; left:35.65%; top:10.8%; width:22.05%; height:35.5%; overflow:hidden; pointer-events:none; }
.mt-curtains i { position:absolute; top:0; width:51%; height:100%; border:1px solid rgba(109,91,155,.16); border-radius:16% 16% 7% 7%; background:repeating-linear-gradient(90deg,#cabfec 0 13%,#b5a8df 14% 26%); opacity:0; transition:transform .35s ease,opacity .2s ease; }
.mt-curtains i:first-child { left:0; transform:translateX(-104%); }
.mt-curtains i:last-child { right:0; transform:translateX(104%); }
.mt-world[data-curtains="closed"] .mt-curtains i:first-child,.mt-world[data-curtains="closed"] .mt-curtains i:last-child { transform:translateX(0); opacity:.96; }
.mt-clock-action { left:62.2%; top:24%; width:2.5%; height:7.5%; transform:translate(-50%,-50%); border-radius:50%; background:#fff8dc; border:2px solid #79bda9; box-shadow:0 2px 0 #4a8979; display:grid; place-items:center; }
.mt-clock-action b { font-size:clamp(.9rem,2vw,1.45rem); }
.mt-plant .mt-prop-image { object-fit:contain; }
.mt-hair-image,.mt-glasses-image,.mt-held-image { position:absolute!important; pointer-events:none; object-fit:contain!important; z-index:5; }
.mt-hair-image { left:50%; top:-2%; width:92%!important; height:52%!important; transform:translateX(-50%); }
.mt-glasses-image { left:50%; top:18%; width:46%!important; height:22%!important; transform:translateX(-50%); z-index:7; }
.mt-held-image { right:-8%; bottom:4%; width:48%!important; height:40%!important; }
.mt-character[data-holding="watering"] .mt-held-image { right:-36%; bottom:-7%; width:108%!important; height:84%!important; }
.mt-hair-image[hidden],.mt-glasses-image[hidden],.mt-held-image[hidden] { display:none!important; }
.mt-reflection .mt-hair-image { left:50%; top:11%; width:78%!important; height:44%!important; transform:translateX(-50%) scaleX(-1); }
.mt-reflection .mt-glasses-image { left:50%; top:29%; width:40%!important; transform:translateX(-50%) scaleX(-1); }
.mt-reaction { position:absolute; z-index:12; left:76%; top:-6%; display:grid; place-items:center; min-width:30px; height:30px; padding:3px; border-radius:50%; background:#fff; box-shadow:0 3px 8px rgba(62,62,73,.2); opacity:0; transform:scale(.4); font-size:1.05rem; }
.mt-character.is-reacting .mt-reaction { animation:mt-pop 1s ease; }
.mt-character.is-twirling { animation:mt-twirl .65s ease; }
@keyframes mt-pop { 20%,75%{opacity:1;transform:scale(1.15)} 100%{opacity:0;transform:translateY(-8px) scale(.8)} }
@keyframes mt-twirl { 50%{transform:translate(-50%,-100%) rotate(8deg) scale(1.08)} }
.mt-toys button { position:absolute; z-index:160; width:3.7%; height:12%; padding:0; border:0; background:transparent; transform:translate(-50%,-100%); cursor:pointer; }
.mt-toys button img { width:100%; height:100%; object-fit:contain; pointer-events:none; }
.mt-toys button b { position:absolute; right:0; bottom:0; display:grid; place-items:center; min-width:20px; height:20px; border-radius:50%; background:#fff4b7; color:#5d4a25; font-size:.7rem; }
.mt-toys button.is-bouncing { animation:mt-bounce .6s ease; }
.mt-toys button.is-driving { animation:mt-drive .6s ease; }
.mt-drag-ghost { position:fixed; z-index:20000; width:auto; height:auto; max-width:92px; max-height:112px; transform:translate(-50%,-50%); pointer-events:none; filter:drop-shadow(0 5px 7px rgba(44,55,52,.25)); }
@keyframes mt-bounce { 50%{transform:translate(-50%,-180%) scale(.9)} }
@keyframes mt-drive { 50%{transform:translate(20%,-100%) rotate(-6deg)} }
.mt-sticker-book { position:absolute; inset:11% 12%; z-index:9500; padding:18px; border:4px solid #fff0a7; border-radius:24px; background:rgba(255,250,230,.97); box-shadow:0 16px 45px rgba(39,58,52,.35); }
.mt-sticker-book[hidden] { display:none; }
.mt-sticker-book header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; font-size:1.15rem; }
.mt-sticker-book header button { width:38px; height:38px; border:0; border-radius:50%; background:#6bbda7; color:#fff; font-size:1.35rem; cursor:pointer; }
.mt-sticker-book [data-sticker-grid] { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mt-sticker { min-height:95px; display:grid; place-items:center; padding:8px; border-radius:16px; background:#e5e9e6; color:#7b8783; text-align:center; font-weight:900; filter:grayscale(1); }
.mt-sticker.is-found { background:#fff0b5; color:#664d25; filter:none; animation:mt-sticker-in .45s ease; }
.mt-sticker i { display:block; font-style:normal; font-size:2rem; }
@keyframes mt-sticker-in { 50%{transform:scale(1.12) rotate(-3deg)} }
@media (max-width:760px) {
 .mt-actions{grid-template-columns:repeat(3,1fr)} .mt-actions button{padding:5px 6px;font-size:.68rem}
 .mt-sticker-book{inset:7% 5%;padding:12px}.mt-sticker-book [data-sticker-grid]{grid-template-columns:repeat(2,1fr)}.mt-sticker{min-height:72px;font-size:.72rem}
}
@media (max-width:960px) and (orientation:landscape) {
 html,body{overflow:hidden}
 .mt-game{position:fixed;inset:0;z-index:100000;width:100vw;height:100dvh;max-width:none;margin:0;padding:0;border-radius:0;background:#cfdfd5}
 .mt-toolbar{position:absolute;z-index:9900;inset:8px 8px auto;pointer-events:none;margin:0}
 .mt-toolbar>div:first-child{display:none}.mt-actions{margin-left:auto;display:flex}.mt-actions button{pointer-events:auto;min-height:34px;padding:4px 8px;background:rgba(255,255,255,.9)}
 .mt-world{width:100vw;height:100dvh;max-width:none;aspect-ratio:auto;border-radius:0;box-shadow:none}
 .mt-help{display:none}.mt-place-name{top:1%;left:1%}.mt-pan-hint{bottom:1%;right:1%}
}
@media (prefers-reduced-motion:reduce) { .mt-character.is-reacting .mt-reaction,.mt-character.is-twirling,.mt-toys button.is-bouncing,.mt-toys button.is-driving,.mt-sticker.is-found{animation:none!important} }
