/* Online guitar tuner (guitar_tuner). Сцена — оригинальный flash-арт 772×591, масштабируется
   целиком (transform: scale на .gtun__scene, высоту обёртки держит JS). Все накладные элементы
   позиционируются в px СЦЕНЫ (координаты приходят из config.php через index.php inline-style).
   Цвета текста сняты пипеткой с оригинальных скриншотов flash-версии. Префикс .gtun. */


/* --- Сцена --- */

.gtun {
    position: relative;
    max-width: calc(var(--gtun-w) * 1px);
    margin: 0 auto;
    overflow: hidden;
    /* высоту ставит JS по масштабу; запас до первого расчёта */
    height: auto;
}

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

.gtun__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: block;
}

/* --- Струны (SVG-оверлей) --- */

.gtun__strings {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.gtun__string-hit {
    stroke: transparent;
    pointer-events: stroke;
    cursor: pointer;
}

.gtun__string-vib {
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 1.6;
    pointer-events: none;
    opacity: 0;
}

.gtun__string-vib.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .gtun__string-vib { display: none; }
}

/* --- Колки и буквы --- */

.gtun__peg,
.gtun__title {
    position: absolute;
    transform: translate(-50%, -50%);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* Свечение колка = ореол (синтезирован по силуэту кнопки) + кремовая кнопка-замена (из SWF).
   Оба центрируются на центре кнопки арта — посадка выверена кросс-корреляцией с оригиналом. */
.gtun__peg-halo,
.gtun__peg-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.gtun__peg.is-playing .gtun__peg-glow,
.gtun__peg.is-cue .gtun__peg-glow,
.gtun__peg.is-playing .gtun__peg-halo,
.gtun__peg.is-cue .gtun__peg-halo { opacity: 1; }

.gtun__title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 36px;
    line-height: 1;
    color: #959595;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

.gtun__title:hover,
.gtun__title.is-playing { color: #6f6f6f; }

/* --- Подсказка-стрелка «Click :)» --- */

/* Покачивание стрелки — НЕ через CSS-transform: он растрирует слой и возит его по дробным
   пикселям (стрелка и текст мутнеют). Двигает JS целыми пикселями через margin-left. */
.gtun__cue {
    position: absolute;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

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

.gtun__cue img { display: block; }

/* Текст по визуальной середине стрелки (по просьбе владельца ниже, чем в оригинале) */
.gtun__cue-text {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #8a8a8a;
    white-space: nowrap;
}

/* --- Табло «2 string / B / (Si)» --- */

.gtun__display {
    position: absolute;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    font-family: Georgia, 'Times New Roman', serif;
    text-align: center;
}

/* Размеры сняты с оригинала: «2 string» h≈10px, буква (cap) h≈105px, «(Si)» h≈31px.
   Отступ между «N string» и буквой чуть больше оригинала — по просьбе владельца. */
.gtun__display-num {
    font-size: 15px;
    color: #a5a5a5;
    line-height: 1;
    margin-top: 2px;
}

.gtun__display-note {
    font-size: 150px;
    color: #898989;
    line-height: 0.78;
    margin-top: 2px;
}

.gtun__display-solfege {
    font-size: 21px;
    color: #9a9a9a;
    line-height: 1.1;
    margin-top: -2px;
}

/* --- Repeat --- */

.gtun__repeat {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gtun__repeat-label {
    font-size: 15px;
    color: #979797;
    line-height: 14px;
    margin-bottom: 1px;
}

.gtun__toggle {
    position: relative;
    width: 126px;
    height: 58px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.gtun__toggle-track {
    position: absolute;
    inset: 0;
    transition: opacity 0.15s ease;
}

/* Белый трек виден всегда; синяя пилюля (чуть меньше, с белой каймой) проявляется поверх — как во flash */
.gtun__toggle-track--on {
    opacity: 0;
    inset: auto;
    left: 4px;
    top: 3px;
    width: 118px;
    height: 52px;
}
.gtun__toggle[aria-checked="true"] .gtun__toggle-track--on { opacity: 1; }

.gtun__toggle-text {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.gtun__toggle-text--off {
    left: 57px;
    width: 62px;
    color: #c8c8c9;
}

.gtun__toggle-text--on {
    left: 8px;
    width: 62px;
    color: #ffffff;
    opacity: 0;
}

.gtun__toggle[aria-checked="true"] .gtun__toggle-text--on  { opacity: 1; }
.gtun__toggle[aria-checked="true"] .gtun__toggle-text--off { opacity: 0; }

.gtun__toggle-knob {
    position: absolute;
    top: 0;
    left: 1px;
    transition: left 0.15s ease;
    pointer-events: none;
}

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

/* --- Громкость --- */

.gtun__volume {
    position: absolute;
    width: 53px;
    height: 135px;
    cursor: pointer;
    touch-action: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.gtun__volume-track {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.gtun__volume-thumb {
    position: absolute;
    left: 0;
    top: 0; /* точную позицию (центр кноба на оси шкалы) ставит JS по громкости */
    pointer-events: none;
}

/* Кнопка-динамик (mute) под шкалой: вырезана из арта трека, mute-версия — с перечёркиванием.
   Кнопка крупнее иконки (тач-зона), сама иконка 30×30 по центру. */
.gtun__mute {
    position: absolute;
    width: 46px;
    height: 42px;
    margin: -6px 0 0 -8px; /* центр иконки остаётся на месте арта */
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.gtun__mute img {
    position: absolute;
    left: 8px;
    top: 6px;
    width: 30px;
    height: 30px;
    transition: opacity 0.1s ease;
}

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

/* --- Help --- */

.gtun__help {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: 0;
    padding: 4px;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    font-size: 15px;
    color: #a9a9a9;
}

.gtun__help:hover { color: #7f7f7f; }

.gtun__help-ic {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #a2a2a2;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.gtun__helppanel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(440px, 86%);
    background: #fff;
    border: 1px solid var(--tls-border, #dee2e6);
    border-radius: 12px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.18);
    padding: 18px 40px 16px 20px;
    z-index: 10;
}

.gtun__helppanel-title {
    font-weight: 700;
    margin: 0 0 8px;
}

.gtun__helppanel-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--tls-muted, #6c757d);
}

.gtun__helppanel-close {
    position: absolute;
    top: 6px;
    right: 10px;
    background: none;
    border: 0;
    font-size: 26px;
    line-height: 1;
    color: #a9a9a9;
    cursor: pointer;
    outline: none;
}

.gtun__helppanel-close:hover { color: #6f6f6f; }

/* Блок «How it works» переехал в общий блок движка (templates/partials/tool_explain.php). */