/* /category/shogi-file/（カテゴリアーカイブ）用。
   単体ページ用 style.css から全体リセット（*）と body 直指定を除き、
   サイト共通CSS（site.css）と共存できるようにしたもの。
   駒まわりのルールは style.css と同一。script.js を共用する。 */

:root {
  /* 黄楊（つげ）材の駒色 */
  --shogi-koma-wood-face: #f0d9a0;   /* 盤面（やや明るい木色） */
  --shogi-koma-wood-edge: #f7de9f;   /* 木口・縁（少し濃い木色） */
  --shogi-koma-wood-line: #efd697;   /* 彫りの輪郭（さらに濃い） */
  --shogi-koma-sumi-ink: #000000;    /* 表の黒い漆文字 */
  --shogi-koma-nari-ink: #b5271d;    /* 裏（成り）の朱色文字 */
  --shogi-koma-bg: #fff5db;          /* 背景（生成りの紙色） */

  --shogi-koma-spin-duration: 7s;
  --shogi-koma-enter-delay: 180ms;
  --shogi-koma-enter-duration: 650ms;
}

@font-face {
  font-family: "Shogi File";
  src: url("shogi-file.woff2") format("woff2"),
       url("shogi-file.woff") format("woff");
  font-display: swap;
  font-weight: normal;
  font-synthesis: none;
}

@font-face {
  font-family: "Shogi File 2";
  src: url("shogi-file2.woff2") format("woff2"),
       url("shogi-file2.woff") format("woff");
  font-display: swap;
  font-weight: normal;
  font-style: normal;
  font-synthesis: none;
}

/* ページ全体の色（背景・文字・ロゴ）は CSS では持たない。
   タームの「色・背景・カスタムコード」フィールドの値を header-v4.php が
   :root のカスタムプロパティとして出力する（生成りの紙色 #fff5db もそちらで設定） */

/* ヘッダー: v4 デフォルトのロゴバー（fixed・高さ4rem・下線あり）のまま、
   ロゴだけ左寄せにする（既定は中央寄せ）。
   ナビ展開中（.is-nav-active）は既定どおり中央寄せに戻す。
   バーの背景（木目＋碁盤の目）はタームのカスタムコード側で敷く */
body.popeye-shogi-file:not(.is-nav-active) .header-logo {
  justify-content: flex-start;
  padding-left: 2rem;  /* PC: 左端からの余白（☰の左右パディング2remに合わせる） */
}
@media (max-width: 767px) { /* スマホ（767px以下） */
  body.popeye-shogi-file:not(.is-nav-active) .header-logo {
    padding-left: 1rem; /* スマホ: 左端からの余白（☰のパディング1remに合わせる） */
  }
}

/* 説明文アコーディオン（タブレット・スマホ）の開閉アイコン。
   開くと site.js の accordion() が 90deg 回転させて下向き（☞→下）になる */
body.popeye-shogi-file .accordion-icon {
  display: inline-block; /* rotate を効かせるため */
  line-height: 1;
}

/* ヒーロー：駒＋ロゴタイプ（単体ページの 100vh ステージをアーカイブ用の高さに調整）。
   ヘッダーは nav-only（ロゴバー非表示）なので、上余白はここで確保する */


/* 遠近感を与えるシーン */
.shogi-koma-scene {
  /* 幅のフォールバック（50%）はJSの parentWidthRatio: 0.5 と同値。
     JS実行前も縦横比どおりの高さを確保してガタつきを防ぐ */
  width: var(--shogi-koma-w, 50%);
  aspect-ratio: 7 / 8; /* 駒の縦横比（JSの --shogi-koma-h = 幅×8/7 と同じ比率） */
  opacity: 0;
  transition: opacity var(--shogi-koma-enter-duration) ease-out var(--shogi-koma-enter-delay);
  -webkit-perspective: calc(var(--shogi-koma-w) * 6.4);
  perspective: calc(var(--shogi-koma-w) * 6.4);
  -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  overflow: visible;
  margin: 0 auto;
}

.shogi-koma-scene--ready {
  opacity: 1;
}

/* 駒本体：縦軸まわり（水平）に回転。回転角は script.js が制御する */
.shogi-koma {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  will-change: transform;
  font-family: "Shogi File 2", serif;
  color: var(--shogi-koma-sumi-ink);
}

/* 駒の面：五角形シルエット（外側＝黒＝輪郭） */
.shogi-koma__face {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  will-change: transform;

  /* 将棋駒の五角形 */
  -webkit-clip-path: polygon(50% 0%, 86% 20%, 100% 100%, 0% 100%, 14% 20%);
  clip-path: polygon(50% 0%, 86% 20%, 100% 100%, 0% 100%, 14% 20%);
  background: var(--shogi-koma-wood-line);
}

/* 表面は手前へ、裏面は奥へ押し出して厚みを作る */
.shogi-koma__face--front {
  -webkit-transform: translateZ(calc(var(--shogi-koma-depth) / 2));
  transform: translateZ(calc(var(--shogi-koma-depth) / 2));
}

.shogi-koma__face--back {
  -webkit-transform: rotateY(180deg) translateZ(calc(var(--shogi-koma-depth) / 2));
  transform: rotateY(180deg) translateZ(calc(var(--shogi-koma-depth) / 2));
}

/* 側面（縁）：五角形の各辺に沿って立てる黒いリム。
   位置・回転・長さは script.js が頂点から計算して設定する */
.shogi-koma__side {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  will-change: transform;
  /* 木口：中央を明るく、表裏の際を濃くして丸みを表現 */
  background: linear-gradient(
    to bottom,
    var(--shogi-koma-wood-line) 0%,
    var(--shogi-koma-wood-edge) 50%,
    var(--shogi-koma-wood-line) 100%
  );
}

/* 内側＝木の盤面（外側の濃い木色が彫りの輪郭として残る） */
.shogi-koma__face-inner {
  position: absolute;
  inset: var(--shogi-koma-face-inset);
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-clip-path: polygon(50% 0%, 86% 20%, 100% 100%, 0% 100%, 14% 20%);
  clip-path: polygon(50% 0%, 86% 20%, 100% 100%, 0% 100%, 14% 20%);
  /* うっすら木目を感じる縦のグラデーション */
  background: linear-gradient(
    100deg,
    #f5e1b0 0%,
    var(--shogi-koma-wood-face) 45%,
    #e7c988 100%
  );
}

/* 文字：駒の下側へ広がる形に合わせて、二文字は下字を少し大きく見せる */
.shogi-koma__kanji {
  width: calc(var(--shogi-koma-w) * 0.68);
  height: calc(var(--shogi-koma-h) * 0.72);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: var(--shogi-koma-kanji-size);
  line-height: 0.94;
  color: var(--shogi-koma-sumi-ink);
  user-select: none;
}

.shogi-koma__kanji--two {
  transform: translateY(0.08em);
}

.shogi-koma__kanji--second-small-kana {
  transform: translateY(0.06em);
}

.shogi-koma__kanji--single {
  transform: translateY(0.1em);
}

.shogi-koma__kanji-char {
  display: block;
  flex: 0 0 auto;
  font-size: 1.5em;
}

.shogi-koma__kanji-char--top {
  font-size: 0.95em;
  margin-bottom: -0.04em;
  transform: translateY(0.04em);
}

.shogi-koma__kanji-char--bottom {
  font-size: 1.15em;
  transform: translateY(-0.01em);
}

.shogi-koma__kanji-char--bottom.shogi-koma__kanji-char--small-kana {
  font-size: 0.74em;
  margin-top: -0.02em;
  transform: translate(0.16em, -0.04em);
}

/* 裏（成駒）：朱色のロゴ（インラインSVG）。色は fill で変えられる */
.shogi-koma__nari-logo {
  width: var(--shogi-koma-nari-logo-w);
  height: var(--shogi-koma-nari-logo-h);
  fill: var(--shogi-koma-nari-ink);
  transform: translateY(0.6em);
}

.shogi-file-identity {
  width: 80%;
  margin: 16% auto 0 auto;
  line-height: 0;
}

.shogi-file-identity img {
  display: block;
  width: 100%;
  height: auto;
}

/* 一覧に差し込む広告（GPT）。
   配信が確定するまで場所を取らない：既定は display:none にしておき、
   広告が実際に描画されたとき（インラインJSが .is-ad-filled を付与）だけ表示する */
.shogi-file-ad {
  display: none;
}

.shogi-file-ad.is-ad-filled {
  display: block;
}

/* デバイス別の出し分け（スロット定義自体はインラインJSが初期ウィンドウ幅で
   振り分ける。ここは表示後にウィンドウ幅が変わった場合の保険） */
@media (max-width: 1023px) {
  .shogi-file-ad[data-shogi-ad-device="desktop"] {
    display: none;
  }
}

@media (min-width: 1024px) {
  .shogi-file-ad[data-shogi-ad-device="mobile"] {
    display: none;
  }
}

/* GPTが生成する内側のdivを中央寄せする（v3 .ad 相当の最小限） */
.shogi-file-ad > div {
  width: 100% !important;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}