/* i-mobile の広告の枠(site-ads.js)。仕様: docs/specs/site-ads-imobile.md
 * 場所ごとの大きさ(--ad-w / --ad-h)は site-ads.js が <head> に作る。ここは形・左右の広告・上下に固定の広告だけ。
 * 「広告」などの文字は出さない(第三者の広告ネットワークのバナーに表示義務は無く、広告自体に ⓘ が付く)。広告は大きさぴったりの枠。
 * 誤クリックを防ぐのは余白(ボタン・タブ・メニューのすぐ隣に置かない。14条1項(16)⑨)。 */
/* 場所の枠は、site-ads.js が付ける html.ad-pc / html.ad-sp の下でだけ形・高さを持つ(読めなかったときは、空の枠を出さない) */
html:is(.ad-pc, .ad-sp) [data-ad]:not(.site-ad-rail, .site-ad-bar) {   /* 左右・下に固定の広告は、下の専用のルールで出し入れする */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  min-height: var(--ad-h, 250px);   /* 広告を読む前から、広告の高さぴったりを確保。広告が出なくても保つ */
}
.site-ad-box {
  flex: none;
  position: relative;
  box-sizing: border-box;
  width: var(--ad-w, 300px);
  height: var(--ad-h, 250px);
  max-width: 100%;
}
.site-ad-ph {                              /* 本番以外の見本の枠 */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  color: #565b8c;
  font-size: 0.75rem;
}

/* 文章の中(読み物のページ): 前後の文と離す。本文とリンクのあいだの「最後」、長いページの「途中」 */
[data-ad="text-article-end"], [data-ad="text-article-mid"] { margin: 32px auto; }

/* タイピングバトルの枠(ロビー・結果)。style.css は ?v が無く古いまま残ることがあるので、枠の余白・線はここ(?v あり)で決める */
.ad-slot[data-ad] { margin: 24px 0 18px; border: 0; border-radius: 0; color: inherit; }   /* 広告の上下は、ボタン・カードから 24px 以上離す(広告の枠 = 広告の大きさぴったり) */
#ad-slot-result[data-ad] { margin-top: 44px; margin-bottom: 0; }   /* 結果画面: 「ロビーに戻る」ボタンから広告まで 44px(40px 以上) */
/* ロビー(PC): 広告は題名・副題のすぐ下(typing.html の inline script が動かす)。副題の下の余白(24px)で題名と離れ、下のログインのカードとは 18px + カードの内側の余白 18px */
html.ad-pc #lobby-screen > .subtitle + #ad-slot-lobby[data-ad] { margin-top: 0; }
/* ロビー: PC の 728px の広告は、本文の列(720px)から左右に少しはみ出して中央に置く。それより狭い画面では枠の中で横にスクロール */
#ad-slot-lobby .site-ad-box { max-width: none; }
@media (max-width: 751px) { #ad-slot-lobby { overflow-x: auto; align-items: safe center; } }
/* スマホの下に固定の広告(ロビー・結果画面だけ。準備・対戦・ガチャ・図鑑では隠す)。html.ad-sp が無ければ出ない。ページの下に同じ高さの余白を足す */
:where(html.ad-sp) body.tb-ad-bottom .site-ad-bar[data-ad="typing-bottom"] { display: flex; }
body.tb-ad-bottom:has(:is(input, textarea):focus) .site-ad-bar[data-ad="typing-bottom"] { display: none; }   /* 文字を入力している間は、画面キーボードに重ならないよう隠す */
html.ad-sp body.tb-ad-bottom { padding-bottom: calc(24px + 50px + env(safe-area-inset-bottom, 0px)); }

/* 左右の広告(PC だけ・本文の列の外に収まる幅のときだけ。data-col = 本文の列の幅)。画面に固定し、背が低いときは位置を固定せず本文と一緒に動かす */
.site-ad-rail {
  display: none;               /* 既定は隠す。出すのは下の幅の条件(site-ads.js が作ったときだけ要素がある) */
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  position: fixed;
  top: 64px;
  z-index: 3;
  width: var(--ad-w, 160px);
  min-height: var(--ad-h, 600px);
  --ad-half: 360px;
}
.site-ad-rail[data-col="780"] { --ad-half: 390px; }
.site-ad-rail[data-col="980"] { --ad-half: 490px; }
.site-ad-rail[data-col="1120"] { --ad-half: 560px; }
.site-ad-rail[data-col="480"] { --ad-half: 240px; }
.site-ad-rail-l { right: calc(50% + var(--ad-half) + 24px); }
.site-ad-rail-r { left: calc(50% + var(--ad-half) + 24px); }
@media (min-width: 1100px) { .site-ad-rail[data-col="720"] { display: flex; } }
@media (min-width: 1150px) { .site-ad-rail[data-col="780"] { display: flex; } }
@media (min-width: 1350px) { .site-ad-rail[data-col="980"] { display: flex; } }
@media (min-width: 1490px) { .site-ad-rail[data-col="1120"] { display: flex; } }
@media (max-height: 664px) { .site-ad-rail:not([data-col="480"]) { position: absolute; } }
/* ステラオーブのロビー: 縦に動かない画面なので、画面の左右の端から 24px の所に、縦は真ん中に固定(2026-10-30。ロビーの列は 760px)。
   160 は画面の幅 1176px 以上(760 + 2 x (160 + 24 + 24))、300 は 1456px 以上(760 + 2 x (300 + 24 + 24))。ロビー以外では隠す。
   タイトル画面(オープニング。body.st-opening)の間は出さない = 見えない裏で広告を読まない */
.site-ad-rail[data-col="480"] { top: 50%; transform: translateY(-50%); }
.site-ad-rail-l[data-col="480"] { left: 24px; right: auto; }
.site-ad-rail-r[data-col="480"] { right: 24px; left: auto; }
@media (min-width: 1176px) and (min-height: 650px) {
  body.st-in-lobby.st-has-tb:not(.st-opening) .site-ad-rail[data-col="480"]:not(.is-wide) { display: flex; }
}
@media (min-width: 1456px) and (min-height: 650px) {
  body.st-in-lobby.st-has-tb:not(.st-opening) .site-ad-rail[data-col="480"].is-wide { display: flex; }
}

/* 画面の端に固定の広告(スマホだけ。基本は下。ステラオーブは画面の上に置き直す = stella-stage.css の .st-adbar が top:0 にする)。出す・隠すは各ページの CSS(タイピング = body.tb-ad-bottom、ステラオーブ = 下のメニューが出る画面) */
.site-ad-bar {
  display: none;               /* 既定は隠す。出すのは html.ad-sp が付いたときの各ページのルールだけ */
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  width: 100%;
  margin: 0 auto;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  min-height: calc(var(--ad-h, 50px) + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 10, 40, 0.98);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1);   /* 上の線(枠線にしない = 高さが広告+セーフエリアちょうどになる) */
}