/* C · crisp navy pixel cards. Loaded after the room theme and base stylesheet.
   Hand widths, ordering, selected states, and drag/drop feedback remain owned by
   the game layout. These rules only define the appearance inside each card. */
.card {
  --paper: #f8edcf;
  --paper-edge: #c9b88e;
  border: 1px solid #b9a981;
  border-radius: 0;
  background: var(--paper);
  box-shadow: 0 2px 0 #bdab80, 2px 3px 0 #112237b3;
  image-rendering: pixelated;
}
.card.face {
  color: #172e46;
  background: linear-gradient(90deg, #fff2d7 0%, #f8edcf 72%, #f2e4c5 100%);
}
.card.face.red { color: #b94b47; }
.card.face::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-top: 1px solid #fff8e2;
  border-left: 1px solid #fff8e2;
  border-right: 1px solid #cfbd962e;
  border-bottom: 1px solid #cfbd9645;
  pointer-events: none;
}
.card svg { pointer-events: none; }
.card .card-corner {
  left: 3.5%;
  top: 2.5%;
  width: 24%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  line-height: 1;
  z-index: 2;
  pointer-events: none;
}
.card .card-corner.bottom {
  left: auto;
  top: auto;
  right: 3.5%;
  bottom: 2.5%;
  transform: rotate(180deg);
}
.card .card-corner .rank-pixel {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 9;
  flex: 0 0 auto;
}
.card .card-corner .suit-pixel {
  display: block;
  width: 69%;
  height: auto;
  aspect-ratio: 1;
  flex: 0 0 auto;
  margin-top: -1px;
}
.card .pips {
  left: 28%;
  right: 28%;
  top: 12%;
  bottom: 12%;
  pointer-events: none;
}
.card .pips > span { width: 42%; }
.card .pips.ace > span { width: 94%; }
.card.face.royal .card-corner { background: var(--paper); }
.card .court {
  left: 16%;
  top: 6%;
  width: 68%;
  height: 88%;
  overflow: visible;
  pointer-events: none;
}
.card .meld-mark { height: 3px; background: #7a9c9d; z-index: 3; }
.card.meld-1 .meld-mark { background: #c09853; }
.card.meld-2 .meld-mark { background: #858aa9; }
.card.card-back,
.card.small.card-back {
  padding: 1px;
  background: #f5e8c9;
  border-color: #c6b68c;
}
.card .back-frame {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  outline-offset: 0;
  background: none;
}
.card .back-frame::before,
.card .back-frame::after { content: none; }
.card .card-back-art { display: block; width: 100%; height: 100%; }
.card.empty-card {
  background: #09203f2e;
  border: 1px dashed #b9ae8c75;
  box-shadow: none;
}
.card.empty-card::after { color: #bdc3b04a; }
/* Index columns remain prominent in result and verification miniatures. */
.card.small .card-corner { width: 25%; }
.card.small .card-corner .suit-pixel { width: 74%; }