.games-overlay {
  position: fixed;
  inset: 0;
  z-index: 48;
  display: grid;
  place-items: center;
  background: rgba(2, 8, 7, 0.78);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  padding: 16px;
}

.games-overlay.open {
  opacity: 1;
  visibility: visible;
}

.games-shell {
  width: min(1020px, 100%);
  max-height: 92vh;
  border: 1px solid #24443b;
  border-radius: 14px;
  background: linear-gradient(180deg, #0b1714 0%, #0f1f1b 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

.games-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #24443b;
}

.games-header h2 {
  margin: 0;
  color: #b4ffe0;
  font-size: 1.1rem;
}

.games-close {
  border: 1px solid #325448;
  background: #12231e;
  color: #d8ffee;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 0.86rem;
  cursor: pointer;
}

.games-close:hover {
  background: #183029;
}

.games-body {
  display: grid;
  grid-template-columns: minmax(220px, 260px) 1fr;
  min-height: 0;
}

.games-menu {
  border-right: 1px solid #24443b;
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
  overflow: auto;
}

.games-menu-item {
  border: 1px solid #2b4f43;
  background: #122520;
  color: #ddfff0;
  border-radius: 9px;
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
}

.games-menu-item:hover {
  background: #19332c;
}

.games-menu-item.is-active {
  border-color: #56ffb4;
  color: #56ffb4;
}

.games-content {
  padding: 18px;
  overflow: auto;
}

.games-content h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #e7fff4;
}

.games-content p {
  margin: 10px 0 0;
  color: #8fb7a8;
}

.game-panel {
  display: grid;
  gap: 12px;
  align-content: start;
}

.game-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.game-score {
  border: 1px solid #2f5448;
  border-radius: 8px;
  background: #132821;
  color: #dcfff0;
  font-size: 0.92rem;
  padding: 7px 11px;
}

.game-restart {
  border: 1px solid #3a6758;
  border-radius: 8px;
  background: #173128;
  color: #dbfff0;
  padding: 7px 12px;
  font-size: 0.88rem;
  cursor: pointer;
}

.game-restart:hover {
  background: #1d3b31;
}

.game-status {
  color: #9fc7b8;
  font-size: 0.86rem;
  min-height: 1.2em;
}

.g2048-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: min(360px, 100%);
  padding: 8px;
  border: 1px solid #2a4d40;
  border-radius: 12px;
  background: #0f201a;
}

.g2048-tile {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: #172a23;
  color: #e6fff5;
  font-weight: 700;
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  display: grid;
  place-items: center;
}

.g2048-tile.t0 { background: #12221c; color: transparent; }
.g2048-tile.t2 { background: #1f3d32; }
.g2048-tile.t4 { background: #285043; }
.g2048-tile.t8 { background: #336856; }
.g2048-tile.t16 { background: #3d7f6a; }
.g2048-tile.t32 { background: #49997f; }
.g2048-tile.t64 { background: #51b590; color: #072018; }
.g2048-tile.t128 { background: #64d9ad; color: #072018; font-size: 0.96rem; }
.g2048-tile.t256 { background: #73efbd; color: #062017; font-size: 0.96rem; }
.g2048-tile.t512 { background: #84ffd1; color: #062017; font-size: 0.9rem; }
.g2048-tile.t1024 { background: #9affdc; color: #061c14; font-size: 0.82rem; }
.g2048-tile.t2048 { background: #b8ffe8; color: #041610; font-size: 0.82rem; }

.snake-canvas {
  display: block;
  width: min(440px, 100%);
  max-width: 100%;
  height: auto;
  border: 1px solid #2b4d41;
  border-radius: 12px;
  background: #0b1512;
}

.game-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sudoku-grid {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  width: min(420px, 100%);
}

.sudoku-cell {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid #2b5044;
  background: #11211b;
  color: #e7fff4;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  outline: none;
}

.sudoku-cell.is-editable:focus {
  box-shadow: inset 0 0 0 2px rgba(86, 255, 180, 0.45);
}

.sudoku-cell.is-fixed {
  background: #1a342c;
  color: #abf4d5;
}

.sudoku-cell.is-conflict {
  background: #4d2030;
  border-color: #8f3a52;
  color: #ffdbe4;
}

.sudoku-cell.top-bold { border-top-width: 2px; }
.sudoku-cell.left-bold { border-left-width: 2px; }
.sudoku-cell.right-bold { border-right-width: 2px; }
.sudoku-cell.bottom-bold { border-bottom-width: 2px; }

.tetris-canvas {
  display: block;
  width: min(320px, 100%);
  max-width: 100%;
  height: auto;
  border: 1px solid #2f5548;
  border-radius: 12px;
  background: #0a1411;
}

.word-mask {
  font-family: "Avenir Next", "Futura", "Century Gothic", "Noto Sans", sans-serif;
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  letter-spacing: 0.18em;
  color: #d5ffed;
  min-height: 1.6em;
}

.word-form {
  display: grid;
  grid-template-columns: minmax(0, 180px) auto;
  gap: 8px;
  align-items: center;
}

.word-input {
  width: 100%;
  border: 1px solid #2d5648;
  border-radius: 8px;
  background: #0f201a;
  color: #e8fff4;
  padding: 9px 10px;
  font-size: 1rem;
  text-align: center;
  text-transform: uppercase;
}

.word-input:focus {
  outline: none;
  border-color: #56ffb4;
  box-shadow: 0 0 0 3px rgba(86, 255, 180, 0.2);
}

.crossword-grid {
  display: grid;
  gap: 4px;
  width: min(360px, 100%);
}

.crossword-cell {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid #325d4f;
  border-radius: 6px;
  background: #11211b;
  overflow: hidden;
}

.crossword-cell input {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: #e8fff4;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  outline: none;
}

.crossword-cell input:focus {
  background: #183128;
}

.crossword-cell.is-block {
  background: #08100d;
  border-color: #1a3028;
}

.crossword-num {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 0.6rem;
  color: #8cc8b0;
  line-height: 1;
  pointer-events: none;
}

.crossword-clues {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.crossword-clues strong {
  display: block;
  margin-bottom: 6px;
  color: #bcffe4;
  font-size: 0.86rem;
}

.crossword-clues ul {
  margin: 0;
  padding-left: 18px;
  color: #9dc3b5;
  font-size: 0.82rem;
  display: grid;
  gap: 4px;
}

.mine-grid {
  display: grid;
  gap: 4px;
  width: min(410px, 100%);
}

.mine-cell {
  border: 1px solid #2f5548;
  border-radius: 6px;
  background: #12221d;
  color: #ddfff0;
  height: 34px;
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
}

.mine-cell:hover {
  background: #193028;
}

.mine-cell.is-revealed {
  background: #1b362d;
}

.mine-cell.is-mine {
  background: #572636;
  border-color: #7f3148;
  color: #ffd6de;
}

.mine-cell.is-flagged {
  color: #ffd58a;
}

@media (max-width: 760px) {
  .games-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .games-menu {
    border-right: 0;
    border-bottom: 1px solid #24443b;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .games-content {
    padding: 14px;
  }

  .mine-cell {
    height: 32px;
  }

  .word-form {
    grid-template-columns: 1fr;
  }

  .crossword-clues {
    grid-template-columns: 1fr;
  }
}