/**
 * Word Connect Stylesheet - Popyca Games
 *
 * Warm cream, slate, and terracotta visual aesthetic.
 * Mobile-first responsive anagram letter wheel & crossword grid.
 */

:root {
  --wc-table-bg: #ece5d8;
  --wc-tile-bg: #ffffff;
  --wc-tile-border: #d8cebe;
  --wc-tile-found-bg: #e26938;
  --wc-tile-found-color: #ffffff;
  --wc-tile-hint-bg: #fef3c7;
  --wc-tile-hint-color: #b45309;

  --wc-wheel-size: min(65vw, 260px);
  --wc-node-size: min(13vw, 54px);
}

@media (min-width: 600px) {
  :root {
    --wc-wheel-size: 260px;
    --wc-node-size: 54px;
  }
}

/* Stage Container */
.word-connect-stage {
  width: 100%;
  max-width: 480px;
  background: var(--wc-table-bg);
  border-radius: 14px;
  padding: 16px 14px 28px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08), 0 6px 16px rgba(0, 0, 0, 0.05);
  user-select: none;
  -webkit-user-select: none;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Word Slots / Crossword Target Grid */
.wc-words-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  min-height: 140px;
  justify-content: center;
  margin-bottom: 12px;
  width: 100%;
}

.wc-word-row {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.wc-letter-slot {
  width: 36px;
  height: 38px;
  background: var(--wc-tile-bg);
  border: 1.5px solid var(--wc-tile-border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
}

.wc-letter-slot.revealed-hint {
  background: var(--wc-tile-hint-bg);
  border-color: #f59e0b;
  color: var(--wc-tile-hint-color);
  animation: tilePop 0.25s ease;
}

.wc-letter-slot.found {
  background: var(--wc-tile-found-bg);
  border-color: #cb5626;
  color: var(--wc-tile-found-color);
  box-shadow: 0 2px 6px rgba(226, 105, 56, 0.35);
  animation: tilePop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes tilePop {
  0% { transform: scale(0.6); }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Current Word Preview Bubble */
.wc-preview-wrap {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.wc-preview-bubble {
  background: var(--color-surface);
  border: 1.5px solid var(--color-primary);
  border-radius: 999px;
  padding: 4px 18px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  min-width: 80px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(226, 105, 56, 0.15);
  opacity: 0;
  transform: translateY(4px);
  transition: all 0.12s ease;
}

.wc-preview-bubble.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Letter Wheel Section */
.wc-wheel-section {
  position: relative;
  width: var(--wc-wheel-size);
  height: var(--wc-wheel-size);
  margin: 10px auto;
  touch-action: none;
}

.wc-wheel-base {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid var(--wc-tile-border);
  border-radius: 50%;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Tracing SVG Canvas */
.wc-trace-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.wc-trace-line {
  stroke: var(--color-primary);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}

/* Circular Letter Nodes */
.wc-letter-node {
  position: absolute;
  width: var(--wc-node-size);
  height: var(--wc-node-size);
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--wc-tile-border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: var(--color-ink);
  cursor: pointer;
  z-index: 10;
  transition: transform 0.1s ease, border-color 0.1s ease, background-color 0.1s ease;
  touch-action: none;
}

.wc-letter-node.active {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(226, 105, 56, 0.4);
}

/* Wheel Action Buttons (Shuffle & Hint) */
.wc-wheel-controls {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 260px;
  margin-top: 14px;
}

.btn-wheel-action {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.15s ease;
}

.btn-wheel-action:hover:not(:disabled) {
  background: #ede6dc;
  border-color: #d8cebe;
  color: var(--color-ink);
}

.btn-wheel-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.hint-cost-badge {
  font-size: 11px;
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 800;
}

/* Level Victory Modal */
.wc-level-cleared-badge {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
}