/* Skullsweeper. Tokens and buttons come from the shared SkullSeed stylesheet. */

html, body { min-height: 100%; background: var(--cream); }
body { padding: 16px; }

.game {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 560px;
  margin: 0 auto;
}

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

/* Difficulty: joined buttons, the current one inverted */
.levels { display: inline-flex; }
.level {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 7px 12px;
  background: var(--cream);
  color: var(--ink);
  border: var(--border);
  border-radius: 0;
  font: var(--weight-bold) 14px/1.2 var(--font);
  cursor: var(--cursor);
}
.level + .level { margin-left: -3px; }
.level:first-child { border-radius: var(--radius-button) 0 0 var(--radius-button); }
.level:last-child { border-radius: 0 var(--radius-button) var(--radius-button) 0; }
.level:hover .level-label, .level:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.level[aria-pressed="true"] { background: var(--ink); color: var(--cream); text-decoration: none; }
.level:focus-visible { position: relative; z-index: 1; }

/* The field */
.board {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 2px;
  width: min(100%, calc(var(--cols) * 40px), max(240px, calc(100vh - 250px)));
  margin: 0 auto;
  padding: 2px;
  background: var(--ink);
  border: var(--border);
  border-radius: var(--radius-icon);
  overflow: hidden;
  container-type: inline-size;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font: var(--weight-bold) calc(100cqi / var(--cols) * 0.5)/1 var(--font);
  cursor: var(--cursor);
  -webkit-tap-highlight-color: transparent;
}
.cell svg { width: 74%; height: 74%; pointer-events: none; }

/* Unturned soil: light dither. Hovering darkens it. */
.cell.is-hidden { background-image: var(--dither-light); }
.cell.is-hidden:hover { background-image: var(--dither-medium); }
.cell.is-seeded { background-image: none; }

.cell.is-revealed { cursor: var(--cursor); }
.cell.is-hit { background: var(--ink); }
.cell.is-wrong { position: relative; }
.cell.is-wrong::after {
  content: "";
  position: absolute;
  left: 18%; right: 18%; top: 50%;
  height: 3px;
  background: var(--ink);
  transform: rotate(-45deg);
}

/* Focus: solid cream behind a dashed ring so it reads on every tile */
.cell:focus { outline: none; }
.cell:focus-visible {
  background-image: none;
  outline: 3px dashed var(--ink);
  outline-offset: -6px;
}
.cell.is-hit:focus-visible { outline-color: var(--cream); }

.seed-mode svg { flex: none; }
.seed-mode[aria-pressed="true"] { background: var(--ink); color: var(--cream); }

.seeds-left { margin: 0; font: var(--weight-bold) 15px/1.2 var(--font); }
.status { margin: 0; min-height: 1.6em; font-weight: var(--weight-bold); }
.how-to { margin: 0; font-size: 14px; }