@charset "UTF-8";
/*
 * common_new/pc-block/pc-block.css  ―  PC/タブレット用 QRランディング
 * ============================================================
 * ■ このファイルの役割
 *   スマホ専用アプリにPC/タブレットからアクセスした場合、
 *   ゲーム画面の代わりにQRコード付きの案内画面を表示する。
 *
 *   kidzapps.com（検証用）では絶対にこのファイルを読み込まない。
 *   　→ 今まで通りPCでも検証プレイができる。
 *   streamsedu.com（本番）でのみ、app-screens.css の【後】に
 *   読み込むことで有効化する。
 *
 * ■ 読み込み順（本番HTML）
 *   1. app-shell.css     （kidzapps共通・そのまま上書きコピー）
 *   2. ad.css             （広告共通）
 *   3. app-screens.css   （kidzapps共通・そのまま上書きコピー）
 *   4. pc-block.css       ← 本ファイル（本番専用・必ず最後に読む）
 *
 * ■ 判定・表示切り替えロジックは pc-block.js が担当する
 *   本CSSは「body.is-pc が付いた時に何を隠して何を出すか」だけを
 *   受け持つ。判定ロジック（UA / 画面幅）自体はJS側にある。
 *
 * ■ デザインについて
 *   九九ベアランナー（streamsedu本番で先行実装されていたPCランディング）
 *   の見た目（ライトなグラデーション背景＋ぼかしガラス風カード＋
 *   QR上部のピル型案内バッジ）に合わせてある。今後このpc-block.css/js
 *   を使う全アプリのデフォルトの見た目になる。
 *
 * ■ kidzapps側の共通CSSが更新された場合の運用について
 *   app-shell.css / app-screens.css は【中身を見ずにそのまま】
 *   上書きコピーしてよい設計にしてある。
 *   本ファイルの表示制御指定は全て !important を付けているため、
 *   kidzapps側のCSSが将来どう変わっても、PC遮断の見た目が
 *   壊れることはない。
 *
 * ■ 配色などをアプリごとに変えたい場合
 *   本ファイルは編集せず、本ファイルより後に読み込む
 *   <style> 内で ①のCSS変数を同名で再定義すればよい
 *   （後勝ちで上書きされるため !important 不要）。
 * ============================================================
 */

/* ============================================================
   ① 見た目のカスタマイズ用変数（デフォルト値）
   ------------------------------------------------------------
   デフォルトは九九ベアランナーと同じパステル配色。
   ============================================================ */
:root {
  --pcblock-bg-1:        #A8E6CF; /* 背景グラデーション開始色（ミント） */
  --pcblock-bg-2:        #FFD3B6; /* 背景グラデーション中間色（ピーチ） */
  --pcblock-bg-3:        #FFAAA5; /* 背景グラデーション終了色（コーラル） */
  --pcblock-card-bg:     rgba(255, 255, 255, 0.72);
  --pcblock-card-blur:   18px;
  --pcblock-title-color: #3A2A1A;
  --pcblock-text-color:  #5A4A3A;
  --pcblock-hint-color:  #7A6A5A;
  --pcblock-hint-bg:     rgba(255, 200, 150, 0.35);
  /* 広告(z-index:1000)やアプリ内の各種オーバーレイより
     確実に手前に出すため、可能な限り大きい値にしている */
  --pcblock-z-index:     2147483647;
}

/* ============================================================
   ② PC判定時の表示切り替え（最重要・編集不要）
   ------------------------------------------------------------
   ・body.is-pc は pc-block.js が付与する
   ・#pc-block-landing 以外の body直下の要素を全部隠す
   ・アプリごとに要素IDがバラバラ（#gc, #app, #ad-banner等）でも
     対応できるよう、「IDを列挙して隠す」方式ではなく
     「body直下の子要素を、ランディング以外まるごと除外する」
     方式にしている＝どのアプリに持って行っても書き換え不要。
   ============================================================ */
body.is-pc > *:not(#pc-block-landing):not(script):not(style):not(link):not(noscript) {
  display: none !important;
}

/* PCモード中はページ自体のスクロールも解放しておく（グラデ背景をフルで使うため） */
body.is-pc,
html:has(body.is-pc) {
  overflow: auto !important;
}

/* ============================================================
   ③ QRランディング画面本体
   ------------------------------------------------------------
   DOM自体は pc-block.js が自動生成する（HTML側の追記は不要）。
   ============================================================ */
#pc-block-landing {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--pcblock-z-index);
  background: linear-gradient(160deg, var(--pcblock-bg-1) 0%, var(--pcblock-bg-2) 55%, var(--pcblock-bg-3) 100%);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 20px;
  text-align: center;
  box-sizing: border-box;
}

body.is-pc #pc-block-landing {
  display: flex !important;
}

.pcblock-card {
  background:              var(--pcblock-card-bg);
  backdrop-filter:          blur(var(--pcblock-card-blur));
  -webkit-backdrop-filter:  blur(var(--pcblock-card-blur));
  border-radius:            32px;
  padding:                  48px 56px 52px;
  max-width:                480px;
  width:                    90%;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(255, 170, 165, 0.3);
  box-sizing:                border-box;
  display:                   flex;
  flex-direction:             column;
  align-items:                center;
  gap:                        16px;
}

.pcblock-icon {
  width:         100px;
  height:        100px;
  border-radius: 24px;
  box-shadow:    0 4px 16px rgba(0, 0, 0, 0.15);
  object-fit:    cover;
  display:       block;
}

.pcblock-title {
  color:          var(--pcblock-title-color);
  font-size:      2rem;
  font-weight:    900;
  letter-spacing: 0.04em;
  line-height:    1.2;
  margin:         0;
}

.pcblock-text {
  color:       var(--pcblock-text-color);
  font-size:   1rem;
  font-weight: 700;
  line-height: 1.6;
  margin:      0;
}

/* 案内文（QRの上に出るピル型バッジ） */
.pcblock-hint {
  color:         var(--pcblock-hint-color);
  background:    var(--pcblock-hint-bg);
  font-size:     0.9rem;
  font-weight:   400;
  border-radius: 20px;
  padding:       6px 20px;
  margin:        4px 0 0;
}

.pcblock-qr-wrap {
  background:    #fff;
  padding:       12px;
  border-radius: 16px;
  box-shadow:    0 2px 12px rgba(0, 0, 0, 0.10);
  display:       inline-block;
  line-height:   0;
}

.pcblock-qr-img {
  width:         200px;
  height:        200px;
  display:       block;
  border-radius: 8px;
}