/* =========================================================================
   ดัมมี่ Party — Design System
   โทเคนกลางทั้งเกม: สี / ระยะ / เงา / จังหวะ / ขนาดไพ่
   แก้ที่นี่ที่เดียว หน้าทีวีกับมือถือเปลี่ยนตามทั้งคู่
   ========================================================================= */
:root {
  /* ---- พื้นหลัง / โต๊ะ (ไล่จากมืดสุด -> สักหลาดสว่าง) ---- */
  --bg-void:      #04090b;
  --bg-deep:      #071316;
  --felt-dark:    #06301d;
  --felt-base:    #0a4a2c;
  --felt-lit:     #10643a;
  --felt-hi:      #177d47;

  /* ---- ทอง = สีของ "ตาเรา / ปุ่มหลัก" (ใช้เน้นจุดเดียวเสมอ) ---- */
  --gold-100: #fff3cf;
  --gold-300: #ffdf8e;
  --gold-500: #f5c451;
  --gold-700: #d19a22;
  --gold-900: #7a5406;

  /* ---- สีสื่อความหมาย ---- */
  --danger-300:#ff8b98;
  --danger-500:#e2374d;
  --danger-700:#8e1425;
  --info-300:  #8fbcff;
  --info-500:  #3d7ee0;
  --info-700:  #1a3f80;
  --good-300:  #7dffab;
  --good-500:  #2fbf62;

  /* ---- ตัวอักษร ---- */
  --ink-hi:  #ffffff;
  --ink-mid: rgba(255,255,255,.72);
  --ink-low: rgba(255,255,255,.45);
  --line-soft: rgba(255,255,255,.12);
  --line-hard: rgba(255,255,255,.22);

  --font-ui: 'Kanit', 'Noto Sans Thai', 'Segoe UI', Tahoma, sans-serif;
  --font-num: 'Kanit', 'Segoe UI', Tahoma, sans-serif;

  /* ---- ความลึก: เงาไล่ระดับ 4 ชั้น ---- */
  --e1: 0 1px 2px rgba(0,0,0,.35);
  --e2: 0 3px 8px rgba(0,0,0,.40);
  --e3: 0 8px 20px rgba(0,0,0,.48);
  --e4: 0 18px 44px rgba(0,0,0,.60);
  --glow-gold: 0 0 0 2px rgba(245,196,81,.85), 0 0 24px rgba(245,196,81,.45);

  /* ---- มุมโค้ง ---- */
  --r-xs: 6px; --r-sm: 9px; --r-md: 13px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px;

  /* ---- จังหวะการเคลื่อนไหว ---- */
  --t-snap: .10s;
  --t-fast: .16s;
  --t-med:  .26s;
  --t-slow: .45s;
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-back: cubic-bezier(.34,1.56,.64,1);

  /* ---- ขนาดไพ่: อัตราส่วนจริง 2.5 x 3.5 นิ้ว ---- */
  --card-w: 62px;
  --card-h: calc(var(--card-w) * 1.4);

  /* ---- เกรนบางๆ ทับพื้น กันสีไล่เฉดเป็นแถบ (banding) บนจอทีวีใหญ่ ---- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: rgba(0,0,0,.25); border-radius: var(--r-pill); }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: var(--r-pill); }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.30); }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-ui);
  font-weight: 400;
  color: var(--ink-hi);
  background-color: var(--bg-void);
  /* พื้นหลังห้อง: ไฟสปอตจากบนโต๊ะ + ขอบมืดดึงสายตาเข้ากลางจอ */
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 34%, rgba(30,168,96,.28), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 50%, #0c2a20 0%, #071619 55%, var(--bg-void) 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.hidden { display: none !important; }

/* =========================================================================
   ไพ่ — หัวใจของภาพรวมเกม
   หลักที่ใช้: อัตราส่วนไพ่จริง, กระดาษมีชั้น (พื้น+ขอบใน+แสงขอบบน),
   และ LOD (level of detail): ใบใหญ่วางแต้มเต็มลาย ใบเล็กเหลือแค่มุม+สัญลักษณ์กลาง
   ========================================================================= */
.card {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--card-w);
  height: var(--card-h);
  flex-shrink: 0;
  border-radius: calc(var(--card-w) * .11);
  background: linear-gradient(157deg, #ffffff 0%, #fbfaf7 45%, #eceae4 100%);
  color: #14181d;
  font-family: var(--font-num);
  font-weight: 700;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* ขอบใน + แสงขอบบน + เงาตกพื้น = ไพ่ดูเป็นแผ่นวัตถุจริง ไม่ใช่สี่เหลี่ยมแบน */
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 3px rgba(0,0,0,.07),
    var(--e2);
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    filter var(--t-fast) var(--ease);
}
/* ใบเล็ก: ให้ container กำหนดขนาดผ่าน --card-w-sm ได้ (ทีวีสเกลตามจอ) */
.card.small { --card-w: var(--card-w-sm, 44px); }

.card.red   { color: #cf2338; }
.card.black { color: #16191f; }

/* ---- มุมไพ่: เลข + ดอก เรียงแนวตั้ง มุมล่างกลับหัวเหมือนไพ่จริง ---- */
.card .corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: .92;
  font-size: calc(var(--card-w) * .235);
  letter-spacing: -.02em;
  z-index: 2;
}
.card .corner.top    { top: calc(var(--card-w) * .07); left: calc(var(--card-w) * .075); }
.card .corner.bottom { bottom: calc(var(--card-w) * .07); right: calc(var(--card-w) * .075); transform: rotate(180deg); }
.card .corner .suit  { font-size: .92em; margin-top: .06em; }

/* ---- ใบเล็ก: ตัดลายแต้มออก เหลือดอกกลางใบเดียว อ่านง่ายกว่าเมื่อย่อ ---- */
.card .pip {
  font-size: calc(var(--card-w) * .46);
  line-height: 1;
  opacity: .95;
}

/* ---- ใบใหญ่: พื้นที่วางลายกลางไพ่ (กริด 3 คอลัมน์ x 13 แถว = ตำแหน่งแต้มมาตรฐาน) ---- */
.card-art {
  position: absolute;
  inset: calc(var(--card-w) * .28) calc(var(--card-w) * .17);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(13, 1fr);
  place-items: center;
  pointer-events: none;
}
.card-art .pip-dot {
  font-size: calc(var(--card-w) * .225);
  line-height: 1;
}
.card-art .pip-dot.flip { transform: rotate(180deg); }

/* แต้ม A: ดอกใหญ่กลางใบ */
.card-art .pip-ace {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  font-size: calc(var(--card-w) * .62);
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.18));
}

/* ---- ไพ่คน J/Q/K: แผ่นลายในกรอบ ---- */
.card-court {
  position: absolute;
  inset: calc(var(--card-w) * .215) calc(var(--card-w) * .155);
  border-radius: calc(var(--card-w) * .05);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(0,0,0,.035) 0 50%, rgba(0,0,0,.075) 50% 100%);
  box-shadow: inset 0 0 0 1.5px currentColor, inset 0 0 0 3.5px rgba(255,255,255,.92);
}
.card-court::before {
  /* ลายเส้นเฉียงเฉพาะขอบ เว้นกลางไว้ให้ตัวอักษรอ่านชัด (mask ไล่จากใสตรงกลาง) */
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, currentColor 0 1px, transparent 1px 7px);
  opacity: .24;
  -webkit-mask-image: radial-gradient(ellipse 62% 52% at center, transparent 38%, #000 88%);
  mask-image: radial-gradient(ellipse 62% 52% at center, transparent 38%, #000 88%);
}
.card-court .court-letter {
  position: relative;
  font-size: calc(var(--card-w) * .48);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.03em;
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
}
.card-court .court-suit {
  position: relative;
  font-size: calc(var(--card-w) * .26);
  line-height: 1;
  margin-top: calc(var(--card-w) * -.02);
  opacity: .9;
}

/* ---- ป้ายไพ่พิเศษ (หัว / เต): เหรียญทองติดหัวไพ่ ---- */
.card-badge {
  position: absolute;
  top: calc(var(--card-w) * -.13);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  background: linear-gradient(180deg, var(--gold-100), var(--gold-500) 55%, var(--gold-700));
  color: #4a3400;
  font-size: calc(var(--card-w) * .155);
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1;
  padding: calc(var(--card-w) * .06) calc(var(--card-w) * .11);
  border-radius: var(--r-pill);
  box-shadow: 0 0 0 1px rgba(122,84,6,.9), 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.8);
  white-space: nowrap;
}

/* ---- สถานะไพ่: hover ยกเบา / เลือกแล้วยกสูง + เรืองทอง ---- */
.card:hover:not(.back):not(.selected) {
  transform: translateY(-5px);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.95), var(--e3);
}
.card.selected {
  transform: translateY(-18px) scale(1.04);
  z-index: 3;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.95),
    var(--glow-gold),
    var(--e4);
}

/* ---- หลังไพ่: ลายกีโยเช่ + เหรียญกลาง ---- */
.card.back {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.16), transparent 62%),
    repeating-linear-gradient(45deg,  rgba(255,255,255,.10) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.10) 0 2px, transparent 2px 7px),
    linear-gradient(160deg, #1d3f8f 0%, #14285e 55%, #0d1b40 100%);
  color: var(--gold-500);
  box-shadow:
    inset 0 0 0 2.5px #f6f4ef,
    inset 0 0 0 4px rgba(0,0,0,.35),
    inset 0 0 22px rgba(0,0,0,.45),
    var(--e2);
}
.card.back::after {
  /* วงแหวนกลางหลังไพ่ — ยังสวยแม้ไม่มีข้อความข้างใน (เช่นกองจั่วบนมือถือ) */
  content: '';
  position: absolute;
  width: 58%; aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid rgba(245,196,81,.55);
  box-shadow: 0 0 0 3px rgba(0,0,0,.25), inset 0 0 12px rgba(245,196,81,.18);
}
.card.back:hover { transform: none; }
.card.back .back-emblem {
  position: relative;
  z-index: 2;
  font-size: calc(var(--card-w) * .16);
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--gold-300);
  background: rgba(8,20,52,.9);
  padding: calc(var(--card-w) * .05) calc(var(--card-w) * .10);
  border-radius: var(--r-xs);
  box-shadow: 0 0 0 1px rgba(245,196,81,.45);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* ---- แอนิเมชันแจกไพ่: ไพ่ร่วงลงโต๊ะพร้อมพลิกเล็กน้อย ---- */
@keyframes dealIn {
  0%   { opacity: 0; transform: translateY(-26px) scale(.82) rotate(-7deg); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
.card.deal-in { animation: dealIn var(--t-med) var(--ease-back) both; }

/* =========================================================================
   ปุ่ม — 3 ระดับความสำคัญ (หลัก / รอง / อันตราย) + ปุ่มมีความหนา 3 มิติ
   ========================================================================= */
button {
  position: relative;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .2px;
  cursor: pointer;
  border: none;
  border-radius: var(--r-md);
  padding: 12px 20px;
  color: #3c2b00;
  background: linear-gradient(180deg, var(--gold-100) 0%, var(--gold-300) 38%, var(--gold-500) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -2px 0 rgba(0,0,0,.10),
    0 3px 0 var(--gold-700),
    var(--e2);
  transition: transform var(--t-snap) var(--ease), box-shadow var(--t-snap) var(--ease), filter var(--t-fast) var(--ease);
  overflow: hidden;
}
button::after {
  /* แสงวาบพาดปุ่มตอน hover — สัญญาณว่ากดได้ */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform var(--t-slow) var(--ease);
  pointer-events: none;
}
button:hover:not(:disabled) { filter: brightness(1.06); }
button:hover:not(:disabled)::after { transform: translateX(120%); }
button:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 var(--gold-700), var(--e1);
}
button:focus-visible { outline: 3px solid var(--gold-300); outline-offset: 3px; }
button:disabled {
  cursor: not-allowed;
  filter: grayscale(.85) brightness(.75);
  opacity: .45;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

button.secondary {
  color: #fff;
  background: linear-gradient(180deg, #6ba3f2 0%, var(--info-500) 40%, #2557a8 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.18), 0 3px 0 var(--info-700), var(--e2);
}
button.secondary:active:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 var(--info-700), var(--e1); }

button.danger {
  color: #fff;
  background: linear-gradient(180deg, #ff7d8c 0%, var(--danger-500) 40%, #b81f34 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.18), 0 3px 0 var(--danger-700), var(--e2);
}
button.danger:active:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 var(--danger-700), var(--e1); }

/* =========================================================================
   ช่องกรอกข้อความ
   ========================================================================= */
input[type=text] {
  font-family: inherit;
  font-size: 16px;               /* 16px กัน iOS ซูมอัตโนมัติตอนโฟกัส */
  font-weight: 500;
  padding: 13px 16px;
  border-radius: var(--r-md);
  border: 2px solid rgba(255,255,255,.14);
  outline: none;
  color: #fff;
  background: rgba(0,0,0,.34);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.35);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
input[type=text]::placeholder { color: rgba(255,255,255,.38); font-weight: 400; }
input[type=text]:focus {
  border-color: var(--gold-500);
  background: rgba(0,0,0,.5);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.35), 0 0 0 4px rgba(245,196,81,.18);
}

/* =========================================================================
   อวาตาร์ผู้เล่น
   ========================================================================= */
.avatar {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 19px;
  color: #fff;
  margin: 0 auto 6px;
  background: linear-gradient(160deg, #5b9cf0, #1c4694);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.35),
    inset 0 -3px 6px rgba(0,0,0,.30),
    0 0 0 2px rgba(255,255,255,.20),
    var(--e2);
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.avatar.bot { background: linear-gradient(160deg, #9aa1ac, #464b54); }

/* =========================================================================
   ยูทิลิตี้ร่วม
   ========================================================================= */
.panel {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--e2), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(6px);
}
.label-caps {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-low);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}