/* APOIO-SLOTS — Minha casa: o cômodo isométrico, o inventário e a folha de vender/guardar. */

/* botão no hub */
.larCard{display:flex;align-items:center;gap:12px;width:100%;margin:14px 0 0;padding:12px 14px;border-radius:18px;text-align:left;
  background:linear-gradient(135deg,rgba(107,74,44,.35),rgba(20,40,31,.9));box-shadow:inset 0 0 0 1px rgba(201,164,92,.35);transition:transform .15s var(--ease)}
.larCard:active{transform:scale(.985)}
.larMini{flex:none;min-width:58px;max-width:46%;padding:8px 10px;border-radius:12px;background:rgba(0,0,0,.25);font-size:20px;letter-spacing:2px;white-space:nowrap;overflow:hidden;text-overflow:clip}
.larCardTexto{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.larCardTexto strong{font-size:16px}
.larCardTexto small{font-size:13px;color:var(--muted)}

/* tela */
#lar{width:min(520px,100%)}
.larTopo{display:flex;align-items:center;gap:14px;padding:4px 0 10px}
.larTopo h1{font-family:var(--serif);font-size:30px;font-weight:700;color:#F4ECDD}
.larTopo small{font-size:14px;color:var(--brass-hi)}
.larPalco{position:relative;width:100%;aspect-ratio:400/360;margin:4px 0 0;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
.larSala{position:absolute;inset:0;width:100%;height:100%}
.larItens{position:absolute;inset:0}
.larItem{position:absolute;transform:translate(-50%,-88%);font-size:calc(var(--t,1) * clamp(30px,9.5vw,46px));line-height:1;padding:4px;border-radius:14px;
  filter:drop-shadow(0 8px 6px rgba(0,0,0,.45));transition:transform .18s var(--ease),filter .18s;animation:larChega .35s var(--ease)}
.larItem.parede{transform:translate(-50%,-50%);filter:drop-shadow(0 3px 3px rgba(0,0,0,.4))}
.larItem::after{content:"";position:absolute;left:18%;right:18%;bottom:2px;height:8px;border-radius:50%;background:rgba(0,0,0,.28);filter:blur(3px);z-index:-1}
.larItem.parede::after{display:none}
.larItem:active{transform:translate(-50%,-92%) scale(.95)}
.larItem.escolhido{filter:drop-shadow(0 0 10px #ffd77a) drop-shadow(0 8px 6px rgba(0,0,0,.45));animation:larPula .9s ease-in-out infinite}
.larItem.trofeu{filter:drop-shadow(0 0 8px rgba(255,215,120,.7)) drop-shadow(0 8px 6px rgba(0,0,0,.45))}
@keyframes larChega{from{opacity:0;transform:translate(-50%,-120%)}}
@keyframes larPula{50%{transform:translate(-50%,-96%)}}
.larVazia{position:absolute;left:0;right:0;top:62%;text-align:center;font-family:var(--serif);font-size:20px;color:rgba(242,237,228,.55)}
.larDica{margin:8px 0 0;text-align:center;font-size:13px;color:var(--muted)}
.larInv{margin-top:14px;padding:12px 14px;border-radius:18px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.larInv h3{font-size:15px;font-weight:700;margin:0 0 10px}
.larInvLista{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.larInvItem{flex:none;width:64px;padding:8px 4px;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:4px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line)}
.larInvItem span{font-size:28px;line-height:1}
.larInvItem small{font-size:11px;color:var(--brass-hi)}
.larInvItem.escolhido{box-shadow:inset 0 0 0 1.5px #ffd77a}
.larInvVazio{margin:0;font-size:13px;color:var(--muted)}

/* folha do item */
.larFolha{position:fixed;z-index:45;left:50%;bottom:calc(10px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(500px,calc(100% - 20px));
  padding:16px 16px 14px;border-radius:22px;background:rgba(16,30,24,.97);box-shadow:inset 0 0 0 1px rgba(201,164,92,.5),0 -10px 40px rgba(0,0,0,.5);
  display:grid;gap:4px;animation:larFolha .28s cubic-bezier(.3,1.4,.5,1)}
.larFolha[hidden]{display:none}
@keyframes larFolha{from{transform:translate(-50%,40px);opacity:0}}
.larFolha strong{font-family:var(--serif);font-size:21px;padding-right:40px}
.larFolha>span{font-size:15px;color:var(--brass-hi);font-weight:600}
.larFolha small{font-size:13px;color:var(--muted);min-height:2px}
.larAcoes{display:grid;grid-template-columns:1.4fr 1fr;gap:8px}
.larAcoes .botao{margin-top:8px;min-height:50px;font-size:16px}
.larFechaFolha{position:absolute;right:10px;top:10px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.07);font-size:22px;color:var(--ivory)}
/* Minha Casa — ilustração em madeira, creme e sálvia. */
#lar{width:min(680px,100%);min-height:100dvh;padding:calc(20px + var(--safe-t)) 20px calc(28px + var(--safe-b));color:#66523c;background:radial-gradient(circle at 20% 22%,#fff7d8,transparent 50%),#f8eccf;box-shadow:0 0 0 100vmax #f8eccf;clip-path:inset(0 -100vmax);--parede-e:#f6dfae;--parede-d:#efd09f;--piso-lar:#e6c492}
#lar button:focus-visible,#lar input:focus-visible{outline:3px solid #758f65;outline-offset:3px}
#lar .larTopo{gap:14px;padding:0 0 16px;border-bottom:1px solid #b9935326}
#lar .larTopo h1{font-family:var(--serif);font-size:32px;letter-spacing:-.04em;color:#695239}
#lar .larTopo small{display:block;color:#9e8460;font-size:11px;margin-top:4px}
#lar .voltar{background:#fff9e8;color:#866c4e;border:1px solid #d8bd8d}
.larAtmosfera{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:16px 0 4px}
.larAtmosfera>span{font-size:8px;letter-spacing:.18em;color:#ac8b54;margin-right:auto}
.larAtmosfera button{font-size:10px;border:1px solid #d6bb8b80;border-radius:20px;padding:9px 10px;min-height:36px;background:#fff9e688;color:#876e4f}
#lar .larPalco{aspect-ratio:600/520;margin:0;filter:drop-shadow(0 18px 17px #a7814626);isolation:isolate;transition:filter .7s}
.larSala{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.larSala .paredeE{fill:var(--parede-e);transition:fill .6s}.larSala .paredeD{fill:var(--parede-d);transition:fill .6s}.larSala .pisoCasa{fill:var(--piso-lar);transition:fill .6s}.papelParede{fill:var(--papel-lar,none)}
#lar .larPalco::after{content:'';position:absolute;inset:0;z-index:110;pointer-events:none;background:#24385a;opacity:var(--escuro,.05);clip-path:polygon(3.33% 32.69%,50% 5.77%,96.67% 32.69%,96.67% 63.46%,50% 90.38%,3.33% 63.46%);transition:opacity .7s}
.luzTeto{opacity:var(--luz-forca,1);filter:hue-rotate(calc((var(--temperatura,45) - 45)*1deg));transition:opacity .6s}.raioJanela{transition:opacity .6s}.larNoite .vidroJanela{fill:#546b8d}.larNoite .raioJanela,.larCortina .raioJanela{opacity:0}.larNublado .raioJanela{opacity:.08}.larCortina .vidroJanela{fill:#c6a692}.larCortina .cortinaCasa{transform:scaleX(1.5);transform-origin:125px 0}.cortinaCasa{transition:transform .5s}
.chuvaJanela{display:none;animation:larChover 1.8s linear infinite}.larChuva .chuvaJanela{display:block}.larChuva .vidroJanela{fill:#93acb3}.envelopeCasa{display:none}.larAluguel .envelopeCasa{display:block}
#lar .larItens{z-index:2}
#lar .larItem{width:calc(var(--t,1) * 14%);min-width:44px;height:auto;aspect-ratio:1;display:grid;place-items:center;border:0;padding:0;background:transparent;border-radius:12px;transform:translate(-50%,-84%);filter:drop-shadow(0 3px 2px #80542515);transition:filter .2s;animation:none;touch-action:none;user-select:none;-webkit-user-select:none}
#lar .larItem img{width:100%;height:100%;object-fit:contain;pointer-events:none;transform:scaleX(var(--giro,1));transition:transform .25s}
#lar .larItem.parede{width:calc(var(--t,1)*12%);transform:translate(-50%,-75%)}
#lar .larItem::after{display:none}
#lar .larItem.escolhido{filter:drop-shadow(0 0 4px #fff5ca) drop-shadow(0 0 5px #a7824e);animation:none}
#lar .larItem.arrastando{z-index:150!important;filter:drop-shadow(0 0 6px #779b52);opacity:.85}
#lar .larItem.invalido{filter:drop-shadow(0 0 7px #db736b)}
#lar .larItem.ligado{filter:drop-shadow(0 0 12px #fff3ba)}
.larVida{position:absolute;top:-5px;right:0;color:#799564;font-size:16px;animation:larVida 2s ease-in-out infinite;pointer-events:none;text-shadow:0 0 10px #ffedba}
#lar .larItem[data-item=tv].ligado{filter:drop-shadow(0 0 16px #99d5f9)}
#lar .larItem[data-item=fogao].ligado .larVida{color:#fff5df}
.larMarca{position:absolute;width:9%;height:4%;transform:translate(-50%,-50%) rotate(-26deg);border:1px dashed #af8d6440;background:#fff3cf40;border-radius:50%;pointer-events:none}
#lar .larDestino{position:absolute;transform:translate(-50%,-50%);border:2px dashed #849d65;width:44px;height:44px;border-radius:50%;background:#e2edbfcf;z-index:140;font-size:24px;color:#63834f;padding:0}
.larMilo{position:absolute;z-index:105;left:48%;top:72%;width:12%;min-width:46px;transform:translate(-50%,-50%);padding:0;filter:drop-shadow(0 4px 3px #90694222)}
.larMilo img{width:100%;display:block;transform-origin:50% 90%;animation:larRespira 4s ease-in-out infinite}
.larMilo span{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:10px;white-space:nowrap;background:#fff7df;padding:5px 8px;border-radius:10px;color:#8c7755;opacity:0}
.larMilo.carinho span{animation:larFala 2s ease-in-out}.larMilo.dormindo img{transform:rotate(-12deg);filter:brightness(.8)}.larMilo.dormindo::after{content:'z z z';position:absolute;top:0;right:-20px;font-size:12px;color:#d0d9e2;animation:larVida 3s infinite}
.larStatus{font:italic 14px/1.5 var(--serif);text-align:center;min-height:38px;margin:0 0 12px;color:#9b805b}
.larFerramentas{border:1px solid #e3cd9d;border-radius:23px;background:#fff8e6cc;padding:7px 12px 10px;box-shadow:0 9px 22px #c7a86a10}
.larAbas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;border-bottom:1px solid #d3b98c44;padding:0 0 7px}
#lar .larAcao{min-height:44px;padding:9px 12px;border:1px solid #d7be9366;border-radius:13px;font-size:12px;background:#fffdf3;color:#816747;transition:background .2s,transform .15s}
#lar .larAcao:active{transform:scale(.97)}
#lar .larAbas .larAcao{padding:8px 2px;border:none;background:transparent;font-size:11px;color:#a18a65}
#lar .larAbas [aria-selected=true]{background:#e7edcf;color:#607343;font-weight:700}
#lar [data-lar=opcoes]{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:12px 0 4px;min-height:62px}
#lar [data-lar=opcoes]>p{font-size:11px;color:#a08862;margin:0;flex:1 1 180px;line-height:1.5}
#lar [data-lar=opcoes]>small{font-size:11px;line-height:1.5;color:#a18a65}
#lar .larAcao[aria-pressed=true]{border-color:#90a36d;background:#edf1dc;box-shadow:inset 0 0 0 1px #90a36d}
.larAmostras{display:flex;gap:7px;width:100%;align-items:center}.larAmostras small{font-size:10px;min-width:82px;color:#98815e}
#lar .larAmostras .larAcao{width:30px;min-height:34px;padding:0;border-radius:50%;flex:1;max-width:34px;border:2px solid #fff7e7}
#lar .larAmostras .larAcao[aria-pressed=true]{box-shadow:0 0 0 2px #839762}
.larSlider{display:flex;align-items:center;gap:8px;width:100%;font-size:12px;color:#8d7756}.larSlider input{flex:1;min-width:80px;accent-color:#94a975;height:32px}
.larUndo{display:block;margin:6px 0 0 auto;font-size:11px;color:#917c59;min-height:32px}.larUndo:disabled{opacity:.35}
#lar .larInv{border:1px solid #e5d0a7;background:#f4e7cb;box-shadow:none;border-radius:20px;padding:14px;margin-top:14px}
#lar .larInv h3{font-size:12px;color:#9b835f;letter-spacing:.02em}
#lar .larInvVazio{font-size:11px;color:#a68f6c;line-height:1.5}
#lar .larInvItem{width:94px;min-height:108px;background:#fff7e4;border:1px solid #e4cca4;display:flex;flex-direction:column;gap:4px;padding:6px;box-shadow:none}
.larInvItem img{width:58px;height:58px;object-fit:contain}.larInvItem span{font-size:10px!important;line-height:1.2!important;color:#8b7150}.larInvItem small{font-size:10px;color:#aa9167}
#lar .larFolha{background:#fff8e8;border:1px solid #dfc695;color:#745b3c;box-shadow:0 -8px 40px #795c3b33;width:min(500px,calc(100% - 24px));padding:20px;max-height:65dvh;overflow-y:auto}
#lar .larFolha strong{font-size:23px;color:#775d3d}#lar .larFolha>span{color:#9a7a46;font-size:14px}#lar .larFolha small{color:#a08b68;line-height:1.5;margin:4px 0 10px}
#lar .larFechaFolha{background:#f0e3c8;color:#947851;width:44px;height:44px}
#lar .larAcoes{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#lar .larAcoes .larAcao{min-height:46px;font-size:13px}#lar .larAcao.venda{color:#b07461;background:#f8ece0}
#lar.soOlhar .larFerramentas,#lar.soOlhar .larInv,#lar.soOlhar .larStatus{display:none}
#lar.soOlhar .larPalco{margin-top:24px}
.larCard{background:linear-gradient(120deg,#e3d3a7,#c0caa1);border:1px solid #efdfb5;box-shadow:0 8px 24px #0002;color:#594c37}.larCardTexto small{color:#776e50}.larMini{font-size:0;background:transparent url('../assets/casa/sofa.svg') center/contain no-repeat;width:72px;height:65px}.larCardTexto strong{color:#574b35}
@keyframes larRespira{50%{transform:translateY(-2px) rotate(2deg)}}@keyframes larVida{50%{transform:translateY(-7px);opacity:.4}}@keyframes larFala{10%,80%{opacity:1}100%{opacity:0}}@keyframes larChover{to{transform:translateY(12px)}}
@media(min-width:700px){#lar{padding-left:35px;padding-right:35px}.larPalco{max-width:570px;align-self:center}.larAtmosfera{margin-top:20px}.larStatus{font-size:16px}}
@media(max-width:360px){#lar{padding-left:12px;padding-right:12px}.larAmostras{gap:4px}.larAmostras small{min-width:70px}.larAtmosfera>span{width:100%;margin-bottom:5px}}
@media(prefers-reduced-motion:reduce){#lar *,#lar *::before,#lar *::after{animation:none!important;transition:none!important}}
.larMilo{left:39%;top:78%}
#lar .larItem.ligado::before{content:'';position:absolute;inset:-40%;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse,#fff1ab99,transparent 68%);z-index:-1;mix-blend-mode:screen}
#lar .larItem[data-item=tv].ligado::before{background:radial-gradient(ellipse,#b6e9ff99,transparent 70%)}
#lar .larItem[data-item=planta].ligado::before,#lar .larItem[data-item=violao].ligado::before,#lar .larItem[data-item=relogio].ligado::before{display:none}
.larAmostras{flex-wrap:wrap;gap:6px}.larAmostras small{flex:0 0 100%;margin:4px 0}
#lar .larAmostras .larAcao{min-width:38px;max-width:44px;min-height:44px}
#lar .larAtmosfera button{min-height:44px}
/* Painel acompanha a hora: a luz é do ambiente inteiro. */
#lar{--painel-h:40;--painel-l:81%;--lar-painel:hsl(var(--painel-h) 30% var(--painel-l));background:radial-gradient(ellipse at 20% 10%,#ffffff10,transparent 65%),var(--lar-painel);box-shadow:0 0 0 100vmax var(--lar-painel);transition:background-color .6s,box-shadow .6s,color .6s}
#lar[data-periodo=tarde]{--painel-h:27}
#lar[data-periodo=noite]{color:#e6ddc9}
#lar[data-periodo=noite] .larTopo h1{color:#eee3cf}
#lar[data-periodo=noite] .larTopo small,#lar[data-periodo=noite] .larAtmosfera>span,#lar[data-periodo=noite] .larStatus{color:#bfb49f}
#lar[data-periodo=noite] .larFerramentas,#lar[data-periodo=noite] .larInv{background:#23313dd9;border-color:#d1c5a02b;box-shadow:0 10px 30px #0002}
#lar[data-periodo=noite] .larAbas [aria-selected=true]{background:#4a5f55;color:#e6eed9}
#lar[data-periodo=noite] .larAcao,#lar[data-periodo=noite] .larInvItem,#lar[data-periodo=noite] .larAtmosfera button{background:#354450;color:#e1dac6;border-color:#81928f44}
#lar[data-periodo=noite] .larAbas .larAcao{background:transparent;color:#b1beb7}
#lar[data-periodo=noite] .larInv h3,#lar[data-periodo=noite] .larInvVazio,#lar[data-periodo=noite] [data-lar=opcoes]>p,#lar[data-periodo=noite] .larSlider,#lar[data-periodo=noite] .larLinha{color:#b2beb5}
#lar[data-periodo=noite] .larFolha{background:#273540;color:#ede3ce;border-color:#afa48655}
#lar[data-periodo=noite] .larFolha strong{color:#ede3ce}
#lar[data-periodo=noite] .larAcao[aria-pressed=true]{background:#4a5f55;color:#f2ebd8}
#lar .larAcao{box-shadow:0 3px 0 #b59c732e;transition:transform .12s,box-shadow .12s,background .18s}
#lar .larAcao:hover{filter:brightness(1.04);transform:translateY(-1px)}
#lar .larAcao:active{transform:translateY(3px) scale(.98);box-shadow:0 0 0 transparent}
#lar .larAcao.principal{background:#839c6e;color:#fff9e7;border-color:#768e64;font-weight:700}
#lar .larAcao:disabled{opacity:.45;cursor:not-allowed;transform:none}
#lar .larItem:active img{transform:scaleX(var(--giro,1)) scale(.93)}
#lar .larItem img{filter:drop-shadow(0 3px 3px #855f3d12)}
#lar .larItem[data-item=planta] img{transform:scaleX(var(--giro,1)) scale(var(--crescimento,1));transform-origin:50% 90%;transition:transform .45s cubic-bezier(.2,1.6,.5,1)}
#lar .larItem[data-item=tv].ligado img{animation:larTV 4s ease-in-out infinite}
.larCatalogo{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-height:360px;overflow-y:auto;padding:6px 3px 12px}
.larSaldoLoja{grid-column:1/-1;font-size:12px;font-weight:600;margin:4px 0;color:inherit}
.larProduto{background:#ffffff18;border:1px solid #aa946e3b;border-radius:16px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;min-width:0}
.larProduto img{width:80px;height:80px}.larProduto strong{font-size:11px;font-weight:600;min-height:28px}.larProduto .larAcao{font-size:10px!important;width:100%;padding:6px!important}
.larLinha{display:block;flex-basis:100%;font-size:11px;color:#937b58;margin:8px 0 2px}
.larJanelaToque{position:absolute;left:10%;top:30%;width:22%;height:22%;z-index:101;border-radius:5px;background:transparent;transform:skewY(-26deg)}
.larJanelaToque:hover{box-shadow:inset 0 0 0 2px #fff7d177}
@keyframes larTV{50%{filter:drop-shadow(0 0 7px #aadbe9) saturate(1.4)}}
@media(prefers-reduced-motion:reduce){#lar .larItem img{animation:none!important;transition:none!important}}