/**
 * Table chip skin for Roulette and Craps — the same chip look as Blackjack and Baccarat
 * (solid denomination face, dashed white edge, thin inner ring; Baccarat palette, $1 blue,
 * $1,000 gold). Loaded after each game's own stylesheet.
 *
 * Covers:
 *   - the chip deck            .cdChip.{blueChip|red|green|black|purpleChip|yellowChip}
 *   - Roulette board chips      .chip.{same colour classes}  (label in .chipSpan)
 *   - Craps table chips         .placed-chip.chip-{1|5|25|100|500|1000}
 *   - floating payout chips     .animated-chip[data-chip-tier]  (set by chip-animation-utils.js)
 *
 * `!important` is deliberate: the floating chips are styled inline by chip-animation-utils.js
 * (white face, grey border) and both games' stylesheets set per-colour borders with !important.
 * Box-shadows stay non-important so the games' win-pulse / selected-chip animations still run.
 */

/* ---- Denomination faces ---- */
.cdChip.blueChip,   .chip.blueChip,   .placed-chip.chip-1,    .animated-chip[data-chip-tier="1"]    { --tcs-face: #3f74c9; --tcs-ink: #fff; }
.cdChip.red,        .chip.red,        .placed-chip.chip-5,    .animated-chip[data-chip-tier="5"]    { --tcs-face: #d9534f; --tcs-ink: #fff; }
.cdChip.green,      .chip.green,      .placed-chip.chip-25,   .animated-chip[data-chip-tier="25"]   { --tcs-face: #5cb85c; --tcs-ink: #fff; }
.cdChip.black,      .chip.black,      .placed-chip.chip-100,  .animated-chip[data-chip-tier="100"]  { --tcs-face: #222;    --tcs-ink: #fff; }
.cdChip.purpleChip, .chip.purpleChip, .placed-chip.chip-500,  .animated-chip[data-chip-tier="500"]  { --tcs-face: #7b3fa0; --tcs-ink: #fff; }
.cdChip.yellowChip, .chip.yellowChip, .placed-chip.chip-1000, .animated-chip[data-chip-tier="1000"] { --tcs-face: #e0a82e; --tcs-ink: #2b1d00; }

/* ---- Face, edge, label ---- */
.cdChip:is(.blueChip, .red, .green, .black, .purpleChip, .yellowChip),
.chip:is(.blueChip, .red, .green, .black, .purpleChip, .yellowChip),
.placed-chip,
.animated-chip[data-chip-tier] {
    background: var(--tcs-face, #3f74c9) !important;
    color: var(--tcs-ink, #fff) !important;
    border-style: dashed !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    white-space: nowrap;
    line-height: 1;
    isolation: isolate; /* keeps the ::before ring behind the label */
}
:is(.cdChip, .chip).yellowChip,
.placed-chip.chip-1000,
.animated-chip[data-chip-tier="1000"] {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Edge width by chip size (border-box, so outer sizes don't change). */
.cdChip:is(.blueChip, .red, .green, .black, .purpleChip, .yellowChip) {
    border-width: 3px !important;
    position: relative;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.45);
}
.chip:is(.blueChip, .red, .green, .black, .purpleChip, .yellowChip),
.placed-chip {
    border-width: 2px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
}
.animated-chip[data-chip-tier] {
    border-width: 3px !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5) !important;
}

/* Inner ring. */
.cdChip:is(.blueChip, .red, .green, .black, .purpleChip, .yellowChip)::before,
.chip:is(.blueChip, .red, .green, .black, .purpleChip, .yellowChip)::before,
.placed-chip::before,
.animated-chip[data-chip-tier]::before {
    content: '';
    position: absolute;
    inset: 11%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    pointer-events: none;
    z-index: -1;
}
.chip:is(.blueChip, .red, .green, .black, .purpleChip, .yellowChip)::before,
.placed-chip::before {
    border-width: 1px;
}

/* Selected denomination: solid gold edge, like the Baccarat chip deck. */
.cdChip.cdChipActive:is(.blueChip, .red, .green, .black, .purpleChip, .yellowChip) {
    border-style: solid !important;
    border-color: #ffd54a !important;
}

/* Labels centred on the face. */
.cdChip:is(.blueChip, .red, .green, .black, .purpleChip, .yellowChip) .cdChipSpan {
    position: absolute;
    left: 50%;
    top: 50%;
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
    line-height: 1;
    color: inherit !important;
    transform: translate(-50%, -50%);
}
.cdChip.yellowChip .cdChipSpan {
    transform: translate(-50%, -50%) scale(0.85);
    letter-spacing: -0.5px;
}
/* Roulette board chips: centre the .chipSpan label (it was nudged down for the 5px border). */
.chip:is(.blueChip, .red, .green, .black, .purpleChip, .yellowChip) {
    display: flex;
    align-items: center;
    justify-content: center;
}
.chip:is(.blueChip, .red, .green, .black, .purpleChip, .yellowChip) .chipSpan {
    top: 0;
    color: inherit !important;
    line-height: 1;
}
.chip.yellowChip .chipSpan { letter-spacing: -0.3px; }
.animated-chip[data-chip-tier="1000"] { letter-spacing: -0.3px; }