/* Sole owner of lobby game cards. Parent shelves and portal tracks stay in arcade-library.css. */

#dice-arcade-lobby .dice-instant-arcade-game-tile {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  align-self: start;
  color: var(--dice-ds-strong);
  background: var(--dice-ds-surface);
  border: 1px solid var(--dice-ds-border);
  border-radius: var(--dice-ds-radius-card);
  font-family: var(--dice-font-body);
}

#dice-arcade-lobby .dice-instant-arcade-game-tile__media {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--dice-ds-radius-card) var(--dice-ds-radius-card) 0 0;
}

#dice-arcade-lobby .dice-instant-arcade-game-tile__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  transition: transform var(--dice-ds-image-duration) var(--dice-ds-ease);
}

#dice-arcade-lobby .dice-arcade-card-name {
  margin: 0;
  color: var(--dice-ds-strong);
  font: 700 var(--dice-ds-type-card)/1.25 var(--dice-font-display);
  text-transform: uppercase;
  overflow-wrap: anywhere;
  letter-spacing: var(--dice-ds-heading-tracking);
  line-height: var(--dice-ds-heading-leading);
  text-wrap: balance;
}

#dice-arcade-lobby .dice-instant-arcade-game-tile__copy {
  min-width: 0;
  padding: var(--dice-ds-space-3) var(--dice-ds-space-3) 0;
}

#dice-arcade-lobby .dice-instant-arcade-game-tile__copy > span {
  display: block;
  margin-top: var(--dice-ds-space-1);
  color: var(--dice-ds-muted);
  font: 700 var(--dice-ds-type-label)/1.5 var(--dice-font-display);
  text-transform: uppercase;
  letter-spacing: var(--dice-ds-label-tracking);
}

#dice-arcade-lobby .dice-instant-arcade-game-tile__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--dice-ds-control);
  gap: var(--dice-ds-space-2);
  padding: var(--dice-ds-space-3);
}

#dice-arcade-lobby .dice-instant-arcade-game-tile [data-arcade-game-info] {
  display: grid;
  place-items: center;
  width: var(--dice-ds-control);
  min-height: var(--dice-ds-control);
  padding: 0;
  color: var(--dice-ds-body);
  background: var(--dice-ds-raised);
  border: 1px solid var(--dice-ds-border);
  border-radius: var(--dice-ds-radius-control);
}

#dice-arcade-lobby .dice-instant-arcade-game-tile [data-arcade-game-info]:hover {
  color: var(--dice-ds-strong);
}

#dice-arcade-lobby .dice-instant-arcade-game-tile button:focus-visible {
  outline: 2px solid var(--dice-ds-focus);
  outline-offset: 2px;
}

#dice-arcade-lobby .dice-instant-arcade-game-tile .dice-card-favourite {
  position: absolute;
  inset: var(--dice-ds-space-2) var(--dice-ds-space-2) auto auto;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--dice-ds-body);
  border: 1px solid var(--dice-ds-border);
  width: var(--dice-ds-control);
  height: var(--dice-ds-control);
  border-radius: var(--dice-ds-radius-control);
  background: var(--dice-ds-surface);
}

#dice-arcade-lobby .dice-instant-arcade-game-tile--recent {
  height: 106px;
  grid-template-columns: 88px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 44px;
  gap: var(--dice-ds-space-1) var(--dice-ds-space-2);
  padding: var(--dice-ds-space-2);
}

#dice-arcade-lobby .dice-instant-arcade-game-tile--recent > img {
  width: 88px;
  height: 100%;
  grid-area: 1 / 1 / 3 / 2;
  object-fit: cover;
  border-radius: var(--dice-ds-radius-image);
}

#dice-arcade-lobby .dice-instant-arcade-game-tile--recent .dice-instant-arcade-game-tile__copy {
  grid-area: 1 / 2 / 3 / 3;
  padding: 0;
  overflow: hidden;
}

#dice-arcade-lobby .dice-instant-arcade-game-tile--recent .dice-arcade-card-name {
  font-size: var(--dice-ds-type-small);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

#dice-arcade-lobby .dice-instant-arcade-game-tile--recent em {
  display: block;
  color: var(--dice-ds-muted);
  font: 400 var(--dice-ds-type-label)/1.4 var(--dice-font-body);
}

#dice-arcade-lobby .dice-instant-arcade-game-tile--recent .dice-card-favourite {
  inset: var(--dice-ds-space-2) auto auto var(--dice-ds-space-2);
}

#dice-arcade-lobby .dice-instant-arcade-game-tile--recent [data-arcade-quickbuy] {
  position: relative;
  grid-area: 2 / 1;
  z-index: 1;
}

#dice-arcade-lobby .dice-instant-arcade-game-tile__progress {
  margin-top: var(--dice-ds-space-1);
}

#dice-arcade-lobby .dice-instant-arcade-game-tile__progress > span {
  display: block;
  height: var(--dice-ds-progress-height);
  border-radius: var(--dice-ds-track-radius);
  overflow: hidden;
  background: var(--dice-ds-border);
}

#dice-arcade-lobby .dice-instant-arcade-game-tile__progress i {
  display: block;
  width: clamp(0%,var(--arcade-card-progress,0%),100%);
  border-radius: inherit;
  height: 100%;
  background: var(--dice-ds-yellow);
}

#dice-arcade-lobby .dice-instant-arcade-game-tile__progress small {
  color: var(--dice-ds-muted);
  font: 400 var(--dice-ds-type-label)/1.4 var(--dice-font-body);
}

#dice-arcade-lobby .dice-instant-arcade-game-tile .dice-card-favourite::before,
#dice-arcade-lobby .dice-instant-arcade-game-tile .dice-card-favourite::after {
  content: none;
}

#dice-arcade-lobby .dice-instant-arcade-game-tile .dice-card-favourite .dice-card-icon {
  fill: none;
}

#dice-arcade-lobby .dice-instant-arcade-game-tile .dice-card-favourite[aria-pressed="true"] .dice-card-icon {
  fill: currentColor;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #dice-arcade-lobby .dice-instant-arcade-game-tile:not([aria-disabled="true"]):hover .dice-instant-arcade-game-tile__media img {
    transform: scale(var(--dice-ds-image-scale));
  }
}

/* Keep the primary action readable when a two-column mobile card is narrow. */
#dice-arcade-lobby .dice-instant-arcade-game-tile:not(.dice-instant-arcade-game-tile--recent) {
  container: dice-game-card / inline-size;
}

@container dice-game-card (max-width: 240px) {
  #dice-arcade-lobby .dice-instant-arcade-game-tile__actions {
    grid-template-columns: minmax(0, 1fr);
  }
  #dice-arcade-lobby .dice-instant-arcade-game-tile .dice-card-action {
    padding-inline: var(--dice-ds-space-2);
  }
  #dice-arcade-lobby .dice-instant-arcade-game-tile [data-arcade-game-info] {
    position: absolute;
    inset: var(--dice-ds-space-2) auto auto var(--dice-ds-space-2);
    height: var(--dice-ds-control);
    z-index: 2;
    background: var(--dice-ds-surface);
  }
}

@media(max-width:980px) {
 @container dice-game-card (max-width:220px) {
  #dice-arcade-lobby .dice-arcade-card-name { font-size:16px; line-height:1.2; letter-spacing:0; }
  #dice-arcade-lobby .dice-instant-arcade-game-tile__copy { padding:8px 8px 0; }
  #dice-arcade-lobby .dice-instant-arcade-game-tile__actions { padding:8px; }
  #dice-arcade-lobby .dice-instant-arcade-game-tile .dice-card-action { min-width:0; padding-inline:4px; font-size:13px; white-space:normal; text-align:center; }
 }
 #dice-arcade-lobby .dice-instant-arcade-game-tile--recent { height:auto; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; gap:8px; }
 #dice-arcade-lobby .dice-instant-arcade-game-tile--recent > img { grid-area:auto; width:100%; height:auto; aspect-ratio:16/9; }
 #dice-arcade-lobby .dice-instant-arcade-game-tile--recent .dice-instant-arcade-game-tile__copy { grid-area:auto; }
 #dice-arcade-lobby .dice-instant-arcade-game-tile--recent [data-arcade-quickbuy] { grid-area:auto; padding-inline:4px; }
}