/* 여삼국지 모바일 — 메인화면 (요즘 모바일 게임 톤: 풀블리드 키아트 · 글래스 버튼 · 파티클) */
:root { --gold: #e8c268; --gold2: #fff0b3; --gold3: #b8892e; --ink: #120a0f; --paper: #f6eddc; --pink: #ff6b9d; --red: #c0392b; --glass: rgba(20, 12, 18, .55); --glass2: rgba(255, 255, 255, .08); --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 { margin: 0; height: 100%; background: #07050a; color: var(--paper); font-family: "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif; overflow: hidden; }
button { font-family: inherit; cursor: pointer; }

/* 폰 프레임: 데스크톱에선 가운데 390×844, 모바일에선 풀스크린 */
#phone { position: relative; width: 390px; height: 844px; margin: 0 auto; top: 50%; transform: translateY(-50%); overflow: hidden; border-radius: 44px; box-shadow: 0 0 0 10px #1a1a1e, 0 0 0 12px #3a3a40, 0 30px 80px rgba(0,0,0,.8); background: #0d0810; }
@media (max-width: 500px), (max-height: 900px) and (max-width: 500px) { #phone { width: 100%; height: 100%; top: 0; transform: none; border-radius: 0; box-shadow: none; } }
@media (max-height: 880px) and (min-width: 501px) { #phone { transform: translateY(-50%) scale(calc(100vh / 900)); } }
.mscreen { position: absolute; inset: 0; display: none; overflow: hidden; } .mscreen.active { display: block; animation: fadein .4s ease; }
@keyframes fadein { from { opacity: 0; } }

/* ── 배경 레이어 ── */
.bg-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #0b0614 0%, #2b0f2e 28%, #7a2a3a 52%, #d9673a 68%, #f2b26b 78%, #2a1420 100%); }
.bg-art { position: absolute; inset: 0; background-size: cover; background-position: center 30%; opacity: 0; transition: opacity 1.2s; } .bg-art.on { opacity: .95; }
.bg-rays { position: absolute; left: 50%; top: 44%; width: 1400px; height: 1400px; transform: translate(-50%, -50%); background: conic-gradient(from 0deg, transparent 0deg, rgba(255,220,150,.10) 8deg, transparent 16deg, transparent 40deg, rgba(255,220,150,.08) 48deg, transparent 56deg, transparent 90deg, rgba(255,220,150,.12) 96deg, transparent 104deg, transparent 150deg, rgba(255,220,150,.08) 158deg, transparent 166deg, transparent 220deg, rgba(255,220,150,.1) 228deg, transparent 236deg, transparent 300deg, rgba(255,220,150,.08) 306deg, transparent 314deg); animation: spin 70s linear infinite; mix-blend-mode: screen; pointer-events: none; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.bg-mtn { position: absolute; left: 0; right: 0; top: 58%; height: 30%; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 250' preserveAspectRatio='none'><path d='M0 120 L40 90 L70 110 L110 60 L150 100 L190 70 L230 105 L270 55 L300 95 L340 75 L390 110 L390 250 L0 250Z' fill='%23160a14' opacity='.95'/><path d='M0 160 L50 140 L90 155 L130 125 L180 150 L220 130 L260 150 L310 120 L350 145 L390 135 L390 250 L0 250Z' fill='%230d0710'/><g fill='%23221018'><rect x='150' y='98' width='6' height='30'/><rect x='180' y='90' width='5' height='36'/><path d='M140 100 L166 100 L153 88Z'/><path d='M172 92 L194 92 L183 80Z'/></g></svg>") bottom / 100% 100% no-repeat; pointer-events: none; }
#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, transparent 45%, rgba(5,2,8,.55) 100%), linear-gradient(180deg, rgba(5,2,8,.55) 0%, transparent 22%, transparent 60%, rgba(5,2,8,.85) 100%); pointer-events: none; }

/* ── 키아트 ── */
.keyart { position: absolute; left: 50%; bottom: 40px; width: 120%; height: 74%; transform: translateX(-50%); display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.keyart img { max-height: 100%; max-width: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 20px 40px rgba(0,0,0,.7)); animation: float 6s ease-in-out infinite; opacity: 0; transition: opacity .6s, transform .6s; }
.keyart img.on { opacity: 1; } .keyart img.swap { opacity: 0; transform: translateX(30px); }
.keyart img.whitebg { mix-blend-mode: multiply; } /* 누끼 전 임시: 흰 배경만 사라지게 */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.keyart-glow { position: absolute; left: 50%; bottom: 0; width: 70%; height: 40%; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 100%, rgba(255,200,120,.35), transparent 65%); filter: blur(10px); }

/* ── 상단 로고 ── */
.m-top { position: absolute; left: 0; right: 0; top: calc(var(--safe-t) + 18px); display: flex; justify-content: space-between; align-items: flex-start; padding: 0 18px; }
.m-logo-han { font-family: "Noto Serif KR", serif; font-weight: 900; font-size: 40px; line-height: 1; letter-spacing: 4px; color: #fff; text-shadow: 0 0 24px rgba(232,194,104,.55), 0 4px 0 #6b1f1f, 0 8px 24px rgba(0,0,0,.6); }
.m-logo-ko { font-weight: 900; font-size: 15px; letter-spacing: 12px; color: var(--gold); margin: 6px 0 0 3px; text-shadow: 0 2px 6px rgba(0,0,0,.7); }
.m-logo-tag { font-size: 11px; color: rgba(255,240,200,.85); letter-spacing: 2px; margin-top: 4px; }
.m-icon { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: var(--glass); color: #fff; font-size: 18px; backdrop-filter: blur(8px); }

/* ── 대사 말풍선 ── */
.m-line { position: absolute; left: 18px; right: 18px; bottom: calc(var(--safe-b) + 200px); z-index: 3; padding: 12px 14px; background: var(--glass); border: 1px solid rgba(255,255,255,.18); border-left: 3px solid var(--gold); border-radius: 12px; backdrop-filter: blur(10px); font-size: 13px; line-height: 1.5; box-shadow: 0 8px 24px rgba(0,0,0,.4); animation: pop .35s ease; }
.m-line b { color: var(--gold2); margin-right: 8px; } .m-line.hidden { display: none; }
@keyframes pop { from { transform: translateY(6px); opacity: 0; } }

/* ── 캐릭터 스트립 ── */
.m-strip { position: absolute; right: 12px; top: 200px; display: flex; flex-direction: column; gap: 10px; }
.m-strip .av { width: 54px; height: 54px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); background-size: 160%; background-position: center 18%; box-shadow: 0 6px 16px rgba(0,0,0,.6); position: relative; opacity: .8; transition: .2s; }
.m-strip .av.on { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,194,104,.35), 0 6px 16px rgba(0,0,0,.6); transform: scale(1.08); opacity: 1; }
.m-strip .av span { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); background: #120a0f; color: #fff; font-size: 9px; padding: 1px 6px; border-radius: 8px; white-space: nowrap; border: 1px solid rgba(255,255,255,.25); }

/* ── 메뉴 ── */
.m-menu { position: absolute; left: 18px; right: 18px; bottom: calc(var(--safe-b) + 48px); display: flex; flex-direction: column; gap: 10px; }
.m-primary { position: relative; width: 100%; border: none; border-radius: 16px; padding: 14px 16px; background: linear-gradient(180deg, #ffe7a3 0%, #e8c268 45%, #b8892e 100%); color: #3a1d0a; box-shadow: 0 10px 30px rgba(232,194,104,.35), inset 0 1px 0 #fff8dc, inset 0 -3px 0 rgba(0,0,0,.2); text-align: left; overflow: hidden; }
.m-primary span { display: block; font-size: 20px; font-weight: 900; letter-spacing: 2px; } .m-primary small { display: block; font-size: 11px; opacity: .8; margin-top: 2px; }
.m-primary::after { content: '›'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 30px; font-weight: 300; }
.m-primary::before { content: ''; position: absolute; left: -60%; top: 0; width: 40%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent); animation: shine 3.2s ease-in-out infinite; }
@keyframes shine { 0% { left: -60%; } 40%, 100% { left: 120%; } }
.m-primary:active { transform: scale(.98); }
.m-row { display: flex; gap: 8px; }
.m-sec { flex: 1; border: 1px solid rgba(255,255,255,.22); border-radius: 14px; padding: 10px 6px; background: var(--glass); color: #fff; font-size: 13px; font-weight: 700; backdrop-filter: blur(10px); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.m-sec i { font-style: normal; font-size: 18px; color: var(--gold); } .m-sec:disabled { opacity: .45; } .m-sec:active { background: rgba(255,255,255,.15); }
.m-foot { position: absolute; left: 18px; right: 18px; bottom: calc(var(--safe-b) + 16px); display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,.55); }
.m-foot .tap { animation: blink 2.4s ease-in-out infinite; } @keyframes blink { 50% { opacity: .35; } }

/* ── 공통 바 · 서브 화면 ── */
.m-bar { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--safe-t) + 56px); padding: var(--safe-t) 12px 0; display: flex; align-items: center; gap: 10px; background: linear-gradient(#1c0f1a, #120a0f); border-bottom: 1px solid rgba(232,194,104,.35); z-index: 2; }
.m-bar h2 { margin: 0; font-size: 17px; letter-spacing: 2px; color: var(--gold2); flex: 1; } .m-bar-r { font-size: 12px; color: rgba(255,255,255,.6); }
.m-back { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: var(--glass2); color: #fff; font-size: 24px; line-height: 1; }
#scr-dogam, #scr-lobby { background: radial-gradient(ellipse at 50% 20%, #3a1830, #0d0810 70%); }
.dogam { position: absolute; inset: calc(var(--safe-t) + 56px) 0 0; overflow-x: auto; overflow-y: hidden; display: flex; gap: 14px; padding: 16px; scroll-snap-type: x mandatory; }
.dg-card { flex: 0 0 300px; scroll-snap-align: center; border-radius: 22px; overflow: hidden; position: relative; background: linear-gradient(180deg, #2a1024, #120a0f); border: 1px solid rgba(232,194,104,.4); box-shadow: 0 16px 40px rgba(0,0,0,.6); }
.dg-art { height: 62%; background: radial-gradient(ellipse at 50% 90%, rgba(255,200,120,.25), transparent 60%); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.dg-art img { max-height: 100%; max-width: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 10px 20px rgba(0,0,0,.6)); }
.dg-info { padding: 12px 16px 16px; } .dg-name { font-size: 22px; font-weight: 900; color: #fff; } .dg-name small { font-size: 12px; color: var(--gold); margin-left: 6px; }
.dg-per { font-size: 12px; color: rgba(255,255,255,.7); margin: 2px 0 8px; }
.dg-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .dg-stats div { background: rgba(255,255,255,.07); border-radius: 8px; padding: 6px 0; text-align: center; font-size: 11px; color: rgba(255,255,255,.7); } .dg-stats b { display: block; font-size: 16px; color: var(--gold2); }
.dg-love { margin-top: 10px; font-size: 12px; display: flex; align-items: center; gap: 8px; } .dg-love .bar { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; } .dg-love .bar div { height: 100%; background: linear-gradient(90deg, #ff6b9d, #ffb3c6); }
.dg-skills { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; } .dg-skills span { font-size: 10px; background: rgba(232,194,104,.15); border: 1px solid rgba(232,194,104,.4); color: var(--gold2); border-radius: 8px; padding: 2px 7px; }
.dg-weapon { position: absolute; top: 12px; left: 12px; background: var(--glass); border: 1px solid rgba(255,255,255,.2); border-radius: 10px; padding: 4px 10px; font-size: 11px; color: var(--gold2); backdrop-filter: blur(6px); }
.lobby { position: absolute; inset: calc(var(--safe-t) + 56px) 0 0; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: rgba(255,255,255,.75); gap: 12px; }
.lobby .row { display: flex; gap: 8px; } .lobby .row img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; object-position: center 15%; border: 2px solid var(--gold); }
.lobby h3 { margin: 0; color: var(--gold2); font-size: 20px; }

/* ── 모달·토스트 ── */
#m-modal { position: absolute; inset: 0; display: none; align-items: flex-end; background: rgba(0,0,0,.6); z-index: 20; } #m-modal.open { display: flex; }
.m-sheet { width: 100%; background: linear-gradient(#2a1424, #150a12); border-radius: 22px 22px 0 0; padding: 18px 18px calc(var(--safe-b) + 18px); border-top: 1px solid rgba(232,194,104,.5); animation: up .3s ease; max-height: 80%; overflow: auto; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.m-sheet h3 { margin: 0 0 10px; color: var(--gold2); font-size: 17px; } .m-sheet p { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.8); }
.m-sheet .opt { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 14px; }
.tog { width: 46px; height: 26px; border-radius: 13px; background: rgba(255,255,255,.15); border: none; position: relative; } .tog::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: .2s; } .tog.on { background: var(--gold); } .tog.on::after { left: 23px; }
.m-sheet .close { width: 100%; margin-top: 14px; padding: 12px; border-radius: 12px; border: none; background: var(--gold); color: #3a1d0a; font-weight: 900; font-size: 15px; }
#m-toast { position: absolute; left: 50%; top: 90px; transform: translateX(-50%); z-index: 30; pointer-events: none; }
.m-toast { background: rgba(0,0,0,.8); color: #fff; padding: 8px 14px; border-radius: 20px; font-size: 12px; border: 1px solid rgba(232,194,104,.5); opacity: 0; transition: .25s; } .m-toast.show { opacity: 1; }

/* ── 운영 화면 B안: 알현실 중심 · 이미지 UI ── */
#scr-mstrategy { background: #0d0810; display: none; flex-direction: column; } #scr-mstrategy.active { display: flex; }
.b-top { display: flex; align-items: center; gap: 8px; padding: calc(var(--safe-t) + 10px) 10px 4px; background: linear-gradient(#2a1424, #150a12); }
.b-lord { flex: 0 0 auto; padding: 3px; background: url("../assets/ui/portrait_frame_cut.png") center/100% 100% no-repeat, linear-gradient(#b8892e, #6b1f1f); border-radius: 4px; cursor: pointer; } .b-lord .portrait { border-radius: 2px; width: 40px !important; height: 40px !important; }
.b-date { flex: 1; min-width: 0; } .b-date b { display: block; font-size: 16px; color: var(--gold2); line-height: 1.1; } .b-date span { font-size: 10px; color: rgba(255,255,255,.65); }
.b-city { background: #1f3f7a; color: #fff; border: 1px solid #7aa2ff; padding: 5px 12px; border-radius: 7px; font-size: 14px; font-weight: 700; }
.b-res { display: flex; gap: 4px; padding: 3px 8px 6px; background: #150a12; font-size: 11px; white-space: nowrap; overflow-x: auto; border-bottom: 2px solid #b8892e; }
.b-res span { background: rgba(0,0,0,.45); border: 1px solid rgba(232,194,104,.35); border-radius: 6px; padding: 2px 7px; color: rgba(255,255,255,.8); } .b-res b { color: #fff; }
.b-mapouter { position: relative; flex: 0 0 118px; border-bottom: 2px solid #b8892e; transition: flex-basis .25s ease; }
#scr-mstrategy.map-open .b-mapouter { flex-basis: 430px; }
.b-mapwrap { position: absolute; inset: 0; overflow: auto; background: #6f8a5a; -webkit-overflow-scrolling: touch; }
.b-maptoggle { position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,.6); border: 1px solid var(--gold); color: var(--gold2); border-radius: 8px; padding: 3px 9px; font-size: 11px; z-index: 3; }
.ms-map { position: relative; width: 760px; height: 560px; transform: scale(.72); transform-origin: 0 0; margin-bottom: calc(-560px * .28); margin-right: calc(-760px * .28); background: #8ea56f; }
.ms-mapbg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ms-map .map-lines { position: absolute; inset: 0; width: 100%; height: 100%; } .ms-map .map-lines line { stroke: rgba(90,60,30,.45); stroke-width: 4; stroke-dasharray: 8 6; }
.mcity { position: absolute; transform: translate(-50%, -60%); text-align: center; cursor: pointer; width: 96px; }
.c-castle { width: 56px; height: 48px; margin: 0 auto; background: url("../assets/ui/castle_cut.png") center/contain no-repeat, radial-gradient(ellipse at 50% 80%, rgba(0,0,0,.25), transparent 70%); filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)); }
.c-flag { position: absolute; left: 62px; top: -10px; width: 3px; height: 34px; background: #4a2f1a; } .c-flag i { position: absolute; left: 3px; top: 0; width: 22px; height: 14px; background: var(--c); clip-path: polygon(0 0, 100% 0, 80% 50%, 100% 100%, 0 100%); box-shadow: 1px 1px 2px rgba(0,0,0,.4); }
.mcity.mine .c-castle { filter: drop-shadow(0 0 4px #ffe066) drop-shadow(0 3px 3px rgba(0,0,0,.45)); } .mcity.sel .c-castle { transform: scale(1.15); filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 10px #ffd43b); }
.mcity .c-name { font-weight: 900; font-size: 18px; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000, 1px 1px 0 #000; margin-top: -2px; } .mcity .c-owner { font-size: 12px; color: #ffe8b0; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.mcity .c-target { position: absolute; top: -12px; right: 6px; background: #c0392b; color: #fff; border-radius: 50%; width: 26px; height: 26px; font-size: 15px; line-height: 26px; border: 2px solid #fff; }
/* 알현실 */
.b-hall { position: relative; flex: 1; min-height: 0; overflow: hidden; background: url("../assets/ui/hall.png") center bottom/cover no-repeat, radial-gradient(ellipse at 50% 20%, #6d3a2a 0%, #3b1f17 60%), #2b1510; }
.b-hall::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.3), transparent 22%, transparent 72%, rgba(0,0,0,.5)); pointer-events: none; }
.rp5-scroll { height: 30px; padding: 0 8px 0 34px; background: url("../assets/ui/scroll_cut.png") 2px center/28px 28px no-repeat, rgba(246,237,220,.92); border: 1px solid #b8892e; border-radius: 4px; color: #2b1a0a; font-size: 12px; line-height: 30px; } .rp5-scroll b { font-size: 17px; color: #c0392b; } .rp5-scroll small { color: #6b5a45; }
.b-scroll { position: absolute; left: 8px; top: 8px; z-index: 4; }
.b-throne { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); text-align: center; z-index: 1; cursor: pointer; }
.b-throne.sit { top: auto; bottom: 45%; left: 0; right: 0; transform: none; z-index: auto; }
.b-sit { display: block; height: 150px; width: auto; margin: 0 auto; filter: drop-shadow(0 0 12px rgba(255,196,90,.4)) drop-shadow(0 5px 6px rgba(0,0,0,.65)); }
.b-throne .portrait { border: 2px solid #ffd43b; box-shadow: 0 0 14px rgba(255,212,59,.7), 0 6px 12px rgba(0,0,0,.6); border-radius: 6px; margin: 0 auto; }
.b-throne span { position: relative; z-index: 9; display: inline-block; margin-top: 2px; background: rgba(0,0,0,.72); border: 1px solid var(--gold); border-radius: 7px; padding: 1px 8px; font-size: 11px; font-weight: 700; color: #ffe066; text-shadow: 0 1px 2px #000; } .b-throne span small { color: rgba(255,255,255,.7); margin-left: 4px; font-size: 9px; }
.b-bubble { position: absolute; right: 8px; top: 6px; max-width: 52%; z-index: 4; background: rgba(20,12,18,.72); border: 1px solid rgba(255,255,255,.22); border-left: 3px solid var(--gold); border-radius: 10px; padding: 7px 9px; font-size: 11px; line-height: 1.4; backdrop-filter: blur(6px); animation: pop .35s ease; } .b-bubble b { display: block; color: var(--gold2); font-size: 11px; } .b-bubble.hidden { display: none; }
/* 회의실 정렬: 옥좌를 마주보고 좌·우 3명씩. 뒤열은 작고 안쪽, 앞열은 크고 바깥쪽(원근) */
.b-figs { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.b-fig { transition: opacity .2s; }
/* 지도를 펼치면 알현실이 좁아지므로 뒤 두 줄은 비움 */
#scr-mstrategy.map-open .b-fig.r-0, #scr-mstrategy.map-open .b-fig.r-1, #scr-mstrategy.map-open .b-bubble { opacity: 0; pointer-events: none; }
.b-fig { position: absolute; width: 128px; text-align: center; pointer-events: auto; cursor: pointer; transform: translateX(-50%); }
.b-fig.r-0 { --h: 23%; bottom: 33%; } .b-fig.r-1 { --h: 29%; bottom: 17%; } .b-fig.r-2 { --h: 36%; bottom: 0%; }
.b-fig.r-0.c-l { left: 31%; } .b-fig.r-0.c-r { left: 69%; }
.b-fig.r-1.c-l { left: 17%; } .b-fig.r-1.c-r { left: 83%; }
.b-fig.r-2.c-l { left: 12%; } .b-fig.r-2.c-r { left: 88%; }
.b-body { height: var(--h); display: flex; align-items: flex-end; justify-content: center; } .b-body img { height: 100%; width: auto; max-width: 128px; display: block; filter: drop-shadow(0 4px 5px rgba(0,0,0,.7)); transition: transform .15s; }
.b-fig.c-r .b-body img { transform: scaleX(-1); } .b-fig.c-r:active .b-body img { transform: scaleX(-1) translateY(-4px); }
.b-fig:active .b-body img { transform: translateY(-4px); }
.b-bust { width: 62px; height: var(--h); border: 2px solid #ffd43b; border-radius: 8px 8px 4px 4px; overflow: hidden; background: #2a1424; box-shadow: 0 6px 10px rgba(0,0,0,.6); } .b-bust .portrait { width: 100% !important; height: 100% !important; object-fit: cover; }
.b-none { width: 66px; height: var(--h); border: 2px dashed rgba(255,255,255,.45); border-radius: 8px; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; } .b-none i { font-style: normal; font-size: 22px; color: rgba(255,255,255,.6); }
.b-tag { display: inline-block; margin-top: 2px; background: rgba(0,0,0,.7); border: 1px solid var(--gold); color: var(--gold2); border-radius: 7px; padding: 1px 6px; font-size: 10px; font-weight: 700; white-space: nowrap; text-shadow: 0 1px 2px #000; }
.b-fig.empty .b-tag { color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.35); }
.b-fig { padding-top: 16px; } .b-fig .b-tag { position: absolute; top: 0; left: 50%; transform: translateX(-50%); margin: 0; z-index: 9; }
.b-cmds { display: flex; gap: 3px; padding: 6px 6px calc(var(--safe-b) + 8px); background: #0d0810; border-top: 2px solid #b8892e; }
.btn-wood { flex: 1; height: 38px; border: none; border-radius: 4px; color: #2b1a0a; font-weight: 900; font-size: 14px; text-shadow: 0 1px 0 rgba(255,255,255,.4); background: url("../assets/ui/btn_wood_cut.png") center/100% 100% no-repeat, linear-gradient(#e6d3a3, #c9a95a); box-shadow: 0 2px 0 rgba(0,0,0,.4); padding: 0; }
.btn-wood.rest { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.5); filter: hue-rotate(-25deg) saturate(1.6); } .btn-wood:active { transform: translateY(1px); }

/* ── 시트 내부 공통 ── */
.m-sheet.tall { max-height: 88%; } .sh-btns { display: flex; gap: 8px; margin-top: 12px; } .sh-btn { flex: 1; padding: 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; font-weight: 700; font-size: 14px; } .sh-btn.primary { background: var(--gold); color: #3a1d0a; border-color: transparent; } .sh-btn:disabled { opacity: .4; }
.sh-body p { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.85); margin: 6px 0; } .hint { font-size: 11px; color: rgba(255,255,255,.55); } .quote, .q { font-style: italic; color: var(--gold2); background: rgba(255,255,255,.06); border-left: 3px solid var(--gold); padding: 8px 10px; border-radius: 6px; } .q.big { font-size: 16px; }
.pick { display: flex; flex-direction: column; gap: 6px; } .pk { display: flex; gap: 10px; align-items: center; text-align: left; width: 100%; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #fff; border-radius: 12px; padding: 8px 10px; font-size: 13px; } .pk small { display: block; color: rgba(255,255,255,.6); font-size: 11px; } .pk.on { border-color: var(--gold); background: rgba(232,194,104,.15); } .pk:disabled { opacity: .4; } .pk .portrait { flex-shrink: 0; }
.hearts i { font-style: normal; color: #6b5a60; font-size: 12px; } .hearts i.on { color: var(--pink); } .stg { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 10px; font-weight: 700; color: #fff; } .s-cold { background: #74a0c8; } .s-wary { background: #8d8d8d; } .s-smile { background: #f59f00; } .s-blush { background: #f06595; } .s-heart { background: #e03131; }
.talk-row { display: flex; gap: 12px; align-items: flex-start; } .talk-row .portrait { flex-shrink: 0; } .talk-scene { display: flex; gap: 12px; align-items: center; }
.cc-fac { display: flex; flex-wrap: wrap; gap: 6px 10px; background: linear-gradient(#1f3f7a, #122a56); padding: 8px 10px; border-radius: 8px; border-left: 8px solid var(--c); font-size: 12px; margin-bottom: 8px; } .cc-fac b { color: var(--gold2); } .tag { background: var(--green, #2f9e44); border-radius: 8px; padding: 0 6px; }
.cc-body { display: flex; gap: 10px; } .cc-kv { flex: 1; border-collapse: collapse; font-size: 12px; } .cc-kv th { text-align: left; color: rgba(255,255,255,.55); font-weight: 400; padding: 3px 4px; } .cc-kv td { padding: 3px 4px; font-weight: 700; color: #fff; }
.cc-gens { margin-top: 8px; } .cc-gen { padding: 6px 4px; border-bottom: 1px dashed rgba(255,255,255,.12); font-size: 12px; }
.gd-top { display: flex; gap: 12px; } .gd-name { font-size: 20px; font-weight: 900; color: #fff; } .gd-name small { color: var(--gold); } .gd-per { font-size: 11px; color: rgba(255,255,255,.6); margin: 2px 0 6px; } .gd-love { margin-top: 6px; font-size: 13px; } .gd-army { font-size: 11px; color: rgba(255,255,255,.7); margin-top: 4px; }
.ga { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; } .ga > b { color: var(--gold); width: 36px; font-size: 12px; } .ga button { border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; border-radius: 8px; padding: 6px 10px; font-size: 12px; } .ga button.on { background: var(--gold); color: #3a1d0a; } .ga button.primary { background: #c0392b; } .ga button:disabled { opacity: .4; }
.news { padding-left: 18px; font-size: 13px; line-height: 1.7; } .news .warn { color: #ff8787; } .sub { margin: 10px 0 4px; font-weight: 700; color: var(--gold2); font-size: 12px; } .frow { font-size: 12px; padding: 4px 0; border-bottom: 1px dashed rgba(255,255,255,.1); } .frow i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; } .frow em { font-style: normal; background: rgba(232,194,104,.2); color: var(--gold2); border-radius: 6px; padding: 0 5px; font-size: 10px; margin-left: 4px; }
.res { font-size: 34px; margin: 0; text-align: center; } .res.win { color: var(--gold2); } .res.lose { color: #9aa; } .pris { display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,.06); border-radius: 12px; padding: 8px; margin-top: 8px; font-size: 12px; } .end-row { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
label select { background: #2a1424; color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; padding: 4px; }

/* ── 전투(궁수의 전설식 세로 전장) ── */
#scr-mbattle { background: #000; } #mb-wrap { position: absolute; left: 0; top: 0; width: 720px; height: 1280px; transform-origin: 0 0; }
#battle-canvas { position: absolute; inset: 0; width: 720px; height: 1280px; touch-action: none; }
#battle-hud { position: absolute; inset: 0; pointer-events: none; font-family: inherit; }
#battle-hud button { pointer-events: auto; }
.bh-top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: 6px 12px; background: linear-gradient(rgba(0,0,0,.55), transparent); color: #fff; }
.bh-side { font-weight: 700; font-size: 14px; width: 260px; } .bh-def { text-align: right; } .bh-base { height: 8px; background: rgba(255,255,255,.25); border-radius: 4px; margin-top: 4px; overflow: hidden; } .bh-base div { height: 100%; }
.bh-center { text-align: center; } #bh-day { font-size: 18px; font-weight: 900; text-shadow: 0 2px 4px #000; } .bh-btns { display: flex; gap: 6px; justify-content: center; margin: 4px 0; } .bh-btns button { padding: 3px 8px; font-size: 11px; } .bh-kills { font-size: 12px; }
.bh-heroes { position: absolute; left: 8px; bottom: 34px; display: flex; gap: 6px; pointer-events: auto; }
.bh-card { display: flex; gap: 6px; background: rgba(20,14,10,.85); border: 2px solid rgba(255,255,255,.2); border-radius: 10px; padding: 5px; width: 214px; color: #fff; cursor: pointer; }
.bh-card.sel { border-color: #ffd43b; box-shadow: 0 0 12px rgba(255,212,59,.5); } .bh-card.dead { opacity: .5; filter: grayscale(1); } .bh-card.auto .bh-name::after { content: ' AUTO'; font-size: 9px; color: #aaa; }
.bh-port .portrait { border-radius: 50%; } .bh-info { flex: 1; min-width: 0; } .bh-name { font-weight: 900; font-size: 12px; } .bh-lane { font-size: 10px; color: #ffd43b; }
.bh-hp { height: 6px; background: #444; border-radius: 3px; margin: 3px 0; overflow: hidden; } .bh-hp div { height: 100%; background: #51cf66; } .bh-pool { font-size: 10px; color: #ccc; }
.bh-skills { display: flex; gap: 3px; margin-top: 3px; } .bh-sk { position: relative; flex: 1; background: #2b6cb0; border-radius: 5px; padding: 2px 3px; font-size: 9px; overflow: hidden; line-height: 1.15; }
.bh-sk span { font-weight: 900; color: #ffd43b; } .bh-sk em { display: block; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bh-sk i { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.6); } .bh-sk.cd { filter: saturate(.3); }
.bh-enemies { position: absolute; right: 8px; bottom: 34px; display: flex; gap: 6px; } .bh-ecard { display: flex; gap: 6px; background: rgba(60,10,10,.8); border-radius: 8px; padding: 4px; color: #fff; width: 128px; font-size: 10px; } .bh-ecard.dead { opacity: .45; } .bh-ecard .bh-hp div { background: #ff6b6b; }
.bh-help { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.75); font-size: 11px; text-shadow: 0 1px 2px #000; }
#bt-end { position: absolute; top: 260px; left: 50%; transform: translateX(-50%); font-size: 22px; padding: 14px 40px; background: linear-gradient(#ffe38a, #e0b53b); border-color: #9c7a1e; }


/* ── 전체지도 미니맵 (삼국지5 정보 화면식) ── */
.b-minibtn { position: absolute; right: 8px; top: 8px; z-index: 4; width: 38px; height: 38px; border-radius: 8px; border: 2px solid var(--gold); background: rgba(20,12,18,.75); color: var(--gold2); font-size: 20px; line-height: 1; padding: 0; backdrop-filter: blur(4px); box-shadow: 0 3px 8px rgba(0,0,0,.5); }
.b-minimap[hidden] { display: none !important; }
.b-minimap { position: absolute; inset: 0; z-index: 15; background: rgba(8,5,10,.9); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: calc(var(--safe-t) + 12px) 10px calc(var(--safe-b) + 12px); animation: fadein .25s ease; }
.mm-head { width: 100%; display: flex; justify-content: space-between; align-items: baseline; color: var(--gold2); } .mm-head b { font-size: 18px; } .mm-head span { font-size: 11px; color: rgba(255,255,255,.65); }
.mm-wrap { position: relative; border: 3px solid #b8892e; border-radius: 6px; background: #d9c59a url("../assets/ui/map.png") center/cover; box-shadow: inset 0 0 0 2px #6b4a1a, 0 10px 30px rgba(0,0,0,.6); }
.mm-wrap::before { content: ''; position: absolute; inset: 0; background: rgba(217,197,154,.45); }
.mm-lines { position: absolute; inset: 0; width: 100%; height: 100%; } .mm-lines line { stroke: #5a3a1a; stroke-width: 2.5; opacity: .8; }
.mm-city { position: absolute; transform: translate(-50%, -50%); text-align: center; cursor: pointer; width: 18px; }
.mm-city i { display: block; width: 17px; height: 17px; margin: 0 auto; border: 1.5px solid #2b1a0a; border-radius: 3px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.5); font-style: normal; font-size: 9px; font-weight: 900; color: #fff; line-height: 14px; text-shadow: 0 1px 1px #000; }
.mm-city span { position: absolute; left: 50%; top: 17px; transform: translateX(-50%); font-size: 10px; font-weight: 800; color: #fff; background: rgba(20,12,8,.8); border-radius: 4px; padding: 0 4px; white-space: nowrap; z-index: 3; }
.mm-city.mine i { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5), 0 0 0 2px #ffd43b; } .mm-city.sel { z-index: 4; } .mm-city.sel i { transform: scale(1.35); box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ffd43b; }
.mm-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 10px; padding: 6px 10px; font-size: 12px; color: #fff; } .mm-info span { color: rgba(255,255,255,.75); } .mm-info b { color: var(--gold2); }
.mm-go { margin-left: auto; background: var(--gold); color: #3a1d0a; border: none; border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 700; }
.mm-bar { display: flex; gap: 6px; width: 100%; } .mm-bar .btn-jade { flex: 1; height: 36px; } .mm-bar .btn-jade.on { box-shadow: 0 0 0 2px #ffd43b; } .mm-bar .btn-wood { flex: 1; height: 36px; }
.mm-legend { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; font-size: 9px; color: #fff; max-height: 58px; overflow: auto; } .mm-legend span { background: rgba(255,255,255,.08); border-radius: 6px; padding: 2px 6px; } .mm-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }

/* ── 궁수의 전설식 전투 HUD (720×1280 논리 좌표 안) ── */
.ar-top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 14px; background: linear-gradient(rgba(0,0,0,.7), transparent); color: #fff; }
.ar-side { width: 230px; font-size: 22px; font-weight: 900; text-shadow: 0 2px 4px #000; } .ar-side span { display: block; font-size: 18px; font-weight: 700; color: rgba(255,255,255,.9); } .ar-d { text-align: right; }
.ar-bar { height: 10px; background: rgba(255,255,255,.2); border-radius: 5px; margin-top: 4px; overflow: hidden; } .ar-bar i { display: block; height: 100%; background: #4dabf7; border-radius: 5px; transition: width .2s; } .ar-d .ar-bar i { background: #ff6b6b; margin-left: auto; }
.ar-mid { text-align: center; } #ar-day { font-size: 26px; font-weight: 900; text-shadow: 0 2px 4px #000; } .ar-btns { display: flex; gap: 6px; justify-content: center; margin-top: 6px; } .ar-btns button { background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 8px; padding: 6px 12px; font-size: 16px; font-weight: 700; } .ar-btns button.on { background: var(--gold); color: #3a1d0a; border-color: transparent; }
.ar-heroes { position: absolute; left: 12px; bottom: 150px; display: flex; flex-direction: column; gap: 8px; pointer-events: auto; } .ar-tok { width: 56px; height: 56px; padding: 0; border-radius: 50%; border: 3px solid rgba(255,255,255,.5); background: #222; overflow: hidden; } .ar-tok .portrait { width: 100% !important; height: 100% !important; } .ar-tok.on { border-color: #ffd43b; box-shadow: 0 0 12px #ffd43b; } .ar-tok.dead { opacity: .3; filter: grayscale(1); }
.ar-cmd { position: absolute; left: 80px; right: 12px; bottom: 60px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.2); border-radius: 12px; padding: 8px 12px; color: #fff; font-size: 18px; } .ar-cmd small { font-size: 14px; color: rgba(255,255,255,.75); } .ar-hp { height: 10px; background: rgba(255,255,255,.2); border-radius: 5px; margin: 6px 0 3px; overflow: hidden; } .ar-hp i { display: block; height: 100%; background: #51cf66; } .ar-xp { height: 5px; background: rgba(255,255,255,.15); border-radius: 3px; overflow: hidden; } .ar-xp i { display: block; height: 100%; background: #ffd43b; } .ar-abs { display: block; margin-top: 4px; font-size: 13px; color: #69db7c; }
.ar-msg { position: absolute; top: 470px; left: 0; right: 0; text-align: center; font-size: 30px; font-weight: 900; color: #ffd43b; text-shadow: 0 2px 6px #000, 0 0 12px rgba(0,0,0,.8); opacity: 0; transition: opacity .2s; } .ar-msg.show { opacity: 1; }
.ar-hint { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font-size: 16px; color: rgba(255,255,255,.85); text-shadow: 0 1px 3px #000; transition: opacity 1s; } .ar-hint.fade { opacity: 0; }
.ar-lvup { position: absolute; inset: 0; background: rgba(0,0,0,.72); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; pointer-events: auto; } .ar-lvup[hidden] { display: none; }
/* 궁수의 전설식 레벨업 카드 */
.ar-lv-banner { background: linear-gradient(#ffe08a, #e8c268); color: #3a1d0a; font-size: 26px; font-weight: 900; padding: 6px 42px; border-radius: 8px; box-shadow: 0 4px 0 #a5822f, 0 8px 20px rgba(0,0,0,.6); transform: skewX(-6deg); }
.ar-lv-title { font-size: 20px; font-weight: 700; color: #fff; text-shadow: 0 2px 6px #000; margin-top: -6px; }
.ar-cards { display: flex; flex-direction: column; gap: 12px; width: 80%; } .ar-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: linear-gradient(#2a1a2e, #17101a); border: 3px solid var(--rc, #69db7c); border-radius: 14px; padding: 20px 18px 16px; color: #fff; text-align: left; box-shadow: 0 0 18px color-mix(in srgb, var(--rc, #69db7c) 55%, transparent), 0 8px 20px rgba(0,0,0,.6); animation: lvcard .3s ease both; }
.ar-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: 11px; background: linear-gradient(transparent 55%, color-mix(in srgb, var(--rc, #69db7c) 22%, transparent)); pointer-events: none; }
.ar-rar { position: absolute; left: 14px; top: -12px; font-style: normal; font-size: 13px; font-weight: 900; color: #1a1216; background: var(--rc, #69db7c); border-radius: 6px; padding: 2px 10px; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
@keyframes lvcard { from { opacity: 0; transform: translateY(24px) scale(.94); } } .ar-card b { font-size: 26px; color: var(--gold2); } .ar-card span { font-size: 18px; color: rgba(255,255,255,.85); } .ar-card small { font-size: 13px; color: rgba(255,255,255,.5); } .ar-card:active { transform: scale(.98); }

/* 개전 대화 */
.ar-talk { position: absolute; inset: 0; pointer-events: auto; background: rgba(0,0,0,.35); } .ar-talk[hidden] { display: none; }
.ar-talk-box { position: absolute; left: 14px; right: 14px; bottom: 90px; display: flex; gap: 14px; align-items: center; background: rgba(20,12,18,.94); border: 2px solid var(--gold); border-radius: 18px; padding: 14px 16px; color: #fff; animation: pop .25s ease; } .ar-talk-box.foe { border-color: #ff6b6b; flex-direction: row-reverse; text-align: right; }
.ar-talk-face .portrait { width: 96px !important; height: 96px !important; border: 3px solid var(--gold); border-radius: 50%; } .ar-talk-box.foe .ar-talk-face .portrait { border-color: #ff6b6b; }
.ar-talk-body { flex: 1; } .ar-talk-body b { display: block; font-size: 22px; color: var(--gold2); margin-bottom: 4px; } .ar-talk-box.foe .ar-talk-body b { color: #ffa8a8; } .ar-talk-body span { display: block; font-size: 19px; line-height: 1.4; } .ar-talk-body small { display: block; margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.5); }

/* 진영 배치 */
.ar-deploy { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: auto; background: linear-gradient(transparent, rgba(8,5,10,.93) 26%); padding: 22px 12px calc(var(--safe-b) + 10px); } .ar-deploy[hidden] { display: none; }
.ar-dep-top { text-align: center; color: var(--gold2); font-size: 20px; font-weight: 900; text-shadow: 0 2px 5px #000; margin-bottom: 10px; }
.ar-dep-forms { display: flex; gap: 6px; margin-bottom: 10px; } .ar-dep-forms button { flex: 1; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.25); border-radius: 12px; color: #fff; padding: 6px 3px; text-align: center; } .ar-dep-forms button.on { border-color: var(--gold); background: rgba(232,194,104,.2); }
.ar-dep-forms b { display: block; font-size: 19px; color: var(--gold2); } .ar-dep-forms span { display: block; font-size: 11px; color: rgba(255,255,255,.7); line-height: 1.3; margin-top: 3px; }
.ar-dep-go { width: 100%; height: 50px; border: none; border-radius: 14px; font-size: 24px; font-weight: 900; color: #3a1d0a; background: linear-gradient(#ffe08a, #e8c268); box-shadow: 0 4px 0 #a5822f; }