/* 3'lü Mobil Kart Oyunu - Premium Design System */

:root {
  --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  /* Color Palette */
  --bg-dark: hsl(222, 47%, 11%);
  --bg-card: hsla(222, 47%, 16%, 0.85);
  --felt-green: radial-gradient(circle, hsl(145, 55%, 22%) 0%, hsl(145, 65%, 11%) 100%);
  --felt-border: hsl(45, 80%, 45%);
  --gold-glow: 0 0 15px hsla(45, 100%, 55%, 0.4);
  
  --color-red: hsl(354, 70%, 54%);
  --color-black: hsl(220, 40%, 15%);
  --color-gold: hsl(45, 100%, 50%);
  --color-gold-bright: #fbbf24;
  --color-accent: hsl(190, 100%, 50%);
  --color-text: hsl(0, 0%, 95%);
  --color-text-muted: hsl(220, 20%, 70%);

  /* RGB channel tokens (for rgba() alpha composition) */
  --gold-rgb: 251, 191, 36;
  --surface-rgb: 15, 23, 42;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Type scale */
  --text-2xs: 0.7rem;
  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;

  /* Interaction & typography utilities */
  --touch-target: 44px;
  --font-chalk: 'Caveat', 'Comic Sans MS', cursive;

  --border-radius-lg: 24px;
  --border-radius-md: 16px;
  --border-radius-sm: 8px;
  
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-premium: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Global keyboard focus treatment */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Custom Sleek Scrollbar System (Gelişmiş Premium Scrollbar) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* Subtle, neutral scrollbar app-wide (mobile-style) — no prominent gold bar. */
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

body {
  font-family: var(--font-family);
  background-color: hsl(222, 50%, 6%);
  color: var(--color-text);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Desktop Background */
.desktop-bg {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 10% 20%, hsl(222, 45%, 15%) 0%, hsl(222, 60%, 5%) 90%);
  position: relative;
}

.desktop-bg::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 15%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);
  opacity: 0.05;
  filter: blur(50px);
}

.desktop-bg::after {
  content: '';
  position: absolute;
  bottom: 10%;
  right: 15%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--color-gold) 0%, transparent 70%);
  opacity: 0.05;
  filter: blur(60px);
}

/* Desktop Ad Wings (triplegame.app) */
.desktop-ad-wing {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 160px;
  height: 600px;
  background: rgba(var(--surface-rgb), 0.6);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  z-index: 5;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.desktop-ad-wing.left {
  left: calc(50% - 340px - 180px);
}

.desktop-ad-wing.right {
  right: calc(50% - 340px - 180px);
}

.ad-wing-label {
  font-size: var(--text-2xs);
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 1.5px;
  font-weight: 700;
  text-transform: uppercase;
}

.ad-wing-content {
  text-align: center;
}

.ad-wing-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--color-gold);
}

.ad-wing-sub {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

@media (min-width: 1100px) {
  .desktop-ad-wing {
    display: flex;
  }
}

/* Mobile Frame Container */
.mobile-frame {
  width: 390px;
  height: 844px;
  background: hsl(222, 40%, 15%);
  border: 12px solid hsl(222, 20%, 30%);
  border-radius: 54px;
  box-shadow: 0 25px 60px -15px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.05) inset;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.screen {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: var(--bg-dark);
  display: flex;
  flex-direction: column;
}

/* Desktop Web Layout Adjustments (triplegame.app) */
@media (min-width: 601px) {
  .mobile-frame {
    width: 100%;
    max-width: 640px;
    height: 94vh;
    max-height: 940px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.85), 0 0 40px rgba(6, 182, 212, 0.08);
    background: hsl(222, 47%, 11%);
  }
  .table-container {
    padding-top: 85px;
    padding-bottom: 175px;
  }
  .card-table {
    width: 95%;
    max-width: 460px;
    max-height: 460px;
  }
  .avatar-circle {
    width: 50px;
    height: 50px;
    font-size: 0.9rem;
  }
  .player-info .name {
    font-size: 0.72rem;
  }
  .hand-container {
    bottom: 16px;
  }
  .player-hand {
    max-width: 440px;
    gap: 8px;
  }
  .card-unit {
    width: 62px;
    height: 90px;
    font-size: 1rem;
    padding: 6px;
  }
  .action-panel {
    bottom: 150px;
  }
  .log-overlay {
    bottom: 220px;
  }
}

/* Responsive controls remain visible on mobile */

@media (max-width: 600px) {
  body {
    background-color: var(--bg-dark);
  }
  .desktop-bg {
    background: none;
  }
  .mobile-frame {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    height: 100svh;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .table-container {
    padding-left: 6px;
    padding-right: 6px;
  }
  .card-table {
    width: 96%;
    max-width: 355px;
    max-height: 355px;
  }
  #fullscreen-btn {
    display: none !important;
  }
}

/* Common Overlay Panels */
.screen-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(var(--surface-rgb), 0.85);
  backdrop-filter: blur(20px);
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
  transition: var(--transition-smooth);
}

.hidden {
  opacity: 0;
  pointer-events: none;
  display: none !important;
}

/* BUTTONS */
.primary-btn {
  background: linear-gradient(135deg, var(--color-gold) 0%, #d97706 100%);
  color: hsl(220, 60%, 10%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 14px 28px;
  min-height: var(--touch-target);
  border-radius: var(--border-radius-md);
  font-family: var(--font-family);
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  width: 100%;
  max-width: 280px;
  box-shadow: 0 4px 18px rgba(var(--gold-rgb), 0.25);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(var(--gold-rgb), 0.45);
  filter: brightness(1.05);
}

.primary-btn:active {
  transform: translateY(1px) scale(0.97);
}

.secondary-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  padding: 12px 24px;
  min-height: var(--touch-target);
  border-radius: var(--border-radius-md);
  font-family: var(--font-family);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  max-width: 280px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.secondary-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

.secondary-btn:active {
  transform: translateY(1px) scale(0.97);
}

/* LOBBY STYLE */
.lobby-content {
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.logo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* GENEL PREMİUM AMBLEM / LOGO ÇERÇEVESİ */
/* Clean, transparent icon presentation — no gold frame, glow, or shimmer ray.
   The icon PNG carries its own rounded shape; we just float it, larger. */
.logo-crest-container {
  position: relative;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-logo-wrapper {
  width: 56px;
  height: 56px;
  /* Rounded soft glow behind the badge (calmer, static version of the splash
     treatment) so the icon reads as grounded, not a bare tile on the page. */
  border-radius: 22%;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), 0 0 30px rgba(var(--gold-rgb), 0.32), inset 0 0 10px rgba(var(--gold-rgb), 0.12);
}

.main-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.subtitle {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.rules-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--border-radius-lg);
  padding: 20px;
  width: 100%;
  max-width: 320px;
  text-align: left;
}

.rules-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-gold);
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
}

.rules-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rules-card li {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.game-badge {
  font-size: var(--text-2xs);
  font-weight: 800;
  color: var(--color-gold);
  background: rgba(var(--gold-rgb), 0.12);
  border: 1px solid rgba(var(--gold-rgb), 0.35);
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.rules-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.rules-section-title {
  color: var(--color-gold);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.rules-text {
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.rules-sub-section {
  border-left: 2px solid rgba(var(--gold-rgb), 0.5);
  padding-left: 10px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rules-card li strong {
  color: var(--color-text);
}

/* GAME SCREEN LAYOUT */
.screen-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: relative;
}

/* Header */
.game-header {
  height: calc(85px + env(safe-area-inset-top, 0px));
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: env(safe-area-inset-top, 0px) 20px 0 20px;
  background: rgba(var(--surface-rgb), 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.team-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 85px;
}

.team-label {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.team-a .team-label { color: var(--color-accent); }
.team-b .team-label { color: var(--color-red); }

.sets-stars {
  font-size: 0.85rem;
  color: var(--color-gold);
  letter-spacing: 2px;
  margin: 1px 0;
  text-shadow: 0 0 5px rgba(var(--gold-rgb), 0.5);
}

.tallies-chalk {
  display: flex;
  gap: 2px;
  margin-top: 3px;
  max-width: 85px;
  flex-wrap: wrap;
  justify-content: center;
}

.tally-group {
  font-family: monospace;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--color-gold);
  letter-spacing: 1px;
  background: rgba(var(--gold-rgb), 0.15);
  padding: 1px 4px;
  border-radius: 4px;
  border: 1px dashed rgba(var(--gold-rgb), 0.3);
  text-shadow: 0 0 4px var(--color-gold);
}

.tally-empty {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Zero çizik: same gold tally theme (via .tally-group), just dimmed so it reads
   as an empty count rather than a real tally while keeping the rows balanced. */
.tally-zero {
  opacity: 0.6;
  text-shadow: none;
}

.score-value {
  font-size: 1rem;
  font-weight: 800;
  white-space: nowrap;
}

.team-a .score-value {
  color: var(--color-accent);
}

.team-b .score-value {
  color: var(--color-red);
}

.koz-indicator-card {
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 70%, #0f172a 100%);
  border: 1.5px solid var(--color-gold);
  border-radius: var(--border-radius-sm);
  padding: 3px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
  box-shadow: inset 0 0 8px rgba(var(--gold-rgb), 0.2), 0 4px 10px rgba(0,0,0,0.5);
}

#koz-indicator {
  display: none !important;
}

/* Compact header control button styling */
.header-ctrl-btn {
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 70%, #0f172a 100%);
  border: 1.5px solid rgba(var(--gold-rgb), 0.4);
  border-radius: var(--border-radius-sm);
  padding: 3px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: white;
  cursor: pointer;
  min-width: 34px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  transition: all 0.2s ease;
}

.header-ctrl-btn:focus:not(:focus-visible) {
  outline: none;
}

.header-ctrl-btn:hover {
  border-color: var(--color-gold);
  transform: translateY(-1px);
}

.header-ctrl-btn:active {
  transform: translateY(1px);
}

.koz-label {
  font-size: var(--text-2xs);
  color: var(--color-gold);
  font-weight: 800;
  letter-spacing: 0.5px;
}

.koz-symbol-val {
  font-size: 1.15rem;
  font-weight: 900;
  white-space: nowrap;
}

.koz-symbol-val.red {
  color: #ef4444;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.koz-symbol-val.black {
  color: #38bdf8;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}

/* EL NO Mat Gümüş Değer Stili */
#hand-val {
  color: #cbd5e1 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  font-size: 0.9rem;
  font-weight: 800;
}

/* Sabit ve Yüzen Kontrol Butonları (Tam Ekran, Menü, Yardım) */
.floating-ctrl-btn, .floating-help-btn {
  position: absolute;
  background: rgba(var(--surface-rgb), 0.85);
  border: 1.5px solid var(--color-gold);
  color: var(--color-gold);
  border-radius: 50%;
  width: clamp(36px, 10vw, var(--touch-target));
  height: clamp(36px, 10vw, var(--touch-target));
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
  box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.3), 0 4px 10px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  transition: var(--transition-smooth);
}

.floating-ctrl-btn:focus:not(:focus-visible), .floating-help-btn:focus:not(:focus-visible) {
  outline: none;
}

.floating-ctrl-btn:hover, .floating-help-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 16px rgba(var(--gold-rgb), 0.5), 0 4px 14px rgba(0, 0, 0, 0.6);
}

.floating-ctrl-btn.ctrl-hidden, .floating-help-btn.ctrl-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8) translateY(12px);
}

.floating-ctrl-btn.pos-left-1 { bottom: calc(clamp(14px, 3.5vw, 18px) + env(safe-area-inset-bottom, 0px)); left: clamp(8px, 3vw, 18px); }
.floating-ctrl-btn.pos-left-2 { bottom: calc(clamp(14px, 3.5vw, 18px) + env(safe-area-inset-bottom, 0px)); left: clamp(58px, 16vw, 68px); }
.floating-ctrl-btn.pos-right-1, .floating-help-btn { bottom: calc(clamp(14px, 3.5vw, 18px) + env(safe-area-inset-bottom, 0px)); right: clamp(8px, 3vw, 18px); }

/* Table Area */
.table-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 10px 160px 10px; /* Alttaki kart alanı ve butonlar için boşluk */
}

.card-table {
  width: 100%;
  aspect-ratio: 1;
  background: var(--felt-green);
  border: 8px solid hsl(145, 65%, 6%);
  border-radius: 50%;
  position: relative;
  box-shadow: var(--shadow-premium), 0 0 30px rgba(0,0,0,0.6) inset;
}

/* Player Avatars positioning around the circular table */
.player-avatar {
  position: absolute;
  width: 95px;
  height: 85px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  z-index: 50 !important;
  transition: var(--transition-smooth);
}

.avatar-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: hsl(220, 30%, 20%);
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 800;
  color: white;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  position: relative;
  transition: var(--transition-smooth);
  overflow: visible;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.avatar-circle.team-a {
  background: linear-gradient(135deg, hsl(210, 70%, 25%) 0%, hsl(220, 85%, 15%) 100%);
  border-color: rgba(6, 182, 212, 0.6);
}

.avatar-circle.team-b {
  background: linear-gradient(135deg, hsl(0, 70%, 25%) 0%, hsl(355, 85%, 15%) 100%);
  border-color: rgba(239, 68, 68, 0.6);
}

.avatar-circle.team-a.human {
  border-color: var(--color-accent);
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.5);
}

.avatar-circle.team-a.usta {
  border-color: #38bdf8;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.55);
}

.avatar-circle.team-b.usta {
  border-color: #f87171;
  box-shadow: 0 0 15px rgba(248, 113, 113, 0.55);
}

/* AVATAR HALKA RÜTBE ROZETİ (Kenar halkası üzeri takım renkli gösterim) */
.avatar-ring-badge {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  z-index: 15;
  border: 1.5px solid #ffffff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.avatar-ring-badge.team-a {
  background: linear-gradient(135deg, #06b6d4 0%, #0284c7 100%);
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.7), 0 2px 5px rgba(0,0,0,0.6);
}

.avatar-ring-badge.team-b {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.7), 0 2px 5px rgba(0,0,0,0.6);
}

.avatar-ring-badge.usta-ring {
  transform: scale(1.15);
}

.avatar-ring-badge.usta-ring.team-a {
  border-color: #38bdf8;
  box-shadow: 0 0 14px rgba(56, 189, 248, 1), 0 0 6px rgba(56, 189, 248, 0.6), 0 2px 6px rgba(0,0,0,0.6);
}

.avatar-ring-badge.usta-ring.team-b {
  border-color: #f87171;
  box-shadow: 0 0 14px rgba(248, 113, 113, 1), 0 0 6px rgba(248, 113, 113, 0.6), 0 2px 6px rgba(0,0,0,0.6);
}

/* AVATAR DAĞITICI DESTE ROZETİ (Mini Card Back Design) */
.avatar-dealer-badge {
  position: absolute;
  bottom: -3px;
  left: -3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
  border: 1.5px solid #0f172a;
  color: #0f172a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  font-family: 'Outfit', sans-serif;
}

/* MASA SAHİBİ ROZETİ — 🪑 kendi ikonunu taşır; 👑 masada yalnızca Usta demektir.
   Sol-üst köşe: rol rozeti (sağ-alt) ve dağıtıcı rozeti (sol-alt) ile çakışmaz. */
.avatar-host-badge {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1.5px solid var(--color-gold);
  font-size: 0.65rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 16;
  box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.45), 0 2px 5px rgba(0,0,0,0.6);
}

/* Usta Suggestion Bubble (Avatarı asla kapatmayan ve mobil ekranlardan taşmayan dış konumlandırma) */
.usta-suggestion-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #0f172a;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.5), 0 0 8px rgba(var(--gold-rgb), 0.4);
  white-space: normal;
  max-width: 170px;
  width: max-content;
  z-index: 99999 !important;
  border: 1.5px solid #ffffff;
  pointer-events: none;
  animation: floatBubbleCenter 2s infinite ease-in-out;
}

/* Sol taraftaki oyuncular (pos-4, pos-5): Balon sağa doğru açılsın, sol ekrandan taşmasın */
.pos-4 .usta-suggestion-bubble,
.pos-5 .usta-suggestion-bubble {
  left: 0;
  right: auto;
  transform: none;
  animation: floatBubbleLeft 2s infinite ease-in-out;
}

/* Sağ taraftaki oyuncular (pos-1, pos-2): Balon sola doğru açılsın, sağ ekrandan taşmasın */
.pos-1 .usta-suggestion-bubble,
.pos-2 .usta-suggestion-bubble {
  left: auto;
  right: 0;
  transform: none;
  animation: floatBubbleRight 2s infinite ease-in-out;
}

/* En üstteki oyuncu (pos-3) için öneri balonunu avatarın altına koyalım ki üstten taşmasın */
.pos-3 .usta-suggestion-bubble {
  bottom: auto;
  top: calc(100% + 8px);
}

@keyframes floatBubbleCenter {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}

@keyframes floatBubbleLeft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes floatBubbleRight {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Usta Tavsiye Rozeti (Standart Berrak Beyaz Kart Yüzeyi) */
.suggest-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 6px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  font-weight: 900;
  font-size: 0.85rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  margin: 0 3px;
  vertical-align: middle;
}

.suggest-card-badge.red {
  color: #dc2626;
  text-shadow: none;
}

.suggest-card-badge.black {
  color: #0f172a;
  text-shadow: none;
}

/* Suggested Card Glow */
.card-unit.suggested-card {
  border: 2px solid var(--color-gold) !important;
  box-shadow: 0 0 15px rgba(var(--gold-rgb), 0.8) !important;
  transform: translateY(-15px) scale(1.05) !important;
  animation: pulseSuggested 1.5s infinite ease-in-out;
}

@keyframes pulseSuggested {
  0%, 100% { box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.6); }
  50% { box-shadow: 0 0 20px rgba(var(--gold-rgb), 1); }
}

/* Moderator Select Dropdowns */
.moderator-select {
  width: 100%;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--border-radius-sm);
  color: white;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.moderator-select:focus:not(:focus-visible) {
  outline: none;
}

.moderator-select:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.3);
}

.player-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4px;
  background: rgba(var(--surface-rgb), 0.7);
  padding: 2px 6px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.05);
}

.player-info .name {
  font-size: var(--text-2xs);
  font-weight: 700;
  color: white;
  white-space: nowrap;
  max-width: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-info .role,
.role-tag {
  font-size: var(--text-2xs);
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.role-tag.team-a {
  background: rgba(6, 182, 212, 0.25);
  border: 1px solid rgba(6, 182, 212, 0.4);
  color: var(--color-accent);
}

.role-tag.team-b {
  background: rgba(239, 68, 68, 0.25);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: var(--color-red);
}

.role-tag.usta-badge {
  border-color: var(--color-gold);
  box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.3);
}

/* Active Turn Ring Glow (Premium Breathing Glow) */
.player-avatar.current-turn .avatar-circle {
  border-color: var(--color-gold) !important;
  box-shadow: 0 0 18px var(--color-gold), 0 0 12px var(--color-gold) inset !important;
  transform: scale(1.1);
  animation: pulse-border 2s infinite ease-in-out;
}

@keyframes pulse-border {
  0%, 100% {
    box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.6), 0 0 8px rgba(var(--gold-rgb), 0.4) inset;
    border-color: rgba(var(--gold-rgb), 0.7);
  }
  50% {
    box-shadow: 0 0 25px rgba(var(--gold-rgb), 1), 0 0 16px rgba(var(--gold-rgb), 0.85) inset;
    border-color: rgba(var(--gold-rgb), 1);
  }
}

/* Signal Bubble on Players */
.signal-bubble {
  position: absolute;
  top: -12px;
  right: -12px;
  background: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  animation: pop-bubble 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes pop-bubble {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

/* Circle Layout Positions */
.pos-0 { bottom: -20px; left: 50%; transform: translateX(-50%); } /* Siz */
.pos-1 { right: -10px; top: 70%; transform: translateY(-50%); } /* Ahmet B */
.pos-2 { right: -10px; top: 30%; transform: translateY(-50%); } /* Mehmet A */
.pos-3 { top: -25px; left: 50%; transform: translateX(-50%); } /* Can B */
.pos-4 { left: -10px; top: 30%; transform: translateY(-50%); } /* Usta Rıza */
.pos-5 { left: -10px; top: 70%; transform: translateY(-50%); } /* Usta Pala */

/* Table Center - Card play zones & Trump */
.table-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed rgba(255, 255, 255, 0.1);
}

/* Table center koz deck stack and card layout */
.koz-deck-wrapper {
  position: absolute;
  width: 70px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  pointer-events: none;
}

/* Spread/Stack offset effect for deck card backs */
.deck-card-back {
  position: absolute;
  width: 48px;
  height: 70px;
  border-radius: 6px;
  background-color: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
}

.deck-card-back::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  background-color: #0f172a; /* Slate core */
  background-image: 
    radial-gradient(rgba(var(--gold-rgb), 0.22) 15%, transparent 16%), /* Soft Gold/Amber subtle dots */
    radial-gradient(rgba(var(--gold-rgb), 0.22) 15%, transparent 16%);
  background-size: 4px 4px;
  background-position: 0 0, 2px 2px;
  border-radius: 3px;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
}

.deck-card-back.back-3 {
  transform: translate(-10px, 4px) rotate(-25deg);
  z-index: 1;
}

.deck-card-back.back-2 {
  transform: translate(-5px, 2px) rotate(-15deg);
  z-index: 2;
}

.deck-card-back.back-1 {
  transform: translate(0px, 0px) rotate(-5deg);
  z-index: 3;
}

.actual-koz-card.card-unit {
  position: absolute;
  width: 48px !important;
  height: 70px !important;
  padding: 3px 5px !important;
  border-radius: 6px !important;
  z-index: 4;
  transform: translate(8px, -2px) rotate(20deg);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
  cursor: default;
  pointer-events: none;
}

.actual-koz-card.card-unit .suit-small {
  font-size: var(--text-2xs) !important;
  line-height: 1 !important;
}

.actual-koz-card.card-unit .rank-big {
  font-size: 1.1rem !important;
  line-height: 1 !important;
  margin: auto 0 !important;
  text-align: center !important;
}

.actual-koz-card.card-unit .suit-big {
  font-size: 1rem !important;
  line-height: 1 !important;
  align-self: flex-end !important;
}

.koz-card-spot:not(.card-unit) {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(var(--surface-rgb), 0.95));
  border: 2px solid rgba(var(--gold-rgb), 0.7);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  color: white;
  font-size: 1.8rem;
  transition: all 0.3s ease;
  animation: badge-appear 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.koz-card-spot:not(.card-unit).red {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.8);
  box-shadow: 0 0 12px rgba(248, 113, 113, 0.3), 0 6px 20px rgba(0, 0, 0, 0.5);
}

.koz-card-spot:not(.card-unit).black {
  color: #93c5fd;
  border-color: rgba(147, 197, 253, 0.8);
  box-shadow: 0 0 12px rgba(147, 197, 253, 0.3), 0 6px 20px rgba(0, 0, 0, 0.5);
}

@keyframes card-appear {
  0% { transform: scale(0.5) rotate(-15deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes badge-appear {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}


.played-cards-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 25;
}

/* Card Element Styles (Yüksek Okunurluk ve Netlik Tasarımı) */
.card-unit {
  width: 58px;
  height: 84px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 10px;
  border: 1.5px solid #cbd5e1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 6px;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0,0,0,0.2);
  position: relative;
  cursor: pointer;
  transition: var(--transition-smooth);
  user-select: none;
}

.card-unit.red {
  color: #dc2626; /* Derin Net Kırmızı */
  text-shadow: none;
}

.card-unit.black {
  color: #0f172a; /* Derin Net Siyah */
  text-shadow: none;
}

.card-unit.gold-highlight {
  border: 2.5px solid #d97706;
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
  box-shadow: 0 0 16px rgba(217, 119, 6, 0.45), 0 6px 16px rgba(0,0,0,0.5);
}

.card-unit.ordered-highlight {
  border: 2.5px solid var(--color-gold) !important;
  box-shadow: 0 0 15px rgba(var(--gold-rgb), 0.7), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  animation: cardPulse 1.5s infinite alternate;
}

@keyframes cardPulse {
  0% { box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.5), 0 4px 12px rgba(0, 0, 0, 0.4); }
  100% { box-shadow: 0 0 20px rgba(var(--gold-rgb), 0.95), 0 4px 12px rgba(0, 0, 0, 0.4); }
}

/* Ustanın önerdiği kart kendi elinizde: yelpazeden yükselip hafifçe salınır.
   Öneridir — kart asla sizin yerinize oynanmaz, kararı siz verirsiniz. */
#player-hand .card-unit.ordered-highlight {
  animation: cardPulse 1.5s infinite alternate, suggestedLift 1.6s ease-in-out infinite;
  z-index: 20;
}

@keyframes suggestedLift {
  0%, 100% { transform: translateY(-10px); }
  50% { transform: translateY(-17px); }
}

/* Hover must still answer. The float animates `transform`, and an animation
   outranks the plain hover rule below it, so the suggested card — the one card
   you are being asked to click — would be the only one that ignored the cursor.
   Dropping suggestedLift for the hover state hands the transform back. */
#player-hand .card-unit.ordered-highlight:hover:not(.disabled) {
  animation: cardPulse 1.5s infinite alternate;
  transform: translateY(-17px);
}

.ordered-crown-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: linear-gradient(135deg, var(--color-gold-bright), #d97706);
  color: #0f172a;
  font-size: var(--text-2xs);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  z-index: 10;
  border: 1px solid #ffffff;
}

.card-unit .suit-small {
  font-size: 0.95rem;
  line-height: 1;
}

.card-unit .rank-big {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-unit .suit-big {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: 0.85rem;
  opacity: 0.9;
}

/* Pasif veya atılamaz kartlar */
.card-unit.disabled {
  background: #e2e8f0;
  opacity: 0.55;
  filter: grayscale(0.4);
  cursor: not-allowed;
  transform: translateY(0) !important;
}

/* Cards played in center */
.played-card {
  position: absolute;
  width: 60px;
  height: 86px;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1.8px solid #cbd5e1;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
  z-index: 10;
  pointer-events: auto;
  transition: var(--transition-smooth);
}

.played-card .suit-small {
  font-size: 1rem;
  line-height: 1;
}

.played-card .rank-big {
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.played-card .suit-big {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: 1rem;
  opacity: 0.9;
  display: block;
}

/* Dynamic offsets for played cards in center circle (clustered around draw pile) */
.played-card.p-0 { bottom: 62px; left: 50%; transform: translateX(-50%) rotate(0deg); }
.played-card.p-1 { right: 65px; top: 70%; transform: translateY(-50%) rotate(15deg); }
.played-card.p-2 { right: 65px; top: 30%; transform: translateY(-50%) rotate(30deg); }
.played-card.p-3 { top: 62px; left: 50%; transform: translateX(-50%) rotate(0deg); }
.played-card.p-4 { left: 65px; top: 30%; transform: translateY(-50%) rotate(-30deg); }
.played-card.p-5 { left: 65px; top: 70%; transform: translateY(-50%) rotate(-15deg); }

/* Banner / Toast notification */
.log-overlay {
  position: absolute;
  bottom: 240px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 340px;
  background: rgba(var(--surface-rgb), 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 30px;
  padding: 10px 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  color: var(--color-text);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  z-index: 8;
  animation: slide-up-fade 0.3s ease;
}

@keyframes slide-up-fade {
  0% { transform: translate(-50%, 10px); opacity: 0; }
  100% { transform: translate(-50%, 0); opacity: 1; }
}

/* Action Panel Buttons (Signaling/Reporting) */
.legacy-action-panel {
  position: absolute;
  bottom: 155px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 12px;
  z-index: 9;
}

.action-btn-circle {
  position: relative; /* anchor the remaining-uses badge */
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(30, 41, 59, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  color: white;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255,255,255,0.1);
}

.action-btn-circle:hover:not(:disabled) {
  background: rgba(30, 41, 59, 0.85);
  border-color: var(--color-gold);
  box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.45), 0 6px 18px rgba(0,0,0,0.5);
  transform: translateY(-2px) scale(1.06);
}

.action-btn-circle:active:not(:disabled) {
  transform: translateY(1px) scale(0.95);
}

.action-btn-circle.warning {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.35);
}

.action-btn-circle.warning:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.45), 0 6px 18px rgba(0,0,0,0.5);
}

.action-btn-circle.view-hand-btn {
  border-color: rgba(var(--gold-rgb), 0.35);
  background: rgba(var(--gold-rgb), 0.1);
}

.action-btn-circle.view-hand-btn:hover:not(:disabled) {
  border-color: var(--color-gold);
  background: rgba(var(--gold-rgb), 0.2);
}

.action-btn-circle.info {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.35);
}

.action-btn-circle.info:hover:not(:disabled) {
  background: rgba(59, 130, 246, 0.25);
  border-color: #3b82f6;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.45), 0 6px 18px rgba(0,0,0,0.5);
}

.action-btn-circle:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}

/* Hakkı bu el tükenmiş işaret/ihbar butonu: kayıp değil, harcanmış görünür —
   ikon okunur kalır ki oyuncu butonun hâlâ orada olduğunu görsün. */
.action-btn-circle.side-btn.is-spent {
  opacity: 0.45;
  filter: grayscale(0.75);
  border-style: dashed;
}

/* Teammate mini cards hover & ordered highlights */
.teammate-cards .mini-card.clickable-card {
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.teammate-cards .mini-card.clickable-card:hover {
  transform: scale(1.15) translateY(-3px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.teammate-cards .mini-card.ordered-highlight {
  border: 1.5px solid var(--color-gold) !important;
  box-shadow: 0 0 8px var(--color-gold) !important;
  transform: scale(1.1) translateY(-2px);
  animation: miniCardPulse 1.5s infinite alternate;
}

@keyframes miniCardPulse {
  0% { box-shadow: 0 0 4px var(--color-gold); }
  100% { box-shadow: 0 0 12px var(--color-gold); }
}

/* Cards Hand Container */
.hand-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(var(--surface-rgb), 0.95) 0%, rgba(var(--surface-rgb), 0.85) 60%, rgba(var(--surface-rgb), 0) 100%);
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom)) 16px;
  z-index: 30;
  display: flex;
  flex-direction: column; /* Vertical alignment: chat panel on top, cards below */
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.hand-label {
  font-size: var(--text-2xs);
  font-weight: 800;
  color: var(--color-text-muted);
  letter-spacing: 2px;
}

.hand-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative; /* Lock absolute children relative to the full viewport width */
}

/* Stabilizer Hand Wrapper: Prevent card/button wiggles during re-renders */
.hand-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.player-hand {
  display: flex;
  justify-content: center;
  gap: 8px;
  min-height: 80px;
}

/* Center-aligned action buttons row above the player-hand */
.hand-actions-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-bottom: 4px;
  z-index: 35;
}

/* --- El Aşağı --- */

/* The declare button gets its own centered row directly ABOVE .hand-actions-row
   rather than a slot inside it: a text pill next to three 46px circles overflows
   the row on narrow phones, and the row must never wrap over the cards. Both
   rows live inside #hand-container, which is centered and bottom-anchored, so
   this button can never reach the ⚙️ / ❓ floats pinned to the bottom corners. */
.el-asagi-row {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 8px;
  z-index: 35;
}

.el-asagi-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 92%;
  padding: 8px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--color-gold);
  background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.28) 0%, rgba(var(--surface-rgb), 0.9) 100%);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 16px rgba(var(--gold-rgb), 0.35), 0 6px 18px rgba(0, 0, 0, 0.45);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  animation: elAsagiPulse 1.9s ease-in-out infinite;
}

.el-asagi-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 24px rgba(var(--gold-rgb), 0.55), 0 8px 22px rgba(0, 0, 0, 0.5);
}

.el-asagi-btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.97);
}

.el-asagi-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  animation: none;
}

.el-asagi-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.el-asagi-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  min-width: 0;
}

.el-asagi-label {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--color-gold-bright);
  white-space: nowrap;
}

.el-asagi-sub {
  font-size: 0.62rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}

@keyframes elAsagiPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.3), 0 6px 18px rgba(0, 0, 0, 0.45); }
  50% { box-shadow: 0 0 26px rgba(var(--gold-rgb), 0.6), 0 6px 18px rgba(0, 0, 0, 0.45); }
}

/* Reveal banner while the hand is being shown face-up (gameState === 'EL_ASAGI') */
.el-asagi-banner {
  position: absolute;
  /* Clears the score header above and the revealed hand fans below — during the
     reveal every seat's cards are face-up and none of them may be covered. The
     header height itself includes the notch inset, so the banner must too. */
  top: calc(clamp(96px, 25vw, 112px) + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  padding: 10px 16px;
  border-radius: 16px;
  border: 1.5px solid var(--color-gold);
  background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.22) 0%, rgba(var(--surface-rgb), 0.95) 100%);
  box-shadow: 0 0 22px rgba(var(--gold-rgb), 0.4), 0 8px 24px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 60;
  animation: slide-up-fade 0.35s ease;
}

.ea-banner-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--color-gold-bright);
}

.ea-banner-sub {
  font-size: 0.76rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

/* The declaring seat is the story of the moment — mark it while the hand is open */
.player-avatar.el-asagi-declarer .avatar-circle {
  border-color: var(--color-gold) !important;
  box-shadow: 0 0 18px var(--color-gold), 0 0 30px rgba(var(--gold-rgb), 0.45) !important;
  animation: elAsagiDeclarerGlow 1.4s ease-in-out infinite alternate;
}

@keyframes elAsagiDeclarerGlow {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
  .el-asagi-btn,
  .player-avatar.el-asagi-declarer .avatar-circle {
    animation: none;
  }
}

/* Glassmorphic/Gold Koz Indicator Button */
.action-btn-circle.koz-btn {
  background: rgba(30, 41, 59, 0.7);
  border: 1.5px solid rgba(var(--gold-rgb), 0.4);
  color: var(--color-gold);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  text-shadow: 0 0 5px rgba(var(--gold-rgb), 0.5);
  pointer-events: none; /* View-only indicator */
}

/* Cyan/Blue View Hand Button stacked above report */
.action-btn-circle.view-hand-btn {
  background: rgba(14, 116, 144, 0.6);
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  display: none; /* Managed dynamically via updateUI (only for Usta) */
  position: relative;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.action-btn-circle.view-hand-btn:active {
  transform: scale(0.92);
}

.view-hand-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--color-gold);
  color: #0f172a;
  border-radius: 6px;
  padding: 1px 5px;
  font-size: var(--text-2xs);
  font-weight: 900;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  line-height: 1.2;
}

/* Interactive card hover */
.player-hand .card-unit:hover:not(.disabled) {
  transform: translateY(-12px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.4);
}

/* MODALS */
.modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 15, 30, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-content {
  background: linear-gradient(145deg, rgba(23, 37, 84, 0.65) 0%, rgba(var(--surface-rgb), 0.85) 100%);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1.5px solid rgba(var(--gold-rgb), 0.45);
  border-radius: var(--border-radius-lg);
  width: 100%;
  max-width: 350px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 15px rgba(var(--gold-rgb), 0.15);
  animation: scale-up 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Modal scroll: silent, mobile-style — no persistent gold bar */
.rules-modal-body::-webkit-scrollbar,
.modal-content::-webkit-scrollbar {
  display: none;
}

@keyframes scale-up {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

#rules-modal .modal-content {
  width: 90%;
  max-width: 420px;
  height: 82%;
  max-height: 540px;
  padding: 16px 18px;
  background: rgba(var(--surface-rgb), 0.98);
  border: 1.5px solid var(--color-gold);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(var(--gold-rgb), 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

#rules-modal .rules-modal-body {
  flex: 1 1 auto;
  min-height: 0; /* KRİTİK FLEXBOX SCROLL DÜZELTMESİ */
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 0.82rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 8px;
  margin: 8px 0;
  box-sizing: border-box;
}

#rules-modal h4 {
  color: var(--color-gold);
  font-size: 1.15rem;
  margin-bottom: 0;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
  flex-shrink: 0;
}

#rules-modal .close-modal-btn {
  width: 100%;
  margin-top: 6px;
  flex-shrink: 0;
}

#rules-modal .rules-replay-tour-btn {
  width: 100%;
  margin-top: 10px;
  flex-shrink: 0;
  font-size: var(--text-sm);
}

.modal-content h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
}

.modal-desc {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.close-modal-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.85);
  padding: 12px 18px;
  min-height: var(--touch-target);
  border-radius: var(--border-radius-md);
  font-family: var(--font-family);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  transition: var(--transition-smooth);
}

.close-modal-btn:focus:not(:focus-visible) {
  outline: none;
}

.close-modal-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

/* Pixel-Perfect Modal Menu Buttons System.
   These once fought inline style="" attributes with !important; the inline
   styles were de-inlined into component classes, so plain specificity and
   cascade order are enough now. */
.modal-menu-btn {
  width: 100%;
  max-width: 100%;
  height: 46px;
  border-radius: 12px;
  padding: 0 16px;
  margin: 0;
  font-family: var(--font-family);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.modal-menu-btn:focus:not(:focus-visible) {
  outline: none;
}

.modal-menu-btn svg {
  flex-shrink: 0;
}

.modal-menu-btn.blue-btn {
  background: rgba(59, 130, 246, 0.18);
  border: 1.5px solid rgba(59, 130, 246, 0.5);
  color: #93c5fd;
}
.modal-menu-btn.blue-btn:hover {
  background: rgba(59, 130, 246, 0.3);
  border-color: rgba(59, 130, 246, 0.7);
  color: #ffffff;
}

.modal-menu-btn.gold-btn {
  background: rgba(var(--gold-rgb), 0.15);
  border: 1.5px solid var(--color-gold);
  color: var(--color-gold);
}
.modal-menu-btn.gold-btn:hover {
  background: rgba(var(--gold-rgb), 0.28);
  color: #ffffff;
}

.modal-menu-btn.danger-btn {
  background: rgba(239, 68, 68, 0.2);
  border: 1.5px solid rgba(239, 68, 68, 0.5);
  color: #fca5a5;
}
.modal-menu-btn.danger-btn:hover {
  background: rgba(239, 68, 68, 0.35);
  color: #ffffff;
}

.modal-menu-btn.primary-action-btn {
  background: linear-gradient(135deg, var(--color-gold) 0%, #d97706 100%);
  border: none;
  color: #0f172a;
  font-weight: 800;
  box-shadow: 0 4px 15px rgba(var(--gold-rgb), 0.3);
}
.modal-menu-btn.primary-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(var(--gold-rgb), 0.5);
}

/* Compact Hand History Accordion Rows */
.hand-row-item {
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.2s ease;
  margin-bottom: 6px;
}

.hand-row-header {
  height: 38px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  font-size: 0.82rem;
  transition: background 0.2s;
}

.hand-row-item.team-a-row .hand-row-header {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.35);
}

.hand-row-item.team-b-row .hand-row-header {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.hand-row-header:hover {
  filter: brightness(1.2);
}

.hand-row-detail {
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.35);
  border-top: none;
  border-radius: 0 0 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hand-row-item.team-a-row .hand-row-detail {
  border: 1px solid rgba(59, 130, 246, 0.35);
  border-top: none;
}

.hand-row-item.team-b-row .hand-row-detail {
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-top: none;
}

/* Signal Grid Choice */
.signal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 8px 0;
}

.signal-option {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--border-radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.signal-option:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-accent);
}

.signal-emoji {
  font-size: 1.8rem;
}

.signal-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
  margin-top: 4px;
}

.signal-meaning {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}

/* Report List Options */
.report-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0;
}

.report-option {
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: var(--border-radius-md);
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: var(--transition-smooth);
}

.report-option:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: var(--color-red);
}

.avatar-mini {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: hsl(220, 30%, 15%);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: white;
}

.report-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: white;
}

/* Summary Overlay Panel */
.summary-content {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-lg);
  padding: 32px 24px;
  width: 100%;
  max-width: 320px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: var(--shadow-premium);
}

.summary-table-container {
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--border-radius-md);
  padding: 12px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.4);
}

.summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  text-align: center;
}

.summary-table th {
  padding: 6px 8px;
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.summary-table th:first-child,
.summary-table td:first-child {
  text-align: left;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.summary-table td {
  padding: 8px 6px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
  font-weight: 700;
}

.summary-table tr.highlight-row td {
  font-size: 0.95rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.summary-table td.team-a-val {
  color: var(--color-accent);
}

.summary-table td.team-b-val {
  color: var(--color-red);
}

.summary-table tr.tally-row td {
  color: var(--color-gold);
  font-weight: 700;
}

/* Avatar Option Cards (Seçili ve Hover Stilleri) */
.avatar-option-card {
  position: relative;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.avatar-option-card:hover {
  transform: scale(1.08);
  border-color: rgba(255, 255, 255, 0.5);
}

.avatar-option-card.selected-avatar {
  border: 3.5px solid var(--color-gold);
  box-shadow: 0 0 18px rgba(var(--gold-rgb), 0.65), inset 0 0 10px rgba(var(--gold-rgb), 0.4);
  transform: scale(1.08);
}

.avatar-option-card.selected-avatar::after {
  content: '✓';
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--color-gold);
  color: #0f172a;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
  border: 1.5px solid #ffffff;
}

.summary-logs {
  max-height: 120px;
  overflow-y: auto;
  text-align: left;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  background: rgba(0,0,0,0.1);
  padding: 10px;
  border-radius: var(--border-radius-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Teammate Hands Display styles */
.teammate-cards {
  position: absolute;
  width: 100px;
  height: 55px;
  pointer-events: auto;
  z-index: 30;
  animation: pop-bubble 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Top partner (.pos-3) -> cards below avatar */
.pos-3 .teammate-cards {
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
}

/* Bottom right and bottom left players -> cards below avatar */
.pos-1 .teammate-cards,
.pos-5 .teammate-cards {
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
}

/* Top right and top left players -> cards above avatar */
.pos-2 .teammate-cards,
.pos-4 .teammate-cards {
  top: -65px;
  left: 50%;
  transform: translateX(-50%);
}

.mini-card {
  position: relative;
  width: 38px;
  height: 54px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0,0,0,0.5);
  user-select: none;
  pointer-events: none;
}

.teammate-cards .mini-card {
  pointer-events: auto !important;
  cursor: pointer;
}

.mini-suit-top {
  position: absolute;
  top: 3px;
  left: 4px;
  font-size: 0.8rem;
  line-height: 1;
  pointer-events: none;
}

.mini-rank-center {
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin-top: 5px;
  pointer-events: none;
}

.mini-card.red {
  color: #dc2626;
  text-shadow: none;
}

.mini-card.black {
  color: #0f172a;
  text-shadow: none;
}

.mini-card.gold-highlight {
  border: 2px solid #d97706;
  background: #fffbeb;
  box-shadow: 0 0 10px rgba(217, 119, 6, 0.4);
}

.mini-card.card-back {
  background-color: #1e293b; /* Soothing midnight blue/slate instead of high-contrast white */
  border: 1px solid rgba(255, 255, 255, 0.12); /* Very soft subtle border */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
  position: relative;
  box-sizing: border-box;
}

.mini-card.card-back::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  background-color: #0f172a; /* Slate core */
  background-image: 
    radial-gradient(rgba(var(--gold-rgb), 0.22) 15%, transparent 16%), /* Soft Gold/Amber subtle dots */
    radial-gradient(rgba(var(--gold-rgb), 0.22) 15%, transparent 16%);
  background-size: 4px 4px;
  background-position: 0 0, 2px 2px;
  border-radius: 3px;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
}

/* Table Moderator Panel Styling */
#lobby-screen.screen-overlay {
  justify-content: flex-start;
  overflow-y: auto;
  padding: 20px 24px calc(24px + env(safe-area-inset-bottom)) 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox: no persistent bar (mobile-style), still scrollable */
}
#lobby-screen.screen-overlay::-webkit-scrollbar { display: none; } /* WebKit/Blink */

.moderator-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--border-radius-lg);
  padding: 12px 14px;
  width: 100%;
  max-width: 380px;
  text-align: left;
  margin-top: 0;
  box-shadow: var(--shadow-premium);
}

/* Live Game Match Ad Banner (Oyun İçi Canlı Reklam) */
.game-ad-banner {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 360px;
  background: rgba(var(--surface-rgb), 0.7);
  backdrop-filter: blur(10px);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 4px 12px;
  text-align: center;
  z-index: 7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.game-ad-banner .ad-label {
  font-size: var(--text-2xs);
  color: rgba(255, 255, 255, 0.4);
  font-weight: 700;
  letter-spacing: 1px;
}

.game-ad-banner .ad-sub {
  font-size: var(--text-2xs);
  color: var(--color-gold);
  font-weight: 600;
}

.moderator-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 6px;
}

.moderator-desc {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

.moderator-teams {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}

.moderator-team h4 {
  font-size: 0.7rem;
  margin-bottom: 6px;
  font-weight: bold;
}

.team-a-title {
  color: var(--color-accent);
}

.team-b-title {
  color: var(--color-red);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
}

.form-group label {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
}

.form-group input {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-sm);
  padding: 5px 8px;
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: 0.82rem;
  transition: var(--transition-smooth);
  width: 100%;
}

.form-group input:focus:not(:focus-visible) {
  outline: none;
}

.form-group input:focus {
  border-color: var(--color-accent);
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.2);
}

/* Mode Buttons Active/Inactive styling */
.mode-btn:not(.active) {
  background: rgba(0, 0, 0, 0.3) !important;
  color: rgba(255, 255, 255, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}
.mode-btn.active {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  border-color: var(--color-gold) !important;
  box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.2);
}

/* Seat row styling */
.online-seat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 0.8rem;
  transition: var(--transition-smooth);
}
.online-seat-row.occupied {
  border-color: rgba(0, 229, 255, 0.2);
  background: rgba(0, 229, 255, 0.03);
}
.online-seat-row.current-user {
  border-color: var(--color-gold);
  background: rgba(var(--gold-rgb), 0.05);
}
.seat-badge {
  padding: 2px 6px;
  border-radius: 6px;
  font-size: var(--text-2xs);
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}
.seat-badge.team-a {
  background: rgba(0, 229, 255, 0.15);
  color: var(--color-accent);
  border: 1px solid rgba(0, 229, 255, 0.3);
}
.seat-badge.team-b {
  background: rgba(255, 78, 92, 0.15);
  color: var(--color-red);
  border: 1px solid rgba(255, 78, 92, 0.3);
}
.seat-name-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.seat-user-name {
  font-weight: 600;
  color: #fff;
}
.seat-status-sub {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}
.sit-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-accent);
  background: rgba(0, 229, 255, 0.1);
  color: var(--color-accent);
  font-weight: 600;
  font-family: var(--font-family);
  font-size: 0.7rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}
.sit-btn:hover {
  background: var(--color-accent);
  color: #000;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}

/* Short Mobile Viewport height adjustments */
@media (max-height: 740px) {
  .table-container {
    padding-top: 80px;
    padding-bottom: 140px;
  }
  .card-table {
    max-width: 325px;
    max-height: 325px;
  }
  .action-panel {
    bottom: 120px;
  }
}

/* Speech Bubble for ordering play confirmation */
.speech-bubble {
  position: absolute;
  bottom: 55px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.95) 0%, rgba(5, 150, 105, 0.95) 100%);
  color: white;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 800;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
  white-space: nowrap;
  z-index: 10;
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: floatBubble 2s infinite ease-in-out;
}

.speech-bubble.hidden {
  display: none;
}

/* Flying Card animation element (Zipped and glowing for high visibility) */
.flying-card-element {
  position: fixed;
  width: 60px; /* Slightly larger dimensions to be easily noticed */
  height: 86px;
  border-radius: 6px;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 15px rgba(0,0,0,0.6), 0 0 10px rgba(var(--gold-rgb), 0.4); /* Gold glow to pop out on green felt */
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.95rem;
  color: white;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease; /* Faster, punchier flick transition */
  transform-origin: center;
}

.flying-card-element.card-back {
  background-color: #1e293b !important; /* Soothing midnight blue/slate instead of high-contrast white */
  border: 1px solid rgba(255, 255, 255, 0.15) !important; /* Soft border */
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  position: fixed !important; /* Fixed positioning to prevent reflow wiggles */
  box-sizing: border-box;
}

.flying-card-element.card-back::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  background-color: #0f172a; /* Slate core */
  background-image: 
    radial-gradient(rgba(var(--gold-rgb), 0.22) 15%, transparent 16%), /* Soft Gold/Amber lattice */
    radial-gradient(rgba(var(--gold-rgb), 0.22) 15%, transparent 16%);
  background-size: 5px 5px;
  background-position: 0 0, 2.5px 2.5px;
  border-radius: 4px;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
}

/* Avatar circular turn countdown keyframe */
@keyframes timer-drain {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 232.5;
  }
}

.flying-card-element.red {
  color: var(--color-red) !important;
}

.flying-card-element.black {
  color: white !important;
}

/* OYUNA ÖZEL HAREKETLİ IŞILTILI SPLASH EKRANI STİLLERİ */
.game-splash-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0b101d;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.splash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
}

.splash-logo-wrapper {
  width: 135px;
  height: 135px;
  margin-bottom: 24px;
  /* Match the icon PNG's own rounded corners (~22%) so the pulsing box-shadow
     glow follows the badge shape instead of framing it in a hard square. */
  border-radius: 22%;
  animation: splashLogoPulse 2.5s infinite ease-in-out;
}

.splash-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes splashLogoPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 25px rgba(var(--gold-rgb), 0.4), inset 0 0 15px rgba(var(--gold-rgb), 0.3); }
  50% { transform: scale(1.05); box-shadow: 0 12px 35px rgba(0,0,0,0.9), 0 0 45px rgba(var(--gold-rgb), 0.75), inset 0 0 25px rgba(var(--gold-rgb), 0.5); }
}

.splash-title {
  font-size: 1.75rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--color-gold-bright) 0%, #f59e0b 50%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 2px;
  margin-bottom: 4px;
}

.splash-subtitle {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 1px;
  margin-bottom: 25px;
}

.splash-loader-bar {
  width: 140px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 25px;
}

.splash-loader-progress {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, var(--color-gold-bright));
  border-radius: 4px;
  animation: loadProgress 1.3s ease-in-out forwards;
}

@keyframes loadProgress {
  0% { width: 0%; }
  100% { width: 100%; }
}

.splash-footer {
  font-size: var(--text-2xs);
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* MODERN USTA SEÇİCİ STİLLERİ */
.modern-usta-picker {
  display: flex;
  gap: 6px;
  background: rgba(0, 0, 0, 0.3);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.usta-picker-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 4px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.75);
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.usta-picker-btn img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.usta-picker-btn.active {
  background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.25) 0%, rgba(217, 119, 6, 0.35) 100%);
  border: 1.5px solid var(--color-gold);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(var(--gold-rgb), 0.2);
}

/* SATIR İÇİ USTA SEÇİM BUTONU (KOMPAKT CROWN TOGGLE) STİLLERİ */
.usta-toggle-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.55);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.usta-toggle-btn:focus:not(:focus-visible) {
  outline: none;
}

.usta-toggle-btn:hover {
  border-color: rgba(var(--gold-rgb), 0.5);
  color: rgba(255, 255, 255, 0.9);
  background: rgba(var(--gold-rgb), 0.1);
}

.usta-toggle-btn.active {
  background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.35) 0%, rgba(217, 119, 6, 0.45) 100%);
  border: 1.5px solid var(--color-gold);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.4);
}

/* Glassmorphic Chat Panel Styles */
.game-chat-panel {
  position: relative;
  margin: 0 auto;
  bottom: auto;
  left: auto;
  transform: none;
  width: 100%;
  max-width: 440px;
  height: 34px;
  background: rgba(var(--surface-rgb), 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(var(--gold-rgb), 0.25);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  z-index: 10;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), 0 6px 16px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.game-chat-panel:hover {
  border-color: rgba(var(--gold-rgb), 0.45);
  background: rgba(var(--surface-rgb), 0.7);
}

.game-chat-panel.expanded {
  height: 95px;
  border-color: var(--color-gold);
  box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.25), 0 8px 20px rgba(0, 0, 0, 0.5);
}

.game-chat-panel .chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.7rem;
  line-height: 1.35;
  scroll-behavior: smooth;
  text-align: left;
}

/* Hide scrollbars when collapsed to prevent layout jumping */
.game-chat-panel:not(.expanded) .chat-messages {
  overflow-y: hidden;
}

.game-chat-panel .chat-messages::-webkit-scrollbar {
  width: 4px;
}
.game-chat-panel .chat-messages::-webkit-scrollbar-track {
  background: transparent;
}
.game-chat-panel .chat-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

.game-chat-panel .chat-row {
  display: block;
  word-break: break-word;
}

.game-chat-panel .chat-row.system {
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

.game-chat-panel .chat-row.signal {
  color: #38bdf8; /* Soft blue for signals */
}

.game-chat-panel .chat-row.advice {
  color: var(--color-gold-bright); /* Gold for Usta advice */
  font-weight: 700;
}

.game-chat-panel .chat-row.play {
  color: rgba(255, 255, 255, 0.8);
}

/* Chat badge for unread messages */
.chat-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  background-color: #ef4444;
  border: 1.5px solid rgba(var(--surface-rgb), 0.9);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.8);
  animation: pulse-red 1.5s infinite;
}

@keyframes pulse-red {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 5px rgba(239, 68, 68, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* Mobil ve tablet versiyonlarında tam ekran seçeneğini gizle (Capacitor/Webview uyumluluğu) */
@media (max-width: 1024px), (pointer: coarse) {
  #auth-fullscreen-container,
  #game-fullscreen-toggle-btn {
    display: none !important;
  }
}

/* ==========================================
   LOBBY GAME TABLE VISUAL LAYOUT STILLERİ
   ========================================== */
.lobby-table-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 52px 0 18px 0; /* clear separation between the room config and the seat ring */
  box-sizing: border-box;
}

.lobby-table-felt {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 320px;
  background: var(--felt-green);
  border: 8px solid hsl(145, 65%, 6%);
  border-radius: 50%;
  box-shadow: 
    inset 0 0 25px rgba(0, 0, 0, 0.85),
    0 10px 25px rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  margin: 0 auto;
}

.lobby-table-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  padding: 6px 14px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
  user-select: none;
  pointer-events: none;
}

.lobby-table-title {
  color: rgba(255, 255, 255, 0.45);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 2px;
}

.lobby-table-subtitle {
  color: rgba(var(--gold-rgb), 0.3);
  font-size: var(--text-2xs);
  font-weight: 600;
  margin-top: 1px;
}

.lobby-seat-slot {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
  z-index: 10;
}

.lobby-seat-slot.slot-0 { bottom: -20px; left: 50%; transform: translateX(-50%); } /* Team A Çırak (6 Yönü) */
.lobby-seat-slot.slot-1 { top: 70%; right: -25px; transform: translateY(-50%); } /* Team B Çırak (4 Yönü) */
.lobby-seat-slot.slot-2 { top: 30%; right: -25px; transform: translateY(-50%); } /* Team A Çırak (2 Yönü) */
.lobby-seat-slot.slot-3 { top: -20px; left: 50%; transform: translateX(-50%); } /* Team B Çırak (12 Yönü) */
.lobby-seat-slot.slot-4 { top: 30%; left: -25px; transform: translateY(-50%); } /* Team A Usta (10 Yönü) */
.lobby-seat-slot.slot-5 { top: 70%; left: -25px; transform: translateY(-50%); } /* Team B Usta (8 Yönü) */

.lobby-seat-avatar-container {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transition: all 0.2s ease-in-out;
  cursor: default;
}

.lobby-seat-avatar-container.empty-seat {
  border: 2px dashed rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
}

.lobby-seat-avatar-container.empty-seat:hover {
  border-color: var(--color-gold);
  background: rgba(var(--gold-rgb), 0.12);
  transform: scale(1.08);
  box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.3);
}

.lobby-seat-avatar-container.current-user-seat {
  border-color: var(--color-gold);
  box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.7);
}

.lobby-seat-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.lobby-seat-empty-icon {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 300;
  transition: color 0.2s;
}

.lobby-seat-avatar-container.empty-seat:hover .lobby-seat-empty-icon {
  color: var(--color-gold);
}

.lobby-seat-badge-team {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: var(--text-2xs);
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 4px;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  user-select: none;
}

.lobby-seat-badge-team.team-a {
  background: #2563eb;
}

.lobby-seat-badge-team.team-b {
  background: #dc2626;
}

.lobby-seat-name-tag {
  margin-top: 4px;
  background: rgba(var(--surface-rgb), 0.85);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 2px 6px;
  width: auto;
  max-width: 90px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.lobby-seat-player-name {
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lobby-seat-role-sub {
  font-size: 0.5rem;
  color: rgba(255, 255, 255, 0.5);
  display: block;
  line-height: 1;
  margin-top: 1px;
}

.lobby-seat-sit-label {
  font-size: 0.58rem;
  font-weight: 800;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
}

/* Masa Sahibi rozeti: oyun ekranındaki .avatar-host-badge ile aynı dil
   (koyu zemin + altın halka), koltuk avatarına göre biraz küçültülmüş. */
.lobby-seat-badge-host {
  position: absolute;
  top: -5px;
  left: -5px;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1.5px solid var(--color-gold);
  font-size: 0.6rem;
  line-height: 1;
  border-radius: 50%;
  width: 19px;
  height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 7px rgba(var(--gold-rgb), 0.45), 0 2px 4px rgba(0,0,0,0.5);
}

/* LOBİ TARAYICI (AÇIK MASALAR) KARTLARI */
.active-table-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  padding: 8px 12px;
  margin-bottom: 6px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.active-table-card:hover {
  background: rgba(var(--gold-rgb), 0.06);
  border-color: rgba(var(--gold-rgb), 0.25);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}
.active-table-card-left {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 3px;
}
.active-table-card-venue {
  font-family: 'Outfit';
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--color-gold);
  display: flex;
  align-items: center;
  gap: 4px;
}
.active-table-card-code {
  font-family: 'Outfit';
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.6px;
}
.active-table-card-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.active-table-card-players {
  font-size: 0.72rem;
  font-weight: 800;
  color: #34d399;
  background: rgba(52, 211, 153, 0.15);
  padding: 3px 8px;
  border-radius: 8px;
  border: 1.5px solid rgba(52, 211, 153, 0.25);
  font-family: 'Outfit';
}
.active-table-card-players.full {
  color: var(--color-red);
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.25);
}
.active-table-card-btn {
  background: linear-gradient(135deg, var(--color-gold-bright) 0%, #d97706 100%);
  border: none;
  border-radius: 10px;
  color: #0f172a;
  font-weight: 800;
  font-size: 0.8rem;
  padding: 8px 14px;
  cursor: pointer;
  font-family: 'Outfit';
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
}
.active-table-card-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(var(--gold-rgb), 0.5);
}
.active-table-card-btn:active {
  transform: scale(0.96);
}

/* LOBİ DASHBOARD FİLTRE BUTONLARI */
.filter-tab-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-family: 'Outfit';
  font-size: 0.72rem;
  font-weight: 800;
  padding: 6px 12px;
  min-height: 32px; /* Compact-bar compromise: full 44px would break the filter bar */
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.filter-tab-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.filter-tab-btn.active {
  color: #0f172a;
  background: var(--color-gold);
  box-shadow: 0 2px 8px rgba(var(--gold-rgb), 0.35);
}

/* LOBİ KONTROL BUTONLARI */
.lobby-exit-btn {
  width: clamp(40px, 11.5vw, 52px);
  height: clamp(40px, 11.5vw, 52px);
  flex: 0 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 68, 68, 0.08);
  border: 1.5px solid rgba(239, 68, 68, 0.25);
  color: #f87171;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.12);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.lobby-exit-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #fff;
  transform: scale(1.08) rotate(-6deg);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35);
}
.lobby-exit-btn:active {
  transform: scale(0.94);
}

.lobby-start-btn {
  width: clamp(40px, 11.5vw, 52px);
  height: clamp(40px, 11.5vw, 52px);
  flex: 0 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--gold-rgb), 0.08);
  border: 1.5px solid rgba(var(--gold-rgb), 0.25);
  color: var(--color-gold);
  cursor: pointer;
  padding: 0;
  box-shadow: 0 4px 15px rgba(var(--gold-rgb), 0.12);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.lobby-start-btn:hover {
  background: rgba(var(--gold-rgb), 0.2);
  border-color: var(--color-gold);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(var(--gold-rgb), 0.35);
}
.lobby-start-btn:active {
  transform: scale(0.94);
}

/* Primary invite CTA between exit/start: icon-only gold-filled circle (the seat
   count lives on the seat ring + the button title/aria-label). */
.lobby-invite-btn {
  width: clamp(44px, 12.5vw, 56px);
  height: clamp(44px, 12.5vw, 56px);
  flex: 0 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.3), rgba(var(--gold-rgb), 0.12));
  border: 1.5px solid rgba(var(--gold-rgb), 0.5);
  color: var(--color-gold);
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(var(--gold-rgb), 0.18);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.lobby-invite-btn:hover {
  background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.4), rgba(var(--gold-rgb), 0.18));
  border-color: var(--color-gold);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(var(--gold-rgb), 0.35);
}
.lobby-invite-btn:active {
  transform: scale(0.96);
}

/* Custom Premium Toggle Switch Styles */
.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(255, 255, 255, 0.12);
  transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.switch-slider::before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.switch-control input:checked + .switch-slider {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.45);
}
.switch-control input:checked + .switch-slider::before {
  transform: translateX(20px);
  background-color: #0f172a; /* Darker knob color when checked for premium gold contrast */
}

/* Home Profile Pill & Avatar Styling */
.home-profile-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(var(--surface-rgb), 0.45);
  padding: 6px 14px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.25s ease;
}

.home-profile-pill:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(var(--surface-rgb), 0.6);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}

.home-profile-avatar-btn {
  background: none;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  width: 32px;
  height: 32px;
  overflow: hidden;
  flex-shrink: 0;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

.home-profile-avatar-btn:hover {
  transform: scale(1.05);
  border-color: var(--color-gold);
}

.profile-logged-in-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 8px #10b981;
  margin-left: 4px;
  flex-shrink: 0;
}

/* Google Auth Button - Sleek Dark Theme matching the game.
   Formerly !important-heavy to beat inline styles; those are gone. */
.google-auth-btn {
  width: 100%;
  max-width: none;
  padding: 12px 24px;
  min-height: var(--touch-target);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-family: var(--font-family);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
}

.google-auth-btn svg {
  flex-shrink: 0;
}

.google-auth-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.google-auth-btn:active {
  transform: translateY(1px);
}

/* Align modal buttons (descendant specificity beats the base
   .primary-btn / .secondary-btn rules — no !important needed) */
.modal .primary-btn,
.modal .secondary-btn {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  font-size: 0.9rem;
  padding: 12px 24px;
}

/* ==========================================
   REDUCED MOTION (vestibular safety)
   Kills the looping pulse/glow/float attention animations,
   the splash loader and the card-flight transition.
   Excluded: timer-drain (functional turn countdown, driven from app.js)
   and one-shot entrance micro-animations (pop-bubble, badge-appear,
   slide-up-fade, scale-up) which are brief and non-looping.
   ========================================== */
@media (prefers-reduced-motion: reduce) {
  .splash-logo-wrapper,               /* splashLogoPulse */
  .splash-loader-progress,            /* loadProgress */
  .usta-suggestion-bubble,            /* floatBubble* */
  .card-unit.suggested-card,          /* pulseSuggested */
  .card-unit.ordered-highlight,       /* cardPulse */
  #player-hand .card-unit.ordered-highlight, /* suggestedLift */
  .teammate-cards .mini-card.ordered-highlight, /* miniCardPulse */
  .player-avatar.current-turn .avatar-circle,   /* pulse-border */
  .skeleton-room-row,                 /* skeletonShimmer (rooms-list loading) */
  .chat-badge {                       /* pulse-red */
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .flying-card-element,               /* card flight transition */
  .game-splash-overlay {              /* splash fade-out */
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   === Component classes (de-inlined) ===
   Structural styles extracted from index.html style="" attributes.
   Grouped by screen. State toggling stays inline in the markup on
   purpose (display:none flips + modal z-index), because app.js /
   auth-manager.js / ui-renderer.js flip element.style at runtime.
   ============================================================ */

/* --- Shared primitives --- */
.glass-panel {
  background: rgba(var(--surface-rgb), 0.55);
  border: 1.5px solid rgba(var(--gold-rgb), 0.25);
  border-radius: var(--border-radius-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.text-left { text-align: left; }
.text-upper { text-transform: uppercase; }

/* Round avatar picker button (join modal + hidden lobby clone) */
.avatar-select-btn {
  background: none;
  border: 1.5px solid var(--color-gold);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  width: 48px;
  height: 48px;
  overflow: hidden;
  flex-shrink: 0;
  transition: all 0.2s;
}

.avatar-select-btn img,
.home-profile-avatar-btn img,
.avatar-option-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dormant ad placeholders — enable when a real ad SDK fills these */
.ad-slot-dormant {
  display: none;
}

/* --- Home screen: header + brand + profile --- */
.lobby-content.home-content {
  max-width: 440px;
  width: 95%;
}

.home-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
  width: 100%;
}

.home-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-brand-logo {
  width: 46px;
  height: 46px;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}

.home-brand-text {
  text-align: left;
}

.home-brand-title {
  font-weight: 800;
  font-size: var(--text-lg);
  color: #fff;
  margin: 0;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.home-brand-tagline {
  font-size: 0.65rem;
  color: var(--color-gold);
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.home-profile-name-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.home-profile-name-input {
  background: transparent;
  border: none;
  color: #fff;
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: 800;
  width: 85px;
  outline: none;
  text-align: left;
  padding: 2px 0;
}

/* --- Home screen: dashboard card --- */
.home-dashboard {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  text-align: center;
  box-sizing: border-box;
}

.dashboard-actions {
  display: flex;
  gap: var(--space-3);
  width: 100%;
}

/* Primary CTA keeps the gold .primary-btn gradient; the secondary CTA
   is a glass outline — deliberate visual weight difference. */
.dashboard-cta {
  flex: 1;
  margin: 0;
  max-width: none;
  height: var(--touch-target);
  min-height: var(--touch-target);
  padding: var(--space-3) var(--space-2);
  font-size: var(--text-sm);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.dashboard-cta.secondary-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  color: #fff;
}

.dashboard-search-row {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.dashboard-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-family: var(--font-family);
  outline: none;
}

.dashboard-filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-1) var(--space-2);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
}

.dashboard-filter-group {
  display: flex;
  gap: var(--space-1);
}

/* ── Refresh control: premium gold icon button. Icon-only by default so it always
   fits the compact filter bar on phones (a labeled "Yenile" pill overflows the bar
   at common widths 360–393px); the label reappears on wide viewports (≥480px) where
   there is genuine room. Fixes the old faint-emoji bug with crisp, high-contrast,
   obviously-tappable gold chrome + a true-duration spin. Sibling of .filter-tab-btn. */
.dashboard-refresh-pill {
  position: relative;               /* anchors the ::before hit-slop */
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 34px;                      /* icon-only: fits beside the 3 chips at 360px */
  min-height: 32px;                 /* baseline-aligned with the filter chips */
  padding: 0;
  font-family: 'Outfit';
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1;
  color: var(--color-gold);
  /* Persistent, always-on affordance: filled glass + gold hairline. With no label,
     the chrome alone must read as a tappable control — so it is a touch stronger. */
  background: rgba(var(--gold-rgb), 0.08);
  border: 1px solid rgba(var(--gold-rgb), 0.45);
  border-radius: 9px;               /* soft squircle, kin to the chips' 8px */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Comfortable >=44px tap area without enlarging the visible button or breaking the row. */
.dashboard-refresh-pill::before {
  content: "";
  position: absolute;
  inset: -6px -5px;
}

.refresh-pill-icon {
  display: block;
  flex-shrink: 0;
  transform-origin: 50% 50%;
}

/* Hidden on phones; the icon carries the meaning. Reappears on wide viewports below. */
.refresh-pill-label {
  display: none;
}

/* Hover / focus: adopt the active-chip recipe — gold fill, dark ink, gold glow. */
.dashboard-refresh-pill:hover {
  color: #0f172a;
  background: var(--color-gold);
  border-color: var(--color-gold);
  box-shadow: 0 2px 10px rgba(var(--gold-rgb), 0.4), var(--gold-glow);
}

.dashboard-refresh-pill:active {
  transform: translateY(1px);
}

.dashboard-refresh-pill:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* In-flight: spin the icon for the TRUE fetch duration (settled in renderActiveRoomsList). */
.dashboard-refresh-pill.is-refreshing {
  color: var(--color-gold);
  background: rgba(var(--gold-rgb), 0.08);
  border-color: rgba(var(--gold-rgb), 0.55);
  cursor: default;
  pointer-events: none;             /* block double-fires while loading */
}
.dashboard-refresh-pill.is-refreshing .refresh-pill-icon {
  animation: refresh-pill-spin 0.7s linear infinite;
}

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

/* Wide viewports (tablet / desktop web): genuine room, so show the explicit label. */
@media (min-width: 480px) {
  .dashboard-refresh-pill {
    width: auto;
    padding: 0 var(--space-3);      /* 0 12px — matches chip horizontal padding */
  }
  .refresh-pill-label {
    display: inline;
  }
}

/* Reduced motion: no spin — a static dimmed icon signals "working" instead. */
@media (prefers-reduced-motion: reduce) {
  .dashboard-refresh-pill,
  .dashboard-refresh-pill:active {
    transition: none;
    transform: none;
  }
  .dashboard-refresh-pill.is-refreshing .refresh-pill-icon {
    animation: none;
    opacity: 0.55;
  }
}

/* Loading spinner in the rooms-list empty/loading states — crisp SVG kin to the
   refresh pill (replaces the old faint 🔄 emoji for premium, on-Android consistency). */
.rooms-loading-spinner {
  display: inline-block;
  vertical-align: -3px;
  margin-right: 6px;
  color: rgba(var(--gold-rgb), 0.7);
  animation: refresh-pill-spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .rooms-loading-spinner { animation: none; opacity: 0.6; }
}

.dashboard-rooms-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  min-height: 160px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 2px;
  text-align: left;
  box-sizing: border-box;
}

/* Room cards: consistent padding + pressed state (hover lives on
   .active-table-card already) */
.active-table-card {
  padding: var(--space-2) var(--space-3);
}

.active-table-card:active {
  transform: translateY(0) scale(0.99);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Loading / empty state with skeleton shimmer (JS swaps this markup
   out once rooms arrive; reduced-motion freezes the shimmer) */
.rooms-list-empty {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-1);
  text-align: center;
  color: rgba(255, 255, 255, 0.35);
  font-size: var(--text-xs);
  font-family: var(--font-family);
}

.rooms-list-empty-text {
  padding-top: var(--space-2);
}

.skeleton-room-row {
  height: 44px;
  border-radius: 11px;
  border: 1.5px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.04) 40%,
    rgba(255, 255, 255, 0.09) 50%,
    rgba(255, 255, 255, 0.04) 60%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}

@keyframes skeletonShimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -80% 0; }
}

/* --- Lobby screen: venue header + room panel + controls --- */
.lobby-room-panel {
  margin-bottom: var(--space-5);
  padding: var(--space-5);
}

.lobby-header-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.venue-input-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
}

.venue-icon {
  font-size: var(--text-lg);
  width: 24px;
  text-align: center;
  display: inline-block;
}

/* Balanced spacer keeps the input optically centered */
.venue-edit-hint {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(var(--gold-rgb), 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.18s ease, background 0.18s ease;
}
.venue-edit-hint:hover {
  color: var(--color-gold);
  background: rgba(var(--gold-rgb), 0.1);
}

/* Compact edit affordance for the home player name (mirrors the venue pencil) */
.name-edit-hint {
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(var(--gold-rgb), 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 5px;
  flex: 0 0 auto;
  transition: color 0.18s ease, background 0.18s ease;
}
.name-edit-hint:hover {
  color: var(--color-gold);
  background: rgba(var(--gold-rgb), 0.12);
}

/* Chalk signature: the venue input is the chalkboard sign of the table.
   Caveat renders small, hence the upscale vs the old 1.2rem Outfit. */
.venue-name-input {
  font-family: var(--font-chalk);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-gold);
  background: transparent;
  border: none;
  border-bottom: 1.5px dashed rgba(var(--gold-rgb), 0.45);
  text-align: center;
  width: 75%;
  outline: none;
  padding: 2px 0;
  transition: all 0.2s;
}

.room-code-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.room-code-title {
  margin: 0;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.75);
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Win-condition (kaç set) selector — host-only lobby setting */
/* Room config group (B): venue + code + set-count boxed as "ODA AYARLARI",
   visually separated from the seat ring below. */
.room-config-group {
  width: 100%;
  border: 1px solid rgba(var(--gold-rgb), 0.16);
  background: rgba(0, 0, 0, 0.20);
  border-radius: 16px;
  padding: 10px 14px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.room-config-label {
  display: block;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: rgba(var(--gold-rgb), 0.6);
  text-align: center;
  margin-bottom: 8px;
}

.lobby-sets-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 0;
}

.lobby-sets-label {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.8);
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Segmented "kaç set" control — custom pills matching the game's gold button
   language (replaces the native <select> so the open state is never OS-native). */
.sets-seg {
  display: inline-flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(var(--gold-rgb), 0.28);
  border-radius: 12px;
  padding: 4px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}
.sets-seg-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 5px 12px;
  border: none;
  background: transparent;
  border-radius: 9px;
  color: rgba(var(--gold-rgb), 0.7);
  font-family: inherit;
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1.05;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.sets-seg-btn small {
  font-size: 0.6rem;
  font-weight: 600;
  opacity: 0.75;
  margin-top: 2px;
  letter-spacing: 0.2px;
}
.sets-seg-btn:hover:not(.is-active) {
  color: var(--color-gold);
  background: rgba(var(--gold-rgb), 0.1);
}
.sets-seg-btn.is-active {
  color: #1b1305;
  background: linear-gradient(180deg, #fbe38f 0%, var(--color-gold) 100%);
  box-shadow: 0 2px 8px rgba(var(--gold-rgb), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.sets-seg.is-locked {
  pointer-events: none;
  opacity: 0.55;
}

/* Absolute overlay that ui-renderer fills with seat slots */
.lobby-seats-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.lobby-controls-row {
  display: flex;
  gap: clamp(8px, 3vw, 16px);
  justify-content: center;
  align-items: center;
  margin-top: 0; /* spacing comes from .lobby-content gap; avoid double gap */
  width: 100%;
}

.lobby-ad-banner {
  margin-top: var(--space-5);
  width: 100%;
  max-width: 340px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: var(--space-2) var(--space-3);
  text-align: center;
}

.ad-slot-label {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 2px;
}

.ad-slot-brand {
  font-size: var(--text-xs);
  color: var(--color-gold);
  font-weight: 600;
}

/* --- Game header: venue badge + hand-history button --- */
.game-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.game-info-actions {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

/* Chalk signature: the venue badge reads like the kıraathane's chalk sign */
.venue-badge {
  font-family: var(--font-chalk);
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-gold);
  background: rgba(var(--gold-rgb), 0.18);
  border: 1px solid rgba(var(--gold-rgb), 0.45);
  padding: 3px var(--space-3);
  border-radius: 10px;
  letter-spacing: 0.6px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 12px -4px rgba(var(--gold-rgb), 0.45);
  display: inline-block;
  max-width: 210px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hand-history-btn {
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  transition: all 0.2s;
}

.hand-history-btn:focus:not(:focus-visible) {
  outline: none;
}

.hh-icon {
  font-size: var(--text-xs);
}

/* Chalk signature: header tally marks (renderTallies output) */
.tallies-chalk .tally-group {
  font-family: var(--font-chalk);
  font-size: 1rem;
  line-height: 1;
}

/* --- Modals: shared structure --- */
.modal-solid {
  background: rgba(var(--surface-rgb), 0.96);
  border: 1.5px solid var(--color-gold);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
}

.modal-center {
  text-align: center;
  padding: var(--space-5);
}

.modal-w-sm { max-width: 320px; }
.modal-w-md { max-width: 340px; }
.modal-w-lg { max-width: 380px; }

.modal-header-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.modal-header-icon {
  font-size: 1.3rem;
}

.modal-content .modal-title {
  color: var(--color-gold);
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 var(--space-2);
}

.modal-header-row .modal-title {
  margin: 0;
}

/* Underlined uppercase title (auth + credits modals) */
.modal-content .modal-title-bar {
  color: var(--color-gold);
  font-size: var(--text-lg);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: var(--space-3);
  margin: 0 0 var(--space-1);
}

.modal-subtitle {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--space-4);
}

.modal-subtitle.mb-1 {
  margin-bottom: var(--space-1);
}

.feedback-note {
  font-size: var(--text-2xs);
  color: var(--color-gold);
  opacity: 0.85;
  margin-bottom: var(--space-3);
}

.modal-section-label {
  font-size: var(--text-xs);
  color: var(--color-gold);
}

h5.modal-section-label {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.modal-content .modal-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px var(--space-3);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  color: #fff;
  font-family: var(--font-family);
  font-size: 0.9rem;
  outline: none;
}

.modal-content .modal-input:focus {
  border-color: rgba(var(--gold-rgb), 0.6);
  box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.25); /* overrides the cyan .form-group glow */
}

.modal-content textarea.modal-input {
  resize: none;
  padding: var(--space-3);
}

.modal-content .modal-input-lg {
  text-align: center;
  font-size: 1.1rem;
  padding: var(--space-3);
}

.form-field {
  margin-bottom: var(--space-3);
  text-align: left;
}

.modal-section-label + .modal-input,
.modal-section-label + .moderator-select,
.modal-section-label + textarea {
  margin-top: var(--space-1);
}

.modal-btn-row {
  display: flex;
  gap: var(--space-2);
  width: 100%;
}

.modal-btn-row > * {
  flex: 1;
  margin: 0;
}

.modal-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  margin-bottom: var(--space-4);
}

.modal-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: var(--space-2) 0;
}

.modal-info-note {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: var(--space-3);
  margin-bottom: var(--space-4);
  text-align: left;
  line-height: 1.4;
}

/* Neutral glass variant for .modal-menu-btn rows; app.js overwrites
   background/border inline when toggling mute state — that wins, as
   inline should. */
.glass-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
}

.ghost-btn {
  padding: 10px;
  min-height: var(--touch-target);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  font-weight: 700;
  font-family: var(--font-family);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.ghost-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.btn-block {
  width: 100%;
  max-width: none;
  margin: 0 0 var(--space-3);
}

/* Static frame for auth/feedback status lines; app.js flips display
   and paints state colors inline */
.status-msg {
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-2);
  border-radius: var(--border-radius-sm);
}

/* --- Auth modal --- */
.auth-tab-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* Initial tab state; auth-manager.js repaints these via inline styles
   on toggle (inline wins over these classes — intended) */
.auth-tab-btn {
  flex: 1;
  padding: var(--space-2);
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.6);
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--text-sm);
  transition: all 0.2s;
}

.auth-tab-btn.active {
  border-color: var(--color-gold);
  background: rgba(var(--gold-rgb), 0.2);
  color: var(--color-gold);
}

.auth-or-separator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

.auth-or-separator .sep-line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
}

.auth-or-separator .sep-text {
  font-size: var(--text-2xs);
  color: rgba(255, 255, 255, 0.5);
  font-weight: 700;
}

.auth-profile-card {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  text-align: center;
}

.profile-username {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-gold);
  margin-bottom: var(--space-1);
}

.profile-displayname {
  font-size: var(--text-sm);
  color: #fff;
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.logout-btn {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  min-height: var(--touch-target);
  background: rgba(239, 68, 68, 0.25);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #fca5a5;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.9rem;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.2s;
}

.logout-btn:hover {
  background: rgba(239, 68, 68, 0.35);
  color: #fff;
}

.invite-section {
  background: rgba(0, 0, 0, 0.25);
  border: 1.5px solid rgba(var(--gold-rgb), 0.2);
  border-radius: 12px;
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  text-align: left;
}

.invite-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.invite-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--border-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.invite-code-label {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.6);
}

.invite-code-val {
  font-size: 0.95rem;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* Compact in-game invite row (⚙️ Masa Seçenekleri). Scoped so the lobby
   .invite-section card above is untouched. One line: code + copy + share. */
.game-invite-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(0, 0, 0, 0.25);
  border: 1.5px solid rgba(var(--gold-rgb), 0.22);
  border-radius: 12px;
  padding: 6px 8px 6px 14px;
  margin-bottom: var(--space-3);
}

.game-invite-label {
  font-size: var(--text-2xs);
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.game-invite-code {
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-gold);
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-invite-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s, border-color 0.2s, filter 0.2s;
}

.game-invite-icon:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.game-invite-icon:active {
  transform: scale(0.92);
}

.game-invite-icon--share {
  border-color: transparent;
  background: linear-gradient(135deg, var(--color-gold) 0%, #d97706 100%);
  color: #3a2a00;
  box-shadow: 0 2px 8px rgba(var(--gold-rgb), 0.35);
}

.game-invite-icon--share:hover {
  filter: brightness(1.06);
  border-color: transparent;
  background: linear-gradient(135deg, var(--color-gold) 0%, #d97706 100%);
}

/* ===== Modern in-game menu (⚙️): 2×2 action grid + preference chips ===== */
.game-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.game-action-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 70px;
  padding: 12px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-family: var(--font-family);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s, border-color 0.2s, filter 0.2s;
}

.game-action-tile:hover { filter: brightness(1.12); }
.game-action-tile:active { transform: scale(0.96); }
.game-action-tile svg { width: 22px; height: 22px; }
.game-action-tile .tile-emoji { font-size: 21px; line-height: 1; }

.game-action-tile.tile-blue {
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(59, 130, 246, 0.35);
  color: #93c5fd;
}
.game-action-tile.tile-gold {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.35);
  color: #fcd34d;
}
.game-action-tile.tile-danger {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.38);
  color: #fca5a5;
}

.game-pref-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.game-pref-chip {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: var(--font-family);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s, border-color 0.2s;
}

.game-pref-chip:hover { background: rgba(255, 255, 255, 0.1); }
.game-pref-chip:active { transform: scale(0.97); }
.game-pref-chip svg { width: 17px; height: 17px; }
.game-pref-chip #game-sound-icon { font-size: 16px; line-height: 1; }

.game-return-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--color-gold) 0%, #d97706 100%);
  color: #161b26;
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  margin-top: var(--space-2);
  transition: filter 0.2s, transform 0.15s;
}

.game-return-btn:hover { filter: brightness(1.06); }
.game-return-btn:active { transform: scale(0.98); }
.game-return-btn svg { width: 16px; height: 16px; }

.settings-group {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: var(--space-1) var(--space-3);
  margin-bottom: var(--space-3);
  display: flex;
  flex-direction: column;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
}

.settings-row:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-label {
  font-size: var(--text-sm);
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.switch-control {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  margin: 0;
  flex-shrink: 0;
}

.switch-control input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* --- Signal & report modals --- */
.signal-fake-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: var(--space-3) 0 var(--space-4);
}

.switch-container {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
}

.gold-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--color-gold);
}

.switch-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-gold);
}

.signal-grid .span-2 {
  grid-column: span 2;
}

.avatar-mini-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.report-option .report-name {
  font-size: var(--text-base);
  font-weight: 600;
}

/* --- Rules modal --- */
.rules-highlight-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(var(--gold-rgb), 0.25);
  border-radius: 12px;
  padding: var(--space-3);
  margin: 2px 0;
}

/* El Aşağı is the one rare, match-ending move — its rule box carries the same
   gold accent the felt button does, so the two read as the same thing. */
.rules-highlight-box.rules-box-gold {
  background: rgba(var(--gold-rgb), 0.08);
  border-color: rgba(var(--gold-rgb), 0.5);
}

.rules-highlight-box p {
  margin: 0 0 var(--space-2);
}

.rules-highlight-box p:last-child {
  margin-bottom: 0;
}

.rules-box-title {
  color: var(--color-gold);
  font-weight: 700;
}

/* Kart puan değerleri tablosu */
.rules-value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: var(--space-2) 0;
}

.rules-value-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.rules-value-cell.is-zero {
  grid-column: 1 / -1;
  background: rgba(0, 0, 0, 0.16);
}

.rules-value-cell .rv-rank {
  font-weight: 800;
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.4px;
}

.rules-value-cell .rv-pts {
  font-weight: 800;
  font-size: 0.8rem;
  color: var(--color-gold);
  white-space: nowrap;
}

.rules-value-cell.is-zero .rv-rank {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.75);
}

.rules-value-cell.is-zero .rv-pts {
  color: rgba(255, 255, 255, 0.45);
}

/* Kart güç sırası şeridi */
.rules-power-row {
  font-weight: 800;
  font-size: 0.86rem;
  color: #fff;
  letter-spacing: 1px;
  text-align: center;
  padding: 7px 6px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(var(--gold-rgb), 0.28) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(var(--gold-rgb), 0.2);
}

.rules-fine-note {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

/* --- Join & manual-join modals --- */
.join-form-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.join-form-row .modal-input {
  flex: 1;
}

/* --- Summary overlay --- */
.summary-content {
  max-width: 380px;
  padding: var(--space-5);
  gap: var(--space-4);
  background: rgba(var(--surface-rgb), 0.96);
  border: 1.5px solid var(--color-gold);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.9);
}

.summary-title {
  font-size: 1.35rem;
  color: var(--color-gold);
  margin: 0;
}

.summary-table-container {
  border-radius: var(--border-radius-md);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 0;
}

.summary-table tr.summary-head-row {
  background: rgba(0, 0, 0, 0.5);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.15);
}

.summary-table th.sum-th-label {
  text-align: left;
  padding: 10px var(--space-3);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.6);
}

.summary-table th.sum-th {
  padding: 10px var(--space-2);
  font-size: var(--text-xs);
  font-weight: 800;
  white-space: nowrap;
}

.summary-table th.team-a-col { color: var(--color-accent); }
.summary-table th.team-b-col { color: var(--color-red); }

.summary-table td.sum-label-cell {
  text-align: left;
  padding: 9px var(--space-3);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
}

.summary-table td.sum-label-strong {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-gold);
  padding: 10px var(--space-3);
}

.summary-table td.sum-val {
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
}

.summary-table td.sum-val-muted {
  color: rgba(255, 255, 255, 0.7);
}

.summary-table tr.highlight-row {
  background: rgba(var(--gold-rgb), 0.1);
  border-bottom: 1.5px solid rgba(var(--gold-rgb), 0.3);
}

.summary-table tr.highlight-row td.team-a-val,
.summary-table tr.highlight-row td.team-b-val {
  font-weight: 900;
  font-size: 1.05rem;
}

.summary-table tr.sum-cum-row {
  background: rgba(255, 255, 255, 0.03);
}

.summary-table td.sum-cum-val {
  font-weight: 800;
  font-size: 0.95rem;
}

.summary-table tr.sets-row {
  background: rgba(var(--gold-rgb), 0.12);
}

.summary-table tr.sets-row td {
  color: var(--color-gold);
}

/* Chalk signature: round tally (gider) + set counters on the score sheet.
   Bir gider = bir çizik: skor tablosu da oyun header'ıyla aynı renderTallies()
   çıktısını (卌 + |) kullanır, iki farklı çizik dili yoktur. */
.summary-table td.sum-chalk-val {
  font-family: var(--font-chalk);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.summary-table td.sum-chalk-val .tally-group {
  font-family: var(--font-chalk);
  font-size: 1.1rem;
  line-height: 1;
  margin: 0 1px;
}

.summary-table td.sum-chalk-val .sum-sets-stars {
  color: var(--color-gold);
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.summary-table td.sum-chalk-val .sum-sets-progress {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
}

.summary-logs {
  max-height: 100px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: var(--space-2) var(--space-3);
  margin-bottom: 0;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.6);
  text-align: left;
}

/* --- Platform confirm modal --- */
.confirm-icon {
  font-size: 2.2rem;
  margin-bottom: var(--space-2);
}

.confirm-msg {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--space-4);
  line-height: 1.4;
}

/* --- Credits modal --- */
.credits-box {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: var(--space-4);
  text-align: left;
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.credits-box p {
  margin: var(--space-1) 0;
  color: rgba(255, 255, 255, 0.9);
}

.credits-box strong {
  color: var(--color-gold);
}

.credits-box a {
  color: var(--color-accent);
  text-decoration: none;
}

.credits-box .credits-footnote {
  margin: var(--space-2) 0 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--text-xs);
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: var(--space-2);
}

/* --- Avatar modal --- */
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  max-height: 220px;
  overflow-y: auto;
  padding: var(--space-1);
}

.avatar-option-card {
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  margin: 0 auto;
  overflow: hidden;
  transition: all 0.2s;
}

/* --- Toast container (app.js renders toasts inside) --- */
.toast-container {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 90%;
  max-width: 320px;
  pointer-events: none;
}


/* === Game-feel layer === */
/* Flying card clone used for hand->table plays (flyCard in animations.js).
   Mirrors .card-unit so the clone reads as the same card mid-flight. */
.gf-flying-card {
  position: fixed;
  /* Above the table (played cards ~10, seat chrome <=90) but always below
     modals (.modal is 110) — transient clones must never cover a dialog. */
  z-index: 100;
  box-sizing: border-box;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 10px;
  border: 1.5px solid #cbd5e1;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-weight: 900;
  color: #0f172a;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  will-change: transform, opacity;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s ease;
}
/* Suit color on the flight clone (call site passes card.suit.color), so a red
   card doesn't render dark mid-flight and snap to red only on landing. */
.gf-flying-card.red { color: #dc2626; }
.gf-flying-card.black { color: #0f172a; }
.gf-flying-card .suit-small { font-size: 0.72rem; align-self: flex-start; line-height: 1; }
.gf-flying-card .rank-big { font-size: 1.5rem; text-align: center; line-height: 1; }
.gf-flying-card .suit-big { font-size: 1rem; align-self: flex-end; line-height: 1; }
.gf-flying-card .suit-small,
.gf-flying-card .rank-big,
.gf-flying-card .suit-big { transition: opacity 0.15s ease; }

/* Face-down state: a slate card back that flips to face-up mid-flight */
.gf-flying-card.gf-face-down {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.14);
  color: transparent;
}
.gf-flying-card.gf-face-down .suit-small,
.gf-flying-card.gf-face-down .rank-big,
.gf-flying-card.gf-face-down .suit-big { opacity: 0; }
.gf-flying-card.gf-face-down::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(45deg, rgba(var(--gold-rgb), 0.18) 0 6px, transparent 6px 12px),
    linear-gradient(135deg, #24324a 0%, #1a2437 100%);
  border: 1px solid rgba(var(--gold-rgb), 0.25);
}

/* Trick-collect sweep clone (animateTrickCollect). Keeps the played-card
   silhouette while it flies toward the winning avatar and fades. */
.gf-collect-card {
  position: fixed;
  z-index: 99; /* just under .gf-flying-card, same below-modal rule */
  box-sizing: border-box;
  width: 60px;
  height: 86px;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1.8px solid #cbd5e1;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  will-change: transform, opacity;
  transition: transform 0.6s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.6s ease;
}

/* Your-turn moment: a single soft gold breath on the hand panel */
#hand-container.gf-your-turn {
  animation: gfYourTurnPulse 0.9s ease-out 1;
}
@keyframes gfYourTurnPulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--gold-rgb), 0); }
  35%  { box-shadow: 0 -6px 34px 2px rgba(var(--gold-rgb), 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(var(--gold-rgb), 0); }
}

/* Signal bubble expanded with its meaning label (learnable mimic language).
   Chalk font gives the meaning a whispered, kıraathane-slate voice. */
.signal-bubble.gf-with-meaning {
  width: auto;
  min-width: 24px;
  height: auto;
  border-radius: 12px;
  padding: 4px 10px;
  gap: 5px;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  top: -18px;
  white-space: nowrap;
}
.signal-bubble-emoji { font-size: 0.95rem; line-height: 1; }
.signal-bubble-meaning {
  font-family: var(--font-chalk);
  font-size: 0.95rem;
  font-weight: 700;
  color: #1f2937;
  line-height: 1;
}

/* Reduced-motion: skip the moving pieces, keep the informational end-states.
   flyCard/animateTrickCollect already early-return under reduced motion; this
   only neutralizes the CSS-driven pulse. */
@media (prefers-reduced-motion: reduce) {
  #hand-container.gf-your-turn { animation: none; }
  .gf-flying-card,
  .gf-collect-card { transition-duration: 0.01ms; }
}

/* =========================================================================
   First-visit onboarding coach-mark (see src/ui/onboarding.js)
   Dimmed backdrop + spotlight cutout, hand-drawn gold arrow, bubble.
   Sits above every in-app layer (toasts peak at z-index 999999).
   ========================================================================= */
.onboarding-root {
  position: fixed;
  inset: 0;
  z-index: 1000001;
  pointer-events: none; /* only the interactive children capture input */
  font-family: var(--font-family);
}

/* Full-viewport SVG whose mask punches a transparent hole over the target. */
.onboarding-backdrop {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto; /* clicks on the dim area are absorbed, not passed */
}

/* Gold pulsing ring drawn around the spotlight cutout. */
.onboarding-ring {
  position: fixed;
  border: 2px solid var(--color-gold-bright);
  border-radius: 14px;
  box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.25),
              0 0 22px rgba(var(--gold-rgb), 0.55);
  pointer-events: none;
  animation: onboardingRingPulse 1.8s ease-in-out infinite;
}

@keyframes onboardingRingPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.2), 0 0 16px rgba(var(--gold-rgb), 0.4); }
  50%      { box-shadow: 0 0 0 4px rgba(var(--gold-rgb), 0.35), 0 0 30px rgba(var(--gold-rgb), 0.7); }
}

/* Hand-drawn marker arrow. */
.onboarding-arrow {
  position: fixed;
  pointer-events: none;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55));
  transform-origin: center;
}
.onboarding-arrow-flip {
  transform: rotate(180deg);
}
.onboarding-arrow-shaft,
.onboarding-arrow-head {
  /* Marker path length for the draw-in animation (generous upper bound). */
  stroke-dasharray: 360;
  stroke-dashoffset: 0;
}
.onboarding-root.onboarding-reduce-motion .onboarding-arrow-shaft,
.onboarding-root.onboarding-reduce-motion .onboarding-arrow-head {
  stroke-dashoffset: 0; /* fully drawn, no motion */
}
.onboarding-arrow.onboarding-animate .onboarding-arrow-shaft {
  animation: onboardingDraw 0.5s ease-out both;
}
.onboarding-arrow.onboarding-animate .onboarding-arrow-head {
  animation: onboardingDraw 0.28s ease-out 0.42s both;
}
@keyframes onboardingDraw {
  from { stroke-dashoffset: 360; }
  to   { stroke-dashoffset: 0; }
}

/* Tooltip bubble. */
.onboarding-bubble {
  position: fixed;
  box-sizing: border-box;
  max-width: min(340px, calc(100vw - 24px));
  padding: 14px 16px 16px;
  background: linear-gradient(160deg, hsl(222, 47%, 18%) 0%, hsl(222, 47%, 13%) 100%);
  border: 1.5px solid rgba(var(--gold-rgb), 0.55);
  border-radius: var(--border-radius-md);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7), 0 0 22px rgba(var(--gold-rgb), 0.28);
  color: var(--color-text);
  pointer-events: auto;
  outline: none;
}
.onboarding-bubble:focus-visible {
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7), 0 0 0 3px rgba(var(--gold-rgb), 0.6);
}
.onboarding-bubble-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.onboarding-step-counter {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-gold);
  background: rgba(var(--gold-rgb), 0.12);
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  border-radius: 999px;
  padding: 2px 10px;
}
.onboarding-skip-link {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-family: inherit;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--border-radius-sm);
  min-height: 32px;
}
.onboarding-skip-link:hover { color: var(--color-text); }
.onboarding-skip-link:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}
.onboarding-bubble-title {
  font-family: var(--font-chalk);
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--color-gold-bright);
  margin: 0 0 4px;
}
.onboarding-bubble-body {
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-text);
  margin: 0;
}
.onboarding-bubble-nudge {
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--color-text-muted);
  margin: 10px 0 0;
  padding: 8px 10px;
  background: rgba(var(--gold-rgb), 0.08);
  border-left: 2px solid rgba(var(--gold-rgb), 0.5);
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}
.onboarding-bubble-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}
.onboarding-next-btn {
  min-height: var(--touch-target);
  padding: 8px 24px;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}

/* Bubble fade + slide-in per step. */
.onboarding-bubble.onboarding-animate {
  animation: onboardingBubbleIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes onboardingBubbleIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 380px) {
  .onboarding-bubble-title { font-size: 1.3rem; }
  .onboarding-bubble { padding: 12px 14px 14px; }
}

/* Reduced motion: disable arrow draw, ring pulse, and bubble slide;
   keep everything in its final, informative resting state. */
@media (prefers-reduced-motion: reduce) {
  .onboarding-ring { animation: none; }
  .onboarding-arrow.onboarding-animate .onboarding-arrow-shaft,
  .onboarding-arrow.onboarding-animate .onboarding-arrow-head {
    animation: none;
    stroke-dashoffset: 0;
  }
  .onboarding-bubble.onboarding-animate { animation: none; }
}

/* ── Bot marker: honest, gilded "Bilgisayar" tag ─────────────────────
   The name gives warmth; this marker gives honesty. Reuses the gold-on-glass
   chip family (venue/host chips), never red. Truth source is the isBot flag,
   never a name string. Never on the current user's seat or an empty seat; a
   disconnected auto-played human is NOT a bot, so it never gets this mark. */
.seat-bot-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold-bright);
  background: rgba(var(--gold-rgb), 0.14);
  border: 1px solid rgba(var(--gold-rgb), 0.42);
  line-height: 1.4;
  user-select: none;
  white-space: nowrap;
}
.seat-bot-tag::before {
  content: "\2660";               /* ♠ — card language, not a robot cliché */
  opacity: 0.85;
  font-size: 0.62rem;
}

/* Secondary cue — bot avatars sit a half-step back (never "greyed out") */
.is-bot-avatar .lobby-seat-img,
.avatar-circle.is-bot-avatar .avatar-img {
  filter: grayscale(18%) brightness(0.94);
}

/* Felt table — glyph only (word is illegible at felt seat size), legible over green */
.felt-bot-mark {
  margin-left: 3px;
  color: var(--color-gold-bright);
  opacity: 0.9;
  text-shadow: 0 0 4px rgba(var(--gold-rgb), 0.4);
  font-size: 0.72em;
  vertical-align: 1px;
}

/* Very small phones: drop the word, keep the spade */
@media (max-width: 340px) {
  .seat-bot-tag { font-size: 0; padding: 2px 4px; gap: 0; }
  .seat-bot-tag::before { font-size: 0.72rem; opacity: 1; }
}

/* ── Oyun Künyesi: "Dostlara Teşekkür" ───────────────────────────────
   First-person thanks to the six friends the founder learned the game among
   (with consent) — a real credit, not a disguised bot. No family references. */
.credits-thanks {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(var(--gold-rgb), 0.22);
  text-align: center;
}
.credits-thanks-title {
  color: var(--color-gold-bright);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.3px;
  margin: 0 0 var(--space-2);
}
.credits-thanks-intro {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--text-xs);
  line-height: 1.55;
  margin: 0 0 6px;
}
.credits-thanks-names {
  color: rgba(var(--gold-rgb), 0.92);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: 0.2px;
  margin: 0;
}
.credits-transparency {
  margin: var(--space-3) 0 4px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.68rem;
  line-height: 1.5;
}

/* Account deletion — a required (Play policy) but destructive action; kept
   visually subordinate to logout. Red is correct here (irreversible), unlike
   the honest gold bot marker. */
.delete-account-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 8px;
  color: rgba(248, 113, 113, 0.9);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.delete-account-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.55);
}

/* --- Host-only Usta reassignment picker (game menu / round summary) --- */
.usta-change-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 16px;
}
.usta-pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text, #f4f4f5);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.usta-pick-row:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(251, 191, 36, 0.55);
}
.usta-pick-row:active:not(:disabled) { transform: scale(0.99); }
.usta-pick-row.is-usta {
  cursor: default;
  border-color: var(--color-gold, #fbbf24);
  background: rgba(251, 191, 36, 0.12);
}
.usta-pick-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.usta-pick-name {
  flex: 1;
  text-align: left;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.usta-pick-team-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.usta-pick-team-dot.team-a { background: var(--color-accent); }
.usta-pick-team-dot.team-b { background: var(--color-red); }
.usta-pick-badge {
  font-size: 0.82rem;
  font-weight: 700;
  opacity: 0.9;
  flex-shrink: 0;
}