@charset "UTF-8";
/* Layout: one-screen game — HUD strip on top, isometric shop stage in the middle (with the shop sign,
   clock and settings floating in its corners), Tia Celeste's dialogue / toolbar in the footer.
   Single deliberate look: pastel boutique (mint walls, blush floor, rose accent, plum ink), chunky offset shadows. */
:root{
  --paper:#fbf1ec; --card:#fffaf7; --plum:#3a2340; --plum-soft:#6e5571;
  --rose:#d94f86; --blush:#f5d6d0; --mint:#c5e3d3; --gold:#e0a43a;
  --cash:#3c9561; --fc:#8a63d2; --danger:#b23a48; --line:rgba(58,35,64,.16); --white:#ffffff;
  --display:'Shrikhand', Georgia, serif;
  --body:'Quicksand', 'Trebuchet MS', system-ui, sans-serif;
}
html,body{height:100%}
[hidden]{display:none!important}
body{background:var(--paper);color:var(--plum);font-family:var(--body);font-weight:600;overflow:hidden}
.app{height:100%;display:flex;flex-direction:column;max-width:1100px;margin:0 auto;padding-inline:16px;box-sizing:border-box}

/* HUD */
.hud{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;padding-block:10px 4px}
.brand{font-family:var(--display);font-size:22px;color:var(--rose);line-height:1;text-shadow:2px 2px 0 var(--plum)}
.left{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.lvl{display:flex;align-items:center;gap:8px}
.lvl-badge{width:34px;height:34px;border-radius:50%;background:var(--plum);color:var(--white);display:grid;place-items:center;font-weight:700;font-size:15px;border:2px solid var(--fc);font-variant-numeric:tabular-nums}
.xp{display:flex;flex-direction:column;gap:3px}
.xp small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--plum-soft);font-variant-numeric:tabular-nums}
.xpbar{width:120px;height:8px;border-radius:99px;background:var(--blush);border:1.5px solid var(--plum);overflow:hidden}
.xpbar b{display:block;height:100%;width:0;background:var(--fc);transition:width .4s}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:flex;align-items:center;gap:6px;background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:3px 10px 3px 4px;font-variant-numeric:tabular-nums;font-weight:700;font-size:14px}
.chip i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:var(--white);font-style:normal;font-size:11px;font-weight:700}
.chip span{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--plum-soft);font-weight:700}

/* Stage */
.stage{flex:1;min-height:0;position:relative}
#cv{position:absolute;inset:0;width:100%;height:100%;touch-action:manipulation;cursor:pointer;display:block}
.shopsign{position:absolute;top:8px;left:0;display:flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;border:2px solid var(--plum);border-radius:12px;background:var(--card);box-shadow:2px 2px 0 var(--plum);font:inherit;color:var(--plum);cursor:pointer;text-align:left;min-height:44px;z-index:2}
.shopsign .dot{width:12px;height:12px;border-radius:50%;background:var(--cash);box-shadow:0 0 0 3px rgba(60,149,97,.2);flex:none}
.shopsign.closed .dot{background:var(--danger);box-shadow:0 0 0 3px rgba(178,58,72,.2)}
.shopsign .txt{display:flex;flex-direction:column;line-height:1.1}
.shopsign b{font-size:13px;letter-spacing:.08em}
.shopsign small{font-size:11px;color:var(--plum-soft);font-weight:600}
.shopsign:active{transform:translate(2px,2px);box-shadow:none}
.clock{position:absolute;top:60px;left:2px;font-size:12px;color:var(--plum-soft);font-variant-numeric:tabular-nums;z-index:2}
.iconbtn{position:absolute;top:8px;right:0;width:44px;height:44px;border-radius:12px;border:2px solid var(--plum);background:var(--card);color:var(--plum);box-shadow:2px 2px 0 var(--plum);display:grid;place-items:center;cursor:pointer;z-index:2}
.iconbtn:active{transform:translate(2px,2px);box-shadow:none}
.toast{position:absolute;bottom:34px;left:50%;transform:translate(-50%,6px);background:var(--plum);color:var(--white);padding:8px 14px;border-radius:12px;font-size:14px;max-width:min(440px,90%);text-align:center;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:3}
.toast.on{opacity:1;transform:translate(-50%,0)}
.saved{position:absolute;right:2px;bottom:6px;font-size:12px;color:var(--plum-soft);opacity:0;transition:opacity .5s;pointer-events:none}
.saved::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cash);margin-right:6px;vertical-align:1px}
.saved.on{opacity:1}
.devbtn{position:absolute;left:0;bottom:6px;font:inherit;font-size:12px;font-weight:700;letter-spacing:.08em;background:var(--plum);color:var(--gold);border:2px solid var(--gold);border-radius:10px;padding:8px 12px;cursor:pointer;z-index:2}

/* Level up card — sits over the stage without blocking play */
.levelup{position:absolute;top:8px;left:50%;transform:translateX(-50%);background:var(--card);border:2px solid var(--plum);border-radius:18px;box-shadow:4px 4px 0 var(--plum);padding:12px 18px;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:4;min-width:220px;max-width:calc(100% - 120px);pointer-events:none}
.levelup.pop{animation:lupop .55s cubic-bezier(.2,1.6,.4,1)}
@keyframes lupop{0%{transform:translateX(-50%) scale(.4);opacity:0}100%{transform:translateX(-50%) scale(1);opacity:1}}
.lu-title{font-family:var(--display);font-size:30px;color:var(--rose);text-shadow:2px 2px 0 var(--plum);line-height:1}
.lu-sub{font-size:12px;color:var(--fc);letter-spacing:.06em;text-transform:uppercase}
.lu-new{display:flex;align-items:center;gap:8px;font-size:14px;width:100%}
.lu-badge{background:var(--gold);color:var(--plum);font-size:10px;letter-spacing:.08em;padding:2px 6px;border-radius:6px;border:1.5px solid var(--plum)}
.dot{display:inline-block;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--plum);flex:none}
.dot.gold{background:var(--gold)} .dot.violet{background:var(--fc)} .dot.rose{background:var(--rose)}

/* Footer */
.foot{padding-block:8px 14px}
.dialog{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:2px solid var(--plum);border-radius:18px;padding:12px 14px;box-shadow:4px 4px 0 var(--plum)}
.dialog svg{flex:none;width:58px;height:58px}
.dbody{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.dname{font-family:var(--display);color:var(--rose);font-size:16px;line-height:1}
.dtext{font-size:15px;line-height:1.45;max-width:65ch}
.dstep{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--plum-soft)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hint{font-size:13px;color:var(--plum-soft);margin-left:auto}
.badge{position:absolute;top:-8px;right:-8px;background:var(--gold);color:var(--plum);border:2px solid var(--plum);border-radius:99px;font-size:11px;min-width:20px;height:20px;display:grid;place-items:center}

/* Buttons */
.btn{position:relative;font:inherit;font-weight:700;font-size:14px;background:var(--rose);color:var(--white);border:2px solid var(--plum);border-radius:12px;padding:9px 16px;min-height:42px;box-shadow:2px 2px 0 var(--plum);cursor:pointer;align-self:flex-start;transition:transform .08s}
.btn:active{transform:translate(2px,2px);box-shadow:none}
.btn:focus-visible,.card:focus-visible,.shopsign:focus-visible,.iconbtn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.btn.ghost{background:var(--card);color:var(--plum)}
.btn.green{background:var(--cash)} .btn.violet{background:var(--fc)} .btn.danger{background:var(--danger)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:2px 2px 0 var(--plum)}

/* Modals */
.back{position:fixed;inset:0;background:rgba(58,35,64,.45);display:grid;place-items:center;padding:16px;z-index:10}
.modal{background:var(--card);border:2px solid var(--plum);border-radius:20px;box-shadow:6px 6px 0 var(--plum);width:min(580px,100%);max-height:86vh;overflow:auto;-webkit-overflow-scrolling:touch;padding:18px;box-sizing:border-box;display:flex;flex-direction:column;gap:12px}
.modal.wide{width:min(760px,100%)}
.modal>*{flex-shrink:0}
.modal h2{font-family:var(--display);font-weight:400;color:var(--rose);font-size:24px;margin:0;line-height:1.15;text-wrap:balance}
.modal p{margin:0;line-height:1.45}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.binder{position:relative;padding-left:30px;background:linear-gradient(90deg,transparent 18px,var(--line) 18px,var(--line) 19.5px,transparent 19.5px)}
.binder::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:12px;background:radial-gradient(circle at 6px 6px,var(--paper) 4px,var(--plum) 4.5px,var(--plum) 6px,transparent 6.5px) 0 0/12px 46px repeat-y}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.card{border:1.5px solid var(--line);border-radius:14px;padding:10px;background:var(--white);text-align:left;font:inherit;color:var(--plum);display:flex;flex-direction:column;gap:5px}
.card .btn{align-self:stretch;margin-top:auto}
.card.pick{cursor:pointer} .card.pick:hover{border-color:var(--rose)}
.card.locked{opacity:.55}
.card .ic{height:58px;border-radius:10px;display:grid;place-items:center;background:var(--blush)}
.card strong{font-size:15px}
.meta{font-size:12px;color:var(--plum-soft);display:flex;gap:4px 10px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.price{font-size:15px;color:var(--cash);font-variant-numeric:tabular-nums} .price.fc{color:var(--fc)}
.tag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--plum-soft)}
.tag.light{color:var(--blush)}
.pill{font-size:12px;font-weight:700;padding:6px 10px;border-radius:99px;border:1.5px solid var(--plum);white-space:nowrap}
.pill.ok{background:var(--mint)}
.stack{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.task.upgrade{background:#fff7e6;border-color:var(--gold)}
.task.chest{background:#f4eefc;border-color:var(--fc)}
#bShow.ready{background:var(--plum);color:var(--white)}
.modal.show h2{font-size:22px}
.runway{width:100%;height:clamp(200px,34vh,300px);border-radius:14px;display:block;border:2px solid var(--plum)}
.slot-row{display:flex;flex-direction:column;gap:4px;padding:6px 0;border-top:1px solid var(--line)}
.pieces{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.piece{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;width:84px;min-height:72px;padding:6px 4px;border:1.5px solid var(--line);border-radius:12px;background:var(--white);font:inherit;font-size:11px;color:var(--plum);cursor:pointer;text-align:center;line-height:1.15}
.piece span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.piece.on{border-color:var(--rose);background:#fff1f6;box-shadow:inset 0 0 0 1px var(--rose)}
.piece.none{justify-content:center;color:var(--plum-soft);width:64px}
.piece:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.piece .fit{position:absolute;top:2px;right:4px;font-style:normal;color:var(--gold);font-size:13px}
.scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;align-items:end}
.score,.total{display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:12px;background:var(--white);border:1.5px solid var(--line)}
.score b,.total b{font-size:24px;font-variant-numeric:tabular-nums}
.total{border-color:var(--plum)} .total b{font-family:var(--display);font-weight:400;font-size:30px;color:var(--rose)}
.medal{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px;border-radius:12px;background:var(--medal);border:2px solid var(--plum);box-shadow:2px 2px 0 var(--plum)}
.medal span{font-family:var(--display);font-size:22px;color:var(--plum)} .medal em{font-style:normal;font-size:12px;font-weight:700;color:var(--plum)}
.rewards{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
.rewards span{font-weight:700;padding:6px 12px;border-radius:99px;background:#fff1f6;border:1.5px solid var(--rose)}
.task.muted{opacity:.7}
.chip.click{cursor:pointer}.chip.click:hover{border-color:var(--rose)}.chip.click:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.prog-body{display:flex;flex-direction:column;gap:10px}
.levels{display:flex;flex-direction:column;gap:6px;max-height:min(52vh,460px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding-right:4px;position:relative}
.lv-row{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:12px;border:1.5px solid var(--line);background:var(--white)}
.lv-row.past{opacity:.6}.lv-row.now{border-color:var(--rose);background:#fff1f6}.lv-row.next .lv-n{background:var(--blush);color:var(--plum)}
.lv-n{width:32px;height:32px;border-radius:50%;background:var(--plum);color:var(--white);display:grid;place-items:center;font-weight:700;flex:none;font-variant-numeric:tabular-nums}
.chips-s{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:4px}
.chip-s{display:inline-flex;align-items:center;gap:4px;font-size:12px;background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:2px 8px 2px 4px}
.chip-s .dot{width:10px;height:10px}
.tier-box{display:flex;flex-direction:column;gap:6px;border:1.5px solid var(--line);border-radius:14px;padding:12px;background:var(--white)}
.tier{display:flex;flex-direction:column;padding:6px 8px;border-radius:10px;opacity:.55}
.tier.on{opacity:1;background:var(--paper)}
.ach{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:20px;background:var(--blush);color:var(--plum-soft);flex:none}
.ach.on{background:var(--gold);color:var(--plum)}
.slot-empty{width:44px;height:44px;border-radius:12px;border:2px dashed var(--line);display:grid;place-items:center;color:var(--plum-soft);flex:none}
.timer.sm{font-size:16px}
.hovertip{position:absolute;z-index:5;pointer-events:none;background:var(--plum);color:var(--white);border-radius:10px;padding:7px 10px;font-size:12px;line-height:1.35;max-width:220px;box-shadow:2px 2px 0 rgba(0,0,0,.2)}
.hovertip b{display:block;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--gold)}
.task svg{flex:none}
.timer{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.task{display:flex;gap:10px;align-items:center;border:1.5px solid var(--line);border-radius:14px;padding:10px 12px;background:var(--white)}
.bar{height:8px;border-radius:99px;background:var(--blush);overflow:hidden}
.bar b{display:block;height:100%;background:var(--rose);transition:width .25s linear}
.ad{background:var(--plum);color:var(--white);border-radius:14px;padding:22px 18px;display:flex;flex-direction:column;gap:8px;text-align:center}
.ad .big{font-family:var(--display);font-size:28px;color:var(--gold)}
.ad .bar{background:rgba(255,255,255,.2)} .ad .bar b{background:var(--gold);transition:width 1s linear}
.switch{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border:1.5px solid var(--line);border-radius:14px;background:var(--white);cursor:pointer}
.switch input{width:22px;height:22px;accent-color:var(--rose);margin:0;flex:none}
.switch span{display:flex;flex-direction:column;gap:2px}
.switch small,.field small{font-size:12px;color:var(--plum-soft);font-weight:500}
.field{display:flex;flex-direction:column;gap:4px;font-size:14px}
.field select{font:inherit;padding:8px;border-radius:10px;border:1.5px solid var(--line);background:var(--white);color:var(--plum)}

/* Decoration mode */
body.decor-on #cv{touch-action:none;cursor:grab}
body.decor-on .stage{outline:2px dashed rgba(217,79,134,.35);outline-offset:-2px;border-radius:14px}
.decorbar{background:var(--card);border:2px solid var(--plum);border-radius:18px;padding:12px 14px;box-shadow:4px 4px 0 var(--plum)}
.decor-idle,.decor-sel{display:flex;flex-direction:column;gap:10px}
.decor-idle{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}
.decor-sel .actions .btn{flex:1 1 auto;min-width:96px}
#decorName{font-size:16px}
.pill.bad{background:#f7d4d8;color:var(--danger);border-color:var(--danger);white-space:normal}
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.tab{font:inherit;font-size:12px;font-weight:700;white-space:nowrap;border:1.5px solid var(--line);background:var(--white);color:var(--plum);border-radius:99px;padding:7px 12px;min-height:34px;cursor:pointer}
.tab.on{background:var(--plum);color:var(--white);border-color:var(--plum)}
.tab:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.thumb{width:100%;height:96px;border-radius:10px;background:var(--blush);display:block}

@media (max-width:560px){
  .brand{font-size:18px} .chip{font-size:13px} .chip span{display:none}
  .dtext{font-size:14px} .dialog svg{width:46px;height:46px} .hint{display:none}
  .xpbar{width:90px} .modal h2{font-size:21px}
  .btn{min-height:46px;font-size:15px}
  .decor-sel .actions .btn{min-width:30%}
}
@media (prefers-reduced-motion:reduce){.toast,.xpbar b,.bar b{transition:none}.levelup.pop{animation:none}}

/* Camera controls (zoom / fit) — right edge of the stage, under the settings button */
.camctl{position:absolute;right:0;top:60px;display:flex;flex-direction:column;gap:6px;z-index:2}
.camctl .iconbtn{position:static;width:40px;height:40px;font:700 22px/1 Quicksand,sans-serif}
#cv{touch-action:none}
/* Expansion screen */
.xplan{width:100%;max-width:300px;align-self:center;display:block;margin:4px auto}
.xmeta{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center}
.xsteps{display:flex;gap:6px;flex-wrap:wrap}
.xsteps .xstep{flex:1 1 90px;border:2px solid var(--line,#e9d6d0);border-radius:10px;padding:6px 8px;display:flex;flex-direction:column;font-size:12px;color:var(--plum-soft)}
.xsteps .xstep b{color:var(--plum);font-size:13px}
.xsteps .xstep.done{background:rgba(60,149,97,.08);border-color:rgba(60,149,97,.4)}
.xsteps .xstep.now{border-color:#3c9561;background:rgba(60,149,97,.16);box-shadow:0 3px 0 rgba(60,149,97,.3)}
.xsteps .xstep.next{border-color:var(--gold);background:rgba(224,164,58,.1)}
.xsteps .xstep.later{opacity:.7}
.xsteps .xtag{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--plum-soft)}
.xsteps .xstep.now .xtag,.xsteps .xstep.done .xtag{color:#3c9561}
.xdone{color:#2e7a4e}

/* Team: payroll summary and late salaries */
.task.payroll{background:#f3fbf6;border-color:var(--cash)}
.task.late{border-color:var(--danger);background:#fdf1f2}
.warn{color:var(--danger)}
.task.atelier-card{background:#f4eefc;border-color:var(--fc)}
.reqs{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;font-weight:700}
.reqs .ok{color:var(--cash)} .reqs .no{color:var(--danger)}

/* Pisos, paredes e janelas (decoration mode) */
.fin-colors{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:8px 0 12px}
.fin-cname{color:var(--rose);font-weight:700}
.fin-dots{display:flex;flex-wrap:wrap;gap:9px;width:100%}
.fin-dot{width:36px;height:36px;border-radius:50%;border:2px solid rgba(58,35,64,.4);box-shadow:inset 0 0 0 3px #fff;cursor:pointer;padding:0}
.fin-dot.on{border-color:var(--plum);outline:3px solid var(--rose);outline-offset:2px}
.fin-dot:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.fin-card.on{border-color:var(--rose)}
.fin-using{align-self:stretch;text-align:center;margin-top:auto}
.fin-cards{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.fin-cards .meta{font-size:12px}
.fin-rooms{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 10px}
.fin-room{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border-radius:14px;border:2px solid rgba(58,35,64,.25);background:var(--white);color:var(--plum);font:inherit;cursor:pointer;text-align:left}
.fin-room b{font-size:15px}.fin-room small{font-size:12px;opacity:.75}
.fin-room.on{border-color:var(--rose);background:#fde9f0;box-shadow:0 3px 0 rgba(217,79,134,.35)}
.fin-room:disabled{opacity:.55;cursor:not-allowed}
.fin-room:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.fin-tryb{align-self:stretch;margin-top:auto}
.fin-tryb + .btn{margin-top:6px}
.fin-try{width:100%;max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:6px;padding:12px 14px;background:var(--cream,#fffaf3);border:2px solid var(--plum);border-radius:18px;box-shadow:0 4px 0 rgba(58,35,64,.25),0 10px 30px rgba(58,35,64,.25)}
.fin-try-name{font-size:18px}
.fin-try-actions{justify-content:flex-end;gap:8px}
.fin-try .fin-dots{gap:8px}
.fin-try .fin-dot{width:32px;height:32px}
body.fin-trying #decorBar{display:none!important}
/* sewing time badge in the binder: quick / medium / long */
.time-pill{align-self:flex-start;font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px;border:1.5px solid rgba(58,35,64,.35);background:#fff}
.time-pill.t-seg{background:#e3f4ea}
.time-pill.t-min{background:#fdf0d5}
.time-pill.t-h{background:#efe4fb}

/* ---------- Minha personagem: portrait button + customisation ---------- */
.mebtn{position:absolute;left:12px;bottom:12px;z-index:4;width:62px;height:62px;border-radius:50%;padding:0;border:3px solid var(--plum);background:#fde9ef;box-shadow:0 4px 0 var(--plum);cursor:pointer;overflow:hidden}
.mebtn canvas{width:100%;height:100%;display:block}
.mebtn span{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);font:700 10px/1 var(--ui,inherit);background:var(--rose);color:#fff;border:2px solid var(--plum);border-radius:99px;padding:2px 7px}
.mebtn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--plum)}
.mebtn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
body.decor-on .mebtn{display:none}
.av-modal{max-width:900px!important;background:linear-gradient(#7b4f9e,#5b3b7e)!important;color:var(--plum)}
.av-modal::before,.av-modal::after{display:none}
.av-room{display:flex;flex-direction:column;gap:12px}
.av-ribbon{align-self:center;background:#f2c14e;border:3px solid var(--plum);border-radius:10px;padding:4px 18px;box-shadow:0 4px 0 var(--plum);position:relative}
.av-ribbon::before,.av-ribbon::after{content:"";position:absolute;top:8px;width:18px;height:100%;background:#d99a2b;border:3px solid var(--plum);z-index:-1}
.av-ribbon::before{left:-14px;border-radius:6px 0 0 6px}.av-ribbon::after{right:-14px;border-radius:0 6px 6px 0}
.av-ribbon input{font:700 20px/1.2 var(--ui,inherit);text-align:center;border:none;background:transparent;color:var(--plum);width:230px}
.av-ribbon input::placeholder{color:rgba(58,35,64,.55)}
.av-ribbon input:focus-visible{outline:3px solid #fff;outline-offset:4px;border-radius:6px}
.av-body{display:grid;grid-template-columns:250px 74px 1fr;gap:12px;align-items:stretch}
.av-mirror{display:flex;flex-direction:column;align-items:center;gap:10px}
.av-glass{width:100%;border:10px solid #d9dfeb;outline:3px solid var(--plum);border-radius:22px;background:linear-gradient(135deg,#f2fbff 0,#c9e7f7 55%,#e5f4fb 100%);position:relative;overflow:hidden;box-shadow:inset 0 0 0 2px #fff}
.av-glass::after{content:"";position:absolute;inset:-20% auto -20% 18%;width:28px;background:rgba(255,255,255,.55);transform:rotate(18deg)}
.av-glass canvas{display:block;width:100%;height:310px;position:relative;z-index:1}
.av-random{font:700 13px/1 var(--ui,inherit);background:#d4e86a;color:var(--plum);border:2px solid var(--plum);border-radius:8px;padding:8px 14px;box-shadow:0 3px 0 var(--plum);cursor:pointer}
.av-cats{display:flex;flex-direction:column;gap:6px;align-items:center}
.av-cat{width:66px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:16px;border:2.5px solid var(--plum);background:#fffdf9;cursor:pointer;color:var(--plum)}
.av-cat small{font:600 9.5px/1.05 var(--ui,inherit);text-align:center}
.av-cat.on{background:#7fc4ef;box-shadow:inset 0 0 0 3px #fff}
.av-paper{background:#fbf3e3;border:3px solid var(--plum);border-radius:8px 18px 18px 8px;padding:10px 12px;outline:2px dashed rgba(58,35,64,.3);outline-offset:-8px;display:flex;flex-direction:column;gap:8px;min-width:0}
.av-paper-title{font-size:16px}
.av-paper-in{display:flex;gap:12px;align-items:flex-start;min-height:0}
.av-colors{display:grid;grid-template-columns:repeat(2,32px);gap:7px;flex:none}
.av-colors[hidden]{display:none}
.av-dot{width:32px;height:32px;border-radius:50%;border:2px solid rgba(58,35,64,.45);box-shadow:inset 0 -4px 0 rgba(0,0,0,.12),inset 0 0 0 3px rgba(255,255,255,.6);cursor:pointer;padding:0}
.av-dot.on{border-color:var(--plum);outline:3px solid var(--rose);outline-offset:2px}
.av-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;flex:1;max-height:360px;overflow-y:auto;padding:2px}
.av-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;border-radius:14px;border:2px dashed rgba(58,35,64,.4);background:#fff;cursor:pointer;color:var(--plum);font:600 12px/1.1 var(--ui,inherit)}
.av-item canvas{width:92px;height:92px;border-radius:10px;background:radial-gradient(circle at 50% 40%,#fff,#eaf4fb)}
.av-item.on{border:2.5px solid var(--rose);background:#fde9f0}
.av-cat:focus-visible,.av-dot:focus-visible,.av-item:focus-visible,.av-random:focus-visible,.av-no:focus-visible,.av-yes:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.av-actions{display:flex;justify-content:center;gap:18px}
.av-no,.av-yes{width:56px;height:56px;border-radius:50%;border:3px solid var(--plum);font:700 28px/1 var(--ui,inherit);color:#fff;text-shadow:0 2px 0 var(--plum);box-shadow:0 4px 0 var(--plum);cursor:pointer}
.av-no{background:#e05a6d}.av-yes{background:#7cc79a}
@media (max-width:720px){
  .av-body{grid-template-columns:1fr}
  .av-mirror{flex-direction:row;align-items:flex-end;justify-content:center}
  .av-glass{width:150px;flex:none;border-width:7px}
  .av-glass canvas{height:190px}
  .av-cats{flex-direction:row;overflow-x:auto;justify-content:flex-start;padding-bottom:4px}
  .av-cat{flex:none;width:62px}
  .av-items{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));max-height:260px}
  .av-item canvas{width:76px;height:76px}
  .av-colors{grid-template-columns:repeat(2,28px)}
  .av-dot{width:28px;height:28px}
  .av-ribbon input{width:170px;font-size:17px}
}
.mebtn{width:62px}
/* ---------- Furniture shop: bottom bar (tabs + rolled-paper strip) ---------- */
body.shopbar-on #decorBar{display:none!important}
.shopbar{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:end;max-width:980px;margin:0 auto}
.shopbar[hidden]{display:none}
/* category tabs: a row of little folders on top of the paper roll (like the classic boutique games) */
.sb-tabs{grid-column:1 / -1;display:flex;gap:4px;overflow-x:auto;padding:0 0 0 22px;scrollbar-width:none}
.sb-tabs::-webkit-scrollbar{display:none}
.sb-tab{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:78px;font:600 11px/1.1 var(--ui,inherit);color:var(--plum);padding:5px 8px 4px;border:2px solid var(--plum);border-bottom:none;border-radius:14px 14px 0 0;background:#f7d9e3;cursor:pointer;margin-bottom:-2px;text-align:center;position:relative}
.sb-tab:nth-child(3n+2){background:#f6e6c8}.sb-tab:nth-child(3n){background:#d9ecdf}
.sb-tab.on{background:#e6f1f7;z-index:1;padding-top:8px}
.sb-tab:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.sb-ticon{width:28px;height:28px;flex:none;display:grid;place-items:center}
.sb-roll{position:relative;background:#e6f1f7;border:2.5px solid var(--plum);border-radius:8px 22px 22px 22px;padding:8px 10px 10px 22px;box-shadow:0 5px 0 var(--plum);outline:2px dashed rgba(58,35,64,.25);outline-offset:-7px;min-width:0}
.sb-roll::before{content:"";position:absolute;left:-12px;top:-5px;bottom:-5px;width:20px;border-radius:12px;border:2.5px solid var(--plum);background:repeating-linear-gradient(90deg,#cfe3ef 0 4px,#e6f1f7 4px 8px)}
.sb-head{display:flex;justify-content:space-between;align-items:center;padding:0 6px 6px}
.sb-title{font-size:16px}
.sb-money{font-weight:700;color:#2e7a4e;background:#fff;border:2px solid var(--plum);border-radius:99px;padding:2px 10px;font-size:13px}
.sb-row{display:flex;align-items:center;gap:6px;min-width:0}
.sb-items{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 6px;flex:1;min-width:0;scrollbar-width:thin}
.sb-card{flex:0 0 150px;scroll-snap-align:start;display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:18px;border:2px dashed rgba(58,35,64,.35);background:#fffdf9}
.sb-card.locked{opacity:.6}
.sb-thumb{width:100%;height:82px;border-radius:14px;background:radial-gradient(circle at 50% 40%,#fff 0,#dfeef6 75%);display:block}
.sb-name{font-size:13px;line-height:1.15;min-height:2.3em}
.sb-meta{display:flex;justify-content:space-between;gap:4px;font-size:11.5px;color:var(--plum-soft)}
.sb-box{display:inline-flex;align-items:center;gap:3px;font-weight:700;color:var(--plum)}
.sb-lux{color:#a8741b;font-weight:700}
.sb-acts{display:flex;gap:6px;margin-top:auto}
.sb-price,.sb-place{flex:1;font:700 13px/1 var(--ui,inherit);padding:8px 6px;border-radius:12px;border:2px solid var(--plum);cursor:pointer;box-shadow:0 3px 0 var(--plum)}
.sb-price{background:#f6d36b;color:var(--plum)}
.sb-price.poor,.sb-price:disabled{background:#eee;color:#8a7b8e;box-shadow:none;cursor:default}
.sb-place{background:#7cc79a;color:var(--plum)}
.sb-price:not(:disabled):active,.sb-place:active{transform:translateY(2px);box-shadow:0 1px 0 var(--plum)}
.sb-price:focus-visible,.sb-place:focus-visible,.sb-arrow:focus-visible,.sb-done:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.sb-arrow{flex:none;width:34px;height:52px;border-radius:12px;border:2px solid var(--plum);background:#fff;font:700 24px/1 var(--ui,inherit);color:var(--rose);cursor:pointer}
.sb-arrow:disabled{opacity:.35;cursor:default}
.sb-done{align-self:center;margin-left:10px;width:54px;height:54px;border-radius:50%;border:3px solid var(--plum);background:#7cc79a;font:700 26px/1 var(--ui,inherit);color:#fff;text-shadow:0 2px 0 var(--plum);box-shadow:0 4px 0 var(--plum);cursor:pointer}
.sb-empty{padding:18px;color:var(--plum-soft)}
@media (max-width:700px){
  .sb-tabs{padding-left:4px}
  .sb-tab{min-width:70px;font-size:10px;padding:4px 5px 3px}
  .sb-roll{border-radius:8px 20px 20px 20px;padding:6px 6px 8px}
  .sb-roll::before{display:none}
  .sb-arrow{display:none}
  .sb-card{flex-basis:132px}
  .sb-roll{grid-column:1 / -1}
  .sb-tabs{padding-right:52px}
  .sb-done{position:absolute;right:2px;top:-4px;width:44px;height:44px;font-size:20px;margin:0;z-index:2}
}

/* renovation tabs inside the bottom shop bar */
.sb-tab.fin{background:#efe2f6}
.sb-tab.fin .sb-ticon{border-radius:8px;border:1.5px solid rgba(58,35,64,.4)}
.sb-fin{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:0 6px 8px}
.sb-fin[hidden]{display:none}
.sb-fin .fin-dots{width:auto;gap:6px}
.sb-fin .fin-dot{width:26px;height:26px;box-shadow:inset 0 0 0 2px #fff}
.sb-rooms{display:flex;border:2px solid var(--plum);border-radius:99px;overflow:hidden;flex:none}
.sb-room{font:700 12px/1 var(--ui,inherit);padding:7px 12px;border:0;background:#fff;color:var(--plum);cursor:pointer}
.sb-room.on{background:var(--rose);color:#fff}
.sb-room:disabled{opacity:.45;cursor:default}
.sb-room:focus-visible,.sb-ok:focus-visible,.sb-cancel:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.sb-fact{display:flex;align-items:center;gap:8px;flex:1 1 260px;justify-content:flex-end;min-width:0}
.sb-hint{font-size:12.5px;color:var(--plum-soft);margin-right:auto}
.sb-hint b{color:var(--plum)}
.sb-ok,.sb-cancel{flex:none;font:700 13px/1 var(--ui,inherit);padding:9px 14px;border-radius:12px;border:2px solid var(--plum);cursor:pointer;box-shadow:0 3px 0 var(--plum)}
.sb-ok{background:#7cc79a;color:var(--plum)}
.sb-ok:disabled{background:#eee;color:#8a7b8e;box-shadow:none;cursor:default}
.sb-cancel{background:#fff;color:var(--plum)}
.sb-card.fin.on{border:2.5px solid var(--rose);background:#fff4f8}
.sb-place.on{background:var(--rose);color:#fff}
.sb-pick{cursor:pointer}
@media (max-width:640px){
  .sb-fin{gap:6px 8px;padding:0 2px 6px}
  .sb-fin .fin-dot{width:24px;height:24px}
  .sb-fact{flex-basis:100%}
  .sb-hint{font-size:11.5px}
}

/* cloud save (ui/cloud-ui.js) */
.cl-set{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1.5px solid var(--line);border-radius:14px;background:var(--white)}
.cl-set div{display:flex;flex-direction:column;gap:2px;min-width:0}
.cl-set small{font-size:12px;color:var(--plum-soft)}
.cl-form{display:flex;flex-direction:column;gap:10px}
.field input{font:inherit;padding:10px;border-radius:10px;border:1.5px solid var(--line);background:var(--white);color:var(--plum)}
.field input:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.cl-err{color:#b23a48;font-weight:600;font-size:13.5px;margin:0}
.cl-or{display:flex;align-items:center;gap:10px;color:var(--plum-soft);font-size:12px}
.cl-or::before,.cl-or::after{content:"";flex:1;border-top:1.5px dashed var(--line)}
.cl-google{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.linkbtn{background:none;border:0;padding:4px 0;font:inherit;font-size:13px;color:var(--rose);text-decoration:underline;cursor:pointer;align-self:flex-start}
.cl-acc{display:flex;align-items:center;gap:12px}
.cl-acc div{display:flex;flex-direction:column}
.cl-avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--rose);color:#fff;font-weight:700;font-size:20px;border:2px solid var(--plum)}
.cl-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.cl-pick{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;font:inherit;color:var(--plum);padding:12px 14px;border-radius:16px;border:2px solid var(--line);background:var(--white);cursor:pointer}
.cl-pick.newer{border-color:var(--rose);background:#fff4f8}
.cl-pick:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.cl-note{font-size:13px;line-height:1.45;color:var(--plum-soft);margin:0}