/* =====================================================
           CYBERPUNK GLASS THEME: ネオンブルー＆グラスモフィズム
           ===================================================== */
        :root {
          --cyber-bg: #030814;
          --cyber-text: #e6f0ff;
          --cyber-muted: rgba(203, 213, 225, 0.7);
          --cyber-blue: #38bdf8;       /* ネオンシアン */
          --cyber-purple: #a78bfa;     /* ネオンバイオレット */
          --cyber-green: #22c55e;      /* 正解グリーン */
          --cyber-red: #fb7185;        /* 不正解レッド */
          --cyber-dark-blue: #061a3a;
          
          /* ガラスの質感共通パーツ */
          --glass-bg: rgba(6, 22, 44, 0.65);
          --glass-border: rgba(56, 189, 248, 0.25);
          --cyber-glow: 0 0 12px rgba(56, 189, 248, 0.4);
          --cyber-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);

          /* チュートリアル待機ヒント内のブロック SVG の高さ (画面幅で段階可変) */
          --hint-block-height: 1.5em;

          /* パル解説パネル (answer-reveal-mode) の配置。
             サイズは character-dialog.css 側で clamp() の流体指定にしたため、
             ここでは「ヘッダーとアクションバーを避けるための余白」だけを持つ。 */
          --reveal-dock-top: 92px;      /* ヘッダーの高さぶん */
          /* 「もう一度／次の問題へ」ボタン群の画面下端からの距離。
             パネルの下端はこの値から計算するので、両者がズレることがない。 */
          --reveal-btn-gap: clamp(14px, 2vh, 30px);
          --reveal-btn-height: 56px;
        }

        /* 画面幅に応じて --hint-block-height を段階的に下げる。
           （1919px のブロックは解説パネルの変数を消した結果、中身が空になったので削除した） */
        @media (max-width: 1599px) {
          :root {
            --hint-block-height: 1.35em;
          }
        }
        @media (max-width: 1279px) {
          :root {
            --hint-block-height: 1.2em;
          }
        }
        @media (max-width: 1023px) {
          :root {
            --hint-block-height: 1.1em;
          }
        }

        html, body {
          height: 100%;
          margin: 0;
          padding: 0;
          background-color: var(--cyber-bg);
          font-family: 'M PLUS Rounded 1c', 'Hiragino Kaku Gothic ProN', sans-serif;
          color: var(--cyber-text);
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          background-attachment: fixed;
          transition: background-image 260ms ease;
        }

        .a { display: none; height: 100%; flex-direction: column; }
        .b { display: flex; }