/* 新デザインの診断ページ（ノベルゲーム形式）。着地・ノベル画面・結果。
   見本: 画面3（診断のはじまり）・画面4（設問）・画面5（結果）。play.css の変数（--pl-*）と部品（.pl-parch/.pl-panel/.pl-card）の上に載せる。
   ★ドット絵は元画素の整数倍でだけ出す（docs/調査_ピクセルアートWebデザイン_2026-09-16.md）。 */

/* ------------------------------------------------------------ 共通 */

.pl-crumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-block: 14px 10px;
    font-size: 12.5px;
    color: var(--pl-muted);
}

.pl-crumb a {
    color: var(--pl-white);
    text-decoration: none;
}

.pl-crumb a:hover {
    color: var(--pl-gold);
}

.pl-sd-start {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 34px;
    background: var(--pl-blue);
    color: var(--pl-white);
    font-family: var(--pl-dot);
    font-weight: 700;
    font-size: 20px;
    text-decoration: none;
    border: 3px solid var(--pl-navy-deep);
    box-shadow: 0 0 0 3px var(--pl-white), 0 6px 0 3px var(--pl-navy-deep);
    cursor: pointer;
}

.pl-sd-start:hover,
.pl-sd-start:focus-visible {
    background: var(--pl-blue-light);
    outline: none;
}

.pl-sd-start:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 3px var(--pl-white), 0 3px 0 3px var(--pl-navy-deep);
}

.pl-sd-notice {
    margin-block: 18px 40px;
}

.pl-sd-others {
    margin-top: 26px;
}

/* ------------------------------------------------------------ 音の許可（幕） */
/* docs/計画_SEとBGM_全診断_2026-09-17.md §8-6（判断票19回目 n1〜n4）。部品は templates/play/_sound_start.html の1本。
   形は「舞台幕」＝音が出る舞台だけを覆う（n1）。カード型は設問カードに重ね、型1/7/8 は開始ボタンの位置に静的配置する。
   ページ全体は覆わないので、着地の題・煽り・全◯問・約◯分は幕の外で読めたまま。
   出し分けの手がかりは html の属性だけ（base.html が最初の描画の前に付ける。JSを待たないので、ちらつかない）:
     data-sound-ready     … JSが動いている印。無ければ幕を出さない（Q1 か1ボタンがそのまま出る）
     data-sound="on|off"  … 設定済み（localStorage 'rpgtype-sound'）
     data-sound-repeat    … "toggle"＝設定済みなら幕を出さない／"always"＝毎回出す（play/shindan_views.SOUND_REPEAT）
     data-sound-card      … "gate"＝カード型は設問に重ねる幕（既定）／"strip"＝重ねずQ1の上に静的に置く（play/shindan_views.SOUND_CARD_START）
     .pl-sound-chosen     … このページで幕のどちらかを押した・Escで閉じた（sound.js が付ける）
   ★html の条件は :where() の中に書く（詳細度を上げない・クラス無しの規則を増やさない）。
   ★開始UIの見た目はこの節と templates/play/_sound_start.html だけ。トグル（.pl-sound）は play-chrome.css（旧ページと共用）。 */

/* 型1/7/8: 設定済みの人・JSが無い人はいつもの1ボタン、はじめての人は幕 */
.pl-sound-single {
    display: none;
}

.pl-sound-single:where([data-sound][data-sound-repeat="toggle"] *),
.pl-sound-single:where(html:not([data-sound-ready]) *) {
    display: inline-flex;
}

.pl-sound-single[hidden] {
    display: none;
}

/* 幕（暗い面）。並べるのは「窓」1つだけで、中身の見た目は窓が持つ */
.pl-sound-gate {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    transition: opacity 160ms ease-out;
}

/* カード型（既定）: 設問カードの全面に掛かる幕（判断票19回目 n4 = 86%） */
.pl-sound-gate--stage:where([data-sound-card="gate"] *) {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(2, 10, 22, 0.86);
}

/* 型1/7/8: 開始ボタンの位置に静的配置（覆う設問が無いので幕は要らない。窓だけ置く） */
.pl-sound-gate--inline {
    width: 100%;
    padding: 4px 0 0;
}

/* 窓（昔のRPGのメッセージ窓の語彙: 紺の地・金の細い枠・内側に紺の縁・四隅にドットのマス）。
   ★高さは中身で決まる。カードが高くても低くても窓の見え方は同じで、幕の中央に浮く（縦も横も中央）。
   ★四隅のマスは background-image の矩形1枚ずつ。整数px・にじみ無し（1マス1画素の作法） */
.pl-sound-gate__window {
    display: grid;
    justify-items: center;
    gap: 12px;
    /* 幅は 392px を基準に、狭い画面では入るところまで縮む。高さは中身が決める */
    flex: 0 1 392px;
    max-width: 392px;
    padding: 16px 18px 14px;
    background-color: var(--pl-navy);
    background-image:
        linear-gradient(var(--pl-gold), var(--pl-gold)),
        linear-gradient(var(--pl-gold), var(--pl-gold)),
        linear-gradient(var(--pl-gold), var(--pl-gold)),
        linear-gradient(var(--pl-gold), var(--pl-gold));
    background-size: 6px 6px;
    background-position: 4px 4px, calc(100% - 4px) 4px, 4px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px);
    background-repeat: no-repeat;
    border: 3px solid var(--pl-gold-dark);
    box-shadow: inset 0 0 0 3px var(--pl-navy-deep), 0 0 0 3px var(--pl-navy-deep), 0 6px 0 3px rgba(2, 10, 22, 0.55);
}

.pl-sound-gate__title {
    margin: 0;
    color: var(--pl-white);
    font-family: var(--pl-dot);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-align: center;
    text-shadow: 2px 2px 0 var(--pl-navy);
}

.pl-sound-gate__title::before {
    content: "▶ ";
    color: var(--pl-gold);
}

.pl-sound-gate__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 360px;
    min-height: 52px;
    padding: 10px 16px;
    font-family: var(--pl-dot);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: 0;
    border: 3px solid var(--pl-navy-deep);
    cursor: pointer;
}

.pl-sound-gate__btn img {
    flex: none;
    width: 32px;
    height: 32px;
}

/* 折り返すなら「音ありで／冒険をはじめる」の切れ目で（語の途中で折らない） */
.pl-sound-label > span {
    display: inline-block;
    white-space: nowrap;
}

.pl-sound-gate__btn--on {
    background: var(--pl-blue);
    color: var(--pl-white);
    box-shadow: 0 0 0 3px var(--pl-white), 0 6px 0 3px var(--pl-navy-deep);
}

/* 控えめなほう */
.pl-sound-gate__btn--off {
    min-height: 46px;
    font-size: 16px;
    background: var(--pl-parch-light);
    color: var(--pl-ink);
    box-shadow: 0 0 0 3px var(--pl-navy-deep), 0 4px 0 3px var(--pl-navy-deep);
}

.pl-sound-gate__btn--on:hover,
.pl-sound-gate__btn--on:focus-visible {
    background: var(--pl-blue-light);
    outline: none;
}

.pl-sound-gate__btn--off:hover,
.pl-sound-gate__btn--off:focus-visible {
    background: var(--pl-white);
    outline: none;
}

/* キーボードの焦点は金の縁（幕の紺の上でも見える） */
.pl-sound-gate__btn:focus-visible {
    box-shadow: 0 0 0 3px var(--pl-gold), 0 6px 0 3px var(--pl-navy-deep);
}

.pl-sound-gate__btn:active {
    transform: translateY(3px);
}

.pl-sound-gate__note {
    margin: 0;
    color: var(--pl-muted);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

/* 狭い画面で2行になるときも、語の途中では折らない（ボタンの札と同じ作法） */
.pl-sound-gate__note > span {
    display: inline-block;
    white-space: nowrap;
}

/* 幕が出ている間、設問は見えない・押せない・読まれない（カードの高さは Q1 が決める＝CLSゼロ）。
   型9（名前Seed）は設問の代わりに入力窓（.pl-sv-form）が舞台 */
.pl-sq-quiz > :not(.pl-sound-gate):where([data-sound-ready][data-sound-card="gate"]:not(.pl-sound-chosen):not([data-sound][data-sound-repeat="toggle"]) *),
.pl-sv-form[data-quiz] > :not(.pl-sound-gate):where([data-sound-ready][data-sound-card="gate"]:not(.pl-sound-chosen):not([data-sound][data-sound-repeat="toggle"]) *) {
    visibility: hidden;
}

/* 幕の中身（見出し＋52＋46＋注記）が収まる下限。型JSが測るインラインの min-height が大きければそちらが勝つ */
.pl-sq-quiz:where([data-sound-ready][data-sound-card="gate"]:not(.pl-sound-chosen):not([data-sound][data-sound-repeat="toggle"]) *),
.pl-sv-form[data-quiz]:where([data-sound-ready][data-sound-card="gate"]:not(.pl-sound-chosen):not([data-sound][data-sound-repeat="toggle"]) *) {
    min-height: 260px;
}

/* 押した直後の160ms: 設問はもう見えていて、幕だけが上で消えていく */
.pl-sound-gate.is-leaving {
    opacity: 0;
    pointer-events: none;
}

/* 出さないとき: JS無し／設定済み（toggle）／このページで選んだ・閉じた／二人用の2人目（pair.js の hidden） */
.pl-sound-gate:not(.is-leaving):where(html:not([data-sound-ready]) *, [data-sound][data-sound-repeat="toggle"] *, .pl-sound-chosen *),
.pl-sound-gate[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .pl-sound-gate {
        transition: none;
    }
}

@media (max-width: 480px) {
    .pl-sound-gate {
        padding: 12px 8px;
    }

    .pl-sound-gate__window {
        padding: 14px 12px 12px;
        gap: 10px;
    }

    .pl-sound-gate__btn {
        font-size: 17px;
    }
}

/* 枠は横いっぱい・カードは4列（2026-09-17 オーナー指摘: 枠をカード幅に縮めていたので右半分が空いて見えた） */
.pl-sd-others .pl-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ------------------------------------------------------------ 着地（画面3） */

.pl-sd-land {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 22px;
    align-items: stretch;
}

.pl-sd-cover {
    margin: 0;
    border: 3px solid var(--pl-gold-dark);
    box-shadow: inset 0 0 0 2px var(--pl-gold), 0 5px 0 #000;
    background: var(--pl-navy-tile);
    line-height: 0;
    overflow: hidden;
}

.pl-sd-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
}

.pl-sd-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px 14px 14px;
}

.pl-sd-tag {
    position: static;
    margin-bottom: 8px;
}

.pl-sd-title {
    margin: 0 0 8px;
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 900;
    line-height: 1.35;
    text-wrap: balance;
}

.pl-sd-catch {
    margin: 0 0 8px;
    font-weight: 900;
    font-size: 16px;
    color: var(--pl-ink);
}

.pl-sd-lead {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--pl-ink-soft);
    text-align: left;
}

.pl-sd-meta {
    margin: 0 0 20px;
    font-family: var(--pl-dot);
    font-weight: 700;
    font-size: 14px;
    color: var(--pl-ink);
}

/* 「約1分・入力なし」の途中で折れて「し」だけ次の行に落ちないよう、項目ごとに折らない */
.pl-nw {
    white-space: nowrap;
}

.pl-sd-plays {
    margin: 14px 0 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--pl-ink-soft);
}

.pl-sd-dex {
    margin-top: 24px;
}

.pl-sd-dex-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 8px;
}

.pl-sd-dex-cell {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    background: var(--pl-navy-tile);
    border: 2px solid var(--pl-navy-line);
    box-shadow: inset 0 0 0 2px var(--pl-navy-deep);
}

/* 図鑑用の絵は 64×64。シルエットにして正体を隠す */
.pl-sd-silhouette {
    width: 64px;
    height: 64px;
    filter: brightness(0);
    opacity: 0.55;
}

.pl-sd-dex-q {
    position: absolute;
    font-family: var(--pl-dot);
    font-weight: 700;
    font-size: 22px;
    color: var(--pl-gold);
    text-shadow: 2px 2px 0 var(--pl-navy-deep);
}

.pl-sd-dex-note {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--pl-muted);
}

/* ------------------------------------------------------------ 冒険の記録（この端末だけ）
   正本: docs/設計_冒険の記録_登録なし_2026-09-18.md 段階A。塗るのは play/js/record.js（.is-found を足すだけ）。
   未取得の見せ方は今までの「影＋金の？」のまま。新しい絵は描かない。 */

/* 着地の影図鑑: 見つけたマスだけ影を外し、名前と結果ページへのリンクを出す。
   リンクと名前はマスに重ねる（絶対配置）ので、出しても図鑑の高さは動かない＝CLS 0 */
.pl-sd-dex-link {
    position: absolute;
    inset: 0;
    display: block;
    text-decoration: none;
}

.pl-sd-dex-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2px 3px 3px;
    background: rgba(2, 10, 22, 0.88);
    color: var(--pl-gold);
    font-family: var(--pl-round);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
    /* 「見張りの指輪」が「見張りの指／輪」と割れていた。語のまとまりで折る（.pl-sr-dex-name と同じ作法） */
    word-break: auto-phrase;
    visibility: hidden;
}

.pl-sd-dex-cell.is-found {
    border-color: var(--pl-gold-dark);
}

.pl-sd-dex-cell.is-found .pl-sd-silhouette,
.pl-sd-dex-cell.is-found .pl-sq-silhouette {
    filter: none;
    opacity: 1;
}

.pl-sd-dex-cell.is-found .pl-sd-dex-q {
    display: none;
}

.pl-sd-dex-cell.is-found .pl-sd-dex-name {
    visibility: visible;
}

.pl-sd-dex-link[href]:hover,
.pl-sd-dex-link[href]:focus-visible {
    outline: 2px solid var(--pl-gold);
    outline-offset: -2px;
}

/* レアは未取得でも★だけ見せる（「レアがある」と分かることが集める理由になる） */
.pl-sd-dex-rare {
    position: absolute;
    top: 2px;
    right: 3px;
    font-size: 12px;
    line-height: 1;
    color: var(--pl-gold);
    text-shadow: 1px 1px 0 var(--pl-navy-deep);
}

/* 結果ページの図鑑は内部リンクの束なので隠さない。見つけたマスに金の枠を足すだけ */
.pl-sr-dex-cell.is-found:not(.is-current) {
    border-color: var(--pl-gold-dark);
    box-shadow: inset 0 0 0 2px var(--pl-navy-deep), 0 0 0 2px var(--pl-gold-dark);
}

/* 「見つけた 3 / 8・あと5種」（着地）と「見つけた 3 / 8」（結果）。
   場所は最初から取っておき、記録が無い間は見えないだけにする（出しても画面が動かない） */
.pl-record-left,
.pl-record-found {
    margin: 6px 0 0;
    font-family: var(--pl-round);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--pl-gold);
}

.pl-record-left[hidden],
.pl-record-found[hidden] {
    display: block;
    visibility: hidden;
    min-height: 1.4em;
}

.pl-sd-how {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 24px;
    padding: 6px 14px;
}

.pl-sd-how-imp {
    flex: none;
    width: 96px;
    height: 128px;
}

.pl-sd-how-body {
    flex: 1;
    min-width: 0;
}

.pl-sd-how-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 900;
}

.pl-sd-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    counter-reset: step;
}

.pl-sd-steps li {
    position: relative;
    display: grid;
    gap: 2px;
    padding: 10px 12px 10px 48px;
    background: var(--pl-parch-light);
    border: 2px solid var(--pl-parch-dark);
    counter-increment: step;
}

.pl-sd-steps li::before {
    content: counter(step);
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    background: var(--pl-navy-deep);
    color: var(--pl-white);
    font-family: var(--pl-dot);
    font-weight: 700;
    font-size: 16px;
}

.pl-sd-steps b {
    font-size: 15px;
}

.pl-sd-steps span {
    font-size: 12.5px;
    color: var(--pl-ink-soft);
    line-height: 1.6;
}

/* ------------------------------------------------------------ ノベル画面（画面4） */

html.pl-game-open,
html.pl-game-open body {
    overflow: hidden;
}

.pl-game {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
    background: rgba(3, 8, 20, 0.94);
}

.pl-game[hidden] {
    display: none;
}

.pl-game-frame {
    display: flex;
    flex-direction: column;
    width: min(1120px, 100vw);
    height: min(760px, 100%);
    background: var(--pl-navy-deep);
    border: 3px solid var(--pl-gold-dark);
    box-shadow: inset 0 0 0 2px var(--pl-gold);
}

.pl-game-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 12px 8px 16px;
    border-bottom: 3px solid var(--pl-navy-line-soft);
}

.pl-game-title {
    margin: 0;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 900;
    font-size: 15px;
}

.pl-game-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--pl-dot);
    font-weight: 700;
    font-size: 15px;
    color: var(--pl-gold);
}

.pl-game-gauge {
    display: block;
    width: clamp(90px, 18vw, 220px);
    height: 14px;
    background: var(--pl-navy);
    border: 2px solid var(--pl-white);
    box-shadow: 0 0 0 2px var(--pl-navy-deep);
}

.pl-game-gauge span {
    display: block;
    height: 100%;
    width: 0;
    background: repeating-linear-gradient(90deg, var(--pl-green) 0 8px, #56c177 8px 10px);
    transition: width 0.3s steps(6);
}

.pl-game-close {
    flex: none;
    width: 38px;
    height: 38px;
    border: 2px solid var(--pl-navy-line);
    background: var(--pl-navy-tile);
    color: var(--pl-white);
    font-size: 18px;
    cursor: pointer;
}

.pl-game-close:hover,
.pl-game-close:focus-visible {
    border-color: var(--pl-gold);
    color: var(--pl-gold);
    outline: none;
}

.pl-game-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #000;
}

.pl-game-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.pl-game-bg.is-in {
    opacity: 1;
}

/* 係長（96×128）。PCは2倍、スマホは1倍 */
.pl-game-char {
    position: absolute;
    left: 7%;
    bottom: 32%;
    width: 192px;
    height: 256px;
    animation: pl-bob 1.6s steps(2) infinite;
}

@keyframes pl-bob {
    50% {
        transform: translateY(-4px);
    }
}

.pl-game-window {
    background: rgba(6, 17, 42, 0.94);
    color: var(--pl-white);
    border: 3px solid var(--pl-white);
    box-shadow: inset 0 0 0 3px var(--pl-navy-deep), 0 0 0 3px var(--pl-navy-deep);
}

.pl-game-message {
    position: absolute;
    left: 3%;
    right: 3%;
    bottom: 4%;
    min-height: 27%;
    padding: 26px 30px 22px;
    cursor: pointer;
}

.pl-game-message:focus-visible {
    outline: 3px solid var(--pl-gold);
    outline-offset: 3px;
}

.pl-game-name {
    position: absolute;
    left: 20px;
    top: -20px;
    margin: 0;
    padding: 2px 14px;
    background: var(--pl-gold);
    color: var(--pl-navy-deep);
    font-family: var(--pl-dot);
    font-weight: 700;
    font-size: 16px;
    border: 3px solid var(--pl-navy-deep);
}

.pl-game-text {
    margin: 0;
    font-weight: 700;
    font-size: clamp(16px, 1.9vw, 21px);
    line-height: 1.85;
    letter-spacing: 0.02em;
    word-break: auto-phrase;
}

.pl-game-next {
    position: absolute;
    right: 20px;
    bottom: 12px;
    font-size: 14px;
    color: var(--pl-gold);
    animation: pl-blink 0.9s steps(2) infinite;
}

.pl-game-next[hidden] {
    display: none;
}

@keyframes pl-blink {
    50% {
        opacity: 0;
    }
}

.pl-game-ask {
    position: absolute;
    left: 3%;
    right: 3%;
    bottom: 4%;
    display: grid;
    gap: 12px;
}

.pl-game-ask[hidden] {
    display: none;
}

.pl-game-question {
    margin: 0;
    padding: 16px 26px;
    font-weight: 900;
    font-size: clamp(17px, 2vw, 22px);
    line-height: 1.6;
    word-break: auto-phrase;
}

.pl-game-commands {
    list-style: none;
    margin: 0;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 12px;
}

.pl-game-command {
    position: relative;
    width: 100%;
    min-height: 48px;
    padding: 8px 12px 8px 34px;
    background: transparent;
    border: 2px solid transparent;
    color: var(--pl-white);
    font: inherit;
    font-weight: 700;
    font-size: clamp(15px, 1.7vw, 18px);
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
    word-break: auto-phrase;
}

.pl-game-command::before {
    content: "▶";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--pl-white);
    opacity: 0;
}

.pl-game-command:focus-visible {
    outline: none;
    border-color: var(--pl-navy-line);
    background: rgba(44, 111, 214, 0.25);
    color: var(--pl-gold);
}

/* スマホではタップした後も :hover が残り、次の問いの同じ位置の選択肢が「選んだ」ように光っていた（2026-09-17 オーナー指摘）。ホバーはマウスのある端末だけ */
@media (hover: hover) {
    .pl-game-command:hover {
        outline: none;
        border-color: var(--pl-navy-line);
        background: rgba(44, 111, 214, 0.25);
        color: var(--pl-gold);
    }
}

.pl-game-command:hover::before,
.pl-game-command:focus-visible::before {
    opacity: 1;
    color: var(--pl-gold);
    animation: pl-blink 0.9s steps(2) infinite;
}

/* 判定スタンプの置き場（ノベルの舞台の真ん中）。形・色・押す動きは play-stamp.css。舞台が広いぶん大きく押す */
.pl-game-stamp {
    --stamp-k: 1.3;
    --stamp-kd: 1.5;
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
}

.pl-game-foot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 6px 12px;
    border-top: 3px solid var(--pl-navy-line-soft);
}

.pl-game-link {
    border: 0;
    background: transparent;
    color: var(--pl-muted);
    font-family: var(--pl-dot);
    font-weight: 700;
    font-size: 14px;
    padding: 6px 8px;
    cursor: pointer;
}

.pl-game-link:hover,
.pl-game-link:focus-visible {
    color: var(--pl-gold);
    outline: none;
}

.pl-game-link[hidden] {
    display: none;
}

.pl-game-skip {
    margin-left: auto;
}

/* ------------------------------------------------------------ 結果（画面5） */

.pl-sr {
    --sr-accent: var(--pl-gold);
}

.pl-sr-top {
    padding-top: 4px;
}

.pl-sr-ribbon {
    display: flex;
    justify-content: center;
    margin: 0 0 16px;
}

.pl-sr-ribbon span {
    padding: 6px 60px;
    background: var(--pl-gold);
    color: var(--pl-wood-dark);
    font-family: var(--pl-dot);
    font-weight: 700;
    font-size: clamp(22px, 3vw, 30px);
    letter-spacing: 0.2em;
    clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 50%, 100% 100%, 0 100%, 22px 50%);
    box-shadow: inset 0 -5px 0 var(--pl-gold-dark), inset 0 4px 0 #ffe391;
}

.pl-sr-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 22px;
    align-items: stretch;
}

/* レアな結果の金の判定スタンプ（templates/play/_stamp.html・ground="night"）。絵の左上の角にまたがって押す */
.pl-sr-stamp {
    --stamp-k: 0.8;
    --stamp-kd: 1;
    position: absolute;
    z-index: 2;
    top: -20px;
    left: -12px;
}

.pl-sr-art {
    margin: 0;
    border: 3px solid var(--pl-gold-dark);
    box-shadow: inset 0 0 0 2px var(--pl-gold), 0 5px 0 #000;
    background: var(--pl-navy-tile);
    line-height: 0;
    overflow: hidden;
}

.pl-sr-art img {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    image-rendering: pixelated;
}

.pl-sr-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 14px 14px;
}

.pl-sr-kicker {
    margin: 0;
    font-weight: 900;
    font-size: 15px;
    color: var(--pl-ink-soft);
}

.pl-sr-name {
    margin: 2px 0 10px;
    font-size: clamp(32px, 4vw, 50px);
    font-weight: 900;
    line-height: 1.2;
    color: var(--pl-ink);
    text-wrap: balance;
    text-decoration: underline;
    text-decoration-color: var(--sr-accent);
    text-decoration-thickness: 6px;
    text-underline-offset: 6px;
}

.pl-sr-catch {
    margin: 0 0 14px;
    font-weight: 900;
    font-size: 16px;
    line-height: 1.7;
}

.pl-sr-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    margin: 0 0 14px;
}

.pl-sr-stat {
    display: flex;
    /* 左の見出し（出現率など）は、右の大きな数字の上下中央にそろえる（baseline だと下に寄る） */
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: var(--pl-parch-light);
    border: 3px solid var(--pl-wood-dark);
    box-shadow: inset 0 0 0 2px var(--pl-parch-dark);
}

.pl-sr-stat dt {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--pl-ink-soft);
}

.pl-sr-stat dd {
    margin: 0;
    font-family: var(--pl-dot);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.pl-sr-stat small {
    font-size: 15px;
}

.pl-sr-traits {
    list-style: none;
    margin: 0;
    padding: 10px 0 0;
    border-top: 2px dashed var(--pl-parch-dark);
    display: grid;
    gap: 6px;
    font-weight: 700;
}

.pl-sr-traits li {
    display: flex;
    gap: 10px;
    align-items: baseline;
}

.pl-sr-mark {
    flex: none;
    font-size: 17px;
}

.pl-sr-mark--good {
    color: var(--pl-green);
}

.pl-sr-mark--bad {
    color: var(--pl-red);
}

.pl-sr-share {
    margin-top: 22px;
}

.pl-sr-share-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.pl-sr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 14px;
    font-family: var(--pl-dot);
    font-weight: 700;
    font-size: 17px;
    text-decoration: none;
    border: 3px solid var(--pl-navy-deep);
    box-shadow: 0 0 0 2px var(--pl-white), 0 5px 0 2px #000;
    cursor: pointer;
}

.pl-sr-btn--x {
    background: #000;
    color: #fff;
}

.pl-sr-btn--line {
    background: #06c755;
    color: #fff;
}

.pl-sr-btn--copy {
    background: var(--pl-white);
    color: var(--pl-ink);
}

.pl-sr-btn:hover,
.pl-sr-btn:focus-visible {
    outline: none;
    filter: brightness(1.12);
}

.pl-sr-share-status {
    margin: 10px 0 0;
    color: var(--pl-gold);
    font-weight: 700;
}

.pl-sr-share-status[hidden] {
    display: none;
}

/* 画像を保存して投稿（templates/play/_share_image.html）。
   画像を添付した投稿はリンクだけの投稿より届くので、共有パネルのいちばん上に1本だけ大きく置く */
.pl-sr-image {
    margin-bottom: 16px;
}

.pl-sr-btn--image {
    width: 100%;
    min-height: 58px;
    background: var(--pl-gold);
    color: var(--pl-ink);
    font-size: 18px;
}

.pl-sr-image-icon {
    flex: none;
    width: 18px;
    height: 18px;
}

.pl-sr-image-note {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--pl-muted);
    text-align: center;
}

.pl-sr-image-status {
    margin: 0;
    color: var(--pl-gold);
    font-weight: 700;
}

.pl-sr-image-status.is-shown {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.pl-sr-image-x[hidden] {
    display: none;
}

.pl-sr-again {
    margin-top: 22px;
}

.pl-sr-again-in {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 4px 12px;
}

.pl-sr-again-imp {
    flex: none;
    width: 96px;
    height: 128px;
}

.pl-sr-again-in > div {
    flex: 1;
    min-width: 0;
}

.pl-sr-again-title {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 900;
}

.pl-sr-again-in p {
    margin: 0;
    font-size: 14px;
}

.pl-sr-rel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 22px;
}

.pl-sr-rel-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px 12px;
    color: var(--pl-ink);
    text-decoration: none;
}

a.pl-sr-rel-card:hover strong {
    color: var(--pl-blue);
}

.pl-sr-rel-sprite {
    flex: none;
    width: 64px;
    height: 64px;
}

.pl-sr-rel-card > span {
    display: grid;
    gap: 2px;
}

.pl-sr-rel-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--pl-ink-soft);
}

.pl-sr-rel-card strong {
    font-size: 18px;
    font-weight: 900;
}

.pl-sr-rel-note {
    font-size: 13px;
    color: var(--pl-ink-soft);
}

.pl-sr-read {
    margin-top: 22px;
}

.pl-sr-read-in {
    padding: 8px 18px 16px;
}

.pl-sr-read-in > p {
    max-width: 46em;
    margin: 0 0 12px;
    line-height: 1.95;
}

/* PCでは本文を2段に組む（1段46字で止めていたので、右半分が空いて見えた・2026-09-17） */
@media (min-width: 961px) {
    .pl-sr-read-in {
        column-count: 2;
        column-gap: 40px;
    }

    .pl-sr-read-in > .pl-sr-h2,
    .pl-sr-read-in > .pl-sr-data,
    .pl-sr-read-in > .pl-sr-advice {
        column-span: all;
    }

    .pl-sr-read-in > p {
        max-width: none;
        break-inside: avoid;
    }
}

.pl-sr-h2 {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 900;
}

.pl-sr-data {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 18px;
    margin: 14px 0 0;
}

.pl-sr-data div {
    display: grid;
    grid-template-columns: 7em minmax(0, 1fr);
    gap: 8px;
    padding: 8px 0;
    border-bottom: 2px dashed var(--pl-parch-dark);
}

.pl-sr-data dt {
    font-weight: 900;
    font-size: 13.5px;
    color: var(--pl-ink-soft);
}

.pl-sr-data dd {
    margin: 0;
    font-size: 14px;
}

/* 見出しの長い行（前世診断の「前世の職業・最期・現世に残ったもの」）は1列にして、見出しの列を広げる。スマホでは見出しを上に */
.pl-sr-data--facts {
    grid-template-columns: minmax(0, 1fr);
}

.pl-sr-data--facts div {
    grid-template-columns: 9.5em minmax(0, 1fr);
}

@media (max-width: 560px) {
    .pl-sr-data--facts div {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }
}

.pl-sr-advice {
    margin: 16px 0 0;
    padding: 12px 16px;
    background: var(--pl-parch-light);
    border-left: 6px solid var(--sr-accent);
    font-weight: 700;
}

.pl-sr-advice b {
    display: block;
    font-size: 12.5px;
    color: var(--pl-ink-soft);
}

.pl-sr-dex {
    margin-top: 22px;
}

.pl-sr-dex-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 8px;
}

.pl-sr-dex-cell {
    display: grid;
    justify-items: center;
    gap: 2px;
    height: 100%;
    padding: 8px 4px;
    background: var(--pl-navy-tile);
    border: 2px solid var(--pl-navy-line);
    box-shadow: inset 0 0 0 2px var(--pl-navy-deep);
    color: var(--pl-white);
    text-decoration: none;
    text-align: center;
}

.pl-sr-dex-cell img {
    width: 64px;
    height: 64px;
}

/* 図鑑用のドット絵が無い型（3問瞬間）は、場面の縮小版を丸く切る */
.pl-sr-dex-thumb {
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--pl-navy-line-soft);
}

.pl-sr-dex-cell:hover {
    border-color: var(--pl-gold);
}

.pl-sr-dex-cell.is-current {
    border: 3px solid var(--pl-gold);
    box-shadow: inset 0 0 0 2px var(--pl-navy-deep), 0 0 0 3px var(--pl-gold-dark), 0 0 16px rgba(242, 201, 76, 0.55);
}

.pl-sr-dex-name {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.35;
    word-break: auto-phrase;
}

/* 図鑑の列数は結果の数に合わせる（10列固定だと8種で右が空き、長い名前がはみ出していた）。
   8種→8列・12種→6列×2段・16種→8列×2段。スマホは下の @media で5列・4列 */
@media (min-width: 961px) {
    .pl-sd-dex-list:has(> :nth-child(8):last-child),
    .pl-sr-dex-list:has(> :nth-child(8):last-child),
    .pl-sd-dex-list:has(> :nth-child(16):last-child),
    .pl-sr-dex-list:has(> :nth-child(16):last-child) {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .pl-sd-dex-list:has(> :nth-child(12):last-child),
    .pl-sr-dex-list:has(> :nth-child(12):last-child) {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.pl-sr-dex-rate {
    font-family: var(--pl-dot);
    font-weight: 700;
    font-size: 12px;
    color: var(--pl-gold);
}

.pl-sr-dex-note {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--pl-muted);
}

.pl-sr-sticky {
    display: none;
}

/* ------------------------------------------------------------ 画面幅 */

@media (max-width: 960px) {
    .pl-sd-land,
    .pl-sr-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pl-sd-dex-list,
    .pl-sr-dex-list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    /* 8種・12種・16種は4列にして、2段目が半端に空かないようにする（5列だと8種で「5＋3」になっていた） */
    .pl-sd-dex-list:has(> :nth-child(8):last-child),
    .pl-sr-dex-list:has(> :nth-child(8):last-child),
    .pl-sd-dex-list:has(> :nth-child(12):last-child),
    .pl-sr-dex-list:has(> :nth-child(12):last-child),
    .pl-sd-dex-list:has(> :nth-child(16):last-child),
    .pl-sr-dex-list:has(> :nth-child(16):last-child) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .pl-sd-others .pl-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pl-sd-steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .pl-sr-data {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .pl-game-stamp {
        --stamp-k: 1;
        --stamp-kd: 1;
    }

    .pl-game-frame {
        width: 100vw;
        height: 100%;
        border: 0;
        box-shadow: none;
    }

    .pl-game-title {
        font-size: 13px;
    }

    .pl-game-char {
        left: 4%;
        bottom: auto;
        top: 8%;
        width: 96px;
        height: 128px;
    }

    .pl-game-bg {
        object-position: 30% center;
    }

    .pl-game-message {
        min-height: 0;
        padding: 22px 18px 26px;
    }

    .pl-game-commands {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        padding: 8px;
    }

    /* 指で押すので、選択肢ごとに枠を見せる */
    .pl-game-command {
        border-color: var(--pl-navy-line-soft);
    }

    .pl-game-question {
        padding: 12px 16px;
    }

    .pl-sr-share-row,
    .pl-sr-rel {
        grid-template-columns: minmax(0, 1fr);
    }

    .pl-sd-others .pl-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .pl-sr-again-in {
        flex-wrap: wrap;
    }

    .pl-sr-again-btn {
        width: 100%;
    }

    .pl-sd-start {
        width: 100%;
    }

    /* 共有リンクから来た人向け。スマホでは「自分も面接を受ける」を画面の下に固定する */
    .pl-sr-sticky {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: rgba(6, 17, 42, 0.95);
        border-top: 3px solid var(--pl-gold-dark);
    }

    .pl-sr {
        padding-bottom: 86px;
    }
}

@media (max-width: 480px) {
    .pl-sd-dex-list,
    .pl-sr-dex-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .pl-sr-stamp {
        --stamp-k: 0.62;
        top: -14px;
        left: -6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pl-game-char,
    .pl-game-next,
    .pl-game-command::before {
        animation: none;
    }

    .pl-game-bg,
    .pl-game-gauge span {
        transition: none;
    }
}

/* ------------------------------------------------------------ 検索用の診断の見出しの下の一言・関連ページへのリンク（2026-09-24） */

.pl-sd-kicker {
    margin: -2px 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--pl-ink-soft);
}

.pl-sr-link {
    display: grid;
    gap: 6px;
    margin: 16px 0 0;
    padding: 12px 16px;
    background: var(--pl-parch-light);
    border: 2px solid var(--pl-parch-dark);
    font-size: 14px;
    line-height: 1.8;
}

.pl-sr-link a {
    justify-self: start;
    font-weight: 900;
    color: var(--pl-blue);
}

@media (min-width: 961px) {
    .pl-sr-read-in > .pl-sr-link {
        column-span: all;
    }
}

/* ------------------------------------------------------------ 解説欄（templates/play/_guide.html・設計 §10-2） */

.pl-guide {
    margin-top: 22px;
}

.pl-guide-in {
    padding: 8px 18px 18px;
}

.pl-guide-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 900;
    color: var(--pl-ink-soft);
}

.pl-guide-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 0 0 18px;
}

.pl-guide-toc a {
    padding: 4px 10px;
    background: var(--pl-parch-light);
    border: 2px solid var(--pl-parch-dark);
    font-size: 13px;
    font-weight: 700;
    color: var(--pl-ink);
    text-decoration: none;
}

.pl-guide-toc a:hover {
    border-color: var(--pl-wood-light);
    color: var(--pl-blue);
}

.pl-guide-block {
    scroll-margin-top: 80px;
}

.pl-guide-block + .pl-guide-block {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 2px dashed var(--pl-parch-dark);
}

.pl-guide-h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.4;
}

.pl-guide-h2 img,
.pl-guide-eyebrow img {
    flex: none;
}

.pl-guide-block > p {
    max-width: 46em;
    margin: 0 0 12px;
    line-height: 1.95;
}

.pl-guide-h3 {
    margin: 18px 0 8px;
    padding-left: 10px;
    border-left: 6px solid var(--sr-accent, var(--pl-gold-dark));
    font-size: 16px;
    font-weight: 900;
    line-height: 1.5;
}

.pl-guide-links {
    display: grid;
    gap: 6px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.pl-guide-links a {
    font-weight: 900;
    color: var(--pl-blue);
}

/* 表: 横にはみ出す幅になっても、ページではなく表の中だけが横に動く */
.pl-guide-scroll {
    max-width: 100%;
    overflow-x: auto;
    margin: 4px 0 10px;
}

.pl-guide-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--pl-parch-light);
    font-size: 14px;
    line-height: 1.6;
}

.pl-guide-table caption {
    padding: 0 0 6px;
    text-align: left;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--pl-ink-soft);
}

.pl-guide-table th,
.pl-guide-table td {
    padding: 8px 10px;
    border: 2px solid var(--pl-parch-dark);
    text-align: left;
    vertical-align: top;
}

.pl-guide-table thead th {
    background: var(--pl-wood);
    color: var(--pl-white);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.pl-guide-table tbody th {
    border-left: 6px solid var(--g-accent, var(--pl-parch-dark));
    font-weight: 900;
    white-space: nowrap;
}

.pl-guide-table a {
    color: var(--pl-blue);
    font-weight: 900;
}

/* 語の一覧（style: words・名前メーカーの名・姓・二つ名）: 「ソフィ／ア」と語の途中で折らない。
   語は「 ／ 」（前後に空白）で区切ってあり、折れるのは空白だけ。1語が枠より長いときだけ語の中で折る */
.pl-guide-table--words td {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* 相性表（8×8）: マスは印1字。色で種類を分け、凡例と同じ色にする。PCで横に間延びしないよう幅に上限 */
.pl-guide-table--matrix {
    width: 100%;
    max-width: 760px;
    table-layout: fixed;
}

.pl-guide-table--matrix th,
.pl-guide-table--matrix td {
    padding: 6px 2px;
    text-align: center;
    vertical-align: middle;
}

.pl-guide-table--matrix thead th:first-child {
    width: 5.2em;
    font-size: 11px;
    white-space: normal;
    line-height: 1.3;
}

.pl-guide-table--matrix tbody th {
    border-left-width: 6px;
}

.pl-guide-mark {
    font-weight: 900;
    font-size: 17px;
}

.pl-guide-mark--best { color: var(--pl-green); }
.pl-guide-mark--lead { color: var(--pl-blue-light); }
.pl-guide-mark--hard { color: var(--pl-red); }
.pl-guide-mark--same { color: var(--pl-ink-soft); }
.pl-guide-mark--none { color: #a8966a; }

td.pl-guide-mark--best { background: #e6f1dc; }
td.pl-guide-mark--hard { background: #f7e1d6; }

.pl-guide-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    font-size: 13px;
    font-weight: 700;
}

.pl-guide-legend li {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* よくある質問 */
.pl-guide-faq {
    display: grid;
    gap: 10px;
    margin: 0;
}

.pl-guide-faq > div {
    padding: 10px 14px;
    background: var(--pl-parch-light);
    border: 2px solid var(--pl-parch-dark);
}

.pl-guide-faq dt,
.pl-guide-faq dd {
    display: grid;
    grid-template-columns: 1.8em minmax(0, 1fr);
    margin: 0;
    line-height: 1.8;
}

.pl-guide-faq dt {
    font-weight: 900;
}

.pl-guide-faq dd {
    margin-top: 4px;
    font-size: 14.5px;
}

.pl-guide-faq dt > span,
.pl-guide-faq dd > span {
    font-weight: 900;
    color: var(--pl-wood);
}

.pl-guide-faq dd > span {
    color: var(--pl-blue);
}

.pl-guide-block--notice > p {
    font-size: 13.5px;
    color: var(--pl-ink-soft);
}

@media (max-width: 720px) {
    .pl-guide-in {
        padding: 6px 4px 12px;
    }

    .pl-guide-h2 {
        font-size: 18px;
    }

    /* 一覧表はスマホでは1行を1枚のカードにして縦に積む（4列の文章は375pxに入らない） */
    .pl-guide-table--list thead {
        display: none;
    }

    .pl-guide-table--list,
    .pl-guide-table--list tbody,
    .pl-guide-table--list tr,
    .pl-guide-table--list th,
    .pl-guide-table--list td {
        display: block;
        width: 100%;
    }

    .pl-guide-table--list caption {
        display: block;
    }

    .pl-guide-table--list {
        background: transparent;
    }

    .pl-guide-table--list tr {
        margin-bottom: 10px;
        background: var(--pl-parch-light);
        border: 2px solid var(--pl-parch-dark);
    }

    .pl-guide-table--list tbody th {
        border: 0;
        border-bottom: 2px dashed var(--pl-parch-dark);
        box-shadow: inset 6px 0 0 var(--g-accent, var(--pl-parch-dark));
        padding-left: 16px;
        font-size: 16px;
    }

    .pl-guide-table--list td {
        display: grid;
        grid-template-columns: 5.5em minmax(0, 1fr);
        gap: 8px;
        padding: 6px 10px;
        border: 0;
    }

    .pl-guide-table--list td::before {
        content: attr(data-label);
        font-size: 12.5px;
        font-weight: 900;
        color: var(--pl-ink-soft);
    }

    /* 語の一覧は列が「一覧」1つだけなので、見出しの欄を置かず幅を全部使う */
    .pl-guide-table--words td {
        display: block;
    }

    .pl-guide-table--words td::before {
        content: none;
    }

    .pl-guide-table--matrix {
        font-size: 13px;
    }

    .pl-guide-table--matrix thead th {
        padding: 6px 0;
    }

    .pl-guide-table--matrix thead th:first-child {
        width: 4.4em;
        font-size: 10px;
    }

    .pl-guide-mark {
        font-size: 15px;
    }
}

/* 型3 ステータスビルド: ゲージの名前に3字のものがある診断（性格悪い診断の「優しさ・自己愛」）。data の ui.wide_labels で付く。
   既定の 2.6em（HP・攻撃）だと3字目がゲージに重なる。書かない診断（ラスボス第二形態）は今までどおり */
.pl-st--wide .pl-st-bar {
    grid-template-columns: 3.3em minmax(0, 1fr) 1.2em;
}

.pl-st--wide .pl-st-form .pl-st-bar {
    grid-template-columns: 3.3em minmax(0, 1fr) 3.2em;
}

.pl-st--wide .pl-st-form--second .pl-st-bar {
    grid-template-columns: 3.3em minmax(0, 1fr) 3.2em 1.2em;
}

/* 結果の数字の箱: 「性格悪い度」（5字）が「性格悪い／度」と折れないよう、見出しは1行のまま箱の幅を中身に合わせる */
.pl-st--wide .pl-sr-stats {
    display: flex;
    flex-wrap: wrap;
}

.pl-st--wide .pl-sr-stat {
    flex: 1 1 auto;
}

.pl-st--wide .pl-sr-stat dt {
    white-space: nowrap;
}

@media (max-width: 480px) {
    .pl-st--wide .pl-st-bar {
        grid-template-columns: 3em minmax(0, 1fr) 1em;
    }
}

/* ------------------------------------------------------------ 型11 タイムアタックの結果（本人の記録の行） */
/* 反射神経テストの結果ページ。結果URLの ?ms= で、その平均がこの結果になるときだけ出る（play/shindan_views._timeattack_measure） */
.pl-sr-stat--own dd {
    color: var(--sr-accent, var(--pl-gold-dark));
}

/* 結果の帯（「平均 200〜229ms」）は数字より長いので、見出しを上・帯を下に置き、少し小さく・折らずに */
.pl-sr-stat--band {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
}

.pl-sr-stat--band dt {
    white-space: nowrap;
}

.pl-sr-stat--band dd {
    font-size: 18px;
    white-space: nowrap;
}

.pl-sr-measure {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 12px;
    margin: -4px 0 12px;
    font-family: var(--pl-dot);
    font-weight: 700;
    font-size: 13.5px;
    color: var(--pl-ink);
}

.pl-sr-measure span {
    white-space: nowrap;
}