.balls, .jogo { display: flex; gap: .4rem; flex-wrap: wrap; }
.ball { display:inline-flex; align-items:center; justify-content:center; width:2.2rem; height:2.2rem; border-radius:50%; background:#7c4dff; color:#fff; font-weight:600; }
.ball.small { width:1.6rem; height:1.6rem; font-size:.85rem; }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(80px,1fr)); gap:.6rem; }
.gerar-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card { padding:.6rem; text-align:center; border:1px solid #eee; border-radius:.5rem; }
.muted-card { background: #fafafa; }
.gerados { margin-top: .8rem; display:flex; flex-direction:column; gap:.4rem; }
.jogo{ align-items:center; }
.jogo .btnSave{ margin-left:.5rem; }
.jogo .btnSmall{ font-size:.75rem; padding:.25rem .45rem; }
footer { margin-top: 2rem; }

.heatmap { display:grid; grid-template-columns: repeat(5, 1fr); gap:.4rem; }
.heat { display:flex; align-items:center; justify-content:center; height:2.2rem; border-radius:.4rem; color:#fff; font-weight:600; }
.legend{ margin-top:.4rem; }
.legend-bar{ height:.6rem; border-radius:.4rem; border:1px solid rgba(127,127,127,.25);
  background: linear-gradient(90deg, hsl(260 85% 55%), hsl(40 85% 55%)); }
.legend-labels{ display:flex; justify-content:space-between; font-size:.8rem; opacity:.75; margin-top:.15rem; }
.controls { display:flex; gap:.6rem; align-items:center; flex-wrap: wrap; }
section[id]{ scroll-margin-top: 1rem; }

/* Espaço para o menu flutuante */
main.container { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }

/* Menu flutuante estilo iOS (glass) */
:root{
  --fn-bg: rgba(255,255,255,0.7);
  --fn-border: rgba(0,0,0,0.08);
  --fn-shadow: 0 10px 30px rgba(0,0,0,0.15);
  --fn-active: #7c4dff;
}
[data-theme="dark"]{
  --fn-bg: rgba(20,20,24,0.6);
  --fn-border: rgba(255,255,255,0.07);
  --fn-shadow: 0 10px 30px rgba(0,0,0,0.5);
  --fn-active: #a78bfa;
}
.floating-nav{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(1rem + env(safe-area-inset-bottom));
  display: flex;
  gap: .25rem;
  padding: .4rem;
  background: var(--fn-bg);
  border: 1px solid var(--fn-border);
  border-radius: 1.4rem;
  backdrop-filter: saturate(160%) blur(18px);
  box-shadow: var(--fn-shadow);
  z-index: 1000;
}
.floating-nav .fn-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.15rem;
  min-width: 3.6rem;
  padding: .5rem .6rem;
  border-radius: 1rem;
  color: inherit;
  text-decoration: none;
  border: 1px solid transparent;
}
.floating-nav .fn-item svg{
  width: 1.4rem; height: 1.4rem; display:block; fill: currentColor;
}
.floating-nav .fn-item span{ font-size: .7rem; opacity: .8; }
.floating-nav .fn-item:hover{ background: rgba(127,127,127,.08); }
.floating-nav .fn-item.active{
  color: var(--fn-active);
  background: rgba(124,77,255,0.12);
  border-color: rgba(124,77,255,0.25);
}
.floating-nav .fn-item.tap{ transform: scale(.98); }

/* Exibir somente o módulo ativo */
body[data-view="modules"] section[id]{
  display: none;
}
body[data-view="modules"] section[id].active{
  display: block;
  animation: fadeIn .18s ease-out;
}
@keyframes fadeIn{
  from{ opacity: 0; transform: translateY(4px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Overlay translúcido para progresso */
.overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.25);
  backdrop-filter: saturate(140%) blur(6px);
  z-index: 1200;
}
.overlay.show{ display:flex; animation: fadeIn .15s ease-out; }
.overlay-box{
  width: min(92vw, 520px);
  max-height: min(70vh, 520px);
  background: var(--fn-bg);
  border: 1px solid var(--fn-border);
  border-radius: .8rem;
  box-shadow: var(--fn-shadow);
  padding: .8rem;
  display:flex; flex-direction:column; gap:.5rem;
}
.overlay-header{ display:flex; align-items:center; justify-content:space-between; }
.overlay-log{
  overflow:auto; flex:1; padding:.25rem; border-radius:.5rem;
  background: rgba(127,127,127,0.06);
  border: 1px dashed rgba(127,127,127,0.25);
}
.overlay-log p{ margin:.25rem 0; font-size:.95rem; }

/* Picker de números para simulação manual */
.picker .ball{ cursor: pointer; user-select: none; background:#e9e9ff; color:#333; }
[data-theme="dark"] .picker .ball{ background:#2d2d3a; color:#ddd; }
.picker .ball.selected{ background:#7c4dff; color:#fff; box-shadow: 0 0 0 2px rgba(124,77,255,0.25) inset; }
.picker .ball.disabled{ opacity:.45; cursor:not-allowed; }

/* Balões flutuantes para celebração */
.balloons-container{
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1300;
}
.float-balloon{
  position: absolute;
  bottom: -10vh;
  width: 14px; height: 18px;
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
  background: #ff6b6b;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  animation: balloonUp 4.4s ease-in forwards;
  opacity: .9;
}
@keyframes balloonUp{
  from{ transform: translateY(0) scale(1); opacity:.9; }
  to{ transform: translateY(-110vh) scale(1); opacity: 0; }
}