/* ZOMZILLA // DNA TOOL (faction + parts assembler) */

.dnaPage{
  padding: 26px 0 80px;
}

.dnaWrap{
  width: min(1180px, 94vw);
  margin: 0 auto;
}

.dnaTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding: 18px 18px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

.dnaTitle h1{
  margin:0;
  font-family: var(--font-display, 'Antonio', system-ui, sans-serif);
  font-size: clamp(34px, 5vw, 56px);
  letter-spacing: .06em;
}
.dnaTitle p{
  margin: 10px 0 0;
  color: rgba(255,255,255,.72);
  line-height: 1.55;
  max-width: 620px;
}

.dnaBadge{
  text-align:right;
  padding-top: 10px;
  color: rgba(255,255,255,.60);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  user-select:none;
}
.dnaBadge .green{
  color: var(--accent, #8cff00);
  text-shadow: 0 0 18px rgba(140,255,0,.18);
}

.dnaGrid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
  margin-top: 16px;
}

@media (max-width: 980px){
  .dnaGrid{ grid-template-columns: 1fr; }
  .dnaBadge{ display:none; }
}

.dnaPanel{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  overflow:hidden;
}

.dnaPanelHead{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.dnaPanelHead .h{
  letter-spacing: .16em;
  font-size: 12px;
  color: rgba(255,255,255,.78);
  text-transform: uppercase;
}

.dnaBtnRow{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.dnaBtn, .dnaDice{
  appearance:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color: #f2f2f2;
  padding: 10px 12px;
  border-radius: 999px;
  letter-spacing: .14em;
  font-size: 12px;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}

.dnaBtn:hover, .dnaDice:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
  background: rgba(0,0,0,.44);
}

.dnaBtn.green{
  border-color: rgba(140,255,0,.30);
  color: var(--accent, #8cff00);
}
.dnaBtn.red{
  border-color: rgba(255,80,80,.28);
  background: rgba(120,0,0,.22);
}

.dnaPanelBody{
  padding: 16px;
}

.dnaPreviewWrap{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  overflow:hidden;
  background: rgba(0,0,0,.35);
  display:grid;
  place-items:center;
  padding: 14px;
}

.dnaPreviewWrap canvas{
  width: 100%;
  height: auto;
  border-radius: 14px;
  max-width: 720px;
}

.dnaHint{
  margin-top: 12px;
  color: rgba(255,255,255,.65);
  font-size: 12px;
  line-height: 1.5;
}

.dnaMsg{
  display:none;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.30);
  font-size: 12px;
  line-height: 1.45;
}

.dnaMsg.err{
  border-color: rgba(255,80,80,.30);
  background: rgba(120,0,0,.22);
  color: rgba(255,235,235,.95);
}
.dnaMsg.ok{
  border-color: rgba(140,255,0,.25);
  background: rgba(20,60,0,.18);
  color: rgba(220,255,200,.95);
}

.dnaField{
  display:flex;
  flex-direction:column;
  gap: 6px;
  margin-bottom: 12px;
}

.dnaField label{
  font-size: 11px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.72);
  text-transform: uppercase;
}

.dnaField input,
.dnaField textarea,
.dnaField select{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color:#fff;
  padding: 10px 12px;
  outline:none;
  font-family: inherit;
  font-size: 13px;
}

.dnaField textarea{
  min-height: 92px;
  resize: vertical;
}

.dnaRow2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px){ .dnaRow2{ grid-template-columns: 1fr; } }

.dnaSlots{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 6px;
}

.dnaSlotRow{
  display:grid;
  grid-template-columns: 120px 1fr 44px;
  gap: 10px;
  align-items:center;
}
@media (max-width: 520px){
  .dnaSlotRow{
    grid-template-columns: 1fr 44px;
  }
  .dnaSlotRow .slotLbl{ display:none; }
}

.slotLbl{
  font-size: 11px;
  letter-spacing: .16em;
  color: rgba(255,255,255,.70);
  text-transform: uppercase;
}

.dnaDice{
  justify-content:center;
  width: 44px;
  padding: 10px 0;
  letter-spacing: 0;
}

.dnaSep{
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 16px 0;
}

.dnaStatGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 740px){ .dnaStatGrid{ grid-template-columns: repeat(2, 1fr); } }

.dnaSmall{
  font-size: 11px;
  color: rgba(255,255,255,.60);
}

.dnaHidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}