/* ===== 像素遊戲 × 藍天草地 ===== */
:root {
  --sea: #2F7A3E;        /* 葉綠：主按鈕、圖示 */
  --sea-dark: #23602F;   /* 深葉綠：標語、連結 */
  --sky-top: #9ED6F2;    /* 天空：頁面頂端 */
  --sky-low: #E3F4FC;    /* 天空：靠近地面 */
  --grass: #5FA85A;      /* 草地 */
  --sand-deep: #DDEBC6;  /* 嫩芽綠：照片底、分隔線 */
  --leaf-light: #CFE5B4; /* 視窗標題列 */
  --coral: #F2A33A;      /* 太陽橘：節點、待補標記、太陽光芒 */
  --ink: #1F3A2B;        /* 深綠：像素框線 */
  --ink-soft: #4A5F55;
  --paper: #FFFDF3;      /* 米白：視窗底色 */
  --grid: rgba(255, 255, 255, .55);
  --line: 2px;
  --shadow: 4px 4px 0 var(--ink);
  --font: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Heiti TC", sans-serif;
  --mono: "Consolas", "Menlo", "Courier New", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
  position: relative;
  /* 白色方格線疊在藍天漸層上 */
  background-color: var(--sky-low);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(180deg, var(--sky-top) 0, #C6E8F8 900px, var(--sky-low) 100%);
  background-size: 16px 16px, 16px 16px, 100% 100%;
}
body > header,
body > main,
body > footer {
  position: relative;
  z-index: 1;
}

h1, h2, h3, p, ul, ol { margin: 0; }

a { color: var(--sea-dark); }

.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 待補標記 */
.todo {
  color: var(--ink-soft);
  border-bottom: 2px dashed var(--coral);
}

/* ===== 像素視窗 ===== */
.window {
  background: var(--paper);
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow);
}
.win-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 8px 4px 12px;
  border-bottom: var(--line) solid var(--ink);
  background: var(--leaf-light);
}
.win-title {
  font-family: var(--mono), var(--font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
}
.win-title .todo { font-family: var(--font); font-weight: 400; }
.win-btns {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.win-btns i {
  display: block;
  width: 14px;
  height: 14px;
  border: var(--line) solid var(--ink);
  background: var(--paper);
}
.win-btns i.x {
  position: relative;
}
.win-btns i.x::before,
.win-btns i.x::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 2px;
  background: var(--ink);
  transform: translate(-50%, -50%) rotate(45deg);
}
.win-btns i.x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.win-body {
  padding: 14px 16px 16px;
}
.win-body > p + p { margin-top: 10px; }

/* ===== 對話框標籤 ===== */
.bubble {
  position: relative;
  display: inline-block;
  padding: 4px 14px;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  font-family: var(--mono), var(--font);
  font-weight: 700;
  /* 像素圓角：切掉四個角 */
  clip-path: polygon(
    4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px),
    calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px
  );
}

/* ===== 清單：「- 」開頭 ===== */
.dash-list {
  list-style: none;
  padding: 0;
}
.dash-list li {
  position: relative;
  padding-left: 1.1em;
}
.dash-list li::before {
  content: "-";
  position: absolute;
  left: 0;
  font-family: var(--mono);
  font-weight: 700;
}
.dash-list li + li { margin-top: 4px; }

/* ===== 按鈕 ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: var(--line) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}
.btn:hover { background: var(--sand-deep); }
.btn:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--ink);
}
.btn-primary {
  background: var(--sea);
  color: #fff;
}
.btn-primary:hover { background: var(--sea-dark); }
.btn:focus-visible {
  outline: 3px dashed var(--coral);
  outline-offset: 4px;
}

/* ===== 1. 首屏 ===== */
.hero {
  padding-top: 32px;
  padding-bottom: 48px;
}
.bubble-hi {
  margin-bottom: 20px;
  font-size: 15px;
}
.hero-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.hero-photo-win {
  align-self: center;
  width: 240px;
}
.hero-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--sand-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.photo-placeholder {
  padding: 0 24px;
  font-size: 14px;
  color: var(--ink-soft);
  text-align: center;
}
.hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.label-box {
  display: inline-block;
  padding: 2px 14px;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow);
}
.hero-name {
  font-size: 26px;
  line-height: 1.5;
}
.hero-tagline {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.45;
  color: var(--sea-dark);
}
.hero-text .window { width: 100%; }
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
}

/* ===== 區塊共用 ===== */
.section {
  padding-top: 40px;
  padding-bottom: 40px;
}
.section-title {
  font-size: 18px;
  margin-bottom: 24px;
}

/* ===== 2. 作品 ===== */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.card-title {
  font-size: 17px;
  line-height: 1.5;
  margin-bottom: 8px;
}
.note {
  margin-top: 20px;
  font-size: 14px;
  color: var(--ink-soft);
}

/* ===== 3. 經歷：像素虛線串起來 ===== */
.timeline {
  list-style: none;
  padding: 0 0 0 22px;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 4px dotted var(--ink);
}
.timeline-item {
  position: relative;
}
.timeline-item + .timeline-item { margin-top: 24px; }
.timeline-item::before {
  /* 方塊節點 */
  content: "";
  position: absolute;
  left: -24px;
  top: 10px;
  width: 14px;
  height: 14px;
  background: var(--coral);
  border: var(--line) solid var(--ink);
}
.timeline-title {
  font-size: 18px;
  line-height: 1.5;
}
.timeline-org {
  font-size: 15px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.hl { color: #B5541A; }

/* ===== 4. 技能：道具欄 ===== */
.inventory {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.inventory li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 12px;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}
.inventory li::before {
  /* 小方塊圖示 */
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  background: var(--sea);
  border: var(--line) solid var(--ink);
}

/* ===== 5. 聯絡 ===== */
.contact-list {
  list-style: none;
  padding: 0;
  margin-bottom: 24px;
}
.contact-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 10px 0;
  border-bottom: 2px dashed var(--leaf-light);
}
.contact-label {
  min-width: 80px;
  font-family: var(--mono), var(--font);
  font-weight: 700;
}

/* ===== 頁尾 ===== */
/* 頁尾＝草地：上緣是一排像素草和小花，下面鋪滿草綠 */
.footer {
  margin-top: 32px;
  padding: 44px 20px 40px;
  text-align: center;
  font-size: 14px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect y='6' width='16' height='10' fill='%235FA85A'/%3E%3Crect y='6' width='16' height='1' fill='%232F7A3E'/%3E%3Cg fill='%232F7A3E'%3E%3Crect x='1' y='3' width='1' height='3'/%3E%3Crect x='2' y='4' width='1' height='2'/%3E%3Crect x='5' y='2' width='1' height='4'/%3E%3Crect x='10' y='3' width='1' height='3'/%3E%3Crect x='11' y='1' width='1' height='5'/%3E%3Crect x='12' y='4' width='1' height='2'/%3E%3Crect x='14' y='3' width='1' height='3'/%3E%3Crect x='7' y='3' width='1' height='3'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Crect x='7' y='0' width='1' height='1'/%3E%3Crect x='6' y='1' width='1' height='1'/%3E%3Crect x='8' y='1' width='1' height='1'/%3E%3Crect x='7' y='2' width='1' height='1'/%3E%3C/g%3E%3Crect x='7' y='1' width='1' height='1' fill='%23FFC93C'/%3E%3Cg fill='%234E9A4C'%3E%3Crect x='3' y='10' width='1' height='1'/%3E%3Crect x='12' y='13' width='1' height='1'/%3E%3C/g%3E%3Crect x='9' y='9' width='1' height='1' fill='%237DBE6B'/%3E%3C/svg%3E") repeat-x left top / 32px 32px,
    linear-gradient(transparent 12px, var(--grass) 12px);
}

/* ===== 天空裝飾：太陽、雲、小鳥（像素 SVG，內嵌不外連） ===== */
.sky-decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.sky-decor i {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
}
.sun {
  width: 72px;
  height: 72px;
  top: 14px;
  right: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' shape-rendering='crispEdges'%3E%3Cg fill='%23F2A33A'%3E%3Crect x='11' y='0' width='2' height='3'/%3E%3Crect x='11' y='21' width='2' height='3'/%3E%3Crect x='0' y='11' width='3' height='2'/%3E%3Crect x='21' y='11' width='3' height='2'/%3E%3Crect x='3' y='3' width='2' height='2'/%3E%3Crect x='19' y='3' width='2' height='2'/%3E%3Crect x='3' y='19' width='2' height='2'/%3E%3Crect x='19' y='19' width='2' height='2'/%3E%3C/g%3E%3Cg fill='%23FFC93C'%3E%3Crect x='8' y='5' width='8' height='14'/%3E%3Crect x='5' y='8' width='14' height='8'/%3E%3Crect x='6' y='6' width='12' height='12'/%3E%3C/g%3E%3Crect x='8' y='8' width='3' height='3' fill='%23FFE7A0'/%3E%3C/svg%3E");
}
.cloud {
  width: 84px;
  height: 39px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 11' shape-rendering='crispEdges'%3E%3Cg fill='%23fff'%3E%3Crect x='8' y='0' width='6' height='2'/%3E%3Crect x='5' y='2' width='12' height='2'/%3E%3Crect x='15' y='3' width='5' height='2'/%3E%3Crect x='2' y='4' width='20' height='3'/%3E%3Crect x='0' y='6' width='24' height='3'/%3E%3C/g%3E%3Cg fill='%23C4E4F5'%3E%3Crect x='0' y='9' width='24' height='1'/%3E%3Crect x='2' y='10' width='20' height='1'/%3E%3C/g%3E%3C/svg%3E");
}
.bird {
  width: 28px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 3' shape-rendering='crispEdges'%3E%3Cg fill='%231F3A2B'%3E%3Crect x='0' y='1' width='1' height='1'/%3E%3Crect x='1' y='0' width='1' height='1'/%3E%3Crect x='2' y='1' width='1' height='1'/%3E%3Crect x='3' y='2' width='1' height='1'/%3E%3Crect x='4' y='1' width='1' height='1'/%3E%3Crect x='5' y='0' width='1' height='1'/%3E%3Crect x='6' y='1' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E");
}
.b1 { top: 104px; right: 96px; }
.b2 { top: 128px; right: 62px; width: 21px; height: 9px; }
.c1 { top: 64px;   left: -18px; }
.c2 { top: 380px;  right: -26px; }
.c3 { top: 940px;  left: -30px; }
.c4 { top: 1520px; right: -22px; }
.c5 { top: 2120px; left: -26px; }
.c6 { top: 2720px; right: -30px; }
.c7 { top: 3260px; left: -14px; }

/* ===== 電腦版 ===== */
@media (min-width: 768px) {
  .hero { padding-top: 64px; padding-bottom: 72px; }
  .hero-grid {
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 48px;
  }
  .hero-photo-win { width: 300px; flex-shrink: 0; }
  .hero-text { flex: 1; }
  .hero-name { font-size: 32px; }
  .hero-tagline { font-size: 34px; }

  .section { padding-top: 56px; padding-bottom: 56px; }
  .section-title { font-size: 20px; }

  .cards { grid-template-columns: 1fr 1fr; gap: 24px; }
  .inventory { grid-template-columns: repeat(4, 1fr); }

  /* 天空裝飾放大，擺在內容兩側 */
  .sun { width: 120px; height: 120px; top: 28px; right: 4%; }
  .cloud { width: 144px; height: 66px; }
  .b1 { top: 170px; right: calc(4% + 140px); }
  .b2 { top: 200px; right: calc(4% + 96px); }
  .c1 { top: 36px;   left: 3%; }
  .c2 { top: 420px;  right: 1%; }
  .c3 { top: 820px;  left: 1%; }
  .c4 { top: 1240px; right: 2%; }
  .c5 { top: 1680px; left: 2%; }
  .c6 { top: 2140px; right: 1%; }
  .c7 { top: 2560px; left: 1%; }
}