/* ===== 石首五十K — 牌桌主题 ===== */

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%; width: 100%;
  font-family: 'Noto Sans SC', system-ui, sans-serif;
  overflow: hidden;
  background: #0a0a0a;
  color: #f0f0f0;
  user-select: none;
}

/* ---------- Start Screen ---------- */
.start-screen {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #1b4332 0%, #081c15 60%, #000 100%);
}
.start-content {
  text-align: center;
  animation: fadeInUp .8s ease-out;
}
.logo-icon {
  font-size: 5rem;
  animation: float 3s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(255,215,0,.5));
}
.game-title {
  font-size: 3.5rem; font-weight: 900;
  background: linear-gradient(135deg, #ffd700, #ff8c00, #ffd700);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  margin: .5rem 0 .2rem;
  letter-spacing: .15em;
}
.game-subtitle {
  font-size: 1.1rem; color: #95d5b2; letter-spacing: .3em; margin-bottom: 2rem;
}
.rules-brief {
  display: flex; flex-direction: column; gap: .8rem;
  margin-bottom: 2.5rem;
}
.rule-item {
  font-size: 1rem; color: #b7e4c7;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.rule-icon { font-size: 1.3rem; }
.start-btn {
  padding: .9rem 3rem;
  font-size: 1.2rem; font-weight: 700;
  border: none; border-radius: 2rem; cursor: pointer;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #1b4332;
  box-shadow: 0 4px 24px rgba(255,215,0,.35);
  transition: transform .2s, box-shadow .2s;
  letter-spacing: .1em;
}
.start-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 32px rgba(255,215,0,.5);
}

/* ---------- Game Table ---------- */
.game-table {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, #1e5631 0%, #174a28 30%, #0d3318 65%, #061a0e 100%);
  overflow: hidden;
}
.felt-texture {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.02) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.015) 0%, transparent 50%);
}
.game-table::before {
  content: '';
  position: absolute; inset: 8px; border-radius: 24px;
  border: 3px solid rgba(139,90,43,.4);
  box-shadow: inset 0 0 80px rgba(0,0,0,.3), 0 0 40px rgba(0,0,0,.5);
  pointer-events: none; z-index: 0;
}

/* ---------- Seat Layout ---------- */
.seat { position: absolute; z-index: 2; }

.seat-top {
  top: 8px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.seat-left {
  left: 8px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: row; align-items: center; gap: 6px;
}
.seat-right {
  right: 8px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: row-reverse; align-items: center; gap: 6px;
}
.seat-bottom {
  bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 90%; max-width: 900px;
  padding-bottom: 6px;
  overflow: visible;
}

/* ---------- Player Info ---------- */
.player-info {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  padding: 6px 14px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.1);
  font-size: .85rem; white-space: nowrap;
}
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  background: rgba(255,255,255,.1);
  border: 2px solid rgba(255,255,255,.15);
  transition: border-color .3s, box-shadow .3s;
}
.avatar.glow {
  border-color: #ffd700;
  box-shadow: 0 0 12px rgba(255,215,0,.6);
  animation: pulse 1.2s infinite;
}
.active-avatar { border-color: #4fc3f7; }
.player-name { font-weight: 700; color: #e0e0e0; }
.card-count {
  background: rgba(255,255,255,.12); padding: 2px 10px; border-radius: 10px;
  font-size: .8rem; color: #a5d6a7;
}
.badge { font-size: .7rem; padding: 2px 8px; border-radius: 8px; font-weight: 500; }
.badge-team { background: rgba(76,175,80,.3); color: #81c784; }

/* ---------- Card Styles ---------- */
.card {
  position: relative;
  width: 66px; height: 94px; /* Slightly larger base size */
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%);
  box-shadow: 
    0 2px 4px rgba(0,0,0,0.2), 
    0 4px 8px rgba(0,0,0,0.1),
    inset 0 0 0 1px rgba(0,0,0,0.05);
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: transform .18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow .18s ease;
  flex-shrink: 0;
  font-family: 'Noto Sans SC', Arial, sans-serif;
  z-index: 2;
  overflow: hidden;
}

.card .card-corner {
  position: absolute; display: flex; flex-direction: column; align-items: center;
  font-weight: 900; line-height: 1.1;
  padding: 2px;
}

.card .card-rank {
  font-size: 1rem; /* Significantly larger */
  letter-spacing: -0.05em;
}

.card .card-suit {
  font-size: 0.75rem;
  margin-top: -1px;
}

.card .card-corner.top-left { top: 3px; left: 4px; }
.card .card-corner.bottom-right {
  bottom: 3px; right: 4px;
  transform: rotate(180deg);
}
.card .card-center {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
}
.card .card-center-rank {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem; font-weight: 900; opacity: .08;
}

/* Suit colors */
.card.red { color: #c62828; }
.card.black { color: #212121; }
/* Card interaction */
/* hover 时只加高亮边框，不移动位置 */
.hand-fan .card:hover:not(.selected) {
  box-shadow: 0 2px 6px rgba(0,0,0,.35), 0 0 0 2px rgba(255,215,0,.6);
  cursor: pointer;
}
/* 选中牌向上微微弹起，保持默认层级，自然呈现：压住左侧牌、被右侧牌压住 */
.hand-fan .card.selected {
  transform: translateY(-10px);
  box-shadow: 0 4px 12px rgba(255,215,0,.5), 0 0 0 2px #ffd700;
}

/* Card back */
.card-back {
  width: 62px; height: 88px;
  border-radius: 6px;
  background: linear-gradient(135deg, #1a237e, #283593);
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  position: relative; overflow: hidden;
  flex-shrink: 0;
}
.card-back::before {
  content: ''; position: absolute; inset: 3px;
  border-radius: 4px;
  border: 1.5px solid rgba(255,215,0,.3);
  background: repeating-linear-gradient(
    45deg, transparent, transparent 4px,
    rgba(255,215,0,.06) 4px, rgba(255,215,0,.06) 8px
  );
}
.card-back::after {
  content: '🂠'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; opacity: .4;
}

/* Small card backs for opponents */
.card-back.small { width: 40px; height: 56px; }
.card-back.small::after { font-size: 1rem; }

.card-back.tiny { width: 28px; height: 40px; }
.card-back.tiny::before { inset: 2px; }
.card-back.tiny::after { font-size: .7rem; }

/* ---------- Opponent Hands ---------- */
.hand-row {
  display: flex; justify-content: center;
}
.hand-row .card-back { margin: 0 -12px; }
.hand-row .card-back.small { margin: 0 -8px; }

.hand-col {
  display: flex; flex-direction: column;
}
.hand-col .card-back { margin: -20px 0; }
.hand-col .card-back.tiny { margin: -14px 0; }

/* ---------- Player Hand (Fan) ---------- */
.hand-fan {
  display: flex; justify-content: center; align-items: flex-end;
  /* padding-top 为选中牌上移留出空间，避免被裁剪 */
  padding: 30px 10px 10px;
  min-height: 128px;
  width: 100%;
  overflow: visible; /* 去除 overflow-x 避免浏览器强制将 y 轴变为 auto 而裁减 */
}
.hand-fan .card {
  margin: 0 -15px;
  transition: transform .18s ease, margin-top .18s ease, z-index 0s;
}
.hand-fan .card:first-child { margin-left: 0; }
.hand-fan .card:last-child { margin-right: 0; }

/* ---------- Played Cards Area ---------- */
.played-area {
  display: flex; justify-content: center; gap: 3px;
  min-height: 50px; min-width: 70px;
  padding: 4px;
}
.played-area .card {
  width: 54px; height: 76px; cursor: default;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.played-area .card .card-rank { font-size: 0.85rem; }
.played-area .card .card-suit { font-size: 0.65rem; }
.played-area .card .card-corner.top-left { top: 2px; left: 3px; }
.played-area .card .card-corner.bottom-right { bottom: 2px; right: 3px; }
.played-area .card .card-center { font-size: 1.4rem; }
.played-area .card:hover { transform: none; }

.played-area .pass-text {
  color: rgba(255,255,255,.5); font-size: .9rem; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 16px;
  background: rgba(0,0,0,.2); border-radius: 8px;
}

/* Seat-specific played areas positioning */
.seat-top .played-area { margin-top: 4px; }
.seat-bottom .played-area {
  margin-bottom: 0;
  min-height: 60px;
  background: rgba(0,0,0,.15);
  border-radius: 10px;
  padding: 6px 10px;
  width: 100%;
  justify-content: center;
  border: 1px dashed rgba(255,255,255,.08);
}
.seat-left .played-area { margin-left: 4px; }
.seat-right .played-area { margin-right: 4px; }

/* ---------- Center Area ---------- */
.center-area {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.turn-indicator {
  padding: 8px 24px;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(6px);
  border-radius: 20px;
  font-size: .95rem; font-weight: 700;
  color: #ffd700;
  border: 1px solid rgba(255,215,0,.2);
  white-space: nowrap;
  transition: all .3s;
}

/* ---------- Controls ---------- */
.controls {
  position: relative;
  display: flex; gap: 10px; z-index: 20;
  width: 100%; justify-content: center;
  padding: 4px 0;
}
.ctrl-btn {
  padding: 10px 28px;
  font-size: 1rem; font-weight: 700;
  border: none; border-radius: 12px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, opacity .15s;
  letter-spacing: .05em;
}
.ctrl-btn:disabled { opacity: .35; cursor: not-allowed; transform: none !important; }
.ctrl-btn:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
}
.btn-play {
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #1b4332;
}
.btn-pass {
  background: rgba(255,255,255,.12);
  color: #e0e0e0;
  border: 1px solid rgba(255,255,255,.2);
}
.btn-hint {
  background: rgba(76,175,80,.25);
  color: #a5d6a7;
  border: 1px solid rgba(76,175,80,.3);
}
.btn-sort {
  background: rgba(255,193,7,.2);
  color: #ffe082;
  border: 1px solid rgba(255,193,7,.35);
}
.btn-sort:hover:not(:disabled) {
  background: rgba(255,193,7,.35);
}

/* ---------- Score Panel ---------- */
.score-panel {
  position: absolute; top: 12px; right: 16px; z-index: 20;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(8px);
  padding: 10px 16px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer;
}
.score-row { display: flex; align-items: center; gap: 10px; font-size: .85rem; }
.score-label { color: #b0b0b0; }
.score-value { font-weight: 900; font-size: 1.1rem; color: #ffd700; }

/* ---------- Game Over Overlay ---------- */
.game-over-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .4s ease;
}
.game-over-card {
  background: linear-gradient(135deg, #1b4332, #2d6a4f);
  padding: 2.5rem 3rem; border-radius: 24px;
  text-align: center;
  border: 2px solid rgba(255,215,0,.3);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  animation: scaleIn .4s ease;
}
.go-icon { font-size: 4rem; margin-bottom: .5rem; }
.game-over-card h2 { font-size: 1.8rem; color: #ffd700; margin-bottom: .5rem; }
.game-over-card p { color: #a5d6a7; margin-bottom: 1.5rem; }
.go-scores { display: flex; gap: 2rem; justify-content: center; margin-bottom: 2rem; }
.go-score-item {
  display: flex; flex-direction: column; gap: .3rem;
  background: rgba(0,0,0,.3); padding: 12px 24px; border-radius: 12px;
}
.go-score-item span { font-size: .85rem; color: #95d5b2; }
.go-score-item .score-details { font-size: 1.2rem; color: #ffd700; text-align: left; line-height: 1.4; }

/* ---------- Animations ---------- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.85); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,215,0,.4); }
  50% { box-shadow: 0 0 20px rgba(255,215,0,.8); }
}
@keyframes wildGlow {
  0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,.35), 0 0 8px rgba(255,215,0,.2); }
  50% { box-shadow: 0 2px 6px rgba(0,0,0,.35), 0 0 16px rgba(255,215,0,.5); }
}
@keyframes cardDeal {
  from { opacity: 0; transform: scale(.5) translateY(-40px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .card { width: 56px; height: 80px; }
  .card .card-rank { font-size: 0.85rem; }
  .card .card-suit { font-size: 0.65rem; }
  .card .card-center { font-size: 1.5rem; }
  .card-back { width: 56px; height: 80px; }
  .card-back.small { width: 36px; height: 52px; }
  .card-back.tiny { width: 26px; height: 38px; }
  .hand-fan .card { margin: 0 -12px; }
  .ctrl-btn { padding: 8px 20px; font-size: .9rem; }
  .played-area .card { width: 44px; height: 62px; }
  .played-area .card .card-rank { font-size: 0.75rem; }
  .game-title { font-size: 2.5rem; }
}