/* --- 基本設定 --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    display: grid;
    place-items: center;
    min-height: 100vh;
    background-color: #10171e; 
    color: #333;
    margin: 0;
    overflow-y: auto; /* 縦スクロールを許可 */
}

/* --- モニターコンテナ --- */
#monitor-container {
    position: relative;
    width: 90%;
    max-width: 800px;
    aspect-ratio: 16 / 9; /* ← これだけで縦横比が正しく保たれる */
    background-image: url('monitor_bg.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* --- ゲーム画面 (モニターの画面部分) --- */
.game-screen {
    position: absolute;
    /* ▼▼▼ ★★★ 注意 ★★★ ▼▼▼ */
    /* ここの4つの値は、F12キーで微調整してください。 */
    left: 17%;
    top: 12%;
    width: 66%;
    height: 64%;
    /* ▲▲▲ ★★★ 注意 ★★★ ▲▲▲ */

    background: #000; /* モニター画面の背景色 */
    padding: 1rem; /* 内部の余白 */
    border-radius: 5px; 
    text-align: center;
    outline: none;
    box-sizing: border-box; /* paddingを含めたサイズ */
    
    /* 画面内のコンテンツを均等に配置 */
    display: flex;
    flex-direction: column;
    justify-content: space-around; /* 上下に均等配置 */
    align-items: center; /* 横方向中央揃え */
}

/* ミスした時の画面揺れエフェクト */
.game-screen.miss {
    animation: shake 0.3s;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* --- タイマー --- */
.timer-container {
    position: absolute;
    top: 0.5rem; /* 画面上部からの位置 */
    right: 0.5rem; /* 画面右部からの位置 */
    width: 60px; /* 40px から 48px に変更 */
    height: 60px; /* 40px から 48px に変更 */
}
.timer-svg {
    transform: rotate(-90deg);
}
.timer-bg {
    fill: none;
    stroke: #333; /* 暗い背景 */
    stroke-width: 3.8;
}
.timer-progress {
    fill: none;
    stroke: #00ff00; /* レトロな緑色の表示 */
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.2s linear;
}
.timer-text {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.1rem; /* 1.2rem から 1.45rem に変更 */
    font-weight: bold;
    color: #00ff00; /* レトロな緑色の表示 */
    transition: transform 0.2s, color 0.2s;
    font-family: 'Press Start 2P', cursive; /* レトロフォント */
}
/* ボーナスタイムの時のエフェクト */
.timer-text.bonus {
    transform: scale(1.4);
    color: #ff0; /* 黄色で強調 */
}

/* --- スコア & コンボ --- */
.stats-container {
    display: flex;
    justify-content: center;
    gap: 2rem;
    font-size: 1.2rem;
    color: #00ff00; /* レトロな緑色の表示 */
    font-family: 'Press Start 2P', cursive; /* レトロフォント */
    margin-top: 1rem; /* タイマーと被らないように少し下げる */
}
#score-display, #combo-display {
    font-weight: bold;
    color: #00ff00; /* レトロな緑色の表示 */
}
#combo-display-wrapper {
    transition: opacity 0.3s;
}

/* --- お題表示エリア --- */
.phrase-container {
    margin: 0;
    width: 100%;
}
.text-display {
    font-size: 1.8rem;
    font-weight: bold;
    color: #00ff00; /* レトロな緑色の表示 */
    min-height: 2.5rem;
    font-family: 'Press Start 2P', cursive; /* レトロフォント */
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.7); /* 少し光る効果 */
}
.kana-display {
    font-size: 1.2rem;
    color: #00ff00;
    min-height: 1.5rem;
    font-family: 'Press Start 2P', cursive;
}
.romaji-display {
    font-size: 1.3rem;
    font-family: 'Press Start 2P', cursive;
    letter-spacing: 1px;
    color: #00ff00;
    min-height: 1.8rem;
    margin-top: 0.5rem;
    overflow-wrap: break-word;
    word-break: break-all;
}
/* タイプ済み・未タイプの文字色 */
.typed, .typed-romaji { color: #ffff00; /* 黄色で強調 */ }
.untyped, .untyped-romaji { color: #00aa00; /* 少し暗い緑 */ }

/* --- キーボード (CSSで作成) --- */
#keyboard-display {
    width: 100%;
    max-width: 700px; /* キーボードの最大幅 */
    margin: 1rem auto 2rem auto; /* モニターの下に配置 (上下に余白) */
    background: #333; /* キーボードの土台の色 */
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative; /* 腕の位置合わせのため */
    box-sizing: border-box; /* paddingを含めたサイズ */
}

.keyboard-row {
    display: flex;
    justify-content: center;
    gap: 0.3rem; /* キーとキーの間隔 */
    margin-bottom: 0.3rem;
}

.key {
    background: #555;
    color: #eee;
    padding: 0.5rem 0.8rem;
    border-radius: 4px;
    border-bottom: 3px solid #444; /* 立体感を出す */
    min-width: 30px; /* キーの最小幅 */
    text-align: center;
    font-family: 'Press Start 2P', cursive; /* レトロフォント */
    font-size: 0.7rem;
    cursor: default;
    user-select: none;
    transition: background-color 0.1s, transform 0.1s;
    box-sizing: border-box;
    height: 35px; /* キーの高さ */
    display: flex;
    align-items: center;
    justify-content: center;
}
.key.pressed {
    background-color: #00ff00; /* 押されたキーは緑色に光る */
    color: #000;
    transform: translateY(2px); /* 少し沈む */
    border-bottom: 1px solid #444;
}

/* 特殊キーの幅調整 */
.key.wide { flex-grow: 1.5; }
.key.narrow { flex-grow: 0.7; }
.key.wide-a { flex-grow: 1.7; }
.key.wide-b { flex-grow: 1.3; }
.key.wide-ctrl, .key.wide-alt, .key.wide-win, .key.wide-func, .key.wide-menu { flex-grow: 1; }
.key.spacebar { flex-grow: 4; }

/* --- 腕のアニメーション要素 --- */
.arm {
    position: absolute;
    width: 8px; /* 15pxから半分(8px)に変更 */
    height: 80px; /* 腕の長さ */
    background-color: #000; /* 黒に変更 */
    border-radius: 0; /* 先端の丸みを削除 */
    transform-origin: bottom center;
    transition: left 0.1s, top 0.1s, transform 0.1s;
    display: none; /* ゲーム開始時に表示 */
    z-index: 20; /* キーボードの上に表示 */
}
.arm::before { /* 指の○部分 */
    content: '';
    position: absolute;
    top: -8px; /* 腕の先端から少し上 */
    left: 50%;
    transform: translateX(-50%);
    width: 25px; /* 指の丸の直径 */
    height: 25px; /* 指の丸の直径 */
    background-color: #fff; /* 中を白に変更 */
    border: 2px solid #000; /* フチを黒に変更 */
    border-radius: 50%;
    box-sizing: border-box;
}
.arm.left {
    transform: rotate(15deg);
}
.arm.right {
    transform: rotate(-15deg);
}
.arm-press {
    transform: scaleY(0.9);
}


/* --- オーバーレイとリザルト --- */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9); /* オーバーレイも暗く */
    display: grid;
    place-items: center;
    z-index: 100;
}

.overlay-content {
    background: #222; /* 背景を暗く */
    color: #00ff00; /* テキストは緑 */
    padding: 2rem 3rem;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.5); /* ネオングリーンシャドウ */
    text-align: center;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    border: 2px solid #00ff00; /* 緑の枠線 */
}

#overlay-title {
    margin-top: 0;
    color: #00ff00;
    font-family: 'Press Start 2P', cursive;
}

#overlay-message {
    font-size: 1.2rem;
    color: #00ff00;
    font-family: 'Press Start 2P', cursive;
}

/* リザルト表示 */
#result-summary {
    margin: 2rem 0;
}
.result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
    text-align: left;
    max-width: 400px;
    margin: 0 auto;
    font-size: 1.1rem;
    font-family: 'Press Start 2P', cursive;
    color: #00ff00;
}
.result-grid span:nth-child(odd) {
    font-weight: bold;
    color: #00ff00;
}
.result-grid span:nth-child(even) {
    font-weight: bold;
    color: #ffff00; /* 黄色で強調 */
    font-size: 1.2rem;
    text-align: right;
}

/* スタートボタン */
#action-button {
    font-size: 1.3rem;
    padding: 0.8rem 2rem;
    cursor: pointer;
    background-color: #00ff00; /* 緑色のボタン */
    color: #000; /* 文字は黒 */
    border: none;
    border-radius: 8px;
    transition: background-color 0.3s, box-shadow 0.3s;
    margin-top: 1rem;
    font-family: 'Press Start 2P', cursive;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.7); /* 緑色の光るシャドウ */
}
#action-button:hover:not(:disabled) {
    background-color: #00aa00; /* 濃い緑 */
    box-shadow: 0 0 15px rgba(0, 255, 0, 1);
}
#action-button:disabled {
    background-color: #555;
    color: #888;
    cursor: not-allowed;
    box-shadow: none;
}

/* --- ランキングエリアのスタイル --- */
.ranking-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 2rem;
    justify-content: center;
}

.ranking-board {
    background: #333; /* 背景を暗く */
    border: 1px solid #00ff00; /* 緑の枠線 */
    border-radius: 8px;
    padding: 1rem 1.5rem;
    text-align: left;
    flex-basis: 350px;
    flex-grow: 1;
    min-width: 300px;
}

.ranking-board h3 {
    text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    color: #00ff00;
    border-bottom: 2px solid #00ff00;
    padding-bottom: 0.5rem;
    font-family: 'Press Start 2P', cursive;
}

.ranking-section {
    margin-bottom: 1rem;
}
.ranking-section h4 {
    margin: 0 0 0.5rem 0;
    color: #00ff00;
    font-size: 1rem;
    font-family: 'Press Start 2P', cursive;
}

.ranking-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 200px;
    overflow-y: auto;
}

.ranking-list li {
    background: #444; /* 背景を暗く */
    color: #eee;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    border: 1px solid #00ff00; /* 緑の枠線 */
    display: flex;
    align-items: center;
    counter-increment: rank;
    position: relative;
    padding-left: 2.5rem;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.8rem;
}

.ranking-list li::before {
    content: counter(rank);
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    font-size: 1.1rem;
    color: #000; /* 数字は黒 */
    background: #00ff00; /* 緑色のメダル */
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    line-height: 1;
}

.ranking-list li[data-rank="1"]::before { background: #ffff00; color: #000; } /* 1位は黄色 */
.ranking-list li[data-rank="2"]::before { background: #cccccc; color: #000; } /* 2位はシルバー */
.ranking-list li[data-rank="3"]::before { background: #cd7f32; color: #fff; } /* 3位はブロンズ */

.rank-details {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
}
.rank-name {
    font-weight: bold;
    color: #eee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}
.rank-score {
    font-size: 0.7rem;
    color: #00ff00;
    white-space: nowrap;
}

#personal-list .rank-score {
    color: #00bb00;
}

/* --- ▼▼▼ レスポンシブ設定を削除しました ▼▼▼ --- */
/*
@media (max-width: 768px) {
    ... (スマホ用の設定はすべて削除) ...
}
*/