/* fonts served from this site (SIL Open Font License), latin subset */
@font-face { font-family:"Rubik"; font-weight:300 900; font-display:swap; src:url(fonts/rubik.woff2) format("woff2") }
@font-face { font-family:"JetBrains Mono"; font-weight:100 800; font-display:swap; src:url(fonts/jetbrainsmono.woff2) format("woff2") }
@font-face { font-family:"Silkscreen"; font-weight:400; font-display:swap; src:url(fonts/silkscreen-400.woff2) format("woff2") }
@font-face { font-family:"Silkscreen"; font-weight:700; font-display:swap; src:url(fonts/silkscreen-700.woff2) format("woff2") }
:root {
  --bg:#131315; --panel:#202024; --panel2:#29292e; --edge:#09090a; --hi:rgba(255,255,255,.07);
  --text:#ececec; --dim:#a4a4ad; --green:#5ccb2f; --gold:#ffc937; --red:#ff5555; --aqua:#55ffff;
  --px:"Silkscreen", ui-monospace, monospace; --sans:"Rubik", system-ui, "Segoe UI", sans-serif; --mono:"JetBrains Mono", ui-monospace, Consolas, monospace;
  color-scheme:dark;
}
* { box-sizing:border-box }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--bg) var(--stone, none) repeat; background-size:96px; color:var(--text); font:15px/1.45 var(--sans) }
main { flex:1; align-content:start }
a { color:inherit; text-decoration:none }
p a, .help a, .text a { color:var(--gold); text-decoration:underline }
button, input, select, textarea { font:inherit; color:inherit }
:focus-visible { outline:2px solid var(--gold); outline-offset:2px }
.wrap { max-width:1180px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)) }
.mono { font-family:var(--mono) } .dim { color:var(--dim) } .num { font-variant-numeric:tabular-nums }
h1, h2, h3 { margin:0; line-height:1.15; font-weight:800 }
h1 { font-size:30px } h2 { font-size:19px } h3 { font-size:16px }
.px { font-family:var(--px); text-transform:uppercase; letter-spacing:.02em }

.box { background:var(--panel); border:2px solid var(--edge); box-shadow:inset 2px 2px 0 var(--hi), inset -2px -2px 0 rgba(0,0,0,.35) }
.mcbtn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 16px; font:400 13px var(--px); text-transform:uppercase; color:#fff; text-shadow:2px 2px 0 #3a3a3a;
  background:#6c6c6c; border:2px solid #000; box-shadow:inset 2px 2px 0 #a9a9a9, inset -2px -3px 0 #484848; cursor:pointer; white-space:nowrap; text-decoration:none }
.mcbtn:hover { background:#7e86b9; box-shadow:inset 2px 2px 0 #b5bce8, inset -2px -3px 0 #545b8a }
.mcbtn.go, .mcbtn.on { background:#3c8527; box-shadow:inset 2px 2px 0 #6cc349, inset -2px -3px 0 #275a18; text-shadow:2px 2px 0 #1f4a12 }
.mcbtn.go:hover { background:#4aa02f }
.mcbtn.red { background:#8a2a22; box-shadow:inset 2px 2px 0 #c45348, inset -2px -3px 0 #551711 }
.mcbtn.sm { padding:4px 9px; font-size:11px }
.mcbtn.big { padding:12px 26px; font-size:16px }
.linkbtn { background:none; border:0; padding:0; color:var(--dim); cursor:pointer; font:400 11px var(--px); text-transform:uppercase }
.linkbtn:hover { color:#fff }

.grass { height:12px; background:var(--grass, #4f7d2b) repeat-x; background-size:24px 24px; image-rendering:pixelated }
header { background:#1a1a1d; border-bottom:2px solid var(--edge) }
header .top { display:flex; align-items:center; gap:16px; padding-block:12px }
.logo { display:flex; align-items:center; gap:10px; font:800 22px var(--sans); white-space:nowrap; flex:none }
.logo img { width:30px; height:30px; image-rendering:pixelated }
.logo b { color:var(--green) }
.hsearch { display:flex; min-width:0; flex:1 1 auto; max-width:420px; margin-left:auto }
.hsearch input { width:100%; min-width:0; padding:8px 10px; background:#000; border:2px solid #555; outline:0 }
.hsearch input:focus { border-color:var(--gold) }
.user { display:flex; gap:10px; align-items:center; flex:none }
.user form { margin:0; display:inline }
.navbar { background:#141416; border-top:2px solid var(--edge) }
.mainnav { display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; white-space:nowrap }
.mainnav::-webkit-scrollbar { display:none }
.mainnav a { padding:10px 10px; font:400 12px var(--px); text-transform:uppercase; color:var(--dim); border-bottom:2px solid transparent; flex:none }
.mainnav a:hover { color:#fff } .mainnav a.on { color:var(--gold); border-bottom-color:var(--gold) }
.mainnav a.add { margin-left:auto; color:var(--green) }

main { padding-block:22px 60px; display:grid; gap:22px }
section { display:grid; gap:10px }
.flash { display:grid; gap:6px }
.flash div { padding:10px 14px; background:#2a2412; border:2px solid #5a4612; font-size:14px }
.flash a { color:var(--gold); text-decoration:underline; overflow-wrap:anywhere }

.stats { display:flex; gap:28px; flex-wrap:wrap; padding:12px 16px }
.stats div { display:grid } .stats b { font:700 20px var(--px); color:var(--gold) } .stats span { font-size:12px; color:var(--dim) }
.titlebar { display:flex; justify-content:space-between; align-items:end; gap:14px; flex-wrap:wrap }
.tabs { display:flex; gap:6px; flex-wrap:wrap }
.modes { display:flex; gap:4px; flex-wrap:wrap }
.mode { padding:4px 9px; background:var(--panel2); border:2px solid var(--edge); font-size:13px; color:var(--dim) }
.mode:hover { color:#fff } .mode.on { color:#000; background:var(--gold) }

.sechead { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap }
.sechead .px { font-size:13px }
.list { display:grid; gap:6px }
.row { display:grid; grid-template-columns:44px 52px minmax(0, 1fr) 210px 150px 96px; gap:14px; align-items:center; padding:10px 12px }
.row.spon { border-color:#5a4612; background:#26231b }
.rank { width:40px; height:40px; display:grid; place-items:center; font:700 16px var(--px); background:var(--panel2); border:2px solid var(--edge); box-shadow:inset 2px 2px 0 var(--hi) }
.r1 { background:#e6b422; color:#2a1d00 } .r2 { background:#c4c9cf; color:#1b1e22 } .r3 { background:#c8773d; color:#2a1405 }
.rank.star { background:#5a4612; color:var(--gold) }
.sicon { width:48px; height:48px; image-rendering:pixelated; border:2px solid var(--edge); background:#000 }
.mid { min-width:0; display:grid; gap:6px }
.bl { display:block; min-width:0 }
.banner { display:block; width:100%; max-width:468px; aspect-ratio:468/60; height:auto; image-rendering:pixelated; border:1px solid #000 }
.banner-ph { display:grid; place-items:center; background:#1b1b1e var(--stone, none); background-size:48px; font:700 18px var(--px); color:#fff; text-shadow:2px 2px 0 #000; overflow:hidden; white-space:nowrap }
.sname { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap }
.sname a { font-weight:700; font-size:16px } .sname a:hover { color:var(--gold) }
.tag { font-size:12px; color:var(--dim) }
.plat { display:inline-block; padding:1px 6px; font:400 10px var(--px); text-transform:uppercase; border:1px solid currentColor }
.plat.java { color:#f0a35e } .plat.bedrock { color:var(--aqua) } .plat.cross { color:var(--green) }
.ipcell { display:grid; gap:5px; min-width:0 }
.ip { display:flex; gap:6px; align-items:center; min-width:0 }
.ip code { font:500 13px var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:#000; padding:4px 7px; flex:1; min-width:0 }
.players { display:grid; gap:4px; font-size:13px }
.players b { font-size:15px }
.bar { height:6px; background:#000; border:1px solid #333 } .bar i { display:block; height:100%; background:var(--green) }
.offline { color:var(--red) }
.empty { padding:26px; text-align:center; color:var(--dim) }
@media (max-width:980px) {
  .row { grid-template-columns:40px 48px minmax(0, 1fr); grid-template-areas:"r i n" "b b b" "ip ip ip" "p p v"; }
  .row .rank { grid-area:r } .row .sicon { grid-area:i } .row .mid { display:contents } .row .sname { grid-area:n } .row .bl { grid-area:b }
  .row .ipcell { grid-area:ip } .row .players { grid-area:p } .row .vcell { grid-area:v; align-self:end }
}

.shead { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:16px; align-items:center; padding:16px }
.shead .sicon { width:72px; height:72px }
.shead .meta { display:grid; gap:6px; min-width:0 }
.bigbanner { width:100%; max-width:936px; height:auto; aspect-ratio:468/60; image-rendering:pixelated; border:2px solid var(--edge) }
.ipboxes { display:flex; gap:10px; flex-wrap:wrap }
.ipbox { display:flex; gap:10px; align-items:center; padding:8px 10px; min-width:0; max-width:100% }
.ipbox small { display:block; font:400 10px var(--px); text-transform:uppercase; color:var(--dim) }
.ipbox code { font:700 15px var(--mono); overflow-wrap:anywhere }
.cols { display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:16px; align-items:start }
.stack { display:grid; gap:16px; min-width:0 }
@media (max-width:900px) { .cols { grid-template-columns:minmax(0, 1fr) } .shead { grid-template-columns:auto minmax(0, 1fr) } .shead .mcbtn.big { grid-column:1 / -1 } }
.panel { padding:16px; display:grid; gap:12px; min-width:0 }
.panel p { margin:0 }
.panel h2, .panel h3 { font:700 14px var(--px); text-transform:uppercase; color:var(--gold) }
.desc { white-space:pre-line; overflow-wrap:anywhere }
.mp { background:#000; border:1px solid #808080; padding:6px; display:grid; grid-template-columns:64px minmax(0, 1fr) auto; gap:4px 8px; font:15px/1.25 var(--mono); overflow-x:auto }
.mp img { width:64px; height:64px; image-rendering:pixelated; grid-row:span 3 }
.mp .t { color:#fff } .mp .m { white-space:pre; color:#aaa; grid-column:2 / -1 } .mp .c { color:#aaa; display:flex; gap:6px; align-items:center; justify-content:end }
.strip { display:grid; grid-template-columns:repeat(30, 1fr); gap:2px }
.strip span { height:26px; background:#2b2b2b }
.legend { display:flex; justify-content:space-between; font-size:12px; color:var(--dim) }
.chart svg { width:100%; height:auto; display:block } .chart text { fill:var(--dim); font:11px var(--sans) }
.kv { display:grid; grid-template-columns:1fr auto; gap:7px 12px; margin:0; font-size:14px }
.kv dt { color:var(--dim) } .kv dd { margin:0; text-align:right; font-weight:700 }
.voters { margin:0; padding:0; list-style:none; display:grid; gap:5px; font-size:14px; counter-reset:v }
.voters li { display:grid; grid-template-columns:24px 1fr auto; gap:8px; counter-increment:v }
.voters li::before { content:counter(v); color:var(--dim); font:400 12px var(--px) }
.code { font:12px/1.5 var(--mono); background:#000; padding:8px; overflow-x:auto; white-space:pre; color:#ccc }

form.f, .f { display:grid; gap:14px }
label.fl { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:4px; row-gap:5px; font-size:14px; font-weight:500 }
label.fl > input, label.fl > select, label.fl > textarea, label.fl > .pw, label.fl > .help { flex-basis:100% }
label.fl input, label.fl select, label.fl textarea, .inp { padding:9px 10px; background:#000; border:2px solid #555; outline:0; font-weight:400; width:100%; min-width:0 }
label.fl input:focus, label.fl select:focus, label.fl textarea:focus, .inp:focus { border-color:var(--gold) }
.help { font-size:12px; color:var(--dim); font-weight:400 }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:12px }
.checks { display:flex; gap:6px; flex-wrap:wrap }
.checks label { display:flex; gap:5px; align-items:center; padding:4px 8px; background:var(--panel2); border:2px solid var(--edge); font-size:13px; cursor:pointer }
.checks label:has(input:checked) { background:var(--gold); color:#000 }
.checks input { margin:0 }
.ok { padding:14px; background:#1d3014; border:2px solid #3c8527; display:grid; gap:4px }
.bad { color:var(--red); font-size:13px; font-weight:500 }
.drop { display:grid; gap:6px; place-items:center; text-align:center; padding:20px; border:2px dashed #555; background:#000; cursor:pointer }
.drop.over { border-color:var(--gold) }
table { border-collapse:collapse; width:100%; font-size:14px }
th, td { text-align:left; padding:8px 10px; border-bottom:2px solid #000 }
th { font:400 11px var(--px); text-transform:uppercase; color:var(--dim) }
.r { text-align:right }
.tbl { overflow-x:auto }
.plans { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px }
.plans ul { margin:0; padding-left:18px; display:grid; gap:4px; font-size:14px }
.price { font:700 28px var(--px); color:#fff }
.big-num { font:700 26px var(--px); color:var(--gold) }
.calc { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; align-items:end }
.calc output { display:grid } .calc output small { font-size:12px; color:var(--dim) }
.text { max-width:70ch; display:grid; gap:8px } .text p { margin:0; color:#d0d0d6 }
.narrow { max-width:420px; width:100% }

footer { border-top:2px solid var(--edge); background:#1a1a1d; padding-block:18px; font-size:13px; color:var(--dim) }
footer .wrap { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap }
.toast { position:fixed; left:50%; bottom:max(20px, env(safe-area-inset-bottom)); transform:translateX(-50%); padding:10px 16px; background:#000; border:2px solid #808080; color:#fff; font-size:14px; z-index:9 }
.pw { position:relative; display:flex }
.pw input { padding-right:64px }
.pw button { position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:0; color:var(--dim); cursor:pointer; font:400 11px var(--px); text-transform:uppercase; padding:6px }
.pw button:hover { color:#fff }
.code-in { font:700 26px var(--mono); letter-spacing:.4em; text-align:center; max-width:240px }
.legal { max-width:75ch; display:grid; gap:10px } .legal h2 { font:700 15px var(--px); text-transform:uppercase; color:var(--gold); margin-top:12px }
.legal p, .legal li { color:#d0d0d6 } .legal ul { margin:0; padding-left:20px; display:grid; gap:4px }
.fnav { display:flex; gap:16px; flex-wrap:wrap } .fnav a { color:var(--dim); white-space:nowrap } .fnav a:hover { color:#fff }

/* add/edit form */
.frow { display:grid; gap:12px; align-items:start }
.frow.two { grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)) }
.frow.addr { grid-template-columns:minmax(0, 1fr) 120px }
.fieldset { display:grid; gap:10px; padding:12px; border:2px solid #000; background:rgba(0,0,0,.18) }
.fieldset > b { font-size:14px; font-weight:500 }
.opt, .req { font:400 10px var(--px); text-transform:uppercase; color:var(--dim); margin-left:4px }
.req { color:var(--gold) }
div.fl { display:grid; gap:5px; font-size:14px; font-weight:500 }
.tv { display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.tv .ok-msg { color:var(--green) } .tv .bad-msg { color:var(--red) }
input[type=number] { -moz-appearance:textfield; appearance:textfield }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0 }

/* searchable checkbox picker */
.picker { background:#000; border:2px solid #555 }
.picker[open] { border-color:var(--gold) }
.picker summary { text-align:left; padding:9px 34px 9px 10px; cursor:pointer; list-style:none; position:relative; color:var(--text); font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.picker summary::-webkit-details-marker { display:none }
.picker summary::after { content:"▾"; position:absolute; right:12px; top:8px; color:var(--dim) }
.picker summary.empty { color:#777 }
.pick-panel { display:grid; gap:10px; padding:10px; border-top:2px solid #333; max-height:340px; overflow-y:auto }
.pick-group { display:grid; gap:4px }
.pick-panel label[hidden], .pick-group[hidden] { display:none }
.checks label.full { opacity:.45; cursor:not-allowed }

/* homepage: all gamemodes */
.more { position:relative }
.more summary { list-style:none; cursor:pointer } .more summary::-webkit-details-marker { display:none }
.more summary::after { content:" ▾" }
.more-panel { position:absolute; z-index:5; top:calc(100% + 6px); left:0; width:min(640px, calc(100vw - 32px)); padding:12px; display:grid; gap:10px }

@media (max-width:640px) {
  header .top { flex-wrap:wrap; gap:10px }
  .hsearch { order:3; flex-basis:100%; max-width:none; margin-left:0 }
  .user { margin-left:auto }
  .logo { font-size:19px }
  h1 { font-size:24px }
  .stats { gap:18px } .stats b { font-size:16px }
  .titlebar .tabs { width:100% } .titlebar .tabs .mcbtn { flex:1; padding-inline:6px }
  .more-panel { position:fixed; left:16px; right:16px; top:auto; width:auto; max-height:70vh; overflow-y:auto }
  .shead { padding:12px; gap:12px } .shead .sicon { width:56px; height:56px }
  .panel { padding:12px }
  .frow.addr { grid-template-columns:minmax(0, 1fr) 96px }
  .cols { gap:12px }
  footer .wrap { flex-direction:column }
}
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.seo { margin-top:10px } .seo h2 { font:700 14px var(--px); text-transform:uppercase; color:var(--gold) } .seo p { color:var(--dim) }
nav.modes { display:flex }
.credchip { padding:4px 8px; font-size:11px; color:#2a1d00; background:var(--gold); border:2px solid #000; white-space:nowrap }
.credchip:hover { background:#ffd970 }
.credits-box { border-color:#5a4612; background:#26231b }
.plat.unclaimed { color:var(--dim); border-style:dashed }
.plat.console { color:#7cd67c; border-color:#3c8527 }
.console-box { border-color:#275a18 }
.steps { margin:0; padding-left:20px; display:grid; gap:10px }