:root { color-scheme:dark; font-family:system-ui,sans-serif; background:#110d09; color:#f3e7d1; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100dvh; display:grid; grid-template-rows:auto 1fr;
  background:radial-gradient(ellipse at top,#412c17,#1b140e 48%,#110d09 80%); }
header { padding:1.2rem clamp(1rem,4vw,2.5rem); }
a { color:#e8c766; text-underline-offset:.25em; }
main { align-self:center; width:min(28rem,calc(100% - 2rem)); margin:1rem auto 3rem; padding:clamp(1.4rem,5vw,2.6rem);
  border:1px solid #8f6c36; border-radius:1.1rem; background:#1c150ff5; box-shadow:0 1.5rem 5rem #0008; }
.seal { display:grid; place-items:center; width:3rem; height:3rem; border:1px solid #b88a47; border-radius:.65rem .65rem 1.1rem 1.1rem;
  background:#392718; color:#f2d47e; font:bold 1.65rem Georgia,serif; }
.eyebrow { margin:1.3rem 0 .3rem; font-size:.7rem; letter-spacing:.2em; color:#ccb279; }
h1 { margin:.25rem 0; color:#f2d47e; font-size:clamp(1.6rem,6vw,2.1rem); }
p { line-height:1.6; }
#description, #nickname { color:#c4b498; }
form, label { display:grid; gap:.5rem; }
form { gap:1rem; margin-top:1.5rem; }
input, select, button { font:inherit; min-height:2.9rem; padding:.6rem .75rem; border:1px solid #775c33; border-radius:.5rem; }
input, select { background:#110d09; color:inherit; width:100%; }
button { cursor:pointer; color:#211609; background:#ebca73; font-weight:700; }
button.secondary { background:transparent; color:#efdba8; }
button:disabled { opacity:.55; cursor:default; }
:focus-visible { outline:2px solid #f2d47e; outline-offset:3px; }
#status { color:#f6bc93; }
#status:empty, #nickname:empty { display:none; }

#nickhelp { font-size: 13px; opacity: .8; margin: 4px 0 10px; line-height: 1.5; }
#suggest { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
#suggest[hidden] { display: none; }
#suggest .chip { width: auto; padding: 5px 11px; font-size: 13px; border-radius: 999px; background: transparent; border: 1px solid #b8893a; color: inherit; cursor: pointer; }
#suggest .chip:hover { background: rgba(184, 137, 58, .22); }