/* ========== Keyboard (main) ========== */
        #keyboard {
            /* 統合（後勝ち優先） */
            display: flex;
            flex-direction: column;
            justify-content: center;

            background-color: #aba3a3;
            padding: 10px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

            position: relative;

            width: 800px; /* 固定幅 */
            max-width: 100%;
            height: 280px; /* tenkey と揃える */
            box-sizing: border-box;
        }

        .row {
            display: flex;
            justify-content: center;
            margin-bottom: 5px;
        }

        .key {
            background-color: #fff;
            color: #333;

            width: 45px;
            height: 45px;
            margin: 2px;

            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 5px;
            box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);

            font-size: 14px;
            cursor: pointer;
        }

        /* 後勝ち（#keyboard 配下の flex 調整が効く状態に統合） */
        #keyboard .row {
            display: flex;
            justify-content: center;
        }
        #keyboard .key {
            flex: 1 1 auto;
            max-width: 50px;
            min-width: 30px;
            margin: 2px;
            height: 45px;
            box-sizing: border-box;
        }
        .key.space {
            width: 200px;
        }
        #keyboard .key.space {
            flex: 4 1 auto;
            max-width: 200px;
        }
        /* 光るアニメーション */
        @keyframes glowing {
            0% {
            background-color: rgba(236, 229, 19, 0.5);
            box-shadow: 0 0 5px rgba(236, 229, 19, 0.5);
            }
            50% {
            background-color: rgba(236, 229, 19, 1);
            box-shadow: 0 0 20px rgba(236, 229, 19, 1);
            }
            100% {
            background-color: rgba(236, 229, 19, 0.5);
            box-shadow: 0 0 5px rgba(236, 229, 19, 0.5);
            }
        }

        /* 拡大しても周りのキー配置がズレない（transformなのでレイアウト不変） */
        .key{
            transform: translateZ(0); /* 軽い最適化（任意） */
            will-change: transform;
        }

        /* 光り＋ポップ（拡大）を同時に */
        .key.highlight{
            animation:
                glowing 1s infinite,
                keyPop 0.55s ease-in-out infinite;
            transform-origin: center;
            position: relative;
            z-index: 5; /* 近くのキーより手前に出す */
        }

        /* 拡大アニメ（跳ねる感じ） */
        @keyframes keyPop{
            0%   { transform: scale(1); }
            35%  { transform: scale(1.32); }
            70%  { transform: scale(1.10); }
            100% { transform: scale(1); }
        }
        .key:hover {
            background-color: #ddd;
        }

        /* ========== Tenkey ========== */
        #tenkey {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            background-color: #aba3a3;
            padding: 10px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

            position: relative;

            width: 700px;
            height: 280px; /* #keyboard と同じ */
            box-sizing: border-box;
        }

        #tenkey .row {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            margin-bottom: 0; /* .row の 5px を実質打ち消す */
        }

        #tenkey .key {
            flex: 1;
            margin: 2px;
            max-width: 60px;
            height: 45px;

            background-color: #fff;
            color: #333;

            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 5px;
            box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);

            font-size: 14px;
            cursor: pointer;
        }

        .empty-key {
            visibility: hidden;
            pointer-events: none;
        }

        #tenkey .row:last-child {
            justify-content: center;
        }
        #tenkey .row:last-child .key {
            flex: 0 0 30%;
        }

        #tenkey .key.highlight {
            animation: glowing 1s infinite;
        }