/* ==========================================================================
   osu!drovia 2026-11 theme: the page structure of osu.ppy.sh, in the site's pink.
   - the whole page background is a random image from the owner's background gallery; the navigation sits on it
   - a 1000px page: title row (55px) overlapping the band, a tab bar (48px), then the content panel
   - flat colours only (no gradients); rows and panels with small 4px corners
   Loaded last and scoped to body.theme-osu, so the old look stays one cookie away (/theme/classic).
   Original CSS: no official assets, fonts or icons are used.
   ========================================================================== */

body.theme-osu {
  --hue: 333;
  --b1: hsl(var(--hue) 10% 10%);   /* page background */
  --b2: hsl(var(--hue) 10% 12%);
  --b3: hsl(var(--hue) 10% 15%);   /* content panel */
  --b4: hsl(var(--hue) 10% 20%);   /* rows, boxes */
  --b5: hsl(var(--hue) 10% 25%);   /* hover */
  --b6: hsl(var(--hue) 10% 30%);
  --h1: hsl(var(--hue) 20% 15%);   /* title row, empty band */
  --h2: hsl(var(--hue) 20% 20%);   /* tab bar */
  --c1: hsl(var(--hue) 100% 70%);  /* accent */
  --c2: hsl(var(--hue) 100% 80%);
  --l1: hsl(var(--hue) 40% 80%);   /* inactive tab text */
  --dim: hsl(var(--hue) 10% 60%);
  --lime: #b3ff66;
  --sky: #66ccff;

  --bg: var(--b1);
  --bg-deep: var(--b1);
  --bg-soft: var(--b3);
  --panel: var(--b4);
  --panel-2: var(--b5);
  --panel-3: var(--b6);
  --border: var(--b5);
  --border-soft: var(--b4);
  --text: #fff;
  --text-soft: hsl(var(--hue) 10% 86%);
  --muted: hsl(var(--hue) 10% 70%);
  --faint: var(--dim);
  --accent: var(--c1);
  --accent-strong: var(--c2);
  --radius-sm: 4px;
  --radius: 4px;
  --radius-lg: 4px;
  --shadow: none;
  --max-width: 1000px;

  position: relative;
  background: var(--b1);
  color: #fff;
  font-size: 14px;
}

body.theme-osu .container { max-width: var(--max-width); padding-left: 0; padding-right: 0; }
body.theme-osu a { color: var(--c2); }
body.theme-osu a:hover { color: #fff; }
body.theme-osu .muted { color: var(--dim); }
body.theme-osu .mono { font-family: var(--font); font-variant-numeric: tabular-nums; }

/* ---- page background: a random image from the owner's gallery, behind everything ---- */
body.theme-osu .site-backdrop {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--b1); pointer-events: none;
}
body.theme-osu .site-backdrop-image {
  position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .55;
}
body.theme-osu .section-masthead, body.theme-osu main.page,
body.theme-osu .flash-stack, body.theme-osu .footer { position: relative; z-index: 1; }
/* the navigation and its dropdowns stay above the page */
body.theme-osu .topbar { z-index: 50; }

/* ---- navigation (on the band, transparent) ----------------------------- */
body.theme-osu .topbar { background: none; border: 0; box-shadow: none; backdrop-filter: none; position: relative; }
body.theme-osu .topbar-inner { min-height: 90px; gap: 16px; }
body.theme-osu .brand-mark { width: 50px; height: 50px; font-size: 15px; }
body.theme-osu .brand-word { font-size: 20px; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
body.theme-osu .site-nav { gap: 4px; }
body.theme-osu .site-nav .nav-link {
  position: relative; color: #fff; font-weight: 500; font-size: 14px; background: none; border-radius: 0;
  padding: 10px 8px; text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
body.theme-osu .site-nav .nav-link::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 2px; height: 3px; border-radius: 10px;
  background: var(--c1); opacity: 0; transition: opacity .12s ease;
}
body.theme-osu .site-nav .nav-link:hover, body.theme-osu .site-nav .nav-link.is-active { color: #fff; background: none; }
body.theme-osu .site-nav .nav-link:hover::after { opacity: .5; }
body.theme-osu .site-nav .nav-link.is-active::after { opacity: 1; }
body.theme-osu .site-nav .nav-link svg { display: none; }
body.theme-osu .nav-dropdown, body.theme-osu .account-dropdown {
  background: var(--b2); border: 0; border-radius: 10px; box-shadow: 0 2px 20px rgba(0, 0, 0, .6); padding: 6px;
}
body.theme-osu .nav-dropdown-link, body.theme-osu .account-dropdown-link { border-radius: 4px; }
body.theme-osu .nav-dropdown-link:hover, body.theme-osu .account-dropdown-link:hover { background: var(--b4); }
body.theme-osu .account-user { background: none; border: 0; }
body.theme-osu .account-user:hover { background: rgba(0, 0, 0, .25); }
body.theme-osu .account-user .avatar { border-radius: 50%; width: 40px; height: 40px; }
body.theme-osu .topbar-online, body.theme-osu .topbar-search { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
body.theme-osu .language-switch select, body.theme-osu .language-switch .input {
  background: rgba(0, 0, 0, .35); border: 0; border-radius: 10000px; color: #fff;
}

/* ---- title row + tab bar (overlapping the band) ------------------------ */
body.theme-osu .section-masthead { background: none; border: 0; margin: 15px 0 0; }
body.theme-osu .section-masthead-inner {
  min-height: 55px; padding: 0 50px; border: 0; background: var(--h1); box-shadow: none; align-items: center;
}
body.theme-osu .section-masthead-title { font-size: 20px; font-weight: 400; color: #fff; gap: 12px; }
body.theme-osu .section-marker {
  width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; box-shadow: inset 0 0 0 3px #fff;
}
body.theme-osu .section-masthead-brand { color: var(--dim); font-size: 12px; }
body.theme-osu .section-masthead-brand span { color: var(--dim); }
body.theme-osu .section-tabs {
  display: flex; gap: 20px; min-height: 48px; padding: 0 50px; background: var(--h2); overflow-x: auto; scrollbar-width: none;
}
body.theme-osu .section-tabs::-webkit-scrollbar { display: none; }
body.theme-osu .section-tab {
  position: relative; display: flex; align-items: center; padding: 15px 0; white-space: nowrap;
  color: var(--l1); font-size: 14px; text-decoration: none;
}
body.theme-osu .section-tab:hover { color: #fff; }
body.theme-osu .section-tab.is-active { color: #fff; font-weight: 700; }
body.theme-osu .section-tab.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 10px 10px 0 0; background: var(--c1);
}

/* ---- content panel ----------------------------------------------------- */
body.theme-osu main.page {
  background: var(--b3); margin-top: 0; margin-bottom: 40px; padding: 20px 50px 30px; border-radius: 0; box-shadow: none;
}
body.theme-osu .flash-stack { margin-top: 0; }

/* ---- boxes -------------------------------------------------------------- */
body.theme-osu .card { background: var(--b4); border: 0; border-radius: 4px; box-shadow: none; }
body.theme-osu .card-header { border-bottom: 0; padding-bottom: 4px; background: none; }
body.theme-osu .card-title, body.theme-osu .card h2 { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: 0; }
body.theme-osu .card-title::before, body.theme-osu .card > h2::before { display: none; }
body.theme-osu .card-footer { border-top: 0; background: none; }
body.theme-osu .page-header h1, body.theme-osu .page-title { font-weight: 400; font-size: 24px; }
body.theme-osu .eyebrow { color: var(--dim); letter-spacing: 0; text-transform: none; font-weight: 400; font-size: 12px; }

/* ---- buttons / pills / inputs ----------------------------------------- */
body.theme-osu .btn {
  border-radius: 10000px; border: 0; font-weight: 700; letter-spacing: 0; box-shadow: none;
  background: var(--b5); color: #fff; transition: background .12s ease;
}
body.theme-osu .btn:hover { background: var(--b6); color: #fff; }
body.theme-osu .btn-primary { background: var(--c1); color: #fff; }
body.theme-osu .btn-primary:hover { background: var(--c2); color: #fff; }
body.theme-osu .btn-ghost { background: var(--b5); color: #fff; }
body.theme-osu .input, body.theme-osu input.input, body.theme-osu select.input, body.theme-osu textarea.input {
  background: rgba(0, 0, 0, .3); border: 1px solid transparent; border-radius: 4px; color: #fff; box-shadow: none;
}
body.theme-osu .input:focus { border-color: var(--c1); outline: none; box-shadow: none; }
body.theme-osu .pill-group { background: none; border: 0; gap: 6px; padding: 0; }
body.theme-osu .pill, body.theme-osu .console-chip {
  border-radius: 10000px; background: var(--b4); color: var(--l1); border: 0; font-weight: 400; box-shadow: none;
}
body.theme-osu .pill:hover { color: #fff; }
body.theme-osu .pill.is-active, body.theme-osu .console-chip.is-active { background: var(--b6); color: #fff; font-weight: 700; box-shadow: none; }
body.theme-osu .tag-owner { background: #ffcc22; color: #2a2200; border: 0; }
body.theme-osu .tag-admin { background: var(--sky); color: #04202e; border: 0; }

/* ---- tables: 32px rows with 4px corners, like the osu! rankings -------- */
body.theme-osu .table-wrap { background: none; border: 0; }
body.theme-osu .board-table { border-collapse: separate; border-spacing: 0 2px; background: none; font-size: 12px; }
body.theme-osu .board-table thead th {
  background: none; border: 0; color: var(--dim); font-size: 12px; font-weight: 400; text-transform: none; padding: 4px 10px;
}
body.theme-osu .board-table tbody td { background: var(--b4); border: 0; padding: 6px 10px; color: #fff; height: 32px; }
body.theme-osu .board-table tbody tr td:first-child { border-radius: 4px 0 0 4px; }
body.theme-osu .board-table tbody tr td:last-child { border-radius: 0 4px 4px 0; }
body.theme-osu .board-table tbody tr:hover td { background: var(--b5); }
body.theme-osu .board-table td.hide-xs, body.theme-osu .board-table td.mono:not(.value-accent) { color: var(--dim); }
body.theme-osu .board-table .value-accent { color: #fff; font-weight: 700; }
body.theme-osu .board-table .user-link { color: #fff; font-weight: 700; }
body.theme-osu .card .table-wrap { padding: 0 12px 6px; }
/* a box that only holds a table disappears, so the rows sit on the page like on osu! */
body.theme-osu .card:has(> .table-wrap .board-table) { background: none; }
body.theme-osu .card:has(> .table-wrap .board-table) > .table-wrap { padding-left: 0; padding-right: 0; }
body.theme-osu .card:has(> .table-wrap .board-table) > .card-header { padding-left: 0; padding-right: 0; }
body.theme-osu .rank-badge, body.theme-osu .rank-cell { font-weight: 700; color: #fff; }
body.theme-osu .player-background td { background-color: var(--b4); }

/* ---- home -------------------------------------------------------------- */
body.theme-osu .home-hero { border: 0; border-radius: 4px; background: var(--b4); padding: 26px 30px; }
body.theme-osu .home-hero h1 { font-weight: 400; font-size: 32px; }
body.theme-osu .home-hero .accent { color: var(--c1); font-weight: 700; }
body.theme-osu .home-hero .lead { color: var(--text-soft); }
body.theme-osu .home-hero-stats .hero-stat { background: var(--b3); border: 0; border-radius: 4px; }
body.theme-osu .hero-stat-num { color: #fff; font-weight: 700; }
body.theme-osu .hero-stat-accent .hero-stat-num { color: var(--lime); }
body.theme-osu .hero-stat-label { color: var(--dim); font-size: 12px; }
body.theme-osu .home-shortcuts a { background: var(--b4); border: 0; border-radius: 4px; }
body.theme-osu .home-shortcuts a:hover { background: var(--b5); }
body.theme-osu .shortcut-number { color: var(--c1); }

/* ---- player profile ---------------------------------------------------- */
body.theme-osu .player-hero { background: var(--b4); overflow: hidden; padding: 0; border-radius: 0; }
body.theme-osu .player-banner { min-height: 250px; border-radius: 0; }
body.theme-osu .player-banner-eyebrow { display: none; }
body.theme-osu .player-hero-body { background: var(--b4); }
body.theme-osu .player-avatar .avatar, body.theme-osu .avatar-player { border-radius: 40px; border: 0; box-shadow: none; }
body.theme-osu .player-name { font-weight: 700; font-size: 26px; }
body.theme-osu .player-rank-card { background: var(--b3); border: 0; border-radius: 4px; box-shadow: none; }
body.theme-osu .player-rank-label { color: var(--dim); font-weight: 400; }
body.theme-osu .player-rank-value { color: #fff; font-weight: 300; }
body.theme-osu .player-rank-value::before { content: "#"; }
body.theme-osu .player-rank-stats dd.accent { color: var(--c2); }
body.theme-osu .player-hero-footer { background: var(--b3); border-top: 0; }
body.theme-osu .player-facts dt { color: var(--dim); }
body.theme-osu .player-facts dd { color: #fff; font-weight: 700; }
body.theme-osu .country-chip { background: none; border: 0; border-radius: 0; padding: 0; }
body.theme-osu .profile-tabs {
  width: 100%; border: 0; border-radius: 0; background: var(--h2); padding: 0 20px; gap: 20px; scrollbar-width: none; margin: 16px 0;
}
body.theme-osu .profile-tabs::-webkit-scrollbar { display: none; }
body.theme-osu .profile-tab { position: relative; border-radius: 0; background: none; padding: 14px 0; color: var(--l1); font-weight: 400; box-shadow: none; }
body.theme-osu .profile-tab:hover { background: none; color: #fff; }
body.theme-osu .profile-tab.is-active { background: none; color: #fff; font-weight: 700; box-shadow: none; }
body.theme-osu .profile-tab.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 10px 10px 0 0; background: var(--c1);
}

/* ---- beatmap pages ----------------------------------------------------- */
/* leaderboard header: the map's cover under a flat dark layer */
body.theme-osu .beatmap-hero { position: relative; overflow: hidden; border-radius: 4px; min-height: 210px; background: var(--b4); }
body.theme-osu .beatmap-hero::before {
  content: ""; position: absolute; inset: 0; background: var(--beatmap-cover, none) center / cover no-repeat; opacity: .35;
}
body.theme-osu .beatmap-hero > * { position: relative; }
body.theme-osu .beatmap-title { font-weight: 700; }
body.theme-osu .beatmap-card, body.theme-osu .map-card, body.theme-osu .search-result { background: var(--b4); border: 0; border-radius: 4px; }
body.theme-osu .status-ranked, body.theme-osu .badge-ranked { background: var(--lime); color: #1d2b0e; border: 0; }
body.theme-osu .status-loved, body.theme-osu .badge-loved { background: #ff66aa; color: #fff; border: 0; }
body.theme-osu .status-qualified, body.theme-osu .badge-qualified { background: var(--sky); color: #04202e; border: 0; }

/* ---- owner background gallery (both looks) ----------------------------- */
.background-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 16px; }
.background-item { margin: 0; background: var(--panel); border-radius: 4px; overflow: hidden; }
.background-item img { display: block; width: 100%; aspect-ratio: 16 / 6; object-fit: cover; }
.background-item figcaption { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; }
.background-item form { margin: 0; }

/* ---- footer ------------------------------------------------------------ */
body.theme-osu .footer { background: var(--b3); border-top: 0; color: var(--dim); font-size: 12px; }
body.theme-osu .footer a { color: var(--dim); }
body.theme-osu .footer a:hover { color: #fff; }

/* ---- narrower screens -------------------------------------------------- */
@media (max-width: 1040px) {
  body.theme-osu .topbar .container { padding-left: 12px; padding-right: 12px; }
  body.theme-osu .section-masthead-inner, body.theme-osu .section-tabs { padding-left: 20px; padding-right: 20px; }
  body.theme-osu main.page { padding: 16px 20px 24px; }
}
@media (max-width: 760px) {
  body.theme-osu .topbar-inner { min-height: 64px; }
  body.theme-osu .section-masthead { margin-top: 8px; }
  body.theme-osu .section-masthead-inner { min-height: 46px; padding-left: 14px; padding-right: 14px; }
  body.theme-osu .section-masthead-title { font-size: 17px; }
  body.theme-osu .section-tabs { padding-left: 14px; padding-right: 14px; gap: 16px; min-height: 42px; }
  body.theme-osu main.page { padding: 12px 10px 20px; margin-left: 0; margin-right: 0; }
  body.theme-osu .site-nav { background: var(--b2); }
  body.theme-osu .site-nav .nav-link { padding: 12px 14px; text-shadow: none; }
  body.theme-osu .site-nav .nav-link::after { bottom: 6px; left: 14px; right: auto; width: 24px; }
  body.theme-osu .home-hero { padding: 16px; }
  body.theme-osu .player-banner { min-height: 140px; }
  body.theme-osu .board-table tbody td { padding: 6px; }
  body.theme-osu .card .table-wrap { padding: 0 4px 4px; }
}

/* ---- phones: a compact layer (2026-11-08) -------------------------------
   Everything a step smaller so more fits on a phone screen: text, buttons, boxes, tables, profile and map headers. */
@media (max-width: 600px) {
  body.theme-osu { font-size: 13px; }
  body.theme-osu .section-masthead > .container, body.theme-osu main.page, body.theme-osu .flash-stack { padding-left: 0; padding-right: 0; }
  body.theme-osu .topbar .container { padding-left: 8px; padding-right: 8px; }
  body.theme-osu .topbar-inner { min-height: 54px; gap: 8px; }
  body.theme-osu .brand-mark { width: 36px; height: 36px; font-size: 11px; }
  body.theme-osu .brand-word { font-size: 17px; }
  body.theme-osu .language-switch select, body.theme-osu .language-switch .input { font-size: 12px; padding: 4px 24px 4px 10px; min-height: 30px; }
  body.theme-osu .nav-toggle { width: 38px; height: 38px; }
  body.theme-osu .section-masthead { margin-top: 4px; }
  body.theme-osu .section-masthead-inner { min-height: 40px; padding: 0 12px; }
  body.theme-osu .section-masthead-title { font-size: 15px; gap: 8px; }
  body.theme-osu .section-marker { width: 18px; height: 18px; box-shadow: inset 0 0 0 2px #fff; }
  body.theme-osu .section-masthead-brand { display: none; }
  body.theme-osu .section-tabs { min-height: 36px; padding: 0 12px; gap: 14px; }
  body.theme-osu .section-tab { font-size: 12px; padding: 9px 0; }
  body.theme-osu .section-tab.is-active::after { height: 3px; }
  body.theme-osu main.page { padding: 10px 8px 18px; margin-bottom: 20px; }

  body.theme-osu h1, body.theme-osu .page-header h1, body.theme-osu .page-title { font-size: 19px; }
  body.theme-osu h2, body.theme-osu .card-title, body.theme-osu .card h2 { font-size: 14px; }
  body.theme-osu .page-header { gap: 8px; margin-bottom: 10px; }
  body.theme-osu .card { margin-bottom: 8px; }
  body.theme-osu .card-body, body.theme-osu .card-header, body.theme-osu .card-footer { padding: 10px 12px; }
  body.theme-osu .muted.small, body.theme-osu .small { font-size: 11px; }

  body.theme-osu .btn { font-size: 12px; padding: 6px 13px; min-height: 30px; }
  body.theme-osu .btn-sm, body.theme-osu .btn-xs { font-size: 11px; padding: 4px 10px; min-height: 26px; }
  body.theme-osu .pill, body.theme-osu .console-chip { font-size: 11px; padding: 4px 10px; min-height: 26px; }
  body.theme-osu .pill-group { gap: 4px; }
  body.theme-osu .input, body.theme-osu input.input, body.theme-osu select.input { font-size: 13px; min-height: 34px; padding: 6px 10px; }

  body.theme-osu .board-table { font-size: 11px; }
  body.theme-osu .board-table thead th { font-size: 11px; padding: 3px 5px; }
  body.theme-osu .board-table tbody td { padding: 4px 5px; height: 28px; }
  body.theme-osu .board-table .avatar { width: 22px; height: 22px; }
  body.theme-osu .score-counts { font-size: 9px; letter-spacing: -.02em; white-space: nowrap; font-family: var(--font); }

  /* home */
  body.theme-osu .home-hero { padding: 12px; gap: 10px; }
  body.theme-osu .home-hero h1 { font-size: 22px; margin: 4px 0 6px; }
  body.theme-osu .home-hero .lead { font-size: 12px; margin: 4px 0 8px; }
  body.theme-osu .hero-actions { gap: 6px; }
  body.theme-osu .home-hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  body.theme-osu .home-hero-stats .hero-stat { padding: 6px 8px; grid-column: auto; }
  body.theme-osu .hero-stat-num { font-size: 17px; }
  body.theme-osu .hero-stat-label { font-size: 10px; }
  body.theme-osu .home-shortcuts { gap: 4px; }
  body.theme-osu .home-shortcuts a { padding: 8px 12px; }
  body.theme-osu .home-shortcuts small { font-size: 11px; }

  /* player profile */
  body.theme-osu .player-banner { min-height: 100px; }
  body.theme-osu .player-hero-body { padding: 10px 12px; gap: 10px; }
  body.theme-osu .player-avatar .avatar, body.theme-osu .avatar-player { width: 76px; height: 76px; border-radius: 22px; }
  body.theme-osu .player-avatar-wrap { margin-top: -50px; }
  body.theme-osu .player-name { font-size: 20px; }
  body.theme-osu .player-meta, body.theme-osu .player-presence { font-size: 11px; }
  body.theme-osu .player-rank-card { padding: 10px 12px; }
  body.theme-osu .player-rank-value { font-size: 26px; }
  body.theme-osu .player-rank-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  body.theme-osu .player-rank-stats dt, body.theme-osu .player-facts dt { font-size: 10px; }
  body.theme-osu .player-rank-stats dd, body.theme-osu .player-facts dd { font-size: 13px; }
  body.theme-osu .player-hero-footer { padding: 10px 12px; gap: 8px; }
  body.theme-osu .player-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  body.theme-osu .profile-tabs { padding: 0 10px; gap: 14px; margin: 10px 0; }
  body.theme-osu .profile-tab { font-size: 12px; padding: 10px 0; }

  /* beatmap leaderboard header */
  body.theme-osu .beatmap-hero { min-height: 0; padding: 12px; }
  body.theme-osu .beatmap-title { font-size: 18px; }
  body.theme-osu .beatmap-meta { font-size: 11px; }
  body.theme-osu .beatmap-hero .chip, body.theme-osu .beatmap-hero .badge { font-size: 10px; padding: 2px 7px; }
  body.theme-osu .beatmap-hero .btn { font-size: 11px; padding: 4px 10px; min-height: 26px; }
  body.theme-osu .beatmap-hero-actions { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 6px; margin-top: 8px; }
  body.theme-osu .beatmap-chips { gap: 4px; }

  /* polls */
  body.theme-osu .poll-option, body.theme-osu .poll-comment, body.theme-osu .poll-row, body.theme-osu .home-poll { padding: 8px 10px; }
}