/* Chowka-Bhara — high contrast.
 *
 * Loaded last, and every rule is behind .hc, so the ordinary look is untouched
 * when it is off.
 *
 * The approach keeps the artwork rather than throwing it away. A translucent
 * scrim sits over each square, between the painted texture and the pieces: the
 * board recedes, the pieces do not dim, and the photographs are still visible
 * underneath. Measured against the scrimmed board, every piece clears 4.5:1,
 * where 3:1 is the minimum for a shape.
 */

/* ---------------------------------------------------------------- palette */
.hc {
  --p-madder:   #ff6b4a;   /* 5.6:1 against the darkest ring */
  --p-indigo:   #5cb3ff;   /* 7.0:1 */
  --p-turmeric: #ffd84d;   /* 11.4:1 */
  --p-areca:    #55e08a;   /* 9.3:1 */

  --khaki-text: #ffffff;
  --khaki-text-dim: #dfe6f2;
  --ink-text: #14100b;
  --mat: #efe3c8;
  --mat-edge: #6b5a38;
  --home-ring: #ffcf4a;
  --shell-mouth: #2a1109;
}

/* ------------------------------------------------------------------ board */

/* The scrim. Between the texture and everything that matters, so the board
   quietens down without taking the pieces with it. */
.hc .cell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(3, 7, 18, 0.45);
  pointer-events: none;
}
.hc .cell.center-cell::after { background: rgba(3, 7, 18, 0.15); }

/* Order matters: scrim underneath, marker above it, pieces above everything. */
.hc .cell.safe-cell::before { z-index: 1; }
/* Already the brightest thing on the board; here it goes thicker and fully
   opaque, since this mode exists for people who need the edge to be plain. */
.hc .safe-ring { border-width: 2px; border-color: #ffffff; }
.hc .pieces { position: relative; z-index: 2; }

/* Squares need visible edges of their own, not just a change of shade. */
.hc .cell {
  outline: 1px solid rgba(255, 255, 255, 0.22);
  outline-offset: -1px;
}
.hc .cell.player-start { outline: 2px solid var(--seat-colour, #fff); outline-offset: -2px; }
.hc .cell.center-cell { outline: 3px solid var(--home-ring); outline-offset: -3px; }

.hc .cell.safe-cell::before { width: 58%; height: 58%; }

/* ----------------------------------------------------------------- pieces */

/* A dark ring then a light one. Between them a piece separates from whatever
   is behind it, whether that is a dark square or the bright centre. */
.hc .token {
  position: relative;
  box-shadow:
    0 0 0 2px #04070f,
    0 0 0 4px rgba(255, 255, 255, 0.92),
    0 2px 5px rgba(0, 0, 0, 0.6);
}


/* A playable piece has to be unmistakable, not merely a little brighter. */
.hc .token.legal {
  box-shadow:
    0 0 0 3px #04070f,
    0 0 0 6px #ffffff,
    0 0 14px 4px rgba(255, 255, 255, 0.55);
}

/* ---------------------------------------------------------------- sidebar */
.hc .mat-panel { background-blend-mode: normal; background-image: none; }

.hc .turn-banner { font-size: 1.45rem; font-weight: 700; }
.hc .status-line { color: #3d3018; font-size: 0.9rem; font-weight: 600; }
.hc .roster-row { border-width: 2px; border-color: #7a6740; }
.hc .roster-row.active-player { border-color: #14100b; box-shadow: 0 0 0 3px rgba(20,16,11,0.4); }
.hc .roster-name { font-weight: 700; }
.hc .count-badge { color: #3d3018; font-weight: 600; }

.hc .pool-chip { border-width: 2px; font-weight: 700; }
.hc .pool-chip.selected { box-shadow: 0 0 0 4px #14100b, 0 0 0 7px var(--home-ring); }
.hc .pool-label { opacity: 1; color: #3d3018; font-weight: 700; }

.hc #roll-btn,
.hc .begin-btn { border-width: 2px; font-weight: 700; }

/* The dot beside each name needs an edge of its own on a pale panel. */
.hc .dot { width: 14px; height: 14px; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.55); }

/* --------------------------------------------------------------- controls */
.hc .segmented label { border-width: 2px; font-weight: 600; }
.hc .new-game-btn { border-width: 2px; font-weight: 700; background: rgba(255,255,255,0.6); }
.hc .history-bar { border-width: 2px; }
.hc .history-step { border-width: 2px; font-weight: 700; }
.hc .seat-edit-name { border-width: 2px; background: rgba(255,255,255,0.7); }
.hc .swatch { border-width: 3px; }

/* Dimming is how an unavailable option reads, but 0.38 is below what this mode
   exists to guarantee. Here it leans on the dashed border and a lighter fade. */
.hc .segmented input:disabled + label { opacity: 0.62; border-style: dashed; }
.hc .setup-tabs { border-width: 2px; }
.hc .setup-tab { color: #3d3018; font-weight: 700; }
.hc .setup-tab.on { background: #14100b; color: #ffffff; }
.hc .setup-note { color: #3d3018; border-left-width: 3px; }
.hc .segmented input:checked + label { box-shadow: 0 0 0 3px rgba(20,16,11,0.35); }
.hc :focus-visible { outline: 3px solid #14100b; outline-offset: 3px; }

.hc .seat-row { border-width: 2px; }
.hc .lobby-status { color: #3d3018; font-weight: 600; }
.hc .lobby-hint {
  border-width: 2px;
  background: rgba(255,255,255,0.75);
  color: #3d3018;
  font-weight: 600;
}
.hc .code-hint, .hc .lobby-diag { color: #4a3c22; }

/* The cowries sit on the light panel, so they need a dark edge rather than a
   light one. */
.hc .shell { filter: drop-shadow(0 0 1.5px rgba(0,0,0,0.85)) drop-shadow(0 3px 4px rgba(0,0,0,0.5)); }

.hc .notice { border-width: 2px; font-weight: 600; }