/* The three-screen Calmling creator, in the app's own night-sky shell. */
.creator{position:relative;max-width:1000px;padding-bottom:calc(var(--sb) + 24px)}
/* The polite live region must belong to this scrollport, never the outer layer.
   An unanchored absolute status after a long tray can otherwise scroll the page. */
.creator>.sr-only{top:0;left:0}
.creator-head{max-width:860px;margin:0 auto 20px}.creator-head .top-row{margin-bottom:10px}.creator-head .kid-h1{text-align:center;font-size:clamp(1.7rem,4.6vw,2.7rem)}
.creator-eyebrow{text-align:center;color:var(--gold);font:1000 .76rem var(--sans);letter-spacing:.12em;text-transform:uppercase;margin:0 0 7px}
.creator-steps{display:flex;align-items:center;gap:8px;margin-left:auto}.creator-steps span{width:27px;height:7px;border-radius:10px;background:rgba(198,194,230,.22)}.creator-steps [aria-current="step"]{background:var(--gold);box-shadow:0 0 14px #f2c14e40}
.creator-build{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start;max-width:860px;margin:auto}
.creator-stage{position:relative;isolation:isolate;min-width:0;aspect-ratio:1.06;border:2px solid #e4d3ff99;border-radius:28px;overflow:hidden;background:radial-gradient(ellipse at 47% 40%,#f1dfff 0,#d7bcfa 44%,#a291dc 100%);box-shadow:inset 0 2px 3px #fff9,inset 0 -8px 20px #6851a532,0 14px 24px -20px #0c0d2f}

.creator-character{position:absolute;inset:5% 9% 3%;display:grid;place-items:center;pointer-events:none}.creator-character>svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 3px #5c3d7e1f)}
.creator-stage-note{position:absolute;top:13px;left:13px;max-width:calc(100% - 26px);padding:8px 13px;border-radius:16px;background:#ffe075;color:#3d2b10;font:1000 .83rem/1.2 var(--sans);box-shadow:0 2px 0 #b68b3b28;pointer-events:none}
.creator-drop{position:absolute;z-index:3;display:grid;place-items:center;width:64px;height:64px;min-width:64px;min-height:64px;transform:translate(-50%,-50%);border:2px dashed transparent;border-radius:50%;background:transparent;color:transparent;cursor:default;transition:background .16s,border-color .16s,box-shadow .16s}
.creator-drop.is-pickable{border-color:#fff9;background:#ffffff12;cursor:pointer}.creator-drop.is-over{border-color:#f7d45b;background:#ffed9e66;box-shadow:0 0 0 7px #ffed9e22}.creator-drop:focus-visible{outline:4px solid #5b3da4;outline-offset:3px}
/* One large native button accepts taps and Enter/Space across the workshop.
   Precise socket buttons remain keyboard reachable without covering the friend. */
.creator-place{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;min-width:0;min-height:0;padding:0;border:0;border-radius:inherit;background:transparent;appearance:none;cursor:pointer;touch-action:manipulation}
.creator-place:disabled{cursor:default;opacity:1}.creator-place:focus-visible{outline:4px solid #5b3da4;outline-offset:-6px}
.creator-stage.is-pickable{border-color:#ffdc6c}.creator-stage.is-over{box-shadow:inset 0 0 0 4px #ffdc6c,0 14px 24px -20px #0c0d2f}
.creator-drop{opacity:0;pointer-events:none}.creator-drop:focus-visible{opacity:1;pointer-events:auto}
.creator-stage-note{z-index:4}
.creator-tray{display:flex;flex-direction:column;gap:15px;min-width:0}.creator-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.creator-tab{appearance:none;min-height:64px;min-width:0;border:0;border-radius:18px;background:#ffffff0e;color:var(--moon-soft);font:1000 .9rem var(--sans);cursor:pointer}.creator-tab[aria-selected="true"],.creator-tab[aria-pressed="true"]{background:#ffda68;color:#36250f;box-shadow:inset 0 2px 0 #fff5,inset 0 -3px 0 #c8993e55}
.creator-pieces{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.creator-piece{position:relative;appearance:none;display:grid;place-items:center;min-width:0;min-height:84px;aspect-ratio:1;border:2px solid #c6c2e640;border-radius:19px;background:linear-gradient(155deg,#ffffff11,#ffffff04);box-shadow:inset 0 1px 0 #ffffff0d,0 4px 7px #0b0d2514;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overflow:hidden}.creator-piece>svg{width:90%;height:90%;max-height:96px;pointer-events:none}.creator-piece.is-selected,.creator-piece[aria-pressed="true"]{border-color:#ffdb6c;background:#f2c14e15;box-shadow:0 0 0 2px #f2c14e0d}.creator-piece:active{cursor:grabbing}.creator-piece:focus-visible{outline-offset:4px}.creator-piece-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.creator-colours{display:flex;justify-content:center;gap:4px}.creator-colour{appearance:none;display:grid;place-items:center;min-width:44px;min-height:64px;padding:0;border:0;background:transparent;cursor:pointer}.creator-colour::before{content:"";display:block;width:33px;height:33px;border:3px solid #fff9;border-radius:50%;background:var(--clay-colour,#ffde81);box-shadow:inset 0 2px 0 #fff5,0 4px 7px #0b0d2529}.creator-colour[data-colour="honey"]{--clay-colour:#ffdc83}.creator-colour[data-colour="sky"]{--clay-colour:#9fe3f5}.creator-colour[data-colour="rose"]{--clay-colour:#f6b2cf}.creator-colour[data-colour="mint"]{--clay-colour:#adf0c5}.creator-colour[data-colour="lilac"]{--clay-colour:#c7b2f4}.creator-colour[data-colour="orange"]{--clay-colour:#ffc18c}.creator-colour[aria-pressed="true"]::before{outline:2px solid var(--gold);outline-offset:4px;border-color:#fff}
.creator-actions{display:flex;align-items:center;justify-content:center;gap:12px;max-width:570px;margin:24px auto 0}.creator-actions .kbig{min-height:64px;font-size:1.15rem;padding:12px 27px}.creator-actions .kbig:first-child{flex:1}.creator-actions .kback{padding:0 20px;white-space:nowrap}.creator-actions button:disabled{opacity:.38;cursor:default}.creator-status{min-height:1.5em;text-align:center;color:#e5dcff;font:800 .9rem/1.4 var(--sans);margin:10px auto 0}
.creator-drag-ghost{position:fixed;z-index:90;left:0;top:0;width:110px;height:110px;pointer-events:none;transform:translate(-50%,-50%);filter:drop-shadow(0 10px 6px #08072345)}.creator-drag-ghost>svg{width:100%;height:100%}
.creator-piece-art{display:grid;place-items:center;width:100%;height:100%;pointer-events:none}.creator-piece-art>svg{width:90%;height:90%;max-height:96px}.creator-move-icon{display:grid;place-items:center;width:44px;height:44px;flex:none}.creator-move-icon>svg{width:100%;height:100%}.creator-build-hint{text-align:center;margin:13px auto 0;color:var(--moon-soft);font:700 .83rem/1.4 var(--sans)}.creator-pieces-single{grid-template-columns:repeat(4,minmax(0,1fr))}
.creator-tray-label{align-self:flex-start}
.creator-character{display:block;min-height:0}.creator-character>svg{position:absolute;inset:0;display:block;width:100%;height:100%}.creator-drop:disabled{pointer-events:none}
.creator-details{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:25px;max-width:660px;margin:20px auto 0}.creator-details-fields{min-width:0}.creator-mini{position:relative;min-height:0;align-self:start;background:radial-gradient(ellipse at 40% 30%,#f5e8ff,#c8acf3);border:2px solid #fff9;border-radius:24px;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;padding:8px}.creator-mini>svg{position:absolute;inset:4%;display:block;width:92%;height:92%}
.creator-name,.creator-worlds,.creator-moves{margin-bottom:24px}.creator-name>label,.creator-field-label,.creator-details h2{display:block;color:var(--moon-soft);font:1000 .78rem var(--sans);letter-spacing:.08em;text-transform:uppercase;margin:0 0 9px}.creator-name-controls{display:flex;align-items:center;gap:8px}.creator-name select,.creator-name-controls select{appearance:auto;min-height:64px;width:100%;padding:12px 18px;border:2px solid #dfd1f7;border-radius:19px;background:#fffaf5;color:#28214e;font:1000 1.2rem var(--sans);box-shadow:inset 0 2px 0 #fff}
.creator-worlds{display:grid;grid-template-columns:1fr 1fr;gap:8px}.creator-worlds>h2,.creator-worlds>.creator-field-label{grid-column:1/-1;margin-bottom:1px}.creator-world{appearance:none;min-width:0;min-height:64px;padding:9px 13px;border:2px solid transparent;border-radius:19px;background:#ffffff0d;color:var(--moon);font:900 .9rem/1.15 var(--sans);cursor:pointer}.creator-world[aria-pressed="true"]{background:#91f0cf;color:#173e3a;border-color:#bafae5;box-shadow:inset 0 -3px 0 #2768581a}
.creator-moves{display:flex;flex-direction:column;gap:10px}.creator-moves>h2,.creator-moves>.creator-field-label{margin-bottom:1px}.creator-move{appearance:none;display:flex;align-items:center;gap:14px;min-height:72px;padding:8px 16px;border:2px solid transparent;border-radius:19px;background:#ffffff0c;color:var(--moon);font:1000 1.03rem/1.2 var(--sans);cursor:pointer;text-align:left}.creator-move>svg{width:44px;height:44px;flex:none}.creator-move[aria-pressed="true"]{border-color:#ffdc6c;background:#f2c14e10;box-shadow:0 0 0 1px #ffdc6c14}.creator-move small{display:block;color:var(--moon-soft);font-weight:700;font-size:.78rem;margin-top:4px}
.creator[data-step="details"] .creator-actions{max-width:660px}.creator-ready{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:620px;margin:0 auto}.creator-card{width:min(100%,340px);filter:drop-shadow(0 22px 22px #08091f59)}.creator-card>svg,.creator-card>img{display:block;width:100%;height:auto}.creator-preview-note{color:var(--moon-soft);font:700 .87rem/1.4 var(--sans);max-width:380px;text-align:center}.creator-ready .creator-actions{width:100%;margin-top:6px}.creator-ready .creator-status{margin:0}.creator-tray-label{grid-column:1/-1;color:#21394a;background:#91f0cf;border-radius:20px;justify-self:start;padding:5px 13px;font:1000 .83rem var(--sans);margin:2px 0}
@media(min-width:800px){.creator[data-step="build"] .creator-actions{margin-top:28px}.creator-stage{aspect-ratio:1}.creator-pieces{gap:10px}.creator-piece{min-height:90px}.creator-head .top-row{margin-bottom:12px}.creator[data-step="ready"] .creator-head{margin-bottom:12px}.creator-card{width:315px}}
@media(max-width:680px){.creator{padding:12px 16px calc(var(--sb) + 18px)}.creator-head{margin-bottom:13px}.creator-head .top-row{margin-bottom:3px;min-height:64px}.creator-eyebrow{font-size:.66rem;letter-spacing:.1em;margin-bottom:5px}.creator-head .kid-h1{font-size:1.68rem}.creator-build{display:flex;flex-direction:column;gap:10px;max-width:410px}.creator-stage{width:100%;height:clamp(210px,31dvh,300px);aspect-ratio:auto;border-radius:24px}.creator-character{inset:2% 12% 3%}.creator-stage-note{top:10px;left:10px;font-size:.75rem;padding:7px 11px}.creator-tray{width:100%;gap:7px}.creator-tabs{gap:4px}.creator-tab{min-height:64px;font-size:.83rem;border-radius:15px}.creator-pieces{gap:7px}.creator-piece{min-height:64px;height:69px;aspect-ratio:auto;border-radius:16px}.creator-piece>svg{max-height:62px}.creator-colours{gap:7px}.creator-actions{margin-top:10px;gap:8px}.creator-actions .kbig{font-size:1rem;padding:11px 19px}.creator-actions .kback{padding:0 16px}.creator-status{font-size:.79rem;margin-top:7px}.creator-details{grid-template-columns:minmax(0,1fr);max-width:410px;gap:0;margin-top:15px}.creator-mini{position:absolute;top:15px;right:0;width:96px;border-radius:20px;padding:4px}.creator-name{padding-right:110px;min-height:112px;margin-bottom:10px}.creator-name select{padding:11px 10px;font-size:1.06rem}.creator-worlds{margin-bottom:20px}.creator-moves{gap:9px;margin-bottom:4px}.creator-move{min-height:66px}.creator-card{width:min(82vw,295px)}.creator-ready{gap:12px}.creator[data-step="ready"] .creator-head{margin-bottom:15px}.creator-preview-note{max-width:310px;font-size:.8rem}}
@media(max-width:380px){.creator{padding-left:12px;padding-right:12px}.creator-head .kid-h1{font-size:1.5rem}.creator-stage{height:220px}.creator-build{gap:6px}.creator-tray{gap:4px}.creator-piece{height:64px}.creator-colours{gap:4px}.creator-tab{font-size:.78rem}.creator-actions{margin-top:7px}}
@media(max-width:680px){.creator-stage{height:clamp(240px,33dvh,310px)}.creator-piece-art>svg{max-height:62px}.creator-build-hint{margin-top:5px;font-size:.74rem;max-width:310px}.creator-name-controls{display:block}.creator-name>.creator-field-label{margin-bottom:7px}}
@media(prefers-reduced-motion:reduce){.creator *{animation:none!important;transition:none!important}}

/* Keep the complete rig inside every canvas; snap zones use the same unscaled letterboxing. */
@media(min-width:681px) and (max-width:799px){.creator-build{grid-template-columns:1fr;max-width:460px;gap:18px}.creator-stage{width:100%;height:350px;aspect-ratio:auto}.creator-character{inset:3% 13%}.creator-tray{width:100%}}
.creator-body-piece{grid-template-rows:minmax(0,1fr) auto;align-content:stretch;gap:3px;padding:6px 3px}.creator-body-piece .creator-piece-art{height:100%;min-height:0}.creator-body-piece .creator-piece-art>svg{width:76%;height:100%;max-height:100%}.creator-body-label{color:var(--moon);font:900 .72rem/1 var(--sans);padding:0;pointer-events:none}
@media(max-width:360px){.creator-body-pieces{grid-template-columns:repeat(3,minmax(0,1fr))}}
.creator-save-error{margin:0;max-width:360px;text-align:center;color:#ffe1bd;font:800 .9rem/1.5 var(--sans)}.creator-save-error[hidden]{display:none}.creator-ready .creator-actions{max-width:390px}

/* Saved creations use the same living-card layout and dock as the catalogue. */
.personal-card-art>svg{display:block;width:100%;height:100%}.personal-card .lc-still[hidden],.personal-card .lc-anim[hidden]{display:none}
.personal-card-hint{font:700 .82rem/1.3 var(--sans);color:#ffe2a0;margin:1px auto 0}.personal-card .lc-name{margin:0}.personal-card .lc-title{padding-bottom:3px}
.personal-card-missing{max-width:480px;margin:auto;text-align:center}.personal-card-missing .kbig{margin:24px auto}

/* On touch screens the workshop scrolls inside the viewport. The header owns its
   safe-area padding, so Back stays below the status bar throughout a long tray,
   the details form and an unfinished draft restored halfway down the screen. */
@media(max-width:680px),(pointer:coarse){
  .creator{--creator-gutter:16px;height:100dvh;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;
    padding:0 calc(var(--sr) + var(--creator-gutter)) calc(var(--sb) + 18px) calc(var(--sl) + var(--creator-gutter));
    scroll-padding-top:calc(var(--st) + 156px);scroll-padding-bottom:calc(var(--sb) + 18px)}
  .creator-head{position:sticky;top:0;z-index:8;isolation:isolate;padding:calc(var(--st) + 8px) 0 10px;background:transparent}
  /* A full-width, fading scrim keeps Back legible without painting a hard
     rectangle across the tablet sky at the edge of the narrower heading. */
  .creator-head::before{content:"";position:absolute;top:0;bottom:-18px;left:50%;width:100vw;transform:translateX(-50%);
    z-index:-1;background:linear-gradient(180deg,#1c2052fa 0%,#1c2052f2 58%,#1c2052b8 82%,#1c205200 100%);pointer-events:none}
}
@media(max-width:380px){.creator{--creator-gutter:12px}}

/* Identity is a compact visual choice; the Body tray contains only four shapes. */
.creator-character-picker{display:flex;align-items:center;gap:12px;max-width:860px;margin:0 auto 18px;padding:10px 14px;border:1px solid #b8c8ff40;border-radius:22px;background:linear-gradient(120deg,#5365ae30,#2c396b20)}
.creator-selected-avatar{display:block;flex:none;width:64px;height:72px}.creator-selected-avatar>svg{display:block;width:100%;height:100%}
.creator-selected-copy{min-width:0;flex:1}.creator-selected-copy .creator-field-label{margin:0 0 4px;font-size:.66rem}.creator-selected-name{margin:0;color:var(--moon);font:1000 1.04rem/1.2 var(--sans);overflow-wrap:anywhere}
.creator-change-character{min-height:64px;padding:8px 14px;max-width:150px;white-space:normal;line-height:1.15}
.creator-character-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:20px}
.creator-character-choice{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0;min-height:170px;padding:8px;border:2px solid #adbff23d;border-radius:20px;background:#ffffff09;color:var(--moon);font:900 .83rem/1.2 var(--sans);cursor:pointer}
/* The fixed artwork box also gives WebKit a definite percentage-height owner.
   Names occupy a separate row; intrinsic SVG sizing cannot push paws into it. */
.creator-character-avatar{position:relative;display:block;flex:none;width:100%;height:112px;min-width:0;min-height:0;overflow:hidden}
.creator-character-avatar>svg{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}
.creator-character-label{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-height:30px;padding:5px 4px;border-radius:10px;background:#1217354d;color:var(--moon);line-height:1.25;text-align:center;white-space:normal;overflow-wrap:normal;word-break:normal}
.creator-character-choice[aria-pressed="true"]{border-color:#ffdb6c;background:#ffdb6c16}.creator-character-sheet .sheet-box{width:min(660px,100%);max-height:calc(100dvh - var(--st) - var(--sb) - 28px);overflow-y:auto;overscroll-behavior:contain}
.creator-colours{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}.creator-colour{min-width:0;width:100%}.creator-colour-reset{grid-column:1/-1;justify-self:center;min-height:64px;padding:8px 22px;font-size:.85rem}.creator-colour-reset[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
.creator-body-pieces{grid-template-columns:repeat(4,minmax(0,1fr))}
.creator-body-piece.is-current:not(.is-selected){border-color:#9dc9ff;background:#8cbcff1c}.creator-shape-current{position:absolute;right:5px;top:4px;color:#f8ebaa;font:1000 .82rem var(--sans)}
@media(max-width:680px){.creator-character-picker{max-width:410px;gap:8px;padding:7px 9px;margin-bottom:10px;border-radius:18px}.creator-selected-avatar{width:50px;height:64px}.creator-selected-name{font-size:.9rem}.creator-change-character{font-size:.78rem;padding:7px 10px;max-width:106px}.creator-character-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.creator-character-choice{min-height:144px;font-size:.76rem;padding:6px;gap:6px}.creator-character-avatar{height:90px}.creator-character-label{min-height:28px}}
@media(max-width:360px){.creator-character-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Long trays must not push the character halfway down their grid row. Keep the
   canvas beside the choices, fitted to a short tablet and visible while scrolling.
   Header/picker heights are measured so larger text and safe areas still fit. */
@media(min-width:800px){
  .creator-stage{position:sticky;top:16px;align-self:start;
    max-height:max(240px,calc(100dvh - var(--creator-head-height,150px) - var(--creator-picker-height,94px) - var(--sb) - 64px))}
}
@media(min-width:800px) and (pointer:coarse){
  .creator-stage{top:calc(var(--creator-head-height,150px) + 12px)}
}

/* The reveal keeps its action beside the finished card on short tablets.
   Small windows can still scroll; a readable card never shrinks below 220px. */
@media(min-width:800px){
  .creator[data-step="ready"] .creator-card{width:clamp(220px,calc((100dvh - var(--creator-head-height,150px) - var(--sb) - 130px) * .71604938),315px)}
}

/* The build step is a fitted workspace: the friend and next action never leave
   the viewport. Long choice collections scroll inside their own options pane. */
.creator[data-step="build"]{height:100dvh;min-height:0;overflow:hidden;box-sizing:border-box;
  padding:calc(var(--st) + 8px) calc(var(--sr) + 18px) calc(var(--sb) + 12px) calc(var(--sl) + 18px)}
.creator[data-step="build"] .creator-content{display:grid;grid-template-rows:64px minmax(0,1fr) 64px;gap:12px;height:100%;max-width:940px;margin:auto}
.creator[data-step="build"] .creator-head{position:relative;top:auto;width:100%;max-width:none;margin:0;padding:0;background:none;z-index:8}
.creator[data-step="build"] .creator-head::before{display:none}
.creator[data-step="build"] .creator-head .top-row{display:flex;align-items:center;gap:14px;height:64px;min-height:0;margin:0}
.creator[data-step="build"] .creator-head .kid-h1,.creator[data-step="build"] .creator-eyebrow,.creator[data-step="build"] .creator-build-hint{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0,0,0,0)}
.creator[data-step="build"] .creator-character-picker{display:flex;align-items:center;gap:10px;flex:1;max-width:340px;width:auto;min-width:0;height:64px;min-height:64px;margin:0 auto;padding:4px 14px 4px 6px;
  border:2px solid #c8caff70;border-radius:22px;background:linear-gradient(135deg,#5669b971,#36478380);color:var(--moon);text-align:left;cursor:pointer;box-shadow:inset 0 1px 0 #fff2}
.creator[data-step="build"] .creator-character-picker:hover{border-color:#ffda68;background:#536ab985}
.creator[data-step="build"] .creator-character-picker>svg{width:22px;height:22px;flex:none;color:#ffda68}
.creator[data-step="build"] .creator-selected-avatar{width:50px;height:54px;flex:none}
.creator-friend-label{display:block;font:1000 1.02rem/1.15 var(--sans);color:#fff4d6}
.creator[data-step="build"] .creator-selected-name{display:block;font:800 .76rem/1.2 var(--sans);margin-top:3px;color:#d7dcff}
.creator[data-step="build"] .creator-steps{margin:0;gap:5px}.creator[data-step="build"] .creator-steps span{width:18px;height:6px}
.creator[data-step="build"] .creator-build{width:100%;max-width:none;min-height:0;height:100%;gap:22px;align-items:stretch}
.creator[data-step="build"] .creator-stage{position:relative;top:auto;align-self:stretch;height:100%;max-height:none;aspect-ratio:auto}
.creator[data-step="build"] .creator-character{inset:8% 8% 3%}
.creator[data-step="build"] .creator-tray{display:grid;grid-template-rows:64px minmax(0,1fr) 64px;gap:10px;min-height:0;max-width:none;height:100%;align-content:stretch}
.creator-options{display:flex;flex-direction:column;gap:10px;justify-content:flex-start;justify-content:safe center;min-height:0}
/* Rows must never shrink below their buttons: Lion has four ear rows. Let the
   grid retain its intrinsic minimum and scroll, rather than painting over the
   following removal controls. Safe centering keeps an overflowing first row reachable. */
.creator[data-step="build"] .creator-pieces{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(64px,1fr);gap:8px;flex:1 0 auto;min-height:min-content;width:100%;max-height:calc(var(--creator-choice-rows,1) * 124px + (var(--creator-choice-rows,1) - 1) * 8px)}
.creator[data-step="build"] .creator-piece{height:100%;min-height:64px;aspect-ratio:auto;padding:5px 3px}
.creator[data-step="build"] .creator-body-label{font-size:.74rem;line-height:1.1}
.creator[data-step="build"] .creator-remove-parts{justify-content:center;flex:none}
.creator[data-step="build"] .creator-remove-parts .kback{min-height:44px;padding:5px 10px;font-size:.72rem;line-height:1.15;flex:1;max-width:145px}
.creator[data-step="build"] .creator-colours{grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;height:64px;align-items:center}
.creator[data-step="build"] .creator-colour{min-height:56px}
.creator[data-step="build"] .creator-colour::before{width:28px;height:28px}
.creator[data-step="build"] .creator-colour-reset{grid-column:auto;justify-self:stretch;padding:4px;min-width:0;min-height:56px;width:100%;font-size:.64rem;border-radius:14px}
.creator[data-step="build"] .creator-actions{max-width:940px;width:100%;margin:0;height:64px}
.creator[data-step="build"] .creator-actions .kbig{height:64px;min-height:64px;padding:10px 24px}
@media(max-width:799px) and (orientation:portrait){
  .creator[data-step="build"]{padding-left:calc(var(--sl) + 12px);padding-right:calc(var(--sr) + 12px)}
  .creator[data-step="build"] .creator-content{gap:8px}
  .creator[data-step="build"] .creator-head .top-row{gap:8px}
  .creator[data-step="build"] .creator-back{min-width:64px;padding:0 12px;gap:4px;font-size:.9rem}
  .creator[data-step="build"] .creator-character-picker{padding-right:8px;gap:6px;border-radius:19px}
  .creator[data-step="build"] .creator-friend-label{font-size:.92rem}
  .creator[data-step="build"] .creator-steps{gap:3px}.creator[data-step="build"] .creator-steps span{width:12px}
  .creator[data-step="build"] .creator-build{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(130px,1fr) 352px;gap:8px}
  .creator[data-step="build"] .creator-stage{width:100%;max-width:none;border-radius:24px}
  .creator[data-step="build"] .creator-character{inset:3% 10% 2%}
  .creator[data-step="build"] .creator-stage-note{top:9px;left:9px;font-size:.7rem;padding:6px 10px}
  .creator[data-step="build"] .creator-tray{grid-template-rows:56px minmax(0,1fr) 56px;gap:5px}
  .creator[data-step="build"] .creator-tab{min-height:56px;font-size:.8rem;border-radius:15px}
  .creator[data-step="build"] .creator-options{gap:6px}
  /* SVG intrinsic dimensions must not enlarge these phone rows or push removal controls out of the tray. */
  .creator[data-step="build"] .creator-pieces{grid-auto-rows:64px;gap:6px;flex:none;height:auto;min-height:calc(var(--creator-choice-rows,1) * 64px + (var(--creator-choice-rows,1) - 1) * 6px);max-height:none}
  .creator[data-step="build"] .creator-piece-art{min-width:0;min-height:0;max-height:100%;overflow:hidden}
  .creator[data-step="build"] .creator-piece{height:100%;min-height:64px;border-radius:16px}
  .creator[data-step="build"] .creator-piece-art>svg{max-height:none;width:84%}
  .creator[data-step="build"] .creator-body-label{font-size:.65rem}
  .creator[data-step="build"] .creator-colours{height:56px}
  .creator[data-step="build"] .creator-colour-reset{min-height:48px}
}
/* Short phone viewports retain usable controls and the whole character. */
@media(max-height:740px) and (max-width:799px) and (orientation:portrait){
  .creator[data-step="build"] .creator-content{grid-template-rows:56px minmax(0,1fr) 56px;gap:6px}
  .creator[data-step="build"] .creator-head .top-row,.creator[data-step="build"] .creator-character-picker{height:56px;min-height:56px}
  .creator[data-step="build"] .creator-back{min-height:56px}
  .creator[data-step="build"] .creator-selected-avatar{height:46px;width:42px}
  .creator[data-step="build"] .creator-actions,.creator[data-step="build"] .creator-actions .kbig{height:56px;min-height:56px}
  .creator[data-step="build"] .creator-build{grid-template-rows:minmax(110px,1fr) 336px;gap:6px}
  .creator[data-step="build"] .creator-tray{grid-template-rows:44px minmax(0,1fr) 48px;gap:4px}
  .creator[data-step="build"] .creator-tab{min-height:44px}
  .creator[data-step="build"] .creator-pieces{max-height:none}
  .creator[data-step="build"] .creator-piece{min-height:56px}
  .creator[data-step="build"] .creator-colours{height:48px}
  .creator[data-step="build"] .creator-colour{min-height:44px}
  .creator[data-step="build"] .creator-colour::before{width:25px;height:25px}
}
/* When larger text needs more room, only the options pane can scroll; the
   character, category tabs, palette and Continue action remain in place. */
@media(max-height:520px){
  .creator[data-step="build"] .creator-options{justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;padding:4px}
  .creator[data-step="build"] .creator-tray{grid-template-rows:44px minmax(0,1fr) 48px;gap:4px}
  .creator[data-step="build"] .creator-tab{min-height:44px}
  .creator[data-step="build"] .creator-piece{height:68px;min-height:64px}
  .creator[data-step="build"] .creator-colours{height:48px}
}
/* Named accessory collections preserve comfortable targets in the fitted tray. */
.creator-part-filters{display:flex;gap:6px;flex:none;width:100%}
.creator-part-filters button{appearance:none;flex:1;min-width:0;min-height:40px;border:1px solid #c6caff60;border-radius:12px;background:#ffffff08;color:#e4e6ff;font:900 .78rem var(--sans);cursor:pointer;transition:background .16s,border-color .16s}
.creator-part-filters button[aria-pressed="true"]{background:#dce5ff;color:#242c60;border-color:#edf2ff;box-shadow:inset 0 1px 0 #fff}
.creator-part-filters button:focus-visible{outline:3px solid #ffda68;outline-offset:2px}
.creator[data-step="build"] .creator-options{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:3px}
.creator[data-step="build"] .creator-tab{font-size:.82rem}
@media(max-width:799px) and (orientation:portrait){
  .creator[data-step="build"] .creator-tab{font-size:.72rem}
  .creator-part-filters button{min-height:32px;font-size:.72rem}
  .creator[data-step="build"] .creator-options{gap:5px}
}