/* Board engine: pieces, trays and grids shared by every board game. */
.pc {
  --base: #2A2E36; --hi: #6A7180; --lo: #0E1015; --edge: #050608;
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 80%; aspect-ratio: 1; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle at 34% 28%, var(--hi) 0 10%, var(--base) 58%, var(--lo) 100%);
  box-shadow: 0 3px 0 var(--edge), 0 6px 10px rgba(0, 0, 0, .32), inset 0 -2px 3px rgba(0, 0, 0, .25);
}
.pc.dotpc { width: 22px; height: 22px; flex: none; box-shadow: 0 2px 0 var(--edge); }
.pc.mini { width: 16px; height: 16px; box-shadow: 0 2px 0 var(--edge); }
.c1 { --base: #2D5BD0; --hi: #8FB0FF; --lo: #17368A; --edge: #10275F; }
.c2 { --base: #E5484D; --hi: #FFA3A6; --lo: #8E1A1F; --edge: #6B1014; }
.pc.pop, .pc.slide { animation: pc-pop .32s cubic-bezier(.3, 1.6, .5, 1) both; }
.pc.flip { animation: pc-flip .45s ease-out both; }
.pc.ghost-out { position: absolute; animation: pc-out .5s ease-in forwards; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .pc.pop, .pc.slide, .pc.flip, .pc.ghost-out { animation: none; }
  .pc.ghost-out { display: none; }
}
.bg-wrap { width: 100%; max-width: 600px; margin: 0 auto; padding: 4px 0 30px; }
.bg-tray {
  --tray-x: linear-gradient(155deg, #CF9356 0%, #B0713A 55%, #93592A 100%); --tray-edge-x: #643816;
  padding: clamp(10px, 2.6vw, 18px); border-radius: 22px; background: var(--tray-x);
  box-shadow: 0 10px 0 var(--tray-edge-x), 0 26px 40px rgba(0, 0, 0, .22), inset 0 2px 0 rgba(255, 255, 255, .28);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.bg-grid { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-template-rows: repeat(var(--n), minmax(0, 1fr)); aspect-ratio: 1; }
.bg-row { display: contents; }
.bg-cell { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: default; }
.my-turn .bg-cell.can { cursor: pointer; }
.bg-cell.tgt::after { content: ''; position: absolute; width: 30%; aspect-ratio: 1; border-radius: 50%; background: rgba(245, 197, 66, .9); box-shadow: 0 0 0 5px rgba(245, 197, 66, .3); z-index: 2; pointer-events: none; }
.bg-cell.sel .pc { box-shadow: 0 3px 0 var(--edge), 0 0 0 4px #F5C542, 0 10px 18px rgba(0, 0, 0, .35); transform: translateY(-3px); }
.bg-cell.hint { animation: hint-glow 1s ease-in-out infinite alternate; }
.how-to { margin-top: 32px; max-width: 760px; }
.how-to ol { margin: 10px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }

/* Frosted Aurora: trays are tinted glass (the aurora glows through), pieces get a glassy highlight. */
.bg-tray {
  --tint: 176, 113, 58; --edge-rgb: 100, 56, 22;
  background: linear-gradient(155deg, rgba(var(--tint), .62), rgba(var(--tint), .82));
  border: 1px solid rgba(255, 255, 255, .55);
  backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -10px 30px rgba(0, 0, 0, .12), 0 12px 0 rgba(var(--edge-rgb), .45), 0 34px 60px rgba(30, 50, 100, .25);
  border-radius: 30px;
}
.pc::before { content: ''; position: absolute; left: 20%; right: 20%; top: 7%; height: 32%; border-radius: 50% 50% 40% 40%; background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); pointer-events: none; z-index: 2; }
.pc.mini::before, .pc.dotpc::before { display: none; }

/* Secret setup bar (Radar Strike, Hidden Rank Strategy) */
.setup-bar { display: flex; justify-content: center; gap: 10px; margin: 0 auto 12px; }
.setup-bar[hidden] { display: none; }
.setup-bar .btn { min-width: 120px; }