/* 陸龜野食 — 明亮暖色 卡片圖鑑風（綠 × 陸龜褐黃） */

:root {
	--green: #3d7a45;
	--green-light: #58975f;
	--green-dark: #2c5a33;
	--amber: #c9942b;          /* 赫曼陸龜的褐黃 */
	--amber-light: #e8b955;
	--amber-pale: #fdf3dd;
	--bg: #faf7ee;             /* 暖米色底 */
	--surface: #ffffff;
	--text: #35392f;
	--text-dim: #85806f;
	--border: #eae4d2;
	--shadow: 0 1px 3px rgba(120, 95, 40, .08), 0 5px 16px rgba(120, 95, 40, .07);
	--shadow-lift: 0 6px 14px rgba(120, 95, 40, .14), 0 14px 36px rgba(120, 95, 40, .12);
	--radius: 16px;
	/* 適合度色階 */
	--feed-main: #2e8b3d;      /* 6-7 可作主食 */
	--feed-mod: #7cb342;       /* 4-5 適度餵食 */
	--feed-little: #d9a514;    /* 1-3 少量餵食 */
	--feed-no: #d3382c;        /* 0 請勿餵食 */
	--placeholder-bg: #f3eddb;
}

* { box-sizing: border-box; }

/* 詳細頁開啟時鎖住背景捲動 */
body.modal-open { overflow: hidden; }

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

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
	background: var(--bg);
	color: var(--text);
	line-height: 1.6;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px 40px;
}

/* ---------- Header ---------- */
.site-header {
	/* 光暈與底部琥珀色帶都改用背景層繪製，避免定位偽元素疊在語言下拉選單之上 */
	background:
		radial-gradient(220px 220px at 100% -30px, rgba(232, 185, 85, .30) 0%, transparent 68%),
		linear-gradient(90deg, var(--amber) 0%, var(--amber-light) 50%, var(--amber) 100%) left bottom / 100% 5px no-repeat,
		linear-gradient(150deg, #35743d 0%, #4d9257 55%, #6aa864 100%);
	color: #fff;
	padding: 22px 16px 16px;
	padding-top: max(22px, env(safe-area-inset-top));
	text-align: center;
	position: relative;
	z-index: 40; /* 高於 sticky .toolbar(z-index:20)，語言下拉選單才能浮在其上 */
}



.header-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
}

.site-header h1 {
	margin: 0;
	font-size: 1.55rem;
	font-weight: 800;
	letter-spacing: .08em;
	display: flex;
	align-items: center;
	gap: 9px;
	text-shadow: 0 1px 2px rgba(30, 60, 30, .25);
}

.tagline {
	margin: 5px 0 0;
	font-size: .85rem;
	opacity: .92;
	letter-spacing: .04em;
}

.btn-install {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	background: var(--amber);
	border: none;
	color: #fff;
	border-radius: 999px;
	padding: 6px 13px;
	font-size: .78rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(60, 40, 0, .25);
	white-space: nowrap;
}
.btn-install:hover { background: var(--amber-light); }
.btn-install:active { transform: translateY(-50%) scale(.96); }

/* ---------- 廣告 ---------- */
.ad-container {
	margin: 24px 0 8px;
	text-align: center;
	min-height: 120px;
}
.ad-label {
	display: block;
	font-size: .68rem;
	color: var(--text-dim);
	margin-bottom: 4px;
	letter-spacing: .05em;
}

/* ---------- 搜尋工具列（sticky） ---------- */
.toolbar {
	position: sticky;
	top: 0;
	z-index: 20;
	background: linear-gradient(var(--bg) 88%, rgba(250, 247, 238, 0));
	padding: 12px 0 10px;
	margin: 0 -16px;
	padding-left: 16px;
	padding-right: 16px;
}

.search-wrap {
	position: relative;
	max-width: 560px;
	margin: 0 auto;
}

.search-icon {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--green);
	pointer-events: none;
}

.search {
	width: 100%;
	padding: 13px 42px 13px 42px;
	font-size: 1rem;
	border: 2px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--text);
	box-shadow: var(--shadow);
	outline: none;
	-webkit-appearance: none;
	transition: border-color .15s, box-shadow .15s;
}
.search:focus {
	border-color: var(--green);
	box-shadow: 0 0 0 4px rgba(61, 122, 69, .12), var(--shadow);
}
.search::placeholder { color: #b3ad9a; }
.search::-webkit-search-cancel-button { display: none; }

.search-clear {
	position: absolute;
	right: 9px;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 50%;
	background: var(--border);
	color: var(--text-dim);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}
.search-clear:hover { background: var(--amber-light); color: #fff; }

/* 搜尋紀錄 */
.search-history {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	max-width: 560px;
	margin: 0 auto;
}
.search-history:not(:empty) { padding-top: 9px; }
.history-item {
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text-dim);
	border-radius: 999px;
	padding: 3px 12px;
	font-size: .78rem;
	cursor: pointer;
}
.history-item:hover { color: var(--amber); border-color: var(--amber-light); background: var(--amber-pale); }

/* 分類 chips */
.chips {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 11px 2px 5px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
	flex: 0 0 auto;
	border: 1.5px solid var(--border);
	background: var(--surface);
	color: var(--text);
	border-radius: 999px;
	padding: 6px 15px;
	font-size: .85rem;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: 0 1px 2px rgba(120, 95, 40, .05);
	transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.chip:hover { border-color: var(--green-light); transform: translateY(-1px); }
.chip.active {
	background: var(--green);
	border-color: var(--green);
	color: #fff;
	font-weight: 700;
	box-shadow: 0 2px 6px rgba(61, 122, 69, .3);
}
.chip.chip-safe.active { background: var(--feed-main); border-color: var(--feed-main); }
.chip.chip-danger.active { background: var(--feed-no); border-color: var(--feed-no); box-shadow: 0 2px 6px rgba(211, 56, 44, .3); }

/* ---------- 結果統計 ---------- */
.result-meta {
	font-size: .82rem;
	color: var(--text-dim);
	padding: 8px 2px 2px;
	min-height: 1.2em;
}

/* ---------- 卡片格線 ---------- */
.grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 13px;
	margin-top: 8px;
}
@media (min-width: 640px)  { .grid { grid-template-columns: repeat(3, 1fr); gap: 15px; } }
@media (min-width: 900px)  { .grid { grid-template-columns: repeat(4, 1fr); gap: 17px; } }
@media (min-width: 1150px) { .grid { grid-template-columns: repeat(5, 1fr); } }

.card {
	background: var(--surface);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border: 1px solid rgba(234, 228, 210, .7);
	overflow: hidden;
	cursor: pointer;
	padding: 0;
	text-align: left;
	font: inherit;
	color: inherit;
	display: flex;
	flex-direction: column;
	transition: transform .18s, box-shadow .18s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.card:active { transform: scale(.98); }

.card-media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: linear-gradient(160deg, var(--placeholder-bg) 0%, #ece5cd 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}
.card-media img.photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.card-media img.placeholder {
	width: 40%;
	max-width: 72px;
	opacity: .45;
}

.card-cat {
	position: absolute;
	top: 9px;
	left: 9px;
	background: rgba(255, 253, 245, .92);
	color: #8a6a25;
	font-size: .68rem;
	font-weight: 700;
	border-radius: 999px;
	padding: 2px 10px;
	box-shadow: 0 1px 3px rgba(60, 45, 10, .18);
}

.card-body { padding: 11px 13px 13px; flex: 1; display: flex; flex-direction: column; gap: 4px; }

.card-name {
	margin: 0;
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.35;
}
.card-alias {
	font-size: .72rem;
	color: var(--text-dim);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 適合度色帶 */
.feed-band {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: .74rem;
	font-weight: 700;
	color: #fff;
	border-radius: 8px;
	padding: 3px 10px;
	align-self: flex-start;
	box-shadow: 0 1px 3px rgba(60, 45, 10, .15);
}
.feed-band .n { opacity: .85; font-weight: 400; }
.feed-band img { width: 13px; height: 13px; }
.feed-main   { background: var(--feed-main); }
.feed-mod    { background: var(--feed-mod); }
.feed-little { background: var(--feed-little); }
.feed-no     { background: var(--feed-no); }

/* ---------- 載入 ---------- */
.loading {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	color: var(--text-dim);
	padding: 60px 0;
}
.spinner {
	width: 34px;
	height: 34px;
	border: 3px solid var(--border);
	border-top-color: var(--amber);
	border-radius: 50%;
	animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--text-dim);
	padding: 60px 20px;
}

.load-more-wrap { text-align: center; margin-top: 24px; }
.btn-load-more {
	background: var(--surface);
	border: 2px solid var(--green);
	color: var(--green);
	border-radius: 999px;
	padding: 11px 38px;
	font-size: .95rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: var(--shadow);
	transition: background .15s, color .15s;
}
.btn-load-more:hover { background: var(--green); color: #fff; }

.offline-note {
	margin-top: 18px;
	text-align: center;
	font-size: .8rem;
	color: #9a6b00;
	background: var(--amber-pale);
	border: 1px solid var(--amber-light);
	border-radius: var(--radius);
	padding: 8px 12px;
}

/* ---------- 詳細頁 dialog ---------- */
.detail {
	border: none;
	border-radius: var(--radius) var(--radius) 0 0;
	padding: 0;
	background: var(--surface);
	color: var(--text);
	width: 100%;
	max-width: 100%;
	max-height: 88dvh;
	margin: auto 0 0;
	box-shadow: var(--shadow-lift);
	overflow: hidden;
}
.detail[open] {
	display: flex;
	flex-direction: column;
}
.detail-media { flex: 0 0 auto; }
@media (min-width: 640px) {
	.detail {
		border-radius: var(--radius);
		max-width: 520px;
		margin: auto;
		max-height: 86dvh;
	}
}
.detail::backdrop { background: rgba(50, 42, 20, .5); }

.detail-media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: linear-gradient(160deg, var(--placeholder-bg) 0%, #ece5cd 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.detail-media img.photo { width: 100%; height: 100%; object-fit: cover; }
.detail-media img.placeholder { width: 22%; opacity: .45; }
.detail-media .img-credit {
	position: absolute;
	right: 0;
	bottom: 0;
	background: rgba(50, 42, 20, .6);
	color: rgba(255, 253, 245, .92);
	font-size: .64rem;
	padding: 2px 9px;
	border-top-left-radius: 8px;
	max-width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.detail-media .img-credit a { color: inherit; }

.detail-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 34px;
	height: 34px;
	border: none;
	border-radius: 50%;
	background: rgba(50, 42, 20, .5);
	color: #fff;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}
.detail-close:hover { background: rgba(50, 42, 20, .75); }

.detail-body {
	flex: 1 1 auto;
	min-height: 0;
	padding: 16px 18px 22px;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	overflow-anchor: none;
}

.detail-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.detail-tags .tag {
	font-size: .72rem;
	font-weight: 700;
	background: var(--amber-pale);
	border: 1px solid var(--amber-light);
	color: #8a6a25;
	border-radius: 999px;
	padding: 2px 11px;
}

.detail h2 { margin: 8px 0 0; font-size: 1.3rem; line-height: 1.4; }
.detail-latin { margin: 2px 0 0; font-style: italic; color: var(--text-dim); font-size: .85rem; }
.detail-latin:empty { display: none; }

.detail-feed-row {
	margin-top: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.detail-share {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1.5px solid var(--amber-light);
	background: var(--amber-pale);
	color: #8a6a25;
	border-radius: 999px;
	padding: 5px 14px;
	font-size: .8rem;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s, color .15s;
}
.detail-share:hover { background: var(--amber); border-color: var(--amber); color: #fff; }
.detail-share:active { transform: scale(.96); }

.detail-section { margin-top: 16px; }
.detail-section h3 {
	margin: 0 0 6px;
	font-size: .82rem;
	color: var(--amber);
	font-weight: 700;
	letter-spacing: .08em;
}
.detail-section p { margin: 0; font-size: .92rem; white-space: pre-line; }

.detail-links { display: flex; flex-direction: column; gap: 8px; }
.detail-links a {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--bg);
	border: 1.5px solid var(--border);
	border-radius: 11px;
	padding: 9px 13px;
	font-size: .88rem;
	color: var(--green);
	text-decoration: none;
	font-weight: 700;
	transition: border-color .15s, background .15s;
}
.detail-links a:hover { border-color: var(--green-light); background: #f2f6ee; }
.detail-links a .ext { margin-left: auto; color: var(--text-dim); font-weight: 400; font-size: .78rem; }

/* ---------- Footer ---------- */
.site-footer {
	max-width: 1200px;
	margin: 24px auto 0;
	padding: 24px 16px 40px;
	padding-bottom: max(40px, env(safe-area-inset-bottom));
	font-size: .78rem;
	color: var(--text-dim);
	text-align: center;
	border-top: 2px solid var(--border);
}
.site-footer a { color: var(--green); text-decoration: none; font-weight: 600; }
.site-footer a:hover { color: var(--amber); text-decoration: underline; }

/* ---------- 多語系（語言切換 / 建議橫幅 / 出處說明） ---------- */
/* 標題列右側工具（地球語言選單＋安裝圖示），與標題同一列，避免拉高 header */
.header-inner { min-height: 40px; }
.header-tools {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 6px;
}
.icon-btn {
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .3);
	color: #fff;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	transition: background .15s;
}
.icon-btn:hover { background: rgba(255, 255, 255, .26); }
.icon-btn:active { transform: scale(.94); }

.lang-dropdown { position: relative; display: inline-flex; }
.lang-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: var(--shadow-lift);
	padding: 6px;
	min-width: 132px;
	z-index: 50;
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: left;
}
.lang-menu[hidden] { display: none; }
.lang-menu-item {
	display: block;
	padding: 8px 12px;
	border-radius: 8px;
	color: var(--text);
	text-decoration: none;
	font-size: .9rem;
	font-weight: 600;
	white-space: nowrap;
}
.lang-menu-item:hover { background: var(--amber-pale); }
.lang-menu-item.active {
	color: var(--green);
	background: var(--amber-pale);
	cursor: default;
}

@media (max-width: 420px) {
	.site-header h1 { font-size: 1.3rem; }
	.header-tools { gap: 4px; }
	.icon-btn { width: 32px; height: 32px; }
}

.lang-banner {
	max-width: 1200px;
	/* 與 .container 內容對齊：左右內縮 16px，手機上才不會貼邊 */
	width: calc(100% - 32px);
	margin: 12px auto 0;
	padding: 10px 16px;
	background: var(--amber-pale);
	border: 1px solid var(--amber-light);
	border-radius: var(--radius);
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .9rem;
	color: var(--text);
}
/* class 的 display:flex 會蓋掉 [hidden] 預設的 display:none，需明確補回，否則 × 關不掉 */
.lang-banner[hidden] { display: none; }
.lang-banner-go {
	color: var(--green-dark);
	font-weight: 700;
	text-decoration: underline;
	white-space: nowrap;
}
.lang-banner-dismiss {
	margin-left: auto;
	background: none;
	border: none;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	color: var(--text-dim);
	padding: 0 4px;
}

.footer-about {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px dashed var(--border);
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.75;
	text-align: left;
}
.footer-about strong { color: var(--text); }