
/* WoW constructor — layout like "Главная-как должно выглядеть" */
.kem-byt{max-width: 1040px; margin: 0 auto;}
.kem-byt .kem-desc{
  margin: 8px auto 14px;
  max-width: 760px;
  text-align: center;
  color:#e9e0ef;
  font-size: 13px;
  line-height: 1.5;
}
.constructor-wrap{
  position: relative;
  margin: 0 auto 6px;
  width: 980px;
  height: 440px;
}
@media (max-width: 900px){
  .constructor-wrap{ width: 96vw; }
}
.races-col{
  position:absolute;
  top: 5px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  z-index: 3;
}
.races-left{ left: 80px; }
.races-right{ right: 80px; }
.classes-row{
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 28px;
  display:flex;
  gap: 10px;
  z-index: 4;
}
.icon-btn{
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 999px;
  border: 2px solid rgba(250,235,180,.35);
  background: rgba(0,0,0,.30);
  box-shadow: 0 0 0 1px rgba(0,0,0,.55) inset, 0 8px 18px rgba(0,0,0,.35);
  cursor: pointer;
  display:grid;
  place-items:center;
}
.icon-btn img{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  object-fit: cover;
  display:block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.55));
}
.icon-btn.selected{
  border-color: rgba(255,215,120,.95);
  box-shadow: 0 0 0 2px rgba(255,215,120,.35), 0 0 18px rgba(255,210,120,.35);
}
.icon-btn:focus{ outline: none; }
.icon-btn:hover{
  border-color: rgba(255,215,120,.65);
}

.oval-stage{
  position:absolute;
  left: 50%;
  top: 96px;
  transform: translateX(-50%);
  width: 760px;
  height: 270px;
  border-radius: 190px / 135px;
  overflow: hidden;
  background: rgba(0,0,0,.22);
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 18px 40px rgba(0,0,0,.55);
  z-index: 2;
}
.oval-stage::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  box-shadow: 0 0 0 2px rgba(255,255,255,.08) inset;
  pointer-events:none;
}
.oval-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
  opacity: .95;
}
.oval-clip{
  position:absolute; inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap: 0px;
  padding: 0 30px 8px;
}
.oval-char{
  height: 248px;
  width: auto;
  max-width: 520px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.55));
}
.oval-char.right{
  transform: scaleX(-1);
  opacity: .98;
}

/* v5: show only one big character */
.oval-char.right{ display:none !important; }
