/* A single short image echo on hover. The original art and link stay in place. */
.raundo-reference .raundo-promo {
  --echo-tint: #e6a9ff;
  --banner-art-fit: 100% 100%;
  --banner-art-position: center;
}
.raundo-reference .raundo-promo--round {
  --banner-art: url(round.webp);
  --banner-mask: url(round-mask.png);
  --echo-tint: #f7ffd4;
}
.raundo-reference .raundo-promo--racing {
  --banner-art: url(racing.webp);
  --banner-mask: url(racing-mask.png);
  --echo-tint: #d8ff4c;
}
.raundo-reference .raundo-promo--logic {
  --banner-art: url(blocks.webp);
  --promo-background: linear-gradient(145deg,#7931e3 0 73%,#5822a5 73%);
}
.raundo-reference .raundo-promo--sport {
  --banner-art: url(ball.webp);
  --promo-background: linear-gradient(145deg,#6929d9 0 73%,#3d258d 73%);
}
.raundo-reference :is(.raundo-promo--logic,.raundo-promo--sport) {
  --banner-art-fit: contain;
  --banner-art-position: right bottom;
}
.raundo-reference :is(.raundo-promo--logic,.raundo-promo--sport) .raundo-promo__title {
  font: italic 400 clamp(25px,3.5vw,57px)/.88 var(--unified-display);
  letter-spacing: -.06em;
  text-wrap: initial;
}
.raundo-reference :is(.raundo-promo--logic,.raundo-promo--sport) .raundo-promo__art,
.raundo-reference :is(.raundo-promo--logic,.raundo-promo--sport) .raundo-promo-echo {
  inset: auto -5% -10% auto;
  width: 62%;
  height: 118%;
}
.raundo-reference :is(.raundo-promo--logic,.raundo-promo--sport) .raundo-promo__cta {
  padding-inline: 0;
  background: transparent;
  color: white;
}
.raundo-reference .raundo-promo-echo {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: var(--banner-art) var(--banner-art-position) / var(--banner-art-fit) no-repeat;
  filter: grayscale(1) drop-shadow(3px 0 0 var(--echo-tint)) drop-shadow(-3px 0 0 #9b57fa);
}
.raundo-reference .raundo-promo--round .raundo-promo-echo {
  inset: auto 0 -5% auto;
  width: 115%;
  height: 105%;
  mask: var(--banner-mask) center / 100% 100% no-repeat;
}
.raundo-reference .raundo-promo--racing .raundo-promo-echo {
  inset: auto -10% -4% auto;
  width: 120%;
  height: 108%;
  mask: var(--banner-mask) center / 100% 100% no-repeat;
}
@media (max-width: 800px) {
  .raundo-reference .raundo-promo--racing .raundo-promo-echo { right: 0; }
  .raundo-reference :is(.raundo-promo--logic,.raundo-promo--sport) .raundo-promo__title { font-size: clamp(26px,6vw,48px); }
  .raundo-reference :is(.raundo-promo--logic,.raundo-promo--sport) :is(.raundo-promo__art,.raundo-promo-echo) { right: -2%; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .raundo-reference .raundo-promo:hover .raundo-promo-echo {
    animation: raundo-print-glitch 380ms steps(1,end) both;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .raundo-reference .raundo-promo:focus-visible .raundo-promo-echo {
    animation: raundo-print-glitch 380ms steps(1,end) both;
  }
}
@keyframes raundo-print-glitch {
  0%   { opacity: 0; clip-path: inset(39% 0 53% 67%); transform: translateX(0); }
  14%  { opacity: .84; clip-path: inset(32% 0 57% 48%); transform: translateX(-7px); }
  31%  { opacity: .72; clip-path: inset(62% 0 28% 51%); transform: translateX(7px); }
  49%  { opacity: .61; clip-path: inset(46% 0 48% 48%); transform: translateX(-4px); }
  69%, 100% { opacity: 0; }
}

/* Admin and role-management screens use the same palette and pixel details. */
:is(.admin-shell,.pixel-admin-gate,.raundo-access,.community-moderation) {
  --console-surface: #211c2d;
  --console-muted: #c5bbd3;
  --console-edge: #493c59;
  --console-accent: #d6fb47;
  --console-purple: #873ae9;
  --console-radius: 10px;
}
.admin-shell .admin-header {
  min-height: 58px;
  padding-inline: max(16px,calc((100% - 1450px) / 2));
  background: #191521;
  border: 0;
  border-bottom: 1px solid var(--console-edge);
  border-radius: 0;
  backdrop-filter: none;
}
.admin-shell .admin-header .not-found-brand { gap: 8px; }
.admin-shell .admin-header .not-found-brand img { width: 30px; height: 30px; }
.admin-shell .admin-main {
  width: min(1450px, calc(100% - 32px));
  grid-template-columns: minmax(182px,218px) minmax(0,1fr);
  gap: clamp(14px,2.1vw,30px);
  margin-top: 22px;
}
.admin-shell .admin-tabs {
  gap: 3px;
  padding: 12px;
  border: 1px solid var(--console-edge);
  border-radius: var(--console-radius);
  background: #1a1623;
}
.admin-shell .admin-nav-label {
  padding: 3px 8px 6px;
  color: var(--console-muted);
  font: 700 10px/1.2 ui-monospace,monospace;
  letter-spacing: .14em;
}
.admin-shell .admin-tabs > :is(button,a) {
  display: flex;
  gap: 9px;
  min-height: 39px;
  padding: 6px 8px;
  white-space: nowrap;
  text-decoration: none;
}
.admin-shell .admin-tabs > button.active {
  background: #3c2456;
  color: #fff;
  box-shadow: inset 3px 0 var(--console-accent);
}
.admin-shell .admin-pixel-icon {
  width: 17px;
  height: 17px;
  flex: none;
  color: #caa7f0;
}
.admin-shell .admin-tabs > button.active .admin-pixel-icon { color: var(--console-accent); }
.admin-shell .admin-tabs > :is(button,a):hover .admin-pixel-icon { color: currentColor; }
.admin-shell .admin-tabs > .admin-refresh {
  width: auto;
  border-top: 1px solid var(--console-edge);
  border-radius: 0 0 7px 7px;
  margin-top: 7px;
}
:is(.admin-shell .admin-heading,.raundo-access .access-hero,.pixel-admin-gate,.community-moderation .moderation-heading) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(119deg,#241832,#43226a);
  border: 1px solid #644484;
  border-radius: var(--console-radius);
}
:is(.admin-shell .admin-heading,.raundo-access .access-hero,.pixel-admin-gate,.community-moderation .moderation-heading)::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -1;
  width: min(39%,330px);
  pointer-events: none;
  background: url(admin-signal.svg) right center / contain no-repeat;
}
.admin-shell .admin-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 120px;
  margin: 0 0 19px;
  padding: 15px clamp(14px,2.2vw,31px);
}
.admin-shell .admin-heading-copy { min-width: 0; }
.admin-shell .admin-heading h1 {
  margin: 3px 0 6px;
  color: #f6f2fb;
  font: 400 clamp(25px,3.4vw,48px)/1.04 var(--unified-display);
  letter-spacing: -.035em;
}
.admin-shell .admin-heading .eyebrow,
.raundo-access .access-hero > span,
.pixel-admin-gate .eyebrow { color: var(--console-accent); font: 800 10px/1.35 ui-monospace,monospace; letter-spacing: .12em; }
.admin-shell .admin-heading p { margin: 0; color: #e2d6f0; font-size: 13px; }
.admin-shell .admin-site-status {
  display: grid;
  gap: 2px;
  min-width: min(24%,170px);
  padding: 9px 11px;
  margin: 0 0 0 auto;
  border: 1px solid #9a71c2;
  border-radius: 8px;
  background: #1d142c;
}
.admin-shell .admin-site-status > span { color: #e7dfed; font-size: 9px; }
.admin-shell .admin-site-status > span i { border-radius: 0; width: 6px; height: 6px; color: var(--console-accent); background: currentColor; box-shadow: 0 0 0 2px #d6fb472b; }
.admin-shell .admin-site-status > strong { font: 400 18px/1.15 var(--unified-display); }
.admin-shell .admin-site-status > strong small { margin: 0 0 0 5px; font: 500 10px/1.2 Arial,sans-serif; }
.admin-shell :is(.admin-panel,.metric-card,.reports-list article,.catalog-facts > div,.admin-club-metrics > div,.portal-admin-metrics > div,.round-admin-preview,.curation-results,.selected-games) {
  background: var(--console-surface);
  border: 1px solid var(--console-edge);
  border-radius: var(--console-radius);
  box-shadow: none;
}
.admin-shell :is(.metric-card,.admin-club-metrics > div,.portal-admin-metrics > div) {
  background: linear-gradient(135deg,#252033,#1c1925);
}
.admin-shell :is(.admin-section-heading h2,.panel-heading h2,.admin-panel h2,.portal-admin h2),
.raundo-access :is(h1,h2),
.pixel-admin-gate h1,
.community-moderation :is(h1,h2) {
  font-family: var(--unified-display);
  font-weight: 400;
  letter-spacing: -.025em;
}
.admin-shell :is(.admin-panel p,.admin-note,.retention-note,.report-meta,.admin-empty p,.admin-catalog-list small) { color: var(--console-muted); }
.admin-shell :is(input:not([type=checkbox]),select,textarea),
.raundo-access :is(input,select),
.pixel-admin-gate input,
.community-moderation :is(input,select,textarea) {
  border: 1px solid var(--console-edge);
  border-radius: 7px;
  background: #16121e;
  color: #f4eff9;
}
.admin-shell .catalog-drop {
  background: radial-gradient(circle,#c99af03b 17%,transparent 21%) 0 0 / 8px 8px,#2b1b3d;
  border: 1px dashed #ac82d4;
}
.admin-shell :is(.acid-button,.catalog-buttons > button:first-child), .raundo-access .access-controls button:not(.access-secondary) {
  background: var(--console-accent);
  color: #17191e;
  border: 1px solid transparent;
  border-radius: 7px;
}
.admin-shell :is(.outline-button,.admin-content .icon-button), .raundo-access .access-secondary {
  background: #39234f;
  color: #f2e6ff;
  border-color: #715593;
  border-radius: 7px;
}
.admin-shell .admin-content :is(.admin-error,.admin-success,.catalog-progress) { border-radius: 8px; }
.admin-shell .admin-catalog-list li { border-color: var(--console-edge); }
.admin-shell .admin-catalog-list small::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 6px 1px 0;
  background: var(--console-accent);
}
.admin-shell .admin-footer { color: var(--console-muted); border-color: var(--console-edge); }
.pixel-admin-gate { padding: clamp(18px,4vw,45px); margin: 28px auto; }
.pixel-admin-gate::before { opacity: .45; }
.raundo-access .access-hero { padding: clamp(13px,2vw,22px); margin: 16px 0 12px; }
.raundo-access .access-hero h1 { margin: 3px 0 0; }
.raundo-access section {
  border: 1px solid var(--console-edge);
  background: var(--console-surface);
  border-radius: var(--console-radius);
}
@media (max-width: 850px) {
  .admin-shell .admin-main { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .admin-shell .admin-tabs { top: auto; padding: 6px; }
  .admin-shell .admin-nav-label { display: none; }
  .admin-shell .admin-tabs > .admin-refresh { margin: 0; border: 0; }
}
@media (max-width: 510px) {
  .admin-shell .admin-heading { align-items: flex-start; flex-direction: column; }
  .admin-shell .admin-site-status { margin: 0; width: auto; max-width: 100%; }
  .admin-shell .admin-heading::before { width: 35%; opacity: .66; }
  .admin-shell .admin-header { min-height: 49px; }
}
:is(.community-moderation,.community-moderation-embedded) :is(.moderation-toolbar,.moderation-card,.moderation-empty) {
  background: #211c2d;
  border: 1px solid #493c59;
  border-radius: 10px;
  box-shadow: none;
}
.community-moderation .moderation-heading { margin: 12px 0; padding: 15px; }
:is(.community-moderation,.community-moderation-embedded) .moderation-toolbar button.active {
  background: #3c2456;
  color: #f7f0ff;
  box-shadow: inset 0 -2px #d6fb47;
}
:is(.community-moderation,.community-moderation-embedded) .comment-state { border-radius: 4px; }
@media (min-width: 851px) {
  .admin-shell .admin-heading::before { right: 135px; }
}
.raundo-reference .raundo-promo-ink {
  position: absolute;
  inset: auto -5% -10% auto;
  width: 62%;
  height: 118%;
  z-index: -1;
  pointer-events: none;
  mask: var(--banner-art) right bottom / contain no-repeat;
  background: radial-gradient(circle,#1813268c 21%,transparent 29%) 0 0 / 4px 4px;
}
@media (max-width: 800px) {
  .raundo-reference .raundo-promo-ink { right: -2%; }
}

/* Match the racing banner's text link across all four promos. */
.raundo-reference .raundo-promo .raundo-promo__copy .raundo-promo__cta {
  position: static;
  display: inline-flex;
  justify-self: start;
  width: max-content;
  max-width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--promo-color);
  font: 800 clamp(11px,1vw,16px)/1.3 Arial,sans-serif;
  white-space: normal;
  clip-path: none;
}

.raundo-reference :is(.raundo-promo--logic,.raundo-promo--sport) {
  --print-echo: polygon(0 23%,100% 23%,100% 26%,0 26%,0 57%,100% 57%,100% 60%,0 60%,0 73%,100% 73%,100% 75%,0 75%);
}
.raundo-reference :is(.raundo-promo--logic,.raundo-promo--sport)
  :is(.raundo-promo__art,.raundo-promo-ink,.raundo-promo-echo) {
  inset: auto -14% -11% auto;
  width: 76%;
  height: 148%;
  transform-origin: 76% 60%;
}
.raundo-reference :is(.raundo-promo--logic,.raundo-promo--sport) .raundo-promo-echo {
  opacity: .43;
  clip-path: var(--print-echo);
  transform: translateX(-4px);
}

@media (max-width: 800px) {
  .raundo-reference :is(.raundo-promo--logic,.raundo-promo--sport)
    :is(.raundo-promo__art,.raundo-promo-ink,.raundo-promo-echo) {
    right: -11%;
    bottom: -19%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .raundo-reference :is(.raundo-promo--logic,.raundo-promo--sport)
    :is(.raundo-promo__art,.raundo-promo-ink,.raundo-promo-echo) {
    transition: scale 220ms ease-out, filter 150ms ease-out;
  }
  .raundo-reference :is(.raundo-promo--logic,.raundo-promo--sport):focus-visible
    :is(.raundo-promo__art,.raundo-promo-ink,.raundo-promo-echo) {
    scale: 1.06 1.025;
  }
  .raundo-reference :is(.raundo-promo--logic,.raundo-promo--sport):focus-visible .raundo-promo-echo {
    animation: raundo-art-stretch 380ms steps(1,end) both;
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .raundo-reference :is(.raundo-promo--logic,.raundo-promo--sport):hover
    :is(.raundo-promo__art,.raundo-promo-ink,.raundo-promo-echo) {
    scale: 1.06 1.025;
  }
  .raundo-reference :is(.raundo-promo--logic,.raundo-promo--sport):hover .raundo-promo-echo {
    animation: raundo-art-stretch 380ms steps(1,end) both;
  }
}
@keyframes raundo-art-stretch {
  0%, 70%, 100% { opacity: .43; clip-path: var(--print-echo); transform: translateX(-4px); }
  12% { opacity: .76; clip-path: inset(32% 0 58% 0); transform: translateX(-9px); }
  32% { opacity: .67; clip-path: inset(60% 0 29% 0); transform: translateX(7px); }
  52% { opacity: .55; clip-path: inset(48% 0 45% 0); transform: translateX(-5px); }
}

.raundo-reference :is(.raundo-promo--logic,.raundo-promo--sport) .raundo-promo__copy {
  width: 56%;
  max-width: 56%;
}
.raundo-reference :is(.raundo-promo--logic,.raundo-promo--sport) .raundo-promo__title {
  text-wrap: balance;
}