/* 창 테두리(가장 마지막에 불러 덮는다): 힉스필드로 뽑은 클레이 장식으로 창을 상큼하게.
   - 머리글 위에 파스텔 종이 깃발 가랜드(이어 붙여 창 폭만큼), 왼쪽 위 · 오른쪽 아래에 꽃 모서리
   - 테두리는 금선 두 줄 대신 복숭아 → 버터 → 민트 → 라일락 파스텔 무지개 한 줄, 창 바탕은 남색 한지 질감
   - 머리글이 있는 창에만(게임 화면 · 이벤트/상점 · 가챠 무대 · 자정 카페는 제 모양 그대로) */
:root {
  --fr-garland: url(/assets/ui/frame/garland.webp);
  --fr-corner: url(/assets/ui/frame/corner.webp);
  --fr-corner-br: url(/assets/ui/frame/corner-br.webp);
  --fr-panel: url(/assets/ui/frame/panel.jpg);
  --fr-edge: linear-gradient(135deg, #ffc6d6 0%, #ffe6a3 26%, #bfeedd 52%, #c9c0ff 78%, #ffc6d6 100%);
}

/* ---------- 어두운 창(대부분의 메뉴) ---------- */
#rpg-app .rpg-game.rpg-game #modal.rpg-modal-wrap:not(.cinema-viewer):not(.village-playing):not(.cinema-window) > .rpg-modal:not(.midnight-cafe):not(.rs-sheet):not(.ev-sheet):not(.sh-sheet):not(.gacha-reveal):has(> header) {
  border: 2px solid transparent !important;
  border-radius: 18px !important;
  background:
    var(--fr-corner-br) right 4px bottom 4px / 96px no-repeat padding-box,
    linear-gradient(180deg, rgba(28, 35, 54, .84), rgba(18, 24, 39, .93)) padding-box,
    var(--fr-panel) center / cover padding-box,
    var(--fr-edge) border-box !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 0 34px rgba(255, 205, 225, .14), 0 30px 80px rgba(0, 0, 0, .55) !important;
}
/* 금빛 꺾쇠는 걷어 낸다(꽃 모서리가 대신한다) */
#rpg-app .rpg-game.rpg-game #modal.rpg-modal-wrap > .rpg-modal:not(.midnight-cafe):not(.rs-sheet):not(.ev-sheet):not(.sh-sheet):has(> header)::before { display: none !important; }
/* 머리글: 위에 가랜드, 왼쪽 위에 꽃 모서리(머리글이 따라 붙어 다니므로 내려도 그대로 보인다) */
#rpg-app .rpg-game.rpg-game #modal.rpg-modal-wrap > .rpg-modal:not(.midnight-cafe):not(.rs-sheet):not(.ev-sheet):not(.sh-sheet):not(.gacha-reveal) > header {
  padding-top: 40px !important;
  background:
    var(--fr-garland) center 2px / auto 34px repeat-x,
    linear-gradient(180deg, rgba(26, 33, 50, .97) 72%, rgba(26, 33, 50, 0)) !important;
  isolation: isolate;
}
#rpg-app .rpg-game.rpg-game #modal.rpg-modal-wrap > .rpg-modal:not(.midnight-cafe):not(.rs-sheet):not(.ev-sheet):not(.sh-sheet):not(.gacha-reveal) > header::before {
  content: ""; position: absolute; left: 0; top: 0; width: 112px; height: 112px; z-index: -1; pointer-events: none;
  background: var(--fr-corner) 0 0 / contain no-repeat;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35));
}
/* 머리글 밑줄도 파스텔로 */
#rpg-app .rpg-game.rpg-game #modal.rpg-modal-wrap > .rpg-modal:not(.midnight-cafe):not(.rs-sheet):not(.ev-sheet):not(.sh-sheet) > header::after {
  background: linear-gradient(90deg, transparent, rgba(255, 198, 214, .55) 15%, rgba(191, 238, 221, .55) 50%, rgba(201, 192, 255, .55) 85%, transparent) !important;
}
#rpg-app .rpg-game.rpg-game #modal.rpg-modal-wrap > .rpg-modal:not(.midnight-cafe):not(.rs-sheet) > header h2::before { background: linear-gradient(135deg, #ffc6d6, #ffe6a3) !important; box-shadow: 0 0 0 3px rgba(255, 214, 230, .18) !important; border-radius: 50% !important; }
/* 닫기 단추: 파스텔 테두리 동그라미 */
#rpg-app .rpg-game.rpg-game #modal.rpg-modal-wrap > .rpg-modal:not(.midnight-cafe):not(.rs-sheet):not(.ev-sheet):not(.sh-sheet) > header .x {
  border-radius: 50% !important; background: rgba(255, 255, 255, .06) !important; color: #ffe6ef !important;
  box-shadow: inset 0 0 0 1.5px rgba(255, 214, 230, .55) !important;
}
#rpg-app .rpg-game.rpg-game #modal.rpg-modal-wrap > .rpg-modal:not(.midnight-cafe):not(.rs-sheet) > header .x:is(:hover, :focus-visible) { background: rgba(255, 214, 230, .16) !important; }

/* ---------- 밝은 종이 창(기억선 · 의뢰 게시판 · 종이학 · 추억 수첩 같은 mem-sheet) ---------- */
#rpg-app .rpg-game.rpg-game .mem-sheet:has(> header) {
  border: 2px solid transparent !important;
  padding-top: 38px !important;
  background:
    var(--fr-garland) center 2px / auto 30px repeat-x padding-box,
    var(--fr-corner) 0 0 / 96px no-repeat padding-box,
    var(--fr-corner-br) right 2px bottom 2px / 86px no-repeat padding-box,
    linear-gradient(180deg, #fffaf6, var(--mem-paper, #f6efe4)) padding-box,
    var(--fr-edge) border-box !important;
  box-shadow: 0 0 0 1px rgba(80, 60, 70, .12), 0 0 30px rgba(255, 205, 225, .25), 0 24px 60px rgba(30, 20, 40, .35) !important;
}
#rpg-app .rpg-game.rpg-game .mem-sheet:has(> header) > header { padding-left: 14px; }
#rpg-app .rpg-game.rpg-game .mem-sheet:has(> header) .mem-x { top: 34px !important; }

/* ---------- 그림 자리(사냥터 엽서 · 도시 · 아이콘 · 기념품) ---------- */
/* 메뉴 · HUD: 클레이 소품 아이콘 */
#rpg-app .rpg-game.rpg-game .rpg-modal .menu-grid button.has-art { min-height: 66px; gap: 12px; }
#rpg-app .rpg-game.rpg-game .rpg-modal .menu-grid button.has-art span { width: 50px !important; height: 50px !important; flex: 0 0 50px; display: grid; place-items: center; border-radius: 14px !important; }
#rpg-app .rpg-game .menu-grid button.has-art span { background: radial-gradient(circle at 50% 40%, rgba(255, 236, 244, .22), rgba(255, 255, 255, .03) 70%) !important; box-shadow: inset 0 0 0 1px rgba(255, 214, 230, .28) !important; overflow: visible; }
#rpg-app .rpg-game img.art.menu-art { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); transition: transform .18s; }
#rpg-app .rpg-game .menu-grid button.has-art:hover img.menu-art { transform: translateY(-2px) rotate(-4deg) scale(1.06); }
#rpg-app .rpg-game .rpg-menu button.has-art img.hud-art { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
/* 버스표: 왼쪽 띠 옆에 사냥터 엽서 */
#rpg-app .rpg-game .bus-ticket:has(.t-art) { grid-template-columns: 64px 118px 1fr 92px !important; overflow: hidden; }
#rpg-app .rpg-game .bus-ticket .t-art { width: auto; align-self: stretch; margin: -1px 0; overflow: hidden; position: relative; }
#rpg-app .rpg-game .bus-ticket .t-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
#rpg-app .rpg-game .bus-ticket .t-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, rgba(20, 26, 40, .55)); }
#rpg-app .rpg-game .bus-ticket.locked .t-art img { filter: grayscale(.8) brightness(.6); }
/* 의뢰 게시판 · 종이학 창: 머리 그림 띠 */
#rpg-app .rpg-game .mem-sheet .bj-art { margin: 4px 0 14px; height: 116px; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 16px rgba(60, 40, 50, .18), inset 0 0 0 1px rgba(255, 255, 255, .5); }
#rpg-app .rpg-game .mem-sheet .bj-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
#rpg-app .rpg-game .bj-stamps img.bj-prize { width: 22px; height: 22px; object-fit: contain; vertical-align: -6px; }
/* 사냥터에 들어설 때 이름 카드: 엽서를 깐다 */
#rpg-app .rpg-game .zone-title.with-art { overflow: hidden; }
#rpg-app .rpg-game .zone-title .zt-art { position: absolute; inset: 0; z-index: -1; background: center / cover no-repeat; opacity: .9; }
#rpg-app .rpg-game .zone-title.with-art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 55%, rgba(12, 16, 28, .62), rgba(12, 16, 28, .35) 70%), linear-gradient(180deg, rgba(12, 16, 28, .1), rgba(12, 16, 28, .55)); }
#rpg-app .rpg-game .zone-title.with-art { border-radius: 18px; box-shadow: 0 0 0 2px rgba(255, 230, 240, .5), 0 18px 40px rgba(0, 0, 0, .45); }
#rpg-app .rpg-game .zone-title.with-art :is(b, small, span) { text-shadow: 0 2px 10px rgba(0, 0, 0, .75), 0 0 2px rgba(0, 0, 0, .6); }
#rpg-app .rpg-game .zone-title.with-art { isolation: isolate; }
/* 이야기 퀘스트 장소: 작은 엽서 */
#rpg-app .rpg-game .qb-location img.qb-loc-art { width: 64px; height: 36px; object-fit: cover; border-radius: 6px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); }
/* 도감: 클레이 소품 */
#rpg-app .rpg-game .col-card .ring span img.col-art { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
/* 날씨: 도시 엽서 카드 */
#rpg-app .rpg-game .weather-modal .city-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 4px 0 12px; }
#rpg-app .rpg-game .weather-modal .city-cards button { position: relative; padding: 0; border: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 5; cursor: pointer; background: #222a3c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
#rpg-app .rpg-game .weather-modal .city-cards img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
#rpg-app .rpg-game .weather-modal .city-cards b { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 6px 7px; font-size: 13px; color: #fff; text-align: center; background: linear-gradient(180deg, transparent, rgba(10, 14, 24, .82)); }
#rpg-app .rpg-game .weather-modal .city-cards button:hover img { transform: scale(1.05); }
#rpg-app .rpg-game .weather-modal .city-cards button[aria-checked="true"] { box-shadow: 0 0 0 2px #ffe6a3, 0 0 0 5px rgba(255, 230, 163, .25); }
#rpg-app .rpg-game .weather-modal .city-select { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* 시작 로딩: 골목 엽서 */
#rpg-app .rpg-loading.with-art { background: linear-gradient(180deg, rgba(18, 22, 34, .2), rgba(18, 22, 34, .65)), var(--art) center / cover no-repeat !important; }
#rpg-app .rpg-loading.with-art p { color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }

@media (max-width: 640px) {
  #rpg-app .rpg-game .weather-modal .city-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #rpg-app .rpg-game .bus-ticket:has(.t-art) { grid-template-columns: 52px 1fr 80px !important; }
  #rpg-app .rpg-game .bus-ticket .t-art { display: none; } /* 좁은 화면에서는 표 글자가 먼저 */
  #rpg-app .rpg-game.rpg-game #modal.rpg-modal-wrap > .rpg-modal:not(.midnight-cafe):not(.rs-sheet):not(.ev-sheet):not(.sh-sheet):not(.gacha-reveal) > header::before { width: 84px; height: 84px; }
}

/* ---------- 머리 위 이름표: 클레이 알약판 그림(양 끝 별은 그대로, 가운데만 늘어난다) ---------- */
#rpg-app .rpg-game.rpg-game.rpg-game .rpg-label.player.player.player b,
#rpg-app .rpg-game.rpg-game.rpg-game .rpg-label.vip-nametag.vip-nametag.vip-nametag b {
  background: none !important; box-shadow: none !important; border-radius: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-style: solid !important; border-color: transparent !important; border-width: 0 24px !important;
  border-image: url(/assets/ui/tags/npc.webp) 0 205 fill / 0 24px stretch !important; background-image: none !important;
  padding: 7px 4px 8px !important; font: 800 12.5px/1.25 "Noto Sans KR", sans-serif !important; color: #3a2a3c !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .7) !important;
  filter: drop-shadow(0 3px 5px rgba(40, 20, 50, .3)); animation: none !important;
}
#rpg-app .rpg-game.rpg-game .rpg-label .star-sparkle { display: none !important; }
/* 나: 금빛 테두리 빛 · 짝꿍: 분홍 빛 · 파티: 민트 빛(판은 같고 둘레 빛만 다르다) */
#rpg-app .rpg-game.rpg-game .rpg-label.player.me b { filter: drop-shadow(0 0 4px rgba(255, 205, 80, .85)) drop-shadow(0 3px 5px rgba(40, 20, 50, .3)); color: #5a3a06 !important; }
#rpg-app .rpg-game.rpg-game .rpg-label.player.ally b { filter: drop-shadow(0 0 4px rgba(255, 160, 205, .8)) drop-shadow(0 3px 5px rgba(40, 20, 50, .3)); color: #5d2847 !important; }
#rpg-app .rpg-game.rpg-game .rpg-label.player.mate b { filter: drop-shadow(0 0 4px rgba(100, 215, 160, .8)) drop-shadow(0 3px 5px rgba(40, 20, 50, .3)); color: #1d5f3f !important; }
#rpg-app .rpg-game.rpg-game .rpg-label.player.p2 b { filter: drop-shadow(0 0 4px rgba(110, 180, 255, .8)) drop-shadow(0 3px 5px rgba(40, 20, 50, .3)); color: #1e4578 !important; }

/* ---------- 오늘의 추첨실: 무대 · 보상 카드 · 확정 게이지 · 발표 연출 ---------- */
#rpg-app .rpg-game .raffle-modal { position: relative; }
#rpg-app .rpg-game .raffle-modal .rf-stage { position: relative; isolation: isolate; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-height: 168px; margin: 4px 0 14px; padding: 16px 18px; border-radius: 16px; overflow: hidden; background: var(--art) center 40% / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 10px 26px rgba(0, 0, 0, .35); }
#rpg-app .rpg-game .raffle-modal .rf-stage-glow { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20, 14, 34, .78), rgba(20, 14, 34, .25) 55%, transparent), radial-gradient(circle at 70% 30%, rgba(255, 220, 240, .25), transparent 50%); }
#rpg-app .rpg-game .raffle-modal .rf-clock { display: grid; gap: 2px; color: #fff; }
#rpg-app .rpg-game .raffle-modal .rf-clock small { font-size: 11px; letter-spacing: .08em; color: #ffd6e6 !important; }
#rpg-app .rpg-game .raffle-modal .rf-clock b { font: 800 34px/1.1 "Outfit", "Noto Sans KR", sans-serif; letter-spacing: .04em; color: #fff7e6; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); font-variant-numeric: tabular-nums; }
#rpg-app .rpg-game .raffle-modal .rf-clock span { font-size: 13px; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
#rpg-app .rpg-game .raffle-modal .rf-check { font: inherit; font-size: 12.5px; font-weight: 800; padding: 9px 16px; border-radius: 99px; border: 0; cursor: pointer; background: linear-gradient(180deg, #ffe6a3, #f2bf55); color: #3a2706; box-shadow: 0 3px 0 #b5842a, 0 8px 18px rgba(0, 0, 0, .3); }
#rpg-app .rpg-game .raffle-modal .rf-prize { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; margin: 10px 0 8px; padding: 10px; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 214, 230, .14), rgba(201, 192, 255, .12)); box-shadow: inset 0 0 0 1px rgba(255, 214, 230, .25); }
#rpg-app .rpg-game .raffle-modal .rf-prize img, #rpg-app .rpg-game .raffle-modal .rf-prize .rf-emoji { width: 76px; height: 76px; object-fit: contain; border-radius: 12px; background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .5), rgba(255, 255, 255, .05)); display: grid; place-items: center; font-size: 40px; }
#rpg-app .rpg-game .raffle-modal .rf-prize small { display: block; font-size: 11px !important; color: #ffd6e6 !important; }
#rpg-app .rpg-game .raffle-modal .rf-prize b { display: block; font-size: 14.5px; line-height: 1.35; margin-top: 2px; }
#rpg-app .rpg-game .raffle-modal .rf-prize em { display: block; font-style: normal; font-size: 11.5px; color: #f3d48e; margin-top: 4px; }
#rpg-app .rpg-game .raffle-modal .rf-pick { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; }
#rpg-app .rpg-game .raffle-modal .rf-pick button { flex: 0 0 auto; width: 52px; height: 52px; padding: 0; border-radius: 12px; border: 0; cursor: pointer; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); overflow: hidden; }
#rpg-app .rpg-game .raffle-modal .rf-pick button img, #rpg-app .rpg-game .raffle-modal .rf-pick .rf-emoji { width: 100%; height: 100%; object-fit: contain; display: grid; place-items: center; font-size: 26px; }
#rpg-app .rpg-game .raffle-modal .rf-pick button[aria-checked="true"] { box-shadow: 0 0 0 2px #ffe6a3, 0 0 12px rgba(255, 230, 163, .5); background: rgba(255, 230, 163, .14); }
#rpg-app .rpg-game .raffle-modal .rf-pity { margin: 4px 0 10px; }
#rpg-app .rpg-game .raffle-modal .rf-dots { display: flex; gap: 5px; margin-bottom: 6px; }
#rpg-app .rpg-game .raffle-modal .rf-dots i { flex: 1; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .12); }
#rpg-app .rpg-game .raffle-modal .rf-dots i.on { background: linear-gradient(90deg, #ffb3c6, #ffd98a); box-shadow: 0 0 8px rgba(255, 200, 150, .5); }
#rpg-app .rpg-game .raffle-modal .rf-dots i.last { background: rgba(255, 230, 163, .28); box-shadow: inset 0 0 0 1px #ffe6a3; }
#rpg-app .rpg-game .raffle-modal .rf-pity p { margin: 0; font-size: 12.5px; }
#rpg-app .rpg-game .raffle-modal .rf-pity b { color: #ffd98a; }
#rpg-app .rpg-game .raffle-modal .raffle-card.is-pending { box-shadow: inset 0 0 0 1.5px rgba(255, 230, 163, .55), 0 0 22px rgba(255, 210, 150, .12) !important; }
#rpg-app .rpg-game .raffle-modal .raffle-card.just-entered { animation: rf-pop .5s ease-out; }
@keyframes rf-pop { 0% { transform: scale(.97); } 60% { transform: scale(1.02); } 100% { transform: none; } }
/* 발표 연출 */
#rpg-app .rpg-game .raffle-modal .rf-reveal { position: absolute; inset: 0; z-index: 8; display: grid; align-content: center; justify-items: center; gap: 14px; padding: 24px; border-radius: inherit; background: radial-gradient(circle at 50% 30%, rgba(60, 40, 90, .96), rgba(16, 12, 28, .98)); animation: rf-fade .3s ease-out; }
@keyframes rf-fade { from { opacity: 0; } }
#rpg-app .rpg-game .raffle-modal .rf-drum { position: relative; width: 220px; height: 150px; border-radius: 16px; background: var(--art) center / cover; box-shadow: 0 10px 30px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .2); overflow: hidden; }
#rpg-app .rpg-game .raffle-modal .rf-spin { position: absolute; left: 50%; top: 44%; width: 80px; height: 80px; margin: -40px 0 0 -40px; animation: rf-spin 1.1s linear infinite; }
#rpg-app .rpg-game .raffle-modal .rf-spin i { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: linear-gradient(180deg, #ffd6e6 50%, #fff 50%); box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
#rpg-app .rpg-game .raffle-modal .rf-spin i:nth-child(n) { transform: rotate(calc(var(--k, 0) * 36deg)) translateY(-30px); }
#rpg-app .rpg-game .raffle-modal .rf-spin i:nth-child(2) { --k: 1; background: linear-gradient(180deg, #c9c0ff 50%, #fff 50%); } #rpg-app .rpg-game .raffle-modal .rf-spin i:nth-child(3) { --k: 2; background: linear-gradient(180deg, #bfeedd 50%, #fff 50%); } #rpg-app .rpg-game .raffle-modal .rf-spin i:nth-child(4) { --k: 3; background: linear-gradient(180deg, #ffe6a3 50%, #fff 50%); } #rpg-app .rpg-game .raffle-modal .rf-spin i:nth-child(5) { --k: 4; } #rpg-app .rpg-game .raffle-modal .rf-spin i:nth-child(6) { --k: 5; background: linear-gradient(180deg, #c9c0ff 50%, #fff 50%); } #rpg-app .rpg-game .raffle-modal .rf-spin i:nth-child(7) { --k: 6; background: linear-gradient(180deg, #bfeedd 50%, #fff 50%); } #rpg-app .rpg-game .raffle-modal .rf-spin i:nth-child(8) { --k: 7; background: linear-gradient(180deg, #ffe6a3 50%, #fff 50%); } #rpg-app .rpg-game .raffle-modal .rf-spin i:nth-child(9) { --k: 8; } #rpg-app .rpg-game .raffle-modal .rf-spin i:nth-child(10) { --k: 9; }
@keyframes rf-spin { to { transform: rotate(360deg); } }
#rpg-app .rpg-game .raffle-modal .rf-caps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
#rpg-app .rpg-game .raffle-modal .rf-caps li { position: relative; width: 190px; min-height: 150px; display: grid; place-items: center; }
#rpg-app .rpg-game .raffle-modal .rf-cap { position: absolute; top: 20px; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(180deg, #ffb3c6 50%, #fffaf2 50%); box-shadow: 0 6px 14px rgba(0, 0, 0, .45), inset 0 -4px 8px rgba(0, 0, 0, .12); opacity: 0; animation: rf-drop .6s cubic-bezier(.3, 1.6, .5, 1) var(--d) forwards, rf-open .35s ease-in calc(var(--d) + .9s) forwards; }
#rpg-app .rpg-game .raffle-modal .rf-caps li.won .rf-cap { background: linear-gradient(180deg, #ffd98a 50%, #fffaf2 50%); }
@keyframes rf-drop { from { opacity: 0; transform: translateY(-60px) rotate(-90deg); } to { opacity: 1; transform: none; } }
@keyframes rf-open { to { opacity: 0; transform: scale(1.6); } }
#rpg-app .rpg-game .raffle-modal .rf-open { display: grid; justify-items: center; gap: 4px; text-align: center; opacity: 0; animation: rf-show .4s ease-out calc(var(--d) + 1.15s) forwards; }
@keyframes rf-show { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
#rpg-app .rpg-game .raffle-modal .rf-open img, #rpg-app .rpg-game .raffle-modal .rf-open .rf-emoji { width: 84px; height: 84px; object-fit: contain; display: grid; place-items: center; font-size: 46px; }
#rpg-app .rpg-game .raffle-modal .rf-open b { font-size: 16px; color: #fff; }
#rpg-app .rpg-game .raffle-modal li.won .rf-open b { color: #ffd98a; text-shadow: 0 0 14px rgba(255, 210, 120, .7); }
#rpg-app .rpg-game .raffle-modal .rf-open small { font-size: 11.5px !important; color: #e8dff5 !important; }
#rpg-app .rpg-game .raffle-modal .rf-open em { font-style: normal; font-size: 11.5px; color: #ffd6e6; }
@media (prefers-reduced-motion: reduce) { #rpg-app .rpg-game .raffle-modal :is(.rf-cap, .rf-open, .rf-spin) { animation-duration: .01s !important; animation-delay: 0s !important; } }

/* ---------- 말랑봉 등산 HUD(기력) ---------- */
#rpg-app .rpg-game .stage-hud:has(.hike-bar) { flex-wrap: wrap; max-width: 360px; border-radius: 18px; row-gap: 4px; }
#rpg-app .rpg-game .stage-hud .hike-bar { flex: 1 1 120px; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .14); overflow: hidden; }
#rpg-app .rpg-game .stage-hud .hike-bar em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8fe3c4, #ffe58a); transition: width .25s; }
#rpg-app .rpg-game .stage-hud .hike-bar.low em { background: linear-gradient(90deg, #ff8f8f, #ffb36b); animation: hike-low .8s ease-in-out infinite alternate; }
@keyframes hike-low { to { filter: brightness(1.35); } }
#rpg-app .rpg-game .stage-hud small { flex-basis: 100%; }
#rpg-app .rpg-game .stage-hud .hike-warn { color: #ffd98a !important; font-weight: 800; }