/* Mons Dream House — Phase 1 (test) */
body.mdh #room{background:#3a2414}
body.mdh #room>.win,body.mdh #room>.shelf,body.mdh #room>.floor,body.mdh #room>.rug,body.mdh #room>.plant{display:none}
#mdhStage{position:absolute;pointer-events:none;z-index:0}
#mdhSky{position:absolute;left:25.5%;top:19.5%;width:49%;height:30.5%;background:#8ec9ff center/cover no-repeat;overflow:hidden}
#mdhRoom{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
#mdhRain{position:absolute;inset:0;display:none;background-image:repeating-linear-gradient(105deg,rgba(255,255,255,.55) 0 1px,transparent 1px 9px);background-size:40px 40px;animation:mdhRain .45s linear infinite;opacity:.7}
#room.rain #mdhRain{display:block}
#room.rain #mdhSky{filter:saturate(.55) brightness(.8)}
@keyframes mdhRain{to{background-position:-14px 40px}}
#mdhBtn{margin-left:auto;flex:none;border:2px solid #ffd23f;border-radius:6px;background:#3a2414;color:#fff3d6;font-weight:700;font-size:12px;line-height:1;padding:4px 8px;white-space:nowrap;cursor:pointer}
#mdhBtn .pin{margin-left:4px}
#room.night .shade{background:rgba(18,16,60,.28)}
@media (prefers-reduced-motion:reduce){#mdhRain{animation:none}}
#moodLine #moodTxt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#petCv{image-rendering:pixelated}
/* โหมดทดสอบ: ห้องใหญ่ห้องเดียว + กล้องตามม่อน */
html.mdh2 #mdhRoom{image-rendering:auto}
html.mdh2 #mdhBtn{display:none!important}
/* บ้านม่อนชุดใหม่ (โหมดทดสอบ) */
html.mdh2 #furn{display:none!important}
#h2Layer{position:absolute;inset:0;pointer-events:none}
.h2it{position:absolute;background:center bottom/contain no-repeat}
.h2list{display:flex;flex-direction:column;gap:6px;max-height:56vh;overflow-y:auto}
.h2row{display:flex;align-items:center;gap:8px;border:2px solid var(--ink);border-radius:10px;padding:6px;background:#fff}
.h2row .btn{flex:none;padding:8px 12px;font-size:15px}
.h2img{flex:none;width:64px;height:64px;background:center/contain no-repeat}
.h2img.big{width:140px;height:140px;margin:0 auto 6px}
.h2txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.h2txt small{font-size:12px;color:#6a6280}
.h2room{position:relative;width:min(100%,46vh);margin:0 auto;aspect-ratio:1122/1402;border:2px solid var(--ink);border-radius:8px;overflow:hidden}
.h2room>img{position:absolute;inset:0;width:100%;height:100%}
.h2room .h2ed{cursor:pointer;pointer-events:auto}
.h2grid{position:absolute;z-index:2}
.h2grid i{position:absolute;outline:1px dashed rgba(255,255,255,.45);box-sizing:border-box}
.h2grid i:active{background:rgba(255,210,63,.4)}
.h2chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.h2chip{display:flex;align-items:center;gap:4px;border:2px solid var(--ink);border-radius:8px;background:#fff;padding:3px 8px 3px 3px;font:inherit;font-size:13px;cursor:pointer}
.h2chip span{width:28px;height:28px;background:center/contain no-repeat}
.h2chip.on{background:var(--yellow)}
.h2chip.placed{opacity:.7}

/* ガチャ (โหมดทดสอบ) */
.gc-top{display:flex;justify-content:space-between;gap:8px;font-size:14px;margin:4px 0 8px}
.gc-used{background:#fff3cd;border:2px dashed var(--ink);border-radius:8px;padding:8px;text-align:center;font-size:14px}
.gc-h{font-size:15px;margin:12px 0 6px}
.gc-pool{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.gc-card{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border:2px solid var(--ink);border-radius:8px;padding:4px;font-size:10px;line-height:1.25}
.gc-card b{font-weight:600}
.gc-img{width:100%;aspect-ratio:1;background:center/contain no-repeat;image-rendering:auto}
.gc-card.big{padding:10px;font-size:16px;margin:6px auto;max-width:260px}
.gc-card.big .gc-img{width:180px}
.gc-card.big small{font-size:13px;color:#6a6280;margin-top:4px}
.gc-mine{display:flex;flex-direction:column;gap:6px}
.gc-mrow{display:flex;align-items:center;gap:8px}
.gc-mrow .gc-card{width:88px;flex:none}
.gc-mrow .btn{flex:1;font-size:14px;padding:8px}
.gc-on{flex:1;font-size:14px;color:#2e8b57;font-weight:700}
.gc-anim{display:flex;align-items:center;justify-content:center;height:220px}
.gc-cap{font-size:96px;animation:gcShake .25s ease-in-out infinite}
@keyframes gcShake{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg) scale(1.08)}}

/* ガチャ ทางเข้า (โหมดทดสอบ) */
#gcBadge{position:absolute;right:8px;top:10px;z-index:6;min-width:54px;min-height:54px;padding:4px 6px;border:3px solid var(--ink);border-radius:12px;background:#fff8e1;font-size:24px;line-height:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:0 3px 0 var(--ink);cursor:pointer}
#gcBadge b{font-size:11px;font-weight:700;white-space:nowrap}
#gcBadge .mdot{top:-6px;right:-6px}
#gcBadge.on{background:#ffd23f;animation:gcGlow 1.6s ease-in-out infinite}
@keyframes gcGlow{0%,100%{transform:scale(1);box-shadow:0 3px 0 var(--ink),0 0 0 0 rgba(255,210,63,.8)}50%{transform:scale(1.07);box-shadow:0 3px 0 var(--ink),0 0 14px 6px rgba(255,210,63,.75)}}
#navGacha{position:relative}
#navGacha small{display:block;font-size:10px;line-height:1.2;color:#6a6280}

/* モンス交換所 ร้านแลกม่อน (โหมดทดสอบ) — ธีม JRPG ญี่ปุ่น (ทอง ครีม แดงชาด ไม้ ดำ) · เจ้าของสั่ง 13 พ.ย. 2026 */
.mx{--mxg:#e8b923;--mxg2:#fff1a8;--mxr:#c8321e;--mxr2:#8e1c10;--mxw:#4a2a14;--mxw2:#2b170a;--mxc:#fbf0d4;--mxc2:#f3dfae;--mxk:#140c06;
 margin:-18px -16px calc(-18px - env(safe-area-inset-bottom));padding:12px 12px calc(16px + env(safe-area-inset-bottom));min-height:100%;
 background:radial-gradient(ellipse at 50% 0,#5c3519 0,transparent 60%),repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 2px,transparent 2px 22px),linear-gradient(#3d2210,#21120a);
 color:var(--mxc);overflow-x:hidden;box-sizing:border-box}
.mx *{box-sizing:border-box}
.mx-head{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:8px 10px;border:3px solid var(--mxk);border-radius:6px;
 background:linear-gradient(#d9442c,var(--mxr) 55%,var(--mxr2));box-shadow:inset 0 0 0 2px var(--mxg),inset 0 0 0 4px var(--mxr2),0 3px 0 var(--mxk)}
.mx-head>div{flex:1;min-width:0;text-align:center}
.mx-head h2{margin:0;padding:0;background:none;border:0;color:var(--mxg2);font-size:clamp(17px,5vw,21px);line-height:1.2;text-shadow:2px 2px 0 var(--mxk);overflow-wrap:anywhere}
.mx-head small{display:block;color:var(--mxg);font-size:11px;letter-spacing:2px;text-shadow:1px 1px 0 var(--mxk)}
.mx-kamon{color:var(--mxg);font-size:16px;text-shadow:1px 1px 0 var(--mxk);flex:none}
.mx-test{margin:0 0 8px;text-align:center;font-size:11px;color:#e9c98a}
.mx-win{position:relative;background:linear-gradient(var(--mxc),var(--mxc2));color:#3a2414;border:3px solid var(--mxk);border-radius:6px;
 box-shadow:inset 0 0 0 2px var(--mxg),inset 0 0 0 4px #b98a2c,0 3px 0 var(--mxk);padding:10px 12px}
.mx-win::before,.mx-win::after{content:'';position:absolute;top:4px;width:6px;height:6px;background:var(--mxg);box-shadow:0 0 0 1px var(--mxk)}
.mx-win::before{left:4px}.mx-win::after{right:4px}
.mx-info{display:flex;justify-content:space-between;gap:8px}
.mx-info div{display:flex;flex-direction:column;min-width:0}.mx-info div:last-child{text-align:right;align-items:flex-end}
.mx-info small{font-size:11px;color:#7a5a32}.mx-info b{font-size:20px;color:var(--mxr2);line-height:1.2}
.mx-ribbon{margin:8px 0;padding:6px 10px;text-align:center;font-size:13px;border:2px solid var(--mxk);border-radius:4px;box-shadow:0 2px 0 var(--mxk)}
.mx-ribbon.on{background:linear-gradient(#3f9a5a,#2a7442);color:#fff;text-shadow:1px 1px 0 #0d2a16}
.mx-ribbon.off{background:linear-gradient(#5a4a3a,#3a2e22);color:#f5e6c4}
.mx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mx-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px 8px;cursor:pointer;text-align:center;
 background:linear-gradient(var(--mxc),var(--mxc2));color:#3a2414;border:3px solid var(--mxk);border-radius:6px;box-shadow:inset 0 0 0 2px #b98a2c,0 3px 0 var(--mxk);transition:transform .12s}
.mx-card:active{transform:translateY(2px)}
.mx-card.sel{box-shadow:inset 0 0 0 2px var(--mxg),inset 0 0 0 4px var(--mxg2),0 0 0 3px var(--mxg),0 0 14px 3px rgba(255,210,63,.7);animation:mxSel 1.6s ease-in-out infinite}
.mx-stage{position:relative;width:100%;aspect-ratio:4/3;display:flex;align-items:flex-end;justify-content:center;
 background:radial-gradient(ellipse 60% 14% at 50% 92%,rgba(74,42,20,.28),transparent 70%)}
.mx-stage img{display:block;max-width:92%;max-height:96%;object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges;-webkit-user-drag:none}
.mx-name{font-size:13px;line-height:1.25;min-height:2.5em;display:flex;align-items:center;justify-content:center;overflow-wrap:anywhere}
.mx-btn{display:block;width:100%;margin:8px 0 0;padding:12px 10px;min-height:46px;font:inherit;font-size:16px;cursor:pointer;color:#3a2414;
 background:linear-gradient(var(--mxc),var(--mxc2));border:3px solid var(--mxk);border-radius:6px;box-shadow:inset 0 0 0 2px #b98a2c,0 4px 0 var(--mxk);text-align:center}
.mx-btn.mini{margin:auto 0 0;padding:5px 6px;min-height:32px;font-size:13px}
.mx-btn.red{color:var(--mxg2);text-shadow:1px 1px 0 var(--mxk);background:linear-gradient(#e0533a,var(--mxr) 55%,var(--mxr2));box-shadow:inset 0 0 0 2px var(--mxg),0 4px 0 var(--mxk)}
.mx-btn:active{transform:translateY(3px);box-shadow:inset 0 0 0 2px #b98a2c,0 1px 0 var(--mxk)}
.mx-btn[disabled]{opacity:.5;filter:grayscale(.6);cursor:not-allowed;transform:none}
.mx-card.sel .mx-btn{color:var(--mxg2);background:linear-gradient(#e0533a,var(--mxr) 55%,var(--mxr2));text-shadow:1px 1px 0 var(--mxk)}
.mx-own{position:absolute;top:6px;left:6px;z-index:2;background:linear-gradient(#45b06a,#2a7a44);color:#fff;font-size:12px;font-weight:700;border:2px solid var(--mxk);border-radius:4px;padding:1px 7px;white-space:nowrap;text-shadow:1px 1px 0 #0d2a16;box-shadow:0 2px 0 var(--mxk)}
.mx-own b{color:var(--mxg2)}
.mx-hero{position:relative;width:min(100%,330px);margin:0 auto 4px;padding:6px;border:3px solid var(--mxk);border-radius:6px;
 background:radial-gradient(ellipse at 50% 40%,#fff8de,var(--mxc2) 70%);box-shadow:inset 0 0 0 2px var(--mxg),0 3px 0 var(--mxk)}
.mx-hero.sm{width:min(100%,240px)}
.mx-hero .mx-own{top:8px;left:8px}
.mx-desc{margin:6px 2px 8px;text-align:center;font-size:13px;color:#f5e6c4;line-height:1.45}
.mx-stat{display:flex;flex-direction:column;gap:0;padding:6px 12px}
.mx-stat>div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 0;border-bottom:2px dotted #c9a76a}
.mx-stat>div:last-child{border-bottom:0}
.mx-stat span{font-size:13px;color:#7a5a32;flex:none}.mx-stat b{font-size:15px;text-align:right;overflow-wrap:anywhere}
.mx-stat .hi b{color:var(--mxr2);font-size:19px}
.mx-cname{margin:6px 0;text-align:center;font-size:19px;color:var(--mxg2);text-shadow:2px 2px 0 var(--mxk)}
.mx-warn{margin:0 0 8px;padding:8px 10px;background:linear-gradient(#fff3c4,#f6d97a);color:#5a3a08;border:3px solid var(--mxk);border-radius:6px;font-size:14px;box-shadow:0 3px 0 var(--mxk)}
.mx-foot{margin:6px 0 0;font-size:12px;color:#e9c98a}
.mx-row{display:flex;gap:10px}.mx-row .mx-btn{flex:1}
.mx-msg{margin:0 0 4px;padding:8px 10px;text-align:center;font-size:14px;background:rgba(20,12,6,.55);border:2px solid var(--mxg);border-radius:6px;color:#fff3d0}
.mx-rays{position:relative;width:min(100%,300px);margin:6px auto 0;aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%}
.mx-rays>i{position:absolute;inset:-30%;background:repeating-conic-gradient(rgba(255,226,120,.38) 0 10deg,transparent 10deg 20deg);animation:mxSpin 14s linear infinite}
.mx-rays::after{content:'';position:absolute;inset:18%;border-radius:50%;background:radial-gradient(rgba(255,244,190,.85),rgba(255,214,90,.25) 60%,transparent 72%)}
.mx-rays .mx-stage{position:relative;z-index:1;width:78%}
.mx-spark{position:absolute;z-index:2;color:var(--mxg2);text-shadow:0 0 6px #ffd23f;font-size:22px;animation:mxTw 1.4s ease-in-out infinite}
.mx-spark.s1{top:14%;left:16%}.mx-spark.s2{top:22%;right:14%;animation-delay:.45s}.mx-spark.s3{bottom:18%;left:24%;animation-delay:.9s;font-size:16px}
.mx .gc-anim{height:260px}.mx-pop{font-size:96px;animation:mxPop .9s ease-out}
@keyframes mxSel{0%,100%{box-shadow:inset 0 0 0 2px var(--mxg),inset 0 0 0 4px var(--mxg2),0 0 0 3px var(--mxg),0 0 8px 2px rgba(255,210,63,.5)}50%{box-shadow:inset 0 0 0 2px var(--mxg),inset 0 0 0 4px var(--mxg2),0 0 0 3px var(--mxg),0 0 18px 5px rgba(255,210,63,.85)}}
@keyframes mxSpin{to{transform:rotate(360deg)}}
@keyframes mxTw{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
@keyframes mxPop{0%{transform:scale(.3)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.mx *,.mx-card.sel{animation:none!important;transition:none!important}}
@media (max-width:360px){.mx-grid{gap:7px}.mx-name{font-size:12px}.mx-own{font-size:11px;padding:1px 5px}.mx-info b{font-size:17px}}

#gcBadge[hidden],#navGacha[hidden]{display:none!important}

/* ห้องตามประเทศ: วิวหลังหน้าต่าง + ย้อมสีตามเวลา + อนุภาคอากาศ */
#mdhView{position:absolute;background:#8ec9ff center/cover no-repeat;overflow:hidden}
#mdhSkyT{position:absolute;inset:0;pointer-events:none}
#mdhFx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#mdhRoomT{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply}
#room[data-tod="night"] #mdhRoomT{mix-blend-mode:normal}

/* 15 พ.ย. 2026 พี่ริวสั่ง (+GPT): ปุ่มเดียวมุมขวาล่างของห้อง เปลี่ยนตามสถานะ · หีบทองตอนยังไม่รับของขวัญ */
#lbBadge{position:absolute;right:10px;bottom:12px;z-index:6;width:78px;min-height:78px;padding:4px 3px 5px;border:4px solid #21150f;border-radius:14px;background:#fff8e1;box-shadow:0 4px 0 #21150f;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;font-family:inherit;color:#21150f}
#lbBadge:active{transform:translateY(3px);box-shadow:0 1px 0 #21150f}
#lbBadge .lbi{font-size:32px;line-height:1;display:block}
#lbBadge b{font-size:12px;font-weight:800;line-height:1.1;text-align:center;white-space:nowrap;max-width:72px;overflow:hidden;text-overflow:ellipsis}
#lbBadge[hidden]{display:none!important}
#lbBadge.lb-gift{background:linear-gradient(180deg,#ffe3a0 0%,#f2b83f 55%,#e09a1f 100%);animation:lbHop 4s ease-in-out infinite}
#lbBadge.lb-gift b{color:#fff;text-shadow:-1px -1px 0 #7a2a10,1px -1px 0 #7a2a10,-1px 1px 0 #7a2a10,1px 1px 0 #7a2a10,0 2px 0 #7a2a10}
#lbBadge.lb-gift .lbi{filter:drop-shadow(0 2px 0 #7a2a10)}
#lbBadge .lbs{position:absolute;top:-12px;right:-12px;font-style:normal;font-size:22px;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 2px 0 #21150f);animation:lbSpin 2.4s ease-in-out infinite}
#lbBadge .lbsp{position:absolute;font-style:normal;color:#fff;font-size:12px;text-shadow:0 0 4px #ffd23f;opacity:0;animation:lbTw 2s ease-in-out infinite}
#lbBadge .lbsp.s1{left:6px;top:6px}#lbBadge .lbsp.s2{right:8px;bottom:22px;animation-delay:1s}
#lbBadge.lb-x2{background:linear-gradient(180deg,#fff3a8,#ffd23f);animation:gcGlow 1.6s ease-in-out infinite}
#lbBadge.lb-quest{background:#e3f1ff}#lbBadge.lb-gacha{background:#fff8e1}
#gcBadge{display:none!important} /* 15 พ.ย. 2026: ปุ่มแลกม่อนมุมขวาบนเอาออก (ไปอยู่ในปุ่มมุมขวาล่างหลังทำภารกิจครบ) */#lbBadge.lb-review{background:#e6f7e8}#lbBadge.lb-battle{background:#ffe1dc}
@keyframes lbHop{0%,82%,100%{transform:translateY(0)}86%{transform:translateY(-6px)}90%{transform:translateY(0)}94%{transform:translateY(-3px)}}
@keyframes lbSpin{0%,100%{transform:rotate(-12deg) scale(1)}50%{transform:rotate(12deg) scale(1.15)}}
@keyframes lbTw{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1.2)}}
@media (prefers-reduced-motion:reduce){#lbBadge,#lbBadge .lbs,#lbBadge .lbsp{animation:none!important}#lbBadge .lbsp{opacity:1}}