/* =========================================
   RESET
========================================= */

*,
*::before,
*::after {

  margin: 0;
  padding: 0;

  box-sizing: border-box;

  -webkit-tap-highlight-color: transparent !important;
  tap-highlight-color: transparent !important;

  -webkit-touch-callout: none !important;

  -webkit-user-select: none !important;
  user-select: none !important;

  outline: none !important;

}

html {

  scroll-behavior: smooth;

  overflow-x: hidden;

  overflow-y: auto;

  overscroll-behavior-x: none;

  background: #09090b;

}

body {

  font-family: "Vazirmatn";

  min-height: 100vh;

  overflow-x: hidden;

  overflow-y: auto;

  touch-action: pan-y;

  color: var(--text-primary);

  background:
    radial-gradient(
      circle at top,
      #18181b,
      #09090b
    );

}

/* Remove Mobile Highlight */

button,
div,
section,
span,
input,
textarea,
select,
a {

  -webkit-tap-highlight-color:
    rgba(0,0,0,0) !important;

  outline: none !important;

  box-shadow: none !important;

}

button:focus,
button:active,
button:hover,

div:focus,
div:active,

.player-card:focus,
.player-card:active,
.player-card:hover {

  outline: none !important;

  box-shadow: none !important;

}

/* =========================================
   CONTAINER
========================================= */

.container {

  width: 100%;

  max-width: 1400px;

  margin: auto;

  padding: 20px;

}

/* =========================================
   SETUP BOX
========================================= */

.setup-box {

  background:
    rgba(24,24,27,0.85);

  backdrop-filter: blur(20px);

  border:
    1px solid rgba(255,255,255,0.05);

  border-radius:
    var(--radius-xl);

  padding: 30px;

  box-shadow:
    var(--shadow-main);

  margin-bottom: 30px;

}

/* =========================================
   TITLE
========================================= */

.main-title {

  font-size: 40px;

  font-weight: 700;

  text-align: center;

  margin-bottom: 30px;

  background:
    linear-gradient(
      90deg,
      #ffffff,
      #ef4444
    );

  background-clip: text;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}

/* =========================================
   FORM
========================================= */

.form-group {

  margin-bottom: 20px;

}

label {

  display: block;

  margin-bottom: 12px;

  color: var(--text-secondary);

  font-size: 15px;

}

/* =========================================
   INPUTS
========================================= */

select,
.auth-input {

  width: 100%;

  height: 58px;

  border: none;

  border-radius:
    var(--radius-lg);

  background: #27272a;

  color: white;

  padding: 0 18px;

  font-size: 16px;

  font-family: inherit;

}

.auth-input::placeholder {

  color: #71717a;

}

/* =========================================
   BUTTONS
========================================= */

button {

  width: 100%;

  height: 58px;

  border: none;

  border-radius:
    var(--radius-lg);

  font-family: inherit;

  font-size: 16px;

  font-weight: 600;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease;

  color: white;

  background:
    linear-gradient(
      135deg,
      #ef4444,
      #b91c1c
    );

}

@media (hover: hover) {

  button:hover {

    transform:
      translateY(-2px);

    opacity: 0.95;

  }

}

/* =========================================
   MODERATOR ACTIONS
========================================= */

.moderator-actions {

  display: flex;

  gap: 16px;

  margin-top: 30px;

  margin-bottom: 20px;

}

.moderator-actions button {

  flex: 1;

}

/* =========================================
   PLAYERS GRID - کانتینر جداگانه با اسکرول نرم
========================================= */

.players-container {
  margin-top: 25px;
  padding: 10px;
  background: rgba(24, 24, 27, 0.6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(20px);
  max-height: 65vh;                    /* حداکثر ارتفاع */
  overflow-y: auto;                    /* اسکرول عمودی */
  scroll-behavior: smooth;             /* اسکرول نرم */
  -webkit-overflow-scrolling: touch;   /* اسکرول نرم در iOS */
}

/* اسکرول بار زیباتر */
.players-container::-webkit-scrollbar {
  width: 8px;
}

.players-container::-webkit-scrollbar-thumb {
  background: #ef4444;
  border-radius: 20px;
}

.players-container::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
}

/* =========================================
   PLAYERS GRID
========================================= */

.players-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);     /* ۴ ستون پیش‌فرض */
  gap: 18px;
  padding: 10px;
}

/* =========================================
   PLAYER CARD
========================================= */

.player-card {
  position: relative;
  overflow: hidden;
  min-height: 148px;
  background: rgba(24,24,27,0.9);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 24px;
  padding: 20px 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(20px);
}

.player-card:hover {
  transform: translateY(-6px) scale(1.04);
  border-color: rgba(239, 68, 68, 0.4);
}

.player-card.disabled {
  opacity: 0.65;
  pointer-events: none;
}

.question {
  font-size: 52px;
  margin-bottom: 10px;
  line-height: 1;
}

/* =========================================
   QUESTION ICON
========================================= */

.question {

  font-size: 56px;

  margin-bottom: 12px;

}

/* =========================================
   TABLE
========================================= */

.table-box {

  margin-top: 35px;

  background:
    rgba(24,24,27,0.85);

  border:
    1px solid rgba(255,255,255,0.05);

  border-radius: 28px;

  padding: 24px;

  overflow-x: auto;

  backdrop-filter: blur(18px);

}

table {

  width: 100%;

  border-collapse: collapse;

}

th {

  color: #ef4444;

  font-weight: 700;

}

th,
td {

  padding: 18px;

  text-align: center;

  border-bottom:
    1px solid rgba(255,255,255,0.06);

}

/* =========================================
   MODAL
========================================= */

.modal {

  position: fixed;

  inset: 0;

  background:
    rgba(0,0,0,0.68);

  backdrop-filter: blur(14px);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 9999;

  transition: 0.2s;

}

.modal.hidden {

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

}
.hidden {
  display: none !important;
}
/* =========================================
   MODAL CONTENT
========================================= */

.modal-content {

  position: relative;

  width: 92%;

  max-width: 430px;

  background:
    rgba(24,24,27,0.96);

  border:
    1px solid rgba(255,255,255,0.06);

  border-radius: 30px;

  padding: 30px;

  text-align: center;

  box-shadow:
    0 20px 50px rgba(0,0,0,0.45);

  transform: translateZ(0);

  backface-visibility: hidden;

}

/* =========================================
   ROLE TEXT
========================================= */

.role-text {

  font-size: 42px;

  font-weight: 700;

  margin: 30px 0;

  color: #ef4444;

}

/* =========================================
   CLOSE BUTTON
========================================= */

.close-modal-btn {

  position: absolute;

  top: 12px;

  left: 12px;

  width: 42px;

  height: 42px;

  border-radius: 14px;

  background: #27272a;

  font-size: 18px;

}

/* =========================================
   SCROLLBAR
========================================= */

::-webkit-scrollbar {

  width: 10px;

  height: 10px;

}

::-webkit-scrollbar-thumb {

  background: #27272a;

  border-radius: 50px;

}

/* =========================================
   SHAKE
========================================= */

.shake {

  animation: shake 0.4s;

}

@keyframes shake {

  0% {

    transform: translateX(0);

  }

  25% {

    transform: translateX(-10px);

  }

  50% {

    transform: translateX(10px);

  }

  75% {

    transform: translateX(-10px);

  }

  100% {

    transform: translateX(0);

  }

}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 900px) {

  .players-grid {

    gap: 14px;

  }

}

@media (max-width: 700px) {

  .container {

    padding: 14px;

  }

  .moderator-actions {

    flex-direction: column;

  }

  .players-grid {

    grid-template-columns:
      repeat(4, minmax(0,1fr));

    gap: 10px;

  }

  .player-card {

    min-height: 105px;

    padding: 15px 8px;

    border-radius: 18px;

  }

  .question {

    font-size: 34px;

  }

  .main-title {

    font-size: 32px;

  }

  button,
  select,
  .auth-input {

    height: 52px;

    font-size: 15px;

  }

}

@media (max-width: 500px) {

  .players-grid {

    gap: 8px;

  }

  .player-card {

    min-height: 92px;

  }

  .question {

    font-size: 28px;

  }

}
.auth-input {

  font-size: 28px;

  text-align: center;

  letter-spacing: 10px;

}
.pin-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 12px;

  margin-top: 20px;

}

.pin-btn {

  height: 60px;

  border-radius: 16px;

  border: none;

  font-size: 20px;

  font-weight: bold;

  background: #27272a;

  color: white;

  cursor: pointer;

  transition: 0.2s;

}

.pin-btn:active {

  transform: scale(0.95);

  background: #3f3f46;

}

.pin-delete,
.pin-ok {

  background: #18181b;

}
.pin-btn {

  position: relative;

  overflow: hidden;

  transition:
    transform 0.12s ease,
    background 0.2s ease;

}

/* Bounce effect */
.pin-btn:active {

  transform: scale(0.92);

}

/* iOS-like pop animation */
.pin-btn.pressed {

  animation: pinBounce 0.25s ease;

}

@keyframes pinBounce {

  0%   { transform: scale(1); }
  30%  { transform: scale(0.85); }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); }

}
.pin-btn::after {

  content: "";

  position: absolute;

  inset: 0;

  background: radial-gradient(
    circle at center,
    rgba(255,255,255,0.25),
    transparent 70%
  );

  opacity: 0;

  transition: opacity 0.2s ease;

}

.pin-btn.active-glow::after {

  opacity: 1;

}