@font-face {
  font-family: Tektur;
  src: url('fonts/tektur-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --ink: #081d2c;
  --ink-soft: #12384a;
  --paper: #f9ffff;
  --mist: #e7fbff;
  --cyan: #00d8ce;
  --cyan-dark: #00a9ad;
  --pink: #ff28d4;
  --purple: #a000ed;
  --yellow: #ffe01b;
  --line: rgb(8 29 44 / 14%);
  --shadow: 0 22px 55px rgb(28 58 86 / 16%);
  --theme-body: #e8fbff;
  --theme-world: linear-gradient(rgb(255 255 255 / 42%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 42%) 1px, transparent 1px), radial-gradient(circle at 15% 20%, rgb(255 224 27 / 55%), transparent 23%), radial-gradient(circle at 75% 30%, rgb(255 40 212 / 23%), transparent 32%), radial-gradient(circle at 45% 84%, rgb(0 216 206 / 32%), transparent 35%), linear-gradient(135deg, #e7ffff 0%, #d7f7ff 38%, #eee6ff 70%, #fff0fb 100%);
  --theme-text: #081d2c;
  --theme-muted: #536c77;
  --theme-header: rgb(255 255 255 / 94%);
  --theme-surface: rgb(255 255 255 / 84%);
  --theme-surface-strong: rgb(255 255 255 / 92%);
  --theme-surface-soft: #f8ffff;
  --theme-heading: rgb(255 255 255 / 70%);
  --theme-field: #fff;
  --theme-border: #bfd4da;
  --theme-subtle: rgb(8 29 44 / 5%);
  --theme-danger: #fff4f5;
  --theme-hero: linear-gradient(120deg, rgb(255 255 255 / 94%) 0 54%, rgb(6 31 44 / 91%) 54% 100%);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --line: rgb(190 224 232 / 17%);
  --shadow: 0 22px 55px rgb(0 0 0 / 28%);
  --theme-body: #06141d;
  --theme-world: linear-gradient(rgb(113 166 180 / 7%) 1px, transparent 1px), linear-gradient(90deg, rgb(113 166 180 / 7%) 1px, transparent 1px), radial-gradient(circle at 15% 20%, rgb(255 224 27 / 12%), transparent 23%), radial-gradient(circle at 75% 30%, rgb(255 40 212 / 12%), transparent 32%), radial-gradient(circle at 45% 84%, rgb(0 216 206 / 12%), transparent 35%), linear-gradient(135deg, #06141d 0%, #0b202b 44%, #17142c 74%, #211221 100%);
  --theme-text: #edf8fa;
  --theme-muted: #abc1c8;
  --theme-header: rgb(5 20 29 / 95%);
  --theme-surface: rgb(9 29 40 / 90%);
  --theme-surface-strong: rgb(12 35 46 / 96%);
  --theme-surface-soft: #0d2631;
  --theme-heading: rgb(15 42 54 / 94%);
  --theme-field: #091e29;
  --theme-border: #36535f;
  --theme-subtle: rgb(255 255 255 / 6%);
  --theme-danger: #381923;
  --theme-hero: linear-gradient(120deg, rgb(9 29 40 / 96%) 0 54%, rgb(35 14 49 / 94%) 54% 100%);
}

html[data-theme="light"] { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    color-scheme: dark;
    --line: rgb(190 224 232 / 17%);
    --shadow: 0 22px 55px rgb(0 0 0 / 28%);
    --theme-body: #06141d;
    --theme-world: linear-gradient(rgb(113 166 180 / 7%) 1px, transparent 1px), linear-gradient(90deg, rgb(113 166 180 / 7%) 1px, transparent 1px), radial-gradient(circle at 15% 20%, rgb(255 224 27 / 12%), transparent 23%), radial-gradient(circle at 75% 30%, rgb(255 40 212 / 12%), transparent 32%), radial-gradient(circle at 45% 84%, rgb(0 216 206 / 12%), transparent 35%), linear-gradient(135deg, #06141d 0%, #0b202b 44%, #17142c 74%, #211221 100%);
    --theme-text: #edf8fa;
    --theme-muted: #abc1c8;
    --theme-header: rgb(5 20 29 / 95%);
    --theme-surface: rgb(9 29 40 / 90%);
    --theme-surface-strong: rgb(12 35 46 / 96%);
    --theme-surface-soft: #0d2631;
    --theme-heading: rgb(15 42 54 / 94%);
    --theme-field: #091e29;
    --theme-border: #36535f;
    --theme-subtle: rgb(255 255 255 / 6%);
    --theme-danger: #381923;
    --theme-hero: linear-gradient(120deg, rgb(9 29 40 / 96%) 0 54%, rgb(35 14 49 / 94%) 54% 100%);
  }
}

* { box-sizing: border-box; }

html { background: var(--theme-body); scroll-behavior: smooth; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--theme-text);
  background: var(--theme-body);
  font-family: Tektur, system-ui, sans-serif;
  line-height: 1.45;
}

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }

.world-bg {
  position: fixed;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  background: var(--theme-world);
  background-size: 38px 38px, 38px 38px, auto, auto, auto, auto;
}

.world-bg::before,
.world-bg::after,
.world-bg i {
  position: absolute;
  content: '';
  filter: saturate(1.1);
}

.world-bg::before {
  width: 560px; height: 560px; top: 4%; right: -180px;
  border: 45px solid rgb(0 216 206 / 16%); border-radius: 50%;
  box-shadow: 0 0 0 30px rgb(255 40 212 / 8%), inset 0 0 0 32px rgb(255 224 27 / 12%);
}

.world-bg::after {
  width: 540px; height: 250px; left: -80px; bottom: 4%;
  background: linear-gradient(100deg, rgb(0 216 206 / 24%), rgb(160 0 237 / 12%), transparent);
  clip-path: polygon(0 30%, 86% 0, 100% 68%, 11% 100%);
}

.world-bg i:nth-child(1) { width: 220px; height: 220px; left: 8%; top: 26%; background: rgb(255 40 212 / 10%); clip-path: polygon(50% 0, 100% 100%, 0 76%); }
.world-bg i:nth-child(2) { display: none; }
.world-bg i:nth-child(3) { width: 170px; height: 170px; right: 5%; top: 56%; background: rgb(0 216 206 / 12%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.world-bg i:nth-child(4) { width: 300px; height: 20px; left: 42%; top: 18%; background: linear-gradient(90deg, transparent, var(--pink), var(--yellow), transparent); transform: rotate(-13deg); opacity: .22; }

.site-header { position: sticky; z-index: 30; top: 0; background: var(--theme-header); backdrop-filter: blur(18px); box-shadow: 0 4px 25px rgb(21 75 104 / 10%); }
.utility-bar { display: flex; justify-content: space-between; gap: 20px; max-width: 1240px; margin: auto; padding: 5px 24px; color: var(--theme-muted); font-size: .68rem; font-weight: 800; letter-spacing: .08em; }
.nav-shell { display: grid; grid-template-columns: 270px 1fr auto; align-items: center; gap: 28px; max-width: 1240px; min-height: 78px; margin: auto; padding: 0 24px; }
.wordmark { display: flex; align-items: center; gap: 12px; }
.wordmark img { width: 48px; height: 48px; image-rendering: pixelated; filter: drop-shadow(3px 4px 0 rgb(0 216 206 / 24%)); }
.wordmark span { display: grid; line-height: 1; }
.wordmark strong { font-size: 1.2rem; letter-spacing: .04em; }
.wordmark small { margin-top: 6px; color: var(--purple); font-size: .72rem; font-weight: 900; letter-spacing: .1em; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.3vw, 20px); }
.main-nav a { position: relative; padding: 28px 0 23px; font-size: .82rem; font-weight: 900; letter-spacing: .045em; }
.main-nav a::after { position: absolute; right: 0; bottom: 15px; left: 0; height: 3px; content: ''; background: linear-gradient(90deg, var(--pink), var(--purple)); transform: scaleX(0); transition: transform .2s ease; }
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
.mobile-profile-link { display: none; }
.account-chip { display: inline-flex; min-height: 42px; align-items: center; gap: 16px; padding: 0 18px; color: #fff; background: linear-gradient(100deg, var(--purple), var(--pink)); clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); font-size: .76rem; font-weight: 900; }
.account-chip b { color: var(--yellow); font-size: 1.1rem; }
.header-tools { display: flex; align-items: center; gap: 9px; }
.theme-control { display: inline-flex; min-height: 42px; align-items: center; gap: 6px; border: 1px solid var(--theme-border); padding: 0 8px 0 11px; color: var(--theme-muted); background: var(--theme-field); }
.theme-control > span { color: var(--purple); font-size: 1rem; font-weight: 900; }
.theme-selector { min-height: 34px; border: 0; color: var(--theme-text); background: var(--theme-field); color-scheme: inherit; font-size: .66rem; font-weight: 900; text-transform: uppercase; outline: none; cursor: pointer; }
.theme-selector option { color: var(--theme-text); background-color: var(--theme-field); }
.theme-control:focus-within { border-color: var(--purple); box-shadow: 0 0 0 3px rgb(160 0 237 / 13%); }
.spectrum-line { height: 5px; background: linear-gradient(90deg, var(--pink), var(--purple) 28%, #3476ff 50%, var(--cyan) 72%, var(--yellow)); }
.menu-toggle { display: none; }

#app { min-height: calc(100vh - 190px); }
.page { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 55px 0 80px; }
.hero { position: relative; overflow: hidden; min-height: 430px; border: 1px solid rgb(255 255 255 / 18%); padding: clamp(36px, 6vw, 74px); background: var(--theme-hero); box-shadow: var(--shadow); clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px)); }
.hero::before { position: absolute; width: 420px; height: 420px; right: -85px; top: -85px; border: 54px solid rgb(0 216 206 / 36%); border-radius: 50%; content: ''; box-shadow: 0 0 0 28px rgb(255 40 212 / 20%), inset 0 0 0 24px rgb(255 224 27 / 22%); }
.hero::after { position: absolute; width: 480px; height: 220px; right: -40px; bottom: -65px; background: linear-gradient(100deg, var(--cyan), #6874ff, var(--pink)); clip-path: polygon(0 28%, 100% 0, 85% 100%, 12% 76%); content: ''; opacity: .46; }
.hero-copy { position: relative; z-index: 2; max-width: 590px; }
.kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; color: var(--purple); font-size: .75rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.kicker::before { width: 24px; height: 6px; content: ''; background: linear-gradient(90deg, var(--pink), var(--yellow)); }
.hero h1 { max-width: 650px; margin: 0; font-size: clamp(3.4rem, 7.4vw, 7rem); letter-spacing: -.055em; line-height: .84; text-transform: uppercase; }
.hero h1 span { display: block; color: transparent; background: linear-gradient(90deg, var(--purple), #397cff 46%, var(--cyan)); background-clip: text; -webkit-background-clip: text; }
.hero p { max-width: 530px; margin: 25px 0 30px; color: var(--theme-muted); font-family: system-ui, sans-serif; font-size: 1rem; font-weight: 650; line-height: 1.55; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.action { display: inline-flex; min-height: 50px; align-items: center; justify-content: space-between; gap: 24px; min-width: 190px; padding: 0 22px; border: 0; color: #fff; background: var(--ink); clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); font-size: .82rem; font-weight: 900; cursor: pointer; text-transform: uppercase; }
.action-primary { background: linear-gradient(100deg, var(--purple), var(--pink)); }
.action span { color: var(--yellow); font-size: 1.15rem; }
.hero-mark { position: absolute; z-index: 3; right: 10%; top: 50%; display: grid; width: 184px; height: 184px; transform: translateY(-50%) rotate(7deg); place-items: center; border: 5px solid #fff; border-radius: 50%; background: rgb(255 255 255 / 20%); box-shadow: 0 0 0 12px rgb(0 216 206 / 32%), 0 0 0 24px rgb(255 40 212 / 18%); }
.hero-mark img { width: 106px; height: 106px; image-rendering: pixelated; filter: drop-shadow(9px 10px 0 rgb(8 29 44 / 24%)); }

.section-title { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 52px 0 20px; }
.section-title div { display: grid; gap: 2px; }
.section-title small { color: var(--purple); font-size: .7rem; font-weight: 900; letter-spacing: .14em; }
.section-title h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.55rem); letter-spacing: -.025em; text-transform: uppercase; }
.section-title a { color: var(--purple); font-size: .78rem; font-weight: 900; }
.launch-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 16px; }
.launch-card { position: relative; overflow: hidden; min-height: 190px; border: 1px solid var(--line); padding: 25px; background: var(--theme-surface); box-shadow: 0 13px 32px rgb(41 79 104 / 11%); transition: transform .2s ease, box-shadow .2s ease; }
.launch-card::after { position: absolute; width: 100px; height: 100px; right: -35px; bottom: -35px; content: ''; background: var(--accent, var(--cyan)); transform: rotate(45deg); opacity: .2; }
.launch-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgb(41 79 104 / 18%); }
.launch-card strong { display: block; max-width: 240px; margin-top: 16px; font-size: 1.35rem; line-height: 1.05; text-transform: uppercase; }
.launch-card p { margin: 8px 0 0; color: var(--theme-muted); font-family: system-ui, sans-serif; font-size: .85rem; font-weight: 650; }
.card-index { color: var(--accent, var(--purple)); font-size: .72rem; font-weight: 900; letter-spacing: .12em; }
.card-arrow { position: absolute; right: 20px; top: 20px; color: var(--accent, var(--purple)); font-size: 1.5rem; }
.launch-card-featured { color: #fff; background: linear-gradient(125deg, #071f30, #0b4653); --accent: var(--yellow); }
.launch-card-featured p { color: #cae4e8; }
.launch-card:nth-child(2) { --accent: var(--pink); }
.launch-card:nth-child(3) { --accent: var(--cyan); }

.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 100px; padding: 24px max(24px, calc((100% - 1180px) / 2)); color: #fff; background: var(--ink); }
.site-footer .footer-identity { display: grid; max-width: 680px; gap: 5px; }
.site-footer .footer-brand { display: flex; align-items: center; gap: 13px; font-size: .8rem; font-weight: 900; }
.site-footer .footer-copyright,
.site-footer .footer-disclaimer { margin: 0; font-family: system-ui, sans-serif; font-size: .65rem; font-weight: 650; line-height: 1.45; }
.site-footer .footer-copyright { color: #d7ebef; }
.site-footer .footer-disclaimer { color: #8fb0ba; }
.site-footer img { width: 36px; image-rendering: pixelated; }
.site-footer nav { display: flex; gap: 24px; color: #b9d4db; font-size: .72rem; font-weight: 900; }
@media (max-width: 1180px) {
  .nav-shell { grid-template-columns: 1fr auto auto; }
  .main-nav { position: absolute; top: 110px; right: 20px; left: 20px; display: none; align-items: stretch; padding: 16px; background: var(--theme-surface-strong); box-shadow: var(--shadow); }
  .main-nav.open { display: grid; }
  .main-nav a { padding: 12px; }
  .main-nav a::after { bottom: 5px; }
  .menu-toggle { display: block; border: 2px solid var(--theme-border); padding: 8px 12px; color: var(--theme-text); background: var(--theme-field); font-size: .72rem; font-weight: 900; }
}

@media (max-width: 980px) {
  .hero { background: var(--theme-hero); }
  .hero-mark { right: 5%; top: 79%; width: 104px; height: 104px; }
  .hero-mark img { width: 62px; height: 62px; }
  .launch-grid { grid-template-columns: 1fr 1fr; }
  .launch-card-featured { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .utility-bar span:last-child, .account-chip { display: none; }
  .main-nav .mobile-profile-link { display: block; color: #fff; background: linear-gradient(100deg, var(--purple), var(--pink)); }
  .utility-bar { justify-content: center; }
  .nav-shell { grid-template-columns: 1fr auto auto; gap: 9px; min-height: 70px; padding-inline: 16px; }
  .wordmark img { width: 40px; height: 40px; }
  .main-nav { top: 103px; }
  .page { width: min(100% - 24px, 1180px); padding-top: 24px; }
  .hero { min-height: 520px; padding: 34px 25px; background: var(--theme-surface-strong); }
  .hero h1 { font-size: clamp(3.1rem, 18vw, 5rem); }
  .hero-mark { right: 25px; top: auto; bottom: 30px; transform: rotate(7deg); }
  .launch-grid { grid-template-columns: 1fr; }
  .launch-card-featured { grid-column: auto; }
  .site-footer { display: grid; justify-content: center; text-align: center; }
  .site-footer .footer-brand { justify-content: center; }
  .site-footer nav { justify-content: center; }
}

/* Shared inner-page system */
.page-mast {
  position: relative;
  display: flex;
  min-height: 220px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  overflow: hidden;
  margin-bottom: 20px;
  padding: 38px 42px;
  color: #fff;
  background:
    linear-gradient(105deg, rgb(7 30 46 / 98%) 0 64%, rgb(11 70 83 / 91%) 64% 100%);
  box-shadow: var(--shadow);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}

.page-mast::before {
  position: absolute;
  width: 340px;
  height: 340px;
  right: -80px;
  top: -120px;
  border: 42px solid rgb(0 216 206 / 28%);
  border-radius: 50%;
  content: '';
  box-shadow: 0 0 0 22px rgb(255 40 212 / 16%), inset 0 0 0 20px rgb(255 224 27 / 14%);
}

.page-mast::after {
  position: absolute;
  right: 9%;
  bottom: -66px;
  width: 350px;
  height: 145px;
  content: '';
  background: linear-gradient(90deg, var(--purple), var(--pink), var(--yellow));
  clip-path: polygon(0 32%, 100% 0, 78% 100%, 8% 80%);
  opacity: .28;
}

.page-mast > * { position: relative; z-index: 2; }
.page-mast .kicker { margin-bottom: 11px; color: var(--cyan); }
.page-mast h1 { margin: 0; font-size: clamp(2.65rem, 6vw, 5rem); letter-spacing: -.055em; line-height: .9; text-transform: uppercase; }
.page-mast p { max-width: 650px; margin: 17px 0 0; color: #c9e4e9; font-family: system-ui, sans-serif; font-size: .94rem; font-weight: 650; }
.mast-actions { flex: 0 0 auto; padding-bottom: 7px; }
.surface { overflow: hidden; border: 1px solid rgb(255 255 255 / 90%); background: rgb(255 255 255 / 84%); box-shadow: 0 15px 38px rgb(41 79 104 / 12%); backdrop-filter: blur(14px); }
.surface-heading { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 22px; border-bottom: 4px solid transparent; border-image: linear-gradient(90deg, var(--pink), var(--purple), var(--cyan)) 1; background: rgb(255 255 255 / 70%); }
.surface-heading > div { display: grid; gap: 2px; }
.surface-heading small { color: var(--purple); font-size: .65rem; font-weight: 900; letter-spacing: .13em; }
.surface-heading h2 { margin: 0; font-size: 1.35rem; line-height: 1; text-transform: uppercase; }
.surface-heading > span { color: #58717d; font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.empty-state { display: grid; min-height: 230px; place-content: center; padding: 40px; text-align: center; }
.empty-state > span { color: var(--cyan-dark); font-size: 2.5rem; line-height: 1; }
.empty-state strong { margin-top: 8px; font-size: 1.05rem; text-transform: uppercase; }
.empty-state p { max-width: 420px; margin: 7px 0 0; color: #627681; font-family: system-ui, sans-serif; font-size: .85rem; font-weight: 600; }
.mini-action { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; border: 0; padding: 0 16px; color: #fff; background: var(--ink); font-size: .7rem; font-weight: 900; cursor: pointer; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }

/* Brackets and mappools */
.tab-bar { display: grid; grid-template-columns: 1fr 1fr; margin: 20px 0 10px; background: rgb(255 255 255 / 88%); box-shadow: 0 10px 26px rgb(41 79 104 / 9%); }
.tab-bar a { display: flex; min-height: 64px; align-items: center; justify-content: center; gap: 13px; border-bottom: 5px solid transparent; color: #48616e; font-size: .95rem; font-weight: 900; text-transform: uppercase; }
.tab-bar a b { color: #a5bac2; font-size: .68rem; }
.tab-bar a:first-child.active { border-color: #ff7e00; color: var(--ink); background: rgb(255 126 0 / 8%); }
.tab-bar a:last-child.active { border-color: #8e1be5; color: var(--ink); background: rgb(142 27 229 / 8%); }
.map-summary { display: grid; grid-template-columns: 150px 110px 180px 1fr; align-items: center; gap: 10px; margin-bottom: 10px; padding: 15px 18px; color: #fff; background: rgb(7 31 47 / 92%); }
.map-summary > div { display: grid; gap: 2px; border-right: 1px solid rgb(255 255 255 / 15%); }
.map-summary small { color: var(--cyan); font-size: .6rem; font-weight: 900; letter-spacing: .1em; }
.map-summary strong { font-size: .82rem; text-transform: uppercase; }
.map-summary p { margin: 0; color: #bdd5dc; font-family: system-ui, sans-serif; font-size: .76rem; font-weight: 600; text-align: right; }
.song-list { display: grid; gap: 7px; }
.song-card { position: relative; display: grid; min-height: 148px; grid-template-columns: 56px 148px minmax(0, 1fr) 210px; align-items: stretch; overflow: hidden; border: 1px solid rgb(255 255 255 / 80%); background: rgb(255 255 255 / 86%); box-shadow: 0 8px 22px rgb(41 79 104 / 9%); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.song-card::after { position: absolute; right: 0; bottom: 0; left: 0; height: 4px; content: ''; background: linear-gradient(90deg, var(--purple), #5285ff, var(--cyan)); }
.song-card:hover { z-index: 2; transform: translateX(5px); box-shadow: 0 13px 28px rgb(41 79 104 / 16%); }
.song-number { display: grid; place-items: center; color: #fff; background: var(--ink); font-size: .72rem; font-weight: 900; writing-mode: vertical-rl; }
.song-jacket { display: block; width: 148px; height: 148px; object-fit: cover; background: #dbeef1; }
.song-copy { align-self: center; min-width: 0; padding: 20px 26px; }
.song-copy small { color: var(--purple); font-size: .58rem; font-weight: 900; letter-spacing: .13em; }
.song-copy h2 { margin: 4px 0 4px; overflow-wrap: anywhere; font-size: clamp(1.05rem, 2vw, 1.4rem); line-height: 1.05; }
.song-copy p { margin: 0; color: #536c78; font-family: system-ui, sans-serif; font-size: .8rem; font-weight: 700; }
.chart-meta { display: grid; align-content: center; gap: 11px; padding: 18px 22px; background: rgb(8 29 44 / 4%); }
.difficulty { display: inline-flex; width: fit-content; min-width: 132px; min-height: 34px; align-items: center; justify-content: space-between; gap: 12px; border-left: 6px solid currentColor; padding: 0 10px; color: #fff; font-size: .67rem; font-weight: 900; letter-spacing: .04em; text-shadow: 0 1px 1px rgb(0 0 0 / 24%); }
.difficulty b { font-size: .88rem; }
.difficulty-basic { background: #00ab84; }
.difficulty-advanced { background: #ff7e00; }
.difficulty-expert { background: #f12929; }
.difficulty-master { background: #8e1be5; }
.difficulty-ultima { background: #ff173d; }
.difficulty-worlds-end { color: var(--ink); background: #ffcc00; text-shadow: none; }
.difficulty-novice { background: #7447d8; }
.difficulty-advanced { color: #231900; background: #ffd43b; text-shadow: none; }
.difficulty-exhaust { background: #e73852; }
.difficulty-infinite { background: #d04aa8; }
.difficulty-gravity { background: #e7732e; }
.difficulty-heavenly { color: #071228; background: #65e4f0; text-shadow: none; }
.difficulty-vivid { background: #f035a4; }
.difficulty-exceed { color: #071228; background: #f4f7fb; text-shadow: none; }
.difficulty-nabla { color: #071228; background: linear-gradient(100deg, #18e9ee, #f4f7fb 50%, #ff2fa9); text-shadow: none; }
.difficulty-maximum { background: #7137c8; }
.difficulty-ultimate { color: #071228; background: #f4f7fb; text-shadow: none; }
.version-chip { display: inline-flex; width: fit-content; min-height: 26px; align-items: center; border: 1px solid var(--cyan-dark); padding: 0 9px; color: #24727a; font-size: .58rem; font-weight: 900; }

/* Song details */
.song-detail-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); }
.song-detail-jacket { width: 360px; height: 360px; background: #dbeef1; }
.song-detail-copy { display: grid; align-content: center; padding: 38px 42px; }
.song-detail-copy h2 { margin: 18px 0 3px; overflow-wrap: anywhere; font-size: clamp(2rem, 4.2vw, 3.8rem); letter-spacing: -.045em; line-height: .92; text-transform: uppercase; }
.song-detail-copy > p { margin: 7px 0 23px; color: #526b76; font-family: system-ui, sans-serif; font-size: 1rem; font-weight: 700; }
.song-detail-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 24px; }
.song-detail-meta > div { min-width: 0; padding: 13px 15px; background: rgb(8 29 44 / 5%); }
.song-detail-meta dt { color: var(--purple); font-size: .56rem; font-weight: 900; letter-spacing: .1em; }
.song-detail-meta dd { margin: 3px 0 0; overflow-wrap: anywhere; font-size: .86rem; font-weight: 900; text-transform: uppercase; }
.song-reference-links { display: flex; flex-wrap: wrap; gap: 9px; }
.song-reference-links .action { min-width: 210px; }
.song-reference-sdvx { background: #176a80; }
.song-bracket-history { margin-top: 16px; }
.song-bracket-history .empty-state { min-height: 210px; }
.song-bracket-table { min-width: 820px; }

/* Rules */
.rules-intro { position: relative; overflow: hidden; margin-bottom: 16px; padding: 35px 38px; color: #fff; background: linear-gradient(105deg, #071f30, #0d4c57); box-shadow: var(--shadow); }
.rules-intro::after { position: absolute; right: -60px; bottom: -120px; width: 290px; height: 220px; content: ''; background: linear-gradient(100deg, var(--purple), var(--pink), var(--yellow)); transform: rotate(-12deg); opacity: .24; }
.rules-intro > * { position: relative; z-index: 1; }
.rules-intro small { color: var(--cyan); font-size: .62rem; font-weight: 900; letter-spacing: .14em; }
.rules-intro h2 { max-width: 800px; margin: 7px 0 9px; font-size: clamp(1.7rem, 3.6vw, 3rem); line-height: 1; text-transform: uppercase; }
.rules-intro p { max-width: 760px; margin: 0; color: #c7dfe4; font-family: system-ui, sans-serif; font-size: .9rem; font-weight: 650; }
.rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rules-card { position: relative; display: grid; min-height: 220px; grid-template-columns: 80px 1fr; align-items: start; padding: 28px; }
.rules-card > span { color: transparent; background: linear-gradient(140deg, var(--pink), var(--purple), var(--cyan)); background-clip: text; -webkit-background-clip: text; font-size: 2.2rem; font-weight: 900; line-height: 1; }
.rules-card small { color: var(--purple); font-size: .58rem; font-weight: 900; letter-spacing: .12em; }
.rules-card h2 { margin: 6px 0 9px; font-size: 1.25rem; line-height: 1.05; text-transform: uppercase; }
.rules-card p { margin: 0; color: #536c77; font-family: system-ui, sans-serif; font-size: .82rem; font-weight: 650; line-height: 1.55; }
.rules-example { margin-top: 16px; }
.rules-example-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
.rules-example-grid article { display: grid; min-height: 135px; place-content: center; background: rgb(255 255 255 / 92%); text-align: center; }
.rules-example-grid small { color: var(--purple); font-size: .6rem; font-weight: 900; }
.rules-example-grid strong { font-size: 2.4rem; line-height: 1; }
.rules-example-grid span { color: #607681; font-family: system-ui, sans-serif; font-size: .66rem; font-weight: 700; }
.rules-example > p { margin: 0; padding: 18px 22px; color: #536c77; font-family: system-ui, sans-serif; font-size: .78rem; font-weight: 650; }

/* Scoreboards and rankings */
.score-key { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 10px; }
.score-key span { display: flex; min-width: 0; align-items: center; gap: 9px; padding: 10px 12px; background: rgb(255 255 255 / 74%); color: #4b6571; font-size: .64rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-key b { display: grid; flex: 0 0 auto; width: 24px; height: 24px; place-items: center; color: #fff; background: #607681; }
.score-key .score-key-basic { background: #00ab84; }
.score-key .score-key-advanced { background: #ff7e00; }
.score-key .score-key-expert { background: #f12929; }
.score-key .score-key-master { background: #8e1be5; }
.score-key .score-key-ultima { background: #ff173d; }
.score-key .score-key-worlds-end { color: var(--ink); background: #ffcc00; }
.score-key .boss-chart-key { box-shadow: inset 0 -4px 0 var(--yellow); }
.table-shell { overflow: hidden; border: 1px solid rgb(255 255 255 / 82%); background: rgb(255 255 255 / 84%); box-shadow: var(--shadow); }
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; min-width: 800px; border-collapse: collapse; }
.data-table th { height: 60px; padding: 0 18px; color: #fff; background: var(--ink); font-size: .66rem; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.data-table thead { border-bottom: 5px solid transparent; border-image: linear-gradient(90deg, var(--pink), var(--purple), var(--cyan)) 1; }
.data-table td { height: 86px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-family: system-ui, sans-serif; font-size: .86rem; font-weight: 700; }
.data-table .empty-row td { height: 300px; color: #667c86; text-align: center; }
.rank-spotlight { position: relative; display: grid; grid-template-columns: 112px 92px 1fr auto; align-items: center; gap: 20px; overflow: hidden; margin-bottom: 12px; padding: 18px 24px 18px 0; color: #fff; background: linear-gradient(100deg, #071f30, #0d4c57); box-shadow: var(--shadow); }
.rank-spotlight::after { position: absolute; right: 12%; bottom: -70px; width: 280px; height: 130px; content: ''; background: linear-gradient(90deg, var(--purple), var(--pink), var(--yellow)); transform: rotate(-7deg); opacity: .18; }
.spotlight-rank { display: grid; height: 112px; place-items: center; color: var(--yellow); background: rgb(255 255 255 / 7%); font-size: 2.2rem; font-weight: 900; }
.rank-spotlight > img { width: 82px; height: 82px; border: 3px solid #fff; border-radius: 18px; object-fit: cover; }
.rank-spotlight > div { position: relative; z-index: 2; display: grid; }
.rank-spotlight small { color: var(--cyan); font-size: .6rem; font-weight: 900; letter-spacing: .12em; }
.rank-spotlight strong { font-size: 1.75rem; line-height: 1.05; }
.rank-spotlight > div span { color: #c4dce1; font-family: system-ui, sans-serif; font-size: .76rem; font-weight: 700; }
.rank-spotlight .mini-action { position: relative; z-index: 2; background: var(--pink); }
.leaderboard-filter { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 12px; padding: 16px 20px; }
.leaderboard-filter form { display: flex; align-items: end; gap: 9px; }
.leaderboard-filter label { display: grid; align-self: stretch; align-content: center; color: var(--purple); font-size: .6rem; font-weight: 900; letter-spacing: .1em; }
.leaderboard-filter select { width: min(330px, 42vw); min-height: 44px; border: 1px solid #bfd4da; border-radius: 0; padding: 0 12px; color: var(--ink); background: #fff; font-family: system-ui, sans-serif; font-size: .8rem; font-weight: 700; }
.leaderboard-filter select:focus { border-color: var(--purple); outline: 3px solid rgb(160 0 237 / 12%); }
.leaderboard-filter .mini-action { min-height: 44px; border: 0; background: var(--purple); cursor: pointer; }
.leaderboard-filter form > a { min-height: 44px; padding: 14px 8px 0; color: #8b22c9; font-size: .62rem; font-weight: 900; }
.leaderboard-filter > span { color: #526b76; font-family: system-ui, sans-serif; font-size: .7rem; font-weight: 750; text-align: right; }
.country-ranking-tabs { display: flex; gap: 5px; overflow-x: auto; margin-bottom: 10px; padding: 3px 3px 7px; scrollbar-width: thin; }
.country-ranking-tabs a { display: inline-flex; flex: 0 0 auto; min-height: 44px; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid #bfd4da; color: #425e6b; background: rgb(255 255 255 / 82%); font-size: .64rem; font-weight: 900; text-decoration: none; text-transform: uppercase; box-shadow: 0 8px 20px rgb(41 79 104 / 7%); }
.country-ranking-tabs a:hover, .country-ranking-tabs a:focus-visible { border-color: var(--purple); color: var(--purple); }
.country-ranking-tabs a.is-active { border-color: var(--purple); color: #fff; background: var(--purple); }
.country-ranking-tabs a > span { display: inline-flex; align-items: center; gap: 7px; }
.country-ranking-tabs b { display: grid; min-width: 23px; height: 23px; place-items: center; padding: 0 6px; color: var(--purple); background: #f4e6fc; font-family: system-ui, sans-serif; font-size: .62rem; }
.country-ranking-tabs .is-active b { color: var(--ink); background: var(--yellow); }
.country-flag-icon { display: inline-block; width: 28px; height: 21px; flex: 0 0 auto; overflow: hidden; border: 0; border-radius: 0; background-color: transparent; background-image: url('/assets/flags.png?v=20260825-pixel-aligned'); background-repeat: no-repeat; background-position: var(--flag-x-lg) var(--flag-y-lg); background-size: 480px 960px; box-shadow: 0 0 0 1px rgb(8 29 44 / 18%), 0 1px 3px rgb(8 29 44 / 20%); vertical-align: middle; }
.country-ranking-tabs .country-flag-icon { width: 24px; height: 18px; background-position: var(--flag-x-md) var(--flag-y-md); }
.inline-country { display: inline-flex; align-items: center; gap: 5px; }
.inline-country .country-flag-icon { width: 20px; height: 15px; background-position: var(--flag-x-sm) var(--flag-y-sm); }
.country-flag-icon.country-flag-nl { background-image: linear-gradient(to bottom, #ae1c28 0 33.333%, #fff 33.333% 66.667%, #21468b 66.667% 100%); background-position: 0 0; background-size: 100% 100%; }
.country-participation-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 7px; margin-bottom: 12px; }
.country-participation-stats article { display: grid; min-height: 104px; align-content: center; padding: 16px 18px; border: 1px solid rgb(255 255 255 / 86%); background: rgb(255 255 255 / 84%); box-shadow: 0 9px 22px rgb(41 79 104 / 8%); }
.country-participation-stats article:first-child { color: #fff; background: linear-gradient(120deg, var(--purple), #6d2bc9); }
.country-participation-stats small { color: var(--purple); font-size: .55rem; font-weight: 900; letter-spacing: .1em; }
.country-participation-stats article:first-child small { color: #e7c8fb; }
.country-participation-stats strong { margin-top: 4px; font-size: 1.35rem; line-height: 1.05; }
.country-participation-stats span { margin-top: 2px; color: #58707b; font-family: system-ui, sans-serif; font-size: .62rem; font-weight: 750; }
.country-ranking-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin-bottom: 12px; }
.country-ranking-summary article { position: relative; display: grid; min-height: 116px; align-content: center; overflow: hidden; border: 1px solid var(--line); padding: 18px 20px; color: var(--theme-text); background: var(--theme-surface); box-shadow: 0 9px 22px rgb(41 79 104 / 8%); }
.country-ranking-summary article::after { position: absolute; right: 0; bottom: 0; left: 0; height: 5px; content: ''; background: linear-gradient(90deg, var(--pink), var(--purple), var(--cyan)); }
.country-ranking-summary small, .country-ranking-highlights > article > small, .country-ranking-note small { color: var(--purple); font-size: .55rem; font-weight: 900; letter-spacing: .1em; }
.country-ranking-summary strong { margin-top: 5px; font-size: 1.65rem; line-height: 1; }
.country-ranking-summary span { margin-top: 5px; color: var(--theme-muted); font-family: system-ui, sans-serif; font-size: .6rem; font-weight: 700; }
.country-ranking-highlights { display: grid; grid-template-columns: 1.25fr repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.country-ranking-highlights > article { display: grid; min-height: 150px; align-content: center; border: 1px solid var(--line); padding: 22px; color: var(--theme-text); background: var(--theme-surface); box-shadow: 0 10px 24px rgb(41 79 104 / 9%); }
.country-ranking-highlights > article::before { width: 42px; height: 5px; margin-bottom: 12px; content: ''; background: linear-gradient(90deg, var(--pink), var(--yellow)); }
.country-ranking-highlights > article > div { display: flex; min-width: 0; align-items: center; gap: 10px; margin-top: 7px; }
.country-ranking-highlights > article > div strong { min-width: 0; overflow: hidden; font-size: 1rem; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.country-ranking-highlights > article > span { margin-top: 7px; color: var(--theme-muted); font-family: system-ui, sans-serif; font-size: .64rem; font-weight: 700; }
.country-ranking-highlights > article > span b { color: var(--theme-text); font-family: Tektur, sans-serif; font-size: .78rem; }
.country-ranking-highlights .country-highlight-primary { color: #fff; background: linear-gradient(120deg, #071f30, #0d4c57); }
.country-ranking-highlights .country-highlight-primary > small { color: var(--cyan); }
.country-ranking-highlights .country-highlight-primary > span { color: #c4dce1; }
.country-ranking-note { display: block; margin-bottom: 12px; padding: 18px 22px; border-left: 6px solid var(--yellow); color: var(--theme-text); background: var(--theme-surface); box-shadow: 0 9px 22px rgb(41 79 104 / 8%); }
.country-ranking-note > div { display: grid; }
.country-ranking-note strong { margin-top: 4px; font-size: .9rem; text-transform: uppercase; }
.country-ranking-table { min-width: 1420px; }
.country-ranking-table td { height: 96px; }
.country-rank-name { display: inline-flex; min-width: 190px; align-items: center; gap: 12px; }
.country-rank-name > span { display: grid; }
.country-rank-name strong { font-family: Tektur, sans-serif; font-size: .86rem; text-transform: uppercase; }
.country-rank-name small { display: flex; align-items: center; gap: 6px; color: var(--theme-muted); font-size: .54rem; letter-spacing: .12em; }
.country-rank-name small em { padding: 2px 5px; color: #ffe875; background: #4b2768; font-size: .42rem; font-style: normal; letter-spacing: .06em; }
.country-average-rating { font-size: 1.15rem; }
.country-raw-average { display: block; margin-top: 4px; color: var(--theme-muted); font-size: .5rem; font-weight: 750; white-space: nowrap; }
.country-provisional-rank { display: inline-grid; min-width: 46px; min-height: 28px; place-items: center; padding: 0 7px; color: #ffe875; background: #4b2768; font-family: Tektur, sans-serif; font-size: .5rem; font-weight: 900; letter-spacing: .04em; }
.country-ranking-table tr.is-provisional-country td { background: rgb(160 0 237 / 5%); }
.country-ranking-table tr.is-provisional-country td:first-child { box-shadow: inset 4px 0 0 rgb(160 0 237 / 38%); }
.country-top-player { display: grid; min-width: 125px; gap: 2px; text-decoration: none; }
.country-top-player strong { max-width: 145px; overflow: hidden; color: var(--theme-text); font-family: Tektur, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.country-top-player .rating-value { font-size: .7rem; }
.country-player-count { font-size: 1.2rem; }
.country-participation-rate { display: grid; min-width: 112px; gap: 5px; }
.country-participation-rate > strong { font-family: Tektur, sans-serif; font-size: .86rem; }
.country-participation-rate progress { width: 112px; height: 6px; appearance: none; border: 0; border-radius: 0; background: var(--theme-subtle); }
.country-participation-rate progress::-webkit-progress-bar { background: var(--theme-subtle); }
.country-participation-rate progress::-webkit-progress-value { background: linear-gradient(90deg, var(--purple), var(--cyan)); }
.country-participation-rate progress::-moz-progress-bar { background: linear-gradient(90deg, var(--purple), var(--cyan)); }
.country-participation-rate small, .country-podium-total small, .country-finished-entries { color: var(--theme-muted); font-size: .55rem; font-weight: 750; }
.country-podium-total { display: grid; min-width: 112px; gap: 3px; }
.country-podium-total strong { color: var(--purple); font-family: Tektur, sans-serif; font-size: 1.25rem; }
.country-medal-counts { display: flex; gap: 4px; }
.country-medal-counts span { display: grid; width: 40px; height: 45px; align-content: center; justify-items: center; color: var(--ink); font-family: Tektur, sans-serif; }
.country-medal-counts b { font-size: .78rem; line-height: 1; }
.country-medal-counts small { font-size: .45rem; font-weight: 900; }
.country-medal-counts .medal-first { background: linear-gradient(145deg, #fff7a8, #ffc400 58%, #d78c00); }
.country-medal-counts .medal-second { background: linear-gradient(145deg, #f9ffff, #b7c9cf 58%, #7c919a); }
.country-medal-counts .medal-third { background: linear-gradient(145deg, #ffd1a1, #c87b3f 58%, #82431f); }
.country-average-finish { display: block; color: var(--cyan-dark); font-family: Tektur, sans-serif; font-size: 1rem; }
.country-finished-entries { display: block; margin-top: 3px; }
.country-tier-counts { display: flex; gap: 5px; }
.country-tier-counts span { display: grid; min-width: 54px; padding: 7px 8px; color: var(--theme-text); background: var(--theme-subtle); }
.country-tier-counts b { font-family: Tektur, sans-serif; font-size: .76rem; }
.country-tier-counts small { color: var(--theme-muted); font-size: .45rem; font-weight: 900; }
.rank-badge { display: grid; width: 38px; height: 38px; place-items: center; color: var(--ink); font-family: Tektur, sans-serif; font-weight: 900; clip-path: polygon(50% 0, 100% 24%, 92% 82%, 50% 100%, 8% 82%, 0 24%); }
.rank-badge-1 { background: linear-gradient(135deg, #fff39a, #ffc400 55%, #db9200); }
.rank-badge-2 { background: linear-gradient(135deg, #faffff, #b9c9ce 58%, #81949c); }
.rank-badge-3 { background: linear-gradient(135deg, #ffc58f, #c77638 58%, #83451f); }
.rank-number { display: inline-block; min-width: 38px; color: #536b76; text-align: center; }
.player-link { display: inline-flex; align-items: center; gap: 12px; border: 0; color: var(--ink); font-family: Tektur, sans-serif; font-weight: 900; text-decoration: none; }
.player-link img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; }
.player-link span { color: var(--pink); }
.player-link .country-flag-icon { width: 28px; height: 21px; margin-left: -5px; color: inherit; }
.rating-value { display: inline-block; width: fit-content; font-family: Tektur, sans-serif; font-weight: 900; }
.rating-green { color: #008f5d !important; }
.rating-orange { color: #e36a00 !important; }
.rating-red { color: #dc263a !important; }
.rating-purple { color: #861bd1 !important; }
.rating-bronze { color: transparent !important; background: linear-gradient(180deg, #f3ae79, #a85424); background-clip: text; -webkit-background-clip: text; }
.rating-silver { color: transparent !important; background: linear-gradient(180deg, #f9ffff, #778d98); background-clip: text; -webkit-background-clip: text; filter: drop-shadow(0 1px 0 #29404b); }
.rating-gold { color: transparent !important; background: linear-gradient(180deg, #fff49b, #d99000); background-clip: text; -webkit-background-clip: text; filter: drop-shadow(0 1px 0 #6d4800); }
.rating-platinum { color: transparent !important; background: linear-gradient(90deg, #33c8c1, #ecffff, #758aff); background-clip: text; -webkit-background-clip: text; filter: drop-shadow(0 1px 0 #245b6a); }
.rating-rainbow, .rating-rainbow-kiwami { color: transparent !important; background-clip: text; -webkit-background-clip: text; filter: drop-shadow(0 1px 0 rgb(8 29 44 / 55%)); }
.rating-rainbow { background-image: linear-gradient(90deg, #ff3c9d, #8e45ef, #317ff4, #00bfae, #d5a600, #ff5948); }
.rating-rainbow-kiwami { background-image: linear-gradient(180deg, #fff35a 0%, #ffe32e 15%, #ff9a22 23%, #ff246f 31%, #f807ac 40%, #a916dc 49%, #4938e4 58%, #087ff2 66%, #00cce8 74%, #00dfb0 82%, #4bed75 88%, #64f066 100%); filter: saturate(1.18) contrast(1.08) drop-shadow(0 1px 0 rgb(4 20 30 / 72%)); }
.possession { display: grid; width: fit-content; min-width: 92px; padding: 6px 10px; color: #283f4c; font-family: Tektur, sans-serif; text-transform: uppercase; }
.possession-none { min-width: 0; padding: 0; color: #536b76; background: transparent; }
.possession-silver { background: linear-gradient(120deg, #95a7ae, #f8ffff 48%, #aebec4); box-shadow: inset 0 0 0 1px #8499a2; }
.possession-gold { background: linear-gradient(120deg, #c48200, #fff19a 48%, #e1a900); box-shadow: inset 0 0 0 1px #a36e00; }
.possession-platinum { background: linear-gradient(120deg, #31bcb8, #efffff 42%, #7192d4 74%, #a7fff1); box-shadow: inset 0 0 0 1px #358a96; }
.possession-rainbow { background: linear-gradient(115deg, #ff83c0, #b894ff, #70cfff, #76f1d6, #fff18b, #ff9a8d); box-shadow: inset 0 0 0 1px #786e93; }
.possession b { font-size: .7rem; }
.possession small { color: #314852; font-size: .55rem; }
.data-table tr.is-current-player td { background: rgb(0 216 206 / 12%); }
.data-table tr.is-current-player td:first-child { box-shadow: inset 6px 0 0 var(--cyan-dark); }
.data-table tr.is-current-player .player-link::after { margin-left: 2px; padding: 3px 6px; color: #fff; background: var(--purple); content: 'YOU'; font-size: .5rem; letter-spacing: .08em; }
.course-level-cell { min-width: 150px; padding-block: 8px !important; }
.course-level-art { position: relative; z-index: 1; display: inline-flex; width: 128px; height: 56px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; vertical-align: middle; }
.course-level-image { display: block; width: 128px !important; height: 56px !important; max-width: none !important; object-fit: contain; }
.course-level-image-icon-only { width: 56px !important; }
.course-level-art-large { width: 160px; height: 70px; margin-top: 6px; }
.course-level-art-large .course-level-image { width: 160px !important; height: 70px !important; }
.course-level-art-large .course-level-image-icon-only { width: 70px !important; }
.course-level-fallback { display: inline-block; color: var(--ink); font-family: Tektur, sans-serif; font-weight: 900; }
.course-level-art small { color: var(--theme-muted); font-family: Tektur, sans-serif; font-size: .52rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.course-level-metric .course-level-fallback { margin-top: 8px; font-size: 2rem; }
.vf-class-badge { display: inline-flex; min-height: 30px; align-items: center; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--cyan) 55%, var(--theme-border)); color: var(--theme-text); background: color-mix(in srgb, var(--cyan) 12%, var(--theme-surface)); font-family: Tektur, sans-serif; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.metric-grid article.profile-vf-class { border-color: color-mix(in srgb, var(--pink) 50%, var(--theme-border)); background: var(--theme-surface); }
.metric-grid article.profile-vf-class > span { color: var(--theme-muted); }
.leaderboard-pagination { display: grid; grid-template-columns: auto minmax(190px, 1fr) auto; align-items: center; gap: 12px; margin-top: 12px; padding: 12px; border: 1px solid var(--theme-border); background: var(--theme-surface); box-shadow: var(--shadow); }
.leaderboard-pagination > span:not(.mini-action) { display: grid; color: var(--theme-text); font-size: .68rem; font-weight: 900; text-align: center; text-transform: uppercase; }
.leaderboard-pagination small { color: var(--theme-muted); font-size: .56rem; letter-spacing: .08em; }
.leaderboard-pagination .mini-action { min-width: 112px; border: 0; text-align: center; }
.leaderboard-pagination .is-disabled { cursor: default; opacity: .35; }
.rank-signin { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 12px; padding: 20px 24px; color: #fff; background: linear-gradient(100deg, #071f30, #0d4c57); box-shadow: var(--shadow); }
.rank-signin > div { display: grid; }
.rank-signin small { color: var(--cyan); font-size: .6rem; font-weight: 900; letter-spacing: .12em; }
.rank-signin strong { font-size: 1rem; text-transform: uppercase; }
.bracket-eligibility { margin-top: 10px; }
.eligibility-lock { background: linear-gradient(100deg, #611725, #a9233a); }
.eligibility-lock small { color: #ffd65b; }
.bracket-frozen { margin-top: 10px; background: linear-gradient(100deg, #26355c, #42598c); }
.bracket-frozen small { color: #9eefff; }

/* Player profile */
.profile-layout { display: grid; grid-template-columns: 350px 1fr; gap: 16px; }
.profile-identity { position: relative; overflow: hidden; min-height: 520px; padding: 40px 34px; color: #fff; background: linear-gradient(160deg, #071f30 0 55%, #0b5159); box-shadow: var(--shadow); text-align: center; }
.profile-identity::before { position: absolute; width: 300px; height: 300px; left: -110px; bottom: -90px; border: 38px solid rgb(0 216 206 / 25%); border-radius: 50%; content: ''; box-shadow: 0 0 0 18px rgb(255 40 212 / 14%); }
.profile-visual { position: relative; z-index: 2; width: 220px; height: 220px; margin: 0 auto 24px; padding: 9px; background: linear-gradient(135deg, var(--purple), #4d8aff, var(--cyan)); clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.profile-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.profile-identity > small { position: relative; z-index: 2; color: var(--cyan); font-size: .62rem; font-weight: 900; letter-spacing: .14em; }
.profile-identity h2 { position: relative; z-index: 2; margin: 4px 0 18px; font-size: 2.1rem; text-transform: uppercase; }
.profile-country-badge { position: relative; z-index: 2; display: flex; width: fit-content; align-items: center; gap: 9px; margin: -7px auto 17px; padding: 0; color: #e8fbfc; background: transparent; font-family: system-ui, sans-serif; font-size: .72rem; font-weight: 800; }
.profile-country-badge .country-flag-icon { width: 28px; height: 21px; box-shadow: 0 0 0 1px rgb(255 255 255 / 28%), 0 2px 5px rgb(0 0 0 / 28%); }
.profile-country-edit { text-decoration: none; transition: color .18s ease, opacity .18s ease; }
.profile-country-edit:hover, .profile-country-edit:focus-visible { color: #fff; opacity: .76; outline: none; }
.profile-country-edit:focus-visible .country-flag-icon { outline: 2px solid var(--cyan); outline-offset: 3px; }
.profile-country-privacy { color: #ffe07a; font-size: .5rem; font-weight: 900; letter-spacing: .08em; }
.profile-country-empty { color: #a9c3c8; }
.profile-country-hidden { color: #d8e5e8; }
.connected-state { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; color: #c5e4e7; font-family: system-ui, sans-serif; font-size: .72rem; font-weight: 750; }
.connected-state i, .status-pill i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #00e68b; box-shadow: 0 0 0 4px rgb(0 230 139 / 15%); }
.profile-content { display: grid; align-content: start; gap: 16px; }
.profile-country-settings { display: flex; align-items: end; justify-content: space-between; gap: 22px; padding: 20px 22px; }
.profile-country-settings > div { display: grid; }
.profile-country-settings small { color: var(--purple); font-size: .58rem; font-weight: 900; letter-spacing: .12em; }
.profile-country-settings h2 { margin: 4px 0 2px; font-size: 1rem; text-transform: uppercase; }
.profile-country-settings p { margin: 0; color: #58707b; font-family: system-ui, sans-serif; font-size: .7rem; font-weight: 650; }
.profile-country-settings form { display: grid; min-width: 330px; grid-template-columns: minmax(160px, 1fr) auto; align-items: end; gap: 8px; }
.profile-country-settings label { grid-column: 1 / -1; color: var(--purple); font-size: .57rem; font-weight: 900; letter-spacing: .1em; }
.profile-country-settings select { min-height: 44px; border: 1px solid #bfd4da; border-radius: 0; padding: 0 12px; color: var(--ink); background: #fff; font-family: system-ui, sans-serif; font-size: .78rem; font-weight: 700; }
.profile-country-settings select:focus { border-color: var(--purple); outline: 3px solid rgb(160 0 237 / 12%); }
.profile-country-settings .mini-action { min-height: 44px; border: 0; background: var(--purple); cursor: pointer; }
.profile-country-settings .country-visibility-check { display: flex; grid-column: 1 / -1; align-items: center; gap: 8px; color: #526b76; font-family: system-ui, sans-serif; font-size: .7rem; font-weight: 750; letter-spacing: 0; text-transform: none; }
.country-visibility-check input { width: 18px; height: 18px; accent-color: var(--purple); }
.profile-privacy-settings { overflow: hidden; }
.profile-privacy-settings article { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 20px 22px; border-top: 1px solid var(--line); }
.profile-privacy-settings article > div { display: grid; max-width: 620px; }
.profile-privacy-settings article small { color: var(--purple); font-size: .57rem; font-weight: 900; letter-spacing: .1em; }
.profile-privacy-settings article strong { margin-top: 2px; font-size: .86rem; text-transform: uppercase; }
.profile-privacy-settings article p { margin: 4px 0 0; color: #58707b; font-family: system-ui, sans-serif; font-size: .7rem; font-weight: 650; line-height: 1.45; }
.profile-privacy-settings article form { display: grid; min-width: 250px; gap: 6px; }
.profile-privacy-settings article form label { color: #8d2439; font-size: .55rem; font-weight: 900; letter-spacing: .08em; }
.profile-privacy-settings article form input { min-height: 40px; border: 1px solid #cfabb3; padding: 0 10px; font-family: system-ui, sans-serif; }
.profile-privacy-settings .mini-action { border: 0; cursor: pointer; }
.profile-privacy-settings .privacy-disconnect { background: #526b76; }
.profile-privacy-settings .privacy-danger { background: #fff4f5; }
.profile-privacy-settings .privacy-danger small { color: #b4203c; }
.profile-privacy-settings .privacy-danger .mini-action { background: #c32641; }
.metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.metric-grid article { position: relative; min-height: 128px; overflow: hidden; padding: 22px; border: 1px solid rgb(255 255 255 / 88%); background: rgb(255 255 255 / 86%); box-shadow: 0 12px 28px rgb(41 79 104 / 10%); }
.metric-grid article::after { position: absolute; right: -28px; bottom: -45px; width: 92px; height: 92px; content: ''; background: var(--cyan); transform: rotate(45deg); opacity: .16; }
.metric-grid article:nth-child(2)::after { background: var(--yellow); }
.metric-grid article:nth-child(3)::after { background: #aabac1; }
.metric-grid article:nth-child(4)::after { background: var(--pink); }
.metric-grid small { display: block; color: var(--purple); font-size: .61rem; font-weight: 900; letter-spacing: .12em; }
.metric-grid strong { display: inline-block; margin-top: 8px; font-size: 2rem; line-height: 1; text-transform: uppercase; }
.metric-grid article > span { margin-left: 8px; color: #546c76; font-size: .62rem; font-weight: 900; }
.metric-grid article.profile-possession-card { color: #283f4c; }
.metric-grid article.profile-possession-card > small { color: #314852; }
.metric-grid article.profile-possession-card > span { color: #314852; }
.metric-grid article.profile-possession-silver { border-color: #8499a2; background: linear-gradient(120deg, #95a7ae, #f8ffff 48%, #aebec4); }
.metric-grid article.profile-possession-gold { border-color: #a36e00; background: linear-gradient(120deg, #c48200, #fff19a 48%, #e1a900); }
.metric-grid article.profile-possession-platinum { border-color: #358a96; background: linear-gradient(120deg, #31bcb8, #efffff 42%, #7192d4 74%, #a7fff1); }
.metric-grid article.profile-possession-rainbow { border-color: #786e93; background: linear-gradient(115deg, #ff83c0, #b894ff, #70cfff, #76f1d6, #fff18b, #ff9a8d); }
.metric-grid article.profile-possession-none { color: var(--theme-text); background: var(--theme-surface); }
.metric-grid article.profile-possession-none > small { color: var(--purple); }
.metric-grid article.profile-possession-none > span { color: var(--theme-muted); }
.profile-achievements { overflow: hidden; }
.achievement-gallery-link { color: var(--purple); font-size: .63rem; font-weight: 900; letter-spacing: .06em; text-decoration: none; }
.achievement-gallery-link:hover, .achievement-gallery-link:focus-visible { color: var(--pink); }
.achievement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 0 20px 20px; }
.achievement-card { display: grid; min-height: 126px; grid-template-columns: 58px 1fr; align-items: center; gap: 15px; padding: 17px; border: 1px solid #c9dce1; background: linear-gradient(135deg, #fff, #f4fbfc); }
.achievement-icon { display: grid; width: 52px; height: 52px; place-items: center; color: var(--ink); background: linear-gradient(135deg, var(--yellow), #ff9d00); font-size: 1.55rem; font-weight: 900; clip-path: polygon(50% 0, 100% 24%, 92% 82%, 50% 100%, 8% 82%, 0 24%); }
.achievement-card > div, .admin-achievement-list article > div { display: grid; min-width: 0; }
.achievement-card strong, .admin-achievement-list strong { font-size: .8rem; text-transform: uppercase; }
.achievement-card p, .admin-achievement-list p { margin: 4px 0; color: #58707b; font-family: system-ui, sans-serif; font-size: .68rem; font-weight: 650; line-height: 1.4; }
.achievement-card small, .admin-achievement-list small { color: var(--purple); font-size: .54rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.achievement-player-banner { position: relative; display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 18px; overflow: hidden; margin-bottom: 14px; padding: 18px 22px; color: #fff; background: linear-gradient(105deg, #061622, #0a3546 58%, #35104f); box-shadow: var(--shadow); }
.achievement-player-banner::after { position: absolute; right: 16%; bottom: -70px; width: 170px; height: 170px; border: 22px solid rgb(0 216 206 / 12%); content: ''; transform: rotate(45deg); }
.achievement-player-banner img { position: relative; z-index: 1; width: 84px; height: 84px; object-fit: cover; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.achievement-player-banner > div { position: relative; z-index: 1; display: grid; }
.achievement-player-banner small { color: var(--cyan); font-size: .58rem; font-weight: 900; letter-spacing: .13em; }
.achievement-player-banner h2 { margin: 3px 0 0; font-size: 1.8rem; text-transform: uppercase; }
.achievement-player-banner span { color: #b8d5de; font-family: system-ui, sans-serif; font-size: .7rem; font-weight: 750; }
.achievement-player-banner .mini-action { position: relative; z-index: 1; }
.achievement-category-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.achievement-category-nav a { display: flex; min-height: 46px; align-items: center; gap: 12px; padding: 0 15px; border: 1px solid var(--theme-border); color: var(--theme-text); background: var(--theme-surface); box-shadow: 0 7px 18px rgb(20 56 76 / 8%); }
.achievement-category-nav a:hover, .achievement-category-nav a:focus-visible { border-color: var(--purple); color: var(--purple); }
.achievement-category-nav strong { font-size: .66rem; text-transform: uppercase; }
.achievement-category-nav small { display: grid; min-width: 26px; height: 24px; place-items: center; color: #fff; background: var(--purple); font-size: .56rem; font-weight: 900; }
.achievement-category { margin-top: 18px; scroll-margin-top: 130px; --category-accent: var(--purple); }
.achievement-category-participation { --category-accent: var(--cyan-dark); }
.achievement-category-bracket_results { --category-accent: var(--pink); }
.achievement-category-chart_challenges { --category-accent: var(--purple); }
.achievement-category-score_lamps { --category-accent: #d5a600; }
.achievement-category-special { --category-accent: #397cff; }
.achievement-category-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 10px; padding: 15px 18px; border-left: 6px solid var(--category-accent); color: var(--theme-text); background: var(--theme-surface-strong); }
.achievement-category-heading div { display: grid; }
.achievement-category-heading small { color: var(--category-accent); font-size: .55rem; font-weight: 900; letter-spacing: .12em; }
.achievement-category-heading h2 { margin: 2px 0 0; font-size: 1.15rem; text-transform: uppercase; }
.achievement-category-heading > span { color: var(--theme-muted); font-family: system-ui, sans-serif; font-size: .68rem; font-weight: 800; }
.achievement-catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.achievement-catalog-card { position: relative; display: grid; min-height: 220px; grid-template-columns: 62px minmax(0, 1fr); grid-template-rows: 1fr auto auto; gap: 14px 17px; padding: 22px; border: 1px solid var(--theme-border); background: var(--theme-surface); box-shadow: 0 10px 25px rgb(20 56 76 / 9%); transition: opacity .18s ease, filter .18s ease; }
.achievement-catalog-card::before { position: absolute; top: -1px; left: -1px; width: 112px; height: 5px; content: ''; background: linear-gradient(90deg, var(--pink), var(--purple)); }
.achievement-catalog-card.is-locked { opacity: .48; filter: grayscale(1); }
.achievement-catalog-card.is-locked:hover { opacity: .66; }
.achievement-catalog-copy { display: grid; align-content: start; }
.achievement-catalog-copy small { color: var(--purple); font-size: .56rem; font-weight: 900; letter-spacing: .12em; }
.achievement-catalog-copy h2 { margin: 3px 0 5px; font-size: 1rem; text-transform: uppercase; }
.achievement-catalog-copy p { margin: 0; color: var(--theme-muted); font-family: system-ui, sans-serif; font-size: .7rem; font-weight: 650; line-height: 1.45; }
.achievement-progress { display: grid; grid-column: 1 / -1; gap: 7px; }
.achievement-progress span { color: var(--theme-text); font-family: system-ui, sans-serif; font-size: .68rem; font-weight: 800; }
.achievement-progress progress { width: 100%; height: 10px; overflow: hidden; border: 0; border-radius: 0; accent-color: var(--cyan-dark); background: var(--theme-subtle); }
.achievement-progress progress::-webkit-progress-bar { background: var(--theme-subtle); }
.achievement-progress progress::-webkit-progress-value { background: linear-gradient(90deg, var(--purple), var(--cyan-dark)); }
.achievement-progress progress::-moz-progress-bar { background: linear-gradient(90deg, var(--purple), var(--cyan-dark)); }
.achievement-catalog-card time { grid-column: 1 / -1; color: var(--purple); font-size: .55rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.rarity-common { --achievement-rarity: #fff; --achievement-rarity-ink: #102b3a; }
.rarity-uncommon { --achievement-rarity: #39c967; --achievement-rarity-ink: #061f11; }
.rarity-rare { --achievement-rarity: #378cff; --achievement-rarity-ink: #fff; }
.rarity-epic { --achievement-rarity: #a000ed; --achievement-rarity-ink: #fff; }
.rarity-legendary { --achievement-rarity: #ffe01b; --achievement-rarity-ink: #1b2508; }
.achievement-card[class*='rarity-'], .achievement-catalog-card[class*='rarity-'] { border-top: 5px solid var(--achievement-rarity); }
.achievement-catalog-card[class*='rarity-']::before { background: var(--achievement-rarity); }
.achievement-card[class*='rarity-'] .achievement-icon,
.achievement-catalog-card[class*='rarity-'] .achievement-icon,
.admin-achievement-list article[class*='rarity-'] .achievement-icon { color: var(--achievement-rarity-ink); background: var(--achievement-rarity); box-shadow: inset 0 0 0 1px rgb(8 29 44 / 16%), 0 5px 12px rgb(8 29 44 / 12%); }
.achievement-rarity-label { display: inline-flex; align-items: center; min-height: 18px; padding: 1px 6px; color: var(--achievement-rarity-ink); background: var(--achievement-rarity); box-shadow: inset 0 0 0 1px rgb(8 29 44 / 15%); font-size: .5rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.placement-history .empty-state { min-height: 250px; }
.action-kamaitachi { background: #ff3150; }

/* Rivals */
.rival-summary > span { color: #bcd7dc; font-family: system-ui, sans-serif; font-size: .76rem; font-weight: 700; text-align: right; }
.rival-management { margin-bottom: 16px; }
.rival-add-form { padding: 22px; border-bottom: 1px solid var(--line); }
.rival-add-form label { display: block; margin-bottom: 7px; color: var(--purple); font-size: .62rem; font-weight: 900; letter-spacing: .1em; }
.rival-add-form > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.rival-add-form select { width: 100%; min-height: 50px; border: 1px solid #bfd4da; border-radius: 0; padding: 0 14px; color: var(--ink); background: #fff; font-family: system-ui, sans-serif; font-size: .85rem; font-weight: 700; }
.rival-add-form select:focus { border-color: var(--purple); outline: 3px solid rgb(160 0 237 / 12%); }
.rival-add-form .action { min-width: 170px; }
.rival-limit-note { margin: 0; padding: 19px 22px; border-bottom: 1px solid var(--line); color: #536c76; font-family: system-ui, sans-serif; font-size: .8rem; font-weight: 700; }
.rival-empty { min-height: 190px; }
.rival-roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.rival-card { display: grid; min-width: 0; grid-template-columns: 70px minmax(0, 1fr) auto; align-items: center; gap: 15px; padding: 17px 20px; background: rgb(255 255 255 / 91%); }
.rival-card img { display: block; width: 70px; height: 70px; border: 3px solid #fff; border-radius: 14px; object-fit: cover; box-shadow: 0 6px 18px rgb(8 29 44 / 14%); }
.rival-card-copy { display: grid; min-width: 0; }
.rival-card-copy small { color: var(--purple); font-size: .55rem; font-weight: 900; letter-spacing: .12em; }
.rival-card-copy strong { display: block; overflow: hidden; font-size: 1rem; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.rival-card-copy span { font-size: .67rem; }
.rival-remove { border: 1px solid #e0b5bf; padding: 7px 9px; color: #a34b5d; background: transparent; font-size: .54rem; font-weight: 900; cursor: pointer; }
.rival-remove:hover, .rival-remove:focus-visible { color: #fff; background: #c63248; }
.rival-comparisons { display: grid; gap: 16px; }
.rival-comparison .surface-heading > a { color: var(--purple); font-size: .66rem; font-weight: 900; }
.rival-comparison .empty-state { min-height: 220px; }
.rival-bracket-meta { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 11px 20px; color: #45606d; background: rgb(0 216 206 / 9%); }
.rival-bracket-meta span { font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.rival-bracket-meta small { font-family: system-ui, sans-serif; font-size: .68rem; font-weight: 700; }
.rival-score-table { min-width: 1360px; }
.rival-score-table td { min-width: 116px; }
.rival-score-table td:first-child { min-width: 190px; }
.rival-score-table td.is-rival-best { background: rgb(255 224 27 / 22%); box-shadow: inset 0 -5px 0 #e9bd00; }
.rival-score-table tr.is-current-player td.is-rival-best { background: linear-gradient(rgb(255 224 27 / 24%), rgb(0 216 206 / 12%)); }
.rival-signin .pill { margin: 22px auto 0; }

/* Community and archive */
.community-stats { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 16px; }
.archive-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.community-stats article, .archive-stats article { position: relative; min-height: 145px; overflow: hidden; padding: 25px; color: #fff; background: var(--ink); box-shadow: 0 10px 28px rgb(41 79 104 / 13%); }
.community-stats article:nth-child(2), .archive-stats article:nth-child(2) { background: #263d93; }
.community-stats article:nth-child(3), .archive-stats article:nth-child(3) { color: var(--ink); background: var(--yellow); }
.community-stats small, .archive-stats small { display: block; font-size: .6rem; font-weight: 900; letter-spacing: .12em; }
.community-stats strong, .archive-stats strong { display: block; margin-top: 5px; font-size: 2.8rem; line-height: 1; }
.community-stats span { font-family: system-ui, sans-serif; font-size: .72rem; font-weight: 700; opacity: .76; }
.action-discord { background: #5865f2; }
.archive-stats article strong { font-size: clamp(1.8rem, 4vw, 3rem); }
.archive-list .empty-state { min-height: 360px; }
.filter-chip { border: 1px solid var(--cyan-dark); padding: 7px 10px; color: #24727a; font-size: .6rem; font-weight: 900; }

/* Admin */
.admin-notice { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 14px 18px; color: #fff; background: var(--ink); }
.admin-notice > span { color: #00e68b; }
.admin-notice > div { display: grid; flex: 1; }
.admin-notice strong { font-size: .75rem; text-transform: uppercase; }
.admin-notice small { color: #bdd4da; font-family: system-ui, sans-serif; font-size: .68rem; }
.admin-notice > b { color: var(--cyan); font-size: .62rem; letter-spacing: .08em; }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); gap: 16px; }
.admin-form { padding-bottom: 22px; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; padding: 22px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.admin-form label, .admin-panel label { display: grid; gap: 6px; color: #4a6370; font-size: .63rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.admin-form input, .admin-form select, .admin-panel input { width: 100%; min-height: 46px; border: 1px solid #c2d7dd; border-radius: 0; padding: 0 12px; color: var(--ink); background: rgb(255 255 255 / 85%); font-family: system-ui, sans-serif; font-size: .82rem; font-weight: 650; outline: none; }
.admin-form input:focus, .admin-form select:focus, .admin-panel input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgb(160 0 237 / 10%); }
.song-picker { margin: 0 22px; border: 1px solid #c6dbe0; padding: 13px; }
.song-picker legend { padding: 0 8px; color: var(--purple); font-size: .65rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.song-picker label { grid-template-columns: 36px 66px 1fr; align-items: center; gap: 8px; margin-bottom: 7px; }
.song-picker label:last-child { margin-bottom: 0; }
.song-picker label b { display: grid; height: 36px; place-items: center; color: #fff; background: var(--ink); font-size: .6rem; }
.song-picker label span { font-size: .58rem; }
.song-picker select { min-height: 39px; }
.form-actions { display: flex; justify-content: flex-end; padding: 18px 22px 0; }
.admin-side { display: grid; align-content: start; gap: 16px; }
.admin-panel { padding-bottom: 20px; }
.admin-panel .surface-heading { margin-bottom: 17px; }
.panel-copy { margin: 0 20px 17px; color: #5a717b; font-family: system-ui, sans-serif; font-size: .78rem; font-weight: 650; line-height: 1.5; }
.admin-panel > .mini-action { margin-left: 20px; }
.difficulty-key { display: flex; flex-wrap: wrap; gap: 5px; margin: -3px 20px 17px; }
.difficulty-key i { padding: 4px 7px; color: #fff; font-size: .52rem; font-style: normal; font-weight: 900; text-transform: uppercase; }
.difficulty-key .key-basic { background: #00ab84; }
.difficulty-key .key-advanced { background: #ff7e00; }
.difficulty-key .key-expert { background: #f12929; }
.difficulty-key .key-master { background: #8e1be5; }
.difficulty-key .key-ultima { background: #ff173d; }
.difficulty-key .key-worlds-end { color: var(--ink); background: #ffcc00; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; color: #157454 !important; }
.stacked-fields { display: grid; gap: 11px; padding: 0 20px 17px; }
.management-list { margin-top: 16px; }
.management-columns { display: grid; grid-template-columns: 1fr 1fr; }
.management-columns > div { border-right: 1px solid var(--line); }
.management-columns > div:last-child { border: 0; }
.management-columns h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 14px 22px; border-bottom: 1px solid var(--line); font-size: .72rem; text-transform: uppercase; }
.management-columns .empty-state { min-height: 190px; }
.delete-control { border: 1px solid #dbbec5; padding: 5px 8px; color: #9b737c; background: #fff; font-size: .52rem; font-weight: 900; text-transform: uppercase; }
.delete-control:disabled { cursor: not-allowed; opacity: .62; }
.frozen-record { padding: 7px 10px; color: #31546d; background: #ddecf3; font-size: .54rem; font-weight: 900; letter-spacing: .08em; }
.admin-achievement-panel { grid-column: 1 / -1; }
.admin-player-country-panel { grid-column: 1 / -1; }
.admin-player-country-panel .stack-form { grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto; align-items: end; }
.admin-achievement-create { display: grid; grid-template-columns: minmax(220px, 1fr) 130px; align-items: end; gap: 11px; margin: 20px 0; padding: 20px; border: 1px solid #c9dce1; background: #f8ffff; }
.admin-achievement-create .achievement-description-field { grid-column: 1 / -1; }
.admin-achievement-create input, .admin-achievement-create select, .admin-achievement-create textarea, .admin-achievement-award select { width: 100%; min-height: 46px; border: 1px solid #bfd4da; border-radius: 0; padding: 0 12px; color: var(--ink); background: #fff; font-family: system-ui, sans-serif; font-size: .78rem; font-weight: 650; }
.admin-achievement-create textarea { min-height: 82px; padding: 11px 12px; resize: vertical; }
.admin-achievement-create input:focus, .admin-achievement-create select:focus, .admin-achievement-create textarea:focus, .admin-achievement-award select:focus { border-color: var(--purple); outline: 3px solid rgb(160 0 237 / 13%); }
.admin-achievement-create .pill { justify-self: start; }
.admin-achievement-management { display: grid; grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr); gap: 14px; }
.admin-achievement-management h3 { margin: 0 0 13px; font-size: .75rem; text-transform: uppercase; }
.admin-achievement-award, .admin-achievement-list { padding: 18px; border: 1px solid #c9dce1; background: #f8ffff; }
.admin-achievement-list article { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 13px 0; border-top: 1px solid #d6e5e9; }
.admin-achievement-list article:first-of-type { border-top: 0; }
.admin-achievement-list .achievement-icon { width: 44px; height: 44px; font-size: 1.2rem; }

@media (max-width: 980px) {
  .page-mast { min-height: 200px; padding: 32px; }
  .page-mast::before { opacity: .6; }
  .song-card { grid-template-columns: 42px 132px minmax(0, 1fr) 170px; }
  .song-jacket { width: 132px; height: 132px; }
  .map-summary { grid-template-columns: 130px 90px 150px; }
  .map-summary p { grid-column: 1 / -1; padding-top: 8px; text-align: left; }
  .profile-layout { grid-template-columns: 300px 1fr; }
  .profile-visual { width: 190px; height: 190px; }
  .song-detail-layout { grid-template-columns: 300px minmax(0, 1fr); }
  .song-detail-jacket { width: 300px; height: 300px; }
  .song-detail-copy { padding: 28px; }
  .admin-grid { grid-template-columns: 1fr; }
  .country-ranking-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .country-ranking-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .page-mast { display: grid; min-height: 260px; align-content: end; padding: 28px 24px; }
  .page-mast h1 { font-size: clamp(2.5rem, 13vw, 4rem); }
  .mast-actions { padding: 0; }
  .mast-actions .action { width: 100%; }
  .map-summary { grid-template-columns: 1fr 1fr 1fr; }
  .song-card { min-height: 112px; grid-template-columns: 38px 112px minmax(0, 1fr); }
  .song-jacket { width: 112px; height: 112px; }
  .song-copy { padding: 12px 14px; }
  .song-copy h2 { font-size: .9rem; }
  .song-copy p { font-size: .66rem; }
  .chart-meta { grid-column: 2 / -1; grid-template-columns: auto 1fr; align-items: center; gap: 8px; padding: 8px 12px; }
  .difficulty { min-width: 125px; }
  .song-detail-layout { grid-template-columns: 1fr; }
  .song-detail-jacket { width: 100%; height: auto; aspect-ratio: 1; }
  .song-reference-links { display: grid; }
  .song-reference-links .action { width: 100%; }
  .rules-grid { grid-template-columns: 1fr; }
  .rules-example-grid { grid-template-columns: repeat(2, 1fr); }
  .score-key { grid-template-columns: 1fr 1fr; }
  .rank-spotlight { grid-template-columns: 65px 64px 1fr; padding: 12px 14px 12px 0; }
  .spotlight-rank { height: 80px; font-size: 1.45rem; }
  .rank-spotlight > img { width: 62px; height: 62px; }
  .rank-spotlight strong { font-size: 1.3rem; }
  .rank-spotlight .mini-action { grid-column: 2 / -1; width: fit-content; }
  .leaderboard-filter { display: grid; align-items: stretch; }
  .leaderboard-filter form { display: grid; grid-template-columns: 1fr auto; }
  .leaderboard-filter label { grid-column: 1 / -1; }
  .leaderboard-filter select { width: 100%; }
  .leaderboard-filter form > a { grid-column: 1 / -1; min-height: auto; padding: 4px 0 0; }
  .leaderboard-filter > span { text-align: left; }
  .leaderboard-pagination { grid-template-columns: 1fr 1fr; }
  .leaderboard-pagination > span:not(.mini-action) { grid-column: 1 / -1; grid-row: 1; }
  .country-ranking-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .country-ranking-highlights { grid-template-columns: 1fr; }
  .country-ranking-note { grid-template-columns: 1fr; gap: 9px; }
  .profile-layout { grid-template-columns: 1fr; }
  .profile-identity { min-height: 420px; }
  .profile-country-settings { display: grid; }
  .profile-country-settings form { min-width: 0; }
  .profile-privacy-settings article { display: grid; }
  .profile-privacy-settings article form { min-width: 0; }
  .rival-summary { display: grid; }
  .rival-summary > span { text-align: left; }
  .rival-add-form > div { grid-template-columns: 1fr; }
  .rival-add-form .action { width: 100%; }
  .rival-roster { grid-template-columns: 1fr; }
  .rival-bracket-meta { display: grid; }
  .community-stats, .archive-stats { grid-template-columns: 1fr; }
  .community-stats article, .archive-stats article { min-height: 110px; }
  .community-stats strong, .archive-stats strong { font-size: 2rem; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .management-columns { grid-template-columns: 1fr; }
  .management-columns > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .achievement-grid { grid-template-columns: 1fr; }
  .achievement-catalog-grid { grid-template-columns: 1fr; }
  .achievement-category-heading { display: grid; align-items: start; }
  .admin-achievement-management { grid-template-columns: 1fr; }
  .admin-player-country-panel .stack-form { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .tab-bar a { min-height: 55px; }
  .map-summary { grid-template-columns: 1fr 1fr; }
  .map-summary > div:nth-child(3) { grid-column: 1 / -1; }
  .song-card { grid-template-columns: 34px 96px minmax(0, 1fr); }
  .song-jacket { width: 96px; height: 96px; }
  .song-copy small { display: none; }
  .song-copy h2 { margin-top: 0; }
  .score-key { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: 1fr; }
  .profile-visual { width: 180px; height: 180px; }
  .achievement-player-banner { grid-template-columns: 64px 1fr; }
  .achievement-player-banner img { width: 64px; height: 64px; }
  .achievement-player-banner .mini-action { grid-column: 1 / -1; width: 100%; text-align: center; }
  .leaderboard-filter form, .profile-country-settings form { grid-template-columns: 1fr; }
  .leaderboard-filter label, .leaderboard-filter form > a, .profile-country-settings label { grid-column: auto; }
  .leaderboard-filter .mini-action, .profile-country-settings .mini-action { width: 100%; }
  .country-participation-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-achievement-create { grid-template-columns: 1fr; }
  .admin-achievement-create .achievement-description-field { grid-column: auto; }
  .admin-achievement-list article { grid-template-columns: 44px minmax(0, 1fr); }
  .admin-achievement-list article form { grid-column: 2; }
  .song-picker label { grid-template-columns: 32px 1fr; }
  .song-picker label span { display: none; }
}

/* Production PHP integration */
body { padding: 0; }
body > main.page { min-height: calc(100vh - 210px); }
.site-header { isolation: isolate; }
.site-footer nav a:hover, .site-footer nav a:focus-visible { color: #fff; }
.flash { z-index: 80; top: 126px; border: 0; border-radius: 0; background: #087f6f; box-shadow: var(--shadow); }
.flash-error { background: #b82632; }
.empty-state-large { min-height: 360px; }
.metric-note { margin: 14px 0 0; color: #526b76; font-family: system-ui, sans-serif; font-size: .76rem; font-weight: 650; }

.production-song-art { position: relative; overflow: hidden; }
.production-song-art .song-cover { position: relative; display: block; width: 100%; height: 100%; min-height: 100%; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.production-song-art .song-cover-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--purple), var(--cyan)); font-size: 2rem; font-weight: 900; }
.production-song-art .song-cover-image { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; border: 0; border-radius: 0; padding: 0; object-fit: cover; }
.page-bracket .map-summary { margin-top: 10px; }
.page-scores .score-table { min-width: 1480px; }
.page-scores .data-table td { min-width: 112px; }
.page-scores .data-table td:nth-child(2) { min-width: 170px; }
.bracket-rating { color: var(--purple); font-family: Tektur, sans-serif; font-size: 1rem; }
.points-needed { color: #24727a; white-space: nowrap; }
.bracket-score { display: grid; gap: 3px; line-height: 1.1; }
.bracket-score-value { display: flex; align-items: center; gap: 6px; }
.bracket-score strong { color: var(--ink); white-space: nowrap; }
.bracket-score small { color: #39747a; font-family: Tektur, sans-serif; font-size: .62rem; font-weight: 900; }
.score-note-lamp { display: inline-grid; min-width: 25px; height: 17px; place-items: center; overflow: hidden; padding: 0 5px; color: #fff; font-family: Tektur, sans-serif; font-size: .51rem; font-weight: 950; letter-spacing: .04em; line-height: 1; clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.score-note-lamp-fc { color: #302400; background: linear-gradient(180deg, #fff36a, #ffc919 52%, #ec8b00); text-shadow: 0 1px 0 rgb(255 255 255 / 45%); }
.score-note-lamp-aj {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 58%) 0%, rgb(255 255 255 / 10%) 31%, rgb(5 26 39 / 8%) 57%, rgb(5 26 39 / 38%) 100%),
    linear-gradient(108deg, #f72f7e 0%, #cf39cb 17%, #7745e5 33%, #2879e8 49%, #09b9da 63%, #14c69a 76%, #b5d64b 88%, #ffb83d 96%, #f05a46 100%);
  background-size: 100% 100%, 100% 100%;
  background-position: center;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 72%), inset 0 -2px 0 rgb(5 26 39 / 24%);
  text-shadow: -1px 0 #092334, 0 1px #092334, 1px 0 #092334, 0 -1px #092334;
}
.score-note-lamp-ajc {
  background:
    radial-gradient(ellipse at 48% -18%, rgb(255 255 255 / 90%) 0%, rgb(255 255 255 / 32%) 27%, transparent 52%),
    linear-gradient(180deg, rgb(255 255 255 / 32%) 0%, transparent 34%, rgb(4 20 30 / 26%) 100%),
    linear-gradient(100deg, #fff67a 0%, #ffd633 12%, #ff8d31 23%, #ff3f68 34%, #e22aa8 45%, #9b38dd 56%, #3b60e8 67%, #0aa8e9 77%, #05d4c2 87%, #57e77a 95%, #caef58 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  background-position: center;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 88%), inset 0 -2px 0 rgb(4 20 30 / 22%);
  filter: saturate(1.08) contrast(1.03);
  text-shadow: -1px 0 #071f30, 0 1px #071f30, 1px 0 #071f30, 0 -1px #071f30;
}
.score-note-lamp-clear { background: #2879e8; }
.score-note-lamp-excessive { color: #241600; background: #ffcb35; }
.score-note-lamp-maxxive { background: #ff2fa9; }
.score-note-lamp-uc { background: #18bfc8; }
.score-note-lamp-puc {
  color: #071228;
  background: linear-gradient(100deg, #18e9ee, #f4f7fb 48%, #ff2fa9);
  text-shadow: 0 1px 0 rgb(255 255 255 / 55%);
}
.profile-sync-form, .profile-sync-action, .profile-rival-form, .profile-rival-full { position: relative; z-index: 2; margin-top: 24px; }
.profile-sync-form .mini-action { background: #526b76; }
.profile-rival-form .mini-action { background: var(--purple); }
.profile-rival-full { display: inline-flex; min-height: 40px; align-items: center; padding: 0 16px; color: #b9d0d6; background: #405966; font-size: .7rem; font-weight: 900; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.sync-error { position: relative; z-index: 2; display: block; margin-top: 10px; color: #ffd1d8; font-family: system-ui, sans-serif; font-size: .67rem; }
.profile-external { position: relative; z-index: 2; margin-top: 12px; background: #ff3150; }
.placement-table { min-width: 650px; }
.community-join { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 16px; padding: 24px 28px; color: #fff; background: linear-gradient(105deg, #071f30, #0d4c57); box-shadow: var(--shadow); }
.community-join > div { display: grid; }
.community-join small { color: var(--cyan); font-size: .62rem; font-weight: 900; letter-spacing: .12em; }
.community-join strong { font-size: 1.2rem; text-transform: uppercase; }
.page-admin .gradient-panel, .setup-panel, .access-denied { border: 1px solid rgb(255 255 255 / 90%); color: var(--ink); background: rgb(255 255 255 / 88%); box-shadow: var(--shadow); backdrop-filter: blur(14px); }
.page-admin .admin-panel { max-width: none; margin: 0; padding: 28px; }
.page-admin .admin-topline h1, .page-admin .compact-admin h2, .setup-panel h1 { color: var(--ink); }
.page-admin .eyebrow, .page-admin .signed-in-as { color: var(--purple); }
.page-admin .admin-form input, .page-admin .admin-form select, .page-admin .stack-form input, .page-admin .stack-form select, .setup-panel input, .setup-panel select { border: 1px solid #bfd4da; border-radius: 0; color: var(--ink); background: #fff; font-family: system-ui, sans-serif; }
.page-admin .admin-form input:focus, .page-admin .admin-form select:focus, .page-admin .stack-form input:focus, .page-admin .stack-form select:focus, .setup-panel input:focus, .setup-panel select:focus { outline: 3px solid rgb(160 0 237 / 13%); border-color: var(--purple); }
.page-admin .admin-notice { border: 0; border-left: 6px solid #ff7e00; border-radius: 0; color: #68430b; background: #fff2d8; }
.page-admin .admin-secondary-grid { max-width: none; gap: 16px; margin-top: 16px; }
.page-admin .admin-record-section, .page-admin .settings-title { border-color: #c9dce1; }
.page-admin .admin-record { border: 1px solid #c7d9df; border-radius: 0; background: #f8ffff; }
.page-admin .admin-record span { color: #58707b; }
.page-admin .admin-count { color: #277079; }
.page-admin .catalog-copy { color: #536c76; font-family: system-ui, sans-serif; }
.page-admin .catalog-stats div { border-color: #c8dce1; color: var(--ink); background: #f7ffff; }
.page-admin .delete-record { border: 0; border-radius: 0; background: #db3042; }
.setup-screen { width: min(1180px, calc(100% - 40px)); max-width: none; min-height: calc(100vh - 210px); margin: 0 auto; padding: 55px 0 80px; }
.setup-panel { max-width: 980px; }
.setup-panel > p { color: #536c76; font-family: system-ui, sans-serif; font-weight: 650; }
.setup-panel code { border-radius: 0; color: var(--cyan); background: var(--ink); }
@media (max-width: 720px) {
  .community-join { display: grid; }
  .community-join .action { width: 100%; }
  .page-admin .admin-secondary-grid { grid-template-columns: 1fr; }
  .page-admin .admin-form, .page-admin .song-select-grid { grid-template-columns: 1fr; }
  .site-footer nav { flex-wrap: wrap; }
  .flash { top: 112px; }
}

/* Light, dark, and system color modes */
.surface,
.table-shell,
.tab-bar,
.song-card,
.score-key span,
.country-ranking-tabs a,
.country-participation-stats article,
.metric-grid article,
.achievement-card,
.rival-card,
.rules-example-grid article { border-color: var(--line); color: var(--theme-text); background: var(--theme-surface); }
.surface-heading { background: var(--theme-heading); }
.surface-heading > span,
.empty-state p,
.song-copy p,
.song-detail-copy > p,
.rules-card p,
.rules-example > p,
.leaderboard-filter > span,
.country-participation-stats span,
.rank-number,
.profile-country-settings p,
.profile-country-settings .country-visibility-check,
.profile-privacy-settings article p,
.metric-grid article > span,
.achievement-card p,
.admin-achievement-list p,
.rival-limit-note,
.panel-copy,
.page-admin .catalog-copy,
.page-admin .admin-record span,
.setup-panel > p { color: var(--theme-muted); }
.chart-meta,
.song-detail-meta > div { background: var(--theme-subtle); }
.tab-bar a { color: var(--theme-muted); }
.tab-bar a:first-child.active,
.tab-bar a:last-child.active { color: var(--theme-text); }
.leaderboard-filter select,
.profile-country-settings select,
.profile-privacy-settings article form input,
.rival-add-form select,
.admin-form input,
.admin-form select,
.admin-panel input,
.admin-achievement-create input,
.admin-achievement-create select,
.admin-achievement-create textarea,
.admin-achievement-award select,
body .page-admin .admin-form input,
body .page-admin .admin-form select,
body .page-admin .stack-form input,
body .page-admin .stack-form select,
.setup-panel input,
.setup-panel select { border-color: var(--theme-border); color: var(--theme-text); background: var(--theme-field); }
.profile-privacy-settings .privacy-danger { background: var(--theme-danger); }
.rival-bracket-meta { color: var(--theme-muted); background: rgb(0 216 206 / 9%); }
.admin-achievement-create,
.admin-achievement-award,
.admin-achievement-list,
body .page-admin .admin-record { border-color: var(--theme-border); color: var(--theme-text); background: var(--theme-surface-soft); }
body .page-admin .gradient-panel,
.setup-panel,
.access-denied { border-color: var(--line); color: var(--theme-text); background: var(--theme-surface); }
body .page-admin .admin-notice { color: var(--theme-text); background: var(--theme-surface-soft); }
.possession-none { color: var(--theme-muted); }
.player-link,
.course-level-fallback,
.page-admin .admin-topline h1,
.page-admin .compact-admin h2,
.setup-panel h1 { color: var(--theme-text); }
.admin-form label,
.admin-panel label { color: var(--theme-muted); }
.bracket-score strong { color: var(--theme-text); }
.data-table .empty-row td { color: var(--theme-muted); }
.points-needed { color: var(--cyan-dark); }
body .page-admin .catalog-stats div { border-color: var(--theme-border); color: var(--theme-text); background: var(--theme-surface-soft); }
body .page-admin .admin-count { color: var(--cyan-dark); }

@media (max-width: 480px) {
  .wordmark > span { display: none; }
  .theme-control { padding-inline: 6px; }
  .theme-control > span { display: none; }
  .theme-selector { width: 66px; font-size: .58rem; }
}

/* Expandable administration workspace */
.admin-workspace { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; }
.admin-sidebar { position: sticky; top: 145px; display: grid; gap: 22px; padding: 20px; color: #fff; background: var(--ink); box-shadow: var(--shadow); }
.admin-sidebar > div { display: grid; gap: 3px; }
.admin-sidebar > div small { color: var(--cyan); font-size: .56rem; font-weight: 900; letter-spacing: .12em; }
.admin-sidebar > div strong { font-size: .9rem; text-transform: uppercase; }
.admin-sidebar nav { display: grid; }
.admin-sidebar nav a { display: flex; min-height: 43px; align-items: center; justify-content: space-between; border-bottom: 1px solid rgb(255 255 255 / 12%); color: #b8d0d7; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.admin-sidebar nav a:hover, .admin-sidebar nav a:focus-visible, .admin-sidebar nav a.is-active { color: #fff; }
.admin-sidebar nav a.is-active { padding-left: 10px; border-left: 4px solid var(--cyan); background: rgb(0 216 206 / 10%); }
.admin-sidebar nav a span { color: var(--yellow); }
.admin-sidebar form .mini-action { width: 100%; }
.admin-main { min-width: 0; }
.admin-page-heading { display: flex; min-height: 94px; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; padding: 20px 24px; color: #fff; background: linear-gradient(110deg, var(--ink), #0c4655); }
.admin-page-heading > div { display: grid; }
.admin-page-heading small { color: var(--cyan); font-size: .56rem; font-weight: 900; letter-spacing: .12em; }
.admin-page-heading h1 { margin: 2px 0 0; font-size: 1.55rem; text-transform: uppercase; }
.admin-dashboard-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.admin-dashboard-metrics article { display: grid; min-height: 120px; align-content: center; border-bottom: 4px solid var(--cyan); padding: 18px; color: var(--theme-text); background: var(--theme-surface); box-shadow: var(--shadow); }
.admin-dashboard-metrics article:nth-child(2) { border-color: var(--purple); }
.admin-dashboard-metrics article:nth-child(3) { border-color: var(--yellow); }
.admin-dashboard-metrics article:nth-child(4) { border-color: #ff3150; }
.admin-dashboard-metrics small, .admin-dashboard-links small { color: var(--purple); font-size: .54rem; font-weight: 900; letter-spacing: .1em; }
.admin-dashboard-metrics strong { font-size: 2rem; }
.admin-dashboard-metrics span { color: var(--theme-muted); font: 650 .68rem system-ui, sans-serif; }
.admin-dashboard-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.admin-dashboard-links a { display: grid; min-height: 110px; align-content: center; padding: 18px; color: var(--theme-text); background: var(--theme-surface); box-shadow: inset 0 0 0 1px var(--theme-border); }
.admin-dashboard-links a strong { font-size: 1rem; text-transform: uppercase; }
.admin-dashboard-links a > span { margin-top: 10px; color: var(--cyan-dark); font-size: .62rem; font-weight: 900; }
.admin-recent-activity, .admin-record-panel, .admin-player-directory, .admin-sync-health, .admin-error-log, .admin-moderation-section, .admin-backup-summary, .admin-private-backups { margin-top: 16px; }
.admin-activity-list, .admin-error-list { display: grid; }
.admin-activity-list article, .admin-error-list article { display: flex; align-items: start; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--theme-border); padding: 14px 18px; }
.admin-activity-list article > div, .admin-error-list article > div { display: grid; gap: 3px; }
.admin-activity-list article strong, .admin-error-list article strong { font-size: .75rem; text-transform: uppercase; }
.admin-activity-list article span, .admin-activity-list article p, .admin-error-list article span, .admin-error-list article p { margin: 0; color: var(--theme-muted); font: 650 .68rem system-ui, sans-serif; }
.admin-activity-list article > small, .admin-error-list article > small { color: var(--cyan-dark); font-size: .57rem; font-weight: 900; text-align: right; }
.admin-section-panel { margin: 0; }
.admin-section-panel > h2 { margin: 5px 0 8px; font-size: 1.35rem; text-transform: uppercase; }
.admin-record-actions { display: flex; align-items: center; gap: 8px; }
.upcoming-record, .active-record { display: inline-flex; min-height: 28px; align-items: center; padding: 0 9px; color: var(--ink); background: var(--yellow); font-size: .58rem; font-weight: 900; }
.active-record { color: #fff; background: #00a57f; }
.admin-player-country-form { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 10px; }
.admin-achievement-page { margin-top: 16px; }
.admin-system-grid, .admin-backup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.admin-sync-health .data-table { min-width: 980px; }
.admin-sync-error { display: block; max-width: 300px; overflow: hidden; color: var(--theme-muted); font: 600 .64rem system-ui, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.admin-ban-list, .admin-block-list { display: grid; max-height: 620px; overflow: auto; }
.admin-ban-list article, .admin-block-list article { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--theme-border); padding: 13px 18px; }
.admin-ban-list article.is-banned { border-left: 5px solid #e22e42; background: var(--theme-danger); }
.admin-ban-list article > div, .admin-block-list article > div { display: grid; gap: 2px; }
.admin-ban-list article strong, .admin-block-list article strong { color: var(--theme-text); font-size: .78rem; }
.admin-ban-list article span, .admin-ban-list article p, .admin-block-list article span, .admin-block-list article p, .admin-block-list article small { margin: 0; color: var(--theme-muted); font: 650 .65rem system-ui, sans-serif; }
.admin-inline-reason-form, .admin-score-exclude-form { display: flex; min-width: 360px; gap: 6px; }
.admin-inline-reason-form input, .admin-score-exclude-form input { min-width: 0; flex: 1; border: 1px solid var(--theme-border); padding: 8px 10px; color: var(--theme-text); background: var(--theme-field); font: 650 .68rem system-ui, sans-serif; }
.admin-score-exclude-form { min-width: 300px; }
.admin-section-copy { margin: 0; padding: 16px 18px; color: var(--theme-muted); font: 650 .72rem/1.5 system-ui, sans-serif; }
.backup-danger-panel { border-left: 5px solid #e22e42 !important; }
.backup-count-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.backup-count-grid article { display: grid; min-height: 90px; align-content: center; border: 1px solid var(--theme-border); padding: 14px; }
.backup-count-grid small { color: var(--purple); font-size: .5rem; font-weight: 900; letter-spacing: .08em; }
.backup-count-grid strong { font-size: 1.3rem; }

/* Upcoming bracket preview */
.home-upcoming-brackets { margin-bottom: 22px; }
.home-upcoming-brackets > div:last-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.home-upcoming-brackets > div:last-child a { display: grid; min-height: 135px; align-content: center; border-left: 5px solid var(--yellow); padding: 20px 24px; color: #fff; background: linear-gradient(110deg, #071f30, #0b4653); box-shadow: var(--shadow); }
.home-upcoming-brackets a small { color: var(--cyan); font-size: .54rem; font-weight: 900; letter-spacing: .1em; }
.home-upcoming-brackets a strong { margin: 3px 0; font-size: 1rem; text-transform: uppercase; }
.home-upcoming-brackets a span { color: #bcd1d8; font: 650 .66rem system-ui, sans-serif; }
.home-upcoming-brackets a b { margin-top: 12px; color: var(--yellow); font-size: .58rem; }
.upcoming-bracket-preview { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; margin-bottom: 10px; padding: 24px 28px; color: #fff; background: linear-gradient(110deg, #071f30, #0b4653); box-shadow: var(--shadow); }
.upcoming-bracket-preview > div:first-child { display: grid; }
.upcoming-bracket-preview small { color: var(--cyan); font-size: .58rem; font-weight: 900; letter-spacing: .11em; }
.upcoming-bracket-preview h2 { margin: 4px 0 2px; font-size: 1.25rem; text-transform: uppercase; }
.upcoming-bracket-preview p { margin: 0; color: #bcd1d8; font: 650 .72rem system-ui, sans-serif; }
.upcoming-bracket-lock { display: grid; min-width: 160px; justify-items: end; border-left: 4px solid var(--yellow); padding-left: 20px; }
.upcoming-bracket-lock strong { color: var(--yellow); font-size: 2rem; line-height: 1; }
.upcoming-bracket-lock span { font-size: .58rem; font-weight: 900; }
.live-countdown, [data-countdown-value] { font-variant-numeric: tabular-nums; }
.upcoming-bracket-lock strong { white-space: nowrap; font-size: clamp(1.15rem, 2vw, 2rem); }

.profile-score-history { margin-top: 18px; }
.score-history-list { display: grid; gap: 12px; padding: 0 24px 24px; }
.score-history-list > article { overflow: hidden; border: 1px solid var(--theme-border); background: var(--theme-field); }
.score-history-list article > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-left: 5px solid var(--cyan); padding: 16px 18px; }
.score-history-list header > div:first-child { display: grid; }
.score-history-list header small { color: var(--purple); font-size: .58rem; font-weight: 900; letter-spacing: .08em; }
.score-history-list header a strong { font-size: .95rem; text-transform: uppercase; }
.score-history-list header span { color: var(--theme-muted); font: 650 .68rem system-ui, sans-serif; }
.score-history-gain { display: grid; flex: 0 0 auto; justify-items: end; }
.score-history-gain strong { color: var(--cyan); font-size: 1rem; }
.score-history-list ol { display: flex; overflow-x: auto; gap: 0; margin: 0; padding: 0 18px 17px; list-style: none; }
.score-history-list li { position: relative; display: grid; min-width: 145px; gap: 2px; border-top: 3px solid var(--theme-border); padding: 13px 18px 0 0; }
.score-history-list li::before { position: absolute; width: 9px; height: 9px; top: -6px; left: 0; border-radius: 50%; content: ''; background: var(--cyan); }
.score-history-list li > span { color: var(--theme-muted); font-size: .52rem; font-weight: 900; }
.score-history-list li > strong { font-size: .86rem; font-variant-numeric: tabular-nums; }
.score-history-list li > b { width: fit-content; }
.score-history-list li time { color: var(--theme-muted); font: 650 .6rem system-ui, sans-serif; }

.profile-achievement-showcase .achievement-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.profile-achievement-showcase .achievement-card { min-height: 150px; align-content: center; }
.achievement-catalog-card.is-showcased { box-shadow: inset 0 0 0 3px var(--cyan); }
.achievement-showcase-control { grid-column: 1 / -1; }
.achievement-showcase-control .mini-action { width: 100%; }

.search-hero { display: grid; grid-template-columns: .8fr 1.2fr; align-items: end; gap: 36px; margin-bottom: 20px; padding: 28px; color: #fff; background: linear-gradient(110deg, #071f30, #0b4653); box-shadow: var(--shadow); }
.search-hero > div small, .search-hero form > label { color: var(--cyan); font-size: .58rem; font-weight: 900; letter-spacing: .11em; }
.search-hero h2 { margin: 5px 0 0; font-size: 1.5rem; text-transform: uppercase; }
.search-hero form { display: grid; gap: 7px; }
.search-hero form > div { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.search-hero input { min-width: 0; border: 1px solid rgb(255 255 255 / 20%); padding: 0 15px; color: #fff; background: rgb(0 0 0 / 22%); outline: none; }
.search-hero input:focus { border-color: var(--cyan); }
.search-result-summary { display: flex; align-items: baseline; gap: 9px; margin: 22px 0 10px; color: var(--theme-muted); }
.search-result-summary strong { color: var(--purple); font-size: 1.5rem; }
.search-result-section { margin-top: 14px; }
.search-player-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; padding: 0 24px 24px; }
.search-player-grid > a { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; min-width: 0; border: 1px solid var(--theme-border); padding: 12px; background: var(--theme-field); }
.search-player-grid img { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; }
.search-player-grid a > div { display: grid; min-width: 0; }
.search-player-grid strong, .search-song-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-player-grid span, .search-song-list span, .search-bracket-grid span { color: var(--theme-muted); font: 650 .63rem system-ui, sans-serif; }
.search-player-grid b { color: var(--pink); }
.search-song-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 0 24px 24px; }
.search-song-list > a { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--theme-border); padding: 14px 16px; background: var(--theme-field); }
.search-song-list a > div { display: grid; min-width: 0; }
.search-song-list small, .search-bracket-grid small { color: var(--purple); font-size: .54rem; font-weight: 900; }
.search-song-list b { flex: 0 0 auto; color: var(--cyan); font-size: .58rem; }
.search-bracket-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 24px 24px; }
.search-bracket-grid a { display: grid; border-left: 4px solid var(--yellow); padding: 15px; background: var(--theme-field); }
.search-bracket-grid strong { margin: 3px 0; text-transform: uppercase; }

.admin-catalog-versions { margin-top: 18px; }
.admin-catalog-version-list { display: grid; gap: 10px; padding: 0 24px 24px; }
.admin-catalog-version-list > article { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(180px, .7fr) auto; align-items: end; gap: 16px; border-left: 5px solid var(--cyan); padding: 16px; background: var(--theme-field); }
.admin-catalog-version-settings { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; align-items: end; gap: 10px; }
.admin-catalog-version-settings > div { display: grid; gap: 4px; }
.admin-catalog-version-status { display: grid; }
.admin-catalog-version-status strong { color: var(--purple); }
.admin-catalog-version-status span, .admin-catalog-version-status small { color: var(--theme-muted); font: 650 .63rem system-ui, sans-serif; }

@media (max-width: 900px) {
  .profile-achievement-showcase .achievement-grid, .search-player-grid, .search-bracket-grid { grid-template-columns: 1fr 1fr; }
  .admin-catalog-version-list > article { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .search-hero { grid-template-columns: 1fr; }
  .score-history-list article > header { align-items: start; flex-direction: column; }
  .score-history-gain { justify-items: start; }
  .profile-achievement-showcase .achievement-grid, .search-player-grid, .search-song-list, .search-bracket-grid { grid-template-columns: 1fr; }
  .search-hero { gap: 18px; padding: 20px; }
  .search-hero form > div { grid-template-columns: 1fr; }
  .search-hero input { min-height: 48px; }
  .admin-catalog-version-settings { grid-template-columns: 1fr; }
}

/* Privacy policy */
.privacy-policy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.privacy-policy-card { display: grid; align-content: start; min-height: 230px; padding: 24px; }
.privacy-policy-card > small { color: var(--purple); font-size: .65rem; font-weight: 900; }
.privacy-policy-card h2 { margin: 12px 0 8px; font-size: 1.05rem; text-transform: uppercase; }
.privacy-policy-card p { margin: 0; color: var(--theme-muted); font: 650 .76rem/1.65 system-ui, sans-serif; }
.privacy-policy-card .mini-action { width: fit-content; margin-top: 18px; }
.error-reference { display: block; color: #d5edf1; font-size: .67rem; font-weight: 900; letter-spacing: .08em; }
.banned-account-screen .gradient-panel { border-left: 7px solid #e22e42; }
.banned-account-actions { display: flex; align-items: center; gap: 10px; }
.banned-account-privacy { margin-top: 14px; }
.banned-account-privacy > div:last-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.banned-account-privacy article { display: grid; align-content: start; gap: 10px; border: 1px solid var(--theme-border); padding: 20px; }
.banned-account-privacy h3, .banned-account-privacy p { margin: 0; }
.banned-account-privacy h3 { font-size: .9rem; text-transform: uppercase; }
.banned-account-privacy p { color: var(--theme-muted); font: 650 .7rem/1.5 system-ui, sans-serif; }
.banned-account-privacy form { display: flex; gap: 8px; }
.banned-account-privacy input { min-width: 0; flex: 1; border: 1px solid var(--theme-border); padding: 9px 10px; color: var(--theme-text); background: var(--theme-field); }

/* Personal statistics */
.profile-statistics { margin-top: 16px; }
.profile-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.profile-stat-grid article { display: grid; min-height: 105px; align-content: center; border: 1px solid var(--theme-border); padding: 16px 18px; }
.profile-stat-grid small, .profile-stat-details > article > small, .profile-placement-chart > small { color: var(--purple); font-size: .54rem; font-weight: 900; letter-spacing: .1em; }
.profile-stat-grid strong { font-size: 1.45rem; }
.profile-stat-grid span { color: var(--theme-muted); font: 650 .64rem system-ui, sans-serif; }
.profile-stat-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.profile-stat-details > article { min-height: 150px; border: 1px solid var(--theme-border); padding: 18px; }
.profile-lamp-statistics > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.profile-lamp-statistics .score-note-lamp { min-width: 62px; height: 30px; font-size: .62rem; }
.profile-lamp-statistics .score-note-lamp b { margin-left: 5px; font-size: .8rem; }
.profile-lamp-statistics p, .profile-rival-record p { color: var(--theme-muted); font: 650 .66rem system-ui, sans-serif; }
.profile-chart-extremes > div { display: grid; grid-template-columns: 58px 1fr; gap: 8px; align-items: start; margin-top: 13px; }
.profile-chart-extremes > div > span { color: var(--cyan-dark); font-size: .55rem; font-weight: 900; }
.profile-chart-extremes a { display: grid; color: var(--theme-text); }
.profile-chart-extremes a strong { overflow: hidden; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.profile-chart-extremes a small { color: var(--theme-muted); font: 650 .58rem system-ui, sans-serif; }
.profile-rival-record > div { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; }
.profile-rival-record > div span { display: grid; color: var(--theme-muted); font-size: .52rem; font-weight: 900; }
.profile-rival-record > div b { color: var(--theme-text); font-size: 1.35rem; }
.profile-placement-chart { border-top: 1px solid var(--theme-border); padding: 18px; }
.profile-placement-chart > div { display: grid; grid-template-columns: repeat(12, minmax(54px, 1fr)); gap: 7px; margin-top: 12px; overflow-x: auto; }
.profile-placement-chart a, .profile-placement-chart > div > span { display: grid; min-width: 54px; gap: 5px; color: var(--theme-text); }
.profile-placement-chart progress { width: 100%; height: 8px; accent-color: var(--cyan); }
.profile-placement-chart strong { font-size: .7rem; }
.profile-placement-chart a span, .profile-placement-chart > div > span span { color: var(--theme-muted); font-size: .53rem; font-weight: 800; text-transform: uppercase; }
.profile-last-sync { position: relative; z-index: 2; display: block; margin-top: 6px; color: #b8d1d8; font: 650 .6rem system-ui, sans-serif; }

/* Bracket recap */
.recap-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 30px; color: #fff; background: linear-gradient(110deg, var(--ink), #0d5160); box-shadow: var(--shadow); }
.recap-hero > div { display: grid; }
.recap-hero small { color: var(--cyan); font-size: .58rem; font-weight: 900; letter-spacing: .11em; }
.recap-hero h2 { margin: 5px 0; font-size: clamp(1.55rem, 4vw, 2.6rem); text-transform: uppercase; }
.recap-hero p { margin: 0; color: #b9d1d8; font: 650 .72rem system-ui, sans-serif; }
.recap-winner { min-width: 220px; border-left: 5px solid var(--yellow); padding-left: 20px; }
.recap-winner strong { color: var(--yellow); font-size: 1.3rem; }
.recap-winner span { color: #fff; font-size: .65rem; font-weight: 900; }
.recap-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 10px 0; }
.recap-metrics article { display: grid; min-height: 100px; align-content: center; border: 1px solid var(--theme-border); padding: 14px; color: var(--theme-text); background: var(--theme-surface); }
.recap-metrics small { color: var(--purple); font-size: .5rem; font-weight: 900; letter-spacing: .08em; }
.recap-metrics strong { font-size: 1.35rem; }
.recap-metrics span { color: var(--theme-muted); font-size: .58rem; font-weight: 800; }
.recap-podium { margin-bottom: 10px; }
.recap-podium-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.recap-podium-grid article { display: grid; min-height: 135px; align-content: center; border: 1px solid var(--theme-border); padding: 20px; }
.recap-podium-grid article > span { color: var(--purple); font-size: 1.5rem; font-weight: 900; }
.recap-podium-grid a { color: var(--theme-text); }
.recap-podium-grid small { color: var(--theme-muted); font-size: .62rem; font-weight: 800; }
.recap-place-1 { border-top: 5px solid var(--yellow) !important; }
.recap-place-2 { border-top: 5px solid #bcd2d8 !important; }
.recap-place-3 { border-top: 5px solid #dd813d !important; }
.recap-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.recap-chart-card { display: grid; grid-template-columns: 46px 120px minmax(0, 1fr); min-height: 120px; overflow: hidden; }
.recap-chart-position { display: grid; place-items: center; color: #fff; background: var(--ink); font-size: .58rem; font-weight: 900; writing-mode: vertical-rl; }
.recap-chart-art { width: 120px; height: 120px; }
.recap-chart-copy { display: grid; align-content: center; min-width: 0; padding: 14px; }
.recap-chart-copy > small { color: var(--purple); font-size: .52rem; font-weight: 900; }
.recap-chart-copy h2 { margin: 4px 0 8px; overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.recap-chart-copy a { display: flex; justify-content: space-between; gap: 8px; color: var(--theme-text); font-size: .68rem; }
.recap-chart-copy a span { color: var(--cyan-dark); }
.recap-chart-copy p { margin: 7px 0 0; color: var(--theme-muted); font: 650 .58rem system-ui, sans-serif; }
.recap-full-standings { margin-top: 10px; }

@media (max-width: 980px) {
  .admin-workspace { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; }
  .admin-sidebar nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .admin-sidebar nav a { padding: 0 8px; }
  .admin-dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-stat-details { grid-template-columns: 1fr 1fr; }
  .profile-rival-record { grid-column: 1 / -1; }
  .recap-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .recap-chart-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .admin-sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-dashboard-links, .admin-system-grid, .admin-backup-grid { grid-template-columns: 1fr; }
  .home-upcoming-brackets > div:last-child { grid-template-columns: 1fr; }
  .admin-player-country-form { grid-template-columns: 1fr; }
  .admin-ban-list article, .admin-block-list article { display: grid; }
  .admin-inline-reason-form, .admin-score-exclude-form { min-width: 0; width: 100%; }
  .backup-count-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .upcoming-bracket-preview, .recap-hero { grid-template-columns: 1fr; }
  .upcoming-bracket-lock, .recap-winner { justify-items: start; border-top: 4px solid var(--yellow); border-left: 0; padding-top: 14px; padding-left: 0; }
  .privacy-policy-grid { grid-template-columns: 1fr; }
  .banned-account-privacy > div:last-child { grid-template-columns: 1fr; }
  .profile-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-stat-details { grid-template-columns: 1fr; }
  .profile-rival-record { grid-column: auto; }
  .recap-podium-grid { grid-template-columns: 1fr; }
  .recap-chart-card { grid-template-columns: 36px 96px minmax(0, 1fr); }
  .recap-chart-art { width: 96px; height: 96px; }
}

@media (max-width: 480px) {
  .admin-dashboard-metrics, .profile-stat-grid, .recap-metrics { grid-template-columns: 1fr 1fr; }
  .admin-page-heading { display: grid; }
  .admin-page-heading .mini-action { width: 100%; }
  .admin-activity-list article, .admin-error-list article { display: grid; }
  .admin-activity-list article > small, .admin-error-list article > small { text-align: left; }
}

/* Search-triggered impact effect. The server decides whether this marker is rendered. */
.search-impact-effect {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #fff;
  background: rgb(0 0 0 / .38);
  opacity: 1;
  transition: opacity 820ms ease-out;
  pointer-events: none;
}

.search-impact-effect strong {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 4.5rem;
  line-height: 1.05;
  text-align: center;
  color: transparent;
  background: linear-gradient(90deg, #ff3150, #ffca28, #38e77b, #00d8ce, #3f7cff, #c65cff, #ff3150);
  background-size: 240% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 0 #000) drop-shadow(0 0 18px rgb(0 0 0 / .9));
  animation: search-impact-rainbow 900ms linear infinite;
}

.search-impact-effect.is-fading { opacity: 0; }

@keyframes search-impact-rainbow {
  to { background-position: 240% 0; }
}

@media (max-width: 620px) {
  .search-impact-effect strong { font-size: 2.4rem; }
}

/* Secret achievement unlock toast. Presentation only; awards are decided server-side. */
.secret-achievement-toast {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 2147483001;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  width: min(420px, calc(100vw - 36px));
  padding: 14px 16px;
  color: #f4f7fb;
  background: linear-gradient(135deg, rgb(22 28 36 / .98), rgb(10 14 19 / .98));
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: 8px;
  box-shadow: 0 14px 36px rgb(0 0 0 / .38);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 260ms ease, transform 360ms cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}

.secret-achievement-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.secret-achievement-toast-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 6px;
  font-size: 34px;
  line-height: 1;
  background: rgb(255 255 255 / .08);
  border: 1px solid rgb(255 255 255 / .12);
}

.secret-achievement-toast-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.secret-achievement-toast-eyebrow {
  color: #9ed4ff;
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.secret-achievement-toast-name {
  overflow-wrap: anywhere;
  font-size: 1.08rem;
  line-height: 1.22;
}

.secret-achievement-toast-description {
  overflow-wrap: anywhere;
  color: rgb(244 247 251 / .72);
  font-size: .84rem;
  line-height: 1.35;
}

@media (max-width: 520px) {
  .secret-achievement-toast {
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: calc(100vw - 24px);
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 11px;
    padding: 12px;
  }

  .secret-achievement-toast-icon {
    width: 52px;
    height: 52px;
    font-size: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .search-impact-effect strong { animation: none; }
  .search-impact-effect { transition-duration: 120ms; }
  .secret-achievement-toast {
    transition-duration: 1ms;
    transform: none;
  }
}

/* Admin-only preview control for the secret achievement toast. */
.admin-achievement-popup-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  grid-column: 1 / -1;
  padding: 16px 18px;
  border: 1px solid var(--theme-border, #c9dce1);
  background: var(--theme-field, #f8ffff);
}
.admin-achievement-popup-preview > div { min-width: 0; }
.admin-achievement-popup-preview strong { font-size: .75rem; text-transform: uppercase; }
.admin-achievement-popup-preview p { margin: 4px 0 0; color: var(--theme-muted, #58707b); font: 650 .68rem/1.4 system-ui, sans-serif; }
.admin-achievement-popup-preview .pill { flex: 0 0 auto; }
@media (max-width: 620px) {
  .admin-achievement-popup-preview { align-items: stretch; flex-direction: column; }
  .admin-achievement-popup-preview .pill { width: 100%; }
}