/* SmileDice v6.3.16 — ROYALE Game Cards
   A visual-only replacement. Keeps .game-card, data-game, IDs, and click handlers.
   Scoped to home page #games-grid so the rest of the theme is untouched. */
#games-grid{
  align-items:stretch;
  column-gap:clamp(11px,1vw,20px);
  row-gap:clamp(15px,1.2vw,24px);
}
#games-grid .game-card,#games-grid .game-card:nth-child(n){
  --royal-accent:#e7b967;
  --royal-edge:#c3984f;
  --royal-rgb:225,173,82;
  position:relative;
  display:block;
  width:100%;
  height:auto;
  min-width:0;
  aspect-ratio:1.1 / 1;
  padding:0;
  margin:0;
  overflow:hidden;
  border:1.5px solid transparent;
  border-radius:17px;
  text-align:left;
  isolation:isolate;
  background:
    linear-gradient(160deg,#101629,#060b18 80%) padding-box,
    linear-gradient(148deg,rgba(255,239,192,.9) 0%,var(--royal-edge) 18%,#3f3e54 42%,#141d32 66%,var(--royal-edge) 100%) border-box;
  box-shadow:0 11px 22px rgba(1,3,15,.45),0 0 0 1px rgba(236,193,119,.10),0 0 18px rgba(var(--royal-rgb),.06);
  transform:translateZ(0);
  transition:transform .28s cubic-bezier(.15,.8,.3,1),box-shadow .28s,border-color .28s;
  -webkit-tap-highlight-color:transparent;
}
#games-grid .game-card:nth-child(1){--royal-accent:#f8d786;--royal-edge:#eebd67;--royal-rgb:242,188,96}
#games-grid .game-card:nth-child(2){--royal-accent:#f7b087;--royal-edge:#b98166;--royal-rgb:251,136,91}
#games-grid .game-card:nth-child(3){--royal-accent:#dac8ff;--royal-edge:#af86de;--royal-rgb:186,128,255}
#games-grid .game-card:nth-child(4){--royal-accent:#f6b4ed;--royal-edge:#b77cba;--royal-rgb:247,126,225}
#games-grid .game-card:nth-child(5){--royal-accent:#9ae8ff;--royal-edge:#5baed1;--royal-rgb:85,191,250}
#games-grid .game-card:nth-child(6){--royal-accent:#b2efff;--royal-edge:#5ba5d7;--royal-rgb:71,183,235}
#games-grid .game-card:nth-child(7){--royal-accent:#ffdba3;--royal-edge:#ddaa65;--royal-rgb:247,174,82}
#games-grid .game-card:nth-child(8){--royal-accent:#c8c0ff;--royal-edge:#8c91d5;--royal-rgb:146,140,247}
#games-grid .game-card:nth-child(9){--royal-accent:#a0ffde;--royal-edge:#65bba8;--royal-rgb:75,228,177}
#games-grid .game-card:nth-child(10){--royal-accent:#ffd5aa;--royal-edge:#d5a36b;--royal-rgb:242,160,100}
/* inset metal filament: visible on every side, like framed game artwork */
#games-grid .game-card::before{
  display:block;
  content:"";
  position:absolute;
  inset:5px;
  z-index:8;
  pointer-events:none;
  border:1px solid rgba(246,216,157,.34);
  border-radius:12px;
  background:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 16px rgba(2,5,18,.26);
}
#games-grid .game-card::after{
  display:block;
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4;
  border-radius:inherit;
  background:
    linear-gradient(125deg,rgba(255,255,255,.17),transparent 19%,transparent 74%,rgba(var(--royal-rgb),.10)),
    radial-gradient(ellipse at 50% 16%,rgba(var(--royal-rgb),.06),transparent 60%);
}
#games-grid .game-card .game-art{
  display:block;
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;height:100%;
  border-radius:0;
  min-height:0;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 34%,rgba(var(--royal-rgb),.16),transparent 63%),#080e1e;
}
#games-grid .game-card .game-art img{
  display:block;
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:var(--royal-image-position,center 34%);
  aspect-ratio:auto;
  border:0;
  border-radius:0;
  transform:scale(var(--royal-zoom,1.10));
  transform-origin:center 40%;
  filter:saturate(.79) brightness(.74) contrast(1.14);
  transition:transform .44s cubic-bezier(.18,.77,.21,1),filter .44s;
}
#games-grid .game-card[data-game="Crash"]{--royal-image-position:64% 40%}
#games-grid .game-card[data-game="Mines"]{--royal-image-position:54% 36%}
#games-grid .game-card[data-game="Tower"]{--royal-image-position:53% 38%}
#games-grid .game-card[data-game="Plinko"]{--royal-image-position:50% 35%}
#games-grid .game-card .game-art::before{
  display:block;content:"";
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 25%,transparent 16%,rgba(5,9,21,.13) 60%,rgba(2,5,14,.67) 100%),
    linear-gradient(180deg,rgba(4,7,19,.4) 0%,transparent 31%,rgba(5,8,19,.25) 44%,rgba(4,7,17,.92) 77%,#050916 100%);
  opacity:1;
}
#games-grid .game-card .game-art::after{
  display:block;content:"";
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,9,20,.27),transparent 33%,transparent 66%,rgba(6,9,20,.18));
  opacity:1;
}
#games-grid .game-card .royale-topline{
  display:flex;
  position:absolute;
  z-index:7;
  left:17px;top:16px;
  align-items:center;
  gap:4px;
  font-size:clamp(8px,.67vw,11px);
  font-weight:900;
  letter-spacing:.13em;
  color:#fff3d0;
  text-shadow:0 1px 8px #030513;
  white-space:nowrap;
}
#games-grid .game-card .royale-brand-mark{
  color:var(--royal-accent);
  margin-right:2px;
  font-size:12px;
  filter:drop-shadow(0 0 7px rgba(var(--royal-rgb),.7));
}
#games-grid .game-card .royale-series{
  color:rgba(255,255,255,.53);
  font-size:clamp(7px,.54vw,9px);
  font-weight:700;
  letter-spacing:.1em;
}
#games-grid .game-card .game-badge{
  position:absolute;
  z-index:10;
  left:auto;right:14px;top:13px;
  height:24px;min-width:46px;
  border-radius:7px;
  border:1px solid rgba(255,247,195,.95);
  padding:0 9px;
  font-size:10px;
  font-weight:950;
  letter-spacing:.06em;
  color:#1c180b;
  background:linear-gradient(180deg,#fff3aa,#f5c85f 61%,#bd862d);
  box-shadow:0 3px 13px #050815a6,0 0 12px rgba(255,204,105,.40),inset 0 1px rgba(255,255,255,.78);
}
#games-grid .game-card .game-meta{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:6;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  gap:7px;
  width:100%;height:auto;
  min-width:0;min-height:0;
  box-sizing:border-box;
  padding:55px 15px 17px 17px;
  background:linear-gradient(180deg,transparent 0%,rgba(4,8,20,.48) 25%,rgba(3,6,16,.94) 77%,rgba(4,8,19,.98) 100%);
  border:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}
#games-grid .game-card .game-name{
  display:block;
  position:static;
  max-width:calc(100% - 36px);
  margin:0;padding:0;
  color:#fffaf4;
  font-size:clamp(17px,1.1vw,23px);
  font-weight:900;
  line-height:1.06;
  letter-spacing:-.045em;
  text-shadow:0 2px 14px rgba(0,0,0,.9);
}
#games-grid .game-card .game-sub{
  display:flex;
  align-items:center;
  gap:4px;
  max-width:calc(100% - 34px);
  color:rgba(234,239,253,.85);
  font-size:clamp(10px,.75vw,12px);
  font-weight:600;
  line-height:1.2;
  letter-spacing:.005em;
}
#games-grid .game-card .game-sub i,
#games-grid .game-card:not(.playable) .game-sub i{
  display:inline-block;
  flex:0 0 auto;
  width:6px;height:6px;
  margin-right:4px;
  border-radius:100%;
  background:#8d9dbd;
  box-shadow:0 0 9px rgba(160,174,220,.35);
}
#games-grid .game-card.playable .game-sub i{
  background:#2affbc;
  box-shadow:0 0 12px #23efc3a6;
}
#games-grid .game-card .royale-arrow{
  display:grid;
  place-items:center;
  position:absolute;
  z-index:7;
  bottom:17px;right:15px;
  width:27px;height:27px;
  border-radius:9px;
  border:1px solid rgba(251,223,166,.55);
  background:rgba(236,193,114,.15);
  color:#ffebba;
  font-size:17px;
  font-weight:800;
  line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
#games-grid .game-card .royale-arrow-soon{
  color:rgba(197,205,227,.53);
  border-color:rgba(169,183,218,.22);
  background:rgba(21,27,51,.39);
  font-size:15px;
}
#games-grid .game-card:hover{
  transform:translateY(-5px);
  border-color:rgba(255,238,182,.98);
  box-shadow:0 19px 40px rgba(1,3,14,.63),0 0 1px 1px rgba(var(--royal-rgb),.20),0 0 22px rgba(var(--royal-rgb),.22);
}
#games-grid .game-card:hover .game-art img{
  transform:scale(calc(var(--royal-zoom,1.10) + .065));
  filter:saturate(.92) brightness(.84) contrast(1.13);
}
#games-grid .game-card:focus-visible{outline:3px solid #5dffdd;outline-offset:4px}
#games-grid .game-card:active{transform:translateY(-1px)}
@media(max-width:1100px){
  #games-grid .game-card,#games-grid .game-card:nth-child(n){border-radius:14px}
  #games-grid .game-card::before{inset:4px;border-radius:10px}
  #games-grid .game-card .royale-topline{top:12px;left:12px;font-size:8px}
  #games-grid .game-card .royale-series{font-size:7px}
  #games-grid .game-card .game-meta{padding:40px 11px 13px}
  #games-grid .game-card .game-name{font-size:clamp(14px,1.5vw,19px)}
  #games-grid .game-card .royale-arrow{width:22px;height:22px;right:10px;bottom:12px;font-size:14px}
  #games-grid .game-card .game-badge{top:10px;right:10px;min-width:40px;height:20px;font-size:9px;padding:0 7px}
}
@media(max-width:650px){
  #games-grid{gap:11px}
  #games-grid .game-card,#games-grid .game-card:nth-child(n){aspect-ratio:1 / 1.05;border-radius:14px}
  #games-grid .game-card .royale-topline{top:12px;left:12px;font-size:9px;letter-spacing:.07em}
  #games-grid .game-card .royale-series{display:none}
  #games-grid .game-card .game-meta{padding:43px 12px 16px}
  #games-grid .game-card .game-name{font-size:clamp(16px,4.2vw,20px)}
  #games-grid .game-card .game-sub{font-size:10px}
  #games-grid .game-card .royale-arrow{right:12px;bottom:14px}
  #games-grid .game-card .game-badge{top:10px;right:10px}
}
@media(prefers-reduced-motion:reduce){
  #games-grid .game-card,#games-grid .game-card .game-art img{transition:none!important}
}


/* ================================================================
   SmileDice v6.3.16 COSMIC MATCH — card-only palette correction
   Matches the original website navy / indigo / violet / mint theme.
   All routing, game click events, HTML layout, and data remain intact.
   ================================================================ */
#games-grid .game-card,#games-grid .game-card:nth-child(n){
  --royal-accent:#b9c8ff;
  --royal-edge:#536ac5;
  --royal-rgb:94,119,230;
  border:1.5px solid transparent;
  background:
    linear-gradient(155deg,#131f43 0%,#090f27 75%,#071123 100%) padding-box,
    linear-gradient(140deg,#9d7fff 0%,#4865c6 25%,#25447a 57%,#31dac3 100%) border-box;
  box-shadow:
    0 12px 27px rgba(0,3,20,.43),
    0 0 0 1px rgba(89,116,213,.17),
    0 0 20px rgba(92,76,218,.09);
}
/* Two subtle hue families, not ten mismatched gold/copper frames. */
#games-grid .game-card:nth-child(2n){
  --royal-accent:#9dece8;
  --royal-edge:#378db8;
  --royal-rgb:46,205,207;
  background:
    linear-gradient(155deg,#112341 0%,#091129 80%) padding-box,
    linear-gradient(143deg,#64c6e9 0%,#4264bf 26%,#263b76 59%,#27d6bc 100%) border-box;
}
#games-grid .game-card:nth-child(3n){
  --royal-accent:#d3b7ff;
  --royal-edge:#7758d6;
  --royal-rgb:151,99,244;
  background:
    linear-gradient(155deg,#1a1846 0%,#0a112c 80%) padding-box,
    linear-gradient(143deg,#b283f5 0%,#6654c7 28%,#2d458b 65%,#38c7db 100%) border-box;
}
#games-grid .game-card.playable{
  --royal-accent:#8affea;
  --royal-edge:#45e9d3;
  --royal-rgb:48,235,198;
  background:
    linear-gradient(155deg,#102a40 0%,#08122e 83%) padding-box,
    linear-gradient(135deg,#a578ff 0%,#5476e1 36%,#25f0c4 100%) border-box;
  box-shadow:0 12px 28px rgba(0,3,22,.48),0 0 0 1px rgba(56,229,210,.13),0 0 22px rgba(58,239,205,.14);
}
#games-grid .game-card::before{
  border-color:rgba(131,156,246,.34);
  box-shadow:inset 0 1px 0 rgba(223,237,255,.23),inset 0 0 17px rgba(4,8,29,.24);
}
#games-grid .game-card.playable::before{border-color:rgba(87,234,219,.40)}
#games-grid .game-card::after{
  background:linear-gradient(125deg,rgba(195,202,255,.13),transparent 22%,transparent 76%,rgba(var(--royal-rgb),.10)),
  radial-gradient(ellipse at 51% 12%,rgba(94,87,248,.10),transparent 56%);
}
#games-grid .game-card .game-art{
  background:radial-gradient(ellipse at 50% 34%,rgba(118,89,248,.16),transparent 66%),#09112d;
}
#games-grid .game-card .game-art img{
  filter:saturate(1.04) brightness(.96) contrast(1.055);
}
#games-grid .game-card .game-art::before{
  background:
    radial-gradient(ellipse at 50% 24%,transparent 30%,rgba(7,12,38,.12) 70%,rgba(6,10,30,.49) 100%),
    linear-gradient(180deg,rgba(5,10,32,.23) 0%,transparent 33%,rgba(7,11,32,.07) 47%,rgba(7,11,30,.82) 80%,#070d21 100%);
}
#games-grid .game-card .game-art::after{
  background:linear-gradient(90deg,rgba(8,13,39,.14),transparent 33%,transparent 66%,rgba(8,13,39,.12));
}
#games-grid .game-card .royale-topline{
  color:#f5f6ff;
  text-shadow:0 1px 9px rgba(2,5,25,.85);
}
#games-grid .game-card .royale-brand-mark{
  color:#52f2e2;
  filter:drop-shadow(0 0 6px rgba(72,240,219,.62));
}
#games-grid .game-card .royale-series{
  color:rgba(187,211,255,.76);
}
#games-grid .game-card .game-badge,#games-grid .game-card .game-badge.game-badge-new{
  color:#073629;
  border-color:rgba(173,255,227,.9);
  background:linear-gradient(180deg,#aaffea 0%,#38f4c4 54%,#17cfae 100%);
  box-shadow:0 3px 12px rgba(0,6,30,.65),0 0 12px rgba(39,245,195,.28),inset 0 1px 0 rgba(255,255,255,.55);
}
#games-grid .game-card .game-meta{
  background:linear-gradient(180deg,transparent 0%,rgba(8,14,37,.30) 25%,rgba(8,13,33,.92) 78%,#080e27 100%);
}
#games-grid .game-card .game-name{color:#f7f9ff;text-shadow:0 2px 13px rgba(2,5,24,.92)}
#games-grid .game-card .game-sub{color:rgba(205,220,249,.92)}
#games-grid .game-card .game-sub i,
#games-grid .game-card:not(.playable) .game-sub i{background:#788dbf;box-shadow:0 0 8px rgba(92,123,208,.31)}
#games-grid .game-card.playable .game-sub i{background:#2ff2c1;box-shadow:0 0 10px rgba(38,238,190,.78)}
#games-grid .game-card .royale-arrow{
  color:#c0fff1;
  border-color:rgba(83,237,214,.55);
  background:rgba(27,141,149,.18);
  box-shadow:inset 0 1px 0 rgba(173,255,255,.12),0 0 10px rgba(23,197,195,.09);
}
#games-grid .game-card .royale-arrow-soon{
  color:rgba(165,185,232,.78);
  border-color:rgba(113,140,219,.34);
  background:rgba(23,38,85,.42);
}
#games-grid .game-card:hover{
  border-color:transparent;
  box-shadow:0 19px 40px rgba(1,3,24,.57),0 0 1px 1px rgba(var(--royal-rgb),.19),0 0 26px rgba(var(--royal-rgb),.26);
}
#games-grid .game-card:hover .game-art img{
  filter:saturate(1.10) brightness(1.035) contrast(1.06);
}


/* =====================================================================
   SmileDice v6.3.16 — approved original visual, pixel-accurate cards.
   Each .game-card retains its data-game, button semantics and JS events.
   Art is cropped LOSSLESSLY from the actual user-approved reference.
   Visual only — no wallet, login, Supabase, wager or gameplay changes.
   ===================================================================== */
#games-grid {
  align-items: stretch;
  gap: clamp(11px, 1.15vw, 20px);
}
#games-grid .game-card,
#games-grid .game-card:nth-child(n),
#games-grid .game-card.playable {
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 300 / 377 !important;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
  border: 0 !important;
  border-radius: 17px !important;
  background: #080e24 !important;
  box-shadow: 0 9px 20px rgba(0, 4, 22, .38), 0 0 12px rgba(60, 121, 246, .13) !important;
  isolation: isolate;
  transform: translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease !important;
}
#games-grid .game-card::before,
#games-grid .game-card::after,
#games-grid .game-card .game-art::before,
#games-grid .game-card .game-art::after {
  display: none !important;
  content: none !important;
}
#games-grid .game-card .game-art {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden;
  background: none !important;
}
#games-grid .game-card .game-art img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: fill !important;
  object-position: center center !important;
  transform: none !important;
  transform-origin: center !important;
  filter: none !important;
  opacity: 1 !important;
  border: 0 !important;
  border-radius: 0 !important;
  transition: none !important;
}
/* Text, badges and icons are embedded in the approved reference artwork.
   Original semantic labels and status markup remain in the HTML. */
#games-grid .game-card .royale-topline,
#games-grid .game-card .game-meta,
#games-grid .game-card .royale-arrow,
#games-grid .game-card .game-badge { display: none !important; }
#games-grid .game-card:hover,
#games-grid .game-card.playable:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0, 4, 22, .55), 0 0 16px rgba(58, 192, 249, .28) !important;
}
#games-grid .game-card:hover .game-art img { transform: none !important; filter: none !important; }
#games-grid .game-card:active { transform: translateY(-1px); }
#games-grid .game-card:focus-visible {
  outline: 3px solid #42f6dd !important;
  outline-offset: 3px;
}
@media (max-width: 650px) {
  #games-grid { gap: 10px; }
  #games-grid .game-card, #games-grid .game-card:nth-child(n) {
    aspect-ratio: 300 / 377 !important;
    border-radius: 14px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  #games-grid .game-card { transition: none !important; }
}