/* AUTO-GENERATED by css/build.js — edit _*.css, then: node css/build.js */

/* RankMe · tokens — Design tokens, reset, shared keyframes */

:root {
  --glow-accent: 0 0 20px rgba(180,120,255,.35);
  --shadow-sm: 0 6px 18px rgba(0,0,0,.25);
  --shadow-md: 0 10px 28px rgba(0,0,0,.35);
  --bg-0: #0b0912;
  --panel: #1a1728;
  --panel-2: #1e1a30;
  --line: rgba(255,255,255,0.08);
  --text: #f1eefb;
  --text-dim: #a79fc4;
  --accent-grad: linear-gradient(120deg,#b79bf0 0%, #e6a9e8 50%, #cdd6f7 100%);
  --btn-h: 38px;
  --btn-radius: 999px;
  --btn-bg: #171327;
  --btn-fg: #f4eefc;
  --btn-line: rgba(200,160,240,.42);
  --btn-line-hot: rgba(220,180,255,.88);
  --btn-glow: 0 0 16px rgba(180,120,255,.32);
  --btn-core: linear-gradient(160deg, #2e2342 0%, #171022 50%, #221832 100%);
  --btn-holo: linear-gradient(120deg, #b79bf0, #e6a9e8, #8ec5ff, #c9a3ff, #b79bf0);
  --holo-warm: linear-gradient(115deg, #ff4d8d 0%, #ff7a45 35%, #ffc94a 68%, #ff6b4a 100%);
  --holo-ice: linear-gradient(120deg, #f4fbff, #9ad8ff, #c9b6ff, #ffffff, #7ee7ff, #f4fbff);
  --holo-ice-glow: rgba(180, 220, 255, 0.48);
  --card-w: 64px;
  --card-h: calc(var(--card-w) * 1.35);
  --radius: 14px;
  --radius-sm: 9px;
  --dur-fast: 0.12s;
  --dur-base: 0.18s;
  --dur-slow: 0.28s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  font-size: 16px;
}

* {
  box-sizing: border-box;
}

/* Sole !important: HTML [hidden] must beat later display:flex/grid/block. */
[hidden] {
  display: none !important;
}

html,body {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  background-color: var(--bg-0);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: var(--bg-0);
  color: var(--text);
  font-family: 'Montserrat', system-ui, sans-serif;
  overflow-x: clip;
  overflow-anchor: none;
  -webkit-user-select: none;
  user-select: none;
}

.aurora {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 110% 70% at 50% 12%, rgba(183, 155, 240, 0.045), transparent 62%);
}

[contenteditable="true"],
[contenteditable=""],
.is-editable {
  -webkit-user-select: text;
  user-select: text;
}

@supports not (background: conic-gradient(from var(--elec-angle), red, blue)) {

  .battle-mode-full .bmc-electric {
    animation: elecRotate 3s linear infinite;
    background: linear-gradient(90deg, #ff6b9d, #ff9f6b, #6bc5ff, #b79bff, #ff6b9d);
    background-size: 300% 100%;
  }
}

@keyframes exclusiveRgb {
  0%{ background-position: 0 0, 0% 50%; }
  100%{ background-position: 0 0, 100% 50%; }
}

@keyframes portalRgb {
  0%{ background-position: 0 0, 0% 50%; }
  100%{ background-position: 0 0, 100% 50%; }
}

@keyframes dlMaxShift {
  0%{ background-position: 0 0, 0% 50%; }
  100%{ background-position: 0 0, 100% 50%; }
}

@keyframes ctaGlowShift {
  0%{ background-position: 0 0, 0% 50%; }
  100%{ background-position: 0 0, 200% 50%; }
}

@property --expert-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --elec-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes expertBorderSpin {
  to { --expert-angle: 360deg; }
}

@media (max-width: 720px) {
  :root {
    --card-w: 48px;
  }
}

/* RankMe · chrome — Site chrome: header, footer, page shell, buttons */

body > .page, body > .wrap {
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  align-self: center;
  margin-left: auto;
  margin-right: auto;
}

body > footer.site, body > #site-footer {
  margin-top: auto;
  flex-shrink: 0;
}

header.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 40px;
  border-bottom: 1px solid rgba(176, 150, 230, 0.08);
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(14, 12, 20, 0.96);
  overflow: visible;
}

body > header,
body > main,
body > footer {
  position: relative;
  z-index: 1;
}

.brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  color: inherit;
  padding: 12px 20px;
  margin: -12px -20px;
  overflow: visible;
  background: transparent;
}

.brand img {
  height: 34px;
  display: block;
  background: transparent;
  transition: filter .35s ease, transform .25s ease;
  mix-blend-mode: normal;
}
header.site .brand > .brand-mark { display: none; }
header.site .brand > .brand-full { display: block; }

.brand:hover img {
  transform: scale(1.04);
  filter: drop-shadow(0 0 6px rgba(210,170,255,.95))
          drop-shadow(0 0 16px rgba(180,130,255,.7))
          drop-shadow(0 0 28px rgba(160,110,255,.4)) brightness(1.15);
}

nav.main {
  display: flex;
  align-items: center;
  gap: 30px;
  flex: 0 0 auto;
  margin-left: auto;
}

nav.main a {
  color: var(--text-dim);
  text-decoration: none;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .3px;
  padding: 8px 14px;
  border-radius: 999px;
  background: none;
  box-shadow: none;
  transition: color .15s, text-shadow .15s;
}

nav.main a:hover {
  color: var(--text);
  background: none;
  text-shadow:
    0 0 10px rgba(200, 160, 255, 0.7),
    0 0 22px rgba(180, 130, 255, 0.45);
}

nav.main a.active {
  color: #fff;
  background: none;
  box-shadow: none;
  text-shadow:
    0 0 10px rgba(200, 160, 255, 0.55),
    0 0 20px rgba(180, 130, 255, 0.3);
}

nav.main a.exclusive {
  color: #e79ee0;
}

footer.site, #site-footer.site {
  max-width: 1400px;
  width: 100%;
  margin: auto auto 0;
  padding: 36px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
  flex-shrink: 0;
  background: transparent;
  border-top: none;
  box-shadow: none;
}

footer.site img.footer-logo {
  height: 56px;
  display: block;
  margin: 0 0 18px;
}

footer.site .fine {
  color: var(--text-dim);
  font-size: .75rem;
  font-weight: 600;
  margin: 0;
}

footer.site .footer-legal {
  margin: 0 0 14px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(167,159,196,.75);
  line-height: 1.45;
}

footer.site .footer-legal a {
  color: rgba(167,159,196,.85);
  text-decoration: none;
  transition: color .2s ease;
}

footer.site .footer-legal a:hover {
  color: #e8d4ff;
}

footer.site .footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 2px 0 0;
}

footer.site .footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  outline: none;
  background: transparent;
  color: #a79fc4;
  text-decoration: none;
  transition: color .25s ease, filter .3s ease, transform .25s ease;
}

footer.site .footer-social a svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;
}

footer.site .footer-social a:hover {
  color: #f1eefb;
  transform: translateY(-2px) scale(1.08);
  filter: drop-shadow(0 0 4px rgba(230,190,255,1))
    drop-shadow(0 0 12px rgba(200,150,255,.85))
    drop-shadow(0 0 24px rgba(180,120,255,.5));
}

.page {
  flex: 1 0 auto;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 24px 40px;
  box-sizing: border-box;
  align-self: center;
}

.wrap {
  flex: 1 0 auto;
  max-width: 720px;
  width: 100%;
  margin: 40px auto 60px;
  padding: 0 24px;
  box-sizing: border-box;
  align-self: center;
}

.wrap.narrow {
  max-width: 560px;
  width: 100%;
  margin: 48px auto 40px;
  padding: 0 20px 40px;
  align-self: center;
}

/* Button family
   default / ghost — dark pill
   primary         — dark fill + holo edge (Open, Save, Stay, Start, Download)
   danger          — coral outline (Clear, Delete, Leave)
*/
.btn,
.btn-mini,
.pill-btn,
.cta,
.download-btn,
.modal-actions button,
.show-all-btn,
.cc-show-all {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  box-sizing: border-box;
  min-height: var(--btn-h);
  padding: 0 18px;
  border-radius: var(--btn-radius);
  border: 1.5px solid var(--btn-line);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: inherit;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, filter .15s ease, background .15s ease, color .15s ease;
}
.btn:hover,
.btn-mini:hover,
.pill-btn:hover,
.cta:hover,
.download-btn:hover,
.modal-actions button:hover,
.show-all-btn:hover,
.cc-show-all:hover {
  border-color: var(--btn-line-hot);
  color: #fff;
  box-shadow: var(--btn-glow);
  transform: translateY(-1px);
}
.btn:active,
.btn-mini:active,
.pill-btn:active,
.cta:active,
.modal-actions button:active {
  transform: translateY(0) scale(.97);
}

.btn.ghost,
.cta.ghost {
  background: var(--btn-bg);
  border-color: var(--btn-line);
  color: var(--btn-fg);
}

.btn.primary,
.btn-mini.primary,
.cta.primary,
.download-btn,
.modal-actions button.primary,
.save-btn,
.show-all-btn,
.cc-show-all,
.battle-panel .btn.primary,
.battle-panel a.btn.primary {
  color: #f8f2ff;
  border-color: transparent;
  background: var(--btn-core) padding-box, var(--btn-holo) border-box;
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  box-shadow: var(--btn-glow), inset 0 1px 0 rgba(255,255,255,.08);
}
.btn.primary:hover,
.btn-mini.primary:hover,
.cta.primary:hover,
.download-btn:hover,
.modal-actions button.primary:hover,
.save-btn:hover,
.show-all-btn:hover,
.cc-show-all:hover,
.battle-panel .btn.primary:hover,
.battle-panel a.btn.primary:hover {
  filter: brightness(1.1);
  color: #fff;
  box-shadow: 0 0 22px rgba(190,140,255,.5), inset 0 1px 0 rgba(255,255,255,.12);
}

.btn.danger,
.pill-btn.danger,
.modal-actions button.danger {
  background: var(--btn-bg);
  border-color: rgba(255,110,110,.42);
  color: #ffb3b3;
  box-shadow: none;
}
.btn.danger:hover,
.pill-btn.danger:hover,
.modal-actions button.danger:hover {
  background: rgba(255,90,90,.12);
  border-color: rgba(255,130,130,.85);
  color: #ffd0d0;
  box-shadow: 0 0 14px rgba(255,100,120,.32);
}

.btn-mini {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 12px;
  font-size: .76rem;
}
.btn-mini.open-outline {
  background: var(--btn-bg);
  border-color: var(--btn-line);
  color: var(--btn-fg);
  box-shadow: none;
}

.cta.primary,
.cta.cta-start {
  min-width: 260px;
  min-height: 52px;
  padding: 0 48px;
  font-size: 1.05rem;
  background-size: 100% 100%, 220% 100%;
  animation: ctaGlowShift 3.8s linear infinite;
}
.cta.primary:hover,
.cta.cta-start:hover {
  transform: translateY(-2px);
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: nowrap;
}
.modal-actions button {
  flex: 1 1 0;
  min-width: max-content;
  padding: 0 22px;
}

.wrap h1 {
  font-size: 1.6rem;
  font-weight: 900;
  margin: 0 0 8px;
}

.wrap .meta {
  color: var(--text-dim);
  font-size: .85rem;
  font-weight: 600;
  margin: 0 0 28px;
}

.wrap h2 {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 28px 0 10px;
  color: var(--text);
}

.wrap p, .wrap li {
  color: var(--text-dim);
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.65;
}

.wrap ul {
  padding-left: 1.2em;
  margin: 8px 0;
}

.wrap a {
  color: #e8d4ff;
}

.profile .meta, .wrap .profile .meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 3px;
  margin: 0;
  padding: 0;
  min-width: 0;
  line-height: 1.2;
  color: inherit;
  font-size: inherit;
}

.rs-btn {
  flex: 1;
  padding: 8px 6px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #171327;
  color: var(--text-dim);
  font-size: .75rem;
  cursor: pointer;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.rs-btn img {
  height: 14px;
}

.rs-btn:hover {
  color: var(--text);
  border-color: rgba(220,150,255,.5);
}

.rs-btn.danger:hover {
  color: #ff8080;
  border-color: rgba(255,100,100,.5);
}

.share-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.share-label {
  color: var(--text-dim);
  font-weight: 800;
  font-size: .75rem;
  letter-spacing: .6px;
}

.share-ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #171327;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s, border-color .15s, background .15s, box-shadow .15s;
}

.share-ico:hover {
  transform: translateY(-2px) scale(1.06);
  background: #171327;
  border-color: rgba(200,160,240,.75);
  box-shadow: 0 0 14px rgba(190,140,240,.4);
}

.share-ico:hover svg {
  fill: #e8d4ff;
}

.share-ico svg {
  width: 18px;
  height: 18px;
  fill: var(--text-dim);
  transition: fill .15s;
}

body.theme-gold {
  --card-h: calc(var(--card-w) * 1.15);
}

.section-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .4px;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title .badge {
  font-size: .65rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(120deg,rgba(200,160,240,.25),rgba(230,170,220,.2));
  border: 1px solid rgba(200,160,240,.4);
  color: #e8d4ff;
  letter-spacing: .5px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.hint {
  font-size: .75rem;
  color: var(--text-dim);
  font-weight: 600;
  margin: -8px 0 18px;
}

.providers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0 8px;
}

.prov {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, background .15s, transform .15s;
}

.prov:hover {
  border-color: rgba(200,160,240,.45);
  background: rgba(180,140,255,.08);
  transform: translateY(-1px);
}

.prov .ico.discord {
  background: #5865F2;
}

.prov .ico.google {
  background: #fff;
}

.prov .ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #111;
}

.err {
  color: #ff8a8a;
  font-weight: 200;
  font-size: .85rem;
  margin-top: 10px;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 20px;
}

.empty {
  color: var(--text-dim);
  font-weight: 600;
  font-size: .9rem;
  padding: 20px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 12px;
}

.profile {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  margin: 18px 0 22px;
  padding: 0;
}

.profile .meta b {
  display: block;
  font-size: .95rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

.profile .meta span {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: .04em;
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 8px 0 18px;
  margin-bottom: 16px;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}

.search-box:focus-within {
  border-color: rgba(200,160,240,.6);
  background: rgba(255,255,255,0.055);
  box-shadow: var(--glow-accent);
}

.search-box > svg {
  flex-shrink: 0;
  opacity: .65;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.search-box:focus-within > svg {
  opacity: 1;
  color: #e8d4ff;
}

.search-box .clear-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0;
  margin: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  line-height: 0;
  transition: background .15s, color .15s;
}
.search-box .clear-btn svg {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.search-box .clear-btn:hover {
  background: rgba(255,255,255,.08);
  color: var(--text);
}

.no-results {
  grid-column: 1/-1;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-dim);
}

.no-results .reset-link {
  color: #e8d4ff;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  font-weight: 700;
  font-size: .85rem;
  margin-top: 8px;
}

.no-results .reset-link:hover {
  color: #ffffff;
  text-decoration: none;
  filter: brightness(1.15);
}

.section-head .section-title {
  margin: 0;
}

.section-head {
  display: flex;
  align-items: baseline;
  margin: 0 0 14px;
  gap: 12px;
}

.search-box input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #f0eaf8;
  font-family: inherit;
  font-weight: 600;
  font-size: .95rem;
  padding: 14px 10px;
  -webkit-text-fill-color: #f0eaf8;
}

.search-box input:-webkit-autofill, .search-box input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 40px #161224 inset;
  -webkit-text-fill-color: #f0eaf8;
  caret-color: #f0eaf8;
}

.search-box input::placeholder {
  color: rgba(190, 175, 220, 0.45);
  -webkit-text-fill-color: rgba(190, 175, 220, 0.45);
}
.search-box input:focus::placeholder {
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.show-all-wrap {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding: 16px 0 8px;
}

html.rankme-dragging {
  overscroll-behavior: none;
  touch-action: none;
}

#battleEqualMid:hover {
  transform: none;
  filter: brightness(1.12);
  box-shadow: 0 0 18px rgba(180, 140, 255, 0.5);
}

#battleEqualMid:active {
  transform: none;
  filter: brightness(0.95);
}

@media (max-width: 720px) {

  header.site {
    position: sticky;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    gap: 8px;
  }

  .brand {
    padding: 4px;
    margin: -4px;
    flex: 0 0 auto;
    z-index: 2;
    overflow: visible;
    width: auto;
    height: auto;
  }
  .brand .brand-full,
  header.site .brand > .brand-full { display: none; }
  .brand .brand-mark,
  header.site .brand > .brand-mark {
    display: block;
    height: 28px;
    width: auto;
  }

  nav.main {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    pointer-events: none;
    z-index: 1;
  }

  nav.main > a:not(.login-btn) {
    font-size: .95rem;
    font-weight: 800;
    white-space: nowrap;
    pointer-events: auto;
    color: var(--text-dim);
    padding: 8px 14px;
    border-radius: 999px;
    background: none;
    box-shadow: none;
    transition: color .15s, text-shadow .15s;
  }
  nav.main > a:not(.login-btn):hover {
    color: #fff;
    background: none;
    text-shadow: 0 0 12px rgba(200, 160, 255, 0.55);
  }
  nav.main > a:not(.login-btn).active {
    color: #fff;
    background: none;
    box-shadow: none;
    text-shadow: 0 0 12px rgba(200, 160, 255, 0.4);
  }

  /* Account: compact round control on the right */
  nav.main a.login-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
    z-index: 2;
  }
  nav.main a.login-btn:not(.login-btn-avatar) {
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    max-width: 36px;
    max-height: 36px;
    aspect-ratio: 1 / 1;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(200, 160, 240, 0.45);
    background: #1a1728;
    color: transparent;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    box-shadow: none;
  }
  nav.main a.login-btn:not(.login-btn-avatar)::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: center / 18px 18px no-repeat
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8b8e0' stroke-width='2'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3C/svg%3E");
  }
  nav.main a.login-btn:not(.login-btn-avatar):hover {
    border-color: rgba(220, 180, 255, 0.9);
    background: #1a1728;
    filter: none;
  }

  .share-group {
    margin-left: 0;
    order: 3;
  }

  footer.site {
    padding: 20px 12px 16px;
  }

  footer.site img.footer-logo {
    height: 40px;
  }
  .hero-text.blank-hero-text {
    gap: 12px;
  }
  .hero-text.blank-hero-text .desc {
    margin-bottom: 0;
  }

  .page {
    padding: 20px 10px 36px;
  }

  .wrap {
    margin: 24px auto 36px;
    padding: 0 10px;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .search-box .clear-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }

}

/* Shared loading skeletons — one primitive, layout via real page classes */
@keyframes skelShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.skel,
.skel-line {
  background: linear-gradient(
    90deg,
    rgba(40, 34, 58, 0.95) 0%,
    rgba(70, 58, 100, 0.55) 45%,
    rgba(40, 34, 58, 0.95) 90%
  );
  background-size: 200% 100%;
  animation: skelShimmer 1.35s ease-in-out infinite;
  border-radius: 10px;
  pointer-events: none;
}

.skel-line {
  height: 12px;
  border-radius: 999px;
  width: 70%;
}

.skel-line-title { width: 62%; height: 14px; }
.skel-sm { width: 42%; height: 10px; opacity: 0.85; border-radius: 999px; }
.skel-pill {
  height: 38px;
  border-radius: 999px;
  flex: 1;
  min-width: 0;
}
.skel-chip {
  height: 32px;
  width: 72px;
  border-radius: 999px;
  flex: 0 0 auto;
  display: block;
}
.cover.skel img,
.cc-cover.skel img,
.sc-cover.skel img,
.cover.is-fallback img,
.cc-cover.is-fallback img,
.sc-cover.is-fallback img {
  opacity: 0;
}
.ap-avatar.skel {
  border: 0;
  background: linear-gradient(
    90deg,
    rgba(40, 34, 58, 0.95) 0%,
    rgba(70, 58, 100, 0.55) 45%,
    rgba(40, 34, 58, 0.95) 90%
  );
  background-size: 200% 100%;
  animation: skelShimmer 1.35s ease-in-out infinite;
}

.skel-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .skel,
  .skel-line {
    animation: none;
    background: rgba(48, 40, 68, 0.9);
  }
}

/* Tier boot — hero + board + toolbar + pool */
.boot-loading {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 24px 40px;
  min-height: 50vh;
  box-sizing: border-box;
}
.skel-tier-boot {
  display: flex;
  flex-direction: column;
  gap: 16px;
  pointer-events: none;
}
.skel-tier-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}
.skel-tier-cover {
  width: 420px;
  max-width: min(420px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  flex: 0 0 auto;
}
.skel-tier-copy {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.skel-tier-cta {
  width: 168px;
  flex: none;
  height: 42px;
}
.skel-board {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}
.skel-row {
  height: var(--card-h);
  border-radius: 0;
  width: 100%;
  border-top: 1px solid var(--line);
}
.skel-row:first-child { border-top: none; }
.skel-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-sizing: border-box;
}
.skel-tb-icons { display: contents; }
.skel-tb-btn {
  width: 108px;
  height: 38px;
  border-radius: 999px;
}
.skel-tb-row2 { display: contents; }
.skel-tb-size {
  width: 180px;
  height: 10px;
  border-radius: 999px;
}
.skel-tb-dl {
  width: 168px;
  height: 38px;
  border-radius: 999px;
}
.skel-pool {
  padding: 16px 18px 20px;
  box-sizing: border-box;
  background:
    radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(165deg, rgba(42, 34, 68, 0.75) 0%, rgba(22, 18, 36, 0.88) 100%);
  background-size: 14px 14px, 100% 100%;
  border: 1px solid rgba(180, 140, 255, 0.16);
  border-radius: var(--radius);
}
.skel-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.skel-portal {
  height: 40px;
  width: 100%;
  border-radius: 999px;
  margin-bottom: 14px;
}
.skel-pool-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.skel-pcard {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 10px;
}
@media (max-width: 720px) {
  .boot-loading { padding: 14px 14px 32px; }
  .skel-tier-hero {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .skel-tier-cover { width: 100%; max-width: 100%; }
  .skel-tier-copy { align-items: center; }
  .skel-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 12px 14px;
    gap: 12px;
  }
  .skel-tb-icons {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    width: 100%;
    gap: 6px;
  }
  .skel-tb-btn {
    width: 100%;
    height: 52px;
    border-radius: 12px;
  }
  .skel-tb-row2 {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 12px;
  }
  .skel-tb-size {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 40px;
  }
  .skel-tb-dl {
    flex: 0 1 48%;
    min-width: 140px;
    width: auto;
    height: 40px;
  }
}

.expert-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  flex: 0 0 22px;
  position: relative;
  line-height: 0;
  text-decoration: none;
  color: inherit;
}
.expert-badge img {
  width: 100%;
  height: 100%;
  display: block;
}
.expert-badge.is-btn {
  cursor: pointer;
  overflow: visible;
}
.expert-badge.is-off.is-btn img {
  position: relative;
  z-index: 1;
}
.expert-badge.is-off.is-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--holo-warm);
  background-size: 220% 100%;
  -webkit-mask: url("../assets/icons/expert-badge-off.svg?v=20260902a") center / contain no-repeat;
  mask: url("../assets/icons/expert-badge-off.svg?v=20260902a") center / contain no-repeat;
  transform: scale(1.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
@media (hover: hover) {
  .expert-badge.is-off.is-btn:hover::after {
    opacity: 1;
    animation: portalRgb 2.8s linear infinite alternate;
  }
}
.expert-badge.is-on {
  cursor: default;
}

/* RankMe · hero — Tier hero, list actions */

body > header.site, body > footer.site, body > #site-footer, body > .toolbar, body > .board, body > .pool-wrap, body > .hero {
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}

.hero > .parallax-host {
  align-self: center;
}

.hero > .hero-text {
  flex: 0 1 320px;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  align-self: center;
  min-height: 0;
}

.hero > .hero-text .hero-title {
  margin: 0;
}

.hero > .hero-text .desc {
  margin: 0;
  flex: 0 0 auto;
  max-width: 100%;
}


.hero .parallax-host {
  display: block;
  width: 420px;
  max-width: min(420px, 100%);
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
  border-radius: 16px;
  overflow: hidden;
  line-height: 0;
  border: 2px solid transparent;
  background: linear-gradient(#1a1728, #1a1728) padding-box,
    linear-gradient(90deg,#ff6b6b,#f7c948,#7bed9f,#70a1ff,#a29bfe,#ff6b81,#ff6b6b) border-box;
  background-size: 100% 100%, 200% 100%;
  animation: exclusiveRgb 5s linear infinite alternate;
  box-shadow: 0 0 28px rgba(180,120,255,.28);
}

.hero .parallax-host img, .hero img.title-logo, .hero img.title-logo.cover-card {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: none;
  animation: none;
  filter: none;
  transform: scale(1.06);
  transition: transform .15s ease-out;
  will-change: transform;
  pointer-events: none;
}

.hero .desc b {
  color: var(--text);
}


.remix-btn {
  color: var(--btn-fg);
}

.remix-btn:hover, .remix-btn.active-remix {
  border-color: var(--btn-line-hot);
  color: #fff;
  box-shadow: var(--btn-glow);
  transform: translateY(-1px);
}

.hero-home {
  text-align: center;
  margin-bottom: 48px;
  overflow: visible;
}

/* Title — refined holofoil + soft cursor sheen */
.hero-home .hero-title-mesh {
  position: relative;
  display: inline-block;
  font-size: clamp(2.15rem, 7vw, 3.55rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 0 5px;
  cursor: default;
  overflow: visible;
  --mx: 50%;
  --my: 50%;
  --spot: 7.5rem;
}
.hero-home .htm-base,
.hero-home .htm-lite {
  position: relative;
  z-index: 1;
  display: block;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* elegant base */
.hero-home .htm-base {
  background-image: linear-gradient(
    125deg,
    #9b7aef 0%,
    #c4b5fd 28%,
    #d8b4fe 50%,
    #b794f0 72%,
    #a78bfa 100%
  );
  background-size: 170% 100%;
  animation: heroTitleShimmer 18s ease-in-out infinite;
}
/* subtle sheen under cursor — soft holofoil, no white blast */
.hero-home .htm-lite {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  background-image: linear-gradient(
    120deg,
    #c4b5fd 0%,
    #e9d5ff 22%,
    #ddd6fe 40%,
    #f0abfc 55%,
    #c4b5fd 72%,
    #a5b4fc 88%,
    #d8b4fe 100%
  );
  background-size: 190% 100%;
  -webkit-mask-image: radial-gradient(
    circle var(--spot) at var(--mx) var(--my),
    #000 0%,
    rgba(0, 0, 0, 0.65) 35%,
    rgba(0, 0, 0, 0.2) 58%,
    transparent 78%
  );
  mask-image: radial-gradient(
    circle var(--spot) at var(--mx) var(--my),
    #000 0%,
    rgba(0, 0, 0, 0.65) 35%,
    rgba(0, 0, 0, 0.2) 58%,
    transparent 78%
  );
}
.hero-home .hero-title-mesh.is-active .htm-lite {
  opacity: 0.85;
  animation: heroTitleShimmer 8s ease-in-out infinite;
}
@keyframes heroTitleShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (max-width: 720px) {
  .hero-home .hero-title-mesh {
    --spot: 5.5rem;
    font-size: clamp(1.85rem, 9.5vw, 2.45rem);
    letter-spacing: -0.025em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-home .htm-base,
  .hero-home .htm-lite,
  .hero-home .hero-title-mesh.is-active .htm-lite {
    animation: none;
  }
  .hero-home .htm-lite,
  .hero-home .hero-title-mesh.is-active .htm-lite {
    opacity: 0;
  }
}

.hero-home p,
.hero-home .hero-sub {
  color: #f8f2ff;
  font-weight: 600;
  max-width: 520px;
  margin: 0 auto 28px;
  line-height: 1.6;
  font-size: clamp(0.92rem, 2.2vw, 1.05rem);
}

@media (max-width: 720px) {
  .hero-home p,
  .hero-home .hero-sub {
    color: #f8f2ff;
    padding: 0 8px;
  }
}

.blank-cover-card img#blankCoverImg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transform: none;
  border-radius: 0;
  display: block;
}

.blank-cover-card.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.blank-cover-card.is-placeholder img#blankCoverImg {
  width: 28%;
  max-width: 88px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  object-position: center center;
  filter: drop-shadow(0 0 10px rgba(200, 160, 240, 0.35));
}

.blank-cover-edit {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18,16,28,.82);
  border: 1px solid rgba(200,160,240,.45);
  color: #e8d4ff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  transition: transform .15s, border-color .15s, box-shadow .15s, filter .15s;
}

.blank-cover-edit:hover {
  transform: scale(1.06);
  border-color: rgba(220,180,255,.85);
  box-shadow: 0 0 16px rgba(180,140,255,.4);
  filter: brightness(1.1);
}

.blank-cover-edit img,
.blank-cover-edit svg {
  width: 18px;
  height: 18px;
  display: block;
}

.hero-text {
  flex: 0 1 auto;
  min-width: 0;
}

.hero-title {
  margin: 0 0 10px;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 900;
  letter-spacing: 0.2px;
  line-height: 1.2;
  color: #f4eefc;
}

.hero .parallax-host, .hero .title-logo, .hero img.cover-card {
  margin-bottom: 16px;
}

.hero h1 {
  margin: 0 0 10px;
}

.hero .desc {
  flex: 0 0 auto;
  max-width: 520px;
  color: var(--text-dim);
  font-size: .95rem;
  line-height: 1.65;
  font-weight: 600;
  margin: 0 0 4px;
  padding: 0;
}

.hero .parallax-host, .blank-cover-card {
  width: 420px;
  max-width: min(420px, 100%);
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
}

.hero-text, .hero > .hero-text, .hero-text.blank-hero-text {
  flex: 0 1 auto;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 10px;
}

.blank-cover-card {
  position: relative;
  width: 420px;
  max-width: min(420px, 100%);
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(160deg, #241c3a, #14101f);
  border: 1.5px solid rgba(180, 140, 255, 0.28);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}


.hero {
  max-width: 1400px;
  margin: 0 auto 16px;
  padding: 28px 24px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  box-sizing: border-box;
  text-align: left;
}


@media (max-width: 720px) {
  .blank-cover-card, .hero .parallax-host {
    width: 100%;
    max-width: 100%;
  }

  section.hero#heroSection, .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 14px 14px 6px;
    margin: 0 auto 4px;
    min-height: 0;
    height: auto;
  }

  .hero > .parallax-host {
    width: 100%;
    max-width: 100%;
    margin: 0;
    align-self: stretch;
  }

  .hero > .hero-text {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 4px 4px 0;
    margin: 0;
    text-align: center;
    align-self: stretch;
  }

  .hero > .hero-text .hero-title, .hero-title {
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
    font-size: 1.35rem;
    line-height: 1.25;
  }

  .hero > .hero-text .desc, .hero .desc {
    margin: 0;
    padding: 0 6px;
    text-align: center;
    width: 100%;
    max-width: 100%;
    font-size: 0.88rem;
    line-height: 1.5;
  }


  .hero .parallax-host, .blank-cover-card {
    width: 100%;
    max-width: 100%;
  }

  .hero-text.blank-hero-text, .hero > .hero-text {
    align-items: center;
    text-align: center;
    max-width: 100%;
    width: 100%;
  }

  .blank-cover-card {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16/9;
  }


  .hero-text, .hero > .hero-text, .hero-text.blank-hero-text {
    align-items: center;
    text-align: center;
    max-width: 100%;
    width: 100%;
  }
}

@media (min-width: 721px) {

  section.hero#heroSection, .hero {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 28px;
  }

  .hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex: 1 1 280px;
    min-width: 0;
  }


  section.hero#heroSection.hero, section.hero#heroSection, .hero {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .hero > .parallax-host {
    width: 420px;
    max-width: min(420px, 42vw);
    flex: 0 0 auto;
    align-self: center;
  }

  .hero > .hero-text {
    flex: 1 1 300px;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: center;
    gap: 14px;
    min-height: 180px;
  }

  .hero > .hero-text .hero-title {
    margin: 0;
  }

  .hero > .hero-text .desc {
    margin: 0;
  }


}

/* Equal Remix / Save size (same hierarchy) */
.toolbar .remix-btn,
.toolbar .save-btn {
  min-width: 108px;
  height: var(--btn-h);
  padding: 0 20px;
}

/* Community creator bar on tier page */
.community-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto 14px;
  padding: 0 24px;
  box-sizing: border-box;
}
.community-bar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: auto;
  margin: 0;
  padding: 6px 12px 6px 8px;
  background: rgba(22, 18, 36, 0.92);
  border: 1px solid rgba(140, 120, 180, 0.28);
  border-radius: 999px;
  box-sizing: border-box;
  min-width: 0;
}
.cb-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.cb-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid transparent;
  background:
    linear-gradient(#1a1728, #1a1728) padding-box,
    linear-gradient(135deg, #c4a0f0, #8b6ad8) border-box;
  flex-shrink: 0;
}
.community-bar.is-expert .cb-avatar {
  background:
    linear-gradient(#1a1728, #1a1728) padding-box,
    var(--holo-warm) border-box;
}
.cb-fallback {
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #e8d4ff;
  background: #2a2438;
  border: 2px solid rgba(180, 140, 255, 0.5);
}
.community-bar.is-expert .cb-fallback {
  border-color: transparent;
  background:
    linear-gradient(#2a2438, #2a2438) padding-box,
    var(--holo-warm) border-box;
}
.cb-meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.cb-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.cb-name-row .expert-badge {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.cb-name {
  font-size: 0.86rem;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.cb-name:hover { color: #e8d4ff; }
.cb-av-link {
  display: flex;
  flex-shrink: 0;
  text-decoration: none;
}
.cb-ago {
  font-size: 0.68rem;
  color: var(--text-dim);
  font-weight: 600;
}
.cb-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  overflow: visible;
}
.cb-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #e8d4f0;
  font-variant-numeric: tabular-nums;
}
.cb-ico {
  width: 26px;
  height: 26px;
  display: block;
}
.cb-like {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: #e8d4f0;
  padding: 2px;
  flex-shrink: 0;
}
.cb-heart {
  position: relative;
  display: block;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  overflow: visible;
}
.cb-heart .cb-ico {
  position: absolute;
  inset: 0;
  width: 26px;
  height: 26px;
  transform-origin: center center;
  transition: transform 0.2s var(--ease-out);
}
.cb-like .heart-full { display: none; }
.cb-like .heart-empty { display: block; }
.cb-like.on .heart-empty { display: none; }
.cb-like.on .heart-full { display: block; }
.cb-like:hover .cb-heart:not(.pop) .cb-ico {
  transform: scale(1.1);
}
.cb-heart.pop .cb-ico {
  animation: likePop 0.42s var(--ease-out);
}
@keyframes likePop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cb-heart.pop .cb-ico { animation: none; }
}
/* reserve ~3 chars: 0–999 or 1k */
.cb-like-n {
  display: inline-block;
  min-width: 3ch;
  text-align: left;
  font-variant-numeric: tabular-nums;
  box-sizing: content-box;
}

/* mobile-tier-stack — single source of vertical rhythm under hero */
@media (max-width: 720px) {
  .community-toolbar {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 1400px;
    padding: 0 14px;
    margin: 12px auto;
    gap: 10px;
    box-sizing: border-box;
  }
  .community-bar {
    width: 100%;
    max-width: 100%;
    justify-content: space-between;
    box-sizing: border-box;
  }
}

/* Community ranking — read-only. Hide list is in _tier.css (loads last). */

/* Hero title/desc edit — body[data-editor] only */
body[data-editor="0"] #heroTitle,
body[data-editor="0"] #heroDesc {
  pointer-events: none;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}
body[data-editor="1"] #heroTitle,
body[data-editor="1"] #heroDesc {
  pointer-events: auto;
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
}

/* Editable fields: same padding on title + desc (aligned), air around text */
.hero > .hero-text > .hero-title,
.hero > .hero-text > .desc {
  margin: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.hero-title.is-editable,
.hero .desc.is-editable {
  outline: none;
  border-radius: 10px;
  cursor: text;
  padding: 8px 12px;
  margin: 0;
  box-sizing: border-box;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.hero-title.is-editable:hover,
.hero .desc.is-editable:hover {
  background: rgba(180, 140, 255, 0.06);
}
.hero-title.is-editable:focus,
.hero .desc.is-editable:focus {
  background: rgba(180, 140, 255, 0.1);
  box-shadow: 0 0 0 1.5px rgba(180, 140, 255, 0.35);
}

/* RankMe · tier — Board, rows, cards, toolbar, filters, portals, pool */

.page, main, .wrap, .pool-wrap {
  flex: 1 0 auto;
}

.tier-label, input, textarea, [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

.board-inner {
  width: 100%;
  border-radius: var(--radius);
  overflow: visible;
  border: 1px solid var(--line);
  background: var(--panel);
}

.tier-row {
  display: flex;
  align-items: stretch;
  min-height: var(--card-h);
  background: var(--panel);
  border-top: 1px solid var(--line);
  position: relative;
  overflow: visible;
  transition: background .18s, box-shadow .18s;
}

.tier-row:first-child {
  border-top: none;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.tier-row:last-child {
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

.tier-row:first-child .tier-label-wrap {
  border-top-left-radius: var(--radius);
  overflow: hidden;
}

.tier-row:last-child .tier-label-wrap {
  border-bottom-left-radius: var(--radius);
  overflow: hidden;
}

.tier-row:first-child .tier-side {
  border-top-right-radius: var(--radius);
}

.tier-row:last-child .tier-side {
  border-bottom-right-radius: var(--radius);
}

.tier-row:first-child .tier-label {
  border-top-left-radius: var(--radius);
}

.tier-row:last-child .tier-label {
  border-bottom-left-radius: var(--radius);
}

.tier-row.drag-over .tier-cards {
  background: linear-gradient(90deg,
    transparent 0%,
    hsla(var(--hue), 50%, 42%, .03) 16%,
    hsla(var(--hue), 50%, 42%, .03) 84%,
    transparent 100%);
}
.tier-row.drag-over .tier-cards::before,
.tier-row.drag-over .tier-cards::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  z-index: 3;
  background: hsla(var(--hue), 90%, 70%, .9);
  box-shadow: 0 0 8px 1px hsla(var(--hue), 85%, 62%, .45);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.tier-row.drag-over .tier-cards::before { top: 0; }
.tier-row.drag-over .tier-cards::after { bottom: 0; }
.tier-row.drag-over .tier-label-wrap {
  z-index: 4;
}

.tier-label-wrap {
  width: 118px;
  min-width: 118px;
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  position: relative;
  z-index: 1;
}

.tier-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px 8px;
  line-height: 1.15;
  white-space: pre-wrap;
  text-transform: uppercase;
  letter-spacing: .35px;
  caret-color: rgba(255, 255, 255, 0.35);
  background: linear-gradient(105deg,
    hsla(var(--hue), var(--sat), var(--light), .95) 0%,
    hsla(var(--hue), var(--sat), var(--light), .72) 48%,
    hsla(var(--hue), var(--sat), var(--light), .42) 100%
  );
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  cursor: text;
  outline: none;
  border: none;
  word-break: break-word;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.12);
}

.tier-label[contenteditable]:focus {
  background: linear-gradient(105deg,
    hsla(var(--hue), var(--sat), var(--light), 1) 0%,
    hsla(var(--hue), var(--sat), var(--light), .88) 100%
  );
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

.tier-cards {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: center;
  gap: 6px;
  padding: 6px 6px;
  min-height: var(--card-h);
  position: relative;
  overflow: visible;
}

.tier-side {
  width: 36px;
  min-width: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-left: 1px solid var(--line);
  padding: 4px 4px;
}

.tier-row.compact-side .tier-side {
  width: auto;
  min-width: 0;
  flex-direction: row;
  padding: 0 6px;
  gap: 3px;
}

.tier-side button {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: .85rem;
  padding: 0;
  line-height: 1;
  transition: color .15s, transform .15s, border-color .15s;
  width: 28px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tier-row.compact-side .tier-side button {
  width: 24px;
  height: 24px;
  font-size: .78rem;
}

.tier-side button:hover {
  color: var(--text);
  border-color: rgba(220,150,255,.5);
  transform: scale(1.08);
}

.tier-side button.gear.active {
  color: #f1eefb;
  border-color: rgba(220,180,255,.75);
  box-shadow: 0 0 8px rgba(200,160,255,.55), 0 0 16px rgba(180,130,240,.35);
  background: rgba(180,140,255,.12);
}

.tier-side button:disabled {
  opacity: .2;
  pointer-events: none;
}

.pill-btn .ico {
  font-size: 1rem;
  line-height: 1;
}

.pill-btn.add {
  color: var(--text);
  border-color: rgba(200,160,240,.4);
}

.pill-btn.add:hover {
  border-color: rgba(210,170,255,.9);
  color: #f4eefc;
  box-shadow: 0 0 14px rgba(190,140,240,.4), 0 0 28px rgba(160,100,230,.18);
  transform: translateY(-1px);
}

.pill-btn.fill {
  color: var(--text);
  border-color: rgba(200,160,240,.4);
}

.pill-btn.fill:hover {
  border-color: rgba(210,170,255,.9);
  color: #f4eefc;
  box-shadow: 0 0 14px rgba(190,140,240,.4), 0 0 28px rgba(160,100,230,.18);
  transform: translateY(-1px);
}

.pill-btn.danger {
  color: #ffb3b3;
  border-color: rgba(255,110,110,.35);
}

.pill-btn.danger:hover {
  background: rgba(255,90,90,.14);
  border-color: rgba(255,130,130,.85);
  color: #ffd0d0;
  box-shadow: 0 0 14px rgba(255,100,120,.35), 0 0 28px rgba(255,80,100,.15);
  transform: translateY(-1px);
}

.pill-btn.remove {
  display: none;
  background: var(--btn-bg);
  border-color: var(--btn-line);
  color: var(--btn-fg);
}
.pill-btn.remove.on {
  color: #ffd0d0;
  border-color: rgba(255, 130, 130, 0.85);
  background: rgba(255, 90, 90, 0.14);
}

.card-del {
  display: none;
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1.5px solid rgba(255, 180, 190, 0.9);
  border-radius: 50%;
  background: rgba(16, 10, 20, 0.92);
  color: #ffe0e4;
  cursor: pointer;
  z-index: 4;
  pointer-events: none;
}
.card-del::before,
.card-del::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
}
.card-del::before { transform: rotate(45deg); }
.card-del::after { transform: rotate(-45deg); }
body.pool-delete .pool .card-del { display: block; }
body.pool-delete .pool .card { cursor: pointer; }

.card:hover {
  transform: translateY(-2px) scale(1.04);
  filter: brightness(1.12) saturate(1.15);
  box-shadow:
    0 0 0 1.5px rgba(210, 180, 255, 0.9),
    0 10px 28px rgba(160, 100, 220, 0.4);
  z-index: 5;
}

.card.dragging {
  opacity: .25;
}

.card.floating {
  position: fixed;
  pointer-events: none;
  z-index: 999;
  opacity: 1;
  filter: brightness(1.08) saturate(1.1);
  box-shadow:
    0 0 0 2px rgba(230, 210, 255, 0.95),
    0 16px 40px rgba(160, 100, 230, 0.5);
  transform: scale(1.06);
}

.card.placeholder {
  opacity: 0.45;
  outline: 2px dashed rgba(200,160,240,0.7);
  outline-offset: -2px;
  background: rgba(160,120,220,0.12);
  box-shadow: 0 0 14px rgba(180,120,255,0.2);
  border-radius: var(--radius-sm, 9px);
}

.card.placeholder img {
  opacity: 0.35;
  filter: grayscale(0.3);
  visibility: visible;
}

.row-settings {
  position: absolute;
  background: #211c33;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
  width: 260px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  z-index: 300;
  display: none;
}

.row-settings.open {
  display: block;
}

.row-settings label {
  font-size: .72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .5px;
  display: block;
  margin-bottom: 6px;
}

.hue-slider {
  --thumb: hsl(200, 85%, 58%);
  --thumb-glow: hsla(200, 90%, 60%, .45);
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  margin-bottom: 16px;
  touch-action: none;
  background: linear-gradient(90deg,#ff5b5b,#ffd25b,#7bff7b,#5bd0ff,#8f6bff,#ff6bd6,#ff5b5b);
  outline: none;
  border: none;
  cursor: pointer;
  color: transparent;
  caret-color: transparent;
  -webkit-text-fill-color: transparent;
  accent-color: transparent;
}

.hue-slider:focus, .hue-slider:focus-visible {
  outline: none;
  box-shadow: none;
}

.hue-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(90deg,#ff5b5b,#ffd25b,#7bff7b,#5bd0ff,#8f6bff,#ff6bd6,#ff5b5b);
}

.hue-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--thumb);
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 0 10px var(--thumb-glow);
  margin-top: -5px;
  cursor: pointer;
  transition: box-shadow .15s, transform .15s;
}

.hue-slider:active::-webkit-slider-thumb {
  transform: scale(1.08);
}

.hue-slider::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(90deg,#ff5b5b,#ffd25b,#7bff7b,#5bd0ff,#8f6bff,#ff6bd6,#ff5b5b);
}

.hue-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--thumb);
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 0 10px var(--thumb-glow);
  cursor: pointer;
}

.row-settings .rs-actions {
  display: flex;
  gap: 8px;
}

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Equal size for Add / Fill / Clear — same height and min-width */
.toolbar-actions .pill-btn {
  min-width: 108px;
  height: 38px;
  padding: 0 16px;
  box-sizing: border-box;
  justify-content: center;
}

.size-ctrl {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-dim);
  font-size: .8rem;
  font-weight: 700;
}

.size-ctrl input[type=range] {
  width: 120px;
  height: 6px;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(90deg, #5a4a7a, #b79bf0 50%, #e6a9e8);
  outline: none;
  cursor: pointer;
  border: none;
  margin: 0;
  padding: 0;
  accent-color: transparent;
  color: transparent;
  caret-color: transparent;
  -webkit-text-fill-color: transparent;
}

.size-ctrl input[type=range]:focus, .size-ctrl input[type=range]:focus-visible {
  outline: none;
  box-shadow: none;
}

.size-ctrl input[type=range]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(90deg, #5a4a7a, #b79bf0 50%, #e6a9e8);
}

.size-ctrl input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #c9a8f0;
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 0 10px rgba(200,160,255,.45);
  margin-top: -5px;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: transform .15s, box-shadow .15s;
}

.size-ctrl input[type=range]:active::-webkit-slider-thumb {
  transform: scale(1.08);
}

.size-ctrl input[type=range]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(90deg, #5a4a7a, #b79bf0 50%, #e6a9e8);
}

.size-ctrl input[type=range]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #c9a8f0;
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 0 10px rgba(200,160,255,.45);
  cursor: pointer;
}

.size-ctrl input[type=range]::-moz-range-progress {
  background: transparent;
}

.size-reset {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #171327;
  color: var(--text-dim);
  cursor: pointer;
  font-size: .95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}

.size-reset:hover {
  color: var(--text);
  border-color: rgba(220,150,255,.5);
  transform: rotate(-40deg);
}

.faction-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0;
}

.portals-bar {
  display: flex;
  width: 100%;
  height: 34px;
  border-radius: 12px;
  overflow: visible;
  margin-bottom: 16px;
  gap: 3px;
  padding: 0;
  background: transparent;
}

.portals-bar[hidden] {
  display: none;
}

.portal-slot {
  flex: 1;
  min-width: 0;
  position: relative;
  cursor: pointer;
  border-radius: 8px;
  min-height: 36px;
  transition: filter .18s, box-shadow .18s, transform .15s, background .18s, border-color .18s, opacity .18s;
  border: 1.5px solid rgba(255,255,255,0.55);
  opacity: 1;
}

.portal-slot:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 14px var(--glow, rgba(180,140,240,0.35));
}

.portal-slot.drag-over {
  border-color: rgba(255,255,255,0.85);
  filter: brightness(1.35) saturate(1.3);
  box-shadow: 0 0 14px var(--glow, rgba(200,160,255,0.7)), 0 0 32px var(--glow, rgba(180,120,255,0.45));
  z-index: 2;
  transform: scaleY(1.12);
}

.portal-slot::after {
  content: none;
  display: none;
}

.portal-btn {
  --rgb: linear-gradient(90deg,#ff6b6b,#f7c948,#7bed9f,#70a1ff,#a29bfe,#ff6b81,#ff6b6b);
  flex-shrink: 0;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .6px;
  cursor: pointer;
  color: #fff;
  border: 2px solid transparent;
  background: linear-gradient(#171327, #171327) padding-box, var(--rgb) border-box;
  background-size: 100% 100%, 200% 100%;
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  animation: portalRgb 5s linear infinite alternate;
  transition: filter .2s, box-shadow .2s;
}

.portal-btn:hover {
  filter: brightness(1.25) saturate(1.2);
  box-shadow: 0 0 18px rgba(180,140,255,0.45);
}

.portal-btn.active {
  filter: brightness(1.15) saturate(1.25);
  box-shadow: 0 0 26px rgba(180,140,255,0.65), 0 0 8px rgba(255,150,200,0.35);
}

.faction-btn {
  --fhue: 220;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  font-size: .72rem;
  border: 1px solid var(--line);
  background: #171327;
  color: var(--text-dim);
  cursor: pointer;
  text-transform: uppercase;
  transition: all .15s;
}

.faction-btn img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body:not(.theme-gold) .faction-btn img {
  clip-path: circle(48% at 50% 50%);
}

.faction-btn.no-icon {
  padding-left: 14px;
}

.faction-btn.icon-only {
  padding: 6px 8px;
  gap: 0;
}

.faction-btn.icon-only img {
  width: 22px;
  height: 22px;
}

body:not(.theme-gold) .faction-btn.icon-only img {
  clip-path: none;
}

.faction-btn:hover {
  color: var(--text);
}

.faction-btn.active {
  color: #fff;
  border-color: hsl(var(--fhue),70%,60%);
  background: hsl(var(--fhue),55%,28%);
  box-shadow: none;
}

.faction-btn.active.legendary {
  border-color: #d4b8f0;
  background: linear-gradient(120deg, rgba(180,150,220,.35), rgba(200,180,230,.2), rgba(230,160,200,.3));
  box-shadow: none;
}

.faction-btn.active.master {
  border-color: #c9b4f0;
  background: linear-gradient(135deg, rgba(160,130,210,.4), rgba(100,80,140,.35));
  box-shadow: none;
  color: #f4f1fc;
}

.faction-btn.active.all-mix {
  border-color: #c9b4f0;
  background: linear-gradient(120deg, #5a3a8a, #3a4a7a, #6a3a6a);
  box-shadow: none;
}

/* Icon-only filters (Marvel Tōkon, etc.): ring only, icons stay clear */
.faction-filters.icon-only .faction-btn {
  background: #171327;
  border: 1.5px solid rgba(180, 140, 255, 0.28);
  box-shadow: none;
}
.faction-filters.icon-only .faction-btn:hover {
  color: var(--text);
  border-color: transparent;
  background:
    linear-gradient(#171327, #171327) padding-box,
    hsl(var(--fhue), 72%, 62%) border-box;
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}
.faction-filters.icon-only .faction-btn.active,
.faction-filters.icon-only .faction-btn.active.legendary,
.faction-filters.icon-only .faction-btn.active.master,
.faction-filters.icon-only .faction-btn.active.all-mix {
  color: #fff;
  background:
    linear-gradient(#171327, #171327) padding-box,
    hsl(var(--fhue), 80%, 64%) border-box;
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  border-color: transparent;
  box-shadow: 0 0 12px hsla(var(--fhue), 80%, 58%, 0.42);
}
.faction-filters.icon-only .faction-btn.all-mix:hover,
.faction-filters.icon-only .faction-btn.active.all-mix {
  background:
    linear-gradient(#171327, #171327) padding-box,
    linear-gradient(120deg, #b79bf0, #8ec5ff, #e6a9e8, #c9a3ff, #b79bf0) border-box;
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  background-size: auto, 220% 100%;
  border-color: transparent;
}
.faction-filters.icon-only .faction-btn.active.all-mix {
  animation: portalRgb 5s linear infinite alternate;
  box-shadow: 0 0 14px rgba(180, 130, 255, 0.4);
}

.pool {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  min-height: 120px;
  padding: 10px 4px 4px;
  border-radius: 0;
  background: transparent;
}

body.card-square {
  --card-h: var(--card-w);
}

body.card-square .card:hover {
  transform: translateY(-4px) scale(1.08);
  filter: brightness(1.18) saturate(1.25);
  box-shadow:
    0 0 0 1.5px rgba(230, 200, 140, 0.9),
    0 0 18px rgba(200, 160, 255, 0.45),
    0 10px 28px rgba(180, 120, 230, 0.45);
  z-index: 6;
}

body.card-square .card.floating {
  filter: brightness(1.25) saturate(1.3);
  box-shadow:
    0 0 0 2px rgba(255, 220, 160, 0.95),
    0 0 20px rgba(200, 160, 255, 0.5),
    0 16px 40px rgba(0, 0, 0, 0.5);
  transform: scale(1.1);
}

body.card-square .card.dragging {
  opacity: .3;
  filter: grayscale(.15);
}

body.card-square .card.placeholder {
  outline: 2px dashed rgba(230,200,140,.75);
  background: rgba(180,140,255,.14);
  box-shadow: 0 0 16px rgba(200,160,255,.3);
}

body.no-factions .faction-filters {
  display: none;
}

body.theme-gold .card:hover {
  box-shadow:
    0 0 0 1.5px rgba(220, 195, 255, 0.95),
    0 10px 26px rgba(180, 120, 230, 0.4);
  filter: brightness(1.08);
}

body.theme-gold .card.floating {
  box-shadow:
    0 0 0 2px rgba(230, 210, 255, 0.95),
    0 14px 36px rgba(180, 120, 230, 0.45);
  filter: brightness(1.08);
}

body.theme-gold .faction-btn.active, body.theme-gold .faction-btn.active.legendary, body.theme-gold .faction-btn.active.master, body.theme-gold .faction-btn.active.all-mix {
  color: #f0eafc;
  border-color: rgba(201,168,240,0.7);
  background: rgba(201,168,240,0.14);
  box-shadow: none;
}

body.theme-gold .faction-btn img {
  clip-path: none;
  filter: none;
  border-radius: 0;
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.dd-trigger {
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: inherit;
  font-weight: 700;
  font-size: .82rem;
  padding: 11px 16px;
  cursor: pointer;
  min-height: 44px;
  white-space: nowrap;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}

.dd-trigger:hover {
  border-color: rgba(200,160,240,.45);
}

.dd.open .dd-trigger {
  border-radius: 999px;
  border-color: rgba(200,160,240,.6);
  box-shadow: var(--glow-accent);
  background: rgba(255,255,255,0.055);
}

.dd.open .dd-trigger svg {
  transform: rotate(180deg);
}

.card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.dd-menu li:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text);
}

.dd-menu li[aria-selected="true"] {
  background: linear-gradient(135deg,#c9a3ff,#e6a9e8);
  color: #1a1226;
}

.search-box, .dd-trigger {
  background: rgba(22, 18, 36, 0.92);
  border-color: rgba(160, 130, 210, 0.28);
}

.search-box:focus-within, .dd.open .dd-trigger {
  background: rgba(28, 22, 46, 0.98);
  border-color: rgba(200, 160, 240, 0.55);
  box-shadow: 0 0 0 1px rgba(180,140,255,.12), 0 0 20px rgba(140,100,220,.18);
}

.dd-menu li {
  padding: 11px 14px;
  border-radius: 12px;
  font-weight: 700;
  font-size: .83rem;
  color: var(--text-dim);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  margin: 2px 0;
  background: transparent;
  text-align: center;
}

.dd {
  position: relative;
  flex-shrink: 0;
}

.dd-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: auto;
  min-width: 160px;
  z-index: 40;
  list-style: none;
  margin: 0;
  padding: 8px;
  background: #1b1729;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px) scale(0.97);
  transform-origin: top center;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring), visibility var(--dur-base);
  overflow: hidden;
  left: 50%;
  box-sizing: border-box;
}

.dd.open .dd-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

.dd-menu li, .dd-menu button {
  border-radius: 999px;
  text-align: center;
  margin: 4px 0;
  padding: 10px 14px;
}

.card, .card * {
  touch-action: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

.tier-cards, .pool {
  touch-action: pan-y;
}

.tier-cards .card, .pool .card {
  touch-action: none;
}

.card.dragging, .card.floating {
  touch-action: none;
}

.dd-trigger, .dd .dd-trigger {
  min-height: 32px;
  height: 32px;
  padding: 0 14px;
  font-size: 0.72rem;
  font-weight: 700;
  gap: 6px;
  border-radius: 999px;
  border-width: 1.5px;
  line-height: 1;
  box-sizing: border-box;
}

.dd-trigger svg {
  transition: transform var(--dur-base) var(--ease-out);
  opacity: .75;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

body.theme-gold .faction-btn, body.theme-gold .faction-btn.active, body.theme-gold .faction-btn.active.legendary, body.theme-gold .faction-btn.active.master, body.theme-gold .faction-btn.active.all-mix, body.theme-gold .faction-btn:hover {
  box-shadow: none;
  filter: none;
}

body.theme-gold .faction-btn.active {
  border-color: rgba(201,168,240,0.75);
  background: rgba(201,168,240,0.16);
}
.pool-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

body.blank-mode .pool-header {
  justify-content: space-between;
  flex-wrap: nowrap;
}

.pool-header .faction-filters {
  flex: 1 1 auto;
  min-width: 0;
}

.pool-header .portal-btn {
  margin-left: auto;
  flex-shrink: 0;
}

.pool-remove {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: auto;
  padding: 8px 16px 8px 14px;
  border-radius: 999px;
  box-sizing: border-box;
  flex-shrink: 0;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-line);
  cursor: pointer;
}
.pool-remove-ico {
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("../assets/icons/tb-remove.svg") center / contain no-repeat;
  mask: url("../assets/icons/tb-remove.svg") center / contain no-repeat;
}
body.blank-mode .pool-remove { display: none; }
@media (min-width: 721px) {
  body.blank-mode .pool-remove { display: inline-flex; }
}
.pool-remove:hover {
  border-color: rgba(255, 150, 160, 0.7);
  color: #ffd4d8;
}
.pool-remove.on,
.pool-remove[aria-pressed="true"] {
  color: #ffd0d0;
  border-color: rgba(255, 130, 130, 0.85);
  background: rgba(255, 90, 90, 0.14);
  box-shadow: 0 0 14px rgba(255, 100, 120, 0.28);
}

.card {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 10px;
  overflow: hidden;
  cursor: grab;
  position: relative;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  box-sizing: border-box;
  /* plate under art — always visible via padding frame + fill */
  padding: 3px;
  background: linear-gradient(165deg, #322a52 0%, #1a1528 55%, #12101a 100%);
  box-shadow:
    0 0 0 1px rgba(180, 140, 240, 0.28),
    0 4px 14px rgba(0, 0, 0, 0.45);
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  border-radius: 7px;
  background: transparent;
}

body.card-square .card {
  border-radius: 12px;
  padding: 3px;
  background: linear-gradient(145deg, #2e2640 0%, #16121f 100%);
  box-shadow:
    0 0 0 1px rgba(220, 180, 120, 0.5),
    0 2px 10px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

body.card-square .card img {
  border-radius: 9px;
  object-fit: cover;
  background: transparent;
}

body.theme-gold .card {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 10px;
  overflow: hidden;
  padding: 3px;
  background: linear-gradient(160deg, #1e1a2c 0%, #100e18 100%);
  box-shadow:
    0 0 0 1.5px rgba(201, 168, 240, 0.55),
    0 2px 10px rgba(0, 0, 0, 0.4);
}

body.theme-gold .card img {
  object-position: center center;
  border-radius: 7px;
  background: transparent;
}

.toolbar {
  max-width: 1400px;
  margin: 0 auto 16px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-sizing: border-box;
}
.tb-icons,
.tb-row2,
.tb-share {
  display: contents;
}
.tb-g,
.tb-split,
#shareBtn {
  display: none;
}
.toolbar .upload-remix {
  cursor: pointer;
  background: var(--btn-bg);
  border: 1px solid rgba(160, 210, 190, 0.38);
  color: #d4efe4;
  box-shadow: none;
}
.toolbar .upload-remix:hover {
  border-color: rgba(180, 230, 200, 0.7);
  color: #fff;
  box-shadow: 0 0 12px rgba(120, 200, 170, 0.22);
  filter: none;
}
@media (min-width: 721px) {
  .toolbar-actions { order: 1; }
  .size-ctrl { order: 2; }
  .remix-btn { order: 3; margin-left: auto; }
  .toolbar .upload-remix { order: 4; }
  .save-btn { order: 5; }
  .share-group { order: 6; margin-left: 0; }
  .toolbar .download-btn { order: 7; }
  body.blank-mode .share-group { margin-left: auto; }
}

.board {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto 16px;
  padding: 0 24px;
  box-sizing: border-box;
}

.pool-wrap {
  max-width: 1400px;
  margin: 0 auto 60px;
  padding: 16px 18px 20px;
  box-sizing: border-box;
  background:
    radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(165deg, rgba(42, 34, 68, 0.75) 0%, rgba(22, 18, 36, 0.88) 100%);
  background-size: 14px 14px, 100% 100%;
  border: 1px solid rgba(180, 140, 255, 0.16);
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(200, 170, 255, 0.06),
    0 12px 40px rgba(0, 0, 0, 0.28);
}
@media (max-width: 720px) {

  .board {
    margin: 0 auto 12px;
    padding: 0 14px;
  }

  .toolbar {
    margin: 0 auto 12px;
    padding: 12px 12px 14px;
    justify-content: stretch;
    align-items: stretch;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 12px;
  }

  .tb-icons {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    width: 100%;
    gap: 8px;
  }
  .toolbar-actions,
  .tb-share {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: none;
    align-items: stretch;
    gap: 6px;
    width: auto;
    margin: 0;
  }
  .tb-split {
    display: block;
    width: 1px;
    align-self: stretch;
    background: rgba(200, 170, 255, 0.22);
  }
  .tb-row2 {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 12px;
  }
  .share-group {
    display: none;
  }
  #shareBtn {
    display: inline-flex;
  }

  .toolbar .pill-btn:not(.upload-remix) {
    min-width: 0;
    max-width: none;
    width: 100%;
    height: 52px;
    padding: 6px 4px 4px;
    flex-direction: column;
    gap: 4px;
    border-radius: 12px;
    background: var(--btn-bg);
    border: 1px solid var(--btn-line);
    box-shadow: none;
    color: var(--btn-fg);
    transform: none;
    filter: none;
  }
  .toolbar .pill-btn .ico {
    display: none;
  }
  .toolbar .tb-g {
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    background: currentColor;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
  }
  .toolbar .pill-btn.add .tb-g {
    -webkit-mask-image: url("../assets/icons/tb-add.svg");
    mask-image: url("../assets/icons/tb-add.svg");
  }
  .toolbar .pill-btn.fill .tb-g {
    -webkit-mask-image: url("../assets/icons/tb-fill.svg");
    mask-image: url("../assets/icons/tb-fill.svg");
  }
  .toolbar .pill-btn.danger .tb-g {
    -webkit-mask-image: url("../assets/icons/tb-clear.svg");
    mask-image: url("../assets/icons/tb-clear.svg");
  }
  .toolbar .pill-btn.remove .tb-g {
    -webkit-mask-image: url("../assets/icons/tb-remove.svg");
    mask-image: url("../assets/icons/tb-remove.svg");
  }
  body.blank-mode .toolbar .pill-btn.remove {
    display: flex;
  }
  .toolbar #shareBtn .tb-g {
    -webkit-mask-image: url("../assets/icons/tb-share.svg");
    mask-image: url("../assets/icons/tb-share.svg");
  }
  .toolbar .remix-btn .tb-g {
    -webkit-mask-image: url("../assets/icons/tb-remix.svg");
    mask-image: url("../assets/icons/tb-remix.svg");
  }
  .toolbar .save-btn .tb-g {
    -webkit-mask-image: url("../assets/icons/tb-save.svg?v=2");
    mask-image: url("../assets/icons/tb-save.svg?v=2");
  }
  .toolbar .tb-t {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    color: var(--text-dim);
  }
  .toolbar .pill-btn.danger {
    color: #ffb3b3;
    background: var(--btn-bg);
    border-color: rgba(255, 110, 110, 0.42);
  }
  .toolbar .pill-btn.save-btn {
    color: var(--btn-fg);
    min-width: 0;
    height: 52px;
    padding: 6px 2px 4px;
    border: 1.5px solid transparent;
    background: var(--btn-core) padding-box, var(--btn-holo) border-box;
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    box-shadow: var(--btn-glow);
  }
  .toolbar .remix-btn {
    min-width: 0;
    height: 52px;
    padding: 6px 2px 4px;
  }
  .toolbar .pill-btn:not(.upload-remix):hover,
  .toolbar .save-btn:hover,
  .toolbar .remix-btn:hover {
    transform: none;
    filter: brightness(1.12);
    border-color: var(--btn-line-hot);
    box-shadow: none;
  }
  .toolbar .pill-btn.danger:hover,
  .toolbar .pill-btn.remove.on {
    transform: none;
    filter: none;
    background: rgba(255, 90, 90, 0.12);
    border-color: rgba(255, 130, 130, 0.85);
    color: #ffd0d0;
    box-shadow: 0 0 14px rgba(255, 100, 120, 0.32);
  }
  .toolbar .pill-btn.save-btn:hover {
    filter: brightness(1.1);
    border-color: transparent;
    box-shadow: 0 0 22px rgba(190, 140, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
  .toolbar .pill-btn:active {
    transform: scale(0.96);
  }

  .size-ctrl {
    flex: 1 1 auto;
    min-width: 0;
  }
  .size-ctrl input[type=range] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
  .toolbar .download-btn {
    flex: 0 1 48%;
    min-width: 140px;
    height: 40px;
    padding: 0 14px;
    font-size: 0.82rem;
  }
  .toolbar .upload-remix {
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 40px;
    padding: 0 14px;
    flex-direction: row;
    border-radius: 999px;
    font-size: 0.82rem;
    background: var(--btn-bg);
    border: 1px solid rgba(160, 210, 190, 0.38);
    color: #d4efe4;
    box-shadow: none;
  }
  .toolbar .upload-remix:hover {
    filter: none;
    border-color: rgba(180, 230, 200, 0.7);
    color: #fff;
    box-shadow: 0 0 12px rgba(120, 200, 170, 0.22);
  }

  body.community-view .toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 12px;
  }
  body.community-view .tb-icons {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: none;
    justify-content: flex-end;
    width: auto;
    flex: none;
  }
  body.community-view .tb-share {
    display: flex;
    grid-template-columns: none;
    gap: 6px;
    flex: none;
  }
  body.community-view .tb-share .pill-btn {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
  }
  body.community-view .tb-row2 {
    display: contents;
  }
  body.community-view .size-ctrl {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  body.community-view .size-ctrl input[type=range] {
    max-width: 132px;
  }
  body.community-view .download-btn {
    grid-column: 1 / -1;
    grid-row: 2;
    flex: none;
    width: 100%;
    min-width: 0;
  }

  .pool-wrap {
    margin: 0 auto 40px;
    padding: 12px 12px 16px;
    overflow-x: hidden;
  }

  .board, .toolbar, .pool-wrap, footer.site {
    padding-left: 14px;
    padding-right: 14px;
  }

  .tier-label-wrap {
    width: 56px;
    min-width: 56px;
    flex-shrink: 0;
  }

  .tier-label {
    font-size: .6rem;
    padding: 3px 4px;
  }

  .tier-side, .tier-row.compact-side .tier-side {
    width: 32px;
    min-width: 32px;
    flex-direction: column;
    padding: 4px 2px;
    gap: 3px;
  }

  .tier-side button, .tier-row.compact-side .tier-side button {
    width: 26px;
    height: 24px;
    font-size: .75rem;
  }

  body.card-square {
    --card-h: var(--card-w);
  }

  .toolbar-actions .pill-btn {
    min-width: 0;
  }

  .faction-filters::-webkit-scrollbar {
    display: none;
  }

  .faction-btn {
    flex: 0 0 auto;
  }

  .faction-filters:not(.icon-only) .faction-btn,
  .faction-filters:not(.icon-only) .faction-btn.active,
  .faction-filters:not(.icon-only) .faction-btn:hover,
  .faction-filters:not(.icon-only) .faction-btn:focus {
    box-shadow: none;
    filter: none;
    outline: none;
    background-clip: padding-box;
  }

  .faction-btn::before, .faction-btn::after, .faction-btn.active::before, .faction-btn.active::after {
    display: none;
    content: none;
    box-shadow: none;
    background: none;
  }

  .faction-filters {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
    max-width: 100%;
    gap: 8px;
    padding-bottom: 6px;
    box-shadow: none;
    background: transparent;
  }

  .pool-header {
    flex-direction: column;
    align-items: stretch;
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    margin: 0 0 10px;
    overflow: visible;
  }

  .faction-filters, #factionFilters {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 4px 2px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    box-sizing: border-box;
  }

  .faction-filters::-webkit-scrollbar, #factionFilters::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0;
  }

  .faction-btn, .faction-filters .faction-btn, #factionFilters .faction-btn {
    flex: 0 0 auto;
    flex-shrink: 0;
    white-space: nowrap;
    max-width: none;
    box-sizing: border-box;
  }

  .faction-btn, .faction-btn.active, .faction-btn:hover {
    box-shadow: none;
  }

  .faction-btn.active {
    filter: none;
    box-shadow: none;
  }

  body.theme-gold .faction-filters, body.theme-gold #factionFilters, .faction-filters, #factionFilters {
    box-shadow: none;
    background: transparent;
    border: none;
    outline: none;
  }

  .faction-btn, .faction-btn.active, body.theme-gold .faction-btn.active {
    box-shadow: none;
  }

  .tier-row {
    max-width: 100%;
  }

  .tier-cards {
    min-width: 0;
  }

  .pool-header .faction-filters,
  .pool-header #factionFilters {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 2px;
  }
  .pool-header .portal-btn {
    margin-left: 0;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    justify-content: center;
  }
  body.blank-mode .pool-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  body.blank-mode .pool-header .portal-btn {
    width: auto;
    margin-left: auto;
  }
  body.blank-mode .pool-remove {
    display: none;
  }

}

@media (hover: none) {

  .card:hover {
    transform: none;
    filter: none;
    box-shadow: none;
  }

  body.card-square .card:hover {
    transform: none;
    filter: none;
  }

  body.theme-gold .card:hover {
    filter: none;
  }

}


/* Landscape cards (Dota 2) */
body.card-landscape {
  --card-h: calc(var(--card-w) * 0.5625);
}

body.card-landscape .card {
  border-radius: 4px;
  overflow: hidden;
  background: rgba(12, 10, 20, 0.4);
  box-shadow: 0 0 0 1px rgba(180, 140, 255, 0.2);
}

body.card-landscape .card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 3px;
  background: transparent;
}

body.card-landscape .card:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 0 1.5px rgba(200, 170, 255, 0.5), 0 10px 28px rgba(0, 0, 0, 0.35);
  filter: brightness(1.08);
}

body.card-landscape .card.floating {
  box-shadow: 0 0 0 2px rgba(200, 170, 255, 0.55), 0 14px 36px rgba(0, 0, 0, 0.45);
  filter: brightness(1.12);
}

/* Thin plate: same frame as default cards, less padding so art is larger */
body.card-thin .card {
  padding: 2px;
}

body.card-thin .card img {
  border-radius: 8px;
  object-fit: cover;
}


.tier-label-line {
  display: block;
  width: 100%;
  text-align: center;
  line-height: 1.15;
  white-space: pre-wrap;
}

/* community-view — one hide list, last in cascade */
body.community-view .toolbar-actions,
body.community-view .tb-split,
body.community-view #remixUploadWrap,
body.community-view #poolWrap,
body.community-view #portalBtn,
body.community-view #factionFilters,
body.community-view .tier-side {
  display: none;
}
body.community-view .card {
  pointer-events: none;
  cursor: default;
}
body.community-view .tier-label {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

/* RankMe · battle — Battle mode UI (loaded with battle-anim overrides) */

#battleStars {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s ease;
}

#battleStars.is-on {
  opacity: 1;
}

.battle-glow {
  position: fixed;
  left: 50%;
  bottom: -22%;
  width: 130vw;
  height: 58vh;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(141, 100, 255, 0.18) 0%,
    rgba(115, 83, 255, 0.07) 46%,
    transparent 72%
  );
}

.battle-page,
.battle-overlay {
  position: relative;
  z-index: 1;
}

.battle-page {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 24px 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - 148px);
}

.battle-arena {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 auto;
}

.battle-arena:has(.battle-mode-select) {
  max-width: 920px;
}

.battle-footer {
  width: 100%;
  max-width: 920px;
  margin-top: auto;
  padding: 24px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  flex: 0 0 auto;
}

.battle-footer .battle-how {
  margin: 0;
  max-width: 420px;
  padding: 0 12px;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(180, 170, 200, 0.72);
  text-align: center;
}

/* Back — one solid pill style */
.battle-back,
button.battle-back,
.battle-footer .battle-back {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: 40px;
  padding: 0 20px;
  margin: 0 auto;
  border-radius: 999px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(235, 228, 250, 0.95);
  background: rgba(28, 22, 42, 0.95);
  border: 1.5px solid rgba(170, 140, 220, 0.4);
  box-shadow: 0 0 0 1px rgba(120, 90, 180, 0.12), 0 4px 16px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.battle-back:hover,
button.battle-back:hover,
.battle-footer .battle-back:hover {
  color: #fff;
  border-color: rgba(200, 170, 255, 0.65);
  box-shadow: 0 0 0 1px rgba(180, 140, 255, 0.2), 0 0 20px rgba(160, 120, 255, 0.25);
  transform: translateY(-1px);
}

.battle-back:active,
button.battle-back:active {
  transform: translateY(0);
}


.battle-question {
  font-size: 1.6rem;
  font-weight: 900;
  margin: 0 0 6px;
  line-height: 1.2;
}

.battle-sub {
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.88rem;
  margin: 0 0 12px;
}

.battle-card-frame .fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 3rem;
  font-weight: 900;
  color: rgba(255,255,255,0.18);
}

.battle-how {
  max-width: 420px;
  margin: 0;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(180, 170, 200, 0.72);
  text-align: center;
}

.battle-vs-row.entering .battle-card {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
}

.battle-vs-row.enter-active .battle-card {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.42s var(--ease-out), transform 0.42s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .battle-vs-row.entering .battle-card,
  .battle-vs-row.enter-active .battle-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.battle-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6,4,10,.78);
  backdrop-filter: blur(10px);
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}

.battle-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.battle-panel {
  background: #1b1729;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 36px 32px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  transform: scale(.92) translateY(14px);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease-spring), opacity var(--dur-base) var(--ease-out);
}

.battle-overlay.open .battle-panel {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.battle-panel h2 {
  margin: 0 0 10px;
  font-size: 1.3rem;
}

.battle-panel p {
  color: var(--text-dim);
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.6;
  margin: 0 0 22px;
}

.battle-panel .row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

button, .cta, .btn, .btn-mini, .pill-btn, .download-btn, .login-btn, a.btn, a.cta, a.pill-btn, a.btn-mini, .battle-panel .btn, .reset-link {
  text-decoration: none;
}

.battle-mode-card:hover {
  transform: translateY(-3px);
  border-color: rgba(200,160,240,.5);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

.battle-mode-full .bmc-electric {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 2px;
  background: conic-gradient(
    from var(--elec-angle, 0deg),
    #ff6b9d, #ff9f6b, #ffe66b, #6bffb8, #6bc5ff, #b79bff, #ff6b9d
  );
  -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,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: elecSpin 3s linear infinite;
  opacity: .85;
  pointer-events: none;
  z-index: 0;
}

.battle-mode-full:hover .bmc-electric {
  opacity: 1;
  padding: 2.5px;
  filter: brightness(1.25) saturate(1.2);
  box-shadow: 0 0 18px rgba(255,120,180,.45),
    0 0 36px rgba(120,180,255,.3);
  animation-duration: 1.2s;
}

.battle-mode-full .bmc-icon,
.battle-mode-full .bmc-title,
.battle-mode-full .bmc-meta,
.battle-mode-full .bmc-desc,
.battle-mode-full .bmc-resume {
  position: relative;
  z-index: 1;
}

.battle-mode-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  vertical-align: middle;
}

.battle-mode-badge.quick {
  background: rgba(200,160,240,.2);
  color: #e0c8ff;
}

.battle-mode-badge.full {
  background: linear-gradient(90deg, rgba(255,107,157,.25), rgba(183,155,255,.25));
  color: #ffd0e8;
}

.battle-progress-in-arena {
  width: 100%;
  max-width: 400px;
  margin: 0 auto 20px;
  padding: 0 8px;
  box-sizing: border-box;
}

.battle-progress-wrap {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  width: 100%;
  max-width: 400px;
}

.battle-progress-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(32, 24, 48, 0.95);
  overflow: hidden;
  max-width: 420px;
}

.battle-progress-bar .fill {
  display: block;
  height: 100%;
  width: 0%;
  max-width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff6b9d, #ff9f6b, #e6a0ff, #b79bf0);
  transition: width 0.35s ease-out;
}

.battle-progress-label {
  font-size: 0.65rem;
  font-weight: 500;
  color: rgba(200, 190, 220, 0.55);
}

.download-modal-actions, .battle-panel-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.download-modal-actions .btn, .download-modal-actions button, .battle-panel-actions .btn, .battle-panel-actions a.btn, .battle-panel-actions button {
  width: 100%;
  min-height: 40px;
  margin: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}



.battle-card.equal-pick {
  border: 2px solid transparent;
  background: linear-gradient(#1a1528, #1a1528) padding-box,
    linear-gradient(130deg, #be9dee, #d1cdf4) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  filter: brightness(1.05);
}

.battle-mid-btn img {
  width: 22px;
  height: 22px;
  display: block;
  pointer-events: none;
}

.battle-mid-btn.is-disabled, .battle-mid-btn:disabled {
  opacity: 0.3;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.battle-vs-divider {
  font-weight: 900;
  font-size: 1.05rem;
  color: rgba(210, 190, 240, 0.75);
  flex-shrink: 0;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 4px 0;
}

.battle-result-list li:hover {
  background: rgba(255,255,255,0.04);
}

.battle-result-list img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: #241d38;
}

.battle-result-list .name {
  font-weight: 700;
  font-size: 0.85rem;
  color: #f0eafc;
}

.battle-result-ph {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #241d38;
  flex-shrink: 0;
}

.battle-panel .btn.primary, .battle-panel a.btn.primary {
  width: 100%;
  min-height: 46px;
}

.battle-panel .btn.ghost, .battle-panel a.btn.ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
}

.battle-panel-actions {
  gap: 10px;
  width: 100%;
}

.battle-panel-actions .btn, .battle-panel-actions a.btn {
  width: 100%;
  box-sizing: border-box;
}

.confetti-piece {
  position: fixed;
  top: -20px;
  z-index: 210;
  border-radius: 2px;
  pointer-events: none;
  animation-name: confettiFall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}




.battle-vs-divider, .battle-vs-center .battle-vs-divider {
  background: none;
  background-color: transparent;
  background-image: none;
  border: 0;
  outline: none;
  box-shadow: none;
  border-radius: 0;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  line-height: 1;
  font-size: 1rem;
  font-weight: 900;
  color: rgba(210, 190, 240, 0.7);
  -webkit-appearance: none;
}

.battle-mid-btn {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(200,160,240,.45);
  background: linear-gradient(135deg,rgba(40,32,58,.95),rgba(22,18,36,.98));
  color: #d4c4ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform .15s ease,border-color .15s ease,box-shadow .15s ease,filter .15s ease;
  box-shadow: none;
}

.battle-mid-btn:hover {
  transform: translateY(-2px);
  background: rgba(50, 38, 78, 0.98);
  box-shadow: 0 0 18px rgba(180,120,255,.4);
  filter: brightness(1.08);
  border-color: rgba(220,180,255,.75);
}

.battle-mid-btn:active {
  transform: translateY(0) scale(.96);
}

.battle-mid-btn.is-disabled,.battle-mid-btn:disabled {
  opacity: .35;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}



.battle-vs-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: nowrap;
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
}

.battle-vs-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-shrink: 0;
  padding: 0 6px;
  z-index: 3;
  flex: 0 0 auto;
  align-self: center;
  transform: none;
  transition: none;
}

.battle-vs-center.is-steady, .battle-vs-center.is-steady .battle-mid-btn, .battle-vs-center .battle-mid-btn {
  transform: none;
}

.battle-side .battle-card.chosen, .battle-side .battle-card.equal-pick {
  transform-origin: center center;
}

.battle-result-list li:nth-child(1) .battle-result-rank {
  background: linear-gradient(145deg, #ffe9a8 0%, #ffc857 45%, #f0a030 100%);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 210, 120, 0.45),
    0 0 14px rgba(255, 190, 80, 0.75),
    0 0 28px rgba(255, 160, 40, 0.35);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

.battle-result-list li:nth-child(2) .battle-result-rank {
  background: linear-gradient(145deg, #f4f4fa 0%, #cfd0dc 50%, #a8a9b8 100%);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(220, 220, 235, 0.4),
    0 0 12px rgba(180, 185, 210, 0.55),
    0 0 22px rgba(160, 165, 190, 0.25);
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.battle-result-list li:nth-child(3) .battle-result-rank {
  background: linear-gradient(145deg, #f0c090 0%, #d08a4a 50%, #a86228 100%);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(220, 150, 90, 0.4),
    0 0 12px rgba(200, 120, 50, 0.55),
    0 0 22px rgba(180, 100, 40, 0.25);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

.battle-panel .icon {
  margin-bottom: 6px;
  line-height: 0;
}
.battle-panel .icon img {
  width: 64px;
  height: 64px;
  display: block;
  margin: 0 auto;
}

#battleEqualMid, .battle-mid-btn#battleEqualMid {
  transform: none;
  transition: border-color .15s ease, box-shadow .15s ease, filter .15s ease, background .15s ease;
}

.battle-vs-center.is-steady #battleEqualMid, .battle-vs-center.is-steady .battle-mid-btn {
  transform: none;
  animation: none;
}

.battle-mode-card .bmc-icon {
  margin: 0 0 8px;
  line-height: 0;
}
.battle-mode-card .bmc-icon img {
  width: 56px;
  height: 56px;
  display: block;
}

.battle-mode-card .bmc-title {
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: .3px;
  margin-bottom: 6px;
  margin: 0 0 4px;
}

.battle-mode-card .bmc-meta {
  font-size: 0.8rem;
  font-weight: 700;
  color: #c9b4e8;
  margin-bottom: 10px;
  margin: 0 0 8px;
}

.bmc-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: auto;
  width: 100%;
  flex-direction: column;
  align-items: center;
  min-height: 58px;
}

/* Start / Continue — single source */
.battle-mode-card .bmc-resume,
.bmc-resume {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  margin-top: auto;
  width: auto;
  min-width: 132px;
  height: 36px;
  padding: 0 22px;
  border-radius: 999px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
  color: #f8f2ff;
  border: 1.5px solid rgba(200, 160, 240, 0.5);
  background: linear-gradient(160deg, #2a2238 0%, #161022 50%, #1e1830 100%);
  box-shadow:
    0 0 0 1px rgba(180, 140, 255, 0.1),
    0 0 16px rgba(160, 120, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}
.battle-mode-card .bmc-resume:hover,
.bmc-resume:hover {
  transform: translateY(-2px);
  border-color: rgba(220, 180, 255, 0.8);
  filter: brightness(1.1);
  box-shadow:
    0 0 0 1px rgba(200, 160, 255, 0.22),
    0 0 24px rgba(180, 140, 255, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.battle-mode-card .bmc-resume.is-continue {
  border-color: transparent;
  background:
    linear-gradient(160deg, #2a2238 0%, #161022 50%, #1e1830 100%) padding-box,
    var(--holo-warm) border-box;
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    0 0 0 1px rgba(255, 120, 70, 0.25),
    0 0 16px rgba(255, 80, 140, 0.4),
    0 0 28px rgba(255, 170, 50, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #fff8f2;
}
.battle-mode-card .bmc-resume.is-continue:hover {
  border-color: transparent;
  filter: brightness(1.1);
  box-shadow:
    0 0 0 1px rgba(255, 150, 90, 0.4),
    0 0 22px rgba(255, 90, 150, 0.5),
    0 0 36px rgba(255, 190, 60, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}


.bmc-reset, .bmc-reset-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  height: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  padding: 0 6px;
  border: none;
  background: transparent;
}

.bmc-reset-slot {
  visibility: hidden;
  pointer-events: none;
}

.bmc-reset {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(200,180,230,.55);
  font-size: 0.72rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  padding: 2px 8px;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color .15s, text-shadow .15s;
}

.bmc-reset:hover {
  color: #e8d8ff;
  text-shadow: 0 0 12px rgba(180,140,255,.55);
  transform: translateY(-1px);
}

.battle-mode-select {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
  min-height: 0;
}

.battle-mode-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  width: 100%;
  max-width: 920px;
  margin-top: auto;
  margin-bottom: auto;
  box-sizing: border-box;
}

.battle-mode-card {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid rgba(200,160,240,.25);
  background: linear-gradient(165deg, rgba(40,32,58,.95), rgba(18,14,28,.98));
  border-radius: 18px;
  padding: 24px 28px 18px;
  cursor: pointer;
  text-align: center;
  color: var(--text);
  font-family: inherit;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  height: auto;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 100%;
}

.battle-mode-card.battle-mode-full {
  border-color: transparent;
  border-radius: 18px;
}

.battle-mode-card .bmc-desc {
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.4;
  flex: 1 1 auto;
  max-width: none;
  margin: 0 0 18px;
  width: 100%;
}

.battle-result-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 14px 18px 14px 16px;
  text-align: left;
  max-height: 300px;
  overflow-y: auto;
  width: 100%;
  scrollbar-width: thin;
  scrollbar-color: #c9a6f0 #1a1628;
  padding-right: 6px;
  overflow-x: hidden;
  border-radius: 16px;
}

.battle-result-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  margin-bottom: 4px;
  overflow: visible;
}

.battle-result-rank {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.78rem;
  flex-shrink: 0;
  background: rgba(32, 24, 48, 0.95);
  color: #e8dff8;
  line-height: 1;
  box-shadow: none;
  overflow: visible;
}

.battle-result-list::-webkit-scrollbar {
  width: 8px;
}

.battle-result-list::-webkit-scrollbar-track {
  background: #1a1628;
  border-radius: 9999px;
  margin: 4px 0;
  border: 1px solid rgba(180,140,255,0.12);
}

.battle-result-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #e8d4ff 0%, #b79bf0 40%, #e6a9e8 70%, #cdd6f7 100%);
  border-radius: 9999px;
  border: 2px solid #1a1628;
  background-clip: padding-box;
  min-height: 40px;
  box-shadow: 0 0 10px rgba(183, 155, 240, 0.45);
}

.battle-result-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #f2e8ff 0%, #cbb0ff 40%, #f0b8f0 70%, #dde4ff 100%);
  background-clip: padding-box;
  box-shadow: 0 0 14px rgba(200, 160, 255, 0.55);
}

.battle-result-list::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: block;
  background: transparent;
  border: none;
}

.battle-result-list::-webkit-scrollbar-button:single-button, .battle-result-list::-webkit-scrollbar-button:vertical:start:decrement, .battle-result-list::-webkit-scrollbar-button:vertical:end:increment, .battle-result-list::-webkit-scrollbar-button:vertical:start:increment, .battle-result-list::-webkit-scrollbar-button:vertical:end:decrement {
  width: 0;
  height: 0;
  display: block;
  background: transparent;
  border: none;
}

.battle-result-list::-webkit-scrollbar-corner {
  background: transparent;
}

.battle-panel .btn, .battle-panel a.btn, .battle-panel button.btn, .battle-panel-actions .btn, .battle-panel-actions a.btn, .battle-panel-actions button.btn {
  width: 100%;
  min-height: 46px;
}

.battle-panel .btn.primary, .battle-panel a.btn.primary, .battle-panel-actions .btn.primary, .battle-panel-actions a.btn.primary {
  width: 100%;
}

.battle-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: min(280px, 36vw);
  overflow: visible;
}

@keyframes confettiFall {

0%{ transform: translateY(0) rotate(0deg); opacity: 1; }
  100%{ transform: translateY(100vh) rotate(540deg); opacity: 0; }
}

@keyframes elecSpin {

to { --elec-angle: 360deg; }
}

@keyframes elecRotate {

0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

@media (max-width: 720px) {
  .battle-page {
    padding: 16px 14px 24px;
    max-width: 100%;
    min-height: calc(100vh - 120px);
  }

  .battle-arena,
  .battle-footer {
    max-width: 100%;
  }

  .battle-arena {
    flex: 1 1 auto;
    justify-content: flex-start;
  }

  .battle-footer {
    margin-top: auto;
    padding-top: 16px;
  }

  .battle-question {
    font-size: 1.25rem;
    margin: 0 0 4px;
  }

  .battle-sub {
    margin: 0 0 10px;
    font-size: 0.8rem;
  }

  .battle-progress-in-arena {
    max-width: min(340px, 100%);
    margin: 0 auto 14px;
  }

  .battle-vs-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
  }

  .battle-side {
    flex: 0 0 auto;
    width: min(40vw, 150px);
    max-width: 150px;
    min-width: 110px;
    gap: 8px;
  }

  .battle-card {
    width: 100%;
  }

  .battle-vs-center {
    flex: 0 0 auto;
    gap: 8px;
  }

  .battle-mid-btn {
    width: 40px;
    height: 40px;
  }

  .battle-mid-btn img {
    width: 18px;
    height: 18px;
  }

  .battle-footer .battle-how {
    font-size: 0.68rem;
  }

  .battle-back,
  button.battle-back,
  .battle-footer .battle-back {
    min-width: 88px;
    height: 36px;
    font-size: 0.78rem;
  }

  .battle-mode-cards {
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    margin-top: auto;
    margin-bottom: auto;
  }

  .bmc-actions {
    min-height: 54px;
  }

  .battle-panel {
    max-width: calc(100vw - 24px);
    margin: 12px;
    padding: 28px 22px;
  }

  .battle-result-list {
    max-height: min(38vh, 280px);
  }
}

/* RankMe · home — Home, discover, template cards, community */

/* Category + community pills */
.cat-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  height: 32px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1.5px solid var(--idle, var(--line));
  background: #161224;
  color: #f8f2ff;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.72rem;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.cat-chip:focus,
.cat-chip:focus-visible {
  outline: none;
}

.discover-toolbar .filter-row {
  display: flex;
  justify-content: center;
  width: 100%;
  position: relative;
  z-index: 2;
  overflow: visible;
}
.discover-toolbar .chip-scroll {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 10px 8px;
  overflow: visible;
  scrollbar-width: none;
}
.discover-toolbar .chip-scroll::-webkit-scrollbar { display: none; }
.discover-toolbar .skel-chip {
  height: 20px;
  width: 3.9rem;
  flex: 0 0 3.9rem;
  border-radius: 999px;
}
.discover-toolbar .cat-chip {
  height: 20px;
  width: 3.9rem;
  flex: 0 0 3.9rem;
  padding: 0;
  box-sizing: border-box;
  border: 0;
  background: #161224;
  box-shadow: inset 0 0 0 1.5px var(--idle);
  color: #f4eefc;
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  transform-origin: center center;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease, background 0.15s ease;
}
.discover-toolbar .cat-chip[data-cat="all"]         { --chip: #16141c; --idle: rgba(183, 155, 240, 0.7); --glow: rgba(183, 155, 240, 0.4); }
.discover-toolbar .cat-chip[data-cat="games"]       { --chip: linear-gradient(90deg, #6356c4, #4a6cb8); --idle: #6a72d0; --glow: rgba(90, 90, 200, 0.4); }
.discover-toolbar .cat-chip[data-cat="anime"]       { --chip: linear-gradient(90deg, #c45690, #c44868); --idle: #c45690; --glow: rgba(200, 80, 120, 0.4); }
.discover-toolbar .cat-chip[data-cat="movies"]      { --chip: linear-gradient(90deg, #d4983a, #c87820); --idle: #d4983a; --glow: rgba(200, 140, 40, 0.4); }
.discover-toolbar .cat-chip[data-cat="tv"]          { --chip: linear-gradient(90deg, #2aaa88, #1a9478); --idle: #2aaa88; --glow: rgba(30, 160, 120, 0.4); }
.discover-toolbar .cat-chip[data-cat="sports"]      { --chip: linear-gradient(90deg, #34b068, #1e9860); --idle: #34b068; --glow: rgba(40, 160, 90, 0.4); }
.discover-toolbar .cat-chip[data-cat="music"]       { --chip: linear-gradient(90deg, #2aa8b8, #1a90a8); --idle: #2aa8b8; --glow: rgba(40, 160, 180, 0.4); }
.discover-toolbar .cat-chip[data-cat="memes"]       { --chip: linear-gradient(90deg, #3a78c8, #2a5cb0); --idle: #3a78c8; --glow: rgba(50, 110, 200, 0.4); }
.discover-toolbar .cat-chip[data-cat="technology"]  { --chip: linear-gradient(90deg, #c456a8, #b04080); --idle: #c456a8; --glow: rgba(200, 80, 150, 0.4); }
.discover-toolbar .cat-chip[data-cat="other"]       { --chip: linear-gradient(90deg, #8b849c, #6e6878); --idle: #8b849c; --glow: rgba(150, 140, 170, 0.35); }
.discover-toolbar .cat-chip.active {
  z-index: 1;
  background: var(--chip);
  box-shadow: 0 0 10px var(--glow);
}
.discover-toolbar .cat-chip[data-cat="all"].active {
  background: #16141c;
  box-shadow: inset 0 0 0 1.5px rgba(183, 155, 240, 0.75), 0 0 10px var(--glow);
}
@media (hover: hover) {
  .discover-toolbar .cat-chip:hover {
    z-index: 1;
    transform: scale(1.05);
  }
}
@media (prefers-reduced-motion: reduce) {
  .discover-toolbar .cat-chip,
  .discover-toolbar .cat-chip:hover {
    transition: none;
    transform: none;
  }
}

.cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.tl-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .18s, border-color .18s, box-shadow .18s;
  display: flex;
  flex-direction: column;
}

.tl-card.exclusive {
  --rgb: linear-gradient(90deg,#ff6b6b,#f7c948,#7bed9f,#70a1ff,#a29bfe,#ff6b81,#ff6b6b);
  border: 2px solid transparent;
  background: linear-gradient(var(--panel), var(--panel)) padding-box,
    var(--rgb) border-box;
  background-size: 100% 100%, 200% 100%;
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  animation: exclusiveRgb 5s linear infinite alternate;
  box-shadow: 0 0 28px rgba(180,120,255,.22);
  position: relative;
}

@media (hover: hover) {
  .tl-card:hover {
    transform: translateY(-3px);
    border-color: rgba(200,160,240,.35);
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
  }
  .tl-card.exclusive:hover {
    box-shadow: 0 0 36px rgba(180,120,255,.4);
    filter: brightness(1.03);
  }
}

.tl-card .cover img.cover-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}

.tl-card .meta {
  color: var(--text-dim);
  font-size: .75rem;
  font-weight: 600;
}

.tl-card .card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.tl-card .card-actions .btn-mini {
  flex: 1;
  text-align: center;
  text-decoration: none;
}

.tl-card.epic .cover {
  perspective: 600px;
}

.tl-card.epic .cover img.cover-art {
  transform: scale(1.08) translate3d(0,0,0);
  transition: transform .15s ease-out;
  will-change: transform;
}

/* Homepage */
.home-wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 60px;
  box-sizing: border-box;
}

.discover-toolbar {
  margin: 8px 0 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.discover-toolbar > .search-box {
  width: 100%;
  margin-bottom: 0;
  padding-right: 4px;
  position: relative;
  z-index: 8;
}

.discover-toolbar .sort-dd {
  flex: 0 0 auto;
  position: relative;
  margin: 0;
}
.search-box .sort-trigger {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  color: var(--text-dim);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.search-box .sort-trigger:hover,
.search-box .sort-dd.open .sort-trigger {
  color: var(--text);
  background: rgba(183, 155, 240, 0.16);
  box-shadow: none;
  filter: none;
  border: 0;
}
.search-box .sort-dd .dd-menu li[aria-selected="true"] {
  background: linear-gradient(135deg, #b79bf0, #c9a3ff);
  color: #1a1226;
}
.search-box .sort-menu-ico {
  display: block;
  width: 18px;
  height: 18px;
}
.search-box .sort-dd .dd-menu {
  left: auto;
  right: 0;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top right;
  width: min(220px, calc(100vw - 24px));
  min-width: 180px;
}
.search-box .sort-dd.open .dd-menu {
  transform: translateY(0) scale(1);
}

.tl-card .cover {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: linear-gradient(135deg, #2a1f3d, #1a2035);
  display: block;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.tl-card .body {
  padding: 14px 16px 16px;
}

.tl-card .title {
  font-weight: 800;
  font-size: .95rem;
  margin: 0 0 4px;
  display: block;
  text-decoration: none;
  color: inherit;
}

.tl-card .title:hover {
  color: #e8d4ff;
}

.tl-card .cover .badge-row {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
}

.tl-card .cover .badge-row .tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  padding: 0 10px;
  height: 22px;
  line-height: 1;
  border-radius: 999px;
  background: rgba(14, 12, 20, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #f2eaff;
  -webkit-text-fill-color: #f2eaff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  white-space: nowrap;
  box-sizing: border-box;
}

.tl-card .cover .badge-row .tag-cat[data-cat="games"] {
  border-color: rgba(140, 100, 255, 0.5);
}
.tl-card .cover .badge-row .tag-cat[data-cat="anime"] {
  border-color: rgba(255, 100, 150, 0.5);
}
.tl-card .cover .badge-row .tag-cat[data-cat="movies"] {
  border-color: rgba(250, 180, 40, 0.5);
}
.tl-card .cover .badge-row .tag-cat[data-cat="tv"] {
  border-color: rgba(50, 200, 150, 0.5);
}
.tl-card .cover .badge-row .tag-cat[data-cat="sports"] {
  border-color: rgba(250, 140, 40, 0.5);
}
.tl-card .cover .badge-row .tag-cat[data-cat="music"] {
  border-color: rgba(100, 120, 255, 0.5);
}
.tl-card .cover .badge-row .tag-cat[data-cat="memes"] {
  border-color: rgba(240, 120, 200, 0.5);
}
.tl-card .cover .badge-row .tag-cat[data-cat="technology"] {
  border-color: rgba(40, 200, 230, 0.5);
}

.tl-card .body .desc {
  color: var(--text-dim);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 2px 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* Community — compact cards, no panel chrome */
.community-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  margin: 0 0 18px;
}
.community-rankings-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #f2eaff;
  margin: 0;
  letter-spacing: 0.2px;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}
.community-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.community-pills .skel-chip {
  height: 20px;
  width: 3.9rem;
  flex: 0 0 3.9rem;
  border-radius: 999px;
}
.community-pills .cat-chip[data-csort="hot"] {
  --ring: linear-gradient(120deg, #ff6b3d, #ffd24a, #ff6b9d, #ff8a3d, #ff6b3d);
  --glow: rgba(255, 140, 70, 0.45);
  --idle: rgba(255, 122, 58, 0.55);
}
.community-pills .cat-chip[data-csort="new"] {
  --ring: linear-gradient(120deg, #34d399, #22d3ee, #60a5fa, #2dd4bf, #34d399);
  --glow: rgba(45, 210, 200, 0.42);
  --idle: rgba(50, 196, 188, 0.55);
}
.community-pills .cat-chip[data-csort="experts"] {
  --ring: var(--holo-ice);
  --glow: var(--holo-ice-glow);
  --idle: rgba(176, 210, 255, 0.55);
}
.community-pills .cat-chip {
  height: 20px;
  width: 3.9rem;
  flex: 0 0 3.9rem;
  padding: 0;
  gap: 0;
  box-sizing: border-box;
  background: #161224;
  border: 1.5px solid var(--idle);
  box-shadow: none;
  animation: none;
  color: #f4eefc;
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
}
.community-pills .cat-chip:hover,
.community-pills .cat-chip.active {
  border-color: transparent;
  background:
    linear-gradient(#161224, #161224) padding-box,
    var(--ring) border-box;
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  background-size: auto, 220% 100%;
  color: #fff;
  animation: portalRgb 2.8s linear infinite alternate;
}
.community-pills .cat-chip:hover {
  box-shadow: 0 0 10px var(--glow);
}
.community-pills .cat-chip.active {
  box-shadow: 0 0 16px var(--glow);
  animation-duration: 1.8s;
}

#communityBody {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

.community-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  width: 100%;
  align-items: stretch;
}

.cc-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
  padding: 10px;
  border-radius: 14px;
  background: #161224;
  border: 1.5px solid rgba(160, 130, 220, 0.28);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  min-width: 0;
  box-sizing: border-box;
  contain: layout paint;
}

@media (hover: hover) {
  .cc-card:hover {
    border-color: rgba(200, 170, 255, 0.55);
    box-shadow: 0 6px 20px rgba(80, 40, 140, 0.25);
  }
}

.cc-cover {
  flex: 0 0 42%;
  max-width: 150px;
  min-width: 110px;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  background: #1a1428;
}

.cc-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cc-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 2px 2px 2px 0;
}

.cc-title {
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.92rem;
  font-weight: 800;
  color: #f4eefc;
  line-height: 1.25;
}

.cc-title-text {
  display: inline-block;
  max-width: 100%;
}

.cc-title.is-long .cc-title-text {
  max-width: none;
  padding-right: 1.2em;
  animation: cc-marquee 10s linear infinite;
}

@keyframes cc-marquee {
  0%, 12% { transform: translateX(0); }
  88%, 100% { transform: translateX(calc(-100% + 4.5em)); }
}

.cc-stats {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #b9a8d4;
  min-width: 0;
}

.cc-ago {
  flex-shrink: 0;
}

.cc-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.cc-stat img {
  width: 12px;
  height: 12px;
  opacity: 0.9;
}

.cc-author {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: #e8e0f4;
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 0;
  max-width: 100%;
  margin-top: 2px;
}
.cc-author-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.cc-author-link:hover { color: #fff; }
.cc-author .expert-badge {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

.cc-author:hover {
  color: #fff;
}

.cc-av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(180, 140, 255, 0.45);
  flex-shrink: 0;
  box-sizing: border-box;
}
.cc-author.is-expert .cc-av {
  border-color: transparent;
  background:
    linear-gradient(#161224, #161224) padding-box,
    var(--holo-warm) border-box;
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}

.cc-av-fallback {
  display: grid;
  place-items: center;
  background: #2a2438;
  color: #e8d4ff;
  font-weight: 900;
  font-size: 0.62rem;
}

.cc-author-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.cc-show-all {
  display: block;
  margin: 20px auto 0;
  padding: 10px 28px;
  border-radius: 999px;
  border: 1.5px solid rgba(180, 140, 255, 0.4);
  background: rgba(28, 22, 44, 0.95);
  color: #f0e6ff;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.cc-show-all:hover {
  border-color: rgba(210, 180, 255, 0.7);
  background: rgba(40, 30, 60, 0.98);
}

.community-empty {
  text-align: center;
  padding: 28px 12px;
  color: #a898c0;
  font-size: 0.9rem;
}

.tl-card.skel-card .body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tl-card.skel-card .cover.skel {
  display: block;
}
.cc-card.skel-card {
  cursor: default;
  pointer-events: none;
}
.cc-card.skel-card .cc-cover.skel {
  display: block;
}
.cc-card.skel-card .cc-body {
  gap: 8px;
}

.chip-scroll .skel-chip + .skel-chip { margin: 0; }

.community-section {
  margin-top: 48px;
  width: 100%;
}

@media (max-width: 720px) {
  .grid > .skel-card:nth-child(n+4),
  .community-grid > .skel-card:nth-child(n+4) {
    display: none;
  }

  .community-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .cc-cover {
    flex: 0 0 38%;
    max-width: 130px;
    min-width: 100px;
  }
  .cc-title {
    font-size: 0.88rem;
  }
  .community-head {
    gap: 10px;
    margin-bottom: 18px;
  }
  .community-rankings-title {
    text-align: left;
    margin: 0;
  }

  .home-wrap {
    padding: 0 10px 48px;
  }

  .discover-toolbar {
    margin: 4px 0 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .discover-toolbar > .search-box {
    width: 100%;
    height: 44px;
    margin-bottom: 0;
    box-sizing: border-box;
    padding-right: 3px;
  }

  .discover-toolbar .filter-row {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .discover-toolbar .chip-scroll {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: clip;
    padding: 10px 8px;
    -webkit-overflow-scrolling: touch;
  }

  .discover-toolbar .sort-dd {
    margin: 0;
    width: auto;
  }

  .search-box .sort-trigger {
    width: 38px;
    height: 38px;
    min-width: 38px;
  }

  .section-head {
    padding-left: 0;
    padding-right: 0;
  }
}

/* RankMe · account — Account, auth, modals, toasts, download */

h1,h2,h3,.tier-label,.faction-btn,.download-btn,.login-btn {
  font-weight: 800;
}

body > .toast {
  width: auto;
  max-width: min(90vw, 360px);
}

/* Pill Account button (guest / text label) */
.login-btn:not(.login-btn-avatar) {
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 800;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-line);
  cursor: pointer;
  box-shadow: none;
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}

.login-btn:not(.login-btn-avatar):hover {
  color: #fff;
  border-color: var(--btn-line-hot);
  background: var(--btn-bg);
  box-shadow: var(--btn-glow);
  filter: none;
}

.login-btn:not(.login-btn-avatar).logged-in,
.login-btn.logged-in:not(.login-btn-avatar) {
  position: relative;
  border: 1px solid transparent;
  background: linear-gradient(#12101a, #12101a) padding-box,
    linear-gradient(90deg,#b79bf0,#e6a9e8,#cdd6f7,#b79bf0,#e6a9e8) border-box;
  background-size: 100% 100%, 220% 100%;
  animation: portalRgb 4s linear infinite;
  color: var(--text);
}

.login-btn:not(.login-btn-avatar).logged-in:hover,
.login-btn.logged-in:not(.login-btn-avatar):hover {
  filter: brightness(1.08);
  box-shadow: 0 0 16px rgba(190,150,255,.35);
}

/* Logged-in avatar: always a circle — own rules, not an override war */
.login-btn.login-btn-avatar {
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(200, 160, 240, 0.5);
  background: #1a1728;
  overflow: hidden;
  display: block;
  flex: 0 0 36px;
  align-self: center;
  cursor: pointer;
  line-height: 0;
  font-size: 0;
  animation: none;
  box-shadow: none;
}

.login-btn.login-btn-avatar:hover {
  border-color: rgba(220, 180, 255, 0.9);
  box-shadow: 0 0 12px rgba(180, 140, 255, 0.35);
  filter: none;
  background: #1a1728;
}

.login-btn.login-btn-avatar.is-expert {
  border-color: transparent;
  background:
    linear-gradient(#1a1728, #1a1728) padding-box,
    var(--holo-warm) border-box;
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}
.login-btn.login-btn-avatar.is-expert:hover {
  border-color: transparent;
  box-shadow: 0 0 12px rgba(255, 120, 80, 0.35);
}

.login-btn.login-btn-avatar .nav-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  display: block;
}

.download-btn {
  padding: 0 22px;
  letter-spacing: .4px;
  font-size: .82rem;
}

.modal-back {
  position: fixed;
  inset: 0;
  background: rgba(6,4,10,.72);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 400;
}

.modal-back.open {
  display: flex;
}

.modal {
  background: #1b1729;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 24px 18px;
  width: min(400px, 92vw);
  max-width: 92vw;
  text-align: center;
  box-sizing: border-box;
}

.modal h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  background: transparent;
  border: none;
  padding: 0;
}

.modal p {
  color: var(--text-dim);
  font-size: .82rem;
  line-height: 1.4;
  margin: 0 0 14px;
  font-weight: 600;
}

.download-modal {
  max-width: 360px;
  width: min(360px, 92vw);
  padding: 20px 24px 16px;
}

.download-modal h3 {
  font-size: 1.08rem;
  margin-bottom: 4px;
}

.download-modal p {
  margin-bottom: 14px;
  font-size: .82rem;
}

.download-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.download-modal-actions .dl-std, .download-modal-actions .dl-max {
  min-height: 40px;
  border-radius: 999px;
  font-size: .88rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.download-modal-actions .dl-std {
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: .84rem;
  cursor: pointer;
  border: 1px solid rgba(200,160,240,.35);
  background: #171327;
  color: #f0eafc;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.download-modal-actions .dl-std:hover {
  border-color: rgba(200,160,240,.7);
  box-shadow: 0 0 16px rgba(180,120,255,.25);
  transform: translateY(-1px);
}

.download-modal-actions .dl-max {
  position: relative;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: .84rem;
  cursor: pointer;
  color: #f8f4ff;
  overflow: hidden;
  background: linear-gradient(145deg, #2a1f3d 0%, #1a1228 100%) padding-box,
    linear-gradient(120deg, #ff6b6b, #f7c948, #7bed9f, #70a1ff, #a29bfe, #ff6b81, #ff6b6b) border-box;
  background-size: 100% 100%, 220% 100%;
  border: 2px solid transparent;
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 22px rgba(180,120,255,.35), 0 0 48px rgba(255,120,180,.12), inset 0 1px 0 rgba(255,255,255,.1);
  animation: dlMaxShift 4s linear infinite alternate;
  transition: filter .15s, transform .15s, box-shadow .15s;
}

.download-modal-actions .dl-max span {
  position: relative;
  z-index: 1;
  letter-spacing: .3px;
}

.download-modal-actions .dl-max:hover {
  filter: brightness(1.12) saturate(1.1);
  transform: translateY(-2px);
  box-shadow: 0 0 28px rgba(200,140,255,.5), 0 0 56px rgba(255,120,180,.2), inset 0 1px 0 rgba(255,255,255,.14);
}

.download-modal-actions .dl-cancel {
  padding: 4px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-weight: 700;
  font-size: .78rem;
  cursor: pointer;
}

.download-modal-actions .dl-cancel:hover {
  color: var(--text);
}

.toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  background: #211c33;
  border: 1px solid var(--line);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: .85rem;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 500;
  pointer-events: none;
  font-weight: 600;
  width: auto;
  max-width: min(90vw, 360px);
  white-space: nowrap;
  text-align: center;
  box-sizing: border-box;
  flex-shrink: 0;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.panel-card {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  overflow: visible;
  cursor: default;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 28px 28px 24px;
  box-sizing: border-box;
  transform: none;
  filter: none;
  box-shadow: none;
  position: relative;
  touch-action: auto;
  user-select: auto;
}

.panel-card:hover {
  transform: none;
  filter: none;
  box-shadow: none;
}

.login-btn.ghost {
  margin-top: 8px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-line);
}
.login-btn.ghost:hover {
  color: #fff;
  border-color: var(--btn-line-hot);
  background: var(--btn-bg);
  box-shadow: var(--btn-glow);
}

#delModal .modal-actions {
  margin-top: 12px;
}

@media (max-width: 720px) {

  .download-btn {
    order: 4;
    width: 100%;
    text-align: center;
  }

  .cta {
    min-height: 44px;
  }


}


/* —— Account redesign (collection) —— */
.page-account {
  position: relative;
  min-height: 100vh;
}
.account-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.account-panel {
  background: linear-gradient(165deg, rgba(32, 26, 48, 0.92), rgba(18, 14, 30, 0.96));
  border: 1px solid rgba(140, 120, 190, 0.22);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  padding: 28px 28px 32px;
}
.account-h1 {
  display: block;
  clear: both;
  margin: 0 0 18px;
  padding: 0;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: #fff;
}
.account-profile {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px 20px;
  margin: 0 0 28px;
  padding: 0;
}
.account-profile.is-public .ap-text {
  gap: 2px;
}
.account-profile.is-public .ap-name {
  height: auto;
  line-height: 1.15;
}
.account-profile.is-public .ap-name-row {
  gap: 8px;
}
.account-profile.is-public .ap-handle-row {
  min-height: 0;
  margin-top: 0;
}
.ap-avatar-wrap {
  flex-shrink: 0;
}
.ap-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid transparent;
  background:
    linear-gradient(#1a1728, #1a1728) padding-box,
    linear-gradient(135deg, #c4a0f0, #8b6ad8, #e6a9e8) border-box;
  display: block;
}
.ap-avatar-wrap.is-expert .ap-avatar {
  background:
    linear-gradient(#1a1728, #1a1728) padding-box,
    var(--holo-warm) border-box;
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}
.ap-fallback {
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 1.4rem;
  color: #e8d4ff;
  background: #2a2438;
}
.ap-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-width: 0;
  flex: 1;
  position: relative;
}
.ap-name {
  font-size: 1.15rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  height: 26px;
}
.ap-name.is-edit {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-self: start;
  cursor: text;
  outline: none;
  line-height: 1;
  caret-color: rgba(255, 255, 255, 0.32);
  border-radius: 8px;
  padding: 0 8px 0 10px;
  box-sizing: content-box;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.ap-name.is-edit:focus {
  background: rgba(180, 140, 255, 0.1);
  box-shadow: 0 0 0 1.5px rgba(180, 140, 255, 0.35);
}
.ap-name.is-saved {
  animation: apNameSaved 0.35s ease;
}
@keyframes apNameSaved {
  0% { text-shadow: 0 0 0 transparent; }
  40% { text-shadow: 0 0 14px rgba(220, 180, 255, 0.75); }
  100% { text-shadow: none; }
}
.ap-hint {
  display: none;
  position: absolute;
  left: 10px;
  top: calc(100% + 3px);
  font-size: 0.65rem;
  font-weight: 200;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: rgba(210, 186, 204, 0.75);
  white-space: nowrap;
  pointer-events: none;
}
.ap-hint:not(:empty) {
  display: block;
}
/* Four equal-width cells, same height as avatar row */
.ap-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-self: stretch;
  margin-left: auto;
  min-width: min(420px, 52%);
  height: 72px;
  background: rgba(20, 16, 32, 0.75);
  border: 1px solid rgba(120, 100, 160, 0.25);
  border-radius: 14px;
  overflow: hidden;
}
.ap-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 6px;
  min-width: 0;
  position: relative;
  box-sizing: border-box;
}
.ap-stat + .ap-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: rgba(140, 120, 180, 0.25);
}
.ap-stat b {
  font-size: 1.15rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
}
.ap-stat span {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.account-section {
  background: rgba(16, 12, 28, 0.55);
  border: 1px solid rgba(120, 100, 160, 0.2);
  border-radius: 18px;
  padding: 20px 18px 16px;
  margin-bottom: 12px;
}
.as-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.as-head h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 900;
}
.as-more {
  display: flex;
  justify-content: center;
  margin: 6px 0 20px;
  width: 100%;
  flex-shrink: 0;
}

@keyframes ghostFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -7px, 0); }
}
.saved-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 12px 32px;
  min-height: 132px;
}
.saved-empty .saved-ghost {
  width: 52px;
  height: 52px;
  display: block;
  animation: ghostFloat 4.2s ease-in-out infinite;
  will-change: transform;
}
.saved-empty p {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dim);
}

/* Saved cards — compact community-style */
.saved-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 980px) {
  .saved-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .saved-grid { grid-template-columns: 1fr; gap: 12px; }
}

.skel-account { pointer-events: none; }
.skel-account .account-profile { gap: 16px 28px; }
.skel-account .ap-text { gap: 8px; }
.skel-account .skel-ap-name { width: 132px; height: 16px; }
.skel-account .skel-ap-handle { width: 96px; height: 9px; opacity: 0.7; }
.skel-account .skel-as-title { width: 92px; height: 16px; }
.skel-account .ap-stat {
  gap: 8px;
}
.skel-account .ap-stat .skel-line {
  width: 28px;
  height: 16px;
}
.skel-account .ap-stat .skel-sm {
  width: 52px;
}
.skel-ach {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 16px;
}
.saved-card.skel-card {
  cursor: default;
}
@media (max-width: 980px) {
  .saved-grid > .skel-card:nth-child(n+5) { display: none; }
}
@media (max-width: 720px) {
  .saved-grid > .skel-card:nth-child(n+4) { display: none; }
  .skel-account .ach-grid > .skel-ach:nth-child(n+4) { display: none; }
  .account-panel { padding: 20px 14px 28px; }
  .account-profile {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
  }
  .ap-avatar-wrap { margin: 0 auto; }
  .ap-text {
    align-items: center;
    flex: none;
    width: 100%;
    position: relative;
    gap: 6px;
    padding-bottom: 4px;
  }
  .account-profile.is-public .ap-text {
    gap: 2px;
    padding-bottom: 0;
  }
  .ap-name,
  .ap-name.is-edit {
    align-self: center;
    text-align: center;
  }
  .ap-name-row,
  .ap-handle-row {
    justify-content: center;
  }
  .ap-handle-row { margin-top: 0; }
  .ap-hint {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    margin-top: 2px;
    text-align: center;
    white-space: normal;
    max-width: 90%;
  }
  .ap-avatar { width: 88px; height: 88px; margin: 0 auto; }
  .ap-stats {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    height: 68px;
  }
  .ap-stat { padding: 8px 4px; }
}

.saved-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
  padding: 10px;
  border-radius: 14px;
  background: #161224;
  border: 1.5px solid rgba(160, 130, 220, 0.28);
  min-width: 0;
  box-sizing: border-box;
  position: relative;
}
.saved-card:hover {
  border-color: rgba(200, 170, 255, 0.55);
  box-shadow: 0 6px 20px rgba(80, 40, 140, 0.25);
}
.saved-card:has(.sc-menu.open) {
  z-index: 6;
}
.sc-cover {
  flex: 0 0 42%;
  max-width: 150px;
  min-width: 96px;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  background: #1a1428;
  display: block;
  flex-shrink: 0;
}
.sc-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sc-body {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 2px 0;
}
.sc-title {
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.92rem;
  font-weight: 800;
  color: #f4eefc;
  line-height: 1.25;
  text-decoration: none;
}
.sc-title-text { display: inline-block; max-width: 100%; }
.sc-title.is-long .sc-title-text {
  max-width: none;
  padding-right: 1.2em;
  animation: cc-marquee 10s linear infinite;
}
.sc-stats {
  display: grid;
  grid-template-columns: minmax(0, auto) auto auto;
  justify-content: start;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: #b9a8d4;
}
.sc-ago {
  font-size: 0.58rem;
  font-weight: 400;
  color: #9a90b0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.sc-stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.sc-stat img {
  width: 12px;
  height: 12px;
  opacity: 0.9;
}
.sc-status {
  font-size: 0.72rem;
  font-weight: 700;
  color: #9a90b0;
}
.sc-status.is-pub {
  color: #e8d4ff;
  background: linear-gradient(90deg, #f0c4ea, #c4a0f0 50%, #b8d4ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sc-menu {
  position: relative;
  flex: 0 0 32px;
  width: 32px;
  margin-left: 4px;
  align-self: center;
}
.sc-dots {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #c8b8e0;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.sc-dots:hover,
.sc-menu.open .sc-dots {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}
.sc-drop {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 220px;
  max-width: min(280px, calc(100vw - 24px));
  padding: 6px;
  border-radius: 14px;
  background: #1a1628;
  border: 1px solid rgba(160, 130, 220, 0.32);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  box-sizing: border-box;
}
.sc-menu.open .sc-drop { display: block; }
.sc-drop a,
.sc-drop button.sc-drop-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: #e8e0f4;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.3;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}
.sc-drop a:hover,
.sc-drop button.sc-drop-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.sc-drop button.sc-drop-item.is-del {
  color: #f07178;
  background: transparent;
}
.sc-drop button.sc-drop-item.is-del:hover {
  background: rgba(240, 113, 120, 0.1);
  color: #ff8a90;
}
/* Beat .wrap label (account page sits inside .wrap) */
.sc-drop label.sc-drop-pub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: #e8e0f4;
  cursor: default;
  border-radius: 10px;
}
.sc-drop label.sc-drop-pub > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}
.sc-drop label.sc-drop-pub .toggle-container {
  width: 44px;
  height: 26px;
  flex: 0 0 44px;
}
.sc-drop label.sc-drop-pub .toggle-thumb {
  width: 18px;
  height: 18px;
}
.sc-drop label.sc-drop-pub .toggle-track {
  background: #3a3452;
}
.sc-drop label.sc-drop-pub .toggle-checkbox:checked + .toggle-track {
  background: linear-gradient(135deg, #f0c4ea 0%, #c4a0f0 42%, #8b6ad8 100%);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.2),
    0 0 12px rgba(200, 150, 255, 0.55),
    0 0 22px rgba(160, 110, 240, 0.3);
}
.sc-drop label.sc-drop-pub .toggle-checkbox:checked + .toggle-track > .toggle-thumb:not(.toggled-once),
.sc-drop label.sc-drop-pub .toggle-checkbox:checked:not(.toggled-once) + .toggle-track > .toggle-thumb {
  transform: translateX(18px);
}
@keyframes sc-bounce-in {
  0% { border-radius: 40% / 50%; transform: translateX(6px) scale(1.45, 0.75); }
  100% { border-radius: 50%; transform: translateX(18px) scale(1); }
}
@keyframes sc-bounce-out {
  0% { border-radius: 40% / 50%; transform: translateX(4px) scale(1.45, 0.75); }
  100% { border-radius: 50%; transform: translateX(0) scale(1); }
}
.sc-drop label.sc-drop-pub .toggle-checkbox.toggled-once:checked + .toggle-track > .toggle-thumb {
  animation-name: grow-in, sc-bounce-in;
}
.sc-drop label.sc-drop-pub .toggle-checkbox.toggled-once + .toggle-track > .toggle-thumb {
  animation-name: grow-out, sc-bounce-out;
}

/* Achievements */
.ach-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 720px) {
  .ach-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
}

.ach-card {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  display: block;
  width: 100%;
  min-width: 0;
  perspective: 800px;
  -webkit-tap-highlight-color: transparent;
}

.ach-card-face {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  transform-style: preserve-3d;
  transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  background: #0c0914;
  box-shadow:
    0 0 0 1px rgba(200, 170, 255, 0.32),
    0 10px 22px rgba(0, 0, 0, 0.4);
}

.ach-card:hover .ach-card-face,
.ach-card.is-focus .ach-card-face {
  transition: transform 0.08s ease-out;
  box-shadow:
    0 0 0 1px rgba(230, 200, 255, 0.6),
    0 0 34px rgba(160, 90, 255, 0.4),
    0 16px 36px rgba(0, 0, 0, 0.5);
}

.ach-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.ach-foil,
.ach-sheen,
.ach-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}

/* Soft RankMe foil: blurred rainbow light over the art */
.ach-foil {
  background: radial-gradient(
    130% 90% at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.38) 0%,
    rgba(255, 170, 255, 0.28) 16%,
    rgba(140, 210, 255, 0.22) 34%,
    rgba(255, 220, 160, 0.16) 52%,
    transparent 72%
  );
  mix-blend-mode: overlay;
  filter: blur(14px);
  opacity: 0.2;
  transition: opacity 0.22s ease;
}

.ach-sheen {
  background: linear-gradient(
    115deg,
    transparent 28%,
    rgba(255, 210, 255, 0.22) 42%,
    rgba(255, 255, 255, 0.42) 48%,
    rgba(170, 220, 255, 0.22) 54%,
    transparent 68%
  );
  background-size: 220% 220%;
  background-position: var(--mx, 50%) var(--my, 50%);
  mix-blend-mode: soft-light;
  opacity: 0.15;
  transition: opacity 0.22s ease;
}

.ach-glare {
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.34) 0%,
    rgba(230, 200, 255, 0.1) 22%,
    transparent 48%
  );
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.ach-card:hover .ach-foil,
.ach-card.is-focus .ach-foil { opacity: 0.85; }
.ach-card:hover .ach-sheen,
.ach-card.is-focus .ach-sheen { opacity: 0.9; }
.ach-card:hover .ach-glare,
.ach-card.is-focus .ach-glare { opacity: 1; }

.ach-card.is-legendary .ach-card-face {
  box-shadow:
    0 0 0 1px rgba(255, 140, 80, 0.42),
    0 0 22px rgba(255, 90, 80, 0.28),
    0 10px 22px rgba(0, 0, 0, 0.4);
}
.ach-card.is-legendary .ach-card-face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 4;
  pointer-events: none;
  background: conic-gradient(
    from var(--expert-angle),
    transparent 0%,
    #ffc94a 10%,
    #ff7a45 24%,
    #ff4d8d 38%,
    transparent 55%
  );
  padding: 2px;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: expertBorderSpin 4s linear infinite;
}
.ach-card.is-legendary:hover .ach-card-face,
.ach-card.is-legendary.is-focus .ach-card-face {
  box-shadow:
    0 0 0 1px rgba(255, 180, 90, 0.65),
    0 0 34px rgba(255, 90, 80, 0.42),
    0 16px 36px rgba(0, 0, 0, 0.5);
}
.ach-focus-wrap .ach-card.is-legendary .ach-card-face {
  box-shadow:
    0 0 0 1px rgba(255, 180, 90, 0.7),
    0 0 52px rgba(255, 90, 80, 0.45),
    0 28px 60px rgba(0, 0, 0, 0.55);
}

.ach-stage {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 6, 14, 0.78);
  backdrop-filter: blur(14px);
  cursor: pointer;
}
.ach-focus-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  cursor: default;
}
.ach-focus-wrap .ach-card {
  width: min(72vw, 280px);
  flex-basis: auto;
  perspective: 1000px;
}
.ach-focus-wrap .ach-card-face {
  box-shadow:
    0 0 0 1px rgba(230, 200, 255, 0.65),
    0 0 52px rgba(160, 90, 255, 0.48),
    0 28px 60px rgba(0, 0, 0, 0.55);
}

.ach-focus-copy {
  max-width: min(72vw, 320px);
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
}
.ach-focus-wrap.is-in .ach-focus-copy {
  opacity: 1;
  transform: none;
  transition: opacity 0.35s ease 0.18s, transform 0.35s ease 0.18s;
}
.ach-focus-copy h3 {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: transparent;
  background-image: linear-gradient(
    125deg,
    #9b7aef 0%,
    #c4b5fd 28%,
    #d8b4fe 50%,
    #b794f0 72%,
    #a78bfa 100%
  );
  background-size: 170% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heroTitleShimmer 18s ease-in-out infinite;
}
.ach-focus-copy p {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
}

body.ach-focus-open { overflow: hidden; }

.ach-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 800;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px 10px 10px;
  width: min(520px, calc(100vw - 24px));
  box-sizing: border-box;
  background: #161224;
  border: 1px solid rgba(180, 140, 240, 0.38);
  border-radius: 14px;
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.5),
    0 0 32px rgba(140, 80, 220, 0.32);
  transform: translateX(-50%) translateY(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.38s ease, transform 0.38s ease;
}
.ach-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.ach-toast.is-legendary {
  border-color: rgba(255, 140, 80, 0.5);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(255, 90, 80, 0.32);
}
.ach-toast img {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.ach-toast-copy {
  flex: 1 1 auto;
  min-width: 0;
}
.ach-toast b {
  display: block;
  font-size: 0.92rem;
  font-weight: 800;
  color: #e6d6ff;
  line-height: 1.2;
}
.ach-toast span {
  display: block;
  margin-top: 3px;
  font-size: 0.72rem;
  font-weight: 500;
  color: #a79fc4;
  line-height: 1.35;
}

@media (max-width: 720px) {
  .ach-toast {
    left: 16px;
    right: 16px;
    width: auto;
    bottom: 20px;
    padding: 12px 16px 12px 12px;
    gap: 12px;
    transform: translateY(14px);
  }
  .ach-toast.show {
    transform: translateY(0);
  }
  .ach-focus-wrap .ach-card { width: min(78vw, 260px); }
}

@media (prefers-reduced-motion: reduce) {
  .ach-toast { transition: opacity 0.2s ease; }
  .ach-card-face,
  .ach-foil,
  .ach-sheen,
  .ach-glare,
  .ach-focus-copy {
    transition: none;
  }
  .ach-focus-copy h3 {
    animation: none;
  }
  .expert-badge.is-off.is-btn:hover::after,
  .expert-modal .expert-apply.cta,
  .expert-modal::before,
  .expert-modal::after,
  .ach-card.is-legendary .ach-card-face::after {
    animation: none;
  }
  .ach-card:hover .ach-card-face,
  .ach-card.is-focus .ach-card-face {
    transform: none;
  }
}

/* Squishy switch (CodePen motion, RankMe holofoil) */
.toggle-container {
  position: relative;
  border-radius: 999px;
  width: 52px;
  height: 30px;
  flex-shrink: 0;
}
.toggle-checkbox {
  -webkit-appearance: none;
  appearance: none;
  accent-color: #c4a0f0;
  position: absolute;
  z-index: 1;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.toggle-track {
  display: flex;
  align-items: center;
  position: relative;
  border-radius: inherit;
  padding: 4px;
  width: 100%;
  height: 100%;
  background: #3a3452;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: background 0.4s linear, box-shadow 0.3s ease;
}
.toggle-container:hover .toggle-track {
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.35),
    0 0 0 1.5px rgba(210, 170, 255, 0.55),
    0 0 10px rgba(180, 140, 255, 0.35);
}
.toggle-checkbox:checked + .toggle-track {
  background: linear-gradient(135deg, #f0c4ea 0%, #c4a0f0 42%, #8b6ad8 100%);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.2),
    0 0 12px rgba(200, 150, 255, 0.55),
    0 0 22px rgba(160, 110, 240, 0.3);
}
.toggle-container:hover .toggle-checkbox:checked + .toggle-track {
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.2),
    0 0 0 1.5px rgba(230, 200, 255, 0.7),
    0 0 14px rgba(200, 150, 255, 0.6),
    0 0 24px rgba(160, 110, 240, 0.35);
}
.toggle-thumb {
  position: relative;
  border-radius: 50%;
  transform-origin: left center;
  width: 22px;
  height: 22px;
  background-color: #fff;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.25),
    inset 0 -2px 4px rgba(0, 0, 0, 0.12);
}
.toggle-checkbox.toggled-once + .toggle-track > .toggle-thumb {
  animation-name: grow-out, bounce-out;
  animation-duration: 0.2s;
  animation-timing-function: cubic-bezier(0.75, 0, 1, 1), cubic-bezier(0, 0, 0.3, 1.5);
  animation-delay: 0s, 0.2s;
  animation-fill-mode: forwards;
}
.toggle-checkbox.toggled-once:checked + .toggle-track > .toggle-thumb {
  animation-name: grow-in, bounce-in;
}
@keyframes grow-in {
  0% { border-radius: 50%; transform: translateX(0) scale(1); }
  100% { border-radius: 40% / 50%; transform: translateX(8px) scale(1.45, 0.75); }
}
@keyframes bounce-in {
  0% { border-radius: 40% / 50%; transform: translateX(8px) scale(1.45, 0.75); }
  100% { border-radius: 50%; transform: translateX(22px) scale(1); }
}
@keyframes grow-out {
  0% { border-radius: 50%; transform: translateX(22px) scale(1); }
  100% { border-radius: 40% / 50%; transform: translateX(4px) scale(1.45, 0.75); }
}
@keyframes bounce-out {
  0% { border-radius: 40% / 50%; transform: translateX(4px) scale(1.45, 0.75); }
  100% { border-radius: 50%; transform: translateX(0) scale(1); }
}
.toggle-checkbox:checked + .toggle-track > .toggle-thumb:not(.toggled-once),
.toggle-checkbox:checked:not(.toggled-once) + .toggle-track > .toggle-thumb {
  transform: translateX(22px);
}

.ap-name-row {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.ap-name-row .expert-badge {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
  position: relative;
  z-index: 1;
  transition: margin-left 0.18s ease;
}
.ap-name-row .expert-badge.is-on {
  filter: drop-shadow(0 0 3px rgba(255, 90, 140, 0.4));
}
.ap-name.is-edit:focus + .expert-badge {
  margin-left: 10px;
}
.ap-handle-row {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  min-height: 28px;
  margin-top: 2px;
}
.ap-handle {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: max-content;
  max-width: 100%;
  min-height: 24px;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-dim);
  letter-spacing: 0.01em;
  line-height: 20px;
  outline: none;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 2px 8px;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.ap-handle[contenteditable="true"] {
  cursor: text;
  caret-color: rgba(255, 255, 255, 0.32);
}
.ap-handle.is-empty {
  opacity: 0.85;
}
.ap-handle[contenteditable="true"]:focus {
  background: rgba(180, 140, 255, 0.1);
  box-shadow: 0 0 0 1.5px rgba(180, 140, 255, 0.35);
  color: var(--text);
  overflow: hidden;
  white-space: nowrap;
}
.ap-handle[contenteditable="true"]:focus + .ap-handle-copy {
  margin-left: 6px;
}
.ap-handle-copy {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: margin-left 0.18s ease, color 0.15s ease, transform 0.15s ease;
}
.ap-handle-copy::before {
  content: "";
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: url("../assets/icons/copy.svg") center / contain no-repeat;
  mask: url("../assets/icons/copy.svg") center / contain no-repeat;
}
@media (hover: hover) {
  .ap-handle-copy:hover {
    color: #c4b6e8;
  }
}
.ap-handle-copy:active {
  transform: scale(1.2);
}
@media (min-width: 721px) {
  .ap-name.is-edit:hover,
  .ap-handle[contenteditable="true"]:hover {
    background: rgba(180, 140, 255, 0.06);
  }
}

.expert-modal {
  position: relative;
  overflow: visible;
  width: min(400px, 92vw);
  padding: 28px 28px 20px;
  text-align: center;
  border: 0;
  box-shadow: none;
  background: #161224;
}
.expert-modal::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  z-index: 2;
  pointer-events: none;
  background: conic-gradient(
    from var(--expert-angle),
    transparent 0%,
    #ffc94a 10%,
    #ff7a45 24%,
    #ff4d8d 38%,
    transparent 55%
  );
  padding: 2px;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: expertBorderSpin 8s linear infinite;
}
.expert-modal::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 24px;
  z-index: -1;
  pointer-events: none;
  background: conic-gradient(
    from var(--expert-angle),
    transparent 0%,
    #ffc94a 10%,
    #ff7a45 24%,
    transparent 50%
  );
  filter: blur(14px);
  opacity: 0.32;
  animation: expertBorderSpin 8s linear infinite;
}
.expert-modal > * {
  position: relative;
  z-index: 1;
}
.expert-modal .expert-preview {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  margin: 0 auto 14px;
  overflow: visible;
  filter: none;
}
.expert-modal .expert-preview img {
  position: relative;
  z-index: 1;
}
.expert-modal h3 {
  font-size: clamp(1.08rem, 5vw, 1.52rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 10px;
  white-space: nowrap;
}
.expert-modal .expert-perks {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  text-align: left;
}
.expert-modal .expert-perks li {
  position: relative;
  padding: 2px 0 2px 14px;
  color: #b8b0c8;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.4;
}
.expert-modal .expert-perks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffc94a;
}
.expert-modal label {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.expert-modal .expert-input {
  width: 100%;
  height: 44px;
  border-radius: 999px;
  border: 1.5px solid rgba(160, 130, 220, 0.35);
  background: #12101c;
  color: var(--text);
  padding: 0 16px;
  font: inherit;
  font-weight: 400;
  font-size: 0.84rem;
  box-sizing: border-box;
  outline: none;
  margin-bottom: 12px;
}
.expert-modal .expert-input::placeholder {
  color: #8a82a8;
  font-weight: 400;
  opacity: 1;
}
.expert-modal .expert-input:focus::placeholder {
  color: transparent;
  opacity: 0;
}
.expert-modal .expert-input:focus {
  border-color: rgba(180, 150, 255, 0.7);
}
.expert-modal .expert-apply.cta {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  height: 48px;
  padding: 0 24px;
  margin-bottom: 10px;
  font-size: 1rem;
  animation: none;
  border-color: transparent;
  background:
    linear-gradient(160deg, #2a2238 0%, #161022 50%, #1e1830 100%) padding-box,
    var(--holo-warm) border-box;
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    0 0 0 1px rgba(255, 120, 70, 0.25),
    0 0 16px rgba(255, 80, 140, 0.4),
    0 0 28px rgba(255, 170, 50, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #fff8f2;
}
.expert-modal .expert-apply.cta:hover {
  border-color: transparent;
  filter: brightness(1.1);
  box-shadow:
    0 0 0 1px rgba(255, 150, 90, 0.4),
    0 0 22px rgba(255, 90, 150, 0.5),
    0 0 36px rgba(255, 190, 60, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.expert-modal .expert-apply[disabled] {
  opacity: 0.55;
  cursor: default;
  transform: none;
}
.expert-modal .expert-cancel {
  width: 100%;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  margin: 6px 0 8px;
}
.expert-modal .expert-note {
  margin: 0 0 10px;
  font-size: 0.68rem;
  color: var(--text-dim);
  font-weight: 200;
}
.expert-modal .expert-close {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  color: #9a90b4;
  font: inherit;
  font-weight: 400;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 4px 0 0;
}
.modal p.handle-preview {
  margin: 8px 0 6px;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text-dim);
  word-break: break-all;
}
.handle-preview b {
  color: #fff;
  font-weight: 800;
}
.modal p.handle-note {
  display: block;
  width: 100%;
  margin: 0 0 18px;
  font-size: 0.82rem;
  font-weight: 200;
  color: var(--text-dim);
  text-align: center;
}
#handleModal .modal-actions {
  margin-top: 0;
}
.expert-modal .expert-close:hover { color: #fff; }
.expert-modal .expert-sent-ico {
  width: 88px;
  height: 72px;
  margin: 0 auto 12px;
  background: linear-gradient(165deg, #b79bf0, #8ec5ff);
  -webkit-mask: url("../assets/icons/expert-sent.svg") center / contain no-repeat;
  mask: url("../assets/icons/expert-sent.svg") center / contain no-repeat;
}
.expert-modal .expert-err {
  display: none;
  color: #ff9aa4;
  font-size: 0.75rem;
  font-weight: 200;
  margin: 0 0 10px;
}
.expert-modal .expert-err:not(:empty) {
  display: block;
}

/* RankMe · create — Create / blank rank flow */

.wrap h1 {
  margin: 0 0 8px;
  font-size: 1.4rem;
  font-weight: 900;
}

.wrap .sub {
  color: var(--text-dim);
  font-weight: 600;
  font-size: .88rem;
  margin: 0 0 24px;
  line-height: 1.5;
}

.wrap label {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 8px;
}

.wrap input[type=text], .wrap textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid rgba(200, 160, 240, 0.28);
  background: #1e1a30;
  color: var(--text);
  font-family: inherit;
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: 18px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
  caret-color: #e6d4ff;
}

.wrap input[type=text]::placeholder,
.wrap textarea::placeholder {
  color: #c9b8ea;
  -webkit-text-fill-color: #c9b8ea;
  opacity: 1;
}

.wrap input[type=text]:focus, .wrap textarea:focus {
  border-color: rgba(200, 160, 240, 0.7);
  box-shadow: 0 0 0 3px rgba(180, 140, 240, 0.16);
}

.cover-drop {
  border: 1.5px dashed rgba(180, 140, 255, 0.35);
  border-radius: 16px;
  padding: 28px 16px;
  text-align: center;
  color: #c9b8ea;
  font-weight: 600;
  font-size: .85rem;
  margin-bottom: 18px;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
  background: rgba(30, 24, 48, 0.55);
}

.cover-drop:hover {
  border-color: rgba(200, 160, 255, 0.75);
  background: rgba(50, 36, 80, 0.45);
  box-shadow: 0 0 22px rgba(140, 100, 255, 0.2);
}
.cover-drop img {
  max-width: 100%;
  max-height: 160px;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
}

.create-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.create-head h1 {
  margin: 0;
}

.images-drop {
  margin-top: 18px;
  min-height: 160px;
  border: 1.5px dashed rgba(180,140,255,.35);
  border-radius: 16px;
  background: rgba(30,24,48,.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 18px;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
  text-align: center;
}

.images-drop:hover, .images-drop.drag-over {
  border-color: rgba(200,160,255,.75);
  background: rgba(50,36,80,.45);
  box-shadow: 0 0 22px rgba(140,100,255,.2);
}

.images-drop .ico {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(40,32,60,.9);
  border: 1px solid rgba(180,140,255,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #c9a3ff;
}

.images-drop .hint {
  color: var(--text-dim);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.45;
  max-width: 280px;
}

.images-drop .count {
  font-size: 0.75rem;
  font-weight: 800;
  color: #c9a3ff;
}

.images-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  justify-content: center;
}

.img-chip {
  position: relative;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
}

.img-chip img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(180,140,255,.25);
  display: block;
}

.img-chip-x {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1.5px solid rgba(230, 180, 190, 0.85);
  border-radius: 50%;
  background: rgba(18, 12, 26, 0.94);
  color: #ffe4e8;
  cursor: pointer;
  z-index: 2;
}
.img-chip-x::before,
.img-chip-x::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
}
.img-chip-x::before { transform: rotate(45deg); }
.img-chip-x::after { transform: rotate(-45deg); }
.img-chip-x:hover {
  background: rgba(80, 20, 28, 0.95);
  border-color: #ffb0b8;
}

.tag-dd {
  position: relative;
  display: inline-block;
  z-index: 40;
}

.tag-dd-btn {
  appearance: none;
  border: 1.5px solid rgba(180,140,255,.5);
  border-radius: 999px;
  padding: 9px 40px 9px 16px;
  background: linear-gradient(135deg, rgba(48,36,72,.95), rgba(24,18,40,.98));
  color: #f0e6ff;
  font-weight: 800;
  font-size: .78rem;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(140,100,255,.22);
  position: relative;
  min-width: 128px;
  text-align: left;
  transition: border-color .15s, box-shadow .15s, filter .15s;
}

.tag-dd-btn:hover, .tag-dd.open .tag-dd-btn {
  border-color: rgba(210,170,255,.9);
  box-shadow: 0 0 22px rgba(160,120,255,.4);
  filter: brightness(1.06);
}

.tag-dd-btn::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 10px;
  height: 6px;
  transform: translateY(-40%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23c9a3ff' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events: none;
}

.tag-dd-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 168px;
  padding: 8px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(36,28,56,.98), rgba(18,14,32,.99));
  border: 1.5px solid rgba(180,140,255,.35);
  box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 24px rgba(140,100,255,.2);
  backdrop-filter: blur(12px);
}

.tag-dd.open .tag-dd-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tag-dd-item {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 8px 14px;
  text-align: left;
  cursor: pointer;
  background: transparent;
  color: #d8c8f0;
  font-weight: 700;
  font-size: .78rem;
  font-family: inherit;
  transition: background .12s, border-color .12s, color .12s;
}

.tag-dd-item:hover {
  background: rgba(160,120,255,.18);
  border-color: rgba(180,140,255,.35);
  color: #fff;
}

.tag-dd-item.active {
  background: linear-gradient(120deg, rgba(120,80,200,.45), rgba(80,50,140,.5));
  border-color: rgba(200,160,255,.55);
  color: #fff;
  box-shadow: 0 0 12px rgba(150,110,255,.3);
}

.create-actions {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-top: 16px;
}
.create-actions .btn {
  width: 128px;
  height: 40px;
  min-height: 40px;
  padding: 0 18px;
  box-sizing: border-box;
  line-height: 1;
  text-decoration: none;
}