/* ============================================================
   Block Blast — reset mobile + layout fit-to-viewport
   ============================================================ */

:root{
  /* paleta oficial do Block Blast */
  --c1:#fec123;   /* amarelo    */
  --c2:#d91817;   /* vermelho   */
  --c3:#001d4f;   /* azul escuro*/
  --c4:#15c528;   /* verde      */
  --c5:#35c3f5;   /* azul claro */

  --bg:#176fd9;
  --bg-deep:#0d4ea3;
  --panel:#0f4b96;
  /* slot vazio CLAREIA o fundo: precisa contrastar com o bloco --c3,
     que e mais escuro que o proprio tabuleiro */
  --slot:rgba(255,255,255,.13);
  --line:rgba(255,255,255,.16);
  --txt:#ffffff;
  --dim:#bcd9fb;

  /* setados por JS: passo da celula do tabuleiro / da bandeja, em px */
  --pitch:40px;
  --tc:22px;

  --radius:22%;
  --inset:6%;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;          /* mata pull-to-refresh no Chrome */
  background:var(--bg);
}

body{
  /* fixed + inset:0 = a forma mais confiavel de matar o bounce do iOS Safari */
  position:fixed;
  inset:0;
  color:var(--txt);
  font:500 16px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  background:
    radial-gradient(125% 85% at 50% -12%, #4b9bf3 0%, transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);

  /* feel de app nativo */
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;         /* mata o zoom por duplo-toque */
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }

/* ------------------------------------------------------------
   Shell
   ------------------------------------------------------------ */
#app{
  position:absolute; inset:0;
  /* trava numa coluna estilo celular e centraliza em tablet/desktop.
     Com left:0 + right:0 + max-width, as margens auto resolvem a centralizacao. */
  max-width:460px; margin-inline:auto;
  display:flex; flex-direction:column;
  /* env() SEMPRE com fallback: sem ele, um safe-area desconhecido invalida
     o calc() e o navegador descarta o atalho padding inteiro (os 4 lados). */
  padding:
    calc(env(safe-area-inset-top,    0px) + 6px)
    calc(env(safe-area-inset-right,  0px) + 10px)
    calc(env(safe-area-inset-bottom, 0px) + 8px)
    calc(env(safe-area-inset-left,   0px) + 10px);
}

/* ------------------------------------------------------------
   HUD
   ------------------------------------------------------------ */
#hud{
  flex:0 0 auto;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:8px; padding:4px 2px 10px;
}
.hud-side{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.hud-side.acts{ flex-direction:row; justify-content:flex-end; align-items:center; gap:6px; }

.lbl{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); font-weight:700; }
.hud-side b{ font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; }

.hud-mid{ display:flex; flex-direction:column; align-items:center; line-height:1; }
.hud-mid b{
  font-size:40px; font-weight:900; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  text-shadow:0 2px 14px rgba(0,29,79,.55);
}
.combo{
  height:14px; font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  color:var(--c1); opacity:0; transform:translateY(-3px);
  transition:opacity .18s, transform .18s;
}
.combo.show{ opacity:1; transform:none; }

.ico{
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:12px; background:var(--slot); border:1px solid var(--line);
  color:var(--txt); transition:transform .12s, background .18s;
}
.ico:active{ transform:scale(.9); background:rgba(255,255,255,.26); }
.ico svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.ico .spk{ fill:currentColor; stroke-width:1.4; }
.ico .mute{ display:none; }
.ico[aria-pressed="false"]{ color:var(--dim); }
.ico[aria-pressed="false"] .wave{ display:none; }
.ico[aria-pressed="false"] .mute{ display:block; }

/* ------------------------------------------------------------
   Tabuleiro
   ------------------------------------------------------------ */
/* O tabuleiro fica um pouco acima do centro: a folga extra desce pro vao
   entre tabuleiro e bandeja, que e por onde o polegar arrasta. */
#boardWrap{
  flex:1 1 auto; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding-bottom:min(5vh, 46px);
  touch-action:none;                 /* nada de scroll/zoom em cima do jogo */
}

.board{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(8,1fr);
  aspect-ratio:1;
  width:100%; max-width:100%; max-height:100%;
  padding:0;
  border-radius:18px;
  /* moldura mais escura que o fundo, com os slots claros por dentro:
     cria a hierarquia tabuleiro > slot sem depender de bordas */
  background:linear-gradient(180deg, rgba(0,17,52,.22), rgba(0,17,52,.32));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    0 20px 44px -18px rgba(0,22,66,.75),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* celula = container SEM gap. O respiro vem do .blk interno.
   Assim o passo e exatamente larguraTabuleiro/8 e o snap fica trivial. */
.cell{ position:relative; }
.cell::before{
  content:""; position:absolute; inset:var(--inset);
  border-radius:var(--radius);
  background:var(--slot);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}

/* bloco colorido — compartilhado entre tabuleiro, bandeja e peca flutuante */
.blk{
  position:absolute; inset:var(--inset);
  border-radius:var(--radius);
  background-color:var(--c, #666);
  background-image:linear-gradient(180deg,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.07) 42%,
      rgba(0,0,0,.08) 62%,
      rgba(0,0,0,.28) 100%);
  /* o anel interno claro e o que faz o bloco --c3 (azul quase preto)
     ler como peca levantada e nao como buraco no tabuleiro */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 -.14em 0 rgba(0,0,0,.22),
    0 .06em .18em rgba(0,10,35,.45);
  opacity:0;
  transform:scale(.5);
  transition:opacity .1s linear, transform .1s linear;
  will-change:transform, opacity;
}
.cell.on .blk{ opacity:1; transform:none; }

.c1{ --c:var(--c1) } .c2{ --c:var(--c2) } .c3{ --c:var(--c3) }
.c4{ --c:var(--c4) } .c5{ --c:var(--c5) }

/* previa fantasma sob o dedo */
.cell.gh .blk{ opacity:.5; transform:scale(.9); }
.cell.gh::before{ background:rgba(255,255,255,.26); }
.cell.bad::before{ background:rgba(217,24,23,.34); box-shadow:inset 0 0 0 1px rgba(255,120,118,.55); }

/* linhas/colunas que vao ser destruidas */
.cell.pop .blk{ animation:pop .28s cubic-bezier(.34,.9,.3,1) forwards; }
@keyframes pop{
  0%   { transform:none;         filter:brightness(1); }
  30%  { transform:scale(1.22);  filter:brightness(2.4) saturate(.4); }
  100% { transform:scale(.1) rotate(12deg); opacity:0; filter:brightness(3); }
}

/* bloco recem encaixado */
.cell.new .blk{ animation:drop .22s cubic-bezier(.2,1.5,.4,1); }
@keyframes drop{ 0%{ transform:scale(.62) } 100%{ transform:none } }

/* ------------------------------------------------------------
   Bandeja
   ------------------------------------------------------------ */
/* altura FIXA (nao depende de --tc) — senao vira loop:
   --tc muda a altura da bandeja, que muda o tabuleiro, que muda --tc... */
#tray{
  flex:0 0 auto;
  display:grid; grid-template-columns:repeat(3,1fr);
  align-items:center; gap:6px;
  height:clamp(90px, 22dvh, 172px);
  margin-top:2px;
  touch-action:none;
}
.slot{
  position:relative; height:100%;
  display:flex; align-items:center; justify-content:center;
  border-radius:16px;
  transition:transform .14s;
}
.slot.taken:active{ transform:scale(.94); }
.slot.dragging .mini{ opacity:.18; }

.mini{
  position:relative;
  width:calc(var(--pw,1) * var(--u, var(--tc)));
  height:calc(var(--ph,1) * var(--u, var(--tc)));
  transition:opacity .12s;
}
.pcell{ position:absolute; }
.pcell .blk{ opacity:1; transform:none; transition:none; }

/* peca flutuante durante o arrasto */
#dragLayer{ position:fixed; inset:0; pointer-events:none; z-index:40; }
#dragLayer .mini{
  position:absolute; top:0; left:0;
  --u:var(--pitch);
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.55));
  will-change:transform;
}
#dragLayer .mini.snapback{ transition:transform .16s cubic-bezier(.3,.9,.3,1); }

/* ------------------------------------------------------------
   FX
   ------------------------------------------------------------ */
#fx{ position:fixed; inset:0; pointer-events:none; z-index:45; }
.fxtext{
  position:absolute;
  font-weight:900; font-size:26px; letter-spacing:-.02em;
  color:var(--c1); text-shadow:0 0 20px rgba(254,193,35,.85), 0 2px 6px rgba(0,22,66,.8);
  animation:rise .85s cubic-bezier(.2,.8,.3,1) forwards;
  white-space:nowrap;
}
@keyframes rise{
  0%   { opacity:0; transform:translate(-50%,-50%) scale(.5); }
  22%  { opacity:1; transform:translate(-50%,-72%) scale(1.12); }
  100% { opacity:0; transform:translate(-50%,-165%) scale(.95); }
}

/* ------------------------------------------------------------
   Game over
   ------------------------------------------------------------ */
.modal{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center;
  padding:24px;
  background:rgba(3,26,63,.72);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  animation:fade .22s ease-out;
}
.modal[hidden]{ display:none; }
@keyframes fade{ from{opacity:0} to{opacity:1} }

.card{
  width:min(340px,100%);
  padding:26px 22px 22px;
  border-radius:22px;
  text-align:center;
  background:linear-gradient(180deg, var(--panel), #0a3970);
  border:1px solid var(--line);
  box-shadow:0 30px 70px -20px rgba(0,16,48,.95);
  animation:popin .28s cubic-bezier(.2,1.3,.4,1);
}
@keyframes popin{ from{ transform:scale(.88) translateY(12px); opacity:0 } to{ transform:none; opacity:1 } }

.card h1{ font-size:24px; font-weight:900; letter-spacing:-.02em; }
.card .sub{ margin-top:6px; font-size:13px; color:var(--dim); }
.finals{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:20px 0 6px; }
.finals div{ padding:12px 8px; border-radius:14px; background:var(--slot); border:1px solid var(--line); }
.finals b{ display:block; margin-top:4px; font-size:26px; font-weight:900; font-variant-numeric:tabular-nums; }
.newrec{ margin-top:10px; font-size:12px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--c1); }
.newrec[hidden]{ display:none; }

.btn{
  width:100%; margin-top:18px; padding:15px;
  border-radius:15px; font-size:16px; font-weight:900;
  color:#40300a;
  background:linear-gradient(180deg,#ffd45c,var(--c1));
  box-shadow:0 8px 20px -8px rgba(254,193,35,.85), inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .12s, filter .12s;
}
.btn:active{ transform:scale(.97); filter:brightness(.92); }

/* telas curtas: encolhe o HUD pra nao roubar o tabuleiro */
@media (max-height:640px){
  .hud-mid b{ font-size:32px; }
  #hud{ padding-bottom:6px; }
  #tray{ margin-top:6px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}