/* Cards: real 5:7 proportions in three sizes plus pips, and the draw pile. */

/* Real card proportions, 5:7. The face is the only bright thing on screen. */
.c{position:relative;width:34px;height:48px;border-radius:6px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.68),transparent 32%),
    linear-gradient(180deg,rgba(255,255,255,.3),rgba(246,226,178,.2)),
    var(--bone);
  color:#16241D;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.15rem;line-height:1;font-variant-numeric:tabular-nums;
  box-shadow:0 4px 10px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.7) inset,
    inset 0 0 0 1px rgba(0,0,0,.08)}
.c::before{content:"";position:absolute;inset:3px;border-radius:4px;
  border:1px solid currentColor;opacity:.22}
.c .pv{position:absolute;top:2px;left:3px;font-size:.36rem;font-weight:800;
  opacity:.55;letter-spacing:0}
.c.mid .pv{font-size:.44rem;top:3px;left:4px}
.c.big .pv{font-size:.56rem;top:5px;left:6px}
.c.pip .pv,.c.act .pv{display:none}
.c.mid{width:46px;height:64px;font-size:1.5rem;border-radius:7px}
.c.big{width:60px;height:84px;font-size:2.05rem;border-radius:8px}
.c.pip{width:17px;height:24px;font-size:.62rem;border-radius:3px;box-shadow:none}
.c.pip::before{inset:1.5px;border-radius:2px}
.c b{position:absolute;bottom:5px;left:0;right:0;text-align:center;
  font-size:.44rem;letter-spacing:.09em;font-weight:700;opacity:.5;
  text-transform:uppercase}
.c.mid b{font-size:.4rem;bottom:4px}
.c:not(.big) b{display:none}

/* the printed deck colour-codes its action cards, so this one does too */
.c.mod{background:linear-gradient(180deg,#FFE38A,#EFB84D);color:#4A3405;font-size:.95rem}
.c.mid.mod{font-size:1.2rem} .c.big.mod{font-size:1.5rem}
.c.pip.mod{font-size:.58rem}
.c.pip.act{font-size:.52rem;padding:0;letter-spacing:0}
.c.freeze{background:linear-gradient(180deg,#8FD4FF,var(--blue));color:#08182F}
.c.flip3{background:linear-gradient(180deg,#FFE08B,#EDBE4A);color:#3D2C04}
.c.second{background:linear-gradient(180deg,#FF9993,var(--red));color:#2E0A08}
.c.flip4{background:linear-gradient(180deg,#FFAA6D,#D9793D);color:#3A1B02}
.c.justonemore{background:linear-gradient(180deg,#C4B5FD,#8B6FCE);color:#241246}
.c.swap{background:linear-gradient(180deg,#89E5C3,#4FAF8B);color:#062C1F}
.c.steal{background:linear-gradient(180deg,#EA8293,#B5495B);color:#33060C}
.c.discard{background:linear-gradient(180deg,#A7AFBD,#6B7280);color:#1A1D22}
.c.special.unlucky7{box-shadow:0 0 0 2px var(--red),0 2px 3px var(--shade),
    0 1px 0 rgba(255,255,255,.5) inset,inset 0 0 0 1px rgba(0,0,0,.07)}
.c.special.lucky13{box-shadow:0 0 0 2px #E9B44C,0 2px 3px var(--shade),
    0 1px 0 rgba(255,255,255,.5) inset,inset 0 0 0 1px rgba(0,0,0,.07)}
.c.act{font-size:.5rem;font-weight:800;letter-spacing:.02em;text-align:center;
  padding:0 2px;line-height:1.15}
.c.mid.act{font-size:.6rem} .c.big.act{font-size:.72rem}
.c.dead{opacity:.55;box-shadow:0 0 0 2px var(--red),0 2px 3px var(--shade)}
.c.dead::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(to top right,transparent 46%,var(--red) 46%,
    var(--red) 54%,transparent 54%)}
.c.ghost{background:transparent;border:1px dashed var(--line);box-shadow:none;
  color:var(--line)}
.c.ghost::before{display:none}
.c.off{background:transparent;box-shadow:none;color:#2E5041;
  border:1px solid var(--line2)}
.c.off::before{display:none}
/* Vengeance's Swap/Steal/Discard: a live tap target on the card itself. The
   ring is the static fallback under prefers-reduced-motion; motion.css
   layers a looping pulse on top when motion is allowed. */
.c.pickable{cursor:pointer;box-shadow:0 0 0 2px rgba(233,180,76,.9),
    0 2px 3px var(--shade),0 1px 0 rgba(255,255,255,.5) inset,
    inset 0 0 0 1px rgba(0,0,0,.07)}
/* Opponent hands render at pip size (17x24), too small a target for a real
   Swap/Steal/Discard tap - grow it toward .mid only while it is actually
   live, so the rest of the felt stays dense. */
.c.pip.pickable{width:27px;height:38px;font-size:.78rem}
.c.pip.pickable.mod{font-size:.7rem}
.c.pip.pickable.act{font-size:.56rem}

.hand{display:flex;flex-wrap:wrap;gap:5px}
.hand.big{gap:6px}
.hand:empty{display:none}

/* the draw pile, drawn as a real stack with a printed card-back lattice */
.deck{position:relative;width:36px;height:50px;flex:0 0 auto}
.deck i{position:absolute;inset:0;border-radius:7px;background:#2C5142;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.deck i:nth-child(1){transform:translate(3px,3px);opacity:.45}
.deck i:nth-child(2){transform:translate(1.5px,1.5px);opacity:.7}
.deck i:nth-child(3){background:
    repeating-linear-gradient(45deg,rgba(233,180,76,.16) 0 3px,transparent 3px 9px),
    repeating-linear-gradient(-45deg,rgba(233,180,76,.16) 0 3px,transparent 3px 9px),
    linear-gradient(180deg,#3E725E,#244A3C)}
.deck i:nth-child(3)::after{content:"";position:absolute;inset:5px;
  border-radius:3px;border:1px solid rgba(233,180,76,.55)}
.deck.low i:nth-child(3){filter:saturate(.7) brightness(.9)}