/* STAGE4 — カード裏面の「事例」（v1.16.0・Ryu指示 2026-08-19）
   ★足すだけ。stage4.css は触らない。このファイルを外せば元どおり。

   v1.16.0で変わったところ
     ① 手札のカードを 100px → 180px
     ② 手札の箱を 600px → 1010px、置き場所を「盤面の下」へ
     ③ 裏面はその場で rotateY で裏返る（別画面を開かない）
     ④ 小さいカードは、裏返すときに読める大きさまで拡大する

   v1.17.1で変わったところ（Ryu報告 2026-08-19）
     ⑧ 大きさ・置き場所の指定は **html.zqcb-ready が付いたときだけ** 効かせる。
        JSが立ち上がったときにだけ印が付く。
        新しいCSSと古いJSがキャッシュで混ざると画面が崩れたため（実際に起きた）。

   v1.17.0で変わったところ（Ryu指示 2026-08-19）
     ⑤ 何枚でも同時に裏返せる（1枚だけの制限をやめた）
     ⑥ 写真の下の灰色をやめた（これが「影」に見えていた）
     ⑦ 置いたときの動きを、手札から置き場へ飛ぶ形に（元の cardin は止める）
*/

:root{ --zqcb-sz:180px; }

/* ==================================================================
 * ① 手札を大きく、② 盤面の下に置く
 * ================================================================ */
.zqcb-ready #handModal{
  align-items:flex-start !important;               /* 真ん中→上そろえ */
  padding-top:var(--zqcb-handtop, 16px) !important;
  /* 盤面が見えるよう、暗幕をうすく */
  background:rgba(15,40,70,.28) !important;
}
.zqcb-ready #handModal .hand-box{
  max-width:min(1010px, 96vw) !important;
  width:min(1010px, 96vw) !important;
  overflow-x:visible !important;
  max-height:none !important;                      /* 中で切らない */
}
.zqcb-ready #handcards{
  grid-template-columns:repeat(5, var(--zqcb-sz)) !important;
  gap:14px !important;
}

/* 表の文字も、カードの大きさに合わせて上限を上げる
   （stage4.css は clamp の上限が 100px 前提のため、大きくしても伸びない） */
.zqcb-ready #handcards .face .fh{
  font-size:calc(var(--zqcb-sz)*.064) !important;
  height:auto !important; padding:calc(var(--zqcb-sz)*.036) 3px !important;
}
.zqcb-ready #handcards .face .ft{
  font-size:calc(var(--zqcb-sz)*.098) !important;
  height:auto !important; margin-top:calc(var(--zqcb-sz)*.03) !important;
}
.zqcb-ready #handcards .face .ft.ftL{ font-size:calc(var(--zqcb-sz)*.084) !important; }
.zqcb-ready #handcards .face .ft.ftXL{ font-size:calc(var(--zqcb-sz)*.075) !important; }
.zqcb-ready #handcards .face .fd{ font-size:calc(var(--zqcb-sz)*.058) !important; }
.zqcb-ready #handcards .face .fd b{
  width:calc(var(--zqcb-sz)*.11) !important; height:calc(var(--zqcb-sz)*.11) !important;
  font-size:calc(var(--zqcb-sz)*.07) !important;
}

/* ==================================================================
 * ③ その場で裏返る
 * ================================================================ */
.zqcb-flip{
  position:relative; width:100%; aspect-ratio:1/1;
  transform-style:preserve-3d;
  transition:transform .42s cubic-bezier(.2,.85,.3,1.05);
}
.zqcb-flip > .face,
.zqcb-flip > .zqcb-rear{
  position:absolute !important; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.zqcb-flip > .zqcb-rear{ transform:rotateY(180deg); }

/* ★裏返っているあいだは、読める大きさまで拡大する。
   倍率は JS が幅を測って --zqcb-scale に入れる（180pxなら1.0）。 */
.zqcb-flip.zqcb-on{
  transform:rotateY(180deg) scale(var(--zqcb-scale,1));
  z-index:40;
}
.handcard:has(.zqcb-on), .pz:has(.zqcb-on){ z-index:40; }

/* ★置いたカードの重ね方を保つ。
   stage4.css の `.pz .face + .face{margin-top:-64%}` は、
   くるんだことで効かなくなる。同じ間隔をここで足し直す。 */
.pz .zqcb-flip + .zqcb-flip{ margin-top:-64%; }

/* ★置いたときの元の動き（cardin＝ぽんと出る）は止める（v1.17.0・Ryu指示）。
   代わりに、手札から置き場へ**小さくなりながら飛ぶ**動きを JS で出す。
   2つ重なると、飛んできて、さらにぽんと跳ねて見えてうるさかった。 */
.pz .zqcb-flip{ animation:none !important; }
.zqcb-ready .pz .face{ animation:none !important; }

/* --- 裏面の中身：企業名／写真／一言（実物カードと同じ並び） --- */
.zqcb-rear{
  background:#fff; border:2px solid var(--cc,#00b050); border-radius:2px;
  overflow:hidden; display:flex; flex-direction:column; cursor:pointer;
  container-type:inline-size;
}
.zqcb-rear .zqcb-rh{
  background:var(--cc,#00b050); color:#fff; font-weight:700; text-align:center;
  line-height:1; font-size:clamp(7px,6.4cqw,12px); padding:clamp(3px,3.6cqw,7px) 3px;
}
.zqcb-rear .zqcb-co{
  font-weight:900; color:#22303f; text-align:center; line-height:1.2;
  font-size:clamp(10px,8.8cqw,17px); margin:clamp(3px,3.5cqw,7px) 5px clamp(2px,2.5cqw,5px);
}
/* ★写真の下に敷いていた灰色をやめる（v1.17.0・Ryu指示 2026-08-19）。
   これが写真のまわりの「影」に見えていた。白にすれば、写真の白い余白と
   つながって、枠が消える。 */
.zqcb-rear .zqcb-pic{
  flex:1; min-height:0; margin:0 clamp(3px,4.5cqw,9px);
  background:#fff; border-radius:0;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
/* 写真そのものにも影を付けない（親から降りてこないように念のため） */
.zqcb-rear .zqcb-pic img{ box-shadow:none; filter:none; }
.zqcb-rear .zqcb-pic img{ max-width:100%; max-height:100%; display:block; }
.zqcb-rear .zqcb-txt{
  color:#2f4157; font-weight:700; text-align:center; line-height:1.3;
  font-size:clamp(9px,6.8cqw,13px);
  padding:clamp(3px,3.5cqw,7px) 5px clamp(3px,4cqw,8px);
}

/* ==================================================================
 * 「?」バッジ
 * ================================================================ */
.face .zqcb-q, .zqcb-rear .zqcb-q{
  position:absolute; top:2px; right:2px; z-index:6;
  width:17px; height:17px; padding:0; border:none; border-radius:50%;
  background:rgba(20,30,50,.42); color:#fff;
  font-family:inherit; font-weight:800; font-size:11px; line-height:17px;
  cursor:pointer; text-align:center;
}
.zqcb-ready #handcards .zqcb-q{
  width:calc(var(--zqcb-sz)*.13) !important; height:calc(var(--zqcb-sz)*.13) !important;
  font-size:calc(var(--zqcb-sz)*.078) !important;
  line-height:calc(var(--zqcb-sz)*.13) !important;
}
.face .zqcb-q:hover, .zqcb-rear .zqcb-q:hover{ background:var(--cc,#00b050); }
.face .zqcb-q:active, .zqcb-rear .zqcb-q:active{ transform:scale(.92); }

/* 置いたカードには「×（はずす）」が右上に居る。ぶつからないよう左へ。 */
.pz .face .zqcb-q{ right:22px; }

/* ==================================================================
 * せまい画面
 *   5枚×180 + すき間 = 1010px。入らなくなったら列を減らす。
 *   小さくなったぶんは、裏返すときの拡大が効くので読める。
 * ================================================================ */
@media (max-width:1060px){
  .zqcb-ready #handcards{ grid-template-columns:repeat(3, var(--zqcb-sz)) !important; }
}
@media (max-width:700px){
  :root{ --zqcb-sz:150px; }
  .zqcb-ready #handcards{ grid-template-columns:repeat(2, var(--zqcb-sz)) !important; }
  .zqcb-ready #handModal{ padding-top:max(8px, var(--zqcb-handtop, 8px)) !important; }
}
@media (max-width:360px){
  :root{ --zqcb-sz:130px; }
}

/* 動きを減らす設定の人には、裏返るだけ（回転の途中を描かない） */
@media (prefers-reduced-motion:reduce){
  .zqcb-flip{ transition:none; }
}

/* ==================================================================
 * ★画面が低いときに、盤面が上へはみ出して見出しに重なるのを防ぐ
 *   （v1.18.5・Ryu指示「Chromebookでも崩れないか」2026-08-20）
 *
 *   何が起きていたか（実測）
 *     盤面の入れ物（#boardwrap / .you）は flex で、既定は中身を**縦の中央**に置く。
 *     画面が低くて入りきらないと、はみ出しが**上下に均等**に出る。
 *     ＝上へ飛び出して「企業名」「王者の強み」に重なる。
 *
 *   直し方
 *     はみ出しを**下だけ**に出す（上そろえ）。下は .wrap が巻けるので、
 *     読めなくなるのではなく「スクロールすれば見える」状態になる。
 *
 *   実測（14枚すべて置いた、いちばん混んだ状態）
 *     画面690px（Chromebook 1366x768 相当）… 直す前も後も 重なりなし
 *     画面630px … 直す前は★重なる → 直したあと 重なりなし
 *     画面600px … 直す前は★重なる → 直したあと 重なりなし
 *     画面560px … 直す前は★重なる → 直したあと 重なりなし
 * ================================================================ */
/* ★どちらの指定を使うかは、並びの向きで決まる（v1.18.6・2026-08-20）
 *   #boardwrap は**横並び**（flex-direction:row）
 *     → 縦の寄せは align-items。ここは align-items でよい。
 *   .you は**縦並び**（flex-direction:column）
 *     → align-items は「横の寄せ」＝**幅を中身なりに縮める**指定になる。
 *       実際にこれで盤面が幅1237px→168pxに潰れ、7つの置き場が12pxの縦棒になった
 *       （v1.18.5・本番で発生。Ryu報告）。縦の寄せは justify-content が正しい。
 *   ★私は数字（重なりの有無）だけ見て画面を見ずに出した。同じ失敗をしないこと。 */
.zqcb-ready #boardwrap{ align-items:flex-start !important; }
.zqcb-ready .you{ align-items:stretch !important; justify-content:flex-start !important; }