/* 顏色與尺寸變數 */
:root{
  --bg:#0f172a;
  --card:#111827;
  --stroke:#6ee7ff;
  --text:#e5e7eb;
  --muted: yellow;            /* 你的黃色說明文字 */
  --accent:#22d3ee;
  --size:180px;               /* 共用 shape 寬度 */
  --shadow:0 8px 24px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.06);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans TC",sans-serif;
  background: radial-gradient(1000px 700px at 20% 10%, #0b1220 0%, #0a0f1b 40%, #070b13 100%), var(--bg);
  color:var(--text);
}

/* 版面 */
.wrap{
  max-width:50px;
  margin:60px 40px;
  padding:0 16px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
}
.card{
  background:var(--card);
  border-radius:18px;
  border: 2px solid rgba(110,231,255,.35);  /* 亮色外框 */
  box-shadow: 0 8px 24px rgba(0,0,0,.35);     /* 覆蓋原本的 var(--shadow) 也可以 */
  padding:18px;
  overflow:visible;           /* 讓外面的 hint 不會被裁掉 */
}
.card h2{
  font-size:18px; margin:0 0 12px; color:#eaf7ff; letter-spacing:.5px;
}
.desc{ margin:12px 0 0; color:var(--muted); font-size:16px }

/* 共用形狀底板 */
.shape{
  width:var(--size);
  height:calc(var(--size)*0.58);
  margin:12px auto;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#1f2a40 0%, #0f172a 100%);
  color:#eaf7ff; font-weight:600; letter-spacing:.5px;
  position:relative;
  box-shadow:var(--shadow);
  border:2px solid var(--stroke);
  text-align:center; padding:6px 10px;
}

/* 1. 終端 Terminator */
.terminator{ border-radius: 30px; }

/* 2. 處理 Process */
.process{ border-radius: 10px; }

/* 3. 判斷 Decision
   外層 .decision-wrap 建立定位基準（不旋轉）
   內層 .decision 才旋轉成菱形；文字用 .upright 回正並絕對置中
*/
.decision-wrap{
  position: relative;
  width: 100px;
  height: 100px;
  margin: 30px auto 36px;     /* 與下方黃色字拉開距離 */
}
.decision{
  position: absolute; inset: 0;
  transform: rotate(45deg);
  display: grid; place-items: center;
  border: 2px solid var(--stroke);
  background: linear-gradient(180deg,#1f2a40 0%, #0f172a 100%);
  border-radius: 6px; box-shadow: var(--shadow);
}
.decision .upright{
  position: absolute; left:50%; top:50%;
  transform: translate(-50%,-50%) rotate(-45deg);
  line-height:1; text-align:center; z-index:2; pointer-events:none;
}
/* 分支標籤 */
.hint{ position:absolute; color:#a1f0ff; font-size:12px; z-index:3; }
.hint.t{ top:auto; bottom: -12px; left:50%; transform:translateX(-50%); }  /* 是 */
.hint.r{ right:-10px; top:50%; transform:translateY(-50%); } /* 否 */

/* 4. I/O：平行四邊形（用 skew 造成傾斜） */
.io{ transform:skewX(-18deg); padding:6px 16px; }
.io span{ display:block; transform:skewX(18deg); }

/* 小型流程方塊（流程線/註解示範） */
.mini{
  min-width:120px; height:44px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:#1f2a40; color:#eaf7ff; border:2px solid var(--stroke); box-shadow:var(--shadow);
  padding:4px 10px; font-weight:600;
}

/* 5. 流程線（箭頭） */
.line-demo{
  display:flex; align-items:center; justify-content:center; gap:16px; padding:10px 0;
}
.arrow{
  width:120px; height:2px; background:var(--accent); position:relative;
  box-shadow:0 0 8px rgba(34,211,238,.4);
}
.arrow::after{
  content:""; position:absolute; right:-8px; top:50%; transform:translateY(-50%);
  border:8px solid transparent; border-left-color:var(--accent);
  filter:drop-shadow(0 0 6px rgba(34,211,238,.5));
}

/* 6. 註解（帶引線） */
.annot-wrap{ position:relative; display:flex; align-items:center; gap:16px; justify-content:center; }
.annotation{
  background:#0b1b2c; color:#c7f9ff; border:2px dashed var(--stroke);
  padding:10px 12px; border-radius:10px; position:relative; max-width:220px; box-shadow:var(--shadow);
}
.annotation::before{
  content:""; position:absolute; left:-22px; top:50%; width:16px; height:2px; background:var(--accent);
}

/* 小螢幕調整 */
@media (max-width:480px){
  :root{ --size:150px; }
  .decision-wrap{ width:100px; height:100px; }
}