/* ============================================================
   ぱそトレ！ タイピング練習画面専用スタイル (v19.9.54)
   ------------------------------------------------------------
   【管理ルール】
   - 退化禁止：JIS黄金比、圧縮レイアウト、垂直分散、%サイズ修正を完全内包
   - 構成順：1.基本 2.開始画面 3.打鍵画面 4.キーボード 5.結果画面 6.制限
   ============================================================ */

:root {
    --primary: #2c3e50;
    --accent: #3498db;
    --key-border: #dcdde1;
}

/* --- 1. 共通レイアウト & 集中モード --- */

body.game-body {
    overflow-y: auto;
    min-height: 100vh;
    background-color: #d1d5db;
    transition: background-color 0.6s ease;
}

body.game-body main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 25px !important;
}

/* 練習開始時の背景沈み込み・スライド演出 */
body.focus-mode {
    background-color: #4e5d6c !important;
}

body.focus-mode header,
body.focus-mode footer {
    opacity: 0.15;
    pointer-events: none;
    transition: 0.6s ease;
}

body.focus-mode #app {
    margin-top: -60px !important;
    transition: margin-top 0.4s ease;
}


/* --- 2. スタート画面：カテゴリ選択カード --- */

.card {
    background: white;
    padding: 15px 30px !important;
    border-radius: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    text-align: center;
    width: 920px;
}

.btn-group-container {
    display: flex;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 10px !important;
}

.category-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #eee;
}

.group-label {
    font-size: 0.8rem;
    color: #7f8c8d;
    font-weight: 800;
    margin-bottom: 4px;
    display: block;
}

.btn-category {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.85rem;
    color: var(--primary);
    transition: all 0.2s;
}

.btn-category:hover:not(.active) {
    border-color: var(--accent);
    background: #f0f7ff;
    color: var(--accent);
    transform: translateY(-1px);
}

.btn-category.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* 総合判定ボタン専用（特別なオレンジ） */
.btn-total {
    height: 100%;
    font-size: 1.1rem !important;
    background: white;
    color: var(--primary);
    border: 1px solid #ddd !important;
    transition: all 0.2s;
}

.btn-total:hover:not(.active) {
    background: #fff5e6 !important;
    border-color: #f39c12 !important;
    color: #f39c12 !important;
}

.btn-total.active {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%) !important;
    color: white !important;
    border: none !important;
}

/* コントロール行（ベストスコア・開始ボタン・設定） */
.controls-master-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 12px;
    padding: 0 15px;
}

.compact-best {
    margin: 0 !important;
    min-width: 160px;
    text-align: left;
}

.compact-settings {
    margin: 0 !important;
    display: flex;
    gap: 8px;
    min-width: 220px;
    justify-content: flex-end;
}

.btn-main.compact-start {
    padding: 10px 45px !important;
    font-size: 1.15rem !important;
    margin: 0 !important;
    box-shadow: 0 4px 0 #1a252f !important;
    flex-shrink: 0;
}


/* ============================================================
   目の疲れ軽減：視覚的ストレス・コントロール (v19.9.62)
   ============================================================ */

/* 1. タイピングボックス：ミス時に色が戻る動きを持たせる */
body.game-body .typing-display {
    background-color: #fcfcfc !important;
    border: 1px solid #e0e6ed !important;
    /* ミス時のピンクから、0.6秒かけて「じわ〜っ」と白に戻る */
    transition: background-color 0.6s ease-out, border-color 0.6s ease-out;
}

/* 2. キーボード：常に目に優しい白で固定（ミス時も変化させない） */
body.game-body #keyboard-container {
    background-color: #fcfcfc !important;
    border: 1px solid #e0e6ed !important;
}

/* --- 3. タイピング表示エリア (120px圧縮版) --- */

.typing-display {
    background: white;
    padding: 15px 40px !important;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    margin-bottom: 10px !important;
    height: 120px !important; /* 縦幅を120pxへ圧縮 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    width: 800px !important;
    position: relative;
}

/* --- 3. タイピング表示エリア (演出復活版) --- */

/* 待機（READY）画面：全体を中央に寄せる */
.ready-container { 
    text-align: center; 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
}

/* 「スペースキーを押して開始」：大きく、太く、アニメーションさせる */
.ready-text { 
    font-size: 1.8rem !important; 
    font-weight: 800; 
    color: var(--primary); 
    animation: pulse 1.5s infinite; /* 1.5秒ごとにふわふわさせる */
    margin-bottom: 5px; 
}

/* 下の「Escキー」の説明書き */
.esc-guide-card { 
    font-size: 0.85rem !important; 
    color: #7f8c8d; 
    font-weight: 500; 
}

/* ふわふわ動くアニメーションの中身 */
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.98); }
}

.typing-display::before {
    display: none !important;
}

.text-wrapper-left {
    text-align: left;
    width: 100%;
}

#display-kanji {
    font-size: 1.6rem !important;
    font-weight: bold;
    color: var(--primary);
    margin-bottom: 2px;
}

#display-kana {
    font-size: 0.9rem !important;
    color: #888;
    margin-bottom: 3px;
}

.romaji-scroll-window {
    width: 100%;
    overflow: hidden;
    height: 3.2rem !important;
    display: flex;
    align-items: center;
    /* 修正点：背景色を透明にすることで、ボックス全体のピンク色が見えるようにします */
    background: transparent !important; 
    border-radius: 10px;
}

.romaji-content {
    font-family: 'Roboto Mono', monospace;
    font-size: 1.8rem !important;
    font-weight: 700;
    white-space: nowrap;
    text-transform: uppercase;
    transition: transform 0.1s ease-out;
}

.typed { color: #d1d5db !important; }
.current { color: var(--accent) !important; border-bottom: 4px solid var(--accent) !important; }

/* カウントダウン数字 */
.countdown-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 6rem !important;
    font-weight: 900;
    color: var(--accent);
    z-index: 1000;
    animation: count-pop 0.5s ease-out;
}

@keyframes count-pop {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}


/* --- 4. JIS黄金比物理キーボード (36px版) --- */

#keyboard-container {
    width: 800px !important;
    padding: 12px !important;
    background: #f1f2f6;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.keyboard-row {
    display: flex;
    justify-content: flex-start;
    gap: 4px !important;
    width: 680px !important;
    margin-bottom: 4px !important;
}

/* 黄金比オフセット設定 */
.row-0 { padding-left: 8px !important; } 
.row-1 { padding-left: 28px !important; } 
.row-2 { padding-left: 45px !important; } 
.row-3 { padding-left: 8px !important; } 
.row-4 { padding-left: 180px !important; } /* row-4オフセット死守 */

.key {
    width: 36px !important;
    height: 36px !important;
    background: white;
    border-radius: 6px !important;
    border: 1px solid var(--key-border);
    border-bottom-width: 2px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem !important;
    font-weight: bold;
    color: #57606f;
    flex-shrink: 0;
}

.key.wide-shift { width: 54px !important; }
.key.space { width: 160px !important; background: #3498db; color: white; border-color: #2980b9; }

.key.highlight {
    background: var(--accent) !important;
    color: white !important;
    transform: translateY(2px);
    border-bottom-width: 1px !important;
}

/* 指別パステルカラー */
.key[class*="f-"] { color: #57606f; }
.key.f-lp { background-color: #ffdce0; }
.key.f-lr { background-color: #fff3d6; }
.key.f-lm { background-color: #e2f9e1; }
.key.f-li { background-color: #e2e9ff; } /* 左人差し指：青 */
.key.f-ri { background-color: #f0e1ff; } /* 右人差し指：紫 */
.key.f-rm { background-color: #e2f9e1; }
.key.f-rr { background-color: #fff3d6; }
.key.f-rp { background-color: #ffdce0; }


/* 結果画面コンテナ：360pxへ圧縮し、少し上に引き上げる */
.result-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px !important;
    width: 940px !important;
    margin: -10px auto 0 auto !important; 
    height: 360px !important; 
    align-items: stretch;
    justify-content: center;
}

/* 下部広告枠：余白を詰める */
.ad-container-bottom {
    display: block !important;
    width: 100%;
    max-width: 728px;
    height: 60px !important;
    margin: 5px auto 0 auto !important; 
    background: transparent !important;
}

/* 左側：ミス詳細エリア */
.result-side {
    flex: 0.9 !important;
    background: white;
    padding: 15px !important;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.result-side h3 {
    text-transform: none !important;
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
}

.scroll-list {
    flex: 1;
    overflow-y: auto;
    padding-right: 10px;
}

.miss-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px !important;
    border-bottom: 1px solid #f8f9fa;
    font-family: 'Roboto Mono', monospace;
    font-size: 1.1rem;
}

.miss-key { font-size: 1.2rem !important; font-weight: bold; color: #bdc3c7; }
.miss-count { font-size: 1rem; color: #7f8c8d; }

/* ワースト3の強調表示 */
.miss-item.worst1 { background: #fff5f5; border-radius: 8px; margin-bottom: 3px; padding: 8px 12px !important; }
.miss-item.worst1 .miss-key { color: #ff4757; font-size: 1.6rem !important; }
.miss-item.worst1 .miss-count { color: #ff4757; font-weight: bold; font-size: 1.1rem !important; }
.miss-item.worst2 { background: #fffaf0; border-radius: 8px; margin-bottom: 3px; }
.miss-item.worst3 { background: #f0f9ff; border-radius: 8px; margin-bottom: 3px; }

/* 右側：メイン結果エリア */
.result-main {
    flex: 1.6 !important;
    background: white;
    padding: 20px !important;
    border-radius: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.result-content-wrapper {
    display: flex !important;
    width: 100%;
    height: 300px !important;
    align-items: stretch !important;
    justify-content: space-around;
}

/* ランク表示 (垂直分散：上中下) */
.rank-display-area {
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 5px 0 !important;
    height: 100% !important;
}

#result-title {
    font-size: 1.3rem !important;
    margin: 0 !important;
    color: var(--primary);
}

.rank-main-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#result-rank {
    font-size: 5.5rem !important;
    font-weight: 900;
    color: var(--accent);
    line-height: 1;
    letter-spacing: -2px;
    margin: 0 !important;
}

#result-rank.is-aborted {
    font-size: 3rem !important;
    letter-spacing: -0.05em !important;
    color: #95a5a6;
    white-space: nowrap !important;
}

.rank-display-area p {
    font-size: 0.95rem !important;
    margin-top: 10px !important;
    color: #7f8c8d !important;
    font-weight: 800;
}

.result-action-area {
    width: 100%;
    text-align: center;
    padding-bottom: 5px;
}

/* 統計数値エリア */
.stats-display-area {
    flex: 1.2;
    padding-left: 20px !important;
    border-left: 1px solid #eee;
    display: flex;
    flex-direction: column;
    justify-content: center !important;
}

.res-grid-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.res-label {
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: 1rem !important;
    color: #a0a0a0 !important;
    font-weight: 500;
    text-transform: none !important;
}

.res-value {
    font-family: 'Roboto Mono', monospace !important;
    font-weight: 700;
    font-size: 1.4rem !important;
    color: var(--primary) !important;
    display: inline-flex;
    align-items: baseline;
}

/* %記号のサイズ調整 */
.res-value span {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
}

#res-score {
    color: var(--accent) !important;
    font-size: 1.6rem !important;
}

/* --- 5. ダメージエフェクト（ミス時）：タイピングボックス限定版 --- */

/* JSでクラスがついた瞬間（50ms）、この箱の中（漢字・ローマ字エリア全て）が光ります */
#typing-container.damage-effect {
    background-color: #ffdce0 !important; /* 目に優しいパステルピンク */
    border-color: #ffadb5 !important;
    
    /* 変化の瞬間は即座に（0秒で）色を出す */
    transition: none !important;
}

/* --- 6. 設定トグルボタン ＆ PC制限アラート --- */

.btn-toggle {
    background: white;
    border: 2px solid var(--key-border);
    padding: 6px 0 !important;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.85rem;
    color: var(--primary);
    transition: all 0.2s;
    min-width: 110px !important; /* 横幅固定でガタつきを防止 */
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.btn-toggle.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.mobile-restriction-overlay {
    display: none;
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #f8f9fa; z-index: 10000; 
    padding: 20px; flex-direction: column; align-items: center; justify-content: center;
}

.restriction-card {
    background: white; padding: 40px 25px; border-radius: 25px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1); max-width: 450px; width: 90%; text-align: center;
}

/* 1024px以下での制限発動 */
@media (max-width: 1024px) {
    body.game-body .mobile-restriction-overlay { display: flex; }
    body.game-body #app { display: none !important; }
}

/* ============================================================
   play.html 追加解説エリア専用スタイル (v19.9.139 正典)
   ------------------------------------------------------------
   - 垂直配置の深度調整：解説ボックスをさらに深く沈める
   - 入力ルール：薄い青色(#f0f7ff)の背景を適用
   - カテゴリカード：太い枠線と背景色、強固なタイトル装飾
   - 冗長記述：プロパティ完全展開を維持
   ============================================================ */

body.game-body .game-description-wrapper {
    background-color: transparent;
    width: 100%;
    /* 1366x768環境で、冒頭の挨拶がちょうど隠れるよう上余白を120pxへ拡大 */
    padding-top: 120px;
    padding-right: 0px;
    padding-bottom: 140px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    transition-property: opacity;
    transition-duration: 0.6s;
    transition-timing-function: ease;
}

body.focus-mode .game-description-wrapper {
    opacity: 0.15;
    pointer-events: none;
}

body.game-body .game-info-section {
    max-width: 920px !important;
    background-color: #ffffff;
    margin-top: 0px !important;
    margin-right: auto !important;
    margin-bottom: 0px !important;
    margin-left: auto !important;
    padding-top: 50px;
    padding-right: 60px;
    padding-bottom: 60px;
    padding-left: 60px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    box-shadow: 0px 25px 50px -20px rgba(0, 0, 0, 0.12) !important;
    border-top-style: none !important;
    border-right-style: none !important;
    border-bottom-style: none !important;
    border-left-style: none !important;
}

/* 入力ルールボックス：薄い青色の背景を適用 */
body.game-body article.static-page .content-body .input-rule-box {
    background-color: #f0f7ff;
    margin-top: 40px;
    margin-right: 0px;
    margin-bottom: 40px;
    margin-left: 0px;
    padding-top: 25px;
    padding-right: 30px;
    padding-bottom: 25px;
    padding-left: 30px;
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #d1e3f8;
    border-right-color: #d1e3f8;
    border-bottom-color: #d1e3f8;
    border-left-color: #d1e3f8;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

body.game-body article.static-page .content-body .input-rule-box h3 {
    color: #2c3e50;
    font-size: 1.2rem;
    font-weight: 900;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 15px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    border-bottom-style: none;
}

body.game-body .example-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 15px;
}

body.game-body .example-item {
    background-color: #ffffff;
    display: flex;
    align-items: center;
    padding-top: 10px;
    padding-right: 18px;
    padding-bottom: 10px;
    padding-left: 18px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #d1e3f8;
    border-right-color: #d1e3f8;
    border-bottom-color: #d1e3f8;
    border-left-color: #d1e3f8;
    font-size: 0.9rem;
    font-weight: 800;
    color: #2c3e50;
}

/* カテゴリ説明グリッドの強化 */
body.game-body .category-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 40px;
}

body.game-body .info-card {
    background-color: #f8fbfe; /* 薄い青白系の背景で清潔感を出す */
    display: flex;
    flex-direction: column;
    padding-top: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
    padding-left: 25px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-top-width: 2px; /* 枠線を太く */
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #e2e8f0;
    border-right-color: #e2e8f0;
    border-bottom-color: #e2e8f0;
    border-left-color: #e2e8f0;
    transition: border-color 0.2s ease;
}

body.game-body .info-card h3 {
    font-size: 1.2rem; /* タイトルを大きくハッキリと */
    font-weight: 900;
    color: var(--primary);
    display: block;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 15px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 10px;
    padding-left: 0px;
    border-bottom-width: 3px; /* 見出しの下線を太く */
    border-bottom-style: solid;
    border-bottom-color: #e2e8f0;
}

body.game-body .info-card p {
    font-size: 0.95rem;
    color: #4a5568;
    line-height: 1.7;
    margin-top: 0px;
}

/* スマホ対応 */
@media (max-width: 768px) {
    body.game-body .category-info-grid {
        grid-template-columns: 1fr;
    }
    body.game-body .game-info-section {
        width: 95% !important;
        padding-top: 40px !important;
        padding-right: 25px !important;
        padding-bottom: 40px !important;
        padding-left: 25px !important;
    }
}
/* --- portal-shared.css のパーツを練習画面（game-body）でも使えるように同期 --- */
body.game-body .instructor-advice {
    background-color: #fff9e6;
    border-left: 5px solid #f39c12;
    padding-top: 22px; padding-right: 30px; padding-bottom: 22px; padding-left: 30px;
    border-radius: 12px; margin-top: 30px; margin-bottom: 30px;
    font-size: 0.98rem; line-height: 1.8; color: #333333; box-sizing: border-box;
    text-align: left;
}
body.game-body .instructor-advice b {
    display: inline-block;
    color: #e67e22;
    font-weight: 900;
    margin-bottom: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(230, 126, 34, 0.25);
}

/* --- portal-shared.css のナビボタンを game-body でも有効化 (v19.9.174) --- */

/* 配置エリアの強制同期 */
body.game-body .summary-nav {
    display: flex !important;
    gap: 15px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    margin-top: 40px !important;
    margin-bottom: 0px !important;
    width: 100% !important;
}

/* ボタン共通サイズ・形状の強制同期 */
body.game-body .summary-nav .btn-main,
body.game-body .summary-nav .summary-btn {
    padding-top: 12px !important;
    padding-right: 20px !important;
    padding-bottom: 12px !important;
    padding-left: 20px !important;
    min-width: 160px !important;
    font-size: 0.95rem !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 40px !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    box-sizing: border-box !important;
}

/* サブボタン（白背景・青枠）の色定義 */
body.game-body .summary-btn {
    background-color: #ffffff !important;
    border: 2px solid #3498db !important;
    color: #3498db !important;
    transition: all 0.2s ease !important;
}

body.game-body .summary-btn:hover {
    background-color: #3498db !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}