/* The character creator (src/creator.js), built from the user's mock-ups (design/camp/cabin/mockups/
   creator.webp, then cabin-v2.webp: one panel on the right): the cabin's room behind, the camper left of the
   middle, the panel with its two tabs (Dress up, Base camper) and Done. On a desk (.creator.stage) every
   place, size and colour below was measured on the mock-up's 16:9 frame (1536 x 864, "design px") and the
   frame is scaled to fit; on a phone (.creator.stack) the same parts stack at screen size. The rotate button
   is one (the user: one is cleaner than the mock-up's three), their own icon in white. */
.creator{--cr-serif:"Crimson Text","Gowun Batang",Georgia,serif;--cr-sans:"Hind","Gowun Dodum",system-ui,sans-serif;
  position:fixed;inset:0;z-index:36;overflow:hidden;color:#f7ead6;font-family:var(--cr-sans);opacity:0;animation:crIn .3s ease forwards}
@keyframes crIn{to{opacity:1}}
.creator.first{background:#0b0806}
/* from the cabin: inside its room, under its corners (the name, Back), which stay to be used */
.creator.in-host{position:absolute;z-index:5;pointer-events:none}
.creator.in-host .cr-panel,.creator.in-host .cr-rot,.creator.in-host .cr-poses{pointer-events:auto}
.creator button{font-family:var(--cr-sans);line-height:1}
.cr-room{position:absolute;inset:0;pointer-events:none}
.cr-room img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;display:block;filter:blur(3.5px) brightness(.9);transform:scale(1.02)}
.cr-day{opacity:0}
/* a scene behind instead of the room (the gate, for a newcomer): darker, so the camper and the panel read over it */
.cr-scene img{object-position:50% 45%;filter:blur(4px) brightness(.62)}
.cr-stage{position:absolute;left:0;top:0;width:1536px;height:864px;transform-origin:0 0}

/* ---- the camper, its stump in one place as it turns, and the rotate button under it ---- */
.cr-figure{position:absolute;left:358px;top:209px;width:480px;height:522px;pointer-events:none}
.cr-figure canvas{position:absolute;inset:0;width:100%;height:100%;transition:opacity .16s ease}
.cr-rot{position:absolute;left:530px;top:742px;width:136px;height:62px;display:grid;place-items:center;padding:0;border:0;border-radius:14px;background:none;cursor:pointer;color:#fff;transition:transform .1s}
.cr-rot svg{width:116px;height:auto;display:block;overflow:visible;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(0,0,0,.35));transition:filter .2s}
.cr-rot:hover svg{filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(255,200,120,.7))}
.cr-rot:active{transform:scale(.94)}

/* the camper in 3D (src/fire/wardrobe3d.js): dragged round; its canvas reaches the window's edges (set in src/creator.js) */
.creator.w3d .cr-figure{pointer-events:auto;cursor:grab;touch-action:none}
.creator.w3d .cr-figure:active{cursor:grabbing}
.creator.w3d .cr-figure canvas{transition:none}
.cr-poses{position:absolute;left:28px;top:150px;display:grid;grid-template-columns:repeat(2,auto);gap:6px;z-index:3}
.cr-pose{min-width:104px;padding:7px 10px;border:1px solid rgba(255,214,160,.28);border-radius:10px;background:rgba(32,21,15,.86);color:#f4e2c8;font:inherit;font-size:13px;text-align:left;cursor:pointer}
.cr-pose:hover{border-color:rgba(255,214,160,.6)}
.cr-pose[aria-pressed="true"]{border-color:#e9b56c;background:rgba(92,58,30,.92)}

/* ---- the panel ---- */
.cr-panel{position:absolute;left:912px;top:73px;width:595px;height:704px;box-sizing:border-box;border-radius:18px;background:rgba(36,22,14,.95);border:1.5px solid rgba(214,168,112,.28);box-shadow:0 12px 34px rgba(0,0,0,.4)}
.cr-panel > *{position:absolute}
.cr-title{left:35px;top:30px;margin:0;font:600 30px/1 var(--cr-sans);color:#fbf0de;white-space:nowrap}
.cr-x{right:20px;top:20px;width:46px;height:46px;display:grid;place-items:center;padding:0;border:0;border-radius:10px;background:none;color:#eadcc6;cursor:pointer}
.cr-x svg{width:26px;height:26px}
.cr-x:hover{background:rgba(255,236,205,.08);color:#fff}
/* a newcomer's name, on the title's row (2026-10-27: asked on the same screen as the look); its die for an idea */
.cr-name{right:27px;top:20px;width:262px;height:48px;display:flex;align-items:center;box-sizing:border-box;border-radius:11px;background:rgba(255,236,205,.06);border:1.5px solid rgba(255,236,205,.22);transition:border-color .15s,box-shadow .15s}
.cr-name:focus-within{border-color:#f0a44c;box-shadow:0 0 12px rgba(240,164,76,.3)}
.cr-name input{flex:1;min-width:0;height:100%;box-sizing:border-box;padding:0 4px 1px 16px;border:0;background:none;color:#fbf0de;font:500 20px/1 var(--cr-sans);outline:none}
.cr-name input::placeholder{color:#a8937c;opacity:1}
.cr-name input:focus{box-shadow:none}   /* (the field's own border shows the focus, not the camp's inset ring for inputs) */
.cr-dice{flex:none;width:44px;height:100%;display:grid;place-items:center;padding:0;border:0;border-left:1.5px solid rgba(255,236,205,.14);border-radius:0 10px 10px 0;background:none;color:#c9b296;cursor:pointer}
.cr-dice svg{width:24px;height:24px}
.cr-dice:hover{color:#ffe2b8;background:rgba(255,236,205,.06)}
.cr-dice:focus-visible{outline:2px solid var(--ember-hi);outline-offset:-3px}
.cr-name:has(input.need){border-color:#e8664a;box-shadow:0 0 12px rgba(232,102,74,.4);animation:cr-need .36s ease}
@keyframes cr-need{20%{transform:translateX(-6px)}45%{transform:translateX(5px)}70%{transform:translateX(-3px)}}
@media (prefers-reduced-motion:reduce){.cr-name:has(input.need){animation:none}}
/* the two tabs */
.cr-tabs2{left:33px;right:27px;top:83px;height:67px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cr-tab2{display:flex;align-items:center;justify-content:center;gap:13px;box-sizing:border-box;border-radius:11px;background:rgba(255,236,205,.03);border:1.5px solid rgba(255,236,205,.16);color:#e3d3bd;cursor:pointer;transition:background .15s}
.cr-tab2 svg{width:32px;height:32px;fill:#b9a48c}
.cr-tab2 span{font:500 20px/1 var(--cr-sans);white-space:nowrap}
.cr-tab2:hover{background:rgba(255,236,205,.07)}
.cr-tab2[aria-selected="true"]{background:#4f301a;border:2.5px solid #f0a44c;color:#ffe2b8;box-shadow:0 0 14px rgba(240,164,76,.35)}
.cr-tab2[aria-selected="true"] svg{fill:#f7a541}
.creator:not(.on-base) .cr-base,.creator.on-base .cr-dress{display:none}
.cr-dress,.cr-base{left:0;right:0;top:0;bottom:0;pointer-events:none}
.cr-dress > *,.cr-base > *{position:absolute;pointer-events:auto}
/* Dress up: the slots, the things, the hair colours */
.cr-cats{left:37px;top:175px;width:523px;height:90px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.cr-cat{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;box-sizing:border-box;border-radius:11px;background:rgba(255,236,205,.03);border:1.5px solid rgba(255,236,205,.1);color:#b8aa9a;cursor:pointer;overflow:hidden}
.cr-cat svg{width:34px;height:34px;fill:#8e7e71;display:block}
.cr-cat span{font:500 17px/1 var(--cr-sans);white-space:nowrap}
html[lang="en"] .cr-cat span{font-size:14px}
.cr-cat:hover{color:#e8dccb}
.cr-cat:hover svg{fill:#b9a996}
.cr-cat[aria-selected="true"]{background:#4a2c18;border:2.5px solid #f0a44c;color:#f3c27a}
.cr-cat[aria-selected="true"] svg{fill:#f7a541}
.cr-h3{margin:0;left:38px;font:500 18px/1 var(--cr-sans);color:#d9c6ae;white-space:nowrap}
.cr-h3.items{top:287px}
.cr-grid{left:38px;top:321px;width:518px;max-height:237px;overflow-y:auto;display:grid;grid-template-columns:repeat(4,116px);gap:16px 18px;align-content:start;scrollbar-width:thin}
.creator:not(.hair) .cr-grid{max-height:290px}
.cr-item{position:relative;width:116px;height:110px;padding:0;border:1.5px solid rgba(255,236,205,.12);border-radius:11px;background:#3d281d;cursor:pointer;display:grid;place-items:center;overflow:hidden;transition:background .15s}
.cr-item img{width:104px;height:104px;display:block;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-select:none}
.cr-item canvas{width:88px;height:88px;display:block}
.cr-item:hover{background:#4a3125}
.cr-item[aria-pressed="true"]{border:2.5px solid #f0a44c;background:#4a2f20}
.cr-h3.colours{top:568px}
.creator:not(.hair) .cr-h3.colours,.creator:not(.hair) .cr-swatches{display:none}
.cr-swatches{left:37px;top:622px;display:flex;gap:12px}
.cr-swatch{position:relative;width:45px;height:45px;padding:0;border:1.5px solid rgba(255,236,205,.18);border-radius:8px;cursor:pointer;overflow:hidden}
.cr-swatch[aria-pressed="true"]{border:2.5px solid #f0a44c;cursor:default}
.cr-swatch.soon{filter:brightness(.55)}
/* a thing's colours under its card (the user, 2026-11-07): square chips, the one worn framed, those not had yet locked */
.cr-cell{display:flex;flex-direction:column;align-items:center;gap:9px}
.cr-chips{display:flex;gap:9px}
.cr-chip{position:relative;width:28px;height:28px;padding:0;box-sizing:border-box;border:1.5px solid rgba(255,236,205,.32);border-radius:6px;cursor:pointer}
.cr-chip[aria-pressed="true"]{border:2.5px solid #f0a44c;box-shadow:0 0 8px rgba(240,164,76,.45)}
.cr-chip.locked::after{content:"";position:absolute;inset:0;border-radius:4px;background:rgba(14,9,6,.38) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 11V8.2a4 4 0 0 1 8 0V11' fill='none' stroke='%23fff3e0' stroke-width='2.4'/%3E%3Crect x='5.5' y='10.5' width='13' height='10' rx='2.2' fill='%23fff3e0'/%3E%3C/svg%3E") center/15px no-repeat}
.cr-chip:focus-visible{outline:2px solid var(--ember-hi);outline-offset:3px}
/* a colour not had yet: the question over the panel, the camper wearing it beside */
.cr-buy{inset:0;z-index:5;border-radius:18px;background:rgba(20,12,8,.74);display:grid;place-items:center}
.cr-buy-box{width:450px;box-sizing:border-box;padding:30px 30px 26px;border-radius:16px;background:#2c1b11;border:1.5px solid rgba(214,168,112,.35);box-shadow:0 18px 40px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:22px}
.cr-buy-q{margin:0;font:500 20px/1.5 var(--cr-sans);color:#fbf0de;text-align:center;word-break:keep-all}
.cr-buy-item{margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 16px;border-radius:10px;background:rgba(255,236,205,.06);font:500 18px/1.25 var(--cr-sans);color:#e9d8c0}
.cr-buy-item b{color:#ffcf8a;font-weight:700;white-space:nowrap}
.cr-buy-acts{display:flex;gap:12px;justify-content:center}
.cr-buy-acts .cr-btn{height:54px;min-width:150px;padding:0 22px;font-size:19px}
.cr-btn.quiet{background:rgba(255,236,205,.07);border:1.5px solid rgba(255,236,205,.26);color:#f1e3cd}
.cr-btn.quiet:hover{background:rgba(255,236,205,.13)}
.cr-btn[disabled]{opacity:.5;cursor:default;filter:saturate(.35)}
.cr-btn[disabled]:active{transform:none}
.creator.stack .cr-buy{position:fixed;z-index:20;border-radius:0}
.creator.stack .cr-buy-box{width:calc(100% - 32px)}
/* the one you have: ticked (the mock-up's cream disc) */
.cr-item[aria-pressed="true"]::after,.cr-card[aria-pressed="true"]::after{content:"";position:absolute;right:6px;bottom:6px;width:30px;height:30px;border-radius:50%;background:#f5ecdc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%233a2414' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;box-shadow:0 2px 5px rgba(0,0,0,.4)}
/* Base camper: the portraits */
.cr-cards{left:41px;top:203px;width:516px;max-height:400px;overflow-y:auto;display:grid;grid-template-columns:repeat(3,158px);gap:26px 20px;align-content:start;scrollbar-width:thin}
.cr-card{position:relative;width:158px;height:163px;padding:0;border:1.5px solid rgba(255,236,205,.16);border-radius:12px;background:#1e2440;overflow:hidden;cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.cr-card img{display:block;width:100%;height:100%;object-fit:cover;opacity:.9;transition:opacity .15s}
.cr-card:hover img,.cr-card[aria-pressed="true"] img{opacity:1}
.cr-card:hover{transform:translateY(-2px)}
.cr-card[aria-pressed="true"]{border:3px solid #f2993c;box-shadow:0 0 16px rgba(242,153,60,.4)}
/* a slot or a colour with no drawings yet: dimmed and struck through in red (the user, 2026-10-15) */
.soon{cursor:default!important}
.cr-cat.soon svg,.cr-cat.soon span{opacity:.42}
.cr-cat.soon:hover{color:#b8aa9a}
.cr-cat.soon:hover svg{fill:#8e7e71}
.soon::after{content:"";position:absolute;left:-14%;right:-14%;top:50%;height:3px;margin-top:-1.5px;background:#d9382a;border-radius:2px;transform:rotate(-41deg);pointer-events:none;box-shadow:0 0 4px rgba(0,0,0,.4)}
.cr-swatch.soon::after{transform:rotate(-45deg);height:2.5px}
/* Done (a newcomer's Base camper: Next) */
.cr-acts{left:420px;top:623px}
.cr-btn{height:62px;min-width:156px;box-sizing:border-box;padding:0 28px;border:0;border-radius:12px;font:600 23px/1 var(--cr-sans);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;transition:transform .08s}
.cr-btn.primary{background:linear-gradient(#f6b85e,#f29a3e);color:#3a1a05;box-shadow:inset 0 2px 0 rgba(255,235,190,.7),inset 0 -3px 0 rgba(150,70,10,.45),0 6px 16px rgba(0,0,0,.35)}
.cr-btn.primary:hover{background:linear-gradient(#ffc06a,#f7a44a)}
.cr-btn:active{transform:translateY(1px)}
.cr-rot:focus-visible,.cr-x:focus-visible,.cr-tab2:focus-visible,.cr-cat:focus-visible,.cr-item:focus-visible,.cr-card:focus-visible,.cr-btn:focus-visible,.cr-swatch:focus-visible{outline:2px solid var(--ember-hi);outline-offset:3px}

/* ---- a phone, or a window near square: the camper on top, the panel under it, Done at the bottom ---- */
.creator.stack .cr-stage{position:absolute;inset:0;width:auto;height:auto;transform:none!important;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;display:flex;flex-direction:column;gap:10px;box-sizing:border-box;padding:calc(var(--safe-t) + 10px) 12px calc(var(--safe-b) + 92px);pointer-events:auto}
.creator.in-host.stack .cr-stage{padding-top:calc(var(--safe-t) + 74px)}
.creator.first.stack .cr-room img{object-position:62% 45%}
.creator.first.stack .cr-scene img{object-position:50% 40%}
.creator.first.stack .cr-room::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,8,6,.2),rgba(11,8,6,.6) 40%,rgba(11,8,6,.75))}
.creator.stack .cr-figure{position:relative;left:auto;top:auto;width:auto;height:32vh;min-height:190px;flex:none}
.creator.stack .cr-rot{position:relative;left:auto;top:auto;align-self:center;flex:none;width:104px;height:46px;margin-top:-6px}
.creator.stack .cr-rot svg{width:86px}
.creator.stack .cr-panel{position:relative;left:auto;top:auto;width:auto;height:auto;flex:none;padding:16px 14px 18px;display:flex;flex-direction:column;gap:12px}
.creator.stack .cr-panel > *,.creator.stack .cr-dress > *,.creator.stack .cr-base > *{position:relative;left:auto;right:auto;top:auto;bottom:auto}
.creator.stack .cr-dress,.creator.stack .cr-base{display:flex;flex-direction:column;gap:12px;pointer-events:auto}
.creator.stack:not(.on-base) .cr-base,.creator.stack.on-base .cr-dress{display:none}
.creator.stack .cr-title{font-size:22px;padding-right:44px}
.creator.stack .cr-name{width:auto;height:50px}
.creator.stack .cr-name input{font-size:17px}
.creator.stack .cr-x{position:absolute;right:8px;top:8px;width:40px;height:40px}
.creator.stack .cr-tabs2{height:52px;gap:8px}
.creator.stack .cr-tab2{gap:8px}
.creator.stack .cr-tab2 svg{width:24px;height:24px}
.creator.stack .cr-tab2 span{font-size:15px}
.creator.stack .cr-cats{width:auto;height:64px;gap:5px}
.creator.stack .cr-cat{gap:6px}
.creator.stack .cr-cat svg{width:24px;height:24px}
.creator.stack .cr-cat span{font-size:12.5px}
.creator.stack .cr-h3{font-size:15px}
.creator.stack .cr-grid{width:auto;max-height:none;grid-template-columns:repeat(4,1fr);gap:10px}
.creator.stack .cr-item{width:auto;height:auto;aspect-ratio:116/110}
.creator.stack .cr-item img{width:92%;height:auto;aspect-ratio:1}
.creator.stack .cr-item canvas{width:72%;height:auto;aspect-ratio:1}
.creator.stack .cr-swatches{gap:0;justify-content:space-between}
.creator.stack .cr-swatch{width:36px;height:36px}
.creator.stack .cr-cards{width:auto;max-height:none;grid-template-columns:repeat(3,1fr);gap:12px}
.creator.stack .cr-card{width:auto;height:auto;aspect-ratio:158/163}
.creator.stack .cr-item[aria-pressed="true"]::after,.creator.stack .cr-card[aria-pressed="true"]::after{width:24px;height:24px;right:4px;bottom:4px;background-size:16px}
.creator.stack .cr-acts{position:fixed;left:12px;right:12px;bottom:calc(var(--safe-b) + 12px);top:auto;display:flex;justify-content:flex-end;pointer-events:auto}
.creator.stack .cr-btn{flex:1;max-width:240px;height:54px;min-width:0;font-size:19px}