.match-page { background: #d9eddb; color: #29483e; }
#loading { margin: 22vh auto; text-align: center; font-weight: 700; }
.match-instructions { font-size: 13px; line-height: 1.5; text-align: center; margin: 0; }
.match-instructions strong { display: block; font-size: 15px; }
.match-level-picker { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 12px 0; }
.match-level-picker button { background: #e4efdc; font-size: 22px; }
.match-level-picker output { flex: 1; max-width: 250px; font-size: 15px; font-weight: 800; line-height: 1.4; }
.match-story { margin: 10px 0; font-size: 15px; line-height: 1.45; }
.match-picture-guide { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 8px 0; font-size: 24px; }
.match-picture-guide img { width: 42px; height: 38px; object-fit: contain; }
.match-grid { position: absolute; left: 1.388889%; top: 19%; width: 97.222222%; height: 70%; z-index: 2; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); touch-action: none; user-select: none; -webkit-user-select: none; }
.match-cell { min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; touch-action: none; }
.match-cell:focus-visible { outline: 3px solid #214f87; outline-offset: -4px; }
.match-page .match-cell:hover { filter: none; }
.match-grid[aria-busy="true"] { cursor: progress; }
.match-grid[inert] { pointer-events: none; }
.match-cell[aria-disabled="true"] { cursor: help; }
.match-page .match-next { margin-top: 12px; background: #dceecf; }
@media (max-width: 620px) {
  .match-instructions { max-width: 250px; font-size: 12px; }
}