/**
 * KARnea - Mobile Frame CSS
 *
 * PC で開発・確認する時も常にスマホ幅（420px）で表示する。
 * 両脇は紫背景＋キラキラの星空（KARNEA 世界観に統一）。
 *
 * 480px 以上のビューポートでのみ適用される（実機スマホでは無効）。
 */

@media (min-width: 480px) {
  /* ===== 両脇の背景：紫グラデ（スマホ画面と同色感） ===== */
  html {
    background: linear-gradient(180deg, #1a0d3e 0%, #2a1a5e 50%, #1a0d3e 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
    position: relative !important;
  }

  /* ===== 両脇の星空（キラキラ） ===== */
  html::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image:
      /* 左サイド */
      radial-gradient(1.5px 1.5px at 5% 8%,   rgba(255, 255, 255, 0.85), transparent 50%),
      radial-gradient(1px 1px     at 12% 22%, rgba(244, 217, 122, 0.75), transparent 50%),
      radial-gradient(2px 2px     at 8% 42%,  rgba(255, 255, 255, 0.7),  transparent 50%),
      radial-gradient(1px 1px     at 14% 58%, rgba(244, 217, 122, 0.7),  transparent 50%),
      radial-gradient(1.5px 1.5px at 4% 72%,  rgba(255, 255, 255, 0.75), transparent 50%),
      radial-gradient(1px 1px     at 11% 88%, rgba(244, 217, 122, 0.7),  transparent 50%),
      radial-gradient(2px 2px     at 6% 96%,  rgba(255, 255, 255, 0.6),  transparent 50%),
      /* 右サイド */
      radial-gradient(1.5px 1.5px at 96% 6%,  rgba(244, 217, 122, 0.85), transparent 50%),
      radial-gradient(1px 1px     at 88% 20%, rgba(255, 255, 255, 0.75), transparent 50%),
      radial-gradient(2px 2px     at 92% 38%, rgba(244, 217, 122, 0.7),  transparent 50%),
      radial-gradient(1px 1px     at 86% 55%, rgba(255, 255, 255, 0.75), transparent 50%),
      radial-gradient(1.5px 1.5px at 95% 70%, rgba(244, 217, 122, 0.75), transparent 50%),
      radial-gradient(1px 1px     at 89% 84%, rgba(255, 255, 255, 0.7),  transparent 50%),
      radial-gradient(2px 2px     at 94% 94%, rgba(244, 217, 122, 0.65), transparent 50%);
    pointer-events: none;
    z-index: 0;
    animation: pcStarsTwinkle 3.5s ease-in-out infinite;
  }

  /* もう1層：ゆっくり明滅する小さな星 */
  html::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image:
      radial-gradient(1px 1px at 2% 18%,  rgba(255, 255, 255, 0.5), transparent 50%),
      radial-gradient(1px 1px at 9% 33%,  rgba(244, 217, 122, 0.5), transparent 50%),
      radial-gradient(1px 1px at 7% 65%,  rgba(255, 255, 255, 0.45), transparent 50%),
      radial-gradient(1px 1px at 13% 80%, rgba(244, 217, 122, 0.5), transparent 50%),
      radial-gradient(1px 1px at 92% 12%, rgba(255, 255, 255, 0.5), transparent 50%),
      radial-gradient(1px 1px at 90% 30%, rgba(244, 217, 122, 0.45), transparent 50%),
      radial-gradient(1px 1px at 84% 50%, rgba(255, 255, 255, 0.5), transparent 50%),
      radial-gradient(1px 1px at 91% 78%, rgba(244, 217, 122, 0.5), transparent 50%);
    pointer-events: none;
    z-index: 0;
    animation: pcStarsTwinkleSlow 6s ease-in-out infinite;
  }

  @keyframes pcStarsTwinkle {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
  }

  @keyframes pcStarsTwinkleSlow {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 0.8; }
  }

  /* ===== body を 420px 幅に ===== */
  body {
    max-width: 420px !important;
    margin: 0 auto !important;
    box-shadow:
      0 0 0 1px rgba(244, 217, 122, 0.18),
      0 0 80px rgba(0, 0, 0, 0.6) !important;
    overflow-x: hidden !important;
    position: relative !important;
    z-index: 1 !important;
  }

  /* ===== 固定要素を 420px 枠に揃える ===== */
  /* ※ .kn-header は position:sticky（本文フロー内）のため body 幅に自動追従。
   *    ここに列挙するのは position:fixed の要素のみ（このアプリで実在するもの）。
   *    .talk-gate-overlay は home.html 固有の全画面オーバーレイ（公式リストに追記）。 */
  .header,
  .topbar,
  .bottombar,
  .loading-overlay,
  .talk-gate-overlay,
  .ad-bar,
  .celebration-bg {
    left: calc(50% - 210px) !important;
    right: auto !important;
    width: 420px !important;
    max-width: 420px !important;
  }

  /* 開発用ボタンを枠内右下に */
  .dev-replay {
    right: calc(50% - 210px + 12px) !important;
  }
}