@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Pretendard:wght@400;500;600;700;800&family=Nunito:wght@800;900&display=swap');

:root {
  /* 모던 매트 블랙 테마 */
  --bg-primary: #0a0b0e;
  --bg-secondary: #12141a;
  
  --board-bg: #0f1117;
  --board-surface: #161822;
  --board-border: #232734;

  --rack-bg: #151720;
  --rack-border: #262a38;
  --rack-surface: #0b0c11;

  --color-red: #e53935;
  --color-blue: #1e88e5;
  --color-yellow: #f57c00;
  --color-black: #212121;

  --tile-bg: #fdfaf2;
  --tile-border: #e2dbcb;
  --tile-shadow: 0 4px 8px rgba(0, 0, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 3px rgba(0, 0, 0, 0.18);
  
  --accent-cyan: #38bdf8;
  --accent-blue: #3b82f6;
  --accent-indigo: #6366f1;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  background: radial-gradient(circle at 50% 25%, #181b24 0%, #0d0f14 60%, #050608 100%);
  color: #f1f5f9;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* 상단 네비게이션 헤더 */
.game-header {
  background: rgba(13, 15, 20, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.brand-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-icon {
  font-size: 26px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}

.brand-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-sub {
  font-size: 11px;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.header-status {
  display: flex;
  align-items: center;
  gap: 16px;
}

.status-pill {
  background: rgba(255, 255, 255, 0.06);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.timer-box {
  background: #0f131d;
  border: 1px solid #38bdf8;
  color: #38bdf8;
  font-weight: 700;
  font-family: 'Nunito', monospace;
  font-size: 15px;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}

.timer-box.urgent {
  border-color: #ef4444;
  color: #f87171;
  animation: pulse-red 1s infinite alternate;
}

@keyframes pulse-red {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); box-shadow: 0 0 12px rgba(239, 68, 68, 0.7); }
}

.header-actions {
  display: flex;
  gap: 8px;
}

.btn-icon {
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
}

.btn-icon:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

/* 대전 정보 바 */
.match-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 24px;
  background: rgba(8, 9, 13, 0.75);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
  gap: 12px;
}

/* 동적 플레이어 대시보드 */
.players-dashboard {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.player-card {
  background: #141722;
  border: 1.5px solid #262c3e;
  border-radius: 12px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: all 0.2s ease;
}

.player-card.active-turn {
  border-color: #38bdf8;
  background: #172235;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.35);
  transform: translateY(-1px);
}

.player-card.is-ai {
  opacity: 0.9;
}

.player-avatar-box {
  font-size: 22px;
  line-height: 1;
}

.player-info-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.player-name-line {
  display: flex;
  align-items: center;
  gap: 5px;
}

.player-name {
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
}

.tag-me {
  background: #2563eb;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
}

.tag-turn {
  background: #38bdf8;
  color: #0b1120;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  animation: pulse-turn 1.2s infinite alternate;
}

@keyframes pulse-turn {
  0% { opacity: 0.8; }
  100% { opacity: 1; }
}

.player-stats-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tile-count {
  font-size: 11px;
  color: #94a3b8;
}

.tile-count strong {
  color: #e2e8f0;
}

.badge {
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}

.badge.registered {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
}

.badge.not-registered {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.turn-badge {
  font-weight: 800;
  padding: 6px 16px;
  border-radius: 18px;
  font-size: 13px;
}

.turn-badge.player {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.45);
}

.turn-badge.ai {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.45);
}

/* 메인 게임 영역 */
.game-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px 24px;
  gap: 14px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

/* 바닥판 (Board) */
.board-container {
  flex: 1;
  min-height: 400px;
  background: radial-gradient(circle at 50% 30%, #141720 0%, #0d0f15 100%);
  border: 1.5px solid #252936;
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 16px;
  overflow-y: auto;
  position: relative;
  box-shadow: inset 0 4px 30px rgba(0, 0, 0, 0.7), 0 8px 24px rgba(0, 0, 0, 0.3);
}

.board-empty-zone {
  width: 100%;
  height: 100%;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.35);
  gap: 10px;
}

.board-empty-zone .empty-icon {
  font-size: 52px;
  opacity: 0.5;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}

.board-empty-zone p {
  font-size: 16px;
  font-weight: 600;
  color: #94a3b8;
}

.board-empty-zone small {
  color: #64748b;
  font-size: 13px;
}

/* 보드 위의 세트 카드 */
.board-set-card {
  background: #181a24;
  border: 1px solid #2d3345;
  border-radius: 12px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
}

.board-set-card.valid-set {
  border-color: rgba(56, 189, 248, 0.6);
  background: rgba(14, 34, 51, 0.4);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.15);
}

.board-set-card.invalid-set {
  border: 1.5px dashed #ef4444;
  background: rgba(239, 68, 68, 0.12);
}

.set-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.set-badge {
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 7px;
  letter-spacing: 0.3px;
}

.set-badge.valid {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.18);
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.set-badge.invalid {
  color: #f87171;
  background: rgba(239, 68, 68, 0.22);
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.set-tiles-list {
  display: flex;
  align-items: center;
  gap: 5px;
}

.set-drop-end {
  width: 28px;
  height: 64px;
  border: 1.5px dashed rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  background: rgba(255, 255, 255, 0.02);
}

.set-drop-end:hover, .set-drop-end.hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #38bdf8;
  transform: scale(1.05);
}

.board-new-set-zone {
  min-width: 140px;
  min-height: 90px;
  border: 2px dashed rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.2s;
}

.board-new-set-zone:hover, .board-new-set-zone.hover {
  border-color: #38bdf8;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
}

/* 루미큐브 타일 디자인 */
.rummikub-tile {
  width: 44px;
  height: 64px;
  background: var(--tile-bg);
  border: 1px solid var(--tile-border);
  border-radius: 8px;
  box-shadow: var(--tile-shadow);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: grab;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
}

.rummikub-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.95);
}

.rummikub-tile.dragging {
  opacity: 0.35;
  cursor: grabbing;
}

.rummikub-tile.selected {
  outline: 3px solid #f59e0b;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.85);
  transform: translateY(-8px);
}

.rummikub-tile.insert-before {
  border-left: 4px solid #38bdf8;
}

.tile-number {
  font-family: 'Nunito', sans-serif;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}

.tile-dot {
  font-size: 7px;
  line-height: 1;
  margin-top: 1px;
}

/* 타일 4색 정의 */
.color-red .tile-number, .color-red .tile-dot { color: var(--color-red); }
.color-blue .tile-number, .color-blue .tile-dot { color: var(--color-blue); }
.color-yellow .tile-number, .color-yellow .tile-dot { color: var(--color-yellow); }
.color-black .tile-number, .color-black .tile-dot { color: var(--color-black); }

/* 조커 타일 */
.rummikub-tile.is-joker {
  background: linear-gradient(145deg, #ffffff 0%, #fff8eb 100%);
}

.joker-face {
  font-size: 22px;
  line-height: 1;
}

.joker-text {
  font-family: 'Nunito', sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.color-red .joker-text { color: var(--color-red); }
.color-black .joker-text { color: var(--color-black); }

/* 플레이어 손패 받침대 (토너먼트 매트 블랙 랙) */
.rack-section {
  background: linear-gradient(180deg, #181b24 0%, #0e1017 100%);
  border: 1.5px solid #2b3040;
  border-radius: 18px;
  padding: 14px 20px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rack-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.sort-group {
  display: flex;
  gap: 8px;
}

.action-group {
  display: flex;
  gap: 10px;
}

.btn-rack {
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.btn-rack:active {
  transform: translateY(1px);
}

.btn-sort {
  background: #1e2230;
  color: #cbd5e1;
  border: 1px solid #333a4d;
}
.btn-sort:hover {
  background: #2a3044;
  color: #fff;
}

.btn-revert {
  background: #d97706;
  color: #fff;
}
.btn-revert:hover {
  background: #b45309;
}

.btn-draw {
  background: #334155;
  color: #f1f5f9;
  border: 1px solid #475569;
}
.btn-draw:hover {
  background: #475569;
}

.btn-finish {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #fff;
  font-size: 15px;
  padding: 9px 24px;
  box-shadow: 0 0 16px rgba(37, 99, 235, 0.4);
}
.btn-finish:hover {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
}

/* 손패 타일 진열 슬롯 */
.hand-tiles-container {
  min-height: 85px;
  background: #090b10;
  border-radius: 12px;
  padding: 10px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border: 1px solid #1e222f;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6);
}

.hand-waiting, .hand-empty {
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #94a3b8;
  padding: 16px 0;
}

/* 패스 앤 플레이 핸드오버 프롬프트 */
.hand-handover-prompt {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  gap: 10px;
  text-align: center;
}

.handover-icon {
  font-size: 36px;
}

.handover-text {
  font-size: 15px;
  color: #f1f5f9;
}

/* 하단 실시간 로그 패널 */
.log-section {
  background: rgba(13, 15, 20, 0.85);
  border: 1px solid #232734;
  border-radius: 12px;
  padding: 10px 18px;
  max-height: 95px;
  overflow-y: auto;
}

.log-title {
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
  font-weight: 700;
}

.log-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

.log-item {
  line-height: 1.4;
}

.log-time {
  color: #64748b;
  font-family: monospace;
}

.log-info { color: #e2e8f0; }
.log-success { color: #38bdf8; font-weight: 600; }
.log-warning { color: #f59e0b; }

/* 모달 공통 스타일 */
.modal-wrapper {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-wrapper.open {
  display: flex;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(6px);
}

.modal-content {
  position: relative;
  background: #141722;
  border: 1px solid #2d3345;
  border-radius: 20px;
  width: 90%;
  max-width: 520px;
  padding: 26px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.8);
  color: #fff;
  z-index: 10;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.modal-title {
  font-size: 20px;
  font-weight: 800;
  color: #f8fafc;
}

.modal-close {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}

.modal-close:hover { color: #fff; }

.modal-form-group {
  margin-bottom: 18px;
}

.modal-form-group label {
  display: block;
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 8px;
  font-weight: 600;
}

.modal-input {
  width: 100%;
  padding: 11px 14px;
  border-radius: 8px;
  background: #0a0c12;
  border: 1px solid #2d3345;
  color: #fff;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.modal-input:focus {
  border-color: #38bdf8;
}

.modal-select {
  width: 100%;
  padding: 11px 14px;
  border-radius: 8px;
  background: #0a0c12;
  border: 1px solid #2d3345;
  color: #fff;
  font-size: 14px;
  outline: none;
}

.modal-select:focus {
  border-color: #38bdf8;
}

/* 아바타 선택기 */
.avatar-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.avatar-item {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #191c28;
  border: 2px solid #2b3042;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.avatar-item:hover {
  background: #24293a;
  transform: translateY(-2px);
}

.avatar-item.selected {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.2);
  transform: scale(1.12);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.5);
}

/* 추가 플레이어 이름 행 */
.extra-names-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.extra-player-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.extra-player-row span {
  font-size: 22px;
}

.modal-btn-confirm {
  width: 100%;
  padding: 13px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  margin-top: 12px;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
}

.modal-btn-confirm:hover {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  transform: translateY(-1px);
}

/* 규칙 안내 모달 내용 */
.rules-content {
  font-size: 14px;
  line-height: 1.65;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 8px;
}

.rules-content h4 {
  color: #38bdf8;
  margin: 16px 0 6px 0;
  font-size: 15px;
}

.rules-content p, .rules-content ul {
  color: #cbd5e1;
  margin-bottom: 8px;
}

.rules-content ul {
  padding-left: 20px;
}

/* 모바일 및 작은 화면 반응형 대응 */
@media (max-width: 768px) {
  .game-header {
    padding: 10px 14px;
  }
  .brand-title {
    font-size: 16px;
  }
  .header-status {
    gap: 8px;
  }
  .status-pill {
    padding: 4px 10px;
    font-size: 11px;
  }
  .match-bar {
    padding: 8px 14px;
  }
  .players-dashboard {
    width: 100%;
    justify-content: flex-start;
  }
  .player-card {
    padding: 5px 9px;
  }
  .game-main {
    padding: 10px 12px;
  }
  .board-container {
    padding: 12px;
    min-height: 320px;
  }
  .rummikub-tile {
    width: 38px;
    height: 56px;
  }
  .tile-number {
    font-size: 21px;
  }
  .btn-rack {
    padding: 7px 12px;
    font-size: 12px;
  }
  .rack-controls {
    justify-content: center;
  }
}