@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
  --bg-primary:     #080c18;
  --bg-secondary:   #0f1527;
  --bg-table:       #1a3a1a;
  --color-gold:     #d4af37;
  --color-gold-l:   #f5d35e;
  --color-teal:     #00c6e0;
  --color-teal-d:   #0092a8;
  --color-red:      #e63946;
  --color-green:    #2dc653;
  --color-glass:    rgba(255,255,255,0.04);
  --color-glass-b:  rgba(255,255,255,0.1);
  --card-w:         76px;
  --card-h:         106px;
  --card-r:         8px;
  --shadow-card:    0 6px 20px rgba(0,0,0,0.6);
  --glow-gold:      0 0 25px rgba(212,175,55,0.55);
  --glow-teal:      0 0 25px rgba(0,198,224,0.55);
  --tr-fast:        0.18s ease;
  --tr-norm:        0.3s ease;
  --tr-slow:        0.55s ease;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-primary);
  color: #fff;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

button { touch-action: manipulation; }

button { font-family: inherit; cursor: pointer; border: none; outline: none; }
button:disabled { cursor: not-allowed; }

/* ============================================================
   SCREEN SYSTEM
   ============================================================ */
.screen {
  position: fixed; inset: 0;
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
}
.screen.active { display: flex; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  padding: 15px 36px; border-radius: 12px;
  font-size: 15px; font-weight: 600;
  transition: all var(--tr-norm);
  position: relative; overflow: hidden;
  letter-spacing: 0.5px;
}
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(rgba(255,255,255,0.12), transparent);
  opacity: 0; transition: opacity var(--tr-fast);
}
.btn:hover::after { opacity: 1; }
.btn:active { transform: scale(0.97) !important; }

.btn-primary {
  background: linear-gradient(135deg, var(--color-teal), var(--color-teal-d));
  color: #fff; box-shadow: 0 4px 18px rgba(0,198,224,0.4);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,198,224,0.6); }

.btn-secondary {
  background: var(--color-glass); color: rgba(255,255,255,0.75);
  border: 1px solid var(--color-glass-b); backdrop-filter: blur(10px);
}
.btn-secondary:hover { background: rgba(255,255,255,0.09); transform: translateY(-2px); }

.btn-gold {
  background: linear-gradient(135deg, var(--color-gold), #b8941c);
  color: #1a1200; font-size: 17px; font-weight: 700;
  letter-spacing: 1.5px; box-shadow: var(--glow-gold);
}
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(212,175,55,0.7); }

.btn-danger {
  background: linear-gradient(135deg, #e63946, #9d1b1b);
  color: #fff; box-shadow: 0 4px 18px rgba(230,57,70,0.4);
}
.btn-danger:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(230,57,70,0.6); }

/* ============================================================
   MAIN MENU SCREEN
   ============================================================ */
#screen-menu {
  background:
    radial-gradient(ellipse at 50% -20%, rgba(0,198,224,0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 10% 90%, rgba(212,175,55,0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 80%, rgba(45,198,83,0.08) 0%, transparent 50%),
    var(--bg-primary);
}

.menu-bg-cards {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.bg-card {
  position: absolute; width: var(--card-w); height: var(--card-h);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--card-r);
  animation: bgCardFloat linear infinite;
}

@keyframes bgCardFloat {
  0%   { transform: translateY(110vh) rotate(var(--rot)); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-20vh) rotate(calc(var(--rot) + 30deg)); opacity: 0; }
}

.menu-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; gap: 0;
}

.menu-logo {
  font-family: 'Cinzel', serif;
  font-size: clamp(64px, 10vw, 108px);
  font-weight: 900;
  background: linear-gradient(135deg, #b8941c 0%, var(--color-gold) 30%, var(--color-gold-l) 50%, var(--color-gold) 70%, #b8941c 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: logoShimmer 4s linear infinite, logoGlow 3s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 35px rgba(212,175,55,0.6));
  letter-spacing: clamp(8px, 2vw, 24px);
  margin-bottom: 8px;
}

/* Logo yanındaki küçük "kamiller" etiketi — ana tasarımı bozmaz */
.logo-tag {
  font-family: 'Inter', sans-serif;
  font-size: clamp(11px, 1.6vw, 17px);
  font-weight: 700;
  letter-spacing: clamp(2px, 0.5vw, 5px);
  text-transform: lowercase;
  color: var(--color-teal);
  -webkit-text-fill-color: var(--color-teal); /* parent'ın transparent fill'ini ez */
  text-shadow: 0 0 14px rgba(0,198,224,0.55);
  vertical-align: super;
  margin-left: clamp(6px, 1vw, 14px);
  animation: none;
}

@keyframes logoShimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@keyframes logoGlow {
  from { filter: drop-shadow(0 0 20px rgba(212,175,55,0.4)); }
  to   { filter: drop-shadow(0 0 55px rgba(212,175,55,0.85)); }
}

.menu-subtitle {
  font-size: 12px; letter-spacing: 10px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 64px;
}

.menu-cards-preview {
  display: flex; gap: -10px; margin-bottom: 56px;
  animation: float 4s ease-in-out infinite;
}
.preview-card {
  width: 52px; height: 74px;
  background: white; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  margin-left: -14px; transition: transform 0.3s ease;
}
.preview-card:first-child { margin-left: 0; }
.preview-card.red { color: #e63946; transform: rotate(-6deg); }
.preview-card.black { color: #1a1a2e; transform: rotate(-2deg); }
.preview-card:nth-child(2) { transform: rotate(1deg); }
.preview-card:nth-child(3) { transform: rotate(5deg); }
.preview-card:nth-child(4) { transform: rotate(10deg); }
.menu-cards-preview:hover .preview-card { transform: rotate(0) translateY(-8px) !important; }

.menu-buttons {
  display: flex; flex-direction: column;
  gap: 14px; width: 300px;
}

.menu-info {
  position: absolute; bottom: 48px;
  left: 50%; transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 32px);
  font-size: 12px; color: rgba(255,255,255,0.45);
  text-align: center; letter-spacing: 0.4px;
  line-height: 1.5;
}
.menu-info b { color: var(--color-gold); font-weight: 600; }

.menu-version {
  position: absolute; bottom: 24px;
  font-size: 11px; color: rgba(255,255,255,0.2);
  letter-spacing: 2px;
}

/* ============================================================
   SETUP SCREEN
   ============================================================ */
#screen-setup {
  background: var(--bg-primary);
  gap: 0;
}

.setup-header {
  text-align: center; margin-bottom: 48px;
}
.setup-title {
  font-family: 'Cinzel', serif;
  font-size: 32px; color: var(--color-gold);
  margin-bottom: 8px;
}
.setup-desc { font-size: 14px; color: rgba(255,255,255,0.4); }

.difficulty-grid {
  display: flex; gap: 20px; margin-bottom: 48px;
}

.difficulty-card {
  width: 190px; padding: 28px 20px;
  background: var(--color-glass);
  border: 2px solid var(--color-glass-b);
  border-radius: 18px; cursor: pointer;
  transition: all var(--tr-norm);
  text-align: center; backdrop-filter: blur(8px);
}
.difficulty-card:hover {
  border-color: var(--color-teal);
  background: rgba(0,198,224,0.08);
  transform: translateY(-5px); box-shadow: var(--glow-teal);
}
.difficulty-card.selected {
  border-color: var(--color-teal);
  background: rgba(0,198,224,0.12);
  box-shadow: var(--glow-teal);
}
.diff-icon { font-size: 48px; margin-bottom: 14px; line-height: 1; }
.diff-name { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.diff-desc { font-size: 12px; color: rgba(255,255,255,0.45); line-height: 1.5; }

.setup-actions { display: flex; gap: 14px; }

/* ============================================================
   GAME SCREEN
   ============================================================ */
#screen-game { padding: 0; overflow: hidden; }

.game-layout {
  display: grid;
  grid-template-columns: 210px 1fr;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

/* ---- Score Sidebar ---- */
.score-sidebar {
  background: rgba(4,7,18,0.85);
  border-right: 1px solid rgba(255,255,255,0.07);
  padding: 20px 14px;
  display: flex; flex-direction: column; gap: 16px;
  backdrop-filter: blur(12px);
  overflow-y: auto; overflow-x: hidden;
  z-index: 10;
}
.score-sidebar::-webkit-scrollbar { width: 3px; }
.score-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.sidebar-logo {
  font-family: 'Cinzel', serif;
  font-size: 26px; font-weight: 900;
  text-align: center; letter-spacing: 6px;
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-l));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sidebar-divider {
  height: 1px; background: rgba(255,255,255,0.07); margin: 0 -4px;
}

/* Trump box */
.trump-box {
  background: var(--color-glass);
  border: 1px solid var(--color-glass-b);
  border-radius: 12px; padding: 12px; text-align: center;
}
.trump-label {
  font-size: 10px; letter-spacing: 3px;
  text-transform: uppercase; color: rgba(255,255,255,0.35);
  margin-bottom: 6px;
}
.trump-symbol { font-size: 42px; line-height: 1; display: block; }
.trump-name {
  font-size: 13px; font-weight: 600; margin-top: 4px;
  color: rgba(255,255,255,0.7);
}
.trump-box.red-suit .trump-symbol { filter: drop-shadow(0 0 8px #e63946aa); }
.trump-box.black-suit .trump-symbol { filter: drop-shadow(0 0 8px #90caf9aa); }
.trump-box { cursor: pointer; }

/* Koz baloncuğu: koz kutusuna dokununca çıkar, kısa süre sonra kaybolur */
#trump-tip {
  position: fixed;
  z-index: 6000;
  background: rgba(8,12,24,0.97);
  border: 1px solid rgba(212,175,55,0.6);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
#trump-tip.show { opacity: 1; transform: translateY(0); }
#trump-tip .tip-red { color: #ff6b74; }
#trump-tip .tip-black { color: #9fc6ff; }

/* Bid info box */
.bid-info-box {
  background: var(--color-glass);
  border: 1px solid var(--color-glass-b);
  border-radius: 12px; padding: 10px 12px;
  font-size: 12px; color: rgba(255,255,255,0.5);
  line-height: 1.6;
}
.bid-info-box .bid-val { font-size: 18px; font-weight: 700; color: var(--color-gold); }

/* Score items */
.score-list { display: flex; flex-direction: column; gap: 8px; }

.score-item {
  background: var(--color-glass);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 11px; padding: 10px 12px;
  transition: all var(--tr-norm);
}
.score-item.is-active  { border-color: var(--color-teal); background: rgba(0,198,224,0.08); }
.score-item.is-bidder  { border-color: var(--color-gold); background: rgba(212,175,55,0.08); }
.score-item.went-batak { border-color: var(--color-red);  background: rgba(230,57,70,0.08); }

.si-header { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.si-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.si-name { font-size: 13px; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-total { font-size: 17px; font-weight: 800; color: var(--color-gold); }

.si-details { display: flex; gap: 10px; font-size: 11px; color: rgba(255,255,255,0.4); flex-wrap: wrap; }
.si-bid   { color: rgba(212,175,55,0.8); }
.si-trick { color: rgba(0,198,224,0.8); }

/* Round info */
.round-info {
  text-align: center; font-size: 11px;
  color: rgba(255,255,255,0.25); letter-spacing: 2px;
  text-transform: uppercase;
}

/* ---- Game Table ---- */
.game-table {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 50%, #1f4a1f 0%, #153015 45%, #0b1e0b 100%);
}

/* Felt texture overlay */
.game-table::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(0,0,0,0.025) 0px, rgba(0,0,0,0.025) 1px,
      transparent 1px, transparent 7px
    );
  pointer-events: none; z-index: 0;
}

/* Table border/rim */
.table-rim {
  position: absolute; inset: 0;
  border: 14px solid transparent;
  border-radius: 0;
  box-shadow: inset 0 0 0 14px rgba(74,44,10,0.6), inset 0 0 40px rgba(0,0,0,0.5);
  pointer-events: none; z-index: 1;
}

/* ---- Player Areas ---- */
.player-area {
  position: absolute; z-index: 5;
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
}

/* South (Human) – bottom center */
.player-area.south {
  bottom: 14px; left: 50%; transform: translateX(-50%);
  flex-direction: column-reverse;
}

/* North (Bot) – top center */
.player-area.north {
  top: 14px; left: 50%; transform: translateX(-50%);
}

/* West (Bot) – left center */
.player-area.west {
  left: 14px; top: 50%; transform: translateY(-50%);
  flex-direction: row;
}

/* East (Bot) – right center */
.player-area.east {
  right: 14px; top: 50%; transform: translateY(-50%);
  flex-direction: row-reverse;
}

/* Player info badge */
.player-badge {
  background: rgba(4,7,18,0.8);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px; padding: 5px 12px;
  display: flex; align-items: center; gap: 7px;
  backdrop-filter: blur(8px);
  white-space: nowrap; font-size: 12px;
  transition: all var(--tr-norm);
}
.player-badge.active {
  border-color: var(--color-teal);
  box-shadow: 0 0 14px rgba(0,198,224,0.45);
}
.player-badge.is-bidder {
  border-color: var(--color-gold);
  box-shadow: 0 0 14px rgba(212,175,55,0.45);
}
.pb-name { font-weight: 600; }
.pb-bid  { font-size: 11px; padding: 2px 7px; border-radius: 8px; background: rgba(212,175,55,0.2); color: var(--color-gold); }
.pb-trick { font-size: 11px; padding: 2px 7px; border-radius: 8px; background: rgba(0,198,224,0.15); color: var(--color-teal); }
.pb-thinking {
  display: none; align-items: center; gap: 4px;
}
.pb-thinking.show { display: flex; }
.thinking-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-teal);
  animation: dotPulse 0.9s ease-in-out infinite;
}
.thinking-dot:nth-child(2) { animation-delay: 0.2s; }
.thinking-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.7); }
  50%       { opacity: 1;   transform: scale(1); }
}

/* Cards container */
.player-cards {
  position: relative;
  display: block; /* cards are absolute within */
}

/* ---- TABLE CENTER (Played cards) ---- */
.table-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 340px; height: 280px; z-index: 4;
  display: grid;
  grid-template-areas:
    "north north north"
    "west  ctr   east"
    "south south south";
  grid-template-columns: 110px 90px 110px;
  grid-template-rows: 110px 20px 110px;
  gap: 4px;
}

.played-slot {
  display: flex; align-items: center; justify-content: center;
}
.played-slot.north { grid-area: north; align-items: flex-end; }
.played-slot.south { grid-area: south; align-items: flex-start; }
.played-slot.west  { grid-area: west;  justify-content: flex-end; }
.played-slot.east  { grid-area: east;  justify-content: flex-start; }

.played-slot .card {
  position: relative !important;
  left: 0 !important; top: 0 !important;
  animation: cardPlay 0.28s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes cardPlay {
  from { transform: scale(0.55) rotate(-5deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);     opacity: 1; }
}

/* Trick winner highlight */
.played-slot.trick-winner .card {
  box-shadow: var(--shadow-card), 0 0 22px rgba(45,198,83,0.75) !important;
  transform: scale(1.1) !important;
  transition: all 0.3s ease;
}

/* Floating +1 animation over player badge */
.floating-plus-one {
  position: absolute;
  top: -24px;
  right: 10px;
  background: var(--color-gold);
  color: #111827;
  font-weight: 900;
  font-size: 14px;
  padding: 3px 8px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.6);
  pointer-events: none;
  z-index: 300;
  animation: floatPlusOne 1.3s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

@keyframes floatPlusOne {
  0%   { opacity: 0; transform: translateY(10px) scale(0.6); }
  20%  { opacity: 1; transform: translateY(0) scale(1.15); }
  80%  { opacity: 1; transform: translateY(-20px) scale(1); }
  100% { opacity: 0; transform: translateY(-35px) scale(0.8); }
}

/* Shrink played card from hand smoothly */
.card.card-played-shrink {
  transition: all 0.3s ease !important;
  transform: translateY(-40px) scale(0.2) !important;
  opacity: 0 !important;
  pointer-events: none;
}

/* Trick gather animation towards winner */
.trick-gather-north { transition: all 0.5s cubic-bezier(0.4,0,0.2,1) !important; transform: translate(0, -220px) scale(0.4) !important; opacity: 0 !important; }
.trick-gather-south { transition: all 0.5s cubic-bezier(0.4,0,0.2,1) !important; transform: translate(0, 220px) scale(0.4) !important; opacity: 0 !important; }
.trick-gather-west  { transition: all 0.5s cubic-bezier(0.4,0,0.2,1) !important; transform: translate(-220px, 0) scale(0.4) !important; opacity: 0 !important; }
.trick-gather-east  { transition: all 0.5s cubic-bezier(0.4,0,0.2,1) !important; transform: translate(220px, 0) scale(0.4) !important; opacity: 0 !important; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  width: var(--card-w); height: var(--card-h);
  border-radius: var(--card-r);
  background: linear-gradient(155deg, #ffffff 0%, #f4f6f9 100%);
  border: 1.5px solid rgba(15, 23, 42, 0.28);
  position: absolute;
  box-shadow: 0 4px 12px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.4);
  display: flex; flex-direction: column;
  padding: 5px 6px;
  font-weight: 900;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease, top 0.25s ease;
}

/* Raised active cards matching the current led suit or fallback trump */
.card.raised-card {
  box-shadow: 0 10px 24px rgba(0, 198, 224, 0.45), 0 4px 12px rgba(0,0,0,0.75) !important;
  border: 2px solid #00e5ff !important;
  z-index: 80 !important;
}
.card.is-trump.raised-card {
  box-shadow: 0 10px 26px rgba(212, 175, 55, 0.55), 0 4px 12px rgba(0,0,0,0.75) !important;
  border: 2px solid #ffd700 !important;
}

.card.playable { cursor: pointer; }
.card.playable:hover {
  transform: translateY(-26px) scale(1.08) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.75), 0 0 20px rgba(0,198,224,0.65) !important;
  z-index: 200 !important;
}
/* Kartlar her zaman net görünür: soluklaştırma/bulanıklaştırma yok.
   Kural dışı karta dokunulursa kart sallanarak uyarır. */
@keyframes cardShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.card.shake { animation: cardShake 0.32s ease; }
#hand-0 .card { cursor: pointer; }

/* Face-up card contents */
.card-tl { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.card-br { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; transform: rotate(180deg); margin-top: auto; align-self: flex-end; }
.card-val { font-size: 16px; font-weight: 900; letter-spacing: -0.5px; }
.card-sym { font-size: 14px; }
.card-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 38px; opacity: 0.16; line-height: 1; pointer-events: none; }

.card.red  .card-val, .card.red  .card-sym, .card.red  .card-center { color: #d81128; }
.card.black .card-val, .card.black .card-sym, .card.black .card-center { color: #0c1220; }

/* Trump card highlight */
.card.is-trump::after {
  content: '';
  position: absolute; inset: -1px;
  border-radius: var(--card-r);
  border: 2px solid rgba(212,175,55,0.7);
  pointer-events: none;
  box-shadow: inset 0 0 8px rgba(212,175,55,0.2);
}

/* Face-down card */
.card.face-down {
  background: linear-gradient(135deg, #1a2c6e 0%, #0f1e4f 100%);
  cursor: default;
}
.card.face-down::before {
  content: '';
  position: absolute; inset: 5px;
  border-radius: calc(var(--card-r) - 2px);
  border: 1px solid rgba(255,255,255,0.12);
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px,
      transparent 1px, transparent 8px
    );
}
.card.face-down::after {
  content: '⚜';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: 28px; color: rgba(212,175,55,0.25);
  pointer-events: none;
}

/* Deal animation */
@keyframes dealIn {
  from { transform: translate(var(--deal-x, 0), var(--deal-y, -300px)) scale(0.3); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.card.dealing { animation: dealIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }

/* ============================================================
   MODAL SYSTEM
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--tr-norm);
}
.modal-overlay.visible { opacity: 1; pointer-events: all; }

/* Gameplay Interactive Modals (#modal-bid, #modal-trump, #modal-declare) do not block bottom hand view */
#modal-bid.modal-overlay, #modal-trump.modal-overlay, #modal-declare.modal-overlay {
  background: rgba(4, 8, 20, 0.35) !important;
  backdrop-filter: none !important;
  align-items: flex-start !important;
  padding-top: 3vh !important;
}
#modal-bid .modal, #modal-trump .modal, #modal-declare .modal {
  max-width: 580px;
  padding: 22px 28px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.9);
}

/* Mini Hand Preview inside modal */
.modal-hand-preview {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 14px;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
}
.preview-card {
  width: 38px;
  height: 54px;
  border-radius: 6px;
  background: linear-gradient(145deg, #ffffff, #eaeaea);
  border: 1.5px solid rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  line-height: 1.05;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
  user-select: none;
  transition: transform 0.2s ease;
}
.preview-card:hover {
  transform: translateY(-4px) scale(1.08);
}
.preview-card.red { color: #e63946; }
.preview-card.black { color: #1a1a2e; }
.preview-card .p-val { font-size: 13px; font-weight: 900; }
.preview-card .p-sym { font-size: 14px; }

.modal {
  background: linear-gradient(160deg, #0f1527, #1a2244);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px; padding: 36px;
  max-width: 480px; width: 92%;
  box-shadow: 0 24px 70px rgba(0,0,0,0.85);
  transform: scale(0.88) translateY(20px);
  transition: transform var(--tr-slow);
}
.modal-overlay.visible .modal { transform: scale(1) translateY(0); }

.modal-title {
  font-family: 'Cinzel', serif;
  font-size: 26px; color: var(--color-gold);
  text-align: center; margin-bottom: 6px; letter-spacing: 2px;
}
.modal-sub {
  font-size: 13px; color: rgba(255,255,255,0.4);
  text-align: center; margin-bottom: 28px;
}

/* ---- Bid Modal ---- */
.bid-grid {
  display: grid; grid-template-columns: repeat(5,1fr);
  gap: 8px; margin-bottom: 20px;
}
.bid-btn {
  aspect-ratio: 1;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 11px; color: white;
  font-size: 18px; font-weight: 700;
  cursor: pointer; transition: all var(--tr-fast);
  display: flex; align-items: center; justify-content: center;
}
.bid-btn:hover:not(:disabled) {
  border-color: var(--color-teal);
  background: rgba(0,198,224,0.12);
  color: var(--color-teal); transform: scale(1.08);
}
.bid-btn.selected {
  border-color: var(--color-gold);
  background: rgba(212,175,55,0.18);
  color: var(--color-gold);
  box-shadow: var(--glow-gold);
}
.bid-btn:disabled { opacity: 0.25; cursor: not-allowed; }

.bid-current-info {
  text-align: center; font-size: 13px;
  color: rgba(255,255,255,0.45); margin-bottom: 20px;
}
.bid-current-val { color: var(--color-gold); font-weight: 700; }
.bid-actions { display: flex; gap: 10px; }
.bid-actions .btn { flex: 1; }

/* ---- Trump Modal ---- */
.trump-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; margin-bottom: 20px;
}
.trump-btn {
  padding: 22px 16px;
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 16px; background: rgba(255,255,255,0.03);
  cursor: pointer; text-align: center;
  transition: all var(--tr-norm);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.trump-suit-icon { font-size: 46px; line-height: 1; }
.trump-suit-name { font-size: 15px; font-weight: 600; }

.trump-btn.spades:hover,   .trump-btn.clubs:hover   { border-color: #90caf9; background: rgba(144,202,249,0.08); transform: translateY(-3px); }
.trump-btn.hearts:hover, .trump-btn.diamonds:hover { border-color: #ef9a9a; background: rgba(239,154,154,0.08); transform: translateY(-3px); }

/* ---- Round Score Modal ---- */
.rs-bid-line {
  text-align: center; font-size: 14px; padding: 10px;
  background: var(--color-glass); border-radius: 10px;
  margin-bottom: 16px;
}
.rs-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; }
.rs-item {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--color-glass); border: 1px solid rgba(255,255,255,0.07);
}
.rs-item.batak { border-color: var(--color-red); background: rgba(230,57,70,0.09); }
.rs-item.made  { border-color: var(--color-gold); background: rgba(212,175,55,0.09); }
.rs-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.rs-info { flex: 1; }
.rs-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.rs-detail { font-size: 11px; color: rgba(255,255,255,0.4); }
.rs-score { font-size: 22px; font-weight: 800; }
.rs-score.pos { color: var(--color-green); }
.rs-score.neg { color: var(--color-red); }

.rs-totals {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 14px; margin-bottom: 20px;
}
.rs-total-row {
  display: flex; justify-content: space-between;
  padding: 5px 0; font-size: 13px;
}
.rs-total-name { color: rgba(255,255,255,0.5); }
.rs-total-val  { font-weight: 700; color: var(--color-gold); }

/* ---- Rules Modal ---- */
.rules-body {
  max-height: 55vh; overflow-y: auto;
  padding-right: 6px; font-size: 13px;
  color: rgba(255,255,255,0.65); line-height: 1.7;
}
.rules-body::-webkit-scrollbar { width: 3px; }
.rules-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.rules-body h3 { color: var(--color-gold); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin: 18px 0 8px; }
.rules-body ul { padding-left: 16px; margin-bottom: 8px; }
.rules-body li { margin-bottom: 4px; }
.rules-body .hl { color: var(--color-teal); font-weight: 600; }

/* ============================================================
   NOTIFICATION
   ============================================================ */
#notification {
  position: fixed; top: 22px; left: 50%;
  transform: translateX(-50%) translateY(-80px);
  background: rgba(8,12,24,0.95);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 11px 24px;
  font-size: 14px; font-weight: 600;
  z-index: 5000; white-space: nowrap;
  transition: transform 0.38s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: none;
}
#notification.show { transform: translateX(-50%) translateY(0); }
#notification.info    { border-color: var(--color-teal);  color: var(--color-teal); }
#notification.success { border-color: var(--color-green); color: var(--color-green); }
#notification.error   { border-color: var(--color-red);   color: var(--color-red); }
#notification.warning { border-color: var(--color-gold);  color: var(--color-gold); }

/* ============================================================
   GAME OVER SCREEN
   ============================================================ */
#screen-gameover {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212,175,55,0.15) 0%, transparent 55%),
    var(--bg-primary);
}

.go-content { text-align: center; }
.go-crown { font-size: 72px; display: block; margin-bottom: 16px; animation: float 2.5s ease-in-out infinite; }
.go-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(30px, 5vw, 52px);
  color: var(--color-gold); margin-bottom: 8px;
}
.go-sub { font-size: 16px; color: rgba(255,255,255,0.45); margin-bottom: 44px; }

.final-scores {
  display: flex; gap: 14px; justify-content: center; margin-bottom: 44px; flex-wrap: wrap;
}
.final-card {
  padding: 20px 22px; border-radius: 16px;
  background: var(--color-glass);
  border: 1px solid rgba(255,255,255,0.08);
  min-width: 110px; text-align: center;
  transition: all var(--tr-norm);
}
.final-card.winner {
  border-color: var(--color-gold);
  background: rgba(212,175,55,0.12);
  box-shadow: var(--glow-gold);
}
.final-rank   { font-size: 26px; margin-bottom: 8px; }
.final-pname  { font-size: 12px; color: rgba(255,255,255,0.5); margin-bottom: 6px; }
.final-pscore { font-size: 30px; font-weight: 800; }

.go-actions { display: flex; gap: 14px; justify-content: center; }

/* ============================================================
   GLOBAL ANIMATIONS
   ============================================================ */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-pulse { animation: pulse 1.4s ease-in-out infinite; }
.fade-in { animation: fadeIn 0.4s ease both; }

/* ============================================================
   CONFETTI
   ============================================================ */
.confetti {
  position: fixed; top: -10px; z-index: 9999;
  border-radius: 2px; pointer-events: none;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  to { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

/* ============================================================
   START / SETUP SCREEN & GÖMMELİ BATAK MODAL
   ============================================================ */
.setup-container {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 680px;
  width: 100%;
  margin: 0 auto 24px;
}
.setup-group-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
}
.mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.mode-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(15, 23, 42, 0.7);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
  color: white;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}
.mode-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(212,175,55,0.5);
  transform: translateY(-2px);
}
.mode-card.selected {
  background: rgba(212, 175, 55, 0.15);
  border: 2px solid var(--gold);
  box-shadow: 0 0 20px rgba(212,175,55,0.25);
}
.mode-icon {
  font-size: 32px;
  line-height: 1;
}
.mode-name {
  font-size: 16px;
  font-weight: 800;
  color: white;
  margin-bottom: 4px;
}
.mode-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  line-height: 1.35;
}

.rounds-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.round-btn {
  flex: 1;
  min-width: 80px;
  padding: 12px 10px;
  background: rgba(15, 23, 42, 0.7);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  color: white;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.round-btn:hover {
  border-color: rgba(212,175,55,0.5);
}
.round-btn.selected {
  background: rgba(212, 175, 55, 0.2);
  border: 2px solid var(--gold);
  color: var(--gold);
  box-shadow: 0 0 15px rgba(212,175,55,0.25);
}

/* Bury Cards Modal Grid */
.bury-counter {
  text-align: center;
  font-weight: 800;
  font-size: 15px;
  color: var(--teal);
  margin: 10px 0 14px;
}
.bury-cards-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-height: 380px;
  overflow-y: auto;
  padding: 8px;
}
.bury-card-item {
  position: relative;
  cursor: pointer;
  border-radius: var(--card-r);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bury-card-item:hover {
  transform: translateY(-4px) scale(1.05);
}
.bury-card-item.selected {
  transform: translateY(-8px) scale(1.08);
  box-shadow: 0 0 20px rgba(230,25,25,0.8);
}
.bury-card-item.selected::after {
  content: 'GÖM ↓';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #d81128;
  color: white;
  font-size: 11px;
  font-weight: 900;
  padding: 3px 6px;
  border-radius: 6px;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

/* ============================================================
   CARDS — IMPROVEMENTS
   ============================================================ */

/* Increased base card size and contrast */
:root {
  --card-w: 80px;
  --card-h: 112px;
}

/* Card value and suit — scale with card size so text stays readable on all screens */
.card-val { font-size: calc(var(--card-w) * 0.235); font-weight: 900; letter-spacing: -0.5px; }
.card-sym { font-size: calc(var(--card-w) * 0.205); }
.card-center { font-size: calc(var(--card-w) * 0.55); opacity: 0.2; }

/* Stronger card shadow for better visibility on green table */
.card {
  box-shadow: 0 6px 18px rgba(0,0,0,0.75), 0 2px 4px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  border: 1.5px solid rgba(0,0,0,0.2) !important;
}

/* Trump (Spades) cards — blue glow */
.card.is-trump::before {
  content: '';
  position: absolute; inset: -2px;
  border-radius: calc(var(--card-r) + 1px);
  background: linear-gradient(135deg, rgba(90,150,255,0.6), rgba(60,100,220,0.4));
  z-index: -1;
  pointer-events: none;
}

/* Best card — gold glow, lifted highest */
.card.best-card {
  box-shadow:
    0 0 0 3px #ffd700,
    0 0 28px rgba(255,215,0,0.9),
    0 16px 36px rgba(0,0,0,0.8) !important;
  border: 2.5px solid #ffd700 !important;
  z-index: 150 !important;
}
.card.best-card::after {
  content: 'TAVSİYE';
  position: absolute;
  top: -24px; left: 50%;
  transform: translateX(-50%);
  background: #ffd700;
  color: #1a1200;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
  letter-spacing: 1px;
  z-index: 200;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
  animation: bestPulse 1s ease-in-out infinite alternate;
}
@keyframes bestPulse {
  from { box-shadow: 0 2px 8px rgba(0,0,0,0.6); }
  to   { box-shadow: 0 2px 20px rgba(255,215,0,0.8); }
}

/* Playable card hover — bigger lift */
.card.playable:hover {
  transform: translateY(-34px) scale(1.1) !important;
  box-shadow: 0 24px 44px rgba(0,0,0,0.85), 0 0 28px rgba(0,198,224,0.8) !important;
}

/* Played card animation */
.played-card-anim {
  animation: cardPlayIn 0.32s cubic-bezier(0.34,1.56,0.64,1) both !important;
}
@keyframes cardPlayIn {
  from { transform: scale(0.5) rotate(-8deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);   opacity: 1; }
}

/* ============================================================
   DECLARATIONS PANEL
   ============================================================ */
.declarations-panel {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.decl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
}
.decl-emoji { font-size: 14px; }
.decl-name  { flex: 1; font-weight: 500; color: rgba(255,255,255,0.7); }
.decl-val   { font-size: 15px; font-weight: 800; }

/* ============================================================
   BURIED STACK — On Table Visual
   ============================================================ */
.buried-stack {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 6;
  pointer-events: none;
}

.buried-stack-card {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: var(--card-r);
  background: linear-gradient(135deg, #1a2c6e 0%, #0f1e4f 100%);
  border: 2px solid rgba(212,175,55,0.5);
  box-shadow: 0 6px 24px rgba(0,0,0,0.8), 0 0 20px rgba(212,175,55,0.3);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: buriedFloat 2.5s ease-in-out infinite;
}
.buried-stack-card::before {
  content: '';
  position: absolute; inset: 5px;
  border-radius: calc(var(--card-r) - 2px);
  border: 1px solid rgba(255,255,255,0.1);
  background: repeating-linear-gradient(45deg,
    rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px,
    transparent 1px, transparent 8px
  );
}
@keyframes buriedFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%       { transform: translateY(-6px) rotate(2deg); }
}

.buried-stack-badge {
  background: linear-gradient(135deg, var(--color-gold), #b8941c);
  color: #1a1200;
  font-size: 18px;
  font-weight: 900;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(212,175,55,0.6);
  z-index: 1;
}

.buried-stack-label {
  font-size: 11px;
  color: rgba(212,175,55,0.7);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
}

/* ============================================================
   BURIED CARDS REVEAL MODAL
   ============================================================ */
.buried-reveal-modal {
  text-align: center;
}

.buried-reveal-cards {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 20px 0;
  flex-wrap: wrap;
}

.reveal-card-wrapper {
  animation: revealCard 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}

@keyframes revealCard {
  from {
    transform: rotateY(90deg) scale(0.6);
    opacity: 0;
  }
  to {
    transform: rotateY(0deg) scale(1);
    opacity: 1;
  }
}

.reveal-card-wrapper .card {
  position: relative !important;
  left: 0 !important; top: 0 !important;
}

/* ============================================================
   DECLARE MODAL
   ============================================================ */
#modal-declare.modal-overlay {
  background: rgba(4, 8, 20, 0.5);
  backdrop-filter: blur(4px);
  align-items: flex-start;
  padding-top: 2vh;
}
#modal-declare .modal {
  padding: 26px 32px;
}

#declare-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

.other-declarations {
  margin-bottom: 14px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.3);
  border-radius: 10px;
  font-size: 12px;
}
.decl-others-label {
  color: rgba(255,255,255,0.4);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.decl-other-item {
  color: rgba(0,198,224,0.8);
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 2px;
}

/* ============================================================
   4-MODE SETUP SCREEN
   ============================================================ */
.mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mode-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(15, 23, 42, 0.7);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 16px;
  color: white;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}
.mode-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(212,175,55,0.5);
  transform: translateY(-2px);
}
.mode-card.selected {
  background: rgba(212,175,55,0.15);
  border: 2px solid var(--color-gold);
  box-shadow: 0 0 24px rgba(212,175,55,0.3);
}
.mode-icon { font-size: 30px; line-height: 1; flex-shrink: 0; }
.mode-name { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.mode-desc { font-size: 11px; color: rgba(255,255,255,0.6); line-height: 1.4; }

.setup-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 700px;
  width: 100%;
  margin: 0 auto 24px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 0 4px;
}
.setup-container::-webkit-scrollbar { width: 3px; }
.setup-container::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.setup-group-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.rounds-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.round-btn {
  flex: 1;
  min-width: 70px;
  padding: 12px 10px;
  background: rgba(15, 23, 42, 0.7);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  color: white;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.round-btn:hover { border-color: rgba(212,175,55,0.5); }
.round-btn.selected {
  background: rgba(212,175,55,0.2);
  border: 2px solid var(--color-gold);
  color: var(--color-gold);
  box-shadow: 0 0 15px rgba(212,175,55,0.3);
}

/* ============================================================
   CATEGORY & HELP BUTTON STYLES
   ============================================================ */
.group-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.group-header-row .setup-group-title {
  margin-bottom: 0;
}

.btn-info-popup {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.2);
  border: 1.5px solid var(--color-gold);
  color: var(--color-gold);
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-info-popup:hover {
  background: var(--color-gold);
  color: #1a1200;
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(212,175,55,0.6);
}

.mode-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.btn-mode-help {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-mode-help:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #1a1200;
}

.mode-grid-3 {
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 768px) {
  .mode-grid-3 {
    grid-template-columns: 1fr !important;
  }
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar-help-btn {
  width: 28px;
  height: 28px;
  font-size: 15px;
}

/* Trump select buttons */
.trump-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}
.trump-btn {
  padding: 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.15);
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.trump-btn span {
  font-size: 26px;
}
.trump-btn.black { color: #ffffff; }
.trump-btn.red { color: #e63946; }
.trump-btn:hover {
  background: rgba(212,175,55,0.2);
  border-color: var(--color-gold);
  transform: translateY(-2px);
}

/* Rules content list inside popup */
.rules-body h3 {
  color: var(--color-gold);
  font-size: 16px;
  margin: 16px 0 8px;
}
.rules-body p, .rules-body ul {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.8);
}
.rules-body ul {
  margin-left: 20px;
  margin-bottom: 12px;
}
.rules-body li {
  margin-bottom: 6px;
}

/* ============================================================
   ONLINE LOBİ
   ============================================================ */
#screen-online { overflow-y: auto; padding: 20px 14px; }

.online-container {
  display: flex; flex-direction: column; gap: 18px;
  width: min(430px, 94vw);
  margin-bottom: 20px;
}
.online-panel {
  background: var(--color-glass);
  border: 1px solid var(--color-glass-b);
  border-radius: 18px;
  padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
}
.online-label {
  font-size: 11px; letter-spacing: 2px;
  color: rgba(255,255,255,0.4); text-transform: uppercase;
}
.online-input {
  background: rgba(0,0,0,0.35);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 12px 14px;
  color: #fff; font-size: 15px; font-weight: 600;
  font-family: inherit;
  outline: none; width: 100%;
  user-select: text; -webkit-user-select: text;
}
.online-input:focus { border-color: var(--color-teal); }
.online-join-row { display: flex; gap: 10px; }
.online-join-row .online-input { flex: 1; letter-spacing: 5px; text-align: center; text-transform: uppercase; }
.online-divider {
  display: flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,0.25); font-size: 11px; white-space: nowrap;
}
.online-divider::before, .online-divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.1);
}
.online-status { font-size: 12px; color: var(--color-red); min-height: 16px; text-align: center; }
.room-code {
  font-family: 'Cinzel', serif;
  font-size: 38px; font-weight: 900;
  letter-spacing: 12px; text-align: center;
  color: var(--color-gold);
  text-shadow: 0 0 24px rgba(212,175,55,0.5);
}
.lobby-players { display: flex; flex-direction: column; gap: 8px; }
.lobby-player {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 9px 12px;
  font-size: 13px; font-weight: 600;
}
.lobby-player .lp-tag { margin-left: auto; font-size: 10px; color: var(--color-gold); letter-spacing: 1px; }
.lobby-player.empty { color: rgba(255,255,255,0.45); font-weight: 500; }
.lobby-settings { display: flex; gap: 8px; flex-wrap: wrap; }
.online-select {
  flex: 1; min-width: 120px;
  background: rgba(0,0,0,0.35);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  color: #fff; padding: 10px;
  font-size: 13px; font-weight: 600; font-family: inherit;
}
.online-select:disabled { opacity: 0.55; }
.online-hint { font-size: 11px; color: rgba(255,255,255,0.35); text-align: center; }

/* ============================================================
   DRAG & DROP (kart sürükleme)
   ============================================================ */
#hand-0 .card { touch-action: none; }

.card.drag-ghost {
  position: fixed !important;
  left: 0; top: 0;
  z-index: 4000;
  pointer-events: none;
  margin: 0;
  transform: rotate(4deg) scale(1.05);
  transition: none !important;
  animation: none !important;
  box-shadow: 0 18px 44px rgba(0,0,0,0.85), 0 0 26px rgba(0,198,224,0.55) !important;
}
.card.drag-source { opacity: 0.35; }

.table-center.drag-hint::after {
  content: '';
  position: absolute; inset: -14px;
  border: 2px dashed rgba(0,198,224,0.55);
  border-radius: 26px;
  background: rgba(0,198,224,0.06);
  pointer-events: none;
  animation: pulse 1.3s ease-in-out infinite;
}
.table-center.drag-armed::after {
  border-color: var(--color-gold);
  border-style: solid;
  background: rgba(212,175,55,0.12);
  animation: none;
}

/* Dokunmatik cihazlarda hover yok: oynanabilir kartlar hafif yukarıda dursun */
@media (hover: none) {
  #hand-0 .card.playable { top: -12px !important; }
}

/* ============================================================
   RESPONSIVE — TÜM CİHAZLAR
   ============================================================ */
.sidebar-footer { margin-top: auto; }
.sidebar-menu-btn { width: 100%; font-size: 12px; padding: 10px; }

/* -- Küçük laptop / büyük tablet -- */
@media (max-width: 1100px) {
  .game-layout { grid-template-columns: 180px 1fr; }
  :root { --card-w: 70px; --card-h: 98px; }
}

/* -- Dar ekranlar (dikey telefon): skor paneli üstte kompakt HUD olur -- */
@media (max-width: 700px) {
  .game-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .score-sidebar {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    padding-top: calc(6px + env(safe-area-inset-top));
    overflow-x: auto; overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .score-sidebar > * { flex-shrink: 0; }
  .sidebar-logo, .sidebar-divider, .declarations-panel { display: none; }
  .trump-box { display: flex; align-items: center; gap: 6px; padding: 4px 10px; }
  .trump-label, .trump-name { display: none; }
  .trump-symbol { font-size: 20px; }
  .score-list { flex-direction: row; gap: 6px; }
  .score-item { padding: 5px 8px; border-radius: 9px; }
  .si-header { margin-bottom: 0; gap: 5px; }
  .si-avatar { width: 20px; height: 20px; font-size: 11px; }
  .si-name { font-size: 11px; max-width: 52px; }
  .si-total { font-size: 13px; }
  .si-details { display: none; }
  .round-info { font-size: 10px; letter-spacing: 1px; }
  .sidebar-footer { margin-top: 0; }
  .sidebar-menu-btn { width: auto; font-size: 11px; padding: 7px 10px; white-space: nowrap; }

  :root { --card-w: 58px; --card-h: 81px; }

  .table-rim { box-shadow: inset 0 0 0 8px rgba(74,44,10,0.6), inset 0 0 28px rgba(0,0,0,0.5); }
  .player-area.south { bottom: calc(8px + env(safe-area-inset-bottom)); }
  .player-area.north { top: 8px; }
  .player-area.west { left: 6px; }
  .player-area.east { right: 6px; }
  .player-badge { font-size: 10px; padding: 4px 9px; gap: 5px; }
  .pb-bid, .pb-trick { font-size: 9px; padding: 1px 5px; }

  /* Dikeyde yan botların kart yelpazeleri masaya taşar: gizle, rozetler kalsın */
  .player-area.west .player-cards,
  .player-area.east .player-cards { display: none; }
  .player-area.north .player-cards {
    transform: scale(0.55);
    transform-origin: center top;
  }

  .table-center {
    width: min(300px, calc(100vw - 16px));
    height: min(250px, 38vh);
    grid-template-columns: 1fr 0.6fr 1fr;
    grid-template-rows: 1fr 0.12fr 1fr;
    gap: 2px;
  }
}

/* -- Yatay telefon (kısa ekran): ince sol panel, okunabilir kartlar -- */
@media (orientation: landscape) and (max-height: 540px) {
  .game-layout {
    grid-template-columns: 148px 1fr;
    grid-template-rows: 1fr;
  }
  .score-sidebar {
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    padding-left: calc(8px + env(safe-area-inset-left));
    overflow-y: auto; overflow-x: hidden;
    border-bottom: none;
    border-right: 1px solid rgba(255,255,255,0.07);
  }
  .score-sidebar > * { flex-shrink: 0; }
  .sidebar-logo { display: block; font-size: 15px; letter-spacing: 3px; }
  .sidebar-divider { display: block; }
  .declarations-panel { display: none; }
  .trump-box { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px; }
  .trump-label { display: none; }
  .trump-symbol { font-size: 22px; }
  .trump-name { display: block; font-size: 11px; margin-top: 0; }
  .score-list { flex-direction: column; gap: 5px; }
  .score-item { padding: 5px 8px; }
  .si-avatar { width: 20px; height: 20px; font-size: 11px; }
  .si-name { font-size: 11px; max-width: none; }
  .si-total { font-size: 13px; }
  .si-details { display: flex; font-size: 9px; gap: 6px; }
  .round-info { font-size: 9px; }
  .sidebar-footer { margin-top: auto; }
  .sidebar-menu-btn { width: 100%; font-size: 10px; padding: 6px; }

  :root { --card-w: 56px; --card-h: 78px; }

  .table-rim { box-shadow: inset 0 0 0 6px rgba(74,44,10,0.6), inset 0 0 22px rgba(0,0,0,0.5); }
  .player-area.south { bottom: calc(4px + env(safe-area-inset-bottom)); }
  .player-area.north { top: 4px; }
  .player-area.west { left: 4px; }
  .player-area.east { right: calc(4px + env(safe-area-inset-right)); }
  .player-badge { font-size: 10px; padding: 3px 8px; gap: 5px; }
  .pb-bid, .pb-trick { font-size: 9px; padding: 1px 5px; }

  .player-area.west .player-cards,
  .player-area.east .player-cards { display: block; transform: scale(0.5); }
  .player-area.west .player-cards  { transform-origin: left center; }
  .player-area.east .player-cards  { transform-origin: right center; }
  .player-area.north .player-cards { transform: scale(0.5); transform-origin: center top; }

  .table-center {
    width: min(300px, 42vw);
    height: min(210px, calc(100dvh - 185px));
    grid-template-columns: 1fr 0.6fr 1fr;
    grid-template-rows: 1fr 0.1fr 1fr;
    gap: 2px;
  }
}

/* -- Çok kısa yatay ekranlar -- */
@media (orientation: landscape) and (max-height: 400px) {
  :root { --card-w: 48px; --card-h: 67px; }
  .player-area.west .player-cards,
  .player-area.east .player-cards,
  .player-area.north .player-cards { transform: scale(0.42); }
}

/* -- Modallar: telefon ve kısa ekranlar -- */
@media (max-width: 700px), (max-height: 540px) {
  .modal {
    width: min(560px, calc(100vw - 20px));
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    padding: 18px 16px;
    border-radius: 16px;
  }
  #modal-bid .modal, #modal-trump .modal, #modal-declare .modal { padding: 14px; }
  #modal-bid.modal-overlay, #modal-trump.modal-overlay, #modal-declare.modal-overlay { padding-top: 1vh !important; }
  .modal-title { font-size: 18px; letter-spacing: 1px; }
  .modal-sub { font-size: 11px; margin-bottom: 12px; }
  .modal-hand-preview { gap: 4px; padding: 8px; margin-bottom: 10px; }
  .preview-card { width: 30px; height: 42px; }
  .preview-card .p-val { font-size: 11px; }
  .preview-card .p-sym { font-size: 11px; }
  .bid-grid { gap: 6px; margin-bottom: 12px; }
  .bid-btn { font-size: 15px; border-radius: 9px; }
  .trump-grid { gap: 8px; margin-top: 10px; }
  .trump-btn { padding: 10px; font-size: 15px; }
  .trump-btn span { font-size: 20px; }
  .bury-cards-grid { max-height: 38vh; }
  .rules-body { max-height: 55dvh; }
  .rs-item { padding: 8px 10px; }
  .btn { padding: 12px 18px; font-size: 14px; }
  #notification {
    max-width: calc(100vw - 24px);
    white-space: normal;
    text-align: center;
    font-size: 12px;
    padding: 9px 14px;
    top: calc(10px + env(safe-area-inset-top));
  }
}

/* -- Menü / kurulum / oyun sonu: telefon -- */
@media (max-width: 700px) {
  .menu-subtitle { letter-spacing: 4px; font-size: 11px; text-align: center; padding: 0 16px; margin-bottom: 40px; }
  .menu-buttons { width: min(300px, 86vw); }
  .menu-cards-preview { margin-bottom: 32px; }

  #screen-setup {
    justify-content: flex-start;
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
    overflow-y: auto;
  }
  .setup-header { margin-bottom: 16px; }
  .setup-title { font-size: 22px; }
  .setup-desc { font-size: 12px; }
  .setup-container { max-height: none; overflow-y: visible; }
  .mode-grid { grid-template-columns: 1fr; }
  .difficulty-grid { flex-direction: column; gap: 10px; margin-bottom: 0; }
  .difficulty-card { width: 100%; padding: 14px 16px; }
  .diff-icon { font-size: 28px; margin-bottom: 6px; }
  .setup-actions { width: 100%; margin-top: 16px; }
  .setup-actions .btn { flex: 1; }

  .go-crown { font-size: 52px; }
  .go-sub { margin-bottom: 24px; }
  .final-scores { gap: 8px; margin-bottom: 24px; }
}

/* -- Kısa ekranlarda menü ve kurulum sığsın -- */
@media (max-height: 540px) {
  .menu-cards-preview { display: none; }
  .menu-info { display: none; }
  .menu-subtitle { margin-bottom: 20px; }
  .menu-logo { font-size: clamp(40px, 8vh, 64px); margin-bottom: 4px; }
  .menu-buttons { flex-direction: row; width: auto; gap: 10px; }
  .menu-version { bottom: 8px; }

  #screen-setup {
    justify-content: flex-start;
    padding: 12px 16px;
    overflow-y: auto;
  }
  .setup-header { margin-bottom: 12px; }
  .setup-title { font-size: 20px; }
  .setup-container { max-height: none; overflow-y: visible; }
  .setup-actions { margin-top: 12px; }

  .go-crown { font-size: 40px; margin-bottom: 8px; }
  .go-sub { margin-bottom: 16px; }
  .final-scores { margin-bottom: 18px; }
}