/*
 * 前台外部樣式表（app.css）— 點燈祈福前台 RWD 版面（Task 19.2）
 *
 * 刻意以「外部樣式表」承載所有排版，使前台視圖本身不含行內樣式、不使用 table/font 排版
 * （Req 1.5、18.2）。採「行動優先（mobile-first）」與相對單位（rem/%）達成響應式版面，
 * 並以三組斷點對應三種寬度區間各自適配（Req 18.1）：
 *
 *   - 手機（視埠寬度 320–767px）：基礎樣式（單欄、可換行、留白緊湊）。
 *   - 平板（768–1024px）：`@media (min-width: 768px)`（雙欄格線、放大標題與留白）。
 *   - 桌機（≥1025px）：`@media (min-width: 1025px)`（三欄格線、限制內容最大寬度置中）。
 *
 * 無水平溢出（Req 18.4）：`box-sizing: border-box`、媒體元素 `max-width: 100%`、長字串換行
 * （`overflow-wrap`）、彈性版面 `flex-wrap` 與格線 `min-width: 0`，確保 ≥320px 主要內容不需
 * 水平捲動即完整可見。觸控目標（Req 18.3）：導覽/按鈕/表單控制項/分頁等互動目標之最小有效
 * 區域維持 ≥44×44 CSS 像素（`--touch: 2.75rem`）。
 */

:root {
    --max-content: 64rem;
    --gap: 1rem;
    --gap-lg: 1.5rem;
    --radius: 0.5rem;
    --touch: 2.75rem;               /* 44px：最小觸控目標（Req 18.3） */
    --fg: #2b2320;
    --muted: #6b5d54;
    --bg: #fbf7f1;
    --surface: #ffffff;
    --border: #e4d9cc;
    --accent: #b4531f;
    --accent-fg: #ffffff;
    --error: #b91c1c;
    --link: #9a3d12;
    --focus: #1d4ed8;
    --font: system-ui, -apple-system, "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.public {
    margin: 0;
    min-width: 320px;               /* 支援視埠寬度 320px 以上（Req 18.1） */
    color: var(--fg);
    background: var(--bg);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.6;
}

/* 媒體元素不溢出（≥320px 無水平捲動，Req 18.4） */
img,
picture,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

/* 長字串（如無空白之網址/內容）換行，避免水平溢出（Req 18.4） */
p,
h1,
h2,
h3,
li,
dt,
dd {
    overflow-wrap: anywhere;
    word-break: break-word;
}

a {
    color: var(--link);
}

:where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

/* 略過連結（skip link，a11y）：預設移出畫面，鍵盤聚焦時顯示 */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    min-height: var(--touch);
    padding: 0.5rem 1rem;
    background: var(--accent);
    color: var(--accent-fg);
    border-radius: 0 0 var(--radius) 0;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

/* 版面容器：置中、留白、不溢出 */
.site-header,
.site-footer,
main {
    width: 100%;
    max-width: var(--max-content);
    margin-inline: auto;
    padding-inline: var(--gap);
}

/* 頁首 */
.site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap);
    padding-block: var(--gap);
    border-bottom: 1px solid var(--border);
}

.site-header__brand {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
}

/* 主選單（觸控目標 ≥44px） */
.site-nav {
    flex: 1 1 auto;
}

.site-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch);
    padding: 0 0.75rem;
    border-radius: var(--radius);
    color: var(--fg);
    text-decoration: none;
}

.site-nav a:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* 語系切換 hook（供 Task 21 locale.js 綁定；觸控目標 ≥44×44） */
.locale-switch {
    display: inline-flex;
    gap: 0.25rem;
}

.locale-switch__btn {
    min-height: var(--touch);
    min-width: var(--touch);
    padding: 0 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--fg);
    font: inherit;
    cursor: pointer;
}

.locale-switch__btn[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-fg);
}

/* 主要內容 */
main {
    padding-block: var(--gap-lg);
}

h1 {
    margin-top: 0;
    font-size: 1.5rem;
}

h2 {
    font-size: 1.2rem;
}

/* 通用按鈕（觸控目標 ≥44×44，Req 18.3） */
.button,
button,
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch);
    min-width: var(--touch);
    padding: 0.5rem 1.25rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--accent-fg);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.button:hover,
button:hover,
input[type="submit"]:hover {
    filter: brightness(0.95);
}

/* 表單 */
.wish-form__form {
    max-width: 40rem;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: var(--gap);
}

.field > label,
.field > legend {
    font-weight: 600;
    color: var(--muted);
}

input[type="text"],
input[type="search"],
input[type="number"],
select,
textarea {
    width: 100%;
    min-height: var(--touch);
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--fg);
    font-family: inherit;
    font-size: 1rem;                /* ≥16px：避免行動裝置聚焦時自動縮放 */
}

textarea {
    min-height: 8rem;
    resize: vertical;
}

fieldset.field {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem;
}

.field__radio {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: var(--touch);
    margin-right: 1rem;
}

/* 選填欄位輔助說明（如生日填寫指引） */
.field__hint {
    margin: 0 0 0.5rem;
    color: var(--muted);
    font-size: 0.9rem;
}

/* 生日年／月／日：橫向排列、可換行（≥320px 無水平溢出，Req 18.4） */
.birthday-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.birthday-fields .field {
    flex: 1 1 5rem;
    min-width: 0;
    margin-bottom: 0.5rem;
}

/* 核取方塊（如農曆閏月）：觸控目標 ≥44px（Req 18.3） */
.field__checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: var(--touch);
}

/* 核取方塊本身不套用上方 100% 寬度之輸入樣式 */
.field__checkbox input[type="checkbox"] {
    width: auto;
    min-height: auto;
    margin: 0;
}

.field__error,
.error {
    color: var(--error);
    font-weight: 600;
}

.error[role="alert"] {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--error);
    border-radius: var(--radius);
    background: #fef2f2;
}

/* 首頁：燈種清單（響應式格線） */
.home__intro {
    color: var(--muted);
}

.lamp-list,
.wish-list,
.stats-list {
    display: grid;
    gap: var(--gap);
    grid-template-columns: 1fr;     /* 手機：單欄 */
    margin: 0;
    padding: 0;
    list-style: none;
}

.lamp-list__item {
    display: flex;
    min-width: 0;
}

.lamp-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.lamp-card__link {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: var(--touch);
    padding: var(--gap);
    color: var(--fg);
    text-decoration: none;
}

.lamp-card__image {
    width: 100%;
    border-radius: var(--radius);
    background: #f0e7db;
}

.lamp-card__name {
    margin: 0;
    font-size: 1.1rem;
}

/* 燈種詳情 */
.lamp-detail,
.wish-detail {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--gap-lg);
}

.lamp-detail__header {
    margin-bottom: var(--gap);
}

/* 燈種代碼徽章（A–I）：與名稱並列，輔助辨識 */
.lamp-detail__code {
    display: inline-block;
    margin: 0 0 0.35rem;
    padding: 0.15rem 0.6rem;
    background: var(--accent);
    color: var(--accent-fg);
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 700;
}

.lamp-detail__name {
    margin: 0;
}

/* 代表圖以 figure 包裹：重置瀏覽器對 figure 的預設外距，改由此提供間距 */
.lamp-detail__figure {
    margin: 0 0 var(--gap-lg);
}

.lamp-detail__image {
    display: block;
    border-radius: var(--radius);
}

/* 咒語段落：以左側強調線與淺底突顯，仍為語意化段落（非引言排版） */
.lamp-detail__mantra-text {
    margin: 0;
    padding: var(--gap);
    background: var(--bg);
    border-inline-start: 4px solid var(--accent);
    border-radius: var(--radius);
}

.lamp-detail__action {
    margin-top: var(--gap-lg);
}

/* 願望卡片 */
.wish-card {
    min-width: 0;
    padding: var(--gap);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.wish-card__title {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

.wish-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0 0 0.5rem;
    color: var(--muted);
}

.wish-card__summary {
    margin: 0 0 0.5rem;
    overflow-wrap: anywhere;
}

.wish-card__blessing {
    margin: 0;
    color: var(--accent);
    font-weight: 600;
}

/* -----------------------------------------------------------------------
 * 願望列表卡片火焰（點燈塔效果；Task 項目 B／Req 4.4、6.1、6.4）
 *
 * flame.js 依容器 data-flame-prefer="css" 於非 reduced-motion 時採「CSS 動畫模式」（列表一頁
 * 至多 25 盞，較 25 個 canvas RAF 省資源），並在容器上加 .wish-detail__flame--css（複用既有
 * CSS 火焰動畫與 --flame-* 九燈色盤，故各燈顏色相異，Req 4.4）；reduced-motion 時改靜態圖
 * （.wish-detail__flame--static）。此處僅提供「卡片內合宜尺寸與置中」；動畫／色盤沿用既有
 * .wish-detail__flame--css / --static 規則（其為 class 選擇器，容器獲加該 class 即自動套用）。
 * --------------------------------------------------------------------- */
.wish-card__flame {
    width: 3.5rem;                  /* 卡片內小尺寸火焰（3–4rem） */
    aspect-ratio: 1 / 1;
    margin: 0 auto 0.75rem;         /* 置中於卡片頂部 */
    position: relative;
    overflow: hidden;               /* 火焰光暈溢出時裁切，維持卡片版面整潔 */
    border-radius: var(--radius);
}

/* 卡片火焰於 canvas 退場模式（CSS 不可用時）亦填滿容器（.flame__canvas 之祖先為卡片容器） */
.wish-card__flame .flame__canvas {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.wishes__empty {
    padding: var(--gap-lg);
    text-align: center;
}

/* 分頁（觸控目標 ≥44×44） */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap);
    margin-top: var(--gap-lg);
}

.pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch);
    min-width: var(--touch);
    padding: 0 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--link);
    text-decoration: none;
}

.pagination__status {
    color: var(--muted);
}

/* 單一願望 */
.wish-detail__flame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 16rem;
    aspect-ratio: 1 / 1;
    margin: 0 auto var(--gap);
    background: var(--surface);
    border: 1px dashed var(--border);   /* 佔位框：僅於火焰尚未初始化時顯示（見下方 data-flame-mode 覆蓋） */
    border-radius: var(--radius);
}

/* -----------------------------------------------------------------------
 * 火焰視覺特效（Task 20.2；Req 6.1／6.3／6.6）
 *
 * flame.js（Task 20.1）依瀏覽器能力於火焰容器 .wish-detail__flame 上產出下列 hook：
 *   - Canvas 模式（Req 6.1 預設）：插入 <canvas class="flame__canvas">，容器設 data-flame-mode="canvas"。
 *   - CSS 模式（Req 6.3 退場）：加上 .wish-detail__flame--css、插入內層 .flame__css-body，
 *     並以 CSS 自訂屬性傳入「該燈種色盤」：
 *       --flame-core（核心色）／--flame-mid（中段）／--flame-edge（外焰）／--flame-glow（光暈）／--flame-hue（色相）。
 *   - 靜態模式（Req 6.4 減少動態／Req 6.6 皆不支援）：加上 .wish-detail__flame--static、
 *     插入 <img class="flame__static" src="assets/img/lamps/{CODE}.png">。
 *
 * 本區「消費」上述 hook：CSS 火焰動畫以九燈色盤變數著色，使 A–I 各燈顏色相異（Req 4.4）；
 * 靜態圖填滿容器；dashed 佔位框僅於「尚未初始化」時出現，任一模式啟用（具 data-flame-mode）即移除。
 * 動畫／樣式一律置於此外部樣式表（不使用行內樣式排版）。
 * --------------------------------------------------------------------- */

/* 任一渲染模式啟用後（flame.js 設定 data-flame-mode）移除未初始化時的 dashed 佔位框 */
.wish-detail__flame[data-flame-mode] {
    border-style: solid;
    border-color: transparent;
    position: relative;
    overflow: hidden;
}

/* Canvas 模式：畫布填滿容器（維持 1:1） */
.wish-detail__flame .flame__canvas {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

/* === CSS 火焰動畫模式（Req 6.3）：消費 --flame-* 九燈色盤，使各燈顏色相異（Req 4.4） === */
.wish-detail__flame--css {
    /* 以該燈種色相鋪陳柔和底光；--flame-hue 由 flame.js 依燈種設定，未設時預設暖橙（30） */
    background:
        radial-gradient(circle at 50% 82%,
            hsl(var(--flame-hue, 30) 85% 55% / 0.20) 0%,
            transparent 60%),
        var(--surface);
}

/* 火焰本體：以該燈種 核心／中段／外焰 色構成的火焰形狀 */
.wish-detail__flame--css .flame__css-body {
    position: relative;
    width: 40%;
    aspect-ratio: 3 / 5;
    /* 火焰輪廓：底部渾圓、頂端收尖 */
    border-radius: 50% 50% 45% 45% / 65% 65% 40% 40%;
    background:
        radial-gradient(ellipse 62% 72% at 50% 82%,
            var(--flame-core, #fff1c9) 0%,
            var(--flame-mid, #ffb347) 40%,
            var(--flame-edge, #f97316) 72%,
            transparent 100%);
    box-shadow: 0 0 2.2rem 0.35rem hsl(var(--flame-hue, 30) 90% 55% / 0.55);
    transform-origin: 50% 92%;
    animation: flame-dance 2.4s ease-in-out infinite;
    will-change: transform, opacity;
}

/* 內焰：更亮的核心，疊加提升層次感（純裝飾，aria-hidden 由 flame.js 設定） */
.wish-detail__flame--css .flame__css-body::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 8%;
    width: 56%;
    height: 60%;
    transform: translateX(-50%);
    border-radius: 50% 50% 45% 45% / 65% 65% 40% 40%;
    background:
        radial-gradient(ellipse 60% 70% at 50% 80%,
            #fff 0%,
            var(--flame-core, #fff1c9) 45%,
            transparent 100%);
    opacity: 0.85;
    animation: flame-core-flicker 1.3s ease-in-out infinite alternate;
}

/* 底部光暈：以該燈種光暈色柔化擴散 */
.wish-detail__flame--css .flame__css-body::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10%;
    width: 82%;
    height: 26%;
    transform: translateX(-50%);
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 50%,
            var(--flame-glow, #c2410c) 0%,
            transparent 72%);
    opacity: 0.7;
    filter: blur(2px);
    animation: flame-glow-pulse 2s ease-in-out infinite alternate;
}

/* 火焰搖曳／明滅（Req 6.1 動態呈現） */
@keyframes flame-dance {
    0%   { transform: rotate(-3deg) scale(1, 1);       opacity: 0.9; }
    25%  { transform: rotate(2deg)  scale(0.97, 1.06); opacity: 1; }
    50%  { transform: rotate(-2deg) scale(1.04, 0.96); opacity: 0.92; }
    75%  { transform: rotate(3deg)  scale(0.98, 1.03); opacity: 1; }
    100% { transform: rotate(-3deg) scale(1, 1);       opacity: 0.9; }
}

@keyframes flame-core-flicker {
    0%   { opacity: 0.7;  transform: translateX(-50%) scaleY(0.96); }
    100% { opacity: 0.95; transform: translateX(-50%) scaleY(1.05); }
}

@keyframes flame-glow-pulse {
    0%   { opacity: 0.5; transform: translateX(-50%) scale(0.9); }
    100% { opacity: 0.8; transform: translateX(-50%) scale(1.1); }
}

/* === 靜態退場圖模式（Req 6.4 減少動態／Req 6.6 皆不支援）：圖片填滿容器（Req 6.6） === */
.wish-detail__flame--static {
    padding: 0;
}

.wish-detail__flame--static .flame__static {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.wish-detail__meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 1rem;
    margin: 0 0 var(--gap);
}

.wish-detail__meta dt {
    color: var(--muted);
    font-weight: 600;
}

.wish-detail__meta dd {
    min-width: 0;
    margin: 0;
}

.wish-detail__count {
    color: var(--accent);
    font-weight: 700;
}

.wish-detail__bless {
    margin: var(--gap) 0;
}

.wish-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    margin-top: var(--gap);
}

.wish-detail__actions a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch);
    padding: 0 1rem;
    border-radius: var(--radius);
    text-decoration: none;
}

/* 統計清單（以語意化清單呈現，不以 table 排版，Req 18.2） */
.stats-list__item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: var(--gap);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.stats-list__lamp {
    font-weight: 700;
}

/* 搜尋表單 */
.search__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
    margin-bottom: var(--gap-lg);
}

.search__form label {
    flex-basis: 100%;
    font-weight: 600;
    color: var(--muted);
}

.search__form input[type="search"] {
    flex: 1 1 12rem;
}

.search__empty,
.search__count {
    color: var(--muted);
}

/* -----------------------------------------------------------------------
 * Google AdSense 300×250 版位（僅公開頁；設定齊全時由 layout 輸出，項目 C）
 *
 * 置中、上下留白、限制最大寬度為版位寬（300px），使 ≥320px 視埠不水平溢出（Req 18.4 之精神）。
 * <ins class="adsbygoogle"> 之尺寸行內樣式為 AdSense 標準片段所需（第三方要求格式），
 * 故版位「容器」樣式置於此外部樣式表，僅該第三方 <ins> 保留其必需之行內尺寸。
 * --------------------------------------------------------------------- */
.ad-slot {
    max-width: 300px;
    margin-block: var(--gap-lg);
    margin-inline: auto;            /* 置中 */
    text-align: center;
}

.ad-slot--mrec {
    min-height: 250px;              /* 預留 300×250 版位高度，避免載入前後版面跳動 */
}

/* 頁尾 */
.site-footer {
    padding-block: var(--gap-lg);
    color: var(--muted);
}

/* 訊息頁 */
.message {
    text-align: center;
}

/* 視覺隱藏工具（保留於無障礙樹供輔助技術讀取） */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* === 平板（視埠寬度 768–1024px，Req 18.1） =========================== */
@media (min-width: 768px) {
    h1 {
        font-size: 1.75rem;
    }

    .lamp-list,
    .wish-list,
    .stats-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .lamp-detail,
    .wish-detail {
        padding: 2rem;
    }

    .search__form label {
        flex-basis: auto;
    }
}

/* === 桌機（視埠寬度 ≥1025px，Req 18.1） ============================== */
@media (min-width: 1025px) {
    h1 {
        font-size: 2rem;
    }

    .site-header {
        padding-block: 1.25rem;
    }

    .lamp-list,
    .wish-list {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--gap-lg);
    }

    .stats-list {
        grid-template-columns: repeat(3, 1fr);
    }

    .stats-list__item {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

/* === 尊重「偏好減少動態效果」（Req 6.4 基線；火焰動畫細節屬 Task 20） === */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* === 火焰動畫於「偏好減少動態」時完全停止，呈現靜止火焰（Req 6.4） =========== */
/* 前一組全域規則已將動畫時長壓至近 0；此處對火焰元素明確關閉動畫，確保靜止呈現。 */
@media (prefers-reduced-motion: reduce) {
    .wish-detail__flame--css .flame__css-body,
    .wish-detail__flame--css .flame__css-body::before,
    .wish-detail__flame--css .flame__css-body::after {
        animation: none !important;
    }
}