.relax-section { background: #f8faf7; border-top: 1px solid var(--line); }
.relax-section .eyebrow { margin-bottom: 8px; color: var(--green-ink); }
.games-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; align-items: start; }
.games-grid[hidden] { display: none; }
.game-card { position: relative; min-width: 0; padding: 26px 20px 20px; background: transparent; }
.game-frame { position: absolute; inset: 0; width: 100%; height: 100%; color: #597174; pointer-events: none; }
.game-card > :not(.game-frame) { position: relative; }
.game-heading { margin-bottom: 19px; }
.game-heading h3 { font-size: 24px; margin-bottom: 5px; }
.game-heading h3::after { content: ''; display: block; width: 45px; border-bottom: 3px solid var(--cyan); transform: rotate(-2deg); margin-top: 8px; }
#tic-game .game-heading h3::after { border-color: var(--green); }
.game-caption { color: var(--muted); font-size: 13px; }
.game-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; margin-bottom: 15px; font-size: 13px; color: var(--muted); }
.game-meta strong { margin-left: 3px; color: var(--heading); font-variant-numeric: tabular-nums; }
.game-meta select { max-width: 145px; min-width: 0; padding: 7px 25px 7px 9px; min-height: 38px; border: 1px solid #819697; border-radius: 5px 3px 6px 3px; color: var(--heading); background: #fff; font: inherit; }
.game-stage { height: 330px; display: flex; align-items: center; justify-content: center; }
.sketch-board { position: relative; width: 100%; max-width: 280px; aspect-ratio: 1; }
.board-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.tic-board { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.board-cell { min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer; touch-action: manipulation; }
.board-cell svg { display: block; width: 78%; height: 78%; pointer-events: none; }
.tic-board .board-cell { color: var(--cyan-ink); margin: 3px; }
.tic-board .board-cell[data-mark="O"] { color: var(--green-ink); }
.tic-board .board-cell:not([aria-disabled="true"]):hover { background: var(--cyan-light); }
.tic-board .board-cell.winning { background: var(--green-light); }
.board-cell[aria-disabled="true"] { cursor: default; }
.board-cell:focus-visible { z-index: 3; outline: 2px dashed var(--cyan-ink); outline-offset: -4px; }
.reversi-board { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); background: #f1f7e9; border: 1.5px solid #507445; border-radius: 4px 7px 4px 6px; }
.reversi-board .board-cell { border-radius: 0; }
.reversi-board .board-cell.legal:not([aria-disabled="true"]):hover { background: #d7ecbb; }
.reversi-board .board-cell.legal::after { content: ''; width: 16%; aspect-ratio: 1; border-radius: 47% 53% 44% 56%; background: #4f7840; opacity: .75; }
.reversi-board .board-cell.last-move::before { content: ''; position: absolute; inset: 3px; border: 1px dashed #006a80; border-radius: 3px; }
.game-status { min-height: 54px; margin: 14px 0 8px; line-height: 1.5; font-size: 14px; color: var(--heading); }
.game-legend { display: flex; align-items: center; justify-content: center; gap: 23px; min-height: 42px; font-size: 13px; color: var(--muted); }
.game-legend > span { display: inline-flex; gap: 7px; align-items: center; }
.game-legend i { font-style: normal; }
.legend-x, .legend-o { font-size: 28px; line-height: 1; color: var(--cyan-ink); }
.legend-o { color: var(--green-ink); }
.legend-disc { display: inline-block; width: 23px; height: 23px; }
.legend-disc svg { display: block; width: 100%; height: 100%; }
.game-actions { display: flex; gap: 9px; margin-top: 14px; }
.sketch-button { min-height: 42px; padding: 8px 17px; color: var(--heading); border: 1.4px solid #597174; border-radius: 4px 7px 4px 6px / 7px 4px 6px 4px; background: #fffefb; font-size: 14px; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.sketch-button.primary { background: #ddf4f9; }
#tic-game .sketch-button.primary { background: #e8f4d9; }
.sketch-button:hover:not(:disabled) { background: #c5edf5; }
.sketch-button:disabled { opacity: .55; cursor: default; }
.game-help { border-top: 1px dashed #bccac3; margin-top: 20px; padding-top: 12px; font-size: 13px; color: var(--muted); }
.game-help summary { cursor: pointer; color: var(--cyan-ink); padding-block: 4px; width: fit-content; }
.game-help p { margin: 12px 0 0; line-height: 1.7; }
.game-card :is(select,summary,canvas):focus-visible { outline: 3px solid var(--cyan-ink); outline-offset: 4px; }
.tetris-stage { align-items: center; gap: 14px; }
.tetris-field { position: relative; width: 162px; flex: 0 0 162px; }
#tetris-board { display: block; width: 162px; height: 324px; border: 1.5px solid #597174; border-radius: 4px 3px 6px 4px; background: #f8fcfa; touch-action: pan-y; }
.tetris-next { width: 80px; flex-shrink: 1; align-self: flex-start; margin-top: 10px; font-size: 12px; color: var(--muted); }
#tetris-next { display: block; width: 72px; height: 72px; max-width: 100%; }
.pencil-note { display: block; margin-top: 32px; font-size: 14px; font-style: italic; transform: rotate(-5deg); color: #6b826e; }
.tetris-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; text-align: center; background: #fffefbe8; border-radius: 4px; padding: 16px; pointer-events: none; }
.tetris-overlay[hidden] { display: none; }
.tetris-overlay strong { font-size: 19px; line-height: 1.35; color: var(--heading); }
.tetris-overlay span { font-size: 12px; color: var(--muted); }
.tetris-controls { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; min-height: 42px; }
.tetris-controls button { padding: 3px; border: 1px solid #718b8d; border-radius: 5px 3px 6px 4px; background: #f1f8f6; color: var(--heading); font-size: 22px; line-height: 1; min-height: 42px; cursor: pointer; touch-action: manipulation; }
.tetris-controls button:hover:not(:disabled) { background: #d8f3fa; }
.tetris-controls button:disabled { opacity: .45; cursor: default; }
@media (min-width: 761px) and (max-width: 980px) {
  #navigation { gap: 13px; }
  #navigation > a:not(.button) { font-size: 14px; }
  #navigation .button { padding-inline: 14px; }
  .header-inner { gap: 12px; }
  .header-inner .brand-logo { width: 135px; }
}
@media (max-width: 999px) {
  .games-grid { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; gap: 28px; }
  .game-card { padding: 26px; }
  .game-stage { height: 330px; }
}
@media (max-width: 380px) {
  .game-card { padding: 22px 16px 18px; }
  .tetris-stage { gap: 9px; }
  .tetris-next { width: 60px; }
  .game-legend { gap: 14px; }
}