/* =============================================================
   GAME: Star Battle
   ============================================================= */
.board-starbattle {
  --sb-glow: #ffe14d;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.sb-grid {
  --cell: min(calc((100vw - 76px) / var(--n, 8)), 52px);
  display: grid; grid-template-columns: repeat(var(--n, 8), var(--cell)); grid-auto-rows: var(--cell);
  padding: 4px; border-radius: 14px; background: #0c0a24;
  box-shadow: 0 0 0 2px var(--sb-glow), 0 0 28px rgba(255, 225, 77, .3), 0 12px 30px rgba(0, 0, 0, .4);
}
.sb-cell {
  position: relative; border: 0; padding: 0; margin: 0; cursor: pointer;
  display: grid; place-items: center; color: hsl(var(--rh, 250) 40% 72%);
  background: linear-gradient(180deg, hsl(var(--rh, 250) 38% 24%), hsl(var(--rh, 250) 40% 18%));
  transition: background .15s, filter .15s;
}
/* thin grid lines, thick ones on region edges */
.sb-cell::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .07);
}
.sb-cell.sb-t::before { border-top: 2px solid #f6e7b0; }
.sb-cell.sb-b::before { border-bottom: 2px solid #f6e7b0; }
.sb-cell.sb-l::before { border-left: 2px solid #f6e7b0; }
.sb-cell.sb-r::before { border-right: 2px solid #f6e7b0; }
.sb-cell svg { width: 74%; height: 74%; display: block; pointer-events: none; }
.sb-cell:hover:not(:disabled) { filter: brightness(1.25); }
.sb-cell:focus { outline: none; }
.sb-cell:focus-visible::after { content: ""; position: absolute; inset: 3px; border-radius: 5px; box-shadow: 0 0 0 2px var(--focus); pointer-events: none; }
.sb-cell.sb-star svg { filter: drop-shadow(0 0 5px rgba(255, 210, 63, .75)); }
.sb-cell.sb-dot svg { width: 60%; height: 60%; opacity: .75; }
.sb-cell.sb-bad { background: linear-gradient(180deg, #5a1630, #43102a); }
.sb-cell.sb-bad svg { filter: drop-shadow(0 0 5px rgba(255, 61, 127, .9)); }
.sb-cell.sb-bad svg path { fill: #ff6b9a; stroke: #ffd0de; }
.sb-cell.sb-pop svg { animation: sbpop .3s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes sbpop { from { transform: scale(.3) rotate(-40deg); opacity: .2; } }
.sb-cell.sb-bad.sb-pop svg { animation: sbshake .32s ease; }
@keyframes sbshake { 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
.sb-cell.sb-flash { animation: sbflash .7s ease both; }
@keyframes sbflash { 35% { background: hsl(var(--rh, 250) 55% 40%); } }
.sb-cell.sb-done { animation: sbwin .9s ease both; }
.sb-cell.sb-done.sb-star svg { animation: sbspin .9s ease both; }
@keyframes sbwin { 50% { background: hsl(var(--rh, 250) 50% 36%); } }
@keyframes sbspin { 50% { transform: scale(1.25); } }
.sb-cell:disabled { cursor: default; }
.sb-loading .sb-cell { background: #17143a; animation: sbload 1.2s ease-in-out infinite alternate; }
.sb-loading .sb-cell:nth-child(2n) { animation-delay: .3s; }
@keyframes sbload { to { background: #221d52; } }

.sb-rule { margin: 2px 0 0; font-size: .92rem; font-weight: 600; color: var(--ink); text-align: center; max-width: 380px; }
.sb-rule strong { color: var(--sb-glow); }
.sb-hint { margin: 0; font-size: .82rem; color: var(--muted); text-align: center; max-width: 360px; }
@media (hover: none) { .sb-desk { display: none; } }
.sb-clock { font-variant-numeric: tabular-nums; }
.sb-count { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .sb-cell { transition: none; }
}