/* ============================================================
   MINI SÖZ KÜP — oyun sayfası stilleri
   ============================================================ */
.wc-page { padding: 18px 16px 40px; display: flex; justify-content: center; }
#wc { width: 100%; max-width: 460px; display: flex; flex-direction: column; align-items: center; }

.wc-head { text-align: center; margin-bottom: 10px; }
.wc-head h1 { font-size: 28px; }
.wc-head p { margin: 4px 0 0; color: var(--ink-dim); font-size: 14px; }

/* Puan / süre çubuğu */
#wc-hud { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 10px; }
.wc-stat { display: flex; flex-direction: column; line-height: 1.1; }
.wc-stat.right { align-items: flex-end; }
.wc-stat small { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.wc-stat b { font-family: "Fredoka", sans-serif; font-size: 26px; color: var(--ink); }
.wc-clock { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 96px; }
#wc-time { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 22px; color: var(--ink); }
.wc-timebar-wrap { width: 96px; height: 6px; border-radius: 99px; background: var(--bg-soft-2); overflow: hidden; }
#wc-timebar { height: 100%; background: linear-gradient(90deg, #4abf8c, #ffcc33, #f29e33); transform-origin: left; transition: transform 1s linear; }
#wc-hud.hurry #wc-time { color: #e64d4d; animation: wc-pulse 1s ease-in-out infinite; }
#wc-hud.hurry #wc-timebar { background: #e64d4d; }
@keyframes wc-pulse { 50% { transform: scale(1.12); } }

/* Tahta */
#wc-board-wrap { position: relative; width: min(420px, 92vw); }
#wc-board {
  --gap: 4px;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  gap: var(--gap);
  padding: 8px;
  border-radius: 18px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(139, 92, 246, 0.08);
  aspect-ratio: 1 / 1;
  touch-action: none;
  user-select: none;
}
.wc-cell {
  min-width: 0; min-height: 0; overflow: hidden;
  border-radius: 7px;
  background: var(--bg-soft-2);
  display: flex; align-items: center; justify-content: center;
  font-family: "Fredoka", sans-serif; font-weight: 600;
  font-size: clamp(14px, 4.4vw, 22px);
  color: transparent;
}
.wc-cell.filled {
  background: var(--tc);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22), inset 0 2px 0 rgba(255, 255, 255, 0.25);
}
.wc-cell.drop { animation: wc-drop 0.25s cubic-bezier(.34,1.56,.64,1); }
@keyframes wc-drop { from { transform: scale(0.6); } to { transform: scale(1); } }
.wc-cell.ghost-ok { background: rgba(139, 92, 246, 0.35); color: rgba(255, 255, 255, 0.85); box-shadow: inset 0 0 0 2px var(--violet); }
.wc-cell.ghost-bad { background: rgba(230, 77, 77, 0.25); color: rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 2px #e64d4d; }
.wc-cell.filled.ghost-bad { filter: brightness(0.7); }
.wc-cell.ready {
  cursor: pointer;
  background: color-mix(in srgb, var(--tc) 55%, #ffcc33);
  box-shadow: 0 0 0 2px #ffcc33, 0 0 14px rgba(255, 204, 51, 0.65), inset 0 -3px 0 rgba(0, 0, 0, 0.22);
  animation: wc-ready 1.1s ease-in-out infinite;
  position: relative;
  z-index: 1;
}
@keyframes wc-ready { 50% { transform: scale(1.06); box-shadow: 0 0 0 2px #fff3b0, 0 0 22px rgba(255, 204, 51, 0.9), inset 0 -3px 0 rgba(0, 0, 0, 0.22); } }
.wc-cell.ready:hover { filter: brightness(1.15); }
.wc-cell.word { background: #ffcc33 !important; color: #17102e !important; text-shadow: none; animation: wc-word 0.3s ease; }
@keyframes wc-word { 50% { transform: scale(1.18) rotate(-4deg); } }
.wc-cell.pop { animation: wc-pop 0.65s ease forwards; }
.wc-cell.word.pop { animation: wc-word 0.3s ease, wc-pop 0.4s ease 0.25s forwards; }
@keyframes wc-pop { 0% { transform: scale(1); opacity: 1; } 60% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }

.wc-float {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 5;
  white-space: nowrap;
  font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 20px;
  color: #fff;
  background: var(--violet);
  padding: 4px 14px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.45);
  animation: wc-float 1.5s ease-out forwards;
}
@keyframes wc-float {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  70% { opacity: 1; transform: translate(-50%, -110%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(0.95); }
}

/* Parça tepsisi */
.wc-bottom { width: min(420px, 92vw); display: flex; align-items: center; gap: 10px; margin-top: 14px; }
#wc-tray { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; min-height: 112px; }
.wc-slot {
  display: flex; align-items: center; justify-content: center;
  min-height: 112px;
  border-radius: 14px;
  border: 1px dashed var(--line);
  transition: border-color 0.15s, background 0.15s, opacity 0.2s;
}
.wc-slot.refill .wc-piece { animation: wc-refill 0.35s cubic-bezier(.34,1.56,.64,1); }
@keyframes wc-refill { from { transform: scale(0.3) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
.wc-slot.selected { border: 1px solid var(--violet); background: var(--badge-bg); }
.wc-slot.lifting .wc-piece { opacity: 0.25; }
.wc-slot.nofit .wc-piece { opacity: 0.35; filter: grayscale(0.7); }
.wc-piece {
  --cell: 26px;
  display: grid;
  grid-template-rows: repeat(var(--rows), var(--cell));
  grid-template-columns: repeat(var(--cols), var(--cell));
  gap: 3px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1);
}
.wc-piece:hover { transform: scale(1.08) rotate(-2deg); }
.wc-pc {
  border-radius: 6px;
  background: var(--tc);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: "Fredoka", sans-serif; font-weight: 600;
  font-size: calc(var(--cell) * 0.55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22), inset 0 2px 0 rgba(255, 255, 255, 0.25);
}
.wc-loading { grid-column: 1 / -1; text-align: center; color: var(--ink-dim); margin: auto; }

/* Sürüklenen parça */
.wc-drag { position: fixed; left: 0; top: 0; z-index: 4000; pointer-events: none; }
.wc-drag .wc-piece { --cell: inherit; gap: var(--gap, 4px); transform: none; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.45)); }
.wc-drag .wc-piece { grid-template-rows: repeat(var(--rows), var(--cell)); grid-template-columns: repeat(var(--cols), var(--cell)); }

#wc-shuffle {
  flex: none;
  width: 64px; min-height: 112px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--ink);
  font-family: "Fredoka", sans-serif; font-size: 12px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, opacity 0.2s, transform 0.2s;
}
#wc-shuffle .ic { font-size: 24px; }
#wc-shuffle:hover:not(:disabled) { border-color: var(--violet); transform: translateY(-2px); }
#wc-shuffle:disabled { opacity: 0.4; cursor: default; }
#wc-shuffle.spin .ic { animation: wc-spin 0.5s ease; }
@keyframes wc-spin { to { transform: rotate(360deg); } }
#wc-shuffle-n {
  position: absolute; top: -7px; right: -7px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--violet); color: #fff; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
}

#wc-toast {
  position: fixed; top: 96px; left: 50%;
  transform: translate(-50%, -10px);
  z-index: 3600;
  background: var(--ink); color: var(--bg);
  font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 15px;
  padding: 10px 18px; border-radius: 12px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
#wc-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Pencereler */
.wc-modal {
  position: fixed; inset: 0; z-index: 4500;
  background: rgba(6, 4, 14, 0.72);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: wc-fade 0.2s ease-out;
}
@keyframes wc-fade { from { opacity: 0; } to { opacity: 1; } }
.wc-card {
  width: min(420px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: radial-gradient(ellipse at 50% 0%, rgba(139, 92, 246, 0.25), transparent 70%), var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 24px 22px 20px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  animation: wc-card-in 0.35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes wc-card-in { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.wc-card h3 { font-size: 24px; margin: 6px 0 10px; }
.wc-card p { color: var(--ink-dim); font-size: 14.5px; margin: 0 0 10px; }

.wc-intro-tiles { display: flex; justify-content: center; gap: 5px; flex-wrap: wrap; margin: 4px 0 6px; }
.wc-intro-tiles i, .wc-promo-icon i {
  font-style: normal;
  width: 36px; height: 36px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tc); color: #fff;
  font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 19px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22);
}
.wc-intro-tiles i { animation: wc-bounce 1.8s ease-in-out infinite; animation-delay: calc(var(--i) * 0.1s); }
@keyframes wc-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px); } }
.wc-how { list-style: none; padding: 0; margin: 8px 0 16px; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.wc-how li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-dim); font-size: 14.5px; }
.wc-how li span {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--violet); color: #fff; font-family: "Fredoka", sans-serif; font-size: 14px;
}
.wc-go { font-size: 17px; padding: 13px 32px; }

.wc-end-emoji { font-size: 44px; line-height: 1; }
.wc-end-score { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 54px; line-height: 1; color: var(--ink); margin: 4px 0 6px; }
.wc-newbest { color: #ffcc33 !important; font-family: "Fredoka", sans-serif; font-size: 16px !important; }
.wc-muted { color: var(--ink-faint) !important; }
.wc-end-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 10px; }
.wc-end-stats div { display: flex; flex-direction: column; align-items: center; }
.wc-end-stats b { font-family: "Fredoka", sans-serif; font-size: 20px; color: var(--ink); word-break: break-all; }
.wc-end-stats span { font-size: 12px; color: var(--ink-faint); }
.wc-found { margin-bottom: 12px; }
.wc-found small { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; }
.wc-found div { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.wc-found span { font-family: "Fredoka", sans-serif; font-size: 13px; padding: 2px 9px; border-radius: 999px; background: var(--badge-bg); border: 1px solid var(--badge-border); color: var(--violet-bright); }

.wc-promo {
  margin: 4px 0 14px;
  padding: 14px 14px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(74, 191, 140, 0.16), rgba(139, 92, 246, 0.16));
  border: 1px solid rgba(74, 191, 140, 0.4);
}
.wc-promo-icon { display: flex; justify-content: center; gap: 4px; margin-bottom: 8px; }
.wc-promo-icon i { width: 26px; height: 26px; font-size: 14px; border-radius: 6px; }
.wc-promo p { font-size: 13.5px; margin-bottom: 12px; }
.wc-cta { width: 100%; justify-content: center; font-size: 16px; padding: 14px 18px; animation: wc-cta 2.4s ease-in-out infinite; }
@keyframes wc-cta { 0%, 100% { box-shadow: 0 0 0 0 rgba(74, 191, 140, 0.0); } 50% { box-shadow: 0 0 0 8px rgba(74, 191, 140, 0.18); } }
.wc-end-actions { display: flex; gap: 10px; }
.wc-end-actions .btn { flex: 1 1 0; justify-content: center; padding-left: 10px; padding-right: 10px; }

@media (max-width: 640px) {
  .wc-page { padding-top: 10px; }
  .wc-head h1 { font-size: 22px; }
  .wc-head p { display: none; }
  #wc-board { --gap: 3px; padding: 6px; }
  .wc-piece { --cell: 22px; }
  #wc-tray, .wc-slot, #wc-shuffle { min-height: 96px; }
  body:has(#wc) .egg-moon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wc-cell.drop, .wc-cell.word, .wc-cell.ready, .wc-intro-tiles i, .wc-cta { animation: none; }
}

/* Çift/üçlü patlama: daha büyük yazı + tahta sarsılır */
.wc-float.big { font-size: 24px; background: linear-gradient(90deg, #f29e33, #ed6ba1, #8b5cf6); padding: 6px 18px; box-shadow: 0 10px 26px rgba(237, 107, 161, 0.55); }
#wc-board-wrap.shake { animation: wc-shake 0.45s ease; }
@keyframes wc-shake { 20% { transform: translate(-6px, 2px) rotate(-0.6deg); } 40% { transform: translate(6px, -2px) rotate(0.6deg); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(3px, 0); } }
/* Hamle yokken Karıştır düğmesi dikkat çeksin */
#wc-shuffle.attention { border-color: #ffcc33; box-shadow: 0 0 0 3px rgba(255, 204, 51, 0.25); animation: wc-attn 1s ease-in-out infinite; }
@keyframes wc-attn { 50% { transform: scale(1.08); } }

/* Birlikte patlayacak (kesişen) kelimeler: pembe-mor parıltı + ortak karede ×2 rozeti */
.wc-cell.ready.combo {
  background: color-mix(in srgb, var(--tc) 35%, #ed6ba1);
  box-shadow: 0 0 0 2px #ff7ad9, 0 0 16px rgba(237, 107, 161, 0.8), inset 0 -3px 0 rgba(0, 0, 0, 0.22);
  animation: wc-combo 0.9s ease-in-out infinite;
  overflow: visible;
}
@keyframes wc-combo { 50% { transform: scale(1.08); box-shadow: 0 0 0 2px #ffc2ef, 0 0 26px rgba(237, 107, 161, 1), inset 0 -3px 0 rgba(0, 0, 0, 0.22); } }
.wc-x {
  position: absolute; top: -8px; right: -8px; z-index: 3;
  min-width: 22px; height: 18px; padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f29e33, #ed6ba1);
  color: #fff; font-size: 11px; line-height: 18px; text-shadow: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
@media (prefers-reduced-motion: reduce) { .wc-cell.ready.combo { animation: none; } }

/* Oyun alanında ve pencerelerde çift tıklayınca yazılar mavi seçilmesin */
.page:has(#wc) main, #wc, #wc *, .wc-modal, .wc-modal * { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
#wc ::selection, .wc-modal ::selection, .page:has(#wc) main ::selection { background: transparent; }