/* issue 341 場景 solution-ransom-contain：落點影響範圍對照。場景卡一律深色（照原始概念圖 art-b）；只讀官網 token：
   擴散與警示 --arch-coral、分段與回應 --cloudforce-blue。文字桌機 13px 以上、手機 12px 以上，不淡化文字。
   沒有 JS（或減少動態）＝完成畫面；.is-armed 先回到起點，.is-play 後 CSS 動畫跑一次停住（--d：格子離落點的距離 ×0.28 秒）。 */
.page-blocks .pp-scene--solution-ransom-contain { --rk-card: var(--deeper); --rk-panel: color-mix(in srgb, var(--paper) 5%, var(--deeper)); --rk-cell: color-mix(in srgb, var(--cloudforce-blue) 10%, var(--deeper));
  --rk-edge: var(--on-dark-line); --rk-fg: var(--paper); --rk-mute: var(--muted-on-dark); --rk-hot: var(--arch-coral); --rk-hot-bg: color-mix(in srgb, var(--arch-coral) 22%, var(--deeper)); --rk-seg: var(--cloudforce-blue); }
.page-blocks .rk { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.page-blocks .rk-copy .pp-head { margin-bottom: 0; }
@media (min-width: 62rem) {
  .page-blocks .rk { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
}
.page-blocks .rk-card { container-type: inline-size; display: grid; gap: 1rem; padding: clamp(1rem, 2.2vw, 1.75rem); border: 1px solid var(--rk-edge); border-radius: var(--r-card); background: radial-gradient(80% 60% at 50% 30%, color-mix(in srgb, var(--rk-seg) 12%, transparent), transparent 70%), var(--rk-card); color: var(--rk-fg); }
.page-blocks .rk-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.page-blocks .rk-title { margin: 0; font-size: clamp(1.0625rem, 2.6cqi, 1.5rem); font-weight: 900; line-height: 1.3; }
.page-blocks .rk-badge { padding: .25rem .875rem; border: 1.5px solid var(--rk-edge); border-radius: var(--r-pill); color: var(--rk-mute); font-size: .8125rem; font-weight: 700; }
.page-blocks .rk-panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .875rem; }
.page-blocks .rk-panel { display: grid; gap: .375rem; padding: .875rem; border: 1.5px solid color-mix(in srgb, var(--rk-c) 45%, var(--rk-edge)); border-radius: var(--radius-l); background: var(--rk-panel); }
.page-blocks .rk-panel--open { --rk-c: var(--rk-hot); } .page-blocks .rk-panel--seg { --rk-c: var(--rk-seg); }
.page-blocks .rk-pt { margin: 0; color: var(--rk-c); font-size: clamp(.9375rem, 2.2cqi, 1.1875rem); font-weight: 900; }
.page-blocks .rk-ps { margin: 0; color: var(--rk-mute); font-size: .8125rem; font-weight: 700; }
.page-blocks .rk-pf { margin: .25rem 0 0; color: var(--rk-c); font-size: .8125rem; font-weight: 800; }
.page-blocks .rk-panel--seg .rk-pf { color: var(--rk-fg); }
.page-blocks .rk-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .375rem; margin-top: .5rem; }
.page-blocks .rk-cell { position: relative; display: grid; place-items: center; align-content: center; gap: .125rem; aspect-ratio: 7 / 6; border: 1.5px solid var(--rk-edge); border-radius: var(--radius-m); background: var(--rk-cell); transition: background .4s var(--ease), border-color .4s var(--ease); }
.page-blocks .rk-cell i { width: 28%; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--rk-seg) 55%, var(--deeper)); transition: background .4s var(--ease); }
.page-blocks .rk-cell b { color: var(--rk-fg); font-size: .8125rem; font-weight: 800; line-height: 1; }
.page-blocks .rk-cell.is-origin { border-width: 2.5px; }
.page-blocks .rk-cell.is-origin i { width: 34%; }
/* 完成畫面：左邊全部被擴散；右邊只有落點，外圍虛線框。 */
.page-blocks .rk-panel--open .rk-cell, .page-blocks .rk-cell.is-origin { border-color: var(--rk-hot); background: var(--rk-hot-bg); }
.page-blocks .rk-panel--open .rk-cell i, .page-blocks .rk-cell.is-origin i { background: var(--rk-hot); }
.page-blocks .rk-fence { position: absolute; z-index: 1; left: -.3125rem; top: -.3125rem; width: calc(50% + .4375rem); height: calc((100% - .75rem) / 3 + .625rem); border: 2px dashed var(--rk-hot); border-radius: var(--radius-l); pointer-events: none; }
.page-blocks .rk-times { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .5rem 1rem; }
.page-blocks .rk-tl { grid-row: span 2; margin: 0; color: var(--rk-mute); font-size: .8125rem; font-weight: 800; }
.page-blocks .rk-bar { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.page-blocks .rk-bar i { flex: none; height: .75rem; border-radius: .75rem; transform-origin: left; }
.page-blocks .rk-bar span { font-size: .8125rem; font-weight: 800; white-space: nowrap; }
.page-blocks .rk-bar--open i { width: 62%; border: 1.5px dashed var(--rk-hot); background: color-mix(in srgb, var(--rk-hot) 18%, transparent); }
.page-blocks .rk-bar--open span { color: var(--rk-hot); }
.page-blocks .rk-bar--seg i { width: 24%; background: var(--rk-seg); }
.page-blocks .rk-bar--seg span { color: var(--rk-seg); }

/* 第幾格離落點多遠（列＋欄），決定擴散延遲。 */
.page-blocks .rk-panel--open .rk-cell:nth-child(1) { --d: 0.4s; }
.page-blocks .rk-panel--open .rk-cell:nth-child(2) { --d: 0.68s; }
.page-blocks .rk-panel--open .rk-cell:nth-child(3) { --d: 0.96s; }
.page-blocks .rk-panel--open .rk-cell:nth-child(4) { --d: 1.24s; }
.page-blocks .rk-panel--open .rk-cell:nth-child(5) { --d: 0.68s; }
.page-blocks .rk-panel--open .rk-cell:nth-child(6) { --d: 0.96s; }
.page-blocks .rk-panel--open .rk-cell:nth-child(7) { --d: 1.24s; }
.page-blocks .rk-panel--open .rk-cell:nth-child(8) { --d: 1.52s; }
.page-blocks .rk-panel--open .rk-cell:nth-child(9) { --d: 0.96s; }
.page-blocks .rk-panel--open .rk-cell:nth-child(10) { --d: 1.24s; }
.page-blocks .rk-panel--open .rk-cell:nth-child(11) { --d: 1.52s; }
.page-blocks .rk-panel--open .rk-cell:nth-child(12) { --d: 1.8s; }
@media (prefers-reduced-motion: no-preference) {
  html.js:not([data-motion="off"]) .page-blocks .rk-card.is-armed .rk-panel--open .rk-cell:not(.is-origin), html.js:not([data-motion="off"]) .page-blocks .rk-card.is-armed .rk-panel--seg .rk-cell.is-origin { border-color: var(--rk-edge); background: var(--rk-cell); }
  html.js:not([data-motion="off"]) .page-blocks .rk-card.is-armed .rk-panel--open .rk-cell:not(.is-origin) i, html.js:not([data-motion="off"]) .page-blocks .rk-card.is-armed .rk-panel--seg .rk-cell.is-origin i { background: color-mix(in srgb, var(--rk-seg) 55%, var(--deeper)); }
  html.js:not([data-motion="off"]) .page-blocks .rk-card.is-armed .rk-fence { opacity: 0; }
  html.js:not([data-motion="off"]) .page-blocks .rk-card.is-armed .rk-bar i { transform: scaleX(0); }
  html.js:not([data-motion="off"]) .page-blocks .rk-card.is-play .rk-panel--open .rk-cell:not(.is-origin) { animation: rk-hit .35s var(--ease) var(--d) both; }
  html.js:not([data-motion="off"]) .page-blocks .rk-card.is-play .rk-panel--open .rk-cell:not(.is-origin) i { animation: rk-dot .35s var(--ease) var(--d) both; }
  html.js:not([data-motion="off"]) .page-blocks .rk-card.is-play .rk-panel--seg .rk-cell.is-origin { animation: rk-hit .35s var(--ease) .4s both; }
  html.js:not([data-motion="off"]) .page-blocks .rk-card.is-play .rk-panel--seg .rk-cell.is-origin i { animation: rk-dot .35s var(--ease) .4s both; }
  html.js:not([data-motion="off"]) .page-blocks .rk-card.is-play .rk-fence { animation: rk-fence .5s var(--ease) .9s both; }
  html.js:not([data-motion="off"]) .page-blocks .rk-card.is-play .rk-bar--open i { animation: rk-grow 2.2s linear .4s both; }
  html.js:not([data-motion="off"]) .page-blocks .rk-card.is-play .rk-bar--seg i { animation: rk-grow .7s var(--ease) .4s both; }
}
@keyframes rk-hit { from { border-color: var(--rk-edge); background: var(--rk-cell); } to { border-color: var(--rk-hot); background: var(--rk-hot-bg); } }
@keyframes rk-dot { from { background: color-mix(in srgb, var(--rk-seg) 55%, var(--deeper)); } to { background: var(--rk-hot); } }
@keyframes rk-fence { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
@keyframes rk-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 場景卡窄（手機）：兩面板上下排、時間條標題獨佔一行。 */
@container (max-width: 28rem) {
  .page-blocks .rk-panels { grid-template-columns: minmax(0, 1fr); }
  .page-blocks .rk-cell { aspect-ratio: 3 / 2; }
  .page-blocks .rk-cell.is-origin i { width: 24%; }
  .page-blocks .rk-times { grid-template-columns: minmax(0, 1fr); }
  .page-blocks .rk-tl { grid-row: auto; }
  .page-blocks .rk-bar span { white-space: normal; }
}