/* ============ 心田小遊戲樣式（沿用 style.css 的 :root token） ============ */

/* hidden 屬性必須壓過任何 display 樣式（實戰教訓：feedback_modal_hidden_attribute_override） */
[hidden] { display: none !important; }

.garden-wrap { padding: 28px 16px 56px; max-width: 900px; margin: 0 auto; }

.garden-stage {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(180deg, #dcebe3 0%, #eef3e4 34%, #f7f2e6 60%, #f3ead9 100%);
  box-shadow: var(--shadow-soft);
  padding-bottom: 26px;
  transition: background 2s ease;
}

/* ---------- 天空（依真實時間換色，鮮豔版） ---------- */
.sky { position: relative; height: 150px; overflow: hidden; }
.t-dawn  { --sky-a: #ffd9c0; --sky-b: #f9ecd4; }
.t-day   { --sky-a: #b9e2f2; --sky-b: #e7f3dd; }
.t-dusk  { --sky-a: #ffc9a3; --sky-b: #f2ddc8; }
.t-night { --sky-a: #2e3b52; --sky-b: #5a6a6e; }
/* 天空之下整片是鮮綠草原（開心農場風） */
.garden-stage.t-dawn  { background: linear-gradient(180deg, var(--sky-a), var(--sky-b) 26%, #a9d884 36%, #8bc968 58%, #7fbf5e); }
.garden-stage.t-day   { background: linear-gradient(180deg, var(--sky-a), var(--sky-b) 26%, #a9d884 36%, #8bc968 58%, #7fbf5e); }
.garden-stage.t-dusk  { background: linear-gradient(180deg, var(--sky-a), var(--sky-b) 26%, #a3cf7c 36%, #85bd60 58%, #79b356); }
.garden-stage.t-night { background: linear-gradient(180deg, var(--sky-a), var(--sky-b) 30%, #6f9a55 42%, #5d8b4a 62%, #548043); }
.t-night .garden-head h1, .t-night .garden-sub, .t-night .garden-eyebrow { color: #f6f1e4; }
.t-night .hills path:first-child { fill: #587e46; }
.t-night .hills path:last-child { fill: #4a6e3d; }
/* 草地細節：淡色草叢光斑 */
.garden-stage::after {
  content: ""; position: absolute; left: 0; right: 0; top: 170px; bottom: 0; pointer-events: none;
  background-image:
    radial-gradient(ellipse 46px 14px at 12% 30%, rgba(255, 255, 255, 0.14), transparent 70%),
    radial-gradient(ellipse 60px 16px at 82% 22%, rgba(255, 255, 255, 0.12), transparent 70%),
    radial-gradient(ellipse 50px 14px at 30% 78%, rgba(255, 255, 255, 0.1), transparent 70%),
    radial-gradient(ellipse 46px 13px at 70% 62%, rgba(60, 110, 40, 0.14), transparent 70%),
    radial-gradient(ellipse 40px 12px at 8% 60%, rgba(60, 110, 40, 0.12), transparent 70%);
}
.garden-head, .plots-grid, .tutorial-banner, .garden-note, .status-bar { position: relative; z-index: 2; }

.celestial {
  position: absolute; top: 26px; right: 12%;
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fff6d8, #f7cf5e);
  box-shadow: 0 0 38px rgba(247, 207, 94, 0.85);
}
.t-dawn .celestial, .t-dusk .celestial {
  background: radial-gradient(circle at 36% 32%, #ffe3b8, #f7a35e);
  box-shadow: 0 0 40px rgba(247, 163, 94, 0.8);
}
.t-night .celestial {
  background: radial-gradient(circle at 62% 36%, #f4f1e2, #cfcbb8);
  box-shadow: 0 0 26px rgba(240, 236, 214, 0.5);
}

/* 旋轉光芒（白天/清晨） */
.sunrays {
  position: absolute; top: -14px; right: calc(12% - 40px);
  width: 124px; height: 124px; border-radius: 50%; opacity: 0;
  background: conic-gradient(
    rgba(255, 236, 170, 0) 0deg, rgba(255, 236, 170, 0.45) 12deg, rgba(255, 236, 170, 0) 24deg,
    rgba(255, 236, 170, 0) 60deg, rgba(255, 236, 170, 0.45) 72deg, rgba(255, 236, 170, 0) 84deg,
    rgba(255, 236, 170, 0) 120deg, rgba(255, 236, 170, 0.45) 132deg, rgba(255, 236, 170, 0) 144deg,
    rgba(255, 236, 170, 0) 180deg, rgba(255, 236, 170, 0.45) 192deg, rgba(255, 236, 170, 0) 204deg,
    rgba(255, 236, 170, 0) 240deg, rgba(255, 236, 170, 0.45) 252deg, rgba(255, 236, 170, 0) 264deg,
    rgba(255, 236, 170, 0) 300deg, rgba(255, 236, 170, 0.45) 312deg, rgba(255, 236, 170, 0) 324deg
  );
  animation: sunspin 70s linear infinite;
}
.t-day .sunrays, .t-dawn .sunrays { opacity: 0.9; }
@keyframes sunspin { to { transform: rotate(360deg); } }

/* 夜空星星 */
.star {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #fdf6dd; opacity: 0; box-shadow: 0 0 5px 1px rgba(253, 246, 221, 0.7);
}
.t-night .star { animation: starTwinkle 3.2s ease-in-out infinite; }
.s1 { left: 12%; top: 24px; animation-delay: 0.2s !important; }
.s2 { left: 30%; top: 52px; animation-delay: 1.4s !important; }
.s3 { left: 47%; top: 20px; animation-delay: 2.1s !important; }
.s4 { left: 63%; top: 46px; animation-delay: 0.8s !important; }
.s5 { left: 82%; top: 70px; animation-delay: 2.7s !important; }
@keyframes starTwinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }

/* 白天飄浮光斑（花粉／光塵） */
.speck {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: #ffe9a8; opacity: 0; box-shadow: 0 0 6px 1px rgba(255, 233, 168, 0.6);
}
.t-day .speck, .t-dawn .speck, .t-dusk .speck { animation: speckFloat 9s ease-in-out infinite; }
.sp1 { left: 18%; top: 96px; animation-delay: 0s !important; }
.sp2 { left: 44%; top: 110px; animation-delay: 3s !important; }
.sp3 { left: 68%; top: 90px; animation-delay: 5.5s !important; }
.sp4 { left: 86%; top: 108px; animation-delay: 7s !important; }
@keyframes speckFloat {
  0%, 100% { opacity: 0; transform: translate(0, 0); }
  25% { opacity: 0.9; }
  50% { opacity: 0.5; transform: translate(-14px, -22px); }
  75% { opacity: 0.9; }
}

.cloud {
  position: absolute; height: 18px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.75); filter: blur(1px);
}
.cloud::before {
  content: ""; position: absolute; top: -9px; left: 22%;
  width: 46%; height: 20px; border-radius: 50%; background: inherit;
}
.cloud-1 { width: 96px; top: 34px; animation: drift 68s linear infinite; }
.cloud-2 { width: 64px; top: 74px; animation: drift 94s linear infinite reverse; opacity: 0.7; }
.t-night .cloud { opacity: 0.16; }
@keyframes drift { from { left: -140px; } to { left: 105%; } }

.firefly {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: #f2e2a0; opacity: 0; box-shadow: 0 0 8px 2px rgba(242, 226, 160, 0.8);
}
.t-night .firefly { animation: glow 5s ease-in-out infinite; }
.f1 { left: 22%; top: 70px; animation-delay: 0s !important; }
.f2 { left: 56%; top: 96px; animation-delay: 1.8s !important; }
.f3 { left: 78%; top: 58px; animation-delay: 3.2s !important; }
.f4 { left: 38%; top: 108px; animation-delay: 2.4s !important; }
.f5 { left: 68%; top: 84px; animation-delay: 4.1s !important; }
@keyframes glow { 0%, 100% { opacity: 0; } 45% { opacity: 0.95; } }

.butterfly { position: absolute; width: 30px; top: 60px; left: -40px; animation: flutter 42s ease-in-out infinite; }
.butterfly .wing-l, .butterfly .wing-r { transform-origin: 20px 15px; animation: flap 0.5s ease-in-out infinite alternate; }
.butterfly .wing-r { animation-direction: alternate-reverse; }
@keyframes flap { from { transform: scaleX(1); } to { transform: scaleX(0.55); } }
@keyframes flutter {
  0%   { transform: translate(0, 0); }
  6%   { transform: translate(24vw, -18px); }
  12%  { transform: translate(48vw, 14px); }
  18%  { transform: translate(76vw, -8px); }
  24%  { transform: translate(105vw, 6px); }
  24.1%, 100% { transform: translate(105vw, 6px); }
}

.hills { position: absolute; bottom: -2px; left: 0; width: 100%; height: 56px; }

/* ---------- 標頭列 ---------- */
.garden-head {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between;
  padding: 0 22px; margin-top: -6px; position: relative; z-index: 2;
}
.garden-head h1 { font-family: var(--font-display); font-size: 1.9rem; margin: 2px 0 4px; }
.garden-sub { color: var(--color-ink-soft); margin: 0; font-size: 0.95rem; }
.garden-eyebrow { background: rgba(255, 255, 255, 0.7); }

.status-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255, 255, 255, 0.85); border: 1px solid var(--color-line);
  border-radius: 999px; padding: 6px 12px; font-size: 0.86rem; color: var(--color-ink);
}
.chip-btn { cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.chip-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.chip-primary { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.chip-badge { position: relative; }
.chip-badge::after {
  content: ""; position: absolute; top: 2px; right: 4px; width: 8px; height: 8px;
  border-radius: 50%; background: #d98f6c;
}

.tutorial-banner {
  margin: 14px 22px 0; padding: 10px 16px; border-radius: var(--radius-md, 12px);
  background: rgba(255, 255, 255, 0.9); border: 1px dashed var(--color-sage);
  color: var(--color-ink); font-size: 0.92rem; position: relative; z-index: 2;
}
.tutorial-banner p { margin: 0; }

/* ---------- 田地 ---------- */
.plots-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  padding: 18px 22px 6px; position: relative; z-index: 2;
}
.plot {
  position: relative; border: none; cursor: pointer; border-radius: 16px;
  background: none; padding: 4px 2px 6px; min-height: 138px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  transition: transform 0.18s ease, filter 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  transform: scale(var(--row-scale, 1));
}
.plot:hover { transform: scale(var(--row-scale, 1)) translateY(-3px); filter: brightness(1.05); }
.plot:active { transform: scale(calc(var(--row-scale, 1) * 0.96)); }
/* 三排微透視：後排小、前排大 */
.plot:nth-child(-n+3) { --row-scale: 0.92; z-index: 1; }
.plot:nth-child(n+4):nth-child(-n+6) { --row-scale: 1; z-index: 2; }
.plot:nth-child(n+7) { --row-scale: 1.06; z-index: 3; }

.field-plant {
  position: relative; width: 84px; height: 84px; margin-bottom: -30px; z-index: 2;
  display: flex; align-items: flex-end; justify-content: center; pointer-events: none;
}
.field-plant svg { width: 100%; height: 100%; overflow: visible; }

.plot-bed { width: 116px; height: 62px; }
.plot-bed svg { width: 100%; height: 100%; overflow: visible; }

.plot-chip {
  margin-top: 2px; font-size: 0.78rem; line-height: 1.3; color: var(--color-ink-soft);
  background: rgba(255, 253, 246, 0.92); border-radius: 999px; padding: 3px 10px;
  white-space: nowrap; box-shadow: 0 2px 6px rgba(52, 47, 41, 0.12); z-index: 3;
}

.plot--empty .plot-chip { color: var(--color-accent-dark); }

.plot--locked { cursor: default; }
.plot--locked:hover { transform: scale(var(--row-scale, 1)); filter: none; }
.plot--locked .plot-chip { background: rgba(255, 253, 246, 0.7); }

.plot--ready .field-plant { animation: readyPulse 2.2s ease-in-out infinite; }
.plot--ready .plot-chip { background: var(--color-gold-soft); color: #5c4a22; font-weight: 600; }
@keyframes readyPulse { 0%, 100% { filter: drop-shadow(0 0 2px rgba(217, 183, 126, 0.4)); } 50% { filter: drop-shadow(0 0 14px rgba(240, 190, 100, 1)); } }
/* 就緒光環：擴散圓圈＋閃星 */
.plot--ready .field-plant::before {
  content: ""; position: absolute; left: 50%; top: 40%; width: 54px; height: 54px;
  margin: -27px 0 0 -27px; border-radius: 50%;
  border: 2px solid rgba(242, 185, 63, 0.7);
  animation: ringGrow 2.2s ease-out infinite; pointer-events: none;
}
.plot--ready .field-plant::after {
  content: "✦"; position: absolute; right: 0; top: 2px; color: #ffd76e;
  font-size: 0.95rem; animation: starTwinkle 1.6s ease-in-out infinite; pointer-events: none;
}
@keyframes ringGrow { from { transform: scale(0.5); opacity: 0.9; } to { transform: scale(1.35); opacity: 0; } }

.plot-water-dot {
  position: absolute; top: 32%; right: 14%; font-size: 0.85rem; z-index: 4;
  filter: drop-shadow(0 1px 2px rgba(40, 70, 30, 0.4));
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* 植物搖曳（樞紐固定在土面 y=72 使用者座標，盆栽版/田間版通用） */
.sway { transform-origin: 40px 72px; animation: sway 5s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.4deg); } }
.stage-pop { animation: popIn 0.5s cubic-bezier(0.34, 1.5, 0.64, 1); transform-origin: 40px 72px; }
/* pop 與 sway 同時掛：pop 完接續搖曳（單獨 animation 會互蓋，實測教訓） */
.sway.stage-pop { animation: popIn 0.5s cubic-bezier(0.34, 1.5, 0.64, 1), sway 5s ease-in-out 0.5s infinite; }
@keyframes popIn { from { transform: scale(0.55); opacity: 0.3; } to { transform: scale(1); opacity: 1; } }

/* ---------- 植物生命感（各作物專屬小動畫） ---------- */
.leaf-flutter { transform-origin: 50% 100%; transform-box: fill-box; animation: flutterLeaf 3.4s ease-in-out infinite; }
@keyframes flutterLeaf { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(3deg); } }

.dew-pulse { animation: dewPulse 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.dew-pulse.d2 { animation-delay: 1s; }
.dew-pulse.d3 { animation-delay: 2s; }
@keyframes dewPulse { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.25); opacity: 1; } }

.twinkle { animation: twinkleStar 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.twinkle.d2 { animation-delay: 1.2s; }
@keyframes twinkleStar { 0%, 100% { opacity: 0.25; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.15); } }

.petal-fall { animation: petalFall 6s ease-in-out infinite; }
@keyframes petalFall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  15% { opacity: 0.9; }
  60% { transform: translate(-6px, 16px) rotate(70deg); opacity: 0.8; }
  100% { transform: translate(-10px, 26px) rotate(120deg); opacity: 0; }
}

.rise-orb { animation: riseOrb 4.5s ease-in-out infinite; }
.rise-orb.d2 { animation-delay: 2.2s; }
@keyframes riseOrb {
  0% { transform: translateY(6px); opacity: 0; }
  30% { opacity: 0.95; }
  100% { transform: translateY(-16px); opacity: 0; }
}

.halo-pulse { animation: haloPulse 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes haloPulse { 0%, 100% { opacity: 0.14; transform: scale(1); } 50% { opacity: 0.32; transform: scale(1.18); } }

.water-bounce { animation: waterBounce 0.7s cubic-bezier(0.34, 1.5, 0.64, 1); }
@keyframes waterBounce { 0% { transform: scale(1); } 35% { transform: scale(1.08) rotate(-2deg); } 70% { transform: scale(0.97) rotate(1.5deg); } 100% { transform: scale(1); } }

/* ---------- 動作特效層 ---------- */
.fx-layer { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 4; }

.fx-poof span {
  position: absolute; left: 50%; top: 58%; width: 15px; height: 15px; border-radius: 50%;
  background: #cbb59a; animation: poof 0.6s ease-out forwards;
}
.fx-poof .p2 { margin-left: -16px; background: #d9c6ab; animation-delay: 0.08s; }
.fx-poof .p3 { margin-left: 10px; background: #bfa88b; animation-delay: 0.14s; }
@keyframes poof { from { transform: scale(0.4); opacity: 0.85; } to { transform: scale(1.9) translateY(-8px); opacity: 0; } }

.fx-water .can {
  position: absolute; width: 42px; left: 50%; top: 4px; margin-left: -6px;
  transform-origin: 20% 80%; animation: canPour 1.15s ease forwards; opacity: 0;
}
@keyframes canPour {
  0% { transform: rotate(0deg) translateY(-6px); opacity: 0; }
  18% { opacity: 1; }
  40%, 78% { transform: rotate(-26deg) translateY(0); opacity: 1; }
  100% { transform: rotate(0deg) translateY(-4px); opacity: 0; }
}
.fx-water .fx-drop {
  position: absolute; left: 46%; top: 30px; width: 5px; height: 8px;
  background: #7fc0dd; border-radius: 50% 50% 60% 60%;
  opacity: 0; animation: dropFall 0.55s ease-in forwards; animation-delay: 0.3s;
}
.fx-water .fx-drop.d2 { left: 52%; animation-delay: 0.48s; }
.fx-water .fx-drop.d3 { left: 42%; animation-delay: 0.64s; }
@keyframes dropFall { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(30px); } }

.fx-burst .fx-p {
  position: absolute; left: 50%; top: 44%; width: 9px; height: 9px;
  border-radius: 62% 38% 60% 40%; animation: burstFly 0.9s cubic-bezier(0.2, 0.7, 0.4, 1) forwards;
}
.fx-burst .fx-star {
  position: absolute; left: 50%; top: 40%; margin-left: -8px; color: #f2b93f;
  font-size: 1.3rem; animation: burstStar 0.8s ease-out forwards;
}
@keyframes burstFly { to { transform: translate(var(--dx), var(--dy)) rotate(220deg) scale(0.35); opacity: 0; } }
@keyframes burstStar { 0% { transform: scale(0.4); opacity: 1; } 100% { transform: scale(1.8) translateY(-14px); opacity: 0; } }

.garden-note { text-align: center; color: #2f5527; font-size: 0.86rem; margin: 14px 20px 0; position: relative; z-index: 2; }
.t-night .garden-note { color: #dcecc9; }

/* 茅草小屋（草原右上角，窄螢幕隱藏） */
.hut { position: absolute; right: 3%; top: 158px; width: 132px; z-index: 1; pointer-events: none; }
@media (max-width: 680px) { .hut { display: none; } }

/* ---------- 通用 modal（⚠️ [hidden] 必須壓過 display，實戰教訓） ---------- */
.gmodal {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(52, 47, 41, 0.45); padding: 18px; backdrop-filter: blur(2px);
}
.gmodal[hidden] { display: none !important; }
.gmodal-card {
  position: relative; width: 100%; max-width: 400px; max-height: 86vh; overflow-y: auto;
  background: var(--color-card, #fff); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift, var(--shadow-soft)); padding: 26px 22px 22px;
  animation: modalIn 0.28s ease;
}
.gmodal-card--wide { max-width: 560px; }
@keyframes modalIn { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.gmodal-close {
  position: absolute; top: 10px; right: 12px; border: none; background: none;
  font-size: 1.5rem; line-height: 1; color: var(--color-ink-soft); cursor: pointer; padding: 6px;
}
.gmodal-title { font-family: var(--font-display); margin: 0 0 14px; font-size: 1.2rem; }

/* ---------- 登入/註冊 ---------- */
.auth-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.auth-tab {
  flex: 1; padding: 9px 0; border: 1px solid var(--color-line); background: #faf6ee;
  border-radius: 999px; cursor: pointer; font-size: 0.95rem; color: var(--color-ink-soft);
}
.auth-tab.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.auth-field { margin-bottom: 12px; }
.auth-field label { display: block; font-size: 0.85rem; color: var(--color-ink-soft); margin-bottom: 4px; }
.auth-field input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--color-line); border-radius: 10px;
  font-size: 1rem; background: #fffdf8; box-sizing: border-box;
}
.auth-field input:focus { outline: 2px solid var(--color-sage); border-color: var(--color-sage); }
.auth-hint { font-size: 0.78rem; color: var(--color-ink-soft); margin: 6px 0 0; }
.auth-error { color: #a5544a; font-size: 0.86rem; min-height: 1.2em; margin: 4px 0 8px; }
.auth-submit { width: 100%; }
.auth-note { font-size: 0.82rem; color: var(--color-ink-soft); margin: 14px 0 0; text-align: center; }

/* ---------- 種子選單 ---------- */
.seed-list { display: flex; flex-direction: column; gap: 10px; }
.seed-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: 1px solid var(--color-line); background: #fffdf8; border-radius: 14px;
  padding: 10px 12px; cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease;
}
.seed-item:hover { border-color: var(--color-sage); transform: translateY(-1px); }
.seed-item[disabled] { opacity: 0.5; cursor: default; }
.seed-item[disabled]:hover { transform: none; border-color: var(--color-line); }
.seed-icon { width: 50px; height: 58px; flex: none; display: flex; align-items: flex-end; justify-content: center; }
.seed-icon svg { width: 100%; height: 100%; overflow: visible; }
.seed-info h4 { margin: 0 0 2px; font-size: 0.98rem; }
.seed-info p { margin: 0; font-size: 0.8rem; color: var(--color-ink-soft); line-height: 1.45; }

/* ---------- 田地詳情 ---------- */
.plot-detail-svg { width: 110px; height: 110px; margin: 0 auto 8px; }
.plot-detail-svg svg { width: 100%; height: 100%; overflow: visible; }
.plot-detail-time { text-align: center; color: var(--color-ink); margin: 0 0 14px; font-size: 1rem; }
#btnWater { width: 100%; }
.plot-detail-note { text-align: center; font-size: 0.8rem; color: var(--color-ink-soft); margin: 10px 0 0; }

/* ---------- 翻卡 ---------- */
.gmodal-card--reveal { text-align: center; }
.reveal-card { perspective: 900px; width: 230px; height: 300px; margin: 6px auto 12px; }
.reveal-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform 0.9s cubic-bezier(0.3, 1.2, 0.4, 1);
}
.reveal-card.is-flipped .reveal-inner { transform: rotateY(180deg); }
.reveal-face {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px; box-sizing: border-box;
}
.reveal-back {
  background: linear-gradient(160deg, var(--color-sage), #5f7a63);
  color: rgba(255, 255, 255, 0.9); font-size: 2.4rem; font-family: var(--font-display);
  box-shadow: var(--shadow-soft); cursor: pointer;
}
.reveal-back--sign { background: linear-gradient(160deg, var(--color-gold-soft), #b98d4f); }
.reveal-front {
  background: #fffdf6; border: 1px solid var(--color-line); transform: rotateY(180deg);
  box-shadow: var(--shadow-soft); gap: 12px;
}
.card-type {
  font-size: 0.75rem; letter-spacing: 0.2em; color: #fff; background: var(--color-sage);
  border-radius: 999px; padding: 3px 12px;
}
.card-type--agri { background: var(--color-accent); }
.card-type--sign { background: var(--color-gold-soft); color: #5c4a22; }
.card-text { font-family: var(--font-display); font-size: 1.02rem; line-height: 1.85; color: var(--color-ink); margin: 0; }
.card-new { font-size: 0.8rem; color: var(--color-accent-dark); }
.reveal-reward { color: var(--color-ink-soft); font-size: 0.9rem; min-height: 1.3em; margin: 0; }

.coupon-pop {
  margin-top: 14px; border: 1px dashed var(--color-gold-soft); border-radius: 14px;
  padding: 14px; background: #fffaef;
}
.coupon-pop h4 { margin: 0 0 6px; font-family: var(--font-display); }
.coupon-pop p { margin: 0; font-size: 0.82rem; color: var(--color-ink-soft); }
.coupon-code {
  font-size: 1.25rem !important; letter-spacing: 0.08em; color: var(--color-accent-dark) !important;
  font-weight: 700; margin: 4px 0 6px !important;
}

/* ---------- 圖鑑 ---------- */
.codex-count { font-size: 0.85rem; color: var(--color-ink-soft); font-weight: 400; }
.codex-group h4 { margin: 16px 0 8px; font-size: 0.95rem; color: var(--color-accent-dark); }
.codex-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.codex-card {
  border: 1px solid var(--color-line); border-radius: 12px; padding: 10px 12px;
  font-size: 0.8rem; line-height: 1.7; background: #fffdf8; color: var(--color-ink);
}
.codex-card--unknown { color: var(--color-ink-soft); background: #f6f1e7; text-align: center; }

/* ---------- 禮遇 ---------- */
.coupon-list { display: flex; flex-direction: column; gap: 10px; }
.coupon-item { border: 1px solid var(--color-line); border-radius: 14px; padding: 12px 14px; background: #fffdf8; }
.coupon-item h4 { margin: 0 0 4px; font-size: 0.95rem; }
.coupon-item .coupon-code { font-size: 1.1rem !important; }
.coupon-status { font-size: 0.75rem; border-radius: 999px; padding: 2px 10px; }
.coupon-status--active { background: #e8f0e6; color: #4d6b52; }
.coupon-status--redeemed { background: #eee7db; color: var(--color-ink-soft); }
.coupon-empty { text-align: center; color: var(--color-ink-soft); font-size: 0.88rem; padding: 18px 0; }

/* ---------- 設定 ---------- */
.settings-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.fx-toggle { display: flex; gap: 6px; }
.fx-btn {
  border: 1px solid var(--color-line); background: #faf6ee; border-radius: 999px;
  padding: 7px 16px; cursor: pointer; font-size: 0.88rem; color: var(--color-ink-soft);
}
.fx-btn.is-active { background: var(--color-sage); border-color: var(--color-sage); color: #fff; }

/* 動效關閉：畫面保持安定（獨立設定，不跟隨系統減少動態） */
.fx-off .garden-stage *, .fx-off .garden-stage *::before, .fx-off .garden-stage *::after,
.fx-off .plot-detail-svg * { animation: none !important; }

/* ---------- 店家後台 ---------- */
.admin-panel { margin-top: 26px; }
.admin-panel .card { padding: 22px; }
.admin-row { margin-top: 14px; }
.admin-row h3 { font-size: 1rem; margin: 0 0 8px; }
.admin-form { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-form input {
  flex: 1 1 160px; padding: 10px 12px; border: 1px solid var(--color-line);
  border-radius: 10px; font-size: 0.95rem; background: #fffdf8;
}
.admin-result { margin-top: 10px; font-size: 0.9rem; line-height: 1.8; }
.admin-msg { font-size: 0.85rem; color: var(--color-ink-soft); min-height: 1.2em; }

/* ---------- 手機 ---------- */
@media (max-width: 520px) {
  .garden-wrap { padding: 14px 10px 40px; }
  .plots-grid { gap: 6px; padding: 14px 10px 4px; }
  .plot { min-height: 118px; }
  .field-plant { width: 66px; height: 66px; margin-bottom: -24px; }
  .plot-bed { width: 96px; height: 52px; }
  .plot-chip { font-size: 0.7rem; padding: 2px 8px; }
  .garden-head { padding: 0 14px; }
  .garden-head h1 { font-size: 1.5rem; }
  .sky { height: 120px; }
  .codex-grid { grid-template-columns: 1fr; }
}