.matchup-open .site-header,
.matchup-open .site-footer,
.matchup-open .halloween-scene,
.matchup-open #site-status,
.matchup-open #loading-options,
.matchup-open #owner-preview-bar {
  display: none;
}
.matchup-open #main {
  width: min(100% - 28px, 700px);
  padding: 14px 0 20px;
}
.matchup-open .play-top {
  margin: 0 0 10px;
}
.matchup-open .game-heading {
  margin: 0 0 18px;
  text-align: center;
}
.matchup-open #game-edition {
  display: none;
}
.matchup-open .game-heading h1 {
  margin: 0 0 6px;
  font-size: 36px;
  letter-spacing: -1.4px;
}
.matchup-open #game-description {
  margin: 0 auto;
  max-width: 550px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.matchup-open #game-credit {
  margin: 4px 0 0;
}
.matchup-open #game-body {
  min-height: 0;
  width: 100%;
}
.matchup-play {
  --matchup-yellow: #f1d878;
  --matchup-green: #b6d58f;
  --matchup-blue: #a9cbe5;
  --matchup-purple: #c9b2df;
}
.matchup-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
}
.matchup-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.matchup-tile {
  position: relative;
  min-width: 0;
  min-height: 96px;
  padding: 10px 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft, #e9ecdf);
  color: var(--ink);
  font: 700 16px/1.3 var(--font);
  overflow-wrap: anywhere;
  cursor: pointer;
  touch-action: manipulation;
}
.matchup-tile:hover {
  border-color: var(--muted);
}
.matchup-tile.selected {
  background: var(--button);
  border-color: var(--button);
  color: var(--on-button);
  box-shadow: inset 0 0 0 2px var(--on-button);
}
.matchup-tile:disabled {
  opacity: 1;
}
.matchup-solved {
  display: grid;
  gap: 8px;
}
.matchup-solved:not(:empty) {
  margin-bottom: 8px;
}
.matchup-category {
  min-height: 96px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  border-radius: 9px;
  padding: 12px 16px;
  color: #172e29;
}
.matchup-category h2 {
  margin: 0 0 5px;
  font: 800 15px/1.25 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  overflow-wrap: anywhere;
}
.matchup-category p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.matchup-play [data-matchup-color="0"] {
  background: var(--matchup-yellow);
  border-color: var(--matchup-yellow);
  color: #172e29;
}
.matchup-play [data-matchup-color="1"] {
  background: var(--matchup-green);
  border-color: var(--matchup-green);
  color: #172e29;
}
.matchup-play [data-matchup-color="2"] {
  background: var(--matchup-blue);
  border-color: var(--matchup-blue);
  color: #172e29;
}
.matchup-play [data-matchup-color="3"] {
  background: var(--matchup-purple);
  border-color: var(--matchup-purple);
  color: #172e29;
}
.matchup-message {
  min-height: 20px;
  margin: 12px 0;
  font-size: 12px;
  text-align: center;
  color: var(--muted);
}
.matchup-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.matchup-attempts {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
}
.matchup-dots {
  display: flex;
  gap: 5px;
}
.matchup-dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ink);
}
.matchup-dots i.used {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
}
.matchup-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.matchup-controls .button {
  border-radius: 30px;
  padding: 11px 22px;
  font-size: 12px;
}
@media (max-width: 700px) {
  .group-matchup-card p {
    max-width: 62%;
  }
  .matchup-open #main {
    padding-top: 10px;
  }
  .matchup-open .game-heading {
    margin-bottom: 14px;
  }
  .matchup-open .game-heading h1 {
    font-size: 30px;
  }
  .matchup-open #game-description {
    font-size: 12px;
  }
  .matchup-meta {
    font-size: 11px;
  }
  .matchup-board {
    gap: 6px;
  }
  .matchup-tile {
    min-height: 77px;
    padding: 8px 4px;
    border-radius: 7px;
    font-size: 12px;
  }
  .matchup-category {
    min-height: 77px;
    border-radius: 7px;
    padding: 9px 10px;
  }
  .matchup-category h2 {
    font-size: 12px;
  }
  .matchup-category p {
    font-size: 11px;
  }
  .matchup-controls .button {
    padding: 10px 17px;
    font-size: 11px;
  }
}