/* delusionsmp.net — Delusion SMP brand (smp/assets/brand). Colours, radii, shadows and fonts come from /tokens.css
   (loaded first, copied unchanged from the kit), so a token change reaches every page. Dark is the default.
   Rules from the kit: brand violet is the only action colour, lucid = focus/highlight, dream = orbs + shards,
   pills for controls, radius-lg cards, no gradients, one shadow-glow per view, 150 ms ease-out + 1 px lift on hover,
   no looping animation. Class names are shared with smp.js and smp/tools/commands-build.py. */
:root{color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;background:var(--surface-100);color:var(--ink);font:400 16px/26px var(--font-sans)}
a{color:var(--brand);text-underline-offset:3px}a:hover{color:var(--brand-hover)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
main{position:relative;max-width:60rem;margin:0 auto;padding:var(--space-6) var(--space-4) var(--space-16)}

/* header: wordmark (28–36 px tall per the kit) + nav */
header.top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-4);margin-bottom:var(--space-16)}
header.top .brand{display:block;line-height:0}header.top .brand img{height:32px;width:auto}
header.top nav{display:flex;flex-wrap:wrap;gap:var(--space-1)}
header.top nav a{color:var(--ink-muted);text-decoration:none;font-weight:600;font-size:15px;line-height:20px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-pill);transition:background .15s ease-out,color .15s ease-out}
header.top nav a:hover{color:var(--ink);background:var(--surface-200)}header.top nav a[aria-current=page]{color:var(--ink);background:var(--surface-300)}

/* type: Unbounded 600 for display/heading/title, short lines only */
h1{font:600 clamp(36px,6vw,60px)/1.08 var(--font-display);letter-spacing:-.01em;margin:0 0 var(--space-4);text-wrap:balance;max-width:16ch}
h2{font:600 26px/32px var(--font-display);margin:var(--space-16) 0 var(--space-6)}
h3{font:600 18px/24px var(--font-display);margin:0 0 var(--space-2)}
p{max-width:65ch;margin:var(--space-2) 0}
.lead{font-size:19px;line-height:30px;color:var(--ink-muted);max-width:46ch;margin-bottom:var(--space-8)}
.meta{color:var(--ink-muted);font-size:14px;line-height:20px;margin:0 0 var(--space-6)}
code{font:500 .92em/1 var(--font-mono);background:var(--surface-300);color:var(--ink);padding:.2em .5em;border-radius:var(--radius-sm)}
.money{color:var(--money);font-weight:600}.shard{color:var(--shard);font-weight:600}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* hero: headline, one body line, address pill with Copy, one primary button; orbs to the right, never under text */
.hero{position:relative;padding-bottom:var(--space-4)}
.hero>div:not(.orbs){position:relative;z-index:1}
.orbs{position:absolute;inset:-40px -24px auto auto;width:336px;height:384px;pointer-events:none;z-index:0}
.orbs i{position:absolute;display:block;border-radius:50%}
.orbs .ring{right:-48px;top:0;width:288px;height:288px;border:60px solid var(--brand)}
.orbs .eye{right:48px;top:72px;width:96px;height:96px;background:var(--dream)}
.orbs .d1{right:264px;top:216px;width:24px;height:24px;background:var(--lucid)}
.orbs .d2{right:168px;top:336px;width:48px;height:48px;background:var(--brand)}
.orbs .d3{right:300px;top:300px;width:12px;height:12px;background:var(--dream)}
@media (max-width:900px){.orbs{width:200px;height:220px;inset:-56px -40px auto auto}.orbs .ring{width:192px;height:192px;border-width:40px}.orbs .eye{right:24px;top:48px;width:56px;height:56px}.orbs .d1,.orbs .d2,.orbs .d3{display:none}.hero>div:not(.orbs){padding-top:var(--space-12)}}
@media (max-width:560px){.orbs{width:150px;height:150px;inset:-24px -40px auto auto}.orbs .ring{width:144px;height:144px;border-width:30px;right:0}.orbs .eye{right:46px;top:40px;width:44px;height:44px}.hero>div:not(.orbs){padding-top:120px}}

.join{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin:0 0 var(--space-3)}
.address{display:inline-flex;align-items:center;gap:var(--space-2);padding:6px 6px 6px var(--space-6);background:var(--surface-300);border:1px solid var(--line-strong);border-radius:var(--radius-pill)}
.ip{font:500 18px/24px var(--font-mono);color:var(--ink);user-select:all}

/* buttons: pills; primary = brand violet, the one featured element gets shadow-glow on hover */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:10px var(--space-6);border-radius:var(--radius-pill);border:1px solid var(--line-strong);background:transparent;color:var(--ink);font:600 15px/22px var(--font-sans);text-decoration:none;cursor:pointer;transition:background .15s ease-out,border-color .15s ease-out,box-shadow .15s ease-out,transform .15s ease-out}
.btn:hover{color:var(--ink);background:var(--surface-200);border-color:var(--ink-muted);transform:translateY(-1px)}
.btn:active{transform:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn.primary:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:var(--on-brand);box-shadow:var(--shadow-glow)}
.btn.small{min-height:36px;padding:6px var(--space-4);font-size:14px}
.address .btn{border-color:transparent;background:var(--surface-200)}.address .btn:hover{background:var(--surface-100);border-color:var(--line-strong)}
/* every label stacked in one grid cell: the button is always as wide as the longest one */
.btn.copy{display:inline-grid;justify-items:center}.btn.copy>span{grid-area:1/1;visibility:hidden}.btn.copy>span.on{visibility:visible}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin:var(--space-8) 0 0}
.row .text-link{font-weight:600;padding:var(--space-2) var(--space-1)}

/* live player count: colour plus a word (kit rule); no pulsing (no looping animation) */
.status{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-4);background:var(--surface-200);border:1px solid var(--line);border-radius:var(--radius-pill);font:500 14px/20px var(--font-mono);color:var(--ink-muted)}
.status[hidden]{display:none}
.status b{color:var(--ink);font-weight:600}
.status .dot{width:8px;height:8px;border-radius:50%;background:var(--success)}
.status.off .dot{background:var(--line-strong)}

/* cards */
.cards{display:grid;gap:var(--space-6);grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--surface-200);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--space-6)}
.card p{margin:0;color:var(--ink-muted)}.card p code{color:var(--ink)}
@media (max-width:640px){.cards{grid-template-columns:1fr}}

/* rules + privacy */
ol.rules{list-style:none;counter-reset:r;padding:0;margin:var(--space-8) 0;max-width:68ch;display:grid;gap:var(--space-3)}
ol.rules li{counter-increment:r;position:relative;padding:var(--space-4) var(--space-6) var(--space-4) 72px;background:var(--surface-200);border:1px solid var(--line);border-radius:var(--radius-lg)}
ol.rules li::before{content:counter(r);position:absolute;left:var(--space-4);top:50%;translate:0 -50%;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--surface-300);color:var(--brand);font:600 16px/1 var(--font-display)}
dl{display:grid;grid-template-columns:minmax(8rem,max-content) 1fr;gap:var(--space-4) var(--space-8);margin:var(--space-8) 0;padding:var(--space-6);background:var(--surface-200);border:1px solid var(--line);border-radius:var(--radius-lg)}
dt{color:var(--ink);font-weight:700}dd{margin:0;max-width:65ch;color:var(--ink-muted)}
@media (max-width:640px){dl{grid-template-columns:1fr;gap:var(--space-1) 0}dd{margin-bottom:var(--space-3)}}

.badge{display:inline-block;font:700 12px/16px var(--font-sans);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);background:var(--surface-300);color:var(--ink-muted);white-space:nowrap}

/* footer: links, disclaimer and operator line in small, ink-muted */
footer{margin-top:var(--space-16);padding-top:var(--space-6);border-top:1px solid var(--line);color:var(--ink-muted);font-size:13px;line-height:20px}
footer p{margin:var(--space-1) 0;max-width:none}footer a{color:var(--ink-muted)}footer a:hover{color:var(--ink)}

@media (max-width:560px){header.top{flex-direction:column;align-items:flex-start;margin-bottom:var(--space-12)}header.top nav{margin-left:calc(-1*var(--space-3))}.address{width:100%;justify-content:space-between}h2{font-size:22px;line-height:28px}}

/* ---- commands: /commands/ page and the front-page modal (same markup, generated by smp/tools/commands-build.py) ---- */
.cmd-tools{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin:0 0 var(--space-6)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chip{cursor:pointer;font:600 14px/20px var(--font-sans);padding:6px var(--space-4);border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:transparent;color:var(--ink-muted);transition:background .15s ease-out,color .15s ease-out,border-color .15s ease-out}
.chip:hover{color:var(--ink);border-color:var(--ink-muted)}
.chip.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.chip.settler.on{background:var(--money);border-color:var(--money);color:var(--on-money)}.chip.founder.on{background:var(--lucid);border-color:var(--lucid);color:var(--on-lucid)}
.cmd-search{flex:1 1 14rem;min-width:0;font:400 16px/24px var(--font-sans);color:var(--ink);background:var(--surface-300);border:1px solid var(--line-strong);border-radius:var(--radius-md);padding:8px var(--space-4)}
.cmd-search::placeholder{color:var(--ink-muted)}
.cmd-cat h2{font-size:20px;line-height:26px;margin:var(--space-8) 0 var(--space-3)}.cmd-cat:first-of-type h2{margin-top:0}.cmd-cat[hidden]{display:none}
.cmd-list{list-style:none;margin:0;padding:0;background:var(--surface-200);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.cmd{display:grid;grid-template-columns:minmax(9rem,16rem) 1fr auto;gap:var(--space-2) var(--space-4);align-items:start;padding:var(--space-4) var(--space-6);border-top:1px solid var(--line)}
.cmd:first-child{border-top:0}.cmd[hidden]{display:none}
.cmd-name{font:500 14px/22px var(--font-mono);color:var(--brand);text-align:left;background:none;border:0;padding:0;margin:0;word-break:break-word;min-width:0}
button.cmd-name{cursor:copy;border-radius:var(--radius-sm)}button.cmd-name:hover{color:var(--brand-hover);text-decoration:underline}button.cmd-name.copied{color:var(--success)}
.cmd[data-rank=settler] .cmd-name{color:var(--money)}.cmd[data-rank=founder] .cmd-name{color:var(--lucid)}
.cmd-text{min-width:0}.cmd-text p{margin:0;max-width:60ch}.cmd-text .limits{color:var(--ink-muted);font-size:14px;line-height:20px;margin-top:var(--space-1)}
.badge.settler{background:var(--money);color:var(--on-money)}.badge.founder{background:var(--lucid);color:var(--on-lucid)}
.cmd-empty[hidden]{display:none}
@media (max-width:640px){.cmd{grid-template-columns:1fr auto;padding:var(--space-4)}.cmd-text{grid-column:1/-1}}

/* modal */
.modal{width:min(60rem,calc(100% - 2*var(--space-4)));max-height:min(85vh,60rem);margin:auto;padding:0;background:var(--surface-100);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.modal::backdrop{background:rgb(13 10 18 / .8)}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface-100);z-index:1}
.modal-head h2{margin:0;font-size:22px;line-height:28px}
.x{cursor:pointer;width:40px;height:40px;display:grid;place-items:center;font:400 24px/1 var(--font-sans);color:var(--ink);background:var(--surface-200);border:1px solid var(--line-strong);border-radius:50%;transition:background .15s ease-out}.x:hover{background:var(--surface-300)}
.modal-body{padding:var(--space-6)}
.modal[open]{animation:rise .15s ease-out}@keyframes rise{from{transform:translateY(4px);opacity:.6}to{transform:none;opacity:1}}

@media (prefers-reduced-motion:reduce){*{transition:none!important}.modal[open]{animation:none}.btn:hover{transform:none}}