/* =============================================================
   GAME: Same Game
   ============================================================= */
.board-samegame { --cell: min(calc((100vw - 72px) / var(--w, 12)), 38px); }
.sg-field {
  position: relative; width: calc(var(--cell) * var(--w, 12) + 16px); height: calc(var(--cell) * var(--h, 12) + 16px); padding: 8px;
  border-radius: 16px; outline: none; cursor: pointer; touch-action: manipulation;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(93, 255, 196, .1), transparent 60%),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 8px 8px / var(--cell) var(--cell),
    linear-gradient(180deg, #1d1946, #0e0b24);
  box-shadow: 0 0 0 2px #5dffc4, 0 0 26px rgba(93, 255, 196, .3), inset 0 -6px 0 rgba(0, 0, 0, .3), 0 14px 30px rgba(0, 0, 0, .45);
}
.sg-field:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 26px rgba(93, 255, 196, .5); }
.sg-layer, .sg-fx { position: absolute; inset: 8px; }
.sg-fx { pointer-events: none; z-index: 5; }

.sg-c0 { --bc: #ff4d6d; --bi: #5a0018; }
.sg-c1 { --bc: #3d8bff; --bi: #0a1f55; }
.sg-c2 { --bc: #3ddc84; --bi: #00381c; }
.sg-c3 { --bc: #ffd23f; --bi: #4a3500; }
.sg-c4 { --bc: #b768ff; --bi: #2c0a55; }
.sg-b {
  position: absolute; left: 0; top: 0; width: var(--cell); height: var(--cell); padding: calc(var(--cell) * .06);
  transform: translate(calc(var(--x) * var(--cell)), calc(var(--y) * var(--cell)));
  transition: transform .26s cubic-bezier(.35, 1.25, .55, 1);
}
/* glossy block with bevel and a shape for each colour */
.sg-b svg {
  display: block; width: 100%; height: 100%; padding: 22%; border-radius: 26%;
  fill: var(--bi); fill-opacity: .55;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 55%),
    radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--bc) 55%, #000), var(--bc) 70%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .28), 0 3px 4px rgba(0, 0, 0, .4);
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.sg-hover svg { transform: translateY(-2px) scale(1.04); filter: brightness(1.22); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 0 0 2px rgba(255, 255, 255, .85), 0 0 12px var(--bc); }
.sg-pick svg { filter: brightness(1.25); box-shadow: 0 0 0 2px #fff, 0 0 14px var(--bc); animation: sgpick .8s ease-in-out infinite alternate; }
@keyframes sgpick { to { transform: scale(.9); } }
.sg-hint svg { box-shadow: 0 0 0 2px #fff, 0 0 16px #fff; animation: sghint .5s ease-in-out 4 alternate; }
@keyframes sghint { to { transform: scale(.82); filter: brightness(1.4); } }
.sg-cur::after { content: ""; position: absolute; inset: 0; border-radius: 30%; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 0, 0, .6); pointer-events: none; }
.sg-out { z-index: 3; pointer-events: none; }
.sg-out svg { animation: sgout .26s ease-in forwards; }
@keyframes sgout { 40% { transform: scale(1.18); filter: brightness(1.8); } to { transform: scale(0); opacity: 0; } }
.sg-shake svg { animation: sgshake .3s ease; }
@keyframes sgshake { 25% { translate: -2px 0; } 75% { translate: 2px 0; } }
.sg-end svg { filter: saturate(.55) brightness(.75); }
.sg-float {
  position: absolute; left: 0; top: 0; width: var(--cell); text-align: center; white-space: nowrap;
  transform: translate(calc(var(--x) * var(--cell)), calc(var(--y) * var(--cell)));
  font: 800 1.05rem var(--font-head); color: #fff; text-shadow: 0 0 10px #5dffc4, 0 2px 3px #000;
  animation: sgfloat .9s ease-out forwards;
}
@keyframes sgfloat { from { opacity: 0; translate: 0 6px; scale: .7; } 20% { opacity: 1; scale: 1.15; } to { opacity: 0; translate: 0 -34px; } }
.sg-dot { background: radial-gradient(circle at 35% 30%, #e0fff3 0 15%, #5dffc4 50%, #0a6a48); }
.sg-gain { color: #b8ffe3; font-weight: 700; }
.sg-left { color: var(--muted); font-weight: 600; }
.sg-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
@media (prefers-reduced-motion: reduce) { .sg-b { transition: none; } .sg-pick svg, .sg-hint svg { animation: none; } }