body {
    font-family: 'Montserrat', Arial, sans-serif;
    background: linear-gradient(115deg, #231e38 0%, #3f2a7b 60%, #221c49 100%);
    min-height: 100vh;
    margin: 0;
}
.container {
    max-width: 370px;
    height: 610px;
    margin: 44px auto;
    background: rgba(32,19,55,0.89);
    border-radius: 34px;
    box-shadow: 0 12px 36px #2d2b5740;
    overflow: hidden;
    padding: 0 0 67px 0; /* увеличено для кнопки */
    border: 2.6px solid #5948c3;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 22px 26px 0 26px; /* Увеличенные отступы слева и справа */
    background: linear-gradient(90deg, #49326e 0%, #23124b 100%);
    font-size: 18px;
    font-weight: 500;
    border-radius: 0 0 0 0;
    color: #e9e6fb;
    letter-spacing: 1px;
    box-shadow: 0 4px 16px #38237e23;
}
.stat-side.stat-left {
    margin-right: 10px; /* дополнительный отступ справа */
    margin-bottom: 10px; /* дополнительный отступ снизу */
}
.stat-side.stat-right {
    margin-right: 10px; /* дополнительный отступ справа */
    margin-bottom: 10px; /* дополнительный отступ снизу */
}
.stat-label { color: #aabbee; text-shadow: 0 0 2.5px #8576e2c8; }
.stat-value { color: #cfc5ff; font-weight: bold; margin-left: 7px; text-shadow: 0 0 4px #bf9cffaa; }

.h-spacer {
    height: 26px;
}

.progress-bar {
    width: calc(100% - 32px);
    margin: 10px 16px 2px 16px;
    height: 13px;
    background: linear-gradient(90deg, #261541 0%, #736bf4 95%);
    border-radius: 7.5px;
    box-shadow: 0 2px 14px #3d3492bc, 0 2px 8px #301f4b1a;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg,#7c5ffc 0%, #a085ff 65%, #bb50de 100%);
    border-radius: 7px;
    box-shadow: 0 0 16px #9367ddb0, 0 0 40px #744cd988;
    transition: width 0.5s cubic-bezier(.7,.21,.55,1.0);
}
.question {
    text-align: center;
    font-size: 40px;
    font-weight: 800;
    color: #e7dbff;
    margin: 44px 0 32px 0;
    user-select: none;
    letter-spacing: 2px;
    text-shadow: 0 0 18px #3a225daa, 0 2px 16px #8c70eb88, 0 1px 0px #8578d788;
    background: linear-gradient(90deg,#a58aff 10%,#68a6e0 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.answers {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 28px;
}
.answer-btn {
    font-size: 30px;
    font-weight: 700;
    padding: 23px 0;
    width: 80px;
    border: none;
    border-radius: 24px;
    background: linear-gradient(120deg, #8578e8 0%, #4e44d8 66%, #b888eb 100%);
    color: #f5eaff;
    box-shadow: 0 2px 22px #8b79e777, 0 0 19px #7744db33;
    cursor: pointer;
    transition: background 0.18s, box-shadow 0.18s, transform 0.13s;
    outline: none;
    user-select: none;
    position: relative;
    text-shadow: 0 0 16px #bdaaffaa, 0 0 8px #baa0ce99;
    border: 2px solid #6b55ab55;
}
.answer-btn:active {
    transform: scale(0.94);
    box-shadow: 0 2px 22px #bb98feb0, 0 0 40px #675dac33;
}
.answer-btn.right {
    background: linear-gradient(120deg, #a587ff 0%, #b451ff 80%);
    color: #613bac;
    box-shadow: 0 4px 46px #c7b4faad, 0 0 40px #bfa1ffbd;
    border: 2px solid #a085ffcc;
    animation: correctPulse 0.65s;
}
.answer-btn.wrong {
    background: linear-gradient(120deg, #f5b6e4 0%, #fb9090 100%);
    color: #b32050;
    box-shadow: 0 2px 18px #f66fb1c9, 0 0 24px #e3acec88;
    border: 2px solid #f97acfb2;
    animation: wrongShake 0.45s;
}
@keyframes correctPulse {
    0% { transform: scale(1); filter: brightness(1.1); }
    35% { transform: scale(1.13); filter: brightness(1.33) drop-shadow(0 0 14px #cfaded); }
    65% { transform: scale(0.97); filter: none; }
    100% { transform: scale(1); filter: none; }
}
@keyframes wrongShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    50% { transform: translateX(14px); }
    80% { transform: translateX(-5px); }
}
.result {
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    color: #e7b6fa;
    min-height: 49px;
    margin-top: 18px;
    text-shadow: 0 0 17px #b480d8a7, 0 0 7px #6c62ce66;
    filter: drop-shadow(0 0 7px #3f356d55);
}
.controls {
    margin: 31px 0 0 0;
    display: flex;
    justify-content: center;
    gap: 26px;
}
.controls button {
    padding: 16px 39px;
    font-size: 22px;
    font-weight: bold;
    color: #f2eaff;
    background: linear-gradient(120deg, #744cd9 0%, #a279ff 100%);
    border: none;
    border-radius: 16px;
    box-shadow: 0 2px 16px #a883eca8;
    cursor: pointer;
    transition: background 0.17s, box-shadow 0.17s, transform 0.12s;
    text-shadow: 0 0 14px #ab94ffbb;
    border: 2px solid #b1a6ff75;
}
.controls button:hover {
    background: linear-gradient(120deg, #9279f7 0%, #d2bcff 100%);
    color: #bfa4ff;
    box-shadow: 0 2px 21px #a19bf3bb;
    transform: scale(1.07);
}
.stats-bar {
    width: 100%;
    background: linear-gradient(90deg, #49326e 0%, #23124b 100%);
    color: #eecaff;
    font-size: 18px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    padding: 11px 0 14px 0;
    position: absolute;
    left: 0;
    bottom: 48px;
    border-radius: 0 0 0 0;
    box-shadow: 0 -4px 16px #38237e23;
}
.reset-btn {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    padding: 15px 0;
    background: linear-gradient(90deg, #6c59c7 0%, #a085ff 100%);
    color: #f6eaff;
    border: none;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 -2px 19px #8468cb6e;
    cursor: pointer;
    text-shadow: 0 0 14px #bfa8ffb7;
    border-top: 2px solid #9279f5;
    transition: filter 0.14s, background 0.12s;
}
.reset-btn:hover {
    filter: brightness(1.1) drop-shadow(0 0 7px #a085ffd2);
    background: linear-gradient(90deg, #b9b6fa 0%, #a085ff 98%);
    color: #6044a0;
}

@media (max-width: 500px) {
    .container { max-width: 98vw; padding-bottom: 8px; height: 98vh;}
    .question { font-size: 29px; margin: 24px 0 21px 0;}
    .answer-btn { font-size: 17px; width: 44px; padding: 11px 0; border-radius: 13px; }
    .header { font-size: 13px; }
    .progress-bar { height: 8px; }
    .stats-bar, .reset-btn { font-size: 10px; padding: 12px 0;}
}