/* Google Fonts驍ｵ・ｺ繝ｻ・ｮ鬮ｫ・ｱ繝ｻ・ｭ驍ｵ・ｺ繝ｻ・ｿ鬮ｴ雜｣・ｽ・ｼ驍ｵ・ｺ繝ｻ・ｿ */
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Noto+Sans+JP:wght@400;700;900&family=Outfit:wght@400;700;900&display=swap');

:root {
    --bg-color: #e0f7fa;
    /* 驍ｵ・ｺ髴郁ｲｻ・ｽ閾･・ｸ・ｺ繝ｻ・ｫ驛｢譎・ｺ｢郢晢ｽ｣驛｢譎丞ｹｲ遶企・・ｹ・ｧ繝ｻ・ｷ驛｢・ｧ繝ｻ・｢驛｢譎｢・ｽ・ｳ鬩堺ｼ夲ｽｽ・ｻ鬮｢・ｭ隴ｴ・ｧ陷搾ｽｹ */
    --text-color: #333333;
    --primary-color: #00bcd4;
    --accent-color: #ff5722;
    --key-bg: #ffffff;
    --key-border: #cccccc;
    --key-shadow: #999999;
    --key-highlight-bg: #ffe082;
    --key-highlight-border: #ffb300;
    --typed-color: #bdbdbd;
    --current-color: #ff1744;
    /* 驛｢・ｧ陋ｹ・ｻ繝ｻ莨・ｽｭ繝ｻ・ｽ・ｮ髫ｴ荳橸ｽｼ・ｱ遶企｡鯉ｽ･謳ｾ・ｽ・､驍ｵ・ｺ繝ｻ・ｫ */
    --untyped-color: #212121;
    --tile-bg: rgba(255, 255, 255, 0.95);
}

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

body {
    font-family: 'Noto Sans JP', 'Outfit', sans-serif;
    background-color: var(--bg-color);
    background-image:
        radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.6) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.6) 0%, transparent 20%);
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    margin: 0;
}

#game-wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #222;
}

#nagomin-title,
#nagomin-game {
    position: absolute;
    bottom: -10px;
    right: -20px;
    height: 280px;
    z-index: 1;
    pointer-events: none;
}

#nagomin-game {
    height: 220px;
    z-index: 0;
}

/* 驛｢・ｧ繝ｻ・ｲ驛｢譎｢・ｽ・ｼ驛｢譎｢・｣・ｰ驍ｵ・ｺ繝ｻ・ｮ髯橸ｽｳ雋翫・諤咎し・ｺ繝ｻ・ｮ髣比ｼ夲ｽｽ・ｮ髫ｲ・ｰ繝ｻ・ｳ鬮ｫ證ｦ・ｽ・｣髯ｷ蜑・ｽｸ讖ｸ・ｽ・ｺ繝ｻ・ｦ郢晢ｽｻ闔・･陝邇匁･懆椶・ｹ邵ｺ遉ｼ・ｹ・ｧ繝ｻ・､驛｢・ｧ繝ｻ・ｺ郢晢ｽｻ郢晢ｽｻ*/
#game-container {
    width: 720px;
    height: 480px;
    display: flex;
    flex-direction: column;
    gap: 0;
    /* 隙間をなくして画面を有効活用 */
    position: absolute;
    transform-origin: center center;
    background-color: #ffffff;
    /* オレンジ色を廃止 */
    overflow: hidden;
    border-radius: 0;
    /* 髯具ｽｻ隴弱・・・ｫ｢・ｭ隴ｴ・ｧ陷搾ｽｹ驍ｵ・ｺ繝ｻ・ｨ髯ｷ・ｷ陟募€具ｽｧ */
}

/* 髣包ｽｳ闔ｨ竏・､ゑｽｹ譎｢・ｽ・ｻ髣包ｽｳ繝ｻ・ｭ髫ｹ・ｿ繝ｻ・ｵ鬩搾ｽｨ繝ｻ・ｱ髯ｷ・ｷ髣鯉ｽｨ繝ｻ・ｼ陞滄｡假ｽｪ・ｰ髣包ｽｳ闕ｵ譁滓ｨ抵ｽｹ譎｢・ｽ・ｼ驛｢譎｢・ｽ・ｳ驛｢・ｧ繝ｻ・ｨ驛｢譎｢・ｽ・ｪ驛｢・ｧ繝ｻ・｢郢晢ｽｻ闔・･郢晢ｽｻ鬨ｾ蛹・ｽｽ・ｻ鬯ｮ・ｱ繝ｻ・｢髣厄ｽｴ繝ｻ・ｿ鬨ｾ蛹・ｽｽ・ｨ郢晢ｽｻ郢晢ｽｻ*/
#play-area {
    height: 300px;
    background-color: #ffffff;
    /* 白背景に固定 */
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 鬮｢・ｭ隴ｴ・ｧ陷搾ｽｹ驛｢・ｧ繝ｻ・ｹ驛｢・ｧ繝ｻ・ｯ驛｢譎｢・ｽ・ｭ驛｢譎｢・ｽ・ｼ驛｢譎｢・ｽ・ｫ驛｢・ｧ繝ｻ・｢驛｢譏懶ｽｹ譁滄豪・ｹ譎｢・ｽ・ｼ驛｢・ｧ繝ｻ・ｷ驛｢譎｢・ｽ・ｧ驛｢譎｢・ｽ・ｳ郢晢ｽｻ騾趣ｽｯ・つ€繝ｻ・ｲ驛｢・ｧ髦ｮ蜷ｶﾂ€蝣､・ｸ・ｺ郢晢ｽｻ繝ｻ邇厄ｽｫ・｢雋翫ｑ・ｽ・ｼ郢晢ｽｻ*/
@keyframes scroll-bg {
    0% {
        background-position: 0 0, 0 0;
    }

    100% {
        background-position: 0 50px, 0 0;
    }
}

/* HUD (Head Up Display) */
#hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 25px;
    font-size: 22px;
    font-weight: bold;
    color: #333;
    /* ダークカラーに変更 */
    z-index: 10;
    background: rgba(0, 0, 0, 0.02);
}

/* 驛｢・ｧ繝ｻ・ｿ驛｢・ｧ繝ｻ・､驛｢譎｢・｣・ｰ鬮ｯ・ｦ繝ｻ・ｨ鬩穂ｼ夲ｽｽ・ｺ驛｢・ｧ髮区ｩｸ・ｽ・ｷ繝ｻ・ｨ髯樊ｻゑｽｽ・ｧ髯具ｽｹ郢晢ｽｻ*/
#time-display {
    font-size: 48px;
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    color: #00bcd4;
    /* 白背景に映えるシアンに */
    vertical-align: middle;
}

#time-display.urgent {
    color: #ff5252;
    animation: flash 0.5s infinite alternate;
    /* 髴難ｽ､繝ｻ・ｹ髮狗ｿｫ繝ｻ繝ｻ螳壽ｰ｣闔会ｽ｣繝ｻ・ｰ髫ｴ魃会ｽｽ・ｩ驍ｵ・ｺ郢晢ｽｻ*/
}

@keyframes flash {
    from {
        text-shadow: none;
    }

    to {
        text-shadow: none;
    }
}

/* シンプルで鮮明なコンボ演出 */
#flashy-combo-container {
    position: absolute;
    top: 50px;
    /* タイマーと同じ高さ（HUDエリア） */
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 9999;
    /* 最前面に固定 */
}

.flashy-combo {
    font-family: 'Outfit', 'Noto Sans JP', sans-serif;
    font-weight: 900;
    font-size: 48px;
    /* HUDに収まりやすいサイズに微調整 */
    text-align: center;
    white-space: nowrap;
    position: relative;
    /* 鮮明な黄色グラデーション */
    background: linear-gradient(180deg, #fff176 0%, #ffeb3b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* 影をハッキリさせて視認性向上 */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));
    animation: combo-pop-simple 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.flashy-combo::after {
    content: attr(data-combo);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    -webkit-text-stroke: 6px #bf360c;
    /* 濃いオレンジの縁取りでハッキリさせる */
}

@keyframes combo-pop-simple {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    15% {
        transform: scale(1.1);
        opacity: 1;
    }

    85% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.1);
        opacity: 0;
        /* ぼかし（blur）を削除 */
    }
}

/* 鬮｣諛ｶ・ｽ・ｽ髣包ｽｳ闕ｵ譁滓ｨ抵ｽｹ譎｢・ｽ・ｼ驛｢譎｢・ｽ・ｳ髫ｴ蟷｢・ｽ・ｬ髣厄ｽｴ郢晢ｽｻ*/
#lane {
    flex: 1;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 中央に配置 */
}

/* 驛｢・ｧ繝ｻ・ｿ驛｢・ｧ繝ｻ・､驛｢譎｢・ｽ・ｫ (髯ｷﾂ€陷･荵暦ｽ・Δ譎｢・ｽ・ｻ髫ｴ竏壹・繝ｻ・ｭ陷会ｽｱ郢晢ｽｻ驛｢譎｢・ｽ・ｭ驛｢譎｢・ｽ・ｼ驛｢譎・ｽｧ・ｫ繝ｻ・ｭ陷会ｽｱ遯ｶ・ｲ髣包ｽｳ・つ€髣厄ｽｴ郢晢ｽｻ */
.tile {
    width: 650px;
    min-height: 180px;
    padding: 10px;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 45%;
    /* かなり上に移動して欠け防止 */
    transform: translate(-50%, -50%);
    border: none;
    box-shadow: none;
    z-index: 5;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
}

/* 驛｢・ｧ繝ｻ・ｿ驛｢譎｢・ｽ・ｼ驛｢・ｧ繝ｻ・ｲ驛｢譏ｴ繝ｻ郢晢ｽｨ驍ｵ・ｺ繝ｻ・ｮ驛｢・ｧ繝ｻ・ｿ驛｢・ｧ繝ｻ・､驛｢譎｢・ｽ・ｫ郢晢ｽｻ闔蛹・ｽｽ・ｸ・つ€鬨ｾ・｡繝ｻ・ｪ髣包ｽｳ陷茨ｽｷ繝ｻ・ｼ陝ｲ・ｨ繝ｻ蟶敖€・ｶ繝ｻ・ｮ鬩包ｽｶ闕ｵ譏ｶ陞ｺ驍ｵ・ｺ陝ｶ蜻ｻ・ｽ繝ｻ*/
.tile.target {
    border: none;
    /* 驛｢・ｧ陋ｹ・ｻ繝ｻ莨・€・ｶ繝ｻ・ｮ鬩包ｽｶ闕ｵ譏ｶ蜻ｽ驛｢・ｧ陋ｹ・ｻ遶包ｽｧ驍ｵ・ｺ繝ｻ・ｫ */
    box-shadow: none;
    z-index: 15;
    /* HUD(10)驛｢・ｧ陋ｹ・ｻ繝ｻ鬘伜初驗呻ｽｫ遶頑･｢諤弱・・ｺ驍ｵ・ｺ郢晢ｽｻ*/
    opacity: 1;
    /* 驛｢・ｧ繝ｻ・ｿ驛｢譎｢・ｽ・ｼ驛｢・ｧ繝ｻ・ｲ驛｢譏ｴ繝ｻ郢晢ｽｨ髫ｴ蠑ｱ・・ｹ晢ｽｻ髫ｴ荳橸ｽｼ・ｱ繝ｻ迢暦ｽｸ・ｺ郢晢ｽｻ*/
    filter: none;
}

.tile img {
    max-width: 200px;
    /* 少し小さく */
    max-height: 100px;
    object-fit: contain;
    border-radius: 8px;
    margin-bottom: 5px;
    /* マージンを詰める */
}

.tile-word {
    font-size: 36px;
    font-weight: 900;
    color: var(--untyped-color);
    margin-bottom: 5px;
    position: relative;
    background: linear-gradient(to right, var(--accent-color) var(--progress, 0%), var(--untyped-color) var(--progress, 0%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tile-romaji {
    font-size: 18px;
    /* さらに少し縮小して確実にする */
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    color: var(--typed-color);
    letter-spacing: 1px;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 0;
    width: 100%;
    text-align: center;
    word-break: break-all;
    white-space: pre-wrap;
    margin-bottom: 2px;
}

.tile-description {
    font-size: 14px;
    color: #555;
    max-width: 620px;
    text-align: center;
    line-height: 1.3;
    font-weight: bold;
    margin-top: 5px;
}

.tile-romaji span {
    display: inline-block;
    transition: color 0.04s ease-out, transform 0.04s ease-out;
}

.typed {
    color: var(--typed-color);
}

.untyped {
    color: var(--untyped-color);
}

/* 髴托ｽｴ繝ｻ・ｾ髯懶ｽｨ繝ｻ・ｨ驍ｵ・ｺ繝ｻ・ｮ髫ｴ竏壹・繝ｻ・ｭ陷会ｽｱ郢晢ｽｻ驛｢・ｧ繝ｻ・｢驛｢譏懶ｽｹ譁滄豪・ｹ譎｢・ｽ・ｼ驛｢・ｧ繝ｻ・ｷ驛｢譎｢・ｽ・ｧ驛｢譎｢・ｽ・ｳ郢晢ｽｻ陜捺ｺｷ繝ｱ髯樊ｻゑｽｽ・ｧ驛｢・ｧ陝ｶ譏ｶ繝ｻ髯溯ｶ｣・ｽ・ｦ驍ｵ・ｺ繝ｻ・ｫ郢晢ｽｻ郢晢ｽｻ*/
.current {
    color: var(--current-color) !important;
    font-size: 1.25em;
    font-weight: 900;
    text-shadow: 0 0 8px rgba(255, 23, 68, 0.4);
    display: inline-block;
}

/* 髫ｰ繝ｻ・ｦ・ｴ陟擾ｽｯ驛｢・ｧ繝ｻ・ｨ驛｢譎｢・ｽ・ｩ驛｢譎｢・ｽ・ｼ髫ｴ蠑ｱ・・ｹ晢ｽｻ髯ｷ闌ｨ・ｽ・ｨ髣厄ｽｴ髦ｮ蜷ｶ繝ｻ髫ｰ・ｰ繝ｻ・ｺ驛｢・ｧ鬲・ｼ夲ｽｽ・ｼ郢晢ｽｻransform驍ｵ・ｺ繝ｻ・ｰ驍ｵ・ｺ繝ｻ・ｨ鬩包ｽｶ繝ｻ・ｶ髯ｷ・ｷ陋ｹ・ｻ繝ｻ・ｰ驍ｵ・ｺ繝ｻ・ｦ髴托ｽｸ繝ｻ・ｬ鬯ｮ・｢鬪ｰ蜈ｷ・ｽ・ｧ繝ｻ・ｻ髯ｷ蟠趣ｽｼ譁石｣驛｢・ｧ繝ｻ・ｰ驍ｵ・ｺ繝ｻ・ｫ驍ｵ・ｺ繝ｻ・ｪ驛｢・ｧ闕ｵ譏ｶ陞ｺ驛｢・ｧ郢晢ｽｻpadding/margin鬩包ｽｲ陝ｲ・ｨ邵ｲ螳夊р繝ｻ・｣鬨ｾ蛹・ｽｽ・ｨ郢晢ｽｻ郢晢ｽｻ*/
/* ミス時の演出は赤く光る（missクラス）のみとし、移動（shake）は行わない */
.miss {
    background-color: rgba(255, 0, 0, 0.1) !important;
}

/* 髫ｰ繝ｻ・ｦ・ｴ陟擾ｽｯ髫ｰ蠕｡・ｻ蜥擾ｽｲ・･髫ｴ蠑ｱ・代・・ｼ陞滄搨ﾂ€繝ｻ・｣鬩搾ｽｯ陞｢・ｹ邵ｲ螳壼初隶主･・ｽｽ・ｿ繝ｻ・ｫ驍ｵ・ｺ繝ｻ・ｫ驍ｵ・ｺ繝ｻ・ｪ驛｢・ｧ陝ｲ・ｨ遶企・・ｸ・ｺ郢晢ｽｻ繝ｻ閧ｲ・ｸ・ｺ郢晢ｽｻ・つ€遶丞､ｲ・ｼ繝ｻ・ｸ・ｺ闕ｳ螂・ｽｽ蜀暦ｽｸ・ｺ陞｢・ｹ・ゑｽｰ驍ｵ・ｺ繝ｻ・ｪ驛｢・ｧ繝ｻ・ｹ驛｢・ｧ繝ｻ・ｱ驛｢譎｢・ｽ・ｼ驛｢譎｢・ｽ・ｫ髯樊ｺｽ蛻､陝ｲ・ｩ驍ｵ・ｺ繝ｻ・ｮ驍ｵ・ｺ繝ｻ・ｿ郢晢ｽｻ陜捺ｻ謎ｺ憺ｩ搾ｽｯ陞｢・ｹ繝ｻ蟶晢ｿ･繝ｻ・ｭ驍ｵ・ｺ隰ｫ・ｾ繝ｻ・ｼ郢晢ｽｻ*/
.hit-shock {
    transform: scale(0.98);
}

/* 上に跳ねて消える演出（bounce-out-up）を削除 */

/* 驛｢譎・ｽｺ蛟･笳矩Δ・ｧ繝ｻ・ｿ驛｢・ｧ繝ｻ・､驛｢譎丞ｹｲ郢晢ｽｻ髫ｴ蠑ｱ・・ｫ企ｦｴ蜍励・・ｨ鬩穂ｼ夲ｽｽ・ｺ驍ｵ・ｺ陷ｷ・ｶ繝ｻ迢暦ｽｹ譎・ｺ｢郢晢ｽ｣驛｢譎丞ｹｲ邵ｺ繝ｻ・ｹ譏ｴ繝ｻ郢晢ｽｻ髫ｴ竏壹・繝ｻ・ｭ隴会ｽｦ繝ｻ・ｼ鬩帙・・ｽ・ｦ繝ｻ・ｪ驛｢・ｧ繝ｻ・ｳ驛｢譎｢・ｽ・ｳ驛｢譏ｴ繝ｻ郢晢ｽｪ郢晢ｽｻ郢晢ｽｻ*/
.wrong-type-popup {
    position: absolute;
    pointer-events: none;
    z-index: 50;
    /* 鬨ｾ蛹・ｽｽ・ｻ鬯ｮ・ｱ繝ｻ・｢髣包ｽｳ繝ｻ・ｭ髯樊ｻゑｽｽ・ｮ髯憺屮・ｽ・ｺ髮九・縺倡ｹ晢ｽｻ驛｢・ｧ繝ｻ・｢驛｢譏懶ｽｹ譁滄豪・ｹ譎｢・ｽ・ｼ驛｢・ｧ繝ｻ・ｷ驛｢譎｢・ｽ・ｧ驛｢譎｢・ｽ・ｳ鬨ｾ蛹・ｽｽ・ｨ */
    animation: popup-fade 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* 髯溷供・ｾ魃会ｽｽ蜥ｲ・ｸ・ｺ繝ｻ・ｮ髯樊ｻゑｽｽ・ｧ驍ｵ・ｺ鬮ｦ・ｪ遶企｡鯉ｽ･謳ｾ・ｽ・､驛｢譎√・郢晢ｽ､ */
.wrong-cross {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 150px;
    color: rgba(255, 0, 0, 0.4);
    /* 髯ｷ雍具ｽｼ繝ｻﾂ€闕ｵ蜉ｱ繝ｻ驍ｵ・ｺ繝ｻ・ｮ髫俶誓・ｽ・､ */
    font-family: sans-serif;
}

/* 髯ｷ鮃ｹ莠らｹ晢ｽｻ鬨ｾ蜈ｷ・ｽ・ｽ驍ｵ・ｺ郢晢ｽｻ隴ｫ螟頑ｰ帷ｹ晢ｽｻ*/
.wrong-char {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 80px;
    font-weight: 900;
    font-family: 'Outfit', 'Noto Sans JP', sans-serif;
    text-shadow: 0 0 15px #ff1744, 0 0 5px #ff1744, 4px 4px 0 #000;
}

@keyframes popup-fade {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -100%) scale(1.5);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -150%) scale(2);
        opacity: 0;
    }
}

/* 驛｢譎｢・ｽ・ｬ驛｢譏ｴ繝ｻ郢晢ｽｩ驛｢譎｢・ｽ・ｩ驛｢・ｧ繝ｻ・､驛｢譎｢・ｽ・ｳ郢晢ｽｻ陋ｹ・ｻ郢晢ｽｧ驛｢譏ｴ繝ｻ郢晢ｽｩ驛｢譎｢・ｽ・ｩ驛｢・ｧ繝ｻ・､驛｢譎｢・ｽ・ｳ郢晢ｽｻ陞｢・ｽ繝ｻ・ｶ陜捺ｻゑｽｽ・ｻ郢晢ｽｻ・主ｸｷ・ｹ・ｧ繝ｻ・､驛｢譎｢・ｽ・ｳ郢晢ｽｻ郢晢ｽｻ*/
#deadline {
    display: none;
}

/* HUD髯ｷﾂ€郢晢ｽｻ邵ｺ蜥ｲ・ｹ・ｧ繝ｻ・ｦ驛｢譎｢・ｽ・ｳ驛｢譎冗樟郢晢｣ｰ驛｢・ｧ繝ｻ・ｦ驛｢譎｢・ｽ・ｳ驛｢譏ｴ繝ｻ邵ｺ蜀暦ｽｹ・ｧ繝ｻ・ｹ驛｢譏ｴ繝ｻ*/
#countdown-text {
    font-size: 40px;
    font-family: 'Outfit', 'Noto Sans JP', sans-serif;
    font-weight: 900;
    color: #ff1744;
    text-shadow: 2px 2px 0 #fff, 0 0 10px rgba(255, 23, 68, 0.3);
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
}

#countdown-text.show {
    opacity: 1;
}

@keyframes countdown-pop-small {
    0% {
        transform: scale(0.8);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* 驛｢・ｧ繝ｻ・ｹ驛｢・ｧ繝ｻ・ｿ驛｢譎｢・ｽ・ｼ驛｢譎√＃陋ｻ・､鬯ｮ・ｱ繝ｻ・｢ */
#start-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 720px;
    height: 480px;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100;
    backdrop-filter: blur(8px);
}

.overlay-fullscreen {
    position: absolute;
    top: 0;
    left: 0;
    width: 720px;
    height: 480px;
    z-index: 100;
}

#start-screen h1 {
    font-size: 52px;
    font-family: 'Outfit', 'Noto Sans JP', sans-serif;
    color: #ff5722;
    margin-bottom: 8px;
    font-weight: 900;
    text-shadow: 3px 3px 0px rgba(255, 87, 34, 0.15);
    letter-spacing: -2px;
    animation: title-pulse 3s ease-in-out infinite;
    transform-origin: center;
}

#start-screen h2 {
    font-size: 22px;
    margin-bottom: 4px;
    color: #666;
}

#start-screen p {
    font-size: 16px;
    margin-bottom: 30px;
    color: #555;
    font-weight: 700;
}

#start-btn {
    padding: 15px 40px;
    font-size: 28px;
    background: linear-gradient(180deg, #ff7043, #f4511e);
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 900;
    box-shadow: 0 6px 0 #bf360c, 0 10px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.1s;
    margin-bottom: 20px;
}

#start-btn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #bf360c, 0 5px 10px rgba(0, 0, 0, 0.2);
}

@keyframes title-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

@keyframes title-float {

    0%,
    100% {
        transform: translateY(0) rotate(-1deg);
    }

    50% {
        transform: translateY(-15px) rotate(1deg);
    }
}

/* 驍ｵ・ｺ繝ｻ・ｪ驍ｵ・ｺ隴∫ｵｶ闌憺Δ・ｧ髦ｮ蜷ｶ・･驛｢譎｢・ｽ・｣驛｢譎｢・ｽ・ｩ驛｢・ｧ繝ｻ・ｯ驛｢・ｧ繝ｻ・ｿ驛｢譎｢・ｽ・ｼ郢晢ｽｻ陋ｹ・ｻ邵ｺ・｡驛｢・ｧ繝ｻ・､驛｢譎冗樟・取辨ﾂ€蛹・ｽｽ・ｻ鬯ｮ・ｱ繝ｻ・｢郢晢ｽｻ郢晢ｽｻ*/
#nagomin-title {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 200px;
    height: auto;
    pointer-events: none;
    z-index: 10;
    animation: none;
}

/* 驍ｵ・ｺ繝ｻ・ｪ驍ｵ・ｺ隴∫ｵｶ闌憺Δ・ｧ髦ｮ蜷ｶ・･驛｢譎｢・ｽ・｣驛｢譎｢・ｽ・ｩ驛｢・ｧ繝ｻ・ｯ驛｢・ｧ繝ｻ・ｿ驛｢譎｢・ｽ・ｼ郢晢ｽｻ陋ｹ・ｻ邵ｺ逧ｮ・ｹ譎｢・ｽ・ｼ驛｢譎｢・｣・ｰ鬨ｾ蛹・ｽｽ・ｻ鬯ｮ・ｱ繝ｻ・｢郢晢ｽｻ郢晢ｽｻ*/
#nagomin-game {
    position: absolute;
    bottom: 10px;
    right: 15px;
    width: 200px;
    height: auto;
    pointer-events: none;
    z-index: 3;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2));
    /* 驛｢譏懶ｽｻ・｣郢晢ｽｭ驛｢譎｢・ｽ・ｫ(15)驛｢・ｧ陋ｹ・ｻ繝ｻ鬘伜初闕ｵ謨鳴€遶擾ｽｬ郢晢ｽｬ髫ｴ雜｣・ｽ・ｯ驛｢・ｧ陋ｹ・ｻ繝ｻ鬘伜初郢晢ｽｻ*/
    opacity: 0.9;
}


#start-screen p {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

button {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: 15px 40px;
    font-size: 24px;
    font-weight: bold;
    border-radius: 50px;
    border-bottom: 6px solid #d84315;
    cursor: pointer;
    transition: all 0.1s;
    margin-top: 20px;
    position: relative;
    /* z-index驛｢・ｧ陷ｻ蝓淞€蜑ｰ諤上・・ｹ驍ｵ・ｺ繝ｻ・ｫ驍ｵ・ｺ陷ｷ・ｶ繝ｻ迢暦ｽｸ・ｺ雋・∞・ｽ繝ｻ*/
    z-index: 20;
    /* 驛｢・ｧ繝ｻ・ｭ驛｢譎｢・ｽ・｣驛｢譎｢・ｽ・ｩ驛｢・ｧ繝ｻ・ｯ驛｢・ｧ繝ｻ・ｿ驛｢譎｢・ｽ・ｼ(10)驛｢・ｧ陋ｹ・ｻ繝ｻ鬘俶≧陜難ｽｼ隰ｫ繝ｻ・ｸ・ｺ繝ｻ・ｫ */
}

button:active {
    transform: translateY(6px);
    border-bottom-width: 0;
}

/* 驛｢譎冗樟郢晢ｽ｣驛｢譎会ｽ､・ｼ陋ｻ・､鬯ｮ・ｱ繝ｻ・｢驍ｵ・ｺ繝ｻ・ｮ驛｢譎｢・ｽ・｡驛｢譏懶ｽｹ譁溽､ｼ・ｹ譎｢・ｽ・ｼ驛｢譎｢・ｽ・ｪ驛｢譎｢・ｽ・ｳ驛｢・ｧ繝ｻ・ｯ驛｢譎・鯵邵ｺ・｡驛｢譎｢・ｽ・ｳ */
.menu-link-btn {
    display: inline-block;
    padding: 12px 25px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: all 0.15s;
    position: relative;
    /* z-index驛｢・ｧ陷ｻ蝓淞€蜑ｰ諤上・・ｹ驍ｵ・ｺ繝ｻ・ｫ驍ｵ・ｺ陷ｷ・ｶ繝ｻ迢暦ｽｸ・ｺ雋・∞・ｽ繝ｻ*/
    z-index: 20;
    /* 驛｢・ｧ繝ｻ・ｭ驛｢譎｢・ｽ・｣驛｢譎｢・ｽ・ｩ驛｢・ｧ繝ｻ・ｯ驛｢・ｧ繝ｻ・ｿ驛｢譎｢・ｽ・ｼ(10)驛｢・ｧ陋ｹ・ｻ繝ｻ鬘俶≧陜難ｽｼ隰ｫ繝ｻ・ｸ・ｺ繝ｻ・ｫ */
}

.menu-link-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}

/* 髣包ｽｳ陋ｹ・ｺ繝ｻ・ｮ繝ｻ・ｵ郢晢ｽｻ陞｢・ｹ邵ｺ蜀暦ｽｹ譎｢・ｽ・ｼ驛｢譎・鯵郢晢ｽｻ驛｢譎擾ｽｳ・ｨ邵ｺ螳茨ｽｹ・ｧ*/
#bottom-section {
    flex: 1;
    background-color: white;
    border-radius: 20px;
    padding: 0;
    box-shadow: none;
    /* 影を削除 */
    display: flex;
    justify-content: center;
    align-items: center;
}

#keyboard-active-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    /* 行間の隙間 */
    width: 100%;
    height: 140px;
    /* 全体の高さをさらに圧縮 */
    background: #fff3e0;
    border-top: 3px solid #ffb74d;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 20;
    margin-top: auto;
    padding: 5px 0;
}

.kb-row {
    display: flex;
    justify-content: center;
    gap: 4px;
    /* キー同士の隙間 */
    width: 100%;
    position: relative;
}

/* 実際のキーボードに近いスタッガ（ずれ）を設定 */
/* 基準のピッチ = キー幅44px + 隙間4px = 48px */
.kb-row:nth-child(1) {
    left: -10px;
}

/* 数字行を少し左に */
.kb-row:nth-child(2) {
    left: 0px;
}

/* Q-P行 */
.kb-row:nth-child(3) {
    left: 12px;
}

/* A-L行 (0.25キー分右へ) */
.kb-row:nth-child(4) {
    left: 36px;
}

/* Z-M行 (さらに0.5キー、計0.75キー分右へ) */

.key {
    background-color: var(--key-bg);
    border: 1.5px solid var(--key-border);
    border-bottom-width: 3px;
    border-radius: 6px;
    min-width: 44px;
    height: 26px;
    /* 高さを26pxに抑制 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    /* フォントサイズも微調整 */
    font-weight: 900;
    font-family: 'Outfit', sans-serif;
    color: #444;
    transition: all 0.05s ease-out;
    cursor: pointer;
    user-select: none;
}

/* 押下時の強調 (物理・仮想共通) */
.key.active {
    background: #ff5722 !important;
    color: #fff !important;
    border-color: #e64a19 !important;
    transform: translateY(2px);
    box-shadow: 0 1px 0 #bf360c !important;
}

/* 次に入力すべきキーのガイド */
.key.guide {
    background: #fff9c4 !important;
    /* 薄い黄色 */
    border-color: #fbc02d !important;
    box-shadow: 0 3px 0 #f9a825 !important;
}

/* ミス時の赤色強調 */
.key.miss {
    background-color: #ffcdd2 !important;
    border-color: #e53935 !important;
    color: #b71c1c !important;
}

.key.space-key {
    width: 400px;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 18px;
}

.key.highlight {
    background-color: var(--key-highlight-bg);
    border-color: var(--key-highlight-border);
    color: #d84315;
    transform: translateY(-3px);
    box-shadow: 0 6px 0 var(--key-highlight-border);
}

.key.pressed {
    transform: translateY(5px) !important;
    border-bottom-width: 0 !important;
    box-shadow: none !important;
    background-color: #eee;
}

.key.miss {
    background-color: #ffcdd2;
    border-color: #e53935;
    color: white;
}

/* 髫ｴ繝ｻ・ｽ・ｰ驛｢譎｢・ｽ・ｪ驛｢・ｧ繝ｻ・ｶ驛｢譎｢・ｽ・ｫ驛｢譎√＃陋ｻ・､鬯ｮ・ｱ繝ｻ・｢ */
.hidden {
    display: none !important;
}

#result-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a237e 0%, #283593 50%, #303f9f 100%);
    z-index: 100;
    overflow: hidden;
    color: white;
}

/* 髯ｷ・ｷ髢ｧ・ｴ陜ｨ蝣､・ｹ・ｧ繝ｻ・ｹ驛｢・ｧ繝ｻ・ｯ驛｢譎｢・ｽ・ｭ驛｢譎｢・ｽ・ｼ驛｢譎｢・ｽ・ｫ鬯ｯ繝ｻ・ｼ諛茨ｽｲ・ｺ */
.result-scroll-area {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
}

/* リザルト：丸フレームに地名 → 文字が下に移動 → 上に線が伸びる → 次の地名 */
.landmark-path {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: flex-end;
    min-height: 100%;
    padding: 20px 0 40px;
    box-sizing: border-box;
}

.landmark-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

/* 上に伸びる線（フレームの上方向に伸びる） */
.landmark-line {
    width: 4px;
    height: 0;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.9), rgba(255, 193, 7, 0.6));
    border-radius: 2px;
    transition: height 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.landmark-line.extended {
    height: 72px;
}

/* 丸みのあるフレーム（地名表示） */
.landmark-frame {
    font-size: 26px;
    font-weight: bold;
    font-family: 'Noto Sans JP', sans-serif;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.95);
    color: #2c3e50;
    padding: 14px 28px;
    border-radius: 999px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border: 3px solid rgba(255, 193, 7, 0.8);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
    flex-shrink: 0;
    white-space: nowrap;
}

.landmark-frame.moved-down {
    transform: translateY(72px);
}

.landmark-frame.current-stop {
    border-color: #ff5722;
    box-shadow: 0 0 20px rgba(255, 87, 34, 0.5);
    color: #d84315;
}

/* 鬩搾ｽｨ陷亥沺・｣・｡驛｢・ｧ繝ｻ・ｵ驛｢譎・ｽｧ・ｭ・取㏍・ｹ譎｢・ｽ・ｼ */
.result-summary-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    background: rgba(255, 255, 255, 0.97);
    color: #333;
    padding: 20px 25px;
    border-radius: 20px;
    text-align: center;
    width: 95%;
    max-width: 700px;
    max-height: 90%;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border: 5px solid var(--accent-color);
    animation: popIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    0% {
        transform: translate(-50%, -30%) scale(0.5);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

#final-location-text {
    font-size: 38px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
    color: var(--primary-color);
    margin-bottom: 15px;
    line-height: 1.2;
}

.result-stats {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #d84315;
}

.weak-finger-advice {
    background-color: #ffe082;
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 25px;
    border: 3px dashed #ffb300;
}

.weak-finger-advice h3 {
    margin-bottom: 10px;
    color: #e65100;
}

#finger-advice-text {
    font-size: 20px;
    font-weight: bold;
}

/* 髯滓汚・ｽ・ｾ驍ｵ・ｺ闔会ｽ｣繝ｻ迢暦ｽｹ譏懶ｽｻ・｣郢晢ｽｻ驛｢譏ｴ繝ｻ邵ｺ繝ｻ・ｹ・ｧ繝ｻ・ｯ驛｢譎｢・ｽ・ｫ驛｢・ｧ繝ｻ・ｨ驛｢譎・ｽｼ譁絶凾驛｢・ｧ繝ｻ・ｯ驛｢譎√＃騾｡繝ｻ*/
#particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: #ffeb3b;
    border-radius: 50%;
    box-shadow: 0 0 10px #ffeb3b;
}

/* 鬮｣諛ｶ・ｽ・ｽ髣包ｽｳ闕ｵ譏ｴ・樣Δ譏懶ｽｹ譁滄豪・ｹ譎｢・ｽ・ｼ驛｢・ｧ繝ｻ・ｷ驛｢譎｢・ｽ・ｧ驛｢譎｢・ｽ・ｳ郢晢ｽｻ陋ｹ・ｻ邵ｺ讙趣ｽｹ譎丞ｹｲ邵ｺ蜥擾ｽｹ譎｢・ｽ・ｧ驛｢譎｢・ｽ・ｳ郢晢ｽｻ郢晢ｽｻ*/
@keyframes explode {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(var(--dx), var(--dy)) scale(0);
        opacity: 0;
    }
}

/* 陝ｾ・ｦ闕ｳ荵昴・PR郢晢ｽ｡郢昴・縺晉ｹ晢ｽｼ郢ｧ・ｸ陷ｷ・ｹ邵ｺ讎翫・邵ｺ繝ｻ*/
.pr-bubble {
    position: absolute;
    bottom: 25px;
    left: 20px;
    background: #fff;
    padding: 12px 20px;
    border-radius: 50px;
    border: 3px solid #ffccbc;
    box-shadow: 0 4px 15px rgba(230, 81, 0, 0.2);
    z-index: 100;
    pointer-events: none;
    animation: float-bubble 3s ease-in-out infinite;
}

.pr-bubble p {
    margin: 0;
    font-size: 15px;
    font-weight: 900;
    color: #e65100;
    white-space: nowrap;
}

@keyframes float-bubble {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* 郢ｧ・ｹ郢ｧ・ｿ郢晢ｽｼ郢晁ご蛻､鬮ｱ・｢邵ｺ・ｮ邵ｺ・ｪ邵ｺ譁絶茜郢ｧ髮｣・ｼ莠包ｽｽ蜥ｲ・ｽ・ｮ陟包ｽｮ髫ｱ・ｿ隰ｨ・ｴ繝ｻ繝ｻ*/
#nagomin-title {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 180px;
    height: auto;
    pointer-events: none;
    z-index: 10;
    animation: none;
}