/* === ОФИЦИАЛЬНЫЕ СТИЛИ С АНИМАЦИЕЙ ВЕСОВ (trainer-scales) === */
.wp-scales-trainer-wrapper, .wp-scales-trainer-wrapper * {
    box-sizing: border-box !important; line-height: normal !important;
}
.wp-scales-trainer-wrapper {
    width: 100% !important; display: flex !important; justify-content: center !important; margin: 20px 0 !important;
}
.wp-scales-trainer-wrapper p { margin: 0 !important; padding: 0 !important; display: inline !important; }
.wp-scales-trainer-wrapper br { display: none !important; }

.wp-scales-trainer-wrapper .trainer-card {
    width: 100% !important; max-width: 600px !important; background: #ffffff !important; padding: 25px;
    border-radius: 12px !important; box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important; border: 1px solid #e2e8f0 !important; text-align: center !important;
}
.wp-scales-trainer-wrapper h2 { font-size: 22px !important; margin: 0 0 15px 0 !important; color: #1e293b !important; }

/* Двухкомпонентная инфо-панель */
.wp-scales-trainer-wrapper .game-info-bar {
    display: flex !important; justify-content: space-between !important; align-items: center !important; margin: 15px 0 !important; padding: 12px 18px !important; background: #f8fafc !important; border: 1px solid #cbd5e1 !important; border-radius: 8px !important; gap: 15px !important;
}
.wp-scales-trainer-wrapper .scales-timer-box { font-weight: bold !important; font-size: 15px !important; color: #1c73a8 !important; }
.wp-scales-trainer-wrapper .combo-text { font-size: 15px !important; font-weight: bold !important; color: #b45309 !important; }

/* Сетка рамки весов для ПК */
.wp-scales-trainer-wrapper .scales-frame {
    width: 100% !important; max-width: 440px !important; height: 260px !important; margin: 25px auto !important; position: relative !important; background: #f8fafc !important; border: 2px dashed #cbd5e1 !important; border-radius: 10px !important;
    overflow: visible !important;
}

/* Внутренний блок текстовых подсказок */
.wp-scales-trainer-wrapper .scales-feedback-zone {
    position: absolute !important; top: 12px !important; left: 15px !important; right: 15px !important; height: 38px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 6px !important; font-size: 13px !important; font-weight: bold !important; transition: all 0.3s ease !important; color: #475569 !important; background: #ffffff !important; border: 1px solid #cbd5e1 !important; text-align: center !important; z-index: 10 !important; padding: 4px 15px !important;
}

.wp-scales-trainer-wrapper .scales-base {
    position: absolute !important; bottom: 0 !important; left: 50% !important; transform: translateX(-50%) !important; width: 16px !important; height: 135px !important; background: #64748b !important; border-radius: 4px 4px 0 0 !important; z-index: 1 !important;
}
.wp-scales-trainer-wrapper .scales-base::after {
    content: "" !important; position: absolute !important; bottom: 0 !important; left: 50% !important; transform: translateX(-50%) !important; width: 60px !important; height: 10px !important; background: #475569 !important; border-radius: 4px 4px 0 0 !important;
}

.wp-scales-trainer-wrapper .scales-beam {
    position: absolute !important; top: 115px !important; left: 50% !important; width: 320px !important; height: 8px !important; background: #475569 !important; margin-left: -160px !important; transform-origin: center center !important; transition: transform 0.5s ease-in-out !important; z-index: 2 !important;
}
.wp-scales-trainer-wrapper .scales-beam::before {
    content: "" !important; position: absolute !important; top: -6px !important; left: 50% !important; margin-left: -6px !important; width: 12px !important; height: 12px !important; background: #f59e0b !important; border-radius: 50% !important;
}

/* Стабилизированные нити */
.wp-scales-trainer-wrapper .scale-string {
    position: absolute !important; top: 8px !important; width: 2px !important; height: 45px !important; background: #94a3b8 !important; transition: transform 0.5s ease-in-out !important;
}
.wp-scales-trainer-wrapper .string-left { left: 10px !important; }
.wp-scales-trainer-wrapper .string-right { right: 10px !important; }

.wp-scales-trainer-wrapper .scale-cup {
    position: absolute !important; top: 45px !important; width: 100px !important; height: 45px !important; background: #cbd5e1 !important; border: 3px solid #64748b !important; border-top: none !important; border-radius: 0 0 50px 50px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; transition: all 0.5s ease-in-out !important;
}
.wp-scales-trainer-wrapper .cup-left { left: -50px !important; }
.wp-scales-trainer-wrapper .cup-right { right: -50px !important; }

.wp-scales-trainer-wrapper .weight-box { font-size: 15px !important; font-weight: bold !important; color: #1e293b !important; text-align: center !important; font-family: monospace !important; line-height: 1.2 !important; }
.wp-scales-trainer-wrapper .weight-item { background: #e2e8f0 !important; border: 2px solid #64748b !important; border-radius: 4px !important; padding: 2px 6px !important; margin: 1px 0 !important; display: inline-block !important; font-size: 13px !important; color: #334155 !important; }
.wp-scales-trainer-wrapper .weight-x-box { background: #007bff !important; color: #ffffff !important; border: 2px solid #0056b3 !important; border-radius: 4px !important; padding: 2px 6px !important; display: inline-block !important; font-weight: 900 !important; font-size: 13px !important; }
/* Плавные наклоны коромысла */
.wp-scales-trainer-wrapper .scales-frame.state-left-light .scales-beam { transform: rotate(6deg) !important; }
.wp-scales-trainer-wrapper .scales-frame.state-left-light .cup-left { transform: translateY(-16px) !important; }
.wp-scales-trainer-wrapper .scales-frame.state-left-light .cup-right { transform: translateY(16px) !important; }

.wp-scales-trainer-wrapper .scales-frame.state-left-heavy .scales-beam { transform: rotate(-6deg) !important; }
.wp-scales-trainer-wrapper .scales-frame.state-left-heavy .cup-left { transform: translateY(16px) !important; }
.wp-scales-trainer-wrapper .scales-frame.state-left-heavy .cup-right { transform: translateY(-16px) !important; }

.wp-scales-trainer-wrapper .scales-frame.state-success .scale-cup { background: #e6f4ea !important; border-color: #28a745 !important; }
.wp-scales-trainer-wrapper .scales-frame.state-success .scales-beam { background: #28a745 !important; }

/* Ввод ответа */
.wp-scales-trainer-wrapper .answer-input-box {
    display: flex !important; justify-content: center !important; align-items: center !important; gap: 10px !important; margin: 20px 0 !important;
}
.wp-scales-trainer-wrapper .game-input {
    width: 120px !important; height: 48px !important; font-size: 24px !important; font-weight: bold !important; text-align: center !important; border: 2px solid #007bff !important; border-radius: 8px !important; color: #1e293b !important; background: #ffffff !important; padding: 0 !important;
}
.wp-scales-trainer-wrapper .game-input::-webkit-outer-spin-button, .wp-scales-trainer-wrapper .game-input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; }
.wp-scales-trainer-wrapper .game-input { -moz-appearance: textfield !important; }

/* Стили кнопок управления */
.wp-scales-trainer-wrapper .action-buttons-box {
    display: flex !important; justify-content: center !important; gap: 12px !important; flex-wrap: wrap !important; margin-top: 15px !important; width: 100% !important;
}
.wp-scales-trainer-wrapper .btn-action {
    background-color: #28a745 !important; color: #ffffff !important; border: none !important; border-radius: 6px !important; font-size: 15px !important; font-weight: bold !important; height: 44px !important; padding: 0 25px !important; cursor: pointer !important; transition: background 0.2s ease-in-out !important; display: inline-block !important; text-decoration: none !important;
}
.wp-scales-trainer-wrapper .btn-action:hover { background-color: #218838 !important; }
.wp-scales-trainer-wrapper .btn-blue { background-color: #007bff !important; }
.wp-scales-trainer-wrapper .btn-blue:hover { background-color: #0056b3 !important; }
.wp-scales-trainer-wrapper .btn-orange { background-color: #f59e0b !important; }
.wp-scales-trainer-wrapper .btn-orange:hover { background-color: #d97706 !important; }

@media (max-width: 480px) {
    .wp-scales-trainer-wrapper .trainer-card { padding: 15px 5px !important; }
    .wp-scales-trainer-wrapper .btn-action { width: 100% !important; }
    .wp-scales-trainer-wrapper .action-buttons-box { flex-direction: column !important; gap: 8px !important; }
    .wp-scales-trainer-wrapper .game-info-bar { flex-direction: column !important; gap: 6px !important; text-align: center !important; }
    
    .wp-scales-trainer-wrapper .scales-frame { 
        width: 100% !important;
        max-width: 290px !important; 
        height: 250px !important; 
        margin: 15px auto !important; 
    }
    .wp-scales-trainer-wrapper .scales-beam {
        width: 210px !important;
        margin-left: -105px !important;
        top: 120px !important;
    }
    .wp-scales-trainer-wrapper .scale-cup {
        width: 76px !important;
        height: 36px !important;
        top: 35px !important;
    }
    .wp-scales-trainer-wrapper .cup-left { left: -38px !important; }
    .wp-scales-trainer-wrapper .cup-right { right: -38px !important; }
    
    .wp-scales-trainer-wrapper .scale-string {
        height: 35px !important;
    }
    .wp-scales-trainer-wrapper .scales-base {
        height: 125px !important;
    }
    
    .wp-scales-trainer-wrapper .scales-frame.state-left-light .cup-left { transform: translateY(-11px) !important; }
    .wp-scales-trainer-wrapper .scales-frame.state-left-light .cup-right { transform: translateY(11px) !important; }
    .wp-scales-trainer-wrapper .scales-frame.state-left-heavy .cup-left { transform: translateY(11px) !important; }
    .wp-scales-trainer-wrapper .scales-frame.state-left-heavy .cup-right { transform: translateY(-11px) !important; }
}