/* =====================================================
           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) の吹き出しサイズ (画面幅で段階可変) */
          --answer-reveal-width: 720px;
          --answer-reveal-max-height: 30vh;
          --answer-reveal-font-size: 1.05rem;
        }

        /* 5 段階のブレークポイントで各種サイズを切り替える */
        @media (max-width: 1919px) {
          :root {
            --answer-reveal-width: 640px;
            --answer-reveal-font-size: 1rem;
          }
        }
        @media (max-width: 1599px) {
          :root {
            --hint-block-height: 1.35em;
            --answer-reveal-width: 560px;
            --answer-reveal-max-height: 28vh;
            --answer-reveal-font-size: 0.95rem;
          }
        }
        @media (max-width: 1279px) {
          :root {
            --hint-block-height: 1.2em;
            --answer-reveal-width: 480px;
            --answer-reveal-max-height: 26vh;
            --answer-reveal-font-size: 0.9rem;
          }
        }
        @media (max-width: 1023px) {
          :root {
            --hint-block-height: 1.1em;
            --answer-reveal-width: 420px;
            --answer-reveal-max-height: 24vh;
            --answer-reveal-font-size: 0.85rem;
          }
        }

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