* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #222;
    color: #eee;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    overflow: hidden; /* スクロール防止 */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#game-container {
    position: relative;
    width: 1300px;
    height: 590px;
    flex-shrink: 0;
    background-color: #000;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

#game-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* 背景が見えるように透明度を戻す */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.overlay.top-aligned {
    justify-content: flex-start;
    padding-top: 40px;
}

.hidden {
    display: none !important;
}

#level-select-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/CourseSelect.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #000; /* 画像読み込みまでのフォールバック */
}

#level-list {
    position: absolute;
    top: 282px;
    left: 100px;
    width: 1023px;
    height: 272px;
}

.level-button-ranking {
    position: absolute;
    left: 75px; /* Absolute X=175px (Relative to parent #level-list left: 100px) */
    top: 52px;  /* Absolute Y=334px (Relative to parent #level-list top: 282px) */
    width: 146px;
    height: 100px;
    background-image: url('../images/btn_ranking.png');
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    border: none;
    background-color: transparent;
    transition: transform 0.2s ease;
}

.level-button-ranking:hover {
    transform: scale(1.05);
}



.level-button-normal {
    position: absolute;
    left: 300px; /* Absolute X=480px (Relative to parent #level-list left: 100px) */
    top: 0px;  /* Absolute Y=316px (Relative to parent #level-list top: 282px) */
    width: 458px;
    height: 222px;
    background-image: url('../images/btn_start.png');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none; /* Disable events on transparent margins */
    border: none;
    background-color: transparent;
    transition: transform 0.2s ease;
}

.level-button-normal.hover {
    transform: scale(1.03);
}

.level-button-normal-hitbox {
    position: absolute;
    left: 57px;
    top: 61px;
    width: 344px;
    height: 100px;
    cursor: pointer;
    pointer-events: auto; /* Enable hover/clicks only inside this inner region */
    border-radius: 40px;
    /* background-color: rgba(255, 0, 0, 0.3); */ /* Uncomment to visualize hitbox */
}

.level-button-signin {
    position: absolute;
    left: 705px; /* Absolute X=805px (Relative to parent #level-list left: 100px) */
    top: 221px;  /* Absolute Y=503px (Relative to parent #level-list top: 282px) */
    width: 317;
    height: 54px;
    background: url('../images/btn_signin.png') no-repeat left top / contain !important;
    cursor: pointer;
    border: none;
}


.level-name {
    font-size: 1.3rem; /* 文字サイズを縮小 */
    font-weight: bold;
    display: block;
    margin-bottom: 2px;
    color: #ffcc00;
}

.level-description {
    font-size: 0.85rem; /* 文字サイズを縮小 */
    color: #ccc;
    display: block;
}

.version-badge {
    position: absolute;
    right: 12px;
    bottom: 10px;
    font-size: 0.75rem;
    color: #cccccc;
    opacity: 0.6;
    font-family: monospace;
    letter-spacing: 0.05em;
    pointer-events: none;
    user-select: none;
}

button {
    padding: 10px 20px;
    font-size: 1.2rem;
    cursor: pointer;
    background: #c00;
    color: #fff;
    border: none;
    border-radius: 5px;
    margin-top: 20px;
    transition: background 0.2s;
}

button:hover {
    background: #e00;
}

#ranking-container {
    margin-top: 5px;
    background: rgba(0, 0, 0, 0.5);
    padding: 8px 15px;
    border-radius: 8px;
    width: 100%;
    max-width: 500px;
    overflow: hidden;
}

#ranking-list {
    list-style: none;
    text-align: left;
}

.ranking-item {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
}

.ranking-rank {
    width: 30px;
    color: #ffcc00;
}

.ranking-name {
    flex-grow: 1;
}

.ranking-score {
    font-weight: bold;
    color: #2ecc71; /* 賞金らしい緑色に変更 */
}

/* 無効化されたボタンのスタイル */
button:disabled, .btn-x-share:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(1);
}

#auth-ui {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.input-name {
    padding: 8px;
    font-size: 1rem;
    border-radius: 4px;
    border: 1px solid #fff;
    background: #222;
    color: #fff;
    width: 200px;
    text-align: center;
}

.btn-small {
    padding: 5px 15px;
    font-size: 0.9rem;
    background: #444;
    margin-top: 0;
}

.btn-google {
    background: #4285f4;
    border-color: #4285f4;
}

.btn-submit {
    background: #28a745;
    border-color: #28a745;
    font-weight: bold;
}

.btn-x-share {
    background: #000;
    color: #fff;
    border: 1px solid #444;
    padding: 5px 15px;
    font-size: 0.9rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    border-radius: 20px;
    transition: all 0.2s ease;
}

.btn-x-share:hover {
    background: #333;
    border-color: #666;
}

h1 {
    font-size: 3rem;
    margin-bottom: 10px;
    color: #ff0;
    text-shadow: 2px 2px #c00;
}

/* UI Animations */
.timeup-anim h1 {
    animation: scaleAndFade 2.5s ease-in-out forwards;
}

.bottom-button-container {
    position: absolute;
    bottom: 20px;
    left: 40%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
}

@keyframes scaleAndFade {
    0% { transform: scale(0.5); opacity: 0; }
    15% { transform: scale(1.2); opacity: 1; }
    30% { transform: scale(1); opacity: 1; }
    80% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

.fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

.slide-in-right {
    animation: slideInRight 0.3s ease-out forwards;
}

.slide-in-left {
    animation: slideInLeft 0.3s ease-out forwards;
}

@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
    0% { opacity: 0; transform: translateX(50px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
    0% { opacity: 0; transform: translateX(-50px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* Wanted Poster & Stamp Animation */
.wanted-poster {
    width: 100%;
    height: 100%;
    background-image: url('../images/ResultBoard2.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: 25%; /* ボードの右側（情報エリア）にスタンプを寄せる */
    margin: 0;
}

.overlay.ranking-overlay {
    background: url('../images/RankingBoard.png') no-repeat center / cover;
}


.result-stats-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.result-stat-row {
    position: absolute;
    width: auto;
    text-align: right;
    transform: translateX(-100%); /* 指定したleft座標を右端の基準にする */
}

.result-stat-row.stat-targets {
    top: 339px;
    left: 448px;
    width: 124px;
    height: 26px;
    transform: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.result-stat-row.stat-combo {
    top: 371px;
    left: 448px;
    width: 124px;
    height: 26px;
    transform: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.result-stat-row.stat-rank {
    top: 370px;
    left: 716px;
    width: 317px;
    height: 49px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: none; /* ResettranslateX(-100%) */
}

.result-stat-row.stat-best {
    top: 66.0%;
    left: 49.0%;
}

.result-stat-row.stat-total-score {
    top: 194px;
    left: 210px;
    width: 881px;
    height: 78px;
    transform: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.result-stat-row.stat-targets .result-stat-value,
.result-stat-row.stat-combo .result-stat-value {
    font-size: 1.4rem;
}

.result-stat-row.stat-rank .result-stat-value,
.result-stat-row.stat-best .result-stat-value {
    font-size: 3.3rem; /* 2.2rem * 1.5 */
}

.result-stat-row.stat-total-score .result-stat-value {
    display: flex;
    align-items: baseline;
    color: rgb(57, 20, 6); /* 指定されたカラー RGB(57, 20, 6) */
    text-shadow: none !important; /* 装飾・ドロップシャドウを完全に無効化 */
}

.result-stat-row.stat-total-score .result-stat-value .score-num {
    font-size: 64px;
}

.result-stat-row.stat-total-score .result-stat-value .score-unit {
    font-size: 54px;
    margin-left: 12px; /* スコア数字と単位の間に、確実に美しい半角スペース相当の隙間（アキ）を確保します */
}

.result-stat-value {
    font-family: 'Abril Fatface', 'Impact', 'Helvetica', Arial, sans-serif;
    font-weight: bold;
    color: rgb(57, 20, 6);
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3);
}

/* Rank Badge Styles */
.rank-badge-container {
    position: absolute;
    top: 318px;
    left: 528px;
    pointer-events: none;
    z-index: 5;
}

.rank-badge-img {
    width: auto;
    height: auto;
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.5));
    animation: badgeIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s forwards;
    opacity: 0;
}

@keyframes badgeIn {
    0% { transform: scale(3) rotate(-15deg); opacity: 0; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Modal Dialog Styles (SNID Sign-in / Nickname) */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: modalFadeIn 0.2s ease-in-out;
}

.modal-content {
    background: #ffffff;
    color: #333333;
    padding: 2.5rem 2rem 2rem 2rem;
    border-radius: 10px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5);
    text-align: center;
    position: relative;
    animation: modalScaleUp 0.2s ease-in-out;
}

.modal-content h2 {
    color: #2c3e50;
    margin-bottom: 1.2rem;
    font-size: 1.8rem;
    font-weight: bold;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalScaleUp {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    margin: 0 !important; /* グローバルの button { margin-top: 20px } を完全に打ち消す */
    font-size: 1.8rem;
    font-weight: bold;
    color: #95a5a6;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    width: auto;
    margin-bottom: 0;
}

.modal-close:hover {
    color: #7f8c8d;
}

.modal-content input[type="text"],
.modal-content input[type="password"] {
    width: 100%;
    padding: 12px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    outline: none;
    color: #333;
    background-color: #fff;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.modal-content input:focus {
    border-color: #3498db;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
}

.modal-content button.accent-btn {
    background-color: #2ecc71;
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    display: inline-block;
    width: 100%;
    margin-top: 10px;
}

.modal-content button.accent-btn:hover {
    background-color: #27ae60;
}

.modal-content button.accent-btn:active {
    transform: scale(0.98);
}

/* Toast Notifications */
.toast-notification {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #2d3748;
    color: white;
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 0.95rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    z-index: 9999;
    animation: toastSlideUp 0.3s ease-out;
}

@keyframes toastSlideUp {
    from { bottom: -50px; opacity: 0; }
    to { bottom: 30px; opacity: 1; }
}

/* 🏳️ Giveup Button style */
.giveup-button {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 119px;
    height: 32px;
    background: url('../images/btn_giveup.png') no-repeat center / contain !important;
    cursor: pointer;
    border: none;
    transition: transform 0.2s ease;
    z-index: 5;
}

.giveup-button:hover {
    transform: scale(1.05);
}

.giveup-button:active {
    transform: scale(0.95);
}

/* 🏆 Result & Ranking Screen Custom Image Buttons */
.result-btn-image {
    width: 160px;
    height: 48px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    border: none;
    background-color: transparent !important;
    transition: transform 0.2s ease;
}

.result-btn-image:hover {
    transform: scale(1.05);
}

.result-btn-image:active {
    transform: scale(0.95);
}

.btn-retry {
    background-image: url('../images/btn_retry.png') !important;
}

.btn-ranking {
    background-image: url('../images/btn_ranking2.png') !important;
}

.btn-course {
    background-image: url('../images/btn_course.png') !important;
}

.btn-result {
    background-image: url('../images/btn_result.png') !important;
}

/* 🎁 Result Signin Promo (Unregistered/Unlogged users) */
.result-signin-promo-text {
    position: absolute;
    left: 707px;
    top: 344px;
    width: 340px;
    height: 44px;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.4;
    color: rgb(57, 20, 6);
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center;
    pointer-events: none;
    z-index: 5;
}

.result-signin-button {
    position: absolute;
    left: 760px;
    top: 380px;
    width: 244px;
    height: 54px;
    background: url('../images/btn_signin2.png') no-repeat center / contain !important;
    cursor: pointer;
    border: none;
    background-color: transparent !important;
    transition: transform 0.2s ease;
    z-index: 5;
}

.result-signin-button:hover {
    transform: scale(1.05);
}

.result-signin-button:active {
    transform: scale(0.95);
}

/* 🎯 Ranking Screen Signin Button */
.ranking-signin-button {
    position: absolute;
    width: 244px;
    height: 54px;
    background: url('../images/btn_signin2.png') no-repeat center / contain !important;
    cursor: pointer;
    border: none;
    background-color: transparent !important;
    transition: transform 0.2s ease;
    z-index: 5;
}

.ranking-signin-button:hover {
    transform: scale(1.05);
}

.ranking-signin-button:active {
    transform: scale(0.95);
}

.ranking-signin-button-pos {
    left: 850px !important;
    bottom: 20px !important;
}

/* 🔒 Course Select Dynamic Auth Container styles */
#level-select-auth-container {
    position: absolute;
    left: 705px; /* Absolute X=805px (Relative to parent #level-list left: 100px) */
    top: 221px;  /* Absolute Y=503px (Relative to parent #level-list top: 282px) */
    width: 385px;
    height: 57px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* 状態①: 未ログイン時のサインインボタン */
.level-button-signin-dynamic {
    width: 100%;
    height: 100%;
    background: url('../images/btn_signin.png') no-repeat center / contain !important;
    cursor: pointer;
    border: none;
}

/* 状態②: ニックネーム未設定時 */
.auth-status-no-nickname {
    background: rgba(45, 55, 72, 0.95);
    border: 2px solid #e67e22;
    border-radius: 8px;
    padding: 8px 15px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    font-size: 0.9rem;
    color: #ffcc00;
    font-weight: bold;
}

.auth-status-no-nickname .register-btn-small {
    background: #e67e22;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 5px 12px;
    cursor: pointer;
    font-weight: bold;
    margin: 0 !important; /* グローバルの button { margin-top: 20px } を打ち消す */
    transition: background 0.2s, transform 0.1s;
}

.auth-status-no-nickname .register-btn-small:hover {
    background: #d35400;
    transform: scale(1.05);
}

/* ログアウトボタン共通スタイル */
.auth-status-logged-in .signout-btn-small,
.auth-status-no-nickname .signout-btn-small {
    background: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 5px 12px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.8rem;
    margin: 0 !important; /* グローバルの button { margin-top: 20px } を打ち消す */
    transition: background 0.2s, transform 0.1s;
}

.auth-status-logged-in .signout-btn-small:hover,
.auth-status-no-nickname .signout-btn-small:hover {
    background: #c0392b;
    transform: scale(1.05);
}

/* 状態③: ログイン完了時 */
.auth-status-logged-in {
    background: rgba(45, 55, 72, 0.85);
    border: 2px solid #2ecc71;
    border-radius: 8px;
    padding: 8px 15px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    font-size: 0.95rem;
    color: #fff;
}

.auth-status-logged-in .nickname-display {
    color: #2ecc71;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

/* 🌟 ウェルカムメッセージボード（看板風スタイル）の復元 */
#level-select-welcome-board {
    position: absolute;
    left: 970px;
    top: 34px;
    width: 277px;
    height: 183px;
    display: none; /* 🌟 初期状態は非表示（メッセージ適用時にJS側で同時に表示） */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
    z-index: 10;
    background: url('../images/welcomePlate.png') no-repeat center / contain; /* 🌟 看板画像背景に変更 */
    color: #391406; /* 黒茶文字 */
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 0.82rem;
    line-height: 1.25;
    text-align: center;
    font-weight: bold;
    white-space: pre-line; /* 🌟 改行コード(\n)を有効化 */
}

/* 🤠 ウェルカムメッセージボード内の強調数字スタイル（順位・スコア） */
.welcome-board-highlight {
    font-family: 'Abril Fatface', 'Impact', 'Helvetica', Arial, sans-serif;
    color: #C42A00;
    font-size: 24px;
    font-weight: bold;
}

/* 🤠 コース選択画面：代表コース(normal)のランキング統計情報表示スタイル */
.course-select-stat-box {
    position: absolute;
    display: flex;
    align-items: baseline;
    justify-content: center;
    color: #391406;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-weight: bold;
    white-space: nowrap;
    pointer-events: none; /* クリック操作を裏の要素に透過させる */
    z-index: 5;
}

#level-select-top-score {
    left: 174px;
    top: 172px;
    width: 152px;
    height: 30px;
}

#level-select-user-count {
    left: 174px;
    top: 224px;
    width: 152px;
    height: 32px;
}

.course-select-stat-box .stat-number {
    font-family: 'Abril Fatface', 'Impact', 'Helvetica', Arial, sans-serif;
    font-size: 26px;
    line-height: 1;
}

.course-select-stat-box .stat-unit {
    font-size: 13px;
    line-height: 1;
    margin-left: 2px;
}

/* 🌟 X (Twitter) ポストボタン */
.btn-postx {
    position: absolute;
    left: 320px;
    top: 400px;
    width: 176px;
    height: 33px;
    background: url('../images/btn_postx.png') no-repeat center / contain !important;
    cursor: pointer;
    border: none;
    background-color: transparent !important;
    transition: transform 0.2s ease;
    z-index: 5;
}

.btn-postx:hover {
    transform: scale(1.05);
}

.btn-postx:active {
    transform: scale(0.95);
}

/* 🏆 Ranking Board Absolute Layout & Element Styling */
#ranking-container.ranking-board-layout {
    position: absolute;
    top: 0;
    left: 0;
    width: 1300px;
    height: 590px;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    pointer-events: none; /* 下のボタンがクリックできるように */
}

.ranking-board-element {
    position: absolute;
    display: flex;
    align-items: center;
    color: rgb(57, 20, 6) !important; /* テキスト配色はすべて rgb(57, 20, 6) に統一 */
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: bold;
    text-shadow: none !important; /* ボードに直接焼き付けるためシャドウ不要 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: auto; /* 万が一クリックなどをする場合に備えて */
}

.ranking-board-element.name {
    justify-content: flex-start;
    padding-left: 10px;
}

.ranking-board-element.score {
    justify-content: flex-end;
    padding-right: 10px;
    font-family: 'Abril Fatface', 'Impact', 'Helvetica', Arial, sans-serif;
}

.ranking-item-top3 {
    font-size: 1.5rem;
}

.ranking-item-normal {
    font-size: 1.1rem;
}

/* 自分のスコア（myInfo）の特別なスタイル */
.ranking-board-element.ranking-my-info {
    background: rgba(57, 20, 6, 0.12) !important; /* 焼き印色を極薄く敷く */
    border: 2px dashed rgb(57, 20, 6) !important;
    border-radius: 6px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 15px !important;
    font-size: 1.2rem !important;
}

.ranking-board-element.ranking-my-info span {
    color: rgb(57, 20, 6) !important;
}

.my-info-rank {
    font-family: 'Abril Fatface', 'Impact', 'Helvetica', Arial, sans-serif;
    font-weight: 900;
}

.my-info-name {
    flex-grow: 1;
    text-align: center;
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-info-score {
    font-family: 'Abril Fatface', 'Impact', 'Helvetica', Arial, sans-serif;
    font-weight: 900;
}


/* 🎯 Pre-Ranking Screen Back Button & Container */
.pre-ranking-button-container {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
}

.pre-ranking-back-btn {
    width: 160px;
    height: 48px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    border: none;
    background-color: transparent !important;
    transition: transform 0.2s ease;
}

.pre-ranking-back-btn:hover {
    transform: scale(1.05);
}

.pre-ranking-back-btn:active {
    transform: scale(0.95);
}

/* 🔒 SNID Sign-in & Nickname Modals - Pure CSS Premium Remake (No Images) */
#login-modal, #nickname-modal {
    overflow-y: auto !important; /* ウィンドウ高さがモーダルより小さい場合にスクロール可能にする */
    padding: 20px !important; /* スクロール時の余白を確保 */
}

#login-modal .modal-content, #nickname-modal .modal-content {
    width: 480px !important;
    max-width: none !important; /* 横幅を完全に固定表示（ウィンドウサイズ変化で縮まない） */
    margin: auto !important; /* 十分なスペースがある時は中央、はみ出す時は上端を維持してスクロール可能に */
    background-color: #fdfaf2 !important; /* 全体はベージュ */
    border-radius: 12px !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    border: 3px solid #391406 !important; /* テーマの黒茶でエッジを引き締める */
    position: relative;
    text-align: center;
    display: flex !important;
    flex-direction: column !important;
}

/* ログインモーダル専用の高さ */
#login-modal .modal-content {
    height: 535px !important;
}

/* ニックネームモーダル専用の高さ */
#nickname-modal .modal-content {
    height: 340px !important;
}

/* ヘッダーエリア（赤背景） */
#login-modal .modal-header, #nickname-modal .modal-header {
    background-color: #bc3205 !important; /* テーマの鮮やかな赤 */
    padding: 18px 20px 14px 20px !important; /* 余白を綺麗に配置 */
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    border-bottom: 3px solid #391406 !important; /* 下部ベージュエリアとの明確な境界線 */
}

/* ヘッダータイトル */
#login-modal .modal-header h2, #nickname-modal .modal-header h2 {
    display: block !important;
    color: #ffffff !important;
    font-size: 1.4rem !important;
    font-weight: bold !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important; /* 固定高さを解除し、重なりを完全に防止 */
    line-height: 1.2 !important; /* 自然で美しい行高 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* ヘッダー説明文 */
#login-modal .modal-header p, #nickname-modal .modal-header p {
    display: block !important;
    color: #ffd9cc !important; /* 薄い暖色系の白 */
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    margin: 8px 0 0 0 !important; /* タイトルの下に適切な隙間を保証し重なりを100%防止 */
    padding: 0 !important;
}

/* 閉じるボタン（右上の「×」マーク） */
#login-modal #login-modal-close {
    position: absolute !important;
    right: 20px !important;
    top: 18px !important; /* Y座標をタイトルの上パディング(18px)に揃えて完全一致させる */
    margin: 0 !important; /* グローバルの button { margin-top: 20px } を打ち消す */
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important; /* 白文字の×に */
    font-size: 1.6rem !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: opacity 0.2s, transform 0.2s !important;
    opacity: 0.85 !important;
}

#login-modal #login-modal-close:hover {
    opacity: 1 !important;
    transform: rotate(90deg) !important; /* ホバーで少し回転して動的アクセント */
}

/* フォーム本体（ベージュ部分に配置） */
#login-modal #login-form, #nickname-modal #nickname-form {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    padding: 25px 20px !important; /* ベージュエリアの快適な余白 */
    display: flex !important;
    flex-direction: column !important;
    background-color: #fdfaf2 !important; /* 確実にベージュに */
}

/* フォームグループ */
#login-modal .form-group, #nickname-modal .form-group {
    margin-bottom: 10px !important;
    margin-top: 10px !important;
    text-align: left !important;
}

#login-modal .form-group label, #nickname-modal .form-group label {
    display: block !important;
    font-size: 0.85rem !important;
    font-weight: bold !important;
    margin-bottom: 5px !important;
    color: #391406 !important; /* 西部劇テーマの黒茶 */
}

/* 入力欄（メールアドレス、パスワード、ニックネーム） */
#login-modal #login-email,
#login-modal #login-password,
#nickname-modal #nickname-input {
    width: 100% !important;
    height: 38px !important;
    padding: 8px 12px !important;
    font-size: 0.9rem !important;
    border: 2px solid #d4c69d !important; /* ベージュに調和する少し濃い目の枠線 */
    border-radius: 6px !important;
    background-color: #faf6eb !important; /* 入力欄自体もベージュに調和する柔らかい色 */
    color: #391406 !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

#login-modal #login-email:focus,
#login-modal #login-password:focus,
#nickname-modal #nickname-input:focus {
    border-color: #C42A00 !important; /* フォーカス時に数値赤に */
    box-shadow: 0 0 5px rgba(196, 42, 0, 0.2) !important;
    outline: none !important;
}

#login-modal #login-email::placeholder,
#login-modal #login-password::placeholder,
#nickname-modal #nickname-input::placeholder {
    color: #b5a88f !important;
}

/* ニックネーム登録の警告/補足テキスト */
#nickname-modal .nickname-notice {
    color: #bc3205 !important; /* テーマの赤で警告感を出す */
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    margin: 0 0 12px 0 !important;
    text-align: left !important;
    font-weight: bold !important;
}

/* パスワード表示切り替えチェックボックス */
#login-modal .password-toggle-container {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 8px !important;
    margin-bottom: 12px !important;
    text-align: left !important;
}

#login-modal .password-toggle-container input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    cursor: pointer !important;
    margin: 0 !important;
    accent-color: #16A286 !important; /* テーマのティール色に調和させる */
}

#login-modal .password-toggle-container label {
    display: inline !important;
    font-size: 0.8rem !important;
    font-weight: normal !important;
    color: #391406 !important; /* 西部劇テーマの黒茶 */
    cursor: pointer !important;
    user-select: none !important;
    margin-bottom: 0 !important;
}

/* パスワードお忘れの方リンク */
#login-modal .forgot-password-link-container {
    margin-top: 5px !important;
    text-align: right !important;
    font-size: 0.8rem !important; /* 新規アカウント登録と同じサイズ(0.8rem)に統一 */
}

#login-modal #login-form a {
    color: #007ACC !important;
    text-decoration: underline !important;
    font-weight: bold !important;
}

#login-modal #login-form a:hover {
    color: #bc3205 !important; /* ホバー時はテーマ赤オレンジに */
}

/* サインインボタン・ニックネーム決定ボタン（accent-btn） */
#login-modal .accent-btn, #nickname-modal .accent-btn {
    width: 70% !important;
    align-self: center !important; /* 左右中心に表示する */
    height: 44px !important;
    padding: 0 !important;
    line-height: 44px !important;
    background-color: #16A286 !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: bold !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    box-shadow: 0 3px 6px rgba(22, 162, 134, 0.3) !important;
    transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s !important;
}

#login-modal .accent-btn:hover, #nickname-modal .accent-btn:hover {
    background-color: #118269 !important;
    box-shadow: 0 4px 10px rgba(22, 162, 134, 0.4) !important;
}

#login-modal .accent-btn:active, #nickname-modal .accent-btn:active {
    transform: scale(0.98) !important;
    box-shadow: 0 2px 4px rgba(196, 42, 0, 0.2) !important;
}

/* 下部登録の案内文（アカウントをお持ちでない方） */
#login-modal .login-footer-info {
    margin-top: 15px !important;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    color: #391406 !important;
    text-align: center !important;
}

#login-modal .login-footer-info .register-link {
    color: #007ACC !important;
}

/* 📜 サードパーティ・ライセンス表示関連のプレミアムデザインスタイル */
.license-link-badge {
    position: absolute;
    left: 12px;
    bottom: 10px;
    font-size: 0.75rem;
    color: #cccccc;
    opacity: 0.6;
    font-family: var(--font-japanese), sans-serif;
    cursor: pointer;
    text-decoration: underline;
    transition: opacity 0.2s, color 0.2s;
    user-select: none;
    z-index: 10;
}

.license-link-badge:hover {
    opacity: 1;
    color: #ffcc00;
}

/* 📜 ライセンスモーダル個別スタイル */
.license-modal-content {
    background: #1c1c1c !important; /* シックな極薄ダーク */
    color: #eeeeee !important;
    max-width: 720px !important; /* ワイドな横幅を確保 */
    width: 90% !important;
    max-height: 80vh !important; /* 画面高さの80%に収める */
    display: flex !important;
    flex-direction: column !important;
    padding: 2.5rem 2rem 2rem 2rem !important;
    border: 1px solid #333333 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
}

.license-modal-content h2 {
    font-family: var(--font-japanese), sans-serif;
    letter-spacing: 0.05em;
}

.license-list-scroll-container {
    flex: 1;
    overflow-y: auto;
    text-align: left;
    padding: 5px 15px;
    margin-top: 5px;
    border-radius: 4px;
    background: #0f0d0d; /* さらに深いウッドブラック調 */
    border: 1px solid #282828;
}

/* 各ライセンスブロック */
.license-card {
    padding: 1.5rem 0;
    border-bottom: 1px solid #222222;
}

.license-card:last-child {
    border-bottom: none;
}

.license-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.license-card-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #ffcc00; /* ゴールドアクセント */
}

.license-card-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.license-badge {
    background: #ffcc00;
    color: #000000;
    font-size: 0.72rem;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: bold;
}

.license-type-badge {
    background: #2e4053;
    color: #ffffff;
    font-size: 0.72rem;
    padding: 1px 5px;
    border-radius: 3px;
}

.license-card-url {
    font-size: 0.78rem;
    color: #5dade2;
    text-decoration: underline;
    word-break: break-all;
    display: block;
    margin-bottom: 8px;
}

.license-card-url:hover {
    color: #85c1e9;
}

.license-card-text {
    background: #080808;
    color: #999999;
    font-family: monospace;
    font-size: 0.72rem;
    padding: 10px;
    border-radius: 4px;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid #181818;
}

/* モーダルのスクロールバーデザインをシックに装飾 */
.license-list-scroll-container::-webkit-scrollbar,
.license-card-text::-webkit-scrollbar {
    width: 8px;
}

.license-list-scroll-container::-webkit-scrollbar-track,
.license-card-text::-webkit-scrollbar-track {
    background: #0a0a0a;
}

.license-list-scroll-container::-webkit-scrollbar-thumb,
.license-card-text::-webkit-scrollbar-thumb {
    background: #333333;
    border-radius: 4px;
}

.license-list-scroll-container::-webkit-scrollbar-thumb:hover,
.license-card-text::-webkit-scrollbar-thumb:hover {
    background: #444444;
}