/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html, 
/* Page soft background */
body {
  margin: 0;
  font-family: "Fredoka", system-ui, -apple-system, sans-serif;
  color: #333;
  background:
    radial-gradient(1200px 500px at -10% -20%, #FDE2FF 0%, transparent 60%),
    radial-gradient(1000px 600px at 110% 0%, #E0F7FF 0%, transparent 60%),
    linear-gradient(#f6eef8, #F7FAFF);
}

/* ---------- Container & header ---------- */
.playful-container { max-width: 1200px; margin: 0 auto; padding: 16px; 
}

.cartoon-header .header-cloud {
  position: relative;
  background: #ffffff;
  border: 2px solid #BDEDD6;     /* 薄荷綠外框 */
  border-radius: 18px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  max-width: 1120px;
  margin: 8px auto 16px;
}
.main-title {
  font-family: "Bubblegum Sans", "Fredoka", system-ui, -apple-system, sans-serif;
  font-size: 40px;
  line-height: 1.15;
  color: #ff6ea8;                /* 粉色字 */
  text-shadow: 0 2px 0 #ffe1ec;
  margin: 0;
}
.subtitle { 
  color: #667085;
}

.sunshine {
  position: absolute;
  right: 12px;
  top: 8px;
  font-size: 20px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.10));
}

.floating-clouds {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.5;
  font-size: 32px;
}
.cloud { position: absolute; animation: drift 38s linear infinite; }
.cloud-1 { top: 10%; left: -8%;  animation-duration: 42s; }
.cloud-2 { top: 25%; left: 80%;  animation-duration: 36s; animation-direction: reverse; }
.cloud-3 { top: 60%; left: -6%;  animation-duration: 40s; }
.cloud-4 { top: 75%; left: 70%;  animation-duration: 34s; animation-direction: reverse; }

@keyframes drift {
  from { transform: translateX(0); }
  to   { transform: translateX(120vw); }
}

/* ---------- Two-column layout (desktop 50/50) ---------- */
.main-layout {
  display: grid;
  grid-template-columns: 1fr;           /* mobile: 一欄 */
  gap: 20px;
  align-items: start;
}
@media (min-width: 960px) {
  .main-layout { grid-template-columns: 1fr 1fr; } /* desktop: 50/50 */
}

/* Panels */
.drawing-panel, .sky-panel { 
  background: transparent; 
  position: relative; /* 確保小鳥定位正確 */
  overflow: hidden; /* 確保小鳥不會超出面板 - 遮罩效果 */
}
.drawing-panel h2, .sky-panel h2 { margin: 8px 0 12px; }

/* ---------- Canvas cards ---------- */
.draw-canvas, .sky-canvas {
  width: 100%;
  display: block;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border: 2px solid #f0e081;            /* 與你 UI 的黃框相近 */
}

/* 左側作畫：維持 4:3 比例 */
.draw-canvas { aspect-ratio: 4 / 3; }

/* 右側天空：維持你要的較高高度 */
/* Taller sky + gradient background */
.sky-canvas {
  width: 100%;
  height: clamp(460px, 58vh, 1000px);
  aspect-ratio: auto;
  display: block;
  border-radius: 8px;
  /* ✅ sky gradient (blue → lavender) */
  background: linear-gradient(180deg, #94D1FF 0%, #EAF4FF 48%, #E5D9FF 100%);
  border: 2px solid #f0e081; /* 你的黃框 */
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  overflow: hidden; /* 遮罩效果 - 小鳥超出時會被裁切 */
}

/* === V1 Brush Size look === */
.brush-dot {
  position: relative;
  background: #fff;              /* V1 白底 */
  border: 2px solid #e5e7eb;
}

.brush-dot::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 8px; height: 8px;       /* default for medium */
  border-radius: 50%;
  background: #111;              /* V1 的黑色內點 */
}

.brush-dot.small::after  { width: 10px !important;  height: 10px !important;  }
.brush-dot.medium::after { width: 14px !important;  height: 14px !important;  }
.brush-dot.large::after  { width: 18px !important; height: 18px !important; }

/* 已有的 active 外環就沿用，無需改 JS */



/* ---------- Cards (tools/colors) ---------- */
.brush-card, .color-card {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #dce5e9;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}


.brush-card h3, .color-card h3 { margin: 0 0 10px; }

/* 工具列：三區塊橫排（Brush / Bucket / History）+ 可自適應換行 */
.brush-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start; /* 改為 start 讓所有區塊從頂部對齊 */
}
.tool-zone h4 { 
  margin: 0 0 6px; 
  font-size: 14px; 
  color: #475467; 
  height: 20px; /* 固定標題高度確保對齊 */
  display: flex;
  align-items: center;
}

/* Brushes / Colors / History 群組對齊 */


.brush-dots, .color-group, .history-buttons {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}



/* Dots & active rings（你既有設定保留） */
.color-dot {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid #e5e7eb; background: var(--dot-color, #000);
}
.brush-dot {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid #e5e7eb; background: #fff; /* 保持白色背景以顯示黑色圓點 */
}
.brush-dot.active, .color-dot.active, .bucket-btn.active {
  outline: 3px solid #6FA8FF; outline-offset: 2px;
}

/* Bucket / Undo / Redo buttons */
.tool-btn {
  padding: 8px 12px;
  border-radius: 10px;
  border: 2px solid #e5e7eb; /* 改為 2px 與 brush-dot 一致 */
  background: #fff;
  cursor: pointer;
  font-size: 16px;
  width: 28px; /* 與 brush-dot 寬度一致 */
  height: 28px; /* 與 brush-dot 高度一致 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.undo-btn[aria-disabled="true"], .redo-btn[aria-disabled="true"] {
  opacity: 0.5; pointer-events: none;
}

/* Check button */
.check-btn {
  display: block;
  width: fit-content;
  margin: 14px auto 0;            /* 置中，不受左欄寬度影響 */
  padding: 10px 16px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(90deg,#ff8aa5,#ffb26b);
  color: #fff; font-weight: 700; cursor: pointer;
  box-shadow: 0 3px 10px rgba(255,140,160,0.25);
}

/* ---------- Sky status ---------- */
.sky-status {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
}
.sky-status .status {
  background: #fff; border: 1px solid #e5e7eb; padding: 8px 10px;
  border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}


/* ---------- Footer ---------- */
.cartoon-footer { margin-top: 24px; text-align: center; color: #667085; }
.footer-content p { margin: 6px 0; }

/* 讓 header cloud 與 canvas 寬度一致 */
.cartoon-header .header-cloud {
  max-width: 1280px;   /* 改成和下面主容器一樣寬度 (依你的 .main-container 設定) */
  margin: 0 auto 16px; /* 水平置中 */
  text-align: center;  /* 標題置中 */
}

/* 小鳥上下飛行動畫 - 使用遮罩效果，恢復明顯的浮動 */
@keyframes birdFloat {
  0% { transform: translateY(0px); }
  25% { transform: translateY(-20px); }  /* 恢復明顯的向上浮動 */
  50% { transform: translateY(0px); }
  75% { transform: translateY(25px); }   /* 恢復明顯的向下浮動 */
  100% { transform: translateY(0px); }
}

@keyframes birdFloat2 {
  0% { transform: translateY(0px); }
  30% { transform: translateY(30px); }   /* 恢復明顯的向下浮動 */
  60% { transform: translateY(-15px); }  /* 恢復明顯的向上浮動 */
  100% { transform: translateY(0px); }
}

@keyframes birdFloat3 {
  0% { transform: translateY(0px); }
  40% { transform: translateY(-18px); }  /* 恢復明顯的向上浮動 */
  80% { transform: translateY(20px); }   /* 恢復明顯的向下浮動 */
  100% { transform: translateY(0px); }
}

/* 小鳥動畫類別 */
.bird-float-1 { animation: birdFloat 3s ease-in-out infinite; }
.bird-float-2 { animation: birdFloat2 4s ease-in-out infinite; }
.bird-float-3 { animation: birdFloat3 3.5s ease-in-out infinite; }

/* 清除按鈕樣式 */
.clear-btn {
  position: absolute;
  top: 12px;
  right: 16px;
  padding: 8px 12px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  color: #6b7280;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 20;
}

/* 啟用狀態 */
.clear-btn:not(:disabled) {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #dc2626;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);
}

.clear-btn:not(:disabled):hover {
  background: #fee2e2;
  border-color: #f87171;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.clear-btn:not(:disabled):active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
}

/* 禁用狀態 */
.clear-btn:disabled {
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.6;
}

/* 通知樣式 */
.notification {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  z-index: 1000;
  animation: slideDown 0.3s ease-out;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.notification-success {
  background: #d1fae5;
  color: #065f46;
  border: 2px solid #a7f3d0;
}

.notification-warning {
  background: #fef3c7;
  color: #92400e;
  border: 2px solid #fcd34d;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}