/* Стили прибора — построчный перенос инлайновых стилей оригинала
   (tuner-online.ru, instruments/guitar_tuner/index.php). Числа не подбирались:
   они взяты оттуда как есть. Отличия от оригинала помечены комментарием.

   Про шрифты. На оригинальном сайте шрифт для body НЕ задан вообще, и буква ноты
   с галочкой микрофона рисуются дефолтным шрифтом браузера (Times New Roman) с
   line-height: normal. Наш сайт навязывает свою типографику (Droid Sans/Segoe UI,
   line-height 1.5) — от неё буква меняет и начертание, и высоту посадки. Поэтому
   шрифт задан явно: это не «свой» выбор, а фиксация того, что рисует оригинал. */

/* Обёртка и масштабирование — этого в оригинале нет: там прибор жёстко 728 px
   и страница просто уезжает за край телефона.
   .mtun-holder держит систему координат сцены: значок микрофона лежит уже вне
   прибора (иначе на телефоне его срезала бы обрезка), но на десктопе стоит ровно
   там же, где в оригинале, — потому что коробка холдера тоже шириной со сцену. */
.mtun-holder{position:relative;width:100%;max-width:calc(var(--mtun-w)*1px);margin:0 auto}
.mtun{width:100%;overflow:visible}
#guitar_tuner{position:relative;transform-origin:top left;overflow:hidden}
#guitar_tuner img{max-width:none}

#osnova img,#meter img,#titles img,#wheel_top img,#chord_display img{display:block}
#polotno_wrap{position:absolute;z-index:2;top:511px;left:180px;width:373px;overflow:hidden}
#polotno{position:relative;left:0;margin-left:11px}
#wheel_top{position:absolute;z-index:3;inset:0}
#start_shadow{position:absolute;z-index:2;background:#000;opacity:.5;width:488px;height:304px;left:123px;top:65px}
/* В оригинале кнопка стоит по центру прибора: русский текст «Начать настройку» давал
   ширину 283 px, и left:227px клал её центр на 368 px при центре сцены 364. Английский
   текст короче, поэтому то же left уводит кнопку влево — центрируем по затемнённому
   полю (left 123 + ширина 488), чтобы получить тот же центр, что у оригинала. */
#start_button{position:absolute;z-index:5;left:calc(123px + 488px / 2);top:230px;transform:translateX(-50%);padding:13px 25px;border:1px solid #942911;border-radius:5px;box-shadow:inset 0 1px 0 #cf866c;background:linear-gradient(to bottom,#d0451b 5%,#bc3315 100%);color:#fff;cursor:pointer;font:28px/normal Arial,sans-serif;text-decoration:none;text-shadow:0 1px 0 #854629}
#start_button:hover{background:linear-gradient(to bottom,#bc3315 5%,#d0451b 100%);color:#fff}
#start_button:active{margin-left:3px;margin-top:3px}
#meter,#titles,#chord_display{position:absolute;inset:0}
#chord_display{z-index:2}
#chord_display_active{position:absolute;z-index:3;width:118px;height:118px;border-radius:50%;top:333px;left:308px}
#chord{position:absolute;z-index:4;font:79px/normal 'Times New Roman',Times,serif;left:308px;top:344px;width:118px;height:118px;text-align:center;color:#000}
#needle{position:absolute;top:307px;left:352px}
.b-gauge__arrow{width:34px;height:26px}
/* Картинка стрелки остаётся строчной: display:block схлопывает её отрицательный
   верхний отступ с боксом .b-gauge__arrow, тот уезжает вверх на 176 px вместе с
   точкой вращения — стрелка начинает вертеться вокруг чужого центра. */
.b-gauge__arrow img{margin-top:-176px;margin-left:3px}
.e{margin-left:-1px}
.b{padding-left:2px}
.d{padding-left:4px}
.a{padding-left:1px;margin-top:-3px}
/* Разметка индикатора микрофона — та же таблица, что в оригинале; правила ниже
   лишь снимают табличные стили сайта, чтобы геометрия совпала с исходной. */
#mic_indicator{position:absolute;right:0;top:80px;z-index:1}
#mic_indicator table{border-collapse:separate;border-spacing:2px;width:auto;margin:0;color:inherit}
#mic_indicator td{padding:1px}
#ok{color:green;font:36px/normal 'Times New Roman',Times,serif}
#ok span{width:29px;height:10px;display:block}

/* Строка состояния под прибором — её в оригинале нет: там об отказе микрофона
   сообщал alert(), а на нашем сайте инструмент обязан объясняться текстом. */
#tuner_status{min-height:1.5em;margin:.75rem 0 0;text-align:center;color:var(--tls-muted,#666)}

/* Мобильная раскладка. Её у оригинала нет вовсе: там прибор жёстко 728 px и
   страница уезжает за край экрана. Всё в этом блоке — осознанные отступления. */
@media(max-width:767.98px){
  /* Прибор выходит из полей контейнера на всю ширину экрана: иначе при отступах
     сайта сцена сжимается ещё сильнее и прибор становится мелким. Ширина берётся
     от экрана, а не от вычтенного числа, чтобы не зависеть от величины полей. */
  /* --mtun-fit читает JS: на телефоне прибор подгоняется по видимому КОРПУСУ,
     а прозрачный запас картинки (161 px по ширине, 41 px по высоте) обрезается
     обёрткой. Иначе пятая часть ширины уходит в пустоту и прибор выглядит мелким. */
  .mtun-holder{width:calc(100vw - 16px);max-width:calc(100vw - 16px);margin-left:calc(50% - 50vw + 8px);margin-right:calc(50% - 50vw + 8px)}
  .mtun{--mtun-fit:body;overflow:hidden}
  /* Значок микрофона уходит ПОД прибор, к строке состояния: на телефоне сцена
     обрезается по корпусу, и в своей исходной точке (x 661) значок был бы срезан. */
  .mtun-foot{display:flex;align-items:center;gap:.6rem;padding:0 .75rem}
  #mic_indicator{position:static;flex:0 0 auto}
  #tuner_status{flex:1 1 auto;margin:0;text-align:left}
  /* Значок микрофона уходит вниз, на свободное дерево под колесом нот: в правом
     верхнем углу при узком экране он жмётся к самому краю прибора. */
  #tuner_status{font-size:.95rem}
}

/* На узком экране прибор всё равно ужимается, и кнопка исходного кегля становится
   мельче пальца. Поднимаем кегль и вместе с ним кнопку, чтобы она не дошла до
   чёрной детали корпуса (та начинается около y≈300 в координатах сцены).
   Замер: на 360 px кнопка выходит 44 px на экране, на 480 px — 59 px. */
@media(max-width:480px){
  #start_button{top:190px;font-size:34px;padding:18px 26px}
}