/* ==========================================================================
   말랑 골목 HUD · 메뉴 디자인 시스템 (마지막에 불러 이전 테마 레이어 위에 덮는다)
   - 월드 위 HUD: 어두운 잉크 플레이트 + 금색 헤어라인. 낮·밤·어떤 배경에서도 읽힌다.
   - 메뉴 창: 크림 종이 + 잉크 액자 + 금색 안쪽 선. 헤더는 둥근 게임 서체.
   ========================================================================== */
.rpg-game {
  --h-plate: linear-gradient(180deg, rgba(34, 42, 60, .86), rgba(20, 26, 40, .82));
  --h-plate-solid: #1c2334;
  --h-line: rgba(243, 214, 150, .34);
  --h-line-strong: rgba(243, 214, 150, .7);
  --h-hi: inset 0 1px 0 rgba(255, 255, 255, .1);
  --h-drop: 0 6px 18px rgba(8, 12, 24, .35);
  --h-text: #fbf5e6;
  --h-sub: #c9c3b0;
  --h-gold: #f3c969;
  --h-gold-deep: #c99539;
  --h-mint: #8fe3c4;
  --h-rose: #ff8fae;
  --h-sky: #8cc8ff;
  --h-body: "Noto Sans KR", system-ui, sans-serif;
  --h-num: "Outfit", "Noto Sans KR", sans-serif;
  --m-paper: linear-gradient(180deg, #fffaf0, #f8f0de);
  --m-edge: #e6d8b8;
  --m-ink: #283246;
  --m-ink-soft: #6c7385;
}

/* ---------- 공통 플레이트 ---------- */
#rpg-app .rpg-game.rpg-game :is(.rpg-char, .rpg-ally, .rpg-gold, .rpg-tracker, .rpg-weather-chip, .rpg-minimap, .rpg-chat, .keys-hint, .showtime-chip, .favor-chip, .rpg-hotbar, .emote-bar, .live-hud, .shopping-watch) {
  background: var(--h-plate) !important;
  border: 1px solid var(--h-line) !important;
  box-shadow: var(--h-hi), var(--h-drop) !important;
  backdrop-filter: blur(10px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
  color: var(--h-text) !important;
  text-shadow: none !important;
  font-family: var(--h-body);
}
#rpg-app .rpg-game.rpg-game :is(.rpg-char, .rpg-ally, .rpg-gold, .rpg-tracker, .rpg-minimap, .rpg-chat)::before,
#rpg-app .rpg-game.rpg-game :is(.rpg-char, .rpg-ally, .rpg-gold, .rpg-tracker, .rpg-minimap, .rpg-chat)::after { display: none !important; }
#rpg-app .rpg-game.rpg-game :is(.rpg-char, .rpg-ally, .rpg-gold, .rpg-tracker, .rpg-weather-chip, .rpg-minimap, .rpg-chat, .live-hud, .shopping-watch) :is(b, small, p, span, header, label) { color: inherit; text-shadow: none !important; }

/* ---------- 좌상단: 내 캐릭터 카드 ---------- */
#rpg-app .rpg-game.rpg-game .rpg-hud-top-left { gap: 8px; }
#rpg-app .rpg-game.rpg-game .rpg-char {
  display: flex !important; align-items: center; gap: 12px;
  padding: 7px 16px 7px 7px !important; border-radius: 999px !important; min-width: 0 !important; width: max-content !important;
}
#rpg-app .rpg-game.rpg-game :is(.rpg-char-face, .rpg-ally-face) {
  width: 50px !important; height: 50px !important; flex: none; border-radius: 50% !important; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #fff8e6, #f1dfb8) !important;
  border: 0 !important; box-shadow: 0 0 0 2px var(--h-gold), 0 0 0 4px rgba(20, 26, 40, .9), 0 0 14px rgba(243, 201, 105, .35) !important;
  display: grid; place-items: center;
}
#rpg-app .rpg-game.rpg-game :is(.rpg-char-face, .rpg-ally-face) img { width: 118%; height: auto; margin-top: 14%; }
#rpg-app .rpg-game.rpg-game .rpg-char-info { display: grid; gap: 5px; min-width: 0; }
#rpg-app .rpg-game.rpg-game #h-name { font: 700 15px/1.2 var(--h-body) !important; color: var(--h-text) !important; letter-spacing: -.01em; white-space: nowrap; }
#rpg-app .rpg-game.rpg-game .rpg-char .bar { height: 9px !important; width: 168px; border-radius: 99px !important; background: rgba(0, 0, 0, .45) !important; border: 1px solid rgba(255, 255, 255, .08) !important; box-shadow: none !important; overflow: hidden; position: relative; }
#rpg-app .rpg-game.rpg-game .rpg-char .bar.hp i { background: linear-gradient(180deg, #ff9db1, #e9506f) !important; border-radius: 99px; }
#rpg-app .rpg-game.rpg-game .rpg-char .bar.mp i { background: linear-gradient(180deg, #9fd2ff, #4a8fe0) !important; border-radius: 99px; }
#rpg-app .rpg-game.rpg-game .rpg-char .bar span { position: absolute; inset: 0; font: 700 8px/9px var(--h-num) !important; color: #fff !important; text-align: center; letter-spacing: .04em; }
#rpg-app .rpg-game.rpg-game .rpg-char.danger { box-shadow: var(--h-hi), 0 0 0 2px #e9506f, 0 0 22px rgba(233, 80, 111, .55) !important; }
#rpg-app .rpg-game.rpg-game .rpg-ally {
  display: flex !important; align-items: center; gap: 10px; width: max-content !important; margin-left: 10px;
  padding: 5px 14px 5px 5px !important; border-radius: 999px !important;
}
#rpg-app .rpg-game.rpg-game .rpg-ally-face { width: 34px !important; height: 34px !important; box-shadow: 0 0 0 2px var(--h-sky), 0 0 0 3px rgba(20, 26, 40, .9) !important; }
#rpg-app .rpg-game.rpg-game #a-name { font: 600 12.5px/1.2 var(--h-body) !important; color: var(--h-sub) !important; }

/* ---------- 상단 가운데: 지역 이름 리본 ---------- */
#rpg-app .rpg-game.rpg-game .rpg-zone {
  position: relative; display: grid !important; justify-items: center; gap: 2px;
  padding: 8px 64px 9px !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  background: radial-gradient(ellipse 50% 100% at 50% 50%, rgba(20, 26, 40, .72), rgba(20, 26, 40, 0) 100%) !important;
  backdrop-filter: none !important;
  font: 400 23px/1.15 var(--h-display) !important; color: var(--h-text) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .5) !important;
}
#rpg-app .rpg-game.rpg-game .rpg-zone small {
  display: block !important; text-align: center;
  font: 700 11px/1.55 var(--h-body) !important; letter-spacing: .08em; color: var(--h-gold) !important; text-shadow: 0 1px 4px rgba(0, 0, 0, .7) !important;
}
#rpg-app .rpg-game.rpg-game .rpg-zone::after {
  content: ""; display: block !important; width: 120px; height: 1px; margin-top: 3px; order: 1;
  background: linear-gradient(90deg, transparent, var(--h-gold), transparent);
}
#rpg-app .rpg-game.rpg-game :is(.showtime-chip, .favor-chip) { border-radius: 999px !important; padding: 6px 15px !important; font: 700 12px/1.4 var(--h-body) !important; }
#rpg-app .rpg-game.rpg-game .showtime-chip.live { border-color: var(--h-line-strong) !important; color: var(--h-gold) !important; box-shadow: var(--h-hi), var(--h-drop), 0 0 16px rgba(243, 201, 105, .3) !important; }
/* 야외 영사기 앞: 화면 위 이름표를 숨기고 상영 안내는 글자만 남긴다. */
#rpg-app .rpg-game.cinema-viewing #overlay :is(.rpg-label.player, .rpg-speech) { visibility: hidden; }
#rpg-app .rpg-game.rpg-game.cinema-viewing #showtime-chip {
  background: transparent !important; border-color: transparent !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  color: #fff8e8 !important; text-shadow: 0 1px 3px #142033, 0 0 5px #142033 !important;
}

/* ---------- 우상단: 재화 · 아이콘 메뉴 · 지금 할 일 ---------- */
#rpg-app .rpg-game.rpg-game .rpg-hud-top-right { display: flex !important; flex-direction: column; align-items: flex-end; gap: 9px !important; }
#rpg-app .rpg-game.rpg-game .rpg-gold {
  display: inline-flex !important; align-items: center; gap: 8px;
  padding: 5px 16px 5px 6px !important; border-radius: 999px !important; min-width: 96px; justify-content: space-between;
}
#rpg-app .rpg-game.rpg-game .rpg-gold svg { filter: drop-shadow(0 0 6px rgba(243, 201, 105, .6)); }
#rpg-app .rpg-game.rpg-game #gold { font: 800 17px/1 var(--h-num) !important; color: var(--h-gold) !important; letter-spacing: .02em; }
#rpg-app .rpg-game.rpg-game .rpg-menu { display: flex !important; gap: 7px !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
#rpg-app .rpg-game.rpg-game .rpg-menu button {
  position: relative; width: 46px !important; height: 46px !important; min-width: 0 !important; padding: 0 !important;
  display: grid !important; place-items: center;
  background: var(--h-plate) !important; border: 1px solid var(--h-line) !important;
  box-shadow: var(--h-hi), var(--h-drop) !important; color: var(--h-text) !important; font-size: 19px;
  backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease !important;
}
#rpg-app .rpg-game.rpg-game .rpg-menu button svg { width: 23px; height: 23px; filter: none !important; }
#rpg-app .rpg-game.rpg-game :is(.rpg-menu, .rpg-gold) { --ic-ink: #fbf5e6; --ic-fill: #46557a; --ic-accent: #f3c969; --ic-light: #ffffff; }
#rpg-app .rpg-game.rpg-game .rpg-menu .menu-main { --ic-ink: #3a2a10; --ic-fill: #fff3cf; --ic-accent: #fff3cf; }
#rpg-app .rpg-game.rpg-game .rpg-menu button .ic { filter: none !important; }
#rpg-app .rpg-game.rpg-game .rpg-menu button small {
  position: absolute !important; top: calc(100% + 6px); left: 50%; transform: translate(-50%, -3px);
  display: block !important; padding: 3px 8px; border-radius: 6px; white-space: nowrap;
  background: var(--h-plate-solid); border: 1px solid var(--h-line); color: var(--h-text) !important;
  font: 600 11px/1.3 var(--h-body) !important; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 5;
}
#rpg-app .rpg-game.rpg-game .rpg-menu button:is(:hover, :focus-visible) { transform: translateY(-2px); border-color: var(--h-line-strong) !important; box-shadow: var(--h-hi), 0 0 0 1px var(--h-line-strong), 0 8px 20px rgba(8, 12, 24, .45), 0 0 16px rgba(243, 201, 105, .25) !important; color: var(--h-gold) !important; }
#rpg-app .rpg-game.rpg-game .rpg-menu button:is(:hover, :focus-visible) small { opacity: 1; transform: translate(-50%, 0); }
#rpg-app .rpg-game.rpg-game .rpg-menu button[aria-pressed="true"] { color: var(--h-gold) !important; border-color: var(--h-line-strong) !important; }
#rpg-app .rpg-game.rpg-game .rpg-menu .menu-main { background: linear-gradient(180deg, #f6d27c, #d9a443) !important; color: #3a2a10 !important; border-color: #fff3cf !important; }
#rpg-app .rpg-game.rpg-game .rpg-menu .menu-main:is(:hover, :focus-visible) { color: #2a1d08 !important; }

#rpg-app .rpg-game.rpg-game .rpg-weather-chip {
  padding: 4px 12px !important; border-radius: 999px !important; font: 600 11.5px/1.5 var(--h-body) !important; color: var(--h-sub) !important; cursor: pointer;
}
#rpg-app .rpg-game.rpg-game .rpg-tracker {
  display: grid !important; gap: 3px; text-align: left; width: 268px !important; max-width: 268px !important;
  padding: 11px 14px 12px 18px !important; border-radius: 14px !important; cursor: pointer; position: relative; overflow: hidden;
}
#rpg-app .rpg-game.rpg-game .rpg-tracker::before {
  display: block !important; content: "" !important; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--h-gold), var(--h-gold-deep)); box-shadow: 0 0 10px rgba(243, 201, 105, .6);
}
#rpg-app .rpg-game.rpg-game .rpg-tracker small { display: block !important; font: 700 10px/1.4 var(--h-body) !important; letter-spacing: .12em; color: var(--h-gold) !important; opacity: 1 !important; }
#rpg-app .rpg-game.rpg-game .rpg-tracker b { display: block !important; font: 700 14.5px/1.35 var(--h-body) !important; color: var(--h-text) !important; }
#rpg-app .rpg-game.rpg-game .rpg-tracker p { display: block !important; margin: 0 !important; font: 500 12px/1.5 var(--h-body) !important; color: var(--h-sub) !important; opacity: 1 !important; }
#rpg-app .rpg-game.rpg-game :is(.rpg-tracker, .rpg-weather-chip, .rpg-minimap, .rpg-chat, .showtime-chip, .favor-chip)[hidden] { display: none !important; }
#rpg-app .rpg-game.rpg-game .rpg-tracker:is(:hover, :focus-visible) { border-color: var(--h-line-strong) !important; }
#rpg-app .rpg-game.rpg-game .rpg-tracker.pulse { animation: hud-quest-glow 2.4s ease-in-out infinite !important; }
@keyframes hud-quest-glow { 0%, 100% { box-shadow: var(--h-hi), var(--h-drop); } 50% { box-shadow: var(--h-hi), var(--h-drop), 0 0 0 1px var(--h-line-strong), 0 0 22px rgba(243, 201, 105, .3); } }

/* ---------- 우하단: 미니맵 ---------- */
#rpg-app .rpg-game.rpg-game .rpg-minimap {
  padding: 7px 7px 6px !important; border-radius: 18px !important; opacity: 1 !important; width: 168px !important;
  display: grid !important; gap: 4px; z-index: 4;
  pointer-events: auto !important; cursor: pointer; /* 지도 열기 버튼이 되었으니 클릭을 받아야 한다 */
}
#rpg-app .rpg-game.rpg-game .rpg-minimap > * { pointer-events: none; }
#rpg-app .rpg-game.rpg-game .rpg-minimap svg { width: 100% !important; height: auto; border-radius: 12px; background: #dfe8d2; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), inset 0 0 18px rgba(30, 45, 30, .25); filter: none !important; }
#rpg-app .rpg-game.rpg-game .rpg-minimap svg > rect:first-child { fill: #dfe8d2 !important; }
#rpg-app .rpg-game.rpg-game .rpg-minimap small { display: flex !important; justify-content: center; align-items: center; gap: 5px; font: 700 10.5px/1.4 var(--h-body) !important; letter-spacing: .04em; color: var(--h-sub) !important; }
#rpg-app .rpg-game.rpg-game .rpg-minimap:is(:hover, :focus-visible) { border-color: var(--h-line-strong) !important; transform: translateY(-2px); }

/* ---------- 좌하단: 알림 로그 · 대화창 ---------- */
/* 새 알림이 아래에 붙고, 넘치는 옛 알림은 위로 흐려지며 잘린다. */
#rpg-app .rpg-game.rpg-game .rpg-log { opacity: 1 !important; gap: 5px; display: flex !important; flex-direction: column; justify-content: flex-end; align-items: flex-start; max-height: 116px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%); }
#rpg-app .rpg-game.rpg-game.peaceful .rpg-log { max-height: 76px; }
#rpg-app .rpg-game.rpg-game .rpg-log p { flex: none; }
#rpg-app .rpg-game.rpg-game .rpg-log p {
  width: max-content; max-width: 100%; margin: 0;
  padding: 6px 12px 6px 10px !important; border-radius: 10px !important; border: 0 !important; border-left: 3px solid var(--h-sub) !important;
  background: linear-gradient(90deg, rgba(20, 26, 40, .82), rgba(20, 26, 40, .62)) !important;
  box-shadow: 0 4px 12px rgba(8, 12, 24, .25) !important; backdrop-filter: blur(8px) !important;
  color: var(--h-text) !important; text-shadow: none !important; font: 500 12.5px/1.5 var(--h-body) !important;
}
#rpg-app .rpg-game.rpg-game .rpg-log p.quest { border-left-color: var(--h-gold) !important; }
#rpg-app .rpg-game.rpg-game .rpg-log p.loot { border-left-color: var(--h-mint) !important; }
#rpg-app .rpg-game.rpg-game .rpg-log p.old { opacity: .62 !important; }
#rpg-app .rpg-game.rpg-game .rpg-chat { border-radius: 16px !important; padding: 10px 12px !important; }
#rpg-app .rpg-game.rpg-game .rpg-chat header b { font: 700 13px/1.4 var(--h-body) !important; color: var(--h-text) !important; }
#rpg-app .rpg-game.rpg-game .rpg-chat header small { font-weight: 500 !important; color: var(--h-sub) !important; margin-left: 4px; }
#rpg-app .rpg-game.rpg-game .rpg-chat header button { background: rgba(255, 255, 255, .1) !important; color: var(--h-text) !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important; }
#rpg-app .rpg-game.rpg-game .rpg-chat .chat-lines p { color: var(--h-text) !important; text-shadow: none !important; }
#rpg-app .rpg-game.rpg-game .rpg-chat :is(input, select) {
  background: rgba(0, 0, 0, .3) !important; border: 1px solid rgba(255, 255, 255, .12) !important; border-radius: 10px !important;
  color: var(--h-text) !important; text-shadow: none !important; box-shadow: none !important;
}
#rpg-app .rpg-game.rpg-game .rpg-chat input::placeholder { color: rgba(251, 245, 230, .5) !important; }
#rpg-app .rpg-game.rpg-game .rpg-chat :is(input, select):focus { border-color: var(--h-line-strong) !important; outline: none; box-shadow: 0 0 0 3px rgba(243, 201, 105, .18) !important; }
#rpg-app .rpg-game.rpg-game .rpg-chat button[type="submit"] { background: linear-gradient(180deg, #f6d27c, #d9a443) !important; color: #3a2a10 !important; border: 0 !important; border-radius: 10px !important; font-weight: 800 !important; }
#rpg-app .rpg-game.rpg-game .chat-open { background: var(--h-plate) !important; border: 1px solid var(--h-line) !important; border-radius: 14px !important; box-shadow: var(--h-drop) !important; }

/* ---------- 조작 힌트 · 상호작용 프롬프트 ---------- */
#rpg-app .rpg-game.rpg-game .keys-hint {
  border-radius: 14px !important; padding: 9px 16px !important; font: 600 13px/1.4 var(--h-body) !important;
}
#rpg-app .rpg-game.rpg-game :is(.keys-hint, .rpg-npc-hint, .rpg-hotbar) kbd {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin: 0 2px;
  border-radius: 6px; background: linear-gradient(180deg, #fffaf0, #e8dcc0) !important; color: #2a2414 !important;
  border: 0 !important; box-shadow: 0 2px 0 #9d8a5e !important; font: 800 11px/1 var(--h-num) !important; text-shadow: none !important;
}
#rpg-app .rpg-game.rpg-game .rpg-npc-hint {
  background: var(--h-plate) !important; border: 1px solid var(--h-line-strong) !important; border-left: 1px solid var(--h-line-strong) !important; border-radius: 999px !important;
  color: var(--h-text) !important; padding: 9px 18px !important; font: 700 14px/1.4 var(--h-body) !important;
  box-shadow: var(--h-hi), var(--h-drop), 0 0 18px rgba(243, 201, 105, .22) !important; backdrop-filter: blur(10px) !important; text-shadow: none !important;
}

/* ---------- 머리 위 이름표 ---------- */
#rpg-app .rpg-game.rpg-game .rpg-label b {
  display: inline-flex !important; align-items: center; gap: 4px;
  padding: 2px 9px !important; border-radius: 999px !important;
  background: rgba(20, 26, 40, .62) !important; border: 1px solid rgba(255, 255, 255, .14) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25) !important; backdrop-filter: blur(4px) !important;
  color: #fbf5e6 !important; text-shadow: none !important; -webkit-text-stroke: 0 !important;
  font: 700 11.5px/1.5 var(--h-body) !important; white-space: nowrap;
}
#rpg-app .rpg-game.rpg-game .rpg-label.player.ally b { border-color: rgba(140, 200, 255, .55) !important; }
#rpg-app .rpg-game.rpg-game .rpg-label.player.me b { background: linear-gradient(180deg, #f6d27c, #d9a443) !important; color: #2f220b !important; border-color: #fff3cf !important; }
#rpg-app .rpg-game.rpg-game .rpg-label.aggro b { border-color: rgba(255, 120, 110, .8) !important; color: #ffd6d0 !important; }
#rpg-app .rpg-game.rpg-game .rpg-label.boss b { border-color: rgba(255, 143, 174, .9) !important; color: #ffe0ea !important; }
#rpg-app .rpg-game.rpg-game .rpg-label .star-sparkle { color: var(--h-gold); }
#rpg-app .rpg-game.rpg-game .rpg-label.dev-guest b { opacity: .35 !important; }
#rpg-app .rpg-game.rpg-game .rpg-speech {
  background: #fffaf0 !important; color: var(--m-ink) !important; border: 0 !important; border-radius: 14px !important;
  padding: 8px 13px !important; font: 600 12.5px/1.55 var(--h-body) !important; box-shadow: 0 0 0 1.5px var(--m-edge), 0 6px 16px rgba(8, 12, 24, .28) !important; text-shadow: none !important;
}
#rpg-app .rpg-game.rpg-game .rpg-speech::after { background: #fffaf0 !important; box-shadow: 1.5px 1.5px 0 var(--m-edge); }

/* ---------- 핫바 · 경험치 ---------- */
#rpg-app .rpg-game.rpg-game .rpg-hotbar { border-radius: 20px !important; padding: 8px !important; }
#rpg-app .rpg-game.rpg-game .rpg-hotbar .slot {
  background: rgba(0, 0, 0, .3) !important; border: 1px solid rgba(255, 255, 255, .12) !important; border-radius: 13px !important; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35) !important; color: var(--h-text) !important;
}
#rpg-app .rpg-game.rpg-game .rpg-hotbar .slot.skill { width: 66px !important; padding: 12px 4px 4px !important; align-content: start; }
#rpg-app .rpg-game.rpg-game .rpg-hotbar .slot.skill b { font: 700 10.5px/1.2 var(--h-body) !important; color: var(--h-text) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; }
#rpg-app .rpg-game.rpg-game .rpg-hotbar .slot.skill small { font: 600 9px/1.2 var(--h-num) !important; color: var(--h-sky) !important; }
#rpg-app .rpg-game.rpg-game .rpg-hotbar .slot.locked small { color: var(--h-rose) !important; }
#rpg-app .rpg-game.rpg-game .rpg-hotbar .slot em { left: 4px !important; top: 3px !important; font: 800 9px/1 var(--h-num) !important; color: var(--h-gold) !important; }
#rpg-app .rpg-game.rpg-game .rpg-hotbar .slot .qty { color: var(--h-text) !important; font: 800 10px/1 var(--h-num) !important; }
#rpg-app .rpg-game.rpg-game .rpg-hotbar .slot.auto.on { background: linear-gradient(180deg, #f6d27c, #d9a443) !important; color: #3a2a10 !important; }
#rpg-app .rpg-game.rpg-game .rpg-hotbar .slot.auto.on :is(b, small) { color: #3a2a10 !important; }
#rpg-app .rpg-game.rpg-game .rpg-hotbar .slot:hover { border-color: var(--h-line-strong) !important; }
#rpg-app .rpg-game.rpg-game .rpg-hotbar .slot :is(b, em, small) { color: var(--h-sub) !important; text-shadow: none !important; }
#rpg-app .rpg-game.rpg-game .rpg-exp { height: 5px !important; background: rgba(10, 14, 24, .55) !important; }
#rpg-app .rpg-game.rpg-game .rpg-exp i { background: linear-gradient(90deg, var(--h-gold-deep), var(--h-gold), #fff1c2) !important; box-shadow: 0 0 10px rgba(243, 201, 105, .7); }

/* ---------- 레벨업 · 지역 진입 배너 ---------- */
#rpg-app .rpg-game.rpg-game .rpg-banner:not(.live-notice) {
  font-family: var(--h-display) !important; font-weight: 400 !important; font-size: clamp(24px, 3.4vw, 34px) !important;
  background: linear-gradient(90deg, rgba(20, 26, 40, 0), rgba(20, 26, 40, .82) 18%, rgba(20, 26, 40, .82) 82%, rgba(20, 26, 40, 0)) !important;
  border: 0 !important; border-radius: 0 !important; padding: 14px 96px !important;
  box-shadow: none !important; backdrop-filter: none !important;
  border-image: linear-gradient(90deg, transparent, var(--h-gold), transparent) 1 0 !important; border-style: solid !important; border-width: 1px 0 !important;
}
#rpg-app .rpg-game.rpg-game .rpg-banner:not(.live-notice) small { font: 600 13.5px/1.5 var(--h-body) !important; color: var(--h-sub) !important; letter-spacing: .02em; }
#rpg-app .rpg-game.rpg-game .rpg-banner.level { color: var(--h-gold) !important; }

/* ==========================================================================
   메뉴 창(모달)
   ========================================================================== */
#rpg-app .rpg-game.rpg-game .rpg-modal-wrap:not(.cinema-viewer):not(.village-playing):not(.cinema-window) { -webkit-backdrop-filter: blur(6px) saturate(.9) !important;
  padding: 24px !important;
}
#rpg-app .rpg-game.rpg-game .rpg-modal-wrap:not(.cinema-viewer):not(.village-playing):not(.cinema-window) > .rpg-modal:not(.midnight-cafe) {
  --paper: #fffaf0; --paper-2: var(--m-cell); --paper-edge: var(--m-edge); --ink: var(--m-ink); --ink-soft: var(--m-ink-soft);
  /* zoom이 걸려도 창 높이가 화면을 넘지 않게 나눈다. */
  max-height: calc((100dvh - 48px) / clamp(.72, var(--ui, 1), 1.1)) !important;
  overflow: auto !important; overscroll-behavior: contain; color: var(--m-ink) !important;
  border: 0 !important;
  backdrop-filter: none !important;
  padding: 0 26px 24px !important;
  scrollbar-width: thin;
}
#rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) > header {
  position: sticky; top: 0; z-index: 3; margin: 0 -26px 4px; padding: 18px 22px 14px 26px !important;
  border: 0 !important; border-bottom: 0 !important;
}
#rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) > header::after {
  content: ""; position: absolute; left: 26px; right: 26px; bottom: 6px; height: 1px;
}
#rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) h2 {
  display: flex; align-items: center; gap: 10px; -webkit-text-stroke: 0 !important;
}
#rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) > header h2::before {
  content: ""; flex: none; transform: rotate(45deg);
}
#rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) h3 { color: var(--m-ink) !important; font-weight: 800 !important; }
#rpg-app .rpg-game.rpg-game .rpg-modal .x { flex: none; display: grid !important; place-items: center; padding: 0 !important;
  border-radius: 50% !important; border: 0 !important; line-height: 1 !important;
  transition: transform .15s ease, background .15s ease !important;
}
#rpg-app .rpg-game.rpg-game .rpg-modal .x svg { width: 16px; height: 16px; }

/* 메뉴 타일 */
#rpg-app .rpg-game.rpg-game .rpg-modal.menu-sheet { width: min(780px, 100%) !important; }
#rpg-app .rpg-game.rpg-game .menu-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)) !important; gap: 12px !important; }
#rpg-app .rpg-game.rpg-game .menu-grid button {
  padding: 18px 8px 14px !important; border-radius: 18px !important;
  background: var(--m-cell) !important; border: 1px solid var(--m-edge) !important;
  box-shadow: 0 2px 0 #eadfc4, 0 6px 14px rgba(120, 90, 30, .06) !important; color: var(--m-ink) !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}
#rpg-app .rpg-game.rpg-game .menu-grid button span {
  width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px;
  background: radial-gradient(circle at 50% 30%, #fff, #f3ead4); box-shadow: inset 0 0 0 1px #eadfc4;
}
#rpg-app .rpg-game.rpg-game .menu-grid button b { font: 700 13.5px/1.3 var(--h-body) !important; color: var(--m-ink) !important; }
#rpg-app .rpg-game.rpg-game .menu-grid button kbd {
  top: 8px !important; right: 8px !important; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px;
  border-radius: 5px; background: var(--m-chip) !important; color: #fbf5e6 !important; font: 800 9.5px/1 var(--h-num) !important; box-shadow: none !important; border: 0 !important;
}
#rpg-app .rpg-game.rpg-game .menu-grid button:is(:hover, :focus-visible) {
  transform: translateY(-3px); border-color: #d6bf8a !important;
  box-shadow: 0 0 0 1px #d6bf8a, 0 10px 22px rgba(120, 90, 30, .16) !important;
}
#rpg-app .rpg-game.rpg-game .menu-grid button:is(:hover, :focus-visible) span { background: radial-gradient(circle at 50% 30%, #fff7dc, #f6e2a8); }

/* 창 안 버튼 */
#rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) .rpg-btn:not(.gold):not(.ghost) { border: 0 !important; text-shadow: none !important; font-weight: 700 !important;
}
#rpg-app .rpg-game.rpg-game .rpg-modal .rpg-btn.gold, #rpg-app .rpg-game.rpg-game button.rpg-btn.gold { border: 0 !important; text-shadow: none !important; font-weight: 800 !important;
}
#rpg-app .rpg-game.rpg-game .rpg-modal .rpg-btn:is(:hover, :focus-visible) { filter: brightness(1.08); transform: translateY(-1px); }
#rpg-app .rpg-game.rpg-game .rpg-modal .menu-quit { background: transparent !important; }

/* 창 안의 카드류는 같은 셀 표면을 쓴다 */
#rpg-app .rpg-game.rpg-game .rpg-modal :is(.product, .shop-row, .cell, .now-list li, .quests li, .smith-row, .stylist-grid article, .emote-grid article, .gacha-book article) {
  background: var(--m-cell) !important; border: 1px solid var(--m-edge) !important; box-shadow: 0 2px 0 #eadfc4 !important; color: var(--m-ink) !important;
}

@media (max-width: 640px) {
  #rpg-app .rpg-game.rpg-game .rpg-modal-wrap:not(.cinema-viewer):not(.village-playing):not(.cinema-window) { padding: 12px !important; }
  #rpg-app .rpg-game.rpg-game .rpg-modal-wrap:not(.cinema-viewer):not(.village-playing):not(.cinema-window) > .rpg-modal { padding: 0 16px 18px !important; border-radius: 18px !important; }
  #rpg-app .rpg-game.rpg-game .rpg-modal > header { margin: 0 -16px 4px; padding: 14px 14px 12px 16px !important; }
  #rpg-app .rpg-game.rpg-game .menu-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  #rpg-app .rpg-game.rpg-game .menu-grid button span { width: 44px; height: 44px; }
  #rpg-app .rpg-game.rpg-game .rpg-tracker { width: 220px !important; }
  #rpg-app .rpg-game.rpg-game .rpg-char .bar { width: 120px; }
  #rpg-app .rpg-game.rpg-game .rpg-hud-top { top: 122px !important; }
  #rpg-app .rpg-game.rpg-game .rpg-chat.local:not(:focus-within) header { display: none !important; }
  #rpg-app .rpg-game.rpg-game .rpg-chat.local { padding: 6px 8px !important; border-radius: 14px !important; }
  #rpg-app .rpg-game.rpg-game .rpg-zone { font-size: 17px !important; padding: 5px 34px 6px !important; }
  #rpg-app .rpg-game.rpg-game .rpg-menu button { width: 38px !important; height: 38px !important; border-radius: 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #rpg-app .rpg-game.rpg-game .rpg-tracker.pulse { animation: none !important; }
}

/* ==========================================================================
   타이틀 화면: 3D 골목을 가리던 크림색 막을 걷고, 글자 쪽만 영화처럼 어둡게 깐다.
   ========================================================================== */
#rpg-app .rpg-title2 .title-shade {
  background:
    linear-gradient(90deg, rgba(14, 20, 36, .62) 0%, rgba(14, 20, 36, .28) 34%, transparent 55%),
    linear-gradient(0deg, rgba(14, 20, 36, .7) 0%, rgba(14, 20, 36, .2) 26%, transparent 42%),
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(8, 12, 24, .35) 100%) !important;
}
#rpg-app .rpg-title2 .title-logo small { color: #f3c969 !important; text-shadow: 0 1px 6px rgba(0, 0, 0, .55); letter-spacing: .32em; }
#rpg-app .rpg-title2 .title-logo h1 { filter: drop-shadow(0 6px 0 #c9dff2) drop-shadow(0 18px 30px rgba(8, 12, 24, .45)) !important; }
#rpg-app .rpg-title2 .title-logo p {
  background: rgba(20, 26, 40, .72) !important; color: #fbf5e6 !important; border: 1px solid rgba(243, 214, 150, .34);
  backdrop-filter: blur(8px); padding: 7px 16px !important; font-weight: 600 !important; font-size: 14px;
}
#rpg-app .rpg-title2 .title-menu { gap: 12px !important; bottom: 196px !important; }
#rpg-app .rpg-title2 .title-menu .rpg-btn {
  position: relative; padding: 15px 24px !important; font: 400 21px/1.2 "Jua", "Noto Sans KR", sans-serif !important;
  background: linear-gradient(180deg, rgba(34, 42, 60, .9), rgba(20, 26, 40, .86)) !important; color: #fbf5e6 !important;
  border: 1px solid rgba(243, 214, 150, .4) !important; text-shadow: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 8px 22px rgba(8, 12, 24, .4) !important; backdrop-filter: blur(10px);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
}
#rpg-app .rpg-title2 .title-menu .rpg-btn::before, #rpg-app .rpg-title2 .title-menu .rpg-btn::after { display: none !important; }
#rpg-app .rpg-title2 .title-menu .rpg-btn.gold {
  background: linear-gradient(180deg, #fbe09a, #e0ab4a) !important; color: #3a2a10 !important; border-color: #fff3cf !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 4px 0 #a87a26, 0 12px 28px rgba(160, 110, 20, .45) !important;
}
#rpg-app .rpg-title2 .title-menu .rpg-btn small { color: inherit; opacity: .7; }
#rpg-app .rpg-title2 .title-menu .rpg-btn:is(:hover, :focus-visible) { transform: translateX(6px); filter: brightness(1.08); }
#rpg-app .rpg-title2 .title-menu .rpg-btn:is(:hover, :focus-visible)::after {
  display: block !important; content: "›" !important; position: absolute; right: 20px; top: 50%; transform: translateY(-52%);
  font-size: 26px; line-height: 1; background: none !important; width: auto; height: auto;
}
#rpg-app .rpg-title2 .title-strip { bottom: 40px !important; }
#rpg-app .rpg-title2 .title-strip span {
  width: 96px !important; padding: 6px 6px 7px !important; border-radius: 12px !important; background: #fffaf0 !important;
  box-shadow: 0 0 0 1px rgba(214, 191, 138, .8), 0 4px 0 var(--c), 0 10px 22px rgba(8, 12, 24, .35) !important;
}
#rpg-app .rpg-title2 .title-strip .rpg-doll { width: 84px !important; height: 78px !important; border-radius: 8px; }
#rpg-app .rpg-title2 .title-strip b { font: 700 12px/1.3 "Noto Sans KR", sans-serif !important; color: #283246; }
#rpg-app .rpg-title2 .title-strip small { max-width: 84px; overflow: hidden; text-overflow: ellipsis; font-size: 10px !important; color: #6c7385 !important; }
/* 로고 그림(sheet-v4 title-logo, 한글이 정확할 때만) · 로고 장식 */
#rpg-app .rpg-title2 .title-logo.with-img h1 { filter: drop-shadow(0 14px 26px rgba(8, 12, 24, .4)) !important; }
#rpg-app .rpg-title2 .title-logo.with-img h1 img { display: block; width: clamp(300px, 36vw, 520px); height: auto; }
#rpg-app .rpg-title2 .title-logo h1 { position: relative; }
#rpg-app .rpg-title2 .title-orn { position: absolute; right: -54px; top: -30px; width: 96px; height: auto; rotate: 8deg; filter: drop-shadow(0 6px 10px rgba(8, 12, 24, .3)); pointer-events: none; }
@media (max-width: 760px) { #rpg-app .rpg-title2 .title-orn { width: 64px; right: -30px; } }
#rpg-app .rpg-title2 .title-fine {
  position: absolute; right: 18px; bottom: 10px; margin: 0; z-index: 3;
  color: rgba(251, 245, 230, .75) !important; font-size: 11px !important; text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

/* ==========================================================================
   캐릭터 선택 카드: 에피소드 배지와 역할 배지가 겹쳐 잘리던 문제 정리
   ========================================================================== */
#rpg-app .char-select .char-grid { align-items: stretch; }
#rpg-app .char-select .char-card { align-content: start; padding: 8px 8px 10px !important; }
#rpg-app .char-select .char-card .ep {
  max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 10.5px/1.6 "Noto Sans KR", sans-serif !important; padding: 0 8px !important;
  box-shadow: 0 2px 6px rgba(8, 12, 24, .2);
}
#rpg-app .char-select .char-card i {
  position: static !important; margin-top: 5px; order: 9;
  font: 700 10px/1.6 "Noto Sans KR", sans-serif !important; color: #6c7385;
  background: #f6efe0 !important; border: 0 !important; padding: 0 8px !important; border-radius: 999px;
}
#rpg-app .char-select .char-card small { min-height: 2.5em; display: grid; align-items: start; }
#rpg-app .char-select .char-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--c), 0 10px 22px rgba(48, 76, 53, .14) !important; }
#rpg-app .char-select .char-card[aria-selected=true] { box-shadow: 0 0 0 2.5px var(--c), 0 0 0 6px color-mix(in srgb, var(--c) 22%, transparent), 0 12px 26px rgba(48, 76, 53, .2) !important; }

/* ==========================================================================
   메뉴 창 안쪽: 본문은 읽는 서체(고딕), 제목만 둥근 게임 서체.
   예전에는 본문 전체가 장식 서체(Jua)였고 문단 여백 + 격자 간격이 겹쳐 줄 사이가 휑했다.
   ========================================================================== */
#rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) {
  font: 400 14.5px/1.65 var(--h-body) !important; letter-spacing: -.005em;
  row-gap: 14px !important; align-content: start;
  word-break: keep-all; overflow-wrap: anywhere; /* 한국어는 낱말 단위로 줄을 바꾼다 */
}
#rpg-app .rpg-game.rpg-game .rpg-modal :is(h2, h3, p) { text-wrap: pretty; }
#rpg-app .rpg-game.rpg-game .summon-modal > p:first-of-type { text-wrap: balance; }
#rpg-app .rpg-game.rpg-game .rpg-modal :is(p, ul, ol) { margin-top: 0; margin-bottom: 0; }
#rpg-app .rpg-game.rpg-game .rpg-modal :is(b, strong) { font-weight: 700; }
#rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) :is(small, .rpg-fine) { font-size: 12.5px !important; line-height: 1.6; color: var(--m-ink-soft); }
#rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) h3 { font: 800 16px/1.4 var(--h-body) !important; }
#rpg-app .rpg-game.rpg-game .rpg-modal :is(button, select, textarea, label) { font-family: var(--h-body); }
#rpg-app .rpg-game.rpg-game .rpg-modal .rpg-btn { min-height: 40px; padding: 8px 18px !important; font-size: 14px !important; }

/* 입력칸: 크고 또렷하게, 초점은 금빛 */
#rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) :is(input:not([type]), input[type="text"], input[type="search"], input[type="number"], select, textarea) {
  min-height: 44px; padding: 9px 14px !important; border-radius: 12px !important;
  background: var(--m-cell) !important; border: 1.5px solid var(--m-edge) !important; box-shadow: inset 0 2px 4px rgba(120, 90, 30, .06) !important;
  color: var(--m-ink) !important; font: 500 15px/1.4 var(--h-body) !important;
}
#rpg-app .rpg-game.rpg-game .rpg-modal :is(input, select, textarea):focus { outline: none; border-color: #d6a84a !important; box-shadow: 0 0 0 4px rgba(243, 201, 105, .28) !important; }
#rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) label { font-size: 12.5px; font-weight: 700; color: var(--m-ink-soft); letter-spacing: .02em; }

/* NPC 말풍선 한 줄 · 바로가기 띠: 같은 표면을 쓴다 */
#rpg-app .rpg-game.rpg-game .rpg-modal .npc-line {
  position: relative; padding: 12px 16px 12px 18px !important; border-radius: 14px !important;
  background: var(--m-cell) !important; border: 1px solid var(--m-edge) !important; box-shadow: none !important; font-size: 14px !important;
}
#rpg-app .rpg-game.rpg-game .rpg-modal .npc-line::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; }
#rpg-app .rpg-game.rpg-game .rpg-modal .mini-banner {
  background: linear-gradient(135deg, #2b3550, #1f2638) !important; border: 1px solid rgba(243, 214, 150, .4) !important; border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 16px rgba(20, 26, 40, .18) !important; color: #fbf5e6 !important;
}
#rpg-app .rpg-game.rpg-game .rpg-modal .mini-banner b { color: #f3c969 !important; font: 700 15px/1.4 var(--h-body) !important; }
#rpg-app .rpg-game.rpg-game .rpg-modal .mini-banner small { color: #d9d2bf !important; }

/* ---------- 핀볼 도우미 소환 창 ---------- */
#rpg-app .rpg-game.rpg-game .rpg-modal.summon-modal { width: min(520px, 100%) !important; justify-items: stretch; text-align: center; row-gap: 12px !important; }
#rpg-app .rpg-game.rpg-game .summon-modal .summon-glyph {
  justify-self: center; width: 88px; height: 88px; margin: 4px 0 2px; display: grid; place-items: center; border-radius: 50%;
  font-size: 40px !important; line-height: 1; color: #fff !important;
  background: radial-gradient(circle at 35% 30%, #d9c6ff, #9b7be8 60%, #6b4fc4);
  box-shadow: 0 0 0 4px #fffaf0, 0 0 0 6px #d6bf8a, 0 10px 28px rgba(107, 79, 196, .35), 0 0 40px rgba(155, 123, 232, .35);
  text-shadow: 0 0 12px rgba(255, 255, 255, .8);
}
#rpg-app .rpg-game.rpg-game .summon-modal > p:first-of-type { font: 400 21px/1.4 var(--h-display) !important; color: var(--m-ink); }
#rpg-app .rpg-game.rpg-game .summon-modal > p:nth-of-type(2) { font-size: 15px; color: var(--m-ink); }
#rpg-app .rpg-game.rpg-game .summon-modal > p:nth-of-type(2) strong { color: #7a55d6; background: #f0e9ff; padding: 1px 8px; border-radius: 6px; }
#rpg-app .rpg-game.rpg-game .summon-modal > p:nth-of-type(3) {
  text-align: left; padding: 12px 16px; border-radius: 14px; background: var(--m-cell2); border: 1px solid var(--m-edge);
  font-size: 13.5px; color: var(--m-ink-soft);
}
#rpg-app .rpg-game.rpg-game .summon-modal form { display: grid; gap: 10px; margin: 6px 0 0 !important; padding: 18px; border-radius: 18px; background: var(--m-cell); border: 1px solid var(--m-edge); }
#rpg-app .rpg-game.rpg-game .summon-modal form input { text-align: center; font: 400 26px/1.2 var(--h-display) !important; letter-spacing: .3em; min-height: 58px; }
#rpg-app .rpg-game.rpg-game .summon-modal form .rpg-btn { min-height: 48px; font-size: 15.5px !important; }
#rpg-app .rpg-game.rpg-game .summon-modal #summon-error:empty { display: none; }
#rpg-app .rpg-game.rpg-game .summon-modal #summon-error { color: #c0453b; font-size: 13px; font-weight: 700; }
#rpg-app .rpg-game.rpg-game .summon-modal > small { color: var(--m-ink-soft); }

/* ---------- 창 안의 남은 파스텔 상자들을 같은 종이 표면으로 ---------- */
#rpg-app .rpg-game.rpg-game .rpg-modal a { text-decoration-color: rgba(154, 100, 24, .35); text-underline-offset: 3px; }
#rpg-app .rpg-game.rpg-game .rpg-modal .pos-bar { background: var(--m-chip) !important; border-radius: 16px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important; padding: 10px 12px 10px 18px !important; }
#rpg-app .rpg-game.rpg-game .rpg-modal .pos-bar .pos-led { color: #f3c969 !important; }
#rpg-app .rpg-game.rpg-game .rpg-modal .pos-bar .rpg-btn:not(.gold) { background: #fbf5e6 !important; color: #232b3d !important; box-shadow: 0 3px 0 #b9ad8f !important; }
#rpg-app .rpg-game.rpg-game .fashion-modal { background-color: transparent !important; }
#rpg-app .rpg-game.rpg-game .fashion-modal h2 { color: var(--m-ink) !important; }
#rpg-app .rpg-game.rpg-game .fashion-intro { color: var(--m-ink-soft) !important; }
#rpg-app .rpg-game.rpg-game .rpg-modal .fashion-runway {
  display: grid; justify-items: center; gap: 6px; padding: 18px 20px !important; border-radius: 18px !important;
  background: linear-gradient(135deg, #2b3550, #1f2638) !important; border: 1px solid rgba(243, 214, 150, .4) !important; color: #d9d2bf !important; box-shadow: 0 8px 20px rgba(20, 26, 40, .16) !important;
}
#rpg-app .rpg-game.rpg-game .rpg-modal .fashion-runway b { color: #f3c969 !important; font: 400 19px/1.3 var(--h-display) !important; }
#rpg-app .rpg-game.rpg-game .rpg-modal .fashion-runway p { color: #d9d2bf !important; font-size: 13.5px; }
#rpg-app .rpg-game.rpg-game .rpg-modal .fashion-runway .rpg-btn[disabled] { filter: grayscale(.4) brightness(.85); opacity: .75; }
#rpg-app .rpg-game.rpg-game .rpg-modal .fashion-runway #fashion-status:empty { display: none; }
#rpg-app .fashion-fitting { background: var(--m-cell) !important; border: 1px solid var(--m-edge) !important; align-items: center; }
#rpg-app .rpg-game.rpg-game .fitting-preview { border-radius: 14px !important; box-shadow: inset 0 0 0 1px var(--m-edge); }
#rpg-app .rpg-game.rpg-game .wear-slots { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px; margin: 8px 0 12px; }
#rpg-app .rpg-game.rpg-game .wear-slots p {
  grid-column: auto !important; margin: 0 !important;
  display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 8px 6px 10px; border-radius: 10px;
  background: var(--m-cell2); border: 1px solid var(--m-edge); font-size: 13.5px;
}
#rpg-app .rpg-game.rpg-game .wear-slots em { flex: none; min-width: 52px; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--m-ink-soft); letter-spacing: .02em; }
#rpg-app .rpg-game.rpg-game .wear-slots span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
#rpg-app .rpg-game.rpg-game .wear-slots p.empty { border-style: dashed; background: transparent; }
#rpg-app .rpg-game.rpg-game .wear-slots p.empty span { color: #b3ab98; font-weight: 500; }
#rpg-app .rpg-game.rpg-game .wear-slots p.on { border-color: #d6bf8a; background: var(--m-hi); }
#rpg-app .rpg-game.rpg-game .wear-slots button { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--m-chip); color: #fbf5e6; font-size: 13px; line-height: 1; cursor: pointer; }
#rpg-app .rpg-game.rpg-game .rpg-modal .live-now { background: var(--m-chip) !important; color: #f3c969 !important; border-radius: 12px !important; padding: 10px 14px !important; }
#rpg-app .rpg-game.rpg-game .rpg-modal .live-now:empty { display: none; }
#rpg-app .rpg-game.rpg-game .rpg-modal .live-reserve-pick { border-color: var(--m-edge) !important; background: var(--m-cell); }
#rpg-app .rpg-game.rpg-game .rpg-modal .live-reserve-pick legend { color: var(--m-ink-soft) !important; }
#rpg-app .rpg-game.rpg-game .rpg-modal .live-setlist li { background: var(--m-cell2) !important; border: 1px solid var(--m-edge); font-size: 12.5px !important; }

/* ==========================================================================
   NPC 대화창: 화면 아래 대사 상자(게임 대화 UI). 이름표 리본 + 잉크 판 + 선택지 목록.
   ========================================================================== */
#rpg-app .npc-conversation {
  position: relative; width: min(680px, 100%) !important; padding: 30px 28px 22px !important;
  background: linear-gradient(180deg, rgba(34, 42, 60, .95), rgba(20, 26, 40, .94)) !important;
  border: 1px solid rgba(243, 214, 150, .45) !important;
  color: #fbf5e6 !important; font: 400 16px/1.7 "Noto Sans KR", sans-serif !important; word-break: keep-all;
  backdrop-filter: blur(10px);
}
#rpg-app .npc-conversation header { display: block !important; }
#rpg-app .npc-conversation header small { display: none !important; }
#rpg-app .npc-conversation header strong {
  position: absolute; left: 22px; top: -17px; padding: 5px 18px;
}
#rpg-app .npc-conversation header > button {
  position: absolute; right: 14px; top: 12px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 255, 255, .1) !important; color: #fbf5e6 !important; border: 0 !important; font-size: 18px; cursor: pointer;
}
#rpg-app .npc-conversation p { margin: 0 0 18px !important; font-size: 16.5px; color: #fbf5e6; text-wrap: pretty; }
#rpg-app .npc-conversation > div { display: grid !important; gap: 8px !important; }
#rpg-app .npc-conversation > div button {
  display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
  padding: 11px 16px !important; cursor: pointer;
  background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(255, 255, 255, .12) !important;
  color: #fbf5e6 !important; font: 600 14.5px/1.4 "Noto Sans KR", sans-serif !important;
  transition: background .15s, border-color .15s, transform .15s;
}
#rpg-app .npc-conversation > div button::before { content: "▸"; color: #f3c969; }
#rpg-app .npc-conversation > div button:is(:hover, :focus-visible) { background: rgba(243, 201, 105, .16) !important; border-color: rgba(243, 214, 150, .7) !important; transform: translateX(4px); outline: none; }
#rpg-app .npc-conversation > div button:last-child { background: transparent !important; border-color: transparent !important; color: #c9c3b0 !important; font-weight: 500 !important; }
#rpg-app .npc-conversation > div button:last-child::before { content: "✕"; color: #8d8777; font-size: 11px; }

/* ==========================================================================
   예전 테마 공통 변수 덮어쓰기: 민트 회색 카드(--b-cell), 녹색 주 버튼(--b-pink),
   라벤더 칸(--b-lav)이 수십 곳에 퍼져 있었다. 새 팔레트(크림 종이 · 잉크 · 금)로 바꾼다.
   ========================================================================== */
#rpg-app .rpg-game.rpg-game, #rpg-app .rpg-game.rpg-game.night-walk {
  --b-ink: #283246; --b-ink-soft: #6c7385; --b-title: #283246;
  --b-cell: #fffdf7; --b-small: 0 0 0 1px #e6d8b8; --b-vol: 0 0 0 1px #e6d8b8;
  --b-pink: linear-gradient(180deg, #34405a, #232b3d); --b-pink-sh: 0 3px 0 #0f1420, 0 6px 14px rgba(8, 12, 24, .2);
  --b-lav: #f6efdf; --b-lav-sh: 0 0 0 1px #e6d8b8;
}
/* 민트 회색 칸을 쓰던 카드들 */
#rpg-app .rpg-game.rpg-game .rpg-modal :is(.gear-slot, .bus-ticket, .raffle-card, .skill-evolution, .daily-sheet li, .quests li, .outing-cards button, .errand-wishes button, .st-free, .cinema-passport article) {
  background: var(--m-cell) !important; border-color: var(--m-edge) !important;
}
#rpg-app .rpg-game.rpg-game .rpg-modal :is(.raffle-rules, .community-policy) { background: var(--m-cell2) !important; border: 1px solid var(--m-edge) !important; color: var(--m-ink-soft) !important; }
#rpg-app .rpg-game.rpg-game .rpg-modal .evolution-art { background: radial-gradient(ellipse at 50% 60%, var(--m-hi), #f3e6c4) !important; }
/* 선택 상태: 민트 테두리 → 금 테두리 */
#rpg-app .rpg-game.rpg-game .rpg-modal :is(.outing-cards button[aria-pressed=true], .errand-wishes button[aria-pressed=true], [aria-pressed=true].st-free, .look-card.on) {
  border-color: #d6a84a !important; background: var(--m-hi) !important; box-shadow: 0 0 0 2px rgba(214, 168, 74, .35) !important; color: var(--m-ink) !important;
}
#rpg-app .rpg-game.rpg-game .rpg-modal .outing-cards span { color: #c99539 !important; }
/* 분홍 탭(캐릭터 모습 나/동료) → 잉크 탭 */
#rpg-app .rpg-game.rpg-game .rpg-modal.looks [role=tablist] button, #rpg-app .rpg-game.rpg-game .rpg-modal.looks .look-tabs button { box-shadow: none !important; }
#rpg-app .rpg-game.rpg-game .rpg-modal.looks button[aria-selected=true], #rpg-app .rpg-game.rpg-game .rpg-modal.looks button[aria-pressed=true]:not(.look-card) { background: var(--m-chip) !important; color: #fbf5e6 !important; }
/* 보라 안내 띠 · 표 머리 · 칩 */
#rpg-app .rpg-game.rpg-game .rpg-modal .bus-arrival { background: var(--m-chip) !important; color: #fbf5e6 !important; }
#rpg-app .rpg-game.rpg-game .rpg-modal th { background: var(--m-cell2) !important; color: var(--m-ink) !important; }
#rpg-app .rpg-game.rpg-game .rpg-modal kbd { border: 0 !important; }
#rpg-app .rpg-game.rpg-game .rpg-modal.goods-shop i { background: var(--m-cell2) !important; color: var(--m-ink-soft) !important; }
/* 분홍 출석 띠 · 행운 캡슐 카드 */
#rpg-app .rpg-game.rpg-game .rpg-modal .daily-streak { background: linear-gradient(135deg, #2b3550, #1f2638) !important; color: #fbf5e6 !important; border: 1px solid rgba(243, 214, 150, .4) !important; }
#rpg-app .rpg-game.rpg-game .rpg-modal .daily-streak :is(b, strong, small, p, span:not([class])) { color: inherit !important; }
#rpg-app .rpg-game.rpg-game .rpg-modal .lucky-card { background: var(--m-hi) !important; border: 1px solid #e6c97a !important; }
#rpg-app .rpg-game.rpg-game .rpg-modal :is(.lucky-card, .daily-streak) + * { margin-top: 0; }
/* 시네마 VIP 카드: 보라 → 잉크·금 패스 */
#rpg-app .rpg-game.rpg-game .rpg-modal .cinema-passport-card { background: linear-gradient(135deg, #2b3550, #1f2638) !important; border: 1px solid rgba(243, 214, 150, .5) !important; color: #f3c969 !important; }
/* 녹색 계열 직접 지정 버튼(이사님 연락 등) */
#rpg-app .rpg-game.rpg-game .rpg-modal.director-inbox button:not(.x), #rpg-app .rpg-game.rpg-game .rpg-modal .director-tabs button[aria-pressed=true] { background: var(--m-chip) !important; color: #fbf5e6 !important; border-color: #232b3d !important; }
/* 비활성 버튼은 모두 같은 모양 */
#rpg-app .rpg-game.rpg-game .rpg-modal button:disabled:not(.x) { opacity: .5 !important; filter: grayscale(.6) !important; cursor: not-allowed; box-shadow: none !important; transform: none !important; }
#rpg-app .rpg-game.rpg-game .rpg-modal { --b-ink: #283246 !important; --b-ink-soft: #6c7385 !important; --b-title: #283246 !important; --b-cell: #fffdf7 !important; }
#rpg-app .rpg-game.rpg-game .rpg-modal .quests li.current { border-color: #d6a84a !important; background: var(--m-hi) !important; }

/* 헤더 없이 시작하는 창은 위 여백이 필요하다(헤더가 그 몫을 하던 자리). */
#rpg-app .rpg-game.rpg-game .rpg-modal-wrap:not(.cinema-viewer):not(.village-playing):not(.cinema-window) > .rpg-modal:not(.midnight-cafe):not(:has(> header)) { padding-top: 26px !important; }
/* 자정 카페: 밤 테마 바탕은 살리고 액자만 공통으로 */
#rpg-app .rpg-game.rpg-game .rpg-modal-wrap > .rpg-modal.midnight-cafe {
  box-shadow: inset 0 0 0 1px rgba(243, 214, 150, .18), 0 0 0 6px #232b3d, 0 0 0 7px rgba(243, 214, 150, .45), 0 34px 90px rgba(4, 6, 14, .6) !important;
  border-radius: 22px !important;
}
#rpg-app .rpg-game.rpg-game .rpg-modal.midnight-cafe .x { position: absolute; right: 16px; top: 16px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .08) !important; color: #f5e8d2 !important; border: 1px solid rgba(243, 214, 150, .3) !important; display: grid; place-items: center; }

/* ---------- 캡슐 개봉: 종이 배경이 덮어 버린 등급 후광을 되살린다 ---------- */
#rpg-app .rpg-game.rpg-game .rpg-modal-wrap:not(.cinema-viewer):not(.village-playing):not(.cinema-window) > .rpg-modal.gacha-reveal { overflow: hidden !important; isolation: isolate; }
#rpg-app .rpg-game.rpg-game .rpg-modal-wrap:not(.cinema-viewer):not(.village-playing):not(.cinema-window) > .rpg-modal.gacha-reveal.open {
  background: radial-gradient(circle at 50% 36%, #ffffff 0%, color-mix(in srgb, var(--r, #f3c969) 22%, #fffaf0) 45%, #f8f0de 75%) !important;
}
#rpg-app .rpg-game.rpg-game .rpg-modal-wrap:not(.cinema-viewer):not(.village-playing):not(.cinema-window) > .rpg-modal.gacha-reveal.open::before { z-index: -1; }
#rpg-app .rpg-game.rpg-game .gacha-reveal .capsule-big { margin-top: 34px !important; }
#rpg-app .rpg-game.rpg-game .gacha-reveal.open .capsule-big { margin-top: 64px !important; }
#rpg-app .rpg-game.rpg-game .gacha-reveal .prize { font-size: 88px !important; }
#rpg-app .rpg-game.rpg-game .gacha-reveal .prize-name { font: 400 26px/1.3 var(--h-display) !important; color: var(--m-ink); }
#rpg-app .rpg-game.rpg-game .gacha-reveal.open > header h2 { color: color-mix(in srgb, var(--r, #c99539) 80%, #283246) !important; }
#rpg-app .rpg-game.rpg-game .gacha-reveal.r-SSR.open > header h2 {
  background: linear-gradient(90deg, #c99539, #f3c969, #c99539); -webkit-background-clip: text; background-clip: text; color: transparent !important;
  filter: drop-shadow(0 1px 0 rgba(120, 80, 10, .35));
}
#rpg-app .rpg-game.rpg-game .rpg-modal-wrap:not(.cinema-viewer):not(.village-playing):not(.cinema-window) > .rpg-modal.gacha-reveal.r-SSR.open {
  box-shadow: inset 0 0 0 1.5px #fff, 0 0 0 1.5px #e6c97a, 0 0 0 6px #232b3d, 0 0 0 7px #f3c969, 0 0 60px rgba(243, 201, 105, .55), 0 34px 90px rgba(4, 6, 14, .55) !important;
}
#rpg-app .rpg-game.rpg-game .gacha-reveal > header { background: transparent !important; }

/* ---------- 조우(미니게임 제안): 시작 전 안내는 읽기 좋은 폭의 카드로 ---------- */
#rpg-app .rpg-game.rpg-game .rpg-modal.encounter #encounter-body:has(> p) { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 6px 0 4px; }
#rpg-app .rpg-game.rpg-game .rpg-modal.encounter #encounter-body > p:first-child { font: 400 22px/1.4 var(--h-display) !important; color: var(--m-ink); }
#rpg-app .rpg-game.rpg-game .rpg-modal.encounter #encounter-body > p:nth-child(2) {
  max-width: 620px; padding: 14px 18px; border-radius: 14px; background: var(--m-cell2); border: 1px solid var(--m-edge); color: var(--m-ink-soft); text-align: left; line-height: 1.85;
}
#rpg-app .rpg-game.rpg-game .rpg-modal.encounter #encounter-body > .rpg-btn { min-width: 200px; min-height: 48px; font-size: 16px !important; }

/* ---------- 쓰러짐: 작은 알림이 아니라 장면 전환처럼 ---------- */
#rpg-app .rpg-game.rpg-game .rpg-modal-wrap:not(.cinema-viewer):not(.village-playing):not(.cinema-window):has(> .rpg-modal.death) { background: radial-gradient(ellipse at center, rgba(60, 14, 24, .55), rgba(8, 4, 10, .88)) !important; backdrop-filter: blur(4px) grayscale(.8) !important; }
#rpg-app .rpg-game.rpg-game .rpg-modal-wrap:not(.cinema-viewer):not(.village-playing):not(.cinema-window) > .rpg-modal.death {
  width: min(460px, 100%) !important; padding: 34px 32px 28px !important; text-align: center; justify-items: center;
  background: linear-gradient(180deg, rgba(34, 26, 38, .96), rgba(20, 16, 26, .96)) !important; color: #e9dfe2 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 143, 174, .25), 0 0 0 6px rgba(20, 16, 26, .6), 0 34px 90px rgba(0, 0, 0, .6) !important;
  animation: death-in .6s cubic-bezier(.2, .8, .2, 1) both;
}
#rpg-app .rpg-game.rpg-game .rpg-modal.death h2 { font: 400 34px/1.2 var(--h-display) !important; color: #ff9db1 !important; letter-spacing: .04em; text-shadow: 0 0 24px rgba(233, 80, 111, .5); }
#rpg-app .rpg-game.rpg-game .rpg-modal.death h2::before { display: none !important; }
#rpg-app .rpg-game.rpg-game .rpg-modal.death p { color: #cfc4c8 !important; font-size: 14.5px; }
#rpg-app .rpg-game.rpg-game .rpg-modal.death .rpg-btn { min-height: 48px; padding: 10px 24px !important; font-size: 15px !important; }
@keyframes death-in { from { opacity: 0; transform: translateY(14px) scale(.96); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { #rpg-app .rpg-game.rpg-game .rpg-modal.death { animation: none; } }

/* ==========================================================================
   화면 위 연출: 레벨업 컷인 · 지역 진입 타이틀 · 확인 창
   ========================================================================== */
#rpg-app .rpg-game .cutin { background: radial-gradient(ellipse at center, rgba(14, 18, 30, .35), rgba(8, 10, 20, .6)) !important; }
#rpg-app .rpg-game .cutin-band {
  background:
    radial-gradient(ellipse 40% 120% at 50% 50%, rgba(243, 201, 105, .28), transparent 70%),
    linear-gradient(90deg, #1b2131, #2b3550 30%, #2b3550 70%, #1b2131) !important;
  box-shadow: 0 0 0 2px #f3c969, 0 0 0 7px rgba(20, 26, 40, .85), 0 0 0 8px rgba(243, 201, 105, .5), 0 0 60px rgba(243, 201, 105, .35), 0 24px 50px rgba(4, 6, 14, .5) !important;
}
#rpg-app .rpg-game .cutin-stars i { background: #f3c969 !important; }
#rpg-app .rpg-game .cutin-band img { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 8px 18px rgba(0, 0, 0, .45)) !important; }
#rpg-app .rpg-game .cutin-text { text-shadow: 0 3px 12px rgba(0, 0, 0, .5) !important; }
#rpg-app .rpg-game .cutin-text small { color: #c9c3b0; letter-spacing: .08em; }
#rpg-app .rpg-game .cutin-text b {
  background: linear-gradient(180deg, #fff6d6 10%, #f3c969 55%, #c99539); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(90, 60, 10, .6));
}
#rpg-app .rpg-game .cutin-text span { color: #fbf5e6; } #rpg-app .rpg-game .cutin-text em { color: #f3c969 !important; }
#rpg-app .rpg-game .cutin-text p { color: #d9d2bf; }

#rpg-app .rpg-game .zone-title {
  padding: 16px 110px 18px; color: #fbf5e6 !important;
  background: linear-gradient(90deg, rgba(20, 26, 40, 0), rgba(20, 26, 40, .78) 22%, rgba(20, 26, 40, .78) 78%, rgba(20, 26, 40, 0));
  border-image: linear-gradient(90deg, transparent, #f3c969, transparent) 1 0; border-style: solid; border-width: 1px 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5) !important;
}
#rpg-app .rpg-game .zone-title small { color: #f3c969; letter-spacing: .3em; }
#rpg-app .rpg-game .zone-title b { background: none !important; padding: 0 !important; font: 400 50px/1.1 var(--h-display) !important; color: #fbf5e6; }
#rpg-app .rpg-game .zone-title span { color: #d9d2bf; font: 600 15px/1.5 var(--h-body) !important; }

#rpg-app .rpg-game.rpg-game .rpg-modal-wrap:not(.cinema-viewer):not(.village-playing):not(.cinema-window) > .rpg-modal.confirm {
  width: min(420px, 100%) !important; padding: 28px 26px 22px !important; text-align: center; justify-items: center;
}
#rpg-app .rpg-game.rpg-game .rpg-modal.confirm p { font-size: 16px; color: var(--m-ink); white-space: pre-line; line-height: 1.7; }
#rpg-app .rpg-game.rpg-game .rpg-modal.confirm :is(footer, .confirm-actions, div:last-child) { display: flex; gap: 10px; justify-content: center; width: 100%; }
#rpg-app .rpg-game.rpg-game .rpg-modal.confirm .rpg-btn { min-width: 120px; min-height: 46px; font-size: 15px !important; }
@media (max-width: 640px) {
  #rpg-app .rpg-game.rpg-game .wear-slots { grid-template-columns: 1fr !important; }
  #rpg-app .rpg-game.rpg-game .npc-conversation { padding: 26px 18px 16px !important; }
  #rpg-app .rpg-game.rpg-game .npc-conversation p { font-size: 15px; }
}

/* ==========================================================================
   핀볼군단 심부름: 친구 한 줄 = 얼굴 · 이름 · 무엇을 · 상품. 출발 버튼은 하나.
   ========================================================================== */
#rpg-app .rpg-game.rpg-game .rpg-modal-wrap:not(.cinema-viewer):not(.village-playing):not(.cinema-window) > .rpg-modal.errand-board { width: min(860px, 100%) !important; }
#rpg-app .rpg-game.rpg-game .errand-board .eb-intro { color: var(--m-ink); font-size: 15px; }
#rpg-app .rpg-game.rpg-game .errand-board .eb-intro span { display: block; font-size: 12.5px; color: var(--m-ink-soft); }
#rpg-app .rpg-game.rpg-game .errand-board .eb-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
#rpg-app .rpg-game.rpg-game .errand-board .eb-row {
  display: grid; grid-template-columns: 48px 92px minmax(0, 1fr) 250px; align-items: center; gap: 12px;
  padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--m-cell); border: 1px solid var(--m-edge);
}
#rpg-app .rpg-game.rpg-game .errand-board .eb-face { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--m-cell2); box-shadow: inset 0 0 0 1px var(--m-edge); }
#rpg-app .rpg-game.rpg-game .errand-board .eb-face svg { width: 100%; height: 100%; display: block; }
#rpg-app .rpg-game.rpg-game .errand-board .eb-who { display: grid; line-height: 1.3; }
#rpg-app .rpg-game.rpg-game .errand-board .eb-who b { font-size: 15px; }
#rpg-app .rpg-game.rpg-game .errand-board .eb-who small { font-size: 11.5px !important; }
#rpg-app .rpg-game.rpg-game .errand-board .eb-kinds { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--m-cell2); }
#rpg-app .rpg-game.rpg-game .errand-board .eb-kinds button {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 36px; padding: 0 6px;
  border: 0 !important; border-radius: 9px !important; background: transparent !important; box-shadow: none !important;
  color: var(--m-ink-soft) !important; font: 700 13px/1 var(--h-body) !important; cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s;
}
#rpg-app .rpg-game.rpg-game .errand-board .eb-kinds button span { font-size: 15px; }
#rpg-app .rpg-game.rpg-game .errand-board .eb-kinds button:hover { background: rgba(255, 255, 255, .7) !important; color: var(--m-ink) !important; }
#rpg-app .rpg-game.rpg-game .errand-board .eb-kinds button[aria-checked=true] { background: var(--m-chip) !important; color: #fbf5e6 !important; box-shadow: 0 2px 6px rgba(20, 26, 40, .25) !important; }
#rpg-app .rpg-game.rpg-game .errand-board .eb-kinds button:focus-visible { outline: 2px solid #d6a84a; outline-offset: 1px; }
#rpg-app .rpg-game.rpg-game .errand-board .eb-pick select { width: 100%; min-height: 40px; font-size: 13.5px !important; padding: 6px 10px !important; }
#rpg-app .rpg-game.rpg-game .errand-board .eb-pick small { color: var(--m-ink-soft); }
#rpg-app .rpg-game.rpg-game .errand-board .eb-busy { grid-column: 3 / 5; }
#rpg-app .rpg-game.rpg-game .errand-board .eb-row.st-busy { background: var(--m-cell2); border-style: dashed; }
#rpg-app .rpg-game.rpg-game .errand-board .eb-row.st-busy .eb-face { filter: grayscale(.5); opacity: .7; }
#rpg-app .rpg-game.rpg-game .errand-board .eb-row.st-offer { border-color: #d6a84a; background: var(--m-hi); }
#rpg-app .rpg-game.rpg-game .errand-board .eb-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid var(--m-edge); }
#rpg-app .rpg-game.rpg-game .errand-board .eb-gold { font-size: 13px; color: var(--m-ink-soft); }
#rpg-app .rpg-game.rpg-game .errand-board .eb-gold b { color: var(--m-ink); font-family: var(--h-num); }
#rpg-app .rpg-game.rpg-game .errand-board .eb-beauty { border: 0; background: none; color: var(--m-ink-soft); font-size: 12.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
#rpg-app .rpg-game.rpg-game .errand-board [data-go] { margin-left: auto; min-height: 50px; padding: 10px 26px !important; font-size: 16px !important; }
#rpg-app .rpg-game.rpg-game .errand-board .eb-status:empty { display: none; }
#rpg-app .rpg-game.rpg-game .errand-board .eb-status { color: #c0453b; font-weight: 700; font-size: 13px; }
@media (max-width: 720px) {
  #rpg-app .rpg-game.rpg-game .errand-board .eb-row { grid-template-columns: 40px 1fr; row-gap: 8px; }
  #rpg-app .rpg-game.rpg-game .errand-board .eb-face { width: 40px; height: 40px; }
  #rpg-app .rpg-game.rpg-game .errand-board :is(.eb-kinds, .eb-pick, .eb-busy) { grid-column: 1 / -1; }
  #rpg-app .rpg-game.rpg-game .errand-board .eb-kinds button { font-size: 12px !important; gap: 2px; }
  #rpg-app .rpg-game.rpg-game .errand-board [data-go] { width: 100%; }
}
#rpg-app .rpg-game.rpg-game .errand-board .eb-busy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#rpg-app .rpg-game.rpg-game .errand-board .eb-busy em { font-style: normal; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: var(--m-chip); color: #fbf5e6; }
#rpg-app .rpg-game.rpg-game .errand-board .st-offer .eb-busy em { background: #d6a84a; color: #2f220b; }
#rpg-app .rpg-game.rpg-game .errand-board .eb-busy .rpg-btn { min-height: 36px; margin-left: auto; }

/* ==========================================================================
   의뢰 게시판: 지금 의뢰 카드 · 진행 트랙 · 3D 캐릭터 수집 카드
   ========================================================================== */
#rpg-app .rpg-game.rpg-game .rpg-modal-wrap:not(.cinema-viewer):not(.village-playing):not(.cinema-window) > .rpg-modal.quest { width: min(760px, 100%) !important; }
#rpg-app .rpg-game.rpg-game .rpg-modal.quest h4 { margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px; font: 800 15px/1.3 var(--h-body); color: var(--m-ink); }
#rpg-app .rpg-game.rpg-game .rpg-modal.quest h4 small { font-size: 12px !important; font-weight: 700; color: #b0842e !important; }

/* 지금 의뢰 */
#rpg-app .rpg-game.rpg-game .qb-main {
  position: relative; overflow: hidden; display: grid; gap: 10px; padding: 22px 24px 20px; border-radius: 20px;
  background: radial-gradient(ellipse 60% 90% at 100% 0%, rgba(243, 201, 105, .22), transparent 60%), linear-gradient(160deg, #2e3954, #1d2436 70%);
  color: #fbf5e6; box-shadow: inset 0 0 0 1px rgba(243, 214, 150, .4), 0 12px 28px rgba(20, 26, 40, .25);
}
#rpg-app .rpg-game.rpg-game .qb-main::after { content: ""; position: absolute; right: -30px; top: -30px; width: 160px; height: 160px; border-radius: 50%; border: 1px dashed rgba(243, 214, 150, .25); pointer-events: none; }
#rpg-app .rpg-game.rpg-game .qb-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#rpg-app .rpg-game.rpg-game .qb-tag { padding: 4px 12px; border-radius: 999px; background: rgba(243, 201, 105, .16); color: #f3c969; font: 800 12px/1.4 var(--h-body); letter-spacing: .04em; box-shadow: inset 0 0 0 1px rgba(243, 201, 105, .45); }
#rpg-app .rpg-game.rpg-game .qb-state { font: 800 12px/1.4 var(--h-body); padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #d9d2bf; }
#rpg-app .rpg-game.rpg-game .qb-main.st-available .qb-state { background: #ff8fae; color: #3a0f1c; animation: qb-blink 1.6s ease-in-out infinite; }
#rpg-app .rpg-game.rpg-game .qb-main.st-complete .qb-state { background: #8fe3c4; color: #0f3a2c; }
#rpg-app .rpg-game.rpg-game .qb-from { color: #b8b19e !important; font-size: 12.5px !important; }
#rpg-app .rpg-game.rpg-game .qb-title { margin: 0; font: 400 26px/1.3 var(--h-display) !important; color: #fff7e1 !important; text-wrap: balance; }
#rpg-app .rpg-game.rpg-game .qb-goal { display: flex; align-items: center; gap: 10px; color: #e9e2cf !important; font-size: 15px; }
#rpg-app .rpg-game.rpg-game .qb-goal span { flex: none; padding: 2px 9px; border-radius: 6px; background: #f3c969; color: #2f220b; font: 800 11.5px/1.6 var(--h-body); }
#rpg-app .rpg-game.rpg-game .qb-bar { position: relative; height: 22px; border-radius: 999px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); overflow: hidden; }
#rpg-app .rpg-game.rpg-game .qb-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #c99539, #f3c969 70%, #fff1c2); box-shadow: 0 0 14px rgba(243, 201, 105, .6); transition: width .5s ease; }
#rpg-app .rpg-game.rpg-game .qb-main.st-complete .qb-bar i { background: linear-gradient(90deg, #3fae86, #8fe3c4); box-shadow: 0 0 14px rgba(143, 227, 196, .6); }
#rpg-app .rpg-game.rpg-game .qb-bar b { position: relative; display: block; text-align: center; font: 800 12px/22px var(--h-num); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
#rpg-app .rpg-game.rpg-game .qb-main:is(.st-available, .st-locked) .qb-bar { opacity: .5; }
#rpg-app .rpg-game.rpg-game .qb-rewards { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#rpg-app .rpg-game.rpg-game .qb-rlabel { font: 800 11.5px/1 var(--h-body); color: #b8b19e; letter-spacing: .1em; margin-right: 2px; }
#rpg-app .rpg-game.rpg-game .qb-r {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border-radius: 12px;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  --ic-ink: #3a2a10; --ic-fill: #f3c969; --ic-accent: #fff1c2; --ic-light: #fff;
}
#rpg-app .rpg-game.rpg-game .qb-r em { font-style: normal; font: 900 11px/26px var(--h-num); color: #2f220b; background: #8fe3c4; border-radius: 8px; padding: 0 6px; }
#rpg-app .rpg-game.rpg-game .qb-r b { font: 800 14px/1 var(--h-num); color: #fff7e1; }
#rpg-app .rpg-game.rpg-game .qb-r small { font-size: 11.5px !important; color: #b8b19e !important; }
#rpg-app .rpg-game.rpg-game .qb-cta { display: flex; justify-content: flex-end; }
#rpg-app .rpg-game.rpg-game .qb-cta .rpg-btn { min-height: 50px; padding: 10px 30px !important; font-size: 16px !important; }
#rpg-app .rpg-game.rpg-game .qb-cta .qb-claim { animation: qb-glow 1.4s ease-in-out infinite; }
#rpg-app .rpg-game.rpg-game .qb-note { color: #d9d2bf !important; font-size: 13.5px; margin-left: auto; }
#rpg-app .rpg-game.rpg-game .qb-main.st-done { justify-items: center; text-align: center; }
#rpg-app .rpg-game.rpg-game .qb-trophy { --ic-ink: #3a2a10; --ic-fill: #f3c969; --ic-accent: #fff1c2; filter: drop-shadow(0 0 18px rgba(243, 201, 105, .6)); }
@keyframes qb-blink { 50% { box-shadow: 0 0 0 4px rgba(255, 143, 174, .25); } }
@keyframes qb-glow { 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 0 #a87a26, 0 0 0 6px rgba(243, 201, 105, .3), 0 0 26px rgba(243, 201, 105, .6); } }

/* 의뢰 진행 트랙 */
#rpg-app .rpg-game.rpg-game .qb-track ol { list-style: none; margin: 0; padding: 4px 2px; display: flex; align-items: center; justify-content: space-between; position: relative; }
#rpg-app .rpg-game.rpg-game .qb-track ol::before { content: ""; position: absolute; left: 14px; right: 14px; top: 50%; height: 3px; transform: translateY(-50%); background: #e6d8b8; border-radius: 3px; }
#rpg-app .rpg-game.rpg-game .qb-track li { position: relative; z-index: 1; }
#rpg-app .rpg-game.rpg-game .qb-track li span {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--m-cell); color: #b3ab98; font: 800 11px/1 var(--h-num); box-shadow: 0 0 0 2px #e6d8b8;
}
#rpg-app .rpg-game.rpg-game .qb-track li.open span { color: var(--m-ink); box-shadow: 0 0 0 2px #c9b98f; }
#rpg-app .rpg-game.rpg-game .qb-track li.done span { background: linear-gradient(180deg, #f6d27c, #d9a443); color: #3a2a10; box-shadow: 0 0 0 2px #fff3cf; font-size: 13px; }
#rpg-app .rpg-game.rpg-game .qb-track li.now span { width: 36px; height: 36px; background: var(--m-chip); color: #f3c969; font-size: 14px; box-shadow: 0 0 0 3px #f3c969, 0 0 16px rgba(243, 201, 105, .7); animation: qb-blink 1.6s ease-in-out infinite; }
#rpg-app .rpg-game.rpg-game .qb-track li.locked span { opacity: .6; }

/* 3D 캐릭터 수집 카드 */
#rpg-app .rpg-game.rpg-game .qb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
#rpg-app .rpg-game.rpg-game .qb-cards article { display: grid; gap: 4px; padding: 8px 8px 10px; border-radius: 16px; background: var(--m-cell); box-shadow: inset 0 0 0 1px var(--m-edge); }
#rpg-app .rpg-game.rpg-game .qb-art { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #3a4566, #1d2436); margin-bottom: 4px; }
#rpg-app .rpg-game.rpg-game .qb-art img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) opacity(.55); transition: filter .2s; }
#rpg-app .rpg-game.rpg-game .qb-cards article.got .qb-art { background: radial-gradient(circle at 50% 40%, var(--m-hi), #f3dfa8); }
#rpg-app .rpg-game.rpg-game .qb-cards article.got .qb-art img { filter: none; }
#rpg-app .rpg-game.rpg-game .qb-cards article.got { box-shadow: inset 0 0 0 2px #d6a84a, 0 6px 16px rgba(201, 149, 57, .2); }
#rpg-app .rpg-game.rpg-game .qb-lock { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .45); --ic-ink: #fbf5e6; --ic-fill: #46557a; --ic-accent: #f3c969; }
#rpg-app .rpg-game.rpg-game .qb-badge { position: absolute; left: 8px; top: 8px; padding: 2px 9px; border-radius: 999px; background: var(--m-chip); color: #f3c969; font: 800 11px/1.6 var(--h-body); }
#rpg-app .rpg-game.rpg-game .qb-cards b { font-size: 14px; line-height: 1.3; }
#rpg-app .rpg-game.rpg-game .qb-cards small { font-size: 11.5px !important; line-height: 1.4; min-height: 2.8em; }
#rpg-app .rpg-game.rpg-game .qb-mini { height: 6px; border-radius: 3px; background: var(--m-track); overflow: hidden; }
#rpg-app .rpg-game.rpg-game .qb-mini i { display: block; height: 100%; background: linear-gradient(90deg, #c99539, #f3c969); border-radius: 3px; }
#rpg-app .rpg-game.rpg-game .qb-cards em { font-style: normal; font: 800 11.5px/1.4 var(--h-num); color: var(--m-ink-soft); }
#rpg-app .rpg-game.rpg-game .qb-cards article.got em { color: #9a6418; font-family: var(--h-body); }
@media (max-width: 640px) {
  #rpg-app .rpg-game.rpg-game .qb-main { padding: 18px 16px; }
  #rpg-app .rpg-game.rpg-game .qb-title { font-size: 21px !important; }
  #rpg-app .rpg-game.rpg-game .qb-track li span { width: 18px; height: 18px; font-size: 0; }
  #rpg-app .rpg-game.rpg-game .qb-track li.now span { width: 26px; height: 26px; font-size: 11px; }
  #rpg-app .rpg-game.rpg-game .qb-cards { grid-template-columns: repeat(2, 1fr); }
  #rpg-app .rpg-game.rpg-game .qb-cta .rpg-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { #rpg-app .rpg-game.rpg-game :is(.qb-state, .qb-track li.now span, .qb-claim) { animation: none !important; } }
#rpg-app .rpg-game.rpg-game .rpg-modal.quest .qb-main h3.qb-title { margin: 0; font: 400 26px/1.3 var(--h-display) !important; color: #fff7e1 !important; }
@media (max-width: 640px) { #rpg-app .rpg-game.rpg-game .rpg-modal.quest .qb-main h3.qb-title { font-size: 21px !important; } }

/* Finish the adventure board: one task at a time, optional collection view. */
#rpg-app .rpg-game.rpg-game .rpg-modal.quest .qb-tabs{display:flex;gap:8px;border:0;margin-bottom:8px}
#rpg-app .rpg-game.rpg-game .rpg-modal.quest .qb-tabs button{flex:1;min-height:42px;border:1px solid #e0d3b3;background:var(--m-cell);color:#77705e;border-radius:10px;font:700 13px var(--h-body);cursor:pointer}
#rpg-app .rpg-game.rpg-game .rpg-modal.quest .qb-tabs button[aria-pressed=true]{background:#283246;color:#f3d796;border-color:#283246}
#rpg-app .rpg-game.rpg-game .rpg-modal.quest [data-quest-panel][hidden]{display:none!important}
#rpg-app .rpg-game.rpg-game .qb-location{display:flex;gap:8px;align-items:center;color:#ebd297;font-size:13px;--ic-ink:#ebd297;--ic-fill:#364561;--ic-accent:#f3c969}
#rpg-app .rpg-game.rpg-game .qb-location small{margin-left:auto;color:#b8b19e!important;font-size:11px!important}
#rpg-app .rpg-game.rpg-game .qb-track{margin-top:22px}
#rpg-app .rpg-game.rpg-game .qb-collect{margin-top:10px}
#rpg-app .rpg-game.rpg-game .qb-goal{margin:4px 0!important}
#rpg-app .rpg-game.rpg-game .qb-tabs button:focus-visible{outline:2px solid #a57326;outline-offset:3px}

/* Concert participation, rather than a page of instructions. */
#rpg-app .rpg-game.rpg-game .rpg-modal-wrap > .rpg-modal.live-event{width:min(760px,100%)!important}
#rpg-app .rpg-game.rpg-game .live-event .le-stage{position:relative;overflow:hidden;padding:22px 24px;border-radius:18px;background:radial-gradient(ellipse at 90% 20%,#94688655,transparent 65%),linear-gradient(130deg,#263650,#1e2435);color:#fff3e1}
#rpg-app .rpg-game.rpg-game .live-event .le-stage-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
#rpg-app .rpg-game.rpg-game .live-event .le-stage-top span{color:#f4bbd2;font:700 11px var(--h-num);letter-spacing:.12em}
#rpg-app .rpg-game.rpg-game .live-event .le-stage small{color:#ccc5d0!important;font-size:11px!important}
#rpg-app .rpg-game.rpg-game .live-event .le-stage h3{font:400 32px var(--h-display)!important;color:#fff3e1!important;margin:16px 0 4px!important}
#rpg-app .rpg-game.rpg-game .live-event .le-stage p{font:600 14px var(--h-body)!important;color:#f3d796!important;margin:0 0 18px!important}
.le-stage-art{position:absolute;right:24px;bottom:24px;height:62px;display:flex;align-items:center;gap:7px;opacity:.45;pointer-events:none}.le-stage-art i{display:block;width:7px;height:40%;background:#f4bbd2;border-radius:8px}.le-stage-art i:nth-child(2n){height:90%}.le-stage-art i:nth-child(3n){height:65%}
#rpg-app .rpg-game.rpg-game .live-event .le-play h3{font:400 20px var(--h-display)!important;margin:18px 0 12px!important}
.le-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#rpg-app .rpg-game.rpg-game .live-event .le-steps article{position:relative;display:flex;flex-direction:column;gap:8px;padding:18px 14px;background:var(--m-cell);border:1px solid #e6d8b8;border-radius:14px}
.le-steps article>span{position:absolute;right:12px;top:12px;color:#b8a780;font:700 10px var(--h-num)}
#rpg-app .rpg-game.rpg-game .live-event .le-steps :is(kbd,strong){font:700 28px var(--h-num);color:#9c7029;background:none;border:0;padding:0;align-self:flex-start}
.le-steps strong small{font:600 11px var(--h-body);margin-left:4px}.le-steps b{font-size:13px}
#rpg-app .rpg-game.rpg-game .live-event .le-steps p{margin:0!important;font-size:11px!important;line-height:1.6;color:#7b7567!important}
#rpg-app .rpg-game.rpg-game .live-event .le-reserve{margin:16px 0 4px;padding:14px;border-radius:12px;border:1px solid #e6d8b8;background:var(--m-cell)}
.le-reserve legend{font-size:13px;font-weight:700}.le-reserve>div{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#rpg-app .rpg-game.rpg-game .live-event .le-reserve p{font-size:11px!important;margin:0 0 10px!important}
#rpg-app .rpg-game.rpg-game .live-event .le-reserve label{display:flex;justify-content:center;align-items:center;gap:5px;padding:9px 5px;border-radius:8px;font-size:11px;cursor:pointer;background:#f4efdf}
#rpg-app .rpg-game.rpg-game .live-event .le-reserve label:has(input:checked){background:#283246;color:#f3d796}
#rpg-app .rpg-game.rpg-game .live-event .le-reserve input{width:13px!important;height:13px!important;accent-color:#d4ad61}
.le-details{padding:12px 0;border-bottom:1px solid #e6d8b8}.le-details summary{cursor:pointer;font:600 12px var(--h-body);color:#6d6558}.le-record{display:flex;gap:22px;font-size:12px;margin:12px 0}.le-record b{color:#94671c}.le-actions{display:flex;gap:8px;margin-top:16px}.le-actions>button{flex:1}.le-footnote{display:block;margin-top:10px;line-height:1.6}
@media(max-width:640px){.le-steps{gap:6px}#rpg-app .rpg-game.rpg-game .live-event .le-steps article{padding:16px 9px}.le-steps b{font-size:11px}.le-actions{flex-direction:column}.le-stage-art{opacity:.18}.qb-location{flex-wrap:wrap}}
#rpg-app .rpg-game.rpg-game .live-event fieldset.le-reserve{display:block!important}
#rpg-app .rpg-game.rpg-game .rpg-modal.quest .qb-bar{opacity:1!important}
#rpg-app .rpg-game.rpg-game .qb-equip{display:grid;gap:5px;margin-top:8px}
#rpg-app .rpg-game.rpg-game .qb-equip .rpg-btn{font-size:11px!important;padding:7px 5px!important;min-height:32px}
.looks-quest-goals{margin:14px 0}.looks-quest-goals summary{cursor:pointer;font-size:12px;color:#7f725c}
/* Character action fan: no modal blur, generous wedge targets, quiet brass lighting. */
.actor-wheel-overlay{position:fixed;inset:0;z-index:95;background:transparent}
.actor-wheel{position:absolute;width:380px;height:300px;transform-origin:top left;filter:drop-shadow(0 10px 18px #09121888);animation:actor-fan-in .18s ease-out}
.actor-wheel-fan{position:absolute;inset:0;width:380px;height:300px;overflow:visible}
.actor-wheel-fan path{fill:#192635ed;stroke:#c6b48577;stroke-width:1;cursor:pointer;transition:fill .12s,stroke .12s}
.actor-wheel-fan path.on{fill:#46574ded;stroke:#f3d68f;stroke-width:2;filter:drop-shadow(0 0 5px #e8c77755)}
.actor-wheel-fan path.locked{fill:#17222bc9;opacity:.55;cursor:default}
#rpg-app .rpg-game .actor-wheel .actor-wheel-choice{position:absolute;transform:translate(-50%,-50%);width:76px;min-height:66px;padding:3px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:transparent!important;border:0!important;box-shadow:none!important;color:#e7e7d9!important;font:11px/1.4 system-ui,sans-serif!important;cursor:pointer;--ic-ink:#ddcb9d;--ic-fill:#556d67;--ic-accent:#f3d796;--ic-light:#fff4d5}
.actor-wheel-choice b{font-weight:500;white-space:normal;word-break:keep-all}.actor-wheel-choice:disabled{opacity:.3;cursor:default}.actor-wheel-choice:focus-visible{outline:1px solid #f3d796;outline-offset:3px;border-radius:8px}
#rpg-app .rpg-game .actor-wheel .actor-wheel-center{position:absolute;left:151px;top:177px;width:78px;height:78px;border-radius:50%;border:1px solid #d8c38a!important;background:radial-gradient(circle,#50645d,#182c31)!important;color:#eddfb9!important;padding:5px!important;box-shadow:0 0 0 5px #11202a99,0 0 24px #b7a87733!important;cursor:pointer}
.actor-wheel-center img{width:46px;height:46px;object-fit:contain}.actor-wheel-center span{display:block;font:9px system-ui,sans-serif;letter-spacing:.03em}
.actor-wheel-caption{position:absolute;left:50px;top:257px;width:280px;text-align:center;pointer-events:none;color:#f4ecd7;text-shadow:0 2px 5px #07101b}.actor-wheel-caption small{display:none}.actor-wheel-caption b{font:500 12px system-ui,sans-serif;letter-spacing:.03em}.actor-wheel-caption p{font:10px system-ui,sans-serif!important;color:#c3cbbc!important;margin:5px 0!important}
@keyframes actor-fan-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.actor-wheel{animation:none}.actor-wheel-fan path{transition:none}}
.actor-wheel-caption{border-radius:14px;background:radial-gradient(ellipse,#14242bd9,transparent 80%);padding:5px 0}.actor-wheel-caption p{line-height:1.4!important}
#rpg-app .rpg-game .rpg-label.player.me,#rpg-app .rpg-game .rpg-label.player.ally{pointer-events:auto;cursor:pointer}
/* 핀볼군단(자동 쇼핑): 친구 상태 카드 4장 */
#rpg-app .rpg-game.rpg-game .rpg-modal-wrap:not(.cinema-viewer):not(.village-playing):not(.cinema-window) > .rpg-modal.errand-board.auto { width: min(680px, 100%) !important; }
#rpg-app .rpg-game.rpg-game .errand-board .eb-crew { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
#rpg-app .rpg-game.rpg-game .errand-board .eb-card { display: grid; justify-items: center; gap: 3px; padding: 16px 8px 12px; border-radius: 18px; background: var(--m-cell); box-shadow: inset 0 0 0 1px var(--m-edge); text-align: center; }
#rpg-app .rpg-game.rpg-game .errand-board .eb-card .eb-face { width: 64px; height: 64px; margin-bottom: 4px; }
#rpg-app .rpg-game.rpg-game .errand-board .eb-card b { font-size: 16px; }
#rpg-app .rpg-game.rpg-game .errand-board .eb-card small { font-size: 12px !important; }
#rpg-app .rpg-game.rpg-game .errand-board .eb-card em { margin-top: 6px; font-style: normal; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--m-cell2); color: var(--m-ink-soft); }
#rpg-app .rpg-game.rpg-game .errand-board .eb-card.st-busy em { background: var(--m-chip); color: #fbf5e6; }
#rpg-app .rpg-game.rpg-game .errand-board .eb-card.st-offer { box-shadow: inset 0 0 0 2px #d6a84a, 0 6px 16px rgba(201, 149, 57, .2); }
#rpg-app .rpg-game.rpg-game .errand-board .eb-card.st-offer em { background: #d6a84a; color: #2f220b; }
@media (max-width: 640px) { #rpg-app .rpg-game.rpg-game .errand-board .eb-crew { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   성장: 캐릭터 띠 · 세 갈래 투자 카드 · 기술 카드
   ========================================================================== */
#rpg-app .rpg-game.rpg-game .rpg-modal-wrap:not(.cinema-viewer):not(.village-playing):not(.cinema-window) > .rpg-modal.growth { width: min(760px, 100%) !important; }
#rpg-app .rpg-game.rpg-game .gr-hero {
  display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 20px;
  background: radial-gradient(ellipse 50% 120% at 100% 50%, rgba(243, 201, 105, .2), transparent 70%), linear-gradient(160deg, #2e3954, #1d2436 70%);
  color: #fbf5e6; box-shadow: inset 0 0 0 1px rgba(243, 214, 150, .4);
}
#rpg-app .rpg-game.rpg-game .gr-face { width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #fff8e6, #f1dfb8); box-shadow: 0 0 0 3px #f3c969, 0 0 18px rgba(243, 201, 105, .4); }
#rpg-app .rpg-game.rpg-game .gr-face img { width: 120%; margin: 12% 0 0 -10%; }
#rpg-app .rpg-game.rpg-game .gr-info { display: grid; gap: 4px; min-width: 0; }
#rpg-app .rpg-game.rpg-game .gr-info small { color: #b8b19e !important; }
#rpg-app .rpg-game.rpg-game .gr-info > b { font: 400 30px/1 var(--h-display); color: #fff7e1; }
#rpg-app .rpg-game.rpg-game .gr-info > b i { font-style: normal; font-size: 16px; color: #8d8777; }
#rpg-app .rpg-game.rpg-game .gr-exp { position: relative; height: 14px; border-radius: 999px; background: rgba(0, 0, 0, .35); overflow: hidden; }
#rpg-app .rpg-game.rpg-game .gr-exp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #c99539, #f3c969); border-radius: 999px; }
#rpg-app .rpg-game.rpg-game .gr-exp span { position: relative; display: block; text-align: center; font: 800 10px/14px var(--h-num); }
#rpg-app .rpg-game.rpg-game .gr-points { display: grid; justify-items: center; min-width: 96px; padding: 10px 14px; border-radius: 16px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
#rpg-app .rpg-game.rpg-game .gr-points b { font: 900 34px/1 var(--h-num); color: #8d8777; }
#rpg-app .rpg-game.rpg-game .gr-points small { color: #b8b19e !important; font-size: 11.5px !important; }
#rpg-app .rpg-game.rpg-game .gr-points.has { background: rgba(243, 201, 105, .16); box-shadow: inset 0 0 0 1px #f3c969, 0 0 22px rgba(243, 201, 105, .35); animation: qb-blink 1.8s ease-in-out infinite; }
#rpg-app .rpg-game.rpg-game .gr-points.has b { color: #f3c969; }
#rpg-app .rpg-game.rpg-game .gr-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#rpg-app .rpg-game.rpg-game .gr-stat { display: grid; gap: 6px; align-content: start; padding: 16px 14px 14px; border-radius: 18px; background: var(--m-cell); box-shadow: inset 0 0 0 1px var(--m-edge); --ic-ink: #283246; --ic-light: #fff; }
#rpg-app .rpg-game.rpg-game .gr-stat.s-power { --ic-fill: #ff9db1; --ic-accent: #e9506f; --acc: #e9506f; }
#rpg-app .rpg-game.rpg-game .gr-stat.s-flair { --ic-fill: #f3c969; --ic-accent: #c99539; --acc: #c99539; }
#rpg-app .rpg-game.rpg-game .gr-stat.s-tempo { --ic-fill: #9fd2ff; --ic-accent: #4a8fe0; --acc: #4a8fe0; }
#rpg-app .rpg-game.rpg-game .gr-ico { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--acc) 12%, #fff); }
#rpg-app .rpg-game.rpg-game .rpg-modal.growth .gr-stat h3 { display: flex; align-items: baseline; justify-content: space-between; margin: 0; font: 400 20px/1.2 var(--h-display) !important; }
#rpg-app .rpg-game.rpg-game .gr-stat h3 b { font: 900 26px/1 var(--h-num); color: var(--acc); }
#rpg-app .rpg-game.rpg-game .gr-now { font-weight: 700; font-size: 13.5px; color: var(--m-ink); min-height: 2.6em; }
#rpg-app .rpg-game.rpg-game .gr-tier { height: 6px; border-radius: 3px; background: var(--m-track); overflow: hidden; }
#rpg-app .rpg-game.rpg-game .gr-tier i { display: block; height: 100%; background: linear-gradient(90deg, #c99539, #f3c969); }
#rpg-app .rpg-game.rpg-game .gr-stat small { font-size: 11.5px !important; }
#rpg-app .rpg-game.rpg-game .gr-stat .rpg-btn { margin-top: 4px; min-height: 42px; font-size: 16px !important; }
#rpg-app .rpg-game.rpg-game .gr-skills > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#rpg-app .rpg-game.rpg-game .rpg-modal.growth h4 { margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font: 800 15px/1.3 var(--h-body); }
#rpg-app .rpg-game.rpg-game .rpg-modal.growth h4 small { font-weight: 500; }
#rpg-app .rpg-game.rpg-game .gr-skills article { display: grid; grid-template-columns: 30px 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--m-cell); box-shadow: inset 0 0 0 1px var(--m-edge); }
#rpg-app .rpg-game.rpg-game .gr-skills kbd { grid-row: 1 / 3; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; font: 800 13px/1 var(--h-num) !important; }
#rpg-app .rpg-game.rpg-game .gr-skills b { font-size: 14.5px; }
#rpg-app .rpg-game.rpg-game .gr-stars { color: #d6a84a; letter-spacing: 1px; font-size: 13px; }
#rpg-app .rpg-game.rpg-game .gr-stars i { font-style: normal; color: #e6d8b8; }
#rpg-app .rpg-game.rpg-game .gr-skills small { grid-column: 2 / 4; font-size: 12px !important; }
#rpg-app .rpg-game.rpg-game .gr-skills article.locked { opacity: .55; background: transparent; box-shadow: inset 0 0 0 1px var(--m-edge); border: 0; }
#rpg-app .rpg-game.rpg-game .gr-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) {
  #rpg-app .rpg-game.rpg-game .gr-hero { grid-template-columns: 56px 1fr; }
  #rpg-app .rpg-game.rpg-game .gr-face { width: 56px; height: 56px; }
  #rpg-app .rpg-game.rpg-game .gr-points { grid-column: 1 / -1; grid-auto-flow: column; gap: 8px; align-items: baseline; }
  #rpg-app .rpg-game.rpg-game :is(.gr-stats, .gr-skills > div) { grid-template-columns: 1fr; }
}

/* 우클릭으로 고른 캐릭터: 카드와 머리 위 이름표가 금빛으로 빛난다 */
#rpg-app .rpg-game.rpg-game :is(.rpg-char, .rpg-ally).picked {
  border-color: #f3c969 !important;
  box-shadow: var(--h-hi), 0 0 0 2px #f3c969, 0 0 26px rgba(243, 201, 105, .65), var(--h-drop) !important;
  animation: pick-pulse 1.2s ease-in-out infinite;
}
#rpg-app .rpg-game.rpg-game.pick-hero .rpg-label.player.me b,
#rpg-app .rpg-game.rpg-game.pick-ally .rpg-label.player.ally b {
  background: linear-gradient(180deg, #f8d988, #dba746) !important; color: #2f220b !important; border-color: #fff3cf !important;
  box-shadow: 0 0 0 2px rgba(243, 201, 105, .5), 0 0 18px rgba(243, 201, 105, .8) !important;
}
@keyframes pick-pulse { 50% { box-shadow: var(--h-hi), 0 0 0 3px #f3c969, 0 0 34px rgba(243, 201, 105, .85), var(--h-drop); } }
@media (prefers-reduced-motion: reduce) { #rpg-app .rpg-game.rpg-game :is(.rpg-char, .rpg-ally).picked { animation: none; } }
/* HUD 단축키 배지(마우스·키보드 모두 쓰는 PC 게임 관례) */
#rpg-app .rpg-game.rpg-game .rpg-menu button .hk {
  position: absolute; right: -4px; bottom: -4px; min-width: 16px; height: 16px; padding: 0 3px; display: grid; place-items: center;
  border-radius: 5px; background: #fbf5e6; color: #232b3d; font: 900 9.5px/1 var(--h-num); box-shadow: 0 1px 0 #9d8a5e, 0 0 0 1.5px #1c2334; pointer-events: none;
}
#rpg-app .rpg-game.rpg-game .rpg-menu .menu-main .hk { background: var(--m-chip); color: #f3c969; }
@media (hover: none) { #rpg-app .rpg-game.rpg-game .rpg-menu button .hk { display: none; } }

/* ==========================================================================
   미니게임 공통 결과 화면: 등급 도장 · 별 · 기록 비교 · 다음 목표 · 별 마일스톤
   ========================================================================== */
#rpg-app .rpg-game.rpg-game .rpg-modal-wrap:not(.cinema-viewer):not(.village-playing):not(.cinema-window) > .rpg-modal.mission-result.arc {
  width: min(460px, 100%) !important; padding: 26px 26px 22px !important; text-align: center; justify-items: center; row-gap: 12px !important;
}
#rpg-app .rpg-game.rpg-game .mission-result.arc.fail { background: radial-gradient(ellipse 80% 55% at 50% 22%, #ece6da, transparent 70%), var(--m-paper) !important; }
#rpg-app .rpg-game.rpg-game .mission-result.arc.expert { box-shadow: inset 0 0 0 1.5px #fff, 0 0 0 1.5px #e9506f, 0 0 0 6px #2a1a24, 0 0 0 7px rgba(255, 143, 174, .6), 0 34px 90px rgba(4, 6, 14, .55) !important; }
#rpg-app .rpg-game.rpg-game .mission-result.arc .tape { display: none; }
#rpg-app .rpg-game.rpg-game .arc-head small { letter-spacing: .08em; font-weight: 700; color: #b0842e !important; }
#rpg-app .rpg-game.rpg-game .rpg-modal.mission-result.arc .arc-head h2 { justify-content: center; }
#rpg-app .rpg-game.rpg-game .rpg-modal.mission-result.arc .arc-head h2::before { display: none; }
#rpg-app .rpg-game.rpg-game .arc-medal { display: grid; justify-items: center; gap: 6px; }
#rpg-app .rpg-game.rpg-game .arc-grade {
  width: 108px; height: 108px; display: grid; place-items: center; border-radius: 50%;
  font: 900 64px/1 var(--h-num); color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .25);
  background: radial-gradient(circle at 35% 30%, #8a93a8, #4a5368);
  animation: arc-stamp .5s cubic-bezier(.2, 1.6, .4, 1) both;
}
#rpg-app .rpg-game.rpg-game .arc-grade.g-S { background: radial-gradient(circle at 35% 30%, #fff1b8, #f3c969 45%, #c99539); color: #5a3a08; text-shadow: 0 2px 0 rgba(255, 255, 255, .6); }
#rpg-app .rpg-game.rpg-game .arc-grade.g-A { background: radial-gradient(circle at 35% 30%, #ffc2d1, #e9506f); }
#rpg-app .rpg-game.rpg-game .arc-grade.g-B { background: radial-gradient(circle at 35% 30%, #b9dcff, #4a8fe0); }
#rpg-app .rpg-game.rpg-game .arc-grade.g-C { background: radial-gradient(circle at 35% 30%, #b8ecd6, #3fae86); }
#rpg-app .rpg-game.rpg-game .arc-stars { display: flex; gap: 6px; font-size: 34px; line-height: 1; }
#rpg-app .rpg-game.rpg-game .arc-stars i { font-style: normal; }
#rpg-app .rpg-game.rpg-game .arc-stars i.on { animation: arc-star .45s cubic-bezier(.2, 1.8, .4, 1) var(--d) both; }
#rpg-app .rpg-game.rpg-game .arc-score { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 8px; }
#rpg-app .rpg-game.rpg-game .arc-score b { font: 900 44px/1 var(--h-num); }
#rpg-app .rpg-game.rpg-game .arc-score em { font-style: normal; padding: 3px 10px; border-radius: 999px; background: #e9506f; color: #fff; font: 900 12px/1.4 var(--h-num); letter-spacing: .08em; animation: qb-blink 1.4s ease-in-out infinite; }
#rpg-app .rpg-game.rpg-game .arc-score span { flex-basis: 100%; font-size: 12.5px; color: var(--m-ink-soft); }
#rpg-app .rpg-game.rpg-game .arc-detail { font-size: 13.5px; color: var(--m-ink-soft); }
#rpg-app .rpg-game.rpg-game .arc-goal { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-weight: 700; font-size: 14px; }
#rpg-app .rpg-game.rpg-game .arc-goal span { padding: 1px 8px; border-radius: 6px; background: #f3c969; color: #2f220b; font-size: 11.5px; }
#rpg-app .rpg-game.rpg-game .arc-reward { font-size: 13.5px; color: var(--m-ink); }
#rpg-app .rpg-game.rpg-game .arc-ms { width: 100%; display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; text-align: left; }
#rpg-app .rpg-game.rpg-game .arc-ms > div { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
#rpg-app .rpg-game.rpg-game .arc-ms small { font-size: 12px !important; }
#rpg-app .rpg-game.rpg-game .arc-ms > i { display: block; height: 8px; border-radius: 4px; background: var(--m-track); overflow: hidden; }
#rpg-app .rpg-game.rpg-game .arc-ms > i u { display: block; height: 100%; background: linear-gradient(90deg, #c99539, #f3c969); border-radius: 4px; }
#rpg-app .rpg-game.rpg-game .arc-unlock { margin: 2px 0 0; font-weight: 800; text-align: center; animation: arc-stamp .5s ease .9s both; }
#rpg-app .rpg-game.rpg-game .mission-result.arc footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
#rpg-app .rpg-game.rpg-game .mission-result.arc footer .rpg-btn { min-height: 46px; }
#rpg-app .rpg-game.rpg-game .mission-result.arc .arc-x { background: linear-gradient(180deg, #ff8fae, #e9506f) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 3px 0 #a3324d !important; }
#rpg-app .rpg-game.rpg-game .arc-mini { display: inline-flex; gap: 1px; font-size: 13px; vertical-align: -1px; }
#rpg-app .rpg-game.rpg-game .arc-mini i { font-style: normal; color: #d9ccaa; }
#rpg-app .rpg-game.rpg-game .arc-mini i.on { color: #e0a93a; }
#rpg-app .rpg-game.rpg-game .arc-targets { margin-top: 6px !important; font-size: 12.5px; color: var(--m-ink-soft); }
@keyframes arc-stamp { from { transform: scale(2.2) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes arc-star { from { transform: scale(0) rotate(-90deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #rpg-app .rpg-game.rpg-game :is(.arc-grade, .arc-stars i.on, .arc-unlock, .arc-score em) { animation: none !important; } }
#rpg-app .rpg-game.rpg-game .rpg-modal.mission-result.arc footer .rpg-btn.arc-x { background: linear-gradient(180deg, #ff8fae, #e9506f) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 3px 0 #a3324d, 0 6px 14px rgba(233, 80, 111, .3) !important; }

/* ==========================================================================
   필담 배틀 2: 두루마리 + 유행어 카드 손패
   ========================================================================== */
#rpg-app .duel2 { display: grid; gap: 12px; }
#rpg-app .duel2 canvas { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px #c9b98f, 0 10px 26px rgba(40, 30, 20, .2); touch-action: none; }
#rpg-app .duel2 .d2-hand { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .8fr); gap: 10px; }
#rpg-app .rpg-game.rpg-game .duel2 .d2-card {
  position: relative; display: grid; align-content: start; gap: 3px; min-height: 150px; padding: 14px 12px 12px !important; text-align: left; cursor: pointer;
  border: 0 !important;
  box-shadow: inset 0 5px 0 var(--c, #8d8777), inset 0 0 0 1px var(--m-edge), 0 4px 12px rgba(40, 30, 20, .08) !important;
  transition: transform .14s ease, box-shadow .14s ease;
}
#rpg-app .rpg-game.rpg-game .duel2 .d2-card:not(:disabled):is(:hover, :focus-visible) { transform: translateY(-6px); box-shadow: inset 0 5px 0 var(--c, #8d8777), inset 0 0 0 2px var(--c, #8d8777), 0 14px 26px rgba(40, 30, 20, .18) !important; outline: none; }
#rpg-app .rpg-game.rpg-game .duel2 .d2-card:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.4); }
#rpg-app .duel2 .d2-card small { font-size: 12px !important; font-weight: 800; color: var(--c, #8d8777) !important; }
#rpg-app .duel2 .d2-card b { font: 400 22px/1.15 var(--h-display); }
#rpg-app .duel2 .d2-card em { font-style: normal; font: 400 15px/1.3 "Nanum Brush Script", "Gowun Batang", serif; color: #5a4a3a; font-size: 19px; }
#rpg-app .duel2 .d2-card i { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--m-ink); margin-top: 4px; }
#rpg-app .duel2 .d2-card u { position: absolute; right: 10px; bottom: 10px; text-decoration: none; font-size: 11px; font-weight: 800; color: #a82c2c; }
#rpg-app .duel2 .d2-key { position: absolute; right: 10px; top: 12px; min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; background: var(--m-chip); color: #fbf5e6; font: 800 11px/1 var(--h-num); }
#rpg-app .duel2 .d2-cost { position: absolute; right: 36px; top: 13px; color: #1d1814; font-size: 11px; letter-spacing: 1px; }
#rpg-app .rpg-game.rpg-game .duel2 .d2-grind { --c: #8d8777; }
#rpg-app .duel2 .d2-tip { margin: 0; text-align: center; font-size: 13px; color: var(--m-ink-soft); min-height: 1.6em; }
@media (max-width: 720px) { #rpg-app .duel2 .d2-hand { grid-template-columns: repeat(2, 1fr); } #rpg-app .rpg-game.rpg-game .duel2 .d2-card { min-height: 120px; } }
/* 쓰러짐 창 그림(sheet-v4 faint): 창 위쪽에 둥글게, 아래로 창 색에 녹인다 */
#rpg-app .rpg-game.rpg-game .rpg-modal.death.with-art { overflow: hidden; }
#rpg-app .rpg-game.rpg-game .rpg-modal.death .death-art { width: calc(100% + 64px); margin: -34px -32px 6px; aspect-ratio: 16 / 8.2; background: center 55% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent); filter: saturate(.92); }