/* Character Customize.
   Desktop: avatar viewer on the left, categories and an item grid on the right (like the classic Roblox editor).
   Phone: large pinned avatar on top, scrolling tabs, pills and a compact grid underneath. */

/* ---------- tokens ---------- */
.cc-page{
  --cc-surface:#fff;--cc-raise:#f2f2f2;--cc-sunk:#e3e3e3;--cc-line:#c3c3c3;--cc-line-strong:#a8a8a8;
  --cc-text:#343434;--cc-sub:#666;--cc-accent:#00a2ff;--cc-accent-soft:#e6f5ff;--cc-accent-text:#0074bd;
  --cc-ok:#02b757;--cc-danger:#d03a2a;--cc-dark:#00a2ff;--cc-dark-text:#fff;
  --cc-stage-a:#f7f7f7;--cc-stage-b:#d9dcdf;--cc-shadow:0 1px 3px rgba(150,150,150,.74);
  --cc-header:48px;--cc-sticky:calc(var(--cc-header) + 14px);--cc-tools:54px;--cc-page-bg:#e5e5e5;
  max-width:1240px;overflow-x:clip;padding-bottom:max(70px,calc(env(safe-area-inset-bottom) + 24px))
}
html[data-theme=dark] .cc-page{
  --cc-surface:#2c2f33;--cc-raise:#25282b;--cc-sunk:#1d1f22;--cc-line:#4a4e53;--cc-line-strong:#656a70;
  --cc-text:#f2f4f5;--cc-sub:#bcc0c4;--cc-accent:#00a2ff;--cc-accent-soft:#103a52;--cc-accent-text:#59c0ff;
  --cc-ok:#02b757;--cc-danger:#ff7766;--cc-dark:#00a2ff;--cc-dark-text:#fff;
  --cc-stage-a:#5b6065;--cc-stage-b:#2a2d30;--cc-shadow:0 1px 3px rgba(0,0,0,.65)
}
html[data-blocktober=live] .cc-page{
  --cc-surface:#2a1c3d;--cc-raise:#34244b;--cc-sunk:#3f2d59;--cc-line:#52386f;--cc-line-strong:#6c4c8f;
  --cc-text:#f6edf9;--cc-sub:#d3bfe2;--cc-accent:#ffb363;--cc-accent-soft:#4a3157;--cc-accent-text:#ffc78a;
  --cc-dark:#ffb363;--cc-dark-text:#1a0f00;--cc-stage-a:#4b3466;--cc-stage-b:#25173a
}
.cc-page :where(button,input){font-family:inherit}
.cc-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- page header ---------- */
.cc-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin:2px 0 18px}
.cc-top h1{margin:0;font-size:32px;font-weight:600;letter-spacing:-.4px;color:var(--cc-text)}
.cc-shop{display:flex;align-items:center;gap:14px;margin:0;font-size:14px;color:var(--cc-sub)}
.cc-get{display:inline-flex;align-items:center;min-height:36px;padding:0 18px;border-radius:999px;background:var(--cc-dark);color:var(--cc-dark-text)!important;font-weight:700;font-size:14px;text-decoration:none;border:0;cursor:pointer;transition:transform .15s,opacity .15s}
.cc-get:hover{opacity:.88;transform:translateY(-1px)}

/* ---------- notices ---------- */
.cc-status{padding:12px 14px;background:var(--cc-surface);border:1px solid var(--cc-line);border-radius:10px;color:var(--cc-text);margin:10px 0 0}
.cc-feedback,.cc-tryon{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 14px;padding:11px 14px;border-radius:10px;background:#fff6dd;border:1px solid #efd58a;color:#5b4a13;font-size:14px}
.cc-tryon{background:#e6f4ff;border-color:#9fd2fb;color:#123c5c}
.cc-feedback[hidden],.cc-tryon[hidden]{display:none}
.cc-feedback button{padding:6px 14px;border-radius:999px;border:1px solid #c9b163;background:#fff;color:#4a3b0d;cursor:pointer;font-weight:600}
.cc-tryon .cc-get{min-height:32px}.cc-tryon .cc-remove{width:auto;flex:none}

/* ---------- loading skeleton ---------- */
@keyframes cc-shimmer{to{background-position:-200% 0}}
.cc-skeleton,.cc-thumb.is-loading{background:linear-gradient(100deg,var(--cc-raise) 30%,var(--cc-sunk) 50%,var(--cc-raise) 70%) 0 0/200% 100%;animation:cc-shimmer 1.4s linear infinite}
.cc-loading{display:grid;grid-template-columns:minmax(300px,400px) minmax(0,1fr);gap:20px}
.cc-loading[hidden]{display:none}
.cc-sk-avatar{aspect-ratio:1/1.1;border-radius:14px}
.cc-sk-wardrobe{padding:16px;border-radius:14px;background:var(--cc-surface);border:1px solid var(--cc-line)}
.cc-sk-tabs{display:flex;gap:12px;margin-bottom:18px}.cc-sk-tabs i{width:84px;height:26px;border-radius:8px}
.cc-sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px}.cc-sk-grid i{aspect-ratio:1/1.25;border-radius:12px}

/* ---------- layout ---------- */
.cc-layout{display:grid;grid-template-columns:minmax(320px,410px) minmax(0,1fr);gap:20px;align-items:start}
.cc-layout[hidden]{display:none}
.cc-avatar,.cc-wardrobe{min-width:0;background:var(--cc-surface);border:1px solid var(--cc-line);border-radius:14px;box-shadow:var(--cc-shadow);color:var(--cc-text)}
.cc-avatar{position:sticky;top:var(--cc-sticky);padding:16px 18px 18px;max-height:calc(100vh - var(--cc-sticky) - 12px);overflow-y:auto;scrollbar-width:thin}
.cc-wardrobe{padding:0 18px 18px;overflow:hidden}
.cc-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.cc-preview-heading h2{margin:0;font-size:26px;font-weight:500;color:var(--cc-text)}
#classic-preview{padding:5px 12px;border:1px solid var(--cc-line-strong);border-radius:999px;background:transparent;color:var(--cc-sub);font-size:12px;font-weight:600;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
#classic-preview:hover{border-color:var(--cc-accent);color:var(--cc-accent-text)}
#classic-preview[aria-pressed=true]{border-color:var(--cc-accent);color:var(--cc-accent-text);background:var(--cc-accent-soft)}

/* ---------- avatar stage ---------- */
.cc-stage{position:relative;aspect-ratio:1/1.12;width:100%;border-radius:12px;overflow:hidden;background:radial-gradient(ellipse at 50% 38%,var(--cc-stage-a),var(--cc-stage-b));user-select:none;-webkit-user-select:none}
.cc-stage canvas{position:absolute;inset:0 0 var(--cc-tools) 0;display:block;width:100%;height:calc(100% - var(--cc-tools));touch-action:pan-y;cursor:grab;outline-offset:-3px;transition:opacity .2s ease}
.cc-stage canvas[data-dragging=true]{cursor:grabbing}
.cc-thumb-2d{position:absolute;inset:0 0 var(--cc-tools) 0;width:100%;height:calc(100% - var(--cc-tools));object-fit:contain;padding:3% 4% 0;opacity:0;pointer-events:none;transition:opacity .2s ease,filter .2s ease;-webkit-user-drag:none}
.cc-thumb-2d[data-ready]{filter:drop-shadow(0 10px 14px #0003)}
.cc-stage[data-view="2d"] canvas{opacity:0;pointer-events:none}
.cc-stage[data-view="2d"] .cc-thumb-2d[data-ready]{opacity:1}
.cc-stage.is-drawing .cc-thumb-2d{opacity:.45!important}
.cc-stage-loading{position:absolute;inset:0 0 var(--cc-tools) 0;display:grid;place-items:center;pointer-events:none}
.cc-stage-loading[hidden]{display:none}
.cc-spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--cc-line-strong);border-top-color:var(--cc-accent);animation:cc-spin .8s linear infinite}
@keyframes cc-spin{to{transform:rotate(360deg)}}
.cc-drag-hint{position:absolute;left:50%;top:12px;transform:translateX(-50%);white-space:nowrap;margin:0;padding:4px 10px;border-radius:999px;background:#0000005c;color:#fff;font-size:12px;pointer-events:none;transition:opacity .4s;animation:cc-hint-out .6s 5s forwards}
.cc-drag-hint.is-gone,.cc-stage[data-view="2d"] .cc-drag-hint{opacity:0;animation:none}
@keyframes cc-hint-out{to{opacity:0}}

.cc-view-tools{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px;max-width:calc(100% - 20px)}
.cc-tool-group{display:inline-flex;overflow:hidden;border-radius:999px;border:1px solid var(--cc-line-strong);background:color-mix(in srgb,var(--cc-surface) 88%,transparent);backdrop-filter:blur(6px)}
.cc-tool-group button{border:0;border-radius:0;background:none}
.cc-tool-group button+button{border-left:1px solid var(--cc-line)}
.cc-view-tools button{display:grid;place-items:center;min-width:36px;height:36px;padding:0 9px;border-radius:999px;border:1px solid var(--cc-line-strong);background:color-mix(in srgb,var(--cc-surface) 88%,transparent);backdrop-filter:blur(6px);color:var(--cc-text);font-size:13px;font-weight:700;cursor:pointer;transition:background .15s,color .15s,border-color .15s,opacity .15s}
.cc-view-tools button:hover:not(:disabled){background:var(--cc-accent-soft);color:var(--cc-accent-text)}
.cc-view-tools button:disabled{opacity:.4;cursor:default}
.cc-view-tools svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cc-tool-group button{border:0;border-radius:0}.cc-tool-group button+button{border-left:1px solid var(--cc-line)}
.cc-tool-text[aria-pressed=true]{background:var(--cc-accent-soft)!important;color:var(--cc-accent-text)!important;border-color:var(--cc-accent)!important}
/* The camera button: tinted with a green dot while auto-rotate is on, struck through while it is off. */
.cc-camera{position:relative}
.cc-camera[aria-pressed=true]{background:var(--cc-accent-soft)!important;color:var(--cc-accent-text)!important;border-color:var(--cc-accent)!important}
.cc-camera-state{position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;background:var(--cc-ok);box-shadow:0 0 0 2px var(--cc-surface)}
.cc-camera[aria-pressed=false] .cc-camera-state{width:26px;height:2px;top:17px;right:5px;border-radius:2px;background:currentColor;box-shadow:0 0 0 2px var(--cc-surface);transform:rotate(-45deg)}
.cc-seg{display:inline-flex;padding:2px;border-radius:999px;border:1px solid var(--cc-line-strong);background:color-mix(in srgb,var(--cc-surface) 88%,transparent);backdrop-filter:blur(6px)}
.cc-view-tools .cc-seg button{min-width:38px;height:30px;border:0;background:transparent;backdrop-filter:none;padding:0 10px}
.cc-view-tools .cc-seg button[aria-pressed=true]{background:var(--cc-dark);color:var(--cc-dark-text)}
.cc-view-tools .cc-seg button[aria-pressed=false]:hover{background:var(--cc-raise);color:var(--cc-text)}

/* ---------- under the avatar ---------- */
.cc-slider{display:grid;gap:8px;margin:18px 0 4px;font-size:14px;font-weight:600;color:var(--cc-sub)}
.cc-slider span{display:flex;justify-content:space-between}
.cc-slider output{color:var(--cc-text)}
.cc-page input[type=range]{width:100%;height:22px;accent-color:var(--cc-accent);cursor:pointer}
.cc-fit{display:grid;gap:8px;margin:14px 0 0;padding:12px 14px;border:1px solid var(--cc-line);border-radius:12px;background:var(--cc-raise);min-width:0}
.cc-fit[hidden]{display:none}
.cc-fit legend{padding:0 6px;font-weight:700;font-size:14px}
@media(max-width:820px){.cc-fit legend{float:left;width:100%;padding:0 0 4px}}
.cc-fit label{display:grid;grid-template-columns:64px 44px 1fr;align-items:center;gap:6px;font-size:13px}
.cc-fit-actions{display:flex;gap:8px;justify-content:flex-end}
.cc-fit-actions button{min-height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--cc-line-strong);background:var(--cc-surface);color:var(--cc-text);cursor:pointer;font-weight:600}
.cc-fit-actions button:hover{border-color:var(--cc-accent);color:var(--cc-accent-text)}
.cc-save{margin:12px 0 0;font-size:13px;color:var(--cc-sub)}
.cc-redraw{margin:6px 0 0;font-size:13px;color:var(--cc-sub)}
.cc-redraw button{padding:0;border:0;background:none;color:var(--cc-accent-text);text-decoration:underline;cursor:pointer;font:inherit}

/* ---------- tabs, pills, search ---------- */
.cc-tabs{display:flex;gap:2px;margin:0 -18px;padding:0 10px;border-bottom:1px solid var(--cc-line);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.cc-tabs::-webkit-scrollbar,.cc-pills::-webkit-scrollbar{display:none}
.cc-tab{flex:1 0 auto;min-height:50px;padding:0 18px;border:0;border-bottom:3px solid transparent;background:none;color:var(--cc-sub);font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap;scroll-snap-align:center;transition:color .15s,border-color .15s,background .15s}
.cc-tab:hover{color:var(--cc-text);background:var(--cc-raise)}
.cc-tab.is-current{color:var(--cc-text);border-bottom-color:var(--cc-accent)}
.cc-pills{display:flex;gap:8px;padding:14px 0 4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cc-pills[hidden]{display:none}
.cc-pill{flex:none;min-height:34px;padding:0 15px;border-radius:999px;border:1px solid var(--cc-line);background:var(--cc-raise);color:var(--cc-sub);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.cc-pill:hover{border-color:var(--cc-line-strong);color:var(--cc-text)}
.cc-pill.is-current{background:var(--cc-accent-soft);border-color:var(--cc-accent);color:var(--cc-accent-text)}
.cc-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 14px}
.cc-crumb{margin:0;font-size:14px;color:var(--cc-sub)}
.cc-search{display:flex;align-items:center;gap:8px;width:230px;max-width:100%;height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--cc-line);background:var(--cc-raise);color:var(--cc-sub)}
.cc-search:focus-within{border-color:var(--cc-accent);background:var(--cc-surface)}
.cc-search[hidden],.cc-bar input[hidden]{display:none}
.cc-search svg{flex:none;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cc-search input{flex:1;min-width:0;border:0!important;outline:0;background:transparent!important;box-shadow:none!important;color:var(--cc-text)!important;font-size:14px}
.cc-search:has(input[hidden]){display:none}

/* ---------- item grid ---------- */
.cc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px}
.cc-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:8px;min-width:0;border:1px solid var(--cc-line);border-radius:12px;background:var(--cc-surface);color:var(--cc-text);transition:transform .15s,box-shadow .15s,border-color .15s,background .15s}
.cc-card:hover{transform:translateY(-2px);box-shadow:var(--cc-shadow);border-color:var(--cc-line-strong)}
.cc-card.can-tap .cc-thumb{cursor:pointer}
.cc-card.is-worn{border-color:var(--cc-accent);background:var(--cc-accent-soft);box-shadow:0 0 0 1px var(--cc-accent)}
.cc-thumb{display:grid;place-items:center;aspect-ratio:1/1;border-radius:8px;background:var(--cc-raise);overflow:hidden}
.cc-card.is-worn .cc-thumb{background:var(--cc-surface)}
.cc-thumb img,.cc-thumb canvas{width:100%;height:100%;object-fit:contain;display:block}
.cc-thumb.is-loading img{opacity:0}
.cc-thumb img{transition:opacity .25s}
.cc-emoji{font-size:44px}
.cc-name{font-size:13px;font-weight:600;color:var(--cc-text);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.25;min-height:2.5em;text-decoration:none;overflow-wrap:anywhere}
a.cc-name:hover{color:var(--cc-accent-text);text-decoration:underline}
.cc-tag{align-self:flex-start;padding:1px 8px;border-radius:9px;background:var(--cc-sunk);color:var(--cc-sub);font-size:11px;font-weight:700}
.cc-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.cc-actions button,.cc-wearing{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:1;min-height:34px;padding:0 6px;border-radius:9px;font-size:13px;font-weight:700;text-align:center}
.cc-icon{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cc-wear,.cc-remove,.cc-fit-button{border:1px solid var(--cc-line-strong);background:var(--cc-surface);color:var(--cc-text);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.cc-wear:hover{border-color:var(--cc-accent);background:var(--cc-accent-soft);color:var(--cc-accent-text)}
.cc-remove{color:var(--cc-sub)}
.cc-remove:hover{border-color:var(--cc-danger);color:var(--cc-danger)}
.cc-fit-button{flex:0 0 34px!important;width:34px;padding:0!important;background:transparent}
.cc-fit-button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.cc-fit-button:hover{border-color:var(--cc-accent);color:var(--cc-accent-text)}
.cc-wearing{border:1px solid color-mix(in srgb,var(--cc-ok) 40%,transparent);background:color-mix(in srgb,var(--cc-ok) 12%,transparent);color:var(--cc-ok);cursor:default}
.cc-check{position:absolute;top:13px;left:13px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--cc-accent);color:var(--cc-surface);box-shadow:0 1px 3px #0004}
.cc-check .cc-icon{width:13px;height:13px;stroke-width:3}
.cc-character .cc-actions{flex-wrap:wrap}
.cc-character .cc-actions button{flex:1 1 45%}
.cc-empty{display:grid;justify-items:center;gap:12px;padding:44px 16px;text-align:center;color:var(--cc-sub)}
.cc-empty h3{margin:0;color:var(--cc-text)}
.cc-empty p{margin:0}
.cc-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px;font-size:14px;color:var(--cc-sub)}
.cc-pager[hidden]{display:none}
.cc-pager button{width:38px;height:36px;border-radius:999px;border:1px solid var(--cc-line-strong);background:var(--cc-surface);color:var(--cc-text);font-size:18px;cursor:pointer}
.cc-pager button:hover:not(:disabled){border-color:var(--cc-accent);color:var(--cc-accent-text)}
.cc-pager button:disabled{opacity:.4;cursor:default}

/* ---------- body / skin / characters panels ---------- */
.cc-hint{margin:0 0 12px;font-size:13px;color:var(--cc-sub);line-height:1.5}
.cc-parts{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.cc-parts button{display:flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--cc-line);background:var(--cc-raise);color:var(--cc-text);cursor:pointer;font-size:13px;font-weight:600}
.cc-parts button.is-current{border-color:var(--cc-accent);background:var(--cc-accent-soft);color:var(--cc-accent-text)}
.cc-part-swatch{width:14px;height:14px;border-radius:4px;border:1px solid #0003}
.cc-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:7px;max-width:480px}
.cc-swatch{aspect-ratio:1/1;min-height:30px;border-radius:8px;border:1px solid #0002;cursor:pointer;transition:transform .12s}
.cc-swatch:hover{transform:scale(1.08)}
.cc-swatch.is-current,.cc-swatch[aria-pressed=true]{outline:3px solid var(--cc-accent);outline-offset:2px}
.cc-custom{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;font-weight:600;color:var(--cc-text)}
.cc-scale p{margin:0 0 12px;color:var(--cc-sub);line-height:1.5}
.cc-scale .cc-remove{width:auto;min-height:36px;padding:0 16px;border-radius:999px;font-weight:700}
.cc-create{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.cc-create input{flex:1;min-width:150px;min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--cc-line-strong);background:var(--cc-raise);color:var(--cc-text)}
.cc-create .cc-wear{width:auto;flex:none;min-height:38px;padding:0 18px;border-radius:999px;background:var(--cc-dark);color:var(--cc-dark-text);border-color:var(--cc-dark)}
.cc-create .cc-wear:hover{opacity:.88;background:var(--cc-dark);color:var(--cc-dark-text);border-color:var(--cc-dark)}
.cc-portrait-control{display:grid;grid-template-columns:90px 1fr 42px;gap:10px;align-items:center;margin:16px 0;font-size:14px}.cc-portrait-control input{min-width:0;width:100%}
.cc-portrait-control output{color:var(--cc-sub);font-size:13px}

/* ---------- classic body-colour picker ---------- */
.cc-classic-colors{position:relative;margin-top:22px;padding-top:16px;border-top:1px solid var(--cc-line)}
.cc-classic-colors[hidden]{display:none}
.cc-classic-colors h2{margin:0 0 6px;font-size:20px;font-weight:500}
.cc-color-body{display:grid;grid-template-columns:40px 54px 54px 40px;grid-template-rows:48px 100px 100px;gap:8px 4px;width:200px;margin:16px auto 0}
.cc-color-part{border:1px solid #0002;border-radius:4px;cursor:pointer;min-width:0;min-height:0;padding:0}
.cc-color-part:hover,.cc-color-part:focus-visible{outline:3px solid var(--cc-accent);outline-offset:2px}
.cc-color-head{grid-column:2/4;grid-row:1;width:58px;justify-self:center}
.cc-color-torso{grid-column:2/4;grid-row:2}
.cc-color-leftArm{grid-column:4;grid-row:2}
.cc-color-rightArm{grid-column:1;grid-row:2}
.cc-color-leftLeg{grid-column:3;grid-row:3}
.cc-color-rightLeg{grid-column:2;grid-row:3}
.cc-color-picker{margin-top:16px;padding:12px;border:1px solid var(--cc-line-strong);border-radius:12px;background:var(--cc-raise)}
.cc-color-picker .cc-palette{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.cc-color-close{display:block;margin:0 0 10px auto;border:0;background:none;color:var(--cc-accent-text);text-decoration:underline;cursor:pointer}

/* ---------- headshot framing ---------- */
.cc-stage canvas[data-headshot=true]{cursor:ew-resize}

/* ---------- tablets and phones ---------- */
@media(max-width:1100px){.cc-layout,.cc-loading{grid-template-columns:minmax(290px,350px) minmax(0,1fr)}}
@media(max-width:820px){
  .cc-page{--cc-header:52px;--cc-sticky:calc(var(--cc-header) - 1px)}
  .cc-top{margin-bottom:12px}.cc-top h1{font-size:26px}
  .cc-layout,.cc-loading{grid-template-columns:minmax(0,1fr);gap:0}
  .cc-sk-avatar{aspect-ratio:auto;height:clamp(230px,38vh,340px);margin-bottom:12px}
  /* The avatar block dissolves into the page grid so the preview can stay pinned while the wardrobe scrolls beneath it. */
  .cc-avatar{display:contents}
  .cc-preview-heading{display:none}
  .cc-stage{order:1;position:sticky;top:var(--cc-sticky);z-index:6;box-shadow:0 -10px 0 0 var(--cc-page-bg),var(--cc-shadow)!important;aspect-ratio:auto;height:clamp(230px,38vh,340px);margin-bottom:12px;border:1px solid var(--cc-line)}
  .cc-wardrobe{order:2}
  #preview-error{order:3}
  .cc-slider,.cc-save,.cc-redraw,.cc-classic-colors,.cc-fit{order:4;background:var(--cc-surface);margin-left:0;margin-right:0}
  .cc-slider{margin:12px 0 0;padding:14px 16px 4px;border:1px solid var(--cc-line);border-bottom:0;border-radius:14px 14px 0 0}
  .cc-save{margin:0;padding:6px 16px;border:1px solid var(--cc-line);border-top:0;border-bottom:0}
  .cc-redraw{margin:0;padding:0 16px 14px;border:1px solid var(--cc-line);border-top:0;border-radius:0 0 14px 14px}
  .cc-classic-colors{padding:16px;margin-top:12px;border:1px solid var(--cc-line);border-radius:14px}
  .cc-wardrobe{padding:0 14px 16px}
  .cc-tabs{margin:0 -14px;padding:0 6px}
  /* A hat's fit controls slide up from the bottom edge like a phone sheet, clear of the home indicator. */
  .cc-fit{position:fixed;left:0;right:0;bottom:calc(var(--tab-h,0px) + env(safe-area-inset-bottom));z-index:31;margin:0;padding:14px 16px;border-radius:16px 16px 0 0;border:1px solid var(--cc-line-strong);border-bottom:0;box-shadow:0 -8px 30px #0005;background:var(--cc-surface)}
}
@media(max-width:600px){
  .cc-page{--cc-tools:58px}
  .cc-top h1{font-size:23px}
  .cc-shop{font-size:0;gap:0}.cc-shop .cc-get{font-size:14px}
  .cc-tool-extra{display:none}
  .cc-view-tools{right:8px;bottom:8px;gap:5px}
  .cc-view-tools button{min-width:40px;height:40px}
  .cc-view-tools .cc-seg button{height:34px;min-width:40px}
  .cc-camera[aria-pressed=false] .cc-camera-state{top:19px;right:7px}
  .cc-grid,.cc-sk-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .cc-card{padding:6px;gap:6px;border-radius:10px}
  .cc-name{font-size:12px}
  .cc-actions button,.cc-wearing{min-height:36px;font-size:12px;padding:0 4px}
  .cc-actions .cc-icon{width:14px;height:14px}
  .cc-check{top:11px;left:11px;width:20px;height:20px}
  .cc-bar{margin:10px 0}
  .cc-search{flex:1;width:auto}
  .cc-crumb{display:none}
  .cc-tab{min-height:46px;padding:0 14px;font-size:14px}
  .cc-pill{min-height:36px}
  .cc-fit label{grid-template-columns:56px 40px 1fr}
  .cc-parts button{min-height:40px}
  .cc-swatch{min-height:34px}
  .cc-palette{grid-template-columns:repeat(auto-fill,minmax(34px,1fr))}
  .cc-portrait-control{grid-template-columns:76px 1fr 38px}
}
@media(max-width:360px){.cc-grid,.cc-sk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-height:560px) and (max-width:820px){.cc-stage,.cc-sk-avatar{height:200px}}
@media(prefers-reduced-motion:reduce){.cc-page *,.cc-page *::before{transition:none!important;animation:none!important}.cc-drag-hint{display:none}}

/* ---------- Classic Roblox look ----------
   Flat panels, thin grey borders, square corners, folder-style tabs and plain rectangular buttons, like the original Roblox character page.
   This block comes last on purpose: it overrides the rounded shapes above. Only the spinner, the camera light and the "worn" tick stay round. */
.cc-page *,.cc-page *::before,.cc-page *::after{border-radius:0!important}
.cc-spinner,.cc-camera-state{border-radius:50%!important}
.cc-page{--cc-edge:var(--cc-line)}
.cc-top h1{font-weight:400;font-size:30px;letter-spacing:0}
.cc-preview-heading h2{font-weight:400;font-size:24px}
.cc-avatar,.cc-wardrobe{box-shadow:var(--cc-shadow);border:1px solid var(--cc-line-strong)}
.cc-get{min-height:32px;padding:0 16px;background:var(--cc-accent);border:1px solid #0090e6;color:#fff!important;font-weight:600;font-size:14px;transition:background .12s}
.cc-get:hover{opacity:1;transform:none;background:#25b2ff}
.cc-status,.cc-feedback,.cc-tryon{box-shadow:none}
.cc-feedback button{background:var(--cc-surface);border-color:var(--cc-line-strong)}
#classic-preview{padding:4px 12px;font-weight:600;color:var(--cc-sub);background:var(--cc-raise)}
#classic-preview[aria-pressed=true]{background:var(--cc-accent);border-color:#0090e6;color:#fff}
.cc-skeleton,.cc-thumb.is-loading{animation-duration:1.8s}

/* the avatar picture */
.cc-stage{border:1px solid var(--cc-line);background:linear-gradient(180deg,var(--cc-stage-a),var(--cc-stage-b))}
.cc-drag-hint{background:#000a;font-size:11px;padding:3px 8px}
.cc-tool-group,.cc-seg,.cc-view-tools button{backdrop-filter:none;background:var(--cc-surface);border-color:var(--cc-line-strong)}
.cc-tool-group button+button{border-left:1px solid var(--cc-line)}
.cc-view-tools button:hover:not(:disabled){background:var(--cc-accent-soft);color:var(--cc-accent-text)}
.cc-view-tools .cc-seg{padding:0}
.cc-view-tools .cc-seg button[aria-pressed=true],.cc-tool-text[aria-pressed=true],.cc-camera[aria-pressed=true]{background:var(--cc-accent)!important;color:#fff!important;border-color:#0090e6!important}
.cc-camera-state{box-shadow:0 0 0 2px var(--cc-accent)}
.cc-camera[aria-pressed=false] .cc-camera-state{box-shadow:none}
.cc-slider{font-weight:600}
.cc-fit,.cc-color-picker{background:var(--cc-raise)}
.cc-fit-actions button,.cc-feedback button{background:var(--cc-surface)}

/* tabs: grey strip, the current tab joins the white panel under it */
.cc-wardrobe{padding-top:0}
.cc-tabs{gap:0;margin:0 -18px;padding:0;background:var(--cc-sunk);border-bottom:1px solid var(--cc-line-strong)}
.cc-tab{min-height:44px;padding:0 20px;border:0;border-right:1px solid var(--cc-line);border-top:3px solid transparent;border-bottom:0;margin-bottom:-1px;font-weight:600;font-size:15px;color:var(--cc-sub);background:transparent}
.cc-tab:last-child{border-right:0}
.cc-tab:hover{background:var(--cc-raise);color:var(--cc-text)}
.cc-tab.is-current{background:var(--cc-surface);color:var(--cc-text);border-top-color:var(--cc-accent);border-bottom:1px solid var(--cc-surface)}

/* categories: square buttons. On a computer they wrap onto more lines, so every category (Hats, Head, Hair, Face, Neck, Shoulder,
   Front, Back, Waist, Gear) is always visible; on a phone they scroll sideways as before. */
.cc-pills{gap:6px;padding:14px 0 4px}
.cc-pill{min-height:30px;padding:0 13px;border:1px solid var(--cc-line-strong);background:var(--cc-surface);color:var(--cc-text);font-weight:600;font-size:13px}
.cc-pill:hover{background:var(--cc-raise);border-color:var(--cc-line-strong);color:var(--cc-text)}
.cc-pill.is-current{background:var(--cc-accent);border-color:#0090e6;color:#fff}
@media(min-width:821px){.cc-pills{flex-wrap:wrap;overflow:visible}}
.cc-bar{margin:12px 0}
.cc-crumb{font-size:13px}
.cc-search{height:32px;border:1px solid var(--cc-line-strong);background:var(--cc-surface);width:240px}
.cc-search:focus-within{border-color:var(--cc-accent);box-shadow:0 0 0 1px var(--cc-accent)}

/* items: flat tiles in a tidy grid */
.cc-grid{gap:10px;grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
.cc-card{padding:6px;gap:6px;border:1px solid var(--cc-line);background:var(--cc-surface);transition:border-color .1s}
.cc-card:hover{transform:none;box-shadow:none;border-color:var(--cc-accent)}
.cc-card.is-worn{border:2px solid var(--cc-accent);padding:5px;background:var(--cc-surface);box-shadow:none}
.cc-thumb{border:1px solid var(--cc-line);background:var(--cc-raise)}
.cc-card.is-worn .cc-thumb{background:var(--cc-accent-soft)}
.cc-name{font-size:13px;font-weight:600}
.cc-tag{background:var(--cc-sunk);font-size:11px}
.cc-actions button,.cc-wearing{min-height:30px;font-size:13px;font-weight:600}
.cc-wear,.cc-remove,.cc-fit-button{border:1px solid var(--cc-line-strong);background:var(--cc-raise);color:var(--cc-text)}
.cc-wear:hover{background:var(--cc-accent);border-color:#0090e6;color:#fff}
.cc-remove:hover{background:var(--cc-danger);border-color:var(--cc-danger);color:#fff}
.cc-wearing{border:1px solid var(--cc-ok);background:transparent;color:var(--cc-ok)}
.cc-check{top:11px;left:11px;width:20px;height:20px;background:var(--cc-accent);color:#fff;box-shadow:none}
.cc-pager button{border:1px solid var(--cc-line-strong);background:var(--cc-raise)}
.cc-pager button:hover:not(:disabled){background:var(--cc-accent);border-color:#0090e6;color:#fff}

/* body and colour panels */
.cc-parts button{border:1px solid var(--cc-line-strong);background:var(--cc-surface);font-weight:600}
.cc-parts button.is-current{background:var(--cc-accent);border-color:#0090e6;color:#fff}
.cc-swatch,.cc-part-swatch,.cc-color-part{border:1px solid #0003}
.cc-swatch:hover{transform:none;outline:2px solid var(--cc-accent)}
.cc-create input{border:1px solid var(--cc-line-strong);background:var(--cc-surface)}
.cc-create .cc-wear{background:var(--cc-accent);border-color:#0090e6;color:#fff}
.cc-create .cc-wear:hover{background:#25b2ff;color:#fff;border-color:#0090e6;opacity:1}
.cc-classic-colors{border-top:1px solid var(--cc-line)}
.cc-scale .cc-remove{border:1px solid var(--cc-line-strong);background:var(--cc-raise);color:var(--cc-text);font-weight:600}
.cc-scale .cc-remove:hover{background:var(--cc-accent);border-color:#0090e6;color:#fff}
@media(max-width:820px){.cc-fit{box-shadow:0 -2px 6px #0004}}