/* --- the grid --- */
/* The row labels sit left of the 3x3, so centring the whole block would put the middle square
   right of centre. Shift it left by half a label column (plus the gap), but only as far as the
   spare margin allows: on phones the grid fills the width and stays put. */
.doku {
  --lab: clamp(64px, 18vw, 108px);
  --gap: 6px;
  display: grid;
  grid-template-columns: var(--lab) repeat(3, 1fr);
  gap: var(--gap);
  max-width: 520px;
  margin: 20px auto 0;
  translate: calc(-1 * min((var(--lab) + var(--gap)) / 2, max(0px, (100vw - 552px) / 2))) 0;
}

.corner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; text-align: center;
}
.corner b { font-family: var(--display); font-size: 40px; line-height: 1; color: var(--text); letter-spacing: 0; }

.cat {
  display: flex; align-items: center; justify-content: center;
  padding: 6px 4px;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(14px, 3.8vw, 18px); line-height: 1.05;
  letter-spacing: 0.02em; text-transform: uppercase; text-align: center;
}
.cat-col { align-items: flex-end; }
.cat .tip-host { display: inline; cursor: help; border-bottom: 1px dotted var(--muted); }
/* category descriptions are sentences, so let them wrap */
.cat .tip-host::after {
  white-space: normal; width: max-content; max-width: 210px;
  font-weight: 500; text-transform: none; letter-spacing: 0; text-align: left;
}
.cat-row .tip-host::after { left: 0; transform: translate(0, 4px); }
.cat-col:nth-child(4) .tip-host::after { left: auto; right: 0; transform: translate(0, 4px); }
.cat-col:nth-child(4) .tip-host:is(:hover, :focus, .show)::after { transform: none; }
.cat-row .tip-host:is(:hover, :focus, .show)::after { transform: none; }
.cat .tip-host:focus::after { opacity: 1; transform: translate(-50%, 0); }
.cat-row .tip-host:focus::after { transform: none; }

.cell {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: inherit;
}
.cell.open { cursor: pointer; font-size: 30px; color: var(--line); transition: border-color 0.15s, background 0.15s, color 0.15s; }
.cell.open:hover { border-color: var(--accent); background: var(--panel-2); color: var(--accent); }
.cell.filled {
  background: linear-gradient(160deg, #24384f, #172636);
  border-color: color-mix(in srgb, var(--win) 55%, var(--line));
}
.cell.filled img { width: 58%; aspect-ratio: 1; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5)); }
.cell-name {
  max-width: 100%;
  font-family: var(--display); font-weight: 700; font-size: clamp(12px, 3.2vw, 15px);
  text-transform: uppercase; letter-spacing: 0.03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cell-pct {
  position: absolute; top: 5px; right: 6px;
  font-size: 11px; font-weight: 700; color: var(--steel);
  font-variant-numeric: tabular-nums;
}
.cell.missed {
  background: repeating-linear-gradient(135deg, var(--panel) 0 8px, #111b27 8px 16px);
}
.cell.pop { animation: pop 0.35s ease-out; }
.cell.shake { animation: shake 0.4s ease; border-color: var(--loss); }
@keyframes shake {
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

.doku-actions { text-align: center; margin-top: 18px; }
.doku-actions .hint { color: var(--muted); font-size: 13px; margin: 0 0 12px; }

/* --- summary --- */
#summary .results { margin-top: 26px; }
.rarity { margin: -10px 0 20px; color: var(--muted); }
.rarity b { color: var(--text); font-family: var(--display); font-size: 24px; margin: 0 2px; }
.rarity .tip-host { cursor: help; }
.rarity .tip-host::after { white-space: normal; width: 220px; }

.tabs { display: inline-flex; gap: 4px; padding: 3px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 999px; }
.tabs button {
  padding: 6px 12px; border: 0; border-radius: 999px; background: none;
  color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer;
}
.tabs button[aria-selected="true"] { background: var(--text); color: var(--bg); }

.sq-grid { display: grid; grid-template-columns: 56px repeat(3, 1fr); gap: 5px; }
.sq-row { grid-column: span 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.sq-cat {
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--display); font-weight: 700; font-size: 12px; line-height: 1.05;
  text-transform: uppercase; color: var(--muted);
}
.sq {
  display: flex; flex-direction: column; justify-content: space-between; gap: 4px;
  min-height: 84px; padding: 6px 4px 5px;
  border-radius: 10px; background: var(--panel-2);
}
.sq ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.sq li { display: flex; flex-direction: column; align-items: center; border-radius: 8px; padding: 1px; }
.sq li img { width: 30px; height: 30px; display: block; }
.sq ul.all li img { width: 24px; height: 24px; }
.sq li.mine { box-shadow: 0 0 0 2px var(--accent); }
.sq li.none { font-size: 11px; color: var(--muted); padding: 8px 0; }
.chip-pct { font-size: 10px; font-weight: 700; color: var(--steel); font-variant-numeric: tabular-nums; }
.sq-solved { font-size: 10px; color: var(--muted); }
.lg.mine { box-shadow: 0 0 0 2px var(--accent); background: none; }

@media (max-width: 420px) {
  .sq-grid { grid-template-columns: 40px repeat(3, 1fr); }
  .sq li img { width: 26px; height: 26px; }
}

/* LAN-only reveal */
.reveal-list { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 2px; }
.reveal-list img { width: clamp(16px, 4.6vw, 24px); height: auto; opacity: 0.85; }
.dev-reveal .cell.open { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
#picker-list li em.fits { color: var(--win); font-weight: 700; }

/* --- fit to the window: the grid shrinks to the height that's left (cqh = % of the play area) --- */
body.fit .doku { margin-top: clamp(4px, 1.4cqh, 20px); max-width: min(520px, calc(100cqh + var(--lab) - 150px)); }
body.fit .doku-actions { margin-top: clamp(8px, 1.6cqh, 18px); }
body.fit .doku-actions .hint { margin-bottom: clamp(6px, 1.2cqh, 12px); }