/* Hero rating badge ("4.98 · 291 reviews") at the top of the homepage. */

.dshero .hr-badge {
  --acc: var(--cl-accent-rgb, 163, 191, 240);
  position: relative;
  isolation: isolate;
  gap: 10px;
  padding: 7px 12px 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(14, 14, 17, 0.55);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 30px -14px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
/* sheen across the pill */
.dshero .hr-badge::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  z-index: -1;
  width: 30%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: skewX(-20deg);
  animation: hr-sheen 6s 1.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hr-sheen { 0%, 70% { left: -40%; } 100% { left: 130%; } }

.dshero .hr-badge:hover {
  border-color: rgba(var(--acc), 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 34px -12px rgba(var(--acc), 0.55);
  transform: translateY(-1px);
}

.hr-stars { --star-size: 15px; filter: drop-shadow(0 0 6px rgba(var(--cl-accent-rgb, 163, 191, 240), 0.55)); }
.hr-badge:hover .hr-stars { animation: hr-twinkle 0.6s ease; }
@keyframes hr-twinkle { 50% { filter: drop-shadow(0 0 10px rgba(var(--cl-accent-rgb, 163, 191, 240), 0.95)); transform: scale(1.06); } }

.hr-score {
  font-family: var(--font-body, Urbanist, system-ui, sans-serif);
  font-size: 13.5px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.hr-sep { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.16); }
.hr-count {
  font-family: var(--font-body, Urbanist, system-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #b7b7bb);
  white-space: nowrap;
  transition: color 0.25s ease;
}
.hr-badge:hover .hr-count { color: #fff; }
.hr-arrow {
  width: 14px;
  height: 14px;
  margin-left: -2px;
  color: rgba(255, 255, 255, 0.45);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s ease;
}
.hr-badge:hover .hr-arrow { transform: translateX(3px); color: rgb(var(--cl-accent-rgb, 163, 191, 240)); }


/* =====================================================================
   Travelling border light ("orb") — works in every browser.
   A big conic gradient spins behind a mask that only shows a thin ring
   around the element's edge, so the light races around the outline.
   Usage: <span class="orb"><i></i></span> inside any positioned element.
   ===================================================================== */
.orb {
  --orb-w: 1px;
  --orb-c: var(--cl-accent-rgb, 163, 191, 240);
  --orb-dur: 4s;
  position: absolute;
  inset: 0;
  z-index: 5;
  padding: var(--orb-w);
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.orb i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(300%, 600px);
  aspect-ratio: 1;
  background: conic-gradient(from 0deg,
    transparent 0deg 250deg,
    rgba(var(--orb-c), 0.15) 290deg,
    rgba(var(--orb-c), 0.9) 340deg,
    #fff 356deg,
    transparent 360deg);
  animation: orb-spin var(--orb-dur) linear infinite;
}
@keyframes orb-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ---------- Video showcase frame ---------- */
.dshero-window .orb--video { --orb-w: 2px; --orb-dur: 3.5s; z-index: 6; }
/* two lights, exactly opposite each other, chasing round the frame */
.orb--video i, .orb--halo i {
  background: conic-gradient(from 0deg,
    transparent 0deg 70deg,
    rgba(var(--orb-c), 0.15) 110deg,
    rgba(var(--orb-c), 0.9) 160deg,
    #fff 176deg,
    transparent 180deg 250deg,
    rgba(var(--orb-c), 0.15) 290deg,
    rgba(var(--orb-c), 0.9) 340deg,
    #fff 356deg,
    transparent 360deg);
}
/* soft glow that follows the same light, just outside the frame */
.dshero-halo {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  width: min(1080px, 100%);
  aspect-ratio: 16 / 9;
  transform: translateX(-50%);
  border-radius: clamp(14px, 1.4vw, 20px);
  filter: blur(14px);
  opacity: 0.9;
  pointer-events: none;
}
.dshero-halo .orb--halo { --orb-w: 6px; --orb-dur: 3.5s; inset: -4px; border-radius: inherit; }

/* ---------- "Choose your game" button ---------- */
.dshero .dshero-btn {
  gap: 14px;
  padding: 8px 8px 8px 24px;
  border-radius: 16px;
  font-size: 15.5px;
  letter-spacing: -0.005em;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 85%, #fff 15%), var(--accent) 60%, color-mix(in srgb, var(--accent) 80%, #6f8fd6 20%));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -6px 14px -8px rgba(0, 0, 0, 0.3),
    0 10px 24px -12px rgba(var(--accent-rgb), 0.75);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, filter 0.3s ease;
}
.dshero .dshero-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -6px 14px -8px rgba(0, 0, 0, 0.3),
    0 16px 30px -12px rgba(var(--accent-rgb), 0.85);
}
.dshero-btn__label { position: relative; z-index: 1; }
.dshero .dshero-btn .arrow {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #0f0f12;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 10px -4px rgba(0, 0, 0, 0.6);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dshero .dshero-btn .arrow svg path { fill: var(--accent); }
.dshero .dshero-btn:hover .arrow { transform: rotate(-10deg) scale(1.08); }

/* ---------- Showcase video: hide YouTube's own title/channel bar ----------
   YouTube always overlays the video title + channel/subscribers at the top of an
   embed on hover (it can't be turned off any more). Making the player 128px taller
   than the frame adds 64px letterbox bands above and below the video; those bands
   hold YouTube's top bar and bottom control bar and sit outside the frame, so the
   video still fills the frame exactly and the overlays are hidden. */
.dshero-window .dshero-yt {
  top: -64px !important;
  right: auto !important;
  bottom: auto !important;
  left: 0 !important;
  height: calc(100% + 128px) !important;
  width: 100% !important;
}