/* Usernamie - aesthetic username generator
   Look: cream gingham paper, ink outlines, hard offset shadows, editorial
   serif headings with a small monospace for labels. Per-vibe accent colours
   come from <body style="--accent..."> (build-pages.js) or site.js. */
:root{
  --ad-top-h:50px; --ad-bot-h:50px; --shell:1080px;
  --bg:#fbf3ea; --paper:#fffdf9; --ink:#231d1a; --muted:#736961;
  --check:rgba(226,120,146,.13);
  --accent:#e9829b; --accent2:#fbe1e8; --vink:#231d1a;
  --serif:"Instrument Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --mono:"DM Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r:4px;
}
:root[data-theme="blush"]{--bg:#fbe4ea;--paper:#fff6f8;--check:rgba(226,100,140,.14);--ink:#3a1f2a;--muted:#7d5f6a}
:root[data-theme="mint"]{--bg:#e7f3ea;--paper:#f7fcf8;--check:rgba(70,150,100,.13);--ink:#1f2f26;--muted:#5f7368}
:root[data-theme="lilac"]{--bg:#ede6f7;--paper:#f9f6fd;--check:rgba(120,90,190,.13);--ink:#2a2138;--muted:#6c6280}
:root[data-theme="night"]{--bg:#1c181f;--paper:#26212b;--check:rgba(255,255,255,.035);--ink:#f4ebef;--muted:#a79ca6}
@media(min-width:760px){:root{--ad-top-h:60px;--ad-bot-h:60px}}
@media(min-width:1100px){:root{--ad-top-h:90px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--sans); color:var(--ink); line-height:1.55; min-height:100dvh;
  background-color:var(--bg);
  background-image:linear-gradient(90deg,var(--check) 50%,transparent 50%),linear-gradient(var(--check) 50%,transparent 50%);
  background-size:26px 26px;
  /* strips are the unit height plus their 2px ink line */
  padding-top:calc(var(--ad-top-h) + 2px);
  padding-bottom:calc(var(--ad-bot-h) + 2px + env(safe-area-inset-bottom));
  overflow-x:hidden;
}
[id]{scroll-margin-top:calc(var(--ad-top-h) + 72px)}
@supports (overflow:clip){body{overflow-x:clip}}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
.bg{display:none}
.mono{font-family:var(--mono)}

/* ---------- ads (markup and rules match the loader in assets/js/ads.js) ---------- */
.adbanner{position:fixed;left:0;right:0;z-index:90;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--paper)}
.adbanner.top{top:0;height:calc(var(--ad-top-h) + 2px);border-bottom:2px solid var(--ink)}
.adbanner.bot{bottom:0;border-top:2px solid var(--ink);
  height:calc(var(--ad-bot-h) + 2px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
.ad-row{display:flex;justify-content:center;width:100%;margin:clamp(18px,3.2vw,30px) 0;overflow:hidden}
.ad-row.wide{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.ad-slot{line-height:0;max-width:100vw}
.ad-slot iframe{border:0;display:block;max-width:100vw}
.ad-native{width:min(var(--shell),100% - 28px);margin:clamp(18px,3.2vw,30px) auto}
[hidden]{display:none !important}

/* ---------- header ---------- */
.site{position:sticky;top:calc(var(--ad-top-h) + 2px);z-index:70;background:var(--paper);
  border-bottom:2px solid var(--ink);display:flex;align-items:center;gap:14px;
  padding:9px clamp(12px,3vw,22px)}
.logo{display:flex;align-items:baseline;gap:8px;font-family:var(--serif);font-size:27px;line-height:1;letter-spacing:-.01em}
.logo .mark{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border:1.5px solid var(--ink);padding:3px 6px;border-radius:2px;transform:rotate(-3deg);background:var(--accent2);color:var(--ink)}
.nav{margin-left:auto;display:flex;gap:2px;flex-wrap:wrap;align-items:center}
.nav a{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:7px 9px;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--ink)}
.themes{display:flex;gap:5px;margin-left:8px;padding-left:10px;border-left:1.5px solid var(--ink)}
.themes button{width:18px;height:18px;border:1.5px solid var(--ink);border-radius:2px;cursor:pointer;padding:0;background:var(--sw)}
.themes button.on{box-shadow:2px 2px 0 var(--ink);transform:translate(-1px,-1px)}
@media(max-width:600px){.logo .mark{display:none}.nav a{padding:6px 6px;font-size:10px}.nav a.more{display:none}.themes{margin-left:4px;padding-left:6px}}
@media(max-width:520px){.eyebrow{font-size:10px;letter-spacing:.1em}}

/* ---------- layout ---------- */
.shell{width:min(var(--shell),100% - 28px);margin:0 auto}
.hero{text-align:center;padding:clamp(28px,5vw,54px) 0 8px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,7vw,68px);line-height:.98;margin:0 0 14px;letter-spacing:-.01em}
.hero h1 em{font-style:italic;color:var(--accent);-webkit-text-stroke:.4px var(--ink)}
:root[data-theme="night"] .hero h1 em{-webkit-text-stroke:0}
.hero p{max-width:600px;margin:0 auto;color:var(--muted);font-size:clamp(15px,2.2vw,17px)}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.crumb a:hover{color:var(--ink);text-decoration:underline}

.card{background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);
  box-shadow:5px 5px 0 var(--accent);padding:clamp(14px,3vw,24px)}

/* ---------- generator ---------- */
.gen .row{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.field{flex:1 1 240px;display:flex;align-items:center;gap:6px;background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);padding:2px 4px 2px 12px}
.field:focus-within{box-shadow:3px 3px 0 var(--accent)}
.field input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;padding:9px 0;outline:0;color:var(--ink)}
.field input::placeholder{color:var(--muted);font-family:var(--mono);font-size:13px}
.field .x{border:0;background:transparent;color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:8px 8px;cursor:pointer}
.field .x:hover{color:var(--ink);text-decoration:underline}
.ctx{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted);margin:12px 2px 0;text-transform:lowercase}
.ctx::before{content:"";display:inline-block;width:9px;height:9px;background:var(--accent);border:1.5px solid var(--ink);margin-right:8px;vertical-align:-1px}

.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1.5px solid var(--ink);border-radius:2px;
  background:var(--paper);font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:transform .1s,box-shadow .1s}
.chip i{width:9px;height:9px;background:var(--c,var(--accent));border:1.5px solid var(--ink);display:inline-block}
@media(hover:hover){.chip:hover{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--ink)}}
.chip.on{background:var(--ink);color:var(--paper)}
.chip.on i{border-color:var(--paper)}

.modes{display:inline-flex;border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.modes button{border:0;background:transparent;padding:9px 14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;color:var(--muted)}
.modes button + button{border-left:2px solid var(--ink)}
.modes button.on{background:var(--ink);color:var(--paper)}

.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-top:16px}
.results.is-display{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.u{position:relative;text-align:left;border:1.5px solid var(--ink);background:var(--paper);border-radius:var(--r);padding:14px 12px 11px;cursor:pointer;
  display:flex;flex-direction:column;gap:7px;min-height:78px;transition:transform .1s,box-shadow .1s}
@media(hover:hover){.u:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--accent)}}
.u:active{transform:translate(1px,1px);box-shadow:none}
.u.copied{background:var(--accent2);box-shadow:3px 3px 0 var(--ink)}
:root[data-theme="night"] .u.copied{background:var(--accent);color:#1c181f}
.u-text{font-size:16.5px;font-weight:700;overflow-wrap:anywhere;line-height:1.25}
.u-text.long{font-size:14px}
.u-text.xlong{font-size:12.5px;letter-spacing:-.01em}
.is-display .u-text{font-size:19px;font-weight:500}
.is-display .u-text.long{font-size:17px}
.is-display .u-text.xlong{font-size:15px}
.u-meta{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.u.copied .u-meta{color:inherit;font-weight:500}

.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;align-items:center}
.btn{display:inline-block;border:2px solid var(--ink);border-radius:var(--r);padding:11px 18px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;background:var(--accent);color:var(--vink);box-shadow:3px 3px 0 var(--ink);transition:transform .08s,box-shadow .08s;line-height:1.2}
:root[data-theme="night"] .btn{color:#1c181f}
@media(hover:hover){.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.btn:focus-visible,.u:focus-visible,.chip:focus-visible,.modes button:focus-visible,.themes button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn.ghost{background:var(--paper);color:var(--ink)}
:root[data-theme="night"] .btn.ghost{color:var(--ink)}
.hint{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted);margin-left:auto}

/* ---------- sections ---------- */
section.block{margin:clamp(24px,4vw,44px) 0}
.block h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.6vw,34px);line-height:1.1;margin:0 0 6px;letter-spacing:-.01em}
.block h2::before{content:"";display:block;width:34px;height:3px;background:var(--accent);border:1.5px solid var(--ink);margin-bottom:10px}
.block .sub{color:var(--muted);margin:0 0 14px;font-size:15px}

.ideas{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0 22px;margin:0;padding:0;list-style:none;counter-reset:idea;
  background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r);padding:6px 16px}
.ideas li{counter-increment:idea;font-weight:600;font-size:15px;padding:9px 0;border-bottom:1px dashed var(--muted);border-bottom-color:color-mix(in srgb,var(--ink) 35%,transparent);overflow-wrap:anywhere;display:flex;gap:10px;align-items:baseline}
.ideas li::before{content:counter(idea,decimal-leading-zero);font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.06em;flex:0 0 auto}

.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:10px}
.vcard{display:flex;flex-direction:column;gap:5px;padding:14px 13px 12px;border:1.5px solid var(--ink);border-radius:var(--r);
  background:var(--paper);position:relative;transition:transform .1s,box-shadow .1s;border-top:7px solid var(--c,var(--accent))}
@media(hover:hover){.vcard:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}}
.vcard b{font-family:var(--serif);font-size:23px;font-weight:400;line-height:1.05}
.vcard span{font-family:var(--mono);font-size:10.5px;color:var(--muted);line-height:1.4;letter-spacing:.02em}

.words{display:flex;flex-wrap:wrap;gap:6px}
.words span{font-family:var(--mono);font-size:12px;padding:5px 9px;border:1.5px solid var(--ink);border-radius:2px;background:var(--accent2);color:var(--ink)}
:root[data-theme="night"] .words span{background:transparent;color:var(--ink)}

.rules{margin:0;padding:0;list-style:none;display:grid;gap:0;counter-reset:rule;background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r)}
.rules li{counter-increment:rule;padding:11px 14px;font-size:15px;display:flex;gap:12px;align-items:baseline}
.rules li + li{border-top:1px dashed var(--muted);border-top-color:color-mix(in srgb,var(--ink) 35%,transparent)}
.rules li::before{content:counter(rule,decimal-leading-zero);font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.06em}

.faq details{border:1.5px solid var(--ink);border-radius:var(--r);background:var(--paper);padding:0 14px;margin-bottom:8px}
.faq summary{cursor:pointer;font-weight:600;padding:12px 0;list-style:none;font-size:15px;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--muted);font-size:18px;line-height:1}
.faq details[open] summary::after{content:"-"}
.faq p{margin:0 0 14px;color:var(--muted);font-size:15px}

.prose{max-width:760px}
.prose h2{font-family:var(--serif);font-weight:400;font-size:24px;margin:24px 0 8px}
.prose p,.prose li{color:var(--muted);font-size:15.5px}

/* ---------- footer ---------- */
footer{margin:40px 0 20px;text-align:center;color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;border-top:2px solid var(--ink);padding-top:16px}
footer .links{display:flex;gap:18px;justify-content:center;margin-bottom:8px}
footer .links a:hover{text-decoration:underline;color:var(--ink)}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;bottom:calc(var(--ad-bot-h) + 2px + env(safe-area-inset-bottom) + 14px);transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--paper);padding:10px 14px;border:2px solid var(--paper);border-radius:2px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;opacity:0;pointer-events:none;
  transition:opacity .15s,transform .15s;z-index:95;max-width:calc(100vw - 30px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:3px 3px 0 var(--accent)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- 404 ---------- */
.big{font-family:var(--serif);font-size:clamp(80px,20vw,160px);line-height:1;color:var(--accent);-webkit-text-stroke:1.5px var(--ink);text-align:center;margin:30px 0 0}

@media(max-width:520px){
  .results{grid-template-columns:repeat(2,1fr)}
  .results.is-display{grid-template-columns:1fr}
  .u-text{font-size:15px}
  .modes{width:100%}
  .modes button{flex:1;text-align:center}
  .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .actions .btn{text-align:center;padding-left:8px;padding-right:8px}
  .actions .btn:nth-child(3){grid-column:1/-1}
  .hint{grid-column:1/-1;margin-left:0;text-align:center}
  .card{box-shadow:4px 4px 0 var(--accent)}
}
@media(prefers-reduced-motion:reduce){*{transition:none !important}}