/* cards.css — card fronts and backs. Loaded by the table and the lobby.
 *
 * FERRO's faces are ported from ferro-server's stylesheet (server.js, the .pcard rules). FERRO
 * sizes them in em off a 10px font on a 36px-wide card; here each face sits in a .face box whose
 * font-size is that same share of the card's width (27.78cqw), so every rule keeps its FERRO value
 * and the face scales with whatever size the card is drawn at. */

/* ---------- the card itself, for pages without the table's stylesheet (the lobby) ----------
 * :where() keeps these at the lowest weight so every front and back below still wins. */
:where(.cards-pick) .card{
  position:absolute; border-radius:6px; background:linear-gradient(160deg,#fffdf7,#f3ecdc);
  box-shadow:0 2px 0 rgba(0,0,0,.15), 0 6px 14px rgba(0,0,0,.35);
  font-family:"Bodoni Moda", Didot, Georgia, serif; color:#16130f;
}
:where(.cards-pick) .card.red{color:#b3202a}
:where(.cards-pick) .card .idx{position:absolute;left:5px;top:3px;line-height:.95;text-align:center;font-weight:700}
:where(.cards-pick) .card .idx b{display:block;font-size:22px}
:where(.cards-pick) .card .idx i{display:block;font-style:normal;font-size:15px}
:where(.cards-pick) .card .pip{position:absolute;left:12px;right:0;top:50%;transform:translateY(-46%);text-align:center;font-size:40px;line-height:1}
:where(.cards-pick) .card .court{position:absolute;left:21px;right:6px;top:7px;bottom:7px;border:1.5px solid currentColor;border-radius:3px;display:grid;place-items:center;
  background:repeating-linear-gradient(135deg, rgba(0,0,0,.035) 0 3px, transparent 3px 6px)}
:where(.cards-pick) .card .court span{font-size:28px;font-weight:700;line-height:1}
:where(.cards-pick) .card .court em{position:absolute;bottom:2px;font-style:normal;font-size:12px}
:where(.cards-pick) .card.facedown{
  background:repeating-linear-gradient(45deg, rgba(201,164,92,.55) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(201,164,92,.55) 0 1px, transparent 1px 7px), #8e1b22;
  border:3px solid #f6efe0;
}

.card, .back { container-type: size; }   /* cqw only works INSIDE a card, never on the card's own properties */
.card .face{
  position:absolute; inset:0; font-size:27.78cqw; line-height:1;
  display:flex; align-items:center; justify-content:center;
  font-family:"IBM Plex Mono", ui-monospace, "Courier New", monospace; font-weight:700;
}

/* ---------- FERRO base face (white, bright red) — French, Standard ---------- */
.card.front-french, .card.front-standard { background:#fdfdfb; border:1px solid rgba(0,0,0,.15); }
.card.front-french.red, .card.front-standard.red { color:#e0202a; }
.card.front-french.black, .card.front-standard.black { color:#16181a; }
.card .pcard-corner{position:absolute; display:flex; flex-direction:column; align-items:center; line-height:1; font-size:.62em; font-weight:800;}
.card .pcard-corner-tl{top:.34em; left:.34em;}
.card .pcard-corner-tr{top:.34em; right:.34em;}
.card .pcard-corner-bl{bottom:.34em; left:.34em; transform:rotate(180deg);}
.card .pcard-corner-br{bottom:.34em; right:.34em; transform:rotate(180deg);}
.card .pcard-corner-suit{margin-top:.08em; font-size:.85em;}
.card .pcard-face{position:absolute; left:23%; right:23%; top:13%; bottom:13%;}
.card .pcard-pip{position:absolute; transform:translate(-50%,-50%); line-height:1; font-size:1.02em;}
.card .pcard-pip.inv{transform:translate(-50%,-50%) rotate(180deg);}
.card .pcard-pip.ace{font-size:2.4em;}
/* French courts: ruled panel with the diagonal, a mirrored emblem over the pip either side of it */
.card .pcard-court{position:absolute; left:4.5%; right:4.5%; top:3.5%; bottom:3.5%; overflow:hidden; border-radius:.12em; display:flex; flex-direction:column;
  border:1px solid rgba(0,0,0,.55); box-shadow:inset 0 0 0 .06em rgba(201,162,75,.8);
  background-image:linear-gradient(135deg, transparent calc(50% - .55px), rgba(0,0,0,.45) calc(50% - .55px), rgba(0,0,0,.45) calc(50% + .55px), transparent calc(50% + .55px));}
.card .pcard-court-half{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;}
.card .pcard-court-half.inv{transform:rotate(180deg);}
.card .pcard-court-emblem{font-size:1.15em; color:#c9a24b; line-height:1;}
.card .pcard-court-pip{font-size:.95em; margin-top:.04em;}

/* ---------- Standard (FERRO option 3): two bigger corners, pip faces, court figure ---------- */
.card.front-standard .pcard-corner{font-size:.78em;}
.card.front-standard .pcard-corner-tl{top:.2em; left:.24em;}
.card.front-standard .pcard-corner-br{bottom:.2em; right:.24em;}
.card.front-standard .pcard-face{left:26%; right:26%; top:9%; bottom:9%;}
.card.front-standard .pcard-pip{font-size:.95em;}
.card.front-standard .pcard-court{left:14%; right:14%; top:10%; bottom:6%; align-items:center; justify-content:flex-end;
  background-image:none; border:1px solid rgba(0,0,0,.35); box-shadow:none;}
.card.front-standard.red .pcard-court{background-color:rgba(224,32,42,.05);}
.card.front-standard.black .pcard-court{background-color:rgba(22,24,26,.04);}
.card.front-standard .pcard-court-svg{width:100%; height:100%; display:block;}

/* ---------- FERRO classic: parchment, two corners, rank over suit in the middle ---------- */
.card.front-ferro{background:#f2ead8; border:1px solid rgba(0,0,0,.15);}
.card.front-ferro.red{color:#a3312a;}
.card.front-ferro.black{color:#1c2321;}
.card.front-ferro .pcard-corner{font-size:.88em;}
.card.front-ferro .pcard-corner-tl{top:.2em; left:.2em;}
.card.front-ferro .pcard-corner-br{bottom:.2em; right:.2em;}
.card.front-ferro .pcard-corner-suit{margin-top:.1em; font-size:1em;}
.card .pcard-center{display:flex; flex-direction:column; align-items:center; line-height:1;}
.card .pcard-center-rank{font-size:1.18em; font-weight:800;}
.card .pcard-center-suit{font-size:1.73em; margin-top:.1em;}

/* ---------- Four-colour (FERRO v60–v62): the face is the suit colour ---------- */
.card.front-four{color:#fff; border:1px solid rgba(255,255,255,.9); border-radius:14% / 10%; background:#1b1c1e;}
.card.front-four[data-suit="H"]{background:#9b2226;}
.card.front-four[data-suit="D"]{background:#2a5fa5;}
.card.front-four[data-suit="S"]{background:#1b1c1e;}
.card.front-four[data-suit="C"]{background:#2b7a4b;}
.card.front-four .pcard-corner{font-size:1.4em; flex-direction:column; align-items:flex-start; gap:0;}
.card.front-four .pcard-corner-tl{top:.06em; left:.12em;}
.card.front-four .pcard-corner-suit{margin-top:.02em; margin-left:.06em; font-size:.75em;}
/* the big number sits in the middle of the card horizontally (Rany, v9); its height stays where FERRO had it */
.card .pcard-big-rank{position:absolute; left:0; right:0; bottom:4%; text-align:center; line-height:.86; font-weight:800; font-size:2.5em; color:#fff; letter-spacing:-.02em;}
.card.front-four.wide-rank .pcard-big-rank{font-size:2.3em; letter-spacing:-.05em;}

/* the table's glow for picked / best cards still shows on the coloured faces */
.card.front-four.sel, .card.front-four.best{border-color:#f0d99a;}

/* ================= backs =================
 * .back = an opponent's small face-down card, .card.facedown = a closed board card.
 * Oxblood (the Oakmont back) is the default in table.css; the others override it here. */
html[data-back="navy"] .back, html[data-back="navy"] .card.facedown, .swatch[data-back="navy"] .card.facedown{   /* FERRO's back */
  background-color:#0d3f7a;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.17) 0 3px,transparent 3px 12px),
                   repeating-linear-gradient(-45deg,rgba(255,255,255,.17) 0 3px,transparent 3px 12px);
  border-color:#e8dcc0;
}
html[data-back="felt"] .back, html[data-back="felt"] .card.facedown, .swatch[data-back="felt"] .card.facedown{
  background:radial-gradient(ellipse at 50% 40%, #2b7a4c, #1d5637 60%, #12402a);
  border-color:#f6efe0; box-shadow:inset 0 0 0 2px #12402a, inset 0 0 0 3px #c9a45c, 0 3px 8px rgba(0,0,0,.45);
}
html[data-back="felt"] .back::after, html[data-back="felt"] .card.facedown::after, .swatch[data-back="felt"] .card.facedown::after{
  content:"O"; position:absolute; inset:0; display:grid; place-items:center;
  font-family:"DM Serif Display", Georgia, serif; font-size:52cqw; color:#c9a45c; opacity:.9;
}
html[data-back="noir"] .back, html[data-back="noir"] .card.facedown, .swatch[data-back="noir"] .card.facedown{
  background:
    radial-gradient(closest-side circle at 50% 50%, rgba(201,164,92,.6) 0 22%, transparent 25%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(201,164,92,.32) 0 5deg, transparent 5deg 15deg),
    radial-gradient(ellipse at 50% 50%, #2a2622, #0e0d0c 75%);
  border-color:#c9a45c; box-shadow:inset 0 0 0 2px #0e0d0c, inset 0 0 0 3px rgba(201,164,92,.7), 0 3px 8px rgba(0,0,0,.5);
}
html[data-back="ivory"] .back, html[data-back="ivory"] .card.facedown, .swatch[data-back="ivory"] .card.facedown{
  background:
    repeating-linear-gradient(45deg, rgba(142,27,34,.55) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(142,27,34,.55) 0 1px, transparent 1px 5px),
    #f4ecd8;
  border-color:#fbf6ea; box-shadow:inset 0 0 0 2px #f4ecd8, inset 0 0 0 3px #8e1b22, 0 3px 8px rgba(0,0,0,.45);
}
.back, .card.facedown { position:absolute; }

/* ================= the picker (table Setup tab and lobby) ================= */
.deck-row{display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap}
.deck-opt{
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:5px 5px 4px; border-radius:7px;
  background:none; border:1px solid transparent; color:inherit; font:inherit; cursor:pointer;
}
.deck-opt:hover{border-color:rgba(201,164,92,.5)}
.deck-opt[aria-pressed="true"]{border-color:#c9a45c; background:rgba(201,164,92,.14)}
.deck-opt .swatch{position:relative; display:block}
.deck-opt .swatch .card, .deck-opt .swatch .back{position:absolute; top:0; transform-origin:0 0}
.deck-opt small{font-size:12px; font-weight:600; letter-spacing:.06em; white-space:nowrap}

/* a swatch shows its own back even when the page uses another one */
.swatch[data-back="oxblood"] .card.facedown{
  background:repeating-linear-gradient(45deg, rgba(201,164,92,.55) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(201,164,92,.55) 0 1px, transparent 1px 7px), #8e1b22;
  border:3px solid #f6efe0; box-shadow:0 3px 8px rgba(0,0,0,.45);
}
.swatch[data-back="oxblood"] .card.facedown::after{content:none}
.deck-label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.7;width:38px;align-self:center}