/* Cartes Présages — DA « La Verrière » (vitrail).
   Remplace app/client/css/cards.css par simple copie. Tout le rendu des cartes est ici
   et dans js/cards.js. Les tailles internes sont en cqw (pourcentage de la largeur de
   la carte) : la même carte se rend nette de 30 px à 300 px.
   Perf mobile : pas de filter par carte, pas d'animation infinie ; les effets d'état
   passent par un calque ::after (opacité + dégradés) et des box-shadow. */

@import url("https://fonts.googleapis.com/css2?family=Alegreya:wght@500;700&family=Cinzel:wght@600;700;800&display=swap");

:root {
  /* verre */
  --pc-green: #2f9a4c;  --pc-green-d: #134a24;
  --pc-yellow: #f2c22e; --pc-yellow-d: #7a5a06;
  --pc-red: #c8262c;    --pc-red-d: #5c0f12;
  --pc-blue: #1f4fb5;   --pc-blue-d: #0c2257;
  --pc-lead: #17140f;           /* plomb */
  --pc-grisaille: #ece3cb;      /* verre clair peint */
  --pc-paper: #f3ead4;  --pc-ink: #2a2219;
  --pc-gold: #f0c869;   --pc-gold-hi: #ffe7a8;
  --pc-quad: conic-gradient(var(--pc-yellow) 0 25%, var(--pc-blue) 0 50%, var(--pc-red) 0 75%, var(--pc-green) 0);
  /* tailles (mêmes valeurs que le module provisoire : l'app s'en sert) */
  --pc-w-xs: 30px; --pc-w-s: 44px; --pc-w-m: 62px; --pc-w-l: 190px;
  /* fenêtres en ogive (arc brisé), pour la grande carte et la carte de main */
  --pc-ogive-l: polygon(0% 100%,0% 46%,.4% 41.1%,1.6% 36.3%,3.5% 31.5%,6.2% 26.9%,9.6% 22.5%,13.7% 18.3%,18.4% 14.3%,23.7% 10.7%,29.6% 7.4%,36% 4.6%,42.8% 2.1%,50% 0%,57.2% 2.1%,64% 4.6%,70.4% 7.4%,76.3% 10.7%,81.6% 14.3%,86.3% 18.3%,90.4% 22.5%,93.8% 26.9%,96.5% 31.5%,98.4% 36.3%,99.6% 41.1%,100% 46%,100% 100%);
  --pc-ogive-m: polygon(0% 100%,0% 33%,.4% 29.5%,1.6% 26%,3.5% 22.6%,6.2% 19.3%,9.6% 16.1%,13.7% 13.1%,18.4% 10.3%,23.7% 7.7%,29.6% 5.3%,36% 3.3%,42.8% 1.5%,50% 0%,57.2% 1.5%,64% 3.3%,70.4% 5.3%,76.3% 7.7%,81.6% 10.3%,86.3% 13.1%,90.4% 16.1%,93.8% 19.3%,96.5% 22.6%,98.4% 26%,99.6% 29.5%,100% 33%,100% 100%);
}
@media (min-width: 900px) {
  :root { --pc-w-xs: 32px; --pc-w-s: 52px; --pc-w-m: 78px; --pc-w-l: 220px; }
}

/* ------------------------------------------------------------ socle */

.pc {
  --w: var(--pc-w-m);
  --c: var(--pc-gold); --cd: #3a2d18; --on-c: #fff;
  --glass: var(--c);
  --u: calc(var(--w) / 100);
  --lw: max(1px, calc(.9 * var(--u)));                 /* épaisseur d'un plomb fin */
  container-type: inline-size;
  position: relative;
  flex: 0 0 auto;
  width: var(--w);
  height: calc(var(--w) * 1.48);
  border-radius: calc(var(--w) * .07);
  overflow: hidden;
  isolation: isolate;
  color: var(--pc-lead);
  /* le cadre : verre de la couleur de la carte, en losanges sertis de plomb */
  background:
    radial-gradient(130% 75% at 50% 18%, rgba(255,255,240,.34), transparent 62%),
    radial-gradient(160% 110% at 50% 50%, transparent 52%, rgba(0,0,0,.42)),
    repeating-linear-gradient(56deg, transparent 0 calc(calc(13 * var(--u)) - var(--lw)), var(--pc-lead) 0 calc(13 * var(--u))),
    repeating-linear-gradient(-56deg, transparent 0 calc(calc(13 * var(--u)) - var(--lw)), var(--pc-lead) 0 calc(13 * var(--u))),
    linear-gradient(160deg, color-mix(in srgb, var(--glass) 82%, #fff), var(--glass) 45%, color-mix(in srgb, var(--glass) 78%, #000));
  box-shadow:
    inset 0 0 0 max(1.5px, calc(2 * var(--u))) var(--pc-lead),
    0 1px 2px rgba(0,0,0,.35), 0 calc(var(--w) * .05) calc(var(--w) * .12) rgba(0,0,0,.35);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, opacity .25s ease;
  font-family: Cinzel, "Cormorant Garamond", Georgia, serif;
  line-height: 1;
}
.pc > * { position: absolute; }
.pc-xs { --w: var(--pc-w-xs); height: calc(var(--w) * 1.25); }
.pc-s  { --w: var(--pc-w-s); }
.pc-m  { --w: var(--pc-w-m); }
.pc-l  { --w: var(--pc-w-l); }

.pc-green  { --c: var(--pc-green);  --cd: var(--pc-green-d);  --on-c: #fff; }
.pc-yellow { --c: var(--pc-yellow); --cd: var(--pc-yellow-d); --on-c: var(--pc-lead); }
.pc-red    { --c: var(--pc-red);    --cd: var(--pc-red-d);    --on-c: #fff; }
.pc-blue   { --c: var(--pc-blue);   --cd: var(--pc-blue-d);   --on-c: #fff; }
.pc-all    { --c: #6b5a45; --cd: #2a2117; --on-c: #fff; }
/* La Malice : cadre en quatre quartiers de verre (vert, jaune / rouge, bleu),
   séparés par une croix de plomb. */
.pc-all {
  background:
    radial-gradient(130% 75% at 50% 18%, rgba(255,255,240,.3), transparent 62%),
    radial-gradient(160% 110% at 50% 50%, transparent 52%, rgba(0,0,0,.4)),
    linear-gradient(90deg, transparent calc(50% - var(--lw)), var(--pc-lead) 0 calc(50% + var(--lw)), transparent 0),
    linear-gradient(0deg, transparent calc(50% - var(--lw)), var(--pc-lead) 0 calc(50% + var(--lw)), transparent 0),
    repeating-linear-gradient(56deg, transparent 0 calc(calc(13 * var(--u)) - var(--lw)), var(--pc-lead) 0 calc(13 * var(--u))),
    repeating-linear-gradient(-56deg, transparent 0 calc(calc(13 * var(--u)) - var(--lw)), var(--pc-lead) 0 calc(13 * var(--u))),
    var(--pc-quad);
}

/* ------------------------------------------------------------ fenêtre (image) */

.pc-art {
  left: 5cqw; right: 5cqw; top: 5cqw; bottom: 5cqw;
  background: var(--pc-lead);
  clip-path: var(--pc-ogive-m);
}
.pc-pane {
  position: absolute; inset: max(1px, 1.4cqw);
  clip-path: var(--pc-ogive-m);
  overflow: hidden;
  display: grid; place-items: center;
  /* verre de secours si l'image manque */
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--c) 55%, #fff), var(--c) 55%, var(--cd));
}
.pc-all .pc-pane { background: var(--pc-quad); }
.pc-pane > .pc-sym { width: 46%; height: auto; aspect-ratio: 1; color: color-mix(in srgb, var(--cd) 80%, transparent); }
.pc-fallback-all { width: 50%; aspect-ratio: 1; border-radius: 50%; background: var(--pc-grisaille); box-shadow: 0 0 0 var(--lw) var(--pc-lead); }
.pc-img {
  position: absolute; left: -5%; top: -4%; width: 110%; height: 108%;
  object-fit: cover; object-position: 50% 40%;
  display: block; pointer-events: none;
}

/* ------------------------------------------------------------ rosace du numéro */

.pc-top { inset: 0; pointer-events: none; }
.pc-num {
  position: absolute; left: 1.5cqw; top: 1.5cqw;
  width: 46cqw; height: 46cqw; border-radius: 50%;
  display: grid; place-items: center;
  /* centre de grisaille, couronne de verre de la couleur coupée de plombs rayonnants */
  background:
    radial-gradient(circle closest-side, var(--pc-grisaille) 0 60%, var(--pc-lead) calc(60% + .2px) 68%, transparent calc(68% + .2px)),
    repeating-conic-gradient(from 22.5deg, transparent 0 41deg, var(--pc-lead) 0 45deg),
    radial-gradient(circle closest-side, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 80%, var(--cd));
  box-shadow: 0 0 0 max(1px, 1.2cqw) var(--pc-lead), 0 .6cqw 2cqw rgba(0,0,0,.45);
  color: var(--pc-lead);
  font: 800 22cqw/1 Cinzel, Georgia, serif;
  letter-spacing: -.05em;
  font-variant-numeric: lining-nums;
  padding-top: 1.6cqw;
  text-indent: -.05em;
}
.pc-all .pc-num {
  background:
    radial-gradient(circle closest-side, var(--pc-grisaille) 0 60%, var(--pc-lead) calc(60% + .2px) 68%, transparent calc(68% + .2px)),
    repeating-conic-gradient(from 22.5deg, transparent 0 41deg, var(--pc-lead) 0 45deg),
    var(--pc-quad);
}
/* pictogramme d'effet : médaillon de plomb en haut à droite (grande carte seulement) */
.pc-kind {
  position: absolute; right: 3cqw; top: 3cqw;
  width: 13cqw; height: 13cqw; border-radius: 50%;
  background: var(--pc-lead); color: var(--pc-gold-hi);
  padding: 2.6cqw; display: none;
  box-shadow: 0 0 0 .8cqw color-mix(in srgb, var(--c) 70%, #fff), 0 0 0 1.6cqw var(--pc-lead);
}
.pc-kind svg { display: block; width: 100%; height: 100%; }

/* ------------------------------------------------------------ symbole de couleur */

.pc-pip {
  right: 3cqw; bottom: 3cqw;
  width: 25cqw; height: 25cqw; border-radius: 50%;
  background: var(--pc-grisaille); padding: 4.4cqw;
  box-shadow: 0 0 0 max(1px, 1.1cqw) var(--pc-lead), 0 0 0 max(1.5px, 2.4cqw) var(--c), 0 0 0 max(2px, 3.3cqw) var(--pc-lead);
  color: var(--cd);
  display: grid;
}
.pc-pip .pc-sym { display: block; width: 100%; height: 100%; }
.pc-pip-all { grid-template-columns: 1fr 1fr; gap: 6%; padding: 3.8cqw; box-shadow: 0 0 0 max(1px, 1.1cqw) var(--pc-lead), 0 0 0 max(2px, 3cqw) #8a7350, 0 0 0 max(2.5px, 3.9cqw) var(--pc-lead); }
.pc-sym-green { color: #1f7a39; } .pc-sym-yellow { color: #b88a00; }
.pc-sym-red { color: #b01e24; }   .pc-sym-blue { color: #1d48a6; }
.pc-pip:not(.pc-pip-all) .pc-sym { color: var(--cd); }

/* ------------------------------------------------------------ jetons (xs, s) */

.pc-chip {
  display: grid; place-items: center;
  font: 800 1em/1 Cinzel, Georgia, serif;
  font-variant-numeric: lining-nums;
  letter-spacing: -.05em; text-indent: -.05em;
  color: var(--on-c);
}
.pc-all .pc-chip, .pc-green .pc-chip, .pc-red .pc-chip, .pc-blue .pc-chip {
  text-shadow: 0 0 2px rgba(0,0,0,.55), 0 1px 1px rgba(0,0,0,.6);
}
/* xs : tout le jeton est le verre de la carte (sans losanges, pour garder le numéro net) */
.pc-xs {
  border-radius: calc(var(--w) * .12);
  background:
    radial-gradient(120% 80% at 50% 15%, rgba(255,255,240,.38), transparent 65%),
    radial-gradient(150% 110% at 50% 50%, transparent 55%, rgba(0,0,0,.35)),
    linear-gradient(160deg, color-mix(in srgb, var(--glass) 85%, #fff), var(--glass) 50%, color-mix(in srgb, var(--glass) 80%, #000));
}
.pc-xs.pc-all {
  background:
    radial-gradient(120% 80% at 50% 15%, rgba(255,255,240,.3), transparent 65%),
    linear-gradient(90deg, transparent calc(50% - .75px), var(--pc-lead) 0 calc(50% + .75px), transparent 0),
    linear-gradient(0deg, transparent calc(50% - .75px), var(--pc-lead) 0 calc(50% + .75px), transparent 0),
    var(--pc-quad);
}
.pc-xs .pc-chip { inset: 0; font-size: 56cqw; padding-top: 4cqw; }
/* s : bandeau du numéro en haut, fenêtre dessous */
.pc-s .pc-chip {
  left: 0; right: 0; top: 0; height: 52cqw;
  font-size: 44cqw; padding-top: 4cqw;
  background:
    radial-gradient(120% 90% at 50% 20%, rgba(255,255,240,.3), transparent 70%),
    var(--c);
  box-shadow: inset 0 0 0 max(1.5px, 2cqw) var(--pc-lead), 0 max(1px, 1cqw) 0 var(--pc-lead);
}
.pc-all.pc-s .pc-chip { background: var(--pc-quad); }
.pc-s .pc-art { top: 50cqw; left: 6cqw; right: 6cqw; bottom: 6cqw; clip-path: none; border-radius: 1.5cqw; }
.pc-s .pc-pane { clip-path: none; border-radius: 1cqw; }
.pc-s .pc-img { object-position: 50% 30%; }
.pc-s .pc-pip { width: 32cqw; height: 32cqw; padding: 5.5cqw; right: 2cqw; bottom: 2cqw; }
.pc-s .pc-pip-all { padding: 4.6cqw; }

/* ------------------------------------------------------------ grande carte (l) */

.pc-l .pc-art { left: 7cqw; right: 7cqw; top: 6cqw; bottom: auto; height: 97cqw; clip-path: var(--pc-ogive-l); }
.pc-l .pc-pane { inset: 1.3cqw; clip-path: var(--pc-ogive-l); }
.pc-l .pc-img { left: -4%; top: -3%; width: 108%; height: 112%; object-position: 50% 38%; }
.pc-l .pc-num { left: 2cqw; top: 2cqw; width: 27cqw; height: 27cqw; font-size: 12.5cqw; padding-top: .9cqw; }
.pc-l .pc-kind { display: block; }
.pc-l .pc-pip { left: 6.8cqw; right: auto; top: 30.5cqw; bottom: auto; width: 13cqw; height: 13cqw; padding: 2.3cqw;
  box-shadow: 0 0 0 .8cqw var(--pc-lead), 0 0 0 1.7cqw var(--c), 0 0 0 2.4cqw var(--pc-lead); }
.pc-l .pc-pip-all { padding: 2cqw; box-shadow: 0 0 0 .8cqw var(--pc-lead), 0 0 0 1.7cqw #8a7350, 0 0 0 2.4cqw var(--pc-lead); }
.pc-name {
  left: 2cqw; right: 2cqw; top: 103cqw; height: 12cqw;
  display: grid; place-items: center;
  background: var(--pc-lead);
  color: var(--pc-grisaille);
  font: 700 6.6cqw/1 Cinzel, Georgia, serif;
  letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
  padding-top: .6cqw;
}
.pc-text {
  left: 5.5cqw; right: 5.5cqw; top: 115cqw; bottom: 4.5cqw;
  display: grid; place-items: center;
  padding: 0 3.2cqw;
  background: linear-gradient(180deg, var(--pc-paper), #ddd2b6);
  color: var(--pc-ink);
  box-shadow: inset 0 0 0 .8cqw var(--pc-lead);
  border-radius: 0 0 1.6cqw 1.6cqw;
  font: 500 5.6cqw/1.16 Alegreya, Georgia, serif;
  text-align: center;
  hyphens: manual;
}
.pc-long .pc-text { font-size: 5cqw; }
.pc-text p { margin: 0; }
.pc-text b { font-weight: 700; letter-spacing: .01em; }
.pc-kw {
  font-weight: 700; white-space: nowrap; letter-spacing: .02em;
  padding: 0 .25em; border-radius: .25em;
  background: var(--k); color: var(--k-on);
  box-shadow: inset 0 0 0 .5cqw rgba(0,0,0,.35);
}
.pc-kw-green { --k: var(--pc-green); --k-on: #fff; }
.pc-kw-yellow { --k: var(--pc-yellow); --k-on: var(--pc-lead); }
.pc-kw-red { --k: var(--pc-red); --k-on: #fff; }
.pc-kw-blue { --k: var(--pc-blue); --k-on: #fff; }

/* ------------------------------------------------------------ dos */

.pc-back { --c: #1b2f6e; --cd: #0a1430; background: #0e1838; }
.pc-backmotif {
  inset: max(1.5px, 2cqw); overflow: hidden; border-radius: calc(var(--w) * .05);
  background:
    repeating-conic-gradient(from 0deg at 50% 50%, var(--pc-lead) 0 2deg, transparent 2deg 30deg),
    radial-gradient(circle at 50% 50%, var(--pc-gold) 0 5%, var(--pc-lead) 5% 7%, #2b55c4 7% 26%, var(--pc-lead) 26% 28%, #18307a 28% 60%, #0c1a45);
}
.pc-backmotif .pc-img { left: -4%; top: -3%; width: 108%; height: 106%; object-position: 50% 50%; }
.pc-backname {
  left: 15cqw; right: 15cqw; top: 127cqw; height: 12cqw;
  display: grid; place-items: center;
  background: var(--pc-lead); color: var(--pc-gold-hi);
  font: 700 7.4cqw/1 Cinzel, Georgia, serif; letter-spacing: .12em; text-transform: uppercase;
  border-radius: 1.5cqw;
  box-shadow: 0 0 0 .8cqw color-mix(in srgb, var(--pc-gold) 70%, transparent), 0 0 0 1.6cqw var(--pc-lead);
  padding-top: .6cqw;
}
.pc-xs.pc-back .pc-backmotif { inset: max(1px, 3cqw); }

/* ------------------------------------------------------------ états */

/* calque de lumière : sert à la sélection, à la victoire, à l'arrivée et à l'extinction */
.pc::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(85% 60% at 50% 34%, rgba(255,252,235,.62), rgba(255,236,190,.22) 45%, transparent 75%);
  mix-blend-mode: screen;
  transition: opacity .25s ease;
}

/* jouable : on peut cliquer ; liseré doré fixe, la carte se soulève au survol */
.pc.is-selectable { cursor: pointer; }
.pc.is-selectable:not(.is-selected) {
  box-shadow:
    inset 0 0 0 max(1.5px, calc(2 * var(--u))) var(--pc-lead),
    0 0 0 max(1.5px, calc(2.4 * var(--u))) color-mix(in srgb, var(--pc-gold) 80%, transparent),
    0 calc(var(--w) * .05) calc(var(--w) * .12) rgba(0,0,0,.35);
}
@media (hover: hover) and (pointer: fine) {
  .pc.is-selectable:hover { transform: translateY(-4%); }
  .pc.is-selectable:hover::after { opacity: .45; }
}
.pc.is-selectable:focus-visible { outline: 2px solid var(--pc-gold-hi); outline-offset: 2px; }

/* sélectionnée : la carte se soulève et s'éclaire comme un vitrail traversé de lumière */
.pc.is-selected {
  transform: translateY(-12%) scale(1.06);
  z-index: 2;
  box-shadow:
    inset 0 0 0 max(1.5px, calc(2 * var(--u))) var(--pc-lead),
    0 0 0 max(2px, calc(2.6 * var(--u))) var(--pc-gold-hi),
    0 0 calc(var(--w) * .28) calc(var(--w) * .05) rgba(255,214,120,.55),
    0 calc(var(--w) * .1) calc(var(--w) * .2) rgba(0,0,0,.45);
}
.pc.is-selected::after { opacity: 1; }

/* non jouable : le verre s'éteint (voile sombre, sans filtre) */
.pc.is-dim::after {
  opacity: 1; mix-blend-mode: normal;
  background: linear-gradient(180deg, rgba(12,10,20,.52), rgba(12,10,20,.62));
}
.pc.is-dim { box-shadow: inset 0 0 0 max(1.5px, calc(2 * var(--u))) var(--pc-lead), 0 1px 2px rgba(0,0,0,.3); }

/* gagnante : halo doré et un passage de lumière unique */
.pc.is-win {
  z-index: 1;
  box-shadow:
    inset 0 0 0 max(1.5px, calc(2 * var(--u))) var(--pc-lead),
    0 0 0 max(2px, calc(2.4 * var(--u))) var(--pc-gold),
    0 0 0 max(3px, calc(4 * var(--u))) rgba(40,28,8,.85),
    0 0 calc(var(--w) * .35) calc(var(--w) * .08) rgba(255,200,90,.7);
}
.pc.is-win::after {
  opacity: 1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,246,210,.7) 48%, rgba(255,230,160,.25) 56%, transparent 70%) 0 0 / 260% 100% no-repeat;
  background-position: 120% 0;
  animation: pc-shine 1.3s .15s cubic-bezier(.3,.6,.3,1) forwards;
}
@keyframes pc-shine { from { background-position: 120% 0; } to { background-position: -40% 0; } }

/* qui part : le verre s'éteint, se fêle, et la carte s'efface à moitié */
.pc.is-gone { animation: pc-gone .7s ease forwards; box-shadow: inset 0 0 0 max(1.5px, calc(2 * var(--u))) var(--pc-lead), 0 1px 2px rgba(0,0,0,.25); }
.pc.is-gone::after {
  opacity: 1; mix-blend-mode: normal;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 148' preserveAspectRatio='none'%3E%3Cpath d='M8 20 L34 52 L28 70 L52 86 L48 104 L74 124 L92 140' fill='none' stroke='%23ece3cb' stroke-opacity='.85' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M34 52 L58 46 M52 86 L70 80' fill='none' stroke='%23ece3cb' stroke-opacity='.6' stroke-width='1.1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(14,12,22,.45), rgba(14,12,22,.6));
}
@keyframes pc-gone { from { opacity: 1; } to { opacity: .5; } }

/* arrivée sur la table : la carte se pose et la lumière la traverse une fois */
.pc.is-fresh { animation: pc-drop .5s cubic-bezier(.2,1.3,.4,1); }
.pc.is-fresh::after { animation: pc-flash .9s ease-out; }
@keyframes pc-drop { from { transform: translateY(-30%) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pc-flash { 0%, 30% { opacity: .9; } 100% { opacity: 0; } }

/* ------------------------------------------------------------ carte retournable (animation) */

.pc-flip { position: relative; flex: 0 0 auto; perspective: 900px; }
.pc-flip-inner { position: relative; transform-style: preserve-3d; transform: rotateY(180deg); transition: transform .45s cubic-bezier(.3,.7,.2,1); }
.pc-flip.is-face .pc-flip-inner { transform: none; }
.pc-flip-face, .pc-flip-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pc-flip-back { position: absolute !important; left: 0; top: 0; transform: rotateY(180deg); }

/* ------------------------------------------------------------ aide : info-bulle et fiche */

.pc-help { display: flex; gap: 16px; align-items: flex-start; }
.pc-help-side { max-width: 260px; font-family: var(--font-body, Alegreya, system-ui, sans-serif); color: #f1e8d2; }
.pc-help-title { font-family: Cinzel, var(--font-display, Georgia), serif; font-size: 1.25rem; font-weight: 700; color: var(--pc-gold-hi); letter-spacing: .02em; }
.pc-help-color { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 8px; padding: 2px 10px 2px 4px; border-radius: 99px; font-size: .8rem; color: #fff; background: #555; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
.pc-help-color > .pc-sym { width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: var(--pc-grisaille); }
.pc-help-color .pc-pip { position: static; width: 18px; height: 18px; padding: 2px; box-shadow: none; gap: 1px; }
.pc-c-green { background: var(--pc-green); } .pc-c-yellow { background: var(--pc-yellow); color: var(--pc-lead); }
.pc-c-red { background: var(--pc-red); } .pc-c-blue { background: var(--pc-blue); }
.pc-c-all { background: linear-gradient(90deg, var(--pc-green) 0 25%, var(--pc-yellow) 0 50%, var(--pc-red) 0 75%, var(--pc-blue) 0); text-shadow: 0 0 3px #000; }
.pc-help-text { font-size: 1.05rem; line-height: 1.35; margin: 0 0 8px; }
.pc-help-kind { font-size: .88rem; opacity: .85; line-height: 1.3; }
.pc-help-note { font-size: .85rem; opacity: .8; margin: 8px 0 0; font-style: italic; }
.pc-tip {
  position: fixed; z-index: 1000; pointer-events: none; padding: 14px;
  background: rgba(18,15,12,.97); border: 1px solid rgba(240,200,105,.45);
  border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s;
}
.pc-tip.open { opacity: 1; transform: none; }
.pc-tip .pc-l { --w: 170px; }
.pc-sheet {
  position: fixed; inset: 0; z-index: 1001; display: none;
  background: rgba(5,4,8,.74);
  align-items: flex-end; justify-content: center;
}
.pc-sheet.open { display: flex; animation: pc-fade .2s; }
@keyframes pc-fade { from { opacity: 0; } }
.pc-sheet-inner {
  width: 100%; max-width: 560px; padding: 22px 18px calc(18px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #221c15, #120f0b); border-top: 1px solid rgba(240,200,105,.5);
  border-radius: 20px 20px 0 0; display: flex; flex-direction: column; gap: 16px;
  animation: pc-up .25s cubic-bezier(.2,.9,.3,1);
  max-height: 100dvh; overflow-y: auto;
}
@keyframes pc-up { from { transform: translateY(40%); } }
.pc-sheet .pc-help { flex-direction: column; align-items: center; text-align: center; }
.pc-sheet .pc-l { --w: min(240px, 62vw); }
.pc-sheet .pc-help-side { max-width: 420px; }
.pc-sheet-close {
  align-self: center; min-width: 160px; padding: 12px 18px; border-radius: 99px;
  border: 1px solid rgba(240,200,105,.6); background: transparent; color: var(--pc-gold-hi);
  font: inherit; font-size: 1rem; cursor: pointer;
}
@media (min-width: 700px) {
  .pc-sheet { align-items: center; }
  .pc-sheet-inner { border-radius: 20px; border: 1px solid rgba(240,200,105,.5); }
  .pc-sheet .pc-help { flex-direction: row; text-align: left; }
  .pc-sheet .pc-l { --w: 250px; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-flip-inner { transition: none; }
  .pc, .pc::after, .pc.is-fresh, .pc.is-fresh::after, .pc.is-win::after, .pc.is-gone { animation: none; transition: none; }
  .pc.is-gone { opacity: .5; }
  .pc.is-win::after { background-position: 50% 0; opacity: .5; }
}