/* Panel colour is a registered property so the whole hero (fill, text outline, button text) eases between states together. */
@property --panel { syntax: '<color>'; inherits: true; initial-value: #16c068; }
@property --burst { syntax: '<color>'; inherits: true; initial-value: #f3ffd8; }
@property --on-panel { syntax: '<color>'; inherits: true; initial-value: #ffffff; }

:root{
  --bg:#141414; --bg-2:#191817; --bg-3:#1f1e1c;
  --fg:#f0e3de; --fg-hi:#fffbf5; --fg-2:rgba(240,227,222,.68); --fg-3:rgba(240,227,222,.46);
  --line:rgba(240,227,222,.14); --hair:rgba(240,227,222,.10);
  --bronze:#f27a36; --bronze-hi:#ff9d5c; --bronze-ink:#2a1306;
  --up:#3ddc84; --down:#ff4d4d; --moving:#ffd23f; --unknown:#8d8d8d;
  --cream:#fffbf5;
  --f:'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --frame:1200px;
  color-scheme: dark;
}
body[data-state="up"]     { --panel:#16c068; --burst:#f3ffd8; --on-panel:#ffffff; --state:var(--up); }
body[data-state="down"]   { --panel:#f03e3e; --burst:#ffd7c4; --on-panel:#ffffff; --state:var(--down); }
body[data-state="moving"] { --panel:#ffcf2e; --burst:#fffdf0; --on-panel:#1d1704; --state:var(--moving); }
body[data-state="unknown"]{ --panel:#5f5e5c; --burst:#dcdad6; --on-panel:#ffffff; --state:var(--unknown); }
body{ transition: --panel .9s ease, --burst .9s ease, --on-panel .9s ease; }
body.notrans, body.notrans *{ transition:none !important; }

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--f); font-size:16px; line-height:1.4; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; letter-spacing:inherit; }
img{ display:block; }
h1,h2,h3,h4,p{ margin:0; }
svg.i{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* ---------- type ---------- */
.h1{ font-size:64px; line-height:.99; letter-spacing:-.03em; font-weight:560; text-wrap:balance; }
.h2{ font-size:48px; line-height:1.02; letter-spacing:-.03em; font-weight:500; text-wrap:balance; color:var(--fg); }
.h3{ font-size:28px; line-height:1.08; letter-spacing:-.025em; font-weight:500; }
.lede{ font-size:20px; line-height:1.25; letter-spacing:-.02em; color:var(--fg-2); text-wrap:balance; }
.t-title{ font-size:18px; line-height:1.25; font-weight:500; letter-spacing:-.02em; color:var(--fg); }
.t-body{ font-size:15.5px; line-height:1.4; color:var(--fg-2); }
.t-small{ font-size:14px; line-height:1.4; color:var(--fg-3); }
.link{ color:var(--bronze-hi); display:inline-flex; align-items:center; gap:6px; font-weight:500; }
.link svg{ width:16px; height:16px; transition:transform .16s; }
.link:hover svg{ transform:translateX(2px); }

/* ---------- buttons (pills only here and in nav) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:50px; padding:0 24px; border-radius:999px; border:1px solid transparent;
  font-size:16px; font-weight:500; letter-spacing:-.01em; white-space:nowrap; cursor:pointer;
  transition:opacity .16s, transform .16s, background-color .2s, border-color .2s; background:none;
}
.btn:active{ transform:translateY(1px); }
.btn-cream{ background:var(--cream); color:#141414; }
.btn-cream:hover{ opacity:.93; }
.btn-line{ border-color:var(--line); color:var(--fg); background:var(--bg-2); }
.btn-line:hover{ border-color:rgba(240,227,222,.3); }
.btn-dark{ background:#141414; color:var(--cream); }
.btn-dark:hover{ background:#000; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }
.btn svg{ width:18px; height:18px; }
.btn-sm{ height:38px; padding:0 15px; font-size:15.5px; }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:40; height:72px; background:var(--bg);
  display:flex; align-items:center; gap:24px; padding:0 20px;
}
.nav::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:repeating-linear-gradient(90deg, var(--line) 0 14px, transparent 14px 28px); }
.mark{ display:flex; align-items:center; gap:11px; flex:none; }
.mark svg{ width:32px; height:32px; }
.mark b{ font-family:'Archivo', var(--f); font-stretch:125%; font-weight:700; font-size:15.5px; letter-spacing:.15em; color:var(--fg-hi); line-height:1; }
.nav-links{ display:flex; gap:30px; margin:0 auto; }
.nav-links a{ font-size:16px; font-weight:500; color:var(--fg); opacity:.9; position:relative; padding:6px 0; }
.nav-links a:hover{ opacity:1; }
.nav-links a.on{ opacity:1; }
.nav-links a.on::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--fg); }
.nav-right{ display:flex; align-items:center; gap:8px; }
.state-link{ display:inline-flex; align-items:center; gap:7px; color:var(--state); font-size:16px; font-weight:500; margin-right:10px; transition:color .6s; }
.state-link svg{ width:16px; height:16px; }
.menu-btn{ display:none; width:40px; height:40px; border-radius:999px; border:1px solid var(--line); background:var(--bg-2); align-items:center; justify-content:center; cursor:pointer; }
.menu-btn svg{ width:18px; height:18px; }
.sheet{ position:fixed; inset:72px 0 0 0; z-index:39; background:var(--bg); padding:24px 20px; display:none; flex-direction:column; gap:4px; }
.sheet.open{ display:flex; }
.sheet a{ font-size:28px; letter-spacing:-.03em; font-weight:500; padding:12px 0; border-bottom:1px solid var(--hair); }
.sheet .btn{ margin-top:20px; }

/* ---------- blueprint frame ---------- */
.gutter{ position:relative;
  background-image:radial-gradient(circle, rgba(240,227,222,.075) 1px, transparent 1.4px);
  background-size:8px 8px; }
.frame{ position:relative; max-width:var(--frame); margin:0 auto; background:var(--bg); }
.frame::before,.frame::after{ content:""; position:absolute; top:0; bottom:0; width:1px; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(180deg, var(--line) 0 14px, transparent 14px 28px); }
.frame::before{ left:0; } .frame::after{ right:0; }
.sec{ position:relative; padding:120px 64px; }
.sec + .sec::before,.sec.ruled::before{ content:""; position:absolute; top:0; left:50%; width:100vw; transform:translateX(-50%); height:1px;
  background:repeating-linear-gradient(90deg, var(--line) 0 14px, transparent 14px 28px); }
.sec-head{ text-align:center; max-width:760px; margin:0 auto; }
.sec-head .lede{ margin-top:18px; }
.grid, .two{ overflow:visible; }
.pb{ position:absolute; width:11px; height:11px; transform:translate(-50%,-50%); z-index:3; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Ccircle cx='5.5' cy='5.5' r='4.75' fill='%23141414' stroke='%23585350'/%3E%3Cpath d='M.75 5.5h3M7.25 5.5h3' stroke='%23585350'/%3E%3Ccircle cx='5.5' cy='5.5' r='1.6' fill='%23141414' stroke='%23585350'/%3E%3C/svg%3E") center/11px 11px no-repeat; }

/* ---------- LED panel ---------- */
.panel{
  position:relative; isolation:isolate; overflow:hidden; border-radius:16px;
  background:var(--panel); color:var(--on-panel);
  box-shadow: 1px 6px 6px 0 rgba(255,255,255,.18) inset, 0 4px 12px rgba(0,0,0,.02);
}
.panel::before{ /* the soft centre lift Cloudflare gets from a blurred ellipse */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 75% at 50% 42%, rgba(255,255,255,.09), transparent 70%),
    linear-gradient(90deg, rgba(0,0,0,.07), transparent 14%, transparent 86%, rgba(0,0,0,.07));
}
.panel .burst{ position:absolute; left:50%; bottom:-2px; width:min(980px,120%); height:62%; transform:translateX(-50%); z-index:0; pointer-events:none;
  background:radial-gradient(34% 30% at 50% 100%, var(--burst) 0%, color-mix(in srgb, var(--burst) 70%, transparent) 26%, transparent 100%), radial-gradient(60% 70% at 50% 100%, color-mix(in srgb, var(--burst) 30%, transparent), transparent 70%);
  transition:opacity .9s; }
body[data-state="down"] .panel .burst{ opacity:.38; }
body[data-state="unknown"] .panel .burst{ opacity:.5; }
.panel canvas.led{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.panel.nocanvas{ background-image:radial-gradient(circle, rgba(0,0,0,.14) 1.2px, transparent 1.5px); background-size:5px 5px; }
.panel .on{ position:relative; z-index:2; }
.outline{ text-shadow:-1px -1px 0 var(--panel), 1px -1px 0 var(--panel), -1px 1px 0 var(--panel), 1px 1px 0 var(--panel), 0 0 6px var(--panel); }

/* ---------- hero ---------- */
.hero-wrap{ padding:8px 8px 12px; position:relative; }
.hero{ min-height:780px; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); align-items:center; padding:0 0 0 clamp(40px,6vw,96px); }
.hero .burst{ left:73%; width:880px; height:58%; }
.hero-copy{ padding:96px 0 104px; }
.hero-copy .logo{ width:560px; max-width:100%; height:auto; margin-left:-10px; }
.banner{ display:inline-flex; align-items:center; gap:14px; height:44px; padding:0 6px 0 18px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--on-panel) 45%, transparent); font-size:16.5px; font-weight:500; letter-spacing:-.015em; }
.banner .arr{ width:30px; height:30px; border-radius:999px; background:var(--on-panel); color:var(--panel); display:flex; align-items:center; justify-content:center; }
.banner .arr svg{ width:16px; height:16px; stroke-width:2; }
.hero h1{ margin-top:30px; font-size:54px; }
.hero .sub{ margin-top:16px; font-size:21px; line-height:1.28; letter-spacing:-.025em; max-width:540px; text-wrap:pretty; }
.hero .ctas{ display:flex; gap:8px; margin-top:32px; flex-wrap:wrap; }
.hero .btn-ghost{ border-color:color-mix(in srgb, var(--on-panel) 55%, transparent); color:var(--on-panel); }
.hero .btn-ghost:hover{ background:color-mix(in srgb, var(--on-panel) 10%, transparent); }
body[data-state="moving"] .hero .btn-cream{ background:#141414; color:var(--cream); }
.joinlink{ margin-top:18px; display:inline-flex; align-items:center; gap:8px; font-size:15px; letter-spacing:-.01em; }
.joinlink span{ opacity:.82; }
.joinlink button{ display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:4px 2px; cursor:pointer; color:inherit; font-weight:500; }
.joinlink button svg{ width:16px; height:16px; }
.joinlink button u{ text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--on-panel) 45%, transparent); }
.stage{ align-self:stretch; min-height:400px; }
.cap{ position:absolute; z-index:2; bottom:20px; font-size:14px; letter-spacing:-.01em; opacity:.85; }
.cap-l{ left:24px; } .cap-r{ right:24px; }

/* ---------- Roria map ---------- */
.map-wrap{ position:relative; max-width:1040px; margin:56px auto 0; }
.map{ position:relative; width:100%; aspect-ratio:1000/560; }
.callouts{ position:absolute; inset:0; pointer-events:none; }
.callouts .callout{ pointer-events:auto; }
.map canvas{ position:absolute; inset:0; width:100%; height:100%; }
.map svg.routes{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.pin{ position:absolute; transform:translate(-50%,-50%); z-index:2; display:flex; align-items:center; gap:10px; }
.pin .dot{ width:40px; height:40px; border-radius:50%; border:1px solid var(--bronze); background:var(--bg); color:var(--bronze-hi); display:flex; align-items:center; justify-content:center; flex:none; }
.pin .dot svg{ width:19px; height:19px; }
.pin.main .dot{ width:52px; height:52px; background:var(--bronze); color:#1a0c04; border:0; box-shadow:0 0 0 8px rgba(242,122,54,.18); }
.pin.main .dot svg{ width:22px; height:22px; stroke-width:1.7; }
.pin.town .dot{ width:9px; height:9px; border:0; background:var(--fg); }
.pin label{ font-size:14px; color:var(--fg); white-space:nowrap; letter-spacing:-.01em; text-shadow:0 0 2px #141414,0 0 4px #141414,0 0 8px #141414; }
.pin.town label{ display:none; }
.pin.left{ flex-direction:row-reverse; }
.pin.main{ flex-direction:column-reverse; gap:10px; transform:translate(-50%,calc(-100% + 26px)); }
.callout{ position:absolute; z-index:3; width:268px; padding:12px 14px 13px; border:1px dashed rgba(242,122,54,.75); background:rgba(20,20,20,.88); color:var(--bronze); }
.callout::before{ content:""; position:absolute; inset:-1px; pointer-events:none;
  --c:var(--bronze); --l:10px;
  background:
    linear-gradient(var(--c),var(--c)) 0 0/var(--l) 1.5px no-repeat, linear-gradient(var(--c),var(--c)) 0 0/1.5px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/var(--l) 1.5px no-repeat, linear-gradient(var(--c),var(--c)) 100% 0/1.5px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/var(--l) 1.5px no-repeat, linear-gradient(var(--c),var(--c)) 0 100%/1.5px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--l) 1.5px no-repeat, linear-gradient(var(--c),var(--c)) 100% 100%/1.5px var(--l) no-repeat; }
.callout b{ display:block; font-size:17px; font-weight:500; letter-spacing:-.02em; color:var(--bronze-hi); }
.callout span{ display:block; margin-top:3px; font-size:14px; line-height:1.35; color:rgba(242,122,54,.9); }

/* ---------- hairline card grid ---------- */
.grid{ position:relative; display:grid; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.grid.c3{ grid-template-columns:repeat(3,1fr); }
.grid > .cell{ padding:32px 32px 36px; border-right:1px solid var(--hair); }
.grid > .cell:last-of-type{ border-right:0; }
.cell > .i{ width:24px; height:24px; color:var(--fg); margin-bottom:20px; }
.cell .t-title{ margin-bottom:6px; }
.bleed{ margin:0 -64px; }

/* ---------- uptime bars ---------- */
.bars{ display:flex; gap:3px; height:40px; align-items:stretch; }
.bars i{ flex:1; border-radius:1.5px; background:var(--up); position:relative; transition:opacity .15s; }
.bars i.r{ background:var(--down); } .bars i.y{ background:var(--moving); } .bars i.g{ background:#3a3936; }
.bars:hover i{ opacity:.55; } .bars i:hover{ opacity:1; }
.bars-legend{ display:flex; justify-content:space-between; margin-top:12px; font-size:14px; color:var(--fg-3); }
.bars-legend .mid{ flex:1; margin:0 14px; align-self:center; height:1px; background:var(--hair); }
.tip{ position:fixed; z-index:60; pointer-events:none; background:var(--bg-3); border:1px solid var(--line); border-radius:6px; padding:8px 10px; font-size:13.5px; color:var(--fg); white-space:nowrap; display:none; }
.tip em{ font-style:normal; color:var(--fg-3); display:block; }
.uptime-box{ max-width:960px; margin:52px auto 0; }
.key{ display:flex; gap:20px; justify-content:center; margin-top:28px; font-size:14px; color:var(--fg-3); flex-wrap:wrap; }
.key span{ display:inline-flex; align-items:center; gap:7px; }
.key span::before{ content:""; width:9px; height:9px; border-radius:2px; background:var(--c); }

/* ---------- two-up ---------- */
.two{ display:grid; grid-template-columns:1fr 1fr; position:relative; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); margin-top:56px; }
.two > div{ min-height:520px; padding:48px; position:relative; }
.two > .news-cell{ border-right:1px solid var(--hair); }
.news-row{ display:grid; grid-template-columns:88px 1fr; gap:18px; padding:22px 0; border-top:1px solid var(--hair); }
.news-row:first-of-type{ border-top:0; padding-top:0; }
.news-row time{ font-size:14px; color:var(--fg-3); padding-top:2px; }
.news-row h4{ font-size:18px; font-weight:500; letter-spacing:-.02em; line-height:1.25; color:var(--fg); }
.news-row p{ margin-top:6px; font-size:15px; color:var(--fg-2); line-height:1.4; }
.news-row:hover h4{ color:var(--fg-hi); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px; }
.block{ background:var(--bronze); color:#1b0c03; overflow:visible !important; }
.block .h2{ color:#1b0c03; }
.block .meta{ margin-top:14px; font-size:18px; letter-spacing:-.02em; color:rgba(27,12,3,.78); }
.block .meta b{ font-weight:600; color:#1b0c03; }
.block .btn{ margin-top:30px; }
.peek{ position:absolute; z-index:4; pointer-events:none; overflow:hidden; }
.peek img{ position:absolute; left:0; width:100%; height:auto; }
.block .fineprint{ position:absolute; left:48px; right:48px; bottom:40px; display:flex; justify-content:space-between; gap:18px; font-size:14px; color:rgba(27,12,3,.72); border-top:1px solid rgba(27,12,3,.2); padding-top:16px; }

/* ---------- pages ---------- */
.page{ display:none; }
.page.show{ display:block; }
body.booted .page.show{ animation:fade .32s ease backwards; }
@keyframes fade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }
.page-head{ padding:96px 64px 64px; }
.page-head .h1{ font-size:56px; }
.page-head .lede{ margin-top:18px; max-width:620px; text-wrap:pretty; }
.stat-panel{ min-height:420px; padding:56px 56px 52px; display:flex; flex-direction:column; justify-content:flex-end; }
.stat-panel .h1{ max-width:680px; }
.stat-panel .sub{ margin-top:18px; font-size:20px; letter-spacing:-.02em; max-width:640px; line-height:1.3; text-wrap:pretty; }
.stat-panel .facts{ margin-top:30px; display:flex; flex-wrap:wrap; gap:6px 26px; font-size:15px; opacity:.88; max-width:620px; }
.rows{ border-top:1px solid var(--hair); }
.row{ display:grid; gap:24px; padding:24px 0; border-bottom:1px solid var(--hair); align-items:baseline; }
.out-row{ grid-template-columns:170px 1fr 120px; }
.out-row .sq{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:8px; vertical-align:1px; }
.out-row .dur{ text-align:right; color:var(--fg-2); font-size:15px; font-variant-numeric:tabular-nums; }
.out-row time{ color:var(--fg-3); font-size:15px; }
.game-row{ grid-template-columns:1fr 200px 220px; }
.game-row .cur{ color:var(--up); }
.split{ display:grid; grid-template-columns:300px 1fr; gap:48px; }
.split > h2{ position:sticky; top:110px; align-self:start; }

.pinned{ position:relative; background:var(--bronze); color:#1b0c03; padding:52px 48px 48px; display:grid; grid-template-columns:1fr 340px; gap:32px; align-items:center; margin-top:132px; }
.pinned .tag{ display:inline-flex; align-items:center; gap:7px; font-size:14.5px; color:#1b0c03; font-weight:500; margin-bottom:18px; }
.pinned .h3{ color:#1b0c03; }
.pinned .body{ color:rgba(27,12,3,.8) !important; }
.pinned .body strong{ color:#1b0c03; font-weight:600; }
.pinned .tag svg{ width:15px; height:15px; }
.pinned .h3{ font-size:36px; max-width:560px; }
.pinned p{ margin-top:16px; color:inherit; font-size:17px; max-width:560px; }
.pinned img{ position:absolute; right:36px; top:-118px; width:340px; height:340px; }
.post{ display:grid; grid-template-columns:200px 1fr; gap:24px; padding:36px 0; border-bottom:1px solid var(--hair); }
.post time{ color:var(--fg-3); font-size:15px; }
.post h3{ font-size:24px; font-weight:500; letter-spacing:-.025em; line-height:1.15; }
.post .body{ margin-top:12px; color:var(--fg-2); font-size:16.5px; max-width:640px; }
.post .body p + p{ margin-top:10px; }
.post .body strong{ color:var(--fg); font-weight:500; }

.verify-viz{ display:flex; align-items:center; margin:34px 0 30px; }
.vbox{ flex:1; border:1px dashed var(--line); border-radius:6px; padding:16px; display:flex; align-items:center; gap:12px; min-width:0; }
.vbox .av{ width:38px; height:38px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; }
.vbox small{ display:block; font-size:13px; color:var(--fg-3); }
.vbox b{ font-weight:500; font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.vlink{ width:64px; flex:none; position:relative; height:1px; background:repeating-linear-gradient(90deg, var(--bronze) 0 5px, transparent 5px 9px); }
.vlink span{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:30px; height:30px; border-radius:50%; border:1px solid var(--bronze); background:var(--bg); color:var(--bronze-hi); display:flex; align-items:center; justify-content:center; }
.vlink svg{ width:15px; height:15px; }

/* ---------- saves ---------- */
.save{ border:1px solid var(--hair); border-radius:12px; background:var(--bg-2); position:relative; }
.save-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding:32px 36px 28px; border-bottom:1px solid var(--hair); }
.save-top .h3{ font-size:32px; }
.save-top .when{ margin-top:8px; font-size:15.5px; color:var(--fg-2); }
.save-top .when b{ color:var(--up); font-weight:500; }
.save-body{ display:grid; grid-template-columns:320px 1fr; }
.facts-list{ padding:28px 36px 32px; border-right:1px solid var(--hair); }
.fact{ display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--hair); font-size:15.5px; }
.fact:last-child{ border-bottom:0; }
.fact span{ color:var(--fg-3); }
.fact b{ font-weight:500; color:var(--fg); text-align:right; }
.badges{ display:flex; gap:7px; margin-top:6px; }
.badges svg{ width:24px; height:24px; }
.party{ padding:28px 36px 32px; }
.party h4{ font-size:15.5px; font-weight:500; color:var(--fg-3); margin-bottom:16px; }
.slots{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.slot{ border:1px dashed var(--line); border-radius:8px; height:220px; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding-bottom:14px; overflow:hidden;
  background-image:radial-gradient(circle, rgba(240,227,222,.06) 1px, transparent 1.4px); background-size:6px 6px; }
.slot img{ image-rendering:pixelated; image-rendering:crisp-edges; margin-bottom:auto; margin-top:auto; max-width:92%; height:auto; }
.slot b{ font-size:15px; font-weight:500; }
.slot small{ font-size:13px; color:var(--fg-3); }
.slot.small{ height:132px; padding-bottom:0; }
.mini .save-body{ grid-template-columns:320px 1fr; }
.signin{ text-align:center; padding:96px 24px 104px; display:flex; flex-direction:column; align-items:center; }
.signin .h1{ font-size:56px; max-width:700px; }
.signin .sub{ margin-top:18px; font-size:20px; max-width:520px; letter-spacing:-.02em; line-height:1.3; }
.signin .btn{ margin-top:34px; }
.signin .fine{ margin-top:16px; font-size:14.5px; opacity:.82; }
.who{ display:flex; align-items:center; gap:14px; }
.who .av{ width:48px; height:48px; border-radius:50%; background:var(--cream); color:#141414; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:16px; letter-spacing:0; }

/* ---------- footer ---------- */
.foot{ position:relative; margin-top:150px; }
.foot-in{ position:relative; max-width:var(--frame); margin:0 auto; padding:72px 64px 40px; border-top:1px solid var(--hair); }
.foot-cols{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; }
.foot-cols h5{ margin:0 0 14px; font-size:15px; font-weight:500; color:var(--fg); }
.foot-cols a{ display:block; font-size:15px; color:var(--fg-2); padding:5px 0; }
.foot-cols a:hover{ color:var(--fg); }
.foot-legal{ margin-top:64px; padding-top:24px; border-top:1px solid var(--hair); display:flex; justify-content:space-between; gap:24px; font-size:13.5px; color:var(--fg-3); }
.snorlax{ position:absolute; right:80px; bottom:100%; width:250px; height:118px; }

/* ---------- dev toggle ---------- */
.dev{ position:fixed; right:14px; bottom:14px; z-index:80; font-size:13px; }
.dev > button{ height:30px; padding:0 12px; border-radius:999px; border:1px solid var(--line); background:var(--bg-2); color:var(--fg-3); cursor:pointer; font-size:13px; }
.dev .box{ display:none; position:absolute; right:0; bottom:38px; width:244px; background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:12px; }
.dev.open .box{ display:block; }
.dev .lbl{ color:var(--fg-3); margin:4px 0 6px; }
.dev .seg{ display:grid; grid-template-columns:repeat(2,1fr); gap:4px; margin-bottom:10px; }
.dev .seg button{ height:28px; border-radius:6px; border:1px solid var(--hair); background:none; cursor:pointer; font-size:13px; color:var(--fg-2); }
.dev .seg button.on{ background:var(--fg); color:#141414; border-color:var(--fg); }

/* ---------- responsive ---------- */
@media (max-width: 1100px){
  .nav-links{ gap:22px; }
  .state-link{ display:none; }
}
@media (max-width: 1100px){
  .hero{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
  .hero-copy .logo{ width:460px; }
}
@media (max-width: 900px){
  .nav-links, .nav-right .btn{ display:none; }
  .nav-right{ margin-left:auto; }
  .menu-btn{ display:inline-flex; }
  .sec{ padding:88px 28px; }
  .bleed{ margin:0 -28px; }
  .grid.c3{ grid-template-columns:1fr; }
  .grid > .cell{ border-right:0; border-bottom:1px solid var(--hair); }
  .grid > .cell:last-of-type{ border-bottom:0; }
  .two{ grid-template-columns:1fr; }
  .two > .news-cell{ border-right:0; border-bottom:1px solid var(--hair); }
  .split{ grid-template-columns:1fr; gap:28px; }
  .split > h2{ position:static; }
  .save-body, .mini .save-body{ grid-template-columns:1fr; }
  .facts-list{ border-right:0; border-bottom:1px solid var(--hair); }
  .foot-cols{ grid-template-columns:1fr 1fr; }
  .foot-cols > :first-child{ grid-column:1/-1; }
  .page-head{ padding:72px 28px 48px; }
}
@media (max-width: 640px){
  .nav{ padding:0 16px; height:64px; }
  .sheet{ inset:64px 0 0 0; }
  .mark svg{ width:28px; height:28px; }
  .mark b{ font-size:14px; letter-spacing:.13em; }
  .h1{ font-size:42px; line-height:1; }
  .h2{ font-size:34px; }
  .lede{ font-size:18px; }
  .hero-wrap{ padding:4px 4px 8px; }
  .panel{ border-radius:12px; }
  .hero{ min-height:0; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 18px; }
  .hero .burst{ left:50%; width:140%; height:34%; }
  .hero-copy{ padding:36px 0 0; display:flex; flex-direction:column; align-items:center; }
  .hero-copy .logo{ width:340px; margin:0; }
  .hero h1{ font-size:38px; margin-top:22px; }
  .stage{ width:100%; min-height:300px; align-self:auto; }
  .banner{ font-size:14.5px; height:40px; gap:10px; padding-left:14px; max-width:100%; }
  .banner .arr{ width:26px; height:26px; }
  .hero .sub{ font-size:18px; margin-top:16px; }
  .hero .ctas{ flex-direction:column; width:100%; margin-top:28px; }
  .hero .ctas .btn{ width:100%; }
  .cap{ bottom:14px; font-size:12.5px; } .cap-l{ left:16px; } .cap-r{ right:16px; }
  .sec{ padding:72px 16px; }
  .bleed{ margin:0 -16px; }
  .grid > .cell{ padding:26px 20px 28px; }
  .map-wrap{ margin-top:36px; }
  .pin label{ display:none; }
  .pin.main label, .pin.keep label{ display:block; font-size:12px; }
  .pin.main{ transform:translate(-50%,calc(-100% + 18px)); gap:6px; }
  .pin .dot{ width:28px; height:28px; } .pin .dot svg{ width:14px; height:14px; }
  .pin.main .dot{ width:36px; height:36px; box-shadow:0 0 0 5px rgba(242,122,54,.18);} .pin.main .dot svg{ width:17px; height:17px; }
  .pin.town .dot{ width:6px; height:6px; }
  .callouts{ position:static; display:grid; gap:10px; margin:24px 0 32px; }
  .callout{ position:relative !important; left:auto !important; top:auto !important; right:auto !important; width:auto; }
  .bars{ gap:1.5px; height:34px; }
  .two{ margin-top:40px; }
  .two > div{ padding:32px 20px; min-height:0; }
  .block{ padding-bottom:28px !important; }
  .block .fineprint{ position:relative; left:auto; right:auto; bottom:auto; margin-top:40px; flex-direction:column; gap:4px; }
  .two > .news-cell{ padding-bottom:132px !important; }
  .block .peek{ width:210px !important; height:98px !important; right:20px !important; }
  #commTwo > div:first-child{ padding-bottom:120px !important; border-right:0 !important; }
  .news-row{ grid-template-columns:1fr; gap:6px; }
  .page-head{ padding:56px 16px 40px; }
  .page-head .h1{ font-size:42px; }
  .stat-panel{ min-height:0; padding:40px 20px 270px; justify-content:flex-start; }
  .save .peek{ right:16px !important; width:170px !important; height:83px !important; }
  .stat-panel .h1{ font-size:40px; }
  .stat-panel .sub{ font-size:17px; }
  .stat-panel .facts{ font-size:14px; flex-direction:column; gap:4px; }
  .out-row{ grid-template-columns:1fr auto; gap:6px 16px; }
  .out-row time{ grid-column:1/-1; }
  .game-row{ grid-template-columns:1fr; gap:4px; }
  .pinned{ grid-template-columns:1fr; padding:28px 20px 8px; margin-top:96px; }
  .pinned .h3{ font-size:28px; }
  .pinned p{ font-size:16px; }
  .pinned img{ width:190px; height:190px; position:absolute; right:6px; top:-104px; margin:0; }
  .post{ grid-template-columns:1fr; gap:8px; padding:28px 0; }
  .post h3{ font-size:21px; }
  .save-top{ padding:24px 20px 20px; flex-direction:column; }
  .save-top .h3{ font-size:28px; }
  .facts-list, .party{ padding:20px; }
  .slot{ height:150px; }
  .slot.small{ height:96px; }
  .signin{ padding:56px 18px 250px; }
  .signin .h1{ font-size:40px; }
  .signin .sub{ font-size:17px; }
  .verify-viz .vlink{ width:34px; }
  .vbox{ padding:12px; gap:9px; } .vbox .av{ width:32px; height:32px; }
  .foot-in{ padding:64px 16px 32px; }
  .foot-legal{ flex-direction:column; }
  .snorlax{ right:16px; width:190px; height:90px; }
}
@media (prefers-reduced-motion: reduce){
  .page.show{ animation:none; }
  body{ transition:none; }
}

/* =====================================================================
   Additions for the live site (not in the mockup)
   ===================================================================== */
.empty{ padding:6px 0 26px; }
.empty .t-title{ color:var(--fg-2); }
.empty .t-body{ margin-top:6px; color:var(--fg-3); }
.empty-box{ border:1px dashed var(--line); border-radius:12px; padding:40px 36px; margin-top:56px; display:flex; gap:18px; align-items:flex-start; }
.empty-box .i{ width:24px; height:24px; color:var(--fg-3); margin-top:2px; }
.out-row.none{ grid-template-columns:1fr; }
a.btn.is-off{ opacity:.45; cursor:not-allowed; pointer-events:none; }
.post .body ul, .post .body ol, .pinned .body ul, .pinned .body ol{ margin:10px 0 0; padding-left:22px; }
.post .body li + li, .pinned .body li + li{ margin-top:4px; }
.post .body a, .pinned .body a{ color:var(--bronze-hi); text-decoration:underline; text-decoration-color:rgba(255,157,92,.4); text-underline-offset:3px; }
.pinned .body a{ color:#1b0c03; text-decoration-color:rgba(27,12,3,.45); }
.post .body em, .pinned .body em{ font-style:italic; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* plain pages: privacy, terms, 404 */
.prose{ max-width:720px; }
.prose h2{ font-size:24px; font-weight:500; letter-spacing:-.025em; line-height:1.2; color:var(--fg); margin-top:48px; }
.prose h2:first-child{ margin-top:0; }
.prose p, .prose li{ font-size:16.5px; line-height:1.5; color:var(--fg-2); }
.prose p{ margin-top:12px; }
.prose ul{ margin:12px 0 0; padding-left:22px; }
.prose li + li{ margin-top:6px; }
.prose a{ color:var(--bronze-hi); text-decoration:underline; text-decoration-color:rgba(255,157,92,.4); text-underline-offset:3px; }
.prose strong{ color:var(--fg); font-weight:500; }
.lost{ min-height:520px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:72px 56px; }
.lost .h1{ max-width:640px; }
.lost .sub{ margin-top:18px; font-size:20px; letter-spacing:-.02em; max-width:560px; line-height:1.3; }
.lost .ctas{ display:flex; gap:8px; margin-top:32px; flex-wrap:wrap; }
.lost .btn-ghost{ border-color:color-mix(in srgb, var(--on-panel) 55%, transparent); color:var(--on-panel); }
.lost .peek{ right:56px; bottom:0; width:300px; height:300px; }
@media (max-width: 640px){
  .empty-box{ padding:28px 20px; margin-top:40px; }
  .lost{ min-height:0; padding:48px 20px 240px; }
  .lost .ctas{ flex-direction:column; width:100%; } .lost .ctas .btn{ width:100%; }
  .lost .peek{ right:50%; transform:translateX(50%); width:220px; height:220px; }
  .prose h2{ margin-top:36px; font-size:21px; }
}

/* ?debug overlay */
.dbg{ position:fixed; left:14px; bottom:14px; z-index:90; max-width:min(560px, calc(100vw - 28px)); max-height:40vh; overflow:auto; background:#000; color:#9effb8; border:1px solid #3ddc84; border-radius:8px; padding:10px 12px; font:12.5px/1.4 ui-monospace, Consolas, monospace; }
.dbg.bad{ color:#ffb3b3; border-color:#ff4d4d; }
.dbg div + div{ margin-top:4px; border-top:1px solid #222; padding-top:4px; }

/* long text in the Community verify box must not widen the column on phones */
.two > div{ min-width:0; }
/* the 6px corner marks (.pb) on the frame edges must never make the viewport scroll sideways */
html{ overflow-x:clip; }

/* Sign in with Roblox */
.signin .sign-msg{ margin-top:22px; padding:10px 16px; border-radius:10px; background:rgba(20,20,20,.82); color:var(--cream); font-size:15px; max-width:520px; }
.signin .btn:not([disabled]){ cursor:pointer; }
.who .av{ overflow:hidden; }
.who .av img{ width:100%; height:100%; object-fit:cover; }
.del-req{ padding-top:72px; padding-bottom:88px; }
.slot .egg{ width:44px; height:56px; border-radius:50% 50% 46% 46% / 60% 60% 40% 40%; background:var(--cream); opacity:.85; margin:auto 0; }
.slot.small .egg{ width:26px; height:33px; }
@media (max-width: 640px){ .del-req{ padding-top:56px; padding-bottom:64px; } }