/* =============================================================
   GAME: Light Up (Akari)
   ============================================================= */
.board-lightup {
  --n: 10;
  --lu-glow: #ffe94d;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.lu-grid {
  --cell: min(calc((100vw - 70px - var(--n) * 2px) / var(--n)), 52px);
  display: grid; grid-template-columns: repeat(var(--n), var(--cell)); grid-auto-rows: var(--cell); gap: 2px;
  padding: 4px; border-radius: 14px;
  background: linear-gradient(160deg, #2a2a6a, #14143a 60%, #232360);
  box-shadow: 0 0 0 2px var(--lu-glow), 0 0 28px rgba(255, 233, 77, .3), 0 12px 30px rgba(0, 0, 0, .35);
}
.lu-cell {
  position: relative; border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: 5px;
  background: linear-gradient(180deg, #24264f, #1a1b3c); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  font: 800 calc(var(--cell) * .5) / 1 var(--font-body);
  display: grid; place-items: center;
  transition: background .25s ease, box-shadow .2s ease;
}
.lu-cell:hover { background: #2e3164; }
.lu-cell:focus { outline: none; }
.lu-cell:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.lu-cell.lu-sel { box-shadow: inset 0 0 0 2px var(--lu-glow); z-index: 1; }
/* lit floor: warm light */
.lu-cell.lu-lit { background: linear-gradient(180deg, #6b5a1f, #574815); }
.lu-cell.lu-lit:hover { background: #7a6824; }
/* walls */
.lu-cell.lu-wall {
  cursor: default; background: linear-gradient(180deg, #0b0b16, #050509); color: #f4f2ff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 -2px 0 rgba(0, 0, 0, .6);
}
.lu-cell.lu-wall.lu-met { color: #6a6890; }
.lu-cell.lu-wall.lu-bad { color: var(--t-red); text-shadow: 0 0 10px rgba(255, 61, 127, .6); }
.lu-cell.lu-wall.lu-sel { box-shadow: inset 0 0 0 2px var(--lu-glow); }
/* bulb */
.lu-in { display: grid; place-items: center; width: 100%; height: 100%; }
.lu-cell.lu-bulb .lu-in::before {
  content: ""; width: 58%; height: 58%; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fffbe0, #ffe94d 45%, #e0a800 100%);
  box-shadow: 0 0 calc(var(--cell) * .35) rgba(255, 233, 77, .85), 0 0 4px rgba(255, 255, 255, .8) inset;
}
.lu-cell.lu-bulb { background: radial-gradient(circle, #8a7424, #5e4f18 70%); }
.lu-cell.lu-bulb.lu-clash { background: radial-gradient(circle, #7a1d3c, #4a1028 70%); }
.lu-cell.lu-bulb.lu-clash .lu-in::before { background: radial-gradient(circle at 38% 32%, #ffe0ea, #ff3d7f 50%, #a01040); box-shadow: 0 0 calc(var(--cell) * .35) rgba(255, 61, 127, .85); }
/* mark: small dot = no bulb here */
.lu-cell.lu-mark .lu-in::before { content: ""; width: 18%; height: 18%; border-radius: 50%; background: #a8a6d8; }
.lu-cell.lu-lit.lu-mark .lu-in::before { background: #e8d9a0; }
.lu-cell.lu-pop .lu-in::before { animation: lupop .3s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes lupop { from { transform: scale(.3); opacity: .3; } }
.lu-cell.lu-done.lu-lit { animation: luwin .9s ease both; }
.lu-cell.lu-done:nth-child(3n+1) { animation-delay: .1s; }
.lu-cell.lu-done:nth-child(3n+2) { animation-delay: .2s; }
@keyframes luwin { 50% { background: #c9a92e; } }
.lu-cell:disabled { cursor: default; }
.lu-loading .lu-cell { background: #1a1b3c; animation: luload 1.2s ease-in-out infinite alternate; }
.lu-loading .lu-cell:nth-child(2n) { animation-delay: .3s; }
@keyframes luload { to { background: #272a58; } }

/* tool switch */
.lu-tools { display: flex; gap: 8px; width: min(100%, 340px); }
.lu-tool {
  flex: 1; min-height: 44px; border: 0; cursor: pointer; border-radius: 12px; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  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, background .15s;
}
.lu-tool:hover { box-shadow: inset 0 0 0 1px var(--lu-glow); }
.lu-tool:active { transform: translateY(2px); }
.lu-tool[aria-pressed="true"] { background: linear-gradient(135deg, #c99a10, #8a6508); color: #fff; box-shadow: 0 0 0 1px var(--lu-glow), 0 0 16px rgba(255, 233, 77, .4); }
.lu-tool:disabled { opacity: .45; cursor: default; transform: none; }
.lu-tool:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lu-ico { flex: none; border-radius: 50%; }
.lu-ico-bulb { width: 16px; height: 16px; background: radial-gradient(circle at 38% 32%, #fffbe0, #ffe94d 45%, #e0a800); box-shadow: 0 0 8px rgba(255, 233, 77, .8); }
.lu-ico-mark { width: 7px; height: 7px; background: #c9c6f0; }
.lu-hint { text-wrap: balance; margin: 0; font-size: .82rem; color: var(--muted); text-align: center; max-width: 420px; }
.lu-clock { font-variant-numeric: tabular-nums; }
.lu-count { color: var(--muted); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .lu-cell { transition: none; }
}