/*
 * チューナー(/tools/tuner)専用スタイル。
 *
 * アプリ(Flutter)の tuner_scene.dart / tuner_widgets.dart =
 * デザイン案 13a〜13f の再現。共通の意匠(配色・プレート・丸ボタン・
 * カバー背景・書体・緑の大ボタン)は css/web/tools-app-skin.css が持つ。
 *
 * ほかの Web ツールの EMMUS 旧スキン(tools.css の .emmu-tool / et- 系)は使わない。
 */

/* ============ 黒背景でも小さい補助文字を読めるようにする ============
   Flutter 側も同じくチューナー画面限定で text2/text3/textFaint を上げている */

[data-theme="dark"] .tools-tuner-page {
    --eat-text2: #D0C8BA;
    --eat-text3: #B8B0A1;
    --eat-text-faint: #A9A193;
}

/* 非選択セル・音叉ボタン(ダークは面・側面・影の濃淡で厚みを出す) */

.tools-tuner-page {
    --tna-rest-grad: linear-gradient(to bottom, var(--eat-sound-rest), var(--eat-sound-rest-bottom));
    --tna-rest-shadow-3: 0 3px 0 var(--eat-sound-rest-side);
    --tna-rest-shadow-5: 0 5px 0 var(--eat-sound-rest-side);
    --tna-off: #C14A38;
    --tna-seg-on-bg: #FAF8F4;
    --tna-seg-on-shadow: rgba(28, 26, 17, 0.161);
}

[data-theme="dark"] .tools-tuner-page {
    --tna-rest-grad: linear-gradient(to bottom, #5A5449 0%, #3F392F 48%, #29241D 100%);
    --tna-rest-shadow-3: 0 11px 14px -3px rgba(0, 0, 0, 0.851), 0 7px 0 #080604, 0 3px 0 #332D24;
    --tna-rest-shadow-5: 0 13px 14px -3px rgba(0, 0, 0, 0.851), 0 9px 0 #080604, 0 5px 0 #332D24;
    --tna-off: #E2614C;
    --tna-seg-on-bg: #2C281F;
    --tna-seg-on-shadow: rgba(0, 0, 0, 0.549);
}

/* ============ 骨組み ============ */

.emmu-tna .eat-screen {
    padding-bottom: 0;
}

.emmu-tna .eat-plate {
    margin-top: 12px;
}

/* ─── ヘッダー ─── */

.tna-header {
    display: flex;
    align-items: center;
    padding: 0 4px;
}

.tna-back-ic {
    width: 13px;
    height: 13px;
    fill: var(--eat-text2);
}

.tna-brand {
    margin: 0 9px;
    font-size: 9.5px;
    letter-spacing: 2.28px;
    color: var(--eat-bronze);
}

.tna-title {
    flex: 1;
    min-width: 0;
    margin: 0 8px 0 0;
    font-size: 16px;
    letter-spacing: 0.96px;
    color: var(--eat-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tna-a4 {
    flex: none;
    margin-right: 10px;
    padding: 5px 9px;
    border-radius: 8px;
    background: var(--eat-groove);
    box-shadow: 0 1px 2px var(--eat-groove-shadow);
    font-size: 9.5px;
    letter-spacing: 0.95px;
    color: var(--eat-text2);
    white-space: nowrap;
}

/* ============ 楽器の切り替え ============ */

.tna-picker {
    margin-top: 12px;
}

.tna-picker-frame {
    height: 46px;
    padding: 0 4px;
    border-radius: 13px;
    background: var(--eat-groove);
    box-shadow: 0 2px 3px var(--eat-groove-shadow);
    display: flex;
    align-items: stretch;
    overflow: hidden;
    touch-action: pan-y;
}

.tna-step {
    flex: none;
    width: 34px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tna-step-tri {
    width: 9px;
    height: 13px;
    background: var(--eat-mold-glyph);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.tna-step-tri--left {
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

/* 左右を同じ幅にすると、楽器名の文字数にかかわらず選択中が中央に固定される */
.tna-names {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    /* 端をうっすら消す(アプリの ShaderMask 相当) */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* 選択中の楽器名がいちばん大事。原寸のまま・省略せず・切らずに出す。
   「名前がそのまま入る幅」を先に取り、残りを両隣で等分するので、
   選択中は常にフレームの中央に来る。
   両隣は幅が足りなければ枠で切れてよい(隣に楽器があると分かって、
   スワイプしてみようと思えれば足りるため)。端は .tna-names の
   マスクで薄くなるので、切れ方も自然に見える。 */
.tna-name {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 選択中は内容の幅そのまま(縮まない)。画面が極端に狭いときだけ枠に収める */
.tna-name.is-on {
    flex: 0 0 auto;
    max-width: 100%;
}

.tna-name-text {
    display: inline-block;
    white-space: nowrap;
}

.tna-name.is-on {
    padding: 0 6px;
    font-size: 21px;
    letter-spacing: 1.26px;
    color: var(--eat-text);
}

.tna-name.is-near {
    font-size: 13px;
    color: var(--eat-text2);
}

.tna-name.is-far {
    font-size: 12px;
    color: var(--eat-text-faint);
}

.tna-dots {
    margin-top: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.tna-dots--marker {
    margin-top: 3px;
}

.tna-dot {
    width: 5px;
    height: 5px;
    border-radius: 3px;
    background: var(--eat-ring-rest, rgba(28, 26, 17, 0.141));
}

.tna-dot.is-on {
    width: 14px;
    background: var(--eat-acc);
}

.tna-marker {
    width: 5px;
    height: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tna-marker.is-wide {
    width: 14px;
}

.tna-marker.is-home::before {
    content: "";
    width: 6px;
    height: 4px;
    background: var(--eat-bronze);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* ============ メーター ============ */

.tna-meter-plate {
    padding: 14px 18px 15px;
}

.tna-meter-head {
    display: flex;
    align-items: center;
    gap: 7px;
}

.tna-live {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--eat-ring-rest, rgba(28, 26, 17, 0.141));
}

.tna-live.is-on {
    background: var(--eat-acc);
}

.tna-status {
    flex: 1;
    min-width: 0;
    font-size: 8.5px;
    letter-spacing: 1.53px;
    color: var(--eat-text2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tna-input-label {
    flex: none;
    font-size: 9px;
    color: var(--eat-text2);
}

.tna-input {
    flex: none;
    height: 12px;
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
}

.tna-input-bar {
    width: 3px;
    background: var(--eat-ring-rest, rgba(28, 26, 17, 0.141));
}

.tna-input-bar.is-on {
    background: var(--eat-acc);
}

.tna-input-bar:nth-child(1) { height: 5px; }
.tna-input-bar:nth-child(2) { height: 7px; }
.tna-input-bar:nth-child(3) { height: 9px; }
.tna-input-bar:nth-child(4) { height: 11px; }
.tna-input-bar:nth-child(5) { height: 12px; }
.tna-input-bar:nth-child(6) { height: 12px; }

/* ─── 大きな音名 ─── */

.tna-readout {
    margin-top: 11px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    min-height: 80px;
}

.tna-big {
    font-size: 96px;
    line-height: 0.82;
    color: var(--eat-text);
    white-space: nowrap;
}

.tna-big.is-idle {
    color: var(--eat-text3);
}

/* 管楽器は記譜音を大きく、上に見出しを置く */
.tna-wind-big {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tna-wind-big .tna-big {
    font-size: 88px;
}

.tna-wind-cap {
    margin-bottom: 2px;
    font-size: 10px;
    color: var(--eat-text2);
}

.tna-side {
    flex: none;
    padding-bottom: 9px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.tna-side-kana {
    font-size: 21px;
    line-height: 1;
    color: var(--eat-text);
}

.tna-side-hz {
    font-size: 12px;
    letter-spacing: 1.2px;
    color: var(--eat-text2);
}

.tna-side-sub {
    font-size: 11px;
    color: var(--eat-text2);
}

/* ─── 指針メーター ─── */

.tna-meter {
    margin-top: 13px;
    height: 70px;
}

.tna-meter canvas {
    display: block;
    width: 100%;
    height: 70px;
}

/* ─── 判定行 ─── */

.tna-cent-row {
    margin-top: 8px;
    /* 「ピッタリ」の緑の札がいちばん背が高いので、その高さで固定しておく
       (状態が変わるたびに高さが動くと針の位置まで動いて見づらい) */
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tna-cent-end {
    flex: none;
    font-size: 9.5px;
    color: var(--eat-text2);
}

.tna-cent-mid {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

.tna-cent-mid.is-intune {
    flex: none;
    align-items: center;
    padding: 6px 14px;
    border-radius: 10px;
    background: linear-gradient(to bottom, var(--eat-acc-lit) 0%, var(--eat-acc) 58%, var(--eat-acc-dim) 100%);
    box-shadow: 0 3px 0 var(--eat-acc-side);
}

.tna-check {
    font-size: 11px;
    color: var(--eat-on-acc);
}

.tna-intune-text {
    font-size: 14px;
    letter-spacing: 1.12px;
    color: var(--eat-on-acc);
}

.tna-cent-num {
    font-size: 22px;
    color: var(--tna-off);
}

.tna-cent-unit {
    font-size: 9.5px;
    letter-spacing: 1.33px;
    color: var(--eat-text2);
}

.tna-cent-msg {
    font-size: 11.5px;
    color: var(--eat-text3);
}

.tna-cent-mid .tna-cent-msg {
    color: var(--eat-text2);
}

.tna-cent-mid > .tna-cent-msg:only-child {
    color: var(--eat-text3);
}

/* ============ TUNING / TRANSPOSE ============ */

.tna-tuning-plate {
    padding: 12px 16px 13px;
}

.tna-tuning-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 余りは見出しが受け持つ。狭い端末では見出しが縮み、♭♯とドット列は右端に付く */
.tna-tuning-head {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.tna-tuning-label {
    font-size: 8.5px;
    letter-spacing: 1.7px;
    color: var(--eat-text3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tna-tuning-value {
    margin-top: 1px;
    font-size: 15px;
    color: var(--eat-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 成形の丸ボタン(♭ ♯) */
.tna-mold {
    flex: none;
    width: 36px;
    height: 36px;
    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 1px 2px var(--eat-mold-shadow);
    color: var(--eat-mold-glyph);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tna-mold--sharp {
    font-size: 14px;
}

.tna-shift-dots {
    flex: none;
    width: 112px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
}

.tna-shift-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--eat-ring-rest, rgba(28, 26, 17, 0.141));
}

.tna-shift-dot.is-on {
    width: 10px;
    height: 10px;
    background: var(--eat-acc);
}

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

.tna-bass-inner {
    display: flex;
    align-items: center;
    gap: 11px;
}

.tna-bass-inner .tna-seg {
    flex: 1;
    min-width: 0;
}

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

.tna-tuning-head-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 10px;
}

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

/* ─── 切り替え(TUNING の段階・弦の数・管の種類) ─── */

.tna-seg {
    padding: 4px;
    border-radius: 12px;
    background: var(--eat-groove);
    box-shadow: 0 2px 3px var(--eat-groove-shadow);
    display: flex;
    gap: 4px;
}

.tna-seg-item {
    flex: 1;
    min-width: 0;
    padding: 9px 2px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 9px;
    background: none;
    color: var(--eat-text2);
    font-family: inherit;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

.tna-seg--serif .tna-seg-item {
    font-size: 14px;
}

.tna-seg-item.is-on {
    background: var(--tna-seg-on-bg);
    border-bottom-color: var(--eat-acc);
    box-shadow: 0 1px 2px var(--tna-seg-on-shadow);
    color: var(--eat-text);
    font-weight: 500;
}

.tna-seg--serif .tna-seg-item.is-on {
    font-weight: 400;
}

/* ============ 弦セル / 記譜音セル ============ */

.tna-cells-wrap {
    margin-top: 12px;
}

.tna-cells-head {
    padding: 0 4px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 7px;
}

.tna-cells {
    display: flex;
    gap: 6px;
}

.tna-cells.is-wind {
    gap: 5px;
}

.tna-cell {
    flex: 1;
    min-width: 0;
    padding: 8px 0 9px;
    border: none;
    border-radius: 11px;
    background: var(--tna-rest-grad);
    box-shadow: var(--tna-rest-shadow-3);
    font-family: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tna-cells.is-wind .tna-cell {
    border-radius: 10px;
}

.tna-cell.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);
}

.tna-cell-line {
    max-width: 100%;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 2行目(音名)だけはっきり、ほかは少し落とす */
    color: var(--eat-text2);
}

.tna-cell-2 {
    color: var(--eat-text);
}

.tna-cell.is-on .tna-cell-line {
    color: var(--eat-on-acc);
    opacity: 0.75;
}

.tna-cell.is-on .tna-cell-2 {
    opacity: 1;
}

.tna-cell-0 { font-size: 10px; }
.tna-cell-1 { font-size: 11px; }
.tna-cell-2 { font-size: 19px; }
.tna-cells.is-wind .tna-cell-2 { font-size: 16px; }
.tna-cell-3 { font-size: 11px; }
.tna-cells.is-wind .tna-cell-3 { font-size: 10px; }
.tna-cell-4 { font-size: 10px; }

/* ============ 開始・停止 ＋ 音叉 ============ */

.tna-actions {
    position: sticky;
    bottom: 10px;
    z-index: 2;
    box-sizing: border-box;
    max-width: var(--eat-screen-max);
    margin: 0 auto;
    padding: 12px 16px 10px;
}

.tna-actions-row {
    display: flex;
    align-items: stretch;
    gap: 9px;
}

.tna-start {
    flex: 1;
    min-width: 0;
    padding: 17px;
    gap: 11px;
    border-radius: 17px;
    font-size: 18px;
    letter-spacing: 2.52px;
}

.tna-start-dot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--eat-on-acc);
}

.tna-start-square {
    flex: none;
    width: 9px;
    height: 9px;
    background: var(--eat-on-acc);
}

.tna-tone {
    flex: none;
    width: 62px;
    padding: 12px 0;
    border: none;
    border-radius: 17px;
    background: var(--tna-rest-grad);
    box-shadow: var(--tna-rest-shadow-5);
    font-family: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.tna-tone.is-on {
    background: linear-gradient(to bottom, var(--eat-acc-lit) 0%, var(--eat-acc) 55%, var(--eat-acc-dim) 100%);
    box-shadow: 0 5px 0 var(--eat-acc-side);
}

.tna-tone-glyph {
    font-size: 19px;
    line-height: 1;
    color: var(--eat-sound-rest-text);
}

.tna-tone-label {
    font-size: 8.5px;
    color: var(--eat-text2);
}

.tna-tone.is-on .tna-tone-glyph,
.tna-tone.is-on .tna-tone-label {
    color: var(--eat-on-acc);
}

.tna-notice {
    margin: 12px 0 0;
    padding: 0 6px;
    font-size: 9.5px;
    line-height: 1.6;
    color: var(--eat-text2);
}

.tna-notice.is-error {
    color: var(--tna-off);
}