/* ==========================================================================
   Blackjack Salon — shared foundation
   Fonts, colour tokens, cards, chips and form controls used by both the
   game (style.css) and the guide pages (site.css).
   ========================================================================== */

@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-semi-condensed-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-semi-condensed-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-semi-condensed-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cinzel-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/cinzel-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/cinzel-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #12100d;
  --bg-2: #1a1713;
  --panel: #1d1a16;
  --panel-2: #26221c;
  --line: rgba(240, 226, 200, .09);
  --line-2: rgba(240, 226, 200, .17);
  --ink: #efe8da;
  --muted: #a69d8e;
  --dim: #766e62;
  --brass: #c9a45c;
  --brass-hi: #e3c88f;
  --brass-lo: #8f7037;
  --win: #6cbf86;
  --loss: #d9685c;
  --felt: #136b43;
  --felt-hi: #1d8453;
  --felt-lo: #0a3f27;
  --back: #9e2232;
  --back-2: #6a1120;
  --display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --ui: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --cond: 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;
}

body.felt-emerald  { --felt: #136b43; --felt-hi: #1d8453; --felt-lo: #0a3f27; }
body.felt-royal    { --felt: #17508e; --felt-hi: #2264ab; --felt-lo: #0b2b52; }
body.felt-crimson  { --felt: #7c1d28; --felt-hi: #962835; --felt-lo: #440d15; }
body.felt-violet   { --felt: #4a2b7b; --felt-hi: #5e3996; --felt-lo: #25143f; }
body.felt-graphite { --felt: #2b3238; --felt-hi: #39424a; --felt-lo: #15191d; }

body.back-crimson { --back: #9e2232; --back-2: #6a1120; }
body.back-navy    { --back: #1f3f7d; --back-2: #102449; }
body.back-onyx    { --back: #2a2a2e; --back-2: #121214; }
body.back-jade    { --back: #0f6b49; --back-2: #073d29; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 2px; }

/* ---------------------------------------------------------------- Cards */

.hand {
  --base: 84px;
  --s: 1;
  --cw: calc(var(--base) * var(--s));
  --fan: calc(var(--base) * .38 * var(--s));
  position: relative;
  flex: none;
  width: var(--cw);
  height: calc(var(--cw) * 1.4);
  font-size: calc(var(--base) * .19 * var(--s));
  transition: width .3s ease, opacity .3s;
}
.hand .cards { position: absolute; inset: 0; z-index: 0; }

.card {
  position: absolute;
  top: 0;
  width: var(--cw);
  height: calc(var(--cw) * 1.4);
  perspective: 900px;
  will-change: transform;
}
.card-inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .36s cubic-bezier(.3, .7, .3, 1);
}
.card.down .card-inner { transform: rotateY(180deg); }
/* doubled-down card is dealt sideways */
.card.sideways { rotate: 90deg; translate: calc(var(--cw) * .22) calc(var(--cw) * .1); }
.card-face {
  position: absolute; inset: 0;
  border-radius: .42em;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.card-face.front {
  background: #fbf8f1;
  box-shadow: 0 .12em .4em rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(60, 40, 20, .14);
  color: #1b1a18;
}
.card-face.front.red { color: #be2231; }
.card-face.back {
  transform: rotateY(180deg);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px .42em),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px .42em),
    linear-gradient(var(--back), var(--back-2));
  border: .28em solid #f6f1e6;
  box-shadow: 0 .12em .4em rgba(0, 0, 0, .4), inset 0 0 0 .1em rgba(255, 255, 255, .2);
}
.card-face.back::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 1.4em; height: 1.4em;
  transform: translate(-50%, -50%) rotate(45deg);
  border: .1em solid rgba(240, 214, 150, .7);
}
.idx {
  position: absolute;
  display: flex; flex-direction: column; align-items: center;
  line-height: .88;
  width: 1.7em;
  font-family: var(--cond);
}
.idx b { font-weight: 700; font-size: 1.82em; letter-spacing: -.07em; }
.idx i { font-style: normal; font-size: 1.28em; margin-top: 0; font-family: var(--ui); }
.idx.tl { left: .12em; top: .22em; }
.idx.br { right: .12em; bottom: .22em; transform: rotate(180deg); }
.pip {
  position: absolute; left: 50%; top: 52%;
  transform: translate(-50%, -50%);
  font-size: 2.8em;
  line-height: 1;
}
.pip.ace { font-size: 3.5em; }
.face-art {
  position: absolute;
  left: 1.25em; right: 1.25em; top: 1.15em; bottom: 1.15em;
  border: 1px solid currentColor;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(201, 164, 92, .12);
}
.face-art span { font: 600 2.1em/1 var(--display); }
.face-art i { font-style: normal; font-size: 1.1em; margin-top: .15em; }

/* ---------------------------------------------------------------- Chips */

.chip {
  --d: 58px;
  --body: #a4232c; --edge: #f1e9da; --ink: #fff; --trim: #d8d2c6;
  width: var(--d); height: var(--d);
  border-radius: 50%;
  position: relative;
  flex: none;
  /* eight inlays on the rim; the centre field (::before) covers the rest */
  background: repeating-conic-gradient(from -9deg, var(--edge) 0 18deg, transparent 18deg 45deg), var(--body);
  box-shadow:
    inset 0 0 0 calc(var(--d) * .018) rgba(0, 0, 0, .35),
    inset 0 calc(var(--d) * .03) calc(var(--d) * .04) rgba(255, 255, 255, .2),
    inset 0 calc(var(--d) * -.04) calc(var(--d) * .06) rgba(0, 0, 0, .35),
    0 2px 4px rgba(0, 0, 0, .45);
}
.chip::before {
  content: '';
  position: absolute; inset: 14%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, rgba(255, 255, 255, .045) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 38% 30%, color-mix(in srgb, var(--body) 80%, #fff), var(--body) 72%);
  box-shadow:
    0 0 0 calc(var(--d) * .022) var(--trim),
    0 0 0 calc(var(--d) * .036) rgba(0, 0, 0, .28),
    inset 0 0 0 calc(var(--d) * .055) var(--body),
    inset 0 0 0 calc(var(--d) * .066) color-mix(in srgb, var(--trim) 60%, transparent);
}
.chip span {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding-top: calc(var(--d) * .02);
  font: 600 calc(var(--d) * .25)/1 var(--display);
  letter-spacing: -.02em;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .22);
}
.chip span.long { font-size: calc(var(--d) * .19); }

.c-1       { --body: #e9e2d2; --edge: #2a4a7f; --ink: #22304f; --trim: #b5ae9f; }
.c-5       { --body: #a4232c; --edge: #f1e9da; --trim: #d8d2c6; }
.c-25      { --body: #1f6a45; --edge: #f1e9da; --trim: #d8d2c6; }
.c-100     { --body: #1e1d20; --edge: #ece6da; --trim: #cfc9bd; }
.c-500     { --body: #55297c; --edge: #e9d6a6; --trim: #d4b46c; }
.c-1000    { --body: #d39b25; --edge: #1d1a16; --ink: #2a1d05; --trim: #f5e6b8; }
.c-5000    { --body: #7a4a2b; --edge: #efe0c4; --trim: #d4b46c; }
.c-25000   { --body: #136d78; --edge: #f2e7cc; --trim: #d4b46c; }
.c-100000  { --body: #24408a; --edge: #e9d6a6; --trim: #d4b46c; }
.c-500000  { --body: #8f1d4a; --edge: #f0dca6; --trim: #d4b46c; }
.c-1000000 { --body: #c3983f; --edge: #17140f; --ink: #241803; --trim: #5a4316; }
.c-1000000::before {
  background:
    repeating-radial-gradient(circle, rgba(255, 255, 255, .07) 0 1px, transparent 1px 3px),
    conic-gradient(from 30deg, #efd796, #bf9234, #f3dfa6, #b0852d, #efd796);
}

/* ---------------------------------------------------------------- Buttons & controls */

.btn {
  height: 42px;
  padding: 0 18px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  font: 600 15px/1 var(--cond);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s, border-color .15s, opacity .2s;
  white-space: nowrap;
  touch-action: manipulation;
}
.btn:hover:not(:disabled) { background: #302a23; border-color: rgba(240, 226, 200, .28); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .35; }
.btn.gold {
  background: var(--brass);
  border-color: var(--brass);
  border-bottom-color: var(--brass-lo);
  color: #1e1606;
}
.btn.gold:hover:not(:disabled) { background: var(--brass-hi); border-color: var(--brass-hi); }
.btn.ghost { background: transparent; }

.seg {
  display: flex; flex: none;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  overflow: hidden;
}
.seg button {
  border: 0;
  border-left: 1px solid var(--line);
  background: none;
  padding: 7px 11px;
  font: 600 14px/1 var(--cond);
  letter-spacing: .02em;
  color: var(--muted);
  white-space: nowrap;
}
.seg button:first-child { border-left: 0; }
.seg button:hover { color: var(--ink); background: rgba(255, 255, 255, .03); }
.seg button.active { background: var(--brass); color: #1e1606; }
.switch {
  position: relative; flex: none;
  width: 42px; height: 24px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: #2a2620;
  transition: background .2s, border-color .2s;
}
.switch::after {
  content: '';
  position: absolute; left: 2px; top: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #d8d0c2;
  transition: transform .2s, background .2s;
}
.switch.on { background: var(--brass-lo); border-color: var(--brass); }
.switch.on::after { transform: translateX(18px); background: #fff6e2; }
.select {
  flex: none;
  height: 34px;
  padding: 0 30px 0 11px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  background: #17140f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a69d8e' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 11px center;
  color: var(--ink);
  font: 600 14px var(--cond);
  appearance: none;
}
kbd {
  display: inline-block;
  min-width: 22px;
  padding: 3px 6px;
  border-radius: 4px;
  background: #17140f;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  font: 600 12px/1 var(--cond);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}