/*
 * ゲーム用のテンプレート（game.tpl）の、ヘッダーとフッター。
 * 全幅で、背景色は付けない（背景・文字の色は、ゲーム側の style.css に任せる）。ホームのヘッダーのように、ロゴとサイト名が左、設定が右。
 * ゲームの版が、body > header に幅などを指定していても、この枠の配置が優先される（!important は、配置の指定だけに使う）。
 */
/* 上と下に固定する。ふだんは、ほとんど透明にして目立たなくし、マウスを乗せる・フォーカスすると、はっきり出す。
   背景に色は付けない。下を通る内容が読みにくくならないよう、ぼかすだけにする。
   固定したぶんの高さは、body の余白で、あらかじめ空けておく（ゲームの内容が、バーの下に隠れないように）。 */
:root {
  --yz-header-h: 48px;
  --yz-footer-h: 44px;
  --yz-idle: .28;
  /* ゲームの内容に使える高さ（画面の高さ − 上下のバー）。画面に収める版が、これを使う（使わない版には、影響しない） */
  --yz-stage-h: calc(100vh - var(--yz-header-h) - var(--yz-footer-h) - env(safe-area-inset-bottom, 0px));
  --yz-stage-h: calc(100dvh - var(--yz-header-h) - var(--yz-footer-h) - env(safe-area-inset-bottom, 0px));
}

/*
 * アプリのような触り心地（スマホ・タッチ端末）: ゲーム中のうっかり事故を減らす。ページの高さやスクロールそのものは、変えない。
 * - ページの端での跳ね返りと、引っ張って更新を止める（ふつうのスクロールは、止まらない）。
 * - ダブルタップでの拡大を止める（2本指での拡大は、残る）。ゲームが盤などに touch-action を指定していれば、そちらが優先される。
 * - ボタン・盤（canvas）・上下のバーの、長押しメニュー・文字選択・タップ時の色のちらつきを止める。タッチ端末では、ページ全体の文字選択も止める（下の @media。入力欄と .yz-selectable は選択できる。PC のマウスでは選択できる）。
 */
html:has(> body > .yz-header) {
  overscroll-behavior: none;
}

/* 1画面に収まっているページ（game-footer.js が、収まっている間だけ yz-fit を付ける）は、ページ自体を動かさない。
 * iPhone の上下の「ビヨーン」を防ぐ。はみ出す（スクロールが必要な）ページには付かない。 */
html.yz-fit,
html.yz-fit body {
  overflow: hidden;
}

body:has(> .yz-header) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.yz-header,
.yz-footer,
body:has(> .yz-header) main button,
body:has(> .yz-header) main canvas {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* タッチ端末（スマホ・タブレット）では、ゲームのページ全体で文字の選択を止める。
 * ダブルタップ後の長押しや、ボタンの近くの長押しで、青い選択つまみと拡大ルーペ（iPhone）が出てしまうため。
 * 詳しさをゼロ（:where）にしてあるので、ゲームが自分の style.css で user-select を指定すれば、そちらが優先される。
 * 入力欄は、選択・入力ができるように戻す。コピーさせたい文字には、class="yz-selectable" を付ける。
 * マウス（PC）では、これまで通り、文字を選択できる。 */
@media (hover: none) and (pointer: coarse) {
  :where(body:has(> .yz-header)),
  :where(body:has(> .yz-header)) :where(*) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  body:has(> .yz-header) input,
  body:has(> .yz-header) textarea,
  body:has(> .yz-header) [contenteditable]:not([contenteditable="false"]),
  body:has(> .yz-header) .yz-selectable,
  body:has(> .yz-header) .yz-selectable * {
    -webkit-user-select: text;
    user-select: text;
  }
}

body:has(> .yz-header) {
  padding-top: var(--yz-header-h);
  padding-bottom: calc(var(--yz-footer-h) + env(safe-area-inset-bottom, 0px));
}

body > header.yz-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  box-sizing: border-box;
  height: var(--yz-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 clamp(10px, 1.2vw, 20px) !important;
  background: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* 濃さは、バー全体ではなく、中身（ロゴ・設定）ごとに変える。乗せた（フォーカスした）ものだけが、はっきり出る */
.yz-header > *,
.yz-footer > * {
  opacity: var(--yz-idle);
  transition: opacity .25s ease;
}

.yz-header > *:hover,
.yz-header > *:focus-visible,
.yz-header > *:active,
.yz-footer > *:hover,
.yz-footer > *:focus-visible,
.yz-footer > *:has(:focus-visible),
.yz-footer > *:active {
  opacity: 1;
}

/* バーの空いた部分は、クリックを通す（下にあるゲームのボタンが押せなくならないように）。ロゴ・ボタンなど、中身だけが反応する */
body > header.yz-header {
  pointer-events: none;
}

body > header.yz-header > * {
  pointer-events: auto;
}

.yz-header .yz-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
}

.yz-header .yz-brand::before {
  content: '';
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #1b1715 url('/common/icons/icon-192.png') center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.yz-header .header-settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  text-decoration: none;
}

/*
 * 既定の配置: ゲームの内容は、ヘッダーとフッターの間の領域の、縦横の中央に置く。
 * ゲーム側が何も指定していないときだけ効くよう、詳細度を 0 にしてある（:where）。ゲームの style.css が main や直下の要素に指定すれば、そちらが優先される。
 * 中身が領域より長いときは、上から普通に並び、ふつうにスクロールする（margin: auto は、余りがあるときだけ効く）。
 */
:where(body:has(> .yz-header) > main) {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - var(--yz-header-h) - var(--yz-footer-h) - env(safe-area-inset-bottom, 0px));
  min-height: calc(100dvh - var(--yz-header-h) - var(--yz-footer-h) - env(safe-area-inset-bottom, 0px));
}

/*
 * 既定の見た目: 共通テーマ（theme.css）の main は、白い角丸のカード（最大幅960px）。ゲームでは背景と影をなくして、body の背景（ゲームが決める）が見えるようにする。
 * theme.css の `main { background: white }` に勝てるよう、詳細度は main 1つぶん（0,0,1）。あとから読まれるゲームの style.css が main に指定すれば、そちらが優先される（余白と幅は、変えない）。
 */
:where(body:has(> .yz-header)) > main,
:where(body:has(> .yz-header)) main main {   /* main の中に main を入れてしまった版も、カードにしない */
  background: transparent;
  box-shadow: none;
}

/* 最大幅: theme.css の main は 960px 止まり。ゲームの幅は、ゲーム側（style.css）が決めるので、既定では制限しない（左右の自動余白は残るので、中央寄せのまま） */
:where(body:has(> .yz-header)) > main {
  max-width: none;
}

:where(body:has(> .yz-header) > main > :not(link, script, style, template)) {
  margin-block: auto;
  max-width: 100%;
}

/* フッター: ヘッダーと同じく、全幅・背景なし。色はゲーム側に任せ、少し薄くする */
.yz-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  box-sizing: border-box;
  height: calc(var(--yz-footer-h) + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 0 clamp(10px, 1.2vw, 20px) env(safe-area-inset-bottom, 0px);
  font-size: 11px;
  overflow: hidden;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.yz-footer {
  pointer-events: none;
}

.yz-footer > * {
  pointer-events: auto;
}

.yz-footer .yz-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  white-space: nowrap;
}

.yz-footer .yz-model {
  padding: 1px 10px;
  font-weight: 600;
  letter-spacing: .02em;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.yz-footer .yz-sound {
  padding: 4px 12px;
  font: inherit;
  color: inherit;
  background: none;
  border: 1px solid currentColor;
  border-radius: 999px;
  cursor: pointer;
}

.yz-footer .yz-sound[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .yz-header > *,
  .yz-footer > * {
    transition: none;
  }
}

/* マウスを使えない端末（タッチ）では、「乗せる」ができないので、ふだんの濃さを、少し上げる（触れている間は、はっきり出る） */
@media (hover: none) {
  :root {
    --yz-idle: .42;
  }
}

/* スマホ: 縦の高さが貴重なので、バーを低く、フッターの詳細を省く */
@media (max-width: 600px) {
  :root {
    --yz-header-h: 40px;
    --yz-footer-h: 36px;
  }
  .yz-header .yz-brand::before {
    width: 22px;
    height: 22px;
  }
  .yz-header .header-settings {
    width: 30px;
    height: 30px;
  }
  .yz-header .header-settings-icon {
    width: 18px;
    height: 18px;
  }
  body > header.yz-header {
    padding: 0 10px !important;
  }
  .yz-footer {
    padding-inline: 10px;
    font-size: 10px;
  }
  .yz-footer .yz-detail {
    display: none;
  }
  .yz-footer .yz-sound {
    padding: 3px 10px;
  }
}

/* 横持ちのスマホなど、低い画面: フッターを出さず、ヘッダーも、さらに低くする */
@media (max-height: 480px) {
  :root {
    --yz-header-h: 34px;
    --yz-footer-h: 0px;
  }
  .yz-footer {
    display: none;
  }
}