/* Chowka-Bhara — Cowries, the throw button, banked throws, roster and log. */

  /* ============================= SIDEBAR ============================= */
  .sidebar { display:flex; flex-direction:column; gap:16px; min-width:0; }

  .turn-banner {
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing:0.02em;
    text-align:center;
  }
  .status-line {
    text-align:center;
    font-size:0.82rem;
    color:#5c4a2e;
    min-height: 1.1em;
    font-family: var(--font-mono);
  }

  .shell-tray {
    display:flex; justify-content:center; padding: 10px 0; perspective: 400px;
    --shell: 44px;
    gap: 10px;
  }
  /* Six have to share the same sidebar four used to, so they come down in size
     rather than wrapping onto a second row — a throw reads as one line. */
  .shell-tray.six { --shell: 34px; gap: 7px; }
  .shell {
    width: var(--shell); height: var(--shell);
    position:relative;
    transform-style: preserve-3d;
    background: url("../img/cowrie-up.png") center / contain no-repeat;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,0.45));
  }
  .shell.down { background-image: url("../img/cowrie-down.png"); }
  .shell.flipping { animation: shell-flip 0.65s ease-in-out; }
  @keyframes shell-flip {
    0% { transform: rotateY(0) rotateX(0); }
    25% { transform: rotateY(200deg) rotateX(40deg) translateY(-10px); }
    50% { transform: rotateY(430deg) rotateX(-30deg) translateY(0); }
    75% { transform: rotateY(610deg) rotateX(20deg) translateY(-6px); }
    100% { transform: rotateY(720deg) rotateX(0); }
  }

  #roll-btn {
    display:block;
    width:100%;
    padding: 13px;
    background: var(--home-ring);
    border: 1.5px solid #8a6420;
    border-radius: 8px;
    color: #2b1e0a;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: 0 3px 0 #8a6420;
    transition: transform .08s ease, box-shadow .08s ease, opacity .15s ease;
  }
  #roll-btn:hover:not(:disabled) { background: var(--accent-hover); }
  #roll-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #8a6420; }
  #roll-btn:disabled { opacity:0.45; cursor:default; box-shadow:none; }

  /* Banked throws. A turn can accumulate several moves before any are spent,
     so they sit here as chips until the player assigns each one to a piece. */
  .pool { padding: 4px 0 2px; }
  .pool-label {
    display:block;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.65;
    margin-bottom: 6px;
    text-align:center;
  }
  .pool-chips { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
  .pool-chip {
    min-width: 40px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1.5px solid #6f4f18;
    background: var(--chip);
    color: var(--khaki-text);
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: transform .08s ease, border-color .12s ease, background .12s ease;
  }
  .pool-chip:hover:not(:disabled) { background: var(--accent); border-color: var(--accent-hover); }
  /* The oldest banked throw is selected for you, so a click spends it without
     being asked. Which one that is has to be unmistakable, or a turn holding
     an 8, a 4 and a 3 spends the 8 while you believe you are spending the 4. */
  .pool-chip.selected {
    background: var(--chip-on);
    border-color: var(--home-glow);
    color: #3a2a03;
    box-shadow: 0 0 0 3px var(--home-ring), 0 0 12px rgba(201,147,47,0.5);
    transform: translateY(-2px);
  }
  .pool-chip:disabled { opacity: 0.32; cursor: default; }
  .pool-chip .chip-sub {
    display:block;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.7;
  }

  .win-standings {
    margin: 10px 0 0;
    font-size: 0.85rem;
    line-height: 1.7;
    opacity: 0.85;
    white-space: pre-line;
  }
  .win-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top: 16px; }

/* The sidebar's bottom corner. "Call it a tie" only appears when play has
   actually stalled, and sits quietly beside New game rather than competing
   with the controls above. */
.sidebar-foot { display:flex; gap:8px; align-items:stretch; }
.sidebar-foot .new-game-btn { flex:1 1 auto; }
.tie-btn {
  flex: 0 0 auto;
  padding: 11px 14px;
  border: 1.5px solid var(--mat-edge);
  border-radius: 8px;
  background: rgba(255,255,255,0.34);
  color: var(--ink-text);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.tie-btn:hover:not(:disabled) { background: rgba(255,255,255,0.62); }
.tie-btn:disabled { opacity: 0.4; cursor: default; }

/* The offer stands all game, so it sits quietly most of the time. When nobody
   can move it is the way out, and it says so rather than waiting to be found
   among the other footer buttons. */
.tie-btn.urged {
  border-color: var(--home-ring);
  background: rgba(255,255,255,0.62);
}

/* The high-contrast toggle sits with the other footer controls. */
#contrast-btn { padding: 11px 13px; font-size: 1rem; line-height: 1; }
#contrast-btn.on {
  border-style: solid;
  border-color: var(--ink-text);
  background: var(--ink-0);
  color: var(--khaki-text);
}