:root {
  --color-bg: #E8F5E9;
  --color-primary: #4CAF50;
  --color-secondary: #FF9800;
  --color-accent: #FFEB3B;
  --color-text: #2E7D32;
  --color-white: #FFFFFF;
  --color-board-bg: rgba(255, 255, 255, 0.6);
  --shadow-soft: 0 8px 16px rgba(0,0,0,0.1);
  --shadow-btn: 0 4px 0 rgba(0,0,0,0.2);
  --radius-lg: 40px;
  --radius-md: 28px;
  --radius-sm: 16px;
  --pop-animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Design: 1170×2532 portrait, 2532×1170 landscape */
  /* 所有尺寸都是設計稿 px，scaleApp() 統一等比縮放 */
  --header-height: 160px;

  /* Portrait: board 1100×1100，dispatcher 2 排各 540px */
  --board-size: 1100px;
  --piece-size: 460px;
  --dispatcher-height: 596px;   /* 2 排 460px + gap 24px + padding 56px×2 */
  --dispatcher-cols: 2;

  /* Landscape: board 900×900，dispatcher 右側縱向 */
  --dispatcher-landscape-width: 560px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-touch-callout: none;
}

body {
  font-family: 'Nunito', sans-serif;
  background-color: var(--color-bg);
  background-image: radial-gradient(circle at 50% 50%, #F1F8E9 0%, #C8E6C9 100%);
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  margin: 0;
  padding: 0;
  position: relative;
}

.background-decorations {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: -1;
  font-size: 10rem;
  opacity: 0.3;
}
.tree-1 { position: absolute; bottom: 10%; left: 5%; animation: float 6s ease-in-out infinite; }
.tree-2 { position: absolute; top: 10%; right: 10%; animation: float 5s ease-in-out infinite reverse; }
.tree-3 { position: absolute; bottom: 20%; right: 5%; font-size: 8rem; animation: float 7s ease-in-out infinite; }

/* 遊戲進行時隱藏背景裝飾，避免干擾拼圖視覺 */
.background-decorations {
  transition: opacity 0.4s;
}
body:has(#screen-game.active) .background-decorations {
  opacity: 0 !important;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

/* ── App Container ──
   寬高由 JS scaleApp() 設定，CSS 只設 position/transform-origin
*/
#app {
  position: absolute;
  transform-origin: top left;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Screen Layer ── */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
}

.screen.active {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
}

/* ── Menu Screen ── */
#screen-menu {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 60px 40px;
}

.game-title {
  font-size: 8rem;
  color: var(--color-secondary);
  text-shadow: 4px 4px 0px #fff, 8px 8px 0px rgba(0,0,0,0.1);
  margin-bottom: 20px;
  animation: var(--pop-animation);
  line-height: 1.15;
}
.game-title span {
  font-size: 4rem;
  color: var(--color-primary);
  display: block;
}

.subtitle {
  font-size: 3rem;
  margin-bottom: 80px;
  font-weight: 700;
}

.difficulty-buttons {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 3rem;
  padding: 32px 64px;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: transform 0.1s, box-shadow 0.1s;
  background-color: var(--color-white);
}
.btn:hover { transform: translateY(-4px); box-shadow: 0 10px 0 rgba(0,0,0,0.2); }
.btn:active { transform: translateY(6px); box-shadow: none; }

.btn span {
  font-size: 2rem;
  font-weight: 700;
  opacity: 0.8;
  display: block;
  margin-top: 8px;
}

.btn-easy   { background-color: #81C784; color: white; border: 6px solid #4CAF50; }
.btn-medium { background-color: #FFB74D; color: white; border: 6px solid #FF9800; }
.btn-hard   { background-color: #F06292; color: white; border: 6px solid #E91E63; }
.btn-small  {
  font-size: 2.2rem;
  padding: 18px 36px;
  background-color: white;
  color: var(--color-text);
  border: 4px solid var(--color-text);
  border-radius: var(--radius-md);
  white-space: nowrap;
}

.menu-footer {
  margin-top: auto;
  padding-top: 60px;
  text-align: center;
  color: var(--color-text);
  font-size: 2rem;
}
.menu-footer p { margin-bottom: 16px; font-weight: 700; opacity: 0.9; }

.contact-link {
  display: inline-block;
  background: white;
  padding: 16px 32px;
  border-radius: 100px;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 900;
  font-size: 2rem;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s, box-shadow 0.2s;
}
.contact-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 32px rgba(0,0,0,0.15);
}

/* ── Game Screen ── */
#screen-game {
  display: flex;
  flex-direction: column;
  padding: 0;
  /* #app 是固定尺寸 absolute，screen 需要明確撐滿 */
  width: 100%;
  height: 100%;
}

/* Landscape: screen-game 改為 row layout */
#screen-game.game-screen--landscape {
  flex-direction: row;
}

/* ── Game Header ── */
.game-header {
  flex: 0 0 var(--header-height);
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  z-index: 10;
}

.timer {
  font-size: 3.5rem;
  font-weight: 900;
  background: white;
  padding: 12px 28px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  color: var(--color-secondary);
  white-space: nowrap;
}

/* Reference image thumbnail in header */
#reference-image {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  background: white;
  padding: 6px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  cursor: zoom-in;
  transition: transform 0.2s;
}
#reference-image:hover {
  transform: scale(1.1);
}
#reference-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* ── Game Layout ──
   Portrait:  flex-direction: column  (default)
   Landscape: flex: 1 (充滿左側空間)
*/
.game-layout {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 20px 0 20px;
}

/* Landscape: game-layout 充滿左側，置中 puzzle-board */
#screen-game.game-screen--landscape .game-layout {
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* Landscape CSS var overrides */
.game-layout--landscape {
  --piece-size: 380px;
}

.center-panel {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ── Puzzle Board ── 純 CSS 定義大小，scaleApp 縮放 */
.puzzle-board {
  display: grid;
  gap: 8px;
  background: rgba(255,255,255,0.5);
  padding: 16px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  width: var(--board-size);
  height: var(--board-size);
}

/* Landscape: 小一點的板子 */
.game-layout--landscape .puzzle-board {
  width: 900px;
  height: 900px;
}

.board-cell {
  background: rgba(255,255,255,0.4);
  border: 4px dashed rgba(0,0,0,0.1);
  border-radius: var(--radius-sm);
  position: relative;
}
.board-cell.filled {
  border: none;
}

.piece {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-size: var(--bg-size);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  cursor: grab;
  z-index: 10;
  transition: transform 0.1s;
}
.piece:active {
  cursor: grabbing;
  transform: scale(1.05);
  z-index: 100;
}
.piece.locked {
  cursor: default;
  box-shadow: none;
  border-radius: 0;
  transition: transform 0.3s, box-shadow 0.3s;
  z-index: 1;
}

/* ── Dispatcher (Tray) ──
   Portrait: horizontal strip at bottom
   Landscape: vertical strip on right (JS adds .game-screen--landscape class to screen-game)
*/
.dispatcher-container {
  flex: 0 0 auto;
  width: 100%;
  background: rgba(255,255,255,0.85);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-soft);
  padding: 24px 28px;
  overflow: hidden;
}

/* Landscape: dispatcher-container 變成右側縱向面板 */
#screen-game.game-screen--landscape .dispatcher-container {
  flex-direction: column;
  width: var(--dispatcher-landscape-width);  /* 560px */
  height: 100%;
  flex: 0 0 var(--dispatcher-landscape-width);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  overflow-y: auto;
  overflow-x: hidden;
  align-items: center;
  justify-content: flex-start;
  padding: 20px 16px;
}

#screen-game.game-screen--landscape .piece-dispatcher {
  grid-template-columns: var(--piece-size);  /* 1欄縱向 */
}

#screen-game.game-screen--landscape .btn-shuffle {
  width: 100%;
  margin: 0 0 16px 0;
}

.piece-dispatcher {
  display: grid;
  grid-template-columns: repeat(var(--dispatcher-cols), var(--piece-size));
  gap: 20px;
  justify-content: center;
}

/* Landscape dispatcher: 在 game-layout 右側縱向 */
.dispatcher-landscape {
  flex: 0 0 var(--dispatcher-landscape-width);
  width: var(--dispatcher-landscape-width);
  height: 100%;
  background: rgba(255,255,255,0.85);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow: var(--shadow-soft);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  gap: 16px;
}

.dispatcher-landscape .piece-dispatcher {
  grid-template-columns: var(--piece-size);
  gap: 16px;
}

.btn-shuffle {
  flex: 0 0 auto;
  font-size: 2rem;
  padding: 16px 28px;
  background-color: var(--color-accent);
  color: var(--color-text);
  border: 5px solid #FBC02D;
  border-radius: var(--radius-md);
  white-space: nowrap;
  display: block;
  margin: 0 auto 20px auto;
}

.dispatcher-slot {
  width: var(--piece-size);
  height: var(--piece-size);
  background: rgba(0,0,0,0.05);
  border-radius: var(--radius-sm);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ── Overlays ── */
.hidden-overlay {
  display: none !important;
}

/* Zoom Modal */
#image-modal {
  position: fixed;
  inset: 0;
  backdrop-filter: blur(10px);
  background: rgba(0,0,0,0.6);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-zoom-container {
  position: relative;
  max-width: 85vw;
  max-height: 85dvh;
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#enlarged-img {
  max-width: 100%;
  max-height: 85dvh;
  border-radius: var(--radius-lg);
  border: 12px solid white;
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
  object-fit: contain;
}

.close-zoom {
  position: absolute;
  top: -36px;
  right: -36px;
  width: 80px;
  height: 80px;
  background: #ff5252;
  color: white;
  border: 6px solid white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  cursor: pointer;
  z-index: 2001;
  font-weight: bold;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s;
}
.close-zoom:hover {
  transform: scale(1.1) rotate(90deg);
}

/* Celebration Screen */
#screen-celebration {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 1000;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.celebration-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(20px) brightness(0.7);
  transform: scale(1.1);
  z-index: -1;
}

.celebration-content {
  text-align: center;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  padding: 64px;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px rgba(0,0,0,0.3);
  max-width: 900px;
  width: 90%;
  border: 8px solid white;
  animation: var(--pop-animation);
}

.victory-icon {
  font-size: 8rem;
  margin-bottom: 16px;
  animation: bounce 2s infinite;
}

.victory-title {
  font-size: 5rem;
  color: var(--color-secondary);
  line-height: 1.2;
  margin-bottom: 32px;
  text-shadow: 3px 3px 0 white;
}

.result-image {
  width: 320px;
  height: 320px;
  margin: 0 auto 32px;
  border: 16px solid white;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  transform: rotate(-3deg);
}
.result-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.time-taken {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--color-primary);
  margin-bottom: 48px;
}

.celebration-buttons {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-primary {
  background-color: var(--color-primary);
  color: white;
  padding: 24px 48px;
  font-size: 2.4rem;
}
.btn-secondary {
  background-color: #f1f1f1;
  color: #666;
  border: 6px solid #ddd;
  padding: 24px 48px;
  font-size: 2.4rem;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

@keyframes animalBounce {
  0%   { transform: translate(-50%,-50%) scale(0.3) rotate(0deg);   opacity: 0; }
  20%  { transform: translate(var(--tx),var(--ty)) scale(1.1) rotate(-10deg); opacity: 1; }
  40%  { transform: translate(calc(var(--tx)*0.7),calc(var(--ty)*0.6)) scale(1.2) rotate(8deg); }
  60%  { transform: translate(calc(var(--tx)*1.1),calc(var(--ty)*1.1)) scale(1.0) rotate(-5deg); }
  80%  { transform: translate(calc(var(--tx)*0.9),var(--ty)) scale(1.15) rotate(5deg); }
  100% { transform: translate(-50%,-50%) scale(0) rotate(20deg);    opacity: 0; }
}

.bouncing-animal {
  position: fixed;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 10px solid white;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  object-fit: cover;
  z-index: 999;
  pointer-events: none;
  animation: animalBounce 1.5s ease-in-out forwards;
}

@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.8) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Preview / Peek Overlay ── */
#preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.82);
  z-index: 3000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preview-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 12px;
  width: 100%;
  animation: popIn 0.4s ease;
}

.preview-hint {
  font-size: 1.4rem;
  font-weight: 900;
  color: white;
  text-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

#preview-img {
  /* 撐滿螢幕短邊，留一點邊距 */
  width: calc(min(100vw, 100vh) - 48px);
  height: calc(min(100vw, 100vh) - 48px);
  max-width: 700px;
  max-height: 700px;
  object-fit: cover;
  border-radius: 20px;
  border: 6px solid white;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}

.preview-countdown {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--color-accent);
  text-shadow: 0 4px 12px rgba(0,0,0,0.5);
  min-width: 60px;
  text-align: center;
  line-height: 1;
}

.btn-peek {
  font-size: 2.8rem;
  padding: 8px 16px;
  background: rgba(255,255,255,0.9);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

/* ── Ghost Hint ── */
.ghost {
  position: absolute;
  inset: 0;
  opacity: 0.25;
  border-radius: var(--radius-sm);
  pointer-events: none;
  transition: opacity 0.3s;
}

/* ── Bounce animation (gentle, no error feel) ── */
@keyframes gentleBounce {
  0%   { transform: scale(1); }
  25%  { transform: scale(0.92) rotate(-3deg); }
  50%  { transform: scale(1.05) rotate(3deg); }
  75%  { transform: scale(0.96) rotate(-2deg); }
  100% { transform: scale(1); }
}

.piece-bounce {
  animation: gentleBounce 0.4s ease;
}