/* APOIO-SLOTS — O Cofre do Milo: a sala quente do gato (madeira, mel, creme), longe do feltro do cassino.
   Só a caixa misteriosa usa o brilho do cassino: é a tentação, e tem que parecer. */

/* botão no hub */
.cofreCard{display:flex;align-items:center;gap:12px;width:100%;margin:10px 0 0;padding:10px 14px;border-radius:18px;text-align:left;
  background:linear-gradient(120deg,#f1d9a4,#e7b98a);border:1px solid #f6e3b8;box-shadow:0 8px 24px #0002;color:#5a4128;transition:transform .15s var(--ease)}
.cofreCard:active{transform:scale(.985)}
.cofreCard .larCardTexto strong{color:#57391f}
.cofreCard .larCardTexto small{color:#7d5a37}
.cofreCard .seta{color:#7d5a37}
.cofreCardMilo{flex:none;width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 4px 4px #6a43201f);animation:cofreRespira 4s ease-in-out infinite;transform-origin:50% 90%}

/* tela */
#cofre{--mel:#E9C77E;--creme:#F6E7C8;--cacau:#5a3c22;--madeira:#2b1d14;position:relative;isolation:isolate;width:min(520px,100%);color:var(--creme)}
#cofre::before{content:"";position:fixed;inset:0;z-index:-1;background:
  radial-gradient(80% 50% at 50% 30%,rgba(233,199,126,.18),transparent 70%),
  linear-gradient(180deg,#33231a,#1b120c 75%)}
.cofreTopo{display:flex;align-items:center;gap:14px;padding:4px 0 6px}
.cofreTopo>div{flex:1;min-width:0}
.cofreTopo h1{margin:0;font-family:var(--serif);font-size:29px;font-weight:700;color:#FBEFD8}
.cofreTopo small{font-size:14px;color:var(--mel)}
#cofre .voltar{background:rgba(246,231,200,.1);color:var(--creme)}
.cofreSom{width:44px;height:44px;border-radius:50%;background:rgba(246,231,200,.1);font-size:20px;color:var(--creme)}

.cofrePlacar{display:flex;flex-direction:column;align-items:center;padding:6px 0 2px}
.cofrePlacar strong{font-family:var(--serif);font-size:54px;line-height:1;color:#FFE7A8;text-shadow:0 2px 0 #7a5212,0 0 24px rgba(255,210,120,.35);font-variant-numeric:tabular-nums}
.cofrePlacar span{font-size:15px;color:var(--mel);margin-top:2px}
.cofrePlacar small{font-size:13px;color:rgba(246,231,200,.7);margin-top:4px}

/* bônus de ficar longe */
.cofreLonge{margin:10px 0 0;padding:10px 12px;border-radius:14px;background:rgba(246,231,200,.07);box-shadow:inset 0 0 0 1px rgba(233,199,126,.18)}
.cofreLonge span{display:block;font-size:13px;line-height:1.4;color:rgba(246,231,200,.85);margin-top:7px}
.cofreLonge b{color:#FFE7A8}
.cofreLongeBarra{height:8px;border-radius:99px;background:rgba(0,0,0,.35);overflow:hidden}
.cofreLongeBarra i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#9cc08a,#e9c77e);transition:width .6s var(--ease)}
.cofreLonge[data-bonus="3"] .cofreLongeBarra i{background:linear-gradient(90deg,#e9c77e,#f4a259)}
.cofreLonge[data-bonus="4"] .cofreLongeBarra i{background:linear-gradient(90deg,#f4a259,#ff7aa2);box-shadow:0 0 12px #ffb36b}

/* o palco do Milo */
.cofrePalco{position:relative;width:100%;aspect-ratio:4/3.1;margin:12px 0 0;border-radius:22px;overflow:hidden;touch-action:manipulation;
  background:radial-gradient(70% 55% at 50% 35%,#fff1cf 0%,#f0d39c 45%,#c99a63 100%);box-shadow:inset 0 0 0 1px #f6e3b8,0 18px 34px rgba(0,0,0,.4)}
.cofrePalco::before{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(180deg,#b9875a,#9c6d44);box-shadow:inset 0 3px 0 #d6a774}
.cofreChao{position:absolute;left:50%;bottom:7%;width:62%;height:16%;transform:translateX(-50%);border-radius:50%;background:#d98c7a;box-shadow:inset 0 0 0 5px #efb7a4,inset 0 0 0 9px #d98c7a,inset 0 0 0 11px #f6d2c2}
.fichasCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.cofreMilo{position:absolute;z-index:2;left:50%;bottom:9%;width:44%;transform:translateX(-50%);padding:0;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.cofreMilo img{width:100%;display:block;transform-origin:50% 92%;filter:drop-shadow(0 10px 8px rgba(90,60,34,.35));animation:cofreRespira 4s ease-in-out infinite;pointer-events:none}
.cofreMilo.pulo img{animation:cofrePulo .42s var(--ease)}
.cofreMiloNivel{position:absolute;right:4%;top:6%;z-index:1;padding:3px 8px;border-radius:99px;background:#5a3c22;color:#FFE7A8;font-size:12px;font-weight:700}
.cofreMiloNivel:empty{display:none}
.cofreMilo.nv1 img{filter:drop-shadow(0 0 8px rgba(255,231,168,.7)) drop-shadow(0 10px 8px rgba(90,60,34,.35))}
.cofreMilo.nv2 img{filter:drop-shadow(0 0 12px rgba(255,214,120,.85)) drop-shadow(0 10px 8px rgba(90,60,34,.35))}
.cofreMilo.nv3 img{filter:drop-shadow(0 0 14px rgba(255,170,90,.9)) drop-shadow(0 10px 8px rgba(90,60,34,.35))}
.cofreMilo.nv4 img{filter:drop-shadow(0 0 16px rgba(255,130,160,.9)) drop-shadow(0 10px 8px rgba(90,60,34,.35))}
.cofreMilo.nv5 img{filter:drop-shadow(0 0 18px rgba(170,140,255,.95)) drop-shadow(0 0 6px #fff) drop-shadow(0 10px 8px rgba(90,60,34,.35))}
@keyframes cofreRespira{50%{transform:scale(1.02,.985)}}
@keyframes cofrePulo{0%{transform:scale(1)}30%{transform:translateY(-14%) scale(.95,1.06)}60%{transform:translateY(0) scale(1.06,.93)}100%{transform:scale(1)}}
.cofreBalao{position:absolute;z-index:4;left:50%;top:6%;width:max-content;max-width:82%;margin:0;padding:10px 14px;border-radius:16px;transform:translate(-50%,6px);
  background:#fffaf0;color:#5a3c22;font-size:14px;line-height:1.35;text-align:center;box-shadow:0 6px 18px rgba(90,60,34,.25);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease)}
.cofreBalao::after{content:"";position:absolute;left:50%;bottom:-7px;width:14px;height:14px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:3px}
.cofreBalao.on{opacity:1;transform:translate(-50%,0)}
.cofreBalao b{color:#a0522d}
.cofreDica{margin:10px 2px 0;font-size:13px;line-height:1.45;color:rgba(246,231,200,.7);text-align:center}
.flutua.patinha{font-size:26px;color:#FFE7A8}

/* listas */
.cofreSecao{margin:22px 0 10px;font-size:20px;font-weight:700;color:#FBEFD8}
.cofreMoveis,.cofreMelhorias{display:flex;flex-direction:column;gap:8px}
.cofreMovel,.cofreMelhoria{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;padding:10px 12px;border-radius:16px;text-align:left;
  background:rgba(246,231,200,.08);box-shadow:inset 0 0 0 1px rgba(233,199,126,.16);color:var(--creme);transition:transform .15s var(--ease),background .2s}
.cofreMovel.pode,.cofreMelhoria.pode{background:linear-gradient(120deg,#f1d9a4,#e7c08f);color:#4f3520;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.cofreMovel.pode:active,.cofreMelhoria.pode:active{transform:scale(.98)}
.cofreMovel:disabled,.cofreMelhoria:disabled{cursor:default}
.cofreMovel img{flex:none;width:44px;height:44px;object-fit:contain}
.cofreEmoji{flex:none;width:44px;height:44px;display:grid;place-items:center;font-size:26px;border-radius:12px;background:rgba(0,0,0,.18)}
.cofreMelhoria.pode .cofreEmoji{background:rgba(255,255,255,.4)}
.cofreItemTxt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.cofreItemTxt strong{font-size:15px}
.cofreItemTxt small{font-size:12.5px;opacity:.78;line-height:1.3}
.cofreProgresso{display:block;height:5px;margin-top:5px;border-radius:99px;background:rgba(0,0,0,.25);overflow:hidden}
.cofreProgresso i{display:block;height:100%;border-radius:inherit;background:#e9c77e;transition:width .4s var(--ease)}
.cofreMovel.pode .cofreProgresso{display:none}
.cofrePreco{flex:none;font-size:14px;font-weight:700;white-space:nowrap}
.cofreVazio{margin:0;padding:12px 14px;border-radius:14px;background:rgba(246,231,200,.06);font-size:13.5px;line-height:1.45;color:rgba(246,231,200,.78)}

/* a caixa misteriosa: o brilho do cassino invadindo a sala do Milo */
.cofreCaixaBotao{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;width:100%;margin:22px 0 0;padding:14px 16px;border-radius:18px;text-align:left;overflow:hidden;
  background:linear-gradient(120deg,#7d1d2c,#b23a3a 55%,#c9a45c);color:#fff4dc;box-shadow:0 0 0 1px #ffd77a66,0 10px 28px rgba(178,58,58,.45);animation:cofreChama 1.8s ease-in-out infinite}
.cofreCaixaBotao span{grid-row:span 2;font-size:34px;animation:cofreBalanca 1.2s ease-in-out infinite}
.cofreCaixaBotao b{font-size:15.5px}
.cofreCaixaBotao small{font-size:12.5px;color:#ffe3a3}
.cofreCaixaBotao::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-100%);animation:cofreBrilho 2.6s ease-in-out infinite}
@keyframes cofreChama{50%{box-shadow:0 0 0 1px #ffd77aaa,0 10px 36px rgba(255,120,90,.6)}}
@keyframes cofreBalanca{25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
@keyframes cofreBrilho{60%,100%{transform:translateX(100%)}}

/* conquistas */
.cofreConquistas{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cofreConquista{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:14px;background:rgba(246,231,200,.06);text-align:center;opacity:.55}
.cofreConquista.tem{opacity:1;background:rgba(233,199,126,.18);box-shadow:inset 0 0 0 1px rgba(233,199,126,.35)}
.cofreConquista b{font-size:22px}
.cofreConquista small{font-size:10.5px;line-height:1.2;color:rgba(246,231,200,.85)}
.cofreApagar{margin-top:22px;color:rgba(246,231,200,.55);font-size:13px}
.cofreRodape{margin:2px 0 70px;font-size:12px;color:rgba(246,231,200,.45);text-align:center}

/* folha da caixa */
.cofreFolha{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;background:rgba(10,4,4,0);transition:background .25s}
.cofreFolha.aberta{background:rgba(10,4,4,.72)}
.cofreFolhaCaixa{position:relative;width:min(480px,100%);padding:22px 20px calc(22px + var(--safe-b));border-radius:26px 26px 0 0;overflow:hidden;text-align:center;
  background:linear-gradient(180deg,#3a0f18,#1c070c);box-shadow:0 -10px 40px rgba(0,0,0,.5),inset 0 1px 0 #ffd77a55;transform:translateY(100%);transition:transform .3s var(--ease)}
.cofreFolha.aberta .cofreFolhaCaixa{transform:none}
.cofreFolhaCaixa h2{margin:6px 0 6px;font-family:var(--serif);font-size:28px;color:#FFE7A8}
.cofreFolhaCaixa .sub{color:#f2cfa0}
.cofreCaixaLuzes{position:absolute;left:0;right:0;top:0;height:6px;background:repeating-linear-gradient(90deg,#ffd77a 0 10px,transparent 10px 22px);opacity:.7;animation:cofreLuzes 1s linear infinite}
@keyframes cofreLuzes{to{background-position:22px 0}}
.cofreApostas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.cofreAposta{display:flex;flex-direction:column;gap:4px;padding:14px 6px;border-radius:16px;background:linear-gradient(160deg,#b23a3a,#7d1d2c);color:#fff4dc;box-shadow:inset 0 0 0 1px #ffd77a66}
.cofreAposta b{font-size:16px}
.cofreAposta small{font-size:12px;color:#ffe3a3}
.cofreAposta:disabled{opacity:.4}
.cofreCaixas{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.cofrePresente{aspect-ratio:1;border-radius:18px;font-size:46px;background:linear-gradient(160deg,#c9a45c,#8a6a2c);box-shadow:inset 0 0 0 2px #ffd77a88,0 8px 18px rgba(0,0,0,.4);color:#fff;font-weight:800;transition:transform .2s var(--ease)}
.cofrePresente:not(:disabled):active{transform:scale(.94)}
.cofrePresente.escolhida{animation:cofreTreme .12s linear infinite}
.cofrePresente.aberta{font-size:26px;font-family:var(--serif)}
.cofrePresente.ganhou{background:linear-gradient(160deg,#ffe7a8,#e9a93c);color:#5a2a00;box-shadow:0 0 30px #ffd77a}
.cofrePresente.perdeu{background:linear-gradient(160deg,#4a3a3a,#2a1f1f);color:#bfa9a9;font-size:18px}
.cofrePresente.isca{background:linear-gradient(160deg,#ffe7a8,#e9a93c);color:#5a2a00;opacity:.85}
.cofrePresente:disabled{cursor:default}
@keyframes cofreTreme{25%{transform:rotate(-6deg) scale(1.04)}75%{transform:rotate(6deg) scale(1.04)}}
.cofreCaixaAcoes{margin-top:8px}
.cofreFolhaCaixa .link{color:#f2cfa0}