/* Sobrecarga - Cards, the game log, the scoreboard and the round summary. */
/* ---------- Cards ---------- */
.card{
  --cw:var(--card-w);
  width:var(--cw);height:calc(var(--cw)*1.4);
  flex:0 0 auto;position:relative;border-radius:var(--r);
  border:1px solid #30303a;background:linear-gradient(162deg,#22222c,#14141a);
  box-shadow:0 7px 16px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);
  display:grid;place-items:center;overflow:hidden;
  font-family:var(--font-mono);padding:0;text-align:center;
  user-select:none;transition:transform .16s,box-shadow .16s,border-color .16s;
}
.card.sm{--cw:var(--card-w-sm)}
button.card{cursor:pointer}
button.card:hover,button.card:focus-visible{
  transform:translateY(calc(-1 * var(--lift)));border-color:var(--red);
  box-shadow:0 16px 26px rgba(0,0,0,.6),0 0 0 1px var(--red-dim),0 0 26px rgba(255,34,51,.3);
  outline:none;
}
/* number card */
.num-card .num{
  font-family:var(--font-display);font-size:calc(var(--cw)*.62);line-height:1;
  color:#f2f2f5;text-shadow:0 0 14px rgba(255,34,51,.35),0 2px 0 #000;
}
.num-card::before{
  content:"";position:absolute;inset:5px;border-radius:6px;
  border:1px solid rgba(255,255,255,.05);
}
.num-card .corner{
  position:absolute;font-size:calc(var(--cw)*.15);color:var(--red-soft);opacity:.85;
  font-weight:700;
}
.num-card .corner.tl{top:4px;left:6px}
.num-card .corner.br{bottom:4px;right:6px;transform:rotate(180deg)}
.card.sm .corner{display:none}
/* action card */
.act-card{
  background:#06060a;border-color:#2b2b34;
  grid-template-rows:auto 1fr;align-content:stretch;padding:7px 4px 6px;
}
.act-card .act-title{
  display:block;font-size:calc(var(--cw)*.115);letter-spacing:.01em;color:var(--red);
  text-transform:uppercase;white-space:nowrap;line-height:1.1;font-weight:700;
}
.act-card .act-icon{
  width:66%;height:auto;aspect-ratio:1;color:var(--red);
  filter:drop-shadow(0 0 7px rgba(255,34,51,.5));align-self:center;justify-self:center;
}
.card.sm .act-title{font-size:calc(var(--cw)*.125);letter-spacing:-.03em}
.card.sm .act-icon{width:74%}
/* card back: overloaded circuit */
.card.back{
  background:
    radial-gradient(circle at 50% 50%,rgba(255,34,51,.16),transparent 58%),
    repeating-linear-gradient(90deg,transparent 0 8px,rgba(255,255,255,.05) 8px 9px),
    repeating-linear-gradient(0deg,transparent 0 8px,rgba(255,255,255,.035) 8px 9px),
    linear-gradient(160deg,#181820,#0c0c10);
  border-color:#2d2d36;
}
.card.back::before{
  content:"";position:absolute;inset:4px;border-radius:6px;
  border:1px solid rgba(255,34,51,.18);
}
.card.back::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(45deg,transparent 46%,rgba(255,34,51,.22) 49% 51%,transparent 54%),
    linear-gradient(-45deg,transparent 46%,rgba(255,34,51,.14) 49% 51%,transparent 54%);
  opacity:.6;
}
.card.back .chip{
  width:42%;height:auto;aspect-ratio:1;color:var(--red);z-index:1;
  filter:drop-shadow(0 0 9px var(--red));
}