/* Mansion Millions v2.0 estate board: Sol's night-estate art as the board, live gold hotspots, 3D crown dice, real panel. */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#060a18}
body.mm5{font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#f7efdc;-webkit-font-smoothing:antialiased;
  background:#060a18 url(/jasons-place/play/mansion-millions-v3-board/estate-board-v2-blur.webp) center/cover fixed}
body.mm5::before{content:"";position:fixed;inset:0;background:rgba(4,6,14,.72);backdrop-filter:blur(18px);z-index:0}
.mm5-app{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,auto) clamp(290px,24vw,360px);justify-content:center;gap:0;height:100vh;height:100dvh}
.mm5-boardbox{position:relative;height:100vh;height:100dvh;aspect-ratio:1195/941;max-width:calc(100vw - clamp(290px,24vw,360px));overflow:hidden;align-self:center}
.mm5-board{position:absolute;inset:0;transition:transform .6s cubic-bezier(.2,.8,.2,1),transform-origin .3s linear}
.mm5-art{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
@supports not (aspect-ratio:1){.mm5-boardbox{width:127vh}}
.mm5-boardbox{width:auto}
@media (min-aspect-ratio:1/1){.mm5-boardbox{height:min(100vh,calc((100vw - clamp(290px,24vw,360px)) * 941 / 1195))}}
/* hotspots on the painted tiles */
.mm5-spot{position:absolute;width:8.6%;height:12%;transform:translate(-50%,-50%);border-radius:10%;pointer-events:none;
  box-shadow:0 0 0 0 rgba(255,220,120,0);transition:box-shadow .3s,background .3s}
.mm5-spot::after{content:"";position:absolute;inset:-6%;border-radius:12%;border:2px solid rgba(255,236,170,0);transition:border-color .3s}
.mm5-board::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 50% at 50% 45%,transparent 60%,rgba(3,5,12,.25))}
.mm5-spot.here{background:rgba(255,226,140,.12);box-shadow:0 0 calc(var(--bw,1000px)*.03) calc(var(--bw,1000px)*.008) rgba(255,214,102,.85)}
.mm5-spot.here::after{border-color:rgba(255,244,200,.95)}
.mm5-spot.step{animation:mm5step .6s ease-out}
@keyframes mm5step{0%{background:rgba(255,246,200,.55);box-shadow:0 0 50px 18px rgba(255,220,110,.95)}100%{}}
.mm5-spot.win{animation:mm5win 1.2s ease 2}
@keyframes mm5win{0%,100%{background:rgba(255,226,140,.12)}40%{background:rgba(255,246,200,.5);box-shadow:0 0 70px 26px rgba(255,214,102,1)}}
/* token */
.mm5-piece{position:absolute;z-index:4;width:6.6%;aspect-ratio:1;transform:translate(-50%,-88%);transition:left .4s cubic-bezier(.3,.7,.3,1),top .4s cubic-bezier(.3,.7,.3,1);pointer-events:none}
.mm5-piece img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid #f5d27a;background:#1a1206;box-shadow:0 0 0 2px #5a3c0a,0 10px 14px rgba(0,0,0,.6),0 0 24px rgba(255,214,102,.8)}
.mm5-piece::after{content:"";position:absolute;left:10%;right:10%;bottom:-16%;height:22%;border-radius:50%;background:radial-gradient(rgba(0,0,0,.6),transparent 70%);z-index:-1}
.mm5-piece.hop img{animation:mm5hop .46s cubic-bezier(.3,.7,.4,1)}
@keyframes mm5hop{0%{transform:translateY(0)}45%{transform:translateY(-70%) scale(1.1)}80%{transform:translateY(4%) scale(1.05,.92)}100%{transform:none}}
/* 3D crown dice sit exactly on the painted dice */
.mm5-dice{position:absolute;inset:0;pointer-events:none;z-index:3}
.mm5-die{--s:calc(var(--bw,1000px)*.118);position:absolute;width:var(--s);height:var(--s);transform:translate(-50%,-50%);perspective:calc(var(--s)*8)}
#die-a{left:50.8%;top:80.6%}#die-b{left:63.9%;top:81.8%}
body.rolling .mm5-die{animation:mm5toss 1.4s cubic-bezier(.2,.7,.3,1)}
body.rolling #die-b{animation-delay:.07s}
@keyframes mm5toss{0%{transform:translate(-50%,-50%)}22%{transform:translate(-30%,-190%) scale(1.15)}50%{transform:translate(-45%,-70%) scale(1.05)}66%{transform:translate(-48%,-95%)}82%,100%{transform:translate(-50%,-50%)}}
.cube{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.face{position:absolute;inset:0;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:13%;border-radius:15%;
  background:radial-gradient(circle at 28% 22%,#fffbe2 0,#ffe48a 22%,#efb02a 58%,#9c600b 100%);box-shadow:inset 0 0 0 2px rgba(255,248,220,.9),inset 0 -10px 14px rgba(110,64,6,.5),inset 0 6px 9px rgba(255,255,255,.45)}
.face .pip{width:70%;height:70%;margin:auto;border-radius:50%;background:radial-gradient(circle at 38% 32%,#3c2606,#0d0801 72%);box-shadow:inset 0 2px 3px rgba(0,0,0,.75),0 1px 0 rgba(255,240,190,.7)}
.face .crown{grid-area:1/1/4/4;display:grid;place-items:center;font-size:calc(var(--s)*.6);line-height:1;color:#1a1003;text-shadow:0 1px 0 rgba(255,240,190,.8)}
.front{transform:translateZ(calc(var(--s)/2))}.back{transform:rotateY(180deg) translateZ(calc(var(--s)/2))}.right{transform:rotateY(90deg) translateZ(calc(var(--s)/2))}
.left{transform:rotateY(-90deg) translateZ(calc(var(--s)/2))}.top{transform:rotateX(90deg) translateZ(calc(var(--s)/2))}.bottom{transform:rotateX(-90deg) translateZ(calc(var(--s)/2))}
.mm5-total{position:absolute;z-index:6;left:50%;top:44%;margin:0;transform:translate(-50%,-50%);opacity:0;pointer-events:none;font:900 calc(var(--bw,1000px)*.075)/1 Georgia,serif;color:#fff6cf;text-shadow:0 0 30px #ffb800,0 5px 0 #7a4a00,0 10px 30px rgba(0,0,0,.6);white-space:nowrap}
.mm5-total.pop{animation:mm5pop 1.6s ease forwards}
@keyframes mm5pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}70%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-70%)}}
.mm5-quick{position:absolute;left:2.2%;top:89.2%;width:27%;height:7%;display:flex;gap:1.2%;z-index:5}
.mm5-quick button{flex:1;appearance:none;border:0;border-radius:8px;background:transparent;cursor:pointer}
.mm5-quick button:hover,.mm5-quick button:focus-visible{box-shadow:0 0 0 2px #ffe08a,0 0 18px rgba(255,214,102,.7);outline:0}
/* right panel */
.mm5-panel{display:flex;flex-direction:column;gap:10px;padding:14px 14px 12px;height:100vh;height:100dvh;overflow:auto;
  background:linear-gradient(180deg,rgba(10,12,26,.94),rgba(5,6,14,.97));border-left:2px solid #c89530;box-shadow:inset 1px 0 0 #f2cf73,-10px 0 40px rgba(0,0,0,.5)}
.mm5-wallet{display:flex;gap:8px}
.mm5-dollars{flex:1;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:14px;background:#07080f;border:1.5px solid #e4b85a;box-shadow:0 0 18px rgba(255,200,90,.2)}
.mm5-crowncoin{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-size:20px;color:#5a3a06;background:radial-gradient(circle at 32% 28%,#fff6cf,#f5c84a 45%,#a8690c);box-shadow:inset 0 0 0 2px #ffe9a0}
.mm5-dollars small,.mm5-level small{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#d9c48f}
.mm5-dollars b{font:800 22px/1.05 Georgia,serif;color:#fff}
.mm5-level{width:84px;padding:8px 10px;border-radius:14px;background:#07080f;border:1.5px solid #e4b85a;text-align:center}
.mm5-level b{display:block;font:800 20px/1 Georgia,serif;color:#f5d27a}
.mm5-level i{display:block;height:4px;margin-top:5px;border-radius:4px;background:#2a2210;overflow:hidden}.mm5-level i span{display:block;height:100%;width:0;background:linear-gradient(90deg,#f5d27a,#fff2b8)}
.mm5-card{padding:10px;border-radius:16px;background:rgba(8,10,20,.9);border:1.5px solid rgba(228,184,90,.75);box-shadow:inset 0 0 20px rgba(255,200,90,.06)}
.mm5-card header{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.mm5-card h2{margin:0;font:700 17px/1 Georgia,serif;letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(180deg,#fff7d0,#f5d27a 50%,#b07a1f);-webkit-background-clip:text;background-clip:text;color:transparent}
.mm5-card header small{font-size:10.5px;color:#d9c48f;letter-spacing:.06em;text-transform:uppercase}
.mm5-col{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.mm5-item{display:flex;flex-direction:column;gap:4px;padding:5px;border-radius:10px;background:#0c0f1d;border:1px solid rgba(228,184,90,.55);text-align:center}
.mm5-item b{font-size:10px;letter-spacing:-.01em;font-weight:700;color:#fff3d0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm5-item .pic{aspect-ratio:4/3;border-radius:7px;background:#121626 center/cover;display:grid;place-items:center}
.mm5-item .pic.gem{font-size:30px;color:#bfe9ff;text-shadow:0 0 14px rgba(150,220,255,.9);background:radial-gradient(circle,#1e3350,#080b14 75%)}
.mm5-item small{font-size:10px;color:#d9c48f}
.mm5-item.locked .pic{filter:grayscale(.85) brightness(.5)}
.mm5-item.full{border-color:#ffe08a;box-shadow:0 0 12px rgba(255,214,102,.45)}
.mm5-previews{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.mm5-pv{appearance:none;display:flex;flex-direction:column;gap:4px;padding:0;border:0;background:none;color:#fff3d0;cursor:pointer;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;text-align:center}
.mm5-pv .pic{position:relative;display:grid;place-items:center;aspect-ratio:16/10;border-radius:8px;background:#121626 center/cover;border:1px solid rgba(228,184,90,.7)}
.mm5-pv .pic i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-style:normal;font-size:12px;color:#fff;background:rgba(0,0,0,.55);border:1.5px solid #fff}
.mm5-pv:hover .pic,.mm5-pv:focus-visible .pic{box-shadow:0 0 0 2px #ffe08a,0 0 16px rgba(255,214,102,.6)}
.mm5-roll{appearance:none;border:0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;padding:12px 14px;border-radius:16px;color:#2a1803;text-transform:uppercase;
  background:linear-gradient(180deg,#fff4c8 0%,#f7d77e 30%,#d29b33 70%,#9a6514 100%);box-shadow:inset 0 0 0 2px #fff2b8,0 0 0 3px #5e400c,0 0 0 5px #d6a446,0 12px 26px rgba(0,0,0,.55),0 0 40px rgba(255,205,96,.4);transition:transform .15s,filter .15s}
.mm5-roll b{display:block;font:800 25px/1.05 Georgia,serif;letter-spacing:.04em}
.mm5-roll small{display:block;font-size:11px;letter-spacing:.14em;font-weight:700;margin-top:2px}
.mm5-chev{font-size:18px;color:#6b450a}
.mm5-roll:hover:not(:disabled){filter:brightness(1.07);transform:translateY(-1px)}
.mm5-roll:disabled{filter:saturate(.5) brightness(.7);cursor:not-allowed}
body.rolling .mm5-roll{animation:mm5pulse .5s ease infinite alternate}
@keyframes mm5pulse{to{box-shadow:inset 0 0 0 2px #fff2b8,0 0 0 3px #5e400c,0 0 0 5px #d6a446,0 0 60px rgba(255,214,102,.9)}}
.mm5-status{margin:0;padding:7px 10px;border-radius:10px;background:#07080f;border:1px solid rgba(228,184,90,.4);font-size:13px;text-align:center;min-height:2.6em}
.mm5-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mm5-tokbtn{display:flex;align-items:center;gap:6px;padding:5px 10px 5px 5px;border-radius:999px;border:1.5px solid rgba(228,184,90,.7);background:#0c0f1d;color:#f7efdc;cursor:pointer;font-size:12px}
.mm5-tokbtn img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1.5px solid #f5d27a}
.mm5-next{font-size:11.5px;color:#d9c48f}.mm5-next b{color:#fff}
.mm5-terms,.mm5-review{margin:0;font-size:10.5px;color:#b9ab86;text-align:center}
/* dialogs */
.mm5-dlg{border:0;border-radius:22px;padding:22px;width:min(580px,94vw);text-align:center;color:#f7efdc;overflow:visible;
  background:radial-gradient(120% 90% at 50% 0%,#28356a,#0a0d1c 70%);box-shadow:0 0 0 2px #f0c862,0 0 0 6px #2c1f06,0 0 0 8px #c89530,0 40px 90px rgba(0,0,0,.75)}
.mm5-dlg::backdrop{background:rgba(3,4,10,.7);backdrop-filter:blur(4px)}
.mm5-dlg h2{margin:4px 0 8px;font:700 28px/1.1 Georgia,serif;background:linear-gradient(180deg,#fff7d0,#f5d27a 50%,#b07a1f);-webkit-background-clip:text;background-clip:text;color:transparent}
.mm5-dlg-tok{border-radius:50%;border:4px solid #f5d27a;box-shadow:0 0 30px rgba(255,214,102,.6)}
.mm5-dlg video{display:block;width:100%;aspect-ratio:16/9;border-radius:14px;background:#000;box-shadow:0 0 0 2px #c89530}
.mm5-kicker{margin:0;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#efdcaa}
.mm5-amt{margin:12px 0 4px;font:800 42px/1 Georgia,serif;color:#fff6cf;text-shadow:0 0 22px rgba(255,190,40,.7)}
.mm5-reg{display:inline-flex;flex-direction:column;padding:8px 22px;border-radius:12px;background:#05070c;border:1.5px solid #c89530}
.mm5-reg span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#bda873}
.mm5-reg b{font:700 28px/1.1 ui-monospace,Menlo,Consolas,monospace;color:#9dffb6;text-shadow:0 0 12px rgba(80,255,140,.55)}
.mm5-dlg.watch .mm5-amt,.mm5-dlg.watch .mm5-reg,.mm5-dlg.watch #film-bonus{display:none}
.mm5-bank b{display:block;font:800 56px/1 Georgia,serif;color:#f5d27a}.mm5-bank small{color:#efdcaa}
.mm5-fine{font-size:12px;color:#cdbf9a}
.mm5-how{text-align:left;line-height:1.6;padding-left:20px}
.mm5-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.mm5-btn{appearance:none;border:0;border-radius:999px;padding:11px 24px;cursor:pointer;font:800 16px Georgia,serif;text-transform:uppercase;letter-spacing:.06em;color:#2a1803;background:linear-gradient(180deg,#fff4c8,#f7d77e 30%,#d29b33 70%,#9a6514);box-shadow:inset 0 0 0 2px #fff2b8,0 0 0 3px #5e400c}
.mm5-btn:disabled{filter:saturate(.4) brightness(.7)}
.mm5-ghost{appearance:none;border:1.5px solid rgba(242,207,115,.7);background:transparent;color:#f7efdc;border-radius:999px;padding:11px 20px;cursor:pointer;font-weight:700}
.mm5-switch{display:inline-flex;gap:8px;align-items:center;font-size:16px}
.mm5-burst{position:absolute;left:50%;top:38%;width:0;height:0;pointer-events:none;z-index:3}
.mm5-burst i{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;opacity:0;background:radial-gradient(circle at 35% 30%,#fff6cf,#f5c84a 45%,#a8690c);box-shadow:0 0 10px rgba(255,200,60,.7);animation:mm5fly 1.6s cubic-bezier(.2,.7,.3,1) forwards}
.mm5-burst i.bill{width:44px;height:22px;left:-22px;top:-11px;border-radius:3px;background:linear-gradient(135deg,#9be0a4,#3f9a52);box-shadow:inset 0 0 0 2px #d8f5dc}
@keyframes mm5fly{0%{opacity:1;transform:translate(0,0) rotate(0)}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 220px)) rotate(var(--r))}}
.mm5-tokens{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mm5-tok{appearance:none;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-radius:16px;cursor:pointer;color:#f7efdc;background:#0e1326;border:1.5px solid rgba(242,207,115,.35);font-size:13px}
.mm5-tok img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.mm5-tok[aria-checked=true]{border-color:#f5d27a;background:#1d1707;box-shadow:0 0 0 2px #f5d27a,0 0 20px rgba(245,210,122,.5)}
/* phones and narrow tablets: board on top, panel stacked below */
@media (max-width:900px){
  body.mm5::before{position:fixed}
  .mm5-app{display:block;height:auto}
  .mm5-boardbox{width:100vw;max-width:none;height:auto;aspect-ratio:1195/941}
  .mm5-panel{height:auto;overflow:visible;border-left:0;border-top:2px solid #c89530;box-shadow:inset 0 1px 0 #f2cf73;padding:12px 12px 24px}
  .mm5-wallet{order:0}.mm5-roll{order:1}.mm5-status{order:2}.mm5-row{order:3}.mm5-card{order:4}.mm5-terms{order:5}.mm5-review{order:6}
  .mm5-spot.here{box-shadow:0 0 12px 3px rgba(255,214,102,.85)}
  .mm5-piece{width:8%}
  .mm5-piece img{border-width:2px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.mm5-review a{color:#e7c873;text-decoration:underline}

/* 2026-10-16 founder fix: never crop a token. Thumbs are transparent and trimmed to the art,
   so cover-in-a-circle cut star tips, ears, tails and pedestals. Show the whole token (contain). */
.mm5-tok img{width:76px;height:76px;border-radius:0;object-fit:contain;object-position:center;filter:drop-shadow(0 3px 4px rgba(0,0,0,.55))}
.mm5-tokbtn img{object-fit:contain;padding:15%;box-sizing:border-box;background:#1a1206}
.mm5-piece img{object-fit:contain;padding:15%;box-sizing:border-box}