/* 성불 GO — 먹(墨)·한지(韓紙)·단청(丹靑)·도장(印) : 목판화처럼 딱딱한 그림자, 종이 결, 붉은 인장 */
:root {
  --ink: #0e0c0a; --ink-2: #17130f; --ink-3: #221c16; --ink-4: #2c251d; --line: #3f342a;
  --paper: #efe6d3; --paper-2: #e3d6bd; --paper-3: #cdbfa2; --paper-dim: #a99d86;
  --red: #b5323a; --red-2: #7f1f25; --red-soft: #d98a86;
  --gold: #d9a441; --gold-2: #f0cf7a; --gold-dark: #8a6420;
  --blue: #2e5c8a; --blue-2: #1e3a57; --jade: #5b8c6f; --violet: #7a4fa6;
  --spirit: #8fd3f0; --grace: #b9a3e8; --virtue: #e8c96b;
  --serif: 'Nanum Myeongjo', 'Noto Serif KR', serif;
  --sans: 'Noto Sans KR', system-ui, -apple-system, sans-serif;
  --brush: 'Nanum Brush Script', 'Nanum Myeongjo', cursive;
  --shadow: 4px 4px 0 rgba(0, 0, 0, .62);
  --shadow-sm: 2px 2px 0 rgba(0, 0, 0, .6);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); overscroll-behavior: none; }
body { position: fixed; inset: 0; overflow: hidden; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
#app { position: absolute; inset: 0; }
#app::after { content: ''; position: absolute; inset: 0; background: var(--grain); opacity: .08; pointer-events: none; z-index: 200; mix-blend-mode: overlay; }
button { font-family: inherit; color: inherit; cursor: pointer; }
img { -webkit-user-drag: none; }
[hidden] { display: none !important; }

/* ---------- 화면 ---------- */
.screen { position: absolute; inset: 0; display: none; }
.screen.active { display: block; }
.screen.panel { display: block; transform: translateY(104%); transition: transform .28s cubic-bezier(.2,.8,.2,1); background: var(--ink-2); z-index: 40; }
.screen.panel.open { transform: translateY(0); }
.screen.overlay { display: block; opacity: 0; pointer-events: none; transition: opacity .5s; z-index: 50; background: var(--ink); }
.screen.overlay.open { opacity: 1; pointer-events: auto; }

/* ---------- 버튼: 목판 인쇄처럼 딱딱한 그림자 ---------- */
.btn { border: 2px solid var(--line); background: var(--ink-3); color: var(--paper); border-radius: 5px; padding: 10px 16px; font: 700 15px/1.2 var(--serif); box-shadow: var(--shadow-sm); transition: transform .06s, box-shadow .06s; letter-spacing: .01em; }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 rgba(0,0,0,.6); }
.btn-primary { background: var(--red); border-color: #e7b9ad; color: #fbf3e6; box-shadow: 4px 4px 0 var(--red-2); text-shadow: 0 1px 0 rgba(0,0,0,.3); }
.btn-primary:active { box-shadow: 1px 1px 0 var(--red-2); }
.btn-lg { padding: 15px 34px; font-size: 19px; border-radius: 6px; }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 4px; box-shadow: 2px 2px 0 rgba(0,0,0,.5); }
.btn-ghost { background: transparent; box-shadow: none; }
.btn-danger { border-color: var(--red-2); color: var(--red-soft); }
.btn-icon { width: 44px; height: 44px; padding: 0; border-radius: 4px; display: grid; place-items: center; font-size: 18px; }
.btn-heal { background: var(--blue-2); border-color: #7fb0d8; color: #dff1ff; }
.btn[disabled] { opacity: .45; cursor: default; box-shadow: none; transform: none; }
.btn.dim { opacity: .55; }

/* ---------- 타이틀 ---------- */
#screen-title { background: var(--ink); overflow: hidden; }
.title-bg { position: absolute; inset: 0; background: url('../assets/img/ui/title-bg.webp') center/cover no-repeat, var(--ink); filter: saturate(.85) contrast(1.05); }
.title-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,12,10,.2) 0%, rgba(14,12,10,.05) 30%, rgba(14,12,10,.88) 72%, var(--ink) 100%); }
.title-fog { position: absolute; inset: 0; pointer-events: none; }
.title-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 26px calc(48px + var(--safe-b)); text-align: center; }
.title-eyebrow { font: 26px var(--brush); color: var(--gold); margin: 0 0 2px; letter-spacing: .08em; }
.title-logo { position: relative; margin: 0; font-family: var(--serif); font-weight: 800; line-height: .92; color: var(--paper); text-shadow: 3px 3px 0 rgba(0,0,0,.7); }
.title-logo span { display: block; font-size: 80px; letter-spacing: .02em; }
.title-logo em { display: block; font-style: normal; font-size: 46px; color: var(--gold); letter-spacing: .28em; margin-left: .28em; }
.title-logo::after { content: '成佛'; position: absolute; right: -14px; top: -6px; width: 44px; height: 44px; display: grid; place-items: center; background: var(--red); color: var(--paper); font: 800 17px/1 var(--serif); border: 2px solid #f1c9b9; transform: rotate(-9deg); box-shadow: 2px 2px 0 var(--red-2); letter-spacing: -.02em; writing-mode: vertical-rl; }
.title-sub { color: var(--paper-2); font-size: 14.5px; line-height: 1.7; margin: 16px 0 22px; text-shadow: 0 1px 0 #000; }
.title-sub b { color: var(--gold-2); font-weight: 700; }
.title-actions { display: flex; flex-direction: column; gap: 10px; width: min(320px, 100%); }
.title-actions .btn { width: 100%; }
.title-stats { margin: 14px 0 0; font: 700 13px var(--serif); color: var(--gold-2); background: rgba(14,12,10,.7); border: 1px solid var(--gold-dark); padding: 6px 12px; border-radius: 3px; }
.title-note { color: var(--paper-dim); font-size: 12px; margin: 12px 0 0; }

/* ---------- HUD ---------- */
.hud { position: absolute; left: 0; right: 0; z-index: 20; padding: 10px 12px; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-top { top: 0; padding-top: calc(10px + var(--safe-t)); background: linear-gradient(180deg, rgba(14,12,10,.9), rgba(14,12,10,0)); }
.hud-bottom { bottom: 0; padding-bottom: calc(14px + var(--safe-b)); flex-direction: column; align-items: stretch; gap: 8px; background: linear-gradient(0deg, rgba(14,12,10,.92), rgba(14,12,10,0)); }
.hud-rank { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.hud-avatar { width: 46px; height: 46px; border-radius: 4px; object-fit: cover; border: 2px solid var(--gold); background: var(--ink-3); box-shadow: var(--shadow-sm); }
.hud-rank-body { min-width: 0; flex: 1; }
.hud-rank-name { font: 800 15px var(--serif); color: var(--gold-2); white-space: nowrap; text-shadow: 1px 1px 0 #000; }
.hud-xp-text { font-size: 11px; color: var(--paper-dim); margin-top: 3px; }
.hud-title { font: 700 10px var(--serif); color: var(--gold-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; opacity: .92; }
.rw-title { font: 700 13px var(--serif); color: var(--ink); margin: -6px 0 10px; }
.hud-stats { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.stat { display: flex; align-items: center; gap: 5px; border: 2px solid; border-radius: 3px; padding: 2px 9px 2px 6px; font: 800 14px var(--serif); box-shadow: var(--shadow-sm); }
.stat small { font: 400 11px var(--sans); opacity: .85; }
.stat-virtue { background: var(--virtue); color: #6b1a1a; border-color: var(--red); }      /* 노란 부적 */
.stat-mind { background: var(--blue-2); color: var(--spirit); border-color: var(--blue); }
.stat-buff { background: var(--gold); color: #3a2400; border-color: var(--gold-dark); }
.stat-wound { background: var(--red-2); color: #f6d5d5; border-color: var(--red); }
.stat-icon { width: 18px; height: 18px; object-fit: contain; }
.stat-emoji { font-size: 14px; }
.bar { height: 8px; background: #2a231c; border: 1px solid #000; border-radius: 2px; overflow: hidden; }
.bar > div { height: 100%; transition: width .2s; }
.bar-xp > div { background: var(--grace); width: 0; }
.bar-hp { height: 10px; } .bar-hp > div { background: var(--red); width: 100%; }
.bar-wrath { height: 5px; margin-top: 4px; } .bar-wrath > div { background: var(--violet); width: 0; transition: width .1s linear; }
.bar-mind { height: 11px; } .bar-mind > div { background: var(--spirit); width: 100%; }
.bar-mind > div.low { background: var(--red-soft); }
.bar-quest { margin: 8px 0; } .bar-quest > div { background: var(--gold); }

/* ---------- 지도 ---------- */
#screen-map { background: var(--ink); }
#map { position: absolute; inset: 0; background: #0e0d15; z-index: 1; }
.night-tiles { filter: invert(1) hue-rotate(195deg) brightness(.6) contrast(1.15) saturate(.3) sepia(.25); }
.leaflet-container { font-family: var(--sans); }
.leaflet-control-attribution { background: rgba(14,12,10,.7) !important; color: var(--paper-dim) !important; font-size: 9px !important; }
.leaflet-control-attribution a { color: var(--paper-2) !important; }
.player-marker .pm-dot { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--gold); border: 2px solid var(--paper); box-shadow: 0 0 10px var(--gold); }
.player-marker .pm-ring { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px; border-radius: 50%; border: 2px solid var(--gold); animation: ring 1.8s ease-out infinite; }
@keyframes ring { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
.ghost-marker .gm { position: relative; width: 48px; height: 56px; display: grid; place-items: center; animation: float 2.6s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(143,211,240,.55)); }
.ghost-marker .gm img { width: 46px; height: 46px; object-fit: contain; }
.ghost-marker .gm-tier { position: absolute; bottom: -2px; font-size: 9px; color: var(--gold-2); text-shadow: 1px 1px 0 #000; letter-spacing: -1px; white-space: nowrap; }
.ghost-marker .gm.tier-3 { filter: drop-shadow(0 0 10px rgba(185,163,232,.8)); }
.ghost-marker .gm.tier-4 { filter: drop-shadow(0 0 12px rgba(217,138,134,.85)); }
.ghost-marker .gm.tier-5 { filter: drop-shadow(0 0 16px rgba(240,207,122,.95)); animation-duration: 1.6s; }
.ghost-marker .gm.lured::after { content: '香'; position: absolute; top: -6px; right: -4px; font-size: 11px; color: var(--gold); font-family: var(--serif); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.ghost-tip { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); font: 700 12px var(--serif); border-radius: 3px; box-shadow: var(--shadow-sm); }
.leaflet-tooltip-top.ghost-tip::before { border-top-color: var(--ink); }
.radar { position: absolute; left: 12px; right: 12px; top: calc(88px + var(--safe-t)); z-index: 20; display: flex; align-items: center; gap: 10px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-left: 8px solid var(--red); border-radius: 3px; padding: 7px 12px; box-shadow: var(--shadow); pointer-events: none; }
.radar-arrow { width: 26px; height: 26px; display: grid; place-items: center; color: var(--red); font-size: 18px; transition: transform .4s; }
.radar-text { font: 700 13px var(--serif); }
.map-actions { position: absolute; left: 12px; right: 12px; bottom: calc(74px + var(--safe-b)); z-index: 20; display: flex; flex-direction: column; gap: 10px; align-items: stretch; pointer-events: none; }
.map-actions > * { pointer-events: auto; }
.btn-engage { display: flex; flex-direction: column; align-items: center; padding: 13px; border-radius: 6px; background: var(--red); color: #fbf3e6; border: 2px solid #e7b9ad; box-shadow: 5px 5px 0 var(--red-2); animation: pulse 1.4s ease-in-out infinite; }
.btn-engage.boss { background: var(--violet); border-color: #cdb6e8; box-shadow: 5px 5px 0 #3f2560; }
.engage-name { font: 800 20px var(--serif); }
.engage-sub { font-size: 12px; opacity: .9; font-family: var(--sans); }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
.map-tools { display: flex; gap: 8px; justify-content: space-between; }
.btn-tool { flex: 1; font-size: 14px; } .btn-tool small { color: var(--gold-2); margin-left: 4px; }
#btn-locate { flex: 0 0 48px; }
.tabbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; overflow-x: auto; scrollbar-width: thin; background: var(--paper); border-top: 3px solid var(--ink); padding: 4px 6px calc(4px + var(--safe-b)); }
.tab { flex: 1; min-width: 48px; min-height: 44px; background: none; border: 0; color: #6b6052; font: 700 13px var(--serif); padding: 10px 0 8px; border-bottom: 3px solid transparent; }
.tab.active { color: var(--red); border-bottom-color: var(--red); }

/* ---------- 명소·보따리 마커 & 시트 ---------- */
.spot-marker .sm { position: relative; width: 56px; height: 66px; display: grid; place-items: center; filter: drop-shadow(0 0 8px rgba(217,164,65,.5)); }
.spot-marker .sm img { width: 46px; height: 46px; object-fit: contain; }
.spot-marker .sm-name { position: absolute; bottom: -2px; font: 700 10px var(--serif); color: var(--ink); background: var(--paper); padding: 1px 6px; border-radius: 2px; white-space: nowrap; border: 1px solid var(--ink); }
.spot-marker .sm-gate { filter: drop-shadow(0 0 12px rgba(122,79,166,.9)); }
.spot-marker .sm-spring { filter: drop-shadow(0 0 12px rgba(143,211,240,.8)); }
.spot-marker .sm-tree { filter: drop-shadow(0 0 12px rgba(91,140,111,.9)); }
.spot-marker .sm.boss-ready { animation: bossglow 1.2s ease-in-out infinite; }
.spot-marker .sm.boss-ready .sm-name { color: var(--paper); background: var(--red); border-color: var(--red-2); }
@keyframes bossglow { 0%, 100% { filter: drop-shadow(0 0 8px rgba(181,50,58,.6)); transform: scale(1); } 50% { filter: drop-shadow(0 0 20px rgba(181,50,58,1)); transform: scale(1.06); } }
.drop-marker .dm { position: relative; width: 44px; height: 52px; display: grid; place-items: center; animation: float 2s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(217,164,65,.8)); }
.drop-marker .dm img { width: 38px; height: 38px; object-fit: contain; }
.drop-marker .dm-emoji { font-size: 28px; }
.drop-marker .dm-name { position: absolute; bottom: -4px; font: 700 10px var(--serif); color: var(--ink); background: var(--virtue); border: 1px solid var(--red); padding: 0 5px; border-radius: 2px; white-space: nowrap; }
.drop-marker .dm.mine .dm-name { background: var(--paper); border-color: var(--ink); }
.sheet { position: absolute; left: 10px; right: 10px; bottom: calc(66px + var(--safe-b)); z-index: 35; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 4px; padding: 8px 14px 14px; box-shadow: var(--shadow); }
#spot-sheet { max-height: calc(100% - 76px - var(--safe-t) - var(--safe-b)); overflow-y: auto; overscroll-behavior: contain; }
.sheet::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(90deg, var(--red) 0 24px, var(--blue) 24px 48px, var(--gold) 48px 72px, var(--jade) 72px 96px); opacity: .85; }
.sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: rgba(0,0,0,.25); margin: 8px auto 8px; }
.sheet-head { display: flex; align-items: center; gap: 10px; }
.spot-img { width: 52px; height: 52px; object-fit: contain; flex: 0 0 52px; }
.sheet-title { flex: 1; min-width: 0; } .sheet-title h3 { margin: 0; font: 800 18px var(--serif); color: var(--red-2); } .sheet-title small { color: #6b6052; font-size: 12px; }
.sheet-desc { font-size: 13px; color: #4a4036; line-height: 1.55; margin: 8px 0 4px; }
.sheet-status { font: 700 12.5px var(--serif); color: var(--blue); margin: 0 0 10px; }
.sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; } .sheet-actions .btn { flex: 1 1 45%; font-size: 13.5px; padding: 10px 8px; }
.sheet .btn { background: var(--paper-2); color: var(--ink); border-color: var(--ink); }
.sheet .btn-primary { background: var(--red); color: #fbf3e6; }
.sheet .btn-heal { background: var(--blue); color: #eef6ff; border-color: var(--blue-2); }
.btn-boss { background: var(--violet) !important; color: #f4ecff !important; border-color: #3f2560 !important; }

/* ---------- AR ---------- */
#screen-ar { background: #000; overflow: hidden; }
#screen-ar.punch { animation: punch .09s ease-out; } #screen-ar.punch-big { animation: punchbig .13s ease-out; }
@keyframes punch { 0% { transform: scale(1.012); } 100% { transform: scale(1); } }
@keyframes punchbig { 0% { transform: scale(1.03) rotate(.3deg); } 60% { transform: scale(1.01) rotate(-.2deg); } 100% { transform: scale(1); } }
#ar-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ar-fallback { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 60%, #1a1620 0%, #050408 75%); }
.ar-fallback::after { content: '카메라 없이 어둠 속에서 퇴마 중'; position: absolute; left: 0; right: 0; top: 46%; text-align: center; color: rgba(239,230,211,.25); font: 700 13px var(--serif); }
#ar-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 12; }
#ar-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 5; background: radial-gradient(ellipse at center, transparent 55%, rgba(14,12,10,.75) 100%); }
.ghost-wrap { position: absolute; left: 0; top: 0; z-index: 10; width: 240px; height: 300px; display: grid; place-items: center; will-change: transform, opacity; transition: opacity .25s; cursor: crosshair; --aura: #8fd3f0; --kx: 0px; --ky: 0px; }
.ghost-aura { position: absolute; inset: 10% 8%; border-radius: 50%; background: radial-gradient(circle, var(--aura) 0%, transparent 65%); opacity: .4; filter: blur(14px); animation: aura 2.2s ease-in-out infinite; pointer-events: none; }
@keyframes aura { 0%, 100% { transform: scale(.9); opacity: .32; } 50% { transform: scale(1.1); opacity: .55; } }
.ghost-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 22px var(--aura)); animation: ghostbreathe 3.2s ease-in-out infinite; translate: var(--kx) var(--ky); transition: translate .12s ease-out; }
.ghost-img.stop { animation-play-state: paused !important; }
@keyframes ghostbreathe { 0%, 100% { transform: scale(1) rotate(-1deg); filter: drop-shadow(0 0 18px var(--aura)) brightness(1); } 50% { transform: scale(1.04) rotate(1deg); filter: drop-shadow(0 0 30px var(--aura)) brightness(1.15); } }
.ghost-name-tag { position: absolute; bottom: -6px; padding: 2px 10px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); font: 700 12px var(--serif); pointer-events: none; border-radius: 2px; box-shadow: var(--shadow-sm); }
.ghost-wrap.appear .ghost-img { animation: ghostin 1.1s ease-out; }
@keyframes ghostin { from { opacity: 0; transform: scale(.4) translateY(40px); filter: blur(12px); } to { opacity: 1; transform: scale(1); filter: blur(0); } }
.ghost-wrap.hit .ghost-img { animation: ghosthit .26s ease-out; }
@keyframes ghosthit { 0% { filter: brightness(3) contrast(1.3) drop-shadow(0 0 30px #fff); } 35% { transform: rotate(-3deg) scale(.97); } 65% { transform: rotate(2deg) scale(1.02); } 100% { transform: none; } }
.ghost-wrap.dodge .ghost-img { animation: ghostdodge .5s ease-in-out; }
@keyframes ghostdodge { 0% { opacity: 1; filter: blur(0); } 50% { opacity: .1; filter: blur(16px); transform: scale(1.3); } 100% { opacity: 1; filter: blur(0); } }
.ghost-wrap.gone { opacity: 0 !important; transition: opacity 1.2s; }
.ghost-wrap.gone .ghost-img { animation: ghostgone 1.2s ease-in forwards; }
@keyframes ghostgone { to { transform: scale(1.6); filter: blur(20px) brightness(4); } }
.ghost-wrap.stunned .ghost-img { animation: stunshake .25s linear infinite; filter: grayscale(.7) drop-shadow(0 0 26px #8fd3f0) brightness(1.2); }
@keyframes stunshake { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-3px) rotate(-1deg); } 75% { transform: translateX(3px) rotate(1deg); } }
.ghost-wrap.stunned::after { content: '결박'; position: absolute; top: 4%; left: 50%; transform: translateX(-50%) rotate(-6deg); font: 40px var(--brush); color: var(--spirit); text-shadow: 2px 2px 0 #000; }
.ghost-wrap.casting .ghost-img { animation: casting .7s ease-in-out; }
@keyframes casting { 0%, 100% { filter: drop-shadow(0 0 22px var(--aura)); } 50% { filter: drop-shadow(0 0 60px var(--aura)) brightness(1.6) saturate(1.6); transform: scale(1.12); } }
.guard-ring { position: absolute; width: 70%; height: 70%; border: 4px dashed var(--gold); border-radius: 50%; pointer-events: none; transition: transform .1s linear; opacity: .9; }
.guard-ring.hot { border-color: var(--paper); border-style: solid; box-shadow: 0 0 24px var(--gold), inset 0 0 24px rgba(217,164,65,.4); }
.ar-arrow { position: absolute; top: 46%; z-index: 15; display: flex; flex-direction: column; align-items: center; color: var(--gold-2); text-shadow: 2px 2px 0 #000; animation: arrowpulse 1s ease-in-out infinite; pointer-events: none; }
.ar-arrow span { font-size: 44px; line-height: 1; } .ar-arrow small { font: 700 12px var(--serif); color: var(--paper); }
.ar-arrow.left { left: 14px; } .ar-arrow.right { right: 14px; }
@keyframes arrowpulse { 0%, 100% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(-6px); opacity: .6; } }
.ar-arrow.right { animation-name: arrowpulseR; }
@keyframes arrowpulseR { 0%, 100% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(6px); opacity: .6; } }
.hud-ar { align-items: flex-start; }
.ghost-status { flex: 1; background: var(--ink-2); border: 2px solid var(--line); border-radius: 4px; padding: 8px 12px; box-shadow: var(--shadow-sm); }
.ghost-title { display: flex; justify-content: space-between; font: 800 15px var(--serif); margin-bottom: 6px; }
.ghost-title .tier { color: var(--gold-2); font-size: 12px; letter-spacing: -1px; }
.ar-timer { width: 46px; height: 46px; border-radius: 4px; display: grid; place-items: center; background: var(--paper); border: 2px solid var(--ink); color: var(--ink); font: 800 17px var(--serif); font-variant-numeric: tabular-nums; box-shadow: var(--shadow-sm); }
.ar-timer.low { background: var(--red); color: var(--paper); animation: pulse .6s infinite; }
.mind-wrap { display: flex; align-items: center; gap: 10px; }
.mind-label { font: 800 12px var(--serif); color: var(--spirit); white-space: nowrap; }
.mind-wrap .bar { flex: 1; }
.ar-tools { display: flex; gap: 8px; }
.btn-tool-slot { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; font-size: 12px; border-radius: 5px; }
.btn-tool-slot img { width: 34px; height: 34px; object-fit: contain; }
.btn-tool-slot .slot-emoji { font-size: 26px; line-height: 34px; }
.btn-tool-slot b { color: var(--gold-2); }
.btn-tool-slot.active { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-dark), var(--shadow-sm); }
.ar-hint { text-align: center; font-size: 12px; color: var(--paper-2); margin: 0; text-shadow: 1px 1px 0 #000; }
#screen-ar.shake { animation: shake .35s; }
@keyframes shake { 0%, 100% { transform: translate(0); } 20% { transform: translate(-8px, 4px); } 40% { transform: translate(7px, -3px); } 60% { transform: translate(-5px, 2px); } 80% { transform: translate(4px, -2px); } }
.pop { position: absolute; z-index: 16; transform: translate(-50%, -50%) rotate(-4deg); font: 800 24px var(--serif); color: var(--gold-2); text-shadow: 2px 2px 0 #000, -1px -1px 0 #000; pointer-events: none; opacity: 1; transition: transform .8s cubic-bezier(.2,.7,.3,1), opacity .8s; }
.pop.go { transform: translate(-50%, -150%) rotate(-4deg) scale(1.15); opacity: 0; }
.pop.crit { color: var(--paper); font-size: 32px; text-shadow: 3px 3px 0 var(--red), -1px -1px 0 #000; }
.pop.miss { color: var(--paper-dim); font-size: 16px; }
.pop.wrath { color: var(--red-soft); font-size: 24px; }
.combo { position: absolute; right: 16px; top: calc(118px + var(--safe-t)); z-index: 16; display: flex; flex-direction: column; align-items: center; pointer-events: none; transform: rotate(-6deg); }
.combo b { font: 64px/1 var(--brush); color: var(--gold-2); text-shadow: 3px 3px 0 var(--red), -1px -1px 0 #000; }
.combo span { font: 800 13px var(--serif); color: var(--paper); text-shadow: 1px 1px 0 #000; margin-top: -4px; }
.combo.bump b { animation: bump .18s ease-out; }
@keyframes bump { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
.bar-break { height: 6px; margin-top: 4px; } .bar-break > div { background: #b8bcc4; width: 0; }
.bar-break.broken > div { background: var(--gold-2); }
.boss-phase { margin-top: 6px; font: 22px/1 var(--brush); color: var(--red-soft); }
.ghost-wrap.is-boss .ghost-img { filter: drop-shadow(0 0 34px var(--aura)) contrast(1.05); }
#ar-extra { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.extra-wrap { position: absolute; left: 0; top: 0; width: 240px; height: 300px; display: grid; place-items: center; will-change: transform, opacity; transition: opacity .25s; pointer-events: auto; cursor: crosshair; --aura: #8fd3f0; }
.extra-wrap .ghost-aura { opacity: .3; }
.extra-wrap .ghost-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 18px var(--aura)); }
.extra-decoy .ghost-img { filter: drop-shadow(0 0 18px var(--aura)) saturate(.55) brightness(.92); animation: ghostbreathe 2.6s ease-in-out infinite reverse; }
.extra-minion .bar-hp.mini { position: absolute; bottom: 12px; width: 60%; height: 5px; }
.extra-minion .bar-time { position: absolute; bottom: 4px; width: 60%; height: 4px; } .extra-minion .bar-time > div { background: var(--jade); }
.extra-wrap.hit .ghost-img { animation: ghosthit .26s ease-out; }
.extra-wrap.dodge .ghost-img { animation: ghostdodge .5s ease-in-out; }
.extra-wrap.gone { opacity: 0 !important; transition: opacity .8s; }

/* ---------- 귀신 스킬 패널: 펼친 두루마리 ---------- */
.skill-panel { position: absolute; left: 12px; right: 12px; top: 50%; transform: translateY(-46%); z-index: 30; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 4px; padding: 12px 14px 14px; box-shadow: 6px 6px 0 rgba(0,0,0,.65); }
.skill-panel::before { content: ''; position: absolute; left: -3px; right: -3px; top: -3px; height: 8px; background: var(--red); }
.skill-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; }
.skill-head > span:first-child { font: 800 16px var(--serif); color: var(--red-2); }
.skill-timer { min-width: 38px; height: 38px; display: grid; place-items: center; background: var(--ink); color: var(--gold-2); font: 800 18px var(--serif); border-radius: 3px; }
.skill-desc { font: 700 15px/1.6 var(--serif); margin: 10px 0 8px; color: #2a2118; }
.skill-seq { display: flex; gap: 8px; justify-content: center; min-height: 52px; margin: 6px 0 10px; }
.sigil { width: 48px; height: 48px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 3px; background: var(--paper-2); font: 800 26px var(--serif); color: var(--ink); transition: transform .15s; }
.sigil.pending { color: #9a8d76; } .sigil.show { transform: scale(1.12); background: var(--paper); } .sigil.ok { background: #dfe9d5; border-color: var(--jade); } .sigil.wrong { background: #f2c9c4; border-color: var(--red); color: var(--red); }
.skill-choices { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sigil-btn { width: 58px; height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 4px 0; background: var(--paper-2); color: var(--c, var(--ink)); border: 2px solid var(--ink); font: 800 26px var(--serif); }
.sigil-btn small { font: 700 11px var(--sans); color: #4a4036; }
.choice-btn { flex: 1 1 100%; background: var(--paper-2); color: var(--ink); border: 2px solid var(--ink); text-align: left; padding: 11px 14px; font: 700 15px var(--serif); }
.bar-skill { margin-top: 10px; height: 6px; background: #d5c8ad; border-color: var(--ink); } .bar-skill > div { background: var(--red); transition: width .1s linear; }

/* ---------- 성불 연출 ---------- */
.salv-light { position: absolute; inset: -50%; background: conic-gradient(from 0deg, transparent 0 18deg, rgba(240,207,122,.08) 22deg, transparent 34deg, transparent 70deg, rgba(240,207,122,.06) 76deg, transparent 88deg, transparent 150deg, rgba(240,207,122,.08) 158deg, transparent 170deg, transparent 240deg, rgba(240,207,122,.06) 248deg, transparent 262deg, transparent 320deg, rgba(240,207,122,.08) 328deg, transparent 340deg); animation: spin 48s linear infinite; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.salv-stage { position: absolute; left: 0; right: 0; top: calc(6vh + var(--safe-t)); height: 46vh; display: grid; place-items: center; }
.salv-img { position: absolute; width: min(72vw, 340px); height: 100%; object-fit: contain; transition: opacity 1.4s ease, filter 1.4s ease, transform 1.4s ease; }
#salv-ghost { filter: drop-shadow(0 0 30px rgba(143,211,240,.6)); opacity: 1; }
#salv-saved { opacity: 0; transform: scale(.92); filter: drop-shadow(0 0 40px rgba(240,207,122,.9)) brightness(1.08); }
.transformed #salv-ghost { opacity: 0; filter: blur(14px) brightness(3); transform: scale(1.15); }
.transformed #salv-saved { opacity: 1; transform: scale(1); }
.salv-stage::after { content: '成佛'; position: absolute; right: 8vw; top: 2vh; font: 72px/1 var(--brush); color: var(--red); text-shadow: 3px 3px 0 rgba(0,0,0,.5); opacity: 0; transform: rotate(-10deg) scale(1.6); transition: opacity .6s .9s, transform .6s .9s cubic-bezier(.2,1.4,.4,1); pointer-events: none; }
.transformed .salv-stage::after { opacity: .95; transform: rotate(-10deg) scale(1); }
.salv-dialog { position: absolute; left: 14px; right: 14px; top: calc(56vh + var(--safe-t)); background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 4px; padding: 16px 18px 14px; box-shadow: 6px 6px 0 rgba(0,0,0,.6); }
.salv-speaker { font: 800 14px var(--serif); color: var(--red-2); margin-bottom: 8px; }
.salv-text { font: 700 17px/1.75 var(--serif); min-height: 3.5em; margin: 0 0 12px; color: #2a2118; }
.salv-dialog .btn { display: block; margin-left: auto; }
.salv-rewards { position: absolute; left: 14px; right: 14px; top: calc(54vh + var(--safe-t)); background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 4px; padding: 18px; text-align: center; box-shadow: 6px 6px 0 rgba(0,0,0,.6); }
.salv-rewards h3 { font: 800 18px var(--serif); color: var(--red-2); margin: 0 0 12px; }
.salv-rewards ul { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.salv-rewards li { display: flex; justify-content: space-between; padding: 8px 12px; background: var(--paper-2); border: 1px solid var(--paper-3); border-radius: 3px; font: 700 15px var(--serif); }
.salv-rewards li b { color: var(--red); font-size: 18px; }
.salv-rewards li:first-child b { color: var(--violet); }
.salv-note { font-size: 13px; color: #4a4036; line-height: 1.6; margin: 0 0 14px; }
.salv-rewards .btn { width: 100%; }

/* ---------- 패널(도구점·영혼록·과업·설정) ---------- */
.panel-head { position: sticky; top: 0; display: flex; align-items: center; gap: 10px; padding: calc(12px + var(--safe-t)) 14px 12px; background: var(--paper); color: var(--ink); border-bottom: 3px solid var(--ink); z-index: 2; }
.panel-head h2 { flex: 1; margin: 0; font: 800 21px var(--serif); color: var(--red-2); }
.panel-head .btn-icon { background: var(--paper-2); color: var(--ink); border-color: var(--ink); }
.panel-virtue { font-size: 13px; color: #6b6052; } .panel-virtue b { color: var(--red); font-size: 15px; }
.panel-body { position: absolute; top: calc(66px + var(--safe-t)); bottom: 0; left: 0; right: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 14px calc(90px + var(--safe-b)); }
.panel-body h3 { font: 30px/1 var(--brush); color: var(--gold-2); margin: 20px 0 10px; }
.panel-body h3 small { font: 400 11.5px var(--sans); color: var(--paper-dim); margin-left: 8px; }
.panel-intro { font-size: 13px; color: var(--paper-dim); line-height: 1.6; margin: 0; }
.shop-grid, .codex-grid { display: grid; gap: 10px; }
.shop-card, .codex-card { position: relative; display: flex; gap: 12px; background: var(--ink-3); border: 2px solid var(--line); border-left: 6px solid var(--gold-dark); border-radius: 3px; padding: 12px; box-shadow: var(--shadow-sm); }
.shop-card.equipped { border-color: var(--gold); border-left-color: var(--gold); }
.shop-card.equipped::after { content: '裝'; position: absolute; right: 10px; top: 10px; width: 28px; height: 28px; display: grid; place-items: center; background: var(--red); color: var(--paper); font: 800 14px var(--serif); transform: rotate(-8deg); border: 1px solid #f1c9b9; }
.shop-card.locked { border-style: dashed; opacity: .7; }
.shop-img { width: 72px; height: 72px; flex: 0 0 72px; display: grid; place-items: center; background: var(--ink-2); border: 1px solid var(--line); border-radius: 3px; }
.shop-img img { width: 64px; height: 64px; object-fit: contain; }
.shop-emoji { font-size: 38px; }
.shop-body { flex: 1; min-width: 0; }
.shop-name { font: 800 16px var(--serif); } .shop-name small { color: var(--paper-dim); font: 400 12px var(--sans); margin-left: 4px; }
.shop-power { color: var(--red-soft); font: 800 13px var(--serif); margin: 2px 0 4px; }
.shop-desc { font-size: 12.5px; color: var(--paper-dim); line-height: 1.55; margin: 0 0 8px; }
.shop-body .btn[data-poor] { opacity: .55; }
.codex-card.locked { opacity: .55; border-left-color: var(--line); }
.codex-card.locked img { filter: grayscale(1) brightness(.4); }
.codex-card.boss { border-left-color: var(--red); }
.codex-img { width: 84px; flex: 0 0 84px; height: 104px; display: grid; place-items: center; position: relative; }
.codex-img img { width: 84px; height: 104px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(143,211,240,.5)); }
.codex-img.pair img.saved { position: absolute; left: 0; top: 0; opacity: 0; animation: crossfade 6s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(240,207,122,.8)); }
@keyframes crossfade { 0%, 40% { opacity: 0; } 55%, 90% { opacity: 1; } 100% { opacity: 0; } }
.codex-name { font: 800 16px var(--serif); } .codex-name small { color: var(--paper-dim); font: 400 11px var(--sans); margin-left: 4px; }
.codex-desc { font-size: 12.5px; color: var(--paper-dim); line-height: 1.55; margin: 4px 0; }
.codex-saved { font-size: 12.5px; color: var(--paper); margin: 4px 0; line-height: 1.5; } .codex-saved b { color: var(--gold-2); }
.codex-quote { font: 700 12.5px var(--serif); color: var(--grace); margin: 4px 0 0; }
.codex-section { font: 30px/1 var(--brush); color: var(--gold-2); margin: 6px 0 4px; } .codex-section small { color: var(--paper-dim); font: 400 11.5px var(--sans); margin-left: 6px; }
.quest { background: var(--ink-3); border: 2px solid var(--line); border-left: 6px solid var(--blue); border-radius: 3px; padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--shadow-sm); }
.quest.done { border-left-color: var(--gold); } .quest.claimed { opacity: .5; }
.quest-head { display: flex; justify-content: space-between; font: 700 14.5px var(--serif); } .quest-head b { color: var(--gold-2); }
.quest-foot { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--paper-dim); }
.leaderboard { display: grid; gap: 6px; }
.lb-row { display: grid; grid-template-columns: 28px 26px 1fr auto; grid-template-areas: 'rank flag name grace' 'rank flag sub sub'; align-items: center; gap: 2px 8px; background: var(--ink-3); border: 2px solid var(--line); border-radius: 3px; padding: 8px 10px; }
.lb-row.me { border-color: var(--gold); background: #2a2214; }
.lb-rank { grid-area: rank; font: 800 16px var(--serif); color: var(--gold-2); text-align: center; }
.lb-flag { grid-area: flag; font-size: 18px; }
.lb-name { grid-area: name; font: 700 14px var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-grace { grid-area: grace; font: 800 13px var(--serif); color: var(--grace); }
.lb-row small { grid-area: sub; color: var(--paper-dim); font-size: 11px; }
.settings .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.settings .row small { display: block; color: var(--paper-dim); font-size: 11.5px; }
.settings .rank-row { flex-direction: column; align-items: stretch; }
.settings input[type=range] { width: 46%; accent-color: var(--red); }
.settings input[type=number], .settings input[type=text] { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 3px; padding: 6px 8px; font: 700 14px var(--serif); }
.settings input[type=number] { width: 84px; } .settings input[type=text] { width: 52%; }
.settings input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--red); }
.rank-perks { display: grid; gap: 6px; margin-top: 8px; }
.perk { background: var(--ink-3); border: 2px solid var(--line); border-left: 6px solid var(--line); border-radius: 3px; padding: 8px 10px; opacity: .55; }
.perk.on { opacity: 1; border-left-color: var(--gold); } .perk.now { border-color: var(--gold); }
.perk b { font: 800 14px var(--serif); color: var(--gold-2); margin-right: 6px; } .perk small { color: var(--paper-dim); font-size: 11px; } .perk span { display: block; font-size: 12.5px; color: var(--paper-2); margin-top: 3px; line-height: 1.5; }
.settings-note { font-size: 11.5px; color: var(--paper-dim); line-height: 1.6; margin-top: 18px; }
.recovery-box { margin-top: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.recovery-box .settings-note { margin-top: 6px; }
.recovery-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.recovery-actions .btn, .recovery-box > .btn { min-height: 44px; }
.recovery-code { display: block; margin: 0 0 12px; padding: 10px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 3px; font: 700 14px/1.6 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .04em; word-break: break-all; user-select: all; }
.recovery-label { display: block; margin: 6px 0; font-size: 13px; }
.settings input.recovery-input { width: 100%; min-height: 44px; margin-bottom: 8px; box-sizing: border-box; font: 700 13px ui-monospace, "Cascadia Mono", Consolas, monospace; }

/* ---------- 토스트 · 플래시: 종이 띠 ---------- */
#toasts { position: absolute; left: 12px; right: 12px; top: calc(150px + var(--safe-t)); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { max-width: 100%; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-left: 7px solid var(--red); border-radius: 3px; padding: 9px 14px; font: 700 13.5px/1.5 var(--serif); transform: translateY(-10px) rotate(-.4deg); opacity: 0; transition: all .28s; box-shadow: var(--shadow); text-align: left; }
.toast.show { transform: translateY(0) rotate(-.4deg); opacity: 1; }
.portrait-forms { display: flex; gap: 8px; margin: 10px 0 14px; }
.portrait-forms button { flex: 1; min-height: 44px; padding: 8px 10px; border: 1px solid #8e795b; border-radius: 4px; background: #201d28; color: #e4d8bd; font: 700 12px var(--sans); }
.portrait-forms button[aria-pressed="true"] { background: #e4d1a6; border-color: #f5e8c6; color: #261b23; }
.portrait-forms button:disabled { opacity: .45; cursor: default; }
.portrait-forms button:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 2px; }
.toast.warn { background: #f2d9cf; border-left-color: var(--red-2); }
#flash { position: absolute; inset: 0; pointer-events: none; z-index: 80; opacity: 0; transition: opacity .15s; }
#flash.on { opacity: 1; }

@media (min-width: 720px) {
  #app { max-width: 480px; margin: 0 auto; box-shadow: 0 0 0 2px var(--line), 0 0 80px rgba(0,0,0,.8); }
  body { background: #060509; }
}
#save-recovery-dialog { width: min(28rem, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); box-sizing: border-box; padding: 20px; overflow: auto; }
#save-recovery-dialog .model-image-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
#save-recovery-dialog .btn { width: 100%; min-width: 0; min-height: 44px; white-space: normal; overflow-wrap: anywhere; }