/* ===== Responsive Scale Tokens ===== */
:root {
  --card-h:   clamp(200px, 36vh, 440px);
  --card-w:   calc(var(--card-h) * 175 / 300);
  --jqk-h:    clamp(76px, 11vh, 140px);
  --jqk-w:    calc(var(--jqk-h) * 0.83);
  --gap:        clamp(10px, 2.2vh, 32px);
  --pad-top:    clamp(64px, 9vh, 100px);
  --pad-bottom: clamp(28px, 4vh, 60px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }

body {
  min-height: 100%;
  font-family: 'Sarabun', sans-serif;
  position: relative;
  user-select: none;
  overflow: hidden;
}

/* ===== Felt Table ===== */
.table-felt {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, #2d7a4f 0%, #1a4a2e 60%, #0e2a1a 100%);
  z-index: 0; pointer-events: none;
}
.table-border {
  position: absolute; inset: 16px;
  border: 6px solid #8B6914;
  border-radius: 80px;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.5), 0 0 20px rgba(139,105,20,0.35);
}

/* ===== Screen Base ===== */
.screen {
  position: fixed; inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
}

#screen-game {
  gap: var(--gap);
  padding: var(--pad-top) 16px max(var(--pad-bottom), calc(var(--safe-bottom) + 28px));
  justify-content: center;
}

/* ===== Lobby ===== */
#screen-lobby { gap: clamp(12px, 2.5vh, 28px); }

.lobby-cards-deco {
  display: flex;
  gap: clamp(14px, 3vw, 32px);
}
.deco-card {
  font-size: clamp(30px, 6vw, 60px);
  color: rgba(255,255,255,0.5);
  animation: deco-float 3.5s ease-in-out infinite;
}
.deco-card.red { color: rgba(255,120,120,0.65); }
.deco-card:nth-child(1) { animation-delay: 0s; }
.deco-card:nth-child(2) { animation-delay: 0.5s; }
.deco-card:nth-child(3) { animation-delay: 1s; }
.deco-card:nth-child(4) { animation-delay: 1.5s; }

@keyframes deco-float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}

.lobby-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(28px, 6vw, 64px);
  font-weight: 900;
  color: #FFD700;
  text-shadow: 0 0 24px rgba(255,215,0,0.5);
  text-align: center;
}
.lobby-sub {
  font-family: 'Sarabun', sans-serif;
  color: rgba(255,255,255,0.55);
  font-size: clamp(12px, 1.8vh, 18px);
  margin-top: -4px;
}

.lobby-buttons {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.8vh, 18px);
  width: min(320px, 88vw);
  margin-top: clamp(4px, 1vh, 14px);
}

.lobby-btn {
  position: relative;
  border: none; border-radius: 16px; cursor: pointer;
  padding: clamp(14px, 2.2vh, 24px) clamp(22px, 4vw, 36px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  transition: transform 0.12s, box-shadow 0.12s;
  overflow: hidden;
}
.lobby-btn::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: rgba(255,255,255,0.12);
  border-radius: 16px 16px 0 0;
  pointer-events: none;
}
.lobby-btn.primary {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  box-shadow: 0 6px 24px rgba(255,165,0,0.4), 0 3px 0 #8B6914;
  color: #1a3a22;
}
.lobby-btn.secondary {
  background: linear-gradient(135deg, #2d7a4f, #1a4a2e);
  border: 2px solid rgba(255,215,0,0.35);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  color: #fff;
}
.lobby-btn:hover  { transform: translateY(-2px); }
.lobby-btn:active { transform: translateY(1px); }
.lb-main {
  font-family: 'Cinzel', serif;
  font-size: clamp(15px, 2.4vh, 22px);
  font-weight: 700;
}
.lb-sub {
  font-family: 'Sarabun', sans-serif;
  font-size: clamp(10px, 1.4vh, 13px);
  opacity: 0.7;
}

/* ===== Form Card (create / join) ===== */
.form-card {
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: clamp(16px, 2.5vh, 28px);
  padding: clamp(22px, 4vh, 44px) clamp(20px, 5vw, 38px);
  width: min(380px, 92vw);
  display: flex; flex-direction: column; gap: clamp(12px, 2vh, 20px);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

.back-btn {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.5);
  font-family: 'Sarabun', sans-serif;
  font-size: clamp(12px, 1.6vh, 15px);
  align-self: flex-start; padding: 4px 0;
  transition: color 0.2s;
}
.back-btn:hover { color: #fff; }

.form-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(17px, 2.8vh, 24px);
  font-weight: 700; color: #FFD700;
  text-align: center;
}

.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
  font-size: clamp(11px, 1.5vh, 14px);
  color: rgba(255,255,255,0.6);
  font-family: 'Sarabun', sans-serif;
}
.form-group input {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: clamp(10px, 1.5vh, 15px) clamp(12px, 2vw, 18px);
  color: #fff;
  font-family: 'Sarabun', sans-serif;
  font-size: clamp(13px, 1.8vh, 18px);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.form-group input:focus {
  border-color: rgba(255,215,0,0.55);
  background: rgba(255,255,255,0.11);
}
.form-group input::placeholder { color: rgba(255,255,255,0.28); }

.form-error {
  color: #FF6B6B;
  font-size: clamp(11px, 1.5vh, 14px);
  font-family: 'Sarabun', sans-serif;
  min-height: 18px;
  text-align: center;
}

/* ===== Players Row (above header) ===== */
.players-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: 100%;
  position: relative; z-index: 5;
}
.player-chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.crown {
  font-size: clamp(11px, 1.6vh, 15px);
  color: #FFD700; line-height: 1;
}
.player-name {
  background: rgba(0,0,0,0.38);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: clamp(10px, 1.4vh, 13px);
  color: rgba(255,255,255,0.8);
  font-family: 'Sarabun', sans-serif;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}
.player-chip.me .player-name {
  border-color: rgba(255,215,0,0.5);
  color: #FFD700;
}

/* ===== Header ===== */
.header-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.8vw, 20px);
  flex-shrink: 0;
  width: 100%;
  position: relative; z-index: 5;
}

.stat-pill {
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,215,0,0.35);
  border-radius: 999px;
  padding: clamp(5px, 0.8vh, 9px) clamp(14px, 2vw, 26px);
  color: #fff;
  font-family: 'Cinzel', serif;
  display: flex; align-items: center; gap: 6px;
  backdrop-filter: blur(6px);
}
.stat-value  { font-size: clamp(18px, 2.8vh, 30px); font-weight: 700; color: #FFD700; }
.stat-label  { font-size: clamp(10px, 1.3vh, 14px); opacity: 0.75; }
.stat-total  { font-size: clamp(10px, 1.3vh, 14px); opacity: 0.45; }

/* ===== Icon Buttons ===== */
.icon-btn {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,215,0,0.3);
  border-radius: 50%;
  width: clamp(32px, 4.8vh, 48px); height: clamp(32px, 4.8vh, 48px);
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.2s, color 0.2s;
}
.icon-btn svg { width: clamp(18px, 2.6vh, 26px); height: clamp(18px, 2.6vh, 26px); }
.icon-btn:hover { background: rgba(255,215,0,0.15); color: #FFD700; }

.sound-toggle.muted { color: rgba(255,255,255,0.25); }
.reset-btn svg { fill: #FFD700; }
.reset-btn:hover { transform: rotate(180deg); }

/* ===== JQK Bar ===== */
.jqk-bar {
  display: flex;
  gap: clamp(8px, 1.4vw, 18px);
  flex-shrink: 0;
  position: relative; z-index: 5;
}

.jqk-card {
  width: var(--jqk-w); height: var(--jqk-h);
  background: #fff;
  border-radius: clamp(8px, 1.2vh, 14px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  box-shadow: 2px 4px 14px rgba(0,0,0,0.45);
  position: relative; overflow: hidden;
  transition: transform 0.2s;
}
.jqk-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, transparent 55%);
  pointer-events: none;
}

.jqk-symbol {
  font-family: 'Cinzel', serif;
  font-size: calc(var(--jqk-h) * 0.31);
  font-weight: 900; line-height: 1;
}
.j-card .jqk-symbol, .k-card .jqk-symbol { color: #111; }
.q-card .jqk-symbol { color: #cc0000; }

.jqk-count {
  font-size: calc(var(--jqk-h) * 0.12);
  font-weight: 700; color: #666;
  margin-top: calc(var(--jqk-h) * 0.04);
}

.jqk-pips {
  display: flex; gap: clamp(3px, 0.5vw, 5px);
  margin-top: calc(var(--jqk-h) * 0.06);
}
.jqk-pip {
  width: clamp(6px, 1vh, 10px); height: clamp(6px, 1vh, 10px);
  border-radius: 50%;
  transition: background 0.3s;
}

@keyframes jqk-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); box-shadow: 0 0 18px 6px gold; }
  100% { transform: scale(1); }
}
.jqk-card.pulse { animation: jqk-pulse 0.55s ease; }

/* ===== Card Scene ===== */
.card-scene {
  flex-shrink: 0;
  perspective: clamp(600px, 100vh, 1200px);
  position: relative; z-index: 5;
}

.card-flip {
  width: var(--card-w); height: var(--card-h);
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-flip.flipped { transform: rotateY(180deg); }

.card-back-face,
.card-front-face {
  position: absolute; inset: 0;
  border-radius: clamp(10px, 1.5vh, 16px);
  backface-visibility: hidden;
  overflow: hidden;
}

.card-back-face {
  background: linear-gradient(145deg, #1a237e, #283593, #1a237e);
  box-shadow: 0 8px 28px rgba(0,0,0,0.55);
}
.card-back-inner {
  position: absolute; inset: 8px;
  border: 2px solid rgba(255,255,255,0.25);
  border-radius: calc(clamp(10px,1.5vh,16px) - 4px);
}
.card-back-pattern {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg,  rgba(255,255,255,0.06) 0, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 9px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 9px);
}

.card-front-face {
  transform: rotateY(180deg);
  box-shadow: 0 8px 28px rgba(0,0,0,0.55);
}

/* ===== Playing Card ===== */
.card {
  width: 100%; height: 100%;
  border-radius: clamp(10px, 1.5vh, 16px);
  background: #fff;
  font-family: 'Cinzel', serif;
  position: relative;
  overflow: hidden;
}
.card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, transparent 100%);
  border-radius: clamp(10px,1.5vh,16px) clamp(10px,1.5vh,16px) 0 0;
  pointer-events: none; z-index: 2;
}

.card.spades, .card.clubs   { color: #111; }
.card.hearts, .card.diamonds { color: #C0392B; }

/* ===== Card corner labels (.cc) ===== */
.cc {
  position: absolute;
  font-family: 'Cinzel', serif;
  font-size: calc(var(--card-h) * 0.075);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  z-index: 3;
  pointer-events: none;
}
.cc.tl { top:  calc(var(--card-h) * 0.024); left:  calc(var(--card-w) * 0.08); }
.cc.br {
  bottom: calc(var(--card-h) * 0.024);
  right:  calc(var(--card-w) * 0.08);
  transform: rotate(180deg);
}

.card.hearts .cc, .card.diamonds .cc { color: #C0392B; }
.card.spades .cc, .card.clubs .cc    { color: #111; }

/* ===== Pip field ===== */
.pip-field {
  position: absolute; inset: 0;
  pointer-events: none;
}
.pip {
  position: absolute; line-height: 1;
  pointer-events: none; display: block;
}
.card.hearts .pip, .card.diamonds .pip { color: #C0392B; }
.card.spades .pip, .card.clubs .pip    { color: #111; }

/* ===== Face card inner SVG ===== */
.face-inner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.face-svg { width: 100%; height: 100%; display: block; }

/* Glow ring */
.card-scene.glow-gold::after {
  content: '';
  position: absolute; inset: -14px; border-radius: 24px; z-index: -1;
  animation: glow-ring 2.5s ease-in-out forwards;
  pointer-events: none;
}
@keyframes glow-ring {
  0%   { box-shadow: 0 0 0   0   rgba(255,215,0,0); }
  30%  { box-shadow: 0 0 40px 14px rgba(255,215,0,0.75); }
  80%  { box-shadow: 0 0 24px 10px rgba(255,165,0,0.45); }
  100% { box-shadow: 0 0 0   0   rgba(255,215,0,0); }
}

/* ===== Progress bar ===== */
.progress-container {
  width: var(--card-w); height: clamp(4px, 0.6vh, 6px);
  background: rgba(255,255,255,0.15);
  border-radius: 3px; overflow: hidden; flex-shrink: 0;
  position: relative; z-index: 5;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #FFD700, #FF8C00);
  border-radius: 3px;
  transition: width 0.5s ease;
  box-shadow: 0 0 8px rgba(255,215,0,0.6);
}

/* ===== Rule Area ===== */
.rule-area {
  width: 100%;
  height: clamp(130px, 22vh, 230px);
  position: relative; z-index: 5;
  flex-shrink: 0;
}

.loading-content,
.rule {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--gap);
  width: 100%;
}

.rule-bubble {
  background: rgba(0,0,0,0.38);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: clamp(12px, 2vh, 20px);
  padding: clamp(10px, 1.5vh, 18px) clamp(16px, 2.5vw, 30px);
  width: min(calc(var(--card-w) * 1.6), 90vw);
  min-height: clamp(48px, 7vh, 80px);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.rule-text {
  color: #fff;
  font-size: clamp(13pt, 2.2vh, 22pt);
  line-height: 1.4;
  font-family: 'Sarabun', sans-serif;
}

.loading-content {
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  color: rgba(255,255,255,0.55);
  font-size: clamp(11pt, 1.8vh, 16pt);
}
.spinner {
  width: clamp(26px, 4vh, 40px); height: clamp(26px, 4vh, 40px);
  border: 3px solid rgba(255,255,255,0.18);
  border-top-color: #FFD700;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

/* ===== Draw Button ===== */
.draw-btn {
  position: relative;
  padding: clamp(10px, 1.6vh, 18px) clamp(28px, 5vw, 56px);
  font-size: clamp(14pt, 2.2vh, 24pt);
  font-family: 'Cinzel', serif; font-weight: 700;
  color: #1a3a22;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  border: none; border-radius: 50px; cursor: pointer;
  box-shadow: 0 4px 18px rgba(255,165,0,0.45), 0 2px 0 #8B6914;
  transition: transform 0.12s, box-shadow 0.12s;
  display: flex; align-items: center;
  overflow: hidden; white-space: nowrap;
  align-self: center;
}
.draw-btn::before {
  content: '';
  position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  animation: btn-shine 3.5s infinite;
}
.draw-btn:hover  { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,165,0,0.55), 0 3px 0 #8B6914; }
.draw-btn:active { transform: translateY(1px);  box-shadow: 0 2px 8px rgba(255,165,0,0.3), 0 1px 0 #8B6914; }
.draw-btn:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

/* ===== Players Modal ===== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 50;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}

.modal-card {
  background: #1a2e1e;
  border: 1px solid rgba(255,215,0,0.25);
  border-radius: 20px;
  width: min(340px, 90vw);
  padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
}
.modal-header h3 {
  font-family: 'Cinzel', serif;
  font-size: 18px; color: #FFD700;
}
.modal-close {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.5); font-size: 18px;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.modal-close:hover { background: rgba(255,255,255,0.1); color: #fff; }

.players-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 240px; overflow-y: auto;
}
.modal-player {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.8);
  font-family: 'Sarabun', sans-serif; font-size: 14px;
}
.modal-player.me {
  background: rgba(255,215,0,0.1);
  border: 1px solid rgba(255,215,0,0.3);
  color: #FFD700;
}
.modal-crown { color: #FFD700; font-size: 16px; }

.room-code-row {
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 20px;
  letter-spacing: 4px; color: #FFD700;
  padding: 10px;
  background: rgba(0,0,0,0.3);
  border-radius: 10px;
}

.leave-btn {
  background: none;
  border: 1px solid rgba(255,100,100,0.35);
  border-radius: 10px;
  padding: 10px;
  color: rgba(255,120,120,0.75);
  cursor: pointer;
  font-family: 'Sarabun', sans-serif; font-size: 14px;
  transition: background 0.2s, color 0.2s;
}
.leave-btn:hover { background: rgba(255,60,60,0.15); color: #ff6b6b; }

/* ===== Particles & Overlays ===== */
.particles-container {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 20; overflow: hidden;
}
.particle {
  position: absolute; border-radius: 50%;
  animation: particle-fly 1.1s ease-out forwards;
  pointer-events: none;
}

.special-overlay {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 25;
  display: flex; align-items: center; justify-content: center;
}
.special-text {
  font-family: 'Cinzel', serif;
  font-size: clamp(60px, 14vw, 120px);
  font-weight: 900; color: #FFD700;
  text-shadow: 0 0 20px rgba(255,215,0,0.9), 0 0 50px rgba(255,165,0,0.6);
  animation: special-pop 1.4s ease-out forwards;
  opacity: 0;
}

/* ===== Keyframes ===== */
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes btn-shine {
  0%  { left: -120%; }
  18% { left: 120%;  }
  100%{ left: 120%;  }
}
@keyframes particle-fly {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.2); }
}
@keyframes special-pop {
  0%   { opacity: 0; transform: scale(0.2) rotate(-8deg); }
  25%  { opacity: 1; transform: scale(1.25) rotate(3deg); }
  55%  { opacity: 1; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(0.9) translateY(-40px); }
}

/* ===== Short screens ===== */
@media (max-height: 640px) {
  :root {
    --card-h:     clamp(180px, 36vh, 280px);
    --jqk-h:      clamp(64px, 10vh, 90px);
    --gap:        clamp(8px, 1.8vh, 16px);
    --pad-top:    clamp(28px, 4vh, 44px);
    --pad-bottom: clamp(16px, 2.5vh, 28px);
  }
}

/* ===== Narrow screens ===== */
@media (max-width: 380px) {
  :root { --jqk-h: clamp(68px, 11vh, 100px); }
  .stat-pill { padding: 5px 12px; }
}