/* poker_app.css */
:root {
    --table-felt-color: #00695c; --player-bg: rgba(0, 0, 0, 0.6);
    --text-light: #e0e0e0; --text-gold: #ffc107;
    --btn-fold: #6c757d; --btn-call: #28a745;
    --btn-raise: #e67e22; --btn-check: #3498db;
}

body {
    font-family: 'Noto Sans KR', sans-serif; background-color: #111;
    color: var(--text-light); margin: 0; display: flex; flex-direction: column;
    justify-content: center; align-items: center; height: 100vh; overflow: hidden;
}
nav { width: 100%; max-width: 800px; margin: 0 auto 15px auto; background-color: rgba(0,0,0,0.3); padding: 10px 0; border-radius: 8px; }
nav a { color: #fff; text-decoration: none; padding: 8px 15px; margin: 0 5px; border-radius: 6px; }

.player-name-area {
    display: flex;
    align-items: baseline; /* 텍스트 높이를 보기 좋게 정렬 */
    gap: 8px;              /* 이름과 코인 사이 간격 */
}

.player-total-coins {
    font-size: 0.8em;        /* 총 코인 글씨를 약간 작게 */
    color: #ff9253;        /* 색상을 약간 다르게 하여 구분 */
    font-weight: normal;
}

.poker-table-wrapper {
  width: 100%;
  height: 100vh; /* 전체 화면 높이 */
  max-width: 1600px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('../images/QtrZ4dY.png') no-repeat center center;
  background-size: 100% 100%;
}
.poker-table { position: relative; width: 100%; height: 90%; max-width: 1400px; max-height: 900px; position: relative;}
.player-seat { position: absolute; width: 350px; height: 155px;  display: flex; flex-direction: column; align-items: center; }
.player-box { background: var(--player-bg); border-radius: 8px; padding: 8px; border: 2px solid transparent; width: 100%; box-sizing: border-box; transition: border-color 0.3s; }
.player-box.active-turn { border: 3px solid var(--text-gold);
  box-shadow: 0 0 10px var(--text-gold);
}

.player-header { 
    display: flex; 
    align-items: center;     
    top: 50%;
    left: 50%;
    transform: translate(0%, -40%);
    gap: 8px; 
    margin-bottom: 8px; 
    z-index: 98; 
}

#player-main .player-header { cursor: pointer; z-index: 98; }

.avatar { width: 90px; height: 90px; border-radius: 40%; border: 2px solid var(--text-gold); }

.player-info { text-align: left; font-size: 0.9em; flex-grow: 1; }
.player-name { font-weight: bold; }
.player-money {  color: var(--text-gold);
}

.card-area { display: flex; align-items: center; min-height: 110px; padding-left: 55px; position: relative; }

.card { border-radius: 8px; box-shadow: 1px 1px 19px rgba(0,0,0,0.5); position: absolute; background-size: cover; transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); transform-style: preserve-3d;  margin-left: -50px; /* 기본 중첩 간격 */
  z-index: 1; }

.card:hover {
  z-index: 10;
  transform: translateY(-12px);
}
.card-inner { position: absolute; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; }
.card.is-flipped .card-inner { transform: rotateY(180deg); }
.card-face { 
    position: absolute; 
    width: 100%; 
    height: 107%; 
    /* backface-visibility: hidden; */ /* <-- 이 줄을 삭제하거나 주석 처리 */
    border-radius: 10px; 
}

/* 3D 플립 애니메이션이 필요한 일반 카드에만 이 규칙을 다시 적용합니다. */
.card-inner > .card-face {
    backface-visibility: hidden;
}
.card-face-back { background: url('../images/cards/BACK.png') no-repeat center center; background-size: cover; }
.card-face-front { background-color: white; transform: rotateY(180deg); background-size: cover; }
.card-area:hover .card { transform: translateY(-10px) !important; z-index: 10; }
.card-area .card:hover ~ .card { transform: translateX(50px) !important; }

.card.winning-card {
    transform: translateY(-20px);
    box-shadow: 0 0 20px #ffeb3b;
    z-index: 20;
}
.winning-card:hover {
    transform: translateY(-30px); /* 기존(-20px)보다 살짝 더 올라가게 설정 */
    box-shadow: 0 0 25px #ffffff;  /* 호버 시 그림자 효과를 더 밝게 */
}

#deck-area {
    position: absolute;
    top: 2%;
    left: 50%;
    transform: translate(-50%, -150%); /* 팟(Pot)보다 살짝 위쪽에 위치 */
    width: 155px;
    height: 205px;
    /* 이 div는 눈에 보일 필요가 없으므로 배경색 등은 지정하지 않습니다. */
}


/* 덱에 있는 카드의 뒷면을 보여줍니다. */
#deck-area .card {
  background: url('../images/cards/BACK.png') no-repeat center center;
  background-size: cover;
}

#opponent-1 { 
    top: 44%; 
    left: 8%; 
    transform: translateY(-50%); 
}
/* Seat 2 (왼쪽 상단) */
#opponent-2 { 
    top: 1%; 
    left: 8%; 
}
/* Seat 3 (오른쪽 상단) */
#opponent-3 { 
    top: 1%; 
    right: 8%; 
}
/* Seat 4 (오른쪽 중간) */
#opponent-4 { 
    top: 44%; 
    right: 8%; 
    transform: translateY(-50%); 
}

#player-main { bottom: 20%; left: 52%; transform: translateX(-50%); }
/* 
#player-main .card {
    width: 115px;
    height: 165px;
} */

.pot-area { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.pot-total { font-size: 1.2em; font-weight: bold; color: var(--text-gold); background: rgba(0,0,0,0.5); padding: 5px 10px; border-radius: 5px; }
.pre-game-controls { position: absolute; bottom: 10%; left: 52%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; background: rgba(0,0,0,0.7); padding: 15px; border-radius: 10px; }
#startGameBtn { padding:10px 20px; font-size:1.2em; background-color: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer; font-weight: bold;}
.action-buttons { 
    position: absolute; 
    bottom: -3%; 
    left: 55%; 
    transform: translateX(-50%); 
    display: none;
    grid-template-columns: repeat(5, 1fr); 
    width: 80%; 
    max-width: 800px; 
    gap: 10px;
    align-items: center;
}
.action-buttons button { 
    padding: 15px 5px; 
    font-size: 1.1em; 
    color: white; 
    border: 2px solid #111; 
    border-radius: 8px; 
    font-weight: bold; 
    cursor: pointer; 
    background-color: rgba(20, 20, 20, 0.7); 
}
.action-buttons button:disabled { 
    background-color: #555; 
    color: #999; 
    cursor: not-allowed; 
}
#btn-fold { color: var(--btn-fold); }
#btn-check { color: var(--btn-check); }
#btn-call { color: var(--btn-call); }
#btn-half { color: var(--btn-raise); }
#btn-allin { color: var(--btn-raise); }

#btn-pping {
    color: #48dbfb; /* '삥' 버튼 색상 (예시) */
}
#btn-ddadang {
    color: #ff6b6b; /* '따당' 버튼 색상 (예시) */
}
.action-buttons {
    display: none;
    grid-template-columns: repeat(7, 1fr); 
    gap: 8px;
    align-items: center;}
    

.action-bubble {
    position: absolute;
    transform: translate(-50%, -50%); /* 이전 단계에서 수정한 부분 */
    background-color: rgba(255, 255, 255, 0.9);
    color: #111;
    
    /* ▼▼▼ 이 부분을 수정합니다 ▼▼▼ */
    padding: 10px 20px; /* 상하 여백을 10px, 좌우 여백을 20px로 늘림 */
    font-size: 1.0em;   /* 글자 크기를 살짝 줄여 균형 맞춤 */
    /* ▲▲▲ 수정 완료 ▲▲▲ */

    border-radius: 20px;
    font-weight: bold;
    white-space: nowrap;
    opacity: 0;
    transition: all 0.5s ease-out;
    pointer-events: none;
    z-index: 99;
}
.action-bubble.show {
    opacity: 1;
    top: calc(50% - 10px);
    z-index: 100;
}
.player-box.folded-player {
    opacity: 0.6; /* 반투명 효과 */
    filter: grayscale(80%); /* 흑백에 가깝게 변경 */
    transition: all 0.5s;
  }

/* 폴드한 플레이어의 카드 위에는 호버 효과를 주지 않음 */
.player-box.folded-player .card:hover {
    transform: none !important;
}
#pot-chips-container {
    position: relative; /* 자식 요소(칩)들의 위치 기준점 */
    width: 12.5rem; /* 200px */
    height: 9.375rem; /* 150px */
    margin: 0.625rem auto; /* 10px */
    perspective: 500px; /* 칩에 3D 효과를 주기 위함 */
}

.pot-chip {
    position: absolute; /* 칩들이 겹쳐서 쌓일 수 있도록 */
    width: 3.125rem;  /* 50px */
    height: 3.125rem; /* 50px */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* 칩에 약간의 입체감을 줍니다. */
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.5));
}

.flying-chip {
    position: fixed; /* 화면 전체를 기준으로 자유롭게 이동 */
    width: 3.125rem; /* 50px */
    height: 3.125rem; /* 50px */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 250; /* 다른 요소들보다 항상 위에 있도록 */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* 부드러운 애니메이션 효과 */
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3));
}


/* 모달 배경 */
.modal {
    display: none; /* 평소에는 숨김 */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
}

/* 모달 내용물 박스 */
.modal-content {
    background-color: #2c3e50;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
    border-radius: 10px;
    text-align: center;
}

/* 닫기 버튼 */
.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

/* 아바타가 표시될 그리드 */
#avatarGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
    max-height: 400px;
    overflow-y: auto;
}

/* 그리드 안의 개별 아바타 이미지 */
#avatarGrid img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: border-color 0.2s;
}

#avatarGrid img:hover {
    border-color: #ffc107; /* 호버 시 노란색 테두리 */
}
.room-selection-container {
    position: absolute; bottom: 50%; left: 50%;
    transform: translateX(-50%); background: rgba(0,0,0,0.7);
    padding: 20px; border-radius: 10px; text-align: center;
    width: 80%; max-width: 500px;
}
#roomList { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
.room-button {
    padding: 15px; font-size: 1.1em; background-color: #28a745;
    color: white; border: none; border-radius: 8px; cursor: pointer;
    font-weight: bold; transition: background-color 0.2s;
}
.room-button:hover { background-color: #218838; }
.room-button span { font-weight: normal; color: #d4edda; margin-left: 10px; }
/* --------------------------------------------------------------------------------------------------------------- */
.waiting-popup {
    display: none; /* 평소에는 숨겨져 있음 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    border: 2px solid #ffc107;
    border-radius: 10px;
    text-align: center;
    z-index: 500; /* 다른 게임 UI 요소들 위에 표시 */
}

.waiting-popup p {
    margin: 0;
    font-size: 1.2em;
}

.waiting-popup p:first-child {
    font-weight: bold;
    margin-bottom: 10px;
}
/* 준비/시작 버튼 공통 스타일 */
#preGameControls .btn {
    padding: 12px 28px;
    font-size: 1.2em;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: all 0.2s ease-in-out;
    margin: 0 10px;
}
#preGameControls .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0,0,0,0.3);
}
#preGameControls .btn:active {
    transform: translateY(1px);
}
/* 준비 버튼 (파란색) */
.btn.btn-ready {
    background: linear-gradient(145deg, #3498db, #2980b9);
}
/* 게임 시작 버튼 (녹색) */
.btn.btn-start {
    background: linear-gradient(145deg, #2ecc71, #27ae60);
}
/* 승리 표시 스타일 */
.winner-indicator {
    position: absolute;
    bottom: -150px; /* 플레이어 박스 위쪽 바깥으로 25px 이동 */
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffc107; /* 노란색 배경 */
    color: #1a1a1a; /* 어두운 글자색 */
    padding: 10px 25px;
    border-radius: 25px;
    font-size: 1.5em;
    font-weight: bold;
    white-space: nowrap; /* 글자가 두 줄로 나뉘지 않도록 */
    z-index: 50; /* 카드보다 위에 표시되도록 */
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.7);
}

.card.selectable:hover {
    cursor: pointer;
    box-shadow: 0 0 20px #00a8ff;
    transform: translateY(-15px) scale(1.05);
}
.game-instruction {
    position: absolute; bottom: -60px; left: 20%; transform: translateX(-50%);
    color: rgb(255, 241, 43); background: rgba(0,0,0,0.7); padding: 5px 16px; border-radius: 10px;
    z-index:99; pointer-events: none; font-size: 1.4em;
}
/* poker_app.css 파일 맨 끝에 추가 */
.opener-info {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    color: #ffc107;
    font-size: 1.1em;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    padding: 5px 15px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 10px; 
}

/* poker_app.css 파일 맨 끝에 추가 */

.flying-card {
    position: fixed;
    background-size: cover;
    border-radius: 5px; /* 카드 모양과 맞춤 */
    z-index: 1000;
    transition: all 0.3s ease-out;
}
/* poker_app.css 파일 맨 끝에 추가 */
.fullscreenBtn {
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    margin-left: 10px;
}
.squeeze-container {
    transform-style: preserve-d;
    /* [수정됨] 다른 카드와 동일하게 absolute로 변경 */
    position: absolute; 
}

.squeeze-container .card-face-front {
    /* 쪼는 카드 아래에 깔릴 앞면 카드 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* 뒷면 카드(squeeze-top)보다 아래 */
    backface-visibility: hidden; /* 뒷면은 보이지 않도록 */
}

.squeeze-top {
    /* 쪼아 움직일 뒷면 카드 */
    cursor: grab;
    position: absolute;
    top: 0;
    left: 0;
    width: 107%;
    height: 109%;
    z-index: 2; /* 항상 앞면 카드 위에 있도록 */
    transition: transform 0.2s ease-out, opacity 0.3s ease-out; /* 제자리로 돌아오거나 사라질 때 부드럽게 */
    background-size: cover; /* 이미지가 카드 크기에 맞게 꽉 차도록 */
}

.squeeze-top:active {
    cursor: grabbing;
}