/* 메인 로비 「기록자의 성소」 화면 요소 */
#lobby-hud { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 30; display: none; align-items: center; gap: 14px;
  padding: 8px 18px; border-radius: 14px; background: linear-gradient(180deg, rgba(40,26,8,0.86), rgba(20,12,3,0.86)); border: 1px solid rgba(252,211,77,0.55); color: #e2e8f0;
  font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,0.45); white-space: nowrap; }
#lobby-hud .lh-title { font-weight: 900; color: #fde68a; font-size: 15px; letter-spacing: 0.5px; }
#lobby-hud .lh-sep { width: 1px; height: 18px; background: rgba(252,211,77,0.35); }
#lobby-hud b { color: #fff; }
#lobby-prompt { position: absolute; left: 50%; bottom: 150px; transform: translate(-50%, 12px); z-index: 30; opacity: 0; pointer-events: none;
  padding: 10px 18px; border-radius: 12px; background: rgba(28,18,5,0.9); border: 1px solid rgba(252,211,77,0.7); color: #fff7e0;
  font-size: 14px; font-weight: 700; transition: opacity 0.2s, transform 0.2s; cursor: pointer; white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; }
#lobby-prompt.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#lobby-prompt b { display: inline-block; min-width: 22px; padding: 1px 6px; margin-right: 2px; border-radius: 6px; background: linear-gradient(180deg, #fde68a, #f59e0b); color: #451a03; text-align: center; }
#lobby-prompt span { color: #fde68a; font-weight: 500; }
body.in-lobby #lumen-talk { bottom: 210px; background: linear-gradient(180deg, rgba(48,32,10,0.95), rgba(22,14,4,0.95)); border-color: rgba(252,211,77,0.7); box-shadow: 0 0 18px rgba(245,158,11,0.3); }

/* 로비에서는 숲 전용 버튼(지도·자동)을 숨김 */
body.in-lobby #zoom-ctrl .forest-only { display: none; }
#zoom-ctrl .lobby-only { display: none; }
body.in-lobby #zoom-ctrl .lobby-only { display: block; }

/* 장소 창 */
#lobby-panel { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; background: rgba(14,9,2,0.55); padding: 16px; }
#lobby-panel.open { display: flex; }
#lobby-panel.dock { background: none; justify-content: flex-end; pointer-events: none; }
#lobby-panel.dock .lp-box { pointer-events: auto; width: min(340px, calc(100vw - 32px)); margin-right: 90px; }
.lp-box { width: min(640px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; border-radius: 16px; background: linear-gradient(180deg, rgba(48,32,10,0.97), rgba(22,14,4,0.97));
  border: 1px solid rgba(252,211,77,0.6); box-shadow: 0 16px 50px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,236,170,0.08); color: #e2e8f0; font-size: 14px; }
.lp-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: linear-gradient(90deg, rgba(64,42,10,0.99), rgba(44,28,7,0.99));
  border-bottom: 1px solid rgba(252,211,77,0.4); font-size: 17px; color: #fde68a; }
.lp-x { background: none; border: none; color: #cbd5e1; font-size: 18px; cursor: pointer; padding: 2px 6px; }
.lp-x:hover { color: #fff; }
.lp-body { padding: 14px 18px 18px; line-height: 1.6; }
.lp-body h4 { margin: 14px 0 6px; color: #fcd34d; font-size: 14px; }
.lp-body h4 small { color: #b8a27a; font-weight: 400; }
.lp-body p { margin: 6px 0; }
.lp-big { font-size: 15px; color: #fff; }
.lp-note { color: #b8a27a; font-size: 12.5px; }
.lp-stat { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: rgba(30,20,6,0.7); border: 1px solid #6b5326; font-size: 13px; }
.lp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.lp-btn { padding: 8px 14px; border-radius: 10px; border: 1px solid #b8892e; background: #4a3210; color: #fef3c7; font-weight: 700; cursor: pointer; font-size: 13px; }
.lp-btn:hover:not(:disabled) { background: #5e4115; border-color: #fcd34d; }
.lp-btn:disabled { opacity: 0.45; cursor: default; }
.lp-btn.main { background: linear-gradient(180deg, #fcd34d, #d97706); border-color: #fde68a; color: #3b1d02; text-shadow: 0 1px 0 rgba(255,255,255,0.35); }
.lp-btn.ghost { background: none; border-color: #6b5326; color: #e7d7b0; }
.lp-btn.danger { border-color: #ef4444; background: #3f1515; color: #fecaca; }
.lp-btn.small { padding: 4px 10px; font-size: 12px; }
.lp-btn.wide { display: block; width: 100%; margin: 6px 0; text-align: left; }

/* 석판 관문 칸 */
.gate-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.gate-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; padding: 4px; border-radius: 10px;
  background: rgba(30,20,6,0.7); border: 1px solid #5a4520; text-align: center; font-size: 10.5px; color: #64748b; }
.gate-cell b { font-size: 16px; color: #b8a27a; }
.gate-cell.done { border-color: #fcd34d; background: rgba(120,83,13,0.35); color: #fde68a; cursor: pointer; }
.gate-cell.done b { color: #fcd34d; }
.gate-cell.next { border-color: #fff7d6; background: rgba(120,83,13,0.55); color: #fffbeb; cursor: pointer; box-shadow: 0 0 12px rgba(253,224,71,0.45); animation: gate-glow 1.6s ease-in-out infinite; }
.gate-cell.next b { color: #ffffff; }
.gate-cell.sealed { opacity: 0.55; }
@keyframes gate-glow { 50% { box-shadow: 0 0 22px rgba(253,224,71,0.8); } }

/* 서재 */
.lp-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.lp-tab { padding: 6px 12px; border-radius: 999px; border: 1px solid #6b5326; background: none; color: #e7d7b0; cursor: pointer; font-size: 13px; }
.lp-tab.on { background: #8a5a12; border-color: #fcd34d; color: #fff; }
.lp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lp-table td { padding: 6px 8px; border-bottom: 1px solid #4a3818; }
.lp-table td:first-child { white-space: nowrap; color: #fde68a; }
.lp-log { max-height: 320px; overflow-y: auto; font-size: 12.5px; }
.lp-log .row { display: flex; gap: 10px; padding: 3px 0; border-bottom: 1px dashed #4a3818; }
.lp-log .row b { color: #fcd34d; font-family: monospace; }
.book-row { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: rgba(30,20,6,0.6); display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.book-row span { color: #64748b; padding-left: 8px; }
.book-row span.seen { color: #86efac; }

/* 상점 */
.shop-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #4a3818; }
.shop-row span:nth-child(2) { flex: 1; }
/* 무기 보관함 (거울 샘) */
.armory-row span:first-child { width: 24px; text-align: center; font-size: 18px; }
.armory-row small { display: block; font-size: 11px; color: #c9b48a; margin-top: 2px; }
.swatch { width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 10px currentColor; border: 2px solid rgba(255,255,255,0.6); }

/* 명예의 전당 */
.hall-bar { height: 10px; border-radius: 999px; background: #2a1c08; overflow: hidden; margin: 10px 0 4px; }
.hall-bar div { height: 100%; background: linear-gradient(90deg, #d97706, #fde047); }
.hall-names div { padding: 6px 0; border-bottom: 1px dashed #3f3a1f; color: #fde68a; }
.hall-names .empty { color: #64748b; font-style: italic; }

/* 설정 */
.set-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.set-row span { width: 90px; }
.set-row input[type=range] { flex: 1; accent-color: #f59e0b; }
.set-row em { width: 40px; text-align: right; font-style: normal; color: #cbd5e1; }

/* 게임 코드를 다 읽기 전에는 시작 버튼을 누를 수 없게 (느린 휴대폰에서 눌러도 아무 일 없던 문제) */
#scene-login.booting button { pointer-events: none; opacity: 0.5; }
#scene-login.booting .slate-box::after { content: '불러오는 중…'; display: block; margin-top: 8px; color: #94a3b8; font-size: 12px; }

/* fps 표시 · 품질 알림 */
#fps-meter { position: fixed; left: 10px; bottom: 66px; z-index: 40; padding: 2px 8px; border-radius: 8px; background: rgba(0,0,0,0.45);
  color: #86efac; font: 700 11px monospace; pointer-events: none; display: none; }
#fps-meter.slow { color: #fca5a5; }
#quality-toast { position: fixed; left: 50%; top: 64px; transform: translate(-50%, -8px); z-index: 96; max-width: calc(100vw - 32px); padding: 8px 14px; border-radius: 10px;
  background: rgba(30,20,5,0.92); border: 1px solid #fcd34d; color: #fef3c7; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; }
#quality-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 화면 전환 */
#lobby-fade { position: fixed; inset: 0; z-index: 95; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.6s; }
#lobby-fade.on { opacity: 1; pointer-events: auto; }

@media (max-width: 640px) {
  #lobby-hud { font-size: 11px; gap: 8px; padding: 6px 10px; top: 8px; }
  #lobby-hud .lh-title { font-size: 12px; }
  #lobby-prompt { bottom: 170px; font-size: 12px; }
  .gate-grid { grid-template-columns: repeat(4, 1fr); }
  #lobby-panel.dock { justify-content: center; align-items: flex-end; }
  #lobby-panel.dock .lp-box { margin: 0; max-height: 55vh; }
}

/* 루멘 말고 다른 인물(카이)의 대사 */
#lumen-talk.other { border-color: rgba(248,113,113,0.85) !important; box-shadow: 0 0 18px rgba(220,38,38,0.35) !important; }
#lumen-talk.other .lt-name { color: #fca5a5; }

/* 공명의 도시 (js/lobby/hub.js): 모집 쪽지 · 편지 입력 */
.hub-input { width: 100%; box-sizing: border-box; margin: 6px 0; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(253,230,138,.45); background: rgba(15,10,25,.7); color: #fff7e0; font: inherit; }
.hub-input:focus { outline: none; border-color: #fcd34d; }
.set-row select { background: rgba(15,10,25,.7); color: #fff7e0; border: 1px solid rgba(253,230,138,.45); border-radius: 8px; padding: 4px 8px; font: inherit; }

/* 앱 안 브라우저 안내 (js/core/inapp.js) — 불러오는 중에도 누를 수 있게 */
.inapp-box { margin: 4px 0 16px; padding: 12px 14px; border: 1px solid #d97706; border-left: 5px solid #f59e0b; border-radius: 10px; background: #3a2408; text-align: left; }
.inapp-title { display: block; color: #fbbf24; font-size: 15px; margin-bottom: 6px; }
.inapp-text { color: #fde68a; font-size: 13px; line-height: 1.5; }
.inapp-text em { font-style: normal; color: #fb923c; font-weight: bold; }
.inapp-steps { margin: 8px 0 10px 18px; padding: 0; color: #e7d3a8; font-size: 12px; line-height: 1.6; }
.inapp-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.inapp-btns button { flex: 1 1 120px; padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: bold; cursor: pointer; border: 1px solid #b45309; background: #4a2f0c; color: #fde68a; }
.inapp-btns .inapp-open { background: linear-gradient(90deg, #b45309, #d97706); color: #fff; }
.inapp-msg { margin-top: 6px; min-height: 14px; font-size: 12px; color: #6ee7b7; }
#scene-login.booting .inapp-box button { pointer-events: auto; opacity: 1; }

/* 시작 화면 배경: 게임 대표 장면 (기록자의 성소 금빛 문) 위에 어두운 막 */
#scene-login { background: linear-gradient(180deg, rgba(8, 10, 18, 0.55), rgba(8, 10, 18, 0.82)), url('../images/title_bg.webp') center 35% / cover no-repeat, #0a0e17; overflow-y: auto; }
#scene-login .slate-box { background: linear-gradient(145deg, rgba(30, 36, 54, 0.88), rgba(18, 22, 34, 0.92)); max-width: calc(100vw - 24px); }
#title-music-btn { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(253, 230, 138, 0.5); background: rgba(10, 14, 23, 0.6); color: #fde68a; font-size: 20px; cursor: pointer; z-index: 2; }
#scene-login.booting #title-music-btn { pointer-events: auto; opacity: 1; }

/* 처음 온 사람: 남자·여자 고르기 (js/lobby/gender_pick.js) */
.gender-pick { margin: 0 0 14px; }
.gp-title { color: #fde68a; font-weight: bold; font-size: 15px; margin-bottom: 8px; }
.gp-cards { display: flex; gap: 10px; }
.gp-card { flex: 1; position: relative; height: 190px; padding: 0; border-radius: 12px; border: 2px solid #475569; background: radial-gradient(ellipse at 50% 85%, rgba(251, 191, 36, 0.28), rgba(15, 23, 42, 0.85) 70%); cursor: pointer; overflow: hidden; transition: border-color .2s, transform .2s, box-shadow .2s; }
.gp-card canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gp-card:not(.ready)::before { content: attr(data-loading); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 12px; }
.gp-card .gp-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 0; background: linear-gradient(0deg, rgba(0,0,0,0.75), transparent); color: #fff; font-size: 16px; font-weight: bold; }
.gp-card:hover { border-color: #f59e0b; }
.gp-card.on { border-color: #fbbf24; box-shadow: 0 0 18px rgba(251, 191, 36, 0.6); transform: translateY(-2px); }
.gp-hint { margin-top: 6px; font-size: 11px; color: #94a3b8; }
.gp-card.gp-simple { height: 64px; display: flex; align-items: center; justify-content: center; gap: 10px; background: rgba(15, 23, 42, 0.85); }
.gp-card.gp-simple .gp-icon { font-size: 26px; }
.gp-card.gp-simple .gp-name { position: static; padding: 0; background: none; font-size: 18px; }
#scene-login.booting .gp-card { pointer-events: auto; opacity: 1; }
#scene-login.need-gender .btn-main, #scene-login.need-gender .btn-sub { pointer-events: none; opacity: 0.4; }
#scene-login.active { justify-content: safe center; }
/* 시작 화면에서는 옷장 버튼을 숨김 (글자를 가림) — 게임에 들어가면 다시 보임 */
body:has(#scene-login.active) #wardrobe-btn { display: none !important; }
/* 닉네임 칸 + 🎲 무작위 단추 (js/lobby/nick_random.js) */
.nick-row { display: flex; gap: 6px; align-items: stretch; }
.nick-row input { flex: 1; min-width: 0; }
.nick-dice { flex: 0 0 44px; border-radius: 8px; border: 1px solid #475569; background: #1e293b; font-size: 20px; cursor: pointer; }
.nick-dice:hover { border-color: #f59e0b; }
#scene-login.booting .nick-dice, #scene-login.need-gender .nick-dice { pointer-events: auto; opacity: 1; }

/* 성소 꾸미기 창 (js/lobby/lobby_themes.js) */
.decor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 4px 0 10px; }
.decor-card { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 9px 10px; border-radius: 10px; border: 1px solid #6b5326;
  background: rgba(40,26,8,0.75); color: #fef3c7; cursor: pointer; font: inherit; }
.decor-card b { font-size: 13.5px; }
.decor-card b small { color: #fcd34d; font-weight: 700; }
.decor-card span { font-size: 11.5px; color: #d6c39a; line-height: 1.35; }
.decor-card:hover:not(.on):not(.locked) { border-color: #fcd34d; background: rgba(70,46,12,0.85); }
.decor-card.on { border-color: #fcd34d; box-shadow: 0 0 0 1px #fcd34d inset; cursor: default; }
.decor-card.locked { opacity: 0.5; cursor: default; }

/* 운명의 석판: 무기를 얻는 관문 표시 (오른쪽 위 작은 무기 그림) */
.gate-cell { position: relative; }
.gate-cell .gate-wpn { position: absolute; top: 2px; right: 3px; font-style: normal; font-size: 11px; line-height: 1; filter: drop-shadow(0 0 3px rgba(252,211,77,0.8)); }
.gate-cell .gate-wpn.all { filter: none; opacity: 0.85; }
.gate-cell.has-wpn { box-shadow: inset 0 0 0 1px rgba(252,211,77,0.35); }