.lang-links{
	display: flex;
    justify-content: flex-end;
    padding-right: 16px;
}


.steps{
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 120px;
}


#hp{
	position: relative;
	margin-top: 120px;
}

#hp .star-line {
    background: var(--bg-light) url(/assets/promos/line-star.webp) repeat-x;
    background-size: contain;
    height: 48px;
    border-top: 5px solid #c11414;
    border-bottom: 5px solid #c11414;
}


.xsteps{
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-size: 24px;
}


.xsteps h1{
	font-weight: 500;
	font-size: 55px;
	line-height: 1.3;
	margin-bottom: 75px;
	font-family: Georgia, serif;
}



.xsteps p{
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2rem;
}




/* cv */

.dstar {
    color: #ffa233;
    font-size: 18px;
    font-size: 25px;
}


.l-sub {
    color: rgba(212, 175, 55, .5);
    font-size: 14px;
    letter-spacing: 3px;
    text-align: center;
    margin-bottom: 28px;
    margin-top: 16px;
}



.gline {
    width: 100%;
    height: 1px;
    background: rgba(212, 175, 55, .3);
    margin: 12px 0;
}

.l-btns {
    display: flex;
    gap: 14px;
    margin-top: 20px;
}

.l-btn {
    width: 138px;
    padding: 11px 0;
    background: transparent;
    border: 2px solid #ffa233;
    border-radius: 4px;
    color: #ffa233;
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    font-family: Georgia, serif;
    transition: all .2s;
    touch-action: manipulation;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.l-btn:hover, .l-btn:active {
    background: #ffa233;
    color: #4a0000;
}










.quiz-lives {
    display: flex;
    gap: 16px;
    justify-content: center;
    padding: 10px;
}
.ql {
    width: 56px; height: 56px; border-radius: 50%;
    border: 2px solid #ffa233;
    background: rgba(212,175,55,0.12);
    position: relative;
    transition: border-color .4s, background .4s;
}
.ql::after {
    content: ''; position: absolute; inset: 0; margin: auto;
    width: 30px; height: 30px; background: #ffa233;
    -webkit-mask: url('/assets/promos/star.svg') center/contain no-repeat;
    mask: url('/assets/promos/star.svg') center/contain no-repeat;
    transition: background .4s;
}
.ql.dead { border-color: #4a0000; background: rgba(40,0,0,0.35); }
.ql.dead::after { background: #4a0000; }
.ql.boom { animation: boom .45s ease; }

@keyframes boom {
    0%   { transform: scale(1); }
    20%  { transform: scale(1.4) rotate(-10deg); }
    50%  { transform: scale(0.8) rotate(6deg); }
    75%  { transform: scale(1.1) rotate(-3deg); }
    100% { transform: scale(1); }
}





.quiz-timer {
    display: flex;
    justify-content: center;
    margin: 12px 0;
}





.quiz-question {
    text-align: center;
    padding: 0 60px;
    margin: 24px 0;
}

.quiz-q-num {
    color: rgba(212,175,55,0.55);
    font-size: 13px;
    letter-spacing: 3px;
    margin-bottom: 14px;
}

.quiz-q-text {
    color: #fff;
    font-size: 42px;
    line-height: 1.3;
    font-family: Georgia, serif;
}

.quiz-q-text.appear {
    animation: qAppear .35s ease;
}

@keyframes qAppear {
    0%   { opacity: 0; transform: translateY(-12px); }
    65%  { opacity: 1; transform: translateY(2px); }
    100% { opacity: 1; transform: translateY(0); }
}




/* ОТВЕТЫ */

.quiz-answers {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 40px;
    margin: 24px 0;
    
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.quiz-ans {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: #fff3d7;
    border: 1px solid rgba(255,162,51,0.3);
    border-radius: 10px;
    color: #3d1500;
    font-size: 18px;
    font-family: Georgia, serif;
    line-height: 1.45;
    cursor: pointer;
    transition: background .2s, border-color .2s;
    user-select: none;
    touch-action: manipulation;
}
.quiz-ans:hover:not(.locked) {
    background: #fff7e4;
    border-color: rgba(255,162,51,0.6);
}
.ans-label {
    min-width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,162,51,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    color: rgba(255,162,51,0.85);
    flex-shrink: 0;
    transition: all .3s;
}
.quiz-ans.locked  { cursor: default; }

/* Угадал */
.quiz-ans.win { animation:salute 1.5s ease-out forwards; }
.quiz-ans.win .ans-label{
  background:#ffa233;border-color:#ffa233;color:#fff;font-size:16px;
}
@keyframes salute{
  0%  {background:rgba(255,243,215,0.88);box-shadow:none}
  18% {background:rgba(255,220,100,0.98);box-shadow:0 0 55px rgba(255,180,50,1),0 0 20px rgba(255,220,100,0.9);color:#2a1000}
  45% {background:rgba(255,200,80,0.7);box-shadow:0 0 25px rgba(255,162,51,0.5);color:#2a1000}
  100%{background:rgba(255,162,51,0.22);box-shadow:0 0 10px rgba(255,162,51,0.15);color:#3d1500;border-color:#ffa233}
}

/* Призрак */
.quiz-ans.ghost {
    background: rgba(255,243,215,0.08);
    border-color: rgba(255,162,51,0.1);
    color: rgba(248,229,192,0.2);
}
.quiz-ans.ghost .ans-label {
    border-color: rgba(255,162,51,0.12);
    color: rgba(255,162,51,0.18);
}

/* Неверный выбор */
.quiz-ans.wrong-chosen .ans-label {
    background: rgba(180,50,50,0.25);
    border-color: rgba(220,80,80,0.85);
    color: #e05050;
    font-size: 17px;
}

/* Верный после ошибки */
.quiz-ans.correct-show { border-color: rgba(100,180,100,0.65); }
.quiz-ans.correct-show .ans-label {
    background: rgba(80,150,80,0.25);
    border-color: rgba(120,190,120,0.8);
    color: #80cc80;
    font-size: 17px;
}