/* ── Base ── */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { line-height: 1.4; }

/* ── Tab system ── */
.tab-content { display: none; }
.tab-content.active { display: block; }

.tab.active {
  color: #22c55e !important;
  border-bottom: 2px solid #22c55e;
}

/* ── Upload box ── */
.upload-box.dragover label {
  background: #16a34a !important;
}

/* ── Spinner ── */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.06);
  border-top-color: #22c55e;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* ── Scrollbar ── */
.custom-scrollbar::-webkit-scrollbar { width: 5px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.06); border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.12); }

/* ── Fight item active state ── */
.fight-item.active {
  background: rgba(34, 197, 94, 0.06) !important;
  box-shadow: inset 0 0 0 2px #22c55e;
}

/* ── Hidden utility ── */
.hidden { display: none !important; }

/* ── Range input ── */
input[type=range] {
  -webkit-appearance: none;
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  outline: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #22c55e;
  cursor: pointer;
}

/* ── Zebra striping ── */
.zebra > *:nth-child(even) { background: rgba(255, 255, 255, 0.02); }

/* ── Select styling ── */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.3)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  padding-right: 22px !important;
}

/* ── Hero portrait ── */
.hero-portrait {
  border-radius: 2px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

/* ── Hero row team indicators ── */
.hero-row[data-team="2"] { box-shadow: inset 3px 0 0 #22c55e; }
.hero-row[data-team="3"] { box-shadow: inset 3px 0 0 #ef4444; }

/* ── Landing fade-in ── */
.landing-fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Landing → results transition ── */
#landing.hiding {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ── Language switcher ── */
.lang-btn.active {
  background: #22c55e;
  color: #0a0a0a;
}

/* ── V6 Editorial overrides ── */
::selection {
  background: rgba(34, 197, 94, 0.3);
}

/* ── Checkbox styling ── */
input[type="checkbox"] {
  accent-color: #22c55e;
}