/* The character creator (Milestone 1). Scoped under .fd like entry.css, which defines the tokens. */
.fd-create{display:grid;grid-template-rows:auto minmax(0,1fr);background:#0d0f0c}
.fd .fd-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;height:60px;padding:0 clamp(14px,3vw,40px);border-bottom:1px solid var(--fd-line);background:#0d0f0cf5}
.fd .fd-bar-end{justify-self:end}
.fd .fd-bar .fd-logo-j{font-size:24px}.fd .fd-bar .fd-logo-t{font-size:12px}
.fd .fd-stepper{display:flex;gap:6px;align-items:center}
.fd .fd-stepper li{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;border-radius:999px;border:1px solid var(--fd-line);color:var(--fd-mut);font:600 13px/1 var(--fd-font)}
.fd .fd-step-n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#ffffff14;font-size:12px}
.fd .fd-stepper li.is-current{border-color:var(--fd-gold);color:#fff;background:#e4bd6818}
.fd .fd-stepper li.is-current .fd-step-n{background:var(--fd-gold);color:var(--fd-gold-ink)}
.fd .fd-stepper li.is-done{color:var(--fd-text)}
.fd .fd-stepper li.is-done .fd-step-n{background:var(--fd-green);color:#fff}
.fd .fd-create-body{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(400px,.88fr);min-height:0}
.fd .fd-stage{position:relative;overflow:hidden;min-height:0;background:#24201c}
.fd .fd-stage-art{position:absolute;inset:0}
.fd .fd-room{display:block;width:100%;height:100%;image-rendering:pixelated}
.fd .fd-stage-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#0d0f0ccc 0%,transparent 34%),linear-gradient(90deg,transparent 70%,#171a1680 100%)}
.fd .fd-id{position:absolute;left:clamp(14px,2.4vw,32px);bottom:clamp(14px,3vh,30px);display:flex;gap:14px;align-items:center;padding:10px 18px 10px 10px;border-radius:14px;background:#171a16ec;border:1px solid var(--fd-line2);box-shadow:0 14px 40px #000a;max-width:calc(100% - 28px)}
.fd .fd-id-photo{flex:none;width:62px;height:72px;border-radius:9px;overflow:hidden;background:#2b2f26;border:1px solid var(--fd-line2)}
.fd .fd-id-photo svg{display:block;width:100%;height:100%}
.fd .fd-id-lines{display:grid;gap:2px;min-width:0}
.fd .fd-id-lines small{font:600 10px/1.2 var(--fd-font);letter-spacing:.14em;text-transform:uppercase;color:var(--fd-gold)}
.fd .fd-id-lines strong{font:700 20px/1.2 var(--fd-font);color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd .fd-id-lines span{font-size:13px;color:var(--fd-mut)}
.fd .fd-id-fiction{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#a79f90}
.fd .fd-id-large{padding:14px 26px 14px 14px;gap:18px}
.fd .fd-id-large .fd-id-photo{width:92px;height:106px}
.fd .fd-id-large strong{font-size:26px}
.fd .fd-controls{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;background:var(--fd-panel);border-left:1px solid var(--fd-line)}
.fd .fd-controls-scroll{overflow:auto;overscroll-behavior:contain;padding:26px clamp(18px,3vw,44px) 26px;display:grid;gap:18px;align-content:start}
.fd .fd-controls h1{font:700 clamp(26px,2.6vw,34px)/1.1 var(--fd-font);color:#fff}
.fd .fd-sub{color:var(--fd-mut);font-size:15px;max-width:52ch}
.fd .fd-fields{display:grid;gap:22px}
.fd .fd-field{display:grid;gap:10px}
.fd .fd-field>label,.fd .fd-label{font:600 13px/1.2 var(--fd-font);letter-spacing:.1em;text-transform:uppercase;color:var(--fd-gold)}
.fd .fd-help{font-size:13px;color:#aaa294}
.fd .fd-input{display:block;width:100%;min-height:54px;padding:12px 16px;border-radius:12px;border:1px solid var(--fd-line2);background:#0d0f0c;color:#fff;font:600 20px/1.2 var(--fd-font);cursor:text}
.fd .fd-input:focus{outline:3px solid var(--fd-focus);outline-offset:2px;border-color:var(--fd-gold)}
.fd .fd-input[aria-invalid=true]{border-color:var(--fd-danger)}
.fd .fd-chips{display:flex;flex-wrap:wrap;gap:8px}
.fd .fd-chip{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--fd-line2);background:#ffffff0c;color:var(--fd-text);font:600 14px/1 var(--fd-font)}
.fd .fd-chip:hover{background:#ffffff1c;border-color:var(--fd-gold)}
.fd .fd-row{display:flex;gap:10px;flex-wrap:wrap}
.fd .fd-row .fd-btn{flex:1 1 140px}
.fd .fd-quick{justify-self:start}
.fd .fd-foot{width:auto;max-width:none;margin:0;text-align:left;display:flex;gap:10px;padding:14px clamp(18px,3vw,44px) calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--fd-line);background:#13150f}
.fd .fd-foot .fd-btn-primary{flex:1}
.fd .fd-foot .fd-btn-secondary{flex:0 0 auto;min-width:110px}

/* choice groups */
.fd .fd-choice{display:grid;gap:10px;grid-template-columns:repeat(var(--fd-cols,1),minmax(0,1fr))}
.fd .fd-choice-wide{--fd-cols:2}
.fd .fd-choice-thumbs{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.fd .fd-opt{position:relative;display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:12px;border:1px solid var(--fd-line2);background:#ffffff08;color:var(--fd-text);text-align:left;transition:background .12s,border-color .12s}
.fd .fd-opt:hover:not([disabled]){background:#ffffff14;border-color:#ffffff66}
.fd .fd-opt.is-selected{border-color:var(--fd-gold);background:#e4bd6819;box-shadow:inset 0 0 0 1px var(--fd-gold)}
.fd .fd-opt.is-selected::after{content:'\2713';position:absolute;top:8px;right:12px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--fd-gold);color:var(--fd-gold-ink);font:700 12px/1 var(--fd-font)}
.fd .fd-opt-text{display:grid;gap:3px;min-width:0;padding-right:22px}
.fd .fd-opt-text strong{font:700 16px/1.25 var(--fd-font);color:#fff}
.fd .fd-opt-text small{font:400 13px/1.4 var(--fd-font);color:var(--fd-mut)}
.fd .fd-choice-thumbs .fd-opt{flex-direction:column;justify-content:flex-start;gap:6px;padding:8px 6px 10px;text-align:center}
.fd .fd-choice-thumbs .fd-opt-text{padding:0}
.fd .fd-choice-thumbs .fd-opt-text strong{font-size:13px}
.fd .fd-choice-thumbs .fd-opt.is-selected::after{top:5px;right:5px;width:18px;height:18px}
.fd .fd-thumb{display:block;width:66px;height:66px;border-radius:9px;overflow:hidden;background:linear-gradient(#34382f,#262a22)}
.fd .fd-thumb svg{display:block;width:100%;height:100%}
.fd .fd-swatches{display:flex;flex-wrap:wrap;gap:2px}
.fd .fd-swatch{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%}
.fd .fd-swatch::before{content:'';width:30px;height:30px;border-radius:50%;background:var(--fd-swatch);box-shadow:inset 0 0 0 1px #ffffff40;transition:transform .12s}
.fd .fd-swatch:hover::before{transform:scale(1.1)}
.fd .fd-swatch.is-selected::after{content:'';position:absolute;inset:3px;border-radius:50%;border:3px solid var(--fd-gold)}

/* upright phone: the preview on top, the choices under it */
@media (max-width:760px),(max-aspect-ratio:1/1){
  .fd .fd-create-body{grid-template-columns:1fr;grid-template-rows:clamp(150px,30dvh,300px) minmax(0,1fr)}
  .fd .fd-controls{border-left:0;border-top:1px solid var(--fd-line)}
  .fd .fd-bar{grid-template-columns:auto 1fr auto;height:52px}
  .fd .fd-step-l{display:none}
  .fd .fd-stepper{justify-self:center}
  .fd .fd-stepper li{padding:5px 8px 5px 6px}
  .fd .fd-controls-scroll{padding:18px 18px 22px;gap:14px}
  .fd .fd-controls h1{font-size:24px}
  .fd .fd-sub{font-size:14px}
  .fd .fd-id{left:12px;bottom:10px;padding:6px 12px 6px 6px;gap:10px}
  .fd .fd-id-photo{width:44px;height:52px}
  .fd .fd-id-lines strong{font-size:16px}
  .fd .fd-id-lines small,.fd .fd-id-lines span{font-size:11px}
  .fd .fd-id-large .fd-id-photo{width:56px;height:66px}
  .fd .fd-id-large strong{font-size:18px}
  .fd .fd-choice-thumbs{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
  .fd .fd-thumb{width:58px;height:58px}
  .fd .fd-input{font-size:18px}
}
@media (max-height:520px) and (orientation:landscape){
  .fd .fd-create-body{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:minmax(0,1fr)}
  .fd .fd-bar{height:44px}
  .fd .fd-step-l,.fd .fd-id{display:none}
  .fd .fd-controls-scroll{padding:12px 16px;gap:10px}
  .fd .fd-controls h1{font-size:20px}
  .fd .fd-sub,.fd .fd-eyebrow{display:none}
  .fd .fd-foot{padding:8px 16px}
  .fd .fd-foot .fd-btn-big{min-height:46px;padding:8px 16px}
}

/* the red wordmark stays big, but never crowds the progress steps */
.fd .fd-bar .fd-logo-t b{font-size:1.5em}
/* upright phone: the card sits at the top so the character stays in view, and the room is brought closer */
@media (max-width:760px),(max-aspect-ratio:1/1){
  .fd .fd-id,.fd .fd-id-large{top:10px;bottom:auto;left:10px;padding:5px 12px 5px 5px}
  .fd .fd-id-lines span:nth-of-type(n+2){display:none}
  .fd .fd-id-large .fd-id-photo,.fd .fd-id-photo{width:40px;height:46px}
  .fd .fd-id-large strong,.fd .fd-id-lines strong{font-size:15px}
  .fd .fd-stage-art{transform:scale(1.55);transform-origin:50% 66%}
}
/* desktop: bring the room a little closer so the character is the subject of the preview */
@media (min-width:761px) and (min-aspect-ratio:1/1){
  .fd .fd-stage-art{transform:scale(1.22);transform-origin:50% 70%}
}
/* the username box shares the account screens' live check, which sets these classes on its hint */
.fd .fhint{font-size:13px;color:#aaa294}
.fd .fhint.good{color:#9fd6b4}
.fd .fhint.bad{color:var(--fd-danger)}
.fd .fd-error{min-height:0;font-size:13px;color:var(--fd-danger)}
.fd .fd-input[readonly]{opacity:.8;cursor:default}