/* 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; }

.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: 95%; height: 90%; max-width: 1400px; max-height: 900px; }
.player-seat { position: absolute; width: 400px; height: 195px;  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; gap: 8px; margin-bottom: 8px; }
#player-main .player-header { cursor: pointer; }

.avatar { width: 90px; height: 90px; border-radius: 50%; 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: 130px; padding-left: 55px; position: relative; }

.card { width: 90px; height: 130px; border-radius: 4px; box-shadow: 1px 1px 3px 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: 100%; backface-visibility: hidden; border-radius: 5px; }
.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: 10%; 
  left: 50%;
  transform: translateX(-10%);
}


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

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

#player-main { bottom: 15%; 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: 60%; 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;
    bottom: 105%; /* 플레이어 박스 바로 위에 위치 */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.9);
    color: #111;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 1.1em;
    font-weight: bold;
    white-space: nowrap;
    opacity: 0;
    transition: all 0.5s ease-out;
    pointer-events: none; /* 말풍선이 클릭을 방해하지 않도록 */
}
.action-bubble.show {
    opacity: 1;
    bottom: 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));
}
@media screen and (max-width: 48rem) { /* 768px */
  body {
    height: auto;
    overflow-y: auto;
    padding: 1.25rem 0; /* 20px */
  }

  .poker-table-wrapper {
    width: 100%;
    height: auto;
    background-size: contain;
    flex-direction: column;
    padding-bottom: 5rem; /* 80px */
  }

  .poker-table {
    width: 100%;
    height: auto;
    position: relative;
    max-width: 100%;
    max-height: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem; /* 20px */
  }

  .player-seat {
    position: static;
    width: 90%;
    max-width: 22.5rem; /* 360px */
  }

  .card-area {
    min-height: auto;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0;
  }

  .card {
    position: relative;
    margin: 0.3125rem; /* 5px */
    transform: none !important;
  }

  .pot-area {
    position: static;
    margin: 0.625rem 0; /* 10px */
  }

  .pre-game-controls,
  .action-buttons {
    position: static;
    transform: none;
    width: 90%;
    max-width: 25rem; /* 400px */
    flex-wrap: wrap;
    justify-content: center;
  }

  .action-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem; /* 10px */
    margin-top: 0.625rem; /* 10px */
  }

  .action-buttons button {
    padding: 0.75rem 0.5rem; /* 12px 8px */
    font-size: 1em;
  }

  nav {
    flex-direction: column;
    align-items: center;
  }

  nav a {
    display: block;
    margin: 0.3125rem 0; /* 5px */
  }

  #avatarModal .modal-content {
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
  } 
}

.action-bubble {
    position: absolute;
    bottom: 50%;
    left: 25%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.9);
    color: #111;
    padding: 0.5rem 0.9375rem; /* 8px 15px */
    border-radius: 1.25rem; /* 20px */
    font-size: 1.1em;
    font-weight: bold;
    white-space: nowrap;
    opacity: 0;
    transition: all 0.5s ease-out;
    pointer-events: none;
}
/* 모달 배경 */
.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;
}