/*
 * 音感テスト(/tools/ear-pitch)専用スタイル。APP-031。
 * デザイン案 22a(ライト)/22b(ダーク) = 開始・出題中・結果の3画面の再現。
 *
 * 共通の意匠(配色・プレート・丸ボタン・カバー背景・書体・緑と平の大ボタン)は
 * css/web/tools-app-skin.css が持つ。このファイルは #epiRoot の中だけを定義し、
 * 共通クラス(.eat-*)の上書きはしない。
 *
 * 色は直値で持たず --eat-* から引く。こうするとライト/ダークの切り替えと、
 * テーマカラーを設定しているユーザーの色(JS の applyAccentVars)にそのまま乗る。
 * 例外は鍵盤で、デザイン案どおりダークでも白鍵は象牙色・黒鍵は黒のままにするため
 * #epiRoot 配下の --epi-* に持つ。
 *
 * ほかの Web ツールの EMMUS 旧スキン(tools.css の .emmu-tool / et- 系)は使わない。
 */

#epiRoot {
    --epi-ng: #C14A38;
    --epi-off-bar: #C4BEB0;

    /* 鍵盤(デザイン案 22a) */
    --epi-wkey-1: #FDFCF9;
    --epi-wkey-2: #F0ECE2;
    --epi-wkey-side: #DCD7CA;
    --epi-wkey-edge: rgba(28, 25, 20, 0.07);
    --epi-bkey-1: #3A352C;
    --epi-bkey-2: #1D1A15;
    --epi-bkey-side: #0F0D09;
}

[data-theme="dark"] #epiRoot {
    --epi-ng: #E2614C;
    --epi-off-bar: #4A443A;

    /* 鍵盤(デザイン案 22b)。白鍵は象牙色のまま、影だけ深くする */
    --epi-wkey-1: #EFE9DC;
    --epi-wkey-2: #D9D2C2;
    --epi-wkey-side: #0D0B08;
    --epi-wkey-edge: rgba(28, 25, 20, 0.18);
    --epi-bkey-1: #2E2A22;
    --epi-bkey-2: #0F0D09;
    --epi-bkey-side: #050403;
}

/* 黒背景でも小さい補助文字を読めるようにする(音域チェックと同じ扱い) */
[data-theme="dark"] .tools-ear-pitch-page {
    --eat-text2: #D0C8BA;
    --eat-text3: #B8B0A1;
    --eat-text-faint: #A9A193;
}

#epiRoot .eat-plate {
    margin-top: 13px;
}

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

#epiRoot .epi-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 4px;
}

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

#epiRoot .epi-head-name {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 9px;
}

#epiRoot .epi-brand {
    font-size: 9.5px;
    letter-spacing: 2.28px;
    color: var(--eat-bronze);
}

#epiRoot .epi-title {
    margin: 0;
    font-size: 16px;
    letter-spacing: 1.28px;
    color: var(--eat-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── 共通の部品 ─── */

#epiRoot .epi-label {
    font-size: 8.5px;
    letter-spacing: 1.7px;
    color: var(--eat-text3);
}

#epiRoot .epi-hair {
    display: block;
    height: 1px;
    background: var(--eat-hair);
}

#epiRoot .epi-plate-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

/* 再生の三角 */
#epiRoot .epi-tri {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 11.8px 0 11.8px 19px;
    border-color: transparent transparent transparent var(--eat-on-acc);
}

#epiRoot .epi-tri--lg {
    border-width: 13.6px 0 13.6px 22px;
}

#epiRoot .epi-tri--sm {
    border-width: 7.4px 0 7.4px 12px;
}

/* 丸い再生ボタン */
#epiRoot .epi-disc {
    width: 112px;
    height: 112px;
    flex: none;
    border: none;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    background: linear-gradient(180deg, var(--eat-acc-lit), var(--eat-acc) 55%, var(--eat-acc-dim));
    box-shadow:
        0 6px 0 var(--eat-acc-side),
        0 18px 26px -12px var(--eat-start-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

#epiRoot .epi-disc--lg {
    width: 132px;
    height: 132px;
    gap: 5px;
}

#epiRoot .epi-disc:disabled {
    cursor: default;
    opacity: 0.62;
}

#epiRoot .epi-disc-label {
    font-size: 11px;
    color: var(--eat-on-acc);
    opacity: 0.72;
}

#epiRoot .epi-disc--lg .epi-disc-label {
    font-size: 13px;
}

/* 小さいボタン(種類チップ・音程の選択肢) */
#epiRoot .epi-chip {
    padding: 7px 12px;
    border: none;
    border-radius: 10px;
    font-size: 11.5px;
    font-family: inherit;
    cursor: pointer;
    color: var(--eat-sound-rest-text);
    background: var(--eat-rest-grad);
    box-shadow: var(--eat-rest-shadow-3);
}

#epiRoot .epi-chip--on,
#epiRoot .epi-chip.is-correct {
    font-weight: 500;
    color: var(--eat-on-acc);
    background: linear-gradient(180deg, var(--eat-acc-lit), var(--eat-acc) 58%, var(--eat-acc-dim));
    box-shadow: 0 3px 0 var(--eat-acc-side), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

#epiRoot .epi-chip.is-wrong {
    color: var(--epi-ng);
    box-shadow: 0 3px 0 var(--eat-sound-rest-side), inset 0 0 0 1px var(--epi-ng);
}

#epiRoot .epi-chip--static {
    cursor: default;
    font-size: 11px;
    padding: 8px 13px;
}

#epiRoot .epi-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ─── 出題の種類ボタン(EMMU-mode-buttons のデザイン) ─── */

#epiRoot .epi-modes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}

#epiRoot .epi-mode {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 11px 0 10px;
    border: 0;
    border-radius: 12px;
    font-family: inherit;
    cursor: pointer;
    color: var(--eat-sound-rest-text);
    background: var(--eat-rest-grad);
    box-shadow: var(--eat-rest-shadow-3);
    transition: transform 80ms ease-out, box-shadow 80ms ease-out;
}

#epiRoot .epi-mode svg {
    flex: none;
    color: var(--eat-bronze);
}

#epiRoot .epi-mode span {
    font-size: 10.5px;
    line-height: 1.2;
}

/* 押すと3px沈む */
#epiRoot .epi-mode:active {
    transform: translateY(3px);
    box-shadow: none;
}

#epiRoot .epi-mode.is-on {
    color: var(--eat-on-acc);
    background: linear-gradient(180deg, var(--eat-acc-lit), var(--eat-acc) 58%, var(--eat-acc-dim));
    box-shadow: 0 3px 0 var(--eat-acc-side), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

#epiRoot .epi-mode.is-on svg {
    color: var(--eat-on-acc);
}

#epiRoot .epi-mode.is-on span {
    font-weight: 500;
}

#epiRoot .epi-mode.is-on:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 var(--eat-acc-side), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* 選んでいる種類と難易度の説明 */
#epiRoot .epi-level-desc {
    margin: -4px 0 0;
    font-size: 10.5px;
    line-height: 1.6;
    color: var(--eat-text2);
}

#epiRoot .epi-chips--answer {
    gap: 8px;
}

#epiRoot .epi-chips--answer .epi-chip {
    flex: 1 0 auto;
    min-width: 74px;
    text-align: center;
}

/* 3択の切り替え(難易度・オクターブ) */
#epiRoot .epi-seg {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: var(--eat-groove);
    box-shadow: inset 0 1px 2px var(--eat-groove-shadow);
}

#epiRoot .epi-seg-btn {
    flex: 1;
    min-width: 0;
    padding: 9px 0;
    border: none;
    border-radius: 9px;
    background: transparent;
    font-size: 11.5px;
    font-family: inherit;
    color: var(--eat-text2);
    cursor: pointer;
}

#epiRoot .epi-seg-btn.is-on {
    font-weight: 500;
    color: var(--eat-text);
    background: var(--eat-mold-top);
    border-bottom: 2px solid var(--eat-acc);
    box-shadow: 0 1px 2px var(--eat-plate-shadow-faint);
}

#epiRoot .epi-seg--sm {
    flex: 1;
    border-radius: 11px;
}

#epiRoot .epi-seg--sm .epi-seg-btn {
    padding: 6px 0;
    font-size: 10.5px;
}

#epiRoot .epi-seg-row {
    display: flex;
    align-items: center;
    gap: 9px;
}

#epiRoot .epi-seg-label {
    flex: none;
    font-size: 10.5px;
    color: var(--eat-text2);
}

/* ─── 開始画面 ─── */

#epiRoot .epi-hero-plate {
    padding: 24px 20px 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

#epiRoot .epi-hero-title {
    font-size: 21px;
    letter-spacing: 1.26px;
    color: var(--eat-text);
}

#epiRoot .epi-hero-sub {
    font-size: 11.5px;
    line-height: 1.7;
    text-align: center;
    color: var(--eat-text2);
}

#epiRoot .epi-setup-plate {
    padding: 14px 15px 16px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

/* 基準音の入切(出題画面の中) */
#epiRoot .epi-ref-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--eat-hair);
    border-radius: 12px;
}

#epiRoot .epi-ref-title {
    min-width: 0;
    font-size: 11.5px;
    color: var(--eat-text2);
}

#epiRoot .epi-cta {
    margin-top: 13px;
    gap: 12px;
}

#epiRoot .epi-foot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 6px 0;
    font-size: 9px;
    color: var(--eat-text3);
}

/* ─── 出題画面 ─── */

#epiRoot .epi-quiz-plate {
    padding: 20px 18px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
}

#epiRoot .epi-progress {
    width: 100%;
    height: 5px;
    border-radius: 3px;
    background: var(--eat-groove);
    box-shadow: inset 0 1px 2px var(--eat-groove-shadow);
    overflow: hidden;
}

#epiRoot .epi-bar {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--eat-acc-lit), var(--eat-acc));
    transition: width 300ms ease-out;
}

/* 再生ボタンの右隣に問番(デザイン案 22a) */
#epiRoot .epi-play-row {
    display: flex;
    align-items: center;
    gap: 18px;
}

#epiRoot .epi-qnum {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

#epiRoot .epi-qnum-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

#epiRoot .epi-qnum-now {
    font-size: 44px;
    line-height: 1;
    color: var(--eat-text);
}

#epiRoot .epi-qnum-sep {
    font-size: 15px;
    color: var(--eat-text3);
}

#epiRoot .epi-qnum-total {
    font-size: 26px;
    line-height: 1;
    color: var(--eat-text2);
}

/* 音量つまみ。メトロノーム(.mtna-volume / .mtna-knob)と同じ寸法・同じ部品 */
#epiRoot .epi-volume {
    flex: none;
    width: 66px;
    touch-action: none;
}

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

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

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

#epiRoot .epi-knob {
    margin-top: 5px;
    width: 66px;
    height: 66px;
}

#epiRoot .epi-prompt {
    font-size: 13px;
    color: var(--eat-sound-rest-text);
}

#epiRoot .epi-cond {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

#epiRoot .epi-answer-plate {
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

#epiRoot .epi-streak {
    flex: none;
    font-size: 10px;
    color: var(--eat-text2);
}

/* ─── 鍵盤 ─── */

#epiRoot .epi-keys {
    position: relative;
    display: flex;
    gap: 3px;
    height: 124px;
}

#epiRoot .epi-key {
    flex: 1;
    min-width: 0;
    border: none;
    border-radius: 4px 4px 9px 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 1px;
    padding: 0 0 9px;
    cursor: pointer;
    background: linear-gradient(180deg, var(--epi-wkey-1), var(--epi-wkey-2));
    box-shadow:
        0 3px 0 var(--epi-wkey-side),
        inset 0 1px 0 #FFF,
        inset 0 0 0 1px var(--epi-wkey-edge);
}

#epiRoot .epi-key-name {
    font-size: 14px;
    line-height: 1.2;
    color: #1D1A15;
}

#epiRoot .epi-key-kana {
    font-size: 9px;
    line-height: 1.3;
    color: #6A6459;
}

#epiRoot .epi-key--black {
    position: absolute;
    top: 0;
    /* 白鍵と同じく画面幅に追従させる(デザイン案の 30/370 と 79/124 の比) */
    width: 8.1%;
    height: 63.7%;
    transform: translateX(-50%);
    flex: none;
    border-radius: 3px 3px 7px 7px;
    gap: 0;
    padding-bottom: 7px;
    background: linear-gradient(180deg, var(--epi-bkey-1), var(--epi-bkey-2));
    box-shadow: 0 3px 0 var(--epi-bkey-side), inset 0 1px 0 rgba(240, 235, 223, 0.18);
}

#epiRoot .epi-key--black .epi-key-name {
    font-size: 11px;
    color: #E8E4DA;
}

#epiRoot .epi-key--black .epi-key-kana {
    font-size: 7.5px;
    color: rgba(232, 228, 218, 0.72);
}

#epiRoot .epi-key.is-off {
    cursor: default;
    opacity: 0.4;
}

#epiRoot .epi-key.is-picked {
    background: linear-gradient(180deg, var(--eat-acc-lit), var(--eat-acc) 55%, var(--eat-acc-dim));
    box-shadow: 0 3px 0 var(--eat-acc-side), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

#epiRoot .epi-key.is-correct {
    background: linear-gradient(180deg, var(--eat-sound-sel-1), var(--eat-sound-sel-2) 55%, var(--eat-sound-sel-3));
    box-shadow: 0 3px 0 var(--eat-sound-sel-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

#epiRoot .epi-key.is-picked .epi-key-name,
#epiRoot .epi-key.is-correct .epi-key-name {
    color: var(--eat-on-acc);
}

#epiRoot .epi-key.is-picked .epi-key-kana,
#epiRoot .epi-key.is-correct .epi-key-kana {
    color: var(--eat-on-acc);
    opacity: 0.75;
}

/* 赤枠(is-chosen)は「自分が押した鍵」の目印。緑(is-correct)の
   「鳴っていた音」とは別の意味なので、両方付いたら緑の上に枠を重ねる。
   押したが鳴っていない音は背景を変えず(緑にせず)枠と文字色だけ赤にする。 */
#epiRoot .epi-key.is-chosen {
    box-shadow: 0 3px 0 var(--epi-wkey-side), inset 0 0 0 2px var(--epi-ng);
}

#epiRoot .epi-key--black.is-chosen {
    box-shadow: 0 3px 0 var(--epi-bkey-side), inset 0 0 0 2px var(--epi-ng);
}

#epiRoot .epi-key.is-chosen:not(.is-correct) .epi-key-name {
    color: var(--epi-ng);
}

#epiRoot .epi-key.is-correct.is-chosen {
    box-shadow: 0 3px 0 var(--eat-sound-sel-shadow), inset 0 0 0 2px var(--epi-ng);
}

/* ─── 判定の一言 ─── */

#epiRoot .epi-feedback {
    /* 枠の高さぶんを空けておき、出ても行送りが動かないようにする */
    min-height: 32px;
    margin: 13px 0 0;
    text-align: center;
}

/* 文字を包む半透明の枠。地は共通プレート(.eat-plate)そのままで、
   大きさは文字がちょうど収まるぶんだけ(inline-block)。 */
#epiRoot .epi-feedback-box {
    display: inline-block;
    margin-top: 0;
    padding: 6px 14px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

/* 文字が無いあいだは枠ごと出さない */
#epiRoot .epi-feedback-box:empty {
    display: none;
}

#epiRoot .epi-feedback.is-ok {
    color: var(--eat-acc-dim);
}

#epiRoot .epi-feedback.is-ng {
    color: var(--epi-ng);
}

#epiRoot .epi-note {
    margin: 10px 0 0;
    padding: 0 6px;
    text-align: center;
    font-size: 9.5px;
    line-height: 1.6;
    color: var(--eat-text2);
}

/* ─── 結果画面 ─── */

#epiRoot .epi-score-plate {
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
}

#epiRoot .epi-score {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

#epiRoot .epi-score-num {
    font-size: 86px;
    line-height: 0.84;
    color: var(--eat-text);
}

#epiRoot .epi-score-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding-bottom: 8px;
}

#epiRoot .epi-score-unit {
    font-size: 19px;
    color: var(--eat-text);
}

#epiRoot .epi-score-sub {
    font-size: 10px;
    color: var(--eat-text2);
}

#epiRoot .epi-score-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 11px;
    padding-top: 2px;
}

#epiRoot .epi-bytype-plate,
#epiRoot .epi-weak-plate {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#epiRoot .epi-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#epiRoot .epi-bar-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#epiRoot .epi-bar-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

#epiRoot .epi-bar-name {
    font-size: 11.5px;
    color: var(--eat-text2);
}

#epiRoot .epi-bar-name.is-on {
    color: var(--eat-text);
}

#epiRoot .epi-bar-val {
    font-size: 9.5px;
    color: var(--eat-text2);
}

#epiRoot .epi-bar-val.is-on {
    color: var(--eat-acc-dim);
}

#epiRoot .epi-bar-track {
    position: relative;
    height: 10px;
    border-radius: 5px;
    background: var(--eat-groove);
    box-shadow: inset 0 1px 2px var(--eat-groove-shadow);
}

#epiRoot .epi-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: block;
    border-radius: 5px;
    background: var(--epi-off-bar);
}

#epiRoot .epi-bar-fill.is-on {
    background: linear-gradient(180deg, var(--eat-acc-lit), var(--eat-acc) 55%, var(--eat-slider-bottom));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

#epiRoot .epi-weak-cap {
    flex: none;
    font-size: 10px;
    color: var(--eat-text2);
}

#epiRoot .epi-weak {
    display: flex;
    gap: 8px;
}

#epiRoot .epi-weak-card {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 10px 0 11px;
    border-radius: 11px;
    background: var(--eat-rest-grad);
    box-shadow: var(--eat-rest-shadow-3);
}

#epiRoot .epi-weak-name {
    font-size: 20px;
    color: var(--eat-sound-rest-text);
}

#epiRoot .epi-weak-kana {
    font-size: 9.5px;
    color: var(--eat-text2);
}

#epiRoot .epi-weak-n {
    font-size: 9px;
    color: var(--epi-ng);
}

#epiRoot .epi-result-actions {
    display: flex;
    gap: 9px;
    margin-top: 13px;
}

#epiRoot .epi-btn {
    flex: 1;
    min-width: 0;
}

/* 横幅の比は 1 : 1.4(デザイン案どおり) */
#epiRoot .epi-btn--share {
    flex: 1.4;
}

/* ─── 細い端末 ─── */

@media (max-width: 359px) {
    #epiRoot .epi-keys {
        height: 112px;
    }

    #epiRoot .epi-key-kana {
        font-size: 8px;
    }

    #epiRoot .epi-key--black .epi-key-kana {
        font-size: 7px;
    }

    #epiRoot .epi-score-num {
        font-size: 70px;
    }

    #epiRoot .epi-play-row {
        gap: 10px;
    }

    /* 再生ボタン・問番・つまみを1行に収める */
    #epiRoot .epi-disc--lg {
        width: 112px;
        height: 112px;
    }

    #epiRoot .epi-qnum-now {
        font-size: 38px;
    }

    #epiRoot .epi-volume,
    #epiRoot .epi-knob {
        width: 56px;
    }

    #epiRoot .epi-knob {
        height: 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #epiRoot .epi-bar {
        transition: none;
    }
}