/* Cards look the same everywhere (Shaun, 2026-10-23: "yes same everywhere. articles too"): every card drawn outside the
   game table wears the table's faces (style.css .card): a cream face with red and black pips (classic), blue diamonds and
   green clubs (four-color), or solid suit faces (color), by <html data-cards> (assets/card-faces.js). The game table's own
   .card isn't touched here. Big cards (Practice's table, the replayer, Learn) also take the table's layout: the rank in
   the corner, a big pip in the middle. Backs are the table's red. */
html[data-cards]{
  --cf-face:linear-gradient(160deg,#fefcf7 0%,#f5f0e8 100%);
  --cf-bg-s:var(--cf-face);--cf-bg-h:var(--cf-face);--cf-bg-d:var(--cf-face);--cf-bg-c:var(--cf-face);
  --cf-s:#1a1a2e;--cf-h:#c0392b;--cf-d:#c0392b;--cf-c:#1a1a2e;
  --cf-back:linear-gradient(150deg,#7a2419 0%,#4e1008 100%);
  --cf-shadow:0 0 0 1px rgba(0,0,0,.18),1px 2px 6px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-cards="four-color"]{--cf-d:#1565c0;--cf-c:#1b5e20}
html[data-cards="color"]{
  --cf-bg-s:linear-gradient(150deg,#2c3e60 0%,#1a2540 100%);--cf-bg-h:linear-gradient(150deg,#c0392b 0%,#8b1a10 100%);
  --cf-bg-d:linear-gradient(150deg,#1565c0 0%,#0d3d7a 100%);--cf-bg-c:linear-gradient(150deg,#2e7d32 0%,#1b4d1e 100%);
  --cf-s:#e8ecf5;--cf-h:#fff5f5;--cf-d:#e8f4ff;--cf-c:#edfaee;
  --cf-shadow:0 0 0 1px rgba(0,0,0,.35),1px 2px 6px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.18);
}
/* Every card, by suit: Practice/Learn tables (.gt-card), Learn (.l-card), Study (.gtow-card, .gtow-pcard), Analyze and the
   articles' spots (.hr-card.hr-s-*), the articles' blocks and the odds calculator (.acd-*), My Hands (.mh-card), Muck
   Tracker (.mst-c), the replayer's panel (.rpl-c) */
html[data-cards] :is(.gt-card.suit-s,.l-card.suit-s,.gtow-card.suit-s,.gtow-pcard.suit-s,.hr-card.hr-s-s,.acd.acd-s,.mh-card,.mst-c.su-s,.rpl-c--s){background:var(--cf-bg-s);color:var(--cf-s);box-shadow:var(--cf-shadow)}
html[data-cards] :is(.gt-card.suit-h,.l-card.suit-h,.gtow-card.suit-h,.gtow-pcard.suit-h,.hr-card.hr-s-h,.acd.acd-h,.mh-card.mh-card--h,.mst-c.su-h,.rpl-c--h){background:var(--cf-bg-h);color:var(--cf-h);box-shadow:var(--cf-shadow)}
html[data-cards] :is(.gt-card.suit-d,.l-card.suit-d,.gtow-card.suit-d,.gtow-pcard.suit-d,.hr-card.hr-s-d,.acd.acd-d,.mh-card.mh-card--d,.mst-c.su-d,.rpl-c--d){background:var(--cf-bg-d);color:var(--cf-d);box-shadow:var(--cf-shadow)}
html[data-cards] :is(.gt-card.suit-c,.l-card.suit-c,.gtow-card.suit-c,.gtow-pcard.suit-c,.hr-card.hr-s-c,.acd.acd-c,.mh-card.mh-card--c,.mst-c.su-c,.rpl-c--c){background:var(--cf-bg-c);color:var(--cf-c);box-shadow:var(--cf-shadow)}
html[data-cards] :is(.gt-card,.l-card,.hr-card,.acd,.mh-card,.rpl-c) :is(b,i){color:inherit;opacity:1}
/* Backs */
html[data-cards] :is(.gt-card.back,.l-card.back,.mh-card.mh-card--back,.hr-card.asp-back){background:var(--cf-back);border:0;box-shadow:0 0 0 1px rgba(0,0,0,.4),1px 2px 6px rgba(0,0,0,.55)}
/* Big cards: the table's layout, the rank in the corner and the pip in the middle, sized to the card */
html[data-cards] :is(.gt-card,.l-card:not(.sm):not(.xs)):not(.slot):not(.back){position:relative;display:block;container-type:size;padding:0;border:0;border-radius:6px}
html[data-cards] :is(.gt-card,.l-card:not(.sm):not(.xs)):not(.slot):not(.back) b{position:absolute;top:5%;left:8%;margin:0;font-size:30cqh;font-weight:900;line-height:1;letter-spacing:-1px}
html[data-cards] :is(.gt-card,.l-card:not(.sm):not(.xs)):not(.slot):not(.back) i{position:absolute;top:58%;left:50%;margin:0;transform:translate(-50%,-50%);font-size:46cqw;font-style:normal;line-height:1}