/* ufa7s - black / gold (volt) / ruby (iris), matched to the logo */
:root { --u7-volt: #f5c542; --u7-iris: #e0242f; --u7-card: #1a0d0c; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background-color: #0a0505;
  background-image:
    radial-gradient(60rem 30rem at 85% -10%, rgba(224, 36, 47, .16), transparent 60%),
    radial-gradient(40rem 24rem at -10% 20%, rgba(245, 197, 66, .07), transparent 60%);
  background-attachment: fixed;
}
@media (max-width: 767px) { body { padding-bottom: 4.75rem; } }

/* glowing border card */
.u7-card {
  position: relative;
  border: 1px solid transparent;
  border-radius: 1.25rem;
  background:
    linear-gradient(var(--u7-card), var(--u7-card)) padding-box,
    linear-gradient(140deg, rgba(245, 197, 66, .45), rgba(224, 36, 47, .12) 42%, rgba(224, 36, 47, .45)) border-box;
  transition: box-shadow .25s ease, transform .25s ease;
}
a.u7-card:hover, .u7-card.is-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(245, 197, 66, .18), 0 22px 44px -22px rgba(245, 197, 66, .45);
}
.u7-card--iris {
  background:
    linear-gradient(160deg, #3a0d10, #1a0d0c 70%) padding-box,
    linear-gradient(140deg, rgba(245, 82, 90, .7), rgba(245, 197, 66, .2)) border-box;
}

/* hero grid lines */
.u7-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* buttons */
.u7-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 999px; padding: .75rem 1.4rem; font-weight: 600; line-height: 1;
  transition: background-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.u7-btn--volt { background: linear-gradient(180deg, #fde68a, #f5c542 45%, #d99a14); color: #0a0505; box-shadow: 0 10px 28px -12px rgba(245, 197, 66, .7); }
.u7-btn--volt:hover { background: linear-gradient(180deg, #fef3c7, #fbdc7a 45%, #e0a91c); box-shadow: 0 12px 34px -10px rgba(245, 197, 66, .85); }
.u7-btn--line { color: #f2ebe4; border: 1px solid rgba(255, 255, 255, .16); }
.u7-btn--line:hover { border-color: rgba(245, 197, 66, .6); color: #fdf0c4; }
.u7-btn:focus-visible, .u7-nav a:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--u7-volt); outline-offset: 3px;
}

/* nav */
.u7-nav a { padding: .5rem .85rem; border-radius: 999px; color: #c2b4a6; transition: color .2s, background-color .2s; }
.u7-nav a:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.u7-nav a[aria-current="page"] { color: #0a0505; background: var(--u7-volt); }
.u7-dock a { display: flex; flex-direction: column; align-items: center; gap: .2rem; font-size: .68rem; color: #9c8e82; padding: .35rem 0; }
.u7-dock a[aria-current="page"] { color: var(--u7-volt); }
.u7-dock svg { width: 1.3rem; height: 1.3rem; }

.u7-chip { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .3rem .75rem; font-size: .75rem; font-weight: 500;
  background: rgba(245, 197, 66, .1); color: #fbdc7a; border: 1px solid rgba(245, 197, 66, .25); }
.u7-chip--iris { background: rgba(224, 36, 47, .12); color: #ff9b93; border-color: rgba(224, 36, 47, .3); }

.u7-num { font-family: Prompt, sans-serif; -webkit-text-stroke: 1px rgba(245, 197, 66, .7); color: transparent; }

/* faq */
.u7-faq summary { list-style: none; cursor: pointer; }
.u7-faq summary::-webkit-details-marker { display: none; }
.u7-faq summary .u7-plus { transition: transform .2s ease; }
.u7-faq[open] summary .u7-plus { transform: rotate(45deg); }

/* filter buttons */
.u7-filter[aria-pressed="true"] { background: var(--u7-volt); color: #0a0505; border-color: var(--u7-volt); }

/* long-form article */
.u7-prose { color: #d8cdc2; font-size: 1.05rem; line-height: 1.95; }
.u7-prose > * + * { margin-top: 1.15rem; }
.u7-prose h2 { font-family: Prompt, sans-serif; color: #fff; font-size: 1.55rem; line-height: 1.4; font-weight: 600; margin-top: 2.6rem; scroll-margin-top: 6rem; }
.u7-prose h2::before { content: ""; display: block; width: 2.5rem; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--u7-volt), var(--u7-iris)); margin-bottom: .8rem; }
.u7-prose h3 { font-family: Prompt, sans-serif; color: #fdf0c4; font-size: 1.18rem; font-weight: 500; margin-top: 1.8rem; scroll-margin-top: 6rem; }
.u7-prose ul, .u7-prose ol { padding-left: 1.3rem; }
.u7-prose ul { list-style: disc; }
.u7-prose ol { list-style: decimal; }
.u7-prose li + li { margin-top: .45rem; }
.u7-prose li::marker { color: var(--u7-volt); }
.u7-prose a { color: #fbdc7a; text-decoration: underline; text-decoration-color: rgba(245, 197, 66, .4); text-underline-offset: 4px; }
.u7-prose a:hover { text-decoration-color: #fbdc7a; }
.u7-prose strong { color: #fff; font-weight: 600; }
.u7-prose blockquote { border-left: 3px solid var(--u7-iris); padding: .8rem 1.1rem; background: rgba(224, 36, 47, .08); border-radius: 0 .9rem .9rem 0; color: #ffd9d4; }
.u7-prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.u7-prose th, .u7-prose td { border-bottom: 1px solid rgba(255, 255, 255, .08); padding: .7rem .6rem; text-align: left; vertical-align: top; }
.u7-prose th { color: #fff; font-weight: 600; }
.u7-toc a.is-active { color: var(--u7-volt); }

#u7-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 60; background: linear-gradient(90deg, var(--u7-volt), var(--u7-iris)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* game provider logo marquee */
.u7-prov {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.u7-prov-track { display: flex; gap: 16px; width: max-content; padding: 4px 0 18px; animation: u7-prov 50s linear infinite; }
.u7-prov:hover .u7-prov-track { animation-play-state: paused; }
.u7-prov-track li { flex: none; border-radius: 16px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .5)); transition: transform .2s ease; }
.u7-prov-track li:hover { transform: translateY(-3px); }
.u7-prov-track img { display: block; width: 220px; height: 141px; }
/* shift by one set (+ one gap) */
@keyframes u7-prov { to { transform: translateX(calc(-50% - 8px)); } }
@media (max-width: 600px) {
  .u7-prov-track { gap: 12px; animation-duration: 35s; }
  .u7-prov-track img { width: 170px; height: 109px; }
  @keyframes u7-prov { to { transform: translateX(calc(-50% - 6px)); } }
}
/* reduced motion: keep the loop at half speed instead of the global animation:none */
@media (prefers-reduced-motion: reduce) {
  .u7-prov-track { animation: u7-prov 100s linear infinite !important; }
}