/* ==========================================================================
   SAM KIDO - PHÂN KHU MỸ THUẬT & HỌA SĨ NHÍ (CSS)
   ========================================================================== */

/* Thanh điều hướng chế độ Mỹ thuật */
.art-mode-selector {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.art-mode-btn {
  background: white;
  border: 3px solid #ff9ff3;
  color: #5f27cd;
  padding: 10px 22px;
  border-radius: 50px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255, 159, 243, 0.25);
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.art-mode-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 20px rgba(255, 159, 243, 0.4);
}

.art-mode-btn.active {
  background: linear-gradient(135deg, #ff9ff3, #f368e0);
  color: white;
  border-color: #f368e0;
  box-shadow: 0 6px 18px rgba(243, 104, 224, 0.45);
}

/* ================= 1. KHUNG VẼ TỰ DO (CANVAS STUDIO) ================= */
.art-studio-arena {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.art-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.95);
  padding: 12px 18px;
  border-radius: 20px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  border: 2px solid #fed330;
  width: 100%;
  max-width: 800px;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tool-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: #57606f;
}

/* Bảng màu sắc */
.color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.color-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  padding: 0;
}

.color-dot:hover {
  transform: scale(1.2);
}

.color-dot.active {
  transform: scale(1.25);
  border-color: #2f3542;
  box-shadow: 0 0 0 3px #ff4757, 0 4px 10px rgba(0,0,0,0.25);
}

.color-dot.rainbow-brush {
  background: linear-gradient(135deg, #ff4757, #ffa502, #2ed573, #1e90ff, #a55eea);
}

/* Nút công cụ vẽ */
.tool-btn {
  background: #f1f2f6;
  border: 2px solid #ced6e0;
  border-radius: 12px;
  padding: 8px 14px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: #2f3542;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.tool-btn:hover {
  background: #dfe4ea;
  transform: translateY(-2px);
}

.tool-btn.active {
  background: #70a1ff;
  color: white;
  border-color: #1e90ff;
  box-shadow: 0 4px 10px rgba(30, 144, 255, 0.3);
}

.tool-btn.btn-save-art {
  background: linear-gradient(135deg, #2ed573, #10ac84);
  color: white;
  border-color: #10ac84;
  font-weight: 800;
}

.tool-btn.btn-save-art:hover {
  box-shadow: 0 6px 16px rgba(46, 213, 115, 0.4);
}

/* Khung vẽ Canvas */
.canvas-wrapper {
  position: relative;
  background: white;
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  border: 8px solid #fed330;
  overflow: hidden;
  touch-action: none;
  cursor: crosshair;
}

#art-drawing-canvas {
  display: block;
  background: #ffffff;
}

/* Bộ con dấu Sticker */
.stamps-palette {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.stamp-btn {
  font-size: 1.5rem;
  background: white;
  border: 2px solid #dfe4ea;
  border-radius: 10px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.stamp-btn:hover {
  transform: scale(1.2) rotate(8deg);
}

.stamp-btn.active {
  border-color: #ff4757;
  background: #ffeaa7;
  transform: scale(1.15);
  box-shadow: 0 3px 8px rgba(255, 71, 87, 0.3);
}

/* ================= 2. TRANH TÔ MÀU THẦN KỲ (COLORING BOOK) ================= */
.coloring-templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  max-height: 250px;
  overflow-y: auto;
  margin-bottom: 20px;
  padding: 10px;
  background: #F8FAFC;
  border-radius: 24px;
  border: 2px dashed #CBD5E0;
}

.template-card {
  background: white;
  border: 3px solid #E2E8F0;
  border-radius: 18px;
  padding: 12px 6px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
  transition: all 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.template-card:hover {
  transform: translateY(-4px) scale(1.04);
  border-color: #ff9ff3;
  box-shadow: 0 8px 18px rgba(255, 159, 243, 0.35);
}

.template-card.active {
  border-color: #f368e0;
  background: #fff0f9;
  box-shadow: 0 0 0 3px #ff9ff3, 0 6px 16px rgba(243, 104, 224, 0.35);
}

.template-card-icon {
  font-size: 2.5rem;
  margin-bottom: 4px;
}

.template-card-title {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: #2f3542;
  line-height: 1.2;
}

/* Khu vực bức tranh SVG đang tô */
.coloring-canvas-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.svg-coloring-box, .coloring-interactive-box {
  background: white;
  border-radius: 24px;
  border: 6px solid #ff9ff3;
  box-shadow: 0 10px 28px rgba(255, 159, 243, 0.25);
  padding: 14px;
  max-width: 480px;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

.coloring-interactive-canvas {
  width: 100%;
  height: auto;
  max-height: 480px;
  display: block;
  margin: 0 auto;
  border-radius: 16px;
  cursor: crosshair;
  background: white;
  touch-action: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  transition: transform 0.15s ease;
}

.template-card-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 12px;
  background: white;
  padding: 3px;
  border: 2px solid #F1F5F9;
  box-shadow: 0 3px 8px rgba(0,0,0,0.06);
  margin-bottom: 4px;
}

.coloring-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.btn-coloring-action {
  padding: 8px 18px;
  background: #F8FAFC;
  border: 2px solid #E2E8F0;
  border-radius: 18px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  color: #475569;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-coloring-action:hover {
  background: #FFF1F2;
  border-color: #FECDD3;
  color: #BE123C;
  transform: translateY(-2px);
}

.coloring-mode-badge {
  display: inline-block;
  padding: 4px 12px;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 12px;
  color: #1E40AF;
  font-size: 0.85rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.svg-coloring-art {
  width: 100%;
  height: auto;
  max-height: 400px;
  display: block;
}

.svg-coloring-art path {
  fill: #ffffff;
  stroke: #2f3542;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 0.25s ease, filter 0.2s;
}

.svg-coloring-art path:hover {
  filter: drop-shadow(0 0 6px #ff9ff3);
}

.btn-finish-coloring {
  background: linear-gradient(135deg, #ff9ff3, #f368e0);
  color: white;
  border: none;
  border-radius: 50px;
  padding: 12px 30px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(243, 104, 224, 0.4);
  transition: all 0.25s;
}

.btn-finish-coloring:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 24px rgba(243, 104, 224, 0.55);
}

/* ================= 3. ĐỐ VUI PHA MÀU SẮC (COLOR MIXING LAB) ================= */
.color-mixing-lab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.beaker-reaction-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 15px 0;
}

.beaker-card {
  background: white;
  border: 4px solid #dfe4ea;
  border-radius: 24px;
  padding: 20px 26px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.beaker-color-blob {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin: 0 auto 10px;
  box-shadow: inset 0 -4px 8px rgba(0,0,0,0.2), 0 6px 14px rgba(0,0,0,0.15);
  border: 3px solid white;
}

.beaker-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: #2f3542;
}

.beaker-operator {
  font-size: 2.2rem;
  font-weight: 900;
  color: #ff4757;
  font-family: var(--font-display);
}

.beaker-result-blob {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 10px;
  background: #f1f2f6;
  border: 3px dashed #a4b0be;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #747d8c;
}

.beaker-result-blob.mixed-success {
  border: 3px solid white;
  box-shadow: 0 0 20px rgba(255, 107, 129, 0.5);
  animation: pulse-grow 0.6s ease-out;
}

@keyframes pulse-grow {
  0% { transform: scale(0.6); opacity: 0.5; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}