/* 화면 스타일 시안. .rpg-game에 look-* 클래스가 붙으면 같은 HUD를 다른 디자인 언어로 입힌다. */
.rpg-game[class*="look-"] { --r: 16px; }
.rpg-game[class*="look-"] .rpg-menu small,
.rpg-game[class*="look-"] .rpg-weather-chip,
.rpg-game[class*="look-"] .rpg-exp span { display: none; }
.rpg-game[class*="look-"] .rpg-menu { gap: 6px; flex-wrap: nowrap; }
.rpg-game[class*="look-"] .rpg-menu button { width: 40px; height: 40px; font-size: 17px; border-radius: 12px; }
.rpg-game[class*="look-"] .rpg-zone { rotate: 0deg; }
.rpg-game[class*="look-"] .rpg-log { bottom: 108px; max-height: 92px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 40%); mask-image: linear-gradient(transparent, #000 40%); background: none; border: 0; box-shadow: none; }
.rpg-game[class*="look-"] .rpg-log p { text-shadow: 0 1px 2px var(--log-shadow); }
.rpg-game[class*="look-"] .rpg-exp { height: 4px; }
.rpg-game[class*="look-"] .rpg-hotbar { gap: 4px; padding: 6px; }
.rpg-game[class*="look-"] .rpg-modal { border-radius: 22px; animation: none; }

/* A. 툰 디오라마: 흰 카드 + 코랄 한 가지 강조색 + 둥근 고딕 */
.rpg-game.look-diorama { --paper: rgba(255, 255, 255, .94); --paper-2: #f6f1f3; --paper-edge: rgba(60, 40, 55, .08); --ink: #3b2f3a; --ink-soft: #8a7c88;
  --ticket: #ff7a8a; --ticket-ink: #fff; --clay-shadow: 0 6px 18px rgba(60, 35, 50, .14); --blue: #ff7a8a; --gold: #e58b25; --log-shadow: #fff;
  --font: "Noto Sans KR", system-ui, sans-serif; --display: "Jua", "Noto Sans KR", sans-serif; font-family: var(--font); }
.look-diorama .rpg-char, .look-diorama .rpg-ally, .look-diorama .rpg-tracker, .look-diorama .rpg-zone, .look-diorama .rpg-gold, .look-diorama .rpg-menu button, .look-diorama .rpg-hotbar, .look-diorama .rpg-minimap { border-radius: var(--r); backdrop-filter: blur(8px); border: 0; }
.look-diorama .rpg-npc-hint { box-shadow: 0 6px 16px rgba(255, 122, 138, .35); border-radius: 999px; }
.look-diorama .rpg-minimap { background: rgba(255, 255, 255, .9); }
.look-diorama .rpg-modal { background: #fff; border: 0; box-shadow: 0 24px 60px rgba(60, 35, 50, .25); }
.look-diorama .rpg-modal h2 { color: #3b2f3a; }

/* B. 소프트 클레이: 우윳빛 반투명 + 파스텔 + 얇은 글꼴 */
.rpg-game.look-clay { --paper: rgba(255, 250, 247, .72); --paper-2: #f3e7e1; --paper-edge: rgba(255, 255, 255, .7); --ink: #5b4b4f; --ink-soft: #9b8a8e;
  --ticket: #f2c6c2; --ticket-ink: #5b4b4f; --clay-shadow: 0 8px 24px rgba(120, 90, 95, .12), inset 0 1px 0 #fff; --blue: #b48ea0; --gold: #b98a4e; --log-shadow: #fff8f4;
  --font: "Gowun Dodum", "Noto Sans KR", sans-serif; --display: "Gowun Dodum", sans-serif; font-family: var(--font); }
.look-clay .rpg-char, .look-clay .rpg-ally, .look-clay .rpg-tracker, .look-clay .rpg-zone, .look-clay .rpg-gold, .look-clay .rpg-menu button, .look-clay .rpg-hotbar, .look-clay .rpg-minimap { border-radius: 22px; backdrop-filter: blur(14px) saturate(1.2); }
.look-clay .rpg-zone { font-weight: 700; letter-spacing: .04em; }
.look-clay .rpg-minimap { background: rgba(255, 250, 247, .75); }
.look-clay .rpg-modal { background: rgba(255, 250, 247, .9); backdrop-filter: blur(20px); border: 1px solid #fff; }
.look-clay .rpg-modal h2 { color: #8d6475; font-family: var(--display); }

/* 기본 소프트 툰: 흰 카드의 또렷함 + 우윳빛 유리의 부드러움. 강조색은 살구 코랄 하나. */
.rpg-game.look-soft { --paper: rgba(255, 252, 249, .86); --paper-2: #f5eeea; --paper-edge: rgba(255, 255, 255, .8); --ink: #4a3d44; --ink-soft: #94848c;
  --ticket: #f59a8b; --ticket-ink: #fff; --clay-shadow: 0 6px 20px rgba(90, 60, 70, .12), inset 0 1px 0 rgba(255, 255, 255, .9); --blue: #e98a7c; --gold: #d08a3a; --log-shadow: #fff;
  --font: "Noto Sans KR", system-ui, sans-serif; --display: "Jua", "Noto Sans KR", sans-serif; font-family: var(--font); }
.look-soft .rpg-char, .look-soft .rpg-ally, .look-soft .rpg-tracker, .look-soft .rpg-zone, .look-soft .rpg-gold, .look-soft .rpg-menu button, .look-soft .rpg-hotbar, .look-soft .rpg-minimap { border-radius: 18px; backdrop-filter: blur(12px) saturate(1.15); }
.look-soft .rpg-minimap { background: rgba(255, 252, 249, .82); }
.look-soft .rpg-hotbar button, .look-soft .rpg-hotbar .slot { background: rgba(255, 255, 255, .7) !important; border-color: rgba(255, 255, 255, .9) !important; }
.look-soft .rpg-npc-hint { box-shadow: 0 6px 16px rgba(245, 154, 139, .35); }
.look-soft .rpg-modal { background: rgba(255, 252, 249, .97); border: 1px solid #fff; box-shadow: 0 24px 60px rgba(90, 60, 70, .22); }
.look-soft .rpg-modal h2 { color: #4a3d44; }
.rpg-game[class*="look-"] .rpg-char, .rpg-game[class*="look-"] .rpg-menu button, .rpg-game[class*="look-"] .rpg-modal { transition: background .8s, color .8s, box-shadow .8s; }

/* 2단계: 화면 다이어트 — 빠른 버튼 3개 + 메뉴 시트, 지금 할 일 한 줄, 사라지는 알림, 상황별 단축키 */
.rpg-game .rpg-menu button.menu-main { font-size: 18px; }
.rpg-game .now-tracker { cursor: pointer; text-align: left; font: inherit; color: var(--ink); }
.rpg-game .now-tracker small { color: var(--blue); }
.rpg-game .now-tracker.pulse { animation: now-pulse .6s ease-out; }
@keyframes now-pulse { 0% { transform: scale(.97); box-shadow: 0 0 0 0 var(--ticket); } 60% { box-shadow: 0 0 0 6px transparent; } 100% { transform: none; } }
.rpg-game .rpg-log { bottom: 112px; left: 16px; max-height: none; -webkit-mask-image: none; mask-image: none; gap: 4px; }
.rpg-game .rpg-log p { width: fit-content; max-width: 100%; padding: 4px 10px; animation: toast-in .25s ease-out; transition: opacity .9s, transform .9s; }
.rpg-game .rpg-log p.old { opacity: 0; transform: translateY(-4px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }
.rpg-hotbar.calm .slot.skill, .rpg-hotbar.calm .slot.dash, .rpg-hotbar.calm .slot.auto, .rpg-hotbar.calm .sep { display: none; }
.menu-sheet { width: min(520px, 100%); }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.menu-grid button { position: relative; display: grid; justify-items: center; gap: 6px; padding: 16px 8px 12px; border-radius: 16px; border: 1px solid var(--paper-edge); background: var(--paper-2); color: var(--ink); font: inherit; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.menu-grid button:hover, .menu-grid button:focus-visible { transform: translateY(-2px); box-shadow: var(--clay-shadow); }
.menu-grid span { font-size: 26px; } .menu-grid b { font-size: 13px; }
.menu-grid kbd { position: absolute; top: 6px; right: 8px; font: 700 10px/1 var(--font); color: var(--ink-soft); }
.menu-quit { justify-self: center; }
.log-list { display: grid; gap: 6px; max-height: 60vh; overflow: auto; } .log-list p { margin: 0; font-size: 13px; }
.rpg-game[class*="look-"] .rpg-modal-wrap:not(.cinema-viewer) .rpg-modal { animation: sheet-in .28s cubic-bezier(.2,.8,.2,1); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .rpg-game .rpg-log p, .rpg-game .now-tracker.pulse, .rpg-game[class*="look-"] .rpg-modal { animation: none !important; } }

.rpg-game[class*="look-"] .rpg-modal::before { display: none; }

/* 4단계: 지역 이동 깜빡임, 설정 시트, 데미지 숫자 */
.zone-fade { position: absolute; inset: 0; z-index: 39; pointer-events: none; background: radial-gradient(circle, rgba(255,255,255,.55), rgba(255,250,245,.95)); opacity: 0; }
.zone-fade.on { animation: zone-flash .7s ease-out; }
@keyframes zone-flash { 0% { opacity: 1; } 100% { opacity: 0; } }
.settings-sheet { width: min(460px, 100%); } .settings-sheet h3 { margin: 6px 0 0; }
.set-row { display: grid; grid-template-columns: 90px 1fr 36px; align-items: center; gap: 10px; font-size: 14px; }
.set-row input[type=range] { accent-color: var(--ticket); width: 100%; } .set-row input[type=checkbox] { justify-self: start; width: 18px; height: 18px; accent-color: var(--ticket); }
.set-row output { text-align: right; color: var(--ink-soft); font-size: 12px; }
.set-looks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.set-looks label { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--paper-edge); background: var(--paper-2); cursor: pointer; }
.set-looks label:has(input:checked) { outline: 2px solid var(--ticket); } .set-looks input { display: none; } .set-looks small { color: var(--ink-soft); font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .zone-fade.on { animation: none; } }
.rpg-game[class*="look-"] .rpg-float { font-family: "Black Han Sans", var(--display); letter-spacing: .02em; -webkit-text-stroke: 5px rgba(255, 255, 255, .95); text-shadow: 0 3px 8px rgba(60, 35, 50, .25); }
.rpg-game[class*="look-"] .rpg-float.crit { color: #ff6f61; font-size: 34px; animation: float-crit .9s ease-out forwards; }
@keyframes float-crit { 0% { transform: translate(-50%, 0) scale(.4); opacity: 0; } 15% { transform: translate(-50%, -6px) scale(1.25); opacity: 1; } 35% { transform: translate(-50%, -10px) scale(1); } 100% { transform: translate(-50%, -46px) scale(.95); opacity: 0; } }
/* 5단계: 오늘의 팬 라이프 · 도감 */
.daily-sheet, .collection-sheet { width: min(560px, 100%); }
.daily-streak { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, #ffe4dc, #fff3e6); }
.daily-streak small { color: var(--ink-soft); font-size: 11px; } .daily-streak b { display: block; font-size: 22px; color: #e0705f; }
.daily-streak .dots { display: flex; gap: 6px; } .daily-streak .dots i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--ink-soft); font: 700 11px var(--font); font-style: normal; }
.daily-streak .dots i.on { background: #f59a8b; color: #fff; box-shadow: 0 2px 6px rgba(245, 154, 139, .5); }
.daily-streak p { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--ink-soft); }
.daily-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.daily-list li { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; background: var(--paper-2); border: 1px solid var(--paper-edge); }
.daily-list li.ready { background: #fff4d6; border-color: #f2c25a; box-shadow: 0 0 0 3px rgba(242, 194, 90, .25); }
.daily-list li.claimed { opacity: .6; }
.daily-list .ic { font-size: 26px; text-align: center; } .daily-list b { font-size: 14px; } .daily-list small { color: var(--ink-soft); font-size: 11px; }
.daily-list .bar { height: 8px; margin: 6px 0 4px; border-radius: 8px; background: rgba(0, 0, 0, .06); overflow: hidden; } .daily-list .bar i { display: block; height: 100%; background: linear-gradient(90deg, #f7c46c, #f59a8b); border-radius: 8px; transition: width .4s; }
.daily-list em { font-style: normal; font-size: 12px; color: var(--ink-soft); }
.daily-bonus { text-align: center; padding: 10px; border-radius: 14px; border: 2px dashed #f2c25a; font-size: 13px; } .daily-bonus.done { border-style: solid; background: #fff4d6; }
.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.col-card { display: grid; justify-items: center; gap: 6px; padding: 16px 10px; border-radius: 18px; background: var(--paper-2); border: 1px solid var(--paper-edge); text-align: center; }
.col-card .ring { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: conic-gradient(#f59a8b calc(var(--p) * 1%), rgba(0, 0, 0, .07) 0); }
.col-card .ring span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--paper-2); font-size: 26px; }
.col-card b { font-size: 14px; } .col-card small { color: var(--ink-soft); font-size: 11px; }
/* 6단계: 작은 화면 — 지금 할 일을 위쪽 한 줄로, 미니맵·알림은 작게 */
@media (max-width: 720px) {
  .rpg-game[class*="look-"] .rpg-tracker.now-tracker { display: grid; position: fixed; left: 12px; right: 12px; top: 152px; width: auto; max-width: none; padding: 8px 12px; gap: 0; }
  .rpg-game[class*="look-"] .now-tracker p { display: none; }
  .rpg-game[class*="look-"] .rpg-minimap { width: 92px; bottom: 112px; right: 12px; }
  .rpg-game[class*="look-"] .rpg-log { bottom: 108px; left: 12px; width: calc(100% - 124px); }
  .rpg-game[class*="look-"] .rpg-log p { font-size: 11px; }
  .menu-grid { grid-template-columns: repeat(3, 1fr); } .menu-grid button { padding: 12px 4px 10px; }
  .daily-list li { grid-template-columns: 32px 1fr; } .daily-list li > :last-child { grid-column: 1 / -1; justify-self: end; }
}
/* 로비 미니게임: 트로트 리듬 스테이지 */
.rpg-modal.place.karaoke, .rpg-modal.place.brush { width: min(640px, 100%); }
.stage-game { position: relative; display: grid; gap: 10px; color: #fff; background: radial-gradient(ellipse at 50% 0, #6b3f8f, #24163a 70%); border-radius: 18px; padding: 14px; overflow: hidden; user-select: none; }
.stage-game.fever-on { background: radial-gradient(ellipse at 50% 0, #ff6fae, #3a1550 70%); animation: sg-flash .45s ease-in-out infinite alternate; }
@keyframes sg-flash { to { filter: saturate(1.4) brightness(1.08); } }
.sg-top { display: flex; justify-content: space-between; align-items: end; } .sg-top small { display: block; font-size: 10px; letter-spacing: .18em; opacity: .7; } .sg-top b { font-family: "Black Han Sans", var(--display); font-size: 20px; }
.sg-score { text-align: right; } .sg-score b { font-size: 24px; color: #ffe08a; }
.sg-boss { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.sg-wax { font-size: 34px; display: inline-block; } .sg-wax.hurt { animation: sg-hurt .25s; } @keyframes sg-hurt { 30% { transform: translateX(-4px) rotate(-8deg) scale(1.1); } 60% { transform: translateX(4px) rotate(6deg); } }
.sg-hp { height: 12px; border-radius: 10px; background: rgba(255, 255, 255, .15); overflow: hidden; } .sg-hp i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff6f61, #ffd36b); transition: width .2s; }
.sg-boss small { font-size: 11px; opacity: .8; }
.sg-floor { perspective: 520px; height: 330px; }
.sg-highway { position: relative; height: 100%; display: grid; grid-template-columns: repeat(var(--lanes), 1fr); transform: rotateX(28deg); transform-origin: 50% 100%; border-radius: 14px 14px 0 0; background: linear-gradient(transparent, rgba(255, 255, 255, .06)); }
.sg-lane { border-left: 1px solid rgba(255, 255, 255, .12); background: linear-gradient(transparent 20%, color-mix(in srgb, var(--c) 14%, transparent)); } .sg-lane:first-child { border-left: 0; }
.sg-line { position: absolute; left: 0; right: 0; bottom: 64px; height: 4px; background: #fff; box-shadow: 0 0 14px #fff, 0 0 30px #ff8fb1; border-radius: 4px; }
.sg-keys { position: absolute; left: 0; right: 0; bottom: 8px; display: grid; grid-template-columns: repeat(var(--lanes), 1fr); gap: 8px; padding: 0 8px; }
.sg-key { height: 46px; border-radius: 14px; border: 2px solid var(--c); background: rgba(255, 255, 255, .08); color: #fff; font: 700 16px var(--font); cursor: pointer; transition: transform .06s, background .06s; touch-action: manipulation; }
.sg-key.down { transform: translateY(3px) scale(.96); background: var(--c); box-shadow: 0 0 24px var(--c); } .sg-key kbd { font: inherit; }
.sg-notes { position: absolute; inset: 0; pointer-events: none; }
.sg-note { position: absolute; top: 0; min-width: 54px; padding: 6px 10px; border-radius: 999px; background: var(--c); color: #2a1838; font: 700 14px var(--font); text-align: center; box-shadow: 0 0 16px var(--c), inset 0 -3px 0 rgba(0, 0, 0, .18); will-change: transform; }
.sg-note.chord { outline: 2px solid #fff; } .sg-note.missed { opacity: .3; filter: grayscale(1); }
.sg-judges { position: absolute; left: 0; right: 0; bottom: 84px; display: grid; grid-template-columns: repeat(var(--lanes), 1fr); pointer-events: none; }
.sg-judge { text-align: center; font: 900 18px "Black Han Sans", var(--display); opacity: 0; } .sg-judge.show { animation: sg-judge .5s ease-out forwards; }
.sg-judge.perfect { color: #ffe08a; text-shadow: 0 0 12px #ffb84d; } .sg-judge.great { color: #8ff0c8; } .sg-judge.good { color: #9fd5ff; } .sg-judge.miss { color: #ff8f8f; }
@keyframes sg-judge { 0% { opacity: 0; transform: translateY(8px) scale(.7); } 20% { opacity: 1; transform: translateY(0) scale(1.15); } 100% { opacity: 0; transform: translateY(-16px) scale(1); } }
.sg-combo { position: absolute; top: 138px; left: 0; right: 0; text-align: center; pointer-events: none; } .sg-combo b { display: block; font: 900 46px/1 "Black Han Sans", var(--display); text-shadow: 0 4px 0 rgba(0, 0, 0, .25); } .sg-combo small { letter-spacing: .3em; font-size: 11px; }
.sg-count { position: absolute; inset: 0; display: grid; place-items: center; font: 900 72px "Black Han Sans", var(--display); pointer-events: none; text-shadow: 0 0 30px #ff8fb1; }
.sg-bottom { display: grid; gap: 6px; } .sg-bottom p { margin: 0; font-size: 12px; opacity: .85; } .sg-bottom kbd { padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, .15); }
.sg-fever { position: relative; height: 14px; border-radius: 10px; background: rgba(255, 255, 255, .12); overflow: hidden; } .sg-fever i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd36b, #ff6fae, #b99bff); transition: width .2s; }
.sg-fever span { position: absolute; inset: 0; text-align: center; font: 700 10px/14px var(--font); letter-spacing: .3em; }
/* 서예 한 획 승부 */
.brush2 { display: grid; gap: 10px; }
.b2-top { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 14px; } #b2-time.hurry { color: #e0475f; animation: sg-flash .4s infinite alternate; }
.b2-paper { position: relative; border-radius: 14px; background: #fbf5e8; box-shadow: inset 0 0 0 1px #e6d8bf, 0 6px 18px rgba(80, 60, 40, .12); }
.b2-paper canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; } .b2-paper canvas.shake { animation: sg-hurt .3s; }
.b2-slime { position: absolute; right: 12px; bottom: 8px; font-size: 34px; transition: transform .3s; } .b2-slime.sealed { animation: b2-seal .9s forwards; } @keyframes b2-seal { to { transform: scale(0) rotate(180deg); opacity: 0; } }
.b2-seal { position: absolute; right: 18px; top: 12px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 10px; border: 4px solid #d23b3b; color: #d23b3b; font: 900 30px serif; opacity: 0; transform: rotate(-12deg); }
.b2-seal.stamp { animation: b2-stamp .7s ease-out forwards; } @keyframes b2-stamp { 0% { opacity: 0; transform: scale(2.4) rotate(-12deg); } 40% { opacity: 1; transform: scale(.9) rotate(-12deg); } 100% { opacity: .9; transform: scale(1) rotate(-12deg); } }
.b2-pop { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font: 900 26px "Black Han Sans", var(--display); opacity: 0; pointer-events: none; white-space: nowrap; }
.b2-pop.show { animation: sg-judge .9s ease-out forwards; } .b2-pop.master { color: #d23b3b; } .b2-pop.good { color: #2f7d5b; } .b2-pop.ok { color: #6b5d4f; } .b2-pop.fail { color: #9a9a9a; } .b2-pop.round { color: #7a4c74; }
.b2-tip { margin: 0; font-size: 13px; color: var(--ink-soft); }
.b2-strip { display: flex; gap: 6px; } .b2-strip span { flex: 1; text-align: center; padding: 6px; border-radius: 10px; background: var(--paper-2); font-size: 12px; color: var(--ink-soft); }
.b2-strip span.now { background: #fff4d6; color: var(--ink); font-weight: 700; } .b2-strip span.done { background: #fde3e3; color: #d23b3b; }
/* 결과 화면 등급 */
.mission-result { text-align: center; } .grade-badge { margin: 0 auto -6px; width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; font: 900 48px "Black Han Sans", var(--display); color: #fff; animation: grade-in .6s cubic-bezier(.2, 1.6, .4, 1); }
.g-S { background: linear-gradient(135deg, #ffd36b, #ff8fb1); box-shadow: 0 0 30px #ffd36b; } .g-A { background: linear-gradient(135deg, #7fd6f5, #b99bff); } .g-B { background: #8fcfb6; } .g-C { background: #c9b9a8; } .g-D { background: #a9a3ad; }
@keyframes grade-in { from { transform: scale(0) rotate(-30deg); } }
.new-record { margin: 0; font: 900 18px "Black Han Sans", var(--display); color: #ff6f61; letter-spacing: .1em; animation: sg-flash .4s infinite alternate; }
.mission-result footer { display: flex; gap: 10px; justify-content: center; }
@media (max-width: 720px) { .sg-floor { height: 300px; } .sg-note { min-width: 40px; font-size: 12px; padding: 5px 6px; } }
@media (prefers-reduced-motion: reduce) { .stage-game.fever-on, #b2-time.hurry, .new-record { animation: none; } }
.stage-game .sg-bottom kbd, .stage-game .sg-key kbd { color: #fff; background: rgba(255, 255, 255, .16); border: 0; box-shadow: none; -webkit-text-stroke: 0; }
.stage-game .sg-key kbd { background: none; font-size: 18px; }
.stage-game .sg-top b { font-family: var(--display); -webkit-text-stroke: 0; letter-spacing: .02em; }
/* 로비 미니게임 공통 · 편의점 · 프리쿠라 · 목청 비행 · 속삭임 */
.mini-banner { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; width: 100%; padding: 12px 14px; border: 0; border-radius: 16px; text-align: left; cursor: pointer; font: inherit; color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); transition: transform .15s; }
.mini-banner:hover { transform: translateY(-2px); } .mini-banner span { grid-row: span 2; font-size: 30px; } .mini-banner b { font-size: 15px; } .mini-banner small { opacity: .9; font-size: 12px; }
.mini-banner.store { background: linear-gradient(135deg, #3fb7a5, #2f8f9f); } .mini-banner.pricura { background: linear-gradient(135deg, #ff8fb1, #b99bff); }
.rpg-modal.place.mini { width: min(640px, 100%); }
.store-game { display: grid; gap: 10px; }
.st-top { display: flex; justify-content: space-between; font-weight: 700; } .st-top .rush { color: #e0475f; }
.st-queue { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; min-height: 150px; align-items: end; }
.st-guest { position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px; border-radius: 16px; background: var(--paper-2); opacity: .75; transform: scale(.92); transition: transform .2s, opacity .2s; }
.st-guest.front { opacity: 1; transform: none; background: #fff4d6; box-shadow: 0 0 0 3px #f2c25a; } .st-guest.fan { background: #ffe4ee; }
.st-bubble { display: flex; gap: 2px; padding: 6px 8px; border-radius: 14px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .1); font-size: 22px; } .st-bubble .done { opacity: .25; }
.st-face { font-size: 36px; } .st-guest b { font-size: 12px; } .st-guest i { width: 100%; height: 6px; border-radius: 6px; background: rgba(0, 0, 0, .08); overflow: hidden; } .st-guest u { display: block; height: 100%; background: linear-gradient(90deg, #ff6f61, #ffd36b, #8fcfb6); }
.st-empty { grid-column: 1 / -1; text-align: center; color: var(--ink-soft); }
.st-counter { position: relative; } .st-tray { min-height: 54px; display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 14px; background: #e9f6f3; font-size: 28px; } .st-tray small { font-size: 11px; color: #2f8f9f; margin-right: 6px; } .st-tray.shake { animation: sg-hurt .3s; }
.st-pop { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 900 18px "Black Han Sans", var(--display); opacity: 0; } .st-pop.show { animation: sg-judge .9s forwards; } .st-pop.good { color: #2f8f5b; } .st-pop.bad { color: #e0475f; }
.st-items { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.st-items button { position: relative; display: grid; justify-items: center; padding: 10px 2px 6px; border-radius: 14px; border: 1px solid var(--paper-edge); background: #fff; font: inherit; cursor: pointer; touch-action: manipulation; } .st-items button span { font-size: 28px; } .st-items small { font-size: 10px; color: var(--ink-soft); }
.st-items kbd { position: absolute; top: 3px; right: 6px; font-size: 10px; color: var(--ink-soft); } .st-items button.tap { animation: tap .18s; } @keyframes tap { 50% { transform: scale(.9); } }
.st-tip, .pc-tip, .fl-tip { margin: 0; font-size: 12px; color: var(--ink-soft); }
.pricura-game { display: grid; gap: 10px; } .pc-booth { display: grid; grid-template-columns: 1fr 110px; gap: 10px; }
.pc-view { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #fff, #ffd6e4); }
.pc-view .device-camera { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); } .pc-doll { position: absolute; left: 50%; bottom: 0; height: 85%; transform: translateX(-50%); }
.pc-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; } .pc-flash.go { animation: pc-flash .45s ease-out; } @keyframes pc-flash { 0% { opacity: 1; } 100% { opacity: 0; } }
.pc-call { position: absolute; top: 10px; left: 0; right: 0; display: grid; justify-items: center; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .4); } .pc-call span { font-size: 46px; } .pc-call b { font: 900 22px "Black Han Sans", var(--display); } .pc-call small { font-size: 16px; }
.pc-ring { position: absolute; right: 14px; bottom: 14px; width: 64px; height: 64px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .7); display: grid; place-items: center; } .pc-ring i { width: 58px; height: 58px; border-radius: 50%; background: #ff8fb1; transition: transform .05s linear; } .pc-ring i.now { background: #ffd36b; box-shadow: 0 0 18px #ffd36b; }
.pc-judge { position: absolute; left: 0; right: 0; top: 45%; text-align: center; font: 900 30px "Black Han Sans", var(--display); color: #fff; opacity: 0; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); } .pc-judge.show { animation: sg-judge 1s forwards; } .pc-judge.best { color: #ffd36b; }
.pc-strip { display: grid; gap: 6px; padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .1); } .pc-shot { aspect-ratio: 4 / 3; border-radius: 8px; background: #f3e9ee center / cover; display: grid; place-items: center; color: #c9b9c4; font-weight: 700; } .pc-shot.best { box-shadow: 0 0 0 3px #ffd36b; } .pc-shot[style] span { display: none; }
.pc-poses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .pc-poses button { position: relative; display: grid; justify-items: center; padding: 10px 4px; border-radius: 16px; border: 1px solid var(--paper-edge); background: #fff; font: inherit; cursor: pointer; touch-action: manipulation; } .pc-poses span { font-size: 30px; } .pc-poses small { font-size: 11px; } .pc-poses kbd { position: absolute; top: 4px; right: 8px; font-size: 10px; color: var(--ink-soft); } .pc-poses .picked { background: #ffe4ee; box-shadow: 0 0 0 3px #ff8fb1; }
.strip-preview { display: grid; justify-items: center; gap: 8px; } .strip-preview img { width: 120px; border-radius: 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, .15); }
.flight-game { display: grid; gap: 8px; } .flight-game canvas { width: 100%; height: auto; border-radius: 16px; touch-action: none; cursor: pointer; } .fl-top { display: flex; justify-content: space-between; font-weight: 700; }
.fl-meter, .sg-mic { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font-size: 12px; } .fl-meter i, .sg-mic i { height: 8px; border-radius: 8px; background: rgba(0, 0, 0, .1); overflow: hidden; } .fl-meter u, .sg-mic u { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8fcfb6, #ffd36b, #ff6f61); }
.sg-mic { color: #fff; } .sg-mic i { background: rgba(255, 255, 255, .15); }
.whisper-host { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); z-index: 30; width: min(460px, calc(100% - 24px)); }
.whisper-card { display: grid; gap: 8px; padding: 14px 16px; border-radius: 18px; background: rgba(24, 18, 40, .9); color: #f4ecff; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.whisper-card small { color: #b9a7d8; } .whisper-card p { margin: 0; font-size: 18px; line-height: 1.5; }
.wh-meter { position: relative; height: 14px; border-radius: 10px; background: rgba(255, 255, 255, .12); overflow: hidden; } .wh-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8fcfb6 0%, #ffd36b 55%, #ff6f61 75%); transition: width .08s; } .wh-limit { position: absolute; top: -2px; bottom: -2px; width: 3px; background: #ff6f61; box-shadow: 0 0 8px #ff6f61; }
.wh-row { display: flex; justify-content: space-between; font-size: 12px; } .wh-row b { font-size: 16px; } .wh-row b.loud { color: #ff6f61; animation: sg-flash .3s infinite alternate; }
.wh-progress { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); overflow: hidden; } .wh-progress i { display: block; height: 100%; width: 0; background: #b99bff; }
@media (max-width: 720px) { .pc-booth { grid-template-columns: 1fr; } .pc-strip { grid-template-columns: repeat(4, 1fr); } .st-items { grid-template-columns: repeat(3, 1fr); } }
.nick-form { display: flex; gap: 8px; } .nick-form input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--paper-edge); background: #fff; font: inherit; }
.rpg-label.player.p2 b { background: #d9ecff; }
/* 온라인: 채팅창과 알림이 겹치지 않게 알림을 채팅창 위로 */
.rpg-game:has(#chat:not([hidden])) .rpg-log { bottom: 330px; }
@media (max-width: 720px) { .rpg-game:has(#chat:not([hidden])) .rpg-log { bottom: 300px; } }
/* 2인 미니게임 */
.st-counter.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .st-tray.p2 { background: #e6f0ff; } .st-tray.p2 small { color: #4d7fc4; }
.st-queue:has(.st-guest.p2) { grid-template-columns: repeat(4, 1fr); } .st-guest.p2.front { background: #e6f0ff; box-shadow: 0 0 0 3px #7fb0ef; }
.st-who { position: absolute; top: -8px; left: 8px; padding: 1px 8px; border-radius: 10px; background: #f2c25a; color: #fff; font: 700 11px var(--font); font-style: normal; } .st-guest.p2 .st-who { background: #7fb0ef; }
.pc-view.duo .pc-doll { left: 34%; height: 78%; } .pc-view.duo .pc-doll.p2 { left: 66%; }
.pc-duo { display: flex; gap: 22px; } .pc-duo p { margin: 0; display: grid; justify-items: center; } .pc-duo small { padding: 0 8px; border-radius: 8px; background: rgba(0, 0, 0, .3); } .pc-duo span { font-size: 40px; }
.b2-turn { padding: 2px 10px; border-radius: 10px; color: #fff; } .b2-turn.p1 { background: #f08fb4; } .b2-turn.p2 { background: #7fb0ef; }
/* 전문 RPG 느낌: 지역 카드, 몬스터 이름표, 전투 숫자 */
.zone-title { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); z-index: 20; display: grid; justify-items: center; gap: 4px; pointer-events: none; opacity: 0; text-align: center; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .45); }
.zone-title.show { animation: zone-title 4.2s ease-out forwards; }
.zone-title small { letter-spacing: .4em; font: 700 13px var(--font); opacity: .9; }
.zone-title b { font: 400 54px/1.05 "Black Han Sans", var(--display); letter-spacing: .04em; padding: 0 28px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9) 12%, rgba(255, 255, 255, .9) 88%, transparent) bottom / 100% 2px no-repeat, linear-gradient(90deg, transparent, rgba(255, 255, 255, .9) 12%, rgba(255, 255, 255, .9) 88%, transparent) top / 100% 2px no-repeat; padding-block: 8px; }
.zone-title span { font: 600 15px var(--font); }
@keyframes zone-title { 0% { opacity: 0; transform: translate(-50%, 10px); letter-spacing: .2em; } 12% { opacity: 1; transform: translate(-50%, 0); } 78% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -6px); } }
.rpg-game[class*="look-"] .rpg-label:not(.player) b { padding: 2px 8px; border: 0; background: rgba(30, 22, 38, .72); color: #fff; font-weight: 700; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.rpg-game[class*="look-"] .rpg-label b em { font-style: normal; font-size: 10px; margin-right: 2px; }
.rpg-label.lv-gray b em { color: #c8c3cc; } .rpg-label.lv-even b em { color: #fff; } .rpg-label.lv-orange b em { color: #ffc46b; } .rpg-label.lv-red b em { color: #ff7b6b; }
.rpg-game[class*="look-"] .rpg-label:not(.player) i { width: 54px; height: 5px; background: rgba(30, 22, 38, .6); border-radius: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); }
.rpg-game[class*="look-"] .rpg-label:not(.player) u { background: linear-gradient(90deg, #ff6f61, #ffb36b); transition: width .15s; }
.rpg-game[class*="look-"] .rpg-label.boss i { width: 170px; height: 9px; }
.rpg-label.alert::before { content: '!'; position: absolute; top: -26px; left: 50%; transform: translateX(-50%); font: 900 24px "Black Han Sans", var(--display); color: #ff5f5f; -webkit-text-stroke: 3px #fff; paint-order: stroke fill; animation: alert-pop 1.2s ease-out forwards; }
@keyframes alert-pop { 0% { transform: translate(-50%, 8px) scale(.3); opacity: 0; } 20% { transform: translate(-50%, 0) scale(1.3); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.rpg-game[class*="look-"] .rpg-float.coin { color: #f2b632; font-size: 17px; } .rpg-game[class*="look-"] .rpg-float.exp { color: #b48cf0; font-size: 14px; }
.look-soft .rpg-hotbar .slot.auto.on, .look-neon .rpg-hotbar .slot.auto.on { background: var(--ticket) !important; color: #fff !important; }
.look-soft .rpg-hotbar .slot.auto.on small, .look-soft .rpg-hotbar .slot.auto.on em { color: #fff; }
.rpg-game[class*="look-"] .rpg-float.hit { color: #ffffff; -webkit-text-stroke: 5px #3b2f3a; font-size: 24px; }
.rpg-game[class*="look-"] .rpg-float.hurt { color: #ff6b6b; -webkit-text-stroke: 5px #ffffff; }
.rpg-game[class*="look-"] .rpg-float.heal { color: #4fc07a; -webkit-text-stroke: 5px #ffffff; }
.sound-test { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .sound-test b { width: 100%; font-size: 13px; } .sound-test .rpg-btn { padding: 6px 10px; font-size: 12px; }
/* 거대 가챠샵 HUD · 카운터 · 도감 · 캡슐 개봉 */
.gacha-hud { position: absolute; inset: 0; padding-top: 142px; padding-right: 14px; z-index: 6; display: flex; justify-content: flex-end; gap: 10px; align-items: flex-start; pointer-events: none; font-family: var(--font); color: var(--ink, #4a3d44); }
.gacha-hud[hidden] { display: none; }
.gacha-hud .gh-alt { position: relative; width: 46px; align-self: stretch; max-height: 88px; border-radius: 14px; background: var(--paper, #fffaf6); box-shadow: 0 6px 18px rgba(80, 40, 70, .14); overflow: hidden; display: grid; place-items: end center; padding-bottom: 6px; }
.gacha-hud .gh-alt i { position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); background: linear-gradient(#ffb3c6, #ff6f91); transition: height .25s; }
.gacha-hud .gh-alt b { position: relative; font: 800 16px var(--display, sans-serif); color: #fff; text-shadow: 0 1px 3px rgba(120, 30, 60, .5); line-height: 1; } .gacha-hud .gh-alt small { font-size: 10px; }
.gacha-hud .gh-main { min-width: min(430px, 70vw); max-width: 70vw; padding: 9px 14px; border-radius: 16px; background: var(--paper, #fffaf6); box-shadow: 0 6px 18px rgba(80, 40, 70, .14); }
.gacha-hud .gh-main small { font: 800 10px var(--font); letter-spacing: .12em; color: #ff5f8f; } .gacha-hud .gh-main b { display: block; margin: 2px 0 5px; font: 700 14px/1.35 var(--font); }
.gacha-hud .gh-main p { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; font-size: 12px; color: var(--ink-soft, #94848c); } .gacha-hud .gh-main p span { white-space: nowrap; }
.gacha-hud .gh-prompt { position: absolute; left: 50%; bottom: 128px; transform: translateX(-50%); display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; min-width: 250px; padding: 10px 16px; border-radius: 18px; background: rgba(61, 43, 74, .88); color: #fff; box-shadow: 0 8px 24px rgba(40, 10, 40, .3); }
.gacha-hud .gh-prompt kbd { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #ffd166; color: #3d2b4a; font: 900 18px var(--font); box-shadow: 0 4px 0 #c99a2e; }
.gacha-hud .gh-prompt.hot kbd { animation: gh-mash .25s ease-in-out infinite alternate; } @keyframes gh-mash { to { transform: translateY(3px); box-shadow: 0 1px 0 #c99a2e; } }
.gacha-hud .gh-prompt b { font: 700 14px var(--font); } .gacha-hud .gh-prompt i { display: block; height: 8px; border-radius: 6px; background: linear-gradient(90deg, #ff6f91 var(--k), rgba(255, 255, 255, .2) var(--k)); }
.gacha-modal { width: min(560px, 94vw); } .gacha-lead { line-height: 1.5; }
.gacha-wallet { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; } .gacha-wallet span { flex: 1; padding: 8px 10px; border-radius: 12px; background: var(--paper-2, #f5eeea); font-size: 12px; } .gacha-wallet b { display: block; font: 800 18px var(--display, sans-serif); }
.gacha-buy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .gacha-buy .rpg-btn { display: grid; gap: 2px; padding: 10px; } .gacha-buy small { font-size: 11px; opacity: .8; }
.gacha-status { min-height: 1.2em; color: #d0456b; font-size: 12px; }
.gacha-rates { width: 100%; margin: 12px 0; border-collapse: separate; border-spacing: 6px; text-align: center; font-size: 13px; font-weight: 700; } .gacha-rates caption { caption-side: top; text-align: left; font-size: 12px; color: var(--ink-soft); padding-bottom: 6px; }
.gacha-rates th { padding: 8px; border-radius: 12px; background: var(--r); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.2); box-shadow: 0 4px 0 rgba(0,0,0,0.1); } .gacha-rates td { padding: 8px; border-radius: 12px; background: rgba(255,255,255,0.7); border: 2px solid #e0e7e6; color: #263d43; }
.gacha-book { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; max-height: 46vh; overflow: auto; }
.gacha-book article { position: relative; display: grid; justify-items: center; gap: 4px; padding: 12px 6px; border-radius: 16px; background: rgba(255,255,255,0.5); border: 3px solid rgba(255,255,255,0.8); text-align: center; filter: grayscale(1); opacity: 0.5; transition: all 0.2s; }
.gacha-book article.got { filter: none; opacity: 1; border-color: var(--r); background: rgba(255,255,255,0.9); box-shadow: 0 4px 12px rgba(0,0,0,0.08), inset 0 -4px 0 rgba(0,0,0,0.05); transform: translateY(-2px); }
.gacha-book span { font-size: 28px; } .gacha-book em { position: absolute; top: 4px; right: 6px; font: 800 10px var(--font); font-style: normal; color: var(--r); } .gacha-book b { font-size: 12px; } .gacha-book small { font-size: 10px; color: var(--ink-soft, #94848c); }
.gacha-reveal { width: min(420px, 92vw); text-align: center; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 32%, #fff, #fff4f7); }
.gacha-reveal .capsule-big { position: relative; width: 170px; height: 170px; margin: 14px auto 8px; border: 0; background: none; cursor: pointer; display: block; }
.gacha-reveal .cap-top, .gacha-reveal .cap-bottom { position: absolute; left: 0; right: 0; height: 50%; border-radius: 85px 85px 0 0; background: radial-gradient(circle at 35% 30%, #fff8, transparent 40%), var(--r); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .08); }
.gacha-reveal .cap-top { top: 0; } .gacha-reveal .cap-bottom { bottom: 0; border-radius: 0 0 85px 85px; background: radial-gradient(circle at 35% 20%, #fff, #eef6ff 60%); border-top: 4px solid #fff; }
.gacha-reveal .twist-1 .cap-top { transform: rotate(-24deg); } .gacha-reveal .twist-1 { animation: cap-wobble .35s; }
.gacha-reveal.open .cap-top { transform: translate(-30px, -60px) rotate(-40deg); } .gacha-reveal.open .cap-bottom { transform: translate(34px, 22px) rotate(28deg) scale(.8); opacity: .35; }
@keyframes cap-wobble { 30% { transform: rotate(8deg); } 60% { transform: rotate(-6deg); } }
.gacha-reveal .prize { position: absolute; inset: 0; display: grid; place-items: center; font-size: 74px; animation: prize-pop .6s cubic-bezier(.3, 1.8, .5, 1); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .2)); }
@keyframes prize-pop { from { transform: scale(.2); opacity: 0; } }
.gacha-reveal.open::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--r) 45%, transparent), transparent 20%, color-mix(in srgb, var(--r) 45%, transparent) 30%, transparent 40%); animation: rays 6s linear infinite; pointer-events: none; z-index: -1; }
.gacha-reveal.r-SSR.open::before { background: conic-gradient(#ff8fa3, #ffd166, #8fe3b0, #7fd1e8, #b5b2ff, #ff8fa3); opacity: .35; }
@keyframes rays { to { transform: rotate(1turn); } }
.gacha-reveal .prize-name { display: block; font: 800 20px var(--display, sans-serif); } .gacha-reveal .prize-desc { margin: 6px 0 12px; } .gacha-reveal .reveal-actions { display: flex; gap: 8px; justify-content: center; }
/* 핀볼 심부름: 이거 vs 이거 · 응원 · 호감도 */
.shopping-watch .bond { font-style: normal; color: #ff6f91; font-size: 10px; letter-spacing: -1px; }
.shopping-watch .asking { background: #fff1f6; border-radius: 10px; box-shadow: 0 0 0 2px #ff9fb6; }
.shopping-watch .ask-row { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 4px; padding-bottom: 6px; }
.shopping-watch .ask-pick { display: grid; justify-items: center; gap: 1px; padding: 4px; border: 2px solid var(--item); border-radius: 9px; background: #fff; font: 700 10px var(--font); color: var(--ink, #4a3d44); cursor: pointer; } .shopping-watch .ask-pick span { font-size: 16px; }
.shopping-watch .ask-pick:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--item) 20%, #fff); }
.shopping-watch .ask-row i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: #ff6f91; transform-origin: left; animation: ask-time var(--t) linear forwards; } @keyframes ask-time { to { transform: scaleX(0); } }
.shopping-watch .cheer { margin-top: 4px; padding: 3px 8px; border: 0; border-radius: 9px; background: #ffd166; font: 700 11px var(--font); color: #3d2b4a; cursor: pointer; } .shopping-watch .cheer:active { transform: scale(.94); }
.shopping-watch { pointer-events: auto; }
@media (max-width: 640px) { .gacha-hud { padding-top: 125px; padding-right: 8px; } .gacha-hud .gh-main { min-width: 0; } .gacha-hud .gh-prompt { bottom: 150px; min-width: 210px; } }
/* SPHERE LIVE 공연 HUD · 전광판 · 안내 */
.live-hud { position: absolute; left: 14px; top: 156px; z-index: 6; width: min(250px, 42vw); padding: 11px 12px; border-radius: 16px; background: linear-gradient(160deg, rgba(42, 23, 71, .92), rgba(107, 45, 99, .9)); color: #fff; box-shadow: 0 8px 22px rgba(40, 10, 50, .3); font-family: var(--font); }
.live-hud[hidden], .live-screen[hidden] { display: none; }
.live-hud header b { display: block; font: 800 13px var(--display, sans-serif); letter-spacing: .12em; color: #ffd166; } .live-hud header small { font-size: 12px; }
.live-hud .lv-gauge { position: relative; height: 18px; margin: 8px 0 6px; border-radius: 9px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.live-hud .lv-gauge i { position: absolute; inset: 0 auto 0 0; width: var(--g); background: linear-gradient(90deg, #ff8fb1, #ffd166); transition: width .3s; } .live-hud .lv-gauge span { position: relative; display: block; text-align: center; font: 700 11px/18px var(--font); }
.live-hud .lv-wave { display: flex; gap: 8px; align-items: center; margin: 4px 0; font-size: 12px; } .live-hud .lv-wave kbd { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #ffd166; color: #3d2b4a; font-weight: 900; box-shadow: 0 3px 0 #c99a2e; }
.live-hud .lv-wave.hot { color: #ffd166; font-weight: 800; } .live-hud .lv-wave.hot kbd { animation: gh-mash .18s ease-in-out infinite alternate; }
.live-hud .lv-sticks { display: flex; gap: 6px; margin: 6px 0; } .live-hud .lv-sticks button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5); background: var(--c); box-shadow: 0 0 8px var(--c); cursor: pointer; }
.live-hud .lv-sticks button[aria-pressed="true"] { outline: 3px solid #fff; transform: scale(1.12); }
.live-hud .lv-ticket { margin: 2px 0 6px; font-size: 11px; opacity: .85; } .live-hud .lv-actions { display: flex; gap: 6px; flex-wrap: wrap; } .live-hud .lv-actions .rpg-btn { padding: 5px 9px; font-size: 11px; }
.live-screen { position: absolute; right: 14px; top: 116px; z-index: 7; width: min(400px, 46vw); padding: 8px; border-radius: 14px; background: #1d1230; color: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
.live-screen header { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12px; } .live-screen header .x { color: #fff; }
.live-screen iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; margin: 6px 0 4px; } .live-screen small { font-size: 10px; opacity: .7; }
.live-modal { width: min(560px, 94vw); } .live-now { padding: 8px 12px; border-radius: 12px; background: #2a1747; color: #ffd166; font-weight: 800; }
.live-setlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 0; list-style: none; } .live-setlist li { padding: 6px 10px; border-radius: 10px; background: var(--paper-2, #f5eeea); font-size: 12px; } .live-setlist b { color: #ff5f8f; margin-right: 4px; }
.live-how { padding-left: 18px; font-size: 13px; line-height: 1.55; }
@media (max-width: 640px) { .live-hud { top: 190px; width: 175px; padding: 8px; } .live-screen { left: 8px; right: 8px; width: auto; top: auto; bottom: 150px; } }
/* 트로트 리듬 메들리(리듬천국 느낌) */
.rh-game { display: grid; gap: 8px; } .rh-game canvas { width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; background: #ffd23f; touch-action: none; box-shadow: 0 0 0 4px #1d1a22; }
.rh-game.broken canvas { filter: grayscale(.6); }
.rh-pads { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .rh-pads button { color: #1d1a22; display: flex; gap: 8px; align-items: center; justify-content: center; padding: 10px; border: 3px solid #1d1a22; border-radius: 14px; background: #fff; font: 700 13px var(--font); cursor: pointer; box-shadow: 0 4px 0 #1d1a22; }
.rh-pads button kbd { font: 900 20px var(--font); } .rh-pads button[data-key="B"] { background: #ffe1ee; } .rh-pads button.down { transform: translateY(3px); box-shadow: 0 1px 0 #1d1a22; }
.rh-tip { margin: 0; font-size: 12px; color: var(--ink-soft, #94848c); } .rh-mic { display: flex; gap: 6px; align-items: center; } .rh-mic i { flex: 1; height: 8px; border-radius: 4px; background: #eee; overflow: hidden; } .rh-mic u { display: block; height: 100%; background: #ff6f91; }
.rh-pads button kbd { color: #1d1a22; background: #ffd166; padding: 2px 10px; border-radius: 8px; border: 2px solid #1d1a22; }

/* 달빛 산책: 청록빛 잉크, 아이보리 카드, 황동 강조. 저장된 neon 룩도 같은 디자인. */
.rpg-game.look-neon, .rpg-game.night-walk { --paper: rgba(248, 244, 232, .94); --paper-2: #e9e5d9; --paper-edge: #fff9e9; --ink: #29403f; --ink-soft: #677b75;
 --ticket: #ac8150; --ticket-ink: #fffaf1; --clay-shadow: 0 8px 24px rgba(12, 29, 32, .18), inset 0 1px 0 #fff9eb; --blue: #477970; --gold: #aa7939; --log-shadow: #fff;
 --font: "Noto Sans KR", system-ui, sans-serif; --display: "Jua", "Noto Sans KR", sans-serif; font-family: var(--font); }
.rpg-game.night-walk .rpg-minimap, .rpg-game.look-neon .rpg-minimap { background: rgba(235, 236, 220, .92); }
.rpg-game.night-walk .rpg-modal, .rpg-game.look-neon .rpg-modal { background: #f5f1e5; border: 1px solid #fff9e9; box-shadow: 0 24px 70px rgba(12, 29, 32, .3); color: #29403f; }
.rpg-game.night-walk .rpg-modal h2, .rpg-game.look-neon .rpg-modal h2 { color: #29403f; }
.rpg-game.night-walk .rpg-npc-hint, .rpg-game.look-neon .rpg-npc-hint { box-shadow: 0 5px 18px rgba(202, 156, 82, .25); }
.look-clay .rpg-hotbar button, .look-clay .rpg-hotbar .slot { background: rgba(255, 255, 255, .55) !important; border-color: #fff !important; }


.gacha-ten-result{width:min(760px,94vw)}
.gacha-result-summary{color:#49635e;line-height:1.6;margin:8px 0 18px}
.ten-pull-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;max-height:48dvh;overflow:auto;padding:5px 2px}
.ten-prize{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 8px;text-align:center;background:#fffdfa;border:1px solid #dedaca;border-top:3px solid var(--rarity);border-radius:14px;color:#263d43;box-shadow:0 3px 8px #343b3610}
.ten-prize.is-ssr{background:linear-gradient(155deg,#fffef6,#f8e9bf);border-color:#d3ad50}
.ten-tier{align-self:flex-start;font-size:11px;font-weight:900;color:#485959}
.ten-new{position:absolute;right:8px;top:13px;font-size:9px;font-weight:900;color:#31735e}
.ten-icon{font-size:34px;line-height:1.5}.ten-prize b{font-size:13px;word-break:keep-all}.ten-prize small{font-size:11px;color:#61716a}.ten-prize em{font-size:10px;font-style:normal;color:#78552b}
@media(max-width:620px){.ten-pull-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:380px){.ten-pull-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.reward-character-collection{margin-top:20px;padding-top:18px;border-top:1px solid #d7d9cb}.reward-character-collection>p{font-size:13px;color:#52645d;line-height:1.6}.reward-character-collection .looks-grid{max-height:360px;overflow:auto}