/*
 * メトロノーム(/tools/metronome)専用スタイル。
 *
 * アプリ(Flutter)の metronome_scene.dart = デザイン案 6a(ライト)/6b(ダーク)の再現。
 * 共通の意匠(配色・プレート・丸ボタン・スイッチ・つまみ・拍のバー・カバー背景・
 * 書体)は css/web/tools-app-skin.css が持つ。ここは metronome_scene.dart の中に
 * しかない部品(成形ボタン・テンポスライダー・光沢ボール・音色ボタン・拍番号)だけ。
 *
 * ほかの Web ツールの EMMUS 旧スキン(tools.css の .emmu-tool / et- 系)は使わない。
 */

/* ============ 画面の骨組み ============ */

/* デザイン案は幅375の端末。録音と同じく --eat-screen-max までは素直に広げる */
.emmu-mtna .eat-screen {
    padding-bottom: 0;
}

/* ─── プレート共通の見出し行 ─── */

.emmu-mtna .eat-plate {
    margin-top: 14px;
}

.mtna-tempo-plate {
    padding: 15px 18px 18px;
}

.mtna-setting-plate {
    padding: 15px 18px 17px;
}

.mtna-plate-head {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.mtna-plate-label {
    font-size: 9px;
    letter-spacing: 1.98px;
    color: var(--eat-text3);
    white-space: nowrap;
}

.mtna-plate-note {
    flex: 1;
    min-width: 0;
    font-size: 10px;
    color: var(--eat-text2);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============ テンポプレート ============ */

.mtna-tempo-row {
    margin-top: 14px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

/* 数字はプレートの中央にそろえる。
   右にはつまみ(66)+すき間(10)= 76px があるので、左にも同じ 76px を置くと
   数字の中心がプレートの中心に来る。前後のすき間は「左は基準76・右は基準0で
   同じだけ伸びる」ようにしてあるので、余裕があるときは中央のまま。
   幅が足りなくなると、縮むのは左だけ(右は基準0なので縮まない)。
   つまり数字が欠けそうなときに限って、必要なぶんだけ左へ寄る。 */
.mtna-bpm-col {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-end;
}

.mtna-bpm-col::before {
    content: "";
    flex: 1 1 76px;
}

.mtna-bpm-col::after {
    content: "";
    flex: 1 1 0;
}

.mtna-bpm-fit {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 9px;
}

/* 86px の数字そのものが入力欄。幅は桁数に追従させる */
.mtna-bpm {
    width: 3ch;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    font-size: 86px;
    line-height: 0.82;
    text-align: center;
    color: var(--eat-text);
    caret-color: var(--eat-acc);
}

.mtna-bpm-unit {
    padding-bottom: 10px;
    font-size: 10.5px;
    letter-spacing: 2.1px;
    color: var(--eat-text2);
    white-space: nowrap;
}

/* ─── 音量つまみ ─── */

.mtna-volume {
    flex: none;
    width: 66px;
    /* つまみの中心を BPM 数字の中心に合わせるため 6px 下げる */
    transform: translateY(6px);
    touch-action: none;
}

.mtna-volume-head {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
}

.mtna-volume-label {
    font-size: 9px;
    color: var(--eat-text2);
}

.mtna-volume-val {
    font-size: 9.5px;
    color: var(--eat-text2);
}

.mtna-knob {
    margin-top: 5px;
    width: 66px;
    height: 66px;
}

/* ─── テンポ名 ─── */

.mtna-tempo-name-row {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.mtna-rule {
    flex: none;
    width: 20px;
    height: 1px;
    background: var(--eat-rule);
}

.mtna-tempo-name {
    min-width: 0;
    font-size: 14px;
    letter-spacing: 1.4px;
    color: var(--eat-bronze);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── 拍の柱と番号 ─── */

.mtna-beatcols {
    margin-top: 14px;
    /* デザイン案(幅375の端末)では内寸293×高さ74。
       内寸 = 375 −(画面の左右余白16×2)−(プレートの枠線1×2)
              −(プレートの左右余白18×2)−(ここの左右余白6×2)。
       枠線ぶんを引くのは Flutter の Container も同じ(枠線の内側に padding が入る)。
       画面が広がってバーの幅が広がるぶん、同じ比率で高さも伸ばす(縦横比を維持する)。
       録音の光メトロノーム(.rec-beatcols)と同じ考え方。 */
    aspect-ratio: 293 / 74;
    padding: 0 6px;
    display: flex;
    align-items: flex-end;
    gap: 11px;
}

.mtna-beatnums {
    margin-top: 7px;
    padding: 0 6px;
    display: flex;
    gap: 11px;
}

.mtna-beatnum {
    flex: 1;
    min-width: 0;
    font-size: 9.5px;
    text-align: center;
    color: var(--eat-text-faint);
}

.mtna-beatnum.is-acc {
    color: var(--eat-beat-accent-num);
}

/* ─── テンポスライダー ─── */

.mtna-slider-row {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 13px;
}

/* 射出成形のような丸ボタン(− ＋) */
.mtna-mold {
    flex: none;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--eat-mold-edge);
    border-radius: 50%;
    background: linear-gradient(to bottom, var(--eat-mold-top), var(--eat-mold-bottom));
    box-shadow: 0 2px 3px var(--eat-mold-shadow);
    color: var(--eat-mold-glyph);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mtna-mold--minus {
    font-size: 20px;
    padding-bottom: 3px;
}

.mtna-mold:active {
    background: linear-gradient(to bottom, var(--eat-mold-bottom), var(--eat-mold-top));
    box-shadow: 0 1px 1px var(--eat-mold-shadow);
}

.mtna-slider {
    flex: 1;
    min-width: 0;
    height: 42px;
    position: relative;
    display: flex;
    align-items: center;
    touch-action: none;
    cursor: pointer;
}

.mtna-slider-groove,
.mtna-slider-fill {
    position: absolute;
    left: 0;
    height: 10px;
    border-radius: 5px;
}

.mtna-slider-groove {
    right: 0;
    background: var(--eat-groove);
    box-shadow: 0 2px 3px var(--eat-groove-shadow);
}

.mtna-slider-fill {
    background: linear-gradient(to bottom, var(--eat-acc-lit) 0%, var(--eat-acc) 52%, var(--eat-slider-bottom) 100%);
}

/* 光沢ボール(スライダーのノブ) */
.mtna-ball {
    position: absolute;
    top: 50%;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    border-radius: 50%;
    background: radial-gradient(circle 30.4px at 34% 26%,
        var(--eat-knob-face-1) 0%,
        var(--eat-knob-face-2) 32%,
        var(--eat-knob-face-3) 66%,
        var(--eat-knob-face-4) 100%);
    box-shadow: 0 3px 8px var(--eat-knob-shadow);
}

.mtna-ball-gloss {
    position: absolute;
    top: 16%;
    left: 22%;
    width: 40%;
    height: 25%;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .mtna-ball-gloss {
    background: rgba(255, 255, 255, 0.5);
}

/* ============ 設定プレート ============ */

.mtna-meter-badge {
    flex: 1;
    min-width: 0;
    font-size: 9px;
    letter-spacing: 1.26px;
    color: var(--eat-bronze);
    text-align: right;
    white-space: nowrap;
}

.mtna-row-label {
    font-size: 12px;
    color: var(--eat-text2);
    white-space: nowrap;
}

.mtna-signature-row {
    margin-top: 14px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.mtna-signature-row > .mtna-row-label {
    padding-bottom: 7px;
}

.mtna-signature-nums {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-end;
}

.mtna-signature-nums button {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    padding: 0 0 6px;
    font-size: 20px;
    line-height: 1.2;
    color: var(--eat-text2);
    cursor: pointer;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
}

.mtna-signature-nums button.is-on {
    font-size: 26px;
    color: var(--eat-text);
    border-bottom: 2px solid var(--eat-bronze);
    padding-bottom: 4px;
}

.mtna-accent-col {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.mtna-accent-label {
    font-size: 9px;
    color: var(--eat-text2);
    white-space: nowrap;
}

.mtna-hair {
    display: block;
    margin: 14px 0;
    height: 1px;
    background: var(--eat-hair);
}

.mtna-sound-head {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

/* ─── 音色ボタン(4列×2段) ─── */

.mtna-sound-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}

.mtna-sound {
    min-width: 0;
    padding: 12px 4px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(to bottom, var(--eat-sound-rest), var(--eat-sound-rest-bottom));
    box-shadow: 0 3px 0 var(--eat-sound-rest-side);
    color: var(--eat-sound-rest-text);
    font-family: inherit;
    font-size: 10.5px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

.mtna-sound.is-long {
    font-size: 9.5px;
}

.mtna-sound.is-on {
    background: linear-gradient(to bottom, var(--eat-sound-sel-1) 0%, var(--eat-sound-sel-2) 58%, var(--eat-sound-sel-3) 100%);
    box-shadow: 0 3px 0 var(--eat-acc-side), 0 6px 10px -4px var(--eat-sound-sel-shadow);
    color: var(--eat-on-acc);
    font-weight: 500;
}

/* ============ スタート/停止 ============ */

/* アプリはスクロール領域の外に置いて常に見えるようにしている。
   Web も同じ意図で、画面下に貼り付ける(録音の .rec-actions と同じ扱い)。 */
.mtna-actions {
    position: sticky;
    bottom: 10px;
    z-index: 2;
    box-sizing: border-box;
    max-width: var(--eat-screen-max);
    margin: 0 auto;
    padding: 14px 16px 10px;
}

/* デザイン案のボタンは録音より縦に厚い(21px)*/
.mtna-start {
    padding: 21px;
    gap: 13px;
    font-size: 20px;
    letter-spacing: 3.2px;
}

.mtna-tri {
    width: 14px;
    height: 18px;
    background: var(--eat-on-acc);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.mtna-square {
    width: 14px;
    height: 14px;
    background: var(--eat-on-acc);
}