/* Seite als eigener “Block” wie im alten CryptoCombat */
.cc-page{
  background:#2f3841;
  padding: 20px 0 30px;
  min-height: calc(100vh - 120px);
}

/* Container breiter wie im Screenshot */
.cc-container{
  max-width: 1180px;
}

/* verhindern dass DropZone “page/slider” styles reinfunken */
.cc-page *{
  box-sizing: border-box;
}

/* Panels */
.cc-panel{
  border:1px solid #1f262d;
  background:#323b44;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04);
  margin-bottom: 18px;
}

.cc-panel-head{
  color:#fff;
  font-weight:700;
  padding:14px 14px;
  font-size:18px;
}
.cc-red{ background:#d9534f; }
.cc-blue{ background:#5bc0de; }

.cc-fighter{ display:inline-block; }
.cc-caret{ float:right; opacity:.9; }

.cc-panel-body{ padding:14px; }

/* Bars */
.cc-label{ font-size:12px; opacity:.85; margin-bottom:4px; }
.cc-progress{
  height:12px;
  background:#1f262d;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:2px;
  overflow:hidden;
  margin-bottom: 12px;
}
.cc-fill{ height:100%; }
.cc-life{ background:#f0ad4e; }
.cc-power{ background:#d9534f; }

/* Meta */
.cc-meta{ text-align:center; padding:6px 0 10px; }
.cc-big{ font-size:16px; font-weight:700; color:#dfe6ee; margin: 6px 0; }
.cc-small{ font-size:13px; opacity:.9; }

/* Buttons */
.cc-btn{
  display:block;
  text-align:center;
  padding:14px 10px;
  font-weight:800;
  text-decoration:none !important;
  border-radius:4px;
  margin-top:10px;
}
.cc-btn-red{
  background:#d9534f;
  color:#fff !important;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2);
}
.cc-btn-blue{
  background:#5bc0de;
  color:#0b1b22 !important;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2);
}
.cc-btn-dark{
  background:#2b333b;
  border:1px solid #1f262d;
  color:#dfe6ee !important;
  padding:12px 10px;
}
.cc-btn-dark:hover{ background:#263039; color:#fff !important; }

.cc-checkbox{ margin-right:6px; }

/* Center */
.cc-center{
  border:1px solid #1f262d;
  background:#323b44;
  padding:14px;
  margin-bottom: 18px;
}
.cc-video-shell{
  background:#1f262d;
  border:1px solid rgba(255,255,255,0.06);
  padding:10px;
}
.cc-video{
  background:#10161c;
  border:1px solid rgba(255,255,255,0.06);
  height: 360px;
  position:relative;
}
.cc-video-placeholder{
  position:absolute; inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.55);
  font-weight:700;
  letter-spacing:.8px;
}

/* Lock + Controls */
.cc-lock{
  margin-top:10px;
  padding:8px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  text-align:center;
  color:#dfe6ee;
}
.cc-locked{ color:#d9534f; font-weight:900; }

.cc-controls{
  margin-top:8px;
  text-align:center;
  opacity:.9;
}
.cc-time{
  display:inline-block;
  margin:0 10px;
  padding:2px 8px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.2);
  border-radius:3px;
}

/* Tabelle unten */
.cc-bottom{
  border:1px solid #1f262d;
  margin-top: 10px;
}
.cc-table-head{
  background:#6b747c;
  color:#fff;
  padding:10px 12px;
  font-weight:700;
}
.cc-table-wrap{ background:#323b44; padding:10px; }

.cc-table{
  width:100%;
  border-collapse:collapse;
  background:#2c343c;
  color:#dfe6ee;
}
.cc-table thead th{
  background:#5f686f;
  color:#fff;
  text-align:left;
  padding:10px;
  border:1px solid rgba(0,0,0,0.25);
}
.cc-table td{
  padding:10px;
  border:1px solid rgba(255,255,255,0.06);
}

.cc-row-danger td{
  background:#d9534f;
  color:#fff;
}
.cc-tag{
  background:#5bc0de;
  color:#0b1b22;
  padding:2px 6px;
  border-radius:3px;
  font-weight:700;
  display:inline-block;
}
.cc-autobid{ font-weight:800; }

/* responsive: untereinander stapeln */
@media (max-width: 991px){
  .cc-video{ height: 260px; }
}