.creation-window,.creation-window *{box-sizing:border-box}
.creation-window{color:#e7eeeb;background:#172d35;border:1px solid #879181;border-radius:14px;width:min(880px,calc(100vw - 24px));max-height:94dvh;padding:28px;box-shadow:0 24px 100px #000b;font:14px/1.5 system-ui}.creation-window::backdrop{background:#071415b8;backdrop-filter:blur(2px)}.creation-window header h1{font:700 clamp(24px,4vw,34px)/1.2 system-ui;margin:8px 0}.creation-window header p{color:#afc4c7;margin:8px 0 22px}.creation-eyebrow{letter-spacing:2px;color:#dfbf83;font-size:10px;font-weight:700}.creation-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:28px}.creation-stage{display:grid;place-items:center;position:relative;border:1px solid #49645e;border-radius:10px;background:radial-gradient(ellipse at 50% 70%,#507760,#213b40 70%);height:260px;overflow:hidden}.creation-stage canvas{width:228px;height:224px;image-rendering:pixelated;position:relative;z-index:1}.creation-floor{position:absolute;width:100px;height:22px;border-radius:50%;background:#142d2960;top:190px}.creation-window label{display:block;font-size:12px;color:#bfcfd0}.creation-window input:not([type=radio]),.creation-window select{font:inherit;width:100%;color:#edf1ed;background:#213943;border:1px solid #49626b;border-radius:6px;min-height:42px;padding:9px 12px;margin-top:5px}.creation-window button{font:inherit;min-height:42px;border:1px solid #536b70;background:#29414a;color:#edf1ed;border-radius:6px;cursor:pointer;padding:8px 12px}.creation-window button:hover{border-color:#e0bf81;background:#38565c}.creation-window :focus-visible{outline:3px solid #e2c38a;outline-offset:3px}.creation-window button:disabled{opacity:.5;cursor:wait}.creation-directions{display:flex;gap:6px;margin-top:12px}.creation-directions button{font-size:11px;padding:8px;flex:1}.creation-directions [aria-pressed=true]{border-color:#e0bf81;background:#4d503c}.creation-walk{width:100%;margin:8px 0 18px}.creation-small{font-size:11px;color:#92adb2}.creation-window fieldset{border:0;padding:0;margin:0}.creation-window legend{font-size:12px;font-weight:700;color:#c7d5d5;margin-bottom:10px}.creation-gender{display:flex;gap:12px;margin-bottom:14px!important}.creation-gender label{padding:10px 18px;background:#253e46;border:1px solid #49626b;border-radius:6px;flex:1}.creation-gender label:has(:checked){border-color:#e0bf81;background:#444d3d}.creation-window input[type=radio]{accent-color:#dfbf83}.creation-options>label{margin-bottom:14px}.creation-part{display:grid;grid-template-columns:1fr 70px;gap:10px;align-items:end;margin-bottom:12px}.creation-part:has(select[name=eyes]){grid-template-columns:1fr}.creation-colors>summary{cursor:pointer;min-height:42px;padding:10px 7px;border:1px solid #52646b;border-radius:6px;list-style:none;font-size:12px;display:flex;gap:6px;align-items:center}.creation-colors>summary:before{content:'';width:16px;height:16px;background:var(--chosen);border:1px solid #b1c5c3;border-radius:50%;flex-shrink:0}.creation-colors[open]{grid-column:1/-1}.creation-colors[open]>summary{max-width:100px}.creation-swatches{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;margin-top:8px;padding:8px;background:#10242d;border-radius:6px}.creation-swatches button{min-height:30px;padding:0;border:2px solid transparent}.creation-swatches [aria-pressed=true]{border-color:#fff;outline:2px solid #dfbf83}.creation-muted{display:block;padding:10px 0;font-size:11px;color:#829da4}.creation-options details:not(.creation-colors){font-size:12px;color:#a5bdc2;margin:18px 0}.creation-options summary{cursor:pointer}.creation-fixed{padding:12px;background:#142831;line-height:2}.creation-fixed small{display:block;line-height:1.4;color:#8ca5ac}.creation-window select:disabled{opacity:.65}.creation-starters{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0!important}.starter-choice{border:1px solid #49626b;background:#203b42;border-radius:8px;text-align:center;position:relative;padding:12px;cursor:pointer}.starter-choice:has(:checked){border-color:#e1c286;box-shadow:inset 0 0 0 1px #e1c286;background:#344d45}.starter-choice input{position:absolute;left:10px;top:10px}.starter-choice img{display:block;width:64px;height:64px;object-fit:contain;image-rendering:pixelated;margin:auto}.starter-choice strong,.starter-choice small{display:block}.starter-choice small{color:#9fbcb2;font-size:10px}.starter-choice.charmander small{color:#edba90}.starter-choice.squirtle small{color:#9ecbe0}.creation-window footer{border-top:1px solid #3b555f;padding-top:10px;text-align:center}.creation-error{color:#ffc1a8;font-size:13px;min-height:20px;margin:4px 0 8px}.creation-window .creation-submit{width:100%;background:linear-gradient(#dfc58b,#b99558);color:#19272c;font-weight:800;min-height:48px;border-color:#e3ca92}.creation-window footer>small{display:block;color:#92aeb4;margin-top:10px;font-size:11px}@media(max-width:640px){.creation-window{padding:18px;max-height:96dvh}.creation-layout{grid-template-columns:1fr;gap:18px}.creation-stage{height:210px}.creation-floor{top:165px}.creation-stage canvas{width:200px;height:196px}.creation-starters{gap:6px}.starter-choice{padding:8px 2px}.starter-choice img{width:56px;height:56px}.creation-swatches button{min-height:36px}}

@media(max-width:640px){.creation-swatches{grid-template-columns:repeat(6,1fr)}.creation-swatches button{min-height:44px}}

.creation-stage .creation-placeholder{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:228px;height:224px;object-fit:contain;image-rendering:pixelated;pointer-events:none}.creation-stage .creation-placeholder[hidden]{display:none}

.creation-tabs,.creation-back,.creation-next{display:none}.creation-identity{margin:16px 0}
@media(max-width:640px){
.creation-window{width:calc(100vw - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);padding:12px;overflow:hidden;border-radius:8px}
#creation-form{height:100%;display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;gap:8px}
.creation-window header{grid-row:1}.creation-window header h1{font-size:21px;margin:0}.creation-window header p,.creation-eyebrow{display:none}
.creation-layout{display:contents}.creation-layout>aside{grid-row:2;display:grid;grid-template-columns:1fr;gap:4px;min-height:0}
.creation-stage{height:116px}.creation-stage canvas,.creation-stage .creation-placeholder{width:114px;height:112px}.creation-floor{top:88px;width:54px;height:10px}
.creation-directions{margin:0;gap:4px}.creation-directions button{min-height:44px}.creation-walk{display:none}
.creation-tabs{grid-row:3;display:flex;gap:6px}.creation-tabs button{flex:1;font-size:12px;padding:8px 4px;min-height:44px}.creation-tabs [aria-current=step]{border-color:#dfbf83;background:#48513e;color:#fff2d3}
.creation-options,.creation-starters,.creation-identity{grid-row:4;overflow:auto;overscroll-behavior:contain;min-height:0;margin:0!important;padding:4px!important}
.creation-window[data-page="0"] .creation-starters,.creation-window[data-page="0"] .creation-identity,.creation-window[data-page="1"] .creation-options,.creation-window[data-page="1"] .creation-identity,.creation-window[data-page="2"] .creation-options,.creation-window[data-page="2"] .creation-starters{display:none}
.creation-starters{align-content:start;grid-template-columns:1fr!important;gap:8px}.starter-choice{display:grid!important;grid-template-columns:28px 56px 1fr;align-items:center;text-align:left;padding:8px!important}.starter-choice input{position:static}.starter-choice img{grid-row:1/3;grid-column:2}.starter-choice small{grid-column:3}.starter-choice strong{grid-column:3;grid-row:1}
.creation-window footer{grid-row:5;display:flex;gap:8px;flex-wrap:wrap;padding:6px 0 0}.creation-window footer>small{display:none}.creation-error{flex-basis:100%;margin:0;min-height:0}.creation-back,.creation-next{display:block!important;flex:1;min-height:44px}.creation-next{background:#b99558!important;color:#172d35!important;font-weight:700!important}
.creation-window[data-page="0"] .creation-back,.creation-window[data-page="2"] .creation-next{display:none!important}.creation-window:not([data-page="2"]) .creation-submit{display:none}.creation-window .creation-submit{flex:2;width:auto;font-size:13px}
.creation-options details:not(.creation-colors){display:none}
}
@media(max-width:640px) and (max-height:600px){.creation-stage{height:72px}.creation-stage canvas,.creation-stage .creation-placeholder{width:80px;height:79px}.creation-floor{top:58px}.creation-directions{display:none}.creation-window header h1{font-size:18px}}
/* Native text selection is retained in inputs/chat, never on game controls. */

@media(max-width:640px){.creation-window input:not([type=radio]),.creation-window select{font-size:16px}}