/* Free Market Room — character creator (js/fm-creator.js). Uses world.css tokens + .tabs/.seg/.btn. */
.fmc{display:grid;grid-template-columns:220px 1fr;gap:14px;align-items:start}
.fmc-stage{display:flex;flex-direction:column;gap:8px;align-items:center}
.fmc-pvbox{position:relative;width:200px;height:210px;border:2px solid var(--ink);border-radius:10px;overflow:hidden;
  background:linear-gradient(#a9dcf6 0,#d9f0fb 84%,#7cc04a 84%,#7cc04a 87%,#8a5a32 87%,#6a4424 100%);box-shadow:inset 0 0 0 2px #fff}
.fmc-pvbox::before{content:"";position:absolute;left:14px;top:18px;width:46px;height:14px;border-radius:10px;background:#fff;opacity:.85;box-shadow:70px 22px 0 -2px #fff}
.fmc-cv{position:relative;display:block;width:200px;height:210px}
.fmc.fmc-pop .fmc-pvbox{animation:fmc-pop .26s var(--ease-pop)}
@keyframes fmc-pop{0%{transform:scale(.97)}100%{transform:none}}
.fmc-ctl{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.fmc-seg button{padding:5px 8px 3px;font-size:12.5px}
.fmc-side{min-width:0;display:flex;flex-direction:column}
.fmc-h{margin:2px 0 6px;font:800 15px var(--f-game);color:var(--ink)}
.fmc-who{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.fmc-card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px 5px;border:2px solid var(--win-line);border-radius:12px;cursor:pointer;
  background:radial-gradient(circle at 50% 60%,#fff,#efe3c5);font:800 14px var(--f-game);color:var(--ink-2);transition:transform var(--dur-fast) var(--ease-out)}
.fmc-card img{width:84px;height:84px;object-fit:contain}
.fmc-card:hover{transform:translateY(-2px)}
.fmc-card[aria-checked=true],.fmc-sw[aria-checked=true]{border-color:var(--maple);box-shadow:0 0 0 3px rgba(232,100,28,.28);color:var(--ink)}
.fmc-card[aria-checked=true]{background:radial-gradient(circle at 50% 60%,#fff8d8,#ffd36b)}
.fmc-colors{display:flex;flex-wrap:wrap;gap:6px}
.fmc-sw{width:40px;height:40px;display:grid;place-items:center;padding:0;border:2px solid var(--win-line);border-radius:12px;background:#fffdf5;cursor:pointer;transition:transform var(--dur-fast) var(--ease-out)}
.fmc-sw:hover{transform:translateY(-2px)}
.fmc-sw i{display:block;width:26px;height:26px;border-radius:50%;border:2px solid rgba(36,32,46,.55);box-shadow:inset -3px -4px 0 rgba(0,0,0,.16),inset 2px 2px 0 rgba(255,255,255,.5)}
.fmc-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:10px;flex-wrap:wrap}
.fmc-save{min-width:110px}
@media (max-width:620px){
  .fmc{grid-template-columns:1fr;gap:10px}
  .fmc-stage{flex-direction:row;justify-content:center;flex-wrap:wrap}
  .fmc-pvbox,.fmc-cv{width:150px;height:158px}
  .fmc-ctl{flex-direction:column;align-items:stretch}
  .fmc-card img{width:60px;height:60px}
  .fmc-sw{width:38px;height:38px}.fmc-sw i{width:22px;height:22px}
  .fmc-acts .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){.fmc.fmc-pop .fmc-pvbox{animation:none}.fmc-card,.fmc-sw{transition:none}}

/* ---- room integration (market-room): creator window, lobby character card, portraits ---- */
.fm-win.fm-lookwin{width:min(600px,calc(100vw - 24px));left:calc(50% - min(300px,50vw - 12px));right:auto;top:max(12px,calc(50% - 270px));max-height:calc(100dvh - 24px - var(--hud-h,56px))}
.fm-lookwin .fm-wb{padding:12px 14px 14px;overflow:auto}
.fm-mychar{display:flex;gap:12px;align-items:center;margin:0 0 10px;padding:8px 10px;border:2px solid var(--win-line);border-radius:12px;
  background:linear-gradient(#cdeaf8 0,#e8f5fb 70%,#a3d36f 70%,#a3d36f 76%,#c89a62 76%)}
.fm-mychar canvas{width:96px;height:96px;flex:none}
.fm-mychar b{display:block;font:800 16px var(--f-game)}
.fm-mychar small{display:block;color:var(--ink-2);font-size:12.5px;line-height:1.3;margin:2px 0 6px}
#fm-me-face,.fm-shoph .fm-face{background-size:cover;background-position:center;background-color:#cdeaf8}
.fm-lookico{border-radius:50%;background:#cdeaf8}
@media (max-width:820px){.fm-win.fm-lookwin{bottom:calc(var(--hud-h,56px) + 6px);max-height:calc(100dvh - var(--hud-h,56px) - 16px)}}
.fm-parade{margin:14px 0 0;padding:0;border:2px solid var(--win-line);border-radius:12px;overflow:hidden;background:linear-gradient(#bfe5f8,#e9f6fc 82%)}
.fm-parade canvas{display:block;width:100%;height:auto;aspect-ratio:420/150}
.fm-parade figcaption{padding:6px 12px 8px;font-size:13px;color:var(--ink-2);background:#fffdf5;border-top:1.5px solid var(--win-line)}
@media (pointer:coarse){.fmc-sw{width:44px;height:44px}.fmc .btn{min-height:44px}}
@media (pointer:coarse) and (max-width:380px){.fmc-sw{width:40px;height:40px}}