/* ZQ Stage3 Trial — 発表モード v0.8.0
 * 見た目の正本: shared/game/design/trial-show-v3-MOCK.html
 * ★投影用。テーマに潰されないよう templates/show.php 前提。
 */

.zqs-wrap{
  --zqs-bg:#0d1526; --zqs-panel:#fff; --zqs-ink:#141d33; --zqs-sub:#7d8ba3;
  --zqs-blue:#2b6df0; --zqs-gold:#e8951b; --zqs-green:#0e8f5f; --zqs-violet:#6d46d6;
  position:fixed; inset:0; z-index:1;
  display:flex; flex-direction:column;
  background:
    radial-gradient(1100px 520px at 18% -12%, #1b2a4d 0%, rgba(27,42,77,0) 62%),
    radial-gradient(900px 460px at 88% 112%, #2a2440 0%, rgba(42,36,64,0) 60%),
    var(--zqs-bg);
  color:var(--zqs-ink);
  font-family:-apple-system,BlinkMacSystemFont,'Hiragino Sans','Noto Sans JP',sans-serif;
  overflow:hidden; -webkit-font-smoothing:antialiased;
}
.zqs-wrap *{box-sizing:border-box}

/* ================= ヘッダ ================= */
.zqs-hd{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:12px 26px;color:#e8eefb}
.zqs-badge{background:linear-gradient(135deg,#48a8ee,#2b6df0);color:#fff;font-weight:900;font-size:13px;
  letter-spacing:.07em;padding:6px 15px;border-radius:999px;flex:0 0 auto}
.zqs-nick{font-size:24px;font-weight:900;letter-spacing:.03em}
.zqs-at{font-size:13px;opacity:.55}
.zqs-sp{flex:1}
.zqs-count{font-size:14px;font-weight:800;opacity:.7}
.zqs-nav{display:flex;gap:8px}
.zqs-nav button{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);color:#e8eefb;
  border-radius:10px;padding:8px 16px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit}
.zqs-nav button:disabled{opacity:.32;cursor:default}

/* ================= STEP 帯 ================= */
.zqs-steps{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:0 26px 12px;overflow-x:auto}
.zqs-stp{flex:0 0 auto;min-width:78px;border-radius:10px;padding:5px 9px 6px;text-align:center;
  background:rgba(255,255,255,.08);border:1.5px solid transparent}
.zqs-stp i{display:block;font-style:normal;font-size:9.5px;font-weight:900;letter-spacing:.08em;color:#7f93bb}
.zqs-stp span{display:block;font-size:11px;font-weight:800;color:#7f93bb;white-space:nowrap}
.zqs-stp.zqs-stpDone{background:linear-gradient(180deg,#d8eefc,#bfe2f8);border-color:#9ed3f2}
.zqs-stp.zqs-stpDone i{color:#1b7fbf}
.zqs-stp.zqs-stpDone span{color:#0d5b8c}
.zqs-stpCore.zqs-stpDone{background:linear-gradient(180deg,#ffe7bd,#ffd694);border-color:#f0b256}
.zqs-stpCore.zqs-stpDone i{color:#a05f00}
.zqs-stpCore.zqs-stpDone span{color:#7a4600}
.zqs-clear{flex:0 0 auto;margin-left:14px;background:linear-gradient(135deg,#ffd76b,#f0a11e);color:#4a2f00;
  font-weight:900;font-size:15px;letter-spacing:.14em;padding:6px 18px;border-radius:999px;
  box-shadow:0 6px 22px rgba(240,161,30,.45);animation:zqsShine 2.4s ease-in-out infinite}
@keyframes zqsShine{0%,100%{box-shadow:0 6px 22px rgba(240,161,30,.45)}
  50%{box-shadow:0 6px 32px rgba(240,161,30,.75)}}
.zqs-partial{flex:0 0 auto;margin-left:14px;background:rgba(255,255,255,.12);color:#dbe7ff;
  font-weight:800;font-size:12px;padding:6px 14px;border-radius:999px}

/* ================= 本体 ================= */
.zqs-stage{flex:1 1 0;min-height:0;padding:0 26px 22px}
.zqs-paper{position:relative;height:100%;background:var(--zqs-panel);border-radius:20px;padding:18px 22px;
  box-shadow:0 18px 50px rgba(0,0,0,.42);overflow:hidden}
.zqs-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.zqs-body{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0 66px;
  align-content:start;transform-origin:top left}
.zqs-col{min-width:0;display:flex;flex-direction:column;gap:10px}
.zqs-colHd{font-size:11px;font-weight:900;letter-spacing:.12em;color:#9fb0c6;margin-bottom:1px}

/* ================= カード ================= */
.zqs-c{border:1.5px solid #dfe7f3;background:#fff;border-radius:11px;padding:8px 14px}
.zqs-c .zqs-lb{font-size:10px;font-weight:900;letter-spacing:.1em;color:var(--zqs-blue)}
.zqs-c .zqs-tx{font-size:15px;line-height:1.6;margin-top:2px;white-space:pre-wrap;word-break:break-word}
.zqs-r2{display:grid;grid-template-columns:1fr 1fr;gap:9px}

/* ★モヤモヤ＝出発点。本質的課題と対になるよう大きく */
.zqs-moya{border:2px solid #c3aef3;background:linear-gradient(180deg,#fbf9ff,#f6f1ff);
  border-radius:14px;padding:11px 18px;box-shadow:0 5px 20px rgba(109,70,214,.14)}
.zqs-moya .zqs-lb{color:var(--zqs-violet);font-size:11px}
.zqs-moya .zqs-tx{font-size:21px;font-weight:800;line-height:1.45;margin-top:3px;color:#2b1a5c}

.zqs-why{border-color:#f0dcaa;background:#fffdf7}
.zqs-why .zqs-lb{color:#a56b00}
.zqs-why .zqs-tx{font-size:14px}
.zqs-w2{margin-left:30px}
.zqs-w3{margin-left:60px}

/* ★本質的課題＝到達点 */
.zqs-core{border:2px solid var(--zqs-gold);background:linear-gradient(180deg,#fffaf0,#fff2dc);
  border-radius:14px;padding:12px 18px;box-shadow:0 6px 26px rgba(232,149,27,.22)}
.zqs-core .zqs-lb{color:#a05f00;font-size:11px}
.zqs-core .zqs-tx{font-size:21px;font-weight:900;line-height:1.45;margin-top:3px}

.zqs-reason{border:0;background:transparent;padding:3px 18px 0}
.zqs-reason .zqs-lb{color:#a9b5c7;font-size:9.5px}
.zqs-reason .zqs-tx{font-size:12.5px;color:#5c6b82}

/* ★ビジネス名 */
.zqs-biz{border:2px solid #7fd9b0;background:linear-gradient(180deg,#f2fffa,#eafff5);
  border-radius:14px;padding:10px 18px;box-shadow:0 5px 20px rgba(14,143,95,.16)}
.zqs-biz .zqs-lb{color:#0b7a51;font-size:11px}
.zqs-biz .zqs-tx{font-size:23px;font-weight:900;line-height:1.35;margin-top:2px;color:#0a3d2b}

.zqs-sol{border-color:#a9e5c6;background:#f7fffb}
.zqs-sol .zqs-lb{color:var(--zqs-green)}
.zqs-tri{border-color:#a9e5c6}
.zqs-tri .zqs-lb{color:var(--zqs-green)}

/* ================= ★総評（右下・AoI 入り） ================= */
.zqs-fb{margin-top:auto;display:flex;gap:14px;align-items:flex-start;
  background:linear-gradient(180deg,#fffaf1,#fff);border:2px solid #eedcb6;border-radius:16px;
  padding:14px 16px;box-shadow:0 8px 26px rgba(232,149,27,.16)}
.zqs-fbAoi{flex:0 0 auto;width:118px}
.zqs-l2d{position:relative;width:118px;height:166px;border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,#fff6e6 0%,#fffdf8 70%,#fff 100%)}
.zqs-l2d canvas{position:absolute;inset:0}
/* ★本物の立ち絵（静止画）。縦長なので上（顔）を優先して切り取る */
.zqs-aoiImg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 0;display:block}
/* ★動く立ち絵（まばたき・呼吸）。静止画と同じ枠にぴたりと収める */
.zqs-aoiLive{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;overflow:hidden}
.zqs-aoiLive svg{width:100%;height:100%;display:block}
/* まばたきで目が潰れないようにする（他所のルールに巻き込まれない自衛） */
.zqs-aoiLive #hp-eye-l,.zqs-aoiLive #hp-eye-r{transform:none !important}
.zqs-fallback{position:absolute;inset:0;display:grid;place-items:center}
.zqs-fbAoi svg{width:88px;height:auto;display:block}
/* ★「AoI」の字は絵のすぐ下に（Ryu指示） */
.zqs-fbAoi b{display:block;text-align:center;font-size:11px;color:#a05f00;margin-top:3px;letter-spacing:.08em}
.zqs-fbBody{min-width:0;flex:1}
.zqs-fbHd{display:flex;align-items:center;gap:8px;margin-bottom:5px;flex-wrap:wrap}
.zqs-fbHd .zqs-tag{font-size:10px;font-weight:900;letter-spacing:.1em;color:#4a2f00;
  background:linear-gradient(135deg,#ffc457,#e8951b);padding:3px 10px;border-radius:999px}
.zqs-fbHd .zqs-sub{font-size:10.5px;color:var(--zqs-sub)}
.zqs-fb p{margin:0;font-size:14.5px;line-height:1.85;white-space:pre-wrap}

/* ================= 一覧 ================= */
.zqs-gal{flex:1 1 0;min-height:0;overflow:auto;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:14px;padding:6px 26px 26px;align-content:start}
.zqs-tileWrap{position:relative}
.zqs-tile{width:100%;text-align:left;border:0;border-radius:16px;background:#fff;cursor:pointer;
  padding:16px 18px;font-family:inherit;color:var(--zqs-ink);
  box-shadow:0 10px 28px rgba(0,0,0,.32);transition:transform .2s, box-shadow .2s}
.zqs-tile:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.42)}
.zqs-tnick{font-size:13px;font-weight:900;color:var(--zqs-blue);margin-bottom:6px}
.zqs-tcore{font-size:16px;font-weight:900;line-height:1.5}
.zqs-tmoya{font-size:11.5px;color:var(--zqs-sub);line-height:1.6;margin-top:8px}

/* ★削除（ゴミ箱へ移す）。運営だけに出る */
.zqs-del{position:absolute;top:9px;right:9px;border:1.5px solid #f3c4c4;background:#fff;color:#c0392b;
  border-radius:9px;padding:4px 10px;font-size:11px;font-weight:900;font-family:inherit;cursor:pointer;
  opacity:0;transition:opacity .2s, background .2s}
.zqs-tileWrap:hover .zqs-del,.zqs-del:focus{opacity:1}
.zqs-del:hover{background:#fff2f0}
.zqs-del:disabled{opacity:1;color:#b9bfc9;border-color:#e2e8f2;cursor:default}

.zqs-empty{margin:60px auto;max-width:640px;text-align:center;color:#c3cee4;font-size:15px;line-height:1.9}

@media (max-width:1180px){
  .zqs-steps{padding:0 20px 10px;gap:4px}
  .zqs-stp{min-width:62px;padding:4px 6px 5px}
  .zqs-stp span{font-size:10px}
  .zqs-stage{padding:0 18px 16px}
  .zqs-body{gap:0 44px}
}
/* ================= ★スマホ =================
 * 投影用の「画面いっぱいに縮める」をやめ、普通に上下へスクロールさせる。
 * 縮小したままだと文字が小さく、しかも枠から出た分が見えなくなる（実測）。 */
@media (max-width:900px){
  .zqs-wrap{overflow-y:auto;-webkit-overflow-scrolling:touch}
  /* ★ヘッダは上に貼りつける。スクロールしても「一覧」「←」が必ず押せる（Ryu実測） */
  .zqs-hd{position:sticky;top:0;z-index:5;padding:9px 12px;gap:8px;flex-wrap:wrap;
    background:rgba(13,21,38,.94);backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,.10)}
  .zqs-hd .zqs-nick{font-size:18px}
  .zqs-hd .zqs-at{font-size:11px}
  .zqs-sp{display:none}
  .zqs-count{margin-left:auto;font-size:12px}
  .zqs-nav{width:100%;display:flex;gap:8px}
  .zqs-nav button{flex:1;padding:10px 8px;font-size:14px}
  .zqs-steps{padding:0 14px 10px}
  .zqs-stage{flex:0 0 auto;padding:0 12px 20px}
  .zqs-paper{height:auto;padding:14px 14px 18px;border-radius:16px;overflow:visible}
  .zqs-links{display:none}                     /* 1列では線が重なって読みにくい */
  .zqs-body{grid-template-columns:1fr;gap:16px;
    transform:none!important;width:100%!important}
  .zqs-col{gap:9px}
  .zqs-stp span{display:none}
  .zqs-w2{margin-left:16px}
  .zqs-w3{margin-left:32px}
  .zqs-del{opacity:1}
  .zqs-moya .zqs-tx,.zqs-core .zqs-tx{font-size:19px}
  .zqs-biz .zqs-tx{font-size:21px}
  .zqs-fb{margin-top:6px;flex-direction:column;align-items:center;text-align:left}
  .zqs-fbAoi{width:96px}
  .zqs-l2d{width:96px;height:118px}
  .zqs-fbAoi svg{width:82px}
  .zqs-gal{padding:6px 14px 24px}
}

/* ★DEMO の印（1.3.0）。体験会のあとに自由に試した回は、こう分かるようにする */
.zqs-demo{display:inline-block;font-style:normal;font-size:9.5px;font-weight:900;letter-spacing:.1em;
  color:#fff;background:#e08b1f;border-radius:5px;padding:2px 7px;margin-left:7px;vertical-align:1px}
.zqs-demoBig{font-size:10px;padding:3px 9px;margin-left:2px}

/* ================= PDFで保存（1.3.1） =================
   ★外部の部品は使わず、ブラウザの印刷でPDFにする。
     日本語がそのまま出る／通信が増えない／どの端末でも同じ手順。 */
.zqs-nav .zqs-pdf{background:#2563eb;color:#fff;border-color:#2563eb;font-weight:900}
.zqs-nav .zqs-pdf:hover{background:#1746b8;border-color:#1746b8;color:#fff}

@media print{
  /* 画面のまわりを消して、シートだけをA4に載せる */
  #wpadminbar,.zqs-hd,.zqs-nav,.zqs-del,.zqs-steps{display:none!important}
  html,body{background:#fff!important;height:auto!important;overflow:visible!important}
  body>*:not(#zq-trial-show){display:none!important}
  #zq-trial-show{position:static!important;display:block!important}
  .zqs-wrap{height:auto!important;min-height:0!important;overflow:visible!important;
    background:#fff!important;padding:0!important;display:block!important}
  .zqs-stage{height:auto!important;overflow:visible!important;padding:0!important;display:block!important}
  .zqs-paper{transform:none!important;width:auto!important;height:auto!important;
    box-shadow:none!important;border:none!important;margin:0!important;padding:8mm!important}
  .zqs-body{display:grid!important;grid-template-columns:1fr 1fr!important;gap:0 8mm!important;
    /* ★画面用の縮小が残ると紙幅を超える。JS が紙用に計算し直すので、ここでは邪魔しない */
    transform-origin:top left!important}
  .zqs-card,.zqs-col{break-inside:avoid;page-break-inside:avoid}
  .zqs-links{display:none!important}          /* つながりの線は紙では追えないので省く */
  .zqs-l2d,.zqs-fallback{display:none!important}
  .zqs-next{display:none!important}          /* 紙には「次へ」ボタンを出さない */
  @page{size:A4 landscape;margin:8mm}

  /* ★A4横「1枚」に必ず収める（Ryu指摘 2026-08-15＝2ページに割れて読めなかった）
     文字と余白を紙用に詰め、途中で切れないようにする。 */
  #zq-trial-show{ font-size:9.2pt!important; line-height:1.45!important; }
  .zqs-paper{ padding:5mm!important; }
  .zqs-body{ gap:0 6mm!important; align-items:start!important; }
  .zqs-card{ margin:0 0 2.4mm!important; padding:2.2mm 2.6mm!important;
             border-radius:2mm!important; box-shadow:none!important; }
  .zqs-lb,.zqs-tag{ font-size:7.4pt!important; margin-bottom:.6mm!important; }
  .zqs-moya,.zqs-core,.zqs-biz{ font-size:11pt!important; line-height:1.35!important; }
  .zqs-col{ min-width:0!important; }
  /* 総評は紙では小さめに。ここが伸びて2枚目に落ちていた */
  .zqs-fb{ margin-top:2.4mm!important; }
  .zqs-fbBody{ font-size:8.4pt!important; line-height:1.4!important; }
  .zqs-fbAoi{ display:none!important; }        /* 紙では絵は省いて本文を優先 */
  /* ★中身が多いときだけ、さらに一段小さくして1枚に押し込む */
  .zqs-paper.zqs-long{ font-size:8.4pt!important; }
  .zqs-paper.zqs-long .zqs-fbBody{ font-size:7.6pt!important; }
  /* 紙は1ページで終わらせる＝2枚目を作らない */
  #zq-trial-show, .zqs-wrap, .zqs-stage, .zqs-paper{ page-break-after:avoid!important; }

  /* ★紙の見出し（1.6.18・Ryu指示 2026-08-15「チーム名、メンバー、日時も入れて」）
     画面のヘッダは印刷では消しているので、紙には紙用の見出しを1本だけ置く。
     ＝紙だけ手元に残ったとき「どのチームの・誰の・いつのシートか」が分かる。 */
  .zqs-phd{
    display:flex!important; align-items:flex-end; justify-content:space-between; gap:6mm;
    border-bottom:.6mm solid #e0b46a; padding-bottom:1.6mm; margin-bottom:2.6mm;
  }
  .zqs-phdL{ min-width:0; }
  .zqs-phdTeam{
    font-size:12.5pt; font-weight:900; color:#8a4b00; margin-right:3mm;
    letter-spacing:.02em;
  }
  .zqs-phdTeam::before{ content:'チーム '; font-size:7.6pt; font-weight:700; color:#b58a4a; }
  .zqs-phdMe{ font-size:12.5pt; font-weight:900; color:#1c2b3a; }
  .zqs-phdMe::after{ content:' さん'; font-size:8pt; font-weight:700; color:#6b7a8c; }
  .zqs-phdTag{
    font-size:7.6pt; font-weight:800; color:#fff; background:#c98a2a;
    border-radius:1.4mm; padding:.5mm 1.8mm; margin-left:2.5mm; vertical-align:2px;
  }
  .zqs-phdMem{ font-size:7.8pt; color:#5d6b7c; margin-top:.8mm; }
  .zqs-phdMem b{ color:#1c2b3a; }
  .zqs-phdR{ font-size:8.6pt; color:#5d6b7c; white-space:nowrap; text-align:right; }
  .zqs-phdDemo{ font-weight:900; color:#e08b1f; }

  /* ★紙いっぱいに使う（1.6.18）。
     JS が「印刷と同じCSSで測った高さ」から拡大率を決めるので、
     ここでは字を小さくしすぎない。読みやすさを優先する。 */
  #zq-trial-show{ font-size:10pt!important; }
  .zqs-fbBody{ font-size:9pt!important; }
  .zqs-paper.zqs-long{ font-size:9pt!important; }
  .zqs-paper.zqs-long .zqs-fbBody{ font-size:8.2pt!important; }
  /* 左右の高さを揃える＝どちらかだけ長くて余白が偏るのを防ぐ */
  .zqs-body{ align-content:start!important; }
}

/* 画面では紙用の見出しを出さない（印刷のときだけ出る） */
.zqs-phd{ display:none; }
/* 印刷の直前だけ付く目印（余計な物を隠すため） */
body.zqs-printing .zqs-nav{visibility:hidden}

/* ★「アイデアをカタチにする」＝次のSTAGEへ（Ryu指示 2026-08-15）
   一覧でも自分のシートでも、右下にいつも出しておく。 */
.zqs-next{
  position:fixed; right:20px; bottom:20px; z-index:60;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:14px 22px; border-radius:14px; text-decoration:none;
  background:linear-gradient(135deg,#ffb43d,#ff8a00); color:#fff;
  font-weight:900; font-size:15px; line-height:1.3;
  box-shadow:0 8px 22px rgba(255,138,0,.45);
}
.zqs-next:hover{ filter:brightness(1.05); }
.zqs-next i{ font-style:normal; font-size:10.5px; font-weight:700; opacity:.92; }
@media (max-width:900px){
  .zqs-next{ right:12px; bottom:12px; padding:12px 16px; font-size:13.5px; }
}
body.zqs-printing .zqs-next{ display:none!important; }   /* 紙には出さない */

/* ★管理バーの下に潜り込まないようにする（1.4.2）。理由は trial.css と同じ */
body.admin-bar .zqs-wrap{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .zqs-wrap{top:46px}
}

/* 体験会のシート（DEMOではないもの）の印 */
.zqs-live{display:inline-block;font-style:normal;font-size:9.5px;font-weight:900;letter-spacing:.1em;
  color:#fff;background:#2b6df0;border-radius:5px;padding:2px 7px;margin-left:7px;vertical-align:1px}