/* ==========================================================================
   components.css — 全站共用基礎與元件（規格見 docs/design-system.md）
   依賴 tokens.css。頁面自己的 CSS 只放版面與頁面專屬裝飾，
   不得重新定義 .btn / .card / .chip / .tag / .field 的外觀。
   ========================================================================== */

/* ---------- 基礎 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{margin:0; background:var(--c-bg); color:var(--c-ink); font-family:var(--f-body);
  font-size:var(--fs-base); line-height:var(--lh-body); letter-spacing:var(--ls-body); overflow-wrap:break-word}
img,svg,video{max-width:100%; height:auto}
button,input,select,textarea{font:inherit; color:inherit; letter-spacing:inherit}
a{color:var(--c-accent); text-underline-offset:.2em}
a:hover{color:var(--c-accent-hi)}
:focus-visible{outline:var(--focus-ring); outline-offset:3px}
::selection{background:rgba(var(--rgb-accent),.35); color:var(--c-ink)}

/* 字體工具 */
.pixel{font-family:var(--f-display); letter-spacing:var(--ls-pixel); line-height:var(--lh-tight)}
.silk{font-family:var(--f-pixel); letter-spacing:var(--ls-pixel)}
.muted{color:var(--c-ink-2)}
.subtle{color:var(--c-ink-3)}

/* 無障礙工具 */
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip-link{position:fixed; left:var(--s-3); top:-100px; z-index:var(--z-overlay);
  font-family:var(--f-pixel); font-size:var(--fs-sm); padding:var(--s-3) var(--s-4); min-height:var(--tap);
  background:var(--c-gold); color:var(--c-on-accent); border:var(--bw) solid var(--c-on-accent); text-decoration:none}
.skip-link:focus{top:var(--s-3)}

/* ---------- 標題層級 ---------- */
.h1{font-family:var(--f-display); font-size:var(--fs-lg); line-height:var(--lh-tight); letter-spacing:var(--ls-pixel); margin:0 0 var(--s-4)}
.h2{font-family:var(--f-display); font-size:var(--fs-lg); line-height:var(--lh-tight); letter-spacing:var(--ls-pixel); margin:0 0 var(--s-3)}
.h3{font-family:var(--f-pixel); font-size:var(--fs-md); line-height:var(--lh-tight); margin:0 0 var(--s-2)}
.eyebrow{font-family:var(--f-pixel); font-weight:700; font-size:var(--fs-xs); letter-spacing:.12em; color:var(--c-accent); margin:0 0 var(--s-2)}
@media (min-width:761px){ .h1{font-size:var(--fs-2xl)} .h2{font-size:var(--fs-xl)} }

/* ---------- 按鈕 .btn（primary 預設；.btn--ghost／.btn--gold） ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-height:var(--tap); padding:var(--s-3) var(--s-5); border-radius:var(--r-0);
  font-family:var(--f-pixel); font-weight:700; font-size:var(--fs-sm); letter-spacing:var(--ls-pixel); line-height:1.3;
  text-decoration:none; cursor:pointer; text-align:center;
  color:var(--c-on-accent); background:var(--c-accent); border:var(--bw) solid var(--c-on-accent);
  box-shadow:var(--shadow-hard);
  transition:transform var(--t-fast) var(--ease-step), box-shadow var(--t-fast) var(--ease-step), background-color var(--t-base), border-color var(--t-base), color var(--t-base)}
.btn:hover{background:var(--c-accent-hi); color:var(--c-on-accent); transform:translate(-2px,-2px); box-shadow:var(--shadow-hard-hover)}
.btn:active{transform:translate(2px,2px); box-shadow:0 0 0 0 rgba(0,0,0,.5)}
.btn:focus-visible{outline:var(--focus-ring); outline-offset:3px}
.btn--ghost{color:var(--c-ink); background:transparent; border-color:var(--c-line-strong); box-shadow:none}
.btn--ghost:hover{color:var(--c-accent); background:rgba(var(--rgb-accent),.08); border-color:var(--c-accent); box-shadow:var(--shadow-hard)}
.btn--gold{color:var(--c-on-accent); background:var(--c-gold)}
.btn--gold:hover{background:var(--c-gold-hi)}
.btn--sm{min-height:var(--tap); padding:var(--s-2) var(--s-3); font-size:var(--fs-xs)}
.btn--block{display:flex; width:100%}
.btn:disabled,.btn[aria-disabled="true"]{cursor:not-allowed; transform:none; box-shadow:none;
  color:var(--c-ink-3); background:var(--c-sunk); border-color:var(--c-line); border-style:dashed}
.btn[aria-busy="true"]{cursor:progress}
.btn[aria-busy="true"]::after{content:""; width:.8em; height:.8em; background:currentColor; animation:blink .6s steps(2) infinite}

/* 圖示按鈕（✕、HUD 按鈕）：最小 44×44 */
.icon-btn{display:inline-flex; align-items:center; justify-content:center; min-width:var(--tap); min-height:var(--tap);
  padding:var(--s-2); border-radius:var(--r-0); cursor:pointer; line-height:1;
  color:var(--c-ink); background:rgba(var(--rgb-bg),.6); border:var(--bw) solid var(--c-line-strong);
  transition:transform var(--t-fast) var(--ease-step), border-color var(--t-base), color var(--t-base), background-color var(--t-base)}
.icon-btn:hover{color:var(--c-accent); border-color:var(--c-accent)}
.icon-btn:active{transform:translate(1px,1px)}
.icon-btn[aria-pressed="true"],.icon-btn[aria-expanded="true"]{color:var(--c-on-accent); background:var(--c-accent); border-color:var(--c-accent)}
.icon-btn:disabled{cursor:not-allowed; opacity:1; color:var(--c-ink-3); border-style:dashed}

/* ---------- 卡片 .card（連結卡加 .card--link；寶箱卡 .card--gold） ---------- */
.card{display:block; position:relative; background:var(--c-surface); color:var(--c-ink);
  border:var(--bw) solid var(--c-line-strong); border-radius:var(--r-0); box-shadow:var(--shadow-hard); padding:var(--s-5)}
.card > :first-child{margin-top:0} .card > :last-child{margin-bottom:0}
a.card,.card--link{text-decoration:none; transition:transform var(--t-fast) var(--ease-step), box-shadow var(--t-fast) var(--ease-step), border-color var(--t-base)}
a.card:hover,.card--link:hover{border-color:var(--c-accent); transform:translate(-2px,-2px); box-shadow:var(--shadow-hard-hover); color:var(--c-ink)}
a.card:active,.card--link:active{transform:translate(1px,1px); box-shadow:none}
.card--gold{border-color:var(--c-gold)}
a.card--gold:hover{border-color:var(--c-gold); box-shadow:6px 6px 0 0 var(--c-gold), var(--glow-gold)}
.card--muted{background:var(--c-sunk); border-style:dashed; box-shadow:none}
@media (max-width:760px){ .card{padding:var(--s-4)} }

/* ---------- 連結膠囊 .chip ---------- */
.chip{display:inline-flex; align-items:center; gap:var(--s-2); min-height:var(--tap); padding:var(--s-2) var(--s-3);
  font-family:var(--f-pixel); font-size:var(--fs-sm); letter-spacing:var(--ls-pixel); line-height:1.3;
  color:var(--c-accent); background:rgba(var(--rgb-bg),.6); text-decoration:none;
  border:var(--bw) solid var(--c-line-strong); border-radius:var(--r-0); box-shadow:var(--shadow-hard);
  transition:transform var(--t-fast) var(--ease-step), border-color var(--t-base), color var(--t-base)}
.chip:hover{color:var(--c-accent-hi); border-color:var(--c-accent); transform:translate(-1px,-1px)}
.chip:active{transform:translate(1px,1px); box-shadow:none}
.chip--gold{color:var(--c-gold)} .chip--gold:hover{color:var(--c-gold-hi); border-color:var(--c-gold)}

/* ---------- 標籤 .tag（非互動） ---------- */
.tag{display:inline-block; font-family:var(--f-pixel); font-weight:700; font-size:var(--fs-xs); letter-spacing:.1em; line-height:1.4;
  color:var(--c-accent); background:rgba(var(--rgb-accent),.08); border:var(--bw) solid var(--c-line-strong);
  border-radius:var(--r-0); padding:var(--s-1) var(--s-2)}
.tag--gold{color:var(--c-gold); background:rgba(var(--rgb-gold),.08)}
.tag--muted{color:var(--c-ink-3); background:transparent}

/* ---------- 數據 .stat ---------- */
.stat{margin:0}
.stat__num{display:block; font-family:var(--f-display); font-size:var(--fs-lg); line-height:1; color:var(--c-accent); text-shadow:2px 2px 0 rgba(0,0,0,.5)}
.stat__label{display:block; margin-top:var(--s-2); font-family:var(--f-pixel); font-size:var(--fs-sm); color:var(--c-ink-2)}

/* ---------- 表單 .field ---------- */
.field{display:grid; gap:var(--s-2); margin:0 0 var(--s-4)}
.field__label{font-family:var(--f-pixel); font-weight:700; font-size:var(--fs-sm); color:var(--c-ink)}
.field__hint{font-size:var(--fs-sm); color:var(--c-ink-3); margin:0}
.input{width:100%; min-height:var(--tap); padding:var(--s-3); border-radius:var(--r-0);
  background:var(--c-sunk); color:var(--c-ink); border:var(--bw) solid var(--c-line-strong);
  transition:border-color var(--t-base)}
.input::placeholder{color:var(--c-ink-3); opacity:1}
.input:hover{border-color:var(--c-accent)}
.input:focus-visible{outline:3px solid var(--c-accent); outline-offset:1px; border-color:var(--c-accent)}
.input[aria-invalid="true"]{border-color:var(--c-danger)}
.input:disabled{cursor:not-allowed; color:var(--c-ink-3); border-style:dashed}
.field__error{margin:0; font-size:var(--fs-sm); color:var(--c-danger)}
.field__error:empty{display:none}

/* 狀態訊息（aria-live 區） */
.status{margin:var(--s-3) 0 0; padding:var(--s-3) var(--s-4); font-size:var(--fs-sm); border:var(--bw) solid var(--c-line-strong); background:var(--c-sunk); color:var(--c-ink-2)}
.status:empty{display:none}
.status--success{border-color:var(--c-success); color:var(--c-success)}
.status--error{border-color:var(--c-danger); color:var(--c-danger)}

/* 空狀態／錯誤區塊 */
.empty-state{padding:var(--s-5); text-align:center; color:var(--c-ink-2); border:var(--bw) dashed var(--c-line-strong); background:var(--c-sunk)}
.empty-state__title{font-family:var(--f-pixel); font-weight:700; color:var(--c-ink); margin:0 0 var(--s-2)}

/* ---------- Toast ---------- */
.toast{position:fixed; left:50%; bottom:var(--s-5); z-index:var(--z-toast); max-width:min(360px, calc(100vw - 2*var(--gutter)));
  transform:translate(-50%, calc(100% + var(--s-6))); opacity:0; pointer-events:none;
  padding:var(--s-3) var(--s-4); background:var(--c-surface); color:var(--c-ink); font-size:var(--fs-sm);
  border:var(--bw) solid var(--c-accent); box-shadow:var(--shadow-hard);
  transition:transform var(--t-slow) var(--ease-out), opacity var(--t-base)}
.toast.is-shown{transform:translate(-50%,0); opacity:1; pointer-events:auto}
.toast--error{border-color:var(--c-danger)}

/* ---------- 對話框（原生 <dialog>） ---------- */
dialog.dlg{border:var(--bw-strong) solid var(--c-accent); border-radius:var(--r-0); background:var(--c-surface); color:var(--c-ink);
  max-width:min(520px, calc(100vw - 2*var(--gutter))); width:100%; max-height:min(80svh, 720px); padding:0; box-shadow:var(--shadow-hard); overflow:auto}
dialog.dlg::backdrop{background:rgba(var(--rgb-shade),.72)}
dialog.dlg[open]{animation:dlg-in var(--t-base) var(--ease-step)}
dialog.dlg[open]::backdrop{animation:fade-in var(--t-base) linear}
dialog.dlg.is-closing{animation:dlg-out var(--t-fast) var(--ease-step) forwards}
.dlg__head{position:sticky; top:0; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:var(--s-3);
  padding:var(--s-2) var(--s-2) var(--s-2) var(--s-4); background:var(--c-surface); border-bottom:var(--bw) solid var(--c-line)}
.dlg__title{font-family:var(--f-pixel); font-size:var(--fs-md); margin:0}
.dlg__body{padding:var(--s-4)}

/* ---------- 側邊／底部面板（成就、圖鑑、行動選單） ---------- */
.sheet{position:fixed; z-index:var(--z-panel); background:var(--c-surface); color:var(--c-ink); overflow-y:auto;
  visibility:hidden; transition:transform var(--t-slow) var(--ease-out), visibility 0s linear var(--t-slow)}
.sheet.is-open{visibility:visible; transform:none; transition:transform var(--t-slow) var(--ease-out), visibility 0s}
.sheet__head{position:sticky; top:0; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:var(--s-3);
  padding:var(--s-2) var(--s-2) var(--s-2) var(--s-4); background:var(--c-surface); border-bottom:var(--bw) solid var(--c-line)}
.sheet__title{font-family:var(--f-pixel); font-size:var(--fs-sm); color:var(--c-accent); margin:0}
.sheet--right{top:0; right:0; height:100%; width:min(360px,100%); border-left:var(--bw-strong) solid var(--c-line-strong); transform:translateX(100%)}
.sheet--left{top:0; left:0; height:100%; width:min(360px,100%); border-right:var(--bw-strong) solid var(--c-line-strong); transform:translateX(-100%)}
.sheet--bottom{left:0; right:0; bottom:0; max-height:75svh; border-top:var(--bw-strong) solid var(--c-line-strong);
  transform:translateY(100%); padding-bottom:env(safe-area-inset-bottom); z-index:var(--z-menu)}
.scrim{position:fixed; inset:0; z-index:calc(var(--z-panel) - 1); background:rgba(var(--rgb-shade),.6); opacity:0; pointer-events:none; transition:opacity var(--t-base)}
.scrim.is-shown{opacity:1; pointer-events:auto}

/* ---------- 載入 ---------- */
.loading{display:inline-flex; align-items:center; gap:var(--s-2); font-family:var(--f-pixel); font-size:var(--fs-sm); color:var(--c-ink-2)}
.loading::before{content:""; width:10px; height:10px; background:var(--c-accent); animation:blink .6s steps(2) infinite}

/* ---------- 頁面外殼：頂部導覽 .topbar（內容頁用） ---------- */
.topbar{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-4); padding:var(--s-2) var(--gutter);
  background:rgba(var(--rgb-bg),.92); border-bottom:var(--bw) solid var(--c-line)}
.topbar a{display:inline-flex; align-items:center; min-height:var(--tap); font-family:var(--f-pixel); font-size:var(--fs-sm); text-decoration:none; white-space:nowrap}
@media (min-width:761px){ .topbar--sticky{position:sticky; top:0; z-index:var(--z-hud)} }

/* ---------- 動畫關鍵影格 ---------- */
@keyframes blink{50%{opacity:0}}
@keyframes fade-in{from{opacity:0}}
@keyframes dlg-in{from{opacity:0; transform:translateY(8px) scale(.98)}}
@keyframes dlg-out{to{opacity:0; transform:translateY(8px) scale(.98)}}

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