/* iki chess board: shared by the web app and the Mac app's Chess tab. Uses the page's colors where it has them. */
.ikichess {
  --sq-light: #ece6f7;
  --sq-dark: #a690d4;
  --sq-last: rgba(255, 214, 64, 0.55);
  --sq-pick: rgba(255, 214, 64, 0.85);
  --sq-pending: rgba(120, 200, 120, 0.7);
  --dot: rgba(40, 20, 70, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px;
  color: var(--text, #1d1b22);
  font: 15px/1.35 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  -webkit-user-select: none;
  user-select: none;
}
@media (prefers-color-scheme: dark) {
  .ikichess { --sq-light: #c9bde3; --sq-dark: #7a63ad; }
}
.ikichess p { margin: 0; text-align: center; }
.ikichess-status { font-weight: 600; min-height: 1.35em; }
.ikichess-status.yours { color: var(--accent, #8b5cf6); }
.ikichess-wrap { position: relative; width: min(100%, 440px); }
.ikichess-board {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}
.ikichess-sq {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--sq-light);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ikichess-sq.dark { background: var(--sq-dark); }
.ikichess-sq.last { box-shadow: inset 0 0 0 100cqw var(--sq-last); }
.ikichess-sq.selected { box-shadow: inset 0 0 0 100cqw var(--sq-pick); }
.ikichess-sq.pending { box-shadow: inset 0 0 0 100cqw var(--sq-pending); }
.ikichess-sq.check { background-image: radial-gradient(circle, rgba(230, 40, 40, 0.9) 0%, rgba(230, 40, 40, 0.45) 45%, transparent 72%); }
.ikichess-sq.target::after {
  content: "";
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: var(--dot);
  position: absolute;
}
.ikichess-sq.capture::after {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  border: 0.9cqw solid var(--dot);
}
.ikichess-sq i {
  position: absolute;
  font: 600 2.2cqw/1 -apple-system, sans-serif;
  font-style: normal;
  opacity: 0.6;
  color: #2a1d45;
}
.ikichess-sq i.ikichess-rank { top: 0.5cqw; left: 0.7cqw; }
.ikichess-sq i.ikichess-file { bottom: 0.4cqw; right: 0.8cqw; }
.ikichess-piece {
  position: relative;
  z-index: 1;
  font-family: "Apple Symbols", "Segoe UI Symbol", "DejaVu Sans", serif;
  font-size: 9.6cqw;
  line-height: 1;
  pointer-events: none;
}
.ikichess-piece.w { color: #ffffff; -webkit-text-stroke: 0.28cqw #1e1830; paint-order: stroke fill; text-shadow: 0 0.3cqw 0.4cqw rgba(0, 0, 0, 0.25); }
.ikichess-piece.b { color: #1e1830; text-shadow: 0 0.2cqw 0.4cqw rgba(255, 255, 255, 0.25); }
.ikichess-promo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  background: rgba(20, 14, 34, 0.72);
  color: #fff;
  z-index: 2;
}
.ikichess-promo[hidden] { display: none; }
.ikichess-promo div { display: flex; gap: 8px; }
.ikichess-promo div button {
  container-type: inline-size;
  width: 60px;
  height: 60px;
  border: 0;
  border-radius: 10px;
  background: var(--sq-light);
  cursor: pointer;
}
.ikichess-promo .ikichess-piece { font-size: 70cqw; }
.ikichess-link { background: none; border: 0; color: #fff; text-decoration: underline; cursor: pointer; font: inherit; }
.ikichess-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ikichess-actions button {
  font: inherit;
  font-size: 14px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line, #d9d3e6);
  background: var(--panel, #fff);
  color: var(--text, #1d1b22);
  cursor: pointer;
}
.ikichess-actions button.primary { background: var(--accent, #8b5cf6); border-color: transparent; color: #fff; font-weight: 600; }
.ikichess-actions button.danger { color: var(--red, #d93a3a); }
.ikichess-actions button:disabled { opacity: 0.5; }
.ikichess-score { font-size: 13px; color: var(--muted, #77727f); }
.ikichess-moves {
  display: flex;
  gap: 12px;
  max-width: min(100%, 440px);
  margin: 0;
  padding: 0 0 4px;
  overflow-x: auto;
  font-size: 13px;
  color: var(--muted, #77727f);
  list-style-position: inside;
  white-space: nowrap;
}
.ikichess-moves[hidden] { display: none; }
.ikichess-moves li { flex: none; }
.ikichess-moves button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 1px 4px;
  cursor: pointer;
}
.ikichess-moves button.on { background: var(--accent, #8b5cf6); color: #fff; }
.ikichess-nav { display: flex; align-items: center; gap: 6px; }
.ikichess-nav[hidden] { display: none; }
.ikichess-nav button {
  font: inherit;
  font-size: 16px;
  min-width: 38px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--line, #d9d3e6);
  background: var(--panel, #fff);
  color: var(--text, #1d1b22);
  cursor: pointer;
}
.ikichess-nav button:disabled { opacity: 0.35; cursor: default; }
.ikichess-navlabel { min-width: 70px; text-align: center; font-size: 13px; color: var(--muted, #77727f); font-variant-numeric: tabular-nums; }
.ikichess-nav.looking .ikichess-navlabel { color: var(--accent, #8b5cf6); font-weight: 600; }
/* Looking back at an earlier move: dim the board a little so it's clear this isn't the game now. */
.ikichess-wrap:has(+ .ikichess-nav.looking) .ikichess-board { filter: saturate(0.6); }