/* © 2026 PassQuest Team (https://passquest.jp). All rights reserved. 無断複製・転載・改変を禁じます。 */
/* =========================================================
   PassQuest - 合格可能性メーター (Pass Probability Meter)
   重厚な金の額縁 × 満ちるオーブ
   ========================================================= */

.pm-card {
    position: relative;
    box-sizing: border-box;
    /* ラベルが極太フォント(Dela Gothic One)を継承していたので、通常太さのフォントに統一 */
    font-family: "Noto Sans JP", "Segoe UI", system-ui, sans-serif;
    font-weight: 400;
    border-radius: 20px;
    padding: 18px 18px 16px;
    background:
        radial-gradient(120% 120% at 50% 0%, #241d33 0%, #16121f 55%, #0e0b16 100%);
    border: 1px solid rgba(255, 210, 122, 0.35);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 40px rgba(255, 190, 90, 0.05);
    color: #fff;
    overflow: hidden;
}

/* 上部の金の光の帯 */
.pm-card::before {
    content: "";
    position: absolute;
    top: 0; left: 12%;
    width: 76%; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 214, 122, 0.9), transparent);
    filter: blur(0.4px);
}

.pm-title {
    text-align: center;
    font-size: 0.86rem;
    letter-spacing: 0.1em;
    font-weight: 400;
    color: #ffd77a;
    text-transform: uppercase;
    margin: 0 0 6px;
    opacity: 0.92;
}

.pm-gauge-wrap {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.pm-gauge {
    display: block;
    width: 200px;
    height: 200px;
    max-width: 62vw;
}

/* オーブ内の波（横に流れる） */
@keyframes pmWave {
    from { transform: translateX(0); }
    to   { transform: translateX(-76px); }
}
.pm-wave { animation: pmWave 3.4s linear infinite; }
.pm-wave.slow { animation-duration: 5.2s; opacity: 0.55; }

/* 円弧のかすかな明滅 */
@keyframes pmArcPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.82; }
}
.pm-arc-progress { animation: pmArcPulse 3.6s ease-in-out infinite; }

/* 中央の数値 */
.pm-num {
    font-family: var(--font-heading, "Georgia", serif);
    font-weight: 500;
    fill: #fff;
    text-shadow: 0 0 12px rgba(255, 220, 140, 0.8);
}

/* 下部の情報行 */
.pm-info {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: center;
}
.pm-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pm-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    font-weight: 400;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
    white-space: nowrap;
}
.pm-badge .dot {
    width: 8px; height: 8px; border-radius: 50%;
    box-shadow: 0 0 6px currentColor;
}
.pm-conf-low  { color: #ff9a76; }
.pm-conf-mid  { color: #ffd76a; }
.pm-conf-high { color: #7dffb0; }

.pm-weak {
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.35;
    color: #fff6e6;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,120,90,0.16), rgba(255,120,90,0.06));
    border: 1px solid rgba(255, 140, 100, 0.3);
}
.pm-weak.blind {
    background: linear-gradient(180deg, rgba(150,150,170,0.16), rgba(150,150,170,0.06));
    border-color: rgba(180, 180, 200, 0.3);
    color: #dfe0ea;
}
.pm-weak .pm-weak-label { color: #ff9a76; font-size: 0.72rem; letter-spacing: .02em; white-space: nowrap; }
.pm-weak.blind .pm-weak-label { color: #6fd0ff; }

/* 差分チップ（結果画面） */
.pm-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 800;
    padding: 3px 11px;
    border-radius: 999px;
    /* ★2026-08-16 «both» → «forwards»。
         both だと «始まる前» にも opacity:0 が当たるため、
         iPhone でアニメが始まらなかったとき
         «▲ +2pt» の表示が丸ごと見えなくなることがありました。 */
    animation: pmDeltaPop 0.6s cubic-bezier(.2,.9,.3,1.4) forwards;
}
@keyframes pmDeltaPop {
    from { transform: scale(0.4); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.pm-delta.up   { color: #072; background: rgba(125,255,176,0.9); }
.pm-delta.down { color: #fff; background: rgba(220,80,60,0.9); }
.pm-delta.flat { color: #221; background: rgba(255,214,122,0.85); }

.pm-note {
    font-size: 0.66rem;
    color: #9a93ad;
    text-align: center;
    margin-top: 2px;
}

/* 測定中の細いバー */
.pm-collect-bar {
    width: 78%;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
    margin: 4px auto 0;
    border: 1px solid rgba(255,255,255,0.1);
}
.pm-collect-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffd76a, #e0a021);
    transition: width 0.8s ease-out;
}

/* --- 結果画面スロット --- */
#pass-meter-result { margin: 14px auto 4px; max-width: 340px; }

/* --- ホーム常設（コンパクト・右下固定） --- */
.pm-home {
    position: fixed;
    left: 64px;   /* ロゴ中心148pxに中央合わせ: 148 - 172/2 */
    top: 76px;
    width: 172px;
    z-index: 9997;
    padding: 12px 12px 11px;
    cursor: default;
    opacity: 1;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* 言語ドロップダウンを開いている間はメーターを一時的に隠す（重なり回避）
   JS(MutationObserver)が .pm-dim を付け外しする */
.pm-home.pm-dim {
    opacity: 0;
    transform: translateX(-10px);
    pointer-events: none;
}
@keyframes pmHomeIn {
    from { transform: translateY(14px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.pm-home .pm-title { font-size: 1rem; letter-spacing: 0.08em; margin-bottom: 4px; }
.pm-home .pm-gauge { width: 142px; height: 142px; }
.pm-home .pm-info { margin-top: 8px; gap: 6px; }
.pm-home .pm-weak { font-size: 0.82rem; padding: 5px 11px; }
.pm-home .pm-badge { font-size: 0.78rem; padding: 3px 10px; }

@media (max-width: 640px) {
    .pm-home { width: 144px; left: 76px; top: 66px; padding: 9px; } /* 148 - 144/2 */
    .pm-home .pm-gauge { width: 116px; height: 116px; }
}

/* ★2026-09-24 ふりがな付きの札（結果画面・くわしくシート＝ .pm-home でない表示）。
     ふりがな（rt）が札の上の縁で切れないように、行の高さと上下の余白を足します。
     トップの小さな札（.pm-home）は ふりがな無しのままなので触りません。 */
.pm-card:not(.pm-home) .pm-badge,
.pm-card:not(.pm-home) .pm-weak {
    line-height: 1.9 !important;
    padding-top: 5px !important;
    padding-bottom: 4px !important;
    overflow: visible !important;
}
.pm-card:not(.pm-home) .pm-badge rt,
.pm-card:not(.pm-home) .pm-weak rt,
.pm-card:not(.pm-home) .pm-note rt,
.pm-card:not(.pm-home) .pm-title rt {
    font-size: 0.5em !important;
    line-height: 1 !important;
    font-weight: 700;
}
.pm-card:not(.pm-home) .pm-note { line-height: 1.95 !important; margin-top: 6px !important; }
.pm-card:not(.pm-home) .pm-title { line-height: 2.0 !important; padding-top: 4px; }
.pm-card:not(.pm-home) .pm-row { margin-top: 8px !important; }

/* «モンスターの落とし物» の見出しと案内にも ふりがなが入ったので 行の高さを確保 */
.weak-chest-container h3 { line-height: 1.95 !important; padding-top: 4px !important; }
.weak-chest-container p { line-height: 1.95 !important; }
.weak-chest-container rt { font-size: 0.5em !important; line-height: 1 !important; }

/* くわしくシートの上の札（#pd-hero）も同じ（mobile_v1.css の指定より強くするため html を付ける） */
html #pass-detail-screen #pd-hero .pm-badge,
html #pass-detail-screen #pd-hero .pm-weak { line-height: 1.9 !important; padding-top: 5px !important; padding-bottom: 4px !important; overflow: visible !important; }
html #pass-detail-screen #pd-hero .pm-note { line-height: 1.95 !important; }
html #pass-detail-screen #pd-hero .pm-title { line-height: 2.0 !important; }
html #pass-detail-screen #pd-hero rt { font-size: 0.55em !important; line-height: 1 !important; color: #ffe9b0 !important; opacity: 1 !important; text-shadow: 0 1px 2px rgba(0,0,0,.85) !important; }
/* 1問1答の結果の札（#pass-meter-ichimoni）も同じ */
html #pass-meter-ichimoni rt { font-size: 0.55em !important; line-height: 1 !important; color: #ffe9b0 !important; opacity: 1 !important; text-shadow: 0 1px 2px rgba(0,0,0,.85) !important; }
html #pass-meter-ichimoni .pm-badge, html #pass-meter-ichimoni .pm-weak { line-height: 1.9 !important; padding-top: 5px !important; padding-bottom: 4px !important; overflow: visible !important; }
html #pass-meter-ichimoni .pm-note { line-height: 1.95 !important; }

/* ★2026-09-24 «🏆 結果を見る» のボタン（RPG・1問1答）に ふりがなが入ったので、白で読めるように（ボタンは紺） */
html #advance-btn rt, html #ichimoni-advance-btn rt { color: #ffffff !important; font-size: 0.55em !important; opacity: 1 !important; font-weight: 700 !important; line-height: 1 !important; }
html #advance-btn, html #ichimoni-advance-btn { line-height: 1.9 !important; }
html #final-share-area rt { color: #ffffff !important; font-size: 0.55em !important; opacity: 1 !important; font-weight: 700 !important; }

/* ★2026-09-24 iPhone の Safari では ふりがなが漢字から離れすぎる（トモさんのスマホ）。
     アプリ共通のレシピ（css/mobile_v1.css の問題文と同じ：Chromium系=top -0.04em ／ iPhone Safari=margin-bottom -0.55em）を
     結果画面・くわしくシート・1問1答の札・«結果を見る»・共有メニューの ふりがなにも当てる。 */
#final-result-card rt, html #pass-detail-screen #pd-hero rt, html #pass-meter-ichimoni rt,
html #advance-btn rt, html #ichimoni-advance-btn rt, html #final-share-area rt, #pq-share-menu rt {
    position: relative !important;
    top: -0.04em !important;
    margin-bottom: 0 !important;
    transform: none !important;
}
@supports (-webkit-touch-callout: none) {
    #final-result-card rt, html #pass-detail-screen #pd-hero rt, html #pass-meter-ichimoni rt,
    html #advance-btn rt, html #ichimoni-advance-btn rt, html #final-share-area rt, #pq-share-menu rt {
        top: 0 !important;
        margin-bottom: -0.55em !important;
    }
}

/* ★2026-09-25 ログインの小窓（こい紫）：ふりがなを 明るい金色に（自主点検で «忘» の読みが黒で見えなかった）。
     題名・説明は ふりがなの高さぶん 行間を広げる。位置は上のレシピと同じ */
html #login-modal rt { color: #ffe08a !important; font-size: 0.55em !important; font-weight: 700 !important; opacity: 1 !important; line-height: 1 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.85) !important; letter-spacing: 0 !important; position: relative !important; top: -0.04em !important; margin-bottom: 0 !important; transform: none !important; }
html #login-modal .login-title-jp { line-height: 1.9 !important; }
html #login-modal .login-subtitle { line-height: 1.9 !important; }
html #login-modal #pq-forgot-btn { line-height: 1.9 !important; }
@supports (-webkit-touch-callout: none) {
    html #login-modal rt { top: 0 !important; margin-bottom: -0.55em !important; }
}

/* ★2026-09-25 利用規約・プライバシー（こい紫の板）：日本語に ふりがなを付けたので、明るい金色＋同じ位置レシピ */
html #legal-modal rt { color: #ffe08a !important; font-size: 0.55em !important; font-weight: 700 !important; opacity: 1 !important; line-height: 1 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.85) !important; letter-spacing: 0 !important; position: relative !important; top: -0.04em !important; margin-bottom: 0 !important; transform: none !important; }
html #legal-modal ruby { ruby-position: over; }
@supports (-webkit-touch-callout: none) {
    html #legal-modal rt { top: 0 !important; margin-bottom: -0.55em !important; }
}