/* CodeOmaha - Lotería · card faces (shared by TV and phone). Everything scales with the card's width. */
.lcard {
  position: relative; container-type: inline-size; display: flex; flex-direction: column;
  aspect-ratio: 5 / 7; background: #f6eedb; color: #1c1917;
  border: .35em solid #1c1917; border-radius: .5em; box-shadow: inset 0 0 0 .18em #f6eedb, inset 0 0 0 .32em #7c3aed;
  overflow: hidden; user-select: none;
}
.lnum { position: absolute; top: 3cqw; left: 5cqw; font: 800 13cqw/1 'Outfit', system-ui, sans-serif; z-index: 1; }
.lart { flex: 1; display: flex; align-items: center; justify-content: center; padding: 12cqw 7cqw 0; min-height: 0; }
.lart svg { width: 100%; height: 100%; display: block; }
.lname {
  flex: none; text-align: center; font: 800 11.5cqw/1.1 'Outfit', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .02em;
  padding: 3cqw 3cqw 6cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* pattern icon: 4x4 dots */
.picon { display: inline-grid; grid-template-columns: repeat(4, 1fr); gap: .14em; width: 1.6em; height: 1.6em; vertical-align: middle; }
.picon i { border-radius: .08em; background: rgba(255, 255, 255, .16); }
.picon i.on { background: #a78bfa; }
.lname.long { font-size: 9.2cqw; padding-top: 4.3cqw; }

/* player avatar: photo or initial; size with font-size */
.avatar { display: inline-grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; flex: none; object-fit: cover; color: #fff; font-weight: 800; font-family: 'Outfit', system-ui, sans-serif; line-height: 1; background: #3f3f46; box-shadow: 0 0 0 .1em rgba(255, 255, 255, .15); }