/* ==========================================================
   pc.css
   PC・タブレット（幅768px以上）だけの見た目（STEP AL：ゲーム画面）
   ・スマホ（768px未満）には何も効かない（ここに書いたものは全部 @media の中）
   ・ファーストビューを画面いっぱいの横長にして、素材をPC用に置き直す
   ・数値は js/config.js の pc（JS が --pc-* に入れる）
   ・この CSS は最後に読み込む（スマホ用の指定を上書きするため）
========================================================== */

@media (min-width: 768px) {

  /* ---------- ファーストビュー：画面いっぱい ---------- */
  .mv {
    width: 100%;
  }

  /* 雨の背景：オープニングと同じ見せ方（つながって見えるように） */
  #bg-rainy {
    object-position: var(--pc-rainy-x, 50%) var(--pc-rainy-y, 50%);   /* 横長のPC用の雨の背景（STEP AM） */
  }

  /* 雨：引き伸ばさず、画面全体にかかるように */
  .rain__img {
    object-fit: cover;
  }

  /* ---------- 考え中の人物：右下 ---------- */
  .thinking-person {
    width: var(--pc-person-w, 190px);
    left: var(--pc-person-x, 74%);
    bottom: var(--pc-person-bottom, -30px);
  }
  html.is-sunny #thinking-person {
    left: var(--pc-person-sunny-x, 86%);
  }

  /* ---------- メニューボタン：画面の右上 ---------- */
  .site-header {
    right: 28px;
    top: calc(16px + env(safe-area-inset-top));
  }


  /* ---------- てるてる坊主をクリックして逆さにする（PCだけ） ----------
     パズル①を完成させた後、晴れる前だけ押せる（main.js が hidden を外す）
     STEP AL2：押せることが分かる見た目（指のカーソル・揺れ・吹き出し）は付けない（謎の答えになるため） */
  #mv-title .lp-title__teru-flip {
    position: absolute;
    top: -12px;
    right: -8px;
    width: 52px;
    height: 80px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
  }
  #mv-title .lp-title__teru-flip:focus:not(:focus-visible) {
    outline: none;
  }
  #mv-title .lp-title__teru-flip[hidden] {
    display: none;
  }
}