/* Parity Bits: tool-specific styles. Theme comes from ../synthwave.css */
:root { --cell: min(10vw, 64px); }

.page--center { text-align: center; }
.controls { margin-bottom: 24px; }

#grid {
  display: inline-grid; gap: 8px; padding: 16px; border-width: 2px; border-radius: 6px;
  touch-action: manipulation;
  box-shadow: 0 0 20px var(--pink), inset 0 0 20px rgba(255, 42, 109, .25);
}

.cell { width: var(--cell); height: var(--cell); perspective: 500px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.cell:hover .front { box-shadow: 0 0 24px var(--cyan), 0 0 6px #fff; }
.cell:hover .back { box-shadow: 0 0 24px var(--pink), inset 0 0 16px rgba(255, 42, 109, .7); }

.inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.cell.on .inner { transform: rotateY(180deg); }

.face {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--cell) * .45); font-weight: bold; border-radius: 4px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.front { background: #0a1f3a; color: var(--cyan); border: 2px solid var(--cyan); box-shadow: 0 0 12px var(--cyan); text-shadow: 0 0 8px var(--cyan); }
.back { background: var(--canvas-bg); color: var(--pink); border: 2px solid var(--pink); box-shadow: 0 0 12px var(--pink), inset 0 0 12px rgba(255, 42, 109, .4); transform: rotateY(180deg); text-shadow: 0 0 8px var(--pink); }

@media (prefers-reduced-motion: reduce) { .inner { transition: none; } }

:root[data-theme="chill"] #grid { box-shadow: 0 6px 24px rgba(204, 63, 120, .2), inset 0 0 20px rgba(204, 63, 120, .08); }
:root[data-theme="chill"] .front { background: #e3f7fb; box-shadow: 0 3px 10px rgba(12, 133, 153, .25); }
:root[data-theme="chill"] .back { background: #ffe6f1; box-shadow: 0 3px 10px rgba(204, 63, 120, .3); }
:root[data-theme="chill"] .cell:hover .front { box-shadow: 0 4px 16px rgba(12, 133, 153, .45); }
:root[data-theme="chill"] .cell:hover .back { box-shadow: 0 4px 16px rgba(204, 63, 120, .5); }