body {
    background-color: #f0f0f0;
    font-family: 'Meiryo', 'Hiragino Kaku Gothic ProN', sans-serif;
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px 0;
    color: #333;
}
.container { width: 800px; max-width: 95%; background-color: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); text-align: center; box-sizing: border-box; }
h1 { color: #2c3e50; margin-top: 0; }
.description { font-size: 0.9em; color: #555; margin-bottom: 20px; line-height: 1.6; border-bottom: 1px solid #eee; padding-bottom: 20px; }
#game-options { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee; }
.option-group { display: flex; justify-content: center; align-items: center; gap: 10px; }
.option-label { font-weight: bold; }
.radio-button-group input[type="radio"] { display: none; }
.radio-button { padding: 8px 16px; border: 1px solid #bdc3c7; border-radius: 20px; cursor: pointer; transition: all 0.2s ease-in-out; }
.radio-button:hover { background-color: #ecf0f1; }
.radio-button-group input[type="radio"]:checked + .radio-button { background-color: #3498db; border-color: #2980b9; color: white; font-weight: bold; }
#time-limit-group[disabled] .radio-button { opacity: 0.6; cursor: not-allowed; background-color: #f5f5f5; color: #aaa; border-color: #ddd; }
#time-limit-group[disabled] .radio-button:hover { background-color: #f5f5f5; }
#time-limit-group[disabled] input[type="radio"]:checked + .radio-button { background-color: #bdc3c7; border-color: #95a5a6; color: white; }
#status-display #timer { font-weight: bold; color: #e67e22; }
#status-display { display: flex; flex-wrap: wrap; justify-content: space-around; font-size: 1.2em; margin-bottom: 20px; background: #ecf0f1; padding: 10px; border-radius: 5px; }
#status-display p { margin: 5px 10px; }
#question-display { background: #fdfdfd; border: 1px solid #ddd; border-radius: 5px; padding: 20px; margin-bottom: 20px; min-height: 125px; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: box-shadow 0.2s; }
@keyframes shake-error { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } }
.error-shake { animation: shake-error 0.4s ease-in-out; box-shadow: 0 0 10px rgba(231, 76, 60, 0.7); }
#japanese-question { font-size: 1.6em; margin-bottom: 10px; color: #555; letter-spacing: 2px; line-height: 1.5; }
#romaji-guide { font-size: 1.2em; color: #7f8c8d; letter-spacing: 2px; font-family: 'Courier New', Courier, monospace; word-break: break-all; }
#romaji-guide span { transition: color 0.2s; }
.typed { color: #2ecc71; }
#start-prompt { padding: 10px 0; }
.start-prompt-text { font-size: 1.5em; color: #3498db; }
.hidden { display: none !important; }
#keyboard { margin-top: 30px; user-select: none; max-width: 100%; }
.keyboard-row { display: flex; justify-content: center; margin-bottom: 6px; }
.key { display: inline-flex; justify-content: center; align-items: center; padding: 8px; margin: 0 3px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; font-size: 0.9em; min-width: 25px; height: 40px; text-align: center; box-shadow: 0 2px 2px rgba(0,0,0,0.1); transition: all 0.07s ease; box-sizing: border-box; flex: 1; max-width: 65px; }
.key.active { background-color: #3498db; color: white; transform: scale(1.1); border-color: #2980b9; }
.history-container { width: 800px; max-width: 95%; background-color: #fff; padding: 20px 30px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); box-sizing: border-box; margin-top: 30px; }
.history-container h2 { margin-top: 0; text-align: center; color: #2c3e50; border-bottom: 2px solid #ecf0f1; padding-bottom: 10px; }
.history-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.history-filter { display: flex; align-items: center; gap: 5px; }
.history-filter label { cursor: pointer; }
.history-log-wrapper { border: 1px solid #ecf0f1; border-radius: 5px; min-height: 200px; max-height: 400px; overflow-y: auto; }
#history-log { width: 100%; border-collapse: collapse; }
#history-log th, #history-log td { padding: 8px 12px; border-bottom: 1px solid #ecf0f1; vertical-align: middle; }
#history-log thead { position: sticky; top: 0; background-color: #f8f9f9; }
#history-log th { font-weight: bold; text-align: left;}
#history-log tr:last-child td { border-bottom: none; }
.th-question { width: 60%; }
.th-target { width: 20%; }
.th-input { width: 20%; }
.history-roma { font-family: 'Courier New', Courier, monospace; }
.history-correct { color: #2c3e50; }
.history-incorrect { color: #e74c3c; font-weight: bold; text-decoration: line-through; }
.miss-row { background-color: #fff5f5; }
.history-pagination { text-align: center; margin-top: 15px; }
.history-pagination button { padding: 5px 15px; border: 1px solid #bdc3c7; background-color: #fff; border-radius: 5px; cursor: pointer; transition: background-color 0.2s; }
.history-pagination button:hover:not(:disabled) { background-color: #f8f9f9; }
.history-pagination button:disabled { opacity: 0.5; cursor: not-allowed; }
.history-pagination span { margin: 0 15px; font-size: 1.1em; vertical-align: middle; }
footer { width: 100%; text-align: center; padding: 20px 0; margin-top: 30px; color: #7f8c8d; font-size: 0.9em; }
footer a { color: #3498db; text-decoration: none; }
footer a:hover { text-decoration: underline; }
.end-title { font-size: 1.5em; font-weight: bold; color: #2c3e50; margin: 0; }
.final-rank { font-size: 3.5em; font-weight: bold; margin: 10px 0; font-family: 'Georgia', serif; }
.final-rank[data-rank="E"] { color: #95a5a6; }
.final-rank[data-rank="D"] { color: #1abc9c; }
.final-rank[data-rank="C"] { color: #2ecc71; }
.final-rank[data-rank="B"] { color: #3498db; }
.final-rank[data-rank="A"] { color: #9b59b6; }
.final-rank[data-rank="S"] { color: #e67e22; }
.final-rank[data-rank="SS"] { color: #e74c3c; }
.final-rank[data-rank="God"] { background: linear-gradient(45deg, #f1c40f, #e67e22, #e74c3c); -webkit-background-clip: text; color: transparent; }
.rank-comment { font-size: 1em; color: #7f8c8d; margin-top: -10px; margin-bottom: 15px; }
.end-score { font-size: 1.5em; font-weight: bold; color: #34495e; margin: 5px 0 15px 0; }
.end-score .score-unit { font-size: 0.7em; color: #7f8c8d; }
.end-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px 25px; margin: 15px 0; font-size: 1.1em; }
.end-stats p { margin: 0; }
.end-re-prompt { margin-top: 20px; font-size: 1.2em; color: #3498db; }
.score-details { font-size: 0.9em; margin-top: 25px; text-align: left; background: #f8f9f9; border: 1px solid #ecf0f1; border-radius: 5px; padding: 10px 15px; }
.score-details summary { cursor: pointer; font-weight: bold; color: #34495e; }
.score-details div { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #bdc3c7; line-height: 1.8; }
.score-details ul { padding-left: 25px; margin: 5px 0 0 0; list-style-type: square; }

/* ★★★ここからが今回の主な追加点★★★ */
.rank-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.95em;
}
.rank-table th, .rank-table td {
    border: 1px solid #e0e0e0;
    padding: 6px 8px;
    text-align: center;
}
.rank-table th {
    background-color: #ecf0f1;
}
/* ★★★ここまでが今回の主な追加点★★★ */