/* =================================================================
 * Tomato Investigation Mode CSS
 * =================================================================
 * 조사 모드 채널 진입 시 활성화되는 오버레이/UI 스타일.
 * 기존 Tomato 디자인 시스템(--bg, --accent, --border 등) 재활용.
 * ================================================================= */

/* 채널 만들기 모달의 모드 토글 (chmodal/cheditmodal 공용) */
.inv-mode-toggle {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.inv-mode-btn {
  flex: 1;
  background: none;
  border: 1px solid var(--border2);
  color: var(--muted);
  border-radius: 8px;
  padding: 9px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.inv-mode-btn.active {
  border-color: var(--accent);
  background: var(--adim);
  color: var(--accent2);
}
.inv-mode-desc {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}

/* 맵 파일 업로드 영역 (모달 안) */
.inv-map-upload {
  margin-top: 10px;
  padding: 12px;
  background: var(--bg3);
  border: 1px dashed var(--border2);
  border-radius: 8px;
  font-size: 12px;
}
.inv-map-upload.loaded {
  border-color: var(--green);
  border-style: solid;
}
.inv-map-upload-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inv-file-btn {
  background: var(--bg4);
  border: 1px solid var(--border2);
  color: var(--text);
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font);
  white-space: nowrap;
}
.inv-file-btn:hover { border-color: var(--accent); color: var(--accent); }
.inv-file-name {
  flex: 1;
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inv-file-name.loaded { color: var(--green); }
.inv-template-link {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
}
.inv-template-link:hover { text-decoration: underline; }

/* =================================================================
 * 조사 모드 메인 화면 (피드 영역 위에 오버레이)
 * ================================================================= */
.inv-overlay {
  position: absolute;
  inset: 56px 0 0 0; /* fh 헤더 아래부터 */
  background: var(--bg);
  display: none;
  flex-direction: column;
  z-index: 5;
  overflow: hidden;
}
.inv-overlay.active { display: flex; }

/* 상단 탭 (맵/조사/발견) */
.inv-tabs {
  display: flex;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.inv-tab {
  flex: 1;
  background: none;
  border: none;
  color: var(--muted);
  padding: 12px 8px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.inv-tab.active {
  color: var(--accent2);
  border-bottom-color: var(--accent);
}
.inv-tab:hover:not(.active) { color: var(--text2); }
.inv-tab .inv-badge {
  background: var(--red);
  color: #fff;
  border-radius: 9px;
  padding: 1px 6px;
  font-size: 10px;
  margin-left: 4px;
  vertical-align: middle;
  display: none;
}
.inv-tab .inv-badge.on { display: inline-block; }

.inv-tab-panel {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: none;
}
.inv-tab-panel.active { display: block; }

/* 인트로 박스 */
.inv-intro {
  background: var(--bg3);
  border-left: 3px solid var(--accent);
  padding: 10px 14px;
  margin-bottom: 12px;
  color: var(--text2);
  font-size: 13px;
  line-height: 1.6;
  font-style: italic;
  border-radius: 0 8px 8px 0;
}

/* 층 탭 */
.inv-floor-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.inv-floor-tab {
  padding: 5px 12px;
  background: none;
  color: var(--muted);
  border: 1px solid var(--border2);
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
}
.inv-floor-tab.current {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.inv-floor-tab .inv-here {
  margin-left: 4px;
  opacity: 0.85;
}

/* 격자 맵 */
.inv-grid {
  display: grid;
  gap: 2px;
  background: var(--border);
  padding: 2px;
  border-radius: 8px;
  margin-bottom: 12px;
}
.inv-cell {
  aspect-ratio: 1;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: not-allowed;
  transition: transform 0.1s, box-shadow 0.15s;
  user-select: none;
  color: var(--muted);
  position: relative;
  border-radius: 3px;
}
.inv-cell.visited { background: var(--bg4); }
.inv-cell.adjacent {
  cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--accent);
  animation: invPulse 1.6s ease-in-out infinite;
}
.inv-cell.adjacent:hover { transform: scale(1.08); }
.inv-cell.current {
  background: var(--accent) !important;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--accent), 0 0 16px var(--adim);
  z-index: 2;
}
.inv-cell.master-only { opacity: 0.5; }
.inv-cell.master-only.adjacent { opacity: 1; }

/* 타입별 방문 색상 */
.inv-cell.t-wall.visited { background: #2a2a35; }
.inv-cell.t-start.visited { background: rgba(62,207,142,0.18); }
.inv-cell.t-goal.visited { background: rgba(224,85,85,0.18); }
.inv-cell.t-clue.visited { background: rgba(240,184,64,0.18); }
.inv-cell.t-trap.visited { background: rgba(224,85,85,0.20); color: var(--red); }
.inv-cell.t-item.visited { background: rgba(139,124,248,0.18); }
.inv-cell.t-stair.visited { background: rgba(184,172,255,0.15); }
.inv-cell.t-custom.visited { background: rgba(62,207,142,0.14); }
.inv-cell.t-enemy.visited { background: rgba(224,85,85,0.28); color: var(--red); }

@keyframes invPulse {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--accent); }
  50%      { box-shadow: inset 0 0 0 2px var(--accent), 0 0 12px var(--adim); }
}

/* 범례 */
.inv-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
  gap: 6px;
  margin-top: 10px;
  padding: 10px;
  background: var(--bg2);
  border-radius: 8px;
  font-size: 11px;
}
.inv-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
}
.inv-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

/* 조사 결과 패널 */
.inv-info-type {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: 600;
}
.inv-info-type.t-start { background: var(--green); color: #06120c; }
.inv-info-type.t-goal { background: var(--red); color: #170808; }
.inv-info-type.t-clue { background: var(--gold); color: #17110b; }
.inv-info-type.t-trap { background: #d97a52; color: #170808; }
.inv-info-type.t-enemy { background: #b3261e; color: #fff; }
.inv-info-type.t-item { background: var(--accent); color: #fff; }
.inv-info-type.t-stair { background: var(--accent2); color: #170808; }
.inv-info-type.t-empty { background: var(--border); color: var(--muted); }
.inv-info-type.t-custom { background: var(--accent); color: #fff; }
.inv-info-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent2);
  margin: 0 0 8px;
}
.inv-info-content {
  color: var(--text);
  line-height: 1.7;
  font-size: 14px;
  white-space: pre-wrap;
}
.inv-info-coord {
  font-size: 11px;
  color: var(--muted);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.inv-info-empty {
  color: var(--muted);
  font-style: italic;
  text-align: center;
  padding: 40px 16px;
  line-height: 1.7;
  font-size: 13px;
}

/* 발견 기록 리스트 */
.inv-log-list { list-style: none; margin: 0; padding: 0; }
.inv-log-item {
  padding: 10px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13px;
  line-height: 1.5;
}
.inv-log-item:last-child { border-bottom: none; }
.inv-log-title {
  font-weight: 600;
  color: var(--accent2);
}
.inv-log-meta {
  font-size: 10px;
  color: var(--muted);
  margin-left: 6px;
}
.inv-log-content {
  color: var(--text2);
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
}

/* 도구바 */
.inv-toolbar {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.inv-tool-btn {
  background: none;
  color: var(--text2);
  border: 1px solid var(--border2);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.inv-tool-btn:hover { border-color: var(--accent); color: var(--accent); }
.inv-tool-btn.danger:hover { border-color: var(--red); color: var(--red); }

/* 빈 상태 (맵 없음) */
.inv-no-map {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
}
.inv-no-map strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  margin-bottom: 6px;
}
.inv-no-map .inv-tool-btn {
  margin-top: 14px;
}

/* v2: investigation channel identity, chat/investigation split, and master game controls */
.feed{position:relative}
.inv-channel-switch{
  display:none;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  padding:8px 14px;
  background:linear-gradient(180deg,var(--bg2),var(--bg));
  border-bottom:1px solid var(--border);
  box-shadow:0 8px 22px rgba(0,0,0,.10);
  z-index:7;
}
.inv-main-tab{
  flex:1;
  height:34px;
  border:1px solid var(--border2);
  border-radius:9999px;
  background:transparent;
  color:var(--muted);
  font-family:var(--font);
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  transition:background .16s,border-color .16s,color .16s,box-shadow .16s,transform .16s;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.inv-main-tab:hover{color:var(--text2);border-color:var(--accent)}
.inv-main-tab.active{
  background:var(--adim);
  border-color:var(--accent);
  color:var(--accent2);
  box-shadow:0 0 0 3px rgba(139,124,248,.10);
}
.feed.inv-channel .inv-overlay{inset:101px 0 0 0}
.inv-status{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
  padding:12px 14px;
  border:1px solid var(--border2);
  border-radius:14px;
  background:var(--bg3);
}
.inv-status-main{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px;color:var(--text)}
.inv-status-main strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:900}
.inv-status-sub{font-size:11px;color:var(--muted);line-height:1.45;text-align:right;max-width:48%}
.inv-status-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:58px;
  padding:4px 8px;
  border-radius:9999px;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
  background:rgba(139,124,248,.14);
  color:var(--accent2);
}
.inv-status.status-running{border-color:rgba(62,207,142,.35);background:rgba(62,207,142,.08)}
.inv-status.status-running .inv-status-chip{background:rgba(62,207,142,.18);color:var(--green)}
.inv-status.status-ended{border-color:rgba(224,85,85,.32);background:rgba(224,85,85,.075)}
.inv-status.status-ended .inv-status-chip{background:rgba(224,85,85,.16);color:var(--red)}
.inv-master-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.inv-tool-btn.inv-start-btn{border-color:rgba(62,207,142,.35);color:var(--green)}
.inv-tool-btn.inv-end-btn{border-color:rgba(224,85,85,.35);color:var(--red)}
.inv-tool-btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.35)}
.inv-cell.locked{cursor:not-allowed;animation:none;box-shadow:inset 0 0 0 1px var(--border2);opacity:.68}
.ch-item.tomato-investigation-channel{border:1px solid rgba(139,124,248,.20);background:linear-gradient(90deg,rgba(139,124,248,.08),transparent)}
.ch-item.tomato-investigation-channel.active{border-color:rgba(139,124,248,.42);box-shadow:0 0 0 3px rgba(139,124,248,.08)}
.ch-mode-badge{margin-left:auto;border:1px solid rgba(139,124,248,.28);border-radius:9999px;padding:1px 6px;font-size:10px;font-weight:900;color:var(--accent2);background:rgba(139,124,248,.10);white-space:nowrap}
.inv-overlay>.inv-status{margin:12px 14px 8px;flex-shrink:0}
.inv-overlay>.inv-master-toolbar{margin:0 14px 10px;flex-shrink:0}
.inv-overlay>.inv-tabs{flex-shrink:0}
@media(max-width:767px){
  .inv-channel-switch{padding:7px 10px;gap:7px}
  .feed.inv-channel .inv-overlay{inset:97px 0 0 0}
  .inv-status{display:block;padding:11px 12px}
  .inv-status-sub{text-align:left;max-width:none;margin-top:5px}
}

/* v3: game duration / turn timer / map replacement controls */
.inv-game-options{
  margin-top:10px;
  padding:12px;
  background:linear-gradient(180deg,var(--bg3),var(--bg2));
  border:1px solid var(--border2);
  border-radius:10px;
}
.inv-sub-label{
  display:block;
  margin-bottom:8px;
  color:var(--text2);
  font-size:12px;
  font-weight:850;
  letter-spacing:.01em;
}
.inv-time-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.inv-time-grid label{
  display:block;
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}
.inv-time-input-wrap{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:5px;
  background:var(--bg4);
  border:1px solid var(--border2);
  border-radius:8px;
  padding:0 9px;
}
.inv-time-input-wrap input{
  min-width:0;
  width:100%;
  height:36px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font-family:var(--font);
  font-size:14px;
  font-weight:800;
}
.inv-time-input-wrap span{
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
}
.inv-time-help{
  margin-top:8px;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}
.inv-status-times{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:4px;
  font-size:10px;
  color:var(--text2);
}
.inv-status.status-timeout,
.inv-status.status-turnout{
  border-color:rgba(240,184,64,.42);
  background:rgba(240,184,64,.075);
}
.inv-status.status-timeout .inv-status-chip,
.inv-status.status-turnout .inv-status-chip{
  background:rgba(240,184,64,.18);
  color:var(--gold);
}
#inv-next-turn-btn{border-color:rgba(240,184,64,.35);color:var(--gold)}
#inv-replace-map-btn{border-color:rgba(139,124,248,.35);color:var(--accent2)}
@media(max-width:767px){
  .inv-time-grid{grid-template-columns:1fr}
  .inv-status-times{font-size:10.5px}
}

/* v17: 조사 모드일 때 메인 입력창 숨김.
 * 조사 채널은 맵 탐색이 핵심이라 일반 게시글 작성창이 필요 없음.
 * 채팅 탭으로 전환하면(.inv-main-chat) 다시 표시됨. */
.feed.inv-channel.inv-main-investigation > .compose-wrap{
  display:none !important;
}

/* v17: 채널 생성 모달의 층 선택 + 시작 좌표 */
.inv-floor-select {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(139,124,248,.05);
  border-radius: 8px;
  border: 1px solid rgba(139,124,248,.15);
}
.inv-floor-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.inv-floor-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text2);
  transition: border-color .15s, color .15s, background .15s;
}
.inv-floor-check:has(input:checked) {
  border-color: var(--accent2);
  color: var(--accent2);
  background: rgba(139,124,248,.10);
  font-weight: 600;
}
.inv-floor-check input {
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent2);
}
.inv-start-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}
.inv-start-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
}

/* =================================================================
 * v17.6 — PC 분할 레이아웃: 채팅 | 조사 동시 표시
 *  - 넓은 화면(>=1100px)에서 조사 채널이면 채팅(좌) / 조사(우) 좌우 분할
 *  - 좁은 화면/모바일은 기존 탭 전환 유지
 * ================================================================= */
@media (min-width: 1100px) {
  /* 분할 비율은 --inv-split 변수(기본 50%)로 제어 — 가운데 선을 드래그해 조절 */
  .feed.inv-channel.inv-split {
    --inv-split: 50%;
  }
  /* 조사 채널일 때만 분할: 좌측 채팅 영역 너비 = --inv-split */
  .feed.inv-channel.inv-split .fb,
  .feed.inv-channel.inv-split .compose-wrap,
  .feed.inv-channel.inv-split .ptr-indicator {
    width: var(--inv-split);
    max-width: var(--inv-split);
    margin-right: auto; /* 왼쪽으로 */
    box-sizing: border-box;
  }
  /* 좌측 채팅 글이 우측 패널과 겹쳐 보이지 않도록 가로 넘침 차단 */
  .feed.inv-channel.inv-split .fb { overflow-x: hidden; }
  /* 조사 오버레이를 '덮기'가 아니라 오른쪽 영역에 고정 + 항상 표시 */
  .feed.inv-channel.inv-split .inv-overlay {
    display: flex !important;
    left: var(--inv-split);
    right: 0;
    top: 56px;
    border-left: 1px solid var(--border);
    z-index: 4; /* 헤더(.fh)보다 아래 */
    background: var(--bg);
  }
  /* 분할 모드에서는 채팅/조사 전환 탭바 숨김 (둘 다 보이니 불필요) */
  .feed.inv-channel.inv-split #inv-channel-switch {
    display: none !important;
  }
  /* 우측 조사 패널 안쪽 여백 살짝 */
  .feed.inv-channel.inv-split .inv-overlay > .inv-status { margin-top: 12px; }

  /* ---- 가운데 드래그 구분선(리사이저) ---- */
  /* 분할 모드에서만 표시 (높은 명시도로, 아래 blanket hide 규칙을 확실히 이김) */
  .feed.inv-channel.inv-split .inv-split-resizer {
    position: absolute;
    top: 56px;
    bottom: 0;
    left: var(--inv-split);
    width: 12px;
    margin-left: -6px;       /* 경계선 위에 가운데 정렬 */
    cursor: col-resize;
    z-index: 7;              /* 오버레이(4)보다 위에서 잡기 쉽게 */
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent;
    touch-action: none;
  }
  .feed.inv-channel.inv-split .inv-split-resizer::before {
    content: "";
    width: 2px;
    height: 100%;
    background: var(--border);
    transition: background .15s, width .15s;
  }
  .feed.inv-channel.inv-split .inv-split-resizer:hover::before,
  .feed.inv-channel.inv-split .inv-split-resizer.dragging::before {
    background: var(--accent);
    width: 4px;
  }
  /* 드래그 중에는 텍스트 선택 방해 제거 */
  .feed.inv-channel.inv-split.inv-resizing,
  .feed.inv-channel.inv-split.inv-resizing * {
    user-select: none !important;
  }
}

/* 분할 모드가 아닐 때(좁은 화면/모바일/일반 채널) 리사이저 숨김 (기본값) */
.inv-split-resizer { display: none; }

/* 분할이 불가능한 좁은 데스크톱(768~1099)·모바일: 기존 탭 전환 그대로.
   (inv-split 클래스가 붙지 않으므로 위 규칙 미적용) */

/* =================================================================
 * v17.7 — 맵 + 탐색 결과 결합 (한 패널 안에서 맵 | 탐색)
 *  - 넓으면 좌우(맵 | 탐색), 좁으면 위아래
 * ================================================================= */
.inv-mapsplit {
  display: flex;
  flex-direction: column;   /* 기본/스택(좁을 때): 위 맵 / 아래 탐색 */
  gap: 12px;
}
.inv-mapsplit-map { min-width: 0; }
.inv-mapsplit-info {
  min-width: 0;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.inv-mapsplit-info-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* 좌우 배치(JS가 조사 패널 실제 폭 >= 520px 일 때 .inv-mapsplit-side 부여) */
.inv-mapsplit.inv-mapsplit-side {
  flex-direction: row;
  align-items: flex-start;
}
.inv-mapsplit.inv-mapsplit-side .inv-mapsplit-map { flex: 1 1 60%; }
.inv-mapsplit.inv-mapsplit-side .inv-mapsplit-info {
  flex: 1 1 40%;
  border-top: none;
  border-left: 1px solid var(--border);
  padding-top: 0;
  padding-left: 12px;
}

/* 위/아래 스택(JS가 패널 폭 < 520px 일 때 .inv-mapsplit-stack 부여) */
.inv-mapsplit.inv-mapsplit-stack {
  flex-direction: column;
  align-items: stretch;
}
.inv-mapsplit.inv-mapsplit-stack .inv-mapsplit-info {
  border-top: 1px solid var(--border);
  border-left: none;
  padding-top: 10px;
  padding-left: 0;
}

/* v17.9 이동 예정 칸 표시 */
.inv-cell.pending-move {
  background: rgba(240, 184, 64, 0.18) !important;
  box-shadow: inset 0 0 0 2px var(--gold, #f0b840);
  color: var(--gold, #f0b840);
  animation: invPendingPulse 1.2s ease-in-out infinite;
}
@keyframes invPendingPulse {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--gold, #f0b840); }
  50% { box-shadow: inset 0 0 0 3px var(--gold, #f0b840); }
}

/* ================================================================
 * v17.57 도망/전투 선택 모달
 * ================================================================ */
#inv-flee-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inv-flee-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
}
.inv-flee-box {
  position: relative;
  background: var(--bg2, #1e1e2e);
  border: 1px solid var(--border, #333);
  border-radius: 16px;
  padding: 28px 24px 24px;
  width: min(320px, 90vw);
  text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  animation: invFleeIn 0.18s ease-out;
}
@keyframes invFleeIn {
  from { transform: scale(0.88); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.inv-flee-icon {
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 10px;
}
.inv-flee-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text, #eee);
  margin-bottom: 6px;
}
.inv-flee-sub {
  font-size: 0.85rem;
  color: var(--text2, #aaa);
  margin-bottom: 10px;
}
.inv-flee-rate {
  font-size: 0.82rem;
  color: var(--text2, #aaa);
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 5px 12px;
  display: inline-block;
  margin-bottom: 18px;
}
.inv-flee-btns {
  display: flex;
  gap: 10px;
}
.inv-flee-btn {
  flex: 1;
  padding: 12px 8px;
  border-radius: 10px;
  border: none;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}
.inv-flee-btn:active {
  transform: scale(0.96);
  filter: brightness(0.85);
}
.inv-flee-btn--fight {
  background: #b3261e;
  color: #fff;
}
.inv-flee-btn--fight:hover { filter: brightness(1.12); }
.inv-flee-btn--run {
  background: var(--bg3, #2a2a3a);
  color: var(--text, #eee);
  border: 1px solid var(--border, #444);
}
.inv-flee-btn--run:hover { filter: brightness(1.15); }
.inv-flee-timer {
  font-size: 0.82rem;
  color: #d97a52;
  font-weight: 600;
  margin-bottom: 14px;
}