:root { --page-x: max(28px, calc((100% - 1280px) / 2)); --ink: #f5f8f4; --muted: #b3beb6; --line: #ffffff20; --green: #9ce7a1; }
html { scroll-padding-top: 100px; }
body { line-height: 1.5; }
button, a, input, select, textarea { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 5px; }
.topbar { padding-top: max(18px, env(safe-area-inset-top)); padding-bottom: 18px; background: #090d0bbb; backdrop-filter: blur(18px); border-bottom: 1px solid #ffffff0b; }
.brand { gap: 10px; font-size: 15px; }
.brand img { width: 34px; height: 34px; filter: none; }
.server-state { min-height: 40px; box-shadow: none; font-size: 12px; background: #132019; }
.status-dot { box-shadow: none; }
.icon-button { box-shadow: none; background: transparent; }
.scene-shade { background: linear-gradient(90deg, #090d0be6, #090d0b60 40%, transparent 64%), linear-gradient(0deg, #090d0b 0%, transparent 30%); }
#world { background: #090d0b; }
.hero { min-height: max(660px, 93svh); padding-top: 100px; padding-bottom: 24px; grid-template-rows: 1fr auto auto; gap: 20px; }
.hero-copy { width: min(560px, 48%); padding: 44px 0; text-align: left; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; margin-bottom: 24px; }
.eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--green); }
h1 { font-size: 124px; line-height: 1; font-weight: 700; text-shadow: none; }
.player-line { margin-top: 28px; align-items: center; flex-wrap: wrap; gap: 12px; }
#count { font-size: 28px; font-variant-numeric: tabular-nums; }
.player-line span { font-size: 14px; font-weight: 450; max-width: 160px; }
.join-link { display: inline-flex; align-items: center; min-height: 46px; margin-top: 28px; padding: 10px 20px; border: 1px solid #9ce7a155; border-radius: 6px; color: #0d1c11; background: var(--green); font-size: 14px; font-weight: 750; text-decoration: none; }
.join-link:hover { background: #baf2bd; }
.modes { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); width: 100%; max-width: none; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); counter-reset: modes; padding: 0; overflow: visible; mask-image: none; }
.modes button { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; padding: 17px 20px; min-height: 92px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: #0d1510c9; font-size: 15px; backdrop-filter: blur(12px); }
.modes button::before { counter-increment: modes; content: '0' counter(modes); color: #84988b; font: 12px ui-monospace,monospace; }
.modes button:last-child { border-right: 0; }
.modes button:hover, .modes button:focus-visible { transform: none; background: #213427e6; color: #baf2bd; }
.scroll-cue { margin: 0; font-size: 12px; }
.scroll-arrow { border: 0; background: none; width: 22px; height: 22px; }
.connect-section { min-height: 92svh; padding-top: 100px; padding-bottom: 100px; }
.connect-copy { width: min(530px,46%); padding: 32px 0 32px 24px; background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; }
.connect-copy h2,.section-heading h2 { font-size: 52px; line-height: 1.08; }
.edition-list { gap: 0; margin-top: 34px; }
.edition { border-top: 1px solid var(--line); padding: 24px 0; }
.edition h3 { font-size: 18px; }
.edition p { font-size: 14px; line-height: 1.6; }
.pixel-icon { border-radius: 4px; box-shadow: none; }
.copy-address { min-height: 46px; border-radius: 6px; font-size: 14px; }
.leaderboard-section { background: #0d130ff5; padding-top: 76px; padding-bottom: 90px; border-top: 1px solid var(--line); }
.section-heading { margin-bottom: 36px; }
.section-heading>p { font-size: 14px; max-width: 300px; }
.leaderboard { border-radius: 0; border: 0; box-shadow: none; background: none; }
.leader-row { border-bottom: 1px solid #ffffff10; min-height: 76px; border-radius: 0; background: none; }
.leader-row:nth-child(-n+3) { background: #9ce7a108; }
.leader-position { color: #93a498; font-size: 18px; }
.leader-avatar { border-radius: 4px; box-shadow: none; }
.leader-score { font-size: 14px; font-variant-numeric: tabular-nums; }
.site-footer { background: #0d130f; border-top: 1px solid var(--line); font-size: 13px; }
dialog { color: var(--ink); background: #111a14; }
dialog::backdrop { background: #030805c9; backdrop-filter: blur(9px); }
.mode-dialog { border-radius: 8px; max-width: 920px; max-height: 90svh; }
.mode-title-wrap h2 { font-size: 50px; }
.mode-visual { min-height: 360px; }
.mode-title-wrap p:last-child { font-size: 14px; }
.mode-ranking { background: #111a14; }
.mode-ranking h3 { font-size: 19px; }
.report-dialog h2 { font-size: 36px; }
.report-dialog label { font-size: 14px; }
.report-dialog input,.report-dialog textarea,.report-dialog select { font-size: 16px; }
.report-dialog .submit-report { border-radius: 6px; }
body:has(dialog[open]) { overflow: hidden; }
html[data-webgl='unavailable'] #world { background: url('/assets/server-icon.png') 72% 36% / 220px no-repeat; }
@media(min-width:1800px) { h1 {font-size: 144px;} }
@media(max-width:1000px) and (min-width:761px) { h1 {font-size: 94px;} .modes button {padding: 14px 12px;} }
@media(max-width:760px) {
  :root { --page-x: 22px; }
  .brand span { display: inline; font-size: 13px; }
  .topbar {gap:8px; padding-top: 12px; padding-bottom: 12px; }
  .top-actions {gap:5px;} .server-state {min-height:34px;padding:6px 9px;font-size:11px;gap:6px;}
  .icon-button {width:34px;height:34px;}
  .hero {min-height:max(760px,94svh);padding-top:90px;gap:16px;}
  .hero-copy {align-self:start;width:100%;padding:22px 0;text-align:center;}
  h1 {font-size:86px;} .eyebrow {margin-bottom:15px;font-size:13px;}
  .player-line {justify-content:center;margin-top:18px;} #count {font-size:24px;}
  .player-line span {font-size:13px;white-space:normal;}
  .join-link {margin-top:18px;min-height:42px;}
  .scene-shade {background:linear-gradient(180deg,#090d0b66,transparent 35%,#090d0b77 80%,#090d0b);}
  .modes {grid-template-columns:repeat(4,minmax(0,1fr));width:100%;}
  .modes button {min-height:68px;font-size:13px;padding:11px 9px;gap:5px;border-bottom:1px solid var(--line);}
  .modes button:nth-child(4) {border-right:0;} .modes button::before{font-size:10px;}
  .scroll-cue {justify-self:center;}
  .connect-section {min-height:0;padding-top:58px;padding-bottom:64px;background:#090d0bf5;}
  .connect-copy {width:100%;padding:0;text-align:left;}
  .connect-copy h2,.section-heading h2 {font-size:40px;}
  .edition {grid-template-columns:42px minmax(0,1fr);justify-items:stretch;gap:14px;text-align:left;}
  .edition p{font-size:14px;} .copy-address{width:100%;font-size:13px;padding:10px;}
  .leaderboard-section{padding-top:48px;padding-bottom:50px;} .section-heading{text-align:left;gap:12px;}
  .section-heading>p{max-width:none;} .leader-row{grid-template-columns:25px 36px minmax(0,1fr) auto;gap:9px;padding:12px 4px;}
  .leader-avatar{width:34px;height:34px;} .leader-name{font-size:13px;overflow-wrap:anywhere;} .leader-score{font-size:12px;max-width:74px;}
  .mode-dialog{width:calc(100% - 20px);margin:auto;max-height:90svh;border:1px solid var(--line);border-radius:8px;}
  .mode-visual{min-height:340px;} .mode-title-wrap h2{font-size:40px;} .mode-ranking{padding:22px 16px;}
  .mode-ranking-heading{align-items:flex-start;gap:10px;} .mode-ranking-heading h3{font-size:16px;}
  .report-dialog{width:calc(100% - 20px);margin:auto;border-radius:8px;border:1px solid var(--line);}
}
@media(max-width:370px) { :root{--page-x:16px;} h1{font-size:74px;} .brand span{display:none;} }