:root {
  --cyan: #10b5c2;
  --cyan-deep: #087f99;
  --blue: #2885c5;
  --pink: #dc3d91;
  --yellow: #efd43b;
  --ink: #33404b;
  --muted: #68747e;
  --paper: #f1f4f5;
  --line: rgba(43, 63, 75, .2);
  --shadow: 0 6px 0 rgba(32, 68, 82, .18), 0 14px 28px rgba(5, 67, 86, .15);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; color: var(--ink); font-family: "Arial Narrow", "Segoe UI", sans-serif; background: #108fa7; }
a { color: inherit; text-decoration: none; }
button, select { font: inherit; }

body::before {
  content: ""; position: fixed; inset: 0; z-index: -3;
  background:
    linear-gradient(132deg, transparent 0 24%, rgba(255,255,255,.08) 24.1% 25%, transparent 25.1% 56%, rgba(239,212,59,.28) 56.1% 57%, transparent 57.1%),
    linear-gradient(45deg, #128fa8 0 34%, #149eb5 34% 61%, #25afa6 61% 100%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 42px 42px; transform: skewY(-8deg) scale(1.15);
}

.stage-pattern { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.stage-pattern::before, .stage-pattern::after { content: ""; position: absolute; width: 46vw; height: 10px; background: var(--pink); transform: rotate(-43deg); opacity: .48; }
.stage-pattern::before { left: -13vw; top: 35vh; }.stage-pattern::after { right: -12vw; bottom: 22vh; background: var(--yellow); }
.stage-pattern i { position: absolute; display: block; border: 2px solid rgba(255,255,255,.16); transform: rotate(45deg); }
.stage-pattern i:nth-child(1) { width: 180px; height: 180px; left: 3%; top: 34%; }
.stage-pattern i:nth-child(2) { width: 90px; height: 90px; right: 7%; top: 16%; border-color: rgba(239,212,59,.32); }
.stage-pattern i:nth-child(3) { width: 260px; height: 260px; right: 1%; bottom: 12%; }
.stage-pattern i:nth-child(4) { width: 24px; height: 24px; left: 48%; top: 13%; background: rgba(220,61,145,.65); border: 0; }
.stage-pattern i:nth-child(5) { width: 15px; height: 15px; left: 20%; bottom: 9%; background: rgba(239,212,59,.72); border: 0; }
.stage-pattern i:nth-child(6) { width: 32px; height: 32px; right: 31%; top: 39%; background: rgba(61,204,175,.58); border: 0; }

.topbar { min-height: 76px; padding: 0 clamp(20px, 4vw, 68px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; color: #fff; background: rgba(13, 103, 130, .96); border-bottom: 3px solid rgba(255,255,255,.72); box-shadow: 0 4px 0 rgba(25,64,78,.2); backdrop-filter: blur(12px); }
.logo { display: inline-flex; align-items: center; width: max-content; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 25px; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.logo b { color: var(--yellow); font-weight: inherit; }
.decor-gem { width: 34px; height: 34px; display: inline-block; background: conic-gradient(from 25deg, var(--yellow), var(--pink), #744cec, var(--cyan), var(--yellow)); border: 4px solid white; clip-path: polygon(50% 0, 94% 25%, 100% 70%, 54% 100%, 8% 73%, 0 25%); box-shadow: 0 4px 0 rgba(0,0,0,.18); }
.topbar nav { display: flex; align-self: stretch; }
.topbar nav a { min-width: 118px; padding: 0 18px; display: grid; place-items: center; font-weight: 900; text-transform: uppercase; transform: skew(-8deg); border-inline: 1px solid rgba(255,255,255,.12); }
.topbar nav a.active, .topbar nav a:hover { background: var(--pink); text-shadow: 0 2px 0 rgba(0,0,0,.22); }
.server-state, .back-link { justify-self: end; display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.state-dot, .live-dot { width: 9px; height: 9px; display: inline-block; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.18); }
.server-state.online .state-dot, .live-dot { background: #67ff78; box-shadow: 0 0 0 4px rgba(103,255,120,.22), 0 0 14px #67ff78; }
.server-state.offline .state-dot { background: #ff5575; }

.game-screen { width: min(1180px, calc(100% - 40px)); min-height: calc(100vh - 146px); margin: 0 auto; padding: 38px 0 62px; }
.screen-heading { min-height: 112px; display: block; color: #fff; }
.kicker, .section-tag { margin: 0 0 5px; font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
h1, h2, h3, p { text-wrap: balance; }
.screen-heading h1 { margin: 0; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(40px, 5vw, 64px); font-weight: 900; line-height: .98; letter-spacing: .025em; text-transform: uppercase; -webkit-text-stroke: 1px rgba(41,60,70,.5); text-shadow: 0 3px 0 rgba(43,70,83,.38); }
.screen-heading h1 span { color: var(--yellow); }
.menu-panel { position: relative; background: rgba(245,247,247,.99); border: 3px solid #fff; outline: 1px solid rgba(57,82,94,.3); box-shadow: var(--shadow); clip-path: polygon(1.2% 0, 99.2% 0, 100% 9px, 99% 100%, .8% 100%, 0 calc(100% - 10px)); }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.panel-title { min-height: 78px; padding: 12px 20px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 15px; align-items: center; border-bottom: 4px solid #68747d; }
.online-panel .panel-title { grid-template-columns: minmax(0,1fr) auto; }
.cyan-title { color: #fff; background: linear-gradient(105deg, #0b97ab, var(--cyan) 64%, #159fbd); text-shadow: 0 2px 0 rgba(0,67,87,.25); }
.white-title { background: linear-gradient(110deg, #fff, #f4f5f5 64%, #d9dcde); }
.panel-title small { display: block; font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.panel-title h2 { margin: 1px 0 0; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(25px, 3vw, 36px); line-height: 1; letter-spacing: .03em; text-transform: uppercase; }
.panel-icon { width: 46px; height: 46px; display: grid; place-items: center; font-size: 24px; border: 2px solid currentColor; transform: skew(-6deg); }
.online-panel .panel-title h2 { display: flex; align-items: center; gap: 12px; }
.online-panel .panel-title h2::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 50%; background: #8cff92; box-shadow: 0 0 0 4px rgba(140,255,146,.18); }
.panel-title time { font-size: 11px; font-weight: 800; }
@keyframes pulse { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }

.online-players { min-height: 112px; padding: 8px 20px 12px; display: block; }
.online-player { min-width: 0; padding: 14px 4px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; gap: 20px; border-bottom: 1px solid #d5dadd; }
.online-player:last-child { border-bottom: 0; }.online-player strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }.online-player small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.player-avatar { width: 35px; height: 35px; display: grid; place-items: center; color: #fff; background: var(--pink); border: 3px solid #fff; outline: 2px solid var(--pink); font-family: Impact, sans-serif; font-size: 17px; transform: rotate(-5deg); }
.presence-empty { grid-column: 1/-1; margin: 0; display: grid; place-items: center; color: var(--muted); font-weight: 800; text-transform: uppercase; }

.score-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.stat-tile { min-height: 72px; padding: 11px 19px; display: flex; flex-direction: column; justify-content: center; color: #fff; border: 3px solid #fff; outline: 1px solid rgba(43,65,77,.22); box-shadow: 0 5px 0 rgba(32,80,96,.17); clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); text-shadow: 0 1px 0 rgba(0,0,0,.18); }
.stat-tile span { font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }.stat-tile strong { overflow: hidden; font-family: Impact, sans-serif; font-size: 32px; line-height: 1; text-overflow: ellipsis; }
.pink-tile { background: var(--pink); }.yellow-tile { color: #4b4c3c; background: var(--yellow); text-shadow: none; }.blue-tile { background: var(--blue); }

.leaderboard-panel { margin-top: 30px; }
.leaderboard-panel .panel-title { grid-template-columns: auto minmax(210px,.65fr) minmax(630px,1.5fr); }
.board-controls { display: grid; grid-template-columns: minmax(220px,1.35fr) minmax(125px,.55fr) minmax(125px,.55fr) 47px; gap: 7px; align-items: end; }
.filter-field { min-width: 0; display: grid; gap: 5px; }
.filter-field label { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.song-picker { position: relative; min-width: 0; }
.song-picker-button { width: 100%; height: 43px; padding: 0 13px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 14px; color: var(--ink); border: 2px solid #aeb7bc; background: #fff; cursor: pointer; text-align: left; font-weight: 800; }
.song-picker-button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.song-picker-button > i { color: var(--cyan-deep); font-size: 10px; font-style: normal; transition: transform .16s ease; }.song-picker-button[aria-expanded="true"] { border-color: var(--cyan-deep); box-shadow: inset 0 0 0 1px rgba(8,127,153,.12); }.song-picker-button[aria-expanded="true"] > i { transform: rotate(180deg); }.song-picker-button:disabled { color: #92999e; background: #edf0f1; cursor: default; }
.song-popover { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: min(440px, 76vw); padding: 12px; color: var(--ink); background: #fff; border: 2px solid #6f7b83; box-shadow: 0 12px 0 rgba(32,68,82,.14), 0 24px 48px rgba(9,50,65,.25); }
.song-popover[hidden] { display: none; }.song-search-label { display: block; margin: 0 0 6px; }.song-popover input[type="search"] { border-color: #bdc5c9; }
.song-option-list { max-height: 250px; margin-top: 9px; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid #d7dcde; }
.song-option { width: 100%; min-height: 42px; padding: 8px 10px; display: grid; grid-template-columns: minmax(0,1fr) 20px; align-items: center; gap: 10px; color: var(--ink); border: 0; border-bottom: 1px solid #e1e5e7; background: #fff; cursor: pointer; text-align: left; font-weight: 750; }.song-option:hover, .song-option:focus-visible { outline: none; background: #e7f6f7; }.song-option[aria-selected="true"] { color: var(--cyan-deep); background: #eef8f8; }.song-option i { color: var(--pink); font-style: normal; font-weight: 900; text-align: center; }.song-option-empty { margin: 0; padding: 25px 10px; color: var(--muted); text-align: center; font-size: 12px; }
.select-wrap { position: relative; }.select-wrap::after { content: "▼"; position: absolute; right: 14px; top: 50%; color: var(--cyan-deep); font-size: 10px; transform: translateY(-50%); pointer-events: none; }
select, input[type="search"] { width: 100%; height: 43px; padding: 0 40px 0 13px; color: var(--ink); border: 2px solid #aeb7bc; border-radius: 0; outline: none; background: #fff; font-weight: 800; }
select { appearance: none; }input[type="search"] { padding-right: 13px; appearance: none; }select:focus, input[type="search"]:focus { border-color: var(--cyan-deep); box-shadow: inset 0 0 0 1px rgba(8,127,153,.12); }select:disabled, input[type="search"]:disabled { color: #92999e; background: #edf0f1; }
.refresh-button { width: 47px; height: 43px; display: grid; place-items: center; color: #fff; background: var(--pink); border: 0; cursor: pointer; font-size: 24px; font-weight: 900; box-shadow: 0 3px 0 #a92b70; transition: background .16s ease, transform .16s ease, box-shadow .16s ease; }.refresh-button:hover { background: #e8529f; transform: translateY(-1px); box-shadow: 0 4px 0 #a92b70; }.refresh-button:active { transform: translateY(2px); box-shadow: 0 1px 0 #a92b70; }.refresh-button:disabled { cursor: wait; opacity: .72; }.refresh-button span { display: inline-block; line-height: 1; }.refresh-button.loading span { animation: icon-spin .8s linear infinite; }@keyframes icon-spin { to { transform: rotate(360deg); } }
.board-meta { min-height: 46px; padding: 0 22px; display: flex; justify-content: space-between; align-items: center; color: var(--muted); background: #e7e9ea; border-bottom: 2px solid #c4c9cc; font-size: 11px; font-weight: 800; }.board-meta > span:last-child { display: flex; align-items: center; gap: 10px; }
.table-wrap { position: relative; min-height: 280px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }th { height: 41px; padding: 0 24px; color: #737b82; background: #f4f5f5; text-align: left; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }td { height: 65px; padding: 0 24px; border-top: 1px solid #d9dddf; font-size: 14px; }tbody tr:nth-child(even) { background: rgba(0,197,215,.045); }tbody tr:hover { background: rgba(255,228,33,.14); }td:first-child { width: 95px; color: var(--cyan-deep); font-family: Impact, sans-serif; font-size: 22px; }.player-cell { display: flex; align-items: center; gap: 13px; font-weight: 900; }.score-cell { font-family: Impact, "Arial Narrow", sans-serif; font-size: 22px; letter-spacing: .04em; }
.empty-state, .loading-state { position: absolute; inset: 41px 0 0; padding: 45px 24px; display: grid; place-content: center; justify-items: center; text-align: center; background: rgba(247,248,248,.95); }.empty-state[hidden], .loading-state[hidden] { display: none; }.empty-state h3 { margin: 0 0 7px; font-family: Impact, sans-serif; font-size: 27px; text-transform: uppercase; }.empty-state p { max-width: 500px; margin: 0; color: var(--muted); }
.loading-state { grid-template-columns: repeat(3, 10px); gap: 8px; }.loading-state > span { width: 10px; height: 10px; background: var(--pink); transform: rotate(45deg); animation: bounce 1s infinite; }.loading-state > span:nth-child(2){animation-delay:.15s}.loading-state > span:nth-child(3){animation-delay:.3s}.loading-state p { grid-column: 1/-1; color: var(--muted); font-weight: 800; }@keyframes bounce { 50% { transform: rotate(45deg) translate(-6px,-6px); } }

.bottom-ribbon { min-height: 68px; padding: 0 clamp(20px, 4vw, 68px); display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: center; color: #fff; background: rgba(37,57,71,.97); border-top: 4px solid var(--pink); font-size: 10px; font-weight: 900; letter-spacing: .07em; }.bottom-ribbon a { padding: 12px 27px; color: #fff; background: var(--blue); font-size: 13px; text-transform: uppercase; transform: skew(-5deg); }.bottom-ribbon strong { justify-self: end; font-family: Impact, sans-serif; font-size: 25px; text-transform: uppercase; }

/* About */
.about-screen { width: min(1100px, calc(100% - 40px)); }.about-heading { align-items: center; }.decor-gem { width: 90px; height: 90px; transform: rotate(10deg); }
.about-hero { padding: 48px 54px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center; }.section-tag { color: var(--cyan-deep); text-shadow: none; }.about-hero h2, .why-card h2, .section-banner h2 { margin: 8px 0 18px; font-family: Impact, sans-serif; font-size: clamp(36px,5vw,58px); line-height: 1; text-transform: uppercase; }.about-hero h2 span { color: var(--pink); }.about-hero p:last-child, .why-card p, .steps-grid p, .privacy-panel p { color: var(--muted); line-height: 1.65; }
.compat-list { margin: 0; border: 2px solid #b9c0c4; box-shadow: 6px 6px 0 #d7dbdd; }.compat-list div { padding: 13px 16px; display: grid; grid-template-columns: 110px 1fr; gap: 12px; background: #fff; }.compat-list div + div { border-top: 1px solid #d5dadd; }.compat-list dt { color: var(--cyan-deep); font-size: 10px; font-weight: 900; text-transform: uppercase; }.compat-list dd { margin: 0; font-size: 13px; font-weight: 800; }
.how-section { margin-top: 40px; }.section-banner { width: min(620px, 82%); padding: 16px 36px 13px; color: #fff; background: var(--pink); border: 5px solid #fff; outline: 2px solid rgba(43,65,77,.25); clip-path: polygon(12px 0,100% 0,calc(100% - 14px) 100%,0 100%); text-shadow: 0 3px 0 rgba(0,0,0,.2); }.section-banner small { font-weight: 900; letter-spacing: .14em; }.section-banner h2 { margin: 2px 0 0; font-size: 37px; }
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 16px; border: 5px solid #fff; outline: 2px solid rgba(43,65,77,.25); box-shadow: var(--shadow); }.steps-grid article { position: relative; min-height: 270px; padding: 30px; background: rgba(249,250,250,.97); }.steps-grid article + article { border-left: 2px solid #cfd4d6; }.steps-grid article.featured { background: linear-gradient(150deg,#fff 0 58%,rgba(255,228,33,.55)); }.steps-grid article > b { position: absolute; right: 22px; top: 15px; color: #c8ced1; font-family: Impact,sans-serif; font-size: 40px; }.step-symbol { width: 50px; height: 50px; display: grid; place-items: center; color: #fff; background: var(--cyan); font-size: 27px; transform: rotate(-4deg); }.steps-grid h3 { margin: 35px 0 8px; font-family: Impact,sans-serif; font-size: 25px; text-transform: uppercase; }
.why-card { position: relative; min-height: 340px; margin-top: 42px; padding: 55px 60px 48px 32%; overflow: hidden; color: #fff; background: linear-gradient(115deg,#174e78,#642b78 58%,#d12a91); border: 6px solid #fff; outline: 2px solid rgba(43,65,77,.3); box-shadow: var(--shadow); }.why-card .section-tag { color: var(--yellow); }.why-card h2 { font-size: 66px; }.why-card blockquote { margin: 0 0 18px; font-size: clamp(20px,2.5vw,29px); font-weight: 900; line-height: 1.35; }.why-card p:last-child { color: rgba(255,255,255,.76); }.giant-question { position: absolute; left: 6%; top: 50%; color: var(--yellow); font-family: Impact,sans-serif; font-size: 270px; line-height: .8; transform: translateY(-50%) rotate(-8deg); text-shadow: 10px 10px 0 var(--pink); }
.privacy-panel { margin-top: 35px; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }.privacy-panel > div { padding: 24px; background: rgba(249,250,250,.96); border: 4px solid #fff; outline: 2px solid rgba(43,65,77,.23); box-shadow: 0 7px 0 rgba(35,81,95,.2); }.privacy-panel > div > span { color: var(--pink); font-size: 25px; }.privacy-panel h3 { margin: 12px 0 6px; font-family: Impact,sans-serif; font-size: 21px; text-transform: uppercase; }.privacy-panel p { margin: 0; font-size: 13px; }

@media (max-width: 1050px) {
  .leaderboard-panel .panel-title { grid-template-columns: auto 1fr; }
  .board-controls { grid-column: 1/-1; }
}
@media (max-width: 850px) {
  .topbar { grid-template-columns: 1fr auto; }.topbar nav { display: none; }.server-state,.back-link { grid-column: 2; grid-row: 1; }
  .content-grid { grid-template-columns: 1fr; }.score-stats { grid-template-columns: repeat(3,1fr); }.panel-title time { display: none; }
  .about-hero { grid-template-columns: 1fr; gap: 25px; }.steps-grid { grid-template-columns: 1fr; }.steps-grid article + article { border-left: 0; border-top: 2px solid #cfd4d6; }.why-card { padding-left: 42%; }.privacy-panel { grid-template-columns: 1fr; }
}
@media (max-width: 590px) {
  .topbar { min-height: 66px; padding-inline: 16px; }.logo { font-size: 20px; }.server-state span:last-child { display: none; }
  .game-screen,.about-screen { width: min(100% - 22px,1180px); padding-top: 28px; }.screen-heading { min-height: 105px; }.screen-heading h1 { font-size: 38px; }
  .panel-title { padding: 12px; grid-template-columns: auto 1fr; }.panel-icon { width: 42px; height: 42px; }.panel-title h2 { font-size: 23px; }.online-player { grid-template-columns: 1fr; gap: 4px; }.online-player small { white-space: normal; }.score-stats { grid-template-columns: 1fr; }.stat-tile { min-height: 68px; }
  .leaderboard-panel .panel-title { grid-template-columns: auto 1fr; }.board-controls { grid-column: 1/-1; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 47px; }.song-filter { grid-column: 1/-1; }.board-meta { align-items: flex-start; flex-direction: column; justify-content: center; gap: 4px; }th,td { padding-inline: 13px; }th:last-child,td:last-child { display:none; }
  .bottom-ribbon { padding: 12px 16px; grid-template-columns: 1fr auto; }.bottom-ribbon > span { display:none; }.bottom-ribbon strong { font-size: 20px; }
  .about-hero { padding: 32px 25px; }.compat-list div { grid-template-columns: 1fr; gap: 3px; }.section-banner { width: 96%; padding-inline: 22px; }.why-card { padding: 220px 26px 35px; }.giant-question { left: 50%; top: 45px; transform: translateX(-50%) rotate(-8deg); font-size: 180px; }.why-card h2 { font-size: 50px; }
}

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }