/* Pangobot. Warm neutrals + one amber accent. Flat surfaces, hairline borders, 6px corners.
   No gradients, glows, glass or pill shapes: the scale motif and the type carry the identity. */
:root {
  --bg: #100f0d; --panel: #181714; --panel-2: #1f1d19; --panel-3: #2a2721; --border: #36322a; --border-strong: #4a4539;
  --text: #ece7dc; --muted: #a39d8e; --faint: #8a8475; --ghost: #6f6a5e; --accent: #f2a541; --accent-ink: #1d1406;
  --ok: #6fbf8e; --danger: #e0695a; --info: #8fb0d9; --r: 6px;
  --display: Bahnschrift, "DIN Alternate", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --gold: #f5c451; /* the gem that marks a premium module: gold whatever accent a person picked */
  color-scheme: dark;
}
/* the quiet version of the accent (borders of tags and highlighted cards): derived, so that a
   person's own accent colour (Appearance) carries through. #6b4f23 is the same mix for the amber. */
:root { --accent-dim: #6b4f23; }
@supports (color: color-mix(in srgb, red, blue)) { :root { --accent-dim: color-mix(in srgb, var(--accent) 38%, var(--bg)); } }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
/* The room for the scrollbar is always kept free. A page that grows past the window (opening a
   settings section, a long module page) then gets its scrollbar without everything jumping
   sideways by its width - and short pages still show no scrollbar at all, just that empty strip. */
html { scrollbar-gutter: stable; }
/* Page skeleton: navbar, content that takes all spare height, footer. The footer therefore
   sits at the bottom of the window on short pages and after the content on long ones. */
body { display: flex; flex-direction: column; min-height: 100vh; overflow-x: clip; }
body > main, #app { flex: 1 0 auto; width: 100%; }
#app { display: flex; flex-direction: column; }
#app > .shell, #app > main { flex: 1 0 auto; }
body { background: var(--bg); color: var(--text); font: 15px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.1; margin: 0 0 .5em; letter-spacing: .005em; }
h1 { font-size: 2rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.05rem; letter-spacing: .02em; }
p { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--border); margin: 6px 0; }
.muted { color: var(--muted); } .small { font-size: .85rem; } .right { margin-left: auto; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.hidden { display: none !important; }
code, .mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .9em; }
code { background: var(--panel-3); padding: 1px 5px; border-radius: 3px; }
.eyebrow { font-family: var(--display); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }

/* icons: SVG files drawn as masks so they follow the text colour */
.ic { display: inline-block; width: 1.2em; height: 1.2em; flex: none; vertical-align: -.2em; background: currentColor;
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }

/* navbar */
.topbar { position: sticky; top: 0; z-index: 45; display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 20px; background: var(--bg); border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 9px; font: 700 1.25rem var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand img { width: 30px; height: 30px; }
/* "Pangobot" is three letters longer than the navbar of a small phone was built for */
@media (max-width: 400px) { .brand { font-size: 1.05rem; letter-spacing: .01em; gap: 7px; } }
@media (max-width: 345px) { .brand span { display: none; } }
.topnav { display: flex; align-items: center; gap: 4px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--panel-3); object-fit: cover; display: block; }
.account, .switcher { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--r); background: none; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.switcher { border-color: var(--border); background: var(--panel); padding: 0 10px; max-width: 100%; }
.switcher span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* when the navbar runs out of room, the server switcher gives way (its name is cut with an ellipsis) - nothing else */
.topbar > * { flex: none; }
.topbar > .switcher-wrap { flex: 0 1 auto; min-width: 0; max-width: 260px; }
.account:hover, .switcher:hover, .account[aria-expanded=true], .switcher[aria-expanded=true] { background: var(--panel-2); border-color: var(--border); }
.account .ic, .switcher .ic { color: var(--muted); font-size: .9rem; }
@media (max-width: 560px) { .account-name { display: none; } }
.gicon { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; flex: none; }
.gicon.ph { display: grid; place-items: center; background: var(--panel-3); font-size: .62rem; font-weight: 700; }
.dropdown { position: relative; }
.menu { position: absolute; top: calc(100% + 6px); min-width: 240px; max-height: 70vh; overflow-y: auto; padding: 6px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--r); box-shadow: 0 14px 30px rgba(0, 0, 0, .45); z-index: 40; }
.menu.right { right: 0; } .menu.left { left: 0; }
.menu.up { top: auto; bottom: calc(100% + 6px); }
.menu-head { display: flex; flex-direction: column; padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 4px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.menu-item:hover { background: var(--panel-3); text-decoration: none; }
.menu-item .ic { color: var(--muted); }
.menu-item.dim { color: var(--muted); }

/* dashboard layout */
/* Heights here are whatever is left over (flex), never 100vh arithmetic: sums of rounded
   pixel values end up 1px too tall at some zoom levels, and that 1px is a scrollbar. */
.shell { display: grid; grid-template-columns: 268px minmax(0, 1fr); background: linear-gradient(to right, var(--panel) 268px, transparent 268px); }
/* right-hand column of the dashboard: content on top, footer pinned to its bottom */
.content { display: flex; flex-direction: column; min-width: 0; }
.content > .main { flex: 1 0 auto; }
.sidebar { border-right: 1px solid var(--border); padding: 16px 12px 40px; position: sticky; top: 56px; align-self: start; max-height: calc(100vh - 58px); overflow-y: auto; scrollbar-width: thin; }
.sidebar h4 { margin: 20px 10px 6px; font: 700 .72rem var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.side-top { display: flex; gap: 8px; padding: 0 4px 6px; }
.find-wrap { position: relative; display: flex; align-items: center; margin: 0 4px 10px; }
.find-wrap > .ic { position: absolute; left: 11px; color: var(--faint); pointer-events: none; }
.find-wrap .find { width: 100%; padding-left: 34px; }
.main .find-wrap { margin: 6px 0 0; max-width: 520px; }
.found { display: block; font-size: .78rem; color: var(--accent); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .found { display: flex; align-items: center; gap: 6px; margin-top: -4px; }
.sidebar .no-match { margin: 4px 10px 10px; }
.nav { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: var(--r); color: var(--muted); font-weight: 600; }
.nav:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
.nav.active { background: var(--panel-3); color: var(--text); }
.nav.active .ic:first-child { color: var(--accent); }
.nav .end { margin-left: auto; display: flex; align-items: center; color: var(--faint); font-size: .85rem; }
.nav .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--danger); color: #fff; font-size: .72rem; font-weight: 700; display: grid; place-items: center; }
/* The dashboard uses the width it is given: tiles flow into 2, 3 or 4 columns. Forms and
   reading pages opt back into a comfortable measure with .narrow / .center. */
.main { padding: 34px clamp(18px, 3vw, 48px) 70px; max-width: 1720px; width: 100%; margin: 0 auto; }
.main.center { max-width: 1040px; }
.narrow { max-width: 1080px; width: 100%; margin-left: auto; margin-right: auto; }
.section-head { display: flex; align-items: baseline; gap: 12px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--border); }
.section-head h2 { margin: 0; }
.welcome + .section-head, .row + .section-head, .picker-list > .section-head:first-child { border-top: 0; padding-top: 0; margin-top: 18px; }
.card.guild.fresh { border-color: var(--accent); animation: fresh 2.4s ease 1; } .card.guild.fresh .small { color: var(--accent); }
@keyframes fresh { 0%, 40% { box-shadow: 0 0 0 3px var(--accent-dim); } 100% { box-shadow: 0 0 0 0 transparent; } }
/* (not ".picker": that name belongs to the role picker control further down) */
.grid.servers { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.welcome h1 { font-size: clamp(2rem, 4vw, 2.7rem); margin-bottom: .15em; }
.welcome h1 em { font-style: normal; color: var(--accent); }
.welcome p { font-size: 1.15rem; color: var(--muted); }
.footlinks { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--muted); font-weight: 600; }
.footlinks a { color: var(--muted); display: inline-flex; gap: 8px; align-items: center; }
.footlinks a:hover { color: var(--text); text-decoration: none; }

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: var(--r); border: 1px solid var(--border-strong); background: var(--panel-3); color: var(--text); font: 600 .95rem var(--body); cursor: pointer; white-space: nowrap; }
.btn:hover { background: #342f27; text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: #f7b65f; }
.btn.danger { background: transparent; border-color: #6b3a33; color: #f0998d; }
.btn.danger:hover { background: #2a1a17; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--text); background: var(--panel-2); }
.btn.sm { min-height: 28px; padding: 0 10px; font-size: .85rem; }
.btn.lg { min-height: 46px; padding: 0 22px; font-size: 1.02rem; }
.btn.icon-only { padding: 0; width: 36px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
input[type=text], input[type=number], input[type=password], input[type=tel], input[type=datetime-local], input[type=date], input[type=email], input[type=url], input[type=search], textarea, select {
  width: 100%; min-height: 36px; padding: 6px 10px; border-radius: var(--r); border: 1px solid var(--border-strong); background: var(--bg); color: var(--text); font: inherit;
}
input:focus-visible, textarea:focus-visible, select:focus-visible, .btn:focus-visible, .nav:focus-visible, .nav-toggle:focus-visible, .account:focus-visible, .switcher:focus-visible, .menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea { min-height: 84px; resize: vertical; }
input[type=color] { width: 44px; height: 36px; padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--bg); }
input:disabled, textarea:disabled, select:disabled { opacity: .55; }
/* A <label> is inline by default and would ignore width/height - it must be a box. */
.switch { position: relative; display: inline-block; vertical-align: middle; width: 42px; height: 24px; flex: none; cursor: pointer; }
.switch input { opacity: 0; width: 100%; height: 100%; margin: 0; position: absolute; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 12px; background: #3a362d; border: 1px solid #5c5647; transition: background .12s, border-color .12s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #cfc8b8; transition: transform .12s, background .12s; }
.switch:hover span { border-color: #7a735f; }
.switch input:disabled + span { opacity: .45; }
.switch input:disabled { cursor: not-allowed; }
.switch input:checked + span { background: var(--accent); border-color: var(--accent); }
.switch input:checked + span::after { transform: translateX(18px); background: var(--accent-ink); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* surfaces */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); }
.grid.wide { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: inherit; }
/* icon and name share a line; a name that wraps keeps the icon level with its first line */
.tile-head { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-width: 0; }
.tile-head .ic { flex: none; font-size: 1.25rem; color: var(--text); margin-top: -1px; } /* the icon is a touch taller than the line of text: centred on it */
.tile-head h3 { min-width: 0; overflow-wrap: anywhere; }
.ic.gem { color: var(--gold); font-size: .9em; vertical-align: -.12em; }
.tile.locked .tile-head .ic.gem, .locked-mark .ic.gem { opacity: 1; } /* the lock is dimmed, the gem is not */
.locked-mark { gap: 5px; align-items: center; } .locked-mark .ic.gem { font-size: .8rem; }
h1 + .ic.gem { font-size: 1.15rem; }
.tile h3 { margin: 0; font-size: 1.2rem; }
.tile p { color: var(--muted); margin: 0 0 10px; flex: 1; }
.tile .meta { display: flex; align-items: center; gap: 10px; width: 100%; }
.state { font: 700 .72rem var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.state.on { color: var(--ok); }
/* locked premium modules: greyed out with the hatch of a dormant scale, still clickable */
.tile.locked { background: repeating-linear-gradient(135deg, var(--panel) 0 10px, #141310 10px 20px); }
.tile.locked .tile-head .ic { opacity: .45; } .tile.locked h3 { color: var(--muted); } .tile.locked p { color: #8f897b; }
.tile.locked .state { color: var(--accent); }
/* disabled by the Pangobot team: nothing to open, nothing to buy */
.tile.off { opacity: .62; } .tile.off .meta { flex-wrap: wrap; gap: 4px 10px; }
.tag-label { font: 700 .68rem var(--display); letter-spacing: .12em; text-transform: uppercase; padding: 2px 6px; border: 1px solid var(--border-strong); border-radius: 3px; color: var(--muted); vertical-align: middle; }
.tag-label.premium { color: var(--accent); border-color: var(--accent-dim); }
.tag-label.ok { color: var(--ok); border-color: #35573f; }
.tag-label.bad { color: #f0998d; border-color: #6b3a33; }
.badge { font: 700 .68rem var(--display); letter-spacing: .12em; text-transform: uppercase; padding: 2px 6px; border: 1px solid var(--border-strong); border-radius: 3px; color: var(--muted); }
.badge.premium { color: var(--accent); border-color: var(--accent-dim); } .badge.ok { color: var(--ok); border-color: #35573f; } .badge.bad { color: #f0998d; border-color: #6b3a33; }
/* module pages: a short list of named sections; open the one you need */
.sections { display: flex; flex-direction: column; gap: 10px; }
.section { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); transition: border-color .12s; }
.section:hover { border-color: var(--border-strong); }
.section > header { display: flex; align-items: center; gap: 16px; padding: 16px 18px; cursor: pointer; border-radius: var(--r); }
.section > header:hover { background: var(--panel-2); }
.section > header:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.section.flat > header { cursor: default; }
.section.flat > header:hover { background: none; }
.section > header > .ic:first-child { font-size: 1.35rem; color: var(--text); }
.section-text { flex: 1; min-width: 0; }
.section-text h3 { margin: 0; font-size: 1.15rem; }
.section-text p { margin: 2px 0 0; color: var(--muted); font-size: .92rem; }
.section .chev { display: flex; color: var(--muted); }
.section .chev .ic { transition: transform .15s; transform: rotate(-90deg); }
.section:not(.closed) .chev .ic { transform: rotate(0); }
.section.closed > .section-body { display: none; }
.section-body { padding: 2px 18px 8px; border-top: 1px solid var(--border); }
.section:not(.closed) > .section-body { animation: drop .16s ease-out both; }
.field.bare { padding-top: 14px; }

/* sidebar rows: the link and its on/off switch are siblings, so the switch never navigates */
.nav-row { display: flex; align-items: center; gap: 4px; padding-right: 8px; border-radius: var(--r); }
.nav-row .nav { flex: 1; min-width: 0; }
.nav-row:hover { background: var(--panel-2); }
.nav-row:hover .nav { background: none; color: var(--text); }
.nav-row.active { background: var(--panel-3); }
.nav-row.active .nav { color: var(--text); }
.nav-row.active .nav .ic:first-child { color: var(--accent); }
.nav-row .end { display: flex; align-items: center; flex: none; }
.locked-mark { display: flex; color: var(--faint); font-size: .9rem; padding-right: 3px; }
.switch.sm { width: 32px; height: 18px; }
.switch.sm span { border-radius: 9px; }
.switch.sm span::after { width: 12px; height: 12px; top: 2px; left: 2px; }
.switch.sm input:checked + span::after { transform: translateX(14px); }
.switch input:checked + span { background: var(--accent); }

/* role picker: looks like the other inputs, lists roles in their own colours */
.picker-wrap { display: block; }
.picker { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; padding: 6px 10px; border-radius: var(--r); border: 1px solid var(--border-strong); background: var(--bg); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.picker:hover:not(:disabled) { border-color: #6a6453; }
.picker:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.picker:disabled { opacity: .55; cursor: not-allowed; }
.picker-face { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker > .ic { color: var(--muted); font-size: .9rem; transition: transform .15s; }
.picker[aria-expanded=true] > .ic { transform: rotate(180deg); }
.picker-wrap .menu { left: 0; right: 0; min-width: 0; max-height: 330px; padding: 6px; }
.picker-search { margin-bottom: 6px; }
.picker-list { display: flex; flex-direction: column; }
.picker-empty { padding: 10px; color: var(--muted); font-size: .9rem; }
.picker-hint { margin-top: 6px; padding: 9px 10px; border-top: 1px solid var(--border); color: var(--accent); font-size: .85rem; }
.role { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.role-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ghost); flex: none; }
.role-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.role-row { justify-content: flex-start; }
.role-row .why { margin-left: auto; padding-left: 12px; font-size: .78rem; color: var(--muted); white-space: nowrap; }
/* roles that cannot be picked: greyed out, colour removed, no hover, not clickable */
.role-row.blocked { cursor: not-allowed; }
.role-row.blocked:hover { background: none; }
.role-row.blocked .role { opacity: .38; filter: grayscale(1); }
.role-row.blocked .role-name { text-decoration: line-through; text-decoration-color: var(--ghost); }
.chip .role { gap: 6px; } .chip .role-dot { width: 8px; height: 8px; }

/* callouts: a full hairline box with an icon - not the coloured-left-stripe card */
.notice { position: relative; border: 1px solid #5a4a2a; background: #211c12; padding: 11px 14px 11px 42px; border-radius: var(--r); }
.notice::before { content: ""; position: absolute; left: 13px; top: 13px; width: 18px; height: 18px; background: var(--accent);
  -webkit-mask: url("../img/icons/alert-triangle.svg") center / contain no-repeat; mask: url("../img/icons/alert-triangle.svg") center / contain no-repeat; }
.notice.bad { border-color: #6b3a33; background: #221614; } .notice.bad::before { background: var(--danger); }
.notice.ok { border-color: #35573f; background: #131d16; }
.notice.ok::before { background: var(--ok); -webkit-mask-image: url("../img/icons/circle-check.svg"); mask-image: url("../img/icons/circle-check.svg"); }
.notice.info { border-color: #3a4a60; background: #131920; }
.notice.info::before { background: var(--info); -webkit-mask-image: url("../img/icons/info-circle.svg"); mask-image: url("../img/icons/info-circle.svg"); }
.guild { display: flex; align-items: center; gap: 12px; color: inherit; }
.guild > div { min-width: 0; flex: 1 1 auto; } .guild b, .menu-item > span, .reward-head h1 em, .reward-server .grow { overflow-wrap: anywhere; }
.guild:hover { text-decoration: none; border-color: var(--border-strong); }
.guild .gicon { width: 44px; height: 44px; border-radius: 10px; font-size: .9rem; }

/* forms */
.field { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 8px 22px; padding: 14px 0; border-top: 1px solid var(--border); align-items: start; }
.field:first-child { border-top: 0; }
.field > .label { font-weight: 600; }
.field .help { font-weight: 400; font-size: .83rem; color: var(--muted); margin-top: 2px; }
.field.wide { grid-template-columns: 1fr; }
@media (max-width: 700px) { .field { grid-template-columns: 1fr; } }
.heading { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--border); font: 700 .78rem var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 2px 2px 8px; border-radius: 4px; background: var(--panel-3); font-size: .85rem; }
.chip button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 5px; }
.chip button:hover { color: var(--danger); }
.item { border: 1px solid var(--border); border-radius: var(--r); background: var(--panel-2); margin-bottom: 10px; }
.item > header { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; font-weight: 600; }
.item > .body { padding: 0 14px 8px; border-top: 1px solid var(--border); }
.item.closed > .body { display: none; }
/* centred with auto margins, not a transform: the entrance animation ends on "transform: none" */
.savebar { position: fixed; left: 12px; right: 12px; bottom: 18px; width: fit-content; max-width: calc(100% - 24px); margin: 0 auto; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 16px; border-radius: var(--r); background: var(--panel-3); border: 1px solid var(--border-strong); box-shadow: 0 10px 28px rgba(0, 0, 0, .5); }

/* embed builder: what can be filled in on the left (groups that fold away), the message as Discord draws it on the right */
.embed-builder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .embed-builder { grid-template-columns: 1fr; } }
.eb-editor { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.eb-group { border: 1px solid var(--border); border-radius: var(--r); background: var(--panel-2); }
.eb-group > summary { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; list-style: none; user-select: none; border-radius: var(--r); }
.eb-group > summary::-webkit-details-marker { display: none; }
.eb-group > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.eb-group > summary > .ic { color: var(--muted); }
.eb-group > summary .chev { display: flex; margin-left: auto; color: var(--muted); }
.section .eb-group:not([open]) > summary .chev .ic, .eb-group:not([open]) > summary .chev .ic { transition: transform .15s; transform: rotate(-90deg); }
.eb-hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .82rem; }
.eb-group[open] .eb-hint { display: none; }
.eb-inner { display: flex; flex-direction: column; gap: 10px; padding: 4px 10px 12px; }
.eb-field > label, .eb-inline { font-size: .78rem; color: var(--muted); }
.eb-field > label { display: block; margin-bottom: 2px; }
.eb-inline { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.eb-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.eb-counted { position: relative; }
.eb-count { display: none; position: absolute; right: 2px; bottom: -15px; font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.eb-counted:focus-within .eb-count, .eb-count.near { display: block; }
.eb-counted:focus-within, .eb-counted:has(.eb-count.near) { margin-bottom: 12px; }
.eb-count.near { color: #f0998d; }
.eb-help { margin-top: 4px; font-size: .74rem; color: var(--faint); font-family: ui-monospace, "Cascadia Code", Consolas, monospace; overflow-wrap: anywhere; }
.embed-builder input.bad { border-color: var(--danger); }
.eb-color { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.embed-builder input.eb-hex { width: 96px; text-transform: uppercase; }
.eb-swatches { display: flex; flex-wrap: wrap; gap: 5px; }
.eb-swatch { width: 22px; height: 22px; padding: 0; border: 1px solid var(--border-strong); border-radius: 4px; cursor: pointer; }
.eb-swatch:hover:not(:disabled) { border-color: var(--text); } .eb-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.eb-fields { display: flex; flex-direction: column; gap: 10px; }
.eb-fields:empty { display: none; }
.eb-row { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: var(--r); background: var(--panel); }
.eb-row-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.eb-row textarea { min-height: 58px; }
.icon-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 4px; background: none; color: var(--muted); cursor: pointer; }
.icon-btn:hover:not(:disabled) { background: var(--panel-3); color: var(--text); } .icon-btn.danger:hover:not(:disabled) { color: #f0998d; }
.icon-btn:disabled { opacity: .35; cursor: default; } .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.eb-total { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; } .eb-total.over { color: #f0998d; }
.eb-preview { position: sticky; top: 72px; min-width: 0; }
.eb-preview-label { margin-bottom: 4px; }
@media (max-width: 900px) { .eb-preview { position: static; } }

/* Discord's own look (its colours, not ours): one message by the bot, formatting included */
.discord { background: #313338; border-radius: var(--r); padding: 14px 14px 16px; font-size: .9rem; line-height: 1.375; color: #dbdee1; min-height: 80px; overflow: hidden; }
.discord.nothing::after { content: "Nothing to show yet - give it a title or a text."; color: #949ba4; font-size: .85rem; }
.discord.nothing .dc-msg { display: none; }
.dc-msg { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; }
.dc-avatar { width: 40px; height: 40px; border-radius: 50%; background: #5865f2; object-fit: cover; }
.dc-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; margin-bottom: 2px; }
.dc-name { font-weight: 600; color: #f2f3f5; }
.dc-app { align-self: center; padding: 0 4px; border-radius: 3px; background: #5865f2; color: #fff; font-size: .62rem; font-weight: 600; line-height: 1.5; }
.dc-time { font-size: .72rem; color: #949ba4; }
.discord .msg { margin-bottom: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.discord .embed { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; background: #2b2d31; border-left: 4px solid var(--accent); border-radius: 4px; padding: 10px 16px 14px 12px; max-width: 516px; }
.discord .e-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.discord .e-author { display: flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 600; color: #f2f3f5; overflow-wrap: anywhere; }
.discord .e-author img, .discord .embed .f img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; }
.discord .embed .f img { width: 20px; height: 20px; }
.discord .embed .t { font-weight: 600; font-size: 1rem; color: #f2f3f5; overflow-wrap: anywhere; }
.discord .embed .d, .discord .e-fvalue { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .875rem; }
.discord .embed .e-link, .discord .link { color: #00a8fc; } .discord .link:hover { text-decoration: underline; }
.discord .e-fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
.discord .e-fname { font-weight: 600; font-size: .875rem; color: #f2f3f5; margin-bottom: 1px; overflow-wrap: anywhere; }
.discord .embed .f { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; font-size: .75rem; font-weight: 500; color: #b5bac1; grid-column: 1 / -1; overflow-wrap: anywhere; }
.discord .e-dot { margin: 0 -4px; }
.discord .embed .thumb { width: 80px; height: 80px; border-radius: 4px; object-fit: cover; justify-self: end; }
.discord .embed .img { grid-column: 1 / -1; max-width: 100%; border-radius: 4px; max-height: 300px; object-fit: cover; }
.discord .ph { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 3px; padding: 0 2px; }
.discord .mention { color: #c9cdfb; background: rgba(88, 101, 242, .3); border-radius: 3px; padding: 0 2px; font-weight: 500; }
.discord .time { background: rgba(255, 255, 255, .06); border-radius: 3px; padding: 0 2px; }
.discord .spoiler { background: #1e1f22; color: transparent; border-radius: 3px; cursor: pointer; } .discord .spoiler:hover { color: inherit; background: #46484d; }
.discord code { background: #1e1f22; border-radius: 3px; padding: 0 3px; font-size: .85em; }
.discord pre { margin: 4px 0; padding: 7px; background: #1e1f22; border: 1px solid #232428; border-radius: 4px; font: .8rem/1.3 ui-monospace, "Cascadia Code", Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.discord blockquote { margin: 0; padding: 0 8px 0 12px; border-left: 4px solid #4e5058; white-space: pre-wrap; }
.discord ul, .discord ol { margin: 4px 0 0 16px; padding: 0; white-space: normal; } .discord li { margin-bottom: 2px; }
.discord .h { font-weight: 700; color: #f2f3f5; line-height: 1.3; margin: 8px 0 4px; white-space: normal; } .discord .h:first-child { margin-top: 0; }
.discord .h1 { font-size: 1.5rem; } .discord .h2 { font-size: 1.25rem; } .discord .h3 { font-size: 1rem; }
.discord .subtext { font-size: .78rem; color: #949ba4; white-space: normal; }
.discord img.emoji { width: 1.375em; height: 1.375em; vertical-align: bottom; object-fit: contain; }

/* emoji picker: a button in the corner of a text field, and what it opens */
.emoji-field { position: relative; }
.emoji-field > .has-emoji { padding-right: 38px; }
.emoji-wrap { position: absolute; top: 4px; right: 4px; }
.emoji-btn { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--muted); cursor: pointer; }
.emoji-btn:hover:not(:disabled), .emoji-btn[aria-expanded=true] { color: var(--accent); background: var(--panel-3); }
.emoji-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .emoji-btn:disabled { opacity: .4; cursor: default; }
.menu.emoji-menu { width: 348px; max-width: calc(100vw - 16px); padding: 0; }
.menu.emoji-menu:not(.hidden) { display: flex; flex-direction: column; overflow: hidden; }
.emoji-menu > * { flex: none; }
.emo-top { padding: 8px 8px 0; } .emo-top .picker-search { margin-bottom: 6px; }
.emo-tabs { display: flex; gap: 1px; padding: 0 6px 4px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.emo-tab { flex: 1 0 28px; height: 30px; padding: 0; border: 0; border-radius: 4px; background: none; font-size: 1.05rem; line-height: 1; cursor: pointer; filter: grayscale(.6); opacity: .8; }
.emo-tab:hover, .emo-tab:focus-visible { background: var(--panel-3); filter: none; opacity: 1; outline: none; }
.emoji-menu > .emo-scroll { flex: 0 1 auto; position: relative; height: 288px; min-height: 0; overflow-y: auto; padding: 0 6px 6px; outline: none; }
.emo-scroll section { content-visibility: auto; contain-intrinsic-size: auto 320px; }
.emo-scroll h5 { position: sticky; top: 0; z-index: 1; margin: 0; padding: 7px 4px 4px; background: var(--panel); color: var(--muted); font: 600 .72rem var(--body); letter-spacing: .04em; text-transform: uppercase; }
.emo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); }
.emo { display: grid; place-items: center; height: 36px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--text); font-size: 1.35rem; line-height: 1; cursor: pointer; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.emo img { width: 26px; height: 26px; object-fit: contain; } .emo-gone { font: 600 .7rem var(--body); color: var(--muted); text-transform: uppercase; }
.emo:hover, .emo:focus-visible { background: var(--panel-3); outline: none; } .emo:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.emo-name { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px; border-top: 1px solid var(--border); color: var(--muted); font-size: .82rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.emo-big { font-size: 1.4rem; line-height: 1; } .emo-big img { width: 24px; height: 24px; object-fit: contain; vertical-align: middle; }

/* modal + toast */
.overlay { position: fixed; inset: 0; z-index: 50; background: rgba(8, 7, 5, .78); display: grid; place-items: center; padding: 16px; }
.modal { width: min(520px, 100%); max-height: 90vh; max-height: 90dvh; overflow: auto; background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--r); padding: 26px; }
.modal:focus { outline: none; }
html.modal-open { overflow: hidden; } /* the page behind a dialog does not scroll (the gutter stays: nothing jumps) */
.modal .price { font: 700 2.4rem var(--display); color: var(--text); }
.toasts { position: fixed; left: 0; right: 0; top: 70px; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--r); background: var(--panel-3); border: 1px solid var(--border-strong); max-width: 380px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.toast .ic { color: var(--ok); margin-top: 2px; } .toast.bad .ic { color: var(--danger); }

/* tables, logs */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--faint); font: 700 .7rem var(--display); letter-spacing: .14em; text-transform: uppercase; }
.tablewrap { overflow-x: auto; }
.log { display: grid; grid-template-columns: 74px 1fr; gap: 0 12px; padding: 8px 12px; border-left: 2px solid var(--border-strong); border-bottom: 1px solid var(--border); }
.log:hover { background: var(--panel-2); }
.log time { color: var(--faint); font-size: .8rem; font-variant-numeric: tabular-nums; padding-top: 2px; }
.log .title { font-weight: 600; }
.log .text { color: #cdc7b9; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .88rem; }
.log .mention { color: #b9cdea; background: rgba(143, 176, 217, .14); border-radius: 3px; padding: 0 3px; }
/* headings that share a row with controls must not drag the row's centre line down */
.row > h1, .row > h2, .row > h3 { margin: 0; }
.live-status { display: inline-flex; align-items: center; gap: 8px; padding: 3px 9px 3px 8px; border: 1px solid var(--border); border-radius: var(--r); font: 700 .7rem var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.live-status.on { color: var(--ok); border-color: #35573f; }
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--ghost); flex: none; }
.live-dot.on { background: var(--ok); }
.live-dot.on::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--ok); animation: ring 1.8s ease-out infinite; }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps > li { counter-increment: step; position: relative; padding: 0 0 20px 46px; }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: -3px; width: 30px; height: 30px; border-radius: 4px; background: var(--panel-3); border: 1px solid var(--border-strong); display: grid; place-items: center; font: 700 1rem var(--display); }
.steps > li.done::before { background: #1d2c22; border-color: #35573f; color: var(--ok); }
.steps > li.current::before { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 20px; flex-wrap: wrap; }
.tabs button { background: none; border: 0; color: var(--muted); font: 600 .95rem var(--body); padding: 10px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button:hover { color: var(--text); }
.tabs button.active { color: var(--text); border-color: var(--accent); }
.stat { font: 700 2rem var(--display); letter-spacing: .01em; }
.keybox { font-family: ui-monospace, Consolas, monospace; background: var(--bg); border: 1px dashed var(--border-strong); border-radius: var(--r); padding: 12px; white-space: pre; overflow-x: auto; user-select: all; }
details > summary { cursor: pointer; }

/* analytics: single-hue marks, ink-coloured text, recessive axes */
.chart { display: flex; flex-direction: column; gap: 6px; }
.chart .head { display: flex; align-items: baseline; gap: 8px; }
.chart .head .total { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.bars { display: flex; align-items: stretch; gap: 2px; height: 96px; border-bottom: 1px solid var(--border); }
.bars .col { flex: 1; display: flex; align-items: flex-end; min-width: 2px; }
.bars .col i { display: block; width: 100%; background: var(--accent); border-radius: 4px 4px 0 0; }
.bars .col.zero i { background: var(--border); border-radius: 0; }
.bars .col:hover i { filter: brightness(1.2); }
.chart .axis { display: flex; justify-content: space-between; font-size: .72rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.rank { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; font-size: .9rem; }
.rank .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .track { height: 10px; background: var(--panel-3); border-radius: 0 4px 4px 0; }
.rank .track i { display: block; height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; }
.rank .val { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.tip { position: fixed; z-index: 70; pointer-events: none; background: #0a0908; border: 1px solid var(--border-strong); border-radius: 4px; padding: 5px 9px; font-size: .8rem; max-width: calc(100vw - 16px); }
@media (min-width: 861px) { .tip { white-space: nowrap; } }

/* ── landing ─────────────────────────────────────────────────────────────── */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
@media (max-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 44px; } }
.hero h1 { font-size: clamp(2.6rem, 6.2vw, 4.6rem); line-height: .98; text-transform: uppercase; letter-spacing: .01em; margin: 14px 0 20px; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lead { font-size: 1.15rem; color: var(--muted); max-width: 34em; margin-bottom: 28px; }
.hero .facts { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--border); }
.hero .facts div { display: flex; flex-direction: column; }
.hero .facts b { font: 700 1.5rem var(--display); }
.hero .facts span { color: var(--muted); font-size: .85rem; }
/* the scale board: every module is a scale; free ones are lit, premium ones are dormant */
.scales { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 6px; padding-bottom: 26px; }
.scale { position: relative; aspect-ratio: 1 / 1.12; margin-bottom: -22%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px 18%; text-align: center;
  background: var(--accent); color: var(--accent-ink); border: 2px solid var(--bg); border-radius: 8px 8px 50% 50% / 8px 8px 46% 46%; font: 700 .7rem/1.15 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.scale:nth-child(8n+5), .scale:nth-child(8n+6), .scale:nth-child(8n+7), .scale:nth-child(8n+8) { transform: translateX(calc(50% + 3px)); }
.scale:nth-child(3n) { background: #e08f2c; } .scale:nth-child(5n) { background: #f7bd68; }
.scale .ic { font-size: 1.25rem; }
.scale.locked { background: var(--panel-2); color: var(--faint); border-color: var(--bg); box-shadow: inset 0 0 0 1px var(--border-strong); }
.scales-wrap { padding-right: 12%; }
.scales-key { display: flex; gap: 18px; margin-top: 34px; color: var(--muted); font-size: .85rem; }
.scales-key i { display: inline-block; width: 12px; height: 12px; border-radius: 2px 2px 6px 6px; margin-right: 6px; vertical-align: -1px; background: var(--accent); }
.scales-key i.l { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--border-strong); }
.band { border-top: 1px solid var(--border); padding: 72px 0; }
.band.alt { background: var(--panel); }
.band h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); text-transform: uppercase; margin-bottom: 8px; }
.band .intro { color: var(--muted); max-width: 46em; margin-bottom: 36px; font-size: 1.05rem; }
.reasons { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.reasons li { counter-increment: r; display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.5fr); gap: 8px 28px; padding: 26px 0; border-top: 1px solid var(--border); align-items: baseline; }
.reasons li::before { content: counter(r, decimal-leading-zero); font: 700 2.4rem var(--display); color: var(--ghost); }
.reasons h3 { font-size: 1.35rem; margin: 0; }
.reasons p { color: var(--muted); margin: 0; }
@media (max-width: 760px) { .reasons li { grid-template-columns: 56px 1fr; } .reasons p { grid-column: 2; } }
.feature-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 0 40px; }
.feature { display: grid; grid-template-columns: 28px 1fr; gap: 2px 12px; padding: 16px 0; border-top: 1px solid var(--border); }
.feature .ic { color: var(--accent); font-size: 1.25rem; grid-row: span 2; margin-top: 2px; }
.feature b { font: 700 1.05rem var(--display); letter-spacing: .02em; }
.feature span { color: var(--muted); font-size: .92rem; }
.pricelist { border-top: 1px solid var(--border-strong); }
.pricelist .line { display: grid; grid-template-columns: 28px minmax(0, 14rem) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); }
.pricelist .line .ic { color: var(--muted); font-size: 1.2rem; }
.pricelist .line b { font: 700 1.1rem var(--display); letter-spacing: .02em; }
.pricelist .line span { color: var(--muted); font-size: .92rem; }
.pricelist .line .amount { font: 700 1.2rem var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  /* name + price on the first row, the description underneath, icon spanning both */
  .pricelist .line { grid-template-columns: 28px minmax(0, 1fr) auto; row-gap: 2px; align-items: start; }
  .pricelist .line .ic { grid-row: 1 / span 2; margin-top: 2px; }
  .pricelist .line b { grid-column: 2; grid-row: 1; }
  .pricelist .line .amount { grid-column: 3; grid-row: 1; }
  .pricelist .line span:not(.ic) { grid-column: 2 / -1; grid-row: 2; }
}
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--border); border-radius: var(--r); }
.how div { padding: 24px; border-right: 1px solid var(--border); }
.how div:last-child { border-right: 0; }
.how b { display: block; font: 700 1.15rem var(--display); margin: 6px 0; }
.how p { color: var(--muted); margin: 0; font-size: .95rem; }
@media (max-width: 760px) { .how { grid-template-columns: 1fr; } .how div { border-right: 0; border-bottom: 1px solid var(--border); } .how div:last-child { border-bottom: 0; } }
.faq details { border-top: 1px solid var(--border); padding: 16px 0; }
.faq details:last-child { border-bottom: 1px solid var(--border); }
.faq summary { font: 700 1.1rem var(--display); letter-spacing: .02em; list-style: none; display: flex; align-items: center; gap: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; color: var(--muted); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq p { color: var(--muted); margin: 10px 0 0; max-width: 60em; }
/* "always being worked on": two lists fed by the news posts */
.roadmap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--border); border-radius: var(--r); }
.roadmap-col { padding: 24px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.roadmap-col + .roadmap-col { border-left: 1px solid var(--border); }
.roadmap-col .heading { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding-top: 0; border-top: 0; } .roadmap-col .heading .ic { color: var(--accent); }
.roadmap-item { display: block; padding: 12px 0; border-top: 1px solid var(--border); color: inherit; text-decoration: none; }
.roadmap-item b { display: block; font: 700 1.1rem var(--display); overflow-wrap: anywhere; } .roadmap-item:hover b, .roadmap-item:focus-visible b { color: var(--accent); }
.roadmap-item p { margin: 4px 0 2px; color: var(--muted); font-size: .95rem; overflow-wrap: anywhere; }
.roadmap-col .news-more { margin-top: auto; padding-top: 12px; }
@media (max-width: 860px) { .roadmap { grid-template-columns: minmax(0, 1fr); } .roadmap-col + .roadmap-col { border-left: 0; border-top: 1px solid var(--border); } }
/* custom branding: the server's own bot, and the bot's profile on this server */
.own-bot-steps { margin: 0; padding-left: 1.3em; color: var(--muted); } .own-bot-steps li { margin-bottom: .45em; } .own-bot-steps b { color: var(--text); }
.own-bot-form input { flex: 1 1 260px; min-width: 0; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
.own-bot-who { gap: 14px; } .own-bot-who .grow { min-width: 0; overflow-wrap: anywhere; }
.avatar.lg { width: 48px; height: 48px; } .avatar.ph { display: grid; place-items: center; color: var(--muted); }
.heading.flush { margin-top: 0; padding-top: 0; border-top: 0; }
.brand-field { display: flex; flex-direction: column; gap: 6px; } .brand-label { font-weight: 600; }
.brand-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 20px; align-items: start; }
.brand-side .heading { margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: 10px; }
.brand-pick { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.brand-card { padding: 0; overflow: hidden; }
.brand-banner { height: 120px; background: var(--panel-3) center / cover no-repeat; } .brand-banner.empty { background-color: var(--accent-dim); }
.brand-body { padding: 0 16px 16px; }
.brand-avatar { width: 80px; height: 80px; margin-top: -40px; border-radius: 50%; border: 6px solid var(--panel); background: var(--panel-3); object-fit: cover; display: block; }
.brand-name { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 1.15rem; overflow-wrap: anywhere; }
.brand-bio { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--border); color: var(--muted); font-size: .92rem; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 860px) { .brand-layout { grid-template-columns: minmax(0, 1fr); } .brand-side { order: -1; } }
/* the official Discord server */
.foot-discord { display: inline-flex; align-items: center; gap: 6px; } .sitefoot a.foot-discord { color: var(--muted); }
.community-text { flex: 1; min-width: 260px; } .community-text h2 { margin-bottom: 8px; } .community-text p { margin: 0; max-width: 46em; }
.drawer-discord { margin-top: 10px; }
/* appearance: accent swatches */
.swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.swatch { width: 44px; height: 44px; border-radius: var(--r); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--border-strong); cursor: pointer; padding: 0; }
.swatch[aria-pressed=true] { box-shadow: 0 0 0 2px var(--text); }
.swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.swatch-own { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); cursor: pointer; }
input[type=color] { cursor: pointer; }
/* custom branding: what an embed looks like with the server's colour */
.brand-embed { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; padding: 12px 14px; background: var(--panel-2); border-radius: 4px; border-left: 4px solid var(--accent); font-size: .92rem; }
.closing { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.closing h2 { margin: 0; flex: 1; min-width: 260px; }
.disclaimer { color: var(--faint); font-size: .85rem; padding-top: 26px; padding-bottom: 6px; border-top: 1px solid var(--border); }

/* the line at the very bottom of every page */
.sitefoot { margin-top: auto; flex: none; width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px 0; padding: 22px 16px 28px; color: var(--faint); font-size: .82rem; }
.sitefoot > * + *::before { content: "·"; margin: 0 12px; color: var(--border-strong); }
.sitefoot a { color: var(--faint); }
.sitefoot a:hover { color: var(--text); text-decoration: none; }

/* legal pages: a reading column, not a dashboard */
.legal { max-width: 800px; padding-top: 40px; padding-bottom: 60px; }
.legal-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 34px; border-bottom: 1px solid var(--border); }
.legal-nav a { padding: 9px 14px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.legal-nav a:hover { color: var(--text); text-decoration: none; }
.legal-nav a[aria-current=page] { color: var(--text); border-color: var(--accent); }
.legal h1 { font-size: clamp(2rem, 5vw, 2.8rem); text-transform: uppercase; margin-bottom: .3em; }
.legal h2 { font-size: 1.3rem; margin: 2.2em 0 .6em; padding-top: 1.1em; border-top: 1px solid var(--border); }
.legal h3 { font-size: 1.05rem; margin: 1.6em 0 .4em; }
.legal p, .legal li { color: #d2ccbf; line-height: 1.7; }
.legal ul { padding-left: 1.2em; } .legal li { margin-bottom: .4em; }
.legal .de { font: 400 .55em var(--body); color: var(--faint); letter-spacing: 0; text-transform: none; margin-left: .5em; }
.legal .de-block { color: var(--muted); font-size: .92rem; padding-left: 14px; border-left: 1px solid var(--border-strong); }
.legal .box { border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--panel); padding: 4px 20px 8px; margin: 18px 0; }
.legal .box h3 { margin-top: 1em; }
.legal table { margin: 12px 0; }
.legal mark.unset { background: #3a1d18; color: #f0998d; padding: 1px 6px; border-radius: 3px; font-family: ui-monospace, Consolas, monospace; font-size: .85em; }
.consent { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: .88rem; color: var(--muted); cursor: pointer; }
.consent input { width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--accent); }

/* ── motion ──────────────────────────────────────────────────────────────────
   Every animation here explains something: plates being laid (the scale board), a list
   arriving as you reach it, a surface opening from the control that opened it. Nothing loops
   except the "live" indicator, and all of it is switched off for reduced-motion users. */
@keyframes plate { from { opacity: 0; transform: var(--shift, translateX(0)) translateY(-18px) rotateX(70deg); } to { opacity: 1; transform: var(--shift, translateX(0)) translateY(0) rotateX(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ring { from { transform: scale(1); opacity: .8; } to { transform: scale(2.8); opacity: 0; } }

.scales { perspective: 900px; }
.scale { transform-origin: 50% 0; animation: plate .5s cubic-bezier(.2, .8, .2, 1) both; transition: filter .15s, translate .15s; }
.scale:nth-child(8n+5), .scale:nth-child(8n+6), .scale:nth-child(8n+7), .scale:nth-child(8n+8) { --shift: translateX(calc(50% + 3px)); }
.scale:hover { translate: 0 -4px; filter: brightness(1.08); z-index: 2; }
.hero h1, .hero .lead, .hero .eyebrow, .hero #cta, .hero .facts { animation: rise .6s cubic-bezier(.2, .8, .2, 1) both; }
.hero .lead { animation-delay: .08s; } .hero #cta { animation-delay: .16s; } .hero .facts { animation-delay: .24s; }
/* elements marked .reveal wait for landing.js to add .in when they scroll into view */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
.reasons li::before { transition: color .5s ease .15s; }
.reasons li.in::before { color: var(--accent); }

.main > *, .legal > * { animation: fade .25s ease both; }
.menu:not(.hidden) { animation: drop .14s ease-out both; transform-origin: top; }
.overlay { animation: fade .15s ease both; }
.modal { animation: pop .2s cubic-bezier(.2, .8, .2, 1) both; }
/* toasts fade in from above, and on the way out fade first and then give up their room, so the
   ones underneath glide up instead of jumping (ui.js adds .leaving and removes the element after) */
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes toast-again { 0%, 100% { transform: none; } 40% { transform: translateX(-5px); } 70% { transform: translateX(3px); } }
.toast { box-sizing: border-box; cursor: pointer; animation: toast-in .3s ease both; }
.toast.again { animation: toast-again .3s ease; }
/* The way out is a keyframe animation too (not a transition): it simply takes over from toast-in,
   whatever state that one is in. First half: fade. Second half: the box closes (--h is its measured
   height, set by ui.js), and the -8px margin swallows the gap the list would otherwise keep. */
@keyframes toast-out {
  0% { opacity: 1; transform: none; height: var(--h); }
  50% { opacity: 0; transform: translateY(-6px); height: var(--h); margin-top: 0; padding-top: 10px; padding-bottom: 10px; border-top-width: 1px; border-bottom-width: 1px; }
  100% { opacity: 0; transform: translateY(-6px); height: 0; margin-top: -8px; padding-top: 0; padding-bottom: 0; border-top-width: 0; border-bottom-width: 0; }
}
.toast.leaving { pointer-events: none; overflow: hidden; animation: toast-out .48s ease forwards; }
.savebar:not(.hidden) { animation: rise .22s cubic-bezier(.2, .8, .2, 1) both; }
.item:not(.closed) > .body { animation: drop .16s ease-out both; }
.faq details[open] p { animation: drop .2s ease-out both; }
.btn { transition: background .12s, border-color .12s, transform .06s; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.nav, .menu-item, .account, .switcher, .tabs button, .legal-nav a, .sitefoot a { transition: background .12s, color .12s, border-color .12s; }
.card.tile, .card.guild { transition: border-color .15s, transform .15s; }
.card.tile:hover, .card.guild:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.account .ic, .switcher .ic { transition: transform .15s; }
.account[aria-expanded=true] .ic, .switcher[aria-expanded=true] .ic { transform: rotate(180deg); }
.bars .col i { transform-origin: bottom; animation: grow-y .5s cubic-bezier(.2, .8, .2, 1) both; }
.rank .track i { transform-origin: left; animation: grow-x .6s cubic-bezier(.2, .8, .2, 1) both; }
/* the list is re-drawn on every event; only the newest row (always first) should move */
.log:first-child { animation: drop .2s ease-out both; }

/* ── news ─────────────────────────────────────────────────────────────────── */
.grow { flex: 1; min-width: 0; }
.modal.wide { width: min(760px, 100%); }
.tester-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tester-perks li { display: flex; align-items: center; gap: 10px; } .tester-perks .ic { color: var(--accent); flex: none; }
.tester-actions { display: flex; flex-wrap: wrap; gap: 10px; } .tester-actions .btn { flex: 1 1 180px; justify-content: center; }
.linklike { background: none; border: 0; padding: 0; color: var(--faint); cursor: pointer; text-decoration: underline; justify-self: start; align-self: flex-start; font: inherit; font-size: .85rem; }
.linklike:hover { color: var(--text); }
.news-item { padding: 22px 24px; }
.news-item > header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.news-item h2 { font-size: 1.5rem; margin-bottom: .45em; }
.news-share { margin-left: auto; color: var(--muted); } .news-share:hover { color: var(--text); }
.status-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (pointer: coarse) { .news-share, .status-top .btn { min-height: 40px; min-width: 40px; } } /* a finger needs more than a mouse */
.news-item.unread { border-color: var(--accent-dim); }
.news-new { font: 700 .68rem var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.news-pin { display: flex; color: var(--muted); }
.news-body p, .news-body li { color: #d2ccbf; line-height: 1.65; }
.news-body p:last-child { margin-bottom: 0; }
.news-body ul { margin: 0 0 1em; padding-left: 1.2em; }
.news-body a { overflow-wrap: anywhere; }
.news-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 4px; }
.news-teaser { display: flex; align-items: center; gap: 14px; color: inherit; border-color: var(--accent-dim); transition: border-color .15s, transform .15s; }
.news-teaser:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); }
.news-teaser > .ic:first-child { font-size: 1.4rem; color: var(--accent); }
/* a number on a module: something waits for a person there */
.count-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--danger); color: #fff; font: 700 .72rem/1 var(--body); font-variant-numeric: tabular-nums; flex: none; }
.nav-row .count-badge { margin-right: 6px; } .tile-head .count-badge { margin-left: auto; }
.req { color: #f0998d; font-weight: 700; }
.paused-mark { display: flex; color: var(--accent); font-size: .9rem; padding-right: 6px; }
.state.paused { color: var(--accent); }

.news-edited { font: 700 .66rem var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; }
.news-until { display: inline-flex; align-items: center; gap: 7px; margin: -2px 0 12px; font-size: .88rem; font-weight: 600; color: var(--accent); }
.news-item.resolved .news-until { color: var(--ok); }
.news-item h3 { font-size: 1.15rem; margin-bottom: .5em; }
.news-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 600; font-size: .92rem; }
.news-item.linked { border-color: var(--accent); scroll-margin-top: 76px; }
.resolved-list { display: flex; flex-direction: column; gap: 10px; }
.resolved-list .news-item { padding: 16px 20px; background: none; }
.resolved-list .news-body p { color: var(--muted); font-size: .92rem; }
.status .news-item { margin-top: 12px; }
.status-sub.first { margin-top: 26px; }

/* the bell */
.bell { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: var(--r); background: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.bell:hover, .bell[aria-expanded=true] { background: var(--panel-2); border-color: var(--border); color: var(--text); }
.bell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bell-count { position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 4px; background: var(--danger); color: #1d0b08; font: 700 .64rem/16px var(--body); text-align: center; animation: pop .25s cubic-bezier(.2, .8, .2, 1) both; }
.menu.wide-menu { width: 380px; max-width: calc(100vw - 20px); }
.menu.wide-menu:not(.hidden) { display: flex; flex-direction: column; overflow: hidden; }
.menu.wide-menu > * { flex: none; }
.menu.wide-menu > .notes { flex: 0 1 auto; min-height: 0; }
.notes { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; scrollbar-width: thin; }
.note { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 11px; padding: 10px; border-radius: 4px; color: inherit; font-size: .9rem; }
a.note:hover { background: var(--panel-3); text-decoration: none; }
.note > .ic { color: var(--muted); margin-top: 2px; }
.note.unread { background: #211c12; } .note.unread > .ic { color: var(--accent); }
.note-body { color: var(--muted); margin: 2px 0; line-height: 1.45; overflow-wrap: anywhere; }

/* ── reward links (/r/<code>) ─────────────────────────────────────────────── */
.reward { max-width: 860px; padding-top: 44px; padding-bottom: 70px; }
.reward > * { animation: rise .4s cubic-bezier(.2, .8, .2, 1) both; }
.reward-head h1 { font-size: clamp(1.9rem, 5vw, 2.9rem); text-transform: uppercase; margin: 10px 0 18px; }
.reward-head h1 em { font-style: normal; color: var(--accent); }
.eyebrow.ok { color: var(--ok); }
.reward-steps { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; counter-reset: s; margin: 0 0 22px; padding: 0; font: 700 .74rem var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.reward-steps li { counter-increment: s; display: flex; align-items: center; gap: 8px; }
.reward-steps li::before { content: counter(s); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; border: 1px solid var(--border-strong); font-size: .72rem; }
.reward-steps li.current { color: var(--text); } .reward-steps li.current::before { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.reward-steps li.done { color: var(--ok); } .reward-steps li.done::before { border-color: #35573f; color: var(--ok); }
.reward-card { padding: 24px; }
.reward-card > header { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.reward-card > header > div:first-child { flex: 1 1 280px; min-width: 0; }
.reward-card h2 { font-size: 1.7rem; margin: 6px 0 0; }
.reward-price { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.reward-price b { font: 700 2.3rem/1 var(--display); color: var(--accent); }
.reward-price s { font-size: .95rem; }
.reward-message { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--panel-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.reward-modules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 0 28px; }
.reward-modules li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.reward-modules li > .ic { color: var(--accent); font-size: 1.2rem; margin-top: 2px; }
.reward-modules li.owned { opacity: .55; }
.reward-modules .tag-label { margin-left: 8px; }
.reward-modules.compact { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0; }
.reward-modules.compact li { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; }
.reward-terms { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); }
.reward-next { margin-top: 16px; } .reward-next ol { padding-left: 1.2em; margin: 0 0 18px; } .reward-next li { margin-bottom: .5em; color: #d2ccbf; }
.reward-gap { margin-top: 22px; }
.reward-server.full { opacity: .55; }
.reward-summary { margin-bottom: 16px; } .reward-summary .row > .grow { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.reward-next .btn.lg { white-space: normal; text-align: center; max-width: 100%; }
.reward-total { display: flex; align-items: baseline; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border); font-weight: 600; }
.reward-total span { margin-right: auto; } .reward-total b { font: 700 1.8rem var(--display); }
.gicon.lg { width: 44px; height: 44px; border-radius: 10px; font-size: .9rem; }
.gicon.xl { width: 72px; height: 72px; border-radius: 16px; font-size: 1.3rem; }
/* a server's form on the web: the server's picture next to the form's name */
.form-head { display: flex; align-items: center; gap: 18px; } .form-head .welcome { min-width: 0; margin: 0; } .form-head h1 { overflow-wrap: anywhere; }
@media (max-width: 520px) { .form-head { gap: 12px; } .form-head .gicon.xl { width: 52px; height: 52px; border-radius: 12px; } }
.reward-dead { max-width: 620px; padding-top: 30px; }
.reward-dead h1 { font-size: clamp(1.8rem, 4.6vw, 2.6rem); text-transform: uppercase; margin: 10px 0 14px; }
.reward-dead-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 22px; border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--panel); font-size: 1.8rem; color: var(--muted); }
.reward-dead.unknown .reward-dead-icon, .reward-dead.revoked .reward-dead-icon { color: #f0998d; border-color: #6b3a33; }
.reward-dead .row { margin-top: 24px; }
/* owner panel */
.reward-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 18px; }
.reward-row.spent { opacity: .62; }
.reward-row > .grow { flex: 1 1 280px; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .reward-price { align-items: flex-start; text-align: left; } .reward-card { padding: 18px; } }

/* minigames: running games */
.games-panel p + .heading, .games-panel .notice + .heading { margin-top: 14px; }
.game-row { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--border); }
.game-where { display: flex; align-items: center; gap: 11px; flex: 1 1 220px; min-width: 0; }
.game-where .ic { color: var(--accent); font-size: 1.15rem; }
.game-where b { overflow-wrap: anywhere; }
.game-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.game-controls input { width: 150px; }
.games-panel .game-row + .row, .games-panel .row + .heading { margin-top: 10px; }
@media (max-width: 560px) { .game-controls { width: 100%; } .game-controls input { flex: 1; width: auto; min-width: 0; } .games-panel .row > .grow { flex-basis: 100%; } }

/* live numbers: the server's Settings page and the status page */
.grid.stats { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.stat-card { padding: 16px 18px; }
.stat.sm { font-size: 1.15rem; line-height: 1.6; padding: 6px 0 5px; }
.stat-sub { color: var(--muted); } .stat-sub.ok { color: var(--ok); } .stat-sub.warn { color: var(--upd); } .stat-sub.bad { color: #f0998d; } .stat-sub.ph { color: var(--muted); }
.problem { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.problem .ic { color: var(--accent); margin-top: 3px; }
tr.paused td { background: #1d1911; }
.reason-cell { min-width: 240px; }
/* charts (Server Statistics): one hue, thin marks, a grid that stays in the background; numbers and labels wear text colours */
.chart { width: 100%; height: auto; display: block; overflow: visible; } .chart-slot { margin-top: 10px; min-width: 0; }
.chart .grid { stroke: var(--border); stroke-width: 1; }
.chart .axis { fill: var(--faint); font: 11px var(--body, inherit); }
.chart .bar { fill: var(--accent); }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { fill: var(--accent); stroke: var(--panel); stroke-width: 2; }
.chart .hit { fill: transparent; cursor: crosshair; outline: none; }
.chart .hit:hover, .chart .hit:focus-visible { fill: color-mix(in srgb, var(--text) 7%, transparent); }
.chart-card h3 { margin: 0; } .chart-card.wide { grid-column: 1 / -1; } .chart-empty { margin: 18px 0 6px; }
.chart-filters { align-items: center; }
.slider { display: flex; align-items: center; gap: 12px; } .slider input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); height: 36px; padding: 0; border: 0; background: none; }
.slider-value { min-width: 3ch; text-align: right; font: 700 1.05rem var(--display); color: var(--text); }
.meter { height: 6px; border-radius: 3px; background: var(--panel-3); overflow: hidden; margin: 8px 0 6px; } .meter i { display: block; height: 100%; background: var(--ok); border-radius: 3px; } .meter.low i { background: var(--danger); }
.submission .answer { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; } .submission .row input { flex: 1 1 220px; }
.access-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 210px; } .access-cell select { width: auto; min-width: 84px; } .access-cell .price-input { width: 92px; } .access-cell .small { flex-basis: 100%; }

/* ── status page ─────────────────────────────────────────────────────────────
   Three states, always in the same place and always named: online (green, bottom of a bar),
   updating (yellow, above it), offline (red, on top). Colour is never the only carrier. */
:root { --upd: #e8c14a; }
.status { max-width: 880px; padding-top: 44px; padding-bottom: 70px; }
.status > * { animation: fade .25s ease both; }
.status.settled > *, .status.settled .day { animation: none; }
.status-head { display: flex; align-items: center; gap: 14px; font-size: clamp(1.7rem, 4.4vw, 2.5rem); text-transform: uppercase; margin: 10px 0 8px; }
.status-sub { margin: 38px 0 12px; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .04em; }
.dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ghost); }
.dot.lg { width: 16px; height: 16px; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--upd); } .dot.bad { background: var(--danger); }
.uptime { margin-top: 16px; padding: 20px 22px 18px; }
.uptime > header { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.uptime h2 { margin: 0 6px 0 0; font-size: 1.25rem; }
.state-word { font-weight: 600; font-size: .9rem; }
.uptime-total { color: var(--muted); font-size: .9rem; } .uptime-total b { color: var(--text); font-size: 1rem; }
.uptime-range { margin: 16px 0 8px; font: 700 .7rem var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.days { display: flex; gap: 3px; height: 44px; }
.days.hours { height: 30px; }
.day { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; border-radius: 3px; overflow: hidden; cursor: default; transform-origin: bottom; animation: grow-y .45s cubic-bezier(.2, .8, .2, 1) both; }
.day i { display: block; min-height: 3px; border-radius: 1px; }
.day i.on { background: var(--ok); } .day i.upd { background: var(--upd); } .day i.off { background: var(--danger); }
.day.empty { background: var(--panel-3); }
.day:hover, .day:focus-visible { filter: brightness(1.25); outline: none; }
.day:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.uptime-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: .75rem; color: var(--faint); }
.uptime-key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: .88rem; color: var(--muted); }
.uptime-key span { display: inline-flex; align-items: center; gap: 7px; }
.uptime-key i { width: 10px; height: 10px; border-radius: 50%; }
.uptime-key i.on { background: var(--ok); } .uptime-key i.upd { background: var(--upd); } .uptime-key i.off { background: var(--danger); }
.uptime-key b { color: var(--text); font-variant-numeric: tabular-nums; }
.upstreams { padding: 4px 20px; }
.upstream { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--border); }
.upstream:first-child { border-top: 0; }
.upstream-state { display: grid; grid-template-columns: 10px 1fr; gap: 0 9px; align-items: center; font-weight: 600; }
.upstream-state .small { grid-column: 2; font-weight: 400; }
.paused-list { margin: 8px 0 0; padding-left: 1.2em; }
@media (max-width: 560px) {
  .days { gap: 2px; height: 38px; }
  .upstream { grid-template-columns: minmax(0, 1fr) auto; }
  .upstream-state { grid-column: 1; grid-row: 2; }
  .upstream .btn { grid-row: 1 / span 2; grid-column: 2; }
  .news-item { padding: 18px; }
}

/* ── mobile navigation ───────────────────────────────────────────────────────
   Up to 860px the navigation (the server sidebar, or the site links of the public pages) is a
   drawer under the navbar. ui.js owns the state: .open on the drawer and the scrim, .nav-open
   on <html>, aria-expanded on the burger. Layers: save bar 30 < scrim 34 < drawer 35 < navbar 45. */
.nav-toggle, .scrim, .site-drawer { display: none; }
@keyframes nav-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
  /* Scroll lock. Safari 15 and older ignore this on <html> (and know no `inert`): there the page can
     still be scrolled behind the scrim. Everything else works, so that is accepted. */
  html.nav-open { overflow: hidden; }
  .topbar { gap: 10px; padding: 0 14px; }
  .topnav { display: none; }

  /* burger: three bars that fold into a cross. 44px target, pulled left so the bars line up with the page edge. */
  .nav-toggle { display: grid; place-content: center; gap: 5px; flex: none; width: 44px; height: 44px; margin: 0 -4px 0 -8px; padding: 0; border: 0; border-radius: var(--r); background: none; color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .nav-toggle span { display: block; width: 20px; height: 2px; border-radius: 1px; background: currentColor; transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .14s ease; }
  .nav-toggle:active span { background: var(--accent); }
  .nav-toggle[aria-expanded=true] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded=true] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
  .nav-toggle[aria-expanded=true] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .scrim { display: block; position: fixed; z-index: 34; inset: 56px 0 0; background: rgba(8, 7, 5, .66); opacity: 0; visibility: hidden; touch-action: pinch-zoom; -webkit-tap-highlight-color: transparent; transition: opacity .28s ease, visibility 0s linear .28s; }
  .scrim.open { opacity: 1; visibility: visible; transition-delay: 0s; }

  /* Closed means off-screen AND visibility: hidden, so its links cannot be tabbed to or read out.
     The visibility flip waits for the slide to finish on the way out and is instant on the way in. */
  .drawer { position: fixed; z-index: 35; top: 56px; bottom: 0; left: 0; width: min(320px, calc(100vw - 56px)); max-height: none; align-self: auto; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; -webkit-tap-highlight-color: transparent; scrollbar-width: thin;
    background: var(--panel); border-right: 1px solid var(--border-strong); box-shadow: 18px 0 40px rgba(0, 0, 0, .5);
    transform: translateX(-104%); visibility: hidden; transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .3s; }
  .drawer.open { transform: none; visibility: visible; transition-delay: 0s; }
  .drawer:focus { outline: none; }
  .drawer .nav:active { background: var(--panel-3); color: var(--text); }
  .drawer.dragging, .scrim.dragging { transition: none; }
  .drawer.open > * { animation: nav-in .32s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(50ms + var(--i, 0) * 16ms); }

  /* the server sidebar as a drawer: finger-sized rows, and a bigger target around the small switches */
  .shell { grid-template-columns: minmax(0, 1fr); background: none; }
  .sidebar { padding: 14px 10px 32px; }
  .sidebar .nav { padding: 11px 10px; }
  .sidebar .switch.sm::before { content: ""; position: absolute; inset: -13px -10px; }
  .sidebar .nav-row { padding-right: 12px; }
  .side-top .btn { min-height: 44px; padding: 0 16px; }
  .side-top .btn.icon-only { width: 44px; padding: 0; }

  /* the public pages' drawer */
  .site-drawer { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px 22px; }
  .site-drawer .nav { padding: 12px 10px; font-size: 1.02rem; }
  .site-drawer .nav.active { color: var(--text); }
  .site-drawer .btn { margin: 16px 2px 0; }
  .drawer-foot { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: auto; padding: 12px 10px 0; font-size: .85rem; }
  .drawer-foot a { color: var(--muted); padding: 12px 0; }
  .drawer-foot a[aria-current=page] { color: var(--text); }

  /* tab strips scroll sideways instead of wrapping into a pile */
  .tabs, .legal-nav { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--border); overscroll-behavior-x: contain; }
  .tabs::-webkit-scrollbar, .legal-nav::-webkit-scrollbar { display: none; }
  .tabs button, .legal-nav a { flex: none; margin-bottom: 0; white-space: nowrap; }

  /* iOS Safari zooms the page when a field with text under 16px is focused, and stays zoomed */
  input[type=text], input[type=number], input[type=password], input[type=tel], input[type=datetime-local], input[type=date], input[type=email], input[type=url], input[type=search], textarea, select, .picker { font-size: 16px; }

  .toasts { left: 12px; right: 12px; top: 66px; align-items: flex-end; }
  .toast { max-width: 100%; }
  .savebar { bottom: 12px; }
}

@media (max-width: 560px) {
  /* the scale board on a phone: three plates to a row (every second row still sits half a plate
     to the right), five rows, and lettering small enough to stay inside a plate */
  .scales { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scales-wrap { padding-right: 15%; }
  .scales .scale { min-width: 0; font-size: .64rem; letter-spacing: .03em; overflow-wrap: anywhere; }
  .scales .scale:nth-child(n) { transform: none; --shift: translateX(0); }
  .scales .scale:nth-child(6n+4), .scales .scale:nth-child(6n+5), .scales .scale:nth-child(6n+6) { transform: translateX(calc(50% + 3px)); --shift: translateX(calc(50% + 3px)); }
  .scales .scale:nth-child(n+16) { display: none; }
  .scales .scale:not(.locked):nth-child(3n) { background: var(--accent); }
  .scales .scale:not(.locked):nth-child(4n) { background: #e08f2c; }
  .scales .scale:not(.locked):nth-child(5n) { background: #f7bd68; }

  /* room for the server switcher: the mark alone says "Pangobot" */
  .topbar.compact .brand span { display: none; }
  .topbar.compact .account .ic { display: none; } /* the bell needs the room; the avatar alone still reads as a menu */
  .topbar.compact .account { padding: 0 4px; }
  .notes { max-height: 55vh; }
  /* navbar menus span the screen instead of hanging off a button that may sit near its edge */
  .topbar .menu { position: fixed; top: 58px; left: 10px; right: 10px; min-width: 0; }
  .menu-item { padding: 11px 10px; }
  .main { padding-top: 24px; }
  .savebar { width: auto; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 12px; font-size: .92rem; }
  .savebar .btn { padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}
html { scroll-behavior: smooth; scroll-padding-top: 70px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }