/* ============================================================
   Block Win — clone do jogo de puzzle de blocos 8x8
   Paleta e medidas extraídas do app original (blockwins.club)
   ============================================================ */
:root{
  --bg:#0b0e1a;
  --board:#1a4480;
  --cell:#15386a;
  --primary:#00e5a8;
  --gold:#ffe566;
  --danger:#ff5470;
  --purple:#7c5cff;
  --text:#eef1ff;
  --muted:#9aa3c7;
  --panel:#0e1222;
  --panel2:#171c36;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:'Baloo 2',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 50% -8%, #e0b25e 0%, #d98f5c 34%, #c76b6b 62%, #7a3f57 100%) fixed;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-user-select:none;user-select:none;
}

/* casca do app (mobile-first, igual ao original) */
.app{
  width:100%;max-width:460px;margin:0 auto;
  min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  padding:10px 12px 24px;position:relative;
}

/* ---------- HUD topo ---------- */
.hud-top{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-top:4px;
}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  background:#00000026;border:1px solid #ffffff1f;border-radius:999px;
  padding:6px 12px;font-weight:800;font-size:15px;color:#fff8dc;
  box-shadow:inset 0 1px 0 #ffffff2e;
}
.chip .ico{filter:drop-shadow(0 1px 1px #0006)}
.chip.gold{color:#ffe566}
.skip{
  background:none;border:none;color:#3b6ef5;font-weight:800;font-size:15px;
  text-decoration:underline;cursor:pointer;padding:6px 4px;
}

/* ---------- Contador de saldo ---------- */
.balance-wrap{width:100%;text-align:center;margin:6px 0 2px}
.balance{
  font-size:46px;font-weight:900;line-height:1;
  color:#00ff88;
  text-shadow:0 2px 0 #0a5a35, 0 0 22px #00ff8877;
  letter-spacing:.5px;transition:transform .15s;
}
.balance.pop{transform:scale(1.14)}
.balance .cur{font-size:30px;vertical-align:6px;margin-right:2px}

/* barra de progresso da meta */
.progress{
  width:210px;height:8px;margin:10px auto 4px;
  background:#00000038;border-radius:999px;overflow:hidden;
  box-shadow:inset 0 1px 3px #0006;
}
.progress > i{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,#ffe566,#ffc107);
  border-radius:999px;transition:width .4s ease;
}

/* caixa de mensagem/tutorial */
.msg{
  width:100%;max-width:440px;margin:8px auto 0;
  background:linear-gradient(#4a3428, #3a2820);
  border:1px solid #00000040;border-radius:14px;
  padding:12px 16px;text-align:center;font-weight:600;font-size:15px;
  color:#ffe9d0;box-shadow:0 6px 16px #0003, inset 0 1px 0 #ffffff14;
  min-height:44px;line-height:1.35;
}
.msg b{color:#ffe566}

/* ---------- Tabuleiro ---------- */
.board-wrap{
  width:min(calc(100vw - 24px), 440px);
  margin-top:14px;position:relative;touch-action:none;
}
.board{
  aspect-ratio:1;background:var(--board);border-radius:12px;
  display:grid;grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(8,1fr);
  gap:4px;padding:10px;box-shadow:inset 0 2px 10px #00000055, 0 8px 24px #0004;
}
.cell{
  background:var(--cell);border-radius:5px;position:relative;
  transition:background .12s;
}
.cell.filled{ background:var(--c1); }
/* bloco 3D preenchido */
.cell.filled::after{
  content:"";position:absolute;inset:0;border-radius:5px;
  background:linear-gradient(145deg, var(--c1), var(--c2));
  box-shadow:inset 0 2px 0 #ffffff66, inset 0 -3px 4px #00000055,
             0 1px 2px #0006;
}
.cell.hint::before{
  content:"";position:absolute;inset:0;border-radius:5px;
  background:var(--c1);opacity:.35;z-index:2;
}
.cell.hint.bad::before{ background:var(--danger);opacity:.4; }
.cell.clearing::after{ animation:.35s ease-out forwards boom; }

@keyframes boom{
  0%{transform:scale(1);filter:brightness(1)}
  40%{transform:scale(1.18);filter:brightness(2.2)}
  100%{transform:scale(0);filter:brightness(3);opacity:0}
}
.board-wrap.shake{ animation:.4s shake; }
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px)}
  40%{transform:translateX(7px)}
  60%{transform:translateX(-5px)}
  80%{transform:translateX(5px)}
}

/* ---------- Bandeja de peças ---------- */
.tray{
  width:min(calc(100vw - 24px), 440px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px;
  touch-action:none;
}
.slot{
  background:#00000026;border:1px solid #ffffff12;border-radius:14px;
  min-height:92px;display:grid;place-items:center;padding:10px;
  transition:transform .12s,opacity .2s;
}
.slot.active{ border-color:#ffe56680;box-shadow:0 0 0 2px #ffe56640; }
.slot.empty{ opacity:.35; }
.slot.dragging{ opacity:.25; }
.piece-grid{ display:grid;gap:3px;pointer-events:none; }
.pcell{ width:var(--s,20px);height:var(--s,20px);border-radius:4px;position:relative; }
.pcell.on::after{
  content:"";position:absolute;inset:0;border-radius:4px;
  background:linear-gradient(145deg, var(--c1), var(--c2));
  box-shadow:inset 0 2px 0 #ffffff66, inset 0 -3px 4px #00000055, 0 1px 2px #0006;
}
.piece-appear{ animation:.34s cubic-bezier(.34,1.56,.64,1) backwards pop; }
@keyframes pop{ from{transform:scale(.2);opacity:0} to{transform:scale(1);opacity:1} }

/* fantasma arrastado */
#drag-ghost{
  position:fixed;left:0;top:0;z-index:60;pointer-events:none;
  display:none;will-change:transform;filter:drop-shadow(0 8px 12px #0007);
}

/* +R$ flutuante ao explodir */
.floater{
  position:fixed;z-index:70;pointer-events:none;font-weight:900;font-size:26px;
  color:#00ff88;text-shadow:0 2px 6px #00000088;
  animation:1s ease-out forwards floatup;
}
@keyframes floatup{
  0%{transform:translate(-50%,-50%) scale(.6);opacity:0}
  20%{transform:translate(-50%,-60%) scale(1.1);opacity:1}
  100%{transform:translate(-50%,-160%) scale(1);opacity:0}
}

/* combo badge */
.combo{
  position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);
  z-index:71;pointer-events:none;font-weight:900;font-size:40px;color:#ffe566;
  text-shadow:0 3px 0 #b8860b, 0 0 24px #ffe56699;
  animation:.9s ease-out forwards comboanim;
}
@keyframes comboanim{
  0%{transform:translate(-50%,-50%) scale(.3) rotate(-8deg);opacity:0}
  30%{transform:translate(-50%,-50%) scale(1.2) rotate(3deg);opacity:1}
  70%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}
  100%{transform:translate(-50%,-90%) scale(1);opacity:0}
}

/* ---------- rodapé / botões ---------- */
.foot{ width:100%;display:flex;justify-content:space-between;align-items:center;margin-top:18px;gap:10px; }
.btn{
  border:none;border-radius:12px;padding:12px 18px;font-weight:800;font-size:15px;
  cursor:pointer;color:#08210f;font-family:inherit;
  background:linear-gradient(145deg,#22c55e,#16a34a);
  box-shadow:0 4px 0 #0d7a35, 0 6px 14px #0004;transition:transform .08s;
}
.btn:active{ transform:translateY(2px);box-shadow:0 2px 0 #0d7a35; }
.btn.ghost{ background:#ffffff14;color:#fff;box-shadow:0 4px 0 #0004; }
.btn.gold{ background:linear-gradient(145deg,#ffe082,#ffb300);color:#3a2600;box-shadow:0 4px 0 #a86e00,0 6px 14px #0004; }
.sound{
  position:fixed;right:14px;bottom:14px;z-index:40;
  width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
  background:#1a1f38cc;color:#fff;font-size:20px;box-shadow:0 4px 12px #0006;
}

/* ---------- modais ---------- */
.overlay{
  position:fixed;inset:0;z-index:80;background:#05070fcc;backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.overlay.show{ display:flex; }
.modal{
  width:100%;max-width:380px;background:linear-gradient(#131a30,#0b0f1e);
  border:1px solid #ffffff1a;border-radius:20px;padding:22px;text-align:center;
  box-shadow:0 20px 60px #000a;animation:.3s ease-out modalin;
}
@keyframes modalin{ from{transform:scale(.9) translateY(12px);opacity:0} to{transform:none;opacity:1} }
.modal h2{ margin:4px 0 6px;font-size:24px;color:#fff; }
.modal p{ color:var(--muted);margin:6px 0 16px;font-size:15px;line-height:1.4; }
.modal .big{ font-size:40px;font-weight:900;color:#00ff88;text-shadow:0 0 18px #00ff8855;margin:8px 0; }
.modal input{
  width:100%;padding:13px 14px;border-radius:12px;border:1px solid #ffffff20;
  background:#00000040;color:#fff;font-size:16px;font-family:inherit;margin-bottom:12px;
}
.modal .row{ display:flex;gap:10px;margin-top:6px; }
.modal .row .btn{ flex:1; }
/* info de saque (rollover) */
.wd-info{ background:#00000033;border:1px solid #ffffff14;border-radius:12px;padding:10px 12px;margin-bottom:12px;font-size:13px;text-align:left;color:var(--muted); }
.wd-info .ok{ color:#00ff88; } .wd-info .lock{ color:var(--gold); }
.wd-bar{ height:7px;background:#00000040;border-radius:999px;overflow:hidden;margin:6px 0 2px; }
.wd-bar > i{ display:block;height:100%;background:linear-gradient(90deg,#ffe566,#ffc107);border-radius:999px; }

/* recarga PIX */
.chips{ display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:6px 0 12px; }
.amt{
  border:1px solid #ffffff26;background:#ffffff10;color:#fff;border-radius:10px;
  padding:9px 14px;font-weight:800;font-size:15px;cursor:pointer;font-family:inherit;
}
.amt.on{ background:linear-gradient(145deg,#22c55e,#16a34a);color:#08210f;border-color:transparent; }
.pixcode{
  word-break:break-all;font-family:ui-monospace,Menlo,monospace;font-size:11px;color:#9aa3c7;
  background:#00000040;border:1px solid #ffffff14;border-radius:10px;padding:10px;max-height:80px;overflow:auto;
}
#depWaiting{ color:var(--gold);font-weight:700; }
#depWaiting.paid{ color:#00ff88; }

.lb-list{ text-align:left;max-height:50vh;overflow:auto;margin:8px 0; }
.lb-row{ display:flex;justify-content:space-between;padding:9px 12px;border-radius:10px;font-weight:700; }
.lb-row:nth-child(odd){ background:#ffffff0a; }
.lb-row .pos{ color:var(--gold);width:34px; }
.lb-row .nm{ flex:1; }
.lb-row .sc{ color:var(--primary); }

/* alvo destacado no tutorial */
.cell.tutglow{ animation:1s ease-in-out infinite tutpulse; z-index:3; }
@keyframes tutpulse{
  0%,100%{ box-shadow:inset 0 0 0 2px #ffe56680, 0 0 0 0 #ffe56600; }
  50%{ box-shadow:inset 0 0 0 3px #ffe566, 0 0 14px 2px #ffe56688; }
}
#tutFinger{
  position:fixed;z-index:59;pointer-events:none;font-size:38px;display:none;
  filter:drop-shadow(0 4px 6px #0008);transform:translate(-50%,-50%);
  animation:1.1s ease-in-out infinite fingermove;
}
@keyframes fingermove{ 0%,100%{transform:translate(-50%,-40%)} 50%{transform:translate(-50%,-70%)} }

/* ---------- cadastro ---------- */
.modal.reg{ text-align:center; }
.reg-logo{ font-size:52px;margin-bottom:4px;filter:drop-shadow(0 4px 10px #0006); }
.modal.reg input{ text-align:center; }

/* ---------- tutorial ---------- */
#overTUT .tut-spot{
  position:fixed;border-radius:16px;pointer-events:none;
  box-shadow:0 0 0 4px #ffe566, 0 0 0 9999px #05070fdd;
  transition:all .4s cubic-bezier(.34,1.56,.64,1);opacity:0;
}
#overTUT .tut-spot.show{ opacity:1; }
.tut-card{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  width:min(420px,92vw);background:linear-gradient(#1a2138,#12172a);
  border:1px solid #ffffff1f;border-radius:18px;padding:18px 18px 14px;
  box-shadow:0 16px 40px #000a;z-index:2;
}
.tut-hand{ font-size:30px;text-align:center;animation:1.2s ease-in-out infinite handmove; }
@keyframes handmove{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.tut-text{ text-align:center;font-size:16px;font-weight:600;color:#eef1ff;margin:8px 0 14px;line-height:1.4; }
.tut-text b{ color:#ffe566; }
.tut-nav{ display:flex;align-items:center;justify-content:space-between;gap:10px; }
.tut-nav .btn{ padding:10px 22px; }
.tut-dots{ display:flex;gap:6px;justify-content:center;margin-top:12px; }
.tut-dots i{ width:7px;height:7px;border-radius:50%;background:#ffffff2e; }
.tut-dots i.on{ background:#ffe566;width:18px;border-radius:4px; }

/* fonte */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&display=swap');