:root {
    color-scheme: light;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background: #f5f5f7;
    margin: 0;
    padding: 0;

    background-image: url('./img/BG.png');
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-attachment: fixed;
    min-height: 100vh;
}

/* ... existing styles ... */

/* Кастомизация самого ползунка (input type=range) */
input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: #e5e7eb;
    height: 8px;
    /* Track height */
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.1s linear;
    position: relative;
    z-index: 2;
    /* Input on top for events */
    opacity: 0;
    /* Hide native input but keep events */
    margin: 0;
}

/* Wrapper for custom slider to handle positioning */
.scale-slider-wrapper {
    position: relative;
    height: 32px;
    /* Height to accommodate thumb */
    display: flex;
    align-items: center;
}

/* Custom Track (visually replaces input background) */
.custom-track {
    position: absolute;
    left: 0;
    right: 0;
    height: 8px;
    background: #e5e7eb;
    border-radius: 999px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
}

/* Custom Thumb */
.custom-thumb {
    position: absolute;
    width: 32px;
    height: 32px;
    background: #2563eb;
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* Centered both X (by logic) and Y */
    z-index: 3;
    pointer-events: none;
    /* Let events pass to input */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 14px;
    border: 3px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s;
}

.custom-thumb.thumb-zero {
    background: #9ca3af;
}

/* Hide native thumbs completely */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 32px;
    width: 32px;
    opacity: 0;
}

input[type=range]::-moz-range-thumb {
    height: 32px;
    width: 32px;
    opacity: 0;
}


.scale-ticks {
    display: flex;
    /* Restore display */
    justify-content: space-between;
    margin-top: 6px;
    /* Space below slider */
    padding: 0 10px;
    /* Padding to align roughly with thumb center at edges? 
                        Input range is usually full width. 
                        Thumb centering usually requires some offset logic if we want perfect pixel alignment 
                        but standard justify-between is usually close enough for 0-5. 
                        Let's try standard first. */
    pointer-events: none;
}

.scale-dot {
    display: block;
    width: 6px;
    height: 6px;
    background: #d1d5db;
    /* Light gray */
    border-radius: 50%;
}


#app {
    max-width: 800px;
    margin: 40px auto;
    background: #ffffff;
    border-radius: 12px;
    padding: 24px 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

h1 {
    margin-top: 0;
}

label {
    display: block;
    margin-bottom: 12px;
}

input[type="text"],
input[type="password"],
input[type="number"],
select,
textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    margin-top: 4px;
    border-radius: 6px;
    border: 1px solid #d0d0d5;
}

button {
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    background: #2563eb;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
}

button.secondary {
    background: #e5e7eb;
    color: #111827;
}

button:disabled {
    opacity: 0.5;
    cursor: default;
}

.screen {
    display: block;
}

.hidden {
    display: none;
}

.error {
    margin-top: 8px;
    color: #b91c1c;
}

.test-header {
    margin-bottom: 16px;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 4px;
}

.progress-inner {
    height: 100%;
    width: 0;
    background: #2563eb;
    transition: width 0.2s ease-out;
}

.scale-bounds {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-top: 4px;
    color: #666;
}

/* Карточка вопроса */
#question-card h2,
#question-text {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}

/* Инструкция / description шкалы */
.question-instruction {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
    line-height: 1.4;
}

/* Контейнер ответа */
#answer-container {
    margin-top: 10px;
}

/* Шкала (range) */
.scale-row {
    margin-top: 4px;
}

.scale-row input[type="range"] {
    width: 100%;
}

/* Подписи слева/справа от шкалы */
.scale-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

/* Текущая выбранная цифра */
#scale-value-label {
    margin-top: 6px;
    font-size: 14px;
}

/* Варианты ответов – чтобы не липли друг к другу */
.option-item {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
}

#question-text:empty {
    display: none;
}

#test-progress-text {
    font-size: 13px;
    color: #6b7280;
}

/* ===== Группа вопросов: карточки ===== */
.group-question-item {
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 12px;
    padding: 14px 14px 12px;
    margin-bottom: 12px;
}

.group-question-text {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    line-height: 1.35;
    margin-bottom: 10px;
}

.group-question-control {
    margin-top: 6px;
}

/* ===== SCALE ===== */
.group-question-control input[type="range"] {
    width: 100%;
    margin: 6px 0 10px;
    accent-color: #2563eb;
}

.scale-value-label {
    margin-top: 8px;
    font-size: 17px;
    color: #2563eb;
    background: #eef2ff;
    border: 1px solid #dbeafe;
    padding: 6px 10px;
    border-radius: 999px;
    display: inline-block;
}

/* ===== Инструкция ===== */
#question-extra.question-instruction {
    font-size: 14px;
    color: #6b7280;
    margin: 8px 0 14px;
    line-height: 1.4;
}

/* ===== Кнопки: порядок и акценты ===== */
.buttons {
    margin-top: 16px;
    display: flex;
    gap: 10px;
    align-items: center;
}

#btn-test-exit,
#btn-media-exit {
    margin-left: auto;
    /* "Выход" уезжает вправо */
}

/* button {
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    font-weight: 600;
} */

button.secondary {
    border: 1px solid #e5e7eb;
}

textarea.three-words-comma {
    resize: none;
    min-height: 44px;
}

.other-input {
    width: 100%;
    margin: 8px 0 0 22px;
    /* лёгкий отступ под чекбокс */
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #d0d0d5;
    box-sizing: border-box;
}

.consent-text {
    line-height: 1.5;
    font-size: 15px;
    padding: 5px;
}

.consent-text ul {
    margin: 8px 0 0 18px;
    padding: 0;
}

.consent-text li {
    margin: 6px 0;
}

.consent-text a {
    text-decoration: underline;
}

.consent-text code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    padding: 2px 6px;
    border-radius: 6px;
    background: #f3f4f6;
}

/* ===== Multiselect dropdown ===== */
.ms {
    position: relative;
    width: 100%;
}

.ms-btn {
    width: 100%;
    height: 38px;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
}

.ms-btn:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.ms-count {
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
}

.ms-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .10);
    padding: 8px;
    max-height: 260px;
    overflow: auto;
    display: none;
    z-index: 20;
}

.ms.open .ms-panel {
    display: block;
}

.ms-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
}

.ms-item:hover {
    background: #f8fafc;
}

.ms-item input {
    margin: 0;
}

/* ===== Chaos block spacing ===== */
.chaos-block {
    margin-top: 12px;
    display: grid;
    gap: 10px;
}

.chaos-block .hint {
    margin-top: -4px;
}

.register-login-display {
    font-size: 16px;
    text-align: center;
    margin: 20px 0;
    padding: 12px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}

.download-credentials {
    margin: 12px 0 4px;
    text-align: center;
    color: #2563eb;
    text-decoration: underline;
    cursor: pointer;
    font-size: 14px;
}

.download-credentials:hover {
    opacity: 0.85;
}

/* ===== MBTI screen ===== */
.mbti-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 820px) {
    .mbti-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.mbti-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

.mbti-card:hover {
    border-color: #cbd5e1;
}

.mbti-card:active {
    transform: translateY(1px);
}

.mbti-card.selected {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.mbti-card img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 10px;
    background: #f3f4f6;
}

.mbti-title {
    font-weight: 700;
    font-size: 13px;
    color: #111827;
}

.mbti-desc {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

.mbti-help {
    margin-top: 14px;
    text-align: center;
}

.mbti-help a {
    color: #2563eb;
    text-decoration: underline;
}

.mbti-card {
    text-align: center;
}

.mbti-title,
.mbti-desc {
    text-align: center;
}

.mbti-title {
    width: 100%;
}

.mbti-desc {
    width: 100%;
}

/* ===== Legal modal ===== */
.modal.hidden {
    display: none;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.modal-card {
    position: relative;
    width: min(900px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    margin: 24px auto;
    background: #fff;
    border-radius: 16px;
    padding: 18px 18px 16px;
    overflow: hidden;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f3f4f6 !important;
    color: #828385 !important;
    font-size: 0;
    cursor: pointer;
    z-index: 99999;
    -webkit-appearance: none;
    appearance: none;
}

.modal-close::before {
    content: "×";
    font-size: 24px;
    line-height: 1;
    font-weight: 800;
    color: #828385;
}

.modal-title {
    text-align: center;
    font-weight: 800;
    font-size: 18px;
    margin: 6px 44px 10px;
}

.modal-content {
    max-height: calc(100vh - 160px);
    overflow: auto;
    padding: 10px 6px 6px;
    line-height: 1.55;
    font-size: 14px;
    white-space: normal;
    text-align: left;
}

.modal-content p {
    margin: 0 0 10px;
}

.modal-content ul,
.modal-content ol {
    margin: 0 0 10px 22px;
}

.modal-content li {
    margin: 4px 0;
}

.modal-content strong {
    font-weight: 700;
}

/* ================== MEDIA TEST STYLES ================== */

.media-test-header {
    margin-bottom: 24px;
}

.module-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.module-tab {
    flex: 1;
    padding: 12px;
    text-align: center;
    background: #f3f4f6;
    border-radius: 8px;
    cursor: default;
    transition: all 0.2s;
    font-weight: 500;
    font-size: 14px;
}

.module-tab.active {
    background: #3b82f6;
    color: white;
}

.module-tab.completed {
    background: #10b981;
    color: white;
}

#media-test-progress-text {
    text-align: center;
    margin-bottom: 8px;
    font-size: 14px;
    color: #6b7280;
}

/* Audio Player */
#audio-player-container {
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
}

#audio-player {
    width: 100%;
    margin-bottom: 12px;
}

#audio-timer {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

#audio-fragment-name {
    text-align: center;
    font-size: 14px;
    color: #6b7280;
}

/* Media Question Items */
.media-question-item {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
}

.media-question-text {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
    color: #1f2937;
}

/* Scale widget for media test */
.media-scale-widget {
    margin: 12px 0;
}

.media-scale-widget input[type="range"] {
    width: 100%;
    margin: 12px 0;
}

.media-scale-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 8px;
}

.media-scale-value {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #3b82f6;
    margin-top: 8px;
}

/* Choice widgets */
.media-choice-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.media-choice-option {
    display: flex;
    align-items: center;
    padding: 12px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.media-choice-option:hover {
    border-color: #3b82f6;
    background: #f0f9ff;
}

.media-choice-option input[type="radio"],
.media-choice-option input[type="checkbox"] {
    margin-right: 10px;
}

.media-choice-option.selected {
    border-color: #3b82f6;
    background: #eff6ff;
}

/* Text widgets */
.media-text-input,
.media-text-area {
    width: 100%;
    padding: 10px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
}

.media-text-area {
    min-height: 80px;
    resize: vertical;
}

.media-text-input:focus,
.media-text-area:focus {
    outline: none;
    border-color: #3b82f6;
}

/* Ranking Widget */
.ranking-widget {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
}

.ranking-item {
    padding: 12px 16px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    cursor: move;
    transition: all 0.2s;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ranking-item::before {
    content: "☰";
    color: #9ca3af;
    font-size: 16px;
}

.ranking-item:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ranking-item.dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

.ranking-item.drag-over {
    border-color: #3b82f6;
    background: #eff6ff;
}

/* Table Input Widget */
.table-input-widget {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}

.table-input-widget th {
    background: #f3f4f6;
    padding: 10px;
    text-align: left;
    font-weight: 600;
    border: 1px solid #e5e7eb;
}

.table-input-widget td {
    padding: 8px;
    border: 1px solid #e5e7eb;
}

.table-input-widget input {
    width: 100%;
    padding: 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
}

.table-input-widget input:focus {
    outline: none;
    border-color: #3b82f6;
}

/* Table Scale Widget */
.table-scale-widget {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
    margin: 12px 0;
}

.table-scale-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
}

.table-scale-row-label {
    font-weight: 600;
    font-size: 14px;
    color: #374151;
}

.table-scale-row-scale {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.table-scale-row-scale input[type="range"] {
    width: 100%;
    margin: 8px 0;
}

.table-scale-row-scale .table-scale-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #6b7280;
}

.table-scale-row-scale .table-scale-value {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #3b82f6;
    margin-top: 4px;
}

/* Table Multiple Choice Widget */
.table-multiple-choice-widget {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
    margin: 12px 0;
}

.table-multiple-choice-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
}

.table-multiple-choice-row-label {
    font-weight: 600;
    font-size: 14px;
    color: #374151;
    margin-bottom: 8px;
}

.table-multiple-choice-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.table-multiple-choice-option {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
}

.table-multiple-choice-option:hover {
    border-color: #3b82f6;
    background: #f0f9ff;
}

.table-multiple-choice-option input[type="checkbox"] {
    margin-right: 6px;
}

.table-multiple-choice-option.selected {
    border-color: #3b82f6;
    background: #eff6ff;
}

.table-other-input {
    margin-left: 6px;
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
    min-width: 150px;
}

.table-other-input:focus {
    outline: none;
    border-color: #3b82f6;
}

.media-question-item.error-border {
    border: 2px solid #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
    transition: all 0.2s ease;
}

.media-question-item.error-border:hover {
    border-color: #dc2626;
}

.media-question-item.error-highlight {
    border: 2px solid #ef4444;
    background-color: #fef2f2;
    transition: all 0.3s ease;
}

.input-error {
    border-color: #ef4444 !important;
    background-color: #fef2f2;
    transition: all 0.2s;
}



.input-error:focus {
    border-color: #b91c1c !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

/* New Block Code Header */
#test-block-header {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    /* Bold */
    color: #374151;
    /* Darker than before */
    margin: 12px 0 16px;
    line-height: 1.4;
}


#test-block-header.hidden {
    display: none;
}

/* Skills definitions */
#skills-definitions {
    margin: 0 0 16px;
    padding: 12px;
    background: #f3f4f6;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}

#skills-definitions.hidden {
    display: none;
}

/* ===== Новые стили для шкал ===== */

.scale-slider-container {
    position: relative;
    padding: 10px 0;
}

.scale-value-label {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

/* Стиль для "Нет мнения" */
.scale-value-label.value-zero {
    background-color: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

/* Стиль для выбранного значения */
.scale-value-label.value-active {
    background-color: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

/* Циферки под слайдером */
.scale-ticks {
    display: flex;
    justify-content: space-between;
    margin-top: -6px;
    /* Чуть ближе к ползунку */
    padding: 0 2px;
    font-size: 11px;
    color: #9ca3af;
    pointer-events: none;
}

/* Кастомизация самого ползунка (input type=range) */
input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    /* Скрываем стандартный стиль */
    width: 100%;
    background: #e5e7eb;
    /* Default gray background */
    height: 8px;
    /* Same as track height */
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s linear;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}

input[type=range]:focus {
    outline: none;
}

/* Дорожка слайдера (Track) - делаем прозрачной, чтобы виден был фон input */
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: transparent;
    border-radius: 999px;
    border: none;
}

/* Бегунок (Thumb) - по умолчанию СИНИЙ */
input[type=range]::-webkit-slider-thumb {
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #2563eb;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: 0;
    /* Центрируем, так как track прозрачный, thumb сидит на input */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: 2px solid #fff;
    transition: transform 0.1s ease, background 0.2s;
}

/* Бегунок, когда выбрано "0" (СЕРЫЙ) */
input[type=range].range-zero::-webkit-slider-thumb {
    background: #9ca3af;
}

/* Для Firefox */
input[type=range]::-moz-range-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: transparent;
    border-radius: 999px;
}

input[type=range]::-moz-range-thumb {
    height: 24px;
    width: 24px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #2563eb;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input[type=range].range-zero::-moz-range-thumb {
    background: #9ca3af;
}

/* ===== Ranking Vertical Scale (Visual Only) ===== */
.ranking-wrapper {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.ranking-scale-visual {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 60px;
    padding: 10px 0;
    position: relative;
    flex-shrink: 0;
}

.ranking-scale-line {
    position: absolute;
    left: 50%;
    top: 25px;
    /* Adjust based on label height approx */
    bottom: 25px;
    width: 2px;
    background-color: #d1d5db;
    transform: translateX(-50%);
    z-index: 0;
}

.ranking-scale-label {
    font-size: 11px;
    color: #6b7280;
    text-align: center;
    background: #fff;
    /* Hide line behind text */
    z-index: 1;
    padding: 2px 4px;
    line-height: 1.2;
}

.ranking-items-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ================== GAME SCREEN (TRANSITION) ================== */
#screen-game {
    position: relative;
    max-width: 900px;
    margin: 40px auto;
    padding: 40px;
    display: flex;
    flex-direction: column;
    min-height: 80vh;
    /* Soft gradient background */
    background: radial-gradient(circle at 10% 20%, rgba(219, 234, 254, 0.5) 0%, transparent 20%),
        radial-gradient(circle at 90% 50%, rgba(254, 243, 199, 0.5) 0%, transparent 20%);
}

#game-screen-content {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center everything mainly */
    justify-content: center;
}

/* NEW: Hero Wrapper */
.game-hero-block {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
}

/* 1. Top Row: Bubble + Avatar */
.game-top-row {
    display: flex;
    align-items: center;
    /* Vertical align center */
    margin-bottom: -20px;
    /* Overlap with glass bar slightly? Or just close */
    margin-bottom: 20px;
    gap: 20px;
}

/* Speech Bubble */
.game-speech-bubble {
    flex: 1;
    /* Take available width */
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    font-size: 1.5rem;
    /* Large font */
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}

/* Bubble Tail: Pointing RIGHT to Avatar */
.game-speech-bubble::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -14px;
    /* Stick out right */
    margin-top: -10px;
    width: 20px;
    height: 20px;
    background: #fff;
    /* Rotation 45deg to make a diamond */
    transform: rotate(45deg);
    /* Fake shadow match if possible, or just keep it flat white */
}

/* Avatar Circle */
.game-avatar-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #d1d5db;
    /* gray fallback */
    border: 4px solid #60a5fa;
    /* Blue ring */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

/* 2. Glass Bar (Name/Title) */
.game-glass-bar {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 20px 30px;
    font-size: 1.1rem;
    color: #1f2937;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    width: 100%;
    /* Full width of container */
    box-sizing: border-box;
    /* In image it looks wider but contained. We use container width. */
}

/* 3. Flying Circles Area (Bottom Left Row style in animation) */
.game-circles-area {
    margin-top: auto;
    height: 150px;
    width: 100%;
    position: relative;
}

.game-flying-circle {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid #fff;
    /* White border */
    background: #60a5fa;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Randomize colors via nth-child */
.game-flying-circle:nth-child(1) {
    background-color: #93c5fd;
}

.game-flying-circle:nth-child(2) {
    background-color: #fca5a5;
}

.game-flying-circle:nth-child(3) {
    background-color: #86efac;
}

.game-flying-circle:nth-child(4) {
    background-color: #fcd34d;
}

.game-flying-circle:nth-child(5) {
    background-color: #d8b4fe;
}

/* Fix visibility: ID selector #screen-game (display:flex) overrides .hidden (display:none) */
#screen-game.hidden {
    display: none;
}

/* === MAGIC WAND ANIMATION === */
.game-magic-wand {
    position: absolute;
    top: 60px;
    right: 80px;
    width: 60px;
    height: 60px;
    z-index: 5;
    /* Rotation anchor bottom-left */
    transform-origin: bottom left;
    animation: wandWave 2.5s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

@keyframes wandWave {

    0%,
    100% {
        transform: rotate(0deg);
    }

    15% {
        transform: rotate(-15deg);
    }

    /* Wind up */
    30% {
        transform: rotate(10deg);
    }

    /* Cast */
    45% {
        transform: rotate(-5deg);
    }

    60% {
        transform: rotate(0deg);
    }
}

/* Sparkles */
.magic-sparkle {
    position: absolute;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

/* ================== GAME SCREEN (Styles) ================== */
.game-hero-block {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.game-top-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-bottom: 25px;
}

.game-speech-bubble {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 20px;
    border-bottom-right-radius: 4px;
    /* "Tail" effect */
    padding: 20px;
    font-size: 16px;
    color: #374151;
    font-weight: 500;
    line-height: 1.5;
    position: relative;
    max-width: 300px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.game-avatar-circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    /* border: 4px solid #fff; */
    /* box-shadow: 0 4px 20px rgba(0,0,0,0.15); */
    background: #e5e7eb;
    overflow: visible;
    /* To allow wand to stick out */
    position: relative;
}

/* Note: .game-magic-wand styles defined above, reusing or overriding if needed */

.game-glass-bar {
    background: rgba(243, 244, 246, 0.85);
    /* Light gray transparent */
    border-radius: 12px;
    padding: 16px 20px;
    text-align: center;
    font-size: 15px;
    color: #4b5563;
    line-height: 1.5;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.game-circles-area {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.game-flying-circle {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
    opacity: 0.6;
    transform: translate(-50%, -50%);
}

/* ================== MOBILE RESPONSIVE ================== */

@media (max-width: 640px) {

    /* Main Layout */
    #app {
        margin: 10px auto;
        padding: 16px 16px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        border-radius: 0;
        min-height: 100vh;
    }

    /* Game Screen */
    .game-hero-block {
        padding: 20px 15px;
    }

    .game-top-row {
        flex-direction: column-reverse;
        /* Avatar on top */
        gap: 15px;
    }

    .game-speech-bubble {
        max-width: 100%;
        text-align: center;
        border-bottom-right-radius: 20px;
        /* Reset tail */
        border-top-right-radius: 4px;
        /* New tail pointing up to avatar? */
    }

    .game-avatar-circle {
        width: 120px;
        height: 120px;
    }

    /* Media Test */
    .module-selector {
        flex-direction: row;
        overflow-x: auto;
        /* Scroll if tabs need space */
    }

    .module-tab {
        padding: 8px;
        font-size: 12px;
        min-width: 80px;
    }

    /* Audio Player */
    #audio-player-container {
        padding: 15px;
    }

    /* Buttons */
    .buttons {
        flex-direction: column-reverse;
        /* Secondary/Prev below Primary/Next */
    }

    .buttons button {
        width: 100%;
        /* Full width buttons for tough */
        height: 48px;
        /* Taller for touch */
    }

    #btn-test-exit,
    #btn-media-exit {
        margin-left: 0;
        margin-bottom: 10px;
        width: 100%;
    }

    /* General Inputs */
    input[type="range"] {
        height: 12px;
        /* Thicker touch target */
    }

    /* Text size bump for readability */
    body {
        font-size: 16px;
    }

    .scale-row {
        margin-bottom: 20px;
        /* More spacing for fingers */
    }
}