/* 마피아 시즌2 -- 게임 화면은 기본 page-wrap(640px)보다 넓게 쓴다. */
.m2-wrap{
  max-width:1100px;
}

/* ---------- 입장 ---------- */
.m2-entry{
  max-width:420px;
  margin:28px auto 0;
  padding:28px 24px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:14px;
}
.m2-hello{
  color:var(--sub);
  font-size:15px;
}
.m2-hello b{color:var(--cyan);}
.m2-join-row{
  display:flex;
  gap:8px;
}
.m2-code-input{
  flex:1;
  min-width:0;
  padding:12px 14px;
  font-family:'Orbitron',var(--font);
  font-size:18px;
  letter-spacing:.3em;
  text-align:center;
  text-transform:uppercase;
  color:var(--text);
  background:rgba(255,255,255,0.04);
  border:1px solid var(--line);
  border-radius:12px;
  outline:none;
}
.m2-code-input:focus{border-color:var(--cyan);}
.m2-entry .message{margin-top:0;}
.m2-note{
  font-size:12px;
  color:var(--sub);
  opacity:.7;
}

/* ---------- 게임 ---------- */
.m2-game{margin-top:20px;}
.m2-hud{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.m2-hud-left{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.m2-chip{
  padding:6px 12px;
  font-size:13px;
  color:var(--sub);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:999px;
}
.m2-chip b{
  font-family:'Orbitron',var(--font);
  color:var(--cyan);
  letter-spacing:.15em;
}
.m2-conn{color:var(--success);}
.m2-conn.off{color:var(--danger);}

.m2-stage{
  position:relative;
  width:100%;
  height:min(68vh,640px);
  min-height:320px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:#04060c;
}
.m2-stage canvas{
  display:block;
  width:100%;
  height:100%;
  touch-action:none;   /* 모바일 조이스틱 드래그 중 화면 스크롤 방지 */
  user-select:none;
  -webkit-user-select:none;
}
.m2-help{
  margin-top:8px;
  font-size:12px;
  color:var(--sub);
}
.m2-test-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.m2-game .message{margin-top:8px;}
.m2-select{
  padding:7px 10px;
  font-family:var(--font);
  font-size:13px;
  color:var(--text);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
}
.m2-select option{color:#111;}
.m2-role{color:#f5d68a;}
.m2-player-list{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:14px;
  padding:0;
}
.m2-player-list li{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  font-size:13px;
  color:var(--text);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:999px;
}
.m2-player-list .dot{
  width:12px;
  height:12px;
  border-radius:50%;
}

/* ---------- 로비 (두건 색 고르기) ---------- */
.m2-phase{color:#f5d68a;}
.m2-lobby{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
  padding:12px 16px;
}
.m2-lobby-label{
  font-size:13px;
  font-weight:700;
  color:var(--sub);
}
.m2-palette{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}
.m2-swatch{
  width:30px;
  height:30px;
  padding:0;
  border:2px solid rgba(255,255,255,0.18);
  border-radius:50%;
  cursor:pointer;
  transition:transform .12s, border-color .12s;
}
.m2-swatch:hover:not(:disabled){transform:scale(1.12);}
.m2-swatch.on{
  border-color:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,0.25);
}
.m2-swatch:disabled{
  opacity:.25;
  cursor:not-allowed;
}
.m2-wait{
  font-size:13px;
  color:var(--sub);
}

/* ---------- 직업 캐릭터 그림 (시작 연출 / 직업 카드 공용) ----------
   characters.js SVG(viewBox 88x98) + 캔버스에서 그리던 발/빛나는 눈을 같은 비율 위치에 */
.m2-fig{
  position:relative;
  display:inline-block;
  width:var(--w,88px);
  aspect-ratio:88/98;
}
.m2-fig img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.m2-fig .foot{
  position:absolute;
  top:84.3%;
  width:13.6%;
  height:7.1%;
  border-radius:50%;
  background:#121419;
}
.m2-fig .foot.l{left:36.4%;}
.m2-fig .foot.r{left:50%;}
.m2-fig .eye{
  position:absolute;
  top:44.4%;
  width:4.1%;
  height:4.9%;
  border-radius:50%;
  background:var(--eye);
  box-shadow:0 0 6px var(--eye);
  animation:m2-blink 4s infinite;
}
.m2-fig .eye.l{left:50.2%;}
.m2-fig .eye.r{left:58.2%;}
@keyframes m2-blink{
  0%, 96%, 100%{transform:scaleY(1);}
  98%{transform:scaleY(.15);}
}

/* 마피아팀 동료 목록 */
.m2-mates{
  display:flex;
  flex-direction:column;
  gap:3px;
  font-size:12px;
  color:var(--sub);
}
.m2-mates-title{
  font-weight:800;
  color:#ff8a80;
}
.m2-mate b{color:var(--text);}
.m2-mates-none{opacity:.8;}

/* ---------- 왼쪽 직업 카드 (마피아42식) ---------- */
.m2-rolehud{
  --team:#5aa2ff;
  text-align:left;
  position:absolute;
  left:12px;
  top:12px;
  z-index:3;
  width:230px;
  padding:10px 12px 12px;
  background:rgba(8,10,20,0.84);
  border:1px solid rgba(255,255,255,0.10);
  border-left:4px solid var(--team);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,0.45);
  backdrop-filter:blur(4px);
  animation:m2-hud-in .45s ease-out;
}
.m2-rolehud[data-team="mafia"]{--team:#ff4d4d;}
@keyframes m2-hud-in{
  from{transform:translateX(-30px); opacity:0;}
  to{transform:none; opacity:1;}
}
.m2-rolehud-head{
  display:flex;
  align-items:baseline;
  gap:8px;
  width:100%;
  padding:0;
  color:var(--text);
  font-family:var(--font);
  text-align:left;
  background:none;
  border:0;
  cursor:pointer;
}
.m2-rolehud-team{
  font-size:11px;
  font-weight:700;
  color:var(--team);
}
.m2-rolehud-name{
  flex:1;
  font-size:18px;
  font-weight:900;
}
.m2-rolehud-caret{
  font-size:12px;
  color:var(--sub);
  transition:transform .2s;
}
.m2-rolehud.collapsed .m2-rolehud-caret{transform:rotate(-90deg);}
.m2-rolehud.collapsed .m2-rolehud-body{display:none;}
.m2-rolehud-body{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:6px 10px;
  margin-top:8px;
}
.m2-rolehud-fig{--w:56px; grid-row:span 2;}
.m2-rolehud-desc{
  margin:0;
  font-size:12px;
  line-height:1.45;
  color:var(--sub);
}
.m2-rolehud-desc b{color:var(--team);}
.m2-rolehud .m2-mates{grid-column:1 / -1;}
.m2-rolehud .m2-mates:empty{display:none;}

/* ---------- 게임 시작 연출 (구구덕식) ---------- */
.m2-intro{
  --spot:rgba(70,140,255,0.85);
  --glow:#9cc4ff;
  --ink:#d6e6ff;
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
  padding:clamp(14px, 4vh, 40px) 16px 0;
  text-align:center;
  background:#020308;
  cursor:pointer;
  user-select:none;
}
.m2-intro.team-mafia{
  --spot:rgba(225,40,40,0.9);
  --glow:#ff9b8f;
  --ink:#ffd2cb;
}
.m2-intro > *{position:relative; opacity:0;}
.m2-intro-spot{
  position:absolute !important;
  inset:0;
  background:
    radial-gradient(ellipse 34% 95% at 50% -5%, var(--spot) 0%, transparent 70%),
    radial-gradient(ellipse 60% 30% at 50% 100%, var(--spot) 0%, transparent 72%);
  transform-origin:50% 0;
}
.m2-intro-floor{
  position:absolute !important;
  left:0; right:0; bottom:0;
  height:30%;
  background:linear-gradient(to top, rgba(0,0,0,0.35), transparent);
}
.m2-intro-mode{
  margin:0;
  font-size:clamp(14px, 2.6vw, 24px);
  font-weight:800;
  color:var(--ink);
  opacity:.85;
}
.m2-intro-team{
  margin:6px 0 0;
  font-size:clamp(12px, 1.8vw, 16px);
  font-weight:800;
  letter-spacing:.2em;
  color:var(--glow);
}
.m2-intro-role{
  margin:2px 0 0;
  font-size:clamp(40px, 9vw, 96px);
  font-weight:900;
  line-height:1.1;
  color:var(--ink);
  filter:blur(1.5px);
}
.m2-intro-desc{
  max-width:680px;
  margin:6px 0 0;
  font-size:clamp(12px, 1.8vw, 17px);
  line-height:1.55;
  font-weight:600;
  color:#fff;
}
.m2-intro-desc b{color:var(--glow);}
.m2-intro-mates{
  align-items:center;
  margin-top:10px;
  font-size:clamp(12px, 1.6vw, 15px);
}
.m2-intro-me{
  position:absolute !important;
  left:50%;
  bottom:clamp(10px, 4vh, 36px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  transform:translateX(-50%);
}
.m2-intro-nick{
  font-size:15px;
  font-weight:800;
  color:#fff;
  text-shadow:0 2px 4px rgba(0,0,0,0.7);
}
.m2-intro-fig{--w:clamp(90px, 15vh, 140px); margin-top:-12%;}   /* SVG 위쪽(모자/후광 자리) 여백만큼 이름표에 붙임 */
.m2-intro-fig .m2-fig{animation:m2-bob 1.6s ease-in-out infinite;}
@keyframes m2-bob{
  0%, 100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}
.m2-intro-skip{
  position:absolute !important;
  right:14px;
  bottom:10px;
  margin:0;
  font-size:11px;
  color:rgba(255,255,255,0.45);
}

/* 순서: 막 → 스포트라이트 → 게임모드 → 직업 이름(슬롯머신) → 착지 → 팀/설명/동료 → 캐릭터 */
.m2-intro.play{animation:m2-fade .35s ease-out both;}
.m2-intro.play .m2-intro-spot{animation:m2-spot .8s .2s cubic-bezier(.2,.8,.2,1) both;}
.m2-intro.play .m2-intro-floor{animation:m2-fade .6s .4s both;}
.m2-intro.play .m2-intro-mode{animation:m2-drop .5s .45s ease-out both;}
.m2-intro.play .m2-intro-role{animation:m2-fade .3s .7s both; opacity:.55;}
.m2-intro.play .m2-intro-me{animation:m2-rise .7s 1s cubic-bezier(.2,.9,.3,1.2) both;}
.m2-intro.play .m2-intro-skip{animation:m2-fade .5s 2.2s both;}
.m2-intro.landed .m2-intro-role{
  opacity:1;
  filter:none;
  animation:m2-pop .55s cubic-bezier(.2,1.4,.4,1) both;
  text-shadow:0 0 28px var(--spot), 0 4px 0 rgba(0,0,0,0.35);
}
.m2-intro.landed .m2-intro-team{animation:m2-fade .4s .1s both;}
.m2-intro.landed .m2-intro-desc{animation:m2-up .5s .3s ease-out both;}
.m2-intro.landed .m2-intro-mates{animation:m2-up .5s .6s ease-out both;}
.m2-intro.out{animation:m2-out .45s ease-in both;}
.m2-intro.out > *{animation-play-state:paused;}
@keyframes m2-fade{from{opacity:0;} to{opacity:1;}}
@keyframes m2-out{from{opacity:1;} to{opacity:0;}}
@keyframes m2-spot{
  from{opacity:0; transform:scaleX(.25);}
  to{opacity:1; transform:none;}
}
@keyframes m2-drop{
  from{opacity:0; transform:translateY(-14px);}
  to{opacity:.85; transform:none;}
}
@keyframes m2-up{
  from{opacity:0; transform:translateY(12px);}
  to{opacity:1; transform:none;}
}
@keyframes m2-pop{
  0%{opacity:0; transform:scale(1.7);}
  60%{opacity:1; transform:scale(.94);}
  100%{opacity:1; transform:scale(1);}
}
@keyframes m2-rise{
  from{opacity:0; transform:translate(-50%, 60px);}
  to{opacity:1; transform:translate(-50%, 0);}
}

/* 테스트 모드 "모든 직업 보기" 표시 */
.m2-reveal{
  margin-left:6px;
  padding:1px 7px;
  font-size:11px;
  border-radius:999px;
  background:rgba(90,162,255,0.18);
  color:#9cc4ff;
}
.m2-reveal.team-mafia{
  background:rgba(255,77,77,0.18);
  color:#ff8a80;
}

@media (max-width:640px){
  .m2-rolehud{width:170px; padding:8px 10px;}
  .m2-rolehud-name{font-size:15px;}
  .m2-rolehud-body{grid-template-columns:40px 1fr;}
  .m2-rolehud-fig{--w:40px;}
  .m2-rolehud-desc{font-size:11px; max-height:7.5em; overflow:auto;}
}

/* ---------- 두건(로브) 캐릭터 그림 -- props/hooded.svg(60x80) + 발/눈 ---------- */
.m2-hfig{
  position:relative;
  display:inline-block;
  height:100%;
  aspect-ratio:60/80;
}
.m2-hfig img{position:absolute; inset:0; width:100%; height:100%;}
.m2-hfig .foot{position:absolute; top:80.6%; width:20%; height:8.75%; border-radius:50%; background:#121419;}
.m2-hfig .foot.l{left:30%;}
.m2-hfig .foot.r{left:50%;}
.m2-hfig .eye{position:absolute; top:32%; width:6%; height:6%; border-radius:50%; background:var(--eye); box-shadow:0 0 6px var(--eye);}
.m2-hfig .eye.l{left:50.3%;}
.m2-hfig .eye.r{left:62%;}

/* ---------- 처치 / 신고 장면 공통 ---------- */
.m2-scene{
  position:absolute;
  inset:0;
  z-index:6;
  overflow:hidden;
  pointer-events:none;
}
.m2-scene [class^="m2-fx-"], .m2-scene [class*=" m2-fx-"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* 처치 장면: 화면 가운데 빨간 띠 + 흐르는 속도선, 왼쪽 처치자 / 오른쪽 피해자 */
.m2-scene-kill{background:rgba(0,0,0,0.55);}
.m2-scene-band{
  position:absolute;
  left:0; right:0;
  top:22%;
  height:56%;
  overflow:hidden;
  background:linear-gradient(#3a0608, #9c1518 30%, #b81c1f 70%, #3a0608);
  box-shadow:0 0 0 4px #1d1f29, 0 10px 40px rgba(0,0,0,0.6);
}
.m2-scene-lines{
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(180deg, transparent 0 14px, rgba(255,255,255,0.07) 14px 17px, transparent 17px 31px, rgba(0,0,0,0.18) 31px 36px);
  animation:m2-lines .5s linear infinite;
}
@keyframes m2-lines{from{background-position-x:0;} to{background-position-x:-200px;}}
.m2-scene-band::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:16%;
  background:rgba(0,0,0,0.28);
}
.m2-scene-actor{
  position:absolute;
  bottom:10%;
  height:78%;
  transform-origin:50% 96%;
}
.m2-scene-actor.k{left:24%;}
.m2-scene-actor.v{left:60%; height:calc(78% * 80 / 98);}
.m2-scene-actor .m2-fig{width:auto; height:100%;}
.m2-scene-actor .m2-scene-whole, .m2-scene-actor .m2-scene-piece{height:100%;}
.m2-scene-piece{position:absolute; inset:0; visibility:hidden; transform-origin:50% 40%;}
.m2-scene-piece.top{clip-path:inset(0 0 60% 0);}
.m2-scene-piece.bot{clip-path:inset(40% 0 0 0); transform-origin:50% 96%;}
.m2-scene-caption{
  position:absolute;
  left:0; right:0;
  bottom:9%;
  margin:0;
  text-align:center;
  font-size:clamp(16px, 2.6vw, 26px);
  font-weight:900;
  color:#fff;
  text-shadow:0 3px 0 #1d1f29, 0 0 18px rgba(0,0,0,0.8);
}
.m2-fx-dot{width:8px; height:8px; border-radius:50%;}
.m2-fx-text{
  font-weight:900;
  white-space:nowrap;
  -webkit-text-stroke:2px #1d1f29;
  paint-order:stroke fill;
  text-shadow:0 4px 0 rgba(0,0,0,0.35);
}
.m2-fx-flash{
  width:70px; height:70px;
  border-radius:50%;
  background:radial-gradient(circle, #fff 0 18%, #ffe066 35%, rgba(255,140,0,0.6) 55%, transparent 70%);
}
.m2-fx-tracer{
  height:3px;
  transform-origin:0 50%;
  background:linear-gradient(90deg, rgba(255,240,170,0.2), #fff3b0);
  box-shadow:0 0 8px #ffe066;
}
.m2-fx-slash{
  height:6px;
  border-radius:6px;
  transform-origin:0 50%;
  background:linear-gradient(90deg, transparent, #fff 30%, #fff 70%, transparent);
  box-shadow:0 0 12px #fff;
}
.m2-fx-shovel{transform-origin:50% 0;}   /* 손잡이 끝이 축 */
.m2-fx-shovel svg, .m2-fx-frog svg, .m2-fx-flask svg, .m2-fx-sack svg{display:block; width:100%; height:auto;}
.m2-fx-spark{font-size:22px; color:#b6ff7a; text-shadow:0 0 10px #7dff4a;}
.m2-fx-puff{width:70px; height:70px; border-radius:50%; background:radial-gradient(circle at 40% 40%, #fff, #d9dde6 60%, #aab0bd);}
.m2-fx-heart{font-size:30px; color:#ff5aa8; text-shadow:0 0 10px rgba(255,90,168,0.8);}
.m2-fx-heart.eyeheart{font-size:16px; color:#ff3d8e;}
.m2-fx-gas{width:80px; height:80px; border-radius:50%; background:radial-gradient(circle, rgba(120,255,110,0.8), rgba(60,200,80,0.45) 55%, transparent 72%);}
.m2-fx-frog{transform-origin:50% 50%;}

/* 신고 장면 (어몽어스 "시체 발견됨"식) */
.m2-scene-report{background:#06070b;}
.m2-rep-streak{
  position:absolute;
  left:0; right:0;
  height:22%;
  background:
    repeating-linear-gradient(180deg, transparent 0 10px, rgba(255,80,80,0.35) 10px 13px, transparent 13px 22px, rgba(0,0,0,0.35) 22px 27px),
    linear-gradient(#5c0a0c, #b21a1d 50%, #5c0a0c);
  animation:m2-lines .4s linear infinite;
}
.m2-rep-streak.top{top:2%;}
.m2-rep-streak.bot{top:31%;}
.m2-rep-title{
  position:absolute;
  left:0; right:0;
  top:16%;
  margin:0;
  text-align:center;
  font-size:clamp(38px, 9vw, 92px);
  font-weight:900;
  letter-spacing:.06em;
  color:#e3201f;
  -webkit-text-stroke:5px #2a0606;
  paint-order:stroke fill;
  text-shadow:0 6px 0 #2a0606;
  transform-origin:50% 50%;
}
.m2-rep-body{
  position:absolute;
  left:50%;
  top:42%;
  width:clamp(110px, 18vw, 170px);
  margin-left:calc(clamp(110px, 18vw, 170px) / -2);
}
.m2-rep-bubble{
  position:relative;
  width:60%;
  aspect-ratio:1;
  margin:0 auto -6%;
  display:grid;
  place-items:center;
  font-size:clamp(30px, 5vw, 52px);
  background:#c9ccd6;
  border:4px solid #1d1f29;
  border-radius:50%;
}
.m2-rep-bubble::after{
  content:'';
  position:absolute;
  left:44%;
  bottom:-16%;
  border:10px solid transparent;
  border-top:14px solid #1d1f29;
}
.m2-rep-corpse{position:relative; height:clamp(70px, 11vw, 110px); display:flex; justify-content:center; align-items:flex-end;}
.m2-rep-corpse .m2-hfig{height:100%; transform:rotate(90deg) translateX(18%);}
.m2-rep-tape{
  position:absolute;
  left:0; right:0;
  bottom:0;
  height:12%;
  background:repeating-linear-gradient(-45deg, #f2c230 0 34px, #1d1f29 34px 68px);
  animation:m2-tape 1s linear infinite;
}
@keyframes m2-tape{from{background-position:0 0;} to{background-position:96px 0;}}
.m2-rep-who{
  position:absolute;
  left:0; right:0;
  bottom:13.5%;
  margin:0;
  text-align:center;
  font-size:clamp(14px, 2vw, 20px);
  font-weight:700;
  color:#ff6b6b;
}
.m2-rep-who b{color:#fff;}

/* 처치 / 신고 버튼 (화면 오른쪽 아래, 어몽어스식) */
.m2-actions{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:3;
  display:flex;
  gap:10px;
}
.m2-act{
  position:relative;
  width:74px;
  height:74px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  font-family:var(--font);
  font-size:15px;
  font-weight:900;
  color:#fff;
  border:3px solid #1d1f29;
  border-radius:16px;
  cursor:pointer;
  box-shadow:0 4px 0 #1d1f29;
}
.m2-act small{font-size:10px; font-weight:700; opacity:.75;}
.m2-act:disabled{filter:grayscale(1) brightness(.6); cursor:default;}
.m2-act-kill{background:linear-gradient(#e0403a, #9c1518);}
.m2-act-report{background:linear-gradient(#f2c230, #c48a12); color:#2a1d02;}
.m2-act .cd{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:28px;
  font-weight:900;
  color:#fff;
  background:rgba(0,0,0,0.45);
  border-radius:13px;
}
.m2-act .cd:empty{display:none;}
.m2-dead-chip{
  position:absolute;
  top:12px;
  left:50%;
  z-index:3;
  transform:translateX(-50%);
  padding:6px 14px;
  font-size:13px;
  font-weight:800;
  color:#ffd2cb;
  background:rgba(120,10,10,0.85);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:999px;
}
@media (max-width:640px){
  .m2-act{width:60px; height:60px; font-size:13px;}
}

/* ---------- 방해공작 ---------- */
.m2-act-sab{background:linear-gradient(#8c3bd9, #5a1e98);}
.m2-act-use{background:linear-gradient(#3fb4e0, #1f6f9c);}
/* 보조직업 능력 (G): 스파이 첩보 = 남색, 마담 유혹 = 분홍 */
.m2-act-abil{background:linear-gradient(#4a6fe0, #233a8f);}
.m2-act-abil[data-kind="madam"]{background:linear-gradient(#ff6fa8, #b0245e);}
.m2-seduce-chip{top:48px; color:#ffd1e4; background:rgba(120,20,60,0.85); border-color:rgba(255,111,168,0.5);}
.m2-mt-mute{font-size:13px;}
.m2-act-abil[data-kind="witch"]{background:linear-gradient(#9a5ce0, #4a1f8a);}
.m2-disguise-chip{top:48px; color:#ecd9ff; background:rgba(70,20,120,0.85); border-color:rgba(190,140,255,0.5);}
/* 마녀 변신 고르기 창 */
.m2-disguise{position:absolute; inset:0; z-index:4; display:grid; place-items:center; padding:14px; background:rgba(4,4,12,0.55);}
.m2-disguise-box{
  width:min(100%, 520px);
  padding:16px;
  text-align:center;
  background:linear-gradient(180deg, #2a2038, #15121c);
  border:3px solid #1d1f29;
  border-radius:16px;
  box-shadow:0 0 30px rgba(150,90,230,0.35);
  animation:m2-mt-in .3s cubic-bezier(.2,1.3,.4,1);
}
.m2-disguise-title{margin:0 0 12px; font-size:17px; font-weight:900; color:#fff;}
.m2-disguise-title small{display:block; margin-top:2px; font-size:12px; font-weight:600; color:var(--sub);}
.m2-disguise-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:8px; margin-bottom:12px;}
.m2-disguise-pick{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:8px 6px;
  font-family:var(--font);
  color:var(--text);
  background:#2e2a3a;
  border:2px solid #1d1f29;
  border-radius:12px;
  cursor:pointer;
  transition:transform .12s, background .12s;
}
.m2-disguise-pick:hover{background:#43355a; transform:translateY(-2px);}
.m2-disguise-fig{height:50px;}
.m2-disguise-pick b{font-size:13px;}
.m2-act-use small{font-size:9px;}

/* 위쪽 경보 띠 */
.m2-sabbanner{
  position:absolute;
  top:52px;
  left:50%;
  z-index:3;
  transform:translateX(-50%);
  max-width:calc(100% - 24px);
  padding:8px 16px;
  font-size:14px;
  font-weight:800;
  color:#fff;
  text-align:center;
  border:2px solid #1d1f29;
  border-radius:12px;
  box-shadow:0 4px 0 #1d1f29;
  pointer-events:none;
}
.m2-sabbanner.comms{background:#1f3a5a; color:#9fe3ff; animation:m2-alarm-comms 1s steps(2) infinite;}
@keyframes m2-alarm-comms{50%{background:#2a5280;}}
.m2-sabbanner.bomb{background:#b3161c; animation:m2-alarm .6s steps(2) infinite;}
@keyframes m2-alarm{50%{background:#e3201f;}}
.m2-sabbanner.o2{background:#1d4f8a; color:#e6f3ff; animation:m2-alarm-o2 .8s steps(2) infinite;}   /* 산소 누출 (2026-10-26) */
@keyframes m2-alarm-o2{50%{background:#2f74c4;}}

/* 방해 지도 (어몽어스 사보타지 지도식) */
.m2-sabmap{
  position:absolute;
  inset:0;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(0,0,0,0.55);
}
.m2-sabmap-box{
  position:relative;
  width:min(100%, calc((100vh - 220px) * 5700 / 3180));
  max-width:980px;
  aspect-ratio:5700/3180;
  background:#8f9aa6;
  border:4px solid #1d1f29;
  border-radius:14px;
  box-shadow:0 10px 40px rgba(0,0,0,0.6);
}
.m2-sabmap-svg{position:absolute; inset:0; width:100%; height:100%;}
.m2-sabmap-svg .path{fill:rgba(255,190,190,0.75); stroke:none;}
.m2-sabmap-svg .room{fill:#e5262a; stroke:#7a0c10; stroke-width:14; stroke-linejoin:round;}
.m2-sabmap-svg text{font:900 66px Pretendard, sans-serif; fill:#fff; text-anchor:middle; paint-order:stroke; stroke:#7a0c10; stroke-width:12;}
.m2-sabmap-svg .me{fill:#fff; stroke:#1d1f29; stroke-width:14;}
.m2-sabmap-icons{position:absolute; inset:0;}
.m2-sabicon{
  position:absolute;
  width:clamp(30px, 6.2%, 54px);
  aspect-ratio:1;
  padding:6px;
  transform:translate(-50%, -50%);
  color:#c8151b;
  background:#f2f0ea;
  border:3px solid #1d1f29;
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 3px 0 #1d1f29;
  transition:transform .1s;
}
.m2-sabicon svg{display:block; width:100%; height:100%;}
.m2-sabicon.blackout{color:#c48a12;}
.m2-sabicon.bomb{color:#1d1f29;}
.m2-sabicon:hover:not(:disabled){transform:translate(-50%, -50%) scale(1.12);}
.m2-sabicon:disabled{cursor:default; filter:grayscale(1) brightness(.75);}
.m2-sabicon.active{filter:none; background:#ffe27a; animation:m2-pulse .8s infinite;}
@keyframes m2-pulse{50%{transform:translate(-50%, -50%) scale(1.15);}}
.m2-sabicon .cd{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:16px;
  font-weight:900;
  color:#fff;
  background:rgba(0,0,0,0.55);
  border-radius:50%;
}
.m2-sabicon .cd:empty{display:none;}
.m2-sabmap-close{
  position:absolute;
  top:8px; left:8px;
  width:36px; height:36px;
  font-size:18px;
  font-weight:900;
  color:#1d1f29;
  background:#f2f0ea;
  border:3px solid #1d1f29;
  border-radius:50%;
  cursor:pointer;
}
.m2-sabmap-hint{
  position:absolute;
  left:0; right:0; bottom:-30px;
  margin:0;
  text-align:center;
  font-size:13px;
  font-weight:700;
  color:#fff;
}

/* 정전 복구 미니게임 */
.m2-fix{
  position:absolute;
  left:50%; top:50%;
  z-index:4;
  transform:translate(-50%, -50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:18px 22px;
  background:linear-gradient(#5a6070, #3d4250);
  border:4px solid #1d1f29;
  border-radius:14px;
  box-shadow:0 10px 40px rgba(0,0,0,0.6);
}
.m2-fix-title{margin:0; font-weight:900; color:#ffe27a;}
.m2-fix-levers{display:flex; gap:12px;}
.m2-lever{
  position:relative;
  width:44px; height:110px;
  background:#22252e;
  border:3px solid #1d1f29;
  border-radius:10px;
  cursor:pointer;
}
.m2-lever i{
  position:absolute;
  left:4px; right:4px;
  height:40px;
  bottom:6px;
  background:linear-gradient(#e0403a, #9c1518);
  border:3px solid #1d1f29;
  border-radius:8px;
  transition:bottom .15s;
}
.m2-lever.on i{bottom:58px; background:linear-gradient(#5fe08a, #1f9d55);}

/* 폭발 → 마피아팀 승리 장면 */
.m2-scene-boom{background:#140404; display:grid; place-items:center;}
.m2-boom-flash{position:absolute; inset:0; background:#fff;}
.m2-boom-ball{
  position:absolute;
  left:50%; top:50%;
  width:120vmax; height:120vmax;
  border-radius:50%;
  background:radial-gradient(circle, #fff7c0 0 8%, #ffb030 22%, #e34a14 40%, #6a1006 60%, transparent 70%);
}
.m2-boom-ball.b2{left:38%; top:58%; width:80vmax; height:80vmax;}
.m2-boom-ball.b3{left:63%; top:44%; width:70vmax; height:70vmax;}
.m2-boom-title{
  position:relative;
  margin:0;
  font-size:clamp(40px, 9vw, 96px);
  font-weight:900;
  color:#ffd84a;
  -webkit-text-stroke:5px #3a0606;
  paint-order:stroke fill;
  text-shadow:0 6px 0 #3a0606;
}
.m2-boom-sub{
  position:absolute;
  top:62%;
  margin:0;
  font-size:clamp(20px, 3.5vw, 36px);
  font-weight:900;
  color:#fff;
  text-shadow:0 3px 0 #3a0606;
}
.m2-rep-cloak{display:block; width:100%;}
.m2-rep-cloak svg{display:block; width:100%; height:auto;}

/* ========== 연출 퀄리티 업 (처치/신고) ========== */
/* 공통: 필름 노이즈, 비네트, 전체 섬광, 레터박스 */
.m2-scene-grain{
  position:absolute;
  inset:-20%;
  opacity:.16;
  mix-blend-mode:overlay;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation:m2-grain .25s steps(3) infinite;
}
@keyframes m2-grain{
  0%{transform:translate(0,0);} 33%{transform:translate(-4%,3%);} 66%{transform:translate(3%,-2%);} 100%{transform:translate(0,0);}
}
.m2-scene-vig{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 55%, transparent 45%, rgba(0,0,0,0.65) 100%);
}
.m2-scene .m2-fx-flashall{
  position:absolute;
  inset:0;
  z-index:5;
  background:#fff;
}
.m2-scene .m2-fx-flashall.red{background:radial-gradient(circle, #ff6b6b, #c20d12);}
.m2-lb{
  position:absolute;
  left:0; right:0;
  z-index:2;
  height:9%;
  background:#000;
}
.m2-lb.top{top:0; box-shadow:0 2px 0 rgba(255,255,255,0.08);}
.m2-lb.bot{bottom:0; box-shadow:0 -2px 0 rgba(255,255,255,0.08);}

/* 처치 장면: 어두운 무대 + 방사형 빛 + 사선 속도선 + 스포트라이트 바닥 */
.m2-scene-kill{background:radial-gradient(ellipse at 50% 50%, rgba(20,0,4,0.88), rgba(0,0,0,0.95));}
.m2-scene-kill .m2-scene-band{
  top:16%;
  height:66%;
  background:
    radial-gradient(ellipse 60% 80% at 50% 45%, #6a0d14 0%, #2a0509 55%, #0c0204 100%);
  box-shadow:0 0 0 3px #1d1f29, 0 0 60px rgba(200,20,30,0.45), 0 20px 50px rgba(0,0,0,0.7);
}
.m2-scene-kill .m2-scene-band::after{display:none;}
.m2-scene-rays{
  position:absolute;
  left:50%; top:45%;
  width:220%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg, rgba(255,60,60,0.10) 0 6deg, transparent 6deg 18deg);
  animation:m2-spin 14s linear infinite;
  -webkit-mask:radial-gradient(circle, #000 0 18%, transparent 55%);
          mask:radial-gradient(circle, #000 0 18%, transparent 55%);
}
@keyframes m2-spin{to{transform:translate(-50%,-50%) rotate(360deg);}}
.m2-scene-kill .m2-scene-lines{
  background:repeating-linear-gradient(-20deg, transparent 0 26px, rgba(255,255,255,0.06) 26px 29px, transparent 29px 60px, rgba(255,120,120,0.07) 60px 62px);
  background-size:200% 100%;
  animation:m2-lines2 .45s linear infinite;
}
@keyframes m2-lines2{from{background-position:0 0;} to{background-position:-120px 0;}}
.m2-scene-floor{
  position:absolute;
  left:10%; right:10%;
  bottom:4%;
  height:24%;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 40%, rgba(255,210,190,0.22), rgba(120,20,30,0.15) 50%, transparent 72%);
}
.m2-scene-kill .m2-scene-actor::before{
  content:'';
  position:absolute;
  left:12%; right:12%;
  bottom:-3%;
  height:9%;
  border-radius:50%;
  background:rgba(0,0,0,0.55);
  filter:blur(3px);
  z-index:-1;
}
.m2-scene-kill .m2-scene-actor{filter:drop-shadow(0 0 10px rgba(255,90,90,0.35));}
.m2-ghost-trail{filter:brightness(2) saturate(.3) blur(1px) !important; pointer-events:none;}
.m2-scene-kill .m2-scene-caption{bottom:11%; z-index:3;}
.m2-scene-kill .m2-scene-caption span{
  display:inline-block;
  padding:6px 26px;
  background:linear-gradient(90deg, transparent, rgba(0,0,0,0.75) 15%, rgba(0,0,0,0.75) 85%, transparent);
  letter-spacing:.06em;
}
.m2-fx-dot{border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;}
.m2-fx-dot.t{border-radius:0;}
.m2-fx-star{filter:drop-shadow(0 0 12px rgba(255,240,180,0.8));}
.m2-fx-star svg{display:block; width:100%; height:auto;}
.m2-fx-ring{
  aspect-ratio:1;
  border-radius:50%;
  border:6px solid rgba(255,255,255,0.85);
  box-shadow:0 0 16px rgba(255,255,255,0.6), inset 0 0 16px rgba(255,255,255,0.4);
}
.m2-fx-pool{
  height:auto;
  aspect-ratio:1;
  border-radius:50%;
  z-index:-1;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,0.4));
}
.m2-fx-text{
  z-index:4;
  font-family:var(--font);
  letter-spacing:-.02em;
  -webkit-text-stroke:3px #1d1f29;
  text-shadow:0 5px 0 #1d1f29, 0 0 22px rgba(255,255,255,0.35);
}

/* 신고 장면 */
.m2-scene-report{background:#0a0204;}
.m2-rep-sun{
  position:absolute;
  left:50%; top:46%;
  width:230%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg, rgba(200,20,25,0.38) 0 9deg, rgba(40,4,6,0.0) 9deg 22deg);
  animation:m2-spin 10s linear infinite;
}
.m2-scene-report .m2-rep-streak{
  height:20%;
  background:
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(255,120,120,0.35) 7px 9px, transparent 9px 18px, rgba(0,0,0,0.35) 18px 22px),
    linear-gradient(#4a0709, #c4161c 50%, #4a0709);
  box-shadow:0 0 0 3px #1d1f29, 0 0 40px rgba(255,30,30,0.5);
  transform:skewY(-4deg);
}
.m2-scene-report .m2-rep-streak.top{top:6%;}
.m2-scene-report .m2-rep-streak.bot{top:30%;}
.m2-scene-report .m2-rep-title{
  top:14%;
  z-index:3;
  color:transparent;
  background:linear-gradient(#fff2b0 0%, #ff4b3a 38%, #b00c12 70%, #5a0408 100%);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-stroke:4px #1d0204;
  text-shadow:none;
  filter:drop-shadow(0 6px 0 #1d0204) drop-shadow(0 0 24px rgba(255,40,40,0.7));
}
.m2-scene-report .m2-rep-title::before, .m2-scene-report .m2-rep-title::after{
  content:attr(data-t);
  position:absolute;
  inset:0;
  -webkit-text-stroke:0;
  -webkit-background-clip:initial;
          background-clip:initial;
  background:none;
  opacity:0;
  mix-blend-mode:screen;
  animation:m2-glitch 1.4s steps(1) infinite;
  pointer-events:none;
}
.m2-scene-report .m2-rep-title::before{color:#00e5ff; transform:translate(-4px, 1px);}
.m2-scene-report .m2-rep-title::after{color:#ff2a6d; transform:translate(4px, -1px); animation-delay:-.7s;}
@keyframes m2-glitch{
  0%, 82%, 96%, 100%{clip-path:inset(0 0 0 0); opacity:0;}
  84%{clip-path:inset(18% 0 58% 0); transform:translate(-9px, 0); opacity:.8;}
  88%{clip-path:inset(62% 0 12% 0); transform:translate(8px, 0); opacity:.8;}
  92%{clip-path:inset(40% 0 40% 0); transform:translate(-5px, 0); opacity:.8;}
}
.m2-rep-spot{
  position:absolute;
  left:50%;
  top:55%;
  width:clamp(220px, 34vw, 380px);
  aspect-ratio:2.6;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse, rgba(255,235,210,0.42), rgba(255,120,100,0.12) 55%, transparent 72%);
}
.m2-scene-report .m2-rep-body{top:36%; z-index:2;}
.m2-scene-report .m2-rep-bubble{width:44%; font-size:clamp(22px, 3.4vw, 36px); margin-bottom:-2%;}
.m2-scene-report .m2-rep-bubble{
  background:radial-gradient(circle at 40% 35%, #fff, #c9ccd6 70%);
  box-shadow:0 0 0 4px #1d1f29, 0 0 30px rgba(255,255,255,0.45);
  border:0;
  animation:m2-bob 1.2s ease-in-out infinite;
}
.m2-scene-report .m2-rep-bubble span{filter:drop-shadow(0 2px 0 rgba(0,0,0,0.3));}
.m2-scene-report .m2-rep-corpse{filter:drop-shadow(0 6px 6px rgba(0,0,0,0.6));}
.m2-rep-embers{position:absolute; inset:0; pointer-events:none;}
.m2-rep-embers i{
  position:absolute;
  bottom:-10px;
  width:4px; height:4px;
  border-radius:50%;
  background:#ffb04a;
  box-shadow:0 0 8px #ff7a1a, 0 0 2px #fff;
  animation:m2-ember 3s linear infinite;
}
@keyframes m2-ember{
  0%{transform:translate(0, 0); opacity:0;}
  10%{opacity:1;}
  100%{transform:translate(var(--dx), -110vh); opacity:0;}
}
.m2-scene-report .m2-rep-tape{
  left:-10%; right:-10%;
  height:auto;
  padding:7px 0;
  z-index:3;
  overflow:hidden;
  white-space:nowrap;
  background:repeating-linear-gradient(-45deg, #f2c230 0 26px, #e3b21f 26px 52px);
  border-top:4px solid #1d1f29;
  border-bottom:4px solid #1d1f29;
  box-shadow:0 6px 18px rgba(0,0,0,0.6);
  animation:none;
}
.m2-rep-tape.a{bottom:7%;}
.m2-rep-tape.b{bottom:-1%;}
.m2-rep-tape span{
  display:inline-block;
  font-size:clamp(14px, 2vw, 20px);
  font-weight:900;
  letter-spacing:.12em;
  color:#1d1f29;
  animation:m2-marquee 9s linear infinite;
}
.m2-rep-tape.b span{animation-direction:reverse;}
@keyframes m2-marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.m2-scene-report .m2-rep-who{bottom:21%; z-index:3;}
.m2-scene-report .m2-rep-who span{
  display:inline-block;
  padding:6px 22px;
  background:linear-gradient(90deg, transparent, rgba(0,0,0,0.8) 15%, rgba(0,0,0,0.8) 85%, transparent);
}

/* ========== 게임 창 왼쪽 밖 패널 (시즌1식) + 낮/밤 ========== */
/* 게임 창은 원래 폭(1100) 그대로, 패널은 그 왼쪽 바깥 빈 공간에 띄움 -- 패널을 옆에 끼웠더니 게임 창이
   찌부된다는 피드백. 왼쪽에 자리가 없는 화면에선 게임 창 위에 가로로. */
.m2-play{position:relative;}
.m2-side{
  display:flex;
  flex-direction:column;
  gap:12px;
}
@media (min-width:1620px){
  .m2-side{position:absolute; top:0; right:calc(100% + 16px); width:240px;}
}

.m2-side:not(:has(> :not(.hidden))){display:none;}

/* 직업 카드: 게임 창 밖이라 크게, 시즌1 마피아 팀 카드처럼 */
.m2-side .m2-rolehud{
  position:static;
  width:auto;
  padding:18px 18px 16px;
  text-align:center;
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--team) 30%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(20,14,26,0.92), rgba(10,8,16,0.92));
  border:1px solid color-mix(in srgb, var(--team) 45%, transparent);
  border-left:1px solid color-mix(in srgb, var(--team) 45%, transparent);
  border-radius:16px;
  box-shadow:0 0 30px color-mix(in srgb, var(--team) 18%, transparent), 0 10px 30px rgba(0,0,0,0.5);
}
.m2-side .m2-rolehud-head{flex-direction:column; align-items:center; gap:4px;}
.m2-side .m2-rolehud-team{
  font-size:12px;
  letter-spacing:.3em;
}
.m2-side .m2-rolehud-name{
  font-size:30px;
  text-shadow:0 0 18px color-mix(in srgb, var(--team) 60%, transparent);
}
.m2-side .m2-rolehud-caret{position:absolute; right:14px; top:14px;}
.m2-side .m2-rolehud{position:relative;}
.m2-side .m2-rolehud-body{
  grid-template-columns:1fr;
  justify-items:center;
  gap:10px;
  margin-top:10px;
}
.m2-side .m2-rolehud-fig{--w:96px; grid-row:auto;}
.m2-side .m2-rolehud-desc{font-size:13px; line-height:1.6; color:#d8d2e2; text-align:center;}
.m2-side .m2-mates{
  align-items:center;
  width:100%;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,0.08);
}

/* 낮밤 시계 */
.m2-clock{
  --c:#f5b94a;
  padding:12px 14px;
  background:linear-gradient(180deg, rgba(40,26,12,0.9), rgba(16,12,10,0.9));
  border:1px solid color-mix(in srgb, var(--c) 45%, transparent);
  border-radius:14px;
  box-shadow:0 0 22px color-mix(in srgb, var(--c) 18%, transparent);
  transition:background .8s, border-color .8s;
}
.m2-clock[data-time="night"]{
  --c:#8aa4ff;
  background:linear-gradient(180deg, rgba(14,18,44,0.92), rgba(8,10,22,0.92));
}
.m2-clock-top{display:flex; align-items:center; gap:8px;}
.m2-clock-ic{font-size:22px; filter:drop-shadow(0 0 8px var(--c));}
.m2-clock-top b{flex:1; font-size:16px; font-weight:900; color:var(--text);}
.m2-clock-time{font-family:'Orbitron', var(--font); font-size:18px; font-weight:700; color:var(--c);}
/* 회의 중: 시간 멈춤 -- 시계를 흐리게, 안내 문구는 또렷하게 */
.m2-clock.paused .m2-clock-track, .m2-clock.paused .m2-clock-time, .m2-clock.paused .m2-clock-ic{opacity:.45; filter:grayscale(.6);}
.m2-clock.paused .m2-clock-hint{color:#ffd84a;}
.m2-clock-track{
  height:6px;
  margin-top:10px;
  overflow:hidden;
  background:rgba(255,255,255,0.08);
  border-radius:999px;
}
.m2-clock-track i{
  display:block;
  height:100%;
  background:linear-gradient(90deg, color-mix(in srgb, var(--c) 60%, #fff), var(--c));
  border-radius:999px;
  box-shadow:0 0 8px var(--c);
  transition:width .25s linear;
}
.m2-clock-hint{margin:8px 0 0; font-size:12px; color:var(--sub);}

/* 시간대 바뀔 때 가운데 알림 */
.m2-cycle{
  position:absolute;
  left:50%; top:34%;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:16px 44px;
  transform:translate(-50%, -50%);
  text-align:center;
  pointer-events:none;
  border-radius:18px;
  opacity:0;
}
.m2-cycle.day{background:radial-gradient(ellipse, rgba(80,40,6,0.85), rgba(40,20,4,0) 75%); color:#ffe2a6;}
.m2-cycle.night{background:radial-gradient(ellipse, rgba(10,14,50,0.88), rgba(6,8,30,0) 75%); color:#cbd8ff;}
.m2-cycle .ic{font-size:44px; filter:drop-shadow(0 0 16px currentColor);}
.m2-cycle b{font-size:clamp(22px, 3.4vw, 34px); font-weight:900; text-shadow:0 3px 0 rgba(0,0,0,0.6), 0 0 20px currentColor;}
.m2-cycle small{font-size:14px; font-weight:700; opacity:.85;}
.m2-cycle.play{animation:m2-cycle-in 3.2s ease both;}
@keyframes m2-cycle-in{
  0%{opacity:0; transform:translate(-50%, -40%) scale(.9);}
  12%{opacity:1; transform:translate(-50%, -50%) scale(1);}
  80%{opacity:1; transform:translate(-50%, -50%) scale(1);}
  100%{opacity:0; transform:translate(-50%, -58%) scale(1);}
}
/* 밤엔 처치 버튼에 달 표시 (쿨타임 짧음) */
.m2-act-kill.night::after{
  content:'🌙';
  position:absolute;
  right:-6px; top:-8px;
  font-size:18px;
}

/* ========== 위쪽 줄: 칩 정리, 낮밤 시계만 ========== */
.m2-hud{min-height:44px;}
.m2-hud .m2-clock{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 14px;
  border-radius:999px;
}
.m2-hud .m2-clock.hidden{display:none;}
.m2-hud .m2-clock-ic{font-size:20px;}
.m2-hud .m2-clock b{font-size:15px; font-weight:900; color:var(--text); white-space:nowrap;}
.m2-hud .m2-clock-track{width:140px; margin-top:0;}
.m2-hud .m2-clock-time{font-size:16px; min-width:3.2em; text-align:right;}
.m2-hud .m2-clock-hint{margin:0; font-size:12px; color:var(--sub); white-space:nowrap;}
@media (max-width:640px){
  .m2-hud .m2-clock-track, .m2-hud .m2-clock-hint{display:none;}
}

/* ========== 방 목록 (공용 room-lobby, 시즌2 색) ========== */
.m2-entry-list{
  --jl-accent:#c77dff;
  --jl-accent-rgb:199,125,255;
  max-width:900px;
  margin:20px auto 0;
}
.m2-entry-list .message{margin-top:10px; text-align:center;}

/* ========== 교주팀 (보라) + 포교 ========== */
.m2-rolehud[data-team="cult"]{--team:#b44dff;}
.m2-intro.team-cult{
  --spot:rgba(150,60,230,0.9);
  --glow:#d9a8ff;
  --ink:#ecd9ff;
}
.m2-reveal.team-cult{background:rgba(180,77,255,0.2); color:#d9a8ff;}
.m2-act-kill.convert{background:linear-gradient(#a04de0, #5a1e98);}
.m2-act-kill.dayonly::after{
  content:'☀️';
  position:absolute;
  right:-6px; top:-8px;
  font-size:18px;
}
.m2-scene-convert .m2-scene-band{
  background:radial-gradient(ellipse 60% 80% at 50% 45%, #4a1670 0%, #1e0830 55%, #0a0310 100%);
  box-shadow:0 0 0 3px #1d1f29, 0 0 60px rgba(160,70,240,0.45), 0 20px 50px rgba(0,0,0,0.7);
}
.m2-scene-convert .m2-scene-rays{background:repeating-conic-gradient(from 0deg, rgba(200,120,255,0.12) 0 6deg, transparent 6deg 18deg);}
.m2-scene-convert .m2-scene-actor{filter:drop-shadow(0 0 10px rgba(190,110,255,0.4));}
.m2-fx-orb{
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, #fff 0 10%, #e2b3ff 25%, rgba(180,77,255,0.6) 50%, transparent 70%);
}
.m2-fx-sigil{filter:drop-shadow(0 0 10px #b44dff);}
.m2-fx-sigil svg{display:block; width:100%; height:auto;}
.m2-fx-spark.convert{color:#e2b3ff; text-shadow:0 0 10px #b44dff;}
.m2-fx-pillar{
  border-radius:40%;
  background:linear-gradient(90deg, transparent, rgba(220,170,255,0.75) 30%, #fff 50%, rgba(220,170,255,0.75) 70%, transparent);
  filter:blur(2px);
  mix-blend-mode:screen;
}

/* ========== 회의: 지목 투표 → 개표 → 최후의 반론 → 찬반 투표 → 결과 ==========
   (script.js buildVoteView/updateVoteView). #voteBox의 data-stage로 단계별 색. */
.m2-vote{
  position:absolute;
  inset:0;
  z-index:5;
  display:grid;
  place-items:center;
  padding:14px;
  background:radial-gradient(ellipse at 50% 30%, rgba(46,18,30,0.72), rgba(3,3,8,0.9));
  backdrop-filter:blur(3px);
  animation:m2-mt-fade .3s ease-out;
}
.m2-mt{
  --accent:#ffd84a;
  position:relative;
  width:min(100%, 780px);
  max-height:100%;
  overflow:auto;
  padding:16px 18px;
  text-align:left;
  background:linear-gradient(180deg, #25202f, #14121b);
  border:3px solid #1d1f29;
  border-radius:18px;
  box-shadow:0 0 0 2px rgba(255,255,255,0.06), 0 0 40px color-mix(in srgb, var(--accent) 18%, transparent), 0 20px 50px rgba(0,0,0,0.65);
  animation:m2-mt-in .4s cubic-bezier(.2,1.3,.4,1);
}
.m2-mt[data-stage="defense"], .m2-mt[data-stage="verdict"]{--accent:#ff5a5a;}
.m2-mt[data-stage="tally"]{--accent:#7fd0ff;}
.m2-mt.shake{animation:m2-mt-shake .5s;}
.m2-mt-head{display:flex; align-items:center; gap:10px;}
.m2-mt-pill{
  flex:none;
  padding:4px 11px;
  font-size:12px;
  font-weight:900;
  color:#1d1f29;
  background:var(--accent);
  border-radius:999px;
  animation:m2-mt-pop .4s cubic-bezier(.2,1.6,.4,1);
}
.m2-mt-title{flex:1; min-width:0; font-size:19px; font-weight:900; color:#fff;}
.m2-mt-title small{margin-left:6px; font-size:12px; font-weight:600; color:var(--sub);}
.m2-mt-time{font-family:'Orbitron', var(--font); font-size:22px; font-weight:700; color:var(--accent); min-width:48px; text-align:right;}
.m2-mt-time.urgent{color:#ff6b6b; animation:m2-mt-pulse .5s infinite alternate;}
.m2-mt-bar{height:6px; margin:10px 0 12px; overflow:hidden; background:rgba(255,255,255,0.08); border-radius:999px;}
.m2-mt-bar i{display:block; height:100%; background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #ff7a2a)); border-radius:inherit; transform-origin:left; transition:transform .25s linear;}
.m2-mt-sub{margin:0 0 12px; font-size:13px; color:var(--sub);}

/* 카드 */
.m2-mt-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:10px;}
.m2-mt-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:66px;
  padding:8px 10px;
  color:var(--text);
  background:#2e2a3a;
  border:2px solid #1d1f29;
  border-radius:12px;
  cursor:pointer;
  user-select:none;
  animation:m2-mt-card .42s calc(var(--i, 0) * 55ms) both cubic-bezier(.2,1.2,.4,1);
  transition:background .12s, transform .12s, border-color .12s, box-shadow .12s;
}
.m2-mt-card:not(.off):hover{background:#3b3550; transform:translateY(-2px);}
.m2-mt-card.off{cursor:default;}
.m2-mt-card.dead{opacity:.35; filter:grayscale(1);}
.m2-mt-card.dead .m2-mt-name::after{content:' 💀';}
.m2-mt-card.pick{border-color:#fff; background:#3b3550;}
.m2-mt-card.mine{border-color:#ffd84a; box-shadow:0 0 0 3px rgba(255,216,74,0.3);}
.m2-mt-card.mine::before{
  content:'내 표';
  position:absolute;
  top:-10px;
  left:10px;
  padding:1px 7px;
  font-size:10px;
  font-weight:900;
  color:#1d1f29;
  background:#ffd84a;
  border-radius:6px;
  animation:m2-mt-pop .35s cubic-bezier(.2,1.6,.4,1);
}
.m2-mt-card.nominated{
  border-color:#ff4d4d;
  background:#3a1f26;
  box-shadow:0 0 0 3px rgba(255,77,77,0.4), 0 0 26px rgba(255,60,60,0.5);
  animation:m2-mt-shake .5s;
}
.m2-mt-fig{flex:none; display:flex; justify-content:center; width:40px; height:52px;}
.m2-mt-fig .m2-fig{--w:auto; height:100%; width:auto;}
.m2-mt-name{flex:1; min-width:0; overflow:hidden; font-size:14px; font-weight:800; white-space:nowrap; text-overflow:ellipsis;}
.m2-mt-name small{font-weight:600; color:var(--sub);}
.m2-mt-check{
  position:absolute;
  top:-8px;
  right:-8px;
  display:none;
  place-items:center;
  width:22px;
  height:22px;
  font-size:12px;
  font-weight:900;
  color:#1d1f29;
  background:#9be15d;
  border:2px solid #1d1f29;
  border-radius:50%;
}
.m2-mt-card.voted .m2-mt-check{display:grid; animation:m2-mt-pop .35s cubic-bezier(.2,1.6,.4,1);}
/* 어몽어스식 확인 ✔ / ✖ */
.m2-mt-confirm{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  padding-right:8px;
  background:linear-gradient(90deg, transparent 20%, rgba(20,18,28,0.96) 55%);
  border-radius:10px;
  animation:m2-mt-fade .15s;
}
.m2-mt-confirm button{
  width:34px;
  height:34px;
  font-size:16px;
  font-weight:900;
  color:#1d1f29;
  border:2px solid #1d1f29;
  border-radius:50%;
  cursor:pointer;
  transition:transform .1s;
}
.m2-mt-confirm button:hover{transform:scale(1.12);}
.m2-mt-confirm .c-ok{background:#9be15d;}
.m2-mt-confirm .c-no{background:#ff8a80;}
/* 개표 표 */
.m2-mt-ballots{display:flex; flex-wrap:wrap; gap:3px; max-width:66px;}
.m2-mt-ballot{
  width:12px;
  height:15px;
  background:#f4efe4;
  border:1.5px solid #1d1f29;
  border-radius:2px;
  animation:m2-mt-drop .35s cubic-bezier(.2,1.6,.4,1);
}
.m2-mt-foot{display:flex; align-items:center; gap:10px; margin-top:14px;}
.m2-mt-note{flex:1; margin:0; font-size:13px; color:var(--sub);}
.m2-mt-note b.red, .m2-mt-msg b.red{color:#ff6b6b;}
.m2-mt-prog{font-size:13px; font-weight:800; color:#ffd84a;}
.m2-mt-skip.mine{border-color:#ffd84a; color:#ffd84a;}
.m2-mt-skiprow{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--sub);}

/* 최후의 반론 / 찬반 / 결과 무대 */
.m2-mt-scene{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  min-height:310px;
  padding:18px 12px 14px;
  overflow:hidden;
  text-align:center;
  background:radial-gradient(ellipse 45% 95% at 50% -12%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%), #0c0a12;
  border-radius:14px;
}
.m2-mt-beam{
  position:absolute;
  top:-30%;
  left:50%;
  width:150px;
  height:160%;
  background:linear-gradient(180deg, rgba(255,120,120,0.35), transparent 80%);
  filter:blur(6px);
  transform-origin:50% 0;
  animation:m2-mt-beam 3.2s ease-in-out infinite alternate;
  pointer-events:none;
}
.m2-mt-beam.b2{animation-duration:4.1s; animation-direction:alternate-reverse; opacity:.6;}
.m2-mt-big{
  position:relative;
  margin:0;
  font-size:clamp(30px, 6vw, 50px);
  font-weight:900;
  color:#ffd2cb;
  text-shadow:0 0 22px rgba(255,60,60,0.7), 0 4px 0 rgba(0,0,0,0.4);
  animation:m2-mt-slam .6s cubic-bezier(.2,1.5,.4,1) both;
}
.m2-mt-spotfig{position:relative; display:flex; flex-direction:column; align-items:center;}
.m2-mt-bigfig{position:relative; display:flex; justify-content:center; height:140px; animation:m2-mt-rise .7s .2s both cubic-bezier(.2,1.2,.4,1);}
.m2-mt-bigfig .m2-fig{--w:auto; height:100%; width:auto;}
.m2-mt-scene.defense .m2-mt-bigfig > *{animation:m2-mt-tremble 2.4s 1s infinite;}
.m2-mt-floor{width:150px; height:22px; margin-top:-12px; background:radial-gradient(ellipse, rgba(255,140,140,0.45), transparent 70%);}
.m2-mt-nick{position:relative; font-size:22px; font-weight:900; color:#fff; animation:m2-mt-up .5s .45s both;}
.m2-mt-say{position:relative; margin:0; font-size:14px; color:#e6dce8; animation:m2-mt-up .5s .6s both;}
.m2-mt-got{position:relative; margin:0; font-size:12px; font-weight:800; color:#ff9a9a; animation:m2-mt-up .5s .75s both;}
/* 찬반 */
.m2-mt-vrow{display:flex; align-items:center; justify-content:center; gap:clamp(10px, 3vw, 30px); width:100%; margin-top:6px;}
.m2-mt-midfig{display:flex; justify-content:center; height:120px; animation:m2-mt-rise .6s both;}
.m2-mt-midfig .m2-fig{--w:auto; height:100%; width:auto;}
.m2-mt-vbtn{
  flex:1;
  max-width:200px;
  padding:18px 10px 14px;
  font-family:var(--font);
  font-size:26px;
  font-weight:900;
  color:#fff;
  border:3px solid #1d1f29;
  border-radius:16px;
  cursor:pointer;
  box-shadow:0 6px 0 rgba(0,0,0,0.45);
  transition:transform .12s, filter .12s, box-shadow .12s;
  animation:m2-mt-card .45s .15s both cubic-bezier(.2,1.3,.4,1);
}
.m2-mt-vbtn small{display:block; margin-top:2px; font-size:12px; font-weight:700; opacity:.85;}
.m2-mt-vbtn.v-yes{background:linear-gradient(180deg, #ff6b6b, #c62828);}
.m2-mt-vbtn.v-no{background:linear-gradient(180deg, #5aa2ff, #2a5bd8); animation-delay:.25s;}
.m2-mt-vbtn:not(:disabled):hover{transform:translateY(-3px) scale(1.04); box-shadow:0 9px 0 rgba(0,0,0,0.45);}
.m2-mt-vbtn:not(:disabled):active{transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,0.45);}
.m2-mt-vbtn:disabled{filter:grayscale(.75) brightness(.6); cursor:default;}
.m2-mt-vbtn.mine{filter:none; box-shadow:0 0 0 4px #ffd84a, 0 6px 0 rgba(0,0,0,0.45); animation:m2-mt-pop .35s cubic-bezier(.2,1.6,.4,1);}
.m2-mt-slots{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:12px;}
.m2-mt-slot{width:16px; height:21px; border:2px dashed rgba(255,255,255,0.25); border-radius:3px;}
.m2-mt-slot.on{background:#f4efe4; border:2px solid #1d1f29; animation:m2-mt-drop .35s cubic-bezier(.2,1.6,.4,1);}
.m2-mt-scene .m2-mt-note{flex:none; margin-top:4px;}
.m2-mt-rule{margin:0; font-size:11px; color:rgba(255,255,255,0.4);}
/* 결과 */
.m2-mt-scene.verdict{min-height:0; padding-bottom:16px;}
.m2-mt-scene.result.kill{--accent:#ff4d4d;}
.m2-mt-scene.result.save{--accent:#5aa2ff;}
.m2-mt-stampwrap{position:relative; display:flex; justify-content:center; margin:8px 0 2px;}
.m2-mt-scene.result.none{--accent:#9aa0b8; justify-content:center;}
.m2-mt-tally{display:flex; gap:clamp(18px, 5vw, 44px); font-size:18px; font-weight:800; color:#e6dce8;}
.m2-mt-tally b{display:inline-block; min-width:1.2em; font-family:'Orbitron', var(--font); font-size:38px;}
.m2-mt-tally .y b{color:#ff6b6b;}
.m2-mt-tally .n b{color:#5aa2ff;}
.m2-mt-msg{position:relative; min-height:1.4em; margin:6px 0 0; font-size:17px; font-weight:800; color:#fff;}
.m2-mt-stamp{
  position:absolute;
  top:50%;
  left:50%;
  z-index:2;
  white-space:nowrap;
  padding:4px 22px;
  font-size:clamp(38px, 8vw, 66px);
  font-weight:900;
  letter-spacing:.12em;
  border:6px solid currentColor;
  border-radius:10px;
  transform:translate(-50%, -50%) rotate(-12deg);
  animation:m2-mt-stamp .45s cubic-bezier(.2,1.6,.4,1) both;
  pointer-events:none;
}
.m2-mt-stamp.kill{color:#ff3b3b; background:rgba(60,0,0,0.35); text-shadow:0 0 16px rgba(255,0,0,0.6);}
.m2-mt-stamp.save{color:#6fd2ff; background:rgba(0,30,60,0.35); text-shadow:0 0 16px rgba(80,180,255,0.6);}
.m2-mt-bigfig.dying{animation:m2-mt-die 1.2s .15s ease-in forwards;}

@keyframes m2-mt-fade{from{opacity:0;} to{opacity:1;}}
@keyframes m2-mt-in{from{opacity:0; transform:scale(.86) translateY(16px);} to{opacity:1; transform:none;}}
@keyframes m2-mt-card{from{opacity:0; transform:translateY(16px) scale(.92);} to{opacity:1; transform:none;}}
@keyframes m2-mt-pop{0%{transform:scale(.3);} 60%{transform:scale(1.2);} 100%{transform:scale(1);}}
@keyframes m2-mt-drop{from{opacity:0; transform:translateY(-22px) rotate(-20deg);} to{opacity:1; transform:none;}}
@keyframes m2-mt-shake{0%, 100%{transform:none;} 20%{transform:translateX(-7px) rotate(-1deg);} 40%{transform:translateX(6px) rotate(1deg);} 60%{transform:translateX(-4px);} 80%{transform:translateX(3px);}}
@keyframes m2-mt-slam{from{opacity:0; transform:scale(2.4); filter:blur(4px);} to{opacity:1; transform:none; filter:none;}}
@keyframes m2-mt-rise{from{opacity:0; transform:translateY(40px);} to{opacity:1; transform:none;}}
@keyframes m2-mt-up{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
@keyframes m2-mt-tremble{0%, 100%{transform:none;} 10%{transform:translateX(-1.5px);} 20%{transform:translateX(1.5px);} 30%{transform:none;}}
@keyframes m2-mt-beam{from{transform:translateX(-50%) rotate(-14deg);} to{transform:translateX(-50%) rotate(14deg);}}
@keyframes m2-mt-pulse{from{transform:scale(1);} to{transform:scale(1.15);}}
@keyframes m2-mt-stamp{from{opacity:0; transform:translate(-50%, -50%) rotate(-30deg) scale(3);} to{opacity:1; transform:translate(-50%, -50%) rotate(-12deg) scale(1);}}
@keyframes m2-mt-die{to{opacity:.25; filter:grayscale(1) brightness(.6); transform:translateY(18px) rotate(-8deg) scale(.92);}}
@media (prefers-reduced-motion: reduce){
  .m2-mt, .m2-mt *{animation-duration:.01s !important; animation-iteration-count:1 !important;}
}
.m2-rep-bell{display:block; font-size:clamp(56px, 9vw, 96px); line-height:1; text-align:center;}
.m2-mates-title.cult{color:#d9a8ff;}

/* ========== 오른쪽 패널: 마피아 채널 ========== */
@media (min-width:1620px){
  .m2-side.right{position:absolute; top:0; right:auto; left:calc(100% + 16px); width:240px;}
}
@media (max-width:1619px){
  /* 옆에 자리가 없으면 마피아 채널은 화면 왼쪽 아래에 떠 있는 작은 창 */
  .m2-side.right{position:fixed; left:14px; bottom:14px; z-index:1800; width:260px; margin:0;}
  .m2-side.right .m2-mchat-log{height:120px;}
}
.m2-side.right:not(:has(> :not(.hidden))){display:none;}
.m2-mchat{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px;
  background:linear-gradient(180deg, rgba(40,8,14,0.92), rgba(16,6,10,0.92));
  border:1px solid rgba(255,77,77,0.4);
  border-radius:16px;
  box-shadow:0 0 30px rgba(255,77,77,0.15);
}
.m2-mchat.hidden{display:none;}
.m2-mchat-title{margin:0; font-weight:900; color:#ff9b8f; letter-spacing:.04em;}
.m2-mchat-title small{margin-left:6px; font-size:11px; font-weight:600; color:var(--sub);}
.m2-mchat-log{
  height:240px;
  overflow-y:auto;
  padding:8px;
  font-size:13px;
  line-height:1.5;
  background:rgba(0,0,0,0.3);
  border-radius:10px;
}
.m2-mchat-log p{margin:0 0 4px; color:#e8dde0; word-break:break-all;}
.m2-mchat-log p b{color:#ff8a80; margin-right:4px;}
.m2-mchat-log p.me b{color:#ffd84a;}
/* 시스템 메시지 (스파이 첩보 결과) */
.m2-mchat-log p.sys{padding:4px 6px; color:#d8f3ff; background:rgba(80,170,255,0.12); border-left:3px solid #5aa2ff; border-radius:4px;}
.m2-mchat-log p.sys b{color:#8fd0ff;}
.m2-mchat-input:disabled{opacity:.55; cursor:not-allowed;}
.m2-mchat-empty{color:var(--sub) !important; font-size:12px;}
.m2-mchat-row{display:flex; gap:6px;}
.m2-mchat-input{
  flex:1;
  min-width:0;
  padding:8px 10px;
  font-family:var(--font);
  font-size:13px;
  color:var(--text);
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,77,77,0.35);
  border-radius:10px;
  outline:none;
}
.m2-mchat-input:focus{border-color:#ff8a80;}

/* ========== 게임 중 화면 정리: 제목 숨김, 스크롤 없음, 시계 가운데 ========== */
body.m2-ingame{overflow:hidden;}
body.m2-ingame .page-title{display:none;}
body.m2-ingame .m2-wrap{padding-top:10px; padding-bottom:0;}
.m2-game{margin-top:0;}
.m2-hud{position:relative; justify-content:center;}
.m2-hud-left{justify-content:center;}
#leaveBtn{position:absolute; right:0; top:50%; transform:translateY(-50%);}
.m2-mchat, .m2-mchat-log{text-align:left;}

/* 게임 메시지: 게임 창 안 위쪽 토스트 */
.m2-toast{
  position:absolute;
  left:50%; top:96px;
  z-index:4;
  transform:translateX(-50%);
  margin:0 !important;
  padding:6px 16px;
  border-radius:999px;
  background:rgba(0,0,0,0.7);
  pointer-events:none;
  white-space:nowrap;
}
.m2-toast:empty{display:none;}

/* 개발자 모드 (조이포커식): 오른쪽 아래 🛠 + 패널 */
.m2-dev{position:fixed; right:14px; bottom:14px; z-index:1900; display:flex; flex-direction:column-reverse; align-items:flex-end; gap:8px;}
.m2-dev-toggle{
  width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:20px;
  background:#ffd45a; border:2px solid #1a1200; box-shadow:0 4px 14px rgba(0,0,0,0.5);
}
.m2-dev-panel{
  width:min(560px, calc(100vw - 28px));
  max-height:calc(100vh - 90px);
  overflow-y:auto;
  padding:12px;
  text-align:left;
  background:rgba(12,14,20,0.96);
  border:2px solid #ffd45a;
  border-radius:12px;
  box-shadow:0 8px 30px rgba(0,0,0,0.6);
}
.m2-dev-panel.hidden{display:none;}
.m2-dev-title{font-size:13px; font-weight:900; color:#ffd45a; margin-bottom:6px;}
.m2-dev-panel .m2-help{margin:0 0 8px;}
.m2-dev-panel .m2-test-row{justify-content:flex-start; margin-top:0;}
.m2-dev-panel .m2-player-list{justify-content:flex-start;}

/* (맨 끝에 둠 -- 위의 .m2-side .m2-rolehud 규칙들보다 나중이어야 덮어씀) */
@media (max-width:1619px){
  /* 왼쪽에 자리가 없을 땐 게임 창 위에 한 줄짜리 작은 카드 */
  .m2-side{margin-bottom:10px;}
  .m2-side .m2-rolehud{padding:8px 14px; text-align:left;}
  .m2-side .m2-rolehud-head{flex-direction:row; align-items:baseline; gap:10px;}
  .m2-side .m2-rolehud-name{font-size:18px;}
  .m2-side .m2-rolehud-caret{position:static;}
  .m2-side .m2-rolehud-body{grid-template-columns:40px 1fr; justify-items:start; gap:4px 12px; margin-top:6px;}
  .m2-side .m2-rolehud-fig{--w:40px; grid-row:span 2;}
  .m2-side .m2-rolehud-desc{font-size:12px; text-align:left;}
  .m2-side .m2-mates{align-items:flex-start; padding-top:4px; flex-direction:row; flex-wrap:wrap; gap:4px 10px;}
}

/* 로비: 조작 방식 선택 */
label.m2-lobby-label{display:inline-flex; align-items:center; gap:6px; margin-right:6px;}
/* 로비: 소리 크기 */
.m2-vol input[type=range]{width:90px; accent-color:var(--cyan); cursor:pointer;}
.m2-vol-val{min-width:42px; font-size:12px; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums;}
.m2-intro{cursor:default;}

/* ---------- 시민 직업 능력 (장소형 + 미니게임) ---------- */
.m2-act-abil[data-kind="job"]{background:linear-gradient(#2fb39a, #146b5c);}
.m2-act-abil.far{filter:saturate(0.45) brightness(0.8);}
.m2-job-chip{top:auto; bottom:46px; color:#d6fff6; background:rgba(10,70,62,0.88); border-color:rgba(95,224,196,0.45); max-width:calc(100% - 24px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.m2-disguise-list.compact{grid-template-columns:repeat(auto-fill, minmax(92px, 1fr));}
.m2-disguise-list.compact .m2-disguise-pick{padding:10px 6px;}

.m2-mg{position:absolute; inset:0; z-index:5; display:grid; place-items:center; padding:14px; background:rgba(4,4,12,0.6);}
.m2-mg-box{
  width:min(100%, 480px);
  padding:18px 18px 14px;
  text-align:center;
  background:linear-gradient(180deg, #24303a, #12171d);
  border:3px solid #1d1f29;
  border-radius:16px;
  box-shadow:0 0 34px rgba(60,200,180,0.28), 0 12px 40px rgba(0,0,0,0.6);
  animation:m2-mt-in .3s cubic-bezier(.2,1.3,.4,1);
}
.m2-mg-title{margin:0; font-size:19px; font-weight:900; color:#fff;}
.m2-mg-hint{margin:4px 0 14px; font-size:12.5px; font-weight:600; color:var(--sub);}
.m2-mg-body{display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:14px; min-height:120px; justify-content:center;}
.m2-mg-big{min-width:150px; font-size:17px; padding:12px 22px;}
.m2-mg-shake{animation:m2-mg-shake .35s;}
@keyframes m2-mg-shake{20%{transform:translateX(-7px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)}}
.m2-mg-prog{width:100%; height:12px; background:#0b0f14; border:2px solid #1d1f29; border-radius:99px; overflow:hidden;}
.m2-mg-prog i{display:block; width:0; height:100%; background:linear-gradient(90deg, #6b4a2f, #c08a52); transition:width .15s;}
.m2-mg-prog.pray i{background:linear-gradient(90deg, #f7c14b, #fff1b8); transition:none;}

/* 심폐소생술 */
.m2-mg-hearts{display:flex; gap:10px; font-size:30px;}
.m2-mg-hearts span{color:#3a2a30; transition:transform .2s, color .2s;}
.m2-mg-hearts span.on{color:#ff4d6a; transform:scale(1.15); text-shadow:0 0 12px rgba(255,77,106,0.7);}
.m2-mg-track{position:relative; width:100%; height:34px; background:#0b0f14; border:3px solid #1d1f29; border-radius:10px; overflow:hidden;}
.m2-mg-track .zone{position:absolute; top:0; bottom:0; background:linear-gradient(#5fe08a, #1f9d55); opacity:.85; transition:left .2s;}
.m2-mg-track .needle{position:absolute; top:-2px; bottom:-2px; width:6px; margin-left:-3px; background:#fff; border-radius:3px; box-shadow:0 0 8px #fff;}
.m2-mg-track.beat{animation:m2-mg-beat .3s;}
@keyframes m2-mg-beat{50%{box-shadow:0 0 0 4px rgba(255,77,106,0.6);}}

/* 흙 파기 */
.m2-mg-pit{--depth:0; position:relative; width:100%; height:170px; border-radius:14px; border:3px solid #1d1f29; overflow:hidden;
  background:radial-gradient(ellipse at 50% 60%, color-mix(in srgb, #1a120c calc(var(--depth) * 100%), #6b4a2f), #4a3220 70%);}
.m2-mg-dirt{position:absolute; width:96px; height:70px; margin:0; padding:0; border:3px solid #2a1d14; border-radius:50% 50% 40% 40%;
  background:radial-gradient(circle at 35% 30%, #a77a4e, #6b4a2f 60%, #4a3220); cursor:pointer; transition:left .18s, top .18s, transform .1s;}
.m2-mg-dirt::after{content:'⛏️'; position:absolute; right:-14px; top:-16px; font-size:26px;}
.m2-mg-dirt:active{transform:scale(0.9) !important;}
.m2-mg-coffin{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); display:flex; flex-direction:column; align-items:center;
  font-size:56px; line-height:1; background:none; border:0; cursor:pointer; color:#f2e3c4; animation:m2-mt-in .35s cubic-bezier(.2,1.3,.4,1);}
.m2-mg-coffin small{font-size:13px; font-weight:800; margin-top:4px;}
.m2-mg-coffin.open{animation:m2-mg-open .45s forwards;}
@keyframes m2-mg-open{to{transform:translate(-50%, -50%) scale(1.3); opacity:0; filter:brightness(2);}}

/* 촛불 기도 */
.m2-mg-candles{display:flex; gap:12px; justify-content:center; padding:10px 0 4px;}
.m2-mg-candle{position:relative; width:42px; height:96px; padding:0; background:none; border:0; cursor:pointer;}
.m2-mg-candle b{position:absolute; left:8px; right:8px; bottom:0; height:62px; background:linear-gradient(90deg, #e8dcc2, #fff8e8 45%, #cbbd9f); border:2px solid #1d1f29; border-radius:5px;}
.m2-mg-candle .flame{position:absolute; left:50%; top:4px; width:16px; height:26px; margin-left:-8px; border-radius:50% 50% 45% 45% / 60% 60% 40% 40%;
  background:radial-gradient(circle at 50% 70%, #fff6c8, #ffb43a 55%, rgba(255,120,30,0)); opacity:0; transform:scale(0.4); transition:opacity .15s, transform .15s;}
.m2-mg-candle.lit .flame{opacity:1; transform:scale(1); animation:m2-mg-flicker .5s infinite alternate;}
.m2-mg-candle:not(.lit)::before{content:'〰'; position:absolute; left:50%; top:4px; transform:translateX(-50%) rotate(90deg); color:#8a8f99; font-size:14px;}
@keyframes m2-mg-flicker{to{transform:scale(0.9, 1.08) translateY(1px);}}

/* 조판 */
.m2-mg-headline{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; width:100%; padding:12px; background:#efe6d2; border:3px solid #1d1f29; border-radius:8px; color:#1d1f29;}
.m2-mg-headline .slot{min-width:56px; padding:4px 8px; font-weight:900; font-size:17px; border-bottom:2px dashed #9a8f78;}
.m2-mg-headline .slot.on{border-bottom-color:transparent;}
.m2-mg-headline.printed{animation:m2-mg-print .6s;}
@keyframes m2-mg-print{40%{transform:scale(0.94); filter:brightness(0.85);} 100%{transform:scale(1);}}
.m2-mg-tiles{display:flex; flex-wrap:wrap; gap:8px; justify-content:center;}
.m2-mg-tile{padding:8px 14px; font-family:var(--font); font-size:15px; font-weight:800; color:#f2e3c4; background:#3a3328; border:2px solid #1d1f29; border-radius:8px; cursor:pointer;}
.m2-mg-tile:disabled{opacity:.25; cursor:default;}

/* 서류 찾기 */
.m2-mg-ticket{font-size:15px; font-weight:700; color:#fff;}
.m2-mg-ticket b{font-family:Orbitron, var(--font); font-size:22px; color:#ffe27a; margin:0 4px;}
.m2-mg-ticket small{color:var(--sub);}
.m2-mg-files{display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; width:100%;}
.m2-mg-file{display:flex; flex-direction:column; align-items:center; padding:6px 0; font-size:22px; background:#2e3440; border:2px solid #1d1f29; border-radius:8px; cursor:pointer;}
.m2-mg-file b{font-family:Orbitron, var(--font); font-size:13px; color:#e8edf5;}
.m2-mg-file:hover{background:#3b4352;}

/* ===== 미니게임 공통 (2026-10-20 퀄리티 개선) ===== */
.m2-mg-box{position:relative; overflow:hidden;}
.m2-mg-box::before{content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(ellipse at 50% -10%, var(--mg-glow, rgba(60,200,180,0.35)), transparent 60%);}
.m2-mg-box > *{position:relative;}
.m2-mg-box[data-theme="cpr"]{--mg-glow:rgba(90,255,150,0.35); background:linear-gradient(180deg, #1b2a2a, #0d1416);}
.m2-mg-box[data-theme="dig"]{--mg-glow:rgba(200,150,90,0.35); background:linear-gradient(180deg, #2a2219, #120e0a);}
.m2-mg-box[data-theme="pray"]{--mg-glow:rgba(255,210,120,0.4); background:linear-gradient(180deg, #221a30, #0e0b16);}
.m2-mg-box[data-theme="press"]{--mg-glow:rgba(240,225,190,0.3); background:linear-gradient(180deg, #2b2620, #13110e);}
.m2-mg-box[data-theme="files"]{--mg-glow:rgba(140,190,255,0.3); background:linear-gradient(180deg, #1f2733, #0e131a);}
.m2-mg-bit{position:absolute; z-index:20; border-radius:2px; pointer-events:none;}
.m2-mg-bit.glow{border-radius:50%; box-shadow:0 0 8px currentColor;}
/* 성공 / 실패 */
.m2-mg-result{position:absolute; inset:0; z-index:30; display:grid; place-items:center; pointer-events:none;
  font-size:34px; font-weight:900; letter-spacing:2px; color:#fff; text-shadow:0 4px 0 #1d1f29, 0 0 22px var(--rc);
  background:radial-gradient(circle, color-mix(in srgb, var(--rc) 30%, transparent), transparent 70%);
  animation:m2-mg-result .55s cubic-bezier(.2,1.4,.4,1);}
.m2-mg-result.ok{--rc:#5fe08a;}
.m2-mg-result.fail{--rc:#ff4d6a;}
@keyframes m2-mg-result{from{transform:scale(0.4); opacity:0;} to{transform:scale(1); opacity:1;}}
.m2-mg-box.won{box-shadow:0 0 0 3px #5fe08a, 0 0 50px rgba(95,224,138,0.55), 0 12px 40px rgba(0,0,0,0.6); transition:box-shadow .2s;}
.m2-mg-box.lost{box-shadow:0 0 0 3px #ff4d6a, 0 0 50px rgba(255,77,106,0.5); transition:box-shadow .2s;}
.m2-mg-prog{height:14px; box-shadow:inset 0 2px 4px rgba(0,0,0,0.6);}
.m2-mg-prog i{position:relative; box-shadow:0 0 10px rgba(255,200,120,0.5);}
.m2-mg-prog i::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); animation:m2-mg-sheen 1.4s infinite;}
@keyframes m2-mg-sheen{from{transform:translateX(-100%);} to{transform:translateX(100%);}}

/* ----- 심폐소생술: 심전도 모니터 ----- */
.m2-mg-monitor{position:relative; width:100%; border-radius:12px; padding:6px; background:linear-gradient(#2c3438, #171c1f);
  border:3px solid #0b0f12; box-shadow:inset 0 0 0 2px #3c464b, 0 6px 14px rgba(0,0,0,0.5);}
.m2-mg-monitor canvas{display:block; width:100%; height:110px; border-radius:7px; background:radial-gradient(ellipse at 50% 50%, #062014, #020a06);}
.m2-mg-mon-hud{position:absolute; left:14px; right:14px; top:10px; display:flex; justify-content:space-between; font-family:Orbitron, var(--font); font-size:12px; color:#5dff9b; text-shadow:0 0 6px #5dff9b;}
.m2-mg-mon-hud b{font-size:18px; margin-left:4px;}
.m2-mg-mon-hud .hearts i{font-style:normal; margin-left:4px; font-size:16px; color:#2c3a33; text-shadow:none; transition:color .2s, transform .2s;}
.m2-mg-mon-hud .hearts i.on{color:#ff4d6a; text-shadow:0 0 10px #ff4d6a; display:inline-block; transform:scale(1.15);}
.m2-mg-monitor.ok{animation:m2-mg-monok .4s;}
.m2-mg-monitor.bad{animation:m2-mg-monbad .4s;}
@keyframes m2-mg-monok{40%{box-shadow:inset 0 0 0 2px #5dff9b, 0 0 24px rgba(93,255,155,0.6);}}
@keyframes m2-mg-monbad{20%,60%{box-shadow:inset 0 0 0 2px #ff4d6a, 0 0 24px rgba(255,77,106,0.6); transform:translateX(-4px);} 40%,80%{transform:translateX(4px);}}
.m2-mg-track{height:38px; background:linear-gradient(#0b0f14, #151b22); border-radius:12px; box-shadow:inset 0 3px 6px rgba(0,0,0,0.7);}
.m2-mg-track .ticks{position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 10%);}
.m2-mg-track .zone{border-radius:6px; box-shadow:0 0 14px rgba(95,224,138,0.7), inset 0 0 0 2px rgba(255,255,255,0.25); animation:m2-mg-zone 1s infinite alternate;}
@keyframes m2-mg-zone{to{filter:brightness(1.25);}}
.m2-mg-track .needle{width:8px; margin-left:-4px; background:linear-gradient(#fff, #cfe8ff); box-shadow:0 0 12px #fff, 0 0 2px #000;}
.m2-mg-press{display:grid; place-items:center; width:104px; height:104px; border-radius:50%; cursor:pointer; color:#fff; font-family:var(--font);
  background:radial-gradient(circle at 35% 30%, #ff7d8f, #d42a45 55%, #8f1027); border:4px solid #1d1f29;
  box-shadow:0 7px 0 #5a0918, 0 12px 20px rgba(0,0,0,0.5), inset 0 -6px 10px rgba(0,0,0,0.25); transition:transform .08s, box-shadow .08s;}
.m2-mg-press span{font-size:20px; font-weight:900; line-height:1; text-shadow:0 2px 0 rgba(0,0,0,0.4);}
.m2-mg-press small{font-size:10px; opacity:.8; margin-top:-18px;}
.m2-mg-press:active, .m2-mg-press.push{transform:translateY(6px); box-shadow:0 1px 0 #5a0918, 0 4px 10px rgba(0,0,0,0.5), inset 0 -3px 8px rgba(0,0,0,0.25);}
.m2-mg-press.push{animation:m2-mg-push .18s;}
@keyframes m2-mg-push{50%{transform:translateY(6px) scale(0.96);}}

/* ----- 흙 파기: 땅 단면 ----- */
.m2-mg-pit{--depth:0; height:200px; border-radius:14px; background:
  linear-gradient(#6fbf5a 0 14px, #3f7a32 14px 18px, transparent 18px),
  repeating-linear-gradient(180deg, #7a5434 18px 50px, #6b4a2f 50px 90px, #5a3c26 90px 130px, #4a3220 130px 200px);
  box-shadow:inset 0 0 30px rgba(0,0,0,0.5);}
.m2-mg-pit.thud{animation:m2-mg-thud .18s;}
@keyframes m2-mg-thud{50%{transform:translateY(2px);}}
.m2-mg-hole{position:absolute; left:16%; right:16%; top:12px; height:calc(14px + var(--depth) * 170px);
  clip-path:polygon(0 0, 100% 0, 88% 100%, 12% 100%); transition:height .2s cubic-bezier(.3,1.4,.5,1);
  background:linear-gradient(#24170e, #120b06 70%, #0a0603); box-shadow:inset 0 10px 20px rgba(0,0,0,0.6);}
.m2-mg-mound{position:absolute; right:-6px; top:-4px; width:calc(30px + var(--depth) * 70px); height:calc(10px + var(--depth) * 34px);
  border-radius:50% 50% 0 0; background:radial-gradient(ellipse at 50% 80%, #8a5f3a, #5a3c26); transition:width .2s, height .2s; box-shadow:inset 0 4px 0 rgba(255,255,255,0.08);}
.m2-mg-deco{position:absolute; pointer-events:none; opacity:.8;}
.m2-mg-deco.rock{width:18px; height:12px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #a5a5a5, #5c5c5c);}
.m2-mg-deco.bone{width:26px; height:6px; border-radius:4px; background:#e8dfc8; transform:rotate(-18deg); box-shadow:-4px -2px 0 -1px #e8dfc8, 22px 2px 0 -1px #e8dfc8;}
.m2-mg-deco.root{width:40px; height:3px; background:#3a2414; transform:rotate(24deg); border-radius:2px;}
.m2-mg-dirt{z-index:3; width:80px; height:56px; transform:translate(-50%, -50%); border-radius:50% 50% 40% 40%;
  background:radial-gradient(circle at 35% 30%, #b98a5c, #7a5434 60%, #4a3220); box-shadow:0 6px 0 rgba(0,0,0,0.35), 0 0 0 3px rgba(255,220,150,0.25);
  animation:m2-mg-bob 1s infinite alternate;}
.m2-mg-dirt::after{content:none;}
.m2-mg-dirt .shovel{position:absolute; right:-26px; top:-34px; width:40px; height:62px; transform-origin:30% 90%; transform:rotate(25deg); pointer-events:none;
  background:linear-gradient(#c9ccd2, #8b9099) 50% 100% / 26px 22px no-repeat, linear-gradient(#9b6b3c, #6b4422) 50% 0 / 6px 46px no-repeat;
  clip-path:polygon(43% 0, 57% 0, 57% 64%, 82% 64%, 82% 86%, 50% 100%, 18% 86%, 18% 64%, 43% 64%);}
.m2-mg-dirt.dug .shovel{animation:m2-mg-swing .22s;}
.m2-mg-dirt:active{transform:translate(-50%, -50%) scale(0.92) !important;}
@keyframes m2-mg-bob{to{margin-top:-4px;}}
@keyframes m2-mg-swing{40%{transform:rotate(-30deg) translateY(10px);}}
.m2-mg-coffin{left:50%; top:auto; bottom:10px; transform:translateX(-50%); width:150px; height:86px; display:block; font-size:0; animation:m2-mg-rise .5s cubic-bezier(.2,1.3,.4,1);}
.m2-mg-coffin .box, .m2-mg-coffin .lid{position:absolute; left:0; right:0; clip-path:polygon(12% 0, 88% 0, 100% 30%, 88% 100%, 12% 100%, 0 30%);}
.m2-mg-coffin .box{top:6px; bottom:0; background:linear-gradient(#2a1a0e, #170e07);}
.m2-mg-coffin .lid{top:0; bottom:8px; background:repeating-linear-gradient(90deg, #7a4a24 0 22px, #6a3f1e 22px 24px), #7a4a24; transition:transform .5s cubic-bezier(.3,1.2,.5,1);}
.m2-mg-coffin .lid::after{content:''; position:absolute; left:50%; top:16%; width:8px; height:60%; margin-left:-4px; background:#e8c47a; box-shadow:0 12px 0 -1px transparent; border-radius:2px;}
.m2-mg-coffin .lid::before{content:''; position:absolute; left:50%; top:34%; width:30px; height:7px; margin-left:-15px; background:#e8c47a; border-radius:2px;}
.m2-mg-coffin small{position:absolute; left:50%; bottom:-22px; transform:translateX(-50%); font-size:13px; font-weight:800; color:#ffe9a8; white-space:nowrap; text-shadow:0 2px 0 #000;}
.m2-mg-coffin.open{animation:none;}
.m2-mg-coffin.open .lid{transform:translate(120px, -40px) rotate(28deg);}
.m2-mg-coffin.open .box{box-shadow:0 0 40px 10px rgba(255,220,130,0.6); background:radial-gradient(ellipse at 50% 60%, #fff3c8, #c79a4a 50%, #2a1a0e);}
@keyframes m2-mg-rise{from{transform:translate(-50%, 40px); opacity:0;}}

/* ----- 촛불 기도: 제단 ----- */
.m2-mg-altar{--light:1; position:relative; width:100%; height:220px; border-radius:14px; overflow:hidden;
  background:radial-gradient(ellipse at 50% 100%, rgba(255,190,90, calc(var(--light) * 0.45)), transparent 70%), linear-gradient(#17112a, #0b0812);
  box-shadow:inset 0 0 40px rgba(0,0,0,0.7);}
.m2-mg-altar .glass{position:absolute; left:50%; top:10px; width:110px; height:130px; margin-left:-55px; border-radius:55px 55px 6px 6px; border:4px solid #2a2238;
  background:conic-gradient(from 0deg at 50% 60%, #6a3fb5, #2f6fd6, #3fb58a, #e8c34a, #d8365a, #6a3fb5);
  opacity:calc(0.25 + var(--light) * 0.6); filter:saturate(calc(0.4 + var(--light))); transition:opacity .4s;}
.m2-mg-altar .glass::after{content:''; position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0 24px, #2a2238 24px 28px), repeating-linear-gradient(180deg, transparent 0 30px, #2a2238 30px 34px);}
.m2-mg-altar .cross{position:absolute; left:50%; top:46px; width:10px; height:56px; margin-left:-5px; background:#ffe9a8; border-radius:2px; box-shadow:0 0 calc(var(--light) * 18px) #ffd36b; opacity:calc(0.4 + var(--light) * 0.6);}
.m2-mg-altar .cross::after{content:''; position:absolute; left:-12px; top:12px; width:34px; height:10px; background:inherit; border-radius:2px;}
.m2-mg-altar .table{position:absolute; left:6%; right:6%; bottom:0; height:30px; background:linear-gradient(#6b4422, #3e2410); border-top:4px solid #8a5a2e; border-radius:6px 6px 0 0;}
.m2-mg-altar.blessed{animation:m2-mg-bless .8s;}
@keyframes m2-mg-bless{50%{filter:brightness(1.6);}}
.m2-mg-candles{position:absolute; left:0; right:0; bottom:26px; padding:0; align-items:flex-end; gap:14px;}
.m2-mg-candle{width:40px; height:calc(var(--h) + 44px);}
.m2-mg-candle b{left:9px; right:9px; height:var(--h); border-radius:4px 4px 2px 2px; border-width:2px;}
.m2-mg-candle b u{position:absolute; left:3px; top:-1px; width:6px; height:14px; background:#fff8e8; border-radius:0 0 4px 4px;}
.m2-mg-candle .wick{position:absolute; left:50%; bottom:calc(var(--h) - 2px); width:2px; height:7px; margin-left:-1px; background:#2a2a2a;}
.m2-mg-candle .flame{top:auto; bottom:calc(var(--h) + 3px); width:16px; height:28px; transform-origin:50% 100%;}
.m2-mg-candle .halo{position:absolute; left:50%; bottom:calc(var(--h) - 10px); width:70px; height:70px; margin-left:-35px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,200,90,0.45), transparent 65%); opacity:0; transition:opacity .25s; pointer-events:none;}
.m2-mg-candle.lit .halo{opacity:1; animation:m2-mg-halo 1.2s infinite alternate;}
.m2-mg-candle.gust .flame{animation:m2-mg-gust .12s infinite alternate !important;}
.m2-mg-candle.gust .halo{opacity:.5;}
.m2-mg-candle:not(.lit)::before{content:none;}
.m2-mg-candle:not(.lit) b{filter:brightness(0.7);}
.m2-mg-candle:not(.lit)::after{content:'눌러서 켜기'; position:absolute; left:50%; top:0; transform:translateX(-50%); white-space:nowrap; font-size:10px; font-weight:800; color:#ffd36b; animation:m2-mg-blink .7s infinite alternate;}
.m2-mg-candle .smoke{position:absolute; left:50%; bottom:calc(var(--h) + 4px); width:10px; height:10px; margin-left:-5px; border-radius:50%; background:rgba(200,200,210,0.6); filter:blur(2px); animation:m2-mg-smoke 1.3s forwards;}
@keyframes m2-mg-halo{to{transform:scale(1.12); opacity:.8;}}
@keyframes m2-mg-gust{from{transform:skewX(-22deg) scale(0.9, 0.8);} to{transform:skewX(18deg) scale(0.8, 0.7);}}
@keyframes m2-mg-smoke{to{transform:translate(8px, -50px) scale(2.6); opacity:0;}}
@keyframes m2-mg-blink{to{opacity:.35;}}

/* ----- 조판: 신문 지면 + 쇠 활자 ----- */
.m2-mg-paper{position:relative; width:100%; padding:10px 14px 12px; background:linear-gradient(#f4ecd9, #e6dbc1); color:#1d1f29;
  border:3px solid #1d1f29; border-radius:6px; box-shadow:0 8px 18px rgba(0,0,0,0.45); overflow:hidden;}
.m2-mg-paper .mast{font-family:'Times New Roman', serif; font-size:24px; font-weight:900; letter-spacing:3px; border-bottom:3px double #1d1f29; padding-bottom:4px; margin-bottom:8px;}
.m2-mg-paper .mast small{display:block; font-family:var(--font); font-size:10px; letter-spacing:0; font-weight:700; color:#6a604c;}
.m2-mg-paper .lines{display:grid; gap:5px; margin-top:10px;}
.m2-mg-paper .lines i{height:5px; background:#cfc3a6; border-radius:3px;}
.m2-mg-paper .lines i:nth-child(2){width:86%;} .m2-mg-paper .lines i:nth-child(3){width:64%;}
.m2-mg-headline{padding:4px 0; background:none; border:0; border-radius:0;}
.m2-mg-headline .slot{min-width:58px; min-height:30px; padding:2px 8px; font-size:19px; font-family:'Times New Roman', var(--font); border:2px dashed #b3a788; border-radius:4px;}
.m2-mg-headline .slot.on{border-color:transparent; animation:m2-mg-stamp .25s;}
@keyframes m2-mg-stamp{from{transform:scale(1.5); opacity:0;} to{transform:scale(1); opacity:1;}}
.m2-mg-paper .roller{position:absolute; top:0; bottom:0; left:-30%; width:26%; pointer-events:none; opacity:0;
  background:linear-gradient(90deg, transparent, rgba(20,20,30,0.35) 40%, rgba(20,20,30,0.6) 50%, rgba(20,20,30,0.35) 60%, transparent);}
.m2-mg-paper.printing .roller{opacity:1; animation:m2-mg-roll .65s ease-in-out forwards;}
.m2-mg-paper.printed{animation:m2-mg-out .5s cubic-bezier(.3,1.3,.5,1);}
.m2-mg-paper.printed .slot{color:#000; text-shadow:0 0 1px #000;}
@keyframes m2-mg-roll{to{left:110%;}}
@keyframes m2-mg-out{40%{transform:translateY(-8px) rotate(-2deg) scale(1.04);} 100%{transform:none;}}
.m2-mg-tile{padding:9px 14px; font-family:'Times New Roman', var(--font); font-size:16px; color:#2b2b2b;
  background:linear-gradient(#d9dde3, #9aa1ab); border:2px solid #4a4f58; border-radius:5px;
  box-shadow:0 4px 0 #4a4f58, inset 0 1px 0 #fff; transition:transform .1s;}
.m2-mg-tile:hover:not(:disabled){transform:translateY(-3px);}
.m2-mg-tile:disabled{opacity:0; transform:scale(0.6); transition:opacity .2s, transform .2s;}
.m2-mg-tile.nope{background:linear-gradient(#ffb3b3, #d06060);}
.m2-mg-flytype{position:absolute; z-index:25; padding:9px 14px; font-family:'Times New Roman', var(--font); font-size:16px; font-weight:800; color:#2b2b2b; background:linear-gradient(#d9dde3, #9aa1ab); border:2px solid #4a4f58; border-radius:5px; pointer-events:none;}
.m2-mg-lever{position:relative; display:flex; align-items:center; gap:12px; padding:12px 22px 12px 54px; font-family:var(--font); font-size:17px; font-weight:900; color:#fff; cursor:pointer;
  background:linear-gradient(#4a5160, #2c313b); border:3px solid #1d1f29; border-radius:12px; box-shadow:0 6px 0 #14161c; animation:m2-mt-in .3s cubic-bezier(.2,1.3,.4,1);}
.m2-mg-lever .arm{position:absolute; left:16px; top:50%; width:8px; height:34px; margin-top:-30px; background:#c9ccd2; border-radius:4px; transform-origin:50% 100%; transform:rotate(-30deg); transition:transform .3s cubic-bezier(.3,1.5,.5,1);}
.m2-mg-lever .arm::before{content:''; position:absolute; left:50%; top:-8px; width:16px; height:16px; margin-left:-8px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #ff8a8a, #c41c1c);}
.m2-mg-lever.pulled .arm{transform:rotate(40deg);}
.m2-mg-lever.pulled{transform:translateY(4px); box-shadow:0 2px 0 #14161c;}

/* ----- 서류 찾기: 서랍 + 서류철 ----- */
.m2-mg-ticket{display:flex; align-items:center; justify-content:space-between; width:100%;}
.m2-mg-ticket .slip{padding:8px 14px; background:#fff8e1; color:#1d1f29; border:2px solid #1d1f29; border-radius:4px; transform:rotate(-2deg); box-shadow:0 4px 0 rgba(0,0,0,0.3); font-weight:800;}
.m2-mg-ticket .slip b{font-family:'Courier New', monospace; font-size:24px; color:#c41c1c; margin-left:6px;}
.m2-mg-ticket .dots{display:flex; gap:6px;}
.m2-mg-ticket .dots i{width:14px; height:14px; border-radius:50%; background:#2a3240; border:2px solid #1d1f29; transition:background .2s, box-shadow .2s;}
.m2-mg-ticket .dots i.on{background:#5fe08a; box-shadow:0 0 10px #5fe08a;}
.m2-mg-drawer{position:relative; width:100%; padding:14px 12px 22px; border-radius:10px; background:linear-gradient(#5c6575, #3c4350); border:3px solid #1d1f29; box-shadow:inset 0 6px 12px rgba(0,0,0,0.45);}
.m2-mg-drawer .handle{position:absolute; left:50%; bottom:5px; width:60px; height:9px; margin-left:-30px; border-radius:5px; background:linear-gradient(#d9dde3, #8b919b); border:2px solid #1d1f29;}
.m2-mg-drawer.open{animation:m2-mg-drawer .35s cubic-bezier(.3,1.3,.5,1);}
@keyframes m2-mg-drawer{from{transform:translateY(-14px) scaleY(0.9); opacity:.4;}}
.m2-mg-files{gap:7px 8px;}
.m2-mg-file{position:relative; height:58px; padding:0; background:none; border:0; cursor:pointer; animation:m2-mg-fin .3s backwards; transition:transform .15s;}
.m2-mg-file .paper{position:absolute; left:0; right:0; top:12px; bottom:0; border-radius:3px 3px 5px 5px; background:linear-gradient(#e7c98b, #c9a15c); border:2px solid #1d1f29; box-shadow:0 3px 0 rgba(0,0,0,0.3);}
.m2-mg-file .tab{position:absolute; top:0; z-index:1; padding:1px 7px; font-style:normal; font-family:Orbitron, var(--font); font-size:12px; font-weight:700; color:#1d1f29; border:2px solid #1d1f29; border-bottom:0; border-radius:5px 5px 0 0;}
.m2-mg-file:hover{transform:translateY(-5px); background:none;}
.m2-mg-file.right{transform:translateY(-16px) scale(1.08); z-index:2;}
.m2-mg-file.right::after{content:'확인'; position:absolute; left:50%; top:26px; transform:translateX(-50%) rotate(-12deg); padding:1px 8px; border:3px solid #1f9d55; border-radius:6px; color:#1f9d55; font-weight:900; font-size:14px; animation:m2-mg-stamp .25s;}
.m2-mg-file.wrong .paper{background:linear-gradient(#ffb3b3, #d06060);}
@keyframes m2-mg-fin{from{transform:translateY(16px); opacity:0;}}

/* ----- 배전반 (정전 복구) ----- */
.m2-fix{background:linear-gradient(#59606e, #363b47); padding:0 22px 18px; overflow:hidden; animation:m2-mt-in .3s cubic-bezier(.2,1.3,.4,1);}
.m2-fix::before{content:''; display:block; height:14px; margin:0 -22px 4px; background:repeating-linear-gradient(-45deg, #f2c230 0 14px, #1d1f29 14px 28px);}
.m2-lever{width:46px; height:128px; padding-top:22px; background:linear-gradient(#1a1d24, #2a2e38); box-shadow:inset 0 4px 10px rgba(0,0,0,0.6);}
.m2-lever::before{content:''; position:absolute; left:50%; top:6px; width:14px; height:14px; margin-left:-7px; border-radius:50%; background:#5a1010; box-shadow:inset 0 2px 3px rgba(0,0,0,0.5); transition:background .2s, box-shadow .2s;}
.m2-lever.on::before{background:#5fe08a; box-shadow:0 0 12px #5fe08a, inset 0 -2px 3px rgba(0,0,0,0.3);}
.m2-lever::after{content:''; position:absolute; left:50%; top:30px; bottom:8px; width:6px; margin-left:-3px; border-radius:3px; background:#0b0d12;}
.m2-lever i{z-index:1; height:30px; bottom:10px; border-radius:6px; transition:bottom .18s cubic-bezier(.3,1.6,.5,1); box-shadow:0 4px 0 rgba(0,0,0,0.4), inset 0 2px 0 rgba(255,255,255,0.3);}
.m2-lever.on i{bottom:62px;}
.m2-fix.restored .m2-lever::before{animation:m2-mg-blink .15s 3 alternate;}

/* 호외 신문 (다음날 낮) */
.m2-news{position:absolute; inset:0; z-index:6; display:grid; place-items:center; padding:14px; background:rgba(4,4,12,0.45); cursor:pointer;}
.m2-news-paper{
  width:min(100%, 460px);
  padding:16px 20px 12px;
  color:#1d1f29;
  text-align:center;
  background:linear-gradient(180deg, #f3ead6, #e3d6b8);
  border:3px solid #1d1f29;
  border-radius:6px;
  box-shadow:0 14px 40px rgba(0,0,0,0.6);
  animation:m2-news-in .7s cubic-bezier(.2,1.2,.4,1);
}
@keyframes m2-news-in{from{transform:rotate(-540deg) scale(0.1); opacity:0;} to{transform:rotate(-2deg) scale(1); opacity:1;}}
.m2-news-mast{display:flex; justify-content:space-between; align-items:baseline; padding-bottom:6px; margin-bottom:10px; border-bottom:3px double #1d1f29;}
.m2-news-mast span{font-family:'Noto Sans KR', var(--font); font-size:24px; font-weight:900; letter-spacing:2px;}
.m2-news-mast small{font-size:12px; font-weight:800; color:#a0281e;}
.m2-news-paper h3{margin:0 0 8px; font-size:24px; font-weight:900; line-height:1.3;}
.m2-news-paper h3 em{font-style:normal; color:#a0281e;}
.m2-news-paper p{margin:0 0 8px; font-size:13px; color:#3b3428;}
.m2-news-close{font-size:11px; color:#7a705e;}
/* (미니게임 개선 보정) 배전반 줄무늬는 flex 항목이라 폭이 0이 됐음 / 관 뚜껑이 관 몸통 뒤에 깔렸음 / "관 열기"가 구덩이 밖으로 잘렸음 */
.m2-fix::before{align-self:stretch;}
.m2-mg-coffin{bottom:14px;}
.m2-mg-coffin .lid{z-index:2;}
.m2-mg-coffin small{bottom:auto; top:-24px; z-index:3; padding:2px 8px; border-radius:6px; background:rgba(0,0,0,0.55); animation:m2-mg-blink .7s infinite alternate;}
.m2-mg-coffin.open small{display:none;}
.m2-mg-candle:not(.lit)::after{content:'켜기!'; top:-4px;}
/* 개발자 모드: 게임 중 직업 바꾸기 줄 */
.m2-dev-row{display:flex; flex-wrap:wrap; gap:6px; align-items:center; width:100%;}
.m2-dev-row.hidden{display:none;}

/* ----- 공중전화 (요원) ----- */
.m2-mg-box[data-theme="phone"]{--mg-glow:rgba(255,90,90,0.35); background:linear-gradient(180deg, #2a1c22, #120c10);}
.m2-mg-note{padding:8px 16px; background:#fff8e1; color:#1d1f29; border:2px solid #1d1f29; border-radius:4px; transform:rotate(2deg); box-shadow:0 4px 0 rgba(0,0,0,0.35);}
.m2-mg-note small{display:block; font-size:11px; font-weight:800; color:#7a6a4a;}
.m2-mg-note b{font-family:'Courier New', monospace; font-size:28px; letter-spacing:3px; color:#c41c1c;}
.m2-mg-phone{width:250px; padding:14px; border-radius:18px; background:linear-gradient(#d0443a, #8e1d17); border:4px solid #1d1f29;
  box-shadow:0 8px 0 #5a0e0a, 0 14px 24px rgba(0,0,0,0.5), inset 0 2px 0 rgba(255,255,255,0.25);}
.m2-mg-lcd{display:flex; align-items:center; justify-content:center; gap:2px; height:46px; margin-bottom:12px; border-radius:8px; border:3px solid #1d1f29;
  background:radial-gradient(ellipse, #12321f, #071a0f); font-family:Orbitron, 'Courier New', monospace; font-size:24px; letter-spacing:3px; color:#5dff9b; text-shadow:0 0 8px #5dff9b;}
.m2-mg-lcd .caret{width:10px; height:24px; background:#5dff9b; opacity:.7; animation:m2-mg-blink .5s infinite alternate;}
.m2-mg-lcd.bad{background:radial-gradient(ellipse, #3a1010, #1a0606); color:#ff6b6b; text-shadow:0 0 8px #ff6b6b;}
.m2-mg-lcd.bad .caret{background:#ff6b6b;}
.m2-mg-lcd.ring{animation:m2-mg-ring .15s infinite alternate; font-size:18px;}
.m2-mg-lcd.ring .caret{display:none;}
@keyframes m2-mg-ring{to{transform:translateX(3px) rotate(1deg);}}
.m2-mg-pad{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;}
.m2-mg-key{height:42px; border-radius:10px; cursor:pointer; font-family:Orbitron, var(--font); font-size:19px; font-weight:800; color:#1d1f29;
  background:linear-gradient(#f1f3f6, #b9bfc8); border:3px solid #1d1f29; box-shadow:0 4px 0 #4a4f58; transition:transform .06s, box-shadow .06s;}
.m2-mg-key.fn{font-size:16px; background:linear-gradient(#ffd27a, #d99a2b);}
.m2-mg-key:active, .m2-mg-key.hit{transform:translateY(3px); box-shadow:0 1px 0 #4a4f58;}

/* ===== 공통 임무 (2026-10-20) ===== */
.m2-taskhud{position:absolute; left:10px; top:54px; z-index:3; width:230px; padding:9px 10px; border-radius:12px;
  background:rgba(10,14,24,0.82); border:1px solid rgba(255,255,255,0.12); box-shadow:0 6px 18px rgba(0,0,0,0.4); font-size:12px; color:#dfe7f2; pointer-events:none;}
.m2-taskhud.hidden{display:none;}
.m2-task-bar{display:flex; align-items:center; gap:6px; font-weight:800;}
.m2-task-bar i{flex:1; height:10px; border-radius:6px; background:#1b2333; overflow:hidden; border:1px solid #0b0f17;}
.m2-task-bar i b{display:block; height:100%; background:linear-gradient(90deg, #3fd47a, #8dffb3); box-shadow:0 0 8px #3fd47a; transition:width .4s;}
.m2-task-bar em{font-style:normal; font-family:Orbitron, var(--font); font-size:11px; color:#8dffb3;}
.m2-task-title{margin:8px 0 4px; font-weight:800; color:#ffd65a;}
.m2-task-title small{color:#ff8a8a; font-weight:700; margin-left:4px;}
.m2-task{padding:2px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.m2-task b{color:#fff; margin:0 3px;}
.m2-task.done{color:#6f7d8f; text-decoration:line-through;}
.m2-task.done b{color:#6f7d8f;}
@media (max-width:640px){ .m2-taskhud{width:170px; font-size:10.5px; top:46px;} }

/* 결과 화면 */
.m2-end{position:absolute; inset:0; z-index:9; display:grid; place-items:center; padding:14px; background:radial-gradient(circle, color-mix(in srgb, var(--wc) 25%, rgba(4,4,12,0.85)), rgba(4,4,12,0.92));}
.m2-end.hidden{display:none;}
.m2-end-box{width:min(100%, 520px); text-align:center; animation:m2-mt-in .5s cubic-bezier(.2,1.3,.4,1);}
.m2-end-you{margin:0; font-size:18px; font-weight:900; color:#fff; letter-spacing:2px;}
.m2-end-title{margin:4px 0 6px; font-size:46px; font-weight:900; color:var(--wc); text-shadow:0 4px 0 #1d1f29, 0 0 30px var(--wc); animation:m2-end-pop .7s .15s cubic-bezier(.2,1.5,.4,1) backwards;}
@keyframes m2-end-pop{from{transform:scale(2.2); opacity:0;}}
.m2-end-why{margin:0 0 16px; color:#dfe7f2; font-weight:700;}
.m2-end-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px;}
.m2-end-p{position:relative; padding:8px 10px; border-radius:10px; background:rgba(16,20,32,0.9); border:2px solid color-mix(in srgb, var(--tc) 50%, #1d1f29); text-align:left;}
.m2-end-p b{display:block; color:#fff; font-size:14px;}
.m2-end-p span{color:var(--tc); font-size:12px; font-weight:800;}
.m2-end-p i{position:absolute; right:8px; top:8px; font-style:normal;}
.m2-end-p.win{box-shadow:0 0 14px color-mix(in srgb, var(--tc) 60%, transparent);}
.m2-end-p.dead{opacity:.6;}
.m2-end-hint{margin-top:14px; color:var(--sub); font-size:12px;}

/* 임무 미니게임 공통 */
.m2-mg-box[data-theme="task"]{--mg-glow:rgba(255,214,90,0.3); background:linear-gradient(180deg, #23262f, #111319);}
.m2-tk-note{font-size:13px; font-weight:700; color:#ffd65a;}
.m2-tk-tank{position:relative; width:120px; height:150px; border-radius:14px; overflow:hidden; background:#0b0f14; border:4px solid #1d1f29; box-shadow:inset 0 0 0 3px #3a4252;}
.m2-tk-tank .liquid{position:absolute; left:0; right:0; bottom:0; height:calc(var(--lv, 0) * 100%); background:linear-gradient(#7fd3ff, #2a7fd0);}
.m2-tk-tank.fuel .liquid{background:linear-gradient(#ffcf5a, #d9781e);}
.m2-tk-tank .band{position:absolute; left:0; right:0; bottom:calc(var(--lo) * 100%); height:calc((var(--hi) - var(--lo)) * 100%); border-top:2px dashed #5fe08a; border-bottom:2px dashed #5fe08a; background:rgba(95,224,138,0.18);}
.m2-tk-tank span{position:absolute; left:50%; top:8px; transform:translateX(-50%); font-size:22px;}
.m2-tk-dials{display:flex; gap:16px;}
.m2-tk-dial{position:relative; width:84px; height:84px; border-radius:50%; cursor:pointer; background:radial-gradient(circle at 35% 30%, #5a6170, #2a2e38); border:4px solid #1d1f29; box-shadow:0 5px 0 #14161c;}
.m2-tk-dial .mark{position:absolute; left:50%; top:50%; width:4px; height:44px; margin:-44px 0 0 -2px; transform-origin:50% 100%; transform:rotate(var(--a)); background:linear-gradient(#ff4d4d 0 10px, transparent 10px);}
.m2-tk-dial .knob{position:absolute; inset:14px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #dfe3ea, #8b919b); transition:transform .15s;}
.m2-tk-dial .knob::after{content:''; position:absolute; left:50%; top:3px; width:6px; height:20px; margin-left:-3px; border-radius:3px; background:#1d1f29;}
.m2-tk-dial.ok{box-shadow:0 5px 0 #14161c, 0 0 16px #5fe08a; border-color:#1f9d55;}
.m2-tk-lcd{padding:8px 14px; border-radius:8px; background:#071a0f; color:#5dff9b; font-family:Orbitron, var(--font); font-size:13px; border:2px solid #1d1f29;}
.m2-tk-lcd.bad{color:#ff6b6b; background:#1a0606;}
.m2-tk-lcd.ok{color:#5dff9b; box-shadow:0 0 14px #5dff9b;}
.m2-tk-reader{position:relative; width:100%; height:86px; border-radius:12px; background:linear-gradient(#4a5160, #2c313b); border:3px solid #1d1f29;}
.m2-tk-reader .slot{position:absolute; left:10px; right:10px; top:50%; height:8px; margin-top:-4px; border-radius:4px; background:#0b0d12;}
.m2-tk-card{position:absolute; left:6px; top:12px; width:120px; height:60px; border-radius:8px; display:grid; place-items:center; cursor:grab; touch-action:none; user-select:none;
  background:linear-gradient(135deg, #e9f2ff, #9fc3f0); border:3px solid #1d1f29; color:#1d1f29; font-size:12px; font-weight:800; box-shadow:0 5px 10px rgba(0,0,0,0.4);}
.m2-tk-wires{position:relative; width:100%; height:220px; border-radius:12px; background:#1a1d24; border:3px solid #1d1f29; display:flex; justify-content:space-between; padding:14px 10px;}
.m2-tk-wires svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
.m2-tk-wires .col{display:flex; flex-direction:column; justify-content:space-between; z-index:1;}
.m2-tk-wires .end{width:46px; height:30px; border-radius:6px; cursor:pointer; background:var(--c); border:3px solid #1d1f29; box-shadow:0 3px 0 rgba(0,0,0,0.5);}
.m2-tk-wires .end.sel{outline:3px solid #fff; outline-offset:2px;}
.m2-tk-wires .end.on{filter:brightness(1.2); box-shadow:0 0 12px var(--c);}
.m2-tk-area{position:relative; width:100%; height:210px; border-radius:12px; overflow:hidden; background:repeating-linear-gradient(90deg, #6b4a2f 0 40px, #5e4128 40px 42px); border:3px solid #1d1f29;}
.m2-tk-area.leaf{background:radial-gradient(circle at 30% 30%, #4d6b3a, #2e4424);}
.m2-tk-bin{position:absolute; right:10px; bottom:6px; font-size:46px; z-index:2;}
.m2-tk-bin.gulp{animation:m2-mg-push .25s;}
.m2-tk-item{position:absolute; padding:0; border:0; background:none; font-size:34px; cursor:pointer; filter:drop-shadow(0 3px 2px rgba(0,0,0,0.5)); transition:filter .1s;}
.m2-tk-item:hover{filter:drop-shadow(0 0 8px #fff);}
.m2-tk-hymn{display:grid; grid-template-columns:repeat(3, 72px); gap:10px;}
.m2-tk-hymn .k{height:60px; border-radius:10px; cursor:pointer; font-family:'Times New Roman', serif; font-size:26px; font-weight:900; color:#3a2a10;
  background:linear-gradient(#f4ecd9, #d8c8a4); border:3px solid #1d1f29; box-shadow:0 4px 0 #6b5a3a; transition:background .1s;}
.m2-tk-keys{display:flex; gap:4px; padding:10px; border-radius:10px; background:#1d1f29;}
.m2-tk-keys .k{width:40px; height:130px; border-radius:0 0 8px 8px; cursor:pointer; background:linear-gradient(#fff, #dfe3ea); border:2px solid #1d1f29; transition:background .1s;}
.m2-tk-hymn .k.lit, .m2-tk-keys .k.lit{background:linear-gradient(#fff3b0, #ffd23f); box-shadow:0 0 18px #ffd23f;}

/* 임무 칸: 왼쪽 직업 카드 아래, 왼쪽 정렬. 장소 이름은 아이콘 대신 테두리 칸(조이포커 포인트×배수 칸처럼) */
.m2-side .m2-taskhud{position:static; width:auto; text-align:left; padding:12px 14px; border-radius:16px;
  background:linear-gradient(180deg, rgba(20,22,32,0.92), rgba(10,12,18,0.92)); border:1px solid rgba(255,255,255,0.12); font-size:13px;}
.m2-taskhud{text-align:left;}
.m2-task-title{text-align:left;}
.m2-task{display:flex; align-items:center; gap:8px; padding:3px 0;}
.m2-task span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;}
.m2-task .m2-task-place{flex-shrink:0; min-width:50px; margin:0; padding:2px 8px; text-align:center; border-radius:8px; font-size:12px; font-weight:800;
  color:#ffd65a; background:rgba(255,214,90,0.12); border:2px solid rgba(255,214,90,0.55);}
.m2-task.done .m2-task-place{color:#6f7d8f; background:transparent; border-color:#3a4252;}
.m2-task.done span{text-decoration:line-through;}
.m2-task.done{text-decoration:none;}

/* 임무 개편 (2026-10-20): 종류 표시 + 약품 분류 */
.m2-task i{flex-shrink:0; font-style:normal; font-size:10.5px; font-weight:800; padding:1px 6px; border-radius:6px; color:#1d1f29; background:#ffb36b;}
.m2-task.multi i{background:#8ecae6;}
.m2-task span small{color:#8ecae6; font-weight:800; margin-left:2px;}
.m2-task.multi .m2-task-place{color:#8ecae6; background:rgba(142,202,230,0.12); border-color:rgba(142,202,230,0.6);}
.m2-tk-wires{min-height:220px; height:auto;}
.m2-tk-wires .col{gap:10px;}
.m2-tk-sort{display:grid; place-items:center; width:100%; height:110px; border-radius:12px; background:linear-gradient(#e9edf3, #c9d0da); border:3px solid #1d1f29;}
.m2-tk-pill{padding:10px 22px; border-radius:999px; font-weight:900; font-size:16px; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,0.35);
  background:linear-gradient(90deg, var(--c) 50%, #f4f6fa 50%); border:3px solid #1d1f29; box-shadow:0 5px 0 rgba(0,0,0,0.3);}
.m2-tk-pill.in{animation:m2-mg-stamp .25s;}
.m2-tk-bins{display:flex; gap:10px; width:100%;}
.m2-tk-binbtn{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 6px; cursor:pointer; font-weight:800; color:#1d1f29;
  background:linear-gradient(#f1f3f6, #b9bfc8); border:3px solid #1d1f29; border-radius:10px; box-shadow:0 4px 0 #4a4f58;}
.m2-tk-binbtn i{width:36px; height:16px; border-radius:8px; border:2px solid #1d1f29;}
.m2-tk-binbtn:active{transform:translateY(3px); box-shadow:0 1px 0 #4a4f58;}
.m2-tk-pill{color:#1d1f29; text-shadow:0 0 4px #fff, 0 0 2px #fff;}

/* 시작 연출: 나 + 마피아팀 동료 나란히 (2026-10-20, 구스구스덕식). 예전 .m2-intro-me 절대 위치를 줄(.m2-intro-crew)로 옮김 */
.m2-intro-crew{position:absolute !important; left:50%; bottom:clamp(10px, 4vh, 36px); transform:translateX(-50%);
  display:flex; align-items:flex-end; justify-content:center; gap:clamp(14px, 3vw, 40px);}
.m2-intro-crew .m2-intro-me{position:relative !important; left:auto; bottom:auto; transform:none;}
.m2-intro-crew .m2-intro-me.mate .m2-intro-fig{--w:clamp(80px, 13vh, 120px);}
.m2-intro-crew .m2-intro-me.mate .m2-intro-fig .m2-hfig{width:var(--w); height:auto; animation:m2-bob 1.6s ease-in-out infinite;}
.m2-intro-crew .m2-intro-me.mate .m2-intro-nick{color:#ff8a8a;}
.m2-intro-crew.team .m2-intro-me:not(.mate) .m2-intro-nick{color:#ff8a8a;}
.m2-intro .m2-intro-me.mate{opacity:0;}
.m2-intro.landed .m2-intro-me.mate{animation:m2-up .5s ease-out both;}
/* (보정) #introCrew는 .m2-intro의 직접 자식이라 ".m2-intro > *{opacity:0}"에 걸려 통째로 안 보였음 → 줄 자체는 보이게,
   안의 나/동료가 각각 떠오름. 내 그림 떠오르기(m2-rise)는 translateX(-50%)가 들어 있어 줄 안에선 옆으로 밀려서 따로 */
.m2-intro .m2-intro-crew{opacity:1;}
.m2-intro.play .m2-intro-crew .m2-intro-me:not(.mate){animation:m2-up .7s 1s cubic-bezier(.2,.9,.3,1.2) both;}
.m2-intro.play .m2-intro-crew .m2-intro-me.mate{animation:none; opacity:0;}
.m2-intro.play.landed .m2-intro-crew .m2-intro-me.mate{animation:m2-up .5s ease-out both;}

/* ===== 요원 지령 결과: 기밀 서류 (#intelCard) ===== */
.m2-intel{position:absolute; inset:0; z-index:7; display:grid; place-items:center; padding:14px; cursor:pointer;
  background:radial-gradient(circle, rgba(10,20,40,0.55), rgba(2,4,10,0.85));}
.m2-intel.hidden{display:none;}
.m2-intel.play{animation:m2-intel-bg .35s ease-out both;}
@keyframes m2-intel-bg{from{opacity:0;}}
.m2-intel-file{position:relative; width:min(100%, 460px); padding:22px 22px 18px; border-radius:6px 14px 14px 14px;
  background:linear-gradient(160deg, #e8d7ae, #d1b983 60%, #c2a56b); color:#2a1f10; border:3px solid #1d1f29;
  box-shadow:0 18px 40px rgba(0,0,0,0.6), inset 0 0 40px rgba(120,80,20,0.25);}
.m2-intel.play .m2-intel-file{animation:m2-intel-in .6s cubic-bezier(.2,1.2,.4,1) both;}
@keyframes m2-intel-in{from{transform:translateY(70px) rotate(-8deg) scale(.85); opacity:0;} to{transform:rotate(-1.5deg);}}
.m2-intel-tab{position:absolute; left:-3px; top:-28px; padding:5px 14px; border-radius:8px 8px 0 0; border:3px solid #1d1f29; border-bottom:0;
  background:#d1b983; font-size:12px; font-weight:900; letter-spacing:1px;}
.m2-intel-head{display:flex; justify-content:space-between; align-items:center; padding-bottom:8px; margin-bottom:12px; border-bottom:2px dashed rgba(42,31,16,0.5);
  font-family:'Courier New', monospace; font-weight:900; letter-spacing:2px;}
.m2-intel-head b{font-size:13px; color:#7a1a1a;}
.m2-intel-body{display:flex; gap:16px; align-items:center;}
.m2-intel-photo{position:relative; flex-shrink:0; width:130px; height:150px; display:grid; place-items:end center; overflow:hidden;
  background:linear-gradient(#3a4252, #1e232d); border:4px solid #f4ecd9; box-shadow:0 4px 0 rgba(0,0,0,0.3); transform:rotate(2deg);}
.m2-intel-photo .m2-fig{--w:118px; margin-bottom:-6px;}
.m2-intel.play .m2-intel-photo{animation:m2-intel-photo .5s .35s cubic-bezier(.2,1.3,.4,1) both;}
@keyframes m2-intel-photo{from{transform:rotate(14deg) scale(.6); opacity:0;}}
.m2-intel-dead{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-14deg); padding:2px 10px; font-style:normal; font-weight:900; font-size:18px;
  color:#fff; background:rgba(160,20,20,0.85); border:2px solid #fff;}
.m2-intel-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.m2-intel-info small{font-size:11px; font-weight:900; letter-spacing:2px; color:#7a6a4a;}
.m2-intel-nick{font-size:24px; font-weight:900; margin-bottom:6px;}
.m2-intel-role{font-style:normal; font-size:34px; font-weight:900; color:#7a1a1a; line-height:1.1;}
.m2-intel.play .m2-intel-role{animation:m2-intel-reveal .9s 1.1s ease-out both;}
@keyframes m2-intel-reveal{0%{filter:blur(10px); opacity:0; letter-spacing:12px;} 60%{filter:blur(2px); opacity:1;} 100%{filter:none; letter-spacing:0;}}
.m2-intel-info p{margin:10px 0 0; font-size:12px; font-weight:700; color:#5a4a2a; line-height:1.5;}
.m2-intel-stamp{position:absolute; right:18px; top:26px; padding:4px 14px; border:4px solid #b8241f; border-radius:8px; color:#b8241f;
  font-size:28px; font-weight:900; letter-spacing:4px; transform:rotate(14deg); opacity:.85; mix-blend-mode:multiply;}
.m2-intel.play .m2-intel-stamp{animation:m2-intel-stamp .35s .7s cubic-bezier(.3,1.6,.5,1) both;}
@keyframes m2-intel-stamp{from{transform:rotate(14deg) scale(2.6); opacity:0;} to{transform:rotate(14deg) scale(1); opacity:.85;}}
.m2-intel-close{display:block; margin-top:12px; text-align:right; font-size:11px; font-weight:700; color:#7a6a4a;}
@media (max-width:640px){
  .m2-intel-photo{width:100px; height:120px;} .m2-intel-photo .m2-fig{--w:90px;}
  .m2-intel-role{font-size:26px;} .m2-intel-nick{font-size:19px;} .m2-intel-stamp{font-size:20px;}
}
.m2-intel-stamp{top:auto; bottom:40px; right:20px;}

/* ===== 결과 화면 v2: 구스구스덕식 (2026-10-20) ===== */
.m2-end{display:block; padding:0; overflow:hidden; background:radial-gradient(ellipse at 50% 30%, #1d2230, #07080d 75%);}
.m2-end-spot{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 30% 90% at 50% -8%, color-mix(in srgb, var(--wc) 45%, rgba(255,255,255,0.35)) 0%, transparent 70%),
             radial-gradient(ellipse 55% 26% at 50% 100%, color-mix(in srgb, var(--wc) 35%, rgba(255,255,255,0.25)) 0%, transparent 72%);
  animation:m2-end-light 1s ease-out both;}
@keyframes m2-end-light{from{opacity:0;} 30%{opacity:1; filter:brightness(1.8);} to{opacity:1;}}
.m2-end-floor{position:absolute; left:0; right:0; bottom:0; height:30%; background:linear-gradient(to top, rgba(0,0,0,0.45), transparent);}
.m2-end-center{position:absolute; left:50%; top:16%; transform:translateX(-50%); text-align:center; width:90%;}
.m2-end-you{margin:0; font-size:clamp(14px, 2vw, 18px); font-weight:900; color:#fff; letter-spacing:3px; animation:m2-up .5s .2s both;}
.m2-end-title{margin:4px 0 6px; font-size:clamp(40px, 8vw, 84px); font-weight:900; color:#fff;
  text-shadow:0 0 30px var(--wc), 0 6px 0 rgba(0,0,0,0.45); animation:m2-end-pop .7s .3s cubic-bezier(.2,1.5,.4,1) both;}
.m2-end-why{margin:0; color:#dfe7f2; font-weight:700; font-size:clamp(12px, 1.6vw, 15px); animation:m2-up .5s .7s both;}
/* 이긴 팀: 아래 한 줄 */
.m2-end-winners{position:absolute; left:50%; bottom:6%; transform:translateX(-50%); display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(4px, 1.4vw, 18px); width:96%;}
.m2-end-w{position:relative; display:flex; flex-direction:column; align-items:center; animation:m2-end-rise .55s var(--d) cubic-bezier(.2,1.3,.4,1) both;}
@keyframes m2-end-rise{from{transform:translateY(80px); opacity:0;}}
.m2-end-w .fig .m2-fig{--w:clamp(80px, 17vh, 150px); animation:m2-bob 1.6s ease-in-out infinite;}
.m2-end-w .tag{display:flex; flex-direction:column; align-items:center; margin-bottom:-6px; white-space:nowrap; text-shadow:0 2px 4px rgba(0,0,0,0.8);}
.m2-end-w.up .tag{margin-bottom:30px;}
.m2-end-losers::before{content:"패배"; font-size:11px; font-weight:900; letter-spacing:2px; color:#8a93a3; margin-bottom:2px;}
.m2-end-w .tag b{font-size:clamp(13px, 1.6vw, 17px); color:#fff;}
.m2-end-w .tag small{font-size:clamp(10px, 1.2vw, 12px); font-weight:800; color:color-mix(in srgb, var(--wc) 70%, #fff);}
.m2-end-w.dead .fig{filter:grayscale(.6) brightness(.7);}
/* 진 팀: 왼쪽 목록 */
.m2-end-losers{position:absolute; left:14px; top:14px; display:flex; flex-direction:column; gap:4px; opacity:.75; animation:m2-up .5s 1.2s both;}
.m2-end-l{display:flex; align-items:center; gap:6px; font-size:12px; color:#c9d1dd;}
.m2-end-l .fig{display:inline-block; width:26px;}
.m2-end-l .fig .m2-fig{--w:26px;}
.m2-end-l b{font-weight:800;}
.m2-end-l small{color:var(--tc); font-weight:700;}
.m2-end-l.dead{opacity:.55;}
.m2-end-l.dead b{text-decoration:line-through;}
.m2-end .m2-end-hint{position:absolute; right:14px; bottom:10px; margin:0; font-size:11px;}

/* ===== 임무 미니게임 2 (2026-10-20): 직업 능력과 다른, 이름대로의 일 ===== */
.m2-mg-press:disabled{opacity:.35; cursor:default; filter:grayscale(.6);}
/* 공중전화 수리 */
.m2-tk-pfix{position:relative; width:230px; height:190px; border-radius:14px; background:#14161c; border:4px solid #1d1f29; box-shadow:inset 0 0 0 3px #3a4252;}
.m2-tk-pfix .inner{position:absolute; inset:10px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:14px; border-radius:8px;
  background:repeating-linear-gradient(0deg, #232833 0 10px, #1f232c 10px 20px);}
.m2-tk-pfix .fuses{display:flex; gap:12px;}
.m2-tk-pfix .fuse{width:26px; height:58px; padding:0; cursor:pointer; border-radius:6px; border:3px solid #1d1f29;
  background:linear-gradient(90deg, #c9ced6 0 22%, #e9f6ff 22% 78%, #c9ced6 78%); box-shadow:inset 0 0 0 2px rgba(255,255,255,0.3); transition:transform .2s, opacity .2s;}
.m2-tk-pfix .fuse.burnt{background:linear-gradient(90deg, #6d6f74 0 22%, #2a1d18 22% 78%, #6d6f74 78%); box-shadow:inset 0 0 8px #000;}
.m2-tk-pfix .fuse.out{transform:translateY(-40px); opacity:0;}
.m2-tk-pfix .fuse.new{box-shadow:0 0 12px #5fe08a;}
.m2-tk-pfix .spareTray{display:flex; align-items:center; gap:8px; padding:4px 10px; border-radius:8px; background:rgba(255,255,255,0.06); font-size:11px; color:#9aa3b2;}
.m2-tk-pfix .spareTray .fuse{height:40px;}
.m2-tk-pfix .cover{position:absolute; inset:0; z-index:2; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  color:#fff; background:linear-gradient(160deg, #c8343a, #8e1f25); border:3px solid #1d1f29; transition:transform .7s cubic-bezier(.5,0,.8,.4), opacity .7s;}
.m2-tk-pfix .cover b{font-size:20px;}
.m2-tk-pfix .cover small{font-size:11px; opacity:.8;}
.m2-tk-pfix .cover.fall{transform:translateY(260px) rotate(24deg); opacity:0; pointer-events:none;}
.m2-tk-pfix .screw{position:absolute; width:28px; height:28px; padding:0; border-radius:50%; cursor:pointer; border:2px solid #1d1f29;
  background:radial-gradient(circle at 35% 30%, #f0f2f5, #8b919b); transform:rotate(var(--r, 0deg)) scale(calc(1 + var(--out, 0) * 0.1)); transition:transform .15s, opacity .25s;}
.m2-tk-pfix .screw::after{content:''; position:absolute; left:50%; top:4px; bottom:4px; width:4px; margin-left:-2px; border-radius:2px; background:#3a3f48;}
.m2-tk-pfix .screw.tl{left:8px; top:8px;} .m2-tk-pfix .screw.tr{right:8px; top:8px;}
.m2-tk-pfix .screw.bl{left:8px; bottom:8px;} .m2-tk-pfix .screw.br{right:8px; bottom:8px;}
.m2-tk-pfix .screw.gone{opacity:0; transform:translateY(-20px) scale(.5);}
.m2-tk-handset{padding:10px 18px; border-radius:10px; font-weight:900; cursor:pointer; color:#1d1f29; background:linear-gradient(#ffe27a, #e0a92e); border:3px solid #1d1f29; box-shadow:0 4px 0 #6b4e12; transition:transform .2s;}
.m2-tk-handset:disabled{opacity:.35; cursor:default;}
.m2-tk-handset.up{transform:translateY(-6px) rotate(-8deg);}
/* 책장 정리 */
.m2-tk-shelf{display:flex; align-items:flex-end; gap:3px; width:100%; height:122px; padding:8px 10px 0; box-sizing:border-box; border-radius:8px 8px 0 0;
  background:linear-gradient(#3b2a1c, #2a1d13); border:4px solid #1d1f29; border-bottom:12px solid #7a5232;}
.m2-tk-shelf .slot{flex:1; height:100%; display:flex; align-items:flex-end; justify-content:center; border-radius:4px 4px 0 0;}
.m2-tk-shelf .slot.gap{cursor:pointer; background:rgba(0,0,0,0.3); box-shadow:inset 0 0 0 2px rgba(255,214,90,0.35);}
.m2-tk-shelf .slot.gap:hover{box-shadow:inset 0 0 0 2px #ffd65a;}
.m2-tk-shelf .book, .m2-tk-cart .book{width:100%; max-width:34px; height:var(--h); padding:8px 0 0; border:2px solid #1d1f29; border-radius:3px; cursor:default;
  display:flex; align-items:flex-start; justify-content:center; font-weight:900; font-size:12px; font-family:Orbitron, var(--font);
  background:linear-gradient(90deg, rgba(0,0,0,0.25), transparent 25%, transparent 75%, rgba(0,0,0,0.25)), var(--c);}
.m2-tk-shelf .book span, .m2-tk-cart .book span{padding:1px 3px; border-radius:3px; background:#f4ecd9; color:#2a1f10;}
.m2-tk-shelf .book.slidein{animation:m2-tk-slide .25s ease-out;}
@keyframes m2-tk-slide{from{transform:translateY(-30px); opacity:0;}}
.m2-tk-cart{display:flex; justify-content:center; align-items:flex-end; gap:12px; width:100%; min-height:112px; padding:8px; box-sizing:border-box; border-radius:10px;
  background:linear-gradient(#5a6170, #3a404c); border:3px solid #1d1f29;}
.m2-tk-cart .book{width:34px; cursor:pointer; transform:rotate(var(--tilt)); transition:transform .15s, box-shadow .15s;}
.m2-tk-cart .book.sel{transform:translateY(-12px); box-shadow:0 0 0 3px #fff, 0 0 16px #ffd65a;}
/* 인쇄기 시험 인쇄 */
.m2-tk-printer{position:relative; width:100%; height:150px; box-sizing:border-box; overflow:hidden; border-radius:14px; background:linear-gradient(#d9dde4, #a9b0bb); border:4px solid #1d1f29;}
.m2-tk-printer .bays{position:absolute; left:12px; top:12px; display:flex; gap:8px;}
.m2-tk-printer .bay{width:44px; height:56px; padding:0; cursor:pointer; display:grid; place-items:center; border-radius:6px; background:#eef0f4; border:3px solid #1d1f29;}
.m2-tk-printer .bay i{width:24px; height:24px; display:grid; place-items:center; border-radius:50%; font-style:normal; font-weight:900; font-size:12px; color:var(--c); border:3px dashed var(--c);}
.m2-tk-printer .bay.full i{color:#fff; background:var(--c); border-style:solid; box-shadow:0 0 10px var(--c);}
.m2-tk-printer .feed{position:absolute; right:14px; top:30px; width:150px; height:22px; border-radius:6px; background:#2a2e38; border:3px solid #1d1f29; opacity:.35;}
.m2-tk-printer .feed.on{opacity:1;}
.m2-tk-printer .feed .zone{position:absolute; left:42%; width:16%; top:0; bottom:0; background:rgba(95,224,138,0.5);}
.m2-tk-printer .feed .guide{position:absolute; top:-5px; bottom:-5px; left:calc(var(--p, 0) * 100%); width:6px; margin-left:-3px; border-radius:3px; background:#ffd65a; box-shadow:0 0 8px #ffd65a;}
.m2-tk-printer .sheet{position:absolute; left:50%; bottom:-80px; width:130px; height:64px; margin-left:-65px; box-sizing:border-box; padding:7px; display:flex; flex-wrap:wrap; gap:5px; align-content:flex-start;
  background:#fff; border:2px solid #1d1f29; border-radius:3px; transition:bottom 1s ease-out;}
.m2-tk-printer .sheet i{width:24px; height:22px;}
.m2-tk-printer .sheet b{width:100%; font-family:Orbitron, var(--font); font-size:10px; color:#1d1f29;}
.m2-tk-printer .sheet.go{bottom:8px;}
.m2-tk-printer.printing{animation:m2-tk-buzz .1s linear infinite;}
@keyframes m2-tk-buzz{50%{transform:translate(1px, -1px);}}
.m2-tk-inks{display:flex; gap:10px; justify-content:center;}
.m2-tk-inks .ink{display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 10px; cursor:pointer; font-weight:900; color:#1d1f29;
  background:linear-gradient(#f1f3f6, #b9bfc8); border:3px solid #1d1f29; border-radius:8px; transition:transform .15s;}
.m2-tk-inks .ink i{width:22px; height:28px; border-radius:4px; border:2px solid #1d1f29;}
.m2-tk-inks .ink.sel{transform:translateY(-6px); box-shadow:0 0 0 3px #fff;}
.m2-tk-inks .ink.used{opacity:.25; cursor:default;}
/* 찬송가 번호판 */
.m2-tk-hymnrow{display:flex; gap:14px; width:100%; justify-content:center; align-items:center;}
.m2-tk-bulletin{display:flex; flex-direction:column; gap:3px; width:124px; padding:10px 12px; text-align:left; font-size:12px; color:#2a1f10; background:#f4ecd9; border-radius:4px; transform:rotate(-3deg); box-shadow:0 4px 0 rgba(0,0,0,0.3);}
.m2-tk-bulletin b{text-align:center; letter-spacing:6px; font-family:'Times New Roman', serif; font-size:16px;}
.m2-tk-bulletin small{text-align:center; color:#7a6a4a; border-bottom:1px solid #c9b78f; padding-bottom:3px;}
.m2-tk-bulletin em{font-style:normal; font-weight:900; color:#7a1a1a;}
.m2-tk-hboard{display:flex; flex-direction:column; gap:8px; padding:12px 16px; border-radius:10px; background:linear-gradient(#6b4a2f, #4a321f); border:4px solid #1d1f29; box-shadow:inset 0 0 0 3px #a07a4a;}
.m2-tk-hboard .row{display:flex; gap:5px; justify-content:center;}
.m2-tk-hboard i{width:30px; height:38px; display:grid; place-items:center; border-radius:4px; font-style:normal; font-family:'Times New Roman', serif; font-size:24px; font-weight:900; color:#2a1f10; background:rgba(0,0,0,0.35);}
.m2-tk-hboard i.cur{box-shadow:0 0 0 2px #ffd65a; animation:m2-tk-blink 1s infinite;}
@keyframes m2-tk-blink{50%{box-shadow:0 0 0 2px rgba(255,214,90,0.15);}}
.m2-tk-hboard i.on{background:#f4ecd9; animation:m2-tk-slide .2s ease-out;}
.m2-tk-tiles{position:relative; width:100%; height:132px; border-radius:10px; background:linear-gradient(#3a2a1c, #241910); border:3px solid #1d1f29;}
.m2-tk-tiles .tile{position:absolute; width:32px; height:40px; padding:0; cursor:pointer; border-radius:4px; border:2px solid #1d1f29; font-family:'Times New Roman', serif; font-size:22px; font-weight:900;
  color:#2a1f10; background:#f4ecd9; box-shadow:0 3px 0 rgba(0,0,0,0.4);}
.m2-tk-tiles .tile:hover{filter:brightness(1.08); box-shadow:0 0 10px #ffd65a;}
/* 무전 주파수 */
.m2-tk-radio{display:flex; flex-direction:column; gap:10px; width:100%; padding:12px; box-sizing:border-box; border-radius:14px; background:linear-gradient(#5a4632, #3a2c1f); border:4px solid #1d1f29;}
.m2-tk-radio .scale{position:relative; height:30px; border-radius:6px; border:3px solid #1d1f29; background:repeating-linear-gradient(90deg, #f4ecd9 0 2px, #e3d6b5 2px 18px);}
.m2-tk-radio .needle{position:absolute; top:-3px; bottom:-3px; width:4px; margin-left:-2px; background:#e8343a; box-shadow:0 0 6px #e8343a;}
.m2-tk-radio .screen{position:relative; height:46px; display:grid; place-items:center; overflow:hidden; border-radius:6px; background:#071a0f; border:3px solid #1d1f29;}
.m2-tk-radio .static{position:absolute; inset:0; animation:m2-tk-static .12s steps(2) infinite;
  background:repeating-radial-gradient(circle at 30% 40%, rgba(255,255,255,0.45) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(255,255,255,0.15) 0 1px, transparent 1px 3px);}
@keyframes m2-tk-static{50%{background-position:3px 2px, 0 1px;}}
.m2-tk-radio .freq{position:relative; font-family:Orbitron, var(--font); font-size:15px; color:#5dff9b; text-shadow:0 0 6px #5dff9b;}
.m2-tk-radio .meter{height:10px; overflow:hidden; border-radius:5px; background:#1d1f29;}
.m2-tk-radio .meter i{display:block; width:0; height:100%; background:linear-gradient(90deg, #ff6b6b, #ffd23f, #5fe08a);}
.m2-tk-radio.lock .screen{box-shadow:0 0 14px #5dff9b;}
.m2-tk-knob{display:grid; place-items:center; width:110px; height:110px; border-radius:50%; cursor:ew-resize; touch-action:none;
  background:radial-gradient(circle at 35% 30%, #5a6170, #2a2e38); border:4px solid #1d1f29; box-shadow:0 6px 0 #14161c;}
.m2-tk-knob i{position:relative; width:76px; height:76px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #dfe3ea, #8b919b);}
.m2-tk-knob i::after{content:''; position:absolute; left:50%; top:4px; width:6px; height:24px; margin-left:-3px; border-radius:3px; background:#1d1f29;}
/* 예비 발전기 시동 */
.m2-tk-gen{display:flex; justify-content:center; align-items:flex-start; gap:6px; width:100%; height:240px;}
.m2-tk-gen .body{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; width:190px; height:130px; margin-top:20px; border-radius:14px;
  color:#1d1f29; background:linear-gradient(#ffcf5a, #d9781e); border:4px solid #1d1f29; box-shadow:0 6px 0 rgba(0,0,0,0.4);}
.m2-tk-gen .lamps{display:flex; gap:10px;}
.m2-tk-gen .lamps i{width:16px; height:16px; border-radius:50%; background:#3a2a10; border:2px solid #1d1f29;}
.m2-tk-gen .lamps i.on{background:#5fe08a; box-shadow:0 0 10px #5fe08a;}
.m2-tk-gen .gauge{width:140px; height:10px; overflow:hidden; border-radius:5px; background:#3a2a10;}
.m2-tk-gen .gauge i{display:block; width:0; height:100%; background:#5fe08a; transition:width .3s;}
.m2-tk-gen.cough .body{animation:m2-tk-cough .4s;}
@keyframes m2-tk-cough{25%{transform:translate(-3px, 1px) rotate(-1deg);} 50%{transform:translate(3px, -1px) rotate(1deg);} 75%{transform:translate(-2px, 0);}}
.m2-tk-gen.run .body{animation:m2-tk-buzz .08s linear infinite;}
.m2-tk-gen .cord{position:relative; width:56px; height:100%;}
.m2-tk-gen .rope{position:absolute; left:50%; top:60px; width:4px; margin-left:-2px; height:calc(30px + var(--pull, 0px)); transition:height .25s cubic-bezier(.3,1.6,.5,1);
  background:repeating-linear-gradient(0deg, #e8e2d0 0 4px, #b8ad90 4px 8px);}
.m2-tk-gen .grip{position:absolute; left:50%; top:88px; width:50px; height:22px; margin-left:-25px; border-radius:11px; cursor:grab; touch-action:none;
  background:linear-gradient(#3a3f48, #1d1f29); border:2px solid #000; transform:translateY(var(--pull, 0px)); transition:transform .25s cubic-bezier(.3,1.6,.5,1);}
.m2-tk-gen.drag .rope, .m2-tk-gen.drag .grip{transition:none;}
.m2-tk-gen.drag .grip{cursor:grabbing;}
/* 낙엽 쓸기 */
.m2-tk-area.broom{cursor:none; touch-action:none;}
.m2-tk-broom{position:absolute; left:-100px; top:0; z-index:3; font-style:normal; font-size:44px; pointer-events:none; transform:translate(-30%, -70%) rotate(-30deg); transition:transform .1s;}
.m2-tk-area.down .m2-tk-broom{transform:translate(-30%, -60%) rotate(-8deg);}
.m2-tk-leaf{position:absolute; font-style:normal; font-size:30px; pointer-events:none; filter:drop-shadow(0 3px 2px rgba(0,0,0,0.5));}
/* 경찰서 우편 분류 (약 분류 틀 재사용) */
.m2-tk-pill.mail{padding:12px 20px; border-radius:6px; font-size:14px; color:#2a1f10; text-shadow:none; background:linear-gradient(#fffaf0, #efe4cc);}
/* 무덤에 꽃 놓기 */
.m2-tk-slip{padding:8px 14px; border-radius:4px; font-weight:900; color:#2a1f10; background:#f4ecd9; transform:rotate(-2deg); box-shadow:0 3px 0 rgba(0,0,0,0.3);}
.m2-tk-yard{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; width:100%; padding:12px; box-sizing:border-box; border-radius:12px;
  background:radial-gradient(circle at 50% 30%, #4d6b3a, #2e4424); border:3px solid #1d1f29;}
.m2-tk-yard .grave{position:relative; height:90px; padding:0; cursor:pointer; border:0; background:none; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;}
.m2-tk-yard .grave::before{content:''; position:absolute; bottom:0; left:15%; right:15%; height:20px; border-radius:50%; background:#6b4a2f;}
.m2-tk-yard .cross{position:absolute; top:2px; left:50%; width:8px; height:46px; margin-left:-6px; background:#8a6a44; border:2px solid #1d1f29;}
.m2-tk-yard .cross::after{content:''; position:absolute; left:-13px; top:8px; width:30px; height:7px; background:#8a6a44; border:2px solid #1d1f29;}
.m2-tk-yard .grave span{position:relative; margin-bottom:14px; padding:2px 6px; border-radius:4px; font-size:12px; font-weight:800; color:#f2e3c4; background:rgba(20,16,12,0.8);}
.m2-tk-yard .grave em{position:absolute; bottom:-2px; font-style:normal; font-size:24px; opacity:0; transform:scale(.3); transition:.25s cubic-bezier(.2,1.5,.4,1);}
.m2-tk-yard .grave.on em{opacity:1; transform:none;}

/* ===== 행동 버튼 v2 (2026-10-20, 어몽어스식): 오른쪽 아래 큰 자리 = 처치(Q) 또는 능력(Q), 그 한 칸 위 = 신고(R) =====
   칸:      .    방해   신고
          사용   능력   [큰 자리]                                                                     */
.m2-actions{display:grid; grid-template-columns:repeat(3, auto); grid-template-areas:". sab report" "use abil main";
  gap:10px 12px; align-items:center; justify-items:center;}
#reportBtn{grid-area:report;}
#killBtn{grid-area:main;}
#abilBtn{grid-area:abil;}
#abilBtn.primary{grid-area:main;}
#useBtn{grid-area:use;}
#sabBtn{grid-area:sab;}
.m2-actions .m2-act{--c1:#3fb4e0; width:78px; height:78px; padding:0 0 9px; justify-content:flex-end; gap:0; border-radius:50%;
  font-size:13px; font-weight:900; letter-spacing:.5px; color:#fff;
  text-shadow:0 0 3px #000, 0 2px 0 #000, 0 0 6px rgba(0,0,0,0.8);
  background:radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c1) 70%, #1a1d26) 0%, color-mix(in srgb, var(--c1) 25%, #0d0f15) 62%, #0b0c11 100%);
  border:3px solid var(--c1);
  box-shadow:0 0 0 3px #0b0c11, 0 0 18px color-mix(in srgb, var(--c1) 55%, transparent), inset 0 -8px 14px rgba(0,0,0,0.55), inset 0 4px 8px rgba(255,255,255,0.15);
  transition:transform .12s, filter .15s, box-shadow .15s;}
/* 버튼 그림 = script.js ACT_SVG (선 아이콘 SVG, --ic) -- 2026-10-27 이모지 대신 */
.m2-actions .m2-act::before{content:''; position:absolute; left:50%; top:9px; transform:translateX(-50%); width:34px; height:34px;
  background:var(--ic, none) center / contain no-repeat;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,0.75)) drop-shadow(0 0 6px color-mix(in srgb, var(--c1) 70%, transparent));}
.m2-actions .m2-act:not(:disabled):hover::before{transform:translateX(-50%) scale(1.08);}
.m2-actions .m2-act::before{transition:transform .15s;}
.m2-actions .m2-act:not(:disabled):hover{transform:translateY(-2px) scale(1.05); box-shadow:0 0 0 3px #0b0c11, 0 0 26px var(--c1), inset 0 -8px 14px rgba(0,0,0,0.55), inset 0 4px 8px rgba(255,255,255,0.15);}
.m2-actions .m2-act:not(:disabled):active{transform:scale(.94);}
.m2-actions .m2-act:disabled{filter:grayscale(.9) brightness(.55); box-shadow:0 0 0 3px #0b0c11, inset 0 -8px 14px rgba(0,0,0,0.55);}
/* 단축키 딱지 (왼쪽 위) */
.m2-actions .m2-act small{position:absolute; left:-4px; top:-4px; min-width:22px; height:22px; padding:0 4px; box-sizing:border-box; display:grid; place-items:center;
  font-family:Orbitron, var(--font); font-size:11px; font-weight:900; opacity:1; color:#1d1f29; text-shadow:none;
  background:#f4f6fa; border:2px solid #0b0c11; border-radius:7px; box-shadow:0 2px 0 #0b0c11;}
/* 큰 자리 (처치 / 처치 없는 사람의 능력) */
.m2-actions #killBtn, .m2-actions #abilBtn.primary{width:98px; height:98px; font-size:15px; padding-bottom:12px;}
.m2-actions #killBtn::before, .m2-actions #abilBtn.primary::before{top:12px; width:46px; height:46px;}
/* 터치(폰·태블릿)엔 키보드가 없으니 단축키 딱지를 숨김 */
@media (hover:none) and (pointer:coarse){ .m2-actions .m2-act small{display:none;} }
body.m2-touch .m2-actions .m2-act small, body.m2-touch .m2-mg-press small, body.m2-touch .m2-key{display:none;}
/* 쿨타임 가림 */
.m2-actions .m2-act .cd{border-radius:50%; font-family:Orbitron, var(--font); font-size:28px; background:rgba(0,0,0,0.6); text-shadow:0 2px 0 #000;}
/* 색 */
.m2-actions .m2-act-kill{--c1:#ff3b3b;}
.m2-actions .m2-act-kill.convert{--c1:#b45cff;}
.m2-actions .m2-act-report{--c1:#ffb020;}
.m2-actions .m2-act-sab{--c1:#a14dff;}
.m2-actions .m2-act-use{--c1:#3fc8f0;}
.m2-actions .m2-act-abil{--c1:#5b7dff;}
.m2-actions .m2-act-abil[data-kind="madam"]{--c1:#ff6fa8;}
.m2-actions .m2-act-abil[data-kind="witch"]{--c1:#b06cff;}
.m2-actions .m2-act-abil[data-kind="job"]{--c1:#2fd4b0;}
.m2-actions .m2-act-abil.far{filter:saturate(0.45) brightness(0.75);}
/* 신고: 시체가 가까우면(켜짐) 두근두근 */
.m2-actions #reportBtn:not(:disabled){animation:m2-act-alert 0.9s ease-in-out infinite;}
@keyframes m2-act-alert{50%{box-shadow:0 0 0 3px #0b0c11, 0 0 32px #ff5a1f, inset 0 -8px 14px rgba(0,0,0,0.55); transform:scale(1.06);}}
/* 처치 가능(대상 있음) = 붉은 빛 */
.m2-actions #killBtn:not(:disabled){box-shadow:0 0 0 3px #0b0c11, 0 0 30px color-mix(in srgb, var(--c1) 80%, transparent), inset 0 -8px 14px rgba(0,0,0,0.55), inset 0 4px 8px rgba(255,255,255,0.15);}
.m2-actions .m2-act.night::after, .m2-actions .m2-act.dayonly::after{right:-4px; top:-6px;}
@media (max-width:640px){
  .m2-actions{gap:6px 8px;}
  .m2-actions .m2-act{width:60px; height:60px; font-size:11px; padding-bottom:6px;}
  .m2-actions .m2-act::before{top:6px; width:26px; height:26px;}
  .m2-actions #killBtn, .m2-actions #abilBtn.primary{width:76px; height:76px; font-size:13px; padding-bottom:8px;}
  .m2-actions #killBtn::before, .m2-actions #abilBtn.primary::before{top:8px; width:36px; height:36px;}
}

/* ===== 지도 (F): 마피아팀 = 방해 지도, 그 외 = 파란 지도 + 내 임무 자리 (2026-10-20) ===== */
#mapBtn{grid-area:sab;}
.m2-actions .m2-act-map{--c1:#4fa8ff;}
.m2-sabmap.pop .m2-sabmap-box{animation:m2-map-in .32s cubic-bezier(.2,1.3,.4,1);}
@keyframes m2-map-in{from{transform:scale(.85) translateY(20px); opacity:0;}}
.m2-sabmap.mode-map .m2-sabmap-box{background:#7d8fa3;}
.m2-sabmap.mode-map .m2-sabmap-svg .path{fill:rgba(190,220,255,0.75);}
.m2-sabmap.mode-map .m2-sabmap-svg .room{fill:#2f74d6; stroke:#0c2a5a;}
.m2-sabmap.mode-map .m2-sabmap-svg text{stroke:#0c2a5a;}
.m2-sabmap.mode-map .m2-sabmap-icons{display:none;}
.m2-sabmap-icons{z-index:2;}
.m2-sabmap-svg .me{animation:m2-map-me 1s ease-in-out infinite;}
@keyframes m2-map-me{50%{stroke:#ffd65a;}}
.m2-map-tasks{position:absolute; inset:0; z-index:1; pointer-events:none;}
.m2-map-task{position:absolute; transform:translate(-50%, -100%); display:flex; flex-direction:column; align-items:center; gap:2px;
  animation:m2-map-drop .45s cubic-bezier(.2,1.5,.4,1) both;}
@keyframes m2-map-drop{from{transform:translate(-50%, -160%); opacity:0;}}
.m2-map-task i{display:grid; place-items:center; min-width:34px; height:34px; padding:0 5px; box-sizing:border-box; font-style:normal; font-size:18px;
  background:#ffd65a; border:3px solid #1d1f29; border-radius:12px; box-shadow:0 3px 0 #1d1f29; animation:m2-map-bob 1.2s ease-in-out infinite;}
.m2-map-task.multi i{background:#8ecae6;}
.m2-map-task::after{content:''; position:absolute; left:50%; bottom:-10px; width:30px; height:12px; margin-left:-15px; border-radius:50%;
  border:3px solid #ffd65a; animation:m2-map-ring 1.2s ease-out infinite;}
.m2-map-task.multi::after{border-color:#8ecae6;}
@keyframes m2-map-bob{50%{transform:translateY(-5px);}}
@keyframes m2-map-ring{from{transform:scale(.4); opacity:1;} to{transform:scale(1.8); opacity:0;}}
.m2-map-task span{padding:2px 7px; border-radius:6px; font-size:11px; font-weight:800; line-height:1.3; text-align:center; white-space:nowrap; color:#fff;
  background:rgba(13,15,21,0.85); border:1px solid rgba(255,255,255,0.2);}
@media (max-width:640px){ .m2-map-task span{display:none;} .m2-map-task i{min-width:26px; height:26px; font-size:14px;} }

/* ===== 미니게임 애니메이션 보강 (2026-10-20 사용자: "미니게임들에 애니메이션이 너무 없어") ===== */
/* 버튼류 눌림 */
.m2-mg-body button:not(:disabled):active{scale:.94;}
/* 물 채우기: 물결 + 붓는 줄기 + 거품 */
.m2-tk-tank .liquid{transition:height .05s linear;}
.m2-tk-tank .liquid::before{content:''; position:absolute; left:-50%; right:-50%; top:-8px; height:16px; border-radius:40%;
  background:inherit; animation:m2-tk-wave 1.4s linear infinite; opacity:.9;}
@keyframes m2-tk-wave{from{transform:translateX(-12%) rotate(0deg);} to{transform:translateX(12%) rotate(4deg);}}
.m2-tk-tank::after{content:''; position:absolute; left:50%; top:0; width:10px; margin-left:-5px; height:0; border-radius:0 0 5px 5px; transition:height .15s;
  background:linear-gradient(#bfe9ff, #5fb8ff);}
.m2-tk-tank.fuel::after{background:linear-gradient(#ffe7a0, #ffb02e);}
.m2-tk-tank.pour::after{height:calc((1 - var(--lv, 0)) * 100%); animation:m2-tk-stream .2s linear infinite;}
@keyframes m2-tk-stream{50%{width:12px; margin-left:-6px;}}
.m2-tk-tank.pour .liquid{box-shadow:inset 0 6px 10px rgba(255,255,255,0.35);}
.m2-tk-tank span{z-index:1; animation:m2-map-bob 1.6s ease-in-out infinite;}
/* 줍기: 떠다니듯 흔들 */
.m2-tk-item{animation:m2-tk-float var(--fdur, 1.8s) ease-in-out var(--fd, 0s) infinite;}

/* 엇갈림은 script.js mgEl이 --fd/--fdur로 (nth-child는 하나 빠지면 순번이 바뀌어 애니메이션이 처음부터 다시 시작했음) */
@keyframes m2-tk-float{50%{translate:0 -5px;}}
.m2-tk-binbtn.gulp, .m2-tk-bin.gulp{animation:m2-mg-push .25s;}
/* 낙엽: 바람에 살랑 */
.m2-tk-leaf{animation:m2-tk-float var(--fdur, 2.2s) ease-in-out var(--fd, 0s) infinite;}

.m2-tk-area.broom.down{box-shadow:inset 0 0 30px rgba(0,0,0,0.35);}
/* 전선 끝: 고른 것 깜빡 */
.m2-tk-wires .end.sel{animation:m2-tk-pick .5s ease-in-out infinite alternate;}
@keyframes m2-tk-pick{to{transform:scale(1.15); box-shadow:0 0 14px var(--c);}}
.m2-tk-wires .end.on{animation:m2-tk-zap .35s;}
@keyframes m2-tk-zap{30%{transform:scale(1.3); filter:brightness(1.8);}}
/* 피아노: 눌림 + 음표 */
.m2-tk-keys{position:relative;}
.m2-tk-keys .k{transition:background .1s, transform .1s;}
.m2-tk-keys .k.lit{transform:translateY(4px);}
.m2-tk-notefly{position:absolute; bottom:60%; font-style:normal; font-size:22px; font-weight:900; color:#ffd23f; text-shadow:0 0 8px #ffd23f; pointer-events:none;
  animation:m2-tk-notefly .9s ease-out forwards;}
@keyframes m2-tk-notefly{from{transform:translate(-50%, 0) scale(.6); opacity:1;} to{transform:translate(calc(-50% + 14px), -70px) scale(1.2) rotate(15deg); opacity:0;}}
/* 출입 카드: 리더기 불빛 */
.m2-tk-reader::after{content:''; position:absolute; right:12px; top:8px; width:10px; height:10px; border-radius:50%; background:#ff4d4d; box-shadow:0 0 8px #ff4d4d;
  animation:m2-tk-blinkdot 1s steps(2) infinite;}
@keyframes m2-tk-blinkdot{50%{opacity:.3;}}
.m2-tk-lcd.ok{animation:m2-mg-monok .5s;}
/* 약/우편 분류: 새 약이 위에서 떨어짐 */
.m2-tk-pill.in{animation:m2-tk-pilldrop .35s cubic-bezier(.2,1.5,.4,1);}
@keyframes m2-tk-pilldrop{from{transform:translateY(-40px) rotate(-10deg); opacity:0;}}
/* 공중전화: 나사가 빙글 떨어짐, 수화기 신호 */
.m2-tk-pfix .screw.gone{animation:m2-tk-screwfall .6s ease-in forwards;}
@keyframes m2-tk-screwfall{0%{opacity:1;} 30%{transform:translateY(-10px) rotate(360deg) scale(1.2);} 100%{transform:translateY(160px) rotate(900deg) scale(.6); opacity:0;}}
.m2-tk-pfix .fuse.burnt{animation:m2-tk-smoke 1.2s ease-in-out infinite;}
@keyframes m2-tk-smoke{50%{box-shadow:inset 0 0 8px #000, 0 -6px 12px rgba(160,160,160,0.6);}}
.m2-tk-pfix .fuse.new{animation:m2-tk-zap .4s;}
.m2-tk-handset.up{animation:m2-tk-ring .15s 4 alternate;}
@keyframes m2-tk-ring{to{transform:translateY(-6px) rotate(-14deg);}}
.m2-tk-handset:not(:disabled):not(.up){animation:m2-tk-ring .15s 6 alternate;}
/* 책장: 고른 책 있을 때 빈칸 반짝, 꽂히면 쿵 */
.m2-tk-shelf.pick .slot.gap{animation:m2-tk-gap .7s ease-in-out infinite alternate;}
@keyframes m2-tk-gap{to{background:rgba(255,214,90,0.18); box-shadow:inset 0 0 0 2px #ffd65a;}}
.m2-tk-shelf .book.thunk{animation:m2-tk-thunk .25s;}
@keyframes m2-tk-thunk{50%{transform:scaleY(.92) translateY(3px);}}
.m2-tk-cart .book:not(.sel):hover{transform:rotate(var(--tilt)) translateY(-4px);}
/* 인쇄기: 끼울 때 철컥, 준비되면 불빛 */
.m2-tk-printer .bay.wait i{color:var(--c); background:none; border-style:dashed; box-shadow:none;}
.m2-tk-printer .bay.clunk{animation:m2-tk-thunk .25s;}
.m2-tk-printer.ready::after{content:''; position:absolute; right:14px; bottom:12px; width:12px; height:12px; border-radius:50%; background:#5fe08a; box-shadow:0 0 10px #5fe08a;
  animation:m2-tk-blinkdot .8s steps(2) infinite;}
.m2-tk-inks .ink:not(:disabled):hover{transform:translateY(-3px);}
/* 찬송가: 패 살짝 흔들, 걸리면 반짝 */
.m2-tk-tiles .tile{animation:m2-tk-float var(--fdur, 2.4s) ease-in-out var(--fd, 0s) infinite;}

.m2-tk-hboard i.on{animation:m2-tk-hang .35s cubic-bezier(.2,1.6,.4,1);}
@keyframes m2-tk-hang{from{transform:rotate(-14deg) scale(1.2);}}
/* 무전: 잡히면 화면이 출렁 */
.m2-tk-radio.lock .freq{animation:m2-tk-beat .5s ease-in-out infinite;}
@keyframes m2-tk-beat{50%{transform:scale(1.08);}}
.m2-tk-radio.lock .meter i{animation:m2-mg-zone .3s infinite alternate;}
.m2-tk-knob{transition:box-shadow .2s;}
.m2-tk-knob:active{box-shadow:0 6px 0 #14161c, 0 0 18px #ffd65a;}
/* 발전기: 돌면 연기 */
.m2-tk-gen .body{position:relative;}
.m2-tk-gen.run .body::after{content:'💨'; position:absolute; right:-18px; top:-26px; font-size:26px; animation:m2-tk-puff .6s ease-out infinite;}
@keyframes m2-tk-puff{from{transform:translate(0, 10px) scale(.6); opacity:1;} to{transform:translate(14px, -20px) scale(1.3); opacity:0;}}
.m2-tk-gen .grip{animation:m2-map-bob 1.4s ease-in-out infinite;}
.m2-tk-gen.drag .grip, .m2-tk-gen.run .grip{animation:none;}
/* 무덤: 꽃 놓을 때 반짝 */
.m2-tk-yard .grave:hover span{background:rgba(60,40,20,0.95);}
.m2-tk-yard .grave.on span{color:#ffd65a;}
.m2-tk-yard .grave.on::before{animation:m2-tk-glowgrave 1.4s ease-in-out infinite;}
@keyframes m2-tk-glowgrave{50%{box-shadow:0 0 14px rgba(255,214,90,0.6);}}

/* ===== 정체 공개 (판사/정치인/호외) + 밤 신고 불가 (2026-10-20) ===== */
.m2-mt-rrole{display:inline-block; margin-left:6px; padding:1px 7px; border-radius:6px; font-style:normal; font-size:11px; font-weight:900; vertical-align:middle;
  color:#1d1f29; background:#ffd65a; box-shadow:0 0 10px rgba(255,214,90,0.5); animation:m2-mt-rrole 1.6s ease-in-out infinite;}
@keyframes m2-mt-rrole{50%{box-shadow:0 0 16px rgba(255,214,90,0.85);}}
.m2-mt-judge{display:block; margin-bottom:4px; color:#ffd65a; font-weight:800;}
.m2-mt-msg .gold{color:#ffd65a;}
.m2-mt-bigfig.reveal{animation:m2-mt-revealfig .6s cubic-bezier(.2,1.5,.4,1);}
@keyframes m2-mt-revealfig{0%{filter:brightness(3) blur(4px); transform:scale(.8);} 100%{filter:none; transform:none;}}
.m2-actions .m2-act-report.night::after{content:'🌙'; position:absolute; right:-4px; top:-6px; font-size:18px;}

/* ===== 교주 속삭임 (2026-10-20): 교주만 보이는 오른쪽 패널 + 신도에게 메아리 팝업 ===== */
.m2-cchat .m2-mchat-title{color:#d9a8ff;}
.m2-cchat .m2-mchat-log p b{color:#c58bff;}
.m2-cchat .m2-mchat-input:focus{border-color:#c58bff;}
.m2-cchat{border-color:rgba(180,110,255,0.45) !important; box-shadow:0 0 22px rgba(150,70,230,0.25);}
.m2-cchat #cchatSend{--cyan:#b45cff;}
/* 회의 카드: 같은 팀 이름 색 */
.m2-mt-name.tag-mafia{color:#ff5a5a;}
.m2-mt-name.tag-cult{color:#c58bff;}
/* 메아리 팝업 */
.m2-echo{position:absolute; inset:0; z-index:8; display:grid; place-items:center; padding:16px; cursor:pointer; pointer-events:auto;
  background:radial-gradient(ellipse at 50% 50%, rgba(90,20,140,0.55), rgba(8,2,16,0.82) 70%);}
.m2-echo.hidden{display:none;}
.m2-echo.play{animation:m2-echo-bg 7s ease-in-out both;}
@keyframes m2-echo-bg{0%{opacity:0;} 8%{opacity:1;} 85%{opacity:1;} 100%{opacity:0;}}
.m2-echo-box{text-align:center; max-width:min(92%, 640px);}
.m2-echo-box small{display:block; margin-bottom:14px; font-size:13px; font-weight:700; letter-spacing:3px; color:#c9a3ff; opacity:.85;
  animation:m2-echo-fade 1.2s ease-out both;}
@keyframes m2-echo-fade{from{opacity:0; letter-spacing:12px; filter:blur(4px);}}
.m2-echo-lines{position:relative; display:grid;}
.m2-echo-txt{grid-area:1 / 1; margin:0; font-family:'Times New Roman', serif; font-style:italic; font-weight:700; font-size:clamp(22px, 4vw, 38px); line-height:1.35;
  color:#f3e6ff; text-shadow:0 0 12px #b45cff, 0 0 30px rgba(180,92,255,0.7);}
.m2-echo-txt span{display:inline-block; animation:m2-echo-char .9s var(--d) ease-out both;}
@keyframes m2-echo-char{from{opacity:0; filter:blur(8px); transform:translateY(8px) scale(1.4);}}
/* 울림: 같은 글이 두 겹 더, 커지며 흐려짐 (반복) */
.m2-echo-txt.ghost{opacity:0; color:transparent; -webkit-text-stroke:1px rgba(200,150,255,0.6); text-shadow:none; pointer-events:none;
  animation:m2-echo-ring 2.2s ease-out infinite;}
.m2-echo-txt.g1{animation-delay:1.2s;}
.m2-echo-txt.g2{animation-delay:2.3s;}
@keyframes m2-echo-ring{0%{opacity:.8; transform:scale(1); filter:blur(0);} 100%{opacity:0; transform:scale(1.35); filter:blur(3px);}}

/* ===== 지도 방 이름이 임무 핀에 가려지던 문제 (2026-10-20) ===== */
.m2-sabmap-box{container-type:inline-size;}
.m2-map-names{position:absolute; inset:0; z-index:3; pointer-events:none;}
.m2-map-name{position:absolute; transform:translate(-50%, -80%); white-space:nowrap; font:900 max(11px, 1.65cqw) Pretendard, sans-serif; color:#fff;
  -webkit-text-stroke:max(3px, 0.3cqw) #0c2a5a; paint-order:stroke fill;}
.m2-sabmap:not(.mode-map) .m2-map-name{-webkit-text-stroke-color:#7a0c10;}
.m2-sabmap-close{z-index:4;}
/* 핀: 아이콘 가운데가 임무 자리, 이름표는 아이콘 아래 (위로 길게 뻗어 방 이름을 덮지 않게) */
.m2-map-task{transform:translate(-50%, -17px); animation-name:m2-map-drop2;}
@keyframes m2-map-drop2{from{transform:translate(-50%, -60px); opacity:0;}}
.m2-map-task::after{top:17px; bottom:auto; width:46px; height:22px; margin:-11px 0 0 -23px; z-index:-1; animation-name:m2-map-ring2;}
@keyframes m2-map-ring2{from{transform:scale(.5); opacity:1;} to{transform:scale(1.7); opacity:0;}}
.m2-map-task span{opacity:.92;}
/* 길 도형이 겹치는 곳이 진하게 보이던 문제: 반투명 → 같은 색 불투명(+같은 색 얇은 테두리로 이음매 숨김) */
.m2-sabmap-svg .path{fill:#e3b5b8; stroke:#e3b5b8; stroke-width:3;}
.m2-sabmap.mode-map .m2-sabmap-svg .path{fill:#aec9e8; stroke:#aec9e8;}

/* 미니게임 안에서 빠르게 누르거나 끌면 그림/글자가 파랗게 "선택"되거나 끌려가던 버그 (2026-10-20) */
.m2-mg-box, .m2-mg-box *{-webkit-user-select:none; user-select:none; -webkit-user-drag:none; -webkit-tap-highlight-color:transparent;}
.m2-mg-box ::selection{background:transparent;}
/* 회의 창/지도/정체 카드도 같은 증상이 나기 쉬워 같이 막음 */
.m2-vote, .m2-vote *, .m2-sabmap, .m2-sabmap *, .m2-actions, .m2-actions *{-webkit-user-select:none; user-select:none; -webkit-user-drag:none;}

/* 나만 아는 직업 (스파이/요원/공무원/기자로 알아낸 사람): 회의 카드에서만, 테두리만 있는 딱지 (2026-10-20) */
.m2-mt-krole{display:inline-block; margin-left:6px; padding:0 6px; border-radius:6px; font-style:normal; font-size:11px; font-weight:800; vertical-align:middle;
  color:#9fe3ff; background:transparent; border:1.5px dashed #6fd0ff; box-shadow:0 0 8px rgba(111,208,255,0.35);}
.m2-mt-krole::before{content:'🔍 '; font-size:10px;}

/* ===== 직업 추가 (2026-10-20): 정치인 표 / 테러리스트 / 영매 성불 / 영매 결과 카드 ===== */
.m2-mt-ballot.x2{display:inline-grid; place-items:center; width:auto; min-width:14px; padding:0 2px; font-style:normal; font-size:9px; font-weight:900; color:#1d1f29;
  background:#ffd65a; box-shadow:0 0 8px rgba(255,214,90,0.7);}
.m2-mt-plus2{display:block; margin-top:2px; font-style:normal; font-size:11px; font-weight:900; color:#ffd65a; animation:m2-up .4s both;}
.m2-mt-judge.boom{color:#ff8a5a;}
/* 성불 미니게임 */
.m2-mg-box[data-theme="soul"]{--mg-glow:rgba(150,200,255,0.35); background:linear-gradient(180deg, #141a2e, #070a14);}
.m2-mg-soularea{position:relative; width:100%; height:220px; overflow:hidden; border-radius:12px; border:3px solid #1d1f29; touch-action:none;
  background:radial-gradient(ellipse at 50% 120%, #1e3a2a 0%, transparent 55%), linear-gradient(#0b1226, #141c34 70%, #1a2b22);}
.m2-mg-soularea .moon{position:absolute; right:22px; top:16px; width:36px; height:36px; border-radius:50%; background:#f4f1d8; box-shadow:0 0 24px rgba(244,241,216,0.6), inset -8px -4px 0 #d6d1b0;}
.m2-mg-soularea .tomb{position:absolute; left:16%; bottom:-6px; width:46px; height:58px; border-radius:22px 22px 4px 4px; background:#2a3242; border:3px solid #1d1f29;}
.m2-mg-soularea .tomb.t2{left:auto; right:20%; width:38px; height:48px;}
.m2-mg-soul{position:absolute; width:46px; height:46px; margin:-23px 0 0 -23px; padding:0; border:0; border-radius:50%; cursor:pointer; background:none; touch-action:none;}
.m2-mg-soul .core{position:absolute; inset:9px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  background:radial-gradient(circle at 50% 40%, #ffffff, #bfe3ff 45%, rgba(110,180,255,0.15) 75%); box-shadow:0 0 18px #8fd0ff, 0 0 34px rgba(143,208,255,0.5);
  animation:m2-soul-flicker .5s ease-in-out infinite alternate;}
@keyframes m2-soul-flicker{to{transform:scale(1.08, .94); filter:brightness(1.2);}}
.m2-mg-soul .ring{position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(#ffe9a8 calc(var(--h, 0) * 360deg), rgba(255,255,255,0.12) 0); -webkit-mask:radial-gradient(circle, transparent 58%, #000 60%); mask:radial-gradient(circle, transparent 58%, #000 60%);}
.m2-mg-soul.calm .core{background:radial-gradient(circle at 50% 40%, #fffbe8, #ffe9a8 45%, rgba(255,220,140,0.15) 75%); box-shadow:0 0 22px #ffe9a8;}
.m2-mg-soul.rise{animation:m2-soul-rise 1s ease-in forwards; pointer-events:none;}
@keyframes m2-soul-rise{to{translate:0 -180px; scale:.4; opacity:0;}}
/* 영매 결과 카드 (요원 기밀 서류 틀을 푸른 영혼 색으로) */
.m2-intel.spirit .m2-intel-file{background:linear-gradient(160deg, #dfe9f5, #b9cbe2 60%, #9fb5d3); color:#14213a;}
.m2-intel.spirit .m2-intel-tab{background:#b9cbe2;}
.m2-intel.spirit .m2-intel-role, .m2-intel.spirit .m2-intel-head b{color:#2a4f8f;}
.m2-intel.spirit .m2-intel-stamp{color:#3f6fc4; border-color:#3f6fc4;}

/* ===== 연인 / 점쟁이 (2026-10-20) ===== */
.m2-mates-title.love{color:#ff8fc8;}
.m2-mt-name.tag-love{color:#ff8fc8;}
/* 지도의 연인 하트 */
.m2-map-lover{position:absolute; z-index:2; transform:translate(-50%, -50%); display:flex; flex-direction:column; align-items:center; pointer-events:none;}
.m2-map-lover i{font-style:normal; font-size:clamp(18px, 2.6cqw, 28px); line-height:1; color:#ff4f8b;
  text-shadow:0 0 10px #ff4f8b, 0 2px 0 #1d1f29; animation:m2-love-beat 1s ease-in-out infinite;}
@keyframes m2-love-beat{0%, 100%{transform:scale(1);} 15%{transform:scale(1.25);} 30%{transform:scale(1);} 45%{transform:scale(1.15);}}
.m2-map-lover span{margin-top:2px; padding:1px 6px; border-radius:6px; font-size:11px; font-weight:800; color:#fff; white-space:nowrap; background:rgba(160,30,80,0.85);}
.m2-map-lover.dead i{color:#3a3440; text-shadow:0 2px 0 #1d1f29; animation:none; filter:grayscale(1);}
.m2-map-lover.dead span{background:rgba(30,30,36,0.85); color:#9a96a6;}
/* 점술 미니게임: 수정구 */
.m2-mg-box[data-theme="crystal"]{--mg-glow:rgba(170,120,255,0.4); background:linear-gradient(180deg, #221a38, #0e0a1a);}
.m2-mg-crystal{position:relative; width:190px; height:220px; cursor:grab; touch-action:none;}
.m2-mg-crystal.rub{cursor:grabbing;}
.m2-mg-crystal .stand{position:absolute; left:50%; bottom:0; width:120px; height:44px; margin-left:-60px; border-radius:16px 16px 8px 8px;
  background:linear-gradient(#8a5a2b, #5a3a1a); border:3px solid #1d1f29; box-shadow:inset 0 4px 0 rgba(255,255,255,0.15);}
.m2-mg-crystal .glow{position:absolute; left:50%; top:0; width:170px; height:170px; margin-left:-85px; border-radius:50%; border:3px solid #1d1f29;
  background:radial-gradient(circle at 50% 55%, rgba(200,170,255,calc(0.25 + var(--k, 0) * 0.6)), #2b1d4a 70%);
  box-shadow:0 0 calc(10px + var(--k, 0) * 40px) rgba(170,120,255,0.7), inset 0 -10px 30px rgba(0,0,0,0.4);}
.m2-mg-crystal .vision{position:absolute; left:50%; top:85px; transform:translate(-50%, -50%) scale(calc(0.6 + var(--k, 0) * 0.6)); font-style:normal; font-size:46px;
  opacity:var(--k, 0); filter:drop-shadow(0 0 10px #c4b5fd);}
.m2-mg-crystal .fog{position:absolute; left:50%; top:0; width:170px; height:170px; margin-left:-85px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 35% 40%, rgba(230,220,255,0.85), transparent 45%), radial-gradient(circle at 65% 60%, rgba(210,200,240,0.8), transparent 50%);
  opacity:calc(1 - var(--k, 0)); animation:m2-crystal-fog 4s linear infinite;}
.m2-mg-crystal .fog.f2{animation-duration:6s; animation-direction:reverse; transform-origin:50% 50%;}
@keyframes m2-crystal-fog{to{transform:rotate(360deg);}}
.m2-mg-crystal.rub .fog{animation-duration:1.2s;}
.m2-mg-crystal .shine{position:absolute; left:calc(50% - 50px); top:22px; width:34px; height:20px; border-radius:50%; background:rgba(255,255,255,0.55); transform:rotate(-30deg); pointer-events:none;}
.m2-mg-crystal.clear .glow{animation:m2-crystal-flash .6s ease-out;}
@keyframes m2-crystal-flash{40%{filter:brightness(2.2);}}
/* 운세 결과 카드 */
.m2-fortune{text-align:center; padding:18px 20px 14px; width:min(100%, 440px); border-radius:16px; color:#efe7ff;
  background:linear-gradient(170deg, #2b1d4a, #160f28); border:3px solid #1d1f29; box-shadow:0 0 40px rgba(150,100,255,0.45), 0 18px 40px rgba(0,0,0,0.6);}
.m2-intel.play .m2-fortune{animation:m2-intel-in .6s cubic-bezier(.2,1.2,.4,1) both;}
.m2-fortune-title{margin:0 0 12px; font-size:18px; font-weight:900;}
.m2-fortune-cards{display:flex; gap:18px; justify-content:center; perspective:600px;}
.m2-fortune-card{width:120px; height:170px;}
.m2-fortune-card .in{position:relative; width:100%; height:100%; transform-style:preserve-3d; animation:m2-fortune-flip .7s var(--d) cubic-bezier(.3,1.4,.5,1) both;}
@keyframes m2-fortune-flip{from{transform:rotateY(180deg);} to{transform:rotateY(0deg);}}
.m2-fortune-card .back, .m2-fortune-card .front{position:absolute; inset:0; border-radius:12px; border:3px solid #1d1f29; backface-visibility:hidden; -webkit-backface-visibility:hidden;}
.m2-fortune-card .back{display:grid; place-items:center; font-size:40px; color:#e9d5ff; transform:rotateY(180deg);
  background:repeating-linear-gradient(45deg, #4c2f86 0 10px, #3b2470 10px 20px);}
.m2-fortune-card .front{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; padding-bottom:10px;
  background:linear-gradient(#f6efe0, #e2d3b5); color:#2a1f10;}
.m2-fortune-card .front .m2-fig{--w:84px;}
.m2-fortune-card .front b{font-size:16px;}
.m2-fortune-note{margin:12px 0 4px; font-size:13px; font-weight:700; color:#c4b5fd;}
.m2-fortune .m2-intel-close{color:#a99bd0;}

/* ===== 통신망 고장 (2026-10-20, 정전 대신): 방해 아이콘 + 통신 중계기 복구(오실로스코프) ===== */
.m2-sabicon.comms{color:#1f6fb5;}
.m2-sabicon.o2{color:#2f8f5a;}
.m2-fix-levers.m2-scope-wrap{flex-direction:column; align-items:center; gap:10px;}
.m2-scope{width:min(360px, 78vw); height:auto; aspect-ratio:360/140; border-radius:10px; border:4px solid #1d1f29; box-shadow:inset 0 0 20px rgba(0,0,0,0.6), 0 0 14px rgba(93,255,155,0.25);}
.m2-scope-ctl{display:flex; gap:18px;}
.m2-scope-ctl > div{display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:10px; background:rgba(0,0,0,0.3); border:2px solid #1d1f29;}
.m2-scope-ctl small{font-size:12px; font-weight:800; color:#c9d1dd; margin-right:2px;}
.m2-scope-ctl b{min-width:18px; text-align:center; font-family:Orbitron, var(--font); color:#ffd23f;}
.m2-scope-ctl button{width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:18px; font-weight:900; color:#1d1f29;
  background:linear-gradient(#f1f3f6, #b9bfc8); border:2px solid #1d1f29; box-shadow:0 3px 0 #4a4f58;}
.m2-scope-ctl button:active{transform:translateY(2px); box-shadow:0 1px 0 #4a4f58;}
.m2-scope-msg{margin:0; font-size:12px; font-weight:700; color:#9fe3ff;}
.m2-fix.restored .m2-scope-msg{color:#5dff9b; font-size:15px; font-weight:900;}
.m2-fix, .m2-fix *{-webkit-user-select:none; user-select:none;}

/* ===== 방 규칙 (2026-10-20): 로비 왼쪽 위 칠판 + 방장 설정 창 (어몽어스식) ===== */
.m2-rulesboard{position:absolute; left:14px; top:14px; z-index:3; min-width:210px; padding:10px 14px 12px; pointer-events:none;
  font-family:'Pretendard', sans-serif; color:#f3f7ef; border-radius:8px;
  background:linear-gradient(160deg, #2f4a3a, #22382b); border:7px solid #7a5232; box-shadow:inset 0 0 18px rgba(0,0,0,0.45), 0 6px 0 #4a3020, 0 10px 24px rgba(0,0,0,0.5);}
.m2-rulesboard.hidden{display:none;}
.m2-rb-title{margin:0 0 6px; padding-bottom:4px; font-size:14px; font-weight:900; letter-spacing:1px; border-bottom:2px dashed rgba(243,247,239,0.4);}
.m2-rb-row{display:flex; justify-content:space-between; gap:14px; font-size:12px; line-height:1.65; text-shadow:0 0 2px rgba(255,255,255,0.35);}
.m2-rb-row span{opacity:.85;}
.m2-rb-row b{color:#fff6b0; font-weight:800;}
.m2-rulespanel{position:absolute; inset:0; z-index:9; display:grid; place-items:center; padding:14px; background:rgba(4,6,12,0.6);}
.m2-rulespanel.hidden{display:none;}
.m2-rp-box{width:min(100%, 460px); max-height:100%; overflow:auto; padding:16px 18px; border-radius:16px; text-align:center;
  background:linear-gradient(180deg, #2a3140, #171b24); border:3px solid #1d1f29; box-shadow:0 0 30px rgba(60,200,180,0.25), 0 14px 40px rgba(0,0,0,0.6);
  animation:m2-mt-in .3s cubic-bezier(.2,1.3,.4,1);}
.m2-rp-title{margin:0 0 10px; font-size:17px; font-weight:900; color:#fff;}
.m2-rp-title small{display:block; margin-top:2px; font-size:11px; font-weight:600; color:var(--sub);}
.m2-rp-rows{display:flex; flex-direction:column; gap:6px; margin-bottom:12px;}
.m2-rp-row{display:grid; grid-template-columns:1fr 34px 74px 34px; align-items:center; gap:6px; padding:6px 8px; border-radius:10px; text-align:left;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);}
.m2-rp-row span{font-size:13px; font-weight:800; color:#e8eef7;}
.m2-rp-row span small{display:block; font-size:10px; font-weight:600; color:var(--sub);}
.m2-rp-row b{text-align:center; font-family:Orbitron, var(--font); font-size:14px; color:#ffd65a;}
.m2-rp-row button{height:30px; border-radius:8px; cursor:pointer; font-size:17px; font-weight:900; color:#1d1f29;
  background:linear-gradient(#f1f3f6, #b9bfc8); border:2px solid #1d1f29; box-shadow:0 3px 0 #4a4f58;}
.m2-rp-row button:active{transform:translateY(2px); box-shadow:0 1px 0 #4a4f58;}
.m2-rp-row button:disabled{opacity:.35; cursor:default;}
.m2-rp-row .m2-rp-toggle{grid-column:2 / 5; font-size:13px; color:#fff; background:linear-gradient(#5a6170, #3a404c);}
.m2-rp-row .m2-rp-toggle.on{background:linear-gradient(#3fd08a, #1f8a55);}
.m2-rulespanel, .m2-rulespanel *{-webkit-user-select:none; user-select:none;}
@media (max-width:640px){ .m2-rulesboard{transform:scale(.8); transform-origin:top left;} }

/* 군인 방탄 장면 (2026-10-20): 푸른 방탄 막 */
.m2-fx-shield{border-radius:45% 45% 40% 40%; border:4px solid rgba(160,215,255,0.95);
  background:radial-gradient(ellipse at 35% 30%, rgba(255,255,255,0.55), rgba(120,190,255,0.28) 45%, rgba(60,130,230,0.12) 70%);
  box-shadow:0 0 24px rgba(120,190,255,0.8), inset 0 0 18px rgba(180,225,255,0.6);}
.m2-scene-block .m2-scene-band{background:radial-gradient(ellipse 60% 80% at 50% 45%, #1e3a5e 0%, #0e1c30 55%, #050a14 100%);}

/* ===== 최면술사 (2026-10-20, 구스구스덕 탐정식) ===== */
.m2-mg-box[data-theme="hypno"]{--mg-glow:rgba(200,140,255,0.4); background:linear-gradient(180deg, #2a1838, #120a1a);}
.m2-mg-pend{position:relative; width:220px; height:200px; overflow:hidden; border-radius:14px; border:3px solid #1d1f29; background:#1a1026;}
.m2-mg-pend .swirl{position:absolute; inset:-40%; opacity:calc(0.2 + var(--h, 0) * 0.6);
  background:repeating-conic-gradient(from 0deg, #4c1d95 0 15deg, #1a1026 15deg 30deg); animation:m2-hypno-spin calc(6s - var(--h, 0) * 4s) linear infinite;}
@keyframes m2-hypno-spin{to{transform:rotate(360deg);}}
.m2-mg-pend .eyes{position:absolute; left:50%; top:118px; transform:translateX(-50%); display:flex; gap:22px;}
.m2-mg-pend .eyes b{width:26px; height:26px; border-radius:50%; background:#fff; border:3px solid #1d1f29;
  background:repeating-radial-gradient(circle, #fff 0 3px, #a855f7 3px 6px); animation:m2-hypno-spin 1.2s linear infinite; opacity:calc(0.3 + var(--h, 0) * 0.7);}
.m2-mg-pend .zone{position:absolute; left:50%; top:150px; width:34px; height:34px; margin-left:-17px; border-radius:50%;
  background:radial-gradient(circle, rgba(250,204,21,0.55), transparent 70%); box-shadow:0 0 18px rgba(250,204,21,0.6);}
.m2-mg-pend .arm{position:absolute; left:50%; top:8px; width:4px; height:160px; margin-left:-2px; transform-origin:50% 0; background:#d6c4a0; border-radius:2px;}
.m2-mg-pend .bob{position:absolute; left:50%; bottom:-14px; width:28px; height:28px; margin-left:-14px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff3c4, #f5b400 60%, #a16207); border:3px solid #1d1f29; box-shadow:0 0 14px rgba(250,204,21,0.8);}
.m2-mg-pend.hit{animation:m2-hypno-hit .35s;}
@keyframes m2-hypno-hit{40%{filter:brightness(1.8);}}
.m2-mg-dots{display:flex; gap:10px;}
.m2-mg-dots i{width:16px; height:16px; border-radius:50%; background:#3a2a4a; border:2px solid #1d1f29;}
.m2-mg-dots i.on{background:#c084fc; box-shadow:0 0 10px #c084fc;}
/* 최면 결과 카드 */
.m2-hypno{position:relative; overflow:hidden; text-align:center; padding:18px 22px 14px; width:min(100%, 380px); border-radius:16px; color:#f3e8ff;
  background:linear-gradient(170deg, #2a1838, #120a1a); border:3px solid #1d1f29; box-shadow:0 0 40px rgba(168,85,247,0.45), 0 18px 40px rgba(0,0,0,0.6);}
.m2-intel.play .m2-hypno{animation:m2-intel-in .6s cubic-bezier(.2,1.2,.4,1) both;}
.m2-hypno-swirl{position:absolute; inset:-50%; opacity:.18; background:repeating-conic-gradient(from 0deg, #a855f7 0 12deg, transparent 12deg 24deg); animation:m2-hypno-spin 8s linear infinite;}
.m2-hypno > *:not(.m2-hypno-swirl){position:relative;}
.m2-hypno-title{margin:0 0 8px; font-size:17px; font-weight:900;}
.m2-hypno-fig{display:grid; place-items:center; height:110px;}
.m2-hypno-fig .m2-hfig{height:100px;}
.m2-hypno-nick{display:block; font-size:20px; font-weight:900;}
.m2-hypno-say{margin:6px 0; font-style:italic; color:#d8b4fe;}
.m2-hypno-verdict{display:inline-block; margin-top:4px; padding:6px 12px; border-radius:10px; font-style:normal; font-weight:900; font-size:15px;
  animation:m2-intel-reveal .9s .5s ease-out both;}
.m2-hypno.bad .m2-hypno-verdict{color:#fff; background:#b91c1c; box-shadow:0 0 18px rgba(220,38,38,0.6);}
.m2-hypno.good .m2-hypno-verdict{color:#14532d; background:#bbf7d0; box-shadow:0 0 18px rgba(74,222,128,0.5);}
.m2-hypno .m2-intel-close{color:#a78bfa;}
/* 회의 카드: 최면 결과 (나만) */
.m2-mt-hypno{display:inline-block; margin-left:6px; padding:0 6px; border-radius:6px; font-style:normal; font-size:11px; font-weight:800; vertical-align:middle;
  color:#bbf7d0; border:1.5px dashed #4ade80;}
.m2-mt-hypno.bad{color:#fecaca; border-color:#f87171; box-shadow:0 0 8px rgba(248,113,113,0.45);}

/* ===== 경찰 체포 / 감옥 (2026-10-20) ===== */
.m2-jail-chip{top:12px; color:#dbeafe; background:rgba(30,58,138,0.9); border-color:rgba(147,197,253,0.5);}
.m2-mg-box[data-theme="cuffs"]{--mg-glow:rgba(96,165,250,0.4); background:linear-gradient(180deg, #1c2638, #0c1220);}
.m2-mg-cuffarea{position:relative; width:100%; height:220px; overflow:hidden; border-radius:12px; border:3px solid #1d1f29; touch-action:none;
  background:repeating-linear-gradient(90deg, #2a3242 0 38px, #232a38 38px 40px), #232a38;}
.m2-mg-cuffarea .lamp{position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%, rgba(255,240,180,0.25), transparent 60%); animation:m2-cuff-lamp 1.6s ease-in-out infinite alternate;}
@keyframes m2-cuff-lamp{to{opacity:.6;}}
.m2-mg-hand{position:absolute; width:58px; height:58px; margin:-29px 0 0 -29px; padding:0; border:0; border-radius:50%; cursor:pointer; background:rgba(255,255,255,0.06); touch-action:none;}
.m2-mg-hand span{font-size:40px; line-height:58px; filter:drop-shadow(0 3px 2px rgba(0,0,0,0.6));}
.m2-mg-hand .cuff{position:absolute; left:50%; top:62%; transform:translate(-50%, -50%) scale(0); font-style:normal; font-size:30px; transition:transform .2s cubic-bezier(.2,1.6,.4,1);}
.m2-mg-hand.on{background:rgba(96,165,250,0.18); box-shadow:0 0 16px rgba(96,165,250,0.6);}
.m2-mg-hand.on .cuff{transform:translate(-50%, -50%) scale(1);}

/* 경찰 체포 장면 (2026-10-20) */
.m2-scene-arrest .m2-scene-band{background:radial-gradient(ellipse 60% 80% at 50% 45%, #1d2a44 0%, #0d1322 55%, #04070e 100%);}
.m2-arrest-siren{position:absolute; inset:0; opacity:0; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(ellipse 45% 70% at 15% 30%, rgba(255,40,60,0.55), transparent 60%), radial-gradient(ellipse 45% 70% at 85% 30%, rgba(40,110,255,0.55), transparent 60%);
  animation:m2-siren .5s steps(2) infinite;}
@keyframes m2-siren{50%{background:radial-gradient(ellipse 45% 70% at 15% 30%, rgba(40,110,255,0.55), transparent 60%), radial-gradient(ellipse 45% 70% at 85% 30%, rgba(255,40,60,0.55), transparent 60%);}}
.m2-fx-cuffs svg{display:block; width:100%; height:auto; filter:drop-shadow(0 0 6px rgba(220,230,255,0.8));}
.m2-fx-bars{border-top:10px solid #6e7487; border-bottom:10px solid #6e7487; outline:3px solid #1d1f29; box-sizing:border-box;
  background:repeating-linear-gradient(90deg, transparent 0 14px, #1d1f29 14px 16px, #9aa1b3 16px 21px, #1d1f29 21px 23px, transparent 23px 30px);}
/* 타격 빛 (만화식 별 대신, 2026-10-20) */
.m2-fx-glow{aspect-ratio:1; border-radius:50%; mix-blend-mode:screen; filter:blur(2px);}

/* ===== 연출 v3: 영화 같은 밤거리 무대 (2026-10-20) ===== */
/* 예전 만화풍 레이어(빙글 방사선, 속도선)는 숨김 */
.m2-scene-kill .m2-scene-rays, .m2-scene-kill .m2-scene-lines{display:none;}
.m2-scene-kill .m2-scene-band{background:#05060a;}
.m2-scene-kill{--tint:#ff3b4a;}
.m2-set{position:absolute; inset:0; overflow:hidden; transform-origin:50% 70%;}
.m2-scene-kill.m2-scene-block{--tint:#4aa3ff;}
.m2-scene-kill.m2-scene-arrest{--tint:#5b7cff;}
.m2-scene-kill.m2-scene-convert{--tint:#b45cff;}
.m2-set > i{position:absolute; display:block;}
.m2-set .sky{inset:0; background:
  radial-gradient(ellipse 70% 60% at 50% 100%, color-mix(in srgb, var(--tint) 30%, transparent), transparent 70%),
  linear-gradient(#03050b 0%, #0a1120 45%, color-mix(in srgb, var(--tint) 14%, #0b101c) 78%, #05060a 100%);}
.m2-set .moon{right:13%; top:9%; width:7%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 38% 38%, #fffbea, #e9e2c2 60%, #c7bf9e);
  box-shadow:0 0 30px 8px rgba(255,248,220,0.22), 0 0 110px 36px rgba(255,248,220,0.07);}
.m2-set .city{left:-6%; right:-6%; background-repeat:repeat-x; background-position:bottom; background-size:auto 100%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='200'><g fill='%23070a12'><rect x='0' y='90' width='50' height='110'/><rect x='55' y='60' width='40' height='140'/><polygon points='100,200 100,80 125,48 150,80 150,200'/><rect x='160' y='110' width='60' height='90'/><rect x='225' y='38' width='35' height='162'/><rect x='238' y='22' width='3' height='18'/><rect x='265' y='95' width='55' height='105'/><rect x='325' y='70' width='45' height='130'/><rect x='372' y='120' width='28' height='80'/></g><g fill='%23ffd98a' opacity='.6'><rect x='62' y='75' width='5' height='7'/><rect x='80' y='100' width='5' height='7'/><rect x='232' y='60' width='5' height='7'/><rect x='245' y='92' width='5' height='7'/><rect x='275' y='110' width='5' height='7'/><rect x='300' y='132' width='5' height='7'/><rect x='335' y='90' width='5' height='7'/><rect x='170' y='130' width='5' height='7'/><rect x='12' y='112' width='5' height='7'/><rect x='120' y='100' width='5' height='7'/></g></svg>");}
.m2-set .city.far{bottom:30%; height:44%; opacity:.55; filter:blur(1px);}
.m2-set .city.near{bottom:24%; height:36%; opacity:.95; background-position:120px bottom; filter:brightness(.55);}
.m2-set .fog{left:-30%; right:-30%; bottom:16%; height:30%; filter:blur(6px);
  background:radial-gradient(ellipse 30% 50% at 30% 55%, rgba(200,210,235,0.16), transparent 70%), radial-gradient(ellipse 28% 45% at 72% 60%, rgba(200,210,235,0.12), transparent 70%);
  animation:m2-fog 10s linear infinite alternate;}
.m2-set .fog.f2{bottom:22%; opacity:.7; animation-duration:14s; animation-direction:alternate-reverse;}
@keyframes m2-fog{from{transform:translateX(-6%);} to{transform:translateX(6%);}}
.m2-set .ground{left:-20%; right:-20%; bottom:-6%; height:34%; transform:perspective(300px) rotateX(55deg); transform-origin:50% 100%;
  background:
    radial-gradient(ellipse 40% 60% at 50% 30%, color-mix(in srgb, var(--tint) 22%, transparent), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.35) 0 3px, transparent 3px 64px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.35) 0 3px, transparent 3px 34px),
    linear-gradient(#2a2e3a, #13161e);}
.m2-set .spot{left:50%; top:-12%; width:64%; height:118%; transform:translateX(-50%);
  background:linear-gradient(rgba(255,244,225,0.20), rgba(255,244,225,0.05) 70%, transparent);
  clip-path:polygon(42% 0, 58% 0, 100% 100%, 0 100%); filter:blur(8px); mix-blend-mode:screen; animation:m2-spot 3s ease-in-out infinite alternate;}
@keyframes m2-spot{to{opacity:.8;}}
.m2-set .motes{inset:0;}
.m2-set .motes b{position:absolute; width:3px; height:3px; border-radius:50%; background:rgba(255,240,210,0.7); box-shadow:0 0 6px rgba(255,240,210,0.8);
  animation:m2-mote 6s ease-in-out infinite;}
@keyframes m2-mote{0%{transform:translate(0, 0); opacity:0;} 20%{opacity:.9;} 80%{opacity:.6;} 100%{transform:translate(18px, -60px); opacity:0;}}
/* 인물: 조명 받는 윤곽 + 바닥 그림자 */
.m2-scene-kill .m2-scene-actor{filter:drop-shadow(0 0 1px rgba(255,255,255,0.35)) drop-shadow(0 0 14px color-mix(in srgb, var(--tint, #ff3b4a) 45%, transparent));}
.m2-scene-kill .m2-scene-actor::before{background:rgba(0,0,0,0.7); filter:blur(4px); height:10%;}
/* 자막: 영화 자막처럼 */
.m2-scene-kill .m2-scene-caption span{background:none; padding:4px 0; font-weight:700; letter-spacing:.22em; color:#f3f4f6;
  text-shadow:0 2px 12px rgba(0,0,0,0.9);}
.m2-scene-kill .m2-scene-caption span::before, .m2-scene-kill .m2-scene-caption span::after{content:''; display:inline-block; width:46px; height:1px; margin:0 14px; vertical-align:middle;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.7));}
.m2-scene-kill .m2-scene-caption span::after{background:linear-gradient(90deg, rgba(255,255,255,0.7), transparent);}
/* 타격 링: 얇고 옅게 */
.m2-fx-ring{border-width:2px; border-color:rgba(255,255,255,0.7); box-shadow:0 0 18px rgba(255,255,255,0.35);}
/* 영혼 */
.m2-fx-soul svg{display:block; width:100%; height:auto; filter:drop-shadow(0 0 14px rgba(220,235,255,0.9));}
.m2-fx-beam{transform:translate(-50%, -50%); background:linear-gradient(rgba(220,235,255,0), rgba(220,235,255,0.35) 45%, rgba(220,235,255,0)); filter:blur(6px); mix-blend-mode:screen;}
.m2-fx-mote{width:5px; height:5px; border-radius:50%; background:#eef6ff; box-shadow:0 0 8px #cfe6ff;}
.m2-scene-kill .m2-scene-band{box-shadow:0 0 0 2px #0b0c11, 0 0 60px color-mix(in srgb, var(--tint) 35%, transparent), 0 20px 50px rgba(0,0,0,0.7);}
/* 마담 장면 (2026-10-20 다시) */
.m2-fx-heart.big{font-size:64px; color:#ff4f9a; text-shadow:0 0 18px rgba(255,90,168,0.95), 0 0 40px rgba(255,90,168,0.5);}
.m2-fx-heart.half.l{clip-path:inset(0 50% 0 0);}
.m2-fx-heart.half.r{clip-path:inset(0 0 0 50%);}
.m2-fx-haze{border-radius:50%; mix-blend-mode:screen; filter:blur(10px);
  background:radial-gradient(ellipse 45% 40% at 50% 55%, rgba(255,110,180,0.35), rgba(255,110,180,0.12) 55%, transparent 75%);}

/* ===== 미니게임 창 다듬기 (2026-10-20 그래픽 업그레이드) ===== */
/* 뒤 배경: 흐림 + 어둡게, 창: 유리 패널(위쪽 반사광 + 안쪽 테두리 빛 + 아주 옅은 결) */
.m2-mg{background:radial-gradient(ellipse at 50% 45%, rgba(10,14,26,0.55), rgba(2,3,8,0.82)); backdrop-filter:blur(3px);}
.m2-mg-box{border:1px solid rgba(255,255,255,0.12); outline:3px solid #0b0d14; border-radius:18px; padding:16px 18px 14px;
  box-shadow:0 0 0 1px rgba(0,0,0,0.6), 0 0 44px var(--mg-glow, rgba(60,200,180,0.28)), 0 22px 60px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.14), inset 0 0 30px rgba(255,255,255,0.03);}
.m2-mg-box::after{content:''; position:absolute; left:0; right:0; top:0; height:46%; border-radius:18px 18px 50% 50% / 18px 18px 22px 22px; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.07), transparent);}
.m2-mg-title{display:inline-flex; align-items:center; gap:8px; padding:4px 14px; border-radius:999px; font-size:18px; letter-spacing:.02em;
  background:rgba(0,0,0,0.28); border:1px solid rgba(255,255,255,0.1); text-shadow:0 0 12px var(--mg-glow, rgba(60,200,180,0.5));}
.m2-mg-hint{margin:8px 0 14px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,0.08); color:#aeb8c8;}
.m2-mg-body > *{filter:drop-shadow(0 6px 10px rgba(0,0,0,0.35));}
.m2-mg-box #mgClose{border-radius:999px; padding:6px 16px; font-size:12px; opacity:.85;}
.m2-mg-box #mgClose:hover{opacity:1;}
.m2-mg-prog{height:10px; border:1px solid rgba(0,0,0,0.6); box-shadow:inset 0 2px 4px rgba(0,0,0,0.6);}
.m2-mg-prog i{box-shadow:0 0 10px rgba(255,214,90,0.4);}
.m2-mg-result{text-shadow:0 0 20px currentColor;}

/* ===== 신고 장면: 영화풍 무대 (2026-10-20) ===== */
.m2-scene-report{--tint:#ff3b4a; background:#05060a;}
.m2-scene-report .m2-set{z-index:0;}
.m2-scene-report .m2-set .motes b{background:rgba(255,200,200,0.7);}
.m2-scene-report .m2-rep-sun, .m2-scene-report .m2-rep-streak, .m2-scene-report .m2-rep-bubble{display:none;}
.m2-scene-report .m2-rep-spot{z-index:1;}
.m2-scene-report .m2-rep-body, .m2-scene-report .m2-rep-tape, .m2-scene-report .m2-rep-title, .m2-scene-report .m2-rep-who{z-index:2;}
.m2-scene-report .m2-rep-who span{background:none; letter-spacing:.18em; text-shadow:0 2px 12px rgba(0,0,0,0.9);}
.m2-scene-report .m2-rep-body{top:50%;}
.m2-scene-report .m2-rep-corpse{filter:drop-shadow(0 10px 8px rgba(0,0,0,0.7));}

/* ===================== UI 퀄리티 업 (2026-10-20 "배정/승리 연출, 시계, 임무, 직업 카드, 버튼, 지도가 아직 낮다") ===================== */
/* ---------- 배정 연출: 밤거리 무대 + 팀 색 ---------- */
.m2-intro{--tint:#4a8dff; background:#03050b;}
.m2-intro.team-mafia{--tint:#ff3b4a;}
.m2-intro.team-cult{--tint:#b45cff;}
.m2-intro > .m2-set{position:absolute !important; inset:0; opacity:1 !important;}
.m2-intro-spot{mix-blend-mode:screen; opacity:.75 !important;}
.m2-intro-mode{font-size:12px !important; letter-spacing:.35em; color:rgba(255,255,255,0.55) !important; text-transform:uppercase;}
.m2-intro-mode b{color:#fff;}
.m2-intro-team{letter-spacing:.3em !important;}
.m2-intro-team::before, .m2-intro-team::after{content:''; display:inline-block; width:40px; height:1px; margin:0 12px; vertical-align:middle;
  background:linear-gradient(90deg, transparent, var(--glow));}
.m2-intro-team::after{background:linear-gradient(90deg, var(--glow), transparent);}
.m2-intro-role{text-shadow:0 0 34px var(--glow), 0 0 80px color-mix(in srgb, var(--glow) 40%, transparent), 0 5px 0 rgba(0,0,0,0.55) !important; letter-spacing:.03em;}
.m2-intro-desc{max-width:min(92%, 620px); padding:10px 20px; border-radius:14px; background:rgba(6,8,16,0.55); border:1px solid rgba(255,255,255,0.1);
  backdrop-filter:blur(4px); box-shadow:0 10px 30px rgba(0,0,0,0.45);}
.m2-intro-me{position:relative;}
.m2-intro-me::after{content:''; position:absolute; left:50%; bottom:-4px; width:140%; height:22px; transform:translateX(-50%); z-index:-1; border-radius:50%;
  background:radial-gradient(ellipse, color-mix(in srgb, var(--tint) 55%, transparent), transparent 70%); filter:blur(2px);}
.m2-intro-fig .m2-fig{filter:drop-shadow(0 0 1px rgba(255,255,255,0.5)) drop-shadow(0 0 18px color-mix(in srgb, var(--tint) 55%, transparent));}
.m2-intro-nick{padding:2px 12px; border-radius:999px; background:rgba(0,0,0,0.45); border:1px solid rgba(255,255,255,0.15); font-weight:800;}

/* ---------- 결과 화면: 밤거리 무대 ---------- */
.m2-end{--tint:var(--wc);}
.m2-end > .m2-set{position:absolute; inset:0; z-index:0;}
.m2-end > *:not(.m2-set){z-index:1;}
.m2-end-w .fig .m2-fig{filter:drop-shadow(0 0 1px rgba(255,255,255,0.5)) drop-shadow(0 0 16px color-mix(in srgb, var(--wc) 50%, transparent));}
.m2-end-w::after{content:''; position:absolute; left:50%; bottom:-6px; width:120%; height:16px; transform:translateX(-50%); z-index:-1; border-radius:50%;
  background:radial-gradient(ellipse, rgba(0,0,0,0.6), transparent 70%);}
.m2-end-losers{padding:10px 12px; border-radius:12px; background:rgba(6,8,16,0.55); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(4px);}

/* ---------- 위쪽 시계: 유리 알약 + 빛나는 해/달 + 반짝이는 진행 막대 ---------- */
.m2-hud .m2-clock{padding:6px 16px 6px 8px; gap:12px; border:1px solid color-mix(in srgb, var(--c) 35%, rgba(255,255,255,0.12));
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 55%), linear-gradient(180deg, color-mix(in srgb, var(--c) 12%, #12141c), #0b0d14);
  box-shadow:0 0 0 1px rgba(0,0,0,0.5), 0 0 26px color-mix(in srgb, var(--c) 22%, transparent), 0 10px 26px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12);}
.m2-hud .m2-clock-ic{display:grid; place-items:center; width:32px; height:32px; border-radius:50%; font-size:18px;
  background:radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--c) 45%, #fff 10%), color-mix(in srgb, var(--c) 25%, #0b0d14) 70%);
  box-shadow:0 0 14px color-mix(in srgb, var(--c) 60%, transparent), inset 0 1px 0 rgba(255,255,255,0.3); animation:m2-clock-glow 2.4s ease-in-out infinite;}
@keyframes m2-clock-glow{50%{box-shadow:0 0 22px color-mix(in srgb, var(--c) 85%, transparent), inset 0 1px 0 rgba(255,255,255,0.3);}}
.m2-hud .m2-clock-track{height:8px; border-radius:999px; background:rgba(0,0,0,0.45); box-shadow:inset 0 1px 3px rgba(0,0,0,0.7); border:1px solid rgba(255,255,255,0.06);}
.m2-hud .m2-clock-track i{position:relative; background:linear-gradient(90deg, color-mix(in srgb, var(--c) 40%, #fff), var(--c));}
.m2-hud .m2-clock-track i::after{content:''; position:absolute; right:-3px; top:50%; width:10px; height:10px; margin-top:-5px; border-radius:50%; background:#fff;
  box-shadow:0 0 10px var(--c), 0 0 4px #fff;}
.m2-hud .m2-clock-time{text-shadow:0 0 10px color-mix(in srgb, var(--c) 70%, transparent);}

/* ---------- 왼쪽 내 직업 카드: 유리 카드 + 팀 색 빛 ---------- */
#roleHud{overflow:hidden; border:1px solid color-mix(in srgb, var(--team) 35%, rgba(255,255,255,0.1)) !important;
  background:linear-gradient(180deg, color-mix(in srgb, var(--team) 16%, #11131c), #0a0c14 60%) !important;
  box-shadow:0 0 0 1px rgba(0,0,0,0.55), 0 0 30px color-mix(in srgb, var(--team) 20%, transparent), 0 14px 34px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1) !important;}
#roleHud::before{content:''; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg, transparent, var(--team), transparent); box-shadow:0 0 14px var(--team);}
#roleHud::after{content:''; position:absolute; left:50%; top:-40%; width:120%; height:80%; transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(ellipse, color-mix(in srgb, var(--team) 22%, transparent), transparent 70%);}
#roleHud > *{position:relative; z-index:1;}
#roleHud .m2-rolehud-name{text-shadow:0 0 18px color-mix(in srgb, var(--team) 60%, transparent), 0 2px 0 rgba(0,0,0,0.6); letter-spacing:.02em;}
#roleHud .m2-rolehud-team{letter-spacing:.25em;}
#roleHud .m2-rolehud-fig .m2-fig, #roleHud .m2-fig{filter:drop-shadow(0 6px 6px rgba(0,0,0,0.5)) drop-shadow(0 0 12px color-mix(in srgb, var(--team) 45%, transparent));}

/* ---------- 왼쪽 임무 목록: 유리 카드 + 체크 원 ---------- */
#taskHud{border:1px solid rgba(255,255,255,0.1) !important; background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 40%), #0b0d15 !important;
  box-shadow:0 0 0 1px rgba(0,0,0,0.55), 0 14px 34px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08) !important;}
#taskHud .m2-task-bar i{height:9px; background:rgba(0,0,0,0.5); box-shadow:inset 0 1px 3px rgba(0,0,0,0.7);}
#taskHud .m2-task-bar i b{background:linear-gradient(90deg, #22c55e, #86efac); position:relative;}
#taskHud .m2-task{padding:5px 6px; margin:1px -6px; border-radius:8px; transition:background .2s;}
#taskHud .m2-task:not(.done):hover{background:rgba(255,255,255,0.04);}
#taskHud .m2-task .ck{flex-shrink:0; width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,0.25); background:none; padding:0; box-sizing:border-box;}
#taskHud .m2-task.done .ck{border-color:#22c55e; background:#22c55e; box-shadow:0 0 8px rgba(34,197,94,0.6);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.5 L7 11 L12 5' fill='none' stroke='%23062b14' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size:100%;}
#taskHud .m2-task.done{opacity:.6;}

/* ---------- 지도: 어두운 작전판 + 입체 방 ---------- */
.m2-sabmap-box{border:1px solid rgba(255,255,255,0.14) !important; outline:3px solid #0b0d14; border-radius:16px !important;
  background:radial-gradient(ellipse at 50% 40%, #2a3346, #141925 75%) !important;
  box-shadow:0 0 0 1px rgba(0,0,0,0.6), 0 24px 60px rgba(0,0,0,0.7), inset 0 0 60px rgba(0,0,0,0.5) !important;}
.m2-sabmap-box::before{content:''; position:absolute; inset:0; border-radius:16px; pointer-events:none; opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size:24px 24px;}
.m2-sabmap.mode-map .m2-sabmap-svg .room{filter:drop-shadow(0 4px 0 rgba(0,0,0,0.45)) drop-shadow(0 0 10px rgba(80,150,255,0.25));}
.m2-sabmap:not(.mode-map) .m2-sabmap-svg .room{filter:drop-shadow(0 4px 0 rgba(0,0,0,0.45)) drop-shadow(0 0 10px rgba(255,80,80,0.25));}
.m2-sabmap.mode-map .m2-sabmap-svg .path{fill:#5c7392; stroke:#5c7392;}
.m2-sabmap:not(.mode-map) .m2-sabmap-svg .path{fill:#7d5a64; stroke:#7d5a64;}
.m2-sabmap-svg .me{stroke-width:10; filter:drop-shadow(0 0 12px #fff);}
.m2-sabmap-close{background:#e8ecf3 !important; box-shadow:0 3px 0 #0b0d14;}
/* 지도 방 색 차분하게 + 밝은 테두리(입체 모서리) */
.m2-sabmap:not(.mode-map) .m2-sabmap-svg .room{fill:#9e2a32; stroke:#e0646a; stroke-width:6;}
.m2-sabmap.mode-map .m2-sabmap-svg .room{fill:#2b5aa6; stroke:#6f9be6; stroke-width:6;}
.m2-sabmap .m2-map-name{-webkit-text-stroke-color:#0b0d14 !important;}

/* 통신 중계기 복구 창이 오른쪽 아래에 떴다가 가운데로 튀던 버그 (2026-10-20):
   가운데 맞춤(transform:translate(-50%,-50%))을 등장 애니메이션(m2-mt-in, transform)이 덮어써서 애니메이션 동안 맞춤이 풀렸음.
   → 가운데 맞춤을 transform 대신 inset + margin:auto로 */
.m2-fix{left:0; right:0; top:0; bottom:0; margin:auto; width:fit-content; height:fit-content; max-width:calc(100% - 24px); transform:none;}
/* 도굴 미니게임 관도 같은 문제(가운데 맞춤을 등장 애니메이션이 덮어씀) → 맞춤은 translate 속성으로 따로 */
.m2-mg-coffin{transform:none; translate:-50% -50%;}

/* ---------- 마녀 저주 개구리 (2026-10-21): 회의 카드/처치·체포·포교 연출에서 두건 자리에 작은 개구리 ---------- */
.m2-hfig.m2-hfig-frog{aspect-ratio:60/80;}
.m2-hfig.m2-hfig-frog img{inset:auto; left:4%; bottom:4%; width:92%; height:auto;}

/* ---------- 내 직업 카드: 직업 초상화 (2026-10-21, profile/{직업키}.webp 540x540 검은 배경) ----------
   팀 색 테두리 + 은은한 빛, 아래쪽은 카드 색으로 녹아들고 위쪽엔 유리 반사. 그림이 없는 직업은 예전 로브 그림(.m2-fig). */
.m2-rolehud-fig.has-portrait{--w:56px;}
.m2-side .m2-rolehud-fig.has-portrait{--w:min(100%, 168px);}
.m2-portrait{position:relative; display:block; width:var(--w); aspect-ratio:1; border-radius:16px; overflow:hidden; isolation:isolate;
  background:#05060a; border:1px solid color-mix(in srgb, var(--team) 55%, rgba(255,255,255,0.15));
  box-shadow:0 0 0 1px rgba(0,0,0,0.6), 0 0 24px color-mix(in srgb, var(--team) 32%, transparent), 0 12px 26px rgba(0,0,0,0.55);
  animation:m2-portrait-in .5s cubic-bezier(.2,.9,.3,1) both;}
.m2-portrait img{display:block; width:100%; height:100%; object-fit:cover; user-select:none;}
.m2-portrait::before{content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--team) 26%, transparent), transparent 60%),
             linear-gradient(180deg, transparent 58%, rgba(6,8,14,0.85) 100%);}
.m2-portrait::after{content:''; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  background:linear-gradient(125deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 32%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08), inset 0 -18px 30px -18px color-mix(in srgb, var(--team) 60%, transparent);}
@keyframes m2-portrait-in{from{opacity:0; transform:scale(.94); filter:blur(4px);} to{opacity:1; transform:none; filter:none;}}
.m2-rolehud.lost .m2-portrait{border-color:rgba(255,255,255,0.18); box-shadow:0 0 0 1px rgba(0,0,0,0.6), 0 12px 26px rgba(0,0,0,0.55);}
/* 작은 카드(왼쪽 자리 없을 때, 폰): 초상화 칸을 조금 넓힘 */
@media (max-width:1619px){
  .m2-side .m2-rolehud-body:has(.has-portrait){grid-template-columns:56px 1fr;}
  .m2-side .m2-rolehud-fig.has-portrait{--w:56px;}
  .m2-side .m2-portrait{border-radius:12px;}
}
@media (max-width:640px){
  .m2-rolehud-body:has(.has-portrait), .m2-side .m2-rolehud-body:has(.has-portrait){grid-template-columns:48px 1fr;}
  .m2-rolehud-fig.has-portrait, .m2-side .m2-rolehud-fig.has-portrait{--w:48px;}
  .m2-portrait{border-radius:10px;}
}

/* ---------- 왼쪽 칸 정렬 (2026-10-21 "사진이 가운데가 아니고 배치가 어긋남") ----------
   직업 카드가 게임 창 위에 떠 있을 때 쓰던 left/top 12px가 왼쪽 칸(position:relative)에서도 남아 카드만 오른쪽 아래로 12px
   밀려 있었음(임무 카드와 어긋남). 초상화는 그림 칸(202px) 왼쪽에 붙어 있었음 → 칸을 꽉 채우고 가운데. */
.m2-side .m2-rolehud{left:auto; top:auto; right:auto; bottom:auto;}
.m2-side .m2-rolehud-fig.has-portrait{display:flex; justify-content:center; justify-self:stretch; --w:168px;}
.m2-side .m2-rolehud-fig.has-portrait .m2-portrait{max-width:100%;}
@media (max-width:1619px){
  .m2-side .m2-rolehud-fig.has-portrait{display:block; justify-self:start; --w:56px;}
}
@media (max-width:640px){
  .m2-side .m2-rolehud-fig.has-portrait{--w:48px;}
}
.m2-rolehud-desc{word-break:keep-all; overflow-wrap:break-word;}   /* 한국어 단어 중간에서 안 끊기게 */

/* ---------- 개구리 그림(img) 공용 크기 (2026-10-21 FROG_SVG가 props/frog.svg 이미지로 바뀜) ---------- */
.m2-frog-img{display:block; width:100%; height:100%; object-fit:contain; user-select:none;}
.m2-fx-frog .m2-frog-img{height:auto;}

/* ---------- 직업 카드 설명 읽기 쉽게 (2026-10-21 "그림 바로 아래 글씨가 잘 안 보임") ----------
   팀 색 배경 위 작은 회색 글씨 + 팀 색 키워드라 대비가 낮았음 → 어두운 판 위에 밝은 글씨, 키워드는 밝게 띄운 칩. */
#roleHud .m2-rolehud-desc{color:#f1edf7; font-size:13px; line-height:1.65; font-weight:500;
  padding:10px 12px; border-radius:12px; background:rgba(4,5,10,0.55); border:1px solid rgba(255,255,255,0.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04); text-shadow:0 1px 2px rgba(0,0,0,0.6);}
#roleHud .m2-rolehud-desc b{display:inline-block; margin:0 3px 0 0; padding:0 7px; border-radius:6px; font-size:12px; line-height:1.55; text-shadow:none;
  color:#fff; background:color-mix(in srgb, var(--team) 55%, #000); border:1px solid color-mix(in srgb, var(--team) 70%, #fff 10%);}
.m2-side #roleHud .m2-rolehud-desc{width:100%; box-sizing:border-box; text-align:left;}
.m2-side #roleHud .m2-rolehud-body{gap:12px;}

/* ---------- 임무 목록: 구스구스덕식 (2026-10-21 "임무란 퀄리티 낮음, 9/25 숫자 나오면 안 됨") ---------- */
#taskHud{padding:0 !important; overflow:hidden; border-radius:14px !important;
  background:linear-gradient(180deg, #151b28, #0c1019) !important; border:1px solid rgba(255,255,255,0.1) !important;
  box-shadow:0 0 0 1px rgba(0,0,0,0.55), 0 14px 34px rgba(0,0,0,0.5) !important;}
.m2-duty-prog{display:grid; gap:7px; padding:12px 14px 11px;}
.m2-duty-prog > span{font-size:11px; font-weight:900; letter-spacing:.22em; color:#9fb2c9;}
.m2-duty-meter{position:relative; height:14px; border-radius:5px; overflow:hidden; background:#070a10;
  border:2px solid #2b3446; box-shadow:inset 0 2px 5px rgba(0,0,0,0.7);}
.m2-duty-meter b{position:relative; display:block; height:100%; border-radius:2px; transition:width .7s cubic-bezier(.2,.9,.3,1);
  background:linear-gradient(180deg, #8dffa6, #34c862 55%, #1f9a49); box-shadow:0 0 12px rgba(60,220,110,0.55);}
.m2-duty-meter b::after{content:''; position:absolute; inset:0; opacity:.5;
  background:repeating-linear-gradient(-45deg, rgba(255,255,255,0.22) 0 6px, transparent 6px 12px); animation:m2-duty-stripe 1.2s linear infinite;}
@keyframes m2-duty-stripe{to{background-position:17px 0;}}
.m2-duty-head{all:unset; box-sizing:border-box; display:flex; align-items:center; gap:8px; width:100%; padding:9px 14px; cursor:pointer;
  background:linear-gradient(180deg, #252f42, #1a2131); border-top:1px solid rgba(255,255,255,0.08); border-bottom:1px solid rgba(0,0,0,0.55);}
.m2-duty-head b{font-size:14px; font-weight:900; letter-spacing:.08em; color:#f4f7fc;}
.m2-duty-head small{font-size:11px; font-weight:700; color:#ff9a9a;}
.m2-duty-head i{margin-left:auto; font-style:normal; font-size:10px; color:#c3cfe0; transition:transform .2s;}
.m2-duty-head:hover{background:linear-gradient(180deg, #2b3650, #1e2638);}
#taskHud.collapsed .m2-duty-head i{transform:rotate(180deg);}
#taskHud.collapsed .m2-duty-list{display:none;}
.m2-duty-list{list-style:none; margin:0; padding:6px 8px 9px; background:rgba(0,0,0,0.16);}
.m2-duty{display:flex; align-items:center; gap:10px; padding:7px 6px; border-radius:8px; font-size:13.5px; font-weight:700; color:#eef2f8; transition:background .15s;}
.m2-duty + .m2-duty{border-top:1px solid rgba(255,255,255,0.045);}
.m2-duty:not(.done):hover{background:rgba(255,255,255,0.04);}
.m2-duty-ic{position:relative; flex-shrink:0; width:11px; height:11px; margin:0 2px; transform:rotate(45deg); border-radius:2px;
  border:2px solid #ffd65a; box-shadow:0 0 8px rgba(255,214,90,0.45);}
.m2-duty-ic::after{content:''; position:absolute; inset:2px; border-radius:1px; background:#ffd65a;}
.m2-duty.multi .m2-duty-ic{border-color:#8ecae6; box-shadow:0 0 8px rgba(142,202,230,0.45);}
.m2-duty.multi .m2-duty-ic::after{background:#8ecae6;}
.m2-duty-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.m2-duty-name em{font-style:normal; font-size:11px; font-weight:800; color:#8ecae6; margin-left:6px;}
.m2-duty-place{flex-shrink:0; font-size:11px; font-weight:700; color:#8391a6;}
.m2-duty.done{color:#5d697b;}
.m2-duty.done .m2-duty-name{text-decoration:line-through; text-decoration-color:rgba(255,255,255,0.25);}
.m2-duty.done .m2-duty-place{color:#4a5566;}
.m2-duty.done .m2-duty-ic{width:16px; height:16px; margin:0; transform:none; border:none; border-radius:50%; background:#22c55e; box-shadow:0 0 8px rgba(34,197,94,0.5);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.5 L7 11 L12 5' fill='none' stroke='%23062b14' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size:100%;}
.m2-duty.done .m2-duty-ic::after{display:none;}
@media (max-width:640px){
  .m2-duty{font-size:12px; padding:5px 4px;} .m2-duty-head{padding:7px 10px;} .m2-duty-prog{padding:9px 10px 8px;}
}

/* ---------- 직업 설명: 능력마다 블록 (2026-10-21 "[ ] 안 써도 됨, 가독성") ----------
   키워드 칩(괄호 없음)을 제목처럼 위에, 설명은 그 아래 밝고 큰 글씨. 직업 카드와 배정 연출(#introDesc) 공용. */
.m2-abil{text-align:left;}
.m2-abil + .m2-abil{margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,0.07);}
.m2-abil b{display:inline-block; margin:0 0 5px; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:900; letter-spacing:.04em; line-height:1.5;
  color:#fff; background:color-mix(in srgb, var(--team, var(--glow, #6aa8ff)) 60%, #000); border:1px solid color-mix(in srgb, var(--team, var(--glow, #6aa8ff)) 75%, #fff 10%);
  box-shadow:0 0 10px color-mix(in srgb, var(--team, var(--glow, #6aa8ff)) 30%, transparent);}
.m2-abil p{margin:0; font-size:13.5px; line-height:1.62; font-weight:500; color:#f4f1f8; letter-spacing:-.005em; word-break:keep-all; overflow-wrap:break-word;}
#roleHud .m2-rolehud-desc{padding:12px 14px; text-shadow:none;}
#roleHud .m2-abil b{margin:0 0 5px; padding:2px 10px; font-size:12px; line-height:1.5;}
.m2-intro-desc .m2-abil{text-align:center;}
.m2-intro-desc .m2-abil p{font-size:15px;}
@media (max-width:1619px){
  .m2-side #roleHud .m2-rolehud-desc{padding:8px 12px;}
  .m2-side .m2-abil + .m2-abil{margin-top:6px; padding-top:6px;}
  .m2-side .m2-abil{display:flex; align-items:baseline; gap:8px;}
  .m2-side .m2-abil b{flex-shrink:0; margin:0;}
  .m2-side .m2-abil p{font-size:12.5px;}
}

/* ---------- 결과 서류 카드 공용 (showFile, 2026-10-21 "공무원 결과 UI 저퀄리티") ---------- */
.m2-file-portrait{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 20%;}
.m2-intel-photo:has(.m2-file-portrait){border-radius:6px; box-shadow:inset 0 0 0 3px rgba(255,255,255,0.6), 0 6px 14px rgba(0,0,0,0.35);}
.m2-intel.play .m2-intel-photo:has(.m2-file-portrait){animation:m2-intel-photo .5s .35s cubic-bezier(.2,1.3,.4,1) both;}
.m2-file-q{align-self:center; justify-self:center; font-size:76px; font-weight:900; color:rgba(42,31,16,0.3); line-height:1;}
.m2-file-v{font-size:22px; font-weight:900; margin-bottom:8px; line-height:1.2; word-break:keep-all;}
.m2-file-v.role{font-size:32px; color:#7a1a1a;}
.m2-intel.play .m2-file-v.role{animation:m2-intel-reveal .9s 1s ease-out both;}
.m2-file-v.names{display:flex; flex-wrap:wrap; gap:6px; font-size:18px;}
.m2-file-name{padding:3px 11px; border-radius:6px; background:rgba(255,255,255,0.55); border:2px dashed rgba(27,37,64,0.45);}
.m2-intel.play .m2-file-name{animation:m2-intel-reveal .7s 1.3s ease-out both;}
/* 공무원: 흰 공문서 종이 + 파란 줄 + 파란 직인 */
.m2-intel.record .m2-intel-file{color:#1b2540;
  background:repeating-linear-gradient(180deg, transparent 0 23px, rgba(60,100,170,0.13) 23px 24px), linear-gradient(160deg, #fbfaf4, #ece8d8 65%, #ddd6bd);
  box-shadow:0 18px 40px rgba(0,0,0,0.6), inset 0 0 40px rgba(60,80,120,0.15);}
.m2-intel.record .m2-intel-tab{background:#ece8d8;}
.m2-intel.record .m2-intel-head{border-bottom-color:rgba(27,37,64,0.4);}
.m2-intel.record .m2-intel-head b, .m2-intel.record .m2-file-v.role{color:#1f4fa0;}
.m2-intel.record .m2-intel-info small{color:#5a6684;}
.m2-intel.record .m2-intel-info p{color:#3a4462;}
.m2-intel.record .m2-intel-stamp{color:#2a5bc4; border-color:#2a5bc4; border-radius:50%; padding:10px 12px;}
/* 간호사: 분홍 진료 차트 */
.m2-intel.nurse .m2-intel-file{color:#3a1626; background:linear-gradient(160deg, #fff6f9, #fbdde7 60%, #f2c3d2);
  box-shadow:0 18px 40px rgba(0,0,0,0.6), inset 0 0 40px rgba(200,80,120,0.18);}
.m2-intel.nurse .m2-intel-tab{background:#fbdde7;}
.m2-intel.nurse .m2-intel-head{border-bottom-color:rgba(120,30,70,0.4);}
.m2-intel.nurse .m2-intel-head b, .m2-intel.nurse .m2-file-v.role{color:#c2185b;}
.m2-intel.nurse .m2-intel-info small, .m2-intel.nurse .m2-intel-info p{color:#8a4a62;}
.m2-intel.nurse .m2-intel-stamp{color:#d6336c; border-color:#d6336c;}
/* 실패/없음: 회색 도장, 사진 흐리게 */
.m2-intel.fail .m2-intel-stamp{color:#6a6f7a; border-color:#6a6f7a;}
.m2-intel.fail .m2-file-v.role{color:#6a6f7a;}
.m2-intel.fail .m2-intel-photo{filter:grayscale(.8) brightness(.9);}
.m2-intel .m2-intel-info{text-align:left; align-items:flex-start;}
.m2-intel .m2-file-v.names{justify-content:flex-start;}

/* ---------- 위쪽 시계 2차 퀄리티 업 (2026-10-21 "아직 저퀄") ----------
   해/달 둘레에 남은 시간 원형 게이지(--p, script.js), 시간은 어두운 계기판 칸, 막대는 가늘게 + 눈금, 판 전체에 유리 반사. */
.m2-hud .m2-clock{position:relative; height:54px; box-sizing:border-box; padding:6px 8px 6px 7px; gap:12px; border-radius:999px; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0) 48%),
    radial-gradient(ellipse at 12% 50%, color-mix(in srgb, var(--c) 26%, transparent), transparent 55%),
    linear-gradient(180deg, #161a26, #0b0d15);
  border:1px solid color-mix(in srgb, var(--c) 45%, rgba(255,255,255,0.1));
  box-shadow:0 0 0 1px rgba(0,0,0,0.6), 0 0 28px color-mix(in srgb, var(--c) 22%, transparent), 0 12px 28px rgba(0,0,0,0.5), inset 0 -10px 18px rgba(0,0,0,0.35);}
.m2-hud .m2-clock::after{content:''; position:absolute; left:12%; right:12%; top:0; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);}
.m2-hud .m2-clock-ic{position:relative; width:40px; height:40px; font-size:19px; animation:none;
  background:radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--c) 40%, #2a2a36), #0d0f17 72%);
  box-shadow:0 0 16px color-mix(in srgb, var(--c) 55%, transparent), inset 0 1px 0 rgba(255,255,255,0.18);}
.m2-hud .m2-clock-ic::before{content:''; position:absolute; inset:-3px; border-radius:50%;
  background:conic-gradient(from -90deg, var(--c) calc(var(--p, 1) * 360deg), rgba(255,255,255,0.1) 0);
  -webkit-mask:radial-gradient(circle, transparent 19px, #000 19.5px); mask:radial-gradient(circle, transparent 19px, #000 19.5px);
  filter:drop-shadow(0 0 4px var(--c));}
.m2-hud .m2-clock b{font-size:15px; letter-spacing:.02em; text-shadow:0 1px 0 rgba(0,0,0,0.6);}
.m2-hud .m2-clock-track{width:120px; height:6px; border:none; background:rgba(255,255,255,0.08);
  background-image:repeating-linear-gradient(90deg, transparent 0 11px, rgba(0,0,0,0.5) 11px 12px); box-shadow:inset 0 1px 2px rgba(0,0,0,0.8);}
.m2-hud .m2-clock-time{min-width:auto; padding:4px 11px; border-radius:10px; font-size:17px; letter-spacing:.06em;
  background:linear-gradient(180deg, #05060a, #10131d); border:1px solid rgba(255,255,255,0.08);
  box-shadow:inset 0 2px 6px rgba(0,0,0,0.8), 0 0 0 1px rgba(0,0,0,0.5);}
.m2-hud .m2-clock-hint{padding:0 10px 0 2px; font-size:11.5px; font-weight:600; color:#a9b4c8;}
.m2-hud .m2-clock-hint:not(:empty)::before{content:''; display:inline-block; width:4px; height:4px; margin:0 8px 2px 0; border-radius:50%; background:var(--c); box-shadow:0 0 6px var(--c); vertical-align:middle;}

/* ---------- 직업 안내 알약 (#jobChip) 퀄리티 업 ---------- */
.m2-job-chip{display:flex; align-items:center; gap:9px; bottom:52px; padding:5px 16px 5px 5px; border-radius:999px; color:#eafffb;
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 50%), linear-gradient(180deg, rgba(14,40,40,0.92), rgba(8,20,24,0.94));
  border:1px solid rgba(95,224,196,0.4); box-shadow:0 0 0 1px rgba(0,0,0,0.5), 0 0 22px rgba(95,224,196,0.18), 0 10px 22px rgba(0,0,0,0.45);
  font-weight:700; font-size:13px; letter-spacing:-.01em;}
.m2-job-chip.hidden{display:none;}
.m2-job-chip i{display:grid; place-items:center; flex-shrink:0; width:26px; height:26px; border-radius:50%; font-style:normal; font-size:14px;
  background:radial-gradient(circle at 40% 35%, rgba(95,224,196,0.45), rgba(10,50,46,0.95)); box-shadow:0 0 10px rgba(95,224,196,0.4), inset 0 1px 0 rgba(255,255,255,0.2);}
.m2-job-chip span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ---------- 💬 채팅 버튼(빨간 점) + 대기실 채팅 서랍 (2026-10-26, PC/폰 공용) ---------- */
.m2-stagebtns{position:absolute; top:12px; right:12px; z-index:7; display:flex; gap:8px;}
.m2-sbtn{position:relative; display:grid; place-items:center; width:46px; height:46px; padding:0; font-size:22px; line-height:1; cursor:pointer;
  color:#fff; background:radial-gradient(circle at 40% 30%, rgba(70,84,120,0.95), rgba(14,18,30,0.95)); border:2px solid rgba(255,255,255,0.16);
  border-radius:14px; box-shadow:0 4px 14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15); transition:transform .12s;}
.m2-sbtn:active{transform:scale(.92);}
.m2-sbtn.hidden{display:none;}
.m2-dot{position:absolute; top:-4px; right:-4px; width:14px; height:14px; border-radius:50%; background:#ff3b3b; border:2px solid #0b0c11;
  box-shadow:0 0 8px rgba(255,59,59,0.8); animation:m2-dot-pop .35s cubic-bezier(.2,1.6,.4,1);}
.m2-dot.hidden{display:none;}
@keyframes m2-dot-pop{from{transform:scale(0);}}
.m2-chatdrawer{position:absolute; top:68px; right:12px; bottom:12px; z-index:8; width:min(330px, 46%); display:flex; flex-direction:column; gap:8px;
  padding:12px; text-align:left; background:linear-gradient(180deg, rgba(20,28,46,0.94), rgba(8,12,22,0.94)); border:1px solid rgba(120,190,255,0.35);
  border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,0.55); animation:m2-mt-in .25s cubic-bezier(.2,1.2,.4,1);}
.m2-chatdrawer.hidden{display:none;}
.m2-chatdrawer-head{display:flex; align-items:center; justify-content:space-between;}
.m2-chatdrawer-head b{font-weight:900; color:#cfe6ff;}
.m2-chatdrawer-head .m2-landpanel-x{position:static;}
.m2-lchat-log{flex:1; min-height:80px; overflow-y:auto; padding:6px 8px; font-size:13px; background:rgba(0,0,0,0.3); border-radius:10px;}
.m2-lchat-log p{margin:0 0 5px; color:#e6ecf5; word-break:break-all;}
.m2-lchat-log p i{display:inline-block; width:9px; height:9px; margin-right:5px; border-radius:50%; vertical-align:middle; box-shadow:0 0 0 1px rgba(0,0,0,0.6);}
.m2-lchat-log p b{margin-right:6px; color:#8fd0ff;}
.m2-lchat-log p.me b{color:#ffd84a;}
.m2-chatdrawer .m2-mchat-input:focus{border-color:#8fd0ff;}

/* 닫기 X (꾸미기/설정/채팅 공용) */
.m2-landpanel-x{position:absolute; left:10px; top:10px; display:grid; place-items:center; width:36px; height:36px; padding:0; font-size:17px; font-weight:900;
  color:#1d1f29; background:#e8edf5; border:3px solid #1d1f29; border-radius:50%; cursor:pointer; z-index:2;}

/* ---------- 모바일 가로 (body.m2-land) ---------- */
.m2-land-only{display:none !important;}
body.m2-land.m2-ingame{overflow:hidden;}
body.m2-land.m2-ingame nav, body.m2-land.m2-ingame .page-title{display:none !important;}
body.m2-land .m2-wrap{max-width:none; margin:0; padding:0;}
body.m2-land #gamePanel{position:fixed; inset:0; margin:0; z-index:50;}
body.m2-land .m2-play{position:static;}
body.m2-land .m2-stage{position:fixed !important; inset:0; width:auto !important; height:auto !important; min-height:0; margin:0; border:0; border-radius:0; z-index:1;}
body.m2-land #lobbyBar{display:none !important;}
body.m2-land #leaveBtn{display:none;}
/* 시계: 위 가운데 작게 */
body.m2-land .m2-hud{position:fixed; top:6px; left:50%; z-index:20; min-height:0; margin:0; transform:translateX(-50%) scale(.78); transform-origin:top center; pointer-events:none;}
body.m2-land .m2-hud .m2-clock-hint{display:none;}
/* 왼쪽 위: 직업 카드 + 임무 (작게, 누르면 접힘) */
body.m2-land .m2-side:not(.right){position:fixed; left:8px; top:8px; z-index:20; width:230px; max-height:calc(100vh - 16px); margin:0; overflow-y:auto;
  transform:scale(.82); transform-origin:top left;}
/* 마피아/교주 채널: 💬 버튼으로 여는 오른쪽 서랍 */
body.m2-land .m2-side.right{display:none !important;}
body.m2-land.m2-chat-open .m2-side.right:has(> :not(.hidden)){display:flex !important; position:fixed; left:auto; right:10px; top:66px; bottom:10px; width:min(300px, 44vw); z-index:40; margin:0;}
body.m2-land.m2-chat-open .m2-side.right .m2-mchat{flex:1; min-height:0;}
body.m2-land.m2-chat-open .m2-side.right .m2-mchat-log{flex:1; height:auto;}
/* 버튼들: 엄지 크기로 살짝 줄임 */
body.m2-land .m2-actions{transform:scale(.8); transform-origin:bottom right;}
body.m2-land .m2-dev{left:8px; right:auto; bottom:8px; align-items:flex-start; transform:scale(.8); transform-origin:bottom left;}
body.m2-land .m2-stagebtns{top:10px; right:10px;}
body.m2-land .m2-mchat-input{font-size:16px;}   /* 아이폰: 16px 아래면 입력할 때 화면이 확대됨 */
body.m2-land .m2-rulesboard{transform:scale(.8); transform-origin:top left; left:8px; top:8px;}
body.m2-land .m2-chatdrawer{top:64px; right:10px; bottom:10px;}
body.m2-land .m2-sbtn.m2-land-only{display:grid !important;}

/* 대기실(가로): 가운데 아래 방 정보 + 시작 / 오른쪽 아래 꾸미기 */
body.m2-land.m2-lobbyphase .m2-landbottom{display:flex !important;}
body.m2-land.m2-lobbyphase .m2-landcustom{display:flex !important;}
.m2-landbottom{position:absolute; left:50%; bottom:12px; z-index:6; transform:translateX(-50%); align-items:center; gap:12px;}
.m2-landroom{display:flex; align-items:center; gap:10px; padding:6px 16px 6px 6px; white-space:nowrap;
  background:linear-gradient(180deg, rgba(30,36,54,0.9), rgba(10,12,20,0.92)); border:1px solid rgba(255,255,255,0.14); border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,0.5);}
.m2-landlock{padding:5px 12px; font-size:13px; font-weight:900; letter-spacing:.06em; color:#0d2a10; background:linear-gradient(#9cf08a, #46b83a);
  border:2px solid #1d1f29; border-radius:10px;}
.m2-landlock.locked{color:#2a1d02; background:linear-gradient(#ffd56a, #e0a320);}
.m2-landroom b{max-width:34vw; overflow:hidden; text-overflow:ellipsis; font-size:15px; font-weight:900; color:#fff;}
.m2-landcount{font-family:Orbitron, var(--font); font-size:15px; font-weight:700; color:#7dff8a;}
.m2-landcount::before{content:'👤 '; font-family:var(--font);}
.m2-landstart{min-width:96px; height:46px; padding:0 20px; font-family:var(--font); font-size:18px; font-weight:900; color:#2a1d02; cursor:pointer;
  background:linear-gradient(#ffe27a, #f2b818); border:3px solid #1d1f29; border-radius:14px; box-shadow:0 0 18px rgba(255,210,60,0.5), inset 0 -4px 0 rgba(0,0,0,0.2);}
.m2-landstart:active{transform:scale(.95);}
.m2-landstart.hidden{display:none;}
.m2-landcustom{position:absolute; right:12px; bottom:12px; z-index:6; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  width:76px; height:76px; padding:0; font-family:var(--font); font-size:12px; font-weight:900; color:#fff; cursor:pointer;
  background:radial-gradient(circle at 40% 30%, rgba(80,96,140,0.95), rgba(14,18,30,0.95)); border:2px solid rgba(255,255,255,0.18); border-radius:18px;
  box-shadow:0 6px 18px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15);}
.m2-landcustom span{font-size:30px; line-height:1;}
.m2-landcustom:active{transform:scale(.94);}

/* 꾸미기 / 설정 창 (어몽어스 꾸미기 창처럼: 위 탭, 왼쪽 내 캐릭터, 오른쪽 색 칸) */
.m2-landpanel{position:absolute; inset:0; z-index:30; display:grid; place-items:center; padding:10px; background:rgba(4,6,12,0.55);}
.m2-landpanel.hidden{display:none;}
.m2-landpanel-box{position:relative; width:min(600px, 94%); max-height:94%; box-sizing:border-box; overflow:auto; padding:14px 16px 16px 58px;
  background:linear-gradient(180deg, #2b3446, #171c27); border:3px solid #1d1f29; border-radius:18px; box-shadow:0 12px 40px rgba(0,0,0,0.65);
  animation:m2-mt-in .25s cubic-bezier(.2,1.2,.4,1);}
.m2-landtabs{display:flex; gap:6px; margin-bottom:10px;}
.m2-landtabs b{padding:6px 18px; font-size:15px; font-weight:900; color:#1d1f29; background:#cfe0c8; border:2px solid #1d1f29; border-radius:8px 8px 4px 4px;}
.m2-landcustom-body{display:grid; grid-template-columns:150px 1fr; gap:14px;}
.m2-landpreview{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; height:180px; padding:10px;
  background:radial-gradient(circle at 50% 60%, rgba(255,255,255,0.12), rgba(0,0,0,0.25)); border:2px solid #1d1f29; border-radius:12px;}
.m2-landpreview .m2-hfig{height:120px;}
.m2-landpreview b{font-size:14px; font-weight:900; color:#fff;}
.m2-landpalette{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; align-content:start; padding:12px;
  background:rgba(0,0,0,0.25); border:2px solid #1d1f29; border-radius:12px;}
.m2-landpalette .m2-swatch{position:relative; width:auto; height:auto; aspect-ratio:1; border-radius:10px; border:3px solid #1d1f29;}
.m2-landpalette .m2-swatch.on{border-color:#fff; box-shadow:0 0 0 3px #1d1f29, 0 0 14px rgba(255,255,255,0.6);}
.m2-landpalette .m2-swatch:disabled{opacity:.75;}
.m2-landpalette .m2-swatch:disabled::after{content:'✕'; position:absolute; inset:0; display:grid; place-items:center; font-size:22px; font-weight:900;
  color:rgba(20,20,26,0.75);}
.m2-landsettings{display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:14px;}
.m2-landsettings label.m2-lobby-label{display:flex; margin:0; gap:10px; font-size:14px; color:#dfe6f2;}
.m2-landsettings .m2-vol input[type=range]{width:150px;}
.m2-landsettings #rulesBtn{margin-top:2px;}
/* 가로 꾸미기 창: 색 칸을 고정 크기로 (화면 높이가 낮아서 칸이 커지면 스크롤이 생겼음) */
.m2-landpanel-box:has(.m2-landcustom-body){width:auto;}
.m2-landcustom-body{grid-template-columns:140px auto;}
.m2-landpreview{height:auto; min-height:150px;}
.m2-landpreview .m2-hfig{height:100px;}
.m2-landpalette{grid-template-columns:repeat(4, 50px); gap:9px;}
.m2-landpalette .m2-swatch{width:50px; height:50px;}

/* ---------- 세로 폰: 게임 화면을 90도 돌려 가로로 (body.m2-rot, 2026-10-26 "모바일이면 자동으로 가로") ----------
   rotate(90deg) 후 translateX(100vw): 게임 화면 (x, y) → 화면 (100vw - y, x). JS evPt/boxOf가 같은 식으로 좌표를 되돌림.
   돌린 #gamePanel 안의 position:fixed 요소들은 이 판 기준으로 붙음(transform이 기준 상자가 됨). */
body.m2-rot.m2-ingame{overflow:hidden;}
body.m2-rot.m2-ingame #gamePanel{position:fixed; inset:0 auto auto 0;
  width:100vh; width:100dvh; height:100vw; transform-origin:top left; transform:translateX(100vw) rotate(90deg);}
body.m2-land .m2-side:not(.right){max-height:calc(100% - 16px);}

/* ---------- 방 입장 로딩 (홈 .intro와 같은 연출, 2026-10-26) ---------- */
/* (2026-10-28 "로딩창 마피아 시즌2에 맞게") 밤 도시: 하늘(달·서치라이트) / 건물 실루엣 두 겹(창문 깜빡) / 안개 / 가운데 타이틀·두건 무리·막대·팁 */
.m2-joinloader{position:fixed; inset:0; z-index:5000; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(900px 500px at 50% 110%, rgba(255,70,70,0.16), transparent 65%), linear-gradient(#05060c, #0d1022 55%, #1a1020);
  transition:opacity .45s ease, transform .45s ease;}
.m2-joinloader.hidden{display:none;}
.m2-joinloader.out{opacity:0; transform:scale(1.03); pointer-events:none;}
.m2-jl-sky{position:absolute; inset:0; pointer-events:none;}
.m2-jl-sky .moon{position:absolute; right:12%; top:10%; width:clamp(70px, 10vw, 130px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 38% 38%, #fffbea, #f1e6c0 55%, #d8c99a); box-shadow:0 0 60px rgba(255,240,200,0.45), 0 0 140px rgba(255,240,200,0.18);}
.m2-jl-sky .moon::after{content:''; position:absolute; left:22%; top:52%; width:16%; aspect-ratio:1; border-radius:50%; background:rgba(160,140,100,0.25); box-shadow:2.2em -1.4em 0 -.2em rgba(160,140,100,0.2);}
.m2-jl-sky .beam{position:absolute; left:18%; bottom:22%; width:14vw; height:90vh; transform-origin:50% 100%; clip-path:polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  background:linear-gradient(rgba(255,255,220,0), rgba(255,255,220,0.07)); filter:blur(12px); animation:m2JlBeam 6s ease-in-out infinite alternate;}
.m2-jl-sky .beam.b2{left:auto; right:24%; animation-duration:7.5s; animation-delay:-3s;}
@keyframes m2JlBeam{from{transform:rotate(-24deg);} to{transform:rotate(22deg);}}
.m2-jl-city{position:absolute; left:0; right:0; bottom:0; height:38vh; pointer-events:none;}
.m2-jl-city .row{position:absolute; left:-2%; right:-2%; bottom:0;}
.m2-jl-city .row.back{height:78%; background:#141729;
  clip-path:polygon(0 100%, 0 40%, 6% 40%, 6% 22%, 11% 22%, 11% 48%, 17% 48%, 17% 12%, 21% 12%, 21% 4%, 23% 4%, 23% 12%, 27% 12%, 27% 44%, 34% 44%, 34% 28%, 41% 28%, 41% 52%, 47% 52%, 47% 18%, 53% 18%, 53% 36%, 60% 36%, 60% 8%, 66% 8%, 66% 40%, 72% 40%, 72% 24%, 79% 24%, 79% 46%, 85% 46%, 85% 16%, 91% 16%, 91% 38%, 100% 38%, 100% 100%);}
.m2-jl-city .row.front{height:52%; background:#090a14;
  clip-path:polygon(0 100%, 0 30%, 8% 30%, 8% 50%, 14% 50%, 14% 20%, 22% 20%, 22% 56%, 30% 56%, 30% 36%, 37% 36%, 37% 62%, 45% 62%, 45% 26%, 52% 26%, 52% 48%, 58% 48%, 58% 14%, 64% 14%, 64% 52%, 71% 52%, 71% 32%, 78% 32%, 78% 58%, 86% 58%, 86% 24%, 93% 24%, 93% 46%, 100% 46%, 100% 100%);}
/* 창문: 작은 노란 점 격자가 천천히 깜빡 */
.m2-jl-city .row.back::after, .m2-jl-city .row.front::after{content:''; position:absolute; inset:0;
  background:radial-gradient(circle, rgba(255,214,120,0.75) 1.4px, transparent 2px) 0 0 / 22px 26px; opacity:.35; animation:m2JlWin 3.4s steps(2) infinite;}
.m2-jl-city .row.front::after{background-size:30px 34px; opacity:.5; animation-duration:2.6s;}
@keyframes m2JlWin{50%{opacity:.18;}}
.m2-jl-fog{position:absolute; left:-20%; right:-20%; bottom:6vh; height:22vh; pointer-events:none; filter:blur(18px);
  background:radial-gradient(40% 60% at 30% 60%, rgba(160,170,200,0.16), transparent 70%), radial-gradient(35% 55% at 75% 50%, rgba(160,170,200,0.12), transparent 70%);
  animation:m2JlFog 14s ease-in-out infinite alternate;}
.m2-jl-fog.f2{bottom:0; animation-duration:19s; animation-direction:alternate-reverse; opacity:.8;}
@keyframes m2JlFog{to{transform:translateX(8%);}}
.m2-jl-center{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:12px; padding:0 16px; text-align:center;}
.m2-jl-brand{font-family:var(--font); font-size:13px; font-weight:900; letter-spacing:.18em; color:rgba(255,255,255,0.55); opacity:0;}
.m2-jl-brand span{color:#8fd8ff;}
.m2-joinloader.show .m2-jl-brand{animation:m2JlFade .5s .1s ease forwards;}
.m2-jl-logo{display:flex; align-items:flex-start; gap:10px; font-family:var(--font); font-weight:900; font-size:clamp(46px, 9vw, 88px); line-height:1; letter-spacing:-0.02em; color:#fff;
  text-shadow:0 4px 0 #3a0a10, 0 0 30px rgba(255,60,60,0.35); opacity:0; filter:blur(10px); transform:translateY(8px) scale(.97);}
.m2-jl-logo span{margin-top:.12em; padding:.1em .35em; font-size:.3em; letter-spacing:.06em; border-radius:6px; color:#1d0a0c; text-shadow:none;
  background:linear-gradient(#ff6b6b, #c81e2c); box-shadow:0 3px 0 #5a0d14;}
.m2-joinloader.show .m2-jl-logo{animation:m2JlLogo .7s cubic-bezier(.2,.8,.2,1) forwards;}
/* 두건 무리: 하나씩 통통 튀어 나오고, 숨 쉬듯 살짝 들썩. 마피아 하나는 눈이 빨갛게 번쩍 */
.m2-jl-crew{display:flex; gap:clamp(6px, 1.4vw, 14px); height:clamp(54px, 8vw, 78px); margin:4px 0 2px;}
.m2-jl-crew span{display:block; height:100%; aspect-ratio:60/78; opacity:0; transform:translateY(16px);}
.m2-jl-crew svg{display:block; width:100%; height:100%; filter:drop-shadow(0 6px 6px rgba(0,0,0,0.5)); animation:m2JlBreathe 1.8s ease-in-out infinite; animation-delay:calc(var(--i) * -.37s); transform-origin:50% 100%;}
.m2-joinloader.show .m2-jl-crew span{animation:m2JlPop .5s cubic-bezier(.3,1.6,.5,1) forwards; animation-delay:calc(.25s + var(--i) * .09s);}
.m2-jl-crew .eyes circle{fill:#fff1cc;}
.m2-jl-crew .eyes.evil circle{animation:m2JlEvil 2.6s ease-in-out infinite;}
@keyframes m2JlPop{to{opacity:1; transform:none;}}
@keyframes m2JlBreathe{50%{transform:scaleY(.96) translateY(1px);}}
@keyframes m2JlEvil{0%, 55%{fill:#fff1cc;} 62%, 88%{fill:#ff2a2a; filter:drop-shadow(0 0 4px #ff2a2a);} 100%{fill:#fff1cc;}}
.m2-jl-sub{margin:2px 0 0; font-size:13px; font-weight:800; letter-spacing:.04em; color:#c9cfdc; opacity:0;}
.m2-jl-sub i{font-style:normal; animation:m2JlDot 1.2s infinite;}
.m2-jl-sub i:nth-child(2){animation-delay:.2s;} .m2-jl-sub i:nth-child(3){animation-delay:.4s;}
@keyframes m2JlDot{0%, 60%, 100%{opacity:.2;} 30%{opacity:1;}}
.m2-joinloader.show .m2-jl-sub{animation:m2JlFade .5s .35s ease forwards;}
.m2-jl-bar{width:min(260px, 60vw); height:4px; border-radius:4px; background:rgba(255,255,255,0.08); overflow:hidden;}
.m2-jl-bar i{display:block; height:100%; width:0; border-radius:4px; background:linear-gradient(90deg, #ff4b5c, #ffb347); box-shadow:0 0 12px rgba(255,90,90,0.7);}
.m2-jl-tip{min-height:1.4em; margin:2px 0 0; max-width:min(420px, 90vw); font-size:12.5px; font-weight:700; color:#ffd98a; opacity:0;}
.m2-jl-tip.in{animation:m2JlTip .45s ease forwards;}
@keyframes m2JlTip{from{opacity:0; transform:translateY(4px);} to{opacity:.95; transform:none;}}
.m2-joinloader.show .m2-jl-bar i{animation:m2JlBar 1.1s .25s cubic-bezier(.3,.7,.3,1) forwards;}
.m2-joinloader.done .m2-jl-bar i{width:100% !important; animation:none; transition:width .25s ease;}
.m2-jl-phone{display:none; align-items:center; gap:8px; margin:6px 0 0; font-size:13px; font-weight:700; color:#cfe6ff; opacity:0;}
.m2-jl-phone span{display:inline-block; font-size:20px; animation:m2JlRotate 1.4s .5s ease-in-out infinite;}
.m2-joinloader.phone .m2-jl-phone{display:flex;}
.m2-joinloader.show .m2-jl-phone{animation:m2JlFade .5s .5s ease forwards;}
@keyframes m2JlLogo{to{opacity:1; filter:blur(0); transform:none;}}
@keyframes m2JlFade{to{opacity:1;}}
@keyframes m2JlBar{to{width:85%;}}
@keyframes m2JlRotate{0%, 20%{transform:rotate(0);} 55%, 100%{transform:rotate(-90deg);}}
@media (prefers-reduced-motion: reduce){
  .m2-joinloader.show .m2-jl-logo, .m2-joinloader.show .m2-jl-sub, .m2-joinloader.show .m2-jl-phone, .m2-joinloader.show .m2-jl-brand, .m2-joinloader.show .m2-jl-crew span{animation:none; opacity:1; filter:none; transform:none;}
  .m2-jl-phone span, .m2-jl-sky .beam, .m2-jl-fog, .m2-jl-crew svg, .m2-jl-city .row::after{animation:none;}
}

/* ---------- 폰 세로: "가로로 돌려 주세요" (2026-10-26, 아이폰은 웹에서 방향을 못 바꿔서) ---------- */
.m2-rotatehint{position:fixed; inset:0; z-index:4500; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  padding:24px; text-align:center; color:#fff;
  background:radial-gradient(600px 400px at 50% 30%, rgba(69,230,255,0.14), transparent 60%),
    radial-gradient(600px 400px at 50% 80%, rgba(155,123,255,0.16), transparent 60%), var(--bg, #07090f);}
.m2-rotatehint.hidden{display:none;}
.m2-rotatehint b{font-size:20px; font-weight:900;}
.m2-rotatehint small{font-size:13px; line-height:1.6; color:var(--sub, #9aa4b8);}
.m2-rh-phone{width:58px; height:100px; margin-bottom:8px; border:4px solid #cfe6ff; border-radius:14px; position:relative;
  box-shadow:0 0 22px rgba(69,230,255,0.35); animation:m2RhTurn 2s ease-in-out infinite;}
.m2-rh-phone i{position:absolute; left:50%; bottom:6px; width:14px; height:4px; margin-left:-7px; border-radius:2px; background:#cfe6ff;}
@keyframes m2RhTurn{0%, 25%{transform:rotate(0);} 60%, 85%{transform:rotate(-90deg);} 100%{transform:rotate(0);}}
@media (prefers-reduced-motion: reduce){ .m2-rh-phone{animation:none; transform:rotate(-90deg);} }

/* 아이폰 노치/홈 막대 피하기 (홈 화면에 추가해서 전체 화면으로 열 때, viewport-fit=cover) */
body.m2-land .m2-stagebtns, body.m2-land .m2-landcustom{right:calc(10px + env(safe-area-inset-right, 0px));}
body.m2-land .m2-actions{right:calc(12px + env(safe-area-inset-right, 0px)); bottom:calc(12px + env(safe-area-inset-bottom, 0px));}
body.m2-land .m2-side:not(.right), body.m2-land .m2-rulesboard{left:calc(8px + env(safe-area-inset-left, 0px));}
body.m2-land .m2-dev{left:calc(8px + env(safe-area-inset-left, 0px));}
body.m2-land .m2-landbottom{bottom:calc(10px + env(safe-area-inset-bottom, 0px));}

/* (2026-10-26 아이폰 가로 빈 화면 수정) 가로 게임 중엔 안의 것이 전부 fixed라 페이지 틀(main.page-wrap, relative + z-index 10)
   높이가 0이 됨 → 아이폰 사파리는 그 안의 게임 화면을 안 그리고 별 배경(#stars)만 보였음(오류 상자: 게임 화면 874x292
   제자리, 캔버스도 그리는 중, 오류 없음). 틀의 쌓임 맥락을 풀어 게임 화면이 맨 위 층에 바로 놓이게 + 별 배경/가장자리 그늘은 숨김. */
body.m2-land.m2-ingame .m2-wrap{position:static; z-index:auto;}
body.m2-land.m2-ingame #stars, body.m2-land.m2-ingame .vignette{display:none !important;}
body.m2-land.m2-ingame{background:#04060c;}
body.m2-land.m2-ingame #gamePanel{z-index:1000;}

/* ---------- 앱 설치 (방 목록 위 안내 줄 + 따라 하기 창, 2026-10-26) ---------- */
.m2-install{display:flex; align-items:center; gap:12px; margin:0 0 14px; padding:10px 12px 10px 14px; text-align:left;
  background:linear-gradient(135deg, rgba(69,230,255,0.16), rgba(155,123,255,0.18)); border:1px solid rgba(120,200,255,0.35);
  border-radius:16px; box-shadow:0 6px 20px rgba(0,0,0,0.35);}
.m2-install.hidden{display:none;}
.m2-install-ic{font-size:28px; line-height:1;}
.m2-install-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.m2-install-txt b{font-size:15px; font-weight:900; color:#fff;}
.m2-install-txt small{font-size:12px; color:var(--sub, #9aa4b8);}
.m2-install .btn{flex-shrink:0; min-width:64px;}
.m2-install-x{flex-shrink:0; width:28px; height:28px; padding:0; font-size:13px; color:var(--sub, #9aa4b8); background:none; border:0; cursor:pointer;}
.m2-installguide{position:fixed; inset:0; z-index:6000; display:grid; place-items:center; padding:16px; background:rgba(4,6,12,0.72);}
.m2-installguide.hidden{display:none;}
.m2-ig-box{position:relative; width:min(420px, 100%); max-height:92vh; overflow:auto; box-sizing:border-box; padding:18px 18px 16px; text-align:left;
  background:linear-gradient(180deg, #2b3446, #171c27); border:3px solid #1d1f29; border-radius:18px; box-shadow:0 12px 40px rgba(0,0,0,0.65);
  animation:m2-mt-in .25s cubic-bezier(.2,1.2,.4,1);}
.m2-ig-box .m2-landpanel-x{left:auto; right:10px; top:10px;}
.m2-ig-title{margin:0 40px 12px 0; font-size:18px; font-weight:900; color:#fff;}
.m2-ig-steps{margin:0 0 10px; padding:0; list-style:none; counter-reset:ig;}
.m2-ig-steps li{position:relative; margin:0 0 10px; padding:10px 12px 10px 46px; font-size:14px; line-height:1.5; color:#dfe6f2;
  background:rgba(0,0,0,0.28); border-radius:12px; counter-increment:ig;}
.m2-ig-steps li::before{content:counter(ig); position:absolute; left:12px; top:50%; transform:translateY(-50%); display:grid; place-items:center;
  width:24px; height:24px; font-size:13px; font-weight:900; color:#0b1220; background:linear-gradient(#7fe9ff, #45b8e6); border-radius:50%;}
.m2-ig-steps b{color:#ffe27a;}
.m2-ig-ic{display:inline-grid; place-items:center; min-width:22px; height:22px; margin:0 2px; padding:0 4px; font-size:13px; color:#0b1220; background:#e8edf5; border-radius:6px;}
.m2-ig-note{margin:0 0 12px; font-size:12px; color:var(--sub, #9aa4b8);}
.m2-ig-box > .btn{display:block; margin:0 auto;}

/* ---------- 폰 가로 다듬기 (2026-10-26 사용자 캡처 5장) ---------- */
/* ② 두 번 톡하면 화면이 확대되던 것: 두 번 톡 확대만 끔(톡 연타는 그대로 됨) */
body.m2-land, body.m2-land *{touch-action:manipulation;}
body.m2-land #gameCanvas{touch-action:none;}
/* (2026-10-26 "폰에서 카드키가 안 긁어지고 '끝까지 밀어 주세요'만 뜸") 위의 전체 manipulation이 끌기 미니게임의 touch-action:none을
   덮어써서, 끄는 순간 브라우저가 스크롤로 가로채 pointercancel → 실패 판정이었음. 끄는 것들은 다시 none으로 (선택자를 더 세게) */
body.m2-land .m2-tk-card, body.m2-land .m2-tk-knob, body.m2-land .m2-tk-gen .grip, body.m2-land .m2-tk-area.broom,
body.m2-land .m2-mg-soularea, body.m2-land .m2-mg-soularea *, body.m2-land .m2-mg-crystal, body.m2-land .m2-mg-crystal *,
body.m2-land .m2-mg-cuffarea, body.m2-land .m2-mg-cuffarea *, body.m2-land .m2-tk-reader{touch-action:none;}
/* ③ 직업 카드 설명이 좁은 세로 칸에 끼어 다 잘리던 것: 가로에선 초상화를 빼고 설명을 카드 폭 전체로, 능력 이름 칩은 위에 */
body.m2-land .m2-side .m2-rolehud-body, body.m2-land .m2-side .m2-rolehud-body:has(.has-portrait){display:block; padding-top:4px;}
body.m2-land .m2-side .m2-rolehud-fig{display:none !important;}
body.m2-land .m2-side #roleHud .m2-rolehud-desc{width:auto; max-height:none; padding:8px 10px; font-size:12px;}
body.m2-land .m2-side .m2-abil{display:block;}
body.m2-land .m2-side .m2-abil b{display:inline-block; margin:0 0 4px;}
body.m2-land .m2-side .m2-abil p{font-size:12.5px; line-height:1.55;}
body.m2-land .m2-side .m2-mates{margin-top:6px;}
/* ⑤·③ 시작 연출 / 미니게임 / 지도 / 투표 / 고르기 창이 열려 있으면 왼쪽 직업 카드·임무 목록·위 시계를 숨김 (가려서) */
body.m2-land:has(#intro:not(.hidden), #mgPanel:not(.hidden), #sabMap:not(.hidden), #votePanel:not(.hidden), #endScene:not(.hidden),
  #pickPanel:not(.hidden), #disguisePanel:not(.hidden), #fixPanel:not(.hidden), #landSettings:not(.hidden), #landCustom:not(.hidden),
  #rulesPanel:not(.hidden), #newsPaper:not(.hidden), #intelCard:not(.hidden)) :is(.m2-side:not(.right), .m2-hud, #jobChip){display:none !important;}
/* ④ 지도: 낮은 가로 화면에선 (화면 높이 - 220px) 기준이라 손바닥만 해져서 이름/임무 글씨가 겹쳤음 → 높이를 거의 다 쓰고,
   임무 핀은 글씨 없이 아이콘만(가로 폰은 글씨 넣을 자리가 없음), 안내 문구는 지도 안 아래에 작게 */
body.m2-land .m2-sabmap{padding:8px;}
body.m2-land .m2-sabmap-box{width:min(calc(100vw - 32px), calc((100vh - 28px) * 5700 / 3180)); max-width:none;}
body.m2-land .m2-map-task span{display:none;}
body.m2-land .m2-map-task i{min-width:28px; height:28px; font-size:15px;}
body.m2-land .m2-map-task::after{width:34px; height:16px; margin:-8px 0 0 -17px;}
body.m2-land .m2-map-name{font-size:12px;}
body.m2-land .m2-sabmap-hint{bottom:6px; font-size:11px; padding:0 40px; text-shadow:0 1px 3px #000;}
body.m2-land .m2-sabmap-close{transform:scale(.8);}
/* 미니게임 창도 낮은 화면에 맞춤 */
body.m2-land .m2-mg{padding:6px;}
/* 왼쪽 칸이 화면 높이보다 길면 직업 카드가 눌려 줄어들며 설명 끝이 잘렸음 → 줄이지 말고 칸 전체를 스크롤 */
body.m2-land .m2-side:not(.right) > *{flex-shrink:0;}
body.m2-land .m2-side:not(.right){overscroll-behavior:contain; scrollbar-width:none;}
body.m2-land .m2-side:not(.right)::-webkit-scrollbar{display:none;}

/* ---------- 지도 장소 색 (2026-10-26 "구스구스덕처럼 지역마다 색이 달라서 구별 편하게, 특징에 맞게") ----------
   지도 모드(시민 지도)만. 마피아 방해 지도는 그대로 빨강(방해 화면이라는 게 한눈에 보이게). */
.m2-sabmap.mode-map .m2-sabmap-svg .room[data-r="plaza"]{fill:#8a97ab; stroke:#3c4556;}      /* 광장: 돌바닥 회청 */
.m2-sabmap.mode-map .m2-sabmap-svg .room[data-r="police"]{fill:#2f63d6; stroke:#0f2766;}     /* 경찰서: 경찰 파랑 */
.m2-sabmap.mode-map .m2-sabmap-svg .room[data-r="cityhall"]{fill:#d9a632; stroke:#6b4c0c;}   /* 시청: 관청 금색 */
.m2-sabmap.mode-map .m2-sabmap-svg .room[data-r="hospital"]{fill:#3fbfa2; stroke:#11564a;}   /* 병원: 민트 */
.m2-sabmap.mode-map .m2-sabmap-svg .room[data-r="news"]{fill:#e0823a; stroke:#6b3410;}       /* 신문사: 신문 잉크 주황 */
.m2-sabmap.mode-map .m2-sabmap-svg .room[data-r="church"]{fill:#9466d6; stroke:#3c1f6b;}     /* 성당: 스테인드글라스 보라 */
.m2-sabmap.mode-map .m2-sabmap-svg .room[data-r="cemetery"]{fill:#4f8a5a; stroke:#1d3d22;}   /* 묘지: 짙은 초록 */
.m2-sabmap.mode-map .m2-sabmap-svg .room[data-r="hotel"]{fill:#d65a86; stroke:#6b1d3a;}      /* 호텔: 와인 분홍 */
.m2-sabmap.mode-map .m2-sabmap-svg .room[data-r="military"]{fill:#7f8f3a; stroke:#363d12;}   /* 군부대: 국방 올리브 */
.m2-sabmap.mode-map .m2-map-name{-webkit-text-stroke-color:#1d1f29;}

/* 지도 임무 핀: 이름 없이 노란 ! (왔다갔다 임무는 파랑) */
.m2-map-task span{display:none !important;}
.m2-map-task i{min-width:0 !important; width:30px; height:30px; padding:0 !important; border-radius:50% !important; font:900 19px/1 Pretendard, sans-serif !important;
  color:#1d1f29; background:#ffd65a; border:3px solid #1d1f29; box-shadow:0 0 10px rgba(255,214,90,0.8);}
.m2-map-task.multi i{background:#8ecae6; box-shadow:0 0 10px rgba(142,202,230,0.8);}
body.m2-land .m2-map-task i{width:24px; height:24px; font-size:15px !important;}

/* ---------- 폰 가로: 임무 옆 동그란 직업 아이콘 + 능력 창 (구스구스덕식) ---------- */
body.m2-land .m2-side:not(.right){flex-direction:row; align-items:flex-start; gap:8px; width:auto;}
body.m2-land .m2-side:not(.right) #roleHud{display:none !important;}
body.m2-land .m2-side:not(.right) #taskHud{width:220px;}
body.m2-land .m2-side:not(.right) #roleBadge:not(.hidden){display:flex !important;}
.m2-rolebadge{flex-direction:column; align-items:center; gap:3px; padding:0; background:none; border:0; cursor:pointer; --team:#5aa2ff;}
.m2-rolebadge[data-team="mafia"]{--team:#ff4d4d;}
.m2-rolebadge[data-team="cult"]{--team:#b44dff;}
.m2-rb-fig{display:grid; place-items:center; width:58px; height:58px; overflow:hidden; border-radius:50%; background:radial-gradient(circle at 50% 35%, #3a4560, #121722);
  border:3px solid var(--team); box-shadow:0 0 0 2px #0b0c11, 0 0 14px color-mix(in srgb, var(--team) 60%, transparent);}
.m2-rb-fig .m2-portrait{display:block; width:100%; height:100%; border:0; border-radius:0; box-shadow:none;}
.m2-rb-fig .m2-portrait img{width:100%; height:100%; object-fit:cover;}
.m2-rb-fig .m2-fig{--w:44px;}
.m2-rolebadge b{padding:1px 8px; font-size:11px; font-weight:900; color:#fff; background:rgba(10,12,20,0.85); border:1px solid color-mix(in srgb, var(--team) 60%, transparent);
  border-radius:6px; white-space:nowrap;}
.m2-rolebadge:active .m2-rb-fig{transform:scale(.93);}
/* 능력 창 */
.m2-rolepop{width:min(460px, 92%) !important; padding:16px 18px 16px !important; --team:#5aa2ff;}
#rolePop[data-team="mafia"] .m2-rolepop{--team:#ff4d4d;}
#rolePop[data-team="cult"] .m2-rolepop{--team:#b44dff;}
.m2-rolepop .m2-landpanel-x{left:auto; right:10px; top:10px;}
.m2-rp-head{display:flex; align-items:center; gap:12px; margin:0 40px 10px 0;}
.m2-rp-fig{display:grid; place-items:center; flex-shrink:0; width:64px; height:64px; overflow:hidden; border-radius:14px; background:#121722; border:2px solid var(--team);}
.m2-rp-fig .m2-portrait{display:block; width:100%; height:100%; border:0; border-radius:0; box-shadow:none;}
.m2-rp-fig .m2-portrait img{width:100%; height:100%; object-fit:cover;}
.m2-rp-fig .m2-fig{--w:48px;}
.m2-rp-head small{display:block; font-size:12px; font-weight:800; letter-spacing:.06em; color:var(--team);}
.m2-rp-head b{font-size:22px; font-weight:900; color:#fff;}
.m2-rp-desc{padding:10px 12px; text-align:left; background:rgba(0,0,0,0.28); border-radius:12px;}
.m2-rp-desc .m2-abil b{color:#fff; background:color-mix(in srgb, var(--team) 55%, #1d1f29);}
.m2-rolepop .m2-mates:not(:empty){margin-top:10px; text-align:left;}

/* ---------- 2026-10-26 폰 UI/UX 정리 (사용자 캡처 7장) ---------- */
/* ① 시작 연출: 나는 크게, 동료(마피아팀·연인)는 작게 */
.m2-intro-crew .m2-intro-me:not(.mate) .m2-intro-fig{--w:clamp(110px, 19vh, 170px);}
.m2-intro-crew .m2-intro-me.mate .m2-intro-fig{--w:clamp(58px, 10vh, 92px);}
.m2-intro-crew .m2-intro-me.mate .m2-intro-nick{font-size:12px;}
.m2-intro-crew{align-items:flex-end !important;}
/* ① 시작 연출(가로 폰): 능력 설명이 캐릭터에 가려 안 보였음 → 위에서부터 작게 쌓고 캐릭터는 아래에 작게 */
body.m2-land .m2-intro{justify-content:flex-start !important; padding-top:10px !important;}
body.m2-land .m2-intro-mode{font-size:12px;}
body.m2-land .m2-intro-team{margin-top:2px; font-size:11px;}
body.m2-land .m2-intro-role{font-size:clamp(28px, 11vh, 50px);}
body.m2-land .m2-intro-desc{max-width:min(94%, 720px); margin-top:4px; padding:6px 14px;}
body.m2-land .m2-intro-desc .m2-abil p{font-size:12.5px; line-height:1.45;}
body.m2-land .m2-intro-desc .m2-abil b{font-size:11px; margin-bottom:2px;}
body.m2-land .m2-intro-desc .m2-abil + .m2-abil{margin-top:4px; padding-top:4px;}
body.m2-land .m2-intro-mates{margin-top:4px;}
body.m2-land .m2-intro-crew{bottom:4px !important; gap:10px !important;}
body.m2-land .m2-intro-crew .m2-intro-me:not(.mate) .m2-intro-fig{--w:min(24vh, 110px);}
body.m2-land .m2-intro-crew .m2-intro-me.mate .m2-intro-fig{--w:min(13vh, 60px);}
body.m2-land .m2-intro-nick{font-size:12px;}
/* ③ 직업 능력 창을 열면 위 칸(임무/직업 아이콘/시계)이 창 위로 겹쳐 보였음 → 같이 숨김 */
body.m2-land:has(#rolePop:not(.hidden)) :is(.m2-side:not(.right), .m2-hud, #jobChip){display:none !important;}
.m2-rolepop{max-height:calc(100% - 16px) !important;}
/* ④ 마피아팀/교주 목표 한 줄 (가짜 임무 위) */
.m2-duty-goal{margin:0; padding:7px 12px; font-size:12px; font-weight:800; line-height:1.4; color:#ff6b6b; background:rgba(120,10,20,0.35);
  border-top:1px solid rgba(255,255,255,0.06);}
.m2-duty-goal.cult{color:#d59bff; background:rgba(80,20,120,0.35);}
#taskHud{cursor:pointer;}
/* ⑥ 지도: 방해 아이콘이 찌그러졌던 것(버튼의 aspect-ratio가 사파리에서 안 먹음) → 폭/높이를 같은 값으로 */
.m2-sabicon{--s:clamp(26px, 6.2cqw, 54px); width:var(--s) !important; height:var(--s) !important; aspect-ratio:auto; box-sizing:border-box;}
body.m2-land .m2-sabicon{padding:4px; border-width:2px;}
/* ⑥ ! 핀이 자리에서 어긋났던 것 → 핀 가운데 = 임무 자리, 고리도 가운데 */
.m2-map-task{transform:translate(-50%, -50%) !important; animation-name:none !important;}
.m2-map-task::after{left:50% !important; top:50% !important; bottom:auto !important; margin:0 !important; width:44px; height:22px;
  translate:-50% -50%;}
body.m2-land .m2-map-task::after{width:34px; height:16px;}
/* ⑥ 지도 아래 설명 문구는 뺌 */
.m2-sabmap-hint{display:none !important;}
/* ⑦ 여러 번 톡/길게 누르면 글씨가 선택(드래그)되고 복사 메뉴가 뜨던 것 → 게임 화면에선 글씨 선택 끔 (입력칸만 됨) */
body.m2-ingame, body.m2-ingame *{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none;}
body.m2-ingame input, body.m2-ingame textarea{-webkit-user-select:text; user-select:text;}
body.m2-ingame img{-webkit-user-drag:none;}

/* 임무 칸 머리: ▼ 대신 테두리 있는 "닫기/열기" 버튼 (2026-10-26) */
.m2-duty-head{display:flex !important; align-items:center; justify-content:space-between; gap:8px;}
.m2-duty-head > i{display:none !important;}
.m2-duty-tg{flex-shrink:0; padding:3px 12px; font-family:var(--font); font-size:12px; font-weight:800; color:#dfe9ff; cursor:pointer;
  background:rgba(255,255,255,0.06); border:1.5px solid rgba(160,190,255,0.55); border-radius:999px;}
.m2-duty-tg:active{transform:scale(.94);}

/* 임무 칸이 눌리지 않던 것: 예전 게임 창 위 임무판(.m2-taskhud)의 pointer-events:none이 남아 있었음 → 누를 수 있게 (2026-10-26) */
#taskHud, #taskHud *{pointer-events:auto;}
/* 폰 가로: 아래 가운데 안내/알림 알약을 작게, 두 줄까지 (게임을 덜 가리게) */
body.m2-land .m2-job-chip, body.m2-land #gameMsg.m2-toast{max-width:min(46vw, 380px); font-size:11.5px; line-height:1.35; padding-top:4px; padding-bottom:4px;}
body.m2-land .m2-job-chip span{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
body.m2-land .m2-job-chip i{width:20px; height:20px; font-size:11px;}
body.m2-land .m2-job-chip{bottom:calc(48px + env(safe-area-inset-bottom, 0px));}

/* 봇 회의 말풍선 (2026-10-26): 카드 위에 붙음 */
.m2-mt-card{position:relative; overflow:visible !important;}
.m2-mt-bubble{position:absolute; left:50%; bottom:calc(100% - 6px); z-index:5; transform:translate(-50%, 4px) scale(.8); opacity:0; pointer-events:none;
  max-width:230px; width:max-content; padding:6px 11px; font-size:12.5px; font-weight:700; line-height:1.45; text-align:left; white-space:pre-line; word-break:keep-all; color:#1d1f29;   /* 2026-10-29 문장마다 줄바꿈 + 조금 넓게·왼쪽 정렬 (170px 가운데 정렬은 긴 말이 뭉쳐 보였음) */
  background:#fff7dc; border:2px solid #1d1f29; border-radius:10px; box-shadow:0 3px 0 #1d1f29; transition:opacity .2s, transform .25s cubic-bezier(.2,1.5,.4,1);}
.m2-mt-bubble::after{content:''; position:absolute; left:50%; bottom:-8px; margin-left:calc(-6px + var(--ax, 0px)); border:6px solid transparent; border-top-color:#1d1f29; border-bottom:0;}   /* --ax = 말풍선을 옆으로 민 만큼 꼬리는 반대로 (script.js renderVote) */
.m2-mt-bubble.on{opacity:1; transform:translate(-50%, 0) scale(1);}

/* 봇 회의 대화 기록 (지목 투표 화면, 카드 위) */
.m2-mt-talk{display:none; flex-direction:column; gap:3px; margin:0 0 8px; padding:8px 12px; text-align:left; background:rgba(0,0,0,0.32);
  border:1px solid rgba(255,255,255,0.08); border-radius:12px; max-height:118px; overflow:hidden;}
.m2-mt-talk.on{display:flex;}
.m2-mt-talk p{margin:0; font-size:13px; line-height:1.45; color:#dfe6f2; opacity:.7;}
.m2-mt-talk p b{margin-right:7px; color:#8fd0ff;}
.m2-mt-talk p.new{opacity:1; animation:m2-talk-in .35s cubic-bezier(.2,1.3,.4,1);}
@keyframes m2-talk-in{from{opacity:0; transform:translateY(6px);}}
body.m2-land .m2-mt-talk{max-height:80px; padding:5px 10px;}
body.m2-land .m2-mt-talk p{font-size:11.5px;}

/* 사람 ↔ 봇 대화 버튼 (지목 투표 때만, 봇이 있는 판, 카드 아래쪽) */
.m2-mt-acts{display:none; position:absolute; left:6px; right:6px; bottom:-11px; z-index:4; justify-content:center; gap:4px;}
#voteBox[data-stage="vote"] .m2-mt-acts{display:flex;}
.m2-mt-acts button{padding:2px 7px; font-family:var(--font); font-size:10.5px; font-weight:800; color:#1d1f29; cursor:pointer;
  background:#e8edf5; border:2px solid #1d1f29; border-radius:999px; box-shadow:0 2px 0 #1d1f29; transition:transform .1s;}
.m2-mt-acts button[data-act="tsus"]{background:#ffb4a8;}
.m2-mt-acts button[data-act="ttrust"]{background:#b8f0c4;}
.m2-mt-acts button[data-act="task"]{background:#ffe9a8;}
.m2-mt-acts button:active{transform:translateY(2px); box-shadow:none;}
#voteBox[data-stage="vote"] .m2-mt-grid{row-gap:18px;}

/* 사람 대화 버튼 쿨타임 (2026-10-26: 누르면 의심/신뢰/질문 전체 2초) */
#voteBox.acts-cd .m2-mt-acts button{opacity:.35; pointer-events:none; filter:grayscale(.6);}

/* 봇의 최후의 반론 (2026-10-26): 지목된 봇의 한 마디 + 다른 봇의 반응 한 줄 */
.m2-mt-say.bot{max-width:min(520px, 90%); margin:0 auto; padding:8px 14px; border-radius:12px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16); font-weight:700; color:#fff; animation:m2-mt-up .4s both;}
.m2-mt-defre{position:relative; max-width:min(520px, 90%); margin:8px auto 0; padding:6px 12px; border-radius:10px; font-size:13px; font-weight:700;
  color:#ffd9a8; background:rgba(255,150,60,.12); border:1px solid rgba(255,160,80,.3); animation:m2-mt-up .4s both;}

/* 반박 버튼 + 이미 누른 버튼 잠금 (2026-10-26) */
.m2-mt-acts button[data-act="trebut"]{background:#d8c4ff;}
.m2-mt-acts button:disabled{opacity:.3; cursor:not-allowed; filter:grayscale(1); transform:none; box-shadow:none;}

/* 봇들에게 자유 입력 (2026-10-26) */
.m2-mt-sayform{display:flex; gap:6px; margin:6px 0 2px;}
.m2-mt-sayform input{flex:1; min-width:0; padding:7px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.35);
  color:#fff; font:inherit; font-size:13px; outline:none;}
.m2-mt-sayform input:focus{border-color:rgba(120,200,255,.6);}
.m2-mt-sayform button{padding:7px 12px; border-radius:10px; border:0; background:#7fd0ff; color:#10202b; font-weight:800; font-size:13px; cursor:pointer;}
#voteBox.acts-cd .m2-mt-sayform button{opacity:.4; pointer-events:none;}
.m2-mt-sayform{flex-direction:column; align-items:stretch;}
.m2-mt-sayrow{display:flex; gap:6px;}
.m2-mt-rebutchip{display:flex; align-items:center; gap:6px; padding:5px 8px; border-radius:8px; background:rgba(216,196,255,.14); border:1px solid rgba(216,196,255,.35);
  color:#e9dcff; font-size:12px; line-height:1.35;}
.m2-mt-rebutchip.hidden{display:none;}
.m2-mt-rebutchip span{color:#cfc3e6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0;}
.m2-mt-rebutchip button{margin-left:auto; border:0; background:none; color:#e9dcff; font-size:13px; cursor:pointer; padding:0 2px;}

/* ===== 산소 공급소 + 산소 활성화 미니게임 (2026-10-26) ===== */
.m2-sabmap.mode-map .m2-sabmap-svg .room[data-r="sewer"]{fill:#4a6b52; stroke:#1a2e20;}   /* 하수도: 이끼 낀 초록 (2026-10-26 맵 개편) */
.m2-sabmap-svg .under{fill:rgba(10,14,12,0.78); stroke:rgba(150,200,160,0.35); stroke-width:8; stroke-dasharray:30 20;}   /* 지하 하수도 칸 */
.m2-sabmap-svg .under-t{font-size:70px; fill:#bfe3c6; stroke:#0c1a10;}
.m2-sabmap-svg .mh{fill:#2a2d33; stroke:#d8dde6; stroke-width:10;}                   /* 맨홀 / 사다리 */
.m2-sabmap-svg .mh-link{stroke:rgba(216,221,230,0.35); stroke-width:10; stroke-dasharray:24 24;}
.m2-o2-pips{display:flex; gap:10px; justify-content:center;}
.m2-o2-pips i{width:18px; height:18px; border-radius:50%; border:3px solid #8ecae6; background:#0b1e30; transition:background .15s, transform .15s;}
.m2-o2-pips i.on{background:#3fe07a; border-color:#d9ffe8; transform:scale(1.15);}
.m2-o2-push{min-width:140px; font-size:1.05rem;}

/* 방 만들기 인원 버튼 4~10인 (2026-10-26) -- 7개라 좁은 창에서도 한 줄에 들어가게 */
#roomSizeRow{gap:5px;}
#roomSizeRow .room-size-btn{padding:9px 2px; font-size:13px; min-width:0;}

/* (2026-10-27 시뮬레이션) 회의 카드 윗줄 말풍선이 '봇들에게 말하기' 입력칸을 덮었음 → 카드 격자 위에 말풍선 자리 */
#voteBox[data-stage="vote"] .m2-mt-grid{margin-top:40px;}

/* ===== 그림 지도 (2026-10-27 "구스구스덕처럼 진짜 지형·구조물이 보이는 스케치 지도, 이름은 가운데") =====
   맨 아래 .m2-sabmap-art = 실제 맵을 구워 양피지 스케치 색조로 바꾼 그림(script.js renderMapArt). 그 위 SVG 장소 칸은 옅은 색만 입힘. */
.m2-sabmap-art{position:absolute; inset:0; width:100%; height:100%; border-radius:inherit; z-index:0; display:block;}
.m2-sabmap-box.has-art, .m2-sabmap.mode-map .m2-sabmap-box.has-art{background:#1a1712 !important;}
.m2-sabmap-box.has-art .m2-sabmap-svg{z-index:1;}
.m2-sabmap-box.has-art .m2-sabmap-svg .path{fill:transparent !important; stroke:none !important;}
.m2-sabmap-box.has-art .m2-sabmap-svg .room{fill-opacity:.30; stroke:rgba(40,28,14,.5) !important; stroke-width:6 !important; filter:none !important;}
.m2-sabmap:not(.mode-map) .m2-sabmap-box.has-art .m2-sabmap-svg .room{fill:#c0392b !important; fill-opacity:.22;}
.m2-sabmap-box.has-art .m2-sabmap-svg .under{fill:transparent; stroke:rgba(70,52,28,.55);}
.m2-sabmap-box.has-art .m2-sabmap-svg .under-t{fill:#f6ecd0; stroke:#2e2618;}
.m2-sabmap-box.has-art .m2-sabmap-svg .mh-link{stroke:rgba(60,44,24,.55);}
.m2-sabmap-box.has-art .m2-sabmap-svg .mh{fill:#3a3226; stroke:#f6ecd0;}
.m2-sabmap-box.has-art .m2-map-name{transform:translate(-50%, -50%); font-size:max(12px, 1.9cqw); color:#fffaf0; -webkit-text-stroke-color:#2a2014 !important;
  text-shadow:0 2px 4px rgba(0,0,0,.45);}
body.m2-land .m2-sabmap-box.has-art .m2-map-name{font-size:12px;}

/* ===== 지목 투표 3단계 + 신고자 표시 (2026-10-27, 구스구스덕식 발언권 | 토론 | 투표) ===== */
.m2-mt-bar.seg{position:relative; overflow:visible;}
.m2-mt-bar .m2-mt-seg{position:absolute; top:-3px; bottom:-3px; width:4px; margin-left:-2px; background:#0b0d14; border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.18); z-index:2;}
#voteBox[data-phase="speak"] .m2-mt-bar i{background:linear-gradient(90deg,#ffd166,#ff9f43);}
#voteBox[data-phase="discuss"] .m2-mt-bar i{background:linear-gradient(90deg,#7fd0ff,#4aa8ff);}
#voteBox[data-phase="vote"] .m2-mt-bar i{background:linear-gradient(90deg,#5ee08a,#2fbf6a);}
#voteBox[data-phase] [data-phase]{font-weight:800; color:#fff3c4;}
#voteBox[data-phase="discuss"] [data-phase]{color:#cfeaff;}
#voteBox[data-phase="vote"] [data-phase]{color:#c8ffd9;}
.m2-mt-caller{display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; font-style:normal; font-size:11px; font-weight:900;
  background:#ffd166; color:#3b2a00; vertical-align:middle; box-shadow:0 2px 0 rgba(0,0,0,.35);}
.m2-mt-card.speaker{outline:3px solid #ffd166; box-shadow:0 0 18px rgba(255,209,102,.55); animation:m2-speak-pulse 1s ease-in-out infinite;}
@keyframes m2-speak-pulse{50%{box-shadow:0 0 6px rgba(255,209,102,.25);}}
#voteBox[data-phase="speak"] .m2-mt-card:not(.speaker) .m2-mt-acts button,
#voteBox[data-phase="speak"] [data-sayform] input:disabled{opacity:.45;}
.m2-mt-bar.seg{height:10px;}

/* ===== 직업 유추 메모 (2026-10-27 "시즌1처럼 투표 때 직업 유추") -- script.js guessChipHTML / openGuess ===== */
.m2-mt-guess{position:absolute; left:8px; top:-9px;   /* 오른쪽 위는 투표 완료 ✓ 자리 */ z-index:3; padding:1px 8px; font-family:var(--font); font-size:10.5px; font-weight:800; font-style:normal; line-height:16px;
  color:#c9d2e3; background:#1b1f2b; border:1.5px dashed #5d6886; border-radius:999px; cursor:pointer; white-space:nowrap; transition:transform .12s, border-color .15s;}
.m2-mt-guess:hover{transform:translateY(-1px); border-color:#9fb0d6; color:#fff;}
.m2-mt-guess.set{border-style:solid; color:#fff;}
.m2-mt-guess.team-mafia{background:#4a1520; border-color:#ff5d6c;}
.m2-mt-guess.team-citizen{background:#13314a; border-color:#5cc3ff;}
.m2-mt-guess.team-cult{background:#2f1747; border-color:#c48bff;}
.m2-mt-guess.fixed{cursor:default; border-style:solid; color:#ffd0d5;}
.m2-mt-guess.pop{animation:m2-guess-pop .32s cubic-bezier(.2,1.6,.4,1);}
@keyframes m2-guess-pop{0%{transform:scale(.6);} 100%{transform:scale(1);}}
.m2-mt-card.dead .m2-mt-guess{filter:none; opacity:.85;}
.m2-guess-pop{position:fixed; inset:0; z-index:9000; display:grid; place-items:center; padding:16px; background:rgba(5,6,10,0.6); animation:m2-fade .15s;}
.m2-guess-box{width:min(560px, 100%); max-height:calc(100vh - 32px); overflow:auto; padding:16px; background:#141824; border:2px solid #2c3346; border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,0.6); animation:m2-guess-in .22s cubic-bezier(.2,1.3,.4,1);}
@keyframes m2-guess-in{from{transform:translateY(10px) scale(.96); opacity:0;}}
@keyframes m2-fade{from{opacity:0;}}
.m2-guess-head{margin-bottom:10px; font-size:15px; font-weight:800; color:#e9edf6;}
.m2-guess-head small{margin-left:6px; font-size:11px; font-weight:700; color:var(--sub);}
.m2-guess-group{margin-top:10px;}
.m2-guess-group > span{display:block; margin-bottom:6px; font-size:11.5px; font-weight:900; letter-spacing:.5px;}
.m2-guess-group.team-mafia > span{color:#ff7482;}
.m2-guess-group.team-citizen > span{color:#6fcbff;}
.m2-guess-group.team-cult > span{color:#c48bff;}
.m2-guess-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(64px, 1fr)); gap:6px;}
.m2-guess-list button{display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 3px 6px; font-family:var(--font); cursor:pointer;
  background:#1c2130; border:2px solid #2c3346; border-radius:10px; transition:transform .1s, border-color .15s, background .15s;}
.m2-guess-list button:hover{transform:translateY(-2px); border-color:#5d6886;}
.m2-guess-group.team-mafia .m2-guess-list button.on{border-color:#ff5d6c; background:#3a131b;}
.m2-guess-group.team-citizen .m2-guess-list button.on{border-color:#5cc3ff; background:#11283c;}
.m2-guess-group.team-cult .m2-guess-list button.on{border-color:#c48bff; background:#28143c;}
.m2-guess-list img{width:44px; height:44px; border-radius:8px; object-fit:cover; background:#000;}
.m2-guess-list i{font-style:normal; font-size:11px; font-weight:800; color:#dfe5f1; white-space:nowrap;}
.m2-guess-foot{display:flex; justify-content:flex-end; gap:8px; margin-top:14px;}
.m2-guess-foot button{padding:6px 14px; font-family:var(--font); font-size:12.5px; font-weight:800; color:#e9edf6; cursor:pointer; background:#232a3b; border:2px solid #3a4460; border-radius:999px;}
.m2-guess-foot button[data-role=""]{color:#ffb4bb; border-color:#6b2f3a;}
@media (max-width:640px){ .m2-guess-list{grid-template-columns:repeat(auto-fill, minmax(56px, 1fr));} .m2-guess-list img{width:38px; height:38px;} }
/* 확실히 아는 직업 칩: 공개 = 금색 빛, 능력으로 앎 = 🔍 (2026-10-27, 예전 이름 옆 .m2-mt-rrole/.m2-mt-krole 대신) */
.m2-mt-guess.fixed::before{content:'🔍 '; font-size:9px;}
.m2-mt-guess.fixed.pub{color:#1d1f29; background:#ffd65a; border-color:#ffd65a; box-shadow:0 0 10px rgba(255,214,90,0.5);}
.m2-mt-guess.fixed.pub::before{content:'📢 ';}

/* ===== 피아노: 악보 보고 따라 치기 (2026-10-27, script.js mgTaskPiano) ===== */
.m2-tk-sheet{display:flex; justify-content:center; gap:6px; flex-wrap:wrap; padding:10px 12px; border-radius:10px;
  background:repeating-linear-gradient(#fdf8ea 0 9px, #d9cfb4 9px 10px); border:3px solid #1d1f29; box-shadow:0 3px 0 #1d1f29;}
.m2-tk-sheet span{display:flex; flex-direction:column; align-items:center; min-width:34px; padding:3px 4px 4px; border-radius:8px; font-size:13px; font-weight:900; color:#1d1f29;
  background:rgba(255,255,255,0.7); border:2px solid transparent; transition:transform .15s, opacity .2s, background .2s;}
.m2-tk-sheet span i{font-style:normal; font-size:22px; line-height:1; color:var(--c); text-shadow:0 1px 0 #1d1f29;}
.m2-tk-sheet span.cur{border-color:#1d1f29; background:#fff; transform:translateY(-4px) scale(1.12); box-shadow:0 0 0 3px var(--c), 0 4px 12px rgba(0,0,0,0.25); animation:m2-tk-sheetcur .8s ease-in-out infinite;}
@keyframes m2-tk-sheetcur{50%{box-shadow:0 0 0 5px var(--c), 0 4px 16px rgba(0,0,0,0.3);}}
.m2-tk-sheet span.ok{opacity:.45; transform:scale(.92);}
.m2-tk-sheet span.ok i{color:#2fb35a;}
.m2-tk-keys.piano2{margin-top:10px; justify-content:center;}
.m2-tk-keys.piano2 .k{position:relative; width:44px; height:140px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:10px;}
.m2-tk-keys.piano2 .k b{display:grid; place-items:center; width:30px; height:30px; border-radius:50%; font-size:13px; font-weight:900; color:#1d1f29;
  background:var(--c); border:2px solid #1d1f29; box-shadow:0 2px 0 #1d1f29;}
.m2-tk-keys.piano2 .k::before{content:''; position:absolute; left:0; right:0; top:0; height:6px; background:var(--kc, transparent);}
.m2-tk-keys.piano2 .k.hint{animation:m2-tk-hint .6s ease-in-out infinite alternate;}
@keyframes m2-tk-hint{to{background:linear-gradient(#fff, #fff3b0); box-shadow:0 0 16px #ffd23f;}}
@media (max-width:640px){ .m2-tk-keys.piano2 .k{width:36px; height:118px;} .m2-tk-keys.piano2 .k b{width:26px; height:26px; font-size:12px;} .m2-tk-sheet span{min-width:30px;} }

/* ===== 하수도 배수관 잇기 (2026-10-27, script.js mgTaskPipes) ===== */
.m2-tk-pipes{display:flex; align-items:stretch; gap:6px; padding:10px; border-radius:12px; background:linear-gradient(#2b3531, #1b2220); border:3px solid #1d1f29; box-shadow:inset 0 0 20px rgba(0,0,0,0.6);}
.m2-tk-pipes .grid{display:grid; gap:4px;}
.m2-tk-pipes .cell{width:58px; height:58px; padding:0; cursor:pointer; border-radius:8px; background:#3e4a44; border:2px solid #1d1f29;
  box-shadow:inset 0 2px 0 rgba(255,255,255,0.06), inset 0 -3px 0 rgba(0,0,0,0.3); transition:background .2s;}
.m2-tk-pipes .cell:hover{background:#4a5852;}
.m2-tk-pipes .cell svg{display:block; width:100%; height:100%; transition:transform .18s cubic-bezier(.3,1.4,.5,1);}
.m2-tk-pipes .cell .pipe{fill:none; stroke:#8b939c; stroke-width:16; stroke-linecap:butt;}
.m2-tk-pipes .cell .water{fill:none; stroke:#3ab0ff; stroke-width:8; stroke-linecap:butt; opacity:0; transition:opacity .25s;}
.m2-tk-pipes .cell circle{fill:#6f7882; stroke:#1d1f29; stroke-width:2;}
.m2-tk-pipes .cell.wet .water{opacity:1;}
.m2-tk-pipes .cell.wet circle{fill:#7fd0ff;}
.m2-tk-pipes .cell.wet{background:#33504a;}
.m2-tk-pipes.flow .cell.wet .water{stroke-dasharray:10 8; animation:m2-tk-pipeflow .45s linear infinite;}
@keyframes m2-tk-pipeflow{to{stroke-dashoffset:-18;}}
.m2-tk-pipes .side{display:grid; grid-template-rows:repeat(3, 58px); gap:4px; align-items:center;}
.m2-tk-pipes .side i{display:grid; place-items:center; width:30px; height:30px; font-style:normal; font-size:18px;}
.m2-tk-pipes .side i.on{border-radius:8px; background:#1d1f29; box-shadow:0 0 0 2px #5d6b66;}
.m2-tk-pipes .side.in i.on{box-shadow:0 0 0 2px #3ab0ff, 0 0 12px rgba(58,176,255,0.6);}
.m2-tk-pipes.flow .side.out i.on{box-shadow:0 0 0 2px #3ab0ff, 0 0 16px rgba(58,176,255,0.8); animation:m2-tk-hint .4s ease-in-out infinite alternate;}
@media (max-width:640px){ .m2-tk-pipes .cell{width:48px; height:48px;} .m2-tk-pipes .side{grid-template-rows:repeat(3, 48px);} .m2-tk-pipes .side i{width:24px;} }

/* ===== 장소별 새 미니게임 (2026-10-27 "장소마다 알맞게, 안 겹치고 지역 특색") ===== */
/* 사격장 (군부대) */
.m2-tk-range{position:relative; width:min(440px, 100%); height:210px; border-radius:12px; overflow:hidden; border:3px solid #1d1f29;
  background:linear-gradient(#7fb0d8 0 38%, #b9a77c 38% 100%); box-shadow:inset 0 -20px 30px rgba(60,40,10,0.35);}
.m2-tk-range .sky{position:absolute; left:0; right:0; top:0; height:38%; background:radial-gradient(circle at 80% 30%, #fff6c8 0 6%, transparent 7%), linear-gradient(transparent 70%, #6f8f5a 70%);}
.m2-tk-range .lane{position:absolute; left:0; right:0; height:56px; border-top:4px solid #6b4a2b; background:linear-gradient(#8a6a3f, #6b4a2b 30%, transparent 30%); clip-path:inset(-90px 0 0 0);}   /* 아래(엄폐 판 뒤)만 가리고 위로 솟은 과녁은 보이게 */
.m2-tk-range .lane.l0{top:62px;} .m2-tk-range .lane.l1{top:108px;} .m2-tk-range .lane.l2{top:154px;}
.m2-tk-range .target{position:absolute; bottom:-60px; width:44px; height:60px; padding:0; border:0; background:none; cursor:crosshair; transform:translateX(-50%); transition:bottom .2s cubic-bezier(.3,1.5,.5,1);}
.m2-tk-range .target.up{bottom:2px;}
.m2-tk-range .target .post{position:absolute; left:50%; bottom:0; width:5px; height:22px; margin-left:-2.5px; background:#5a3c22;}
.m2-tk-range .target .board{position:absolute; left:2px; top:0; width:40px; height:40px; border-radius:50%; border:2.5px solid #1d1f29;
  background:radial-gradient(circle, #e8343a 0 16%, #fff 17% 33%, #e8343a 34% 50%, #fff 51% 67%, #e8343a 68%);}
.m2-tk-range .target.hit .board{filter:brightness(.7); transform:rotate(-12deg);}
.m2-tk-range .target.hit .board b{position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px; border-radius:50%; background:#1d1f29; box-shadow:0 0 0 2px #3a2a1a;}
.m2-tk-score{display:flex; gap:6px; justify-content:center;}
.m2-tk-score i{width:14px; height:22px; border-radius:3px 3px 6px 6px; background:#3a3f4d; border:2px solid #1d1f29; transition:background .2s, transform .2s;}
.m2-tk-score i.on{background:linear-gradient(#ffd56b, #c48a1f); transform:translateY(-3px);}
/* 지문 대조 (경찰서) */
.m2-tk-prints{display:flex; gap:12px; align-items:center; padding:12px; border-radius:12px; background:linear-gradient(#2c3a52, #1f2a3d); border:3px solid #1d1f29;}
.m2-tk-prints .scene{display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px; border-radius:10px; background:#f3efe2; border:2px solid #1d1f29; box-shadow:0 3px 0 #1d1f29; transform:rotate(-2deg);}
.m2-tk-prints .scene small{font-size:11px; font-weight:900; color:#8a1d1d;}
.m2-tk-prints .cards{display:grid; grid-template-columns:repeat(2, 1fr); gap:8px;}
.m2-tk-prints .card{display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px; cursor:pointer; border-radius:8px; background:#fbf8ee; border:2px solid #1d1f29; box-shadow:0 2px 0 #1d1f29; transition:transform .12s;}
.m2-tk-prints .card:hover{transform:translateY(-2px) scale(1.04);}
.m2-tk-prints .card small{font-size:10px; font-weight:800; color:#444;}
.m2-tk-prints .card.yes{background:#d9ffd9; box-shadow:0 0 0 3px #3ccf5a;}
.m2-tk-prints .card.no{opacity:.45;}
.m2-tk-prints .fp svg{display:block; width:60px; height:72px;}
.m2-tk-prints .fp.big svg{width:96px; height:116px;}
.m2-tk-prints .fp .pad{fill:#e9dcc4;}
.m2-tk-prints .fp g *{fill:none; stroke:#3b2f2a; stroke-width:2.6; stroke-linecap:round;}
.m2-tk-prints .fp g .scar{stroke:#e9dcc4; stroke-width:5;}
@media (max-width:640px){ .m2-tk-prints{flex-direction:column;} }
/* 연료 펌프 (군부대) */
.m2-tk-hpump{display:flex; align-items:flex-end; justify-content:center; gap:22px; padding:14px 18px 10px; border-radius:12px; background:linear-gradient(#4a5a3a, #33402a); border:3px solid #1d1f29;}
.m2-tk-hpump .can{position:relative; width:84px; height:110px; border-radius:10px 10px 6px 6px; overflow:hidden; background:#3a4a2e; border:3px solid #1d1f29; box-shadow:inset 0 0 0 4px #556b3f;}
.m2-tk-hpump .can b{position:absolute; left:0; right:0; top:42%; text-align:center; font-size:14px; font-weight:900; letter-spacing:1px; color:#e8f0c8; text-shadow:0 2px 0 #1d1f29; z-index:1;}
.m2-tk-hpump .fuel{position:absolute; left:0; right:0; bottom:0; height:0; background:linear-gradient(#ffd56b, #e08a1f); transition:height .35s cubic-bezier(.3,1.4,.5,1);}
.m2-tk-hpump .can.glug{animation:m2-tk-glug .3s;}
@keyframes m2-tk-glug{40%{transform:scale(1.05, .95);}}
.m2-tk-hpump .pump{position:relative; width:70px; height:170px;}
.m2-tk-hpump .pipe{position:absolute; left:-22px; bottom:24px; width:30px; height:8px; background:#6f7a82; border:2px solid #1d1f29;}
.m2-tk-hpump .body{position:absolute; left:15px; bottom:0; width:40px; height:96px; border-radius:6px 6px 2px 2px; background:linear-gradient(90deg, #8a96a0, #5d6870); border:3px solid #1d1f29;}
.m2-tk-hpump .rod{position:absolute; left:31px; top:0; width:8px; height:90px; background:#c0c8ce; border:2px solid #1d1f29; transition:none;}
.m2-tk-hpump .handle{position:absolute; left:-30px; top:-14px; width:68px; height:18px; padding:0; cursor:grab; border-radius:9px; background:linear-gradient(#e0473f, #a3201a); border:3px solid #1d1f29; touch-action:none;}
/* 보일러 압력 (호텔) */
.m2-tk-valve{display:flex; align-items:center; justify-content:center; gap:26px; padding:14px; border-radius:12px; background:linear-gradient(#5a3b2a, #3b261b); border:3px solid #1d1f29;}
.m2-tk-valve .gauge{position:relative; width:130px; height:130px; border-radius:50%; background:radial-gradient(#fbf6e8 58%, #c9b98f 60%); border:5px solid #8a6a3f; box-shadow:0 0 0 3px #1d1f29, inset 0 0 12px rgba(0,0,0,0.3);}
.m2-tk-valve .gauge .zone{position:absolute; inset:10px; border-radius:50%;
  background:conic-gradient(from -120deg, transparent calc(var(--lo) * 240deg), #3ccf5a calc(var(--lo) * 240deg) calc(var(--hi) * 240deg), transparent calc(var(--hi) * 240deg));
  -webkit-mask:radial-gradient(transparent 62%, #000 63%); mask:radial-gradient(transparent 62%, #000 63%);}
.m2-tk-valve .gauge .needle{position:absolute; left:50%; bottom:50%; width:4px; height:50px; margin-left:-2px; border-radius:2px; background:#d42a2a; transform-origin:50% 100%; box-shadow:0 0 0 1px #1d1f29;}
.m2-tk-valve .gauge::after{content:''; position:absolute; left:50%; top:50%; width:14px; height:14px; margin:-7px; border-radius:50%; background:#1d1f29;}
.m2-tk-valve .gauge b{position:absolute; left:0; right:0; bottom:22px; text-align:center; font-size:11px; color:#5a4a33;}
.m2-tk-valve .gauge.ok{box-shadow:0 0 0 3px #1d1f29, 0 0 20px #3ccf5a;}
.m2-tk-valve .wheel{position:relative; width:110px; height:110px; cursor:grab; border-radius:50%; touch-action:none;
  background:radial-gradient(#1d1f29 0 12%, transparent 13%), conic-gradient(from 0deg, transparent 0 40deg, #c4372b 40deg 50deg, transparent 50deg 130deg, #c4372b 130deg 140deg, transparent 140deg 220deg, #c4372b 220deg 230deg, transparent 230deg 310deg, #c4372b 310deg 320deg, transparent 320deg);
  border:10px solid #c4372b; box-shadow:0 0 0 3px #1d1f29, inset 0 0 0 3px #1d1f29;}
.m2-tk-valve .wheel i{position:absolute; left:50%; top:50%; width:26px; height:26px; margin:-13px; border-radius:50%; background:#d9d2c4; border:3px solid #1d1f29;}
/* 소인 찍기 (시청 우편) */
.m2-tk-belt{position:relative; width:min(440px, 100%); height:150px; overflow:hidden; border-radius:12px; background:linear-gradient(#e9e2d0 0 55%, #3a3f4d 55%); border:3px solid #1d1f29;}
.m2-tk-belt .rollers{position:absolute; left:0; right:0; bottom:22px; height:22px; background:repeating-linear-gradient(90deg, #5d6474 0 18px, #4a505d 18px 22px); border-top:3px solid #1d1f29; animation:m2-tk-belt .6s linear infinite;}
@keyframes m2-tk-belt{to{background-position:22px 0;}}
.m2-tk-belt .stamper{position:absolute; left:50%; top:0; width:40px; margin-left:-20px; height:60px; z-index:3;}
.m2-tk-belt .stamper::before{content:''; position:absolute; left:14px; top:0; width:12px; height:34px; background:#8a6a3f; border:2px solid #1d1f29;}
.m2-tk-belt .stamper .head{position:absolute; left:0; top:30px; width:40px; height:20px; border-radius:4px; background:#2b2f3a; border:2px solid #1d1f29;}
.m2-tk-belt .stamper.down{animation:m2-tk-stampdown .3s ease-in-out;}
@keyframes m2-tk-stampdown{45%{transform:translateY(34px);}}
.m2-tk-belt .stamper::after{content:''; position:absolute; left:-10px; right:-10px; top:46px; height:44px; border:2px dashed rgba(200,40,40,0.55); border-radius:6px; pointer-events:none;}
.m2-tk-belt .env{position:absolute; top:64px; width:110px; height:58px; transform:translateX(0); border-radius:4px; background:#fdfaf1; border:2px solid #1d1f29; box-shadow:0 3px 0 rgba(0,0,0,0.25); z-index:2;}
.m2-tk-belt .env .addr{position:absolute; left:10px; top:24px; width:52px; height:5px; border-radius:3px; background:#b9b2a1;}
.m2-tk-belt .env .addr.s{top:34px; width:38px;}
.m2-tk-belt .env .stampbox{position:absolute; right:8px; top:6px; width:22px; height:26px; border:2px dashed #c0392b;}
.m2-tk-belt .env.stamped .stampbox{border:none; background:radial-gradient(circle, transparent 40%, #c0392b 42% 52%, transparent 54%), #ffe1d6; transform:rotate(-12deg);}
/* 배전함 (중앙로) */
.m2-tk-breaker{display:grid; grid-template-columns:auto auto auto; grid-template-areas:"plan sw lever" "lamps lamps lamps"; gap:12px; align-items:center; justify-items:center; padding:14px; border-radius:12px;
  background:linear-gradient(#59636e, #3d454e); border:3px solid #1d1f29; box-shadow:inset 0 0 0 4px #6f7a85;}
.m2-tk-breaker .plan{grid-area:plan; display:flex; flex-direction:column; gap:3px; padding:6px 8px; border-radius:6px; background:#f4f1e6; border:2px solid #1d1f29;}
.m2-tk-breaker .plan small{font-size:10px; font-weight:900; color:#555;}
.m2-tk-breaker .plan i{font-style:normal; font-size:10px; font-weight:900; text-align:center; padding:1px 6px; border-radius:4px; color:#888; background:#ddd;}
.m2-tk-breaker .plan i.on{color:#1d1f29; background:#ffd84d;}
.m2-tk-breaker .sw{grid-area:sw; display:flex; flex-direction:column; gap:4px;}
.m2-tk-breaker .toggle{position:relative; width:60px; height:21px; padding:0; cursor:pointer; border-radius:4px; background:#262a33; border:2px solid #1d1f29;}
.m2-tk-breaker .toggle i{position:absolute; left:3px; top:2px; width:24px; height:13px; border-radius:3px; background:#a0a8b2; transition:left .12s, background .12s;}
.m2-tk-breaker .toggle.on i{left:29px; background:#ffd84d; box-shadow:0 0 8px #ffd84d;}
.m2-tk-breaker .lever{grid-area:lever; position:relative; width:36px; height:110px; padding:0; cursor:pointer; border-radius:8px; background:#262a33; border:3px solid #1d1f29;}
.m2-tk-breaker .lever i{position:absolute; left:50%; top:10px; width:14px; height:44px; margin-left:-7px; border-radius:7px; background:linear-gradient(#e0473f, #a3201a); border:2px solid #1d1f29; transform-origin:50% 100%;}
.m2-tk-breaker .lever.pull i{animation:m2-tk-lever .5s ease-in-out;}
@keyframes m2-tk-lever{50%{top:52px;}}
.m2-tk-breaker .lamps{grid-area:lamps; display:flex; gap:22px;}
.m2-tk-breaker .lamps i{width:22px; height:22px; border-radius:50%; background:#4a4f5a; border:2px solid #1d1f29;}
.m2-tk-breaker .lamps.lit i{background:#fff3a8; box-shadow:0 0 18px #ffe066, 0 0 40px rgba(255,224,102,0.6);}
.m2-tk-breaker.spark{animation:m2-tk-spark .3s;}
@keyframes m2-tk-spark{30%{box-shadow:inset 0 0 0 4px #6f7a85, 0 0 24px #7fd4ff;}}
/* 꽃다발 (광장) */
.m2-tk-bqtop{display:flex; gap:14px; align-items:center; justify-content:center;}
.m2-tk-order{display:flex; flex-direction:column; gap:4px; padding:8px 12px; border-radius:8px; background:#fffaf0; border:2px solid #1d1f29; box-shadow:0 3px 0 #1d1f29; transform:rotate(-1.5deg);}
.m2-tk-order b{font-size:12px; color:#8a1d4a;}
.m2-tk-order span{display:flex; align-items:center; gap:4px; font-size:12px; font-weight:800; color:#333;}
.m2-tk-order span i svg{width:18px; height:26px; display:block;}
.m2-tk-order span em{font-style:normal; color:#999;}
.m2-tk-order span.ok{text-decoration:line-through; color:#3a9a4a;}
.m2-tk-order span.ok em{color:#3a9a4a;}
.m2-tk-wrap{position:relative; width:110px; height:120px;}
.m2-tk-wrap .stems{position:absolute; left:50%; top:4px; width:0; height:70px;}
.m2-tk-wrap .stem{position:absolute; left:-20px; top:0; transform:rotate(var(--r)); transform-origin:50% 100%;}
.m2-tk-wrap .stem svg{width:40px; height:56px; display:block;}
.m2-tk-wrap .paper{position:absolute; left:18px; top:46px; width:74px; height:70px; clip-path:polygon(0 0, 100% 0, 60% 100%, 40% 100%); background:linear-gradient(90deg, #f7c6d9, #ffe3ee 50%, #f7c6d9);}
.m2-tk-wrap .ribbon{position:absolute; left:46px; top:84px; width:18px; height:10px; border-radius:4px; background:#e0336b; opacity:0; transition:opacity .3s, transform .3s; transform:scale(.4);}
.m2-tk-wrap.tied .ribbon{opacity:1; transform:scale(1.3);}
.m2-tk-bed{display:grid; grid-template-columns:repeat(6, 1fr); gap:2px; padding:10px 10px 4px; border-radius:12px; background:linear-gradient(#7fbf5a, #4f8f3a); border:3px solid #1d1f29;}
.m2-tk-bed .flower{padding:0; border:0; background:none; cursor:pointer; transform-origin:50% 100%; animation:m2-tk-sway 2.4s ease-in-out infinite alternate;}
.m2-tk-bed .flower:hover{filter:brightness(1.12) drop-shadow(0 0 6px #fff);}
.m2-tk-bed .flower svg{width:40px; height:56px; display:block;}
@keyframes m2-tk-sway{from{transform:rotate(calc(var(--sway) * -1));} to{transform:rotate(var(--sway));}}

/* 보일러 밸브 버튼 (2026-10-29 "밸브 판정 이상해, 쉽게") -- 휠 대신 누르고 있어도 됨 */
.m2-tk-valvebtns{display:flex; gap:10px; justify-content:center;}
.m2-tk-valvebtns button{padding:8px 16px; font-family:var(--font); font-size:13px; font-weight:900; color:#fff; cursor:pointer; touch-action:none; user-select:none;
  background:linear-gradient(#c4372b, #8f2219); border:2px solid #1d1f29; border-radius:10px; box-shadow:0 3px 0 #1d1f29; transition:transform .08s;}
.m2-tk-valvebtns button.on{transform:translateY(2px); box-shadow:0 1px 0 #1d1f29; filter:brightness(1.15);}

/* 부활 연출 (2026-10-29 "의사가 살려 주는 애니메이션") -- script.js showReviveFx */
.m2-revive-fx{position:absolute; inset:0; z-index:40; display:grid; place-items:center; pointer-events:none; overflow:hidden;}
.m2-revive-fx .flash{position:absolute; inset:0; background:#fff; opacity:0; animation:m2RvFlash .7s ease-out;}
.m2-revive-fx .ring{position:absolute; left:50%; top:50%; width:40px; height:40px; margin:-20px; border-radius:50%; border:6px solid #5dff9b; opacity:0;
  box-shadow:0 0 30px #5dff9b; animation:m2RvRing 1.4s .1s ease-out forwards;}
.m2-revive-fx .ring.r2{animation-delay:.4s;}
.m2-revive-fx.priest .ring{border-color:#ffe28a; box-shadow:0 0 30px #ffe28a;}
.m2-revive-fx .mark{position:absolute; left:50%; top:50%; transform:translate(-50%, -60%) scale(.3); font-size:96px; line-height:1; color:#5dff9b; opacity:0;
  text-shadow:0 0 30px #5dff9b, 0 6px 0 #0b3a22; animation:m2RvMark 2.4s cubic-bezier(.2,1.4,.4,1) forwards;}
.m2-revive-fx.priest .mark{color:#ffe28a; text-shadow:0 0 30px #ffe28a;}
.m2-revive-fx p{position:absolute; left:50%; top:62%; transform:translateX(-50%); margin:0; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; opacity:0;
  animation:m2RvText 2.4s .25s ease forwards;}
.m2-revive-fx p strong{font-size:28px; font-weight:900; color:#fff; text-shadow:0 3px 0 #0b0c11, 0 0 18px rgba(93,255,155,0.7);}
.m2-revive-fx p small{font-size:14px; font-weight:800; color:#c9ffe0; text-shadow:0 2px 0 #0b0c11;}
@keyframes m2RvFlash{0%{opacity:.85;} 100%{opacity:0;}}
@keyframes m2RvRing{0%{opacity:1; transform:scale(.4);} 100%{opacity:0; transform:scale(14);}}
@keyframes m2RvMark{0%{opacity:0; transform:translate(-50%, -60%) scale(.3);} 20%{opacity:1; transform:translate(-50%, -60%) scale(1.15);} 30%{transform:translate(-50%, -60%) scale(1);} 80%{opacity:1;} 100%{opacity:0; transform:translate(-50%, -90%) scale(1);}}
@keyframes m2RvText{0%{opacity:0; transform:translate(-50%, 10px);} 15%, 80%{opacity:1; transform:translate(-50%, 0);} 100%{opacity:0;}}