/* Chowka-Bhara — the accessibility panel, and what its settings do. */

/* ------------------------------------------------------------ the panel */
/* Solid and filled. A dashed outline over nothing reads as a placeholder — a
   box waiting to be filled in — which is the opposite of what a control that
   people need to find should look like. */
.a11y-btn {
  display: block;
  width: 100%;
  padding: 11px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.34);
  border: 1.5px solid var(--mat-edge);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-text);
}
.a11y-btn:hover { background: rgba(255,255,255,0.62); }

/* Below the log on the game screen and at the foot of setup, so the settings
   are reachable from either without floating over the board. */
.a11y-btn + .sidebar-foot { margin-top: 4px; }

/* ------------------------------------------------------------- players */

/* A name and four colours to a line. The swatches are the colours themselves
   rather than labelled buttons — the board says the same thing, so a word here
   would be a second name for something already named by sight. */
.seat-edit {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.seat-edit-name {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 11px;
  border: 1.5px solid var(--mat-edge);
  border-radius: 8px;
  background: rgba(255,255,255,0.45);
  color: var(--ink-text);
  font: inherit;
  font-size: 0.92rem;
}
.seat-edit-name::placeholder { opacity: 0.5; }

/* Marks the one row that is yours, when the others belong to people at their
   own screens. */
.seat-edit-you {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5c4a2e;
  padding: 4px 8px;
  border: 1px solid var(--mat-edge);
  border-radius: 999px;
}

.seat-edit-colours { display: flex; gap: 5px; flex: 0 0 auto; }
.swatch {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid var(--mat-edge);
  padding: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}
.swatch.on {
  border-color: var(--ink-text);
  box-shadow: 0 0 0 2px var(--mat), 0 0 0 4px var(--ink-text);
}
.swatch:focus-visible { outline: 2px solid var(--ink-text); outline-offset: 3px; }

.a11y-row { padding: 16px 0; border-bottom: 1px solid rgba(0,0,0,0.12); }
.a11y-row:last-child { border-bottom: none; }
.a11y-head { display: flex; align-items: baseline; gap: 8px; }
.a11y-label { font-weight: 700; font-size: 1rem; }
.a11y-hint { margin: 3px 0 10px; font-size: 0.85rem; opacity: 0.75; line-height: 1.5; }

.a11y-options { display: flex; gap: 7px; flex-wrap: wrap; }
.a11y-opt {
  flex: 1 1 auto;
  min-width: 88px;
  padding: 11px 12px;
  border: 1.5px solid var(--mat-edge);
  border-radius: 8px;
  background: rgba(255,255,255,0.28);
  color: var(--ink-text);
  font-size: 0.9rem;
  font-weight: 600;
}
.a11y-opt:hover { background: rgba(255,255,255,0.5); }
.a11y-opt.on {
  background: var(--ink-0);
  border-color: var(--ink-0);
  color: var(--khaki-text);
}


/* ---------------------------------------------------------- less motion */

/* The game also shortens its own animation timings; this covers everything
   drawn purely in CSS. */
.no-motion *,
.no-motion *::before,
.no-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
.no-motion .shell.flipping { animation: none !important; }
.no-motion #board { transition: none !important; }
.no-motion .token.legal { animation: none !important; }

/* Losing the pulse costs the clearest signal of which piece can move, so it is
   replaced with a static ring rather than simply removed. */
.no-motion .token.legal {
  box-shadow: 0 0 0 3px rgba(243,230,195,0.95), 0 1px 3px rgba(0,0,0,0.55);
}
.no-motion.hc .token.legal {
  box-shadow: 0 0 0 3px #04070f, 0 0 0 6px #ffffff;
}

/* ------------------------------------------------------ larger text room */

/* At the biggest setting the sidebar needs more width, or the readouts wrap
   into an unreadable column. */
@media (min-width: 821px) {
  html[style*="132%"] #game-screen .mat-panel { grid-template-columns: minmax(0,1fr) 340px; }
  html[style*="115%"] #game-screen .mat-panel { grid-template-columns: minmax(0,1fr) 320px; }
}

/* The size options are drawn at the size they select. The ratios match the
   scales in a11y.js, so the buttons are a true preview rather than a caption
   about one. */
.a11y-size-normal  { font-size: 0.9rem; }
.a11y-size-large   { font-size: 1.04rem; }
.a11y-size-largest { font-size: 1.19rem; }
.a11y-options:has(.a11y-size-normal) { align-items: center; }

/* Four languages in four equal cells. Left to flex each button sized itself to
   its own word, so "Español" came out noticeably wider than "ಕನ್ನಡ". Scripts
   also differ in height, so the cells are given a common minimum rather than
   letting the tallest glyph set the row. */
#lang-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}
#lang-group label {
  flex: none;
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  text-align: center;
  line-height: 1.25;
}