/* ============================================================
   KAYAN YAPBOZ — oyun sayfası stilleri
   ============================================================ */
#sp { --bs: max(260px, min(460px, 92vw, calc(100dvh - 360px))); }

#sp-pics { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.sp-pic { position: relative; width: 52px; height: 52px; padding: 0; border-radius: 12px; border: 2px solid transparent; background: none; cursor: pointer; overflow: visible; transition: transform 0.15s, border-color 0.15s; }
.sp-pic img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; display: block; opacity: 0.6; transition: opacity 0.15s; }
.sp-pic:hover { transform: translateY(-2px); }
.sp-pic:hover img, .sp-pic.active img { opacity: 1; }
.sp-pic.active { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3); }
.sp-pic i { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10px; letter-spacing: -1px; color: #ffcc33; text-shadow: 0 1px 2px #000; white-space: nowrap; }

.sp-hud { width: var(--bs); margin: 14px 0 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sp-tools { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.sp-tools .g-btn-dash.on { background: var(--violet); color: #fff; border-style: solid; }

/* Tahta */
#sp-board {
  position: relative; width: var(--bs); height: var(--bs);
  padding: 6px; border-radius: 18px;
  background: linear-gradient(160deg, #3a2a10, #24180a);
  border: 2px solid #c08a3e;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(255, 220, 150, 0.15);
}
#sp-tiles { --n: 3; --gap: 3px; position: absolute; inset: 6px; }
.sp-tile {
  position: absolute; left: 0; top: 0; padding: 0; border: 0; cursor: pointer;
  width: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));
  height: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));
  transform: translate(calc(var(--c) * (100% + var(--gap))), calc(var(--r) * (100% + var(--gap))));
  transition: transform 0.14s ease-out;
  border-radius: 8px;
  background-size: calc(var(--n) * 100% + (var(--n) - 1) * var(--gap)) auto;
  background-size: calc(var(--n) * 100%) calc(var(--n) * 100%);
  background-position: var(--bx) var(--by);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 3px 6px rgba(0, 0, 0, 0.4);
}
.sp-tile span {
  position: absolute; top: 4px; left: 4px; display: none;
  min-width: 22px; height: 22px; padding: 0 5px; border-radius: 99px;
  background: rgba(20, 12, 46, 0.82); color: #fff;
  font-family: "Fredoka", sans-serif; font-size: 12.5px; line-height: 22px;
}
#sp-board.nums .sp-tile span { display: block; }
.sp-tile.ok span { background: rgba(74, 191, 140, 0.9); }
#sp-final, #sp-peek-img { position: absolute; inset: 6px; border-radius: 10px; background-size: cover; pointer-events: none; opacity: 0; transition: opacity 0.5s; }
#sp-peek-img { z-index: 5; transition: opacity 0.15s; }
#sp-board.peeking #sp-peek-img { opacity: 1; }
#sp-board.win #sp-final { opacity: 1; z-index: 4; box-shadow: 0 0 0 3px #ffcc33, 0 0 36px rgba(255, 204, 51, 0.6); }

.sp-end-img { width: 120px; height: 120px; margin: 4px auto 0; border-radius: 18px; background-size: cover; box-shadow: 0 0 0 3px #ffcc33, 0 10px 26px rgba(0, 0, 0, 0.4); }
.sp-demo { display: inline-grid; grid-template-columns: repeat(3, 34px); gap: 4px; margin: 4px 0; }
.sp-demo i { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-style: normal; font-family: "Fredoka", sans-serif; color: #fff; background: hsl(calc(250 + var(--k) * 12) 70% 60%); }
.sp-demo i.gap { background: rgba(255, 255, 255, 0.06); }
.sp-demo i:nth-child(8) { animation: sp-demo 2.4s ease-in-out infinite; }
@keyframes sp-demo { 0%, 30% { transform: none; } 50%, 80% { transform: translateX(38px); } 100% { transform: none; } }

/* Geçmiş: resim × boyut rekorları */
.sp-recs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.sp-rec { display: grid; grid-template-columns: 40px repeat(3, 1fr); gap: 6px; align-items: center; }
.sp-rec img { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; }
.sp-rec span { display: flex; flex-direction: column; align-items: center; padding: 4px 2px; border-radius: 10px; background: var(--bg-soft-2); border: 1px solid var(--line); font-family: "Fredoka", sans-serif; }
.sp-rec span.top { border-color: rgba(255, 204, 51, 0.7); background: linear-gradient(180deg, rgba(255, 204, 51, 0.16), rgba(255, 204, 51, 0.04)); }
.sp-rec small { font-size: 10.5px; color: var(--ink-faint); }
.sp-rec em { font-style: normal; font-size: 12px; color: var(--ink-dim); }
.sp-rec .g-st i { font-size: 12px; }

@media (max-width: 640px) {
  #sp { --bs: max(260px, min(460px, calc(100vw - 32px), calc(100dvh - 330px))); }
  .sp-pic { width: 44px; height: 44px; }
  .sp-tools .g-btn-dash { padding: 6px 11px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .sp-tile { transition: none; } }