/* 動態架構展示頁
   版面概念：深色舞台，左側（手機在下方）是講解字卡，右側是一張持續擴大的資訊設計圖
   這頁刻意只做深色一種外觀，方便直播與投影 */
:root {
  color-scheme: dark;
  --stage: #0E1012;
  --panel: #15181B;
  --panel-2: #1C2024;
  --line: #2B3036;
  --text: #EDEFEA;
  --muted: #A9AFA9;
  --marker: #FFE14D;
  --ink: #16181B;
  --notes: #24364A;
  --raw: #1E2226;
  --focus: #8FB3D9;
  --font-body: "Noto Sans TC", "PingFang TC", "Heiti TC", "Microsoft JhengHei", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --panel-w: clamp(270px, 30vw, 500px);
  --stage-h: clamp(240px, 50dvh, 130vw);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--stage); color: var(--text);
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  overflow: hidden; overflow-wrap: break-word;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- 版面：寬螢幕左字右圖 ---------- */
.demo {
  position: relative; height: 100%; width: 100%;
  display: grid;
  grid-template-columns: var(--panel-w) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "top stage" "panel stage" "ctrl stage";
}
.d-top { grid-area: top; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px clamp(12px, 1.6vw, 22px); background: var(--panel); border-bottom: 1px solid var(--line); min-width: 0; }
.d-panel { grid-area: panel; background: var(--panel); overflow-y: auto; overscroll-behavior: contain; padding: clamp(16px, 2.4vw, 32px) clamp(16px, 2vw, 30px); min-height: 0; }
.d-panel.more { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 36px), rgba(0,0,0,0.15)); mask-image: linear-gradient(180deg, #000 calc(100% - 36px), rgba(0,0,0,0.15)); }
.d-ctrl { grid-area: ctrl; background: var(--panel); border-top: 1px solid var(--line); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px clamp(12px, 1.6vw, 22px) calc(10px + env(safe-area-inset-bottom, 0px)); }
.d-stage { grid-area: stage; position: relative; overflow: hidden; min-height: 0; min-width: 0; touch-action: pan-y; cursor: pointer;
  background: radial-gradient(120% 90% at 50% 45%, #15191D 0%, var(--stage) 70%); }
#world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-select: none; }

/* ---------- 版面：直式手機上圖下字 ---------- */
@media (max-aspect-ratio: 1/1), (max-width: 760px) {
  .demo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto var(--stage-h) minmax(0, 1fr) auto;
    grid-template-areas: "top" "stage" "panel" "ctrl";
  }
  .d-panel { padding: 14px 16px 18px; border-top: 1px solid var(--line); }
}
@media (max-aspect-ratio: 1/1) and (max-height: 700px), (max-width: 760px) and (max-height: 700px) {
  :root { --stage-h: clamp(220px, 50dvh, 130vw); }
}

/* 只看圖：字卡收起，舞台吃滿，工具列浮在舞台上 */
.demo.notext { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "stage"; }
.demo.notext .d-panel { display: none; }
.demo.notext .d-top { position: absolute; grid-area: auto; top: 0; left: 0; right: 0; z-index: 5; background: linear-gradient(180deg, rgba(14,16,18,0.92), rgba(14,16,18,0)); border: 0; padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
.demo.notext .d-ctrl { position: absolute; grid-area: auto; left: 0; right: 0; bottom: 0; z-index: 5; background: linear-gradient(0deg, rgba(14,16,18,0.92), rgba(14,16,18,0)); border: 0; }
.demo.notext .d-caption { opacity: 1; }

/* ---------- 頂列 ---------- */
.d-home { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--text); text-decoration: none; font-weight: 900; font-size: 15.5px; white-space: nowrap; min-width: 0; }
.d-brand { overflow: hidden; text-overflow: ellipsis; }
.d-tools { display: flex; gap: 6px; flex: none; }
.d-tool { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); cursor: pointer; font-size: 13.5px; font-weight: 700; }
.d-tool:hover { border-color: var(--muted); }
.d-tool[aria-pressed="true"] { background: var(--marker); color: var(--ink); border-color: var(--marker); }
.d-tool .ic-pause { display: none; }
.d-tool[aria-pressed="true"] .ic-play { display: none; }
.d-tool[aria-pressed="true"] .ic-pause { display: inline; }
@media (max-width: 420px) {
  .d-tool span { display: none; }
  .d-tool { padding: 6px 9px; }
  .d-brand { font-size: 14.5px; }
}

/* ---------- 字卡 ---------- */
.p-kicker { display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--muted); font-weight: 700; letter-spacing: 0.04em; margin: 0 0 6px; }
.p-kicker b { font-family: var(--font-mono); color: var(--marker); font-size: 14px; letter-spacing: 0; }
.p-title { margin: 0 0 10px; font-size: clamp(22px, 2.3vw, 34px); line-height: 1.3; font-weight: 900; word-break: keep-all; overflow-wrap: anywhere; }
.p-lead { margin: 0 0 16px; font-size: clamp(15.5px, 1.25vw, 18px); line-height: 1.8; color: #D6DAD4; }
.p-list { margin: 0; display: grid; gap: 8px; }
.p-list div { display: grid; grid-template-columns: minmax(4.6em, auto) minmax(0, 1fr); gap: 2px 12px; padding: 10px 12px; background: var(--panel-2); border-radius: 8px; border-left: 3px solid var(--marker); }
.p-list dt { font-weight: 900; font-size: clamp(14.5px, 1.05vw, 16px); }
.p-list dd { margin: 0; font-size: clamp(14px, 1vw, 15.5px); line-height: 1.7; color: #CDD2CC; }
@media (max-width: 380px) { .p-list div { grid-template-columns: minmax(0, 1fr); } }
.p-layers { display: grid; gap: 8px; }
.p-layer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 10px 12px; border-radius: 8px; background: var(--panel-2); }
.p-layer i { grid-row: span 3; width: 14px; border-radius: 3px; background: var(--sw); }
.p-layer b { font-size: 15.5px; }
.p-layer b span { font-weight: 500; color: var(--muted); margin-left: 8px; font-size: 14px; }
.p-layer em { font-style: normal; font-weight: 700; color: var(--marker); font-size: 14.5px; }
.p-layer small { font-size: 13.5px; color: #C2C7C1; line-height: 1.6; }
.p-cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 6px; }
.p-cats li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--panel-2); border-radius: 8px; font-size: 14.5px; }
.p-cats i { width: 12px; height: 12px; border-radius: 3px; background: var(--c); flex: none; }
.p-cats b { margin-left: auto; font-family: var(--font-mono); }
.p-picks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: pk; }
.p-picks li { counter-increment: pk; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding: 10px 12px; background: var(--panel-2); border-radius: 8px; }
.p-picks li::before { content: counter(pk); grid-row: span 2; font-family: var(--font-mono); font-weight: 600; font-size: 22px; color: var(--marker); line-height: 1.2; }
.p-picks b { font-size: 15.5px; }
.p-picks b span { font-family: var(--font-mono); color: var(--marker); margin-right: 6px; }
.p-picks small { font-size: 14px; color: #CDD2CC; line-height: 1.65; }
.demo:not(.port) .p-legend { display: none; }
.p-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; font-size: 13px; color: #D3D7D1; }
.p-legend span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: var(--panel-2); }
.p-legend i { width: 11px; height: 11px; border-radius: 3px; background: var(--c); border: 1px solid rgba(255,255,255,0.25); }
.p-cta { display: inline-flex; align-items: center; justify-content: center; margin-top: 16px; min-height: 46px; padding: 10px 18px; background: var(--marker); color: var(--ink); border-radius: 8px; font-weight: 900; text-decoration: none; }
.p-notes { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 10px; }
.p-notes summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--muted); min-height: 32px; display: flex; align-items: center; }
.p-notes p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.8; color: #C9CEC8; }

/* ---------- 控制列 ---------- */
.d-step-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 46px; min-height: 46px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); cursor: pointer; font-weight: 900; font-size: 15px; }
.d-step-btn:disabled { opacity: 0.35; cursor: default; }
.d-next { background: var(--marker); color: var(--ink); border-color: var(--marker); padding-inline: 14px 10px; }
.d-prog { display: flex; gap: 3px; align-items: center; min-width: 0; }
.d-prog button { flex: 1 1 0; min-width: 0; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.d-prog button::before { content: ""; display: block; width: 100%; height: 6px; border-radius: 3px; background: var(--line); }
.d-prog button.done::before { background: #6B7178; }
.d-prog button.cur::before { background: var(--marker); height: 8px; }
.d-prog button.cur { position: relative; }
.d-prog .tick { position: absolute; left: 0; top: 50%; height: 8px; margin-top: -4px; border-radius: 3px; background: #FFF6BF; width: 0; }

/* ---------- 舞台疊層 ---------- */
.d-ov { position: absolute; inset: 0; pointer-events: none; }
.d-counter { position: absolute; top: 12px; right: 14px; display: flex; align-items: baseline; gap: 4px 6px; padding: 6px 12px; border-radius: 10px; background: rgba(21, 24, 27, 0.78); border: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.c-num { font-family: var(--font-mono); font-weight: 600; font-size: clamp(18px, 2vw, 28px); color: var(--text); font-variant-numeric: tabular-nums; }
.c-pairs { display: inline-flex; align-items: baseline; gap: 6px; margin-left: 8px; }
.c-pairs[hidden] { display: none; }
.d-caption { position: absolute; top: 12px; left: 14px; max-width: min(70%, 560px); word-break: keep-all; overflow-wrap: anywhere; padding: 6px 12px; border-radius: 10px; background: rgba(21, 24, 27, 0.78); border: 1px solid var(--line); font-weight: 900; font-size: clamp(14px, 1.6vw, 22px); line-height: 1.4; opacity: 0; transition: opacity 0.4s; }
.demo.notext .d-caption { top: calc(64px + env(safe-area-inset-top, 0px)); }
.demo.notext .d-counter { top: calc(64px + env(safe-area-inset-top, 0px)); }
.d-legend { position: absolute; left: 12px; bottom: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; color: #D3D7D1; }
.d-legend span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: rgba(21, 24, 27, 0.78); border: 1px solid var(--line); }
.d-legend i { width: 11px; height: 11px; border-radius: 3px; background: var(--c); border: 1px solid rgba(255,255,255,0.25); }
.demo.notext .d-legend { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
.d-callouts { position: absolute; inset: 0; }
.cl { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap; padding: 4px 10px; border-radius: 999px; background: rgba(14, 16, 18, 0.86); border: 1.5px solid var(--marker); color: var(--text); font-size: clamp(12.5px, 1.2vw, 16px); font-weight: 700; opacity: 0; transition: opacity 0.5s; will-change: transform; }
.cl b { color: var(--marker); font-weight: 900; margin-right: 4px; }
.cl .rk { font-family: var(--font-mono); color: var(--marker); margin-right: 6px; }
.cl.on { opacity: 1; }
.port .cl-sub { display: none; }
.d-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: rgba(21, 24, 27, 0.86); border: 1px solid var(--line); font-size: 13px; color: var(--muted); white-space: nowrap; opacity: 0; transition: opacity 0.5s; }
.d-hint.on { opacity: 1; }

/* ---------- SVG 舞台元素 ---------- */
#world text { font-family: var(--font-body); }
#world .mono { font-family: var(--font-mono); }
#world .ns { vector-effect: non-scaling-stroke; }
#world [data-on] { transition: opacity 0.7s ease; }
#world .off { opacity: 0 !important; }
#world .tiny { opacity: 0; }
#world text { transition: opacity 0.45s ease; }
#world .stk-in { transform-box: view-box; transform-origin: 0 0; }
#world .grow { animation: grow 1.1s cubic-bezier(0.2, 1.25, 0.35, 1) both; }
@keyframes grow { from { transform: scale(0.12); } to { transform: scale(1); } }
#world .beam { stroke-dasharray: 6 9; animation: flow 1.1s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -30; } }
#world .play .nrow { animation: flash 1.2s ease-out both; animation-delay: var(--d, 0s); }
@keyframes flash { 0% { fill: #31465E; } 35% { fill: #4E6E92; } 100% { fill: #31465E; } }
#world .play .reject { animation: reject 2.4s ease-in-out both; animation-delay: var(--d, 0s); }
@keyframes reject { 0% { opacity: 0; transform: translateY(-40px); } 25% { opacity: 1; transform: translateY(0); } 55% { opacity: 1; transform: translateY(0); } 100% { opacity: 0.35; transform: translateY(-40px); } }
#world .play .tagp { animation: tagp 1.6s ease-out both; animation-delay: var(--d, 0s); }
@keyframes tagp { 0% { fill: #FFE14D; } 30% { fill: #FFFFFF; } 100% { fill: #FFE14D; } }
#world .shackle { transition: transform 0.8s cubic-bezier(0.3, 1.4, 0.4, 1); }
#world .unlock .shackle { transform: translateY(-22px); }
#world .unlock .lockbody { fill: #FFE14D; }
#world .unlock .keyhole { fill: #16181B; }
#world .lockbody { transition: fill 0.6s; }
#world .halo { animation: halo 2.4s ease-in-out infinite; }
.port #world .land-only { display: none; }
.demo:not(.port) #world .port-only { display: none; }
.port .d-counter { display: none; }
@keyframes halo { 50% { opacity: 0.35; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

@media (max-width: 480px) {
  .p-kicker { margin-bottom: 4px; }
  .p-title { font-size: 20px; margin-bottom: 6px; }
  .p-lead { font-size: 14.5px; line-height: 1.7; margin-bottom: 10px; }
  .p-list { gap: 6px; }
  .p-list div { padding: 7px 10px; grid-template-columns: minmax(4.4em, auto) minmax(0, 1fr); gap: 2px 10px; }
  .p-list dt { font-size: 14px; }
  .p-list dd { font-size: 13.5px; line-height: 1.6; }
  .p-layer { padding: 8px 10px; }
  .p-picks li, .p-cats li { padding: 7px 10px; }
  .d-ctrl { padding-block: 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .d-top { padding-block: 8px; }
}

/* Public scenario framing remains visible in text and diagram-only modes. */
/* 2026-10 修正：情境標示不再壓在圖的左上角（原本會蓋住第 8，9 步的對話與手機第 8 步的第一個泡泡）。
   寬螢幕有字卡時：短句放進字卡的步驟列（.p-scenario），圖上不放。
   手機與「只看圖」：圖上保留一個單行小標，放右下角（實測各角落中蓋到文字最少）；手機只顯示後半句。
   計數器回到右上角原位。 */
.d-scenario { position: absolute; z-index: 4; right: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 4px 10px; border: 1px solid #50564f; border-radius: 8px; background: rgba(14,16,18,.86); color: #dde1d8; font-size: 14px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.demo:not(.port):not(.notext) .d-scenario { display: none; }
.port .d-scenario .sc-long { display: none; }
.p-kicker { flex-wrap: wrap; }
.p-scenario { margin-left: auto; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.port .p-scenario { display: none; }
.d-counter { font-size: 14px; }
.port .d-hint { bottom: 54px; }
/* 範圍說明移到字卡最後，用上框線跟正文分開 */
.p-scope { margin: 16px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.65; color: var(--muted); }
.p-kicker, .d-tool, .p-layer small, .p-legend, .p-notes summary, .d-legend, .cl, .d-hint { font-size: 14px; }
.p-title { text-wrap: balance; }
.demo.notext .d-scenario { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
.demo.notext .d-hint { bottom: calc(118px + env(safe-area-inset-bottom, 0px)); }
.demo.notext.port .d-caption { max-width: calc(100% - 28px); }
@media (max-width: 480px) { .p-list dd, .p-layer small { font-size: 14px; } .d-hint { max-width: calc(100% - 24px); white-space: normal; text-align: center; } }