/* The site's shell: legiondnb.com's own typefaces, tokens and pill controls.
   Poppins and Avenir Next Condensed are the files that site self-hosts (vendor/fonts). */
@font-face{font-family:"Poppins";font-weight:400;font-display:swap;src:url(/site/fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:500;font-display:swap;src:url(/site/fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:600;font-display:swap;src:url(/site/fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:700;font-display:swap;src:url(/site/fonts/poppins-700.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:800;font-display:swap;src:url(/site/fonts/poppins-800.woff2) format("woff2")}
@font-face{font-family:"ANC";font-weight:600;font-display:swap;src:local("Avenir Next Condensed Demi Bold"),local("Avenir Next Condensed"),url(/site/fonts/avenir-next-cond-600.woff2) format("woff2")}
@font-face{font-family:"ANC";font-weight:800;font-display:swap;src:local("Avenir Next Condensed Heavy"),local("Avenir Next Condensed Bold"),url(/site/fonts/avenir-next-cond-800.woff2) format("woff2")}

/* Every size on the site is written in design pixels of a 1280 x 800 window and multiplied by --u,
   which is one of those pixels rendered: the window's own scale against that base, whichever of
   width or height is tighter. Each page's main is that box, centred, so the page is the same
   picture at any window size instead of some parts growing and the capped ones staying put, the
   way the board's fit() solves one tile and derives the table from it. The sizes were taken from
   the window Kyran approved the design in, 1112 x 720, and multiplied by 1280/1112, so they render
   the same there (2026-09-20). */
:root{
  --u:min(100vw / 1280,100vh / 800);
  --ink:#08080C;--ink-2:#0A0A0F;--ink-3:#101017;--line:#1E1E28;
  --fg:#EDEBE6;--fg-dim:#9A968E;--fg-mute:#625E58;--cta:#ECEAE4;
  --body:"Poppins","Avenir Next",system-ui,sans-serif;
  --cond:"ANC","Avenir Next Condensed","Avenir Next",sans-serif;
  --mono:"SF Mono","SFMono-Regular","Menlo","Consolas",ui-monospace,monospace;
  --green:#3ddc84;--red:#ff5d5d;--purple:#a26bff;--gold:#f0a83a;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;display:grid;place-content:center;overflow:hidden;background:var(--ink);color:var(--fg);font:calc(17.3*var(--u))/1.6 var(--body);-webkit-font-smoothing:antialiased}
p{margin:0}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}

/* the card wall behind every screen */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--ink)}
.bg i{position:absolute;inset:-30%;background-image:url(/board/assets/back.webp);background-size:calc(140.4*var(--u)) auto;background-repeat:repeat;transform:rotate(-8deg);opacity:.2;filter:saturate(.4) contrast(1.05);animation:pan 110s linear infinite}
.bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,rgba(16,16,23,.55) 0%,rgba(8,8,12,.92) 58%,var(--ink) 100%)}
@keyframes pan{from{transform:rotate(-8deg) translate3d(0,0,0)}to{transform:rotate(-8deg) translate3d(calc(-140.4*var(--u)),calc(-197.1*var(--u)),0)}}
@media (prefers-reduced-motion:reduce){.bg i{animation:none}}

/* brand */
.brand{display:flex;align-items:center;gap:calc(16.1*var(--u))}
.brand .mark{width:calc(71.4*var(--u));height:calc(71.4*var(--u));flex:none;background:currentColor;-webkit-mask:url(/site/brand/legion-mark.png) center/contain no-repeat;mask:url(/site/brand/legion-mark.png) center/contain no-repeat}
.brand .wm{width:calc(198*var(--u));height:calc(34.5*var(--u));background:currentColor;-webkit-mask:url(/site/brand/legion-wordmark.svg) left center/contain no-repeat;mask:url(/site/brand/legion-wordmark.svg) left center/contain no-repeat}
.brand .tag{font:600 calc(11.5*var(--u))/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--fg-dim);margin-top:calc(9.2*var(--u))}
.brand.sm .mark{width:calc(39.1*var(--u));height:calc(39.1*var(--u))}
.brand.sm .wm{width:calc(110.5*var(--u));height:calc(19.6*var(--u))}
.brand.sm .tag{font-size:calc(9.2*var(--u));margin-top:calc(5.8*var(--u))}

/* controls */
.cta,.ghost{display:inline-flex;align-items:center;justify-content:center;min-height:calc(52.9*var(--u));padding:0 calc(25.3*var(--u));border-radius:999px;white-space:nowrap;cursor:pointer;font-family:var(--body)}
.cta{background:var(--cta);color:#0a0a0f;font-weight:800;font-size:calc(16.1*var(--u));border:1px solid var(--cta)}
.cta:disabled{opacity:.35;cursor:default}
.ghost{border:1px solid var(--line);background:rgba(16,16,23,.72);color:var(--fg);font-weight:600;font-size:calc(16.1*var(--u))}
.ghost:hover{border-color:var(--fg-mute)}
.wide{width:100%}
.back{display:inline-flex;align-items:center;gap:calc(6.9*var(--u));padding:calc(9.2*var(--u)) calc(16.1*var(--u)) calc(9.2*var(--u)) calc(13.8*var(--u));border:1px solid var(--line);border-radius:999px;background:rgba(16,16,23,.72);font:700 calc(13.8*var(--u))/1 var(--body);color:var(--fg-dim);cursor:pointer}
.back:hover{border-color:var(--fg-mute);color:var(--fg)}
.lab{font:700 calc(11.5*var(--u))/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--fg-mute)}
.seg{display:flex;gap:calc(4.6*var(--u));padding:calc(4.6*var(--u));border:1px solid var(--line);border-radius:999px;background:rgba(8,8,12,.6)}
.seg button{flex:1;border:none;background:none;text-align:center;padding:calc(11.5*var(--u)) calc(6.9*var(--u));border-radius:999px;font:600 calc(15*var(--u)) var(--body);color:var(--fg-dim);cursor:pointer;white-space:nowrap}
.seg button.on{background:var(--cta);color:#0a0a0f;font-weight:800}
input.code,input.pw{border:1px solid var(--line);background:rgba(8,8,12,.86);border-radius:999px;min-height:calc(52.9*var(--u));width:100%;text-align:center;font:700 calc(19.6*var(--u))/1 var(--body);letter-spacing:.34em;color:var(--fg);outline:none;padding:0 calc(16.1*var(--u))}
input.pw{letter-spacing:.3em;font-size:calc(18.4*var(--u))}
input.code::placeholder,input.pw::placeholder{color:var(--fg-mute);font-weight:600;letter-spacing:.24em}
input.code:focus,input.pw:focus{border-color:var(--fg-mute)}
.x{border:1px solid var(--line);background:rgba(8,8,12,.6);color:var(--fg-mute);border-radius:999px;width:calc(32.2*var(--u));height:calc(32.2*var(--u));padding:0;display:grid;place-items:center;font:400 calc(19.6*var(--u))/1 var(--body);cursor:pointer;flex:none}
.x:hover{color:var(--fg);border-color:var(--fg-mute)}
.err{color:var(--red);font-size:calc(15*var(--u));min-height:1.2em;text-align:center}


.ver{position:fixed;left:calc(29.9*var(--u));bottom:calc(20.7*var(--u));z-index:3;font:500 calc(11.5*var(--u)) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute)}