@font-face{font-family:Monocraft;src:url("fonts/Monocraft.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Monocraft;src:url("fonts/Monocraft-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Monocraft;src:url("fonts/Monocraft-Italic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Monocraft;src:url("fonts/Monocraft-Bold-Italic.otf") format("opentype");font-weight:700;font-style:italic;font-display:swap}
.nickname-intro{padding-block:32px 24px}
.nickname-intro .eyebrow{margin-bottom:12px}
.nickname-intro h1{margin-bottom:12px}
.nickname-tool{padding-block:24px 48px}
.nickname-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:65px;align-items:start}
.nickname-tool label,.nickname-tool legend{display:block;font-size:max(1.125rem,calc(1.125rem - 2px));font-weight:650;margin-bottom:10px}
.nickname-tool input,.nickname-tool textarea,.nickname-tool button{font-size:max(1.125rem,calc(1.125rem - 2px));max-width:100%}
.nickname-tool input[type=text],.nickname-tool input[type=number],.nickname-tool textarea{width:100%;min-width:0;border:1px solid #8c987e;border-radius:2px;background:#181e17;color:var(--ink);padding:12px 14px;line-height:1.6}
.nickname-tool input:focus-visible,.nickname-tool textarea:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.nickname-tool input[aria-invalid=true]{border:2px solid #efa89a}
.nickname-tool input[type=color]{width:58px;height:57px;flex:0 0 58px;border:1px solid #8c987e;padding:4px;background:#181e17;cursor:pointer}
.nick-field{margin-bottom:24px;min-width:0}
.nickname-tool .nick-help{font-size:max(1.125rem,calc(1.125rem - 2px));line-height:1.7;color:var(--muted);margin:12px 0 22px}
.nick-presets{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.nick-presets button{border:1px solid #8c987e;background:#2c3527;color:var(--ink);padding:11px 15px;min-height:48px;border-radius:2px}
.nick-presets button:hover{background:#3c4832}
.nick-error{color:#ffb8a8;min-height:1.7em;font-size:max(1.125rem,calc(1.125rem - 2px))}
.nickname-result{min-width:0;padding:28px;border:1px solid var(--line);background:#252d22}
.nickname-result h2{font-size:max(1.125rem,calc(2.25rem - 2px));margin-bottom:24px}
.nick-preview-box{min-height:140px;display:flex;align-items:center;justify-content:center;padding:20px;background:#121812;border:1px solid #64705a;overflow-wrap:anywhere}
#nickname-preview{font:max(1.125rem,calc(2rem - 2px))/1.5 Monocraft,ui-monospace,monospace;font-variant-ligatures:none;text-align:center;word-break:break-all;max-width:100%}
#nickname-preview span{white-space:pre-wrap}
.nickname-tool textarea{font-family:ui-monospace,monospace;resize:vertical;overflow-wrap:anywhere;min-height:140px;display:block;margin-bottom:18px}
.nickname-tool button:disabled{opacity:.5;filter:grayscale(1);cursor:not-allowed}
#nickname-status{min-height:1.7em;color:var(--accent);margin-bottom:12px;font-size:max(1.125rem,calc(1.125rem - 2px))}
#nickname-note:empty,#nickname-status:empty{min-height:0;margin:0}
.nickname-tool #nickname-copy-help{margin-bottom:16px}
.nick-reset{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.nickname-tool .nick-command-link{display:inline;padding:0;border:0;background:none;color:var(--accent);text-decoration:underline;text-underline-offset:4px;cursor:pointer;font:inherit}
.nick-command-link:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.nick-instructions{border-top:1px solid var(--line);margin-top:55px;padding-top:40px}
.nick-instructions h2{font-size:max(1.125rem,calc(2.25rem - 2px))}
@media(max-width:1050px){.nickname-layout{grid-template-columns:minmax(0,1fr);gap:25px}.nickname-result{max-width:100%}}
@media(max-width:480px){.nickname-intro{padding-block:24px 20px}.nickname-tool{padding-top:20px}.nickname-result{padding:22px 16px}.nick-preview-box{padding:15px 10px}#nickname-preview{font-size:max(1.125rem,calc(1.5rem - 2px))}.nickname-result h2,.nick-instructions h2{font-size:max(1.125rem,calc(2.25rem - 2px))}.nickname-tool .button{width:100%;text-align:center}}
.nick-palette{border:0;padding:0;margin:0 0 16px}
.nick-palette-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:0}
.nick-palette-controls button{border:1px solid #8c987e;background:#2c3527;color:var(--ink);padding:9px 12px;min-height:44px;border-radius:2px;font-size:max(1.125rem,calc(1.125rem - 2px))}
.nick-palette-controls button:hover{background:#3c4832}
@media(min-width:1051px){.nickname-result{position:sticky;top:24px}}
.nick-formatting{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;border:0;padding:0;margin:0 0 18px}
.nick-formatting label{display:flex;align-items:center;gap:8px;min-height:44px;font-weight:400;margin:0}
.nick-formatting input[type=checkbox]{width:22px;height:22px;accent-color:var(--accent);flex:0 0 auto}

#nickname-gradient-controls{margin-bottom:0}
.nickname-tool #nickname-position-help{margin:12px 0 8px}
.nick-gradient{height:164px;position:relative;margin-inline:22px}
.nick-gradient-track{position:absolute;top:64px;left:0;right:0;height:28px;border:1px solid #9aa58d;border-radius:2px;pointer-events:none}
.nick-stop{position:absolute;top:8px;width:44px;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;gap:4px}
.nickname-tool .nick-stop-color{position:relative;width:44px;height:44px;display:flex;align-items:center;justify-content:center;margin:0;border:0;background:none;padding:0;cursor:pointer}
.nick-stop-chip{display:block;width:28px;height:28px;background:var(--stop-color);border:3px solid #f0eddd;border-radius:50%;box-shadow:0 0 0 1px #171c15}
.nick-stop-color:focus-within .nick-stop-chip{outline:3px solid var(--accent);outline-offset:3px}
.nick-stop-drag{position:relative;isolation:isolate;width:44px;height:44px;color:var(--ink);border-radius:3px;cursor:ew-resize;touch-action:none;user-select:none;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px}
.nick-stop-drag:before{content:"";position:absolute;inset:0 10px;border:1px solid #8c987e;background:#252d22;border-radius:3px;z-index:-1}
.nick-stop-number{line-height:1.2}
.nick-stop-grip{display:block;width:14px;height:8px;background:repeating-linear-gradient(to bottom,currentColor 0 2px,transparent 2px 4px);opacity:.8}
.nick-stop-drag[aria-disabled=true]{opacity:.5;filter:grayscale(1);cursor:not-allowed}
.nick-stop-drag:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.nick-stop:focus-within,.nick-stop:hover{z-index:2}
.nick-stop:active{z-index:3}
.nickname-tool .nick-stop-remove{position:relative;isolation:isolate;width:44px;height:44px;padding:0;flex:0 0 44px;border:0;background:none;color:#ffb8a8;font-size:max(1.125rem,calc(1.5rem - 2px));line-height:1;cursor:pointer}
.nick-stop-remove:before{content:"";position:absolute;inset:0 10px;border:1px solid #8c987e;background:#252d22;border-radius:3px;z-index:-1}
.nick-stop-remove:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
#nickname-space-evenly{border:1px solid #8c987e;background:#2c3527;color:var(--ink);padding:9px 12px;min-height:44px;border-radius:2px}
#nickname-color-dialog{width:min(440px,calc(100% - 32px));max-height:90dvh;overflow:auto;padding:24px;border:1px solid #8c987e;border-radius:3px;background:#252d22;color:var(--ink)}
#nickname-color-dialog::backdrop{background:#000b}
#nickname-color-dialog h2{font-size:max(1.125rem,calc(1.75rem - 2px));margin-bottom:18px}
#nickname-color-dialog label{display:block;font-weight:600;margin-bottom:8px}
#nickname-color-dialog input,#nickname-color-dialog select,#nickname-color-dialog button{font:inherit}
#nickname-color-dialog input:not([type=range]),#nickname-color-dialog select{display:block;width:100%;min-width:0;min-height:44px;padding:9px;border:1px solid #8c987e;background:#181e17;color:var(--ink);margin-top:6px}
#nickname-color-dialog input:focus-visible,#nickname-color-dialog select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
#nickname-color-dialog input[aria-invalid=true]{border-color:#ffb8a8}
#nickname-color-square{height:210px;position:relative;margin:6px 0 14px;border-radius:2px;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,hsl(var(--picker-hue,0) 100% 50%));cursor:crosshair;touch-action:none;user-select:none}
#nickname-color-square:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
#nickname-color-cursor{position:absolute;width:16px;height:16px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #000;transform:translate(-50%,-50%);pointer-events:none}
#nickname-color-dialog .nick-hue-label{margin-bottom:0}
#nickname-hue{appearance:none;display:block;width:100%;height:44px;margin:0;border:0;border-radius:0;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00) center/100% 14px no-repeat;cursor:ew-resize;touch-action:none}
#nickname-hue::-webkit-slider-thumb{appearance:none;width:14px;height:26px;border:2px solid #fff;border-radius:3px;background:transparent;box-shadow:0 0 0 1px #171c15}
#nickname-hue::-moz-range-thumb{width:10px;height:22px;border:2px solid #fff;border-radius:3px;background:transparent;box-shadow:0 0 0 1px #171c15}
#nickname-hue::-moz-range-track{background:transparent}
#nickname-picker-help{font-size:max(1.125rem,calc(.875rem - 2px));line-height:1.5;color:var(--muted);margin:2px 0 14px}
.nick-color-values{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
#nickname-color-values{margin-top:14px}
.nick-color-components{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end}
.nick-color-components label{min-width:0;font-weight:400!important}
#nickname-color-error{min-height:1.6em;margin:8px 0;color:#ffb8a8}
.nick-color-dialog-actions{display:flex;justify-content:flex-end;gap:12px}
.nick-color-dialog-actions button{min-height:44px;padding:9px 14px;border:1px solid #8c987e;background:#252d22;color:var(--ink);cursor:pointer}
#nickname-color-apply{background:var(--accent);color:#24271d}
#nickname-color-dialog button:disabled{opacity:.65;cursor:not-allowed}

.nickname-tool [hidden]{display:none}