/* Online tuning fork (tuning_fork). Сцена — композиция арта legacy (вилка + ящик), координаты
   приходят из config.php: позиционирует и масштабирует JS (две раскладки — десктоп/мобайл).
   Цвета сняты пипеткой с legacy-арта: крем #fdfaf3 (фон legacy #camerton), бордо #802e20 (подписи
   legacy), латунь #fded98/#e6b66c/#b89f73 и чернила гравировки #4d1b13 (табличка ящика).
   Префикс .tfork. */

.tfork {
    /* компонентные токены (цвета — с оригинального арта) */
    --tfork-cream: #fdfaf3;
    --tfork-bordeaux: #802e20;
    --tfork-brass-hi: #fded98;
    --tfork-brass: #e6b66c;
    --tfork-brass-dark: #b89f73;
    --tfork-ink: #4d1b13;
    --tfork-mahogany-hi: #8e3a27;
    --tfork-mahogany: #6b2417;
    --tfork-mahogany-dark: #491209;

    position: relative;
    margin: 0 auto;
    overflow: hidden;
    background: var(--tfork-cream);
    border-radius: 8px;
    /* ширину/высоту ставит JS по раскладке и масштабу */
}


.tfork__scene {
    position: relative;
    transform-origin: 0 0;
    user-select: none;
    -webkit-user-select: none;
}

/* --- Вилка --- */

.tfork__fork {
    position: absolute;
    background: none;
    border: 0;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    /* padding (тач-зона) — inline из config; компенсируется JS при позиционировании */
}

.tfork__fork-img {
    display: block;
    width: 80px;
    height: 464px;
    /* тряску (translate) ставит JS на саму картинку — кнопка и тач-зона не дёргаются */
}

/* --- Ящик и табличка --- */

.tfork__corpus {
    position: absolute;
    pointer-events: none;
}

.tfork__corpus img { display: block; }

.tfork__plate {
    position: absolute;
    /* размеры/позиция — inline из config (px внутри corpus) */
}

/* --- Подсказка со стрелкой --- */

/* Как в legacy #help: текст строкой сверху, стрелка ПОД ним, прижата вправо (float:right) */
.tfork__cue {
    position: absolute;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.tfork__cue.is-hidden { opacity: 0; }

.tfork__cue-text {
    font-size: 20px;
    line-height: 1.25;
    color: var(--tfork-bordeaux);
}

.tfork__cue-arrow {
    display: block;
    margin-left: auto; /* правый край блока, как float:right в legacy */
    height: auto;
}

@media (prefers-reduced-motion: reduce) {
    .tfork__cue-arrow { animation: none !important; }
}

/* --- Селектор эталона: латунные шильдики --- */

.tfork__pitch {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    max-width: 108px; /* на мобайле складывается столбиком 2×2 */
}

.tfork__pitch-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--tfork-bordeaux);
    flex: 0 0 100%;
}

.tfork__pitch-btn {
    border: 1px solid var(--tfork-brass-dark);
    border-radius: 4px;
    padding: 3px 7px;
    font-size: 13px;
    line-height: 1.2;
    color: var(--tfork-ink);
    background: linear-gradient(160deg, var(--tfork-brass-hi) 0%, var(--tfork-brass) 55%, var(--tfork-brass-dark) 100%);
    box-shadow: 0 1px 2px rgba(73, 18, 9, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.tfork__pitch-btn:hover { filter: brightness(1.05); }

.tfork__pitch-btn.is-active {
    /* «вдавленный» шильдик: гравировка */
    background: linear-gradient(160deg, var(--tfork-brass) 0%, var(--tfork-brass-hi) 60%, var(--tfork-brass) 100%);
    box-shadow: inset 0 1px 3px rgba(73, 18, 9, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.4);
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(255, 236, 178, 0.7);
}

/* --- Громкость (порода guitar_tuner) --- */

.tfork__volume {
    position: absolute;
    width: 53px;
    /* высота (кликабельная зона) — inline из config: короче арта трека,
       чтобы не пересекаться с кнопкой mute под шкалой */
    cursor: pointer;
    touch-action: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.tfork__volume-track {
    position: absolute;
    left: 0;
    top: 0; /* натуральный размер арта (может быть выше кликабельной зоны — низ у него пустой) */
    pointer-events: none;
}

.tfork__volume-thumb {
    position: absolute;
    left: 0;
    top: 0; /* точную позицию ставит JS по громкости */
    pointer-events: none;
}

/* Кнопка = ровно иконка, без полей: любые поля сверху отжимали бы динамик от шкалы */
.tfork__mute {
    position: absolute;
    width: 30px;
    height: 30px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.tfork__mute img {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    transition: opacity 0.1s ease;
}

.tfork__mute .tfork__mute-off { opacity: 0; }
.tfork[data-muted="1"] .tfork__mute .tfork__mute-on  { opacity: 0; }
.tfork[data-muted="1"] .tfork__mute .tfork__mute-off { opacity: 1; }

/* --- Repeat: латунный тумблер на махагоновой плашке --- */

.tfork__repeat {
    position: absolute;
    text-align: center;
    /* ширину ставит JS из раскладки (repeat_w) */
}

/* Мобильная раскладка: тумблер слева, пояснение справа — строка без пустых полей */
.tfork[data-mode="mobile"] .tfork__repeat {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.tfork[data-mode="mobile"] .tfork__repeat .tfork__repeat-hint {
    flex: 1;
    margin: 0;
}

.tfork__toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--tfork-mahogany-dark);
    border-radius: 7px;
    padding: 6px 12px 8px;
    background: linear-gradient(175deg, var(--tfork-mahogany-hi) 0%, var(--tfork-mahogany) 55%, var(--tfork-mahogany-dark) 100%);
    box-shadow: 0 2px 4px rgba(73, 18, 9, 0.35), inset 0 1px 0 rgba(255, 210, 160, 0.25);
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.tfork__toggle-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--tfork-brass-hi);
    text-shadow: 0 -1px 0 rgba(73, 18, 9, 0.7);
}

.tfork__toggle-track {
    position: relative;
    display: block;
    width: 46px;
    height: 20px;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--tfork-mahogany-dark), var(--tfork-mahogany));
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 210, 160, 0.18);
    transition: background 0.15s ease;
}

.tfork__toggle-knob {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--tfork-brass-hi) 0%, var(--tfork-brass) 55%, var(--tfork-brass-dark) 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    transition: left 0.15s ease;
}

.tfork__toggle[aria-checked="true"] .tfork__toggle-track {
    background: linear-gradient(180deg, #9a6a2e, var(--tfork-brass-dark));
}

.tfork__toggle[aria-checked="true"] .tfork__toggle-knob { left: 28px; }

.tfork__repeat-hint {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.35;
    color: var(--tfork-bordeaux);
    opacity: 0.75;
}