/* Rimu community layout, inspired by osu!web's navigation and content rhythm.
   Kept separate from the legacy stylesheet so the update is easy to merge. */
:root {
  --bg: #1c191f;
  --bg-deep: #17141a;
  --panel: #302b34;
  --panel-2: #39333e;
  --panel-3: #45404b;
  --border: #48414f;
  --border-soft: #3b3542;
  --text: #f1edf5;
  --text-soft: #d8d1df;
  --muted: #b4aabd;
  --faint: #a093aa;
  --radius-sm: 5px;
  --radius: 7px;
  --radius-lg: 9px;
  --max-width: 1000px;
}

body { background: var(--bg); }
.section-home, .section-account, .section-friends { --section-accent: #ff9bca; }
.section-leaderboards { --section-accent: #a8e889; }
.section-beatmaps { --section-accent: #f3c17b; }
.section-store { --section-accent: #eec47f; }
.section-help { --section-accent: #91c9ef; }
.container { width: min(var(--max-width), calc(100% - 32px)); }
.topbar {
  position: relative;
  background: #26212b;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.topbar-inner { min-height: 90px; gap: 22px; }
.brand { gap: 10px; }
.brand-mark {
  width: 50px;
  height: 50px;
  background: transparent;
  border: 2px solid #f5edf8;
  color: #fff;
  font-size: 16px;
  box-shadow: none;
}
.brand:hover .brand-mark { box-shadow: none; }
.brand-word { font-size: 19px; letter-spacing: -.5px; }
.site-nav { gap: 1px; }
.nav-link, .nav-trigger { position: relative; padding: 14px 10px; font-size: 14px; }
.nav-link .nav-icon { display: none; }
.nav-link:hover, .nav-trigger:hover { background: transparent; color: #fff; }
.nav-link.is-active, .nav-trigger.is-active {
  color: #fff;
  background: transparent;
  box-shadow: none;
}
.nav-link.is-active::after, .nav-trigger.is-active::after {
  content: "";
  position: absolute;
  height: 3px;
  border-radius: 3px;
  bottom: 6px;
  left: 10px;
  right: 10px;
  background: var(--section-accent, var(--accent));
}
.nav-caret { width: 10px; opacity: .55; }
.topbar-tools { gap: 8px; }
.topbar-online { border: 0; background: transparent; padding: 0; font-size: 11px; }
.topbar-search { padding: 7px; border: 0; }
.topbar-search > span { display: none; }
.account-user { background: transparent; border-color: transparent; }
.account-name { max-width: 90px; }
.section-masthead { background: #26212b; }
.section-masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 16px 28px;
  background: #302a36;
  border-bottom: 3px solid var(--section-accent, var(--accent));
}
.section-masthead-title { display: flex; align-items: center; gap: 13px; font-size: 22px; font-weight: 500; }
.section-marker { width: 17px; height: 17px; border: 2px solid var(--section-accent, var(--accent)); border-radius: 50%; }
.section-masthead-brand { font-size: 14px; color: var(--section-accent, var(--accent)); white-space: nowrap; }
.section-masthead-brand span { color: var(--muted); margin-left: 6px; font-size: 11px; }
.page { padding: 24px 0 54px; }
.card, .osu-hero, .ranking-header, .ranking-filter-bar, .auth-card {
  border: 0;
  box-shadow: none;
  background: var(--panel);
}
.card-header { border-bottom-color: var(--border-soft); padding: 17px 22px; }
.card-title { font-size: 16px; font-weight: 600; }
.card-title::before { display: none; }
.card-body { padding: 22px; }
.card-footer { padding: 14px 22px; }
.card-header, .card-actions, .hero-actions, .page-hero-actions { min-width: 0; }
.btn { border-radius: 5px; box-shadow: none; font-weight: 600; }
.btn-primary { color: #271a24; background: var(--section-accent, var(--accent)); border-color: transparent; box-shadow: 0 3px 0 #0003; }
.btn-primary:hover { background: #f6dfed; color: #271a24; box-shadow: 0 3px 0 #0003; }
.btn-ghost { border-color: transparent; background: #ffffff0b; }
.btn-ghost:hover { background: #ffffff16; }
.eyebrow { color: var(--section-accent, var(--accent)); font-size: 11px; letter-spacing: .12em; }
.home-hero { padding: 30px; gap: 24px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.home-hero h1 { font-size: clamp(30px, 4vw, 43px); font-weight: 500; margin-top: 12px; }
.home-hero .lead { font-size: 14px; line-height: 1.8; color: var(--muted); }
.home-hero .accent { color: #ffadd5; }
.hero-stat { background: #26212b; border: 0; border-radius: 5px; padding: 13px 15px; }
.hero-stat-num { font-family: var(--font); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 25px; }
.hero-stat-accent { background: #423043; }
.home-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin: 18px 0 24px; }
.home-shortcuts > a { display: flex; align-items: center; gap: 13px; padding: 17px; color: var(--text); background: #302b34; min-width: 0; }
.home-shortcuts > a:first-child { border-radius: 6px 0 0 6px; }
.home-shortcuts > a:last-child { border-radius: 0 6px 6px 0; }
.home-shortcuts > a:hover { background: #413247; }
.shortcut-number { color: #8f8099; font-size: 12px; }
.home-shortcuts strong { display: block; font-size: 14px; font-weight: 600; }
.home-shortcuts small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.home-shortcuts > a > span:last-child { margin-left: auto; color: var(--accent); }
.page-hero { padding: 24px 28px; }
.page-title { font-weight: 500; }
.ranking-header { padding: 23px 28px; margin-bottom: 2px; border-radius: 7px 7px 0 0; }
.ranking-header-icon { display: none; }
.ranking-title { font-size: 26px; font-weight: 500; }
.ranking-title-en { display: none; }
.ranking-filter-bar { padding: 12px 25px; border-radius: 0 0 7px 7px; margin-bottom: 16px; background: #3a3440; }
.ranking-filter-meta { font-size: 11px; }
.ranking-tabs .tab-underline { color: var(--muted); font-size: 13px; }
.ranking-tabs .tab-underline.is-active { color: var(--section-accent); border-color: var(--section-accent); }
.ranking-card { background: #27232d; padding: 10px 16px; }
.ranking-table { border-collapse: separate; border-spacing: 0 4px; }
.ranking-table thead th { background: transparent; border: 0; font-weight: 400; color: var(--muted); font-size: 11px; padding: 10px 9px; }
.ranking-table tbody td { border: 0; background: #332e39; padding: 8px 9px; font-size: 12px; }
.ranking-table tr:nth-child(even) td { background: #332e39; }
.ranking-table tr:hover td { background: #403647; }
.ranking-table td:first-child { border-radius: 5px 0 0 5px; }
.ranking-table td:last-child { border-radius: 0 5px 5px 0; }
.ranking-table .user-link { color: #cfddc6; }
.ranking-table .rank-mark { font-size: 11px; background: none; padding: 0; }
.ranking-table .value-accent { color: #e0f0d5; }
.ranking-table .avatar-sm { width: 29px; height: 29px; border-radius: 5px; }
.ranking-table .rank-pill { background: transparent; border: 0; color: #e6e0eb; font-size: 13px; }
.ranking-table .rank { background: transparent; border: 0; box-shadow: none; color: #e6e0eb; font-weight: 500; }
.ranking-table .rank::before { content: "#"; }
.pagination { gap: 5px; }
.page-link { border: 0; background: #ffffff06; border-radius: 20px; font-size: 12px; }
.page-link.is-active { background: var(--section-accent, var(--accent)); color: #211827; }
.pill { border-radius: 4px; background: #ffffff07; border-color: transparent; }
.auth-card { border-top: 3px solid #ff9bca; }
.auth-header, .auth-footer { border-color: var(--border-soft); }
.input { background: #241f29; border-color: transparent; border-radius: 5px; }
.input:focus { border-color: var(--section-accent, var(--accent)); box-shadow: 0 0 0 2px #ff9bca15; }
.nav-dropdown, .account-dropdown { background: #39313f; border: 0; border-top: 2px solid var(--section-accent, var(--accent)); }
html.js-site .nav-item:not(.is-open) > .nav-dropdown,
html.js-site .account-menu:not(.is-open) > .account-dropdown { display: none; }
.footer { background: #211c26; border: 0; padding: 28px 0; }
.footer-inner { align-items: center; justify-content: center; gap: 14px; }
.footer-meta, .footer-links { justify-content: center; flex-wrap: wrap; font-size: 11px; }
.footer-brand { color: #ff9bca; }
.footer-copy { width: 100%; text-align: center; margin-top: 6px; }
.form-stack, .auth-form { min-width: 0; }
form[aria-busy="true"] { cursor: progress; }
.table-wrap { max-width: 100%; }
.store-intro { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 32px; align-items: center; padding: 42px 38px; background: #34303a; border-radius: 8px 8px 0 0; }
.store-intro h1 { font-size: clamp(32px, 5vw, 48px); font-weight: 400; line-height: 1.25; margin: 16px 0; }
.store-intro h1 > span { color: #eec47f; }
.store-lead { max-width: 40ch; font-size: 14px; color: #c2b9c9; line-height: 1.8; }
.store-emblem { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; width: 178px; height: 178px; border-radius: 50%; border: 2px solid #eec47f; color: #eec47f; }
.store-emblem .nav-icon { width: 54px; height: 54px; }
.store-emblem > span { font-size: 22px; letter-spacing: .12em; }
.store-tabs { display: flex; gap: 28px; padding: 0 30px; background: #413746; border-radius: 0 0 7px 7px; margin-bottom: 24px; }
.store-tabs > a { padding: 15px 0; border-bottom: 3px solid transparent; color: var(--muted); font-size: 13px; }
.store-tabs > a[aria-current] { border-color: #eec47f; color: #f4d49f; }
.store-count { padding: 1px 6px; background: #28232d; border-radius: 4px; font-size: 10px; margin-left: 5px; }
.store-empty { padding: 40px 24px 46px; text-align: center; }
.store-empty-icon { display: inline-flex; padding: 17px; border-radius: 50%; background: #eec47f0a; color: #ceb17f; margin-bottom: 15px; }
.store-empty-icon .nav-icon { width: 29px; height: 29px; }
.store-empty h3 { font-size: 20px; font-weight: 500; }
.store-empty p { margin: 10px 0 24px; color: var(--muted); font-size: 13px; }
.store-help { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; padding: 32px 8px 0; }
.store-help h2 { font-weight: 500; font-size: 22px; margin-top: 8px; }
.store-answers details { padding: 16px 0; border-bottom: 1px solid var(--border-soft); }
.store-answers details:first-child { padding-top: 0; }
.store-answers summary { cursor: pointer; font-size: 14px; }
.store-answers p { font-size: 13px; color: var(--muted); line-height: 1.8; margin-top: 10px; }

@media (max-width: 1000px) and (min-width: 861px) {
  .topbar-inner { gap: 12px; }
  .brand-word, .topbar-online { display: none; }
  .nav-link, .nav-trigger { padding-inline: 9px; }
}
@media (max-width: 860px) {
  .topbar-inner { min-height: 70px; }
  .brand-mark { width: 40px; height: 40px; font-size: 13px; }
  .brand-word { font-size: 18px; }
  .topbar-tools { display: none; }
  .site-nav { display: none; }
  .site-nav.is-open { display: flex; }
  .nav-link, .nav-trigger { width: 100%; justify-content: flex-start; padding: 12px; font-size: 14px; }
  .nav-link.is-active::after, .nav-trigger.is-active::after { left: 0; right: auto; width: 3px; height: 22px; bottom: 9px; }
  .site-nav .nav-dropdown { position: static; min-width: 0; width: 100%; box-shadow: none; background: #211b26; margin: 0 0 5px; border: 0; }
  html:not(.js-site) .site-nav { display: flex; }
  html:not(.js-site) .nav-toggle { display: none; }
  .section-masthead-inner { padding: 14px 20px; min-height: 58px; }
  .section-masthead-title { font-size: 20px; }
  .home-hero { grid-template-columns: minmax(0, 1fr); padding: 25px; }
  .home-hero-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hero-stat { padding: 12px 10px; }
  .hero-stat-num { font-size: 22px; }
  .hero-stat-label { font-size: 10px; }
  .home-shortcuts { gap: 2px; }
  .home-shortcuts > a { padding: 16px 12px; }
  .shortcut-number { display: none; }
  .store-intro { grid-template-columns: minmax(0, 1fr) 160px; padding: 30px; gap: 22px; }
  .store-emblem { width: 150px; height: 150px; }
}
@media (max-width: 600px) {
  .container { width: calc(100% - 20px); }
  .page { padding-top: 14px; }
  .section-masthead-brand span { display: none; }
  .home-hero { padding: 22px 18px; }
  .home-hero .hero-actions { display: flex; flex-wrap: wrap; }
  .home-hero .hero-actions .btn { width: auto; flex: 1 1 calc(50% - 8px); padding-inline: 9px; font-size: 13px; }
  .home-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stat:last-child { grid-column: 1 / -1; }
  .hero-stat { min-width: 0; }
  .home-shortcuts { grid-template-columns: minmax(0, 1fr); margin-bottom: 18px; }
  .home-shortcuts > a:first-child { border-radius: 6px 6px 0 0; }
  .home-shortcuts > a:last-child { border-radius: 0 0 6px 6px; }
  .home-shortcuts > a { padding: 14px 18px; }
  .home-shortcuts strong { font-size: 14px; }
  .home-shortcuts small { display: inline; }
  .card-header { padding: 15px 17px; flex-wrap: wrap; }
  .card-body { padding: 18px; }
  .card-actions { width: 100%; flex-wrap: wrap; }
  .btn, .nav-toggle { min-height: 42px; }
  .ranking-header { padding: 20px; }
  .ranking-filter-bar { padding: 8px 16px; gap: 8px; flex-wrap: wrap; }
  .ranking-title { font-size: 24px; }
  .ranking-filter-meta { width: 100%; }
  .ranking-card { padding: 4px 8px; }
  .ranking-table { min-width: 660px; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .store-intro { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; }
  .store-emblem { display: none; }
  .store-intro h1 { font-size: 35px; }
  .store-tabs { padding-inline: 20px; gap: 24px; }
  .store-help { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 26px 8px 0; }
  .store-empty { padding-inline: 18px; }
  .footer { padding-top: 22px; }
  .footer-meta { line-height: 1.8; }
}

/* Profile bio + banner (W01) ------------------------------------------------ */
.profile-about-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.banner-preview-wrap {
  line-height: 0;
  flex: 0 0 auto;
}

.banner-preview {
  display: block;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 1;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #241a20;
}

textarea.input {
  min-height: 96px;
  resize: vertical;
}

/* Help centre + downloads (W02) --------------------------------------------- */
.help-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 14px 18px;
  margin: 0 0 16px;
  font-size: 13px;
}

.help-toc a {
  color: var(--text-soft);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}

.help-toc a:hover,
.help-toc a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.help-section {
  margin-bottom: 16px;
}

.help-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.7;
}

.help-body ol,
.help-body ul,
.help-list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.help-faq {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: 8px 18px;
  margin: 0;
}

.help-faq dt {
  color: var(--text-soft);
  font-weight: 600;
}

.help-faq dd {
  margin: 0;
}

.help-template {
  margin: 0;
  padding: 14px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12.5px;
}

.sha-cell {
  overflow-wrap: anywhere;
  max-width: 260px;
}

@media (max-width: 640px) {
  .help-faq {
    grid-template-columns: 1fr;
  }
}