/* bloklar sayfasına özel stiller */
.blocks-layout {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
}
.head-tools { margin: 0; }
.blocks-board {
  position: relative;
  width: min(300px, 62vw, calc((100vh - 200px) / 2));
  width: min(300px, 62vw, calc((100svh - 200px) / 2));
  aspect-ratio: 1 / 2;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  --bl-bg: #22253a;
  --bl-grid: #2c3049;
}
:root[data-theme="dark"] .blocks-board { --bl-bg: #171a26; --bl-grid: #21253a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .blocks-board { --bl-bg: #171a26; --bl-grid: #21253a; }
}
@media (hover: none) and (pointer: coarse) {
  .blocks-board { width: min(300px, 62vw, max(160px, calc((100vh - 235px) / 2))); }
  .blocks-board { width: min(300px, 62vw, max(160px, calc((100svh - 235px) / 2))); }
}
.blocks-board canvas { width: 100%; height: 100%; }
.blocks-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 112px;
}
.blocks-side .stat { min-width: 0; }
.next-box {
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
}
.next-box span {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.next-box canvas { width: 72px; height: 72px; margin: 4px auto 0; }
.blocks-pad {
  margin-top: 12px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 360px;
}
@media (max-width: 400px) {
  .blocks-pad { gap: 6px; }
  .blocks-pad .pad-btn { width: 50px; height: 52px; }
}
@media (max-width: 520px) {
  .blocks-side { width: 92px; }
  .blocks-side .stat { padding: 4px 8px; }
  .blocks-side .stat b { font-size: 1.05rem; }
  .next-box canvas { width: 56px; height: 56px; }
}