/* Domino checkboxes */
.domino-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.domino-cell {
  position: relative;
  aspect-ratio: 1;
  cursor: pointer;
}

.domino-face {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--charcoal);
  border-radius: 4px;
  box-shadow: var(--shadow-machined);
  transition:
    background var(--duration-fast),
    transform var(--duration-fast) var(--ease-spring),
    box-shadow var(--duration-fast);
  position: relative;
}

.domino-face::after {
  content: "";
  position: absolute;
  inset: 30%;
  background: var(--bone);
  border-radius: 2px;
  opacity: 0;
  transform: scale(0);
  transition:
    opacity var(--duration-fast),
    transform var(--duration-normal) var(--ease-spring);
}

.domino-input:checked + .domino-face {
  background: var(--accent-orange);
  box-shadow: var(--shadow-pressed);
}

.domino-input:checked + .domino-face::after {
  opacity: 1;
  transform: scale(1);
}

.domino-cell:active .domino-face {
  transform: scale(0.92);
}

.domino-cell.ticking .domino-face {
  animation: domino-tick 0.2s var(--ease-spring);
}

@keyframes domino-tick {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.mode-toggle {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.5rem;
  background: var(--charcoal);
  color: var(--bone);
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--duration-fast);
}

.mode-toggle:hover {
  background: var(--charcoal-light);
}

/* Bubble wrap */
.bubble-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.bubble {
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.4), transparent 50%),
    linear-gradient(145deg, #d0e8ff 0%, #a8c8e8 100%);
  box-shadow:
    var(--shadow-machined),
    inset 0 -2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition:
    transform var(--duration-fast) var(--ease-spring),
    opacity var(--duration-normal);
  position: relative;
}

.bubble::after {
  content: "";
  position: absolute;
  top: 20%;
  left: 25%;
  width: 30%;
  height: 20%;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
}

.bubble:active:not(.popped) {
  transform: scale(0.9);
}

.bubble.popped {
  opacity: 0.3;
  background: var(--charcoal);
  box-shadow: var(--shadow-inset);
  transform: scale(0.85);
}

.bubble.popped::after {
  display: none;
}