/* Starpoint Scramble: green and purple marbles on a glass star. */
.c1 { --base: #1FA36A; --hi: #8CF0BE; --lo: #0B6B42; --edge: #075032; }
.c2 { --base: #8257E0; --hi: #D2BEFF; --lo: #4D2BA0; --edge: #351C78; }
.bg-tray[data-game="starpoint"] { --tint: 214, 160, 40; --edge-rgb: 140, 96, 10; }
.sp-board { position: relative; width: 100%; }
.sp-star { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sp-tri { fill: rgba(255, 255, 255, .55); stroke: rgba(255, 255, 255, .8); stroke-width: .06; stroke-linejoin: round; }
.sp-home { stroke-width: .05; stroke-linejoin: round; }
.sp-home.h1 { fill: rgba(31, 163, 106, .28); stroke: rgba(31, 163, 106, .6); }
.sp-home.h2 { fill: rgba(130, 87, 224, .26); stroke: rgba(130, 87, 224, .6); }
.sp-hole { position: absolute; width: calc(100% / 13 * .84); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; margin: 0; padding: 0; border: 0;
  display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, rgba(90, 70, 20, .38), rgba(90, 70, 20, .18) 70%); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .25); }
.sp-hole .pc { width: 100%; }
.sp-hole.from { box-shadow: inset 0 0 0 2px rgba(245, 197, 66, .9), inset 0 2px 3px rgba(0, 0, 0, .25); }
.my-turn .sp-hole.can { cursor: pointer; }
.my-turn .sp-hole.can .pc { box-shadow: 0 3px 0 var(--edge), 0 0 0 3px rgba(255, 255, 255, .7), 0 6px 10px rgba(0, 0, 0, .3); }
.sp-hole.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); }
.sp-hole.tgt { cursor: pointer; background: radial-gradient(circle, rgba(255, 236, 160, .95) 30%, rgba(245, 197, 66, .5) 70%); box-shadow: 0 0 0 3px rgba(245, 197, 66, .35); animation: sp-pulse 1.2s ease-in-out infinite; }
.sp-hole.hint { animation: hint-glow 1s ease-in-out infinite alternate; }
@keyframes sp-pulse { 50% { transform: translate(-50%, -50%) scale(1.15); } }
:root[data-theme="dark"] .sp-tri { fill: rgba(255, 255, 255, .14); stroke: rgba(255, 255, 255, .3); }
:root[data-theme="dark"] .sp-hole { background: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, .45), rgba(0, 0, 0, .2) 70%); }