/* SmileDice v25.12.23 — high-resolution game-card artwork only.
   The existing fit stylesheet owns card dimensions, grid columns and breakpoints.
   This stylesheet restores crisp, accessible HTML labels on top of the new artwork.
   No Dice/gameplay/account logic is changed. */

/* The new artwork contains imagery only, so the old image-embedded labels are restored as HTML. */
#games-grid .game-card .royale-topline {
  display: flex !important;
  align-items: center !important;
  position: absolute !important;
  z-index: 7 !important;
  left: 11px !important;
  top: 10px !important;
  gap: 4px !important;
  font-size: clamp(8px, .62vw, 10px) !important;
  font-weight: 900 !important;
  letter-spacing: .065em !important;
  white-space: nowrap !important;
  color: #f7fcff !important;
  text-shadow: 0 1px 6px #01051e, 0 0 11px #01051e !important;
}
#games-grid .game-card .royale-series {
  display: inline !important;
  font-size: .83em !important;
  color: #e3f1ff !important;
  letter-spacing: .055em !important;
}
#games-grid .game-card .royale-brand-mark {
  font-size: 12px !important;
  color: #2ef8df !important;
  filter: drop-shadow(0 0 6px #17e8f7) !important;
}

#games-grid .game-card .game-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  position: absolute !important;
  z-index: 6 !important;
  inset: auto 0 0 !important;
  width: 100% !important;
  gap: 3px !important;
  padding: 33px 11px 9px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  background: linear-gradient(180deg, transparent, rgba(3,8,28,.66) 38%, #05091ddf 82%, #04091deb) !important;
  pointer-events: none !important;
}
#games-grid .game-card .game-name {
  display: block !important;
  font-size: clamp(15px, 1.15vw, 21px) !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  color: #fff !important;
  text-shadow: 0 1px 6px #03051b, 0 0 8px #000c !important;
}
#games-grid .game-card .game-sub {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: clamp(9px, .72vw, 11px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: #e8f4ff !important;
  text-shadow: 0 1px 4px #050b23 !important;
}
#games-grid .game-card .game-sub i,
#games-grid .game-card:not(.playable) .game-sub i {
  width: 6px !important;
  height: 6px !important;
  margin: 0 2px 0 0 !important;
  background: #43dcec !important;
  box-shadow: 0 0 8px #2dbaff !important;
}
#games-grid .game-card.playable .game-sub i {
  background: #35ffd6 !important;
  box-shadow: 0 0 8px #30ffe4 !important;
}
#games-grid .game-card .royale-arrow {
  display: grid !important;
  place-items: center !important;
  position: absolute !important;
  z-index: 7 !important;
  width: 28px !important;
  height: 28px !important;
  right: 10px !important;
  bottom: 9px !important;
  border: 1px solid #27d9f0b8 !important;
  border-radius: 50% !important;
  background: #0a2143d9 !important;
  box-shadow: 0 0 8px #11bffb83, inset 0 0 8px #247c9e !important;
  color: #eaffff !important;
  font-size: 16px !important;
}
#games-grid .game-card .game-badge,
#games-grid .game-card .game-badge.game-badge-new {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  right: 10px !important;
  top: 8px !important;
  z-index: 7 !important;
  min-width: 38px !important;
  height: 20px !important;
  padding: 0 5px !important;
  border: 1px solid #a4ffe7 !important;
  border-radius: 6px !important;
  background: linear-gradient(#9dfff0, #10e8be) !important;
  color: #063a39 !important;
  font-size: 9px !important;
  font-weight: 950 !important;
}

/* Clean neon outline: only a visual layer, not an extra box in the grid. */
#games-grid .game-card::before {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 8 !important;
  border: 2px solid #388fff !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  box-shadow: inset 0 0 5px #37deff8a, 0 0 4px #23b8ff4f !important;
}
#games-grid .game-card.playable::before {
  border-color: #34e6fb !important;
  box-shadow: inset 0 0 8px #3beaff9c, 0 0 5px #12ffc173 !important;
}

@media (max-width: 1090px) {
  #games-grid .game-card .royale-topline { font-size: 9px !important; }
  #games-grid .game-card .game-name { font-size: clamp(15px, 1.7vw, 21px) !important; }
}
@media (max-width: 650px) {
  #games-grid .game-card .royale-topline { top: 8px !important; left: 9px !important; font-size: 8px !important; gap: 2px !important; }
  #games-grid .game-card .royale-series { display: none !important; }
  #games-grid .game-card .royale-brand-mark { font-size: 10px !important; }
  #games-grid .game-card .game-meta { padding: 27px 9px 8px !important; gap: 2px !important; }
  #games-grid .game-card .game-name { font-size: clamp(15px, 4vw, 19px) !important; }
  #games-grid .game-card .game-sub { font-size: 9px !important; }
  #games-grid .game-card .royale-arrow { width: 22px !important; height: 22px !important; right: 8px !important; bottom: 8px !important; font-size: 13px !important; }
  #games-grid .game-card .game-badge { right: 8px !important; top: 7px !important; }
}