/* 発音マスターページ：発音記号の表記切り替え（PC・タブレット＝ENGLISH / カタカナ、スマホ＝ENG / カナ）。
   壁の照明スイッチ風のロッカー：押した側は「へこんで」黒地に白文字＋緑のランプ、反対側は「浮いて」白地のグレー文字。
   20秒に1回、光が横切って「キラッ」とする。
   「＊注」はカナの右上に小さく置き、その場所だけツールチップを出す。
   スマホもPCも同じ位置：文字ボタンの並びの最後（「あいまいな発音」「AEOU」の後ろ）に、3ブロック分・ボタンと同じ高さで置く。 */

/* カタカナと＊は途中で改行させない（＊だけ次の行に落ちるのを防ぐ） */
.phonics-ipa-t { white-space: nowrap; }

/* ＊（カタカナで近い音に置き換えきれない印）は赤 */
.phonics-notation-star { color: #dc2626 !important; font-weight: 800; margin-left: 1px; }

/* 切り替えバー：ボタン並び(グリッド)の最後に3ブロック分。高さは隣の文字ボタンと同じ */
.phonics-notation-bar { position: relative; box-sizing: border-box; grid-column: span 3; align-self: stretch; width: auto; margin: 0; padding: 0; }

/* スイッチの台座（ロッカー）：少しへこんだグレーの板の上に、2つのボタンが並ぶ */
.phonics-notation-seg {
    position: relative; overflow: hidden; display: flex; box-sizing: border-box; width: 100%; height: 100%; padding: 2px; gap: 2px; border-radius: 7px;
    background: linear-gradient(#e9edf3, #cdd5df);
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .12), 0 1px 3px rgba(15, 23, 42, .3);
}

/* 20秒に1回の「キラッ」：斜めの光が左から右へ一瞬で横切る（残りの時間は見えない） */
.phonics-notation-seg::after {
    content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; z-index: 3; pointer-events: none;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(-160%) skewX(-18deg); opacity: 0;
    animation: phonics-notation-glint 20s ease-in-out 2s infinite;
}
@keyframes phonics-notation-glint {
    0%    { transform: translateX(-160%) skewX(-18deg); opacity: 0; }
    0.5%  { opacity: 1; }
    4.5%  { transform: translateX(330%) skewX(-18deg); opacity: 1; }
    5%    { transform: translateX(330%) skewX(-18deg); opacity: 0; }
    100%  { transform: translateX(330%) skewX(-18deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .phonics-notation-bar .phonics-notation-btn { transition: none; }
    .phonics-notation-knob { transition: none !important; }
    .phonics-notation-seg::before { transition: none; }
    .phonics-notation-seg::after { animation: none; opacity: 0; }
}

/* ボタン自体は透明（文字だけ）。立体感は、PCは下の plate/knob、スマホは seg::before のつまみで出す */
.phonics-notation-bar .phonics-notation-btn {
    position: relative; z-index: 2; flex: 1 1 0; min-width: 0; margin: 0 !important; padding: 0 2px !important;
    border: 0 !important; border-radius: 5px !important; width: auto !important;
    background: transparent !important; box-shadow: none !important;
    color: #8a97ab !important; font-weight: 800 !important; line-height: 1 !important; white-space: nowrap;
    font-size: 12px !important; letter-spacing: .06em; cursor: pointer; transition: color .2s ease;
}
.phonics-notation-bar .phonics-notation-btn[aria-pressed="true"] { color: #fff !important; }
/* キーボード操作の時だけ出る枠（タップ・クリックでは出さない） */
.phonics-notation-bar .phonics-notation-btn:focus { outline: none; }
.phonics-notation-bar .phonics-notation-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: -3px; }

/* ラベル：PC・タブレットは「ENGLISH」「カタカナ」、スマホは狭いので「ENG」「カナ」 */
.phonics-notation-l-short { display: none; }
.phonics-notation-l-long { display: inline; }
@media (max-width: 767px) {
    .phonics-notation-l-short { display: inline; }
    .phonics-notation-l-long { display: none; }
}

/* PCの板・つまみ：スマホでは使わない */
.phonics-notation-plate, .phonics-notation-knob { display: none; }

/* ＊注：見た目は「カナの右上に小さな＊注」のまま。ただし押せる範囲(ツールチップの出る場所)は、カナのボタンの右半分全体。
   （スイッチの右半分=カナ、その右半分=スイッチ全体の右から25%）。左半分を押すとカナに切り替わる。 */
.phonics-notation-bar .phonics-notation-note {
    position: absolute; z-index: 4; top: 0; bottom: 0; right: 0; width: 25% !important; margin: 0 !important; padding: 3px 4px !important;
    display: flex !important; align-items: flex-start; justify-content: flex-end;
    border: 0 !important; border-radius: 0 4px 4px 0 !important; background: transparent !important; box-shadow: none !important;
    color: #94a3b8 !important; font-size: 8px !important; font-weight: 800 !important; line-height: 1 !important; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.phonics-notation-seg[data-mode="kana"] .phonics-notation-note { color: #e2e8f0 !important; }   /* カナがへこんで黒くなっている時は明るく */
.phonics-notation-bar .phonics-notation-note:focus { outline: none; }
.phonics-notation-bar .phonics-notation-note:focus-visible { outline: 2px solid #dc2626; outline-offset: -3px; }

/* ツールチップ（＊注の真下に出す黒い吹き出し）。幅・位置・矢印の位置はJSが画面内に収まるよう調整する */
.phonics-notation-tip {
    position: absolute; z-index: 40; top: 100%; left: 0; margin-top: 9px; box-sizing: border-box; width: 300px; max-width: calc(100vw - 24px);
    background: #0f172a; color: #fff; border-radius: 8px; padding: 10px 12px;
    font-size: 12px; font-weight: 700; line-height: 1.75; text-align: left; box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.phonics-notation-tip[hidden] { display: none; }
.phonics-notation-tip::before {
    content: ""; position: absolute; top: -6px; left: var(--np-arrow-left, 20px); width: 12px; height: 12px;
    background: #0f172a; transform: rotate(45deg);
}

/* カタカナ表示：組み合わせボタンで複数の音が並ぶ時は「／」で区切る */
.phonics-notation-is-kana .phonics-mouth-btn-ipa-multi-seg + .phonics-mouth-btn-ipa-multi-seg::before {
    content: "／"; color: #94a3b8; margin-right: 1px;
}

/* PC：文字が大きめなので、スイッチの文字も少し大きく */
@media (min-width: 768px) {
    .phonics-notation-bar .phonics-notation-btn { font-size: 13px !important; letter-spacing: .08em; }
    .phonics-notation-bar .phonics-notation-note { font-size: 9.5px !important; }
    /* 縦幅は隣の文字ボタンと同じ52px。列数が少ないタブレット幅では、スイッチが新しい行に置かれて高さが決まらず潰れるので、最低の高さを付ける */
    .phonics-notation-bar { min-height: 52px; }

    /* PC・タブレット：見た目は案A（浮いた白い板／へこんだ黒い板＋緑のランプ）、切り替わる動きは案C（黒い板が横にすべる）。
       白い板2枚（浮き）の上を、黒い板(knob＝へこみ＋ランプ)がすべる。文字(ボタン)は一番上。 */
    .phonics-notation-plate, .phonics-notation-knob { display: block; position: absolute; top: 2px; bottom: 2px; width: calc(50% - 3px); border-radius: 5px; pointer-events: none; }
    .phonics-notation-plate {
        z-index: 0; background: linear-gradient(#ffffff, #e6eaf0); box-shadow: 0 2px 0 #b7c0cd, inset 0 1px 0 #fff; transform: translateY(-1px);
    }
    .phonics-notation-plate-eng { left: 2px; }
    .phonics-notation-plate-kana { right: 2px; }
    .phonics-notation-knob {
        z-index: 1; left: 2px; transform: translateY(1px);
        background: radial-gradient(circle at 13px 50%, #4ade80 0 3px, rgba(74, 222, 128, .5) 3.5px 6.5px, transparent 8px), linear-gradient(#0b1220, #1f2a3d);
        box-shadow: inset 0 2px 5px rgba(0, 0, 0, .7), inset 0 -1px 0 rgba(255, 255, 255, .08);
        transition: transform .25s cubic-bezier(.4, 0, .2, 1);
    }
    .phonics-notation-seg[data-mode="kana"] .phonics-notation-knob { transform: translate(calc(100% + 2px), 1px); }
}

/* スマホ：単語(例文)と文字ボタンの間の余白を詰める（56px → 約17px＝約30%）。PCは変えない。
   内訳＝単語ブロックの下余白(28.8→11px) + 上下ブロックの間隔(24→2px) + 既存の細かい余白(約4px) */
@media (max-width: 767px) {
    /* スマホ：「AEOU」の右の、ボタン2個分の空き（V・Wの真下）にちょうど収める。ボタンと同じ高さ。
       列の位置(V・Wの真下)はJSが合わせる。 */
    .phonics-notation-bar { grid-column: span 2; align-self: stretch; height: auto; margin: 0; }
    /* スマホ：見た目は案B（カナにすると暖色に点灯）／動きは案C（つまみが横にすべる）。PCは上のロッカー。 */
    .phonics-notation-seg {
        padding: 2px; gap: 0; border-radius: 7px; background: #e5e9ef; border: 2px solid #cbd5e1;
        box-shadow: none; transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
    }
    .phonics-notation-seg[data-mode="kana"] {
        background: linear-gradient(#fde68a, #f59e0b); border-color: #d97706; box-shadow: 0 0 14px 2px rgba(251, 191, 36, .65);
    }
    /* つまみ：ENGでは黒、カナでは白っぽく。色の切り替えと同時に、Cと同じ動きで横にすべる */
    .phonics-notation-seg::before {
        content: ""; position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); border-radius: 4px;
        background: #0f172a; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
        transition: transform .25s cubic-bezier(.4, 0, .2, 1), background .25s ease;
    }
    .phonics-notation-seg[data-mode="kana"]::before { transform: translateX(100%); background: rgba(255, 255, 255, .6); }
    .phonics-notation-bar .phonics-notation-btn,
    .phonics-notation-bar .phonics-notation-btn[aria-pressed="true"] {
        background: transparent !important; box-shadow: none !important; transform: none !important; border-radius: 4px !important;
    }
    .phonics-notation-bar .phonics-notation-btn { color: #94a3b8 !important; }
    .phonics-notation-bar .phonics-notation-btn[aria-pressed="true"] { color: #fff !important; }
    .phonics-notation-seg[data-mode="kana"] .phonics-notation-btn[aria-pressed="true"] { color: #0f172a !important; }   /* 白っぽいつまみの上は黒文字 */
    .phonics-notation-seg[data-mode="kana"] .phonics-notation-note { color: #57534e !important; }
    .phonics-notation-seg[data-mode="kana"] .phonics-notation-btn:not([aria-pressed="true"]) { color: #92400e !important; }   /* 点灯中(オレンジ地)の消えている側は、濃いオレンジ茶で読みやすく */
    .phonics-notation-bar .phonics-notation-btn { font-size: 10.5px !important; letter-spacing: .02em; padding: 0 !important; }
    .phonics-notation-bar .phonics-notation-note { font-size: 6.5px !important; padding: 2px 2px !important; }

    .phonics-mouth-wrap #example-words { margin-bottom: 11px; }
    .phonics-mouth-wrap .phonics-mouth-columns { gap: 2px; }
}

/* スマホ：現在の音の表示まわり（大きな文字／記号／説明文／単語）の縦の余白を、今の半分にする。PCは変えない。
   大きな文字→説明文：約31px → 約15px（記号欄の上4→2px・下26.4→13px）
   説明文→単語　　　：約21px → 約10px（説明文の下20.8→10px・単語の上4→2px） */
@media (max-width: 767px) {
    .phonics-mouth-wrap #current-ipa-group { margin-top: 2px; margin-bottom: 13px; }
    .phonics-mouth-wrap #instruction-text  { margin-top: 3px; margin-bottom: 10px; }
    .phonics-mouth-wrap #example-words     { margin-top: 2px; }
}

/* スマホのカタカナ表示（組み合わせ発音のボタンだけ）：音ごとの＊（ボタン内に何個も並ぶ）は隠し、
   ボタンの枠線に重ねて右上に「＊」を1個だけ出す（PC・1文字のボタンは今までどおり音のあとに付く）。
   ※「＊注」の＊はボタン(.phonics-mouth-btn)の外なので隠さない */
@media (max-width: 767px) {
    #extra-buttons-2 .phonics-mouth-btn .phonics-notation-star { display: none !important; }
    /* ボタン自体が overflow:hidden のため、枠線にはみ出す＊が切れる。＊が付くボタンだけ、はみ出しを見せる */
    .phonics-notation-has-corner-star { position: relative; overflow: visible !important; }
    .phonics-notation-corner-star {
        position: absolute; top: -8px; right: -3px; z-index: 2; pointer-events: none;
        min-width: 16px; height: 16px; box-sizing: border-box; padding: 0 2px; border-radius: 8px;
        display: flex; align-items: center; justify-content: center;
        background: #fff; color: #dc2626; font-size: 13px; font-weight: 800; line-height: 1;
    }
}