/* Chowka-Bhara — The board, its squares and the pieces on them. */

  /* ============================= GAME SCREEN LAYOUT ============================= */
  #game-screen .mat-panel { display:grid; grid-template-columns: minmax(0,1fr) 300px; gap: 26px; align-items:start; }
  @media (max-width: 820px) {
    #game-screen .mat-panel { grid-template-columns: 1fr; }
  }

  .board-col { min-width:0; }
  .board-wrap { max-width: 620px; margin: 0 auto; }

  .turn-banner-mobile { display:none; }

  #board {
    /* The board turns so the viewer's own start square is nearest them.
       Everything inside that reads as text or has a "up" is counter-rotated. */
    transform: rotate(var(--board-rot, 0deg));
    transition: transform .35s ease;
    display:grid;
    aspect-ratio: 1;
    width: 100%;
    gap: 2px;
    background: var(--ink-2);
    border-radius: 8px;
    padding: 6px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35), 0 10px 24px -10px rgba(0,0,0,0.5);
  }

  .cell {
    position: relative;
    border-radius: 3px;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0; min-height:0;
  }
  /* The painted board under everything. The colour stays as the ground so the
     rings still read if the texture is slow or missing. */
  .cell {
    background-image: url("../img/board-tile.jpg");
    background-size: 180% 180%;
    background-blend-mode: multiply;
  }
  .cell.layer-0 { background-color: var(--ink-0); }
  .cell.layer-1 { background-color: var(--ink-1); }
  .cell.layer-2 { background-color: var(--ink-2); }
  .cell.layer-3 { background-color: var(--ink-2); }
  /* Offsetting each ring stops the tile repeating in a visible grid. */
  .cell.layer-1 { background-position: 30% 60%; }
  .cell.layer-2 { background-position: 70% 20%; }
  .cell.layer-3 { background-position: 15% 85%; }

  /* Every safe square is the same diamond. The four player starts get theirs
     in that player's colour, set inline as --seat-colour. */
  /* The drawn diamond, masked so it takes the seat's colour rather than
     shipping four tinted copies of the same picture. */
  .cell.safe-cell::before {
    content:"";
    position:absolute;
    width: 46%; height:46%;
    background: var(--seat-colour, rgba(243,230,195,0.6));
    -webkit-mask: url("../img/safe-marker.png") center / contain no-repeat;
    mask: url("../img/safe-marker.png") center / contain no-repeat;
  }
  .cell.player-start::before { width: 54%; height: 54%; }

  /* Drawn above the pieces, so a crowded square still says it is safe. Thin
     dark edges either side of the white keep it visible against both the dark
     outer ring and the pale centre, rather than only against one of them.

     1px, to match the diamond it stands in for: that marker's outline measures
     8px of a 256px image, which lands between 1.2 and 1.6px on screen at the
     sizes the board is drawn at. The dark edges are half that again, so the
     whole thing reads as one thin line rather than a band. */
  .safe-ring {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255,255,255,0.95);
    border-radius: 3px;
    box-shadow: 0 0 0 0.5px rgba(0,0,0,0.45), inset 0 0 0 0.5px rgba(0,0,0,0.45);
    z-index: 3;
    pointer-events: none;
  }

  .cell.center-cell {
    background: url("../img/centre-home.jpg") center / cover,
                radial-gradient(circle, var(--home-glow), var(--home-ring) 130%);
    box-shadow: 0 0 0 2px var(--home-ring), 0 0 18px 2px rgba(201,147,47,0.55);
  }
  /* The goal reads as a filled version of the safe-square diamond, rather
     than a word that would need translating and rotating. */
  .cell.center-cell::before {
    content:"";
    position:absolute;
    width: 40%; height:40%;
    background: #3a2a06;
    border: none;
    transform: rotate(45deg);
    pointer-events:none;
  }

  .pieces {
    position: relative;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    align-content:center;
    justify-content:center;
    gap: 0;                 /* pieces on a square sit touching, not spaced */
    width: 92%;
    height: 92%;
  }

  /* Three pieces wrap to two-then-one, which reads as two separate clumps.
     Placed explicitly instead, the odd one nests into the notch between the
     pair and they form a proper triangle. The 0.866 is sin(60 degrees) — the
     vertical spacing of touching circles — and 1.866 is the cluster's total
     height in piece-widths, halved to centre it. */
  /* A pair standing where it could have been captured cannot be — an opponent
     may not land on the square at all. Two pieces sharing a square already look
     like two pieces sharing a square, so the one thing that makes this
     different has to be drawn, or it is invisible. */
  .pieces.immortal {
    border-radius: 999px;
    background: rgba(255, 236, 190, 0.14);
    box-shadow: 0 0 0 2px var(--home-ring), 0 0 12px rgba(0, 0, 0, 0.4);
  }

  .pieces.tri .token { position: absolute; }
  .pieces.tri .token:nth-child(1) {
    left: calc(50% - var(--tok));
    top:  calc(50% - var(--tok) * 0.933);
  }
  .pieces.tri .token:nth-child(2) {
    left: 50%;
    top:  calc(50% - var(--tok) * 0.933);
  }
  .pieces.tri .token:nth-child(3) {
    left: calc(50% - var(--tok) * 0.5);
    top:  calc(50% - var(--tok) * 0.067);
  }
  .token {
    /* Sized by updateCellDensity so every piece on a square stays visible
       instead of stacking over its neighbours. */
    width: var(--tok, 62%);
    height: var(--tok, 62%);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.25);
    flex: 0 0 auto;
    transition: transform .15s ease;
  }
  .token[role="button"] { cursor:pointer; }
  /* Photographed pieces. The flat colour stays underneath as the fallback, so
     a missing image degrades to the old look rather than to nothing. */
  .token-p-madder   { background-color: var(--p-madder);   background-image: url("../img/token-red.png"); }
  .token-p-indigo   { background-color: var(--p-indigo);   background-image: url("../img/token-blue.png"); }
  .token-p-turmeric { background-color: var(--p-turmeric); background-image: url("../img/token-yellow.png"); }
  .token-p-areca    { background-color: var(--p-areca);    background-image: url("../img/token-green.png"); }
  .token[class*="token-p-"] {
    background-size: 114%;
    background-position: center;
    background-repeat: no-repeat;
    /* The photograph carries its own shading, so drop the drawn one. */
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  }

  .token.legal {
    animation: pulse-legal 1.1s ease-in-out infinite;
    box-shadow: 0 0 0 3px rgba(243,230,195,0.9), 0 1px 3px rgba(0,0,0,0.55);
  }
  @keyframes pulse-legal {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.16); }
  }
  .token.pop-in { animation: pop-in .4s ease; }
  @keyframes pop-in {
    0% { transform: scale(0.2); opacity:0.3; }
    60% { transform: scale(1.25); }
    100% { transform: scale(1); opacity:1; }
  }

  /* trays inside board area are for board cells; hand/finished trays live in sidebar */
  .tray { display:flex; flex-wrap:wrap; gap:6px; min-height: 30px; align-items:center; }
  .tray .token { position:static; }

/* A brief notice across the top of the board, for things that happen on
   somebody else's turn. */
.notice {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translate(-50%, -12px);
  z-index: 80;
  max-width: min(460px, calc(100vw - 28px));
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--ink-0);
  color: var(--khaki-text);
  border: 1px solid var(--home-ring);
  box-shadow: 0 14px 34px -14px rgba(0,0,0,0.8);
  font-size: 0.9rem;
  text-align: center;
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
}
.notice.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .notice { transition: none; } }

.tie-btn.voted {
  border-style: solid;
  border-color: var(--home-ring);
  background: rgba(201,147,47,0.18);
  font-weight: 600;
}

/* A notice set to wait rather than fade says so. */
.notice.dismissable { cursor: pointer; }
.notice.dismissable::after {
  content: " ×";
  opacity: .6;
  font-weight: 700;
}