[hidden] {
    display: none !important;
}

body {
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f0f8ff;
    transition: background-color 0.2s;
}

#game-container {
    text-align: center;
    background: white;
    padding: 52px;
    border-radius: 13px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    width: 1000px; 
    max-width: 95vw; 
    transition: background-color 0.2s;
    /* リザルト画面でリストが長くなった時のためのスクロール設定 */
    max-height: 90vh;
    overflow-y: auto;
}

h1 {
    font-size: 2.6rem;
    margin-top: 0;
    margin-bottom: 26px;
    color: #333;
}

#start-btn, #retry-btn, #share-btn {
    font-size: 1.56rem;
    padding: 13px 26px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    transition: background-color 0.2s;
    margin: 10px;
}

#start-btn:hover, #retry-btn:hover {
    background-color: #0056b3;
}

button:focus-visible, input:focus-visible {
    outline: 3px solid #ff8c00;
    outline-offset: 2px;
}

/* X(Twitter)シェアボタン用カラー */
#share-btn {
    background-color: #000000;
}
#share-btn:hover {
    background-color: #333333;
}

#stats-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 26px;
    font-size: 1.56rem;
    font-weight: bold;
    color: #333;
    background-color: #e9ecef;
    padding: 13px 26px;
    border-radius: 6px;
}

#bonus-display-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

#question-text {
    font-size: 1.56rem;
    font-weight: bold;
    margin-bottom: 26px;
    line-height: 1.4;
}

#hint-text {
    font-size: 1.95rem;
    color: #555;
    margin-bottom: 13px;
    height: 39px;
}

#typing-text {
    font-size: 2.6rem;
    letter-spacing: 6.5px;
    color: #007bff;
    display: inline-block;
    max-width: 100%;
    /* 長い答え（30文字超）でも枠からはみ出さないよう折り返す */
    overflow-wrap: anywhere;
    word-break: break-all;
}

.typed {
    color: #ccc;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); color: red; }
    25% { transform: translateX(-13px); color: red; }
    50% { transform: translateX(13px); color: red; }
    75% { transform: translateX(-13px); color: red; }
}
.shake {
    animation: shake 0.3s;
}

.flash-correct {
    background-color: #d4edda !important;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); color: red; }
    50% { transform: scale(1.1); color: darkred; }
}
.warning {
    animation: pulse 1s infinite;
    display: inline-block;
}

#bonus-popup {
    position: absolute;
    top: -26px; 
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.3rem; 
    font-weight: bold;
    color: #ff8c00;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
}

@keyframes floatUpSmall {
    0% { opacity: 0; top: -13px; }
    20% { opacity: 1; top: -39px; }
    80% { opacity: 1; top: -65px; }
    100% { opacity: 0; top: -78px; }
}

.show-bonus {
    animation: floatUpSmall 1.2s ease-out;
}

/* === リザルト画面用 === */
#result-area h2 {
    font-size: 2.6rem;
    color: #333;
    margin-top: 0;
}

.result-stats {
    background-color: #e9ecef;
    padding: 26px;
    border-radius: 10px;
    margin-bottom: 26px;
    font-size: 1.56rem;
    font-weight: bold;
}

.result-stats p {
    margin: 10px 0;
}

.final-score {
    font-size: 2.6rem !important;
    color: #ff4500;
}

.result-message {
    font-size: 1.56rem;
    font-weight: bold;
    color: #007bff;
    margin-bottom: 26px;
}

.review-area {
    margin-top: 39px;
    text-align: left;
}

.review-area h3 {
    font-size: 1.8rem;
    color: #333;
    border-bottom: 2px solid #ccc;
    padding-bottom: 10px;
}

#review-list {
    list-style-type: none;
    padding: 0;
    font-size: 1.2rem;
    line-height: 1.6;
}

#review-list li {
    background: #f8f9fa;
    margin-bottom: 10px;
    padding: 13px;
    border-left: 5px solid #007bff;
    border-radius: 4px;
}

.review-answer {
    font-weight: bold;
    color: #d9534f;
    margin-right: 15px;
}
/* === v2 追加 === */
#game-wrapper {
    position: relative;
}

.lead {
    font-size: 1.4rem;
    color: #333;
    margin: 0 0 26px;
}

.name-field {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 13px;
    margin-bottom: 13px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
}

#player-name {
    font-size: 1.2rem;
    padding: 8px 13px;
    border: 2px solid #ccc;
    border-radius: 6px;
    width: 16em;
    max-width: 60vw;
}

.notice {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
}

.best {
    font-size: 1.2rem;
    font-weight: bold;
    color: #ff4500;
    min-height: 1.5em;
}

#play-area {
    position: relative;
    min-height: 220px;
}

#countdown {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 6rem;
    font-weight: bold;
    color: #007bff;
    background: rgba(255, 255, 255, 0.92);
    z-index: 2;
}

#ime-warning {
    font-size: 1.1rem;
    font-weight: bold;
    color: #d9534f;
    margin-top: 13px;
}

.best-update {
    font-size: 1.4rem;
    font-weight: bold;
    color: #ff8c00;
    margin-top: -13px;
}

.ranking-area {
    margin-bottom: 26px;
}

.percentile {
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    margin: 0 0 13px;
}

.percentile:empty,
.rank-status:empty {
    display: none;
}

.rank-status {
    font-size: 1.1rem;
    color: #666;
}

.table-scroll {
    overflow-x: auto;
}

#ranking-table {
    margin: 0 auto;
    border-collapse: collapse;
    font-size: 1.15rem;
    min-width: 60%;
}

#ranking-table caption {
    font-size: 1.4rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
}

#ranking-table th,
#ranking-table td {
    padding: 8px 16px;
    border-bottom: 1px solid #dee2e6;
    white-space: nowrap;
}

#ranking-table th {
    background-color: #e9ecef;
    color: #333;
}

#ranking-table td:nth-child(2) {
    text-align: left;
    max-width: 14em;
    overflow: hidden;
    text-overflow: ellipsis;
}

#ranking-table tr.me td {
    background-color: #fff3cd;
    font-weight: bold;
}

.review-mark {
    font-weight: bold;
    color: #28a745;
    margin-right: 10px;
}

#review-list li.uncleared {
    border-left-color: #adb5bd;
}

#review-list li.uncleared .review-mark {
    color: #adb5bd;
}

.credit {
    font-size: 0.95rem;
    color: #888;
    margin-top: 26px;
}

.version {
    font-size: 0.85rem;
    color: #aaa;
    margin: 13px 0 0;
    text-align: right;
}

@media (max-width: 760px) {
    #game-container { padding: 26px 16px; }
    h1 { font-size: 2rem; }
    #stats-area {
        flex-wrap: wrap;
        gap: 6px 16px;
        justify-content: center;
        font-size: 1.1rem;
        padding: 10px 13px;
    }
    #question-text { font-size: 1.25rem; }
    #hint-text { font-size: 1.4rem; height: auto; min-height: 39px; }
    #typing-text { font-size: 1.8rem; letter-spacing: 3px; }
    .name-field { flex-direction: column; gap: 6px; }
    .final-score { font-size: 2rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    .warning { animation: none; color: red; }
}