/* =========================================================
   Lost Cities — 빈티지 지도(A) 톤 "빛바랜 양피지"
   팔레트/타이포는 :root에서 제어(아래). 색 바꾸려면 :root 5색만 수정.
   ⚠️ 아직 방향 베이스라인 — 디테일(여백·카드 장식·로고·일러스트)은 다듬을 여지 있음.
   ========================================================= */
:root{
  /* 팔레트 — "빛바랜 양피지"(빈티지 지도 A·소프트). 이 5색 + paper/ink만 바꾸면 전체 반영 */
  --red:#B06A52; --yellow:#C2A05E; --blue:#6E94A6; --green:#7D9070; --purple:#8C7A92;
  --paper:#EFE7D2; --ink:#5B5240; --line:rgba(80,60,30,0.13);
  --gold:rgba(176,142,74,0.55);  /* 카드 금박 악센트(다크골드) — 럭셔리 디테일 */
  /* 타이포 — 라틴·숫자=Fraunces(올드스타일 개성), 한글=Hahmlet(현대 명조). Fraunces는 한글 없어 Hahmlet로 폴백 */
  --font-display:'Fraunces','Hahmlet',serif;
  --font-serif:'Hahmlet',serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{overflow-x:hidden;}
body{
  margin:0; background:#15100a; color:var(--ink);
  font-family:var(--font-serif),'Pretendard Variable',Pretendard,system-ui,sans-serif;
  display:flex; justify-content:center; min-height:100vh; min-height:100dvh;
}

/* ── 첫 로딩 화면 (빛바랜 양피지 톤). html.fonts-ready 가 붙으면 페이드아웃 ── */
#loading{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 90% at 50% 38%, #241808 0%, #15100a 68%, #0d0905 100%);
  transition:opacity .8s ease;
}
html.fonts-ready #loading{ opacity:0; pointer-events:none; }
#loading .lc-boot{ text-align:center; padding:0 24px; }
#loading .lc-hourglass{ display:block; margin:0 auto 20px; filter:drop-shadow(0 3px 18px rgba(0,0,0,.55)); }
/* 위 모래: 아래로 빠져 사라짐 / 아래 모래: 차오름 (3초, forwards) */
#loading .lc-sand-top{ animation:lc-drain 3s ease-in forwards; }
#loading .lc-sand-bot{ transform:translateY(46px); animation:lc-fill 3s ease-out forwards; }
#loading .lc-stream{ animation:lc-stream-fade 3s linear forwards; }
#loading .lc-grain{ opacity:0; animation:lc-grain-fall .8s linear infinite; }
#loading .lc-grain.g2{ animation-delay:.4s; }
@keyframes lc-drain{ from{transform:translateY(0);} to{transform:translateY(46px);} }
@keyframes lc-fill{ from{transform:translateY(46px);} to{transform:translateY(0);} }
@keyframes lc-stream-fade{ 0%,82%{opacity:.5;} 100%{opacity:0;} }
@keyframes lc-grain-fall{ 0%{transform:translateY(0); opacity:0;} 15%{opacity:1;} 80%{opacity:1;} 100%{transform:translateY(42px); opacity:0;} }
#loading .lc-boot-sub{
  font-family:var(--font-serif); font-size:.8rem; letter-spacing:.3em;
  color:rgba(194,160,94,.9); animation:lc-boot-pulse 1.6s ease-in-out infinite;
}
@keyframes lc-boot-pulse{ 0%,100%{opacity:.45;} 50%{opacity:1;} }

/* ── 화면 전환 ── */
.screen{display:none;}
.screen.active{display:flex; flex-direction:column; align-items:center; width:100%; background:var(--paper); min-height:100dvh; position:relative; z-index:1;}
#app{width:100%; max-width:430px; min-height:100vh; min-height:100dvh; position:relative; background:transparent;}
/* 데스크탑: 게임 화면만 적당히 넓혀 중앙 정렬 (로비/입구는 폰 폭 유지) — davinci 방식 */
/* 태블릿/데스크탑: 플레이 폭 확대 + 고정 카드 확대. (#app.on-game 접두사로 specificity↑ → 뒤에 오는 기본 정의에 안 덮이게) */
@media (min-width: 768px){
  #app.on-game{ max-width: none; }               /* 게임 중엔 풀폭 — 안쪽 .lc-app(--play)이 플레이 폭 결정 */
  #app.on-game .lc-app{ --play: 560px; }
  #app.on-game .lc-hc{ width:66px; height:95px; }
  #app.on-game .lc-hc .band{ height:18px; } #app.on-game .lc-hc .num{ font-size:32px; } #app.on-game .lc-hc.wager .num{ font-size:27px; }
  #app.on-game .lc-ec{ height:38px; font-size:19px; margin-top:-11px; } #app.on-game .lc-ec::before{ height:9px; }
  #app.on-game .lc-disc{ height:42px; font-size:18px; }
}
@media (min-width: 1024px){ #app.on-game .lc-app{ --play: 640px; } }

/* ════ 입구 화면(로그인·로비·대기) — 어두운 빈티지 무드 ════ */
/* 배경 사진은 #entry-bg 레이어가 담당 → 화면 자체는 투명 */
#auth.screen.active, #lobby.screen.active, #waiting.screen.active, #game.screen.active{ background:transparent; }

/* ── 배경 레이어: 사진(켄번스) + 어둠막 + 먼지 ── */
/* 배경 사진은 뷰포트 전체로 — #app 폭(데스크탑 제한)에 갇히지 않게 fixed */
#entry-bg{position:fixed; inset:0; z-index:0; overflow:hidden;}
/* 게임 화면 — 입구와 같은 사진 무드 유지. 단 가독성 위해 켄번스(움직임)는 멈추고 살짝 더 가라앉힘 */
#app.on-game .eb-photo{animation:none;}
#app.on-game .eb-tint{background:linear-gradient(180deg, rgba(20,13,8,.72) 0%, rgba(18,12,7,.6) 45%, rgba(12,8,4,.9) 100%);}
#app.on-game .eb-dust{display:none;}              /* 게임 중엔 먼지 입자 끔(주의 분산 방지) */
.eb-photo{position:absolute; inset:-7%; background:url('board_bg.webp') center/cover no-repeat;
  transform-origin:50% 50%; will-change:transform;
  animation:kenburns var(--kb-dur,10s) ease-in-out infinite alternate;}
.eb-tint{position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(26,18,11,.50) 0%, rgba(24,16,10,.32) 40%, rgba(18,12,7,.84) 100%);}
.eb-dust{position:absolute; inset:0; overflow:hidden;}
.mote{position:absolute; border-radius:50%; will-change:transform,opacity;
  background:radial-gradient(circle, rgba(255,245,224,.95), rgba(255,238,205,0) 70%);
  animation:moteFloat linear infinite;}
@keyframes kenburns{ from{transform:scale(1) translate(0,0);} to{transform:scale(1.13) translate(-2.4%,-1.6%);} }
@keyframes moteFloat{
  0%{transform:translate3d(0,0,0) scale(.7); opacity:0;}
  12%{opacity:var(--o,.4);}
  88%{opacity:var(--o,.4);}
  100%{transform:translate3d(var(--drift,0),-130px,0) scale(1.15); opacity:0;}
}
/* 멀미 방지: 모션 줄이기 설정이면 정지 */
@media (prefers-reduced-motion: reduce){ .eb-photo{animation:none;} .mote{display:none;} }
/* 로고·문구 → 크림 */
#auth .lc-logo, #lobby .lc-logo{ color:#F3E9D2; text-shadow:0 2px 20px rgba(0,0,0,.6); }
#auth .lc-sub, #lobby .lc-sub{ color:rgba(243,233,210,.72); }
#auth #auth-title{ color:rgba(243,233,210,.7)!important; }
/* 작은 고스트 버튼(텍스트) → 크림 */
#auth .lc-btn-ghost-sm, #lobby .lc-btn-ghost-sm, #waiting .lc-btn-ghost-sm{ color:rgba(243,233,210,.62); }
#auth .lc-btn-ghost-sm:hover, #lobby .lc-btn-ghost-sm:hover, #waiting .lc-btn-ghost-sm:hover{ color:rgba(243,233,210,.95); }
/* 입력칸 → 프로스트 다크 */
#auth .lc-input, #lobby .lc-input{ background:rgba(18,12,8,.5); border-color:rgba(243,233,210,.22); color:#F3E9D2; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
#auth .lc-input::placeholder, #lobby .lc-input::placeholder{ color:rgba(243,233,210,.42); }
#auth .lc-input:focus, #lobby .lc-input:focus{ border-color:rgba(243,233,210,.6); }
/* 로비 탭 */
#lobby .lc-tab{ color:rgba(243,233,210,.5); }
#lobby .lc-tab.active{ color:#F3E9D2; border-bottom-color:#F3E9D2; }
/* 대기실 카드 → 프로스트 다크 */
#waiting .lc-roomcode{ background:rgba(18,12,8,.5); border-color:rgba(243,233,210,.22); color:#F3E9D2; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
#waiting .lc-player-row{ background:rgba(18,12,8,.45); border-color:rgba(243,233,210,.18); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
#waiting .lc-player-row .pname{ color:#F3E9D2; }
#auth .lc-btn-ghost, #lobby .lc-btn-ghost, #waiting .lc-btn-ghost{ background:rgba(18,12,8,.4); border-color:rgba(243,233,210,.25); color:#F3E9D2; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }

/* ── 로고/문구 ── */
.lc-logo{font-family:var(--font-display); font-size:2.6rem; color:var(--ink); letter-spacing:-.01em; text-align:center;}
.lc-logo-lg{font-size:3.2rem;}
.lc-sub{margin-top:.5rem; font-size:.72rem; letter-spacing:.25em; color:rgba(58,52,44,.45); text-transform:uppercase;}

/* ── 입력/버튼 ── */
.lc-input{
  width:100%; padding:.8rem 1rem; border-radius:.6rem; background:#fff;
  border:1.5px solid var(--line); color:var(--ink); text-align:center; font-size:1rem;
  transition:border-color .15s;
}
.lc-input::placeholder{color:rgba(58,52,44,.35);}
.lc-input:focus{outline:none; border-color:var(--blue);}
.lc-input-code{letter-spacing:.5em; text-indent:.5em; font-family:var(--font-display); text-transform:uppercase;}

.lc-btn{
  width:100%; padding:.85rem 1rem; border-radius:.6rem; border:none; cursor:pointer;
  background:var(--green); color:#fff; font-weight:600; font-size:.95rem; letter-spacing:.02em;
  box-shadow:0 4px 14px rgba(31,174,119,.3); transition:transform .1s, box-shadow .15s, opacity .15s;
}
.lc-btn:active{transform:scale(.98);}
.lc-btn:disabled{opacity:.4; box-shadow:none; cursor:default;}
.lc-btn-ghost{
  width:100%; padding:.8rem 1rem; border-radius:.6rem; cursor:pointer;
  background:#fff; border:1.5px solid var(--line); color:var(--ink); font-weight:600; font-size:.9rem;
  transition:transform .1s, border-color .15s;
}
.lc-btn-ghost:active{transform:scale(.98);}
.lc-btn-ghost-sm{
  width:100%; padding:.5rem; background:none; border:none; cursor:pointer;
  color:rgba(58,52,44,.45); font-size:.78rem; letter-spacing:.06em; transition:color .15s;
}
.lc-btn-ghost-sm:hover{color:rgba(58,52,44,.75);}
/* AI 대국 버튼/난이도 — 로비(어두운 배경) 위에서 또렷하게. */
.lc-btn-ai, .lc-ai-level{
  padding:.7rem 1rem; border:1px solid rgba(243,233,210,.4); border-radius:.4rem;
  background:rgba(18,12,8,.5); color:#F3E9D2; font-size:.9rem; cursor:pointer;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); transition:background .15s, border-color .15s;
}
.lc-btn-ai{ width:100%; }
.lc-btn-ai:hover, .lc-ai-level:hover{ background:rgba(18,12,8,.72); border-color:rgba(243,233,210,.6); }
.lc-ai-level:active{ transform:scale(.98); }
#ai-difficulty{ margin-top:-.4rem; }
.lc-btn-danger{
  background:#fff; border:1.5px solid var(--red); color:var(--red);
  font-weight:600; cursor:pointer; transition:background .15s;
}
.lc-btn-danger:active{background:rgba(176,106,82,.1);}

/* ── 로비 탭 ── */
.lc-tab{
  flex:1; padding:.75rem; font-size:.85rem; letter-spacing:.04em; cursor:pointer;
  background:none; border:none; color:rgba(58,52,44,.4); margin-bottom:-1px; transition:color .15s;
}
.lc-tab.active{color:var(--ink); border-bottom:2px solid var(--ink); font-weight:600;}

/* ── 메뉴 ── */
.lc-menu-btn{
  width:34px; height:34px; border-radius:50%; background:rgba(18,12,8,.32); border:1.5px solid rgba(243,233,210,.22);
  color:rgba(243,233,210,.6); display:flex; align-items:center; justify-content:center; font-size:1.05rem; cursor:pointer;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.lc-menu{min-width:160px; overflow:hidden; background:#fff; border:1.5px solid var(--line); border-radius:.6rem; box-shadow:0 8px 30px rgba(0,0,0,.15); position:absolute; top:3rem; right:0;}
.lc-menu-row{display:block; width:100%; padding:.75rem 1rem; font-size:.85rem; color:rgba(58,52,44,.8); background:none; border:none; cursor:pointer; text-align:center;}
.lc-menu-row:hover{background:rgba(0,0,0,.04);}
.lc-menu-row.danger{color:var(--red);}

/* ── 대기실 ── */
.lc-roomcode{
  font-family:var(--font-display); font-size:2.6rem; letter-spacing:.3em; text-indent:.3em; color:var(--ink); text-align:center;
  padding:1.3rem 1rem; background:#fff; border:1.5px solid var(--line); border-radius:.7rem;
}
.lc-player-row{display:flex; align-items:center; gap:.6rem; padding:.7rem 1rem; background:#fff; border:1.5px solid var(--line); border-radius:.6rem;}
.lc-player-row .dot{width:.6rem; height:.6rem; border-radius:50%; flex:0 0 auto;}
.lc-player-row .dot.on{background:var(--green); box-shadow:0 0 6px rgba(31,174,119,.5);}
.lc-player-row .dot.off{background:#c0392b;}
.lc-player-row .dot.wait{background:#cbb; animation:pulse 1.4s infinite;}
.lc-player-row .pname{font-weight:600; color:var(--ink);}
.lc-player-row .me-tag{font-size:.65rem; color:#fff; background:var(--blue); padding:.05rem .35rem; border-radius:.3rem; margin-left:.2rem;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ════════════ 게임 화면 ════════════ */
/* 배경은 #entry-bg(사진+어둠막)가 담당 → 화면 자체는 투명 (입구와 동일 무드) */
.lc-app{width:100%; --play:430px; max-width:var(--play); min-height:100dvh; margin:0 auto; display:flex; flex-direction:column; position:relative; z-index:1; background:transparent;}

/* 상단바 */
/* padding-left: 좌상단 전역 버튼(도움말·사운드)과 안 겹치게 확보 */
.lc-topbar{display:flex; align-items:center; gap:10px;
  padding:calc(12px + env(safe-area-inset-top)) max(54px, calc(50vw - var(--play) / 2)) 12px max(98px, calc(50vw - var(--play) / 2));
  width:100vw; margin-left:calc(50% - 50vw);   /* 풀블리드: 바 배경은 화면 끝까지, 내용은 중앙 폭. 우측은 고정 복기버튼 자리 확보 */
  background:rgba(18,12,8,.45); border-bottom:1px solid rgba(243,233,210,.14); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
/* 복기 버튼 — 좌측 도움말·볼륨처럼 화면 우측 끝에 고정 */
#btn-log-open{ position:fixed; top:calc(14px + env(safe-area-inset-top)); right:max(14px, env(safe-area-inset-right)); z-index:60; }
.lc-avatar{width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(243,233,210,.12); border:2px solid rgba(243,233,210,.3); flex:0 0 auto;}
.lc-avatar svg{width:22px; height:22px;}
.lc-avatar .compass-ring{fill:none; stroke:rgba(243,233,210,.55); stroke-width:1.4;}
.lc-avatar .needle-n{fill:var(--red);}      /* 북침 — 빨강 */
.lc-avatar .needle-s{fill:rgba(243,233,210,.6);} /* 남침 — 크림 */
/* 악수(베팅)카드 깃발 마커 — 이모지 대체. currentColor 상속 */
.wager-mark{width:1.05em; height:1.05em; fill:currentColor; display:inline-block; vertical-align:-0.14em;}
.lc-who{flex:1; min-width:0;}
.lc-who .name{font-weight:600; font-size:15px; color:#F3E9D2;}
.lc-who .role{font-size:11px; color:rgba(243,233,210,.55); letter-spacing:.04em;}
.lc-total{font-family:var(--font-display); font-size:22px; padding:2px 12px; border-radius:10px; background:rgba(243,233,210,.95); border:1px solid rgba(243,233,210,.4); min-width:48px; text-align:center; box-shadow:0 2px 10px rgba(0,0,0,.35);}
.lc-total.pos{color:var(--green);} .lc-total.neg{color:var(--red);} .lc-total.zero{color:rgba(58,52,44,.45);}
.lc-icon-btn{width:34px; height:34px; border-radius:.5rem; background:rgba(18,12,8,.4); border:1px solid rgba(243,233,210,.25); color:rgba(243,233,210,.75); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);}

/* 보드 (5색 레인) — 어두운 사진 배경 위에 반투명 레인 */
.lc-board{flex:1; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; padding:10px 10px 4px;}
.lc-lane{display:flex; flex-direction:column; align-items:stretch; border-radius:8px; overflow:hidden; background:rgba(18,12,8,.32); border:1px solid rgba(243,233,210,.1); position:relative; min-height:0;}
.lc-lane .head{position:relative; z-index:2; text-align:center; font-family:var(--font-display); font-size:12px; color:#fff; padding:3px 0; background:var(--c); letter-spacing:.02em;}
/* 레인별 원정지 일러스트 — 카드 뒤에 흐리게 (구조 프리뷰: 진짜 아트로 교체 예정) */
.lc-lane-art{position:absolute; left:0; right:0; top:22px; bottom:0; z-index:0; display:flex; align-items:center; justify-content:center; opacity:.62; color:var(--c); pointer-events:none; overflow:hidden;}
/* line-art(펜 스케치) 스타일 — 채움 대신 가는 선. 빈티지 탐험 일지 느낌 */
.lc-lane-art svg{width:76%; height:auto; max-height:60%; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;}
.lc-lane-art svg .fill{fill:currentColor; stroke:none;}
.lc-lane-art svg .soft{opacity:.5;}
.lc-stack{position:relative; z-index:1; display:flex; flex-direction:column; gap:0; padding:5px 5px 0; min-height:0;}
.lc-stack.mine{justify-content:flex-end; flex:1; padding:0 5px 5px;}
.lc-stack.opp{opacity:.92;}
/* 탐험로 카드 — 손패와 같은 고급 톤. 겹쳐 쌓이며 상단 색 띠+금박선으로 경계 또렷 */
.lc-ec{position:relative; height:30px; border-radius:4px; overflow:hidden; border:1px solid var(--c);
  background:linear-gradient(165deg, #FCF8EF 0%, #F4ECDA 100%);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:16px; letter-spacing:-.01em; color:var(--c); margin-top:-9px; box-shadow:0 -1px 3px rgba(20,12,4,.3), inset 0 0 0 1px rgba(255,253,247,.7); flex:0 0 auto;}
.lc-ec::before{content:''; position:absolute; top:0; left:0; right:0; height:7px; background:var(--c); background-image:linear-gradient(180deg, rgba(255,255,255,.2), rgba(0,0,0,.08)); border-bottom:1px solid var(--gold,rgba(176,142,74,.5));}
.lc-stack .lc-ec:first-child{margin-top:0;}
.lc-ec.wager{background:var(--c); color:#FCF8EF; font-size:14px;}
.lc-ec.wager::before{background:rgba(255,253,247,.5); border-bottom:none;}
/* 카드 놓임 애니메이션 — 위에서 스윽 내려와 안착 + 잠깐 금빛 반짝 */
.lc-ec.just-played{animation:card-land .32s cubic-bezier(.2,.7,.3,1) both, card-flash 1s ease-out;}
@keyframes card-land{from{transform:translateY(-22px); opacity:0;} to{transform:translateY(0); opacity:1;}}
@keyframes card-flash{0%{box-shadow:0 0 0 0 rgba(196,160,94,0), 0 -1px 3px rgba(20,12,4,.3);} 20%{box-shadow:0 0 12px 2px rgba(196,160,94,.7), 0 -1px 3px rgba(20,12,4,.3);} 100%{box-shadow:0 0 0 0 rgba(196,160,94,0), 0 -1px 3px rgba(20,12,4,.3);}}
/* 악수카드 배수 뱃지 — 레인 우상단 금색 */
.lc-mult{position:absolute; top:25px; right:4px; z-index:3; font-family:var(--font-display); font-weight:700; font-size:12px; line-height:1; color:#3C2817; background:linear-gradient(160deg, #E6C97E, #C4A05E); border:1px solid rgba(120,90,40,.5); border-radius:4px; padding:2px 5px; box-shadow:0 2px 5px rgba(0,0,0,.4); pointer-events:none;}

/* 가운데 강 */
/* 강 — 위: 덱(카드 더미) 한 줄 / 아래: 버림더미 5칸(위 레인과 정렬) */
.lc-river{display:flex; flex-direction:column; gap:10px; padding:10px max(10px, calc(50vw - var(--play) / 2)) 8px; width:100vw; margin-left:calc(50% - 50vw); background:rgba(0,0,0,.22); border-top:1px solid rgba(243,233,210,.12); border-bottom:1px solid rgba(243,233,210,.12); position:relative;}
.lc-deck-row{display:flex; justify-content:center; align-items:center;}
.lc-disc-row{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px;}
.lc-disc{height:34px; border-radius:5px; border:1.5px dashed var(--c); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:15px; letter-spacing:-.02em; color:var(--c); background:rgba(243,233,210,.92); transition:transform .1s;}
.lc-disc.empty{opacity:.45; border-style:dotted; background:rgba(243,233,210,.12); color:rgba(243,233,210,.5);}
.lc-disc.tappable{cursor:pointer; box-shadow:0 0 0 2px var(--c), 0 2px 8px rgba(0,0,0,.12); animation:glow 1.2s infinite;}
@keyframes glow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.08)}}
.lc-disc.tappable:active{transform:scale(.94);}
.lc-disc.blocked{opacity:.4; border-style:solid; position:relative;}
.lc-disc.blocked::after{content:'✕'; position:absolute; font-size:11px; color:rgba(0,0,0,.4);}
/* 덱 — 카드 뒷면이 여러 장 쌓인 더미 (강 위쪽 줄, 가운데). 남은 장수는 모서리 배지 */
.lc-deck{position:relative; width:36px; height:48px; border-radius:6px; margin-right:6px; flex:0 0 auto;
  /* 카드 뒷면: 짙은 가죽톤 + 금색 테두리 */
  background:linear-gradient(160deg, #4A3320 0%, #382414 100%);
  border:1px solid var(--gold,rgba(176,142,74,.55));
  /* 뒤에 쌓인 카드들 — box-shadow 다층으로 더미 두께 표현 */
  box-shadow:
    2px 2px 0 -1px #3C2817, 2px 2px 0 0 rgba(176,142,74,.3),
    4px 4px 0 -1px #321F11, 4px 4px 0 0 rgba(176,142,74,.22),
    6px 6px 12px rgba(0,0,0,.5);}
.lc-deck-label{position:absolute; top:-15px; left:50%; transform:translateX(-50%); font-size:9px; letter-spacing:.15em; color:rgba(243,233,210,.5); pointer-events:none;}
/* 카드 뒷면 문양 — 가운데 작은 금색 마름모(나침반 암시) */
.lc-deck-pile{position:absolute; inset:0; border-radius:6px; pointer-events:none;
  background:
    radial-gradient(circle at 50% 42%, rgba(196,160,94,.45) 0 1.5px, rgba(0,0,0,0) 2px),
    linear-gradient(45deg, rgba(196,160,94,0) 44%, rgba(196,160,94,.3) 49% 51%, rgba(196,160,94,0) 56%),
    linear-gradient(-45deg, rgba(196,160,94,0) 44%, rgba(196,160,94,.3) 49% 51%, rgba(196,160,94,0) 56%);
  box-shadow:inset 0 0 0 2px rgba(196,160,94,.18);}
.lc-deck-count{position:absolute; bottom:-7px; left:50%; transform:translateX(-50%); font-family:var(--font-display); font-weight:600; font-size:12px; line-height:1; color:var(--ink); background:rgba(243,233,210,.95); border:1px solid var(--gold,rgba(176,142,74,.55)); border-radius:999px; padding:2px 7px; box-shadow:0 2px 6px rgba(0,0,0,.4); z-index:1;}
.lc-deck.empty{opacity:.4; filter:grayscale(.6);}
/* 뽑기 단계 강조 — 금색 펄스(고급 무드) + 살짝 떠오름 */
.lc-deck.tappable{cursor:pointer; animation:deck-pulse 1.3s ease-in-out infinite;}
.lc-deck.tappable:active{transform:scale(.94);}
@keyframes deck-pulse{
  0%,100%{box-shadow:2px 2px 0 -1px #3C2817, 2px 2px 0 0 rgba(176,142,74,.3), 4px 4px 0 -1px #321F11, 4px 4px 0 0 rgba(176,142,74,.22), 6px 6px 12px rgba(0,0,0,.5), 0 0 0 0 rgba(196,160,94,.5);}
  50%{box-shadow:2px 2px 0 -1px #3C2817, 2px 2px 0 0 rgba(176,142,74,.5), 4px 4px 0 -1px #321F11, 4px 4px 0 0 rgba(176,142,74,.4), 6px 6px 14px rgba(0,0,0,.55), 0 0 14px 3px rgba(196,160,94,.55);}
}

/* 점수칩 */
.lc-scorerow{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; padding:6px 10px 14px;}
.lc-schip{text-align:center; font-family:var(--font-display); font-weight:600; font-size:13px; padding:2px 0; border-radius:5px; background:rgba(18,12,8,.4); border:1px solid rgba(243,233,210,.16); color:rgba(243,233,210,.85); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);}
.lc-schip.neg{color:#D89177;} .lc-schip.pos{color:#9DBE8C;} .lc-schip.zero{color:rgba(243,233,210,.4);}
/* 점수 변화 강조 — 칩이 살짝 부풀며 금테가 번쩍 */
.lc-schip.bump{animation:schip-bump .5s ease-out;}
@keyframes schip-bump{0%{transform:scale(1); box-shadow:0 0 0 0 rgba(196,160,94,0);} 30%{transform:scale(1.18); box-shadow:0 0 0 2px rgba(196,160,94,.7), 0 0 10px rgba(196,160,94,.5);} 100%{transform:scale(1); box-shadow:0 0 0 0 rgba(196,160,94,0);}}

/* ── 적자(−)→흑자(+) 전환 연출 ── */
/* 점수 칩 강한 팝 + 금빛 버스트 (bump보다 한 급 큼) */
.lc-schip.breakeven{position:relative; z-index:3; animation:schip-breakeven .8s cubic-bezier(.34,1.56,.64,1);}
@keyframes schip-breakeven{0%{transform:scale(1); box-shadow:0 0 0 0 rgba(230,201,126,0);} 28%{transform:scale(1.55); box-shadow:0 0 0 3px rgba(230,201,126,.85), 0 0 18px 5px rgba(230,201,126,.7);} 100%{transform:scale(1); box-shadow:0 0 0 0 rgba(230,201,126,0);}}
/* 해당 원정 레인 — 바닥(내 탐험로)에서 금빛이 차오름 */
.lc-be-glow{position:absolute; left:0; right:0; bottom:0; height:100%; z-index:1; pointer-events:none;
  background:linear-gradient(0deg, rgba(235,196,108,.6) 0%, rgba(235,196,108,.32) 38%, rgba(235,196,108,.1) 60%, transparent 80%);
  animation:lc-be-rise 1s ease-out forwards;}
@keyframes lc-be-rise{0%{opacity:0; transform:translateY(40%);} 25%{opacity:1;} 100%{opacity:0; transform:translateY(-10%);}}
/* '흑자!' 태그 — 레인 가운데서 떠오르며 사라짐 */
.lc-be-tag{position:absolute; left:0; right:0; top:46%; z-index:4; pointer-events:none; text-align:center; white-space:nowrap;
  font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:.04em; line-height:1.02;
  color:#F4E3B0; text-shadow:0 0 10px rgba(230,201,126,.9), 0 1px 2px rgba(0,0,0,.6);
  animation:lc-be-tag 1.05s cubic-bezier(.2,.8,.3,1) forwards;}
@keyframes lc-be-tag{0%{opacity:0; transform:translateY(10px) scale(.7);} 20%{opacity:1; transform:translateY(0) scale(1.12);} 55%{opacity:1; transform:translateY(-8px) scale(1);} 100%{opacity:0; transform:translateY(-26px) scale(1);}}
/* 흑자×배수 = 잭팟 변형 (악수 걸린 원정) — 더 큰 팝/글로우/태그 */
.lc-schip.breakeven.be-big{animation:schip-breakeven-big .9s cubic-bezier(.34,1.56,.64,1);}
@keyframes schip-breakeven-big{0%{transform:scale(1); box-shadow:0 0 0 0 rgba(235,196,108,0);} 26%{transform:scale(1.85); box-shadow:0 0 0 4px rgba(235,196,108,.95), 0 0 26px 8px rgba(235,196,108,.8);} 100%{transform:scale(1); box-shadow:0 0 0 0 rgba(235,196,108,0);}}
.lc-be-glow.big{background:linear-gradient(0deg, rgba(235,196,108,.82) 0%, rgba(235,196,108,.46) 40%, rgba(235,196,108,.16) 64%, transparent 82%);}
.lc-be-tag.big{font-size:21px; line-height:1.04; color:#FFF0C4; text-shadow:0 0 14px rgba(235,196,108,1), 0 1px 2px rgba(0,0,0,.7);}
.lc-be-tag.big .mx{display:block; font-size:14px; font-weight:700; letter-spacing:.02em; opacity:.95; margin-bottom:1px;}

/* ── 악수(배수) 베팅 성립 연출 ── */
/* 배수 배지 도장 — 크게 튀어들어와 정착 + 금빛 플래시 */
.lc-lane.wager-placed .lc-mult{animation:lc-bet-stamp .6s cubic-bezier(.34,1.7,.5,1);}
@keyframes lc-bet-stamp{0%{transform:scale(2.4); opacity:0;} 35%{transform:scale(1.15); opacity:1; box-shadow:0 0 16px 4px rgba(235,196,108,.95);} 100%{transform:scale(1); box-shadow:0 2px 5px rgba(0,0,0,.4);}}
/* 레인 차징 링 — 테두리 금빛 번쩍(overflow:hidden이라 inset 링이 핵심) */
.lc-lane.wager-placed::after{content:''; position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:8px;
  box-shadow:inset 0 0 0 2px rgba(235,196,108,.95), inset 0 0 16px 2px rgba(235,196,108,.5);
  animation:lc-bet-ring .6s ease-out forwards;}
@keyframes lc-bet-ring{0%{opacity:0;} 22%{opacity:1;} 100%{opacity:0;}}
/* "배수 ×N!" 라벨 — 레인 가운데서 떠오르며 사라짐 */
.lc-bet-tag{position:absolute; left:0; right:0; top:40%; z-index:6; pointer-events:none; text-align:center;
  font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:.03em;
  color:#F4E3B0; text-shadow:0 0 10px rgba(235,196,108,.95), 0 1px 2px rgba(0,0,0,.7);
  animation:lc-bet-tag 1.05s cubic-bezier(.2,.8,.3,1) forwards;}
@keyframes lc-bet-tag{0%{opacity:0; transform:translateY(8px) scale(.6);} 22%{opacity:1; transform:translateY(0) scale(1.1);} 60%{opacity:1; transform:translateY(-6px) scale(1);} 100%{opacity:0; transform:translateY(-24px) scale(1);}}
/* ④ 위험 경고 — 배수 걸린 채 후반까지 적자: 손실 증폭 중 → 배지 금색→호박/빨강 + 맥동 */
.lc-mult.danger{background:linear-gradient(160deg,#E8964A,#C2462A); border-color:rgba(150,46,28,.75); color:#2A0E06; animation:lc-mult-danger 1.3s ease-in-out infinite;}
@keyframes lc-mult-danger{0%,100%{box-shadow:0 2px 5px rgba(0,0,0,.4), 0 0 0 0 rgba(224,86,46,0);} 50%{box-shadow:0 2px 5px rgba(0,0,0,.4), 0 0 11px 2px rgba(224,86,46,.8);}}

/* 턴 배너 */
.lc-turnbanner{display:flex; align-items:center; justify-content:center; min-height:2.1rem; text-align:center; font-size:13px; padding:7px 10px; margin:2px 10px; border-radius:8px; font-weight:600; letter-spacing:.02em;}
.lc-turnbanner.mine{background:rgba(125,144,112,.32); color:#E3EDD9; border:1px solid rgba(157,190,140,.4);}
.lc-turnbanner.wait{background:rgba(18,12,8,.4); color:rgba(243,233,210,.6); border:1px solid rgba(243,233,210,.12);}

/* 손패 — 따뜻한 우드 테이블 톤 (CSS 그라데이션으로 결+입체감) */
/* 손패 영역 — 카드를 놓는 고급 가죽 트레이. 가죽결 + 비네트 + 금색 테카(상단 양각선) */
.lc-hand-wrap{
  position:relative;
  background:
    /* 중앙 살짝 밝고 가장자리 어두운 가죽 비네트(입체감) */
    radial-gradient(140% 120% at 50% 0%, rgba(255,232,200,.14) 0%, rgba(0,0,0,0) 38%),
    radial-gradient(120% 100% at 50% 100%, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 55%),
    /* 가죽결: 두 방향 미세 그레인이 교차 → 자연스러운 텍스처 */
    repeating-linear-gradient(115deg, rgba(255,235,205,.025) 0 1px, rgba(0,0,0,0) 1px 4px),
    repeating-linear-gradient(28deg, rgba(40,24,12,.06) 0 1px, rgba(0,0,0,0) 1px 5px),
    /* 베이스 가죽 색 (깊은 코냑 브라운) */
    linear-gradient(180deg, #5C4029 0%, #46301D 60%, #3C2817 100%);
  /* 상단 테카: 금색 양각선 + 그 아래 음영 → 가죽 트레이 가장자리 */
  border-top:1px solid rgba(196,160,94,.4);
  box-shadow:
    inset 0 1px 0 rgba(255,225,170,.18),      /* 상단 하이라이트(양각) */
    inset 0 3px 8px rgba(0,0,0,.3),           /* 그 아래 깊이감 */
    0 -8px 20px rgba(0,0,0,.5);               /* 패널이 떠 있는 그림자 */
  padding:12px max(8px, calc(50vw - var(--play) / 2)) calc(12px + env(safe-area-inset-bottom));
  width:100vw; margin-left:calc(50% - 50vw);   /* 풀블리드: 손패바 배경 화면 끝까지, 내용 중앙 430폭 */
}
/* 가죽 스티칭(박음질선) — 상단에 점선으로 고급 가죽 디테일 */
.lc-hand-wrap::before{content:''; position:absolute; left:12px; right:12px; top:5px; height:0; border-top:1.5px dashed rgba(196,160,94,.28); pointer-events:none;}
.lc-hand-label{display:flex; align-items:center; justify-content:space-between; font-size:11px; color:rgba(255,246,228,.6); padding:0 6px 6px; letter-spacing:.06em;}
.lc-hand-label .lc-total{font-size:16px; padding:1px 8px; min-width:auto; border-color:rgba(40,26,12,.25); box-shadow:0 1px 3px rgba(0,0,0,.18);}
.lc-hand{display:flex; gap:7px; overflow-x:auto; padding:7px 4px 15px; scrollbar-width:none; transition:opacity .25s, filter .25s;}  /* 세로 여백: overflow-x:auto가 세로도 auto로 만들어 카드 드롭섀도/들림이 잘리던 것 방지 */
/* 뽑기 단계 — 카드를 이미 냄. 손패를 가라앉혀 "지금은 위에서 뽑기" 안내 */
.lc-hand.is-drawing{opacity:.4; filter:grayscale(.5); pointer-events:none;}
.lc-hand::-webkit-scrollbar{display:none;}
/* 손패 카드 — 고급 정제형: 깨끗한 크림 바탕 + 금박 이중 테두리 + 절제된 디테일 */
.lc-hc{position:relative; flex:0 0 auto; width:54px; height:78px; border-radius:6px;
  background:linear-gradient(165deg, #FCF8EF 0%, #F4ECDA 100%);
  /* 색 테두리(외) + 금박 가는 선(내) 이중 테두리 */
  border:1px solid var(--c);
  box-shadow:0 4px 10px rgba(20,12,4,.4), 0 1px 2px rgba(20,12,4,.3),
             inset 0 0 0 1.5px rgba(255,253,247,.9), inset 0 0 0 2.5px var(--gold,rgba(176,142,74,.55));
  display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:0; overflow:hidden; transition:transform .12s, box-shadow .12s;}
.lc-hc.active{cursor:pointer;}
.lc-hc.active:active{transform:translateY(-4px) scale(1.02);}
/* 상단 색 밴드 — 색 정체성 유지(충분한 면적) + 아래 금박 헤어라인으로 본체와 연결 */
.lc-hc .band{width:100%; height:15px; flex:0 0 auto; background:var(--c); background-image:linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.08)); border-bottom:1px solid var(--gold,rgba(176,142,74,.55)); box-shadow:inset 0 -2px 3px rgba(0,0,0,.12);}
.lc-hc .num{font-family:var(--font-display); font-weight:600; font-size:26px; letter-spacing:-.01em; color:var(--c); flex:1; display:flex; align-items:center; text-shadow:0 1px 1px rgba(255,255,255,.7);}
.lc-hc .foot{width:100%; height:4px; flex:0 0 auto; background:var(--c); border-top:1px solid var(--gold,rgba(176,142,74,.45));}
/* 베팅(악수)카드 — 색 가득 + 금박 테두리 유지 */
.lc-hc.wager{background:linear-gradient(165deg, var(--c) 0%, var(--c) 100%);}
.lc-hc.wager .num{color:#FCF8EF; font-size:22px; text-shadow:0 1px 3px rgba(0,0,0,.3);}
.lc-hc.wager .band, .lc-hc.wager .foot{background:rgba(255,253,247,.6); box-shadow:none;}
.lc-hc.wager .band{background:rgba(255,255,255,.4); box-shadow:none;}
.lc-hc.wager .foot{background:rgba(255,255,255,.4); opacity:1;}

/* ── 카드 액션 시트 ── */
.lc-sheet{position:fixed; inset:0; z-index:70; display:none;}
.lc-sheet.open{display:block;}
.lc-sheet-backdrop{position:absolute; inset:0; background:rgba(8,5,2,.55); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);}
/* 바텀시트 — 어두운 가죽 트레이 무드 + 금색 테두리 (게임 화면과 결 통일) */
.lc-sheet-panel{position:absolute; left:0; right:0; bottom:0; max-width:430px; margin:0 auto; border-radius:18px 18px 0 0; padding:18px 20px calc(20px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, #5C4029 0%, #46301D 60%, #3C2817 100%);
  border-top:1px solid rgba(196,160,94,.4);
  box-shadow:inset 0 1px 0 rgba(255,225,170,.16), 0 -8px 30px rgba(0,0,0,.55);
  display:flex; flex-direction:column; align-items:center; gap:16px; animation:slideup .2s ease;}
/* 시트 상단 가죽 스티칭(손패 트레이와 동일 디테일) */
.lc-sheet-panel::before{content:''; position:absolute; left:16px; right:16px; top:7px; height:0; border-top:1.5px dashed rgba(196,160,94,.3); pointer-events:none;}
/* 시트 안 버튼 — 어두운 무드 오버라이드 (공용 .lc-btn 건드리지 않게 한정) */
.lc-sheet-panel .lc-btn{background:linear-gradient(180deg, #8A9B7C, #6E8064); color:#FCF8EF; box-shadow:0 4px 14px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.18); border:1px solid rgba(196,160,94,.45);}
.lc-sheet-panel .lc-btn:disabled{background:rgba(255,253,247,.12); color:rgba(243,233,210,.4); border-color:rgba(243,233,210,.12); box-shadow:none;}
.lc-sheet-panel .lc-btn-ghost{background:rgba(255,253,247,.08); border:1.5px solid rgba(196,160,94,.35); color:#F3E9D2; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);}
.lc-sheet-panel .lc-btn-ghost:active{border-color:rgba(196,160,94,.6);}
.lc-sheet-panel .lc-btn-ghost-sm{color:rgba(243,233,210,.5);}
.lc-sheet-panel .lc-btn-ghost-sm:hover{color:rgba(243,233,210,.85);}
@keyframes slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
/* 확대 카드(액션 시트) — 손패와 동일한 고급 정제형, 크게 */
.lc-sheet-card{position:relative; width:64px; height:92px; border-radius:7px; overflow:hidden;
  background:linear-gradient(165deg, #FCF8EF 0%, #F4ECDA 100%);
  border:1px solid var(--c);
  box-shadow:0 6px 16px rgba(20,12,4,.3), inset 0 0 0 1.5px rgba(255,253,247,.9), inset 0 0 0 2.5px var(--gold,rgba(176,142,74,.55));
  display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:0;}
.lc-sheet-card .band{width:100%; height:18px; flex:0 0 auto; background:var(--c); background-image:linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.08)); border-bottom:1px solid var(--gold,rgba(176,142,74,.55)); box-shadow:inset 0 -2px 3px rgba(0,0,0,.12);}
.lc-sheet-card .num{font-family:var(--font-display); font-weight:600; font-size:33px; letter-spacing:-.01em; color:var(--c); flex:1; display:flex; align-items:center; text-shadow:0 1px 1px rgba(255,255,255,.7);}
.lc-sheet-card .foot{width:100%; height:5px; flex:0 0 auto; background:var(--c); border-top:1px solid var(--gold,rgba(176,142,74,.45));}
.lc-sheet-card.wager{background:linear-gradient(165deg, var(--c) 0%, var(--c) 100%);} .lc-sheet-card.wager .num{color:#FCF8EF; text-shadow:0 1px 3px rgba(0,0,0,.3);}
.lc-sheet-card.wager .band, .lc-sheet-card.wager .foot{background:rgba(255,253,247,.6); box-shadow:none;}
.lc-sheet-btns{width:100%; display:flex; flex-direction:column; gap:8px;}

/* ── 드로어(기록) ── */
.drawer{position:fixed; inset:0; z-index:70; pointer-events:none;}
.drawer.open{pointer-events:auto;}
.drawer-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.3); opacity:0; transition:opacity .25s;}
.drawer.open .drawer-backdrop{opacity:1;}
.drawer-panel{position:absolute; top:0; right:0; height:100%; width:84%; max-width:340px; background:var(--paper); box-shadow:-6px 0 30px rgba(0,0,0,.2); transform:translateX(100%); transition:transform .25s; display:flex; flex-direction:column; padding:16px 16px calc(16px + env(safe-area-inset-bottom));}
.drawer.open .drawer-panel{transform:translateX(0);}
.drawer-head{display:flex; align-items:center; justify-content:space-between; font-family:var(--font-display); font-size:18px; color:var(--ink); padding-bottom:10px; border-bottom:1px solid var(--line); margin-bottom:8px;}
.drawer-head button{background:none; border:none; font-size:18px; color:rgba(58,52,44,.5); cursor:pointer;}
.lc-log-line{padding:4px 6px; border-radius:6px; background:rgba(0,0,0,.02);}

/* ── 모달 ── */
.modal{display:none;}
.modal.show{display:flex;}
.lc-card-modal{background:var(--paper); border:1.5px solid var(--line); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.25);}
.lc-help-h{font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); margin-bottom:.25rem; font-weight:600;}

/* 점수 비교 (게임오버) */
.lc-score-compare{display:flex; align-items:center; justify-content:center; gap:16px; width:100%; padding:10px 0;}
.lc-score-compare .side{flex:1; text-align:center; padding:12px 6px; border-radius:12px; background:#fff; border:1.5px solid var(--line);}
.lc-score-compare .side.win{border-color:var(--green); box-shadow:0 0 0 2px rgba(31,174,119,.18);}
.lc-score-compare .side .lbl{font-size:12px; color:rgba(58,52,44,.55); margin-bottom:4px;}
.lc-score-compare .side .val{font-family:var(--font-display); font-size:30px;}
.lc-score-compare .side .val.pos{color:var(--green);} .side .val.neg{color:var(--red);} .side .val.zero{color:rgba(58,52,44,.5);}
.lc-score-compare .vs{font-size:12px; color:rgba(58,52,44,.4);}

/* ── 게임 방법 버튼 ── */
/* 좌상단 고정 버튼 — 게임 상단바 콘텐츠(아바타 38px, 위 12px 패딩)와 세로 중심 정렬:
   14px = 12px(상단바 패딩) + (38-34)/2(아바타-버튼 높이차 보정). safe-top은 노치 회피. */
/* 좌상단 전역 버튼(도움말·사운드) — 어두운 글래스 톤 (입구·게임 공통, 흰 동그라미가 어두운 배경에서 튐) */
.help-btn{position:fixed; top:calc(14px + env(safe-area-inset-top)); left:max(14px, env(safe-area-inset-left)); z-index:60; width:34px; height:34px; border-radius:50%; background:rgba(18,12,8,.32); border:1.5px solid rgba(243,233,210,.22); color:rgba(243,233,210,.6); font-weight:700; cursor:pointer; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);}

/* ── 사운드 ── */
.sound-control{position:fixed; top:calc(14px + env(safe-area-inset-top)); left:calc(max(14px, env(safe-area-inset-left)) + 42px); z-index:60;}
/* 홈 버튼 — help·sound 옆(+84px), 같은 원형 톤. 게임 화면(on-game)에선 숨김 */
.lc-home-btn{position:fixed; top:calc(14px + env(safe-area-inset-top)); left:calc(max(14px, env(safe-area-inset-left)) + 84px); z-index:60; width:34px; height:34px; border-radius:50%; background:rgba(18,12,8,.32); border:1.5px solid rgba(243,233,210,.22); color:rgba(243,233,210,.6); display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);}
.lc-home-btn svg{width:18px; height:18px;}
#app.on-game .lc-home-btn{display:none;}
.mute-btn{width:34px; height:34px; border-radius:50%; background:rgba(18,12,8,.32); border:1.5px solid rgba(243,233,210,.22); color:rgba(243,233,210,.6); display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);}
.mute-btn.muted{color:rgba(243,233,210,.4);}
.mute-btn svg{width:17px; height:17px;}
.mute-btn .mute-off{display:none;} .mute-btn.muted .mute-on{display:none;} .mute-btn.muted .mute-off{display:block;}
.sound-panel{position:absolute; top:42px; left:0; min-width:150px; background:#fff; border:1.5px solid var(--line); border-radius:.6rem; box-shadow:0 8px 30px rgba(0,0,0,.15); overflow:hidden; display:none;}
.sound-panel.open{display:block;}
.snd-row{display:flex; align-items:center; justify-content:space-between; width:100%; padding:.6rem .9rem; background:none; border:none; cursor:pointer;}
.snd-row+.snd-row{border-top:1px solid var(--line);}
.snd-label{font-size:.82rem; color:var(--ink);}
.snd-switch{width:34px; height:20px; border-radius:999px; background:#d8d2c4; position:relative; transition:background .15s;}
.snd-switch::after{content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .15s; box-shadow:0 1px 3px rgba(0,0,0,.2);}
.snd-row.on .snd-switch{background:var(--green);}
.snd-row.on .snd-switch::after{transform:translateX(14px);}

/* ── 토스트 / 전환 / 턴 알림 ── */
.toast{transform:translateX(-50%) translateY(20px); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; background:rgba(58,52,44,.92); color:#fff; max-width:80%;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* 전환 오버레이 — 게임 다크 톤과 맞는 암전. (이전: 밝은 --paper 라 눈부심) */
.transition-overlay{position:fixed; inset:0; z-index:90; background:#0d0905; opacity:0; pointer-events:none;}
.transition-overlay.fading-in{opacity:1; transition:opacity .28s;}
.transition-overlay.fading-out{opacity:0; transition:opacity .45s;}

/* 턴 알림 — 뷰포트 상단 절반 밴드(풀스크린 X). 아래로 페이드 → 손패·덱은 항상 탭 가능(입력 안 막음) */
.turn-announce{position:fixed; top:0; left:0; right:0; height:50vh; z-index:85; display:flex; align-items:center; justify-content:center; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, rgba(14,9,5,.9) 0%, rgba(14,9,5,.66) 50%, rgba(14,9,5,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%); mask-image:linear-gradient(180deg,#000 60%,transparent 100%);}
.turn-announce.show{animation:turn-announce-cycle 1.6s ease forwards;}   /* pointer-events 그대로 none → 탭 통과 */
/* 상대 차례 — 더 짧게(1s). 키프레임 %가 그대로 1s로 압축됨 */
.turn-announce.brief.show{animation-duration:1s;}
.turn-announce.brief.show .turn-announce-inner{animation-duration:1s;}
.turn-announce-inner{display:flex; flex-direction:column; align-items:center; gap:8px; transform:scale(.92);}
.turn-announce.show .turn-announce-inner{animation:turn-announce-scale 1.6s ease forwards;}
.turn-announce-sub{font-family:var(--font-display); font-style:italic; font-size:14px; letter-spacing:.34em; text-transform:lowercase; color:rgba(243,233,210,.45);}
.turn-announce-main{font-family:var(--font-display); font-weight:600; font-size:44px; letter-spacing:.04em; color:#F3E9D2; text-shadow:0 2px 20px rgba(0,0,0,.7);}
/* 상대(또는 솔로 P2) 차례 — 대비색(잉크빛 붉은 흙) */
.turn-announce.opp .turn-announce-main{color:#D89177; font-size:38px; text-shadow:0 0 24px rgba(176,106,82,.4), 0 2px 8px rgba(0,0,0,.7);}
.turn-announce.opp .turn-announce-sub{color:rgba(216,145,119,.5);}
@keyframes turn-announce-cycle{0%{opacity:0}25%{opacity:1}68%{opacity:1}100%{opacity:0}}
@keyframes turn-announce-scale{0%{transform:scale(.92)}25%{transform:scale(1)}68%{transform:scale(1)}100%{transform:scale(1.06)}}

/* ── 재접속 오버레이 ── */
#reconnect-overlay{position:fixed; inset:0; z-index:95; background:rgba(247,242,232,.96); display:none; align-items:center; justify-content:center;}
#reconnect-overlay.show{display:flex;}
.reconnect-inner{text-align:center; padding:30px;}
.reconnect-title{font-family:var(--font-display); font-size:1.5rem; color:var(--ink);}
.reconnect-sub{font-size:.9rem; color:rgba(58,52,44,.5); margin-top:8px;}
.reconnect-actions{display:none; flex-direction:column; gap:8px; margin-top:20px;}
.reconnect-actions.show{display:flex;}
.reconnect-actions button{padding:.7rem 1.4rem; border-radius:.6rem; border:1.5px solid var(--line); background:#fff; color:var(--ink); cursor:pointer;}

/* 로비 메뉴 버튼 — safe-area 보정(노치/다이나믹 아일랜드 회피, 좌측 버튼과 동일 정렬) */
#lobby-menu-wrap{ position:fixed; top:calc(14px + env(safe-area-inset-top)); right:max(14px, env(safe-area-inset-right)); }

/* 전적 초기화 버튼 무장(2단계 확인) 상태 — 빨강 강조 */
.reset-armed{ color:#fff !important; background:rgba(214,68,52,.92) !important; border-radius:8px; padding:5px 12px; font-weight:600; }