:root {
  --toplist-primary:#8a2be2;
  --toplist-item-bg:#7d0a0a;
  --toplist-rank-bg:#789f;
  --toplist-rank-text:#ffffff;
  --toplist-rank-img:none;
  --toplist-card-bg:linear-gradient(180deg, rgba(150, 10, 10, .98), rgba(110, 6, 6, .98));
  --toplist-card-border:#b6ff2b;
  --toplist-card-radius:14px;
  --toplist-card-shadow:0 0 0 2px rgba(182,255,43,.18), 0 10px 28px rgba(0,0,0,.45), 0 0 26px rgba(182,255,43,.22);
  --toplist-btn-secondary:#ff9300;
}

.toplist,
.toplist * {
  box-sizing:border-box;
}

.toplist--blink .toplist-item,
.toplist-item--blink {
  animation:toplistBlink var(--toplist-blink-duration, 1200ms) ease-in-out infinite;
}

@keyframes toplistBlink {
  0% {
    border-color:var(--toplist-blink-a, var(--toplist-card-border));
    box-shadow:0 0 0 2px var(--toplist-blink-a, var(--toplist-card-border)), 0 10px 28px rgba(0,0,0,.45), 0 0 26px var(--toplist-blink-a, var(--toplist-card-border));
  }
  50% {
    border-color:var(--toplist-blink-b, #ff2bd6);
    box-shadow:0 0 0 2px var(--toplist-blink-b, #ff2bd6), 0 10px 28px rgba(0,0,0,.45), 0 0 26px var(--toplist-blink-b, #ff2bd6);
  }
  100% {
    border-color:var(--toplist-blink-a, var(--toplist-card-border));
    box-shadow:0 0 0 2px var(--toplist-blink-a, var(--toplist-card-border)), 0 10px 28px rgba(0,0,0,.45), 0 0 26px var(--toplist-blink-a, var(--toplist-card-border));
  }
}

.toplist {
  display:flex;
  flex-direction:column;
  gap:18px;
  max-width:1040px;
  margin:0 auto;
  font-size:22px;
}

.toplist-item {
  position:relative;
  display:flex;
  align-items:center;
  gap:20px;
  padding:18px 22px;
  border-radius:var(--toplist-card-radius);
  background:var(--item-bg,var(--toplist-item-bg));
  overflow:visible;
  color:#fff;
  text-align:center;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.toplist-item::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--toplist-card-radius);
  pointer-events:none;
  background:var(--toplist-card-bg);
  opacity:.24;
  z-index:0;
}

.toplist-item > * {
  position:relative;
  z-index:1;
}

.toplist-item:hover {
  transform:translateY(-1px);
  filter:saturate(1.02);
}

.toplist-rank {
  position:absolute;
  left:-11px;
  top:-13px;
  width:46px;
  height:58px;
  display:grid;
  place-items:center;
  font-weight:900;
  color:var(--rank-text,var(--toplist-rank-text));
  z-index:3;
}

.toplist-rank img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.toplist-rank .num {
  position:absolute;
  left:50%;
  top:40%;
  transform:translate(-50%, -50%);
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}

.toplist-media {
  flex:0 0 210px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.toplist-main-img {
  width:92px;
  height:92px;
  display:grid;
  place-items:center;
  border-radius:16px;
  overflow:hidden;
  background:transparent;
  box-shadow:0 12px 22px rgba(0,0,0,.35);
}

.toplist-main-img img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.img-ph {
  font-weight:900;
  opacity:.6;
}

.toplist-title {
  font-weight:900;
  font-size:18px;
  letter-spacing:.4px;
  text-transform:uppercase;
}

.toplist-main.center {
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.toplist-subtitle {
  font-weight:800;
  font-size:16px;
  line-height:1.25;
  opacity:.95;
}

.toplist-stars {
  font-size:32px;
  font-weight:900;
  letter-spacing:2px;
  color:var(--accent-color, #fff);
}

.toplist-stars .star {
  opacity:.35;
  margin-right:2px;
}

.toplist-stars .star.filled {
  opacity:1;
}

.toplist-actions {
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.6em 1.1em;
  border-radius:.64em;
  font-weight:900;
  font-size:18px;
  line-height:1.15;
  letter-spacing:.6px;
  text-transform:uppercase;
  text-decoration:none;
  user-select:none;
  /* let font size drive height/width */
  position:relative;
  overflow:hidden;
  transition:transform .15s ease, filter .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn:focus-visible {
  outline:2px solid rgba(255,255,255,.8);
  outline-offset:2px;
}

.btn.primary:focus-visible {
  outline:0;
}

.btn.primary {
  background:var(--btn-primary-bg, transparent);
  color:#fff;
  border:2px solid var(--btn-primary-border, #ffffff);
  box-shadow:0 10px 18px rgba(0,0,0,.25);
}

.btn.ghost {
  background:var(--btn-secondary-bg, var(--toplist-btn-secondary));
  color:#fff;
  border:2px solid var(--btn-secondary-border, #ffffff);
  box-shadow:0 10px 18px rgba(0,0,0,.25);
}

.btn:hover {
  transform:translateY(-1px);
  filter:brightness(1.05);
}

.btn:active {
  transform:translateY(0);
}

/* Override any theme rules targeting anchors a.primary/a.secondary */
a.btn.primary:not(.button) {
  background:var(--btn-primary-bg, transparent);
}

a.btn.ghost:not(.button) {
  background:var(--btn-secondary-bg, var(--toplist-btn-secondary));
}

/* Strong attention animation */
@keyframes tada {
  0% { transform: scaleX(1); }
  10%, 20% { transform: scale3d(1, 1, 1) rotate(-3deg); }
  30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate(1deg); }
  40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate(-2deg); }
  100% { transform: scaleX(1); }
}

@keyframes toplistBtnPulse {
  0%, 100% { transform:translateY(0) scale(1); }
  50% { transform:translateY(-1px) scale(1.04); }
}

@keyframes toplistBtnGlow {
  0%, 100% { filter:brightness(1); box-shadow:0 10px 18px rgba(0,0,0,.25); }
  50% { filter:brightness(1.08); box-shadow:0 12px 22px rgba(0,0,0,.28), 0 0 18px rgba(255,255,255,.22); }
}

@keyframes toplistBtnShake {
  0%, 100% { transform:translateX(0); }
  20% { transform:translateX(-1px); }
  40% { transform:translateX(1px); }
  60% { transform:translateX(-1px); }
  80% { transform:translateX(1px); }
}

@keyframes toplistBtnBounce {
  0%, 100% { transform:translateY(0); }
  50% { transform:translateY(-3px); }
}

@keyframes toplistBtnFlicker {
  0%, 100% { filter:brightness(1); }
  12% { filter:brightness(1.25); }
  22% { filter:brightness(.95); }
  34% { filter:brightness(1.18); }
  48% { filter:brightness(1); }
  62% { filter:brightness(1.22); }
  78% { filter:brightness(.98); }
}

.btn--shine::after {
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:40%;
  height:180%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform:rotate(18deg) translateX(-120%);
  opacity:.7;
  pointer-events:none;
}

@keyframes toplistBtnShine {
  0% { transform:rotate(18deg) translateX(-120%); }
  100% { transform:rotate(18deg) translateX(420%); }
}

.btn--mode-always.btn--pulse { animation:toplistBtnPulse .9s ease-in-out infinite; }
.btn--mode-always.btn--glow { animation:toplistBtnGlow 1.25s ease-in-out infinite; }
.btn--mode-always.btn--shake { animation:toplistBtnShake .6s ease-in-out infinite; }
.btn--mode-always.btn--bounce { animation:toplistBtnBounce .75s ease-in-out infinite; }
.btn--mode-always.btn--flicker { animation:toplistBtnFlicker 1.4s ease-in-out infinite; }
.btn--mode-always.btn--shine::after { animation:toplistBtnShine 1.2s ease-in-out infinite; }
/* New strong blink */
.btn--mode-always.btn--tada { animation: tada 1.2s infinite; }

.btn--mode-hover.btn--pulse:hover { animation:toplistBtnPulse .9s ease-in-out infinite; }
.btn--mode-hover.btn--glow:hover { animation:toplistBtnGlow 1.25s ease-in-out infinite; }
.btn--mode-hover.btn--shake:hover { animation:toplistBtnShake .6s ease-in-out infinite; }
.btn--mode-hover.btn--bounce:hover { animation:toplistBtnBounce .75s ease-in-out infinite; }
.btn--mode-hover.btn--flicker:hover { animation:toplistBtnFlicker 1.4s ease-in-out infinite; }
.btn--mode-hover.btn--shine:hover::after { animation:toplistBtnShine 1.2s ease-in-out infinite; }
/* New strong blink on hover */
.btn--mode-hover.btn--tada:hover { animation: tada 1.2s infinite; }

@media (prefers-reduced-motion: reduce) {
  .btn--mode-always.btn--pulse,
  .btn--mode-always.btn--glow,
  .btn--mode-always.btn--shake,
  .btn--mode-always.btn--bounce,
  .btn--mode-always.btn--flicker,
  .btn--mode-hover.btn--pulse:hover,
  .btn--mode-hover.btn--glow:hover,
  .btn--mode-hover.btn--shake:hover,
  .btn--mode-hover.btn--bounce:hover,
  .btn--mode-hover.btn--flicker:hover {
    animation:none;
  }
  .btn--mode-always.btn--shine::after,
  .btn--mode-hover.btn--shine:hover::after {
    animation:none;
  }
}

@media (max-width:860px) {
  .toplist-media {
    flex-basis:180px;
  }
  .btn {
    min-width:128px;
  }
}

@media (max-width:640px) {
  .toplist {
    margin:0;
    max-width:none;
  }

  .toplist-item {
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "media main"
      "actions actions";
    align-items:center;
    gap:12px;
    padding:14px 14px 16px;
  }

  .toplist-rank {
    left:-7px;
    top:-14px;
    width:44px;
    height:56px;
  }

  .toplist-media {
    grid-area:media;
    flex:0 0 auto;
    width:auto;
    flex-direction:column;
    justify-content:center;
    gap:8px;
  }

  .toplist-main-img {
    width:78px;
    height:78px;
    border-radius:14px;
  }

  .toplist-title {
    display:block;
    font-size:18px;
    line-height:1.1;
  }

  .toplist-main.center {
    grid-area:main;
    align-items:revert;
    text-align:center;
    flex-direction:column;
    gap:8px;
  }

  .toplist-stars {
    font-size:32px;
  }

  .toplist-actions {
    grid-area:actions;
    width:100%;
    gap:10px;
    display:grid;
    /* Center two buttons side-by-side without edge stretching */
    grid-template-columns:auto auto;
    grid-auto-flow:column;
    justify-content:center;
  }

  .btn {
    min-width:0;
    width:fit-content;
    white-space:nowrap;
    padding:.6em .8em;
  }

  /* Center individual buttons within their grid cells */
  .toplist-actions > .btn { justify-self:center; }

  .toplist-actions a:only-child {
    grid-column:1 / -1;
    justify-self:stretch;
  }
}