/* WERSJA: v1.0
 * 2026-10-18: Wspólne sukno, awersy kart, kolory i podstawowe elementy sterowania.
 * Osobny arkusz pozwala wycofać sam wygląd bez zmiany obsługi i zasad gry.
 */
:root {
  --felt-primary: #155e2b;
  --felt-secondary: #0d431d;
  --felt-dark: #072911;
  --gold-accent: #f3c663;
  --gold: var(--gold-accent);
  --card-face: #fffdf3;
  --card-ink: #192720;
  --card-red: #bd2138;
  --card-radius: 8px;
  --table-texture:
    radial-gradient(ellipse at 50% 45%, #22803e88 0%, #0c3e1abf 68%, #051e0cf2 100%),
    repeating-linear-gradient(45deg, #ffffff06 0px, #ffffff06 2px, transparent 2px, transparent 18px),
    repeating-linear-gradient(-45deg, #ffffff06 0px, #ffffff06 2px, transparent 2px, transparent 18px);
}
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
.table-viewport, .felt {
  background-color: var(--felt-primary);
  background-image: var(--table-texture);
  background-size: 100% 100%, 36px 36px, 36px 36px;
}
.felt {
  border: 1px solid #f3c66355;
  border-radius: 18px;
  box-shadow: inset 0 0 60px #0005, 0 8px 24px #0003;
}
.playing-card, .card {
  background: var(--card-face);
  color: var(--card-ink);
  border: 1px solid #c6c7bb;
  border-radius: var(--card-radius);
  font-family: Georgia, "Times New Roman", serif;
  box-shadow: -2px 3px 8px #0006;
}
.playing-card.red-suit, .card.red { color: var(--card-red); }
.playing-card.black-suit { color: var(--card-ink); }
.playing-card .card-rank, .card > span:first-child, .card .bottom {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: .95;
}
.playing-card .card-suit-small, .card .corner-suit {
  font-size: 16px;
  line-height: .95;
  margin-top: 1px;
}
.card .pip, .hand .card .pip, .playing-card .card-center-art {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(28px, 6vw, 36px);
  pointer-events: none;
  opacity: .92;
}
.card > span:first-child, .card .bottom { position: relative; z-index: 1; }
.card:hover { background: var(--card-face); }
.hand .card:disabled { background: #e0e4d8; color: #6b776d; }
.hand .card.red:disabled { color: #af6c76; }
.played .card:disabled, .last-trick .card:disabled, .meld-row .card:disabled {
  background: var(--card-face);
  color: var(--card-ink);
}
.played .card.red:disabled, .last-trick .card.red:disabled, .meld-row .card.red:disabled { color: var(--card-red); }
.topbar, .gamebar { color: #e9f2e8; }
.topbar button, .gamebar button, .dropdown-action-btn {
  border-radius: 8px;
  border: 1px solid #f3c66355;
  background: #0d431d;
  color: #eef6ed;
}
.primary, .btn-primary-play { background: var(--gold-accent); color: #19301b; }
.seat { background: #05210eeb; border-color: #f3c66366; border-radius: 8px; }
.seat.active { border-color: var(--gold-accent); }
.shared-game-menu { position: relative; flex-shrink: 0; }
.shared-game-menu > summary {
  display: grid; place-items: center; cursor: pointer; list-style: none;
  width: 38px; height: 38px; color: #eef6ed; background: #0d431d;
  border: 1px solid #f3c66355; border-radius: 8px;
}
.shared-game-menu > summary::-webkit-details-marker { display: none; }
.shared-menu-surface { background: #072911f5; border: 1px solid #f3c66366; box-shadow: 0 8px 28px #0008; border-radius: 12px; }
.shared-menu-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 180;
  width: min(290px, 88vw); padding: 10px; display: grid; gap: 7px;
}
.shared-menu-panel a { padding: 11px; border-radius: 8px; color: #f3c663; background: #155e2b66; font-size: 14px; }
.shared-menu-panel a:hover { background: #155e2b; }
@media (max-width: 650px) {
  .felt { border-radius: 12px; }
  .topbar { gap: 7px; }
  .topbar > a { font-size: 0; }
  .topbar > a::before { content: '←'; font-size: 22px; display: block; padding: 4px 8px; }
  .topbar .brand { font-size: 12px; }
}

/* ============================================================================
   WSPÓLNY MODAL DIALOGOWY GRY (Zamiast systemowych alert() / confirm())
   ============================================================================ */
.game-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(3, 18, 7, 0.82);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  opacity: 1;
  transition: opacity 0.18s ease;
  animation: gameModalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.game-modal-backdrop.closing {
  opacity: 0;
  pointer-events: none;
}

@keyframes gameModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.game-modal-card {
  position: relative;
  width: 100%;
  max-width: 390px;
  background: radial-gradient(ellipse at 50% 15%, #0f4822 0%, #062811 85%);
  border: 1.5px solid var(--gold-accent, #f3c663);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(243, 198, 99, 0.22);
  padding: 22px 20px 18px 20px;
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  animation: gameModalCardSlide 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes gameModalCardSlide {
  from { transform: translateY(14px) scale(0.96); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.game-modal-icon {
  font-size: 38px;
  line-height: 1;
  margin-bottom: 10px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}

.game-modal-title {
  font-size: 17px;
  font-weight: 800;
  color: #ffd984;
  margin: 0 0 8px 0;
  letter-spacing: -0.2px;
}

.game-modal-body {
  font-size: 13px;
  line-height: 1.45;
  color: #d1fae5;
  margin: 0 0 18px 0;
}

.game-modal-body p {
  margin: 0 0 6px 0;
}
.game-modal-body p:last-child {
  margin-bottom: 0;
}

.game-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.game-modal-btn {
  width: 100%;
  padding: 11px 16px;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s ease;
  border: none;
  font-family: inherit;
  box-sizing: border-box;
}

.game-modal-btn.primary {
  background: linear-gradient(180deg, #f6d27e 0%, #d89e2e 100%);
  color: #1a1600;
  box-shadow: 0 4px 12px rgba(216, 158, 46, 0.35);
  font-weight: 800;
}
.game-modal-btn.primary:hover, .game-modal-btn.primary:focus-visible {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.game-modal-btn.danger {
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.game-modal-btn.danger:hover, .game-modal-btn.danger:focus-visible {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.game-modal-btn.secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #e2e8f0;
}
.game-modal-btn.secondary:hover, .game-modal-btn.secondary:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}