/*# v8.4: phòng vừa màn hình, tủ đồ, ngăn kéo */
/* ===== 8.4: phòng nhân vật vừa màn hình – tủ đồ bấm mở – kéo thả ===== */
.v8full.rx{width:100%;height:100vh;height:100dvh;min-height:0}
.rx>.v8in{display:flex;flex-direction:column;height:100%;padding:8px 10px calc(88px + var(--sab,0px))}
.rx .wtop{padding:4px 10px;margin-bottom:6px;border-radius:20px;flex:none;gap:6px}
.rx .wtop .av{width:38px;height:38px}
.rx .wtop b{font-size:1.02rem}
.rx .wtop small{font-size:.72rem}
.wtop .tool{flex:none;background:rgba(255,255,255,.25);border:2px solid #fff;color:#fff;border-radius:14px;height:34px;padding:0 8px;font:inherit;font-weight:900;font-size:.78rem;cursor:pointer;white-space:nowrap}
.rx .hint{flex:none;padding:3px 6px;margin-bottom:6px;border-radius:16px;gap:6px}
.rx .hint>img{width:34px}
.rx .hint .htx{font-size:.8rem;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rx .hint .hrw{width:34px;height:34px}.rx .hint .hrw img{width:30px;height:30px}
.rx .hint .btn{min-height:36px;padding:4px 10px;font-size:.82rem}
.rx .rm-stage{flex:1;min-height:0;height:auto;border-radius:22px;background-position:center 40%}
.rx .v8fig{bottom:2%;height:90%;z-index:2}
.rx .rm-name{top:6px;font-size:.9rem;padding:1px 10px}
.rx .rm-arw{top:auto;bottom:8px;width:44px;height:44px}
.rx .rm-arw.l{left:80px}.rx .rm-arw.r{right:80px}
.rx .rm-pet{right:78px;bottom:3%;height:26%}
.rx .shelf{left:78px;top:40px;max-height:46%}
.rx .rm-stage.over{outline:5px dashed #FFD23F;outline-offset:-8px;box-shadow:0 0 0 4px #fff,0 0 28px #FFD23F}
/* tủ đồ */
.rx-cabs{position:absolute;inset:40px 6px 6px;display:grid;grid-template-columns:auto auto;grid-template-rows:repeat(4,auto);grid-auto-flow:column;justify-content:space-between;align-content:start;gap:8px 0;z-index:6;pointer-events:none}
.cab{pointer-events:auto;position:relative;display:flex;flex-direction:column;align-items:center;gap:0;width:64px;background:none;border:0;padding:0;cursor:pointer;font:inherit;transition:transform .12s}
.cab:active{transform:scale(.94)}
.cab .dr{position:relative;display:grid;place-items:center;width:54px;height:52px;border-radius:10px 10px 4px 4px;border:3px solid #6B3A12;font-size:1.45rem;background:linear-gradient(90deg,#E3A85F 0 47%,#6B3A12 47% 53%,#E3A85F 53%);box-shadow:inset 0 -6px 0 #0002,0 5px 9px #0005}
.cab .dr:before,.cab .dr:after{content:"";position:absolute;top:58%;width:6px;height:6px;border-radius:50%;background:#FFE08A;border:1px solid #6B3A12}
.cab .dr:before{left:34%}.cab .dr:after{right:34%}
.cab b{margin-top:3px;font-size:.62rem;font-weight:900;line-height:1;color:#fff;background:var(--wc);border:2px solid #fff;border-radius:8px;padding:2px 5px;white-space:nowrap;box-shadow:0 2px 4px #0003}
.cab.on .dr{border-color:#FFD23F;background:linear-gradient(90deg,#A8742F 0 18%,#3A2210 18% 82%,#A8742F 82%);box-shadow:0 0 0 3px #FFD23F,0 5px 9px #0005}
.cab.on b{background:#FFB000;color:#4A2A00}
.cab .dot{position:absolute;top:-6px;right:-3px;font-style:normal;background:#E5484D;color:#fff;border-radius:10px;min-width:20px;height:20px;display:grid;place-items:center;font-size:.7rem;font-weight:900;border:2px solid #fff;z-index:2}
/* ngăn kéo đồ */
.rx-drawer{flex:none;margin-top:8px;background:rgba(255,255,255,.97);border:3px solid var(--wc2);border-radius:20px;padding:4px 8px 8px;box-shadow:0 6px 16px #0003}
.rx-dh{display:flex;align-items:center;gap:8px;padding:2px 2px 4px}
.rx-dh b{font-size:.95rem;color:var(--wci);white-space:nowrap}
.rx-dh span{flex:1;font-size:.72rem;color:#666;line-height:1.15}
.rx-dh .x{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--wc2);background:#fff;color:var(--wci);font-weight:900;cursor:pointer}
.rx-strip{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:6px 2px 4px;touch-action:pan-x;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.rx-strip .sep{flex:none;width:2px;background:var(--wc2);border-radius:2px;margin:4px 2px}
.rx-it{position:relative;flex:none;width:84px;height:104px;border:3px solid var(--wc2);background:var(--wcs);border-radius:16px;padding:4px 3px;font:inherit;font-size:.64rem;font-weight:800;color:var(--wci);cursor:grab;display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.1;touch-action:pan-x;user-select:none;-webkit-user-select:none}
.rx-it img,.rx-it .sapco{width:100%;height:64px;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.rx-it span{display:block;overflow:hidden;max-height:2.3em;text-align:center}
.rx-it .ico{font-size:2rem;height:64px;display:grid;place-items:center}
.rx-it.on{border-color:#FFB000;background:#FFF6D6;box-shadow:0 0 0 3px #FFD23F}
.rx-it.on:after{content:"✓";position:absolute;top:-7px;right:-7px;background:#2E9E5B;color:#fff;border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font-weight:900;border:2px solid #fff}
.rx-it.lk{background:#F1F1F1;border-color:#CCC;color:#888;cursor:pointer}
.rx-it.lk img{filter:brightness(0) opacity(.25)}
.rx-it.lk:before{content:"🔒";position:absolute;top:22px;left:50%;transform:translateX(-50%);font-size:1.3rem;z-index:1}
.rx-it.nw:before{content:"NEW";position:absolute;top:-7px;left:-5px;background:#E5484D;color:#fff;font-size:.6rem;border-radius:8px;padding:1px 5px;z-index:1}
.rx-it.off{cursor:pointer;background:#fff}
.rx-it.drag{opacity:.35}
.rx-ghost{position:fixed;z-index:9999;width:92px;height:92px;object-fit:contain;pointer-events:none;transform:translate(-50%,-70%) rotate(-6deg);filter:drop-shadow(0 10px 8px #0006)}
/* phòng Luna */
.rx .lunabox{flex:1;height:auto;min-height:0;margin:0;border-radius:20px}
nav.bar4 button{font-size:.72rem;white-space:nowrap;padding:3px 1px 4px}
nav.bar4 button img{width:36px;height:36px}
.rx>.v8in{padding-bottom:calc(84px + var(--sab,0px))}
.rx .wtop .tt b,.rx .wtop .tt small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rx .wtop .tool{padding:0 6px;height:32px}
.sp-lang{position:absolute;top:max(12px,env(safe-area-inset-top));left:12px;z-index:5;border:0;border-radius:999px;padding:8px 14px;font:700 .95rem/1 inherit;font-family:inherit;background:rgba(255,255,255,.92);color:#2b2a5a;box-shadow:0 3px 10px rgba(0,0,0,.18);cursor:pointer}

