/* ============================================================
   anneirock brand.css — 全站設計 tokens ＋基礎元件
   架構參照 GitLab Pajamas 的紀律（token 分層、語意別名、
   深色模式＝同 token 換套用），皮膚是 annei 的。
   舊工具換裝：<link rel="stylesheet" href="https://anneirock.com/brand.css">
   品牌色方向：「暖岩」（annei 2026-08-30 從三案定稿）。要換方向只改【品牌色 ramp】區塊。
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* 中性色 ramp（暖灰，10 階） */
  --c-neutral-0: #ffffff;
  --c-neutral-50: #faf7f4;
  --c-neutral-100: #f1ece6;
  --c-neutral-200: #e5ddd5;
  --c-neutral-300: #cfc4ba;
  --c-neutral-400: #a69c93;
  --c-neutral-500: #877c72;
  --c-neutral-600: #6e635b;
  --c-neutral-700: #4c443e;
  --c-neutral-800: #2a2420;
  --c-neutral-900: #1c1917;

  /* 品牌色 ramp —【暖岩】（定稿 2026-08-30；換方向改這塊） */
  --c-brand-50: #fbf1ec;
  --c-brand-100: #f4ddd1;
  --c-brand-200: #e6b8a3;
  --c-brand-300: #d68f70;
  --c-brand-400: #bf6b47;
  --c-brand-500: #a8503a;
  --c-brand-600: #8c4130;
  --c-brand-700: #6f3326;
  --c-brand-800: #52261d;
  --c-brand-900: #371a14;

  /* 語意色（工具狀態通用語言：藍＝進行中 綠＝成功 橘＝警告 紅＝錯誤） */
  --c-info: #2f6fa8;
  --c-success: #2e7d4f;
  --c-warning: #a8641f;
  --c-danger: #b03a2e;

  /* 語意別名（頁面只用這些，不直接摸 ramp） */
  --bg: var(--c-neutral-50);
  --surface: var(--c-neutral-0);
  --text-primary: var(--c-neutral-800);
  --text-muted: var(--c-neutral-600);
  --border: var(--c-neutral-200);
  --link: var(--c-brand-600);
  --link-hover: var(--c-brand-700);
  --accent: var(--c-brand-500);
  --accent-soft: var(--c-brand-50);

  /* 間距（4px 網格）／字級／圓角 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem;
  --fs-lg: 1.375rem; --fs-xl: 1.75rem; --fs-2xl: 2.25rem;
  --radius: 8px; --radius-sm: 4px;
  --font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
               system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;

  color-scheme: light dark;
}

/* 深色：深面亮字、亮度表層次（不是反轉調色盤） */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--c-neutral-900);
    --surface: #262220;
    --text-primary: #ede7e1;
    --text-muted: var(--c-neutral-400);
    --border: #3b3531;
    --link: var(--c-brand-300);
    --link-hover: var(--c-brand-200);
    --accent: var(--c-brand-400);
    --accent-soft: #33241d;
    --c-info: #6ba3d6;
    --c-success: #5cb385;
    --c-warning: #d69a55;
    --c-danger: #d9705f;
  }
}

/* ---------- 基礎 ---------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.75;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
main { display: flex; flex-direction: column; flex: 1; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
img { max-width: 100%; }
h1, h2, h3 { line-height: 1.35; }

.wrap { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 var(--sp-4); }

/* ---------- 共用頁首（縫合整塊地的那條線） ---------- */
.topbar {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.topbar-inner {
  max-width: 720px; margin: 0 auto; padding: var(--sp-3) var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-4);
}
.wordmark {
  font-weight: 700; letter-spacing: 0.02em;
  color: var(--text-primary); font-size: var(--fs-md);
}
.wordmark:hover { color: var(--accent); text-decoration: none; }
.wordmark .dot { color: var(--accent); }
.topbar nav { margin-left: auto; display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.topbar nav a { color: var(--text-muted); font-size: var(--fs-sm); }
.topbar nav a:hover,
.topbar nav a[aria-current="page"] { color: var(--text-primary); text-decoration: none; }

/* ---------- 元件 ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-5);
}
.btn {
  display: inline-block;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--c-neutral-0);
  font-size: var(--fs-sm);
}
.btn:hover { filter: brightness(1.08); color: var(--c-neutral-0); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--link); }
.btn.ghost:hover { background: var(--accent-soft); }

.badge {
  display: inline-block;
  padding: 1px var(--sp-2);
  border-radius: 999px;
  font-size: var(--fs-sm);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.badge.info    { color: var(--c-info);    border-color: currentColor; }
.badge.success { color: var(--c-success); border-color: currentColor; }
.badge.warning { color: var(--c-warning); border-color: currentColor; }
.badge.danger  { color: var(--c-danger);  border-color: currentColor; }

/* ---------- 文章排版（日記用） ---------- */
/* 中文排版吸收 heti（github.com/sivan/heti）CSS 做得到的部分：
   兩端對齊、嚴格斷行、行尾標點懸掛、著重號。
   標點擠壓 heti 靠 JS，這裡交給支援 text-spacing 的瀏覽器自理。 */
.prose { font-size: var(--fs-md); }
.prose p {
  margin: var(--sp-4) 0;
  text-align: justify;
  line-break: strict;
  overflow-wrap: break-word;
  hanging-punctuation: allow-end; /* Safari 生效，其他瀏覽器忽略 */
}
.prose em {
  /* 中文強調不用斜體，用著重號（橫排在字下） */
  font-style: normal;
  text-emphasis: filled dot;
  text-emphasis-position: under right;
}
.prose blockquote {
  margin: var(--sp-4) 0; padding: var(--sp-1) var(--sp-4);
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-muted);
}
.prose hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }
.post-cover { margin: 0 0 var(--sp-5); }
.post-cover img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.meta { color: var(--text-muted); font-size: var(--fs-sm); }

/* 日記列表 */
.entry-list { list-style: none; padding: 0; margin: 0; }
.entry-list li {
  display: flex; gap: var(--sp-4); align-items: baseline;
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--border);
}
.entry-list time { color: var(--text-muted); font-size: var(--fs-sm); white-space: nowrap; }

/* ---------- 首頁地景與小景 ---------- */
.landscape { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.landscape svg { width: 100%; height: 100%; display: block; }

.hero-flex { display: flex; align-items: flex-end; gap: var(--sp-6); flex-wrap: wrap; }
.hero-text { flex: 1 1 300px; }

/* 8bit 小景框（像一格小遊戲畫面，亮暗模式都自帶奶油底） */
.pixel-frame {
  margin: 0 0 0 auto; position: relative; flex: 0 0 auto;
  width: 250px; max-width: 70%;
  border: 3px solid var(--c-brand-700);
  border-radius: var(--radius-sm);
  background: #f6f1ea;
  box-shadow: 5px 5px 0 var(--accent-soft);
  overflow: hidden;
}
.pixel-frame img { display: block; width: 100%; height: auto; }
.ember-overlay {
  position: absolute; left: 40%; top: 16%; width: 20%; aspect-ratio: 1;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 168, 66, 0.55), rgba(255, 168, 66, 0));
  animation: ember 2.8s ease-in-out infinite;
}
/* 滿版出血 hero（Stardew 式）：不裱框，畫鋪到兩側邊緣，底邊融進頁面背景 */
.wrap-wide { width: 100%; max-width: 980px; margin: 0 auto; padding: 0 var(--sp-4); }
.land-full { margin: 0; position: relative; }
.land-full picture img { display: block; width: 100%; height: auto; }
.land-full::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 16%;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}

/* 頁底＝田：整個網站站在這塊地上。
   手機＝靜態頁底；桌機（≥900px）＝常駐底框（fixed），內容從田後面捲過去。 */
.land-meta { margin-top: auto; padding-top: var(--sp-8); }
.land-footer-meta {
  display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  border-top: 1px solid var(--border); padding-top: var(--sp-5);
}
.land-footer-line {
  text-align: center; color: var(--text-muted); font-size: var(--fs-sm);
  margin: var(--sp-7) 0 var(--sp-2);
}
.land-footer { position: relative; }
.land-footer .garden-scroll { overflow-x: auto; }
.land-footer canvas { display: block; }
@media (min-width: 900px) {
  .land-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; }
  /* 字沉進土裡的漸隱 */
  .land-footer::before {
    content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 28px;
    background: linear-gradient(to bottom, transparent, var(--bg));
    pointer-events: none;
  }
  body { padding-bottom: 108px; } /* 田 80px ＋ 漸隱緩衝 */
}

/* 日記列表的生長階段小圖示（與田裡那棵同步） */
.entry-list img.stage {
  height: 20px; width: auto; image-rendering: pixelated;
  flex: 0 0 auto; align-self: center;
}
.land-copy {
  position: absolute; top: 8%; right: max(var(--sp-5), 6vw); left: auto; max-width: 40%;
  text-shadow: 0 1px 8px color-mix(in srgb, var(--bg) 75%, transparent);
}
.land-copy p { color: var(--text-muted); }
.land-ember { left: 51%; top: 42%; width: 9%; }
@media (max-width: 700px) {
  .land-copy { position: static; max-width: none; text-shadow: none; padding: var(--sp-5) var(--sp-4) 0; }
  .land-ember { display: none; }
}

/* 夜景（深色模式換圖後）火的位置不同，光暈跟著移 */
@media (prefers-color-scheme: dark) {
  .ember-overlay { left: 54%; top: 28%; width: 26%; }
  .land-ember { left: 41%; top: 52%; width: 14%; }
}

/* 頁首頭貼 */
.wordmark { display: flex; align-items: center; gap: var(--sp-2); }
.avatar-mark { width: 28px; height: 28px; border-radius: var(--radius-sm); display: block; }

@keyframes ember {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.55; }
}
.wordmark .dot { transition: text-shadow 0.25s ease; }
.wordmark:hover .dot { text-shadow: 0 0 10px var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .ember-overlay { animation: none; opacity: 0.35; }
}

/* 田（發文種樹） */
.garden-head { display: flex; align-items: baseline; gap: var(--sp-3); margin: 0 0 var(--sp-2); }
.garden-card { position: relative; padding: var(--sp-3) var(--sp-4) var(--sp-2); }
.garden-scroll { overflow-x: auto; }
#garden-canvas { display: block; image-rendering: pixelated; }
.garden-tip {
  position: absolute; pointer-events: none; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 2px var(--sp-2);
  font-size: var(--fs-sm); color: var(--text-muted);
  box-shadow: 2px 2px 0 var(--accent-soft);
}

/* 住戶卡片 */
.tenant-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }
a.tenant { display: block; color: inherit; transition: border-color 0.15s ease; }
a.tenant:hover { text-decoration: none; border-color: var(--accent); }
a.tenant:hover strong { color: var(--link); }
a.tenant p { margin: var(--sp-2) 0 0; color: var(--text-muted); font-size: var(--fs-sm); }

/* 頁腳 */
.footer {
  margin-top: var(--sp-8); padding: var(--sp-5) 0 var(--sp-7);
  border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: var(--fs-sm);
}
.footer a { color: var(--text-muted); text-decoration: underline; }