/* Mansion Treasures (GENERAL SUPERGROK 2026-10-06) — same premium storybook look as the landing and Play World. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mt{padding-bottom:calc(30px + env(safe-area-inset-bottom,0px))}
.mt-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 11px 7px 8px;border-radius:999px;background:rgba(255,246,228,.1);box-shadow:0 0 0 1px rgba(255,217,154,.25) inset;font:900 14px var(--jp-sans);color:#fff6e4}
.mt-coin{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,#f2b84b 55%,#b9792a);box-shadow:0 0 10px rgba(255,200,110,.6)}
.mt-die{width:16px;height:16px;border-radius:4px;background:#fff6e4;box-shadow:inset 0 0 0 2px #7c5cd6}
.mt-hero{position:relative;min-height:min(62svh,560px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;padding:110px 0 26px}
.mt-hero .bg{position:absolute;inset:-6% 0 0;z-index:-3;background:#2a1e44 url("/jasons-place/assets/img/jp-hero-mansion-canva-1536x864.webp") center 40%/cover no-repeat;transform:scale(1.08)}
.mt-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(29,19,53,.5),rgba(29,19,53,.15) 30%,rgba(29,19,53,.7) 70%,#1d1335)}
.mt-hero h1{margin:12px 0 8px;font:700 clamp(46px,12vw,96px)/.95 var(--jp-serif);color:#fff8ec;text-shadow:0 6px 40px rgba(255,170,120,.4)}
.mt-hero p{max-width:600px;margin:0;color:#f3eaff;font-size:17px;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.mt-guide{display:flex;align-items:center;gap:12px;margin-top:18px;max-width:560px}
.mt-guide .ph{flex:none;width:72px;height:72px;border-radius:50%;padding:3px;background:conic-gradient(from 200deg,#ffc9a3,#e46b86,#7c5cd6,#2b8f93,#ffc9a3);box-shadow:0 0 26px rgba(255,190,140,.45)}
.mt-guide img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.mt-guide p{position:relative;padding:12px 14px;border-radius:18px;background:rgba(29,19,53,.75);box-shadow:0 0 0 1px rgba(255,217,154,.25) inset;font-weight:700;font-size:15px}
.mt-daily{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
@media(max-width:760px){.mt-daily{grid-template-columns:1fr}}
.mt-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:16px}
.mt-card h3{margin:6px 0 2px;font:700 20px/1.15 var(--jp-serif)}
.mt-card p{margin:0;color:#ddd2ee;font-size:14px}
.mt-card .jpx-btn{min-width:96px}
.mt-card .jpx-btn:disabled{opacity:.5;cursor:default;transform:none}
.mt-refill{margin-top:4px!important;color:var(--jp-peach)!important;font-weight:800}
@media(max-width:420px){.mt-card{grid-template-columns:auto 1fr}.mt-card .jpx-btn{grid-column:1/-1}}
.coin-stack{position:relative;width:58px;height:58px}
.coin-stack i{position:absolute;left:8px;width:42px;height:14px;border-radius:50%;background:radial-gradient(ellipse at 40% 30%,#fff3c4,#f2b84b 55%,#b9792a);box-shadow:0 2px 0 #8a5a1f,0 0 14px rgba(255,200,110,.45)}
.coin-stack i:nth-child(1){bottom:6px}.coin-stack i:nth-child(2){bottom:16px}.coin-stack i:nth-child(3){bottom:26px}
.mt-dice{display:flex;gap:6px;perspective:400px}
.die{position:relative;width:30px;height:30px;border-radius:8px;background:linear-gradient(145deg,#fffaf0,#efe0cf);box-shadow:inset 0 -3px 0 rgba(0,0,0,.12),0 6px 14px rgba(0,0,0,.35);display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:4px}
.die i{width:6px;height:6px;margin:auto;border-radius:50%;background:#4a2a6e}
.die.spin{animation:mtSpin .7s cubic-bezier(.3,1.4,.5,1)}
@keyframes mtSpin{0%{transform:rotateX(0) rotateZ(0) translateY(0)}40%{transform:rotateX(540deg) rotateZ(160deg) translateY(-18px)}100%{transform:rotateX(720deg) rotateZ(360deg) translateY(0)}}
.mt-progress{margin:-6px 0 16px;color:var(--jp-peach);font-weight:800;font-size:14px}
.mt-rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.mt-rooms{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.mt-rooms{grid-template-columns:1fr}}
.mt-roomcard{position:relative;display:block;width:100%;padding:0;border:0;border-radius:26px;overflow:hidden;cursor:pointer;color:#fff6e4;text-align:left;font:inherit;background:#2a1c48;box-shadow:0 22px 50px rgba(8,3,22,.5),0 0 0 1px rgba(255,217,154,.14) inset;transition:transform .4s var(--jp-ease)}
.mt-roomcard:hover{transform:translateY(-5px)}
.mt-roomcard img{width:100%;aspect-ratio:16/10;object-fit:cover}
.mt-roomcard .cap{position:absolute;inset:auto 0 0;padding:44px 16px 14px;background:linear-gradient(180deg,transparent,rgba(24,12,44,.94))}
.mt-roomcard b{display:block;font:700 22px var(--jp-serif)}
.mt-roomcard .gems{display:flex;gap:6px;margin-top:6px}
.mt-roomcard .gems i{width:14px;height:14px;transform:rotate(45deg);border-radius:3px;background:rgba(255,246,228,.22)}
.mt-roomcard .gems i.on{background:linear-gradient(135deg,#fff3c4,#f2b84b);box-shadow:0 0 10px rgba(255,200,110,.8)}
.mt-roomcard.done::after{content:"All found";position:absolute;top:12px;right:12px;padding:6px 10px;border-radius:999px;background:linear-gradient(135deg,#3bb3a8,#1f6f7d);font:900 10px var(--jp-sans);letter-spacing:.12em;text-transform:uppercase}
.mt-rules{margin-top:10px;padding:20px 22px}
.mt-rules h2{margin:0 0 10px;font:700 24px var(--jp-serif)}
.mt-rules ul{margin:0;padding-left:18px;display:grid;gap:6px;color:#e4daf2;font-size:14.5px}
.mt-links a{color:var(--jp-peach);font-weight:800}
/* room view */
.mt-room{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:#140c28}
.mt-room[hidden]{display:none}
.mt-room-top{display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px;background:rgba(29,19,53,.95)}
.mt-room-top b{flex:1;font:700 19px var(--jp-serif);text-align:center}
.mt-room-top span{font-weight:900;color:var(--jp-peach)}
.mt-back{border:0;border-radius:999px;padding:10px 14px;background:rgba(255,246,228,.12);color:#fff6e4;font:800 13px var(--jp-sans);cursor:pointer}
.mt-scene{position:relative;flex:1;overflow:hidden;display:grid;place-items:center}
.mt-scene img{width:100%;height:100%;object-fit:cover}
.mt-spot{position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;border:0;border-radius:50%;cursor:pointer;background:radial-gradient(circle,rgba(255,246,220,.55),rgba(255,214,150,.18) 45%,transparent 70%);animation:mtTwinkle 2.4s ease-in-out infinite}
.mt-spot::before,.mt-spot::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:3px;border-radius:2px;background:#fff7de;transform:translate(-50%,-50%);box-shadow:0 0 8px #ffe2a6}
.mt-spot::after{transform:translate(-50%,-50%) rotate(90deg)}
.mt-spot.hint{animation:mtHint .9s ease-in-out infinite}
.mt-spot.found{pointer-events:none;animation:none;background:none}
.mt-spot.found::before,.mt-spot.found::after{display:none}
.mt-prize{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fff7d6,#f2b84b 55%,#b9792a);box-shadow:0 0 0 3px rgba(255,246,228,.6),0 0 30px rgba(255,200,110,.85);animation:mtPop .6s var(--jp-pop)}
.mt-prize svg{width:26px;height:26px}
@keyframes mtTwinkle{50%{transform:scale(1.18);opacity:.75}}
@keyframes mtHint{50%{transform:scale(1.55);box-shadow:0 0 0 6px rgba(255,217,154,.35)}}
@keyframes mtPop{0%{transform:translate(-50%,-50%) scale(0)}70%{transform:translate(-50%,-50%) scale(1.25)}100%{transform:translate(-50%,-50%) scale(1)}}
.mt-room-bar{display:flex;align-items:center;gap:10px;padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(29,19,53,.95)}
.mt-room-bar p{flex:1;margin:0;font-weight:700;font-size:14.5px}
/* toast + coin burst */
.mt-toast{position:fixed;left:50%;top:calc(76px + env(safe-area-inset-top,0px));z-index:80;transform:translate(-50%,-30px);opacity:0;pointer-events:none;max-width:min(92vw,440px);padding:12px 18px;border-radius:18px;text-align:center;font:800 15px/1.35 var(--jp-sans);color:#2b1f55;background:linear-gradient(135deg,#fff6e4,#ffe2c4);box-shadow:0 18px 40px rgba(0,0,0,.4);transition:.45s var(--jp-pop)}
.mt-toast.on{transform:translate(-50%,0);opacity:1}
.mt-toast.jackpot{background:linear-gradient(135deg,#ffe2c4,#ff9a76 50%,#e8678a);color:#fff;font-size:18px}
.mt-burst{position:fixed;inset:0;z-index:79;pointer-events:none;overflow:hidden}
.mt-burst i{position:absolute;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7d6,#f2b84b 55%,#b9792a);box-shadow:0 0 10px rgba(255,200,110,.7)}
@media(prefers-reduced-motion:reduce){.mt-spot,.mt-spot.hint,.die.spin,.mt-prize{animation:none!important}}
.mt-stage{position:relative;width:min(100%,calc((100svh - 150px) * 4 / 3));aspect-ratio:4/3;border-radius:18px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.mt-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:640px){.mt-scene{align-items:center;padding:0 8px}.mt-stage{border-radius:14px}}

.mt-welcome{display:block;margin:0 0 14px;padding:14px 16px;border-radius:20px;color:#fff6e4;text-decoration:none;background:linear-gradient(135deg,rgba(255,154,118,.28),rgba(120,90,220,.28));box-shadow:0 0 0 1px rgba(255,217,154,.35) inset,0 14px 32px rgba(0,0,0,.3)}
.mt-welcome b{display:block;font:800 17px/1.2 var(--jp-serif,Georgia,serif);color:#ffd99a;margin-bottom:4px}
.mt-welcome span{font:600 13px/1.4 var(--jp-sans,system-ui)}
@media (max-width:430px){.mt .jpx-brand small{display:none}}