/* DnD Namer v2 — parchment + impulse gold, game-feel motion system */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#F7F3EC; --surface:#FFFDF8; --inset:#EFEAE0; --border:#E4DDD0;
  --text:#262220; --text-2:#57504A; --text-3:#8A8175;
  --acc:#F5A524; --acc-deep:#B45309; --acc-on:#2A1E05; --acc-text:#92400E;
  --acc2:#6D28D9; --acc2-text:#5B21B6;
  --font-display:'Cinzel','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --font-ui:'Nunito Sans',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --sh-rest:0 1px 1px hsl(35deg 25% 12% / .06),0 2px 2px hsl(35deg 25% 12% / .06),0 4px 4px hsl(35deg 25% 12% / .06),0 8px 8px hsl(35deg 25% 12% / .06);
  --sh-lift:0 2px 2px hsl(35deg 25% 12% / .07),0 4px 4px hsl(35deg 25% 12% / .07),0 8px 8px hsl(35deg 25% 12% / .07),0 16px 16px hsl(35deg 25% 12% / .07),0 32px 32px hsl(35deg 25% 12% / .05);
  --sh-press:0 1px 1px hsl(35deg 25% 12% / .10),0 1px 2px hsl(35deg 25% 12% / .10);
  --sh-cta:0 1px 1px hsl(35deg 25% 12% / .08),0 2px 4px hsl(35deg 25% 12% / .08),0 6px 12px hsl(38deg 92% 50% / .35);
  --sh-cta-hover:0 2px 2px hsl(35deg 25% 12% / .08),0 4px 8px hsl(35deg 25% 12% / .08),0 10px 24px hsl(38deg 92% 50% / .45);
  --ease-pop:cubic-bezier(.34,1.56,.64,1); --ease-out:cubic-bezier(.22,1,.36,1); --ease-press:cubic-bezier(.4,0,.6,1);
  --t-press:90ms; --t-hover:180ms;
}
@media(prefers-color-scheme:dark){:root{
  --bg:#191613; --surface:#242019; --inset:#141210; --border:#38322A;
  --text:#EDE7DC; --text-2:#B5AC9E; --text-3:#877F72;
  --acc:#FFB224; --acc-deep:#B45309; --acc-on:#2A1E05; --acc-text:#FFC85C;
  --acc2:#7C3AED; --acc2-text:#C4B5FD;
  --sh-rest:0 1px 2px hsl(0 0% 0% / .35),0 4px 8px hsl(0 0% 0% / .3),inset 0 1px 0 hsl(40deg 20% 90% / .06);
  --sh-lift:0 4px 8px hsl(0 0% 0% / .4),0 12px 28px hsl(0 0% 0% / .35),inset 0 1px 0 hsl(40deg 20% 90% / .08);
  --sh-press:0 1px 2px hsl(0 0% 0% / .5);
  --sh-cta:0 2px 4px hsl(0 0% 0% / .4),0 6px 14px hsl(38deg 92% 50% / .3);
  --sh-cta-hover:0 4px 8px hsl(0 0% 0% / .4),0 10px 26px hsl(38deg 92% 50% / .42);
}}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ---------- header ---------- */
header{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;padding:.9rem 1.25rem;border-bottom:1px solid var(--border);background:var(--surface)}
.logo{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--text)}
.logo-die{filter:drop-shadow(0 2px 3px hsl(35deg 25% 12% / .25));transition:transform var(--t-hover) var(--ease-pop)}
.logo:hover .logo-die{transform:rotate(-12deg) scale(1.08)}
.wordmark{font-family:var(--font-display);font-weight:700;font-size:1.3rem;letter-spacing:.02em}
.wordmark b{color:var(--acc-text)}
.tag{color:var(--text-3);font-size:.82rem;font-weight:600}

/* ---------- structure ---------- */
main{max-width:880px;margin:0 auto;padding:1.4rem 1.25rem 5.5rem}
.crumbs{max-width:880px;margin:0 auto;padding:.7rem 1.25rem 0;font-size:.8rem;color:var(--text-3);font-weight:600}
.crumbs a{color:var(--text-3)}
h1{font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,4.5vw,2.5rem);line-height:1.18;letter-spacing:.01em;margin:.4rem 0 .6rem;
  background:linear-gradient(120deg,var(--text) 55%,var(--acc-text));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
h2{font-family:var(--font-display);font-weight:600;font-size:1.25rem;margin:2.2rem 0 .7rem}
h3{font-size:1rem;margin:1.2rem 0 .4rem;color:var(--text-2)}
a{color:var(--acc2-text)}
.lede{color:var(--text-2);margin-bottom:1.2rem;font-size:1.05rem}

/* ---------- generator card ---------- */
.card,.gen{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:1.15rem;box-shadow:var(--sh-rest)}
.gen{margin:1.3rem 0}
.gen.shaking{animation:btn-shake 420ms var(--ease-press)}
.controls{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.reroll{display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(180deg,var(--acc),var(--acc-deep));color:#fff;text-shadow:0 1px 2px rgb(0 0 0/.25);
  border:0;border-radius:13px;padding:.8rem 1.5rem;font-family:var(--font-ui);font-weight:800;font-size:1.02rem;cursor:pointer;min-height:48px;
  box-shadow:var(--sh-cta);transform:translateY(0);
  transition:transform var(--t-press) var(--ease-press),box-shadow var(--t-press) var(--ease-press)}
.reroll:hover{transform:translateY(-2px);box-shadow:var(--sh-cta-hover)}
.reroll:active{transform:translateY(1px) scale(.97);box-shadow:var(--sh-press)}
.die{font-size:1.25rem;display:inline-block}
.reroll.rolling .die{animation:dice-roll 500ms var(--ease-pop)}
.count-wrap{color:var(--text-2);font-size:.85rem;font-weight:700;display:inline-flex;align-items:center;gap:.45rem}
select.count{appearance:none;background:var(--inset) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238A8175'/%3E%3C/svg%3E") no-repeat right .7rem center;
  color:var(--text);border:1px solid var(--border);border-radius:10px;padding:.5rem 1.9rem .5rem .8rem;font:inherit;font-weight:700;cursor:pointer;min-height:44px}

/* ---------- name chips ---------- */
.names{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.55rem}
.names li,.chip{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.4rem;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.6rem .35rem .6rem .75rem;min-height:48px;
  font-family:var(--font-display);font-weight:600;font-size:1.02rem;letter-spacing:.02em;cursor:pointer;overflow:hidden;
  box-shadow:var(--sh-rest);
  transition:transform var(--t-hover) var(--ease-out),box-shadow var(--t-hover) var(--ease-out),border-color var(--t-hover) var(--ease-out)}
.names li:hover,.chip:hover{transform:translateY(-4px);box-shadow:var(--sh-lift);border-color:var(--acc)}
.names li:active,.chip:active{transform:translateY(0) scale(.97)}
.chip.pop{animation:card-in 380ms var(--ease-pop) both}
.chip.copied{animation:copy-pop 300ms var(--ease-pop);outline:2px solid var(--acc);outline-offset:-1px}
.chip .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.star{background:none;border:0;font-size:1.15rem;line-height:1;color:var(--text-3);cursor:pointer;padding:.35rem;border-radius:8px;
  position:relative;transition:transform var(--t-press) var(--ease-pop),color var(--t-hover)}
.star::after{content:"";position:absolute;inset:-9px}
.star:hover{color:var(--acc-text);transform:scale(1.2)}
.chip.saved .star,.chip.saved:hover .star{color:var(--acc-text)}
.star.burst{animation:star-burst 500ms var(--ease-pop)}
.hint{color:var(--text-3);font-size:.8rem;font-weight:600;margin-top:.85rem}
.forged{color:var(--acc-text)}

/* ---------- prose / related ---------- */
.prose p{margin:.5rem 0;color:var(--text-2)}
.prose em{color:var(--acc2-text);font-style:normal;font-weight:700}
.links{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem}
.links li a{display:inline-flex;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:22px;
  padding:.42rem .95rem;font-size:.87rem;font-weight:700;text-decoration:none;color:var(--text-2);box-shadow:var(--sh-rest);min-height:40px;
  transition:transform var(--t-hover) var(--ease-out),box-shadow var(--t-hover) var(--ease-out),border-color var(--t-hover),color var(--t-hover)}
.links li a:hover{transform:translateY(-2px);box-shadow:var(--sh-lift);border-color:var(--acc2);color:var(--acc2-text)}
.letters li a{min-width:2.6rem;justify-content:center;text-transform:uppercase;font-family:var(--font-display)}
.cards{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.7rem;margin-top:.6rem}
.cards a{display:block;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1rem;text-decoration:none;color:var(--text);
  box-shadow:var(--sh-rest);transition:transform var(--t-hover) var(--ease-out),box-shadow var(--t-hover) var(--ease-out),border-color var(--t-hover)}
.cards a:hover{transform:translateY(-4px);box-shadow:var(--sh-lift);border-color:var(--acc)}
.cards strong{display:block;font-family:var(--font-display);font-size:1.08rem;margin-bottom:.25rem}
.cards span{color:var(--text-3);font-size:.8rem;font-weight:600}

/* ---------- toast / saved bar / fab ---------- */
#toast{position:fixed;left:50%;bottom:5.4rem;transform:translate(-50%,16px);background:var(--text);color:var(--bg);
  padding:.6rem 1.1rem;border-radius:12px;font-weight:800;font-size:.9rem;opacity:0;pointer-events:none;z-index:60;
  box-shadow:var(--sh-lift);transition:opacity 180ms var(--ease-out),transform 220ms var(--ease-pop)}
#toast.show{opacity:1;transform:translate(-50%,0)}
#savedbar{position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:50;display:none;flex-direction:column;align-items:flex-end;gap:.5rem}
#savedbar.has{display:flex}
.saved-toggle{background:var(--acc2);color:#fff;border:0;border-radius:22px;padding:.6rem 1.05rem;font:inherit;font-weight:800;font-size:.88rem;cursor:pointer;
  box-shadow:var(--sh-lift);min-height:44px;transition:transform var(--t-press) var(--ease-pop)}
.saved-toggle:active{transform:scale(.94)}
.saved-panel{display:none;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:.9rem;max-width:min(320px,88vw);
  max-height:46vh;overflow:auto;box-shadow:var(--sh-lift)}
#savedbar.open .saved-panel{display:block;animation:card-in 260ms var(--ease-pop)}
.saved-panel .names{grid-template-columns:1fr}
.copy-all{margin-top:.7rem;width:100%;background:var(--inset);border:1px solid var(--border);border-radius:10px;padding:.55rem;
  font:inherit;font-weight:800;color:var(--text-2);cursor:pointer;min-height:44px}
.copy-all:active{transform:scale(.97)}
#fab{position:fixed;left:50%;transform:translate(-50%,90px);bottom:calc(.9rem + env(safe-area-inset-bottom) + 8px);z-index:49;
  background:linear-gradient(180deg,var(--acc),var(--acc-deep));color:#fff;text-shadow:0 1px 2px rgb(0 0 0/.25);border:0;border-radius:16px;
  padding:.85rem 1.9rem;font:inherit;font-weight:800;font-size:1.05rem;cursor:pointer;box-shadow:var(--sh-cta-hover);min-height:52px;
  opacity:0;pointer-events:none;transition:transform 260ms var(--ease-pop),opacity 200ms var(--ease-out)}
#fab.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
#fab:active{transform:translate(-50%,2px) scale(.96)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--border);padding:1.6rem 1.25rem calc(1.6rem + env(safe-area-inset-bottom));color:var(--text-3);font-size:.85rem;text-align:center;background:var(--surface)}
footer nav{display:flex;gap:1.1rem;justify-content:center;flex-wrap:wrap;margin-bottom:.6rem;font-weight:700}
footer a{color:var(--text-3)}

/* ---------- ripple ---------- */
.ripple{position:absolute;border-radius:50%;background:hsl(38deg 92% 50% / .30);transform:scale(0);animation:ripple 450ms var(--ease-out) forwards;pointer-events:none}

/* ---------- keyframes ---------- */
@keyframes dice-roll{0%{transform:rotate(0) scale(1)}30%{transform:rotate(160deg) scale(1.25)}60%{transform:rotate(310deg) scale(.95)}100%{transform:rotate(360deg) scale(1)}}
@keyframes btn-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px) rotate(-.4deg)}75%{transform:translateX(3px) rotate(.4deg)}}
@keyframes card-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes copy-pop{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes star-burst{0%{transform:scale(1)}45%{transform:scale(1.55) rotate(18deg)}100%{transform:scale(1)}}
@keyframes ripple{to{transform:scale(2.5);opacity:0}}

/* ---------- mobile ---------- */
@media(max-width:640px){
  header{padding:.75rem 1rem}
  .tag{display:none}
  main{padding:1rem 1rem 6.5rem}
  .names{grid-template-columns:repeat(2,1fr)}
  .controls{flex-direction:row;justify-content:space-between}
  .reroll{flex:1;justify-content:center}
}
@media(max-width:420px){
  .controls{flex-direction:column;align-items:stretch;gap:.6rem}
  .reroll{width:100%;white-space:nowrap;font-size:1rem}
  .count-wrap{justify-content:center}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto}}