/* Bálatologató – felső sáv és cél-panel */
.btn {
  width: var(--btn); height: var(--btn);
  border: none; border-radius: 22%;
  background: var(--cream);
  color: var(--wood-dark);
  box-shadow: 0 5px 0 var(--wood), 0 8px 14px rgba(0,0,0,.18);
  padding: calc(var(--btn) * .18);
  cursor: pointer;
  transition: transform .08s, box-shadow .08s, background .2s;
  touch-action: manipulation;
}
.btn:active, .btn.down { transform: translateY(4px); box-shadow: 0 1px 0 var(--wood), 0 3px 6px rgba(0,0,0,.18); }
.btn:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; }
.btn.small { width: calc(var(--btn) * .82); height: calc(var(--btn) * .82); padding: calc(var(--btn) * .16); }

#topbar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 10;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gap);
  padding: calc(var(--gap) + var(--safe-t)) calc(var(--gap) + var(--safe-r)) 0 calc(var(--gap) + var(--safe-l));
  pointer-events: none;
}
#topbar > * { pointer-events: auto; }
#topbar .right { display: flex; gap: var(--gap); }

#goals {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap);
  pointer-events: none;
}
.goal {
  display: flex; align-items: center; gap: 4px;
  background: rgba(255,250,240,.92);
  border-radius: 999px;
  padding: 5px 12px 5px 8px;
  box-shadow: 0 4px 0 rgba(107,66,34,.35);
  transition: transform .3s, background .3s;
}
.goal .gi { width: calc(var(--btn) * .62); height: calc(var(--btn) * .62); }
.goal .gto { width: calc(var(--btn) * .34); height: calc(var(--btn) * .34); color: var(--wood); }
.goal .dots { display: flex; gap: 4px; margin-left: 4px; }
.goal .dot { width: 14px; height: 14px; border-radius: 50%; background: #e3d6c3; box-shadow: inset 0 2px 3px rgba(0,0,0,.15); transition: background .3s, transform .3s; }
.goal .dot.on { background: var(--green); transform: scale(1.15); box-shadow: 0 0 0 2px #fff; }
.goal.done { background: #e4f7d6; transform: scale(1.05); }

@media (max-width: 480px) {
  .goal { padding: 4px 8px 4px 6px; }
  .goal .dot { width: 11px; height: 11px; }
}