.mf-view { min-height: 360px; }
.mf-screen { max-width: 460px; margin: 0 auto; padding: 8px 0 4px; align-items: center; }
.mf-screen > .btn-block { width: 100%; }
.mf-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 320px; }
.mf-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); transition: background .2s, transform .2s; }
.mf-dot.is-done { background: var(--green); }
.mf-dot.is-now { background: var(--primary); transform: scale(1.35); }
.mf-avatar {
  --c: var(--primary);
  width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center;
  font-size: 40px; font-weight: 900; color: #fff; background: var(--c);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--c) 40%, transparent); animation: bb-pop .35s cubic-bezier(.2, 1.4, .4, 1);
}
.mf-big { font-size: clamp(24px, 6.6vw, 32px); font-weight: 900; letter-spacing: -0.03em; margin: 0; line-height: 1.35; }
.mf-emoji { font-size: 64px; line-height: 1.1; }
.mf-who { margin: 0; font-weight: 800; color: var(--text-2); }
.mf-name { display: inline-block; padding: 0 12px; border-radius: 12px; background: var(--c, var(--primary)); line-height: 1.4; margin: 2px 0; }

/* 역할 카드 */
.mf-card {
  --rc: var(--primary);
  width: 100%; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface);
  border: 3px solid var(--rc); box-shadow: var(--shadow); animation: bb-pop .35s cubic-bezier(.2, 1.4, .4, 1);
}
.mf-card-head { background: var(--rc); color: #fff; padding: 22px 16px 18px; }
.mf-card-emoji { font-size: 60px; line-height: 1.1; }
.mf-card-kicker { margin: 6px 0 0; font-weight: 700; opacity: .85; font-size: 14px; }
.mf-card-role { margin: 0; font-size: clamp(40px, 12vw, 60px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.15; }
.mf-card-body { padding: 18px 18px 20px; text-align: left; }
.mf-card-desc { margin: 0 0 12px; color: var(--text); line-height: 1.6; }
.mf-card-win { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-weight: 700; font-size: 14.5px; }
.mf-card-mates { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--rc) 14%, var(--surface)); font-size: 14.5px; }

/* 설정 */
.mf-sum { display: flex; flex-wrap: wrap; gap: 6px; }
.mf-sum-chip {
  --rc: var(--primary);
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px; font-weight: 700; font-size: 14px;
  background: color-mix(in srgb, var(--rc) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--rc) 40%, transparent);
}
.mf-sum-chip b { font-family: var(--font-num); font-size: 16px; }
.mf-msg { margin: 0; font-weight: 700; font-size: 14px; color: var(--text-2); }
.mf-msg.is-bad { color: var(--danger); }
.mf-resume { border: 2px solid var(--primary); }

/* 사회자 */
.mf-host-title { margin: 0; font-size: 20px; font-weight: 900; }
.mf-alive { display: flex; flex-wrap: wrap; gap: 8px; }
.mf-alive-chip { padding: 8px 14px; border-radius: 12px; background: var(--surface-2); font-weight: 700; }
.mf-alive-chip b { font-family: var(--font-num); font-size: 18px; margin-left: 2px; }
.mf-alive-chip.is-mafia { background: color-mix(in srgb, #b3261e 14%, var(--surface)); }
.mf-status { display: flex; flex-direction: column; gap: 10px; }
.mf-win { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; font-weight: 800; animation: bb-pop .35s ease-out; }
.mf-win.is-town { background: color-mix(in srgb, var(--green) 16%, var(--surface)); border: 2px solid var(--green); }
.mf-win.is-mafia { background: color-mix(in srgb, #b3261e 16%, var(--surface)); border: 2px solid #b3261e; }
.mf-roster { display: flex; flex-direction: column; gap: 12px; }
.mf-group { --rc: var(--primary); }
.mf-group-title { margin: 0 0 6px; font-weight: 800; font-size: 15px; color: var(--rc); }
.mf-group-n { color: var(--text-3); font-weight: 700; font-size: 13px; }
.mf-group-list { display: flex; flex-wrap: wrap; gap: 6px; }
.mf-p {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 12px; cursor: pointer;
  border: 2px solid var(--rc); background: var(--surface); color: var(--text); font-weight: 800; font-size: 15px;
  max-width: 100%; transition: background .15s, opacity .15s;
}
.mf-p:hover { background: color-mix(in srgb, var(--rc) 10%, var(--surface)); }
.mf-p-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-p.is-out { opacity: .55; border-style: dashed; }
.mf-p.is-out .mf-p-name { text-decoration: line-through; }
.mf-p-tag { font-size: 11.5px; padding: 1px 6px; border-radius: 6px; background: var(--surface-3); color: var(--text-2); }
.mf-cover { padding: 28px 16px; border-radius: var(--radius-lg); background: var(--surface-2); border: 2px dashed var(--border-strong); }
.mf-cover-text { margin: 0; font-size: 18px; font-weight: 800; }

/* 꾹 누르기 */
.mf-hold { position: relative; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.mf-hold-fill { position: absolute; inset: 0; background: color-mix(in srgb, var(--primary) 70%, transparent); transform: scaleX(0); transform-origin: left center; pointer-events: none; }
.mf-hold.is-holding .mf-hold-fill { transform: scaleX(1); transition: transform var(--hold, 1000ms) linear; }
.mf-hold-label { position: relative; }

/* 낮·밤 타이머 */
.mf-phase { border-radius: var(--radius-lg); padding: 16px; background: #fff3d6; color: #3a2a06; text-align: center; transition: background .4s, color .4s; }
.mf-phase.is-night { background: #1c1f2b; color: #eef0f8; }
.mf-phase-label { margin: 0; font-weight: 900; font-size: 18px; }
.mf-time { font-family: var(--font-num); font-size: clamp(46px, 15vw, 68px); font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mf-phase.is-urgent .mf-time { color: #ff5a5f; animation: bb-pulse 1s ease-in-out infinite; }
.mf-bar { height: 10px; border-radius: 999px; background: rgba(0, 0, 0, .12); overflow: hidden; margin: 10px 0 12px; }
.mf-phase.is-night .mf-bar { background: rgba(255, 255, 255, .14); }
.mf-bar > span { display: block; height: 100%; background: #f2a516; transform-origin: left center; transition: transform .25s linear; }
.mf-phase.is-night .mf-bar > span { background: #8b9cff; }
.mf-phase .btn:not(.btn-primary) { background: rgba(255, 255, 255, .6); color: #2b2210; border-color: rgba(0, 0, 0, .12); }
.mf-phase.is-night .btn:not(.btn-primary) { background: rgba(255, 255, 255, .1); color: #eef0f8; border-color: rgba(255, 255, 255, .2); }
.mf-phase-set { margin-top: 12px; text-align: left; }
.mf-phase-set summary { cursor: pointer; font-weight: 700; font-size: 14px; min-height: 36px; display: flex; align-items: center; }
.mf-phase-set .stepper { background: var(--surface); color: var(--text); }
.mf-phase-set .stepper button { color: var(--text-2); }

/* 대본 */
.mf-details summary { cursor: pointer; font-weight: 800; min-height: 36px; display: flex; align-items: center; }
.mf-script { display: grid; gap: 14px; margin-top: 12px; }
.mf-script-title { margin: 0 0 4px; font-weight: 900; }
.mf-script ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.mf-script li { line-height: 1.6; }
.mf-script li::marker { color: var(--text-3); font-weight: 700; }
.game-shell.is-full .mf-view { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.mf-phase .field-label { color: inherit; }