/* 結果の文字・数値・操作を画像の縦横比から独立させる。
   承認原画はそのまま再利用し、コーギーと襖の領域だけをCSSで配置する。
   通常サイズは一画面内、文字拡大時は縮小/切捨てせず外枠でスクロールする。 */
#app[data-screen="result"] {
  display: grid;
  grid-template-rows: calc(60px + env(safe-area-inset-top)) minmax(0, 1fr);
  height: 100dvh;
  min-height: 0;
  max-height: 100dvh;
  padding: 0;
  overflow: auto;
  color: #381c0d;
  background: #ead1a0;
}
#app[data-screen="result"] .topbar {
  position: relative;
  z-index: 3;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: linear-gradient(#bb8959 0 3px, #eddbb9 3px 100%);
}
#app[data-screen="result"] .masthead-home {
  top: calc(env(safe-area-inset-top) + 8px);
  left: 50%;
  right: auto;
  width: 124px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  transform: translateX(-50%);
}
#app[data-screen="result"] .masthead-art__fallback { font-size: 1.15rem; }
#app[data-screen="result"] .game-back { visibility: visible; }
#app[data-screen="result"] main {
  display: block;
  min-height: 0;
  padding: 0 max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}
#app .result {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: min(100%, 440px);
  height: 100%;
  min-height: 0;
  margin: auto;
  padding: 0;
  text-align: center;
}
#app .result-scene {
  --result-art: var(--result-over-art, url('../assets/results/corgi-over.webp'));
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "headline headline" "hero hero" "label label" "score score" "mode answer" "stats stats" "cheer cheer" "actions actions" "sharing sharing";
  grid-template-rows: auto minmax(80px, 1fr) auto auto auto auto auto minmax(44px, auto) minmax(44px, auto);
  gap: 4px 8px;
  flex: 1 0 auto;
  width: 100%;
  min-height: 0;
  margin: 0;
  container-type: inline-size;
  isolation: isolate;
  color: #381c0d;
  background: none;
}
#app .result-scene[data-outcome="clear"] { --result-art: var(--result-clear-art, url('../assets/results/corgi-clear.webp')); }
/* 原画の x=0..863 / y=395..970。犬の耳・足・尻尾をすべて含む。
   高さを上限に、原画の比率のまま背景を表示。UI全体のscaleは使わない。 */
#app .result-scene::before {
  content: "";
  grid-area: hero;
  place-self: center;
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: calc(100cqw * 575 / 863);
  min-width: 0;
  min-height: 0;
  aspect-ratio: 863 / 575;
  border-radius: 14px;
  background-image: var(--result-art);
  background-size: 100% auto;
  background-position: center 31.650641%;
  background-repeat: no-repeat;
  box-shadow: 0 1px 4px #76533435;
  pointer-events: none;
}
#app .result-scene #result-mark { display: none; }
#app .result-scene__headline {
  grid-area: headline;
  position: static;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid #c89c67;
  border-radius: 18px 16px 19px 15px;
  background: radial-gradient(ellipse at 50% 25%, #fff9e9, #fae9c9);
  box-shadow: 0 2px 0 #9d704744, inset 0 0 0 2px #fff7e5;
}
#app .result-scene h1,
#app .result-scene h1[data-long="true"],
#app .result-scene[data-outcome="failed"] h1,
#app .result-scene[data-outcome="failed"] h1[data-long="true"] {
  margin: 0;
  padding: 0;
  color: #b72f1b;
  font-size: clamp(1.3rem, 6.8cqw, 1.85rem);
  font-weight: 950;
  line-height: 1.1;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 0 #fff;
}
#app .result-scene[data-outcome="clear"] h1 { color: #247533; }
#app #result-subtitle {
  margin: 0;
  padding: 0;
  color: #50321b;
  font-size: .8125rem;
  font-weight: 750;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
#app .result-scene__score-label {
  grid-area: label;
  position: static;
  align-self: end;
  margin: 0;
  font-size: .875rem;
  font-weight: 850;
  line-height: 1.15;
}
#app .result__score {
  grid-area: score;
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding-block: 2px;
  color: #381c0d;
  line-height: 1;
}
#app .result__score strong {
  font-family: ui-rounded, system-ui, sans-serif;
  font-size: clamp(2.15rem, 10cqw, 2.8rem);
  font-weight: 950;
  line-height: 1.2;
  letter-spacing: -.035em;
  white-space: nowrap;
}
#app .result__score span { align-self: end; margin: 0; padding-bottom: 3px; font-size: .8125rem; font-weight: 850; }
#app .result__mode,
#app .result-scene__answer-mode {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 24px;
  margin: 0;
  padding: 3px 7px;
  border: 1px solid #b58c57;
  border-radius: 999px;
  box-shadow: none;
  font-size: .8125rem;
  font-weight: 800;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
#app .result__mode { grid-area: mode; justify-self: end; width: min(100%, 130px); color: #fffdf3; border-color: #47713b; background: #3e7b36; }
#app .result-scene__answer-mode { grid-area: answer; justify-self: start; width: min(100%, 160px); color: #472515; background: #fff1d9; }
#app .result__stats {
  grid-area: stats;
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
#app .result__stats > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  margin: 0;
  padding: 4px;
  border: 1px solid #d2ad7b;
  border-radius: 12px;
  background: #fff1d9;
}
#app .result__stats dt { margin: 0; color: #654329; font-size: .8125rem; font-weight: 750; line-height: 1.15; overflow-wrap: anywhere; }
#app .result__stats dd { margin: 0; font-size: 1.25rem; font-weight: 950; line-height: 1.1; white-space: nowrap; }
#app .result-scene__cheer {
  grid-area: cheer;
  position: static;
  margin: 0;
  color: #a13a23;
  font-size: .8125rem;
  font-weight: 850;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
#app .result-scene[data-outcome="clear"] .result-scene__cheer { color: #286c64; }
#app .result__actions {
  grid-area: actions;
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
}
#app .result__actions button {
  width: 100%;
  min-width: 44px;
  min-height: 44px;
  height: 100%;
  margin: 0;
  padding: 6px 10px;
  border: 2px solid #9d631e;
  border-radius: 999px;
  background: linear-gradient(#ffe67e, #ffd04e 60%, #ffc338);
  box-shadow: inset 0 2px 0 #fff6ba, 0 2px 0 #8f542966;
  color: #321706;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
#app .result__actions button:active { transform: translateY(1px); background: #ffc43d; }
#app .result-sharing { grid-area: sharing; position: static; width: 100%; min-width: 0; margin: 0; padding: 0; }
#app .result-share-actions { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(44px, .65fr); gap: 6px; height: 100%; margin: 0; }
#app .result-share-actions :is(button, a) {
  min-width: 44px;
  min-height: 44px;
  height: 100%;
  margin: 0;
  padding: 4px 5px;
  border: 1px solid #9f734b;
  border-radius: 16px;
  background: #fff3df;
  box-shadow: 0 1px 0 #79512d33;
  color: #381e10;
  font-size: .8125rem;
  font-weight: 850;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
#app .result-share-actions :is(button, a):disabled { opacity: .6; }
#app .result-details {
  display: grid;
  flex: none;
  gap: 3px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 5px 7px;
  border: 1px solid #d1b184;
  border-radius: 10px;
  background: #fff4de;
}
#app .result-details p { margin: 0; padding: 0; color: #604328; font-size: .75rem; font-weight: 550; line-height: 1.2; overflow-wrap: anywhere; }
#app .result-details #result-progress { font-weight: 800; color: #3f622c; }
#app .result-details #result-share-status { font-weight: 800; }
#app .result-details p:empty { display: none; }
#app #result-share-fallback { min-width: 0; }
#app #result-share-text {
  display: block;
  width: 100%;
  height: 64px;
  min-height: 64px;
  margin: 0;
  padding: 5px;
  border: 1px solid #ac855e;
  border-radius: 7px;
  background: #fffaf0;
  color: #3f291c;
  font: inherit;
  font-size: .75rem;
  line-height: 1.2;
  resize: vertical;
  user-select: text;
  -webkit-user-select: text;
}
/* 短い縦画面は犬とスコアを左右に置く。図だけを小さくし、文字/操作は縮めない。 */
@media (max-height: 739px), (max-width: 359px) {
  #app .result-scene {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    grid-template-areas: "headline headline" "hero label" "hero score" "hero mode" "hero answer" "stats stats" "cheer cheer" "actions actions" "sharing sharing";
    grid-template-rows: auto auto minmax(36px, 1fr) auto auto auto auto minmax(44px, auto) minmax(44px, auto);
    gap: 3px 8px;
  }
  /* 原画 x=30..570 / y=410..970。顔だけでなく耳・足・尻尾も残す。 */
  #app .result-scene::before {
    max-height: calc((46cqw - 4px) * 560 / 540);
    aspect-ratio: 540 / 560;
    background-size: 159.814815% auto;
    background-position: 9.287926% 32.462391%;
  }
  #app .result-scene__headline { min-height: 48px; padding-block: 4px; }
  #app .result__mode, #app .result-scene__answer-mode { justify-self: center; width: min(100%, 170px); min-height: 22px; font-size: .75rem; }
  #app .result__score strong { font-size: clamp(1.9rem, 10cqw, 2.5rem); }
  #app .result__stats > div { padding-block: 3px; }
}
/* 共有APIが使えない場合も、選択可能な本文を一画面内に加える余地を作る。 */
#app .result:has(#result-share-fallback:not([hidden])) .result-scene {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  grid-template-areas: "headline headline" "hero label" "hero score" "hero mode" "hero answer" "stats stats" "cheer cheer" "actions actions" "sharing sharing";
  grid-template-rows: auto auto minmax(32px, 1fr) auto auto auto auto minmax(44px, auto) minmax(44px, auto);
  gap: 2px 8px;
}
#app .result:has(#result-share-fallback:not([hidden])) .result-scene::before {
  max-height: calc((46cqw - 4px) * 560 / 540);
  aspect-ratio: 540 / 560;
  background-size: 159.814815% auto;
  background-position: 9.287926% 32.462391%;
}
#app .result:has(#result-share-fallback:not([hidden])) .result-scene__headline { min-height: 44px; padding-block: 3px; }
#app .result:has(#result-share-fallback:not([hidden])) .result__mode,
#app .result:has(#result-share-fallback:not([hidden])) .result-scene__answer-mode { justify-self: center; width: min(100%, 170px); min-height: 20px; padding-block: 2px; font-size: .75rem; }
#app .result:has(#result-share-fallback:not([hidden])) .result__stats > div { padding-block: 2px; }
/* 横画面では同じDOMを広いグリッドへ流す。左が絵、右が成績と操作。
   display:contentsは意味/操作を持たないsceneだけに使う。 */
@media (orientation: landscape) and (min-width: 640px) {
  #app[data-screen="result"] { display: block; }
  #app[data-screen="result"] .topbar { position: absolute; inset: 0 auto auto 0; width: 30%; height: 60px; background: none; }
  #app[data-screen="result"] .masthead-home { left: calc(50% + 15px); width: 112px; }
  #app[data-screen="result"] main { height: 100%; padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  #app .result {
    display: grid;
    grid-template-columns: minmax(180px, .85fr) minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas: "brand headline headline" "hero label stats" "hero score stats" "hero mode answer" "hero cheer cheer" "hero actions sharing" "hero details details";
    grid-template-rows: auto auto minmax(30px, 1fr) auto auto minmax(44px, auto) auto;
    gap: 3px 10px;
    width: 100%;
  }
  #app .result-scene,
  #app .result:has(#result-share-fallback:not([hidden])) .result-scene { display: contents; }
  #app .result-scene::before,
  #app .result:has(#result-share-fallback:not([hidden])) .result-scene::before {
    max-height: min(100%, calc((100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 40px) * .275 * 560 / 540));
    aspect-ratio: 540 / 560;
    background-size: 159.814815% auto;
    background-position: 9.287926% 32.462391%;
  }
  #app .result-scene__headline,
  #app .result:has(#result-share-fallback:not([hidden])) .result-scene__headline { min-height: 44px; padding: 3px 10px; }
  #app .result-scene h1,
  #app .result-scene h1[data-long="true"],
  #app .result-scene[data-outcome="failed"] h1,
  #app .result-scene[data-outcome="failed"] h1[data-long="true"] { font-size: 1.5rem; }
  #app .result__score strong { font-size: 2rem; }
  #app .result__mode,
  #app .result-scene__answer-mode,
  #app .result:has(#result-share-fallback:not([hidden])) .result__mode,
  #app .result:has(#result-share-fallback:not([hidden])) .result-scene__answer-mode { justify-self: center; width: min(100%, 170px); min-height: 22px; padding-block: 2px; font-size: .75rem; }
  #app .result__stats { align-self: stretch; }
  #app .result__stats dt { font-size: .75rem; }
  #app .result__stats dd { font-size: 1.2rem; }
  #app .result__actions { gap: 6px; }
  #app .result__actions button { padding-inline: 5px; font-size: .875rem; }
  #app .result-share-actions { gap: 4px; }
  #app .result-share-actions :is(button, a) { padding-inline: 3px; font-size: .75rem; }
  #app .result-details { grid-area: details; padding: 4px 7px; }
  #app .result-details:has(#result-share-fallback:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "progress fallback" "notice fallback" "note fallback" "status fallback";
    align-items: center;
    column-gap: 8px;
  }
  #app .result-details:has(#result-share-fallback:not([hidden])) #result-progress { grid-area: progress; }
  #app .result-details:has(#result-share-fallback:not([hidden])) #result-notice { grid-area: notice; }
  #app .result-details:has(#result-share-fallback:not([hidden])) #result-share-note { grid-area: note; }
  #app .result-details:has(#result-share-fallback:not([hidden])) #result-share-status { grid-area: status; }
  #app .result-details:has(#result-share-fallback:not([hidden])) #result-share-fallback { grid-area: fallback; }
  #app .result-details:has(#result-share-fallback:not([hidden])) #result-share-text { height: 76px; min-height: 76px; }
}
/* 部屋の全面背景: ホームと同じく画面いっぱいの和室に、透過したコーギーと操作を重ねる。
   犬は背景に描き込まず別素材にし、画面の高さが変わっても札やボタンに隠れないようにする。 */
#app[data-screen="result"] {
  background: #e8d3a6 url('../assets/results/room.webp') center 30% / cover no-repeat;
}
#app[data-screen="result"] .topbar { background: linear-gradient(#bb8959 0 3px, transparent 3px); }
#app[data-screen="result"] .game-back { background: #fff8eaee; }
#app .result-scene::before,
#app .result:has(#result-share-fallback:not([hidden])) .result-scene::before {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 0;
  background-image: var(--result-art);
  background-size: contain;
  background-position: center bottom;
  box-shadow: none;
  filter: drop-shadow(0 3px 4px #5a3a1f33);
}
/* 成績と操作の下敷き。DOMは増やさず、scene自身の疑似要素を該当する行へ置く。 */
#app .result-scene::after {
  content: "";
  grid-column: 1 / -1;
  grid-row: label-start / sharing-end;
  place-self: stretch;
  z-index: -1;
  margin: -8px -6px -6px;
  border: 1px solid #c79c66;
  border-radius: 20px;
  background: #fff6e4ec;
  box-shadow: 0 3px 10px #6b45222e;
  pointer-events: none;
}
#app .result-details { background: #fff6e4ec; box-shadow: 0 2px 8px #6b452224; }
#app .result-scene__headline { box-shadow: 0 2px 0 #9d704744, 0 4px 12px #6b452226, inset 0 0 0 2px #fff7e5; }

@media (orientation: portrait) {
  /* 下敷きの札が外へはみ出さないよう、札の余白分だけ内側に寄せる。 */
  #app .result { justify-content: flex-start; gap: 12px; padding-inline: 6px; padding-bottom: 6px; }
  #app .result-scene,
  #app .result:has(#result-share-fallback:not([hidden])) .result-scene {
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "headline headline" "hero hero" "label label" "score score" "mode answer" "stats stats" "cheer cheer" "actions actions" "sharing sharing";
    grid-template-rows: auto minmax(72px, 1fr) auto auto auto auto auto minmax(44px, auto) minmax(44px, auto);
    gap: 4px 8px;
  }
  /* 背の高い画面でも犬を襖いっぱいに拡大せず、畳の上に座る大きさで止める。 */
  #app .result-scene::before,
  #app .result:has(#result-share-fallback:not([hidden])) .result-scene::before { place-self: end center; height: min(100% - 10px, 230px); margin-bottom: 10px; }
  #app .result-scene__score-label { margin-top: 2px; align-self: end; }
  #app .result__mode, #app .result-scene__answer-mode,
  #app .result:has(#result-share-fallback:not([hidden])) .result__mode,
  #app .result:has(#result-share-fallback:not([hidden])) .result-scene__answer-mode { width: min(100%, 150px); min-height: 22px; font-size: .75rem; }
  #app .result__mode { justify-self: end; }
  #app .result-scene__answer-mode { justify-self: start; }
  #app .result__score strong { font-size: clamp(1.9rem, 10cqw, 2.6rem); }
  #app .result__stats > div { padding-block: 3px; }
}
@media (orientation: portrait) and (min-height: 740px) {
  #app .result-scene, #app .result:has(#result-share-fallback:not([hidden])) .result-scene { gap: 6px 8px; }
  #app .result__actions { margin-top: 4px; }
}

/* 横画面: 左に部屋とコーギー、右に札。成績と操作を上下の空き行で挟んで中央に置く。 */
@media (orientation: landscape) and (min-width: 640px) {
  #app[data-screen="result"] { background-position: center 62%; }
  #app .result {
    isolation: isolate;
    grid-template-areas: "brand headline headline" "hero . ." "hero label stats" "hero score stats" "hero mode answer" "hero cheer cheer" "hero actions sharing" "hero details details" "hero . .";
    grid-template-rows: auto minmax(0, 1fr) auto auto auto auto minmax(44px, auto) auto minmax(0, 1fr);
    gap: 3px 10px;
  }
  #app .result-scene::before,
  #app .result:has(#result-share-fallback:not([hidden])) .result-scene::before { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; background-size: contain; background-position: center 70%; }
  #app .result { padding-right: 6px; }
  #app .result-scene::after { grid-column: 2 / 4; grid-row: label-start / sharing-end; place-self: stretch; margin: -6px -6px -4px; }
  #app[data-screen="result"] .masthead-home { filter: drop-shadow(0 0 6px #fff6e4) drop-shadow(0 0 2px #fff6e4); }
  #app .result-scene__headline { justify-self: stretch; width: auto; }
  #app .result-scene__score-label { align-self: end; }
}

/* クリア後に次の難易度がある場合だけ、もういちど/ホームへの上に全幅で出す主操作。 */
#app .result__actions .result-next { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(#ffe27a, #ffc93f 60%, #ffb92c); font-size: 1.0625rem; }
#app .result__actions .result-next svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#app .result__actions .result-next[hidden] { display: none; }
/* 2段になっても各ボタンが自分の行の高さを持つよう、%高さをやめて行の最小高さで揃える。 */
#app .result__actions:has(.result-next:not([hidden])) { grid-auto-rows: minmax(44px, auto); align-self: start; }
#app .result__actions:has(.result-next:not([hidden])) button { height: auto; }
/* 次へがある間は、もういちど/ホームへを控えめな副操作にする。 */
#app .result__actions:has(.result-next:not([hidden])) .button:not(.result-next) { background: #fff3df; border: 1px solid #9f734b; box-shadow: 0 1px 0 #79512d33; font-size: .875rem; }

/* 下の説明欄は出さない（解放の案内は「つぎへ」ボタン、自己ベストはホームのハイスコアで分かる）。
   共有の結果表示とコピー用の本文だけは、操作したときに出す。 */
#app .result-details { display: none; }
#app .result-details:has(#result-share-status:not(:empty), #result-share-fallback:not([hidden])) { display: grid; }
#app .result-details :is(#result-progress, #result-notice, #result-share-note) { display: none; }
/* 操作の行は中身の高さを必ず確保し、余りは犬の行で吸収する。 */
@media (orientation: portrait) {
  #app .result-scene,
  #app .result:has(#result-share-fallback:not([hidden])) .result-scene {
    grid-template-rows: auto minmax(0, 1fr) auto auto auto auto auto auto auto;
  }
}
@media (orientation: landscape) and (min-width: 640px) {
  #app .result { grid-template-rows: auto minmax(0, 1fr) auto auto auto auto auto auto minmax(0, 1fr); }
  /* 左の操作が2段のとき、共有ボタンは伸ばさず下段にそろえる。 */
  #app .result-sharing { align-self: end; }
  #app .result-share-actions { height: auto; }
  #app .result-share-actions :is(button, a) { height: 44px; }
}

/* 縦画面の結果札をコンパクトにする。部屋とコーギーを広く見せ、操作は44pxを保つ。 */
@media (orientation: portrait) {
  #app .result-scene__headline { min-height: 44px; padding: 4px 10px; }
  #app .result-scene h1,
  #app .result-scene h1[data-long="true"],
  #app .result-scene[data-outcome="failed"] h1,
  #app .result-scene[data-outcome="failed"] h1[data-long="true"] { font-size: clamp(1.2rem, 5.6cqw, 1.45rem); }
  #app #result-subtitle { font-size: .75rem; }
  #app .result-scene__score-label { font-size: .75rem; line-height: 1.35; }
  #app .result__score strong { font-size: clamp(1.55rem, 7.4cqw, 1.95rem); }
  #app .result__score span { font-size: .6875rem; padding-bottom: 2px; }
  #app .result__mode, #app .result-scene__answer-mode,
  #app .result:has(#result-share-fallback:not([hidden])) .result__mode,
  #app .result:has(#result-share-fallback:not([hidden])) .result-scene__answer-mode { width: min(100%, 120px); min-height: 20px; padding-block: 1px; font-size: .6875rem; }
  #app .result__stats { gap: 5px; }
  #app .result__stats > div { padding: 2px 4px; border-radius: 10px; }
  #app .result__stats dt { font-size: .6875rem; }
  #app .result__stats dd { font-size: 1.0625rem; }
  #app .result-scene__cheer { font-size: .75rem; }
  #app .result__actions { gap: 6px; }
  #app .result__actions button { font-size: .9375rem; padding-block: 4px; }
  #app .result-share-actions { gap: 5px; }
  #app .result-share-actions :is(button, a) { font-size: .75rem; }
  #app .result-scene::after { margin: -6px -4px -5px; border-radius: 18px; }
}

/* 共有は「シェア」（共有シート、無ければXの投稿画面）と「コピー」の2つ。 */
#app .result-share-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* 縦画面: 見出し札を大きくし、余った高さを「見出しの上」と「犬の行」に1:3で分けて、
   犬の上に大きな空きが偏らないようにする。犬も少し大きく（最大260px）する。 */
@media (orientation: portrait) {
  #app .result-scene,
  #app .result:has(#result-share-fallback:not([hidden])) .result-scene {
    grid-template-areas: "space space" "headline headline" "hero hero" "label label" "score score" "mode answer" "stats stats" "cheer cheer" "actions actions" "sharing sharing";
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 3fr) auto auto auto auto auto auto auto;
  }
  #app .result-scene::before,
  #app .result:has(#result-share-fallback:not([hidden])) .result-scene::before { height: min(100% - 10px, 260px); }
}
/* 見出し札を大きくするのは高さに余裕のある縦画面だけ（小さい画面はコピー欄が出ても収める）。 */
@media (orientation: portrait) and (min-height: 700px) {
  #app .result-scene__headline { min-height: 68px; padding: 8px 14px; gap: 4px; border-radius: 22px 20px 23px 19px; }
  #app .result-scene h1,
  #app .result-scene h1[data-long="true"],
  #app .result-scene[data-outcome="failed"] h1,
  #app .result-scene[data-outcome="failed"] h1[data-long="true"] { font-size: clamp(1.6rem, 8cqw, 2.15rem); }
  #app #result-subtitle { font-size: .875rem; }
}

/* 結果からほかのゲームへ。シェア・コピーと同じ行に並べ、結果画面の高さを変えない。 */
#app .result-share-actions:has(#result-portal:not([hidden])) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#app .result-portal { display: flex; align-items: center; justify-content: center; box-sizing: border-box; text-align: center; text-decoration: none; touch-action: manipulation; }
#app .result-portal[hidden] { display: none; }
#app .result-portal:focus-visible { outline: 3px solid #381e10; outline-offset: 2px; }