@charset "UTF-8";
/* /guide (ワイリフPocket の使い方の LP、 2026-10-21 curator 承認の案 B) の CSS。 読むのは web/guide.html と EN ミラーだけ。
   本文は scripts/4s_build_guide_page.py が焼き、 部品と動きは web/components/guide.js。
   クラス名はすべて wrp-gd- で始める (共有 CSS の名前と衝突させない。 試作で冒頭の .grid と選ぶ画面の一覧の .grid が
   同じ名前で、 一覧の overscroll-behavior:contain が冒頭にも効いてスクロールが止まった)。 状態は is-* を wrp-gd- の
   クラスと組み合わせた時だけ効かせる。 カードの見た目はマイコレクションの大判カード (shared-ui.css の WRP_CARD_VIEW 節の
   .wrp-card-front / -art / -foil / -sheen / -scrim / -text と段の t1〜t3) をそのまま使い、 大きさと位置だけここで決める。

   スマホのスクロールのカクつき対策 (試作で出ていた):
     - backdrop-filter のぼかしを使わない (試作は板 10 枚以上 + 選ぶ画面 + 下の帯)。 板の地は不透明に近い色にした
     - 画面に固定した方眼の層 (position:fixed + mask-image) をやめ、 方眼は .wrp-gd の背景として一緒に流す
     - animation-timeline: view() をやめ、 guide.js の IntersectionObserver が見えた時に 1 度だけ .is-in を付ける
     - カードの光は画面外 (.wrp-gd-bonus.is-off) では止め、 後ろに散らしたカードは常に止める
   body の背景はページの外枠 (guide.html の inline) のまま外さない (外すと半透明の節の色が濁った)。 */

.wrp-gd {
  --gd-ink: #f4f1e8; --gd-text: #dcefe4; --gd-body: #a8b9af; --gd-mute: #7f978a;
  --gd-line: rgb(142 255 184 / .09); --gd-line2: rgb(142 255 184 / .22); --gd-rim: rgb(142 255 184 / .4);
  --gd-glass: rgb(12 28 19 / .94); --gd-act: #8effb8; --gd-gold: #e9cd76; --gd-down: #ff9a8f;
  --gd-f-num: "Chakra Petch", "Noto Sans JP", sans-serif;
  --gd-f-tag: "WRP Display", "Chakra Petch", sans-serif;
  --gd-f-mono: "JetBrains Mono", ui-monospace, monospace;
  position: relative; color: var(--gd-text); font-size: var(--sc-fs-title); line-height: 1.7; overflow-x: clip;
  /* 方眼: ページと一緒に流れる 1 枚の層 (節ごとに置くと継ぎ目で硬い横線が出た) */
  background-image: linear-gradient(var(--gd-line) 1px, transparent 1px), linear-gradient(90deg, var(--gd-line) 1px, transparent 1px);
  background-size: 64px 64px;
}
.wrp-gd *, .wrp-gd-sheet * { box-sizing: border-box; }
.wrp-gd [hidden], .wrp-gd-sheet [hidden], .wrp-gd-sheet[hidden] { display: none !important; }
.wrp-gd h1, .wrp-gd h2, .wrp-gd h3, .wrp-gd p { margin: 0; }
.wrp-gd h1, .wrp-gd h2 { color: var(--gd-ink); font-weight: 900; letter-spacing: -.02em; line-height: 1.14; text-wrap: balance; }
.wrp-gd img { max-width: 100%; display: block; }
.wrp-gd a:focus-visible, .wrp-gd button:focus-visible, .wrp-gd-sheet button:focus-visible { outline: 2px solid var(--gd-act); outline-offset: 3px; }
.wrp-gd-nw { display: inline-block; }
.wrp-gd-num { font-family: var(--gd-f-num); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.wrp-gd-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.wrp-gd-in { max-width: 1200px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.wrp-gd-btn { display: inline-flex; align-items: center; min-height: 56px; font: 700 17px "Noto Sans JP", sans-serif; padding: 0 34px; border-radius: 999px; background: var(--gd-act); color: #03100a; text-decoration: none; box-shadow: 0 10px 34px rgb(142 255 184 / .28); }
.wrp-gd-go { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 700; font-size: var(--sc-fs-title); color: var(--gd-act); text-decoration: none; }
.wrp-gd-go::after { content: "\2192"; transition: transform .2s; }
.wrp-gd-go:hover::after { transform: translateX(4px); }
.wrp-gd-tag { font: 600 var(--sc-fs-body) var(--gd-f-tag); letter-spacing: .32em; color: var(--gd-mute); text-transform: uppercase; }
.wrp-gd-lead { font-size: clamp(16px, 1.6vw, 18px); color: var(--gd-body); }

/* 机の地: 上から差す光 */
.wrp-gd-desk { position: relative; isolation: isolate; }
.wrp-gd-desk::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 40% at 50% 0%, rgb(142 255 184 / .08), transparent 70%); }

/* 板: 黒い影より明るい縁で浮かせる (ぼかしは使わない) */
.wrp-gd-pane { background: var(--gd-glass); border: 1px solid var(--gd-line2); border-radius: 18px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 20px 50px rgb(0 0 0 / .35); }
.wrp-gd-ph { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--gd-line); font-size: var(--sc-fs-body); color: var(--gd-mute); flex-wrap: wrap; row-gap: 2px; }
.wrp-gd-ph > * { white-space: nowrap; }
.wrp-gd-ph b { color: var(--gd-text); font-weight: 700; font-size: var(--sc-fs-body-md); }
.wrp-gd-ph .wrp-gd-src { margin-left: auto; font: var(--sc-fs-body-sm) "Noto Sans JP", sans-serif; color: var(--gd-mute); }
.wrp-gd-pb { padding: 14px 16px; }
.wrp-gd-plbl { font: 600 var(--sc-fs-body-sm) var(--gd-f-tag); letter-spacing: .24em; color: var(--gd-mute); margin-bottom: 8px; }

/* アイテムのアイコン (icon-tip.js の小窓)。 shared-ui.css の .scope-app .wrp-itip の余白を外す */
.wrp-gd .wrp-itip.wrp-gd-ic { margin: 0; padding: 0; border-radius: 8px; background: none; }
.wrp-gd .wrp-gd-ic img { width: 100%; height: 100%; border-radius: inherit; }

/* 冒頭 */
.wrp-gd-hero { padding-block: clamp(36px, 7vw, 96px) clamp(48px, 7vw, 96px); }
.wrp-gd-hero-in { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 920px), (orientation: landscape), (orientation: portrait) and (min-width: 500px) and (min-height: 800px) { .wrp-gd-hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); } }
.wrp-gd-copy { display: grid; gap: 22px; justify-items: start; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.wrp-gd-copy .wrp-gd-tag { color: var(--gd-act); }
.wrp-gd-hero h1 { font-size: clamp(38px, 4.8vw, 64px); }
.wrp-gd-hero h1 em { font-style: normal; color: var(--gd-act); }
.wrp-gd-hero .wrp-gd-lead { font-size: clamp(17px, 1.7vw, 20px); }
.wrp-gd-stack { position: relative; display: grid; width: 100%; max-width: 560px; justify-self: center; }
@media (min-width: 920px), (orientation: landscape), (orientation: portrait) and (min-width: 500px) and (min-height: 800px) { .wrp-gd-stack { max-width: none; } }
.wrp-gd-stack > * { position: relative; transition: translate .25s ease-out; }
/* 冒頭の 3 枚の板は同じ幅 (2026-10-21 curator 「勝率ランキングだけ横幅が狭いの違和感」)。 幅を変えると板の格が違って見えるので、
   重なりは左右の互い違いのずれ (幅の 8%〜14%) と傾きだけで見せる */
.wrp-gd-p-rank { width: 92%; justify-self: start; z-index: 1; }
.wrp-gd-p-rank li.is-more { display: none; }
.wrp-gd-p-lab { width: 92%; justify-self: end; margin-top: 12px; z-index: 2; box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 0 0 1px var(--gd-rim), 0 0 60px rgb(142 255 184 / .12), 0 30px 60px rgb(0 0 0 / .45); }
.wrp-gd-p-chat { width: 92%; justify-self: start; margin-top: 12px; z-index: 3; }
@media (min-width: 920px), (orientation: landscape), (orientation: portrait) and (min-width: 500px) and (min-height: 800px) {
  /* 板は縦に積み、 次の板は前の板の下の余白 (14px) にだけ掛ける。 試作の絶対配置 (研究室を top:156px) では
     研究室がランキングの 3〜4 位の勝率を、 チャットが 「4 枠目を試す」 の差分の文を覆っていた (2026-10-21 main loop の撮影)。
     左右に互い違いに寄せ、 少し傾けて重ねた構図は残す */
  .wrp-gd-p-rank { width: min(440px, 86%); justify-self: start; transform: rotate(-2deg); }
  .wrp-gd-p-rank li.is-more { display: grid; }
  .wrp-gd-p-lab { width: min(440px, 86%); justify-self: end; margin-top: -10px; transform: rotate(1deg); }
  .wrp-gd-p-chat { width: min(440px, 86%); justify-self: start; margin-top: -10px; transform: rotate(-1deg); }
  .wrp-gd-p-chat .wrp-gd-aib { display: none; }
}
/* 縦向きで広い組み方になる幅 (iPad 縦 820x1180 等) は冒頭だけ 1 列 (言葉 → 板)。 2 列だと言葉の列が狭く、 板が縦に深く重なった */
@media (orientation: portrait) and (max-width: 919px) {
  .wrp-gd-hero-in { grid-template-columns: minmax(0, 1fr); }
  .wrp-gd-stack { max-width: 640px; }
}
.wrp-gd-rk { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wrp-gd-rk li { position: relative; display: grid; grid-template-columns: 1.4em 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: var(--sc-fs-body-md); }
.wrp-gd-rk li img { width: 30px; height: 30px; border-radius: 8px; }
.wrp-gd-rkn { color: var(--gd-mute); font-size: var(--sc-fs-body); }
.wrp-gd-wr { color: var(--gd-text); }
.wrp-gd-rk li.is-gap { margin-top: 12px; }
.wrp-gd-rk li.is-gap::before { content: "\22EE"; position: absolute; left: 4px; top: -16px; color: var(--gd-mute); font-size: var(--sc-fs-body-sm); }
.wrp-gd-rk li.is-me { background: rgb(142 255 184 / .1); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--gd-line2); margin: 0 -6px; padding: 2px 6px; }
.wrp-gd-p-lab .wrp-gd-row { display: flex; gap: 6px; }
.wrp-gd-p-lab .wrp-gd-row > .wrp-gd-ic, .wrp-gd-p-lab .wrp-gd-slot { width: calc((100% - 30px) / 6); min-width: 0; aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--gd-line2); }
.wrp-gd-slot { border-style: dashed !important; }
.wrp-gd-slot.is-on { border-style: solid !important; border-color: var(--gd-act) !important; box-shadow: 0 0 14px rgb(142 255 184 / .35); overflow: hidden; }
.wrp-gd-slot.is-on img { width: 100%; height: 100%; }
.wrp-gd-cp { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; }
.wrp-gd-cp b { font-size: clamp(36px, 5vw, 48px); color: var(--gd-gold); line-height: 1; text-shadow: 0 0 30px rgb(233 205 118 / .3); }
.wrp-gd-cp > span { font-size: var(--sc-fs-body-sm); color: var(--gd-mute); }
.wrp-gd-bars { display: grid; gap: 7px; margin-top: 12px; }
.wrp-gd-bars div { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) 4.6em; gap: 8px; align-items: center; font-size: var(--sc-fs-body-sm); color: var(--gd-mute); }
.wrp-gd-bars i { height: 6px; border-radius: 3px; background: rgb(142 255 184 / .1); position: relative; overflow: hidden; }
.wrp-gd-bars i::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: 3px; background: linear-gradient(90deg, var(--gd-act), #d9ffe9); transition: width .9s ease-out .3s; }
.wrp-gd-bars b { text-align: right; color: var(--gd-text); font-size: var(--sc-fs-body-sm); }
.wrp-gd-me { font: var(--sc-fs-body)/1.75 var(--gd-f-mono); color: #d8f5e5; background: rgb(142 255 184 / .08); border: 1px solid var(--gd-line2); border-radius: 14px 14px 4px 14px; padding: 12px 14px; }
.wrp-gd-me mark { background: none; color: var(--gd-gold); }
.wrp-gd-aib { margin-top: 10px; display: grid; gap: 7px; width: 60%; padding: 10px 12px; border: 1px dashed var(--gd-line2); border-radius: 14px 14px 14px 4px; }
.wrp-gd-aib i { height: 6px; border-radius: 4px; background: rgb(142 255 184 / .14); }
.wrp-gd-aib i:nth-child(2) { width: 70%; }

/* 選ぶ (冒頭) */
.wrp-gd-pick { display: grid; gap: 12px; width: 100%; min-width: 0; max-width: 100%; padding: 16px; border-radius: 18px; border: 1px solid var(--gd-line2); background: rgb(14 32 22 / .6); }
.wrp-gd-pick > p:first-child { font-weight: 800; color: var(--gd-ink); font-size: clamp(18px, 1.8vw, 20px); line-height: 1.4; }
.wrp-gd-pick > p:first-child small { display: block; font-weight: 400; color: var(--gd-body); font-size: var(--sc-fs-body-md); margin-top: 4px; line-height: 1.6; }
.wrp-gd-pickrow { display: flex; gap: 6px; min-width: 0; align-items: flex-start; }
.wrp-gd-chips { display: flex; gap: 6px; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.wrp-gd-chips::-webkit-scrollbar { display: none; }
.wrp-gd-pickrow button { flex: none; display: grid; justify-items: center; align-content: start; gap: 4px; width: 74px; padding: 4px 0; border: 0; border-radius: 12px; background: none; color: var(--gd-text); font: 600 var(--sc-fs-body-sm)/1.3 "Noto Sans JP", sans-serif; cursor: pointer; }
.wrp-gd-pickrow button > span:last-child { max-width: 74px; overflow: hidden; text-align: center; word-break: keep-all; overflow-wrap: normal; letter-spacing: -.02em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.wrp-gd-pickrow button img, .wrp-gd-grid4 { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--gd-line2); transition: border-color .2s, box-shadow .2s, transform .15s; }
.wrp-gd-pickrow button:hover img { border-color: var(--gd-rim); }
.wrp-gd-pickrow button[aria-pressed="true"] { color: var(--gd-ink); }
.wrp-gd-pickrow button[aria-pressed="true"] img { border-color: var(--gd-act); box-shadow: 0 0 0 2px var(--gd-act), 0 0 18px rgb(142 255 184 / .45); }
.wrp-gd-pickrow button:active img { transform: scale(.94); }
.wrp-gd-pickrow .wrp-gd-all { color: var(--gd-act); padding: 4px 8px 4px 0; border-right: 1px solid var(--gd-line); border-radius: 0; width: auto; min-width: 70px; }
.wrp-gd-pickrow .wrp-gd-all > span:last-child { display: block; white-space: nowrap; max-width: none; }
.wrp-gd-grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 12px; border: 1px dashed var(--gd-act); background: rgb(142 255 184 / .08); }
.wrp-gd-grid4 i { border-radius: 3px; background: rgb(142 255 184 / .55); }
@media (min-width: 920px) and (min-height: 601px), (orientation: portrait) and (min-width: 500px) and (min-height: 800px) {
  .wrp-gd-pickrow { flex-direction: column; align-items: stretch; gap: 8px; }
  .wrp-gd-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px 4px; overflow: visible; }
  .wrp-gd-chips button { width: auto; }
  .wrp-gd-chips button > span:last-child { max-width: 100%; }
  .wrp-gd-pickrow .wrp-gd-all { order: 2; display: flex; align-items: center; gap: 10px; width: fit-content; min-height: 44px; padding: 4px 14px 4px 6px; border: 1px solid var(--gd-line2); border-radius: 999px; }
  .wrp-gd-pickrow .wrp-gd-all .wrp-gd-grid4 { width: 32px; height: 32px; padding: 8px; gap: 2px; }
}
.wrp-gd-toast { display: flex; align-items: center; gap: 8px; font-size: var(--sc-fs-body-md); color: var(--gd-body); min-height: 40px; }
.wrp-gd-tp svg { width: 44px; height: auto; display: block; }
.wrp-gd-toast.is-pop [data-r="toast"] { color: var(--gd-ink); }
.wrp-gd [data-r] { transition: opacity .25s; }
.wrp-gd.is-swap [data-r] { opacity: 0; }

/* 4 枠目を試す */
.wrp-gd-try { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--gd-line); }
.wrp-gd-try > p { font-size: var(--sc-fs-body); font-weight: 700; color: var(--gd-text); }
.wrp-gd-try > p small { display: block; font-weight: 400; color: var(--gd-mute); font-size: var(--sc-fs-body-sm); }
.wrp-gd-try-b { display: flex; align-items: flex-start; gap: 12px; margin-top: 8px; }
.wrp-gd-tr { display: grid; justify-items: center; gap: 2px; }
.wrp-gd-tr small { font-size: var(--sc-fs-body); color: var(--gd-text); }
.wrp-gd-try-b button { width: 44px; height: 44px; padding: 0; border-radius: 10px; border: 1px solid var(--gd-line2); background: none; cursor: pointer; overflow: hidden; transition: transform .15s, box-shadow .2s; }
.wrp-gd-try-b button img { width: 100%; height: 100%; }
.wrp-gd-try-b button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--gd-act), 0 0 16px rgb(142 255 184 / .4); }
.wrp-gd-try-b button:active { transform: scale(.94); }
.wrp-gd-delta { margin-top: 8px; min-height: 2.6em; font-size: var(--sc-fs-body); color: var(--gd-mute); line-height: 1.5; }
.wrp-gd-delta b { color: var(--gd-ink); font-family: var(--gd-f-num); }

/* ポックの一言 */
.wrp-gd-say { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: var(--sc-fs-body-md); color: var(--gd-body); }
.wrp-gd-sp svg { width: 56px; height: auto; display: block; }
.wrp-gd-say > span:last-child { background: var(--gd-glass); border: 1px solid var(--gd-line2); border-radius: 14px 14px 14px 4px; padding: 8px 14px; }

/* 選ぶ画面 (guide.js が body の直下へ移す。 ぼかしは使わない) */
/* 選ぶ画面を開いている間のスクロール止め。 2026-10-21 までは照準 (今の .wrp-gd-reticle) と同じ wrp-gd-lock という名前で、 html に照準の
   transform:scale(1.35) と opacity:0 が当たり、 固定配置の選ぶ画面が画面の外に出ていた */
html.wrp-gd-noscroll { overflow: hidden; }
.wrp-gd-sheet { position: fixed; inset: 0; z-index: 1000; background: rgb(2 6 4 / .82); display: grid; place-items: end center; color: #dcefe4; font-family: "Noto Sans JP", sans-serif; }
@media (min-width: 920px), (orientation: landscape), (orientation: portrait) and (min-width: 500px) and (min-height: 800px) { .wrp-gd-sheet { place-items: center; } }
.wrp-gd-sheet-in { width: min(760px, 100%); max-height: min(86vh, 760px); display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: 12px; background: #0a1710; border: 1px solid rgb(142 255 184 / .22); border-radius: 22px 22px 0 0; padding: 18px max(16px, env(safe-area-inset-left, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-right, 0px)); box-shadow: 0 -20px 60px rgb(0 0 0 / .6); }
@media (min-width: 920px), (orientation: landscape), (orientation: portrait) and (min-width: 500px) and (min-height: 800px) { .wrp-gd-sheet-in { border-radius: 22px; padding: 22px; } }
.wrp-gd-sheet-top { display: flex; align-items: center; }
.wrp-gd-sheet-top h3 { margin: 0; font-size: 18px; color: #f4f1e8; }
.wrp-gd-x { margin-left: auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgb(142 255 184 / .22); background: none; color: #dcefe4; cursor: pointer; }
.wrp-gd-q { display: block; }
.wrp-gd-q input { width: 100%; min-height: 46px; border-radius: 12px; border: 1px solid rgb(142 255 184 / .22); background: rgb(142 255 184 / .05); color: #f4f1e8; font: var(--sc-fs-title) "Noto Sans JP", sans-serif; padding: 0 14px; }
.wrp-gd-q input:focus { outline: 2px solid #8effb8; outline-offset: 1px; }
.wrp-gd-lanes { display: flex; gap: 6px; flex-wrap: wrap; }
.wrp-gd-lanes button { flex: none; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgb(142 255 184 / .22); background: none; color: #a8b9af; font: 600 var(--sc-fs-body) "Noto Sans JP", sans-serif; cursor: pointer; }
.wrp-gd-lanes button[aria-pressed="true"] { background: #8effb8; color: #03100a; border-color: #8effb8; }
.wrp-gd-lanes small { font-size: var(--sc-fs-body-sm); opacity: .7; margin-left: 2px; }
.wrp-gd-pickgrid { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px 6px; align-content: start; padding: 4px 2px; overscroll-behavior: contain; min-height: min(48vh, 420px); }
.wrp-gd-pickgrid button { display: grid; justify-items: center; gap: 4px; padding: 6px 2px; border-radius: 12px; border: 1px solid transparent; background: none; color: #dcefe4; font: 600 var(--sc-fs-body-sm)/1.3 "Noto Sans JP", sans-serif; cursor: pointer; }
.wrp-gd-pickgrid button img { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgb(142 255 184 / .22); }
.wrp-gd-pickgrid button > span { text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
.wrp-gd-pickgrid button:hover img { border-color: #8effb8; }
.wrp-gd-pickgrid button[aria-pressed="true"] { border-color: #8effb8; background: rgb(142 255 184 / .1); }
.wrp-gd-none { margin: 0; text-align: center; color: #7f978a; font-size: var(--sc-fs-body-md); }

/* 照準: 中国メタの 1 行目に合う */
.wrp-gd-reticle { position: absolute; z-index: 3; pointer-events: none; color: var(--gd-act); opacity: 0; transform: scale(1.35); }
.wrp-gd-reticle svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wrp-gd-reticle path { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgb(142 255 184 / .8)); }
.wrp-gd-reticle span { position: absolute; right: 8px; bottom: -11px; line-height: 1.3; transition: opacity .4s; font: 700 var(--sc-fs-body-sm) var(--gd-f-tag); letter-spacing: .24em; background: var(--gd-act); color: #03100a; padding: 2px 8px; border-radius: 4px; }
.wrp-gd-xf:not(.is-wait) .wrp-gd-reticle { opacity: 1; transform: none; transition: opacity .25s, transform .45s cubic-bezier(.2, 1.4, .4, 1), color .6s; }
.wrp-gd-xf.is-settled .wrp-gd-reticle { color: rgb(244 241 232 / .5); }
.wrp-gd-xf.is-settled .wrp-gd-reticle path { filter: none; stroke-width: 1; }
.wrp-gd-xf.is-settled .wrp-gd-reticle span { opacity: 0; }

/* 場面の音量 */
.wrp-gd-scene { position: relative; }
.wrp-gd-scene.is-main { padding-block: clamp(72px, 8vw, 120px); background: radial-gradient(70% 55% at 65% 55%, rgb(24 51 40 / .9) 0%, transparent 70%), linear-gradient(transparent, rgb(11 25 20 / .72) 14%, rgb(11 25 20 / .72) 86%, transparent); }
.wrp-gd-scene.is-sub { padding-block: clamp(56px, 7vw, 96px); background: rgb(8 19 13 / .82); border-block: 1px solid var(--gd-line); }
/* 見出しは横に余白があれば折らない (curator 2026-10-21)。 行の長さの上限は説明文だけに付ける */
.wrp-gd-head { display: grid; gap: 14px; }
.wrp-gd-head > :not(h2) { max-width: 760px; }
.wrp-gd-scene.is-main h2 { font-size: clamp(32px, 4.4vw, 56px); }
.wrp-gd-scene.is-sub h2, .wrp-gd-bonus h2 { font-size: clamp(26px, 3vw, 40px); }
.wrp-gd-scene.is-main .wrp-gd-tag { color: var(--gd-act); padding-bottom: 8px; border-bottom: 1px solid var(--gd-rim); width: fit-content; }
.wrp-gd-scene.is-main .wrp-gd-lead { font-size: clamp(17px, 1.9vw, 21px); }
.wrp-gd-acts { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.wrp-gd-acts.wrp-gd-center { justify-content: center; margin-top: 28px; }

/* 主役: 変換の図 (入力 → 線 → 相談文) */
.wrp-gd-xf { position: relative; display: grid; gap: 16px; margin-top: 32px; grid-template-columns: minmax(0, 1fr); max-width: 640px; }
@media (min-width: 920px), (orientation: landscape), (orientation: portrait) and (min-width: 500px) and (min-height: 800px) { .wrp-gd-xf { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 0 clamp(40px, 7vw, 96px); align-items: center; max-width: none; } }
.wrp-gd-ins { display: grid; gap: 18px; }
.wrp-gd-out { position: relative; z-index: 2; box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 0 0 1px var(--gd-rim), 0 0 80px rgb(142 255 184 / .14), 0 30px 70px rgb(0 0 0 / .45); }
.wrp-gd-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 1; }
.wrp-gd-wires path { fill: none; stroke: var(--gd-act); stroke-width: 1.6; stroke-dasharray: 5 5; opacity: .85; filter: drop-shadow(0 0 6px rgb(142 255 184 / .6)); }
.wrp-gd-wires circle { fill: var(--gd-act); }
.wrp-gd-meta ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wrp-gd-meta li, .wrp-gd-meta .wrp-gd-hd { display: grid; grid-template-columns: minmax(0, 1fr) 3.8em 3.8em; gap: 8px; align-items: center; }
.wrp-gd-meta li { font-size: var(--sc-fs-body-md); padding: 6px 8px; margin: 0 -8px; border-radius: 10px; }
.wrp-gd-meta li[data-src] { background: rgb(142 255 184 / .08); box-shadow: inset 0 0 0 1px var(--gd-line2); margin-bottom: 10px; }
.wrp-gd-ics { display: flex; gap: 5px; }
.wrp-gd-ics > .wrp-gd-ic { width: 36px; height: 36px; border: 1px solid var(--gd-line2); }
.wrp-gd-v { text-align: right; }
.wrp-gd-meta .wrp-gd-hd { font-size: var(--sc-fs-body-sm); color: var(--gd-mute); margin-bottom: 6px; }
.wrp-gd-meta .wrp-gd-hd span:not(:first-child) { text-align: right; }
.wrp-gd-mini { display: flex; align-items: center; gap: 14px; }
.wrp-gd-mini .wrp-gd-row { display: flex; gap: 4px; }
.wrp-gd-mini .wrp-gd-ic { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--gd-line2); }
.wrp-gd-mini .is-new .wrp-gd-ic { box-shadow: 0 0 0 2px var(--gd-act); }
.wrp-gd-mini > b { margin-left: auto; font-size: 30px; color: var(--gd-gold); line-height: 1; }
.wrp-gd-doc { font: var(--sc-fs-body)/1.85 var(--gd-f-mono); color: #cfe9da; line-break: strict; word-break: auto-phrase; overflow-wrap: anywhere; }
.wrp-gd-doc .wrp-gd-h { color: var(--gd-mute); }
.wrp-gd-doc .wrp-gd-t { color: var(--gd-ink); font-weight: 700; }
.wrp-gd-doc .wrp-gd-hl { display: block; margin: 10px -10px; padding: 10px 12px; border-radius: 8px; background: rgb(142 255 184 / .09); border-left: 2px solid var(--gd-act); font-size: var(--sc-fs-title); line-height: 1.75; color: var(--gd-ink); }
.wrp-gd-doc b.is-new { color: var(--gd-act); }
.wrp-gd-doc .wrp-gd-g { color: var(--gd-gold); }
.wrp-gd-make { margin-top: 16px; display: flex; width: fit-content; max-width: 100%; text-decoration: none; align-items: center; min-height: 44px; font: 700 var(--sc-fs-body) "Noto Sans JP", sans-serif; padding: 0 18px; border-radius: 999px; color: var(--gd-act); border: 1px solid var(--gd-rim); background: rgb(142 255 184 / .08); }
.wrp-gd-make:hover { background: rgb(142 255 184 / .16); }
.wrp-gd-smp { display: inline-block; margin-left: 6px; font: 600 var(--sc-fs-body-sm) "Noto Sans JP", sans-serif; letter-spacing: 0; color: var(--gd-body); border: 1px solid var(--gd-line2); border-radius: 4px; padding: 0 6px; vertical-align: 1px; }
.wrp-gd-ph .wrp-gd-smp { margin-left: 0; }
/* スマホは線を引かず、 入力と相談文の間にこの帯を置く */
.wrp-gd-via { display: grid; justify-items: center; gap: 4px; font-size: var(--sc-fs-body); color: var(--gd-act); }
.wrp-gd-via::before { content: ""; width: 1px; height: 28px; background: linear-gradient(transparent, var(--gd-act)); }
.wrp-gd-via::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--gd-act); border-bottom: 1.5px solid var(--gd-act); transform: rotate(45deg); margin-top: -8px; }
@media (min-width: 920px), (orientation: landscape), (orientation: portrait) and (min-width: 500px) and (min-height: 800px) { .wrp-gd-via { display: none; } }
/* 変わった所に 1 度だけ脈 */
@keyframes wrp-gd-fx { 0% { box-shadow: 0 0 0 0 rgb(142 255 184 / .7); } 100% { box-shadow: 0 0 0 14px rgb(142 255 184 / 0); } }
.wrp-gd .is-fx { animation: wrp-gd-fx .9s ease-out; }
.wrp-gd-ai { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.wrp-gd-ai span { font-size: var(--sc-fs-body-sm); color: var(--gd-mute); border: 1px solid var(--gd-line); border-radius: 999px; padding: 3px 12px; }
.wrp-gd-games { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wrp-gd-games button { width: 100%; display: grid; grid-template-columns: 16px 24px 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--gd-line); background: none; color: var(--gd-text); font: var(--sc-fs-body-md) "Noto Sans JP", sans-serif; text-align: left; white-space: nowrap; cursor: pointer; }
.wrp-gd-games button:hover { border-color: var(--gd-line2); }
.wrp-gd-games button[aria-pressed="true"] { border-color: var(--gd-rim); background: rgb(142 255 184 / .09); }
.wrp-gd-ck { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--gd-line2); }
.wrp-gd-games [aria-pressed="true"] .wrp-gd-ck { background: var(--gd-act); border-color: var(--gd-act); box-shadow: inset 0 0 0 3px var(--gd-glass); }
.wrp-gd-wl { font: 700 var(--sc-fs-body-sm) var(--gd-f-num); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid currentColor; color: var(--gd-ink); }
.wrp-gd-wl.is-l { color: var(--gd-down); }
.wrp-gd-games img { width: 32px; height: 32px; border-radius: 8px; }
.wrp-gd-kda { font: 700 var(--sc-fs-title) var(--gd-f-num); }
.wrp-gd-games [aria-pressed="true"] .wrp-gd-kda { color: var(--gd-ink); background: rgb(142 255 184 / .14); border-radius: 6px; padding: 0 6px; }

/* 脇役: スクショ → 記録 */
.wrp-gd-scan { display: grid; gap: 20px; margin-top: 36px; grid-template-columns: minmax(0, 1fr); align-items: center; max-width: 640px; }
@media (min-width: 920px), (orientation: landscape), (orientation: portrait) and (min-width: 500px) and (min-height: 800px) { .wrp-gd-scan { grid-template-columns: minmax(0, 1.25fr) 56px minmax(0, .85fr); max-width: none; } }
.wrp-gd-shot { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--gd-line2); }
.wrp-gd-shot img { width: 100%; height: auto; aspect-ratio: 960 / 432; object-fit: cover; }
.wrp-gd-own { position: absolute; left: 1.6%; top: 56.5%; width: 47.6%; height: 11.6%; border: 1.5px solid #fff; border-radius: 6px; box-shadow: 0 0 0 999px rgb(0 0 0 / .28); }
.wrp-gd-res { position: absolute; left: 43%; top: 2%; width: 14%; height: 12%; border: 1.5px solid #fff; border-radius: 6px; }
.wrp-gd-beam { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgb(142 255 184 / .9) 50%, transparent 52%); opacity: 0; }
.wrp-gd-lbl { position: absolute; left: 10px; bottom: 10px; font: 600 var(--sc-fs-body-sm) var(--gd-f-tag); letter-spacing: .2em; background: rgb(2 8 5 / .75); color: var(--gd-act); border-radius: 6px; padding: 3px 8px; }
/* 1 列 (狭い組み方) は左寄せで 16:10 に切り出す (高さは画像のまま、 横だけ切れる)。 白枠の横位置と幅は
   画像全体の値 × (960/432) ÷ (16/10) = × 1.3889、 縦はそのまま (2026-10-21 curator 「白枠がずれている」。
   以前は目分量の値で、 自分の行の 1 つ上を囲んでいた) */
.wrp-gd-shot img { aspect-ratio: 16 / 10; object-position: 0 50%; } .wrp-gd-own { left: 2.22%; top: 56.5%; width: 66.11%; height: 11.6%; } .wrp-gd-res { left: 59.72%; width: 19.44%; }
@media (min-width: 920px), (orientation: landscape), (orientation: portrait) and (min-width: 500px) and (min-height: 800px) { .wrp-gd-shot img { aspect-ratio: 960 / 432; object-position: 50% 50%; } .wrp-gd-own { left: 1.6%; top: 56.5%; width: 47.6%; height: 11.6%; } .wrp-gd-res { left: 43%; width: 14%; } }
.wrp-gd-arrow { justify-self: center; color: var(--gd-act); }
.wrp-gd-arrow svg { width: 40px; height: auto; transform: rotate(90deg); }
@media (min-width: 920px), (orientation: landscape), (orientation: portrait) and (min-width: 500px) and (min-height: 800px) { .wrp-gd-arrow svg { transform: none; } }
.wrp-gd-f { display: grid; grid-template-columns: 6.2em minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--gd-line); font-size: var(--sc-fs-body-md); }
.wrp-gd-f:last-child { border-bottom: 0; }
.wrp-gd-f > span:first-child { color: var(--gd-mute); font-size: var(--sc-fs-body); }
.wrp-gd-f b { color: var(--gd-ink); }
.wrp-gd-f .is-lose { color: var(--gd-down); }
.wrp-gd-ok { font: 600 var(--sc-fs-body-sm) var(--gd-f-tag); letter-spacing: .1em; color: #03100a; background: var(--gd-act); border-radius: 5px; padding: 1px 6px; }
/* 試合ログの欄のチャンピオンとアイテム (サイトの画像。 2026-10-21 までスクショの切り抜き) */
.wrp-gd-fch img { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gd-line2); display: block; }
.wrp-gd-fics { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.wrp-gd-fics > .wrp-gd-ic { width: 28px; height: 28px; border: 1px solid var(--gd-line2); }

/* おまけ: カード */
.wrp-gd-bonus { position: relative; padding-block: clamp(72px, 9vw, 120px); background: radial-gradient(55% 45% at 50% 60%, rgb(233 205 118 / .05), transparent 70%); overflow: clip; }
.wrp-gd-bonus .wrp-gd-head { justify-items: center; text-align: center; margin: 0 auto; }
.wrp-gd-fan { position: relative; height: clamp(300px, 78vw, 440px); margin-top: 44px; }
.wrp-gd-card { container-type: inline-size; position: absolute; left: 50%; top: 50%; width: clamp(110px, 28vw, 190px); aspect-ratio: 300 / 512; border-radius: 14px; overflow: hidden; background: #1D2740; }
.wrp-gd-card .wrp-card-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.wrp-gd-card .wrp-card-text { padding: 0 12px 12px; gap: 2px; }
.wrp-gd-card .wrp-card-subname { font-size: var(--sc-fs-body-sm); letter-spacing: .08em; word-break: keep-all; }
.wrp-gd-card .wrp-card-name { font-size: clamp(16px, 12cqi, 22px); word-break: keep-all; overflow-wrap: normal; line-height: 1.15; }
/* 「キラカード」 などの札は折らず、 札の枠からもはみ出さない (curator 2026-10-21 「ランドスケープで文字折れ」 「チップはみ出してる」)。
   字・字間・余白をカードの幅 (cqi、 .wrp-gd-card が container) に合わせて縮める */
.wrp-gd-tier { position: absolute; left: min(8px, 5cqi); top: min(8px, 5cqi); z-index: 2; white-space: nowrap; font: 700 min(var(--sc-fs-body-sm), 9.5cqi) "Noto Sans JP", sans-serif; letter-spacing: min(.06em, .4cqi); padding: 3px min(8px, 4cqi); border-radius: 999px; background: rgb(0 0 0 / .55); border: 1px solid; }
.t1 .wrp-gd-tier { color: #bfeecf; border-color: rgb(125 255 176 / .45); }
.t2 .wrp-gd-tier { color: #e8d9ff; border-color: rgb(176 122 255 / .6); }
.t3 .wrp-gd-tier { color: #ffe9a8; border-color: rgb(232 184 75 / .7); }
.wrp-gd-card.is-c1 { transform: translate(-118%, -46%) rotate(-12deg); z-index: 2; }
.wrp-gd-card.is-c2 { transform: translate(18%, -50%) rotate(11deg); z-index: 2; }
.wrp-gd-card.is-c3 { width: clamp(136px, 34vw, 230px); transform: translate(-50%, -50%) rotate(-1deg); overflow: visible; background: transparent; z-index: 3; }
.wrp-gd-wall { position: absolute; inset: 0 -4%; z-index: 0; pointer-events: none; }
.wrp-gd-wall .wrp-gd-card { left: var(--x); top: var(--y); width: clamp(72px, 9vw, 120px); transform: translate(-50%, -50%) rotate(var(--r)); filter: brightness(.42) saturate(.8); }
@media (max-width: 599px) { .wrp-gd-wall .is-in4 { display: none; } }
.wrp-gd-wall .wrp-gd-tier { font-size: min(calc(7.5px * var(--wrp-fs-k, 1)), 9.5cqi); }
.wrp-gd-wall .wrp-card-subname { display: none; }
.wrp-gd-wall .wrp-card-name { font-size: calc(clamp(10px, 12cqi, 14px) * var(--wrp-fs-k, 1)); }
.wrp-gd-wall .wrp-card-text { padding: 0 8px 8px; }
/* 後ろのカードは光を止める。 前の 3 枚も画面外では止める */
.wrp-gd-wall .wrp-card-foil, .wrp-gd-wall .wrp-card-sheen { animation: none; }
.wrp-gd-bonus.is-off .wrp-card-foil, .wrp-gd-bonus.is-off .wrp-card-sheen { animation-play-state: paused; }
.wrp-gd-bonus .wrp-gd-head, .wrp-gd-facts, .wrp-gd-bonus .wrp-gd-acts { position: relative; z-index: 4; }
/* カードが返る (平面のまま横に縮めて戻す) */
.wrp-gd-flip { position: absolute; inset: 0; }
.wrp-gd-flip.is-turn { animation: wrp-gd-turn .8s cubic-bezier(.3, .7, .3, 1); }
@keyframes wrp-gd-turn { 0% { transform: scaleX(1); } 50% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
.wrp-gd-flip.is-closed .wrp-gd-face { opacity: 0; }
.wrp-gd-flip:not(.is-closed) .wrp-gd-back { opacity: 0; }
.wrp-gd-face, .wrp-gd-back { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; }
.wrp-gd-face { background: #1D2740; }
.wrp-gd-back { background: radial-gradient(70% 60% at 50% 45%, #1e2a14, #0b0f0c 75%); display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--gd-gold); }
.wrp-gd-back b { position: absolute; color: var(--gd-gold); font-weight: 900; font-size: clamp(14px, 2.2vw, 18px); text-align: center; line-height: 1.2; }
.wrp-gd-ring { width: 64%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgb(233 205 118 / .6); box-shadow: 0 0 0 10px rgb(233 205 118 / .08), inset 0 0 30px rgb(233 205 118 / .2); }
.wrp-gd-facts { display: flex; gap: clamp(24px, 6vw, 72px); justify-content: center; flex-wrap: wrap; margin-top: 36px; text-align: center; }
.wrp-gd-facts div { display: grid; }
.wrp-gd-facts b { font-size: clamp(26px, 4vw, 38px); color: var(--gd-ink); line-height: 1.1; }
.wrp-gd-facts span { font-size: var(--sc-fs-body); color: var(--gd-mute); }

/* 締め */
.wrp-gd-end { padding-block: clamp(72px, 9vw, 128px) 40px; text-align: center; }
.wrp-gd-end .wrp-gd-in { display: grid; gap: 24px; justify-items: center; }
.wrp-gd-end h2 { font-size: clamp(28px, 8vw, 56px); }
.wrp-gd-pk { width: 110px; }
.wrp-gd-pk svg { width: 100%; height: auto; display: block; }
@media (min-width: 920px), (orientation: landscape), (orientation: portrait) and (min-width: 500px) and (min-height: 800px) { .wrp-gd-foot { font-size: var(--sc-fs-body); } }
.wrp-gd-foot { font-family: "Noto Sans JP", sans-serif; font-size: var(--sc-fs-body-sm); color: var(--wrp-c-mute); line-height: 1.7; padding-block: 28px 40px; border-top: 1px solid var(--gd-line); }

/* スマホの言葉の並び */
@media (max-width: 599px) {
  .wrp-gd-doc { font-size: var(--sc-fs-body-sm); }
  .wrp-gd-doc .wrp-gd-hl { font-size: var(--sc-fs-body-md); }
  .wrp-gd-ics { gap: 4px; }
  .wrp-gd-ics > .wrp-gd-ic { width: 30px; height: 30px; }
  .wrp-gd-meta li, .wrp-gd-meta .wrp-gd-hd { grid-template-columns: minmax(0, 1fr) 3.4em 3.4em; gap: 6px; }
  .wrp-gd-ph { flex-wrap: wrap; white-space: normal; row-gap: 2px; }
  .wrp-gd-stack > .wrp-gd-pane { transform: none; }
  .wrp-gd-pick { padding: 14px; }
  .wrp-gd-bonus .wrp-gd-head { justify-items: start; text-align: left; margin: 0; }
  .wrp-gd-end { text-align: left; }
  .wrp-gd-end .wrp-gd-in { justify-items: start; }
}

/* タブレット横・スマホ横: スクショを大きめに (中身が読めるように)、 記録の欄はその分だけ細く */
@media (orientation: landscape) and (max-width: 1199px) {
  .wrp-gd-scan { grid-template-columns: minmax(0, 1.5fr) 48px minmax(0, .8fr); }
}

/* 背の低い横向き (スマホ横・横長の小さな画面。 shared-ui.css の WRP_LANDSCAPE_NOSTICKY / バッジの演出と同じ条件)。
   高さで詰める: 1 画面に見出し + 選ぶ塊 + 右の板の頭が入る、 節の上下の余白は半分以下、 カードは 1 画面に収まる大きさ */
@media (orientation: landscape) and (max-height: 600px) {
  .wrp-gd-hero { padding-block: 16px 32px; }
  .wrp-gd-hero-in { align-items: start; }
  .wrp-gd-copy { gap: 10px; }
  .wrp-gd-hero h1 { font-size: clamp(24px, 3.4vw, 32px); }
  .wrp-gd-hero .wrp-gd-lead { font-size: var(--sc-fs-body-md); line-height: 1.6; }
  .wrp-gd-pick { gap: 8px; padding: 12px; }
  .wrp-gd-pick > p:first-child { font-size: var(--sc-fs-title); }
  .wrp-gd-pick > p:first-child small { display: none; }
  .wrp-gd-toast { min-height: 32px; }
  .wrp-gd-tp svg { width: 32px; }
  .wrp-gd-btn { min-height: 48px; padding: 0 26px; font-size: var(--sc-fs-title); }
  /* 右の列の高さを抑える: ランキングは 3 位まで (自分が下なら自分も)、 研究室の数字を小さく、 チャットの返事の絵は出さない */
  .wrp-gd-p-rank li.is-more { display: none; }
  .wrp-gd-ph { padding: 8px 14px; }
  .wrp-gd-pb { padding: 10px 14px; }
  .wrp-gd-cp { margin-top: 8px; }
  .wrp-gd-cp b { font-size: 30px; }
  .wrp-gd-bars { margin-top: 8px; gap: 5px; }
  .wrp-gd-try { margin-top: 10px; padding-top: 8px; }
  .wrp-gd-p-chat .wrp-gd-aib { display: none; }
  /* 節 */
  .wrp-gd-scene.is-main { padding-block: 40px; }
  .wrp-gd-scene.is-sub { padding-block: 32px; }
  .wrp-gd-bonus { padding-block: 40px; }
  .wrp-gd-end { padding-block: 40px 24px; }
  .wrp-gd-end .wrp-gd-in { gap: 14px; }
  .wrp-gd-pk { width: 72px; }
  .wrp-gd-head { gap: 8px; }
  .wrp-gd-scene.is-main h2 { font-size: clamp(24px, 3.4vw, 32px); }
  .wrp-gd-scene.is-sub h2, .wrp-gd-bonus h2, .wrp-gd-end h2 { font-size: clamp(22px, 3vw, 28px); }
  .wrp-gd-lead, .wrp-gd-scene.is-main .wrp-gd-lead { font-size: var(--sc-fs-body-lg); }
  .wrp-gd-say { margin-top: 12px; }
  .wrp-gd-xf { margin-top: 16px; align-items: start; }
  .wrp-gd-scan { margin-top: 16px; }
  .wrp-gd-shot { max-width: calc(50vh * 960 / 432); }
  .wrp-gd-doc .wrp-gd-hl { font-size: var(--sc-fs-body-md); margin: 6px -10px; padding: 6px 10px; }
  .wrp-gd-f { padding: 7px 0; }
  .wrp-gd-games button { padding: 9px 12px; }
  /* カード: 中央のカード (高さ = 扇の 85%) が 1 画面に収まる */
  .wrp-gd-fan { height: min(72vh, 300px); margin-top: 20px; }
  .wrp-gd-card { width: calc(min(72vh, 300px) * .4); }
  .wrp-gd-card.is-c3 { width: calc(min(72vh, 300px) * .5); }
  .wrp-gd-wall .wrp-gd-card { width: calc(min(72vh, 300px) * .26); }
  .wrp-gd-facts { margin-top: 16px; }
  .wrp-gd-acts.wrp-gd-center { margin-top: 16px; }
  .wrp-gd-sheet-in { max-height: 96vh; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 8px;
    grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "h q x" "l l l" "g g g" "n n n"; }
  .wrp-gd-sheet-top { display: contents; }
  .wrp-gd-sheet-top h3 { grid-area: h; align-self: center; font-size: var(--sc-fs-title); white-space: nowrap; }
  .wrp-gd-x { grid-area: x; width: 40px; height: 40px; }
  .wrp-gd-q { grid-area: q; }
  .wrp-gd-q input { min-height: 40px; }
  .wrp-gd-lanes { grid-area: l; }
  .wrp-gd-lanes button { min-height: 32px; padding: 0 12px; }
  .wrp-gd-pickgrid { grid-area: g; min-height: 0; gap: 6px 4px; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
  .wrp-gd-pickgrid button { padding: 4px 2px; }
  .wrp-gd-pickgrid button img { width: 44px; height: 44px; }
  .wrp-gd-none { grid-area: n; }
}

/* 高さ 768 前後の横向き (タブレット横・高さの低い PC): 第 1 画面に見出し・選ぶ塊・ボタンが入るよう冒頭を詰める。
   右の列が言葉の列より高いと、 中央揃えで言葉の列ごと下に押されていた */
@media (orientation: landscape) and (min-height: 601px) and (max-height: 860px) {
  .wrp-gd-hero { padding-block: 24px 48px; }
  .wrp-gd-hero-in { align-items: start; }
  .wrp-gd-copy { gap: 14px; }
  .wrp-gd-hero h1 { font-size: clamp(32px, 4vw, 48px); }
  .wrp-gd-hero .wrp-gd-lead { font-size: var(--sc-fs-body-lg); }
  .wrp-gd-p-rank li.is-more { display: none; }
  .wrp-gd-ph { padding: 10px 14px; }
  .wrp-gd-pb { padding: 12px 14px; }
  .wrp-gd-cp { margin-top: 10px; }
  .wrp-gd-cp b { font-size: 38px; }
  .wrp-gd-p-chat .wrp-gd-aib { display: none; }
}

/* 動き (動きを減らす設定では何もしない。 現れる動きは guide.js が .is-motion を付けた時だけ) */
@media (prefers-reduced-motion: no-preference) {
  .wrp-gd.is-motion .wrp-gd-rise { transition: opacity .6s ease-out, transform .6s ease-out; }
  .wrp-gd.is-motion .wrp-gd-rise:not(.is-in) { opacity: .2; transform: translateY(32px); }
  .wrp-gd-shot.is-go .wrp-gd-beam { animation: wrp-gd-beam 1.4s ease-in-out 1 forwards; }
  @keyframes wrp-gd-beam { 0% { opacity: 0; transform: translateY(-50%); } 15% { opacity: 1; } 85% { opacity: 1; transform: translateY(50%); } 100% { opacity: 0; transform: translateY(50%); } }
  .wrp-gd-form.is-wait .wrp-gd-f { opacity: .2; }
  .wrp-gd-form .wrp-gd-f { transition: opacity .35s ease-out; }
  .wrp-gd-form .wrp-gd-f:nth-child(2) { transition-delay: .25s; }
  .wrp-gd-form .wrp-gd-f:nth-child(3) { transition-delay: .5s; }
  .wrp-gd-form .wrp-gd-f:nth-child(4) { transition-delay: .75s; }
  .wrp-gd-form .wrp-gd-f:nth-child(5) { transition-delay: 1s; }
  .wrp-gd-xf.is-wait .wrp-gd-wires path { stroke-dashoffset: 400; opacity: 0; }
  .wrp-gd-xf .wrp-gd-wires path { transition: stroke-dashoffset 1s ease-out, opacity .3s; }
  .wrp-gd-xf.is-wait .wrp-gd-out .wrp-gd-hl { background: transparent; border-left-color: transparent; }
  .wrp-gd-xf .wrp-gd-out .wrp-gd-hl { transition: background .5s ease-out .7s, border-color .5s ease-out .7s; }
}
@media (prefers-reduced-motion: reduce) {
  .wrp-gd .wrp-card-foil, .wrp-gd .wrp-card-sheen { animation: none !important; }
}