/* The studio uses the exact character renderer used by the adventure. */
:root{--ink:#243d50;--orange:#dd734c;--paper:#f6f3e9}
.creator{background:linear-gradient(90deg,#f5f3e9 0%,#f5f3e9 34%,#f5f3e9e8 43%,#e9eddf65 61%,#183d5138);}
.brand{height:75px;padding:15px 4%;color:#243d50}.brand-mark{font-size:33px}.edition{font-size:9px}
.create-layout{grid-template-columns:minmax(390px,480px) minmax(380px,1fr);max-width:1440px;min-height:0;padding:3px 4% 20px;gap:6%}
.creation-card{padding:0;max-width:480px}.creation-card h1{font:600 39px/1.04 Outfit,sans-serif;letter-spacing:-1.5px;margin:13px 0 10px}.intro{font-size:11px;margin:0 0 17px;color:#78867d}
.name-row{display:flex;align-items:flex-end;gap:10px}.name-row>div{flex:1}.name-row input{padding:10px 13px;font-size:12px;background:#fffdf5}.name-row .field-label{font-size:10px;margin-bottom:7px}
.randomize{display:flex;align-items:center;justify-content:center;gap:5px;padding:9px 12px;height:38px;background:#e9ebdf;border:1px solid #d4dccb;border-radius:8px;color:#52685e;font-size:22px}.randomize span{font-size:10px;font-weight:600}
.preset-label{font-size:7px;letter-spacing:1.6px;font-weight:700;color:#7c8c81;margin:16px 0 8px}.preset-options{display:flex;gap:5px}.preset-options button{flex:1;padding:7px 3px;border:1px solid #d9ded2;background:#fdfcf4;border-radius:5px;color:#61776f;font-size:9px}.preset-options button.selected{background:#283f50;color:#f6ecd9;border-color:#283f50}
.creator-tabs{display:flex;border-bottom:1px solid #cfd8ce;margin-top:22px;gap:22px}.creator-tabs button{flex:1;text-align:left;border:0;background:none;font-size:8px;color:#87938a;display:flex;gap:7px;padding:0 0 12px;white-space:nowrap;border-bottom:2px solid transparent;border-radius:0}.creator-tabs button span{font-size:11px;font-weight:600;color:#718275}.creator-tabs button.active{border-color:#db764b;color:#d77650}.creator-tabs button.active span{color:#243d50}.creator-tabs button:hover{transform:none;color:#d77650}
#creatorFields{min-height:318px}.creator-panel{padding-top:17px}.option-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:12px}.option-field .field-label,.color-field .field-label{font-size:9px;margin-bottom:6px;letter-spacing:.1px}.option-field select{font-size:11px;padding:9px 10px;border-radius:6px;background:#fffdf5;color:#334d59;border-color:#d6dcd0}.color-field{margin-top:14px}.swatches{gap:10px;height:25px}.swatch{width:23px;height:23px;border:3px solid #f5f3e9;box-shadow:0 0 0 1px #d4dacf}.swatch.selected{box-shadow:0 0 0 1.5px #304a56}.custom-color{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:17px;width:24px;height:24px;border-radius:50%;border:1px dashed #9aa99a;color:#819681;margin-left:2px;cursor:pointer}.custom-color input{position:absolute;opacity:0;inset:0;padding:0;width:24px;height:24px;cursor:pointer}
.panel-note{font-size:9px;color:#859183;line-height:1.6;margin:15px 0 0}.creator-cta{padding-top:18px}.start{padding:13px 18px;font-size:12px;background:#dc744c;box-shadow:0 4px 0 #ad6a3420}.continue{font-size:10px;margin-top:11px}.small-note{font-size:9px;margin-top:13px;color:#7b897c}
.power-intro{font:500 20px Outfit;margin:5px 0 18px}.power-options{gap:10px;margin-bottom:20px}.power-choice{border-radius:8px;padding:18px 5px 13px}.power-choice b{font-size:30px;margin-bottom:8px}.power-choice span{font-size:10px}.power-choice.selected{background:#f6e8da}.power-detail{padding:18px;border:1px solid #d8dfd1;background:#e8ecdf80;border-radius:9px}.power-detail .eyebrow{font-size:7px}.power-detail h3{font:500 24px Outfit;margin:7px 0 9px}.power-detail p{font-size:11px;line-height:1.7;color:#6f8275;margin:0 0 14px}.power-detail>div{display:flex;gap:10px}.power-detail>div>span{font-size:9px;background:#fffaf0;border:1px solid #dce1d2;padding:5px 8px;border-radius:4px}
.hero-stage{min-height:710px;position:sticky;top:10px;align-self:start;padding:0}.world-label{font-size:8px;margin-top:6px;padding:10px 20px;background:#f3f6e7ad;letter-spacing:2px}.character-orbit{margin-top:0;width:390px;height:490px}.orbit-ring{width:320px;height:320px;top:96px;border-color:#fdf5d7b0;background:radial-gradient(circle,#f9f6d536,#f9f6d50a 65%);box-shadow:0 0 0 30px #fff9d80a,0 0 0 65px #fff9d809}#portrait{width:365px;height:428px;filter:drop-shadow(3px 6px 5px #2a48551a);z-index:1}.hero-nameplate{min-width:260px;padding:12px 30px;z-index:2;margin-top:-14px;background:#f9f7e8df;box-shadow:0 7px 25px #294a401a;border-radius:9px}.hero-nameplate h2{font-size:27px;margin:3px 0}.hero-nameplate p{font-size:9px}.hero-nameplate>span{font-size:7px}.preview-controls{display:flex;gap:8px;margin-top:2px}.preview-controls button{background:#f4f7e8bd;border:1px solid #ffffe080;border-radius:20px;font-size:9px;color:#526c60;padding:9px 13px;backdrop-filter:blur(5px)}.world-caption{align-self:center;margin:27px 0 14px;text-align:center;text-shadow:0 1px 14px #f7f4d080;color:#233f47}.world-caption>span{font-size:8px}.world-caption h3{font:500 27px/1.05 Outfit;margin:10px 0}.world-caption p{font-size:10px}.feature-pills{align-self:center;margin:0;gap:8px}.feature-pills span{font-size:9px;padding:8px 11px;background:#f5f5e3ae}
.creator-footer{padding:8px 4% 18px;font-size:7px;letter-spacing:1.8px}.game-top .hero-card{border-color:#f9f6dfda}.vignette{box-shadow:inset 0 0 180px #1c344c30}.hero-card{background:#fbf5e7ec}.quest-tracker{background:#fbf5e7eb}.power-button{background:#273e53ed}.coins{color:#b78741}
@media(min-height:850px) and (min-width:801px){.brand{height:90px}.create-layout{padding-top:20px}.creation-card h1{font-size:47px}.hero-stage{padding-top:10px}.character-orbit{height:520px}#portrait{width:390px;height:458px}.hero-nameplate{margin-top:-17px}.world-caption{margin-top:32px}}
@media(max-height:780px) and (min-width:801px){.brand{height:62px}.creation-card h1{font-size:33px;margin:9px 0 8px}.intro{margin-bottom:12px}.preset-label{margin-top:12px}.creator-tabs{margin-top:16px}.creator-panel{padding-top:13px}.option-grid{row-gap:9px}.option-field select{padding:7px 9px}.color-field{margin-top:11px}.hero-stage{min-height:660px}.character-orbit{height:455px}#portrait{width:340px;height:399px}.hero-nameplate{padding:10px 25px}.world-caption{margin-top:18px}.world-caption h3{font-size:24px}.creator-cta{padding-top:10px}#creatorFields{min-height:292px}.small-note{margin-top:9px}.creator-footer{display:none}}
@media(max-width:800px){.brand{height:62px;padding:12px 6%}.brand b{font-size:12px}.brand-mark{font-size:31px}.create-layout{display:flex;flex-direction:column;gap:0;padding:0 6% 28px}.creator{background:linear-gradient(120deg,#f5f3e9f5,#f5f3e9da)}.hero-stage{display:flex;position:relative;order:0;min-height:0;height:310px;top:0;width:100%;padding:0;overflow:hidden;margin-bottom:12px}.world-label{display:none}.character-orbit{width:100%;height:290px;margin:0;align-items:flex-start;padding-left:0}.orbit-ring{width:200px;height:200px;top:35px;left:2%;box-shadow:0 0 0 15px #dfd8a312}.character-orbit #portrait{width:235px;height:276px;margin-left:-8px;filter:drop-shadow(2px 4px 4px #2a48551a)}.hero-nameplate{position:absolute;min-width:0;width:145px;right:0;top:85px;margin:0;padding:14px 8px;background:#f5f2e7d9}.hero-nameplate>span{font-size:6px;letter-spacing:1px}.hero-nameplate h2{font-size:23px}.hero-nameplate p{font-size:8px;line-height:1.6}.preview-controls{position:absolute;bottom:4px;left:10px;right:10px;justify-content:center}.preview-controls button{font-size:9px;padding:8px 12px}.world-caption,.feature-pills{display:none}.creation-card{order:1;padding:0;max-width:none}.creation-card h1{font-size:32px;margin:9px 0}.creation-card h1 br{display:none}.creation-card h1 em{margin-left:6px}.creation-card .eyebrow{font-size:8px;letter-spacing:1.3px}.intro{font-size:10px;margin-bottom:17px}.name-row input{font-size:12px}.creator-tabs{gap:12px;margin-top:20px}.creator-tabs button span{font-size:11px}.creator-panel{padding-top:16px}.option-grid{row-gap:13px}.option-field select{font-size:11px;padding:10px}.color-field{margin-top:16px}.color-field .field-label,.option-field .field-label{font-size:10px}.swatches{gap:12px}.swatch{width:25px;height:25px}.preset-options button{font-size:9px;padding:8px 2px}.preset-label{font-size:7px}.randomize{padding:8px 10px}.randomize span{font-size:9px}#creatorFields{min-height:320px}.creator-cta{padding-top:20px}.start{font-size:13px;padding:14px 18px}.small-note{margin-top:14px}.creator-footer{display:none}.game-top{gap:5px}.hero-card{min-width:143px;padding-right:8px}#miniPortrait{width:37px;height:45px}.hero-card strong{font-size:14px}.hero-card span{font-size:7px}.xp-track{width:82px}.top-actions{gap:4px}.icon-button,.coins{min-width:29px;height:32px}.coins{padding:0 6px}.icon-button{font-size:18px}.wardrobe-icon svg{width:20px}.quest-tracker{width:190px}.game-top{left:10px;right:10px}.toast{top:80px}}
@media(max-width:370px){.hero-nameplate{width:120px}.character-orbit #portrait{margin-left:-20px}.top-actions{gap:2px}.hero-card{min-width:130px}.coins{padding:0 4px}.icon-button{min-width:27px}.swatches{gap:9px}}
@media(min-width:801px){#creatorFields{height:300px;min-height:0;overflow-y:auto;padding-right:7px;scrollbar-width:thin;scrollbar-color:#b5c4b4 transparent}.character-orbit{height:480px}#portrait{width:332px;height:390px;flex-shrink:0}.hero-nameplate{flex-shrink:0;margin-top:-12px}.preview-controls{position:relative;z-index:3;margin-top:6px}.hero-stage{min-height:710px}.world-caption{margin-top:22px}.creator-cta{background:linear-gradient(#f5f3e900,#f5f3e9 15%);padding-top:15px}}
@media(max-height:780px) and (min-width:801px){#creatorFields{height:267px}.character-orbit{height:443px}#portrait{width:309px;height:363px}.hero-nameplate{padding:10px 25px}.world-caption{margin-top:18px}.hero-stage{min-height:650px}}
@media(min-height:850px) and (min-width:801px){#creatorFields{height:345px}.character-orbit{height:535px}#portrait{width:380px;height:446px}.hero-stage{min-height:775px}}
.rotate-hint{font-size:9px;color:#36576a;background:#f8f4e4d9;border:1px solid #fff8;padding:5px 12px;border-radius:20px;pointer-events:none;margin:7px auto 0;align-self:center}@media(max-width:800px){.rotate-hint{display:none}}

.preview-controls{flex-wrap:wrap;justify-content:center}.preview-controls button[aria-pressed="true"]{background:#e3d8bb;color:#243f49;border-color:#ae9462}@media(max-width:800px){.preview-controls{gap:5px}.preview-controls button{font-size:8px;padding:8px}}

/* More presets keep readable tap targets, with the live fitting view alongside. */
.preset-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.preset-options button{padding:7px 4px;font-size:10px}.option-field select:focus-visible{outline:2px solid #dc744c;outline-offset:2px}

/* A visual wardrobe: every choice is a view of the actual 3D item. */
.preset-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.preset-options button{min-width:0;padding:0 0 6px;border-radius:9px;overflow:hidden;font-size:10px;font-weight:600}
.choice-image{display:block;object-fit:contain;background:radial-gradient(ellipse at 50% 40%,#faf8ec,#e1e7dc);color:transparent}
.preset-options .choice-image{width:100%;height:78px;margin-bottom:5px}
.preset-options button.selected{background:#fff5dd;color:#243d50;border:2px solid #d77b49}
.visual-field{min-width:0;border:1px solid #d0d9cc;border-radius:10px;background:#fffdf5;overflow:hidden}
.visual-field summary{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;min-height:65px;padding:7px;color:#263e4c}
.visual-field summary::-webkit-details-marker{display:none}
.visual-field summary>.choice-image{width:48px;height:52px;border-radius:5px;flex:none}
.visual-field summary>span{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}
.visual-field summary strong{font-size:11px;font-weight:600}
.visual-field summary small{font-size:10px;color:#6c7e75;line-height:1.3}
.visual-field summary>b{font-size:15px;color:#879386;margin-right:6px}
.visual-field[open]{grid-column:1/-1;border-color:#b6c2ad}
.visual-field[open] summary>b{transform:rotate(180deg)}
.visual-field[open] summary{border-bottom:1px solid #e1e5d8}
.visual-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px}
.visual-choice{position:relative;display:flex;flex-direction:column;min-width:0;padding:0;background:#f5f4e9;border:2px solid transparent;border-radius:9px;overflow:hidden;color:#344d56}
.visual-choice .choice-image{width:100%;height:104px}
.visual-choice>span{display:flex;align-items:center;justify-content:center;min-height:31px;padding:3px 5px;font-size:11px;line-height:1.25;font-weight:600}
.visual-choice>i{display:none;position:absolute;top:5px;right:5px;width:20px;height:20px;line-height:20px;border-radius:50%;background:#d47a44;color:#fff;font-size:12px;font-style:normal}
.visual-choice.selected{border-color:#d47a44;background:#fff0d9}
.visual-choice.selected>i{display:block}
.visual-choice:hover,.preset-options button:hover{transform:none;border-color:#b6a078}
.visual-choice:focus-visible,.visual-field summary:focus-visible{outline:3px solid #3d7d8b;outline-offset:-3px}
.power-choice .choice-image{height:120px;width:100%;border-radius:7px;margin-bottom:9px}
.power-choice b{display:none}
.power-choice{padding:5px 5px 14px}
@media(max-width:800px){.preset-options .choice-image{height:66px}.visual-options{gap:6px;padding:8px}.visual-choice .choice-image{height:92px}.visual-field summary{gap:6px;min-height:62px}.visual-field summary>.choice-image{width:43px;height:48px}.visual-field summary strong{font-size:10px}.visual-field summary small{font-size:9px}}
@media(max-width:370px){.preset-options{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.preset-options button{font-size:8px}.visual-options{grid-template-columns:repeat(2,minmax(0,1fr))}}