/* ==========================================================
   SLOT DECK PAGE (after style.css + leaderboard.css, which give
   the shared navy background, fonts, pills, buttons and diamonds).
   The deck and the cards themselves are styled in style.css.
   ========================================================== */

/* ---------- Title ---------- */
.sd-hero { padding-top: 40px; }
/* same as the Rewards title: Anton in normal case, solid white on a crystal-blue edge */
.sd-title {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(56px, 9vw, 96px);
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: none;
  background: none;
  color: #f2fbff;
  filter: none;
  text-shadow: 0 3px 0 #1a5fc0, 0 6px 14px rgba(0, 0, 0, 0.55);
  position: relative;
  isolation: isolate;   /* keeps the crown behind the letters but in front of the page */
}
/* the gold crown tossed onto the S, bobbing like the KLEO logo's (logo-crown in style.css) */
.sd-s { position: relative; display: inline-block; }
.sd-crown {
  position: absolute;
  left: -0.18em;
  top: -0.31em;
  width: 0.56em;
  height: auto;
  z-index: -1;   /* behind the S, so the letter covers the crown's rim */
  pointer-events: none;
  rotate: -14deg;
  filter: drop-shadow(0 0.06em 0.08em rgba(0, 0, 0, 0.45)) drop-shadow(0 0 0.14em rgba(245, 197, 66, 0.5));
  animation: logo-crown 4.5s ease-in-out infinite;
}
/* every 5s a band of white-to-crystal light sweeps across the letters (a copy of the text on top,
   filled only where the band is) */
.sd-title::after {
  content: attr(data-text);
  content: attr(data-text) / "";   /* decorative: not read out twice */
  position: absolute;
  inset: 0;
  pointer-events: none;
  text-shadow: none;
  color: transparent;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.95) 48%, rgba(143, 227, 255, 0.9) 52%, transparent 62%) no-repeat;
  background-size: 280% 100%;
  background-position: 140% 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: sd-sweep 5s ease-in-out 1s infinite;
}
@keyframes sd-sweep {
  0% { background-position: 140% 0; }
  30%, 100% { background-position: -40% 0; }
}
.sd-name { max-width: none; font-size: clamp(17px, 2.4vw, 21px); letter-spacing: 0.16em; margin-top: 2px; }
body.sd .lb-pill { padding: 8px 14px; cursor: default; }
body.sd .lb-pill:hover { transform: none; box-shadow: inset 0 0 0 1px var(--lb-line); }
body.sd .lb-pill b { color: var(--brand); font-weight: 800; }

body.sd .provider-filter { padding-top: 26px; }

/* ---------- The card table ---------- */
.sd-table {
  position: relative;
  margin-top: 18px;
  padding: 34px 28px 30px;
  border-radius: 32px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 38%, rgba(76, 201, 255, 0.16), transparent 70%),
    radial-gradient(ellipse at 50% 30%, #12396a 0%, #0b2547 48%, #071630 100%);
  box-shadow:
    inset 0 0 0 1.5px #2a5fb8,                 /* dark-blue rail (was gold) */
    inset 0 0 0 9px rgba(4, 9, 19, 0.55),
    inset 0 0 0 10px rgba(42, 95, 184, 0.45),
    inset 0 40px 90px -30px rgba(0, 0, 0, 0.55),
    0 40px 70px -40px rgba(0, 0, 0, 0.95);
  isolation: isolate;
}
/* soft felt grain */
.sd-table::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 5px);
  opacity: 0.5;
  pointer-events: none;
}
body.sd .deck-stage { padding: 0; gap: clamp(36px, 10vw, 120px); align-items: flex-start; }
.sd-spot-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(143, 227, 255, 0.85);
}
body.sd .deck-count { color: var(--lb-soft); font-size: 13px; font-weight: 600; }
.sd-hint { opacity: 0.8; }
body.sd .reveal-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 2px dashed rgba(76, 201, 255, 0.32);
  background: rgba(4, 9, 19, 0.35);
  color: rgba(234, 246, 255, 0.55);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
body.sd .reveal-empty svg { color: rgba(76, 201, 255, 0.55); }

/* ---------- Buttons ---------- */
.sd-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.sd-draw {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #4d8dff 0%, #2563eb 50%, #1a47c2 100%);   /* sapphire, like the home buttons */
  color: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(30, 80, 220, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -2px 0 rgba(8, 25, 90, 0.6);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background 0.18s ease;
}
.sd-draw:hover { transform: translateY(-2px); background: linear-gradient(180deg, #6aa1ff 0%, #3474f2 50%, #1f52d1 100%); box-shadow: 0 14px 30px -10px rgba(30, 80, 220, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -2px 0 rgba(8, 25, 90, 0.6); }
.sd-draw:active { transform: translateY(1px) scale(0.97); }
.sd-draw:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.sd-draw:disabled { cursor: not-allowed; filter: grayscale(1) brightness(0.6); transform: none; }
.sd-shuffle { min-width: 0; padding: 14px 22px; color: var(--brand); }

/* ---------- Riffle shuffle: temporary card backs over the deck ---------- */
.deck.riffling .deck-card { opacity: 0; }
.deck.riffling { cursor: progress; }
.deck-ghost {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background:
    repeating-linear-gradient(45deg, rgba(76, 201, 255, 0.07) 0 2px, transparent 2px 16px),
    repeating-linear-gradient(-45deg, rgba(76, 201, 255, 0.07) 0 2px, transparent 2px 16px),
    radial-gradient(circle at 50% 40%, #16365e, #0a1830 70%);
  box-shadow: inset 0 0 0 1px rgba(76, 201, 255, 0.35), inset 0 0 0 8px rgba(6, 13, 26, 0.6),
    inset 0 0 0 9px rgba(76, 201, 255, 0.25), 0 6px 14px -6px rgba(0, 0, 0, 0.7);
  will-change: transform;
}
.deck-ghost.has-logo { display: grid; place-items: center; }
.deck-ghost.has-logo::after {
  content: "";
  width: 72%;
  aspect-ratio: 2 / 1;
  background: url("/assets/kleo-logo-sm.webp") center / contain no-repeat;
  filter: drop-shadow(0 6px 14px rgba(76, 201, 255, 0.35));
}
/* a sweep of light over the top card when the shuffle lands */
.deck-card.top { overflow: hidden; }
.deck-card.top::before {
  content: "";
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(105deg, transparent 40%, rgba(200, 240, 255, 0.55) 50%, transparent 60%);
  translate: -100% 0;
  pointer-events: none;
}
.deck.glint .deck-card.top::before { animation: sd-glint 0.8s ease-out; }
@keyframes sd-glint { to { translate: 100% 0; } }
@media (max-width: 720px) { .deck-ghost { border-radius: 12px; } }

/* ---------- The drawn card with the slot's own artwork ---------- */
/* The art keeps its own shape (it already shows the game's logo), framed by the
   provider colour, with the Play button in the strip underneath. */
.card-front.has-art { justify-content: flex-end; gap: 0; padding: 0 12px 11px; }
.card-art {
  position: absolute;
  top: 13px;
  left: 13px;
  width: calc(100% - 26px);
  height: auto;
  aspect-ratio: 180 / 236;
  object-fit: cover;
  border-radius: 11px;
  z-index: 1;
  background: rgba(4, 9, 19, 0.35);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28), 0 10px 22px -10px rgba(0, 0, 0, 0.8);
}
.card-front.has-art > :not(.card-art) { position: relative; z-index: 2; }
.card-front.has-art .card-name, .card-front.has-art .card-note, .card-front.has-art .card-provider {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.card-front.has-art .card-corner {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(4, 9, 19, 0.6);
  font-size: 0.72rem;
}
.card-front.has-art .card-corner.bottom { display: none; }
.card-front.has-art .card-provider {
  position: absolute;
  top: 21px;
  right: 20px;
  max-width: 62%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.6rem;
  padding: 4px 8px;
  background: rgba(4, 9, 19, 0.6);
}
.card-front.has-art .card-play { padding: 8px 18px; font-size: 0.85rem; }
@media (max-width: 720px) {
  .card-front.has-art { padding: 0 6px 6px; }
  .card-art { top: 7px; left: 7px; width: calc(100% - 14px); border-radius: 8px; }
  .card-front.has-art .card-corner { top: 11px; left: 11px; font-size: 0.6rem; padding: 2px 4px; }
  .card-front.has-art .card-provider { display: none; }
  .card-front.has-art .card-play { padding: 4px 10px; font-size: 0.66rem; gap: 4px; }
  .card-front.has-art .card-play svg { width: 11px; height: 11px; }
}

/* ---------- Recently drawn: mini playing cards ---------- */
.sd-history-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sd-history-count { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--lb-soft); }
/* six cards across the full width, one per draw kept */
body.sd .history {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 18px);
  padding: 10px 4px 22px;
}
.mini-card, .mini-empty {
  position: relative;
  min-width: 0;
  aspect-ratio: 5 / 7;
  border-radius: 14px;
}
.mini-empty {
  display: grid;
  place-items: center;
  border: 2px dashed rgba(76, 201, 255, 0.22);
  background: rgba(4, 9, 19, 0.35);
  color: var(--lb-soft);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  line-height: 1.35;
}
.mini-empty + .mini-empty { opacity: 0.6; }
.mini-empty + .mini-empty + .mini-empty { opacity: 0.4; }
.mini-empty + .mini-empty + .mini-empty + .mini-empty { opacity: 0.25; }
.mini-empty + .mini-empty + .mini-empty + .mini-empty + .mini-empty { opacity: 0.16; }
.mini-empty + .mini-empty + .mini-empty + .mini-empty + .mini-empty + .mini-empty { opacity: 0.1; }
.mini-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 11px 11px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(160deg, #4cc9ff, #1a6fd6 55%, #0a2a5c);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 16px 28px -16px rgba(0, 0, 0, 0.9);
  rotate: var(--tilt, 0deg);
  transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1), rotate 0.25s ease, box-shadow 0.25s ease;
}
.mini-card[data-provider="other"] {
  background: linear-gradient(160deg, hsl(var(--hue) 85% 62%), hsl(calc(var(--hue) + 25) 70% 34%) 55%, hsl(calc(var(--hue) + 40) 65% 16%));
}
.mini-card[data-provider="pragmatic"] { background: linear-gradient(160deg, #ffb347, #ff5e3a 45%, #8f0f37); }
.mini-card[data-provider="hacksaw"] { background: linear-gradient(160deg, #3a3a3a, #121212 60%, #000); }
.mini-card[data-provider="nolimit"] { background: linear-gradient(160deg, #7b3cff, #2f0e7a 55%, #0b6b5a); }
/* same glassy sheen as the big card */
.mini-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.3) 47%, rgba(255, 255, 255, 0.06) 53%, transparent 65%) 0 0 / 300% 100% no-repeat,
    radial-gradient(circle at 25% 10%, rgba(255, 255, 255, 0.3), transparent 45%);
  animation: glass-sweep 6s ease-in-out infinite;
  pointer-events: none;
}
.mini-card:hover, .mini-card:focus-visible {
  transform: translateY(-10px) scale(1.04);
  rotate: 0deg;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 22px 34px -16px hsl(var(--hue, 200) 80% 50% / 0.8);
  outline: none;
}
.mini-card:focus-visible { box-shadow: 0 0 0 3px var(--brand), 0 22px 34px -16px rgba(0, 0, 0, 0.9); }
.mc-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mc-num { font-size: 11px; font-weight: 800; opacity: 0.85; }
.mc-latest {
  padding: 2px 7px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mc-name {
  margin-top: auto;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mc-prov {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-card[data-provider="hacksaw"] .mc-prov { color: #f5f544; opacity: 1; }
.mc-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 6px;
  padding: 6px 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  font-size: 11px;
  font-weight: 800;
  transition: background-color 0.2s ease;
}
.mini-card:hover .mc-play { background: rgba(255, 255, 255, 0.32); }
/* mini cards with artwork: picture fills the card, text sits on a fade */
.mc-art {
  position: absolute;
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  object-fit: cover;
  border-radius: 10px;
  z-index: 0;
}
.mini-card.has-art { padding: 8px; }
.mini-card.has-art > :not(.mc-art) { position: relative; z-index: 2; }
/* the art already shows the name, so the text stays for screen readers only */
.mini-card.has-art .mc-name, .mini-card.has-art .mc-prov {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.mini-card.has-art .mc-num { padding: 2px 5px; border-radius: 6px; background: rgba(4, 9, 19, 0.6); }
.mini-card.has-art .mc-play {
  margin-top: auto;
  align-self: flex-end;
  padding: 4px 9px;
  background: rgba(4, 9, 19, 0.6);
  opacity: 0;
  translate: 0 4px;
  transition: opacity 0.2s ease, translate 0.2s ease;
}
.mini-card.has-art:hover .mc-play, .mini-card.has-art:focus-visible .mc-play { opacity: 1; translate: 0 0; }
@media (hover: none) { .mini-card.has-art .mc-play { opacity: 1; translate: 0 0; } }

/* newest card is dealt in from the left */
.mini-card.is-new { animation: sd-deal 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
@keyframes sd-deal { from { opacity: 0; transform: translate(-40px, -30px) rotate(-14deg) scale(0.85); } }

.sd-hero > *, .sd-table { animation: lb-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.sd-table { animation-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .sd-hero > *, .sd-table, .mini-card.is-new, .mini-card::after, .deck.glint .deck-card.top::before, .sd-crown, .sd-title::after { animation: none; }
  .sd-draw:hover, .mini-card:hover { transform: none; }
}

/* ---------- Phone ---------- */
@media (max-width: 720px) {
  .sd-hero { padding-top: 22px; }
  .sd-table { padding: 24px 14px 22px; border-radius: 24px; }
  body.sd .deck-stage { gap: 14px; }
  body.sd .reveal-empty { font-size: 12.5px; gap: 10px; }
  body.sd .reveal-empty svg { width: 32px; height: 32px; }
  .sd-actions { flex-direction: column; align-items: stretch; margin-top: 22px; }
  .sd-draw, .sd-shuffle { justify-content: center; }
  body.sd .history { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mc-name { font-size: 13.5px; }
}