/* ==========================================================================
   Предметы игровых столов: лица карт, фишки, кости, фигуры, поля.
   Контракт для клиентов игр — _notes/items-contract.md. Классы стабильны:
   .pc-card.cf-<css>   .pc-chip.ch-<css>   .pc-die.dc-<css>   .pc-token.tk-<css>   .pc-board.bd-<css>
   Без класса предмета каждый элемент рисуется в виде «по умолчанию».
   ========================================================================== */

/* ---------- игральная карта ---------- */

.pc-card {
  --w: 64px;
  --paper: #fbf9f4;
  --paper-2: var(--paper);
  --red: #c41e3a;
  --black: #15121a;
  --ink: var(--black);
  --edge: rgba(20, 14, 18, 0.28);
  --frame: transparent;
  --face-font: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --pip-filter: none;
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--w);
  aspect-ratio: 5 / 7;
  border-radius: calc(var(--w) * 0.08);
  background: linear-gradient(160deg, var(--paper), var(--paper-2));
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--edge), inset 0 0 0 calc(var(--w) * 0.045) var(--paper), inset 0 0 0 calc(var(--w) * 0.06) var(--frame), 0 2px 6px rgba(0, 0, 0, 0.35);
  font-family: var(--face-font);
  font-weight: 700;
  font-size: calc(var(--w) * 0.24);
  line-height: 1;
  overflow: hidden;
  isolation: isolate;
  user-select: none;
  vertical-align: middle;
}
.pc-card[data-suit="spades"] { --pip: "\2660\FE0E"; }
.pc-card[data-suit="hearts"] { --pip: "\2665\FE0E"; --ink: var(--red); }
.pc-card[data-suit="diamonds"] { --pip: "\2666\FE0E"; --ink: var(--red); }
.pc-card[data-suit="clubs"] { --pip: "\2663\FE0E"; }
.pc-card[data-rank="J"] { --rank-label: "В"; }
.pc-card[data-rank="Q"] { --rank-label: "Д"; }
.pc-card[data-rank="K"] { --rank-label: "К"; }
.pc-card[data-rank="A"] { --rank-label: "Т"; }
.pc-card.is-latin[data-rank="J"] { --rank-label: "J"; }
.pc-card.is-latin[data-rank="Q"] { --rank-label: "Q"; }
.pc-card.is-latin[data-rank="K"] { --rank-label: "K"; }
.pc-card.is-latin[data-rank="A"] { --rank-label: "A"; }

/* уголок: ранг над мастью */
.pc-card::before {
  content: var(--rank-label, attr(data-rank)) "\A" var(--pip, "");
  position: absolute;
  top: 6%;
  left: 7%;
  z-index: 2;
  white-space: pre;
  text-align: center;
  letter-spacing: -0.04em;
  color: var(--ink);
  filter: var(--pip-filter);
}
/* центр: крупная масть; у фигур и туза — рамка */
.pc-card::after {
  content: var(--pip, "");
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding-top: 8%;
  font-size: calc(var(--w) * 0.56);
  color: var(--ink);
  filter: var(--pip-filter);
}
.pc-card:is([data-rank="J"], [data-rank="Q"], [data-rank="K"])::after {
  content: var(--rank-label) var(--pip, "");
  inset: 24% 19% 13% 25%;
  padding: 0;
  font-size: calc(var(--w) * 0.3);
  border: 1px solid color-mix(in srgb, var(--ink) 45%, transparent);
  border-radius: calc(var(--w) * 0.04);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.pc-card[data-rank="A"]::after { font-size: calc(var(--w) * 0.7); }

/* рубашка: клиент кладёт картинку рубашки в --back-img (artPath(cardback) или своя по умолчанию) */
.pc-card.is-back {
  background: var(--back-img, none) center / cover, linear-gradient(160deg, #6e1030, #2a0714);
  box-shadow: inset 0 0 0 1px rgba(217, 183, 122, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);
}
.pc-card.is-back::before, .pc-card.is-back::after { content: none; }

/* ----- лица карт ----- */

.pc-card.cf-classic { --paper: #fdfcf8; --paper-2: #f1eee6; --red: #c8102e; --black: #111; }

.pc-card.cf-ivory { --paper: #f5ead3; --paper-2: #e6d4b0; --red: #a3302a; --black: #4a3322; --edge: rgba(74, 51, 34, 0.4); }

.pc-card.cf-noir { --paper: #1b171f; --paper-2: #0d0b10; --red: #ff6f8a; --black: #f1e7d6; --edge: rgba(217, 183, 122, 0.45); }

.pc-card.cf-fourcolor { --paper: #fdfcf8; --paper-2: #f0ede5; --red: #cf1f3a; --black: #121014; }
.pc-card.cf-fourcolor[data-suit="diamonds"] { --ink: #1f5fd1; }
.pc-card.cf-fourcolor[data-suit="clubs"] { --ink: #17803a; }

.pc-card.cf-deco {
  --paper: #f6eedd;
  --paper-2: #eadcbf;
  --red: #a8182f;
  --black: #1a1512;
  --frame: #b88a3c;
  background:
    repeating-conic-gradient(from 0deg at 50% 58%, rgba(184, 138, 60, 0.09) 0 6deg, transparent 6deg 12deg),
    linear-gradient(160deg, var(--paper), var(--paper-2));
  box-shadow: inset 0 0 0 1px rgba(80, 56, 20, 0.35), inset 0 0 0 calc(var(--w) * 0.04) var(--paper), inset 0 0 0 calc(var(--w) * 0.05) var(--frame), inset 0 0 0 calc(var(--w) * 0.07) var(--paper), inset 0 0 0 calc(var(--w) * 0.078) var(--frame), 0 2px 6px rgba(0, 0, 0, 0.35);
}

.pc-card.cf-salon {
  --paper: #f7e6e4;
  --paper-2: #ebc9c8;
  --red: #9e1636;
  --black: #2b0f17;
  --frame: #c79a4e;
  background:
    radial-gradient(circle at 0 0, #d9b77a 0 9%, transparent 10%),
    radial-gradient(circle at 100% 100%, #d9b77a 0 9%, transparent 10%),
    linear-gradient(160deg, var(--paper), var(--paper-2));
}

.pc-card.cf-gilt {
  --paper: #fbf6ea;
  --paper-2: #efe2c4;
  --frame: #c9a35a;
  --pip-filter: drop-shadow(0 0.5px 0 rgba(90, 60, 10, 0.5));
}
.pc-card.cf-gilt::before, .pc-card.cf-gilt::after {
  background: linear-gradient(160deg, #f7e2b4, #c99a45 45%, #8a6227);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pc-card.cf-gilt:is([data-suit="hearts"], [data-suit="diamonds"])::before,
.pc-card.cf-gilt:is([data-suit="hearts"], [data-suit="diamonds"])::after {
  background-image: linear-gradient(160deg, #ff8b9e, #c41e3a 50%, #7a0f24);
}

.pc-card.cf-lace {
  --paper: #231c22;
  --paper-2: #120e13;
  --red: #ff7d97;
  --black: #efe3cf;
  --edge: rgba(239, 227, 207, 0.4);
  background:
    radial-gradient(circle at 50% 50%, rgba(239, 227, 207, 0.12) 0 18%, transparent 20%) 0 0 / 14% 10%,
    radial-gradient(circle at 50% 50%, transparent 0 40%, rgba(239, 227, 207, 0.07) 42% 48%, transparent 50%) 7% 5% / 14% 10%,
    linear-gradient(160deg, var(--paper), var(--paper-2));
}

.pc-card.cf-mirror {
  --paper: #e9edf2;
  --paper-2: #a9b2bf;
  --red: #b0123a;
  --black: #1d2330;
  --frame: #f4f7fb;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.75) 45%, transparent 60%) -150% 0 / 250% 100% no-repeat,
    linear-gradient(160deg, var(--paper), var(--paper-2));
  animation: pc-sheen 4.5s ease-in-out infinite;
}

.pc-card.cf-ember {
  --paper: #22100c;
  --paper-2: #0d0605;
  --red: #ff5a2a;
  --black: #f2c27a;
  --edge: rgba(255, 90, 42, 0.45);
  --pip-filter: drop-shadow(0 0 3px rgba(255, 90, 42, 0.75));
  background:
    radial-gradient(120% 60% at 50% 110%, rgba(255, 80, 30, 0.35), transparent 60%),
    linear-gradient(160deg, var(--paper), var(--paper-2));
}
.pc-card.cf-ember::after { animation: pc-ember 2.6s ease-in-out infinite; }

.pc-card.cf-sovereign {
  --paper: #15100c;
  --paper-2: #050403;
  --frame: #d9b77a;
  --edge: rgba(241, 217, 166, 0.6);
  box-shadow: inset 0 0 0 1px var(--edge), inset 0 0 0 calc(var(--w) * 0.04) var(--paper), inset 0 0 0 calc(var(--w) * 0.055) var(--frame), inset 0 0 0 calc(var(--w) * 0.075) var(--paper), inset 0 0 0 calc(var(--w) * 0.083) #8a6a33, 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 12px rgba(217, 183, 122, 0.25);
}
.pc-card.cf-sovereign::before, .pc-card.cf-sovereign::after {
  background: linear-gradient(110deg, #8a6227 0%, #f7e2b4 25%, #c99a45 45%, #fff4d6 55%, #9c7438 75%, #f1d9a6 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: pc-gold-flow 5s linear infinite;
}
.pc-card.cf-sovereign:is([data-suit="hearts"], [data-suit="diamonds"])::before,
.pc-card.cf-sovereign:is([data-suit="hearts"], [data-suit="diamonds"])::after {
  background-image: linear-gradient(110deg, #7a0f24 0%, #ff8b9e 25%, #c41e3a 45%, #f7e2b4 55%, #8e1b3a 75%, #e5486b 100%);
}

.pc-card.cf-moon {
  --paper: #18203d;
  --paper-2: #070a18;
  --red: #ffb3c4;
  --black: #e6ecff;
  --edge: rgba(200, 212, 255, 0.5);
  --pip-filter: drop-shadow(0 0 3px rgba(200, 212, 255, 0.6));
  background:
    radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 75% 18%, #fff 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 62% 78%, #dfe6ff 50%, transparent 100%),
    radial-gradient(1px 1px at 30% 85%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 88% 55%, #fff 50%, transparent 100%),
    radial-gradient(60% 40% at 80% 10%, rgba(200, 212, 255, 0.25), transparent 70%),
    linear-gradient(160deg, var(--paper), var(--paper-2));
  animation: pc-twinkle 3.2s ease-in-out infinite;
}

@keyframes pc-sheen { 0%, 35% { background-position: -150% 0, 0 0; } 70%, 100% { background-position: 250% 0, 0 0; } }
@keyframes pc-ember { 50% { filter: drop-shadow(0 0 7px rgba(255, 110, 40, 0.95)); } }
@keyframes pc-gold-flow { to { background-position: 300% 0; } }
@keyframes pc-twinkle { 50% { filter: brightness(1.18) saturate(1.1); } }

/* ---------- фишки ---------- */

.pc-chip {
  --size: 40px;
  --c1: #c8102e;
  --c2: #1d4fa8;
  --c3: #17803a;
  --c4: #15121a;
  --c5: #6b2d8f;
  --base: var(--c1);
  --stripe: #f4efe4;
  --face: color-mix(in srgb, var(--base) 82%, #fff);
  --ring: color-mix(in srgb, var(--stripe) 80%, transparent);
  --label: #fff;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--face) 0 50%, var(--ring) 51% 54%, transparent 55%),
    repeating-conic-gradient(from 12deg, var(--stripe) 0 14deg, var(--base) 14deg 45deg);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 -2px 3px rgba(0, 0, 0, 0.3), 0 2px 3px rgba(0, 0, 0, 0.45);
  color: var(--label);
  font: 800 calc(var(--size) * 0.26) / 1 Manrope, system-ui, sans-serif;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  vertical-align: middle;
  overflow: hidden;
}
.pc-chip::after { content: attr(data-label); position: relative; z-index: 1; }
.pc-chip[data-tier="2"] { --base: var(--c2); }
.pc-chip[data-tier="3"] { --base: var(--c3); }
.pc-chip[data-tier="4"] { --base: var(--c4); }
.pc-chip[data-tier="5"] { --base: var(--c5); }

.pc-chip.ch-clay { --c1: #c8102e; --c2: #1d4fa8; --c3: #17803a; --c4: #1a1a1f; --c5: #6b2d8f; }
.pc-chip.ch-bone { --c1: #efe5d0; --c2: #d8c7a4; --c3: #bfa77a; --c4: #a1865a; --c5: #7d6440; --stripe: #2b2118; --label: #2b2118; text-shadow: none; }
.pc-chip.ch-smoke { --c1: #c9c9cf; --c2: #9a9aa3; --c3: #6e6e78; --c4: #46464f; --c5: #24242a; --stripe: #f2f2f4; }
.pc-chip.ch-wine { --c1: #e98ca0; --c2: #d0506e; --c3: #a8264a; --c4: #7a1232; --c5: #4a0a1f; --stripe: #f7e2b4; }
.pc-chip.ch-brass { --c1: #c9a35a; --c2: #b48a3e; --c3: #9c7438; --c4: #7d5a26; --c5: #5d4118; --stripe: #15121a; }
.pc-chip.ch-brass { background: radial-gradient(circle at 40% 35%, #f7e2b4, var(--base) 50%, transparent 51%), radial-gradient(circle, transparent 0 51%, var(--stripe) 52% 54%, transparent 55%), repeating-conic-gradient(from 12deg, var(--stripe) 0 10deg, var(--base) 10deg 45deg); }
.pc-chip.ch-onyx { --c1: #1d1a20; --c2: #2a1520; --c3: #142026; --c4: #0c0b0e; --c5: #2a2416; --stripe: #d9b77a; --ring: #d9b77a; --label: #f1d9a6; }
.pc-chip.ch-pearl {
  --c1: #f3eef4; --c2: #e7f0f4; --c3: #f4eadf; --c4: #ece4f6; --c5: #f6e6ea; --stripe: #b9a3c9; --label: #5a4a66; text-shadow: none;
  background:
    linear-gradient(130deg, rgba(255, 220, 240, 0.55), rgba(200, 235, 255, 0.55), rgba(255, 245, 210, 0.55)),
    radial-gradient(circle, var(--face) 0 50%, var(--ring) 51% 54%, transparent 55%),
    repeating-conic-gradient(from 12deg, var(--stripe) 0 8deg, var(--base) 8deg 45deg);
  background-blend-mode: soft-light, normal, normal;
}
.pc-chip.ch-ruby {
  --c1: #c41e3a; --c2: #9b0f2c; --c3: #e5486b; --c4: #6e1030; --c5: #ff6f8a; --stripe: #f1d9a6;
  background:
    conic-gradient(from 0deg, rgba(255, 255, 255, 0.25), transparent 15%, rgba(255, 255, 255, 0.2) 30%, transparent 45%, rgba(255, 255, 255, 0.25) 60%, transparent 75%, rgba(255, 255, 255, 0.2) 90%, transparent),
    radial-gradient(circle, var(--face) 0 50%, var(--ring) 51% 54%, transparent 55%),
    repeating-conic-gradient(from 12deg, var(--stripe) 0 14deg, var(--base) 14deg 45deg);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 3px rgba(0, 0, 0, 0.45), 0 0 10px rgba(229, 72, 107, 0.55);
}
.pc-chip.ch-aurora {
  --c1: #2bb5a6; --c2: #6a5cd6; --c3: #3a8fd6; --c4: #9b4fd6; --c5: #1f8f7a; --stripe: #f1d9a6;
  animation: pc-aurora 6s linear infinite;
}
.pc-chip.ch-sovereign {
  --c1: #d9b77a; --c2: #c99a45; --c3: #b48a3e; --c4: #9c7438; --c5: #f1d9a6;
  --stripe: #7a0f24;
  --label: #3b2408;
  text-shadow: 0 1px 0 rgba(255, 244, 214, 0.6);
  background:
    radial-gradient(circle, #c41e3a 0 13%, #7a0f24 14% 16%, transparent 17%),
    radial-gradient(circle at 40% 35%, #fff4d6, var(--base) 50%, transparent 51%),
    radial-gradient(circle, transparent 0 51%, #7a0f24 52% 54%, transparent 55%),
    repeating-conic-gradient(from 12deg, var(--stripe) 0 10deg, var(--base) 10deg 45deg);
  box-shadow: inset 0 0 0 1px rgba(80, 50, 10, 0.6), 0 2px 3px rgba(0, 0, 0, 0.45), 0 0 12px rgba(243, 184, 87, 0.55);
}
.pc-chip.ch-sovereign::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 244, 214, 0.85) 80%, transparent 90%);
  mix-blend-mode: screen;
  animation: pc-spin 3.2s linear infinite;
}
.pc-chip.ch-sovereign::after { content: none; }
.pc-chip.ch-sovereign[data-label]::after { content: attr(data-label); padding: 0 3px; border-radius: 4px; background: rgba(122, 15, 36, 0.85); color: #fff4d6; text-shadow: none; font-size: 0.85em; }

@keyframes pc-aurora { to { filter: hue-rotate(360deg); } }
@keyframes pc-spin { to { transform: rotate(360deg); } }

/* ---------- кости ---------- */

.pc-die {
  --size: 44px;
  --die-tex: none;
  --die-bg: #f3ead8;
  --pip: #1a1418;
  --pip-glow: none;
  --die-edge: rgba(0, 0, 0, 0.3);
  --p: radial-gradient(circle, var(--pip) 0 58%, transparent 64%);
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 18%;
  background: var(--die-tex) center / cover, var(--die-bg);
  box-shadow: inset 0 0 0 1px var(--die-edge), inset 0 -3px 5px rgba(0, 0, 0, 0.28), inset 0 2px 3px rgba(255, 255, 255, 0.3), 0 3px 6px rgba(0, 0, 0, 0.45);
  vertical-align: middle;
}
.pc-die::before {
  content: "";
  position: absolute;
  inset: 15%;
  background-repeat: no-repeat;
  background-size: 30% 30%;
  filter: var(--pip-glow);
}
.pc-die[data-value="1"]::before { background-image: var(--p); background-position: center; background-size: 36% 36%; }
.pc-die[data-value="2"]::before { background-image: var(--p), var(--p); background-position: 0 0, 100% 100%; }
.pc-die[data-value="3"]::before { background-image: var(--p), var(--p), var(--p); background-position: 0 0, center, 100% 100%; }
.pc-die[data-value="4"]::before { background-image: var(--p), var(--p), var(--p), var(--p); background-position: 0 0, 100% 0, 0 100%, 100% 100%; }
.pc-die[data-value="5"]::before { background-image: var(--p), var(--p), var(--p), var(--p), var(--p); background-position: 0 0, 100% 0, center, 0 100%, 100% 100%; }
.pc-die[data-value="6"]::before { background-image: var(--p), var(--p), var(--p), var(--p), var(--p), var(--p); background-position: 0 0, 100% 0, 0 50%, 100% 50%, 0 100%, 100% 100%; }
.pc-die.is-rolling { animation: pc-roll 0.5s linear infinite; }

.pc-die.dc-bone { --die-tex: url("/art/items/dice-bone.webp"); --die-bg: #efe4cc; --pip: #2a1d14; }
.pc-die.dc-ebony { --die-tex: url("/art/items/dice-ebony.webp"); --die-bg: #16110f; --pip: #f4ede1; --die-edge: rgba(255, 255, 255, 0.12); }
.pc-die.dc-oak { --die-tex: url("/art/items/dice-oak.webp"); --die-bg: #b9874a; --pip: #1d120a; }
.pc-die.dc-marble { --die-tex: url("/art/items/dice-marble.webp"); --die-bg: #eeeeec; --pip: #26262c; }
.pc-die.dc-garnet { --die-tex: url("/art/items/dice-garnet.webp"); --die-bg: #6e1030; --pip: #fff1e0; }
.pc-die.dc-jade { --die-tex: url("/art/items/dice-jade.webp"); --die-bg: #2f7a55; --pip: #f6f0dc; }
.pc-die.dc-crystal { --die-tex: url("/art/items/dice-crystal.webp"); --die-bg: #b8c4d0; --pip: #1f2a3a; --die-edge: rgba(255, 255, 255, 0.5); }
.pc-die.dc-obsidian { --die-tex: url("/art/items/dice-obsidian.webp"); --die-bg: #0c0b0e; --pip: #f1d9a6; --pip-glow: drop-shadow(0 0 3px rgba(243, 184, 87, 0.85)); --die-edge: rgba(217, 183, 122, 0.4); }
.pc-die.dc-ruby { --die-tex: url("/art/items/dice-ruby.webp"); --die-bg: #8e1b3a; --pip: #fff4d6; --pip-glow: drop-shadow(0 0 3px rgba(255, 244, 214, 0.8)); }
.pc-die.dc-gold {
  --die-tex: url("/art/items/dice-gold.webp");
  --die-bg: #c99a45;
  --pip: #b0122f;
  --pip-glow: drop-shadow(0 0 2px rgba(255, 60, 90, 0.9));
  --die-edge: rgba(90, 60, 10, 0.6);
  box-shadow: inset 0 0 0 1px var(--die-edge), inset 0 -3px 5px rgba(60, 30, 0, 0.35), 0 3px 6px rgba(0, 0, 0, 0.45), 0 0 12px rgba(243, 184, 87, 0.55);
  overflow: hidden;
}
.pc-die.dc-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 248, 225, 0.7) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat;
  animation: pc-die-sheen 3.6s ease-in-out infinite;
}

@keyframes pc-roll { 25% { transform: rotate(90deg) scale(0.92); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg) scale(0.92); } 100% { transform: rotate(360deg); } }
@keyframes pc-die-sheen { 0%, 40% { background-position: -150% 0; } 80%, 100% { background-position: 250% 0; } }

/* ---------- фишка «Монополии»: аватарка игрока в кольце-обводке ---------- */

.pc-token {
  --size: 36px;
  --seat: #d9b77a;
  --ring: var(--seat);
  --ring-w: calc(var(--size) * 0.1);
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  padding: var(--ring-w);
  overflow: hidden;
  background: var(--ring);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.55);
  vertical-align: middle;
}
.pc-token-face { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; border-radius: 50%; object-fit: cover; background: #1a1418; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); }
.pc-token.is-faceless::after { content: attr(data-initial); position: absolute; inset: var(--ring-w); display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--seat) 70%, #000); color: #fff; font-weight: 800; font-size: calc(var(--size) * 0.42); }
.pc-token.is-default { --ring: var(--seat); }
.pc-token.tk-silver { --ring: linear-gradient(135deg, #f4f6f8, #9aa3ad 45%, #e3e7ea 60%, #7d858f); }
.pc-token.tk-brass { --ring: linear-gradient(135deg, #f1d38b, #a87a2c 50%, #e8c06d 70%, #7c5518); }
.pc-token.tk-ebony { --ring: linear-gradient(135deg, #3a2c31, #0b0709 55%, #4a3a40); box-shadow: 0 0 0 1.5px #c9962f, 0 2px 4px rgba(0, 0, 0, 0.55); }
.pc-token.tk-velvet { --ring: linear-gradient(135deg, #a0173b, #5c0a20 55%, #c43a5c); box-shadow: 0 0 0 1px #e8c06d, 0 2px 4px rgba(0, 0, 0, 0.55); }
.pc-token.tk-pearl { --ring: repeating-conic-gradient(from 0deg, #fffdf6 0 10deg, #d9d2c3 10deg 14deg, #fffdf6 14deg 22.5deg); }
.pc-token.tk-emerald { --ring: conic-gradient(from 20deg, #0f6b45, #3fe09a, #0f6b45, #9cf5c9, #0f6b45); box-shadow: 0 0 10px rgba(63, 224, 154, 0.45), 0 2px 4px rgba(0, 0, 0, 0.55); }
.pc-token.tk-sapphire { --ring: conic-gradient(from 200deg, #0d2f7a, #58a6ff, #0d2f7a, #b9dcff, #0d2f7a); box-shadow: 0 0 10px rgba(88, 166, 255, 0.45), 0 2px 4px rgba(0, 0, 0, 0.55); }
.pc-token.tk-neon { --ring: conic-gradient(from var(--spin, 0deg), #ff3ea5, #7a5cff, #33e6ff, #ff3ea5); animation: pc-token-spin 3s linear infinite; box-shadow: 0 0 12px rgba(122, 92, 255, 0.65); }
.pc-token.tk-ember { --ring: conic-gradient(from var(--spin, 0deg), #3b0a00, #ff6a1a, #ffd36b, #ff6a1a, #3b0a00); animation: pc-token-spin 4.5s linear infinite; box-shadow: 0 0 12px rgba(255, 106, 26, 0.6); }
.pc-token.tk-crown { --ring: conic-gradient(from var(--spin, 0deg), #7c5518, #f9e3a3, #c9962f, #fff4cf, #7c5518); animation: pc-token-spin 2.6s linear infinite; box-shadow: 0 0 14px rgba(243, 184, 87, 0.75); }
.pc-token.tk-phoenix { --ring: conic-gradient(from var(--spin, 0deg), #ff2a00, #ffb000, #ff5a1f, #fff07a, #ff2a00); animation: pc-token-spin 1.8s linear infinite, pc-token-flare 1.6s ease-in-out infinite; }
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes pc-token-spin { to { --spin: 360deg; } }
@keyframes pc-token-flare { 50% { box-shadow: 0 0 18px rgba(255, 106, 26, 0.95); } }

/* ---------- поле «Монополии» ---------- */
/* Класс .bd-<css> вешается на корень поля; раскладку рисует клиент игры, предмет даёт палитру и центр. */

.pc-board {
  --bd-art: none;
  --bd-bg: #0f2a1f;
  --bd-cell: #13241c;
  --bd-cell-2: #182d23;
  --bd-line: rgba(217, 183, 122, 0.45);
  --bd-ink: #f4ede1;
  --bd-muted: #b9ad98;
  --bd-accent: #d9b77a;
  background: var(--bd-bg);
  color: var(--bd-ink);
}
.pc-board-center {
  background: var(--bd-art) center / cover, var(--bd-bg);
}
.pc-board-cell {
  background: linear-gradient(160deg, var(--bd-cell), var(--bd-cell-2));
  border: 1px solid var(--bd-line);
  color: var(--bd-ink);
}

.pc-board.bd-felt { --bd-art: url("/art/items/board-felt.webp"); --bd-bg: #0d2a1d; --bd-cell: #123524; --bd-cell-2: #0d2a1d; --bd-line: rgba(201, 163, 90, 0.5); --bd-accent: #c9a35a; }
.pc-board.bd-parchment { --bd-art: url("/art/items/board-parchment.webp"); --bd-bg: #d8c39a; --bd-cell: #eadbb9; --bd-cell-2: #dcc79c; --bd-line: rgba(90, 60, 30, 0.45); --bd-ink: #3a2616; --bd-muted: #6b5038; --bd-accent: #8a3b1e; }
.pc-board.bd-ink { --bd-art: url("/art/items/board-ink.webp"); --bd-bg: #0b0a0d; --bd-cell: #141217; --bd-cell-2: #0b0a0d; --bd-line: rgba(217, 183, 122, 0.4); }
.pc-board.bd-velvet { --bd-art: url("/art/items/board-velvet.webp"); --bd-bg: #3a0a1a; --bd-cell: #4f1024; --bd-cell-2: #330815; --bd-line: rgba(241, 217, 166, 0.45); --bd-accent: #f1d9a6; }
.pc-board.bd-marble { --bd-art: url("/art/items/board-marble.webp"); --bd-bg: #0f0f12; --bd-cell: #1b1b20; --bd-cell-2: #111115; --bd-line: rgba(217, 183, 122, 0.55); }
.pc-board.bd-map { --bd-art: url("/art/items/board-map.webp"); --bd-bg: #c9ad7d; --bd-cell: #e3cfa6; --bd-cell-2: #d2b888; --bd-line: rgba(80, 50, 20, 0.5); --bd-ink: #2e1d0f; --bd-muted: #634a30; --bd-accent: #9c7438; }
.pc-board.bd-masquerade { --bd-art: url("/art/items/board-masquerade.webp"); --bd-bg: #140a10; --bd-cell: #23101a; --bd-cell-2: #140a10; --bd-line: rgba(229, 72, 107, 0.45); --bd-accent: #e5486b; }
.pc-board.bd-night { --bd-art: url("/art/items/board-night.webp"); --bd-bg: #070b16; --bd-cell: #0f1626; --bd-cell-2: #090e1a; --bd-line: rgba(243, 184, 87, 0.45); --bd-accent: #f3b857; }
.pc-board.bd-stars { --bd-art: url("/art/items/board-stars.webp"); --bd-bg: #080d24; --bd-cell: #111a3a; --bd-cell-2: #0a1029; --bd-line: rgba(200, 212, 255, 0.4); --bd-ink: #e6ecff; --bd-accent: #c8d4ff; }
.pc-board.bd-palace { --bd-art: url("/art/items/board-palace.webp"); --bd-bg: #2a1a08; --bd-cell: #3b260c; --bd-cell-2: #24170a; --bd-line: rgba(255, 228, 160, 0.6); --bd-ink: #fff4d6; --bd-accent: #f3b857; }
.pc-board.bd-palace .pc-board-center { position: relative; overflow: hidden; }
.pc-board.bd-palace .pc-board-center::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 244, 214, 0.35) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat;
  animation: pc-die-sheen 6s ease-in-out infinite;
  pointer-events: none;
}

/* ---------- пятая волна: лица карт, фишки, обводки, кости, поля ---------- */

.pc-card.cf-slate {
  --paper: #3a4440;
  --paper-2: #262e2b;
  --red: #ffb3a8;
  --black: #eef0e8;
  --edge: rgba(238, 240, 232, 0.35);
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 255, 255, 0.08), transparent 60%),
    linear-gradient(160deg, var(--paper), var(--paper-2));
}

.pc-card.cf-emerald {
  --paper: #13402f;
  --paper-2: #0a271c;
  --red: #ff9aaa;
  --black: #f1e6c8;
  --frame: #c9a35a;
  --edge: rgba(217, 183, 122, 0.55);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 5px),
    linear-gradient(160deg, var(--paper), var(--paper-2));
}

.pc-card.cf-velvet {
  --paper: #5b0f26;
  --paper-2: #2a0714;
  --frame: #d9b77a;
  --edge: rgba(241, 217, 166, 0.5);
  --pip-filter: drop-shadow(0 0.5px 0 rgba(0, 0, 0, 0.5));
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, 0.1), transparent 55%),
    linear-gradient(160deg, var(--paper), var(--paper-2));
}
.pc-card.cf-velvet::before, .pc-card.cf-velvet::after {
  background: linear-gradient(110deg, #9c7438 0%, #f7e2b4 30%, #c99a45 50%, #fff4d6 60%, #9c7438 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: pc-gold-flow 6s linear infinite;
}
.pc-card.cf-velvet:is([data-suit="hearts"], [data-suit="diamonds"])::before,
.pc-card.cf-velvet:is([data-suit="hearts"], [data-suit="diamonds"])::after {
  background-image: linear-gradient(110deg, #ff9fb2 0%, #fff0f3 30%, #ff7d97 50%, #ffe0e6 60%, #ff9fb2 100%);
}

.pc-chip.ch-sunset { --c1: #f7b58a; --c2: #f08a6a; --c3: #e0566a; --c4: #a8264a; --c5: #5e1238; --stripe: #fff1e0; }
.pc-chip.ch-jade {
  --c1: #3f9a72; --c2: #2f7a55; --c3: #5fb98f; --c4: #1d5a3d; --c5: #8fd6b0; --stripe: #d9b77a; --ring: #d9b77a;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.28), transparent 45%),
    radial-gradient(circle, var(--face) 0 50%, var(--ring) 51% 54%, transparent 55%),
    repeating-conic-gradient(from 12deg, var(--stripe) 0 10deg, var(--base) 10deg 45deg);
}

.pc-token.tk-copper { --ring: linear-gradient(135deg, #f3c5a0, #9a4f26 45%, #e09a6a 62%, #3f8a78 85%, #5a2d14); }
.pc-token.tk-amethyst { --ring: conic-gradient(from 30deg, #3a1460, #b98cff, #5b2a91, #e6d4ff, #3a1460); box-shadow: 0 0 10px rgba(178, 107, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.55); }
.pc-token.tk-aurora { --ring: conic-gradient(from var(--spin, 0deg), #4ff0c9, #5b9dff, #b26bff, #ff6fb5, #4ff0c9); animation: pc-token-spin 5s linear infinite; box-shadow: 0 0 12px rgba(91, 157, 255, 0.6); }

.pc-die.dc-walnut { --die-tex: url("/art/items/dice-walnut.webp"); --die-bg: #4a2a18; --pip: #f4e6cc; --die-edge: rgba(255, 255, 255, 0.12); }
.pc-die.dc-amber { --die-tex: url("/art/items/dice-amber.webp"); --die-bg: #c47a20; --pip: #3a1a06; --pip-glow: drop-shadow(0 0 2px rgba(255, 232, 160, 0.7)); }

.pc-board.bd-oak { --bd-art: url("/art/items/board-oak.webp"); --bd-bg: #1c120b; --bd-cell: #2a1b10; --bd-cell-2: #1c120b; --bd-line: rgba(201, 163, 90, 0.45); --bd-accent: #c9a35a; }
.pc-board.bd-garden { --bd-art: url("/art/items/board-garden.webp"); --bd-bg: #0b1a12; --bd-cell: #12281b; --bd-cell-2: #0b1a12; --bd-line: rgba(217, 183, 122, 0.45); --bd-ink: #eef3e6; --bd-accent: #e5486b; }

/* ---------- превью в инвентаре, магазине, обменах ---------- */

.thumb--cardface, .thumb--chips, .thumb--dice, .thumb--token, .thumb--board {
  background: radial-gradient(120% 90% at 50% 0%, #2a1d27, #0c0a10 70%);
}
.thumb-fan { position: relative; display: block; width: 74%; height: 74%; container-type: size; }
.thumb-fan .pc-card { --w: 46cqw; position: absolute; bottom: 4%; left: 27%; transform-origin: 50% 120%; }
.thumb-fan .pc-card:nth-child(1) { transform: rotate(-16deg) translateX(-28%); }
.thumb-fan .pc-card:nth-child(2) { z-index: 1; }
.thumb-fan .pc-card:nth-child(3) { z-index: 2; transform: rotate(16deg) translateX(28%); }
.thumb-chips { position: relative; display: block; width: 76%; height: 76%; }
.thumb-chips .pc-chip { --size: 48%; position: absolute; }
.thumb-chips .pc-chip:nth-child(1) { left: 6%; top: 34%; }
.thumb-chips .pc-chip:nth-child(2) { left: 46%; top: 34%; }
.thumb-chips .pc-chip:nth-child(3) { left: 26%; top: 6%; z-index: 1; }
.thumb-dice { display: flex; gap: 8%; align-items: center; justify-content: center; width: 100%; height: 100%; }
.thumb-dice .pc-die { --size: 36%; }
.thumb-dice .pc-die:first-child { transform: rotate(-12deg) translateY(-8%); }
.thumb-dice .pc-die:last-child { transform: rotate(9deg) translateY(10%); }
.thumb--token { display: grid; place-items: center; }
.thumb--board img { border-radius: 6%; box-shadow: inset 0 0 0 1px var(--line-2, rgba(217, 183, 122, 0.3)); }

/* ---------- карточка фирмы «Монополии» (.pc-firm, Cosmetics.firm) ---------- */

.pc-firm {
  --size: 96px;
  --firm-rar: #a7adb8;
  --firm-group: #5b5f6b;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: var(--size);
  aspect-ratio: 3 / 4;
  border-radius: calc(var(--size) * 0.08);
  overflow: hidden;
  background: #fff;
  color: #1d1a22;
  font-size: calc(var(--size) * 0.105);
  line-height: 1.15;
  box-shadow: 0 0 0 calc(var(--size) * 0.03) var(--firm-rar), 0 6px 16px rgba(0, 0, 0, 0.35);
}
.pc-firm[data-rarity="uncommon"] { --firm-rar: #5fcf98; }
.pc-firm[data-rarity="rare"] { --firm-rar: #5b9dff; }
.pc-firm[data-rarity="epic"] { --firm-rar: #b26bff; }
.pc-firm[data-rarity="legendary"] { --firm-rar: #f3b857; }
.pc-firm-band {
  padding: 0.35em 0.4em;
  background: var(--firm-group);
  color: #fff;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85em;
}
.pc-firm-logo { display: grid; place-items: center; min-height: 0; padding: 4%; font-weight: 800; text-align: center; }
.pc-firm-logo img { width: 100%; height: 100%; object-fit: contain; }
.pc-firm-bonus {
  padding: 0.35em 0.3em 0.45em;
  background: color-mix(in srgb, var(--firm-rar) 22%, #fff);
  border-top: 1px solid color-mix(in srgb, var(--firm-rar) 60%, #fff);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.pc-firm-bonus.is-two { padding-top: 0.25em; padding-bottom: 0.3em; font-size: 0.9em; line-height: 1.12; }
.pc-firm-bonus.is-two > span { display: block; }
.pc-firm-bonus.is-two > span + span { font-weight: 600; opacity: 0.85; }
.pc-firm[data-rarity="legendary"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 236, 190, 0.45) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat;
  animation: pc-die-sheen 6s ease-in-out infinite;
  pointer-events: none;
}
.thumb--firm { container-type: size; background: radial-gradient(120% 90% at 50% 0%, #2a1d27, #0c0a10 70%); }
.thumb--firm .pc-firm { --size: min(62cqw, 60cqh); }

@media (prefers-reduced-motion: reduce) {
  .pc-firm::after { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-card, .pc-card::before, .pc-card::after, .pc-chip, .pc-chip::before, .pc-die, .pc-die::after,
  .pc-token, .pc-board-center::after { animation: none !important; }
}