/* Game-specific content; the V4 shell, navigation and card styles stay shared. */
.edition-label { border: 2px solid var(--ink); border-radius: 999px; padding: 5px 11px; background: #fff; font-size: 11px; font-weight: 900; }
.mori-runner .step-title { font-size: 27px; }
.mori-runner .step-info { gap: 12px; }
.mori-runner .step-info.has-long-steps .instruction-card li { font-size: 12.5px; line-height: 1.55; }
.mori-runner .step-info.has-long-steps .instruction-card ol { gap: 8px; padding: 10px 12px; }
.mori-runner .instruction-card, .mori-runner .point, .mori-runner .try-card { flex-shrink: 0; }
.mori-runner .stage-preview.is-scratch-ratio { width: 260px; max-width: 100%; }
.mori-runner .stage-preview.is-scratch-ratio.is-ratio-tiny { width: 220px; }
.mori-runner .cover-hero.runner-hero { width: 116px; right: 30px; bottom: 16px; }
.mori-runner .cover-detail { font-size: 15px; }
.mori-runner .cover-card h1 { font-size: 62px; }
.mori-runner .play-note { font-size: 13px; line-height: 1.7; }
.mori-runner .play-note a { color: var(--blue); }
.mori-runner .visual-body { display: flex; flex-direction: column; justify-content: center; gap: 18px; flex: 1; min-height: 0; padding: 22px; background: var(--workspace); }
.mori-runner .visual-image { width: 100%; aspect-ratio: 4/3; border: 2px solid #bac5dd; border-radius: 15px; overflow: hidden; background: #fff; display: grid; place-items: center; }
.mori-runner .visual-image img { width: 100%; height: 100%; object-fit: contain; }
.mori-runner .visual-image.checkerboard { background: conic-gradient(#e4ebf5 25%,#fff 0 50%,#e4ebf5 0 75%,#fff 0); background-size: 30px 30px; }
.mori-runner .visual-image.checkerboard img { width: 56%; height: 60%; }
.mori-runner .draw-finish { font-size: 13px; line-height: 1.6; }
.mori-runner .stable-program { min-width: 0; }
.mori-runner .program-workspace { gap: 32px; padding: 30px 45px 100px 28px; }
.mori-runner .overview-pane .program-workspace { flex-direction: column; gap: 22px; align-items: flex-start; padding: 18px 22px 65px; }
.mori-runner .overview-pane .program-label { font-size: 10px; }
.mori-runner .detail-pane .program-workspace { padding: 20px 38px 85px 22px; }
.mori-runner .detail-pane .program-label { display: none; }
.mori-runner .full-programs { gap: 36px; }
.mori-runner .block-outline { fill: none; }
.mori-runner .block-outline-label { font-size: 11px; stroke: white; stroke-width: 3px; paint-order: stroke; }
.mori-runner .block-dim { opacity: .46; filter: grayscale(1) saturate(.25); }
.mori-runner .editor-guide { margin-top: auto; padding: 12px 14px; border: 2px solid #bac5dd; border-radius: 14px; background: #e7ecf7; font-size: 12px; line-height: 1.6; }
.editor-guide .cue-title { display: block; margin-bottom: 8px; font-size: 10px; font-weight: bold; color: #627195; }
.editor-guide .cue-tabs { display: flex; align-items: center; gap: 8px; }
.cue-button { display: inline-block; background: white; border: 2px solid #a8b5d0; border-radius: 7px; padding: 4px 9px; font-weight: bold; }
.cue-button.selected { border-color: var(--pink); box-shadow: 0 0 0 3px #f65c9322; }
.cue-arrow { color: var(--pink); font-size: 18px; font-weight: bold; }
.sound-download { display: inline-block; padding: 2px 8px; background: #fff3d1; border: 1px solid #c2a147; border-radius: 6px; }
.mori-runner .draw-canvas.is-backdrop > img { position: absolute; inset: 0; max-width: 100%; width: 100%; height: 100%; max-height: 100%; aspect-ratio: auto; object-fit: contain; border: 0; border-radius: 0; }
.mori-runner .draw-canvas.is-backdrop { border-color: var(--ink); border-radius: 13px; }
.mori-runner .drawing-instructions li { font-size: 12.5px; line-height: 1.6; }
.mori-runner .step-rail.is-dense .step-dot { width: 26px; height: 26px; font-size: 9px; }
.mori-runner button:focus-visible, .mori-runner a:focus-visible, .mori-runner .program-scroll:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }

.mori-runner .comparison-grid { display:grid; grid-template-columns:1fr 1fr; flex:1; min-height:0; }
.mori-runner .comparison-grid > section { display:flex; flex-direction:column; min-width:0; min-height:0; }
.mori-runner .comparison-grid > section + section { border-left:3px solid var(--ink); }
.mori-runner .comparison-grid .program-workspace { flex-direction:column; align-items:flex-start; padding:20px 30px 80px 18px; gap:22px; }
.mori-runner .comparison-grid .program-label { font-size:10px; }
.mori-runner .copy-diagram { display:block; width:260px; max-height:195px; margin:auto; }
.mori-runner .editor-guide:has(.copy-diagram) { margin-top:0; padding:6px; }
.mori-runner .step-rail.is-dense { display:grid; grid-template-columns:repeat(13,26px); gap:4px; }

/* Edits are grouped by Scratch connections, and non-add actions use blue. */
.mori-runner .block-outline[data-edit-kind="move"],
.mori-runner .block-outline[data-edit-kind="remove"],
.mori-runner .block-outline[data-edit-kind="change"] { stroke:#2457d6; }
.mori-runner .block-outline-label:not([data-edit-kind="add"]) { fill:#2457d6; stroke:none; }
.mori-runner .edit-label-badge { fill:white; stroke:#2457d6; stroke-width:1.5; }
.mori-runner .setup-block-example { padding:12px; border:2px solid #b9c4dc; border-radius:12px; background:#f1f4fc; }
.mori-runner .setup-block-example > b { font-size:12px; }
.mori-runner .setup-block-example .program-label { display:none; }
.mori-runner .setup-block-example .stable-program { margin-top:8px; }
.mori-runner .editor-cue { flex-shrink:0; }
.mori-runner .stage-preview.is-scratch-ratio.is-ratio-full { width:380px; max-width:100%; }
.mori-runner .stage-preview.is-scratch-ratio.is-ratio-medium { width:300px; }
.mori-runner .step-screen.has-wide-instructions { grid-template-columns:550px minmax(0,1fr); }

/* Intrinsic PNG dimensions provide height even when Safari does not resolve
   aspect-ratio on a flex item containing only absolutely positioned children. */
.mori-runner .stage-preview.is-scratch-ratio { height:auto; aspect-ratio:auto; }
.mori-runner .stage-preview.is-scratch-ratio > img.backdrop {
  position:static; display:block; width:100%; height:auto; object-fit:contain;
}

/* Keep the established copy diagram size while making room for ruby lines. */
.mori-runner [data-japanese-mode="hira"] .has-copy-diagram { gap:6px; }
.mori-runner [data-japanese-mode="hira"] .has-copy-diagram .editor-guide { padding:0; }
.mori-runner [data-japanese-mode="hira"] .has-copy-diagram .point { padding-top:10px; }