:root {
  --ui-bg: #00000000; --ui-panel:#00000000;
  --ui-ink:#00FFBB; --ui-ink-dim:#FFFFFF; --ui-edge:#FFFFFF66;
  --btn-bg-1:#000000; --btn-bg-2:#000000;
  --game-bg:#00000000;
  --brick:#00FFBB; --brick-special:#000000; --brick-special-edge:#00FFBB;
  --paddle:#00FFBB; --paddle-gun:#FFFFFF; --ball:#FFFFFF;
  --bullet:#FFFFFF; --drop-fill:#000000; --drop-edge:#00FFBB; --drop-ink:#00FFBB;
  --brick-radius: 3px; --drop-radius: 3px;
  --drop-width: 24px; --drop-height: 24px;
  --brick-special-bg-url: ;  /* opcjonalne SVG tło dla cegieł */
  --drop-bg-url: ;           /* opcjonalne SVG tło dla bonusów */
  --canvas-max-w: 960px; --canvas-max-h: 600px; --canvas-min-h: 420px;
  --font: 'Helvetica-Light', system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --overlay: rgba(0,0,0,.0)
}

[data-theme="light"] {
  --ui-bg:#f5f7ff; --ui-panel:#ffffff; --ui-ink:#0c1230; --ui-ink-dim:#405078; --ui-edge:#dbe2ff;
  --btn-bg-1:#e9eeff; --btn-bg-2:#dce5ff;
  --game-bg:#eef2ff; --brick:#9aa8ff; --brick-special:#ffd57f; --brick-special-edge:#ffb347;
  --paddle:#6b93ff; --paddle-gun:#a6bbff; --ball:#ffd86b; --bullet:#66e1cc;
  --drop-fill:#ffe1b2; --drop-edge:#ffb347; --drop-ink:#5a3000;
  --overlay: rgba(0,0,0,.0);
}

header.header {
  display: flex;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 20px 1rem;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Helvetica-Light', sans-serif;
}
.hud {
  display:flex; gap:1rem; align-items:center;
  background: var(--ui-panel);
  border: 1px solid var(--ui-edge);
  padding: .5rem .75rem;
  border-radius: 8px;
}
.stat { font-weight:600; color:var(--ui-ink-dim); }
.stat b { color:var(--ui-ink); }

.stat--buffs {
    display: none;
}

.btn {
  appearance:none;
  border: 1px solid var(--ui-edge);
  background: linear-gradient(180deg,var(--btn-bg-1),var(--btn-bg-2));
  padding: .55rem .85rem;
  border-radius: 8px;
  color: var(--ui-ink);
  font-weight: 700;
  cursor: pointer;
}

main.main { 
    flex: 1;
    display: grid;
    padding: 1rem;
}

canvas#gameCanvas {
  background: var(--game-bg);
  border-radius: 8px;
  border: 1px solid var(--ui-edge);
  max-width: 100%;
  height: auto;
}

footer.footer {
  text-align: center;
  font-size: .85rem;
  padding: 20px 0;
  margin: 0 0 1rem 1rem;
  font-family: 'Helvetica-Light', sans-serif;
  color: #FFFFFF;
  border: 1px solid var(--ui-edge);
  border-radius: 8px;
  width: calc(100% - 2rem);
  box-sizing: border-box;
}