/* =========================================================
   Lost Cities — 빈티지 지도(A) 톤 "빛바랜 양피지"
   팔레트/타이포는 :root에서 제어(아래). 색 바꾸려면 :root 5색만 수정.
   ⚠️ 아직 방향 베이스라인 — 디테일(여백·카드 장식·로고·일러스트)은 다듬을 여지 있음.
   ========================================================= */
:root{
  /* 팔레트 — "빛바랜 양피지"(빈티지 지도 A·소프트). 이 5색 + paper/ink만 바꾸면 전체 반영 */
  --red:#B06A52; --yellow:#C2A05E; --blue:#6E94A6; --green:#D2382C; --purple:#8C7A92;
  --paper:#EFE7D2; --ink:#5B5240; --line:rgba(80,60,30,0.13);
  --gold:rgba(176,142,74,0.55);  /* 카드 금박 악센트(다크골드) — 럭셔리 디테일 */
  /* 타이포 — 영어=Questrial(지오메트릭 산세리프), 한글=Pretendard. 자간 -0.04em. */
  --font-display:'Questrial','Pretendard Variable',Pretendard,system-ui,sans-serif;
  --font-serif:'Questrial','Pretendard Variable',Pretendard,system-ui,sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{overflow-x:hidden;}
body{
  margin:0; background:#170606; color:var(--ink);
  font-family:var(--font-serif);
  letter-spacing:-0.04em;
  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(130% 100% at 50% 42%, #1a1a1a 0%, #0c0c0c 62%, #000 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;} }
/* 우노 로딩 — 빨강 카드 + 흰 타원 + 기울인 UNO */
#loading .uno-boot{ text-align:center; }
#loading .uno-boot-card{ width:150px; height:210px; margin:0 auto; border-radius:18px; position:relative; overflow:hidden;
  background:linear-gradient(150deg,#E94B3E,#C42B20); box-shadow:0 14px 40px rgba(0,0,0,.6), inset 0 0 0 5px rgba(255,255,255,.9);
  display:flex; align-items:center; justify-content:center; animation:uno-boot-pop 1.6s ease-in-out infinite; }
#loading .uno-boot-card::before{ content:''; position:absolute; width:78%; height:50%; border-radius:50%; background:rgba(255,255,255,.92); transform:rotate(-32deg); }
#loading .uno-boot-uno{ position:relative; z-index:1; font-family:var(--font-display); font-style:italic; font-weight:800; font-size:2.4rem; color:#E0382C; -webkit-text-stroke:1px rgba(120,16,10,.25); }
#loading .uno-boot-sub{ margin-top:18px; font-family:var(--font-display); font-size:.8rem; letter-spacing:.5em; indent:.5em;
  color:rgba(240,192,64,.9); animation:lc-boot-pulse 1.6s ease-in-out infinite; }
@keyframes uno-boot-pop{ 0%,100%{ transform:scale(1) rotate(-2deg); } 50%{ transform:scale(1.05) rotate(2deg); } }

/* ── 화면 전환 ── */
.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은 풀폭(안쪽 .rm-app이 560px 중앙 폭 결정). */
@media (min-width: 768px){ #app.on-game{ max-width: none; } }

/* ════ 입구 화면(로그인·로비·대기) — 어두운 빈티지 무드 ════ */
/* 배경 사진은 #entry-bg 레이어가 담당 → 화면 자체는 투명 */
#auth.screen.active, #lobby.screen.active, #waiting.screen.active{ background:transparent; }
/* 게임 화면 — 콘텐츠 폭(560px)보다 넓은 화면(태블릿 세로 등)에서 양옆에 board_bg 사진이
   드러나지 않도록, 게임 중엔 board_bg 레이어를 끄고 균일한 다크 그린 펠트로 뷰포트 전체를 덮는다. */
#game.screen.active{ background:transparent; }
#app.on-game #entry-bg{ display:none; }   /* 게임 중엔 board_bg 사진 끔 */
/* 게임 테이블 — 따뜻한 다크 베이스 + 가운데 스포트라이트 + 네 귀퉁이 우노 4색 글로우.
   다층 라디얼로 깊이감을 주되, 카드 영역 가독성을 위해 색 글로우는 은은하게(코너에만). */
#app.on-game::before{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(70% 50% at 50% 46%, rgba(80,40,40,.35) 0%, transparent 70%),   /* 가운데 테이블 스포트라이트 */
    radial-gradient(40% 32% at 8% 4%, rgba(224,57,44,.16) 0%, transparent 70%),     /* 좌상 빨강 */
    radial-gradient(40% 32% at 92% 4%, rgba(61,143,224,.14) 0%, transparent 70%),    /* 우상 파랑 */
    radial-gradient(46% 34% at 6% 98%, rgba(63,166,76,.13) 0%, transparent 70%),     /* 좌하 초록 */
    radial-gradient(46% 34% at 94% 98%, rgba(232,168,30,.13) 0%, transparent 70%),   /* 우하 노랑 */
    radial-gradient(135% 100% at 50% 30%, #2a1515 0%, #190d0d 52%, #0c0606 100%); }   /* 베이스 + 비네팅 */
/* 가운데 테이블 영역에 은은히 도는 빛(아주 느린 회전) — 정적임만 덜어내되 주의 안 끌게. */
#app.on-game::after{ content:''; position:fixed; left:50%; top:42%; width:120vw; height:120vw; max-width:900px; max-height:900px;
  transform:translate(-50%,-50%); z-index:0; pointer-events:none; opacity:.5;
  background:conic-gradient(from 0deg, transparent 0%, rgba(224,57,44,.05) 12%, transparent 26%,
    rgba(232,168,30,.05) 40%, transparent 54%, rgba(63,166,76,.05) 68%, transparent 80%, rgba(61,143,224,.05) 92%, transparent 100%);
  /* 가장자리를 부드럽게 페이드 — 원형 경계선이 안 보이게(border-radius 대신 radial 마스크) */
  -webkit-mask:radial-gradient(circle, #000 30%, transparent 70%); mask:radial-gradient(circle, #000 30%, transparent 70%);
  animation:uno-bg-spin 40s linear infinite; }
@keyframes uno-bg-spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ #app.on-game::after{ animation:none; } }

/* ── 배경 레이어: 사진(켄번스) + 어둠막 + 먼지 ── */
/* 배경 사진은 뷰포트 전체로 — #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;}              /* 게임 중엔 먼지 입자 끔(주의 분산 방지) */
/* 입구(로그인·로비·대기) 배경 — 우노 브랜드 레드(딥 와인) 라디얼. 게임 중엔 on-game이 꺼줌(테이블은 별도). */
.eb-photo{position:absolute; inset:-7%;
  background:radial-gradient(125% 100% at 50% 20%, #9a2018 0%, #5a1210 46%, #2a0808 78%, #160505 100%);
  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(120,18,14,.18) 0%, rgba(40,8,7,.30) 45%, rgba(14,4,4,.80) 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:3.6rem; color:var(--ink); letter-spacing:-.01em; text-align:center;}
.lc-logo-lg{font-size:4.8rem;}
/* 우노 로고 — 기울인 빨강, 입구에서도 빨강 유지 */
.uno-logo{ font-style:italic; font-weight:800; letter-spacing:.01em; }
#auth .uno-logo, #lobby .uno-logo{ color:#EE4438; text-shadow:0 3px 0 rgba(120,16,10,.35), 0 6px 22px rgba(238,68,56,.35); }
.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);}
.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);}
/* 복기(기록) 버튼 — 스페이드는 topbar 안 우측에 점수와 나란히 둠(고정 X). */
.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);}}

/* 턴 배너 */
.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:#ffe9bf; text-shadow:0 0 30px rgba(240,192,64,.55), 0 2px 18px 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;}

/* ════════════════════════════════════════════════════════
   러미 추가 스타일 — AI 버튼 + 게임 화면 (기능 위주, 비주얼 다듬기 예정)
   ════════════════════════════════════════════════════════ */

/* AI 대전 버튼/난이도 (gomoku와 동일) */
.lc-btn-ai, .lc-ai-level{
  padding:.6rem .5rem; border-radius:.6rem; cursor:pointer;
  background:rgba(18,12,8,.55); border:1.5px solid rgba(243,233,210,.3);
  color:#F3E9D2; font-size:.85rem; font-weight:600; letter-spacing:.04em;
  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,.55); }
.lc-ai-level:active{ transform:scale(.98); }
#ai-difficulty{ margin-top:-.35rem; }

/* ════════════════════════════════════════════════════════
   우노 게임 화면 — 어두운 테이블에 4색 카드가 튐 (각자도생 4인).
   상단바(라운드) / 3패널(상대: 이름·점수·장수·UNO·차례) / 가운데 더미·버림·색·방향 / 손패 / 액션
   배경은 입구에서 끔(on-game::before가 다크 라디얼) — 여기선 투명 유지.
   ════════════════════════════════════════════════════════ */
.uno-app{ width:100%; max-width:480px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column;
  padding: max(.5rem, env(safe-area-inset-top)) .5rem max(.8rem, env(safe-area-inset-bottom)); box-sizing:border-box; }

/* 상단바 — 라운드 + 기록버튼(우측). 좌측엔 고정 ?·사운드 버튼이 떠 있음. */
.uno-topbar{ display:flex; align-items:center; justify-content:flex-end; gap:.7rem;
  width:100vw; margin-left:calc(50% - 50vw); box-sizing:border-box;
  padding:.3rem max(16px, calc(50vw - 240px)) .2rem max(108px, calc(50vw - 240px)); }
.uno-round{ font-family:var(--font-display); font-size:1rem; color:rgba(235,238,245,.7); letter-spacing:.02em; }

/* 상단 3패널 (상대들) — 아바타+이름 / 카드뒷면 부채 / 장수 / 점수|등수 / UNO·임박 경고 */
.uno-others{ display:flex; justify-content:center; gap:.55rem; padding:.5rem .3rem .1rem; align-items:stretch; }
/* 플레이어별 우노 4색 — 좌석마다 고유색(--pc). */
.pc-r{ --pc:#E0392C; --pc-d:#9e1f15; }
.pc-y{ --pc:#E8A81E; --pc-d:#9c6c08; }
.pc-g{ --pc:#3FA64C; --pc-d:#1f6a2a; }
.pc-b{ --pc:#3D8FE0; --pc-d:#1c5aa0; }
.uno-panel{ flex:1; max-width:150px; display:flex; flex-direction:column; align-items:center; gap:.34rem; position:relative;
  background:linear-gradient(165deg, color-mix(in srgb, var(--pc) 22%, #14141a), color-mix(in srgb, var(--pc) 8%, #101015));
  border:1.5px solid color-mix(in srgb, var(--pc) 55%, transparent); border-radius:16px; padding:.7rem .5rem .6rem;
  box-shadow:0 4px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.07);
  transition:box-shadow .25s, border-color .25s, background .25s, transform .2s; }
/* 헤더 — 색 원형 아바타 + 이름 */
.uno-panel .phead{ display:flex; align-items:center; justify-content:center; max-width:100%; }
.uno-panel .nm{ font-family:var(--font-display); font-size:.92rem; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:0 1px 3px rgba(0,0,0,.5); }
/* 카드 뒷면 부채 — 진짜 우노 카드 뒷면(검정 + 비스듬한 색 타원 + UNO) */
.uno-panel .fan{ display:flex; height:30px; align-items:center; }
.uno-panel .fan .bk{ position:relative; width:20px; height:29px; border-radius:4px; margin-left:-11px; overflow:hidden;
  background:linear-gradient(150deg,#23232c,#0d0d12); border:1px solid rgba(0,0,0,.5); box-shadow:0 1px 2px rgba(0,0,0,.45); }
.uno-panel .fan .bk::before{ content:''; position:absolute; left:50%; top:50%; width:150%; height:58%; border-radius:50%;
  transform:translate(-50%,-50%) rotate(-32deg); background:linear-gradient(135deg, var(--pc), var(--pc-d)); }
.uno-panel .fan .bk:first-child{ margin-left:0; }
/* 장수 — 크게, 플레이어 색 글로우 */
.uno-panel .cnt{ display:flex; align-items:baseline; gap:.18rem; }
.uno-panel .cnt b{ font-family:var(--font-display); font-size:1.7rem; font-weight:800; color:#fff; line-height:1;
  text-shadow:0 0 14px color-mix(in srgb, var(--pc) 75%, transparent), 0 1px 3px rgba(0,0,0,.5); }
.uno-panel .cnt .lbl{ font-size:.66rem; color:rgba(235,238,245,.65); }
/* 점수 | 등수 — 내 상태바와 동일 톤 */
.uno-panel .sc{ display:flex; align-items:baseline; gap:.1rem; font-family:var(--font-display); white-space:nowrap; }
.uno-panel .sc b{ font-size:.96rem; font-weight:800; color:#fff; }
.uno-panel .sc i{ font-size:.6rem; font-style:normal; color:rgba(235,238,245,.55); margin-right:.12rem; }
.uno-panel .sc .sc-div{ color:rgba(255,255,255,.22); font-size:.78rem; margin:0 .18rem; }
/* 차례 — 그 플레이어 색으로 환하게 빛나며 떠오름 */
.uno-panel.turn{ border-color:var(--pc); transform:translateY(-4px) scale(1.04);
  background:linear-gradient(165deg, color-mix(in srgb, var(--pc) 40%, #14141a), color-mix(in srgb, var(--pc) 16%, #101015));
  animation:uno-panel-turn 1.1s ease-in-out infinite; }
@keyframes uno-panel-turn{ 0%,100%{ box-shadow:0 0 0 1.5px var(--pc), 0 0 18px color-mix(in srgb, var(--pc) 50%, transparent), 0 8px 18px rgba(0,0,0,.4); }
  50%{ box-shadow:0 0 0 1.5px var(--pc), 0 0 32px color-mix(in srgb, var(--pc) 85%, transparent), 0 8px 18px rgba(0,0,0,.4); } }
/* 1~2장 임박 — 빨강 경고 펄스 + 장수 빨강 */
.uno-panel.low{ border-color:#FF5C4A; animation:uno-panel-low .8s ease-in-out infinite; }
.uno-panel.low .cnt b{ color:#FF6B5C; text-shadow:0 0 16px rgba(255,80,60,.85), 0 1px 3px rgba(0,0,0,.5); }
@keyframes uno-panel-low{ 0%,100%{ box-shadow:0 0 0 1.5px #FF5C4A, 0 0 16px rgba(255,80,60,.5), 0 6px 16px rgba(0,0,0,.35); }
  50%{ box-shadow:0 0 0 1.5px #FF5C4A, 0 0 30px rgba(255,80,60,.9), 0 6px 16px rgba(0,0,0,.35); } }
.uno-panel .unobadge{ position:absolute; top:-8px; right:-5px; background:#E23B2E; color:#fff; font-family:var(--font-display); font-weight:800;
  font-size:.64rem; letter-spacing:.04em; padding:2px 7px; border-radius:999px; box-shadow:0 2px 10px rgba(226,59,46,.7); animation:uno-badge 1s ease-in-out infinite; }
@keyframes uno-badge{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.16); } }

/* 가운데 테이블 — 더미(뽑기) + 버림(현재색 링) + 방향 + 스택 */
/* 가운데 테이블 — flex:1로 세로 중앙. 손패 높이를 항상 2줄 기준으로 고정(아래)해서, 이 영역이 일정 → 테이블이 화면 가운데에 고정. */
.uno-midwrap{ flex:1; display:flex; align-items:center; justify-content:center; min-height:150px; }
.uno-table{ position:relative; display:flex; align-items:center; justify-content:center; gap:2.6rem; }
.uno-dir{ position:absolute; top:-40px; left:50%; transform:translateX(-50%); font-size:1.8rem; color:rgba(245,200,80,.75); }
/* 더미(뽑기) — 키움 */
.uno-draw{ position:relative; width:92px; height:132px; border:none; padding:0; background:transparent; cursor:default; }
.uno-back-lg{ position:absolute; inset:0; border-radius:11px; border:2px solid rgba(255,255,255,.12);
  background:linear-gradient(135deg,#2b2f3a,#15171d); box-shadow:0 4px 12px rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; }
.uno-back-lg::after{ content:'UNO'; font-family:var(--font-display); font-style:italic; font-weight:700; color:rgba(226,59,46,.85); font-size:1.25rem; transform:rotate(-20deg); }
.uno-draw.tappable{ cursor:pointer; }
.uno-draw.tappable .uno-back-lg{ border-color:rgba(245,200,80,.85); box-shadow:0 0 16px rgba(245,200,80,.45), 0 4px 12px rgba(0,0,0,.5); }
.uno-draw-count{ position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); font-family:var(--font-display); font-size:.96rem; font-weight:800; line-height:1;
  color:#fff; background:rgba(12,10,14,.92); border:1.5px solid rgba(240,192,64,.7); border-radius:999px; padding:3px 10px;
  box-shadow:0 3px 10px rgba(0,0,0,.55); text-shadow:0 1px 2px rgba(0,0,0,.6); white-space:nowrap; }
/* 버림 더미 — 키움 + 실제로 쌓이는 느낌. 이전에 낸 카드들(dpile-old)이 고유 각도로 깔리고 맨 위(dpile-top)에 현재 카드. */
.uno-discard{ position:relative; width:98px; height:140px; }
.uno-discard .dpile-old, .uno-discard .dpile-top{ position:absolute; inset:0; border-radius:13px;
  display:flex; align-items:center; justify-content:center; }
.uno-discard .dpile-old .uno-card, .uno-discard .dpile-top .uno-card{ width:100%; height:100%; }
/* 아래 깔린(이전) 카드 — 그림자로 두께감 */
.uno-discard .dpile-old{ filter:brightness(.82); box-shadow:0 3px 10px rgba(0,0,0,.45); }
.uno-discard .dpile-top{ box-shadow:0 5px 16px rgba(0,0,0,.5); }
/* 색 링·글로우는 맨 위 카드에만 — 현재 활성색 표시 */
.uno-discard.c-r .dpile-top{ box-shadow:0 0 0 3px #E23B2E, 0 0 22px 3px rgba(226,59,46,.5); border-radius:13px; }
.uno-discard.c-y .dpile-top{ box-shadow:0 0 0 3px #E8B22B, 0 0 22px 3px rgba(232,178,43,.5); border-radius:13px; }
.uno-discard.c-g .dpile-top{ box-shadow:0 0 0 3px #3DA34D, 0 0 22px 3px rgba(61,163,77,.5); border-radius:13px; }
.uno-discard.c-b .dpile-top{ box-shadow:0 0 0 3px #2D7DD2, 0 0 22px 3px rgba(45,125,210,.5); border-radius:13px; }
.uno-stack{ position:absolute; top:-12px; right:-8px; background:#E23B2E; color:#fff; font-family:var(--font-display); font-weight:700;
  font-size:1rem; padding:3px 10px; border-radius:999px; box-shadow:0 3px 12px rgba(226,59,46,.6); animation:uno-badge .7s ease-in-out infinite; }

/* 카드 페이스 (버림·손패 공용) — 색 배경 + 흰 타원 + 값/기호 + 코너 인덱스 */
.uno-card{ position:relative; overflow:hidden; border-radius:10px; box-shadow:0 3px 8px rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; color:#fff; box-sizing:border-box; }
.uno-card.r{ background:linear-gradient(150deg,#E94B3E,#C42B20); }
.uno-card.y{ background:linear-gradient(150deg,#F0BE3A,#D29A18); }
.uno-card.g{ background:linear-gradient(150deg,#48B85A,#2E8C3D); }
.uno-card.b{ background:linear-gradient(150deg,#3D8FE0,#2360B8); }
.uno-card.w{ background:linear-gradient(150deg,#2a2d36,#14161c); }
.uno-card .oval{ position:absolute; width:80%; height:52%; border-radius:50%; background:rgba(255,255,255,.92); transform:rotate(-32deg); }
.uno-card.w .oval{ background:conic-gradient(#E94B3E 0 25%, #F0BE3A 0 50%, #48B85A 0 75%, #3D8FE0 0 100%); opacity:.96; }
/* 가운데 숫자/기호 = 카드 색(흰 타원 위 대비). 코너는 흰색(컬러 면 위). 와일드만 흰+스트로크(4색 타원 위). */
.uno-card .val{ position:relative; z-index:1; line-height:1; }
.uno-card.r .val{ color:#C42B20; }
.uno-card.y .val{ color:#B5790F; }
.uno-card.g .val{ color:#2E8C3D; }
.uno-card.b .val{ color:#2360B8; }
.uno-card.w .val{ color:#fff; -webkit-text-stroke:1.5px rgba(0,0,0,.4); }
.uno-card .corner{ position:absolute; z-index:2; top:2px; left:5px; font-size:.6em; line-height:1; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.55); }
.uno-discard .uno-card{ width:100%; height:100%; font-size:2.4rem; border-radius:11px; }

/* 상태바 — 차례(좌) + 점수·등수(우) 한 줄. 높이 고정(2.6rem)으로 메시지 바뀌어도 레이아웃 안 밀림. */
.uno-statusbar{ display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  height:2.6rem; padding:0 .9rem; box-sizing:border-box; }
.uno-banner{ text-align:left; font-size:.88rem; color:#dfe6f0; padding:0; letter-spacing:.01em;
  display:flex; align-items:center; min-width:0; }
.uno-banner b{ color:#F0C040; }
/* 차례 표시 — 내/상대 동일 크기. 색만 구분(내 차례=금빛 강조, 상대=차분). */
.uno-banner-turn{ font-family:var(--font-display); font-style:italic; font-weight:800;
  font-size:1.6rem; letter-spacing:.04em; color:rgba(223,230,240,.78); text-shadow:0 2px 4px rgba(0,0,0,.5); }
.uno-banner.mine .uno-banner-turn{ color:#FFD45A; text-shadow:0 0 16px rgba(255,200,70,.55), 0 2px 4px rgba(0,0,0,.5); }

/* 손패 (색별 부채, 폭 넘으면 JS가 scale로 줄임 = 잘림 방지) */
/* overflow:hidden = 가로 넘침 방지(fit-scale용). padding-top = 낼 수 있는 카드가 위로 떠도(−12, hover −20) 안 잘리게 여백 확보. */
.uno-hand{ display:flex; justify-content:center; align-items:center; flex-wrap:nowrap; overflow:hidden; padding:28px .3rem 8px; height:184px; }
/* 손패 많으면(11장+) 색별 2줄 — 카드가 작아지지 않게. 줄 간격은 띄운 카드 여유분. */
.uno-hand.two-row{ flex-direction:column; align-items:center; justify-content:flex-end; gap:13px; padding-top:22px; }
.uno-hand.two-row .uno-hc{ width:52px; height:76px; margin-left:-19px; font-size:1.5rem; }
.uno-hand.two-row .uno-hc:first-child{ margin-left:0; }
.uno-hand.two-row .uno-hc .val{ font-size:1.38rem; }
.uno-hand.two-row .uno-hc.playable{ transform:translateY(-8px); }
.uno-hand.two-row .uno-hc.playable:hover{ transform:translateY(-13px); }
.uno-fan{ display:flex; align-items:flex-end; flex:0 0 auto; width:max-content; transform-origin:center bottom; will-change:transform; }
.uno-hand .uno-hc{ flex:0 0 auto; width:58px; height:84px; margin-left:-22px; font-size:1.7rem; transition:transform .12s, box-shadow .12s; }
.uno-hand .uno-hc:first-child{ margin-left:0; }
.uno-hand .uno-hc.suit-start{ margin-left:7px; }
.uno-hand .uno-hc.suit-start:first-child{ margin-left:0; }
.uno-hand .uno-hc .val{ font-size:1.55rem; }
/* 낼 수 있는 카드 = 위로 띄움(밝게, 테두리 없음 — 색 클래시 방지). 못 내는 카드 = 아래에서 살짝 어둡게(솔리드 유지). */
.uno-hand .uno-hc.playable{ cursor:pointer; transform:translateY(-12px); z-index:2; box-shadow:0 11px 18px rgba(0,0,0,.5); }
.uno-hand .uno-hc.playable:hover{ transform:translateY(-20px); z-index:6; box-shadow:0 16px 26px rgba(0,0,0,.6); }
.uno-hand .uno-hc.illegal{ filter:brightness(.55) saturate(.82); transform:translateY(2px); }

/* 액션줄 (내 정보 + 패스 + UNO 버튼) */
/* 점수 · 등수 (상태바 우측) — 또렷하게. 숫자는 크고, 점/등 단위는 작게. */
.uno-me{ display:flex; align-items:baseline; gap:.12rem; white-space:nowrap; font-family:var(--font-display); color:#eef1f6; }
.uno-me b{ font-size:1.45rem; font-weight:800; color:#FFD45A; line-height:1; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.uno-me i{ font-size:.78rem; font-style:normal; color:rgba(235,238,245,.65); margin-right:.2rem; }
.uno-me .uno-me-div{ color:rgba(255,255,255,.25); font-size:1.05rem; margin:0 .25rem; }
/* 패스 — UNO 버튼과 같은 화면 중앙 하단 자리에 fixed(또렷한 채운 알약). UNO와 동시엔 UNO 우선(패스 숨김). */
.uno-pass{ position:fixed; left:50%; bottom:calc(218px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:60;
  background:linear-gradient(150deg,#3a4250,#262c36); border:1.5px solid rgba(255,255,255,.5); color:#fff; border-radius:999px;
  padding:.7rem 2rem; font-family:var(--font-display); font-weight:700; font-size:1.15rem; letter-spacing:.04em; cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.15); }
.uno-pass:active{ transform:translateX(-50%) scale(.95); }
/* UNO! 콜 버튼 — 손패 위 화면 중앙 하단에 크고 동그란 큐 버튼. 엄지로 바로 누르기 쉽게. */
.uno-callbtn{ position:fixed; left:50%; bottom:calc(210px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:60;
  width:78px; height:78px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 38% 32%, #FF5C4A, #E0382C 55%, #B01810); color:#fff; border:3px solid #F0BE3A;
  font-family:var(--font-display); font-weight:800; font-style:italic; font-size:1.35rem; letter-spacing:.02em; cursor:pointer;
  box-shadow:0 8px 26px rgba(0,0,0,.5), 0 0 28px rgba(240,58,46,.6), inset 0 2px 6px rgba(255,255,255,.35);
  animation:uno-call 1s ease-in-out infinite; }
.uno-callbtn:active{ transform:translateX(-50%) scale(.93); }
@keyframes uno-call{ 0%,100%{ box-shadow:0 8px 26px rgba(0,0,0,.5), 0 0 24px rgba(240,58,46,.55), inset 0 2px 6px rgba(255,255,255,.35); }
  50%{ box-shadow:0 10px 32px rgba(0,0,0,.5), 0 0 44px rgba(255,90,70,.9), inset 0 2px 6px rgba(255,255,255,.45); } }

/* 색 선택기 (와일드 낼 때) */
.uno-cp-card{ background:linear-gradient(160deg,#23262e,#14161c); border:1.5px solid rgba(255,255,255,.12); border-radius:18px; padding:1.4rem;
  box-shadow:0 20px 60px rgba(0,0,0,.6); display:flex; flex-direction:column; align-items:center; gap:1rem; }
.uno-cp-title{ font-family:var(--font-display); font-size:1.1rem; color:#eef1f6; }
.uno-cp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.uno-cp{ width:74px; height:74px; border-radius:14px; border:none; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.4); transition:transform .1s; }
.uno-cp:active{ transform:scale(.92); }
.uno-cp[data-c=r]{ background:linear-gradient(150deg,#E94B3E,#C42B20); }
.uno-cp[data-c=y]{ background:linear-gradient(150deg,#F0BE3A,#D29A18); }
.uno-cp[data-c=g]{ background:linear-gradient(150deg,#48B85A,#2E8C3D); }
.uno-cp[data-c=b]{ background:linear-gradient(150deg,#3D8FE0,#2360B8); }

/* 라운드 결과 모달 — 플레이어별 잔여/점수 줄 */
.uno-rr{ display:flex; flex-direction:column; gap:.45rem; width:100%; }
.uno-rr-row{ display:flex; align-items:center; gap:.55rem; padding:.45rem .7rem; border-radius:.6rem;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); }
.uno-rr-row.win{ border-color:rgba(245,200,80,.55); background:rgba(245,200,80,.1); }
.uno-rr-row.me .uno-rr-name{ color:#ffe9a8; }
/* 등수 — 누적 점수 순. 1등은 금색 강조. */
.uno-rr-rank{ flex:0 0 auto; width:1.4rem; height:1.4rem; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:.82rem; border-radius:50%;
  background:rgba(255,255,255,.08); color:rgba(235,238,245,.7); }
.uno-rr-row:first-child .uno-rr-rank{ background:linear-gradient(150deg,#F0BE3A,#C99012); color:#1a1206; box-shadow:0 0 10px rgba(240,190,60,.5); }
.uno-rr-name{ flex:1 1 auto; font-size:.92rem; color:#eef1f6; font-weight:600; }
.uno-rr-mid{ flex:0 0 auto; font-size:.76rem; color:rgba(235,238,245,.6); }
.uno-rr-gain{ color:#F0C040; font-weight:800; }
.uno-rr-pts{ flex:0 0 auto; min-width:3.2rem; text-align:right; font-family:var(--font-display); font-size:1.05rem; font-weight:700; color:#F0C040; }

/* ════════════════════════════════════════════════════════
   러미 다크 모달·드로어 — 게임(다크 그린 펠트) 톤에 맞춤
   (lostcities 크림 셸 → 다크. 인라인 잉크색은 속성선택자로 라이트 전환)
   ════════════════════════════════════════════════════════ */
.lc-card-modal{ background:linear-gradient(160deg,#1c1f26,#0d0e12); border:1.5px solid rgba(240,192,64,.2); box-shadow:0 20px 60px rgba(0,0,0,.6); }
.lc-card-modal [style*="--ink"]{ color:#EAF2EC !important; }
.lc-card-modal [style*="58,52,44"]{ color:rgba(234,242,236,.58) !important; }
.lc-card-modal .lc-help-h{ color:#F0C040; }
.lc-card-modal .lc-btn{ background:#D2382C; color:#fff; box-shadow:0 4px 16px rgba(210,56,44,.4); }
.lc-card-modal .lc-btn-ghost-sm{ color:rgba(234,242,236,.55); }
.lc-card-modal .lc-btn-ghost-sm:hover{ color:rgba(234,242,236,.92); }
.lc-card-modal .lc-btn-danger, #log-drawer .lc-btn-danger{ background:rgba(60,30,28,.55); border:1.5px solid rgba(204,120,108,.5); color:#E8B0A0; box-shadow:none; }
.lc-card-modal .lc-btn-danger:active, #log-drawer .lc-btn-danger:active{ background:rgba(80,38,36,.65); }
/* 딜 결과 reveal (카드는 그대로 크림, 텍스트만 라이트) */
.lc-card-modal .rm-reveal{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); }
.lc-card-modal .rm-reveal-head{ color:#EAF2EC; }
.lc-card-modal .rm-none{ color:rgba(234,242,236,.4); }
.lc-card-modal .rm-final{ color:#EAF2EC; }
.lc-card-modal .rm-final b{ color:#F0C040; }
/* 전적 리스트 행 */
.lc-card-modal #record-list > div{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.12) !important; }
/* 기록 드로어 */
.drawer-panel{ background:linear-gradient(160deg,#1c1f26,#0d0e12); box-shadow:-6px 0 40px rgba(0,0,0,.6); }
.drawer-head{ color:#EAF2EC; border-bottom-color:rgba(255,255,255,.12); }
.drawer-head button{ color:rgba(234,242,236,.55); }
.lc-log-line{ background:rgba(255,255,255,.03); }
#log-drawer #log{ color:rgba(234,242,236,.62) !important; }

/* 딜 결과 점수줄 — [내이름] [점수] : [점수] [상대이름], 점수 가운데·이름 동일 gap, 승=그린/패=레드 */
/* 점수 코어(auto)를 가운데 고정 — 양옆 이름은 동일 폭(1fr)이라 이름 길이가 달라도 점수는 항상 중앙 */
#deal-score{ display:grid; grid-template-columns:1fr auto 1fr; align-items:baseline; }
.rm-sc-name{ font-size:.95rem; color:rgba(234,242,236,.62); white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; }
#deal-score .rm-sc-name:first-child{ text-align:right; padding-right:.9rem; }
#deal-score .rm-sc-name:last-child{ text-align:left; padding-left:.9rem; }
.rm-sc-core{ display:flex; align-items:baseline; justify-content:center; gap:.5rem; }
.rm-sc-num{ font-family:var(--font-display); font-size:1.9rem; font-weight:700; line-height:1; }
.rm-sc-num.win{ color:#F0C040; }
.rm-sc-num.lose{ color:#E08C7C; }
.rm-sc-num.tie{ color:rgba(234,242,236,.7); }
.rm-sc-sep{ font-size:1.3rem; color:rgba(234,242,236,.35); }

/* 딜 종료 전체 오버레이 (KNOCK!/GIN!/UNDERCUT!) — 뜰 때 deal 효과음, 사라지면서 딜 결과 모달 */
#knock-announce{ position:fixed; inset:0; z-index:88; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 90% at 50% 50%, rgba(10,16,12,.78) 0%, rgba(6,10,8,.92) 100%);
  opacity:0; pointer-events:none; transition:opacity .42s ease; }
#knock-announce.show{ opacity:1; }
.knock-text{ font-family:var(--font-display); font-weight:700; letter-spacing:.04em;
  font-size:clamp(3.2rem, 19vw, 6.5rem); color:#F0C040; text-shadow:0 0 48px rgba(240,192,64,.55), 0 4px 24px rgba(0,0,0,.6);
  text-align:center; line-height:.92;
  transform:scale(.8); transition:transform .42s cubic-bezier(.18,.9,.3,1.25); }
#knock-announce.show .knock-text{ transform:scale(1); }
/* 핸드 정산 플래시 변형 — 성공(아이스블루) / 실패 SET(빨강 + 배경 붉은 워시) */
#knock-announce.set{ background:radial-gradient(120% 90% at 50% 50%, rgba(60,14,12,.82) 0%, rgba(8,6,8,.92) 100%); }
#knock-announce.set .knock-text{ color:#E0584C; text-shadow:0 0 48px rgba(224,88,76,.55), 0 4px 24px rgba(0,0,0,.6); }
#knock-announce.made .knock-text{ color:#F0C040; text-shadow:0 0 52px rgba(240,192,64,.7), 0 4px 24px rgba(0,0,0,.6); }

/* 매치 승리 컨페티 — 위에서 떨어지는 가벼운 조각 */
.sp-confetti{ position:fixed; inset:0; z-index:90; pointer-events:none; overflow:hidden; }
.sp-confetti i{ position:absolute; top:-24px; width:9px; height:14px; border-radius:2px; opacity:.95; animation-name:sp-fall; animation-timing-function:cubic-bezier(.3,.5,.6,1); animation-fill-mode:forwards; }
@keyframes sp-fall{ from{ transform:translateY(-24px) rotate(0); opacity:.95; } to{ transform:translateY(112vh) rotate(560deg); opacity:.15; } }

/* 액션 콜아웃 — 리버스/스킵/+N/UNO 등 짧게 번쩍(테이블 위쪽, 손패 안 가림) */
/* 액션 콜아웃 — 우노 카드 모양 배지(둥근 사각 + 비스듬한 흰 타원) 위에 텍스트.
   게임 카드와 같은 디자인 언어. 변형별로 카드 바탕색 매핑(--cc). */
#uno-callout{ position:fixed; top:30%; left:0; right:0; z-index:86; display:flex; justify-content:center; pointer-events:none; opacity:0; }
#uno-callout.show{ animation:uno-callout-pop 1.15s cubic-bezier(.3,1.3,.5,1) forwards; }
@keyframes uno-callout-pop{ 0%{opacity:0; transform:translateY(14px) scale(.9) rotate(-5deg);}
  14%{opacity:1; transform:translateY(0) scale(1) rotate(-3deg);}
  78%{opacity:1; transform:translateY(0) scale(1) rotate(-3deg);}
  100%{opacity:0; transform:translateY(-10px) scale(.98) rotate(-3deg);} }
#uno-callout-text{ --cc:#E23B2E; position:relative; display:flex; align-items:center; justify-content:center; white-space:nowrap;
  box-sizing:border-box; min-width:4.6em; min-height:2.6em; padding:1.5rem 2.4rem; border-radius:18px;
  transform:rotate(-3deg); overflow:hidden;
  background:var(--cc); box-shadow:0 12px 30px rgba(0,0,0,.45), inset 0 0 0 3px rgba(255,255,255,.92);
  font-family:var(--font-display); font-weight:800; font-style:italic; letter-spacing:.01em;
  font-size:clamp(1.7rem,7.5vw,2.8rem); line-height:1; color:var(--cc);
  -webkit-text-stroke:.4px rgba(0,0,0,.15); }
/* 흰 타원 — 카드와 같은 방향(-3°)으로 완만하게, 텍스트를 가로·세로 넉넉히 덮음.
   기울기를 카드와 맞춰 정렬감 유지 + 좌상단 글자 안 샘. z-index:-1로 텍스트 뒤. */
#uno-callout-text::before{ content:''; position:absolute; left:50%; top:50%; width:128%; height:72%;
  transform:translate(-50%,-50%) rotate(-3deg); border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.14); z-index:-1; }
#uno-callout.rev  #uno-callout-text{ --cc:#E8A81E; }
#uno-callout.skip #uno-callout-text{ --cc:#E0392C; }
#uno-callout.draw #uno-callout-text{ --cc:#E0392C; }
#uno-callout.eat  #uno-callout-text{ --cc:#5A6678; }

/* ── UNO! — 1장 남은 결정적 순간. 더 크고 금빛으로 특별하게 ── */
#uno-callout.uno{ top:26%; }
#uno-callout.uno.show{ animation:uno-callout-uno 1.8s cubic-bezier(.2,1.5,.4,1) forwards; }
@keyframes uno-callout-uno{ 0%{opacity:0; transform:translateY(20px) scale(.5) rotate(-9deg);}
  12%{opacity:1; transform:translateY(0) scale(1.18) rotate(4deg);}
  22%{transform:translateY(0) scale(1) rotate(-4deg);}
  30%{transform:translateY(0) scale(1.06) rotate(2deg);}
  40%,82%{transform:translateY(0) scale(1) rotate(-3deg);}
  100%{opacity:0; transform:translateY(-16px) scale(1.02) rotate(-3deg);} }
#uno-callout.uno #uno-callout-text{ --cc:#E0392C; padding:1.4rem 2.3rem; font-size:clamp(2rem,9vw,3.4rem);
  /* 금테 + 붉은빛/금빛 이중 글로우 + 흰 안쪽선 */
  box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 30px rgba(255,60,40,.55), 0 0 60px rgba(240,190,60,.45),
    inset 0 0 0 3px rgba(255,255,255,.95), inset 0 0 0 7px #F0BE3A;
  animation:uno-gold-pulse 1s ease-in-out infinite; }
@keyframes uno-gold-pulse{ 0%,100%{ box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 26px rgba(255,60,40,.5), 0 0 50px rgba(240,190,60,.35),
    inset 0 0 0 3px rgba(255,255,255,.95), inset 0 0 0 7px #F0BE3A; }
  50%{ box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 40px rgba(255,80,55,.75), 0 0 80px rgba(245,200,80,.6),
    inset 0 0 0 3px rgba(255,255,255,.95), inset 0 0 0 7px #FFD45A; } }
/* UNO는 타원도 키워 큰 글씨를 받침 (base와 동일한 중앙정렬·각도 유지) */
#uno-callout.uno #uno-callout-text::before{ width:136%; height:76%; transform:translate(-50%,-50%) rotate(-3deg); }
/* 와일드 색 바뀜 플래시 */
#uno-colorflash{ position:fixed; inset:0; z-index:40; pointer-events:none; opacity:0; }

/* 로비 메뉴 버튼 — 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; }