/* ── Game Canvas Common Styles ── */
.game-wrap {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #0a0e1a; padding: 16px; box-sizing: border-box;
  font-family: 'Inter', 'Segoe UI', sans-serif; color: #f0f4ff;
  min-height: 100vh;
}
.game-canvas-wrap { position: relative; display: inline-block; }
canvas {
  display: block; border-radius: 12px;
  border: 1px solid #1f2b3e;
  box-shadow: 0 0 40px rgba(108,99,255,0.2);
}
.game-ui-bar {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 500px; margin-bottom: 12px;
  background: #111827; border: 1px solid #1f2b3e; border-radius: 10px;
  padding: 10px 16px;
}
.game-score-label { font-size: 0.75rem; color: #8892a4; text-transform: uppercase; letter-spacing: 0.06em; }
.game-score-value {
  font-family: 'JetBrains Mono', monospace; font-size: 1.4rem; font-weight: 700;
  background: linear-gradient(135deg, #6c63ff, #00d4aa);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.game-btn {
  padding: 9px 20px; border-radius: 8px; font-weight: 700; font-size: 0.88rem;
  background: linear-gradient(135deg, #6c63ff, #8b7ff7); color: #fff;
  border: none; cursor: pointer; transition: all 0.2s; letter-spacing: 0.02em;
}
.game-btn:hover { box-shadow: 0 0 16px rgba(108,99,255,0.4); transform: scale(1.04); }
.game-btn.secondary {
  background: #1a2235; border: 1px solid #1f2b3e; color: #8892a4;
}
.game-btn.secondary:hover { border-color: #6c63ff; color: #6c63ff; }
.game-overlay {
  position: absolute; inset: 0; background: rgba(10,14,26,0.9);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 12px; gap: 12px; text-align: center; padding: 24px;
}
.game-overlay h2 { font-size: 1.8rem; font-family: 'Exo 2', sans-serif; }
.game-overlay p { color: #8892a4; font-size: 0.9rem; }
.game-overlay .final-score {
  font-size: 3rem; font-weight: 900; font-family: 'Exo 2', sans-serif;
  background: linear-gradient(135deg, #6c63ff, #00d4aa);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.difficulty-select {
  display: flex; gap: 8px; margin-bottom: 12px;
}
.diff-btn {
  padding: 6px 14px; border-radius: 6px; font-size: 0.8rem; font-weight: 600;
  background: #1a2235; border: 1px solid #1f2b3e; color: #8892a4; cursor: pointer;
  transition: all 0.2s;
}
.diff-btn.active, .diff-btn:hover {
  background: #6c63ff; border-color: #6c63ff; color: #fff;
}
/* Sudoku specific */
.sudoku-grid {
  display: grid; grid-template-columns: repeat(9, 1fr);
  border: 2px solid #6c63ff; border-radius: 8px; overflow: hidden;
  max-width: 360px; width: 100%;
}
.sudoku-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 600; background: #111827;
  border: 1px solid #1f2b3e; cursor: pointer; outline: none;
  color: #f0f4ff; caret-color: #6c63ff; transition: background 0.15s;
  width: 100%;
}
.sudoku-cell:focus { background: #1a2235; }
.sudoku-cell.given { color: #00d4aa; }
.sudoku-cell.error { background: rgba(255,107,107,0.15); color: #ff6b6b; }
.sudoku-cell:nth-child(3n) { border-right: 2px solid #6c63ff; }
.sudoku-row:nth-child(3n) .sudoku-cell { border-bottom: 2px solid #6c63ff; }
/* Memory cards */
.memory-grid { display: grid; gap: 8px; }
.mem-card {
  aspect-ratio: 1; border-radius: 10px; cursor: pointer;
  background: #1a2235; border: 1px solid #1f2b3e;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; transition: all 0.3s; transform-style: preserve-3d;
  position: relative; user-select: none;
}
.mem-card .front, .mem-card .back {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; backface-visibility: hidden;
}
.mem-card .back { background: linear-gradient(135deg, #6c63ff22, #00d4aa22); transform: rotateY(180deg); }
.mem-card.flipped { transform: rotateY(180deg); border-color: #6c63ff; }
.mem-card.matched { opacity: 0.5; pointer-events: none; border-color: #00d4aa; }
/* Hangman */
.hangman-word { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 16px 0; }
.letter-box {
  width: 36px; height: 44px; border-bottom: 3px solid #6c63ff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 700; font-family: 'Exo 2', sans-serif;
}
.keyboard-row { display: flex; gap: 6px; justify-content: center; margin: 4px 0; }
.key-btn {
  width: 36px; height: 36px; border-radius: 6px;
  background: #1a2235; border: 1px solid #1f2b3e; color: #f0f4ff;
  font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: all 0.2s;
}
.key-btn:hover:not(:disabled) { background: #6c63ff; border-color: #6c63ff; }
.key-btn:disabled { opacity: 0.3; cursor: default; }
.key-btn.wrong { background: rgba(255,107,107,0.2); border-color: #ff6b6b; color: #ff6b6b; }
.key-btn.correct { background: rgba(0,212,170,0.2); border-color: #00d4aa; color: #00d4aa; }
/* Typing game */
.typing-text-display {
  background: #111827; border: 1px solid #1f2b3e; border-radius: 10px;
  padding: 20px; font-size: 1.05rem; line-height: 1.8;
  max-width: 600px; width: 100%; letter-spacing: 0.02em;
}
.typing-text-display .char.correct { color: #00d4aa; }
.typing-text-display .char.wrong { color: #ff6b6b; background: rgba(255,107,107,0.15); border-radius: 2px; }
.typing-text-display .char.current { border-bottom: 2px solid #6c63ff; }
.typing-input {
  width: 100%; max-width: 600px; padding: 12px 16px; margin-top: 12px;
  background: #111827; border: 1px solid #1f2b3e; border-radius: 10px;
  color: #f0f4ff; font-size: 1rem; outline: none; transition: border 0.2s;
}
.typing-input:focus { border-color: #6c63ff; }
/* Paint tool */
.paint-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #111827; border: 1px solid #1f2b3e; border-radius: 10px;
  padding: 10px 16px; margin-bottom: 10px; max-width: 600px; width: 100%;
}
.color-swatch {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: all 0.2s;
}
.color-swatch.active { border-color: #fff; transform: scale(1.2); }
.tool-btn {
  padding: 6px 12px; border-radius: 6px; font-size: 0.82rem; font-weight: 600;
  background: #1a2235; border: 1px solid #1f2b3e; color: #8892a4; cursor: pointer;
  transition: all 0.2s;
}
.tool-btn.active, .tool-btn:hover { background: #6c63ff; border-color: #6c63ff; color: #fff; }
/* Crossword */
.crossword-grid { display: inline-grid; gap: 2px; }
.cw-cell {
  width: 36px; height: 36px; background: #1a2235; border: 1px solid #2d3748;
  text-align: center; font-weight: 700; font-size: 1rem;
  color: #f0f4ff; text-transform: uppercase; outline: none; caret-color: #6c63ff;
  transition: background 0.15s; border-radius: 4px;
}
.cw-cell:focus { background: rgba(108,99,255,0.2); }
.cw-cell.blocked { background: #0a0e1a; pointer-events: none; }
.cw-cell.correct { background: rgba(0,212,170,0.2); }
.clues-panel { font-size: 0.85rem; color: #8892a4; line-height: 1.8; }
.clues-panel h4 { color: #6c63ff; font-size: 0.9rem; margin-bottom: 6px; }
/* Jigsaw */
.jigsaw-board {
  position: relative; background: #111827;
  border: 2px solid #1f2b3e; border-radius: 10px; overflow: hidden;
}
.jigsaw-piece {
  position: absolute; cursor: grab; user-select: none; transition: box-shadow 0.2s;
  border: 1px solid rgba(108,99,255,0.3); border-radius: 4px;
}
.jigsaw-piece:active { cursor: grabbing; }
.jigsaw-piece.placed { cursor: default; border-color: #00d4aa; }
.jigsaw-tray {
  display: flex; flex-wrap: wrap; gap: 8px;
  background: #111827; border: 1px solid #1f2b3e; border-radius: 10px;
  padding: 12px; min-height: 100px;
}