/* 人のカードと投げもの（基盤の担当B・2026-09-29）。360×640 で押しやすく（押す所は 44px 以上） */
.msc-ov { position: fixed; inset: 0; z-index: 100040; background: rgba(20,8,30,.42); display: flex; align-items: flex-end; justify-content: center; }
.msc-ov[hidden] { display: none !important; }
.msc-sh { position: relative; box-sizing: border-box; width: 100%; max-width: 480px; max-height: 82vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 14px calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; background: #fffafd; color: #3a2a4a; font-size: 14px; line-height: 1.55; box-shadow: 0 -8px 30px rgba(40,10,50,.3); animation: mscUp .22s ease-out; }
.msc-sh *, .msc-sh *::before, .msc-sh *::after { box-sizing: border-box; }
.msc-sh button { font-family: inherit; }
@keyframes mscUp { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.msc-x { position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #f3e8f5; color: #7a3a8a; font-size: 22px; cursor: pointer; z-index: 2; }
.msc-turn { margin: -4px 44px 10px 0; padding: 8px 12px; border-radius: 12px; background: linear-gradient(90deg, #f6cf49, #ffe89a); color: #4a2400; font-weight: 900; font-size: 13px; cursor: pointer; animation: mscPulse .8s ease-in-out infinite alternate; }
@keyframes mscPulse { from { box-shadow: 0 0 0 0 rgba(246,207,73,.2); } to { box-shadow: 0 0 0 5px rgba(246,207,73,.45); } }
.msc-load { margin: 26px 0; text-align: center; color: #9a8aa8; }
.msc-hd { display: flex; gap: 12px; align-items: center; padding-right: 40px; }
.msc-av { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 2px 10px rgba(90,45,95,.25); background: #f3e6f6; }
.msc-av.is-none { display: inline-flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 900; color: #8b6cc1; }
.msc-hd__b { min-width: 0; }
.msc-nm { margin: 0; font-size: 18px; font-weight: 900; line-height: 1.3; word-break: break-all; }
.msc-nm small { font-size: 12px; color: #9a8aa8; font-weight: 700; }
.msc-cpu { display: inline-block; padding: 0 6px; border-radius: 6px; background: #efe6f5; color: #7a3a8a; font-size: 11px; font-style: normal; vertical-align: 2px; }
.msc-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0; }
.msc-chip { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 99px; background: #f4ecfb; color: #6a3a8a; font-size: 11.5px; font-weight: 800; }
.msc-chip.is-crank { background: #fff3cf; color: #7a5200; } .msc-chip.is-lv { background: #e6f3ff; color: #1f5a8a; } .msc-chip.is-pet { background: #eaf8ec; color: #2d6a3a; }
.msc-type { margin: 3px 0 0; font-size: 12px; color: #8b6cc1; font-weight: 800; }
.msc-love { margin: 3px 0 0; font-size: 12.5px; color: #c0418a; font-weight: 800; }
.msc-ago { margin: 2px 0 0; font-size: 11px; color: #a093b5; }
.msc-intro { margin: 10px 0 0; padding: 9px 11px; border-radius: 12px; background: #fff; border: 1px solid #f2dcea; font-size: 13px; white-space: pre-wrap; max-height: 7.5em; overflow: auto; }
.msc-note { margin: 10px 0 0; font-size: 12.5px; color: #7d6f8c; }
.msc-note.is-warn { color: #b2334a; font-weight: 800; }
.msc-note a, .msc-more a, .msc-bal a { color: #c0418a; font-weight: 900; }
.msc-lab { margin: 12px 0 5px; font-size: 13px; font-weight: 900; color: #7a3a8a; }
.msc-lab small { font-weight: 700; color: #9a8aa8; font-size: 11px; margin-left: 4px; }
.msc-throw { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.msc-throw.is-off { opacity: .45; filter: grayscale(.8); }
.msc-th { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 64px; padding: 5px 2px; border-radius: 14px; border: 1.5px solid #f0dcea; background: #fff; color: #3a2a4a; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s; }
.msc-th:active { transform: scale(.92); }
.msc-th i { font-style: normal; font-size: 26px; line-height: 1.1; }
.msc-th img { width: 30px; height: 30px; object-fit: contain; }
.msc-th span { font-size: 10.5px; font-weight: 800; line-height: 1.2; text-align: center; }
.msc-th small { font-size: 10px; color: #a3772a; font-weight: 900; }
.msc-th small::before { content: '✉'; margin-right: 1px; font-size: 9px; }
.msc-th.is-dx { background: linear-gradient(160deg, #fff8e0, #ffe9f3); border-color: #f5c542; }
.msc-th.is-go { animation: mscPulse .4s ease-in-out infinite alternate; }
.msc-th[disabled] { cursor: default; }
.msc-bal { margin: 6px 0 0; font-size: 12px; color: #7d6f8c; text-align: right; }
.msc-bal b { color: #3a2a4a; }
.msc-bal.is-short { color: #b2334a; font-weight: 900; }
.msc-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; }
.msc-b { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 10px; border-radius: 999px; border: 1.5px solid #e0c8ef; background: #fff; color: #7a3a8a; font-size: 14px; font-weight: 900; cursor: pointer; text-decoration: none; text-align: center; }
.msc-b.is-pri { background: linear-gradient(135deg, #d65c9a, #8b6cc1); color: #fff; border-color: transparent; box-shadow: 0 3px 10px rgba(214,92,154,.28); }
.msc-b.is-warn { background: #fff0f2; color: #b2334a; border-color: #f3b8c2; width: 100%; margin-top: 6px; }
.msc-b[disabled], .msc-b.is-off { opacity: .45; cursor: default; filter: grayscale(.6); }
.msc-sub { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; justify-content: center; }
.msc-link { border: 0; background: none; padding: 8px 2px; min-height: 36px; color: #9a8aa8; font-size: 12px; font-weight: 800; text-decoration: underline; cursor: pointer; }
.msc-stamps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.msc-stamps[hidden] { display: none; }
.msc-st { min-height: 44px; padding: 4px; border-radius: 12px; border: 1.5px solid #f0dcea; background: #fff; color: #7a3a8a; font-size: 12px; font-weight: 900; cursor: pointer; }
.msc-rep textarea { width: 100%; min-height: 70px; margin-top: 10px; padding: 8px; border-radius: 10px; border: 1.5px solid #e8d4e2; font-size: 16px; font-family: inherit; }
.msc-giv { margin-top: 10px; }
.msc-giv__row { display: flex; gap: 6px; }
.msc-giv__p { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border-radius: 12px; border: 1px solid #f2dcea; background: #fff; cursor: pointer; }
.msc-giv__p img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.msc-giv__p b { font-size: 13px; line-height: 1; }
.msc-giv__p span { max-width: 100%; font-size: 11px; font-weight: 800; color: #3a2a4a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msc-more { margin: 12px 0 0; text-align: center; font-size: 12.5px; }
.msc-toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 100050; transform: translate(-50%, 20px); max-width: min(92vw, 420px); padding: 10px 16px; border-radius: 14px; background: rgba(40,20,60,.92); color: #fff; font-size: 13.5px; font-weight: 800; text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.msc-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.msc-toast.is-bad { background: rgba(178,51,74,.95); }
/* 押せる印（人の要素） */
[data-msv-uid] { cursor: pointer; -webkit-touch-callout: none; }

/* ---- 投げもの ---- */
.msc-fx { position: fixed; inset: 0; z-index: 100030; pointer-events: none; overflow: hidden; }
.msc-fly { position: absolute; left: 0; top: 0; width: 32px; height: 32px; font-size: 28px; line-height: 32px; text-align: center; filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)); will-change: transform; }
.msc-fly img { width: 32px; height: 32px; object-fit: contain; }
.msc-hit { position: absolute; width: 0; height: 0; }
.msc-hit em { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; font-size: 34px; line-height: 44px; text-align: center; font-style: normal; animation: mscHit .45s cubic-bezier(.2,1.6,.4,1) both; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.msc-hit em img { width: 44px; height: 44px; object-fit: contain; }
.msc-hit i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--c, #f7d54a); animation: mscPart .7s ease-out both; }
.msc-hit.fx-petal i { border-radius: 80% 0 80% 0; background: var(--c); width: 12px; height: 9px; }
.msc-hit.fx-confetti i { border-radius: 2px; width: 7px; height: 11px; }
.msc-hit.fx-confetti i:nth-child(3n) { background: #8b6cc1; } .msc-hit.fx-confetti i:nth-child(3n+1) { background: #4aa8f0; }
.msc-hit.fx-splat em, .msc-hit.fx-splash em { animation: mscSplat .5s ease-out both; }
.msc-hit.fx-splat::after { content: ''; position: absolute; left: -20px; top: -8px; width: 40px; height: 30px; border-radius: 50% 50% 45% 55%; background: radial-gradient(circle at 50% 30%, var(--c) 0 35%, transparent 36%), radial-gradient(ellipse at 50% 60%, rgba(255,255,255,.85) 0 55%, transparent 56%); opacity: .9; animation: mscDrip 2.6s ease-in .3s both; }
.msc-hit.fx-slap em { animation: mscSlap .35s ease-out both; }
.msc-hit.fx-bounce em { animation: mscBounce .9s ease-out both; }
.msc-hit.is-out { opacity: 0; transition: opacity .6s; }
@keyframes mscHit { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes mscSplat { 0% { transform: scale(.3); } 55% { transform: scale(1.35, .8); } 100% { transform: scale(1); } }
@keyframes mscSlap { 0% { transform: rotate(-40deg) scale(1.4); } 60% { transform: rotate(10deg) scale(.9); } 100% { transform: rotate(0) scale(1); } }
@keyframes mscBounce { 0% { transform: scale(.3); } 30% { transform: translateY(-14px) scale(1.2); } 55% { transform: translateY(0) scale(.95); } 75% { transform: translateY(-5px); } 100% { transform: none; } }
@keyframes mscPart { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--dx), calc(var(--dy) + 14px)) rotate(var(--r)); opacity: 0; } }
@keyframes mscDrip { from { transform: translateY(0) scaleY(1); } to { transform: translateY(16px) scaleY(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .msc-sh, .msc-hit em, .msc-hit::after { animation: none !important; } }
@media (max-width: 360px) { .msc-throw { grid-template-columns: repeat(4, minmax(0, 1fr)); } .msc-th { min-height: 60px; } }
