/* ============================================================
   誰動了我的棲地! — 基礎樣式
   - CSS 變數整段沿用 reference/project/styles.css 的 :root
   - 舞台尺寸調整為 1180×820,字級從 22 縮為 19
   ============================================================ */

:root {
  /* 棲地主題色 */
  --hd-color-wetland:   #6B9E7F;
  --hd-color-forest:    #4A7C59;
  --hd-color-urban:     #8B92A8;
  --hd-color-port:      #5B7A99;

  /* 六色族群 */
  --hd-species-red:     #C8553D;
  --hd-species-green:   #6B9E47;
  --hd-species-yellow:  #D9A441;
  --hd-species-brown:   #8B6B47;
  --hd-species-blue:    #4A7BA6;
  --hd-species-purple:  #8B5A9F;

  /* 紙張/墨色系 */
  --hd-paper:           #F5F1E8;
  --hd-paper-dark:      #EBE4D3;
  --hd-card:            #FFFFFE;
  --hd-card-soft:       #FBF8F0;
  --hd-ink:             #2A2620;
  --hd-ink-soft:        #5C5448;
  --hd-ink-muted:       #8A8275;
  --hd-line:            #D9CFB8;
  --hd-line-soft:       #E8E0CC;

  /* 強調色 */
  --hd-accent:          #B85C3D;
  --hd-accent-soft:     #E8C9A8;
  --hd-warning:         #C77A2E;
  --hd-danger:          #B53C2E;
  --hd-success:         #5B8C3F;
  --hd-mist:            #2A2433;

  /* 字體 */
  --hd-font-sans:    "Noto Sans TC", system-ui, -apple-system, sans-serif;
  --hd-font-display: "Fraunces", "Noto Sans TC", serif;
  --hd-font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* 圓角 */
  --hd-radius-sm: 7px;
  --hd-radius:    12px;
  --hd-radius-lg: 17px;
  --hd-radius-xl: 24px;

  /* 陰影 */
  --hd-shadow-sm: 0 1px 2px rgba(60,46,20,.06), 0 1px 1px rgba(60,46,20,.04);
  --hd-shadow:    0 3px 8px rgba(60,46,20,.08), 0 1px 3px rgba(60,46,20,.06);
  --hd-shadow-lg: 0 16px 40px rgba(60,46,20,.14), 0 6px 12px rgba(60,46,20,.06);

  /* 舞台尺寸:對齊 PRD 設計基準 1180×820(iPad Air 橫向實寬),main.js 算 scale 套上 */
  --hd-stage-w: 1180px;
  --hd-stage-h: 820px;
  --hd-topbar-h: 72px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--hd-paper);
  font-family: var(--hd-font-sans);
  color: var(--hd-ink);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 視窗鎖在 100vh,杜絕 body 因為 stage layout box 而撐高 */
  height: 100vh;
  overflow: hidden;
}

/* 舞台:固定 1180×820 layout box,由 main.js 算 scale 比例
   用 position: fixed + translate(-50%, -50%) 脫離 body 的 layout flow,
   這樣即使 layout box 比視窗大也不會把 body 撐高 / 出現滾動條 */
.hd-stage {
  position: fixed;
  left: 50%;
  top: 50%;
  width: var(--hd-stage-w);
  height: var(--hd-stage-h);
  background: var(--hd-paper);
  overflow: hidden;
  box-shadow: none;
  border-radius: 0;
  transform-origin: center center;
  /* 預設先擺到中間,實際 scale 由 main.js 套上 */
  transform: translate(-50%, -50%) scale(1);
}

/* 紙張紋理(輕微噪點) */
.hd-stage::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(184,156,108,.04) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(110,140,90,.03) 0%, transparent 40%);
  z-index: 0;
}

/* ============================================================
   通用 pill / section label / scrollbar
   ============================================================ */
.hd-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px;
  background: var(--hd-card);
  border: 1px solid var(--hd-line);
  border-radius: 999px;
  font-size: 16px;
  color: var(--hd-ink-soft);
  white-space: nowrap;
}
.hd-pill__label {
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hd-ink-muted);
  white-space: nowrap;
}
.hd-pill__value {
  font-weight: 600;
  color: var(--hd-ink);
  font-variant-numeric: tabular-nums;
}

.hd-section-label {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hd-ink-muted);
  font-weight: 700;
  margin: 0 0 4px;
  padding: 0 4px;
  display: flex; justify-content: space-between; align-items: center;
  white-space: nowrap;
}

/* 共用滾動條樣式 */
.hd-scroll::-webkit-scrollbar { width: 6px; }
.hd-scroll::-webkit-scrollbar-thumb {
  background: var(--hd-line);
  border-radius: 3px;
}