/* Breathing Visualizer — tool-specific styles */
.bv-patterns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.bv-custom-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px;
  padding-bottom: 20px; border-bottom: 1px solid var(--line); }

.bv-stage { display: flex; align-items: center; justify-content: center; min-height: 340px; padding: 20px 0; }
.bv-shape {
  width: 170px; height: 170px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.22), transparent 60%), var(--accent-grad);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  transform: scale(0.75); transition: transform 4s ease-in-out, box-shadow 4s ease-in-out;
  box-shadow: 0 0 40px -6px rgba(108,139,255,.5), 0 0 0 1px rgba(255,255,255,.06) inset;
  color: #0b0e1c;
}
.bv-shape.bv-active { box-shadow: 0 0 70px -4px rgba(108,139,255,.85), 0 0 0 1px rgba(255,255,255,.1) inset; }
#bvLabel { font-weight: 700; font-size: .95rem; letter-spacing: .02em; }
#bvCount { font-size: 2.4rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }

.bv-controls { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.bv-play { min-width: 130px; }

/* Full-screen mode (native Fullscreen API on .tool-card) — big, distraction-free breathing
   guide. .bv-patterns/.bv-custom-row/.bv-controls are marked fs-controls (base.css +
   assets/site.js): they auto-hide after a couple of seconds idle and reappear on
   mouse/touch activity. Reserved top/bottom padding keeps the shape from ever
   overlapping them when they reappear. */
.bv-card:fullscreen { display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg); border-radius: 0; padding: 90px 24px 100px; }
.bv-card:fullscreen .bv-patterns { position: absolute; top: 20px; }
.bv-card:fullscreen .bv-custom-row { position: absolute; top: 68px; width: min(600px, 90vw); }
.bv-card:fullscreen .bv-controls { position: absolute; bottom: 24px; }
.bv-card:fullscreen .bv-stage { min-height: 0; }
.bv-card:fullscreen .bv-shape { width: min(46vh, 46vw, 360px); height: min(46vh, 46vw, 360px); }
.bv-card:fullscreen #bvLabel { font-size: clamp(1.1rem, 2.6vw, 1.6rem); }
.bv-card:fullscreen #bvCount { font-size: clamp(3rem, 8vw, 5.5rem); }

@media (max-width: 560px) {
  .bv-custom-row { grid-template-columns: 1fr 1fr; }
  .bv-shape { width: 140px; height: 140px; }
}