/* CSS: 全体的なスタイル */
      html,
      body {
          height: 100%;
          margin: 0;
          padding: 0;
          overflow: hidden;
          background: #1a1a2e;
          font-family: 'Nunito', sans-serif;
      }

      body {
          display: flex;
          flex-direction: column;
      }

      #game-container {
          flex-grow: 1;
          position: relative;
          cursor: crosshair;
      }

      /* プレイヤー被弾時のフラッシュエフェクト */
      #game-container.damaged-flash {
          animation: flash 0.3s ease-in-out;
      }

      @keyframes flash {

          0%,
          100% {
              box-shadow: inset 0 0 0 0 rgba(255, 0, 0, 0);
          }

          50% {
              box-shadow: inset 0 0 80px 30px rgba(255, 0, 0, 0.7);
          }
      }

      canvas {
          display: block;
          width: 100%;
          height: 100%;
      }

      .ui-overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
          z-index: 10;
      }

      .game-ui,
      .stage-info {
          position: absolute;
          top: 20px;
          color: white;
          font-weight: 700;
          font-size: clamp(16px, 3vw, 24px);
          text-shadow: 0 0 5px rgba(0, 0, 0, 0.7), 0 0 8px rgba(0, 0, 0, 0.7);
          line-height: 1.4;
      }

      .game-ui {
          left: 20px;
      }

      .stage-info {
          right: 20px;
          text-align: right;
      }

      /* メッセージボックススタイル */
      .message-box {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) scale(0.5);
          color: #ffeb3b;
          font-family: 'Fredoka One', cursive;
          font-size: clamp(24px, 6vw, 48px);
          text-align: center;
          text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
          opacity: 0;
          transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          background: rgba(0, 0, 0, 0.75);
          padding: 25px 40px;
          border-radius: 20px;
          border: 3px solid #ffeb3b;
          visibility: hidden;
          pointer-events: none;
          width: 80%;
          max-width: 500px;
          box-sizing: border-box;
          backdrop-filter: blur(10px);
      }

      .message-box.show {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
          visibility: visible;
          pointer-events: auto;
      }

      /* スタート画面専用スタイル */
      #startScreen .title {
          font-size: 1.2em;
          margin-bottom: 10px;
          color: #fff;
      }

      #startScreen .instructions {
          font-size: 0.4em;
          margin-bottom: 25px;
          color: #eee;
          font-family: 'Nunito', sans-serif;
          line-height: 1.6;
      }

      .message-box div {
          margin-bottom: 15px;
      }

      .message-box .sub-text {
          font-size: 0.5em;
          margin-top: -10px;
          margin-bottom: 20px;
          color: #fff;
          font-family: 'Nunito', sans-serif;
      }

      .action-btn {
          padding: 12px 25px;
          background: #4caf50;
          color: white;
          border: none;
          border-radius: 25px;
          font-family: 'Fredoka One', cursive;
          font-size: clamp(16px, 3vw, 20px);
          cursor: pointer;
          transition: all 0.3s ease;
      }

      .action-btn:hover {
          background: #45a049;
          transform: scale(1.05);
      }

      /* ライフ(ハート)の表示 */
      .lives-display {
          display: flex;
          gap: 5px;
          margin-top: 5px;
      }

      .heart {
          width: 20px;
          height: 20px;
          position: relative;
          animation: heartbeat 1.5s infinite;
      }

      .heart::before,
      .heart::after {
          content: "";
          position: absolute;
          top: 0;
          width: 10px;
          height: 16px;
          background: #ff4757;
          border-radius: 50px 50px 0 0;
          transform: rotate(-45deg);
          transform-origin: 0 100%;
      }

      .heart::after {
          left: 0;
          transform: rotate(45deg);
          transform-origin: 100% 100%;
      }

      @keyframes heartbeat {

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

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

      /* コントロールボタン */
      .control-buttons {
          position: absolute;
          bottom: 20px;
          right: 20px;
          z-index: 11;
          pointer-events: auto;
          display: flex;
          gap: 10px;
      }

      .control-btn {
          background: rgba(0, 0, 0, 0.4);
          border: 2px solid rgba(255, 255, 255, 0.8);
          color: white;
          width: 44px;
          height: 44px;
          border-radius: 50%;
          font-size: 18px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease;
          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
      }

      .control-btn:hover {
          background: rgba(255, 255, 255, 0.2);
          border-color: #ffeb3b;
          color: #ffeb3b;
      }

      /* ポーズ画面 */
      #pauseScreen {
          background: rgba(0, 0, 0, 0.9);
      }

      /* フッター */
      footer {
          position: static;
          flex-shrink: 0;
          width: 100%;
          background: rgba(0, 0, 0, 0.5);
          color: white;
          text-align: center;
          padding: 10px 0;
          box-sizing: border-box;
          font-size: 0.9em;
          pointer-events: auto;
      }

      footer .social-links a {
          color: #ffeb3b;
          text-decoration: none;
          margin: 0 10px;
          transition: color 0.3s ease;
      }

      footer .social-links a:hover {
          color: #fff;
          text-decoration: underline;
      }