@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Noto+Serif+KR:wght@300;400;600;700&display=swap');
:root{--bg:#1a0f00;--bg2:#2a1a00;--panel:#231500;--border:#5a3a10;--gold:#c8922a;--glt:#f0c060;--hjw:#e8d5a0;--radius:10px;}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--hjw);font-family:'Noto Serif KR',serif;min-height:100vh;overflow:hidden;}
.screen{display:none;width:100%;height:100vh;}
.screen.show{display:flex;flex-direction:column;}

/* 모드 선택 */
#sm{align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,#2a1800 0%,#0d0800 100%);}
.mttl{font-family:'Nanum Myeongjo',serif;font-size:2.8rem;font-weight:800;color:var(--glt);text-shadow:0 0 30px rgba(200,146,42,.5);margin-bottom:.3rem;}
.msub{font-size:.85rem;color:var(--gold);opacity:.8;margin-bottom:2rem;}
.mrow{display:flex;gap:1.2rem;}
.mc{background:var(--panel);border:1.5px solid var(--border);border-radius:var(--radius);padding:1.5rem 2rem;text-align:center;cursor:pointer;transition:all .2s;min-width:160px;}
.mc:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 8px 24px rgba(200,146,42,.2);}
.mc .ico{font-size:2.2rem;display:block;margin-bottom:.5rem;}
.mc h3{color:var(--glt);font-size:1.1rem;margin-bottom:.3rem;}
.mc p{color:var(--hjw);opacity:.6;font-size:.78rem;}

/* 모달 공통 */
.mbg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:100;align-items:center;justify-content:center;}
.mbg.show{display:flex;}
.mbox{background:var(--panel);border:1.5px solid var(--border);border-radius:var(--radius);padding:1.8rem;min-width:300px;max-width:420px;text-align:center;}
.mbox h2{color:var(--glt);font-family:'Nanum Myeongjo',serif;margin-bottom:.5rem;}
.mbtns{display:flex;gap:.6rem;justify-content:center;margin-top:1rem;flex-wrap:wrap;}
.ba{background:var(--bg2);border:1.5px solid var(--border);color:var(--hjw);border-radius:6px;padding:.5rem 1.1rem;cursor:pointer;font-size:.85rem;transition:all .15s;}
.ba:hover{border-color:var(--gold);color:var(--glt);}
.dbtn{display:flex;align-items:center;gap:.8rem;width:100%;background:var(--bg2);border:1.5px solid var(--border);border-radius:8px;padding:.8rem 1rem;cursor:pointer;color:var(--hjw);margin-bottom:.5rem;transition:all .15s;text-align:left;}
.dbtn:hover{border-color:var(--gold);}
.dico{font-size:1.8rem;}.dnm{color:var(--glt);font-weight:700;font-size:.95rem;}.dds{font-size:.75rem;opacity:.7;}

/* ⭐ 무늬 선택 모달 - 배경 블러 처리 */
.suit-btns{display:flex;gap:1rem;justify-content:center;margin-top:.8rem;}
.sbtn{width:60px;height:60px;border-radius:8px;border:2px solid var(--border);background:var(--bg2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.sbtn:hover{transform:scale(1.15);border-color:var(--gold);}

/* 모달이 열려있을 때 게임 영역 - 블러 없음! */
body.modal-open .gbody,
body.modal-open .gmain {
  filter: none;  /* ⭐ 블러 완전 제거: 1px → 0 */
  pointer-events: none;
}

/* 게임 화면 */
#sg{background:radial-gradient(ellipse at 50% 0%,#2a1800 0%,#0d0800 100%);}
.ghdr{display:flex;align-items:center;padding:.5rem 1rem;border-bottom:1px solid var(--border);background:rgba(0,0,0,.3);gap:.5rem;}
.ghdr h2{flex:1;text-align:center;color:var(--glt);font-size:1rem;font-family:'Nanum Myeongjo',serif;}
.bh{background:var(--bg2);border:1px solid var(--border);color:var(--hjw);border-radius:6px;padding:.3rem .7rem;cursor:pointer;font-size:.8rem;}
.bh:hover{border-color:var(--gold);}
.gbody{flex:1;display:flex;overflow:hidden;padding:.6rem;gap:.6rem;}
.gmain{flex:1;display:flex;flex-direction:column;gap:.5rem;min-width:0;}

/* 상대방 */
.opponents{display:flex;gap:.5rem;}
.opp-area{flex:1;background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:8px;padding:.5rem .6rem;text-align:center;}
.opp-area.active-turn{border-color:var(--gold);box-shadow:0 0 12px rgba(200,146,42,.3);}
.opp-name{font-size:.75rem;color:var(--hjw);opacity:.8;margin-bottom:.3rem;}
.opp-cards{display:flex;justify-content:center;flex-wrap:wrap;gap:1px;min-height:34px;align-items:center;}
.opp-card-back{width:18px;height:28px;background:linear-gradient(135deg,#1a3a6a 40%,#0d1f3c 100%);border:1px solid #3a6aaa;border-radius:3px;}
.opp-count{font-size:.7rem;color:var(--gold);margin-top:.2rem;}

/* 테이블 */
.table-area{flex:1;display:flex;align-items:center;justify-content:center;position:relative;background:radial-gradient(ellipse at center,#0a1f0a 0%,#050d05 100%);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.turn-dir{position:absolute;top:8px;right:10px;font-size:1.2rem;color:var(--gold);z-index:3;}
.deck-area{display:flex;gap:1.2rem;align-items:center;position:relative;z-index:2;}
.deck-pile{cursor:pointer;}
.deck-pile:hover .card-back{transform:scale(1.04);}

/* ⭐ 버려진 패 - 클릭 시 펼쳐지기 */
#discardArea {
  position: relative;
  width: 100px;  /* 기본 상태에서 약간 더 넓게 (카드 겹침 보임) */
  height: 100px;
  perspective: 1000px;
  cursor: pointer;
  transition: width 0.4s ease;
}

/* 클릭 상태 - 펼쳐짐 */
#discardArea.expanded {
  width: 480px;  /* 8장이 펼쳐질 공간 */
}

/* 카드들을 겹쳐서 표시 */
#discardArea .card {
  position: absolute;
  width: 68px;
  height: 100px;
  bottom: 0;
  left: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  cursor: pointer;
}

/* ── 기본 상태 (접혀있음) ── */

/* 맨 위 카드 (현재=마지막 자식) - 항상 보임 */
#discardArea .card:last-child {
  z-index: 30;
  transform: translate(0, 0) rotateZ(0deg);
  opacity: 1;
}

/* 이전 카드 1번째 (마지막에서 2번째) - 약간 보임 */
#discardArea .card:nth-last-child(2) {
  z-index: 29;
  transform: translate(-6px, -2px) rotateZ(-1deg);
  opacity: 0.7;
}

/* 이전 카드 2번째 (마지막에서 3번째) - 조금 보임 */
#discardArea .card:nth-last-child(3) {
  z-index: 28;
  transform: translate(-12px, -4px) rotateZ(-2deg);
  opacity: 0.5;
}

/* 이전 카드 3번째 이상 - 숨김 */
#discardArea .card:nth-last-child(n+4) {
  opacity: 0;
  pointer-events: none;
}

/* ── 펼쳐진 상태 (클릭됨) ── */

/* 맨 처음 카드 (첫번째) */
#discardArea.expanded .card:first-child {
  z-index: 5;
  transform: translate(0, 0) rotateZ(0deg);
  opacity: 1;
}

/* 두번째 카드 */
#discardArea.expanded .card:nth-child(2) {
  z-index: 6;
  transform: translate(56px, 0) rotateZ(0deg);
  opacity: 1;
}

/* 세번째 카드 */
#discardArea.expanded .card:nth-child(3) {
  z-index: 7;
  transform: translate(112px, 0) rotateZ(0deg);
  opacity: 1;
}

/* 네번째 카드 */
#discardArea.expanded .card:nth-child(4) {
  z-index: 8;
  transform: translate(168px, 0) rotateZ(0deg);
  opacity: 1;
}

/* 다섯번째 카드 */
#discardArea.expanded .card:nth-child(5) {
  z-index: 9;
  transform: translate(224px, 0) rotateZ(0deg);
  opacity: 1;
}

/* 여섯번째 카드 */
#discardArea.expanded .card:nth-child(6) {
  z-index: 10;
  transform: translate(280px, 0) rotateZ(0deg);
  opacity: 1;
}

/* 일곱번째 카드 */
#discardArea.expanded .card:nth-child(7) {
  z-index: 10;
  transform: translate(336px, 0) rotateZ(0deg);
  opacity: 1;
}

/* 여덟번째 카드 (최신) */
#discardArea.expanded .card:nth-child(8) {
  z-index: 20;
  transform: translate(392px, 0) rotateZ(0deg);
  opacity: 1;
}

/* ★ 포커 카드 */
.card{
  border-radius:8px;
  background:#fff;
  border:1.5px solid #ccc;
  position:relative;
  cursor:pointer;
  user-select:none;
  transition:transform .15s, box-shadow .15s;
  box-shadow:2px 3px 8px rgba(0,0,0,.45);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.card:hover:not(#discardTop){transform:translateY(-10px) scale(1.05);box-shadow:0 16px 32px rgba(0,0,0,.6);}
.card.unplayable{opacity:.4;cursor:not-allowed;}
.card.unplayable:hover{transform:none;box-shadow:2px 3px 8px rgba(0,0,0,.45);}
.card.selected{transform:translateY(-18px);box-shadow:0 20px 40px rgba(200,146,42,.6);outline:2px solid var(--gold);}

/* 카드 모서리 */
.c-corner{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:1;gap:1px;}
.c-corner.tl{top:4px;left:5px;}
.c-corner.br{bottom:4px;right:5px;transform:rotate(180deg);}
.c-rank{font-size:.82rem;font-weight:900;line-height:1;font-family:'Nanum Myeongjo',serif;}
.c-suit-svg{display:flex;align-items:center;}
.c-center-suit{display:flex;align-items:center;justify-content:center;}

/* 카드 뱃지 (특수카드 표시) */
.card-badge{
  position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
  font-size:.55rem;font-weight:900;
  background:rgba(0,0,0,.12);
  color:inherit;border-radius:3px;
  padding:0 3px;line-height:1.4;
  white-space:nowrap;
}

/* 카드 색상 */
.card.red{color:#c0392b;}
.card.black{color:#1a1a1a;}
.card.joker-color{background:linear-gradient(135deg,#fffb00 0%,#ff00c8 50%,#00cfff 100%);border:2px solid #fff;color:#000;}
.card.joker-bw{background:linear-gradient(145deg,#eee 0%,#888 100%);border:1.5px solid #999;color:#111;}

/* 카드 뒷면 */
.card-back{
  width:68px;height:100px;
  border-radius:8px;
  background:linear-gradient(135deg,#1a3a6a 0%,#0d1f3c 100%);
  border:2px solid #3a6aaa;
  box-shadow:2px 3px 8px rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;transition:transform .15s;cursor:pointer;
  position:relative;overflow:hidden;
}
.card-back::after{content:'';position:absolute;inset:4px;border:1px solid rgba(58,106,170,.5);border-radius:5px;}

/* 내 손패 */
.my-area{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.7rem .6rem;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:8px;min-height:160px;}
.my-label{font-size:.75rem;color:var(--gold);font-weight:700;}
.my-hand{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;justify-content:center;min-height:125px;overflow-x:auto;overflow-y:hidden;padding:10px;flex:1;width:100%;}  /* ⭐ justify-content: center 추가 */
.my-hand .card{width:76px;height:108px;}
.my-hand::-webkit-scrollbar{height:6px;}
.my-hand::-webkit-scrollbar-track{background:rgba(50,50,50,.3);border-radius:3px;}
.my-hand::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;cursor:pointer;}
.my-hand::-webkit-scrollbar-thumb:hover{background:rgba(100,100,100,.8);}

/* 오른쪽 패널 */
.side{width:185px;display:flex;flex-direction:column;gap:.4rem;}
.turn-badge{background:var(--panel);border:1.5px solid var(--border);border-radius:8px;padding:.5rem;text-align:center;font-size:.8rem;color:var(--glt);}
.turn-badge.myturn{border-color:var(--gold);box-shadow:0 0 12px rgba(200,146,42,.3);}
.pgrid{display:flex;flex-direction:column;gap:.25rem;}
.pcard{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:.3rem .5rem;font-size:.72rem;display:flex;align-items:center;gap:.4rem;}
.pcard.active{border-color:var(--gold);}
.pname{flex:1;color:var(--hjw);}.pcnt{color:var(--gold);font-weight:700;}.pdot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.btn-draw{background:var(--bg2);border:1.5px solid var(--border);color:var(--hjw);border-radius:8px;padding:.6rem;cursor:pointer;font-size:.85rem;width:100%;transition:all .15s;}
.btn-draw:hover:not(:disabled){border-color:var(--gold);color:var(--glt);}
.btn-draw:disabled{opacity:.4;cursor:not-allowed;}
.btn-onecard{
  background:linear-gradient(135deg,#8b0000,#c0392b);
  border:2px solid #e74c3c;
  color:white;
  border-radius:8px;
  padding:1rem 1.2rem;  /* ⭐ 더 큼: 0.7rem → 1rem */
  cursor:pointer;
  font-size:1.1rem;  /* ⭐ 더 큼: 0.95rem → 1.1rem */
  font-weight:700;
  width:100%;
  letter-spacing:1px;
  transition:all .15s;
  display:block;
  box-shadow:0 0 0 rgba(231,76,60,.5);
  min-height:50px;  /* ⭐ 최소 높이 추가 */
  display:flex;  /* ⭐ 플렉스로 중앙 정렬 */
  align-items:center;
  justify-content:center;
}

/* ⭐ 활성 상태 (손패 1장 또는 타이머) */
.btn-onecard.btn-active{
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  cursor: pointer;
  opacity: 1;
  box-shadow: 0 0 30px rgba(231,76,60,1), inset 0 0 10px rgba(255,255,255,0.2);  /* ⭐ 더 강한 글로우 */
  animation: pulse-red-strong 0.8s ease infinite;
  border-color: #ff6b6b;  /* ⭐ 더 밝은 색 */
}

.btn-onecard.btn-active:hover {
  transform: scale(1.08);  /* ⭐ 더 큼: 1.05 → 1.08 */
  box-shadow: 0 0 40px rgba(231,76,60, 1);
}

@keyframes pulse-red-strong{
  0%{box-shadow:0 0 20px rgba(231,76,60,.8), inset 0 0 10px rgba(255,255,255,0.1);}
  50%{box-shadow:0 0 40px rgba(231,76,60,1), inset 0 0 10px rgba(255,255,255,0.3);}
  100%{box-shadow:0 0 20px rgba(231,76,60,.8), inset 0 0 10px rgba(255,255,255,0.1);}
}

/* ⭐ 비활성 상태 (손패 2장 이상) */
.btn-onecard.btn-inactive{
  background: linear-gradient(135deg, #4a4a4a, #666666);
  border-color: #888888;
  color: #cccccc;
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
  animation: none;
}

.btn-onecard.btn-inactive:hover {
  transform: none;
  box-shadow: none;
}

/* ⭐ 지적 모드 (타이머 활성) */
.btn-onecard.btn-missed{
  background: linear-gradient(135deg, #ff6b00, #ff8800);
  border-color: #ffaa00;
  animation: pulse-missed 0.5s ease infinite;
  font-size: 1rem;
}

@keyframes pulse-missed{
  0%,100%{box-shadow:0 0 10px rgba(255,170,0,.6);}
  50%{box-shadow:0 0 30px rgba(255,170,0,1);}
}

@keyframes pulse-red{0%,100%{box-shadow:0 0 8px rgba(231,76,60,.4);}50%{box-shadow:0 0 20px rgba(231,76,60,.8);}}
.loga{flex:1;overflow-y:auto;background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:6px;padding:.4rem .5rem;font-size:.7rem;min-height:80px;max-height:180px;}
.loga::-webkit-scrollbar{width:4px;}
.loga::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
.ll{padding:1px 0;border-bottom:1px solid rgba(255,255,255,.04);color:var(--hjw);opacity:.8;}
.ll.em{color:var(--glt);opacity:1;font-weight:700;}
.ll.bad{color:#e74c3c;opacity:1;}
.ai-think{font-size:.72rem;color:var(--gold);text-align:center;opacity:0;transition:opacity .2s;padding:.2rem;}
.ai-think.show{opacity:1;}
.toast{position:fixed;bottom:60px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(200,146,42,.9);color:#1a0f00;border-radius:20px;padding:.5rem 1.2rem;font-size:.85rem;font-weight:700;opacity:0;transition:all .3s;pointer-events:none;z-index:999;white-space:nowrap;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.spop{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%) scale(.5);background:rgba(200,146,42,.95);color:#1a0f00;border-radius:12px;padding:.6rem 1.4rem;font-size:1.4rem;font-weight:800;opacity:0;z-index:200;pointer-events:none;animation:popIn .6s ease forwards;}
@keyframes popIn{0%{transform:translate(-50%,-50%) scale(.5);opacity:0;}40%{transform:translate(-50%,-50%) scale(1.1);opacity:1;}70%{transform:translate(-50%,-50%) scale(.95);opacity:1;}100%{transform:translate(-50%,-50%) scale(1);opacity:0;}}
.rrk{display:flex;flex-direction:column;gap:.4rem;margin-top:.8rem;}
.rrow{display:flex;align-items:center;gap:.6rem;background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:.4rem .7rem;}
.rrank{font-size:1.1rem;width:24px;}.rname{flex:1;color:var(--hjw);font-size:.85rem;}.rscore{color:var(--gold);font-size:.8rem;}

/* ── 카드 날아오는 애니메이션 ── */
.fly-card {
  position: fixed;
  width: 44px; height: 64px;
  border-radius: 6px;
  background: linear-gradient(135deg,#1a3a6a,#0d1f3c);
  border: 2px solid #3a6aaa;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  z-index: 400;
  pointer-events: none;
  animation: flyToHand .7s cubic-bezier(.25,.46,.45,.94) forwards;
}
@keyframes flyToHand {
  0%   { transform: translate(0,0) scale(1) rotate(0deg);   opacity: 1; }
  60%  { transform: translate(calc(var(--dx)*.6), calc(var(--dy)*.6)) scale(.9) rotate(-8deg); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.5) rotate(-15deg); opacity: 0; }
}

/* ── 뽑기 발동 팝업 ── */
.draw-popup {
  position: fixed;
  left: 50%; top: 42%;
  transform: translate(-50%, -50%) scale(1);
  background: rgba(15,3,0,.97);
  border: 2px solid #c0392b;
  border-radius: 16px;
  padding: 1rem 1.6rem 1.2rem;
  text-align: center;
  z-index: 350;
  pointer-events: none;
  min-width: 220px;
  box-shadow: 0 0 50px rgba(231,76,60,.45), inset 0 1px 0 rgba(255,255,255,.05);
  transition: opacity .5s ease, transform .5s ease;
  animation: popupIn .3s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes popupIn {
  0%   { transform: translate(-50%,-50%) scale(.5); opacity:0; }
  100% { transform: translate(-50%,-50%) scale(1);  opacity:1; }
}
.draw-popup-me {
  border-color: #e74c3c;
  box-shadow: 0 0 70px rgba(231,76,60,.7), inset 0 1px 0 rgba(255,255,255,.05);
  animation: popupIn .3s cubic-bezier(.34,1.56,.64,1) forwards, shake .5s ease .3s;
}
@keyframes shake {
  0%,100%{transform:translate(-50%,-50%) scale(1);}
  20%    {transform:translate(-48%,-50%) scale(1.03);}
  40%    {transform:translate(-52%,-50%) scale(1.03);}
  60%    {transform:translate(-49%,-50%) scale(1.01);}
  80%    {transform:translate(-51%,-50%) scale(1.01);}
}
.dp-reason {
  font-size: .72rem;
  color: #f0c060;
  opacity: .8;
  margin-bottom: .2rem;
  letter-spacing: .5px;
}
.dp-header {
  font-size: 1.05rem;
  font-weight: 700;
  color: #e8d5a0;
  margin-bottom: .15rem;
}
.dp-amt {
  font-size: 1.9rem;
  font-weight: 900;
  color: #e74c3c;
  margin-bottom: .55rem;
  font-family: 'Nanum Myeongjo', serif;
  text-shadow: 0 0 20px rgba(231,76,60,.6);
}
.dp-cards {
  display: flex;
  gap: 3px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 260px;
}
.dp-card {
  background: #fff;
  border-radius: 4px;
  padding: 2px 5px;
  font-size: .75rem;
  font-weight: 700;
  min-width: 26px;
  text-align: center;
  color: #1a1a1a;
  line-height: 1.5;
}
.dp-card.joker-mini { background: linear-gradient(135deg,#ff0,#f0f,#0ff); color:#000; }
.dp-more { background: #333; color: #e8d5a0; }
.dp-sub {
  font-size: .65rem;
  color: #e8d5a0;
  opacity: .5;
  margin-top: .5rem;
}

/* ── 쌓기 힌트 ── */
.stack-amt {
  font-size: .88rem;
  font-weight: 900;
  color: #e74c3c;
}
.stack-hint {
  font-size: .63rem;
  color: #f0c060;
  opacity: .9;
}

/* ── 탈락 팝업 ── */
.elim-popup {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  background: rgba(15, 3, 0, 0.98);
  border: 2px solid #e74c3c;
  border-radius: 16px;
  padding: 2rem 2.5rem;
  text-align: center;
  z-index: 350;
  pointer-events: none;
  box-shadow: 0 0 60px rgba(231, 76, 60, 0.6);
  animation: elimIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

@keyframes elimIn {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.elim-popup-me {
  border-color: #c0392b;
  box-shadow: 0 0 80px rgba(192, 57, 43, 0.8);
}

.elim-icon {
  font-size: 4rem;
  margin-bottom: 0.5rem;
  animation: bounce 0.8s ease infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.elim-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: #e8d5a0;
  margin-bottom: 0.3rem;
  font-family: 'Nanum Myeongjo', serif;
}

.elim-msg {
  font-size: 1.1rem;
  color: #e74c3c;
  font-weight: 900;
  margin-bottom: 0.2rem;
}

.elim-sub {
  font-size: 0.8rem;
  color: #f0c060;
  opacity: 0.7;
}

/* ⭐ 무늬 표시 영역 - SVG 색상 강제 변경 */
#suitDisplay svg path {
  fill: #000000 !important;
}

#suitDisplay svg polygon {
  fill: #000000 !important;
}

#suitDisplay svg circle {
  fill: #000000 !important;
}

#suitDisplay svg rect {
  fill: #000000 !important;
}
/* ══════════════════════════════
   로비 화면 (장기 스타일)
══════════════════════════════ */
:root{
  --wood-dark:#1e0c02;--wood-mid:#2e1505;--wood-light:#3a1a06;
  --hanji:#f0e6c8;--hanji-warm:#e8d5a0;
  --gold-lt:#f0c060;--gold-dk:#a06820;
}

/* 로비 배경 */
#sl{
  align-items:center;
  justify-content:center;
  background:radial-gradient(ellipse at 50% 30%,#3a1a06,#1e0c02 70%);
  overflow-y:auto;
}

.lobby-wrap{
  width:min(460px,95vw);
  background:linear-gradient(160deg,var(--wood-mid),var(--wood-dark));
  border:1.5px solid #7a4820;
  border-radius:14px;
  padding:1.4rem 1.6rem 1.6rem;
  box-shadow:0 0 40px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,220,120,.08);
  display:flex;flex-direction:column;gap:.55rem;
  max-height:92vh;overflow-y:auto;
}
.lobby-wrap::-webkit-scrollbar{width:4px;}
.lobby-wrap::-webkit-scrollbar-thumb{background:var(--gold-dk);border-radius:2px;}

.lobby-header{
  font-family:'Nanum Myeongjo',serif;
  font-size:1.4rem;font-weight:800;
  color:var(--gold-lt);
  text-align:center;
  text-shadow:0 0 20px rgba(200,146,42,.4);
  padding-bottom:.5rem;
  border-bottom:1px solid rgba(200,146,42,.25);
  margin-bottom:.2rem;
}

.lobby-user{
  background:rgba(0,0,0,.3);
  border:1px solid rgba(200,146,42,.2);
  border-radius:8px;
  padding:.55rem .9rem;
  font-size:.85rem;color:var(--hanji-warm);
}

.lobby-notice{
  color:#e74c3c;font-size:.85rem;text-align:center;
  padding:.6rem;border:1px solid #e74c3c;
  border-radius:6px;background:rgba(231,76,60,.08);
}

.lobby-section-title{
  font-size:.72rem;color:var(--gold-lt);opacity:.8;
  letter-spacing:.5px;margin-top:.2rem;
}

/* 초대코드 입력 */
.lobby-code-row{display:flex;gap:.4rem;align-items:center;}
.lobby-code-input{
  flex:1;background:rgba(0,0,0,.4);
  border:1.5px solid rgba(200,146,42,.35);
  border-radius:6px;padding:.45rem .7rem;
  color:var(--hanji);font-size:.95rem;
  letter-spacing:3px;text-align:center;font-weight:700;
  outline:none;
}
.lobby-code-input:focus{border-color:var(--gold-lt);}
.lobby-btn-join{
  background:linear-gradient(135deg,#5a2800,#3a1500);
  border:1.5px solid #a06030;
  color:var(--hanji-warm);border-radius:6px;
  padding:.45rem .9rem;cursor:pointer;
  font-size:.85rem;white-space:nowrap;
  transition:all .15s;
}
.lobby-btn-join:hover{border-color:var(--gold-lt);color:var(--gold-lt);}

/* 방 목록 */
.lobby-room-list{
  min-height:48px;max-height:140px;overflow-y:auto;
  border:1px solid rgba(200,146,42,.2);
  border-radius:6px;background:rgba(0,0,0,.25);
  padding:.3rem;
}
.lobby-room-list::-webkit-scrollbar{width:4px;}
.lobby-room-list::-webkit-scrollbar-thumb{background:var(--gold-dk);border-radius:2px;}
.room-item{
  display:flex;align-items:center;gap:.5rem;
  padding:.35rem .6rem;border-radius:5px;cursor:pointer;
  font-size:.8rem;color:var(--hanji-warm);
  transition:background .12s;
}
.room-item:hover{background:rgba(200,146,42,.12);}
.room-item .room-name{flex:1;}
.room-item .room-cnt{color:var(--gold-lt);font-size:.75rem;font-weight:700;}
.room-empty{font-size:.78rem;color:rgba(200,146,42,.45);text-align:center;padding:.5rem;}

/* 방 이름 입력 */
.lobby-room-name-input{
  width:100%;background:rgba(0,0,0,.35);
  border:1.5px solid rgba(200,146,42,.3);
  border-radius:6px;padding:.45rem .7rem;
  color:var(--hanji);font-size:.85rem;outline:none;
}
.lobby-room-name-input:focus{border-color:var(--gold-lt);}

/* 인원 선택 버튼 */
.player-count-btns{
  display:flex;gap:.4rem;margin-top:.15rem;
}
.pcnt-btn{
  flex:1;padding:.5rem .3rem;
  background:rgba(0,0,0,.35);
  border:1.5px solid rgba(200,146,42,.3);
  border-radius:7px;color:var(--hanji-warm);
  font-size:.82rem;font-weight:700;cursor:pointer;
  text-align:center;line-height:1.3;
  transition:all .15s;
}
.pcnt-btn span{font-size:.65rem;opacity:.7;font-weight:400;}
.pcnt-btn:hover{border-color:var(--gold-lt);color:var(--gold-lt);}
.pcnt-btn.selected{
  background:linear-gradient(135deg,rgba(200,146,42,.25),rgba(160,104,32,.15));
  border-color:var(--gold-lt);color:var(--gold-lt);
  box-shadow:0 0 10px rgba(200,146,42,.2);
}

/* 방만들기 / 새로고침 버튼 */
.lobby-btns{display:flex;gap:.5rem;margin-top:.3rem;}
.lobby-btn-create{
  flex:2;padding:.55rem;
  background:linear-gradient(135deg,#7a3800,#4a1e00);
  border:1.5px solid #c07030;border-radius:7px;
  color:var(--hanji-warm);font-size:.85rem;font-weight:700;
  cursor:pointer;transition:all .15s;
}
.lobby-btn-create:hover{border-color:var(--gold-lt);box-shadow:0 0 12px rgba(200,146,42,.25);}
.lobby-btn-refresh{
  flex:1;padding:.55rem;
  background:rgba(0,0,0,.3);
  border:1.5px solid rgba(200,146,42,.25);
  border-radius:7px;color:var(--hanji-warm);
  font-size:.82rem;cursor:pointer;transition:all .15s;
}
.lobby-btn-refresh:hover{border-color:var(--gold-lt);}

/* 뒤로 버튼 */
.lobby-back-btn{
  background:rgba(0,0,0,.3);
  border:1.5px solid rgba(200,146,42,.25);
  border-radius:7px;color:var(--hanji-warm);
  padding:.45rem .9rem;cursor:pointer;
  font-size:.82rem;align-self:flex-start;
  transition:all .15s;
}
.lobby-back-btn:hover{border-color:var(--gold-lt);}

/* ══ 대기 모달 ══ */
.modal-bg{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.78);z-index:200;
  align-items:center;justify-content:center;
}
.modal-bg.show{display:flex;}

.modal-box{
  background:linear-gradient(160deg,var(--wood-mid),var(--wood-dark));
  border:1.5px solid #7a4820;border-radius:12px;
  padding:1.6rem 1.8rem;min-width:300px;max-width:380px;
  text-align:center;
  box-shadow:0 0 40px rgba(0,0,0,.7);
}

.code-display{
  display:inline-block;
  background:rgba(0,0,0,.4);
  border:2px solid rgba(200,146,42,.5);
  border-radius:8px;
  padding:.5rem 1.5rem;
  font-size:2rem;font-weight:900;
  color:var(--gold-lt);
  letter-spacing:6px;cursor:pointer;
  font-family:'Nanum Myeongjo',serif;
  margin:.3rem 0;
  transition:border-color .15s;
}
.code-display:hover{border-color:var(--gold-lt);}

/* 플레이어 슬롯 */
#p-slots-container .p-slot{
  display:flex;align-items:center;gap:.6rem;
  padding:.4rem .7rem;margin-bottom:.3rem;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(200,146,42,.2);
  border-radius:6px;font-size:.82rem;
  color:var(--hanji-warm);
}
#p-slots-container .p-slot.filled{border-color:rgba(200,146,42,.5);}
#p-slots-container .p-slot .slot-icon{font-size:1rem;}
#p-slots-container .p-slot .slot-name{flex:1;text-align:left;}
#p-slots-container .p-slot .slot-badge{
  font-size:.68rem;color:var(--gold-lt);
  background:rgba(200,146,42,.15);
  padding:1px 5px;border-radius:3px;
}

.modal-btns{
  display:flex;gap:.5rem;justify-content:center;
  margin-top:.8rem;flex-wrap:wrap;
}