/* Toxics Land 5.0 public site (10/24). Loaded after tokens.css + season.css on public.html.
   Layout: warm charcoal page, one accent (slime green, pumpkin in October). A simple top bar (Home, Servers, Wiki, Guides,
   Vote, Store, More), a photo hero on Home, wide server rows, a quick-link rail, and the same banner + footer on every page.
   Borders group things; no shadows except on what floats. Motion is kept to a few places and stops for reduced motion. */

:root { --w5: 1200px; --r5: 10px; }

/* ------------------------------------------------------------------ top bar */
:root[data-ui="3"] header.top5 { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: var(--t-bg); border-bottom: 1px solid var(--t-line); backdrop-filter: none; }
.top5 .top-in { display: flex; align-items: center; gap: 18px; min-height: 66px; }
.top5 .brand5 { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 8px; background: #14100c; flex: none; }
.top5 .brand5 img { height: 32px; width: auto; display: block; }
.top5 .nav5 { display: flex; align-items: center; gap: 2px; margin-right: auto; min-width: 0; }
.top5 .nav5 > a, .top5 .nav5 .dd > button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 11px; border-radius: 7px; color: var(--t-text2); font: 600 15px var(--t-font); text-decoration: none; background: none; border: 0; cursor: pointer; }
.top5 .nav5 > a:hover, .top5 .nav5 .dd > button:hover, .top5 .nav5 > a[aria-current="page"], .top5 .nav5 .dd.on > button { color: var(--t-text); background: var(--t-s2); }
.top5 .nav5 > a.n5-season { color: var(--t-acc); }
.top5 .nav5 .dd { position: relative; }
.top5 .acts5 { display: flex; align-items: center; gap: 8px; flex: none; }
.top5 .acts5 .nav-search { min-height: 44px; }
.top5 .play5 { min-height: 44px; }
@media (max-width: 1080px) { .top5 .nav5 > a.n5-opt { display: none; } }
@media (max-width: 880px) { .top5 .nav5 { display: none; } .top5 .top-in { justify-content: space-between; } .top5 .acts5 .qs-l, .top5 .acts5 kbd { display: none; } }

/* ------------------------------------------------------------------ page banners (.pb, made from every page's header): same frame everywhere */
:root[data-ui="3"] .pb {
  --acc-rgb: var(--t-acc-rgb); --acc: var(--t-acc); --acc2: var(--t-acc-hover); --btn: var(--t-acc); --btn-hover: var(--t-acc-hover); --btn-ink: var(--t-acc-ink);
  --art-bg: #0e0b09; --bg: #0e0b09; --card: #1b1713; --card2: #211c17; --card3: #29231d;
  background: #0e0b09; border: 1px solid var(--t-line); border-radius: var(--r5);
}
:root[data-ui="3"] .pb .eyebrow, :root .page-h .eyebrow { color: var(--t-acc); }
:root[data-ui="3"] .pb-art::after { background: rgba(14,11,9,.55); }
:root .page-h:not(.pb) { padding-bottom: 18px; margin-bottom: 26px; border-bottom: 1px solid var(--t-line); }
:root .page-h:not(.pb) h1 { font-size: clamp(32px, 4vw, 44px); }

/* ------------------------------------------------------------------ shared bits */
.h5 { display: grid; gap: 0; }
.h5 .eyebrow5 { font: 600 12px/1.2 var(--t-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t-acc); margin: 0 0 6px; }
.h5-sec { padding-block: clamp(36px, 5vw, 64px); }
.h5-sec-h { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 24px; margin-bottom: 22px; }
.h5-sec-h h2, :root[data-ui="3"] .h5-sec-h h2 { font: 700 clamp(28px, 3vw, 36px)/1.15 var(--t-display); margin: 0; text-wrap: balance; }
.h5-sec-h p { color: var(--t-text2); max-width: 58ch; margin: 0; }
.h5-go { display: inline-flex; align-items: center; gap: 6px; color: var(--t-acc); font-weight: 600; text-decoration: none; }
.h5-go:hover { text-decoration: underline; text-underline-offset: 3px; }
.h5-go .ic { width: 16px; height: 16px; }
.h5-copy { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--t-line2); border-radius: 8px; background: var(--t-bg); color: var(--t-text); font: 500 14.5px var(--t-mono); cursor: pointer; max-width: 100%; }
.h5-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h5-copy:hover { border-color: var(--t-acc); }
.h5-copy .ic { width: 16px; height: 16px; flex: none; }
[data-copy].h5-done { border-color: var(--t-ok) !important; }
.h5-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--t-ok); flex: none; }
.h5-dot.soon { background: var(--t-warn); }
.h5-dot.off { background: var(--t-off); }
@media (prefers-reduced-motion: no-preference) { .h5-dot:not(.soon):not(.off) { animation: h5-pulse 2.4s ease-out infinite; } }
@keyframes h5-pulse { 0% { box-shadow: 0 0 0 0 rgba(95,210,122,.45); } 100% { box-shadow: 0 0 0 9px rgba(95,210,122,0); } }

/* ------------------------------------------------------------------ home: hero (full bleed photo) */
#main.page.h5-page { max-width: none; padding-left: 0; padding-right: 0; padding-top: 0; }
.h5-page > .h5-band, .h5-page > .h5-wrap { width: 100%; }
.h5-wrap { max-width: var(--w5); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.h5-hero { position: relative; overflow: hidden; background: #0c0a08; border-bottom: 1px solid var(--t-line); color: #efe9df; }
.h5-hero-img { position: absolute; inset: 0; opacity: .55; }
.h5-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
.h5-hero::after { content: ""; position: absolute; inset: 0; background: rgba(12,10,8,.55); }
@media (min-width: 820px) { .h5-hero::after { background: linear-gradient(90deg, rgba(12,10,8,.94) 0%, rgba(12,10,8,.7) 45%, rgba(12,10,8,.15) 100%); } }
.h5-hero-in { position: relative; z-index: 2; display: grid; gap: 18px; max-width: 660px; padding-block: clamp(46px, 8vw, 96px); }
.h5-live { display: inline-flex; align-items: center; gap: 8px; font: 500 14px var(--t-mono); color: #cfc6b8; }
.h5-hero h1 { font: 700 clamp(40px, 6vw, 66px)/1.05 var(--t-display); margin: 0; text-wrap: balance; color: #f6f1e8; }
.h5-hero h1 em { font-style: normal; color: var(--t-acc); }
.h5-tag { font-size: 18px; color: #d8d0c3; max-width: 48ch; margin: 0; line-height: 1.6; }
.h5-ip { display: flex; flex-wrap: wrap; gap: 10px; }
.h5-ip code { display: inline-flex; align-items: center; min-height: 52px; padding: 0 16px; border: 1px solid rgba(239,233,223,.22); border-radius: 8px; background: rgba(0,0,0,.45); font: 500 17px var(--t-mono); color: #fff; overflow-wrap: anywhere; }
.h5-ip .btn { min-height: 52px; }
.h5-hero .btn:not(.primary) { background: rgba(0,0,0,.45); border-color: rgba(239,233,223,.22); color: #efe9df; }
.h5-sub { font-size: 14.5px; color: #b9b0a2; margin: 0; }
.h5-sub a { color: #efe9df; }
.h5-sub b { color: #efe9df; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .h5-hero-img { animation: h5-drift 38s ease-in-out infinite alternate; }
  .h5-hero-in > * { animation: h5-rise .6s cubic-bezier(.2,.7,.2,1) both; }
  .h5-hero-in > *:nth-child(2) { animation-delay: .06s; } .h5-hero-in > *:nth-child(3) { animation-delay: .12s; }
  .h5-hero-in > *:nth-child(4) { animation-delay: .18s; } .h5-hero-in > *:nth-child(5) { animation-delay: .24s; }
}
@keyframes h5-drift { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.12) translate(-2.5%, -1.5%); } }
@keyframes h5-rise { from { transform: translateY(10px); } to { transform: none; } }

/* ------------------------------------------------------------------ quick-link rail */
.h5-rail { border-bottom: 1px solid var(--t-line); background: var(--t-s1); }
.h5-rail .h5-wrap { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.h5-rail a { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 14px; border-right: 1px solid var(--t-line); color: var(--t-text); text-decoration: none; min-width: 0; }
.h5-rail a:first-child { border-left: 1px solid var(--t-line); }
.h5-rail a:hover { background: var(--t-s2); }
.h5-rail a .ic { color: var(--t-acc); width: 22px; height: 22px; flex: none; }
.h5-rail b { display: block; font-weight: 600; }
.h5-rail small { display: block; color: var(--t-muted); font-size: 13px; line-height: 1.3; }
@media (max-width: 960px) { .h5-rail .h5-wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); } .h5-rail a { border-bottom: 1px solid var(--t-line); } .h5-rail a:nth-child(4) { border-left: 1px solid var(--t-line); } }
@media (max-width: 540px) { .h5-rail .h5-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } .h5-rail a:nth-child(odd) { border-left: 1px solid var(--t-line); } .h5-rail a:nth-child(4) { border-left: 0; } .h5-rail small { display: none; } }

/* ------------------------------------------------------------------ servers: wide rows, picture alternates sides */
.h5-srvs { display: grid; gap: 14px; }
.h5-srv { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); border: 1px solid var(--t-line); border-radius: var(--r5); overflow: hidden; background: var(--t-s1); }
.h5-srv:nth-child(even) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.h5-srv:nth-child(even) .h5-art { order: 2; }
.h5-art { position: relative; min-height: 240px; background: #0c0a08; overflow: hidden; }
.h5-art .h5-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease, transform 6s ease; }
.h5-art .h5-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h5-art .h5-slide.on { opacity: 1; }
.h5-art.logo { display: grid; place-items: center; padding: 22px; background: #0d1418; }
.h5-art.logo img { max-height: 150px; width: auto; max-width: 100%; transition: transform .5s ease; }
.h5-art .cap { position: absolute; left: 10px; bottom: 10px; z-index: 2; font: 500 11.5px var(--t-mono); background: rgba(0,0,0,.6); color: #d9d1c4; padding: 3px 7px; border-radius: 4px; }
.h5-art .dots { position: absolute; right: 10px; bottom: 12px; z-index: 2; display: flex; gap: 5px; }
.h5-art .dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.4); }
.h5-art .dots i.on { background: #fff; }
.h5-body { display: grid; gap: 12px; align-content: start; padding: 22px 24px; min-width: 0; }
.h5-srv-t { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.h5-srv-t h3 { font: 700 30px/1.1 var(--t-display); margin: 0; display: flex; align-items: center; gap: 10px; }
.h5-st { display: inline-flex; align-items: center; gap: 7px; font: 500 13px var(--t-mono); color: var(--t-text2); }
.h5-test { margin: 6px 0 0; font-size: 14px; color: var(--t-text2); }   /* 10/25: "Open for testing" line under a server's blurb */
.h5-test b { color: var(--t-text); font-weight: 600; }
.h5-new { font: 600 11px var(--t-mono); letter-spacing: .06em; text-transform: uppercase; background: var(--t-acc); color: var(--t-acc-ink); padding: 2px 7px; border-radius: 4px; }
.h5-body > p { margin: 0; color: var(--t-text2); }
.h5-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.h5-chips li { font-size: 13px; padding: 2px 9px; border: 1px solid var(--t-line2); border-radius: 999px; color: var(--t-text2); }
.h5-heads { display: flex; align-items: center; gap: 4px; min-height: 26px; flex-wrap: wrap; }
.h5-heads a, .h5-heads img { width: 24px; height: 24px; border-radius: 4px; display: block; }
.h5-heads .more { font: 500 12.5px var(--t-mono); color: var(--t-muted); margin-left: 4px; }
.h5-heads .none { font-size: 13.5px; color: var(--t-muted); }
.h5-srv-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--t-line); padding-top: 12px; margin-top: 2px; }
.h5-bed { font-size: 13px; color: var(--t-muted); margin: 0; }
.h5-bed code { font: 500 12.5px var(--t-mono); color: var(--t-text2); background: none; padding: 0; }
@media (prefers-reduced-motion: no-preference) {
  .h5-srv { transition: border-color .2s, transform .25s; }
  .h5-srv:hover { border-color: var(--t-line2); transform: translateY(-2px); }
  .h5-srv:hover .h5-slide.on, .h5-srv:hover .h5-art.logo img { transform: scale(1.05); }
}
@media (max-width: 780px) { .h5-srv, .h5-srv:nth-child(even) { grid-template-columns: 1fr; } .h5-srv:nth-child(even) .h5-art { order: 0; } .h5-art { min-height: 180px; } }

/* ------------------------------------------------------------------ this week strip */
.h5-week { border-block: 1px solid var(--t-line); background: var(--t-s1); }
.h5-week .h5-wrap { display: grid; grid-template-columns: auto repeat(var(--n, 3), minmax(0, 1fr)); }
.h5-week .wk-h { display: grid; align-content: center; padding: 16px 20px 16px 0; }
.h5-week .wk-h b { font: 700 22px var(--t-display); }
.h5-week .wk { display: grid; gap: 2px; padding: 14px 18px; border-left: 1px solid var(--t-line); min-width: 0; text-decoration: none; color: var(--t-text); }
.h5-week .wk:hover { background: var(--t-s2); }
.h5-week .wk small { color: var(--t-muted); font-size: 13px; }
.h5-week .wk .who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.h5-week .wk .who img { width: 22px; height: 22px; border-radius: 4px; flex: none; }
.h5-week .wk .who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h5-week .wk span.v { font: 500 13px var(--t-mono); color: var(--t-acc); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .h5-week .h5-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } .h5-week .wk-h { grid-column: 1 / -1; padding-bottom: 4px; } .h5-week .wk { border-left: 0; border-top: 1px solid var(--t-line); padding-left: 0; } }

/* ------------------------------------------------------------------ featured (event / launch / post) */
.h5-feat { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: start; border: 1px solid var(--t-line); border-radius: var(--r5); padding: 26px; background: var(--t-s1); }
:root[data-ui="3"] .h5-feat h2, .h5-feat h2 { font: 700 clamp(26px, 3vw, 34px)/1.15 var(--t-display); margin: 4px 0 10px; }
.h5-feat p { color: var(--t-text2); margin: 0 0 12px; }
.h5-feat ul { margin: 0 0 16px; padding-left: 18px; color: var(--t-text2); }
.h5-feat .cta { display: flex; flex-wrap: wrap; gap: 10px; }
.h5-feat table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.h5-feat caption { text-align: left; color: var(--t-muted); font-size: 13px; padding-bottom: 6px; }
.h5-feat td { padding: 7px 0; border-top: 1px solid var(--t-line); }
.h5-feat td.v { text-align: right; font-family: var(--t-mono); font-variant-numeric: tabular-nums; }
.h5-feat td a { display: inline-flex; align-items: center; gap: 8px; color: var(--t-text); text-decoration: none; }
.h5-feat td img { width: 20px; height: 20px; border-radius: 3px; }
@media (max-width: 820px) { .h5-feat { grid-template-columns: 1fr; padding: 20px; } }

/* ------------------------------------------------------------------ vote band */
.h5-vote { border-block: 1px solid var(--t-line); background: var(--t-s1); }
.h5-vote .h5-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; align-items: center; padding-block: clamp(32px, 5vw, 56px); }
:root[data-ui="3"] .h5-vote h2, .h5-vote h2 { font: 700 clamp(28px, 3vw, 36px)/1.15 var(--t-display); margin: 0 0 8px; }
.h5-vote p { color: var(--t-text2); margin: 0; }
.h5-bar { height: 8px; border-radius: 99px; background: var(--t-line); overflow: hidden; margin-top: 8px; }
.h5-bar i { display: block; height: 100%; background: var(--t-acc); transition: width 1.4s cubic-bezier(.2,.7,.2,1); }
.h5-party { margin-top: 18px; }
.h5-party .row5 { display: flex; justify-content: space-between; font-size: 14.5px; }
.h5-party .row5 span:last-child { font-family: var(--t-mono); color: var(--t-text2); }
.h5-vlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.h5-vlist li a { display: flex; align-items: center; gap: 12px; justify-content: space-between; min-height: 52px; padding: 8px 14px; border: 1px solid var(--t-line); border-radius: 8px; background: var(--t-bg); color: var(--t-text); text-decoration: none; }
.h5-vlist li a:hover { border-color: var(--t-acc); }
.h5-vlist .n { font: 500 13px var(--t-mono); color: var(--t-muted); width: 1.4rem; }
.h5-vlist .s { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h5-vlist .ic { color: var(--t-acc); width: 18px; height: 18px; }
@media (max-width: 820px) { .h5-vote .h5-wrap { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ join block: steps / facts / help */
.h5-join { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--t-line); border-radius: var(--r5); overflow: hidden; }
.h5-join > div { padding: 22px; border-right: 1px solid var(--t-line); display: grid; gap: 12px; align-content: start; min-width: 0; }
.h5-join > div:last-child { border-right: 0; }
:root[data-ui="3"] .h5-join h3, .h5-join h3 { font: 700 22px var(--t-display); margin: 0; }
.h5-steps { list-style: none; margin: 0; padding: 0; counter-reset: s5; display: grid; gap: 12px; }
.h5-steps li { counter-increment: s5; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 10px; line-height: 1.55; }
.h5-steps li::before { content: counter(s5); display: grid; place-items: center; height: 2rem; border: 1px solid var(--t-line2); border-radius: 6px; font: 700 18px var(--t-display); color: var(--t-acc); }
.h5-steps code, .h5-facts dd { font-family: var(--t-mono); font-size: 14px; }
.h5-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 15px; }
.h5-facts dt { color: var(--t-muted); }
.h5-facts dd { margin: 0; overflow-wrap: anywhere; }
.h5-join p { color: var(--t-text2); margin: 0; }
.h5-join .cta { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 960px) { .h5-join { grid-template-columns: 1fr; } .h5-join > div { border-right: 0; border-bottom: 1px solid var(--t-line); } .h5-join > div:last-child { border-bottom: 0; } }

/* ------------------------------------------------------------------ blog list on home */
.h5-posts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.h5-posts li { border-top: 1px solid var(--t-line); }
.h5-posts a { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 14px; padding: 13px 0; color: var(--t-text); text-decoration: none; }
.h5-posts a:hover b { color: var(--t-acc); }
.h5-posts time { font: 500 13px var(--t-mono); color: var(--t-muted); padding-top: 2px; }
.h5-posts b { display: block; font-weight: 600; }
.h5-posts span span { color: var(--t-text2); font-size: 14.5px; }
@media (max-width: 760px) { .h5-posts { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ footer */
:root footer.foot5 { border-top: 1px solid var(--t-line); background: var(--t-s1); padding-block: 40px 22px; margin-top: 40px; }
.foot5 .f5-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 24px; }
.foot5 .brand5 { display: inline-flex; padding: 4px 8px; border-radius: 8px; background: #14100c; }
.foot5 .brand5 img { height: 32px; width: auto; display: block; }
.foot5 h4 { font: 600 12px/1.2 var(--t-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t-muted); margin: 0 0 10px; }
.foot5 nav { display: grid; gap: 6px; }
.foot5 nav a { color: var(--t-text); text-decoration: none; font-size: 15px; }
.foot5 nav a:hover { color: var(--t-acc); }
.foot5 .f5-about { display: grid; gap: 12px; align-content: start; justify-items: start; }
.foot5 .f5-about p { color: var(--t-text2); font-size: 14.5px; margin: 0; }
.foot5 .f5-soc { display: flex; gap: 6px; }
.foot5 .f5-soc a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--t-line2); border-radius: 8px; color: var(--t-text2); }
.foot5 .f5-soc a:hover { color: var(--t-acc); border-color: var(--t-acc); }
.foot5 .f5-fine { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; border-top: 1px solid var(--t-line); margin-top: 28px; padding-top: 14px; color: var(--t-muted); font-size: 13px; }
.foot5 .f5-fine a { color: var(--t-muted); }
@media (max-width: 900px) { .foot5 .f5-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot5 .f5-about { grid-column: 1 / -1; } }
@media (max-width: 880px) { :root footer.foot5 { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } }

/* ------------------------------------------------------------------ "where to go next" after copying an address */
.n5 { position: fixed; z-index: 70; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: min(380px, calc(100vw - 32px)); background: var(--t-s2); border: 1px solid var(--t-line2); border-radius: var(--r5); box-shadow: var(--t-float); padding: 16px 18px; display: grid; gap: 10px; }
.n5 h3 { font: 700 20px var(--t-display); margin: 0; padding-right: 36px; }
.n5 p { margin: 0; color: var(--t-text2); font-size: 14.5px; }
.n5 ol { margin: 0; padding-left: 18px; color: var(--t-text2); font-size: 14.5px; display: grid; gap: 3px; }
.n5 code { font: 500 13.5px var(--t-mono); color: var(--t-text); background: none; padding: 0; }
.n5 .cta { display: flex; flex-wrap: wrap; gap: 8px; }
.n5 .x { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: none; color: var(--t-muted); cursor: pointer; border-radius: 6px; }
.n5 .x:hover { background: var(--t-s3); color: var(--t-text); }
@media (prefers-reduced-motion: no-preference) { .n5 { animation: h5-up .35s cubic-bezier(.2,.7,.2,1) both; } }
@keyframes h5-up { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 880px) { .n5 { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } }

/* ------------------------------------------------------------------ Halloween event page */
.hw5 { display: grid; gap: 28px; }
.hw5-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--t-line); border-radius: var(--r5); overflow: hidden; }
.hw5-top > div { padding: 16px 18px; border-right: 1px solid var(--t-line); }
.hw5-top > div:last-child { border-right: 0; }
.hw5-top small { display: block; color: var(--t-muted); font-size: 13px; }
.hw5-top b { font: 600 24px var(--t-mono); font-variant-numeric: tabular-nums; }
.hw5-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start; }
:root[data-ui="3"] .hw5 h2, .hw5 h2 { font: 700 26px/1.2 var(--t-display); margin: 0 0 10px; }
.hw5 .panel5 { border: 1px solid var(--t-line); border-radius: var(--r5); background: var(--t-s1); padding: 20px; min-width: 0; }
.hw5 .list5 { list-style: none; margin: 0; padding: 0; }
.hw5 .list5 li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--t-line); }
.hw5 .list5 li:first-child { border-top: 0; }
.hw5 .list5 b { font-weight: 600; }
.hw5 .list5 small { display: block; color: var(--t-text2); font-size: 14px; }
.hw5 .list5 .v { font: 500 13.5px var(--t-mono); color: var(--t-acc); white-space: nowrap; }
.hw5 .where { font: 500 12px var(--t-mono); color: var(--t-muted); text-transform: uppercase; letter-spacing: .06em; }
.hw5 .nights { border: 1px solid var(--t-acc); border-radius: var(--r5); padding: 18px 20px; display: grid; gap: 6px; background: rgba(var(--t-acc-rgb), .08); }
.hw5 .nights b { font: 700 22px var(--t-display); }
@media (max-width: 860px) { .hw5-cols { grid-template-columns: 1fr; } .hw5-top { grid-template-columns: 1fr; } .hw5-top > div { border-right: 0; border-bottom: 1px solid var(--t-line); } .hw5-top > div:last-child { border-bottom: 0; } }

/* Halloween page header: a banner like the other pages */
.hw5-pb .pb-art img { object-position: 50% 40%; }

/* 5.0b (10/24): the top bar squeezes itself instead of overlapping (fit5 in public.js adds c1..c6 in order) */
.top5 .nav5 { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; }
.top5 .nav5 > a { white-space: nowrap; }
.top5 .acts5 > * { flex: none; }
.top5.c1 .acts5 .qs-l, .top5.c1 .acts5 kbd { display: none; }
.top5.c2 #navStaff .nav-staff span { display: none; }
.top5.c3 #acct .avatar-btn .nm { display: none; }
.top5.c4 .nav5 > a.n5-opt { display: none; }
.top5.c5 .play5 .jl { display: none; }
.top5.c6 .nav5 > a.n5-sec { display: none; }
.top5:not(.c4) .nav5 .menu [data-opt], .top5:not(.c6) .nav5 .menu [data-sec] { display: none; }
@media (max-width: 1080px) { .top5 .nav5 .menu [data-opt] { display: flex; } }
/* fit5 owns the squeeze on 860px+; undo the older fixed breakpoints so nothing hides early or leaves an empty search box */
@media (min-width: 860px) {
  .top5 .acts5 .nav-search { min-width: 150px; padding: 0 8px 0 12px; }
  .top5 .acts5 .nav-search .qs-l, .top5 .acts5 .nav-search kbd { display: inline; }
  .top5 .acts5 .nav-staff { padding: 0 14px; }
  .top5 .acts5 .nav-staff span { display: inline; }
  .top5.c1 .acts5 .nav-search { min-width: 0; padding: 0 11px; }
  .top5.c1 .acts5 .nav-search .qs-l, .top5.c1 .acts5 .nav-search kbd { display: none; }
  .top5.c2 .acts5 .nav-staff { padding: 0 11px; }
  .top5.c2 .acts5 .nav-staff span { display: none; }
}

/* 10/24: tidier More menu - four labelled columns, icon + name rows, descriptions on hover */
.menu.mg.mg5 { width: min(860px, calc(100vw - 32px)); padding: 14px 14px 10px; max-height: min(78vh, 640px); overflow-y: auto; }
.menu.mg5 .mg5-extra:empty { display: none; }
.menu.mg5 .mg5-extra { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 6px; }
.menu.mg5 .mg5-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 14px; }
.menu.mg5 .mg5-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.menu.mg5 .mg5-h { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 2px 8px 6px; }
.menu.mg5 .mg5-col a { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 9px; min-width: 0; }
.menu.mg5 .mg5-col a .mi-ic { width: 26px; height: 26px; flex: none; }
.menu.mg5 .mg5-col a .mi-t { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu.mg5 .mg5-col a .mi-t small { display: none; }
@media (max-width: 900px) {
  .menu.mg.mg5 { width: min(560px, calc(100vw - 24px)); }
  .menu.mg5 .mg5-cols, .menu.mg5 .mg5-extra { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 10/25 Prison leaderboards (/leaderboards?server=prison) */
.pr-live { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; line-height: 1; padding: 3px 6px 2px; border-radius: 999px; color: var(--acc); background: rgba(var(--acc-rgb),.12); border: 1px solid rgba(var(--acc-rgb),.34); }
.pod .pr-live { margin: 2px 0 3px; }
@media (prefers-reduced-motion: no-preference) { .pr-live { animation: pr-live 1.8s ease-in-out infinite; } }
@keyframes pr-live { 50% { opacity: .45; } }
.pr-race { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; background: var(--card2); }
.pr-race-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; align-items: baseline; }
.pr-race-h span { font-size: 13px; font-variant-numeric: tabular-nums; }
.pr-prizes { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pr-prizes li { font-size: 13px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--text2); }
.pr-prizes li span { font-weight: 800; color: var(--acc); margin-right: 6px; }
.pr-race .tiny { margin: 8px 0 0; }
.pr-fame { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.pr-fame-h { margin: 0 0 10px; font-size: 15px; }
.pr-fame-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.pr-fame-c { flex: none; width: 128px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 10px 8px; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.pr-fame-c .head { width: 40px; height: 40px; border-radius: 8px; image-rendering: pixelated; }
.pr-fame-c b { font-size: 13.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-fame-c small { font-size: 12px; color: var(--text2); }
.pr-fame-c span { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }