@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%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: #e8fbff;
  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:
    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%);
  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) { width: 280px; height: 250px; right: 22%; bottom: 8%; border: 18px solid rgb(255 224 27 / 20%); transform: rotate(18deg); }
.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: rgb(255 255 255 / 94%); 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: #52646e; 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(18px, 2.3vw, 38px); }
.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); }
.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; }
.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 / 80%); padding: clamp(36px, 6vw, 74px); background: linear-gradient(120deg, rgb(255 255 255 / 94%) 0 54%, rgb(6 31 44 / 91%) 54% 100%); 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: #37515f; 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 rgb(255 255 255 / 90%); padding: 25px; background: rgb(255 255 255 / 82%); 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: #526874; 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 > div { display: flex; align-items: center; gap: 13px; font-size: .8rem; font-weight: 900; }
.site-footer img { width: 36px; image-rendering: pixelated; }
.site-footer nav { display: flex; gap: 24px; color: #b9d4db; font-size: .72rem; font-weight: 900; }
.toast { position: fixed; z-index: 50; right: 24px; bottom: 24px; max-width: 360px; transform: translateY(130%); padding: 14px 18px; color: #fff; background: var(--ink); box-shadow: var(--shadow); transition: transform .25s ease; }
.toast.show { transform: translateY(0); }

@media (max-width: 980px) {
  .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: #fff; 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(--ink); padding: 8px 12px; color: var(--ink); background: #fff; font-size: .72rem; font-weight: 900; }
  .hero { background: linear-gradient(145deg, rgb(255 255 255 / 96%) 0 68%, rgb(6 31 44 / 92%) 68% 100%); }
  .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; }
  .utility-bar { justify-content: center; }
  .nav-shell { grid-template-columns: 1fr auto; 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: rgb(255 255 255 / 92%); }
  .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 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: #00bd75; color: var(--ink); background: rgb(0 189 117 / 8%); }
.tab-bar a:last-child.active { border-color: #ff3150; color: var(--ink); background: rgb(255 49 80 / 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-world-s-end { color: var(--ink); background: #ffcc00; 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; }

/* 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: var(--purple); }
.score-key .boss-chart-key { box-shadow: inset 0 -4px 0 var(--yellow); }
.score-key .boss-chart-key b { color: var(--ink); background: 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); }
.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); }
.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: linear-gradient(90deg, #ff3c9d, #8e45ef, #317ff4, #00bfae, #d5a600, #ff5948); background-clip: text; -webkit-background-clip: text; filter: drop-shadow(0 1px 0 rgb(8 29 44 / 55%)); }
.rating-rainbow-kiwami { background-image: linear-gradient(90deg, #ff176f, #8b23f5, #1587ff, #00c8a5, #f3bb00, #ff2f35); }
.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; }
.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; }

/* 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; }
.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; }
.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; }
.placement-history .empty-state { min-height: 250px; }
.action-kamaitachi { background: #ff3150; }

/* Community and archive */
.community-stats, .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; }
.community-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.location-list > * { display: grid; grid-template-columns: 45px 1fr auto 25px; align-items: center; gap: 14px; min-height: 86px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.location-list > *:last-child { border-bottom: 0; }
.location-list > * > b { color: var(--purple); font-size: .68rem; }
.location-list > * > div { display: grid; }
.location-list strong { font-size: .9rem; }
.location-list span { color: #5c727d; font-family: system-ui, sans-serif; font-size: .72rem; font-weight: 700; }
.location-list em { min-width: 70px; padding: 5px 8px; color: #167070; background: rgb(0 216 206 / 13%); font-size: .62rem; font-style: normal; font-weight: 900; text-align: center; text-transform: uppercase; }
.location-list i { color: var(--pink); font-style: normal; }
.events-panel .empty-state { min-height: 260px; }
.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; }

@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; }
  .community-grid, .admin-grid { grid-template-columns: 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; }
  .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; }
  .profile-layout { grid-template-columns: 1fr; }
  .profile-identity { min-height: 420px; }
  .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); }
}

@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; }
  .location-list > * { grid-template-columns: 34px 1fr auto; padding-inline: 12px; }
  .location-list i { display: none; }
  .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: 1320px; }
.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; }
.event-score { display: grid; gap: 3px; line-height: 1.1; }
.event-score strong { color: var(--ink); white-space: nowrap; }
.event-score small { color: #39747a; font-family: Tektur, sans-serif; font-size: .62rem; font-weight: 900; }

.profile-external { margin-top: 24px; 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; }
.event-list { display: grid; }
.production-event { display: grid; gap: 3px; min-height: 84px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.production-event:last-child { border-bottom: 0; }
.production-event time { color: var(--purple); font-size: .62rem; font-weight: 900; }
.production-event strong { font-size: .9rem; }
.production-event span { color: #5d727d; font-family: system-ui, sans-serif; font-size: .72rem; font-weight: 700; }

.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; }
}