/* HMSCENE1026 プロフィールの「アバターの部屋」。名刺の背景（堕天の dt-card などが !important で塗る）とは別の箱 .hms に描く */
#cmBody .cm__top.hms-top{flex-wrap:wrap;row-gap:10px}
#cmBody .hms{position:relative;flex:0 0 100%;order:99;height:clamp(184px,58vw,232px);margin:0;border-radius:16px;overflow:hidden;background:#f6ecfb;box-shadow:0 0 0 1px rgba(155,120,210,.28),0 6px 18px rgba(80,40,120,.12);isolation:isolate;-webkit-user-select:none;user-select:none}
.hms__cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.hms__bg{position:absolute;inset:0;background:center/cover no-repeat;display:none}
.hms.is-bgimg .hms__bg{display:block}
.hms__hit{position:absolute;inset:0;z-index:1}
/* アバター（外: 左右の位置 translateX / 中: 向き scaleX / 内: ゆれ） */
.hms__av{position:absolute;left:0;bottom:3%;height:78%;aspect-ratio:2/3;z-index:2;pointer-events:none;transition-property:transform;transition-timing-function:linear;will-change:transform}
.hms__sh{position:absolute;left:22%;right:22%;bottom:1.5%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(40,20,60,.34),rgba(40,20,60,0))}
.hms__fl{position:absolute;inset:0}
.hms.is-left .hms__fl{transform:scaleX(-1)}
.hms__bob{position:absolute;inset:0;transform-origin:50% 94%;animation:hmsBreath 3.6s ease-in-out infinite}
.hms.is-walk .hms__bob{animation:hmsHop .46s ease-in-out infinite}
.hms.is-paused .hms__bob,.hms.is-still .hms__bob{animation:none}
.hms__im{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;-webkit-user-drag:none}
@keyframes hmsBreath{0%,100%{transform:scale(1,1)}50%{transform:scale(1.008,1.014)}}
@keyframes hmsHop{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-3.5%) rotate(-1.6deg)}50%{transform:translateY(0) rotate(0)}75%{transform:translateY(-3.5%) rotate(1.6deg)}}
/* 本人のボタン（左上）と背景えらび */
.hms__btns{position:absolute;left:8px;top:8px;z-index:4;display:flex;gap:6px}
.hms__b{display:inline-flex;align-items:center;gap:3px;min-height:32px;padding:5px 11px;border:0;border-radius:999px;background:rgba(255,255,255,.93);color:#6a3aa0!important;font:inherit;font-size:12px;font-weight:900;line-height:1.2;text-decoration:none;box-shadow:0 2px 8px rgba(80,40,120,.2);cursor:pointer;white-space:nowrap}
.hms__b.is-pri{background:linear-gradient(180deg,#b07bff,#7a4ad8);color:#fff!important}
.hms__note{position:absolute;left:8px;top:46px;z-index:4;margin:0;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.88);font-size:10.5px;font-weight:800;color:#8a5ab8;pointer-events:none}
.hms__pick{position:absolute;left:8px;right:8px;bottom:8px;z-index:5;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.96);box-shadow:0 4px 16px rgba(60,30,90,.25)}
.hms__pick[hidden]{display:none}
.hms__pt{margin:0 0 6px;font-size:11.5px;font-weight:900;color:#7a3a8a}
.hms__opts{display:flex;flex-wrap:wrap;gap:5px}
.hms__o{min-height:32px;padding:5px 10px;border:1.5px solid #e6d5f2;border-radius:999px;background:#fff;color:#6f5a86;font:inherit;font-size:11.5px;font-weight:800;cursor:pointer}
.hms__o.is-on{background:#6f4fa8;border-color:transparent;color:#fff}
.hms__pn{margin:6px 0 0;font-size:10.5px;color:#8b7f95}.hms__pn a{color:#a23a78;font-weight:900}
.hms.is-picking .hms__note{display:none}
/* 堕天した人: 場面の縁を闇に（名刺の背景とは別の箱なので、名刺の塗りは変えない） */
#cmBody .cm__card.dt-card .hms{background:#1a0e26;box-shadow:0 0 0 1.5px rgba(186,140,255,.6),0 0 22px rgba(120,50,190,.5)}
#cmBody .cm__card.dt-card .hms::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(115% 90% at 50% 40%,rgba(20,6,34,0) 45%,rgba(20,6,34,.78) 100%),linear-gradient(rgba(36,12,60,.28),rgba(36,12,60,.28));box-shadow:inset 0 0 0 2px rgba(199,155,255,.45),inset 0 0 26px rgba(120,50,190,.55)}
/* 光の飾りの人: 金の縁 */
#cmBody .cm__card.lt-card .hms{box-shadow:0 0 0 1.5px rgba(232,196,110,.8),0 0 18px rgba(255,214,120,.45)}
@media (prefers-reduced-motion:reduce){.hms__bob{animation:none!important}.hms__av{transition:none!important}}
/* PROFSHEET1027 背景を選ぶ枠（下から出る） */
html.hms-lock,html.hms-lock body{overflow:hidden!important}
.hms-ov{position:fixed;inset:0;z-index:100000;background:rgba(30,12,48,.45);opacity:0;transition:opacity .2s}
.hms-ov.is-on{opacity:1}
.hms-sh{position:fixed;left:0;right:0;bottom:0;z-index:100001;max-height:80vh;display:flex;flex-direction:column;background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -8px 30px rgba(40,20,60,.25);transform:translateY(100%);transition:transform .25s ease;padding-bottom:env(safe-area-inset-bottom)}
.hms-sh.is-on{transform:translateY(0)}
@media (min-width:700px){.hms-sh{left:50%;right:auto;width:640px;margin-left:-320px}}
.hms-sh__hd{display:flex;align-items:center;gap:8px;padding:12px 14px 8px;border-bottom:1px solid #f2e6f0}
.hms-sh__hd b{flex:1;font-size:15px;font-weight:900;color:#7a3a8a}
.hms-sh__x{width:36px;height:36px;border:0;border-radius:50%;background:#f6eef8;color:#6f5a86;font-size:18px;font-weight:900;cursor:pointer}
.hms-sh__bd{overflow-y:auto;padding:12px 12px 16px}
.hms-sh__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hms-sh__o{display:flex;flex-direction:column;gap:6px;padding:6px;border:2px solid #efe3f4;border-radius:14px;background:#fff;cursor:pointer;font:inherit;text-align:left}
.hms-sh__o.is-on{border-color:#8a5ae0;box-shadow:0 0 0 3px rgba(138,90,224,.18)}
.hms-sh__o b{font-size:12px;font-weight:900;color:#5a3a7a;padding:0 2px}
.hms-sh__pv{display:block;width:100%;aspect-ratio:5/3;border-radius:10px;overflow:hidden;background:#f6ecfb}
.hms-sh__pv img,.hms-sh__pv canvas{display:block;width:100%;height:100%;object-fit:cover}
.hms-sh__note{margin:10px 2px 0;font-size:11.5px;color:#8b7f95}.hms-sh__note a{color:#a23a78;font-weight:900}
@media (prefers-reduced-motion:reduce){.hms-sh,.hms-ov{transition:none}}
/* HMPOS1027 名刺の中・足あとの段の上 */
#cmBody .cm__card > .hms{margin:12px 0 10px}