/* UI v2 sample (?ui=2) */
body.ui2{--lab-height:0px}
body.ui2 .v2-bar{display:none!important}
body.ui2 .topbar{height:58px!important;flex:0 0 58px!important;padding:0 10px!important;display:block}
.ui2-bar{height:100%;display:flex;align-items:center;gap:8px}
.ui2-me{display:flex;align-items:center;gap:8px;min-width:0;flex:1;padding:4px 10px 4px 4px;border:2px solid #fff;border-radius:99px;background:#fff8ec;box-shadow:0 3px #e2d3ec;font:inherit;color:#58416c;cursor:pointer;text-align:left}
.ui2-face{width:38px;height:38px;border-radius:50%;overflow:hidden;background:#dcf0e9;flex:none;display:grid;place-items:start center}
.ui2-face img{width:150%;margin-top:-2px;max-width:none}
.ui2-me b{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui2-coins{padding:8px 12px;border-radius:99px;background:#fff1c4;border:2px solid #fff;font-weight:900;color:#6b4a12;box-shadow:0 3px #e6c35d;white-space:nowrap}
.ui2-btn{position:relative;width:44px;height:44px;flex:none;border:2px solid #fff;border-radius:50%;background:#f4ecf8;box-shadow:0 3px #e2d3ec;font-size:20px;cursor:pointer;padding:0}
.ui2-btn.ready::after{content:"";position:absolute;top:0;right:0;width:11px;height:11px;border-radius:50%;background:#ff6fae;border:2px solid #fff}
/* the old stat row and heading move into the bar */
body.ui2 .hunter-progress,body.ui2 .town-heading .player-closeup,body.ui2 .town-heading h1,body.ui2 .new-day{display:none!important}
body.ui2 .town-heading{min-height:0;padding:0}
body.ui2 .town-heading p{margin:0;padding:6px 12px;border-radius:99px;background:#efe4f6;font-weight:800;font-size:13px;color:#6b4fa0;display:inline-block}
/* Town: one responsive scene, with the shelf and navigation in normal flow. */
body.ui2[data-place=town]{background:#d9f3ef;color:#624078;overflow:hidden}
body.ui2[data-place=town] .app{box-sizing:border-box;height:100dvh;min-height:0;max-width:1200px;width:100%;margin:0 auto;padding:calc(8px + env(safe-area-inset-top)) 0 env(safe-area-inset-bottom);display:flex;flex-direction:column;overflow:hidden;background:url('./assets/town-refined/plaza.png') center center/100% 100% no-repeat}
body.ui2[data-place=town] .topbar{height:60px!important;flex:0 0 60px!important;padding:0 14px 5px!important;background:none}
body.ui2[data-place=town] .ui2-bar{gap:10px;max-width:720px}
body.ui2[data-place=town] .ui2-me{flex:0 0 54px;width:54px;height:54px;min-width:0;padding:2px;justify-content:center;border:3px solid #fff9ef;background:#efe3ff;box-shadow:0 3px 0 #c6afd9;margin-right:auto}
body.ui2[data-place=town] .ui2-me b{display:none}
body.ui2[data-place=town] .ui2-face{width:44px;height:44px;background:#d9f2e7;position:relative}
body.ui2[data-place=town] .ui2-face img{width:200%;height:auto;position:absolute;top:-14px;left:-50%;margin:0}
body.ui2[data-place=town] .ui2-btn{width:46px;height:46px;font-size:23px;background:linear-gradient(#faf1ff,#ead7fc);border-color:#fffaf2}
body.ui2[data-place=town] .ui2-coins{font-size:19px;padding:8px 15px;border:2px solid #fffbed;background:linear-gradient(#fff7ce,#ffebb3)}
body.ui2[data-mode=hunt][data-place=town] #main{display:grid;grid-template-rows:40px minmax(0,1fr) clamp(126px,19dvh,174px)!important;gap:0!important;flex:1;min-height:0;margin:0;width:100%;max-width:none;padding:5px 0 0!important;overflow:visible}
.town-goal{display:flex;align-items:center;gap:12px;padding:4px 16px 4px 9px;margin:0 14px;border:2px solid #f7ecff;border-radius:25px;background:linear-gradient(110deg,#e8d4fae8,#efddf6f2);box-shadow:0 3px 5px #88739b15;color:#68428c;font:inherit;cursor:pointer;min-height:40px}
.town-goal>.shop-building{width:38px;height:43px;flex:none;filter:none;align-self:center}
.town-goal strong{font-size:14px;white-space:nowrap}
.town-goal progress{appearance:none;flex:1;min-width:20px;height:14px;border:2px solid #fff6fb;border-radius:15px;overflow:hidden;background:#f8edff;color:#b587e8}
.town-goal progress::-webkit-progress-bar{background:#f8edff}.town-goal progress::-webkit-progress-value{background:linear-gradient(#d4afff,#af71ee);border-radius:10px}.town-goal progress::-moz-progress-bar{background:#b587e8;border-radius:10px}
body.ui2[data-place=town] .town-street-section{position:relative;display:grid;grid-template-rows:minmax(0,1fr) 23px;min-height:0;gap:0;padding:6px 0 0}
body.ui2[data-place=town] .street-world{background:none;border:0;border-radius:0;box-shadow:none;min-height:0;position:relative;overflow:hidden;isolation:isolate}
body.ui2[data-place=town] .hunter-shops{display:flex;position:relative;inset:auto;width:100%;height:100%;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;padding:0 8%;gap:16%;scroll-padding-inline:8%;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
body.ui2[data-place=town] .hunter-shops:after{content:'';flex:0 0 0;height:1px}
body.ui2[data-place=town] .hunter-shop,body.ui2[data-place=town] .hunter-shop.locked{display:grid;grid-template-rows:minmax(0,1fr) 29px 39px;justify-items:center;align-items:stretch;gap:3px;flex:0 0 100%;height:100%;min-width:0;padding:0 0 3px;margin:0;border:0;border-radius:0;background:none;box-shadow:none;scroll-snap-align:center;scroll-snap-stop:always;overflow:visible;color:#64407a;cursor:pointer}
body.ui2[data-place=town] .town-building{width:100%;height:100%;min-height:0;display:block;position:relative}
body.ui2[data-place=town] .town-building .shop-building{width:100%;height:100%;min-height:0;background-size:contain;background-position:center bottom;filter:drop-shadow(0 7px 4px #80683930)}
body.ui2[data-place=town] .hunter-shop strong{display:flex;align-items:center;justify-content:center;min-width:160px;max-width:90%;height:29px;padding:0 20px;box-sizing:border-box;font-size:19px;line-height:1;border:1px solid #fffaf0;border-radius:25px;background:linear-gradient(#fffbed,#f8e4ba);box-shadow:0 3px 3px #a2794130;text-shadow:0 1px #fff}
.town-enter-label{display:flex;align-items:center;justify-content:center;gap:12px;min-width:158px;min-height:37px;padding:0 22px;border:2px solid #d4ffe7;border-radius:24px;box-shadow:0 3px #70c7a0;background:linear-gradient(#b9f4d9,#83e0bb);font-size:16px;font-weight:900;color:#235d51}
.town-enter-label svg{height:20px;width:20px}.locked .town-enter-label{background:#eee2f4;border-color:#fff4fb;color:#76558b;box-shadow:0 3px #bdaccb}
body.ui2[data-place=town] .street-navigation{position:static;gap:0;display:flex;justify-content:center;align-items:center;height:23px}
body.ui2[data-place=town] .street-arrow{position:absolute;z-index:3;top:47%;right:8px;width:42px;height:42px;min-height:42px;border:2px solid #fff8e6;background:linear-gradient(#fff9e9,#ffe8b8);box-shadow:0 3px 4px #95714130;color:#705486}
body.ui2[data-place=town] .street-arrow.previous{left:8px;right:auto}.street-arrow:disabled{opacity:.42}
body.ui2[data-place=town] .street-dots button{width:28px;height:23px;min-height:23px;opacity:.75}body.ui2[data-place=town] .street-dots button>span{height:7px;width:7px;background:#beb0cc}body.ui2[data-place=town] .street-dots button[aria-current=true]>span{width:12px;background:#a365e8}body.ui2[data-place=town] .street-dots svg{width:11px;height:11px}
.town-collection{position:relative;min-height:0;margin:0 5px;display:flex;flex-direction:column;gap:5px;padding:5px 9px 13px;border:3px solid #ffe9bf;border-bottom:7px solid #d5a76f;border-radius:24px 24px 7px 7px;background:repeating-linear-gradient(2deg,transparent 0 13px,#c38b4420 14px,transparent 16px),linear-gradient(#ffdda0,#eec183);box-shadow:inset 0 3px #fff1c5,0 3px 0 #b88d5b;isolation:isolate}
.town-collection:after{content:'';position:absolute;bottom:0;left:0;right:0;height:10px;background:linear-gradient(#ffe5ad,#e9b571);border-top:2px solid #fff0cf;box-shadow:0 -2px 5px #875a2220;pointer-events:none;z-index:2}
.town-collection-title{display:flex;align-items:center;justify-content:center;gap:12px;height:22px;flex:none;color:#efb139;text-shadow:0 1px #fff2b5}.town-collection h2{font-size:16px;line-height:22px;margin:0;color:#674285;text-shadow:0 1px #fff8d9}
.town-collection-title button{position:absolute;right:10px;top:3px;display:grid;place-items:center;width:30px;height:27px;border:0;background:#fff0d180;border-radius:10px;color:#795c91;cursor:pointer}.town-collection-title button svg{width:18px;height:18px}
.town-toy-rail{display:flex;align-items:stretch;gap:8px;flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain;padding:0 0 1px}
.town-toy-rail:not(:has(> :nth-child(5))){justify-content:center}
.town-owned,.town-toy-rail>.tr-waiting{display:grid;place-items:center;position:relative;flex:0 0 calc((100% - 24px)/4);min-width:76px;min-height:0;border:2px solid #fffcf0;border-radius:17px;background:linear-gradient(#fffcee,#fff2d3);box-shadow:0 3px 3px #ae7b4230;padding:3px;scroll-snap-align:start;cursor:pointer;container-type:size}
.town-owned>.toy,.town-owned>.world-art,.town-toy-rail>.tr-waiting>.toy{width:min(100cqw,100cqh)!important;height:min(100cqw,100cqh)!important;max-width:100%;max-height:100%;margin:0;filter:drop-shadow(0 3px 2px #ae743b20)}
.town-new{position:absolute;top:3px;right:3px;font-size:9px;font-weight:900;line-height:15px;padding:0 5px;border-radius:7px;background:#bc85ee;color:white;box-shadow:0 2px 2px #78529630}
body.ui2[data-place=town] .bottom-nav{position:relative;left:auto;bottom:auto;transform:none;display:flex;flex:0 0 74px;width:calc(100% - 8px);max-width:none;height:74px;margin:3px 4px 0;padding:3px!important;box-sizing:border-box;border:2px solid #fff5ff;border-bottom:4px solid #c3a9d6;border-radius:22px 22px 0 0;background:linear-gradient(#f4e8fb,#e9d7f3);box-shadow:none;gap:2px;z-index:5}
body.ui2[data-place=town] .bottom-nav button{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;justify-content:center;height:64px;min-height:44px!important;gap:0;border-radius:16px;font-size:12px;line-height:15px;padding:0!important;color:#735489}
body.ui2[data-place=town] .bottom-nav .nav-toy,body.ui2[data-place=town] .bottom-nav .world-art,body.ui2[data-place=town] .bottom-nav .expansion-art,body.ui2[data-place=town] .bottom-nav img{width:45px!important;height:45px!important;margin:0;object-fit:contain}
body.ui2[data-place=town] .bottom-nav button.active{background:linear-gradient(#fff6bc,#ffdf87);box-shadow:0 2px #d7ab4e;color:#624077}
body.ui2[data-place=town] button:focus-visible,.town-toy-rail:focus-visible{outline:3px solid #69509b;outline-offset:-2px}
@media(min-width:760px){body.ui2[data-place=town] .app{background-size:cover;background-position:center 63%;padding-top:14px}body.ui2[data-place=town] #main{grid-template-rows:44px minmax(0,1fr) 152px!important}body.ui2[data-place=town] .town-goal{width:520px;justify-self:center}body.ui2[data-place=town] .topbar{flex-basis:64px!important;height:64px!important}body.ui2[data-place=town] .town-street-section{width:100%;justify-self:center}body.ui2[data-place=town] .hunter-shops{padding-inline:calc((100% - 480px)/2);gap:100px}body.ui2[data-place=town] .hunter-shop,body.ui2[data-place=town] .hunter-shop.locked{flex-basis:480px}body.ui2[data-place=town] .street-arrow{right:calc(50% - 300px)}body.ui2[data-place=town] .street-arrow.previous{left:calc(50% - 300px)}.town-collection{width:640px;max-width:90%;justify-self:center}.town-owned{flex-basis:calc((100% - 40px)/6)}body.ui2[data-place=town] .bottom-nav{width:660px;max-width:94%;align-self:center;flex-basis:80px;height:80px;border-radius:24px 24px 0 0}body.ui2[data-place=town] .bottom-nav button{height:70px;font-size:13px}body.ui2[data-place=town] .bottom-nav .nav-toy,body.ui2[data-place=town] .bottom-nav .world-art,body.ui2[data-place=town] .bottom-nav img{width:48px!important;height:48px!important}}
@media(max-height:650px){body.ui2[data-place=town] .topbar{height:52px!important;flex-basis:52px!important}body.ui2[data-place=town] #main{grid-template-rows:36px minmax(0,1fr) 110px!important}body.ui2[data-place=town] .ui2-me{width:46px;height:46px;flex-basis:46px}body.ui2[data-place=town] .ui2-face{width:38px;height:38px}.town-goal{min-height:36px}.town-goal strong{font-size:12px}body.ui2[data-place=town] .bottom-nav{height:66px;flex-basis:66px}body.ui2[data-place=town] .bottom-nav button{height:56px}body.ui2[data-place=town] .bottom-nav .nav-toy,body.ui2[data-place=town] .bottom-nav .world-art,body.ui2[data-place=town] .bottom-nav img{width:36px!important;height:36px!important}body.ui2[data-place=town] .hunter-shop,body.ui2[data-place=town] .hunter-shop.locked{grid-template-rows:minmax(0,1fr) 24px 34px}.town-enter-label{min-height:30px;font-size:14px}body.ui2[data-place=town] .hunter-shop strong{height:24px;font-size:16px}}


body.ui2[data-mode=hunt][data-place=shop] #main{grid-template-rows:auto minmax(0,1fr) auto!important;gap:8px!important}
/* slimmer bottom nav */
body.ui2 .bottom-nav{padding:3px!important}
body.ui2 .bottom-nav button{min-height:54px!important;padding:2px!important}
body.ui2 .bottom-nav img,body.ui2 .bottom-nav .expansion-art{width:34px!important;height:34px!important}
body.ui2 .topbar>:not(.ui2-bar){display:none!important}
body.ui2 .shop-header .wallet{display:none!important}
/* ---- every screen (UI v2 rollout) ---- */
.ui2-bar{max-width:1100px;margin:0 auto}
@media(min-width:761px){.ui2-me{flex:0 1 auto;margin-right:auto}}
/* Room: one-line heading, one row of tools, toys visible */
body.ui2[data-place=home] .page-heading{margin:0 0 6px!important;min-height:0!important}
body.ui2[data-place=home] .page-heading p,body.ui2[data-place=home] .page-heading small{display:none!important}
body.ui2[data-place=home] .page-heading h1{font-size:22px!important;margin:0!important}
body.ui2[data-place=home] .room-tools{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;gap:8px!important;padding-bottom:4px;scrollbar-width:none;margin:0 0 8px!important}
body.ui2[data-place=home] .room-tools::-webkit-scrollbar{display:none}
body.ui2[data-place=home] .room-tools .btn{flex:none;white-space:nowrap;min-height:40px!important;padding:6px 12px!important;font-size:13px!important}
body.ui2[data-place=home] .room-instruction{display:none}
/* Trade: smaller mat, bigger toy tray */
body.ui2 .hunter-trade{grid-template-rows:55px 20px minmax(0,1fr) 132px!important}
body.ui2 .trade-footer{display:none!important}
body.ui2 .trade-tray,body.ui2 .tray-grid{height:auto!important;min-height:0}
body.ui2 .tray-grid{display:flex!important;gap:10px!important;overflow-x:auto;padding:6px 2px}
body.ui2 .tray-toy{flex:none;width:112px!important;height:118px!important}
body.ui2 .tray-toy .toy{width:84px!important;height:84px!important}
/* Play: scroll the page, give the play table real room */
body.ui2[data-place=play] .play-tabs,body.ui2[data-place=play] .play-toolbar,body.ui2[data-place=play] .photo-tools{display:flex}
.box-odds-chips{display:flex;justify-content:center;gap:14px;margin:4px 0 14px}
.box-odds-chips span{display:grid;justify-items:center;gap:2px}
.box-odds-chips .toy{width:46px;height:46px}
.box-odds-chips b{font-size:13px;color:#6f597e}
/* ---- no vertical scrolling on Room and Play (phones) ---- */
body.ui2[data-place=home] .milestones{display:none!important}
@media(max-width:760px){
 body.ui2[data-place=play] #main{display:flex!important;flex-direction:column!important;overflow:hidden!important;gap:8px!important;padding-bottom:0!important}
 body.ui2[data-place=play] #main>*{margin:0!important;flex:none}
 body.ui2[data-place=play] .footer-note{display:none!important}
 body.ui2[data-place=play] .play-tabs .btn{min-height:38px!important}
 body.ui2[data-place=play] .play-toolbar{height:22px!important;min-height:0!important}
 body.ui2[data-place=play] .play-toolbar .text-button{min-height:22px!important;padding:0!important;font-size:12px!important}
 body.ui2[data-place=play] .play-board{flex:1 1 auto!important;height:auto!important;min-height:160px!important}
 body.ui2[data-place=play] .photo-tools .btn{min-height:34px!important;padding:4px 10px!important}
 body.ui2[data-place=play] .play-collection-heading{display:none!important}
 body.ui2[data-place=play] .play-collection{padding:6px!important}
 body.ui2[data-place=play] .play-toys{height:86px!important;min-height:0!important}
 body.ui2[data-place=play] .play-toys>*{height:80px!important;min-height:0!important}
 body.ui2[data-place=play] .play-toys .toy{width:52px!important;height:52px!important}
}
/* one swipeable strip of every game */
body.ui2 .play-games{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;align-items:flex-start!important;gap:12px!important;overflow-x:auto!important;padding:8px 12px!important;scrollbar-width:none;margin:0!important}
body.ui2 .play-games::-webkit-scrollbar{display:none}
body.ui2 .play-games h2{display:none}
body.ui2 .play-games .dumpling-games{display:contents!important}
body.ui2 .play-games .game-app-icon{width:62px!important;height:62px!important;margin:0!important;border-width:2px!important}
body.ui2 .play-games>*,body.ui2 .play-games .dumpling-games>*{flex:none}
body.ui2 .v2-challenge-launch{width:112px!important;min-height:62px!important;padding:6px!important;font-size:12px!important;align-self:flex-start}
body.ui2 .v2-challenge-launch small{display:none}
body.ui2 .v2-arcade-tile{gap:2px}
body.ui2 .v2-arcade-tile b{font-size:11px;max-width:70px;line-height:1.1;text-align:center}
body.ui2[data-place=home] .room-collection{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:10px!important;scrollbar-width:none}
body.ui2[data-place=home] .room-collection::-webkit-scrollbar{display:none}
body.ui2[data-place=home] .room-collection>*{flex:0 0 108px!important}
@media(min-width:761px){
 body.ui2[data-place=home] .bedroom-scene{width:min(100%,calc((100svh - 400px) * 1.12))!important;margin-inline:auto!important}
}
@media(max-width:760px){body.ui2[data-place=home] .bedroom-scene{width:min(100%,calc((100svh - 400px) * 1.12))!important;margin-inline:auto!important}}
@media(min-width:761px){body.ui2[data-place=play] .page-heading{visibility:hidden!important;height:0!important;min-height:0!important;overflow:hidden!important;margin:0!important;padding:0!important}body.ui2[data-place=play] #main{grid-template-rows:0 48px 28px minmax(0,1fr) 44px 72px!important;row-gap:8px!important;padding-bottom:16px!important;box-sizing:border-box!important}}
/* friendly wait card */
.v2-wait{text-align:center;padding:10px 4px}
.v2-wait>span{display:block;font-size:72px;line-height:1.1;margin:6px 0}
.v2-wait h3{font-size:22px;color:#58416c;margin:6px 0}
.v2-wait p{color:#7a6690;margin:0 0 14px}
.v2-wait>button{display:block;width:100%;margin-top:8px}
.v2-wait .v2-wait-skip{font-size:13px;min-height:36px!important;background:none!important;box-shadow:none!important;border:0!important;text-decoration:underline;color:#7a6690!important}
/* trade buttons say what they do */
.trade-actions .mat-symbol{display:flex!important;flex-direction:row!important;align-items:center;justify-content:center;gap:6px}
.trade-actions .mat-symbol svg{width:22px!important;height:22px!important;flex:none}
.trade-actions .mat-symbol small{font-size:14px;font-weight:900;line-height:1}
.trade-actions .mat-symbol.accept.suggested{animation:nudge 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.trade-actions .mat-symbol.accept.suggested{animation:none}}

body.ui2[data-place=town] .ui2-me{display:flex!important}body.ui2[data-place=town] .ui2-me .v2l-goal{display:none}.town-toy-rail>.tr-waiting small{top:3px;right:3px;bottom:auto;left:auto;transform:none;max-width:90%;overflow:hidden;text-overflow:ellipsis}.town-toy-rail>.tr-waiting{height:auto}.town-building~.v2l-decor{bottom:76px!important;max-height:48px;object-fit:contain}