/* Pusoy Dos Dagat Table styles (v101).
   Plum night sea table, gold wave centre, ivory capiz card faces
   with a gold edge. Light theme is a capiz day sea. Large-card,
   high-contrast, and reduced-motion variants are toggled by
   classes on the panel container. Layout targets a 390px phone,
   narrows to 360px and below, and centres at 820px on wide
   screens. Card faces use Puso colours for the suits, never a
   casino felt look. */
.pd-table { background: linear-gradient(180deg, #2b1233 0%, #46204a 55%, #1d0b24 100%); color: #fdf8ec; border-radius: 16px; padding: 14px 12px; max-width: 390px; margin: 0 auto; }
.pd-table p { margin: 6px 0; }
.pd-score { font-weight: 700; }
.pd-opp, .pd-me { font-weight: 600; }
.pd-backs { display: flex; flex-wrap: wrap; gap: 3px; min-height: 30px; }
.pd-back { display: inline-block; background: #46204a; border: 1px solid #efa93b; color: #e85d75; border-radius: 4px; padding: 4px 5px; font-size: 12px; line-height: 1; }
.pd-badge { display: inline-block; background: #efa93b; color: #2b1233; border-radius: 999px; padding: 2px 10px; font-weight: 700; font-size: 13px; }
.pd-badge.lastcard { animation: pd-pulse 1s ease-in-out infinite; background: #ffd97a; box-shadow: 0 0 0 3px #efa93b; }
@keyframes pd-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.pd-wave { border: 2px solid #efa93b; border-radius: 12px; padding: 8px; margin: 10px 0; background: radial-gradient(ellipse at center, #5a2a63 0%, #2b1233 70%); }
.pd-wave-label { font-weight: 700; color: #efa93b; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; }
.pd-centre { display: flex; flex-wrap: wrap; gap: 4px; min-height: 74px; align-items: center; }
.pd-hand { display: flex; flex-wrap: wrap; gap: 4px; min-height: 74px; }
.pd-card { width: 52px; height: 78px; background: #fdf8ec; color: #2b1233; border: 2px solid #efa93b; border-radius: 8px; padding: 3px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; font-family: inherit; }
.pd-card.diamonds { color: #b8860b; }
.pd-card.hearts { color: #e85d75; }
.pd-card.spades { color: #2b1233; }
.pd-card.clubs { color: #3a7d44; }
.pd-card.selected { outline: 3px solid #efa93b; transform: translateY(-6px); }
.pd-rank { font-size: 20px; font-weight: 800; line-height: 1; }
.pd-suit { font-size: 12px; }
.pd-word { font-size: 11px; font-weight: 600; }
.pd-word-en { font-size: 10px; color: #6b4a6e; }
.pd-wave-mark { font-size: 9px; color: #b8860b; font-weight: 700; }
.pd-lastcard { background: #efa93b; color: #2b1233; font-weight: 800; border-radius: 8px; padding: 6px 8px; animation: pd-pulse 1s ease-in-out infinite; }
.pd-win { background: #fdf8ec; color: #2b1233; border: 2px solid #efa93b; border-radius: 12px; padding: 10px; font-weight: 600; }
.pd-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.pd-stats, .pd-history { font-size: 14px; }
.pd-reactions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.pd-incoming { font-style: italic; }
.pd-toggles { display: flex; flex-wrap: wrap; gap: 10px; font-size: 14px; margin: 10px 0; }
.pd-toggles label { cursor: pointer; }
.pd-how { margin-top: 10px; font-size: 14px; }
.pd-how summary { cursor: pointer; font-weight: 700; }
.pd-setup { max-width: 390px; margin: 0 auto; }
.pd-setup label { display: block; margin: 8px 0; }
.pd-gloss { font-size: 14px; font-style: italic; }
.pd-msg { font-weight: 600; }
/* Light theme: capiz day sea. */
.pd-light .pd-table { background: linear-gradient(180deg, #e8f0f2 0%, #fdf8ec 55%, #dbe8ec 100%); color: #2b1233; }
.pd-light .pd-wave { background: radial-gradient(ellipse at center, #fdf8ec 0%, #dbe8ec 70%); }
.pd-light .pd-back { background: #fdf8ec; }
/* Large cards toggle. */
.pd-large .pd-card { width: 64px; height: 96px; }
.pd-large .pd-rank { font-size: 24px; }
/* High contrast toggle. */
.pd-highcontrast .pd-table { background: #000000; color: #ffffff; }
.pd-highcontrast .pd-card { background: #ffffff; border-color: #ffffff; }
.pd-highcontrast .pd-badge, .pd-highcontrast .pd-lastcard { background: #ffff00; color: #000000; }
/* Reduced motion toggle, plus the platform preference. */
.pd-reduced .pd-badge.lastcard, .pd-reduced .pd-lastcard { animation: none; }
.pd-reduced .pd-card.selected { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .pd-badge.lastcard, .pd-lastcard { animation: none; }
  .pd-card.selected { transform: none; }
}
/* Narrow and foldable widths: cards stay above the 44px tap target minimum. */
@media (max-width: 360px) {
  .pd-table { padding: 10px 8px; }
  .pd-card { width: 46px; height: 72px; }
  .pd-rank { font-size: 18px; }
}
/* Wide screens: the table centres at a readable width. */
@media (min-width: 984px) {
  .pd-table, .pd-setup { max-width: 820px; }
}