/* 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;
    /* 髫ｴ・ｫ繝ｻ・ｰ髯樊ｻ薙§郢晢ｽｻ髫ｴ迚吝ｹｲ繝ｻ・･驍ｵ・ｺ陷ｷ・ｶ繝ｻ荵昴・陋ｹ・ｻ・取ｨ抵ｽｹ・ｧ繝ｻ・ｿ驛｢譎｢・ｽ・ｼ驛｢譎・鯵郢晢ｽ｣驛｢・ｧ繝ｻ・ｯ驛｢・ｧ繝ｻ・ｹ郢晢ｽｻ郢晢ｽｻ*/
}

/* 驛｢・ｧ繝ｻ・ｲ驛｢譎｢・ｽ・ｼ驛｢譎｢・｣・ｰ驍ｵ・ｺ繝ｻ・ｮ髯橸ｽｳ雋翫・諤咎し・ｺ繝ｻ・ｮ髣比ｼ夲ｽｽ・ｮ髫ｲ・ｰ繝ｻ・ｳ鬮ｫ證ｦ・ｽ・｣髯ｷ蜑・ｽｸ讖ｸ・ｽ・ｺ繝ｻ・ｦ郢晢ｽｻ闔・･陝邇匁･懆椶・ｹ邵ｺ遉ｼ・ｹ・ｧ繝ｻ・､驛｢・ｧ繝ｻ・ｺ郢晢ｽｻ郢晢ｽｻ*/
#game-container {
    width: 800px;
    height: 600px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: absolute;
    /* Js驍ｵ・ｺ繝ｻ・ｧtransform: scale()驍ｵ・ｺ髴郁ｲｻ・ｽ讙趣ｽｸ・ｺ繝ｻ・ｦ驛｢譎・ｽｼ譁絶襖驛｢譏ｴ繝ｻ郢晢ｽｨ驍ｵ・ｺ陷ｷ・ｶ繝ｻ繝ｻ*/
    transform-origin: center center;
    background-color: #fca048;
    /* 髯具ｽｻ隴弱・・・ｫ｢・ｭ隴ｴ・ｧ陷搾ｽｹ驍ｵ・ｺ繝ｻ・ｨ髯ｷ・ｷ陟募€具ｽｧ */
}

/* 髣包ｽｳ闔ｨ竏・､ゑｽｹ譎｢・ｽ・ｻ髣包ｽｳ繝ｻ・ｭ髫ｹ・ｿ繝ｻ・ｵ鬩搾ｽｨ繝ｻ・ｱ髯ｷ・ｷ髣鯉ｽｨ繝ｻ・ｼ陞滄｡假ｽｪ・ｰ髣包ｽｳ闕ｵ譁滓ｨ抵ｽｹ譎｢・ｽ・ｼ驛｢譎｢・ｽ・ｳ驛｢・ｧ繝ｻ・ｨ驛｢譎｢・ｽ・ｪ驛｢・ｧ繝ｻ・｢郢晢ｽｻ闔・･郢晢ｽｻ鬨ｾ蛹・ｽｽ・ｻ鬯ｮ・ｱ繝ｻ・｢髣厄ｽｴ繝ｻ・ｿ鬨ｾ蛹・ｽｽ・ｨ郢晢ｽｻ郢晢ｽｻ*/
#play-area {
    flex: 1;
    background: linear-gradient(180deg, #81d4fa 0%, #aed581 100%);
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(180deg, #81d4fa 0%, #aed581 100%);
    background-size: 50px 50px, 50px 50px, 100% 100%;
    border-radius: 20px;
    border: 4px solid white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 鬮｢・ｭ隴ｴ・ｧ陷搾ｽｹ驛｢・ｧ繝ｻ・ｹ驛｢・ｧ繝ｻ・ｯ驛｢譎｢・ｽ・ｭ驛｢譎｢・ｽ・ｼ驛｢譎｢・ｽ・ｫ驛｢・ｧ繝ｻ・｢驛｢譏懶ｽｹ譁滄豪・ｹ譎｢・ｽ・ｼ驛｢・ｧ繝ｻ・ｷ驛｢譎｢・ｽ・ｧ驛｢譎｢・ｽ・ｳ郢晢ｽｻ騾趣ｽｯ・つ€繝ｻ・ｲ驛｢・ｧ髦ｮ蜷ｶﾂ€蝣､・ｸ・ｺ郢晢ｽｻ繝ｻ邇厄ｽｫ・｢雋翫ｑ・ｽ・ｼ郢晢ｽｻ*/

/* 歩行スピードはJSで --walk-duration を設定（パネルクリアで速くなる） */
#play-area {
    --walk-duration: 1.2s;
    --walk-path-duration: 0.4s;
}



/* HUD (Head Up Display) */
#hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    font-size: 24px;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 0 #00838f, -2px -2px 0 #00838f, 2px -2px 0 #00838f, -2px 2px 0 #00838f;
    z-index: 10;
    background: rgba(0, 0, 0, 0.05);
    /* 驍ｵ・ｺ髴郁ｲｻ・ｽ閾･・ｸ・ｺ繝ｻ・ｫ鬯ｨ・ｾ闕ｵ蜉ｱ繝ｻ驍ｵ・ｺ繝ｻ・ｫ */
}

/* 驛｢・ｧ繝ｻ・ｿ驛｢・ｧ繝ｻ・､驛｢譎｢・｣・ｰ鬮ｯ・ｦ繝ｻ・ｨ鬩穂ｼ夲ｽｽ・ｺ驛｢・ｧ髮区ｩｸ・ｽ・ｷ繝ｻ・ｨ髯樊ｻゑｽｽ・ｧ髯具ｽｹ郢晢ｽｻ*/
#time-display {
    font-size: 52px;
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    color: #fff;
    vertical-align: middle;
}

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

@keyframes flash {
    from {
        text-shadow: 0 0 10px #ff5252;
    }

    to {
        text-shadow: 0 0 30px #ff5252, 0 0 10px red;
    }
}

/* 驛｢・ｧ繝ｻ・ｿ驛｢・ｧ繝ｻ・､驛｢譎｢・｣・ｰ髯懃軸・ｧ・ｫ繝ｻ・ｾ繝ｻ・ｩ髫ｴ蠑ｱ・・ｹ晢ｽｻ驍ｵ・ｲ郢晢ｽｻ2鬩穂ｼ懊・・つ€鬮ｦ・ｪ郢晢ｽｻ驛｢譏ｴ繝ｻ郢晢ｽｻ驛｢・ｧ繝ｻ・｢驛｢譏ｴ繝ｻ郢晢ｽｻ髮玖ざ・ｳ蠕後・ */
#time-bonus-popup {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 10px;
    font-size: 36px;
    color: #ffff00;
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(255, 255, 0, 0.8), 2px 2px 5px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    opacity: 0;
    white-space: nowrap;
    /* 髫ｰ・ｾ繝ｻ・ｹ鬮ｯ・ｦ驕停或・ｺ貅ｯ・ｱ繝ｻ・ｽ・｢ */
}

#time-bonus-popup.show {
    animation: bonus-float 1s ease-out forwards;
}

/* コンボポップアップ：パネル直上に一瞬大きく表示（fixedで配置） */
#combo-popup.combo-popup {
    position: fixed;
    font-size: 56px;
    font-weight: 900;
    color: #ffeb3b;
    text-shadow: 0 0 20px #ff9800, 0 0 28px #ff5722, 4px 4px 0 #333, -2px -2px 0 #333;
    pointer-events: none;
    opacity: 0;
    z-index: 2000;
    transition: none;
    white-space: nowrap;
}

.combo-popup.show {
    animation: combo-pop 1.2s ease-out forwards;
}

@keyframes combo-pop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3) rotate(-15deg);
    }

    15% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.4) rotate(10deg);
    }

    30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.9) rotate(-5deg);
    }

    45% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }

    85% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) translateY(0);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.2) translateY(-30px);
    }
}

/* コンボ中ミス時：青く大きく「MISS！」表示（画面中央） */
#miss-popup.miss-popup {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 72px;
    font-weight: 900;
    color: #1565c0;
    text-shadow: 0 0 24px #42a5f5, 0 0 40px rgba(33, 150, 243, 0.6), 4px 4px 0 #0d47a1, -2px -2px 0 #0d47a1;
    pointer-events: none;
    opacity: 0;
    z-index: 2100;
    transition: none;
    white-space: nowrap;
}

.miss-popup.show {
    animation: miss-pop 1.8s ease-out forwards;
}

@keyframes miss-pop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
    }

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

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

    75% {
        opacity: 1;
    }

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

/* 上空の雲：〇で描写 */
.sky-clouds {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.cloud-group {
    position: absolute;
    pointer-events: none;
}

.cloud-circle {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.6);
}

/* 奥の山：▲の物体を大小・途切れなく重ねたストリップ。1m＝1pxで右に流す（JSでtranslateX(distance)） */
.mountains-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    will-change: transform;
}

.mountains-strip {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    min-width: 20000px;
    will-change: transform;
}

.mountain-tri {
    position: absolute;
    bottom: 0;
    background: linear-gradient(180deg, rgba(72, 95, 58, 0.9) 0%, rgba(48, 68, 42, 0.98) 100%);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    transform-origin: 50% 100%;
}

/* 地名パス：看板を地面（茶色）まで下げて設置。パネルより前面に表示（z-index をパネルより上に） */
.landmark-path-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 88px;
    height: 72px;
    overflow: visible;
    z-index: 20;
    pointer-events: none;
}

.landmark-path-strip {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    will-change: transform;
}

/* 看板：板＋ポールが地面（茶色）まで届く。名前＋メートル（テスト用） */
.landmark-path-node {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 22px;
    font-weight: bold;
    font-family: 'Noto Sans JP', sans-serif;
    color: #1a237e;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    padding: 10px 20px 14px;
    border-radius: 6px;
    background: linear-gradient(180deg, #fff9c4 0%, #fff59d 50%, #ffeb3b 100%);
    border: 3px solid #f9a825;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.landmark-path-node .landmark-name {
    margin-right: 0;
    margin-top: 2px;
}

.landmark-path-node .landmark-meters {
    font-size: 14px;
    font-weight: 700;
    color: #0d47a1;
}

.landmark-path-node::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    width: 8px;
    height: 72px;
    margin-left: -4px;
    background: linear-gradient(180deg, #5d4037, #4e342e);
    border-radius: 0 0 3px 3px;
    box-shadow: 1px 0 2px rgba(0, 0, 0, 0.3);
}

/* パーフェクトクリア時（ミスなしでクリア）・画面中央に表示 */
.perfect-popup {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 42px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 20px #ffeb3b, 3px 3px 0 #e65100, -1px -1px 0 #e65100;
    pointer-events: none;
    opacity: 0;
    z-index: 25;
}

.perfect-popup.show {
    animation: perfect-pop 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes perfect-pop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
    }

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

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

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

@keyframes bonus-float {
    0% {
        transform: translateY(0) scale(0.5);
        opacity: 1;
    }

    20% {
        transform: translateY(-20px) scale(1.2);
        opacity: 1;
    }

    100% {
        transform: translateY(-50px) scale(1);
        opacity: 0;
    }
}

/* コンボでスピードアップ時：横ラインが左→右に流れる（縦の雨状にしない）・フェードインで強弱 */
.speed-effect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 8;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

#play-area.speed-boost .speed-effect {
    opacity: 1;
}

.speed-effect.hidden {
    display: none !important;
}

.speed-effect::before,
.speed-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
}

/* 層1：縦ラインが左→右に流れる（水平移動） */
.speed-effect::before {
    background: repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.28) 0px,
            rgba(255, 255, 255, 0.28) 4px,
            transparent 4px,
            transparent 80px);
    background-size: 80px 100%;
    /* animation: speed-flow-left-to-right 0.6s linear infinite; */
    background-position: var(--speed-x1, 0) 0;
}

/* 層2：もう一層の縦ライン（ずらして流れ） */
.speed-effect::after {
    background: repeating-linear-gradient(90deg,
            rgba(255, 248, 220, 0.2) 0px,
            rgba(255, 248, 220, 0.2) 6px,
            transparent 6px,
            transparent 120px);
    background-size: 120px 100%;
    /* animation: speed-flow-left-to-right 0.45s linear infinite; */
    background-position: var(--speed-x2, 0) 0;
}

/* 道の上を歩く：道路を立体的に（奥に遠近感）、テクスチャが左→右に流れる */
.road-3d-wrap {
    position: absolute;
    bottom: 0;
    left: -5%;
    right: -5%;
    height: 200px;
    z-index: 2;
    perspective: 320px;
    perspective-origin: 50% 100%;
}

.road-surface#walk-path {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 160px;
    background: linear-gradient(180deg, #8b5a2b 0%, #6d4420 70%, #5d3a1a 100%);
    background-image:
        repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(0, 0, 0, 0.1) 40px, rgba(0, 0, 0, 0.1) 80px),
        linear-gradient(180deg, #8b5a2b 0%, #6d4420 70%, #5d3a1a 100%);
    background-size: 80px 100%, 100% 100%;
    border-top: 6px solid #5d3a1a;
    overflow: hidden;
    transform-origin: center bottom;
    transform: rotateX(55deg) scale(1.4);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
    /* animation: scroll-road var(--walk-path-duration, 0.4s) linear infinite; */
}

/* 道路の点滅ラインは削除（意味不明のため） */
#walk-path::before {
    content: none;
}

/* 鬮｣諛ｶ・ｽ・ｽ髣包ｽｳ闕ｵ譁滓ｨ抵ｽｹ譎｢・ｽ・ｼ驛｢譎｢・ｽ・ｳ髫ｴ蟷｢・ｽ・ｬ髣厄ｽｴ郢晢ｽｻ*/
#lane {
    flex: 1;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    /* 驛｢・ｧ繝ｻ・ｿ驛｢・ｧ繝ｻ・､驛｢譎｢・ｽ・ｫ驛｢・ｧ陷代・・ｽ・ｸ繝ｻ・ｭ髯樊ｻゑｽｽ・ｮ髯昴・繝ｻ隨ｳ迢暦ｽｸ・ｺ繝ｻ・ｫ */
}

/* 驛｢・ｧ繝ｻ・ｿ驛｢・ｧ繝ｻ・､驛｢譎｢・ｽ・ｫ (髯ｷﾂ€陷･荵暦ｽ・Δ譎｢・ｽ・ｻ髫ｴ竏壹・繝ｻ・ｭ陷会ｽｱ郢晢ｽｻ驛｢譎｢・ｽ・ｭ驛｢譎｢・ｽ・ｼ驛｢譎・ｽｧ・ｫ繝ｻ・ｭ陷会ｽｱ遯ｶ・ｲ髣包ｽｳ・つ€髣厄ｽｴ郢晢ｽｻ */
.tile {
    position: absolute;
    width: 480px;
    background-color: #ffffff;
    /* 荳埼€乗・縺ｫ縺励※驥阪↑繧翫ｒ蛻・°繧翫ｄ縺吶￥ */
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    border: 3px solid #eee;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: center center;
    transition: transform 0.02s linear, opacity 0.3s ease, filter 0.3s ease;
    z-index: 5;
    opacity: 1;
    /* 驥阪↑繧翫′隕九∴繧九ｈ縺・↓荳埼€乗・縺ｫ霑代＞蛟､縺ｸ */
    filter: brightness(1.0);
}

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

.tile img {
    width: 100%;
    height: 150px;
    /* 鬨ｾ蛹・ｽｽ・ｻ髯ｷ蜑・ｽｸ螂・ｽｽ繧頑ｰ｣闔会ｽ｣繝ｻ・ｰ髯樊ｻゑｽｽ・ｧ驍ｵ・ｺ鬮ｦ・ｪ繝ｻ・･ */
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 8px;
}

.tile-word {
    font-size: 32px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    word-break: break-all;
    text-align: center;
    width: 100%;
    overflow: hidden;
    line-height: 1.2;

    /* 驛｢譎丞ｹｲ・取ｺｽ・ｹ・ｧ繝ｻ・ｰ驛｢譎｢・ｽ・ｬ驛｢・ｧ繝ｻ・ｹ驛｢譏懶ｽｸ鄙ｫ竕ｧ驛｢譎｢・ｽ・ｩ驛｢・ｧ繝ｻ・､驛｢譎√＃騾｡驢搾ｽｸ・ｺ繝ｻ・ｮ鬮ｫ・ｪ繝ｻ・ｭ髯橸ｽｳ郢晢ｽｻ*/
    color: #2c3e50;
    background: linear-gradient(to right, #ff5722 var(--progress, 0%), #2c3e50 var(--progress, 0%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: --progress 0.1s ease;
}

.tile-romaji {
    font-size: 26px;
    font-family: 'Outfit', 'Kosugi Maru', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
    background: #f5f5f5;
    padding: 10px 12px;
    border-radius: 10px;
    width: 100%;
    text-align: center;
    word-break: break-all;
    white-space: pre-wrap;
    line-height: 1.5;
    overflow: hidden;
    box-sizing: border-box;
}

.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;
    transform: translateY(-3px);
    text-shadow: 0 0 8px rgba(255, 23, 68, 0.4);
    /* 驍ｵ・ｺ繝ｻ・ｵ驛｢・ｧ髦ｮ蜻ｻ・ｽ蜀暦ｽｹ・ｧ鬮ｮ竏壹・驛｢・ｧ陝ｲ・ｨ隨ｳ迢暦ｽｹ・ｧ郢晢ｽｻ*/
    display: inline-block;
}

/* 髫ｰ繝ｻ・ｦ・ｴ陟擾ｽｯ驛｢・ｧ繝ｻ・ｨ驛｢譎｢・ｽ・ｩ驛｢譎｢・ｽ・ｼ髫ｴ蠑ｱ・・ｹ晢ｽｻ髯ｷ闌ｨ・ｽ・ｨ髣厄ｽｴ髦ｮ蜷ｶ繝ｻ髫ｰ・ｰ繝ｻ・ｺ驛｢・ｧ鬲・ｼ夲ｽｽ・ｼ郢晢ｽｻransform驍ｵ・ｺ繝ｻ・ｰ驍ｵ・ｺ繝ｻ・ｨ鬩包ｽｶ繝ｻ・ｶ髯ｷ・ｷ陋ｹ・ｻ繝ｻ・ｰ驍ｵ・ｺ繝ｻ・ｦ髴托ｽｸ繝ｻ・ｬ鬯ｮ・｢鬪ｰ蜈ｷ・ｽ・ｧ繝ｻ・ｻ髯ｷ蟠趣ｽｼ譁石｣驛｢・ｧ繝ｻ・ｰ驍ｵ・ｺ繝ｻ・ｫ驍ｵ・ｺ繝ｻ・ｪ驛｢・ｧ闕ｵ譏ｶ陞ｺ驛｢・ｧ郢晢ｽｻpadding/margin鬩包ｽｲ陝ｲ・ｨ邵ｲ螳夊р繝ｻ・｣鬨ｾ蛹・ｽｽ・ｨ郢晢ｽｻ郢晢ｽｻ*/
.shake-error {
    animation: shake-small 0.2s ease-in-out both;
    border-color: red !important;
}

@keyframes shake-small {

    0%,
    100% {
        margin-left: 0;
    }

    25% {
        margin-left: -5px;
    }

    75% {
        margin-left: 5px;
    }
}

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

/* 驛｢譎｢・ｽ・ｩ驛｢・ｧ繝ｻ・､驛｢譎｢・ｽ・ｳ髯具ｽｻ繝ｻ・ｰ鬯ｩ諷募､｢陷・ｽｾ郢晢ｽｻ陋ｹ・ｻ・朱・・ｹ・ｧ繝ｻ・ｹ郢晢ｽｻ陝ｲ・ｨ遶企ｦｴ諱ｪ繝ｻ・ｳ驍ｵ・ｺ繝ｻ・ｭ髣包ｽｳ驗呻ｽｫ遯ｶ・ｲ驍ｵ・ｺ繝ｻ・｣驍ｵ・ｺ繝ｻ・ｦ髮趣ｽｸ陋ｹ・ｻ遶擾ｽｴ驛｢・ｧ闕ｵ譏ｴ・樣Δ譏懶ｽｹ譁滄豪・ｹ譎｢・ｽ・ｼ驛｢・ｧ繝ｻ・ｷ驛｢譎｢・ｽ・ｧ驛｢譎｢・ｽ・ｳ */
.bounce-out-up {
    animation: bounce-out-anim 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes bounce-out-anim {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    40% {
        transform: translateY(-80px);
        /* 髣包ｽｳ驗呻ｽｫ遶企ｦｴ諱ｪ繝ｻ・ｳ驍ｵ・ｺ繝ｻ・ｭ髣包ｽｳ驗呻ｽｫ遯ｶ・ｲ驛｢・ｧ郢晢ｽｻ*/
        opacity: 1;
    }

    100% {
        transform: translateY(-100px) scale(0.5);
        /* 驍ｵ・ｺ隴擾ｽｴ郢晢ｽｻ驍ｵ・ｺ繝ｻ・ｾ驍ｵ・ｺ繝ｻ・ｾ鬩搾ｽｵ繝ｻ・ｮ驛｢・ｧ髦ｮ蜷ｶﾂ€螳夲ｽｱ・ｸ陋ｹ・ｻ遶擾ｽｴ驛｢・ｧ郢晢ｽｻ*/
        opacity: 0;
    }
}

/* 驛｢譎・ｽｺ蛟･笳矩Δ・ｧ繝ｻ・ｿ驛｢・ｧ繝ｻ・､驛｢譎丞ｹｲ郢晢ｽｻ髫ｴ蠑ｱ・・ｫ企ｦｴ蜍励・・ｨ鬩穂ｼ夲ｽｽ・ｺ驍ｵ・ｺ陷ｷ・ｶ繝ｻ迢暦ｽｹ譎・ｺ｢郢晢ｽ｣驛｢譎丞ｹｲ邵ｺ繝ｻ・ｹ譏ｴ繝ｻ郢晢ｽｻ髫ｴ竏壹・繝ｻ・ｭ隴会ｽｦ繝ｻ・ｼ鬩帙・・ｽ・ｦ繝ｻ・ｪ驛｢・ｧ繝ｻ・ｳ驛｢譎｢・ｽ・ｳ驛｢譏ｴ繝ｻ郢晢ｽｪ郢晢ｽｻ郢晢ｽｻ*/
.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.deadline-hidden,
.deadline-hidden {
    display: none !important;
}

#deadline {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 10px;
    background-color: #ff1744;
    box-shadow: 0 -5px 15px rgba(255, 0, 0, 0.6);
    z-index: 10;
}

/* 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: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 20;
    backdrop-filter: blur(5px);
}

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

@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: 0px;
    right: 20px;
    width: 250px;
    /* 髯昴・・ｻ・｣繝ｻ・ｰ髯樊ｻゑｽｽ・ｧ驍ｵ・ｺ鬮ｦ・ｪ繝ｻ竏ｫ・ｸ・ｺ繝ｻ・ｫ */
    height: auto;
    pointer-events: none;
    z-index: 10;
    /* 驛｢譎・鯵邵ｺ・｡驛｢譎｢・ｽ・ｳ(20髣比ｼ夲ｽｽ・･髣包ｽｳ郢晢ｽｻ驍ｵ・ｺ繝ｻ・ｮ鬮｢・ｭ驕停扱蟲ｶ驍ｵ・ｺ繝ｻ・ｫ */
    animation: none;
    /* 鬯ｮ・ｱ陷ｻ雜｣・ｽ・ｭ繝ｻ・｢ */
}

/* タイトル画面表示中はゲーム用キャラを非表示（タイトル用は #nagomin-title のみ表示） */
#start-screen:not(.hidden)~#nagomin-game {
    visibility: hidden;
    pointer-events: none;
}

/* なごみん：道の上に立っている。看板より前面に表示（z-index を看板より上に） */
#nagomin-game {
    position: absolute;
    bottom: 28px;
    right: 80px;
    width: 180px;
    height: auto;
    pointer-events: none;
    z-index: 25;
    opacity: 0.95;
    transform-origin: bottom center;
    /* transform: scaleX(-1); */
    /* 左向きにする */
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
    /* animation: walk-bob 0.6s ease-in-out infinite; */
}

/* 打鍵成功時は一歩ジャンプ（JSでクラス付与） */
#nagomin-game.step-hop {
    animation: step-hop 0.25s ease-out forwards;
}

@keyframes walk-bob {

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

    50% {
        transform: translateY(-8px) scaleX(1);
    }
}

@keyframes step-hop {
    0% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-25px);
    }

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


#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: 15px;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
}

#keyboard {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 800px;
}

.keyboard-row {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.indent-1 {
    padding-left: 30px;
}

.indent-2 {
    padding-left: 60px;
}

.justify-center {
    justify-content: center;
}

.key {
    background-color: var(--key-bg);
    border: 2px solid var(--key-border);
    border-bottom-width: 5px;
    border-radius: 10px;
    min-width: 55px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: 900;
    font-family: 'Outfit', sans-serif;
    color: #444;
    transition: all 0.05s ease-out;
}

.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;
}

/* ロード画面：地名データ読み込み完了まで表示 */
.load-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 35, 126, 0.95);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    font-family: 'Noto Sans JP', sans-serif;
}

.load-screen.hidden {
    display: none !important;
}

.load-screen-message {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 12px;
}

.load-screen-detail {
    font-size: 16px;
    opacity: 0.9;
}

.load-screen-error {
    margin-top: 24px;
    text-align: center;
    max-width: 320px;
}

.load-screen-error p {
    font-size: 14px;
    margin-bottom: 12px;
    color: #ffcdd2;
}

.load-screen-error button {
    padding: 10px 20px;
    font-size: 16px;
    background: #fff;
    color: #1a237e;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

/* 髫ｴ繝ｻ・ｽ・ｰ驛｢譎｢・ｽ・ｪ驛｢・ｧ繝ｻ・ｶ驛｢譎｢・ｽ・ｫ驛｢譎√＃陋ｻ・､鬯ｮ・ｱ繝ｻ・｢ */
.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;
}

/* リザルトの前に表示する「時間切れそこまで！」 */
.timeup-message {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 12;
    pointer-events: none;
}

.timeup-message span {
    font-size: clamp(28px, 6vw, 48px);
    font-weight: 900;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 235, 59, 0.5);
    animation: timeup-pop 0.5s ease-out;
}

@keyframes timeup-pop {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

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

.result-scroll-area {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
}

/* リザルト：スタートが上・到達が下の「進んだ」並び。一括表示で文字が動かず読める */
.landmark-path {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100%;
    padding: 24px 0 40px;
    box-sizing: border-box;
}

.landmark-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    margin-bottom: 10px;
    position: relative;
}

/* 進んだ感じ：ノード間を縦線でつなぐ */
.landmark-node:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    margin-top: 2px;
    width: 3px;
    height: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
    transform: translateX(-50%);
    border-radius: 2px;
}

/* 丸みのあるフレーム（地名表示のみ・線は使わない） */
.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.22s cubic-bezier(0.2, 0.8, 0.3, 1);
    flex-shrink: 0;
    white-space: nowrap;
}

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

/* 到達地名フレームのポップ演出（スクロール後に一瞬強調） */
.landmark-frame.current-stop.landmark-pop {
    animation: landmark-pop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes landmark-pop {
    0% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(255, 87, 34, 0.5);
    }

    25% {
        transform: scale(1.25);
        box-shadow: 0 0 35px rgba(255, 87, 34, 0.9);
    }

    50% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 25px rgba(255, 87, 34, 0.6);
    }
}

/* リザルト：最後に進んだ地名を大きくポップアップ表示 */
.landmark-name-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 15;
    pointer-events: none;
    text-align: center;
}

.landmark-name-popup.hidden {
    display: none !important;
}

#landmark-name-popup-text {
    display: inline-block;
    font-size: clamp(22px, 5vw, 36px);
    font-weight: 900;
    font-family: 'Noto Sans JP', sans-serif;
    color: #fff;
    text-shadow: 0 0 20px rgba(255, 87, 34, 0.9), 3px 3px 0 #c62828, -1px -1px 0 #c62828;
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.95), rgba(255, 87, 34, 0.95));
    padding: 16px 32px;
    border-radius: 16px;
    border: 4px solid #fff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    animation: landmark-name-pop 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

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

    20% {
        opacity: 1;
        transform: scale(1.15);
    }

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

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(1.05);
    }
}

/* 鬩搾ｽｨ陷亥沺・｣・｡驛｢・ｧ繝ｻ・ｵ驛｢譎・ｽｧ・ｭ・取㏍・ｹ譎｢・ｽ・ｼ */
.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: -10px;
    right: 10px;
    width: 280px;
    height: auto;
    pointer-events: none;
    z-index: 10;
    animation: none;
}