#character-creator{position:fixed;inset:0;z-index:920;color:#efdbb4;font-family:Georgia,serif;background:#151914 url('character-menu/creation-background-v3.png') center/cover;display:grid;grid-template-rows:9% 79% 12%;padding:0 2%;box-sizing:border-box;overflow:auto}
#character-creator[hidden]{display:none!important}#character-creator>h1{text-align:center;margin:0;align-self:center;font-size:clamp(22px,2.5vw,42px);font-weight:normal;text-transform:uppercase;letter-spacing:.08em;text-shadow:0 2px 7px #000}
.creator-layout{display:grid;grid-template-columns:27% 44% 29%;min-height:0;gap:0}.creator-panel{position:relative;min-height:0;padding:25px 22px;background:linear-gradient(#111711ee,#080c0bef);border:1px solid #ab894b;box-shadow:inset 0 0 0 4px #0a100b,inset 0 0 0 5px #8f73454d,0 8px 30px #0008;border-radius:5px;overflow:auto}.creator-panel::before{content:'◆';position:absolute;top:4px;left:calc(50% - 5px);color:#c7a460;font-size:12px}.creator-panel h2{margin:0 0 18px;text-align:center;font-weight:normal;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(18px,1.7vw,28px)}
#creator-classes{display:grid;gap:12px}.creator-class{height:clamp(70px,12vh,130px);position:relative;width:100%;border:1px solid #80653c;border-radius:6px;overflow:hidden;background:linear-gradient(90deg,#101610 30%,#19221999),url('character-menu/background-v2.png') center/cover;color:#e1c28b;font:clamp(17px,1.8vw,29px) Georgia;text-align:left;padding:0 15px;transition:box-shadow .3s,border-color .3s,filter .3s}.creator-class img{position:absolute;right:0;top:-15%;height:180%;width:47%;object-fit:contain;opacity:.65;pointer-events:none}.creator-class span{position:relative;z-index:1}.creator-class small{display:block;font-size:20px;position:relative}.creator-class.selected{border-color:#ffe0a1;box-shadow:inset 0 0 20px #bc903831,0 0 12px #dba74b55}.creator-class:hover{filter:brightness(1.2)}#creator-description{font-size:14px;line-height:1.5;color:#c5b594}
.creator-stage{position:relative;display:flex;flex-direction:column;align-items:center;min-height:0}.creator-stage h2{position:absolute;top:0;margin:0;z-index:1;font-size:clamp(22px,2vw,36px);font-weight:normal;text-shadow:0 2px 5px #000}.creator-stage>p{margin:8px;font-size:14px;text-shadow:0 2px 5px #000}#creator-model{flex:1;width:100%;min-height:0;cursor:grab}#creator-model:active{cursor:grabbing}#creator-model canvas{display:block;width:100%;height:100%}.creator-turn{display:flex;align-items:center;gap:18px;font-size:12px;text-shadow:0 2px 4px #000}.creator-turn button{background:transparent;border:0;color:#e8c581;font:32px Georgia;padding:0 10px}
.creator-options label,.creator-options legend{font-size:clamp(15px,1.2vw,21px)}.creator-name-row{display:flex;gap:8px;margin-top:12px}.creator-name-row input{width:100%;min-width:0;background:#080d0b;border:1px solid #977946;border-radius:3px;color:#f0dec0;font:18px Georgia;padding:12px}.creator-name-row button{color:#e9c98e;background:#111813;border:1px solid #977946;font-size:25px;padding:0 10px}.creator-options fieldset{border:0;border-top:1px solid #97794666;padding:16px 0 0;margin:23px 0 0}.creator-options legend{padding-right:12px}.creator-choices{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.creator-choice{min-height:38px;padding:8px 4px;background:#141c17;border:1px solid #69583b;border-radius:4px;color:#cebb98;font:13px Georgia;transition:all .2s}.creator-choice.selected{border-color:#f8cc78;color:#fff0c7;box-shadow:0 0 9px #e7b25544}.creator-swatches{display:flex;gap:8px;justify-content:space-between}.creator-swatch{width:clamp(24px,2.6vw,44px);aspect-ratio:1;padding:0;border-radius:50%;background:var(--swatch)!important;border:2px solid #473c2b;box-shadow:inset 0 0 8px #0006;transition:transform .2s,box-shadow .2s}.creator-swatch.selected{border-color:#ffe5ab;box-shadow:0 0 0 2px #7d5a2b,0 0 12px #d9b15b66}.creator-swatch:hover{transform:scale(1.1)}#creator-error{color:#ffc799;font-size:13px;min-height:18px}
.creator-footer{display:flex;align-items:center;justify-content:space-between}.creator-footer button{height:8vh;border:0;background:transparent url('character-menu/secondary-v2.png') center/100% 100%;color:#e9d2a6;font:clamp(16px,1.5vw,25px) Georgia;padding:0 35px;min-width:20vw;transition:filter .25s,transform .25s}.creator-footer #creator-confirm{min-width:28vw;background-image:url('character-menu/primary-v2.png');animation:play-gold 4s ease-in-out infinite}.creator-footer button:hover{filter:brightness(1.25);transform:translateY(-2px)}.creator-footer button:active{transform:translateY(1px)}#character-creator button:focus-visible,#creator-name:focus-visible{outline:2px solid #ffe0a1;outline-offset:3px}
@media(max-width:850px){#character-creator{grid-template-rows:8% auto 10%;height:100%;min-height:700px}.creator-layout{grid-template-columns:25% 40% 35%}.creator-panel{padding:18px 10px}.creator-options fieldset{margin-top:17px}.creator-swatches{gap:3px}.creator-choice{font-size:11px}.creator-class{padding-left:8px}.creator-stage>p{font-size:11px}.creator-turn{gap:5px}.creator-footer button{padding:0 20px}}
@media(prefers-reduced-motion:reduce){.creator-footer #creator-confirm{animation:none}.creator-class,.creator-choice,.creator-swatch,.creator-footer button{transition:none}}
.creator-panel{border:0;background:linear-gradient(#111711ee,#080c0bef);box-shadow:0 8px 30px #0008;padding:26px 24px}
.creator-panel::after{content:'';position:absolute;inset:0;background:url('character-menu/frame-v2.png') center/100% 100%;pointer-events:none;z-index:2}.creator-panel::before{display:none}
.creator-options fieldset{margin-top:16px;padding-top:12px}.creator-options{scrollbar-width:thin;scrollbar-color:#9f824b #111813}.creator-options legend{font-size:17px}.creator-choice{min-height:32px;padding:6px 3px}.creator-name-row input{padding:10px;font-size:17px}
@media(max-width:600px){#character-creator{min-height:0;height:100%;display:block;overflow:auto;padding:15px 12px}#character-creator>h1{font-size:22px;margin-bottom:16px}.creator-layout{display:flex;flex-direction:column}.creator-panel{overflow:visible;padding:24px 20px}.creator-classes{order:1}.creator-stage{order:0;height:440px}.creator-options{order:2;margin-top:14px}.creator-class{height:72px}#creator-classes{grid-template-columns:1fr 1fr;gap:10px}#creator-description{margin-bottom:5px}.creator-footer{padding:15px 0;gap:10px}.creator-footer button{font-size:15px;padding:0 14px;min-width:0;flex:1;height:64px}.creator-footer #creator-confirm{min-width:0}.creator-swatches{justify-content:flex-start;gap:15px}.creator-swatch{width:36px}.creator-stage>p{font-size:13px}}
#creator-model canvas{position:relative;inset:auto;display:block;width:100%;height:100%;max-width:100%;image-rendering:auto}
.creator-stage{overflow:hidden}#creator-model{position:absolute;inset:0;width:100%;height:100%}.creator-turn{position:absolute;bottom:0;z-index:3;background:#10170b88;padding:3px 14px;border-radius:30px}.creator-stage>p{position:absolute;bottom:-29px;z-index:3}.creator-panel{padding-top:52px;padding-inline:30px}.creator-panel h2{margin-bottom:14px}.creator-options fieldset{margin-top:14px}.creator-options .creator-name-row{margin-top:8px}.creator-options label{position:relative;z-index:3}
@media(max-width:600px){.creator-panel{padding:48px 26px 24px}.creator-stage>p{bottom:-20px}.creator-options{margin-top:28px}}
/* Align the preview feet with the painted pedestal; keep uniform proportions. */
.creator-stage{overflow:visible}#creator-model{top:4%;bottom:auto;height:100%}.creator-turn{bottom:-7%}.creator-stage>p{bottom:-12%;margin:0}
@media(max-width:600px){#creator-model{top:0}.creator-turn{bottom:-5%}.creator-stage>p{bottom:-10%}.creator-stage{margin-bottom:35px}}
/* Keep the painted panel inside the inner rails of the independent frame. */
.creator-panel{background:transparent;box-shadow:none;border:0;border-radius:0;padding:clamp(48px,7.5vh,76px) 8% 7%;isolation:isolate}
.creator-panel::before{display:block;content:'';position:absolute;inset:5.3% 4.2% 5.3%;background:linear-gradient(#111711f5,#080c0bf5);border-radius:18px;z-index:-1;pointer-events:none}
.creator-panel::after{inset:0;z-index:2}
.creator-footer button,.creator-footer button:hover,.creator-footer button:focus,.creator-footer button:active{border:0;outline:none;box-shadow:none;border-radius:0;appearance:none;background-color:transparent}
#character-creator .creator-footer button:focus-visible{outline:none;filter:brightness(1.25) drop-shadow(0 0 7px #e9bd65)}
@media(max-width:600px){.creator-panel{padding:48px 8% 7%}}
.creator-panel::after{background-image:url('character-menu/creator-frame-v3.png')}
.creator-panel::before{inset:5.5% 5.5%;border-radius:14px}
/* Extend the panel plate slightly beneath the thin rails to prevent gaps. */
.creator-panel::before{inset:4.4% 4.2%;border-radius:12px}
/* Sharp vector hairstyle previews with the selected hair colour. */
.creator-hair-choice{display:flex;align-items:center;justify-content:flex-start;gap:8px;min-height:64px;padding:4px 8px;text-align:left;overflow:hidden}
.creator-hair-icon{width:52px;height:52px;flex:0 0 52px;filter:drop-shadow(0 2px 3px #0008);transition:transform .2s}
.creator-hair-shape{fill:var(--hair-preview-color,#49301e);stroke:#231b16;stroke-width:1;stroke-linejoin:round}
.creator-hair-shape .hair-strand{fill:none;stroke:#dfbc83;stroke-opacity:.45;stroke-width:1.2;stroke-linecap:round}
.creator-hair-choice:hover .creator-hair-icon{transform:translateY(-2px)}
.creator-hair-choice.selected{background:linear-gradient(135deg,#383122,#141c17);box-shadow:inset 0 0 12px #e7b25520,0 0 9px #e7b25544}
@media(max-width:1100px) and (min-width:601px){.creator-hair-choice{flex-direction:column;gap:0;padding:3px;min-height:74px;text-align:center}.creator-hair-icon{width:44px;height:44px;flex-basis:44px}}
@media(prefers-reduced-motion:reduce){.creator-hair-icon{transition:none}}
/* Generated square portraits; labels are available through tooltips and aria. */
#creator-hair{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#creator-hair .creator-hair-choice{position:relative;display:block;width:100%;height:auto;min-height:0;aspect-ratio:1;padding:3px;border:1px solid #8d7143;border-radius:8px;background:#101711;overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s}
.creator-hair-choice img{display:block;width:100%;height:100%;object-fit:cover;border-radius:5px;pointer-events:none;transition:filter .25s,transform .25s}
#creator-hair .creator-hair-choice:hover{border-color:#e0bb73;transform:translateY(-2px)}
.creator-hair-choice:hover img{filter:brightness(1.08);transform:scale(1.035)}
#creator-hair .creator-hair-choice.selected{border-color:#ffe3a3;box-shadow:0 0 0 1px #bc8d45,inset 0 0 12px #d9a84966,0 0 13px #e5b65c55}
@media(prefers-reduced-motion:reduce){#creator-hair .creator-hair-choice,.creator-hair-choice img{transition:none}}
/* Every hairstyle uses the same square portrait viewport. The catalogue scrolls
   within its own region, keeping colour and face controls accessible. */
#creator-hair{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;max-height:clamp(150px,25vh,240px);overflow-y:auto;padding:4px;scrollbar-width:thin;scrollbar-color:#a07a3e #111a14}
#creator-hair .creator-hair-choice{background:radial-gradient(ellipse at 50% 35%,#344535,#101711);padding:2px}
.creator-options{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#9d793e #101711}
/* Compact the catalogue so all customisation controls fit the framed panel. */
.creator-options{padding-top:clamp(35px,5.5vh,55px)}
.creator-options fieldset{margin-top:10px;padding-top:5px}
.creator-options legend{font-size:15px}
#creator-hair{gap:5px;max-height:23vh}
.creator-options .creator-swatches{gap:5px}
.creator-options .creator-swatch{max-width:36px}
.creator-options .creator-choice{min-height:27px;padding:4px 3px}
#creator-hair{max-height:18vh}
.creator-options fieldset{margin-top:8px;padding-top:3px}
.creator-options .creator-swatch{max-width:30px}
.creator-options legend{font-size:14px}
.creator-options{overflow:hidden;padding-bottom:30px}
@media(max-width:600px){.creator-options{overflow:visible}#creator-hair{max-height:none}}
/* Scroll the controls inside a stationary frame. */
.creator-options-content{height:100%;min-height:0;overflow-y:auto;padding:2px 5px 12px 2px;scrollbar-width:thin;scrollbar-color:#aa8445 #111a14;overscroll-behavior:contain}
#creator-hair-colors,#creator-eyebrow-colors{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;padding:5px 3px}
#creator-hair-colors .creator-swatch,#creator-eyebrow-colors .creator-swatch{width:100%;max-width:32px;justify-self:center}
@media(max-width:600px){.creator-options-content{height:auto;overflow:visible}}
/* Keep keyboard focus inside the name field's bounds in the scroll panel. */
#character-creator #creator-name:focus-visible{outline:2px solid #ffe0a1;outline-offset:-3px;border-color:#e9bd65}
/* A compact action with undistorted artwork at every desktop width. */
#character-creator .creator-footer #creator-confirm{flex:0 1 340px;width:clamp(270px,23vw,340px);min-width:0;max-width:48%;height:auto;aspect-ratio:502 / 195;background-size:contain;background-repeat:no-repeat;padding:0 28px;font-size:clamp(16px,1.2vw,21px)}
@media(max-width:600px){#character-creator .creator-footer #creator-confirm{flex:1;width:auto;max-width:none;min-height:70px;font-size:14px;padding:0 16px}}
/* Fit the full creation screen, including all fifteen hairstyles, to the viewport. */
#character-creator{height:100dvh;min-height:0;display:grid;grid-template-rows:8% minmax(0,1fr) 14%;overflow:hidden;padding:0 2%}
#character-creator .creator-layout{display:grid;grid-template-columns:27% 44% 29%;min-height:0}
#character-creator .creator-panel{overflow:hidden;padding:clamp(24px,4.7vh,48px) 8% clamp(18px,3.5vh,36px)}
#character-creator .creator-options{margin-top:0}
#character-creator .creator-options-content{height:100%;display:flex;flex-direction:column;gap:clamp(3px,.6vh,7px);overflow:visible;padding:2px 4px;box-sizing:border-box}
#character-creator .creator-options fieldset{margin:0;padding:3px 0 0;min-width:0;flex-shrink:0}
#character-creator .creator-options label,#character-creator .creator-options legend{font-size:clamp(11px,1.8vh,16px)}
#character-creator .creator-name-row{margin:0;flex-shrink:0}
#character-creator .creator-name-row input{padding:clamp(5px,1vh,10px);font-size:clamp(12px,2vh,17px)}
#character-creator #creator-hair{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;max-height:none;overflow:visible;padding:3px}
#character-creator #creator-hair .creator-hair-choice{width:min(100%,5.9vh);justify-self:center}
#character-creator #creator-hair-colors,#character-creator #creator-eyebrow-colors{gap:clamp(3px,.7vh,7px);padding:3px}
#character-creator .creator-options .creator-swatch{width:min(100%,3.3vh);max-width:30px;min-width:0}
#character-creator #creator-error{margin:0;min-height:0;font-size:11px}
#character-creator #creator-classes{gap:clamp(4px,1vh,12px)}
#character-creator .creator-class{height:11vh;min-height:0}
#character-creator .creator-panel h2{font-size:clamp(14px,2.8vh,28px);margin-bottom:1.5vh}
#character-creator #creator-description{font-size:clamp(10px,1.7vh,14px);margin:1.5vh 0 0}
#character-creator .creator-stage{height:auto;margin-bottom:0;order:initial}
#character-creator .creator-footer{min-height:0;padding:0;gap:12px}
#character-creator .creator-footer #creator-confirm{max-height:100%;min-height:0}
@media(max-width:600px){#character-creator .creator-layout{grid-template-columns:27% 33% 40%}#character-creator .creator-panel{padding-inline:7%}#character-creator>h1{font-size:clamp(14px,3.2vw,22px);margin:0}#character-creator #creator-classes{grid-template-columns:1fr}#character-creator .creator-class{padding:0 4px;font-size:12px}#character-creator .creator-class small{font-size:14px}#character-creator .creator-stage h2{font-size:16px}#character-creator .creator-turn{gap:0;font-size:9px;padding:2px}#character-creator .creator-turn button{font-size:22px;padding:0 4px}#character-creator .creator-stage>p{font-size:9px}#character-creator .creator-footer button{font-size:12px}}
/* Keep portrait spacing equal in both directions rather than stretching columns. */
#character-creator #creator-hair{grid-template-columns:repeat(5,min(5.9vh,calc((100% - 16px)/5)));justify-content:start;gap:4px}
#character-creator #creator-hair .creator-hair-choice{width:100%;justify-self:stretch}
#character-creator .creator-turn{bottom:-7%;gap:16px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#ebd9b6}
#character-creator .creator-turn>span{font-size:12px;line-height:1.2;color:#f1e0bc;padding:9px 14px;border:1px solid #ad915e;border-radius:4px;background:linear-gradient(#22392af5,#0b1c12f5);box-shadow:inset 0 0 0 2px #09150da6,0 2px 7px #0008;text-shadow:0 1px 2px #000;white-space:nowrap}
#character-creator .creator-turn button{position:relative;display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid #b99a60;border-radius:50%;background:radial-gradient(circle at 35% 25%,#304937,#102117 72%);box-shadow:inset 0 0 0 3px #0c180f,inset 0 0 0 4px #b79b5d55,0 3px 8px #0006;color:#ead092;transition:transform .2s,filter .2s,box-shadow .2s;cursor:pointer}
#character-creator .creator-turn button svg{width:26px;height:26px;transition:rotate .25s}
#character-creator #creator-right svg{transform:scaleX(-1)}
#character-creator .creator-turn button:hover{transform:translateY(-2px) scale(1.06);filter:brightness(1.22);box-shadow:inset 0 0 0 3px #0c180f,inset 0 0 0 4px #dbc18588,0 0 12px #d6b26866}
#character-creator #creator-left:hover svg{rotate:-18deg}
#character-creator #creator-right:hover svg{rotate:18deg}
#character-creator .creator-turn button:active{transform:translateY(1px) scale(.94)}
@media(prefers-reduced-motion:reduce){#character-creator .creator-turn button,#character-creator .creator-turn button svg{transition:none}}
#character-creator .creator-class .creator-class-particles{display:none;position:absolute;inset:5px;z-index:2;overflow:hidden;pointer-events:none;border-radius:2px}
#character-creator .creator-class.selected .creator-class-particles{display:block}
#character-creator .creator-class-particles i{position:absolute;left:var(--particle-x);bottom:0;width:2px;height:2px;border-radius:50%;background:#fff0b5;box-shadow:0 0 4px 1px #ffd57399;opacity:0;animation:creator-class-ember var(--particle-duration) linear var(--particle-delay) infinite}
@keyframes creator-class-ember{0%{opacity:0;transform:translate(0,0) scale(.5)}18%{opacity:.85}60%{opacity:.6}100%{opacity:0;transform:translate(var(--particle-drift),-105px) scale(.25)}}
@media(prefers-reduced-motion:reduce){#character-creator .creator-class-particles i{animation:none;opacity:.3;bottom:20%}}
/* Shared character-selection bronze leafwork and forest-green panels. */
#character-creator .creator-panel.creator-classes{padding-top:clamp(40px,6.7vh,68px)}
#character-creator .creator-panel.creator-options{padding-top:clamp(40px,6.7vh,68px);padding-bottom:clamp(32px,5vh,52px)}
#character-creator .creator-options-content{overflow-y:auto;overscroll-behavior:contain;padding-bottom:14px}
#character-creator{color:#ecdfc3}
#character-creator>h1{position:relative;isolation:isolate;letter-spacing:.07em;color:#ecdfc3}
#character-creator>h1::before{content:'';position:absolute;inset:-8px 23%;z-index:-1;background:radial-gradient(ellipse,#080c0ddd,transparent 75%);filter:blur(5px);pointer-events:none}
#character-creator .creator-panel::after{background-image:url('character-menu/creator-panel-hud-v1.png');filter:brightness(.96) saturate(.82)}
#character-creator .creator-panel::before{inset:4.6% 5%;border-radius:14px;background:radial-gradient(ellipse at 35% 10%,#26392bef,#101e16f5 65%,#0a1510fa);box-shadow:inset 0 0 35px #0006}
#character-creator .creator-panel h2{color:#ecdfc3;text-shadow:0 2px 3px #000}
#character-creator .creator-class{border:0;border-radius:4px;background:none;color:#ecdfc3;box-shadow:none;padding:0 16px;overflow:hidden;isolation:isolate}
#character-creator .creator-class::before{content:'';position:absolute;inset:5px;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#0b1b15f2 15%,#0d1d16aa 65%,#0b191366),var(--class-scene) center 35%/cover;border-radius:2px}
#character-creator .creator-class::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;background:url('character-menu/creator-class-frame-v1.svg') center/100% 100% no-repeat;filter:brightness(.9) saturate(.78)}
#character-creator .creator-class>img{top:4%;right:9px;width:43%;height:125%;object-fit:contain;object-position:center top;opacity:.8}
#character-creator .creator-class.selected::after{filter:brightness(1.22) saturate(.88) drop-shadow(0 0 3px #d7b66b66)}
#character-creator .creator-class[data-value='0']{--class-scene:url('character-menu/card-swordsman-v2.png')}
#character-creator .creator-class[data-value='1']{--class-scene:url('character-menu/card-archer-v2.png')}
#character-creator .creator-class[data-value='2']{--class-scene:url('character-menu/card-mage-v2.png')}
#character-creator .creator-class[data-value='3']{--class-scene:url('character-menu/card-thief-v2.png')}
#character-creator .creator-class.selected{filter:brightness(1.18);box-shadow:inset 0 0 18px #d7bc642b,0 0 8px #cba25b44}
#character-creator .creator-class:hover{filter:brightness(1.22)}
#character-creator .creator-panel.creator-classes{display:flex;flex-direction:column}
#character-creator .creator-classes h2,#character-creator #creator-classes{flex-shrink:0}
#character-creator #creator-description{color:#d1c2a5;min-height:0;overflow-y:auto;flex:1;line-height:1.45;padding:6px 10px 10px;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#aa9161 #112017;overscroll-behavior:contain}
#character-creator .creator-name-row input{background:linear-gradient(#192b20,#0d1b14);border:1px solid #b29763;border-radius:3px;color:#f0e3c8;box-shadow:inset 0 1px 4px #0008,0 0 0 2px #090f0bb3}
#character-creator .creator-name-row button{background:radial-gradient(circle at 35% 25%,#344a36,#101f17);border:1px solid #b29763;border-radius:4px;color:#e1c48d;box-shadow:inset 0 0 0 2px #0b1712}
#character-creator .creator-options fieldset{border-color:#ae956b66}
#character-creator .creator-options legend,#character-creator .creator-options label{color:#e7d7b8}
#character-creator #creator-hair .creator-hair-choice{border:1px solid #a88e5b;border-radius:5px;padding:3px;background:linear-gradient(#334432,#102017);overflow:hidden;box-shadow:inset 0 0 0 1px #0b160f;box-sizing:border-box}
#character-creator #creator-hair .creator-hair-choice::after{display:none}
#character-creator .creator-hair-choice img{width:100%;height:100%;margin:0;border-radius:2px;object-fit:contain;object-position:center}
#character-creator #creator-hair .creator-hair-choice.selected{border:1px solid #f3d79b;box-shadow:inset 0 0 0 1px #c7a265,0 0 7px #d4b27366}
#character-creator .creator-swatch{border-color:#8e7956;box-shadow:inset 0 0 0 1px #c7ad7377,inset 0 0 7px #0006}
#character-creator .creator-swatch.selected{border-color:#ebd49a;box-shadow:0 0 0 1px #4c3b26,0 0 8px #d2ba6a66,inset 0 0 4px #0004}
#character-creator .creator-turn{border:1px solid #ad925d88;border-radius:4px;background:linear-gradient(#1d3024ee,#0b1912ee);color:#e5d4b2;box-shadow:inset 0 0 0 2px #09150b88}
#character-creator .creator-turn button{color:#dfc18a}
#character-creator .creator-footer #creator-back,#character-creator .creator-footer #creator-back:hover{background-image:url('character-menu/secondary-hud-v4.png');width:clamp(190px,20vw,260px);min-width:0;height:auto;aspect-ratio:2072/759;background-size:contain;background-repeat:no-repeat;background-position:center;padding:0;display:grid;place-items:center;font-size:clamp(13px,1.1vw,18px)}
#character-creator .creator-footer #creator-confirm,#character-creator .creator-footer #creator-confirm:hover{background-image:url('character-menu/create-hud-v1.png');flex:0 1 360px;width:min(30vw,360px);max-width:48%;height:auto;aspect-ratio:360/130;background-size:100% 100%;padding:0;display:grid;place-items:center;font-size:clamp(16px,1.6vw,25px);color:#f5e6c4;animation:none}
@media(max-width:600px){#character-creator .creator-footer #creator-back{width:34vw}#character-creator .creator-footer #creator-confirm{width:44vw;font-size:12px}#character-creator .creator-class{border-width:5px;border-image-width:5px;padding-inline:2px}}
/* Fill each portrait row to the panel edge, retaining compact, equal gaps. */
#character-creator #creator-class-name{isolation:isolate;overflow:visible;pointer-events:none}
.creator-class-title-text{display:inline-block;position:relative;z-index:1;color:#f2e1be}
.creator-class-title-fx{position:absolute;inset:0;pointer-events:none;z-index:0}
.creator-title-flash{position:absolute;left:-45%;right:-45%;top:-25px;bottom:-25px;background:radial-gradient(ellipse,#ffdf9c88,transparent 65%);opacity:0;filter:blur(4px)}
.creator-title-spark{position:absolute;left:50%;top:50%;border-radius:50%;background:#fff2b8;box-shadow:0 0 4px #ffe39d,0 0 9px #eab95f;opacity:0}
#character-creator .creator-turn{background:none;border:0;box-shadow:none;border-radius:0;padding:0;gap:16px}
#character-creator #creator-hair{grid-template-columns:repeat(auto-fill,minmax(min(5.9vh,100%),1fr));justify-content:stretch;gap:4px}
#character-creator #creator-hair .creator-hair-choice{width:100%;justify-self:stretch}