@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Outfit:wght@400;500;600;700&display=swap');
.how-to-play-container[data-v-7bb3da8b] {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0.5rem;
}

/* Tab Navigation */
.tab-nav[data-v-7bb3da8b] {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
}
.tab-button[data-v-7bb3da8b] {
  flex: 1;
  min-width: 120px;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
}
.tab-button[data-v-7bb3da8b]:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}
.tab-button.active[data-v-7bb3da8b] {
  background: linear-gradient(135deg, rgba(232, 197, 71, 0.2), rgba(212, 175, 55, 0.2));
  border-color: #e8c547;
  color: #e8c547;
}
.tab-button .material-symbols-outlined[data-v-7bb3da8b] {
  font-size: 1.125rem;
}

/* Tab Content */
.tab-content[data-v-7bb3da8b] {
  min-height: 400px;
  max-height: 500px;
  overflow-y: auto;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

/* Custom Scrollbar */
.tab-content[data-v-7bb3da8b]::-webkit-scrollbar {
  width: 8px;
}
.tab-content[data-v-7bb3da8b]::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}
.tab-content[data-v-7bb3da8b]::-webkit-scrollbar-thumb {
  background: rgba(232, 197, 71, 0.3);
  border-radius: 4px;
}
.tab-content[data-v-7bb3da8b]::-webkit-scrollbar-thumb:hover {
  background: rgba(232, 197, 71, 0.5);
}
.tab-panel[data-v-7bb3da8b] {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.panel-title[data-v-7bb3da8b] {
  font-size: 1.5rem;
  font-weight: 700;
  color: #e8c547;
  margin: 0;
}
.rule-section[data-v-7bb3da8b] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.rule-section h4[data-v-7bb3da8b] {
  font-size: 1.125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}
.rule-section p[data-v-7bb3da8b] {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  margin: 0;
}
.rule-section ul[data-v-7bb3da8b] {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.rule-section li[data-v-7bb3da8b] {
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
}
.rule-section li[data-v-7bb3da8b]::before {
  content: '→';
  position: absolute;
  left: 0;
  color: #e8c547;
  font-weight: 600;
}

/* Card Table */
.card-table[data-v-7bb3da8b] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.card-category[data-v-7bb3da8b] {
  padding: 1.25rem;
  border-radius: 10px;
  border: 2px solid;
}
.card-category.wild[data-v-7bb3da8b] {
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.3);
}
.card-category.natural[data-v-7bb3da8b] {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
}
.card-category.dead[data-v-7bb3da8b] {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}
.card-category h4[data-v-7bb3da8b] {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 1rem;
}
.card-category.wild h4[data-v-7bb3da8b] {
  color: #a855f7;
}
.card-category.natural h4[data-v-7bb3da8b] {
  color: #10b981;
}
.card-category.dead h4[data-v-7bb3da8b] {
  color: #f87171;
}
.card-row[data-v-7bb3da8b] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  font-size: 0.9375rem;
}
.card-name[data-v-7bb3da8b] {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}
.card-value[data-v-7bb3da8b] {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 700;
}
.card-note[data-v-7bb3da8b] {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
}

/* Threshold Table */
.threshold-table[data-v-7bb3da8b] {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.threshold-row[data-v-7bb3da8b] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.875rem 1.125rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  font-size: 0.9375rem;
}
.threshold-row .points[data-v-7bb3da8b] {
  color: #e8c547;
  font-weight: 700;
  font-size: 1.125rem;
}

/* Canasta Grid */
.canasta-grid[data-v-7bb3da8b] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.canasta-type[data-v-7bb3da8b] {
  padding: 1.25rem;
  border-radius: 10px;
  border: 2px solid;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.canasta-type.natural-canasta[data-v-7bb3da8b] {
  background: rgba(251, 146, 60, 0.1);
  border-color: rgba(251, 146, 60, 0.3);
}
.canasta-type.mixed-canasta[data-v-7bb3da8b] {
  background: rgba(107, 114, 128, 0.1);
  border-color: rgba(107, 114, 128, 0.3);
}
.canasta-type.wild-canasta[data-v-7bb3da8b] {
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.3);
}
.canasta-type.hidden-canasta[data-v-7bb3da8b] {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}
.canasta-header[data-v-7bb3da8b] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.canasta-header .material-symbols-outlined[data-v-7bb3da8b] {
  font-size: 1.5rem;
}
.canasta-type.natural-canasta .material-symbols-outlined[data-v-7bb3da8b] {
  color: #fb923c;
}
.canasta-type.mixed-canasta .material-symbols-outlined[data-v-7bb3da8b] {
  color: #6b7280;
}
.canasta-type.wild-canasta .material-symbols-outlined[data-v-7bb3da8b] {
  color: #a855f7;
}
.canasta-type.hidden-canasta .material-symbols-outlined[data-v-7bb3da8b] {
  color: #f87171;
}
.canasta-header h4[data-v-7bb3da8b] {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}
.canasta-type.natural-canasta h4[data-v-7bb3da8b] {
  color: #fb923c;
}
.canasta-type.mixed-canasta h4[data-v-7bb3da8b] {
  color: #9ca3af;
}
.canasta-type.wild-canasta h4[data-v-7bb3da8b] {
  color: #a855f7;
}
.canasta-type.hidden-canasta h4[data-v-7bb3da8b] {
  color: #f87171;
}
.canasta-desc[data-v-7bb3da8b] {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}
.canasta-points[data-v-7bb3da8b] {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}
.canasta-type.natural-canasta .canasta-points[data-v-7bb3da8b] {
  color: #fb923c;
}
.canasta-type.mixed-canasta .canasta-points[data-v-7bb3da8b] {
  color: #9ca3af;
}
.canasta-type.wild-canasta .canasta-points[data-v-7bb3da8b],
.canasta-type.hidden-canasta .canasta-points[data-v-7bb3da8b] {
  color: #a855f7;
}

/* Requirements Checklist */
.requirements-checklist[data-v-7bb3da8b] {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.25rem;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 10px;
}
.requirement-item[data-v-7bb3da8b] {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
}
.requirement-item .material-symbols-outlined[data-v-7bb3da8b] {
  font-size: 1.25rem;
  color: #10b981;
  flex-shrink: 0;
}

/* Close Button */
.btn-close[data-v-7bb3da8b] {
  padding: 0.875rem 2rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  background: linear-gradient(135deg, #e8c547 0%, #d4af37 100%);
  color: #0d1f2d;
  box-shadow: 0 4px 12px rgba(232, 197, 71, 0.3);
  align-self: center;
  max-width: 200px;
  width: auto;
}
.btn-close[data-v-7bb3da8b]:hover {
  background: linear-gradient(135deg, #f0d060 0%, #e0bf47 100%);
  box-shadow: 0 6px 16px rgba(232, 197, 71, 0.4);
  transform: translateY(-2px);
}
.btn-close[data-v-7bb3da8b]:active {
  transform: translateY(0);
}
.btn-close .material-symbols-outlined[data-v-7bb3da8b] {
  font-size: 1.25rem;
}

/* ==========================================
   Overview Tab - Enhanced Styles
   ========================================== */

/* Overview Sections */
.overview-section[data-v-7bb3da8b] {
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  width: 100%;
  box-sizing: border-box;
}
.section-header[data-v-7bb3da8b] {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1rem;
}
.section-header .material-symbols-outlined[data-v-7bb3da8b] {
  font-size: 1.5rem;
  color: #e8c547;
}
.section-header h4[data-v-7bb3da8b] {
  font-size: 1.125rem;
  font-weight: 700;
  color: #e8c547;
  margin: 0;
}
.intro-text[data-v-7bb3da8b] {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 1rem;
  line-height: 1.6;
}

/* The Basics Section */
.basics-grid[data-v-7bb3da8b] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.basic-item[data-v-7bb3da8b] {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  box-sizing: border-box;
}
.basic-label[data-v-7bb3da8b] {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.5);
}
.basic-value[data-v-7bb3da8b] {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}

/* Your Two Hands Section */
.hands-grid[data-v-7bb3da8b] {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}
.hand-card[data-v-7bb3da8b] {
  flex: 1 1 0;
  min-width: 0;
  max-width: calc(50% - 5px);
  padding: 1rem;
  border-radius: 10px;
  border: 2px solid;
  box-sizing: border-box;
}
.hand-card.main-hand[data-v-7bb3da8b] {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
}
.hand-card.foot-hand[data-v-7bb3da8b] {
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.3);
}
.hand-header[data-v-7bb3da8b] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.hand-header .material-symbols-outlined[data-v-7bb3da8b] {
  font-size: 1.25rem;
}
.hand-card.main-hand .material-symbols-outlined[data-v-7bb3da8b] {
  color: #10b981;
}
.hand-card.foot-hand .material-symbols-outlined[data-v-7bb3da8b] {
  color: #a855f7;
}
.hand-header h5[data-v-7bb3da8b] {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}
.hand-card.main-hand h5[data-v-7bb3da8b] {
  color: #10b981;
}
.hand-card.foot-hand h5[data-v-7bb3da8b] {
  color: #a855f7;
}
.hand-card p[data-v-7bb3da8b] {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.foot-rules[data-v-7bb3da8b] {
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  margin-bottom: 1rem;
}
.foot-rules h5[data-v-7bb3da8b] {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 0.75rem;
}
.foot-rules ul[data-v-7bb3da8b] {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.foot-rules li[data-v-7bb3da8b] {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  padding-left: 1.25rem;
  position: relative;
}
.foot-rules li[data-v-7bb3da8b]::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #e8c547;
  font-weight: bold;
}

/* Warning Callout */
.warning-callout[data-v-7bb3da8b] {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
}
.warning-callout > .material-symbols-outlined[data-v-7bb3da8b] {
  font-size: 1.5rem;
  color: #f87171;
  flex-shrink: 0;
}
.warning-callout strong[data-v-7bb3da8b] {
  display: block;
  font-size: 0.9375rem;
  color: #f87171;
  margin-bottom: 0.25rem;
}
.warning-callout p[data-v-7bb3da8b] {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  margin: 0;
}

/* Turn Flow Section */
.turn-flow[data-v-7bb3da8b] {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.5rem 0;
}
.turn-step[data-v-7bb3da8b] {
  flex: 1;
  min-width: 140px;
  padding: 1rem;
  border-radius: 10px;
  border: 2px solid;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.turn-step.draw-step[data-v-7bb3da8b] {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
}
.turn-step.meld-step[data-v-7bb3da8b] {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
}
.turn-step.discard-step[data-v-7bb3da8b] {
  background: rgba(251, 146, 60, 0.1);
  border-color: rgba(251, 146, 60, 0.3);
}
.step-number[data-v-7bb3da8b] {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
}
.draw-step .step-number[data-v-7bb3da8b] {
  background: rgba(59, 130, 246, 0.3);
  color: #60a5fa;
}
.meld-step .step-number[data-v-7bb3da8b] {
  background: rgba(16, 185, 129, 0.3);
  color: #34d399;
}
.discard-step .step-number[data-v-7bb3da8b] {
  background: rgba(251, 146, 60, 0.3);
  color: #fb923c;
}
.step-content h5[data-v-7bb3da8b] {
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0;
}
.draw-step h5[data-v-7bb3da8b] {
  color: #60a5fa;
}
.meld-step h5[data-v-7bb3da8b] {
  color: #34d399;
}
.discard-step h5[data-v-7bb3da8b] {
  color: #fb923c;
}
.step-content p[data-v-7bb3da8b] {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
  margin: 0;
}
.step-alt[data-v-7bb3da8b] {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}
.step-optional[data-v-7bb3da8b] {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}
.step-required[data-v-7bb3da8b] {
  font-size: 0.75rem;
  color: #fb923c;
  font-weight: 500;
}
.turn-arrow[data-v-7bb3da8b] {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.3);
}
.turn-arrow .material-symbols-outlined[data-v-7bb3da8b] {
  font-size: 1.5rem;
}

/* Concepts Section */
.concept-grid[data-v-7bb3da8b] {
  display: flex;
  gap: 1rem;
}
.concept-card[data-v-7bb3da8b] {
  flex: 1;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
}
.concept-card.highlight[data-v-7bb3da8b] {
  background: rgba(232, 197, 71, 0.1);
  border-color: rgba(232, 197, 71, 0.3);
}
.concept-card h5[data-v-7bb3da8b] {
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 0.5rem;
}
.concept-card.highlight h5[data-v-7bb3da8b] {
  color: #e8c547;
}
.concept-card p[data-v-7bb3da8b] {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  margin: 0;
}
.canasta-types-mini[data-v-7bb3da8b] {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.75rem;
}
.clean-tag[data-v-7bb3da8b],
.dirty-tag[data-v-7bb3da8b] {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}
.clean-tag[data-v-7bb3da8b] {
  background: rgba(251, 146, 60, 0.2);
  color: #fb923c;
}
.dirty-tag[data-v-7bb3da8b] {
  background: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
}

/* Winning Section */
.win-requirements[data-v-7bb3da8b] {
  margin-bottom: 1rem;
}
.win-requirements h5[data-v-7bb3da8b] {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 0.75rem;
}
.requirements-list[data-v-7bb3da8b] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.req-item[data-v-7bb3da8b] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
}
.req-item .material-symbols-outlined[data-v-7bb3da8b] {
  font-size: 1.125rem;
  color: #10b981;
}
.win-goal[data-v-7bb3da8b] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(232, 197, 71, 0.15), rgba(212, 175, 55, 0.1));
  border: 1px solid rgba(232, 197, 71, 0.3);
  border-radius: 10px;
}
.win-goal .material-symbols-outlined[data-v-7bb3da8b] {
  font-size: 2rem;
  color: #e8c547;
}
.win-goal p[data-v-7bb3da8b] {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
.tab-nav[data-v-7bb3da8b] {
    justify-content: center;
}
.tab-button[data-v-7bb3da8b] {
    min-width: 100px;
}
.canasta-grid[data-v-7bb3da8b] {
    grid-template-columns: 1fr;
}
.basics-grid[data-v-7bb3da8b],
  .hands-grid[data-v-7bb3da8b],
  .concept-grid[data-v-7bb3da8b] {
    flex-direction: column;
}
.basic-item[data-v-7bb3da8b] {
    flex: 1 1 100%;
}
.turn-flow[data-v-7bb3da8b] {
    flex-direction: column;
}
.turn-arrow[data-v-7bb3da8b] {
    justify-content: center;
    transform: rotate(90deg);
}
}

.join-status-container[data-v-70b47b8b] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 0.5rem;
}

/* Room Code Display */
.room-code-display[data-v-70b47b8b] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.room-label[data-v-70b47b8b] {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.5);
}
.room-code[data-v-70b47b8b] {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 4px;
  color: #e8c547;
  font-family: 'Monaco', 'Consolas', monospace;
}

/* Progress Steps */
.progress-steps[data-v-70b47b8b] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 320px;
}
.step[data-v-70b47b8b] {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
}
.step-completed[data-v-70b47b8b] {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
}
.step-active[data-v-70b47b8b] {
  background: rgba(232, 197, 71, 0.1);
  border-color: rgba(232, 197, 71, 0.4);
  box-shadow: 0 0 20px rgba(232, 197, 71, 0.15);
}
.step-pending[data-v-70b47b8b] {
  opacity: 0.5;
}
.step-error[data-v-70b47b8b] {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.4);
}

/* Step Icon */
.step-icon[data-v-70b47b8b] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
}
.step-completed .step-icon[data-v-70b47b8b] {
  background: rgba(16, 185, 129, 0.2);
}
.step-active .step-icon[data-v-70b47b8b] {
  background: rgba(232, 197, 71, 0.2);
}
.step-error .step-icon[data-v-70b47b8b] {
  background: rgba(239, 68, 68, 0.2);
}
.step-icon .material-symbols-outlined[data-v-70b47b8b] {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.7);
}
.step-completed .step-icon .material-symbols-outlined[data-v-70b47b8b],
.step-icon .check-icon[data-v-70b47b8b] {
  color: #34d399;
}
.step-active .step-icon .material-symbols-outlined[data-v-70b47b8b] {
  color: #e8c547;
}
.step-error .step-icon .material-symbols-outlined[data-v-70b47b8b],
.step-icon .error-icon[data-v-70b47b8b] {
  color: #f87171;
}

/* Spinning animation for active step */
.spinning[data-v-70b47b8b] {
  animation: spin-70b47b8b 1.5s linear infinite;
}
@keyframes spin-70b47b8b {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}

/* Step Content */
.step-content[data-v-70b47b8b] {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
}
.step-label[data-v-70b47b8b] {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.step-completed .step-label[data-v-70b47b8b] {
  color: #34d399;
}
.step-active .step-label[data-v-70b47b8b] {
  color: #e8c547;
}
.step-error .step-label[data-v-70b47b8b] {
  color: #f87171;
}
.step-status[data-v-70b47b8b] {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Status Message */
.status-message[data-v-70b47b8b] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  width: 100%;
  max-width: 320px;
}
.status-message.error[data-v-70b47b8b] {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}
.status-icon[data-v-70b47b8b] {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.5);
}
.status-message.error .status-icon[data-v-70b47b8b] {
  color: #f87171;
}
.status-message span[data-v-70b47b8b]:last-child {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}
.status-message.error span[data-v-70b47b8b]:last-child {
  color: #fca5a5;
}

/* Cancel Button */
.btn-cancel[data-v-70b47b8b] {
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
  margin-top: 0.5rem;
}
.btn-cancel[data-v-70b47b8b]:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
}
.btn-cancel[data-v-70b47b8b]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-cancel .material-symbols-outlined[data-v-70b47b8b] {
  font-size: 1rem;
}

/* Responsive */
@media (max-width: 480px) {
.progress-steps[data-v-70b47b8b],
  .status-message[data-v-70b47b8b] {
    max-width: 100%;
}
.step[data-v-70b47b8b] {
    padding: 0.875rem 1rem;
}
}

.recovery-container[data-v-4be2ca82] {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0.5rem;
}

/* Status Message */
.status-message[data-v-4be2ca82] {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(34, 197, 94, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(34, 197, 94, 0.2);
}
.status-icon[data-v-4be2ca82] {
  font-size: 2rem;
  color: #22c55e;
}
.status-message p[data-v-4be2ca82] {
  margin: 0;
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

/* Section Title */
.section-title[data-v-4be2ca82] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 1rem 0;
}
.section-title .material-symbols-outlined[data-v-4be2ca82] {
  font-size: 1.25rem;
  color: #fbbf24;
}

/* Missing Players */
.missing-players[data-v-4be2ca82] {
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.players-list[data-v-4be2ca82] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.player-item[data-v-4be2ca82] {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.player-avatar[data-v-4be2ca82] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(251, 191, 36, 0.15);
  flex-shrink: 0;
}
.player-avatar .material-symbols-outlined[data-v-4be2ca82] {
  font-size: 1.5rem;
  color: #fbbf24;
}
.player-details[data-v-4be2ca82] {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1;
}
.player-name[data-v-4be2ca82] {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}
.player-meta[data-v-4be2ca82] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.seat-badge[data-v-4be2ca82] {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}
.seat-badge .material-symbols-outlined[data-v-4be2ca82] {
  font-size: 0.875rem;
}
.team-badge[data-v-4be2ca82] {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}
.team-badge.team-a[data-v-4be2ca82] {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}
.team-badge.team-b[data-v-4be2ca82] {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

/* No Missing Players */
.no-missing[data-v-4be2ca82] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem;
  background: rgba(34, 197, 94, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(34, 197, 94, 0.2);
}
.no-missing .material-symbols-outlined[data-v-4be2ca82] {
  font-size: 1.5rem;
  color: #22c55e;
}
.no-missing p[data-v-4be2ca82] {
  margin: 0;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
}

/* Action Section */
.action-section[data-v-4be2ca82] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.action-prompt[data-v-4be2ca82] {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
}
.recovery-actions[data-v-4be2ca82] {
  display: flex;
  gap: 1rem;
}
.btn-wait[data-v-4be2ca82],
.btn-replace[data-v-4be2ca82] {
  flex: 1;
  padding: 0.875rem 1.25rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
}
.btn-wait[data-v-4be2ca82] {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.btn-wait[data-v-4be2ca82]:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}
.btn-replace[data-v-4be2ca82] {
  background: linear-gradient(135deg, #e8c547 0%, #d4af37 100%);
  color: #0d1f2d;
  box-shadow: 0 4px 12px rgba(232, 197, 71, 0.3);
}
.btn-replace[data-v-4be2ca82]:hover {
  background: linear-gradient(135deg, #f0d060 0%, #e0bf47 100%);
  box-shadow: 0 6px 16px rgba(232, 197, 71, 0.4);
  transform: translateY(-2px);
}
.btn-wait[data-v-4be2ca82]:active,
.btn-replace[data-v-4be2ca82]:active {
  transform: translateY(0);
}
.btn-wait .material-symbols-outlined[data-v-4be2ca82],
.btn-replace .material-symbols-outlined[data-v-4be2ca82] {
  font-size: 1.25rem;
}

/* Waiting Section */
.waiting-section[data-v-4be2ca82] {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.waiting-indicator[data-v-4be2ca82] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
}
.spinning[data-v-4be2ca82] {
  animation: spin-4be2ca82 1.5s linear infinite;
  color: #e8c547;
}
@keyframes spin-4be2ca82 {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}

/* Continue Section */
.continue-section[data-v-4be2ca82] {
  display: flex;
  justify-content: center;
}
.btn-continue[data-v-4be2ca82] {
  padding: 1rem 2rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}
.btn-continue[data-v-4be2ca82]:hover {
  background: linear-gradient(135deg, #2dd468 0%, #1eb850 100%);
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4);
  transform: translateY(-2px);
}
.btn-continue[data-v-4be2ca82]:active {
  transform: translateY(0);
}
.btn-continue .material-symbols-outlined[data-v-4be2ca82] {
  font-size: 1.5rem;
}

/* Help Text */
.help-text[data-v-4be2ca82] {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  margin: 0;
  font-style: italic;
}

/* Responsive */
@media (max-width: 640px) {
.recovery-actions[data-v-4be2ca82] {
    flex-direction: column;
}
.player-item[data-v-4be2ca82] {
    flex-direction: column;
    text-align: center;
}
.player-details[data-v-4be2ca82] {
    align-items: center;
}
.player-meta[data-v-4be2ca82] {
    justify-content: center;
}
}

.join-request-container[data-v-f34a2c27] {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Player Info */
.player-info[data-v-f34a2c27] {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
}
.player-avatar[data-v-f34a2c27] {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(232, 197, 71, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.avatar-image[data-v-f34a2c27] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-initials[data-v-f34a2c27] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e8c547 0%, #d4af37 100%);
  color: #0d1f2d;
  font-size: 1.75rem;
  font-weight: 700;
}
.player-details[data-v-f34a2c27] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.player-name[data-v-f34a2c27] {
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}
.player-username[data-v-f34a2c27] {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  font-style: italic;
}
.request-message[data-v-f34a2c27] {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0.5rem 0 0;
}

/* Actions */
.request-actions[data-v-f34a2c27] {
  display: flex;
  gap: 1rem;
}
.btn-approve[data-v-f34a2c27],
.btn-deny[data-v-f34a2c27] {
  flex: 1;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
}
.btn-approve[data-v-f34a2c27] {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.btn-approve[data-v-f34a2c27]:hover:not(:disabled) {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
  transform: translateY(-2px);
}
.btn-approve[data-v-f34a2c27]:active:not(:disabled) {
  transform: translateY(0);
}
.btn-approve[data-v-f34a2c27]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-deny[data-v-f34a2c27] {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.btn-deny[data-v-f34a2c27]:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}
.btn-deny[data-v-f34a2c27]:active:not(:disabled) {
  background: rgba(239, 68, 68, 0.1);
}
.btn-deny[data-v-f34a2c27]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.material-symbols-outlined[data-v-f34a2c27] {
  font-size: 1.25rem;
}
.loading-spinner[data-v-f34a2c27] {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin-f34a2c27 0.6s linear infinite;
}
@keyframes spin-f34a2c27 {
to {
    transform: rotate(360deg);
}
}

/* Responsive */
@media (max-width: 640px) {
.player-info[data-v-f34a2c27] {
    flex-direction: column;
    text-align: center;
}
.request-actions[data-v-f34a2c27] {
    flex-direction: column-reverse;
}
}

.rule-violation-container[data-v-03062626] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

/* Error Icon */
.error-icon[data-v-03062626] {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse-error-03062626 2s ease-in-out infinite;
}
.error-icon .material-symbols-outlined[data-v-03062626] {
  font-size: 3rem;
  color: #f87171;
}
@keyframes pulse-error-03062626 {
0%,
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
}
50% {
    box-shadow: 0 0 0 20px rgba(239, 68, 68, 0);
}
}

/* Error Message */
.error-message[data-v-03062626] {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.6;
  margin: 0;
  max-width: 450px;
}

/* Tips Section */
.tips-section[data-v-03062626] {
  width: 100%;
  background: rgba(232, 197, 71, 0.05);
  border: 1px solid rgba(232, 197, 71, 0.2);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: left;
}
.tips-title[data-v-03062626] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #e8c547;
  margin: 0 0 1rem;
}
.tips-title .material-symbols-outlined[data-v-03062626] {
  font-size: 1.25rem;
}
.tips-list[data-v-03062626] {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.tip-item[data-v-03062626] {
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}
.tip-item[data-v-03062626]::before {
  content: '→';
  position: absolute;
  left: 0;
  color: #e8c547;
  font-weight: 600;
}

/* Common Rules */
.common-rules[data-v-03062626] {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: left;
}
.rules-title[data-v-03062626] {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 1rem;
}
.rules-list[data-v-03062626] {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.rules-list li[data-v-03062626] {
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}
.rules-list li[data-v-03062626]::before {
  content: '•';
  position: absolute;
  left: 0.5rem;
  color: rgba(232, 197, 71, 0.6);
  font-weight: 600;
}

/* Action Button */
.btn-understand[data-v-03062626] {
  padding: 0.875rem 2rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  background: linear-gradient(135deg, #e8c547 0%, #d4af37 100%);
  color: #0d1f2d;
  box-shadow: 0 4px 12px rgba(232, 197, 71, 0.3);
  margin-top: 0.5rem;
}
.btn-understand[data-v-03062626]:hover {
  background: linear-gradient(135deg, #f0d060 0%, #e0bf47 100%);
  box-shadow: 0 6px 16px rgba(232, 197, 71, 0.4);
  transform: translateY(-2px);
}
.btn-understand[data-v-03062626]:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(232, 197, 71, 0.3);
}
.btn-understand .material-symbols-outlined[data-v-03062626] {
  font-size: 1.25rem;
}

/* Responsive */
@media (max-width: 640px) {
.error-icon[data-v-03062626] {
    width: 64px;
    height: 64px;
}
.error-icon .material-symbols-outlined[data-v-03062626] {
    font-size: 2.5rem;
}
.error-message[data-v-03062626] {
    font-size: 1rem;
}
.tips-section[data-v-03062626],
  .common-rules[data-v-03062626] {
    padding: 1.25rem;
}
}

.seat-selection-container[data-v-021fc077] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 0.5rem;
}

/* Selection Prompt */
.selection-prompt[data-v-021fc077] {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  margin: 0;
}

/* Seats Grid */
.seats-grid[data-v-021fc077] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  width: 100%;
  max-width: 500px;
}

/* Seat Button */
.seat-button[data-v-021fc077] {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: all 0.2s;
}
.seat-button[data-v-021fc077]:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(232, 197, 71, 0.4);
  transform: translateY(-2px);
}
.seat-button[data-v-021fc077]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.seat-button.seat-selected[data-v-021fc077] {
  background: linear-gradient(135deg, rgba(232, 197, 71, 0.2), rgba(212, 175, 55, 0.2));
  border-color: #e8c547;
  box-shadow: 0 0 20px rgba(232, 197, 71, 0.3);
}

/* Bot seats - highlight as selectable */
.seat-button.seat-bot[data-v-021fc077] {
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.1);
}
.seat-button.seat-bot[data-v-021fc077]:hover:not(:disabled) {
  border-color: rgba(16, 185, 129, 0.6);
  background: rgba(16, 185, 129, 0.2);
}

/* Human seats - show as unavailable */
.seat-button.seat-human[data-v-021fc077] {
  border-color: rgba(239, 68, 68, 0.2);
  background: rgba(239, 68, 68, 0.05);
}

/* Seat Icon */
.seat-icon[data-v-021fc077] {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.seat-icon.team-a[data-v-021fc077] {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.3));
}
.seat-icon.team-a .material-symbols-outlined[data-v-021fc077] {
  color: #60a5fa;
}
.seat-icon.team-b[data-v-021fc077] {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(220, 38, 38, 0.3));
}
.seat-icon.team-b .material-symbols-outlined[data-v-021fc077] {
  color: #f87171;
}
.seat-icon .material-symbols-outlined[data-v-021fc077] {
  font-size: 1.75rem;
}

/* Seat Info */
.seat-info[data-v-021fc077] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  flex: 1;
}
.seat-label[data-v-021fc077] {
  font-size: 1.125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}
.seat-team[data-v-021fc077] {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}
.seat-status[data-v-021fc077] {
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  margin-top: 0.25rem;
}
.seat-status.bot[data-v-021fc077] {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}
.seat-status.human[data-v-021fc077] {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}
.seat-status.empty[data-v-021fc077] {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}

/* Player assign info */
.player-assign-info[data-v-021fc077] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: rgba(232, 197, 71, 0.1);
  border: 1px solid rgba(232, 197, 71, 0.3);
  border-radius: 8px;
}
.assign-label[data-v-021fc077] {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}
.assign-name[data-v-021fc077] {
  font-size: 1rem;
  font-weight: 600;
  color: #e8c547;
}

/* Confirm Button */
.btn-confirm[data-v-021fc077] {
  padding: 0.875rem 2rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  background: linear-gradient(135deg, #e8c547 0%, #d4af37 100%);
  color: #0d1f2d;
  box-shadow: 0 4px 12px rgba(232, 197, 71, 0.3);
  margin-top: 0.5rem;
}
.btn-confirm[data-v-021fc077]:hover:not(:disabled) {
  background: linear-gradient(135deg, #f0d060 0%, #e0bf47 100%);
  box-shadow: 0 6px 16px rgba(232, 197, 71, 0.4);
  transform: translateY(-2px);
}
.btn-confirm[data-v-021fc077]:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(232, 197, 71, 0.3);
}
.btn-confirm[data-v-021fc077]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  box-shadow: none;
}
.btn-confirm .material-symbols-outlined[data-v-021fc077] {
  font-size: 1.25rem;
}

/* Responsive */
@media (max-width: 640px) {
.seats-grid[data-v-021fc077] {
    grid-template-columns: 1fr;
}
}

.reconnection-container[data-v-7fc95a61] {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0.5rem;
}

/* Player Info */
.player-info[data-v-7fc95a61] {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.player-avatar[data-v-7fc95a61] {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 3px solid rgba(232, 197, 71, 0.3);
}
.avatar-image[data-v-7fc95a61] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-initials[data-v-7fc95a61] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e8c547, #d4af37);
  color: #0d1f2d;
  font-size: 1.75rem;
  font-weight: 700;
}
.player-details[data-v-7fc95a61] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.player-name[data-v-7fc95a61] {
  font-size: 1.375rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}
.reconnection-message[data-v-7fc95a61] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}
.reconnection-message .material-symbols-outlined[data-v-7fc95a61] {
  font-size: 1.25rem;
  color: #e8c547;
  animation: rotate-7fc95a61 2s linear infinite;
}
@keyframes rotate-7fc95a61 {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
.seat-badge[data-v-7fc95a61] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  width: fit-content;
}
.seat-badge .material-symbols-outlined[data-v-7fc95a61] {
  font-size: 1rem;
}
.team-indicator[data-v-7fc95a61] {
  padding: 0.125rem 0.5rem;
  background: rgba(232, 197, 71, 0.2);
  border-radius: 4px;
  font-size: 0.75rem;
  color: #e8c547;
  margin-left: 0.25rem;
}

/* Disconnect Info */
.disconnect-info[data-v-7fc95a61] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.info-item[data-v-7fc95a61] {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.8);
}
.info-item .material-symbols-outlined[data-v-7fc95a61] {
  font-size: 1.125rem;
  color: rgba(232, 197, 71, 0.7);
}
.info-item.warning[data-v-7fc95a61] {
  color: rgba(251, 191, 36, 0.9);
}
.info-item.warning .material-symbols-outlined[data-v-7fc95a61] {
  color: #fbbf24;
}

/* Action Buttons */
.reconnection-actions[data-v-7fc95a61] {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}
.btn-deny[data-v-7fc95a61],
.btn-approve[data-v-7fc95a61] {
  flex: 1;
  padding: 0.875rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
}
.btn-deny[data-v-7fc95a61] {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.btn-deny[data-v-7fc95a61]:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.5);
  transform: translateY(-2px);
}
.btn-approve[data-v-7fc95a61] {
  background: linear-gradient(135deg, #e8c547 0%, #d4af37 100%);
  color: #0d1f2d;
  box-shadow: 0 4px 12px rgba(232, 197, 71, 0.3);
}
.btn-approve[data-v-7fc95a61]:hover {
  background: linear-gradient(135deg, #f0d060 0%, #e0bf47 100%);
  box-shadow: 0 6px 16px rgba(232, 197, 71, 0.4);
  transform: translateY(-2px);
}
.btn-approve[data-v-7fc95a61]:active,
.btn-deny[data-v-7fc95a61]:active {
  transform: translateY(0);
}
.btn-deny .material-symbols-outlined[data-v-7fc95a61],
.btn-approve .material-symbols-outlined[data-v-7fc95a61] {
  font-size: 1.25rem;
}

/* Help Text */
.help-text[data-v-7fc95a61] {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  margin: 0;
  font-style: italic;
}

/* Responsive */
@media (max-width: 640px) {
.player-info[data-v-7fc95a61] {
    flex-direction: column;
    text-align: center;
}
.player-details[data-v-7fc95a61] {
    align-items: center;
}
.seat-badge[data-v-7fc95a61] {
    margin: 0 auto;
}
.reconnection-actions[data-v-7fc95a61] {
    flex-direction: column;
}
}

.player-left-container[data-v-352c6fa2] {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0.5rem;
}

/* Player Info */
.player-info[data-v-352c6fa2] {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.status-icon[data-v-352c6fa2] {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.status-icon.temporary[data-v-352c6fa2] {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.2));
}
.status-icon .material-symbols-outlined[data-v-352c6fa2] {
  font-size: 2rem;
  color: #f87171;
}
.status-icon.temporary .material-symbols-outlined[data-v-352c6fa2] {
  color: #fbbf24;
}
.player-details[data-v-352c6fa2] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.player-name[data-v-352c6fa2] {
  font-size: 1.25rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}
.status-message[data-v-352c6fa2] {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  margin: 0;
}
.seat-info[data-v-352c6fa2] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  width: fit-content;
  margin-top: 0.25rem;
}
.seat-info .material-symbols-outlined[data-v-352c6fa2] {
  font-size: 1rem;
}

/* Reconnect Timer */
.reconnect-timer[data-v-352c6fa2] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 12px;
}
.timer-header[data-v-352c6fa2] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fbbf24;
}
.timer-header .material-symbols-outlined[data-v-352c6fa2] {
  font-size: 1.125rem;
}
.timer-bar-container[data-v-352c6fa2] {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}
.timer-bar[data-v-352c6fa2] {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 4px;
  transition: width 1s linear;
}
.timer-text[data-v-352c6fa2] {
  font-size: 1.125rem;
  font-weight: 700;
  color: #fbbf24;
  text-align: center;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* Replacement Options */
.replacement-options[data-v-352c6fa2] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
.options-prompt[data-v-352c6fa2] {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  margin: 0;
}
.option-buttons[data-v-352c6fa2] {
  display: flex;
  gap: 0.75rem;
}
.btn-option[data-v-352c6fa2] {
  flex: 1;
  padding: 0.875rem 1rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
}
.btn-option[data-v-352c6fa2]:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(232, 197, 71, 0.4);
  transform: translateY(-2px);
}
.btn-option .material-symbols-outlined[data-v-352c6fa2] {
  font-size: 2rem;
  color: #e8c547;
}

/* Close Button */
.btn-close[data-v-352c6fa2] {
  padding: 0.875rem 2rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  background: linear-gradient(135deg, #e8c547 0%, #d4af37 100%);
  color: #0d1f2d;
  box-shadow: 0 4px 12px rgba(232, 197, 71, 0.3);
  margin-top: 0.5rem;
}
.btn-close[data-v-352c6fa2]:hover {
  background: linear-gradient(135deg, #f0d060 0%, #e0bf47 100%);
  box-shadow: 0 6px 16px rgba(232, 197, 71, 0.4);
  transform: translateY(-2px);
}
.btn-close[data-v-352c6fa2]:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(232, 197, 71, 0.3);
}

/* Responsive */
@media (max-width: 640px) {
.player-info[data-v-352c6fa2] {
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.player-details[data-v-352c6fa2] {
    align-items: center;
}
.seat-info[data-v-352c6fa2] {
    margin: 0 auto;
}
.option-buttons[data-v-352c6fa2] {
    flex-direction: column;
}
}

.go-out-container[data-v-da4da9fd] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 0.5rem;
}

/* Warning Icon */
.warning-icon[data-v-da4da9fd] {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse-warning-da4da9fd 2s ease-in-out infinite;
}
.warning-icon .material-symbols-outlined[data-v-da4da9fd] {
  font-size: 3rem;
  color: #fbbf24;
}
@keyframes pulse-warning-da4da9fd {
0%,
  100% {
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4);
}
50% {
    box-shadow: 0 0 0 20px rgba(251, 191, 36, 0);
}
}

/* Main Message */
.main-message[data-v-da4da9fd] {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  line-height: 1.6;
  margin: 0;
  max-width: 500px;
}

/* Requirements Checklist */
.requirements-checklist[data-v-da4da9fd] {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1.5rem;
}
.checklist-title[data-v-da4da9fd] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 1.25rem;
}
.checklist-title .material-symbols-outlined[data-v-da4da9fd] {
  font-size: 1.25rem;
  color: #e8c547;
}
.requirement-item[data-v-da4da9fd] {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  margin-bottom: 0.75rem;
  transition: all 0.2s;
}
.requirement-item[data-v-da4da9fd]:last-child {
  margin-bottom: 0;
}
.requirement-item.met[data-v-da4da9fd] {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
}
.checkbox-icon[data-v-da4da9fd] {
  font-size: 1.75rem;
  flex-shrink: 0;
  color: rgba(239, 68, 68, 0.7);
}
.requirement-item.met .checkbox-icon[data-v-da4da9fd] {
  color: #10b981;
}
.requirement-text[data-v-da4da9fd] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}
.requirement-label[data-v-da4da9fd] {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.requirement-status[data-v-da4da9fd] {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
}
.requirement-item.met .requirement-status[data-v-da4da9fd] {
  color: rgba(16, 185, 129, 0.8);
}

/* Warnings Section */
.warnings-section[data-v-da4da9fd] {
  width: 100%;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 12px;
  padding: 1rem;
}
.warning-item[data-v-da4da9fd] {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: #f87171;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.warning-item .material-symbols-outlined[data-v-da4da9fd] {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* Confirmation Info */
.confirmation-info[data-v-da4da9fd] {
  width: 100%;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 12px;
  padding: 1rem;
}
.info-text[data-v-da4da9fd] {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: rgba(147, 197, 253, 0.9);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}
.info-text .material-symbols-outlined[data-v-da4da9fd] {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* Action Buttons */
.confirmation-actions[data-v-da4da9fd] {
  display: flex;
  gap: 1rem;
  width: 100%;
  margin-top: 0.5rem;
}
.btn-cancel[data-v-da4da9fd],
.btn-confirm[data-v-da4da9fd] {
  flex: 1;
  padding: 0.875rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
}
.btn-cancel[data-v-da4da9fd] {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-cancel[data-v-da4da9fd]:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}
.btn-confirm[data-v-da4da9fd] {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.btn-confirm[data-v-da4da9fd]:hover:not(:disabled) {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
  transform: translateY(-2px);
}
.btn-confirm[data-v-da4da9fd]:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.btn-confirm[data-v-da4da9fd]:disabled,
.btn-confirm.disabled[data-v-da4da9fd] {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.6;
}
.btn-cancel .material-symbols-outlined[data-v-da4da9fd],
.btn-confirm .material-symbols-outlined[data-v-da4da9fd] {
  font-size: 1.25rem;
}

/* Responsive */
@media (max-width: 640px) {
.warning-icon[data-v-da4da9fd] {
    width: 64px;
    height: 64px;
}
.warning-icon .material-symbols-outlined[data-v-da4da9fd] {
    font-size: 2.5rem;
}
.main-message[data-v-da4da9fd] {
    font-size: 0.9375rem;
}
.requirements-checklist[data-v-da4da9fd] {
    padding: 1.25rem;
}
.requirement-item[data-v-da4da9fd] {
    padding: 0.875rem;
}
.confirmation-actions[data-v-da4da9fd] {
    flex-direction: column;
}
}

.move-player-container[data-v-8d33ed61] {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0.5rem;
}

/* Player Info */
.player-info[data-v-8d33ed61] {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.player-avatar[data-v-8d33ed61] {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 3px solid rgba(232, 197, 71, 0.3);
}
.avatar-image[data-v-8d33ed61] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-initials[data-v-8d33ed61] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e8c547, #d4af37);
  color: #0d1f2d;
  font-size: 1.5rem;
  font-weight: 700;
}
.player-details[data-v-8d33ed61] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.player-name[data-v-8d33ed61] {
  font-size: 1.25rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}
.current-seat[data-v-8d33ed61] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.8);
}
.current-seat .material-symbols-outlined[data-v-8d33ed61] {
  font-size: 1.125rem;
}
.team-badge[data-v-8d33ed61] {
  padding: 0.25rem 0.625rem;
  background: rgba(232, 197, 71, 0.2);
  border-radius: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #e8c547;
}

/* Seat Selection */
.seat-selection[data-v-8d33ed61] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.selection-prompt[data-v-8d33ed61] {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  margin: 0;
}
.seats-grid[data-v-8d33ed61] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
.seat-option[data-v-8d33ed61] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: all 0.2s;
}
.seat-option[data-v-8d33ed61]:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(232, 197, 71, 0.4);
  transform: translateY(-2px);
}
.seat-option.selected[data-v-8d33ed61] {
  background: linear-gradient(135deg, rgba(232, 197, 71, 0.2), rgba(212, 175, 55, 0.2));
  border-color: #e8c547;
  box-shadow: 0 0 20px rgba(232, 197, 71, 0.3);
}
.seat-number[data-v-8d33ed61] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
}
.seat-number .material-symbols-outlined[data-v-8d33ed61] {
  font-size: 1.5rem;
  color: #e8c547;
}
.seat-team[data-v-8d33ed61] {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
}

/* Warning Message */
.warning-message[data-v-8d33ed61] {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 8px;
  font-size: 0.875rem;
  color: rgba(251, 191, 36, 0.9);
  line-height: 1.5;
}
.warning-message .material-symbols-outlined[data-v-8d33ed61] {
  font-size: 1.125rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* Action Buttons */
.move-actions[data-v-8d33ed61] {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}
.btn-cancel[data-v-8d33ed61],
.btn-confirm[data-v-8d33ed61] {
  flex: 1;
  padding: 0.875rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
}
.btn-cancel[data-v-8d33ed61] {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-cancel[data-v-8d33ed61]:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}
.btn-confirm[data-v-8d33ed61] {
  background: linear-gradient(135deg, #e8c547 0%, #d4af37 100%);
  color: #0d1f2d;
  box-shadow: 0 4px 12px rgba(232, 197, 71, 0.3);
}
.btn-confirm[data-v-8d33ed61]:hover:not(:disabled) {
  background: linear-gradient(135deg, #f0d060 0%, #e0bf47 100%);
  box-shadow: 0 6px 16px rgba(232, 197, 71, 0.4);
  transform: translateY(-2px);
}
.btn-confirm[data-v-8d33ed61]:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(232, 197, 71, 0.3);
}
.btn-confirm[data-v-8d33ed61]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  box-shadow: none;
}
.btn-cancel .material-symbols-outlined[data-v-8d33ed61],
.btn-confirm .material-symbols-outlined[data-v-8d33ed61] {
  font-size: 1.25rem;
}

/* Responsive */
@media (max-width: 640px) {
.seats-grid[data-v-8d33ed61] {
    grid-template-columns: repeat(2, 1fr);
}
.move-actions[data-v-8d33ed61] {
    flex-direction: column;
}
}

.opening-requirements-container[data-v-a43b4314] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 0.5rem;
}

/* Info Icon */
.info-icon[data-v-a43b4314] {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
}
.info-icon .material-symbols-outlined[data-v-a43b4314] {
  font-size: 2.5rem;
  color: #60a5fa;
}

/* Main Message */
.main-message[data-v-a43b4314] {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  line-height: 1.6;
  margin: 0;
  max-width: 450px;
}

/* Requirements Table */
.requirements-table[data-v-a43b4314] {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1.5rem;
  overflow: hidden;
}
.table-title[data-v-a43b4314] {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 1.25rem;
  text-align: center;
}
.requirement-row[data-v-a43b4314] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  margin-bottom: 0.75rem;
  transition: all 0.2s;
}
.requirement-row[data-v-a43b4314]:last-child {
  margin-bottom: 0;
}
.requirement-row.current[data-v-a43b4314] {
  background: linear-gradient(135deg, rgba(232, 197, 71, 0.15), rgba(212, 175, 55, 0.15));
  border-color: rgba(232, 197, 71, 0.4);
  box-shadow: 0 0 15px rgba(232, 197, 71, 0.2);
}
.score-range[data-v-a43b4314] {
  display: flex;
  flex-direction: column;
}
.range-label[data-v-a43b4314] {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.requirement-row.current .range-label[data-v-a43b4314] {
  color: #e8c547;
}
.points-required[data-v-a43b4314] {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.points-value[data-v-a43b4314] {
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
}
.requirement-row.current .points-value[data-v-a43b4314] {
  color: #e8c547;
}
.points-label[data-v-a43b4314] {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Team Status */
.team-status[data-v-a43b4314] {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
.status-item[data-v-a43b4314] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9375rem;
}
.status-label[data-v-a43b4314] {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}
.status-value[data-v-a43b4314] {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 700;
  font-size: 1.125rem;
}
.status-item.highlight[data-v-a43b4314] {
  padding: 0.75rem;
  background: rgba(232, 197, 71, 0.15);
  border-radius: 8px;
  border: 1px solid rgba(232, 197, 71, 0.3);
}
.status-item.highlight .status-label[data-v-a43b4314],
.status-item.highlight .status-value[data-v-a43b4314] {
  color: #e8c547;
}

/* Tips Section */
.tips-section[data-v-a43b4314] {
  width: 100%;
  background: rgba(232, 197, 71, 0.05);
  border: 1px solid rgba(232, 197, 71, 0.2);
  border-radius: 12px;
  padding: 1.5rem;
}
.tips-title[data-v-a43b4314] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #e8c547;
  margin: 0 0 1rem;
}
.tips-title .material-symbols-outlined[data-v-a43b4314] {
  font-size: 1.25rem;
}
.tips-list[data-v-a43b4314] {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.tips-list li[data-v-a43b4314] {
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}
.tips-list li[data-v-a43b4314]::before {
  content: '→';
  position: absolute;
  left: 0;
  color: #e8c547;
  font-weight: 600;
}

/* Close Button */
.btn-close[data-v-a43b4314] {
  padding: 0.875rem 2rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  background: linear-gradient(135deg, #e8c547 0%, #d4af37 100%);
  color: #0d1f2d;
  box-shadow: 0 4px 12px rgba(232, 197, 71, 0.3);
  margin-top: 0.5rem;
}
.btn-close[data-v-a43b4314]:hover {
  background: linear-gradient(135deg, #f0d060 0%, #e0bf47 100%);
  box-shadow: 0 6px 16px rgba(232, 197, 71, 0.4);
  transform: translateY(-2px);
}
.btn-close[data-v-a43b4314]:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(232, 197, 71, 0.3);
}
.btn-close .material-symbols-outlined[data-v-a43b4314] {
  font-size: 1.25rem;
}

/* Responsive */
@media (max-width: 640px) {
.info-icon[data-v-a43b4314] {
    width: 56px;
    height: 56px;
}
.info-icon .material-symbols-outlined[data-v-a43b4314] {
    font-size: 2rem;
}
.main-message[data-v-a43b4314] {
    font-size: 0.9375rem;
}
.requirements-table[data-v-a43b4314] {
    padding: 1.25rem;
}
.requirement-row[data-v-a43b4314] {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}
.points-required[data-v-a43b4314] {
    align-items: flex-start;
}
}

.restart-approval-container[data-v-b5f0427c] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 0.5rem;
}

/* Icon */
.restart-icon[data-v-b5f0427c] {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
}
.restart-icon.warning[data-v-b5f0427c] {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.2));
  animation: pulse-warning-b5f0427c 2s ease-in-out infinite;
}
@keyframes pulse-warning-b5f0427c {
0%,
  100% {
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4);
}
50% {
    box-shadow: 0 0 0 20px rgba(251, 191, 36, 0);
}
}
.restart-icon .material-symbols-outlined[data-v-b5f0427c] {
  font-size: 3rem;
  color: #60a5fa;
}
.restart-icon.warning .material-symbols-outlined[data-v-b5f0427c] {
  color: #fbbf24;
}

/* Request Info */
.request-info[data-v-b5f0427c] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.player-info[data-v-b5f0427c] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.requester-avatar[data-v-b5f0427c],
.requester-initials[data-v-b5f0427c] {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid rgba(232, 197, 71, 0.3);
}
.requester-avatar[data-v-b5f0427c] {
  object-fit: cover;
}
.requester-initials[data-v-b5f0427c] {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e8c547, #d4af37);
  color: #0d1f2d;
  font-size: 1.5rem;
  font-weight: 700;
}
.requester-name[data-v-b5f0427c] {
  font-size: 1.25rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}
.request-message[data-v-b5f0427c] {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

/* Confirm Message */
.confirm-message[data-v-b5f0427c] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.main-text[data-v-b5f0427c] {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
  margin: 0;
}
.warning-text[data-v-b5f0427c] {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.875rem 1.125rem;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 8px;
  font-size: 0.9375rem;
  color: rgba(251, 191, 36, 0.9);
  line-height: 1.5;
  margin: 0;
  text-align: left;
}
.warning-text .material-symbols-outlined[data-v-b5f0427c] {
  font-size: 1.125rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* Impact Info */
.impact-info[data-v-b5f0427c] {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1.5rem;
}
.impact-title[data-v-b5f0427c] {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 1rem;
}
.impact-list[data-v-b5f0427c] {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.impact-list li[data-v-b5f0427c] {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}
.impact-list li .material-symbols-outlined[data-v-b5f0427c] {
  font-size: 1.25rem;
  color: rgba(232, 197, 71, 0.7);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* Action Buttons */
.restart-actions[data-v-b5f0427c] {
  display: flex;
  gap: 1rem;
  width: 100%;
  margin-top: 0.5rem;
}
.btn-cancel[data-v-b5f0427c],
.btn-confirm[data-v-b5f0427c] {
  flex: 1;
  padding: 0.875rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
}
.btn-cancel[data-v-b5f0427c] {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.btn-cancel[data-v-b5f0427c]:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.5);
  transform: translateY(-2px);
}
.btn-confirm[data-v-b5f0427c] {
  background: linear-gradient(135deg, #e8c547 0%, #d4af37 100%);
  color: #0d1f2d;
  box-shadow: 0 4px 12px rgba(232, 197, 71, 0.3);
}
.btn-confirm[data-v-b5f0427c]:hover {
  background: linear-gradient(135deg, #f0d060 0%, #e0bf47 100%);
  box-shadow: 0 6px 16px rgba(232, 197, 71, 0.4);
  transform: translateY(-2px);
}
.btn-confirm[data-v-b5f0427c]:active,
.btn-cancel[data-v-b5f0427c]:active {
  transform: translateY(0);
}
.btn-cancel .material-symbols-outlined[data-v-b5f0427c],
.btn-confirm .material-symbols-outlined[data-v-b5f0427c] {
  font-size: 1.25rem;
}

/* Responsive */
@media (max-width: 640px) {
.restart-icon[data-v-b5f0427c] {
    width: 64px;
    height: 64px;
}
.restart-icon .material-symbols-outlined[data-v-b5f0427c] {
    font-size: 2.5rem;
}
.restart-actions[data-v-b5f0427c] {
    flex-direction: column;
}
}

.spectator-list-container[data-v-fa5a83d5] {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0.5rem;
}

/* Empty State */
.empty-state[data-v-fa5a83d5] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem 1rem;
  text-align: center;
}
.empty-icon[data-v-fa5a83d5] {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}
.empty-icon .material-symbols-outlined[data-v-fa5a83d5] {
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.3);
}
.empty-message[data-v-fa5a83d5] {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* Spectators List */
.spectators-list[data-v-fa5a83d5] {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.list-count[data-v-fa5a83d5] {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  margin: 0;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}
.spectator-grid[data-v-fa5a83d5] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 0.5rem;
}

/* Custom Scrollbar */
.spectator-grid[data-v-fa5a83d5]::-webkit-scrollbar {
  width: 6px;
}
.spectator-grid[data-v-fa5a83d5]::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}
.spectator-grid[data-v-fa5a83d5]::-webkit-scrollbar-thumb {
  background: rgba(232, 197, 71, 0.3);
  border-radius: 3px;
}
.spectator-grid[data-v-fa5a83d5]::-webkit-scrollbar-thumb:hover {
  background: rgba(232, 197, 71, 0.5);
}

/* Spectator Card */
.spectator-card[data-v-fa5a83d5] {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: all 0.2s;
}
.spectator-card[data-v-fa5a83d5]:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}
.spectator-avatar[data-v-fa5a83d5] {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.2);
}
.avatar-image[data-v-fa5a83d5] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-initials[data-v-fa5a83d5] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(232, 197, 71, 0.6), rgba(212, 175, 55, 0.6));
  color: #0d1f2d;
  font-size: 1.125rem;
  font-weight: 700;
}
.spectator-info[data-v-fa5a83d5] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}
.spectator-name[data-v-fa5a83d5] {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}
.spectator-meta[data-v-fa5a83d5] {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}
.spectator-meta .material-symbols-outlined[data-v-fa5a83d5] {
  font-size: 0.875rem;
}
.btn-admit[data-v-fa5a83d5] {
  padding: 0.625rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  border: none;
  background: linear-gradient(135deg, #e8c547 0%, #d4af37 100%);
  color: #0d1f2d;
  box-shadow: 0 2px 8px rgba(232, 197, 71, 0.2);
  flex-shrink: 0;
}
.btn-admit[data-v-fa5a83d5]:hover {
  background: linear-gradient(135deg, #f0d060 0%, #e0bf47 100%);
  box-shadow: 0 4px 12px rgba(232, 197, 71, 0.3);
  transform: translateY(-1px);
}
.btn-admit[data-v-fa5a83d5]:active {
  transform: translateY(0);
}
.btn-admit .material-symbols-outlined[data-v-fa5a83d5] {
  font-size: 1.125rem;
}

/* Info Footer */
.info-footer[data-v-fa5a83d5] {
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.info-message[data-v-fa5a83d5] {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.875rem;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  font-size: 0.875rem;
  color: rgba(147, 197, 253, 0.9);
  line-height: 1.5;
}
.info-message .material-symbols-outlined[data-v-fa5a83d5] {
  font-size: 1.125rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* Close Button */
.btn-close[data-v-fa5a83d5] {
  padding: 0.875rem 2rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-close[data-v-fa5a83d5]:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}
.btn-close[data-v-fa5a83d5]:active {
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 640px) {
.spectator-card[data-v-fa5a83d5] {
    flex-direction: column;
    text-align: center;
}
.spectator-info[data-v-fa5a83d5] {
    align-items: center;
}
.btn-admit[data-v-fa5a83d5] {
    width: 100%;
    justify-content: center;
}
}

.idle-warning-container[data-v-ed450507] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 0.5rem;
}

/* Warning Icon */
.warning-icon[data-v-ed450507] {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse-warning-ed450507 2s ease-in-out infinite;
}
.warning-icon .material-symbols-outlined[data-v-ed450507] {
  font-size: 3rem;
  color: #fbbf24;
}
@keyframes pulse-warning-ed450507 {
0%,
  100% {
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4);
}
50% {
    box-shadow: 0 0 0 20px rgba(251, 191, 36, 0);
}
}

/* Warning Message */
.warning-message[data-v-ed450507] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}
.message-title[data-v-ed450507] {
  font-size: 1.375rem;
  font-weight: 700;
  color: #fbbf24;
  margin: 0;
}
.message-text[data-v-ed450507] {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  margin: 0;
  max-width: 400px;
}

/* Countdown Section */
.countdown-section[data-v-ed450507] {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(251, 191, 36, 0.1);
  border: 2px solid rgba(251, 191, 36, 0.3);
  border-radius: 12px;
}
.countdown-display[data-v-ed450507] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.countdown-label[data-v-ed450507] {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.countdown-timer[data-v-ed450507] {
  font-size: 3rem;
  font-weight: 700;
  color: #fbbf24;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.countdown-bar-container[data-v-ed450507] {
  width: 100%;
  height: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden;
}
.countdown-bar[data-v-ed450507] {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 6px;
  transition: width 1s linear;
}
.countdown-bar.critical[data-v-ed450507] {
  background: linear-gradient(90deg, #ef4444, #dc2626);
  animation: blink-ed450507 0.5s ease-in-out infinite;
}
@keyframes blink-ed450507 {
0%,
  100% {
    opacity: 1;
}
50% {
    opacity: 0.5;
}
}

/* Action Info */
.action-info[data-v-ed450507] {
  width: 100%;
}
.info-item[data-v-ed450507] {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 8px;
  font-size: 0.9375rem;
  color: rgba(147, 197, 253, 0.9);
  line-height: 1.5;
}
.info-item .material-symbols-outlined[data-v-ed450507] {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* Acknowledge Button */
.btn-acknowledge[data-v-ed450507] {
  padding: 1rem 2rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  margin-top: 0.5rem;
}
.btn-acknowledge[data-v-ed450507]:hover {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
  transform: translateY(-2px);
}
.btn-acknowledge[data-v-ed450507]:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.btn-acknowledge .material-symbols-outlined[data-v-ed450507] {
  font-size: 1.25rem;
}

/* Responsive */
@media (max-width: 640px) {
.warning-icon[data-v-ed450507] {
    width: 64px;
    height: 64px;
}
.warning-icon .material-symbols-outlined[data-v-ed450507] {
    font-size: 2.5rem;
}
.message-title[data-v-ed450507] {
    font-size: 1.125rem;
}
.message-text[data-v-ed450507] {
    font-size: 0.9375rem;
}
.countdown-timer[data-v-ed450507] {
    font-size: 2.5rem;
}
.countdown-section[data-v-ed450507] {
    padding: 1.25rem;
}
}

.kick-player-container[data-v-b2e128d6] {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0.5rem;
}

/* Warning Icon */
.warning-icon[data-v-b2e128d6] {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  animation: pulse-danger-b2e128d6 2s ease-in-out infinite;
}
.warning-icon .material-symbols-outlined[data-v-b2e128d6] {
  font-size: 3rem;
  color: #f87171;
}
@keyframes pulse-danger-b2e128d6 {
0%,
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
}
50% {
    box-shadow: 0 0 0 20px rgba(239, 68, 68, 0);
}
}

/* Player Info */
.player-info[data-v-b2e128d6] {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.player-avatar[data-v-b2e128d6] {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 3px solid rgba(239, 68, 68, 0.3);
}
.avatar-image[data-v-b2e128d6] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-initials[data-v-b2e128d6] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
}
.player-details[data-v-b2e128d6] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.player-name[data-v-b2e128d6] {
  font-size: 1.25rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}
.player-seat[data-v-b2e128d6] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.8);
}
.player-seat .material-symbols-outlined[data-v-b2e128d6] {
  font-size: 1.125rem;
}
.team-badge[data-v-b2e128d6] {
  padding: 0.25rem 0.625rem;
  background: rgba(239, 68, 68, 0.2);
  border-radius: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #f87171;
}

/* Confirmation Message */
.confirmation-message[data-v-b2e128d6] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}
.main-text[data-v-b2e128d6] {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
  margin: 0;
}
.warning-text[data-v-b2e128d6] {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.875rem 1.125rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  font-size: 0.9375rem;
  color: rgba(248, 113, 113, 0.9);
  line-height: 1.5;
  text-align: left;
}
.warning-text .material-symbols-outlined[data-v-b2e128d6] {
  font-size: 1.125rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* No Players Warning */
.no-players-warning[data-v-b2e128d6] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  padding: 1rem 0;
}
.no-players-warning .sub-text[data-v-b2e128d6] {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}
.btn-close-only[data-v-b2e128d6] {
  margin-top: 1rem;
  padding: 0.75rem 2rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-close-only[data-v-b2e128d6]:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Player Selection */
.player-selection[data-v-b2e128d6] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
.selection-prompt[data-v-b2e128d6] {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  text-align: center;
}
.player-list[data-v-b2e128d6] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.player-select-item[data-v-b2e128d6] {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  text-align: left;
}
.player-select-item[data-v-b2e128d6]:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}
.player-select-item .player-avatar[data-v-b2e128d6] {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.player-select-item .player-details[data-v-b2e128d6] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.player-select-item .player-name[data-v-b2e128d6] {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}
.player-select-item .player-seat[data-v-b2e128d6] {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
}
.select-arrow[data-v-b2e128d6] {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.2s;
}
.player-select-item:hover .select-arrow[data-v-b2e128d6] {
  color: #f87171;
  transform: translateX(4px);
}
.btn-cancel-full[data-v-b2e128d6] {
  margin-top: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 100%;
}
.btn-cancel-full[data-v-b2e128d6]:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Action Buttons */
.kick-actions[data-v-b2e128d6] {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}
.btn-cancel[data-v-b2e128d6],
.btn-kick[data-v-b2e128d6] {
  flex: 1;
  padding: 0.875rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
}
.btn-cancel[data-v-b2e128d6] {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-cancel[data-v-b2e128d6]:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}
.btn-kick[data-v-b2e128d6] {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.btn-kick[data-v-b2e128d6]:hover {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
  transform: translateY(-2px);
}
.btn-kick[data-v-b2e128d6]:active,
.btn-cancel[data-v-b2e128d6]:active {
  transform: translateY(0);
}
.btn-cancel .material-symbols-outlined[data-v-b2e128d6],
.btn-kick .material-symbols-outlined[data-v-b2e128d6] {
  font-size: 1.25rem;
}

/* Responsive */
@media (max-width: 640px) {
.warning-icon[data-v-b2e128d6] {
    width: 64px;
    height: 64px;
}
.warning-icon .material-symbols-outlined[data-v-b2e128d6] {
    font-size: 2.5rem;
}
.player-info[data-v-b2e128d6] {
    flex-direction: column;
    text-align: center;
}
.player-details[data-v-b2e128d6] {
    align-items: center;
}
.kick-actions[data-v-b2e128d6] {
    flex-direction: column;
}
}

.creator-action-request-container[data-v-f7547721] {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0.5rem;
}

/* Requester Info */
.requester-info[data-v-f7547721] {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.requester-avatar[data-v-f7547721] {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 3px solid rgba(232, 197, 71, 0.3);
}
.avatar-image[data-v-f7547721] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-initials[data-v-f7547721] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e8c547, #d4af37);
  color: #0d1f2d;
  font-size: 1.5rem;
  font-weight: 700;
}
.requester-details[data-v-f7547721] {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1;
}
.requester-name[data-v-f7547721] {
  font-size: 1.25rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}
.request-description[data-v-f7547721] {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* Action Details */
.action-details[data-v-f7547721] {
  display: flex;
  gap: 1.25rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(232, 197, 71, 0.1), rgba(212, 175, 55, 0.1));
  border: 1px solid rgba(232, 197, 71, 0.3);
  border-radius: 12px;
}
.action-icon[data-v-f7547721] {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(232, 197, 71, 0.2), rgba(212, 175, 55, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.action-icon .material-symbols-outlined[data-v-f7547721] {
  font-size: 2rem;
  color: #e8c547;
}
.action-info[data-v-f7547721] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.action-title[data-v-f7547721] {
  font-size: 1.25rem;
  font-weight: 700;
  color: #e8c547;
  margin: 0;
}
.action-description[data-v-f7547721] {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  margin: 0;
}

/* Impact Warning */
.impact-warning[data-v-f7547721] {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 8px;
  font-size: 0.9375rem;
  color: rgba(251, 191, 36, 0.9);
  line-height: 1.5;
}
.impact-warning .material-symbols-outlined[data-v-f7547721] {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* Approval Actions */
.approval-actions[data-v-f7547721] {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}
.btn-deny[data-v-f7547721],
.btn-approve[data-v-f7547721] {
  flex: 1;
  padding: 0.875rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
}
.btn-deny[data-v-f7547721] {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.btn-deny[data-v-f7547721]:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.5);
  transform: translateY(-2px);
}
.btn-approve[data-v-f7547721] {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.btn-approve[data-v-f7547721]:hover {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
  transform: translateY(-2px);
}
.btn-approve[data-v-f7547721]:active,
.btn-deny[data-v-f7547721]:active {
  transform: translateY(0);
}
.btn-deny .material-symbols-outlined[data-v-f7547721],
.btn-approve .material-symbols-outlined[data-v-f7547721] {
  font-size: 1.25rem;
}

/* Info Note */
.info-note[data-v-f7547721] {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  font-size: 0.875rem;
  color: rgba(147, 197, 253, 0.9);
  line-height: 1.5;
  margin: 0;
}
.info-note .material-symbols-outlined[data-v-f7547721] {
  font-size: 1.125rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* Responsive */
@media (max-width: 640px) {
.requester-info[data-v-f7547721] {
    flex-direction: column;
    text-align: center;
}
.requester-details[data-v-f7547721] {
    align-items: center;
}
.action-details[data-v-f7547721] {
    flex-direction: column;
    text-align: center;
}
.action-info[data-v-f7547721] {
    align-items: center;
}
.approval-actions[data-v-f7547721] {
    flex-direction: column;
}
}

.permission-help-container[data-v-c85b6ec9] {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0.5rem;
}

/* Permission Status */
.permission-status[data-v-c85b6ec9] {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  border-radius: 12px;
  border: 1px solid;
}
.permission-status.success[data-v-c85b6ec9] {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
}
.permission-status.error[data-v-c85b6ec9] {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}
.permission-status.warning[data-v-c85b6ec9] {
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.3);
}
.status-icon[data-v-c85b6ec9] {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.permission-status.success .status-icon[data-v-c85b6ec9] {
  background: rgba(16, 185, 129, 0.2);
}
.permission-status.error .status-icon[data-v-c85b6ec9] {
  background: rgba(239, 68, 68, 0.2);
}
.permission-status.warning .status-icon[data-v-c85b6ec9] {
  background: rgba(251, 191, 36, 0.2);
}
.status-icon .material-symbols-outlined[data-v-c85b6ec9] {
  font-size: 2rem;
}
.permission-status.success .status-icon .material-symbols-outlined[data-v-c85b6ec9] {
  color: #10b981;
}
.permission-status.error .status-icon .material-symbols-outlined[data-v-c85b6ec9] {
  color: #f87171;
}
.permission-status.warning .status-icon .material-symbols-outlined[data-v-c85b6ec9] {
  color: #fbbf24;
}
.status-info[data-v-c85b6ec9] {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1;
}
.status-title[data-v-c85b6ec9] {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
}
.permission-status.success .status-title[data-v-c85b6ec9] {
  color: #10b981;
}
.permission-status.error .status-title[data-v-c85b6ec9] {
  color: #f87171;
}
.permission-status.warning .status-title[data-v-c85b6ec9] {
  color: #fbbf24;
}
.status-message[data-v-c85b6ec9] {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  margin: 0;
}

/* Troubleshooting Section */
.troubleshooting-section[data-v-c85b6ec9],
.browser-instructions[data-v-c85b6ec9] {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.section-title[data-v-c85b6ec9] {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}
.section-title .material-symbols-outlined[data-v-c85b6ec9] {
  font-size: 1.25rem;
  color: #e8c547;
}
.steps-list[data-v-c85b6ec9] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.step-item[data-v-c85b6ec9] {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}
.step-number[data-v-c85b6ec9] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8c547, #d4af37);
  color: #0d1f2d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
}
.step-content[data-v-c85b6ec9] {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1;
}
.step-title[data-v-c85b6ec9] {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}
.step-description[data-v-c85b6ec9] {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin: 0;
}

/* Browser Instructions */
.browser-tabs[data-v-c85b6ec9] {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.browser-tab[data-v-c85b6ec9] {
  padding: 0.625rem 1.25rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
}
.browser-tab[data-v-c85b6ec9]:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}
.browser-tab.active[data-v-c85b6ec9] {
  background: linear-gradient(135deg, rgba(232, 197, 71, 0.2), rgba(212, 175, 55, 0.2));
  border-color: #e8c547;
  color: #e8c547;
}
.browser-content[data-v-c85b6ec9] {
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}
.instruction-list[data-v-c85b6ec9] {
  margin: 0;
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.instruction-list li[data-v-c85b6ec9] {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
}

/* Requirements Note */
.requirements-note[data-v-c85b6ec9] {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 1rem;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  font-size: 0.875rem;
  color: rgba(147, 197, 253, 0.9);
  line-height: 1.6;
}
.requirements-note .material-symbols-outlined[data-v-c85b6ec9] {
  font-size: 1.125rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* Close Button */
.btn-close[data-v-c85b6ec9] {
  padding: 0.875rem 2rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  background: linear-gradient(135deg, #e8c547 0%, #d4af37 100%);
  color: #0d1f2d;
  box-shadow: 0 4px 12px rgba(232, 197, 71, 0.3);
}
.btn-close[data-v-c85b6ec9]:hover {
  background: linear-gradient(135deg, #f0d060 0%, #e0bf47 100%);
  box-shadow: 0 6px 16px rgba(232, 197, 71, 0.4);
  transform: translateY(-2px);
}
.btn-close[data-v-c85b6ec9]:active {
  transform: translateY(0);
}
.btn-close .material-symbols-outlined[data-v-c85b6ec9] {
  font-size: 1.25rem;
}

/* Responsive */
@media (max-width: 640px) {
.permission-status[data-v-c85b6ec9] {
    flex-direction: column;
    text-align: center;
}
.status-info[data-v-c85b6ec9] {
    align-items: center;
}
.browser-tabs[data-v-c85b6ec9] {
    justify-content: center;
}
}

.fill-bots-container[data-v-31940ead] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 0.5rem;
}

/* Info Icon */
.info-icon[data-v-31940ead] {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
}
.info-icon .material-symbols-outlined[data-v-31940ead] {
  font-size: 3rem;
  color: #60a5fa;
}

/* Main Message */
.main-message[data-v-31940ead] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}
.message-title[data-v-31940ead] {
  font-size: 1.375rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}
.message-text[data-v-31940ead] {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin: 0;
  max-width: 450px;
}

/* Seats Info */
.seats-info[data-v-31940ead] {
  width: 100%;
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}
.info-item[data-v-31940ead] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}
.info-label[data-v-31940ead] {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.info-value[data-v-31940ead] {
  font-size: 2rem;
  font-weight: 700;
  color: #60a5fa;
}

/* Difficulty Section */
.difficulty-section[data-v-31940ead] {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.section-title[data-v-31940ead] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}
.section-title .material-symbols-outlined[data-v-31940ead] {
  font-size: 1.25rem;
  color: #e8c547;
}
.difficulty-options[data-v-31940ead] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.difficulty-option[data-v-31940ead] {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.difficulty-option[data-v-31940ead]:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}
.difficulty-option.selected[data-v-31940ead] {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.15));
  border-color: #60a5fa;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
}
.option-icon[data-v-31940ead] {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.option-icon.easy[data-v-31940ead] {
  background: rgba(16, 185, 129, 0.2);
}
.option-icon.medium[data-v-31940ead] {
  background: rgba(251, 191, 36, 0.2);
}
.option-icon.hard[data-v-31940ead] {
  background: rgba(239, 68, 68, 0.2);
}
.option-icon .material-symbols-outlined[data-v-31940ead] {
  font-size: 1.75rem;
}
.option-icon.easy .material-symbols-outlined[data-v-31940ead] {
  color: #10b981;
}
.option-icon.medium .material-symbols-outlined[data-v-31940ead] {
  color: #fbbf24;
}
.option-icon.hard .material-symbols-outlined[data-v-31940ead] {
  color: #f87171;
}
.option-info[data-v-31940ead] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}
.option-name[data-v-31940ead] {
  font-size: 1.125rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
}
.option-desc[data-v-31940ead] {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Benefits Section */
.benefits-section[data-v-31940ead] {
  width: 100%;
  padding: 1.25rem;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 12px;
}
.benefits-title[data-v-31940ead] {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(147, 197, 253, 0.9);
  margin: 0 0 1rem;
}
.benefits-list[data-v-31940ead] {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.benefits-list li[data-v-31940ead] {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
}
.benefits-list li .material-symbols-outlined[data-v-31940ead] {
  font-size: 1.125rem;
  color: #60a5fa;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* Action Buttons */
.fill-bots-actions[data-v-31940ead] {
  display: flex;
  gap: 1rem;
  width: 100%;
  margin-top: 0.5rem;
}
.btn-cancel[data-v-31940ead],
.btn-confirm[data-v-31940ead] {
  flex: 1;
  padding: 0.875rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
}
.btn-cancel[data-v-31940ead] {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-cancel[data-v-31940ead]:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}
.btn-confirm[data-v-31940ead] {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.btn-confirm[data-v-31940ead]:hover {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
  transform: translateY(-2px);
}
.btn-confirm[data-v-31940ead]:active,
.btn-cancel[data-v-31940ead]:active {
  transform: translateY(0);
}
.btn-cancel .material-symbols-outlined[data-v-31940ead],
.btn-confirm .material-symbols-outlined[data-v-31940ead] {
  font-size: 1.25rem;
}

/* Responsive */
@media (max-width: 640px) {
.info-icon[data-v-31940ead] {
    width: 64px;
    height: 64px;
}
.info-icon .material-symbols-outlined[data-v-31940ead] {
    font-size: 2.5rem;
}
.message-title[data-v-31940ead] {
    font-size: 1.125rem;
}
.message-text[data-v-31940ead] {
    font-size: 0.9375rem;
}
.seats-info[data-v-31940ead] {
    flex-direction: column;
    align-items: stretch;
}
.fill-bots-actions[data-v-31940ead] {
    flex-direction: column;
}
}

.confirm-action-container[data-v-2d276b53] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 0.5rem;
}

/* Warning Icon */
.warning-icon[data-v-2d276b53] {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse-icon-2d276b53 2s ease-in-out infinite;
}
.warning-icon.warning[data-v-2d276b53] {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.2));
}
.warning-icon.warning .material-symbols-outlined[data-v-2d276b53] {
  color: #fbbf24;
}
.warning-icon.danger[data-v-2d276b53] {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
}
.warning-icon.danger .material-symbols-outlined[data-v-2d276b53] {
  color: #ef4444;
}
.warning-icon.info[data-v-2d276b53] {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.2));
}
.warning-icon.info .material-symbols-outlined[data-v-2d276b53] {
  color: #3b82f6;
}
.warning-icon .material-symbols-outlined[data-v-2d276b53] {
  font-size: 3rem;
}
@keyframes pulse-icon-2d276b53 {
0%,
  100% {
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4);
}
50% {
    box-shadow: 0 0 0 20px rgba(251, 191, 36, 0);
}
}
.warning-icon.danger[data-v-2d276b53] {
  animation-name: pulse-icon-danger-2d276b53;
}
@keyframes pulse-icon-danger-2d276b53 {
0%,
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
}
50% {
    box-shadow: 0 0 0 20px rgba(239, 68, 68, 0);
}
}

/* Main Message */
.main-message[data-v-2d276b53] {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  line-height: 1.6;
  margin: 0;
  max-width: 400px;
}

/* Details Section */
.details-section[data-v-2d276b53] {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1rem;
}
.details-text[data-v-2d276b53] {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  line-height: 1.5;
  margin: 0;
}

/* Action Buttons */
.confirmation-actions[data-v-2d276b53] {
  display: flex;
  gap: 1rem;
  width: 100%;
  margin-top: 0.5rem;
}
.btn-cancel[data-v-2d276b53],
.btn-confirm[data-v-2d276b53] {
  flex: 1;
  padding: 0.875rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
}
.btn-cancel[data-v-2d276b53] {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-cancel[data-v-2d276b53]:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}
.btn-confirm[data-v-2d276b53] {
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.btn-confirm.warning[data-v-2d276b53] {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #1a1a1a;
}
.btn-confirm.warning[data-v-2d276b53]:hover {
  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);
  box-shadow: 0 6px 16px rgba(251, 191, 36, 0.4);
  transform: translateY(-2px);
}
.btn-confirm.danger[data-v-2d276b53] {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}
.btn-confirm.danger[data-v-2d276b53]:hover {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
  transform: translateY(-2px);
}
.btn-confirm.info[data-v-2d276b53] {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}
.btn-confirm.info[data-v-2d276b53]:hover {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
  transform: translateY(-2px);
}
.btn-confirm[data-v-2d276b53]:active {
  transform: translateY(0);
}
.btn-cancel .material-symbols-outlined[data-v-2d276b53],
.btn-confirm .material-symbols-outlined[data-v-2d276b53] {
  font-size: 1.25rem;
}

/* Responsive */
@media (max-width: 640px) {
.warning-icon[data-v-2d276b53] {
    width: 64px;
    height: 64px;
}
.warning-icon .material-symbols-outlined[data-v-2d276b53] {
    font-size: 2.5rem;
}
.main-message[data-v-2d276b53] {
    font-size: 0.9375rem;
}
.confirmation-actions[data-v-2d276b53] {
    flex-direction: column;
}
}

/* All card styles are inherited from vanilla CSS (cards.css) */
/* This ensures visual consistency with the existing game */
.card.disabled[data-v-36e40730] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.card.disabled[data-v-36e40730]:hover {
  transform: none;
  box-shadow: inherit;
}

/* Minimal container - no heavy borders */
.canasta-display[data-v-8194fa98] {
  padding: 1rem;
}

/* Single row of all canastas */
.canasta-row[data-v-8194fa98] {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  align-items: flex-end;
  min-height: 120px;
  padding: 0.5rem;
}

/* Individual canasta stack */
.canasta-stack[data-v-8194fa98] {
  position: relative;
  width: 65px;
  height: 95px;
  animation: stackAppear-8194fa98 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

/* Type-based glows - subtle color coding */
.canasta-stack.clean[data-v-8194fa98] {
  filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.5));
}
.canasta-stack.dirty[data-v-8194fa98] {
  filter: drop-shadow(0 0 8px rgba(148, 163, 184, 0.4));
}
.canasta-stack.wild[data-v-8194fa98] {
  filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.6));
}
@keyframes stackAppear-8194fa98 {
from {
    opacity: 0;
    transform: scale(0.6) translateY(20px);
}
to {
    opacity: 1;
    transform: scale(1) translateY(0);
}
}
.canasta-stack.highlighted[data-v-8194fa98] {
  animation: countingPulse-8194fa98 0.3s ease-out;
}
@keyframes countingPulse-8194fa98 {
50% {
    transform: scale(1.1);
    filter: brightness(1.2) drop-shadow(0 0 15px rgba(232, 197, 71, 0.6));
}
}

/* Card positioning within stack */
.stack-card[data-v-8194fa98] {
  position: absolute;
  width: 58px;
  height: 82px;
}
.stack-card.top-card[data-v-8194fa98] {
  z-index: 10;
}

/* Empty state */
.no-canastas[data-v-8194fa98] {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.875rem;
  font-style: italic;
}

/* Total - simple and clean */
.canasta-total[data-v-8194fa98] {
  text-align: center;
  margin-top: 1.5rem;
}
.total-value[data-v-8194fa98] {
  font-size: 1.75rem;
  font-weight: 700;
  color: #e8c547;
}

/* Minimal container - matching CanastaDisplay */
.card-pile-counter[data-v-44dde084] {
  padding: 1rem;
}
.team-name[data-v-44dde084] {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 1rem;
  text-align: center;
}
.team-a .team-name[data-v-44dde084] {
  color: #93c5fd;
}
.team-b .team-name[data-v-44dde084] {
  color: #fca5a5;
}

/* Single row of piles - matching CanastaDisplay */
.pile-row[data-v-44dde084] {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  align-items: flex-end;
  min-height: 120px;
  padding: 0.5rem;
}

/* Individual pile stack - matching canasta stacks */
.pile-stack[data-v-44dde084] {
  position: relative;
  width: 65px;
  height: 95px;
  animation: stackAppear-44dde084 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  /* Gold glow for card point piles */
  filter: drop-shadow(0 0 8px rgba(232, 197, 71, 0.4));
}
@keyframes stackAppear-44dde084 {
from {
    opacity: 0;
    transform: scale(0.6) translateY(20px);
}
to {
    opacity: 1;
    transform: scale(1) translateY(0);
}
}
.pile-stack.counting[data-v-44dde084] {
  animation: countingPulse-44dde084 0.3s ease-out;
  z-index: 10;
}
@keyframes countingPulse-44dde084 {
50% {
    transform: scale(1.1);
    filter: brightness(1.2) drop-shadow(0 0 15px rgba(232, 197, 71, 0.6));
}
}
.pile-stack.counted[data-v-44dde084] {
  filter: brightness(1.1) drop-shadow(0 0 8px rgba(232, 197, 71, 0.5));
}

/* Card positioning within stack */
.stack-card[data-v-44dde084] {
  position: absolute;
  width: 58px;
  height: 82px;
}
.stack-card.top-card[data-v-44dde084] {
  z-index: 10;
}

/* Empty state */
.no-piles[data-v-44dde084] {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.875rem;
  font-style: italic;
}

/* Total - simple and clean, matching CanastaDisplay */
.pile-total[data-v-44dde084] {
  text-align: center;
  margin-top: 1.5rem;
}
.total-value[data-v-44dde084] {
  font-size: 1.75rem;
  font-weight: 700;
  color: #e8c547;
}

/* Glass-morphism container with deep burgundy instead of harsh red */
.penalty-display[data-v-bc06e4ed] {
  padding: 1.5rem;
  border-radius: 16px;
  background: rgba(220, 38, 38, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(220, 38, 38, 0.2);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.penalty-title[data-v-bc06e4ed] {
  font-size: 1.125rem;
  font-weight: 700;
  color: #fca5a5;
  margin: 0 0 1rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.penalties-container[data-v-bc06e4ed] {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.penalty-section[data-v-bc06e4ed] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.penalty-header[data-v-bc06e4ed] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.penalty-label[data-v-bc06e4ed] {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}
.penalty-each[data-v-bc06e4ed] {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}
.red-three-cards[data-v-bc06e4ed] {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}
.red-three-card[data-v-bc06e4ed] {
  position: relative;
  width: 55px;
  height: 77px;
  perspective: 600px;
  animation: red3Appear-bc06e4ed 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
@keyframes red3Appear-bc06e4ed {
from {
    opacity: 0;
    transform: scale(0.5) translateY(20px);
}
to {
    opacity: 1;
}
}
.card-inner[data-v-bc06e4ed] {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease-out;
  transform-style: preserve-3d;
}
.red-three-card.flipped .card-inner[data-v-bc06e4ed] {
  transform: rotateY(180deg);
}
.card-back-wrapper[data-v-bc06e4ed],
.card-front-wrapper[data-v-bc06e4ed] {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.card-front-wrapper[data-v-bc06e4ed] {
  transform: rotateY(180deg);
}
.penalty-badge[data-v-bc06e4ed] {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(220, 38, 38, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: white;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  z-index: 10;
  border: 1px solid rgba(239, 68, 68, 0.4);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
}
.hand-penalty-display[data-v-bc06e4ed] {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.05));
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 10px;
  opacity: 0;
  transform: translateX(-100px);
}
.hand-penalty-display.visible[data-v-bc06e4ed] {
  opacity: 1;
  transform: translateX(0);
}
.hand-penalty-display.shake-in[data-v-bc06e4ed] {
  animation: shakeIn-bc06e4ed 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes shakeIn-bc06e4ed {
0% {
    transform: translateX(-100px) rotate(-10deg);
    opacity: 0;
}
20% {
    transform: translateX(20px) rotate(5deg);
    opacity: 1;
}
40% {
    transform: translateX(-15px) rotate(-3deg);
}
60% {
    transform: translateX(10px) rotate(2deg);
}
80% {
    transform: translateX(-5px) rotate(-1deg);
}
100% {
    transform: translateX(0) rotate(0);
    opacity: 1;
}
}
.hand-icon[data-v-bc06e4ed] {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(220, 38, 38, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hand-icon .material-symbols-outlined[data-v-bc06e4ed] {
  font-size: 1.75rem;
  color: #fca5a5;
}
.hand-info[data-v-bc06e4ed] {
  flex: 1;
}
.hand-count[data-v-bc06e4ed] {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}
.hand-penalty-value[data-v-bc06e4ed] {
  flex-shrink: 0;
}
.penalty-total[data-v-bc06e4ed] {
  text-align: center;
}
.total-value[data-v-bc06e4ed] {
  font-size: 1.25rem;
  font-weight: 700;
}
.total-value.penalty[data-v-bc06e4ed] {
  color: #f87171;
}
.no-penalties[data-v-bc06e4ed] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem;
  color: #10b981;
}
.no-penalties .material-symbols-outlined[data-v-bc06e4ed] {
  font-size: 1.5rem;
}
.total-penalties[data-v-bc06e4ed] {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(239, 68, 68, 0.2);
}
.total-label[data-v-bc06e4ed] {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
}
.math-breakdown[data-v-bc06e4ed] {
  margin-top: 1.5rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}
.math-row[data-v-bc06e4ed] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
}
.math-label[data-v-bc06e4ed] {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}
.math-value[data-v-bc06e4ed] {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.math-value.penalty[data-v-bc06e4ed] {
  color: #f87171;
}
.math-divider[data-v-bc06e4ed] {
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0.5rem 0;
}
.final-row .math-label[data-v-bc06e4ed] {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.math-value.final[data-v-bc06e4ed] {
  font-size: 1.25rem;
  color: #e8c547;
}

/* Canceled Canastas Section */
.canceled-canastas[data-v-bc06e4ed] {
  margin-top: 0.5rem;
}
.canceled-canasta-display[data-v-bc06e4ed] {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.05));
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 10px;
  opacity: 0;
  transform: translateX(-100px);
}
.canceled-canasta-display.visible[data-v-bc06e4ed] {
  opacity: 1;
  transform: translateX(0);
}
.canceled-canasta-display.shake-in[data-v-bc06e4ed] {
  animation: shakeIn-bc06e4ed 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.canceled-icon[data-v-bc06e4ed] {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(245, 158, 11, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.canceled-icon .material-symbols-outlined[data-v-bc06e4ed] {
  font-size: 1.75rem;
  color: #fbbf24;
}
.canceled-info[data-v-bc06e4ed] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.canceled-count[data-v-bc06e4ed] {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.canceled-note[data-v-bc06e4ed] {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}
.canceled-value[data-v-bc06e4ed] {
  flex-shrink: 0;
}
.total-value.strikethrough[data-v-bc06e4ed] {
  text-decoration: line-through;
  opacity: 0.6;
}


/* Import premium typography */
.round-end-container[data-v-cc5be4db] {
  position: relative;
  padding: 2rem;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f1419 0%, #1a2634 50%, #0d1117 100%);
  border-radius: 16px;
  overflow: hidden;
}
/* Subtle noise texture overlay */
.round-end-container[data-v-cc5be4db]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}
/* Gold accent gradient at top */
.round-end-container[data-v-cc5be4db]::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: radial-gradient(ellipse at top center, rgba(232, 197, 71, 0.1) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
/* Ensure content is above overlays */
.round-end-container[data-v-cc5be4db] > * {
  position: relative;
  z-index: 1;
}
.skip-btn[data-v-cc5be4db] {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 10;
}
.skip-btn[data-v-cc5be4db]:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}
/* Phase 1: Went Out Announcement */
.went-out-announcement[data-v-cc5be4db] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  text-align: center;
}
.celebration-icon[data-v-cc5be4db] {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse-cc5be4db 1.5s ease-in-out infinite;
}
.celebration-icon .material-symbols-outlined[data-v-cc5be4db] {
  font-size: 4rem;
  color: #fbbf24;
}
@keyframes pulse-cc5be4db {
0%,
  100% {
    transform: scale(1);
    opacity: 1;
}
50% {
    transform: scale(1.1);
    opacity: 0.8;
}
}
.went-out-title[data-v-cc5be4db] {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  letter-spacing: 0.02em;
  animation: goOutExplosion-cc5be4db 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes goOutExplosion-cc5be4db {
0% {
    transform: scale(0) rotate(-5deg);
    opacity: 0;
}
60% {
    transform: scale(1.15) rotate(2deg);
}
100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
}
}
.team-badge[data-v-cc5be4db] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  border-radius: 12px;
  font-size: 1.5rem;
  font-weight: 600;
}
.team-badge.team-a[data-v-cc5be4db] {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.2));
  border: 2px solid #60a5fa;
  color: #93c5fd;
}
.team-badge.team-b[data-v-cc5be4db] {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
  border: 2px solid #f87171;
  color: #fca5a5;
}
.team-badge .material-symbols-outlined[data-v-cc5be4db] {
  font-size: 2rem;
}
/* Team Scoring Phases - Glass morphism */
.team-scoring[data-v-cc5be4db] {
  width: 100%;
  max-width: 700px;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.phase-title[data-v-cc5be4db] {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 1.5rem;
  text-align: center;
  letter-spacing: 0.02em;
}
/* Team Pause */
.team-pause[data-v-cc5be4db] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}
.pause-indicator[data-v-cc5be4db] {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 2.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.8);
}
.pause-indicator .material-symbols-outlined[data-v-cc5be4db] {
  font-size: 2rem;
  color: #60a5fa;
}
/* Round Summary */
.round-summary[data-v-cc5be4db] {
  width: 100%;
  max-width: 750px;
}
.summary-title[data-v-cc5be4db] {
  font-family: 'Playfair Display', serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 2rem;
  text-align: center;
  letter-spacing: 0.02em;
}
/* Side-by-side comparison layout */
.teams-comparison[data-v-cc5be4db] {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  margin-bottom: 2rem;
}
.team-card[data-v-cc5be4db] {
  flex: 1;
  position: relative;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  text-align: center;
  transition: all 0.5s ease-out;
}
.team-card.team-a[data-v-cc5be4db] {
  border-color: rgba(96, 165, 250, 0.4);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(37, 99, 235, 0.04));
}
.team-card.team-b[data-v-cc5be4db] {
  border-color: rgba(248, 113, 113, 0.4);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(220, 38, 38, 0.04));
}
/* Winner glow effect */
.team-card.is-winner[data-v-cc5be4db] {
  border-color: #e8c547;
  box-shadow:
    0 0 30px rgba(232, 197, 71, 0.3),
    0 0 60px rgba(232, 197, 71, 0.15);
  animation: winnerGlow-cc5be4db 2s ease-in-out infinite;
}
@keyframes winnerGlow-cc5be4db {
0%,
  100% {
    box-shadow:
      0 0 30px rgba(232, 197, 71, 0.3),
      0 0 60px rgba(232, 197, 71, 0.15);
}
50% {
    box-shadow:
      0 0 40px rgba(232, 197, 71, 0.5),
      0 0 80px rgba(232, 197, 71, 0.25);
}
}
/* Winner crown */
.winner-crown[data-v-cc5be4db] {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  color: #e8c547;
  animation: crownBounce-cc5be4db 1s ease-out;
}
.winner-crown .material-symbols-outlined[data-v-cc5be4db] {
  font-size: 2.5rem;
  filter: drop-shadow(0 2px 4px rgba(232, 197, 71, 0.5));
}
@keyframes crownBounce-cc5be4db {
0% {
    transform: translateX(-50%) translateY(-30px) scale(0);
}
60% {
    transform: translateX(-50%) translateY(5px) scale(1.2);
}
100% {
    transform: translateX(-50%) translateY(0) scale(1);
}
}
.team-header[data-v-cc5be4db] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.team-header .team-icon[data-v-cc5be4db] {
  font-size: 1.75rem;
}
.team-card.team-a .team-header[data-v-cc5be4db] {
  color: #93c5fd;
}
.team-card.team-b .team-header[data-v-cc5be4db] {
  color: #fca5a5;
}
.team-header .team-name[data-v-cc5be4db] {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
}
.round-points-display[data-v-cc5be4db] {
  margin-bottom: 1rem;
}
.round-points-display .label[data-v-cc5be4db] {
  display: block;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}
.round-points-display .value[data-v-cc5be4db] {
  font-size: 1.25rem;
  font-weight: 600;
  color: #10b981;
}
.total-score-display .value[data-v-cc5be4db] {
  font-family: 'Outfit', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: #e8c547;
  line-height: 1;
}
.total-score-display .label[data-v-cc5be4db] {
  display: block;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.25rem;
}
/* VS Divider */
.vs-divider[data-v-cc5be4db] {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.25);
  padding: 0 0.5rem;
  align-self: center;
}
.btn-continue[data-v-cc5be4db] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #e8c547 0%, #d4af37 100%);
  border: none;
  border-radius: 12px;
  color: #0d1f2d;
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(232, 197, 71, 0.3);
}
.btn-continue[data-v-cc5be4db]:hover {
  background: linear-gradient(135deg, #f0d060 0%, #e0bf47 100%);
  box-shadow: 0 6px 16px rgba(232, 197, 71, 0.4);
  transform: translateY(-2px);
}
.btn-continue[data-v-cc5be4db]:active {
  transform: translateY(0);
}
.btn-continue .material-symbols-outlined[data-v-cc5be4db] {
  font-size: 1.5rem;
}
/* Debug Continue Button (pause points) - Fixed at bottom to avoid overlap */
.continue-prompt[data-v-cc5be4db] {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  animation: continueSlideUp-cc5be4db 0.3s ease-out;
}
@keyframes continueSlideUp-cc5be4db {
from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
}
to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
}
.btn-continue-debug[data-v-cc5be4db] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #e8c547 0%, #d4af37 100%);
  border: none;
  border-radius: 12px;
  color: #0d1117;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow:
    0 4px 20px rgba(232, 197, 71, 0.4),
    0 0 40px rgba(232, 197, 71, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-continue-debug[data-v-cc5be4db]:hover {
  transform: scale(1.05);
  box-shadow:
    0 6px 30px rgba(232, 197, 71, 0.5),
    0 0 60px rgba(232, 197, 71, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-continue-debug[data-v-cc5be4db]:active {
  transform: scale(0.98);
}
.btn-continue-debug .material-symbols-outlined[data-v-cc5be4db] {
  font-size: 1.25rem;
}
/* Transitions */
.fade-enter-active[data-v-cc5be4db],
.fade-leave-active[data-v-cc5be4db] {
  transition: opacity 0.3s ease;
}
.fade-enter-from[data-v-cc5be4db],
.fade-leave-to[data-v-cc5be4db] {
  opacity: 0;
}
/* Responsive */
@media (max-width: 768px) {
.teams-comparison[data-v-cc5be4db] {
    flex-direction: column;
    gap: 1.5rem;
}
.vs-divider[data-v-cc5be4db] {
    padding: 0.5rem 0;
}
.went-out-title[data-v-cc5be4db] {
    font-size: 1.75rem;
}
.celebration-icon[data-v-cc5be4db] {
    width: 80px;
    height: 80px;
}
.celebration-icon .material-symbols-outlined[data-v-cc5be4db] {
    font-size: 3rem;
}
.total-score-display .value[data-v-cc5be4db] {
    font-size: 2rem;
}
.winner-crown[data-v-cc5be4db] {
    top: -20px;
}
.winner-crown .material-symbols-outlined[data-v-cc5be4db] {
    font-size: 2rem;
}
}

/* Modal overlay */
.modal-overlay[data-v-a7723dd4] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-4);
  animation: fadeIn-a7723dd4 0.2s ease-out;
}
@keyframes fadeIn-a7723dd4 {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}

/* Modal content */
.modal-content[data-v-a7723dd4] {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  animation: slideUp-a7723dd4 0.3s ease-out;
}
@keyframes slideUp-a7723dd4 {
from {
    transform: translateY(30px);
    opacity: 0;
}
to {
    transform: translateY(0);
    opacity: 1;
}
}

/* Header */
.modal-header[data-v-a7723dd4] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.modal-title[data-v-a7723dd4] {
  font-size: var(--text-xl);
  font-weight: 700;
  color: #a855f7;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.modal-title .material-symbols-outlined[data-v-a7723dd4] {
  font-size: 1.5rem;
}
.modal-close-btn[data-v-a7723dd4] {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close-btn[data-v-a7723dd4]:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

/* Body */
.modal-body[data-v-a7723dd4] {
  margin-bottom: var(--space-4);
}
.choice-intro[data-v-a7723dd4] {
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-base);
  margin: 0 0 var(--space-4);
}

/* Choice Cards */
.choice-cards[data-v-a7723dd4] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.choice-card[data-v-a7723dd4] {
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.choice-card[data-v-a7723dd4]:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.choice-card.normal-choice[data-v-a7723dd4] {
  border-color: rgba(16, 185, 129, 0.3);
}
.choice-card.normal-choice[data-v-a7723dd4]:hover {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.1);
}
.choice-card.hidden-choice[data-v-a7723dd4] {
  border-color: rgba(168, 85, 247, 0.3);
}
.choice-card.hidden-choice[data-v-a7723dd4]:hover {
  border-color: #a855f7;
  background: rgba(168, 85, 247, 0.1);
}
.choice-icon[data-v-a7723dd4] {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.normal-choice .choice-icon[data-v-a7723dd4] {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}
.hidden-choice .choice-icon[data-v-a7723dd4] {
  background: rgba(168, 85, 247, 0.2);
  color: #a855f7;
}
.choice-icon .material-symbols-outlined[data-v-a7723dd4] {
  font-size: 2rem;
}
.h-badge[data-v-a7723dd4] {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #a855f7, #8b3dd6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
  box-shadow: 0 2px 6px rgba(168, 85, 247, 0.4);
}
.choice-content[data-v-a7723dd4] {
  text-align: center;
  width: 100%;
}
.choice-title[data-v-a7723dd4] {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-1);
}
.choice-points[data-v-a7723dd4] {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.normal-choice .choice-points[data-v-a7723dd4] {
  color: #10b981;
}
.hidden-choice .choice-points[data-v-a7723dd4] {
  color: #a855f7;
}
.choice-details[data-v-a7723dd4] {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
.choice-details li[data-v-a7723dd4] {
  padding: var(--space-1) 0;
  padding-left: var(--space-4);
  position: relative;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.4;
}
.choice-details li[data-v-a7723dd4]::before {
  content: '•';
  position: absolute;
  left: 0;
  font-weight: 700;
}
.normal-choice .choice-details li[data-v-a7723dd4]::before {
  color: #10b981;
}
.hidden-choice .choice-details li[data-v-a7723dd4]::before {
  color: #a855f7;
}
.choice-details li.warning[data-v-a7723dd4] {
  color: #fbbf24;
}
.choice-details li.warning[data-v-a7723dd4]::before {
  content: '!';
  color: #fbbf24;
}

/* Modal Actions */
.modal-actions[data-v-a7723dd4] {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.btn-secondary[data-v-a7723dd4] {
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-base);
  cursor: pointer;
  transition: all var(--transition-base);
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-secondary[data-v-a7723dd4]:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Responsive */
@media (max-width: 768px) {
.modal-content[data-v-a7723dd4] {
    padding: var(--space-4);
    max-height: 95vh;
}
.choice-cards[data-v-a7723dd4] {
    grid-template-columns: 1fr;
    gap: var(--space-3);
}
.choice-card[data-v-a7723dd4] {
    padding: var(--space-3);
}
.choice-icon[data-v-a7723dd4] {
    width: 50px;
    height: 50px;
}
.choice-icon .material-symbols-outlined[data-v-a7723dd4] {
    font-size: 1.5rem;
}
}

/* Modal overlay */
.modal-overlay[data-v-95f5a1a1] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-4);
  animation: fadeIn-95f5a1a1 0.2s ease-out;
}
@keyframes fadeIn-95f5a1a1 {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}

/* Modal content */
.modal-content[data-v-95f5a1a1] {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  animation: slideUp-95f5a1a1 0.3s ease-out;
}
@keyframes slideUp-95f5a1a1 {
from {
    transform: translateY(30px);
    opacity: 0;
}
to {
    transform: translateY(0);
    opacity: 1;
}
}

/* Header */
.modal-header[data-v-95f5a1a1] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.modal-title[data-v-95f5a1a1] {
  font-size: var(--text-xl);
  font-weight: 700;
  color: #fbbf24;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.modal-title .material-symbols-outlined[data-v-95f5a1a1] {
  font-size: 1.5rem;
}
.modal-close-btn[data-v-95f5a1a1] {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close-btn[data-v-95f5a1a1]:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

/* Body */
.modal-body[data-v-95f5a1a1] {
  margin-bottom: var(--space-4);
}

/* Progress Display */
.progress-display[data-v-95f5a1a1] {
  text-align: center;
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: var(--radius-md);
}
.progress-visual[data-v-95f5a1a1] {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: var(--space-2);
}
.progress-dot[data-v-95f5a1a1] {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(168, 85, 247, 0.4);
  background: transparent;
  transition: all 0.2s ease;
}
.progress-dot.filled[data-v-95f5a1a1] {
  background: linear-gradient(135deg, #a855f7, #8b3dd6);
  border-color: #a855f7;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
}
.progress-text[data-v-95f5a1a1] {
  color: #c4b5fd;
  font-size: var(--text-sm);
  font-weight: 600;
}

/* Warning Box */
.warning-box[data-v-95f5a1a1] {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}
.warning-icon[data-v-95f5a1a1] {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: rgba(251, 191, 36, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fbbf24;
}
.warning-icon .material-symbols-outlined[data-v-95f5a1a1] {
  font-size: 1.25rem;
}
.warning-content h4[data-v-95f5a1a1] {
  margin: 0 0 var(--space-2);
  color: #fbbf24;
  font-size: var(--text-base);
  font-weight: 600;
}
.warning-content p[data-v-95f5a1a1] {
  margin: 0 0 var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.warning-content p[data-v-95f5a1a1]:last-child {
  margin-bottom: 0;
}
.reveal-points[data-v-95f5a1a1] {
  color: #fbbf24;
}
.hidden-points[data-v-95f5a1a1] {
  color: #a855f7;
}
.hint[data-v-95f5a1a1] {
  color: #10b981 !important;
  font-style: italic;
}

/* Point Comparison */
.point-comparison[data-v-95f5a1a1] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}
.point-option[data-v-95f5a1a1] {
  flex: 1;
  text-align: center;
  padding: var(--space-3);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
}
.point-option.current[data-v-95f5a1a1] {
  border-color: rgba(251, 191, 36, 0.3);
}
.point-option.optimal[data-v-95f5a1a1] {
  border-color: rgba(168, 85, 247, 0.3);
  background: rgba(168, 85, 247, 0.1);
}
.point-label[data-v-95f5a1a1] {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-1);
}
.point-value[data-v-95f5a1a1] {
  font-size: var(--text-2xl);
  font-weight: 700;
}
.point-option.current .point-value[data-v-95f5a1a1] {
  color: #fbbf24;
}
.point-option.optimal .point-value[data-v-95f5a1a1] {
  color: #a855f7;
}
.point-hint[data-v-95f5a1a1] {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}
.point-arrow[data-v-95f5a1a1] {
  color: var(--text-secondary);
  font-size: 1.25rem;
}

/* Modal Actions */
.modal-actions[data-v-95f5a1a1] {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.btn-primary[data-v-95f5a1a1],
.btn-danger[data-v-95f5a1a1] {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-base);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.btn-primary.keep-hidden[data-v-95f5a1a1] {
  background: linear-gradient(135deg, #a855f7 0%, #8b3dd6 100%);
  color: white;
}
.btn-primary.keep-hidden[data-v-95f5a1a1]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
}
.btn-danger.reveal[data-v-95f5a1a1] {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}
.btn-danger.reveal[data-v-95f5a1a1]:hover {
  background: rgba(251, 191, 36, 0.3);
}
.btn-primary .material-symbols-outlined[data-v-95f5a1a1],
.btn-danger .material-symbols-outlined[data-v-95f5a1a1] {
  font-size: 1.1rem;
}

/* Responsive */
@media (max-width: 768px) {
.modal-content[data-v-95f5a1a1] {
    padding: var(--space-4);
    max-height: 95vh;
}
.point-comparison[data-v-95f5a1a1] {
    flex-direction: column;
    gap: var(--space-2);
}
.point-arrow[data-v-95f5a1a1] {
    transform: rotate(90deg);
}
.modal-actions[data-v-95f5a1a1] {
    flex-direction: column;
}
}