/* =============================================================
   GAME: Flip Lights — glass lamps on a dark panel
   ============================================================= */
.board-fliplights {
  --fl-glow: #ffe45c;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.fl-grid {
  --n: 5;
  --cell: min(calc((100vw - 72px - var(--n) * 8px) / var(--n)), 68px);
  display: grid; grid-template-columns: repeat(var(--n), var(--cell)); grid-auto-rows: var(--cell); gap: 8px;
  padding: 12px; border-radius: 18px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 228, 92, .08), transparent 60%),
    linear-gradient(160deg, #2b2410, #121009 70%);
  box-shadow: 0 0 0 2px var(--fl-glow), 0 0 30px rgba(255, 228, 92, .3), inset 0 2px 12px rgba(0, 0, 0, .6), 0 12px 30px rgba(0, 0, 0, .4);
}
.fl-cell {
  position: relative; border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: 14px;
  background: linear-gradient(180deg, #24222c, #15141b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -3px 0 rgba(0, 0, 0, .45), 0 3px 0 rgba(0, 0, 0, .45);
  display: grid; place-items: center;
  transition: transform .1s ease, background .2s ease, box-shadow .2s ease;
}
.fl-lamp {
  width: 64%; height: 64%; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #4a4656, #24222c 70%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06), inset 0 -3px 6px rgba(0, 0, 0, .5);
  transition: background .2s ease, box-shadow .2s ease;
}
.fl-cell:hover .fl-lamp { box-shadow: inset 0 0 0 2px rgba(255, 228, 92, .3), inset 0 -3px 6px rgba(0, 0, 0, .5); }
.fl-cell:active { transform: translateY(2px); }
.fl-cell:focus { outline: none; }
.fl-cell:focus-visible { box-shadow: 0 0 0 3px var(--focus), inset 0 -3px 0 rgba(0, 0, 0, .45); z-index: 1; }
/* lit lamp: warm glow spilling onto the tile */
.fl-cell.fl-on { background: radial-gradient(circle at 50% 45%, #6a5418, #2e2610 75%); }
.fl-cell.fl-on .fl-lamp {
  background: radial-gradient(circle at 40% 35%, #fffbe0, #ffe45c 45%, #f0a51c 85%);
  box-shadow: 0 0 calc(var(--cell) * .28) rgba(255, 228, 92, .85), 0 0 calc(var(--cell) * .6) rgba(255, 190, 60, .4), inset 0 -3px 6px rgba(200, 110, 0, .45);
}
/* hint: pulsing ring */
.fl-cell.fl-hinted::after {
  content: ""; position: absolute; inset: -3px; border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 0 3px #7ef0ff, 0 0 16px rgba(126, 240, 255, .7);
  animation: flhint 1s ease-in-out infinite alternate;
}
@keyframes flhint { to { box-shadow: 0 0 0 3px rgba(126, 240, 255, .35), 0 0 6px rgba(126, 240, 255, .3); } }
/* flip ripple */
.fl-cell.fl-rip1 .fl-lamp { animation: flflip .28s ease; }
.fl-cell.fl-rip2 .fl-lamp { animation: flflip .28s ease .07s both; }
@keyframes flflip { 0% { transform: scale(1); } 45% { transform: scale(.72); } 100% { transform: scale(1); } }
.fl-cell.fl-done { animation: flwin 1s ease both; }
.fl-cell.fl-done:nth-child(2n) { animation-delay: .1s; }
.fl-cell.fl-done:nth-child(3n) { animation-delay: .2s; }
@keyframes flwin { 40% { background: #4a3e14; box-shadow: 0 0 18px rgba(255, 228, 92, .5); } }
.fl-cell:disabled { cursor: default; }

.fl-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(100%, 360px); }
.fl-left { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.fl-hint {
  min-height: 42px; border: 0; cursor: pointer; border-radius: 12px; color: var(--ink); padding: 0 16px;
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 0 rgba(0, 0, 0, .35);
  font: 700 .95rem/1 var(--font-body); transition: transform .1s, box-shadow .15s;
}
.fl-hint:hover { box-shadow: inset 0 0 0 1px var(--fl-glow); }
.fl-hint:active { transform: translateY(2px); }
.fl-hint:disabled { opacity: .45; cursor: default; transform: none; }
.fl-hint:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fl-bulb { width: 12px; height: 12px; border-radius: 50%; background: var(--fl-glow); box-shadow: 0 0 8px rgba(255, 228, 92, .8); }
.fl-help { text-wrap: balance; margin: 0; font-size: .82rem; color: var(--muted); text-align: center; max-width: 420px; }
.fl-clock { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .fl-cell, .fl-lamp { transition: none; }
  .fl-cell.fl-rip1 .fl-lamp, .fl-cell.fl-rip2 .fl-lamp, .fl-cell.fl-done, .fl-cell.fl-hinted::after { animation: none; }
}